@dxos/react-ui-editor 0.8.3-main.672df60 → 0.8.3-staging.0fa589b

package/dist/lib/browser/index.mjs

@@ -35,18 +35,17 @@ var translations_default = [
 
 // packages/ui/react-ui-editor/src/index.ts
 import { EditorState as EditorState4 } from "@codemirror/state";
-import { EditorView as EditorView25, keymap as keymap13 } from "@codemirror/view";
+import { EditorView as EditorView27, keymap as keymap14 } from "@codemirror/view";
 import { tags as tags2 } from "@lezer/highlight";
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 
 // packages/ui/react-ui-editor/src/components/EditorToolbar/EditorToolbar.tsx
 import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import { Rx } from "@effect-rx/rx-react";
-import React3, { memo, useMemo as useMemo3 } from "react";
+import React3, { memo, useMemo as useMemo4 } from "react";
 import { rxFromSignal } from "@dxos/app-graph";
 import { ElevationProvider } from "@dxos/react-ui";
 import { MenuProvider, ToolbarMenu, createGapSeparator, useMenuActions } from "@dxos/react-ui-menu";
-import { textBlockWidth } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/components/EditorToolbar/util.ts
 import { useMemo } from "react";
@@ -517,17 +516,14 @@ var clientRectsFor = (dom) => {
     return [];
   }
 };
-
-// packages/ui/react-ui-editor/src/util/react.tsx
-import React from "react";
-import { createRoot } from "react-dom/client";
-import { ThemeProvider, Tooltip } from "@dxos/react-ui";
-import { defaultTx } from "@dxos/react-ui-theme";
 var createElement = (tag, options, children) => {
   const el = document.createElement(tag);
   if (options?.className) {
     el.className = options.className;
   }
+  if (options?.text) {
+    el.textContent = options.text;
+  }
   if (children) {
     el.append(...Array.isArray(children) ? children : [
       children
@@ -535,6 +531,12 @@ var createElement = (tag, options, children) => {
   }
   return el;
 };
+
+// packages/ui/react-ui-editor/src/util/react.tsx
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { ThemeProvider, Tooltip } from "@dxos/react-ui";
+import { defaultTx } from "@dxos/react-ui-theme";
 var renderRoot = (root, node) => {
   createRoot(root).render(/* @__PURE__ */ React.createElement(ThemeProvider, {
     tx: defaultTx
@@ -1358,6 +1360,7 @@ var closeCommand = (view) => {
 var commandKeyBindings = [
   {
     key: "/",
+    preventDefault: true,
     run: openCommand
   },
   {
@@ -1367,37 +1370,55 @@ var commandKeyBindings = [
 ];
 
 // packages/ui/react-ui-editor/src/extensions/command/command.ts
+import { Prec } from "@codemirror/state";
 import { EditorView as EditorView6, keymap as keymap3 } from "@codemirror/view";
+import { isNonNullable } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/command/hint.ts
 import { RangeSetBuilder as RangeSetBuilder2 } from "@codemirror/state";
 import { Decoration as Decoration3, EditorView as EditorView5, ViewPlugin as ViewPlugin4, WidgetType as WidgetType2 } from "@codemirror/view";
-var hintViewPlugin = ({ onHint }) => ViewPlugin4.fromClass(class {
-  constructor() {
-    this.decorations = Decoration3.none;
-  }
-  update(update2) {
-    const builder = new RangeSetBuilder2();
-    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 Hint(hint)
-          }));
+var hint = ({ delay = 3e3, onHint }) => {
+  return ViewPlugin4.fromClass(class {
+    constructor() {
+      this.decorations = Decoration3.none;
+    }
+    update(update2) {
+      if (this.timeout) {
+        clearTimeout(this.timeout);
+        this.timeout = void 0;
+      }
+      const builder = new RangeSetBuilder2();
+      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) {
+          this.timeout = setTimeout(() => {
+            const hint2 = onHint?.();
+            if (hint2) {
+              const builder2 = new RangeSetBuilder2();
+              builder2.add(selection.from, selection.to, Decoration3.widget({
+                widget: new Hint(hint2)
+              }));
+              this.decorations = builder2.finish();
+              update2.view.update([]);
+            }
+          }, delay);
         }
       }
+      this.decorations = builder.finish();
     }
-    this.decorations = builder.finish();
-  }
-}, {
-  provide: (plugin) => [
-    EditorView5.decorations.of((view) => view.plugin(plugin)?.decorations ?? Decoration3.none)
-  ]
-});
+    destroy() {
+      if (this.timeout) {
+        clearTimeout(this.timeout);
+      }
+    }
+  }, {
+    provide: (plugin) => [
+      EditorView5.decorations.of((view) => view.plugin(plugin)?.decorations ?? Decoration3.none)
+    ]
+  });
+};
 var Hint = class extends WidgetType2 {
   constructor(content) {
     super(), this.content = content;
@@ -1440,28 +1461,267 @@ var Hint = class extends WidgetType2 {
 // packages/ui/react-ui-editor/src/extensions/command/command.ts
 var command = (options = {}) => {
   return [
-    keymap3.of(commandKeyBindings),
+    Prec.highest(keymap3.of(commandKeyBindings)),
     commandConfig.of(options),
     commandState,
-    options.onHint ? hintViewPlugin({
-      onHint: options.onHint
-    }) : [],
-    EditorView6.focusChangeEffect.of((_, focusing) => {
-      return focusing ? closeEffect.of(null) : null;
-    }),
+    options.onHint && hint(options),
+    EditorView6.focusChangeEffect.of((_, focusing) => focusing ? closeEffect.of(null) : null),
     EditorView6.theme({
       ".cm-tooltip": {
         background: "transparent"
       }
     })
+  ].filter(isNonNullable);
+};
+
+// packages/ui/react-ui-editor/src/extensions/command/command-menu.ts
+import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField3, StateEffect as StateEffect3, Prec as Prec2 } from "@codemirror/state";
+import { EditorView as EditorView8, ViewPlugin as ViewPlugin6, Decoration as Decoration5, keymap as keymap4 } from "@codemirror/view";
+
+// packages/ui/react-ui-editor/src/extensions/command/placeholder.ts
+import { Decoration as Decoration4, EditorView as EditorView7, WidgetType as WidgetType3, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
+var placeholder = ({ delay = 3e3, content }) => {
+  const plugin = ViewPlugin5.fromClass(class {
+    constructor() {
+      this.decorations = Decoration4.none;
+    }
+    update(update2) {
+      if (this.timeout) {
+        window.clearTimeout(this.timeout);
+        this.timeout = void 0;
+      }
+      const activeLine = update2.view.state.doc.lineAt(update2.view.state.selection.main.head);
+      const isEmpty = activeLine.text.trim() === "";
+      if (isEmpty) {
+        const lineStart = activeLine.from;
+        this.timeout = setTimeout(() => {
+          this.decorations = Decoration4.set([
+            Decoration4.widget({
+              widget: new Placeholder(content),
+              side: 1
+            }).range(lineStart)
+          ]);
+          update2.view.update([]);
+        }, delay);
+      }
+      this.decorations = Decoration4.none;
+    }
+    destroy() {
+      if (this.timeout) {
+        clearTimeout(this.timeout);
+      }
+    }
+  }, {
+    provide: (plugin2) => {
+      return [
+        EditorView7.decorations.of((view) => view.plugin(plugin2)?.decorations ?? Decoration4.none)
+      ];
+    }
+  });
+  return typeof content === "string" ? [
+    plugin,
+    EditorView7.contentAttributes.of({
+      "aria-placeholder": content
+    })
+  ] : plugin;
+};
+var Placeholder = class extends WidgetType3 {
+  constructor(content) {
+    super(), this.content = content;
+  }
+  toDOM(view) {
+    const wrap = document.createElement("span");
+    wrap.className = "cm-placeholder";
+    wrap.style.pointerEvents = "none";
+    wrap.appendChild(typeof this.content === "string" ? document.createTextNode(this.content) : typeof this.content === "function" ? this.content(view) : this.content.cloneNode(true));
+    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;
+  }
+};
+
+// packages/ui/react-ui-editor/src/extensions/command/command-menu.ts
+var commandMenu = (options) => {
+  const commandMenuPlugin = ViewPlugin6.fromClass(class {
+    constructor(view) {
+      this.view = view;
+      this.decorations = Decoration5.none;
+    }
+    // TODO(wittjosiah): The decorations are repainted on every update, this occasionally causes menu to flicker.
+    update(update2) {
+      const builder = new RangeSetBuilder3();
+      const selection = update2.view.state.selection.main;
+      const { range: activeRange, trigger } = update2.view.state.field(commandMenuState) ?? {};
+      const shouldShowWidget = activeRange && selection.head >= activeRange.from && selection.head <= activeRange.to;
+      if (shouldShowWidget) {
+        builder.add(activeRange.from, activeRange.to, Decoration5.mark({
+          tagName: "dx-ref-tag",
+          class: "cm-ref-tag",
+          attributes: {
+            "data-auto-trigger": "true",
+            "data-trigger": trigger
+          }
+        }));
+      }
+      const activeRangeChanged = update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(commandRangeEffect)));
+      if (activeRange && activeRangeChanged && trigger) {
+        const content = update2.view.state.sliceDoc(activeRange.from + 1, activeRange.to);
+        options.onTextChange?.(trigger, content);
+      }
+      this.decorations = builder.finish();
+    }
+  }, {
+    decorations: (v) => v.decorations
+  });
+  const triggers = Array.isArray(options.trigger) ? options.trigger : [
+    options.trigger
+  ];
+  const commandKeymap = keymap4.of([
+    ...triggers.map((trigger) => ({
+      key: trigger,
+      preventDefault: true,
+      run: (view) => {
+        const selection = view.state.selection.main;
+        const line = view.state.doc.lineAt(selection.head);
+        if (line.text.trim() === "" || selection.head === line.from || selection.head > line.from && line.text[selection.head - line.from - 1] === " ") {
+          view.dispatch({
+            changes: {
+              from: selection.head,
+              insert: trigger
+            },
+            selection: {
+              anchor: selection.head + 1,
+              head: selection.head + 1
+            },
+            effects: commandRangeEffect.of({
+              trigger,
+              range: {
+                from: selection.head,
+                to: selection.head + 1
+              }
+            })
+          });
+          return true;
+        }
+        return false;
+      }
+    })),
+    {
+      key: "Enter",
+      run: (view) => {
+        const activeRange = view.state.field(commandMenuState)?.range;
+        if (activeRange) {
+          view.dispatch({
+            changes: {
+              from: activeRange.from,
+              to: activeRange.to,
+              insert: ""
+            }
+          });
+          options.onEnter?.();
+          return true;
+        }
+        return false;
+      }
+    },
+    {
+      key: "ArrowDown",
+      run: (view) => {
+        const activeRange = view.state.field(commandMenuState)?.range;
+        if (activeRange) {
+          options.onArrowDown?.();
+          return true;
+        }
+        return false;
+      }
+    },
+    {
+      key: "ArrowUp",
+      run: (view) => {
+        const activeRange = view.state.field(commandMenuState)?.range;
+        if (activeRange) {
+          options.onArrowUp?.();
+          return true;
+        }
+        return false;
+      }
+    }
+  ]);
+  const updateListener = EditorView8.updateListener.of((update2) => {
+    const { trigger, range: activeRange } = update2.view.state.field(commandMenuState) ?? {};
+    if (!activeRange || !trigger) {
+      return;
+    }
+    const selection = update2.view.state.selection.main;
+    const firstChar = update2.view.state.doc.sliceString(activeRange.from, activeRange.from + 1);
+    const shouldRemove = firstChar !== trigger || // Trigger deleted.
+    selection.head < activeRange.from || // Cursor moved before the range.
+    selection.head > activeRange.to + 1;
+    const nextRange = shouldRemove ? null : update2.docChanged ? {
+      from: activeRange.from,
+      to: selection.head
+    } : activeRange;
+    if (nextRange !== activeRange) {
+      update2.view.dispatch({
+        effects: commandRangeEffect.of(nextRange ? {
+          trigger,
+          range: nextRange
+        } : null)
+      });
+    }
+    if (shouldRemove) {
+      options.onClose?.();
+    }
+  });
+  return [
+    Prec2.highest(commandKeymap),
+    placeholder(Object.assign({
+      content: `Press '${Array.isArray(options.trigger) ? options.trigger[0] : options.trigger}' for commands`
+    }, options.placeholder)),
+    updateListener,
+    commandMenuState,
+    commandMenuPlugin
   ];
 };
+var commandRangeEffect = StateEffect3.define();
+var commandMenuState = StateField3.define({
+  create: () => null,
+  update: (value, tr) => {
+    let newValue = value;
+    for (const effect of tr.effects) {
+      if (effect.is(commandRangeEffect)) {
+        newValue = effect.value;
+      }
+    }
+    return newValue;
+  }
+});
 
-// packages/ui/react-ui-editor/src/extensions/command/menu.ts
-import { EditorView as EditorView7, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
+// packages/ui/react-ui-editor/src/extensions/command/floating-menu.ts
+import { EditorView as EditorView9, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
 import { addEventListener } from "@dxos/async";
 var floatingMenu = (options = {}) => [
-  ViewPlugin5.fromClass(class {
+  ViewPlugin7.fromClass(class {
     constructor(view) {
       this.view = view;
       const container = view.scrollDOM;
@@ -1526,7 +1786,7 @@ var floatingMenu = (options = {}) => [
       this.rafId = requestAnimationFrame(this.updateButtonPosition.bind(this));
     }
   }),
-  EditorView7.theme({
+  EditorView9.theme({
     ".cm-ref-tag": {
       position: "fixed",
       padding: "0",
@@ -1536,9 +1796,6 @@ var floatingMenu = (options = {}) => [
     "[data-has-focus] & .cm-ref-tag": {
       opacity: "1"
     },
-    "[data-is-attention-source] & .cm-ref-tag": {
-      opacity: "1"
-    },
     ".cm-ref-tag button": {
       display: "grid",
       alignItems: "center",
@@ -1549,13 +1806,114 @@ var floatingMenu = (options = {}) => [
   })
 ];
 
+// packages/ui/react-ui-editor/src/extensions/command/useCommandMenu.ts
+import { useCallback, useMemo as useMemo2, useRef, useState } from "react";
+var useCommandMenu = ({ viewRef, trigger, placeholder: placeholder3, getMenu }) => {
+  const triggerRef = useRef(null);
+  const currentRef = useRef(null);
+  const groupsRef = useRef([]);
+  const [currentItem, setCurrentItem] = useState();
+  const [open, setOpen] = useState(false);
+  const [_, refresh] = useState({});
+  const handleOpenChange = useCallback(async (open2, trigger2) => {
+    if (open2 && trigger2) {
+      groupsRef.current = await getMenu(trigger2);
+    }
+    setOpen(open2);
+    if (!open2) {
+      triggerRef.current = null;
+      setCurrentItem(void 0);
+      viewRef.current?.dispatch({
+        effects: [
+          commandRangeEffect.of(null)
+        ]
+      });
+    }
+  }, [
+    getMenu
+  ]);
+  const handleActivate = useCallback(async (event) => {
+    const item = getItem(groupsRef.current, currentItem);
+    if (item) {
+      currentRef.current = item;
+    }
+    triggerRef.current = event.trigger;
+    const triggerKey = event.trigger.getAttribute("data-trigger");
+    if (!open && triggerKey) {
+      await handleOpenChange(true, triggerKey);
+    }
+  }, [
+    open,
+    handleOpenChange
+  ]);
+  const handleSelect = useCallback((item) => {
+    const view = viewRef.current;
+    if (!view) {
+      return;
+    }
+    const selection = view.state.selection.main;
+    void item.onSelect?.(view, selection.head);
+  }, []);
+  const serializedTrigger = Array.isArray(trigger) ? trigger.join(",") : trigger;
+  const _commandMenu = useMemo2(() => {
+    return commandMenu({
+      trigger,
+      placeholder: placeholder3,
+      onClose: () => handleOpenChange(false),
+      onArrowDown: () => {
+        setCurrentItem((currentItem2) => {
+          const next = getNextItem(groupsRef.current, currentItem2);
+          currentRef.current = next;
+          return next.id;
+        });
+      },
+      onArrowUp: () => {
+        setCurrentItem((currentItem2) => {
+          const previous = getPreviousItem(groupsRef.current, currentItem2);
+          currentRef.current = previous;
+          return previous.id;
+        });
+      },
+      onEnter: () => {
+        if (currentRef.current) {
+          handleSelect(currentRef.current);
+        }
+      },
+      onTextChange: async (trigger2, text) => {
+        groupsRef.current = await getMenu(trigger2, text);
+        const firstItem = groupsRef.current.filter((group) => group.items.length > 0)[0]?.items[0];
+        if (firstItem) {
+          setCurrentItem(firstItem.id);
+          currentRef.current = firstItem;
+        }
+        refresh({});
+      }
+    });
+  }, [
+    handleOpenChange,
+    getMenu,
+    serializedTrigger,
+    placeholder3
+  ]);
+  return {
+    commandMenu: _commandMenu,
+    currentItem,
+    groupsRef,
+    ref: triggerRef,
+    open,
+    onActivate: handleActivate,
+    onOpenChange: setOpen,
+    onSelect: handleSelect
+  };
+};
+
 // packages/ui/react-ui-editor/src/extensions/command/typeahead.ts
-import { EditorSelection, Prec, RangeSetBuilder as RangeSetBuilder3 } from "@codemirror/state";
-import { Decoration as Decoration4, keymap as keymap4, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
+import { EditorSelection, Prec as Prec3, RangeSetBuilder as RangeSetBuilder4 } from "@codemirror/state";
+import { Decoration as Decoration6, keymap as keymap5, ViewPlugin as ViewPlugin8 } from "@codemirror/view";
 var typeahead = ({ onComplete } = {}) => {
-  let hint;
+  let hint2;
   const complete = (view) => {
-    if (!hint) {
+    if (!hint2) {
       return false;
     }
     const selection = view.state.selection.main;
@@ -1564,30 +1922,30 @@ var typeahead = ({ onComplete } = {}) => {
         {
           from: selection.from,
           to: selection.to,
-          insert: hint
+          insert: hint2
         }
       ],
-      selection: EditorSelection.cursor(selection.from + hint.length)
+      selection: EditorSelection.cursor(selection.from + hint2.length)
     });
     return true;
   };
   return [
-    ViewPlugin6.fromClass(class {
+    ViewPlugin8.fromClass(class {
       constructor() {
-        this.decorations = Decoration4.none;
+        this.decorations = Decoration6.none;
       }
       update(update2) {
-        const builder = new RangeSetBuilder3();
+        const builder = new RangeSetBuilder4();
         const selection = update2.view.state.selection.main;
         const line = update2.view.state.doc.lineAt(selection.from);
         if (selection.from === selection.to && selection.from === line.to) {
           const str = update2.state.sliceDoc(line.from, selection.from);
-          hint = onComplete?.({
+          hint2 = onComplete?.({
             line: str
           });
-          if (hint) {
-            builder.add(selection.from, selection.to, Decoration4.widget({
-              widget: new Hint(hint)
+          if (hint2) {
+            builder.add(selection.from, selection.to, Decoration6.widget({
+              widget: new Hint(hint2)
             }));
           }
         }
@@ -1597,7 +1955,7 @@ var typeahead = ({ onComplete } = {}) => {
       decorations: (v) => v.decorations
     }),
     // Keys.
-    Prec.highest(keymap4.of([
+    Prec3.highest(keymap5.of([
       {
         key: "Tab",
         preventDefault: true,
@@ -1634,17 +1992,17 @@ var matchCompletion = (completion, word) => {
 
 // packages/ui/react-ui-editor/src/extensions/comments.ts
 import { invertedEffects } from "@codemirror/commands";
-import { StateEffect as StateEffect3, StateField as StateField3 } from "@codemirror/state";
-import { hoverTooltip, keymap as keymap6, Decoration as Decoration5, EditorView as EditorView9, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
+import { StateEffect as StateEffect4, StateField as StateField4 } from "@codemirror/state";
+import { hoverTooltip, keymap as keymap7, Decoration as Decoration7, EditorView as EditorView11, ViewPlugin as ViewPlugin9 } from "@codemirror/view";
 import sortBy from "lodash.sortby";
 import { useEffect } from "react";
 import { debounce as debounce2 } from "@dxos/async";
 import { log as log4 } from "@dxos/log";
-import { isNonNullable } from "@dxos/util";
+import { isNonNullable as isNonNullable2 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/selection.ts
 import { Transaction } from "@codemirror/state";
-import { EditorView as EditorView8, keymap as keymap5 } from "@codemirror/view";
+import { EditorView as EditorView10, keymap as keymap6 } from "@codemirror/view";
 import { debounce } from "@dxos/async";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { isNotFalsy } from "@dxos/util";
@@ -1655,7 +2013,7 @@ var createEditorStateTransaction = ({ scrollTo, selection }) => {
   return {
     selection,
     scrollIntoView: !scrollTo,
-    effects: scrollTo ? EditorView8.scrollIntoView(scrollTo, {
+    effects: scrollTo ? EditorView10.scrollIntoView(scrollTo, {
       yMargin: 96
     }) : void 0,
     annotations: Transaction.userEvent.of(stateRestoreAnnotation)
@@ -1697,7 +2055,7 @@ var selectionState = ({ getState, setState } = {}) => {
     //     setStateDebounced(id, {});
     //   },
     // }),
-    EditorView8.updateListener.of(({ view, transactions }) => {
+    EditorView10.updateListener.of(({ view, transactions }) => {
       const id = view.state.facet(documentId);
       if (!id || transactions.some((tr) => tr.isUserEvent(stateRestoreAnnotation))) {
         return;
@@ -1720,7 +2078,7 @@ var selectionState = ({ getState, setState } = {}) => {
         }
       }
     }),
-    getState && keymap5.of([
+    getState && keymap6.of([
       {
         key: "ctrl-r",
         run: (view) => {
@@ -1737,10 +2095,10 @@ var selectionState = ({ getState, setState } = {}) => {
 
 // packages/ui/react-ui-editor/src/extensions/comments.ts
 var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
-var setComments = StateEffect3.define();
-var setSelection = StateEffect3.define();
-var setCommentState = StateEffect3.define();
-var commentsState = StateField3.define({
+var setComments = StateEffect4.define();
+var setSelection = StateEffect4.define();
+var setCommentState = StateEffect4.define();
+var commentsState = StateField4.define({
   create: (state) => ({
     id: state.facet(documentId),
     comments: [],
@@ -1765,7 +2123,7 @@ var commentsState = StateField3.define({
             comment,
             range
           };
-        }).filter(isNonNullable);
+        }).filter(isNonNullable2);
         return {
           ...value,
           comments: commentStates
@@ -1778,7 +2136,7 @@ var commentsState = StateField3.define({
     return value;
   }
 });
-var styles2 = EditorView9.theme({
+var styles2 = EditorView11.theme({
   ".cm-comment, .cm-comment-current": {
     margin: "0 -3px",
     padding: "3px",
@@ -1791,14 +2149,14 @@ var styles2 = EditorView9.theme({
     textDecoration: "underline"
   }
 });
-var createCommentMark = (id, isCurrent) => Decoration5.mark({
+var createCommentMark = (id, isCurrent) => Decoration7.mark({
   class: isCurrent ? "cm-comment-current" : "cm-comment",
   attributes: {
     "data-testid": "cm-comment",
     "data-comment-id": id
   }
 });
-var commentsDecorations = EditorView9.decorations.compute([
+var commentsDecorations = EditorView11.decorations.compute([
   commentsState
 ], (state) => {
   const { selection: { current }, comments: comments2 } = state.field(commentsState);
@@ -1817,11 +2175,11 @@ var commentsDecorations = EditorView9.decorations.compute([
     }
     const mark = createCommentMark(comment.comment.id, comment.comment.id === current);
     return mark.range(range.from, range.to);
-  }).filter(isNonNullable);
-  return Decoration5.set(decorations2);
+  }).filter(isNonNullable2);
+  return Decoration7.set(decorations2);
 });
-var commentClickedEffect = StateEffect3.define();
-var handleCommentClick = EditorView9.domEventHandlers({
+var commentClickedEffect = StateEffect4.define();
+var handleCommentClick = EditorView11.domEventHandlers({
   click: (event, view) => {
     let target = event.target;
     const editorRoot = view.dom;
@@ -1860,7 +2218,7 @@ var trackPastedComments = (onUpdate) => {
     }
   };
   return [
-    EditorView9.domEventHandlers({
+    EditorView11.domEventHandlers({
       cut: handleTrack,
       copy: handleTrack
     }),
@@ -1882,7 +2240,7 @@ var trackPastedComments = (onUpdate) => {
       return effects;
     }),
     // Handle paste or the undo of comment deletion.
-    EditorView9.updateListener.of((update2) => {
+    EditorView11.updateListener.of((update2) => {
       const restore = [];
       for (let i = 0; i < update2.transactions.length; i++) {
         const tr = update2.transactions[i];
@@ -1938,7 +2296,7 @@ var mapTrackedComment = (comment, changes) => ({
   from: changes.mapPos(comment.from, 1),
   to: changes.mapPos(comment.to, 1)
 });
-var restoreCommentEffect = StateEffect3.define({
+var restoreCommentEffect = StateEffect4.define({
   map: mapTrackedComment
 });
 var createComment = (view) => {
@@ -1983,7 +2341,7 @@ var comments = (options = {}) => {
     //
     // Keymap.
     //
-    options.onCreate && keymap6.of([
+    options.onCreate && keymap7.of([
       {
         key: shortcut,
         run: callbackWrapper(createComment)
@@ -2024,7 +2382,7 @@ var comments = (options = {}) => {
     //
     // Track deleted ranges and update ranges for decorations.
     //
-    EditorView9.updateListener.of(({ view, state, changes }) => {
+    EditorView11.updateListener.of(({ view, state, changes }) => {
       let mod = false;
       const { comments: comments2, ...value } = state.field(commentsState);
       changes.iterChanges((from, to, from2, to2) => {
@@ -2056,7 +2414,7 @@ var comments = (options = {}) => {
     //
     // Track selection/proximity.
     //
-    EditorView9.updateListener.of(({ view, state }) => {
+    EditorView11.updateListener.of(({ view, state }) => {
       let min = Infinity;
       const { selection: { current, closest }, comments: comments2 } = state.field(commentsState);
       const { head } = state.selection.main;
@@ -2090,7 +2448,7 @@ var comments = (options = {}) => {
       }
     }),
     options.onUpdate && trackPastedComments(options.onUpdate)
-  ].filter(isNonNullable);
+  ].filter(isNonNullable2);
 };
 var scrollThreadIntoView = (view, id, center = true) => {
   const comment = view.state.field(commentsState).comments.find((range2) => range2.comment.id === id);
@@ -2110,7 +2468,7 @@ var scrollThreadIntoView = (view, id, center = true) => {
           anchor: range.from
         } : void 0,
         effects: [
-          needsScroll ? EditorView9.scrollIntoView(range.from, center ? {
+          needsScroll ? EditorView11.scrollIntoView(range.from, center ? {
             y: "center"
           } : void 0) : [],
           needsSelectionUpdate ? setSelection.of({
@@ -2140,7 +2498,7 @@ var ExternalCommentSync = class {
     this.unsubscribe = subscribe(updateComments);
   }
 };
-var createExternalCommentSync = (id, subscribe, getComments) => ViewPlugin7.fromClass(class {
+var createExternalCommentSync = (id, subscribe, getComments) => ViewPlugin9.fromClass(class {
   constructor(view) {
     return new ExternalCommentSync(view, id, subscribe, getComments);
   }
@@ -2162,20 +2520,20 @@ var useComments = (view, id, comments2) => {
 
 // packages/ui/react-ui-editor/src/extensions/debug.ts
 import { syntaxTree } from "@codemirror/language";
-import { StateField as StateField4 } from "@codemirror/state";
+import { StateField as StateField5 } from "@codemirror/state";
 var debugNodeLogger = (log9 = console.log) => {
   const logTokens = (state) => syntaxTree(state).iterate({
     enter: (node) => log9(node.type)
   });
-  return StateField4.define({
+  return StateField5.define({
     create: (state) => logTokens(state),
     update: (_, tr) => logTokens(tr.state)
   });
 };
 
 // packages/ui/react-ui-editor/src/extensions/dnd.ts
-import { dropCursor, EditorView as EditorView10 } from "@codemirror/view";
-var styles3 = EditorView10.theme({
+import { dropCursor, EditorView as EditorView12 } from "@codemirror/view";
+var styles3 = EditorView12.theme({
   ".cm-dropCursor": {
     borderLeft: "2px solid var(--dx-accentText)",
     color: "var(--dx-accentText)",
@@ -2189,7 +2547,7 @@ var dropFile = (options = {}) => {
   return [
     styles3,
     dropCursor(),
-    EditorView10.domEventHandlers({
+    EditorView12.domEventHandlers({
       drop: (event, view) => {
         event.preventDefault();
         const files = event.dataTransfer?.files;
@@ -2216,7 +2574,7 @@ import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@cod
 import { searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
 import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
-import { EditorView as EditorView12, ViewPlugin as ViewPlugin8, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap7, lineNumbers, placeholder, scrollPastEnd } from "@codemirror/view";
+import { EditorView as EditorView15, ViewPlugin as ViewPlugin10, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap8, lineNumbers, placeholder as placeholder2, scrollPastEnd } from "@codemirror/view";
 import defaultsDeep2 from "lodash.defaultsdeep";
 import merge from "lodash.merge";
 import { generateName } from "@dxos/display-name";
@@ -2224,10 +2582,10 @@ import { log as log5 } from "@dxos/log";
 import { hexToHue, isNotFalsy as isNotFalsy2 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/focus.ts
-import { StateEffect as StateEffect4, StateField as StateField5 } from "@codemirror/state";
-import { EditorView as EditorView11 } from "@codemirror/view";
-var focusEffect = StateEffect4.define();
-var focusField = StateField5.define({
+import { StateEffect as StateEffect5, StateField as StateField6 } from "@codemirror/state";
+import { EditorView as EditorView13 } from "@codemirror/view";
+var focusEffect = StateEffect5.define();
+var focusField = StateField6.define({
   create: () => false,
   update: (value, tr) => {
     for (const effect of tr.effects) {
@@ -2240,7 +2598,7 @@ var focusField = StateField5.define({
 });
 var focus = [
   focusField,
-  EditorView11.domEventHandlers({
+  EditorView13.domEventHandlers({
     focus: (event, view) => {
       setTimeout(() => view.dispatch({
         effects: focusEffect.of(true)
@@ -2254,6 +2612,10 @@ var focus = [
   })
 ];
 
+// packages/ui/react-ui-editor/src/defaults.ts
+import { EditorView as EditorView14 } from "@codemirror/view";
+import { mx as mx2 } from "@dxos/react-ui-theme";
+
 // packages/ui/react-ui-editor/src/styles/markdown.ts
 import { mx } from "@dxos/react-ui-theme";
 var headings = {
@@ -2495,6 +2857,30 @@ var defaultTheme = {
   }
 };
 
+// packages/ui/react-ui-editor/src/defaults.ts
+var editorWidth = "!mli-auto is-full max-is-[min(50rem,100%-4rem)]";
+var editorSlots = {
+  scroll: {
+    className: "pbs-2"
+  },
+  content: {
+    className: editorWidth
+  }
+};
+var editorGutter = EditorView14.theme({
+  ".cm-gutters": {
+    background: "var(--dx-baseSurface)",
+    paddingRight: "1rem"
+  }
+});
+var editorMonospace = EditorView14.theme({
+  ".cm-content": {
+    fontFamily: fontMono
+  }
+});
+var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
+var stackItemContentEditorClassNames = (role) => mx2("attention-surface dx-focus-ring-inset data-[toolbar=disabled]:pbs-2", role === "section" ? "[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24" : "min-bs-0");
+
 // packages/ui/react-ui-editor/src/extensions/factories.ts
 var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
 var preventNewline = EditorState.transactionFilter.of((tr) => tr.newDoc.lines > 1 ? [] : tr);
@@ -2519,10 +2905,10 @@ var createBasicExtensions = (_props) => {
   const props = defaultsDeep2({}, _props, defaultBasicOptions);
   return [
     // NOTE: Doesn't catch errors in keymap functions.
-    EditorView12.exceptionSink.of((err) => {
+    EditorView15.exceptionSink.of((err) => {
       log5.catch(err, void 0, {
         F: __dxlog_file8,
-        L: 98,
+        L: 100,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2534,18 +2920,22 @@ var createBasicExtensions = (_props) => {
     props.drawSelection && drawSelection({
       cursorBlinkRate: 1200
     }),
-    props.editable !== void 0 && EditorView12.editable.of(props.editable),
+    props.editable !== void 0 && EditorView15.editable.of(props.editable),
     props.focus && focus,
     props.highlightActiveLine && highlightActiveLine(),
     props.history && history(),
-    props.lineNumbers && lineNumbers(),
-    props.lineWrapping && EditorView12.lineWrapping,
-    props.placeholder && placeholder(props.placeholder),
+    props.lineNumbers && [
+      lineNumbers(),
+      editorGutter
+    ],
+    props.lineWrapping && EditorView15.lineWrapping,
+    props.monospace && editorMonospace,
+    props.placeholder && placeholder2(props.placeholder),
     props.readOnly !== void 0 && EditorState.readOnly.of(props.readOnly),
     props.scrollPastEnd && scrollPastEnd(),
     props.tabSize && EditorState.tabSize.of(props.tabSize),
     // https://codemirror.net/docs/ref/#view.KeyBinding
-    keymap7.of([
+    keymap8.of([
       ...(props.keymap && keymaps[props.keymap]) ?? [],
       // NOTE: Tabs are also configured by markdown extension.
       // https://codemirror.net/docs/ref/#commands.indentWithTab
@@ -2576,17 +2966,17 @@ var defaultThemeSlots = {
 var createThemeExtensions = ({ themeMode, styles: styles4, syntaxHighlighting: _syntaxHighlighting, slots: _slots } = {}) => {
   const slots = defaultsDeep2({}, _slots, defaultThemeSlots);
   return [
-    EditorView12.darkTheme.of(themeMode === "dark"),
-    EditorView12.baseTheme(styles4 ? merge({}, defaultTheme, styles4) : defaultTheme),
+    EditorView15.darkTheme.of(themeMode === "dark"),
+    EditorView15.baseTheme(styles4 ? merge({}, defaultTheme, styles4) : defaultTheme),
     // https://github.com/codemirror/theme-one-dark
     _syntaxHighlighting && (themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)),
-    slots.editor?.className && EditorView12.editorAttributes.of({
+    slots.editor?.className && EditorView15.editorAttributes.of({
       class: slots.editor.className
     }),
-    slots.content?.className && EditorView12.contentAttributes.of({
+    slots.content?.className && EditorView15.contentAttributes.of({
       class: slots.content.className
     }),
-    slots.scroll?.className && ViewPlugin8.fromClass(class {
+    slots.scroll?.className && ViewPlugin10.fromClass(class {
       constructor(view) {
         view.scrollDOM.classList.add(slots.scroll.className);
       }
@@ -2617,7 +3007,7 @@ var createDataExtensions = ({ id, text, space, identity }) => {
 
 // packages/ui/react-ui-editor/src/extensions/folding.tsx
 import { codeFolding, foldGutter } from "@codemirror/language";
-import { EditorView as EditorView13 } from "@codemirror/view";
+import { EditorView as EditorView16 } from "@codemirror/view";
 import React2 from "react";
 import { Icon } from "@dxos/react-ui";
 var folding = (_props = {}) => [
@@ -2641,7 +3031,7 @@ var folding = (_props = {}) => [
       }));
     }
   }),
-  EditorView13.theme({
+  EditorView16.theme({
     ".cm-foldGutter": {
       opacity: 0.3,
       transition: "opacity 0.3s",
@@ -2654,27 +3044,27 @@ var folding = (_props = {}) => [
 ];
 
 // packages/ui/react-ui-editor/src/extensions/hashtag.tsx
-import { Decoration as Decoration6, EditorView as EditorView14, MatchDecorator, ViewPlugin as ViewPlugin9, WidgetType as WidgetType3 } from "@codemirror/view";
-import { getHashColor, mx as mx2 } from "@dxos/react-ui-theme";
-var TagWidget = class extends WidgetType3 {
+import { Decoration as Decoration8, EditorView as EditorView17, MatchDecorator, ViewPlugin as ViewPlugin11, WidgetType as WidgetType4 } from "@codemirror/view";
+import { getHashColor, mx as mx3 } from "@dxos/react-ui-theme";
+var TagWidget = class extends WidgetType4 {
   constructor(_text) {
     super(), this._text = _text;
   }
   toDOM() {
     const span = document.createElement("span");
-    span.className = mx2("cm-tag", getHashColor(this._text).tag);
+    span.className = mx3("cm-tag", getHashColor(this._text).tag);
     span.textContent = this._text;
     return span;
   }
 };
 var tagMatcher = new MatchDecorator({
   regexp: /#(\w+)\W/g,
-  decoration: (match) => Decoration6.replace({
+  decoration: (match) => Decoration8.replace({
     widget: new TagWidget(match[1])
   })
 });
 var hashtag = () => [
-  ViewPlugin9.fromClass(class {
+  ViewPlugin11.fromClass(class {
     constructor(view) {
       this.tags = tagMatcher.createDeco(view);
     }
@@ -2683,11 +3073,11 @@ var hashtag = () => [
     }
   }, {
     decorations: (instance) => instance.tags,
-    provide: (plugin) => EditorView14.atomicRanges.of((view) => {
-      return view.plugin(plugin)?.tags || Decoration6.none;
+    provide: (plugin) => EditorView17.atomicRanges.of((view) => {
+      return view.plugin(plugin)?.tags || Decoration8.none;
     })
   }),
-  EditorView14.theme({
+  EditorView17.theme({
     ".cm-tag": {
       borderRadius: "4px",
       marginRight: "6px",
@@ -2742,14 +3132,14 @@ var schemaLinter = (validate) => (view) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/listener.ts
-import { EditorView as EditorView15 } from "@codemirror/view";
+import { EditorView as EditorView18 } from "@codemirror/view";
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
-  onFocus && extensions.push(EditorView15.focusChangeEffect.of((_, focusing) => {
+  onFocus && extensions.push(EditorView18.focusChangeEffect.of((_, focusing) => {
     onFocus(focusing);
     return null;
   }));
-  onChange && extensions.push(EditorView15.updateListener.of((update2) => {
+  onChange && extensions.push(EditorView18.updateListener.of((update2) => {
     onChange(update2.state.doc.toString(), update2.state.facet(documentId));
   }));
   return extensions;
@@ -2759,8 +3149,8 @@ var listener = ({ onFocus, onChange }) => {
 import { snippet } from "@codemirror/autocomplete";
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { EditorSelection as EditorSelection2 } from "@codemirror/state";
-import { EditorView as EditorView16, keymap as keymap8 } from "@codemirror/view";
-import { useMemo as useMemo2 } from "react";
+import { EditorView as EditorView19, keymap as keymap9 } from "@codemirror/view";
+import { useMemo as useMemo3 } from "react";
 var formattingEquals = (a, b) => a.blockType === b.blockType && a.strong === b.strong && a.emphasis === b.emphasis && a.strikethrough === b.strikethrough && a.code === b.code && a.link === b.link && a.listStyle === b.listStyle && a.blockQuote === b.blockQuote;
 var Inline = /* @__PURE__ */ function(Inline2) {
   Inline2[Inline2["Strong"] = 0] = "Strong";
@@ -3647,7 +4037,7 @@ var toggleCodeblock = (target) => {
 };
 var formattingKeymap = (_options = {}) => {
   return [
-    keymap8.of([
+    keymap9.of([
       {
         key: "meta-b",
         run: toggleStrong
@@ -3848,7 +4238,7 @@ var getFormatting = (state) => {
   };
 };
 var useFormattingState = (state) => {
-  return useMemo2(() => EditorView16.updateListener.of((update2) => {
+  return useMemo3(() => EditorView19.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       Object.entries(getFormatting(update2.state)).forEach(([key, active]) => {
         state[key] = active;
@@ -3912,8 +4302,7 @@ import { defaultKeymap as defaultKeymap2, indentWithTab as indentWithTab2 } from
 import { markdownLanguage as markdownLanguage3, markdown } from "@codemirror/lang-markdown";
 import { syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
-import { lintKeymap } from "@codemirror/lint";
-import { keymap as keymap9 } from "@codemirror/view";
+import { keymap as keymap10 } from "@codemirror/view";
 import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
@@ -4120,21 +4509,20 @@ var createMarkdownExtensions = (options = {}) => {
     }),
     // Custom styles.
     syntaxHighlighting2(markdownHighlightStyle()),
-    keymap9.of([
+    keymap10.of([
       // https://codemirror.net/docs/ref/#commands.indentWithTab
       options.indentWithTab !== false && indentWithTab2,
       // https://codemirror.net/docs/ref/#commands.defaultKeymap
       ...defaultKeymap2,
-      ...completionKeymap2,
-      ...lintKeymap
+      ...completionKeymap2
     ].filter(isNotFalsy3))
   ];
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/debug.ts
 import { syntaxTree as syntaxTree3 } from "@codemirror/language";
-import { StateField as StateField6 } from "@codemirror/state";
-var debugTree = (cb) => StateField6.define({
+import { StateField as StateField7 } from "@codemirror/state";
+var debugTree = (cb) => StateField7.define({
   create: (state) => cb(convertTreeToJson(state)),
   update: (value, tr) => cb(convertTreeToJson(tr.state))
 });
@@ -4160,17 +4548,17 @@ var convertTreeToJson = (state) => {
 
 // packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
 import { syntaxTree as syntaxTree7 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder5, StateEffect as StateEffect5 } from "@codemirror/state";
-import { EditorView as EditorView20, Decoration as Decoration9, WidgetType as WidgetType6, ViewPlugin as ViewPlugin11 } from "@codemirror/view";
+import { RangeSetBuilder as RangeSetBuilder6, StateEffect as StateEffect6 } from "@codemirror/state";
+import { EditorView as EditorView23, Decoration as Decoration11, WidgetType as WidgetType7, ViewPlugin as ViewPlugin13 } from "@codemirror/view";
 import { invariant as invariant4 } from "@dxos/invariant";
-import { mx as mx3 } from "@dxos/react-ui-theme";
+import { mx as mx4 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/changes.ts
 import { syntaxTree as syntaxTree4 } from "@codemirror/language";
 import { Transaction as Transaction2 } from "@codemirror/state";
-import { ViewPlugin as ViewPlugin10 } from "@codemirror/view";
+import { ViewPlugin as ViewPlugin12 } from "@codemirror/view";
 var adjustChanges = () => {
-  return ViewPlugin10.fromClass(class {
+  return ViewPlugin12.fromClass(class {
     update(update2) {
       const tree = syntaxTree4(update2.state);
       const adjustments = [];
@@ -4311,13 +4699,13 @@ var getValidUrl = (str) => {
 
 // packages/ui/react-ui-editor/src/extensions/markdown/image.ts
 import { syntaxTree as syntaxTree5 } from "@codemirror/language";
-import { StateField as StateField7 } from "@codemirror/state";
-import { Decoration as Decoration7, EditorView as EditorView17, WidgetType as WidgetType4 } from "@codemirror/view";
+import { StateField as StateField8 } from "@codemirror/state";
+import { Decoration as Decoration9, EditorView as EditorView20, WidgetType as WidgetType5 } from "@codemirror/view";
 var image = (_options = {}) => {
   return [
-    StateField7.define({
+    StateField8.define({
       create: (state) => {
-        return Decoration7.set(buildDecorations(0, state.doc.length, state));
+        return Decoration9.set(buildDecorations(0, state.doc.length, state));
       },
       update: (value, tr) => {
         if (!tr.docChanged && !tr.selection) {
@@ -4340,7 +4728,7 @@ var image = (_options = {}) => {
           add: buildDecorations(from, to, tr.state)
         });
       },
-      provide: (field) => EditorView17.decorations.from(field)
+      provide: (field) => EditorView20.decorations.from(field)
     })
   ];
 };
@@ -4358,7 +4746,7 @@ var buildDecorations = (from, to, state) => {
             return;
           }
           preloadImage(url);
-          decorations2.push(Decoration7.replace({
+          decorations2.push(Decoration9.replace({
             block: true,
             widget: new ImageWidget(url)
           }).range(hide2 ? node.from : node.to, node.to));
@@ -4378,7 +4766,7 @@ var preloadImage = (url) => {
     preloaded.add(url);
   }
 };
-var ImageWidget = class extends WidgetType4 {
+var ImageWidget = class extends WidgetType5 {
   constructor(_url) {
     super(), this._url = _url;
   }
@@ -4399,10 +4787,10 @@ var ImageWidget = class extends WidgetType4 {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/styles.ts
-import { EditorView as EditorView18 } from "@codemirror/view";
+import { EditorView as EditorView21 } from "@codemirror/view";
 var bulletListIndentationWidth = 24;
 var orderedListIndentationWidth = 36;
-var formattingStyles = EditorView18.theme({
+var formattingStyles = EditorView21.theme({
   /**
   * Horizontal rule.
   */
@@ -4523,17 +4911,17 @@ var formattingStyles = EditorView18.theme({
 
 // packages/ui/react-ui-editor/src/extensions/markdown/table.ts
 import { syntaxTree as syntaxTree6 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder4, StateField as StateField8 } from "@codemirror/state";
-import { Decoration as Decoration8, EditorView as EditorView19, WidgetType as WidgetType5 } from "@codemirror/view";
+import { RangeSetBuilder as RangeSetBuilder5, StateField as StateField9 } from "@codemirror/state";
+import { Decoration as Decoration10, EditorView as EditorView22, WidgetType as WidgetType6 } from "@codemirror/view";
 var table = (options = {}) => {
-  return StateField8.define({
+  return StateField9.define({
     create: (state) => update(state, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView19.decorations.from(field)
+    provide: (field) => EditorView22.decorations.from(field)
   });
 };
 var update = (state, _options) => {
-  const builder = new RangeSetBuilder4();
+  const builder = new RangeSetBuilder5();
   const cursor = state.selection.main.head;
   const tables = [];
   const getTable = () => tables[tables.length - 1];
@@ -4574,19 +4962,19 @@ var update = (state, _options) => {
   tables.forEach((table2) => {
     const replace = state.readOnly || cursor < table2.from || cursor > table2.to;
     if (replace) {
-      builder.add(table2.from, table2.to, Decoration8.replace({
+      builder.add(table2.from, table2.to, Decoration10.replace({
         block: true,
         widget: new TableWidget(table2)
       }));
     } else {
-      builder.add(table2.from, table2.to, Decoration8.mark({
+      builder.add(table2.from, table2.to, Decoration10.mark({
         class: "cm-table"
       }));
     }
   });
   return builder.finish();
 };
-var TableWidget = class extends WidgetType5 {
+var TableWidget = class extends WidgetType6 {
   constructor(_table) {
     super(), this._table = _table;
   }
@@ -4627,14 +5015,14 @@ var Unicode = {
   bulletSmall: "\u2219",
   bulletSquare: "\u2B1D"
 };
-var HorizontalRuleWidget = class extends WidgetType6 {
+var HorizontalRuleWidget = class extends WidgetType7 {
   toDOM() {
     const el = document.createElement("span");
     el.className = "cm-hr";
     return el;
   }
 };
-var LinkButton = class extends WidgetType6 {
+var LinkButton = class extends WidgetType7 {
   constructor(url, render) {
     super(), this.url = url, this.render = render;
   }
@@ -4650,7 +5038,7 @@ var LinkButton = class extends WidgetType6 {
     return el;
   }
 };
-var CheckboxWidget = class extends WidgetType6 {
+var CheckboxWidget = class extends WidgetType7 {
   constructor(_checked) {
     super(), this._checked = _checked;
   }
@@ -4694,7 +5082,7 @@ var CheckboxWidget = class extends WidgetType6 {
     return false;
   }
 };
-var TextWidget = class extends WidgetType6 {
+var TextWidget = class extends WidgetType7 {
   constructor(text, className) {
     super(), this.text = text, this.className = className;
   }
@@ -4707,29 +5095,29 @@ var TextWidget = class extends WidgetType6 {
     return el;
   }
 };
-var hide = Decoration9.replace({});
-var blockQuote = Decoration9.line({
+var hide = Decoration11.replace({});
+var blockQuote = Decoration11.line({
   class: "cm-blockquote"
 });
-var fencedCodeLine = Decoration9.line({
+var fencedCodeLine = Decoration11.line({
   class: "cm-code cm-codeblock-line"
 });
-var fencedCodeLineFirst = Decoration9.line({
-  class: mx3("cm-code cm-codeblock-line", "cm-codeblock-start")
+var fencedCodeLineFirst = Decoration11.line({
+  class: mx4("cm-code cm-codeblock-line", "cm-codeblock-start")
 });
-var fencedCodeLineLast = Decoration9.line({
-  class: mx3("cm-code cm-codeblock-line", "cm-codeblock-end")
+var fencedCodeLineLast = Decoration11.line({
+  class: mx4("cm-code cm-codeblock-line", "cm-codeblock-end")
 });
 var commentBlockLine = fencedCodeLine;
 var commentBlockLineFirst = fencedCodeLineFirst;
 var commentBlockLineLast = fencedCodeLineLast;
-var horizontalRule = Decoration9.replace({
+var horizontalRule = Decoration11.replace({
   widget: new HorizontalRuleWidget()
 });
-var checkedTask = Decoration9.replace({
+var checkedTask = Decoration11.replace({
   widget: new CheckboxWidget(true)
 });
-var uncheckedTask = Decoration9.replace({
+var uncheckedTask = Decoration11.replace({
   widget: new CheckboxWidget(false)
 });
 var editingRange = (state, range, focus2) => {
@@ -4745,8 +5133,8 @@ var autoHideTags = /* @__PURE__ */ new Set([
   "SuperscriptMark"
 ]);
 var buildDecorations2 = (view, options, focus2) => {
-  const deco = new RangeSetBuilder5();
-  const atomicDeco = new RangeSetBuilder5();
+  const deco = new RangeSetBuilder6();
+  const atomicDeco = new RangeSetBuilder6();
   const { state } = view;
   const headerLevels = [];
   const getHeaderLevels = (node, level) => {
@@ -4833,7 +5221,7 @@ var buildDecorations2 = (view, options, focus2) => {
           } else {
             const num = headers.slice(from - 1).map((level2) => level2?.number ?? 0).join(".") + " ";
             if (num.length) {
-              atomicDeco.add(mark.from, mark.from + len, Decoration9.replace({
+              atomicDeco.add(mark.from, mark.from + len, Decoration11.replace({
                 widget: new TextWidget(num, theme.heading(level))
               }));
             }
@@ -4858,7 +5246,7 @@ var buildDecorations2 = (view, options, focus2) => {
         if (node.from === line.to - 1) {
           return false;
         }
-        deco.add(line.from, line.from, Decoration9.line({
+        deco.add(line.from, line.from, Decoration11.line({
           class: "cm-list-item",
           attributes: {
             style: `padding-left: ${offset}px; text-indent: -${width}px;`
@@ -4875,7 +5263,7 @@ var buildDecorations2 = (view, options, focus2) => {
         const label = list.type === "OrderedList" ? `${++list.number}.` : Unicode.bulletSmall;
         const line = state.doc.lineAt(node.from);
         const to = state.doc.sliceString(node.to, node.to + 1) === " " ? node.to + 1 : node.to;
-        atomicDeco.add(line.from, to, Decoration9.replace({
+        atomicDeco.add(line.from, to, Decoration11.replace({
           widget: new TextWidget(label, list.type === "OrderedList" ? "cm-list-mark cm-list-mark-ordered" : "cm-list-mark cm-list-mark-bullet")
         }));
         break;
@@ -4962,7 +5350,7 @@ var buildDecorations2 = (view, options, focus2) => {
           if (!editing) {
             atomicDeco.add(node.from, marks[0].to, hide);
           }
-          deco.add(marks[0].to, marks[1].from, Decoration9.mark({
+          deco.add(marks[0].to, marks[1].from, Decoration11.mark({
             tagName: "a",
             attributes: {
               class: "cm-link",
@@ -4972,7 +5360,7 @@ var buildDecorations2 = (view, options, focus2) => {
             }
           }));
           if (!editing) {
-            atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? Decoration9.replace({
+            atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? Decoration11.replace({
               widget: new LinkButton(url, options.renderLinkButton)
             }) : hide);
           }
@@ -5027,10 +5415,10 @@ var buildDecorations2 = (view, options, focus2) => {
     atomicDeco: atomicDeco.finish()
   };
 };
-var forceUpdate = StateEffect5.define();
+var forceUpdate = StateEffect6.define();
 var decorateMarkdown = (options = {}) => {
   return [
-    ViewPlugin11.fromClass(class {
+    ViewPlugin13.fromClass(class {
       constructor(view) {
         ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(view, options, view.hasFocus));
       }
@@ -5062,9 +5450,9 @@ var decorateMarkdown = (options = {}) => {
       }
     }, {
       provide: (plugin) => [
-        EditorView20.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration9.none),
-        EditorView20.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration9.none),
-        EditorView20.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration9.none)
+        EditorView23.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration11.none),
+        EditorView23.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration11.none),
+        EditorView23.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration11.none)
       ]
     }),
     image(),
@@ -5155,7 +5543,7 @@ var mention = ({ debug, onSearch }) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/modes.ts
-import { keymap as keymap10 } from "@codemirror/view";
+import { keymap as keymap11 } from "@codemirror/view";
 import { vim } from "@replit/codemirror-vim";
 import { vscodeKeymap } from "@replit/codemirror-vscode-keymap";
 import { Schema } from "effect";
@@ -5179,7 +5567,7 @@ var InputModeExtensions = {
     editorInputMode.of({
       type: "vscode"
     }),
-    keymap10.of(vscodeKeymap)
+    keymap11.of(vscodeKeymap)
   ],
   vim: [
     // https://github.com/replit/codemirror-vim
@@ -5188,7 +5576,7 @@ var InputModeExtensions = {
       type: "vim",
       noTabster: true
     }),
-    keymap10.of([
+    keymap11.of([
       {
         key: "Alt-Escape",
         run: (view) => {
@@ -5204,14 +5592,14 @@ var InputModeExtensions = {
 import { indentMore } from "@codemirror/commands";
 import { getIndentUnit } from "@codemirror/language";
 import { EditorSelection as EditorSelection3 } from "@codemirror/state";
-import { keymap as keymap11 } from "@codemirror/view";
+import { keymap as keymap12 } from "@codemirror/view";
 
 // packages/ui/react-ui-editor/src/extensions/outliner/selection.ts
 import { Compartment, Facet as Facet3 } from "@codemirror/state";
 
 // packages/ui/react-ui-editor/src/extensions/outliner/tree.ts
 import { syntaxTree as syntaxTree9 } from "@codemirror/language";
-import { StateField as StateField9 } from "@codemirror/state";
+import { StateField as StateField10 } from "@codemirror/state";
 import { Facet as Facet2 } from "@codemirror/state";
 import { invariant as invariant5 } from "@dxos/invariant";
 var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/outliner/tree.ts";
@@ -5309,6 +5697,7 @@ var traverse = (root, cb) => {
         return value;
       }
     }
+    return void 0;
   };
   return t(root, root.type === "root" ? -1 : 0);
 };
@@ -5366,7 +5755,7 @@ var outlinerTree = (options = {}) => {
           case "BulletList": {
             invariant5(current, void 0, {
               F: __dxlog_file11,
-              L: 217,
+              L: 219,
               S: void 0,
               A: [
                 "current",
@@ -5383,7 +5772,7 @@ var outlinerTree = (options = {}) => {
           case "ListItem": {
             invariant5(parent, void 0, {
               F: __dxlog_file11,
-              L: 226,
+              L: 228,
               S: void 0,
               A: [
                 "parent",
@@ -5425,7 +5814,7 @@ var outlinerTree = (options = {}) => {
           case "ListMark": {
             invariant5(current, void 0, {
               F: __dxlog_file11,
-              L: 270,
+              L: 272,
               S: void 0,
               A: [
                 "current",
@@ -5439,7 +5828,7 @@ var outlinerTree = (options = {}) => {
           case "Task": {
             invariant5(current, void 0, {
               F: __dxlog_file11,
-              L: 276,
+              L: 278,
               S: void 0,
               A: [
                 "current",
@@ -5452,7 +5841,7 @@ var outlinerTree = (options = {}) => {
           case "TaskMarker": {
             invariant5(current, void 0, {
               F: __dxlog_file11,
-              L: 281,
+              L: 283,
               S: void 0,
               A: [
                 "current",
@@ -5468,7 +5857,7 @@ var outlinerTree = (options = {}) => {
         if (node.name === "BulletList") {
           invariant5(parent, void 0, {
             F: __dxlog_file11,
-            L: 289,
+            L: 291,
             S: void 0,
             A: [
               "parent",
@@ -5482,7 +5871,7 @@ var outlinerTree = (options = {}) => {
     });
     invariant5(tree, void 0, {
       F: __dxlog_file11,
-      L: 296,
+      L: 298,
       S: void 0,
       A: [
         "tree",
@@ -5492,7 +5881,7 @@ var outlinerTree = (options = {}) => {
     return tree;
   };
   return [
-    StateField9.define({
+    StateField10.define({
       create: (state) => {
         return buildTree(state);
       },
@@ -5666,7 +6055,7 @@ var toggleTask = (view) => {
   }
   return true;
 };
-var commands = () => keymap11.of([
+var commands = () => keymap12.of([
   //
   // Indentation.
   //
@@ -5772,18 +6161,18 @@ var commands = () => keymap11.of([
 ]);
 
 // packages/ui/react-ui-editor/src/extensions/outliner/outliner.ts
-import { Prec as Prec2 } from "@codemirror/state";
-import { Decoration as Decoration10, EditorView as EditorView21, ViewPlugin as ViewPlugin13 } from "@codemirror/view";
-import { mx as mx4 } from "@dxos/react-ui-theme";
+import { Prec as Prec4 } from "@codemirror/state";
+import { Decoration as Decoration12, EditorView as EditorView24, ViewPlugin as ViewPlugin15 } from "@codemirror/view";
+import { mx as mx5 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/extensions/outliner/editor.ts
 import { EditorSelection as EditorSelection4, EditorState as EditorState2 } from "@codemirror/state";
-import { ViewPlugin as ViewPlugin12 } from "@codemirror/view";
+import { ViewPlugin as ViewPlugin14 } from "@codemirror/view";
 import { log as log7 } from "@dxos/log";
 var __dxlog_file12 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/outliner/editor.ts";
 var LIST_ITEM_REGEX = /^\s*- (\[ \]|\[x\])? /;
 var initialize = () => {
-  return ViewPlugin12.fromClass(class {
+  return ViewPlugin14.fromClass(class {
     constructor(view) {
       const first = view.state.doc.lineAt(0);
       const text = view.state.sliceDoc(first.from, first.to);
@@ -5968,7 +6357,7 @@ var editor = () => [
 // packages/ui/react-ui-editor/src/extensions/outliner/outliner.ts
 var outliner = (options = {}) => [
   // Commands.
-  Prec2.highest(commands()),
+  Prec4.highest(commands()),
   // Selection.
   selectionCompartment.of(selectionFacet.of([])),
   // State.
@@ -5984,14 +6373,14 @@ var outliner = (options = {}) => [
     listPaddingLeft: 8
   }),
   // Researve space for menu.
-  EditorView21.contentAttributes.of({
+  EditorView24.contentAttributes.of({
     class: "is-full !mr-[3rem]"
   })
 ];
 var decorations = () => [
-  ViewPlugin13.fromClass(class {
+  ViewPlugin15.fromClass(class {
     constructor(view) {
-      this.decorations = Decoration10.none;
+      this.decorations = Decoration12.none;
       this.updateDecorations(view.state, view);
     }
     update(update2) {
@@ -6013,18 +6402,18 @@ var decorations = () => [
           const lineFrom = doc.lineAt(item.contentRange.from);
           const lineTo = doc.lineAt(item.contentRange.to);
           const isSelected = selection.includes(item.index) || item === current;
-          decorations2.push(Decoration10.line({
-            class: mx4("cm-list-item", lineFrom.number === line.number && "cm-list-item-start", lineTo.number === line.number && "cm-list-item-end", isSelected && (hasFocus ? "cm-list-item-focused" : "cm-list-item-selected"))
+          decorations2.push(Decoration12.line({
+            class: mx5("cm-list-item", lineFrom.number === line.number && "cm-list-item-start", lineTo.number === line.number && "cm-list-item-end", isSelected && (hasFocus ? "cm-list-item-focused" : "cm-list-item-selected"))
           }).range(line.from, line.from));
         }
       }
-      this.decorations = Decoration10.set(decorations2);
+      this.decorations = Decoration12.set(decorations2);
     }
   }, {
     decorations: (v) => v.decorations
   }),
   // Theme.
-  EditorView21.theme(Object.assign({
+  EditorView24.theme(Object.assign({
     ".cm-list-item": {
       borderLeftWidth: "1px",
       borderRightWidth: "1px",
@@ -6053,9 +6442,6 @@ var decorations = () => [
     },
     "[data-has-focus] & .cm-list-item-selected": {
       borderColor: "var(--dx-separator)"
-    },
-    "[data-is-attention-source] & .cm-list-item-selected": {
-      borderColor: "var(--dx-separator)"
     }
   }))
 ];
@@ -6063,29 +6449,19 @@ var decorations = () => [
 // packages/ui/react-ui-editor/src/extensions/preview/preview.ts
 import "@dxos/lit-ui/dx-ref-tag.pcss";
 import { syntaxTree as syntaxTree10 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder6, StateField as StateField10 } from "@codemirror/state";
-import { Decoration as Decoration11, EditorView as EditorView22, WidgetType as WidgetType7 } from "@codemirror/view";
+import { RangeSetBuilder as RangeSetBuilder7, StateField as StateField11 } from "@codemirror/state";
+import { Decoration as Decoration13, EditorView as EditorView25, WidgetType as WidgetType8 } from "@codemirror/view";
 var preview = (options = {}) => {
   return [
     // NOTE: Atomic block decorations must be created from a state field, now a widget, otherwise it results in the following error:
     // "Block decorations may not be specified via plugins"
-    StateField10.define({
+    StateField11.define({
       create: (state) => buildDecorations3(state, options),
       update: (_, tr) => buildDecorations3(tr.state, options),
       provide: (field) => [
-        EditorView22.decorations.from(field),
-        EditorView22.atomicRanges.of((view) => view.state.field(field))
+        EditorView25.decorations.from(field),
+        EditorView25.atomicRanges.of((view) => view.state.field(field))
       ]
-    }),
-    EditorView22.theme({
-      ".cm-preview-block": {
-        marginLeft: "-1rem",
-        marginRight: "-1rem",
-        padding: "1rem",
-        borderRadius: "0.5rem",
-        background: "var(--dx-modalSurface)",
-        border: "1px solid var(--dx-separator)"
-      }
     })
   ];
 };
@@ -6103,7 +6479,7 @@ var getLinkRef = (state, node) => {
   }
 };
 var buildDecorations3 = (state, options) => {
-  const builder = new RangeSetBuilder6();
+  const builder = new RangeSetBuilder7();
   syntaxTree10(state).iterate({
     enter: (node) => {
       switch (node.name) {
@@ -6114,7 +6490,7 @@ var buildDecorations3 = (state, options) => {
         case "Link": {
           const link = getLinkRef(state, node.node);
           if (link) {
-            builder.add(node.from, node.to, Decoration11.replace({
+            builder.add(node.from, node.to, Decoration13.replace({
               widget: new PreviewInlineWidget(options, link)
             }));
           }
@@ -6126,8 +6502,8 @@ var buildDecorations3 = (state, options) => {
         //
         case "Image": {
           const link = getLinkRef(state, node.node);
-          if (options.renderBlock && link) {
-            builder.add(node.from, node.to, Decoration11.replace({
+          if (options.addBlockContainer && options.removeBlockContainer && link) {
+            builder.add(node.from, node.to, Decoration13.replace({
               block: true,
               // atomic: true,
               widget: new PreviewBlockWidget(options, link)
@@ -6140,7 +6516,7 @@ var buildDecorations3 = (state, options) => {
   });
   return builder.finish();
 };
-var PreviewInlineWidget = class extends WidgetType7 {
+var PreviewInlineWidget = class extends WidgetType8 {
   constructor(_options, _link) {
     super(), this._options = _options, this._link = _link;
   }
@@ -6157,7 +6533,7 @@ var PreviewInlineWidget = class extends WidgetType7 {
     return root;
   }
 };
-var PreviewBlockWidget = class extends WidgetType7 {
+var PreviewBlockWidget = class extends WidgetType8 {
   constructor(_options, _link) {
     super(), this._options = _options, this._link = _link;
   }
@@ -6169,54 +6545,17 @@ var PreviewBlockWidget = class extends WidgetType7 {
   }
   toDOM(view) {
     const root = document.createElement("div");
-    root.classList.add("cm-preview-block");
-    const handleAction = (action) => {
-      const pos = view.posAtDOM(root);
-      const node = syntaxTree10(view.state).resolve(pos + 1).node.parent;
-      if (!node) {
-        return;
-      }
-      const link = getLinkRef(view.state, node);
-      if (link?.ref !== action.link.ref) {
-        return;
-      }
-      switch (action.type) {
-        // TODO(burdon): Should we dispatch to the view or mutate the document? (i.e., handle externally?)
-        // Insert ref text.
-        case "insert": {
-          view.dispatch({
-            changes: {
-              from: node.from,
-              to: node.to,
-              insert: action.target.text
-            }
-          });
-          break;
-        }
-        // Remove ref.
-        case "delete": {
-          view.dispatch({
-            changes: {
-              from: node.from,
-              to: node.to
-            }
-          });
-          break;
-        }
-      }
-    };
-    this._options.renderBlock(root, {
-      readonly: view.state.readOnly,
-      link: this._link,
-      onAction: handleAction,
-      onLookup: this._options.onLookup
-    }, view);
+    root.classList.add("cm-preview-block", "density-coarse");
+    this._options.addBlockContainer?.(this._link, root);
     return root;
   }
+  destroy() {
+    this._options.removeBlockContainer?.(this._link);
+  }
 };
 
 // packages/ui/react-ui-editor/src/extensions/typewriter.ts
-import { keymap as keymap12 } from "@codemirror/view";
+import { keymap as keymap13 } from "@codemirror/view";
 var defaultItems = [
   "hello world!",
   "this is a test.",
@@ -6226,7 +6565,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   let t;
   let idx = 0;
   return [
-    keymap12.of([
+    keymap13.of([
       {
         // Reset.
         key: "alt-meta-'",
@@ -6569,32 +6908,6 @@ var createViewMode = (state, onViewModeChange) => {
   };
 };
 
-// packages/ui/react-ui-editor/src/defaults.ts
-import { EditorView as EditorView23 } from "@codemirror/view";
-import { mx as mx5 } from "@dxos/react-ui-theme";
-var editorWidth = "!mli-auto is-full max-is-[min(50rem,100%-4rem)]";
-var editorSlots = {
-  scroll: {
-    className: "pbs-2"
-  },
-  content: {
-    className: editorWidth
-  }
-};
-var editorGutter = EditorView23.theme({
-  ".cm-gutters": {
-    paddingRight: "1rem"
-  }
-});
-var editorMonospace = EditorView23.theme({
-  ".cm-content": {
-    fontFamily: fontMono
-  }
-});
-var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
-var stackItemContentEditorClassNames = (role) => mx5("attention-surface dx-focus-ring-inset data-[toolbar=disabled]:pbs-2", role === "section" ? "[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24" : "min-bs-0");
-var stackItemContentToolbarClassNames = (role) => mx5("relative z-[1] flex is-full bg-toolbarSurface border-be border-subduedSeparator", role === "section" && "sticky block-start-0 -mbe-px min-is-0");
-
 // packages/ui/react-ui-editor/src/components/EditorToolbar/EditorToolbar.tsx
 var createToolbar = ({ getView, state, customActions, ...features }) => {
   return Rx.make((get2) => {
@@ -6650,7 +6963,7 @@ var createToolbar = ({ getView, state, customActions, ...features }) => {
   });
 };
 var useEditorToolbarActionGraph = (props) => {
-  const menuCreator = useMemo3(() => createToolbar({
+  const menuCreator = useMemo4(() => createToolbar({
     getView: props.getView,
     state: props.state,
     customActions: props.customActions,
@@ -6679,45 +6992,332 @@ var EditorToolbar = /* @__PURE__ */ memo(({ classNames, attendableId, role, ...p
   var _effect = _useSignals();
   try {
     const menuProps = useEditorToolbarActionGraph(props);
-    return /* @__PURE__ */ React3.createElement("div", {
-      role: "none",
-      className: stackItemContentToolbarClassNames(role)
-    }, /* @__PURE__ */ React3.createElement(ElevationProvider, {
+    return /* @__PURE__ */ React3.createElement(ElevationProvider, {
       elevation: role === "section" ? "positioned" : "base"
     }, /* @__PURE__ */ React3.createElement(MenuProvider, {
       ...menuProps,
       attendableId
     }, /* @__PURE__ */ React3.createElement(ToolbarMenu, {
-      classNames: [
-        textBlockWidth,
-        classNames
-      ]
-    }))));
+      classNames,
+      textBlockWidth: true
+    })));
   } finally {
     _effect.f();
   }
 });
 
-// packages/ui/react-ui-editor/src/components/Popover/RefPopover.tsx
+// packages/ui/react-ui-editor/src/components/Popover/CommandMenu.tsx
 import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
+import React4, { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2 } from "react";
+import { Icon as Icon2, Popover, toLocalizedString, useThemeContext, useTranslation } from "@dxos/react-ui";
+var CommandMenu = ({ groups, currentItem, onSelect }) => {
+  var _effect = _useSignals2();
+  try {
+    const { tx } = useThemeContext();
+    const groupsWithItems = groups.filter((group) => group.items.length > 0);
+    return /* @__PURE__ */ React4.createElement(Popover.Portal, null, /* @__PURE__ */ React4.createElement(Popover.Content, {
+      align: "start",
+      onOpenAutoFocus: (event) => event.preventDefault(),
+      classNames: tx("menu.content", "menu--exotic-unfocusable", {
+        elevation: "positioned"
+      }, [
+        "max-h-[300px] overflow-y-auto"
+      ])
+    }, /* @__PURE__ */ React4.createElement(Popover.Viewport, {
+      classNames: tx("menu.viewport", "menu__viewport--exotic-unfocusable", {})
+    }, /* @__PURE__ */ React4.createElement("ul", null, groupsWithItems.map((group, index) => /* @__PURE__ */ React4.createElement(React4.Fragment, {
+      key: group.id
+    }, /* @__PURE__ */ React4.createElement(CommandGroup, {
+      group,
+      currentItem,
+      onSelect
+    }), index < groupsWithItems.length - 1 && /* @__PURE__ */ React4.createElement("div", {
+      className: tx("menu.separator", "menu__item", {})
+    })))))));
+  } finally {
+    _effect.f();
+  }
+};
+var CommandGroup = ({ group, currentItem, onSelect }) => {
+  var _effect = _useSignals2();
+  try {
+    const { tx } = useThemeContext();
+    const { t } = useTranslation();
+    return /* @__PURE__ */ React4.createElement(React4.Fragment, null, group.label && /* @__PURE__ */ React4.createElement("div", {
+      className: tx("menu.groupLabel", "menu__group__label", {})
+    }, /* @__PURE__ */ React4.createElement("span", null, toLocalizedString(group.label, t))), group.items.map((item) => /* @__PURE__ */ React4.createElement(CommandItem, {
+      key: item.id,
+      item,
+      current: currentItem === item.id,
+      onSelect
+    })));
+  } finally {
+    _effect.f();
+  }
+};
+var CommandItem = ({ item, current, onSelect }) => {
+  var _effect = _useSignals2();
+  try {
+    const ref = useRef2(null);
+    const { tx } = useThemeContext();
+    const { t } = useTranslation();
+    const handleSelect = useCallback2(() => onSelect(item), [
+      item,
+      onSelect
+    ]);
+    useEffect2(() => {
+      if (current && ref.current) {
+        ref.current.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest"
+        });
+      }
+    }, [
+      current
+    ]);
+    return /* @__PURE__ */ React4.createElement("li", {
+      ref,
+      className: tx("menu.item", "menu__item--exotic-unfocusable", {}, [
+        current && "bg-hoverSurface"
+      ]),
+      onClick: handleSelect
+    }, item.icon && /* @__PURE__ */ React4.createElement(Icon2, {
+      icon: item.icon,
+      size: 5
+    }), /* @__PURE__ */ React4.createElement("span", {
+      className: "grow truncate"
+    }, toLocalizedString(item.label, t)));
+  } finally {
+    _effect.f();
+  }
+};
+var getItem = (groups, id) => {
+  return groups.flatMap((group) => group.items).find((item) => item.id === id);
+};
+var getNextItem = (groups, id) => {
+  const items = groups.flatMap((group) => group.items);
+  const index = items.findIndex((item) => item.id === id);
+  return items[(index + 1) % items.length];
+};
+var getPreviousItem = (groups, id) => {
+  const items = groups.flatMap((group) => group.items);
+  const index = items.findIndex((item) => item.id === id);
+  return items[(index - 1 + items.length) % items.length];
+};
+var filterItems = (groups, filter) => {
+  return groups.map((group) => ({
+    ...group,
+    items: group.items.filter(filter)
+  }));
+};
+var insertAtCursor = (view, head, insert) => {
+  view.dispatch({
+    changes: {
+      from: head,
+      to: head,
+      insert
+    },
+    selection: {
+      anchor: head + insert.length,
+      head: head + insert.length
+    }
+  });
+};
+var insertAtLineStart = (view, head, insert) => {
+  const line = view.state.doc.lineAt(head);
+  if (line.from === head) {
+    insertAtCursor(view, head, insert);
+  } else {
+    insert = "\n" + insert;
+    view.dispatch({
+      changes: {
+        from: line.to,
+        to: line.to,
+        insert
+      },
+      selection: {
+        anchor: line.to + insert.length,
+        head: line.to + insert.length
+      }
+    });
+  }
+};
+var coreSlashCommands = {
+  id: "markdown",
+  label: "Markdown",
+  items: [
+    {
+      id: "heading-1",
+      label: "Heading 1",
+      icon: "ph--text-h-one--regular",
+      onSelect: (view, head) => insertAtLineStart(view, head, "# ")
+    },
+    {
+      id: "heading-2",
+      label: "Heading 2",
+      icon: "ph--text-h-two--regular",
+      onSelect: (view, head) => insertAtLineStart(view, head, "## ")
+    },
+    {
+      id: "heading-3",
+      label: "Heading 3",
+      icon: "ph--text-h-three--regular",
+      onSelect: (view, head) => insertAtLineStart(view, head, "### ")
+    },
+    {
+      id: "heading-4",
+      label: "Heading 4",
+      icon: "ph--text-h-four--regular",
+      onSelect: (view, head) => insertAtLineStart(view, head, "#### ")
+    },
+    {
+      id: "heading-5",
+      label: "Heading 5",
+      icon: "ph--text-h-five--regular",
+      onSelect: (view, head) => insertAtLineStart(view, head, "##### ")
+    },
+    {
+      id: "heading-6",
+      label: "Heading 6",
+      icon: "ph--text-h-six--regular",
+      onSelect: (view, head) => insertAtLineStart(view, head, "###### ")
+    },
+    {
+      id: "bullet-list",
+      label: "Bullet List",
+      icon: "ph--list-bullets--regular",
+      onSelect: (view, head) => insertAtLineStart(view, head, "- ")
+    },
+    {
+      id: "numbered-list",
+      label: "Numbered List",
+      icon: "ph--list-numbers--regular",
+      onSelect: (view, head) => insertAtLineStart(view, head, "1. ")
+    },
+    {
+      id: "task-list",
+      label: "Task List",
+      icon: "ph--list-checks--regular",
+      onSelect: (view, head) => insertAtLineStart(view, head, "- [ ] ")
+    },
+    {
+      id: "quote",
+      label: "Quote",
+      icon: "ph--quotes--regular",
+      onSelect: (view, head) => insertAtLineStart(view, head, "> ")
+    },
+    {
+      id: "code-block",
+      label: "Code Block",
+      icon: "ph--code-block--regular",
+      onSelect: (view, head) => insertAtLineStart(view, head, "```\n\n```")
+    },
+    {
+      id: "table",
+      label: "Table",
+      icon: "ph--table--regular",
+      onSelect: (view, head) => insertAtLineStart(view, head, "| | | |\n|---|---|---|\n| | | |")
+    }
+  ]
+};
+var linkSlashCommands = {
+  id: "link",
+  label: "Link",
+  items: [
+    {
+      id: "inline-link",
+      label: "Inline link",
+      icon: "ph--link--regular",
+      onSelect: (view, head) => view.dispatch({
+        changes: {
+          from: head,
+          insert: "@"
+        },
+        selection: {
+          anchor: head + 1,
+          head: head + 1
+        },
+        effects: commandRangeEffect.of({
+          trigger: "@",
+          range: {
+            from: head,
+            to: head + 1
+          }
+        })
+      })
+    },
+    {
+      id: "block-embed",
+      label: "Block embed",
+      icon: "ph--lego--regular",
+      onSelect: (view, head) => view.dispatch({
+        changes: {
+          from: head,
+          insert: "@@"
+        },
+        selection: {
+          anchor: head + 2,
+          head: head + 2
+        },
+        effects: commandRangeEffect.of({
+          trigger: "@",
+          range: {
+            from: head,
+            to: head + 2
+          }
+        })
+      })
+    }
+  ]
+};
+
+// packages/ui/react-ui-editor/src/components/Popover/RefPopover.tsx
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
 import { createContext } from "@radix-ui/react-context";
-import React4, { useRef, useState, useEffect as useEffect2, useCallback } from "react";
+import React5, { useRef as useRef3, useState as useState2, useEffect as useEffect3, useCallback as useCallback3, forwardRef } from "react";
 import { addEventListener as addEventListener2 } from "@dxos/async";
-import { Popover } from "@dxos/react-ui";
+import { Popover as Popover2 } from "@dxos/react-ui";
 var customEventOptions = {
   capture: true,
   passive: false
 };
+var RefPopover = /* @__PURE__ */ forwardRef(({ children, open, onOpenChange, modal, onActivate }, ref) => {
+  var _effect = _useSignals3();
+  try {
+    const [rootRef, setRootRef] = useState2(null);
+    useEffect3(() => {
+      if (!rootRef || !onActivate) {
+        return;
+      }
+      return addEventListener2(rootRef, "dx-ref-tag-activate", onActivate, customEventOptions);
+    }, [
+      rootRef,
+      onActivate
+    ]);
+    return /* @__PURE__ */ React5.createElement(Popover2.Root, {
+      open,
+      onOpenChange,
+      modal
+    }, /* @__PURE__ */ React5.createElement(Popover2.VirtualTrigger, {
+      virtualRef: ref
+    }), /* @__PURE__ */ React5.createElement("div", {
+      role: "none",
+      className: "contents",
+      ref: setRootRef
+    }, children));
+  } finally {
+    _effect.f();
+  }
+});
 var REF_POPOVER = "RefPopover";
 var [RefPopoverContextProvider, useRefPopover] = createContext(REF_POPOVER, {});
-var RefPopoverProvider = ({ children, onLookup }) => {
-  var _effect = _useSignals2();
+var PreviewProvider = ({ children, onLookup }) => {
+  var _effect = _useSignals3();
   try {
-    const trigger = useRef(null);
-    const [value, setValue] = useState({});
-    const [rootRef, setRootRef] = useState(null);
-    const [open, setOpen] = useState(false);
-    const handleDxRefTagActivate = useCallback((event) => {
+    const trigger = useRef3(null);
+    const [value, setValue] = useState2({});
+    const [open, setOpen] = useState2(false);
+    const handleDxRefTagActivate = useCallback3((event) => {
       const { refId, label, trigger: dxTrigger } = event;
       setValue((value2) => ({
         ...value2,
@@ -6740,37 +7340,25 @@ var RefPopoverProvider = ({ children, onLookup }) => {
     }, [
       onLookup
     ]);
-    useEffect2(() => {
-      return rootRef ? addEventListener2(rootRef, "dx-ref-tag-activate", handleDxRefTagActivate, customEventOptions) : void 0;
-    }, [
-      rootRef
-    ]);
-    return /* @__PURE__ */ React4.createElement(RefPopoverContextProvider, {
+    return /* @__PURE__ */ React5.createElement(RefPopoverContextProvider, {
       pending: value.pending,
       link: value.link,
       target: value.target
-    }, /* @__PURE__ */ React4.createElement(Popover.Root, {
+    }, /* @__PURE__ */ React5.createElement(RefPopover, {
+      ref: trigger,
       open,
-      onOpenChange: setOpen
-    }, /* @__PURE__ */ React4.createElement(Popover.VirtualTrigger, {
-      virtualRef: trigger
-    }), /* @__PURE__ */ React4.createElement("div", {
-      role: "none",
-      className: "contents",
-      ref: setRootRef
-    }, children)));
+      onOpenChange: setOpen,
+      onActivate: handleDxRefTagActivate
+    }, children));
   } finally {
     _effect.f();
   }
 };
-var RefPopover = {
-  Provider: RefPopoverProvider
-};
 
 // packages/ui/react-ui-editor/src/components/Popover/RefDropdownMenu.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
 import { createContext as createContext2 } from "@radix-ui/react-context";
-import React5, { useRef as useRef2, useState as useState2, useEffect as useEffect3, useCallback as useCallback2 } from "react";
+import React6, { useRef as useRef4, useState as useState3, useEffect as useEffect4, useCallback as useCallback4 } from "react";
 import { addEventListener as addEventListener3 } from "@dxos/async";
 import { DropdownMenu } from "@dxos/react-ui";
 var customEventOptions2 = {
@@ -6780,13 +7368,13 @@ var customEventOptions2 = {
 var REF_DROPDOWN_MENU = "RefDropdownMenu";
 var [RefDropdownMenuContextProvider, useRefDropdownMenu] = createContext2(REF_DROPDOWN_MENU, {});
 var RefDropdownMenuProvider = ({ children, onLookup }) => {
-  var _effect = _useSignals3();
+  var _effect = _useSignals4();
   try {
-    const trigger = useRef2(null);
-    const [value, setValue] = useState2({});
-    const [rootRef, setRootRef] = useState2(null);
-    const [open, setOpen] = useState2(false);
-    const handleDxRefTagActivate = useCallback2((event) => {
+    const trigger = useRef4(null);
+    const [value, setValue] = useState3({});
+    const [rootRef, setRootRef] = useState3(null);
+    const [open, setOpen] = useState3(false);
+    const handleDxRefTagActivate = useCallback4((event) => {
       const { refId, label, trigger: dxTrigger } = event;
       setValue((value2) => ({
         ...value2,
@@ -6809,21 +7397,24 @@ var RefDropdownMenuProvider = ({ children, onLookup }) => {
     }, [
       onLookup
     ]);
-    useEffect3(() => {
-      return rootRef ? addEventListener3(rootRef, "dx-ref-tag-activate", handleDxRefTagActivate, customEventOptions2) : void 0;
+    useEffect4(() => {
+      if (!rootRef) {
+        return;
+      }
+      return addEventListener3(rootRef, "dx-ref-tag-activate", handleDxRefTagActivate, customEventOptions2);
     }, [
       rootRef
     ]);
-    return /* @__PURE__ */ React5.createElement(RefDropdownMenuContextProvider, {
+    return /* @__PURE__ */ React6.createElement(RefDropdownMenuContextProvider, {
       pending: value.pending,
       link: value.link,
       target: value.target
-    }, /* @__PURE__ */ React5.createElement(DropdownMenu.Root, {
+    }, /* @__PURE__ */ React6.createElement(DropdownMenu.Root, {
       open,
       onOpenChange: setOpen
-    }, /* @__PURE__ */ React5.createElement(DropdownMenu.VirtualTrigger, {
+    }, /* @__PURE__ */ React6.createElement(DropdownMenu.VirtualTrigger, {
       virtualRef: trigger
-    }), /* @__PURE__ */ React5.createElement("div", {
+    }), /* @__PURE__ */ React6.createElement("div", {
       role: "none",
       className: "contents",
       ref: setRootRef
@@ -6838,19 +7429,19 @@ var RefDropdownMenu = {
 
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { EditorState as EditorState3 } from "@codemirror/state";
-import { EditorView as EditorView24 } from "@codemirror/view";
+import { EditorView as EditorView26 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
-import { useCallback as useCallback3, useEffect as useEffect4, useMemo as useMemo4, useRef as useRef3, useState as useState3 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect5, useMemo as useMemo5, useRef as useRef5, useState as useState4 } from "react";
 import { log as log8 } from "@dxos/log";
 import { getProviderValue, isNotFalsy as isNotFalsy4 } from "@dxos/util";
 var __dxlog_file13 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
 var instanceCount = 0;
 var useTextEditor = (props = {}, deps = []) => {
-  const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = useMemo4(() => getProviderValue(props), deps ?? []);
-  const [instanceId] = useState3(() => `text-editor-${++instanceCount}`);
-  const [view, setView] = useState3();
-  const parentRef = useRef3(null);
-  useEffect4(() => {
+  const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = useMemo5(() => getProviderValue(props), deps ?? []);
+  const [instanceId] = useState4(() => `text-editor-${++instanceCount}`);
+  const [view, setView] = useState4();
+  const parentRef = useRef5(null);
+  useEffect5(() => {
     let view2;
     if (parentRef.current) {
       log8("create", {
@@ -6859,7 +7450,7 @@ var useTextEditor = (props = {}, deps = []) => {
         doc: initialValue?.length ?? 0
       }, {
         F: __dxlog_file13,
-        L: 76,
+        L: 75,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -6882,20 +7473,20 @@ var useTextEditor = (props = {}, deps = []) => {
           id && documentId.of(id),
           extensions,
           // NOTE: This doesn't catch errors in keymap functions.
-          EditorView24.exceptionSink.of((err) => {
+          EditorView26.exceptionSink.of((err) => {
             log8.catch(err, void 0, {
               F: __dxlog_file13,
-              L: 98,
+              L: 97,
               S: void 0,
               C: (f, a) => f(...a)
             });
           })
         ].filter(isNotFalsy4)
       });
-      view2 = new EditorView24({
+      view2 = new EditorView26({
         parent: parentRef.current,
         state,
-        scrollTo: scrollTo ? EditorView24.scrollIntoView(scrollTo, {
+        scrollTo: scrollTo ? EditorView26.scrollIntoView(scrollTo, {
           yMargin: 96
         }) : void 0,
         dispatchTransactions: debug ? debugDispatcher : void 0
@@ -6917,14 +7508,14 @@ var useTextEditor = (props = {}, deps = []) => {
         id
       }, {
         F: __dxlog_file13,
-        L: 135,
+        L: 134,
         S: void 0,
         C: (f, a) => f(...a)
       });
       view2?.destroy();
     };
   }, deps);
-  useEffect4(() => {
+  useEffect5(() => {
     if (view) {
       if (scrollTo || selection) {
         if (selection && selection.anchor > view.state.doc.length) {
@@ -6934,7 +7525,7 @@ var useTextEditor = (props = {}, deps = []) => {
             selection
           }, {
             F: __dxlog_file13,
-            L: 144,
+            L: 143,
             S: void 0,
             C: (f, a) => f(...a)
           });
@@ -6951,7 +7542,7 @@ var useTextEditor = (props = {}, deps = []) => {
     scrollTo,
     selection
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (view && autoFocus) {
       view.focus();
     }
@@ -6965,7 +7556,7 @@ var useTextEditor = (props = {}, deps = []) => {
       Escape: view?.state.facet(editorInputMode).noTabster
     }
   });
-  const handleKeyUp = useCallback3((event) => {
+  const handleKeyUp = useCallback5((event) => {
     const { key, target, currentTarget } = event;
     if (target === currentTarget) {
       switch (key) {
@@ -6989,17 +7580,19 @@ var useTextEditor = (props = {}, deps = []) => {
   };
 };
 export {
+  CommandMenu,
   Cursor,
   EditorInputMode,
   EditorInputModes,
   EditorState4 as EditorState,
   EditorToolbar,
-  EditorView25 as EditorView,
+  EditorView27 as EditorView,
   EditorViewMode,
   EditorViewModes,
   Inline,
   InputModeExtensions,
   List,
+  PreviewProvider,
   RefDropdownMenu,
   RefPopover,
   RemoteSelectionsDecorator,
@@ -7023,11 +7616,14 @@ export {
   closeEffect,
   command,
   commandKeyBindings,
+  commandMenu,
+  commandRangeEffect,
   commands,
   commentClickedEffect,
   comments,
   commentsState,
   convertTreeToJson,
+  coreSlashCommands,
   createBasicExtensions,
   createComment,
   createDataExtensions,
@@ -7055,6 +7651,7 @@ export {
   editorSlots,
   editorWidth,
   editorWithToolbarLayout,
+  filterItems,
   flattenRect,
   floatingMenu,
   focus,
@@ -7063,15 +7660,22 @@ export {
   formattingEquals,
   formattingKeymap,
   getFormatting,
+  getItem,
+  getLinkRef,
   getListItemContent,
+  getNextItem,
+  getPreviousItem,
   getRange,
   hashtag,
   image,
   indentItemLess,
   indentItemMore,
+  insertAtCursor,
+  insertAtLineStart,
   insertTable,
   itemToJSON,
-  keymap13 as keymap,
+  keymap14 as keymap,
+  linkSlashCommands,
   linkTooltip,
   listItemToString,
   listener,
@@ -7106,7 +7710,6 @@ export {
   setStyle,
   singleValueFacet,
   stackItemContentEditorClassNames,
-  stackItemContentToolbarClassNames,
   staticCompletion,
   table,
   tags2 as tags,
@@ -7125,6 +7728,7 @@ export {
   treeFacet,
   typeahead,
   typewriter,
+  useCommandMenu,
   useComments,
   useEditorToolbarState,
   useFormattingState,