@dxos/react-ui-editor 0.4.7-main.ea67fec → 0.4.7-main.f4b92be

package/dist/lib/browser/index.mjs

@@ -23,20 +23,19 @@ var translations_default = [
 ];
 
 // packages/ui/react-ui-editor/src/index.ts
-import { keymap as keymap8 } from "@codemirror/view";
+import { keymap as keymap9 } 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/index.ts
-import { tags as tags2 } from "@lezer/highlight";
-
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
-import { EditorState as EditorState2 } from "@codemirror/state";
-import { EditorView as EditorView14, scrollPastEnd } from "@codemirror/view";
+import { EditorState as EditorState3 } from "@codemirror/state";
+import { EditorView as EditorView17, scrollPastEnd as scrollPastEnd2 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
-import defaultsDeep2 from "lodash.defaultsdeep";
-import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState as useState2, useMemo as useMemo2 } from "react";
-import { log as log3 } from "@dxos/log";
+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 log5 } from "@dxos/log";
 import { useThemeContext } from "@dxos/react-ui";
 import { focusRing } from "@dxos/react-ui-theme";
 import { isNotFalsy as isNotFalsy4 } from "@dxos/util";
@@ -733,28 +732,8 @@ var styles2 = EditorView3.baseTheme({
   }
 });
 
-// packages/ui/react-ui-editor/src/extensions/basic.ts
-import { closeBrackets } from "@codemirror/autocomplete";
-import { history } from "@codemirror/commands";
-import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
-import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
-import { drawSelection, EditorView as EditorView4, highlightActiveLine, placeholder } from "@codemirror/view";
-import { isNotFalsy as isNotFalsy2 } from "@dxos/util";
-var createBasicBundle = ({ themeMode, placeholder: _placeholder, lineWrapping = true, bracketMatching: _bracketMatching = true } = {}) => [
-  lineWrapping && EditorView4.lineWrapping,
-  // https://codemirror.net/docs/ref/#codemirror.minimalSetup
-  _bracketMatching && bracketMatching(),
-  closeBrackets(),
-  drawSelection(),
-  highlightActiveLine(),
-  history(),
-  _placeholder && placeholder(_placeholder),
-  // https://github.com/codemirror/theme-one-dark
-  themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)
-].filter(isNotFalsy2);
-
 // packages/ui/react-ui-editor/src/extensions/blast.ts
-import { EditorView as EditorView5, keymap as keymap2 } from "@codemirror/view";
+import { EditorView as EditorView4, keymap as keymap2 } from "@codemirror/view";
 import defaultsDeep from "lodash.defaultsdeep";
 import { invariant } from "@dxos/invariant";
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
@@ -802,7 +781,7 @@ var blast = (options = defaultOptions) => {
   };
   return [
     // Cursor moved.
-    EditorView5.updateListener.of((update2) => {
+    EditorView4.updateListener.of((update2) => {
       if (blaster?.node !== update2.view.scrollDOM) {
         if (blaster) {
           blaster.destroy();
@@ -1063,10 +1042,227 @@ var random = (min, max) => {
   return min + ~~(Math.random() * (max - min + 1));
 };
 
+// packages/ui/react-ui-editor/src/extensions/command/command.ts
+import { EditorView as EditorView6, keymap as keymap3 } from "@codemirror/view";
+
+// packages/ui/react-ui-editor/src/extensions/command/hint.ts
+import { RangeSetBuilder } from "@codemirror/state";
+import { Decoration as Decoration3, EditorView as EditorView5, ViewPlugin as ViewPlugin3, WidgetType as WidgetType2 } from "@codemirror/view";
+
+// packages/ui/react-ui-editor/src/extensions/command/state.ts
+import { Facet as Facet3, StateEffect as StateEffect2, StateField as StateField3 } from "@codemirror/state";
+import { showTooltip } from "@codemirror/view";
+var commandConfig = Facet3.define({
+  combine: (providers) => providers[0]
+});
+var commandState = StateField3.define({
+  create: () => ({}),
+  update: (state, tr) => {
+    for (const effect of tr.effects) {
+      if (effect.is(closeEffect)) {
+        return {};
+      }
+      if (effect.is(openEffect)) {
+        const options = tr.state.facet(commandConfig);
+        const { pos, fullWidth } = effect.value;
+        const tooltip = {
+          pos,
+          above: false,
+          arrow: false,
+          strictSide: true,
+          create: (view) => {
+            const dom = document.createElement("div");
+            const tooltipView = {
+              dom,
+              mount: (view2) => {
+                if (fullWidth) {
+                  const parent = dom.parentElement;
+                  const { paddingLeft, paddingRight } = window.getComputedStyle(parent);
+                  const widthWithoutPadding = parent.clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
+                  dom.style.width = `${widthWithoutPadding}px`;
+                }
+                options.onRender(dom, (action) => {
+                  view2.dispatch({
+                    effects: closeEffect.of(null)
+                  });
+                  if (action?.insert?.length) {
+                    view2.dispatch({
+                      changes: {
+                        from: pos,
+                        insert: action.insert
+                      },
+                      selection: {
+                        anchor: pos + action.insert.length
+                      }
+                    });
+                  }
+                  setTimeout(() => view2.focus());
+                });
+              }
+            };
+            return tooltipView;
+          }
+        };
+        return {
+          tooltip
+        };
+      }
+    }
+    return state;
+  },
+  provide: (f) => [
+    showTooltip.from(f, (value) => value.tooltip ?? null)
+  ]
+});
+var openEffect = StateEffect2.define();
+var closeEffect = StateEffect2.define();
+var openCommand = (view) => {
+  if (view.state.field(commandState, false)) {
+    const selection = view.state.selection.main;
+    const line = view.state.doc.lineAt(selection.from);
+    if (line.from === selection.from && line.from === line.to) {
+      view.dispatch({
+        effects: openEffect.of({
+          pos: selection.anchor,
+          fullWidth: true
+        })
+      });
+      return true;
+    }
+  }
+  return false;
+};
+var closeCommand = (view) => {
+  if (view.state.field(commandState, false)) {
+    view.dispatch({
+      effects: closeEffect.of(null)
+    });
+    return true;
+  }
+  return false;
+};
+var commandKeyBindings = [
+  {
+    key: "/",
+    run: openCommand
+  },
+  {
+    key: "Escape",
+    run: closeCommand
+  }
+];
+
+// packages/ui/react-ui-editor/src/extensions/util/dom.ts
+var flattenRect = (rect, left) => {
+  const x = left ? rect.left : rect.right;
+  return {
+    left: x,
+    right: x,
+    top: rect.top,
+    bottom: rect.bottom
+  };
+};
+var scratchRange;
+var textRange = (node, from, to = from) => {
+  const range = scratchRange || (scratchRange = document.createRange());
+  range.setEnd(node, to);
+  range.setStart(node, from);
+  return range;
+};
+var clientRectsFor = (dom) => {
+  if (dom.nodeType === 3) {
+    return textRange(dom, 0, dom.nodeValue.length).getClientRects();
+  } else if (dom.nodeType === 1) {
+    return dom.getClientRects();
+  } else {
+    return [];
+  }
+};
+
+// packages/ui/react-ui-editor/src/extensions/command/hint.ts
+var CommandHint = class extends WidgetType2 {
+  constructor(content) {
+    super();
+    this.content = content;
+  }
+  toDOM() {
+    const wrap = document.createElement("span");
+    wrap.className = "cm-placeholder";
+    wrap.style.pointerEvents = "none";
+    wrap.appendChild(typeof this.content === "string" ? document.createTextNode(this.content) : this.content);
+    if (typeof this.content === "string") {
+      wrap.setAttribute("aria-label", "placeholder " + this.content);
+    } else {
+      wrap.setAttribute("aria-hidden", "true");
+    }
+    return wrap;
+  }
+  coordsAt(dom) {
+    const rects = dom.firstChild ? clientRectsFor(dom.firstChild) : [];
+    if (!rects.length) {
+      return null;
+    }
+    const style = window.getComputedStyle(dom.parentNode);
+    const rect = flattenRect(rects[0], style.direction !== "rtl");
+    const lineHeight = parseInt(style.lineHeight);
+    if (rect.bottom - rect.top > lineHeight * 1.5) {
+      return {
+        left: rect.left,
+        right: rect.right,
+        top: rect.top,
+        bottom: rect.top + lineHeight
+      };
+    }
+    return rect;
+  }
+  ignoreEvent() {
+    return false;
+  }
+};
+var hintViewPlugin = ({ onHint }) => ViewPlugin3.fromClass(class {
+  constructor() {
+    this.deco = Decoration3.none;
+  }
+  update(update2) {
+    const builder = new RangeSetBuilder();
+    const cState = update2.view.state.field(commandState, false);
+    if (!cState?.tooltip) {
+      const selection = update2.view.state.selection.main;
+      const line = update2.view.state.doc.lineAt(selection.from);
+      if (selection.from === selection.to && line.from === line.to) {
+        const hint = onHint();
+        if (hint) {
+          builder.add(selection.from, selection.to, Decoration3.widget({
+            widget: new CommandHint(hint)
+          }));
+        }
+      }
+    }
+    this.deco = builder.finish();
+  }
+}, {
+  provide: (plugin) => [
+    EditorView5.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration3.none)
+  ]
+});
+
+// packages/ui/react-ui-editor/src/extensions/command/command.ts
+var command = (options) => {
+  return [
+    commandConfig.of(options),
+    commandState,
+    keymap3.of(commandKeyBindings),
+    hintViewPlugin(options),
+    EditorView6.focusChangeEffect.of((_, focusing) => {
+      return focusing ? closeEffect.of(null) : null;
+    })
+  ];
+};
+
 // packages/ui/react-ui-editor/src/extensions/comments.ts
 import { invertedEffects } from "@codemirror/commands";
-import { Facet as Facet3, StateEffect as StateEffect2, StateField as StateField3 } from "@codemirror/state";
-import { hoverTooltip, keymap as keymap3, Decoration as Decoration3, EditorView as EditorView6 } from "@codemirror/view";
+import { Facet as Facet4, StateEffect as StateEffect3, StateField as StateField4 } from "@codemirror/state";
+import { hoverTooltip, keymap as keymap4, Decoration as Decoration4, EditorView as EditorView7 } from "@codemirror/view";
 import sortBy from "lodash.sortby";
 import { useEffect } from "react";
 import { debounce } from "@dxos/async";
@@ -1142,13 +1338,13 @@ var logChanges = (trs) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/comments.ts
-var documentId = Facet3.define({
+var documentId = Facet4.define({
   combine: (values) => values[0]
 });
-var setComments = StateEffect2.define();
-var setSelection = StateEffect2.define();
-var setCommentState = StateEffect2.define();
-var commentsState = StateField3.define({
+var setComments = StateEffect3.define();
+var setSelection = StateEffect3.define();
+var setCommentState = StateEffect3.define();
+var commentsState = StateField4.define({
   create: (state) => ({
     id: state.facet(documentId),
     comments: [],
@@ -1186,7 +1382,7 @@ var commentsState = StateField3.define({
     return value;
   }
 });
-var styles3 = EditorView6.baseTheme({
+var styles3 = EditorView7.baseTheme({
   "&light .cm-comment, &light .cm-comment-current": {
     mixBlendMode: "darken"
   },
@@ -1208,19 +1404,19 @@ var styles3 = EditorView6.baseTheme({
     backgroundColor: getToken("extend.colors.yellow.950")
   }
 });
-var commentMark = Decoration3.mark({
+var commentMark = Decoration4.mark({
   class: "cm-comment",
   attributes: {
     "data-testid": "cm-comment"
   }
 });
-var commentCurrentMark = Decoration3.mark({
+var commentCurrentMark = Decoration4.mark({
   class: "cm-comment-current",
   attributes: {
     "data-testid": "cm-comment"
   }
 });
-var commentsDecorations = EditorView6.decorations.compute([
+var commentsDecorations = EditorView7.decorations.compute([
   commentsState
 ], (state) => {
   const { selection: { current }, comments: comments2 } = state.field(commentsState);
@@ -1236,7 +1432,7 @@ var commentsDecorations = EditorView6.decorations.compute([
       return commentMark.range(range.from, range.to);
     }
   }).filter(nonNullable);
-  return Decoration3.set(decorations);
+  return Decoration4.set(decorations);
 });
 var trackPastedComments = (onUpdate) => {
   let tracked = null;
@@ -1258,7 +1454,7 @@ var trackPastedComments = (onUpdate) => {
     }
   };
   return [
-    EditorView6.domEventHandlers({
+    EditorView7.domEventHandlers({
       cut: handleTrack,
       copy: handleTrack
     }),
@@ -1280,7 +1476,7 @@ var trackPastedComments = (onUpdate) => {
       return effects;
     }),
     // Handle paste or the undo of comment deletion.
-    EditorView6.updateListener.of((update2) => {
+    EditorView7.updateListener.of((update2) => {
       const restore = [];
       for (let i = 0; i < update2.transactions.length; i++) {
         const tr = update2.transactions[i];
@@ -1336,7 +1532,7 @@ var mapTrackedComment = (comment, changes) => ({
   from: changes.mapPos(comment.from, 1),
   to: changes.mapPos(comment.to, 1)
 });
-var restoreCommentEffect = StateEffect2.define({
+var restoreCommentEffect = StateEffect3.define({
   map: mapTrackedComment
 });
 var createComment = (view) => {
@@ -1377,7 +1573,7 @@ var createComment = (view) => {
   }
   return false;
 };
-var optionsFacet = Facet3.define({
+var optionsFacet = Facet4.define({
   combine: (providers) => providers[0]
 });
 var comments = (options = {}) => {
@@ -1392,7 +1588,7 @@ var comments = (options = {}) => {
     //
     // Keymap.
     //
-    options.onCreate ? keymap3.of([
+    options.onCreate ? keymap4.of([
       {
         key: shortcut,
         run: callbackWrapper(createComment)
@@ -1431,7 +1627,7 @@ var comments = (options = {}) => {
     //
     // Track deleted ranges and update ranges for decorations.
     //
-    EditorView6.updateListener.of(({ view, state, changes }) => {
+    EditorView7.updateListener.of(({ view, state, changes }) => {
       let mod = false;
       const { comments: comments2, ...value } = state.field(commentsState);
       changes.iterChanges((from, to, from2, to2) => {
@@ -1463,7 +1659,7 @@ var comments = (options = {}) => {
     //
     // Track selection/proximity.
     //
-    EditorView6.updateListener.of(({ view, state }) => {
+    EditorView7.updateListener.of(({ view, state }) => {
       let min = Infinity;
       const { selection: { current, closest }, comments: comments2 } = state.field(commentsState);
       const { head } = state.selection.main;
@@ -1512,7 +1708,7 @@ var focusComment = (view, id, center = true) => {
       },
       effects: [
         //
-        EditorView6.scrollIntoView(range.from, center ? {
+        EditorView7.scrollIntoView(range.from, center ? {
           y: "center"
         } : void 0),
         setSelection.of({
@@ -1540,14 +1736,14 @@ var useComments = (view, id, comments2 = []) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/cursor-line-margin.ts
-import { Facet as Facet4, Transaction } from "@codemirror/state";
-import { EditorView as EditorView7 } from "@codemirror/view";
-var cursorLineMarginFacet = Facet4.define({
+import { Facet as Facet5, Transaction } from "@codemirror/state";
+import { EditorView as EditorView8 } from "@codemirror/view";
+var cursorLineMarginFacet = Facet5.define({
   combine: (input) => input[0] ?? 3
 });
 var annotation = "cursorLineMargin";
 var lineAtPos = (s, pos) => s.doc.lineAt(pos).number;
-var cursorLineMargin = EditorView7.updateListener.of(({ transactions, state, selectionSet, startState, view }) => {
+var cursorLineMargin = EditorView8.updateListener.of(({ transactions, state, selectionSet, startState, view }) => {
   if (transactions.length < 1 || transactions.some((tr) => tr.isUserEvent(annotation))) {
     return;
   }
@@ -1583,38 +1779,48 @@ var cursorLineMargin = EditorView7.updateListener.of(({ transactions, state, sel
   }
   view.dispatch({
     annotations: Transaction.userEvent.of(annotation),
-    effects: EditorView7.scrollIntoView(s.selection.main.head, {
+    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";
+var dnd = () => {
+  return EditorView9.domEventHandlers({
+    drop: (event, view) => {
+      console.log(event);
+    }
+  });
+};
+
 // packages/ui/react-ui-editor/src/extensions/listener.ts
-import { EditorView as EditorView8 } from "@codemirror/view";
+import { EditorView as EditorView10 } from "@codemirror/view";
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
-  onFocus && extensions.push(EditorView8.focusChangeEffect.of((_, focused) => {
-    onFocus(focused);
+  onFocus && extensions.push(EditorView10.focusChangeEffect.of((_, focusing) => {
+    onFocus(focusing);
     return null;
   }));
-  onChange && extensions.push(EditorView8.updateListener.of((update2) => {
+  onChange && extensions.push(EditorView10.updateListener.of((update2) => {
     onChange(update2.state.doc.toString());
   }));
   return extensions;
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
-import { closeBrackets as closeBrackets2, closeBracketsKeymap } from "@codemirror/autocomplete";
-import { history as history2, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
+import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
+import { history, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
 import { markdownLanguage as markdownLanguage3, markdown } from "@codemirror/lang-markdown";
-import { bracketMatching as bracketMatching2, defaultHighlightStyle as defaultHighlightStyle2, indentOnInput, syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
+import { bracketMatching, defaultHighlightStyle, indentOnInput, syntaxHighlighting } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
 import { searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
-import { oneDarkHighlightStyle as oneDarkHighlightStyle2 } from "@codemirror/theme-one-dark";
-import { crosshairCursor, drawSelection as drawSelection2, dropCursor, EditorView as EditorView9, highlightActiveLine as highlightActiveLine2, keymap as keymap4, placeholder as placeholder2 } from "@codemirror/view";
-import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
+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";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
 import { markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
@@ -1807,19 +2013,17 @@ var markdownHighlightStyle = (readonly) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
 var createMarkdownExtensions = ({ themeMode, placeholder: _placeholder, lineWrapping = true } = {}) => {
   return [
-    lineWrapping && EditorView9.lineWrapping,
+    // TODO(burdon): Reconcile with createBasicExtensions.
+    lineWrapping && EditorView11.lineWrapping,
     EditorState.allowMultipleSelections.of(true),
     EditorState.tabSize.of(2),
-    // https://github.com/codemirror/basic-setup
-    bracketMatching2(),
-    closeBrackets2(),
-    crosshairCursor(),
+    bracketMatching(),
+    closeBrackets(),
     dropCursor(),
-    drawSelection2(),
-    highlightActiveLine2(),
-    history2(),
+    drawSelection(),
+    history(),
     indentOnInput(),
-    _placeholder && placeholder2(_placeholder),
+    _placeholder && placeholder(_placeholder),
     // Main extension.
     // https://github.com/codemirror/lang-markdown
     // https://codemirror.net/5/mode/markdown/index.html (demo).
@@ -1839,10 +2043,10 @@ var createMarkdownExtensions = ({ themeMode, placeholder: _placeholder, lineWrap
       ]
     }),
     // https://github.com/codemirror/theme-one-dark
-    themeMode === "dark" ? syntaxHighlighting2(oneDarkHighlightStyle2) : syntaxHighlighting2(defaultHighlightStyle2),
+    themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
     // Custom styles.
-    syntaxHighlighting2(markdownHighlightStyle()),
-    keymap4.of([
+    syntaxHighlighting(markdownHighlightStyle()),
+    keymap5.of([
       // https://codemirror.net/docs/ref/#commands.indentWithTab
       indentWithTab,
       // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
@@ -1854,22 +2058,22 @@ var createMarkdownExtensions = ({ themeMode, placeholder: _placeholder, lineWrap
       // https://codemirror.net/docs/ref/#commands.standardKeymap
       ...standardKeymap
     ])
-  ].filter(isNotFalsy3);
+  ].filter(isNotFalsy2);
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
 import { syntaxTree } from "@codemirror/language";
-import { RangeSetBuilder, StateEffect as StateEffect3 } from "@codemirror/state";
-import { EditorView as EditorView10, Decoration as Decoration4, WidgetType as WidgetType2, ViewPlugin as ViewPlugin3 } from "@codemirror/view";
+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 WidgetType2 {
+var HorizontalRuleWidget = class extends WidgetType3 {
   toDOM() {
     const el = document.createElement("span");
     el.className = "cm-hr";
     return el;
   }
 };
-var LinkButton = class extends WidgetType2 {
+var LinkButton = class extends WidgetType3 {
   constructor(url, render) {
     super();
     this.url = url;
@@ -1884,7 +2088,7 @@ var LinkButton = class extends WidgetType2 {
     return el;
   }
 };
-var CheckboxWidget = class extends WidgetType2 {
+var CheckboxWidget = class extends WidgetType3 {
   constructor(_checked) {
     super();
     this._checked = _checked;
@@ -1921,23 +2125,23 @@ var CheckboxWidget = class extends WidgetType2 {
     return false;
   }
 };
-var hide = Decoration4.replace({});
-var fencedCodeLine = Decoration4.line({
+var hide = Decoration5.replace({});
+var fencedCodeLine = Decoration5.line({
   class: mx2("cm-code cm-codeblock-line")
 });
-var fencedCodeLineFirst = Decoration4.line({
+var fencedCodeLineFirst = Decoration5.line({
   class: mx2("cm-code cm-codeblock-line", "cm-codeblock-first")
 });
-var fencedCodeLineLast = Decoration4.line({
+var fencedCodeLineLast = Decoration5.line({
   class: mx2("cm-code cm-codeblock-line", "cm-codeblock-last")
 });
-var horizontalRule = Decoration4.replace({
+var horizontalRule = Decoration5.replace({
   widget: new HorizontalRuleWidget()
 });
-var checkedTask = Decoration4.replace({
+var checkedTask = Decoration5.replace({
   widget: new CheckboxWidget(true)
 });
-var uncheckedTask = Decoration4.replace({
+var uncheckedTask = Decoration5.replace({
   widget: new CheckboxWidget(false)
 });
 var editingRange = (state, range, focus) => {
@@ -1952,8 +2156,8 @@ var MarksByParent = /* @__PURE__ */ new Set([
   "SuperscriptMark"
 ]);
 var buildDecorations = (view, options, focus) => {
-  const deco = new RangeSetBuilder();
-  const atomicDeco = new RangeSetBuilder();
+  const deco = new RangeSetBuilder2();
+  const atomicDeco = new RangeSetBuilder2();
   const { state } = view;
   for (const { from, to } of view.visibleRanges) {
     syntaxTree(state).iterate({
@@ -1970,7 +2174,7 @@ var buildDecorations = (view, options, focus) => {
               break;
             }
             const first = block.from <= node.from;
-            const last = block.to >= node.to;
+            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);
@@ -1986,7 +2190,7 @@ var buildDecorations = (view, options, focus) => {
             if (!editing) {
               atomicDeco.add(node.from, marks[0].to, hide);
             }
-            deco.add(marks[0].to, marks[1].from, Decoration4.mark({
+            deco.add(marks[0].to, marks[1].from, Decoration5.mark({
               tagName: "a",
               attributes: {
                 class: "cm-link",
@@ -1996,7 +2200,7 @@ var buildDecorations = (view, options, focus) => {
               }
             }));
             if (!editing) {
-              atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? Decoration4.replace({
+              atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? Decoration5.replace({
                 widget: new LinkButton(url, options.renderLinkButton)
               }) : hide);
             }
@@ -2014,7 +2218,7 @@ var buildDecorations = (view, options, focus) => {
         } 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, Decoration4.mark({
+            atomicDeco.add(node.from - 2, node.from - 1, Decoration5.mark({
               class: "cm-task"
             }));
             atomicDeco.add(node.from, node.to, checked ? checkedTask : uncheckedTask);
@@ -2032,50 +2236,51 @@ var buildDecorations = (view, options, focus) => {
     atomicDeco: atomicDeco.finish()
   };
 };
-var forceUpdate = StateEffect3.define();
+var forceUpdate = StateEffect4.define();
 var decorateMarkdown = (options = {}) => {
   return [
-    ViewPlugin3.fromClass(class {
+    ViewPlugin4.fromClass(class {
       constructor(view) {
-        this.pendingUpdate = -1;
         ({ 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)))) {
+        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);
         }
       }
-      clearUpdate() {
-        if (this.pendingUpdate > -1) {
-          window.clearTimeout(this.pendingUpdate);
-          this.pendingUpdate = -1;
-        }
-      }
+      // 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 = window.setTimeout(() => {
+        this.pendingUpdate = setTimeout(() => {
           view.dispatch({
             effects: forceUpdate.of(null)
           });
-        }, options.selectionChangeDelay ?? 400);
+        }, options.selectionChangeDelay);
+      }
+      clearUpdate() {
+        if (this.pendingUpdate) {
+          clearTimeout(this.pendingUpdate);
+          this.pendingUpdate = void 0;
+        }
       }
       destroy() {
         this.clearUpdate();
       }
     }, {
       provide: (plugin) => [
-        EditorView10.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration4.none),
-        EditorView10.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration4.none),
-        EditorView10.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration4.none)
+        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 = EditorView10.baseTheme({
+var formattingStyles = EditorView12.baseTheme({
   "& .cm-code": {
     fontFamily: getToken("fontFamily.mono", []).join(",")
   },
@@ -2128,7 +2333,7 @@ var formattingStyles = EditorView10.baseTheme({
 import { snippet } from "@codemirror/autocomplete";
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { EditorSelection } from "@codemirror/state";
-import { EditorView as EditorView11, keymap as keymap5 } from "@codemirror/view";
+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;
 var Inline;
@@ -3000,7 +3205,7 @@ var toggleCodeblock = (target) => {
 };
 var formatting = (options = {}) => {
   return [
-    keymap5.of([
+    keymap6.of([
       {
         key: "meta-b",
         run: toggleStrong
@@ -3198,7 +3403,7 @@ var getFormatting = (state) => {
 };
 var useFormattingState = () => {
   const [state, setState] = useState(null);
-  const observer = useMemo(() => EditorView11.updateListener.of((update2) => {
+  const observer = useMemo(() => EditorView13.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       const newState = getFormatting(update2.state);
       if (!state || !compareFormatting(state, newState)) {
@@ -3214,12 +3419,12 @@ var useFormattingState = () => {
 
 // packages/ui/react-ui-editor/src/extensions/markdown/image.ts
 import { syntaxTree as syntaxTree3 } from "@codemirror/language";
-import { StateField as StateField4 } from "@codemirror/state";
-import { Decoration as Decoration5, EditorView as EditorView12, WidgetType as WidgetType3 } from "@codemirror/view";
+import { StateField as StateField5 } from "@codemirror/state";
+import { Decoration as Decoration6, EditorView as EditorView14, WidgetType as WidgetType4 } from "@codemirror/view";
 var image = (options = {}) => {
-  return StateField4.define({
+  return StateField5.define({
     create: (state) => {
-      return Decoration5.set(buildDecorations2(0, state.doc.length, state));
+      return Decoration6.set(buildDecorations2(0, state.doc.length, state));
     },
     update: (value, tr) => {
       if (!tr.docChanged && !tr.selection) {
@@ -3242,7 +3447,7 @@ var image = (options = {}) => {
         add: buildDecorations2(from, to, tr.state)
       });
     },
-    provide: (field) => EditorView12.decorations.from(field)
+    provide: (field) => EditorView14.decorations.from(field)
   });
 };
 var preloaded = /* @__PURE__ */ new Set();
@@ -3264,7 +3469,7 @@ var buildDecorations2 = (from, to, state) => {
           const hide2 = state.readOnly || cursor < node.from || cursor > node.to;
           const url = state.sliceDoc(urlNode.from, urlNode.to);
           preloadImage(url);
-          decorations.push(Decoration5.replace({
+          decorations.push(Decoration6.replace({
             block: true,
             widget: new ImageWidget(url)
           }).range(hide2 ? node.from : node.to, node.to));
@@ -3276,7 +3481,7 @@ var buildDecorations2 = (from, to, state) => {
   });
   return decorations;
 };
-var ImageWidget = class extends WidgetType3 {
+var ImageWidget = class extends WidgetType4 {
   constructor(_url) {
     super();
     this._url = _url;
@@ -3329,17 +3534,17 @@ 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 RangeSetBuilder2, StateField as StateField5 } from "@codemirror/state";
-import { Decoration as Decoration6, EditorView as EditorView13, WidgetType as WidgetType4 } from "@codemirror/view";
+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 StateField5.define({
+  return StateField6.define({
     create: (state) => update(state, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView13.decorations.from(field)
+    provide: (field) => EditorView15.decorations.from(field)
   });
 };
 var update = (state, options) => {
-  const builder = new RangeSetBuilder2();
+  const builder = new RangeSetBuilder3();
   const cursor = state.selection.main.head;
   const tables = [];
   const getTable = () => tables[tables.length - 1];
@@ -3379,16 +3584,16 @@ var update = (state, options) => {
   });
   tables.forEach((table2) => {
     const hide2 = state.readOnly || cursor < table2.from || cursor > table2.to;
-    hide2 && builder.add(table2.from, table2.to, Decoration6.replace({
+    hide2 && builder.add(table2.from, table2.to, Decoration7.replace({
       widget: new TableWidget(table2)
     }));
-    builder.add(table2.from, table2.to, Decoration6.mark({
+    builder.add(table2.from, table2.to, Decoration7.mark({
       class: "cm-table"
     }));
   });
   return builder.finish();
 };
-var TableWidget = class extends WidgetType4 {
+var TableWidget = class extends WidgetType5 {
   constructor(_table) {
     super();
     this._table = _table;
@@ -3455,10 +3660,10 @@ var mention = ({ onSearch }) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/modes.ts
-import { Facet as Facet5 } from "@codemirror/state";
-import { keymap as keymap6 } from "@codemirror/view";
+import { Facet as Facet6 } from "@codemirror/state";
+import { keymap as keymap7 } from "@codemirror/view";
 import { vim } from "@replit/codemirror-vim";
-var editorMode = Facet5.define({
+var editorMode = Facet6.define({
   combine: (modes) => modes[0] ?? {}
 });
 var EditorModes = {
@@ -3469,7 +3674,7 @@ var EditorModes = {
       type: "vim",
       noTabster: true
     }),
-    keymap6.of([
+    keymap7.of([
       {
         key: "Alt-Escape",
         run: (view) => {
@@ -3489,7 +3694,7 @@ var outliner = (options = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/typewriter.ts
-import { keymap as keymap7 } from "@codemirror/view";
+import { keymap as keymap8 } from "@codemirror/view";
 var defaultItems = [
   "hello world!",
   "this is a test.",
@@ -3499,7 +3704,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   let t;
   let idx = 0;
   return [
-    keymap7.of([
+    keymap8.of([
       {
         // Reset.
         key: "alt-meta-'",
@@ -3545,186 +3750,370 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   ];
 };
 
-// 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"
-  },
-  ".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(",")
-  },
-  ".cm-completionMatchedText": {
-    textDecoration: "none"
-  },
+// 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 log3 } from "@dxos/log";
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/awareness-provider.ts";
+var DEBOUNCE_INTERVAL = 100;
+var SpaceAwarenessProvider = class {
+  constructor(params) {
+    this._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) => {
+      log3.debug("failed to query awareness", {
+        err
+      }, {
+        F: __dxlog_file4,
+        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_file4,
+      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_file4,
+      L: 115,
+      S: this,
+      A: [
+        "this._postTask",
+        ""
+      ]
+    });
+    this._postTask.schedule();
+  }
+  _handlePostMessage(message) {
+    invariant2(message.kind === "post", void 0, {
+      F: __dxlog_file4,
+      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;
+    }
+    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
+  ];
+};
+
+// 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 log4 } 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 = {
   //
-  // table
+  // Main layout:
+  // https://codemirror.net/examples/styling
   //
-  ".cm-table *": {
-    fontFamily: `${get4(tokens, "fontFamily.mono", []).join(",")} !important`,
-    textDecoration: "none !important"
+  // <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-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")
+  // 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-table-cell": {
-    padding: "2px 16px 2px 0px"
+  ".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"
   },
   //
-  // image
+  // Cursor
   //
-  ".cm-image": {
-    display: "block",
-    height: "0"
+  "&light .cm-cursor, &light .cm-dropCursor": {
+    borderLeft: "2px solid black"
   },
-  ".cm-image.cm-loaded-image": {
-    height: "auto",
-    borderTop: "0.5rem solid transparent",
-    borderBottom: "0.5rem solid transparent"
+  "&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)")
   },
   //
-  // 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']);
+  // line
   //
-  //   acc[`& .text-${fontSize} + .cm-ySelectionCaret`] = { height };
+  ".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(",")
+  },
+  ".cm-completionMatchedText": {
+    textDecoration: "none"
+  },
+  //
+  // table
+  //
+  ".cm-table *": {
+    fontFamily: `${get4(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")}`,
+    fontWeight: 100,
+    textAlign: "left",
+    color: get4(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;
@@ -3795,139 +4184,360 @@ var codeTheme = {
   }
 };
 
-// packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx";
-var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, scrollTo = EditorView14.scrollIntoView(0), moveToEndOfLine, selection, theme, slots = defaultSlots, extensions = [], scrollPastEnd: _scrollPastEnd, debug }, forwardedRef) => {
-  const tabsterDOMAttribute = useFocusableGroup({
-    tabBehavior: "limited"
-  });
-  const { themeMode } = useThemeContext();
-  const rootRef = useRef(null);
-  const [view, setView] = useState2(null);
-  useImperativeHandle(forwardedRef, () => view, [
-    view
-  ]);
-  useEffect2(() => {
-    if (autoFocus) {
-      view?.focus();
-    }
-  }, [
-    view,
-    autoFocus
-  ]);
+// packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
+var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
+var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions } = {}, deps = []) => {
+  const onUpdate = useRef2();
+  const [view, setView] = useState3();
+  const parentRef = useRef2(null);
   useEffect2(() => {
-    if (!model || !rootRef.current) {
-      return;
-    }
-    const state = EditorState2.create({
-      doc: model.text(),
-      selection,
-      extensions: [
-        // TODO(burdon): Doesn't catch errors in keymap functions.
-        EditorView14.exceptionSink.of((err) => {
-          log3.catch(err, void 0, {
-            F: __dxlog_file4,
-            L: 122,
-            S: void 0,
-            C: (f, a) => f(...a)
-          });
-        }),
-        // Theme.
-        // TODO(burdon): Make base theme configurable.
-        EditorView14.baseTheme(defaultTheme),
-        theme && EditorView14.theme(theme),
-        EditorView14.darkTheme.of(themeMode === "dark"),
-        slots.editor?.className && EditorView14.editorAttributes.of({
-          class: slots.editor.className
-        }),
-        slots.content?.className && EditorView14.contentAttributes.of({
-          class: slots.content.className
-        }),
-        // NOTE: Assumes default line height.
-        _scrollPastEnd && scrollPastEnd(),
-        // Focus.
-        EditorView14.updateListener.of((update2) => {
-          update2.transactions.forEach((transaction) => {
-            if (transaction.isUserEvent("focus.container")) {
-              rootRef.current?.focus();
-            }
-          });
-        }),
-        // State.
-        EditorView14.editable.of(!readonly),
-        EditorState2.readOnly.of(!!readonly),
-        // Storage and replication.
-        // NOTE: This must come before user extensions.
-        model.extension,
-        // Custom.
-        ...extensions
-      ].filter(isNotFalsy4)
-    });
-    const view2 = new EditorView14({
-      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
+    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) => {
+            log4.catch(err, void 0, {
+              F: __dxlog_file5,
+              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);
         }
       });
-    }
-    if (state.facet(editorMode).noTabster) {
-      rootRef.current.removeAttribute("data-tabster");
+      setView(view2);
     }
     return () => {
       view2?.destroy();
-      setView(null);
     };
-  }, [
-    rootRef,
-    extensions,
-    model,
-    readonly,
-    themeMode
-  ]);
-  const handleKeyUp = useCallback((event) => {
-    const { key } = event;
-    switch (key) {
-      case "Enter": {
-        view?.focus();
-        break;
+  }, 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
+    view,
+    autoFocus,
+    selection,
+    scrollTo
   ]);
-  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, theme = textTheme, slots, extensions: _extensions, ...props }, forwardedRef) => {
-  const { themeMode } = useThemeContext();
-  const updatedSlots = defaultsDeep2({}, slots, defaultTextSlots);
-  const extensions = useMemo2(() => [
-    createBasicBundle({
-      themeMode,
-      placeholder: placeholder3,
-      lineWrapping
+  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) => {
+      log4.catch(err, void 0, {
+        F: __dxlog_file5,
+        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_file6 = "/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[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_file6,
+    L: 88,
+    S: void 0,
+    A: [
+      "isAutomergeObject(text)",
+      ""
+    ]
+  });
+  const obj = text;
+  const doc = getRawDoc(obj, [
+    obj.field
+  ]);
+  const peerId = identity?.identityKey.toHex();
+  const { cursorLightValue, cursorDarkValue } = hueTokens[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_file7 = "/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) => {
+          log5.catch(err, void 0, {
+            F: __dxlog_file7,
+            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 ?? []
   ], [
@@ -3947,8 +4557,8 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholde
 });
 var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, theme = markdownTheme, slots, extensions: _extensions, ...props }, forwardedRef) => {
   const { themeMode } = useThemeContext();
-  const updatedSlots = defaultsDeep2({}, slots, defaultMarkdownSlots);
-  const extensions = useMemo2(() => [
+  const updatedSlots = defaultsDeep3({}, slots, defaultMarkdownSlots);
+  const extensions = useMemo3(() => [
     createMarkdownExtensions({
       themeMode,
       placeholder: placeholder3
@@ -3986,7 +4596,7 @@ var defaultMarkdownSlots = {
 // 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 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 = {
@@ -4044,9 +4654,9 @@ var MarkdownHeading = () => {
   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);
+  const suppressNextTooltip = useRef4(false);
+  const [tooltipOpen, setTooltipOpen] = useState6(false);
+  const [selectOpen, setSelectOpen] = useState6(false);
   return /* @__PURE__ */ React2.createElement(Tooltip.Root, {
     open: tooltipOpen,
     onOpenChange: (nextOpen) => {
@@ -4249,384 +4859,6 @@ var Toolbar = {
   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 invariant2 } from "@dxos/invariant";
-import { log as log4 } from "@dxos/log";
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/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) => {
-      log4.debug("failed to query awareness", {
-        err
-      }, {
-        F: __dxlog_file5,
-        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_file5,
-      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_file5,
-      L: 115,
-      S: this,
-      A: [
-        "this._postTask",
-        ""
-      ]
-    });
-    this._postTask.schedule();
-  }
-  _handlePostMessage(message) {
-    invariant2(message.kind === "post", void 0, {
-      F: __dxlog_file5,
-      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/defs.ts
-import { StateField as StateField6 } from "@codemirror/state";
-var modelState = StateField6.define({
-  create: () => void 0,
-  update: (model) => model
-});
-
-// 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 as useRef3, useState as useState4 } from "react";
-var useEditorView = (id) => {
-  const editorRef = useRef3(null);
-  const [prev, setPrev] = useState4([
-    null,
-    ""
-  ]);
-  if (prev[0] !== editorRef.current) {
-    setPrev([
-      editorRef.current,
-      id
-    ]);
-  }
-  return [
-    editorRef,
-    prev[1] !== id
-  ];
-};
-
-// packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
-import { EditorSelection as EditorSelection2, EditorState as EditorState3 } from "@codemirror/state";
-import { EditorView as EditorView15 } from "@codemirror/view";
-import { useEffect as useEffect3, useRef as useRef4, useState as useState5 } from "react";
-import { log as log5 } from "@dxos/log";
-import { isNotFalsy as isNotFalsy5 } from "@dxos/util";
-var __dxlog_file6 = "/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 = useRef4();
-  const [view, setView] = useState5();
-  const parentRef = useRef4(null);
-  useEffect3(() => {
-    let view2;
-    if (parentRef.current) {
-      const state = EditorState3.create({
-        doc,
-        selection,
-        extensions: [
-          // TODO(burdon): Doesn't catch errors in keymap functions.
-          EditorView15.exceptionSink.of((err) => {
-            log5.catch(err, void 0, {
-              F: __dxlog_file6,
-              L: 57,
-              S: void 0,
-              C: (f, a) => f(...a)
-            });
-          }),
-          extensions,
-          EditorView15.updateListener.of(() => {
-            onUpdate.current?.();
-          })
-        ].filter(isNotFalsy5)
-      });
-      view2 = new EditorView15({
-        parent: parentRef.current,
-        scrollTo,
-        state,
-        // NOTE: Uncomment to debug/monitor all transactions.
-        // https://codemirror.net/docs/ref/#view.EditorView.dispatch
-        dispatchTransactions: (trs, view3) => {
-          if (debug) {
-            logChanges(trs);
-          }
-          view3.update(trs);
-        }
-      });
-      setView(view2);
-    }
-    return () => {
-      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
-  };
-};
-var createDataExtensions = ({ readonly = false } = {}) => {
-  return [
-    //
-    EditorState3.readOnly.of(readonly),
-    EditorView15.editable.of(!readonly)
-  ];
-};
-var createThemeExtensions = ({ theme, themeMode, slots } = {}) => {
-  return [
-    //
-    EditorView15.baseTheme(defaultTheme),
-    theme && EditorView15.theme(theme),
-    EditorView15.darkTheme.of(themeMode === "dark"),
-    EditorView15.editorAttributes.of({
-      class: slots?.editor?.className ?? ""
-    }),
-    EditorView15.contentAttributes.of({
-      class: slots?.content?.className ?? ""
-    })
-  ].filter(isNotFalsy5);
-};
-
-// packages/ui/react-ui-editor/src/hooks/useTextModel.ts
-import get5 from "lodash.get";
-import { useState as useState6, useMemo as useMemo3 } 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_file7 = "/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[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) => useMemo3(() => createModel(props), Object.values(props));
-var useInMemoryTextModel = ({ id, defaultContent }) => {
-  const [content, setContent] = useState6(defaultContent ?? "");
-  return {
-    id,
-    content,
-    setContent,
-    text: () => content
-  };
-};
-var createModel = ({ space, identity, text }) => {
-  if (!text) {
-    return void 0;
-  }
-  invariant3(isAutomergeObject(text), void 0, {
-    F: __dxlog_file7,
-    L: 87,
-    S: void 0,
-    A: [
-      "isAutomergeObject(text)",
-      ""
-    ]
-  });
-  const obj = text;
-  const doc = getRawDoc(obj, [
-    obj.field
-  ]);
-  const peerId = identity?.identityKey.toHex();
-  const { cursorLightValue, cursorDarkValue } = hueTokens[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 = [
-    modelState.init(() => model),
-    automerge({
-      handle: doc.handle,
-      path: doc.path
-    })
-  ];
-  if (awarenessProvider2) {
-    extensions.push(awareness(awarenessProvider2));
-  }
-  const model = {
-    id: obj.id,
-    content: doc,
-    text: () => get5(doc.handle.docSync(), doc.path),
-    extension: extensions,
-    peer: identity ? {
-      id: identity.identityKey.toHex(),
-      name: identity.profile?.displayName
-    } : void 0
-  };
-  return model;
-};
 export {
   BaseTextEditor,
   Cursor,
@@ -4655,11 +4887,11 @@ export {
   blast,
   callbackWrapper,
   codeTheme,
+  command,
   comments,
   compareFormatting,
-  createBasicBundle,
+  createBasicExtensions,
   createComment,
-  createDataExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   cursorLineMargin,
@@ -4670,6 +4902,7 @@ export {
   defaultSlots,
   defaultTextSlots,
   defaultTheme,
+  dnd,
   editorFillLayoutEditor,
   editorFillLayoutRoot,
   editorMode,
@@ -4680,7 +4913,7 @@ export {
   getToken,
   image,
   insertTable,
-  keymap8 as keymap,
+  keymap9 as keymap,
   linkTooltip,
   listener,
   logChanges,
@@ -4689,7 +4922,6 @@ export {
   markdownTagsExtensions,
   markdownTheme,
   mention,
-  modelState,
   outliner,
   removeBlockquote,
   removeCodeblock,