@wingleeio/ori-react 0.0.3 → 0.1.0

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,469 +35,554 @@ 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 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 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)) };
     }
-  );
+  }
+  const last = spans[spans.length - 1];
+  const textNode = last.firstChild ?? last;
+  return { node: textNode, offset: (textNode.textContent ?? "").length };
 }
-function useCallbackRef(fn) {
-  const ref = react.useRef(fn);
-  ref.current = fn;
-  return react.useMemo(() => (...args) => ref.current(...args), []);
+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 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("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();
+  return b.height || b.width ? b : null;
 }
-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 draggingRef = react.useRef(false);
-  const composingRef = react.useRef(false);
+  const viewRef = react.useRef(null);
   const [focused, setFocused] = 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 onMove = (e) => {
-      if (!draggingRef.current) return;
-      const pos = pointToPosition(e.clientX, e.clientY);
-      const sel = editor.getSelection();
-      if (pos && sel) editor.setSelection({ anchor: sel.anchor, focus: pos });
-    };
-    const onUp = () => {
-      draggingRef.current = false;
-    };
-    window.addEventListener("mousemove", onMove);
-    window.addEventListener("mouseup", onUp);
-    return () => {
-      window.removeEventListener("mousemove", onMove);
-      window.removeEventListener("mouseup", onUp);
-    };
-  }, [editor, pointToPosition]);
   const onScroll = () => {
-    const scroller = scrollerRef.current;
-    if (scroller) editor.setViewport(scroller.scrollTop, scroller.clientHeight);
-  };
-  const onMouseDown = (e) => {
-    if (e.button !== 0) return;
-    const scroller = scrollerRef.current;
-    if (scroller && e.clientX - scroller.getBoundingClientRect().left >= scroller.clientWidth) {
-      return;
-    }
-    inputRef.current?.focus();
-    const pos = pointToPosition(e.clientX, e.clientY);
-    if (!pos) return;
-    e.preventDefault();
-    const sel = editor.getSelection();
-    if (e.shiftKey && sel) {
-      editor.setSelection({ anchor: sel.anchor, focus: pos });
-    } else {
-      editor.collapse(pos);
-    }
-    draggingRef.current = true;
-  };
-  const onKeyDown = (e) => {
-    handleKeyDown(editor, e, { readOnly });
+    const sc = scrollerRef.current;
+    if (sc) editor.setViewport(sc.scrollTop, sc.clientHeight);
   };
-  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;
-    commitInput();
-  };
-  const onCompositionStart = () => {
-    composingRef.current = true;
-  };
-  const onCompositionEnd = (e) => {
-    composingRef.current = false;
-    const el = inputRef.current;
-    if (el) {
-      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, onMouseDown, 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 }),
-            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",
-                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
-          ]
-        }
-      )
-    }
-  ) }) }) });
+  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, 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
+      }
+    ),
+    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
+      }
+    ) : 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,
@@ -540,12 +628,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;