feat(mdviewer): line-scoped reflow with per-source-line cursor sync

Turndown emits each block as one physical line regardless of width, so
typing or pasting a long paragraph in the md viewer wrote one very long
line to CM on every save. Adds a line-scoped reflow that wraps only the
lines the user actually edited, behind a new opt-out preference
mdViewerWrapEditedLines (default true) using EditorOptionHandlers
.getMaxLineLength() as the width source.

New module markdown-line-wrap.js (with 26 unit specs):
- Prefix/suffix line-range diff so unchanged lines stay byte-identical.
- Indent-aware continuation: bullets (- * +), ordered lists (N. / N)),
  and blockquotes drive the continuation indent on wrapped lines.
- Inline atoms (image-only links like [![a](u) ![b](u)](href), plain
  image links, inline links, inline code, inline HTML tags) are kept
  whole by tokenization. Single oversize tokens are left intact.
- Conservative skip rules: fenced code, tables, ATX headings, setext
  underlines, link reference definitions, hr, HTML blocks, frontmatter.
- Balanced packer: binary-searches for the smallest width that still
  produces the greedy line count, so the two physical lines come out
  e.g. 95+90 instead of 118+67 for a 186-char paragraph. Critical for
  the cursor-sync precision in the rendered viewer (see below).
- Fast-path early exit when no changed line exceeds printWidth, so
  typical typing keystrokes never run the regex-heavy state scan.

Per-source-line cursor sync in the markdown viewer (bridge.js + editor.js):
- The custom paragraph renderer in bridge.js now wraps each source line
  of a multi-line paragraph in <span data-source-line="N">. Without
  these the whole <p> shared a single data-source-line and cursor sync
  always resolved to the block's first line, so moving the caret
  through a wrapped paragraph never updated the CM highlight.
- editor.js _updateSourceLineAttrs keeps those spans in sync as the
  user edits. _refreshParagraphSourceSpans no-ops when the layout is
  unchanged, updates attributes in place when only the start line
  shifted, and rebuilds inner HTML (preserving caret by character
  offset) when the wrap line count actually changed.
- Fixes a pre-existing _updateSourceLineAttrs filter bug: it was
  skipping any element with the cursor-sync-highlight class, but that
  class is added to real content blocks (<p>, <h1>) for highlighting
  purposes. Skipping them threw mdLineIdx off-by-one for every block
  after the highlighted one. Now we only skip the standalone overlay
  variants (cursor-sync-br-line, cursor-sync-code-line).

Tests:
- 26 unit specs in unit:markdown-line-wrap cover bullets, nested lists,
  ordered lists, blockquotes, fences, tables, headings, link refs,
  inline atoms, frontmatter, and the badge-row regression.
- The existing 58-spec livepreview:Markdown Editor 1 suite still passes.

Author: abose

src-mdviewer/src/bridge.js

@@ -188,10 +188,34 @@ function _withSourceLine(protoFn, tagRegex) {
     };
 }
 
+// Paragraphs that span multiple source lines (e.g. lines wrapped by Phoenix's
+// reflow on save) get per-source-line <span data-source-line="N"> children.
+// Without these, the whole <p> shares a single data-source-line attribute and
+// cursor sync always maps to the block's first line — so clicking anywhere in
+// a wrapped paragraph snaps CM to the same line, regardless of caret position.
+// Each line is re-parsed via marked.parseInline so inline markdown inside the
+// span renders correctly. The Phoenix-side wrap step deliberately never splits
+// inline atoms across source lines, so each line is independently parseable.
+function _renderParagraphWithSourceSpans(token) {
+    const startLine = token._sourceLine;
+    if (startLine == null) {
+        return _proto.paragraph.call(this, token);
+    }
+    const sourceLines = (token.raw || "").split("\n").filter(l => l !== "");
+    if (sourceLines.length <= 1) {
+        return _proto.paragraph.call(this, token)
+            .replace(/^<p/, `<p data-source-line="${startLine}"`);
+    }
+    const spans = sourceLines.map((line, i) =>
+        `<span data-source-line="${startLine + i}">${marked.parseInline(line)}</span>`
+    );
+    return `<p data-source-line="${startLine}">${spans.join(" ")}</p>`;
+}
+
 marked.use({
     renderer: {
         heading: _withSourceLine(_proto.heading, /^<h[1-6]/),
-        paragraph: _withSourceLine(_proto.paragraph, /^<p/),
+        paragraph: _renderParagraphWithSourceSpans,
         list: _withSourceLine(_proto.list, /^<[ou]l/),
         listitem: _withSourceLine(_proto.listitem, /^<li/),
         table: _withSourceLine(_proto.table, /^<table/),

src-mdviewer/src/components/editor.js

@@ -1,5 +1,6 @@
 // Adapted editor — no save/file I/O, no CM6, no recovery, emits to bridge
 import Prism from "prismjs";
+import { marked } from "marked";
 import TurndownService from "turndown";
 import { gfm } from "turndown-plugin-gfm";
 import { on, emit } from "../core/events.js";
@@ -1799,12 +1800,18 @@ function _updateSourceLineAttrs(contentEl, markdown) {
 
     for (let i = 0; i < children.length; i++) {
         const el = children[i];
-        // Skip UI elements (handles, overlays, etc.)
+        // Skip standalone overlay elements (table handles, code-line/br-line
+        // cursor-sync overlays). Note: cursor-sync-highlight alone is NOT a
+        // skip signal — it's added to real content blocks (<p>, <h1>, etc.)
+        // to highlight them; skipping those would misalign mdLineIdx for the
+        // rest of the walk. The standalone overlay variants always carry the
+        // cursor-sync-br-line or cursor-sync-code-line companion class.
         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")) {
+            el.classList.contains("cursor-sync-br-line") ||
+            el.classList.contains("cursor-sync-code-line")) {
             continue;
         }
 
@@ -1840,11 +1847,113 @@ function _updateSourceLineAttrs(contentEl, markdown) {
             // 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.
+            const blockStart = mdLineIdx;
             mdLineIdx++;
             while (mdLineIdx < mdLines.length && mdLines[mdLineIdx].trim() !== "") {
                 mdLineIdx++;
             }
+            // For paragraphs that span multiple source lines (Phoenix-side
+            // wrap reflow), keep per-line <span data-source-line> children in
+            // sync so cursor sync resolves to the exact line the caret is on,
+            // not just the block start.
+            if (tag === "P") {
+                const blockLines = mdLines.slice(blockStart, mdLineIdx)
+                    .filter(l => l !== "");
+                _refreshParagraphSourceSpans(el, blockLines, blockStart + 1);
+            }
+        }
+    }
+}
+
+// Maintain the per-source-line <span> structure inside a multi-line paragraph.
+// Cases:
+//   - Span count matches sourceLines.length and starting line matches → no-op
+//     (line numbers may have shifted upward, in which case attributes are
+//     updated in place without touching content or cursor).
+//   - Single source line and no spans → no-op.
+//   - Single source line but spans present (paragraph just stopped wrapping)
+//     → unwrap them, preserving caret position by character offset.
+//   - Multi source line and span structure mismatched (just started wrapping,
+//     or wrap line count changed) → rebuild innerHTML from source lines, with
+//     caret position preserved by character offset.
+function _refreshParagraphSourceSpans(p, sourceLines, startLineNum) {
+    const expectedCount = sourceLines.length;
+    if (expectedCount === 0) {
+        return;
+    }
+    const existingSpans = Array.from(p.children)
+        .filter(c => c.tagName === "SPAN" && c.hasAttribute("data-source-line"));
+
+    if (expectedCount === 1) {
+        if (existingSpans.length === 0) {
+            return;
+        }
+        // Paragraph just stopped wrapping — unwrap the spans into the <p>.
+        _rebuildParagraphInner(p, marked.parseInline(sourceLines[0] || ""));
+        return;
+    }
+
+    if (existingSpans.length === expectedCount) {
+        // Span count matches. The user is typing inside one of the spans; do
+        // not disturb their content. Just update the data-source-line values
+        // in case the paragraph shifted up/down in the source.
+        const firstAttr = parseInt(existingSpans[0].getAttribute("data-source-line"), 10);
+        if (firstAttr !== startLineNum) {
+            for (let i = 0; i < existingSpans.length; i++) {
+                existingSpans[i].setAttribute("data-source-line", String(startLineNum + i));
+            }
         }
+        return;
+    }
+
+    // Span structure doesn't match expected — rebuild from source.
+    const newHtml = sourceLines.map((line, i) =>
+        `<span data-source-line="${startLineNum + i}">${marked.parseInline(line)}</span>`
+    ).join(" ");
+    _rebuildParagraphInner(p, newHtml);
+}
+
+// Replace a paragraph's innerHTML while preserving the user's caret position
+// by character offset within the block. Used when wrap state changes mid-edit
+// (paragraph starts/stops wrapping, or wrap line count changes).
+function _rebuildParagraphInner(p, newInnerHtml) {
+    if (p.innerHTML === newInnerHtml) {
+        return;
+    }
+    const sel = window.getSelection();
+    let savedOffset = null;
+    if (sel && sel.rangeCount) {
+        const range = sel.getRangeAt(0);
+        if (p.contains(range.startContainer)) {
+            const pre = document.createRange();
+            pre.setStart(p, 0);
+            pre.setEnd(range.startContainer, range.startOffset);
+            savedOffset = pre.toString().length;
+        }
+    }
+    p.innerHTML = newInnerHtml;
+    if (savedOffset !== null && sel) {
+        const walker = document.createTreeWalker(p, NodeFilter.SHOW_TEXT, null);
+        let remaining = savedOffset;
+        let node = walker.nextNode();
+        while (node) {
+            if (remaining <= node.textContent.length) {
+                const range = document.createRange();
+                range.setStart(node, remaining);
+                range.collapse(true);
+                sel.removeAllRanges();
+                sel.addRange(range);
+                return;
+            }
+            remaining -= node.textContent.length;
+            node = walker.nextNode();
+        }
+        // Fallback: place cursor at end of paragraph
+        const range = document.createRange();
+        range.selectNodeContents(p);
+        range.collapse(false);
+        sel.removeAllRanges();
+        sel.addRange(range);
     }
 }
 

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

@@ -30,8 +30,17 @@ define(function (require, exports, module) {
         Commands = require("command/Commands"),
         KeyBindingManager = require("command/KeyBindingManager"),
         Metrics = require("utils/Metrics"),
+        PreferencesManager = require("preferences/PreferencesManager"),
+        EditorOptionHandlers = require("editor/EditorOptionHandlers"),
+        markdownLineWrap = require("./markdown-line-wrap"),
         utils = require("./utils");
 
+    const PREF_MD_WRAP_EDITED_LINES = "mdViewerWrapEditedLines";
+    PreferencesManager.definePreference(PREF_MD_WRAP_EDITED_LINES, "boolean", true, {
+        description: "When editing markdown in the live preview, wrap edited lines " +
+            "to the editor's max-line-length guide. Other lines stay byte-identical."
+    });
+
     // Commands whose shortcuts, when forwarded from the md viewer iframe,
     // open a parent-side UI that needs to keep keyboard focus. The iframe's
     // 100ms auto-refocus must skip these shortcuts — otherwise it yanks
@@ -620,6 +629,21 @@ define(function (require, exports, module) {
             return;
         }
 
+        // Reflow only the edited long lines back to the editor's max-line-length
+        // guide. Turndown emits each block as a single physical line; without
+        // this step a long paragraph stays on one line until the user runs the
+        // full beautifier. Unchanged lines are guaranteed byte-identical, so
+        // git diffs stay scoped to the actual edit.
+        if (PreferencesManager.get(PREF_MD_WRAP_EDITED_LINES)) {
+            const printWidth = EditorOptionHandlers.getMaxLineLength();
+            if (printWidth && printWidth >= 20) {
+                newText = markdownLineWrap.wrapEditedLines(oldText, newText, printWidth);
+                if (oldText === newText) {
+                    return;
+                }
+            }
+        }
+
         // Find first differing character
         let prefixLen = 0;
         const minLen = Math.min(oldText.length, newText.length);