@wingleeio/ori-react 0.0.2 → 0.0.4

package/dist/index.cjs

@@ -19,7 +19,8 @@ function useEditor(options = {}) {
   }
   react.useEffect(() => {
     const editor = ref.current;
-    return () => editor?.destroy();
+    editor?.connect();
+    return () => editor?.disconnect();
   }, []);
   return ref.current;
 }
@@ -144,6 +145,67 @@ function SelectionLayer({
     `${r.blockId}:${i}`
   )) });
 }
+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" })
+      ]
+    }
+  );
+  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)
+  ] });
+}
 function CaretLayer({
   editor,
   snapshot,
@@ -275,6 +337,14 @@ function handleKeyDown(editor, e, opts = {}) {
       return false;
   }
 }
+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,
@@ -294,9 +364,11 @@ var NoteEditor = react.forwardRef(function NoteEditor2({
   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 mirrorRef = react.useRef(null);
   const [focused, setFocused] = react.useState(false);
+  const [coarse, setCoarse] = react.useState(false);
+  const [touchSelecting, setTouchSelecting] = react.useState(false);
   react.useImperativeHandle(
     ref,
     () => ({
@@ -358,43 +430,177 @@ var NoteEditor = react.forwardRef(function NoteEditor2({
     return editor.positionFromPoint(clientX - rect.left, clientY - rect.top);
   });
   react.useEffect(() => {
-    const onMove = (e) => {
-      if (!draggingRef.current) return;
+    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 sel = editor.getSelection();
-      if (pos && sel) editor.setSelection({ anchor: sel.anchor, focus: pos });
+      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 = () => {
-      draggingRef.current = false;
+    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();
     };
-    window.addEventListener("mousemove", onMove);
-    window.addEventListener("mouseup", onUp);
+    scroller.addEventListener("pointerdown", onDown, { passive: false });
+    window.addEventListener("pointermove", onMove, { passive: false });
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", end);
     return () => {
-      window.removeEventListener("mousemove", onMove);
-      window.removeEventListener("mouseup", onUp);
+      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 onMouseDown = (e) => {
-    if (e.button !== 0) return;
-    const scroller = scrollerRef.current;
-    if (scroller && e.clientX - scroller.getBoundingClientRect().left >= scroller.clientWidth) {
+  react.useEffect(() => {
+    if (!coarse) return;
+    const el = inputRef.current;
+    if (!el || composingRef.current) return;
+    const sel = editor.getSelection();
+    if (!sel) {
+      mirrorRef.current = null;
       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);
+    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 {
+        }
+      }
     }
-    draggingRef.current = 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;
+      }
+      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 });
@@ -410,7 +616,8 @@ var NoteEditor = react.forwardRef(function NoteEditor2({
   };
   const onInput = (e) => {
     if (composingRef.current || e.nativeEvent.isComposing) return;
-    commitInput();
+    if (coarse && mirrorRef.current) applyMirrorDiff();
+    else commitInput();
   };
   const onCompositionStart = () => {
     composingRef.current = true;
@@ -418,7 +625,10 @@ var NoteEditor = react.forwardRef(function NoteEditor2({
   const onCompositionEnd = (e) => {
     composingRef.current = false;
     const el = inputRef.current;
-    if (el) {
+    if (!el) return;
+    if (coarse && mirrorRef.current) {
+      applyMirrorDiff();
+    } else {
       if (e.data && !readOnly) editor.insertText(e.data);
       el.value = "";
     }
@@ -442,57 +652,69 @@ var NoteEditor = react.forwardRef(function NoteEditor2({
     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(
+  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-content",
-      ref: contentRef,
-      style: { maxWidth, marginInline: "auto", position: "relative" },
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
+      className: "ori-scroller",
+      ref: scrollerRef,
+      onScroll,
+      "data-touch-selecting": touchSelecting ? "" : void 0,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
         "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
-          ]
+          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
+              ]
+            }
+          )
         }
       )
     }
-  ) }) }) });
+  ) }) });
 });
 
 Object.defineProperty(exports, "DEFAULT_TYPOGRAPHY", {