@dxos/react-ui-editor 0.4.8-main.05fda5d → 0.4.8-main.06fa7e4

package/dist/lib/browser/index.mjs

@@ -15,6 +15,7 @@ var translations_default = [
         "blockquote label": "Block quote",
         "codeblock label": "Code block",
         "comment label": "Create comment",
+        "image label": "Insert image",
         "heading label": "Heading level",
         "table label": "Create table"
       }
@@ -23,21 +24,17 @@ var translations_default = [
 ];
 
 // packages/ui/react-ui-editor/src/index.ts
-import { keymap as keymap9 } from "@codemirror/view";
+import { keymap as keymap11 } from "@codemirror/view";
 import { tags as tags2 } from "@lezer/highlight";
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 import { Doc, YText, YXmlFragment } from "@dxos/text-model";
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
-import { EditorState as EditorState3 } from "@codemirror/state";
-import { EditorView as EditorView17, scrollPastEnd as scrollPastEnd2 } from "@codemirror/view";
+import { EditorState as EditorState2 } from "@codemirror/state";
+import { EditorView as EditorView16 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
-import defaultsDeep3 from "lodash.defaultsdeep";
-import React, { forwardRef, useCallback, useEffect as useEffect3, useImperativeHandle, useRef as useRef3, useState as useState5, useMemo as useMemo3 } from "react";
-import { DocAccessor } from "@dxos/echo-schema";
-import { log as log9 } from "@dxos/log";
-import { useThemeContext } from "@dxos/react-ui";
-import { focusRing } from "@dxos/react-ui-theme";
+import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState as useState2 } from "react";
+import { log as log7 } from "@dxos/log";
 import { isNotFalsy as isNotFalsy4 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/annotations.ts
@@ -60,8 +57,8 @@ var Cursor = class _Cursor {
     });
   }
   static {
-    this.getCursorFromRange = (state, range) => {
-      const cursorConverter2 = state.facet(_Cursor.converter);
+    this.getCursorFromRange = (state2, range) => {
+      const cursorConverter2 = state2.facet(_Cursor.converter);
       const from = cursorConverter2.toCursor(range.from);
       const to = cursorConverter2.toCursor(range.to, -1);
       return [
@@ -71,8 +68,8 @@ var Cursor = class _Cursor {
     };
   }
   static {
-    this.getRangeFromCursor = (state, cursor) => {
-      const cursorConverter2 = state.facet(_Cursor.converter);
+    this.getRangeFromCursor = (state2, cursor) => {
+      const cursorConverter2 = state2.facet(_Cursor.converter);
       const parts = cursor.split(":");
       const from = cursorConverter2.fromCursor(parts[0]);
       const to = cursorConverter2.fromCursor(parts[1]);
@@ -89,15 +86,15 @@ var annotationMark = Decoration.mark({
   class: "cm-annotation"
 });
 var annotations = (options = {}) => {
-  const match = (state) => {
+  const match = (state2) => {
     const annotations2 = [];
-    const text = state.doc.toString();
+    const text = state2.doc.toString();
     if (options.match) {
       const matches = text.matchAll(options.match);
       for (const match2 of matches) {
         const from = match2.index;
         const to = from + match2[0].length;
-        const cursor = Cursor.getCursorFromRange(state, {
+        const cursor = Cursor.getCursorFromRange(state2, {
           from,
           to
         });
@@ -109,8 +106,8 @@ var annotations = (options = {}) => {
     return annotations2;
   };
   const annotationsState = StateField.define({
-    create: (state) => {
-      return match(state);
+    create: (state2) => {
+      return match(state2);
     },
     update: (value, tr) => {
       if (!tr.changes.empty) {
@@ -123,10 +120,10 @@ var annotations = (options = {}) => {
     annotationsState,
     EditorView.decorations.compute([
       annotationsState
-    ], (state) => {
-      const annotations2 = state.field(annotationsState);
-      const decorations = annotations2.map((annotation2) => {
-        const range = Cursor.getRangeFromCursor(state, annotation2.cursor);
+    ], (state2) => {
+      const annotations2 = state2.field(annotationsState);
+      const decorations = annotations2.map((annotation) => {
+        const range = Cursor.getRangeFromCursor(state2, annotation.cursor);
         return range && annotationMark.range(range.from, range.to);
       }).filter(isNotFalsy);
       return Decoration.set(decorations);
@@ -243,9 +240,8 @@ var cursorConverter = ({ handle, path }) => ({
 
 // packages/ui/react-ui-editor/src/extensions/automerge/defs.ts
 import { Annotation, StateEffect } from "@codemirror/state";
-import get2 from "lodash.get";
-var getPath = (state, field) => state.field(field).path;
-var getLastHeads = (state, field) => state.field(field).lastHeads;
+var getPath = (state2, field) => state2.field(field).path;
+var getLastHeads = (state2, field) => state2.field(field).lastHeads;
 var updateHeadsEffect = StateEffect.define({});
 var updateHeads = (newHeads) => updateHeadsEffect.of({
   newHeads
@@ -260,8 +256,8 @@ import { next as A3 } from "@dxos/automerge/automerge";
 
 // packages/ui/react-ui-editor/src/extensions/automerge/update-automerge.ts
 import { next as A2 } from "@dxos/automerge/automerge";
-var updateAutomerge = (field, handle, transactions, state) => {
-  const { lastHeads, path } = state.field(field);
+var updateAutomerge = (field, handle, transactions, state2) => {
+  const { lastHeads, path } = state2.field(field);
   let hasChanges = false;
   for (const tr of transactions) {
     tr.changes.iterChanges(() => {
@@ -308,7 +304,7 @@ var updateCodeMirror = (view, selection, target, patches) => {
     annotations: reconcileAnnotation.of(false)
   });
 };
-var handlePatch = (patch, target, state) => {
+var handlePatch = (patch, target, state2) => {
   if (patch.action === "insert") {
     return handleInsert(target, patch);
   } else if (patch.action === "splice") {
@@ -316,7 +312,7 @@ var handlePatch = (patch, target, state) => {
   } else if (patch.action === "del") {
     return handleDel(target, patch);
   } else if (patch.action === "put") {
-    return handlePut(target, patch, state);
+    return handlePut(target, patch, state2);
   } else {
     return null;
   }
@@ -360,7 +356,7 @@ var handleDel = (target, patch) => {
     }
   ];
 };
-var handlePut = (target, patch, state) => {
+var handlePut = (target, patch, state2) => {
   const index = charPath(target, [
     ...patch.path,
     0
@@ -368,7 +364,7 @@ var handlePut = (target, patch, state) => {
   if (index == null) {
     return [];
   }
-  const length = state.doc.length;
+  const length = state2.doc.length;
   if (typeof patch.value !== "string") {
     return [];
   }
@@ -479,13 +475,13 @@ var automerge = (accessor) => {
     ViewPlugin.fromClass(class {
       constructor(_view) {
         this._view = _view;
-        accessor.handle.addListener("change", this._handleChange.bind(this));
+        this._handleChange = () => {
+          syncer.reconcile(this._view, false);
+        };
+        accessor.handle.addListener("change", this._handleChange);
       }
       destroy() {
-        accessor.handle.removeListener("change", this._handleChange.bind(this));
-      }
-      _handleChange() {
-        syncer.reconcile(this._view, false);
+        accessor.handle.removeListener("change", this._handleChange);
       }
     }),
     // Reconcile local updates.
@@ -497,7 +493,7 @@ var automerge = (accessor) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/extensions/awareness.ts
+// packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts
 import { Annotation as Annotation2, Facet as Facet2, RangeSet } from "@codemirror/state";
 import { Decoration as Decoration2, EditorView as EditorView3, ViewPlugin as ViewPlugin2, WidgetType } from "@codemirror/view";
 import { Event } from "@dxos/async";
@@ -566,9 +562,9 @@ var RemoteSelectionsDecorator = class {
   _updateRemoteSelections(update2) {
     const decorations = [];
     const awarenessStates = this._provider.getRemoteStates();
-    for (const state of awarenessStates) {
-      const anchor = state.position?.anchor ? this._cursorConverter.fromCursor(state.position.anchor) : null;
-      const head = state.position?.head ? this._cursorConverter.fromCursor(state.position.head) : null;
+    for (const state2 of awarenessStates) {
+      const anchor = state2.position?.anchor ? this._cursorConverter.fromCursor(state2.position.anchor) : null;
+      const head = state2.position?.head ? this._cursorConverter.fromCursor(state2.position.head) : null;
       if (anchor == null || head == null) {
         continue;
       }
@@ -576,8 +572,8 @@ var RemoteSelectionsDecorator = class {
       const end = Math.min(Math.max(anchor, head), update2.view.state.doc.length);
       const startLine = update2.view.state.doc.lineAt(start);
       const endLine = update2.view.state.doc.lineAt(end);
-      const color = state.info.color ?? "#30bced";
-      const lightColor = state.info.lightColor ?? color + "33";
+      const color = state2.info.color ?? "#30bced";
+      const lightColor = state2.info.lightColor ?? color + "33";
       if (startLine.number === endLine.number) {
         decorations.push({
           from: start,
@@ -630,7 +626,7 @@ var RemoteSelectionsDecorator = class {
         value: Decoration2.widget({
           side: head - anchor > 0 ? -1 : 1,
           block: false,
-          widget: new RemoteCaretWidget(state.info.displayName ?? "Anonymous", color)
+          widget: new RemoteCaretWidget(state2.info.displayName ?? "Anonymous", color)
         })
       });
     }
@@ -732,11 +728,115 @@ var styles2 = EditorView3.baseTheme({
   }
 });
 
+// packages/ui/react-ui-editor/src/extensions/awareness/awareness-provider.ts
+import { DeferredTask, Event as Event2, sleep } from "@dxos/async";
+import { Context as Context2 } from "@dxos/context";
+import { invariant } from "@dxos/invariant";
+import { log as log2 } from "@dxos/log";
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness-provider.ts";
+var DEBOUNCE_INTERVAL = 100;
+var SpaceAwarenessProvider = class {
+  constructor(params) {
+    this._remoteStates = /* @__PURE__ */ new Map();
+    this.remoteStateChange = new Event2();
+    this._space = params.space;
+    this._channel = params.channel;
+    this._peerId = params.peerId;
+    this._info = params.info;
+  }
+  open() {
+    this._ctx = new Context2();
+    this._postTask = new DeferredTask(this._ctx, async () => {
+      if (this._localState) {
+        await this._space.postMessage(this._channel, {
+          kind: "post",
+          state: this._localState
+        });
+        await sleep(DEBOUNCE_INTERVAL);
+      }
+    });
+    this._ctx.onDispose(this._space.listen(this._channel, (message) => {
+      switch (message.payload.kind) {
+        case "query": {
+          this._handleQueryMessage();
+          break;
+        }
+        case "post": {
+          this._handlePostMessage(message.payload);
+          break;
+        }
+      }
+    }));
+    void this._space.postMessage(this._channel, {
+      kind: "query"
+    }).catch((err) => {
+      log2.debug("failed to query awareness", {
+        err
+      }, {
+        F: __dxlog_file2,
+        L: 89,
+        S: this,
+        C: (f, a) => f(...a)
+      });
+    });
+  }
+  close() {
+    void this._ctx?.dispose();
+    this._ctx = void 0;
+    this._postTask = void 0;
+  }
+  getRemoteStates() {
+    return Array.from(this._remoteStates.values());
+  }
+  update(position) {
+    invariant(this._postTask, void 0, {
+      F: __dxlog_file2,
+      L: 104,
+      S: this,
+      A: [
+        "this._postTask",
+        ""
+      ]
+    });
+    this._localState = {
+      peerId: this._peerId,
+      position,
+      info: this._info
+    };
+    this._postTask.schedule();
+  }
+  _handleQueryMessage() {
+    invariant(this._postTask, void 0, {
+      F: __dxlog_file2,
+      L: 115,
+      S: this,
+      A: [
+        "this._postTask",
+        ""
+      ]
+    });
+    this._postTask.schedule();
+  }
+  _handlePostMessage(message) {
+    invariant(message.kind === "post", void 0, {
+      F: __dxlog_file2,
+      L: 120,
+      S: this,
+      A: [
+        "message.kind === 'post'",
+        ""
+      ]
+    });
+    this._remoteStates.set(message.state.peerId, message.state);
+    this.remoteStateChange.emit();
+  }
+};
+
 // 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 } from "@dxos/invariant";
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
+import { invariant as invariant2 } from "@dxos/invariant";
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
 var defaultOptions = {
   effect: 2,
   maxParticles: 200,
@@ -862,8 +962,8 @@ var Blaster = class {
     return this._node;
   }
   initialize() {
-    invariant(!this._canvas && !this._ctx, void 0, {
-      F: __dxlog_file2,
+    invariant2(!this._canvas && !this._ctx, void 0, {
+      F: __dxlog_file3,
       L: 141,
       S: this,
       A: [
@@ -899,8 +999,8 @@ var Blaster = class {
     }
   }
   start() {
-    invariant(this._canvas && this._ctx, void 0, {
-      F: __dxlog_file2,
+    invariant2(this._canvas && this._ctx, void 0, {
+      F: __dxlog_file3,
       L: 180,
       S: this,
       A: [
@@ -1057,7 +1157,7 @@ var commandConfig = Facet3.define({
 });
 var commandState = StateField3.define({
   create: () => ({}),
-  update: (state, tr) => {
+  update: (state2, tr) => {
     for (const effect of tr.effects) {
       if (effect.is(closeEffect)) {
         return {};
@@ -1096,7 +1196,7 @@ var commandState = StateField3.define({
                       }
                     });
                   }
-                  setTimeout(() => view2.focus());
+                  requestAnimationFrame(() => view2.focus());
                 });
               }
             };
@@ -1108,10 +1208,10 @@ var commandState = StateField3.define({
         };
       }
     }
-    return state;
+    return state2;
   },
-  provide: (f) => [
-    showTooltip.from(f, (value) => value.tooltip ?? null)
+  provide: (field) => [
+    showTooltip.from(field, (value) => value.tooltip ?? null)
   ]
 });
 var openEffect = StateEffect2.define();
@@ -1266,7 +1366,7 @@ import { hoverTooltip, keymap as keymap4, Decoration as Decoration4, EditorView
 import sortBy from "lodash.sortby";
 import { useEffect } from "react";
 import { debounce } from "@dxos/async";
-import { log as log3 } from "@dxos/log";
+import { log as log4 } from "@dxos/log";
 import { nonNullable } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/styles/markdown.ts
@@ -1293,10 +1393,10 @@ var inlineUrl = mx(code, "px-1");
 var blockquote = mx("pl-1 mr-1 border-is-4 border-primary-500/70 dark:border-primary-500/30", light);
 
 // packages/ui/react-ui-editor/src/styles/tokens.ts
-import get3 from "lodash.get";
+import get2 from "lodash.get";
 import { tailwindConfig } from "@dxos/react-ui-theme";
 var tokens = tailwindConfig({}).theme;
-var getToken = (path, defaultValue = void 0) => get3(tokens, path, defaultValue);
+var getToken = (path, defaultValue = void 0) => get2(tokens, path, defaultValue);
 
 // packages/ui/react-ui-editor/src/styles/layout.ts
 var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
@@ -1304,14 +1404,14 @@ var editorFillLayoutRoot = "bs-full relative";
 var editorFillLayoutEditor = "!absolute inset-0";
 
 // packages/ui/react-ui-editor/src/util.ts
-import { log as log2 } from "@dxos/log";
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util.ts";
+import { log as log3 } from "@dxos/log";
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util.ts";
 var callbackWrapper = (fn) => (...args) => {
   try {
     return fn(...args);
   } catch (err) {
-    log2.catch(err, void 0, {
-      F: __dxlog_file3,
+    log3.catch(err, void 0, {
+      F: __dxlog_file4,
       L: 18,
       S: void 0,
       C: (f, a) => f(...a)
@@ -1334,10 +1434,10 @@ var logChanges = (trs) => {
     return changes2;
   }).filter(Boolean);
   if (changes.length) {
-    log2.info("changes", {
+    log3.info("changes", {
       changes
     }, {
-      F: __dxlog_file3,
+      F: __dxlog_file4,
       L: 39,
       S: void 0,
       C: (f, a) => f(...a)
@@ -1346,7 +1446,7 @@ 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 __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
 var documentId = Facet4.define({
   combine: (values) => values[0]
 });
@@ -1354,8 +1454,8 @@ var setComments = StateEffect3.define();
 var setSelection = StateEffect3.define();
 var setCommentState = StateEffect3.define();
 var commentsState = StateField4.define({
-  create: (state) => ({
-    id: state.facet(documentId),
+  create: (state2) => ({
+    id: state2.facet(documentId),
     comments: [],
     selection: {}
   }),
@@ -1427,13 +1527,13 @@ var commentCurrentMark = Decoration4.mark({
 });
 var commentsDecorations = EditorView7.decorations.compute([
   commentsState
-], (state) => {
-  const { selection: { current }, comments: comments2 } = state.field(commentsState);
+], (state2) => {
+  const { selection: { current }, comments: comments2 } = state2.field(commentsState);
   const decorations = sortBy(comments2 ?? [], (range) => range.range.from)?.flatMap((comment) => {
     const range = comment.range;
     if (!range || range.from === range.to) {
-      log3.warn("Invalid range:", range, {
-        F: __dxlog_file4,
+      log4.warn("Invalid range:", range, {
+        F: __dxlog_file5,
         L: 132,
         S: void 0,
         C: (f, a) => f(...a)
@@ -1592,7 +1692,7 @@ var optionsFacet = Facet4.define({
 });
 var comments = (options = {}) => {
   const { key: shortcut = "meta-'" } = options;
-  const handleSelect = debounce((state) => options.onSelect?.(state), 200);
+  const handleSelect = debounce((state2) => options.onSelect?.(state2), 200);
   return [
     optionsFacet.of(options),
     documentId.of(options.id),
@@ -1641,9 +1741,9 @@ var comments = (options = {}) => {
     //
     // Track deleted ranges and update ranges for decorations.
     //
-    EditorView7.updateListener.of(({ view, state, changes }) => {
+    EditorView7.updateListener.of(({ view, state: state2, changes }) => {
       let mod = false;
-      const { comments: comments2, ...value } = state.field(commentsState);
+      const { comments: comments2, ...value } = state2.field(commentsState);
       changes.iterChanges((from, to, from2, to2) => {
         comments2.forEach(({ comment, range }) => {
           if (from2 === to2) {
@@ -1673,10 +1773,10 @@ var comments = (options = {}) => {
     //
     // Track selection/proximity.
     //
-    EditorView7.updateListener.of(({ view, state }) => {
+    EditorView7.updateListener.of(({ view, state: state2 }) => {
       let min = Infinity;
-      const { selection: { current, closest }, comments: comments2 } = state.field(commentsState);
-      const { head } = state.selection.main;
+      const { selection: { current, closest }, comments: comments2 } = state2.field(commentsState);
+      const { head } = state2.selection.main;
       const selection = {};
       comments2.forEach(({ comment, range }) => {
         if (head >= range.from && head <= range.to) {
@@ -1697,7 +1797,7 @@ var comments = (options = {}) => {
         });
         handleSelect({
           selection,
-          id: state.facet(documentId),
+          id: state2.facet(documentId),
           comments: comments2.map(({ comment, range }) => ({
             comment,
             range,
@@ -1732,15 +1832,17 @@ var focusComment = (view, id, center = true) => {
     });
   }
 };
-var useComments = (view, id, comments2 = []) => {
+var useComments = (view, id, comments2) => {
   useEffect(() => {
     if (view) {
-      view.dispatch({
-        effects: setComments.of({
-          id,
-          comments: comments2
-        })
-      });
+      if (id === view.state.facet(documentId)) {
+        view.dispatch({
+          effects: setComments.of({
+            id,
+            comments: comments2 ?? []
+          })
+        });
+      }
     }
   }, [
     id,
@@ -1749,623 +1851,442 @@ var useComments = (view, id, comments2 = []) => {
   ]);
 };
 
-// packages/ui/react-ui-editor/src/extensions/cursor-line-margin.ts
-import { Facet as Facet5, Transaction } from "@codemirror/state";
-import { EditorView as EditorView8 } from "@codemirror/view";
-import { log as log4 } from "@dxos/log";
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/cursor-line-margin.ts";
-var cursorLineMarginFacet = Facet5.define({
-  combine: (input) => input[0] ?? 3
-});
-var annotation = "cursorLineMargin";
-var lineAtPos = (s, pos) => s.doc.lineAt(pos).number;
-var cursorLineMargin = EditorView8.updateListener.of(({ transactions, state, selectionSet, startState, view }) => {
-  if (transactions.length < 1 || transactions.some((tr) => tr.isUserEvent(annotation))) {
-    return;
-  }
-  const s = state;
-  const { main } = s.selection;
-  const cursorLineMargin2 = s.facet(cursorLineMarginFacet);
-  const rect = view.dom.getBoundingClientRect();
-  const viewportTop = rect.top - view.documentTop;
-  const viewportBottom = rect.bottom - view.documentTop;
-  const mainLine = lineAtPos(s, main.head);
-  const _visTopLine = lineAtPos(s, view.lineBlockAtHeight(viewportTop).from);
-  const botLineBlk = view.lineBlockAtHeight(viewportBottom);
-  const visBotLineDoc = lineAtPos(s, Math.min(botLineBlk.to, s.doc.length));
-  const visBotLine = botLineBlk.bottom >= viewportBottom ? visBotLineDoc : visBotLineDoc + Math.floor((viewportBottom - botLineBlk.bottom) / view.defaultLineHeight);
-  const needsScrollTop = false;
-  const needsScrollBot = mainLine >= visBotLine - cursorLineMargin2;
-  if (needsScrollTop && needsScrollBot) {
-    log4.warn("is cursorScrollMargin too large for the editor size?", void 0, {
-      F: __dxlog_file5,
-      L: 66,
+// packages/ui/react-ui-editor/src/extensions/doc.ts
+import { Facet as Facet5 } from "@codemirror/state";
+import { invariant as invariant3 } from "@dxos/invariant";
+var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/doc.ts";
+var documentId2 = Facet5.define({
+  combine: (providers) => {
+    invariant3(providers.length <= 1, void 0, {
+      F: __dxlog_file6,
+      L: 11,
       S: void 0,
-      C: (f, a) => f(...a)
+      A: [
+        "providers.length <= 1",
+        ""
+      ]
     });
-    return;
-  }
-  if (!needsScrollTop && !needsScrollBot) {
-    return;
-  }
-  if (selectionSet) {
-    const { head } = startState.selection.main;
-    const oldMainLine = lineAtPos(startState, head);
-    if (needsScrollTop && oldMainLine < mainLine) {
-      return;
-    }
-    if (needsScrollBot && oldMainLine > mainLine) {
-      return;
-    }
+    return providers[0];
   }
-  view.dispatch({
-    annotations: Transaction.userEvent.of(annotation),
-    effects: EditorView8.scrollIntoView(s.selection.main.head, {
-      y: needsScrollTop ? "start" : "end",
-      yMargin: view.defaultLineHeight * cursorLineMargin2
-    })
-  });
 });
 
 // packages/ui/react-ui-editor/src/extensions/dnd.ts
-import { EditorView as EditorView9 } from "@codemirror/view";
-import { log as log5 } from "@dxos/log";
-var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/dnd.ts";
-var dnd = () => {
-  return EditorView9.domEventHandlers({
-    drop: (event, view) => {
-      log5.info("domEventHandlersDrop", {
-        event
-      }, {
-        F: __dxlog_file6,
-        L: 14,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-    }
-  });
-};
-
-// packages/ui/react-ui-editor/src/extensions/listener.ts
-import { EditorView as EditorView10 } from "@codemirror/view";
-var listener = ({ onFocus, onChange }) => {
-  const extensions = [];
-  onFocus && extensions.push(EditorView10.focusChangeEffect.of((_, focusing) => {
-    onFocus(focusing);
-    return null;
-  }));
-  onChange && extensions.push(EditorView10.updateListener.of((update2) => {
-    onChange(update2.state.doc.toString());
-  }));
-  return extensions;
+import { dropCursor, EditorView as EditorView8 } from "@codemirror/view";
+var styles4 = EditorView8.baseTheme({
+  ".cm-dropCursor": {
+    borderLeft: `2px solid ${getToken("extend.colors.primary.500")}`,
+    color: getToken("extend.colors.primary.500"),
+    padding: "0 4px"
+  },
+  ".cm-dropCursor:after": {
+    content: '"\u2190"'
+  }
+});
+var dropFile = (options = {}) => {
+  return [
+    styles4,
+    dropCursor(),
+    EditorView8.domEventHandlers({
+      drop: (event, view) => {
+        event.preventDefault();
+        const files = event.dataTransfer?.files;
+        const pos = view.posAtCoords(event);
+        if (files?.length && pos !== null) {
+          view.dispatch({
+            selection: {
+              anchor: pos
+            }
+          });
+          options.onDrop?.(view, {
+            files
+          });
+        }
+      }
+    })
+  ];
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
+// packages/ui/react-ui-editor/src/extensions/factories.ts
 import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
-import { history, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
-import { markdownLanguage as markdownLanguage3, markdown } from "@codemirror/lang-markdown";
-import { bracketMatching, defaultHighlightStyle, indentOnInput, syntaxHighlighting } from "@codemirror/language";
-import { languages } from "@codemirror/language-data";
+import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
+import { bracketMatching } from "@codemirror/language";
 import { searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
-import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
-import { EditorView as EditorView11, drawSelection, dropCursor, keymap as keymap5, placeholder } from "@codemirror/view";
-import { isNotFalsy as isNotFalsy2 } from "@dxos/util";
+import { EditorView as EditorView9, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap5, lineNumbers, placeholder, scrollPastEnd } from "@codemirror/view";
+import defaultsDeep2 from "lodash.defaultsdeep";
+import { generateName } from "@dxos/display-name";
+import { log as log5 } from "@dxos/log";
+import { hueTokens } from "@dxos/react-ui-theme";
+import { hexToHue, 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 markdownTagsExtensions = [
-  Table,
-  {
-    props: [
-      styleTags(markdownTags)
-    ]
-  }
-];
-var markdownHighlightStyle = (readonly) => {
-  return HighlightStyle.define([
-    {
-      tag: [
-        tags.keyword,
-        tags.name,
-        tags.deleted,
-        tags.character,
-        tags.propertyName,
-        tags.macroName,
-        tags.color,
-        tags.constant(tags.name),
-        tags.standard(tags.name),
-        tags.definition(tags.name),
-        tags.separator,
-        tags.typeName,
-        tags.className,
-        tags.number,
-        tags.changed,
-        tags.annotation,
-        tags.modifier,
-        tags.self,
-        tags.namespace,
-        tags.operator,
-        tags.operatorKeyword,
-        tags.escape,
-        tags.regexp,
-        tags.special(tags.string),
-        tags.meta,
-        tags.comment,
-        tags.atom,
-        tags.bool,
-        tags.special(tags.variableName),
-        tags.processingInstruction,
-        tags.string,
-        tags.inserted,
-        tags.invalid
-      ],
-      color: "inherit !important"
-    },
-    // Markdown marks.
-    {
-      tag: [
-        tags.meta,
-        tags.processingInstruction,
-        markdownTags.LinkLabel,
-        markdownTags.LinkReference,
-        markdownTags.ListMark
-      ],
-      class: mark
-    },
-    // Markdown marks.
-    {
-      tag: [
-        markdownTags.CodeMark,
-        markdownTags.HeaderMark,
-        markdownTags.QuoteMark,
-        markdownTags.EmphasisMark
-      ],
-      class: mark
-    },
-    // E.g., code block language (after ```).
-    {
-      tag: [
-        tags.function(tags.variableName),
-        tags.labelName
-      ],
-      class: codeMark
-    },
-    {
-      tag: [
-        tags.monospace
-      ],
-      class: "font-mono"
-    },
-    // Headings.
-    {
-      tag: tags.heading1,
-      class: heading(1)
-    },
-    {
-      tag: tags.heading2,
-      class: heading(2)
-    },
-    {
-      tag: tags.heading3,
-      class: heading(3)
-    },
-    {
-      tag: tags.heading4,
-      class: heading(4)
-    },
-    {
-      tag: tags.heading5,
-      class: heading(5)
-    },
-    {
-      tag: tags.heading6,
-      class: heading(6)
-    },
-    // Emphasis.
-    {
-      tag: tags.emphasis,
-      class: italic
-    },
-    {
-      tag: tags.strong,
-      class: bold
-    },
-    {
-      tag: tags.strikethrough,
-      class: strikethrough
-    },
-    // Naked URLs.
-    {
-      tag: [
-        markdownTags.URL
-      ],
-      class: inlineUrl
-    },
-    // NOTE: The `markdown` extension configures extensions for `lezer` to parse markdown tokens (incl. below).
-    // 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 unless changed by an extension.
-    {
-      tag: [
-        markdownTags.CodeText,
-        markdownTags.InlineCode
-      ],
-      class: code
-    },
-    {
-      tag: [
-        markdownTags.QuoteMark
-      ],
-      class: blockquote
-    },
-    {
-      tag: [
-        markdownTags.TableCell
-      ],
-      class: "font-mono"
-    }
-  ], {
-    scope: markdownLanguage2,
-    all: {
-      fontFamily: getToken("fontFamily.body", []).join(",")
-    }
-  });
-};
-
-// packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
-var createMarkdownExtensions = ({ themeMode, placeholder: _placeholder, lineWrapping = true } = {}) => {
-  return [
-    // TODO(burdon): Reconcile with createBasicExtensions.
-    lineWrapping && EditorView11.lineWrapping,
-    EditorState.allowMultipleSelections.of(true),
-    EditorState.tabSize.of(2),
-    bracketMatching(),
-    closeBrackets(),
-    dropCursor(),
-    drawSelection(),
-    history(),
-    indentOnInput(),
-    _placeholder && placeholder(_placeholder),
-    // Main extension.
-    // https://github.com/codemirror/lang-markdown
-    // https://codemirror.net/5/mode/markdown/index.html (demo).
-    markdown({
-      // GRM by default (vs strict CommonMark):
-      // Table, TaskList, Strikethrough, and Autolink.
-      // NOTE: This extends the parser; it doesn't affect rendering.
-      // https://github.github.com/gfm
-      // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
-      base: markdownLanguage3,
-      // Languages for syntax highlighting fenced code blocks.
-      codeLanguages: languages,
-      // Parser extensions.
-      extensions: [
-        // GFM provided by default.
-        markdownTagsExtensions
-      ]
-    }),
-    // https://github.com/codemirror/theme-one-dark
-    themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
-    // Custom styles.
-    syntaxHighlighting(markdownHighlightStyle()),
-    keymap5.of([
-      // https://codemirror.net/docs/ref/#commands.indentWithTab
-      indentWithTab,
-      // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
-      ...closeBracketsKeymap,
-      // https://codemirror.net/docs/ref/#commands.historyKeymap
-      ...historyKeymap,
-      // https://codemirror.net/docs/ref/#search.searchKeymap
-      ...searchKeymap,
-      // https://codemirror.net/docs/ref/#commands.standardKeymap
-      ...standardKeymap
-    ])
-  ].filter(isNotFalsy2);
-};
-
-// packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
-import { syntaxTree } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder2, StateEffect as StateEffect4 } from "@codemirror/state";
-import { EditorView as EditorView12, Decoration as Decoration5, WidgetType as WidgetType3, ViewPlugin as ViewPlugin4 } from "@codemirror/view";
-import { mx as mx2 } from "@dxos/react-ui-theme";
-var HorizontalRuleWidget = class extends WidgetType3 {
-  toDOM() {
-    const el = document.createElement("span");
-    el.className = "cm-hr";
-    return el;
-  }
-};
-var LinkButton = class extends WidgetType3 {
-  constructor(url, render) {
-    super();
-    this.url = url;
-    this.render = render;
-  }
-  eq(other) {
-    return this.url === other.url;
-  }
-  toDOM(view) {
-    const el = document.createElement("span");
-    this.render(el, this.url);
-    return el;
-  }
-};
-var CheckboxWidget = class extends WidgetType3 {
-  constructor(_checked) {
-    super();
-    this._checked = _checked;
-  }
-  eq(other) {
-    return this._checked === other._checked;
-  }
-  toDOM(view) {
-    const input = document.createElement("input");
-    input.className = "cm-task-checkbox";
-    input.type = "checkbox";
-    input.checked = this._checked;
-    if (view.state.readOnly) {
-      input.setAttribute("disabled", "true");
-    } else {
-      input.onmousedown = (event) => {
-        const pos = view.posAtDOM(input);
-        const text = view.state.sliceDoc(pos, pos + 3);
-        if (text === (this._checked ? "[x]" : "[ ]")) {
-          view.dispatch({
-            changes: {
-              from: pos + 1,
-              to: pos + 2,
-              insert: this._checked ? " " : "x"
-            }
-          });
-          event.preventDefault();
-        }
-      };
-    }
-    return input;
-  }
-  ignoreEvent() {
-    return false;
-  }
-};
-var hide = Decoration5.replace({});
-var fencedCodeLine = Decoration5.line({
-  class: mx2("cm-code cm-codeblock-line")
-});
-var fencedCodeLineFirst = Decoration5.line({
-  class: mx2("cm-code cm-codeblock-line", "cm-codeblock-first")
-});
-var fencedCodeLineLast = Decoration5.line({
-  class: mx2("cm-code cm-codeblock-line", "cm-codeblock-last")
-});
-var horizontalRule = Decoration5.replace({
-  widget: new HorizontalRuleWidget()
-});
-var checkedTask = Decoration5.replace({
-  widget: new CheckboxWidget(true)
-});
-var uncheckedTask = Decoration5.replace({
-  widget: new CheckboxWidget(false)
-});
-var editingRange = (state, range, focus) => {
-  const { readOnly, selection: { main: { head } } } = state;
-  return focus && !readOnly && head >= range.from && head <= range.to;
-};
-var MarksByParent = /* @__PURE__ */ new Set([
-  "CodeMark",
-  "EmphasisMark",
-  "StrikethroughMark",
-  "SubscriptMark",
-  "SuperscriptMark"
-]);
-var buildDecorations = (view, options, focus) => {
-  const deco = new RangeSetBuilder2();
-  const atomicDeco = new RangeSetBuilder2();
-  const { state } = view;
-  for (const { from, to } of view.visibleRanges) {
-    syntaxTree(state).iterate({
-      from,
-      to,
-      enter: (node) => {
-        if (node.name === "FencedCode") {
-          const editing = editingRange(state, node, focus);
-          for (const block of view.viewportLineBlocks) {
-            if (block.to < node.from) {
-              continue;
-            }
-            if (block.from > node.to) {
-              break;
-            }
-            const first = block.from <= node.from;
-            const last = block.to >= node.to && /^(\s>)*```$/.test(state.doc.sliceString(block.from, block.to));
-            deco.add(block.from, block.from, first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine);
-            if (!editing && (first || last)) {
-              atomicDeco.add(block.from, block.to, hide);
-            }
-          }
-          return false;
-        } else if (node.name === "Link") {
-          const marks = node.node.getChildren("LinkMark");
-          const urlNode = node.node.getChild("URL");
-          const editing = editingRange(state, node, focus);
-          if (urlNode && marks.length >= 2) {
-            const url = state.sliceDoc(urlNode.from, urlNode.to);
-            if (!editing) {
-              atomicDeco.add(node.from, marks[0].to, hide);
-            }
-            deco.add(marks[0].to, marks[1].from, Decoration5.mark({
-              tagName: "a",
-              attributes: {
-                class: "cm-link",
-                href: url,
-                rel: "noreferrer",
-                target: "_blank"
-              }
-            }));
-            if (!editing) {
-              atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? Decoration5.replace({
-                widget: new LinkButton(url, options.renderLinkButton)
-              }) : hide);
-            }
-          }
-        } else if (node.name === "HeaderMark") {
-          const parent = node.node.parent;
-          if (/^ATX/.test(parent.name) && !editingRange(state, state.doc.lineAt(node.from), focus)) {
-            const next = state.doc.sliceString(node.to, node.to + 1);
-            atomicDeco.add(node.from, node.to + (next === " " ? 1 : 0), hide);
-          }
-        } else if (node.name === "HorizontalRule") {
-          if (!editingRange(state, node, focus)) {
-            deco.add(node.from, node.to, horizontalRule);
-          }
-        } else if (node.name === "TaskMarker") {
-          if (!editingRange(state, node, focus)) {
-            const checked = state.doc.sliceString(node.from + 1, node.to - 1) === "x";
-            atomicDeco.add(node.from - 2, node.from - 1, Decoration5.mark({
-              class: "cm-task"
-            }));
-            atomicDeco.add(node.from, node.to, checked ? checkedTask : uncheckedTask);
-          }
-        } else if (MarksByParent.has(node.name)) {
-          if (!editingRange(state, node.node.parent, focus)) {
-            atomicDeco.add(node.from, node.to, hide);
-          }
-        }
-      }
-    });
-  }
-  return {
-    deco: deco.finish(),
-    atomicDeco: atomicDeco.finish()
-  };
-};
-var forceUpdate = StateEffect4.define();
-var decorateMarkdown = (options = {}) => {
-  return [
-    ViewPlugin4.fromClass(class {
-      constructor(view) {
-        ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations(view, options, view.hasFocus));
-      }
-      update(update2) {
-        if (update2.docChanged || update2.viewportChanged || update2.focusChanged || update2.transactions.some((tr) => tr.effects.some((e) => e.is(forceUpdate))) || update2.selectionSet && !options.selectionChangeDelay) {
-          ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations(update2.view, options, update2.view.hasFocus));
-          this.clearUpdate();
-        } else if (update2.selectionSet) {
-          this.scheduleUpdate(update2.view);
-        }
-      }
-      // TODO(burdon): BUG: If the cursor is at the end of a link at the end of a line,
-      //  the cursor will float in space or be in the wrong position after the decoration is applied.
-      scheduleUpdate(view) {
-        this.clearUpdate();
-        this.pendingUpdate = setTimeout(() => {
-          view.dispatch({
-            effects: forceUpdate.of(null)
-          });
-        }, options.selectionChangeDelay);
-      }
-      clearUpdate() {
-        if (this.pendingUpdate) {
-          clearTimeout(this.pendingUpdate);
-          this.pendingUpdate = void 0;
-        }
-      }
-      destroy() {
-        this.clearUpdate();
-      }
-    }, {
-      provide: (plugin) => [
-        EditorView12.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration5.none),
-        EditorView12.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration5.none),
-        EditorView12.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration5.none)
-      ]
-    }),
-    formattingStyles
-  ];
-};
-var formattingStyles = EditorView12.baseTheme({
-  "& .cm-code": {
-    fontFamily: getToken("fontFamily.mono", []).join(",")
+// packages/ui/react-ui-editor/src/themes/default.ts
+import get3 from "lodash.get";
+var defaultTheme = {
+  //
+  // Main layout:
+  // https://codemirror.net/examples/styling
+  //
+  // <div class="cm-editor [cm-focused] [generated classes]">
+  //   <div class="cm-scroller">
+  //     <div class="cm-gutters">
+  //       <div class="cm-gutter [...]">
+  //         <div class="cm-gutterElement">...</div>
+  //       </div>
+  //     </div>
+  //     <div class="cm-content" role="textbox" contenteditable="true">
+  //       <div class="cm-line"></div>
+  //     </div>
+  //     <div class="cm-selectionLayer">
+  //       <div class="cm-selectionBackground"></div>
+  //     </div>
+  //     <div class="cm-cursorLayer">
+  //       <div class="cm-cursor"></div>
+  //     </div>
+  //   </div>
+  // </div>
+  //
+  "&": {},
+  "&.cm-focused": {
+    outline: "none"
   },
-  "& .cm-codeblock-line": {
-    paddingInline: "1rem !important"
+  // NOTE: See https://codemirror.net/docs/guide (DOM Structure).
+  ".cm-scroller": {
+    // TODO(burdon): Reconcile with docs: https://codemirror.net/docs/guide
+    //  Inside of that is the scroller element. If the editor has its own scrollbar, this one should be styled with overflow: auto. But it doesn't have to—the editor also supports growing to accomodate its content, or growing up to a certain max-height and then scrolling.
+    overflowY: "auto",
+    fontFamily: get3(tokens, "fontFamily.body", []).join(","),
+    lineHeight: 1.5
   },
-  "& .cm-codeblock-end": {
-    display: "inline-block",
-    width: "100%",
-    position: "relative",
-    "&::after": {
-      position: "absolute",
-      inset: 0,
-      content: '""'
-    }
+  ".cm-content": {
+    // TODO(burdon): Is it possible to remove the padding value from CM's default theme?
+    // padding: 'unset',
+    // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
+    fontSize: "16px"
   },
-  "& .cm-codeblock-first": {
-    borderTopLeftRadius: ".5rem",
-    borderTopRightRadius: ".5rem"
+  "&light .cm-content": {
+    color: get3(tokens, "extend.semanticColors.base.fg.light", "black"),
+    caretColor: "black"
   },
-  "& .cm-codeblock-last": {
-    borderBottomLeftRadius: ".5rem",
-    borderBottomRightRadius: ".5rem"
+  "&dark .cm-content": {
+    color: get3(tokens, "extend.semanticColors.base.fg.dark", "white"),
+    caretColor: "white"
   },
-  "&light .cm-codeblock-line, &light .cm-activeLine.cm-codeblock-line": {
-    background: getToken("extend.semanticColors.input.light"),
-    mixBlendMode: "darken"
+  //
+  // Cursor
+  //
+  "&light .cm-cursor, &light .cm-dropCursor": {
+    borderLeft: "2px solid black"
+  },
+  "&dark .cm-cursor, &dark .cm-dropCursor": {
+    borderLeft: "2px solid white"
+  },
+  "&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
+  //
+  ".cm-line": {
+    paddingInline: 0
+  },
+  ".cm-activeLine": {
+    background: "transparent"
+  },
+  //
+  // gutter
+  //
+  ".cm-gutterElement": {
+    width: "48px"
+  },
+  //
+  // Selection
+  //
+  "&light .cm-selectionBackground": {
+    background: get3(tokens, "extend.colors.primary.100")
+  },
+  "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
+    background: get3(tokens, "extend.colors.primary.200")
+  },
+  "&dark .cm-selectionBackground": {
+    background: get3(tokens, "extend.colors.primary.700")
+  },
+  "&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
+    background: get3(tokens, "extend.colors.primary.600")
+  },
+  //
+  // Search
+  //
+  "&light .cm-searchMatch": {
+    backgroundColor: get3(tokens, "extend.colors.yellow.100")
+  },
+  "&dark .cm-searchMatch": {
+    backgroundColor: get3(tokens, "extend.colors.yellow.700")
+  },
+  //
+  // link
+  //
+  ".cm-link": {
+    color: get3(tokens, "extend.colors.primary.500"),
+    textDecorationLine: "underline",
+    textDecorationThickness: "1px",
+    textUnderlineOffset: "2px",
+    borderRadius: ".125rem",
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+  },
+  //
+  // tooltip
+  //
+  ".cm-tooltip": {
+    border: "none",
+    background: "unset"
+  },
+  ".cm-tooltip-below": {},
+  //
+  // autocomplete
+  //
+  ".cm-tooltip-autocomplete": {
+    marginTop: "4px",
+    marginLeft: "-3px"
+  },
+  ".cm-tooltip-autocomplete ul li": {},
+  ".cm-tooltip-autocomplete ul li[aria-selected]": {},
+  ".cm-completionIcon": {
+    display: "none"
+  },
+  ".cm-completionLabel": {
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+  },
+  ".cm-completionMatchedText": {
+    textDecoration: "none"
+  },
+  //
+  // table
+  //
+  ".cm-table *": {
+    fontFamily: `${get3(tokens, "fontFamily.mono", []).join(",")} !important`,
+    textDecoration: "none !important"
+  },
+  ".cm-table-head": {
+    padding: "2px 16px 2px 0px",
+    borderBottom: `1px solid ${get3(tokens, "extend.colors.neutral.500")}`,
+    fontWeight: 100,
+    textAlign: "left",
+    color: get3(tokens, "extend.colors.neutral.500")
+  },
+  ".cm-table-cell": {
+    padding: "2px 16px 2px 0px"
+  },
+  //
+  // image
+  //
+  ".cm-image": {
+    display: "block",
+    height: "0"
+  },
+  ".cm-image.cm-loaded-image": {
+    height: "auto",
+    borderTop: "0.5rem solid transparent",
+    borderBottom: "0.5rem solid transparent"
+  },
+  //
+  // font size
+  // TODO(thure): This appears to be the best or only way to set selection caret heights,
+  //  but it's far more verbose than it needs to be.
+  //
+  // ...Object.keys(get(tokens, 'extend.fontSize', {})).reduce((acc: Record<string, any>, fontSize) => {
+  //   const height = get(tokens, ['extend', 'fontSize', fontSize, 1, 'lineHeight']);
+  //
+  //   acc[`& .text-${fontSize} + .cm-ySelectionCaret`] = { height };
+  //   acc[`& .text-${fontSize} + .cm-ySelection + .cm-ySelectionCaret`] = { height };
+  //   acc[`& .text-${fontSize} + .cm-widgetBuffer + .cm-ySelectionCaret`] = { height };
+  //   return acc;
+  // }, {}),
+  /**
+  * Panels
+  * TODO(burdon): Needs styling attention (esp. dark mode).
+  * https://github.com/codemirror/search/blob/main/src/search.ts#L745
+  *
+  * Find/replace panel.
+  * <div class="cm-announced">...</div>
+  * <div class="cm-scroller">...</div>
+  * <div class="cm-panels cm-panels-bottom">
+  *   <div class="cm-search cm-panel">
+  *     <input class="cm-textfield" />
+  *     <button class="cm-button">...</button>
+  *     <label><input type="checkbox" />...</label>
+  *   </div>
+  * </div
+  */
+  ".cm-panels": {},
+  ".cm-panel": {
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+  },
+  ".cm-panel input[type=checkbox]": {
+    marginRight: "0.4rem !important"
+  },
+  "&light .cm-panel": {
+    background: get3(tokens, "extend.colors.neutral.50")
   },
-  "&dark .cm-codeblock-line, &dark .cm-activeLine.cm-codeblock-line": {
-    background: getToken("extend.semanticColors.input.dark"),
-    mixBlendMode: "lighten"
+  "&dark .cm-panel": {
+    background: get3(tokens, "extend.colors.neutral.850")
   },
-  "& .cm-hr": {
-    display: "inline-block",
-    width: "100%",
-    height: "0",
-    verticalAlign: "middle",
-    borderTop: `1px solid ${getToken("extend.colors.neutral.200")}`
+  ".cm-button": {
+    margin: "4px",
+    fontFamily: get3(tokens, "fontFamily.body", []).join(","),
+    backgroundImage: "none",
+    border: "none",
+    "&:active": {
+      backgroundImage: "none"
+    }
   },
-  "& .cm-task": {
-    color: getToken("extend.colors.blue.500")
+  "&light .cm-button": {
+    background: get3(tokens, "extend.colors.neutral.100"),
+    "&:hover": {
+      background: get3(tokens, "extend.colors.neutral.200")
+    },
+    "&:active": {
+      background: get3(tokens, "extend.colors.neutral.300")
+    }
   },
-  "& .cm-task-checkbox": {
-    marginLeft: "4px",
-    marginRight: "4px"
+  "&dark .cm-button": {
+    background: get3(tokens, "extend.colors.neutral.800"),
+    "&:hover": {
+      background: get3(tokens, "extend.colors.neutral.700")
+    },
+    "&:active": {
+      background: get3(tokens, "extend.colors.neutral.600")
+    }
   }
-});
+};
+
+// packages/ui/react-ui-editor/src/extensions/factories.ts
+var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
+var defaultBasicOptions = {
+  allowMultipleSelections: true,
+  bracketMatching: true,
+  closeBrackets: true,
+  drawSelection: true,
+  editable: true,
+  history: true,
+  keymap: "standard",
+  lineWrapping: true,
+  search: true
+};
+var keymaps = {
+  // https://codemirror.net/docs/ref/#commands.standardKeymap
+  standard: standardKeymap,
+  // https://codemirror.net/docs/ref/#commands.defaultKeymap
+  default: defaultKeymap
+};
+var createBasicExtensions = (_props) => {
+  const props = defaultsDeep2({}, _props, defaultBasicOptions);
+  return [
+    // NOTE: Doesn't catch errors in keymap functions.
+    EditorView9.exceptionSink.of((err) => {
+      log5.catch(err, void 0, {
+        F: __dxlog_file7,
+        L: 91,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }),
+    props.allowMultipleSelections && EditorState.allowMultipleSelections.of(true),
+    props.bracketMatching && bracketMatching(),
+    props.closeBrackets && closeBrackets(),
+    props.dropCursor && dropCursor2(),
+    props.drawSelection && drawSelection(),
+    props.highlightActiveLine && highlightActiveLine(),
+    props.history && history(),
+    props.lineNumbers && lineNumbers(),
+    props.lineWrapping && EditorView9.lineWrapping,
+    props.placeholder && placeholder(props.placeholder),
+    props.readonly && [
+      EditorState.readOnly.of(true),
+      EditorView9.editable.of(false)
+    ],
+    props.scrollPastEnd && scrollPastEnd(),
+    props.tabSize && EditorState.tabSize.of(props.tabSize),
+    // https://codemirror.net/docs/ref/#view.KeyBinding
+    keymap5.of([
+      ...(props.keymap && keymaps[props.keymap]) ?? [],
+      // https://codemirror.net/docs/ref/#commands.indentWithTab
+      ...props.indentWithTab ? [
+        indentWithTab
+      ] : [],
+      // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
+      ...props.closeBrackets ? closeBracketsKeymap : [],
+      // https://codemirror.net/docs/ref/#commands.historyKeymap
+      ...props.history ? historyKeymap : [],
+      // https://codemirror.net/docs/ref/#search.searchKeymap
+      ...props.search ? searchKeymap : []
+    ].filter(isNotFalsy2))
+  ].filter(isNotFalsy2);
+};
+var defaultThemeSlots = {
+  editor: {
+    className: "w-full bs-full"
+  }
+};
+var createThemeExtensions = ({ theme, themeMode, slots: _slots } = {}) => {
+  const slots = defaultsDeep2({}, _slots, defaultThemeSlots);
+  return [
+    EditorView9.baseTheme(defaultTheme),
+    EditorView9.darkTheme.of(themeMode === "dark"),
+    theme && EditorView9.theme(theme),
+    slots.editor?.className && EditorView9.editorAttributes.of({
+      class: slots.editor.className
+    }),
+    slots.content?.className && EditorView9.contentAttributes.of({
+      class: slots.content.className
+    })
+  ].filter(isNotFalsy2);
+};
+var createDataExtensions = ({ id, text, space, identity }) => {
+  const extensions = [
+    automerge(text)
+  ];
+  if (space && identity) {
+    const peerId = identity?.identityKey.toHex();
+    const { cursorLightValue, cursorDarkValue } = hueTokens[identity?.profile?.data?.hue ?? hexToHue(peerId ?? "0")];
+    const awarenessProvider2 = new SpaceAwarenessProvider({
+      space,
+      channel: `awareness.${id}`,
+      peerId: identity.identityKey.toHex(),
+      info: {
+        displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
+        color: cursorDarkValue,
+        lightColor: cursorLightValue
+      }
+    });
+    extensions.push(awareness(awarenessProvider2));
+  }
+  return extensions;
+};
+
+// packages/ui/react-ui-editor/src/extensions/listener.ts
+import { EditorView as EditorView10 } from "@codemirror/view";
+var listener = ({ onFocus, onChange }) => {
+  const extensions = [];
+  onFocus && extensions.push(EditorView10.focusChangeEffect.of((_, focusing) => {
+    onFocus(focusing);
+    return null;
+  }));
+  onChange && extensions.push(EditorView10.updateListener.of((update2) => {
+    onChange(update2.state.doc.toString());
+  }));
+  return extensions;
+};
 
 // packages/ui/react-ui-editor/src/extensions/markdown/formatting.ts
 import { snippet } from "@codemirror/autocomplete";
-import { syntaxTree as syntaxTree2 } from "@codemirror/language";
+import { syntaxTree } from "@codemirror/language";
 import { EditorSelection } from "@codemirror/state";
-import { EditorView as EditorView13, keymap as keymap6 } 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;
+import { EditorView as EditorView11, keymap as keymap6 } from "@codemirror/view";
+import { useMemo, useState } from "react";
+var formattingEquals = (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";
@@ -2379,13 +2300,13 @@ var List;
   List2[List2["Bullet"] = 1] = "Bullet";
   List2[List2["Task"] = 2] = "Task";
 })(List || (List = {}));
-var setHeading = (level) => ({ state, dispatch }) => {
-  const { selection: { ranges }, doc } = state;
+var setHeading = (level) => ({ state: state2, dispatch }) => {
+  const { selection: { ranges }, doc } = state2;
   const changes = [];
   let prevBlock = -1;
   for (const range of ranges) {
     let sawBlock = false;
-    syntaxTree2(state).iterate({
+    syntaxTree(state2).iterate({
       from: range.from,
       to: range.to,
       enter: (node) => {
@@ -2438,7 +2359,7 @@ var setHeading = (level) => ({ state, dispatch }) => {
       }
     });
     let line;
-    if (!sawBlock && range.empty && level > 0 && !/\S/.test((line = state.doc.lineAt(range.from)).text)) {
+    if (!sawBlock && range.empty && level > 0 && !/\S/.test((line = state2.doc.lineAt(range.from)).text)) {
       changes.push({
         from: line.from,
         to: line.to,
@@ -2449,23 +2370,23 @@ var setHeading = (level) => ({ state, dispatch }) => {
   if (!changes.length) {
     return false;
   }
-  const changeSet = state.changes(changes);
-  dispatch(state.update({
+  const changeSet = state2.changes(changes);
+  dispatch(state2.update({
     changes: changeSet,
-    selection: state.selection.map(changeSet, 1),
+    selection: state2.selection.map(changeSet, 1),
     userEvent: "format.setHeading",
     scrollIntoView: true
   }));
   return true;
 };
-var setStyle = (type, enable) => ({ state, dispatch }) => {
+var setStyle = (type, enable) => ({ state: state2, dispatch }) => {
   const marker = inlineMarkerText(type);
-  const changes = state.changeByRange((range) => {
+  const changes = state2.changeByRange((range) => {
     if (!enable && range.empty) {
-      const after = state.doc.sliceString(range.head, range.head + 6);
+      const after = state2.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);
+        const before = state2.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)) {
@@ -2492,14 +2413,14 @@ var setStyle = (type, enable) => ({ state, dispatch }) => {
     let startCovered = false;
     let endCovered = false;
     let { from, to } = range;
-    syntaxTree2(state).iterate({
+    syntaxTree(state2).iterate({
       from,
       to,
       enter: (node) => {
         const { name } = node;
         if (Object.hasOwn(Textblocks, name) && Textblocks[name] !== "codeblock") {
           blockStart = blockContentStart(node);
-          blockEnd = blockContentEnd(node, state.doc);
+          blockEnd = blockContentEnd(node, state2.doc);
           startCovered = endCovered = false;
         } else if (name === "Link" || name === "Image" && enable) {
           if (from < node.from && to > node.from && to <= node.to) {
@@ -2544,7 +2465,7 @@ var setStyle = (type, enable) => ({ state, dispatch }) => {
               });
               if (markType !== type && closeStart >= to) {
                 changesAtEnd.push({
-                  from: skipSpaces(Math.min(to, blockEnd), state.doc, 1, blockEnd),
+                  from: skipSpaces(Math.min(to, blockEnd), state2.doc, 1, blockEnd),
                   insert: inlineMarkerText(markType)
                 });
               }
@@ -2556,7 +2477,7 @@ var setStyle = (type, enable) => ({ state, dispatch }) => {
               });
               if (markType !== type && openEnd <= from) {
                 changes2.push({
-                  from: skipSpaces(Math.max(from, blockStart), state.doc, -1, blockStart),
+                  from: skipSpaces(Math.max(from, blockStart), state2.doc, -1, blockStart),
                   insert: inlineMarkerText(markType)
                 });
               }
@@ -2586,7 +2507,7 @@ var setStyle = (type, enable) => ({ state, dispatch }) => {
               changes2.push(startCovered);
             } else if (startCovered) {
               changes2.push({
-                from: skipSpaces(rangeStart, state.doc, -1, blockStart),
+                from: skipSpaces(rangeStart, state2.doc, -1, blockStart),
                 insert: marker
               });
             }
@@ -2594,7 +2515,7 @@ var setStyle = (type, enable) => ({ state, dispatch }) => {
               changes2.push(endCovered);
             } else if (endCovered) {
               changes2.push({
-                from: skipSpaces(rangeEnd, state.doc, 1, blockEnd),
+                from: skipSpaces(rangeEnd, state2.doc, 1, blockEnd),
                 insert: marker
               });
             }
@@ -2602,7 +2523,7 @@ var setStyle = (type, enable) => ({ state, dispatch }) => {
         }
       }
     });
-    if (blockStart < 0 && range.empty && enable && !/\S/.test(state.doc.lineAt(range.from).text)) {
+    if (blockStart < 0 && range.empty && enable && !/\S/.test(state2.doc.lineAt(range.from).text)) {
       return {
         changes: {
           from: range.head,
@@ -2611,13 +2532,13 @@ var setStyle = (type, enable) => ({ state, dispatch }) => {
         range: EditorSelection.cursor(range.head + marker.length)
       };
     }
-    const changeSet = state.changes(changes2.concat(changesAtEnd));
+    const changeSet = state2.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, {
+  dispatch(state2.update(changes, {
     userEvent: enable ? "format.style.add" : "format.style.remove",
     scrollIntoView: true
   }));
@@ -2691,8 +2612,8 @@ var insertTable = (view) => {
   const { from } = doc.line(number);
   snippets.table(view, null, from, from);
 };
-var removeLinkInner = (from, to, changes, state) => {
-  syntaxTree2(state).iterate({
+var removeLinkInner = (from, to, changes, state2) => {
+  syntaxTree(state2).iterate({
     from,
     to,
     enter: (node) => {
@@ -2706,8 +2627,8 @@ var removeLinkInner = (from, to, changes, state) => {
             });
           } else if (name === "LinkTitle" || name === "URL") {
             changes.push({
-              from: skipSpaces(node2.from, state.doc, -1),
-              to: skipSpaces(node2.to, state.doc, 1)
+              from: skipSpaces(node2.from, state2.doc, -1),
+              to: skipSpaces(node2.to, state2.doc, 1)
             });
           }
         });
@@ -2716,32 +2637,32 @@ var removeLinkInner = (from, to, changes, state) => {
     }
   });
 };
-var removeLink = ({ state, dispatch }) => {
+var removeLink = ({ state: state2, dispatch }) => {
   const changes = [];
-  for (const { from, to } of state.selection.ranges) {
-    removeLinkInner(from, to, changes, state);
+  for (const { from, to } of state2.selection.ranges) {
+    removeLinkInner(from, to, changes, state2);
   }
   if (!changes) {
     return false;
   }
-  dispatch(state.update({
+  dispatch(state2.update({
     changes,
     userEvent: "format.link.remove",
     scrollIntoView: true
   }));
   return true;
 };
-var addLink = ({ state, dispatch }) => {
-  const changes = state.changeByRange((range) => {
+var addLink = ({ url, image: image2 } = {}) => ({ state: state2, dispatch }) => {
+  const changes = state2.changeByRange((range) => {
     let { from, to } = range;
     const cutStyles = [];
     let okay = null;
-    syntaxTree2(state).iterate({
+    syntaxTree(state2).iterate({
       from,
       to,
       enter: (node) => {
         if (Object.hasOwn(Textblocks, node.name)) {
-          okay = Textblocks[node.name] !== "codeblock" && from >= blockContentStart(node) && to <= blockContentEnd(node, state.doc);
+          okay = Textblocks[node.name] !== "codeblock" && from >= blockContentStart(node) && to <= blockContentEnd(node, state2.doc);
         } else if (Object.hasOwn(InlineMarker, node.name)) {
           const sNode = node.node;
           if (node.from < from && node.to <= to) {
@@ -2761,7 +2682,7 @@ var addLink = ({ state, dispatch }) => {
       }
     });
     if (okay === null) {
-      const line = state.doc.lineAt(from);
+      const line = state2.doc.lineAt(from);
       okay = to <= line.to && !/\S/.test(line.text.slice(from - line.from));
     }
     if (!okay) {
@@ -2771,26 +2692,26 @@ var addLink = ({ state, dispatch }) => {
     }
     const changes2 = [];
     const changesAfter = [];
-    removeLinkInner(from, to, changesAfter, state);
+    removeLinkInner(from, to, changesAfter, state2);
     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),
+          from: skipSpaces(from, state2.doc, -1),
           insert: mark2
         });
         changesAfter.push({
-          from: skipSpaces(from, state.doc, 1, to),
+          from: skipSpaces(from, state2.doc, 1, to),
           insert: mark2
         });
       } else {
         changes2.push({
-          from: skipSpaces(to, state.doc, -1, from),
+          from: skipSpaces(to, state2.doc, -1, from),
           insert: mark2
         });
-        const after = skipSpaces(to, state.doc, 1);
+        const after = skipSpaces(to, state2.doc, 1);
         if (after === to) {
           cursorOffset += mark2.length;
         }
@@ -2802,34 +2723,34 @@ var addLink = ({ state, dispatch }) => {
     }
     changes2.push({
       from,
-      insert: "["
+      insert: image2 ? "![" : "["
     }, {
       from: to,
-      insert: "]()"
+      insert: `](${url ?? ""})`
     });
-    const changeSet = state.changes(changes2.concat(changesAfter));
+    const changeSet = state2.changes(changes2.concat(changesAfter));
     return {
       changes: changeSet,
-      range: EditorSelection.cursor(changeSet.mapPos(to, 1) - cursorOffset)
+      range: EditorSelection.cursor(changeSet.mapPos(to, 1) - cursorOffset - (url ? url.length + 2 : 0))
     };
   });
   if (changes.changes.empty) {
     return false;
   }
-  dispatch(state.update(changes, {
+  dispatch(state2.update(changes, {
     userEvent: "format.link.add",
     scrollIntoView: true
   }));
   return true;
 };
-var addList = (type) => ({ state, dispatch }) => {
+var addList = (type) => ({ state: state2, 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({
+  for (const { from, to } of state2.selection.ranges) {
+    syntaxTree(state2).iterate({
       from,
       to,
       enter: (node) => {
@@ -2841,7 +2762,7 @@ var addList = (type) => ({ state, dispatch }) => {
             }
             if (before?.name === (type === 0 ? "OrderedList" : "BulletList")) {
               const item = before.lastChild;
-              const itemLine = state.doc.lineAt(item.from);
+              const itemLine = state2.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) {
@@ -2876,10 +2797,10 @@ var addList = (type) => ({ state, dispatch }) => {
     });
   }
   if (!blocks.length) {
-    const { from, to } = state.doc.lineAt(state.selection.main.anchor);
+    const { from, to } = state2.doc.lineAt(state2.selection.main.anchor);
     if (from === to) {
       const insert = type === 1 ? "- " : type === 0 ? "1. " : "- [ ] ";
-      dispatch(state.update({
+      dispatch(state2.update({
         changes: [
           {
             from,
@@ -2900,11 +2821,11 @@ var addList = (type) => ({ state, dispatch }) => {
   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;
+    let padding = nodeFrom > 0 && !/\s/.test(state2.doc.sliceString(nodeFrom - 1, nodeFrom)) ? 1 : 0;
     if (type === 0) {
       padding += String(counter2).length;
     }
-    let line = state.doc.lineAt(nodeFrom);
+    let line = state2.doc.lineAt(nodeFrom);
     const column = nodeFrom - line.from;
     if (parentColumn2 !== null && parentColumn2 > column) {
       padding = Math.max(padding, parentColumn2 - column);
@@ -2929,7 +2850,7 @@ var addList = (type) => ({ state, dispatch }) => {
       insert: mark2
     });
     while (line.to < node.to) {
-      line = state.doc.lineAt(line.to + 1);
+      line = state2.doc.lineAt(line.to + 1);
       const open = /^[\s>]*/.exec(line.text)[0].length;
       changes.push({
         from: line.from + Math.min(open, column),
@@ -2944,25 +2865,25 @@ var addList = (type) => ({ state, dispatch }) => {
       next = next.nextSibling;
     }
     if (next?.name === "OrderedList") {
-      renumberListItems(next.firstChild, last.counter + 1, changes, state.doc);
+      renumberListItems(next.firstChild, last.counter + 1, changes, state2.doc);
     }
   }
-  const changeSet = state.changes(changes);
-  dispatch(state.update({
+  const changeSet = state2.changes(changes);
+  dispatch(state2.update({
     changes: changeSet,
-    selection: state.selection.map(changeSet, 1),
+    selection: state2.selection.map(changeSet, 1),
     userEvent: "format.list.add",
     scrollIntoView: true
   }));
   return true;
 };
-var removeList = (type) => ({ state, dispatch }) => {
+var removeList = (type) => ({ state: state2, 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({
+  for (const { from, to } of state2.selection.ranges) {
+    syntaxTree(state2).iterate({
       from,
       to,
       enter: (node) => {
@@ -2979,7 +2900,7 @@ var removeList = (type) => ({ state, dispatch }) => {
           stack.pop();
         } else if (name === "ListItem" && stack[stack.length - 1] === targetNodeType && node.from !== lastBlock) {
           lastBlock = node.from;
-          let line = state.doc.lineAt(node.from);
+          let line = state2.doc.lineAt(node.from);
           const mark2 = /^\s*(\d+[.)] |[-*+] (\[[ x]\] )?)/.exec(line.text.slice(node.from - line.from));
           if (!mark2) {
             return false;
@@ -2990,7 +2911,7 @@ var removeList = (type) => ({ state, dispatch }) => {
             to: node.from + mark2[0].length
           });
           while (line.to < node.to) {
-            line = state.doc.lineAt(line.to + 1);
+            line = state2.doc.lineAt(line.to + 1);
             const open = /^[\s>]*/.exec(line.text)[0].length;
             if (open > column) {
               changes.push({
@@ -3000,7 +2921,7 @@ var removeList = (type) => ({ state, dispatch }) => {
             }
           }
           if (node.to >= to) {
-            renumberListItems(node.node.nextSibling, 1, changes, state.doc);
+            renumberListItems(node.node.nextSibling, 1, changes, state2.doc);
           }
           return false;
         }
@@ -3010,7 +2931,7 @@ var removeList = (type) => ({ state, dispatch }) => {
   if (!changes.length) {
     return false;
   }
-  dispatch(state.update({
+  dispatch(state2.update({
     changes,
     userEvent: "format.list.remove",
     scrollIntoView: true
@@ -3018,8 +2939,8 @@ var removeList = (type) => ({ state, dispatch }) => {
   return true;
 };
 var toggleList = (type) => (target) => {
-  const formatting2 = getFormatting(target.state);
-  const active = formatting2.listStyle === (type === 1 ? "bullet" : type === 0 ? "ordered" : "task");
+  const formatting = getFormatting(target.state);
+  const active = formatting.listStyle === (type === 1 ? "bullet" : type === 0 ? "ordered" : "task");
   return (active ? removeList(type) : addList(type))(target);
 };
 var renumberListItems = (item, counter, changes, doc) => {
@@ -3040,12 +2961,12 @@ var renumberListItems = (item, counter, changes, doc) => {
     }
   }
 };
-var setBlockquote = (enable) => ({ state, dispatch }) => {
+var setBlockquote = (enable) => ({ state: state2, dispatch }) => {
   const lines = [];
   let lastBlock = -1;
-  for (const { from, to } of state.selection.ranges) {
+  for (const { from, to } of state2.selection.ranges) {
     const sawBlock = false;
-    syntaxTree2(state).iterate({
+    syntaxTree(state2).iterate({
       from,
       to,
       enter: (node) => {
@@ -3054,9 +2975,9 @@ var setBlockquote = (enable) => ({ state, dispatch }) => {
             return false;
           }
           lastBlock = node.from;
-          let line2 = state.doc.lineAt(node.from);
+          let line2 = state2.doc.lineAt(node.from);
           if (line2.number > 1) {
-            const prevLine = state.doc.line(line2.number - 1);
+            const prevLine = state2.doc.line(line2.number - 1);
             if (/^[>\s]*$/.test(prevLine.text)) {
               if (!enable || lines.length && lines[lines.length - 1].number === prevLine.number - 1) {
                 lines.push(prevLine);
@@ -3068,10 +2989,10 @@ var setBlockquote = (enable) => ({ state, dispatch }) => {
             if (line2.to >= node.to) {
               break;
             }
-            line2 = state.doc.line(line2.number + 1);
+            line2 = state2.doc.line(line2.number + 1);
           }
-          if (!enable && line2.number < state.doc.lines) {
-            const nextLine = state.doc.line(line2.number + 1);
+          if (!enable && line2.number < state2.doc.lines) {
+            const nextLine = state2.doc.line(line2.number + 1);
             if (/^[>\s]*$/.test(nextLine.text)) {
               lines.push(nextLine);
             }
@@ -3081,7 +3002,7 @@ var setBlockquote = (enable) => ({ state, dispatch }) => {
       }
     });
     let line;
-    if (!sawBlock && enable && from === to && !/\S/.test((line = state.doc.lineAt(from)).text)) {
+    if (!sawBlock && enable && from === to && !/\S/.test((line = state2.doc.lineAt(from)).text)) {
       lines.push(line);
     }
   }
@@ -3105,10 +3026,10 @@ var setBlockquote = (enable) => ({ state, dispatch }) => {
   if (!changes.length) {
     return false;
   }
-  const changeSet = state.changes(changes);
-  dispatch(state.update({
+  const changeSet = state2.changes(changes);
+  dispatch(state2.update({
     changes: changeSet,
-    selection: state.selection.map(changeSet, 1),
+    selection: state2.selection.map(changeSet, 1),
     userEvent: enable ? "format.blockquote.add" : "format.blockquote.remove",
     scrollIntoView: true
   }));
@@ -3120,11 +3041,11 @@ var toggleBlockquote = (target) => {
   return (getFormatting(target.state).blockQuote ? removeBlockquote : addBlockquote)(target);
 };
 var addCodeblock = (target) => {
-  const { state, dispatch } = target;
-  const { selection } = state;
+  const { state: state2, dispatch } = target;
+  const { selection } = state2;
   if (selection.ranges.length === 1 && selection.main.empty) {
     const { head } = selection.main;
-    const line = state.doc.lineAt(head);
+    const line = state2.doc.lineAt(head);
     if (!/\S/.test(line.text) && head === line.from) {
       snippets.codeblock(target, null, line.from, line.to);
       return true;
@@ -3134,7 +3055,7 @@ var addCodeblock = (target) => {
   for (const { from, to } of selection.ranges) {
     let blockFrom = from;
     let blockTo = to;
-    syntaxTree2(state).iterate({
+    syntaxTree(state2).iterate({
       from,
       to,
       enter: (node) => {
@@ -3143,8 +3064,8 @@ var addCodeblock = (target) => {
             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);
+            blockFrom = Math.min(blockFrom, state2.doc.lineAt(node.from).from);
+            blockTo = Math.max(blockTo, state2.doc.lineAt(node.to).to);
           }
         }
       }
@@ -3162,7 +3083,7 @@ var addCodeblock = (target) => {
     return false;
   }
   const changes = ranges.map(({ from, to }) => {
-    const column = from - state.doc.lineAt(from).from;
+    const column = from - state2.doc.lineAt(from).from;
     return [
       {
         from,
@@ -3174,30 +3095,30 @@ var addCodeblock = (target) => {
       }
     ];
   });
-  dispatch(state.update({
+  dispatch(state2.update({
     changes,
     userEvent: "format.codeblock.add",
     scrollIntoView: true
   }));
   return true;
 };
-var removeCodeblock = ({ state, dispatch }) => {
+var removeCodeblock = ({ state: state2, dispatch }) => {
   const changes = [];
   let lastBlock = -1;
-  for (const { from, to } of state.selection.ranges) {
-    syntaxTree2(state).iterate({
+  for (const { from, to } of state2.selection.ranges) {
+    syntaxTree(state2).iterate({
       from,
       to,
       enter: (node) => {
         if (Textblocks[node.name] === "codeblock" && lastBlock !== node.from) {
           lastBlock = node.from;
-          const firstLine = state.doc.lineAt(node.from);
+          const firstLine = state2.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);
+            const lastLine = state2.doc.lineAt(node.to);
             if (/^([\s>]|[-*+] |\d+[).])*`+$/.test(lastLine.text)) {
               changes.push({
                 from: lastLine.from - (lastLine.number === firstLine.number + 1 ? 0 : 1),
@@ -3206,7 +3127,7 @@ var removeCodeblock = ({ state, dispatch }) => {
             }
           } else {
             const column = node.from - firstLine.from;
-            for (let line = firstLine; ; line = state.doc.line(line.number + 1)) {
+            for (let line = firstLine; ; line = state2.doc.line(line.number + 1)) {
               changes.push({
                 from: line.from + column - 4,
                 to: line.from + column
@@ -3223,7 +3144,7 @@ var removeCodeblock = ({ state, dispatch }) => {
   if (!changes.length) {
     return false;
   }
-  dispatch(state.update({
+  dispatch(state2.update({
     changes,
     userEvent: "format.codeblock.remove",
     scrollIntoView: true
@@ -3233,7 +3154,7 @@ var removeCodeblock = ({ state, dispatch }) => {
 var toggleCodeblock = (target) => {
   return (getFormatting(target.state).blockType === "codeblock" ? removeCodeblock : addCodeblock)(target);
 };
-var formatting = (options = {}) => {
+var formattingKeymap = (options = {}) => {
   return [
     keymap6.of([
       {
@@ -3282,7 +3203,7 @@ var Textblocks = {
   TableCell: "tablecell",
   Task: "paragraph"
 };
-var getFormatting = (state) => {
+var getFormatting = (state2) => {
   let blockType = null;
   const inline = [
     null,
@@ -3308,7 +3229,7 @@ var getFormatting = (state) => {
         continue;
       } else if (currentBlock.active[i]) {
         inline[i] = true;
-      } else if (/\S/.test(state.doc.sliceString(currentBlock.pos, upto))) {
+      } else if (/\S/.test(state2.doc.sliceString(currentBlock.pos, upto))) {
         inline[i] = false;
       }
     }
@@ -3319,12 +3240,12 @@ var getFormatting = (state) => {
       currentBlock.pos = Math.min(upto, currentBlock.end);
     }
   };
-  const { selection } = state;
+  const { selection } = state2;
   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);
+      const contextBefore = state2.doc.sliceString(range.head - contextSize, range.head);
+      let contextAfter = state2.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)) {
@@ -3343,7 +3264,7 @@ var getFormatting = (state) => {
         }
       }
     }
-    syntaxTree2(state).iterate({
+    syntaxTree(state2).iterate({
       from: range.from,
       to: range.to,
       enter: (node) => {
@@ -3417,7 +3338,7 @@ var getFormatting = (state) => {
       }
     });
   }
-  const { from, to } = state.doc.lineAt(selection.main.anchor);
+  const { from, to } = state2.doc.lineAt(selection.main.anchor);
   const blankLine = from === to;
   return {
     blankLine,
@@ -3431,1030 +3352,1032 @@ var getFormatting = (state) => {
     listStyle: listStyle || null
   };
 };
-var useFormattingState = () => {
-  const [state, setState] = useState(null);
-  const observer = useMemo(() => EditorView13.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/image.ts
-import { syntaxTree as syntaxTree3 } from "@codemirror/language";
-import { StateField as StateField5 } from "@codemirror/state";
-import { Decoration as Decoration6, EditorView as EditorView14, WidgetType as WidgetType4 } from "@codemirror/view";
-var image = (options = {}) => {
-  return StateField5.define({
-    create: (state) => {
-      return Decoration6.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) => EditorView14.decorations.from(field)
-  });
-};
-var preloaded = /* @__PURE__ */ new Set();
-var preloadImage = (url) => {
-  if (!preloaded.has(url)) {
-    const img = document.createElement("img");
-    img.src = url;
-    preloaded.add(url);
-  }
-};
-var buildDecorations2 = (from, to, state) => {
-  const decorations = [];
-  const cursor = state.selection.main.head;
-  syntaxTree3(state).iterate({
-    enter: (node) => {
-      if (node.name === "Image") {
-        const urlNode = node.node.getChild("URL");
-        if (urlNode) {
-          const hide2 = state.readOnly || cursor < node.from || cursor > node.to;
-          const url = state.sliceDoc(urlNode.from, urlNode.to);
-          preloadImage(url);
-          decorations.push(Decoration6.replace({
-            block: true,
-            widget: new ImageWidget(url)
-          }).range(hide2 ? node.from : node.to, node.to));
-        }
-      }
-    },
-    from,
-    to
-  });
-  return decorations;
-};
-var ImageWidget = class extends WidgetType4 {
-  constructor(_url) {
-    super();
-    this._url = _url;
-  }
-  eq(other) {
-    return this._url === other._url;
-  }
-  toDOM(view) {
-    const img = document.createElement("img");
-    img.setAttribute("src", this._url);
-    img.setAttribute("class", "cm-image");
-    img.onload = () => img.classList.add("cm-loaded-image");
-    return img;
-  }
-};
-
-// packages/ui/react-ui-editor/src/extensions/markdown/link.ts
-import { syntaxTree as syntaxTree4 } from "@codemirror/language";
-import { hoverTooltip as hoverTooltip2 } from "@codemirror/view";
-import { tooltipContent } from "@dxos/react-ui-theme";
-var linkTooltip = (render) => hoverTooltip2((view, pos, side) => {
-  const syntax = syntaxTree4(view.state).resolveInner(pos, side);
-  let link = null;
-  for (let i = 0, node = syntax; !link && node && i < 5; node = node.parent, i++) {
-    link = node.name === "Link" ? node : null;
-  }
-  const url = link && link.getChild("URL");
-  if (!url || !link) {
-    return null;
-  }
-  const urlText = view.state.sliceDoc(url.from, url.to);
-  return {
-    pos: link.from,
-    end: link.to,
-    above: true,
-    create: () => {
-      const el = document.createElement("div");
-      el.className = tooltipContent({}, "pli-2 plb-1");
-      render(el, urlText);
-      return {
-        dom: el,
-        offset: {
-          x: 0,
-          y: 4
-        }
-      };
-    }
-  };
-});
-
-// packages/ui/react-ui-editor/src/extensions/markdown/table.ts
-import { syntaxTree as syntaxTree5 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField6 } from "@codemirror/state";
-import { Decoration as Decoration7, EditorView as EditorView15, WidgetType as WidgetType5 } from "@codemirror/view";
-var table = (options = {}) => {
-  return StateField6.define({
-    create: (state) => update(state, options),
-    update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView15.decorations.from(field)
-  });
-};
-var update = (state, options) => {
-  const builder = new RangeSetBuilder3();
-  const cursor = state.selection.main.head;
-  const tables = [];
-  const getTable = () => tables[tables.length - 1];
-  const getRow = () => {
-    const table2 = getTable();
-    return table2.rows?.[table2.rows.length - 1];
-  };
-  syntaxTree5(state).iterate({
-    enter: (node) => {
-      switch (node.name) {
-        case "Table": {
-          tables.push({
-            from: node.from,
-            to: node.to
-          });
-          break;
-        }
-        case "TableHeader": {
-          getTable().header = [];
-          break;
-        }
-        case "TableRow": {
-          (getTable().rows ??= []).push([]);
-          break;
-        }
-        case "TableCell": {
-          const row = getRow();
-          if (row) {
-            row.push(state.sliceDoc(node.from, node.to));
-          } else {
-            getTable().header?.push(state.sliceDoc(node.from, node.to));
-          }
-          break;
+var useFormattingState = () => {
+  const [state2, setState] = useState();
+  const observer = useMemo(() => EditorView11.updateListener.of((update2) => {
+    if (update2.docChanged || update2.selectionSet) {
+      setState((prevState) => {
+        const newState = getFormatting(update2.state);
+        if (!prevState || !formattingEquals(prevState, newState)) {
+          return newState;
         }
-      }
+        return prevState;
+      });
     }
-  });
-  tables.forEach((table2) => {
-    const hide2 = state.readOnly || cursor < table2.from || cursor > table2.to;
-    hide2 && builder.add(table2.from, table2.to, Decoration7.replace({
-      widget: new TableWidget(table2)
-    }));
-    builder.add(table2.from, table2.to, Decoration7.mark({
-      class: "cm-table"
-    }));
-  });
-  return builder.finish();
+  }), [
+    setState
+  ]);
+  return [
+    state2,
+    observer
+  ];
 };
-var TableWidget = class extends WidgetType5 {
-  constructor(_table) {
-    super();
-    this._table = _table;
-  }
-  eq(other) {
-    return this._table.header?.join() === other._table.header?.join() && this._table.rows?.join() === other._table.rows?.join();
+
+// packages/ui/react-ui-editor/src/extensions/markdown/action.ts
+var processAction = (view, action) => {
+  let inlineType, listType;
+  switch (action.type) {
+    case "heading":
+      setHeading(parseInt(action.data))(view);
+      break;
+    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-task":
+      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 "image":
+      addLink({
+        url: action.data,
+        image: true
+      })(view);
+      break;
+    case "comment":
+      createComment(view);
+      break;
   }
-  toDOM(view) {
-    const table2 = document.createElement("table");
-    {
-      const header = table2.appendChild(document.createElement("thead"));
-      const tr = header.appendChild(document.createElement("tr"));
-      this._table.header?.forEach((cell) => {
-        const th = document.createElement("th");
-        th.setAttribute("class", "cm-table-head");
-        tr.appendChild(th).textContent = cell;
-      });
-    }
-    {
-      const body = table2.appendChild(document.createElement("tbody"));
-      this._table.rows?.forEach((row) => {
-        const tr = body.appendChild(document.createElement("tr"));
-        row.forEach((cell) => {
-          const td = document.createElement("td");
-          td.setAttribute("class", "cm-table-cell");
-          tr.appendChild(td).textContent = cell;
-        });
-      });
+  requestAnimationFrame(() => {
+    if (!view.hasFocus) {
+      view.focus();
     }
-    return table2;
-  }
-  ignoreEvent(e) {
-    return !/^mouse/.test(e.type);
-  }
+  });
 };
 
-// packages/ui/react-ui-editor/src/extensions/mention.ts
-import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
-import { log as log6 } from "@dxos/log";
-var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
-var mention = ({ onSearch }) => {
-  return autocompletion2({
-    // TODO(burdon): Not working.
-    activateOnTyping: true,
-    // activateOnTypingDelay: 100,
-    // selectOnOpen: true,
-    closeOnBlur: false,
-    // defaultKeymap: false,
-    icons: false,
-    override: [
-      (context) => {
-        log6.info("completion context", {
-          context
-        }, {
-          F: __dxlog_file7,
-          L: 26,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-        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/bundle.ts
+import { completionKeymap as completionKeymap2 } from "@codemirror/autocomplete";
+import { defaultKeymap as defaultKeymap2, indentWithTab as indentWithTab2 } from "@codemirror/commands";
+import { markdownLanguage as markdownLanguage3, markdown } from "@codemirror/lang-markdown";
+import { defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { languages } from "@codemirror/language-data";
+import { lintKeymap } from "@codemirror/lint";
+import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
+import { keymap as keymap7 } 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 markdownHighlightStyle = (readonly) => {
+  return HighlightStyle.define([
+    {
+      tag: [
+        tags.keyword,
+        tags.name,
+        tags.deleted,
+        tags.character,
+        tags.propertyName,
+        tags.macroName,
+        tags.color,
+        tags.constant(tags.name),
+        tags.standard(tags.name),
+        tags.definition(tags.name),
+        tags.separator,
+        tags.typeName,
+        tags.className,
+        tags.number,
+        tags.changed,
+        tags.annotation,
+        tags.modifier,
+        tags.self,
+        tags.namespace,
+        tags.operator,
+        tags.operatorKeyword,
+        tags.escape,
+        tags.regexp,
+        tags.special(tags.string),
+        tags.meta,
+        tags.comment,
+        tags.atom,
+        tags.bool,
+        tags.special(tags.variableName),
+        tags.processingInstruction,
+        tags.string,
+        tags.inserted,
+        tags.invalid
+      ],
+      color: "inherit !important"
+    },
+    // Markdown marks.
+    {
+      tag: [
+        tags.meta,
+        tags.processingInstruction,
+        markdownTags.LinkLabel,
+        markdownTags.LinkReference,
+        markdownTags.ListMark
+      ],
+      class: mark
+    },
+    // Markdown marks.
+    {
+      tag: [
+        markdownTags.CodeMark,
+        markdownTags.HeaderMark,
+        markdownTags.QuoteMark,
+        markdownTags.EmphasisMark
+      ],
+      class: mark
+    },
+    // E.g., code block language (after ```).
+    {
+      tag: [
+        tags.function(tags.variableName),
+        tags.labelName
+      ],
+      class: codeMark
+    },
+    {
+      tag: [
+        tags.monospace
+      ],
+      class: "font-mono"
+    },
+    // Headings.
+    {
+      tag: tags.heading1,
+      class: heading(1)
+    },
+    {
+      tag: tags.heading2,
+      class: heading(2)
+    },
+    {
+      tag: tags.heading3,
+      class: heading(3)
+    },
+    {
+      tag: tags.heading4,
+      class: heading(4)
+    },
+    {
+      tag: tags.heading5,
+      class: heading(5)
+    },
+    {
+      tag: tags.heading6,
+      class: heading(6)
+    },
+    // Emphasis.
+    {
+      tag: tags.emphasis,
+      class: italic
+    },
+    {
+      tag: tags.strong,
+      class: bold
+    },
+    {
+      tag: tags.strikethrough,
+      class: strikethrough
+    },
+    // Naked URLs.
+    {
+      tag: [
+        markdownTags.URL
+      ],
+      class: inlineUrl
+    },
+    // NOTE: The `markdown` extension configures extensions for `lezer` to parse markdown tokens (incl. below).
+    // 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 unless changed by an extension.
+    {
+      tag: [
+        markdownTags.CodeText,
+        markdownTags.InlineCode
+      ],
+      class: code
+    },
+    {
+      tag: [
+        markdownTags.QuoteMark
+      ],
+      class: blockquote
+    },
+    {
+      tag: [
+        markdownTags.TableCell
+      ],
+      class: "font-mono"
+    }
+  ], {
+    scope: markdownLanguage2,
+    all: {
+      fontFamily: getToken("fontFamily.body", []).join(",")
+    }
   });
 };
 
-// packages/ui/react-ui-editor/src/extensions/modes.ts
-import { Facet as Facet6 } from "@codemirror/state";
-import { keymap as keymap7 } from "@codemirror/view";
-import { vim } from "@replit/codemirror-vim";
-var editorMode = Facet6.define({
-  combine: (modes) => modes[0] ?? {}
-});
-var EditorModes = {
-  default: [],
-  vim: [
-    vim(),
-    editorMode.of({
-      type: "vim",
-      noTabster: true
+// packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
+var createMarkdownExtensions = ({ themeMode } = {}) => {
+  return [
+    // Main extension.
+    // https://github.com/codemirror/lang-markdown
+    // https://codemirror.net/5/mode/markdown/index.html (demo).
+    markdown({
+      // GRM by default (vs strict CommonMark):
+      // Table, TaskList, Strikethrough, and Autolink.
+      // NOTE: This extends the parser; it doesn't affect rendering.
+      // https://github.github.com/gfm
+      // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
+      base: markdownLanguage3,
+      // Languages for syntax highlighting fenced code blocks.
+      codeLanguages: languages,
+      // Parser extensions.
+      extensions: [
+        // GFM provided by default.
+        markdownTagsExtensions
+      ]
     }),
+    // https://github.com/codemirror/theme-one-dark
+    themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
+    // Custom styles.
+    syntaxHighlighting(markdownHighlightStyle()),
     keymap7.of([
-      {
-        key: "Alt-Escape",
-        run: (view) => {
-          view.dispatch({
-            userEvent: "focus.container"
-          });
-          return true;
-        }
-      }
-    ])
-  ]
-};
-
-// 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 keymap8 } from "@codemirror/view";
-var defaultItems = [
-  "hello world!",
-  "this is a test.",
-  "this is [DXOS](https://dxos.org)"
-];
-var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
-  let t;
-  let idx = 0;
-  return [
-    keymap8.of([
-      {
-        // Reset.
-        key: "alt-meta-'",
-        run: (view) => {
-          clearTimeout(t);
-          idx = 0;
-          return true;
-        }
-      },
-      {
-        // Next prompt.
-        // TODO(burdon): Press 1-9 to select prompt?
-        key: "shift-meta-'",
-        run: (view) => {
-          clearTimeout(t);
-          const text = items[idx++];
-          if (idx === items?.length) {
-            idx = 0;
-          }
-          let i = 0;
-          const insert = (d = 0) => {
-            t = setTimeout(() => {
-              const pos = view.state.selection.main.head;
-              view.dispatch({
-                changes: {
-                  from: pos,
-                  insert: text[i++]
-                },
-                selection: {
-                  anchor: pos + 1
-                }
-              });
-              if (i < text.length) {
-                insert(Math.random() * delay * (text[i] === " " ? 2 : 1));
-              }
-            }, d);
-          };
-          insert();
-          return true;
-        }
-      }
+      // https://codemirror.net/docs/ref/#commands.indentWithTab
+      indentWithTab2,
+      // https://codemirror.net/docs/ref/#commands.defaultKeymap
+      ...defaultKeymap2,
+      ...completionKeymap2,
+      ...lintKeymap
     ])
   ];
 };
 
-// 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 invariant2 } from "@dxos/invariant";
-import { log as log7 } from "@dxos/log";
-var __dxlog_file8 = "/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._remoteStates = /* @__PURE__ */ new Map();
-    this.remoteStateChange = new Event2();
-    this._space = params.space;
-    this._channel = params.channel;
-    this._peerId = params.peerId;
-    this._info = params.info;
+// packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
+import { syntaxTree as syntaxTree2 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder2, StateEffect as StateEffect4 } from "@codemirror/state";
+import { EditorView as EditorView12, Decoration as Decoration5, WidgetType as WidgetType3, ViewPlugin as ViewPlugin4 } from "@codemirror/view";
+import { mx as mx2 } from "@dxos/react-ui-theme";
+var HorizontalRuleWidget = class extends WidgetType3 {
+  toDOM() {
+    const el = document.createElement("span");
+    el.className = "cm-hr";
+    return el;
   }
-  open() {
-    this._ctx = new Context2();
-    this._postTask = new DeferredTask(this._ctx, async () => {
-      if (this._localState) {
-        await this._space.postMessage(this._channel, {
-          kind: "post",
-          state: this._localState
-        });
-        await sleep(DEBOUNCE_INTERVAL);
-      }
-    });
-    this._ctx.onDispose(this._space.listen(this._channel, (message) => {
-      switch (message.payload.kind) {
-        case "query": {
-          this._handleQueryMessage();
-          break;
-        }
-        case "post": {
-          this._handlePostMessage(message.payload);
-          break;
-        }
-      }
-    }));
-    void this._space.postMessage(this._channel, {
-      kind: "query"
-    }).catch((err) => {
-      log7.debug("failed to query awareness", {
-        err
-      }, {
-        F: __dxlog_file8,
-        L: 89,
-        S: this,
-        C: (f, a) => f(...a)
-      });
-    });
+};
+var LinkButton = class extends WidgetType3 {
+  constructor(url, render) {
+    super();
+    this.url = url;
+    this.render = render;
   }
-  close() {
-    void this._ctx?.dispose();
-    this._ctx = void 0;
-    this._postTask = void 0;
+  eq(other) {
+    return this.url === other.url;
   }
-  getRemoteStates() {
-    return Array.from(this._remoteStates.values());
+  toDOM(view) {
+    const el = document.createElement("span");
+    this.render(el, this.url);
+    return el;
   }
-  update(position) {
-    invariant2(this._postTask, void 0, {
-      F: __dxlog_file8,
-      L: 104,
-      S: this,
-      A: [
-        "this._postTask",
-        ""
-      ]
-    });
-    this._localState = {
-      peerId: this._peerId,
-      position,
-      info: this._info
-    };
-    this._postTask.schedule();
+};
+var CheckboxWidget = class extends WidgetType3 {
+  constructor(_checked) {
+    super();
+    this._checked = _checked;
   }
-  _handleQueryMessage() {
-    invariant2(this._postTask, void 0, {
-      F: __dxlog_file8,
-      L: 115,
-      S: this,
-      A: [
-        "this._postTask",
-        ""
-      ]
-    });
-    this._postTask.schedule();
+  eq(other) {
+    return this._checked === other._checked;
+  }
+  toDOM(view) {
+    const input = document.createElement("input");
+    input.className = "cm-task-checkbox ch-checkbox ch-focus-ring -mbs-0.5";
+    input.type = "checkbox";
+    input.checked = this._checked;
+    if (view.state.readOnly) {
+      input.setAttribute("disabled", "true");
+    } else {
+      input.onmousedown = (event) => {
+        const pos = view.posAtDOM(input);
+        const text = view.state.sliceDoc(pos, pos + 3);
+        if (text === (this._checked ? "[x]" : "[ ]")) {
+          view.dispatch({
+            changes: {
+              from: pos + 1,
+              to: pos + 2,
+              insert: this._checked ? " " : "x"
+            }
+          });
+          event.preventDefault();
+        }
+      };
+    }
+    return input;
   }
-  _handlePostMessage(message) {
-    invariant2(message.kind === "post", void 0, {
-      F: __dxlog_file8,
-      L: 120,
-      S: this,
-      A: [
-        "message.kind === 'post'",
-        ""
-      ]
-    });
-    this._remoteStates.set(message.state.peerId, message.state);
-    this.remoteStateChange.emit();
+  ignoreEvent() {
+    return false;
   }
 };
-
-// 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 "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-task":
-        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;
-    }
-    setTimeout(() => {
-      if (!view.hasFocus) {
-        view.focus();
-      }
-    });
-  };
-};
-
-// packages/ui/react-ui-editor/src/hooks/useEditorView.ts
-import { useRef, useState as useState2 } from "react";
-var useEditorView = (id) => {
-  const editorRef = useRef(null);
-  const [prev, setPrev] = useState2([
-    null,
-    ""
-  ]);
-  if (prev[0] !== editorRef.current) {
-    setPrev([
-      editorRef.current,
-      id
-    ]);
-  }
-  return [
-    editorRef,
-    prev[1] !== id
-  ];
+var hide = Decoration5.replace({});
+var fencedCodeLine = Decoration5.line({
+  class: mx2("cm-code cm-codeblock-line")
+});
+var fencedCodeLineFirst = Decoration5.line({
+  class: mx2("cm-code cm-codeblock-line", "cm-codeblock-first")
+});
+var fencedCodeLineLast = Decoration5.line({
+  class: mx2("cm-code cm-codeblock-line", "cm-codeblock-last")
+});
+var horizontalRule = Decoration5.replace({
+  widget: new HorizontalRuleWidget()
+});
+var checkedTask = Decoration5.replace({
+  widget: new CheckboxWidget(true)
+});
+var uncheckedTask = Decoration5.replace({
+  widget: new CheckboxWidget(false)
+});
+var editingRange = (state2, range, focus) => {
+  const { readOnly, selection: { main: { head } } } = state2;
+  return focus && !readOnly && head >= range.from && head <= range.to;
 };
-
-// packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
-import { closeBrackets as closeBrackets2 } from "@codemirror/autocomplete";
-import { history as history2 } from "@codemirror/commands";
-import { bracketMatching as bracketMatching2 } from "@codemirror/language";
-import { EditorSelection as EditorSelection2, EditorState as EditorState2 } from "@codemirror/state";
-import { crosshairCursor, drawSelection as drawSelection2, dropCursor as dropCursor2, EditorView as EditorView16, highlightActiveLine, lineNumbers, placeholder as placeholder2, scrollPastEnd } from "@codemirror/view";
-import defaultsDeep2 from "lodash.defaultsdeep";
-import { useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
-import { log as log8 } from "@dxos/log";
-import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
-
-// packages/ui/react-ui-editor/src/themes/default.ts
-import get4 from "lodash.get";
-var defaultTheme = {
-  //
-  // Main layout:
-  // https://codemirror.net/examples/styling
-  //
-  // <div class="cm-editor [cm-focused] [generated classes]">
-  //   <div class="cm-scroller">
-  //     <div class="cm-gutters">
-  //       <div class="cm-gutter [...]">
-  //         <div class="cm-gutterElement">...</div>
-  //       </div>
-  //     </div>
-  //     <div class="cm-content" role="textbox" contenteditable="true">
-  //       <div class="cm-line"></div>
-  //     </div>
-  //     <div class="cm-selectionLayer">
-  //       <div class="cm-selectionBackground"></div>
-  //     </div>
-  //     <div class="cm-cursorLayer">
-  //       <div class="cm-cursor"></div>
-  //     </div>
-  //   </div>
-  // </div>
-  //
-  "&": {},
-  "&.cm-focused": {
-    outline: "none"
-  },
-  // NOTE: See https://codemirror.net/docs/guide (DOM Structure).
-  ".cm-scroller": {
-    // TODO(burdon): Reconcile with docs: https://codemirror.net/docs/guide
-    //  Inside of that is the scroller element. If the editor has its own scrollbar, this one should be styled with overflow: auto. But it doesn't have to—the editor also supports growing to accomodate its content, or growing up to a certain max-height and then scrolling.
-    overflowY: "auto",
-    fontFamily: get4(tokens, "fontFamily.mono", []).join(","),
-    lineHeight: 1.5
-  },
-  ".cm-content": {
-    // TODO(burdon): Is it possible to remove the padding value from CM's default theme?
-    // padding: 'unset',
-    // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
-    fontSize: "16px"
-  },
-  "&light .cm-content": {
-    color: get4(tokens, "extend.semanticColors.base.fg.light", "black"),
-    caretColor: "black"
-  },
-  "&dark .cm-content": {
-    color: get4(tokens, "extend.semanticColors.base.fg.dark", "white"),
-    caretColor: "white"
-  },
-  //
-  // Cursor
-  //
-  "&light .cm-cursor, &light .cm-dropCursor": {
-    borderLeft: "2px solid black"
-  },
-  "&dark .cm-cursor, &dark .cm-dropCursor": {
-    borderLeft: "2px solid white"
-  },
-  "&light .cm-placeholder": {
-    color: get4(tokens, "extend.semanticColors.description.light", "rgba(0,0,0,.2)")
-  },
-  "&dark .cm-placeholder": {
-    color: get4(tokens, "extend.semanticColors.description.dark", "rgba(255,255,255,.2)")
-  },
-  //
-  // line
-  //
-  ".cm-line": {
-    paddingInline: 0
-  },
-  ".cm-activeLine": {
-    background: "transparent"
-  },
-  //
-  // gutter
-  //
-  ".cm-gutterElement": {
-    width: "48px"
-  },
-  //
-  // Selection
-  //
-  "&light .cm-selectionBackground": {
-    background: get4(tokens, "extend.colors.primary.100")
-  },
-  "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: get4(tokens, "extend.colors.primary.200")
-  },
-  "&dark .cm-selectionBackground": {
-    background: get4(tokens, "extend.colors.primary.700")
-  },
-  "&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: get4(tokens, "extend.colors.primary.600")
-  },
-  //
-  // Search
-  //
-  "&light .cm-searchMatch": {
-    backgroundColor: get4(tokens, "extend.colors.yellow.100")
-  },
-  "&dark .cm-searchMatch": {
-    backgroundColor: get4(tokens, "extend.colors.yellow.700")
-  },
-  //
-  // link
-  //
-  ".cm-link": {
-    color: get4(tokens, "extend.colors.primary.500"),
-    textDecorationLine: "underline",
-    textDecorationThickness: "1px",
-    textUnderlineOffset: "2px",
-    borderRadius: ".125rem",
-    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
-  },
-  //
-  // tooltip
-  //
-  ".cm-tooltip": {
-    border: "none",
-    background: "unset"
-  },
-  ".cm-tooltip-below": {},
-  //
-  // autocomplete
-  //
-  ".cm-tooltip-autocomplete": {
-    marginTop: "4px",
-    marginLeft: "-3px"
-  },
-  ".cm-tooltip-autocomplete ul li": {},
-  ".cm-tooltip-autocomplete ul li[aria-selected]": {},
-  ".cm-completionIcon": {
-    display: "none"
-  },
-  ".cm-completionLabel": {
-    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
+var MarksByParent = /* @__PURE__ */ new Set([
+  "CodeMark",
+  "EmphasisMark",
+  "StrikethroughMark",
+  "SubscriptMark",
+  "SuperscriptMark"
+]);
+var buildDecorations = (view, options, focus) => {
+  const deco = new RangeSetBuilder2();
+  const atomicDeco = new RangeSetBuilder2();
+  const { state: state2 } = view;
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree2(state2).iterate({
+      from,
+      to,
+      enter: (node) => {
+        if (node.name === "FencedCode") {
+          const editing = editingRange(state2, node, focus);
+          for (const block of view.viewportLineBlocks) {
+            if (block.to < node.from) {
+              continue;
+            }
+            if (block.from > node.to) {
+              break;
+            }
+            const first = block.from <= node.from;
+            const last = block.to >= node.to && /^(\s>)*```$/.test(state2.doc.sliceString(block.from, block.to));
+            deco.add(block.from, block.from, first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine);
+            if (!editing && (first || last)) {
+              atomicDeco.add(block.from, block.to, hide);
+            }
+          }
+          return false;
+        } else if (node.name === "Link") {
+          const marks = node.node.getChildren("LinkMark");
+          const urlNode = node.node.getChild("URL");
+          const editing = editingRange(state2, node, focus);
+          if (urlNode && marks.length >= 2) {
+            const url = state2.sliceDoc(urlNode.from, urlNode.to);
+            if (!editing) {
+              atomicDeco.add(node.from, marks[0].to, hide);
+            }
+            deco.add(marks[0].to, marks[1].from, Decoration5.mark({
+              tagName: "a",
+              attributes: {
+                class: "cm-link",
+                href: url,
+                rel: "noreferrer",
+                target: "_blank"
+              }
+            }));
+            if (!editing) {
+              atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? Decoration5.replace({
+                widget: new LinkButton(url, options.renderLinkButton)
+              }) : hide);
+            }
+          }
+        } else if (node.name === "HeaderMark") {
+          const parent = node.node.parent;
+          if (/^ATX/.test(parent.name) && !editingRange(state2, state2.doc.lineAt(node.from), focus)) {
+            const next = state2.doc.sliceString(node.to, node.to + 1);
+            atomicDeco.add(node.from, node.to + (next === " " ? 1 : 0), hide);
+          }
+        } else if (node.name === "HorizontalRule") {
+          if (!editingRange(state2, node, focus)) {
+            deco.add(node.from, node.to, horizontalRule);
+          }
+        } else if (node.name === "TaskMarker") {
+          if (!editingRange(state2, node, focus)) {
+            const checked = state2.doc.sliceString(node.from + 1, node.to - 1) === "x";
+            atomicDeco.add(node.from - 2, node.from - 1, Decoration5.mark({
+              class: "cm-task"
+            }));
+            atomicDeco.add(node.from, node.to, checked ? checkedTask : uncheckedTask);
+          }
+        } else if (MarksByParent.has(node.name)) {
+          if (!editingRange(state2, node.node.parent, focus)) {
+            atomicDeco.add(node.from, node.to, hide);
+          }
+        }
+      }
+    });
+  }
+  return {
+    deco: deco.finish(),
+    atomicDeco: atomicDeco.finish()
+  };
+};
+var forceUpdate = StateEffect4.define();
+var decorateMarkdown = (options = {}) => {
+  return [
+    ViewPlugin4.fromClass(class {
+      constructor(view) {
+        ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations(view, options, view.hasFocus));
+      }
+      update(update2) {
+        if (update2.docChanged || update2.viewportChanged || update2.focusChanged || update2.transactions.some((tr) => tr.effects.some((e) => e.is(forceUpdate))) || update2.selectionSet && !options.selectionChangeDelay) {
+          ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations(update2.view, options, update2.view.hasFocus));
+          this.clearUpdate();
+        } else if (update2.selectionSet) {
+          this.scheduleUpdate(update2.view);
+        }
+      }
+      // TODO(burdon): BUG: If the cursor is at the end of a link at the end of a line,
+      //  the cursor will float in space or be in the wrong position after the decoration is applied.
+      scheduleUpdate(view) {
+        this.clearUpdate();
+        this.pendingUpdate = setTimeout(() => {
+          view.dispatch({
+            effects: forceUpdate.of(null)
+          });
+        }, options.selectionChangeDelay);
+      }
+      clearUpdate() {
+        if (this.pendingUpdate) {
+          clearTimeout(this.pendingUpdate);
+          this.pendingUpdate = void 0;
+        }
+      }
+      destroy() {
+        this.clearUpdate();
+      }
+    }, {
+      provide: (plugin) => [
+        EditorView12.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration5.none),
+        EditorView12.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration5.none),
+        EditorView12.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration5.none)
+      ]
+    }),
+    formattingStyles
+  ];
+};
+var formattingStyles = EditorView12.baseTheme({
+  "& .cm-code": {
+    fontFamily: getToken("fontFamily.mono", []).join(",")
   },
-  ".cm-completionMatchedText": {
-    textDecoration: "none"
+  "& .cm-codeblock-line": {
+    paddingInline: "1rem !important"
   },
-  //
-  // table
-  //
-  ".cm-table *": {
-    fontFamily: `${get4(tokens, "fontFamily.mono", []).join(",")} !important`,
-    textDecoration: "none !important"
+  "& .cm-codeblock-end": {
+    display: "inline-block",
+    width: "100%",
+    position: "relative",
+    "&::after": {
+      position: "absolute",
+      inset: 0,
+      content: '""'
+    }
   },
-  ".cm-table-head": {
-    padding: "2px 16px 2px 0px",
-    borderBottom: `1px solid ${get4(tokens, "extend.colors.neutral.500")}`,
-    fontWeight: 100,
-    textAlign: "left",
-    color: get4(tokens, "extend.colors.neutral.500")
+  "& .cm-codeblock-first": {
+    borderTopLeftRadius: ".5rem",
+    borderTopRightRadius: ".5rem"
   },
-  ".cm-table-cell": {
-    padding: "2px 16px 2px 0px"
+  "& .cm-codeblock-last": {
+    borderBottomLeftRadius: ".5rem",
+    borderBottomRightRadius: ".5rem"
   },
-  //
-  // image
-  //
-  ".cm-image": {
-    display: "block",
-    height: "0"
+  "&light .cm-codeblock-line, &light .cm-activeLine.cm-codeblock-line": {
+    background: getToken("extend.semanticColors.input.light"),
+    mixBlendMode: "darken"
   },
-  ".cm-image.cm-loaded-image": {
-    height: "auto",
-    borderTop: "0.5rem solid transparent",
-    borderBottom: "0.5rem solid transparent"
+  "&dark .cm-codeblock-line, &dark .cm-activeLine.cm-codeblock-line": {
+    background: getToken("extend.semanticColors.input.dark"),
+    mixBlendMode: "lighten"
   },
-  //
-  // font size
-  // TODO(thure): This appears to be the best or only way to set selection caret heights,
-  //  but it's far more verbose than it needs to be.
-  //
-  // ...Object.keys(get(tokens, 'extend.fontSize', {})).reduce((acc: Record<string, any>, fontSize) => {
-  //   const height = get(tokens, ['extend', 'fontSize', fontSize, 1, 'lineHeight']);
-  //
-  //   acc[`& .text-${fontSize} + .cm-ySelectionCaret`] = { height };
-  //   acc[`& .text-${fontSize} + .cm-ySelection + .cm-ySelectionCaret`] = { height };
-  //   acc[`& .text-${fontSize} + .cm-widgetBuffer + .cm-ySelectionCaret`] = { height };
-  //   return acc;
-  // }, {}),
-  /**
-  * Panels
-  * TODO(burdon): Needs styling attention (esp. dark mode).
-  * https://github.com/codemirror/search/blob/main/src/search.ts#L745
-  *
-  * Find/replace panel.
-  * <div class="cm-announced">...</div>
-  * <div class="cm-scroller">...</div>
-  * <div class="cm-panels cm-panels-bottom">
-  *   <div class="cm-search cm-panel">
-  *     <input class="cm-textfield" />
-  *     <button class="cm-button">...</button>
-  *     <label><input type="checkbox" />...</label>
-  *   </div>
-  * </div
-  */
-  ".cm-panels": {
-    border: `1px solid ${get4(tokens, "extend.colors.neutral.200")}`
+  "& .cm-hr": {
+    display: "inline-block",
+    width: "100%",
+    height: "0",
+    verticalAlign: "middle",
+    borderTop: `1px solid ${getToken("extend.colors.neutral.200")}`
   },
-  ".cm-panel": {
-    background: get4(tokens, "extend.colors.neutral.50"),
-    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
+  "& .cm-task": {
+    color: getToken("extend.colors.blue.500")
   },
-  ".cm-button": {
-    margin: "4px",
-    fontFamily: get4(tokens, "fontFamily.body", []).join(","),
-    background: get4(tokens, "extend.colors.neutral.100"),
-    backgroundImage: "none",
-    border: "none",
-    "&:hover": {
-      background: get4(tokens, "extend.colors.neutral.200")
+  "& .cm-task-checkbox": {
+    marginLeft: "4px",
+    marginRight: "4px"
+  }
+});
+
+// packages/ui/react-ui-editor/src/extensions/markdown/image.ts
+import { syntaxTree as syntaxTree3 } from "@codemirror/language";
+import { StateField as StateField5 } from "@codemirror/state";
+import { Decoration as Decoration6, EditorView as EditorView13, WidgetType as WidgetType4 } from "@codemirror/view";
+var image = (options = {}) => {
+  return StateField5.define({
+    create: (state2) => {
+      return Decoration6.set(buildDecorations2(0, state2.doc.length, state2));
     },
-    "&:active": {
-      background: get4(tokens, "extend.colors.neutral.300"),
-      backgroundImage: "none"
+    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) => EditorView13.decorations.from(field)
+  });
+};
+var preloaded = /* @__PURE__ */ new Set();
+var preloadImage = (url) => {
+  if (!preloaded.has(url)) {
+    const img = document.createElement("img");
+    img.src = url;
+    preloaded.add(url);
+  }
+};
+var buildDecorations2 = (from, to, state2) => {
+  const decorations = [];
+  const cursor = state2.selection.main.head;
+  syntaxTree3(state2).iterate({
+    enter: (node) => {
+      if (node.name === "Image") {
+        const urlNode = node.node.getChild("URL");
+        if (urlNode) {
+          const hide2 = state2.readOnly || cursor < node.from || cursor > node.to;
+          const url = state2.sliceDoc(urlNode.from, urlNode.to);
+          preloadImage(url);
+          decorations.push(Decoration6.replace({
+            block: true,
+            widget: new ImageWidget(url)
+          }).range(hide2 ? 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;
+  }
+};
+var imageUpload = (options = {}) => {
+};
+
+// packages/ui/react-ui-editor/src/extensions/markdown/link.ts
+import { syntaxTree as syntaxTree4 } from "@codemirror/language";
+import { hoverTooltip as hoverTooltip2 } from "@codemirror/view";
+import { tooltipContent } from "@dxos/react-ui-theme";
+var linkTooltip = (render) => hoverTooltip2((view, pos, side) => {
+  const syntax = syntaxTree4(view.state).resolveInner(pos, side);
+  let link = null;
+  for (let i = 0, node = syntax; !link && node && i < 5; node = node.parent, i++) {
+    link = node.name === "Link" ? node : null;
+  }
+  const url = link && link.getChild("URL");
+  if (!url || !link) {
+    return null;
+  }
+  const urlText = view.state.sliceDoc(url.from, url.to);
+  return {
+    pos: link.from,
+    end: link.to,
+    above: true,
+    create: () => {
+      const el = document.createElement("div");
+      el.className = tooltipContent({}, "pli-2 plb-1");
+      render(el, urlText);
+      return {
+        dom: el,
+        offset: {
+          x: 0,
+          y: 4
+        }
+      };
     }
-  },
-  ".cm-panel input[type=checkbox]": {
-    marginRight: "0.4rem !important"
-  }
+  };
+});
+
+// packages/ui/react-ui-editor/src/extensions/markdown/table.ts
+import { syntaxTree as syntaxTree5 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField6 } from "@codemirror/state";
+import { Decoration as Decoration7, EditorView as EditorView14, WidgetType as WidgetType5 } from "@codemirror/view";
+var table = (options = {}) => {
+  return StateField6.define({
+    create: (state2) => update(state2, options),
+    update: (_, tr) => update(tr.state, options),
+    provide: (field) => EditorView14.decorations.from(field)
+  });
 };
-var textTheme = {
-  ".cm-scroller": {
-    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
-  },
-  ".cm-placeholder": {
-    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
-  }
+var update = (state2, options) => {
+  const builder = new RangeSetBuilder3();
+  const cursor = state2.selection.main.head;
+  const tables = [];
+  const getTable = () => tables[tables.length - 1];
+  const getRow = () => {
+    const table2 = getTable();
+    return table2.rows?.[table2.rows.length - 1];
+  };
+  syntaxTree5(state2).iterate({
+    enter: (node) => {
+      switch (node.name) {
+        case "Table": {
+          tables.push({
+            from: node.from,
+            to: node.to
+          });
+          break;
+        }
+        case "TableHeader": {
+          getTable().header = [];
+          break;
+        }
+        case "TableRow": {
+          (getTable().rows ??= []).push([]);
+          break;
+        }
+        case "TableCell": {
+          const row = getRow();
+          if (row) {
+            row.push(state2.sliceDoc(node.from, node.to));
+          } else {
+            getTable().header?.push(state2.sliceDoc(node.from, node.to));
+          }
+          break;
+        }
+      }
+    }
+  });
+  tables.forEach((table2) => {
+    const hide2 = state2.readOnly || cursor < table2.from || cursor > table2.to;
+    if (hide2) {
+      builder.add(table2.from, table2.to, Decoration7.replace({
+        widget: new TableWidget(table2)
+      }));
+    }
+    builder.add(table2.from, table2.to, Decoration7.mark({
+      class: "cm-table"
+    }));
+  });
+  return builder.finish();
 };
-var markdownTheme = {
-  ".cm-scroller": {
-    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
-  },
-  ".cm-placeholder": {
-    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
+var TableWidget = class extends WidgetType5 {
+  constructor(_table) {
+    super();
+    this._table = _table;
   }
-};
-var codeTheme = {
-  ".cm-scroller": {
-    fontFamily: get4(tokens, "fontFamily.mono", []).join(",")
-  },
-  ".cm-placeholder": {
-    fontFamily: get4(tokens, "fontFamily.mono", []).join(",")
+  eq(other) {
+    return this._table.header?.join() === other._table.header?.join() && this._table.rows?.join() === other._table.rows?.join();
   }
-};
-
-// packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
-var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
-var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions } = {}, deps = []) => {
-  const onUpdate = useRef2();
-  const [view, setView] = useState3();
-  const parentRef = useRef2(null);
-  useEffect2(() => {
-    let view2;
-    if (parentRef.current) {
-      const state = EditorState2.create({
-        doc,
-        selection,
-        extensions: [
-          // TODO(burdon): Doesn't catch errors in keymap functions.
-          EditorView16.exceptionSink.of((err) => {
-            log8.catch(err, void 0, {
-              F: __dxlog_file9,
-              L: 70,
-              S: void 0,
-              C: (f, a) => f(...a)
-            });
-          }),
-          extensions,
-          EditorView16.updateListener.of(() => {
-            onUpdate.current?.();
-          })
-        ].filter(isNotFalsy3)
+  toDOM(view) {
+    const table2 = document.createElement("table");
+    {
+      const header = table2.appendChild(document.createElement("thead"));
+      const tr = header.appendChild(document.createElement("tr"));
+      this._table.header?.forEach((cell) => {
+        const th = document.createElement("th");
+        th.setAttribute("class", "cm-table-head");
+        tr.appendChild(th).textContent = cell;
       });
-      view2 = new EditorView16({
-        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);
-        }
+    }
+    {
+      const body = table2.appendChild(document.createElement("tbody"));
+      this._table.rows?.forEach((row) => {
+        const tr = body.appendChild(document.createElement("tr"));
+        row.forEach((cell) => {
+          const td = document.createElement("td");
+          td.setAttribute("class", "cm-table-cell");
+          tr.appendChild(td).textContent = cell;
+        });
       });
-      setView(view2);
     }
-    return () => {
-      view2?.destroy();
-    };
-  }, deps);
-  useEffect2(() => {
-    if (view) {
-      if (!selection && !view.state.selection.main.anchor) {
-        selection = EditorSelection2.single(view.state.doc.line(1).to);
+    return table2;
+  }
+  ignoreEvent(e) {
+    return !/^mouse/.test(e.type);
+  }
+};
+
+// packages/ui/react-ui-editor/src/extensions/mention.ts
+import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
+import { log as log6 } from "@dxos/log";
+var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
+var mention = ({ onSearch }) => {
+  return autocompletion2({
+    // TODO(burdon): Not working.
+    activateOnTyping: true,
+    // activateOnTypingDelay: 100,
+    // selectOnOpen: true,
+    closeOnBlur: false,
+    // defaultKeymap: false,
+    icons: false,
+    override: [
+      (context) => {
+        log6.info("completion context", {
+          context
+        }, {
+          F: __dxlog_file8,
+          L: 26,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        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}`
+          }))
+        };
       }
-      if (selection || scrollTo) {
-        onUpdate.current = () => {
-          onUpdate.current = void 0;
+    ]
+  });
+};
+
+// packages/ui/react-ui-editor/src/extensions/modes.ts
+import { Facet as Facet6 } from "@codemirror/state";
+import { keymap as keymap8 } from "@codemirror/view";
+import { vim } from "@replit/codemirror-vim";
+import { vscodeKeymap } from "@replit/codemirror-vscode-keymap";
+var focusEvent = "focus.container";
+var editorMode = Facet6.define({
+  combine: (modes) => modes[0] ?? {}
+});
+var EditorModes = {
+  default: [],
+  vscode: [
+    // https://github.com/replit/codemirror-vscode-keymap
+    editorMode.of({
+      type: "vscode"
+    }),
+    keymap8.of(vscodeKeymap)
+  ],
+  vim: [
+    // https://github.com/replit/codemirror-vim
+    vim(),
+    editorMode.of({
+      type: "vim",
+      noTabster: true
+    }),
+    keymap8.of([
+      {
+        key: "Alt-Escape",
+        run: (view) => {
           view.dispatch({
-            selection,
-            effects: scrollTo && [
-              scrollTo
-            ],
-            scrollIntoView: !scrollTo
+            userEvent: focusEvent
           });
-        };
-      }
-      if (autoFocus) {
-        view.focus();
+          return true;
+        }
       }
-    }
-  }, [
-    view,
-    autoFocus,
-    selection,
-    scrollTo
-  ]);
-  return {
-    parentRef,
-    view
-  };
-};
-var defaults = {
-  bracketMatching: true,
-  closeBrackets: true,
-  drawSelection: true,
-  editable: true,
-  history: true,
-  lineWrapping: true
+    ])
+  ]
 };
-var createBasicExtensions = (_props) => {
-  const props = defaultsDeep2({}, _props, defaults);
-  return [
-    // TODO(burdon): Doesn't catch errors in keymap functions.
-    EditorView16.exceptionSink.of((err) => {
-      log8.catch(err, void 0, {
-        F: __dxlog_file9,
-        L: 167,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-    }),
-    props.allowMultipleSelections && EditorState2.allowMultipleSelections.of(true),
-    props.bracketMatching && bracketMatching2(),
-    props.closeBrackets && closeBrackets2(),
-    props.crosshairCursor && crosshairCursor(),
-    props.dropCursor && dropCursor2(),
-    props.drawSelection && drawSelection2(),
-    props.highlightActiveLine && highlightActiveLine(),
-    props.history && history2(),
-    props.lineNumbers && lineNumbers(),
-    props.lineWrapping && EditorView16.lineWrapping,
-    props.placeholder && placeholder2(props.placeholder),
-    props.readonly && [
-      EditorState2.readOnly.of(true),
-      EditorView16.editable.of(false)
-    ],
-    props.scrollPastEnd && scrollPastEnd(),
-    props.tabSize && EditorState2.tabSize.of(props.tabSize)
-  ].filter(isNotFalsy3);
+
+// packages/ui/react-ui-editor/src/extensions/state.ts
+import { Transaction } from "@codemirror/state";
+import { EditorView as EditorView15, keymap as keymap9 } from "@codemirror/view";
+import { debounce as debounce2 } from "@dxos/async";
+import { invariant as invariant4 } from "@dxos/invariant";
+import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
+var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/state.ts";
+var scrollAnnotation = "dxos.org/cm/scrolling";
+var keyPrefix = "dxos.org/react-ui-editor/state";
+var localStorageStateStoreAdapter = {
+  setState: (id, state2) => {
+    invariant4(id, void 0, {
+      F: __dxlog_file9,
+      L: 35,
+      S: void 0,
+      A: [
+        "id",
+        ""
+      ]
+    });
+    localStorage.setItem(`${keyPrefix}/${id}`, JSON.stringify(state2));
+  },
+  getState: (id) => {
+    invariant4(id, void 0, {
+      F: __dxlog_file9,
+      L: 39,
+      S: void 0,
+      A: [
+        "id",
+        ""
+      ]
+    });
+    const state2 = localStorage.getItem(`${keyPrefix}/${id}`);
+    return state2 ? JSON.parse(state2) : void 0;
+  }
 };
-var createThemeExtensions = ({ theme, themeMode, slots } = {}) => {
+var state = ({ getState, setState } = {}) => {
+  const setStateDebounced = debounce2(setState, 1e3);
   return [
-    EditorView16.baseTheme(defaultTheme),
-    EditorView16.darkTheme.of(themeMode === "dark"),
-    theme && EditorView16.theme(theme),
-    slots?.editor?.className && EditorView16.editorAttributes.of({
-      class: slots.editor.className
+    // TODO(burdon): Track scrolling (currently only updates when cursor moves).
+    EditorView15.updateListener.of(({ view, changes, transactions }) => {
+      const id = view.state.facet(documentId2);
+      if (!id || transactions.some((tr) => tr.isUserEvent(scrollAnnotation))) {
+        return;
+      }
+      if (setState) {
+        const { top } = view.dom.getBoundingClientRect();
+        const pos = view.posAtCoords({
+          x: 0,
+          y: top
+        });
+        if (pos !== null) {
+          const { anchor, head } = view.state.selection.main;
+          setStateDebounced(id, {
+            scrollTo: {
+              from: pos,
+              yMargin: 0
+            },
+            selection: {
+              anchor,
+              head
+            }
+          });
+        }
+      }
     }),
-    slots?.content?.className && EditorView16.contentAttributes.of({
-      class: slots.content.className
-    })
+    getState && keymap9.of([
+      {
+        key: "ctrl-r",
+        run: (view) => {
+          const state2 = getState(view.state.facet(documentId2));
+          if (state2) {
+            view.dispatch({
+              effects: EditorView15.scrollIntoView(state2.scrollTo.from, {
+                yMargin: 0
+              }),
+              selection: state2.selection,
+              annotations: Transaction.userEvent.of(scrollAnnotation)
+            });
+          }
+          return true;
+        }
+      }
+    ])
   ].filter(isNotFalsy3);
 };
 
-// packages/ui/react-ui-editor/src/hooks/useTextModel.ts
-import get5 from "lodash.get";
-import { useState as useState4, useMemo as useMemo2 } 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";
-import { hueTokens } from "@dxos/react-ui-theme";
-import { hexToHue } from "@dxos/util";
-var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextModel.ts";
-var useTextExtensions = ({ id, text, space, identity }) => {
-  const extensions = [
-    automerge(text)
-  ];
-  const peerId = identity?.identityKey.toHex();
-  const { cursorLightValue, cursorDarkValue } = hueTokens[identity?.profile?.data?.hue ?? hexToHue(peerId ?? "0")];
-  if (space && identity) {
-    const awarenessProvider2 = new SpaceAwarenessProvider({
-      space,
-      channel: `awareness.${id}`,
-      peerId: identity.identityKey.toHex(),
-      info: {
-        displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
-        color: cursorDarkValue,
-        lightColor: cursorLightValue
+// packages/ui/react-ui-editor/src/extensions/typewriter.ts
+import { keymap as keymap10 } from "@codemirror/view";
+var defaultItems = [
+  "hello world!",
+  "this is a test.",
+  "this is [DXOS](https://dxos.org)"
+];
+var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
+  let t;
+  let idx = 0;
+  return [
+    keymap10.of([
+      {
+        // Reset.
+        key: "alt-meta-'",
+        run: (view) => {
+          clearTimeout(t);
+          idx = 0;
+          return true;
+        }
+      },
+      {
+        // Next prompt.
+        // TODO(burdon): Press 1-9 to select prompt?
+        key: "shift-meta-'",
+        run: (view) => {
+          clearTimeout(t);
+          const text = items[idx++];
+          if (idx === items?.length) {
+            idx = 0;
+          }
+          let i = 0;
+          const insert = (d = 0) => {
+            t = setTimeout(() => {
+              const pos = view.state.selection.main.head;
+              view.dispatch({
+                changes: {
+                  from: pos,
+                  insert: text[i++]
+                },
+                selection: {
+                  anchor: pos + 1
+                }
+              });
+              if (i < text.length) {
+                insert(Math.random() * delay * (text[i] === " " ? 2 : 1));
+              }
+            }, d);
+          };
+          insert();
+          return true;
+        }
       }
-    });
-    extensions.push(awareness(awarenessProvider2));
-  }
-  return extensions;
-};
-var useTextModel = (props) => useMemo2(() => createModel(props), Object.values(props));
-var useInMemoryTextModel = ({ id, defaultContent }) => {
-  const [content, setContent] = useState4(defaultContent ?? "");
-  return {
-    id,
-    content,
-    text: () => content,
-    setContent
-  };
-};
-var createModel = ({ space, identity, text }) => {
-  if (!text) {
-    return void 0;
-  }
-  invariant3(isAutomergeObject(text), void 0, {
-    F: __dxlog_file10,
-    L: 89,
-    S: void 0,
-    A: [
-      "isAutomergeObject(text)",
-      ""
-    ]
-  });
-  const obj = text;
-  const doc = getRawDoc(obj, [
-    obj.field
-  ]);
-  const peerId = identity?.identityKey.toHex();
-  const { cursorLightValue, cursorDarkValue } = hueTokens[identity?.profile?.data?.hue ?? hexToHue(peerId ?? "0")];
-  const awarenessProvider2 = space && new SpaceAwarenessProvider({
-    space,
-    channel: `automerge.awareness.${obj.id}`,
-    info: {
-      displayName: identity ? identity.profile?.displayName ?? generateName(identity.identityKey.toHex()) : void 0,
-      color: cursorLightValue,
-      lightColor: cursorDarkValue
-    },
-    peerId: identity?.identityKey.toHex() ?? "Anonymous"
-  });
-  const extensions = [
-    automerge({
-      handle: doc.handle,
-      path: doc.path
-    })
+    ])
   ];
-  if (awarenessProvider2) {
-    extensions.push(awareness(awarenessProvider2));
-  }
-  return {
-    id: obj.id,
-    content: doc,
-    text: () => get5(doc.handle.docSync(), doc.path),
-    extension: extensions
-  };
 };
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
-var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx";
-var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, scrollTo = EditorView17.scrollIntoView(0), moveToEndOfLine, selection, theme, slots = defaultSlots, extensions = [], scrollPastEnd: _scrollPastEnd, debug }, forwardedRef) => {
+var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx";
+var instanceCount = 0;
+var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, className, autoFocus, scrollTo = EditorView16.scrollIntoView(0, {
+  yMargin: 0
+}), moveToEndOfLine, debug, dataTestId }, forwardedRef) => {
+  const [instanceId] = useState2(() => `text-editor-${++instanceCount}`);
   const tabsterDOMAttribute = useFocusableGroup({
     tabBehavior: "limited"
   });
-  const { themeMode } = useThemeContext();
-  const rootRef = useRef3(null);
-  const [view, setView] = useState5(null);
+  const rootRef = useRef(null);
+  const [view, setView] = useState2(null);
   useImperativeHandle(forwardedRef, () => view, [
     view
   ]);
-  useEffect3(() => {
+  useEffect2(() => {
     if (autoFocus) {
       view?.focus();
     }
@@ -4462,56 +4385,43 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
     view,
     autoFocus
   ]);
-  useEffect3(() => {
-    if (!model || !rootRef.current) {
-      return;
-    }
-    const state = EditorState3.create({
-      doc: typeof model.content === "string" ? model.content : DocAccessor.getValue(model.content),
+  useEffect2(() => {
+    log7("create", {
+      id,
+      instanceId
+    }, {
+      F: __dxlog_file10,
+      L: 88,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+    const state2 = EditorState2.create({
+      doc,
       selection,
       extensions: [
-        // TODO(burdon): Doesn't catch errors in keymap functions.
-        EditorView17.exceptionSink.of((err) => {
-          log9.catch(err, void 0, {
-            F: __dxlog_file11,
-            L: 123,
+        id && documentId2.of(id),
+        // TODO(burdon): NOTE: Doesn't catch errors in keymap functions.
+        EditorView16.exceptionSink.of((err) => {
+          log7.catch(err, void 0, {
+            F: __dxlog_file10,
+            L: 101,
             S: void 0,
             C: (f, a) => f(...a)
           });
         }),
-        // Theme.
-        // TODO(burdon): Make base theme configurable.
-        EditorView17.baseTheme(defaultTheme),
-        theme && EditorView17.theme(theme),
-        EditorView17.darkTheme.of(themeMode === "dark"),
-        slots.editor?.className && EditorView17.editorAttributes.of({
-          class: slots.editor.className
-        }),
-        slots.content?.className && EditorView17.contentAttributes.of({
-          class: slots.content.className
-        }),
-        // NOTE: Assumes default line height.
-        _scrollPastEnd && scrollPastEnd2(),
         // Focus.
-        EditorView17.updateListener.of((update2) => {
+        EditorView16.updateListener.of((update2) => {
           update2.transactions.forEach((transaction) => {
-            if (transaction.isUserEvent("focus.container")) {
+            if (transaction.isUserEvent(focusEvent)) {
               rootRef.current?.focus();
             }
           });
         }),
-        // State.
-        EditorView17.editable.of(!readonly),
-        EditorState3.readOnly.of(!!readonly),
-        // Storage and replication.
-        // NOTE: This must come before user extensions.
-        model.extension,
-        // Custom.
-        ...extensions
+        extensions
       ].filter(isNotFalsy4)
     });
-    const view2 = new EditorView17({
-      state,
+    const view2 = new EditorView16({
+      state: state2,
       parent: rootRef.current,
       scrollTo,
       // NOTE: Uncomment to debug/monitor all transactions.
@@ -4523,28 +4433,34 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
         view3.update(trs);
       }
     });
-    setView(view2);
-    if (moveToEndOfLine) {
+    if (moveToEndOfLine && !(scrollTo || selection)) {
       const { to } = view2.state.doc.lineAt(0);
-      view2?.dispatch({
+      view2.dispatch({
         selection: {
           anchor: to
         }
       });
     }
-    if (state.facet(editorMode).noTabster) {
-      rootRef.current.removeAttribute("data-tabster");
+    if (state2.facet(editorMode).noTabster) {
+      rootRef.current?.removeAttribute("data-tabster");
     }
+    setView(view2);
     return () => {
+      log7("destroy", {
+        id,
+        instanceId
+      }, {
+        F: __dxlog_file10,
+        L: 150,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
       view2?.destroy();
-      setView(null);
     };
   }, [
-    rootRef,
-    extensions,
-    model,
-    readonly,
-    themeMode
+    doc,
+    selection,
+    extensions
   ]);
   const handleKeyUp = useCallback((event) => {
     const { key } = event;
@@ -4560,82 +4476,19 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
   return /* @__PURE__ */ React.createElement("div", {
     role: "none",
     ref: rootRef,
-    key: model.id,
     tabIndex: 0,
-    onKeyUp: handleKeyUp,
-    ...slots.root,
-    ...tabsterDOMAttribute
-  });
-});
-var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, lineWrapping = true, theme = textTheme, slots, extensions: _extensions, ...props }, forwardedRef) => {
-  const { themeMode } = useThemeContext();
-  const updatedSlots = defaultsDeep3({}, slots, defaultTextSlots);
-  const extensions = useMemo3(() => [
-    createBasicExtensions({
-      lineWrapping,
-      placeholder: placeholder3
-    }),
-    createThemeExtensions({
-      themeMode
-    }),
-    ..._extensions ?? []
-  ], [
-    themeMode,
-    placeholder3,
-    lineWrapping,
-    _extensions
-  ]);
-  return /* @__PURE__ */ React.createElement(BaseTextEditor, {
-    ref: forwardedRef,
-    readonly,
-    extensions,
-    theme,
-    slots: updatedSlots,
-    ...props
-  });
-});
-var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, theme = markdownTheme, slots, extensions: _extensions, ...props }, forwardedRef) => {
-  const { themeMode } = useThemeContext();
-  const updatedSlots = defaultsDeep3({}, slots, defaultMarkdownSlots);
-  const extensions = useMemo3(() => [
-    createMarkdownExtensions({
-      themeMode,
-      placeholder: placeholder3
-    }),
-    ..._extensions ?? []
-  ], [
-    themeMode,
-    placeholder3,
-    _extensions
-  ]);
-  return /* @__PURE__ */ React.createElement(BaseTextEditor, {
-    ref: forwardedRef,
-    readonly,
-    extensions,
-    theme,
-    slots: updatedSlots,
-    ...props
+    className,
+    "data-testid": dataTestId,
+    ...tabsterDOMAttribute,
+    onKeyUp: handleKeyUp
   });
 });
-var defaultSlots = {
-  root: {
-    className: focusRing
-  },
-  editor: {
-    className: "bs-full"
-  }
-};
-var defaultTextSlots = {
-  ...defaultSlots
-};
-var defaultMarkdownSlots = {
-  ...defaultSlots
-};
 
 // packages/ui/react-ui-editor/src/components/Toolbar/Toolbar.tsx
-import { ChatText, Code, CodeBlock, Link, ListBullets, ListChecks, ListNumbers, Paragraph, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic, Quotes } from "@phosphor-icons/react";
+import { ChatText, Code, CodeBlock, Image, Link, ListBullets, ListChecks, ListNumbers, Paragraph, Quotes, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic } from "@phosphor-icons/react";
 import { createContext } from "@radix-ui/react-context";
-import React2, { useRef as useRef4, useState as useState6 } from "react";
+import React2, { useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+import { useDropzone } from "react-dropzone";
 import { DensityProvider, ElevationProvider, Select, Toolbar as NaturalToolbar, Tooltip, useTranslation } from "@dxos/react-ui";
 import { getSize } from "@dxos/react-ui-theme";
 var tooltipProps = {
@@ -4652,10 +4505,10 @@ var HeadingIcons = {
   "6": TextHSix
 };
 var [ToolbarContextProvider, useToolbarContext] = createContext("Toolbar");
-var ToolbarRoot = ({ children, onAction, classNames, state }) => {
+var ToolbarRoot = ({ children, onAction, classNames, state: state2 }) => {
   return /* @__PURE__ */ React2.createElement(ToolbarContextProvider, {
     onAction,
-    state
+    state: state2
   }, /* @__PURE__ */ React2.createElement(DensityProvider, {
     density: "fine"
   }, /* @__PURE__ */ React2.createElement(ElevationProvider, {
@@ -4669,7 +4522,7 @@ var ToolbarRoot = ({ children, onAction, classNames, state }) => {
 };
 var buttonStyles = "min-bs-0 p-2";
 var iconStyles = getSize(5);
-var ToolbarButton = ({ Icon, children, ...props }) => {
+var ToolbarToggleButton = ({ Icon, children, ...props }) => {
   return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroupItem, {
@@ -4682,20 +4535,33 @@ var ToolbarButton = ({ Icon, children, ...props }) => {
     className: "sr-only"
   }, children))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
 };
+var ToolbarButton = ({ Icon, children, ...props }) => {
+  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
+    variant: "ghost",
+    ...props,
+    classNames: buttonStyles
+  }, /* @__PURE__ */ React2.createElement(Icon, {
+    className: iconStyles
+  }), /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, children))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
+};
 var ToolbarSeparator = () => /* @__PURE__ */ React2.createElement("div", {
   role: "separator",
   className: "grow"
 });
 var MarkdownHeading = () => {
   const { t } = useTranslation(translationKey);
-  const { onAction, state } = useToolbarContext("MarkdownFormatting");
-  const blockType = state ? state.blockType : "paragraph";
+  const { onAction, state: state2 } = useToolbarContext("MarkdownFormatting");
+  const blockType = state2 ? state2.blockType : "paragraph";
   const header = blockType && /heading(\d)/.exec(blockType);
   const value = header ? header[1] : blockType === "paragraph" || !blockType ? "0" : void 0;
   const HeadingIcon = HeadingIcons[value ?? "0"];
-  const suppressNextTooltip = useRef4(false);
-  const [tooltipOpen, setTooltipOpen] = useState6(false);
-  const [selectOpen, setSelectOpen] = useState6(false);
+  const suppressNextTooltip = useRef2(false);
+  const [tooltipOpen, setTooltipOpen] = useState3(false);
+  const [selectOpen, setSelectOpen] = useState3(false);
   return /* @__PURE__ */ React2.createElement(Tooltip.Root, {
     open: tooltipOpen,
     onOpenChange: (nextOpen) => {
@@ -4763,43 +4629,43 @@ var markdownStyles = [
   {
     type: "strong",
     Icon: TextB,
-    getState: (state) => state.strong
+    getState: (state2) => state2.strong
   },
   {
     type: "emphasis",
     Icon: TextItalic,
-    getState: (state) => state.emphasis
+    getState: (state2) => state2.emphasis
   },
   {
     type: "strikethrough",
     Icon: TextStrikethrough,
-    getState: (state) => state.strikethrough
+    getState: (state2) => state2.strikethrough
   },
   {
     type: "code",
     Icon: Code,
-    getState: (state) => state.code
+    getState: (state2) => state2.code
   },
   {
     type: "link",
     Icon: Link,
-    getState: (state) => state.link
+    getState: (state2) => state2.link
   }
 ];
 var MarkdownStyles = () => {
-  const { onAction, state } = useToolbarContext("MarkdownStyles");
+  const { onAction, state: state2 } = useToolbarContext("MarkdownStyles");
   const { t } = useTranslation(translationKey);
   return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
     type: "multiple",
-    value: markdownStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)
-  }, markdownStyles.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+    value: markdownStyles.filter(({ getState }) => state2 && getState(state2)).map(({ type }) => type)
+  }, markdownStyles.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarToggleButton, {
     key: type,
     value: type,
     Icon,
-    disabled: state?.blockType === "codeblock",
-    onClick: state ? () => onAction?.({
+    disabled: state2?.blockType === "codeblock",
+    onClick: state2 ? () => onAction?.({
       type,
-      data: !getState(state)
+      data: !getState(state2)
     }) : void 0
   }, t(`${type} label`))));
 };
@@ -4807,32 +4673,32 @@ var markdownLists = [
   {
     type: "list-bullet",
     Icon: ListBullets,
-    getState: (state) => state.listStyle === "bullet"
+    getState: (state2) => state2.listStyle === "bullet"
   },
   {
     type: "list-ordered",
     Icon: ListNumbers,
-    getState: (state) => state.listStyle === "ordered"
+    getState: (state2) => state2.listStyle === "ordered"
   },
   {
     type: "list-task",
     Icon: ListChecks,
-    getState: (state) => state.listStyle === "task"
+    getState: (state2) => state2.listStyle === "task"
   }
 ];
 var MarkdownLists = () => {
-  const { onAction, state } = useToolbarContext("MarkdownStyles");
+  const { onAction, state: state2 } = useToolbarContext("MarkdownStyles");
   const { t } = useTranslation(translationKey);
   return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
     type: "single",
-    value: state?.listStyle ? `list-${state.listStyle}` : ""
-  }, markdownLists.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+    value: state2?.listStyle ? `list-${state2.listStyle}` : ""
+  }, markdownLists.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarToggleButton, {
     key: type,
     value: type,
     Icon,
-    onClick: state ? () => onAction?.({
+    onClick: state2 ? () => onAction?.({
       type,
-      data: !getState(state)
+      data: !getState(state2)
     }) : void 0
   }, t(`${type} label`))));
 };
@@ -4840,72 +4706,229 @@ var markdownBlocks = [
   {
     type: "blockquote",
     Icon: Quotes,
-    getState: (state) => state.blockQuote
+    getState: (state2) => state2.blockQuote
   },
   {
     type: "codeblock",
     Icon: CodeBlock,
-    getState: (state) => state.blockType === "codeblock"
+    getState: (state2) => state2.blockType === "codeblock"
   },
   {
     type: "table",
     Icon: Table2,
-    getState: (state) => state.blockType === "tablecell",
-    disabled: (state) => !state.blankLine
+    getState: (state2) => state2.blockType === "tablecell",
+    disabled: (state2) => !state2.blankLine
   }
 ];
 var MarkdownBlocks = () => {
-  const { onAction, state } = useToolbarContext("MarkdownStyles");
+  const { onAction, state: state2 } = useToolbarContext("MarkdownStyles");
   const { t } = useTranslation(translationKey);
-  const value = markdownBlocks.find(({ getState }) => state && getState(state));
+  const value = markdownBlocks.find(({ getState }) => state2 && getState(state2));
   return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
     type: "single",
     value: value?.type ?? ""
-  }, markdownBlocks.map(({ type, disabled, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  }, markdownBlocks.map(({ type, disabled, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarToggleButton, {
     key: type,
     value: type,
     Icon,
-    disabled: !state || disabled?.(state),
-    onClick: state ? () => onAction?.({
+    disabled: !state2 || disabled?.(state2),
+    onClick: state2 ? () => onAction?.({
       type,
-      data: !getState(state)
+      data: !getState(state2)
     }) : void 0
   }, t(`${type} label`))));
 };
 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));
-var MarkdownExtended = () => {
+var MarkdownCustom = ({ onUpload } = {}) => {
   const { onAction } = useToolbarContext("MarkdownStyles");
   const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
-    variant: "ghost",
+  const { acceptedFiles, getInputProps, open } = useDropzone({
+    multiple: false,
+    noDrag: true,
+    accept: {
+      "image/*": [
+        ".jpg",
+        ".jpeg",
+        ".png",
+        ".gif"
+      ]
+    }
+  });
+  useEffect3(() => {
+    if (onUpload && acceptedFiles.length) {
+      requestAnimationFrame(async () => {
+        const f = acceptedFiles[0];
+        const file = new File([
+          f
+        ], f.name, {
+          type: f.type,
+          lastModified: f.lastModified
+        });
+        const { url } = await onUpload(file);
+        if (url) {
+          onAction?.({
+            type: "image",
+            data: url
+          });
+        }
+      });
+    }
+  }, [
+    acceptedFiles
+  ]);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("input", getInputProps()), /* @__PURE__ */ React2.createElement(ToolbarButton, {
+    value: "image",
+    Icon: Image,
+    onClick: () => open()
+  }, t("image label")));
+};
+var MarkdownActions = () => {
+  const { onAction } = useToolbarContext("MarkdownStyles");
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ToolbarButton, {
+    value: "comment",
+    Icon: ChatText,
     "data-testid": "editor.toolbar.comment",
     onClick: () => onAction?.({
       type: "comment"
-    }),
-    classNames: buttonStyles
-  }, /* @__PURE__ */ React2.createElement(ChatText, {
-    className: iconStyles
-  }), /* @__PURE__ */ React2.createElement("span", {
-    className: "sr-only"
-  }, t("comment label")))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, t("comment label"), /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
+    })
+  }, t("comment label")));
 };
 var Toolbar = {
   Root: ToolbarRoot,
-  Button: ToolbarButton,
+  Button: ToolbarToggleButton,
   Separator: ToolbarSeparator,
   Markdown: MarkdownStandard,
-  Extended: MarkdownExtended
+  Custom: MarkdownCustom,
+  Actions: MarkdownActions
+};
+
+// packages/ui/react-ui-editor/src/hooks/useActionHandler.ts
+var useActionHandler = (view) => {
+  return (action) => view && processAction(view, action);
+};
+
+// packages/ui/react-ui-editor/src/hooks/useDocAccessor.ts
+import { useMemo as useMemo2 } from "react";
+import { createDocAccessor, getTextContent } from "@dxos/echo-schema";
+var useDocAccessor = (text) => {
+  return useMemo2(() => ({
+    id: text.id,
+    doc: getTextContent(text),
+    accessor: createDocAccessor(text)
+  }), [
+    text
+  ]);
+};
+
+// packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
+import { EditorSelection as EditorSelection2, EditorState as EditorState3 } from "@codemirror/state";
+import { EditorView as EditorView17 } from "@codemirror/view";
+import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
+import { log as log8 } from "@dxos/log";
+import { isNotFalsy as isNotFalsy5 } from "@dxos/util";
+var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
+var useTextEditor = (cb = () => ({}), deps = []) => {
+  let { id, doc, selection, extensions, autoFocus, scrollTo, debug } = useMemo3(cb, deps ?? []);
+  const onUpdate = useRef3();
+  const [view, setView] = useState4();
+  const parentRef = useRef3(null);
+  useEffect4(() => {
+    let view2;
+    if (parentRef.current) {
+      log8("create", {
+        id
+      }, {
+        F: __dxlog_file11,
+        L: 36,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      const state2 = EditorState3.create({
+        doc,
+        selection,
+        extensions: [
+          id && documentId2.of(id),
+          // TODO(burdon): Doesn't catch errors in keymap functions.
+          EditorView17.exceptionSink.of((err) => {
+            log8.catch(err, void 0, {
+              F: __dxlog_file11,
+              L: 46,
+              S: void 0,
+              C: (f, a) => f(...a)
+            });
+          }),
+          extensions,
+          EditorView17.updateListener.of(() => {
+            onUpdate.current?.();
+          })
+        ].filter(isNotFalsy5)
+      });
+      view2 = new EditorView17({
+        parent: parentRef.current,
+        scrollTo,
+        state: state2,
+        // 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 () => {
+      log8("destroy", {
+        id
+      }, {
+        F: __dxlog_file11,
+        L: 74,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      view2?.destroy();
+    };
+  }, deps);
+  useEffect4(() => {
+    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
+  };
 };
 export {
-  BaseTextEditor,
   Cursor,
   Doc,
   EditorModes,
   Inline,
   List,
-  MarkdownEditor,
   RemoteSelectionsDecorator,
   SpaceAwarenessProvider,
   TextEditor,
@@ -4925,43 +4948,41 @@ export {
   awarenessProvider,
   blast,
   callbackWrapper,
-  codeTheme,
   command,
   comments,
-  compareFormatting,
   createBasicExtensions,
   createComment,
+  createDataExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
-  cursorLineMargin,
-  cursorLineMarginFacet,
   decorateMarkdown,
-  defaultMarkdownSlots,
   defaultOptions,
-  defaultSlots,
-  defaultTextSlots,
   defaultTheme,
-  dnd,
+  documentId2 as documentId,
+  dropFile,
   editorFillLayoutEditor,
   editorFillLayoutRoot,
   editorMode,
   editorWithToolbarLayout,
   focusComment,
-  formatting,
+  focusEvent,
+  formattingEquals,
+  formattingKeymap,
   getFormatting,
   getToken,
   image,
+  imageUpload,
   insertTable,
-  keymap9 as keymap,
+  keymap11 as keymap,
   linkTooltip,
   listener,
+  localStorageStateStoreAdapter,
   logChanges,
   markdownHighlightStyle,
   markdownTags,
   markdownTagsExtensions,
-  markdownTheme,
   mention,
-  outliner,
+  processAction,
   removeBlockquote,
   removeCodeblock,
   removeLink,
@@ -4972,9 +4993,9 @@ export {
   setHeading,
   setSelection,
   setStyle,
+  state,
   table,
   tags2 as tags,
-  textTheme,
   toggleBlockquote,
   toggleCodeblock,
   toggleEmphasis,
@@ -4987,12 +5008,9 @@ export {
   typewriter,
   useActionHandler,
   useComments,
-  useEditorView,
+  useDocAccessor,
   useFormattingState,
-  useInMemoryTextModel,
   useTextEditor,
-  useTextExtensions,
-  useTextModel,
   useToolbarContext
 };
 //# sourceMappingURL=index.mjs.map