From 725ceafb0655e616a747ec14733a97d6fec84711 Mon Sep 17 00:00:00 2001 From: Baivab Sarkar Date: Tue, 30 Jun 2026 12:42:41 +0530 Subject: [PATCH 1/2] fix: prevent unnecessary diagram re-rendering when editor changes are outside block --- script.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/script.js b/script.js index cc974d7..5c01d27 100644 --- a/script.js +++ b/script.js @@ -2929,6 +2929,16 @@ document.addEventListener("DOMContentLoaded", async function () { return true; } + const currentCodeNode = currentEl.querySelector && currentEl.querySelector('[data-original-code]'); + const nextCodeNode = nextEl.querySelector && nextEl.querySelector('[data-original-code]'); + if (currentCodeNode && nextCodeNode) { + const currentCode = currentCodeNode.getAttribute('data-original-code'); + const nextCode = nextCodeNode.getAttribute('data-original-code'); + if (currentCode && currentCode === nextCode && currentCodeNode.className === nextCodeNode.className) { + return true; + } + } + if (currentEl.outerHTML === nextEl.outerHTML) return true; if (currentEl.tagName === 'DETAILS' && nextEl.tagName === 'DETAILS' && currentEl.hasAttribute('open')) { From f7ecb6ff7017a0d74a41df54e4a123cc8869fa37 Mon Sep 17 00:00:00 2001 From: Baivab Sarkar Date: Tue, 30 Jun 2026 12:58:47 +0530 Subject: [PATCH 2/2] fix: resolve DOM shift issues and post-processing bugs for diagram rendering --- script.js | 74 +++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 53 insertions(+), 21 deletions(-) diff --git a/script.js b/script.js index 5c01d27..5cf65e0 100644 --- a/script.js +++ b/script.js @@ -2973,33 +2973,62 @@ document.addEventListener("DOMContentLoaded", async function () { return result; } - let index = 0; - while (index < nextNodes.length || index < container.childNodes.length) { - const currentNode = container.childNodes[index]; - const nextNode = nextNodes[index]; - - if (!nextNode) { - currentNode.remove(); - continue; + function getNodeKey(node) { + if (!node || node.nodeType !== Node.ELEMENT_NODE) return null; + if (node.dataset && node.dataset.previewBlockHash) { + return 'hash:' + node.dataset.previewBlockHash; + } + const codeNode = node.hasAttribute('data-original-code') ? node : (node.querySelector && node.querySelector('[data-original-code]')); + if (codeNode) { + return 'diagram:' + codeNode.className + ':' + codeNode.getAttribute('data-original-code'); } + return null; + } - if (!currentNode) { - container.appendChild(nextNode); - result.updatedNodes.push(nextNode); - index += 1; - continue; + const currentNodes = Array.from(container.childNodes); + + for (let j = 0; j < nextNodes.length; j++) { + const nextNode = nextNodes[j]; + const nextKey = getNodeKey(nextNode); + + let matchedIndex = -1; + if (nextKey) { + for (let k = 0; k < currentNodes.length; k++) { + if (getNodeKey(currentNodes[k]) === nextKey) { + matchedIndex = k; + break; + } + } } - if (canReusePreviewNode(currentNode, nextNode, options)) { - index += 1; - continue; + if (matchedIndex === -1 && currentNodes.length > 0) { + const lookAhead = Math.min(10, currentNodes.length); + for (let k = 0; k < lookAhead; k++) { + if (canReusePreviewNode(currentNodes[k], nextNode, options)) { + matchedIndex = k; + break; + } + } } - result.updatedNodes.push(nextNode); - currentNode.replaceWith(nextNode); - index += 1; + if (matchedIndex !== -1) { + const matchedNode = currentNodes[matchedIndex]; + currentNodes.splice(matchedIndex, 1); + if (container.childNodes[j] !== matchedNode) { + container.insertBefore(matchedNode, container.childNodes[j] || null); + } + } else { + container.insertBefore(nextNode, container.childNodes[j] || null); + result.updatedNodes.push(nextNode); + } } + currentNodes.forEach(function(node) { + if (node.parentNode === container) { + node.remove(); + } + }); + return result; } @@ -3026,9 +3055,12 @@ document.addEventListener("DOMContentLoaded", async function () { } function getPreviewPostProcessRoots(patchResult) { - if (!patchResult || patchResult.fullReplace || !patchResult.updatedNodes || patchResult.updatedNodes.length === 0) { + if (!patchResult || patchResult.fullReplace) { return [markdownPreview]; } + if (!patchResult.updatedNodes || patchResult.updatedNodes.length === 0) { + return []; + } const roots = []; const seen = new Set(); @@ -3040,7 +3072,7 @@ document.addEventListener("DOMContentLoaded", async function () { } }); - return roots.length ? roots : [markdownPreview]; + return roots; } function queryPreviewRoots(roots, selector) {