@dxos/react-ui-editor 0.4.8-main.27faba7 → 0.4.8-main.512e4c8

package/dist/lib/browser/index.mjs

@@ -29,16 +29,12 @@ 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 } from "@codemirror/state";
+import { EditorView as EditorView15 } 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 { isNotFalsy as isNotFalsy4 } from "@dxos/util";
+import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState as useState2 } from "react";
+import { log as log7 } from "@dxos/log";
+import { isNotFalsy as isNotFalsy2 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/annotations.ts
 import { StateField } from "@codemirror/state";
@@ -243,7 +239,6 @@ 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 updateHeadsEffect = StateEffect.define({});
@@ -1110,8 +1105,8 @@ var commandState = StateField3.define({
     }
     return state;
   },
-  provide: (f) => [
-    showTooltip.from(f, (value) => value.tooltip ?? null)
+  provide: (field) => [
+    showTooltip.from(field, (value) => value.tooltip ?? null)
   ]
 });
 var openEffect = StateEffect2.define();
@@ -1293,10 +1288,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";
@@ -1735,12 +1730,14 @@ var focusComment = (view, id, center = true) => {
 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,
@@ -1750,74 +1747,97 @@ 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 { 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,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
-    return;
-  }
-  if (!needsScrollTop && !needsScrollBot) {
-    return;
+var cursorLineMargin = (options = {
+  lines: 3
+}) => {
+  const { lines } = options;
+  if (!lines || lines <= 0) {
+    return [];
   }
-  if (selectionSet) {
-    const { head } = startState.selection.main;
-    const oldMainLine = lineAtPos(startState, head);
-    if (needsScrollTop && oldMainLine < mainLine) {
+  return EditorView8.updateListener.of(({ transactions, state, selectionSet, startState, view }) => {
+    if (transactions.length < 1 || transactions.some((tr) => tr.isUserEvent(annotation))) {
       return;
     }
-    if (needsScrollBot && oldMainLine > mainLine) {
+    const s = state;
+    const { main } = s.selection;
+    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 - lines;
+    if (needsScrollTop && needsScrollBot) {
+      log4.warn("is cursorScrollMargin too large for the editor size?", void 0, {
+        F: __dxlog_file5,
+        L: 65,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
       return;
     }
-  }
-  view.dispatch({
-    annotations: Transaction.userEvent.of(annotation),
-    effects: EditorView8.scrollIntoView(s.selection.main.head, {
-      y: needsScrollTop ? "start" : "end",
-      yMargin: view.defaultLineHeight * cursorLineMargin2
-    })
+    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;
+      }
+    }
+    view.dispatch({
+      annotations: Transaction.userEvent.of(annotation),
+      effects: EditorView8.scrollIntoView(s.selection.main.head, {
+        y: needsScrollTop ? "start" : "end",
+        yMargin: view.defaultLineHeight * lines
+      })
+    });
   });
+};
+
+// packages/ui/react-ui-editor/src/extensions/doc.ts
+import { Facet as Facet5 } from "@codemirror/state";
+import { invariant as invariant2 } 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) => {
+    invariant2(providers.length <= 1, void 0, {
+      F: __dxlog_file6,
+      L: 11,
+      S: void 0,
+      A: [
+        "providers.length <= 1",
+        ""
+      ]
+    });
+    return providers[0];
+  }
 });
 
 // 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 __dxlog_file7 = "/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,
+        F: __dxlog_file7,
         L: 14,
         S: void 0,
         C: (f, a) => f(...a)
@@ -1841,16 +1861,14 @@ var listener = ({ onFocus, onChange }) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
-import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
-import { history, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
+import { closeBracketsKeymap } from "@codemirror/autocomplete";
+import { historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
 import { markdownLanguage as markdownLanguage3, markdown } from "@codemirror/lang-markdown";
-import { bracketMatching, defaultHighlightStyle, indentOnInput, syntaxHighlighting } from "@codemirror/language";
+import { defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
 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 { keymap as keymap5 } from "@codemirror/view";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
 import { markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
@@ -2041,19 +2059,8 @@ var markdownHighlightStyle = (readonly) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
-var createMarkdownExtensions = ({ themeMode, placeholder: _placeholder, lineWrapping = true } = {}) => {
+var createMarkdownExtensions = ({ themeMode } = {}) => {
   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).
@@ -2088,13 +2095,13 @@ var createMarkdownExtensions = ({ themeMode, placeholder: _placeholder, lineWrap
       // 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 { EditorView as EditorView11, 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() {
@@ -2302,15 +2309,15 @@ var decorateMarkdown = (options = {}) => {
       }
     }, {
       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)
+        EditorView11.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration5.none),
+        EditorView11.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration5.none),
+        EditorView11.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration5.none)
       ]
     }),
     formattingStyles
   ];
 };
-var formattingStyles = EditorView12.baseTheme({
+var formattingStyles = EditorView11.baseTheme({
   "& .cm-code": {
     fontFamily: getToken("fontFamily.mono", []).join(",")
   },
@@ -2363,7 +2370,7 @@ var formattingStyles = EditorView12.baseTheme({
 import { snippet } from "@codemirror/autocomplete";
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { EditorSelection } from "@codemirror/state";
-import { EditorView as EditorView13, keymap as keymap6 } from "@codemirror/view";
+import { EditorView as EditorView12, 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;
 var Inline;
@@ -3018,8 +3025,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) => {
@@ -3233,7 +3240,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([
       {
@@ -3433,7 +3440,7 @@ var getFormatting = (state) => {
 };
 var useFormattingState = () => {
   const [state, setState] = useState(null);
-  const observer = useMemo(() => EditorView13.updateListener.of((update2) => {
+  const observer = useMemo(() => EditorView12.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       const newState = getFormatting(update2.state);
       if (!state || !compareFormatting(state, newState)) {
@@ -3450,7 +3457,7 @@ var useFormattingState = () => {
 // 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";
+import { Decoration as Decoration6, EditorView as EditorView13, WidgetType as WidgetType4 } from "@codemirror/view";
 var image = (options = {}) => {
   return StateField5.define({
     create: (state) => {
@@ -3477,7 +3484,7 @@ var image = (options = {}) => {
         add: buildDecorations2(from, to, tr.state)
       });
     },
-    provide: (field) => EditorView14.decorations.from(field)
+    provide: (field) => EditorView13.decorations.from(field)
   });
 };
 var preloaded = /* @__PURE__ */ new Set();
@@ -3565,12 +3572,12 @@ var linkTooltip = (render) => hoverTooltip2((view, pos, side) => {
 // 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";
+import { Decoration as Decoration7, EditorView as EditorView14, 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)
+    provide: (field) => EditorView14.decorations.from(field)
   });
 };
 var update = (state, options) => {
@@ -3614,9 +3621,11 @@ var update = (state, options) => {
   });
   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)
-    }));
+    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"
     }));
@@ -3663,7 +3672,7 @@ var TableWidget = class extends WidgetType5 {
 // 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 __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.
@@ -3678,7 +3687,7 @@ var mention = ({ onSearch }) => {
         log6.info("completion context", {
           context
         }, {
-          F: __dxlog_file7,
+          F: __dxlog_file8,
           L: 26,
           S: void 0,
           C: (f, a) => f(...a)
@@ -3727,11 +3736,6 @@ var EditorModes = {
   ]
 };
 
-// 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 = [
@@ -3789,263 +3793,577 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   ];
 };
 
-// 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;
-  }
-  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);
-      }
+// packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
+var __dxlog_file9 = "/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 = EditorView15.scrollIntoView(0), moveToEndOfLine, debug, dataTestId }, forwardedRef) => {
+  const [instanceId] = useState2(() => `text-editor-${++instanceCount}`);
+  const tabsterDOMAttribute = useFocusableGroup({
+    tabBehavior: "limited"
+  });
+  const rootRef = useRef(null);
+  const [view, setView] = useState2(null);
+  useImperativeHandle(forwardedRef, () => view, [
+    view
+  ]);
+  useEffect2(() => {
+    if (autoFocus) {
+      view?.focus();
+    }
+  }, [
+    view,
+    autoFocus
+  ]);
+  useEffect2(() => {
+    log7("updating", {
+      id,
+      instanceId
+    }, {
+      F: __dxlog_file9,
+      L: 88,
+      S: void 0,
+      C: (f, a) => f(...a)
     });
-    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;
+    const state = EditorState.create({
+      doc,
+      selection,
+      extensions: [
+        id && documentId2.of(id),
+        // TODO(burdon): NOTE: Doesn't catch errors in keymap functions.
+        EditorView15.exceptionSink.of((err) => {
+          log7.catch(err, void 0, {
+            F: __dxlog_file9,
+            L: 101,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+        }),
+        // Focus.
+        EditorView15.updateListener.of((update2) => {
+          update2.transactions.forEach((transaction) => {
+            if (transaction.isUserEvent("focus.container")) {
+              rootRef.current?.focus();
+            }
+          });
+        }),
+        extensions
+      ].filter(isNotFalsy2)
+    });
+    const view2 = new EditorView15({
+      state,
+      parent: rootRef.current,
+      scrollTo,
+      // 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);
       }
-    }));
-    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)
-      });
-    });
-  }
-  close() {
-    void this._ctx?.dispose();
-    this._ctx = void 0;
-    this._postTask = void 0;
-  }
-  getRemoteStates() {
-    return Array.from(this._remoteStates.values());
-  }
-  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();
-  }
-  _handleQueryMessage() {
-    invariant2(this._postTask, void 0, {
-      F: __dxlog_file8,
-      L: 115,
-      S: this,
-      A: [
-        "this._postTask",
-        ""
-      ]
-    });
-    this._postTask.schedule();
-  }
-  _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();
-  }
-};
-
-// packages/ui/react-ui-editor/src/hooks/useActionHandler.ts
-var useActionHandler = (view) => {
-  return (action) => {
-    if (!view) {
-      return;
+    setView(view2);
+    if (moveToEndOfLine) {
+      const { to } = view2.state.doc.lineAt(0);
+      view2?.dispatch({
+        selection: {
+          anchor: to
+        }
+      });
     }
-    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;
+    if (state.facet(editorMode).noTabster) {
+      rootRef.current?.removeAttribute("data-tabster");
     }
-    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,
-    ""
+    return () => {
+      view2?.destroy();
+      setView(null);
+    };
+  }, [
+    doc,
+    selection,
+    extensions
   ]);
-  if (prev[0] !== editorRef.current) {
-    setPrev([
-      editorRef.current,
-      id
-    ]);
-  }
-  return [
-    editorRef,
-    prev[1] !== id
-  ];
-};
-
-// 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";
+  const handleKeyUp = useCallback((event) => {
+    const { key } = event;
+    switch (key) {
+      case "Enter": {
+        view?.focus();
+        break;
+      }
+    }
+  }, [
+    view
+  ]);
+  return /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    ref: rootRef,
+    tabIndex: 0,
+    className,
+    "data-testid": dataTestId,
+    ...tabsterDOMAttribute,
+    onKeyUp: handleKeyUp
+  });
+});
 
-// 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"
+// 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 { createContext } from "@radix-ui/react-context";
+import React2, { useRef as useRef2, useState as useState3 } from "react";
+import { DensityProvider, ElevationProvider, Select, Toolbar as NaturalToolbar, Tooltip, useTranslation } from "@dxos/react-ui";
+import { getSize } from "@dxos/react-ui-theme";
+var tooltipProps = {
+  side: "top",
+  classNames: "z-10"
+};
+var HeadingIcons = {
+  "0": Paragraph,
+  "1": TextHOne,
+  "2": TextHTwo,
+  "3": TextHThree,
+  "4": TextHFour,
+  "5": TextHFive,
+  "6": TextHSix
+};
+var [ToolbarContextProvider, useToolbarContext] = createContext("Toolbar");
+var ToolbarRoot = ({ children, onAction, classNames, state }) => {
+  return /* @__PURE__ */ React2.createElement(ToolbarContextProvider, {
+    onAction,
+    state
+  }, /* @__PURE__ */ React2.createElement(DensityProvider, {
+    density: "fine"
+  }, /* @__PURE__ */ React2.createElement(ElevationProvider, {
+    elevation: "chrome"
+  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Root, {
+    classNames: [
+      "is-full shrink-0 overflow-x-auto p-1",
+      classNames
+    ]
+  }, children))));
+};
+var buttonStyles = "min-bs-0 p-2";
+var iconStyles = getSize(5);
+var ToolbarButton = ({ Icon, children, ...props }) => {
+  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroupItem, {
+    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 header = blockType && /heading(\d)/.exec(blockType);
+  const value = header ? header[1] : blockType === "paragraph" || !blockType ? "0" : void 0;
+  const HeadingIcon = HeadingIcons[value ?? "0"];
+  const suppressNextTooltip = useRef2(false);
+  const [tooltipOpen, setTooltipOpen] = useState3(false);
+  const [selectOpen, setSelectOpen] = useState3(false);
+  return /* @__PURE__ */ React2.createElement(Tooltip.Root, {
+    open: tooltipOpen,
+    onOpenChange: (nextOpen) => {
+      if (nextOpen && suppressNextTooltip.current) {
+        suppressNextTooltip.current = false;
+        return setTooltipOpen(false);
+      } else {
+        return setTooltipOpen(nextOpen);
+      }
+    }
+  }, /* @__PURE__ */ React2.createElement(Select.Root, {
+    disabled: value === null,
+    value: value ?? "0",
+    open: selectOpen,
+    onOpenChange: (nextOpen) => {
+      if (!nextOpen) {
+        suppressNextTooltip.current = true;
+      }
+      return setSelectOpen(nextOpen);
+    },
+    onValueChange: (value2) => onAction?.({
+      type: "heading",
+      data: parseInt(value2)
+    })
+  }, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
+    variant: "ghost",
+    classNames: buttonStyles
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, t("heading label")), /* @__PURE__ */ React2.createElement(HeadingIcon, {
+    className: iconStyles
+  })))), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.ScrollUpButton, null), /* @__PURE__ */ React2.createElement(Select.Viewport, null, /* @__PURE__ */ React2.createElement(Select.Option, {
+    value: "0"
+  }, /* @__PURE__ */ React2.createElement(Paragraph, {
+    className: iconStyles
+  })), [
+    1,
+    2,
+    3,
+    4,
+    5,
+    6
+  ].map((level) => /* @__PURE__ */ React2.createElement(Select.Option, {
+    key: level,
+    value: String(level)
+  }, level === 1 && /* @__PURE__ */ React2.createElement(TextHOne, {
+    className: iconStyles
+  }), level === 2 && /* @__PURE__ */ React2.createElement(TextHTwo, {
+    className: iconStyles
+  }), level === 3 && /* @__PURE__ */ React2.createElement(TextHThree, {
+    className: iconStyles
+  }), level === 4 && /* @__PURE__ */ React2.createElement(TextHFour, {
+    className: iconStyles
+  }), level === 5 && /* @__PURE__ */ React2.createElement(TextHFive, {
+    className: iconStyles
+  }), level === 6 && /* @__PURE__ */ React2.createElement(TextHSix, {
+    className: iconStyles
+  })))), /* @__PURE__ */ React2.createElement(Select.ScrollDownButton, null), /* @__PURE__ */ React2.createElement(Select.Arrow, null)))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, t("heading label"), /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
+};
+var markdownStyles = [
+  {
+    type: "strong",
+    Icon: TextB,
+    getState: (state) => state.strong
   },
-  //
-  // Cursor
-  //
-  "&light .cm-cursor, &light .cm-dropCursor": {
-    borderLeft: "2px solid black"
+  {
+    type: "emphasis",
+    Icon: TextItalic,
+    getState: (state) => state.emphasis
   },
-  "&dark .cm-cursor, &dark .cm-dropCursor": {
-    borderLeft: "2px solid white"
+  {
+    type: "strikethrough",
+    Icon: TextStrikethrough,
+    getState: (state) => state.strikethrough
   },
-  "&light .cm-placeholder": {
-    color: get4(tokens, "extend.semanticColors.description.light", "rgba(0,0,0,.2)")
+  {
+    type: "code",
+    Icon: Code,
+    getState: (state) => state.code
   },
-  "&dark .cm-placeholder": {
-    color: get4(tokens, "extend.semanticColors.description.dark", "rgba(255,255,255,.2)")
+  {
+    type: "link",
+    Icon: Link,
+    getState: (state) => state.link
+  }
+];
+var MarkdownStyles = () => {
+  const { onAction, state } = 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, {
+    key: type,
+    value: type,
+    Icon,
+    disabled: state?.blockType === "codeblock",
+    onClick: state ? () => onAction?.({
+      type,
+      data: !getState(state)
+    }) : void 0
+  }, t(`${type} label`))));
+};
+var markdownLists = [
+  {
+    type: "list-bullet",
+    Icon: ListBullets,
+    getState: (state) => state.listStyle === "bullet"
   },
-  //
-  // line
-  //
-  ".cm-line": {
-    paddingInline: 0
+  {
+    type: "list-ordered",
+    Icon: ListNumbers,
+    getState: (state) => state.listStyle === "ordered"
   },
-  ".cm-activeLine": {
+  {
+    type: "list-task",
+    Icon: ListChecks,
+    getState: (state) => state.listStyle === "task"
+  }
+];
+var MarkdownLists = () => {
+  const { onAction, state } = 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, {
+    key: type,
+    value: type,
+    Icon,
+    onClick: state ? () => onAction?.({
+      type,
+      data: !getState(state)
+    }) : void 0
+  }, t(`${type} label`))));
+};
+var markdownBlocks = [
+  {
+    type: "blockquote",
+    Icon: Quotes,
+    getState: (state) => state.blockQuote
+  },
+  {
+    type: "codeblock",
+    Icon: CodeBlock,
+    getState: (state) => state.blockType === "codeblock"
+  },
+  {
+    type: "table",
+    Icon: Table2,
+    getState: (state) => state.blockType === "tablecell",
+    disabled: (state) => !state.blankLine
+  }
+];
+var MarkdownBlocks = () => {
+  const { onAction, state } = useToolbarContext("MarkdownStyles");
+  const { t } = useTranslation(translationKey);
+  const value = markdownBlocks.find(({ getState }) => state && getState(state));
+  return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
+    type: "single",
+    value: value?.type ?? ""
+  }, markdownBlocks.map(({ type, disabled, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+    key: type,
+    value: type,
+    Icon,
+    disabled: !state || disabled?.(state),
+    onClick: state ? () => onAction?.({
+      type,
+      data: !getState(state)
+    }) : 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 = () => {
+  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",
+    "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))));
+};
+var Toolbar = {
+  Root: ToolbarRoot,
+  Button: ToolbarButton,
+  Separator: ToolbarSeparator,
+  Markdown: MarkdownStandard,
+  Extended: MarkdownExtended
+};
+
+// packages/ui/react-ui-editor/src/hooks/awareness-provider.ts
+import { DeferredTask, Event as Event2, sleep } from "@dxos/async";
+import { Context as Context2 } from "@dxos/context";
+import { invariant as invariant3 } from "@dxos/invariant";
+import { log as log8 } from "@dxos/log";
+var __dxlog_file10 = "/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;
+  }
+  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) => {
+      log8.debug("failed to query awareness", {
+        err
+      }, {
+        F: __dxlog_file10,
+        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) {
+    invariant3(this._postTask, void 0, {
+      F: __dxlog_file10,
+      L: 104,
+      S: this,
+      A: [
+        "this._postTask",
+        ""
+      ]
+    });
+    this._localState = {
+      peerId: this._peerId,
+      position,
+      info: this._info
+    };
+    this._postTask.schedule();
+  }
+  _handleQueryMessage() {
+    invariant3(this._postTask, void 0, {
+      F: __dxlog_file10,
+      L: 115,
+      S: this,
+      A: [
+        "this._postTask",
+        ""
+      ]
+    });
+    this._postTask.schedule();
+  }
+  _handlePostMessage(message) {
+    invariant3(message.kind === "post", void 0, {
+      F: __dxlog_file10,
+      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/hooks/extension-utils.ts
+import { closeBrackets } from "@codemirror/autocomplete";
+import { history } from "@codemirror/commands";
+import { bracketMatching } from "@codemirror/language";
+import { EditorState as EditorState2 } from "@codemirror/state";
+import { EditorView as EditorView16, crosshairCursor, drawSelection, dropCursor, highlightActiveLine, lineNumbers, placeholder, scrollPastEnd } from "@codemirror/view";
+import defaultsDeep2 from "lodash.defaultsdeep";
+import { useMemo as useMemo2 } from "react";
+import { generateName } from "@dxos/display-name";
+import { createDocAccessor, getTextContent } from "@dxos/echo-schema";
+import { log as log9 } from "@dxos/log";
+import { hueTokens } from "@dxos/react-ui-theme";
+import { hexToHue, isNotFalsy as isNotFalsy3 } from "@dxos/util";
+
+// 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"
+  },
+  // 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-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: get3(tokens, "extend.semanticColors.base.fg.light", "black"),
+    caretColor: "black"
+  },
+  "&dark .cm-content": {
+    color: get3(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: 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"
   },
   //
@@ -4058,36 +4376,36 @@ var defaultTheme = {
   // Selection
   //
   "&light .cm-selectionBackground": {
-    background: get4(tokens, "extend.colors.primary.100")
+    background: get3(tokens, "extend.colors.primary.100")
   },
   "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: get4(tokens, "extend.colors.primary.200")
+    background: get3(tokens, "extend.colors.primary.200")
   },
   "&dark .cm-selectionBackground": {
-    background: get4(tokens, "extend.colors.primary.700")
+    background: get3(tokens, "extend.colors.primary.700")
   },
   "&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: get4(tokens, "extend.colors.primary.600")
+    background: get3(tokens, "extend.colors.primary.600")
   },
   //
   // Search
   //
   "&light .cm-searchMatch": {
-    backgroundColor: get4(tokens, "extend.colors.yellow.100")
+    backgroundColor: get3(tokens, "extend.colors.yellow.100")
   },
   "&dark .cm-searchMatch": {
-    backgroundColor: get4(tokens, "extend.colors.yellow.700")
+    backgroundColor: get3(tokens, "extend.colors.yellow.700")
   },
   //
   // link
   //
   ".cm-link": {
-    color: get4(tokens, "extend.colors.primary.500"),
+    color: get3(tokens, "extend.colors.primary.500"),
     textDecorationLine: "underline",
     textDecorationThickness: "1px",
     textUnderlineOffset: "2px",
     borderRadius: ".125rem",
-    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
   //
   // tooltip
@@ -4110,7 +4428,7 @@ var defaultTheme = {
     display: "none"
   },
   ".cm-completionLabel": {
-    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
   ".cm-completionMatchedText": {
     textDecoration: "none"
@@ -4119,15 +4437,15 @@ var defaultTheme = {
   // table
   //
   ".cm-table *": {
-    fontFamily: `${get4(tokens, "fontFamily.mono", []).join(",")} !important`,
+    fontFamily: `${get3(tokens, "fontFamily.mono", []).join(",")} !important`,
     textDecoration: "none !important"
   },
   ".cm-table-head": {
     padding: "2px 16px 2px 0px",
-    borderBottom: `1px solid ${get4(tokens, "extend.colors.neutral.500")}`,
+    borderBottom: `1px solid ${get3(tokens, "extend.colors.neutral.500")}`,
     fontWeight: 100,
     textAlign: "left",
-    color: get4(tokens, "extend.colors.neutral.500")
+    color: get3(tokens, "extend.colors.neutral.500")
   },
   ".cm-table-cell": {
     padding: "2px 16px 2px 0px"
@@ -4174,738 +4492,265 @@ var defaultTheme = {
   * </div
   */
   ".cm-panels": {
-    border: `1px solid ${get4(tokens, "extend.colors.neutral.200")}`
+    border: `1px solid ${get3(tokens, "extend.colors.neutral.200")}`
   },
   ".cm-panel": {
-    background: get4(tokens, "extend.colors.neutral.50"),
-    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
+    background: get3(tokens, "extend.colors.neutral.50"),
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
   ".cm-button": {
     margin: "4px",
-    fontFamily: get4(tokens, "fontFamily.body", []).join(","),
-    background: get4(tokens, "extend.colors.neutral.100"),
+    fontFamily: get3(tokens, "fontFamily.body", []).join(","),
+    background: get3(tokens, "extend.colors.neutral.100"),
     backgroundImage: "none",
     border: "none",
     "&:hover": {
-      background: get4(tokens, "extend.colors.neutral.200")
+      background: get3(tokens, "extend.colors.neutral.200")
     },
     "&:active": {
-      background: get4(tokens, "extend.colors.neutral.300"),
-      backgroundImage: "none"
-    }
-  },
-  ".cm-panel input[type=checkbox]": {
-    marginRight: "0.4rem !important"
-  }
-};
-var textTheme = {
-  ".cm-scroller": {
-    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
-  },
-  ".cm-placeholder": {
-    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
-  }
-};
-var markdownTheme = {
-  ".cm-scroller": {
-    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
-  },
-  ".cm-placeholder": {
-    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
-  }
-};
-var codeTheme = {
-  ".cm-scroller": {
-    fontFamily: get4(tokens, "fontFamily.mono", []).join(",")
-  },
-  ".cm-placeholder": {
-    fontFamily: get4(tokens, "fontFamily.mono", []).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)
-      });
-      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);
-        }
-      });
-      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);
-      }
-      if (selection || scrollTo) {
-        onUpdate.current = () => {
-          onUpdate.current = void 0;
-          view.dispatch({
-            selection,
-            effects: scrollTo && [
-              scrollTo
-            ],
-            scrollIntoView: !scrollTo
-          });
-        };
-      }
-      if (autoFocus) {
-        view.focus();
-      }
-    }
-  }, [
-    view,
-    autoFocus,
-    selection,
-    scrollTo
-  ]);
-  return {
-    parentRef,
-    view
-  };
-};
-var 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);
-};
-var createThemeExtensions = ({ theme, themeMode, slots } = {}) => {
-  return [
-    EditorView16.baseTheme(defaultTheme),
-    EditorView16.darkTheme.of(themeMode === "dark"),
-    theme && EditorView16.theme(theme),
-    slots?.editor?.className && EditorView16.editorAttributes.of({
-      class: slots.editor.className
-    }),
-    slots?.content?.className && EditorView16.contentAttributes.of({
-      class: slots.content.className
-    })
-  ].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
-      }
-    });
-    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) => {
-  const tabsterDOMAttribute = useFocusableGroup({
-    tabBehavior: "limited"
-  });
-  const { themeMode } = useThemeContext();
-  const rootRef = useRef3(null);
-  const [view, setView] = useState5(null);
-  useImperativeHandle(forwardedRef, () => view, [
-    view
-  ]);
-  useEffect3(() => {
-    if (autoFocus) {
-      view?.focus();
-    }
-  }, [
-    view,
-    autoFocus
-  ]);
-  useEffect3(() => {
-    if (!model || !rootRef.current) {
-      return;
-    }
-    const state = EditorState3.create({
-      doc: typeof model.content === "string" ? model.content : DocAccessor.getValue(model.content),
-      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,
-            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) => {
-          update2.transactions.forEach((transaction) => {
-            if (transaction.isUserEvent("focus.container")) {
-              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
-      ].filter(isNotFalsy4)
-    });
-    const view2 = new EditorView17({
-      state,
-      parent: rootRef.current,
-      scrollTo,
-      // 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);
-    if (moveToEndOfLine) {
-      const { to } = view2.state.doc.lineAt(0);
-      view2?.dispatch({
-        selection: {
-          anchor: to
-        }
-      });
-    }
-    if (state.facet(editorMode).noTabster) {
-      rootRef.current.removeAttribute("data-tabster");
-    }
-    return () => {
-      view2?.destroy();
-      setView(null);
-    };
-  }, [
-    rootRef,
-    extensions,
-    model,
-    readonly,
-    themeMode
-  ]);
-  const handleKeyUp = useCallback((event) => {
-    const { key } = event;
-    switch (key) {
-      case "Enter": {
-        view?.focus();
-        break;
-      }
-    }
-  }, [
-    view
-  ]);
-  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
-  });
-});
-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 { createContext } from "@radix-ui/react-context";
-import React2, { useRef as useRef4, useState as useState6 } from "react";
-import { DensityProvider, ElevationProvider, Select, Toolbar as NaturalToolbar, Tooltip, useTranslation } from "@dxos/react-ui";
-import { getSize } from "@dxos/react-ui-theme";
-var tooltipProps = {
-  side: "top",
-  classNames: "z-10"
-};
-var HeadingIcons = {
-  "0": Paragraph,
-  "1": TextHOne,
-  "2": TextHTwo,
-  "3": TextHThree,
-  "4": TextHFour,
-  "5": TextHFive,
-  "6": TextHSix
-};
-var [ToolbarContextProvider, useToolbarContext] = createContext("Toolbar");
-var ToolbarRoot = ({ children, onAction, classNames, state }) => {
-  return /* @__PURE__ */ React2.createElement(ToolbarContextProvider, {
-    onAction,
-    state
-  }, /* @__PURE__ */ React2.createElement(DensityProvider, {
-    density: "fine"
-  }, /* @__PURE__ */ React2.createElement(ElevationProvider, {
-    elevation: "chrome"
-  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Root, {
-    classNames: [
-      "is-full shrink-0 overflow-x-auto p-1",
-      classNames
-    ]
-  }, children))));
-};
-var buttonStyles = "min-bs-0 p-2";
-var iconStyles = getSize(5);
-var ToolbarButton = ({ Icon, children, ...props }) => {
-  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroupItem, {
-    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 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);
-  return /* @__PURE__ */ React2.createElement(Tooltip.Root, {
-    open: tooltipOpen,
-    onOpenChange: (nextOpen) => {
-      if (nextOpen && suppressNextTooltip.current) {
-        suppressNextTooltip.current = false;
-        return setTooltipOpen(false);
-      } else {
-        return setTooltipOpen(nextOpen);
-      }
-    }
-  }, /* @__PURE__ */ React2.createElement(Select.Root, {
-    disabled: value === null,
-    value: value ?? "0",
-    open: selectOpen,
-    onOpenChange: (nextOpen) => {
-      if (!nextOpen) {
-        suppressNextTooltip.current = true;
-      }
-      return setSelectOpen(nextOpen);
-    },
-    onValueChange: (value2) => onAction?.({
-      type: "heading",
-      data: parseInt(value2)
-    })
-  }, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
-    variant: "ghost",
-    classNames: buttonStyles
-  }, /* @__PURE__ */ React2.createElement("span", {
-    className: "sr-only"
-  }, t("heading label")), /* @__PURE__ */ React2.createElement(HeadingIcon, {
-    className: iconStyles
-  })))), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.ScrollUpButton, null), /* @__PURE__ */ React2.createElement(Select.Viewport, null, /* @__PURE__ */ React2.createElement(Select.Option, {
-    value: "0"
-  }, /* @__PURE__ */ React2.createElement(Paragraph, {
-    className: iconStyles
-  })), [
-    1,
-    2,
-    3,
-    4,
-    5,
-    6
-  ].map((level) => /* @__PURE__ */ React2.createElement(Select.Option, {
-    key: level,
-    value: String(level)
-  }, level === 1 && /* @__PURE__ */ React2.createElement(TextHOne, {
-    className: iconStyles
-  }), level === 2 && /* @__PURE__ */ React2.createElement(TextHTwo, {
-    className: iconStyles
-  }), level === 3 && /* @__PURE__ */ React2.createElement(TextHThree, {
-    className: iconStyles
-  }), level === 4 && /* @__PURE__ */ React2.createElement(TextHFour, {
-    className: iconStyles
-  }), level === 5 && /* @__PURE__ */ React2.createElement(TextHFive, {
-    className: iconStyles
-  }), level === 6 && /* @__PURE__ */ React2.createElement(TextHSix, {
-    className: iconStyles
-  })))), /* @__PURE__ */ React2.createElement(Select.ScrollDownButton, null), /* @__PURE__ */ React2.createElement(Select.Arrow, null)))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, t("heading label"), /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
-};
-var markdownStyles = [
-  {
-    type: "strong",
-    Icon: TextB,
-    getState: (state) => state.strong
-  },
-  {
-    type: "emphasis",
-    Icon: TextItalic,
-    getState: (state) => state.emphasis
-  },
-  {
-    type: "strikethrough",
-    Icon: TextStrikethrough,
-    getState: (state) => state.strikethrough
-  },
-  {
-    type: "code",
-    Icon: Code,
-    getState: (state) => state.code
-  },
-  {
-    type: "link",
-    Icon: Link,
-    getState: (state) => state.link
-  }
-];
-var MarkdownStyles = () => {
-  const { onAction, state } = 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, {
-    key: type,
-    value: type,
-    Icon,
-    disabled: state?.blockType === "codeblock",
-    onClick: state ? () => onAction?.({
-      type,
-      data: !getState(state)
-    }) : void 0
-  }, t(`${type} label`))));
-};
-var markdownLists = [
-  {
-    type: "list-bullet",
-    Icon: ListBullets,
-    getState: (state) => state.listStyle === "bullet"
-  },
-  {
-    type: "list-ordered",
-    Icon: ListNumbers,
-    getState: (state) => state.listStyle === "ordered"
+      background: get3(tokens, "extend.colors.neutral.300"),
+      backgroundImage: "none"
+    }
   },
-  {
-    type: "list-task",
-    Icon: ListChecks,
-    getState: (state) => state.listStyle === "task"
+  ".cm-panel input[type=checkbox]": {
+    marginRight: "0.4rem !important"
   }
-];
-var MarkdownLists = () => {
-  const { onAction, state } = 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, {
-    key: type,
-    value: type,
-    Icon,
-    onClick: state ? () => onAction?.({
-      type,
-      data: !getState(state)
-    }) : void 0
-  }, t(`${type} label`))));
 };
-var markdownBlocks = [
-  {
-    type: "blockquote",
-    Icon: Quotes,
-    getState: (state) => state.blockQuote
-  },
-  {
-    type: "codeblock",
-    Icon: CodeBlock,
-    getState: (state) => state.blockType === "codeblock"
+
+// packages/ui/react-ui-editor/src/hooks/extension-utils.ts
+var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/extension-utils.ts";
+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) => {
+      log9.catch(err, void 0, {
+        F: __dxlog_file11,
+        L: 79,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }),
+    props.allowMultipleSelections && EditorState2.allowMultipleSelections.of(true),
+    props.bracketMatching && bracketMatching(),
+    props.closeBrackets && closeBrackets(),
+    props.crosshairCursor && crosshairCursor(),
+    props.dropCursor && dropCursor(),
+    props.drawSelection && drawSelection(),
+    props.highlightActiveLine && highlightActiveLine(),
+    props.history && history(),
+    props.lineNumbers && lineNumbers(),
+    props.lineWrapping && EditorView16.lineWrapping,
+    props.placeholder && placeholder(props.placeholder),
+    props.readonly && [
+      EditorState2.readOnly.of(true),
+      EditorView16.editable.of(false)
+    ],
+    props.scrollPastEnd && scrollPastEnd(),
+    props.tabSize && EditorState2.tabSize.of(props.tabSize)
+  ].filter(isNotFalsy3);
+};
+var defaultSlots = {
+  editor: {
+    className: "w-full bs-full"
   },
-  {
-    type: "table",
-    Icon: Table2,
-    getState: (state) => state.blockType === "tablecell",
-    disabled: (state) => !state.blankLine
+  content: {
+    className: "!p-2"
   }
-];
-var MarkdownBlocks = () => {
-  const { onAction, state } = useToolbarContext("MarkdownStyles");
-  const { t } = useTranslation(translationKey);
-  const value = markdownBlocks.find(({ getState }) => state && getState(state));
-  return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
-    type: "single",
-    value: value?.type ?? ""
-  }, markdownBlocks.map(({ type, disabled, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
-    key: type,
-    value: type,
-    Icon,
-    disabled: !state || disabled?.(state),
-    onClick: state ? () => onAction?.({
-      type,
-      data: !getState(state)
-    }) : 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 = () => {
-  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",
-    "data-testid": "editor.toolbar.comment",
-    onClick: () => onAction?.({
-      type: "comment"
+var createThemeExtensions = ({ theme, themeMode, slots: _slots } = {}) => {
+  const slots = defaultsDeep2({}, _slots, defaultSlots);
+  return [
+    EditorView16.baseTheme(defaultTheme),
+    EditorView16.darkTheme.of(themeMode === "dark"),
+    theme && EditorView16.theme(theme),
+    slots.editor?.className && EditorView16.editorAttributes.of({
+      class: slots.editor.className
     }),
-    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))));
+    slots.content?.className && EditorView16.contentAttributes.of({
+      class: slots.content.className
+    })
+  ].filter(isNotFalsy3);
 };
-var Toolbar = {
-  Root: ToolbarRoot,
-  Button: ToolbarButton,
-  Separator: ToolbarSeparator,
-  Markdown: MarkdownStandard,
-  Extended: MarkdownExtended
+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;
+};
+var useDocAccessor = (text) => {
+  return useMemo2(() => ({
+    id: text.id,
+    doc: getTextContent(text),
+    accessor: createDocAccessor(text)
+  }), [
+    text
+  ]);
+};
+
+// 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/useTextEditor.ts
+import { EditorSelection as EditorSelection2, EditorState as EditorState3 } from "@codemirror/state";
+import { EditorView as EditorView17 } from "@codemirror/view";
+import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
+import { log as log10 } from "@dxos/log";
+import { isNotFalsy as isNotFalsy4 } from "@dxos/util";
+var __dxlog_file12 = "/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);
+  useEffect3(() => {
+    let view2;
+    if (parentRef.current) {
+      const state = EditorState3.create({
+        doc,
+        selection,
+        extensions: [
+          id && documentId2.of(id),
+          // TODO(burdon): Doesn't catch errors in keymap functions.
+          EditorView17.exceptionSink.of((err) => {
+            log10.catch(err, void 0, {
+              F: __dxlog_file12,
+              L: 44,
+              S: void 0,
+              C: (f, a) => f(...a)
+            });
+          }),
+          extensions,
+          EditorView17.updateListener.of(() => {
+            onUpdate.current?.();
+          })
+        ].filter(isNotFalsy4)
+      });
+      view2 = new EditorView17({
+        parent: parentRef.current,
+        scrollTo,
+        state,
+        // NOTE: Uncomment to debug/monitor all transactions.
+        // https://codemirror.net/docs/ref/#view.EditorView.dispatch
+        dispatchTransactions: (trs, view3) => {
+          if (debug) {
+            logChanges(trs);
+          }
+          view3.update(trs);
+        }
+      });
+      setView(view2);
+    }
+    return () => {
+      view2?.destroy();
+    };
+  }, deps);
+  useEffect3(() => {
+    if (view) {
+      if (!selection && !view.state.selection.main.anchor) {
+        selection = EditorSelection2.single(view.state.doc.line(1).to);
+      }
+      if (selection || scrollTo) {
+        onUpdate.current = () => {
+          onUpdate.current = void 0;
+          view.dispatch({
+            selection,
+            effects: scrollTo && [
+              scrollTo
+            ],
+            scrollIntoView: !scrollTo
+          });
+        };
+      }
+      if (autoFocus) {
+        view.focus();
+      }
+    }
+  }, [
+    view,
+    autoFocus,
+    selection,
+    scrollTo
+  ]);
+  return {
+    parentRef,
+    view
+  };
 };
 export {
-  BaseTextEditor,
   Cursor,
   Doc,
   EditorModes,
   Inline,
   List,
-  MarkdownEditor,
   RemoteSelectionsDecorator,
   SpaceAwarenessProvider,
   TextEditor,
@@ -4925,29 +4770,26 @@ 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,
   editorFillLayoutEditor,
   editorFillLayoutRoot,
   editorMode,
   editorWithToolbarLayout,
   focusComment,
-  formatting,
+  formattingKeymap,
   getFormatting,
   getToken,
   image,
@@ -4959,9 +4801,7 @@ export {
   markdownHighlightStyle,
   markdownTags,
   markdownTagsExtensions,
-  markdownTheme,
   mention,
-  outliner,
   removeBlockquote,
   removeCodeblock,
   removeLink,
@@ -4974,7 +4814,6 @@ export {
   setStyle,
   table,
   tags2 as tags,
-  textTheme,
   toggleBlockquote,
   toggleCodeblock,
   toggleEmphasis,
@@ -4987,12 +4826,9 @@ export {
   typewriter,
   useActionHandler,
   useComments,
-  useEditorView,
+  useDocAccessor,
   useFormattingState,
-  useInMemoryTextModel,
   useTextEditor,
-  useTextExtensions,
-  useTextModel,
   useToolbarContext
 };
 //# sourceMappingURL=index.mjs.map