fix(mdviewer): preserve newlines in code blocks and improve line sync

- Fix code block editing: normalize <br> → \n before Prism re-highlights
  to prevent newline collapse in contenteditable code blocks
- Re-enable _annotateCodeBlockLines for per-line cursor sync in code blocks
- Add _updateSourceLineAttrs to recompute data-source-line after edits
  using CM's actual text (via MDVIEWR_SOURCE_LINES message) for accuracy
- Fix stale annotation detection: re-annotate when line numbers drift
- Fix <br> paragraph cursor sync: count <br> before cursor in
  _getSourceLineFromElement for exact CM line within soft-break paragraphs
- Move \n to end of line spans (not start) so blank lines are clickable

Author: abose

src-mdviewer/src/bridge.js

@@ -282,6 +282,9 @@ export function initBridge() {
             case "MDVIEWR_RERENDER_CONTENT":
                 handleRerenderContent(data);
                 break;
+            case "MDVIEWR_SOURCE_LINES":
+                emit("editor:source-lines", data.markdown);
+                break;
             case "MDVIEWR_TOOLBAR_STATE":
                 if (data.state) {
                     emit("editor:selection-state", data.state);
@@ -925,10 +928,26 @@ function _restoreCursorPosition(contentEl, pos) {
 }
 
 function _getSourceLineFromElement(el) {
+    // Use the current selection to determine exact position within <br> paragraphs
+    const sel = window.getSelection();
+    const cursorNode = sel && sel.rangeCount ? sel.getRangeAt(0).startContainer : null;
+
     while (el && el !== document.body) {
         const attr = el.getAttribute && el.getAttribute("data-source-line");
         if (attr != null) {
-            return parseInt(attr, 10);
+            let line = parseInt(attr, 10);
+            // For paragraphs with <br> (soft line breaks), count how many
+            // <br> elements precede the cursor to get the exact CM line.
+            if (el.tagName === "P" && cursorNode && el.querySelector("br")) {
+                const brs = el.querySelectorAll("br");
+                for (const br of brs) {
+                    const pos = br.compareDocumentPosition(cursorNode);
+                    if (pos & Node.DOCUMENT_POSITION_FOLLOWING || pos & Node.DOCUMENT_POSITION_CONTAINED_BY) {
+                        line++;
+                    }
+                }
+            }
+            return line;
         }
         el = el.parentElement;
     }

src-mdviewer/src/components/editor.js

@@ -10,7 +10,7 @@ import { initSlashMenu, destroySlashMenu, isSlashMenuVisible } from "./slash-men
 import { initLinkPopover, destroyLinkPopover } from "./link-popover.js";
 import { initImagePopover, destroyImagePopover } from "./image-popover.js";
 import { initLangPicker, destroyLangPicker, isLangPickerDropdownOpen } from "./lang-picker.js";
-import { highlightCode, renderAfterHTML, normalizeCodeLanguages } from "./viewer.js";
+import { highlightCode, renderAfterHTML, normalizeCodeLanguages, _annotateCodeBlockLines } from "./viewer.js";
 import { initMermaidEditor, destroyMermaidEditor, insertMermaidBlock, attachOverlays } from "./mermaid-editor.js";
 
 const devLog = import.meta.env.DEV ? console.log.bind(console, "[editor]") : () => {};
@@ -1507,6 +1507,23 @@ export function convertToMarkdown(contentEl) {
     const clone = contentEl.cloneNode(true);
     clone.querySelectorAll(".code-copy-btn").forEach((btn) => btn.remove());
     clone.querySelectorAll(".table-row-handles, .table-col-handles, .table-add-row-btn, .table-col-add-btn").forEach((el) => el.remove());
+    // Fix code blocks: replace <br> with \n and unwrap data-source-line spans.
+    // In contenteditable, Enter inside a span inserts <br> instead of \n.
+    // Turndown needs plain text with \n for correct fenced code block output.
+    clone.querySelectorAll("pre code").forEach((code) => {
+        code.querySelectorAll("br").forEach((br) => {
+            br.replaceWith("\n");
+        });
+        // Unwrap data-source-line spans (inline them into the code element)
+        code.querySelectorAll("span[data-source-line]").forEach((span) => {
+            while (span.firstChild) {
+                span.parentNode.insertBefore(span.firstChild, span);
+            }
+            span.remove();
+        });
+        // Also unwrap any Prism token spans — get plain text for Turndown
+        code.textContent = code.textContent;
+    });
     // Unwrap <p> inside <li> — marked renders "loose" lists with <p> wrapping,
     // but Turndown converts that to blank lines between items. Unwrapping makes tight lists.
     clone.querySelectorAll("li > p").forEach((p) => {
@@ -1534,6 +1551,67 @@ export function convertToMarkdown(contentEl) {
 let contentChangeTimer = null;
 const CONTENT_CHANGE_DEBOUNCE = 300;
 
+/**
+ * Re-compute data-source-line attributes on top-level block elements
+ * by walking the generated markdown and mapping line numbers back to DOM nodes.
+ * This keeps scroll sync working after edits in the viewer.
+ */
+function _updateSourceLineAttrs(contentEl, markdown) {
+    const mdLines = markdown.split("\n");
+    const children = contentEl.children;
+    let mdLineIdx = 0;
+
+    for (let i = 0; i < children.length; i++) {
+        const el = children[i];
+        // Skip UI elements (handles, overlays, etc.)
+        if (el.classList.contains("table-row-handles") ||
+            el.classList.contains("table-col-handles") ||
+            el.classList.contains("table-add-row-btn") ||
+            el.classList.contains("table-col-add-btn") ||
+            el.classList.contains("cursor-sync-highlight")) {
+            continue;
+        }
+
+        // Skip blank lines in markdown to find the next block
+        while (mdLineIdx < mdLines.length && mdLines[mdLineIdx].trim() === "") {
+            mdLineIdx++;
+        }
+        if (mdLineIdx >= mdLines.length) break;
+
+        // Assign line number (1-based)
+        el.setAttribute("data-source-line", String(mdLineIdx + 1));
+
+        // Advance past this element's markdown lines
+        const tag = el.tagName;
+        if (tag === "PRE" || (tag === "DIV" && el.classList.contains("table-wrapper"))) {
+            // Code blocks: find closing ``` or end of fenced block
+            // Tables: find end of table rows
+            const startLine = mdLineIdx;
+            mdLineIdx++;
+            if (tag === "PRE") {
+                // Skip to closing ```
+                while (mdLineIdx < mdLines.length && !mdLines[mdLineIdx].match(/^```\s*$/)) {
+                    mdLineIdx++;
+                }
+                mdLineIdx++; // skip the closing ```
+            } else {
+                // Table: skip while lines start with |
+                while (mdLineIdx < mdLines.length && mdLines[mdLineIdx].startsWith("|")) {
+                    mdLineIdx++;
+                }
+            }
+        } else {
+            // Single-line or multi-line block: advance to next blank line.
+            // Paragraphs with <br> (soft line breaks) are a single block —
+            // the data-source-line on the <p> points to the block's start.
+            mdLineIdx++;
+            while (mdLineIdx < mdLines.length && mdLines[mdLineIdx].trim() !== "") {
+                mdLineIdx++;
+            }
+        }
+    }
+}
+
 function emitContentChange(contentEl) {
     clearTimeout(contentChangeTimer);
     contentChangeTimer = setTimeout(() => {
@@ -1549,6 +1627,16 @@ function getContentEl() {
 export function initEditor() {
     turndown = createTurndown();
 
+    // When CM sends back its actual text after an edit, use it to update
+    // data-source-line attributes. This is more accurate than using the
+    // markdown from convertToMarkdown, which may differ in formatting.
+    on("editor:source-lines", (cmMarkdown) => {
+        const content = getContentEl();
+        if (!content) return;
+        _updateSourceLineAttrs(content, cmMarkdown);
+        _annotateCodeBlockLines();
+    });
+
     on("state:editMode", (editing) => {
         const content = getContentEl();
         if (!content) return;
@@ -1666,19 +1754,30 @@ function enterEditMode(content) {
                 ? sel.anchorNode.closest("pre")
                 : sel.anchorNode.parentElement?.closest("pre");
             if (pre && content.contains(pre)) {
+                // Debounced re-highlighting for code blocks.
+                // First normalize <br> → \n (contenteditable inserts <br>
+                // for Enter, but Prism reads textContent which ignores <br>).
+                // Then re-run Prism with cursor preservation.
                 clearTimeout(codeHighlightTimer);
                 codeHighlightTimer = setTimeout(() => {
                     const code = pre.querySelector("code");
                     if (!code) return;
+                    // Step 1: normalize <br> → \n BEFORE anything else
+                    code.querySelectorAll("br").forEach(br => br.replaceWith("\n"));
+                    // Step 2: save cursor AFTER normalization
+                    const off = getCursorOffset(content);
+                    // Step 3: apply language class + Prism highlight
                     const lang = pre.getAttribute("data-language");
                     if (lang && !code.className.includes(`language-${lang}`)) {
                         code.className = `language-${lang}`;
                     }
                     if (code.className.includes("language-")) {
-                        const off = getCursorOffset(content);
                         Prism.highlightElement(code);
-                        restoreCursor(content, off);
                     }
+                    // Step 4: re-annotate code block lines for scroll sync
+                    _annotateCodeBlockLines();
+                    // Step 5: restore cursor
+                    restoreCursor(content, off);
                 }, 500);
             }
         }

src-mdviewer/src/components/viewer.js

@@ -74,6 +74,7 @@ export function initViewer() {
 
         const newContent = document.createElement("div");
         newContent.innerHTML = parseResult.html;
+
         morphdom(content, newContent, { childrenOnly: true });
 
         // Restore saved image nodes — find new <img> by src and swap
@@ -200,17 +201,34 @@ export function highlightCode() {
  * enabling per-line cursor sync for code blocks.
  * Must run AFTER Prism highlighting since Prism replaces innerHTML.
  */
-function _annotateCodeBlockLines() {
+export function _annotateCodeBlockLines() {
     // Process all pre elements, not just those with data-source-line
     // (morphdom may strip the attr on first render)
     const pres = document.querySelectorAll("#viewer-content pre");
     pres.forEach((pre) => {
         const code = pre.querySelector("code");
         if (!code) return;
-        // Already annotated?
-        if (code.querySelector("span[data-source-line]")) return;
 
         let preSourceLine = parseInt(pre.getAttribute("data-source-line"), 10);
+        // If already annotated, check if the line numbers are still correct.
+        // If pre has a data-source-line and annotations exist, compare the
+        // expected first line with the actual first annotation.
+        const existingSpan = code.querySelector("span[data-source-line]");
+        if (existingSpan) {
+            if (isNaN(preSourceLine)) return; // can't verify, keep existing
+            const expectedFirst = String(preSourceLine + 1);
+            if (existingSpan.getAttribute("data-source-line") === expectedFirst) {
+                return; // annotations are up to date
+            }
+            // Stale annotations — unwrap them before re-annotating
+            code.querySelectorAll("span[data-source-line]").forEach((span) => {
+                while (span.firstChild) {
+                    span.parentNode.insertBefore(span.firstChild, span);
+                }
+                span.remove();
+            });
+            code.normalize(); // merge adjacent text nodes
+        }
         if (isNaN(preSourceLine)) {
             // Fallback: find the nearest preceding sibling with data-source-line
             // and estimate this pre's line from it
@@ -243,12 +261,12 @@ function _annotateCodeBlockLines() {
                 const parts = text.split("\n");
                 for (let i = 0; i < parts.length; i++) {
                     if (i > 0) {
-                        // Close current line span, start new one with the newline inside it
+                        // Close current line: append \n to END of current span
+                        currentLine.appendChild(document.createTextNode("\n"));
                         fragment.appendChild(currentLine);
                         lineIdx++;
                         currentLine = document.createElement("span");
                         currentLine.setAttribute("data-source-line", String(codeStartLine + lineIdx));
-                        currentLine.appendChild(document.createTextNode("\n"));
                     }
                     if (parts[i]) {
                         currentLine.appendChild(document.createTextNode(parts[i]));

src/extensionsIntegrated/Phoenix-live-preview/MarkdownSync.js

@@ -358,12 +358,17 @@ define(function (require, exports, module) {
             return;
         }
 
+        const mdText = _doc.getText();
         iframeWindow.postMessage({
             type: "MDVIEWR_SWITCH_FILE",
-            markdown: _doc.getText(),
+            markdown: mdText,
             baseURL: _baseURL,
             filePath: _doc.file.fullPath
         }, "*");
+        iframeWindow.postMessage({
+            type: "MDVIEWR_SOURCE_LINES",
+            markdown: mdText
+        }, "*");
     }
 
     function _sendContent() {
@@ -375,12 +380,19 @@ define(function (require, exports, module) {
             return;
         }
 
+        const mdText = _doc.getText();
         iframeWindow.postMessage({
             type: "MDVIEWR_SET_CONTENT",
-            markdown: _doc.getText(),
+            markdown: mdText,
             baseURL: _baseURL,
             filePath: _doc.file.fullPath
         }, "*");
+        // Send source line mapping so the iframe can annotate sub-element
+        // lines (e.g. <br> within paragraphs) on first load.
+        iframeWindow.postMessage({
+            type: "MDVIEWR_SOURCE_LINES",
+            markdown: mdText
+        }, "*");
     }
 
     function _sendUpdate(changeOrigin) {
@@ -501,6 +513,18 @@ define(function (require, exports, module) {
 
         _applyDiffToEditor(markdown);
 
+        // Send back the actual CM text so the iframe can compute accurate
+        // data-source-line attributes. The markdown from convertToMarkdown
+        // may differ slightly from CM's content (e.g. table formatting),
+        // causing line number drift if used directly.
+        const iframeWindow = _getIframeWindow();
+        if (iframeWindow && _doc) {
+            iframeWindow.postMessage({
+                type: "MDVIEWR_SOURCE_LINES",
+                markdown: _doc.getText()
+            }, "*");
+        }
+
         // Push cursor position for undo/redo restore
         if (data.cursorPos) {
             _cursorUndoStack.push(data.cursorPos);