@wingleeio/ori-react 0.0.4 → 0.1.1

package/dist/index.cjs

@@ -2,9 +2,12 @@
 
 var oriCore = require('@wingleeio/ori-core');
 var react = require('react');
+var client = require('react-dom/client');
 var jsxRuntime = require('react/jsx-runtime');
 
-// src/useEditor.ts
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 function useEditor(options = {}) {
   const ref = react.useRef(null);
   if (ref.current === null) {
@@ -32,690 +35,591 @@ function useActiveMarks(editor) {
   void snapshot.revision;
   return editor.getActiveMarks();
 }
-var EMPTY = { blocks: {}, atoms: {} };
-var RenderersContext = react.createContext(EMPTY);
-var RenderersProvider = RenderersContext.Provider;
-var useRenderers = () => react.useContext(RenderersContext);
-function fragmentStyle(frag) {
-  const f = frag.font;
-  const decoration = [];
-  if (frag.marks.underline) decoration.push("underline");
-  if (frag.marks.strike) decoration.push("line-through");
-  return {
-    fontFamily: f.fontFamily,
-    fontSize: f.fontSize,
-    fontWeight: f.fontWeight,
-    fontStyle: f.italic ? "italic" : "normal",
-    letterSpacing: f.letterSpacing || void 0,
-    textDecorationLine: decoration.length ? decoration.join(" ") : void 0
-  };
+
+// src/ce/dom.ts
+function esc(s) {
+  return typeof CSS !== "undefined" && CSS.escape ? CSS.escape(s) : s.replace(/["\\]/g, "\\$&");
 }
-function AtomFragment({
-  editor,
-  atom,
-  render
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: "ori-atom",
-      style: {
-        display: "inline-block",
-        width: atom.width,
-        verticalAlign: "middle",
-        whiteSpace: "normal"
-      },
-      children: render ? render({ editor, atom }) : null
-    }
-  );
+function blockElOf(node, root) {
+  let n = node;
+  while (n && n !== root) {
+    if (n instanceof HTMLElement && n.dataset.blockId) return n;
+    n = n.parentNode;
+  }
+  return null;
 }
-function LineView({
-  line,
-  editor,
-  atoms
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: "ori-line",
-      style: { height: line.height, lineHeight: `${line.height}px`, whiteSpace: "pre" },
-      children: line.fragments.map((frag) => {
-        if (frag.atom) {
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            AtomFragment,
-            {
-              editor,
-              atom: frag.atom,
-              render: atoms[frag.atom.type]
-            },
-            frag.start
-          );
-        }
-        const className = ["ori-frag"];
-        if (frag.marks.code) className.push("ori-frag-code");
-        if (frag.marks.link) className.push("ori-frag-link");
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: className.join(" "),
-            style: fragmentStyle(frag),
-            "data-start": frag.start,
-            children: frag.text
-          },
-          frag.start
-        );
-      })
-    }
-  );
+function spanOf(node) {
+  let n = node;
+  while (n) {
+    if (n instanceof HTMLElement && n.dataset.off != null) return n;
+    n = n.parentNode;
+  }
+  return null;
 }
-function BlockView({ editor, block }) {
-  const { blocks, atoms } = useRenderers();
-  const layout = editor.getLayout(block.id);
-  if (!layout) return null;
-  const custom = blocks[block.type];
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: `ori-block ori-block-${block.type}`,
-      "data-block-id": block.id,
-      style: {
-        position: "absolute",
-        top: block.top,
-        left: 0,
-        width: "100%",
-        height: block.height
-      },
-      children: custom ? custom({ editor, block, layout }) : layout.lines.map((line) => /* @__PURE__ */ jsxRuntime.jsx(LineView, { line, editor, atoms }, line.index))
-    }
-  );
+function domToModel(root, node, offset) {
+  const blockEl = blockElOf(node, root);
+  if (!blockEl) return null;
+  const blockId = blockEl.dataset.blockId;
+  if (node && node.nodeType === Node.TEXT_NODE) {
+    const span = spanOf(node);
+    const base = span ? Number(span.dataset.off) : 0;
+    return { blockId, offset: base + offset };
+  }
+  const el = node;
+  if (el.dataset?.off != null) {
+    return { blockId, offset: Number(el.dataset.off) + (offset > 0 ? spanLen(el) : 0) };
+  }
+  const kids = Array.from(el.childNodes);
+  for (let i = offset; i < kids.length; i++) {
+    const k = kids[i];
+    if (k instanceof HTMLElement && k.dataset.off != null) return { blockId, offset: Number(k.dataset.off) };
+  }
+  let end = 0;
+  for (const k of kids) if (k instanceof HTMLElement && k.dataset.off != null) end = Math.max(end, Number(k.dataset.off) + spanLen(k));
+  return { blockId, offset: end };
 }
-function SelectionLayer({
-  editor,
-  snapshot
-}) {
-  void snapshot.revision;
-  const rects = editor.selectionRectsForViewport();
-  if (rects.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ori-selection-layer", "aria-hidden": true, children: rects.map((r, i) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: "ori-selection-rect",
-      style: { position: "absolute", left: r.x, top: r.y, width: r.width, height: r.height }
-    },
-    `${r.blockId}:${i}`
-  )) });
+function spanLen(span) {
+  return span.dataset.len != null ? Number(span.dataset.len) : (span.textContent ?? "").length;
 }
-function SelectionHandles({
-  editor,
-  snapshot,
-  pointToPosition
-}) {
-  void snapshot.revision;
-  const drag = react.useRef(null);
-  const sel = snapshot.selection;
-  if (!sel || oriCore.isCollapsed(sel)) return null;
-  const range = editor.orderedSelection();
-  if (!range) return null;
-  const rects = editor.selectionRectsForViewport();
-  if (rects.length === 0) return null;
-  const first = rects[0];
-  const last = rects[rects.length - 1];
-  const start = (which) => (e) => {
-    const r = editor.orderedSelection();
-    if (!r) return;
-    e.preventDefault();
-    e.stopPropagation();
-    drag.current = { fixed: which === "start" ? r.end : r.start };
-    try {
-      e.currentTarget.setPointerCapture(e.pointerId);
-    } catch {
-    }
-  };
-  const move = (e) => {
-    const d = drag.current;
-    if (!d) return;
-    e.preventDefault();
-    const pos = pointToPosition(e.clientX, e.clientY);
-    if (pos) editor.setSelection({ anchor: d.fixed, focus: pos });
-  };
-  const up = (e) => {
-    if (!drag.current) return;
-    try {
-      e.currentTarget.releasePointerCapture(e.pointerId);
-    } catch {
-    }
-    drag.current = null;
-  };
-  const handle = (kind, x, y, h) => /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: `ori-handle ori-handle-${kind}`,
-      style: { position: "absolute", left: x, top: y, height: h },
-      onPointerDown: start(kind),
-      onPointerMove: move,
-      onPointerUp: up,
-      onPointerCancel: up,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ori-handle-knob" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ori-handle-bar" })
-      ]
+function modelToDom(root, blockId, offset) {
+  const blockEl = root.querySelector(`[data-block-id="${esc(blockId)}"]`);
+  if (!blockEl) return null;
+  const spans = Array.from(blockEl.querySelectorAll("[data-off]"));
+  if (spans.length === 0) {
+    return { node: blockEl, offset: 0 };
+  }
+  for (const span of spans) {
+    const start = Number(span.dataset.off);
+    const len = spanLen(span);
+    if (offset <= start + len) {
+      if (span.dataset.atom != null) {
+        const idx = Array.prototype.indexOf.call(blockEl.childNodes, span);
+        return { node: blockEl, offset: offset <= start ? idx : idx + 1 };
+      }
+      const textNode2 = span.firstChild ?? span;
+      return { node: textNode2, offset: Math.max(0, Math.min(offset - start, (textNode2.textContent ?? "").length)) };
     }
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ori-handles", "aria-hidden": true, children: [
-    handle("start", first.x, first.y, first.height),
-    handle("end", last.x + last.width, last.y, last.height)
-  ] });
+  }
+  const last = spans[spans.length - 1];
+  const textNode = last.firstChild ?? last;
+  return { node: textNode, offset: (textNode.textContent ?? "").length };
 }
-function CaretLayer({
-  editor,
-  snapshot,
-  focused
-}) {
-  const sel = snapshot.selection;
-  if (!focused || !sel || !oriCore.isCollapsed(sel)) return null;
-  const rect = editor.caretRect();
-  if (!rect) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: "ori-caret",
-      style: { position: "absolute", left: rect.x, top: rect.y, height: rect.height },
-      "aria-hidden": true
-    }
-  );
+function markClass(marks) {
+  const m = marks ?? {};
+  const cls = ["ori-frag"];
+  if (m.bold) cls.push("ori-m-bold");
+  if (m.italic) cls.push("ori-m-italic");
+  if (m.underline) cls.push("ori-m-underline");
+  if (m.strike) cls.push("ori-m-strike");
+  if (m.code) cls.push("ori-frag-code");
+  if (m.link) cls.push("ori-frag-link");
+  return cls.join(" ");
 }
-function useCallbackRef(fn) {
-  const ref = react.useRef(fn);
-  ref.current = fn;
-  return react.useMemo(() => (...args) => ref.current(...args), []);
+function buildRun(item) {
+  const span = document.createElement("span");
+  span.className = markClass(item.marks);
+  span.dataset.off = String(item.start);
+  span.dataset.len = String(item.text.length);
+  span.textContent = item.text;
+  return span;
 }
 
-// src/keymap.ts
-function pasteText(editor, text) {
-  const parts = text.replace(/\r\n?/g, "\n").split("\n");
-  editor.insertText(parts[0]);
-  for (let i = 1; i < parts.length; i += 1) {
-    editor.insertParagraphBreak();
-    if (parts[i]) editor.insertText(parts[i]);
+// src/ce/view.ts
+var PLACEHOLDER = "\uFFFC";
+var EditorView = class {
+  constructor(root, editor, opts) {
+    __publicField(this, "root", root);
+    __publicField(this, "editor", editor);
+    __publicField(this, "opts", opts);
+    __publicField(this, "roots", /* @__PURE__ */ new Map());
+    __publicField(this, "composing", false);
+    __publicField(this, "applyingModel", false);
+    __publicField(this, "detachers", []);
+    /** The model revision the DOM currently reflects (so external changes — remote
+     *  edits, app commands — re-render, but our own edits don't clobber the caret). */
+    __publicField(this, "lastRevision", -1);
+    root.setAttribute("contenteditable", opts.readOnly ? "false" : "true");
+    root.setAttribute("spellcheck", opts.readOnly ? "false" : "true");
+    root.setAttribute("role", "textbox");
+    root.setAttribute("aria-multiline", "true");
+    this.renderBlocks();
+    this.lastRevision = this.rev();
+    const on = (t, h, o) => {
+      root.addEventListener(t, h, o);
+      this.detachers.push(() => root.removeEventListener(t, h, o));
+    };
+    on("beforeinput", (e) => this.onBeforeInput(e));
+    on("input", () => this.onInput());
+    on("keydown", (e) => this.onKeyDown(e));
+    on("blur", () => {
+      setTimeout(() => {
+        if (document.activeElement === this.root || !document.hasFocus()) return;
+        const sel = this.editor.getSelection();
+        if (sel && !oriCore.isCollapsed(sel)) {
+          this.editor.collapse(sel.focus);
+          this.lastRevision = this.rev();
+        }
+      }, 0);
+    });
+    on("compositionstart", () => this.composing = true);
+    on("compositionend", () => {
+      this.composing = false;
+      this.onInput();
+    });
+    const onSelChange = () => {
+      if (this.applyingModel || this.composing) return;
+      const sel = this.readSelection();
+      if (!sel) return;
+      this.editor.setSelection(sel);
+      this.lastRevision = this.rev();
+    };
+    document.addEventListener("selectionchange", onSelChange);
+    this.detachers.push(() => document.removeEventListener("selectionchange", onSelChange));
   }
-}
-function handleKeyDown(editor, e, opts = {}) {
-  if (e.nativeEvent.isComposing) return false;
-  if (e.altKey) return false;
-  const mod = e.metaKey || e.ctrlKey;
-  const shift = e.shiftKey;
-  const ro = !!opts.readOnly;
-  if (mod) {
-    switch (e.key.toLowerCase()) {
-      case "b":
-        e.preventDefault();
-        if (!ro) editor.toggleMark("bold");
-        return true;
-      case "i":
-        e.preventDefault();
-        if (!ro) editor.toggleMark("italic");
-        return true;
-      case "u":
-        e.preventDefault();
-        if (!ro) editor.toggleMark("underline");
-        return true;
-      case "e":
-        e.preventDefault();
-        if (!ro) editor.toggleMark("code");
-        return true;
-      case "a":
-        e.preventDefault();
-        editor.selectAll();
-        return true;
-      case "z":
-        e.preventDefault();
-        if (!ro) shift ? editor.redo() : editor.undo();
-        return true;
-      case "y":
-        e.preventDefault();
-        if (!ro) editor.redo();
-        return true;
-      case "arrowleft":
-        e.preventDefault();
-        editor.moveCaret("lineStart", shift);
-        return true;
-      case "arrowright":
-        e.preventDefault();
-        editor.moveCaret("lineEnd", shift);
-        return true;
-      // Let the browser raise copy/cut/paste on the textarea.
-      case "c":
-      case "x":
-      case "v":
-        return false;
-      default:
-        return false;
+  destroy() {
+    this.detachers.forEach((d) => d());
+    this.roots.forEach((r) => r.unmount());
+    this.roots.clear();
+  }
+  focus() {
+    this.root.focus();
+  }
+  // --- rendering ---------------------------------------------------------
+  rev() {
+    return this.editor.getSnapshot().revision;
+  }
+  /**
+   * Called by React on every model change. Only re-renders when the model moved
+   * ahead of what we last drew (an *external* change — app command, undo, remote);
+   * our own edits already updated the DOM and must not be clobbered.
+   */
+  sync() {
+    const rev = this.rev();
+    if (rev === this.lastRevision) return;
+    const changed = this.renderBlocks();
+    if (changed) this.writeSelection();
+    this.lastRevision = rev;
+  }
+  /** After a controlled (preventDefault'd) edit: re-render + restore the caret. */
+  commit() {
+    this.renderBlocks();
+    this.writeSelection();
+    this.lastRevision = this.rev();
+  }
+  /** A content signature for a block, so unchanged blocks aren't re-rendered. */
+  sig(id) {
+    return this.editor.getBlockType(id) + "|" + JSON.stringify(this.editor.getInline(id));
+  }
+  /**
+   * Reconcile the DOM to the *visible window* of blocks (virtualization): a top
+   * spacer, the windowed blocks, then a bottom spacer — heights from the
+   * controller's offscreen measurement. On-screen blocks are reused by id so a
+   * caret inside one survives a scroll. Returns true if the DOM was mutated.
+   */
+  renderBlocks() {
+    let changed = false;
+    const snap = this.editor.getSnapshot();
+    const vis = snap.visible;
+    const topH = vis.length ? vis[0].top : 0;
+    const botH = vis.length ? Math.max(0, snap.totalHeight - (vis[vis.length - 1].top + vis[vis.length - 1].height)) : Math.max(0, snap.totalHeight);
+    const TOP = "\0top";
+    const BOTTOM = "\0bottom";
+    const want = [TOP, ...vis.map((v) => v.id), BOTTOM];
+    const keyOf = (el) => {
+      const e = el;
+      return e.dataset.spacer ? "\0" + e.dataset.spacer : e.dataset.blockId ?? "";
+    };
+    const have = /* @__PURE__ */ new Map();
+    for (const c of Array.from(this.root.children)) have.set(keyOf(c), c);
+    let prev = null;
+    for (const k of want) {
+      let el = have.get(k);
+      if (el) {
+        have.delete(k);
+      } else {
+        el = k === TOP || k === BOTTOM ? this.makeSpacer(k.slice(1)) : this.makeBlock(k);
+        changed = true;
+      }
+      const anchor = prev ? prev.nextSibling : this.root.firstChild;
+      if (anchor !== el) {
+        this.root.insertBefore(el, anchor);
+        changed = true;
+      }
+      prev = el;
+    }
+    for (const el of have.values()) {
+      if (el.dataset.blockId) this.unmountRootsIn(el);
+      el.remove();
+      changed = true;
+    }
+    const top = this.root.firstElementChild;
+    if (top && top.style.height !== `${topH}px`) top.style.height = `${topH}px`;
+    const bot = this.root.lastElementChild;
+    if (bot && bot.style.height !== `${botH}px`) bot.style.height = `${botH}px`;
+    for (const vb of vis) {
+      const el = this.root.querySelector(`[data-block-id="${esc(vb.id)}"]`);
+      if (!el) continue;
+      const sig = this.sig(vb.id);
+      if (el.dataset.sig !== sig) {
+        el.dataset.sig = sig;
+        this.renderBlockInner(el, vb.id);
+        changed = true;
+      }
     }
+    return changed;
   }
-  switch (e.key) {
-    case "Backspace":
-      e.preventDefault();
-      if (!ro) editor.deleteBackward();
-      return true;
-    case "Delete":
-      e.preventDefault();
-      if (!ro) editor.deleteForward();
-      return true;
-    case "Enter":
+  makeBlock(id) {
+    const el = document.createElement("div");
+    el.dataset.blockId = id;
+    return el;
+  }
+  makeSpacer(which) {
+    const el = document.createElement("div");
+    el.dataset.spacer = which;
+    el.setAttribute("contenteditable", "false");
+    el.setAttribute("aria-hidden", "true");
+    el.style.userSelect = "none";
+    el.style.pointerEvents = "none";
+    return el;
+  }
+  renderBlockInner(el, id) {
+    this.unmountRootsIn(el);
+    const type = this.editor.getBlockType(id);
+    el.className = `ori-block ori-block-${type}`;
+    const blockRenderer = this.opts.renderBlock(type);
+    if (blockRenderer) {
+      el.contentEditable = "false";
+      el.textContent = "";
+      const root = client.createRoot(el);
+      root.render(blockRenderer({ editor: this.editor, block: { id, type, index: 0, top: 0, height: 0 }, layout: this.editor.getLayout(id) }));
+      this.roots.set(el, root);
+      return;
+    }
+    el.contentEditable = "inherit";
+    el.textContent = "";
+    const items = this.editor.getInline(id);
+    if (items.length === 0) {
+      el.appendChild(document.createElement("br"));
+      return;
+    }
+    for (const item of items) {
+      if (item.atom) {
+        const span = document.createElement("span");
+        span.className = "ori-atom";
+        span.contentEditable = "false";
+        span.dataset.atom = "true";
+        span.dataset.off = String(item.start);
+        span.dataset.len = "1";
+        el.appendChild(span);
+        const renderer = this.opts.renderAtom(item.atom.type);
+        if (renderer) {
+          const r = client.createRoot(span);
+          r.render(renderer({ editor: this.editor, atom: item.atom }));
+          this.roots.set(span, r);
+        }
+      } else {
+        el.appendChild(buildRun(item));
+      }
+    }
+  }
+  unmountRootsIn(el) {
+    for (const [node, root] of this.roots) {
+      if (el === node || el.contains(node)) {
+        root.unmount();
+        this.roots.delete(node);
+      }
+    }
+  }
+  // --- selection ---------------------------------------------------------
+  readSelection() {
+    const s = window.getSelection();
+    if (!s || s.rangeCount === 0 || !this.root.contains(s.anchorNode)) return null;
+    const a = domToModel(this.root, s.anchorNode, s.anchorOffset);
+    const f = domToModel(this.root, s.focusNode, s.focusOffset);
+    if (!a || !f) return null;
+    return { anchor: { blockId: a.blockId, offset: a.offset }, focus: { blockId: f.blockId, offset: f.offset } };
+  }
+  /** Push the controller's selection back into the DOM (after a model op). */
+  writeSelection() {
+    const sel = this.editor.getSelection();
+    if (!sel) return;
+    const a = modelToDom(this.root, sel.anchor.blockId, sel.anchor.offset);
+    const f = modelToDom(this.root, sel.focus.blockId, sel.focus.offset);
+    if (!a || !f) return;
+    const r = document.createRange();
+    const s = window.getSelection();
+    if (!s) return;
+    this.applyingModel = true;
+    try {
+      r.setStart(a.node, a.offset);
+      s.removeAllRanges();
+      s.addRange(r);
+      s.extend(f.node, f.offset);
+    } catch {
+    } finally {
+      this.applyingModel = false;
+    }
+  }
+  /** The block text as the model sees it (atoms collapse to one placeholder). */
+  domBlockText(el) {
+    let out = "";
+    for (const child of Array.from(el.childNodes)) {
+      if (child instanceof HTMLElement && child.dataset.atom != null) {
+        out += PLACEHOLDER;
+      } else {
+        out += child.textContent ?? "";
+      }
+    }
+    return out;
+  }
+  // --- input -------------------------------------------------------------
+  /** Formatting + history shortcuts (the browser fires these as keydown). */
+  onKeyDown(e) {
+    if (this.opts.readOnly) return;
+    const mod = e.metaKey || e.ctrlKey;
+    if (!mod || e.altKey) return;
+    const k = e.key.toLowerCase();
+    const mark = { b: "bold", i: "italic", u: "underline", e: "code" }[k];
+    if (mark) {
       e.preventDefault();
-      if (!ro) editor.insertParagraphBreak();
-      return true;
-    case "Tab":
+      const sel = this.readSelection();
+      if (sel) this.editor.setSelection(sel);
+      this.editor.toggleMark(mark);
+      this.commit();
+    } else if (k === "z") {
       e.preventDefault();
-      if (!ro) editor.insertText("  ");
-      return true;
-    case "ArrowLeft":
+      if (e.shiftKey) this.editor.redo();
+      else this.editor.undo();
+      this.commit();
+    } else if (k === "y") {
       e.preventDefault();
-      editor.moveCaret("left", shift);
-      return true;
-    case "ArrowRight":
+      this.editor.redo();
+      this.commit();
+    }
+  }
+  onBeforeInput(e) {
+    if (this.opts.readOnly) {
       e.preventDefault();
-      editor.moveCaret("right", shift);
-      return true;
-    case "ArrowUp":
+      return;
+    }
+    const sel = this.readSelection();
+    if (!sel) return;
+    this.editor.setSelection(sel);
+    const collapsed = oriCore.isCollapsed(sel);
+    const startOffset = this.editor.orderedSelection()?.start.offset ?? sel.focus.offset;
+    const t = e.inputType;
+    if (collapsed && (t === "insertText" || t === "insertCompositionText" || t === "insertReplacementText")) return;
+    if (collapsed && t === "deleteContentForward") return;
+    if (collapsed && t === "deleteContentBackward" && startOffset > 0) return;
+    const ed = this.editor;
+    if (t === "insertParagraph") {
       e.preventDefault();
-      editor.moveCaret("up", shift);
-      return true;
-    case "ArrowDown":
+      ed.insertParagraphBreak();
+    } else if (t.startsWith("delete")) {
       e.preventDefault();
-      editor.moveCaret("down", shift);
-      return true;
-    case "Home":
+      if (t === "deleteContentForward") ed.deleteForward();
+      else ed.deleteBackward();
+    } else if (t === "insertText" || t === "insertReplacementText" || t === "insertFromPaste") {
       e.preventDefault();
-      editor.moveCaret("lineStart", shift);
-      return true;
-    case "End":
+      const text = e.data ?? e.dataTransfer?.getData("text/plain") ?? "";
+      if (text) ed.insertText(text);
+    } else if (t === "insertLineBreak") {
       e.preventDefault();
-      editor.moveCaret("lineEnd", shift);
-      return true;
-    default:
-      return false;
+      ed.insertText("\n");
+    } else {
+      return;
+    }
+    this.commit();
   }
+  onInput() {
+    if (this.composing || this.opts.readOnly) return;
+    const blockEl = blockElOf(window.getSelection()?.anchorNode ?? null, this.root);
+    if (!blockEl) {
+      this.renderBlocks();
+      this.lastRevision = this.rev();
+      return;
+    }
+    const id = blockEl.dataset.blockId;
+    const next = this.domBlockText(blockEl);
+    const cur = this.editor.getBlockText(id);
+    if (next === cur) return;
+    const max = Math.min(cur.length, next.length);
+    let p = 0;
+    while (p < max && cur[p] === next[p]) p++;
+    let s = 0;
+    while (s < max - p && cur[cur.length - 1 - s] === next[next.length - 1 - s]) s++;
+    const from = p;
+    const to = cur.length - s;
+    const insert = next.slice(p, next.length - s);
+    this.editor.setSelection({ anchor: { blockId: id, offset: from }, focus: { blockId: id, offset: to } });
+    if (to > from) this.editor.deleteBackward();
+    if (insert) this.editor.insertText(insert);
+    this.reindex(blockEl);
+    this.lastRevision = this.rev();
+  }
+  /** Re-derive data-off / data-len after a native edit (no node replacement). */
+  reindex(el) {
+    let off = 0;
+    for (const child of Array.from(el.children)) {
+      if (child.dataset.off == null) continue;
+      child.dataset.off = String(off);
+      const len = child.dataset.atom != null ? 1 : (child.textContent ?? "").length;
+      child.dataset.len = String(len);
+      off += len;
+    }
+  }
+};
+function caretClientRect() {
+  const s = window.getSelection();
+  if (!s || s.rangeCount === 0) return null;
+  const r = s.getRangeAt(0).cloneRange();
+  r.collapse(s.focusNode === r.endContainer && s.focusOffset === r.endOffset ? false : true);
+  const rects = r.getClientRects();
+  if (rects.length) return rects[rects.length - 1];
+  const b = r.getBoundingClientRect();
+  if (b.height || b.width) return b;
+  const node = r.startContainer;
+  const el = (node.nodeType === Node.TEXT_NODE ? node.parentElement : node) ?? null;
+  if (!el) return null;
+  const eb = el.getBoundingClientRect();
+  const cs = getComputedStyle(el);
+  const lh = parseFloat(cs.lineHeight) || parseFloat(cs.fontSize) * 1.4 || 18;
+  const padL = parseFloat(cs.paddingLeft) || 0;
+  const padT = parseFloat(cs.paddingTop) || 0;
+  return new DOMRect(eb.left + padL, eb.top + padT, 0, lh);
 }
-function diffReplace(oldText, newText) {
-  const max = Math.min(oldText.length, newText.length);
-  let p = 0;
-  while (p < max && oldText[p] === newText[p]) p++;
-  let s = 0;
-  while (s < max - p && oldText[oldText.length - 1 - s] === newText[newText.length - 1 - s]) s++;
-  return { from: p, to: oldText.length - s, insert: newText.slice(p, newText.length - s) };
-}
-var NoteEditor = react.forwardRef(function NoteEditor2({
-  editor,
-  className,
-  style,
-  maxWidth = 720,
-  placeholder = "Start writing\u2026",
-  autoFocus,
-  readOnly,
-  blockRenderers,
-  atomRenderers
-}, ref) {
+var NoteEditor = react.forwardRef(function NoteEditor2({ editor, className, style, maxWidth = 720, placeholder, autoFocus, readOnly, blockRenderers, atomRenderers }, ref) {
   const snapshot = useEditorSnapshot(editor);
-  const renderers = react.useMemo(
-    () => ({ blocks: blockRenderers ?? {}, atoms: atomRenderers ?? {} }),
-    [blockRenderers, atomRenderers]
-  );
   const scrollerRef = react.useRef(null);
   const contentRef = react.useRef(null);
-  const inputRef = react.useRef(null);
-  const composingRef = react.useRef(false);
-  const mirrorRef = react.useRef(null);
+  const viewRef = react.useRef(null);
   const [focused, setFocused] = react.useState(false);
-  const [coarse, setCoarse] = react.useState(false);
-  const [touchSelecting, setTouchSelecting] = react.useState(false);
+  const [caret, setCaret] = react.useState(null);
+  const renderersRef = react.useRef({ blockRenderers, atomRenderers });
+  renderersRef.current = { blockRenderers, atomRenderers };
   react.useImperativeHandle(
     ref,
     () => ({
-      focus: () => inputRef.current?.focus(),
+      focus: () => contentRef.current?.focus(),
       getCaretRect: () => {
-        const c = editor.caretRect();
-        const content = contentRef.current;
-        if (!c || !content) return null;
-        const r = content.getBoundingClientRect();
-        return { x: r.left + c.x, y: r.top + c.y, height: c.height };
+        const r = caretClientRect();
+        return r ? { x: r.left, y: r.top, height: r.height || 16 } : null;
       },
       getSelectionRect: () => {
-        const content = contentRef.current;
-        if (!content) return null;
-        const rects = editor.selectionRectsForViewport();
-        if (rects.length === 0) return null;
-        const r = content.getBoundingClientRect();
-        let top = Infinity;
-        let left = Infinity;
-        let bottom = -Infinity;
-        let right = -Infinity;
-        for (const rc of rects) {
-          top = Math.min(top, r.top + rc.y);
-          left = Math.min(left, r.left + rc.x);
-          bottom = Math.max(bottom, r.top + rc.y + rc.height);
-          right = Math.max(right, r.left + rc.x + rc.width);
-        }
-        return { top, left, right, bottom, width: right - left, height: bottom - top };
+        const s = window.getSelection();
+        if (!s || s.rangeCount === 0 || s.isCollapsed) return null;
+        const b = s.getRangeAt(0).getBoundingClientRect();
+        if (!b.width && !b.height) return null;
+        return { top: b.top, left: b.left, right: b.right, bottom: b.bottom, width: b.width, height: b.height };
       },
       getScrollElement: () => scrollerRef.current
     }),
-    [editor]
+    []
   );
+  react.useEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    const view = new EditorView(el, editor, {
+      readOnly,
+      renderAtom: (t) => renderersRef.current.atomRenderers?.[t],
+      renderBlock: (t) => renderersRef.current.blockRenderers?.[t]
+    });
+    viewRef.current = view;
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+  }, [editor, readOnly]);
+  react.useEffect(() => {
+    viewRef.current?.sync();
+  }, [snapshot.revision]);
+  react.useEffect(() => {
+    if (autoFocus) contentRef.current?.focus();
+  }, [autoFocus]);
+  react.useEffect(() => {
+    const update = () => {
+      const content = contentRef.current;
+      const s = window.getSelection();
+      if (!content || !s || s.rangeCount === 0 || !s.isCollapsed || !content.contains(s.anchorNode)) {
+        setCaret(null);
+        return;
+      }
+      const r = caretClientRect();
+      const box = content.getBoundingClientRect();
+      if (r) setCaret({ x: r.left - box.left, y: r.top - box.top, h: r.height || 18 });
+    };
+    document.addEventListener("selectionchange", update);
+    const ro = new ResizeObserver(update);
+    if (contentRef.current) ro.observe(contentRef.current);
+    update();
+    return () => {
+      document.removeEventListener("selectionchange", update);
+      ro.disconnect();
+    };
+  }, []);
   react.useLayoutEffect(() => {
-    const scroller = scrollerRef.current;
+    const sc = scrollerRef.current;
     const content = contentRef.current;
-    if (!scroller || !content) return;
+    if (!sc || !content) return;
     const sync = () => {
       editor.setWidth(content.clientWidth);
-      editor.setViewport(scroller.scrollTop, scroller.clientHeight);
+      editor.setViewport(sc.scrollTop, sc.clientHeight);
     };
     sync();
     const ro = new ResizeObserver(sync);
-    ro.observe(scroller);
+    ro.observe(sc);
     ro.observe(content);
     return () => ro.disconnect();
   }, [editor]);
-  react.useEffect(() => {
-    const fonts = document.fonts;
-    if (fonts?.ready) void fonts.ready.then(() => editor.invalidateMeasurements());
-  }, [editor]);
-  react.useEffect(() => {
-    if (autoFocus) inputRef.current?.focus();
-  }, [autoFocus]);
-  const pointToPosition = useCallbackRef((clientX, clientY) => {
-    const content = contentRef.current;
-    if (!content) return null;
-    const rect = content.getBoundingClientRect();
-    return editor.positionFromPoint(clientX - rect.left, clientY - rect.top);
-  });
-  react.useEffect(() => {
-    const mq = window.matchMedia?.("(pointer: coarse)");
-    if (!mq) return;
-    const update = () => setCoarse(mq.matches);
-    update();
-    mq.addEventListener?.("change", update);
-    return () => mq.removeEventListener?.("change", update);
-  }, []);
-  const gestureRef = react.useRef(null);
-  const lastTapRef = react.useRef({ t: 0, x: 0, y: 0, count: 0 });
-  react.useEffect(() => {
-    const scroller = scrollerRef.current;
-    if (!scroller) return;
-    const TAP_SLOP = 10;
-    const MULTI_DIST = 28;
-    const MULTI_MS = 400;
-    const LONG_MS = 480;
-    const end = () => {
-      const g = gestureRef.current;
-      if (g?.longPress) clearTimeout(g.longPress);
-      gestureRef.current = null;
-      setTouchSelecting(false);
-    };
-    const tap = (x, y, type) => {
-      const pos = pointToPosition(x, y);
-      if (!pos) return;
-      if (type !== "mouse") inputRef.current?.focus();
-      const now = Date.now();
-      const lt = lastTapRef.current;
-      const near = Math.hypot(x - lt.x, y - lt.y) <= MULTI_DIST;
-      const count = near && now - lt.t <= MULTI_MS ? Math.min(lt.count + 1, 3) : 1;
-      lastTapRef.current = { t: now, x, y, count };
-      if (count === 2) editor.selectWordAt(pos);
-      else if (count === 3) editor.selectBlockAt(pos);
-      else editor.collapse(pos);
-    };
-    const onDown = (e) => {
-      if (e.pointerType === "mouse" && e.button !== 0) return;
-      if (e.target?.closest?.(".ori-handle")) return;
-      if (e.clientX - scroller.getBoundingClientRect().left >= scroller.clientWidth) return;
-      const pos = pointToPosition(e.clientX, e.clientY);
-      const g = {
-        id: e.pointerId,
-        type: e.pointerType,
-        x: e.clientX,
-        y: e.clientY,
-        pos,
-        mode: "idle",
-        moved: false,
-        longPress: void 0
-      };
-      gestureRef.current = g;
-      if (e.pointerType === "mouse") {
-        inputRef.current?.focus();
-        if (pos) {
-          e.preventDefault();
-          const sel = editor.getSelection();
-          if (e.shiftKey && sel) editor.setSelection({ anchor: sel.anchor, focus: pos });
-          else editor.collapse(pos);
-          g.mode = "mouseDrag";
-        }
-      } else {
-        g.longPress = setTimeout(() => {
-          const gg = gestureRef.current;
-          if (!gg || gg.mode !== "idle" || gg.moved || !gg.pos) return;
-          gg.mode = "touchSelect";
-          setTouchSelecting(true);
-          inputRef.current?.focus();
-          editor.selectWordAt(gg.pos);
-        }, LONG_MS);
-      }
-    };
-    const onMove = (e) => {
-      const g = gestureRef.current;
-      if (!g || e.pointerId !== g.id) return;
-      if (Math.hypot(e.clientX - g.x, e.clientY - g.y) > TAP_SLOP) g.moved = true;
-      if (g.mode === "mouseDrag" || g.mode === "touchSelect") {
-        const pos = pointToPosition(e.clientX, e.clientY);
-        const sel = editor.getSelection();
-        if (pos && sel) editor.setSelection({ anchor: sel.anchor, focus: pos });
-        e.preventDefault();
-      } else if (g.mode === "idle" && g.moved && g.type !== "mouse") {
-        if (g.longPress) clearTimeout(g.longPress);
-        g.mode = "scroll";
-      }
-    };
-    const onUp = (e) => {
-      const g = gestureRef.current;
-      if (!g || e.pointerId !== g.id) return;
-      const wasTap = g.mode === "idle" || g.mode === "mouseDrag" && !g.moved;
-      if (wasTap) tap(e.clientX, e.clientY, g.type);
-      end();
-    };
-    scroller.addEventListener("pointerdown", onDown, { passive: false });
-    window.addEventListener("pointermove", onMove, { passive: false });
-    window.addEventListener("pointerup", onUp);
-    window.addEventListener("pointercancel", end);
-    return () => {
-      scroller.removeEventListener("pointerdown", onDown);
-      window.removeEventListener("pointermove", onMove);
-      window.removeEventListener("pointerup", onUp);
-      window.removeEventListener("pointercancel", end);
-    };
-  }, [editor, pointToPosition]);
   const onScroll = () => {
-    const scroller = scrollerRef.current;
-    if (scroller) editor.setViewport(scroller.scrollTop, scroller.clientHeight);
+    const sc = scrollerRef.current;
+    if (sc) editor.setViewport(sc.scrollTop, sc.clientHeight);
   };
-  react.useEffect(() => {
-    if (!coarse) return;
-    const el = inputRef.current;
-    if (!el || composingRef.current) return;
-    const sel = editor.getSelection();
-    if (!sel) {
-      mirrorRef.current = null;
-      return;
-    }
-    const blockId = sel.focus.blockId;
-    const text = editor.getBlockText(blockId);
-    const pendingNativeInput = document.activeElement === el && el.value !== text && el.value !== mirrorRef.current?.text;
-    if (!pendingNativeInput) {
-      if (el.value !== text) el.value = text;
-      const a = sel.anchor.blockId === blockId ? sel.anchor.offset : sel.focus.offset;
-      const f = sel.focus.offset;
-      const start = Math.min(a, f);
-      const end = Math.max(a, f);
-      if (el.selectionStart !== start || el.selectionEnd !== end) {
-        try {
-          el.setSelectionRange(start, end, f < a ? "backward" : "forward");
-        } catch {
-        }
+  const onPointerDown = (e) => {
+    if (readOnly) return;
+    if (e.target.closest("[data-block-id]")) return;
+    const content = contentRef.current;
+    const blocks = content?.querySelectorAll("[data-block-id]");
+    const last = blocks && blocks[blocks.length - 1];
+    if (!content || !last) return;
+    if (e.clientY <= last.getBoundingClientRect().bottom) return;
+    e.preventDefault();
+    content.focus();
+    const sel = window.getSelection();
+    if (!sel) return;
+    const range = document.createRange();
+    range.selectNodeContents(last);
+    range.collapse(false);
+    sel.removeAllRanges();
+    sel.addRange(range);
+  };
+  const showCaret = focused && !!caret && !readOnly;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `ori-root${className ? ` ${className}` : ""}`, style, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ori-scroller", ref: scrollerRef, onScroll, onPointerDown, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ori-content", style: { maxWidth, marginInline: "auto", position: "relative" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "ori-canvas ori-ce",
+        ref: contentRef,
+        onFocus: () => setFocused(true),
+        onBlur: () => setFocused(false),
+        suppressContentEditableWarning: true
       }
-    }
-    mirrorRef.current = { blockId, text };
-  }, [coarse, editor, snapshot.revision]);
-  react.useEffect(() => {
-    if (!coarse) return;
-    const onSelChange = () => {
-      const el = inputRef.current;
-      const m = mirrorRef.current;
-      if (!el || !m || composingRef.current || document.activeElement !== el) return;
-      if (el.value !== m.text) return;
-      const a = el.selectionStart ?? 0;
-      const b = el.selectionEnd ?? 0;
-      const backward = el.selectionDirection === "backward";
-      const anchorOff = backward ? b : a;
-      const focusOff = backward ? a : b;
-      const cur = editor.getSelection();
-      if (cur && cur.anchor.blockId === m.blockId && cur.focus.blockId === m.blockId && cur.anchor.offset === anchorOff && cur.focus.offset === focusOff) {
-        return;
+    ),
+    showCaret && caret ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "ori-caret",
+        style: { position: "absolute", left: caret.x, top: caret.y, height: caret.h, pointerEvents: "none" },
+        "aria-hidden": true
       }
-      editor.setSelection({
-        anchor: { blockId: m.blockId, offset: anchorOff },
-        focus: { blockId: m.blockId, offset: focusOff }
-      });
-    };
-    document.addEventListener("selectionchange", onSelChange);
-    return () => document.removeEventListener("selectionchange", onSelChange);
-  }, [coarse, editor]);
-  const applyMirrorDiff = () => {
-    const el = inputRef.current;
-    const m = mirrorRef.current;
-    if (!el || !m || readOnly) return;
-    const { from, to, insert } = diffReplace(m.text, el.value);
-    if (from === to && insert === "") return;
-    editor.setSelection({
-      anchor: { blockId: m.blockId, offset: from },
-      focus: { blockId: m.blockId, offset: to }
-    });
-    if (to > from) editor.deleteBackward();
-    if (insert) editor.insertText(insert);
-    mirrorRef.current = { blockId: m.blockId, text: el.value };
-  };
-  const onKeyDown = (e) => {
-    handleKeyDown(editor, e, { readOnly });
-  };
-  const commitInput = () => {
-    const el = inputRef.current;
-    if (!el) return;
-    const value = el.value;
-    if (value) {
-      if (!readOnly) editor.insertText(value);
-      el.value = "";
-    }
-  };
-  const onInput = (e) => {
-    if (composingRef.current || e.nativeEvent.isComposing) return;
-    if (coarse && mirrorRef.current) applyMirrorDiff();
-    else commitInput();
-  };
-  const onCompositionStart = () => {
-    composingRef.current = true;
-  };
-  const onCompositionEnd = (e) => {
-    composingRef.current = false;
-    const el = inputRef.current;
-    if (!el) return;
-    if (coarse && mirrorRef.current) {
-      applyMirrorDiff();
-    } else {
-      if (e.data && !readOnly) editor.insertText(e.data);
-      el.value = "";
-    }
-  };
-  const caret = editor.caretRect();
-  const inputStyle = {
-    position: "absolute",
-    left: caret ? caret.x : 0,
-    top: caret ? caret.y : 0,
-    width: 1,
-    height: caret ? caret.height : 16,
-    opacity: 0,
-    padding: 0,
-    border: 0,
-    outline: "none",
-    resize: "none",
-    background: "transparent",
-    caretColor: "transparent",
-    color: "transparent",
-    overflow: "hidden",
-    whiteSpace: "pre",
-    zIndex: 1
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(RenderersProvider, { value: renderers, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `ori-root${className ? ` ${className}` : ""}`, style, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: "ori-scroller",
-      ref: scrollerRef,
-      onScroll,
-      "data-touch-selecting": touchSelecting ? "" : void 0,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "ori-content",
-          ref: contentRef,
-          style: { maxWidth, marginInline: "auto", position: "relative" },
-          children: /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: "ori-canvas",
-              style: { position: "relative", width: "100%", height: snapshot.totalHeight },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(SelectionLayer, { editor, snapshot }),
-                snapshot.visible.map((block) => /* @__PURE__ */ jsxRuntime.jsx(BlockView, { editor, block }, block.id)),
-                /* @__PURE__ */ jsxRuntime.jsx(CaretLayer, { editor, snapshot, focused }),
-                coarse ? /* @__PURE__ */ jsxRuntime.jsx(SelectionHandles, { editor, snapshot, pointToPosition }) : null,
-                snapshot.empty && placeholder ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ori-placeholder", "aria-hidden": true, children: placeholder }) : null,
-                !readOnly ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "textarea",
-                  {
-                    ref: inputRef,
-                    className: "ori-input",
-                    style: inputStyle,
-                    spellCheck: false,
-                    autoCapitalize: "off",
-                    autoCorrect: "off",
-                    autoComplete: "off",
-                    inputMode: "text",
-                    onKeyDown,
-                    onInput,
-                    onCompositionStart,
-                    onCompositionEnd,
-                    onFocus: () => setFocused(true),
-                    onBlur: () => setFocused(false),
-                    onCopy: (e) => {
-                      e.preventDefault();
-                      e.clipboardData.setData("text/plain", editor.getSelectedText());
-                    },
-                    onCut: (e) => {
-                      e.preventDefault();
-                      e.clipboardData.setData("text/plain", editor.getSelectedText());
-                      editor.deleteBackward();
-                    },
-                    onPaste: (e) => {
-                      e.preventDefault();
-                      pasteText(editor, e.clipboardData.getData("text/plain"));
-                    }
-                  }
-                ) : null
-              ]
-            }
-          )
-        }
-      )
-    }
-  ) }) });
+    ) : null,
+    snapshot.empty && placeholder ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ori-placeholder", "aria-hidden": true, children: placeholder }) : null
+  ] }) }) });
 });
+var EMPTY = { blocks: {}, atoms: {} };
+var RenderersContext = react.createContext(EMPTY);
+RenderersContext.Provider;
+var useRenderers = () => react.useContext(RenderersContext);
 
 Object.defineProperty(exports, "DEFAULT_TYPOGRAPHY", {
   enumerable: true,
@@ -761,12 +665,7 @@ Object.defineProperty(exports, "snapshotBlocks", {
   enumerable: true,
   get: function () { return oriCore.snapshotBlocks; }
 });
-exports.BlockView = BlockView;
-exports.CaretLayer = CaretLayer;
 exports.NoteEditor = NoteEditor;
-exports.SelectionLayer = SelectionLayer;
-exports.handleKeyDown = handleKeyDown;
-exports.pasteText = pasteText;
 exports.useActiveMarks = useActiveMarks;
 exports.useEditor = useEditor;
 exports.useEditorSnapshot = useEditorSnapshot;