Skip to content

Commit e73e0ee

Browse files
committed
fix(mdviewer): preserve image DOM nodes across content updates to prevent reload
Save existing <img> elements by src before innerHTML replacement, then swap them back in after. The browser keeps the same nodes with cached image data, preventing re-fetches and flicker when editing text in CM. Replaces morphdom with simpler innerHTML + image node preservation.
1 parent dbfdb54 commit e73e0ee

1 file changed

Lines changed: 25 additions & 3 deletions

File tree

src-mdviewer/src/components/viewer.js

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,31 @@ export function initViewer() {
5757
const content = getContentEl();
5858
if (!content) return;
5959

60-
const newContent = document.createElement("div");
61-
newContent.innerHTML = parseResult.html;
62-
morphdom(content, newContent, { childrenOnly: true });
60+
// Save existing image nodes keyed by src before DOM replacement.
61+
// After innerHTML update, find matching <img> by src and swap the
62+
// new node with the saved one so the browser doesn't re-fetch.
63+
const savedImgs = new Map();
64+
content.querySelectorAll("img").forEach(img => {
65+
if (img.src && !img.src.includes("uploading.svg")) {
66+
savedImgs.set(img.src, img);
67+
}
68+
});
69+
70+
content.innerHTML = parseResult.html;
71+
72+
// Restore saved image nodes to prevent reload
73+
if (savedImgs.size > 0) {
74+
content.querySelectorAll("img").forEach(newImg => {
75+
const saved = savedImgs.get(newImg.src);
76+
if (saved) {
77+
// Copy over any changed attributes from the new element
78+
if (saved.alt !== newImg.alt) { saved.alt = newImg.alt; }
79+
if (saved.title !== newImg.title) { saved.title = newImg.title; }
80+
newImg.replaceWith(saved);
81+
savedImgs.delete(newImg.src);
82+
}
83+
});
84+
}
6385
content.dir = "auto";
6486

6587
wrapTables();

0 commit comments

Comments
 (0)