@dxos/react-ui-editor 0.3.11-main.42059c4 → 0.3.11-main.47875f3

package/dist/lib/browser/index.mjs

@@ -51,7 +51,7 @@ var autocomplete = ({ onSearch }) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
-import { StateField } from "@codemirror/state";
+import { Facet as Facet2, StateField } from "@codemirror/state";
 import { ViewPlugin } from "@codemirror/view";
 import { next as A } from "@dxos/automerge/automerge";
 
@@ -92,7 +92,7 @@ var cursorConverter = (handle, path) => ({
 });
 
 // packages/ui/react-ui-editor/src/extensions/automerge/defs.ts
-import { Annotation, StateEffect, Facet } from "@codemirror/state";
+import { Annotation, StateEffect } from "@codemirror/state";
 var effectType = StateEffect.define({});
 var updateHeads = (newHeads) => effectType.of({
   newHeads
@@ -101,9 +101,6 @@ var getLastHeads = (state, field) => state.field(field).lastHeads;
 var getPath = (state, field) => state.field(field).path;
 var reconcileAnnotationType = Annotation.define();
 var isReconcileTx = (tr) => !!tr.annotation(reconcileAnnotationType);
-var semaphoreFacet = Facet.define({
-  combine: (values) => values.at(-1)
-});
 
 // packages/ui/react-ui-editor/src/extensions/automerge/semaphore.ts
 import { next as automerge2 } from "@dxos/automerge/automerge";
@@ -240,11 +237,11 @@ var charPath = (textPath, candidatePath) => {
 
 // packages/ui/react-ui-editor/src/extensions/automerge/semaphore.ts
 var PatchSemaphore = class {
-  constructor(_handle, _field) {
-    this._handle = _handle;
+  constructor(_field) {
     this._field = _field;
     this._inReconcile = false;
-    this.reconcile = (view) => {
+    this._queue = [];
+    this.reconcile = (handle, view) => {
       if (this._inReconcile) {
         return;
       }
@@ -262,11 +259,11 @@ var PatchSemaphore = class {
           annotations: reconcileAnnotationType.of(true)
         });
       }
-      let newHeads = updateAutomerge(this._field, this._handle, transactions, view.state);
+      let newHeads = updateAutomerge(this._field, handle, transactions, view.state);
       if (newHeads === null || newHeads === void 0) {
-        newHeads = automerge2.getHeads(this._handle.docSync());
+        newHeads = automerge2.getHeads(handle.docSync());
       }
-      const diff = automerge2.equals(oldHeads, newHeads) ? [] : automerge2.diff(this._handle.docSync(), oldHeads, newHeads);
+      const diff = automerge2.equals(oldHeads, newHeads) ? [] : automerge2.diff(handle.docSync(), oldHeads, newHeads);
       updateCodeMirror(view, selection, path, diff);
       view.dispatch({
         effects: updateHeads(newHeads),
@@ -278,14 +275,14 @@ var PatchSemaphore = class {
 };
 
 // packages/ui/react-ui-editor/src/extensions/cursor.ts
-import { Facet as Facet2 } from "@codemirror/state";
+import { Facet } from "@codemirror/state";
 var defaultCursorConverter = {
   toCursor: (position) => position.toString(),
   fromCursor: (cursor) => parseInt(cursor)
 };
 var Cursor = class {
   static {
-    this.converter = Facet2.define({
+    this.converter = Facet.define({
       combine: (providers) => providers[0] ?? defaultCursorConverter
     });
   }
@@ -313,6 +310,9 @@ var Cursor = class {
 };
 
 // packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
+var semaphoreFacet = Facet2.define({
+  combine: (values) => values.at(-1)
+});
 var automerge3 = ({ handle, path }) => {
   const stateField = StateField.define({
     create: () => ({
@@ -343,19 +343,19 @@ var automerge3 = ({ handle, path }) => {
       return result;
     }
   });
-  const semaphore = new PatchSemaphore(handle, stateField);
-  const viewPlugin = ViewPlugin.fromClass(class AutomergeViewPlugin {
+  const semaphore = new PatchSemaphore(stateField);
+  const viewPlugin = ViewPlugin.fromClass(class AutomergeCodemirrorViewPlugin {
     constructor(_view) {
       this._view = _view;
       this._handleChange = () => {
-        this._view.state.facet(semaphoreFacet).reconcile(this._view);
+        this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
       };
       handle.addListener("change", this._handleChange);
     }
     update(update2) {
       if (update2.transactions.length > 0 && update2.transactions.some((tr) => !isReconcileTx(tr))) {
         queueMicrotask(() => {
-          this._view.state.facet(semaphoreFacet).reconcile(this._view);
+          this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
         });
       }
     }
@@ -1105,6 +1105,7 @@ import { hoverTooltip, keymap as keymap3, Decoration as Decoration3, EditorView
 import sortBy from "lodash.sortby";
 import { debounce } from "@dxos/async";
 import { invariant as invariant2 } from "@dxos/invariant";
+import { log as log2 } from "@dxos/log";
 import { nonNullable } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/util.ts
@@ -1172,7 +1173,7 @@ var commentsStateField = StateField2.define({
           ...effect.value
         };
       }
-      if (effect.is(setCommentRange) && effect.value.comments.length > 0) {
+      if (effect.is(setCommentRange)) {
         const { comments: comments2 } = effect.value;
         const ranges = comments2.map((comment) => {
           const range = Cursor.getRangeFromCursor(cursorConverter3, comment.cursor);
@@ -1213,56 +1214,51 @@ var highlightDecorations = EditorView5.decorations.compute([
   }).filter(nonNullable) ?? [];
   return Decoration3.set(decorations);
 });
-var trackPastedComments = (onUpdate) => {
+var trackPastedComments = (onMove) => {
   let tracked = null;
-  const handleTrack = (event, view) => {
+  const registerCopy = (event, view) => {
     const comments2 = view.state.field(commentsStateField);
     const { main } = view.state.selection;
-    const selectedRanges = comments2.ranges.filter((range) => range.from >= main.from && range.to <= main.to && range.from < range.to);
-    if (!selectedRanges.length) {
+    const inSel = comments2.ranges.filter((range) => range.from >= main.from && range.to <= main.to && range.from < range.to);
+    if (!inSel.length) {
       tracked = null;
     } else {
       tracked = {
         text: view.state.doc.slice(main.from, main.to),
-        comments: selectedRanges.map((range) => ({
-          id: range.id,
+        comments: inSel.map((range) => ({
           from: range.from - main.from,
-          to: range.to - main.from
+          to: range.to - main.from,
+          id: range.id
         }))
       };
     }
   };
   return [
     EditorView5.domEventHandlers({
-      cut: handleTrack,
-      copy: handleTrack
+      cut: registerCopy,
+      copy: registerCopy
     }),
-    // Handle paste.
-    EditorView5.updateListener.of(({ view, state, transactions }) => {
+    EditorView5.updateListener.of((update2) => {
       if (tracked) {
-        const paste = transactions.find((tr) => tr.isUserEvent("input.paste"));
+        const paste = update2.transactions.find((tr) => tr.isUserEvent("input.paste"));
         if (paste) {
           let found = -1;
           paste.changes.iterChanges((fromA, toA, fromB, toB, text) => {
             if (text.eq(tracked.text)) {
-              for (let i = transactions.indexOf(paste) + 1; i < transactions.length; i++) {
-                fromB = transactions[i].changes.mapPos(fromB);
+              for (let i = update2.transactions.indexOf(paste) + 1; i < update2.transactions.length; i++) {
+                fromB = update2.transactions[i].changes.mapPos(fromB);
               }
               found = fromB;
             }
           });
           if (found > -1) {
-            const comments2 = tracked.comments;
-            view.state.facet(semaphoreFacet).reconcile(view);
-            const active = state.field(commentsStateField).ranges;
-            for (const moved of comments2) {
+            const active = update2.view.state.field(commentsStateField).ranges;
+            for (const moved of tracked.comments) {
               if (active.some((range) => range.id === moved.id && range.from === range.to)) {
-                const range = {
+                onMove(moved.id, Cursor.getCursorFromRange(update2.view.state.facet(Cursor.converter), {
                   from: found + moved.from,
                   to: found + moved.to
-                };
-                const cursor = Cursor.getCursorFromRange(state.facet(Cursor.converter), range);
-                onUpdate(moved.id, cursor);
+                }));
               }
             }
           }
@@ -1279,14 +1275,14 @@ var comments = (options = {}) => {
     const cursorConverter3 = view.state.facet(Cursor.converter);
     invariant2(options.onCreate, void 0, {
       F: __dxlog_file3,
-      L: 262,
+      L: 240,
       S: void 0,
       A: [
         "options.onCreate",
         ""
       ]
     });
-    const { from, to } = view.state.selection.main;
+    const { head, from, to } = view.state.selection.main;
     if (from === to) {
       return false;
     }
@@ -1305,6 +1301,18 @@ var comments = (options = {}) => {
             anchor: from
           }
         });
+        if (options.footnote) {
+          const tag = `[^${id}]`;
+          view.dispatch({
+            changes: {
+              from: head,
+              insert: tag
+            },
+            selection: {
+              anchor: head + tag.length
+            }
+          });
+        }
         return true;
       }
     }
@@ -1366,7 +1374,14 @@ var comments = (options = {}) => {
             if (from2 === to2) {
               const newRange = Cursor.getRangeFromCursor(cursorConverter3, range.cursor);
               if (!newRange || newRange.to - newRange.from === 0) {
-                options.onDelete?.(range.id);
+                log2.info("deleted comment", {
+                  thread: range.id
+                }, {
+                  F: __dxlog_file3,
+                  L: 337,
+                  S: void 0,
+                  C: (f, a) => f(...a)
+                });
               }
             }
             if (from <= range.to) {
@@ -1417,7 +1432,7 @@ var comments = (options = {}) => {
         }
       }
     }),
-    options.onUpdate ? trackPastedComments(options.onUpdate) : []
+    options.onMove ? trackPastedComments(options.onMove) : []
   ];
 };
 
@@ -2465,7 +2480,7 @@ var EditorModes = [
   "default",
   "vim"
 ];
-var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, autofocus, readonly, selection, comments: comments2, extensions = [], editorMode, theme, slots = defaultSlots }, forwardedRef) => {
+var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, focus, selection, readonly, comments: comments2, extensions = [], editorMode, theme, slots = defaultSlots }, forwardedRef) => {
   const tabsterDOMAttribute = useFocusableGroup({
     tabBehavior: "limited"
   });
@@ -2476,12 +2491,12 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, autofocus, readonly, s
     view
   ]);
   useEffect(() => {
-    if (autofocus) {
-      view?.focus();
+    if (view && focus) {
+      view.focus();
     }
   }, [
-    autofocus,
-    view
+    view,
+    focus
   ]);
   const { awareness: awareness2, peer } = model;
   useEffect(() => {
@@ -2572,11 +2587,11 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, autofocus, readonly, s
   return /* @__PURE__ */ React.createElement("div", {
     key: model.id,
     role: "none",
+    ref: rootRef,
     tabIndex: 0,
     onKeyUp: handleKeyUp,
     ...slots.root,
-    ...editorMode !== "vim" && tabsterDOMAttribute,
-    ref: rootRef
+    ...editorMode !== "vim" && tabsterDOMAttribute
   });
 });
 var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, extensions = [], theme = textTheme, slots, ...props }, forwardedRef) => {
@@ -2619,7 +2634,7 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeh
 });
 var defaultSlots = {
   root: {
-    className: mx3("w-full p-2 overflow-y-auto", inputSurface)
+    className: mx3("p-2 overflow-y-auto", inputSurface)
   }
 };
 var defaultTextSlots = {
@@ -2638,7 +2653,7 @@ import { isNotNullOrUndefined } from "@dxos/util";
 import { DeferredTask, Event as Event2, sleep } from "@dxos/async";
 import { Context as Context2 } from "@dxos/context";
 import { invariant as invariant3 } from "@dxos/invariant";
-import { log as log2 } from "@dxos/log";
+import { log as log3 } from "@dxos/log";
 var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/awareness-provider.ts";
 var DEBOUNCE_INTERVAL = 100;
 var SpaceAwarenessProvider = class {
@@ -2677,7 +2692,7 @@ var SpaceAwarenessProvider = class {
     void this._space.postMessage(this._channel, {
       kind: "query"
     }).catch((err) => {
-      log2.debug("failed to query awareness", {
+      log3.debug("failed to query awareness", {
         err
       }, {
         F: __dxlog_file4,
@@ -2750,7 +2765,7 @@ import * as encoding from "lib0/encoding";
 import { Observable } from "lib0/observable";
 import * as YP from "y-protocols/awareness";
 import { invariant as invariant4 } from "@dxos/invariant";
-import { log as log3 } from "@dxos/log";
+import { log as log4 } from "@dxos/log";
 var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/yjs.ts";
 var createYjsModel = ({ identity, space, text }) => {
   invariant4(text?.doc && text?.content, void 0, {
@@ -2813,7 +2828,7 @@ var YAwarenessProvider = class extends Observable {
     return this._awareness;
   }
   _handleAwarenessUpdate({ added, updated, removed }, origin) {
-    log3("awareness update", {
+    log4("awareness update", {
       added,
       updated,
       removed,
@@ -2831,7 +2846,7 @@ var YAwarenessProvider = class extends Observable {
     void this._space.postMessage(this._channel, encoding.toUint8Array(encoderAwareness));
   }
   _handleSpaceMessage({ payload }) {
-    log3("space message", payload, {
+    log4("space message", payload, {
       F: __dxlog_file5,
       L: 109,
       S: this,