@dxos/react-ui-editor 0.3.11-main.c86e105 → 0.3.11-main.c8e9429

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);
         });
       }
     }
@@ -595,7 +595,7 @@ var styles = EditorView.baseTheme({
     zIndex: 101,
     transition: "opacity .3s ease-in-out",
     backgroundColor: "inherit",
-    // these should be separate
+    // These should be separate.
     opacity: 0,
     transitionDelay: "0s",
     whiteSpace: "nowrap"
@@ -1059,20 +1059,18 @@ var getLineRange = (lines, from, to) => {
   ];
 };
 var code2 = () => {
-  const getDecorations = (view) => {
+  const buildDecorations4 = (view) => {
     const decorations = [];
-    if (!view.hasFocus || view.state.readOnly) {
-      const text = view.state.doc.sliceString(0);
-      const matches = text.matchAll(CODE_REGEX);
-      const blocks = view.viewportLineBlocks;
-      for (const match of matches) {
-        const range = getLineRange(blocks, match.index, match.index + match[0].length);
-        for (let i = range[0]; i <= range[1]; i++) {
-          const block = blocks[i];
-          decorations.push(Decoration2.line({
-            class: mx2("cm-codeblock", i === range[0] && "cm-codeblock-first", i === range[1] && "cm-codeblock-last")
-          }).range(block.from));
-        }
+    const text = view.state.doc.sliceString(0);
+    const matches = text.matchAll(CODE_REGEX);
+    const blocks = view.viewportLineBlocks;
+    for (const match of matches) {
+      const range = getLineRange(blocks, match.index, match.index + match[0].length);
+      for (let i = range[0]; i <= range[1]; i++) {
+        const block = blocks[i];
+        decorations.push(Decoration2.line({
+          class: mx2("cm-codeblock", i === range[0] && "cm-codeblock-first", i === range[1] && "cm-codeblock-last")
+        }).range(block.from));
       }
     }
     return Decoration2.set(decorations);
@@ -1081,7 +1079,7 @@ var code2 = () => {
     ViewPlugin3.fromClass(class {
       constructor(view) {
         this.hasFocus = false;
-        this.decorations = getDecorations(view);
+        this.decorations = buildDecorations4(view);
       }
       update(update2) {
         if (
@@ -1089,7 +1087,7 @@ var code2 = () => {
           this.hasFocus !== update2.view.hasFocus || update2.startState.readOnly !== update2.view.state.readOnly || update2.docChanged || update2.viewportChanged
         ) {
           this.hasFocus = update2.view.hasFocus;
-          this.decorations = getDecorations(update2.view);
+          this.decorations = buildDecorations4(update2.view);
         }
       }
     }, {
@@ -1105,7 +1103,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
@@ -1214,51 +1211,56 @@ var highlightDecorations = EditorView5.decorations.compute([
   }).filter(nonNullable) ?? [];
   return Decoration3.set(decorations);
 });
-var trackPastedComments = (onMove) => {
+var trackPastedComments = (onUpdate) => {
   let tracked = null;
-  const registerCopy = (event, view) => {
+  const handleTrack = (event, view) => {
     const comments2 = view.state.field(commentsStateField);
     const { main } = view.state.selection;
-    const inSel = comments2.ranges.filter((range) => range.from >= main.from && range.to <= main.to && range.from < range.to);
-    if (!inSel.length) {
+    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: inSel.map((range) => ({
+        comments: selectedRanges.map((range) => ({
+          id: range.id,
           from: range.from - main.from,
-          to: range.to - main.from,
-          id: range.id
+          to: range.to - main.from
         }))
       };
     }
   };
   return [
     EditorView5.domEventHandlers({
-      cut: registerCopy,
-      copy: registerCopy
+      cut: handleTrack,
+      copy: handleTrack
     }),
-    EditorView5.updateListener.of((update2) => {
+    // Handle paste.
+    EditorView5.updateListener.of(({ view, state, transactions }) => {
       if (tracked) {
-        const paste = update2.transactions.find((tr) => tr.isUserEvent("input.paste"));
+        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 = update2.transactions.indexOf(paste) + 1; i < update2.transactions.length; i++) {
-                fromB = update2.transactions[i].changes.mapPos(fromB);
+              for (let i = transactions.indexOf(paste) + 1; i < transactions.length; i++) {
+                fromB = transactions[i].changes.mapPos(fromB);
               }
               found = fromB;
             }
           });
           if (found > -1) {
-            const active = update2.view.state.field(commentsStateField).ranges;
-            for (const moved of tracked.comments) {
+            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)) {
-                onMove(moved.id, Cursor.getCursorFromRange(update2.view.state.facet(Cursor.converter), {
+                const range = {
                   from: found + moved.from,
                   to: found + moved.to
-                }));
+                };
+                const cursor = Cursor.getCursorFromRange(state.facet(Cursor.converter), range);
+                onUpdate(moved.id, cursor);
               }
             }
           }
@@ -1275,14 +1277,14 @@ var comments = (options = {}) => {
     const cursorConverter3 = view.state.facet(Cursor.converter);
     invariant2(options.onCreate, void 0, {
       F: __dxlog_file3,
-      L: 240,
+      L: 264,
       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;
     }
@@ -1301,18 +1303,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;
       }
     }
@@ -1344,7 +1334,7 @@ var comments = (options = {}) => {
           above: true,
           create: () => {
             const el = document.createElement("div");
-            options.onHover?.(el, shortcut);
+            options.onHover(el, shortcut);
             return {
               dom: el,
               offset: {
@@ -1357,7 +1347,8 @@ var comments = (options = {}) => {
       }
       return null;
     }, {
-      hideOnChange: true,
+      // TODO(burdon): Hide on change triggered immediately?
+      // hideOnChange: true,
       hoverTime: 1e3
     }) : [],
     //
@@ -1374,14 +1365,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: 337,
-                  S: void 0,
-                  C: (f, a) => f(...a)
-                });
+                options.onDelete?.(range.id);
               }
             }
             if (from <= range.to) {
@@ -1432,7 +1416,7 @@ var comments = (options = {}) => {
         }
       }
     }),
-    options.onMove ? trackPastedComments(options.onMove) : []
+    options.onUpdate ? trackPastedComments(options.onUpdate) : []
   ];
 };
 
@@ -1460,7 +1444,8 @@ var HorizontalRuleWidget = class extends WidgetType2 {
   }
 };
 var placeholderMatcher = new MatchDecorator({
-  regexp: /^---$/g,
+  // regexp: /(?<=\n\n)---/gs,
+  regexp: /^---$/gs,
   decoration: (match, view, pos) => Decoration4.replace({
     widget: new HorizontalRuleWidget(pos)
   })
@@ -1475,11 +1460,7 @@ var hr = () => [
       this.rules = placeholderMatcher.updateDeco(update2, this.rules);
     }
   }, {
-    decorations: (instance) => instance.rules,
-    // TODO(burdon): Is this really atomic (cursor can move into ---).
-    provide: (plugin) => EditorView6.atomicRanges.of((view) => {
-      return view.plugin(plugin)?.rules || Decoration4.none;
-    })
+    decorations: (instance) => instance.rules
   })
 ];
 
@@ -1558,7 +1539,7 @@ var ImageWidget = class extends WidgetType3 {
 // packages/ui/react-ui-editor/src/extensions/link.ts
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { RangeSetBuilder } from "@codemirror/state";
-import { Decoration as Decoration6, WidgetType as WidgetType4, hoverTooltip as hoverTooltip2, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
+import { hoverTooltip as hoverTooltip2, Decoration as Decoration6, ViewPlugin as ViewPlugin5, WidgetType as WidgetType4 } from "@codemirror/view";
 import { tooltipContent } from "@dxos/react-ui-theme";
 var link = (options = {}) => {
   const extensions = [
@@ -2137,6 +2118,7 @@ var tasklist = (options = {}) => {
     }
   }, {
     decorations: (v) => v.decorations,
+    // TODO(burdon): Is this still required?
     provide: (plugin) => EditorView11.atomicRanges.of((view) => {
       return view.plugin(plugin)?.decorations || Decoration8.none;
     })
@@ -2480,7 +2462,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"
   });
@@ -2491,12 +2473,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(() => {
@@ -2587,11 +2569,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) => {
@@ -2634,7 +2616,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 = {
@@ -2653,7 +2635,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 {
@@ -2692,7 +2674,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,
@@ -2765,7 +2747,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, {
@@ -2828,7 +2810,7 @@ var YAwarenessProvider = class extends Observable {
     return this._awareness;
   }
   _handleAwarenessUpdate({ added, updated, removed }, origin) {
-    log4("awareness update", {
+    log3("awareness update", {
       added,
       updated,
       removed,
@@ -2846,7 +2828,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,