@dxos/react-ui-editor 0.8.4-main.3eb6e50203 → 0.8.4-main.3fbcb4aa9b

package/src/components/EditorMenuProvider/menu-presets.ts

@@ -110,6 +110,7 @@ export const linkSlashCommands: EditorMenuGroup = {
       label: 'Block embed',
       icon: 'ph--lego--regular',
       onSelect: ({ view, head }) => {
+        // Seed the same query shape as typing "@@" manually.
         view.dispatch({
           changes: { from: head, insert: '@@' },
           selection: { anchor: head + 2, head: head + 2 },

package/src/components/EditorMenuProvider/popover.ts

@@ -13,7 +13,8 @@ import {
   keymap,
 } from '@codemirror/view';
 
-import { type PlaceholderOptions, type Range, modalStateField, placeholder } from '@dxos/ui-editor';
+import { type PlaceholderOptions, modalStateField, placeholder } from '@dxos/ui-editor';
+import { type Range } from '@dxos/ui-editor/types';
 import { isNonNullable, isTruthy } from '@dxos/util';
 
 const DELIMITERS = [' ', ':'];
@@ -52,6 +53,7 @@ export const popover = (options: PopoverOptions = {}): Extension => {
       placeholder({
         // TODO(burdon): Translations.
         content: `Press '${Array.isArray(options.trigger) ? options.trigger[0] : options.trigger}' for commands`,
+        focusOnly: true,
         ...options.placeholder,
       }),
   ].filter(isTruthy);

package/src/components/EditorMenuProvider/useEditorMenu.ts

@@ -62,7 +62,8 @@ export const useEditorMenu = ({
   const getMenuOptions = useCallback<NonNullable<UseEditorMenuProps['getMenu']>>(
     async ({ text, trigger, ...props }) => {
       const groups = (await getMenu?.({ text, trigger, ...props })) ?? [];
-      return filter
+      // The "@" menu can use "@@" as syntax for block embeds, so it owns its own query filtering.
+      return filter && trigger !== '@'
         ? filterMenuGroups(groups, (item) =>
             text ? (item.label as string).toLowerCase().startsWith(text.toLowerCase()) : true,
           )
@@ -108,7 +109,13 @@ export const useEditorMenu = ({
   );
 
   const handleSelect = useCallback<NonNullable<UseEditorMenu['onSelect']>>(({ view, item }) => {
+    // Delete trigger range (e.g., "/" and any typed filter text).
+    const { range } = view.state.field(popoverStateField) ?? {};
+    if (range) {
+      view.dispatch({ changes: { from: range.from, to: range.to, insert: '' } });
+    }
     void item.onSelect?.({ view, head: view.state.selection.main.head });
+    view.focus();
   }, []);
 
   const handleCancel = useCallback<NonNullable<UseEditorMenu['onCancel']>>(({ view }) => {

package/src/components/EditorPreviewProvider/EditorPreviewProvider.tsx

@@ -68,7 +68,7 @@ export const EditorPreviewProvider = ({ children, onLookup }: EditorPreviewProvi
     <EditorPreviewContextProvider pending={value.pending} link={value.link} target={value.target}>
       <Popover.Root open={open} onOpenChange={setOpen}>
         <Popover.VirtualTrigger virtualRef={triggerRef as unknown as RefObject<HTMLButtonElement>} />
-        <div role='none' className='contents' ref={setRoot}>
+        <div className='contents' ref={setRoot}>
           {children}
         </div>
       </Popover.Root>

package/src/components/EditorToolbar/EditorToolbar.tsx

@@ -8,24 +8,19 @@ import React, { memo, useMemo } from 'react';
 
 import { type Node } from '@dxos/app-graph';
 import { ElevationProvider, type ThemedClassName } from '@dxos/react-ui';
-import {
-  type ActionGraphProps,
-  type MenuAction,
-  MenuProvider,
-  ToolbarMenu,
-  createGapSeparator,
-  useMenuActions,
-} from '@dxos/react-ui-menu';
-import { type EditorViewMode } from '@dxos/ui-editor';
+import { type ActionGraphProps, Menu, type MenuAction, MenuBuilder, useMenuActions } from '@dxos/react-ui-menu';
+import { type EditorViewMode } from '@dxos/ui-editor/types';
 
-import { createLists } from './actions';
-import { createBlocks } from './blocks';
-import { createFormatting } from './formatting';
-import { createHeadings } from './headings';
-import { createImageUpload } from './image';
-import { createSearch } from './search';
-import { type EditorToolbarState } from './useEditorToolbar';
-import { createViewMode } from './view-mode';
+import { addBlocks } from './blocks';
+import { addFormatting } from './formatting';
+import { addHeadings } from './headings';
+import { addImageUpload } from './image';
+import { addLists } from './lists';
+import { addSearch } from './search';
+import { type EditorToolbarState } from './types';
+import { addViewMode } from './view-mode';
+
+// TODO(burdon): Enable toolbar variants (e.g., markdown, code).
 
 export type EditorToolbarFeatureFlags = Partial<{
   showHeadings: boolean;
@@ -56,13 +51,13 @@ export type EditorToolbarProps = ThemedClassName<
 >;
 
 export const EditorToolbar = memo(({ classNames, role, attendableId, onAction, ...props }: EditorToolbarProps) => {
-  const menuProps = useEditorToolbarActionGraph(props);
+  const menuActions = useMarkdownMenuActions(props);
 
   return (
     <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
-      <MenuProvider {...menuProps} attendableId={attendableId} onAction={onAction}>
-        <ToolbarMenu classNames={classNames} textBlockWidth />
-      </MenuProvider>
+      <Menu.Root {...menuActions} attendableId={attendableId} onAction={onAction}>
+        <Menu.Toolbar classNames={classNames} />
+      </Menu.Root>
     </ElevationProvider>
   );
 });
@@ -70,12 +65,13 @@ export const EditorToolbar = memo(({ classNames, role, attendableId, onAction, .
 type ToolbarActionsProps = Pick<EditorToolbarActionGraphProps, 'state' | 'getView' | 'customActions'> &
   EditorToolbarFeatureFlags;
 
+// TODO(burdon): Some actions should toggle the state (e.g., toggle bullets on/off depending on the current state).
 // TODO(wittjosiah): Toolbar re-rendering is causing this graph to be recreated and breaking reactivity in some cases.
 //   E.g. for toolbar dropdowns which use active icon, the icon is not updated when the active item changes.
 //   This is currently only happening in the markdown plugin usage and should be reproduced in an editor story.
-const useEditorToolbarActionGraph = ({ state, getView, customActions, ...features }: ToolbarActionsProps) => {
+const useMarkdownMenuActions = ({ state, getView, customActions, ...features }: ToolbarActionsProps) => {
   const menuCreator = useMemo(
-    () => createToolbarActions({ state, getView, customActions, ...features }),
+    () => createMarkdownActions({ state, getView, customActions, ...features }),
     [
       state,
       getView,
@@ -93,55 +89,25 @@ const useEditorToolbarActionGraph = ({ state, getView, customActions, ...feature
   return useMenuActions(menuCreator);
 };
 
-const createToolbarActions = ({
+const createMarkdownActions = ({
   state,
   getView,
   customActions,
   ...features
 }: ToolbarActionsProps): Atom.Atom<ActionGraphProps> => {
   return Atom.make((get) => {
-    const graph: ActionGraphProps = {
-      nodes: [],
-      edges: [],
-    };
-
-    // TODO(burdon): Builder pattern?
-    const addSubGraph = (graph: ActionGraphProps, subGraph: ActionGraphProps) => {
-      graph.nodes.push(...subGraph.nodes);
-      graph.edges.push(...subGraph.edges);
-    };
-
     // Subscribe to state changes.
     const stateSnapshot = get(state);
-
-    if (features?.showHeadings ?? true) {
-      addSubGraph(graph, createHeadings(stateSnapshot, getView));
-    }
-    if (features?.showFormatting ?? true) {
-      addSubGraph(graph, createFormatting(stateSnapshot, getView));
-    }
-    if (features?.showLists ?? true) {
-      addSubGraph(graph, createLists(stateSnapshot, getView));
-    }
-    if (features?.showBlocks ?? true) {
-      addSubGraph(graph, createBlocks(stateSnapshot, getView));
-    }
-    if (features?.onImageUpload) {
-      addSubGraph(graph, createImageUpload(features.onImageUpload!));
-    }
-
-    addSubGraph(graph, createGapSeparator());
-
-    if (customActions) {
-      addSubGraph(graph, get(customActions));
-    }
-    if (features?.showSearch ?? true) {
-      addSubGraph(graph, createSearch(getView));
-    }
-    if (features?.onViewModeChange) {
-      addSubGraph(graph, createViewMode(stateSnapshot, features.onViewModeChange!));
-    }
-
-    return graph;
+    return MenuBuilder.make()
+      .subgraph(features?.showHeadings !== false && addHeadings(stateSnapshot, getView))
+      .subgraph(features?.showFormatting !== false && addFormatting(stateSnapshot, getView))
+      .subgraph(features?.showLists !== false && addLists(stateSnapshot, getView))
+      .subgraph(features?.showBlocks !== false && addBlocks(stateSnapshot, getView))
+      .subgraph(features?.onImageUpload && addImageUpload(features.onImageUpload))
+      .separator('gap')
+      .subgraph(customActions && get(customActions))
+      .subgraph(features?.showSearch !== false && addSearch(getView))
+      .subgraph(features?.onViewModeChange && addViewMode(stateSnapshot, features.onViewModeChange))
+      .build();
   });
 };

package/src/components/EditorToolbar/blocks.ts

@@ -4,56 +4,64 @@
 
 import { type EditorView } from '@codemirror/view';
 
-import { type Node } from '@dxos/app-graph';
-import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { type ActionGroupBuilderFn, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 import { addBlockquote, addCodeblock, insertTable, removeBlockquote, removeCodeblock } from '@dxos/ui-editor';
 
-import { createEditorAction, createEditorActionGroup } from './actions';
-import { type EditorToolbarState } from './useEditorToolbar';
+import { translationKey } from '#translations';
 
-const createBlockGroupAction = (value: string) =>
-  createEditorActionGroup('block', {
-    variant: 'toggleGroup',
-    selectCardinality: 'single',
-    value,
-  } as ToolbarMenuActionGroupProperties);
+import { type EditorToolbarState } from './types';
 
-const createBlockActions = (value: string, getView: () => EditorView, blankLine?: boolean) =>
-  Object.entries({
-    blockquote: 'ph--quotes--regular',
-    codeblock: 'ph--code-block--regular',
-    table: 'ph--table--regular',
-  }).map(([type, icon]) => {
-    const checked = type === value;
-    return createEditorAction(type, { checked, ...(type === 'table' && { disabled: !!blankLine }), icon }, () => {
-      const view = getView();
-      if (!view) {
-        return;
-      }
+const blockTypes = {
+  blockquote: 'ph--quotes--regular',
+  codeblock: 'ph--code-block--regular',
+  table: 'ph--table--regular',
+};
 
-      switch (type) {
-        case 'blockquote':
-          checked ? removeBlockquote(view) : addBlockquote(view);
-          break;
-        case 'codeblock':
-          checked ? removeCodeblock(view) : addCodeblock(view);
-          break;
-        case 'table':
-          insertTable(view);
-          break;
-      }
-    });
-  });
+/** Add block actions to the builder. */
+export const addBlocks =
+  (state: EditorToolbarState, getView: () => EditorView): ActionGroupBuilderFn =>
+  (builder) => {
+    const value = state?.blockQuote ? 'blockquote' : (state.blockType ?? '');
+    builder.group(
+      'block',
+      {
+        label: ['block.label', { ns: translationKey }],
+        iconOnly: true,
+        variant: 'toggleGroup',
+        selectCardinality: 'single',
+        value,
+      } as ToolbarMenuActionGroupProperties,
+      (group) => {
+        for (const [type, icon] of Object.entries(blockTypes)) {
+          const checked = type === value;
+          group.action(
+            type,
+            {
+              label: [`block.${type}.label`, { ns: translationKey }],
+              checked,
+              ...(type === 'table' && { disabled: !!state.blankLine }),
+              icon,
+            },
+            () => {
+              const view = getView();
+              if (!view) {
+                return;
+              }
 
-export const createBlocks = (state: EditorToolbarState, getView: () => EditorView) => {
-  const value = state?.blockQuote ? 'blockquote' : (state.blockType ?? '');
-  const blockGroupAction = createBlockGroupAction(value);
-  const blockActions = createBlockActions(value, getView, state.blankLine);
-  return {
-    nodes: [blockGroupAction as Node.NodeArg<any>, ...blockActions],
-    edges: [
-      { source: 'root', target: 'block' },
-      ...blockActions.map(({ id }) => ({ source: blockGroupAction.id, target: id })),
-    ],
+              switch (type) {
+                case 'blockquote':
+                  checked ? removeBlockquote(view) : addBlockquote(view);
+                  break;
+                case 'codeblock':
+                  checked ? removeCodeblock(view) : addCodeblock(view);
+                  break;
+                case 'table':
+                  insertTable(view);
+                  break;
+              }
+            },
+          );
+        }
+      },
+    );
   };
-};

package/src/components/EditorToolbar/formatting.ts

@@ -4,12 +4,12 @@
 
 import { type EditorView } from '@codemirror/view';
 
-import { type Node } from '@dxos/app-graph';
-import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { type ActionGroupBuilderFn, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 import { type Formatting, Inline, addLink, removeLink, setStyle } from '@dxos/ui-editor';
 
-import { createEditorAction, createEditorActionGroup } from './actions';
-import { type EditorToolbarState } from './useEditorToolbar';
+import { translationKey } from '#translations';
+
+import { type EditorToolbarState } from './types';
 
 const formats = {
   strong: 'ph--text-b--regular',
@@ -19,47 +19,46 @@ const formats = {
   link: 'ph--link--regular',
 };
 
-const createFormattingGroup = (formatting: Formatting) =>
-  createEditorActionGroup('formatting', {
-    variant: 'toggleGroup',
-    selectCardinality: 'multiple',
-    value: Object.keys(formats).filter((key) => !!formatting[key as keyof Formatting]),
-  } as ToolbarMenuActionGroupProperties);
-
-const createFormattingActions = (formatting: Formatting, getView: () => EditorView) =>
-  Object.entries(formats).map(([type, icon]) => {
-    const checked = !!formatting[type as keyof Formatting];
-    return createEditorAction(type, { checked, icon }, () => {
-      const view = getView();
-      if (!view) {
-        return;
-      }
+/** Add formatting actions to the builder. */
+export const addFormatting =
+  (state: EditorToolbarState, getView: () => EditorView): ActionGroupBuilderFn =>
+  (builder) => {
+    const formatting: Formatting = state;
+    builder.group(
+      'formatting',
+      {
+        label: ['formatting.label', { ns: translationKey }],
+        iconOnly: true,
+        variant: 'toggleGroup',
+        selectCardinality: 'multiple',
+        value: Object.keys(formats).filter((key) => !!formatting[key as keyof Formatting]),
+      } as ToolbarMenuActionGroupProperties,
+      (group) => {
+        for (const [type, icon] of Object.entries(formats)) {
+          const checked = !!formatting[type as keyof Formatting];
+          group.action(type, { label: [`formatting.${type}.label`, { ns: translationKey }], checked, icon }, () => {
+            const view = getView();
+            if (!view) {
+              return;
+            }
 
-      if (type === 'link') {
-        checked ? removeLink(view) : addLink()(view);
-        return;
-      }
+            if (type === 'link') {
+              checked ? removeLink(view) : addLink()(view);
+              return;
+            }
 
-      const inlineType =
-        type === 'strong'
-          ? Inline.Strong
-          : type === 'emphasis'
-            ? Inline.Emphasis
-            : type === 'strikethrough'
-              ? Inline.Strikethrough
-              : Inline.Code;
-      setStyle(inlineType, !checked)(view);
-    });
-  });
-
-export const createFormatting = (state: EditorToolbarState, getView: () => EditorView) => {
-  const formattingGroupAction = createFormattingGroup(state);
-  const formattingActions = createFormattingActions(state, getView);
-  return {
-    nodes: [formattingGroupAction as Node.NodeArg<any>, ...formattingActions],
-    edges: [
-      { source: 'root', target: 'formatting' },
-      ...formattingActions.map(({ id }) => ({ source: formattingGroupAction.id, target: id })),
-    ],
+            setStyle(
+              type === 'strong'
+                ? Inline.Strong
+                : type === 'emphasis'
+                  ? Inline.Emphasis
+                  : type === 'strikethrough'
+                    ? Inline.Strikethrough
+                    : Inline.Code,
+              !checked,
+            )(view);
+          });
+        }
+      },
+    );
   };
-};

package/src/components/EditorToolbar/headings.ts

@@ -4,49 +4,22 @@
 
 import { type EditorView } from '@codemirror/view';
 
-import { type Node } from '@dxos/app-graph';
-import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { type ActionGroupBuilderFn, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 import { setHeading } from '@dxos/ui-editor';
 
-import { translationKey } from '../../translations';
+import { translationKey } from '#translations';
 
-import { createEditorAction, createEditorActionGroup } from './actions';
-import { type EditorToolbarState } from './useEditorToolbar';
+import { type EditorToolbarState } from './types';
 
-const createHeadingGroupAction = (value: string) =>
-  createEditorActionGroup(
-    'heading',
-    {
-      variant: 'dropdownMenu',
-      applyActive: true,
-      selectCardinality: 'single',
-      // TODO(wittjosiah): Remove? Not sure this does anything.
-      value,
-    } as ToolbarMenuActionGroupProperties,
-    'ph--text-h--regular',
-  );
-
-const createHeadingActions = (currentLevel: string, getView: () => EditorView) =>
-  Object.entries({
-    '0': 'ph--paragraph--regular',
-    '1': 'ph--text-h-one--regular',
-    '2': 'ph--text-h-two--regular',
-    '3': 'ph--text-h-three--regular',
-    '4': 'ph--text-h-four--regular',
-    '5': 'ph--text-h-five--regular',
-    '6': 'ph--text-h-six--regular',
-  }).map(([levelStr, icon]) => {
-    const level = parseInt(levelStr);
-    return createEditorAction(
-      `heading--${levelStr}`,
-      {
-        label: ['heading level label', { count: level, ns: translationKey }],
-        icon,
-        checked: levelStr === currentLevel,
-      },
-      () => setHeading(level)(getView()),
-    );
-  });
+const headingIcons: Record<string, string> = {
+  0: 'ph--paragraph--regular',
+  1: 'ph--text-h-one--regular',
+  2: 'ph--text-h-two--regular',
+  3: 'ph--text-h-three--regular',
+  4: 'ph--text-h-four--regular',
+  5: 'ph--text-h-five--regular',
+  6: 'ph--text-h-six--regular',
+};
 
 const computeHeadingValue = (state: EditorToolbarState) => {
   const blockType = state ? state.blockType : 'paragraph';
@@ -54,15 +27,36 @@ const computeHeadingValue = (state: EditorToolbarState) => {
   return heading ? heading[1] : blockType === 'paragraph' || !blockType ? '0' : '';
 };
 
-export const createHeadings = (state: EditorToolbarState, getView: () => EditorView) => {
-  const headingValue = computeHeadingValue(state);
-  const headingGroupAction = createHeadingGroupAction(headingValue);
-  const headingActions = createHeadingActions(headingValue, getView);
-  return {
-    nodes: [headingGroupAction as Node.NodeArg<any>, ...headingActions],
-    edges: [
-      { source: 'root', target: 'heading' },
-      ...headingActions.map(({ id }) => ({ source: headingGroupAction.id, target: id })),
-    ],
+/** Add heading actions to the builder. */
+export const addHeadings =
+  (state: EditorToolbarState, getView: () => EditorView): ActionGroupBuilderFn =>
+  (builder) => {
+    const headingValue = computeHeadingValue(state);
+    builder.group(
+      'heading',
+      {
+        label: ['heading.label', { ns: translationKey }],
+        icon: 'ph--text-h--regular',
+        iconOnly: true,
+        variant: 'dropdownMenu',
+        applyActive: true,
+        selectCardinality: 'single',
+        // TODO(wittjosiah): Remove? Not sure this does anything.
+        value: headingValue,
+      } as ToolbarMenuActionGroupProperties,
+      (group) => {
+        for (const [levelStr, icon] of Object.entries(headingIcons)) {
+          const level = parseInt(levelStr);
+          group.action(
+            `heading--${levelStr}`,
+            {
+              label: ['heading-level.label', { count: level, ns: translationKey }],
+              icon,
+              checked: levelStr === headingValue,
+            },
+            () => setHeading(level)(getView()),
+          );
+        }
+      },
+    );
   };
-};

package/src/components/EditorToolbar/image.ts

@@ -2,26 +2,21 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Node } from '@dxos/app-graph';
+import { type ActionGroupBuilderFn } from '@dxos/react-ui-menu';
 
-import { createEditorAction } from './actions';
+import { translationKey } from '#translations';
 
-const createImageUploadAction = (onImageUpload: () => void) =>
-  createEditorAction(
-    'image',
-    {
-      testId: 'editor.toolbar.image',
-      icon: 'ph--image-square--regular',
-    },
-    onImageUpload,
-  );
-
-export const createImageUpload = (
-  onImageUpload: () => void,
-): {
-  nodes: Node.NodeArg<any>[];
-  edges: Array<{ source: string; target: string }>;
-} => ({
-  nodes: [createImageUploadAction(onImageUpload)],
-  edges: [{ source: 'root', target: 'image' }],
-});
+/** Add image upload action to the builder. */
+export const addImageUpload =
+  (onImageUpload: () => void): ActionGroupBuilderFn =>
+  (builder) => {
+    builder.action(
+      'image',
+      {
+        label: ['image.label', { ns: translationKey }],
+        testId: 'editor.toolbar.image',
+        icon: 'ph--image-square--regular',
+      },
+      onImageUpload,
+    );
+  };

package/src/components/EditorToolbar/index.ts

@@ -2,7 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './EditorToolbar';
+export * from './types';
 
-export { createEditorAction, createEditorActionGroup } from './actions';
-export { type EditorToolbarState, useEditorToolbar } from './useEditorToolbar';
+export * from './EditorToolbar';

package/src/components/EditorToolbar/lists.ts

@@ -0,0 +1,58 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+
+import { type ActionGroupBuilderFn, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { List, addList, removeList } from '@dxos/ui-editor';
+
+import { translationKey } from '#translations';
+
+import { type EditorToolbarState } from './types';
+
+const listStyles = {
+  bullet: 'ph--list-bullets--regular',
+  ordered: 'ph--list-numbers--regular',
+  task: 'ph--list-checks--regular',
+};
+
+/** Add list actions to the builder. */
+export const addLists =
+  (state: EditorToolbarState, getView: () => EditorView): ActionGroupBuilderFn =>
+  (builder) => {
+    const value = state.listStyle ?? '';
+    builder.group(
+      'list',
+      {
+        label: ['list.label', { ns: translationKey }],
+        iconOnly: true,
+        variant: 'toggleGroup',
+        selectCardinality: 'single',
+        value,
+      } as ToolbarMenuActionGroupProperties,
+      (group) => {
+        for (const [listStyle, icon] of Object.entries(listStyles)) {
+          const checked = value === listStyle;
+          group.action(
+            `list-${listStyle}`,
+            { label: [`list.${listStyle}.label`, { ns: translationKey }], checked, icon },
+            () => {
+              const view = getView();
+              if (!view) {
+                return;
+              }
+
+              const listType =
+                listStyle === 'ordered' ? List.Ordered : listStyle === 'bullet' ? List.Bullet : List.Task;
+              if (checked) {
+                removeList(listType)(view);
+              } else {
+                addList(listType)(view);
+              }
+            },
+          );
+        }
+      },
+    );
+  };