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

package/dist/lib/node-esm/index.mjs

@@ -37,7 +37,7 @@ var translations_default = [
 
 // packages/ui/react-ui-editor/src/index.ts
 import { EditorState as EditorState4 } from "@codemirror/state";
-import { EditorView as EditorView26, keymap as keymap14 } 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";
 
@@ -48,7 +48,6 @@ 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";
@@ -519,17 +518,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
@@ -537,6 +533,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
@@ -1360,6 +1362,7 @@ var closeCommand = (view) => {
 var commandKeyBindings = [
   {
     key: "/",
+    preventDefault: true,
     run: openCommand
   },
   {
@@ -1369,37 +1372,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;
@@ -1442,31 +1463,70 @@ 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/menu.ts
-import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField3, StateEffect as StateEffect3, Prec } from "@codemirror/state";
+// 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";
-import { useCallback, useMemo as useMemo2, useRef, useState } from "react";
-import { addEventListener } from "@dxos/async";
 
-// packages/ui/react-ui-editor/src/extensions/placeholder.ts
+// 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;
@@ -1501,135 +1561,8 @@ var Placeholder = class extends WidgetType3 {
     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 = {}) => [
-  ViewPlugin6.fromClass(class {
-    constructor(view) {
-      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-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);
-      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) {
-        return;
-      }
-      if (update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(openEffect)))) {
-        this.tag.style.display = "none";
-        this.tag.classList.add("opacity-10");
-      } else if (update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(closeEffect)))) {
-        this.tag.style.display = "block";
-      } else if (update2.docChanged || update2.focusChanged || update2.geometryChanged || update2.selectionSet || update2.viewportChanged) {
-        this.scheduleUpdate();
-      }
-    }
-    updateButtonPosition() {
-      const { x, width } = this.view.contentDOM.getBoundingClientRect();
-      const pos = this.view.state.selection.main.head;
-      const line = this.view.lineBlockAt(pos);
-      const coords = this.view.coordsAtPos(line.from);
-      if (!coords) {
-        return;
-      }
-      const lineHeight = coords.bottom - coords.top;
-      const dy = (lineHeight - (options.height ?? 32)) / 2;
-      const offsetTop = coords.top + dy;
-      const offsetLeft = x + width + (options.padding ?? 8);
-      this.tag.style.top = `${offsetTop}px`;
-      this.tag.style.left = `${offsetLeft}px`;
-      this.tag.style.display = "block";
-    }
-    scheduleUpdate() {
-      if (this.rafId != null) {
-        cancelAnimationFrame(this.rafId);
-      }
-      this.rafId = requestAnimationFrame(this.updateButtonPosition.bind(this));
-    }
-  }),
-  EditorView8.theme({
-    ".cm-ref-tag": {
-      position: "fixed",
-      padding: "0",
-      border: "none",
-      opacity: "0"
-    },
-    "[data-has-focus] & .cm-ref-tag": {
-      opacity: "1"
-    },
-    ".cm-ref-tag button": {
-      display: "grid",
-      alignItems: "center",
-      justifyContent: "center",
-      width: "2rem",
-      height: "2rem"
-    }
-  })
-];
-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/command-menu.ts
 var commandMenu = (options) => {
   const commandMenuPlugin = ViewPlugin6.fromClass(class {
     constructor(view) {
@@ -1668,11 +1601,11 @@ var commandMenu = (options) => {
   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);
-        const shouldTrigger = line.text.trim() === "" || selection.head === line.from || selection.head > line.from && line.text[selection.head - line.from - 1] === " ";
-        if (shouldTrigger) {
+        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,
@@ -1759,27 +1692,134 @@ var commandMenu = (options) => {
       });
     }
     if (shouldRemove) {
-      options.onDeactivate?.();
+      options.onClose?.();
     }
   });
   return [
-    multilinePlaceholder(options.placeholder ?? `Press '${Array.isArray(options.trigger) ? options.trigger[0] : options.trigger}' for commands`),
-    Prec.highest(commandKeymap),
+    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 useCommandMenu = ({ viewRef, trigger, placeholder: placeholder2, getGroups }) => {
+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/floating-menu.ts
+import { EditorView as EditorView9, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
+import { addEventListener } from "@dxos/async";
+var floatingMenu = (options = {}) => [
+  ViewPlugin7.fromClass(class {
+    constructor(view) {
+      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-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);
+      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) {
+        return;
+      }
+      if (update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(openEffect)))) {
+        this.tag.style.display = "none";
+        this.tag.classList.add("opacity-10");
+      } else if (update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(closeEffect)))) {
+        this.tag.style.display = "block";
+      } else if (update2.docChanged || update2.focusChanged || update2.geometryChanged || update2.selectionSet || update2.viewportChanged) {
+        this.scheduleUpdate();
+      }
+    }
+    updateButtonPosition() {
+      const { x, width } = this.view.contentDOM.getBoundingClientRect();
+      const pos = this.view.state.selection.main.head;
+      const line = this.view.lineBlockAt(pos);
+      const coords = this.view.coordsAtPos(line.from);
+      if (!coords) {
+        return;
+      }
+      const lineHeight = coords.bottom - coords.top;
+      const dy = (lineHeight - (options.height ?? 32)) / 2;
+      const offsetTop = coords.top + dy;
+      const offsetLeft = x + width + (options.padding ?? 8);
+      this.tag.style.top = `${offsetTop}px`;
+      this.tag.style.left = `${offsetLeft}px`;
+      this.tag.style.display = "block";
+    }
+    scheduleUpdate() {
+      if (this.rafId != null) {
+        cancelAnimationFrame(this.rafId);
+      }
+      this.rafId = requestAnimationFrame(this.updateButtonPosition.bind(this));
+    }
+  }),
+  EditorView9.theme({
+    ".cm-ref-tag": {
+      position: "fixed",
+      padding: "0",
+      border: "none",
+      opacity: "0"
+    },
+    "[data-has-focus] & .cm-ref-tag": {
+      opacity: "1"
+    },
+    ".cm-ref-tag button": {
+      display: "grid",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "2rem",
+      height: "2rem"
+    }
+  })
+];
+
+// 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 [_, update2] = useState({});
+  const [_, refresh] = useState({});
   const handleOpenChange = useCallback(async (open2, trigger2) => {
     if (open2 && trigger2) {
-      groupsRef.current = await getGroups(trigger2);
+      groupsRef.current = await getMenu(trigger2);
     }
     setOpen(open2);
     if (!open2) {
@@ -1792,7 +1832,7 @@ var useCommandMenu = ({ viewRef, trigger, placeholder: placeholder2, getGroups }
       });
     }
   }, [
-    getGroups
+    getMenu
   ]);
   const handleActivate = useCallback(async (event) => {
     const item = getItem(groupsRef.current, currentItem);
@@ -1817,43 +1857,45 @@ var useCommandMenu = ({ viewRef, trigger, placeholder: placeholder2, getGroups }
     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;
+  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({});
       }
-      update2({});
-    }
-  }), [
+    });
+  }, [
     handleOpenChange,
-    getGroups,
+    getMenu,
     serializedTrigger,
-    placeholder2
+    placeholder3
   ]);
   return {
     commandMenu: _commandMenu,
@@ -1868,12 +1910,12 @@ var useCommandMenu = ({ viewRef, trigger, placeholder: placeholder2, getGroups }
 };
 
 // packages/ui/react-ui-editor/src/extensions/command/typeahead.ts
-import { EditorSelection, Prec as Prec2, RangeSetBuilder as RangeSetBuilder4 } from "@codemirror/state";
-import { Decoration as Decoration6, keymap as keymap5, ViewPlugin as ViewPlugin7 } 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;
@@ -1882,15 +1924,15 @@ 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 [
-    ViewPlugin7.fromClass(class {
+    ViewPlugin8.fromClass(class {
       constructor() {
         this.decorations = Decoration6.none;
       }
@@ -1900,12 +1942,12 @@ var typeahead = ({ onComplete } = {}) => {
         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) {
+          if (hint2) {
             builder.add(selection.from, selection.to, Decoration6.widget({
-              widget: new Hint(hint)
+              widget: new Hint(hint2)
             }));
           }
         }
@@ -1915,7 +1957,7 @@ var typeahead = ({ onComplete } = {}) => {
       decorations: (v) => v.decorations
     }),
     // Keys.
-    Prec2.highest(keymap5.of([
+    Prec3.highest(keymap5.of([
       {
         key: "Tab",
         preventDefault: true,
@@ -1953,16 +1995,16 @@ var matchCompletion = (completion, word) => {
 // packages/ui/react-ui-editor/src/extensions/comments.ts
 import { invertedEffects } from "@codemirror/commands";
 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 { 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 EditorView9, keymap as keymap6 } 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";
@@ -1973,7 +2015,7 @@ var createEditorStateTransaction = ({ scrollTo, selection }) => {
   return {
     selection,
     scrollIntoView: !scrollTo,
-    effects: scrollTo ? EditorView9.scrollIntoView(scrollTo, {
+    effects: scrollTo ? EditorView10.scrollIntoView(scrollTo, {
       yMargin: 96
     }) : void 0,
     annotations: Transaction.userEvent.of(stateRestoreAnnotation)
@@ -2015,7 +2057,7 @@ var selectionState = ({ getState, setState } = {}) => {
     //     setStateDebounced(id, {});
     //   },
     // }),
-    EditorView9.updateListener.of(({ view, transactions }) => {
+    EditorView10.updateListener.of(({ view, transactions }) => {
       const id = view.state.facet(documentId);
       if (!id || transactions.some((tr) => tr.isUserEvent(stateRestoreAnnotation))) {
         return;
@@ -2083,7 +2125,7 @@ var commentsState = StateField4.define({
             comment,
             range
           };
-        }).filter(isNonNullable);
+        }).filter(isNonNullable2);
         return {
           ...value,
           comments: commentStates
@@ -2096,7 +2138,7 @@ var commentsState = StateField4.define({
     return value;
   }
 });
-var styles2 = EditorView10.theme({
+var styles2 = EditorView11.theme({
   ".cm-comment, .cm-comment-current": {
     margin: "0 -3px",
     padding: "3px",
@@ -2116,7 +2158,7 @@ var createCommentMark = (id, isCurrent) => Decoration7.mark({
     "data-comment-id": id
   }
 });
-var commentsDecorations = EditorView10.decorations.compute([
+var commentsDecorations = EditorView11.decorations.compute([
   commentsState
 ], (state) => {
   const { selection: { current }, comments: comments2 } = state.field(commentsState);
@@ -2135,11 +2177,11 @@ var commentsDecorations = EditorView10.decorations.compute([
     }
     const mark = createCommentMark(comment.comment.id, comment.comment.id === current);
     return mark.range(range.from, range.to);
-  }).filter(isNonNullable);
+  }).filter(isNonNullable2);
   return Decoration7.set(decorations2);
 });
 var commentClickedEffect = StateEffect4.define();
-var handleCommentClick = EditorView10.domEventHandlers({
+var handleCommentClick = EditorView11.domEventHandlers({
   click: (event, view) => {
     let target = event.target;
     const editorRoot = view.dom;
@@ -2178,7 +2220,7 @@ var trackPastedComments = (onUpdate) => {
     }
   };
   return [
-    EditorView10.domEventHandlers({
+    EditorView11.domEventHandlers({
       cut: handleTrack,
       copy: handleTrack
     }),
@@ -2200,7 +2242,7 @@ var trackPastedComments = (onUpdate) => {
       return effects;
     }),
     // Handle paste or the undo of comment deletion.
-    EditorView10.updateListener.of((update2) => {
+    EditorView11.updateListener.of((update2) => {
       const restore = [];
       for (let i = 0; i < update2.transactions.length; i++) {
         const tr = update2.transactions[i];
@@ -2342,7 +2384,7 @@ var comments = (options = {}) => {
     //
     // Track deleted ranges and update ranges for decorations.
     //
-    EditorView10.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) => {
@@ -2374,7 +2416,7 @@ var comments = (options = {}) => {
     //
     // Track selection/proximity.
     //
-    EditorView10.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;
@@ -2408,7 +2450,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);
@@ -2428,7 +2470,7 @@ var scrollThreadIntoView = (view, id, center = true) => {
           anchor: range.from
         } : void 0,
         effects: [
-          needsScroll ? EditorView10.scrollIntoView(range.from, center ? {
+          needsScroll ? EditorView11.scrollIntoView(range.from, center ? {
             y: "center"
           } : void 0) : [],
           needsSelectionUpdate ? setSelection.of({
@@ -2458,7 +2500,7 @@ var ExternalCommentSync = class {
     this.unsubscribe = subscribe(updateComments);
   }
 };
-var createExternalCommentSync = (id, subscribe, getComments) => ViewPlugin8.fromClass(class {
+var createExternalCommentSync = (id, subscribe, getComments) => ViewPlugin9.fromClass(class {
   constructor(view) {
     return new ExternalCommentSync(view, id, subscribe, getComments);
   }
@@ -2492,8 +2534,8 @@ var debugNodeLogger = (log9 = console.log) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/dnd.ts
-import { dropCursor, EditorView as EditorView11 } from "@codemirror/view";
-var styles3 = EditorView11.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)",
@@ -2507,7 +2549,7 @@ var dropFile = (options = {}) => {
   return [
     styles3,
     dropCursor(),
-    EditorView11.domEventHandlers({
+    EditorView12.domEventHandlers({
       drop: (event, view) => {
         event.preventDefault();
         const files = event.dataTransfer?.files;
@@ -2534,7 +2576,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 EditorView14, ViewPlugin as ViewPlugin9, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap8, 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";
@@ -2543,7 +2585,7 @@ import { hexToHue, isNotFalsy as isNotFalsy2 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/focus.ts
 import { StateEffect as StateEffect5, StateField as StateField6 } from "@codemirror/state";
-import { EditorView as EditorView12 } from "@codemirror/view";
+import { EditorView as EditorView13 } from "@codemirror/view";
 var focusEffect = StateEffect5.define();
 var focusField = StateField6.define({
   create: () => false,
@@ -2558,7 +2600,7 @@ var focusField = StateField6.define({
 });
 var focus = [
   focusField,
-  EditorView12.domEventHandlers({
+  EditorView13.domEventHandlers({
     focus: (event, view) => {
       setTimeout(() => view.dispatch({
         effects: focusEffect.of(true)
@@ -2573,7 +2615,7 @@ var focus = [
 ];
 
 // packages/ui/react-ui-editor/src/defaults.ts
-import { EditorView as EditorView13 } from "@codemirror/view";
+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
@@ -2827,20 +2869,19 @@ var editorSlots = {
     className: editorWidth
   }
 };
-var editorGutter = EditorView13.theme({
+var editorGutter = EditorView14.theme({
   ".cm-gutters": {
     background: "var(--dx-baseSurface)",
     paddingRight: "1rem"
   }
 });
-var editorMonospace = EditorView13.theme({
+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");
-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";
@@ -2866,7 +2907,7 @@ var createBasicExtensions = (_props) => {
   const props = defaultsDeep2({}, _props, defaultBasicOptions);
   return [
     // NOTE: Doesn't catch errors in keymap functions.
-    EditorView14.exceptionSink.of((err) => {
+    EditorView15.exceptionSink.of((err) => {
       log5.catch(err, void 0, {
         F: __dxlog_file8,
         L: 100,
@@ -2881,7 +2922,7 @@ var createBasicExtensions = (_props) => {
     props.drawSelection && drawSelection({
       cursorBlinkRate: 1200
     }),
-    props.editable !== void 0 && EditorView14.editable.of(props.editable),
+    props.editable !== void 0 && EditorView15.editable.of(props.editable),
     props.focus && focus,
     props.highlightActiveLine && highlightActiveLine(),
     props.history && history(),
@@ -2889,9 +2930,9 @@ var createBasicExtensions = (_props) => {
       lineNumbers(),
       editorGutter
     ],
-    props.lineWrapping && EditorView14.lineWrapping,
+    props.lineWrapping && EditorView15.lineWrapping,
     props.monospace && editorMonospace,
-    props.placeholder && placeholder(props.placeholder),
+    props.placeholder && placeholder2(props.placeholder),
     props.readOnly !== void 0 && EditorState.readOnly.of(props.readOnly),
     props.scrollPastEnd && scrollPastEnd(),
     props.tabSize && EditorState.tabSize.of(props.tabSize),
@@ -2927,17 +2968,17 @@ var defaultThemeSlots = {
 var createThemeExtensions = ({ themeMode, styles: styles4, syntaxHighlighting: _syntaxHighlighting, slots: _slots } = {}) => {
   const slots = defaultsDeep2({}, _slots, defaultThemeSlots);
   return [
-    EditorView14.darkTheme.of(themeMode === "dark"),
-    EditorView14.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 && EditorView14.editorAttributes.of({
+    slots.editor?.className && EditorView15.editorAttributes.of({
       class: slots.editor.className
     }),
-    slots.content?.className && EditorView14.contentAttributes.of({
+    slots.content?.className && EditorView15.contentAttributes.of({
       class: slots.content.className
     }),
-    slots.scroll?.className && ViewPlugin9.fromClass(class {
+    slots.scroll?.className && ViewPlugin10.fromClass(class {
       constructor(view) {
         view.scrollDOM.classList.add(slots.scroll.className);
       }
@@ -2968,7 +3009,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 EditorView15 } from "@codemirror/view";
+import { EditorView as EditorView16 } from "@codemirror/view";
 import React2 from "react";
 import { Icon } from "@dxos/react-ui";
 var folding = (_props = {}) => [
@@ -2992,7 +3033,7 @@ var folding = (_props = {}) => [
       }));
     }
   }),
-  EditorView15.theme({
+  EditorView16.theme({
     ".cm-foldGutter": {
       opacity: 0.3,
       transition: "opacity 0.3s",
@@ -3005,7 +3046,7 @@ 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 { 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) {
@@ -3025,7 +3066,7 @@ var tagMatcher = new MatchDecorator({
   })
 });
 var hashtag = () => [
-  ViewPlugin10.fromClass(class {
+  ViewPlugin11.fromClass(class {
     constructor(view) {
       this.tags = tagMatcher.createDeco(view);
     }
@@ -3034,11 +3075,11 @@ var hashtag = () => [
     }
   }, {
     decorations: (instance) => instance.tags,
-    provide: (plugin) => EditorView16.atomicRanges.of((view) => {
+    provide: (plugin) => EditorView17.atomicRanges.of((view) => {
       return view.plugin(plugin)?.tags || Decoration8.none;
     })
   }),
-  EditorView16.theme({
+  EditorView17.theme({
     ".cm-tag": {
       borderRadius: "4px",
       marginRight: "6px",
@@ -3093,14 +3134,14 @@ var schemaLinter = (validate) => (view) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/listener.ts
-import { EditorView as EditorView17 } from "@codemirror/view";
+import { EditorView as EditorView18 } from "@codemirror/view";
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
-  onFocus && extensions.push(EditorView17.focusChangeEffect.of((_, focusing) => {
+  onFocus && extensions.push(EditorView18.focusChangeEffect.of((_, focusing) => {
     onFocus(focusing);
     return null;
   }));
-  onChange && extensions.push(EditorView17.updateListener.of((update2) => {
+  onChange && extensions.push(EditorView18.updateListener.of((update2) => {
     onChange(update2.state.doc.toString(), update2.state.facet(documentId));
   }));
   return extensions;
@@ -3110,7 +3151,7 @@ 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 EditorView18, keymap as keymap9 } from "@codemirror/view";
+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) {
@@ -4199,7 +4240,7 @@ var getFormatting = (state) => {
   };
 };
 var useFormattingState = (state) => {
-  return useMemo3(() => EditorView18.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;
@@ -4263,7 +4304,6 @@ 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 keymap10 } from "@codemirror/view";
 import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
 
@@ -4476,8 +4516,7 @@ var createMarkdownExtensions = (options = {}) => {
       options.indentWithTab !== false && indentWithTab2,
       // https://codemirror.net/docs/ref/#commands.defaultKeymap
       ...defaultKeymap2,
-      ...completionKeymap2,
-      ...lintKeymap
+      ...completionKeymap2
     ].filter(isNotFalsy3))
   ];
 };
@@ -4512,16 +4551,16 @@ var convertTreeToJson = (state) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
 import { syntaxTree as syntaxTree7 } from "@codemirror/language";
 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 { 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 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 ViewPlugin11 } from "@codemirror/view";
+import { ViewPlugin as ViewPlugin12 } from "@codemirror/view";
 var adjustChanges = () => {
-  return ViewPlugin11.fromClass(class {
+  return ViewPlugin12.fromClass(class {
     update(update2) {
       const tree = syntaxTree4(update2.state);
       const adjustments = [];
@@ -4663,7 +4702,7 @@ var getValidUrl = (str) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/image.ts
 import { syntaxTree as syntaxTree5 } from "@codemirror/language";
 import { StateField as StateField8 } from "@codemirror/state";
-import { Decoration as Decoration9, EditorView as EditorView19, WidgetType as WidgetType5 } from "@codemirror/view";
+import { Decoration as Decoration9, EditorView as EditorView20, WidgetType as WidgetType5 } from "@codemirror/view";
 var image = (_options = {}) => {
   return [
     StateField8.define({
@@ -4691,7 +4730,7 @@ var image = (_options = {}) => {
           add: buildDecorations(from, to, tr.state)
         });
       },
-      provide: (field) => EditorView19.decorations.from(field)
+      provide: (field) => EditorView20.decorations.from(field)
     })
   ];
 };
@@ -4750,10 +4789,10 @@ var ImageWidget = class extends WidgetType5 {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/styles.ts
-import { EditorView as EditorView20 } from "@codemirror/view";
+import { EditorView as EditorView21 } from "@codemirror/view";
 var bulletListIndentationWidth = 24;
 var orderedListIndentationWidth = 36;
-var formattingStyles = EditorView20.theme({
+var formattingStyles = EditorView21.theme({
   /**
   * Horizontal rule.
   */
@@ -4875,12 +4914,12 @@ var formattingStyles = EditorView20.theme({
 // packages/ui/react-ui-editor/src/extensions/markdown/table.ts
 import { syntaxTree as syntaxTree6 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder5, StateField as StateField9 } from "@codemirror/state";
-import { Decoration as Decoration10, EditorView as EditorView21, WidgetType as WidgetType6 } from "@codemirror/view";
+import { Decoration as Decoration10, EditorView as EditorView22, WidgetType as WidgetType6 } from "@codemirror/view";
 var table = (options = {}) => {
   return StateField9.define({
     create: (state) => update(state, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView21.decorations.from(field)
+    provide: (field) => EditorView22.decorations.from(field)
   });
 };
 var update = (state, _options) => {
@@ -5381,7 +5420,7 @@ var buildDecorations2 = (view, options, focus2) => {
 var forceUpdate = StateEffect6.define();
 var decorateMarkdown = (options = {}) => {
   return [
-    ViewPlugin12.fromClass(class {
+    ViewPlugin13.fromClass(class {
       constructor(view) {
         ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(view, options, view.hasFocus));
       }
@@ -5413,9 +5452,9 @@ var decorateMarkdown = (options = {}) => {
       }
     }, {
       provide: (plugin) => [
-        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)
+        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(),
@@ -5660,6 +5699,7 @@ var traverse = (root, cb) => {
         return value;
       }
     }
+    return void 0;
   };
   return t(root, root.type === "root" ? -1 : 0);
 };
@@ -5717,7 +5757,7 @@ var outlinerTree = (options = {}) => {
           case "BulletList": {
             invariant5(current, void 0, {
               F: __dxlog_file11,
-              L: 217,
+              L: 219,
               S: void 0,
               A: [
                 "current",
@@ -5734,7 +5774,7 @@ var outlinerTree = (options = {}) => {
           case "ListItem": {
             invariant5(parent, void 0, {
               F: __dxlog_file11,
-              L: 226,
+              L: 228,
               S: void 0,
               A: [
                 "parent",
@@ -5776,7 +5816,7 @@ var outlinerTree = (options = {}) => {
           case "ListMark": {
             invariant5(current, void 0, {
               F: __dxlog_file11,
-              L: 270,
+              L: 272,
               S: void 0,
               A: [
                 "current",
@@ -5790,7 +5830,7 @@ var outlinerTree = (options = {}) => {
           case "Task": {
             invariant5(current, void 0, {
               F: __dxlog_file11,
-              L: 276,
+              L: 278,
               S: void 0,
               A: [
                 "current",
@@ -5803,7 +5843,7 @@ var outlinerTree = (options = {}) => {
           case "TaskMarker": {
             invariant5(current, void 0, {
               F: __dxlog_file11,
-              L: 281,
+              L: 283,
               S: void 0,
               A: [
                 "current",
@@ -5819,7 +5859,7 @@ var outlinerTree = (options = {}) => {
         if (node.name === "BulletList") {
           invariant5(parent, void 0, {
             F: __dxlog_file11,
-            L: 289,
+            L: 291,
             S: void 0,
             A: [
               "parent",
@@ -5833,7 +5873,7 @@ var outlinerTree = (options = {}) => {
     });
     invariant5(tree, void 0, {
       F: __dxlog_file11,
-      L: 296,
+      L: 298,
       S: void 0,
       A: [
         "tree",
@@ -6123,18 +6163,18 @@ var commands = () => keymap12.of([
 ]);
 
 // packages/ui/react-ui-editor/src/extensions/outliner/outliner.ts
-import { Prec as Prec3 } from "@codemirror/state";
-import { Decoration as Decoration12, EditorView as EditorView23, ViewPlugin as ViewPlugin14 } from "@codemirror/view";
+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 ViewPlugin13 } 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 ViewPlugin13.fromClass(class {
+  return ViewPlugin14.fromClass(class {
     constructor(view) {
       const first = view.state.doc.lineAt(0);
       const text = view.state.sliceDoc(first.from, first.to);
@@ -6319,7 +6359,7 @@ var editor = () => [
 // packages/ui/react-ui-editor/src/extensions/outliner/outliner.ts
 var outliner = (options = {}) => [
   // Commands.
-  Prec3.highest(commands()),
+  Prec4.highest(commands()),
   // Selection.
   selectionCompartment.of(selectionFacet.of([])),
   // State.
@@ -6335,12 +6375,12 @@ var outliner = (options = {}) => [
     listPaddingLeft: 8
   }),
   // Researve space for menu.
-  EditorView23.contentAttributes.of({
+  EditorView24.contentAttributes.of({
     class: "is-full !mr-[3rem]"
   })
 ];
 var decorations = () => [
-  ViewPlugin14.fromClass(class {
+  ViewPlugin15.fromClass(class {
     constructor(view) {
       this.decorations = Decoration12.none;
       this.updateDecorations(view.state, view);
@@ -6375,7 +6415,7 @@ var decorations = () => [
     decorations: (v) => v.decorations
   }),
   // Theme.
-  EditorView23.theme(Object.assign({
+  EditorView24.theme(Object.assign({
     ".cm-list-item": {
       borderLeftWidth: "1px",
       borderRightWidth: "1px",
@@ -6412,7 +6452,7 @@ var decorations = () => [
 import "@dxos/lit-ui/dx-ref-tag.pcss";
 import { syntaxTree as syntaxTree10 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder7, StateField as StateField11 } from "@codemirror/state";
-import { Decoration as Decoration13, EditorView as EditorView24, WidgetType as WidgetType8 } from "@codemirror/view";
+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:
@@ -6421,16 +6461,9 @@ var preview = (options = {}) => {
       create: (state) => buildDecorations3(state, options),
       update: (_, tr) => buildDecorations3(tr.state, options),
       provide: (field) => [
-        EditorView24.decorations.from(field),
-        EditorView24.atomicRanges.of((view) => view.state.field(field))
+        EditorView25.decorations.from(field),
+        EditorView25.atomicRanges.of((view) => view.state.field(field))
       ]
-    }),
-    EditorView24.theme({
-      ".cm-preview-block": {
-        "--dx-card-spacing-inline": "var(--dx-trimMd)",
-        "--dx-card-spacing-block": "var(--dx-trimMd)",
-        marginInline: "calc(-1*var(--dx-trimMd))"
-      }
     })
   ];
 };
@@ -6471,7 +6504,7 @@ var buildDecorations3 = (state, options) => {
         //
         case "Image": {
           const link = getLinkRef(state, node.node);
-          if (options.renderBlock && link) {
+          if (options.addBlockContainer && options.removeBlockContainer && link) {
             builder.add(node.from, node.to, Decoration13.replace({
               block: true,
               // atomic: true,
@@ -6514,50 +6547,13 @@ var PreviewBlockWidget = class extends WidgetType8 {
   }
   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
@@ -6998,20 +6994,15 @@ 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();
   }
@@ -7297,7 +7288,10 @@ var RefPopover = /* @__PURE__ */ forwardRef(({ children, open, onOpenChange, mod
   try {
     const [rootRef, setRootRef] = useState2(null);
     useEffect3(() => {
-      return rootRef && onActivate ? addEventListener2(rootRef, "dx-ref-tag-activate", onActivate, customEventOptions) : void 0;
+      if (!rootRef || !onActivate) {
+        return;
+      }
+      return addEventListener2(rootRef, "dx-ref-tag-activate", onActivate, customEventOptions);
     }, [
       rootRef,
       onActivate
@@ -7406,7 +7400,10 @@ var RefDropdownMenuProvider = ({ children, onLookup }) => {
       onLookup
     ]);
     useEffect4(() => {
-      return rootRef ? addEventListener3(rootRef, "dx-ref-tag-activate", handleDxRefTagActivate, customEventOptions2) : void 0;
+      if (!rootRef) {
+        return;
+      }
+      return addEventListener3(rootRef, "dx-ref-tag-activate", handleDxRefTagActivate, customEventOptions2);
     }, [
       rootRef
     ]);
@@ -7434,7 +7431,7 @@ var RefDropdownMenu = {
 
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { EditorState as EditorState3 } from "@codemirror/state";
-import { EditorView as EditorView25 } from "@codemirror/view";
+import { EditorView as EditorView26 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 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";
@@ -7478,7 +7475,7 @@ var useTextEditor = (props = {}, deps = []) => {
           id && documentId.of(id),
           extensions,
           // NOTE: This doesn't catch errors in keymap functions.
-          EditorView25.exceptionSink.of((err) => {
+          EditorView26.exceptionSink.of((err) => {
             log8.catch(err, void 0, {
               F: __dxlog_file13,
               L: 97,
@@ -7488,10 +7485,10 @@ var useTextEditor = (props = {}, deps = []) => {
           })
         ].filter(isNotFalsy4)
       });
-      view2 = new EditorView25({
+      view2 = new EditorView26({
         parent: parentRef.current,
         state,
-        scrollTo: scrollTo ? EditorView25.scrollIntoView(scrollTo, {
+        scrollTo: scrollTo ? EditorView26.scrollIntoView(scrollTo, {
           yMargin: 96
         }) : void 0,
         dispatchTransactions: debug ? debugDispatcher : void 0
@@ -7591,7 +7588,7 @@ export {
   EditorInputModes,
   EditorState4 as EditorState,
   EditorToolbar,
-  EditorView26 as EditorView,
+  EditorView27 as EditorView,
   EditorViewMode,
   EditorViewModes,
   Inline,
@@ -7666,6 +7663,7 @@ export {
   formattingKeymap,
   getFormatting,
   getItem,
+  getLinkRef,
   getListItemContent,
   getNextItem,
   getPreviousItem,
@@ -7691,7 +7689,6 @@ export {
   mention,
   moveItemDown,
   moveItemUp,
-  multilinePlaceholder,
   openCommand,
   openEffect,
   outliner,
@@ -7715,7 +7712,6 @@ export {
   setStyle,
   singleValueFacet,
   stackItemContentEditorClassNames,
-  stackItemContentToolbarClassNames,
   staticCompletion,
   table,
   tags2 as tags,