@dxos/react-ui-editor 0.3.11-main.b00882f → 0.3.11-main.b3f97d8

package/dist/lib/browser/index.mjs

@@ -1,20 +1,21 @@
 // packages/ui/react-ui-editor/src/index.ts
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 import { Doc, YText, YXmlFragment } from "@dxos/text-model";
+import { keymap as keymap7 } from "@codemirror/view";
 
 // packages/ui/react-ui-editor/src/components/TextEditor/index.ts
 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 EditorView13 } from "@codemirror/view";
-import { useFocusableGroup } from "@fluentui/react-tabster";
+import { EditorView as EditorView14 } from "@codemirror/view";
 import { vim } from "@replit/codemirror-vim";
 import defaultsDeep2 from "lodash.defaultsdeep";
-import React, { forwardRef, useCallback, useEffect as useEffect3, useImperativeHandle, useRef, useState } from "react";
+import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState as useState2 } from "react";
 import { log as log2 } from "@dxos/log";
-import { useThemeContext as useThemeContext2 } from "@dxos/react-ui";
-import { inputSurface, mx as mx3 } from "@dxos/react-ui-theme";
+import { useThemeContext } from "@dxos/react-ui";
+import { focusRing, 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";
@@ -53,14 +54,14 @@ var autocomplete = ({ onSearch }) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
+import { invertedEffects } from "@codemirror/commands";
 import { StateField } from "@codemirror/state";
 import { EditorView, ViewPlugin } from "@codemirror/view";
-import { next as A } from "@dxos/automerge/automerge";
-import { invariant } from "@dxos/invariant";
+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) => {
@@ -72,7 +73,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 === "") {
@@ -90,26 +91,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 reconcileAnnotationType = Annotation.define();
 var getPath = (state, field) => state.field(field).path;
 var getLastHeads = (state, field) => state.field(field).lastHeads;
-var updateHeads = (newHeads) => effectType.of({
+var updateHeadsEffect = StateEffect.define({});
+var updateHeads = (newHeads) => updateHeadsEffect.of({
   newHeads
 });
-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;
@@ -122,11 +125,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;
 };
@@ -141,13 +152,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) => {
@@ -168,7 +179,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,
@@ -246,36 +257,37 @@ var PatchSemaphore = class {
     this._state = _state;
     this._inReconcile = false;
   }
-  // NOTE: Cannot destruct view.state.
   reconcile(view) {
-    if (this._inReconcile) {
-      return;
+    if (!this._inReconcile) {
+      this._inReconcile = true;
+      this.doReconcile(view);
+      this._inReconcile = false;
     }
-    this._inReconcile = true;
+  }
+  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) => !isReconcileTx(tx));
+    const transactions = view.state.field(this._state).unreconciledTransactions.filter((tx) => !isReconcile(tx));
     const toInvert = transactions.slice().reverse();
-    for (const tx of toInvert) {
-      const inverted = tx.changes.invert(tx.startState.doc);
+    for (const tr of toInvert) {
+      const inverted = tr.changes.invert(tr.startState.doc);
       selection = selection.map(inverted);
       view.dispatch({
         changes: inverted,
-        annotations: reconcileAnnotationType.of(true)
+        annotations: reconcileAnnotation.of(true)
       });
     }
     let newHeads = updateAutomerge(this._state, this._handle, transactions, view.state);
     if (newHeads === null || newHeads === void 0) {
-      newHeads = automerge2.getHeads(this._handle.docSync());
+      newHeads = A3.getHeads(this._handle.docSync());
     }
-    const diff = automerge2.equals(oldHeads, newHeads) ? [] : automerge2.diff(this._handle.docSync(), oldHeads, newHeads);
+    const diff = A3.equals(oldHeads, newHeads) ? [] : A3.diff(this._handle.docSync(), oldHeads, newHeads);
     updateCodeMirror(view, selection, path, diff);
     view.dispatch({
       effects: updateHeads(newHeads),
-      annotations: reconcileAnnotationType.of({})
+      annotations: reconcileAnnotation.of(false)
     });
-    this._inReconcile = false;
   }
 };
 
@@ -293,9 +305,9 @@ var Cursor = class _Cursor {
   }
   static {
     this.getCursorFromRange = (state, range) => {
-      const cursorConverter3 = state.facet(_Cursor.converter);
-      const from = cursorConverter3.toCursor(range.from);
-      const to = cursorConverter3.toCursor(range.to, -1);
+      const cursorConverter2 = state.facet(_Cursor.converter);
+      const from = cursorConverter2.toCursor(range.from);
+      const to = cursorConverter2.toCursor(range.to, -1);
       return [
         from,
         to
@@ -304,10 +316,10 @@ var Cursor = class _Cursor {
   }
   static {
     this.getRangeFromCursor = (state, cursor) => {
-      const cursorConverter3 = state.facet(_Cursor.converter);
+      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
@@ -317,12 +329,11 @@ var Cursor = class _Cursor {
 };
 
 // packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts";
-var automerge3 = ({ handle, path }) => {
-  const state = StateField.define({
+var automerge = ({ handle, path }) => {
+  const syncState = StateField.define({
     create: () => ({
       path: path.slice(),
-      lastHeads: A.getHeads(handle.docSync()),
+      lastHeads: A4.getHeads(handle.docSync()),
       unreconciledTransactions: []
     }),
     update: (value, tr) => {
@@ -333,7 +344,7 @@ var automerge3 = ({ handle, path }) => {
       };
       let clearUnreconciled = false;
       for (const effect of tr.effects) {
-        if (effect.is(effectType)) {
+        if (effect.is(updateHeadsEffect)) {
           result.lastHeads = effect.value.newHeads;
           clearUnreconciled = true;
         }
@@ -341,29 +352,21 @@ 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(handle, state);
+  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;
-        invariant(this._view, void 0, {
-          F: __dxlog_file,
-          L: 66,
-          S: this,
-          A: [
-            "this._view",
-            ""
-          ]
-        });
         handle.addListener("change", this._handleChange.bind(this));
       }
       destroy() {
@@ -379,65 +382,48 @@ var automerge3 = ({ handle, path }) => {
         semaphore.reconcile(view);
       }
     }),
-    state
+    // 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) => {
+        });
+      }
+      return effects;
+    })
   ];
 };
 
 // packages/ui/react-ui-editor/src/extensions/awareness.ts
 import { Annotation as Annotation2, Facet as Facet2, RangeSet } from "@codemirror/state";
 import { Decoration, EditorView as EditorView2, ViewPlugin as ViewPlugin2, WidgetType } from "@codemirror/view";
-import { useEffect } from "react";
 import { Event } from "@dxos/async";
 import { Context } from "@dxos/context";
-import { generateName } from "@dxos/display-name";
-import { useThemeContext } from "@dxos/react-ui";
-import { getColorForValue } from "@dxos/react-ui-theme";
 var dummyProvider = {
   remoteStateChange: new Event(),
   open: () => {
   },
   close: () => {
   },
+  getRemoteStates: () => [],
   update: () => {
-  },
-  getRemoteStates: () => []
+  }
 };
-var AwarenessProvider = Facet2.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
     }),
     styles
   ];
 };
-var useAwareness = ({ awareness: awareness2, peer }) => {
-  const { themeMode } = useThemeContext();
-  useEffect(() => {
-    if (awareness2 && peer) {
-      awareness2.setLocalStateField("user", {
-        name: peer.name ?? generateName(peer.id),
-        color: getColorForValue({
-          value: peer.id,
-          type: "color"
-        }),
-        colorLight: getColorForValue({
-          value: peer.id,
-          themeMode,
-          type: "highlight"
-        })
-      });
-    }
-  }, [
-    awareness2,
-    peer,
-    themeMode
-  ]);
-};
 var RemoteSelectionsDecorator = class {
   constructor(view) {
     this.decorations = RangeSet.of([]);
@@ -445,7 +431,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({
@@ -599,39 +585,41 @@ var styles = EditorView2.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",
+    borderRadius: "2px",
     // These should be separate.
     opacity: 0,
     transitionDelay: "0s",
@@ -649,24 +637,25 @@ import { history } from "@codemirror/commands";
 import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
 import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
 import { drawSelection, EditorView as EditorView3, highlightActiveLine, placeholder } from "@codemirror/view";
-var basicBundle = ({ themeMode, placeholder: _placeholder, lineWrapping = true }) => [
-  lineWrapping ? EditorView3.lineWrapping : [],
+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) : [],
+  _placeholder && placeholder(_placeholder),
   // https://github.com/codemirror/theme-one-dark
   themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)
-];
+].filter(isNotFalsy);
 
 // packages/ui/react-ui-editor/src/extensions/blast.ts
 import { EditorView as EditorView4, keymap as keymap2 } from "@codemirror/view";
 import defaultsDeep from "lodash.defaultsdeep";
-import { invariant as invariant2 } from "@dxos/invariant";
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
+import { invariant } from "@dxos/invariant";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
 var defaultOptions = {
   effect: 2,
   maxParticles: 200,
@@ -699,10 +688,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,
@@ -792,9 +781,9 @@ var Blaster = class {
     return this._node;
   }
   initialize() {
-    invariant2(!this._canvas && !this._ctx, void 0, {
-      F: __dxlog_file2,
-      L: 138,
+    invariant(!this._canvas && !this._ctx, void 0, {
+      F: __dxlog_file,
+      L: 141,
       S: this,
       A: [
         "!this._canvas && !this._ctx",
@@ -829,9 +818,9 @@ var Blaster = class {
     }
   }
   start() {
-    invariant2(this._canvas && this._ctx, void 0, {
-      F: __dxlog_file2,
-      L: 177,
+    invariant(this._canvas && this._ctx, void 0, {
+      F: __dxlog_file,
+      L: 180,
       S: this,
       A: [
         "this._canvas && this._ctx",
@@ -972,9 +961,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 EditorView5, 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";
@@ -1017,34 +1011,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);
@@ -1062,98 +1037,15 @@ 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 = EditorView5.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 buildDecorations5 = (view) => {
-    const decorations = [];
-    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 = buildDecorations5(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 = buildDecorations5(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 EditorView6 } from "@codemirror/view";
-import sortBy from "lodash.sortby";
-import { useEffect as useEffect2 } from "react";
-import { debounce } from "@dxos/async";
-import { invariant as invariant3 } from "@dxos/invariant";
-import { nonNullable } from "@dxos/util";
-
 // packages/ui/react-ui-editor/src/util.ts
 import { log } from "@dxos/log";
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util.ts";
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util.ts";
 var callbackWrapper = (fn) => (...args) => {
   try {
     return fn(...args);
   } catch (err) {
     log.catch(err, void 0, {
-      F: __dxlog_file3,
+      F: __dxlog_file2,
       L: 18,
       S: void 0,
       C: (f, a) => f(...a)
@@ -1181,24 +1073,35 @@ var logChanges = (trs) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/comments.ts
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
-var styles3 = EditorView6.baseTheme({
-  "& .cm-comment": {
+var styles2 = EditorView5.baseTheme({
+  "&light .cm-comment, &light .cm-comment-current": {
+    mixBlendMode: "darken"
+  },
+  "&dark .cm-comment, &dark .cm-comment-current": {
+    mixBlendMode: "plus-lighter"
+  },
+  "&light .cm-comment": {
     backgroundColor: getToken("extend.colors.yellow.50")
   },
-  "& .cm-comment-current": {
+  "&light .cm-comment-current": {
     backgroundColor: getToken("extend.colors.yellow.100")
+  },
+  "&dark .cm-comment": {
+    color: getToken("extend.colors.yellow.50"),
+    backgroundColor: getToken("extend.colors.yellow.900")
+  },
+  "&dark .cm-comment-current": {
+    color: getToken("extend.colors.yellow.100"),
+    backgroundColor: getToken("extend.colors.yellow.950")
   }
 });
-var marks = {
-  highlight: Decoration3.mark({
-    class: "cm-comment"
-  }),
-  highlightActive: Decoration3.mark({
-    class: "cm-comment-current"
-  })
-};
-var setFocus = (view, id, center = true) => {
+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;
@@ -1211,7 +1114,7 @@ var setFocus = (view, id, center = true) => {
       },
       effects: [
         //
-        EditorView6.scrollIntoView(range.from, center ? {
+        EditorView5.scrollIntoView(range.from, center ? {
           y: "center"
         } : void 0),
         setSelection.of({
@@ -1260,7 +1163,7 @@ var commentsState = StateField2.define({
     return value;
   }
 });
-var highlightDecorations = EditorView6.decorations.compute([
+var commentsDecorations = EditorView5.decorations.compute([
   commentsState
 ], (state) => {
   const { selection: { current }, comments: comments2 } = state.field(commentsState);
@@ -1271,12 +1174,12 @@ var highlightDecorations = EditorView6.decorations.compute([
       return void 0;
     }
     if (comment.comment.id === current) {
-      return marks.highlightActive.range(range.from, range.to);
+      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);
+  return Decoration2.set(decorations);
 });
 var trackPastedComments = (onUpdate) => {
   let tracked = null;
@@ -1298,96 +1201,140 @@ var trackPastedComments = (onUpdate) => {
     }
   };
   return [
-    EditorView6.domEventHandlers({
+    EditorView5.domEventHandlers({
       cut: handleTrack,
       copy: handleTrack
     }),
-    // Handle paste.
-    EditorView6.updateListener.of(({ view, state, transactions }) => {
+    // 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
+            }));
+          }
+        }
+      });
+      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 = transactions.find((tr) => tr.isUserEvent("input.paste"));
+        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 = transactions.indexOf(paste) + 1; i < transactions.length; i++) {
-                fromB = transactions[i].changes.mapPos(fromB);
+              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) {
-              const range = {
+              restore.push({
+                id: moved.id,
                 from: found + moved.from,
                 to: found + moved.to
-              };
-              const cursor = Cursor.getCursorFromRange(state, range);
-              onUpdate(moved.id, cursor);
+              });
             }
           }
           tracked = null;
         }
       }
+      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 comments = (options = {}) => {
-  const { key: shortcut = "meta-'" } = options;
-  const handleSelect = debounce((state) => options.onSelect?.(state), 200);
-  const createCommentThread = (view) => {
-    invariant3(options.onCreate, void 0, {
-      F: __dxlog_file4,
-      L: 259,
-      S: void 0,
-      A: [
-        "options.onCreate",
-        ""
-      ]
+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 { from, to } = view.state.selection.main;
-    if (from === to) {
-      return false;
-    }
-    if (to === view.state.doc.length) {
+  }
+  const cursor = Cursor.getCursorFromRange(view.state, {
+    from,
+    to
+  });
+  if (cursor) {
+    const id = options.onCreate?.({
+      cursor,
+      from,
+      location: view.coordsAtPos(from)
+    });
+    if (id) {
       view.dispatch({
-        changes: {
-          from: to,
-          insert: "\n"
+        effects: setSelection.of({
+          current: id
+        }),
+        selection: {
+          anchor: to
         }
       });
+      return true;
     }
-    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: from
-          }
-        });
-        return true;
-      }
-    }
-    return false;
-  };
+  }
+  return false;
+};
+var comments = (options = {}) => {
+  const { key: shortcut = "meta-'" } = options;
+  const handleSelect = debounce((state) => options.onSelect?.(state), 200);
   return [
+    optionsFacet.of(options),
     commentsState,
-    highlightDecorations,
-    styles3,
+    commentsDecorations,
+    styles2,
     //
     // Keymap.
     //
     options.onCreate ? keymap3.of([
       {
         key: shortcut,
-        run: callbackWrapper(createCommentThread)
+        run: callbackWrapper(createComment)
       }
     ]) : [],
     //
@@ -1423,7 +1370,7 @@ var comments = (options = {}) => {
     //
     // Track deleted ranges and update ranges for decorations.
     //
-    EditorView6.updateListener.of(({ view, state, changes }) => {
+    EditorView5.updateListener.of(({ view, state, changes }) => {
       let mod = false;
       const { comments: comments2, ...value } = state.field(commentsState);
       changes.iterChanges((from, to, from2, to2) => {
@@ -1453,7 +1400,7 @@ var comments = (options = {}) => {
     //
     // Track selection/proximity.
     //
-    EditorView6.updateListener.of(({ view, state }) => {
+    EditorView5.updateListener.of(({ view, state }) => {
       let min = Infinity;
       const { selection: { current, closest }, comments: comments2 } = state.field(commentsState);
       const { head } = state.selection.main;
@@ -1489,7 +1436,7 @@ var comments = (options = {}) => {
   ];
 };
 var useComments = (view, comments2 = []) => {
-  useEffect2(() => {
+  useEffect(() => {
     if (view) {
       view.dispatch({
         effects: setComments.of(comments2)
@@ -1501,329 +1448,66 @@ var useComments = (view, comments2 = []) => {
   ]);
 };
 
-// packages/ui/react-ui-editor/src/extensions/hr.ts
-import { syntaxTree } from "@codemirror/language";
-import { RangeSetBuilder } from "@codemirror/state";
-import { Decoration as Decoration4, EditorView as EditorView7, ViewPlugin as ViewPlugin4, WidgetType as WidgetType2 } from "@codemirror/view";
-var styles4 = EditorView7.baseTheme({
-  "& .cm-hr": {
-    // Note that block-level decorations should not have vertical margins,
-    borderTop: `1px solid ${getToken("extend.colors.neutral.200")}`
-  }
-});
-var HorizontalRuleWidget = class extends WidgetType2 {
-  toDOM() {
-    const el = document.createElement("div");
-    el.className = "cm-hr";
-    return el;
-  }
+// 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;
 };
-var decoration = Decoration4.replace({
-  widget: new HorizontalRuleWidget()
+
+// packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
+import { closeBrackets as closeBrackets2, closeBracketsKeymap } from "@codemirror/autocomplete";
+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 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";
+import { HighlightStyle } from "@codemirror/language";
+import { tags, styleTags, Tag } from "@lezer/highlight";
+import { Table } from "@lezer/markdown";
+var markdownTags = {
+  Blockquote: Tag.define(),
+  CodeMark: Tag.define(),
+  CodeText: Tag.define(),
+  EmphasisMark: Tag.define(),
+  HeaderMark: Tag.define(),
+  InlineCode: Tag.define(),
+  LinkLabel: Tag.define(),
+  LinkReference: Tag.define(),
+  ListMark: Tag.define(),
+  QuoteMark: Tag.define(),
+  URL: Tag.define(),
+  // Custom.
+  TableCell: Tag.define()
+};
+Table.defineNodes?.forEach((node) => {
+  switch (node?.name) {
+    case "TableCell": {
+      node.style = markdownTags.TableCell;
+      break;
+    }
+  }
 });
-var buildDecorations = (view) => {
-  const builder = new RangeSetBuilder();
-  const { state } = view;
-  const cursor = state.selection.main.head;
-  for (const { from, to } of view.visibleRanges) {
-    syntaxTree(state).iterate({
-      enter: (node) => {
-        if (node.name === "HorizontalRule") {
-          if (cursor <= node.from || cursor >= node.to) {
-            builder.add(node.from, node.to, decoration);
-          }
-        }
-      },
-      from,
-      to
-    });
-  }
-  return builder.finish();
-};
-var hr = () => {
-  return [
-    styles4,
-    ViewPlugin4.fromClass(class {
-      constructor(view) {
-        this.decorations = buildDecorations(view);
-      }
-      update(update2) {
-        this.decorations = buildDecorations(update2.view);
-      }
-    }, {
-      decorations: (v) => v.decorations
-    })
-  ];
-};
-
-// packages/ui/react-ui-editor/src/extensions/image.ts
-import { syntaxTree as syntaxTree2 } from "@codemirror/language";
-import { StateField as StateField3 } from "@codemirror/state";
-import { Decoration as Decoration5, EditorView as EditorView8, WidgetType as WidgetType3 } from "@codemirror/view";
-var image = (options = {}) => {
-  return StateField3.define({
-    create: (state) => {
-      return Decoration5.set(buildDecorations2(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: buildDecorations2(from, to, tr.state)
-      });
-    },
-    provide: (field) => EditorView8.decorations.from(field)
-  });
-};
-var buildDecorations2 = (from, to, state) => {
-  const decorations = [];
-  const cursor = state.selection.main.head;
-  syntaxTree2(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 syntaxTree3 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder2 } from "@codemirror/state";
-import { hoverTooltip as hoverTooltip2, Decoration as Decoration6, ViewPlugin as ViewPlugin5, WidgetType as WidgetType4 } from "@codemirror/view";
-import { tooltipContent } from "@dxos/react-ui-theme";
-var link = (options = {}) => {
-  const extensions = [
-    ViewPlugin5.fromClass(class {
-      constructor(view) {
-        this.decorations = buildDecorations3(view, options);
-      }
-      update(update2) {
-        if (update2.docChanged || update2.viewportChanged || update2.selectionSet) {
-          this.decorations = buildDecorations3(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 = syntaxTree3(view.state).resolveInner(pos, side);
-        let link2 = null;
-        for (let i = 0, node = syntax; !link2 && node && i < 5; node = node.parent, i++) {
-          link2 = node.name === "Link" ? node : null;
-        }
-        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 buildDecorations3 = (view, options) => {
-  const builder = new RangeSetBuilder2();
-  const { state } = view;
-  const cursor = state.selection.main.head;
-  for (const { from, to } of view.visibleRanges) {
-    syntaxTree3(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 EditorView9 } from "@codemirror/view";
-var listener = ({ onFocus, onChange }) => {
-  const extensions = [];
-  onFocus && extensions.push(EditorView9.focusChangeEffect.of((_, focused) => {
-    onFocus(focused);
-    return null;
-  }));
-  onChange && extensions.push(EditorView9.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 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 EditorView10, highlightActiveLine as highlightActiveLine2, keymap as keymap4, placeholder as placeholder2 } from "@codemirror/view";
-
-// packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
-import { markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
-import { HighlightStyle } from "@codemirror/language";
-import { tags, styleTags, Tag } from "@lezer/highlight";
-import { Table } from "@lezer/markdown";
-var markdownTags = {
-  Blockquote: Tag.define(),
-  CodeMark: Tag.define(),
-  CodeText: Tag.define(),
-  EmphasisMark: Tag.define(),
-  HeaderMark: Tag.define(),
-  InlineCode: Tag.define(),
-  LinkLabel: Tag.define(),
-  LinkReference: Tag.define(),
-  ListMark: Tag.define(),
-  QuoteMark: Tag.define(),
-  URL: Tag.define(),
-  // Custom.
-  TableCell: Tag.define()
-};
-Table.defineNodes?.forEach((node) => {
-  switch (node?.name) {
-    case "TableCell": {
-      node.style = markdownTags.TableCell;
-      break;
-    }
-  }
-});
-var markdownTagsExtensions = [
-  Table,
-  {
-    props: [
-      styleTags(markdownTags)
-    ]
+var markdownTagsExtensions = [
+  Table,
+  {
+    props: [
+      styleTags(markdownTags)
+    ]
   }
 ];
 var markdownHighlightStyle = (readonly) => {
@@ -1885,7 +1569,7 @@ var markdownHighlightStyle = (readonly) => {
         markdownTags.QuoteMark,
         markdownTags.EmphasisMark
       ],
-      class: readonly ? "hidden" : mark
+      class: mark
     },
     // E.g., code block language (after ```).
     {
@@ -1893,7 +1577,7 @@ var markdownHighlightStyle = (readonly) => {
         tags.function(tags.variableName),
         tags.labelName
       ],
-      class: readonly ? "hidden" : codeMark
+      class: codeMark
     },
     {
       tag: [
@@ -1904,27 +1588,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.
     {
@@ -1950,7 +1634,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,
@@ -1979,11 +1663,11 @@ 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),
-    EditorView10.lineWrapping,
     // https://github.com/codemirror/basic-setup
     bracketMatching2(),
     closeBrackets2(),
@@ -1993,7 +1677,7 @@ var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
     highlightActiveLine2(),
     history2(),
     indentOnInput(),
-    _placeholder ? placeholder2(_placeholder) : [],
+    _placeholder && placeholder2(_placeholder),
     // Main extension.
     // https://github.com/codemirror/lang-markdown
     // https://codemirror.net/5/mode/markdown/index.html (demo).
@@ -2015,7 +1699,7 @@ var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
     // https://github.com/codemirror/theme-one-dark
     themeMode === "dark" ? syntaxHighlighting2(oneDarkHighlightStyle2) : syntaxHighlighting2(defaultHighlightStyle2),
     // Custom styles.
-    syntaxHighlighting2(markdownHighlightStyle(readonly)),
+    syntaxHighlighting2(markdownHighlightStyle()),
     keymap4.of([
       // https://codemirror.net/docs/ref/#commands.indentWithTab
       indentWithTab,
@@ -2028,56 +1712,1519 @@ var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
       // https://codemirror.net/docs/ref/#commands.standardKeymap
       ...standardKeymap
     ])
-  ];
+  ].filter(isNotFalsy2);
 };
 
-// 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/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, EditorSelection } from "@codemirror/state";
+import { Decoration as Decoration4, EditorView as EditorView9, keymap as keymap5, ViewPlugin as ViewPlugin4 } from "@codemirror/view";
+import { useState, useMemo } from "react";
+var compareFormatting = (a, b) => a.blockType === b.blockType && a.strong === b.strong && a.emphasis === b.emphasis && a.strikethrough === b.strikethrough && a.code === b.code && a.link === b.link && a.listStyle === b.listStyle && a.blockquote === b.blockquote;
+var Inline;
+(function(Inline2) {
+  Inline2[Inline2["Strong"] = 0] = "Strong";
+  Inline2[Inline2["Emphasis"] = 1] = "Emphasis";
+  Inline2[Inline2["Strikethrough"] = 2] = "Strikethrough";
+  Inline2[Inline2["Code"] = 3] = "Code";
+})(Inline || (Inline = {}));
+var List;
+(function(List2) {
+  List2[List2["Ordered"] = 0] = "Ordered";
+  List2[List2["Bullet"] = 1] = "Bullet";
+  List2[List2["Task"] = 2] = "Task";
+})(List || (List = {}));
+var setHeading = (level) => ({ state, dispatch }) => {
+  const { selection: { ranges }, doc } = state;
+  const changes = [];
+  let prevBlock = -1;
+  for (const range of ranges) {
+    syntaxTree2(state).iterate({
+      from: range.from,
+      to: range.to,
+      enter: (node) => {
+        if (!Object.hasOwn(Textblocks, node.name) || prevBlock === node.from) {
+          return;
+        }
+        prevBlock = node.from;
+        const blockType = Textblocks[node.name];
+        const isHeading = /heading(\d)/.exec(blockType);
+        const curLevel = isHeading ? +isHeading[1] : node.name === "Paragraph" ? 0 : -1;
+        if (curLevel < 0 || curLevel === level) {
+          return;
+        }
+        if (curLevel === 0) {
+          changes.push({
+            from: node.from,
+            insert: "#".repeat(level) + " "
+          });
+        } else if (node.name === "SetextHeading1" || node.name === "SetextHeading2") {
+          const nextLine = doc.lineAt(node.to);
+          if (level) {
+            changes.push({
+              from: node.from,
+              insert: "#".repeat(level) + " "
+            });
+          }
+          changes.push({
+            from: nextLine.from - 1,
+            to: nextLine.to
+          });
+        } else {
+          if (level === 0) {
+            changes.push({
+              from: node.from,
+              to: Math.min(node.to, node.from + curLevel + 1)
+            });
+          } else if (level < curLevel) {
+            changes.push({
+              from: node.from,
+              to: node.from + (curLevel - level)
+            });
+          } else {
+            changes.push({
+              from: node.from,
+              insert: "#".repeat(level - curLevel)
+            });
+          }
+        }
+      }
+    });
+  }
+  if (!changes.length) {
+    return false;
+  }
+  dispatch(state.update({
+    changes,
+    userEvent: "format.setHeading",
+    scrollIntoView: true
+  }));
+  return true;
+};
+var setStyle = (type, enable) => ({ state, dispatch }) => {
+  const marker = inlineMarkerText(type);
+  const changes = state.changeByRange((range) => {
+    if (!enable && range.empty) {
+      const after = state.doc.sliceString(range.head, range.head + 6);
+      const found = after.indexOf(marker);
+      if (found >= 0 && /^[*~`]*$/.test(after.slice(0, found))) {
+        const before = state.doc.sliceString(range.head - 6, range.head);
+        if (before.slice(before.length - found - marker.length, before.length - found) === marker && [
+          ...before.slice(before.length - found)
+        ].reverse().join("") === after.slice(0, found)) {
+          return {
+            changes: [
+              {
+                from: range.head - marker.length - found,
+                to: range.head - found
+              },
+              {
+                from: range.head + found,
+                to: range.head + found + marker.length
+              }
+            ],
+            range: EditorSelection.cursor(range.from - marker.length)
+          };
+        }
+      }
+    }
+    const changes2 = [];
+    const changesAtEnd = [];
+    let blockStart = -1;
+    let blockEnd = -1;
+    let startCovered = false;
+    let endCovered = false;
+    let { from, to } = range;
+    syntaxTree2(state).iterate({
+      from,
+      to,
+      enter: (node) => {
+        const { name } = node;
+        if (Object.hasOwn(Textblocks, name) && Textblocks[name] !== "codeblock") {
+          blockStart = blockContentStart(node);
+          blockEnd = blockContentEnd(node, state.doc);
+          startCovered = endCovered = false;
+        } else if (name === "Link" || name === "Image" && enable) {
+          if (from < node.from && to > node.from && to <= node.to) {
+            to = node.to;
+          } else if (to > node.to && from >= node.from && from < node.to) {
+            from = node.from;
+          }
+        } else if (IgnoreInline.has(name) && enable) {
+          if (node.from < from && node.to > from) {
+            if (to === from) {
+              to = node.to;
+            }
+            from = node.to;
+          }
+          if (node.from < to && node.to > to) {
+            to = node.from;
+          }
+        } else if (Object.hasOwn(InlineMarker, name)) {
+          const markType = InlineMarker[name];
+          const size = inlineMarkerText(markType).length;
+          const openEnd = node.from + size;
+          const closeStart = node.to - size;
+          if (markType === type) {
+            if (openEnd <= from && closeStart >= from) {
+              startCovered = openEnd === from ? "adjacent" : true;
+            }
+            if (openEnd <= to && closeStart >= to) {
+              endCovered = closeStart === to ? "adjacent" : true;
+            }
+          }
+          if (markType === type || type === 3 && enable) {
+            if (node.from >= from && openEnd <= to) {
+              changes2.push({
+                from: node.from,
+                to: openEnd
+              });
+              if (markType !== type && closeStart >= to) {
+                changesAtEnd.push({
+                  from: skipSpaces(Math.min(to, blockEnd), state.doc, 1, blockEnd),
+                  insert: inlineMarkerText(markType)
+                });
+              }
+            }
+            if (closeStart >= from && node.to <= to) {
+              changes2.push({
+                from: closeStart,
+                to: node.to
+              });
+              if (markType !== type && openEnd <= from) {
+                changes2.push({
+                  from: skipSpaces(Math.max(from, blockStart), state.doc, -1, blockStart),
+                  insert: inlineMarkerText(markType)
+                });
+              }
+            }
+          }
+        }
+      },
+      leave: (node) => {
+        if (Object.hasOwn(Textblocks, node.name) && Textblocks[node.name] !== "codeblock") {
+          const rangeStart = Math.max(from, blockStart);
+          const rangeEnd = Math.min(to, blockEnd);
+          if (enable) {
+            if (!startCovered) {
+              changes2.push({
+                from: rangeStart,
+                insert: marker
+              });
+            }
+            if (!endCovered) {
+              changes2.push({
+                from: rangeEnd,
+                insert: marker
+              });
+            }
+          } else {
+            if (startCovered === "adjacent") {
+              changes2.push({
+                from: from - marker.length,
+                to: from
+              });
+            } else if (startCovered) {
+              changes2.push({
+                from: skipSpaces(rangeStart, state.doc, -1, blockStart),
+                insert: marker
+              });
+            }
+            if (endCovered === "adjacent") {
+              changes2.push({
+                from: to,
+                to: to + marker.length
+              });
+            } else if (endCovered) {
+              changes2.push({
+                from: skipSpaces(rangeEnd, state.doc, 1, blockEnd),
+                insert: marker
+              });
+            }
+          }
+        }
+      }
+    });
+    const changeSet = state.changes(changes2.concat(changesAtEnd));
+    return {
+      changes: changeSet,
+      range: range.empty && !changeSet.empty ? EditorSelection.cursor(range.head + marker.length) : EditorSelection.range(changeSet.mapPos(range.from, 1), changeSet.mapPos(range.to, -1))
+    };
+  });
+  dispatch(state.update(changes, {
+    userEvent: enable ? "format.style.add" : "format.style.remove",
+    scrollIntoView: true
+  }));
+  return true;
+};
+var addStyle = (style) => setStyle(style, true);
+var removeStyle = (style) => setStyle(style, false);
+var toggleStyle = (style) => (arg) => {
+  const form = getFormatting(arg.state);
+  return setStyle(style, style === 0 ? !form.strong : style === 1 ? !form.emphasis : style === 2 ? !form.strikethrough : !form.code)(arg);
+};
+var toggleStrong = toggleStyle(0);
+var toggleEmphasis = toggleStyle(1);
+var toggleStrikethrough = toggleStyle(2);
+var toggleInlineCode = toggleStyle(3);
+var inlineMarkerText = (type) => type === 0 ? "**" : type === 2 ? "~~" : type === 1 ? "*" : "`";
+var blockContentStart = (node) => {
+  const atx = /^ATXHeading(\d)/.exec(node.name);
+  if (atx) {
+    return Math.min(node.to, node.from + +atx[1] + 1);
+  }
+  return node.from;
+};
+var blockContentEnd = (node, doc) => {
+  const setext = /^SetextHeading(\d)/.exec(node.name);
+  const lastLine = doc.lineAt(node.to);
+  if (setext || /^[\s>]*$/.exec(lastLine.text)) {
+    return lastLine.from - 1;
+  }
+  return node.to;
+};
+var skipSpaces = (pos, doc, dir, limit) => {
+  const line = doc.lineAt(pos);
+  while (pos !== limit && line.text[pos - line.from - (dir < 0 ? 1 : 0)] === " ") {
+    pos += dir;
+  }
+  return pos;
+};
+var snippets = {
+  codeblock: snippet([
+    "```#{lang}",
+    "#{}",
+    "```"
+  ].join("\n")),
+  table: snippet([
+    "| #{col1} | #{col2} |",
+    "| ---- | ---- |",
+    "| #{val1} | #{val2} |",
+    "| #{val3} | #{val4} |"
+  ].join("\n"))
+};
+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 removeLinkInner = (from, to, changes, state) => {
+  syntaxTree2(state).iterate({
+    from,
+    to,
+    enter: (node) => {
+      if (node.name === "Link" && node.from < to && node.to > from) {
+        node.node.cursor().iterate((node2) => {
+          const { name } = node2;
+          if (name === "LinkMark" || name === "LinkLabel") {
+            changes.push({
+              from: node2.from,
+              to: node2.to
+            });
+          } else if (name === "LinkTitle" || name === "URL") {
+            changes.push({
+              from: skipSpaces(node2.from, state.doc, -1),
+              to: skipSpaces(node2.to, state.doc, 1)
+            });
+          }
+        });
+        return false;
+      }
+    }
+  });
+};
+var removeLink = ({ state, dispatch }) => {
+  const changes = [];
+  for (const { from, to } of state.selection.ranges) {
+    removeLinkInner(from, to, changes, state);
+  }
+  if (!changes) {
+    return false;
+  }
+  dispatch(state.update({
+    changes,
+    userEvent: "format.link.remove",
+    scrollIntoView: true
+  }));
+  return true;
+};
+var addLink = ({ state, dispatch }) => {
+  const changes = state.changeByRange((range) => {
+    let { from, to } = range;
+    const cutStyles = [];
+    let okay = null;
+    syntaxTree2(state).iterate({
+      from,
+      to,
+      enter: (node) => {
+        if (Object.hasOwn(Textblocks, node.name)) {
+          okay = Textblocks[node.name] !== "codeblock" && from >= blockContentStart(node) && to <= blockContentEnd(node, state.doc);
+        } else if (Object.hasOwn(InlineMarker, node.name)) {
+          const sNode = node.node;
+          if (node.from < from && node.to <= to) {
+            if (sNode.firstChild.to === from) {
+              from = node.from;
+            } else {
+              cutStyles.push(sNode);
+            }
+          } else if (node.from >= from && node.to > to) {
+            if (sNode.lastChild.from === to) {
+              to = node.to;
+            } else {
+              cutStyles.push(sNode);
+            }
+          }
+        }
+      }
+    });
+    if (okay === null) {
+      const line = state.doc.lineAt(from);
+      okay = to <= line.to && !/\S/.test(line.text.slice(from - line.from));
+    }
+    if (!okay) {
+      return {
+        range
+      };
+    }
+    const changes2 = [];
+    const changesAfter = [];
+    removeLinkInner(from, to, changesAfter, state);
+    let cursorOffset = 1;
+    for (const style of cutStyles) {
+      const type = InlineMarker[style.name];
+      const mark2 = inlineMarkerText(type);
+      if (style.from < from) {
+        changes2.push({
+          from: skipSpaces(from, state.doc, -1),
+          insert: mark2
+        });
+        changesAfter.push({
+          from: skipSpaces(from, state.doc, 1, to),
+          insert: mark2
+        });
+      } else {
+        changes2.push({
+          from: skipSpaces(to, state.doc, -1, from),
+          insert: mark2
+        });
+        const after = skipSpaces(to, state.doc, 1);
+        if (after === to) {
+          cursorOffset += mark2.length;
+        }
+        changesAfter.push({
+          from: after,
+          insert: mark2
+        });
+      }
+    }
+    changes2.push({
+      from,
+      insert: "["
+    }, {
+      from: to,
+      insert: "]()"
+    });
+    const changeSet = state.changes(changes2.concat(changesAfter));
+    return {
+      changes: changeSet,
+      range: EditorSelection.cursor(changeSet.mapPos(to, 1) - cursorOffset)
+    };
+  });
+  if (changes.changes.empty) {
+    return false;
+  }
+  dispatch(state.update(changes, {
+    userEvent: "format.link.add",
+    scrollIntoView: true
+  }));
+  return true;
+};
+var addList = (type) => ({ state, dispatch }) => {
+  let lastBlock = -1;
+  let counter = 1;
+  let first = true;
+  let parentColumn = null;
+  const blocks = [];
+  for (const { from, to } of state.selection.ranges) {
+    syntaxTree2(state).iterate({
+      from,
+      to,
+      enter: (node) => {
+        if (Object.hasOwn(Textblocks, node.name) && node.name !== "TableCell" || node.name === "Table") {
+          if (first) {
+            let before = node.node.prevSibling;
+            while (before && /Mark$/.test(before.name)) {
+              before = before.prevSibling;
+            }
+            if (before?.name === (type === 0 ? "OrderedList" : "BulletList")) {
+              const item = before.lastChild;
+              const itemLine = state.doc.lineAt(item.from);
+              const itemText = itemLine.text.slice(item.from - itemLine.from);
+              parentColumn = item.from - itemLine.from + /^\s*/.exec(itemText)[0].length;
+              if (type === 0) {
+                const mark2 = /^\s*(\d+)[.)]/.exec(itemText);
+                if (mark2) {
+                  parentColumn += mark2[1].length;
+                  counter = +mark2[1] + 1;
+                }
+              }
+            }
+            first = false;
+          }
+          if (node.from === lastBlock) {
+            return;
+          }
+          lastBlock = node.from;
+          blocks.push({
+            node: node.node,
+            counter,
+            parentColumn
+          });
+          counter++;
+          return false;
+        }
+      },
+      leave: (node) => {
+        if (node.name === "BulletList" || node.name === "OrderedList" || node.name === "Blockquote") {
+          counter = 1;
+          parentColumn = null;
+        }
+      }
+    });
+  }
+  if (!blocks.length) {
+    return false;
+  }
+  const changes = [];
+  for (let i = 0; i < blocks.length; i++) {
+    const { node, counter: counter2, parentColumn: parentColumn2 } = blocks[i];
+    const nodeFrom = node.name === "CodeBlock" ? node.from - 4 : node.from;
+    let padding = nodeFrom > 0 && !/\s/.test(state.doc.sliceString(nodeFrom - 1, nodeFrom)) ? 1 : 0;
+    if (type === 0) {
+      padding += String(counter2).length;
+    }
+    let line = state.doc.lineAt(nodeFrom);
+    const column = nodeFrom - line.from;
+    if (parentColumn2 !== null && parentColumn2 > column) {
+      padding = Math.max(padding, parentColumn2 - column);
+    }
+    let mark2;
+    if (type === 0) {
+      let max = counter2;
+      for (let j = i + 1; j < blocks.length; j++) {
+        if (blocks[j].counter !== max + 1) {
+          break;
+        }
+        max++;
+      }
+      const num = String(counter2);
+      padding = Math.max(String(max).length, padding);
+      mark2 = " ".repeat(Math.max(0, padding - num.length)) + num + ". ";
+    } else {
+      mark2 = " ".repeat(padding) + "- " + (type === 2 ? "[ ] " : "");
+    }
+    changes.push({
+      from: nodeFrom,
+      insert: mark2
+    });
+    while (line.to < node.to) {
+      line = state.doc.lineAt(line.to + 1);
+      const open = /^[\s>]*/.exec(line.text)[0].length;
+      changes.push({
+        from: line.from + Math.min(open, column),
+        insert: " ".repeat(mark2.length)
+      });
+    }
+  }
+  if (type === 0) {
+    const last = blocks[blocks.length - 1];
+    let next = last.node.nextSibling;
+    while (next && /Mark$/.test(next.name)) {
+      next = next.nextSibling;
+    }
+    if (next?.name === "OrderedList") {
+      renumberListItems(next.firstChild, last.counter + 1, changes, state.doc);
+    }
+  }
+  dispatch(state.update({
+    changes,
+    userEvent: "format.list.add",
+    scrollIntoView: true
+  }));
+  return true;
+};
+var removeList = (type) => ({ state, dispatch }) => {
+  let lastBlock = -1;
+  const changes = [];
+  const stack = [];
+  const targetNodeType = type === 0 ? "OrderedList" : type === 1 ? "BulletList" : "TaskList";
+  for (const { from, to } of state.selection.ranges) {
+    syntaxTree2(state).iterate({
+      from,
+      to,
+      enter: (node) => {
+        const { name } = node;
+        if (name === "BulletList" || name === "OrderedList" || name === "Blockquote") {
+          stack.push(name);
+        } else if (name === "Task" && stack[stack.length - 1] === "BulletList") {
+          stack[stack.length - 1] = "TaskList";
+        }
+      },
+      leave: (node) => {
+        const { name } = node;
+        if (name === "BulletList" || name === "OrderedList" || name === "Blockquote") {
+          stack.pop();
+        } else if (name === "ListItem" && stack[stack.length - 1] === targetNodeType && node.from !== lastBlock) {
+          lastBlock = node.from;
+          let line = state.doc.lineAt(node.from);
+          const mark2 = /^\s*(\d+[.)] |[-*+] (\[[ x]\] )?)/.exec(line.text.slice(node.from - line.from));
+          if (!mark2) {
+            return false;
+          }
+          const column = node.from - line.from;
+          changes.push({
+            from: node.from,
+            to: node.from + mark2[0].length
+          });
+          while (line.to < node.to) {
+            line = state.doc.lineAt(line.to + 1);
+            const open = /^[\s>]*/.exec(line.text)[0].length;
+            if (open > column) {
+              changes.push({
+                from: line.from + column,
+                to: line.from + Math.min(column + mark2[0].length, open)
+              });
+            }
+          }
+          if (node.to >= to) {
+            renumberListItems(node.node.nextSibling, 1, changes, state.doc);
+          }
+          return false;
+        }
+      }
+    });
+  }
+  if (!changes.length) {
+    return false;
+  }
+  dispatch(state.update({
+    changes,
+    userEvent: "format.list.remove",
+    scrollIntoView: true
+  }));
+  return true;
+};
+var toggleList = (type) => (target) => {
+  const formatting2 = getFormatting(target.state);
+  const active = formatting2.listStyle === (type === 1 ? "bullet" : type === 0 ? "ordered" : "task");
+  return (active ? removeList(type) : addList(type))(target);
+};
+var renumberListItems = (item, counter, changes, doc) => {
+  for (; item; item = item.nextSibling) {
+    if (item.name === "ListItem") {
+      const number = /(\s*)(\d+)[.)]/.exec(doc.sliceString(item.from, item.from + 10));
+      if (!number || +number[2] === counter) {
+        break;
+      }
+      const size = number[1].length + number[2].length;
+      const newNum = String(counter);
+      changes.push({
+        from: item.from + Math.max(0, size - newNum.length),
+        to: item.from + size,
+        insert: newNum
+      });
+      counter++;
+    }
+  }
+};
+var setBlockquote = (enable) => ({ state, dispatch }) => {
+  const lines = [];
+  let lastBlock = -1;
+  for (const { from, to } of state.selection.ranges) {
+    syntaxTree2(state).iterate({
+      from,
+      to,
+      enter: (node) => {
+        if (Object.hasOwn(Textblocks, node.name) || node.name === "Table") {
+          if (node.from === lastBlock) {
+            return false;
+          }
+          lastBlock = node.from;
+          let line = state.doc.lineAt(node.from);
+          if (line.number > 1) {
+            const prevLine = state.doc.line(line.number - 1);
+            if (/^[>\s]*$/.test(prevLine.text)) {
+              if (!enable || lines.length && lines[lines.length - 1].number === prevLine.number - 1) {
+                lines.push(prevLine);
+              }
+            }
+          }
+          for (; ; ) {
+            lines.push(line);
+            if (line.to >= node.to) {
+              break;
+            }
+            line = state.doc.line(line.number + 1);
+          }
+          if (!enable && line.number < state.doc.lines) {
+            const nextLine = state.doc.line(line.number + 1);
+            if (/^[>\s]*$/.test(nextLine.text)) {
+              lines.push(nextLine);
+            }
+          }
+          return false;
+        }
+      }
+    });
+  }
+  const changes = [];
+  for (const line of lines) {
+    if (enable) {
+      changes.push({
+        from: line.from,
+        insert: /\S/.test(line.text) ? "> " : ">"
+      });
+    } else {
+      const quote = /((?:[\s>\-+*]|\d+[.)])*?)> ?/.exec(line.text);
+      if (quote) {
+        changes.push({
+          from: line.from + quote[1].length,
+          to: line.from + quote[0].length
+        });
+      }
+    }
+  }
+  if (!changes.length) {
+    return false;
+  }
+  dispatch(state.update({
+    changes,
+    userEvent: enable ? "format.blockquote.add" : "format.blockquote.remove",
+    scrollIntoView: true
+  }));
+  return true;
+};
+var addBlockquote = setBlockquote(true);
+var removeBlockquote = setBlockquote(false);
+var toggleBlockquote = (target) => {
+  return (getFormatting(target.state).blockquote ? removeBlockquote : addBlockquote)(target);
+};
+var addCodeblock = (target) => {
+  const { state, dispatch } = target;
+  const { selection } = state;
+  if (selection.ranges.length === 1 && selection.main.empty) {
+    const { head } = selection.main;
+    const line = state.doc.lineAt(head);
+    if (!/\S/.test(line.text) && head === line.from) {
+      snippets.codeblock(target, null, line.from, line.to);
+      return true;
+    }
+  }
+  const ranges = [];
+  for (const { from, to } of selection.ranges) {
+    let blockFrom = from;
+    let blockTo = to;
+    syntaxTree2(state).iterate({
+      from,
+      to,
+      enter: (node) => {
+        if (Object.hasOwn(Textblocks, node.name)) {
+          if (from >= node.from && to <= node.to) {
+            blockFrom = node.from;
+            blockTo = node.to;
+          } else {
+            blockFrom = Math.min(blockFrom, state.doc.lineAt(node.from).from);
+            blockTo = Math.max(blockTo, state.doc.lineAt(node.to).to);
+          }
+        }
+      }
+    });
+    if (ranges.length && ranges[ranges.length - 1].to >= blockFrom - 1) {
+      ranges[ranges.length - 1].to = blockTo;
+    } else {
+      ranges.push({
+        from: blockFrom,
+        to: blockTo
+      });
+    }
+  }
+  if (!ranges.length) {
+    return false;
+  }
+  const changes = ranges.map(({ from, to }) => {
+    const column = from - state.doc.lineAt(from).from;
+    return [
+      {
+        from,
+        insert: "```\n" + " ".repeat(column)
+      },
+      {
+        from: to,
+        insert: "\n" + " ".repeat(column) + "```"
+      }
+    ];
+  });
+  dispatch(state.update({
+    changes,
+    userEvent: "format.codeblock.add",
+    scrollIntoView: true
+  }));
+  return true;
+};
+var removeCodeblock = ({ state, dispatch }) => {
+  const changes = [];
+  let lastBlock = -1;
+  for (const { from, to } of state.selection.ranges) {
+    syntaxTree2(state).iterate({
+      from,
+      to,
+      enter: (node) => {
+        if (Textblocks[node.name] === "codeblock" && lastBlock !== node.from) {
+          lastBlock = node.from;
+          const firstLine = state.doc.lineAt(node.from);
+          if (node.name === "FencedCode") {
+            changes.push({
+              from: node.from,
+              to: firstLine.to + 1 + node.from - firstLine.from
+            });
+            const lastLine = state.doc.lineAt(node.to);
+            if (/^([\s>]|[-*+] |\d+[).])*`+$/.test(lastLine.text)) {
+              changes.push({
+                from: lastLine.from - (lastLine.number === firstLine.number + 1 ? 0 : 1),
+                to: lastLine.to
+              });
+            }
+          } else {
+            const column = node.from - firstLine.from;
+            for (let line = firstLine; ; line = state.doc.line(line.number + 1)) {
+              changes.push({
+                from: line.from + column - 4,
+                to: line.from + column
+              });
+              if (line.to >= node.to) {
+                break;
+              }
+            }
+          }
+        }
+      }
+    });
+  }
+  if (!changes.length) {
+    return false;
+  }
+  dispatch(state.update({
+    changes,
+    userEvent: "format.codeblock.remove",
+    scrollIntoView: true
+  }));
+  return true;
+};
+var toggleCodeblock = (target) => {
+  return (getFormatting(target.state).blockType === "codeblock" ? removeCodeblock : addCodeblock)(target);
+};
+var formatting = (options = {}) => {
+  return [
+    keymap5.of([
+      {
+        key: "meta-b",
+        run: toggleStrong
+      }
+    ]),
+    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
+    })
+  ];
+};
+var InlineMarker = {
+  Emphasis: 1,
+  StrongEmphasis: 0,
+  InlineCode: 3,
+  Strikethrough: 2
+};
+var IgnoreInline = /* @__PURE__ */ new Set([
+  "Hardbreak",
+  "HTMLTag",
+  "Comment",
+  "ProcessingInstruction",
+  "Autolink",
+  "HeaderMark",
+  "QuoteMark",
+  "ListMark",
+  "LinkMark",
+  "EmphasisMark",
+  "CodeMark",
+  "CodeText",
+  "StrikethroughMark",
+  "TaskMarker",
+  "SuperscriptMark",
+  "SubscriptMark"
+]);
+var Textblocks = {
+  Paragraph: "paragraph",
+  Task: "paragraph",
+  CodeBlock: "codeblock",
+  FencedCode: "codeblock",
+  ATXHeading1: "heading1",
+  ATXHeading2: "heading2",
+  ATXHeading3: "heading3",
+  ATXHeading4: "heading4",
+  ATXHeading5: "heading5",
+  ATXHeading6: "heading6",
+  SetextHeading1: "heading1",
+  SetextHeading2: "heading2",
+  TableCell: "tablecell"
+};
+var getFormatting = (state) => {
+  let blockType = null;
+  const inline = [
+    null,
+    null,
+    null,
+    null
+  ];
+  let link2 = false;
+  let blockquote2 = null;
+  let listStyle = null;
+  const stack = [];
+  let currentBlock = null;
+  const advanceInline = (upto) => {
+    if (!currentBlock) {
+      return;
+    }
+    upto = Math.min(upto, currentBlock.end);
+    if (upto <= currentBlock.pos) {
+      return;
+    }
+    for (let i = 0; i < currentBlock.active.length; i++) {
+      if (inline[i] === false) {
+        continue;
+      } else if (currentBlock.active[i]) {
+        inline[i] = true;
+      } else if (/\S/.test(state.doc.sliceString(currentBlock.pos, upto))) {
+        inline[i] = false;
+      }
+    }
+    currentBlock.pos = upto;
+  };
+  const skipInline = (upto) => {
+    if (currentBlock && upto > currentBlock.pos) {
+      currentBlock.pos = Math.min(upto, currentBlock.end);
+    }
+  };
+  const { selection } = state;
+  for (const range of selection.ranges) {
+    if (range.empty && inline.some((v) => v === null)) {
+      const contextSize = Math.min(range.head, 6);
+      const contextBefore = state.doc.sliceString(range.head - contextSize, range.head);
+      let contextAfter = state.doc.sliceString(range.head, range.head + contextSize);
+      for (let i = 0; i < contextSize; i++) {
+        const ch = contextAfter[i];
+        if (ch !== contextBefore[contextBefore.length - 1 - i] || !/[~`*]/.test(ch)) {
+          contextAfter = contextAfter.slice(0, i);
+          break;
+        }
+      }
+      for (let i = 0; i < inline.length; i++) {
+        const mark2 = inlineMarkerText(i);
+        const found = contextAfter.indexOf(mark2);
+        if (found > -1) {
+          contextAfter = contextAfter.slice(0, found) + contextAfter.slice(found + mark2.length);
+          if (inline[i] === null) {
+            inline[i] = true;
+          }
+        }
+      }
+    }
+    syntaxTree2(state).iterate({
+      from: range.from,
+      to: range.to,
+      enter: (node) => {
+        advanceInline(node.from);
+        const { name } = node;
+        if (name === "BulletList" || name === "OrderedList" || name === "Blockquote") {
+          stack.push(name);
+        } else if (name === "Link") {
+          link2 = true;
+        } else if (Object.hasOwn(Textblocks, name) && (range.empty || node.to > range.from || node.from < range.to)) {
+          if (name === "Task" && stack[stack.length - 1] === "BulletList") {
+            stack[stack.length - 1] = "TaskList";
+          }
+          const blockCode = Textblocks[name];
+          if (blockType === null) {
+            blockType = blockCode;
+          } else if (blockType !== blockCode) {
+            blockType = false;
+          }
+          if (blockCode !== "codeblock" && inline.some((i) => i !== false)) {
+            currentBlock = {
+              pos: Math.max(range.from, node.from),
+              end: Math.min(range.to, node.to),
+              active: [
+                false,
+                false,
+                false,
+                false
+              ]
+            };
+          }
+        } else if (Object.hasOwn(InlineMarker, name) && currentBlock) {
+          const index = InlineMarker[name];
+          if (range.empty && inline[index] === null) {
+            inline[index] = true;
+          }
+          currentBlock.active[index] = true;
+        } else if (IgnoreInline.has(name)) {
+          skipInline(node.to);
+        }
+      },
+      leave: (node) => {
+        advanceInline(node.to);
+        const { name } = node;
+        if (name === "BulletList" || name === "OrderedList" || name === "Blockquote") {
+          stack.pop();
+        } else if (Object.hasOwn(Textblocks, name)) {
+          let hasList = false;
+          let hasQuote = false;
+          for (let i = stack.length - 1; i >= 0; i--) {
+            if (stack[i] === "Blockquote") {
+              hasQuote = true;
+            } else if (!hasList) {
+              hasList = stack[i] === "TaskList" ? "task" : stack[i] === "BulletList" ? "bullet" : "ordered";
+            }
+          }
+          if (blockquote2 === null) {
+            blockquote2 = hasQuote;
+          } else if (!hasQuote && blockquote2) {
+            blockquote2 = false;
+          }
+          if (listStyle === null) {
+            listStyle = hasList;
+          } else if (listStyle !== hasList) {
+            listStyle = false;
+          }
+          currentBlock = null;
+        } else if (Object.hasOwn(InlineMarker, name) && currentBlock) {
+          currentBlock.active[InlineMarker[name]] = false;
+        }
+      }
+    });
+  }
+  return {
+    blockType: blockType || null,
+    strong: inline[0] ?? false,
+    emphasis: inline[1] ?? false,
+    code: inline[3] ?? false,
+    strikethrough: inline[2] ?? false,
+    link: link2,
+    blockquote: blockquote2 ?? false,
+    listStyle: listStyle || null
+  };
+};
+var useFormattingState = () => {
+  const [state, setState] = useState(null);
+  const observer = useMemo(() => EditorView9.updateListener.of((update2) => {
+    if (update2.docChanged || update2.selectionSet) {
+      const newState = getFormatting(update2.state);
+      if (!state || !compareFormatting(state, newState)) {
+        setState(newState);
+      }
+    }
+  }), []);
+  return [
+    state,
+    observer
+  ];
+};
+
+// 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 EditorView10, ViewPlugin as ViewPlugin6, WidgetType as WidgetType3 } from "@codemirror/view";
+var styles4 = EditorView10.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 EditorView11, 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) => EditorView11.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/outliner.ts
-var outliner = (options = {}) => {
-  return [];
+// 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/table.ts
-import { syntaxTree as syntaxTree4 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField4 } from "@codemirror/state";
-import { Decoration as Decoration7, EditorView as EditorView11, WidgetType as WidgetType5 } from "@codemirror/view";
+// 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 EditorView12, 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)
+    provide: (field) => EditorView12.decorations.from(field)
   });
 };
 var update = (state, options) => {
-  const builder = new RangeSetBuilder3();
+  const builder = new RangeSetBuilder6();
   const cursor = state.selection.main.head;
   const tables = [];
   const getTable = () => tables[tables.length - 1];
@@ -2085,7 +3232,7 @@ var update = (state, options) => {
     const table2 = getTable();
     return table2.rows?.[table2.rows.length - 1];
   };
-  syntaxTree4(state).iterate({
+  syntaxTree7(state).iterate({
     enter: (node) => {
       switch (node.name) {
         case "Table": {
@@ -2117,16 +3264,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;
@@ -2163,11 +3310,11 @@ var TableWidget = class extends WidgetType5 {
   }
 };
 
-// packages/ui/react-ui-editor/src/extensions/tasklist.ts
-import { syntaxTree as syntaxTree5 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder4 } from "@codemirror/state";
-import { EditorView as EditorView12, Decoration as Decoration8, WidgetType as WidgetType6, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
-var styles5 = EditorView12.baseTheme({
+// 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 EditorView13, Decoration as Decoration10, WidgetType as WidgetType7, ViewPlugin as ViewPlugin8 } from "@codemirror/view";
+var styles5 = EditorView13.baseTheme({
   "& .cm-task": {
     color: getToken("extend.colors.blue.500")
   },
@@ -2176,7 +3323,7 @@ var styles5 = EditorView12.baseTheme({
     marginRight: "4px"
   }
 });
-var CheckboxWidget = class extends WidgetType6 {
+var CheckboxWidget = class extends WidgetType7 {
   constructor(_checked) {
     super();
     this._checked = _checked;
@@ -2213,23 +3360,23 @@ var CheckboxWidget = class extends WidgetType6 {
     return false;
   }
 };
-var checkedDecoration = Decoration8.replace({
+var checkedDecoration = Decoration10.replace({
   widget: new CheckboxWidget(true)
 });
-var uncheckedDecoration = Decoration8.replace({
+var uncheckedDecoration = Decoration10.replace({
   widget: new CheckboxWidget(false)
 });
-var buildDecorations4 = (view) => {
-  const builder = new RangeSetBuilder4();
+var buildDecorations6 = (view) => {
+  const builder = new RangeSetBuilder7();
   const { state } = view;
   const cursor = state.selection.main.head;
   for (const { from, to } of view.visibleRanges) {
-    syntaxTree5(state).iterate({
+    syntaxTree8(state).iterate({
       enter: (node) => {
         if (node.name === "TaskMarker") {
           if (cursor < node.from || cursor > node.to) {
             const checked = state.doc.sliceString(node.from + 1, node.to - 1) === "x";
-            builder.add(node.from - 2, node.from - 1, Decoration8.mark({
+            builder.add(node.from - 2, node.from - 1, Decoration10.mark({
               class: "cm-task"
             }));
             builder.add(node.from, node.to, checked ? checkedDecoration : uncheckedDecoration);
@@ -2244,24 +3391,58 @@ var buildDecorations4 = (view) => {
 };
 var tasklist = (options = {}) => {
   return [
-    ViewPlugin6.fromClass(class {
+    ViewPlugin8.fromClass(class {
       constructor(view) {
-        this.decorations = buildDecorations4(view);
+        this.decorations = buildDecorations6(view);
       }
       update(update2) {
         if (update2.docChanged || update2.viewportChanged || update2.selectionSet) {
-          this.decorations = buildDecorations4(update2.view);
+          this.decorations = buildDecorations6(update2.view);
         }
       }
     }, {
-      decorations: (v) => v.decorations
+      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.",
@@ -2271,7 +3452,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   let t;
   let idx = 0;
   return [
-    keymap5.of([
+    keymap6.of([
       {
         // Reset.
         key: "alt-meta-'",
@@ -2317,27 +3498,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 = {
@@ -2369,8 +3529,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,
@@ -2378,11 +3539,11 @@ var defaultTheme = {
     fontSize: "16px"
   },
   "&light .cm-content": {
-    color: get3(tokens, "extend.colors.neutral.900", "black"),
+    color: get3(tokens, "extend.semanticColors.base.fg.light", "black"),
     caretColor: "black"
   },
   "&dark .cm-content": {
-    color: get3(tokens, "extend.colors.neutral.100", "white"),
+    color: get3(tokens, "extend.semanticColors.base.fg.dark", "white"),
     caretColor: "white"
   },
   //
@@ -2394,8 +3555,11 @@ var defaultTheme = {
   "&dark .cm-cursor, &dark .cm-dropCursor": {
     borderLeft: "2px solid white"
   },
-  ".cm-placeholder": {
-    fontWeight: 100
+  "&light .cm-placeholder": {
+    color: get3(tokens, "extend.semanticColors.description.light", "rgba(0,0,0,.2)")
+  },
+  "&dark .cm-placeholder": {
+    color: get3(tokens, "extend.semanticColors.description.dark", "rgba(255,255,255,.2)")
   },
   //
   // line
@@ -2404,7 +3568,7 @@ var defaultTheme = {
     paddingInline: 0
   },
   ".cm-activeLine": {
-    background: "inherit"
+    background: "transparent"
   },
   //
   // Selection
@@ -2575,31 +3739,35 @@ var codeTheme = {
 };
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx";
+var __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, readonly, autoFocus, scrollTo, selection, editorMode, theme, slots = defaultSlots, extensions = [], debug }, forwardedRef) => {
-  const tabsterDOMAttribute = useFocusableGroup({
-    tabBehavior: "limited"
-  });
-  const { themeMode } = useThemeContext2();
+  const { themeMode } = useThemeContext();
   const rootRef = useRef(null);
-  const [view, setView] = useState(null);
+  const [view, setView] = useState2(null);
   useImperativeHandle(forwardedRef, () => view, [
     view
   ]);
-  useEffect3(() => {
-    if (autoFocus) {
+  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,
     autoFocus
   ]);
-  useAwareness(model);
-  useEffect3(() => {
+  useEffect2(() => {
     if (!model || !rootRef.current) {
       return;
     }
@@ -2608,37 +3776,38 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
       selection,
       extensions: [
         // TODO(burdon): Doesn't catch errors in keymap functions.
-        EditorView13.exceptionSink.of((err) => {
+        EditorView14.exceptionSink.of((err) => {
           log2.catch(err, void 0, {
-            F: __dxlog_file5,
-            L: 126,
+            F: __dxlog_file3,
+            L: 134,
             S: void 0,
             C: (f, a) => f(...a)
           });
         }),
         // Theme.
         // TODO(burdon): Make configurable.
-        EditorView13.baseTheme(defaultTheme),
-        EditorView13.theme(theme ?? {}),
-        EditorView13.darkTheme.of(themeMode === "dark"),
-        EditorView13.editorAttributes.of({
+        EditorView14.baseTheme(defaultTheme),
+        EditorView14.theme(theme ?? {}),
+        EditorView14.darkTheme.of(themeMode === "dark"),
+        EditorView14.editorAttributes.of({
           class: slots.editor?.className ?? ""
         }),
-        EditorView13.contentAttributes.of({
+        EditorView14.contentAttributes.of({
           class: slots.content?.className ?? ""
         }),
         // State.
+        EditorView14.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/focus).
+        // TODO(burdon): Factor out? (Requires special handling for Escape/Enter below).
         editorMode === "vim" && vim(),
         // Custom.
         ...extensions
-      ].filter(Boolean)
+      ].filter(isNotFalsy3)
     });
-    const newView = new EditorView13({
+    const newView = new EditorView14({
       state,
       parent: rootRef.current,
       scrollTo,
@@ -2673,7 +3842,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
       }
       case "Escape": {
         if (editorMode === "vim" && (altKey || shiftKey || metaKey || ctrlKey)) {
-          rootRef.current?.focus();
+          view?.focus();
         }
         break;
       }
@@ -2686,20 +3855,20 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
     key: model.id,
     role: "none",
     tabIndex: 0,
-    onKeyUp: handleKeyUp,
     ...slots.root,
-    ...editorMode !== "vim" && tabsterDOMAttribute,
+    // {...(editorMode !== 'vim' && tabsterDOMAttribute)}
+    onKeyUp: handleKeyUp,
     ref: rootRef
   });
 });
 var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, lineWrapping, theme = textTheme, slots, extensions = [], ...props }, forwardedRef) => {
-  const { themeMode } = useThemeContext2();
+  const { themeMode } = useThemeContext();
   const updatedSlots = defaultsDeep2({}, slots, defaultTextSlots);
   return /* @__PURE__ */ React.createElement(BaseTextEditor, {
     ref: forwardedRef,
     readonly,
     extensions: [
-      basicBundle({
+      createBasicBundle({
         themeMode,
         placeholder: placeholder3,
         lineWrapping
@@ -2712,15 +3881,14 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholde
   });
 });
 var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, theme = markdownTheme, slots, extensions = [], ...props }, forwardedRef) => {
-  const { themeMode } = useThemeContext2();
+  const { themeMode } = useThemeContext();
   const updatedSlots = defaultsDeep2({}, slots, defaultMarkdownSlots);
   return /* @__PURE__ */ React.createElement(BaseTextEditor, {
     ref: forwardedRef,
     readonly,
     extensions: [
-      markdownBundle({
+      createMarkdownExtensions({
         themeMode,
-        readonly,
         placeholder: placeholder3
       }),
       ...extensions
@@ -2732,11 +3900,10 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeh
 });
 var defaultSlots = {
   root: {
-    // TODO(burdon): Add focusRing by default/as property?
-    className: mx3("flex flex-col grow overflow-y-auto", inputSurface)
+    className: mx3("grow", focusRing)
   },
   editor: {
-    className: "h-full p-2"
+    className: "bs-full"
   }
 };
 var defaultTextSlots = {
@@ -2746,22 +3913,205 @@ 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 { CaretRight, ChatText, Code, Link, ListBullets, ListChecks, ListNumbers, Paragraph, 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, mx as mx4 } from "@dxos/react-ui-theme";
+var [ToolbarContextProvider, useToolbarContext] = createContext("Toolbar");
+var ToolbarRoot = ({ children, onAction, state }) => {
+  return /* @__PURE__ */ React2.createElement(ToolbarContextProvider, {
+    onAction,
+    state
+  }, /* @__PURE__ */ React2.createElement(DensityProvider, {
+    density: "fine"
+  }, /* @__PURE__ */ React2.createElement("div", {
+    role: "toolbar",
+    className: "flex w-full shrink-0 p-1 gap-2 items-center whitespace-nowrap overflow-hidden"
+  }, children)));
+};
+var ToolbarButton = ({ Icon, onClick, title, getState, disable }) => {
+  const { onAction, state } = useToolbarContext("ToolbarButton");
+  const active = getState && state ? getState(state) : false;
+  const disabled = disable && state ? disable(state) : false;
+  const handleClick = (event) => {
+    const action = onClick(state);
+    if (action) {
+      onAction?.(action);
+      event.preventDefault();
+    }
+  };
+  return /* @__PURE__ */ React2.createElement(Button, {
+    variant: "ghost",
+    classNames: mx4("p-2", active && "ring-[1px]"),
+    onMouseDown: handleClick,
+    title,
+    disabled
+  }, /* @__PURE__ */ React2.createElement(Icon, {
+    className: getSize(5)
+  }));
+};
+var ToolbarSeparator = () => /* @__PURE__ */ React2.createElement("div", {
+  className: "grow"
+});
+var MarkdownHeading = () => {
+  const { onAction, state } = useToolbarContext("MarkdownFormatting");
+  const blockType = state ? state.blockType : "paragraph";
+  const header = blockType && /heading(\d)/.exec(blockType);
+  const value = header ? header[1] : blockType === "paragraph" || !blockType ? "0" : null;
+  return /* @__PURE__ */ React2.createElement(Select.Root, {
+    disabled: value === null,
+    value: value ?? "0",
+    onValueChange: (value2) => onAction?.({
+      type: "heading",
+      data: parseInt(value2)
+    })
+  }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, null, /* @__PURE__ */ React2.createElement(Paragraph, {
+    className: getSize(5)
+  })), /* @__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: "String",
+  disable: (s) => s.blockType === "codeblock",
+  getState: (s) => s.strong,
+  onClick: (s) => ({
+    type: "strong",
+    data: s ? !s.strong : null
+  })
+}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  Icon: TextItalic,
+  title: "Emphasis",
+  disable: (s) => s.blockType === "codeblock",
+  getState: (s) => s.emphasis,
+  onClick: (s) => ({
+    type: "emphasis",
+    data: s ? !s.emphasis : null
+  })
+}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  Icon: TextStrikethrough,
+  title: "Strike-through",
+  disable: (s) => s.blockType === "codeblock",
+  getState: (s) => s.strikethrough,
+  onClick: (s) => ({
+    type: "strikethrough",
+    data: s ? !s.strikethrough : null
+  })
+}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  Icon: Code,
+  title: "Inline code",
+  disable: (s) => s.blockType === "codeblock",
+  getState: (s) => s.code,
+  onClick: (s) => ({
+    type: "code",
+    data: s ? !s.code : null
+  })
+}));
+var MarkdownLists = () => /* @__PURE__ */ React2.createElement("div", {
+  role: "none"
+}, /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  Icon: ListBullets,
+  title: "Bullet list",
+  getState: (s) => s.listStyle === "bullet",
+  onClick: (s) => ({
+    type: "list-bullet",
+    data: s ? s.listStyle !== "bullet" : null
+  })
+}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  Icon: ListNumbers,
+  title: "Numbered list",
+  getState: (s) => s.listStyle === "ordered",
+  onClick: (s) => ({
+    type: "list-ordered",
+    data: s ? s.listStyle !== "ordered" : null
+  })
+}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  Icon: ListChecks,
+  title: "Task list",
+  getState: (s) => s.listStyle === "task",
+  onClick: (s) => ({
+    type: "list-tasks",
+    data: s ? s.listStyle !== "task" : null
+  })
+}));
+var MarkdownBlocks = () => /* @__PURE__ */ React2.createElement("div", {
+  role: "none"
+}, /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  Icon: CaretRight,
+  title: "Block quote",
+  getState: (s) => s.blockquote,
+  onClick: (s) => ({
+    type: "blockquote",
+    data: s ? !s.blockquote : null
+  })
+}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  Icon: Code,
+  title: "Code block",
+  getState: (s) => s.blockType === "codeblock",
+  onClick: (s) => ({
+    type: "codeblock",
+    data: s ? s.blockType !== "codeblock" : null
+  })
+}), /* @__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",
+  getState: (s) => s.link,
+  onClick: (s) => ({
+    type: "link",
+    data: s ? !s.link : null
+  })
+}));
+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 invariant4 } from "@dxos/invariant";
+import { invariant as invariant2 } from "@dxos/invariant";
 import { log as log3 } from "@dxos/log";
-var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/awareness-provider.ts";
+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;
@@ -2778,7 +4128,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();
@@ -2789,16 +4139,15 @@ var SpaceAwarenessProvider = class {
           break;
         }
       }
-    });
-    this._ctx.onDispose(unsubscribe);
+    }));
     void this._space.postMessage(this._channel, {
       kind: "query"
     }).catch((err) => {
       log3.debug("failed to query awareness", {
         err
       }, {
-        F: __dxlog_file6,
-        L: 85,
+        F: __dxlog_file4,
+        L: 89,
         S: this,
         C: (f, a) => f(...a)
       });
@@ -2809,10 +4158,13 @@ var SpaceAwarenessProvider = class {
     this._ctx = void 0;
     this._postTask = void 0;
   }
+  getRemoteStates() {
+    return Array.from(this._remoteStates.values());
+  }
   update(position) {
-    invariant4(this._postTask, void 0, {
-      F: __dxlog_file6,
-      L: 96,
+    invariant2(this._postTask, void 0, {
+      F: __dxlog_file4,
+      L: 104,
       S: this,
       A: [
         "this._postTask",
@@ -2826,13 +4178,10 @@ var SpaceAwarenessProvider = class {
     };
     this._postTask.schedule();
   }
-  getRemoteStates() {
-    return Array.from(this._remoteStates.values());
-  }
   _handleQueryMessage() {
-    invariant4(this._postTask, void 0, {
-      F: __dxlog_file6,
-      L: 111,
+    invariant2(this._postTask, void 0, {
+      F: __dxlog_file4,
+      L: 115,
       S: this,
       A: [
         "this._postTask",
@@ -2842,9 +4191,9 @@ var SpaceAwarenessProvider = class {
     this._postTask.schedule();
   }
   _handlePostMessage(message) {
-    invariant4(message.kind === "post", void 0, {
-      F: __dxlog_file6,
-      L: 116,
+    invariant2(message.kind === "post", void 0, {
+      F: __dxlog_file4,
+      L: 120,
       S: this,
       A: [
         "message.kind === 'post'",
@@ -2863,180 +4212,58 @@ var modelState = StateField5.define({
   update: (model) => model
 });
 
-// packages/ui/react-ui-editor/src/hooks/automerge.ts
-var createAutomergeModel = ({ space, identity, text }) => {
-  const obj = text;
-  const doc = getRawDoc(obj, [
-    obj.field
-  ]);
-  const awarenessProvider = space && new SpaceAwarenessProvider({
-    space,
-    channel: `automerge.awareness.${obj.id}`,
-    info: {
-      displayName: identity?.profile?.displayName ?? "",
-      color: cursorColor.color,
-      lightColor: cursorColor.light
-    },
-    peerId: identity?.identityKey.toHex() ?? "Anonymous"
-  });
-  const model = {
-    id: obj.id,
-    content: doc,
-    text: () => get4(doc.handle.docSync(), doc.path),
-    // TODO(burdon): https://automerge.org/automerge/api-docs/js/functions/next.getCursor.html
-    extension: [
-      modelState.init(() => model),
-      automerge3({
-        handle: doc.handle,
-        path: doc.path
-      }),
-      awarenessProvider && AwarenessProvider.of(awarenessProvider),
-      awareness()
-    ].filter(isNotNullOrUndefined),
-    peer: identity ? {
-      id: identity.identityKey.toHex(),
-      name: identity.profile?.displayName
-    } : void 0
-  };
-  return model;
-};
-
-// packages/ui/react-ui-editor/src/hooks/yjs.ts
-import * as decoding from "lib0/decoding";
-import * as encoding from "lib0/encoding";
-import { Observable } from "lib0/observable";
-import * as YP from "y-protocols/awareness";
-import { invariant as invariant5 } from "@dxos/invariant";
-import { log as log4 } from "@dxos/log";
-var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/yjs.ts";
-var createYjsModel = ({ identity, space, text }) => {
-  invariant5(text?.doc && text?.content, void 0, {
-    F: __dxlog_file7,
-    L: 22,
-    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));
-    }
-    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_file7,
-      L: 101,
-      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_file7,
-      L: 110,
-      S: this,
-      C: (f, a) => f(...a)
-    });
-    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));
-    }
-  }
-  _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);
+// packages/ui/react-ui-editor/src/hooks/useActionHandler.ts
+var useActionHandler = (view) => {
+  return (action) => {
+    if (!view) {
+      return;
+    }
+    let inlineType, listType;
+    switch (action.type) {
+      case "heading":
+        setHeading(parseInt(action.data))(view);
         break;
-      }
-      case messageQueryAwareness: {
-        encoding.writeVarUint(encoder, messageAwareness);
-        encoding.writeVarUint8Array(encoder, YP.encodeAwarenessUpdate(this._awareness, Array.from(this._awareness.getStates().keys())));
-        sendReply = true;
+      case "strong":
+      case "emphasis":
+      case "strikethrough":
+      case "code":
+        inlineType = action.type === "strong" ? Inline.Strong : action.type === "emphasis" ? Inline.Emphasis : action.type === "strikethrough" ? Inline.Strikethrough : Inline.Code;
+        (typeof action.data === "boolean" ? setStyle(inlineType, action.data) : toggleStyle(inlineType))(view);
+        break;
+      case "list-ordered":
+      case "list-bullet":
+      case "list-tasks":
+        listType = action.type === "list-ordered" ? List.Ordered : action.type === "list-bullet" ? List.Bullet : List.Task;
+        (action.data === false ? removeList(listType) : action.data === true ? addList(listType) : toggleList(listType))(view);
+        break;
+      case "blockquote":
+        (action.data === false ? removeBlockquote : action.data === true ? addBlockquote : toggleBlockquote)(view);
+        break;
+      case "codeblock":
+        (action.data === false ? removeCodeblock : addCodeblock)(view);
+        break;
+      case "table":
+        insertTable(view);
+        break;
+      case "link":
+        (action.data === false ? removeLink : addLink)(view);
+        break;
+      case "comment":
+        createComment(view);
         break;
-      }
-      default: {
-        console.error("Invalid message:", messageType);
-        return encoder;
-      }
-    }
-    if (!sendReply) {
-      return null;
     }
-    return encoder;
-  }
-  _handleBeforeUnload() {
-    YP.removeAwarenessStates(this._awareness, [
-      this._clientId
-    ], "window unload");
-  }
+    setTimeout(() => {
+      if (!view.hasFocus) {
+        view.focus();
+      }
+    });
+  };
 };
 
-// packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
-import { useState as useState2 } from "react";
-var useTextEditor = () => {
-  const [view, setView] = useState2(null);
+// packages/ui/react-ui-editor/src/hooks/useEditorView.ts
+import { useState as useState3 } from "react";
+var useEditorView = () => {
+  const [view, setView] = useState3(null);
   return [
     (ref) => {
       setView(ref);
@@ -3045,12 +4272,124 @@ var useTextEditor = () => {
   ];
 };
 
+// packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
+import { EditorSelection as EditorSelection2, EditorState as EditorState3 } from "@codemirror/state";
+import { EditorView as EditorView15 } from "@codemirror/view";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState4 } 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] = useState4();
+  const parentRef = useRef2(null);
+  useEffect3(() => {
+    if (parentRef.current) {
+      const state = EditorState3.create({
+        doc,
+        selection,
+        extensions: [
+          // TODO(burdon): Doesn't catch errors in keymap functions.
+          EditorView15.exceptionSink.of((err) => {
+            log4.catch(err, void 0, {
+              F: __dxlog_file5,
+              L: 57,
+              S: void 0,
+              C: (f, a) => f(...a)
+            });
+          }),
+          extensions,
+          EditorView15.updateListener.of(() => {
+            onUpdate.current?.();
+          })
+        ].filter(isNotFalsy4)
+      });
+      const view2 = new EditorView15({
+        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);
+    }
+    return () => {
+      view?.destroy();
+    };
+  }, [
+    parentRef
+  ]);
+  useEffect3(() => {
+    if (view) {
+      if (!selection && !view.state.selection.main.anchor) {
+        selection = EditorSelection2.single(view.state.doc.line(1).to);
+      }
+      if (selection || scrollTo) {
+        onUpdate.current = () => {
+          onUpdate.current = void 0;
+          view.dispatch({
+            selection,
+            effects: scrollTo && [
+              scrollTo
+            ],
+            scrollIntoView: !scrollTo
+          });
+        };
+      }
+      if (autoFocus) {
+        view.focus();
+      }
+    }
+  }, [
+    view,
+    autoFocus,
+    selection,
+    scrollTo
+  ]);
+  return {
+    parentRef,
+    view
+  };
+};
+var createDataExtensions = ({ readonly = false } = {}) => {
+  return [
+    //
+    EditorState3.readOnly.of(readonly),
+    EditorView15.editable.of(!readonly)
+  ];
+};
+var createThemeExtensions = ({ theme, themeMode, slots } = {}) => {
+  return [
+    //
+    EditorView15.baseTheme(defaultTheme),
+    theme && EditorView15.theme(theme),
+    EditorView15.darkTheme.of(themeMode === "dark"),
+    EditorView15.editorAttributes.of({
+      class: slots?.editor?.className ?? ""
+    }),
+    EditorView15.contentAttributes.of({
+      class: slots?.content?.className ?? ""
+    })
+  ].filter(isNotFalsy4);
+};
+
 // packages/ui/react-ui-editor/src/hooks/useTextModel.ts
-import { useEffect as useEffect4, useState as useState3 } from "react";
+import get4 from "lodash.get";
+import { useEffect as useEffect4, useState as useState5 } 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] = useState3();
+  const [model, setModel] = useState5();
   useEffect4(() => setModel(createModel(props)), [
     identity,
     space,
@@ -3058,53 +4397,114 @@ var useTextModel = (props) => {
   ]);
   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;
+var useInMemoryTextModel = ({ id, defaultContent }) => {
+  const [content, setContent] = useState5(defaultContent ?? "");
+  return {
+    id,
+    content,
+    setContent,
+    text: () => content
+  };
+};
+var createModel = ({ space, identity, text }) => {
+  invariant3(isAutomergeObject(text), void 0, {
+    F: __dxlog_file6,
+    L: 50,
+    S: void 0,
+    A: [
+      "isAutomergeObject(text)",
+      ""
+    ]
+  });
+  const obj = text;
+  const doc = getRawDoc(obj, [
+    obj.field
+  ]);
+  const awarenessProvider2 = space && new SpaceAwarenessProvider({
+    space,
+    channel: `automerge.awareness.${obj.id}`,
+    info: {
+      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),
+    extension: extensions,
+    peer: identity ? {
+      id: identity.identityKey.toHex(),
+      name: identity.profile?.displayName
+    } : void 0
+  };
+  return model;
 };
 export {
-  AwarenessProvider,
   BaseTextEditor,
   Cursor,
   Doc,
   EditorModes,
+  Inline,
+  List,
   MarkdownEditor,
   RemoteSelectionsDecorator,
   SpaceAwarenessProvider,
   TextEditor,
   TextKind,
-  YAwarenessProvider,
+  Toolbar,
   YText,
   YXmlFragment,
+  addBlockquote,
+  addCodeblock,
+  addLink,
+  addList,
+  addStyle,
   autocomplete,
-  automerge3 as automerge,
+  automerge,
   awareness,
-  basicBundle,
+  awarenessProvider,
   blast,
   callbackWrapper,
   code2 as code,
   codeTheme,
   comments,
-  createAutomergeModel,
-  createYjsModel,
+  compareFormatting,
+  createBasicBundle,
+  createComment,
+  createDataExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
   defaultMarkdownSlots,
   defaultOptions,
   defaultSlots,
   defaultTextSlots,
   defaultTheme,
+  focusComment,
+  formatting,
+  getFormatting,
   getToken,
+  heading2 as heading,
   hr,
   image,
+  insertTable,
+  keymap7 as keymap,
   link,
   listener,
   logChanges,
-  markdownBundle,
   markdownHighlightStyle,
   markdownTags,
   markdownTagsExtensions,
@@ -3112,18 +4512,36 @@ export {
   mention,
   modelState,
   outliner,
+  removeBlockquote,
+  removeCodeblock,
+  removeLink,
+  removeList,
+  removeStyle,
+  setBlockquote,
   setComments,
-  setFocus,
+  setHeading,
   setSelection,
+  setStyle,
   table,
   tags2 as tags,
   tasklist,
   textTheme,
+  toggleBlockquote,
+  toggleCodeblock,
+  toggleEmphasis,
+  toggleInlineCode,
+  toggleList,
+  toggleStrikethrough,
+  toggleStrong,
+  toggleStyle,
   typewriter,
-  useAwareness,
+  useActionHandler,
   useComments,
+  useEditorView,
+  useFormattingState,
+  useInMemoryTextModel,
   useTextEditor,
   useTextModel,
-  yjs
+  useToolbarContext
 };
 //# sourceMappingURL=index.mjs.map