diff --git a/js/editor-libs/mce-utils.js b/js/editor-libs/mce-utils.js index 083e35da9..c39157d22 100644 --- a/js/editor-libs/mce-utils.js +++ b/js/editor-libs/mce-utils.js @@ -37,6 +37,19 @@ module.exports = { return tmpElem.style[property] !== undefined; }, + /** + * Interrupts the default click event on external links inside + * the shadow dom and opens them in a new tab instead + * @param {Array} externalLinks - all external links inside the shadow dom + */ + openLinksInNewTab: function(externalLinks) { + externalLinks.forEach(function(externalLink) { + externalLink.addEventListener('click', function(event) { + event.preventDefault(); + window.open(externalLink.href); + }); + }); + }, /** * Posts a name to set as a mark to Kuma for * processing and beaconing to GA @@ -45,6 +58,20 @@ module.exports = { postToKuma: function(perf) { window.parent.postMessage(perf, 'https://developer.mozilla.org'); }, + /** + * Interrupts the default click event on relative links inside + * the shadow dom and scrolls to the targeted anchor + * @param {Object} shadow - the shadow dom root + * @param {Array} relativeLinks - all relative links inside the shadow dom + */ + scrollToAnchors: function(shadow, relativeLinks) { + relativeLinks.forEach(function(relativeLink) { + relativeLink.addEventListener('click', function(event) { + event.preventDefault(); + shadow.querySelector(relativeLink.hash).scrollIntoView(); + }); + }); + }, /** * Hides the default example and shows the custom block * @param {object} customBlock - The HTML section to show diff --git a/js/editor.js b/js/editor.js index 0ab440d33..87ebdeff1 100644 --- a/js/editor.js +++ b/js/editor.js @@ -80,6 +80,8 @@ shadow.appendChild(document.importNode(content, true)); setOutputHeight(shadow.querySelector('div')); + mceUtils.openLinksInNewTab(shadow.querySelectorAll('a[href^="http"]')); + mceUtils.scrollToAnchors(shadow, shadow.querySelectorAll('a[href^="#"]')); } /**