@dxos/react-ui-editor 0.3.11-main.00a28cb → 0.3.11-main.08776d7

package/dist/lib/browser/index.mjs

@@ -52,7 +52,6 @@ var autocomplete = ({ onSearch }) => {
 
 // packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
 import { StateField } from "@codemirror/state";
-import { ViewPlugin } from "@codemirror/view";
 import { next as A } from "@dxos/automerge/automerge";
 
 // packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts
@@ -92,18 +91,15 @@ 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 reconcileAnnotationType = Annotation.define();
+var getPath = (state, field) => state.field(field).path;
+var getLastHeads = (state, field) => state.field(field).lastHeads;
 var updateHeads = (newHeads) => effectType.of({
   newHeads
 });
-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,57 +236,60 @@ var charPath = (textPath, candidatePath) => {
 
 // packages/ui/react-ui-editor/src/extensions/automerge/semaphore.ts
 var PatchSemaphore = class {
+  // prettier-ignore
   constructor(_handle, _field) {
     this._handle = _handle;
     this._field = _field;
     this._inReconcile = false;
-    this.reconcile = (view) => {
-      if (this._inReconcile) {
-        return;
-      }
-      this._inReconcile = true;
-      const path = getPath(view.state, this._field);
-      const oldHeads = getLastHeads(view.state, this._field);
-      let selection = view.state.selection;
-      const transactions = view.state.field(this._field).unreconciledTransactions.filter((tx) => !isReconcileTx(tx));
-      const toInvert = transactions.slice().reverse();
-      for (const tx of toInvert) {
-        const inverted = tx.changes.invert(tx.startState.doc);
-        selection = selection.map(inverted);
-        view.dispatch({
-          changes: inverted,
-          annotations: reconcileAnnotationType.of(true)
-        });
-      }
-      let newHeads = updateAutomerge(this._field, this._handle, transactions, view.state);
-      if (newHeads === null || newHeads === void 0) {
-        newHeads = automerge2.getHeads(this._handle.docSync());
-      }
-      const diff = automerge2.equals(oldHeads, newHeads) ? [] : automerge2.diff(this._handle.docSync(), oldHeads, newHeads);
-      updateCodeMirror(view, selection, path, diff);
+  }
+  // NOTE: Cannot destruct view.state.
+  reconcile(view) {
+    if (this._inReconcile) {
+      return;
+    }
+    this._inReconcile = true;
+    const path = getPath(view.state, this._field);
+    const oldHeads = getLastHeads(view.state, this._field);
+    let selection = view.state.selection;
+    const transactions = view.state.field(this._field).unreconciledTransactions.filter((tx) => !isReconcileTx(tx));
+    const toInvert = transactions.slice().reverse();
+    for (const tx of toInvert) {
+      const inverted = tx.changes.invert(tx.startState.doc);
+      selection = selection.map(inverted);
       view.dispatch({
-        effects: updateHeads(newHeads),
-        annotations: reconcileAnnotationType.of({})
+        changes: inverted,
+        annotations: reconcileAnnotationType.of(true)
       });
-      this._inReconcile = false;
-    };
+    }
+    let newHeads = updateAutomerge(this._field, this._handle, transactions, view.state);
+    if (newHeads === null || newHeads === void 0) {
+      newHeads = automerge2.getHeads(this._handle.docSync());
+    }
+    const diff = automerge2.equals(oldHeads, newHeads) ? [] : automerge2.diff(this._handle.docSync(), oldHeads, newHeads);
+    updateCodeMirror(view, selection, path, diff);
+    view.dispatch({
+      effects: updateHeads(newHeads),
+      annotations: reconcileAnnotationType.of({})
+    });
+    this._inReconcile = false;
   }
 };
 
 // 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 {
+var Cursor = class _Cursor {
   static {
-    this.converter = Facet2.define({
+    this.converter = Facet.define({
       combine: (providers) => providers[0] ?? defaultCursorConverter
     });
   }
   static {
-    this.getCursorFromRange = (cursorConverter3, range) => {
+    this.getCursorFromRange = (state, range) => {
+      const cursorConverter3 = state.facet(_Cursor.converter);
       const from = cursorConverter3.toCursor(range.from);
       const to = cursorConverter3.toCursor(range.to, -1);
       return [
@@ -300,7 +299,8 @@ var Cursor = class {
     };
   }
   static {
-    this.getRangeFromCursor = (cursorConverter3, cursor) => {
+    this.getRangeFromCursor = (state, cursor) => {
+      const cursorConverter3 = state.facet(_Cursor.converter);
       const parts = cursor.split(":");
       const from = cursorConverter3.fromCursor(parts[0]);
       const to = cursorConverter3.fromCursor(parts[1]);
@@ -312,19 +312,25 @@ var Cursor = class {
   }
 };
 
+// packages/ui/react-ui-editor/src/extensions/sync.ts
+import { Facet as Facet2 } from "@codemirror/state";
+var syncFacet = Facet2.define({
+  combine: (values) => values.at(-1)
+});
+
 // packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
 var automerge3 = ({ handle, path }) => {
   const stateField = StateField.define({
     create: () => ({
+      path: path.slice(),
       lastHeads: A.getHeads(handle.docSync()),
-      unreconciledTransactions: [],
-      path: path.slice()
+      unreconciledTransactions: []
     }),
     update: (value, tr) => {
       const result = {
+        path: path.slice(),
         lastHeads: value.lastHeads,
-        unreconciledTransactions: value.unreconciledTransactions.slice(),
-        path: path.slice()
+        unreconciledTransactions: value.unreconciledTransactions.slice()
       };
       let clearUnreconciled = false;
       for (const effect of tr.effects) {
@@ -344,38 +350,18 @@ var automerge3 = ({ handle, path }) => {
     }
   });
   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(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);
-        });
-      }
-    }
-    destroy() {
-      handle.addListener("change", this._handleChange);
-    }
-  });
   return {
     extension: [
       Cursor.converter.of(cursorConverter(handle, path)),
-      semaphoreFacet.of(semaphore),
-      stateField,
-      viewPlugin
+      syncFacet.of(semaphore),
+      stateField
     ]
   };
 };
 
 // packages/ui/react-ui-editor/src/extensions/awareness.ts
 import { Annotation as Annotation2, Facet as Facet3, RangeSet } from "@codemirror/state";
-import { Decoration, EditorView, ViewPlugin as ViewPlugin2, WidgetType } from "@codemirror/view";
+import { Decoration, EditorView, ViewPlugin, WidgetType } from "@codemirror/view";
 import { Event } from "@dxos/async";
 import { Context } from "@dxos/context";
 var dummyProvider = {
@@ -395,7 +381,7 @@ var RemoteSelectionChangedAnnotation = Annotation2.define();
 var awareness = (provider = dummyProvider) => {
   return [
     AwarenessProvider.of(provider),
-    ViewPlugin2.fromClass(RemoteSelectionsDecorator, {
+    ViewPlugin.fromClass(RemoteSelectionsDecorator, {
       decorations: (value) => value.decorations
     }),
     styles
@@ -934,7 +920,7 @@ var random = (min, max) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/code.ts
-import { ViewPlugin as ViewPlugin3, EditorView as EditorView4, Decoration as Decoration2 } from "@codemirror/view";
+import { ViewPlugin as ViewPlugin2, EditorView as EditorView4, Decoration as Decoration2 } from "@codemirror/view";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/styles/cursors.ts
@@ -1076,7 +1062,7 @@ var code2 = () => {
     return Decoration2.set(decorations);
   };
   return [
-    ViewPlugin3.fromClass(class {
+    ViewPlugin2.fromClass(class {
       constructor(view) {
         this.hasFocus = false;
         this.decorations = buildDecorations4(view);
@@ -1140,8 +1126,8 @@ var marks = {
   })
 };
 var setFocus = (view, thread) => {
-  const range = view.state.field(commentsStateField).ranges.find((range2) => range2.id === thread);
-  if (!range) {
+  const comment = view.state.field(commentsState).comments.find((range) => range.comment.id === thread);
+  if (!comment) {
     return;
   }
   view.dispatch({
@@ -1149,39 +1135,41 @@ var setFocus = (view, thread) => {
       active: thread
     }),
     selection: {
-      anchor: range.from
+      anchor: comment.range.from
     },
     scrollIntoView: true
   });
 };
-var setCommentRange = StateEffect2.define();
+var setComments = StateEffect2.define();
 var setSelection = StateEffect2.define();
 var setCommentState = StateEffect2.define();
-var commentsStateField = StateField2.define({
+var commentsState = StateField2.define({
   create: () => ({
-    ranges: []
+    comments: [],
+    selection: {}
   }),
   update: (value, tr) => {
-    const cursorConverter3 = tr.state.facet(Cursor.converter);
     for (const effect of tr.effects) {
       if (effect.is(setSelection)) {
         return {
           ...value,
-          ...effect.value
+          selection: effect.value
         };
       }
-      if (effect.is(setCommentRange)) {
-        const { comments: comments2 } = effect.value;
-        const ranges = comments2.map((comment) => {
-          const range = Cursor.getRangeFromCursor(cursorConverter3, comment.cursor);
+      if (effect.is(setComments)) {
+        const comments2 = effect.value.map((comment) => {
+          if (!comment.cursor) {
+            return void 0;
+          }
+          const range = Cursor.getRangeFromCursor(tr.state, comment.cursor);
           return range && {
-            ...comment,
-            ...range
+            comment,
+            range
           };
         }).filter(nonNullable);
         return {
           ...value,
-          ranges
+          comments: comments2
         };
       }
       if (effect.is(setCommentState)) {
@@ -1192,38 +1180,36 @@ var commentsStateField = StateField2.define({
   }
 });
 var highlightDecorations = EditorView5.decorations.compute([
-  commentsStateField
+  commentsState
 ], (state) => {
-  const { active, ranges } = state.field(commentsStateField);
-  const decorations = sortBy(ranges ?? [], (range) => range.from)?.flatMap((selection) => {
-    if (selection.from === selection.to) {
+  const { selection: { active }, comments: comments2 } = state.field(commentsState);
+  const decorations = sortBy(comments2 ?? [], (range) => range.range.from)?.flatMap((comment) => {
+    const range = comment.range;
+    if (!range || range.from === range.to) {
+      console.warn("Invalid range:", range);
       return void 0;
     }
-    const range = {
-      from: selection.from,
-      to: selection.to
-    };
-    if (selection.id === active) {
+    if (comment.comment.id === active) {
       return marks.highlightActive.range(range.from, range.to);
     } else {
       return marks.highlight.range(range.from, range.to);
     }
-  }).filter(nonNullable) ?? [];
+  }).filter(nonNullable);
   return Decoration3.set(decorations);
 });
 var trackPastedComments = (onUpdate) => {
   let tracked = null;
   const handleTrack = (event, view) => {
-    const comments2 = view.state.field(commentsStateField);
+    const comments2 = view.state.field(commentsState);
     const { main } = view.state.selection;
-    const selectedRanges = comments2.ranges.filter((range) => range.from >= main.from && range.to <= main.to && range.from < range.to);
+    const selectedRanges = comments2.comments.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,
+        comments: selectedRanges.map(({ comment, range }) => ({
+          id: comment.id,
           from: range.from - main.from,
           to: range.to - main.from
         }))
@@ -1250,18 +1236,14 @@ var trackPastedComments = (onUpdate) => {
             }
           });
           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);
-              }
+            state.facet(syncFacet)?.reconcile(view);
+            for (const moved of tracked.comments) {
+              const range = {
+                from: found + moved.from,
+                to: found + moved.to
+              };
+              const cursor = Cursor.getCursorFromRange(state, range);
+              onUpdate(moved.id, cursor);
             }
           }
           tracked = null;
@@ -1274,10 +1256,9 @@ var comments = (options = {}) => {
   const { key: shortcut = "meta-'" } = options;
   const handleSelect = debounce((state) => options.onSelect?.(state), 200);
   const createCommentThread = (view) => {
-    const cursorConverter3 = view.state.facet(Cursor.converter);
     invariant2(options.onCreate, void 0, {
       F: __dxlog_file3,
-      L: 264,
+      L: 262,
       S: void 0,
       A: [
         "options.onCreate",
@@ -1288,7 +1269,15 @@ var comments = (options = {}) => {
     if (from === to) {
       return false;
     }
-    const cursor = Cursor.getCursorFromRange(cursorConverter3, {
+    if (to === view.state.doc.length) {
+      view.dispatch({
+        changes: {
+          from: to,
+          insert: "\n"
+        }
+      });
+    }
+    const cursor = Cursor.getCursorFromRange(view.state, {
       from,
       to
     });
@@ -1309,7 +1298,7 @@ var comments = (options = {}) => {
     return false;
   };
   return [
-    commentsStateField,
+    commentsState,
     highlightDecorations,
     styles3,
     //
@@ -1318,6 +1307,7 @@ var comments = (options = {}) => {
     options.onCreate ? keymap3.of([
       {
         key: shortcut,
+        // TODO(burdon): Check if there's a better way?
         run: callbackWrapper(createCommentThread)
       }
     ]) : [],
@@ -1352,68 +1342,68 @@ var comments = (options = {}) => {
       hoverTime: 1e3
     }) : [],
     //
-    // Monitor cursor movement and text updates.
-    // TODO(burdon): Is there a better (finer grained) way to do this?
+    // Track deleted ranges and update ranges for decorations.
     //
     EditorView5.updateListener.of(({ view, state, changes }) => {
-      const cursorConverter3 = view.state.facet(Cursor.converter);
-      {
-        let mod = false;
-        const { active, ranges } = state.field(commentsStateField);
-        changes.iterChanges((from, to, from2, to2) => {
-          ranges.forEach((range) => {
-            if (from2 === to2) {
-              const newRange = Cursor.getRangeFromCursor(cursorConverter3, range.cursor);
-              if (!newRange || newRange.to - newRange.from === 0) {
-                options.onDelete?.(range.id);
-              }
-            }
-            if (from <= range.to) {
-              const newRange = Cursor.getRangeFromCursor(cursorConverter3, range.cursor);
-              Object.assign(range, newRange);
-              mod = true;
+      let mod = false;
+      const { comments: comments2, ...value } = state.field(commentsState);
+      changes.iterChanges((from, to, from2, to2) => {
+        comments2.forEach(({ comment, range }) => {
+          if (from2 === to2) {
+            const newRange = Cursor.getRangeFromCursor(view.state, comment.cursor);
+            if (!newRange || newRange.to - newRange.from === 0) {
+              options.onDelete?.(comment.id);
             }
-          });
+          }
+          if (from <= range.to) {
+            const newRange = Cursor.getRangeFromCursor(view.state, comment.cursor);
+            Object.assign(range, newRange);
+            mod = true;
+          }
+        });
+      });
+      if (mod) {
+        view.dispatch({
+          effects: setCommentState.of({
+            comments: comments2,
+            ...value
+          })
         });
-        if (mod) {
-          view.dispatch({
-            effects: setCommentState.of({
-              active,
-              ranges
-            })
-          });
-        }
       }
-      {
-        const { head } = state.selection.main;
-        let min = Infinity;
-        const { active, closest, ranges } = state.field(commentsStateField);
-        const selected = {
-          active: void 0,
-          closest: void 0
-        };
-        ranges.forEach((comment) => {
-          const d = Math.min(Math.abs(head - comment.from), Math.abs(head - comment.to));
-          if (head >= comment.from && head <= comment.to) {
-            selected.active = comment.id;
-          }
+    }),
+    //
+    // Track selection/proximity.
+    //
+    EditorView5.updateListener.of(({ view, state, changes }) => {
+      let min = Infinity;
+      const { selection: { active, closest }, comments: comments2 } = state.field(commentsState);
+      const { head } = state.selection.main;
+      const selection = {};
+      comments2.forEach(({ comment, range }) => {
+        if (head >= range.from && head <= range.to) {
+          selection.active = comment.id;
+          selection.closest = void 0;
+        }
+        if (!selection.active) {
+          const d = Math.min(Math.abs(head - range.from), Math.abs(head - range.to));
           if (d < min) {
-            selected.closest = comment.id;
+            selection.closest = comment.id;
             min = d;
           }
-        });
-        if (selected.active !== active || selected.closest !== closest) {
-          view.dispatch({
-            effects: setSelection.of(selected)
-          });
-          handleSelect({
-            ...selected,
-            ranges: ranges.map((range) => ({
-              ...range,
-              location: view.coordsAtPos(range.from)
-            }))
-          });
         }
+      });
+      if (selection.active !== active || selection.closest !== closest) {
+        view.dispatch({
+          effects: setSelection.of(selection)
+        });
+        handleSelect({
+          selection,
+          comments: comments2.map(({ comment, range }) => ({
+            comment,
+            range,
+            location: view.coordsAtPos(range.from)
+          }))
+        });
       }
     }),
     options.onUpdate ? trackPastedComments(options.onUpdate) : []
@@ -1421,7 +1411,7 @@ var comments = (options = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/hr.ts
-import { Decoration as Decoration4, EditorView as EditorView6, MatchDecorator, ViewPlugin as ViewPlugin4, WidgetType as WidgetType2 } from "@codemirror/view";
+import { Decoration as Decoration4, EditorView as EditorView6, MatchDecorator, ViewPlugin as ViewPlugin3, WidgetType as WidgetType2 } from "@codemirror/view";
 var styles4 = EditorView6.baseTheme({
   "& .cm-hr": {
     // TODO(burdon): ???
@@ -1452,7 +1442,7 @@ var placeholderMatcher = new MatchDecorator({
 });
 var hr = () => [
   styles4,
-  ViewPlugin4.fromClass(class {
+  ViewPlugin3.fromClass(class {
     constructor(view) {
       this.rules = placeholderMatcher.createDeco(view);
     }
@@ -1539,11 +1529,11 @@ 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 { hoverTooltip as hoverTooltip2, Decoration as Decoration6, ViewPlugin as ViewPlugin5, WidgetType as WidgetType4 } from "@codemirror/view";
+import { hoverTooltip as hoverTooltip2, Decoration as Decoration6, ViewPlugin as ViewPlugin4, WidgetType as WidgetType4 } from "@codemirror/view";
 import { tooltipContent } from "@dxos/react-ui-theme";
 var link = (options = {}) => {
   const extensions = [
-    ViewPlugin5.fromClass(class {
+    ViewPlugin4.fromClass(class {
       constructor(view) {
         this.decorations = buildDecorations2(view, options);
       }
@@ -2068,7 +2058,7 @@ var TableWidget = class extends WidgetType5 {
 // packages/ui/react-ui-editor/src/extensions/tasklist.ts
 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";
+import { EditorView as EditorView11, Decoration as Decoration8, WidgetType as WidgetType6, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
 var CheckboxWidget = class extends WidgetType6 {
   constructor(_checked) {
     super();
@@ -2112,7 +2102,7 @@ var uncheckedDeco = Decoration8.replace({
   widget: new CheckboxWidget(false)
 });
 var tasklist = (options = {}) => {
-  return ViewPlugin6.fromClass(class {
+  return ViewPlugin5.fromClass(class {
     constructor(view) {
       this.decorations = buildDecorations3(view);
     }
@@ -2467,25 +2457,20 @@ var EditorModes = [
   "default",
   "vim"
 ];
-var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, autofocus, readonly, selection, comments: comments2, extensions = [], editorMode, theme, slots = defaultSlots }, forwardedRef) => {
-  const tabsterDOMAttribute = useFocusableGroup({
-    tabBehavior: "limited"
-  });
-  const { themeMode } = useThemeContext();
-  const rootRef = useRef(null);
-  const [view, setView] = useState(null);
-  useImperativeHandle(forwardedRef, () => view, [
-    view
-  ]);
+var useComments = (view, comments2) => {
   useEffect(() => {
-    if (autofocus) {
-      view?.focus();
+    if (view && comments2 !== void 0) {
+      view.dispatch({
+        effects: setComments.of(comments2)
+      });
     }
   }, [
-    autofocus,
-    view
+    view,
+    comments2
   ]);
-  const { awareness: awareness2, peer } = model;
+};
+var useAwareness = ({ awareness: awareness2, peer }) => {
+  const { themeMode } = useThemeContext();
   useEffect(() => {
     if (awareness2 && peer) {
       awareness2.setLocalStateField("user", {
@@ -2506,19 +2491,27 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, autofocus, readonly, s
     peer,
     themeMode
   ]);
+};
+var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, autofocus, readonly, selection, comments: comments2, extensions = [], editorMode, theme, slots = defaultSlots }, forwardedRef) => {
+  const tabsterDOMAttribute = useFocusableGroup({
+    tabBehavior: "limited"
+  });
+  const { themeMode } = useThemeContext();
+  const rootRef = useRef(null);
+  const [view, setView] = useState(null);
+  useImperativeHandle(forwardedRef, () => view, [
+    view
+  ]);
   useEffect(() => {
-    if (view && comments2 !== void 0) {
-      view.dispatch({
-        effects: setCommentRange.of({
-          model,
-          comments: comments2
-        })
-      });
+    if (autofocus) {
+      view?.focus();
     }
   }, [
     view,
-    comments2
+    autofocus
   ]);
+  useAwareness(model);
+  useComments(view, comments2);
   useEffect(() => {
     if (!model || !rootRef.current) {
       return;
@@ -2529,14 +2522,14 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, autofocus, readonly, s
       selection,
       extensions: [
         readonly && EditorState2.readOnly.of(readonly),
-        // TODO(burdon): Factor out VIM mode? (manage via MarkdownPlugin).
-        editorMode === "vim" && vim(),
         // Theme.
         // TODO(burdon): Make theme configurable.
         EditorView12.baseTheme(defaultTheme),
         EditorView12.theme(theme ?? {}),
         EditorView12.darkTheme.of(themeMode === "dark"),
-        // Storage and replication.
+        // TODO(burdon): Factor out VIM mode? (manage via MarkdownPlugin).
+        editorMode === "vim" && vim(),
+        // Storage and replication (NOTE: must come before other extensions).
         model.extension,
         // Custom.
         ...extensions
@@ -2545,7 +2538,15 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, autofocus, readonly, s
     view?.destroy();
     const newView = new EditorView12({
       parent: rootRef.current,
-      state
+      state,
+      // NOTE: Uncomment to spy on all transactions.
+      // https://codemirror.net/docs/ref/#view.EditorView.dispatch
+      dispatch: (transaction, view2) => {
+        view2.update([
+          transaction
+        ]);
+        view2.state.facet(syncFacet)?.reconcile(view2);
+      }
     });
     setView(newView);
     return () => {
@@ -2563,7 +2564,9 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, autofocus, readonly, s
     const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
     switch (key) {
       case "Escape": {
-        editorMode === "vim" && (altKey || shiftKey || metaKey || ctrlKey) && rootRef.current?.focus();
+        if (editorMode === "vim" && (altKey || shiftKey || metaKey || ctrlKey)) {
+          rootRef.current?.focus();
+        }
         break;
       }
     }
@@ -2741,10 +2744,50 @@ var SpaceAwarenessProvider = class {
   }
 };
 
-// packages/ui/react-ui-editor/src/hooks/useTextModel.ts
+// packages/ui/react-ui-editor/src/hooks/defs.ts
 import { StateField as StateField5 } from "@codemirror/state";
-import { useEffect as useEffect2, useState as useState2 } from "react";
-import { isAutomergeObject } from "@dxos/react-client/echo";
+var modelState = StateField5.define({
+  create: () => void 0,
+  update: (model) => model
+});
+
+// packages/ui/react-ui-editor/src/hooks/automerge.ts
+var createAutomergeModel = ({ space, identity, text }) => {
+  const obj = text;
+  const doc = getRawDoc(obj, [
+    obj.field
+  ]);
+  const awarenessProvider = space && new SpaceAwarenessProvider({
+    space,
+    channel: `automerge.awareness.${obj.id}`,
+    info: {
+      displayName: identity?.profile?.displayName ?? "",
+      color: cursorColor.color,
+      lightColor: cursorColor.light
+    },
+    peerId: identity?.identityKey.toHex() ?? "Anonymous"
+  });
+  const model = {
+    id: obj.id,
+    content: doc,
+    text: () => get4(doc.handle.docSync(), doc.path),
+    // TODO(burdon): https://automerge.org/automerge/api-docs/js/functions/next.getCursor.html
+    extension: [
+      modelState.init(() => model),
+      automerge3({
+        handle: doc.handle,
+        path: doc.path
+      }),
+      awarenessProvider && AwarenessProvider.of(awarenessProvider),
+      awareness()
+    ].filter(isNotNullOrUndefined),
+    peer: identity ? {
+      id: identity.identityKey.toHex(),
+      name: identity.profile?.displayName
+    } : void 0
+  };
+  return model;
+};
 
 // packages/ui/react-ui-editor/src/hooks/yjs.ts
 import * as decoding from "lib0/decoding";
@@ -2757,7 +2800,7 @@ var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src
 var createYjsModel = ({ identity, space, text }) => {
   invariant4(text?.doc && text?.content, void 0, {
     F: __dxlog_file5,
-    L: 21,
+    L: 22,
     S: void 0,
     A: [
       "text?.doc && text?.content",
@@ -2822,7 +2865,7 @@ var YAwarenessProvider = class extends Observable {
       origin
     }, {
       F: __dxlog_file5,
-      L: 100,
+      L: 101,
       S: this,
       C: (f, a) => f(...a)
     });
@@ -2835,7 +2878,7 @@ var YAwarenessProvider = class extends Observable {
   _handleSpaceMessage({ payload }) {
     log3("space message", payload, {
       F: __dxlog_file5,
-      L: 109,
+      L: 110,
       S: this,
       C: (f, a) => f(...a)
     });
@@ -2879,10 +2922,8 @@ var YAwarenessProvider = class extends Observable {
 };
 
 // packages/ui/react-ui-editor/src/hooks/useTextModel.ts
-var modelState = StateField5.define({
-  create: () => void 0,
-  update: (model) => model
-});
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { isAutomergeObject } from "@dxos/react-client/echo";
 var useTextModel = (props) => {
   const { identity, space, text } = props;
   const [model, setModel] = useState2();
@@ -2903,44 +2944,6 @@ var createModel = (props) => {
     return void 0;
   }
 };
-
-// packages/ui/react-ui-editor/src/hooks/automerge.ts
-var createAutomergeModel = ({ space, identity, text }) => {
-  const obj = text;
-  const doc = getRawDoc(obj, [
-    obj.field
-  ]);
-  const awarenessProvider = space && new SpaceAwarenessProvider({
-    space,
-    channel: `automerge.awareness.${obj.id}`,
-    info: {
-      displayName: identity?.profile?.displayName ?? "",
-      color: cursorColor.color,
-      lightColor: cursorColor.light
-    },
-    peerId: identity?.identityKey.toHex() ?? "Anonymous"
-  });
-  const model = {
-    id: obj.id,
-    content: doc,
-    text: () => get4(doc.handle.docSync(), doc.path),
-    // TODO(burdon): https://automerge.org/automerge/api-docs/js/functions/next.getCursor.html
-    extension: [
-      modelState.init(() => model),
-      automerge3({
-        handle: doc.handle,
-        path: doc.path
-      }),
-      awarenessProvider && AwarenessProvider.of(awarenessProvider),
-      awareness()
-    ].filter(isNotNullOrUndefined),
-    peer: identity ? {
-      id: identity.identityKey.toHex(),
-      name: identity.profile?.displayName
-    } : void 0
-  };
-  return model;
-};
 export {
   AwarenessProvider,
   BaseTextEditor,
@@ -2984,14 +2987,17 @@ export {
   mention,
   modelState,
   outliner,
-  setCommentRange,
+  setComments,
   setFocus,
   setSelection,
+  syncFacet,
   table,
   tags2 as tags,
   tasklist,
   textTheme,
   typewriter,
+  useAwareness,
+  useComments,
   useTextModel,
   yjs
 };