@dxos/react-ui-editor 0.3.11-main.279d9e6 → 0.3.11-main.2cb95a4

package/dist/lib/browser/index.mjs

@@ -7,52 +7,56 @@ import { tags as tags2 } from "@lezer/highlight";
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
 import { EditorState as EditorState2 } from "@codemirror/state";
-import { EditorView as EditorView12 } from "@codemirror/view";
+import { EditorView as EditorView13 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import { vim } from "@replit/codemirror-vim";
 import defaultsDeep2 from "lodash.defaultsdeep";
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from "react";
-import { generateName } from "@dxos/display-name";
-import { useThemeContext } from "@dxos/react-ui";
-import { getColorForValue, inputSurface, mx as mx3 } from "@dxos/react-ui-theme";
+import React, { forwardRef, useCallback, useEffect as useEffect3, useImperativeHandle, useRef, useState } from "react";
+import { log as log2 } from "@dxos/log";
+import { useThemeContext as useThemeContext2 } from "@dxos/react-ui";
+import { inputSurface, mx as mx3 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/extensions/autocomplete.ts
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
+import { markdownLanguage } from "@codemirror/lang-markdown";
 import { keymap } from "@codemirror/view";
 var autocomplete = ({ onSearch }) => {
   return [
     // https://codemirror.net/docs/ref/#view.keymap
     // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
+    // TODO(burdon): Set custom keymap.
     keymap.of(completionKeymap),
     // https://codemirror.net/examples/autocompletion
     // https://codemirror.net/docs/ref/#autocomplete.autocompletion
     autocompletion({
-      // TODO(burdon): Set custom keymap.
+      activateOnTyping: true,
+      // closeOnBlur: false,
       // defaultKeymap: false,
-      // Don't start unless key press.
-      activateOnTyping: false,
-      // TODO(burdon): Option to create new page?
-      // TODO(burdon): Optional decoration via addToOptions
-      override: [
-        (context) => {
-          const match = context.matchBefore(/\w*/);
-          if (!match || match.from === match.to && !context.explicit) {
-            return null;
-          }
-          return {
-            from: match.from,
-            options: onSearch(match.text.toLowerCase())
-          };
+      // TODO(burdon): Styles/fragments.
+      tooltipClass: () => "shadow rounded"
+    }),
+    // TODO(burdon): Option to create new page?
+    // TODO(burdon): Optional decoration via addToOptions
+    markdownLanguage.data.of({
+      autocomplete: (context) => {
+        const match = context.matchBefore(/\w*/);
+        if (!match || match.from === match.to && !context.explicit) {
+          return null;
         }
-      ]
+        return {
+          from: match.from,
+          options: onSearch(match.text.toLowerCase())
+        };
+      }
     })
   ];
 };
 
 // packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
-import { Facet as Facet2, StateField } from "@codemirror/state";
-import { ViewPlugin } from "@codemirror/view";
+import { StateField } from "@codemirror/state";
+import { EditorView, ViewPlugin } from "@codemirror/view";
 import { next as A } from "@dxos/automerge/automerge";
+import { invariant } from "@dxos/invariant";
 
 // packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts
 import get from "lodash.get";
@@ -93,12 +97,12 @@ var cursorConverter = (handle, path) => ({
 // packages/ui/react-ui-editor/src/extensions/automerge/defs.ts
 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);
 
 // packages/ui/react-ui-editor/src/extensions/automerge/semaphore.ts
@@ -236,85 +240,96 @@ var charPath = (textPath, candidatePath) => {
 
 // packages/ui/react-ui-editor/src/extensions/automerge/semaphore.ts
 var PatchSemaphore = class {
-  constructor(_field) {
-    this._field = _field;
+  // prettier-ignore
+  constructor(_handle, _state) {
+    this._handle = _handle;
+    this._state = _state;
     this._inReconcile = false;
-    this._queue = [];
-    this.reconcile = (handle, 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, handle, transactions, view.state);
-      if (newHeads === null || newHeads === void 0) {
-        newHeads = automerge2.getHeads(handle.docSync());
-      }
-      const diff = automerge2.equals(oldHeads, newHeads) ? [] : automerge2.diff(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._state);
+    const oldHeads = getLastHeads(view.state, this._state);
+    let selection = view.state.selection;
+    const transactions = view.state.field(this._state).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._state, 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/util/cursor.ts
+// packages/ui/react-ui-editor/src/extensions/cursor.ts
 import { Facet } from "@codemirror/state";
-var DEFAULT_CURSOR_CONVERTER = {
+var defaultCursorConverter = {
   toCursor: (position) => position.toString(),
   fromCursor: (cursor) => parseInt(cursor)
 };
-var CursorConverter = Facet.define({
-  combine: (providers) => providers[0] ?? DEFAULT_CURSOR_CONVERTER
-});
-
-// packages/ui/react-ui-editor/src/util/util.ts
-import { log } from "@dxos/log";
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util/util.ts";
-var callbackWrapper = (fn) => (...args) => {
-  try {
-    return fn(...args);
-  } catch (error) {
-    log.catch(error, void 0, {
-      F: __dxlog_file,
-      L: 16,
-      S: void 0,
-      C: (f, a) => f(...a)
+var Cursor = class _Cursor {
+  static {
+    this.converter = Facet.define({
+      combine: (providers) => providers[0] ?? defaultCursorConverter
     });
   }
+  static {
+    this.getCursorFromRange = (state, range) => {
+      const cursorConverter3 = state.facet(_Cursor.converter);
+      const from = cursorConverter3.toCursor(range.from);
+      const to = cursorConverter3.toCursor(range.to, -1);
+      return [
+        from,
+        to
+      ].join(":");
+    };
+  }
+  static {
+    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]);
+      return from !== void 0 && to !== void 0 ? {
+        from,
+        to
+      } : void 0;
+    };
+  }
 };
 
 // packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
-var semaphoreFacet = Facet2.define({
-  combine: (values) => values.at(-1)
-});
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts";
 var automerge3 = ({ handle, path }) => {
-  const stateField = StateField.define({
+  const state = 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) {
@@ -333,41 +348,50 @@ var automerge3 = ({ handle, path }) => {
       return result;
     }
   });
-  const semaphore = new PatchSemaphore(stateField);
-  const viewPlugin = ViewPlugin.fromClass(class AutomergeCodemirrorViewPlugin {
-    constructor(_view) {
-      this._view = _view;
-      this._handleChange = () => {
-        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(handle, this._view);
+  const semaphore = new PatchSemaphore(handle, state);
+  return [
+    Cursor.converter.of(cursorConverter(handle, path)),
+    // Reconcile external updates.
+    ViewPlugin.fromClass(class {
+      constructor(_view) {
+        this._view = _view;
+        invariant(this._view, void 0, {
+          F: __dxlog_file,
+          L: 66,
+          S: this,
+          A: [
+            "this._view",
+            ""
+          ]
         });
+        handle.addListener("change", this._handleChange.bind(this));
       }
-    }
-    destroy() {
-      handle.addListener("change", this._handleChange);
-    }
-  });
-  return {
-    extension: [
-      CursorConverter.of(cursorConverter(handle, path)),
-      semaphoreFacet.of(semaphore),
-      stateField,
-      viewPlugin
-    ]
-  };
+      destroy() {
+        handle.removeListener("change", this._handleChange.bind(this));
+      }
+      _handleChange() {
+        semaphore.reconcile(this._view);
+      }
+    }),
+    // Reconcile local updates.
+    EditorView.updateListener.of(({ view, changes }) => {
+      if (!changes.empty) {
+        semaphore.reconcile(view);
+      }
+    }),
+    state
+  ];
 };
 
 // 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 { Annotation as Annotation2, Facet as Facet2, RangeSet } from "@codemirror/state";
+import { Decoration, EditorView as EditorView2, ViewPlugin as ViewPlugin2, WidgetType } from "@codemirror/view";
+import { useEffect } from "react";
 import { Event } from "@dxos/async";
 import { Context } from "@dxos/context";
+import { generateName } from "@dxos/display-name";
+import { useThemeContext } from "@dxos/react-ui";
+import { getColorForValue } from "@dxos/react-ui-theme";
 var dummyProvider = {
   remoteStateChange: new Event(),
   open: () => {
@@ -378,7 +402,7 @@ var dummyProvider = {
   },
   getRemoteStates: () => []
 };
-var AwarenessProvider = Facet3.define({
+var AwarenessProvider = Facet2.define({
   combine: (providers) => providers[0] ?? dummyProvider
 });
 var RemoteSelectionChangedAnnotation = Annotation2.define();
@@ -391,13 +415,36 @@ var awareness = (provider = dummyProvider) => {
     styles
   ];
 };
+var useAwareness = ({ awareness: awareness2, peer }) => {
+  const { themeMode } = useThemeContext();
+  useEffect(() => {
+    if (awareness2 && peer) {
+      awareness2.setLocalStateField("user", {
+        name: peer.name ?? generateName(peer.id),
+        color: getColorForValue({
+          value: peer.id,
+          type: "color"
+        }),
+        colorLight: getColorForValue({
+          value: peer.id,
+          themeMode,
+          type: "highlight"
+        })
+      });
+    }
+  }, [
+    awareness2,
+    peer,
+    themeMode
+  ]);
+};
 var RemoteSelectionsDecorator = class {
   constructor(view) {
     this.decorations = RangeSet.of([]);
     this._ctx = new Context();
     this._lastAnchor = void 0;
     this._lastHead = void 0;
-    this._cursorConverter = view.state.facet(CursorConverter);
+    this._cursorConverter = view.state.facet(Cursor.converter);
     this._provider = view.state.facet(AwarenessProvider);
     this._provider.open();
     this._provider.remoteStateChange.on(this._ctx, () => {
@@ -452,7 +499,7 @@ var RemoteSelectionsDecorator = class {
             attributes: {
               style: `background-color: ${lightColor}`
             },
-            class: "cm-ySelection"
+            class: "cm-collab-selection"
           })
         });
       } else {
@@ -463,7 +510,7 @@ var RemoteSelectionsDecorator = class {
             attributes: {
               style: `background-color: ${color}`
             },
-            class: "cm-ySelection"
+            class: "cm-collab-selection"
           })
         });
         decorations.push({
@@ -473,7 +520,7 @@ var RemoteSelectionsDecorator = class {
             attributes: {
               style: `background-color: ${color}`
             },
-            class: "cm-ySelection"
+            class: "cm-collab-selection"
           })
         });
         for (let i = startLine.number + 1; i < endLine.number; i++) {
@@ -484,7 +531,7 @@ var RemoteSelectionsDecorator = class {
             value: Decoration.line({
               attributes: {
                 style: `background-color: ${color}`,
-                class: "cm-yLineSelection"
+                class: "cm-collab-selectionLine"
               }
             })
           });
@@ -504,23 +551,21 @@ var RemoteSelectionsDecorator = class {
   }
 };
 var RemoteCaretWidget = class extends WidgetType {
-  constructor(name, color) {
+  constructor(_name, _color) {
     super();
-    this.name = name;
-    this.color = color;
-    this.name = name;
-    this.color = color;
+    this._name = _name;
+    this._color = _color;
   }
   toDOM() {
     const span = document.createElement("span");
-    span.className = "cm-ySelectionCaret";
-    span.style.backgroundColor = this.color;
-    span.style.borderColor = this.color;
+    span.className = "cm-collab-selectionCaret";
+    span.style.backgroundColor = this._color;
+    span.style.borderColor = this._color;
     const dot = document.createElement("div");
-    dot.className = "cm-ySelectionCaretDot";
+    dot.className = "cm-collab-selectionCaretDot";
     const info = document.createElement("div");
-    info.className = "cm-ySelectionInfo";
-    info.innerText = this.name;
+    info.className = "cm-collab-selectionInfo";
+    info.innerText = this._name;
     span.appendChild(document.createTextNode("\u2060"));
     span.appendChild(dot);
     span.appendChild(document.createTextNode("\u2060"));
@@ -528,15 +573,12 @@ var RemoteCaretWidget = class extends WidgetType {
     span.appendChild(document.createTextNode("\u2060"));
     return span;
   }
-  eq(widget) {
-    return widget.color === this.color;
-  }
-  compare(widget) {
-    return widget.color === this.color;
-  }
   updateDOM() {
     return false;
   }
+  eq(widget) {
+    return widget._color === this._color;
+  }
   get estimatedHeight() {
     return -1;
   }
@@ -544,13 +586,13 @@ var RemoteCaretWidget = class extends WidgetType {
     return true;
   }
 };
-var styles = EditorView.baseTheme({
-  ".cm-ySelection": {},
-  ".cm-yLineSelection": {
+var styles = EditorView2.baseTheme({
+  ".cm-collab-selection": {},
+  ".cm-collab-selectionLine": {
     padding: 0,
     margin: "0px 2px 0px 4px"
   },
-  ".cm-ySelectionCaret": {
+  ".cm-collab-selectionCaret": {
     position: "relative",
     borderLeft: "1px solid black",
     borderRight: "1px solid black",
@@ -559,7 +601,7 @@ var styles = EditorView.baseTheme({
     boxSizing: "border-box",
     display: "inline"
   },
-  ".cm-ySelectionCaretDot": {
+  ".cm-collab-selectionCaretDot": {
     borderRadius: "50%",
     position: "absolute",
     width: ".4em",
@@ -570,11 +612,11 @@ var styles = EditorView.baseTheme({
     transition: "transform .3s ease-in-out",
     boxSizing: "border-box"
   },
-  ".cm-ySelectionCaret:hover > .cm-ySelectionCaretDot": {
+  ".cm-collab-selectionCaret:hover > .cm-collab-selectionCaretDot": {
     transformOrigin: "bottom center",
     transform: "scale(0)"
   },
-  ".cm-ySelectionInfo": {
+  ".cm-collab-selectionInfo": {
     position: "absolute",
     top: "-1.05em",
     left: "-1px",
@@ -590,12 +632,12 @@ 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"
   },
-  ".cm-ySelectionCaret:hover > .cm-ySelectionInfo": {
+  ".cm-collab-selectionCaret:hover > .cm-collab-selectionInfo": {
     opacity: 1,
     transitionDelay: "0s"
   }
@@ -603,25 +645,27 @@ var styles = EditorView.baseTheme({
 
 // packages/ui/react-ui-editor/src/extensions/basic.ts
 import { closeBrackets } from "@codemirror/autocomplete";
+import { history } from "@codemirror/commands";
 import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
 import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
-import { drawSelection, EditorView as EditorView2, placeholder } from "@codemirror/view";
-var basicBundle = ({ readonly, themeMode, placeholder: _placeholder }) => [
-  EditorView2.lineWrapping,
-  // TODO(burdon): Compare with minimalSetup.
+import { drawSelection, EditorView as EditorView3, highlightActiveLine, placeholder } from "@codemirror/view";
+var basicBundle = ({ themeMode, placeholder: _placeholder, multiline = true }) => [
+  multiline ? EditorView3.lineWrapping : [],
   // https://codemirror.net/docs/ref/#codemirror.minimalSetup
   bracketMatching(),
   closeBrackets(),
   drawSelection(),
-  _placeholder && placeholder(_placeholder),
-  // TODO(burdon): Is this required?
+  highlightActiveLine(),
+  history(),
+  _placeholder ? placeholder(_placeholder) : [],
+  // https://github.com/codemirror/theme-one-dark
   themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)
-].filter(Boolean);
+];
 
 // packages/ui/react-ui-editor/src/extensions/blast.ts
-import { EditorView as EditorView3, keymap as keymap2 } from "@codemirror/view";
+import { EditorView as EditorView4, keymap as keymap2 } from "@codemirror/view";
 import defaultsDeep from "lodash.defaultsdeep";
-import { invariant } from "@dxos/invariant";
+import { invariant as invariant2 } from "@dxos/invariant";
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
 var defaultOptions = {
   effect: 2,
@@ -667,7 +711,7 @@ var blast = (options = defaultOptions) => {
   };
   return [
     // Cursor moved.
-    EditorView3.updateListener.of((update2) => {
+    EditorView4.updateListener.of((update2) => {
       if (blaster?.node !== update2.view.scrollDOM) {
         if (blaster) {
           blaster.destroy();
@@ -748,7 +792,7 @@ var Blaster = class {
     return this._node;
   }
   initialize() {
-    invariant(!this._canvas && !this._ctx, void 0, {
+    invariant2(!this._canvas && !this._ctx, void 0, {
       F: __dxlog_file2,
       L: 138,
       S: this,
@@ -785,7 +829,7 @@ var Blaster = class {
     }
   }
   start() {
-    invariant(this._canvas && this._ctx, void 0, {
+    invariant2(this._canvas && this._ctx, void 0, {
       F: __dxlog_file2,
       L: 177,
       S: this,
@@ -929,7 +973,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 ViewPlugin3, EditorView as EditorView5, Decoration as Decoration2 } from "@codemirror/view";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/styles/cursors.ts
@@ -1020,7 +1064,7 @@ var getToken = (path, defaultValue = void 0) => get2(tokens, path, defaultValue)
 
 // packages/ui/react-ui-editor/src/extensions/code.ts
 var CODE_REGEX = /```[\s\S]*?```/gs;
-var styles2 = EditorView4.baseTheme({
+var styles2 = EditorView5.baseTheme({
   "& .cm-codeblock": {
     fontFamily: getToken("fontFamily.mono", []).join(",")
   },
@@ -1054,20 +1098,18 @@ var getLineRange = (lines, from, to) => {
   ];
 };
 var code2 = () => {
-  const getDecorations = (view) => {
+  const buildDecorations5 = (view) => {
     const decorations = [];
-    if (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);
@@ -1075,11 +1117,16 @@ var code2 = () => {
   return [
     ViewPlugin3.fromClass(class {
       constructor(view) {
-        this.decorations = getDecorations(view);
+        this.hasFocus = false;
+        this.decorations = buildDecorations5(view);
       }
       update(update2) {
-        if (update2.docChanged || update2.viewportChanged) {
-          this.decorations = getDecorations(update2.view);
+        if (
+          // TODO(burdon): Generalize for other extensions.
+          this.hasFocus !== update2.view.hasFocus || update2.startState.readOnly !== update2.view.state.readOnly || update2.docChanged || update2.viewportChanged
+        ) {
+          this.hasFocus = update2.view.hasFocus;
+          this.decorations = buildDecorations5(update2.view);
         }
       }
     }, {
@@ -1091,23 +1138,51 @@ var code2 = () => {
 
 // packages/ui/react-ui-editor/src/extensions/comments.ts
 import { StateEffect as StateEffect2, StateField as StateField2 } from "@codemirror/state";
-import { hoverTooltip, keymap as keymap3, Decoration as Decoration3, EditorView as EditorView5, MatchDecorator, ViewPlugin as ViewPlugin4, WidgetType as WidgetType2 } from "@codemirror/view";
+import { hoverTooltip, keymap as keymap3, Decoration as Decoration3, EditorView as EditorView6 } from "@codemirror/view";
 import sortBy from "lodash.sortby";
+import { useEffect as useEffect2 } from "react";
 import { debounce } from "@dxos/async";
-import { invariant as invariant2 } from "@dxos/invariant";
-import { log as log2 } from "@dxos/log";
+import { invariant as invariant3 } from "@dxos/invariant";
 import { nonNullable } from "@dxos/util";
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
-var styles3 = EditorView5.baseTheme({
-  "& .cm-bookmark": {
-    cursor: "pointer",
-    margin: "4px",
-    padding: "4px",
-    backgroundColor: "yellow"
-  },
-  "& .cm-bookmark-selected": {
-    backgroundColor: "orange"
-  },
+
+// packages/ui/react-ui-editor/src/util.ts
+import { log } from "@dxos/log";
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util.ts";
+var callbackWrapper = (fn) => (...args) => {
+  try {
+    return fn(...args);
+  } catch (err) {
+    log.catch(err, void 0, {
+      F: __dxlog_file3,
+      L: 18,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+  }
+};
+var logChanges = (trs) => {
+  const changes = trs.flatMap((tr) => {
+    if (tr.changes.empty) {
+      return void 0;
+    }
+    const changes2 = [];
+    tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => changes2.push(JSON.stringify({
+      fromA,
+      toA,
+      fromB,
+      toB,
+      inserted: inserted.toString()
+    })));
+    return changes2;
+  }).filter(Boolean);
+  if (changes.length) {
+    console.log("changes", changes);
+  }
+};
+
+// packages/ui/react-ui-editor/src/extensions/comments.ts
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
+var styles3 = EditorView6.baseTheme({
   "& .cm-comment": {
     backgroundColor: getToken("extend.colors.yellow.50")
   },
@@ -1123,49 +1198,59 @@ var marks = {
     class: "cm-comment-active"
   })
 };
-var setFocus = (view, thread) => {
-  const range = view.state.field(commentsStateField).ranges.find((range2) => range2.id === thread);
-  if (!range) {
+var setFocus = (view, id, center = true) => {
+  const comment = view.state.field(commentsState).comments.find((range2) => range2.comment.id === id);
+  if (!comment?.comment.cursor) {
     return;
   }
-  view.dispatch({
-    effects: setSelection.of({
-      active: thread
-    }),
-    selection: {
-      anchor: range.from
-    },
-    scrollIntoView: true
-  });
+  const range = Cursor.getRangeFromCursor(view.state, comment.comment.cursor);
+  if (range) {
+    view.dispatch({
+      selection: {
+        anchor: range.from
+      },
+      effects: [
+        //
+        EditorView6.scrollIntoView(range.from, center ? {
+          y: "center"
+        } : void 0),
+        setSelection.of({
+          active: id
+        })
+      ]
+    });
+  }
 };
-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(CursorConverter);
     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 = 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)) {
@@ -1175,78 +1260,109 @@ var commentsStateField = StateField2.define({
     return value;
   }
 });
-var highlightDecorations = EditorView5.decorations.compute([
-  commentsStateField
+var highlightDecorations = EditorView6.decorations.compute([
+  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 BookmarkWidget = class extends WidgetType2 {
-  constructor(_anchor, _id, _handleClick) {
-    super();
-    this._anchor = _anchor;
-    this._id = _id;
-    this._handleClick = _handleClick;
-    invariant2(this._id, void 0, {
-      F: __dxlog_file3,
-      L: 168,
-      S: this,
-      A: [
-        "this._id",
-        ""
-      ]
-    });
-  }
-  eq(other) {
-    return this._anchor === other._anchor && this._id === other._id;
-  }
-  toDOM() {
-    const span = document.createElement("span");
-    span.className = "cm-bookmark";
-    span.textContent = "\u203B";
-    if (this._handleClick) {
-      span.onclick = () => this._handleClick();
+var trackPastedComments = (onUpdate) => {
+  let tracked = null;
+  const handleTrack = (event, view) => {
+    const comments2 = view.state.field(commentsState);
+    const { main } = view.state.selection;
+    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(({ comment, range }) => ({
+          id: comment.id,
+          from: range.from - main.from,
+          to: range.to - main.from
+        }))
+      };
     }
-    return span;
-  }
+  };
+  return [
+    EditorView6.domEventHandlers({
+      cut: handleTrack,
+      copy: handleTrack
+    }),
+    // Handle paste.
+    EditorView6.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) {
+            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;
+        }
+      }
+    })
+  ];
 };
 var comments = (options = {}) => {
+  const { key: shortcut = "meta-'" } = options;
   const handleSelect = debounce((state) => options.onSelect?.(state), 200);
   const createCommentThread = (view) => {
-    const cursorConverter3 = view.state.facet(CursorConverter);
-    invariant2(options.onCreate, void 0, {
-      F: __dxlog_file3,
-      L: 224,
+    invariant3(options.onCreate, void 0, {
+      F: __dxlog_file4,
+      L: 259,
       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;
     }
-    const relPos = getCursorFromRange(cursorConverter3, {
+    if (to === view.state.doc.length) {
+      view.dispatch({
+        changes: {
+          from: to,
+          insert: "\n"
+        }
+      });
+    }
+    const cursor = Cursor.getCursorFromRange(view.state, {
       from,
       to
     });
-    if (relPos) {
-      const id = callbackWrapper(options.onCreate)(relPos);
+    if (cursor) {
+      const id = options.onCreate?.(cursor, view.coordsAtPos(from));
       if (id) {
         view.dispatch({
           effects: setSelection.of({
@@ -1256,53 +1372,13 @@ 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;
       }
     }
     return false;
   };
-  const bookmarksViewPlugin = ViewPlugin4.fromClass(class BookmarkViewPlugin {
-    static {
-      // Match markdown footnotes (option).
-      // https://www.markdownguide.org/extended-syntax/#footnotes
-      this.bookmarkMatcher = new MatchDecorator({
-        regexp: /\[\^(\w+)\]/g,
-        decoration: (match, view, pos) => {
-          const id = match[1];
-          return Decoration3.replace({
-            id,
-            widget: new BookmarkWidget(pos, id)
-          });
-        }
-      });
-    }
-    constructor(view) {
-      this.bookmarks = BookmarkViewPlugin.bookmarkMatcher.createDeco(view);
-    }
-    update(update2) {
-      this.bookmarks = BookmarkViewPlugin.bookmarkMatcher.updateDeco(update2, this.bookmarks);
-    }
-  }, {
-    decorations: (instance) => instance.bookmarks,
-    provide: (plugin) => EditorView5.atomicRanges.of((view) => {
-      return view.plugin(plugin)?.bookmarks || Decoration3.none;
-    })
-  });
   return [
-    bookmarksViewPlugin,
-    commentsStateField,
+    commentsState,
     highlightDecorations,
     styles3,
     //
@@ -1310,7 +1386,7 @@ var comments = (options = {}) => {
     //
     options.onCreate ? keymap3.of([
       {
-        key: options?.key ?? "meta-'",
+        key: shortcut,
         run: callbackWrapper(createCommentThread)
       }
     ]) : [],
@@ -1327,7 +1403,7 @@ var comments = (options = {}) => {
           above: true,
           create: () => {
             const el = document.createElement("div");
-            options.onHover?.(el);
+            options.onHover(el, shortcut);
             return {
               dom: el,
               offset: {
@@ -1340,156 +1416,154 @@ var comments = (options = {}) => {
       }
       return null;
     }, {
-      hideOnChange: true,
+      // TODO(burdon): Hide on change triggered immediately?
+      // hideOnChange: true,
       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(CursorConverter);
-      {
-        let mod = false;
-        const { active, ranges } = state.field(commentsStateField);
-        changes.iterChanges((from, to, from2, to2) => {
-          ranges.forEach((range) => {
-            if (from2 === to2) {
-              const newRange = getRangeFromCursor(cursorConverter3, range.cursor);
-              if (!newRange || newRange.to - newRange.from === 0) {
-                log2.info("deleted comment", {
-                  thread: range.id
-                }, {
-                  F: __dxlog_file3,
-                  L: 358,
-                  S: void 0,
-                  C: (f, a) => f(...a)
-                });
-              }
-            }
-            if (from <= range.to) {
-              const newRange = getRangeFromCursor(cursorConverter3, range.cursor);
-              Object.assign(range, newRange);
-              mod = true;
+    EditorView6.updateListener.of(({ view, state, changes }) => {
+      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.
+    //
+    EditorView6.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) : []
   ];
 };
-var getCursorFromRange = (cursorConverter3, range) => {
-  const from = cursorConverter3.toCursor(range.from);
-  const to = cursorConverter3.toCursor(range.to, -1);
-  return [
-    from,
-    to
-  ].join(":");
-};
-var getRangeFromCursor = (cursorConverter3, cursor) => {
-  const parts = cursor.split(":");
-  const from = cursorConverter3.fromCursor(parts[0]);
-  const to = cursorConverter3.fromCursor(parts[1]);
-  return from !== void 0 && to !== void 0 ? {
-    from,
-    to
-  } : void 0;
+var useComments = (view, comments2) => {
+  useEffect2(() => {
+    if (view && comments2) {
+      view.dispatch({
+        effects: setComments.of(comments2)
+      });
+    }
+  }, [
+    view,
+    comments2
+  ]);
 };
 
 // packages/ui/react-ui-editor/src/extensions/hr.ts
-import { Decoration as Decoration4, EditorView as EditorView6, MatchDecorator as MatchDecorator2, ViewPlugin as ViewPlugin5, WidgetType as WidgetType3 } from "@codemirror/view";
-var styles4 = EditorView6.baseTheme({
+import { syntaxTree } from "@codemirror/language";
+import { RangeSetBuilder } from "@codemirror/state";
+import { Decoration as Decoration4, EditorView as EditorView7, ViewPlugin as ViewPlugin4, WidgetType as WidgetType2 } from "@codemirror/view";
+var styles4 = EditorView7.baseTheme({
   "& .cm-hr": {
-    // TODO(burdon): ???
     // Note that block-level decorations should not have vertical margins,
-    borderBottom: `1px solid ${getToken("extend.colors.neutral.200")}`
+    borderTop: `1px solid ${getToken("extend.colors.neutral.200")}`
   }
 });
-var HorizontalRuleWidget = class extends WidgetType3 {
-  constructor(_pos) {
-    super();
-    this._pos = _pos;
-  }
-  eq(other) {
-    return this._pos === other._pos;
-  }
-  toDOM(view) {
+var HorizontalRuleWidget = class extends WidgetType2 {
+  toDOM() {
     const el = document.createElement("div");
     el.className = "cm-hr";
     return el;
   }
 };
-var placeholderMatcher = new MatchDecorator2({
-  regexp: /^---$/g,
-  decoration: (match, view, pos) => Decoration4.replace({
-    widget: new HorizontalRuleWidget(pos)
-  })
+var decoration = Decoration4.replace({
+  widget: new HorizontalRuleWidget()
 });
-var hr = () => [
-  styles4,
-  ViewPlugin5.fromClass(class {
-    constructor(view) {
-      this.rules = placeholderMatcher.createDeco(view);
-    }
-    update(update2) {
-      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;
+var buildDecorations = (view) => {
+  const builder = new RangeSetBuilder();
+  const { state } = view;
+  const cursor = state.selection.main.head;
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree(state).iterate({
+      enter: (node) => {
+        if (node.name === "HorizontalRule") {
+          if (cursor <= node.from || cursor >= node.to) {
+            builder.add(node.from, node.to, decoration);
+          }
+        }
+      },
+      from,
+      to
+    });
+  }
+  return builder.finish();
+};
+var hr = () => {
+  return [
+    styles4,
+    ViewPlugin4.fromClass(class {
+      constructor(view) {
+        this.decorations = buildDecorations(view);
+      }
+      update(update2) {
+        this.decorations = buildDecorations(update2.view);
+      }
+    }, {
+      decorations: (v) => v.decorations
     })
-  })
-];
+  ];
+};
 
 // packages/ui/react-ui-editor/src/extensions/image.ts
-import { syntaxTree } from "@codemirror/language";
+import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { StateField as StateField3 } from "@codemirror/state";
-import { Decoration as Decoration5, EditorView as EditorView7, WidgetType as WidgetType4 } from "@codemirror/view";
+import { Decoration as Decoration5, EditorView as EditorView8, WidgetType as WidgetType3 } from "@codemirror/view";
 var image = (options = {}) => {
   return StateField3.define({
     create: (state) => {
-      return Decoration5.set(buildDecorations(0, state.doc.length, state));
+      return Decoration5.set(buildDecorations2(0, state.doc.length, state));
     },
     update: (value, tr) => {
       if (!tr.docChanged && !tr.selection) {
@@ -1509,16 +1583,16 @@ var image = (options = {}) => {
         filterFrom: from,
         filterTo: to,
         filter: () => false,
-        add: buildDecorations(from, to, tr.state)
+        add: buildDecorations2(from, to, tr.state)
       });
     },
-    provide: (field) => EditorView7.decorations.from(field)
+    provide: (field) => EditorView8.decorations.from(field)
   });
 };
-var buildDecorations = (from, to, state) => {
+var buildDecorations2 = (from, to, state) => {
   const decorations = [];
   const cursor = state.selection.main.head;
-  syntaxTree(state).iterate({
+  syntaxTree2(state).iterate({
     enter: (node) => {
       if (node.name === "Image") {
         const urlNode = node.node.getChild("URL");
@@ -1537,7 +1611,7 @@ var buildDecorations = (from, to, state) => {
   });
   return decorations;
 };
-var ImageWidget = class extends WidgetType4 {
+var ImageWidget = class extends WidgetType3 {
   constructor(_url) {
     super();
     this._url = _url;
@@ -1555,19 +1629,19 @@ var ImageWidget = class extends WidgetType4 {
 };
 
 // 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 WidgetType5, hoverTooltip as hoverTooltip2, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
+import { syntaxTree as syntaxTree3 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder2 } from "@codemirror/state";
+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 = [
-    ViewPlugin6.fromClass(class {
+    ViewPlugin5.fromClass(class {
       constructor(view) {
-        this.decorations = buildDecorations2(view, options);
+        this.decorations = buildDecorations3(view, options);
       }
       update(update2) {
         if (update2.docChanged || update2.viewportChanged || update2.selectionSet) {
-          this.decorations = buildDecorations2(update2.view, options);
+          this.decorations = buildDecorations3(update2.view, options);
         }
       }
     }, {
@@ -1580,7 +1654,7 @@ var link = (options = {}) => {
       // https://codemirror.net/docs/ref/#view.hoverTooltip
       // https://github.com/codemirror/view/blob/main/src/tooltip.ts
       hoverTooltip2((view, pos, side) => {
-        const syntax = syntaxTree2(view.state).resolveInner(pos, side);
+        const syntax = syntaxTree3(view.state).resolveInner(pos, side);
         let link2 = null;
         for (let i = 0, node = syntax; !link2 && node && i < 5; node = node.parent, i++) {
           link2 = node.name === "Link" ? node : null;
@@ -1612,7 +1686,7 @@ var link = (options = {}) => {
   }
   return extensions;
 };
-var LinkButton = class extends WidgetType5 {
+var LinkButton = class extends WidgetType4 {
   constructor(_url, _onAttach) {
     super();
     this._url = _url;
@@ -1627,7 +1701,7 @@ var LinkButton = class extends WidgetType5 {
     return el;
   }
 };
-var LinkText = class extends WidgetType5 {
+var LinkText = class extends WidgetType4 {
   constructor(_text, _url) {
     super();
     this._text = _text;
@@ -1656,12 +1730,12 @@ var LinkText = class extends WidgetType5 {
     return link2;
   }
 };
-var buildDecorations2 = (view, options) => {
-  const builder = new RangeSetBuilder();
+var buildDecorations3 = (view, options) => {
+  const builder = new RangeSetBuilder2();
   const { state } = view;
   const cursor = state.selection.main.head;
   for (const { from, to } of view.visibleRanges) {
-    syntaxTree2(state).iterate({
+    syntaxTree3(state).iterate({
       enter: (node) => {
         if (node.name === "Link") {
           const marks2 = node.node.getChildren("LinkMark");
@@ -1692,14 +1766,14 @@ var buildDecorations2 = (view, options) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/listener.ts
-import { EditorView as EditorView8 } from "@codemirror/view";
+import { EditorView as EditorView9 } from "@codemirror/view";
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
-  onFocus && extensions.push(EditorView8.focusChangeEffect.of((_, focused) => {
+  onFocus && extensions.push(EditorView9.focusChangeEffect.of((_, focused) => {
     onFocus(focused);
     return null;
   }));
-  onChange && extensions.push(EditorView8.updateListener.of((update2) => {
+  onChange && extensions.push(EditorView9.updateListener.of((update2) => {
     onChange(update2.state.doc.toString());
   }));
   return extensions;
@@ -1707,17 +1781,17 @@ var listener = ({ onFocus, onChange }) => {
 
 // packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
 import { closeBrackets as closeBrackets2, closeBracketsKeymap } from "@codemirror/autocomplete";
-import { history, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
-import { markdownLanguage as markdownLanguage2, markdown } from "@codemirror/lang-markdown";
+import { history as history2, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
+import { markdownLanguage as markdownLanguage3, markdown } from "@codemirror/lang-markdown";
 import { bracketMatching as bracketMatching2, defaultHighlightStyle as defaultHighlightStyle2, indentOnInput, syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
 import { searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
 import { oneDarkHighlightStyle as oneDarkHighlightStyle2 } from "@codemirror/theme-one-dark";
-import { crosshairCursor, drawSelection as drawSelection2, dropCursor, EditorView as EditorView9, highlightActiveLine, keymap as keymap4, placeholder as placeholder2 } from "@codemirror/view";
+import { crosshairCursor, drawSelection as drawSelection2, dropCursor, EditorView as EditorView10, highlightActiveLine as highlightActiveLine2, keymap as keymap4, placeholder as placeholder2 } from "@codemirror/view";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
-import { markdownLanguage } from "@codemirror/lang-markdown";
+import { markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
 import { HighlightStyle } from "@codemirror/language";
 import { tags, styleTags, Tag } from "@lezer/highlight";
 import { Table } from "@lezer/markdown";
@@ -1727,7 +1801,6 @@ var markdownTags = {
   CodeText: Tag.define(),
   EmphasisMark: Tag.define(),
   HeaderMark: Tag.define(),
-  // HorizontalRule: Tag.define(),
   InlineCode: Tag.define(),
   LinkLabel: Tag.define(),
   LinkReference: Tag.define(),
@@ -1891,12 +1964,6 @@ var markdownHighlightStyle = (readonly) => {
       ],
       class: blockquote
     },
-    // TODO(burdon): Replace with extension.
-    // {
-    //   tag: [markdownTags.HorizontalRule],
-    //   class: mx(horizontalRule, readonly && '-indent-[100rem]'),
-    // },
-    // TODO(burdon): Only if being edited.
     {
       tag: [
         markdownTags.TableCell
@@ -1904,7 +1971,7 @@ var markdownHighlightStyle = (readonly) => {
       class: "font-mono"
     }
   ], {
-    scope: markdownLanguage,
+    scope: markdownLanguage2,
     all: {
       fontFamily: getToken("fontFamily.body", []).join(",")
     }
@@ -1916,17 +1983,17 @@ var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
   return [
     EditorState.allowMultipleSelections.of(true),
     EditorState.tabSize.of(2),
-    EditorView9.lineWrapping,
-    customKeymap(),
+    EditorView10.lineWrapping,
+    // https://github.com/codemirror/basic-setup
     bracketMatching2(),
     closeBrackets2(),
     crosshairCursor(),
     dropCursor(),
     drawSelection2(),
-    highlightActiveLine(),
-    history(),
+    highlightActiveLine2(),
+    history2(),
     indentOnInput(),
-    _placeholder && placeholder2(_placeholder),
+    _placeholder ? placeholder2(_placeholder) : [],
     // Main extension.
     // https://github.com/codemirror/lang-markdown
     // https://codemirror.net/5/mode/markdown/index.html (demo).
@@ -1936,7 +2003,7 @@ var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
       // NOTE: This extends the parser; it doesn't affect rendering.
       // https://github.github.com/gfm
       // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
-      base: markdownLanguage2,
+      base: markdownLanguage3,
       // Languages for syntax highlighting fenced code blocks.
       codeLanguages: languages,
       // Parser extensions.
@@ -1948,34 +2015,40 @@ var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
     // https://github.com/codemirror/theme-one-dark
     themeMode === "dark" ? syntaxHighlighting2(oneDarkHighlightStyle2) : syntaxHighlighting2(defaultHighlightStyle2),
     // Custom styles.
-    syntaxHighlighting2(markdownHighlightStyle(readonly))
-  ].filter(Boolean);
-};
-var customKeymap = () => keymap4.of([
-  // https://codemirror.net/docs/ref/#commands.indentWithTab
-  indentWithTab,
-  // https://codemirror.net/docs/ref/#commands.standardKeymap
-  ...standardKeymap,
-  // https://codemirror.net/docs/ref/#commands.historyKeymap
-  ...historyKeymap,
-  // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
-  ...closeBracketsKeymap,
-  // https://codemirror.net/docs/ref/#search.searchKeymap
-  ...searchKeymap
-]);
+    syntaxHighlighting2(markdownHighlightStyle(readonly)),
+    keymap4.of([
+      // https://codemirror.net/docs/ref/#commands.indentWithTab
+      indentWithTab,
+      // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
+      ...closeBracketsKeymap,
+      // https://codemirror.net/docs/ref/#commands.historyKeymap
+      ...historyKeymap,
+      // https://codemirror.net/docs/ref/#search.searchKeymap
+      ...searchKeymap,
+      // https://codemirror.net/docs/ref/#commands.standardKeymap
+      ...standardKeymap
+    ])
+  ];
+};
 
 // packages/ui/react-ui-editor/src/extensions/mention.ts
 import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
 var mention = ({ onSearch }) => {
   return autocompletion2({
+    // TODO(burdon): Not working.
+    activateOnTyping: true,
+    // activateOnTypingDelay: 100,
+    // selectOnOpen: true,
     closeOnBlur: false,
+    // defaultKeymap: false,
+    icons: false,
     override: [
       (context) => {
+        console.log(context);
         const match = context.matchBefore(/@(\w+)?/);
         if (!match || match.from === match.to && !context.explicit) {
           return null;
         }
-        console.log(match);
         return {
           from: match.from,
           options: onSearch(match.text.slice(1).toLowerCase()).map((value) => ({
@@ -1987,19 +2060,24 @@ var mention = ({ onSearch }) => {
   });
 };
 
+// packages/ui/react-ui-editor/src/extensions/outliner.ts
+var outliner = (options = {}) => {
+  return [];
+};
+
 // packages/ui/react-ui-editor/src/extensions/table.ts
-import { syntaxTree as syntaxTree3 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField4 } from "@codemirror/state";
-import { Decoration as Decoration7, EditorView as EditorView10, WidgetType as WidgetType6 } from "@codemirror/view";
+import { syntaxTree as syntaxTree4 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField4 } from "@codemirror/state";
+import { Decoration as Decoration7, EditorView as EditorView11, WidgetType as WidgetType5 } from "@codemirror/view";
 var table = (options = {}) => {
   return StateField4.define({
     create: (state) => update(state, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView10.decorations.from(field)
+    provide: (field) => EditorView11.decorations.from(field)
   });
 };
 var update = (state, options) => {
-  const builder = new RangeSetBuilder2();
+  const builder = new RangeSetBuilder3();
   const cursor = state.selection.main.head;
   const tables = [];
   const getTable = () => tables[tables.length - 1];
@@ -2007,7 +2085,7 @@ var update = (state, options) => {
     const table2 = getTable();
     return table2.rows?.[table2.rows.length - 1];
   };
-  syntaxTree3(state).iterate({
+  syntaxTree4(state).iterate({
     enter: (node) => {
       switch (node.name) {
         case "Table": {
@@ -2040,7 +2118,6 @@ var update = (state, options) => {
   tables.forEach((table2) => {
     const hide = state.readOnly || cursor < table2.from || cursor > table2.to;
     hide && builder.add(table2.from, table2.to, Decoration7.replace({
-      block: true,
       widget: new TableWidget(table2)
     }));
     builder.add(table2.from, table2.to, Decoration7.mark({
@@ -2049,7 +2126,7 @@ var update = (state, options) => {
   });
   return builder.finish();
 };
-var TableWidget = class extends WidgetType6 {
+var TableWidget = class extends WidgetType5 {
   constructor(_table) {
     super();
     this._table = _table;
@@ -2081,88 +2158,104 @@ var TableWidget = class extends WidgetType6 {
     }
     return table2;
   }
+  ignoreEvent(e) {
+    return !/^mouse/.test(e.type);
+  }
 };
 
 // packages/ui/react-ui-editor/src/extensions/tasklist.ts
-import { EditorView as EditorView11, Decoration as Decoration8, WidgetType as WidgetType7, MatchDecorator as MatchDecorator3, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
-var styles5 = EditorView11.baseTheme({
-  "& .cm-task-item": {
-    paddingLeft: "4px",
-    paddingRight: "8px"
+import { syntaxTree as syntaxTree5 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder4 } from "@codemirror/state";
+import { EditorView as EditorView12, Decoration as Decoration8, WidgetType as WidgetType6, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
+var styles5 = EditorView12.baseTheme({
+  "& .cm-task": {
+    color: getToken("extend.colors.blue.500")
+  },
+  "& .cm-task-checkbox": {
+    marginLeft: "4px",
+    marginRight: "4px"
   }
 });
-var CheckboxWidget = class extends WidgetType7 {
-  constructor(_checked, _indent, _onCheck) {
+var CheckboxWidget = class extends WidgetType6 {
+  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.className = "cm-task-checkbox";
     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 checkedDecoration = Decoration8.replace({
+  widget: new CheckboxWidget(true)
+});
+var uncheckedDecoration = Decoration8.replace({
+  widget: new CheckboxWidget(false)
+});
+var buildDecorations4 = (view) => {
+  const builder = new RangeSetBuilder4();
+  const { state } = view;
+  const cursor = state.selection.main.head;
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree5(state).iterate({
+      enter: (node) => {
+        if (node.name === "TaskMarker") {
+          if (cursor < node.from || cursor > node.to) {
+            const checked = state.doc.sliceString(node.from + 1, node.to - 1) === "x";
+            builder.add(node.from - 2, node.from - 1, Decoration8.mark({
+              class: "cm-task"
+            }));
+            builder.add(node.from, node.to, checked ? checkedDecoration : uncheckedDecoration);
+          }
+        }
+      },
+      from,
+      to
+    });
+  }
+  return builder.finish();
+};
 var tasklist = (options = {}) => {
-  const taskMatcher = new MatchDecorator3({
-    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 = ViewPlugin7.fromClass(class {
-    constructor(view) {
-      this.tasks = taskMatcher.createDeco(view);
-    }
-    update(update2) {
-      this.tasks = taskMatcher.updateDeco(update2, this.tasks);
-    }
-  }, {
-    decorations: (value) => value.tasks,
-    provide: (plugin) => EditorView11.atomicRanges.of((view) => {
-      return view.plugin(plugin)?.tasks || Decoration8.none;
-    })
-  });
   return [
-    tasks,
+    ViewPlugin6.fromClass(class {
+      constructor(view) {
+        this.decorations = buildDecorations4(view);
+      }
+      update(update2) {
+        if (update2.docChanged || update2.viewportChanged || update2.selectionSet) {
+          this.decorations = buildDecorations4(update2.view);
+        }
+      }
+    }, {
+      decorations: (v) => v.decorations
+    }),
     styles5
   ];
 };
@@ -2241,7 +2334,7 @@ var cursorConverter2 = (text) => ({
 
 // packages/ui/react-ui-editor/src/extensions/yjs/yjs.ts
 var yjs = (content, awareness2) => [
-  CursorConverter.of(cursorConverter2(content)),
+  Cursor.converter.of(cursorConverter2(content)),
   yCollab(content, awareness2)
 ];
 
@@ -2338,33 +2431,6 @@ var defaultTheme = {
     backgroundColor: get3(tokens, "extend.colors.yellow.700")
   },
   //
-  // collaboration
-  // TODO(burdon): Review classnames (YJS dependent?) Note: e2e tests depend on this class.
-  //
-  "&light .cm-ySelection, &light .cm-yLineSelection": {
-    mixBlendMode: "multiply"
-  },
-  "&dark .cm-ySelection, &dark .cm-yLineSelection": {
-    mixBlendMode: "screen"
-  },
-  ".cm-ySelectionInfo": {
-    padding: "2px 4px",
-    marginBlockStart: "-4px"
-  },
-  ".cm-ySelection, & .cm-selectionMatch": {
-    paddingBlockStart: ".15em",
-    paddingBlockEnd: ".15em"
-  },
-  ".cm-ySelectionCaret": {
-    display: "inline-block",
-    insetBlockStart: ".1em",
-    blockSize: "1.4em",
-    verticalAlign: "top"
-  },
-  ".cm-yLineSelection": {
-    margin: 0
-  },
-  //
   // link
   //
   ".cm-link": {
@@ -2401,13 +2467,6 @@ var defaultTheme = {
     textDecoration: "none"
   },
   //
-  // widgets
-  //
-  ".cm-widgetBuffer": {
-    display: "none",
-    height: 0
-  },
-  //
   // table
   //
   ".cm-table *": {
@@ -2438,27 +2497,17 @@ var defaultTheme = {
   },
   //
   // font size
-  // TODO(thure): This appears to be the best or only way to set selection caret heights, but it's far more verbose than it needs to be.
+  // TODO(thure): This appears to be the best or only way to set selection caret heights,
+  //  but it's far more verbose than it needs to be.
   //
-  ...Object.keys(get3(tokens, "extend.fontSize", {})).reduce((acc, fontSize) => {
-    const height = get3(tokens, [
-      "extend",
-      "fontSize",
-      fontSize,
-      1,
-      "lineHeight"
-    ]);
-    acc[`& .text-${fontSize} + .cm-ySelectionCaret`] = {
-      height
-    };
-    acc[`& .text-${fontSize} + .cm-ySelection + .cm-ySelectionCaret`] = {
-      height
-    };
-    acc[`& .text-${fontSize} + .cm-widgetBuffer + .cm-ySelectionCaret`] = {
-      height
-    };
-    return acc;
-  }, {}),
+  // ...Object.keys(get(tokens, 'extend.fontSize', {})).reduce((acc: Record<string, any>, fontSize) => {
+  //   const height = get(tokens, ['extend', 'fontSize', fontSize, 1, 'lineHeight']);
+  //
+  //   acc[`& .text-${fontSize} + .cm-ySelectionCaret`] = { height };
+  //   acc[`& .text-${fontSize} + .cm-ySelection + .cm-ySelectionCaret`] = { height };
+  //   acc[`& .text-${fontSize} + .cm-widgetBuffer + .cm-ySelectionCaret`] = { height };
+  //   return acc;
+  // }, {}),
   /**
   * Panels
   * TODO(burdon): Needs styling attention (esp. dark mode).
@@ -2509,7 +2558,9 @@ var textTheme = {
   }
 };
 var markdownTheme = {
-  // NOTE: Must leave base font family as is (i.e., monospace) due to fenced code blocks.
+  ".cm-scroller": {
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+  },
   ".cm-placeholder": {
     fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   }
@@ -2524,95 +2575,90 @@ var codeTheme = {
 };
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
+var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx";
 var EditorModes = [
   "default",
   "vim"
 ];
-var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: comments2, extensions = [], editorMode, slots = defaultSlots }, forwardedRef) => {
-  const { themeMode } = useThemeContext();
+var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autofocus, scrollTo, selection, editorMode, theme, slots = defaultSlots, extensions = [], debug }, forwardedRef) => {
   const tabsterDOMAttribute = useFocusableGroup({
     tabBehavior: "limited"
   });
-  const [root, setRoot] = useState(null);
-  const [{ state = void 0, view = void 0 } = {}, setEditor] = useState();
-  useImperativeHandle(forwardedRef, () => ({
-    root,
-    state,
+  const { themeMode } = useThemeContext2();
+  const rootRef = useRef(null);
+  const [view, setView] = useState(null);
+  useImperativeHandle(forwardedRef, () => view, [
     view
-  }), [
-    view,
-    state,
-    root
   ]);
-  const { awareness: awareness2, peer } = model;
-  useEffect(() => {
-    if (awareness2 && peer) {
-      awareness2.setLocalStateField("user", {
-        name: peer.name ?? generateName(peer.id),
-        color: getColorForValue({
-          value: peer.id,
-          type: "color"
-        }),
-        colorLight: getColorForValue({
-          value: peer.id,
-          themeMode,
-          type: "highlight"
-        })
-      });
-    }
-  }, [
-    awareness2,
-    peer,
-    themeMode
-  ]);
-  useEffect(() => {
-    if (view && comments2?.length) {
-      view.dispatch({
-        effects: setCommentRange.of({
-          model,
-          comments: comments2
-        })
-      });
+  useEffect3(() => {
+    if (autofocus) {
+      view?.focus();
     }
   }, [
     view,
-    comments2
+    autofocus
   ]);
-  useEffect(() => {
-    if (!root) {
+  useAwareness(model);
+  useEffect3(() => {
+    if (!model || !rootRef.current) {
       return;
     }
-    const state2 = EditorState2.create({
+    const state = EditorState2.create({
       doc: model.text(),
+      selection,
       extensions: [
-        readonly && EditorState2.readOnly.of(readonly),
-        // TODO(burdon): Factor out VIM mode? (manage via MarkdownPlugin).
-        editorMode === "vim" && vim(),
+        // TODO(burdon): Doesn't catch errors in keymap functions.
+        EditorView13.exceptionSink.of((err) => {
+          log2.catch(err, void 0, {
+            F: __dxlog_file5,
+            L: 126,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+        }),
         // Theme.
-        // TODO(burdon): Make theme configurable.
-        EditorView12.baseTheme(defaultTheme),
-        EditorView12.theme(slots?.editor?.theme ?? {}),
-        EditorView12.darkTheme.of(themeMode === "dark"),
+        // TODO(burdon): Make configurable.
+        EditorView13.baseTheme(defaultTheme),
+        EditorView13.theme(theme ?? {}),
+        EditorView13.darkTheme.of(themeMode === "dark"),
+        EditorView13.editorAttributes.of({
+          class: slots.editor?.className ?? ""
+        }),
+        EditorView13.contentAttributes.of({
+          class: slots.content?.className ?? ""
+        }),
+        // State.
+        EditorState2.readOnly.of(!!readonly),
         // Storage and replication.
+        // NOTE: This must come before user extensions.
         model.extension,
+        // TODO(burdon): Factor out (requires special handling for Escape/focus).
+        editorMode === "vim" && vim(),
         // Custom.
         ...extensions
       ].filter(Boolean)
     });
-    view?.destroy();
-    setEditor({
-      state: state2,
-      view: new EditorView12({
-        state: state2,
-        parent: root
-      })
+    const newView = new EditorView13({
+      state,
+      parent: rootRef.current,
+      scrollTo,
+      // NOTE: Uncomment to debug/monitor all transactions.
+      // https://codemirror.net/docs/ref/#view.EditorView.dispatch
+      dispatchTransactions: (trs, view2) => {
+        if (debug) {
+          logChanges(trs);
+        }
+        view2.update(trs);
+      }
     });
+    view?.destroy();
+    setView(newView);
     return () => {
-      view?.destroy();
-      setEditor(void 0);
+      newView?.destroy();
+      setView(null);
     };
   }, [
-    root,
+    rootRef,
     model,
     readonly,
     editorMode,
@@ -2622,11 +2668,13 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: co
     const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
     switch (key) {
       case "Enter": {
-        view?.contentDOM.focus();
+        view?.focus();
         break;
       }
       case "Escape": {
-        editorMode === "vim" && (altKey || shiftKey || metaKey || ctrlKey) && root?.focus();
+        if (editorMode === "vim" && (altKey || shiftKey || metaKey || ctrlKey)) {
+          rootRef.current?.focus();
+        }
         break;
       }
     }
@@ -2636,65 +2684,66 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: co
   ]);
   return /* @__PURE__ */ React.createElement("div", {
     key: model.id,
-    ref: setRoot,
+    role: "none",
     tabIndex: 0,
-    ...slots?.root,
+    onKeyUp: handleKeyUp,
+    ...slots.root,
     ...editorMode !== "vim" && tabsterDOMAttribute,
-    onKeyUp: handleKeyUp
+    ref: rootRef
   });
 });
-var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
-  const { themeMode } = useThemeContext();
-  const slots = defaultsDeep2({}, _slots, defaultTextSlots);
+var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, multiline, theme = textTheme, slots, extensions = [], ...props }, forwardedRef) => {
+  const { themeMode } = useThemeContext2();
+  const updatedSlots = defaultsDeep2({}, slots, defaultTextSlots);
   return /* @__PURE__ */ React.createElement(BaseTextEditor, {
     ref: forwardedRef,
     readonly,
     extensions: [
       basicBundle({
-        readonly,
         themeMode,
-        placeholder: slots?.editor?.placeholder
+        placeholder: placeholder3,
+        multiline
       }),
       ...extensions
     ],
-    slots,
+    theme,
+    slots: updatedSlots,
     ...props
   });
 });
-var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
-  const { themeMode } = useThemeContext();
-  const slots = defaultsDeep2({}, _slots, defaultMarkdownSlots);
+var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, theme = markdownTheme, slots, extensions = [], ...props }, forwardedRef) => {
+  const { themeMode } = useThemeContext2();
+  const updatedSlots = defaultsDeep2({}, slots, defaultMarkdownSlots);
   return /* @__PURE__ */ React.createElement(BaseTextEditor, {
     ref: forwardedRef,
     readonly,
     extensions: [
       markdownBundle({
-        readonly,
         themeMode,
-        placeholder: slots?.editor?.placeholder
+        readonly,
+        placeholder: placeholder3
       }),
       ...extensions
     ],
-    slots,
+    theme,
+    slots: updatedSlots,
     ...props
   });
 });
 var defaultSlots = {
   root: {
-    className: mx3("p-2", inputSurface)
+    // TODO(burdon): Add focusRing by default/as property?
+    className: mx3("flex flex-col grow overflow-y-auto", inputSurface)
+  },
+  editor: {
+    className: "h-full p-2"
   }
 };
 var defaultTextSlots = {
-  ...defaultSlots,
-  editor: {
-    theme: textTheme
-  }
+  ...defaultSlots
 };
 var defaultMarkdownSlots = {
-  ...defaultSlots,
-  editor: {
-    theme: markdownTheme
-  }
+  ...defaultSlots
 };
 
 // packages/ui/react-ui-editor/src/hooks/automerge.ts
@@ -2705,9 +2754,9 @@ import { isNotNullOrUndefined } from "@dxos/util";
 // packages/ui/react-ui-editor/src/hooks/awareness-provider.ts
 import { DeferredTask, Event as Event2, sleep } from "@dxos/async";
 import { Context as Context2 } from "@dxos/context";
-import { invariant as invariant3 } from "@dxos/invariant";
+import { invariant as invariant4 } from "@dxos/invariant";
 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 __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/awareness-provider.ts";
 var DEBOUNCE_INTERVAL = 100;
 var SpaceAwarenessProvider = class {
   constructor(params) {
@@ -2748,7 +2797,7 @@ var SpaceAwarenessProvider = class {
       log3.debug("failed to query awareness", {
         err
       }, {
-        F: __dxlog_file4,
+        F: __dxlog_file6,
         L: 85,
         S: this,
         C: (f, a) => f(...a)
@@ -2761,8 +2810,8 @@ var SpaceAwarenessProvider = class {
     this._postTask = void 0;
   }
   update(position) {
-    invariant3(this._postTask, void 0, {
-      F: __dxlog_file4,
+    invariant4(this._postTask, void 0, {
+      F: __dxlog_file6,
       L: 96,
       S: this,
       A: [
@@ -2781,8 +2830,8 @@ var SpaceAwarenessProvider = class {
     return Array.from(this._remoteStates.values());
   }
   _handleQueryMessage() {
-    invariant3(this._postTask, void 0, {
-      F: __dxlog_file4,
+    invariant4(this._postTask, void 0, {
+      F: __dxlog_file6,
       L: 111,
       S: this,
       A: [
@@ -2793,8 +2842,8 @@ var SpaceAwarenessProvider = class {
     this._postTask.schedule();
   }
   _handlePostMessage(message) {
-    invariant3(message.kind === "post", void 0, {
-      F: __dxlog_file4,
+    invariant4(message.kind === "post", void 0, {
+      F: __dxlog_file6,
       L: 116,
       S: this,
       A: [
@@ -2807,25 +2856,63 @@ 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";
 import * as encoding from "lib0/encoding";
 import { Observable } from "lib0/observable";
 import * as YP from "y-protocols/awareness";
-import * as Y2 from "yjs";
-import { invariant as invariant4 } from "@dxos/invariant";
+import { invariant as invariant5 } from "@dxos/invariant";
 import { log as log4 } from "@dxos/log";
-import { arrayToString as arrayToString2, stringToArray as stringToArray2 } from "@dxos/util";
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/yjs.ts";
+var __dxlog_file7 = "/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, {
-    F: __dxlog_file5,
-    L: 23,
+  invariant5(text?.doc && text?.content, void 0, {
+    F: __dxlog_file7,
+    L: 22,
     S: void 0,
     A: [
       "text?.doc && text?.content",
@@ -2841,34 +2928,6 @@ var createYjsModel = ({ identity, space, text }) => {
     id: text.doc.guid,
     content: text.content,
     text: () => text.content.toString(),
-    // https://github.com/yjs/yjs?tab=readme-ov-file#relative-positions
-    // TODO(dmaretskyi): Refactor as cursor-converter.
-    getCursorFromRange: (range) => {
-      const from = Y2.encodeRelativePosition(Y2.createRelativePositionFromTypeIndex(text.content, range.from));
-      const to = Y2.encodeRelativePosition(Y2.createRelativePositionFromTypeIndex(text.content, range.to, -1));
-      return [
-        arrayToString2(from),
-        arrayToString2(to)
-      ].join(":");
-    },
-    getRangeFromCursor: (cursor) => {
-      invariant4(text.doc, void 0, {
-        F: __dxlog_file5,
-        L: 40,
-        S: void 0,
-        A: [
-          "text.doc",
-          ""
-        ]
-      });
-      const parts = cursor.split(":");
-      const from = Y2.createAbsolutePositionFromRelativePosition(Y2.decodeRelativePosition(stringToArray2(parts[0])), text.doc);
-      const to = Y2.createAbsolutePositionFromRelativePosition(Y2.decodeRelativePosition(stringToArray2(parts[1])), text.doc);
-      return from && to ? {
-        from: from.index,
-        to: to.index
-      } : void 0;
-    },
     extension: [
       modelState.init(() => model),
       yjs(text.content, provider?.awareness)
@@ -2917,8 +2976,8 @@ var YAwarenessProvider = class extends Observable {
       removed,
       origin
     }, {
-      F: __dxlog_file5,
-      L: 122,
+      F: __dxlog_file7,
+      L: 101,
       S: this,
       C: (f, a) => f(...a)
     });
@@ -2930,8 +2989,8 @@ var YAwarenessProvider = class extends Observable {
   }
   _handleSpaceMessage({ payload }) {
     log4("space message", payload, {
-      F: __dxlog_file5,
-      L: 131,
+      F: __dxlog_file7,
+      L: 110,
       S: this,
       C: (f, a) => f(...a)
     });
@@ -2975,14 +3034,12 @@ 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 useEffect4, useState as useState2 } from "react";
+import { isAutomergeObject } from "@dxos/react-client/echo";
 var useTextModel = (props) => {
   const { identity, space, text } = props;
-  const [model, setModel] = useState2(() => createModel(props));
-  useEffect2(() => setModel(createModel(props)), [
+  const [model, setModel] = useState2();
+  useEffect4(() => setModel(createModel(props)), [
     identity,
     space,
     text
@@ -2999,47 +3056,10 @@ 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,
+  Cursor,
   Doc,
   EditorModes,
   MarkdownEditor,
@@ -3055,6 +3075,7 @@ export {
   awareness,
   basicBundle,
   blast,
+  callbackWrapper,
   code2 as code,
   codeTheme,
   comments,
@@ -3070,6 +3091,7 @@ export {
   image,
   link,
   listener,
+  logChanges,
   markdownBundle,
   markdownHighlightStyle,
   markdownTags,
@@ -3077,7 +3099,8 @@ export {
   markdownTheme,
   mention,
   modelState,
-  setCommentRange,
+  outliner,
+  setComments,
   setFocus,
   setSelection,
   table,
@@ -3085,6 +3108,8 @@ export {
   tasklist,
   textTheme,
   typewriter,
+  useAwareness,
+  useComments,
   useTextModel,
   yjs
 };