@dxos/react-ui-editor 0.8.4-main.937b3ca → 0.8.4-main.9be5663bfe

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.8.4-main.937b3ca",
+  "version": "0.8.4-main.9be5663bfe",
   "description": "Text editor components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -55,7 +55,7 @@
     "@replit/codemirror-vim": "^6.2.1",
     "@replit/codemirror-vscode-keymap": "^6.0.2",
     "@uiw/codemirror-theme-vscode": "^4.25.2",
-    "ajv": "^8.17.1",
+    "ajv": "^8.18.0",
     "bind-event-listener": "^3.0.0",
     "codemirror": "^6.0.1",
     "lib0": "^0.2.65",
@@ -63,32 +63,32 @@
     "lodash.merge": "^4.6.2",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/app-graph": "0.8.4-main.937b3ca",
-    "@dxos/client": "0.8.4-main.937b3ca",
-    "@dxos/async": "0.8.4-main.937b3ca",
-    "@dxos/debug": "0.8.4-main.937b3ca",
-    "@dxos/context": "0.8.4-main.937b3ca",
-    "@dxos/display-name": "0.8.4-main.937b3ca",
-    "@dxos/echo-db": "0.8.4-main.937b3ca",
-    "@dxos/invariant": "0.8.4-main.937b3ca",
-    "@dxos/log": "0.8.4-main.937b3ca",
-    "@dxos/echo": "0.8.4-main.937b3ca",
-    "@dxos/protocols": "0.8.4-main.937b3ca",
-    "@dxos/lit-ui": "0.8.4-main.937b3ca",
-    "@dxos/react-hooks": "0.8.4-main.937b3ca",
-    "@dxos/react-ui-menu": "0.8.4-main.937b3ca",
-    "@dxos/ui": "0.8.4-main.937b3ca",
-    "@dxos/react-ui-mosaic": "0.8.4-main.937b3ca",
-    "@dxos/ui-theme": "0.8.4-main.937b3ca",
-    "@dxos/ui-editor": "0.8.4-main.937b3ca",
-    "@dxos/util": "0.8.4-main.937b3ca"
+    "@dxos/app-graph": "0.8.4-main.9be5663bfe",
+    "@dxos/client": "0.8.4-main.9be5663bfe",
+    "@dxos/context": "0.8.4-main.9be5663bfe",
+    "@dxos/async": "0.8.4-main.9be5663bfe",
+    "@dxos/display-name": "0.8.4-main.9be5663bfe",
+    "@dxos/echo": "0.8.4-main.9be5663bfe",
+    "@dxos/echo-db": "0.8.4-main.9be5663bfe",
+    "@dxos/invariant": "0.8.4-main.9be5663bfe",
+    "@dxos/debug": "0.8.4-main.9be5663bfe",
+    "@dxos/log": "0.8.4-main.9be5663bfe",
+    "@dxos/lit-ui": "0.8.4-main.9be5663bfe",
+    "@dxos/react-hooks": "0.8.4-main.9be5663bfe",
+    "@dxos/react-ui-menu": "0.8.4-main.9be5663bfe",
+    "@dxos/protocols": "0.8.4-main.9be5663bfe",
+    "@dxos/react-ui-mosaic": "0.8.4-main.9be5663bfe",
+    "@dxos/ui": "0.8.4-main.9be5663bfe",
+    "@dxos/ui-theme": "0.8.4-main.9be5663bfe",
+    "@dxos/util": "0.8.4-main.9be5663bfe",
+    "@dxos/ui-editor": "0.8.4-main.9be5663bfe"
   },
   "devDependencies": {
     "@automerge/automerge": "3.2.3",
     "@automerge/automerge-repo": "2.5.1",
     "@automerge/automerge-repo-network-broadcastchannel": "2.5.1",
-    "@effect-atom/atom-react": "^0.4.6",
-    "@effect/platform": "0.93.6",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
     "@types/chai": "^4.2.15",
     "@types/chai-dom": "^1.11.0",
     "@types/lodash.defaultsdeep": "^4.6.6",
@@ -99,39 +99,39 @@
     "@types/react-test-renderer": "^17.0.2",
     "chai": "^4.4.1",
     "chai-dom": "^1.11.0",
-    "effect": "3.19.11",
-    "happy-dom": "^13.3.1",
+    "effect": "3.20.0",
+    "happy-dom": "^20.0.0",
     "jsdom": "^27.0.0",
     "mocha": "^10.6.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "react-test-renderer": "~19.2.0",
-    "vite": "7.1.9",
+    "vite": "^7.1.11",
     "vite-plugin-top-level-await": "^1.6.0",
     "vite-plugin-wasm": "^3.5.0",
-    "@dxos/config": "0.8.4-main.937b3ca",
-    "@dxos/echo-atom": "0.8.4-main.937b3ca",
-    "@dxos/echo": "0.8.4-main.937b3ca",
-    "@dxos/keyboard": "0.8.4-main.937b3ca",
-    "@dxos/random": "0.8.4-main.937b3ca",
-    "@dxos/react-ui-attention": "0.8.4-main.937b3ca",
-    "@dxos/react-ui": "0.8.4-main.937b3ca",
-    "@dxos/react-client": "0.8.4-main.937b3ca",
-    "@dxos/schema": "0.8.4-main.937b3ca",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.937b3ca",
-    "@dxos/ui-theme": "0.8.4-main.937b3ca",
-    "@dxos/storybook-utils": "0.8.4-main.937b3ca",
-    "@dxos/ui-types": "0.8.4-main.937b3ca"
+    "@dxos/config": "0.8.4-main.9be5663bfe",
+    "@dxos/echo": "0.8.4-main.9be5663bfe",
+    "@dxos/echo-atom": "0.8.4-main.9be5663bfe",
+    "@dxos/keyboard": "0.8.4-main.9be5663bfe",
+    "@dxos/random": "0.8.4-main.9be5663bfe",
+    "@dxos/react-client": "0.8.4-main.9be5663bfe",
+    "@dxos/react-ui": "0.8.4-main.9be5663bfe",
+    "@dxos/react-ui-attention": "0.8.4-main.9be5663bfe",
+    "@dxos/schema": "0.8.4-main.9be5663bfe",
+    "@dxos/storybook-utils": "0.8.4-main.9be5663bfe",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.9be5663bfe",
+    "@dxos/ui-types": "0.8.4-main.9be5663bfe",
+    "@dxos/ui-theme": "0.8.4-main.9be5663bfe"
   },
   "peerDependencies": {
-    "@effect-atom/atom-react": "^0.4.6",
-    "@effect/platform": "0.93.6",
-    "effect": "3.19.11",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-client": "0.8.4-main.937b3ca",
-    "@dxos/ui-theme": "0.8.4-main.937b3ca",
-    "@dxos/react-ui": "0.8.4-main.937b3ca"
+    "@dxos/react-client": "0.8.4-main.9be5663bfe",
+    "@dxos/react-ui": "0.8.4-main.9be5663bfe",
+    "@dxos/ui-theme": "0.8.4-main.9be5663bfe"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Editor/Editor.stories.tsx

@@ -6,10 +6,10 @@ import { type Decorator, type Meta, type StoryObj } from '@storybook/react-vite'
 import React, { useMemo } from 'react';
 
 import { createDocAccessor, createObject } from '@dxos/echo-db';
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { useThemeContext } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { withAttention } from '@dxos/react-ui-attention/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { Text } from '@dxos/schema';
 import {
   automerge,
@@ -20,18 +20,17 @@ import {
 } from '@dxos/ui-editor';
 
 import { createMenuGroup } from '../EditorMenuProvider';
-
 import { Editor, type EditorContentProps } from './Editor';
 
 // TODO(burdon): PreviewPopoverProvider (MarkdownStream, Preview story).
 // TODO(burdon): Adapt Markdown plugin to use new Editor (plan first to check fit).
 // TODO(burdon): Remove redundant hooks and simplify props.
 
-faker.seed(1234);
+random.seed(1234);
 
 const initialValue = ['# Blue Monday', '', 'How does it **feel**?', ''].join('\n');
 
-const items = faker.helpers.multiple(faker.commerce.productName, { count: 10 }).sort();
+const items = random.helpers.multiple(random.commerce.productName, { count: 10 }).sort();
 
 // TODO(burdon): Adapter other tests in react-ui-editor/stories to use this pattern.
 const withExtensions: Decorator<EditorContentProps> = (Story, { args }) => {
@@ -42,7 +41,7 @@ const withExtensions: Decorator<EditorContentProps> = (Story, { args }) => {
       createThemeExtensions({ themeMode }),
       createMarkdownExtensions(),
       decorateMarkdown(),
-      automerge(createDocAccessor(createObject(Text.make(args.initialValue)), ['content'])),
+      automerge(createDocAccessor(createObject(Text.make({ content: args.initialValue })), ['content'])),
     ],
     [themeMode],
   );
@@ -53,7 +52,7 @@ const withExtensions: Decorator<EditorContentProps> = (Story, { args }) => {
 const meta = {
   title: 'ui/react-ui-editor/Editor',
   component: Editor.Content,
-  decorators: [withExtensions, withTheme, withLayout({ layout: 'column' }), withAttention],
+  decorators: [withExtensions, withTheme(), withLayout({ layout: 'column' }), withAttention()],
   parameters: {
     layout: 'fullscreen',
   },

package/src/components/Editor/Editor.tsx

@@ -3,6 +3,7 @@
 //
 
 import { type Extension } from '@codemirror/state';
+import { type Atom } from '@effect-atom/atom-react';
 import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren, forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';
 
@@ -33,10 +34,16 @@ type EditorContextValue = {
   controller?: EditorController;
   setController: (controller: EditorController) => void;
   extensions?: Extension[];
-} & Pick<NaturalEditorToolbarProps, 'state'>;
+  state: Atom.Writable<EditorToolbarState>;
+};
 
 const [EditorContextProvider, useEditorContext] = createContext<EditorContextValue>('Editor');
 
+/**
+ * Access the editor context. Must be used within `Editor.Root`.
+ */
+export { useEditorContext };
+
 //
 // Root
 //
@@ -84,6 +91,8 @@ EditorRoot.displayName = 'Editor.Root';
 // Viewport
 //
 
+const EDITOR_VIEWPORT_NAME = 'Editor.Viewport';
+
 type EditorViewportProps = ThemedClassName<PropsWithChildren<{}>>;
 
 /**
@@ -91,18 +100,20 @@ type EditorViewportProps = ThemedClassName<PropsWithChildren<{}>>;
  */
 const EditorViewport = ({ classNames, children }: EditorViewportProps) => {
   return (
-    <div role='none' className={mx('grid grid-rows-[min-content_1fr] bs-full overflow-hidden', classNames)}>
+    <div role='none' className={mx('grid grid-rows-[min-content_1fr] h-full overflow-hidden', classNames)}>
       {children}
     </div>
   );
 };
 
-EditorViewport.displayName = 'Editor.Viewport';
+EditorViewport.displayName = EDITOR_VIEWPORT_NAME;
 
 //
 // Content
 //
 
+const EDITOR_CONTENT_NAME = 'Editor.Content';
+
 type EditorContentProps = Omit<NaturalEditorContentProps, 'ref'>;
 
 /**
@@ -110,7 +121,7 @@ type EditorContentProps = Omit<NaturalEditorContentProps, 'ref'>;
  * Automatically registers the editor controller with the context.
  */
 const EditorContent = ({ extensions: providedExtensions, ...props }: EditorContentProps) => {
-  const { extensions: additionalExtensions = [], setController } = useEditorContext(EditorContent.displayName);
+  const { extensions: additionalExtensions = [], setController } = useEditorContext(EDITOR_CONTENT_NAME);
 
   const extensions = useMemo(
     () => [additionalExtensions, providedExtensions].filter(isNonNullable).flat(),
@@ -120,12 +131,14 @@ const EditorContent = ({ extensions: providedExtensions, ...props }: EditorConte
   return <NaturalEditorContent {...props} extensions={extensions} ref={setController} />;
 };
 
-EditorContent.displayName = 'Editor.Content';
+EditorContent.displayName = EDITOR_CONTENT_NAME;
 
 //
 // Toolbar
 //
 
+const EDITOR_TOOLBAR_NAME = 'Editor.Toolbar';
+
 type EditorToolbarProps = Omit<NaturalEditorToolbarProps, 'getView' | 'state'>;
 
 /**
@@ -133,7 +146,7 @@ type EditorToolbarProps = Omit<NaturalEditorToolbarProps, 'getView' | 'state'>;
  * Automatically connects to the editor view through context.
  */
 const EditorToolbar = (props: EditorToolbarProps) => {
-  const { controller, state } = useEditorContext(EditorToolbar.displayName);
+  const { controller, state } = useEditorContext(EDITOR_TOOLBAR_NAME);
 
   // TODO(burdon): Fix invariant.
   const getView = useCallback(() => {
@@ -144,25 +157,12 @@ const EditorToolbar = (props: EditorToolbarProps) => {
   return <NaturalEditorToolbar {...props} getView={getView} state={state} />;
 };
 
-EditorToolbar.displayName = 'Editor.Toolbar';
+EditorToolbar.displayName = EDITOR_TOOLBAR_NAME;
 
 //
 // Editor
 //
 
-/**
- * Compound editor component following the Radix UI pattern.
- *
- * @example
- * ```tsx
- * EditorMenuGroup.Root>
- *   EditorMenuGroup.Toolbar />
- *   EditorMenuGroup.Viewport>
- *     EditorMenuGroup.Content extensions={[...]} />
- *   </Editor.Viewport>
- * </Editor.Root>
- * ```
- */
 export const Editor = {
   Root: EditorRoot,
   Viewport: EditorViewport,
@@ -170,10 +170,4 @@ export const Editor = {
   Toolbar: EditorToolbar,
 };
 
-export type {
-  EditorController,
-  EditorRootProps,
-  EditorViewportProps,
-  EditorContentProps,
-  // EditorToolbarProps, // TODO(burdon): Restore once removed deprecated props.
-};
+export type { EditorController, EditorRootProps, EditorViewportProps, EditorContentProps, EditorToolbarProps };

package/src/components/EditorContent/EditorContent.tsx

@@ -11,7 +11,6 @@ import { initialSync } from '@dxos/ui-editor';
 import { mx } from '@dxos/ui-theme';
 
 import { type UseTextEditorProps, useTextEditor } from '../../hooks';
-
 import { type EditorController, createEditorController } from './controller';
 
 export type EditorContentProps = ThemedClassName<
@@ -72,7 +71,7 @@ export const EditorContent = forwardRef<EditorController, EditorContentProps>(
       <div
         role='none'
         className={mx(
-          'is-full outline-none focus:border-accentSurface focus-within:border-neutralFocusIndicator',
+          'w-full outline-hidden focus:border-accent-surface focus-within:border-neutral-focus-indicator',
           classNames,
         )}
         ref={parentRef}

package/src/components/EditorMenuProvider/EditorMenuProvider.tsx

@@ -13,6 +13,7 @@ import {
   type DxAnchorActivate,
   Icon,
   Popover,
+  ScrollArea,
   toLocalizedString,
   useDynamicRef,
   useThemeContext,
@@ -35,9 +36,7 @@ export type EditorMenuProviderProps = PropsWithChildren<{
 }>;
 
 /**
- * Implements the Popover and listens for the `dx-anchor-activate` event from the
- * `popover` extension's decoration.
- *
+ * Implements the Popover and listens for the `dx-anchor-activate` event from the `popover` extension's decoration.
  * NOTE: We don't use DropdownMenu because the command menu needs to manage focus explicitly.
  * I.e., focus must remain in the editor while displaying the menu (for type-ahead).
  */
@@ -78,10 +77,8 @@ export const EditorMenuProvider = ({
       root,
       DX_ANCHOR_ACTIVATE as any,
       (event: DxAnchorActivate) => {
-        const { trigger, refId } = event;
-
-        // If this has a `refId`, then it’s probably a URL or DXN and out of scope for this component.
-        if (!refId) {
+        const { trigger, dxn } = event;
+        if (!dxn) {
           triggerRef.current = trigger as HTMLButtonElement;
           if (onActivate) {
             onActivate({ view: viewRef.current!, trigger: trigger.getAttribute('data-trigger') ?? undefined });
@@ -115,32 +112,32 @@ export const EditorMenuProvider = ({
       <Popover.Portal>
         <Popover.Content
           align='start'
-          classNames={tx('menu.content', 'menu--exotic-unfocusable', { elevation: 'positioned' }, [
-            'overflow-y-auto',
-            !menuGroups.length && 'hidden',
-          ])}
+          classNames={['flex flex-col', !menuGroups.length && 'hidden']}
           style={{
             maxBlockSize: 36 * numItems + 10,
           }}
-          /**
-           * NOTE: We keep the focus in the editor, but Radix routes escape key.
-           */
+          // NOTE: We keep the focus in the editor, but Radix routes escape key.
           onEscapeKeyDown={() => {
-            // NOTE: Able to cancel if not in valid state.
-            // event.preventDefault();
-            onCancel?.({ view: view! });
+            const currentView = viewRef.current;
+            if (currentView) {
+              onCancel?.({ view: currentView });
+            }
           }}
           onOpenAutoFocus={(event) => event.preventDefault()}
         >
-          <Popover.Viewport classNames={tx('menu.viewport', 'menu__viewport--exotic-unfocusable', {})}>
-            <Menu groups={menuGroups} currentItem={currentItem} onSelect={handleSelect} />
+          <Popover.Viewport asChild classNames='dx-container'>
+            <ScrollArea.Root thin>
+              <ScrollArea.Viewport>
+                <Menu groups={menuGroups} currentItem={currentItem} onSelect={handleSelect} />
+              </ScrollArea.Viewport>
+            </ScrollArea.Root>
           </Popover.Viewport>
           <Popover.Arrow />
         </Popover.Content>
       </Popover.Portal>
 
       {/* Content */}
-      <div ref={setRoot} role='none' className='contents'>
+      <div role='none' className='contents' ref={setRoot}>
         {children}
       </div>
     </Popover.Root>
@@ -162,7 +159,7 @@ const Menu = ({ groups, currentItem, onSelect }: MenuProps) => {
       {groups.map((group, index) => (
         <Fragment key={group.id}>
           <MenuGroup group={group} currentItem={currentItem} onSelect={onSelect} />
-          {index < groups.length - 1 && <div className={tx('menu.separator', 'menu__item', {})} />}
+          {index < groups.length - 1 && <div className={tx('menu.separator', {})} />}
         </Fragment>
       ))}
     </ul>
@@ -185,7 +182,7 @@ const MenuGroup = ({ group, currentItem, onSelect }: MenuGroupProps) => {
   return (
     <>
       {group.label && (
-        <div className={tx('menu.groupLabel', 'menu__group__label', {})}>
+        <div className={tx('menu.groupLabel', {})}>
           <span>{toLocalizedString(group.label, t)}</span>
         </div>
       )}
@@ -221,12 +218,8 @@ const MenuItem = ({ item, current, onSelect }: MenuItemProps) => {
   const handleSelect = useCallback(() => onSelect?.(item), [item, onSelect]);
 
   return (
-    <li
-      ref={listRef}
-      className={tx('menu.item', 'menu__item--exotic-unfocusable', {}, [current && 'bg-hoverSurface'])}
-      onClick={handleSelect}
-    >
-      {item.icon && <Icon icon={item.icon} size={5} />}
+    <li ref={listRef} className={tx('menu.item', {}, [current && 'bg-hover-surface'])} onClick={handleSelect}>
+      {item.icon && <Icon icon={item.icon} />}
       <span className='grow truncate'>{toLocalizedString(item.label, t)}</span>
     </li>
   );

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/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

@@ -32,16 +32,16 @@ export const EditorPreviewProvider = ({ children, onLookup }: EditorPreviewProvi
 
   const handleActivate = useCallback(
     (event: DxAnchorActivate) => {
-      const { refId, label, trigger: dxTrigger } = event;
+      const { dxn, label, trigger } = event;
       setValue((value) => ({
         ...value,
-        link: { label, ref: refId },
+        link: { label, dxn },
         pending: true,
       }));
 
-      triggerRef.current = dxTrigger;
+      triggerRef.current = trigger;
       queueMicrotask(() => setOpen(true));
-      void onLookup?.({ label, ref: refId }).then((target) =>
+      void onLookup?.({ label, dxn }).then((target) =>
         setValue((value) => ({
           ...value,
           target: target ?? undefined,
@@ -68,9 +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>} />
-
-        {/* Content */}
-        <div ref={setRoot} role='none' className='contents'>
+        <div role='none' className='contents' ref={setRoot}>
           {children}
         </div>
       </Popover.Root>

package/src/components/EditorToolbar/EditorToolbar.tsx

@@ -8,24 +8,17 @@ 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 ActionGraphProps, Menu, type MenuAction, MenuBuilder, useMenuActions } from '@dxos/react-ui-menu';
 import { type EditorViewMode } from '@dxos/ui-editor';
 
-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 { 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 './useEditorToolbar';
-import { createViewMode } from './view-mode';
+import { addViewMode } from './view-mode';
 
 export type EditorToolbarFeatureFlags = Partial<{
   showHeadings: boolean;
@@ -55,15 +48,14 @@ export type EditorToolbarProps = ThemedClassName<
   } & (EditorToolbarActionGraphProps & EditorToolbarFeatureFlags)
 >;
 
-// TODO(burdon): Remove role dependency.
 export const EditorToolbar = memo(({ classNames, role, attendableId, onAction, ...props }: EditorToolbarProps) => {
-  const menuProps = useEditorToolbarActionGraph(props);
+  const menuActions = useEditorToolbarActionGraph(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>
   );
 });
@@ -74,6 +66,7 @@ type ToolbarActionsProps = Pick<EditorToolbarActionGraphProps, 'state' | 'getVie
 // 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.
+// TODO(burdon): Some actions should toggle the state (e.g., toggle bullets on/off depending on the current state).
 const useEditorToolbarActionGraph = ({ state, getView, customActions, ...features }: ToolbarActionsProps) => {
   const menuCreator = useMemo(
     () => createToolbarActions({ state, getView, customActions, ...features }),
@@ -101,48 +94,18 @@ const createToolbarActions = ({
   ...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();
   });
 };