@blankdotpage/cake 0.1.68 → 0.1.69

package/dist/cake/dom/render.d.ts

@@ -1,6 +1,31 @@
 import type { Doc, Inline } from "../core/types";
 import type { Runtime } from "../core/runtime";
-import { createDomMap } from "./dom-map";
+import { createDomMap, type TextRun } from "./dom-map";
+export type RenderSnapshotBlock = {
+    nodeStart: number;
+    nodeEnd: number;
+    runStart: number;
+    runEnd: number;
+    cursorStart: number;
+    cursorEnd: number;
+    lineStart: number;
+    lineEnd: number;
+};
+export type RenderSnapshot = {
+    blocks: RenderSnapshotBlock[];
+    nodes: Node[];
+    runs: TextRun[];
+};
+export type DirtyCursorRange = {
+    previous: {
+        start: number;
+        end: number;
+    };
+    next: {
+        start: number;
+        end: number;
+    };
+};
 export type RenderResult = {
     root: HTMLElement;
     map: ReturnType<typeof createDomMap>;
@@ -8,8 +33,13 @@ export type RenderResult = {
 export type RenderContentResult = {
     content: Node[];
     map: ReturnType<typeof createDomMap>;
+    snapshot: RenderSnapshot;
+};
+export type RenderDocContentOptions = {
+    previousSnapshot?: RenderSnapshot | null;
+    dirtyCursorRange?: DirtyCursorRange | null;
 };
-export declare function renderDocContent(doc: Doc, dom: Runtime["dom"], root?: HTMLElement): RenderContentResult;
+export declare function renderDocContent(doc: Doc, dom: Runtime["dom"], root?: HTMLElement, options?: RenderDocContentOptions): RenderContentResult;
 export declare function renderDoc(doc: Doc, dom: Runtime["dom"]): RenderResult;
 export declare function mergeInlineForRender(inlines: Inline[]): Inline[];
 //# sourceMappingURL=render.d.ts.map

package/dist/cake/dom/render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../../src/cake/dom/render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAS,GAAG,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EACL,YAAY,EAGb,MAAM,WAAW,CAAC;AAEnB,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,WAAW,CAAC;IAClB,GAAG,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,IAAI,EAAE,CAAC;IAChB,GAAG,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;CACtC,CAAC;AASF,wBAAgB,gBAAgB,CAC9B,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,EACnB,IAAI,CAAC,EAAE,WAAW,GACjB,mBAAmB,CA4WrB;AAED,wBAAgB,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,GAAG,YAAY,CA0IrE;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAiChE"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../../src/cake/dom/render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAS,GAAG,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAG/C,OAAO,EACL,YAAY,EAEZ,KAAK,OAAO,EACb,MAAM,WAAW,CAAC;AAEnB,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAC9B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,IAAI,EAAE,OAAO,EAAE,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE;QACR,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;KACb,CAAC;IACF,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;KACb,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,WAAW,CAAC;IAClB,GAAG,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,IAAI,EAAE,CAAC;IAChB,GAAG,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;IACrC,QAAQ,EAAE,cAAc,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,gBAAgB,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACzC,gBAAgB,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAC5C,CAAC;AA2KF,wBAAgB,gBAAgB,CAC9B,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,EACnB,IAAI,CAAC,EAAE,WAAW,EAClB,OAAO,CAAC,EAAE,uBAAuB,GAChC,mBAAmB,CAqsBrB;AAED,wBAAgB,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,GAAG,YAAY,CASrE;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAiChE"}

package/dist/cake/dom/render.js

@@ -1,3 +1,4 @@
+import { graphemeCount } from "../shared/segmenter";
 import { createDomMap, createTextRun as createTextRunBase, } from "./dom-map";
 function normalizeNodes(result) {
     if (!result) {
@@ -5,8 +6,209 @@ function normalizeNodes(result) {
     }
     return Array.isArray(result) ? result : [result];
 }
-export function renderDocContent(doc, dom, root) {
+function isManagedRootNode(node) {
+    if (!(node instanceof Element)) {
+        return false;
+    }
+    return (node.hasAttribute("data-line-index") ||
+        node.hasAttribute("data-block-wrapper") ||
+        node.hasAttribute("data-block-atom") ||
+        node.classList.contains("cake-line"));
+}
+function countInlineCursorUnits(inline) {
+    if (inline.type === "text") {
+        return graphemeCount(inline.text);
+    }
+    if (inline.type === "inline-wrapper") {
+        let total = 0;
+        for (const child of inline.children) {
+            total += countInlineCursorUnits(child);
+        }
+        return total;
+    }
+    if (inline.type === "inline-atom") {
+        return 1;
+    }
+    return 0;
+}
+function measureBlock(block) {
+    if (block.type === "paragraph") {
+        let cursorLength = 0;
+        for (const inline of block.content) {
+            cursorLength += countInlineCursorUnits(inline);
+        }
+        return { cursorLength, lineCount: 1 };
+    }
+    if (block.type === "block-atom") {
+        return { cursorLength: 1, lineCount: 1 };
+    }
+    if (block.type === "block-wrapper") {
+        let cursorLength = 0;
+        let lineCount = 0;
+        for (let i = 0; i < block.blocks.length; i += 1) {
+            const child = block.blocks[i];
+            const measured = measureBlock(child);
+            cursorLength += measured.cursorLength;
+            lineCount += measured.lineCount;
+            if (i < block.blocks.length - 1) {
+                cursorLength += 1;
+            }
+        }
+        return { cursorLength, lineCount };
+    }
+    return { cursorLength: 0, lineCount: 0 };
+}
+function measureTopLevelBlocks(doc) {
+    const measuredBlocks = [];
+    let cursorOffset = 0;
+    let lineIndex = 0;
+    doc.blocks.forEach((block, index) => {
+        const measured = measureBlock(block);
+        measuredBlocks.push({
+            cursorStart: cursorOffset,
+            cursorEnd: cursorOffset + measured.cursorLength,
+            lineStart: lineIndex,
+            lineEnd: lineIndex + measured.lineCount,
+        });
+        cursorOffset += measured.cursorLength;
+        lineIndex += measured.lineCount;
+        if (index < doc.blocks.length - 1) {
+            cursorOffset += 1;
+        }
+    });
+    return measuredBlocks;
+}
+function blockRangeForCursorRange(blocks, start, end) {
+    if (blocks.length === 0) {
+        return { start: 0, end: 0 };
+    }
+    const rangeStart = Math.min(start, end);
+    const rangeEnd = Math.max(start, end);
+    let first = -1;
+    let last = -1;
+    for (let i = 0; i < blocks.length; i += 1) {
+        const block = blocks[i];
+        const spanStart = block.cursorStart;
+        const spanEnd = i < blocks.length - 1 ? block.cursorEnd + 1 : block.cursorEnd;
+        if (spanEnd < rangeStart || spanStart > rangeEnd) {
+            continue;
+        }
+        if (first === -1) {
+            first = i;
+        }
+        last = i;
+    }
+    if (first === -1) {
+        if (rangeEnd <= blocks[0].cursorStart) {
+            return { start: 0, end: 0 };
+        }
+        return { start: blocks.length, end: blocks.length };
+    }
+    return { start: first, end: last + 1 };
+}
+function shiftRun(run, delta) {
+    if (delta === 0) {
+        return run;
+    }
+    return {
+        node: run.node,
+        cursorStart: run.cursorStart + delta,
+        cursorEnd: run.cursorEnd + delta,
+        boundaryOffsets: run.boundaryOffsets,
+    };
+}
+function snapshotMatchesRoot(root, snapshot) {
+    const managedChildren = Array.from(root.childNodes).filter(isManagedRootNode);
+    if (managedChildren.length !== snapshot.nodes.length) {
+        return false;
+    }
+    for (let i = 0; i < managedChildren.length; i += 1) {
+        if (managedChildren[i] !== snapshot.nodes[i]) {
+            return false;
+        }
+    }
+    return true;
+}
+export function renderDocContent(doc, dom, root, options) {
+    const measuredBlocks = measureTopLevelBlocks(doc);
+    const previousSnapshot = options?.previousSnapshot ?? null;
+    const dirtyCursorRange = options?.dirtyCursorRange ?? null;
+    const canReuseSnapshot = Boolean(root && previousSnapshot && snapshotMatchesRoot(root, previousSnapshot));
+    let oldDirtyStart = 0;
+    let oldDirtyEnd = previousSnapshot?.blocks.length ?? 0;
+    let newDirtyStart = 0;
+    let newDirtyEnd = doc.blocks.length;
+    if (canReuseSnapshot) {
+        if (dirtyCursorRange) {
+            const previousRange = blockRangeForCursorRange(previousSnapshot.blocks, dirtyCursorRange.previous.start, dirtyCursorRange.previous.end);
+            const nextRange = blockRangeForCursorRange(measuredBlocks, dirtyCursorRange.next.start, dirtyCursorRange.next.end);
+            oldDirtyStart = previousRange.start;
+            oldDirtyEnd = previousRange.end;
+            newDirtyStart = nextRange.start;
+            newDirtyEnd = nextRange.end;
+        }
+        else {
+            oldDirtyStart = 0;
+            oldDirtyEnd = 0;
+            newDirtyStart = 0;
+            newDirtyEnd = 0;
+        }
+        const oldDirtyLineCount = previousSnapshot.blocks
+            .slice(oldDirtyStart, oldDirtyEnd)
+            .reduce((sum, block) => sum + (block.lineEnd - block.lineStart), 0);
+        const newDirtyLineCount = measuredBlocks
+            .slice(newDirtyStart, newDirtyEnd)
+            .reduce((sum, block) => sum + (block.lineEnd - block.lineStart), 0);
+        // If dirty blocks changed total line count, line indices shift for all trailing
+        // blocks. Re-render tail to keep data-line-index attributes correct.
+        if (oldDirtyLineCount !== newDirtyLineCount) {
+            oldDirtyEnd = previousSnapshot.blocks.length;
+            newDirtyEnd = measuredBlocks.length;
+        }
+        let canReusePrefixSuffix = true;
+        for (let i = 0; i < newDirtyStart; i += 1) {
+            const oldBlock = previousSnapshot.blocks[i];
+            const nextMeasured = measuredBlocks[i];
+            if (!oldBlock || !nextMeasured) {
+                canReusePrefixSuffix = false;
+                break;
+            }
+            if (oldBlock.cursorEnd - oldBlock.cursorStart !==
+                nextMeasured.cursorEnd - nextMeasured.cursorStart ||
+                oldBlock.lineEnd - oldBlock.lineStart !==
+                    nextMeasured.lineEnd - nextMeasured.lineStart) {
+                canReusePrefixSuffix = false;
+                break;
+            }
+        }
+        if (canReusePrefixSuffix) {
+            for (let i = newDirtyEnd; i < measuredBlocks.length; i += 1) {
+                const oldIndex = oldDirtyEnd + (i - newDirtyEnd);
+                const oldBlock = previousSnapshot.blocks[oldIndex];
+                const nextMeasured = measuredBlocks[i];
+                if (!oldBlock || !nextMeasured) {
+                    canReusePrefixSuffix = false;
+                    break;
+                }
+                if (oldBlock.cursorEnd - oldBlock.cursorStart !==
+                    nextMeasured.cursorEnd - nextMeasured.cursorStart ||
+                    oldBlock.lineEnd - oldBlock.lineStart !==
+                        nextMeasured.lineEnd - nextMeasured.lineStart) {
+                    canReusePrefixSuffix = false;
+                    break;
+                }
+            }
+        }
+        if (!canReusePrefixSuffix) {
+            oldDirtyStart = 0;
+            oldDirtyEnd = previousSnapshot.blocks.length;
+            newDirtyStart = 0;
+            newDirtyEnd = measuredBlocks.length;
+        }
+    }
     const runs = [];
+    const contentNodes = [];
+    const snapshotBlocks = [];
     let cursorOffset = 0;
     let lineIndex = 0;
     function createTextRun(node) {
@@ -52,6 +254,70 @@ export function renderDocContent(doc, dom, root) {
         }
         return "unknown";
     }
+    function isManagedBlockElement(element) {
+        return (element.hasAttribute("data-line-index") ||
+            element.hasAttribute("data-block-wrapper") ||
+            element.hasAttribute("data-block-atom") ||
+            element.classList.contains("cake-line"));
+    }
+    function canReuseRenderedBlockElement(existing, rendered) {
+        if (!isManagedBlockElement(existing) || !isManagedBlockElement(rendered)) {
+            return false;
+        }
+        if (existing.tagName !== rendered.tagName) {
+            return false;
+        }
+        return (existing.getAttribute("data-block-wrapper") ===
+            rendered.getAttribute("data-block-wrapper") &&
+            existing.getAttribute("data-block-atom") ===
+                rendered.getAttribute("data-block-atom"));
+    }
+    function syncManagedBlockAttributes(existing, rendered) {
+        if (existing.className !== rendered.className) {
+            existing.className = rendered.className;
+        }
+        const existingStyle = existing.getAttribute("style");
+        const renderedStyle = rendered.getAttribute("style");
+        if (existingStyle !== renderedStyle) {
+            if (renderedStyle === null) {
+                existing.removeAttribute("style");
+            }
+            else {
+                existing.setAttribute("style", renderedStyle);
+            }
+        }
+        const managedAttributes = [
+            "data-line-index",
+            "data-block-wrapper",
+            "data-block-atom",
+            "aria-placeholder",
+        ];
+        for (const name of managedAttributes) {
+            const next = rendered.getAttribute(name);
+            if (next === null) {
+                existing.removeAttribute(name);
+            }
+            else if (existing.getAttribute(name) !== next) {
+                existing.setAttribute(name, next);
+            }
+        }
+    }
+    function reconcileRenderedBlockElement(existing, rendered) {
+        syncManagedBlockAttributes(existing, rendered);
+        const existingChildren = Array.from(existing.childNodes);
+        const renderedChildren = Array.from(rendered.childNodes);
+        const nextChildren = renderedChildren.map((child, index) => {
+            const existingChild = existingChildren[index];
+            if (child instanceof Element &&
+                existingChild instanceof Element &&
+                canReuseRenderedBlockElement(existingChild, child)) {
+                return reconcileRenderedBlockElement(existingChild, child);
+            }
+            return child;
+        });
+        existing.replaceChildren(...nextChildren);
+        return existing;
+    }
     function getInlineKey(inline) {
         if (inline.type === "text") {
             return "text";
@@ -171,7 +437,16 @@ export function renderDocContent(doc, dom, root) {
         for (const renderBlock of dom.blockRenderers) {
             const result = renderBlock(block, context);
             if (result) {
-                return normalizeNodes(result);
+                const renderedNodes = normalizeNodes(result);
+                const renderedElement = renderedNodes.length === 1 && renderedNodes[0] instanceof Element
+                    ? renderedNodes[0]
+                    : null;
+                if (existing instanceof Element &&
+                    renderedElement &&
+                    canReuseRenderedBlockElement(existing, renderedElement)) {
+                    return [reconcileRenderedBlockElement(existing, renderedElement)];
+                }
+                return renderedNodes;
             }
         }
         if (block.type === "paragraph") {
@@ -265,8 +540,7 @@ export function renderDocContent(doc, dom, root) {
         const newChildren = [];
         blocks.forEach((block, index) => {
             const existingChild = existingChildren[index] ?? null;
-            const canReuse = existingChild && getElementKey(existingChild) === getBlockKey(block);
-            const nodes = reconcileBlock(block, canReuse ? existingChild : null);
+            const nodes = reconcileBlock(block, existingChild);
             newChildren.push(...nodes);
             if (index < blocks.length - 1) {
                 cursorOffset += 1;
@@ -291,139 +565,148 @@ export function renderDocContent(doc, dom, root) {
         });
         return nodes;
     }
-    const existingChildren = root ? Array.from(root.children) : [];
-    const contentNodes = [];
-    doc.blocks.forEach((block, index) => {
-        const existingChild = existingChildren[index] ?? null;
-        const canReuse = existingChild && getElementKey(existingChild) === getBlockKey(block);
-        const nodes = reconcileBlock(block, canReuse ? existingChild : null);
+    function appendBlockSnapshot(nodes, measured, runsStart, runsEnd, cursorStart, lineStart) {
+        const nodeStart = contentNodes.length;
         contentNodes.push(...nodes);
-        if (index < doc.blocks.length - 1) {
-            cursorOffset += 1;
-        }
-    });
-    return { content: contentNodes, map: createDomMap(runs) };
-}
-export function renderDoc(doc, dom) {
-    const root = document.createElement("div");
-    root.className = "cake-content";
-    root.setAttribute("contenteditable", "true");
-    const runs = [];
-    let cursorOffset = 0;
-    let lineIndex = 0;
-    function createTextRun(node) {
-        const run = createTextRunBase(node, cursorOffset);
-        cursorOffset = run.cursorEnd;
-        runs.push(run);
-        return run;
+        const nodeEnd = contentNodes.length;
+        const cursorEnd = cursorStart + (measured.cursorEnd - measured.cursorStart);
+        const lineEnd = lineStart + (measured.lineEnd - measured.lineStart);
+        snapshotBlocks.push({
+            nodeStart,
+            nodeEnd,
+            runStart: runsStart,
+            runEnd: runsEnd,
+            cursorStart,
+            cursorEnd,
+            lineStart,
+            lineEnd,
+        });
+        cursorOffset = cursorEnd;
+        lineIndex = lineEnd;
     }
-    const context = {
-        renderInline,
-        renderBlock,
-        renderBlocks,
-        createTextRun,
-        getLineIndex: () => lineIndex,
-        incrementLineIndex: () => {
-            lineIndex += 1;
-        },
-    };
-    function renderInline(inline) {
-        for (const renderInline of dom.inlineRenderers) {
-            const result = renderInline(inline, context);
-            if (result) {
-                return normalizeNodes(result);
-            }
-        }
-        if (inline.type === "text") {
-            const element = document.createElement("span");
-            element.className = "cake-text";
-            const node = document.createTextNode(inline.text);
-            createTextRun(node);
-            element.append(node);
-            return [element];
-        }
-        if (inline.type === "inline-wrapper") {
-            const element = document.createElement("span");
-            element.classList.add("cake-inline", `cake-inline--${inline.kind}`);
-            for (const child of inline.children) {
-                for (const node of renderInline(child)) {
-                    element.append(node);
+    function appendReusedBlock(oldIndex, newIndex) {
+        if (!previousSnapshot) {
+            return false;
+        }
+        const oldBlock = previousSnapshot.blocks[oldIndex];
+        const measured = measuredBlocks[newIndex];
+        if (!oldBlock || !measured) {
+            return false;
+        }
+        const nodes = previousSnapshot.nodes.slice(oldBlock.nodeStart, oldBlock.nodeEnd);
+        if (nodes.length !== oldBlock.nodeEnd - oldBlock.nodeStart) {
+            return false;
+        }
+        if (root) {
+            for (const node of nodes) {
+                if (node.parentNode !== root) {
+                    return false;
                 }
             }
-            return [element];
         }
-        if (inline.type === "inline-atom") {
-            const element = document.createElement("span");
-            element.classList.add("cake-inline-atom", `cake-inline-atom--${inline.kind}`);
-            const node = document.createTextNode(" ");
-            createTextRun(node);
-            element.append(node);
-            return [element];
+        const blockRuns = previousSnapshot.runs.slice(oldBlock.runStart, oldBlock.runEnd);
+        const runShift = cursorOffset - oldBlock.cursorStart;
+        const runsStart = runs.length;
+        for (const run of blockRuns) {
+            runs.push(shiftRun(run, runShift));
+        }
+        const runsEnd = runs.length;
+        const cursorStart = cursorOffset;
+        const lineStart = lineIndex;
+        appendBlockSnapshot(nodes, measured, runsStart, runsEnd, cursorStart, lineStart);
+        if (newIndex < doc.blocks.length - 1) {
+            cursorOffset += 1;
         }
-        return [];
+        return true;
     }
-    function renderBlock(block) {
-        for (const renderBlock of dom.blockRenderers) {
-            const result = renderBlock(block, context);
-            if (result) {
-                return normalizeNodes(result);
-            }
+    const managedChildren = root
+        ? Array.from(root.childNodes).filter(isManagedRootNode)
+        : [];
+    let fallbackToFullRender = false;
+    for (let i = 0; i < newDirtyStart; i += 1) {
+        if (!appendReusedBlock(i, i)) {
+            fallbackToFullRender = true;
+            break;
         }
-        if (block.type === "paragraph") {
-            const element = document.createElement("div");
-            element.setAttribute("data-line-index", String(context.getLineIndex()));
-            element.classList.add("cake-line");
-            context.incrementLineIndex();
-            if (block.content.length === 0) {
-                // Use <br> to maintain line height for empty lines (like v1)
-                // Also create an empty text node for cursor positioning
-                const textNode = document.createTextNode("");
-                createTextRun(textNode);
-                element.append(textNode);
-                element.append(document.createElement("br"));
+    }
+    if (!fallbackToFullRender) {
+        for (let i = newDirtyStart; i < newDirtyEnd; i += 1) {
+            const block = doc.blocks[i];
+            if (!block) {
+                continue;
             }
-            else {
-                const mergedContent = mergeInlineForRender(block.content);
-                for (const inline of mergedContent) {
-                    for (const node of renderInline(inline)) {
-                        element.append(node);
-                    }
+            const oldIndex = oldDirtyStart + (i - newDirtyStart);
+            const oldBlock = previousSnapshot?.blocks[oldIndex] ?? null;
+            let existing = null;
+            if (oldBlock && previousSnapshot) {
+                const oldNodes = previousSnapshot.nodes.slice(oldBlock.nodeStart, oldBlock.nodeEnd);
+                if (oldNodes.length === 1 && oldNodes[0] instanceof Element) {
+                    existing = oldNodes[0];
                 }
             }
-            return [element];
-        }
-        if (block.type === "block-wrapper") {
-            const element = document.createElement("div");
-            element.setAttribute("data-block-wrapper", block.kind);
-            for (const node of renderBlocks(block.blocks)) {
-                element.append(node);
+            else {
+                const existingNode = managedChildren[oldIndex] ?? null;
+                existing = existingNode instanceof Element ? existingNode : null;
+            }
+            const runsStart = runs.length;
+            const cursorStart = cursorOffset;
+            const lineStart = lineIndex;
+            const nodes = reconcileBlock(block, existing);
+            const runsEnd = runs.length;
+            const measured = measuredBlocks[i];
+            appendBlockSnapshot(nodes, measured, runsStart, runsEnd, cursorStart, lineStart);
+            if (i < doc.blocks.length - 1) {
+                cursorOffset += 1;
             }
-            return [element];
         }
-        if (block.type === "block-atom") {
-            const element = document.createElement("div");
-            element.setAttribute("data-block-atom", block.kind);
-            element.setAttribute("data-line-index", String(context.getLineIndex()));
-            element.classList.add("cake-line");
-            context.incrementLineIndex();
-            return [element];
+    }
+    if (!fallbackToFullRender) {
+        for (let i = newDirtyEnd; i < doc.blocks.length; i += 1) {
+            const oldIndex = oldDirtyEnd + (i - newDirtyEnd);
+            if (!appendReusedBlock(oldIndex, i)) {
+                fallbackToFullRender = true;
+                break;
+            }
         }
-        return [];
     }
-    function renderBlocks(blocks) {
-        const nodes = [];
-        blocks.forEach((block, index) => {
-            nodes.push(...renderBlock(block));
-            if (index < blocks.length - 1) {
+    if (fallbackToFullRender) {
+        runs.length = 0;
+        contentNodes.length = 0;
+        snapshotBlocks.length = 0;
+        cursorOffset = 0;
+        lineIndex = 0;
+        doc.blocks.forEach((block, index) => {
+            const existingNode = managedChildren[index] ?? null;
+            const existing = existingNode instanceof Element ? existingNode : null;
+            const runsStart = runs.length;
+            const cursorStart = cursorOffset;
+            const lineStart = lineIndex;
+            const nodes = reconcileBlock(block, existing);
+            const runsEnd = runs.length;
+            const measured = measuredBlocks[index];
+            appendBlockSnapshot(nodes, measured, runsStart, runsEnd, cursorStart, lineStart);
+            if (index < doc.blocks.length - 1) {
                 cursorOffset += 1;
             }
         });
-        return nodes;
     }
-    for (const node of renderBlocks(doc.blocks)) {
-        root.append(node);
-    }
-    return { root, map: createDomMap(runs) };
+    return {
+        content: contentNodes,
+        map: createDomMap(runs),
+        snapshot: {
+            blocks: snapshotBlocks,
+            nodes: contentNodes,
+            runs,
+        },
+    };
+}
+export function renderDoc(doc, dom) {
+    const root = document.createElement("div");
+    root.className = "cake-content";
+    root.setAttribute("contenteditable", "true");
+    const { content, map } = renderDocContent(doc, dom);
+    root.append(...content);
+    return { root, map };
 }
 export function mergeInlineForRender(inlines) {
     const merged = [];