@wingleeio/ori-react 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Wing
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,24 @@
+# @wingleeio/ori-react
+
+> **Alpha (`0.0.x`).** Experimental — APIs may change between releases and it is not yet production-ready.
+
+React bindings for the Ori virtualized note editor.
+
+```tsx
+import { useEditor, NoteEditor } from "@wingleeio/ori-react";
+import "@wingleeio/ori-react/styles.css";
+
+function Editor({ doc }) {
+  const editor = useEditor({ doc }); // owns an EditorController for this mount
+  return <NoteEditor editor={editor} autoFocus placeholder="Start writing…" maxWidth={720} />;
+}
+```
+
+`<NoteEditor>` renders only the blocks intersecting the viewport, draws the caret
+and selection from logical state, and routes keyboard / IME / mouse input to the
+controller. Pair with `useEditorSnapshot` / `useActiveMarks` to build toolbars.
+
+To switch notes, give the host component a `key` (e.g. the note id) so it
+remounts with a fresh controller for the new `Y.Doc`.
+
+`react`, `react-dom` and `yjs` are peer dependencies.

package/dist/index.cjs

@@ -0,0 +1,553 @@
+'use strict';
+
+var oriCore = require('@wingleeio/ori-core');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/useEditor.ts
+function useEditor(options = {}) {
+  const ref = react.useRef(null);
+  if (ref.current === null) {
+    ref.current = new oriCore.EditorController({
+      doc: options.doc,
+      measurer: options.measurer ?? oriCore.createCanvasMeasurer(),
+      typography: options.typography,
+      overscan: options.overscan,
+      blockSpacing: options.blockSpacing,
+      schema: options.schema
+    });
+  }
+  react.useEffect(() => {
+    const editor = ref.current;
+    return () => editor?.destroy();
+  }, []);
+  return ref.current;
+}
+function useEditorSnapshot(editor) {
+  return react.useSyncExternalStore(editor.subscribe, editor.getSnapshot, editor.getSnapshot);
+}
+function useActiveMarks(editor) {
+  const snapshot = useEditorSnapshot(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
+  };
+}
+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 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 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 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 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 useCallbackRef(fn) {
+  const ref = react.useRef(fn);
+  ref.current = fn;
+  return react.useMemo(() => (...args) => ref.current(...args), []);
+}
+
+// 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]);
+  }
+}
+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;
+    }
+  }
+  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":
+      e.preventDefault();
+      if (!ro) editor.insertParagraphBreak();
+      return true;
+    case "Tab":
+      e.preventDefault();
+      if (!ro) editor.insertText("  ");
+      return true;
+    case "ArrowLeft":
+      e.preventDefault();
+      editor.moveCaret("left", shift);
+      return true;
+    case "ArrowRight":
+      e.preventDefault();
+      editor.moveCaret("right", shift);
+      return true;
+    case "ArrowUp":
+      e.preventDefault();
+      editor.moveCaret("up", shift);
+      return true;
+    case "ArrowDown":
+      e.preventDefault();
+      editor.moveCaret("down", shift);
+      return true;
+    case "Home":
+      e.preventDefault();
+      editor.moveCaret("lineStart", shift);
+      return true;
+    case "End":
+      e.preventDefault();
+      editor.moveCaret("lineEnd", shift);
+      return true;
+    default:
+      return false;
+  }
+}
+var NoteEditor = react.forwardRef(function NoteEditor2({
+  editor,
+  className,
+  style,
+  maxWidth = 720,
+  placeholder = "Start writing\u2026",
+  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 [focused, setFocused] = react.useState(false);
+  react.useImperativeHandle(
+    ref,
+    () => ({
+      focus: () => inputRef.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 };
+      },
+      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 };
+      },
+      getScrollElement: () => scrollerRef.current
+    }),
+    [editor]
+  );
+  react.useLayoutEffect(() => {
+    const scroller = scrollerRef.current;
+    const content = contentRef.current;
+    if (!scroller || !content) return;
+    const sync = () => {
+      editor.setWidth(content.clientWidth);
+      editor.setViewport(scroller.scrollTop, scroller.clientHeight);
+    };
+    sync();
+    const ro = new ResizeObserver(sync);
+    ro.observe(scroller);
+    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 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
+          ]
+        }
+      )
+    }
+  ) }) }) });
+});
+
+Object.defineProperty(exports, "DEFAULT_TYPOGRAPHY", {
+  enumerable: true,
+  get: function () { return oriCore.DEFAULT_TYPOGRAPHY; }
+});
+Object.defineProperty(exports, "EditorController", {
+  enumerable: true,
+  get: function () { return oriCore.EditorController; }
+});
+Object.defineProperty(exports, "applyUpdate", {
+  enumerable: true,
+  get: function () { return oriCore.applyUpdate; }
+});
+Object.defineProperty(exports, "base64ToBytes", {
+  enumerable: true,
+  get: function () { return oriCore.base64ToBytes; }
+});
+Object.defineProperty(exports, "bytesToBase64", {
+  enumerable: true,
+  get: function () { return oriCore.bytesToBase64; }
+});
+Object.defineProperty(exports, "createCanvasMeasurer", {
+  enumerable: true,
+  get: function () { return oriCore.createCanvasMeasurer; }
+});
+Object.defineProperty(exports, "createNoteDoc", {
+  enumerable: true,
+  get: function () { return oriCore.createNoteDoc; }
+});
+Object.defineProperty(exports, "docFromUpdate", {
+  enumerable: true,
+  get: function () { return oriCore.docFromUpdate; }
+});
+Object.defineProperty(exports, "encodeDoc", {
+  enumerable: true,
+  get: function () { return oriCore.encodeDoc; }
+});
+Object.defineProperty(exports, "getBlocks", {
+  enumerable: true,
+  get: function () { return oriCore.getBlocks; }
+});
+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;
+exports.useRenderers = useRenderers;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map