@dxos/react-ui-editor 0.3.11-main.68db74e → 0.3.11-main.69484a6

package/dist/lib/browser/index.mjs

@@ -7,14 +7,14 @@ 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 { useFocusableGroup } from "@fluentui/react-tabster";
+import { EditorView as EditorView13 } from "@codemirror/view";
 import { vim } from "@replit/codemirror-vim";
 import defaultsDeep2 from "lodash.defaultsdeep";
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState, useRef } from "react";
-import { generateName } from "@dxos/display-name";
+import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState } from "react";
+import { log as log2 } from "@dxos/log";
 import { useThemeContext } from "@dxos/react-ui";
-import { getColorForValue, inputSurface, mx as mx3 } from "@dxos/react-ui-theme";
+import { attentionSurface, mx as mx3 } from "@dxos/react-ui-theme";
+import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/autocomplete.ts
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
@@ -29,9 +29,11 @@ var autocomplete = ({ onSearch }) => {
     // https://codemirror.net/examples/autocompletion
     // https://codemirror.net/docs/ref/#autocomplete.autocompletion
     autocompletion({
-      defaultKeymap: false,
-      // Don't start unless key press.
-      activateOnTyping: false
+      activateOnTyping: true,
+      // closeOnBlur: false,
+      // defaultKeymap: false,
+      // TODO(burdon): Styles/fragments.
+      tooltipClass: () => "shadow rounded"
     }),
     // TODO(burdon): Option to create new page?
     // TODO(burdon): Optional decoration via addToOptions
@@ -51,13 +53,14 @@ var autocomplete = ({ onSearch }) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
-import { Facet as Facet2, StateField } from "@codemirror/state";
-import { ViewPlugin } from "@codemirror/view";
-import { next as A } from "@dxos/automerge/automerge";
+import { invertedEffects } from "@codemirror/commands";
+import { StateField } from "@codemirror/state";
+import { EditorView, ViewPlugin } from "@codemirror/view";
+import { next as A4 } from "@dxos/automerge/automerge";
 
 // packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts
 import get from "lodash.get";
-import { next as automerge } from "@dxos/automerge/automerge";
+import { next as A } from "@dxos/automerge/automerge";
 var cursorConverter = (handle, path) => ({
   // TODO(burdon): Handle assoc to associate with a previous character.
   toCursor: (pos) => {
@@ -69,7 +72,7 @@ var cursorConverter = (handle, path) => ({
     if (typeof value === "string" && value.length <= pos) {
       return "end";
     }
-    return automerge.getCursor(doc, path.slice(), pos);
+    return A.getCursor(doc, path.slice(), pos);
   },
   fromCursor: (cursor) => {
     if (cursor === "") {
@@ -87,26 +90,28 @@ var cursorConverter = (handle, path) => ({
         return 0;
       }
     }
-    return automerge.getCursorPosition(doc, path.slice(), cursor);
+    return A.getCursorPosition(doc, path.slice(), cursor);
   }
 });
 
 // packages/ui/react-ui-editor/src/extensions/automerge/defs.ts
 import { Annotation, StateEffect } from "@codemirror/state";
-var effectType = StateEffect.define({});
-var updateHeads = (newHeads) => effectType.of({
+var getPath = (state, field) => state.field(field).path;
+var getLastHeads = (state, field) => state.field(field).lastHeads;
+var updateHeadsEffect = StateEffect.define({});
+var updateHeads = (newHeads) => updateHeadsEffect.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 reconcileAnnotation = Annotation.define();
+var isReconcile = (tr) => {
+  return !!tr.annotation(reconcileAnnotation);
+};
 
 // packages/ui/react-ui-editor/src/extensions/automerge/semaphore.ts
-import { next as automerge2 } from "@dxos/automerge/automerge";
+import { next as A3 } from "@dxos/automerge/automerge";
 
 // packages/ui/react-ui-editor/src/extensions/automerge/update-automerge.ts
-import { next as am } from "@dxos/automerge/automerge";
+import { next as A2 } from "@dxos/automerge/automerge";
 var updateAutomerge = (field, handle, transactions, state) => {
   const { lastHeads, path } = state.field(field);
   let hasChanges = false;
@@ -119,11 +124,19 @@ var updateAutomerge = (field, handle, transactions, state) => {
     return void 0;
   }
   const newHeads = handle.changeAt(lastHeads, (doc) => {
+    const invertedTransactions = [];
     for (const tr of transactions) {
-      tr.changes.iterChanges((fromA, toA, _fromB, _toB, inserted) => {
-        am.splice(doc, path, fromA, toA - fromA, inserted.toString());
+      tr.changes.iterChanges((fromA, toA, _fromB, _toB, insert) => {
+        invertedTransactions.push({
+          from: fromA,
+          del: toA - fromA,
+          insert
+        });
       });
     }
+    invertedTransactions.reverse().forEach(({ from, del, insert }) => {
+      A2.splice(doc, path.slice(), from, del, insert.toString());
+    });
   });
   return newHeads ?? void 0;
 };
@@ -138,13 +151,13 @@ var updateCodeMirror = (view, selection, target, patches) => {
       selection = selection.map(changeSet, 1);
       view.dispatch({
         changes: changeSet,
-        annotations: reconcileAnnotationType.of({})
+        annotations: reconcileAnnotation.of(false)
       });
     }
   }
   view.dispatch({
     selection,
-    annotations: reconcileAnnotationType.of({})
+    annotations: reconcileAnnotation.of(false)
   });
 };
 var handlePatch = (patch, target, state) => {
@@ -165,7 +178,7 @@ var handleInsert = (target, patch) => {
   if (index == null) {
     return [];
   }
-  const text = patch.values.map((v) => v ? v.toString() : "").join("");
+  const text = patch.values.map((value) => value ? value.toString() : "").join("");
   return [
     {
       from: index,
@@ -237,40 +250,43 @@ 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;
-      }
+  }
+  reconcile(view) {
+    if (!this._inReconcile) {
       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);
+      this.doReconcile(view);
+      this._inReconcile = false;
+    }
+  }
+  doReconcile(view) {
+    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) => !isReconcile(tx));
+    const toInvert = transactions.slice().reverse();
+    for (const tr of toInvert) {
+      const inverted = tr.changes.invert(tr.startState.doc);
+      selection = selection.map(inverted);
       view.dispatch({
-        effects: updateHeads(newHeads),
-        annotations: reconcileAnnotationType.of({})
+        changes: inverted,
+        annotations: reconcileAnnotation.of(true)
       });
-      this._inReconcile = false;
-    };
+    }
+    let newHeads = updateAutomerge(this._state, this._handle, transactions, view.state);
+    if (newHeads === null || newHeads === void 0) {
+      newHeads = A3.getHeads(this._handle.docSync());
+    }
+    const diff = A3.equals(oldHeads, newHeads) ? [] : A3.diff(this._handle.docSync(), oldHeads, newHeads);
+    updateCodeMirror(view, selection, path, diff);
+    view.dispatch({
+      effects: updateHeads(newHeads),
+      annotations: reconcileAnnotation.of(false)
+    });
   }
 };
 
@@ -280,16 +296,17 @@ var defaultCursorConverter = {
   toCursor: (position) => position.toString(),
   fromCursor: (cursor) => parseInt(cursor)
 };
-var Cursor = class {
+var Cursor = class _Cursor {
   static {
     this.converter = Facet.define({
       combine: (providers) => providers[0] ?? defaultCursorConverter
     });
   }
   static {
-    this.getCursorFromRange = (cursorConverter3, range) => {
-      const from = cursorConverter3.toCursor(range.from);
-      const to = cursorConverter3.toCursor(range.to, -1);
+    this.getCursorFromRange = (state, range) => {
+      const cursorConverter2 = state.facet(_Cursor.converter);
+      const from = cursorConverter2.toCursor(range.from);
+      const to = cursorConverter2.toCursor(range.to, -1);
       return [
         from,
         to
@@ -297,10 +314,11 @@ var Cursor = class {
     };
   }
   static {
-    this.getRangeFromCursor = (cursorConverter3, cursor) => {
+    this.getRangeFromCursor = (state, cursor) => {
+      const cursorConverter2 = state.facet(_Cursor.converter);
       const parts = cursor.split(":");
-      const from = cursorConverter3.fromCursor(parts[0]);
-      const to = cursorConverter3.fromCursor(parts[1]);
+      const from = cursorConverter2.fromCursor(parts[0]);
+      const to = cursorConverter2.fromCursor(parts[1]);
       return from !== void 0 && to !== void 0 ? {
         from,
         to
@@ -310,25 +328,22 @@ var Cursor = class {
 };
 
 // packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
-var semaphoreFacet = Facet2.define({
-  combine: (values) => values.at(-1)
-});
-var automerge3 = ({ handle, path }) => {
-  const stateField = StateField.define({
+var automerge = ({ handle, path }) => {
+  const syncState = StateField.define({
     create: () => ({
-      lastHeads: A.getHeads(handle.docSync()),
-      unreconciledTransactions: [],
-      path: path.slice()
+      path: path.slice(),
+      lastHeads: A4.getHeads(handle.docSync()),
+      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) {
-        if (effect.is(effectType)) {
+        if (effect.is(updateHeadsEffect)) {
           result.lastHeads = effect.value.newHeads;
           clearUnreconciled = true;
         }
@@ -336,46 +351,53 @@ var automerge3 = ({ handle, path }) => {
       if (clearUnreconciled) {
         result.unreconciledTransactions = [];
       } else {
-        if (!isReconcileTx(tr)) {
+        if (!isReconcile(tr)) {
           result.unreconciledTransactions.push(tr);
         }
       }
       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, syncState);
+  return [
+    Cursor.converter.of(cursorConverter(handle, path)),
+    syncState,
+    // Reconcile external updates.
+    ViewPlugin.fromClass(class {
+      constructor(_view) {
+        this._view = _view;
+        handle.addListener("change", this._handleChange.bind(this));
+      }
+      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);
+      }
+    }),
+    // TODO(burdon): Record undo transactions.
+    //  See https://github.com/yjs/y-codemirror.next/tree/main
+    // https://codemirror.net/examples/inverted-effect
+    invertedEffects.of((tr) => {
+      const effects = [];
+      if (!tr.changes.empty) {
+        tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => {
         });
       }
-    }
-    destroy() {
-      handle.addListener("change", this._handleChange);
-    }
-  });
-  return {
-    extension: [
-      Cursor.converter.of(cursorConverter(handle, path)),
-      semaphoreFacet.of(semaphore),
-      stateField,
-      viewPlugin
-    ]
-  };
+      return effects;
+    })
+  ];
 };
 
 // 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 { Event } from "@dxos/async";
 import { Context } from "@dxos/context";
 var dummyProvider = {
@@ -384,17 +406,17 @@ var dummyProvider = {
   },
   close: () => {
   },
+  getRemoteStates: () => [],
   update: () => {
-  },
-  getRemoteStates: () => []
+  }
 };
-var AwarenessProvider = Facet3.define({
+var awarenessProvider = Facet2.define({
   combine: (providers) => providers[0] ?? dummyProvider
 });
 var RemoteSelectionChangedAnnotation = Annotation2.define();
 var awareness = (provider = dummyProvider) => {
   return [
-    AwarenessProvider.of(provider),
+    awarenessProvider.of(provider),
     ViewPlugin2.fromClass(RemoteSelectionsDecorator, {
       decorations: (value) => value.decorations
     }),
@@ -408,7 +430,7 @@ var RemoteSelectionsDecorator = class {
     this._lastAnchor = void 0;
     this._lastHead = void 0;
     this._cursorConverter = view.state.facet(Cursor.converter);
-    this._provider = view.state.facet(AwarenessProvider);
+    this._provider = view.state.facet(awarenessProvider);
     this._provider.open();
     this._provider.remoteStateChange.on(this._ctx, () => {
       view.dispatch({
@@ -549,7 +571,7 @@ var RemoteCaretWidget = class extends WidgetType {
     return true;
   }
 };
-var styles = EditorView.baseTheme({
+var styles = EditorView2.baseTheme({
   ".cm-collab-selection": {},
   ".cm-collab-selectionLine": {
     padding: 0,
@@ -562,40 +584,42 @@ var styles = EditorView.baseTheme({
     marginLeft: "-1px",
     marginRight: "-1px",
     boxSizing: "border-box",
-    display: "inline"
+    display: "inline",
+    cursor: "pointer"
   },
   ".cm-collab-selectionCaretDot": {
     borderRadius: "50%",
     position: "absolute",
-    width: ".4em",
-    height: ".4em",
-    top: "-.2em",
-    left: "-.2em",
+    width: ".5em",
+    height: ".5em",
+    top: "-.25em",
+    left: "-.25em",
     backgroundColor: "inherit",
     transition: "transform .3s ease-in-out",
     boxSizing: "border-box"
   },
   ".cm-collab-selectionCaret:hover > .cm-collab-selectionCaretDot": {
-    transformOrigin: "bottom center",
-    transform: "scale(0)"
+    transform: "scale(0)",
+    transformOrigin: "center"
   },
   ".cm-collab-selectionInfo": {
     position: "absolute",
-    top: "-1.05em",
-    left: "-1px",
+    transform: "translate(-50%, 0)",
+    top: "-20px",
+    left: 0,
     fontSize: ".75em",
-    fontFamily: "serif",
+    fontFamily: "sans-serif",
     fontStyle: "normal",
     fontWeight: "normal",
     lineHeight: "normal",
     userSelect: "none",
     color: "white",
-    paddingLeft: "2px",
-    paddingRight: "2px",
+    padding: "2px",
     zIndex: 101,
     transition: "opacity .3s ease-in-out",
     backgroundColor: "inherit",
-    // these should be separate
+    borderRadius: "2px",
+    // These should be separate.
     opacity: 0,
     transitionDelay: "0s",
     whiteSpace: "nowrap"
@@ -608,23 +632,26 @@ 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";
+import { isNotFalsy } from "@dxos/util";
+var createBasicBundle = ({ themeMode, placeholder: _placeholder, lineWrapping = true } = {}) => [
+  lineWrapping && EditorView3.lineWrapping,
   // https://codemirror.net/docs/ref/#codemirror.minimalSetup
   bracketMatching(),
   closeBrackets(),
   drawSelection(),
+  highlightActiveLine(),
+  history(),
   _placeholder && placeholder(_placeholder),
-  // TODO(burdon): Is this required?
+  // https://github.com/codemirror/theme-one-dark
   themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)
-].filter(Boolean);
+].filter(isNotFalsy);
 
 // 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";
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
@@ -660,10 +687,10 @@ var blast = (options = defaultOptions) => {
   const getPoint = (view, pos) => {
     const { left: x = 0, top: y = 0 } = view.coordsForChar(pos) ?? {};
     const element = document.elementFromPoint(x, y);
-    const { offsetLeft: left = 0, offsetTop: top = 0 } = view.scrollDOM.parentElement ?? {};
+    const { offsetLeft: left = 0, offsetTop: top2 = 0 } = view.scrollDOM.parentElement ?? {};
     const point = {
       x: x - left,
-      y: y - top
+      y: y - top2
     };
     return {
       element,
@@ -672,7 +699,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();
@@ -933,9 +960,14 @@ var random = (min, max) => {
   return min + ~~(Math.random() * (max - min + 1));
 };
 
-// packages/ui/react-ui-editor/src/extensions/code.ts
-import { ViewPlugin as ViewPlugin3, EditorView as EditorView4, Decoration as Decoration2 } from "@codemirror/view";
-import { mx as mx2 } from "@dxos/react-ui-theme";
+// packages/ui/react-ui-editor/src/extensions/comments.ts
+import { invertedEffects as invertedEffects2 } from "@codemirror/commands";
+import { Facet as Facet3, StateEffect as StateEffect2, StateField as StateField2 } from "@codemirror/state";
+import { hoverTooltip, keymap as keymap3, Decoration as Decoration2, EditorView as EditorView5 } from "@codemirror/view";
+import sortBy from "lodash.sortby";
+import { useEffect } from "react";
+import { debounce } from "@dxos/async";
+import { nonNullable } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/styles/cursors.ts
 import * as random2 from "lib0/random";
@@ -978,34 +1010,15 @@ var cursorColor = cursorColors[random2.uint32() % cursorColors.length];
 // packages/ui/react-ui-editor/src/styles/markdown.ts
 import { mx } from "@dxos/react-ui-theme";
 var headings = {
-  1: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline text-4xl",
-    "-ml-[10px]"
-  ],
-  2: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline text-3xl",
-    "-ml-[8px]"
-  ],
-  3: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline text-2xl",
-    "-ml-[7px]"
-  ],
-  4: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline text-xl",
-    "-ml-[6px]"
-  ],
-  5: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline text-lg",
-    "-ml-[5px]"
-  ],
-  6: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline",
-    "-ml-[4px]"
-  ]
-};
-var heading = (level, readonly) => {
-  const [style, offset] = headings[level];
-  return mx(style, readonly && offset);
+  1: "mbs-4 mbe-2 font-medium text-inherit no-underline text-4xl",
+  2: "mbs-4 mbe-2 font-medium text-inherit no-underline text-3xl",
+  3: "mbs-4 mbe-2 font-medium text-inherit no-underline text-2xl",
+  4: "mbs-4 mbe-2 font-medium text-inherit no-underline text-xl",
+  5: "mbs-4 mbe-2 font-medium text-inherit no-underline text-lg",
+  6: "mbs-4 mbe-2 font-medium text-inherit no-underline"
+};
+var heading = (level) => {
+  return headings[level];
 };
 var light = "text-neutral-200 dark:text-neutral-800";
 var mark = mx("!font-normal !no-underline !text-inherit opacity-40", light);
@@ -1023,168 +1036,109 @@ import { tailwindConfig } from "@dxos/react-ui-theme";
 var tokens = tailwindConfig({}).theme;
 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({
-  "& .cm-codeblock": {
-    fontFamily: getToken("fontFamily.mono", []).join(",")
-  },
-  '&light [aria-readonly="true"] .cm-codeblock': {
-    background: getToken("extend.colors.neutral.50")
-  },
-  '&dark [aria-readonly="true"] .cm-codeblock': {
-    background: getToken("extend.colors.neutral.850")
-  },
-  '& [aria-readonly="true"] .cm-codeblock': {
-    display: "block",
-    paddingInline: "4px !important"
-  },
-  '& [aria-readonly="true"] .cm-codeblock-first': {
-    paddingTop: "4px !important",
-    borderTopLeftRadius: "4px",
-    borderTopRightRadius: "4px"
-  },
-  '& [aria-readonly="true"] .cm-codeblock-last': {
-    paddingBottom: "4px !important",
-    borderBottomLeftRadius: "4px",
-    borderBottomRightRadius: "4px"
-  }
-});
-var getLineRange = (lines, from, to) => {
-  const start = lines.findIndex((line) => line.from >= from);
-  const end = lines.findIndex((line) => line.to >= to);
-  return [
-    start,
-    end
-  ];
-};
-var code2 = () => {
-  const getDecorations = (view) => {
-    const decorations = [];
-    if (!view.hasFocus || view.state.readOnly) {
-      const text = view.state.doc.sliceString(0);
-      const matches = text.matchAll(CODE_REGEX);
-      const blocks = view.viewportLineBlocks;
-      for (const match of matches) {
-        const range = getLineRange(blocks, match.index, match.index + match[0].length);
-        for (let i = range[0]; i <= range[1]; i++) {
-          const block = blocks[i];
-          decorations.push(Decoration2.line({
-            class: mx2("cm-codeblock", i === range[0] && "cm-codeblock-first", i === range[1] && "cm-codeblock-last")
-          }).range(block.from));
-        }
-      }
-    }
-    return Decoration2.set(decorations);
-  };
-  return [
-    ViewPlugin3.fromClass(class {
-      constructor(view) {
-        this.hasFocus = false;
-        this.decorations = getDecorations(view);
-      }
-      update(update2) {
-        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 = getDecorations(update2.view);
-        }
-      }
-    }, {
-      decorations: (value) => value.decorations
-    }),
-    styles2
-  ];
-};
-
-// 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 } from "@codemirror/view";
-import sortBy from "lodash.sortby";
-import { debounce } from "@dxos/async";
-import { invariant as invariant2 } from "@dxos/invariant";
-import { log as log2 } from "@dxos/log";
-import { nonNullable } from "@dxos/util";
-
 // packages/ui/react-ui-editor/src/util.ts
 import { log } from "@dxos/log";
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util.ts";
 var callbackWrapper = (fn) => (...args) => {
   try {
     return fn(...args);
-  } catch (error) {
-    log.catch(error, void 0, {
+  } catch (err) {
+    log.catch(err, void 0, {
       F: __dxlog_file2,
-      L: 16,
+      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_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
-var styles3 = EditorView5.baseTheme({
+var styles2 = EditorView5.baseTheme({
   "& .cm-comment": {
     backgroundColor: getToken("extend.colors.yellow.50")
   },
-  "& .cm-comment-active": {
+  "& .cm-comment-current": {
     backgroundColor: getToken("extend.colors.yellow.100")
   }
 });
-var marks = {
-  highlight: Decoration3.mark({
-    class: "cm-comment"
-  }),
-  highlightActive: Decoration3.mark({
-    class: "cm-comment-active"
-  })
-};
-var setFocus = (view, thread) => {
-  const range = view.state.field(commentsStateField).ranges.find((range2) => range2.id === thread);
-  if (!range) {
+var commentMark = Decoration2.mark({
+  class: "cm-comment"
+});
+var commentCurrentMark = Decoration2.mark({
+  class: "cm-comment-current"
+});
+var focusComment = (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: [
+        //
+        EditorView5.scrollIntoView(range.from, center ? {
+          y: "center"
+        } : void 0),
+        setSelection.of({
+          current: 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(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)) {
@@ -1194,87 +1148,174 @@ var commentsStateField = StateField2.define({
     return value;
   }
 });
-var highlightDecorations = EditorView5.decorations.compute([
-  commentsStateField
+var commentsDecorations = EditorView5.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: { current }, 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) {
-      return marks.highlightActive.range(range.from, range.to);
+    if (comment.comment.id === current) {
+      return commentCurrentMark.range(range.from, range.to);
     } else {
-      return marks.highlight.range(range.from, range.to);
+      return commentMark.range(range.from, range.to);
     }
-  }).filter(nonNullable) ?? [];
-  return Decoration3.set(decorations);
+  }).filter(nonNullable);
+  return Decoration2.set(decorations);
 });
-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: 177,
-      S: void 0,
-      A: [
-        "options.onCreate",
-        ""
-      ]
-    });
-    const { head, from, to } = view.state.selection.main;
-    if (from === to) {
-      return false;
+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
+        }))
+      };
     }
-    const cursor = Cursor.getCursorFromRange(cursorConverter3, {
-      from,
-      to
-    });
-    if (cursor) {
-      const id = callbackWrapper(options.onCreate)(cursor, view.coordsAtPos(from));
-      if (id) {
-        view.dispatch({
-          effects: setSelection.of({
-            active: id
-          }),
-          selection: {
-            anchor: from
+  };
+  return [
+    EditorView5.domEventHandlers({
+      cut: handleTrack,
+      copy: handleTrack
+    }),
+    // Track deleted comments.
+    invertedEffects2.of((tr) => {
+      const { comments: comments2 } = tr.startState.field(commentsState);
+      const effects = [];
+      tr.changes.iterChangedRanges((fromA, toA) => {
+        for (const { comment: { id }, range: { from, to } } of comments2) {
+          if (from < to && from >= fromA && to <= toA) {
+            effects.push(restoreCommentEffect.of({
+              id,
+              from,
+              to
+            }));
           }
-        });
-        if (options.footnote) {
-          const tag = `[^${id}]`;
-          view.dispatch({
-            changes: {
-              from: head,
-              insert: tag
-            },
-            selection: {
-              anchor: head + tag.length
+        }
+      });
+      return effects;
+    }),
+    // Handle paste or the undo of comment deletion.
+    EditorView5.updateListener.of((update2) => {
+      const restore = [];
+      for (let i = 0; i < update2.transactions.length; i++) {
+        const tr = update2.transactions[i];
+        for (let j = 0; j < restore.length; j++) {
+          restore[j] = mapTrackedComment(restore[j], tr.changes);
+        }
+        for (const effect of tr.effects) {
+          if (effect.is(restoreCommentEffect)) {
+            restore.push(effect.value);
+          }
+        }
+      }
+      if (tracked) {
+        const paste = update2.transactions.find((tr) => tr.isUserEvent("input.paste"));
+        if (paste) {
+          let found = -1;
+          paste.changes.iterChanges((fromA, toA, fromB, toB, text) => {
+            if (text.eq(tracked.text)) {
+              for (let i = update2.transactions.indexOf(paste) + 1; i < update2.transactions.length; i++) {
+                fromB = update2.transactions[i].changes.mapPos(fromB);
+              }
+              found = fromB;
             }
           });
+          if (found > -1) {
+            for (const moved of tracked.comments) {
+              restore.push({
+                id: moved.id,
+                from: found + moved.from,
+                to: found + moved.to
+              });
+            }
+          }
+          tracked = null;
         }
-        return true;
       }
-    }
+      for (const comment of restore) {
+        const { comments: comments2 } = update2.startState.field(commentsState);
+        const exists = comments2.some((c) => c.comment.id === comment.id && c.range.from < c.range.to);
+        if (!exists) {
+          const cursor = Cursor.getCursorFromRange(update2.state, comment);
+          onUpdate(comment.id, cursor);
+        }
+      }
+    })
+  ];
+};
+var mapTrackedComment = (comment, changes) => ({
+  id: comment.id,
+  from: changes.mapPos(comment.from, 1),
+  to: changes.mapPos(comment.to, 1)
+});
+var restoreCommentEffect = StateEffect2.define({
+  map: mapTrackedComment
+});
+var optionsFacet = Facet3.define({
+  combine: (providers) => providers[0]
+});
+var createComment = (view) => {
+  const options = view.state.facet(optionsFacet);
+  const { from, to } = view.state.selection.main;
+  if (from === to) {
     return false;
-  };
+  }
+  if (to === view.state.doc.length) {
+    view.dispatch({
+      changes: {
+        from: to,
+        insert: "\n"
+      }
+    });
+  }
+  const cursor = Cursor.getCursorFromRange(view.state, {
+    from,
+    to
+  });
+  if (cursor) {
+    const id = options.onCreate?.(cursor, view.coordsAtPos(from));
+    if (id) {
+      view.dispatch({
+        effects: setSelection.of({
+          current: id
+        }),
+        selection: {
+          anchor: to
+        }
+      });
+      return true;
+    }
+  }
+  return false;
+};
+var comments = (options = {}) => {
+  const { key: shortcut = "meta-'" } = options;
+  const handleSelect = debounce((state) => options.onSelect?.(state), 200);
   return [
-    commentsStateField,
-    highlightDecorations,
-    styles3,
+    optionsFacet.of(options),
+    commentsState,
+    commentsDecorations,
+    styles2,
     //
     // Keymap.
     //
     options.onCreate ? keymap3.of([
       {
         key: shortcut,
-        run: callbackWrapper(createCommentThread)
+        run: callbackWrapper(createComment)
       }
     ]) : [],
     //
@@ -1290,7 +1331,7 @@ var comments = (options = {}) => {
           above: true,
           create: () => {
             const el = document.createElement("div");
-            options.onHover?.(el, shortcut);
+            options.onHover(el, shortcut);
             return {
               dom: el,
               offset: {
@@ -1303,364 +1344,116 @@ 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(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) {
-                log2.info("deleted comment", {
-                  thread: range.id
-                }, {
-                  F: __dxlog_file3,
-                  L: 274,
-                  S: void 0,
-                  C: (f, a) => f(...a)
-                });
-              }
+      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(cursorConverter3, range.cursor);
-              Object.assign(range, newRange);
-              mod = true;
-            }
-          });
+          }
+          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 }) => {
+      let min = Infinity;
+      const { selection: { current, 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.current = comment.id;
+          selection.closest = void 0;
+        }
+        if (!selection.current) {
+          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.current !== current || 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 useComments = (view, comments2 = []) => {
+  useEffect(() => {
+    if (view) {
+      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, ViewPlugin as ViewPlugin4, WidgetType as WidgetType2 } from "@codemirror/view";
-var styles4 = EditorView6.baseTheme({
-  "& .cm-hr": {
-    // TODO(burdon): ???
-    // Note that block-level decorations should not have vertical margins,
-    borderBottom: `1px solid ${getToken("extend.colors.neutral.200")}`
-  }
-});
-var HorizontalRuleWidget = class extends WidgetType2 {
-  constructor(_pos) {
-    super();
-    this._pos = _pos;
-  }
-  eq(other) {
-    return this._pos === other._pos;
-  }
-  toDOM(view) {
-    const el = document.createElement("div");
-    el.className = "cm-hr";
-    return el;
-  }
-};
-var placeholderMatcher = new MatchDecorator({
-  regexp: /^---$/g,
-  decoration: (match, view, pos) => Decoration4.replace({
-    widget: new HorizontalRuleWidget(pos)
-  })
-});
-var hr = () => [
-  styles4,
-  ViewPlugin4.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;
-    })
-  })
-];
-
-// packages/ui/react-ui-editor/src/extensions/image.ts
-import { syntaxTree } from "@codemirror/language";
-import { StateField as StateField3 } from "@codemirror/state";
-import { Decoration as Decoration5, EditorView as EditorView7, WidgetType as WidgetType3 } from "@codemirror/view";
-var image = (options = {}) => {
-  return StateField3.define({
-    create: (state) => {
-      return Decoration5.set(buildDecorations(0, state.doc.length, state));
-    },
-    update: (value, tr) => {
-      if (!tr.docChanged && !tr.selection) {
-        return value;
-      }
-      const cursor = tr.state.selection.main.head;
-      const oldCursor = tr.changes.mapPos(tr.startState.selection.main.head);
-      let from = Math.min(cursor, oldCursor);
-      let to = Math.max(cursor, oldCursor);
-      tr.changes.iterChangedRanges((fromA, toA, fromB, toB) => {
-        from = Math.min(from, fromB);
-        to = Math.max(to, toB);
-      });
-      from = tr.state.doc.lineAt(from).from;
-      to = tr.state.doc.lineAt(to).to;
-      return value.map(tr.changes).update({
-        filterFrom: from,
-        filterTo: to,
-        filter: () => false,
-        add: buildDecorations(from, to, tr.state)
-      });
-    },
-    provide: (field) => EditorView7.decorations.from(field)
-  });
-};
-var buildDecorations = (from, to, state) => {
-  const decorations = [];
-  const cursor = state.selection.main.head;
-  syntaxTree(state).iterate({
-    enter: (node) => {
-      if (node.name === "Image") {
-        const urlNode = node.node.getChild("URL");
-        if (urlNode) {
-          const hide = state.readOnly || cursor < node.from || cursor > node.to;
-          const url = state.sliceDoc(urlNode.from, urlNode.to);
-          decorations.push(Decoration5.replace({
-            block: true,
-            widget: new ImageWidget(url)
-          }).range(hide ? node.from : node.to, node.to));
-        }
-      }
-    },
-    from,
-    to
-  });
-  return decorations;
-};
-var ImageWidget = class extends WidgetType3 {
-  constructor(_url) {
-    super();
-    this._url = _url;
-  }
-  eq(other) {
-    return this._url === other._url;
-  }
-  toDOM(view) {
-    const img = document.createElement("img");
-    img.setAttribute("src", this._url);
-    img.setAttribute("class", "cm-image");
-    img.onload = () => img.classList.add("cm-loaded-image");
-    return img;
-  }
-};
-
-// packages/ui/react-ui-editor/src/extensions/link.ts
-import { syntaxTree as syntaxTree2 } from "@codemirror/language";
-import { RangeSetBuilder } from "@codemirror/state";
-import { Decoration as Decoration6, WidgetType as WidgetType4, hoverTooltip as hoverTooltip2, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
-import { tooltipContent } from "@dxos/react-ui-theme";
-var link = (options = {}) => {
-  const extensions = [
-    ViewPlugin5.fromClass(class {
-      constructor(view) {
-        this.decorations = buildDecorations2(view, options);
-      }
-      update(update2) {
-        if (update2.docChanged || update2.viewportChanged || update2.selectionSet) {
-          this.decorations = buildDecorations2(update2.view, options);
-        }
-      }
-    }, {
-      decorations: (v) => v.decorations
-    })
-  ];
-  if (options.onHover) {
-    extensions.push(
-      // https://codemirror.net/examples/tooltip
-      // 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);
-        let link2 = null;
-        for (let i = 0, node = syntax; !link2 && node && i < 5; node = node.parent, i++) {
-          link2 = node.name === "Link" ? node : null;
-        }
-        const url = link2 && link2.getChild("URL");
-        if (!url || !link2) {
-          return null;
-        }
-        const urlText = view.state.sliceDoc(url.from, url.to);
-        return {
-          pos: link2.from,
-          end: link2.to,
-          above: true,
-          create: () => {
-            const el = document.createElement("div");
-            el.className = tooltipContent({}, "pli-2 plb-1");
-            options.onHover(el, urlText);
-            return {
-              dom: el,
-              offset: {
-                x: 0,
-                y: 4
-              }
-            };
-          }
-        };
-      })
-    );
-  }
-  return extensions;
-};
-var LinkButton = class extends WidgetType4 {
-  constructor(_url, _onAttach) {
-    super();
-    this._url = _url;
-    this._onAttach = _onAttach;
-  }
-  eq(other) {
-    return this._url === other._url;
-  }
-  toDOM(view) {
-    const el = document.createElement("span");
-    this._onAttach(el, this._url);
-    return el;
-  }
-};
-var LinkText = class extends WidgetType4 {
-  constructor(_text, _url) {
-    super();
-    this._text = _text;
-    this._url = _url;
-  }
-  eq(other) {
-    return this._url === other._url;
-  }
-  toDOM(view) {
-    const link2 = document.createElement("a");
-    link2.setAttribute("class", "cm-link");
-    link2.textContent = this._text;
-    if (this._url) {
-      link2.setAttribute("rel", "noreferrer");
-      link2.setAttribute("target", "_blank");
-      link2.href = this._url;
-    } else {
-      link2.onclick = () => {
-        view.dispatch({
-          selection: {
-            anchor: view.posAtDOM(link2)
-          }
-        });
-      };
-    }
-    return link2;
-  }
-};
-var buildDecorations2 = (view, options) => {
-  const builder = new RangeSetBuilder();
-  const { state } = view;
-  const cursor = state.selection.main.head;
-  for (const { from, to } of view.visibleRanges) {
-    syntaxTree2(state).iterate({
-      enter: (node) => {
-        if (node.name === "Link") {
-          const marks2 = node.node.getChildren("LinkMark");
-          const text = marks2.length >= 2 ? state.sliceDoc(marks2[0].to, marks2[1].from) : "";
-          const urlNode = node.node.getChild("URL");
-          const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : "";
-          if (!url) {
-            return false;
-          }
-          if (!view.hasFocus || state.readOnly || cursor < node.from || cursor > node.to) {
-            builder.add(node.from, node.to, Decoration6.replace({
-              widget: new LinkText(text, options.link ? url : void 0)
-            }));
-          }
-          if (options.onRender) {
-            builder.add(node.to, node.to, Decoration6.replace({
-              widget: new LinkButton(url, options.onRender)
-            }));
-          }
-          return false;
-        }
-      },
-      from,
-      to
-    });
-  }
-  return builder.finish();
-};
-
-// packages/ui/react-ui-editor/src/extensions/listener.ts
-import { EditorView as EditorView8 } from "@codemirror/view";
-var listener = ({ onFocus, onChange }) => {
-  const extensions = [];
-  onFocus && extensions.push(EditorView8.focusChangeEffect.of((_, focused) => {
-    onFocus(focused);
-    return null;
-  }));
-  onChange && extensions.push(EditorView8.updateListener.of((update2) => {
-    onChange(update2.state.doc.toString());
-  }));
-  return extensions;
+// packages/ui/react-ui-editor/src/extensions/listener.ts
+import { EditorView as EditorView6 } from "@codemirror/view";
+var listener = ({ onFocus, onChange }) => {
+  const extensions = [];
+  onFocus && extensions.push(EditorView6.focusChangeEffect.of((_, focused) => {
+    onFocus(focused);
+    return null;
+  }));
+  onChange && extensions.push(EditorView6.updateListener.of((update2) => {
+    onChange(update2.state.doc.toString());
+  }));
+  return extensions;
 };
 
 // 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 { 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 EditorView7, highlightActiveLine as highlightActiveLine2, keymap as keymap4, placeholder as placeholder2 } from "@codemirror/view";
+import { isNotFalsy as isNotFalsy2 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
 import { markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
@@ -1757,7 +1550,7 @@ var markdownHighlightStyle = (readonly) => {
         markdownTags.QuoteMark,
         markdownTags.EmphasisMark
       ],
-      class: readonly ? "hidden" : mark
+      class: mark
     },
     // E.g., code block language (after ```).
     {
@@ -1765,7 +1558,7 @@ var markdownHighlightStyle = (readonly) => {
         tags.function(tags.variableName),
         tags.labelName
       ],
-      class: readonly ? "hidden" : codeMark
+      class: codeMark
     },
     {
       tag: [
@@ -1776,27 +1569,27 @@ var markdownHighlightStyle = (readonly) => {
     // Headings.
     {
       tag: tags.heading1,
-      class: heading(1, readonly)
+      class: heading(1)
     },
     {
       tag: tags.heading2,
-      class: heading(2, readonly)
+      class: heading(2)
     },
     {
       tag: tags.heading3,
-      class: heading(3, readonly)
+      class: heading(3)
     },
     {
       tag: tags.heading4,
-      class: heading(4, readonly)
+      class: heading(4)
     },
     {
       tag: tags.heading5,
-      class: heading(5, readonly)
+      class: heading(5)
     },
     {
       tag: tags.heading6,
-      class: heading(6, readonly)
+      class: heading(6)
     },
     // Emphasis.
     {
@@ -1822,7 +1615,7 @@ var markdownHighlightStyle = (readonly) => {
     // However, since `codeLanguages` is also defined, the `lezer` will not parse fenced code blocks,
     // when a language is specified. In this case, the syntax highlighting extensions will colorize
     // the code, but all other CSS properties will be inherited.
-    // IMPORTANT: Therefore, the fenced code block will use the base editor font.
+    // IMPORTANT: Therefore, the fenced code block will use the base editor font unless changed by an extension.
     {
       tag: [
         markdownTags.CodeText,
@@ -1851,19 +1644,19 @@ var markdownHighlightStyle = (readonly) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
-var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
+var createMarkdownExtensions = ({ themeMode, placeholder: _placeholder, lineWrapping = true } = {}) => {
   return [
+    lineWrapping && EditorView7.lineWrapping,
     EditorState.allowMultipleSelections.of(true),
     EditorState.tabSize.of(2),
-    EditorView9.lineWrapping,
-    customKeymap(),
+    // https://github.com/codemirror/basic-setup
     bracketMatching2(),
     closeBrackets2(),
     crosshairCursor(),
     dropCursor(),
     drawSelection2(),
-    highlightActiveLine(),
-    history(),
+    highlightActiveLine2(),
+    history2(),
     indentOnInput(),
     _placeholder && placeholder2(_placeholder),
     // Main extension.
@@ -1887,58 +1680,602 @@ 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
-]);
-
-// packages/ui/react-ui-editor/src/extensions/mention.ts
-import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
-var mention = ({ onSearch }) => {
-  return autocompletion2({
-    closeOnBlur: false,
-    override: [
-      (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) => ({
-            label: `@${value}`
-          }))
-        };
-      }
-    ]
-  });
+    syntaxHighlighting2(markdownHighlightStyle()),
+    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
+    ])
+  ].filter(isNotFalsy2);
 };
 
-// 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 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)
+// packages/ui/react-ui-editor/src/extensions/markdown/code.ts
+import { syntaxTree } from "@codemirror/language";
+import { RangeSetBuilder } from "@codemirror/state";
+import { ViewPlugin as ViewPlugin3, EditorView as EditorView8, Decoration as Decoration3, WidgetType as WidgetType2 } from "@codemirror/view";
+import { mx as mx2 } from "@dxos/react-ui-theme";
+var styles3 = EditorView8.baseTheme({
+  "& .cm-code": {
+    fontFamily: getToken("fontFamily.mono", []).join(",")
+  },
+  "& .cm-codeblock": {
+    width: "100%",
+    paddingInline: "1rem !important",
+    position: "relative",
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      inset: 0
+    }
+  },
+  "&light .cm-codeblock": {
+    "&::after": {
+      background: getToken("extend.semanticColors.input.light"),
+      mixBlendMode: "darken"
+    }
+  },
+  "&dark .cm-codeblock": {
+    "&::after": {
+      background: getToken("extend.semanticColors.input.dark"),
+      mixBlendMode: "lighten"
+    }
+  },
+  "& .cm-codeblock-first": {
+    display: "inline-block",
+    "&::after": {
+      borderTopLeftRadius: ".5rem",
+      borderTopRightRadius: ".5rem"
+    }
+  },
+  "& .cm-codeblock-last": {
+    display: "inline-block",
+    "&::after": {
+      borderBottomLeftRadius: ".5rem",
+      borderBottomRightRadius: ".5rem"
+    }
+  }
+});
+var getLineRange = (lines, from, to) => {
+  const start = lines.findIndex((line) => line.from >= from);
+  const end = lines.findIndex((line) => line.to >= to);
+  return [
+    start,
+    end
+  ];
+};
+var LineWidget = class extends WidgetType2 {
+  constructor(_className) {
+    super();
+    this._className = _className;
+  }
+  toDOM() {
+    const el = document.createElement("span");
+    el.innerHTML = "&nbsp;";
+    el.className = mx2("cm-code cm-codeblock", this._className);
+    return el;
+  }
+};
+var top = new LineWidget("cm-codeblock-first");
+var bottom = new LineWidget("cm-codeblock-last");
+var buildDecorations = (view) => {
+  const builder = new RangeSetBuilder();
+  const { state } = view;
+  const blocks = view.viewportLineBlocks;
+  const cursor = state.selection.main.head;
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree(state).iterate({
+      enter: (node) => {
+        if (node.name === "FencedCode") {
+          const edit = !view.state.readOnly && cursor >= node.from && cursor <= node.to;
+          const range = getLineRange(blocks, node.from, node.to);
+          for (let i = range[0]; i <= range[1]; i++) {
+            const block = blocks[i];
+            if (!edit && (i === range[0] || i === range[1])) {
+              builder.add(block.from, block.to, Decoration3.replace({
+                widget: i === range[0] ? top : bottom
+              }));
+            } else {
+              builder.add(block.from, block.from, Decoration3.line({
+                class: mx2("cm-code cm-codeblock", i === range[0] && "cm-codeblock-first", i === range[1] && "cm-codeblock-last")
+              }));
+            }
+          }
+        }
+      },
+      from,
+      to
+    });
+  }
+  return builder.finish();
+};
+var code2 = () => {
+  return [
+    ViewPlugin3.fromClass(class {
+      constructor(view) {
+        this.decorations = buildDecorations(view);
+      }
+      update(update2) {
+        this.decorations = buildDecorations(update2.view);
+      }
+    }, {
+      decorations: (value) => value.decorations
+    }),
+    styles3
+  ];
+};
+
+// packages/ui/react-ui-editor/src/extensions/markdown/formatting.ts
+import { snippet } from "@codemirror/autocomplete";
+import { syntaxTree as syntaxTree2 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder2 } from "@codemirror/state";
+import { Decoration as Decoration4, keymap as keymap5, ViewPlugin as ViewPlugin4 } from "@codemirror/view";
+var setHeading = (level) => (view) => {
+  const { selection: { ranges }, doc } = view.state;
+  const changes = [];
+  for (const range of ranges) {
+    const { number } = doc.lineAt(range.anchor);
+    const { from, to } = doc.line(number);
+    const line = doc.sliceString(from, to);
+    const [_, marks, spaces] = line.match(/(#+)(\s+)/) ?? [];
+    const current = marks?.length ?? 0;
+    if (level !== current) {
+      changes.push({
+        from,
+        to: from + current + (spaces?.length ?? 0),
+        insert: "#".repeat(level) + (level > 0 ? " " : "")
+      });
+    }
+  }
+  if (changes.length) {
+    view.dispatch({
+      changes
+    });
+  }
+  return true;
+};
+var toggleStyle = (mark2) => (view) => {
+  const { ranges } = view.state.selection;
+  for (const range of ranges) {
+    if (range.from === range.to) {
+      return false;
+    }
+    view.dispatch({
+      changes: [
+        {
+          from: range.from,
+          insert: mark2
+        },
+        {
+          from: range.to,
+          insert: mark2
+        }
+      ]
+    });
+  }
+  return true;
+};
+var snippets = {
+  codeblock: snippet([
+    "```#{lang}",
+    "	#{}",
+    "```"
+  ].join("\n")),
+  table: snippet([
+    "| #{col1} | #{col2} |",
+    "| ---- | ---- |",
+    "| #{val1} | #{val2} |",
+    "| #{val3} | #{val4} |"
+  ].join("\n"))
+};
+var insertCodeblock = (view) => {
+  const { selection: { main }, doc } = view.state;
+  const { number } = doc.lineAt(main.anchor);
+  const { from } = doc.line(number);
+  snippets.codeblock(view, null, from, from);
+};
+var insertTable = (view) => {
+  const { selection: { main }, doc } = view.state;
+  const { number } = doc.lineAt(main.anchor);
+  const { from } = doc.line(number);
+  snippets.table(view, null, from, from);
+};
+var toggleBold = toggleStyle("**");
+var toggleItalic = toggleStyle("_");
+var toggleStrikethrough = toggleStyle("~~");
+var toggleList = (view) => {
+};
+var formatting = (options = {}) => {
+  return [
+    keymap5.of([
+      {
+        key: "meta-b",
+        run: toggleBold
+      }
+    ]),
+    styling()
+  ];
+};
+var styling = () => {
+  const buildDecorations7 = (view) => {
+    const builder = new RangeSetBuilder2();
+    const { state } = view;
+    const cursor = state.selection.main.head;
+    const replace = (node, marks) => {
+      if (cursor <= node.from || cursor >= node.to) {
+        for (const mark2 of marks) {
+          builder.add(mark2.from, mark2.to, Decoration4.replace({}));
+        }
+      }
+    };
+    for (const { from, to } of view.visibleRanges) {
+      syntaxTree2(state).iterate({
+        enter: (node) => {
+          switch (node.name) {
+            case "Emphasis":
+            case "StrongEmphasis": {
+              const marks = node.node.getChildren("EmphasisMark");
+              replace(node, marks);
+              break;
+            }
+            case "Strikethrough": {
+              const marks = node.node.getChildren("StrikethroughMark");
+              replace(node, marks);
+              break;
+            }
+          }
+        },
+        from,
+        to
+      });
+    }
+    return builder.finish();
+  };
+  return [
+    ViewPlugin4.fromClass(class {
+      constructor(view) {
+        this.decorations = buildDecorations7(view);
+      }
+      update(update2) {
+        this.decorations = buildDecorations7(update2.view);
+      }
+    }, {
+      decorations: (value) => value.decorations
+    })
+  ];
+};
+
+// packages/ui/react-ui-editor/src/extensions/markdown/heading.ts
+import { syntaxTree as syntaxTree3 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder3 } from "@codemirror/state";
+import { Decoration as Decoration5, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
+var buildDecorations2 = (view) => {
+  const builder = new RangeSetBuilder3();
+  const { state } = view;
+  const cursor = state.selection.main.head;
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree3(state).iterate({
+      enter: (node) => {
+        switch (node.name) {
+          case "ATXHeading1":
+          case "ATXHeading2":
+          case "ATXHeading3":
+          case "ATXHeading4":
+          case "ATXHeading5":
+          case "ATXHeading6": {
+            const mark2 = node.node.getChild("HeaderMark");
+            if (mark2) {
+              if (!view.hasFocus || view.state.readOnly || cursor < node.from || cursor > node.to) {
+                builder.add(mark2.from, mark2.to + 1, Decoration5.replace({}));
+              }
+            }
+          }
+        }
+      },
+      from,
+      to
+    });
+  }
+  return builder.finish();
+};
+var heading2 = () => {
+  return [
+    ViewPlugin5.fromClass(class {
+      constructor(view) {
+        this.decorations = buildDecorations2(view);
+      }
+      update(update2) {
+        this.decorations = buildDecorations2(update2.view);
+      }
+    }, {
+      decorations: (value) => value.decorations
+    })
+  ];
+};
+
+// packages/ui/react-ui-editor/src/extensions/markdown/hr.ts
+import { syntaxTree as syntaxTree4 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder4 } from "@codemirror/state";
+import { Decoration as Decoration6, EditorView as EditorView9, ViewPlugin as ViewPlugin6, WidgetType as WidgetType3 } from "@codemirror/view";
+var styles4 = EditorView9.baseTheme({
+  "& .cm-hr": {
+    // Note that block-level decorations should not have vertical margins,
+    borderTop: `1px solid ${getToken("extend.colors.neutral.200")}`
+  }
+});
+var HorizontalRuleWidget = class extends WidgetType3 {
+  toDOM() {
+    const el = document.createElement("div");
+    el.className = "cm-hr";
+    return el;
+  }
+};
+var decoration = Decoration6.replace({
+  widget: new HorizontalRuleWidget()
+});
+var buildDecorations3 = (view) => {
+  const builder = new RangeSetBuilder4();
+  const { state } = view;
+  const cursor = state.selection.main.head;
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree4(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 [
+    ViewPlugin6.fromClass(class {
+      constructor(view) {
+        this.decorations = buildDecorations3(view);
+      }
+      update(update2) {
+        this.decorations = buildDecorations3(update2.view);
+      }
+    }, {
+      decorations: (value) => value.decorations
+    }),
+    styles4
+  ];
+};
+
+// packages/ui/react-ui-editor/src/extensions/markdown/image.ts
+import { syntaxTree as syntaxTree5 } from "@codemirror/language";
+import { StateField as StateField3 } from "@codemirror/state";
+import { Decoration as Decoration7, EditorView as EditorView10, WidgetType as WidgetType4 } from "@codemirror/view";
+var image = (options = {}) => {
+  return StateField3.define({
+    create: (state) => {
+      return Decoration7.set(buildDecorations4(0, state.doc.length, state));
+    },
+    update: (value, tr) => {
+      if (!tr.docChanged && !tr.selection) {
+        return value;
+      }
+      const cursor = tr.state.selection.main.head;
+      const oldCursor = tr.changes.mapPos(tr.startState.selection.main.head);
+      let from = Math.min(cursor, oldCursor);
+      let to = Math.max(cursor, oldCursor);
+      tr.changes.iterChangedRanges((fromA, toA, fromB, toB) => {
+        from = Math.min(from, fromB);
+        to = Math.max(to, toB);
+      });
+      from = tr.state.doc.lineAt(from).from;
+      to = tr.state.doc.lineAt(to).to;
+      return value.map(tr.changes).update({
+        filterFrom: from,
+        filterTo: to,
+        filter: () => false,
+        add: buildDecorations4(from, to, tr.state)
+      });
+    },
+    provide: (field) => EditorView10.decorations.from(field)
+  });
+};
+var buildDecorations4 = (from, to, state) => {
+  const decorations = [];
+  const cursor = state.selection.main.head;
+  syntaxTree5(state).iterate({
+    enter: (node) => {
+      if (node.name === "Image") {
+        const urlNode = node.node.getChild("URL");
+        if (urlNode) {
+          const hide = state.readOnly || cursor < node.from || cursor > node.to;
+          const url = state.sliceDoc(urlNode.from, urlNode.to);
+          decorations.push(Decoration7.replace({
+            block: true,
+            widget: new ImageWidget(url)
+          }).range(hide ? node.from : node.to, node.to));
+        }
+      }
+    },
+    from,
+    to
+  });
+  return decorations;
+};
+var ImageWidget = class extends WidgetType4 {
+  constructor(_url) {
+    super();
+    this._url = _url;
+  }
+  eq(other) {
+    return this._url === other._url;
+  }
+  toDOM(view) {
+    const img = document.createElement("img");
+    img.setAttribute("src", this._url);
+    img.setAttribute("class", "cm-image");
+    img.onload = () => img.classList.add("cm-loaded-image");
+    return img;
+  }
+};
+
+// packages/ui/react-ui-editor/src/extensions/markdown/link.ts
+import { syntaxTree as syntaxTree6 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder5 } from "@codemirror/state";
+import { hoverTooltip as hoverTooltip2, Decoration as Decoration8, ViewPlugin as ViewPlugin7, WidgetType as WidgetType5 } from "@codemirror/view";
+import { tooltipContent } from "@dxos/react-ui-theme";
+var link = (options = {}) => {
+  const extensions = [
+    ViewPlugin7.fromClass(class {
+      constructor(view) {
+        this.decorations = buildDecorations5(view, options);
+      }
+      update(update2) {
+        if (update2.docChanged || update2.viewportChanged || update2.selectionSet) {
+          this.decorations = buildDecorations5(update2.view, options);
+        }
+      }
+    }, {
+      decorations: (value) => value.decorations
+    })
+  ];
+  if (options.onHover) {
+    extensions.push(
+      // https://codemirror.net/examples/tooltip
+      // https://codemirror.net/docs/ref/#view.hoverTooltip
+      // https://github.com/codemirror/view/blob/main/src/tooltip.ts
+      hoverTooltip2((view, pos, side) => {
+        const syntax = syntaxTree6(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;
+        }
+        const url = link2 && link2.getChild("URL");
+        if (!url || !link2) {
+          return null;
+        }
+        const urlText = view.state.sliceDoc(url.from, url.to);
+        return {
+          pos: link2.from,
+          end: link2.to,
+          above: true,
+          create: () => {
+            const el = document.createElement("div");
+            el.className = tooltipContent({}, "pli-2 plb-1");
+            options.onHover(el, urlText);
+            return {
+              dom: el,
+              offset: {
+                x: 0,
+                y: 4
+              }
+            };
+          }
+        };
+      })
+    );
+  }
+  return extensions;
+};
+var LinkButton = class extends WidgetType5 {
+  constructor(_url, _onAttach) {
+    super();
+    this._url = _url;
+    this._onAttach = _onAttach;
+  }
+  eq(other) {
+    return this._url === other._url;
+  }
+  toDOM(view) {
+    const el = document.createElement("span");
+    this._onAttach(el, this._url);
+    return el;
+  }
+};
+var LinkText = class extends WidgetType5 {
+  constructor(_text, _url) {
+    super();
+    this._text = _text;
+    this._url = _url;
+  }
+  eq(other) {
+    return this._url === other._url;
+  }
+  toDOM(view) {
+    const link2 = document.createElement("a");
+    link2.setAttribute("class", "cm-link");
+    link2.textContent = this._text;
+    if (this._url) {
+      link2.setAttribute("rel", "noreferrer");
+      link2.setAttribute("target", "_blank");
+      link2.href = this._url;
+    } else {
+      link2.onclick = () => {
+        view.dispatch({
+          selection: {
+            anchor: view.posAtDOM(link2)
+          }
+        });
+      };
+    }
+    return link2;
+  }
+};
+var buildDecorations5 = (view, options) => {
+  const builder = new RangeSetBuilder5();
+  const { state } = view;
+  const cursor = state.selection.main.head;
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree6(state).iterate({
+      enter: (node) => {
+        if (node.name === "Link") {
+          const marks = node.node.getChildren("LinkMark");
+          const text = marks.length >= 2 ? state.sliceDoc(marks[0].to, marks[1].from) : "";
+          const urlNode = node.node.getChild("URL");
+          const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : "";
+          if (!url) {
+            return false;
+          }
+          if (!view.hasFocus || state.readOnly || cursor < node.from || cursor > node.to) {
+            builder.add(node.from, node.to, Decoration8.replace({
+              widget: new LinkText(text, options.link ? url : void 0)
+            }));
+          }
+          if (options.onRender) {
+            builder.add(node.to, node.to, Decoration8.replace({
+              widget: new LinkButton(url, options.onRender)
+            }));
+          }
+          return false;
+        }
+      },
+      from,
+      to
+    });
+  }
+  return builder.finish();
+};
+
+// packages/ui/react-ui-editor/src/extensions/markdown/table.ts
+import { syntaxTree as syntaxTree7 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder6, StateField as StateField4 } from "@codemirror/state";
+import { Decoration as Decoration9, EditorView as EditorView11, WidgetType as WidgetType6 } from "@codemirror/view";
+var table = (options = {}) => {
+  return StateField4.define({
+    create: (state) => update(state, options),
+    update: (_, tr) => update(tr.state, options),
+    provide: (field) => EditorView11.decorations.from(field)
   });
 };
 var update = (state, options) => {
-  const builder = new RangeSetBuilder2();
+  const builder = new RangeSetBuilder6();
   const cursor = state.selection.main.head;
   const tables = [];
   const getTable = () => tables[tables.length - 1];
@@ -1946,7 +2283,7 @@ var update = (state, options) => {
     const table2 = getTable();
     return table2.rows?.[table2.rows.length - 1];
   };
-  syntaxTree3(state).iterate({
+  syntaxTree7(state).iterate({
     enter: (node) => {
       switch (node.name) {
         case "Table": {
@@ -1978,16 +2315,16 @@ 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({
+    hide && builder.add(table2.from, table2.to, Decoration9.replace({
       widget: new TableWidget(table2)
     }));
-    builder.add(table2.from, table2.to, Decoration7.mark({
+    builder.add(table2.from, table2.to, Decoration9.mark({
       class: "cm-table"
     }));
   });
   return builder.finish();
 };
-var TableWidget = class extends WidgetType5 {
+var TableWidget = class extends WidgetType6 {
   constructor(_table) {
     super();
     this._table = _table;
@@ -2024,11 +2361,20 @@ 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";
-var CheckboxWidget = class extends WidgetType6 {
+// packages/ui/react-ui-editor/src/extensions/markdown/tasklist.ts
+import { syntaxTree as syntaxTree8 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder7 } from "@codemirror/state";
+import { EditorView as EditorView12, Decoration as Decoration10, WidgetType as WidgetType7, ViewPlugin as ViewPlugin8 } 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) {
     super();
     this._checked = _checked;
@@ -2038,6 +2384,7 @@ var CheckboxWidget = class extends WidgetType6 {
   }
   toDOM(view) {
     const input = document.createElement("input");
+    input.className = "cm-task-checkbox";
     input.type = "checkbox";
     input.checked = this._checked;
     if (view.state.readOnly) {
@@ -2064,39 +2411,27 @@ var CheckboxWidget = class extends WidgetType6 {
     return false;
   }
 };
-var checkedDeco = Decoration8.replace({
+var checkedDecoration = Decoration10.replace({
   widget: new CheckboxWidget(true)
 });
-var uncheckedDeco = Decoration8.replace({
+var uncheckedDecoration = Decoration10.replace({
   widget: new CheckboxWidget(false)
 });
-var tasklist = (options = {}) => {
-  return ViewPlugin6.fromClass(class {
-    constructor(view) {
-      this.decorations = buildDecorations3(view);
-    }
-    update(update2) {
-      if (update2.docChanged || update2.viewportChanged || update2.selectionSet) {
-        this.decorations = buildDecorations3(update2.view);
-      }
-    }
-  }, {
-    decorations: (v) => v.decorations,
-    provide: (plugin) => EditorView11.atomicRanges.of((view) => {
-      return view.plugin(plugin)?.decorations || Decoration8.none;
-    })
-  });
-};
-var buildDecorations3 = (view) => {
-  const builder = new RangeSetBuilder3();
+var buildDecorations6 = (view) => {
+  const builder = new RangeSetBuilder7();
   const { state } = view;
   const cursor = state.selection.main.head;
   for (const { from, to } of view.visibleRanges) {
-    syntaxTree4(state).iterate({
+    syntaxTree8(state).iterate({
       enter: (node) => {
-        if (node.name === "TaskMarker" && (cursor < node.from || cursor > node.to)) {
-          const checked = state.doc.sliceString(node.from + 1, node.to - 1) === "x";
-          builder.add(node.from, node.to, checked ? checkedDeco : uncheckedDeco);
+        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, Decoration10.mark({
+              class: "cm-task"
+            }));
+            builder.add(node.from, node.to, checked ? checkedDecoration : uncheckedDecoration);
+          }
         }
       },
       from,
@@ -2105,9 +2440,60 @@ var buildDecorations3 = (view) => {
   }
   return builder.finish();
 };
+var tasklist = (options = {}) => {
+  return [
+    ViewPlugin8.fromClass(class {
+      constructor(view) {
+        this.decorations = buildDecorations6(view);
+      }
+      update(update2) {
+        if (update2.docChanged || update2.viewportChanged || update2.selectionSet) {
+          this.decorations = buildDecorations6(update2.view);
+        }
+      }
+    }, {
+      decorations: (value) => value.decorations
+    }),
+    styles5
+  ];
+};
+
+// 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;
+        }
+        return {
+          from: match.from,
+          options: onSearch(match.text.slice(1).toLowerCase()).map((value) => ({
+            label: `@${value}`
+          }))
+        };
+      }
+    ]
+  });
+};
+
+// packages/ui/react-ui-editor/src/extensions/outliner.ts
+var outliner = (options = {}) => {
+  return [];
+};
 
 // packages/ui/react-ui-editor/src/extensions/typewriter.ts
-import { keymap as keymap5 } from "@codemirror/view";
+import { keymap as keymap6 } from "@codemirror/view";
 var defaultItems = [
   "hello world!",
   "this is a test.",
@@ -2117,7 +2503,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   let t;
   let idx = 0;
   return [
-    keymap5.of([
+    keymap6.of([
       {
         // Reset.
         key: "alt-meta-'",
@@ -2163,27 +2549,6 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/extensions/yjs/yjs.ts
-import { yCollab } from "y-codemirror.next";
-
-// packages/ui/react-ui-editor/src/extensions/yjs/cursor.ts
-import * as Y from "yjs";
-import { arrayToString, stringToArray } from "@dxos/util";
-var cursorConverter2 = (text) => ({
-  toCursor: (index, assoc) => {
-    return arrayToString(Y.encodeRelativePosition(Y.createRelativePositionFromTypeIndex(text, index, assoc)));
-  },
-  fromCursor: (cursor) => {
-    return Y.createAbsolutePositionFromRelativePosition(Y.decodeRelativePosition(stringToArray(cursor)), text.doc)?.index ?? 0;
-  }
-});
-
-// packages/ui/react-ui-editor/src/extensions/yjs/yjs.ts
-var yjs = (content, awareness2) => [
-  Cursor.converter.of(cursorConverter2(content)),
-  yCollab(content, awareness2)
-];
-
 // packages/ui/react-ui-editor/src/themes/default.ts
 import get3 from "lodash.get";
 var defaultTheme = {
@@ -2215,8 +2580,9 @@ var defaultTheme = {
     outline: "none"
   },
   ".cm-scroller": {
-    overflow: "visible",
-    fontFamily: get3(tokens, "fontFamily.mono", []).join(",")
+    // overflow: 'visible',
+    fontFamily: get3(tokens, "fontFamily.mono", []).join(","),
+    lineHeight: 1.4
   },
   ".cm-content": {
     padding: 0,
@@ -2250,7 +2616,7 @@ var defaultTheme = {
     paddingInline: 0
   },
   ".cm-activeLine": {
-    background: "inherit"
+    background: "transparent"
   },
   //
   // Selection
@@ -2421,90 +2787,88 @@ var codeTheme = {
 };
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx";
 var EditorModes = [
   "default",
   "vim"
 ];
-var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, focus, selection, readonly, comments: comments2, extensions = [], editorMode, theme, slots = defaultSlots }, forwardedRef) => {
-  const tabsterDOMAttribute = useFocusableGroup({
-    tabBehavior: "limited"
-  });
+var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, scrollTo, selection, editorMode, theme, slots = defaultSlots, extensions = [], debug }, forwardedRef) => {
   const { themeMode } = useThemeContext();
   const rootRef = useRef(null);
   const [view, setView] = useState(null);
   useImperativeHandle(forwardedRef, () => view, [
     view
   ]);
-  useEffect(() => {
-    if (view && focus) {
-      view.focus();
-    }
-  }, [
-    view,
-    focus
-  ]);
-  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 !== void 0) {
-      view.dispatch({
-        effects: setCommentRange.of({
-          model,
-          comments: comments2
-        })
-      });
+  useEffect2(() => {
+    if (autoFocus && !view?.hasFocus) {
+      if (view?.state.selection.main?.from === 0) {
+        const { to } = view.state.doc.lineAt(0);
+        view?.dispatch({
+          selection: {
+            anchor: to
+          }
+        });
+      }
+      view?.focus();
     }
   }, [
     view,
-    comments2
+    autoFocus
   ]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!model || !rootRef.current) {
       return;
     }
     const state = EditorState2.create({
       doc: model.text(),
-      // TODO(burdon): Composer should store and set selection when switching documents.
       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_file3,
+            L: 134,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+        }),
         // Theme.
-        // TODO(burdon): Make theme configurable.
-        EditorView12.baseTheme(defaultTheme),
-        EditorView12.theme(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.
+        EditorView13.editable.of(!readonly),
+        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/Enter below).
+        editorMode === "vim" && vim(),
         // Custom.
         ...extensions
-      ].filter(Boolean)
+      ].filter(isNotFalsy3)
     });
-    view?.destroy();
-    const newView = new EditorView12({
+    const newView = new EditorView13({
+      state,
       parent: rootRef.current,
-      state
+      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 () => {
       newView?.destroy();
@@ -2520,8 +2884,14 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, focus, selection, read
   const handleKeyUp = useCallback((event) => {
     const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
     switch (key) {
+      case "Enter": {
+        view?.focus();
+        break;
+      }
       case "Escape": {
-        editorMode === "vim" && (altKey || shiftKey || metaKey || ctrlKey) && rootRef.current?.focus();
+        if (editorMode === "vim" && (altKey || shiftKey || metaKey || ctrlKey)) {
+          view?.focus();
+        }
         break;
       }
     }
@@ -2532,24 +2902,24 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, focus, selection, read
   return /* @__PURE__ */ React.createElement("div", {
     key: model.id,
     role: "none",
-    ref: rootRef,
     tabIndex: 0,
-    onKeyUp: handleKeyUp,
     ...slots.root,
-    ...editorMode !== "vim" && tabsterDOMAttribute
+    // {...(editorMode !== 'vim' && tabsterDOMAttribute)}
+    onKeyUp: handleKeyUp,
+    ref: rootRef
   });
 });
-var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, extensions = [], theme = textTheme, slots, ...props }, forwardedRef) => {
+var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, lineWrapping, theme = textTheme, slots, extensions = [], ...props }, forwardedRef) => {
   const { themeMode } = useThemeContext();
   const updatedSlots = defaultsDeep2({}, slots, defaultTextSlots);
   return /* @__PURE__ */ React.createElement(BaseTextEditor, {
     ref: forwardedRef,
     readonly,
     extensions: [
-      basicBundle({
-        readonly,
+      createBasicBundle({
         themeMode,
-        placeholder: placeholder3
+        placeholder: placeholder3,
+        lineWrapping
       }),
       ...extensions
     ],
@@ -2558,15 +2928,14 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholde
     ...props
   });
 });
-var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, extensions = [], theme = markdownTheme, slots, ...props }, forwardedRef) => {
+var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, theme = markdownTheme, slots, extensions = [], ...props }, forwardedRef) => {
   const { themeMode } = useThemeContext();
   const updatedSlots = defaultsDeep2({}, slots, defaultMarkdownSlots);
   return /* @__PURE__ */ React.createElement(BaseTextEditor, {
     ref: forwardedRef,
     readonly,
     extensions: [
-      markdownBundle({
-        readonly,
+      createMarkdownExtensions({
         themeMode,
         placeholder: placeholder3
       }),
@@ -2579,7 +2948,11 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeh
 });
 var defaultSlots = {
   root: {
-    className: mx3("p-2 overflow-y-auto", inputSurface)
+    // TODO(burdon): Add focusRing by default/as property?
+    className: mx3("flex flex-col grow overflow-y-auto", attentionSurface)
+  },
+  editor: {
+    className: "h-full p-2"
   }
 };
 var defaultTextSlots = {
@@ -2589,22 +2962,178 @@ var defaultMarkdownSlots = {
   ...defaultSlots
 };
 
-// packages/ui/react-ui-editor/src/hooks/automerge.ts
-import get4 from "lodash.get";
-import { getRawDoc } from "@dxos/echo-schema";
-import { isNotNullOrUndefined } from "@dxos/util";
+// packages/ui/react-ui-editor/src/components/Toolbar/Toolbar.tsx
+import { At, CaretRight, ChatText, Code, Image, Link, ListBullets, ListChecks, ListNumbers, TextStrikethrough, Table as Table2, TextB, TextItalic } from "@phosphor-icons/react";
+import { createContext } from "@radix-ui/react-context";
+import React2 from "react";
+import { Button, DensityProvider, Select } from "@dxos/react-ui";
+import { getSize } from "@dxos/react-ui-theme";
+var [ToolbarContextProvider, useToolbarContext] = createContext("Toolbar");
+var ToolbarRoot = ({ children, onAction }) => {
+  return /* @__PURE__ */ React2.createElement(ToolbarContextProvider, {
+    onAction
+  }, /* @__PURE__ */ React2.createElement(DensityProvider, {
+    density: "fine"
+  }, /* @__PURE__ */ React2.createElement("div", {
+    role: "toolbar",
+    className: "flex w-full shrink-0 p-2 gap-4 items-center whitespace-nowrap overflow-hidden"
+  }, children)));
+};
+var ToolbarButton = ({ Icon, onClick, title }) => {
+  const { onAction } = useToolbarContext("ToolbarButton");
+  const handleClick = () => {
+    const action = onClick();
+    if (action) {
+      onAction?.(action);
+    }
+  };
+  return /* @__PURE__ */ React2.createElement(Button, {
+    variant: "ghost",
+    classNames: "p-2",
+    onClick: handleClick,
+    title
+  }, /* @__PURE__ */ React2.createElement(Icon, {
+    className: getSize(5)
+  }));
+};
+var ToolbarSeparator = () => /* @__PURE__ */ React2.createElement("div", {
+  className: "grow"
+});
+var MarkdownHeading = () => {
+  const { onAction } = useToolbarContext("MarkdownFormatting");
+  return /* @__PURE__ */ React2.createElement(Select.Root, {
+    defaultValue: "0",
+    onValueChange: (value) => onAction?.({
+      type: "heading",
+      data: parseInt(value)
+    })
+  }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
+    classNames: "w-[8rem]"
+  }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, /* @__PURE__ */ React2.createElement(Select.Option, {
+    value: "0"
+  }, "Paragraph"), [
+    1,
+    2,
+    3,
+    4,
+    5,
+    6
+  ].map((level) => /* @__PURE__ */ React2.createElement(Select.Option, {
+    key: level,
+    value: String(level)
+  }, "Heading ", level))))));
+};
+var MarkdownStyles = () => /* @__PURE__ */ React2.createElement("div", {
+  role: "none"
+}, /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  Icon: TextB,
+  title: "Bold",
+  onClick: () => ({
+    type: "bold"
+  })
+}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  Icon: TextItalic,
+  title: "Italic",
+  onClick: () => ({
+    type: "italic"
+  })
+}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  Icon: TextStrikethrough,
+  title: "Strike-through",
+  onClick: () => ({
+    type: "strikethrough"
+  })
+}));
+var MarkdownLists = () => /* @__PURE__ */ React2.createElement("div", {
+  role: "none"
+}, /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  Icon: ListBullets,
+  title: "Bullet list",
+  onClick: () => ({
+    type: "list"
+  })
+}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  Icon: ListNumbers,
+  title: "Numbered list",
+  onClick: () => ({
+    type: "list-ordered"
+  })
+}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  Icon: ListChecks,
+  title: "Task list",
+  onClick: () => ({
+    type: "list-tasks"
+  })
+}));
+var MarkdownBlocks = () => /* @__PURE__ */ React2.createElement("div", {
+  role: "none"
+}, /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  Icon: CaretRight,
+  title: "Block quite",
+  onClick: () => ({
+    type: "blockquote"
+  })
+}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  Icon: Code,
+  title: "Code block",
+  onClick: () => ({
+    type: "codeblock"
+  })
+}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  Icon: Table2,
+  title: "Table",
+  onClick: () => ({
+    type: "table"
+  })
+}));
+var MarkdownLinks = () => /* @__PURE__ */ React2.createElement("div", {
+  role: "none"
+}, /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  Icon: Link,
+  title: "Link",
+  onClick: () => ({
+    type: "link"
+  })
+}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  Icon: At,
+  title: "Mention",
+  onClick: () => ({
+    type: "mention"
+  })
+}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  Icon: Image,
+  title: "Image",
+  onClick: () => ({
+    type: "image"
+  })
+}));
+var MarkdownStandard = () => /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(MarkdownHeading, null), /* @__PURE__ */ React2.createElement(MarkdownStyles, null), /* @__PURE__ */ React2.createElement(MarkdownLists, null), /* @__PURE__ */ React2.createElement(MarkdownBlocks, null), /* @__PURE__ */ React2.createElement(MarkdownLinks, null));
+var MarkdownExtended = () => /* @__PURE__ */ React2.createElement(Toolbar.Button, {
+  Icon: ChatText,
+  title: "Create comment",
+  onClick: () => ({
+    type: "comment"
+  })
+});
+var Toolbar = {
+  Root: ToolbarRoot,
+  Button: ToolbarButton,
+  Separator: ToolbarSeparator,
+  Markdown: MarkdownStandard,
+  Extended: MarkdownExtended
+};
 
 // 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 invariant2 } 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 DEBOUNCE_INTERVAL = 100;
 var SpaceAwarenessProvider = class {
   constructor(params) {
-    this.remoteStateChange = new Event2();
     this._remoteStates = /* @__PURE__ */ new Map();
+    this.remoteStateChange = new Event2();
     this._space = params.space;
     this._channel = params.channel;
     this._peerId = params.peerId;
@@ -2621,7 +3150,7 @@ var SpaceAwarenessProvider = class {
         await sleep(DEBOUNCE_INTERVAL);
       }
     });
-    const unsubscribe = this._space.listen(this._channel, (message) => {
+    this._ctx.onDispose(this._space.listen(this._channel, (message) => {
       switch (message.payload.kind) {
         case "query": {
           this._handleQueryMessage();
@@ -2632,8 +3161,7 @@ var SpaceAwarenessProvider = class {
           break;
         }
       }
-    });
-    this._ctx.onDispose(unsubscribe);
+    }));
     void this._space.postMessage(this._channel, {
       kind: "query"
     }).catch((err) => {
@@ -2641,7 +3169,7 @@ var SpaceAwarenessProvider = class {
         err
       }, {
         F: __dxlog_file4,
-        L: 85,
+        L: 89,
         S: this,
         C: (f, a) => f(...a)
       });
@@ -2652,10 +3180,13 @@ var SpaceAwarenessProvider = class {
     this._ctx = void 0;
     this._postTask = void 0;
   }
+  getRemoteStates() {
+    return Array.from(this._remoteStates.values());
+  }
   update(position) {
-    invariant3(this._postTask, void 0, {
+    invariant2(this._postTask, void 0, {
       F: __dxlog_file4,
-      L: 96,
+      L: 104,
       S: this,
       A: [
         "this._postTask",
@@ -2669,13 +3200,10 @@ var SpaceAwarenessProvider = class {
     };
     this._postTask.schedule();
   }
-  getRemoteStates() {
-    return Array.from(this._remoteStates.values());
-  }
   _handleQueryMessage() {
-    invariant3(this._postTask, void 0, {
+    invariant2(this._postTask, void 0, {
       F: __dxlog_file4,
-      L: 111,
+      L: 115,
       S: this,
       A: [
         "this._postTask",
@@ -2685,9 +3213,9 @@ var SpaceAwarenessProvider = class {
     this._postTask.schedule();
   }
   _handlePostMessage(message) {
-    invariant3(message.kind === "post", void 0, {
+    invariant2(message.kind === "post", void 0, {
       F: __dxlog_file4,
-      L: 116,
+      L: 120,
       S: this,
       A: [
         "message.kind === 'post'",
@@ -2699,199 +3227,231 @@ 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/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 { invariant as invariant4 } from "@dxos/invariant";
-import { log as log4 } from "@dxos/log";
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/yjs.ts";
-var createYjsModel = ({ identity, space, text }) => {
-  invariant4(text?.doc && text?.content, void 0, {
-    F: __dxlog_file5,
-    L: 21,
-    S: void 0,
-    A: [
-      "text?.doc && text?.content",
-      ""
-    ]
-  });
-  const provider = space ? new YAwarenessProvider({
-    space,
-    doc: text.doc,
-    channel: `yjs.awareness.${text.id}`
-  }) : void 0;
-  const model = {
-    id: text.doc.guid,
-    content: text.content,
-    text: () => text.content.toString(),
-    extension: [
-      modelState.init(() => model),
-      yjs(text.content, provider?.awareness)
-    ],
-    awareness: provider?.awareness,
-    peer: identity ? {
-      id: identity.identityKey.toHex(),
-      name: identity.profile?.displayName
-    } : void 0
-  };
-  return model;
-};
-var messageAwareness = 1;
-var messageQueryAwareness = 3;
-var YAwarenessProvider = class extends Observable {
-  constructor({ space, doc, channel, awareness: awareness2 }) {
-    super();
-    this._space = space;
-    this._awareness = awareness2 ?? new YP.Awareness(doc);
-    this._channel = channel;
-    this._clientId = doc.clientID;
-    this._awareness.on("update", this._handleAwarenessUpdate.bind(this));
-    this._space.listen(this._channel, this._handleSpaceMessage.bind(this));
-    if (typeof window !== "undefined") {
-      window.addEventListener("beforeunload", this._handleBeforeUnload.bind(this));
-    } else if (typeof process !== "undefined") {
-      process.on("exit", this._handleBeforeUnload.bind(this));
+// packages/ui/react-ui-editor/src/hooks/useActionHandler.ts
+var useActionHandler = (view) => {
+  return (action) => {
+    if (!view) {
+      return;
     }
-    const encoderAwarenessQuery = encoding.createEncoder();
-    encoding.writeVarUint(encoderAwarenessQuery, messageQueryAwareness);
-    void this._space.postMessage(this._channel, encoding.toUint8Array(encoderAwarenessQuery));
-    const encoderAwarenessState = encoding.createEncoder();
-    encoding.writeVarUint(encoderAwarenessState, messageAwareness);
-    encoding.writeVarUint8Array(encoderAwarenessState, YP.encodeAwarenessUpdate(this.awareness, [
-      this._clientId
-    ]));
-    void this._space.postMessage(this._channel, encoding.toUint8Array(encoderAwarenessState));
-  }
-  get awareness() {
-    return this._awareness;
-  }
-  _handleAwarenessUpdate({ added, updated, removed }, origin) {
-    log4("awareness update", {
-      added,
-      updated,
-      removed,
-      origin
-    }, {
-      F: __dxlog_file5,
-      L: 100,
-      S: this,
-      C: (f, a) => f(...a)
-    });
-    const changedClients = added.concat(updated).concat(removed);
-    const encoderAwareness = encoding.createEncoder();
-    encoding.writeVarUint(encoderAwareness, messageAwareness);
-    encoding.writeVarUint8Array(encoderAwareness, YP.encodeAwarenessUpdate(this._awareness, changedClients));
-    void this._space.postMessage(this._channel, encoding.toUint8Array(encoderAwareness));
-  }
-  _handleSpaceMessage({ payload }) {
-    log4("space message", payload, {
-      F: __dxlog_file5,
-      L: 109,
-      S: this,
-      C: (f, a) => f(...a)
+    switch (action.type) {
+      case "heading":
+        setHeading(parseInt(action.data))(view);
+        break;
+      case "bold":
+        toggleBold(view);
+        break;
+      case "italic":
+        toggleItalic(view);
+        break;
+      case "strikethrough":
+        toggleStrikethrough(view);
+        break;
+      case "list":
+        toggleList(view);
+        break;
+      case "codeblock":
+        insertCodeblock(view);
+        break;
+      case "table":
+        insertTable(view);
+        break;
+      case "comment":
+        createComment(view);
+        break;
+    }
+    setTimeout(() => {
+      view.focus();
+      view.dispatch({
+        selection: view.state.selection
+      });
     });
-    const data = new Uint8Array(Array.from(Object.values(payload)));
-    const encoder = this._readMessage(data);
-    if (encoder) {
-      void this._space.postMessage(this._channel, encoding.toUint8Array(encoder));
+  };
+};
+
+// packages/ui/react-ui-editor/src/hooks/useEditorView.ts
+import { useState as useState2 } from "react";
+var useEditorView = () => {
+  const [view, setView] = useState2(null);
+  return [
+    (ref) => {
+      setView(ref);
+    },
+    view
+  ];
+};
+
+// packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
+import { EditorSelection, EditorState as EditorState3 } from "@codemirror/state";
+import { EditorView as EditorView14 } from "@codemirror/view";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+import { log as log4 } from "@dxos/log";
+import { isNotFalsy as isNotFalsy4 } from "@dxos/util";
+var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
+var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions } = {}) => {
+  const onUpdate = useRef2();
+  const [view, setView] = useState3();
+  const parentRef = useRef2(null);
+  useEffect3(() => {
+    if (parentRef.current) {
+      const state = EditorState3.create({
+        doc,
+        selection,
+        extensions: [
+          // TODO(burdon): Doesn't catch errors in keymap functions.
+          EditorView14.exceptionSink.of((err) => {
+            log4.catch(err, void 0, {
+              F: __dxlog_file5,
+              L: 57,
+              S: void 0,
+              C: (f, a) => f(...a)
+            });
+          }),
+          extensions,
+          EditorView14.updateListener.of(() => {
+            onUpdate.current?.();
+          })
+        ].filter(isNotFalsy4)
+      });
+      const view2 = new EditorView14({
+        parent: parentRef.current,
+        scrollTo,
+        state,
+        // NOTE: Uncomment to debug/monitor all transactions.
+        // https://codemirror.net/docs/ref/#view.EditorView.dispatch
+        dispatchTransactions: (trs, view3) => {
+          if (debug) {
+            logChanges(trs);
+          }
+          view3.update(trs);
+        }
+      });
+      setView(view2);
     }
-  }
-  _readMessage(message) {
-    const decoder = decoding.createDecoder(message);
-    const encoder = encoding.createEncoder();
-    const messageType = decoding.readVarUint(decoder);
-    let sendReply = false;
-    switch (messageType) {
-      case messageAwareness: {
-        YP.applyAwarenessUpdate(this._awareness, decoding.readVarUint8Array(decoder), this);
-        break;
+    return () => {
+      view?.destroy();
+    };
+  }, [
+    parentRef
+  ]);
+  useEffect3(() => {
+    if (view) {
+      if (!selection && !view.state.selection.main.anchor) {
+        selection = EditorSelection.single(view.state.doc.line(1).to);
       }
-      case messageQueryAwareness: {
-        encoding.writeVarUint(encoder, messageAwareness);
-        encoding.writeVarUint8Array(encoder, YP.encodeAwarenessUpdate(this._awareness, Array.from(this._awareness.getStates().keys())));
-        sendReply = true;
-        break;
+      if (selection || scrollTo) {
+        onUpdate.current = () => {
+          onUpdate.current = void 0;
+          view.dispatch({
+            selection,
+            effects: scrollTo && [
+              scrollTo
+            ],
+            scrollIntoView: !scrollTo
+          });
+        };
       }
-      default: {
-        console.error("Invalid message:", messageType);
-        return encoder;
+      if (autoFocus) {
+        view.focus();
       }
     }
-    if (!sendReply) {
-      return null;
-    }
-    return encoder;
-  }
-  _handleBeforeUnload() {
-    YP.removeAwarenessStates(this._awareness, [
-      this._clientId
-    ], "window unload");
-  }
+  }, [
+    view,
+    autoFocus,
+    selection,
+    scrollTo
+  ]);
+  return {
+    parentRef,
+    view
+  };
+};
+var createDataExtensions = ({ readonly = false } = {}) => {
+  return [
+    //
+    EditorState3.readOnly.of(readonly),
+    EditorView14.editable.of(!readonly)
+  ];
+};
+var createThemeExtensions = ({ theme, themeMode, slots } = {}) => {
+  return [
+    //
+    EditorView14.baseTheme(defaultTheme),
+    theme && EditorView14.theme(theme),
+    EditorView14.darkTheme.of(themeMode === "dark"),
+    EditorView14.editorAttributes.of({
+      class: slots?.editor?.className ?? ""
+    }),
+    EditorView14.contentAttributes.of({
+      class: slots?.content?.className ?? ""
+    })
+  ].filter(isNotFalsy4);
 };
 
 // packages/ui/react-ui-editor/src/hooks/useTextModel.ts
-var modelState = StateField5.define({
-  create: () => void 0,
-  update: (model) => model
-});
+import get4 from "lodash.get";
+import { useEffect as useEffect4, useState as useState4 } from "react";
+import { generateName } from "@dxos/display-name";
+import { getRawDoc } from "@dxos/echo-schema";
+import { invariant as invariant3 } from "@dxos/invariant";
+import { isAutomergeObject } from "@dxos/react-client/echo";
+var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextModel.ts";
 var useTextModel = (props) => {
   const { identity, space, text } = props;
-  const [model, setModel] = useState2();
-  useEffect2(() => setModel(createModel(props)), [
+  const [model, setModel] = useState4();
+  useEffect4(() => setModel(createModel(props)), [
     identity,
     space,
     text
   ]);
   return model;
 };
-var createModel = (props) => {
-  const { text } = props;
-  if (isAutomergeObject(text)) {
-    return createAutomergeModel(props);
-  } else if (text?.doc) {
-    return createYjsModel(props);
-  } else {
-    return void 0;
-  }
-};
-
-// packages/ui/react-ui-editor/src/hooks/automerge.ts
-var createAutomergeModel = ({ space, identity, text }) => {
+var createModel = ({ space, identity, text }) => {
+  invariant3(isAutomergeObject(text), void 0, {
+    F: __dxlog_file6,
+    L: 34,
+    S: void 0,
+    A: [
+      "isAutomergeObject(text)",
+      ""
+    ]
+  });
   const obj = text;
   const doc = getRawDoc(obj, [
     obj.field
   ]);
-  const awarenessProvider = space && new SpaceAwarenessProvider({
+  const awarenessProvider2 = space && new SpaceAwarenessProvider({
     space,
     channel: `automerge.awareness.${obj.id}`,
     info: {
-      displayName: identity?.profile?.displayName ?? "",
+      displayName: identity ? identity.profile?.displayName ?? generateName(identity.identityKey.toHex()) : void 0,
       color: cursorColor.color,
       lightColor: cursorColor.light
     },
     peerId: identity?.identityKey.toHex() ?? "Anonymous"
   });
+  const extensions = [
+    //
+    modelState.init(() => model),
+    automerge({
+      handle: doc.handle,
+      path: doc.path
+    })
+  ];
+  if (awarenessProvider2) {
+    extensions.push(awareness(awarenessProvider2));
+  }
   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),
+    extension: extensions,
     peer: identity ? {
       id: identity.identityKey.toHex(),
       name: identity.profile?.displayName
@@ -2900,7 +3460,6 @@ var createAutomergeModel = ({ space, identity, text }) => {
   return model;
 };
 export {
-  AwarenessProvider,
   BaseTextEditor,
   Cursor,
   Doc,
@@ -2910,47 +3469,64 @@ export {
   SpaceAwarenessProvider,
   TextEditor,
   TextKind,
-  YAwarenessProvider,
+  Toolbar,
   YText,
   YXmlFragment,
   autocomplete,
-  automerge3 as automerge,
+  automerge,
   awareness,
-  basicBundle,
+  awarenessProvider,
   blast,
   callbackWrapper,
   code2 as code,
   codeTheme,
   comments,
-  createAutomergeModel,
-  createYjsModel,
-  cursorConverter,
+  createBasicBundle,
+  createComment,
+  createDataExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
   defaultMarkdownSlots,
   defaultOptions,
   defaultSlots,
   defaultTextSlots,
   defaultTheme,
+  focusComment,
+  formatting,
   getToken,
+  heading2 as heading,
   hr,
   image,
+  insertCodeblock,
+  insertTable,
   link,
   listener,
-  markdownBundle,
+  logChanges,
   markdownHighlightStyle,
   markdownTags,
   markdownTagsExtensions,
   markdownTheme,
   mention,
   modelState,
-  setCommentRange,
-  setFocus,
+  outliner,
+  setComments,
+  setHeading,
   setSelection,
   table,
   tags2 as tags,
   tasklist,
   textTheme,
+  toggleBold,
+  toggleItalic,
+  toggleList,
+  toggleStrikethrough,
+  toggleStyle,
   typewriter,
+  useActionHandler,
+  useComments,
+  useEditorView,
+  useTextEditor,
   useTextModel,
-  yjs
+  useToolbarContext
 };
 //# sourceMappingURL=index.mjs.map