@dxos/react-ui-editor 0.8.4-main.7ace549 → 0.8.4-main.8360d9e660

package/src/components/EditorPreviewProvider/EditorPreviewProvider.tsx

@@ -7,8 +7,7 @@ import React, { type PropsWithChildren, type RefObject, useCallback, useEffect,
 
 import { addEventListener } from '@dxos/async';
 import { DX_ANCHOR_ACTIVATE, type DxAnchorActivate, Popover } from '@dxos/react-ui';
-
-import { type PreviewLinkRef, type PreviewLinkTarget } from '../../extensions';
+import { type PreviewLinkRef, type PreviewLinkTarget } from '@dxos/ui-editor';
 
 type EditorPreviewPopoverValue = Partial<{
   link: PreviewLinkRef;
@@ -33,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,
@@ -69,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

@@ -6,18 +6,10 @@ import { type EditorView } from '@codemirror/view';
 import { Atom } from '@effect-atom/atom-react';
 import React, { memo, useMemo } from 'react';
 
-import { atomFromSignal } from '@dxos/app-graph';
-import { type Live } from '@dxos/live-object';
+import { type Node } from '@dxos/app-graph';
 import { ElevationProvider, type ThemedClassName } from '@dxos/react-ui';
-import {
-  type ActionGraphProps,
-  MenuProvider,
-  ToolbarMenu,
-  createGapSeparator,
-  useMenuActions,
-} from '@dxos/react-ui-menu';
-
-import { type EditorViewMode } from '../../types';
+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';
@@ -41,7 +33,7 @@ export type EditorToolbarFeatureFlags = Partial<{
 }>;
 
 export type EditorToolbarActionGraphProps = {
-  state: Live<EditorToolbarState>;
+  state: Atom.Atom<EditorToolbarState>;
   getView: () => EditorView;
   // TODO(wittjosiah): Control positioning.
   customActions?: Atom.Atom<ActionGraphProps>;
@@ -51,18 +43,19 @@ export type EditorToolbarProps = ThemedClassName<
   {
     role?: string;
     attendableId?: string;
+    /** Handler for executing actions. Required when customActions use Operation.invoke. */
+    onAction?: (action: MenuAction, params: Node.InvokeProps) => void;
   } & (EditorToolbarActionGraphProps & EditorToolbarFeatureFlags)
 >;
 
-// TODO(burdon): Remove role dependency.
-export const EditorToolbar = memo(({ classNames, role, attendableId, ...props }: EditorToolbarProps) => {
+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}>
-        <ToolbarMenu classNames={classNames} textBlockWidth />
-      </MenuProvider>
+      <Menu.Root {...menuProps} attendableId={attendableId} onAction={onAction}>
+        <Menu.Toolbar classNames={classNames} />
+      </Menu.Root>
     </ElevationProvider>
   );
 });
@@ -73,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 }),
@@ -100,45 +94,39 @@ const createToolbarActions = ({
   ...features
 }: ToolbarActionsProps): Atom.Atom<ActionGraphProps> => {
   return Atom.make((get) => {
-    const graph: ActionGraphProps = {
-      nodes: [],
-      edges: [],
-    };
+    // Subscribe to state changes.
+    const stateSnapshot = get(state);
 
-    // TODO(burdon): Builder pattern?
-    const addSubGraph = (graph: ActionGraphProps, subGraph: ActionGraphProps) => {
-      graph.nodes.push(...subGraph.nodes);
-      graph.edges.push(...subGraph.edges);
-    };
+    const builder = MenuBuilder.make();
 
     if (features?.showHeadings ?? true) {
-      addSubGraph(graph, get(atomFromSignal(() => createHeadings(state, getView))));
+      builder.subgraph(createHeadings(stateSnapshot, getView));
     }
     if (features?.showFormatting ?? true) {
-      addSubGraph(graph, get(atomFromSignal(() => createFormatting(state, getView))));
+      builder.subgraph(createFormatting(stateSnapshot, getView));
     }
     if (features?.showLists ?? true) {
-      addSubGraph(graph, get(atomFromSignal(() => createLists(state, getView))));
+      builder.subgraph(createLists(stateSnapshot, getView));
     }
     if (features?.showBlocks ?? true) {
-      addSubGraph(graph, get(atomFromSignal(() => createBlocks(state, getView))));
+      builder.subgraph(createBlocks(stateSnapshot, getView));
     }
     if (features?.onImageUpload) {
-      addSubGraph(graph, get(atomFromSignal(() => 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, get(atomFromSignal(() => createSearch(getView))));
+      builder.subgraph(createSearch(getView));
     }
     if (features?.onViewModeChange) {
-      addSubGraph(graph, get(atomFromSignal(() => createViewMode(state, features.onViewModeChange!))));
+      builder.subgraph(createViewMode(stateSnapshot, features.onViewModeChange!));
     }
 
-    return graph;
+    return builder.build();
   });
 };

package/src/components/EditorToolbar/actions.ts

@@ -4,15 +4,16 @@
 
 import { type EditorView } from '@codemirror/view';
 
-import { type Action, type NodeArg } from '@dxos/app-graph';
+import { type Node } from '@dxos/app-graph';
 import {
-  type MenuActionProperties,
+  type MenuItemGroup,
   type ToolbarMenuActionGroupProperties,
   createMenuAction,
   createMenuItemGroup,
 } from '@dxos/react-ui-menu';
+import { List, addList, removeList } from '@dxos/ui-editor';
+import { type MenuActionProperties } from '@dxos/ui-types';
 
-import { List, addList, removeList } from '../../extensions';
 import { translationKey } from '../../translations';
 
 import { type EditorToolbarState } from './useEditorToolbar';
@@ -28,10 +29,10 @@ export const createLists = (state: EditorToolbarState, getView: () => EditorView
   const listGroupAction = createListGroupAction(value);
   const listActionsMap = createListActions(value, getView);
   return {
-    nodes: [listGroupAction as NodeArg<any>, ...listActionsMap],
+    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' })),
     ],
   };
 };
@@ -42,14 +43,14 @@ export const createEditorAction = (id: string, props: Partial<MenuActionProperti
   return createMenuAction(id, invoke, {
     label,
     ...rest,
-  }) as Action<MenuActionProperties>;
+  }) as Node.Action<MenuActionProperties>;
 };
 
 export const createEditorActionGroup = (
   id: string,
   props: Omit<ToolbarMenuActionGroupProperties, 'icon'>,
   icon?: string,
-) => {
+): MenuItemGroup<ToolbarMenuActionGroupProperties> => {
   const { label = [`${id} label`, { ns: translationKey }], ...rest } = props;
 
   return createMenuItemGroup(id, {
@@ -57,7 +58,7 @@ export const createEditorActionGroup = (
     icon,
     iconOnly: true,
     ...rest,
-  });
+  }) as MenuItemGroup<ToolbarMenuActionGroupProperties>;
 };
 
 const createListGroupAction = (value: string) =>

package/src/components/EditorToolbar/blocks.ts

@@ -4,10 +4,9 @@
 
 import { type EditorView } from '@codemirror/view';
 
-import { type NodeArg } from '@dxos/app-graph';
+import { type Node } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
-
-import { addBlockquote, addCodeblock, insertTable, removeBlockquote, removeCodeblock } from '../../extensions';
+import { addBlockquote, addCodeblock, insertTable, removeBlockquote, removeCodeblock } from '@dxos/ui-editor';
 
 import { createEditorAction, createEditorActionGroup } from './actions';
 import { type EditorToolbarState } from './useEditorToolbar';
@@ -51,10 +50,10 @@ export const createBlocks = (state: EditorToolbarState, getView: () => EditorVie
   const blockGroupAction = createBlockGroupAction(value);
   const blockActions = createBlockActions(value, getView, state.blankLine);
   return {
-    nodes: [blockGroupAction as NodeArg<any>, ...blockActions],
+    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

@@ -4,10 +4,9 @@
 
 import { type EditorView } from '@codemirror/view';
 
-import { type NodeArg } from '@dxos/app-graph';
+import { type Node } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
-
-import { type Formatting, Inline, addLink, removeLink, setStyle } from '../../extensions';
+import { type Formatting, Inline, addLink, removeLink, setStyle } from '@dxos/ui-editor';
 
 import { createEditorAction, createEditorActionGroup } from './actions';
 import { type EditorToolbarState } from './useEditorToolbar';
@@ -57,10 +56,10 @@ export const createFormatting = (state: EditorToolbarState, getView: () => Edito
   const formattingGroupAction = createFormattingGroup(state);
   const formattingActions = createFormattingActions(state, getView);
   return {
-    nodes: [formattingGroupAction as NodeArg<any>, ...formattingActions],
+    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

@@ -4,10 +4,10 @@
 
 import { type EditorView } from '@codemirror/view';
 
-import { type NodeArg } from '@dxos/app-graph';
+import { type Node } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { setHeading } from '@dxos/ui-editor';
 
-import { setHeading } from '../../extensions';
 import { translationKey } from '../../translations';
 
 import { createEditorAction, createEditorActionGroup } from './actions';
@@ -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(
@@ -59,10 +59,10 @@ export const createHeadings = (state: EditorToolbarState, getView: () => EditorV
   const headingGroupAction = createHeadingGroupAction(headingValue);
   const headingActions = createHeadingActions(headingValue, getView);
   return {
-    nodes: [headingGroupAction as NodeArg<any>, ...headingActions],
+    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

@@ -2,6 +2,8 @@
 // Copyright 2025 DXOS.org
 //
 
+import { type Node } from '@dxos/app-graph';
+
 import { createEditorAction } from './actions';
 
 const createImageUploadAction = (onImageUpload: () => void) =>
@@ -14,7 +16,12 @@ const createImageUploadAction = (onImageUpload: () => void) =>
     onImageUpload,
   );
 
-export const createImageUpload = (onImageUpload: () => void) => ({
+export const createImageUpload = (
+  onImageUpload: () => void,
+): {
+  nodes: Node.NodeArg<any>[];
+  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/index.ts

@@ -4,5 +4,5 @@
 
 export * from './EditorToolbar';
 
-export { type EditorToolbarState, useEditorToolbar } from './useEditorToolbar';
 export { createEditorAction, createEditorActionGroup } from './actions';
+export { type EditorToolbarState, useEditorToolbar } from './useEditorToolbar';

package/src/components/EditorToolbar/search.ts

@@ -5,6 +5,8 @@
 import { openSearchPanel } from '@codemirror/search';
 import { type EditorView } from '@codemirror/view';
 
+import { type Node } from '@dxos/app-graph';
+
 import { createEditorAction } from './actions';
 
 const createSearchAction = (getView: () => EditorView) =>
@@ -17,7 +19,12 @@ const createSearchAction = (getView: () => EditorView) =>
     () => openSearchPanel(getView()),
   );
 
-export const createSearch = (getView: () => EditorView) => ({
+export const createSearch = (
+  getView: () => EditorView,
+): {
+  nodes: Node.NodeArg<any>[];
+  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/useEditorToolbar.ts

@@ -2,19 +2,19 @@
 // Copyright 2025 DXOS.org
 //
 
+import { Atom } from '@effect-atom/atom-react';
 import { useMemo } from 'react';
 
-import { type Live, live } from '@dxos/live-object';
-
-import { type Formatting } from '../../extensions';
-import { type EditorViewMode } from '../../types';
+import { type EditorViewMode, type Formatting } from '@dxos/ui-editor';
 
 // TODO(burdon): Move to extensions.
 export type EditorToolbarState = { viewMode?: EditorViewMode } & Formatting;
 
 /**
+ * Creates an atom for editor toolbar state.
  * @deprecated Use Editor.Root
  */
-export const useEditorToolbar = (initialState: Partial<EditorToolbarState> = {}): Live<EditorToolbarState> => {
-  return useMemo(() => live<EditorToolbarState>(initialState), []);
+export const useEditorToolbar = (initialState: EditorToolbarState = {}): Atom.Writable<EditorToolbarState> => {
+  // TODO(wittjosiah): Including initialState in the deps causes reactivity issues.
+  return useMemo(() => Atom.make<EditorToolbarState>(initialState), []);
 };

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

@@ -2,11 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type NodeArg } from '@dxos/app-graph';
+import { type Node } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { type EditorViewMode } from '@dxos/ui-editor';
 
 import { translationKey } from '../../translations';
-import { type EditorViewMode } from '../../types';
 
 import { createEditorAction, createEditorActionGroup } from './actions';
 import { type EditorToolbarState } from './useEditorToolbar';
@@ -46,10 +46,10 @@ export const createViewMode = (state: EditorToolbarState, onViewModeChange: (mod
   const viewModeGroupAction = createViewModeGroupAction(value);
   const viewModeActions = createViewModeActions(value, onViewModeChange);
   return {
-    nodes: [viewModeGroupAction as NodeArg<any>, ...viewModeActions],
+    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' })),
     ],
   };
 };

package/src/components/index.ts

@@ -4,8 +4,6 @@
 
 export * from './Editor';
 
-// export { type GetMenuContext } from './EditorMenuProvider';
-
 // TODO(burdon): Remove once Editor is fully migrated.
 export { EditorContent, createEditorController } from './EditorContent';
 export * from './EditorMenuProvider';

package/src/hooks/useTextEditor.ts

@@ -17,11 +17,15 @@ import {
 } from 'react';
 
 import { log } from '@dxos/log';
+import {
+  type EditorSelection,
+  createEditorStateTransaction,
+  debugDispatcher,
+  documentId,
+  modalStateField,
+} from '@dxos/ui-editor';
 import { type MaybeProvider, getProviderValue, isTruthy } from '@dxos/util';
 
-import { type EditorSelection, createEditorStateTransaction, documentId, modalStateField } from '../extensions';
-import { debugDispatcher } from '../util';
-
 let instanceCount = 0;
 
 export type CursorInfo = {
@@ -156,7 +160,9 @@ export const useTextEditor = (
           element?.focus();
           break;
         }
+
         case 'Enter': {
+          event.preventDefault();
           if (target === currentTarget) {
             view?.focus();
           }

package/src/index.ts

@@ -4,17 +4,7 @@
 
 import { translations } from './translations';
 
-export { type Extension, EditorState } from '@codemirror/state';
-export { EditorView, keymap } from '@codemirror/view';
-export { tags } from '@lezer/highlight';
-
-export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
-
 export * from './components';
-export * from './defaults';
-export * from './extensions';
 export * from './hooks';
-export * from './types';
-export * from './util';
 
 export { translations };