@dxos/react-ui-editor 0.8.4-main.69d29f4 → 0.8.4-main.6fa680abb7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.8.4-main.69d29f4",
+  "version": "0.8.4-main.6fa680abb7",
   "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.69d29f4",
-    "@dxos/async": "0.8.4-main.69d29f4",
-    "@dxos/debug": "0.8.4-main.69d29f4",
-    "@dxos/client": "0.8.4-main.69d29f4",
-    "@dxos/context": "0.8.4-main.69d29f4",
-    "@dxos/display-name": "0.8.4-main.69d29f4",
-    "@dxos/echo-db": "0.8.4-main.69d29f4",
-    "@dxos/invariant": "0.8.4-main.69d29f4",
-    "@dxos/echo": "0.8.4-main.69d29f4",
-    "@dxos/lit-ui": "0.8.4-main.69d29f4",
-    "@dxos/protocols": "0.8.4-main.69d29f4",
-    "@dxos/log": "0.8.4-main.69d29f4",
-    "@dxos/react-hooks": "0.8.4-main.69d29f4",
-    "@dxos/react-ui-menu": "0.8.4-main.69d29f4",
-    "@dxos/react-ui-mosaic": "0.8.4-main.69d29f4",
-    "@dxos/ui": "0.8.4-main.69d29f4",
-    "@dxos/ui-editor": "0.8.4-main.69d29f4",
-    "@dxos/util": "0.8.4-main.69d29f4",
-    "@dxos/ui-theme": "0.8.4-main.69d29f4"
+    "@dxos/client": "0.8.4-main.6fa680abb7",
+    "@dxos/async": "0.8.4-main.6fa680abb7",
+    "@dxos/context": "0.8.4-main.6fa680abb7",
+    "@dxos/debug": "0.8.4-main.6fa680abb7",
+    "@dxos/echo": "0.8.4-main.6fa680abb7",
+    "@dxos/echo-db": "0.8.4-main.6fa680abb7",
+    "@dxos/display-name": "0.8.4-main.6fa680abb7",
+    "@dxos/invariant": "0.8.4-main.6fa680abb7",
+    "@dxos/app-graph": "0.8.4-main.6fa680abb7",
+    "@dxos/lit-ui": "0.8.4-main.6fa680abb7",
+    "@dxos/log": "0.8.4-main.6fa680abb7",
+    "@dxos/protocols": "0.8.4-main.6fa680abb7",
+    "@dxos/react-hooks": "0.8.4-main.6fa680abb7",
+    "@dxos/react-ui-mosaic": "0.8.4-main.6fa680abb7",
+    "@dxos/ui": "0.8.4-main.6fa680abb7",
+    "@dxos/ui-editor": "0.8.4-main.6fa680abb7",
+    "@dxos/ui-theme": "0.8.4-main.6fa680abb7",
+    "@dxos/react-ui-menu": "0.8.4-main.6fa680abb7",
+    "@dxos/util": "0.8.4-main.6fa680abb7"
   },
   "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.19.16",
+    "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/echo-atom": "0.8.4-main.69d29f4",
-    "@dxos/echo": "0.8.4-main.69d29f4",
-    "@dxos/keyboard": "0.8.4-main.69d29f4",
-    "@dxos/config": "0.8.4-main.69d29f4",
-    "@dxos/random": "0.8.4-main.69d29f4",
-    "@dxos/react-client": "0.8.4-main.69d29f4",
-    "@dxos/react-ui": "0.8.4-main.69d29f4",
-    "@dxos/react-ui-attention": "0.8.4-main.69d29f4",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.69d29f4",
-    "@dxos/schema": "0.8.4-main.69d29f4",
-    "@dxos/storybook-utils": "0.8.4-main.69d29f4",
-    "@dxos/ui-theme": "0.8.4-main.69d29f4",
-    "@dxos/ui-types": "0.8.4-main.69d29f4"
+    "@dxos/config": "0.8.4-main.6fa680abb7",
+    "@dxos/echo-atom": "0.8.4-main.6fa680abb7",
+    "@dxos/echo": "0.8.4-main.6fa680abb7",
+    "@dxos/keyboard": "0.8.4-main.6fa680abb7",
+    "@dxos/random": "0.8.4-main.6fa680abb7",
+    "@dxos/react-client": "0.8.4-main.6fa680abb7",
+    "@dxos/react-ui": "0.8.4-main.6fa680abb7",
+    "@dxos/react-ui-attention": "0.8.4-main.6fa680abb7",
+    "@dxos/storybook-utils": "0.8.4-main.6fa680abb7",
+    "@dxos/schema": "0.8.4-main.6fa680abb7",
+    "@dxos/ui-theme": "0.8.4-main.6fa680abb7",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.6fa680abb7",
+    "@dxos/ui-types": "0.8.4-main.6fa680abb7"
   },
   "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.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.69d29f4",
-    "@dxos/ui-theme": "0.8.4-main.69d29f4",
-    "@dxos/react-client": "0.8.4-main.69d29f4"
+    "@dxos/react-ui": "0.8.4-main.6fa680abb7",
+    "@dxos/ui-theme": "0.8.4-main.6fa680abb7",
+    "@dxos/react-client": "0.8.4-main.6fa680abb7"
   },
   "publishConfig": {
     "access": "public"

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

@@ -53,7 +53,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

@@ -84,6 +84,8 @@ EditorRoot.displayName = 'Editor.Root';
 // Viewport
 //
 
+const EDITOR_VIEWPORT_NAME = 'Editor.Viewport';
+
 type EditorViewportProps = ThemedClassName<PropsWithChildren<{}>>;
 
 /**
@@ -91,18 +93,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 +114,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 +124,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 +139,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,7 +150,7 @@ const EditorToolbar = (props: EditorToolbarProps) => {
   return <NaturalEditorToolbar {...props} getView={getView} state={state} />;
 };
 
-EditorToolbar.displayName = 'Editor.Toolbar';
+EditorToolbar.displayName = EDITOR_TOOLBAR_NAME;
 
 //
 // Editor

package/src/components/EditorContent/EditorContent.tsx

@@ -72,7 +72,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,
@@ -78,10 +79,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 +114,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 +161,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 +184,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,11 +220,7 @@ 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}
-    >
+    <li ref={listRef} className={tx('menu.item', {}, [current && 'bg-hover-surface'])} onClick={handleSelect}>
       {item.icon && <Icon icon={item.icon} size={5} />}
       <span className='grow truncate'>{toLocalizedString(item.label, t)}</span>
     </li>

package/src/components/EditorMenuProvider/useEditorMenu.ts

@@ -108,7 +108,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,14 +8,7 @@ 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';
@@ -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);
 
   return (
     <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
-      <MenuProvider {...menuProps} attendableId={attendableId} onAction={onAction}>
-        <ToolbarMenu classNames={classNames} textBlockWidth />
-      </MenuProvider>
+      <Menu.Root {...menuProps} attendableId={attendableId} onAction={onAction}>
+        <Menu.Toolbar classNames={classNames} textBlockWidth />
+      </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,39 @@ 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);
 
+    const builder = MenuBuilder.make();
+
     if (features?.showHeadings ?? true) {
-      addSubGraph(graph, createHeadings(stateSnapshot, getView));
+      builder.subgraph(createHeadings(stateSnapshot, getView));
     }
     if (features?.showFormatting ?? true) {
-      addSubGraph(graph, createFormatting(stateSnapshot, getView));
+      builder.subgraph(createFormatting(stateSnapshot, getView));
     }
     if (features?.showLists ?? true) {
-      addSubGraph(graph, createLists(stateSnapshot, getView));
+      builder.subgraph(createLists(stateSnapshot, getView));
     }
     if (features?.showBlocks ?? true) {
-      addSubGraph(graph, createBlocks(stateSnapshot, getView));
+      builder.subgraph(createBlocks(stateSnapshot, getView));
     }
     if (features?.onImageUpload) {
-      addSubGraph(graph, createImageUpload(features.onImageUpload!));
+      builder.subgraph(createImageUpload(features.onImageUpload!));
     }
 
-    addSubGraph(graph, createGapSeparator());
+    builder.separator('gap');
 
     if (customActions) {
-      addSubGraph(graph, get(customActions));
+      builder.subgraph(get(customActions));
     }
     if (features?.showSearch ?? true) {
-      addSubGraph(graph, createSearch(getView));
+      builder.subgraph(createSearch(getView));
     }
     if (features?.onViewModeChange) {
-      addSubGraph(graph, createViewMode(stateSnapshot, features.onViewModeChange!));
+      builder.subgraph(createViewMode(stateSnapshot, features.onViewModeChange!));
     }
 
-    return graph;
+    return builder.build();
   });
 };

package/src/components/EditorToolbar/actions.ts

@@ -31,8 +31,8 @@ export const createLists = (state: EditorToolbarState, getView: () => EditorView
   return {
     nodes: [listGroupAction as Node.NodeArg<any>, ...listActionsMap],
     edges: [
-      { source: 'root', target: 'list' },
-      ...listActionsMap.map(({ id }) => ({ source: listGroupAction.id, target: id })),
+      { source: 'root', target: 'list', relation: 'child' },
+      ...listActionsMap.map(({ id }) => ({ source: listGroupAction.id, target: id, relation: 'child' })),
     ],
   };
 };

package/src/components/EditorToolbar/blocks.ts

@@ -52,8 +52,8 @@ export const createBlocks = (state: EditorToolbarState, getView: () => EditorVie
   return {
     nodes: [blockGroupAction as Node.NodeArg<any>, ...blockActions],
     edges: [
-      { source: 'root', target: 'block' },
-      ...blockActions.map(({ id }) => ({ source: blockGroupAction.id, target: id })),
+      { source: 'root', target: 'block', relation: 'child' },
+      ...blockActions.map(({ id }) => ({ source: blockGroupAction.id, target: id, relation: 'child' })),
     ],
   };
 };

package/src/components/EditorToolbar/formatting.ts

@@ -58,8 +58,8 @@ export const createFormatting = (state: EditorToolbarState, getView: () => Edito
   return {
     nodes: [formattingGroupAction as Node.NodeArg<any>, ...formattingActions],
     edges: [
-      { source: 'root', target: 'formatting' },
-      ...formattingActions.map(({ id }) => ({ source: formattingGroupAction.id, target: id })),
+      { source: 'root', target: 'formatting', relation: 'child' },
+      ...formattingActions.map(({ id }) => ({ source: formattingGroupAction.id, target: id, relation: 'child' })),
     ],
   };
 };

package/src/components/EditorToolbar/headings.ts

@@ -28,13 +28,13 @@ const createHeadingGroupAction = (value: string) =>
 
 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',
+    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(
@@ -61,8 +61,8 @@ export const createHeadings = (state: EditorToolbarState, getView: () => EditorV
   return {
     nodes: [headingGroupAction as Node.NodeArg<any>, ...headingActions],
     edges: [
-      { source: 'root', target: 'heading' },
-      ...headingActions.map(({ id }) => ({ source: headingGroupAction.id, target: id })),
+      { source: 'root', target: 'heading', relation: 'child' },
+      ...headingActions.map(({ id }) => ({ source: headingGroupAction.id, target: id, relation: 'child' })),
     ],
   };
 };

package/src/components/EditorToolbar/image.ts

@@ -20,8 +20,8 @@ export const createImageUpload = (
   onImageUpload: () => void,
 ): {
   nodes: Node.NodeArg<any>[];
-  edges: Array<{ source: string; target: string }>;
+  edges: Array<{ source: string; target: string; relation: 'child' }>;
 } => ({
   nodes: [createImageUploadAction(onImageUpload)],
-  edges: [{ source: 'root', target: 'image' }],
+  edges: [{ source: 'root', target: 'image', relation: 'child' }],
 });

package/src/components/EditorToolbar/search.ts

@@ -23,8 +23,8 @@ export const createSearch = (
   getView: () => EditorView,
 ): {
   nodes: Node.NodeArg<any>[];
-  edges: Array<{ source: string; target: string }>;
+  edges: Array<{ source: string; target: string; relation: 'child' }>;
 } => ({
   nodes: [createSearchAction(getView)],
-  edges: [{ source: 'root', target: 'search' }],
+  edges: [{ source: 'root', target: 'search', relation: 'child' }],
 });

package/src/components/EditorToolbar/view-mode.ts

@@ -48,8 +48,8 @@ export const createViewMode = (state: EditorToolbarState, onViewModeChange: (mod
   return {
     nodes: [viewModeGroupAction as Node.NodeArg<any>, ...viewModeActions],
     edges: [
-      { source: 'root', target: 'viewMode' },
-      ...viewModeActions.map(({ id }) => ({ source: viewModeGroupAction.id, target: id })),
+      { source: 'root', target: 'viewMode', relation: 'child' },
+      ...viewModeActions.map(({ id }) => ({ source: viewModeGroupAction.id, target: id, relation: 'child' })),
     ],
   };
 };