@dxos/react-ui-editor 0.3.11-main.3d4adea → 0.3.11-main.42059c4

package/dist/lib/browser/index.mjs

@@ -51,7 +51,7 @@ var autocomplete = ({ onSearch }) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
-import { Facet as Facet2, StateField } from "@codemirror/state";
+import { 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 } from "@codemirror/state";
+import { Annotation, StateEffect, Facet } from "@codemirror/state";
 var effectType = StateEffect.define({});
 var updateHeads = (newHeads) => effectType.of({
   newHeads
@@ -101,6 +101,9 @@ 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";
@@ -237,11 +240,11 @@ var charPath = (textPath, candidatePath) => {
 
 // packages/ui/react-ui-editor/src/extensions/automerge/semaphore.ts
 var PatchSemaphore = class {
-  constructor(_field) {
+  constructor(_handle, _field) {
+    this._handle = _handle;
     this._field = _field;
     this._inReconcile = false;
-    this._queue = [];
-    this.reconcile = (handle, view) => {
+    this.reconcile = (view) => {
       if (this._inReconcile) {
         return;
       }
@@ -259,11 +262,11 @@ var PatchSemaphore = class {
           annotations: reconcileAnnotationType.of(true)
         });
       }
-      let newHeads = updateAutomerge(this._field, handle, transactions, view.state);
+      let newHeads = updateAutomerge(this._field, this._handle, transactions, view.state);
       if (newHeads === null || newHeads === void 0) {
-        newHeads = automerge2.getHeads(handle.docSync());
+        newHeads = automerge2.getHeads(this._handle.docSync());
       }
-      const diff = automerge2.equals(oldHeads, newHeads) ? [] : automerge2.diff(handle.docSync(), oldHeads, newHeads);
+      const diff = automerge2.equals(oldHeads, newHeads) ? [] : automerge2.diff(this._handle.docSync(), oldHeads, newHeads);
       updateCodeMirror(view, selection, path, diff);
       view.dispatch({
         effects: updateHeads(newHeads),
@@ -275,14 +278,14 @@ var PatchSemaphore = class {
 };
 
 // packages/ui/react-ui-editor/src/extensions/cursor.ts
-import { Facet } from "@codemirror/state";
+import { Facet as Facet2 } from "@codemirror/state";
 var defaultCursorConverter = {
   toCursor: (position) => position.toString(),
   fromCursor: (cursor) => parseInt(cursor)
 };
 var Cursor = class {
   static {
-    this.converter = Facet.define({
+    this.converter = Facet2.define({
       combine: (providers) => providers[0] ?? defaultCursorConverter
     });
   }
@@ -310,9 +313,6 @@ 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(stateField);
-  const viewPlugin = ViewPlugin.fromClass(class AutomergeCodemirrorViewPlugin {
+  const semaphore = new PatchSemaphore(handle, stateField);
+  const viewPlugin = ViewPlugin.fromClass(class AutomergeViewPlugin {
     constructor(_view) {
       this._view = _view;
       this._handleChange = () => {
-        this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
+        this._view.state.facet(semaphoreFacet).reconcile(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(handle, this._view);
+          this._view.state.facet(semaphoreFacet).reconcile(this._view);
         });
       }
     }
@@ -1105,7 +1105,6 @@ 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
@@ -1173,7 +1172,7 @@ var commentsStateField = StateField2.define({
           ...effect.value
         };
       }
-      if (effect.is(setCommentRange)) {
+      if (effect.is(setCommentRange) && effect.value.comments.length > 0) {
         const { comments: comments2 } = effect.value;
         const ranges = comments2.map((comment) => {
           const range = Cursor.getRangeFromCursor(cursorConverter3, comment.cursor);
@@ -1214,6 +1213,65 @@ var highlightDecorations = EditorView5.decorations.compute([
   }).filter(nonNullable) ?? [];
   return Decoration3.set(decorations);
 });
+var trackPastedComments = (onUpdate) => {
+  let tracked = null;
+  const handleTrack = (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) {
+      tracked = null;
+    } else {
+      tracked = {
+        text: view.state.doc.slice(main.from, main.to),
+        comments: selectedRanges.map((range) => ({
+          id: range.id,
+          from: range.from - main.from,
+          to: range.to - main.from
+        }))
+      };
+    }
+  };
+  return [
+    EditorView5.domEventHandlers({
+      cut: handleTrack,
+      copy: handleTrack
+    }),
+    // Handle paste.
+    EditorView5.updateListener.of(({ view, state, transactions }) => {
+      if (tracked) {
+        const paste = 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);
+              }
+              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) {
+              if (active.some((range) => range.id === moved.id && range.from === range.to)) {
+                const range = {
+                  from: found + moved.from,
+                  to: found + moved.to
+                };
+                const cursor = Cursor.getCursorFromRange(state.facet(Cursor.converter), range);
+                onUpdate(moved.id, cursor);
+              }
+            }
+          }
+          tracked = null;
+        }
+      }
+    })
+  ];
+};
 var comments = (options = {}) => {
   const { key: shortcut = "meta-'" } = options;
   const handleSelect = debounce((state) => options.onSelect?.(state), 200);
@@ -1221,14 +1279,14 @@ var comments = (options = {}) => {
     const cursorConverter3 = view.state.facet(Cursor.converter);
     invariant2(options.onCreate, void 0, {
       F: __dxlog_file3,
-      L: 177,
+      L: 262,
       S: void 0,
       A: [
         "options.onCreate",
         ""
       ]
     });
-    const { head, from, to } = view.state.selection.main;
+    const { from, to } = view.state.selection.main;
     if (from === to) {
       return false;
     }
@@ -1247,18 +1305,6 @@ 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;
       }
     }
@@ -1320,14 +1366,7 @@ var comments = (options = {}) => {
             if (from2 === to2) {
               const newRange = Cursor.getRangeFromCursor(cursorConverter3, range.cursor);
               if (!newRange || newRange.to - newRange.from === 0) {
-                log2.info("deleted comment", {
-                  thread: range.id
-                }, {
-                  F: __dxlog_file3,
-                  L: 274,
-                  S: void 0,
-                  C: (f, a) => f(...a)
-                });
+                options.onDelete?.(range.id);
               }
             }
             if (from <= range.to) {
@@ -1377,7 +1416,8 @@ var comments = (options = {}) => {
           });
         }
       }
-    })
+    }),
+    options.onUpdate ? trackPastedComments(options.onUpdate) : []
   ];
 };
 
@@ -2025,87 +2065,85 @@ var TableWidget = class extends WidgetType5 {
 };
 
 // packages/ui/react-ui-editor/src/extensions/tasklist.ts
-import { EditorView as EditorView11, Decoration as Decoration8, WidgetType as WidgetType6, MatchDecorator as MatchDecorator2, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
-var styles5 = EditorView11.baseTheme({
-  "& .cm-task-item": {
-    paddingLeft: "4px",
-    paddingRight: "8px"
-  }
-});
+import { syntaxTree as syntaxTree4 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder3 } from "@codemirror/state";
+import { EditorView as EditorView11, Decoration as Decoration8, WidgetType as WidgetType6, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
 var CheckboxWidget = class extends WidgetType6 {
-  constructor(_checked, _indent, _onCheck) {
+  constructor(_checked) {
     super();
     this._checked = _checked;
-    this._indent = _indent;
-    this._onCheck = _onCheck;
   }
   eq(other) {
-    return this._checked === other._checked && this._indent === other._indent;
+    return this._checked === other._checked;
   }
   toDOM(view) {
-    const wrap = document.createElement("span");
-    wrap.className = "cm-task-item";
-    wrap.setAttribute("aria-hidden", "true");
-    wrap.style.setProperty("margin-left", this._indent * 24 + "px");
-    const input = wrap.appendChild(document.createElement("input"));
+    const input = document.createElement("input");
     input.type = "checkbox";
     input.checked = this._checked;
-    if (!this._onCheck) {
+    if (view.state.readOnly) {
       input.setAttribute("disabled", "true");
-    }
-    if (this._onCheck) {
-      input.onchange = (event) => {
-        this._onCheck?.(event.target.checked);
-        return true;
+    } else {
+      input.onmousedown = (event) => {
+        const pos = view.posAtDOM(input);
+        const text = view.state.sliceDoc(pos, pos + 3);
+        if (text === (this._checked ? "[x]" : "[ ]")) {
+          view.dispatch({
+            changes: {
+              from: pos + 1,
+              to: pos + 2,
+              insert: this._checked ? " " : "x"
+            }
+          });
+          event.preventDefault();
+        }
       };
     }
-    return wrap;
+    return input;
   }
   ignoreEvent() {
     return false;
   }
 };
+var checkedDeco = Decoration8.replace({
+  widget: new CheckboxWidget(true)
+});
+var uncheckedDeco = Decoration8.replace({
+  widget: new CheckboxWidget(false)
+});
 var tasklist = (options = {}) => {
-  const taskMatcher = new MatchDecorator2({
-    regexp: /^(\s*)- \[([ xX])\]\s/g,
-    decoration: (match, view, pos) => {
-      const indent = Math.floor(match[1].length / 2);
-      const checked = match[2] === "x" || match[2] === "X";
-      return Decoration8.replace({
-        widget: new CheckboxWidget(checked, indent, view.state.readOnly ? void 0 : (checked2) => {
-          const idx = pos + match[0].indexOf("[") + 1;
-          view.dispatch({
-            changes: {
-              from: idx,
-              to: idx + 1,
-              insert: checked2 ? "x" : " "
-            },
-            // TODO(burdon): Restore cursor position? More useful to move to end of line (can indent).
-            selection: {
-              anchor: idx + 3
-            }
-          });
-        })
-      });
-    }
-  });
-  const tasks = ViewPlugin6.fromClass(class {
+  return ViewPlugin6.fromClass(class {
     constructor(view) {
-      this.tasks = taskMatcher.createDeco(view);
+      this.decorations = buildDecorations3(view);
     }
     update(update2) {
-      this.tasks = taskMatcher.updateDeco(update2, this.tasks);
+      if (update2.docChanged || update2.viewportChanged || update2.selectionSet) {
+        this.decorations = buildDecorations3(update2.view);
+      }
     }
   }, {
-    decorations: (value) => value.tasks,
+    decorations: (v) => v.decorations,
     provide: (plugin) => EditorView11.atomicRanges.of((view) => {
-      return view.plugin(plugin)?.tasks || Decoration8.none;
+      return view.plugin(plugin)?.decorations || Decoration8.none;
     })
   });
-  return [
-    tasks,
-    styles5
-  ];
+};
+var buildDecorations3 = (view) => {
+  const builder = new RangeSetBuilder3();
+  const { state } = view;
+  const cursor = state.selection.main.head;
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree4(state).iterate({
+      enter: (node) => {
+        if (node.name === "TaskMarker" && (cursor < node.from || cursor > node.to)) {
+          const checked = state.doc.sliceString(node.from + 1, node.to - 1) === "x";
+          builder.add(node.from, node.to, checked ? checkedDeco : uncheckedDeco);
+        }
+      },
+      from,
+      to
+    });
+  }
+  return builder.finish();
 };
 
 // packages/ui/react-ui-editor/src/extensions/typewriter.ts
@@ -2427,7 +2465,7 @@ var EditorModes = [
   "default",
   "vim"
 ];
-var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, focus, selection, readonly, comments: comments2, extensions = [], editorMode, theme, slots = defaultSlots }, forwardedRef) => {
+var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, autofocus, readonly, selection, comments: comments2, extensions = [], editorMode, theme, slots = defaultSlots }, forwardedRef) => {
   const tabsterDOMAttribute = useFocusableGroup({
     tabBehavior: "limited"
   });
@@ -2438,12 +2476,12 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, focus, selection, read
     view
   ]);
   useEffect(() => {
-    if (view && focus) {
-      view.focus();
+    if (autofocus) {
+      view?.focus();
     }
   }, [
-    view,
-    focus
+    autofocus,
+    view
   ]);
   const { awareness: awareness2, peer } = model;
   useEffect(() => {
@@ -2534,11 +2572,11 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, focus, selection, read
   return /* @__PURE__ */ React.createElement("div", {
     key: model.id,
     role: "none",
-    ref: rootRef,
     tabIndex: 0,
     onKeyUp: handleKeyUp,
     ...slots.root,
-    ...editorMode !== "vim" && tabsterDOMAttribute
+    ...editorMode !== "vim" && tabsterDOMAttribute,
+    ref: rootRef
   });
 });
 var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, extensions = [], theme = textTheme, slots, ...props }, forwardedRef) => {
@@ -2581,7 +2619,7 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeh
 });
 var defaultSlots = {
   root: {
-    className: mx3("p-2 overflow-y-auto", inputSurface)
+    className: mx3("w-full p-2 overflow-y-auto", inputSurface)
   }
 };
 var defaultTextSlots = {
@@ -2600,7 +2638,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 log3 } from "@dxos/log";
+import { log as log2 } 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 {
@@ -2639,7 +2677,7 @@ var SpaceAwarenessProvider = class {
     void this._space.postMessage(this._channel, {
       kind: "query"
     }).catch((err) => {
-      log3.debug("failed to query awareness", {
+      log2.debug("failed to query awareness", {
         err
       }, {
         F: __dxlog_file4,
@@ -2712,7 +2750,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 log4 } from "@dxos/log";
+import { log as log3 } 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, {
@@ -2775,7 +2813,7 @@ var YAwarenessProvider = class extends Observable {
     return this._awareness;
   }
   _handleAwarenessUpdate({ added, updated, removed }, origin) {
-    log4("awareness update", {
+    log3("awareness update", {
       added,
       updated,
       removed,
@@ -2793,7 +2831,7 @@ var YAwarenessProvider = class extends Observable {
     void this._space.postMessage(this._channel, encoding.toUint8Array(encoderAwareness));
   }
   _handleSpaceMessage({ payload }) {
-    log4("space message", payload, {
+    log3("space message", payload, {
       F: __dxlog_file5,
       L: 109,
       S: this,
@@ -2926,7 +2964,6 @@ export {
   comments,
   createAutomergeModel,
   createYjsModel,
-  cursorConverter,
   defaultMarkdownSlots,
   defaultOptions,
   defaultSlots,