@dxos/react-ui-editor 0.8.2 → 0.8.3-main.7f5a14c

package/dist/lib/browser/index.mjs

@@ -35,14 +35,14 @@ var translations_default = [
 
 // packages/ui/react-ui-editor/src/index.ts
 import { EditorState as EditorState4 } from "@codemirror/state";
-import { EditorView as EditorView24, keymap as keymap13 } from "@codemirror/view";
+import { EditorView as EditorView26, 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";
@@ -1458,27 +1458,107 @@ var command = (options = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/command/menu.ts
-import { EditorView as EditorView7, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
+import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField3, StateEffect as StateEffect3, Prec } from "@codemirror/state";
+import { EditorView as EditorView8, ViewPlugin as ViewPlugin6, Decoration as Decoration5, keymap as keymap4 } from "@codemirror/view";
+import { useCallback, useMemo as useMemo2, useRef, useState } from "react";
+import { addEventListener } from "@dxos/async";
+
+// packages/ui/react-ui-editor/src/extensions/placeholder.ts
+import { Decoration as Decoration4, EditorView as EditorView7, WidgetType as WidgetType3, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
+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;
+  }
+};
+function multilinePlaceholder(content) {
+  const plugin = ViewPlugin5.fromClass(class {
+    constructor(view) {
+      this.view = view;
+    }
+    get decorations() {
+      const activeLine = this.view.state.doc.lineAt(this.view.state.selection.main.head);
+      const isEmpty = activeLine.text.trim() === "";
+      if (!isEmpty || !content) {
+        return Decoration4.none;
+      }
+      const lineStart = activeLine.from;
+      return Decoration4.set([
+        Decoration4.widget({
+          widget: new Placeholder(content),
+          side: 1
+        }).range(lineStart)
+      ]);
+    }
+  }, {
+    decorations: (v) => v.decorations
+  });
+  return typeof content === "string" ? [
+    plugin,
+    EditorView7.contentAttributes.of({
+      "aria-placeholder": content
+    })
+  ] : plugin;
+}
+
+// packages/ui/react-ui-editor/src/extensions/command/menu.ts
 var floatingMenu = (options = {}) => [
-  ViewPlugin5.fromClass(class {
+  ViewPlugin6.fromClass(class {
     constructor(view) {
-      this.rafId = null;
       this.view = view;
       const container = view.scrollDOM;
       if (getComputedStyle(container).position === "static") {
         container.style.position = "relative";
       }
-      const icon = document.createElement("dx-icon");
-      icon.setAttribute("icon", options.icon ?? "ph--dots-three-outline--regular");
-      const button = document.createElement("button");
-      button.appendChild(icon);
-      this.tag = document.createElement("dx-ref-tag");
-      this.tag.classList.add("cm-ref-tag");
-      this.tag.appendChild(button);
+      {
+        const icon = document.createElement("dx-icon");
+        icon.setAttribute("icon", options.icon ?? "ph--dots-three-vertical--regular");
+        const button = document.createElement("button");
+        button.appendChild(icon);
+        this.tag = document.createElement("dx-ref-tag");
+        this.tag.classList.add("cm-ref-tag");
+        this.tag.appendChild(button);
+      }
       container.appendChild(this.tag);
-      container.addEventListener("scroll", this.scheduleUpdate.bind(this));
+      const handler = () => this.scheduleUpdate();
+      this.cleanup = addEventListener(container, "scroll", handler);
       this.scheduleUpdate();
     }
+    destroy() {
+      this.cleanup?.();
+      this.tag.remove();
+      if (this.rafId != null) {
+        cancelAnimationFrame(this.rafId);
+      }
+    }
     update(update2) {
       this.tag.dataset.focused = update2.view.hasFocus ? "true" : "false";
       if (!update2.view.hasFocus) {
@@ -1515,20 +1595,16 @@ var floatingMenu = (options = {}) => [
       }
       this.rafId = requestAnimationFrame(this.updateButtonPosition.bind(this));
     }
-    destroy() {
-      this.tag.remove();
-      if (this.rafId != null) {
-        cancelAnimationFrame(this.rafId);
-      }
-    }
   }),
-  EditorView7.theme({
+  EditorView8.theme({
     ".cm-ref-tag": {
       position: "fixed",
       padding: "0",
       border: "none",
-      transition: "opacity 0.3s ease-in-out",
-      opacity: 0.1
+      opacity: "0"
+    },
+    "[data-has-focus] & .cm-ref-tag": {
+      opacity: "1"
     },
     ".cm-ref-tag button": {
       display: "grid",
@@ -1536,16 +1612,262 @@ var floatingMenu = (options = {}) => [
       justifyContent: "center",
       width: "2rem",
       height: "2rem"
-    },
-    '.cm-ref-tag[data-focused="true"]': {
-      opacity: 1
     }
   })
 ];
+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;
+  }
+});
+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,
+      run: (view) => {
+        const selection = view.state.selection.main;
+        const line = view.state.doc.lineAt(selection.head);
+        const shouldTrigger = line.text.trim() === "" || selection.head === line.from || selection.head > line.from && line.text[selection.head - line.from - 1] === " ";
+        if (shouldTrigger) {
+          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.onDeactivate?.();
+    }
+  });
+  return [
+    multilinePlaceholder(options.placeholder ?? `Press '${Array.isArray(options.trigger) ? options.trigger[0] : options.trigger}' for commands`),
+    Prec.highest(commandKeymap),
+    updateListener,
+    commandMenuState,
+    commandMenuPlugin
+  ];
+};
+var useCommandMenu = ({ viewRef, trigger, placeholder: placeholder2, getGroups }) => {
+  const triggerRef = useRef(null);
+  const currentRef = useRef(null);
+  const groupsRef = useRef([]);
+  const [currentItem, setCurrentItem] = useState();
+  const [open, setOpen] = useState(false);
+  const [_, update2] = useState({});
+  const handleOpenChange = useCallback(async (open2, trigger2) => {
+    if (open2 && trigger2) {
+      groupsRef.current = await getGroups(trigger2);
+    }
+    setOpen(open2);
+    if (!open2) {
+      triggerRef.current = null;
+      setCurrentItem(void 0);
+      viewRef.current?.dispatch({
+        effects: [
+          commandRangeEffect.of(null)
+        ]
+      });
+    }
+  }, [
+    getGroups
+  ]);
+  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(() => commandMenu({
+    trigger,
+    placeholder: placeholder2,
+    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;
+      });
+    },
+    onDeactivate: () => handleOpenChange(false),
+    onEnter: () => {
+      if (currentRef.current) {
+        handleSelect(currentRef.current);
+      }
+    },
+    onTextChange: async (trigger2, text) => {
+      groupsRef.current = await getGroups(trigger2, text);
+      const firstItem = groupsRef.current.filter((group) => group.items.length > 0)[0]?.items[0];
+      if (firstItem) {
+        setCurrentItem(firstItem.id);
+        currentRef.current = firstItem;
+      }
+      update2({});
+    }
+  }), [
+    handleOpenChange,
+    getGroups,
+    serializedTrigger,
+    placeholder2
+  ]);
+  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 Prec2, RangeSetBuilder as RangeSetBuilder4 } from "@codemirror/state";
+import { Decoration as Decoration6, keymap as keymap5, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
 var typeahead = ({ onComplete } = {}) => {
   let hint;
   const complete = (view) => {
@@ -1566,12 +1888,12 @@ var typeahead = ({ onComplete } = {}) => {
     return true;
   };
   return [
-    ViewPlugin6.fromClass(class {
+    ViewPlugin7.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) {
@@ -1580,7 +1902,7 @@ var typeahead = ({ onComplete } = {}) => {
             line: str
           });
           if (hint) {
-            builder.add(selection.from, selection.to, Decoration4.widget({
+            builder.add(selection.from, selection.to, Decoration6.widget({
               widget: new Hint(hint)
             }));
           }
@@ -1591,7 +1913,7 @@ var typeahead = ({ onComplete } = {}) => {
       decorations: (v) => v.decorations
     }),
     // Keys.
-    Prec.highest(keymap4.of([
+    Prec2.highest(keymap5.of([
       {
         key: "Tab",
         preventDefault: true,
@@ -1628,8 +1950,8 @@ 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 EditorView10, ViewPlugin as ViewPlugin8 } from "@codemirror/view";
 import sortBy from "lodash.sortby";
 import { useEffect } from "react";
 import { debounce as debounce2 } from "@dxos/async";
@@ -1638,7 +1960,7 @@ import { isNonNullable } 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 EditorView9, keymap as keymap6 } from "@codemirror/view";
 import { debounce } from "@dxos/async";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { isNotFalsy } from "@dxos/util";
@@ -1649,7 +1971,7 @@ var createEditorStateTransaction = ({ scrollTo, selection }) => {
   return {
     selection,
     scrollIntoView: !scrollTo,
-    effects: scrollTo ? EditorView8.scrollIntoView(scrollTo, {
+    effects: scrollTo ? EditorView9.scrollIntoView(scrollTo, {
       yMargin: 96
     }) : void 0,
     annotations: Transaction.userEvent.of(stateRestoreAnnotation)
@@ -1691,7 +2013,7 @@ var selectionState = ({ getState, setState } = {}) => {
     //     setStateDebounced(id, {});
     //   },
     // }),
-    EditorView8.updateListener.of(({ view, transactions }) => {
+    EditorView9.updateListener.of(({ view, transactions }) => {
       const id = view.state.facet(documentId);
       if (!id || transactions.some((tr) => tr.isUserEvent(stateRestoreAnnotation))) {
         return;
@@ -1714,7 +2036,7 @@ var selectionState = ({ getState, setState } = {}) => {
         }
       }
     }),
-    getState && keymap5.of([
+    getState && keymap6.of([
       {
         key: "ctrl-r",
         run: (view) => {
@@ -1731,10 +2053,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: [],
@@ -1772,7 +2094,7 @@ var commentsState = StateField3.define({
     return value;
   }
 });
-var styles2 = EditorView9.theme({
+var styles2 = EditorView10.theme({
   ".cm-comment, .cm-comment-current": {
     margin: "0 -3px",
     padding: "3px",
@@ -1785,14 +2107,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 = EditorView10.decorations.compute([
   commentsState
 ], (state) => {
   const { selection: { current }, comments: comments2 } = state.field(commentsState);
@@ -1812,10 +2134,10 @@ 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);
+  return Decoration7.set(decorations2);
 });
-var commentClickedEffect = StateEffect3.define();
-var handleCommentClick = EditorView9.domEventHandlers({
+var commentClickedEffect = StateEffect4.define();
+var handleCommentClick = EditorView10.domEventHandlers({
   click: (event, view) => {
     let target = event.target;
     const editorRoot = view.dom;
@@ -1854,7 +2176,7 @@ var trackPastedComments = (onUpdate) => {
     }
   };
   return [
-    EditorView9.domEventHandlers({
+    EditorView10.domEventHandlers({
       cut: handleTrack,
       copy: handleTrack
     }),
@@ -1876,7 +2198,7 @@ var trackPastedComments = (onUpdate) => {
       return effects;
     }),
     // Handle paste or the undo of comment deletion.
-    EditorView9.updateListener.of((update2) => {
+    EditorView10.updateListener.of((update2) => {
       const restore = [];
       for (let i = 0; i < update2.transactions.length; i++) {
         const tr = update2.transactions[i];
@@ -1932,7 +2254,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) => {
@@ -1977,7 +2299,7 @@ var comments = (options = {}) => {
     //
     // Keymap.
     //
-    options.onCreate && keymap6.of([
+    options.onCreate && keymap7.of([
       {
         key: shortcut,
         run: callbackWrapper(createComment)
@@ -2018,7 +2340,7 @@ var comments = (options = {}) => {
     //
     // Track deleted ranges and update ranges for decorations.
     //
-    EditorView9.updateListener.of(({ view, state, changes }) => {
+    EditorView10.updateListener.of(({ view, state, changes }) => {
       let mod = false;
       const { comments: comments2, ...value } = state.field(commentsState);
       changes.iterChanges((from, to, from2, to2) => {
@@ -2050,7 +2372,7 @@ var comments = (options = {}) => {
     //
     // Track selection/proximity.
     //
-    EditorView9.updateListener.of(({ view, state }) => {
+    EditorView10.updateListener.of(({ view, state }) => {
       let min = Infinity;
       const { selection: { current, closest }, comments: comments2 } = state.field(commentsState);
       const { head } = state.selection.main;
@@ -2104,7 +2426,7 @@ var scrollThreadIntoView = (view, id, center = true) => {
           anchor: range.from
         } : void 0,
         effects: [
-          needsScroll ? EditorView9.scrollIntoView(range.from, center ? {
+          needsScroll ? EditorView10.scrollIntoView(range.from, center ? {
             y: "center"
           } : void 0) : [],
           needsSelectionUpdate ? setSelection.of({
@@ -2134,7 +2456,7 @@ var ExternalCommentSync = class {
     this.unsubscribe = subscribe(updateComments);
   }
 };
-var createExternalCommentSync = (id, subscribe, getComments) => ViewPlugin7.fromClass(class {
+var createExternalCommentSync = (id, subscribe, getComments) => ViewPlugin8.fromClass(class {
   constructor(view) {
     return new ExternalCommentSync(view, id, subscribe, getComments);
   }
@@ -2156,20 +2478,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 EditorView11 } from "@codemirror/view";
+var styles3 = EditorView11.theme({
   ".cm-dropCursor": {
     borderLeft: "2px solid var(--dx-accentText)",
     color: "var(--dx-accentText)",
@@ -2183,7 +2505,7 @@ var dropFile = (options = {}) => {
   return [
     styles3,
     dropCursor(),
-    EditorView10.domEventHandlers({
+    EditorView11.domEventHandlers({
       drop: (event, view) => {
         event.preventDefault();
         const files = event.dataTransfer?.files;
@@ -2210,7 +2532,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 EditorView14, ViewPlugin as ViewPlugin9, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap8, lineNumbers, placeholder, scrollPastEnd } from "@codemirror/view";
 import defaultsDeep2 from "lodash.defaultsdeep";
 import merge from "lodash.merge";
 import { generateName } from "@dxos/display-name";
@@ -2218,10 +2540,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 EditorView12 } from "@codemirror/view";
+var focusEffect = StateEffect5.define();
+var focusField = StateField6.define({
   create: () => false,
   update: (value, tr) => {
     for (const effect of tr.effects) {
@@ -2234,7 +2556,7 @@ var focusField = StateField5.define({
 });
 var focus = [
   focusField,
-  EditorView11.domEventHandlers({
+  EditorView12.domEventHandlers({
     focus: (event, view) => {
       setTimeout(() => view.dispatch({
         effects: focusEffect.of(true)
@@ -2248,6 +2570,10 @@ var focus = [
   })
 ];
 
+// packages/ui/react-ui-editor/src/defaults.ts
+import { EditorView as EditorView13 } 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 = {
@@ -2489,6 +2815,31 @@ 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 = EditorView13.theme({
+  ".cm-gutters": {
+    background: "var(--dx-baseSurface)",
+    paddingRight: "1rem"
+  }
+});
+var editorMonospace = EditorView13.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");
+var stackItemContentToolbarClassNames = (role) => mx2("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/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);
@@ -2513,10 +2864,10 @@ var createBasicExtensions = (_props) => {
   const props = defaultsDeep2({}, _props, defaultBasicOptions);
   return [
     // NOTE: Doesn't catch errors in keymap functions.
-    EditorView12.exceptionSink.of((err) => {
+    EditorView14.exceptionSink.of((err) => {
       log5.catch(err, void 0, {
         F: __dxlog_file8,
-        L: 98,
+        L: 100,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2528,18 +2879,22 @@ var createBasicExtensions = (_props) => {
     props.drawSelection && drawSelection({
       cursorBlinkRate: 1200
     }),
-    props.editable !== void 0 && EditorView12.editable.of(props.editable),
+    props.editable !== void 0 && EditorView14.editable.of(props.editable),
     props.focus && focus,
     props.highlightActiveLine && highlightActiveLine(),
     props.history && history(),
-    props.lineNumbers && lineNumbers(),
-    props.lineWrapping && EditorView12.lineWrapping,
+    props.lineNumbers && [
+      lineNumbers(),
+      editorGutter
+    ],
+    props.lineWrapping && EditorView14.lineWrapping,
+    props.monospace && editorMonospace,
     props.placeholder && placeholder(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
@@ -2570,17 +2925,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),
+    EditorView14.darkTheme.of(themeMode === "dark"),
+    EditorView14.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 && EditorView14.editorAttributes.of({
       class: slots.editor.className
     }),
-    slots.content?.className && EditorView12.contentAttributes.of({
+    slots.content?.className && EditorView14.contentAttributes.of({
       class: slots.content.className
     }),
-    slots.scroll?.className && ViewPlugin8.fromClass(class {
+    slots.scroll?.className && ViewPlugin9.fromClass(class {
       constructor(view) {
         view.scrollDOM.classList.add(slots.scroll.className);
       }
@@ -2611,7 +2966,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 EditorView15 } from "@codemirror/view";
 import React2 from "react";
 import { Icon } from "@dxos/react-ui";
 var folding = (_props = {}) => [
@@ -2635,7 +2990,7 @@ var folding = (_props = {}) => [
       }));
     }
   }),
-  EditorView13.theme({
+  EditorView15.theme({
     ".cm-foldGutter": {
       opacity: 0.3,
       transition: "opacity 0.3s",
@@ -2647,6 +3002,49 @@ var folding = (_props = {}) => [
   })
 ];
 
+// packages/ui/react-ui-editor/src/extensions/hashtag.tsx
+import { Decoration as Decoration8, EditorView as EditorView16, MatchDecorator, ViewPlugin as ViewPlugin10, 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 = mx3("cm-tag", getHashColor(this._text).tag);
+    span.textContent = this._text;
+    return span;
+  }
+};
+var tagMatcher = new MatchDecorator({
+  regexp: /#(\w+)\W/g,
+  decoration: (match) => Decoration8.replace({
+    widget: new TagWidget(match[1])
+  })
+});
+var hashtag = () => [
+  ViewPlugin10.fromClass(class {
+    constructor(view) {
+      this.tags = tagMatcher.createDeco(view);
+    }
+    update(update2) {
+      this.tags = tagMatcher.updateDeco(update2, this.tags);
+    }
+  }, {
+    decorations: (instance) => instance.tags,
+    provide: (plugin) => EditorView16.atomicRanges.of((view) => {
+      return view.plugin(plugin)?.tags || Decoration8.none;
+    })
+  }),
+  EditorView16.theme({
+    ".cm-tag": {
+      borderRadius: "4px",
+      marginRight: "6px",
+      padding: "2px 6px"
+    }
+  })
+];
+
 // packages/ui/react-ui-editor/src/extensions/json.ts
 import { json, jsonParseLinter } from "@codemirror/lang-json";
 import { linter } from "@codemirror/lint";
@@ -2655,7 +3053,8 @@ var createJsonExtensions = ({ schema } = {}) => {
   let lintSource = jsonParseLinter();
   if (schema) {
     const ajv = new Ajv({
-      allErrors: false
+      allErrors: false,
+      strict: false
     });
     const validate = ajv.compile(schema);
     lintSource = schemaLinter(validate);
@@ -2692,14 +3091,14 @@ var schemaLinter = (validate) => (view) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/listener.ts
-import { EditorView as EditorView14 } from "@codemirror/view";
+import { EditorView as EditorView17 } from "@codemirror/view";
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
-  onFocus && extensions.push(EditorView14.focusChangeEffect.of((_, focusing) => {
+  onFocus && extensions.push(EditorView17.focusChangeEffect.of((_, focusing) => {
     onFocus(focusing);
     return null;
   }));
-  onChange && extensions.push(EditorView14.updateListener.of((update2) => {
+  onChange && extensions.push(EditorView17.updateListener.of((update2) => {
     onChange(update2.state.doc.toString(), update2.state.facet(documentId));
   }));
   return extensions;
@@ -2709,8 +3108,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 EditorView15, keymap as keymap8 } from "@codemirror/view";
-import { useMemo as useMemo2 } from "react";
+import { EditorView as EditorView18, 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";
@@ -3597,7 +3996,7 @@ var toggleCodeblock = (target) => {
 };
 var formattingKeymap = (_options = {}) => {
   return [
-    keymap8.of([
+    keymap9.of([
       {
         key: "meta-b",
         run: toggleStrong
@@ -3798,7 +4197,7 @@ var getFormatting = (state) => {
   };
 };
 var useFormattingState = (state) => {
-  return useMemo2(() => EditorView15.updateListener.of((update2) => {
+  return useMemo3(() => EditorView18.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       Object.entries(getFormatting(update2.state)).forEach(([key, active]) => {
         state[key] = active;
@@ -3863,7 +4262,7 @@ import { markdownLanguage as markdownLanguage3, markdown } from "@codemirror/lan
 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
@@ -4070,7 +4469,7 @@ 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
@@ -4083,8 +4482,8 @@ var createMarkdownExtensions = (options = {}) => {
 
 // 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))
 });
@@ -4110,17 +4509,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 EditorView19, Decoration as Decoration8, WidgetType as WidgetType5, ViewPlugin as ViewPlugin10 } from "@codemirror/view";
+import { RangeSetBuilder as RangeSetBuilder6, StateEffect as StateEffect6 } from "@codemirror/state";
+import { EditorView as EditorView22, Decoration as Decoration11, WidgetType as WidgetType7, ViewPlugin as ViewPlugin12 } from "@codemirror/view";
 import { invariant as invariant4 } from "@dxos/invariant";
-import { mx as mx2 } 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 ViewPlugin9 } from "@codemirror/view";
+import { ViewPlugin as ViewPlugin11 } from "@codemirror/view";
 var adjustChanges = () => {
-  return ViewPlugin9.fromClass(class {
+  return ViewPlugin11.fromClass(class {
     update(update2) {
       const tree = syntaxTree4(update2.state);
       const adjustments = [];
@@ -4261,13 +4660,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 Decoration6, EditorView as EditorView16, WidgetType as WidgetType3 } from "@codemirror/view";
+import { StateField as StateField8 } from "@codemirror/state";
+import { Decoration as Decoration9, EditorView as EditorView19, WidgetType as WidgetType5 } from "@codemirror/view";
 var image = (_options = {}) => {
   return [
-    StateField7.define({
+    StateField8.define({
       create: (state) => {
-        return Decoration6.set(buildDecorations(0, state.doc.length, state));
+        return Decoration9.set(buildDecorations(0, state.doc.length, state));
       },
       update: (value, tr) => {
         if (!tr.docChanged && !tr.selection) {
@@ -4290,7 +4689,7 @@ var image = (_options = {}) => {
           add: buildDecorations(from, to, tr.state)
         });
       },
-      provide: (field) => EditorView16.decorations.from(field)
+      provide: (field) => EditorView19.decorations.from(field)
     })
   ];
 };
@@ -4308,7 +4707,7 @@ var buildDecorations = (from, to, state) => {
             return;
           }
           preloadImage(url);
-          decorations2.push(Decoration6.replace({
+          decorations2.push(Decoration9.replace({
             block: true,
             widget: new ImageWidget(url)
           }).range(hide2 ? node.from : node.to, node.to));
@@ -4328,7 +4727,7 @@ var preloadImage = (url) => {
     preloaded.add(url);
   }
 };
-var ImageWidget = class extends WidgetType3 {
+var ImageWidget = class extends WidgetType5 {
   constructor(_url) {
     super(), this._url = _url;
   }
@@ -4349,10 +4748,10 @@ var ImageWidget = class extends WidgetType3 {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/styles.ts
-import { EditorView as EditorView17 } from "@codemirror/view";
+import { EditorView as EditorView20 } from "@codemirror/view";
 var bulletListIndentationWidth = 24;
 var orderedListIndentationWidth = 36;
-var formattingStyles = EditorView17.theme({
+var formattingStyles = EditorView20.theme({
   /**
   * Horizontal rule.
   */
@@ -4473,17 +4872,17 @@ var formattingStyles = EditorView17.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 Decoration7, EditorView as EditorView18, WidgetType as WidgetType4 } from "@codemirror/view";
+import { RangeSetBuilder as RangeSetBuilder5, StateField as StateField9 } from "@codemirror/state";
+import { Decoration as Decoration10, EditorView as EditorView21, 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) => EditorView18.decorations.from(field)
+    provide: (field) => EditorView21.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];
@@ -4524,19 +4923,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, Decoration7.replace({
+      builder.add(table2.from, table2.to, Decoration10.replace({
         block: true,
         widget: new TableWidget(table2)
       }));
     } else {
-      builder.add(table2.from, table2.to, Decoration7.mark({
+      builder.add(table2.from, table2.to, Decoration10.mark({
         class: "cm-table"
       }));
     }
   });
   return builder.finish();
 };
-var TableWidget = class extends WidgetType4 {
+var TableWidget = class extends WidgetType6 {
   constructor(_table) {
     super(), this._table = _table;
   }
@@ -4577,14 +4976,14 @@ var Unicode = {
   bulletSmall: "\u2219",
   bulletSquare: "\u2B1D"
 };
-var HorizontalRuleWidget = class extends WidgetType5 {
+var HorizontalRuleWidget = class extends WidgetType7 {
   toDOM() {
     const el = document.createElement("span");
     el.className = "cm-hr";
     return el;
   }
 };
-var LinkButton = class extends WidgetType5 {
+var LinkButton = class extends WidgetType7 {
   constructor(url, render) {
     super(), this.url = url, this.render = render;
   }
@@ -4600,7 +4999,7 @@ var LinkButton = class extends WidgetType5 {
     return el;
   }
 };
-var CheckboxWidget = class extends WidgetType5 {
+var CheckboxWidget = class extends WidgetType7 {
   constructor(_checked) {
     super(), this._checked = _checked;
   }
@@ -4644,7 +5043,7 @@ var CheckboxWidget = class extends WidgetType5 {
     return false;
   }
 };
-var TextWidget = class extends WidgetType5 {
+var TextWidget = class extends WidgetType7 {
   constructor(text, className) {
     super(), this.text = text, this.className = className;
   }
@@ -4657,29 +5056,29 @@ var TextWidget = class extends WidgetType5 {
     return el;
   }
 };
-var hide = Decoration8.replace({});
-var blockQuote = Decoration8.line({
+var hide = Decoration11.replace({});
+var blockQuote = Decoration11.line({
   class: "cm-blockquote"
 });
-var fencedCodeLine = Decoration8.line({
+var fencedCodeLine = Decoration11.line({
   class: "cm-code cm-codeblock-line"
 });
-var fencedCodeLineFirst = Decoration8.line({
-  class: mx2("cm-code cm-codeblock-line", "cm-codeblock-start")
+var fencedCodeLineFirst = Decoration11.line({
+  class: mx4("cm-code cm-codeblock-line", "cm-codeblock-start")
 });
-var fencedCodeLineLast = Decoration8.line({
-  class: mx2("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 = Decoration8.replace({
+var horizontalRule = Decoration11.replace({
   widget: new HorizontalRuleWidget()
 });
-var checkedTask = Decoration8.replace({
+var checkedTask = Decoration11.replace({
   widget: new CheckboxWidget(true)
 });
-var uncheckedTask = Decoration8.replace({
+var uncheckedTask = Decoration11.replace({
   widget: new CheckboxWidget(false)
 });
 var editingRange = (state, range, focus2) => {
@@ -4695,8 +5094,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) => {
@@ -4783,7 +5182,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, Decoration8.replace({
+              atomicDeco.add(mark.from, mark.from + len, Decoration11.replace({
                 widget: new TextWidget(num, theme.heading(level))
               }));
             }
@@ -4808,7 +5207,7 @@ var buildDecorations2 = (view, options, focus2) => {
         if (node.from === line.to - 1) {
           return false;
         }
-        deco.add(line.from, line.from, Decoration8.line({
+        deco.add(line.from, line.from, Decoration11.line({
           class: "cm-list-item",
           attributes: {
             style: `padding-left: ${offset}px; text-indent: -${width}px;`
@@ -4825,7 +5224,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, Decoration8.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;
@@ -4912,7 +5311,7 @@ var buildDecorations2 = (view, options, focus2) => {
           if (!editing) {
             atomicDeco.add(node.from, marks[0].to, hide);
           }
-          deco.add(marks[0].to, marks[1].from, Decoration8.mark({
+          deco.add(marks[0].to, marks[1].from, Decoration11.mark({
             tagName: "a",
             attributes: {
               class: "cm-link",
@@ -4922,7 +5321,7 @@ var buildDecorations2 = (view, options, focus2) => {
             }
           }));
           if (!editing) {
-            atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? Decoration8.replace({
+            atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? Decoration11.replace({
               widget: new LinkButton(url, options.renderLinkButton)
             }) : hide);
           }
@@ -4977,10 +5376,10 @@ var buildDecorations2 = (view, options, focus2) => {
     atomicDeco: atomicDeco.finish()
   };
 };
-var forceUpdate = StateEffect5.define();
+var forceUpdate = StateEffect6.define();
 var decorateMarkdown = (options = {}) => {
   return [
-    ViewPlugin10.fromClass(class {
+    ViewPlugin12.fromClass(class {
       constructor(view) {
         ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(view, options, view.hasFocus));
       }
@@ -5012,9 +5411,9 @@ var decorateMarkdown = (options = {}) => {
       }
     }, {
       provide: (plugin) => [
-        EditorView19.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration8.none),
-        EditorView19.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration8.none),
-        EditorView19.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration8.none)
+        EditorView22.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration11.none),
+        EditorView22.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration11.none),
+        EditorView22.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration11.none)
       ]
     }),
     image(),
@@ -5105,7 +5504,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";
@@ -5129,7 +5528,7 @@ var InputModeExtensions = {
     editorInputMode.of({
       type: "vscode"
     }),
-    keymap10.of(vscodeKeymap)
+    keymap11.of(vscodeKeymap)
   ],
   vim: [
     // https://github.com/replit/codemirror-vim
@@ -5138,7 +5537,7 @@ var InputModeExtensions = {
       type: "vim",
       noTabster: true
     }),
-    keymap10.of([
+    keymap11.of([
       {
         key: "Alt-Escape",
         run: (view) => {
@@ -5154,14 +5553,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";
@@ -5442,7 +5841,7 @@ var outlinerTree = (options = {}) => {
     return tree;
   };
   return [
-    StateField9.define({
+    StateField10.define({
       create: (state) => {
         return buildTree(state);
       },
@@ -5616,7 +6015,7 @@ var toggleTask = (view) => {
   }
   return true;
 };
-var commands = () => keymap11.of([
+var commands = () => keymap12.of([
   //
   // Indentation.
   //
@@ -5722,18 +6121,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 Decoration9, EditorView as EditorView20, ViewPlugin as ViewPlugin12 } from "@codemirror/view";
-import { mx as mx3 } from "@dxos/react-ui-theme";
+import { Prec as Prec3 } from "@codemirror/state";
+import { Decoration as Decoration12, EditorView as EditorView23, ViewPlugin as ViewPlugin14 } 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 ViewPlugin11 } from "@codemirror/view";
+import { ViewPlugin as ViewPlugin13 } 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 ViewPlugin11.fromClass(class {
+  return ViewPlugin13.fromClass(class {
     constructor(view) {
       const first = view.state.doc.lineAt(0);
       const text = view.state.sliceDoc(first.from, first.to);
@@ -5918,7 +6317,7 @@ var editor = () => [
 // packages/ui/react-ui-editor/src/extensions/outliner/outliner.ts
 var outliner = (options = {}) => [
   // Commands.
-  Prec2.highest(commands()),
+  Prec3.highest(commands()),
   // Selection.
   selectionCompartment.of(selectionFacet.of([])),
   // State.
@@ -5928,20 +6327,20 @@ var outliner = (options = {}) => [
   // Floating menu.
   floatingMenu(),
   // Line decorations.
-  decorations(options),
+  decorations(),
   // Default markdown decorations.
   decorateMarkdown({
     listPaddingLeft: 8
   }),
   // Researve space for menu.
-  EditorView20.contentAttributes.of({
+  EditorView23.contentAttributes.of({
     class: "is-full !mr-[3rem]"
   })
 ];
-var decorations = (options) => [
-  ViewPlugin12.fromClass(class {
+var decorations = () => [
+  ViewPlugin14.fromClass(class {
     constructor(view) {
-      this.decorations = Decoration9.none;
+      this.decorations = Decoration12.none;
       this.updateDecorations(view.state, view);
     }
     update(update2) {
@@ -5963,18 +6362,18 @@ var decorations = (options) => [
           const lineFrom = doc.lineAt(item.contentRange.from);
           const lineTo = doc.lineAt(item.contentRange.to);
           const isSelected = selection.includes(item.index) || item === current;
-          decorations2.push(Decoration9.line({
-            class: mx3("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 = Decoration9.set(decorations2);
+      this.decorations = Decoration12.set(decorations2);
     }
   }, {
     decorations: (v) => v.decorations
   }),
   // Theme.
-  EditorView20.theme(Object.assign({
+  EditorView23.theme(Object.assign({
     ".cm-list-item": {
       borderLeftWidth: "1px",
       borderRightWidth: "1px",
@@ -5998,11 +6397,11 @@ var decorations = (options) => [
       paddingBottom: "4px",
       marginBottom: "2px"
     },
-    ".cm-list-item-selected": {
-      borderColor: options.showSelected ? "var(--dx-separator)" : void 0
-    },
     ".cm-list-item-focused": {
       borderColor: "var(--dx-accentFocusIndicator)"
+    },
+    "[data-has-focus] & .cm-list-item-selected": {
+      borderColor: "var(--dx-separator)"
     }
   }))
 ];
@@ -6010,28 +6409,25 @@ var decorations = (options) => [
 // 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 Decoration10, EditorView as EditorView21, WidgetType as WidgetType6 } from "@codemirror/view";
+import { RangeSetBuilder as RangeSetBuilder7, StateField as StateField11 } from "@codemirror/state";
+import { Decoration as Decoration13, EditorView as EditorView24, 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) => [
-        EditorView21.decorations.from(field),
-        EditorView21.atomicRanges.of((view) => view.state.field(field))
+        EditorView24.decorations.from(field),
+        EditorView24.atomicRanges.of((view) => view.state.field(field))
       ]
     }),
-    EditorView21.theme({
+    EditorView24.theme({
       ".cm-preview-block": {
-        marginLeft: "-1rem",
-        marginRight: "-1rem",
-        padding: "1rem",
-        borderRadius: "0.5rem",
-        background: "var(--dx-modalSurface)",
-        border: "1px solid var(--dx-separator)"
+        "--dx-card-spacing-inline": "var(--dx-trimMd)",
+        "--dx-card-spacing-block": "var(--dx-trimMd)",
+        marginInline: "calc(-1*var(--dx-trimMd))"
       }
     })
   ];
@@ -6050,7 +6446,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) {
@@ -6061,7 +6457,7 @@ var buildDecorations3 = (state, options) => {
         case "Link": {
           const link = getLinkRef(state, node.node);
           if (link) {
-            builder.add(node.from, node.to, Decoration10.replace({
+            builder.add(node.from, node.to, Decoration13.replace({
               widget: new PreviewInlineWidget(options, link)
             }));
           }
@@ -6074,7 +6470,7 @@ var buildDecorations3 = (state, options) => {
         case "Image": {
           const link = getLinkRef(state, node.node);
           if (options.renderBlock && link) {
-            builder.add(node.from, node.to, Decoration10.replace({
+            builder.add(node.from, node.to, Decoration13.replace({
               block: true,
               // atomic: true,
               widget: new PreviewBlockWidget(options, link)
@@ -6087,7 +6483,7 @@ var buildDecorations3 = (state, options) => {
   });
   return builder.finish();
 };
-var PreviewInlineWidget = class extends WidgetType6 {
+var PreviewInlineWidget = class extends WidgetType8 {
   constructor(_options, _link) {
     super(), this._options = _options, this._link = _link;
   }
@@ -6104,7 +6500,7 @@ var PreviewInlineWidget = class extends WidgetType6 {
     return root;
   }
 };
-var PreviewBlockWidget = class extends WidgetType6 {
+var PreviewBlockWidget = class extends WidgetType8 {
   constructor(_options, _link) {
     super(), this._options = _options, this._link = _link;
   }
@@ -6163,7 +6559,7 @@ var PreviewBlockWidget = class extends WidgetType6 {
 };
 
 // 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.",
@@ -6173,7 +6569,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   let t;
   let idx = 0;
   return [
-    keymap12.of([
+    keymap13.of([
       {
         // Reset.
         key: "alt-meta-'",
@@ -6516,32 +6912,6 @@ var createViewMode = (state, onViewModeChange) => {
   };
 };
 
-// packages/ui/react-ui-editor/src/defaults.ts
-import { EditorView as EditorView22 } from "@codemirror/view";
-import { mx as mx4 } 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 = EditorView22.theme({
-  ".cm-gutters": {
-    paddingRight: "1rem"
-  }
-});
-var editorMonospace = EditorView22.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) => mx4("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) => mx4("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) => {
@@ -6597,7 +6967,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,
@@ -6645,26 +7015,315 @@ var EditorToolbar = /* @__PURE__ */ memo(({ classNames, attendableId, role, ...p
   }
 });
 
-// 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 { addEventListener } from "@dxos/async";
-import { Popover } from "@dxos/react-ui";
+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 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(() => {
+      return rootRef && onActivate ? addEventListener2(rootRef, "dx-ref-tag-activate", onActivate, customEventOptions) : void 0;
+    }, [
+      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,
@@ -6687,38 +7346,26 @@ var RefPopoverProvider = ({ children, onLookup }) => {
     }, [
       onLookup
     ]);
-    useEffect2(() => {
-      return rootRef ? addEventListener(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 { addEventListener as addEventListener2 } from "@dxos/async";
+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 = {
   capture: true,
@@ -6727,13 +7374,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,
@@ -6756,21 +7403,21 @@ var RefDropdownMenuProvider = ({ children, onLookup }) => {
     }, [
       onLookup
     ]);
-    useEffect3(() => {
-      return rootRef ? addEventListener2(rootRef, "dx-ref-tag-activate", handleDxRefTagActivate, customEventOptions2) : void 0;
+    useEffect4(() => {
+      return rootRef ? addEventListener3(rootRef, "dx-ref-tag-activate", handleDxRefTagActivate, customEventOptions2) : void 0;
     }, [
       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
@@ -6785,19 +7432,19 @@ var RefDropdownMenu = {
 
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { EditorState as EditorState3 } from "@codemirror/state";
-import { EditorView as EditorView23 } from "@codemirror/view";
+import { EditorView as EditorView25 } 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", {
@@ -6806,7 +7453,7 @@ var useTextEditor = (props = {}, deps = []) => {
         doc: initialValue?.length ?? 0
       }, {
         F: __dxlog_file13,
-        L: 76,
+        L: 75,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -6829,20 +7476,20 @@ var useTextEditor = (props = {}, deps = []) => {
           id && documentId.of(id),
           extensions,
           // NOTE: This doesn't catch errors in keymap functions.
-          EditorView23.exceptionSink.of((err) => {
+          EditorView25.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 EditorView23({
+      view2 = new EditorView25({
         parent: parentRef.current,
         state,
-        scrollTo: scrollTo ? EditorView23.scrollIntoView(scrollTo, {
+        scrollTo: scrollTo ? EditorView25.scrollIntoView(scrollTo, {
           yMargin: 96
         }) : void 0,
         dispatchTransactions: debug ? debugDispatcher : void 0
@@ -6864,14 +7511,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) {
@@ -6881,7 +7528,7 @@ var useTextEditor = (props = {}, deps = []) => {
             selection
           }, {
             F: __dxlog_file13,
-            L: 144,
+            L: 143,
             S: void 0,
             C: (f, a) => f(...a)
           });
@@ -6898,7 +7545,7 @@ var useTextEditor = (props = {}, deps = []) => {
     scrollTo,
     selection
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (view && autoFocus) {
       view.focus();
     }
@@ -6912,7 +7559,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) {
@@ -6936,17 +7583,19 @@ var useTextEditor = (props = {}, deps = []) => {
   };
 };
 export {
+  CommandMenu,
   Cursor,
   EditorInputMode,
   EditorInputModes,
   EditorState4 as EditorState,
   EditorToolbar,
-  EditorView24 as EditorView,
+  EditorView26 as EditorView,
   EditorViewMode,
   EditorViewModes,
   Inline,
   InputModeExtensions,
   List,
+  PreviewProvider,
   RefDropdownMenu,
   RefPopover,
   RemoteSelectionsDecorator,
@@ -6970,11 +7619,14 @@ export {
   closeEffect,
   command,
   commandKeyBindings,
+  commandMenu,
+  commandRangeEffect,
   commands,
   commentClickedEffect,
   comments,
   commentsState,
   convertTreeToJson,
+  coreSlashCommands,
   createBasicExtensions,
   createComment,
   createDataExtensions,
@@ -7002,6 +7654,7 @@ export {
   editorSlots,
   editorWidth,
   editorWithToolbarLayout,
+  filterItems,
   flattenRect,
   floatingMenu,
   focus,
@@ -7010,14 +7663,21 @@ export {
   formattingEquals,
   formattingKeymap,
   getFormatting,
+  getItem,
   getListItemContent,
+  getNextItem,
+  getPreviousItem,
   getRange,
+  hashtag,
   image,
   indentItemLess,
   indentItemMore,
+  insertAtCursor,
+  insertAtLineStart,
   insertTable,
   itemToJSON,
-  keymap13 as keymap,
+  keymap14 as keymap,
+  linkSlashCommands,
   linkTooltip,
   listItemToString,
   listener,
@@ -7029,6 +7689,7 @@ export {
   mention,
   moveItemDown,
   moveItemUp,
+  multilinePlaceholder,
   openCommand,
   openEffect,
   outliner,
@@ -7071,6 +7732,7 @@ export {
   treeFacet,
   typeahead,
   typewriter,
+  useCommandMenu,
   useComments,
   useEditorToolbarState,
   useFormattingState,