@blankdotpage/cake 0.1.5 → 0.1.6

package/dist/cake/engine/cake-engine.d.ts

@@ -3,6 +3,7 @@ import { type CakeExtension, type EditCommand } from "../core/runtime";
 import type { SelectionRect } from "./selection/selection-geometry";
 type EngineOptions = {
     container: HTMLElement;
+    contentRoot?: HTMLElement;
     value: string;
     selection?: Selection;
     extensions?: CakeExtension[];
@@ -24,8 +25,6 @@ export declare class CakeEngine {
     private runtime;
     private extensions;
     private _state;
-    private originalCaretRangeFromPoint;
-    private patchedCaretRangeFromPoint;
     private get state();
     private set state(value);
     private contentRoot;
@@ -101,7 +100,7 @@ export declare class CakeEngine {
     getFocusRect(): SelectionRect | null;
     getContainer(): HTMLElement;
     getContentRoot(): HTMLElement | null;
-    getOverlayRoot(): HTMLDivElement | null;
+    getOverlayRoot(): HTMLDivElement;
     syncPlaceholder(): void;
     insertText(text: string): void;
     replaceText(oldText: string, newText: string): void;
@@ -123,8 +122,6 @@ export declare class CakeEngine {
     private attachDragListeners;
     private detachDragListeners;
     private detachListeners;
-    private installCaretRangeFromPointShim;
-    private uninstallCaretRangeFromPointShim;
     private render;
     private isEmptyParagraphDoc;
     private updatePlaceholder;

package/dist/index.cjs

@@ -2870,13 +2870,11 @@ function renderDocContent(doc, extensions, root) {
     return "unknown";
   }
   function getElementKey(element) {
-    if (element.hasAttribute("data-block")) {
-      const blockType = element.getAttribute("data-block") ?? "unknown";
-      const lineKind = element instanceof HTMLElement ? element.dataset.lineKind : null;
-      if (lineKind && lineKind !== blockType) {
-        return lineKind;
+    if (element.classList.contains("cake-line")) {
+      if (element.hasAttribute("data-block-atom")) {
+        return `block-atom:${element.getAttribute("data-block-atom")}`;
       }
-      return blockType;
+      return "paragraph";
     }
     if (element.hasAttribute("data-block-wrapper")) {
       return `block-wrapper:${element.getAttribute("data-block-wrapper")}`;
@@ -2902,11 +2900,13 @@ function renderDocContent(doc, extensions, root) {
     if (element.classList.contains("cake-text")) {
       return "text";
     }
-    if (element.hasAttribute("data-inline")) {
-      return `inline-wrapper:${element.getAttribute("data-inline")}`;
-    }
-    if (element.hasAttribute("data-inline-atom")) {
-      return `inline-atom:${element.getAttribute("data-inline-atom")}`;
+    for (const cls of Array.from(element.classList)) {
+      if (cls.startsWith("cake-inline--")) {
+        return `inline-wrapper:${cls.slice("cake-inline--".length)}`;
+      }
+      if (cls.startsWith("cake-inline-atom--")) {
+        return `inline-atom:${cls.slice("cake-inline-atom--".length)}`;
+      }
     }
     return "unknown";
   }
@@ -2943,11 +2943,13 @@ function renderDocContent(doc, extensions, root) {
     if (inline.type === "inline-wrapper") {
       const canReuse = existing && existing instanceof HTMLSpanElement && getInlineElementKey(existing) === getInlineKey(inline);
       if (canReuse) {
+        existing.removeAttribute("data-inline");
+        existing.classList.add("cake-inline", `cake-inline--${inline.kind}`);
         reconcileInlineChildren(existing, inline.children);
         return [existing];
       }
       const element = document.createElement("span");
-      element.setAttribute("data-inline", inline.kind);
+      element.classList.add("cake-inline", `cake-inline--${inline.kind}`);
       for (const child of inline.children) {
         for (const node of reconcileInline(child, null)) {
           element.append(node);
@@ -2958,6 +2960,11 @@ function renderDocContent(doc, extensions, root) {
     if (inline.type === "inline-atom") {
       const canReuse = existing && existing instanceof HTMLSpanElement && getInlineElementKey(existing) === getInlineKey(inline);
       if (canReuse) {
+        existing.removeAttribute("data-inline-atom");
+        existing.classList.add(
+          "cake-inline-atom",
+          `cake-inline-atom--${inline.kind}`
+        );
         const textNode = existing.firstChild;
         if (textNode instanceof Text) {
           createTextRun$1(textNode);
@@ -2965,7 +2972,10 @@ function renderDocContent(doc, extensions, root) {
         }
       }
       const element = document.createElement("span");
-      element.setAttribute("data-inline-atom", inline.kind);
+      element.classList.add(
+        "cake-inline-atom",
+        `cake-inline-atom--${inline.kind}`
+      );
       const node = document.createTextNode(" ");
       createTextRun$1(node);
       element.append(node);
@@ -3008,6 +3018,13 @@ function renderDocContent(doc, extensions, root) {
       context.incrementLineIndex();
       if (canReuse) {
         existing.setAttribute("data-line-index", String(currentLineIndex));
+        existing.removeAttribute("data-block");
+        delete existing.dataset.lineKind;
+        delete existing.dataset.headingLevel;
+        delete existing.dataset.headingPlaceholder;
+        existing.removeAttribute("aria-placeholder");
+        existing.className = "cake-line";
+        existing.removeAttribute("style");
         if (block.content.length === 0) {
           const firstChild = existing.firstChild;
           if (firstChild instanceof Text && existing.querySelector("br")) {
@@ -3028,10 +3045,8 @@ function renderDocContent(doc, extensions, root) {
         return [existing];
       }
       const element = document.createElement("div");
-      element.setAttribute("data-block", "paragraph");
       element.setAttribute("data-line-index", String(currentLineIndex));
       element.classList.add("cake-line");
-      element.dataset.lineKind = "paragraph";
       if (block.content.length === 0) {
         const textNode = document.createTextNode("");
         createTextRun$1(textNode);
@@ -4639,18 +4654,16 @@ const headingExtension = defineExtension({
     const level = typeof ((_a = block.data) == null ? void 0 : _a.level) === "number" ? block.data.level : 1;
     const normalizedLevel = Math.max(1, Math.min(3, level));
     const lineElement = document.createElement("div");
-    lineElement.setAttribute("data-block", "paragraph");
     lineElement.setAttribute("data-line-index", String(context.getLineIndex()));
     lineElement.classList.add(
       "cake-line",
       "is-heading",
       `is-heading-${normalizedLevel}`
     );
-    lineElement.dataset.lineKind = "heading";
-    lineElement.dataset.headingLevel = String(normalizedLevel);
     context.incrementLineIndex();
     const paragraph = block.blocks[0];
     if ((paragraph == null ? void 0 : paragraph.type) === "paragraph" && paragraph.content.length > 0) {
+      lineElement.removeAttribute("aria-placeholder");
       const mergedContent = mergeInlineForRender(paragraph.content);
       for (const inline of mergedContent) {
         for (const node of context.renderInline(inline)) {
@@ -4658,7 +4671,10 @@ const headingExtension = defineExtension({
         }
       }
     } else {
-      lineElement.dataset.headingPlaceholder = `Heading ${normalizedLevel}`;
+      lineElement.setAttribute(
+        "aria-placeholder",
+        `Heading ${normalizedLevel}`
+      );
       const node = document.createTextNode("");
       context.createTextRun(node);
       lineElement.append(node);
@@ -5665,7 +5681,6 @@ const listExtension = defineExtension({
       return null;
     }
     const element = document.createElement("div");
-    element.setAttribute("data-block", "paragraph");
     element.setAttribute("data-line-index", String(context.getLineIndex()));
     element.classList.add("cake-line", "is-list");
     context.incrementLineIndex();
@@ -7601,8 +7616,6 @@ const HISTORY_GROUPING_INTERVAL_MS = 500;
 const MAX_UNDO_STACK_SIZE = 100;
 class CakeEngine {
   constructor(options) {
-    this.originalCaretRangeFromPoint = null;
-    this.patchedCaretRangeFromPoint = null;
     this.contentRoot = null;
     this.domMap = null;
     this.isApplyingSelection = false;
@@ -7665,6 +7678,7 @@ class CakeEngine {
     this.hasMovedSincePointerDown = false;
     this.lastTouchTime = 0;
     this.container = options.container;
+    this.contentRoot = options.contentRoot ?? null;
     this.extensions = options.extensions ?? bundledExtensions;
     this.runtime = createRuntime(this.extensions);
     this.state = this.runtime.createState(
@@ -7677,7 +7691,6 @@ class CakeEngine {
     this.spellCheckEnabled = options.spellCheckEnabled ?? true;
     this.render();
     this.attachListeners();
-    this.installCaretRangeFromPointShim();
   }
   get state() {
     return this._state;
@@ -7704,7 +7717,6 @@ class CakeEngine {
   }
   destroy() {
     this.detachListeners();
-    this.uninstallCaretRangeFromPointShim();
     this.clearCaretBlinkTimer();
     if (this.overlayUpdateId !== null) {
       window.cancelAnimationFrame(this.overlayUpdateId);
@@ -7742,7 +7754,7 @@ class CakeEngine {
     return this.contentRoot;
   }
   getOverlayRoot() {
-    return this.extensionsRoot;
+    return this.ensureExtensionsRoot();
   }
   // Placeholder text is provided by the caller via the container's
   // `data-placeholder` attribute (set by the React wrapper).
@@ -7970,80 +7982,6 @@ class CakeEngine {
     this.container.removeEventListener("pointerup", this.handlePointerUpBound);
     this.detachDragListeners();
   }
-  installCaretRangeFromPointShim() {
-    const doc = document;
-    if (typeof doc.caretRangeFromPoint !== "function") {
-      return;
-    }
-    if (this.patchedCaretRangeFromPoint) {
-      return;
-    }
-    this.originalCaretRangeFromPoint = doc.caretRangeFromPoint.bind(document);
-    const patched = (x, y) => {
-      var _a;
-      const original = this.originalCaretRangeFromPoint;
-      const range = original ? original(x, y) : null;
-      const startNode = (range == null ? void 0 : range.startContainer) ?? null;
-      const startLine = startNode instanceof HTMLElement ? startNode.closest("[data-line-index]") : (_a = startNode == null ? void 0 : startNode.parentElement) == null ? void 0 : _a.closest("[data-line-index]");
-      if (startLine) {
-        return range;
-      }
-      const rect = this.container.getBoundingClientRect();
-      const isInside = x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
-      if (!isInside || !this.domMap) {
-        return range;
-      }
-      const docAny = document;
-      let node = null;
-      let offset = 0;
-      if (typeof docAny.caretPositionFromPoint === "function") {
-        const pos = docAny.caretPositionFromPoint(x, y);
-        node = (pos == null ? void 0 : pos.offsetNode) ?? null;
-        offset = (pos == null ? void 0 : pos.offset) ?? 0;
-      } else if (original) {
-        const fallback = original(x, y);
-        node = (fallback == null ? void 0 : fallback.startContainer) ?? null;
-        offset = (fallback == null ? void 0 : fallback.startOffset) ?? 0;
-      }
-      let resolved = null;
-      if (node instanceof Text) {
-        resolved = { node, offset };
-      } else if (node instanceof Element) {
-        resolved = resolveTextPoint(node, offset);
-      }
-      if (!resolved) {
-        return range;
-      }
-      const cursor = this.domMap.cursorAtDom(resolved.node, resolved.offset);
-      if (!cursor) {
-        return range;
-      }
-      const domPoint = this.domMap.domAtCursor(
-        cursor.cursorOffset,
-        cursor.affinity
-      );
-      if (!domPoint) {
-        return range;
-      }
-      const fixed = document.createRange();
-      fixed.setStart(domPoint.node, domPoint.offset);
-      fixed.setEnd(domPoint.node, domPoint.offset);
-      return fixed;
-    };
-    this.patchedCaretRangeFromPoint = patched;
-    doc.caretRangeFromPoint = patched;
-  }
-  uninstallCaretRangeFromPointShim() {
-    if (!this.originalCaretRangeFromPoint || !this.patchedCaretRangeFromPoint) {
-      return;
-    }
-    const doc = document;
-    if (doc.caretRangeFromPoint === this.patchedCaretRangeFromPoint) {
-      doc.caretRangeFromPoint = this.originalCaretRangeFromPoint;
-    }
-    this.originalCaretRangeFromPoint = null;
-    this.patchedCaretRangeFromPoint = null;
-  }
   render() {
     const perfEnabled = this.container.dataset.cakePerf === "1";
     let perfStart = 0;
@@ -8062,13 +8000,32 @@ class CakeEngine {
       }
       this.contentRoot = document.createElement("div");
       this.contentRoot.className = "cake-content";
-      if (this.isTouchDevice()) {
-        this.contentRoot.classList.add("cake-touch-mode");
-      }
-      this.updateContentRootAttributes();
+    }
+    if (this.isTouchDevice()) {
+      this.contentRoot.classList.add("cake-touch-mode");
+    }
+    this.updateContentRootAttributes();
+    if (!this.overlayRoot) {
       const overlay = this.ensureOverlayRoot();
-      const extensionsRoot = this.ensureExtensionsRoot();
-      this.container.replaceChildren(this.contentRoot, overlay, extensionsRoot);
+      const extensionsRoot = this.extensionsRoot;
+      const existingContainerChildren = Array.from(this.container.childNodes);
+      const isCakeManagedContainerChild = (node) => node instanceof Element && (node.classList.contains("cake-content") || node.classList.contains("cake-selection-overlay") || node.classList.contains("cake-extension-overlay") || node.classList.contains("cake-placeholder"));
+      const preservedContainerChildren = existingContainerChildren.filter(
+        (node) => !isCakeManagedContainerChild(node)
+      );
+      if (this.contentRoot.parentElement === this.container) {
+        this.container.append(overlay);
+        if (extensionsRoot && !extensionsRoot.isConnected) {
+          this.container.append(extensionsRoot);
+        }
+      } else {
+        this.container.replaceChildren(
+          this.contentRoot,
+          overlay,
+          ...extensionsRoot ? [extensionsRoot] : [],
+          ...preservedContainerChildren
+        );
+      }
       this.attachDragListeners();
     }
     if (perfEnabled) {
@@ -8080,9 +8037,12 @@ class CakeEngine {
       this.contentRoot
     );
     const existingChildren = Array.from(this.contentRoot.childNodes);
-    const needsUpdate = content.length !== existingChildren.length || content.some((node, i) => node !== existingChildren[i]);
+    const isManagedChild = (node) => node instanceof Element && node.hasAttribute("data-line-index");
+    const existingManagedChildren = existingChildren.filter(isManagedChild);
+    const preservedChildren = existingChildren.filter((node) => !isManagedChild(node));
+    const needsUpdate = content.length !== existingManagedChildren.length || content.some((node, i) => node !== existingManagedChildren[i]);
     if (needsUpdate) {
-      this.contentRoot.replaceChildren(...content);
+      this.contentRoot.replaceChildren(...content, ...preservedChildren);
     }
     this.domMap = map;
     if (perfEnabled) {
@@ -8770,81 +8730,21 @@ class CakeEngine {
   }
   handleBeforeInput(event) {
     if (this.readOnly || this.isComposing || event.isComposing) {
-      if (event.inputType === "insertReplacementText" || event.inputType === "insertText") {
-        console.log("[SPELLCHECK] beforeinput ignored (readonly/composing)", {
-          inputType: event.inputType,
-          data: event.data,
-          cancelable: event.cancelable,
-          isComposing: this.isComposing,
-          eventIsComposing: event.isComposing,
-          readOnly: this.readOnly
-        });
-      }
       return;
     }
     if (!this.isEventTargetInContentRoot(event.target)) {
-      if (event.inputType === "insertReplacementText" || event.inputType === "insertText") {
-        console.log(
-          "[SPELLCHECK] beforeinput ignored (target outside editor)",
-          {
-            inputType: event.inputType,
-            data: event.data,
-            cancelable: event.cancelable,
-            target: event.target
-          }
-        );
-      }
       return;
     }
     if (this.keydownHandledBeforeInput) {
       this.keydownHandledBeforeInput = false;
-      if (event.inputType === "insertReplacementText" || event.inputType === "insertText") {
-        console.log(
-          "[SPELLCHECK] beforeinput skipped (keydownHandledBeforeInput)",
-          {
-            inputType: event.inputType,
-            data: event.data,
-            cancelable: event.cancelable
-          }
-        );
-      }
       event.preventDefault();
       return;
     }
     const intent = this.resolveBeforeInputIntent(event);
     if (!intent) {
-      if (event.inputType === "insertReplacementText" || event.inputType === "insertText") {
-        console.log("[SPELLCHECK] beforeinput: no intent", {
-          inputType: event.inputType,
-          data: event.data,
-          cancelable: event.cancelable
-        });
-      }
       return;
     }
-    if (event.inputType === "insertReplacementText" || event.inputType === "insertText" && intent.type === "replace-text") {
-      const selection = this.state.selection;
-      const focus = selection.start === selection.end ? selection.start : Math.max(selection.start, selection.end);
-      const preview = this.state.source.slice(
-        Math.max(0, focus - 24),
-        Math.min(this.state.source.length, focus + 24)
-      );
-      console.log("[SPELLCHECK] beforeinput: resolved intent", {
-        inputType: event.inputType,
-        data: event.data,
-        cancelable: event.cancelable,
-        intent,
-        currentSelection: this.state.selection,
-        sourcePreviewAroundFocus: preview
-      });
-    }
     event.preventDefault();
-    if (event.inputType === "insertReplacementText" || event.inputType === "insertText" && intent.type === "replace-text") {
-      console.log("[SPELLCHECK] beforeinput: after preventDefault", {
-        inputType: event.inputType,
-        defaultPrevented: event.defaultPrevented
-      });
-    }
     this.markBeforeInputHandled();
     this.suppressSelectionChangeForTick();
     this.applyInputIntent(intent);
@@ -8891,22 +8791,9 @@ class CakeEngine {
       return;
     }
     if (!this.isEventTargetInContentRoot(event.target)) {
-      if (event.inputType === "insertReplacementText") {
-        console.log("[SPELLCHECK] input ignored (target outside editor)", {
-          inputType: event.inputType,
-          data: event.data,
-          target: event.target
-        });
-      }
       return;
     }
     if (this.beforeInputHandled) {
-      if (event.inputType === "insertReplacementText") {
-        console.log("[SPELLCHECK] input ignored (handled via beforeinput)", {
-          inputType: event.inputType,
-          data: event.data
-        });
-      }
       return;
     }
     if (this.compositionCommit && event.inputType === "insertText") {
@@ -9018,57 +8905,20 @@ class CakeEngine {
     return null;
   }
   selectionFromTargetRangesWithStatus(event) {
-    const debug = event.inputType === "insertReplacementText";
     if (!event.getTargetRanges) {
-      if (debug) {
-        console.log("[SPELLCHECK][targetRanges] missing getTargetRanges()", {
-          inputType: event.inputType,
-          data: event.data,
-          cancelable: event.cancelable
-        });
-      }
       return { status: "none" };
     }
     const ranges = event.getTargetRanges();
     if (!ranges || ranges.length === 0) {
-      if (debug) {
-        console.log("[SPELLCHECK][targetRanges] no ranges", {
-          inputType: event.inputType,
-          data: event.data,
-          cancelable: event.cancelable
-        });
-      }
       return { status: "none" };
     }
     const range = ranges[0];
-    if (debug || event.inputType === "insertText") {
-      console.log("[SPELLCHECK][targetRanges] raw range", {
-        inputType: event.inputType,
-        data: event.data,
-        cancelable: event.cancelable,
-        startContainer: range.startContainer instanceof Element ? range.startContainer.tagName : range.startContainer.nodeName,
-        startOffset: range.startOffset,
-        endContainer: range.endContainer instanceof Element ? range.endContainer.tagName : range.endContainer.nodeName,
-        endOffset: range.endOffset,
-        startContained: this.container.contains(range.startContainer),
-        endContained: this.container.contains(range.endContainer)
-      });
-    }
     if (!this.container.contains(range.startContainer) || !this.container.contains(range.endContainer)) {
       return { status: "invalid" };
     }
     const start = this.cursorFromDom(range.startContainer, range.startOffset);
     const end = this.cursorFromDom(range.endContainer, range.endOffset);
     if (!start || !end) {
-      if (debug || event.inputType === "insertText") {
-        console.log("[SPELLCHECK][targetRanges] cursorFromDom failed", {
-          inputType: event.inputType,
-          data: event.data,
-          cancelable: event.cancelable,
-          start,
-          end
-        });
-      }
       return { status: "invalid" };
     }
     const affinity = start.cursorOffset === end.cursorOffset ? end.affinity : "forward";
@@ -9819,9 +9669,7 @@ class CakeEngine {
       return this.state.source;
     }
     const blocks = Array.from(
-      this.contentRoot.querySelectorAll(
-        '[data-block="paragraph"]'
-      )
+      this.contentRoot.querySelectorAll(".cake-line")
     );
     if (blocks.length === 0) {
       return this.contentRoot.textContent ?? "";
@@ -10074,6 +9922,9 @@ class CakeEngine {
     root.style.zIndex = "50";
     root.style.overflow = "hidden";
     this.extensionsRoot = root;
+    if (this.overlayRoot && !root.isConnected) {
+      this.container.append(root);
+    }
     return root;
   }
   updateExtensionsOverlayPosition() {
@@ -11639,13 +11490,15 @@ const CakeEditor = require$$0.forwardRef(
     const onSelectionChangeRef = require$$0.useRef(props.onSelectionChange);
     const lastEmittedValueRef = require$$0.useRef(null);
     const lastEmittedSelectionRef = require$$0.useRef(null);
-    const [overlayRoot, setOverlayRoot] = require$$0.useState(null);
     const [contentRoot, setContentRoot] = require$$0.useState(null);
     const baseExtensions = props.disableImageExtension ? bundledExtensionsWithoutImage : bundledExtensions;
     const allExtensionsRef = require$$0.useRef([
       ...baseExtensions,
       ...props.extensions ?? []
     ]);
+    const hasOverlayExtensions = allExtensionsRef.current.some(
+      (ext) => ext.renderOverlay
+    );
     require$$0.useEffect(() => {
       onChangeRef.current = props.onChange;
       onSelectionChangeRef.current = props.onSelectionChange;
@@ -11690,12 +11543,10 @@ const CakeEditor = require$$0.forwardRef(
         }
       });
       engineRef.current = engine;
-      setOverlayRoot(engine.getOverlayRoot());
       setContentRoot(engine.getContentRoot());
       return () => {
         engine.destroy();
         engineRef.current = null;
-        setOverlayRoot(null);
         setContentRoot(null);
       };
     }, []);
@@ -11823,7 +11674,6 @@ const CakeEditor = require$$0.forwardRef(
     const overlayContext = containerRef.current && contentRoot ? {
       container: containerRef.current,
       contentRoot,
-      overlayRoot: overlayRoot ?? void 0,
       toOverlayRect: (rect) => {
         var _a;
         const containerRect = (_a = containerRef.current) == null ? void 0 : _a.getBoundingClientRect();
@@ -11864,9 +11714,6 @@ const CakeEditor = require$$0.forwardRef(
         return ((_a = engineRef.current) == null ? void 0 : _a.executeCommand(command)) ?? false;
       }
     } : null;
-    const hasOverlayExtensions = allExtensionsRef.current.some(
-      (ext) => ext.renderOverlay
-    );
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { position: "relative", height: "100%" }, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",

package/dist/index.js

@@ -2868,13 +2868,11 @@ function renderDocContent(doc, extensions, root) {
     return "unknown";
   }
   function getElementKey(element) {
-    if (element.hasAttribute("data-block")) {
-      const blockType = element.getAttribute("data-block") ?? "unknown";
-      const lineKind = element instanceof HTMLElement ? element.dataset.lineKind : null;
-      if (lineKind && lineKind !== blockType) {
-        return lineKind;
+    if (element.classList.contains("cake-line")) {
+      if (element.hasAttribute("data-block-atom")) {
+        return `block-atom:${element.getAttribute("data-block-atom")}`;
       }
-      return blockType;
+      return "paragraph";
     }
     if (element.hasAttribute("data-block-wrapper")) {
       return `block-wrapper:${element.getAttribute("data-block-wrapper")}`;
@@ -2900,11 +2898,13 @@ function renderDocContent(doc, extensions, root) {
     if (element.classList.contains("cake-text")) {
       return "text";
     }
-    if (element.hasAttribute("data-inline")) {
-      return `inline-wrapper:${element.getAttribute("data-inline")}`;
-    }
-    if (element.hasAttribute("data-inline-atom")) {
-      return `inline-atom:${element.getAttribute("data-inline-atom")}`;
+    for (const cls of Array.from(element.classList)) {
+      if (cls.startsWith("cake-inline--")) {
+        return `inline-wrapper:${cls.slice("cake-inline--".length)}`;
+      }
+      if (cls.startsWith("cake-inline-atom--")) {
+        return `inline-atom:${cls.slice("cake-inline-atom--".length)}`;
+      }
     }
     return "unknown";
   }
@@ -2941,11 +2941,13 @@ function renderDocContent(doc, extensions, root) {
     if (inline.type === "inline-wrapper") {
       const canReuse = existing && existing instanceof HTMLSpanElement && getInlineElementKey(existing) === getInlineKey(inline);
       if (canReuse) {
+        existing.removeAttribute("data-inline");
+        existing.classList.add("cake-inline", `cake-inline--${inline.kind}`);
         reconcileInlineChildren(existing, inline.children);
         return [existing];
       }
       const element = document.createElement("span");
-      element.setAttribute("data-inline", inline.kind);
+      element.classList.add("cake-inline", `cake-inline--${inline.kind}`);
       for (const child of inline.children) {
         for (const node of reconcileInline(child, null)) {
           element.append(node);
@@ -2956,6 +2958,11 @@ function renderDocContent(doc, extensions, root) {
     if (inline.type === "inline-atom") {
       const canReuse = existing && existing instanceof HTMLSpanElement && getInlineElementKey(existing) === getInlineKey(inline);
       if (canReuse) {
+        existing.removeAttribute("data-inline-atom");
+        existing.classList.add(
+          "cake-inline-atom",
+          `cake-inline-atom--${inline.kind}`
+        );
         const textNode = existing.firstChild;
         if (textNode instanceof Text) {
           createTextRun$1(textNode);
@@ -2963,7 +2970,10 @@ function renderDocContent(doc, extensions, root) {
         }
       }
       const element = document.createElement("span");
-      element.setAttribute("data-inline-atom", inline.kind);
+      element.classList.add(
+        "cake-inline-atom",
+        `cake-inline-atom--${inline.kind}`
+      );
       const node = document.createTextNode(" ");
       createTextRun$1(node);
       element.append(node);
@@ -3006,6 +3016,13 @@ function renderDocContent(doc, extensions, root) {
       context.incrementLineIndex();
       if (canReuse) {
         existing.setAttribute("data-line-index", String(currentLineIndex));
+        existing.removeAttribute("data-block");
+        delete existing.dataset.lineKind;
+        delete existing.dataset.headingLevel;
+        delete existing.dataset.headingPlaceholder;
+        existing.removeAttribute("aria-placeholder");
+        existing.className = "cake-line";
+        existing.removeAttribute("style");
         if (block.content.length === 0) {
           const firstChild = existing.firstChild;
           if (firstChild instanceof Text && existing.querySelector("br")) {
@@ -3026,10 +3043,8 @@ function renderDocContent(doc, extensions, root) {
         return [existing];
       }
       const element = document.createElement("div");
-      element.setAttribute("data-block", "paragraph");
       element.setAttribute("data-line-index", String(currentLineIndex));
       element.classList.add("cake-line");
-      element.dataset.lineKind = "paragraph";
       if (block.content.length === 0) {
         const textNode = document.createTextNode("");
         createTextRun$1(textNode);
@@ -4637,18 +4652,16 @@ const headingExtension = defineExtension({
     const level = typeof ((_a = block.data) == null ? void 0 : _a.level) === "number" ? block.data.level : 1;
     const normalizedLevel = Math.max(1, Math.min(3, level));
     const lineElement = document.createElement("div");
-    lineElement.setAttribute("data-block", "paragraph");
     lineElement.setAttribute("data-line-index", String(context.getLineIndex()));
     lineElement.classList.add(
       "cake-line",
       "is-heading",
       `is-heading-${normalizedLevel}`
     );
-    lineElement.dataset.lineKind = "heading";
-    lineElement.dataset.headingLevel = String(normalizedLevel);
     context.incrementLineIndex();
     const paragraph = block.blocks[0];
     if ((paragraph == null ? void 0 : paragraph.type) === "paragraph" && paragraph.content.length > 0) {
+      lineElement.removeAttribute("aria-placeholder");
       const mergedContent = mergeInlineForRender(paragraph.content);
       for (const inline of mergedContent) {
         for (const node of context.renderInline(inline)) {
@@ -4656,7 +4669,10 @@ const headingExtension = defineExtension({
         }
       }
     } else {
-      lineElement.dataset.headingPlaceholder = `Heading ${normalizedLevel}`;
+      lineElement.setAttribute(
+        "aria-placeholder",
+        `Heading ${normalizedLevel}`
+      );
       const node = document.createTextNode("");
       context.createTextRun(node);
       lineElement.append(node);
@@ -5663,7 +5679,6 @@ const listExtension = defineExtension({
       return null;
     }
     const element = document.createElement("div");
-    element.setAttribute("data-block", "paragraph");
     element.setAttribute("data-line-index", String(context.getLineIndex()));
     element.classList.add("cake-line", "is-list");
     context.incrementLineIndex();
@@ -7599,8 +7614,6 @@ const HISTORY_GROUPING_INTERVAL_MS = 500;
 const MAX_UNDO_STACK_SIZE = 100;
 class CakeEngine {
   constructor(options) {
-    this.originalCaretRangeFromPoint = null;
-    this.patchedCaretRangeFromPoint = null;
     this.contentRoot = null;
     this.domMap = null;
     this.isApplyingSelection = false;
@@ -7663,6 +7676,7 @@ class CakeEngine {
     this.hasMovedSincePointerDown = false;
     this.lastTouchTime = 0;
     this.container = options.container;
+    this.contentRoot = options.contentRoot ?? null;
     this.extensions = options.extensions ?? bundledExtensions;
     this.runtime = createRuntime(this.extensions);
     this.state = this.runtime.createState(
@@ -7675,7 +7689,6 @@ class CakeEngine {
     this.spellCheckEnabled = options.spellCheckEnabled ?? true;
     this.render();
     this.attachListeners();
-    this.installCaretRangeFromPointShim();
   }
   get state() {
     return this._state;
@@ -7702,7 +7715,6 @@ class CakeEngine {
   }
   destroy() {
     this.detachListeners();
-    this.uninstallCaretRangeFromPointShim();
     this.clearCaretBlinkTimer();
     if (this.overlayUpdateId !== null) {
       window.cancelAnimationFrame(this.overlayUpdateId);
@@ -7740,7 +7752,7 @@ class CakeEngine {
     return this.contentRoot;
   }
   getOverlayRoot() {
-    return this.extensionsRoot;
+    return this.ensureExtensionsRoot();
   }
   // Placeholder text is provided by the caller via the container's
   // `data-placeholder` attribute (set by the React wrapper).
@@ -7968,80 +7980,6 @@ class CakeEngine {
     this.container.removeEventListener("pointerup", this.handlePointerUpBound);
     this.detachDragListeners();
   }
-  installCaretRangeFromPointShim() {
-    const doc = document;
-    if (typeof doc.caretRangeFromPoint !== "function") {
-      return;
-    }
-    if (this.patchedCaretRangeFromPoint) {
-      return;
-    }
-    this.originalCaretRangeFromPoint = doc.caretRangeFromPoint.bind(document);
-    const patched = (x, y) => {
-      var _a;
-      const original = this.originalCaretRangeFromPoint;
-      const range = original ? original(x, y) : null;
-      const startNode = (range == null ? void 0 : range.startContainer) ?? null;
-      const startLine = startNode instanceof HTMLElement ? startNode.closest("[data-line-index]") : (_a = startNode == null ? void 0 : startNode.parentElement) == null ? void 0 : _a.closest("[data-line-index]");
-      if (startLine) {
-        return range;
-      }
-      const rect = this.container.getBoundingClientRect();
-      const isInside = x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
-      if (!isInside || !this.domMap) {
-        return range;
-      }
-      const docAny = document;
-      let node = null;
-      let offset = 0;
-      if (typeof docAny.caretPositionFromPoint === "function") {
-        const pos = docAny.caretPositionFromPoint(x, y);
-        node = (pos == null ? void 0 : pos.offsetNode) ?? null;
-        offset = (pos == null ? void 0 : pos.offset) ?? 0;
-      } else if (original) {
-        const fallback = original(x, y);
-        node = (fallback == null ? void 0 : fallback.startContainer) ?? null;
-        offset = (fallback == null ? void 0 : fallback.startOffset) ?? 0;
-      }
-      let resolved = null;
-      if (node instanceof Text) {
-        resolved = { node, offset };
-      } else if (node instanceof Element) {
-        resolved = resolveTextPoint(node, offset);
-      }
-      if (!resolved) {
-        return range;
-      }
-      const cursor = this.domMap.cursorAtDom(resolved.node, resolved.offset);
-      if (!cursor) {
-        return range;
-      }
-      const domPoint = this.domMap.domAtCursor(
-        cursor.cursorOffset,
-        cursor.affinity
-      );
-      if (!domPoint) {
-        return range;
-      }
-      const fixed = document.createRange();
-      fixed.setStart(domPoint.node, domPoint.offset);
-      fixed.setEnd(domPoint.node, domPoint.offset);
-      return fixed;
-    };
-    this.patchedCaretRangeFromPoint = patched;
-    doc.caretRangeFromPoint = patched;
-  }
-  uninstallCaretRangeFromPointShim() {
-    if (!this.originalCaretRangeFromPoint || !this.patchedCaretRangeFromPoint) {
-      return;
-    }
-    const doc = document;
-    if (doc.caretRangeFromPoint === this.patchedCaretRangeFromPoint) {
-      doc.caretRangeFromPoint = this.originalCaretRangeFromPoint;
-    }
-    this.originalCaretRangeFromPoint = null;
-    this.patchedCaretRangeFromPoint = null;
-  }
   render() {
     const perfEnabled = this.container.dataset.cakePerf === "1";
     let perfStart = 0;
@@ -8060,13 +7998,32 @@ class CakeEngine {
       }
       this.contentRoot = document.createElement("div");
       this.contentRoot.className = "cake-content";
-      if (this.isTouchDevice()) {
-        this.contentRoot.classList.add("cake-touch-mode");
-      }
-      this.updateContentRootAttributes();
+    }
+    if (this.isTouchDevice()) {
+      this.contentRoot.classList.add("cake-touch-mode");
+    }
+    this.updateContentRootAttributes();
+    if (!this.overlayRoot) {
       const overlay = this.ensureOverlayRoot();
-      const extensionsRoot = this.ensureExtensionsRoot();
-      this.container.replaceChildren(this.contentRoot, overlay, extensionsRoot);
+      const extensionsRoot = this.extensionsRoot;
+      const existingContainerChildren = Array.from(this.container.childNodes);
+      const isCakeManagedContainerChild = (node) => node instanceof Element && (node.classList.contains("cake-content") || node.classList.contains("cake-selection-overlay") || node.classList.contains("cake-extension-overlay") || node.classList.contains("cake-placeholder"));
+      const preservedContainerChildren = existingContainerChildren.filter(
+        (node) => !isCakeManagedContainerChild(node)
+      );
+      if (this.contentRoot.parentElement === this.container) {
+        this.container.append(overlay);
+        if (extensionsRoot && !extensionsRoot.isConnected) {
+          this.container.append(extensionsRoot);
+        }
+      } else {
+        this.container.replaceChildren(
+          this.contentRoot,
+          overlay,
+          ...extensionsRoot ? [extensionsRoot] : [],
+          ...preservedContainerChildren
+        );
+      }
       this.attachDragListeners();
     }
     if (perfEnabled) {
@@ -8078,9 +8035,12 @@ class CakeEngine {
       this.contentRoot
     );
     const existingChildren = Array.from(this.contentRoot.childNodes);
-    const needsUpdate = content.length !== existingChildren.length || content.some((node, i) => node !== existingChildren[i]);
+    const isManagedChild = (node) => node instanceof Element && node.hasAttribute("data-line-index");
+    const existingManagedChildren = existingChildren.filter(isManagedChild);
+    const preservedChildren = existingChildren.filter((node) => !isManagedChild(node));
+    const needsUpdate = content.length !== existingManagedChildren.length || content.some((node, i) => node !== existingManagedChildren[i]);
     if (needsUpdate) {
-      this.contentRoot.replaceChildren(...content);
+      this.contentRoot.replaceChildren(...content, ...preservedChildren);
     }
     this.domMap = map;
     if (perfEnabled) {
@@ -8768,81 +8728,21 @@ class CakeEngine {
   }
   handleBeforeInput(event) {
     if (this.readOnly || this.isComposing || event.isComposing) {
-      if (event.inputType === "insertReplacementText" || event.inputType === "insertText") {
-        console.log("[SPELLCHECK] beforeinput ignored (readonly/composing)", {
-          inputType: event.inputType,
-          data: event.data,
-          cancelable: event.cancelable,
-          isComposing: this.isComposing,
-          eventIsComposing: event.isComposing,
-          readOnly: this.readOnly
-        });
-      }
       return;
     }
     if (!this.isEventTargetInContentRoot(event.target)) {
-      if (event.inputType === "insertReplacementText" || event.inputType === "insertText") {
-        console.log(
-          "[SPELLCHECK] beforeinput ignored (target outside editor)",
-          {
-            inputType: event.inputType,
-            data: event.data,
-            cancelable: event.cancelable,
-            target: event.target
-          }
-        );
-      }
       return;
     }
     if (this.keydownHandledBeforeInput) {
       this.keydownHandledBeforeInput = false;
-      if (event.inputType === "insertReplacementText" || event.inputType === "insertText") {
-        console.log(
-          "[SPELLCHECK] beforeinput skipped (keydownHandledBeforeInput)",
-          {
-            inputType: event.inputType,
-            data: event.data,
-            cancelable: event.cancelable
-          }
-        );
-      }
       event.preventDefault();
       return;
     }
     const intent = this.resolveBeforeInputIntent(event);
     if (!intent) {
-      if (event.inputType === "insertReplacementText" || event.inputType === "insertText") {
-        console.log("[SPELLCHECK] beforeinput: no intent", {
-          inputType: event.inputType,
-          data: event.data,
-          cancelable: event.cancelable
-        });
-      }
       return;
     }
-    if (event.inputType === "insertReplacementText" || event.inputType === "insertText" && intent.type === "replace-text") {
-      const selection = this.state.selection;
-      const focus = selection.start === selection.end ? selection.start : Math.max(selection.start, selection.end);
-      const preview = this.state.source.slice(
-        Math.max(0, focus - 24),
-        Math.min(this.state.source.length, focus + 24)
-      );
-      console.log("[SPELLCHECK] beforeinput: resolved intent", {
-        inputType: event.inputType,
-        data: event.data,
-        cancelable: event.cancelable,
-        intent,
-        currentSelection: this.state.selection,
-        sourcePreviewAroundFocus: preview
-      });
-    }
     event.preventDefault();
-    if (event.inputType === "insertReplacementText" || event.inputType === "insertText" && intent.type === "replace-text") {
-      console.log("[SPELLCHECK] beforeinput: after preventDefault", {
-        inputType: event.inputType,
-        defaultPrevented: event.defaultPrevented
-      });
-    }
     this.markBeforeInputHandled();
     this.suppressSelectionChangeForTick();
     this.applyInputIntent(intent);
@@ -8889,22 +8789,9 @@ class CakeEngine {
       return;
     }
     if (!this.isEventTargetInContentRoot(event.target)) {
-      if (event.inputType === "insertReplacementText") {
-        console.log("[SPELLCHECK] input ignored (target outside editor)", {
-          inputType: event.inputType,
-          data: event.data,
-          target: event.target
-        });
-      }
       return;
     }
     if (this.beforeInputHandled) {
-      if (event.inputType === "insertReplacementText") {
-        console.log("[SPELLCHECK] input ignored (handled via beforeinput)", {
-          inputType: event.inputType,
-          data: event.data
-        });
-      }
       return;
     }
     if (this.compositionCommit && event.inputType === "insertText") {
@@ -9016,57 +8903,20 @@ class CakeEngine {
     return null;
   }
   selectionFromTargetRangesWithStatus(event) {
-    const debug = event.inputType === "insertReplacementText";
     if (!event.getTargetRanges) {
-      if (debug) {
-        console.log("[SPELLCHECK][targetRanges] missing getTargetRanges()", {
-          inputType: event.inputType,
-          data: event.data,
-          cancelable: event.cancelable
-        });
-      }
       return { status: "none" };
     }
     const ranges = event.getTargetRanges();
     if (!ranges || ranges.length === 0) {
-      if (debug) {
-        console.log("[SPELLCHECK][targetRanges] no ranges", {
-          inputType: event.inputType,
-          data: event.data,
-          cancelable: event.cancelable
-        });
-      }
       return { status: "none" };
     }
     const range = ranges[0];
-    if (debug || event.inputType === "insertText") {
-      console.log("[SPELLCHECK][targetRanges] raw range", {
-        inputType: event.inputType,
-        data: event.data,
-        cancelable: event.cancelable,
-        startContainer: range.startContainer instanceof Element ? range.startContainer.tagName : range.startContainer.nodeName,
-        startOffset: range.startOffset,
-        endContainer: range.endContainer instanceof Element ? range.endContainer.tagName : range.endContainer.nodeName,
-        endOffset: range.endOffset,
-        startContained: this.container.contains(range.startContainer),
-        endContained: this.container.contains(range.endContainer)
-      });
-    }
     if (!this.container.contains(range.startContainer) || !this.container.contains(range.endContainer)) {
       return { status: "invalid" };
     }
     const start = this.cursorFromDom(range.startContainer, range.startOffset);
     const end = this.cursorFromDom(range.endContainer, range.endOffset);
     if (!start || !end) {
-      if (debug || event.inputType === "insertText") {
-        console.log("[SPELLCHECK][targetRanges] cursorFromDom failed", {
-          inputType: event.inputType,
-          data: event.data,
-          cancelable: event.cancelable,
-          start,
-          end
-        });
-      }
       return { status: "invalid" };
     }
     const affinity = start.cursorOffset === end.cursorOffset ? end.affinity : "forward";
@@ -9817,9 +9667,7 @@ class CakeEngine {
       return this.state.source;
     }
     const blocks = Array.from(
-      this.contentRoot.querySelectorAll(
-        '[data-block="paragraph"]'
-      )
+      this.contentRoot.querySelectorAll(".cake-line")
     );
     if (blocks.length === 0) {
       return this.contentRoot.textContent ?? "";
@@ -10072,6 +9920,9 @@ class CakeEngine {
     root.style.zIndex = "50";
     root.style.overflow = "hidden";
     this.extensionsRoot = root;
+    if (this.overlayRoot && !root.isConnected) {
+      this.container.append(root);
+    }
     return root;
   }
   updateExtensionsOverlayPosition() {
@@ -11637,13 +11488,15 @@ const CakeEditor = forwardRef(
     const onSelectionChangeRef = useRef(props.onSelectionChange);
     const lastEmittedValueRef = useRef(null);
     const lastEmittedSelectionRef = useRef(null);
-    const [overlayRoot, setOverlayRoot] = useState(null);
     const [contentRoot, setContentRoot] = useState(null);
     const baseExtensions = props.disableImageExtension ? bundledExtensionsWithoutImage : bundledExtensions;
     const allExtensionsRef = useRef([
       ...baseExtensions,
       ...props.extensions ?? []
     ]);
+    const hasOverlayExtensions = allExtensionsRef.current.some(
+      (ext) => ext.renderOverlay
+    );
     useEffect(() => {
       onChangeRef.current = props.onChange;
       onSelectionChangeRef.current = props.onSelectionChange;
@@ -11688,12 +11541,10 @@ const CakeEditor = forwardRef(
         }
       });
       engineRef.current = engine;
-      setOverlayRoot(engine.getOverlayRoot());
       setContentRoot(engine.getContentRoot());
       return () => {
         engine.destroy();
         engineRef.current = null;
-        setOverlayRoot(null);
         setContentRoot(null);
       };
     }, []);
@@ -11821,7 +11672,6 @@ const CakeEditor = forwardRef(
     const overlayContext = containerRef.current && contentRoot ? {
       container: containerRef.current,
       contentRoot,
-      overlayRoot: overlayRoot ?? void 0,
       toOverlayRect: (rect) => {
         var _a;
         const containerRect = (_a = containerRef.current) == null ? void 0 : _a.getBoundingClientRect();
@@ -11862,9 +11712,6 @@ const CakeEditor = forwardRef(
         return ((_a = engineRef.current) == null ? void 0 : _a.executeCommand(command)) ?? false;
       }
     } : null;
-    const hasOverlayExtensions = allExtensionsRef.current.some(
-      (ext) => ext.renderOverlay
-    );
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { position: "relative", height: "100%" }, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blankdotpage/cake",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",