Develop Reference

Add a custom key shortcut within Javascript in Confluence

On my work we use Confluence. I need shortcut for monospace formatting on an edit page.
Native shortcut is CTRL+SHIFT+M. It's taken in Opera by MyFlow feature and cannot be changed.
Is there an option to make it by using Javascript code? (I can make JS injection in a browser extension.)
Regular JS code for shortcuts which works fine but not on a confluence edit page:
// define a handler
function monospaceKeyTrigger(e) {
// this would test for whichever key is 40 and the ctrl key at the same time
if (e.ctrlKey && e.shiftKey && e.keyCode == 90) {
// trigger click on monospace button
//document.getElementById("rte-monospace").click();
alert('!!monospace!!');
}
}
// register the handler
document.addEventListener('keyup', monospaceKeyTrigger, false);
So, what I've missed?
I guess, it's not triggering at all due to editor JS functionality...
Any advice guys?

Found.
//Set CTRL+SHIFT+L shortcut for monospace formatting in the editor
window.AJS.Rte.getEditor().shortcuts.add("ctrl+shift+l","monospace","confMonospace");
Cheers
P.S.
Thanks for this posts:
https://webapps.stackexchange.com/questions/35383/shortcut-key-for-monospaced-character-format-in-confluence (outdated, but helped to understand how to pass arguments)
https://searchcode.com/codesearch/view/37330905/ #47, take a look shortcuts list in Confluence.KeyboardShortcuts
P.P.S. Browser-ready Javascript code (tested in Atlassian Confluence 6.15.2)
Simple 👌:
// Set monospace formatting for a key shortcut in confluence
// Use a browser extension for injecting this code snippet
(function () {
window.AJS.Rte.getEditor().shortcuts.add(
'ctrl+shift+l',
"monospace",
"confMonospace"
);
}());
Overprotected 😀 :
// Set monospace formatting for a key shortcut in confluence
// Use a browser extension for injecting this code snippet
console.log('include CJS');
let confKeyAdd = {
run: function () {
this.key = {
keyCode: 'ctrl+shift+l',
codeType: 'monospace',
codeConfType: 'confMonospace'
};
this.setKey();
},
waiter: function (shouldWaitCall, successCall, repeat = 10, interval = 1000) {
let timerId;
//wait here
timerId = setInterval(
function () {
if (--repeat < 0) {
console.log('confKeyAdd: Have not found an object.');
clearTimeout(timerId);
return;
}
if (shouldWaitCall()) {
console.log('confKeyAdd: Still waiting... [' + repeat + ']');
return;
}
clearTimeout(timerId);
// call me!
successCall();
},
interval
);
},
setKey() {
let _this = this;
// first call: should-wait
// second call: success
this.waiter(
function () {
console.log('confKeyAdd: Checking...');
return typeof window.AJS === 'undefined'
|| window.AJS.Rte.getEditor() === null
|| !window.AJS.Rte.getEditor().shortcuts;
},
function () {
console.log('confKeyAdd: Adding a key shortcut for: ' + _this.key.keyCode);
window.AJS.Rte.getEditor().shortcuts.add(
_this.key.keyCode,
_this.key.codeType,
_this.key.codeConfType
);
},
);
}
};
confKeyAdd.run();

firefox addon: cannot update tab URL using web extension

I'd like to know how to update URL addresses in Firefox using Web Extensions.
I'm trying to port a simple extension I've created with Chrome APIs to Firefox, but I don't really understand the tab URL mechanisms in Firefox.
This extension was made to switch between YouTube desktop/TV version with a click.
It works well on Chrome, but I don't know why it's not working on Firefox.
UPDATE 1: Placing most important code block related to the question:
chromeApi.browserAction.onClicked.addListener(function(tab) {
var actionUrl = '';
var tabUrl = tab.url;
if (getCurrentPageVersion(tabUrl) !== undefined) {
actionUrl = getConvertedActionUrl(tabUrl);
if (actionUrl !== tabUrl) {
chromeApi.tabs.update(tab.id, {url: actionUrl});
}
}
});
Full source
(function(chromeApi) {
getCurrentPageVersion = function (tabUrl) {
var ytValidRegex = /^(https?\:\/\/)?(www\.)?(youtube\.com|youtu\.?be)/g;
var ytValidStdPageRegex = /^(https?\:\/\/)?(www\.)?(youtube\.com|youtu\.?be)?(\/watch\?v=).+$/g;
var ytValidTvPageRegex = /^(https?\:\/\/)?(www\.)?(youtube\.com|youtu\.?be)?(\/tv#\/watch(\/video)?\/(idle|control)\?v=).+$/g;
if (!ytValidRegex.test(tabUrl)) {
return undefined;
} else if (ytValidStdPageRegex.test(tabUrl)) {
return "std";
} else if (ytValidTvPageRegex.test(tabUrl)) {
return "tv";
}
return undefined;
};
getConvertedActionUrl = function (tabUrl) {
var result = '';
var shortStdYtUrlRegex = /\/watch\?v=.+/g;
var shortTvYtUrlRegex = /\/tv#\/watch\/video\/(idle|control)\?v=.+/g;
var shortStdYtUrlReplaceRegex = /\/watch\?v=/g;
var shortTvYtUrlReplaceRegex = /\/tv#\/watch\/video\/(idle|control)\?v=/g;
if (shortStdYtUrlRegex.test(tabUrl)) {
result = tabUrl.replace(shortStdYtUrlReplaceRegex, '/tv#/watch/idle?v=');
}
else {
result = tabUrl.replace(shortTvYtUrlReplaceRegex, '/watch?v=');
}
// YouTube standard website video url
//https://www.youtube.com/watch?v=9tRDQK2MtRs
// YouTube TV url
//https://www.youtube.com/tv#/watch/video/idle?v=9tRDQK2MtRs
return result;
}
onInit = function () {
};
// Called when the user clicks on the browser action.
chromeApi.browserAction.onClicked.addListener(function(tab) {
var actionUrl = '';
var tabUrl = tab.url;
if (getCurrentPageVersion(tabUrl) !== undefined) {
actionUrl = getConvertedActionUrl(tabUrl);
if (actionUrl !== tabUrl) {
chromeApi.tabs.update(tab.id, {url: actionUrl});
}
}
});
chromeApi.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
if(!changeInfo.url) return; // URL did not change
// Might be better to analyze the URL to exclude things like anchor changes
var pageVersion = getCurrentPageVersion(tab.url);
if (pageVersion === undefined) return;
/* ... */
chromeApi.browserAction.setBadgeText({text: pageVersion.toUpperCase(), tabId: tab.id});
});
chromeApi.tabs.onCreated.addListener(function(tab){
var pageVersion = getCurrentPageVersion(tab.url);
if (pageVersion === undefined) return;
/* ... */
chromeApi.browserAction.setBadgeText({text: pageVersion.toUpperCase(), tabId: tab.id});
});
})(chrome);
If you pay attention, the core functionality happens on the chromeApi.browserAction.onClicked event, whenever you click the add-on/extension button.
The extension updates correctly between each YouTube version in Chrome, but in Firefox, this one redirects to YouTube TV once and never goes back to the desktop version no matter how many times you click on it.
But there's something weird in Firefox: browser history is updated correctly whenever the tab.update method is called, but it redirects to the TV version by itself again.
IMPORTANT: Both Firefox/Chrome extensions are using the currentTab permission, so it's not an extension issue by itself.
Extension on GitHub
UPDATE 2 (2018-11-25): I've updated the source code based on previous feedback

'onclick' event to open url in new tab or other browser

I would like to make a button (with a url) dynamic to what the user's browser is using. If the user is using Chrome, then the link will open in a new tab; however if the user is using IE, the link should open in Chrome.
I am unable to make the following code work in Chrome but this works in IE 9.
I have gotten helpful codes from some other posts.
The following will determine/ check which browser the user is on:
function getInternetExplorerVersion()
{
var rv = -1; // Return value assumes failure.
if (navigator.appName == 'Microsoft Internet Explorer')
{
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
}
The above snippet works fine.
My code below works seamlessly in IE but not in Chrome.
<input type="button" onclick="openURL()" value="Open Google">
<script>
function openURL()
{
var ver = getInternetExplorerVersion();
var shell = new ActiveXObject("WScript.Shell");
if ( ver = -1 )
shell.run("Chrome www.google.com");
else
window.open('www.google.com','_blank');
}
</script>

Chrome gives an error on that ActiveXObject line, so you should only expose that code to IE. Assuming that ver always gives a number other than -1 in IE you should try this:
function openURL() {
var ver = getInternetExplorerVersion()
if ( ver != -1 ) {
// IE
var shell = new ActiveXObject("WScript.Shell");
shell.run("Chrome www.google.com");
} else {
// other browsers
window.open('//www.google.com','_blank');
}
}
Of course chrome was reading your code, you just didn't see the error. Press F12 to open the browser dev tools and go to the console tab to see script errors.

Can't activate an event based on JavaScript IE recognition

I'm trying to add a textarea resizer plugin on my MVC project, but only for IE, since other browsers have a built-in one. In order to do that I have to check if the browser is IE.
I used the JS from this article:
How to detect IE11?
So this is what I use:
function getInternetExplorerVersion() {
var rv = -1;
if (navigator.appName == 'Microsoft Internet Explorer') {
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat(RegExp.$1);
}
else if (navigator.appName == 'Netscape') {
var ua = navigator.userAgent;
var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat(RegExp.$1);
}
return rv;
}
function checkVersion() {
var msg = "You're not using Internet Explorer.";
var rv = getInternetExplorerVersion();
if (rv > -1) {
msg = "You are using IE " + ver;
}
alert(msg);
}
I inserted it in my scripts folder and I access it through this line in Scripts section:
<script type="text/javascript" src="~/Scripts/checkIEVersion.js"></script>
Then I try to implement it on pageload:
<body onload="checkVersion()">
The problem is, nothing happens. I should get an alert, but I get no error, no nothing. When I use only the bottom of the two functions (in the Scripts section with "#(document).ready", it does load correctly.
Could you please assist me?
Thanks in advance!

Turns out I had to include this too:
$(document).ready(function () {
window.onload = function () {
checkVersion();
}
});

Retrieve parent node from selection (range) in Gecko and Webkit

I am trying to add an attribute when using a wysiwyg editor that uses "createLink" command. I thought it would be trivial to get back the node that is created after the browse executes that command.
Turns out, I am only able to grab this newly created node in IE. Any ideas?
The following code demonstrates the issue (debug logs at bottom show different output in each browser):
var getSelectedHTML = function() {
if ($.browser.msie) {
return this.getRange().htmlText;
} else {
var elem = this.getRange().cloneContents();
return $("<p/>").append($(elem)).html();
}
};
var getSelection = function() {
if ($.browser.msie) {
return this.editor.selection;
} else {
return this.iframe[0].contentDocument.defaultView.getSelection();
}
};
var getRange = function() {
var s = this.getSelection();
return (s.getRangeAt) ? s.getRangeAt(0) : s.createRange();
};
var getSelectedNode = function() {
var range = this.getRange();
var parent = range.commonAncestorContainer ? range.commonAncestorContainer :
range.parentElement ? range.parentElement():
range.item(0);
return parent;
};
// **** INSIDE SOME EVENT HANDLER ****
if ($.browser.msie) {
this.ec("createLink", true);
} else {
this.ec("createLink", false, prompt("Link URL:", "http://"));
}
var linkNode = $(this.getSelectedNode());
linkNode.attr("rel", "external");
$.log(linkNode.get(0).tagName);
// Gecko: "body"
// IE: "a"
// Webkit: "undefined"
$.log(this.getSelectedHTML());
// Gecko: "foo"
// IE: "<A href="http://site.com" rel=external>foo</A>"
// Webkit: "foo"
$.log(this.getSelection());
// Gecko: "foo"
// IE: [object Selection]
// Webkit: "foo"
Thanks for any help on this, I've scoured related questions on SO with no success!

This is the code I've used to get the "parentNode" of the text cursor:
var getSelectedNode = function() {
var node,selection;
if (window.getSelection) {
selection = getSelection();
node = selection.anchorNode;
}
if (!node && document.selection) {
selection = document.selection
var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
node = range.commonAncestorContainer ? range.commonAncestorContainer :
range.parentElement ? range.parentElement() : range.item(0);
}
if (node) {
return (node.nodeName == "#text" ? node.parentNode : node);
}
};
I tweaked my IE method to approximate yours. Tested and working IE8, FF3.6, Safari4, Chrome5. I set up a jsbin preview that you can test with.

I have found that selection can get complicated and buggy across browsers. Throw in the magic of browser document editing, and it gets worse!
I took a look at how TinyMCE implements what I am trying to do, and took the same approach to modify jHtmlArea.
Basically, a link is created with a fake href. Then, it finds that dom element by searching for links with that particular href. You can then add any desired attributes and update the href with the actual url.
The solution above by gnarf is a great example of getting a selected node, and will work for most scenarios.
Below is the code for my work around:
var url = prompt("Link URL:", "http://");
if (!url) {
return;
}
// Create a link, with a magic temp href
this.ec("createLink", false, "#temp_url#");
// Find the link in the editor using the magic temp href
var linkNode = $(this.editor.body).find("a[href='#temp_url#']");
linkNode.attr("rel", "external");
// Apply the actual desired url
linkNode.attr("href", url);

It's a hacky workaround, but should work unless somebody makes two identical links.
this.getSelection() seems to get the same in both needed browser, so:
var link=prompt('gimme link');
//add the thing
var text=this.getSelection();
var whatYouNeed=$('a:contains("'+text+'")[href="'+link+'"');