So I'm trying to build a simple Omnibox extension for Chrome for personal use. It works like any other Omnibox extension: you enter the extension keyword and press tab, which gives the extension control of the omnibox. Then you type in a phrase or whatnot and a list of suggestions pop up below the omnibox. Then you can use the arrow keys or mouse to select a suggestion and then the browser navigates to the page associated with that suggestion. All of that works perfectly fine.
However, what I'd like it to do is that when I press enter in without having selected a suggestion, I'd like the browser to go to the first suggestion from the suggestion list. Instead what happens right now, I get this error page:
I couldn't find any answers in the documentation on this. This is what my code looks like right now (in background.js):
chrome.omnibox.onInputChanged.addListener(
function(text, suggest)
{
text = text.replace(" ", "");
suggest([
{ content: "http://reddit.com/r/" + text, description: "reddit.com/r/" + text },
{ content: "http://imgur.com/r/" + text, description: "imgur.com/r/" + text }
]);
}
);
chrome.omnibox.onInputEntered.addListener(
function(text)
{
chrome.tabs.getSelected(null, function(tab)
{
chrome.tabs.update(tab.id, {url: text});
});
}
);
chrome.omnibox.setDefaultSuggestion({ description: "visit /r/%s" });
So is there a way of setting the default action when the enter is pressed without a suggestion being selected? Sort of like the custom search functionality works by default in the Chrome omnibox?
Within chrome.omnibox.onInputChanged.addListener(), you'll want to call chrome.omnibox.setDefaultSuggestion().
So when you type something in the Omnibox, you'll want to make the first suggestion become the default suggestion (so you don't have to press the Down Arrow), and then suggest() any remaining suggestions like normal.
Example:
chrome.omnibox.onInputChanged.addListener(
function(text, suggest)
{
text = text.replace(" ", "");
// Add suggestions to an array
var suggestions = [];
suggestions.push({ content: "http://reddit.com/r/" + text, description: "reddit.com/r/" + text });
suggestions.push({ content: "http://imgur.com/r/" + text, description: "imgur.com/r/" + text });
// Set first suggestion as the default suggestion
chrome.omnibox.setDefaultSuggestion({description:suggestions[0].description});
// Remove the first suggestion from the array since we just suggested it
suggestions.shift();
// Suggest the remaining suggestions
suggest(suggestions);
}
);
chrome.omnibox.onInputEntered.addListener(
function(text)
{
chrome.tabs.getSelected(null, function(tab)
{
var url;
if (text.substr(0, 7) == 'http://') {
url = text;
// If text does not look like a URL, user probably selected the default suggestion, eg reddit.com for your example
} else {
url = 'http://reddit.com/r/' + text;
}
chrome.tabs.update(tab.id, {url: url});
});
}
);
Related
Is there a way to only show part of a document, or in monacos case of a model, while still getting intellisense for the whole document?
I only want a user to edit a part of a document, but the user should be able to get the right contextual intellisense.
It would be best for my usecase to hide the uneditable sections, but deactivating them would also be ok.
In case this is not possible, is there any embedded editor that can do this, or can this be achived by modifying the language server?
Monaco editor loads every line as a container under a section with the class name "view-lines". Once the editor content has loaded, set "display: none" to the corresponding container for each line that you want to hide.
Implementation: https://jsfiddle.net/renatodc/s6fxedo2/
let value = `function capitalizeFirstLetter(string) {
\treturn string.charAt(0).toUpperCase() + string.slice(1);
}
$(function() {
\tlet word = "script";
\tlet result = capitalizeFirstLetter(word);
\tconsole.log(result);
});
`
let linesToDisable = [1,2,3];
let editor = monaco.editor.create(document.getElementById('container'), {
value,
language: 'javascript',
theme: 'vs-dark',
scrollbar: {
vertical: "hidden",
handleMouseWheel: false
},
scrollBeyondLastLine: false
});
// onLoad event for Monaco Editor: https://github.com/Microsoft/monaco-editor/issues/115
let didScrollChangeDisposable = editor.onDidScrollChange(function() {
didScrollChangeDisposable.dispose();
setTimeout(function() {
$(".monaco-editor .view-lines > div").each(function(i) {
if(linesToDisable.includes(i+1)) {
$(this).css("display","none");
$(this).css("pointer-events","none");
}
});
},1000);
});
Scrolling from Monaco will render the lines again and break the implementation. To prevent this, disable the scrolling feature in Monaco, set a fixed height for the editor container, and use the browser or a parent container to scroll instead.
If you use the arrow keys 'up' or 'down' to navigate to the hidden content, the cursor will still work, and typing will break the implementation. You might be able to use the editor's onKeyDown event to prevent this.
If you're looking for a break-proof implementation, I would suggest loading Monaco editor only with the portion of the document that you wish to edit. Then extend the completion provider (Intellisense) as shown in this example: https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-completion-provider-example
monaco.languages.registerCompletionItemProvider('javascript', {
provideCompletionItems: function(model, position) {
return {
suggestions: [
{
label: "capitalizeFirstLetter",
kind: monaco.languages.CompletionItemKind.Method,
documentation: "Capitalize the first letter of a word",
insertText: "capitalizeFirstLetter("
}
]
};
}
});
monaco.editor.create(document.getElementById("container"), {
value: `$(function() {
\tlet word = "script";
\tlet result = capitalizeFirstLetter(word);
\tconsole.log(result);
});
`,
language: "javascript"
});
Use an AST parser like Esprima to get the identifiers from your source document, and plug these into the suggestions array.
I have a requirement to display the image(help icon) in the ionic alert popup. I am using localization in our application. So what I have done right now is displayed the image using CSS class from translate strings as follows,
"PBMNotConnected": "<div>We didn't detect a PBM connected to your device.</div><p class='pbmAlertInfoBox'>Please select the <span class='infoIcon' (click)='goToHelp()'></span> (info icon) for help.</p>",
Now I am able to see the help icon in the alert box but, I want to bind the click event to that help icon. I have added (click) attribute in translate string but it doesn't work.
Following is the common code for presenting alert popup
/**
* show alert message
* #description pass non translated strings of title, subtitle, message and buttons text
*/
presentAlert(title, subtitle, message, cssClass, okText, hideButtons?:boolean) {
let buttons = [];
if(!hideButtons){
buttons = [this.getTranslate(okText, {})];
}
let alert = this.alertController.create({
title: this.getTranslate(title, {}),
subTitle: subtitle ? this.getTranslate(subtitle, {}) : '',
message: this.getTranslate(message, {}),
cssClass: cssClass,
buttons: buttons,
enableBackdropDismiss: false
});
alert.present();
return alert;
}
and then I have tried to bind the event using following code manually,
let alert = this.popUpService.presentAlert('error', undefined, 'PBMNotConnected', 'custom-popup-ok error', 'ok');
let elements: any = document.getElementsByClassName('.pbmAlertInfoBox .infoIcon');
if(elements.length > 0){
elements[0].click = () => {
this.goToHelp();
}
}
but now, the problem is I don't know when exactly the alert popup opens, so I need your help to know any event available after opening the alert popup.
Thanks in advance.
I am developing one custom plugin for the CKEditor 4.7 which do a simple think take in case user select some stuff it will put it in a div with specific class, else it will put a div with same class just with text like 'Add content here'
I try to use some functions according to CKEditor docs but have something really wrong.
here is the code for the plugin folder name=> customdiv, file=> plugin.js
CKEDITOR.plugins.add('customdiv', {
icons: 'smile',
init: function (editor) {
editor.addCommand( 'customdiv',{
exec : function( editor ){
var selection = editor.getSelection();
if(selection.length>0){
selection='<div class="desktop">'+selection+'</div>';
}else{
selection='<div class="desktop">Add your text here </div>';
}
return {
selection
};
}
});
editor.ui.addButton( 'Customdiv',
{
label : 'Custom div',
command : 'customdiv',
toolbar: 'customdiv',
icon : this.path + 'smile.png'
});
if (editor.contextMenu) {
editor.addMenuGroup('divGroup');
editor.addMenuItem('customdiv', {
label: 'Customdiv',
icon: this.path + 'icons/smile.png',
command: 'customdiv',
group: 'divGroup'
});
editor.contextMenu.addListener(function (element) {
if (element.getAscendant('customdiv', true)) {
}
});
}
}
});
According to some docs it have to return the result good.
Also this is how I call them in my config.js file
CKEDITOR.editorConfig = function (config) {
config.extraPlugins = 'templates,customdiv';
config.allowedContent = true;
config.toolbar = 'Custom';
config.toolbar_Custom = [
{ name: 'divGroup', items: [ 'Customdiv' ] },
{name: 'document', items: ['Source', '-', 'Save', 'Preview', '-', 'Newplugin']},
/* MOre plugins options here */
];
};
Note: the official forum was close and moved here :(
UPDATE
I have change the function like this
exec : function( editor ){
var selection = editor.getSelection();
if(selection.length>0){
selection='<div class="desktop">'+selection+'</div>';
CKEDITOR.instances.editor1.insertHtml( selection );
}else{
selection='<div class="desktop">Add your text here </div>';
CKEDITOR.instances.editor1.insertHtml( selection );
}
}
This makes it work for the else part, but still can't get the selected one.
UPDATE 2
After change of the if I can get data if is selected, but when I do insert selected between <div> I face a problem.
var selection = editor.getSelection();
give like result an object, and I funded out a more complex function and I get collected data like this
var selection = editor.getSelection().getNative();
alert(selection);
from this in alert I see the proper selection and not just object,but when I insert it like
CKEDITOR.instances.editor1.insertHtml('<div class="desktop">' + selection + '</div>');
it just put all selected in one line and not adding the div, new div for else case working with this syntax.
UPDATE 3
The problem now is this function
CKEDITOR.instances.editor1.insertHtml('<div>' + selection + '<div>');
it delete all existing HTML tags even if I add just selection without <div> I am not sure if this is because of the way I insert data or way I collect data, just in alert when I collect data I see correct space like in the editor.
user select some stuff it will put it in a div with specific class
If you want to check if selection is not empty, please instead of selection.length>0 try using !selection().getRanges()[0].collapsed.
If you need something more advanced you could also try using
!!CKEDITOR.instances.editor1.getSelection().getSelectedText() to see if any text was selected and !!CKEDITOR.instances.editor1.getSelection().getSelectedElement() to see if any element like e.g. image, tabl,e widget or anchor was selected.
EDIT:
If you need selected HTML please use CKEDITOR.instances.editor1.getSelectedHtml().getHtml();
Please also have a look at CKEditor documentation:
https://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-getSelectedHtml
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_dom_documentFragment.html#method-getHtml
https://docs.ckeditor.com/#!/api/CKEDITOR.dom.selection-method-getSelectedText
https://docs.ckeditor.com/#!/api/CKEDITOR.dom.selection-method-getSelectedElement
We develop extensions for Chrome, Firefox and Safari. We want to add context menus to our extensions that will show when right clicking on any form element which is editable. I tried to add an editable context menu to Chrome:
chrome.contextMenus.create({
"title": "Test editable menu item",
"contexts": ["editable"],
"onclick": function(info, tab) {
console.log("item " + info.menuItemId + " was clicked");
console.log("info: " + JSON.stringify(info));
console.log("tab: " + JSON.stringify(tab));
}
});
But I need to know which element the user clicked on, and info and tab don't contain the element. How do I know which element the user clicked? I would like to have a jQuery object containing the element.
The info object contains the following attributes:
"editable": true
"menuItemId"
"pageUrl"
One of the best workarounds I know of is to follow the advice given in this thread to use content scripts to inject a listener in the target page for the 'contextmenu' event.
I know that is to late for you but I answer here for anyone else who's google it.
My solution was to create a mapping between created menu items and the business model (in this case a "data" array):
var itemsDic = {};
function onClickHandler(info) {
alert(itemsDic[info.menuItemId]);
};
for(i in data) {
var currentItem = chrome.contextMenus.create({
parentId: item,
title: data[i].ItemName,
type: data[i].ItemType,
contexts: ["editable"],
onclick : onClickHandler
});
itemsDic[currentItem] = data[i];
}
I wanted to hide some issue link outward & inwards strings of Link type from the Link Issues Popup Window using java script.
I have tried using java script but I am not getting the popup screen from the java script.
Please see the screenshot below :
Can anyone tell me how can I get this popup screen in the java script?
Is there any other method to hide this?
Thanks & Regards,
Renuka.
To hide the clone issue link every page:
edit the file system-webresources-plugin.xml (should be at /atlassian-jira/WEB-INF/classes/), and add to <web-resource key="jira-fields"> this code:
<resource type="download" name="myScript.js" location="/includes/jira/field/script.js">
<param name="source" value="webContextStatic"/>
</resource>
than, on /includes/jira/field/myScript.js write this:
AJS.$(document).ready(function() {
if (AJS.$("#link-type option[value*='clon']").size() > 0) {
// will work even when right clicking on More
// Actions->Link & open it into a new window
AJS.$("#link-type option[value*='clon']").remove()
} else if (AJS.$("#link-issue").size() > 0) {
// will work in case the link menu showing via popup
AJS.$("#link-issue").click(function(){
// wait for the popup to show, and remove the clone options
setTimeout(function (){
AJS.$("#link-type option[value*='clon']").remove();
}, 300);
});
}
});
restart Jira and it that it!
The script attaches a function to the link-menu opening, than gives the menu 0.3 seconds to load, and removes the unwanted items. If it doesn't work well for you, try to raise the timeout from 300 to 500-1000.
On jira 4, run instead:
AJS.$("#issue-link-link-type option[value*='clon']").remove();
The previous solution has an issue:
It will only work when clicking the "Link Issue"-Menu-Item.
When I use the Point (.)-Shortcut-Menu, it won't remove the issue types.
I have established the following solution:
JS-Binding-Part:
AJS.$(document).ready(function() {
JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function(e, context, reason) {
hideIssueLinkTypes();
});
});
JS-Backing-Function:
function hideIssueLinkTypes() {
var apiURL = "/rest/scriptrunner/latest/custom/getHiddenLinkTypes"
$.getJSON( apiURL, {
}).done(function( objectData ) {
$.each( objectData, function( i, item ) {
var issueLinkType = item.issueLinkType[0];
AJS.$("#link-type option[value='"+issueLinkType.inwardDescription+"']").remove();
AJS.$("#link-type option[value='"+issueLinkType.outwardDescription+"']").remove();
});
});
}
Scriptrunner-REST-Endpoint:
import com.onresolve.scriptrunner.runner.rest.common.CustomEndpointDelegate
import groovy.json.JsonBuilder
import groovy.transform.BaseScript
import com.atlassian.jira.issue.link.DefaultIssueLinkTypeManager
import com.atlassian.jira.issue.link.IssueLinkTypeManager
import com.atlassian.jira.issue.link.IssueLinkType
import com.atlassian.jira.component.ComponentAccessor
import com.atlassian.jira.config.properties.ApplicationProperties
import javax.ws.rs.core.MultivaluedMap
import javax.ws.rs.core.Response
#BaseScript CustomEndpointDelegate delegate
String HIDDEN_IDENT="[hidden]"
getHiddenLinkTypes(httpMethod: "GET") { MultivaluedMap queryParams, String body ->
def appProperties = ((ApplicationProperties) ComponentAccessor.getComponentOfType(ApplicationProperties.class));
def appClonersLinkTypeName = appProperties.getDefaultBackedText("jira.clone.linktype.name");
def jsBuilder=new JsonBuilder();
def issueLinkTypes = ((IssueLinkTypeManager) ComponentAccessor.getComponentOfType(IssueLinkTypeManager.class)).getIssueLinkTypes();
jsBuilder issueLinkTypes.findAll({it.getName().contains(HIDDEN_IDENT) || it.getName()==appClonersLinkTypeName }),
{ IssueLinkType linkType ->
issueLinkType linkType.getId(),
name: linkType.getName(),
inwardDescription: linkType.getInward(),
outwardDescription: linkType.getOutward()
}
return Response.ok(jsBuilder.toString()).build();
}
What you can do then ist just annotate and Link-Type with putting [hidden] in the link name and it will disappear for all users (It can still be programmatically added though or created by cloning).
If you don't have Scriptrunner or don't need the dynamic nature of the implementation, you can still hard-code the values as Kuf described in the answer above in hideIssueTypes() like this:
AJS.$("#issue-link-link-type option[value*='clon']").remove();