From d50d37c4bfcb92348fe67eba8c38c036aa31c85f Mon Sep 17 00:00:00 2001 From: Golmote Date: Sat, 5 Mar 2022 07:51:13 +0100 Subject: [PATCH 1/2] Keep Markup: Restore original nodes instead of clones --- plugins/keep-markup/prism-keep-markup.js | 17 ++++++++++++----- plugins/keep-markup/prism-keep-markup.min.js | 2 +- tests/plugins/keep-markup/test.js | 16 ++++++++++++++++ 3 files changed, 29 insertions(+), 6 deletions(-) diff --git a/plugins/keep-markup/prism-keep-markup.js b/plugins/keep-markup/prism-keep-markup.js index c160faa88f..64f0567d12 100644 --- a/plugins/keep-markup/prism-keep-markup.js +++ b/plugins/keep-markup/prism-keep-markup.js @@ -38,14 +38,21 @@ return; } + // Replace element with a clone + var clone = element.cloneNode(false); + element.parentNode.replaceChild(clone, element); + while (element.firstChild) { + clone.appendChild(element.firstChild); + } + var o = { - // Clone the original tag to keep all attributes - clone: element.cloneNode(false), + // Store original element so we can restore it after highlighting + element: element, posOpen: pos }; data.push(o); - processChildren(element); + processChildren(clone); o.posClose = pos; } @@ -100,8 +107,8 @@ var range = document.createRange(); range.setStart(nodeState.nodeStart, nodeState.nodeStartPos); range.setEnd(nodeState.nodeEnd, nodeState.nodeEndPos); - nodeState.node.clone.appendChild(range.extractContents()); - range.insertNode(nodeState.node.clone); + nodeState.node.element.appendChild(range.extractContents()); + range.insertNode(nodeState.node.element); range.detach(); // Process is over diff --git a/plugins/keep-markup/prism-keep-markup.min.js b/plugins/keep-markup/prism-keep-markup.min.js index 6bea9d2efd..fdcddefb92 100644 --- a/plugins/keep-markup/prism-keep-markup.min.js +++ b/plugins/keep-markup/prism-keep-markup.min.js @@ -1 +1 @@ -"undefined"!=typeof Prism&&"undefined"!=typeof document&&document.createRange&&(Prism.plugins.KeepMarkup=!0,Prism.hooks.add("before-highlight",function(e){if(e.element.children.length&&Prism.util.isActive(e.element,"keep-markup",!0)){var o=Prism.util.isActive(e.element,"drop-tokens",!1),d=0,t=[];s(e.element),t.length&&(e.keepMarkup=t)}function r(e){if(function(e){return!o||"span"!==e.nodeName.toLowerCase()||!e.classList.contains("token")}(e)){var n={clone:e.cloneNode(!1),posOpen:d};t.push(n),s(e),n.posClose=d}else s(e)}function s(e){for(var n=0,o=e.childNodes.length;nn.node.posOpen&&(n.nodeStart=d,n.nodeStartPos=n.node.posOpen-n.pos),n.nodeStart&&n.pos+d.data.length>=n.node.posClose&&(n.nodeEnd=d,n.nodeEndPos=n.node.posClose-n.pos),n.pos+=d.data.length);if(n.nodeStart&&n.nodeEnd){var r=document.createRange();return r.setStart(n.nodeStart,n.nodeStartPos),r.setEnd(n.nodeEnd,n.nodeEndPos),n.node.clone.appendChild(r.extractContents()),r.insertNode(n.node.clone),r.detach(),!1}}return!0};n.keepMarkup.forEach(function(e){s(n.element,{node:e,pos:0})}),n.highlightedCode=n.element.innerHTML}})); \ No newline at end of file +"undefined"!=typeof Prism&&"undefined"!=typeof document&&document.createRange&&(Prism.plugins.KeepMarkup=!0,Prism.hooks.add("before-highlight",function(e){if(e.element.children.length&&Prism.util.isActive(e.element,"keep-markup",!0)){var t=Prism.util.isActive(e.element,"drop-tokens",!1),d=0,r=[];i(e.element),r.length&&(e.keepMarkup=r)}function a(e){if(function(e){return!t||"span"!==e.nodeName.toLowerCase()||!e.classList.contains("token")}(e)){var n=e.cloneNode(!1);for(e.parentNode.replaceChild(n,e);e.firstChild;)n.appendChild(e.firstChild);var o={element:e,posOpen:d};r.push(o),i(n),o.posClose=d}else i(e)}function i(e){for(var n=0,o=e.childNodes.length;nn.node.posOpen&&(n.nodeStart=d,n.nodeStartPos=n.node.posOpen-n.pos),n.nodeStart&&n.pos+d.data.length>=n.node.posClose&&(n.nodeEnd=d,n.nodeEndPos=n.node.posClose-n.pos),n.pos+=d.data.length);if(n.nodeStart&&n.nodeEnd){var r=document.createRange();return r.setStart(n.nodeStart,n.nodeStartPos),r.setEnd(n.nodeEnd,n.nodeEndPos),n.node.element.appendChild(r.extractContents()),r.insertNode(n.node.element),r.detach(),!1}}return!0};n.keepMarkup.forEach(function(e){a(n.element,{node:e,pos:0})}),n.highlightedCode=n.element.innerHTML}})); \ No newline at end of file diff --git a/tests/plugins/keep-markup/test.js b/tests/plugins/keep-markup/test.js index 9f5776842f..8adf471d40 100644 --- a/tests/plugins/keep-markup/test.js +++ b/tests/plugins/keep-markup/test.js @@ -62,6 +62,22 @@ describe('Keep Markup', function () { assert.strictEqual(firstPass, secondPass); }); + it('should not clone markup nodes', function () { + const pre = document.createElement('pre'); + pre.className = 'language-javascript drop-tokens'; + pre.innerHTML = 'var a = 42;'; + const code = pre.childNodes[0]; + const firstNodeRefBefore = code.querySelector('mark'); + const secondNodeRefBefore = firstNodeRefBefore.querySelector('mark'); + + Prism.highlightElement(code); + const firstNodeRefAfter = code.querySelector('mark'); + const secondNodeRefAfter = firstNodeRefAfter.querySelector('mark'); + + assert.strictEqual(firstNodeRefBefore, firstNodeRefAfter); + assert.strictEqual(secondNodeRefBefore, secondNodeRefAfter); + }); + // The markup is removed if it's the last element and the element's name is a single letter: a(nchor), b(old), i(talic)... // https://github.com/PrismJS/prism/issues/1618 /* From 7826517d44e126aa0de05168be89b2c6310474d3 Mon Sep 17 00:00:00 2001 From: Golmote Date: Sat, 5 Mar 2022 15:24:13 +0100 Subject: [PATCH 2/2] Keep Markup: Don't clone nodes at all --- plugins/keep-markup/prism-keep-markup.js | 12 +++--------- plugins/keep-markup/prism-keep-markup.min.js | 2 +- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/plugins/keep-markup/prism-keep-markup.js b/plugins/keep-markup/prism-keep-markup.js index 64f0567d12..dd3a108041 100644 --- a/plugins/keep-markup/prism-keep-markup.js +++ b/plugins/keep-markup/prism-keep-markup.js @@ -38,13 +38,6 @@ return; } - // Replace element with a clone - var clone = element.cloneNode(false); - element.parentNode.replaceChild(clone, element); - while (element.firstChild) { - clone.appendChild(element.firstChild); - } - var o = { // Store original element so we can restore it after highlighting element: element, @@ -52,7 +45,7 @@ }; data.push(o); - processChildren(clone); + processChildren(element); o.posClose = pos; } @@ -103,10 +96,11 @@ } if (nodeState.nodeStart && nodeState.nodeEnd) { - // Select the range and wrap it with the clone + // Select the range and wrap it with the element var range = document.createRange(); range.setStart(nodeState.nodeStart, nodeState.nodeStartPos); range.setEnd(nodeState.nodeEnd, nodeState.nodeEndPos); + nodeState.node.element.innerHTML = ''; nodeState.node.element.appendChild(range.extractContents()); range.insertNode(nodeState.node.element); range.detach(); diff --git a/plugins/keep-markup/prism-keep-markup.min.js b/plugins/keep-markup/prism-keep-markup.min.js index fdcddefb92..9b03f27d15 100644 --- a/plugins/keep-markup/prism-keep-markup.min.js +++ b/plugins/keep-markup/prism-keep-markup.min.js @@ -1 +1 @@ -"undefined"!=typeof Prism&&"undefined"!=typeof document&&document.createRange&&(Prism.plugins.KeepMarkup=!0,Prism.hooks.add("before-highlight",function(e){if(e.element.children.length&&Prism.util.isActive(e.element,"keep-markup",!0)){var t=Prism.util.isActive(e.element,"drop-tokens",!1),d=0,r=[];i(e.element),r.length&&(e.keepMarkup=r)}function a(e){if(function(e){return!t||"span"!==e.nodeName.toLowerCase()||!e.classList.contains("token")}(e)){var n=e.cloneNode(!1);for(e.parentNode.replaceChild(n,e);e.firstChild;)n.appendChild(e.firstChild);var o={element:e,posOpen:d};r.push(o),i(n),o.posClose=d}else i(e)}function i(e){for(var n=0,o=e.childNodes.length;nn.node.posOpen&&(n.nodeStart=d,n.nodeStartPos=n.node.posOpen-n.pos),n.nodeStart&&n.pos+d.data.length>=n.node.posClose&&(n.nodeEnd=d,n.nodeEndPos=n.node.posClose-n.pos),n.pos+=d.data.length);if(n.nodeStart&&n.nodeEnd){var r=document.createRange();return r.setStart(n.nodeStart,n.nodeStartPos),r.setEnd(n.nodeEnd,n.nodeEndPos),n.node.element.appendChild(r.extractContents()),r.insertNode(n.node.element),r.detach(),!1}}return!0};n.keepMarkup.forEach(function(e){a(n.element,{node:e,pos:0})}),n.highlightedCode=n.element.innerHTML}})); \ No newline at end of file +"undefined"!=typeof Prism&&"undefined"!=typeof document&&document.createRange&&(Prism.plugins.KeepMarkup=!0,Prism.hooks.add("before-highlight",function(e){if(e.element.children.length&&Prism.util.isActive(e.element,"keep-markup",!0)){var t=Prism.util.isActive(e.element,"drop-tokens",!1),d=0,o=[];s(e.element),o.length&&(e.keepMarkup=o)}function r(e){if(function(e){return!t||"span"!==e.nodeName.toLowerCase()||!e.classList.contains("token")}(e)){var n={element:e,posOpen:d};o.push(n),s(e),n.posClose=d}else s(e)}function s(e){for(var n=0,t=e.childNodes.length;nn.node.posOpen&&(n.nodeStart=d,n.nodeStartPos=n.node.posOpen-n.pos),n.nodeStart&&n.pos+d.data.length>=n.node.posClose&&(n.nodeEnd=d,n.nodeEndPos=n.node.posClose-n.pos),n.pos+=d.data.length);if(n.nodeStart&&n.nodeEnd){var r=document.createRange();return r.setStart(n.nodeStart,n.nodeStartPos),r.setEnd(n.nodeEnd,n.nodeEndPos),n.node.element.innerHTML="",n.node.element.appendChild(r.extractContents()),r.insertNode(n.node.element),r.detach(),!1}}return!0};n.keepMarkup.forEach(function(e){s(n.element,{node:e,pos:0})}),n.highlightedCode=n.element.innerHTML}})); \ No newline at end of file