@dxos/react-ui-editor 0.8.1 → 0.8.2-main.12df754

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

@@ -49,10 +49,10 @@ import { textBlockWidth } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/components/EditorToolbar/util.ts
 import { useMemo } from "react";
-import { create } from "@dxos/live-object";
+import { live } from "@dxos/live-object";
 import { createMenuAction, createMenuItemGroup } from "@dxos/react-ui-menu";
 var useEditorToolbarState = (initialState = {}) => {
-  return useMemo(() => create(initialState), []);
+  return useMemo(() => live(initialState), []);
 };
 var createEditorAction = (payload, icon, label = [
   `${payload.type} label`,
@@ -268,7 +268,7 @@ var createLists = (state) => {
   };
 };
 
-// packages/ui/react-ui-editor/src/components/EditorToolbar/viewMode.ts
+// packages/ui/react-ui-editor/src/components/EditorToolbar/view-mode.ts
 var createViewModeGroupAction = (value) => createEditorActionGroup("viewMode", {
   variant: "dropdownMenu",
   applyActive: true,
@@ -313,99 +313,12 @@ var createViewMode = (state) => {
   };
 };
 
-// packages/ui/react-ui-editor/src/fragments.ts
-import { mx } from "@dxos/react-ui-theme";
-var stackItemContentToolbarClassNames = (role) => mx("attention-surface is-full border-be !border-separator", role === "section" && "sticky block-start-0 z-[1] -mbe-px min-is-0");
-
-// packages/ui/react-ui-editor/src/components/EditorToolbar/EditorToolbar.tsx
-var createToolbar = ({ state, customActions, ...features }) => {
-  const nodes = [];
-  const edges = [];
-  if (features.headings ?? true) {
-    const headings2 = createHeadings(state);
-    nodes.push(...headings2.nodes);
-    edges.push(...headings2.edges);
-  }
-  if (features.formatting ?? true) {
-    const formatting = createFormatting(state);
-    nodes.push(...formatting.nodes);
-    edges.push(...formatting.edges);
-  }
-  if (features.lists ?? true) {
-    const lists = createLists(state);
-    nodes.push(...lists.nodes);
-    edges.push(...lists.edges);
-  }
-  if (features.blocks ?? true) {
-    const blocks = createBlocks(state);
-    nodes.push(...blocks.nodes);
-    edges.push(...blocks.edges);
-  }
-  if (customActions) {
-    const custom = customActions();
-    nodes.push(...custom.nodes);
-    edges.push(...custom.edges);
-  }
-  const editorToolbarGap = createGapSeparator();
-  nodes.push(...editorToolbarGap.nodes);
-  edges.push(...editorToolbarGap.edges);
-  if (features.comment ?? true) {
-    const comment = createComment(state);
-    nodes.push(...comment.nodes);
-    edges.push(...comment.edges);
-  }
-  if (features.search ?? true) {
-    nodes.push(editorToolbarSearch);
-    edges.push({
-      source: "root",
-      target: editorToolbarSearch.id
-    });
-  }
-  if (features.viewMode ?? true) {
-    const viewMode = createViewMode(state);
-    nodes.push(...viewMode.nodes);
-    edges.push(...viewMode.edges);
-  }
-  return {
-    nodes,
-    edges
-  };
-};
-var useEditorToolbarActionGraph = ({ onAction, ...props }) => {
-  const menuCreator = useCallback(() => createToolbar(props), [
-    props
-  ]);
-  const { resolveGroupItems } = useMenuActions(menuCreator);
-  return {
-    resolveGroupItems,
-    onAction
-  };
-};
-var EditorToolbar = ({ classNames, attendableId, role, ...props }) => {
-  const menuProps = useEditorToolbarActionGraph(props);
-  return /* @__PURE__ */ React.createElement("div", {
-    role: "none",
-    className: stackItemContentToolbarClassNames(role)
-  }, /* @__PURE__ */ React.createElement(ElevationProvider, {
-    elevation: role === "section" ? "positioned" : "base"
-  }, /* @__PURE__ */ React.createElement(MenuProvider, {
-    ...menuProps,
-    attendableId
-  }, /* @__PURE__ */ React.createElement(ToolbarMenu, {
-    classNames: [
-      textBlockWidth,
-      "!bg-transparent",
-      classNames
-    ]
-  }))));
-};
-
 // packages/ui/react-ui-editor/src/defaults.ts
 import { EditorView } from "@codemirror/view";
-import { mx as mx3 } from "@dxos/react-ui-theme";
+import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/styles/markdown.ts
-import { mx as mx2 } from "@dxos/react-ui-theme";
+import { mx } from "@dxos/react-ui-theme";
 var headings = {
   1: "text-4xl",
   2: "text-3xl",
@@ -419,7 +332,7 @@ var theme = {
   codeMark: "font-mono text-primary-500",
   mark: "opacity-50",
   heading: (level) => {
-    return mx2(headings[level], "dark:text-primary-400");
+    return mx(headings[level], "dark:text-primary-400");
   }
 };
 
@@ -638,8 +551,9 @@ var defaultTheme = {
 
 // packages/ui/react-ui-editor/src/defaults.ts
 var margin = "!mt-[1rem]";
-var editorContent = mx3(margin, "!mli-auto w-full max-w-[min(50rem,100%-4rem)]");
-var editorFullWidth = mx3(margin);
+var editorWidth = "!mli-auto is-full max-is-[min(50rem,100%-4rem)]";
+var editorContent = mx2(margin, editorWidth);
+var editorFullWidth = mx2(margin);
 var editorGutter = EditorView.theme({
   // Match margin from content.
   // Gutter = 2rem + 1rem margin.
@@ -654,8 +568,91 @@ var editorMonospace = EditorView.theme({
   }
 });
 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) => mx3("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 stackItemContentToolbarClassNames2 = (role) => mx3("attention-surface is-full border-be !border-separator", role === "section" && "sticky block-start-0 z-[1] -mbe-px min-is-0");
+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("attention-surface is-full border-be !border-separator relative z-[1]", role === "section" && "sticky block-start-0 -mbe-px min-is-0");
+
+// packages/ui/react-ui-editor/src/components/EditorToolbar/EditorToolbar.tsx
+var createToolbar = ({ state, customActions, ...features }) => {
+  const nodes = [];
+  const edges = [];
+  if (features.headings ?? true) {
+    const headings2 = createHeadings(state);
+    nodes.push(...headings2.nodes);
+    edges.push(...headings2.edges);
+  }
+  if (features.formatting ?? true) {
+    const formatting = createFormatting(state);
+    nodes.push(...formatting.nodes);
+    edges.push(...formatting.edges);
+  }
+  if (features.lists ?? true) {
+    const lists = createLists(state);
+    nodes.push(...lists.nodes);
+    edges.push(...lists.edges);
+  }
+  if (features.blocks ?? true) {
+    const blocks = createBlocks(state);
+    nodes.push(...blocks.nodes);
+    edges.push(...blocks.edges);
+  }
+  if (customActions) {
+    const custom = customActions();
+    nodes.push(...custom.nodes);
+    edges.push(...custom.edges);
+  }
+  const editorToolbarGap = createGapSeparator();
+  nodes.push(...editorToolbarGap.nodes);
+  edges.push(...editorToolbarGap.edges);
+  if (features.comment ?? true) {
+    const comment = createComment(state);
+    nodes.push(...comment.nodes);
+    edges.push(...comment.edges);
+  }
+  if (features.search ?? true) {
+    nodes.push(editorToolbarSearch);
+    edges.push({
+      source: "root",
+      target: editorToolbarSearch.id
+    });
+  }
+  if (features.viewMode ?? true) {
+    const viewMode = createViewMode(state);
+    nodes.push(...viewMode.nodes);
+    edges.push(...viewMode.edges);
+  }
+  return {
+    nodes,
+    edges
+  };
+};
+var useEditorToolbarActionGraph = ({ onAction, ...props }) => {
+  const menuCreator = useCallback(() => createToolbar(props), [
+    props
+  ]);
+  const { resolveGroupItems } = useMenuActions(menuCreator);
+  return {
+    resolveGroupItems,
+    onAction
+  };
+};
+var EditorToolbar = ({ classNames, attendableId, role, ...props }) => {
+  const menuProps = useEditorToolbarActionGraph(props);
+  return /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: stackItemContentToolbarClassNames(role)
+  }, /* @__PURE__ */ React.createElement(ElevationProvider, {
+    elevation: role === "section" ? "positioned" : "base"
+  }, /* @__PURE__ */ React.createElement(MenuProvider, {
+    ...menuProps,
+    attendableId
+  }, /* @__PURE__ */ React.createElement(ToolbarMenu, {
+    classNames: [
+      textBlockWidth,
+      "!bg-transparent",
+      classNames
+    ]
+  }))));
+};
 
 // packages/ui/react-ui-editor/src/extensions/annotations.ts
 import { StateField } from "@codemirror/state";
@@ -796,7 +793,7 @@ var clientRectsFor = (dom) => {
 // packages/ui/react-ui-editor/src/util/react.tsx
 import React2 from "react";
 import { createRoot } from "react-dom/client";
-import { ThemeProvider } from "@dxos/react-ui";
+import { ThemeProvider, Tooltip } from "@dxos/react-ui";
 import { defaultTx } from "@dxos/react-ui-theme";
 var createElement = (tag, options, children) => {
   const el = document.createElement(tag);
@@ -816,6 +813,11 @@ var renderRoot = (root, node) => {
   }, node));
   return root;
 };
+var createRenderer = (Component) => (el, props) => {
+  renderRoot(el, /* @__PURE__ */ React2.createElement(ThemeProvider, {
+    tx: defaultTx
+  }, /* @__PURE__ */ React2.createElement(Tooltip.Provider, null, /* @__PURE__ */ React2.createElement(Component, props))));
+};
 
 // packages/ui/react-ui-editor/src/extensions/annotations.ts
 var annotationMark = Decoration.mark({
@@ -1859,15 +1861,11 @@ var random = (min, max) => {
   return min + ~~(Math.random() * (max - min + 1));
 };
 
-// packages/ui/react-ui-editor/src/extensions/command/command.ts
-import { EditorView as EditorView8, keymap as keymap3 } from "@codemirror/view";
-
-// packages/ui/react-ui-editor/src/extensions/command/hint.ts
-import { RangeSetBuilder } from "@codemirror/state";
-import { Decoration as Decoration3, EditorView as EditorView6, ViewPlugin as ViewPlugin3, WidgetType as WidgetType2 } from "@codemirror/view";
+// packages/ui/react-ui-editor/src/extensions/command/action.ts
+import { StateEffect as StateEffect2 } from "@codemirror/state";
 
 // packages/ui/react-ui-editor/src/extensions/command/state.ts
-import { StateEffect as StateEffect2, StateField as StateField3 } from "@codemirror/state";
+import { StateField as StateField3 } from "@codemirror/state";
 import { showTooltip } from "@codemirror/view";
 var commandConfig = singleValueFacet();
 var commandState = StateField3.define({
@@ -1877,8 +1875,8 @@ var commandState = StateField3.define({
       if (effect.is(closeEffect)) {
         return {};
       }
-      if (effect.is(openEffect)) {
-        const options = tr.state.facet(commandConfig);
+      const { renderDialog } = tr.state.facet(commandConfig);
+      if (effect.is(openEffect) && renderDialog) {
         const { pos, fullWidth } = effect.value;
         const tooltip = {
           pos,
@@ -1886,34 +1884,39 @@ var commandState = StateField3.define({
           arrow: false,
           strictSide: true,
           create: (view) => {
-            const dom = document.createElement("div");
+            const root = document.createElement("div");
             const tooltipView = {
-              dom,
+              dom: root,
               mount: (view2) => {
                 if (fullWidth) {
-                  const parent = dom.parentElement;
+                  const parent = root.parentElement;
                   const { paddingLeft, paddingRight } = window.getComputedStyle(parent);
                   const widthWithoutPadding = parent.clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
-                  dom.style.width = `${widthWithoutPadding}px`;
+                  root.style.width = `${widthWithoutPadding}px`;
                 }
-                options.onRenderDialog(dom, (action) => {
-                  view2.dispatch({
-                    effects: closeEffect.of(null)
-                  });
-                  if (action?.insert?.length) {
-                    const text = action.insert + "\n";
+                renderDialog(root, {
+                  onAction: (action) => {
                     view2.dispatch({
-                      changes: {
-                        from: pos,
-                        insert: text
-                      },
-                      selection: {
-                        anchor: pos + text.length
-                      }
+                      effects: closeEffect.of(null)
                     });
+                    switch (action?.type) {
+                      case "insert": {
+                        const text = action.text + "\n";
+                        view2.dispatch({
+                          changes: {
+                            from: pos,
+                            insert: text
+                          },
+                          selection: {
+                            anchor: pos + text.length
+                          }
+                        });
+                        break;
+                      }
+                    }
+                    requestAnimationFrame(() => view2.focus());
                   }
-                  requestAnimationFrame(() => view2.focus());
-                });
+                }, view2);
               }
             };
             return tooltipView;
@@ -1930,6 +1933,8 @@ var commandState = StateField3.define({
     showTooltip.from(field, (value) => value.tooltip ?? null)
   ]
 });
+
+// packages/ui/react-ui-editor/src/extensions/command/action.ts
 var openEffect = StateEffect2.define();
 var closeEffect = StateEffect2.define();
 var openCommand = (view) => {
@@ -1968,7 +1973,38 @@ var commandKeyBindings = [
   }
 ];
 
+// packages/ui/react-ui-editor/src/extensions/command/command.ts
+import { EditorView as EditorView7, keymap as keymap3 } from "@codemirror/view";
+
 // packages/ui/react-ui-editor/src/extensions/command/hint.ts
+import { RangeSetBuilder } from "@codemirror/state";
+import { Decoration as Decoration3, EditorView as EditorView6, ViewPlugin as ViewPlugin3, WidgetType as WidgetType2 } from "@codemirror/view";
+var hintViewPlugin = ({ onHint }) => ViewPlugin3.fromClass(class {
+  constructor() {
+    this.deco = Decoration3.none;
+  }
+  update(update2) {
+    const builder = new RangeSetBuilder();
+    const cState = update2.view.state.field(commandState, false);
+    if (!cState?.tooltip) {
+      const selection = update2.view.state.selection.main;
+      const line = update2.view.state.doc.lineAt(selection.from);
+      if (selection.from === selection.to && line.from === line.to) {
+        const hint = onHint();
+        if (hint) {
+          builder.add(selection.from, selection.to, Decoration3.widget({
+            widget: new CommandHint(hint)
+          }));
+        }
+      }
+    }
+    this.deco = builder.finish();
+  }
+}, {
+  provide: (plugin) => [
+    EditorView6.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration3.none)
+  ]
+});
 var CommandHint = class extends WidgetType2 {
   constructor(content) {
     super();
@@ -2008,32 +2044,6 @@ var CommandHint = class extends WidgetType2 {
     return false;
   }
 };
-var hintViewPlugin = ({ onHint }) => ViewPlugin3.fromClass(class {
-  constructor() {
-    this.deco = Decoration3.none;
-  }
-  update(update2) {
-    const builder = new RangeSetBuilder();
-    const cState = update2.view.state.field(commandState, false);
-    if (!cState?.tooltip) {
-      const selection = update2.view.state.selection.main;
-      const line = update2.view.state.doc.lineAt(selection.from);
-      if (selection.from === selection.to && line.from === line.to) {
-        const hint = onHint();
-        if (hint) {
-          builder.add(selection.from, selection.to, Decoration3.widget({
-            widget: new CommandHint(hint)
-          }));
-        }
-      }
-    }
-    this.deco = builder.finish();
-  }
-}, {
-  provide: (plugin) => [
-    EditorView6.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration3.none)
-  ]
-});
 
 // packages/ui/react-ui-editor/src/extensions/command/menu.ts
 import { ViewPlugin as ViewPlugin4 } from "@codemirror/view";
@@ -2049,11 +2059,11 @@ var floatingMenu = (options) => ViewPlugin4.fromClass(class {
     this.button.style.position = "absolute";
     this.button.style.zIndex = "10";
     this.button.style.display = "none";
-    options.onRenderMenu(this.button, () => {
-      openCommand(view);
-    });
+    options.renderMenu(this.button, {
+      onAction: () => openCommand(view)
+    }, view);
     container.appendChild(this.button);
-    container.addEventListener("scroll", this.scheduleUpdate);
+    container.addEventListener("scroll", this.scheduleUpdate.bind(this));
     this.scheduleUpdate();
   }
   update(update2) {
@@ -2069,7 +2079,7 @@ var floatingMenu = (options) => ViewPlugin4.fromClass(class {
     if (this.rafId != null) {
       cancelAnimationFrame(this.rafId);
     }
-    this.rafId = requestAnimationFrame(() => this.updateButtonPosition());
+    this.rafId = requestAnimationFrame(this.updateButtonPosition.bind(this));
   }
   updateButtonPosition() {
     const pos = this.view.state.selection.main.head;
@@ -2099,83 +2109,24 @@ var floatingMenu = (options) => ViewPlugin4.fromClass(class {
   }
 });
 
-// packages/ui/react-ui-editor/src/extensions/command/preview.ts
-import { syntaxTree } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField4 } from "@codemirror/state";
-import { Decoration as Decoration4, EditorView as EditorView7, WidgetType as WidgetType3 } from "@codemirror/view";
-var preview = (options) => {
-  return [
-    StateField4.define({
-      create: (state) => buildDecorations(state, options),
-      update: (_, tr) => buildDecorations(tr.state, options),
-      // TODO(burdon): Make atomic.
-      provide: (field) => EditorView7.decorations.from(field)
-    })
-  ];
-};
-var buildDecorations = (state, options) => {
-  const builder = new RangeSetBuilder2();
-  syntaxTree(state).iterate({
-    enter: (node) => {
-      if (node.name === "Link") {
-        const urlNode = node.node.getChild("URL");
-        if (urlNode) {
-          const text = state.sliceDoc(node.from + 1, urlNode.from - 2);
-          const url = state.sliceDoc(urlNode.from, urlNode.to);
-          builder.add(node.from, node.to, Decoration4.replace({
-            block: true,
-            widget: new PreviewWidget(options.onRenderPreview, url, text)
-          }));
-        }
-      }
-    }
-  });
-  return builder.finish();
-};
-var PreviewWidget = class extends WidgetType3 {
-  constructor(_onRenderPreview, _url, _text) {
-    super();
-    this._onRenderPreview = _onRenderPreview;
-    this._url = _url;
-    this._text = _text;
-  }
-  eq(other) {
-    return this._url === other._url;
-  }
-  toDOM(view) {
-    const root = document.createElement("div");
-    root.classList.add("cm-preview");
-    this._onRenderPreview(root, {
-      url: this._url,
-      text: this._text
-    });
-    return root;
-  }
-};
-
 // packages/ui/react-ui-editor/src/extensions/command/command.ts
-var command = (options) => {
+var command = (options = {}) => {
   return [
+    keymap3.of(commandKeyBindings),
     commandConfig.of(options),
     commandState,
-    keymap3.of(commandKeyBindings),
-    preview(options),
-    floatingMenu(options),
-    hintViewPlugin(options),
-    EditorView8.focusChangeEffect.of((_, focusing) => {
+    options.renderMenu ? floatingMenu({
+      renderMenu: options.renderMenu
+    }) : [],
+    options.onHint ? hintViewPlugin({
+      onHint: options.onHint
+    }) : [],
+    EditorView7.focusChangeEffect.of((_, focusing) => {
       return focusing ? closeEffect.of(null) : null;
     }),
-    EditorView8.theme({
+    EditorView7.theme({
       ".cm-tooltip": {
         background: "transparent"
-      },
-      ".cm-preview": {
-        marginLeft: "-1rem",
-        marginRight: "-1rem",
-        padding: "1rem",
-        borderRadius: "1rem",
-        background: "var(--dx-modalSurface)",
-        border: "1px solid var(--dx-separator)"
       }
     })
   ];
@@ -2183,8 +2134,8 @@ var command = (options) => {
 
 // packages/ui/react-ui-editor/src/extensions/comments.ts
 import { invertedEffects } from "@codemirror/commands";
-import { StateEffect as StateEffect3, StateField as StateField5 } from "@codemirror/state";
-import { hoverTooltip, keymap as keymap5, Decoration as Decoration5, EditorView as EditorView10, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
+import { StateEffect as StateEffect3, StateField as StateField4 } from "@codemirror/state";
+import { hoverTooltip, keymap as keymap5, Decoration as Decoration4, EditorView as EditorView9, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
 import sortBy from "lodash.sortby";
 import { useEffect, useMemo as useMemo2 } from "react";
 import { debounce as debounce2 } from "@dxos/async";
@@ -2193,7 +2144,7 @@ import { isNonNullable } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/selection.ts
 import { Transaction } from "@codemirror/state";
-import { EditorView as EditorView9, keymap as keymap4 } from "@codemirror/view";
+import { EditorView as EditorView8, keymap as keymap4 } from "@codemirror/view";
 import { debounce } from "@dxos/async";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { isNotFalsy as isNotFalsy2 } from "@dxos/util";
@@ -2204,7 +2155,7 @@ var createEditorStateTransaction = ({ scrollTo, selection }) => {
   return {
     selection,
     scrollIntoView: !scrollTo,
-    effects: scrollTo ? EditorView9.scrollIntoView(scrollTo, {
+    effects: scrollTo ? EditorView8.scrollIntoView(scrollTo, {
       yMargin: 96
     }) : void 0,
     annotations: Transaction.userEvent.of(stateRestoreAnnotation)
@@ -2246,7 +2197,7 @@ var selectionState = ({ getState, setState } = {}) => {
     //     setStateDebounced(id, {});
     //   },
     // }),
-    EditorView9.updateListener.of(({ view, transactions }) => {
+    EditorView8.updateListener.of(({ view, transactions }) => {
       const id = view.state.facet(documentId);
       if (!id || transactions.some((tr) => tr.isUserEvent(stateRestoreAnnotation))) {
         return;
@@ -2289,7 +2240,7 @@ var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src
 var setComments = StateEffect3.define();
 var setSelection = StateEffect3.define();
 var setCommentState = StateEffect3.define();
-var commentsState = StateField5.define({
+var commentsState = StateField4.define({
   create: (state) => ({
     id: state.facet(documentId),
     comments: [],
@@ -2327,7 +2278,7 @@ var commentsState = StateField5.define({
     return value;
   }
 });
-var styles3 = EditorView10.theme({
+var styles3 = EditorView9.theme({
   ".cm-comment, .cm-comment-current": {
     margin: "0 -3px",
     padding: "3px",
@@ -2340,14 +2291,14 @@ var styles3 = EditorView10.theme({
     textDecoration: "underline"
   }
 });
-var createCommentMark = (id, isCurrent) => Decoration5.mark({
+var createCommentMark = (id, isCurrent) => Decoration4.mark({
   class: isCurrent ? "cm-comment-current" : "cm-comment",
   attributes: {
     "data-testid": "cm-comment",
     "data-comment-id": id
   }
 });
-var commentsDecorations = EditorView10.decorations.compute([
+var commentsDecorations = EditorView9.decorations.compute([
   commentsState
 ], (state) => {
   const { selection: { current }, comments: comments2 } = state.field(commentsState);
@@ -2367,10 +2318,10 @@ var commentsDecorations = EditorView10.decorations.compute([
     const mark = createCommentMark(comment.comment.id, comment.comment.id === current);
     return mark.range(range.from, range.to);
   }).filter(isNonNullable);
-  return Decoration5.set(decorations);
+  return Decoration4.set(decorations);
 });
 var commentClickedEffect = StateEffect3.define();
-var handleCommentClick = EditorView10.domEventHandlers({
+var handleCommentClick = EditorView9.domEventHandlers({
   click: (event, view) => {
     let target = event.target;
     const editorRoot = view.dom;
@@ -2409,7 +2360,7 @@ var trackPastedComments = (onUpdate) => {
     }
   };
   return [
-    EditorView10.domEventHandlers({
+    EditorView9.domEventHandlers({
       cut: handleTrack,
       copy: handleTrack
     }),
@@ -2431,7 +2382,7 @@ var trackPastedComments = (onUpdate) => {
       return effects;
     }),
     // Handle paste or the undo of comment deletion.
-    EditorView10.updateListener.of((update2) => {
+    EditorView9.updateListener.of((update2) => {
       const restore = [];
       for (let i = 0; i < update2.transactions.length; i++) {
         const tr = update2.transactions[i];
@@ -2542,7 +2493,7 @@ var comments = (options = {}) => {
     // Hover tooltip (for key shortcut hints, etc.)
     // TODO(burdon): Factor out to generic hints extension for current selection/line.
     //
-    options.onHover && hoverTooltip((view, pos) => {
+    options.renderTooltip && hoverTooltip((view, pos) => {
       const selection = view.state.selection.main;
       if (selection && pos >= selection.from && pos <= selection.to) {
         return {
@@ -2551,7 +2502,9 @@ var comments = (options = {}) => {
           above: true,
           create: () => {
             const el = document.createElement("div");
-            options.onHover(el, shortcut);
+            options.renderTooltip(el, {
+              shortcut
+            }, view);
             return {
               dom: el,
               offset: {
@@ -2571,7 +2524,7 @@ var comments = (options = {}) => {
     //
     // Track deleted ranges and update ranges for decorations.
     //
-    EditorView10.updateListener.of(({ view, state, changes }) => {
+    EditorView9.updateListener.of(({ view, state, changes }) => {
       let mod = false;
       const { comments: comments2, ...value } = state.field(commentsState);
       changes.iterChanges((from, to, from2, to2) => {
@@ -2603,7 +2556,7 @@ var comments = (options = {}) => {
     //
     // Track selection/proximity.
     //
-    EditorView10.updateListener.of(({ view, state }) => {
+    EditorView9.updateListener.of(({ view, state }) => {
       let min = Infinity;
       const { selection: { current, closest }, comments: comments2 } = state.field(commentsState);
       const { head } = state.selection.main;
@@ -2657,7 +2610,7 @@ var scrollThreadIntoView = (view, id, center = true) => {
           anchor: range.from
         } : void 0,
         effects: [
-          needsScroll ? EditorView10.scrollIntoView(range.from, center ? {
+          needsScroll ? EditorView9.scrollIntoView(range.from, center ? {
             y: "center"
           } : void 0) : [],
           needsSelectionUpdate ? setSelection.of({
@@ -2709,7 +2662,7 @@ var createExternalCommentSync = (id, subscribe, getComments) => ViewPlugin5.from
   }
 });
 var useCommentState = (state) => {
-  return useMemo2(() => EditorView10.updateListener.of((update2) => {
+  return useMemo2(() => EditorView9.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       state.comment = selectionOverlapsComment(update2.state);
       state.selection = hasActiveSelection(update2.state);
@@ -2733,7 +2686,7 @@ var useComments = (view, id, comments2) => {
   });
 };
 var useCommentClickListener = (onCommentClick) => {
-  return useMemo2(() => EditorView10.updateListener.of((update2) => {
+  return useMemo2(() => EditorView9.updateListener.of((update2) => {
     update2.transactions.forEach((transaction) => {
       transaction.effects.forEach((effect) => {
         if (effect.is(commentClickedEffect)) {
@@ -2747,21 +2700,21 @@ var useCommentClickListener = (onCommentClick) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/debug.ts
-import { syntaxTree as syntaxTree2 } from "@codemirror/language";
-import { StateField as StateField6 } from "@codemirror/state";
+import { syntaxTree } from "@codemirror/language";
+import { StateField as StateField5 } from "@codemirror/state";
 var debugNodeLogger = (log8 = console.log) => {
-  const logTokens = (state) => syntaxTree2(state).iterate({
+  const logTokens = (state) => syntaxTree(state).iterate({
     enter: (node) => log8(node.type)
   });
-  return StateField6.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 EditorView11 } from "@codemirror/view";
-var styles4 = EditorView11.theme({
+import { dropCursor, EditorView as EditorView10 } from "@codemirror/view";
+var styles4 = EditorView10.theme({
   ".cm-dropCursor": {
     borderLeft: "2px solid var(--dx-accentText)",
     color: "var(--dx-accentText)",
@@ -2775,7 +2728,7 @@ var dropFile = (options = {}) => {
   return [
     styles4,
     dropCursor(),
-    EditorView11.domEventHandlers({
+    EditorView10.domEventHandlers({
       drop: (event, view) => {
         event.preventDefault();
         const files = event.dataTransfer?.files;
@@ -2802,7 +2755,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 EditorView13, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap6, lineNumbers, placeholder, scrollPastEnd } from "@codemirror/view";
+import { EditorView as EditorView12, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap6, lineNumbers, placeholder, scrollPastEnd } from "@codemirror/view";
 import defaultsDeep2 from "lodash.defaultsdeep";
 import merge from "lodash.merge";
 import { generateName } from "@dxos/display-name";
@@ -2810,10 +2763,10 @@ import { log as log5 } from "@dxos/log";
 import { hexToHue, isNotFalsy as isNotFalsy3 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/focus.ts
-import { StateEffect as StateEffect4, StateField as StateField7 } from "@codemirror/state";
-import { EditorView as EditorView12 } from "@codemirror/view";
+import { StateEffect as StateEffect4, StateField as StateField6 } from "@codemirror/state";
+import { EditorView as EditorView11 } from "@codemirror/view";
 var focusEffect = StateEffect4.define();
-var focusField = StateField7.define({
+var focusField = StateField6.define({
   create: () => false,
   update: (value, tr) => {
     for (const effect of tr.effects) {
@@ -2826,7 +2779,7 @@ var focusField = StateField7.define({
 });
 var focus = [
   focusField,
-  EditorView12.domEventHandlers({
+  EditorView11.domEventHandlers({
     focus: (event, view) => {
       setTimeout(() => view.dispatch({
         effects: focusEffect.of(true)
@@ -2864,7 +2817,7 @@ var createBasicExtensions = (_props) => {
   const props = defaultsDeep2({}, _props, defaultBasicOptions);
   return [
     // NOTE: Doesn't catch errors in keymap functions.
-    EditorView13.exceptionSink.of((err) => {
+    EditorView12.exceptionSink.of((err) => {
       log5.catch(err, void 0, {
         F: __dxlog_file8,
         L: 96,
@@ -2879,12 +2832,12 @@ var createBasicExtensions = (_props) => {
     props.drawSelection && drawSelection({
       cursorBlinkRate: 1200
     }),
-    props.editable !== void 0 && EditorView13.editable.of(props.editable),
+    props.editable !== void 0 && EditorView12.editable.of(props.editable),
     props.focus && focus,
     props.highlightActiveLine && highlightActiveLine(),
     props.history && history(),
     props.lineNumbers && lineNumbers(),
-    props.lineWrapping && EditorView13.lineWrapping,
+    props.lineWrapping && EditorView12.lineWrapping,
     props.placeholder && placeholder(props.placeholder),
     props.readOnly !== void 0 && EditorState.readOnly.of(props.readOnly),
     props.scrollPastEnd && scrollPastEnd(),
@@ -2921,14 +2874,14 @@ var defaultThemeSlots = {
 var createThemeExtensions = ({ themeMode, styles: styles5, syntaxHighlighting: _syntaxHighlighting, slots: _slots } = {}) => {
   const slots = defaultsDeep2({}, _slots, defaultThemeSlots);
   return [
-    EditorView13.darkTheme.of(themeMode === "dark"),
-    EditorView13.baseTheme(styles5 ? merge({}, defaultTheme, styles5) : defaultTheme),
+    EditorView12.darkTheme.of(themeMode === "dark"),
+    EditorView12.baseTheme(styles5 ? merge({}, defaultTheme, styles5) : defaultTheme),
     // https://github.com/codemirror/theme-one-dark
     _syntaxHighlighting && (themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)),
-    slots.editor?.className && EditorView13.editorAttributes.of({
+    slots.editor?.className && EditorView12.editorAttributes.of({
       class: slots.editor.className
     }),
-    slots.content?.className && EditorView13.contentAttributes.of({
+    slots.content?.className && EditorView12.contentAttributes.of({
       class: slots.content.className
     })
   ].filter(isNotFalsy3);
@@ -2957,7 +2910,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 EditorView14 } from "@codemirror/view";
+import { EditorView as EditorView13 } from "@codemirror/view";
 import React3 from "react";
 import { Icon } from "@dxos/react-ui";
 var folding = (_props = {}) => [
@@ -2972,7 +2925,7 @@ var folding = (_props = {}) => [
         className: "flex h-full items-center"
       });
       return renderRoot(el, /* @__PURE__ */ React3.createElement(Icon, {
-        icon: "ph--caret-right--regular",
+        icon: "ph--caret-right--bold",
         size: 3,
         classNames: [
           "mx-3 cursor-pointer",
@@ -2981,7 +2934,7 @@ var folding = (_props = {}) => [
       }));
     }
   }),
-  EditorView14.theme({
+  EditorView13.theme({
     ".cm-foldGutter": {
       opacity: 0.3,
       transition: "opacity 0.3s",
@@ -2994,14 +2947,14 @@ var folding = (_props = {}) => [
 ];
 
 // packages/ui/react-ui-editor/src/extensions/listener.ts
-import { EditorView as EditorView15 } from "@codemirror/view";
+import { EditorView as EditorView14 } from "@codemirror/view";
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
-  onFocus && extensions.push(EditorView15.focusChangeEffect.of((_, focusing) => {
+  onFocus && extensions.push(EditorView14.focusChangeEffect.of((_, focusing) => {
     onFocus(focusing);
     return null;
   }));
-  onChange && extensions.push(EditorView15.updateListener.of((update2) => {
+  onChange && extensions.push(EditorView14.updateListener.of((update2) => {
     onChange(update2.state.doc.toString(), update2.state.facet(documentId));
   }));
   return extensions;
@@ -3009,9 +2962,9 @@ var listener = ({ onFocus, onChange }) => {
 
 // packages/ui/react-ui-editor/src/extensions/markdown/formatting.ts
 import { snippet } from "@codemirror/autocomplete";
-import { syntaxTree as syntaxTree3 } from "@codemirror/language";
+import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { EditorSelection } from "@codemirror/state";
-import { EditorView as EditorView16, keymap as keymap7 } from "@codemirror/view";
+import { EditorView as EditorView15, keymap as keymap7 } 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;
@@ -3034,7 +2987,7 @@ var setHeading = (level) => {
     let prevBlock = -1;
     for (const range of ranges) {
       let sawBlock = false;
-      syntaxTree3(state).iterate({
+      syntaxTree2(state).iterate({
         from: range.from,
         to: range.to,
         enter: (node) => {
@@ -3143,7 +3096,7 @@ var setStyle = (type, enable) => {
       let startCovered = false;
       let endCovered = false;
       let { from, to } = range;
-      syntaxTree3(state).iterate({
+      syntaxTree2(state).iterate({
         from,
         to,
         enter: (node) => {
@@ -3346,7 +3299,7 @@ var insertTable = (view) => {
   snippets.table(view, null, from, from);
 };
 var removeLinkInner = (from, to, changes, state) => {
-  syntaxTree3(state).iterate({
+  syntaxTree2(state).iterate({
     from,
     to,
     enter: (node) => {
@@ -3391,7 +3344,7 @@ var addLink = ({ url, image: image2 } = {}) => {
       let { from, to } = range;
       const cutStyles = [];
       let okay = null;
-      syntaxTree3(state).iterate({
+      syntaxTree2(state).iterate({
         from,
         to,
         enter: (node) => {
@@ -3486,7 +3439,7 @@ var addList = (type) => {
     let parentColumn = null;
     const blocks = [];
     for (const { from, to } of state.selection.ranges) {
-      syntaxTree3(state).iterate({
+      syntaxTree2(state).iterate({
         from,
         to,
         enter: (node) => {
@@ -3621,7 +3574,7 @@ var removeList = (type) => {
     const stack = [];
     const targetNodeType = type === 0 ? "OrderedList" : type === 1 ? "BulletList" : "TaskList";
     for (const { from, to } of state.selection.ranges) {
-      syntaxTree3(state).iterate({
+      syntaxTree2(state).iterate({
         from,
         to,
         enter: (node) => {
@@ -3708,7 +3661,7 @@ var setBlockquote = (enable) => {
     let lastBlock = -1;
     for (const { from, to } of state.selection.ranges) {
       const sawBlock = false;
-      syntaxTree3(state).iterate({
+      syntaxTree2(state).iterate({
         from,
         to,
         enter: (node) => {
@@ -3798,7 +3751,7 @@ var addCodeblock = (target) => {
   for (const { from, to } of selection.ranges) {
     let blockFrom = from;
     let blockTo = to;
-    syntaxTree3(state).iterate({
+    syntaxTree2(state).iterate({
       from,
       to,
       enter: (node) => {
@@ -3849,7 +3802,7 @@ var removeCodeblock = ({ state, dispatch }) => {
   let lastBlock = -1;
   const changes = [];
   for (const { from, to } of state.selection.ranges) {
-    syntaxTree3(state).iterate({
+    syntaxTree2(state).iterate({
       from,
       to,
       enter: (node) => {
@@ -4011,7 +3964,7 @@ var getFormatting = (state) => {
         }
       }
     }
-    syntaxTree3(state).iterate({
+    syntaxTree2(state).iterate({
       from: range.from,
       to: range.to,
       enter: (node) => {
@@ -4100,7 +4053,7 @@ var getFormatting = (state) => {
   };
 };
 var useFormattingState = (state) => {
-  return useMemo3(() => EditorView16.updateListener.of((update2) => {
+  return useMemo3(() => EditorView15.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       Object.entries(getFormatting(update2.state)).forEach(([key, active]) => {
         state[key] = active;
@@ -4383,9 +4336,9 @@ var createMarkdownExtensions = ({ themeMode } = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/debug.ts
-import { syntaxTree as syntaxTree4 } from "@codemirror/language";
-import { StateField as StateField8 } from "@codemirror/state";
-var debugTree = (cb) => StateField8.define({
+import { syntaxTree as syntaxTree3 } from "@codemirror/language";
+import { StateField as StateField7 } from "@codemirror/state";
+var debugTree = (cb) => StateField7.define({
   create: (state) => cb(convertTreeToJson(state)),
   update: (value, tr) => cb(convertTreeToJson(tr.state))
 });
@@ -4406,24 +4359,24 @@ var convertTreeToJson = (state) => {
     }
     return node;
   };
-  return treeToJson(syntaxTree4(state).cursor());
+  return treeToJson(syntaxTree3(state).cursor());
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
-import { syntaxTree as syntaxTree8 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder4, StateEffect as StateEffect5 } from "@codemirror/state";
-import { EditorView as EditorView20, Decoration as Decoration8, WidgetType as WidgetType6, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
+import { syntaxTree as syntaxTree7 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder3, StateEffect as StateEffect5 } from "@codemirror/state";
+import { EditorView as EditorView19, Decoration as Decoration7, WidgetType as WidgetType5, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
 import { invariant as invariant4 } from "@dxos/invariant";
-import { mx as mx4 } from "@dxos/react-ui-theme";
+import { mx as mx3 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/changes.ts
-import { syntaxTree as syntaxTree5 } from "@codemirror/language";
+import { syntaxTree as syntaxTree4 } from "@codemirror/language";
 import { Transaction as Transaction2 } from "@codemirror/state";
 import { ViewPlugin as ViewPlugin6 } from "@codemirror/view";
 var adjustChanges = () => {
   return ViewPlugin6.fromClass(class {
     update(update2) {
-      const tree = syntaxTree5(update2.state);
+      const tree = syntaxTree4(update2.state);
       const adjustments = [];
       for (const tr of update2.transactions) {
         const event = tr.annotation(Transaction2.userEvent);
@@ -4561,14 +4514,14 @@ var getValidUrl = (str) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/image.ts
-import { syntaxTree as syntaxTree6 } from "@codemirror/language";
-import { StateField as StateField9 } from "@codemirror/state";
-import { Decoration as Decoration6, EditorView as EditorView17, WidgetType as WidgetType4 } from "@codemirror/view";
+import { syntaxTree as syntaxTree5 } from "@codemirror/language";
+import { StateField as StateField8 } from "@codemirror/state";
+import { Decoration as Decoration5, EditorView as EditorView16, WidgetType as WidgetType3 } from "@codemirror/view";
 var image = (_options = {}) => {
   return [
-    StateField9.define({
+    StateField8.define({
       create: (state) => {
-        return Decoration6.set(buildDecorations2(0, state.doc.length, state));
+        return Decoration5.set(buildDecorations(0, state.doc.length, state));
       },
       update: (value, tr) => {
         if (!tr.docChanged && !tr.selection) {
@@ -4588,25 +4541,17 @@ var image = (_options = {}) => {
           filterFrom: from,
           filterTo: to,
           filter: () => false,
-          add: buildDecorations2(from, to, tr.state)
+          add: buildDecorations(from, to, tr.state)
         });
       },
-      provide: (field) => EditorView17.decorations.from(field)
+      provide: (field) => EditorView16.decorations.from(field)
     })
   ];
 };
-var preloaded = /* @__PURE__ */ new Set();
-var preloadImage = (url) => {
-  if (!preloaded.has(url)) {
-    const img = document.createElement("img");
-    img.src = url;
-    preloaded.add(url);
-  }
-};
-var buildDecorations2 = (from, to, state) => {
+var buildDecorations = (from, to, state) => {
   const decorations = [];
   const cursor = state.selection.main.head;
-  syntaxTree6(state).iterate({
+  syntaxTree5(state).iterate({
     enter: (node) => {
       if (node.name === "Image") {
         const urlNode = node.node.getChild("URL");
@@ -4617,7 +4562,7 @@ var buildDecorations2 = (from, to, state) => {
             return;
           }
           preloadImage(url);
-          decorations.push(Decoration6.replace({
+          decorations.push(Decoration5.replace({
             block: true,
             widget: new ImageWidget(url)
           }).range(hide2 ? node.from : node.to, node.to));
@@ -4629,7 +4574,15 @@ var buildDecorations2 = (from, to, state) => {
   });
   return decorations;
 };
-var ImageWidget = class extends WidgetType4 {
+var preloaded = /* @__PURE__ */ new Set();
+var preloadImage = (url) => {
+  if (!preloaded.has(url)) {
+    const img = document.createElement("img");
+    img.src = url;
+    preloaded.add(url);
+  }
+};
+var ImageWidget = class extends WidgetType3 {
   constructor(_url) {
     super();
     this._url = _url;
@@ -4651,10 +4604,10 @@ var ImageWidget = class extends WidgetType4 {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/styles.ts
-import { EditorView as EditorView18 } from "@codemirror/view";
+import { EditorView as EditorView17 } from "@codemirror/view";
 var bulletListIndentationWidth = 24;
 var orderedListIndentationWidth = 36;
-var formattingStyles = EditorView18.theme({
+var formattingStyles = EditorView17.theme({
   /**
   * Horizontal rule.
   */
@@ -4773,18 +4726,18 @@ var formattingStyles = EditorView18.theme({
 });
 
 // packages/ui/react-ui-editor/src/extensions/markdown/table.ts
-import { syntaxTree as syntaxTree7 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField10 } from "@codemirror/state";
-import { Decoration as Decoration7, EditorView as EditorView19, WidgetType as WidgetType5 } from "@codemirror/view";
+import { syntaxTree as syntaxTree6 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField9 } from "@codemirror/state";
+import { Decoration as Decoration6, EditorView as EditorView18, WidgetType as WidgetType4 } from "@codemirror/view";
 var table = (options = {}) => {
-  return StateField10.define({
+  return StateField9.define({
     create: (state) => update(state, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView19.decorations.from(field)
+    provide: (field) => EditorView18.decorations.from(field)
   });
 };
 var update = (state, _options) => {
-  const builder = new RangeSetBuilder3();
+  const builder = new RangeSetBuilder2();
   const cursor = state.selection.main.head;
   const tables = [];
   const getTable = () => tables[tables.length - 1];
@@ -4792,7 +4745,7 @@ var update = (state, _options) => {
     const table2 = getTable();
     return table2.rows?.[table2.rows.length - 1];
   };
-  syntaxTree7(state).iterate({
+  syntaxTree6(state).iterate({
     enter: (node) => {
       switch (node.name) {
         case "Table": {
@@ -4825,19 +4778,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, Decoration6.replace({
         block: true,
         widget: new TableWidget(table2)
       }));
     } else {
-      builder.add(table2.from, table2.to, Decoration7.mark({
+      builder.add(table2.from, table2.to, Decoration6.mark({
         class: "cm-table"
       }));
     }
   });
   return builder.finish();
 };
-var TableWidget = class extends WidgetType5 {
+var TableWidget = class extends WidgetType4 {
   constructor(_table) {
     super();
     this._table = _table;
@@ -4879,14 +4832,14 @@ var Unicode = {
   bulletSmall: "\u2219",
   bulletSquare: "\u2B1D"
 };
-var HorizontalRuleWidget = class extends WidgetType6 {
+var HorizontalRuleWidget = class extends WidgetType5 {
   toDOM() {
     const el = document.createElement("span");
     el.className = "cm-hr";
     return el;
   }
 };
-var LinkButton = class extends WidgetType6 {
+var LinkButton = class extends WidgetType5 {
   constructor(url, render) {
     super();
     this.url = url;
@@ -4898,11 +4851,13 @@ var LinkButton = class extends WidgetType6 {
   // TODO(burdon): Create icon and link directly without react?
   toDOM(view) {
     const el = document.createElement("span");
-    this.render(el, this.url);
+    this.render(el, {
+      url: this.url
+    }, view);
     return el;
   }
 };
-var CheckboxWidget = class extends WidgetType6 {
+var CheckboxWidget = class extends WidgetType5 {
   constructor(_checked) {
     super();
     this._checked = _checked;
@@ -4947,7 +4902,7 @@ var CheckboxWidget = class extends WidgetType6 {
     return false;
   }
 };
-var TextWidget = class extends WidgetType6 {
+var TextWidget = class extends WidgetType5 {
   constructor(text, className) {
     super();
     this.text = text;
@@ -4962,29 +4917,29 @@ var TextWidget = class extends WidgetType6 {
     return el;
   }
 };
-var hide = Decoration8.replace({});
-var blockQuote = Decoration8.line({
-  class: mx4("cm-blockquote")
+var hide = Decoration7.replace({});
+var blockQuote = Decoration7.line({
+  class: mx3("cm-blockquote")
 });
-var fencedCodeLine = Decoration8.line({
-  class: mx4("cm-code cm-codeblock-line")
+var fencedCodeLine = Decoration7.line({
+  class: mx3("cm-code cm-codeblock-line")
 });
-var fencedCodeLineFirst = Decoration8.line({
-  class: mx4("cm-code cm-codeblock-line", "cm-codeblock-first")
+var fencedCodeLineFirst = Decoration7.line({
+  class: mx3("cm-code cm-codeblock-line", "cm-codeblock-first")
 });
-var fencedCodeLineLast = Decoration8.line({
-  class: mx4("cm-code cm-codeblock-line", "cm-codeblock-last")
+var fencedCodeLineLast = Decoration7.line({
+  class: mx3("cm-code cm-codeblock-line", "cm-codeblock-last")
 });
 var commentBlockLine = fencedCodeLine;
 var commentBlockLineFirst = fencedCodeLineFirst;
 var commentBlockLineLast = fencedCodeLineLast;
-var horizontalRule = Decoration8.replace({
+var horizontalRule = Decoration7.replace({
   widget: new HorizontalRuleWidget()
 });
-var checkedTask = Decoration8.replace({
+var checkedTask = Decoration7.replace({
   widget: new CheckboxWidget(true)
 });
-var uncheckedTask = Decoration8.replace({
+var uncheckedTask = Decoration7.replace({
   widget: new CheckboxWidget(false)
 });
 var editingRange = (state, range, focus2) => {
@@ -4999,15 +4954,15 @@ var autoHideTags = /* @__PURE__ */ new Set([
   "SubscriptMark",
   "SuperscriptMark"
 ]);
-var buildDecorations3 = (view, options, focus2) => {
-  const deco = new RangeSetBuilder4();
-  const atomicDeco = new RangeSetBuilder4();
+var buildDecorations2 = (view, options, focus2) => {
+  const deco = new RangeSetBuilder3();
+  const atomicDeco = new RangeSetBuilder3();
   const { state } = view;
   const headerLevels = [];
   const getHeaderLevels = (node, level) => {
     invariant4(level > 0, void 0, {
       F: __dxlog_file9,
-      L: 178,
+      L: 179,
       S: void 0,
       A: [
         "level > 0",
@@ -5046,7 +5001,7 @@ var buildDecorations3 = (view, options, focus2) => {
   const getCurrentListLevel = () => {
     invariant4(listLevels.length, void 0, {
       F: __dxlog_file9,
-      L: 200,
+      L: 201,
       S: void 0,
       A: [
         "listLevels.length",
@@ -5088,7 +5043,7 @@ var buildDecorations3 = (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, Decoration7.replace({
                 widget: new TextWidget(num, theme.heading(level))
               }));
             }
@@ -5113,7 +5068,7 @@ var buildDecorations3 = (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, Decoration7.line({
           class: "cm-list-item",
           attributes: {
             style: `padding-left: ${offset}px; text-indent: -${width}px;`
@@ -5130,7 +5085,7 @@ var buildDecorations3 = (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, Decoration7.replace({
           widget: new TextWidget(label, list.type === "OrderedList" ? "cm-list-mark cm-list-mark-ordered" : "cm-list-mark cm-list-mark-bullet")
         }));
         break;
@@ -5217,7 +5172,7 @@ var buildDecorations3 = (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, Decoration7.mark({
             tagName: "a",
             attributes: {
               class: "cm-link",
@@ -5227,7 +5182,7 @@ var buildDecorations3 = (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 ? Decoration7.replace({
               widget: new LinkButton(url, options.renderLinkButton)
             }) : hide);
           }
@@ -5261,7 +5216,7 @@ var buildDecorations3 = (view, options, focus2) => {
       }
     }
   };
-  const tree = syntaxTree8(state);
+  const tree = syntaxTree7(state);
   if (options.numberedHeadings?.from === void 0) {
     for (const { from, to } of view.visibleRanges) {
       tree.iterate({
@@ -5287,11 +5242,11 @@ var decorateMarkdown = (options = {}) => {
   return [
     ViewPlugin7.fromClass(class {
       constructor(view) {
-        ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations3(view, options, view.hasFocus));
+        ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(view, options, view.hasFocus));
       }
       update(update2) {
         if (update2.docChanged || update2.viewportChanged || update2.focusChanged || update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(forceUpdate))) || update2.selectionSet && !options.selectionChangeDelay) {
-          ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations3(update2.view, options, update2.view.hasFocus));
+          ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(update2.view, options, update2.view.hasFocus));
           this.clearUpdate();
         } else if (update2.selectionSet) {
           this.scheduleUpdate(update2.view);
@@ -5317,9 +5272,9 @@ var decorateMarkdown = (options = {}) => {
       }
     }, {
       provide: (plugin) => [
-        EditorView20.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration8.none),
-        EditorView20.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration8.none),
-        EditorView20.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration8.none)
+        EditorView19.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration7.none),
+        EditorView19.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration7.none),
+        EditorView19.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration7.none)
       ]
     }),
     image(),
@@ -5330,12 +5285,12 @@ var decorateMarkdown = (options = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/link.ts
-import { syntaxTree as syntaxTree9 } from "@codemirror/language";
+import { syntaxTree as syntaxTree8 } from "@codemirror/language";
 import { hoverTooltip as hoverTooltip2 } from "@codemirror/view";
 import { tooltipContent } from "@dxos/react-ui-theme";
-var linkTooltip = (render) => {
+var linkTooltip = (renderTooltip) => {
   return hoverTooltip2((view, pos, side) => {
-    const syntax = syntaxTree9(view.state).resolveInner(pos, side);
+    const syntax = syntaxTree8(view.state).resolveInner(pos, side);
     let link = null;
     for (let i = 0, node = syntax; !link && node && i < 5; node = node.parent, i++) {
       link = node.name === "Link" ? node : null;
@@ -5348,11 +5303,14 @@ var linkTooltip = (render) => {
     return {
       pos: link.from,
       end: link.to,
-      above: true,
+      // NOTE: Forcing above causes the tooltip to flicker.
+      // above: true,
       create: () => {
         const el = document.createElement("div");
-        el.className = tooltipContent({}, "pli-2 plb-1");
-        render(el, urlText);
+        el.className = tooltipContent({});
+        renderTooltip(el, {
+          url: urlText
+        }, view);
         return {
           dom: el,
           offset: {
@@ -5362,6 +5320,9 @@ var linkTooltip = (render) => {
         };
       }
     };
+  }, {
+    // NOTE: 0 = default of 300ms.
+    hoverTime: 1
   });
 };
 
@@ -5449,6 +5410,165 @@ var InputModeExtensions = {
   ]
 };
 
+// packages/ui/react-ui-editor/src/extensions/preview/preview.ts
+import "@dxos/lit-ui/dx-ref-tag.pcss";
+import { syntaxTree as syntaxTree9 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder4, StateField as StateField10 } from "@codemirror/state";
+import { Decoration as Decoration8, EditorView as EditorView20, WidgetType as WidgetType6 } 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({
+      create: (state) => buildDecorations3(state, options),
+      update: (_, tr) => buildDecorations3(tr.state, options),
+      provide: (field) => [
+        EditorView20.decorations.from(field),
+        EditorView20.atomicRanges.of((view) => view.state.field(field))
+      ]
+    }),
+    EditorView20.theme({
+      ".cm-preview-block": {
+        marginLeft: "-1rem",
+        marginRight: "-1rem",
+        padding: "1rem",
+        borderRadius: "0.5rem",
+        background: "var(--dx-modalSurface)",
+        border: "1px solid var(--dx-separator)"
+      }
+    })
+  ];
+};
+var getLinkRef = (state, node) => {
+  const mark = node.getChild("LinkMark");
+  const label = node.getChild("LinkLabel");
+  if (mark && label) {
+    const ref = state.sliceDoc(label.from + 1, label.to - 1);
+    return {
+      suggest: ref.startsWith("?"),
+      block: state.sliceDoc(mark.from, mark.from + 1) === "!",
+      label: state.sliceDoc(mark.to, label.from - 1),
+      ref: ref.startsWith("?") ? ref.slice(1) : ref
+    };
+  }
+};
+var buildDecorations3 = (state, options) => {
+  const builder = new RangeSetBuilder4();
+  syntaxTree9(state).iterate({
+    enter: (node) => {
+      switch (node.name) {
+        //
+        // Decoration.
+        // [Label][dxn:echo:123]
+        //
+        case "Link": {
+          const link = getLinkRef(state, node.node);
+          if (link) {
+            builder.add(node.from, node.to, Decoration8.replace({
+              widget: new PreviewInlineWidget(options, link)
+            }));
+          }
+          break;
+        }
+        //
+        // Block widget.
+        // ![Label][dxn:echo:123]
+        //
+        case "Image": {
+          const link = getLinkRef(state, node.node);
+          if (options.renderBlock && link) {
+            builder.add(node.from, node.to, Decoration8.replace({
+              block: true,
+              // atomic: true,
+              widget: new PreviewBlockWidget(options, link)
+            }));
+          }
+          break;
+        }
+      }
+    }
+  });
+  return builder.finish();
+};
+var PreviewInlineWidget = class extends WidgetType6 {
+  constructor(_options, _link) {
+    super();
+    this._options = _options;
+    this._link = _link;
+  }
+  // override ignoreEvent() {
+  //   return false;
+  // }
+  eq(other) {
+    return this._link.ref === other._link.ref && this._link.label === other._link.label;
+  }
+  toDOM(view) {
+    const root = document.createElement("dx-ref-tag");
+    root.setAttribute("label", this._link.label);
+    root.setAttribute("ref", this._link.ref);
+    return root;
+  }
+};
+var PreviewBlockWidget = class extends WidgetType6 {
+  constructor(_options, _link) {
+    super();
+    this._options = _options;
+    this._link = _link;
+  }
+  // override ignoreEvent() {
+  //   return true;
+  // }
+  eq(other) {
+    return this._link.ref === other._link.ref;
+  }
+  toDOM(view) {
+    const root = document.createElement("div");
+    root.classList.add("cm-preview-block");
+    const handleAction = (action) => {
+      const pos = view.posAtDOM(root);
+      const node = syntaxTree9(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);
+    return root;
+  }
+};
+
 // packages/ui/react-ui-editor/src/extensions/typewriter.ts
 import { keymap as keymap10 } from "@codemirror/view";
 var defaultItems = [
@@ -5524,7 +5644,7 @@ import { getProviderValue, isNotFalsy as isNotFalsy4 } from "@dxos/util";
 var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
 var instanceCount = 0;
 var useTextEditor = (props = {}, deps = []) => {
-  const { id, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = useMemo4(() => getProviderValue(props), deps ?? []);
+  const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = useMemo4(() => getProviderValue(props), deps ?? []);
   const [instanceId] = useState(() => `text-editor-${++instanceCount}`);
   const [view, setView] = useState();
   const parentRef = useRef(null);
@@ -5537,7 +5657,7 @@ var useTextEditor = (props = {}, deps = []) => {
         doc: initialValue?.length ?? 0
       }, {
         F: __dxlog_file11,
-        L: 75,
+        L: 76,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -5554,7 +5674,7 @@ var useTextEditor = (props = {}, deps = []) => {
         };
       }
       const state = EditorState2.create({
-        doc: initialValue,
+        doc: doc ?? initialValue,
         // selection: initialSelection,
         extensions: [
           id && documentId.of(id),
@@ -5563,7 +5683,7 @@ var useTextEditor = (props = {}, deps = []) => {
           EditorView21.exceptionSink.of((err) => {
             log7.catch(err, void 0, {
               F: __dxlog_file11,
-              L: 97,
+              L: 98,
               S: void 0,
               C: (f, a) => f(...a)
             });
@@ -5595,7 +5715,7 @@ var useTextEditor = (props = {}, deps = []) => {
         id
       }, {
         F: __dxlog_file11,
-        L: 134,
+        L: 135,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -5612,7 +5732,7 @@ var useTextEditor = (props = {}, deps = []) => {
             selection
           }, {
             F: __dxlog_file11,
-            L: 143,
+            L: 144,
             S: void 0,
             C: (f, a) => f(...a)
           });
@@ -5694,7 +5814,10 @@ export {
   blast,
   callbackWrapper,
   clientRectsFor,
+  closeCommand,
+  closeEffect,
   command,
+  commandKeyBindings,
   comments,
   commentsState,
   convertTreeToJson,
@@ -5708,6 +5831,7 @@ export {
   createElement,
   createExternalCommentSync,
   createMarkdownExtensions,
+  createRenderer,
   createThemeExtensions,
   debugDispatcher,
   debugNodeLogger,
@@ -5721,6 +5845,7 @@ export {
   editorGutter,
   editorInputMode,
   editorMonospace,
+  editorWidth,
   editorWithToolbarLayout,
   flattenRect,
   focus,
@@ -5739,8 +5864,11 @@ export {
   markdownTags,
   markdownTagsExtensions,
   mention,
+  openCommand,
+  openEffect,
   overlap,
   preventNewline,
+  preview,
   processEditorPayload,
   removeBlockquote,
   removeCodeblock,
@@ -5758,7 +5886,7 @@ export {
   setStyle,
   singleValueFacet,
   stackItemContentEditorClassNames,
-  stackItemContentToolbarClassNames2 as stackItemContentToolbarClassNames,
+  stackItemContentToolbarClassNames,
   table,
   tags2 as tags,
   textRange,