@dxos/react-ui-editor 0.8.4-main.dedc0f3 → 0.8.4-main.e098934

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.8.4-main.dedc0f3",
+  "version": "0.8.4-main.e098934",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -59,6 +59,7 @@
     "@preact-signals/safe-react": "^0.9.0",
     "@preact/signals-react": "^3.2.0",
     "@radix-ui/react-context": "1.1.1",
+    "@radix-ui/react-use-controllable-state": "1.1.0",
     "@replit/codemirror-vim": "^6.2.1",
     "@replit/codemirror-vscode-keymap": "^6.0.2",
     "ajv": "^8.17.1",
@@ -68,22 +69,21 @@
     "lodash.merge": "^4.6.2",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/app-graph": "0.8.4-main.dedc0f3",
-    "@dxos/async": "0.8.4-main.dedc0f3",
-    "@dxos/context": "0.8.4-main.dedc0f3",
-    "@dxos/display-name": "0.8.4-main.dedc0f3",
-    "@dxos/echo-schema": "0.8.4-main.dedc0f3",
-    "@dxos/invariant": "0.8.4-main.dedc0f3",
-    "@dxos/debug": "0.8.4-main.dedc0f3",
-    "@dxos/lit-ui": "0.8.4-main.dedc0f3",
-    "@dxos/live-object": "0.8.4-main.dedc0f3",
-    "@dxos/log": "0.8.4-main.dedc0f3",
-    "@dxos/protocols": "0.8.4-main.dedc0f3",
-    "@dxos/react-hooks": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-stack": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-menu": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-types": "0.8.4-main.dedc0f3",
-    "@dxos/util": "0.8.4-main.dedc0f3"
+    "@dxos/app-graph": "0.8.4-main.e098934",
+    "@dxos/async": "0.8.4-main.e098934",
+    "@dxos/context": "0.8.4-main.e098934",
+    "@dxos/display-name": "0.8.4-main.e098934",
+    "@dxos/echo-schema": "0.8.4-main.e098934",
+    "@dxos/invariant": "0.8.4-main.e098934",
+    "@dxos/live-object": "0.8.4-main.e098934",
+    "@dxos/log": "0.8.4-main.e098934",
+    "@dxos/protocols": "0.8.4-main.e098934",
+    "@dxos/react-hooks": "0.8.4-main.e098934",
+    "@dxos/react-ui-stack": "0.8.4-main.e098934",
+    "@dxos/react-ui-menu": "0.8.4-main.e098934",
+    "@dxos/react-ui-types": "0.8.4-main.e098934",
+    "@dxos/debug": "0.8.4-main.e098934",
+    "@dxos/util": "0.8.4-main.e098934"
   },
   "devDependencies": {
     "@automerge/automerge": "3.1.1",
@@ -111,19 +111,19 @@
     "vite": "7.1.1",
     "vite-plugin-top-level-await": "^1.6.0",
     "vite-plugin-wasm": "^3.5.0",
-    "@dxos/config": "0.8.4-main.dedc0f3",
-    "@dxos/echo": "0.8.4-main.dedc0f3",
-    "@dxos/echo-signals": "0.8.4-main.dedc0f3",
-    "@dxos/keyboard": "0.8.4-main.dedc0f3",
-    "@dxos/random": "0.8.4-main.dedc0f3",
-    "@dxos/react-client": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-stack": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-theme": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-attention": "0.8.4-main.dedc0f3",
-    "@dxos/schema": "0.8.4-main.dedc0f3",
-    "@dxos/storybook-utils": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.dedc0f3"
+    "@dxos/echo": "0.8.4-main.e098934",
+    "@dxos/echo-signals": "0.8.4-main.e098934",
+    "@dxos/keyboard": "0.8.4-main.e098934",
+    "@dxos/random": "0.8.4-main.e098934",
+    "@dxos/react-ui": "0.8.4-main.e098934",
+    "@dxos/react-ui-attention": "0.8.4-main.e098934",
+    "@dxos/react-client": "0.8.4-main.e098934",
+    "@dxos/react-ui-stack": "0.8.4-main.e098934",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.e098934",
+    "@dxos/react-ui-theme": "0.8.4-main.e098934",
+    "@dxos/config": "0.8.4-main.e098934",
+    "@dxos/storybook-utils": "0.8.4-main.e098934",
+    "@dxos/schema": "0.8.4-main.e098934"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
@@ -131,9 +131,9 @@
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-client": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-theme": "0.8.4-main.dedc0f3"
+    "@dxos/react-client": "0.8.4-main.e098934",
+    "@dxos/react-ui-theme": "0.8.4-main.e098934",
+    "@dxos/react-ui": "0.8.4-main.e098934"
   },
   "publishConfig": {
     "access": "public"

package/src/components/{Popover → CommandMenu}/CommandMenu.tsx

@@ -3,9 +3,19 @@
 //
 
 import { type EditorView } from '@codemirror/view';
-import React, { Fragment, useCallback, useEffect, useRef } from 'react';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import React, { Fragment, type PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
 
-import { Icon, type Label, Popover, toLocalizedString, useThemeContext, useTranslation } from '@dxos/react-ui';
+import { addEventListener } from '@dxos/async';
+import {
+  type DxAnchorActivate,
+  Icon,
+  type Label,
+  Popover,
+  toLocalizedString,
+  useThemeContext,
+  useTranslation,
+} from '@dxos/react-ui';
 import { type MaybePromise } from '@dxos/util';
 
 import { commandRangeEffect } from '../../extensions';
@@ -23,37 +33,94 @@ export type CommandMenuItem = {
   onSelect?: (view: EditorView, head: number) => MaybePromise<void>;
 };
 
-export type CommandMenuProps = {
+export type CommandMenuProps = PropsWithChildren<{
   groups: CommandMenuGroup[];
-  currentItem?: string;
   onSelect: (item: CommandMenuItem) => void;
-};
+  onActivate?: (event: DxAnchorActivate) => void;
+  currentItem?: string;
+  open?: boolean;
+  onOpenChange?: (nextOpen: boolean) => void;
+  defaultOpen?: boolean;
+}>;
 
 // NOTE: Not using DropdownMenu because the command menu needs to manage focus explicitly.
-export const CommandMenu = ({ groups, currentItem, onSelect }: CommandMenuProps) => {
+export const CommandMenuProvider = ({
+  groups,
+  onSelect,
+  onActivate,
+  currentItem,
+  children,
+  open: propsOpen,
+  onOpenChange,
+  defaultOpen,
+}: CommandMenuProps) => {
   const { tx } = useThemeContext();
   const groupsWithItems = groups.filter((group) => group.items.length > 0);
+  const trigger = useRef<HTMLButtonElement | null>(null);
+
+  const [open, setOpen] = useControllableState({
+    prop: propsOpen,
+    onChange: onOpenChange,
+    defaultProp: defaultOpen,
+  });
+
+  const handleDxAnchorActivate = useCallback(
+    (event: DxAnchorActivate) => {
+      const { trigger: dxTrigger, refId } = event;
+      // If this has a `refId`, then it’s probably a URL or DXN and out of scope for this component.
+      if (!refId) {
+        trigger.current = dxTrigger as HTMLButtonElement;
+        if (onActivate) {
+          onActivate(event);
+        } else {
+          queueMicrotask(() => setOpen(true));
+        }
+      }
+    },
+    [onActivate],
+  );
+
+  const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!rootRef || !handleDxAnchorActivate) {
+      return;
+    }
+
+    return addEventListener(rootRef, 'dx-anchor-activate' as any, handleDxAnchorActivate, {
+      capture: true,
+      passive: false,
+    });
+  }, [rootRef, handleDxAnchorActivate]);
+
   return (
-    <Popover.Portal>
-      <Popover.Content
-        align='start'
-        onOpenAutoFocus={(event) => event.preventDefault()}
-        classNames={tx('menu.content', 'menu--exotic-unfocusable', { elevation: 'positioned' }, [
-          'max-h-[300px] overflow-y-auto',
-        ])}
-      >
-        <Popover.Viewport classNames={tx('menu.viewport', 'menu__viewport--exotic-unfocusable', {})}>
-          <ul>
-            {groupsWithItems.map((group, index) => (
-              <Fragment key={group.id}>
-                <CommandGroup group={group} currentItem={currentItem} onSelect={onSelect} />
-                {index < groupsWithItems.length - 1 && <div className={tx('menu.separator', 'menu__item', {})} />}
-              </Fragment>
-            ))}
-          </ul>
-        </Popover.Viewport>
-      </Popover.Content>
-    </Popover.Portal>
+    <Popover.Root modal={false} open={open} onOpenChange={setOpen}>
+      <Popover.Portal>
+        <Popover.Content
+          align='start'
+          onOpenAutoFocus={(event) => event.preventDefault()}
+          classNames={tx('menu.content', 'menu--exotic-unfocusable', { elevation: 'positioned' }, [
+            'max-bs-80 overflow-y-auto',
+          ])}
+        >
+          <Popover.Viewport classNames={tx('menu.viewport', 'menu__viewport--exotic-unfocusable', {})}>
+            <ul>
+              {groupsWithItems.map((group, index) => (
+                <Fragment key={group.id}>
+                  <CommandGroup group={group} currentItem={currentItem} onSelect={onSelect} />
+                  {index < groupsWithItems.length - 1 && <div className={tx('menu.separator', 'menu__item', {})} />}
+                </Fragment>
+              ))}
+            </ul>
+          </Popover.Viewport>
+          <Popover.Arrow />
+        </Popover.Content>
+      </Popover.Portal>
+      <Popover.VirtualTrigger virtualRef={trigger} />
+      <div role='none' className='contents' ref={setRootRef}>
+        {children}
+      </div>
+    </Popover.Root>
   );
 };
 

package/src/components/{Popover → CommandMenu}/index.ts

@@ -3,5 +3,3 @@
 //
 
 export * from './CommandMenu';
-export * from './RefPopover';
-export * from './RefDropdownMenu';

package/src/components/index.ts

@@ -4,4 +4,4 @@
 
 export * from './Editor';
 export * from './EditorToolbar';
-export * from './Popover';
+export * from './CommandMenu';

package/src/extensions/autoscroll.ts

@@ -23,9 +23,10 @@ export type AutoScrollOptions = {
 export const autoScroll = ({ overscroll = 4 * lineHeight, throttle = 2_000 }: Partial<AutoScrollOptions> = {}) => {
   let isThrottled = false;
   let isPinned = true;
-  let lastScrollTop = 0;
   let timeout: NodeJS.Timeout | undefined;
   let buttonContainer: HTMLDivElement;
+  let lastScrollTop = 0;
+  let scrollCounter = 0;
 
   const hideScrollbar = (view: EditorView) => {
     view.scrollDOM.classList.add('cm-hide-scrollbar');
@@ -37,6 +38,7 @@ export const autoScroll = ({ overscroll = 4 * lineHeight, throttle = 2_000 }: Pa
 
   const scrollToBottom = (view: EditorView) => {
     isPinned = true;
+    scrollCounter = 0;
     buttonContainer?.classList.add('opacity-0');
     requestAnimationFrame(() => {
       hideScrollbar(view);
@@ -84,11 +86,8 @@ export const autoScroll = ({ overscroll = 4 * lineHeight, throttle = 2_000 }: Pa
       if (update.docChanged && isPinned && !isThrottled) {
         const distanceFromBottom = calcDistance(update.view.scrollDOM);
 
-        // Hide scrollbar even if not scrolling to bottom.
-        // hideScrollbar(update.view);
-
         // Keep pinned.
-        if (distanceFromBottom > overscroll) {
+        if (distanceFromBottom >= overscroll) {
           isThrottled = true;
           requestAnimationFrame(() => {
             scrollToBottom(update.view);
@@ -102,21 +101,28 @@ export const autoScroll = ({ overscroll = 4 * lineHeight, throttle = 2_000 }: Pa
       }
     }),
 
+    // Detect user scroll.
+    // NOTE: Multiple scroll events are triggered during programmatic smooth scrolling.
     EditorView.domEventHandlers({
       scroll: (event, view) => {
         const scroller = view.scrollDOM;
+        // Suspect delta goes positive when rendering widgets, so count positive deltas.
+        // TODO(burdon): Detect user scroll directly (wheel, touch, keys, etc.)
+        if (lastScrollTop > scroller.scrollTop) {
+          scrollCounter++;
+        }
+        lastScrollTop = scroller.scrollTop;
         const distanceFromBottom = calcDistance(scroller);
         if (distanceFromBottom === 0) {
           // Pin to bottom.
           isPinned = true;
           buttonContainer?.classList.add('opacity-0');
-        } else if (scroller.scrollTop < lastScrollTop) {
+          scrollCounter = 0;
+        } else if (scrollCounter > 3) {
           // Break pin if user scrolls up.
           isPinned = false;
           buttonContainer?.classList.remove('opacity-0');
         }
-
-        lastScrollTop = scroller.scrollTop;
       },
     }),
 

package/src/extensions/command/action.ts

@@ -46,7 +46,6 @@ export const closeCommand: Command = (view: EditorView) => {
 export const commandKeyBindings: readonly KeyBinding[] = [
   {
     key: '/',
-    preventDefault: true,
     run: openCommand,
   },
   {

package/src/extensions/command/command-menu.ts

@@ -44,7 +44,7 @@ export const commandMenu = (options: CommandMenuOptions) => {
             activeRange.to,
             Decoration.mark({
               tagName: 'dx-anchor',
-              class: 'cm-ref-tag',
+              class: 'cm-floating-menu-trigger',
               attributes: {
                 'data-auto-trigger': 'true',
                 'data-trigger': trigger!,

package/src/extensions/command/floating-menu.ts

@@ -34,12 +34,10 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
         {
           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-anchor');
-          this.tag.classList.add('cm-ref-tag');
-          this.tag.appendChild(button);
+          this.tag.classList.add('cm-floating-menu-trigger');
+          this.tag.appendChild(icon);
         }
 
         container.appendChild(this.tag);
@@ -69,7 +67,7 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
           this.tag.style.display = 'none';
           this.tag.classList.add('opacity-10');
         } else if (update.transactions.some((tr) => tr.effects.some((effect) => effect.is(closeEffect)))) {
-          this.tag.style.display = 'block';
+          this.tag.style.display = '';
         } else if (
           update.docChanged ||
           update.focusChanged ||
@@ -99,7 +97,7 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
 
         this.tag.style.top = `${offsetTop}px`;
         this.tag.style.left = `${offsetLeft}px`;
-        this.tag.style.display = 'block';
+        this.tag.style.display = '';
       }
 
       scheduleUpdate() {
@@ -113,21 +111,18 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
   ),
 
   EditorView.theme({
-    '.cm-ref-tag': {
+    '.cm-floating-menu-trigger': {
       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',
+      placeContent: 'center',
       width: '2rem',
       height: '2rem',
     },
+    '&:focus-within .cm-floating-menu-trigger': {
+      opacity: '1',
+    },
   }),
 ];

package/src/extensions/command/useCommandMenu.ts

@@ -5,7 +5,7 @@
 import { type EditorView } from '@codemirror/view';
 import { type RefObject, useCallback, useMemo, useRef, useState } from 'react';
 
-import { type DxAnchor, type DxAnchorActivate } from '@dxos/lit-ui';
+import { type DxAnchorActivate } from '@dxos/react-ui';
 import { type MaybePromise } from '@dxos/util';
 
 import { type CommandMenuGroup, type CommandMenuItem, getItem, getNextItem, getPreviousItem } from '../../components';
@@ -21,7 +21,6 @@ export type UseCommandMenuOptions = {
 };
 
 export const useCommandMenu = ({ viewRef, trigger, placeholder, getMenu }: UseCommandMenuOptions) => {
-  const triggerRef = useRef<DxAnchor | null>(null);
   const currentRef = useRef<CommandMenuItem | null>(null);
   const groupsRef = useRef<CommandMenuGroup[]>([]);
   const [currentItem, setCurrentItem] = useState<string>();
@@ -35,7 +34,6 @@ export const useCommandMenu = ({ viewRef, trigger, placeholder, getMenu }: UseCo
       }
       setOpen(open);
       if (!open) {
-        triggerRef.current = null;
         setCurrentItem(undefined);
         viewRef.current?.dispatch({ effects: [commandRangeEffect.of(null)] });
       }
@@ -50,7 +48,6 @@ export const useCommandMenu = ({ viewRef, trigger, placeholder, getMenu }: UseCo
         currentRef.current = item;
       }
 
-      triggerRef.current = event.trigger;
       const triggerKey = event.trigger.getAttribute('data-trigger');
       if (!open && triggerKey) {
         await handleOpenChange(true, triggerKey);
@@ -70,7 +67,7 @@ export const useCommandMenu = ({ viewRef, trigger, placeholder, getMenu }: UseCo
   }, []);
 
   const serializedTrigger = Array.isArray(trigger) ? trigger.join(',') : trigger;
-  const _commandMenu = useMemo(() => {
+  const memoizedCommandMenu = useMemo(() => {
     return commandMenu({
       trigger,
       placeholder,
@@ -107,10 +104,9 @@ export const useCommandMenu = ({ viewRef, trigger, placeholder, getMenu }: UseCo
   }, [handleOpenChange, getMenu, serializedTrigger, placeholder]);
 
   return {
-    commandMenu: _commandMenu,
+    commandMenu: memoizedCommandMenu,
     currentItem,
     groupsRef,
-    ref: triggerRef,
     open,
     onActivate: handleActivate,
     onOpenChange: setOpen,

package/src/extensions/markdown/link.ts

@@ -26,6 +26,9 @@ export const linkTooltip = (renderTooltip: RenderCallback<{ url: string }>) => {
       }
 
       const urlText = view.state.sliceDoc(url.from, url.to);
+      if (urlText.startsWith('dxn')) {
+        return null;
+      }
       return {
         pos: link.from,
         end: link.to,

package/src/extensions/outliner/outliner.ts

@@ -159,7 +159,7 @@ const decorations = () => [
       '.cm-list-item-focused': {
         borderColor: 'var(--dx-accentFocusIndicator)',
       },
-      '[data-has-focus] & .cm-list-item-selected': {
+      '&:focus-within .cm-list-item-selected': {
         borderColor: 'var(--dx-separator)',
       },
     }),

package/src/extensions/preview/preview.ts

@@ -22,9 +22,6 @@ export type PreviewLinkTarget = {
   object?: any;
 };
 
-// TODO(wittjosiah): Remove.
-export type PreviewLookup = (link: PreviewLinkRef) => Promise<PreviewLinkTarget | null | undefined>;
-
 export type PreviewOptions = {
   addBlockContainer?: (link: PreviewLinkRef, el: HTMLElement) => void;
   removeBlockContainer?: (link: PreviewLinkRef) => void;

package/src/hooks/useTextEditor.ts

@@ -96,18 +96,6 @@ export const useTextEditor = (
           EditorView.exceptionSink.of((err) => {
             log.catch(err);
           }),
-          // TODO(burdon): Factor out debug inspector.
-          // ViewPlugin.fromClass(
-          //   class {
-          //     constructor(_view: EditorView) {
-          //       log('construct', { id });
-          //     }
-          //
-          //     destroy() {
-          //       log('destroy', { id });
-          //     }
-          //   },
-          // ),
         ].filter(isNotFalsy),
       });
 

package/src/stories/CommandMenu.stories.tsx

@@ -15,10 +15,9 @@ import { Testing, type ValueGenerator, createObjectFactory } from '@dxos/schema/
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import {
-  CommandMenu,
   type CommandMenuGroup,
   type CommandMenuItem,
-  RefPopover,
+  CommandMenuProvider,
   coreSlashCommands,
   filterItems,
   insertAtCursor,
@@ -37,13 +36,12 @@ type StoryProps = Omit<UseCommandMenuOptions, 'viewRef'> & { text: string };
 
 const DefaultStory = ({ text, ...options }: StoryProps) => {
   const viewRef = useRef<EditorView>();
-  const { commandMenu, groupsRef, currentItem, onSelect, ...props } = useCommandMenu({ viewRef, ...options });
+  const { commandMenu, groupsRef, ...commandMenuProps } = useCommandMenu({ viewRef, ...options });
 
   return (
-    <RefPopover modal={false} {...props}>
+    <CommandMenuProvider groups={groupsRef.current} {...commandMenuProps}>
       <EditorStory ref={viewRef} text={text} placeholder={''} extensions={commandMenu} />
-      <CommandMenu groups={groupsRef.current} currentItem={currentItem} onSelect={onSelect} />
-    </RefPopover>
+    </CommandMenuProvider>
   );
 };
 
@@ -123,7 +121,7 @@ export const Link: Story = {
               label: object.name,
               icon: 'ph--user--regular',
               onSelect: (view, head) => {
-                const link = `[${object.name}][${Obj.getDXN(object)}]`;
+                const link = `[${object.name}](${Obj.getDXN(object)})`;
                 if (query?.startsWith('@')) {
                   insertAtLineStart(view, head, `!${link}\n`);
                 } else {

package/src/stories/Outliner.stories.tsx

@@ -6,13 +6,12 @@ import '@dxos-theme';
 
 import { type EditorView } from '@codemirror/view';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useRef } from 'react';
+import React, { useMemo, useRef } from 'react';
 
-import { DropdownMenu } from '@dxos/react-ui';
 import { withAttention } from '@dxos/react-ui-attention/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { RefDropdownMenuProvider } from '../components';
+import { type CommandMenuGroup, type CommandMenuItem, CommandMenuProvider } from '../components';
 import { deleteItem, hashtag, listItemToString, outliner, treeFacet } from '../extensions';
 import { str } from '../testing';
 
@@ -25,14 +24,33 @@ type StoryProps = {
 const DefaultStory = ({ text }: StoryProps) => {
   const viewRef = useRef<EditorView>(null);
 
-  const handleDelete = () => {
-    if (viewRef.current) {
-      deleteItem(viewRef.current);
-    }
-  };
+  const commandGroups: CommandMenuGroup[] = useMemo(
+    () => [
+      {
+        id: 'outliner-actions',
+        items: [
+          {
+            id: 'delete-row',
+            label: 'Delete',
+            onSelect: (view: EditorView) => {
+              deleteItem(view);
+            },
+          },
+        ],
+      },
+    ],
+    [],
+  );
 
   return (
-    <RefDropdownMenuProvider>
+    <CommandMenuProvider
+      groups={commandGroups}
+      onSelect={(item: CommandMenuItem) => {
+        if (viewRef.current && item.onSelect) {
+          return item.onSelect(viewRef.current, viewRef.current.state.selection.main.head);
+        }
+      }}
+    >
       <EditorStory
         ref={viewRef}
         text={text}
@@ -46,16 +64,7 @@ const DefaultStory = ({ text }: StoryProps) => {
           return <pre className='p-1 overflow-auto text-xs text-green-800 dark:text-green-200'>{lines.join('\n')}</pre>;
         }}
       />
-
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content>
-          <DropdownMenu.Viewport>
-            <DropdownMenu.Item onClick={handleDelete}>Delete</DropdownMenu.Item>
-          </DropdownMenu.Viewport>
-          <DropdownMenu.Arrow />
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </RefDropdownMenuProvider>
+    </CommandMenuProvider>
   );
 };
 

package/src/stories/Preview.stories.tsx

@@ -18,8 +18,8 @@ import { hoverableControlItem, hoverableControlItemTransition, hoverableControls
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 import { trim } from '@dxos/util';
 
-import { PreviewProvider, useRefPopover } from '../components';
 import { type PreviewLinkRef, type PreviewLinkTarget, getLinkRef, image, preview } from '../extensions';
+import { PreviewPopoverProvider, usePreviewPopover } from '../testing';
 
 import { EditorStory } from './components';
 
@@ -45,7 +45,7 @@ const useRefTarget = (link: PreviewLinkRef): PreviewLinkTarget | undefined => {
 };
 
 const PreviewCard = () => {
-  const { target } = useRefPopover('PreviewCard');
+  const { target } = usePreviewPopover('PreviewCard');
   return (
     <Popover.Portal>
       <Popover.Content onOpenAutoFocus={(event) => event.preventDefault()}>
@@ -200,7 +200,7 @@ export const Default: Story = {
     }, []);
 
     return (
-      <PreviewProvider onLookup={handlePreviewLookup}>
+      <PreviewPopoverProvider onLookup={handlePreviewLookup}>
         <EditorStory
           ref={handleViewRef}
           text={trim`
@@ -223,7 +223,7 @@ export const Default: Story = {
         {previewBlocks.map(({ link, el }) => (
           <PreviewBlock key={link.ref} link={link} el={el} view={view} />
         ))}
-      </PreviewProvider>
+      </PreviewPopoverProvider>
     );
   },
 };