@dxos/react-ui-editor 0.8.3 → 0.8.4-main.1068cf700f

package/src/components/EditorToolbar/EditorToolbar.tsx

@@ -2,123 +2,146 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
+import { type EditorView } from '@codemirror/view';
+import { Atom } from '@effect-atom/atom-react';
 import React, { memo, useMemo } from 'react';
 
-import { rxFromSignal, type NodeArg } from '@dxos/app-graph';
-import { ElevationProvider } from '@dxos/react-ui';
-import { MenuProvider, ToolbarMenu, createGapSeparator, useMenuActions } from '@dxos/react-ui-menu';
+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 { createLists } from './actions';
 import { createBlocks } from './blocks';
 import { createFormatting } from './formatting';
 import { createHeadings } from './headings';
 import { createImageUpload } from './image';
-import { createLists } from './lists';
 import { createSearch } from './search';
-import { type EditorToolbarActionGraphProps, type EditorToolbarFeatureFlags, type EditorToolbarProps } from './util';
+import { type EditorToolbarState } from './useEditorToolbar';
 import { createViewMode } from './view-mode';
 
-const createToolbar = ({
-  getView,
+export type EditorToolbarFeatureFlags = Partial<{
+  showHeadings: boolean;
+  showFormatting: boolean;
+  showLists: boolean;
+  showBlocks: boolean;
+  showSearch: boolean;
+
+  // TODO(wittjosiah): Factor out (depends on plugin-level capabilities.)
+  onImageUpload: () => void;
+  onViewModeChange: (mode: EditorViewMode) => void;
+}>;
+
+export type EditorToolbarActionGraphProps = {
+  state: Atom.Atom<EditorToolbarState>;
+  getView: () => EditorView;
+  // TODO(wittjosiah): Control positioning.
+  customActions?: Atom.Atom<ActionGraphProps>;
+};
+
+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)
+>;
+
+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>
+    </ElevationProvider>
+  );
+});
+
+type ToolbarActionsProps = Pick<EditorToolbarActionGraphProps, 'state' | 'getView' | 'customActions'> &
+  EditorToolbarFeatureFlags;
+
+// 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 menuCreator = useMemo(
+    () => createToolbarActions({ state, getView, customActions, ...features }),
+    [
+      state,
+      getView,
+      customActions,
+      features?.showHeadings,
+      features?.showFormatting,
+      features?.showLists,
+      features?.showBlocks,
+      features?.showSearch,
+      features?.onImageUpload,
+      features?.onViewModeChange,
+    ],
+  );
+
+  return useMenuActions(menuCreator);
+};
+
+const createToolbarActions = ({
   state,
+  getView,
   customActions,
   ...features
-}: EditorToolbarFeatureFlags & Pick<EditorToolbarActionGraphProps, 'getView' | 'state' | 'customActions'>): Rx.Rx<{
-  nodes: NodeArg<any>[];
-  edges: { source: string; target: string }[];
-}> => {
-  return Rx.make((get) => {
-    const nodes = [];
-    const edges = [];
-    if (features.headings ?? true) {
-      const headings = get(rxFromSignal(() => createHeadings(state, getView)));
-      nodes.push(...headings.nodes);
-      edges.push(...headings.edges);
+}: 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.formatting ?? true) {
-      const formatting = get(rxFromSignal(() => createFormatting(state, getView)));
-      nodes.push(...formatting.nodes);
-      edges.push(...formatting.edges);
+    if (features?.showFormatting ?? true) {
+      addSubGraph(graph, createFormatting(stateSnapshot, getView));
     }
-    if (features.lists ?? true) {
-      const lists = get(rxFromSignal(() => createLists(state, getView)));
-      nodes.push(...lists.nodes);
-      edges.push(...lists.edges);
+    if (features?.showLists ?? true) {
+      addSubGraph(graph, createLists(stateSnapshot, getView));
     }
-    if (features.blocks ?? true) {
-      const blocks = get(rxFromSignal(() => createBlocks(state, getView)));
-      nodes.push(...blocks.nodes);
-      edges.push(...blocks.edges);
+    if (features?.showBlocks ?? true) {
+      addSubGraph(graph, createBlocks(stateSnapshot, getView));
     }
-    if (features.image) {
-      const image = get(rxFromSignal(() => createImageUpload(features.image!)));
-      nodes.push(...image.nodes);
-      edges.push(...image.edges);
+    if (features?.onImageUpload) {
+      addSubGraph(graph, createImageUpload(features.onImageUpload!));
     }
-    const editorToolbarGap = createGapSeparator();
-    nodes.push(...editorToolbarGap.nodes);
-    edges.push(...editorToolbarGap.edges);
+
+    addSubGraph(graph, createGapSeparator());
+
     if (customActions) {
-      const custom = get(customActions);
-      nodes.push(...custom.nodes);
-      edges.push(...custom.edges);
+      addSubGraph(graph, get(customActions));
     }
-    if (features.search ?? true) {
-      const search = get(rxFromSignal(() => createSearch(getView)));
-      nodes.push(...search.nodes);
-      edges.push(...search.edges);
+    if (features?.showSearch ?? true) {
+      addSubGraph(graph, createSearch(getView));
     }
-    if (features.viewMode) {
-      const viewMode = get(rxFromSignal(() => createViewMode(state, features.viewMode!)));
-      nodes.push(...viewMode.nodes);
-      edges.push(...viewMode.edges);
+    if (features?.onViewModeChange) {
+      addSubGraph(graph, createViewMode(stateSnapshot, features.onViewModeChange!));
     }
-    return { nodes, edges };
-  });
-};
 
-// 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 = (props: EditorToolbarProps) => {
-  const menuCreator = useMemo(
-    () =>
-      createToolbar({
-        getView: props.getView,
-        state: props.state,
-        customActions: props.customActions,
-        headings: props.headings,
-        formatting: props.formatting,
-        lists: props.lists,
-        blocks: props.blocks,
-        image: props.image,
-        search: props.search,
-        viewMode: props.viewMode,
-      }),
-    [
-      props.getView,
-      props.state,
-      props.customActions,
-      props.headings,
-      props.formatting,
-      props.lists,
-      props.blocks,
-      props.image,
-      props.search,
-      props.viewMode,
-    ],
-  );
-
-  return useMenuActions(menuCreator);
+    return graph;
+  });
 };
-
-export const EditorToolbar = memo(({ classNames, attendableId, role, ...props }: EditorToolbarProps) => {
-  const menuProps = useEditorToolbarActionGraph(props);
-  return (
-    <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
-      <MenuProvider {...menuProps} attendableId={attendableId}>
-        <ToolbarMenu classNames={classNames} textBlockWidth />
-      </MenuProvider>
-    </ElevationProvider>
-  );
-});

package/src/components/EditorToolbar/actions.ts

@@ -0,0 +1,87 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+
+import { type Node } from '@dxos/app-graph';
+import {
+  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 { translationKey } from '../../translations';
+
+import { type EditorToolbarState } from './useEditorToolbar';
+
+const listStyles = {
+  bullet: 'ph--list-bullets--regular',
+  ordered: 'ph--list-numbers--regular',
+  task: 'ph--list-checks--regular',
+};
+
+export const createLists = (state: EditorToolbarState, getView: () => EditorView) => {
+  const value = state.listStyle ?? '';
+  const listGroupAction = createListGroupAction(value);
+  const listActionsMap = createListActions(value, getView);
+  return {
+    nodes: [listGroupAction as Node.NodeArg<any>, ...listActionsMap],
+    edges: [
+      { source: 'root', target: 'list' },
+      ...listActionsMap.map(({ id }) => ({ source: listGroupAction.id, target: id })),
+    ],
+  };
+};
+
+export const createEditorAction = (id: string, props: Partial<MenuActionProperties>, invoke: () => void) => {
+  const { label = [`${id} label`, { ns: translationKey }], ...rest } = props;
+
+  return createMenuAction(id, invoke, {
+    label,
+    ...rest,
+  }) 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, {
+    label,
+    icon,
+    iconOnly: true,
+    ...rest,
+  }) as MenuItemGroup<ToolbarMenuActionGroupProperties>;
+};
+
+const createListGroupAction = (value: string) =>
+  createEditorActionGroup('list', {
+    variant: 'toggleGroup',
+    selectCardinality: 'single',
+    value,
+  } as ToolbarMenuActionGroupProperties);
+
+const createListActions = (value: string, getView: () => EditorView) =>
+  Object.entries(listStyles).map(([listStyle, icon]) => {
+    const checked = value === listStyle;
+    return createEditorAction(`list-${listStyle}`, { 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);
+      }
+    });
+  });

package/src/components/EditorToolbar/blocks.ts

@@ -4,11 +4,12 @@
 
 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 '@dxos/ui-editor';
 
-import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
-import { removeBlockquote, addBlockquote, removeCodeblock, addCodeblock, insertTable } from '../../extensions';
+import { createEditorAction, createEditorActionGroup } from './actions';
+import { type EditorToolbarState } from './useEditorToolbar';
 
 const createBlockGroupAction = (value: string) =>
   createEditorActionGroup('block', {
@@ -24,36 +25,32 @@ const createBlockActions = (value: string, getView: () => EditorView, blankLine?
     table: 'ph--table--regular',
   }).map(([type, icon]) => {
     const checked = type === value;
-    return createEditorAction(
-      type,
-      () => {
-        const view = getView();
-        if (!view) {
-          return;
-        }
+    return createEditorAction(type, { checked, ...(type === 'table' && { disabled: !!blankLine }), icon }, () => {
+      const view = getView();
+      if (!view) {
+        return;
+      }
 
-        switch (type) {
-          case 'blockquote':
-            checked ? removeBlockquote(view) : addBlockquote(view);
-            break;
-          case 'codeblock':
-            checked ? removeCodeblock(view) : addCodeblock(view);
-            break;
-          case 'table':
-            insertTable(view);
-            break;
-        }
-      },
-      { checked, ...(type === 'table' && { disabled: !!blankLine }), icon },
-    );
+      switch (type) {
+        case 'blockquote':
+          checked ? removeBlockquote(view) : addBlockquote(view);
+          break;
+        case 'codeblock':
+          checked ? removeCodeblock(view) : addCodeblock(view);
+          break;
+        case 'table':
+          insertTable(view);
+          break;
+      }
+    });
   });
 
 export const createBlocks = (state: EditorToolbarState, getView: () => EditorView) => {
-  const value = state?.blockQuote ? 'blockquote' : state.blockType ?? '';
+  const value = state?.blockQuote ? 'blockquote' : (state.blockType ?? '');
   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 })),

package/src/components/EditorToolbar/formatting.ts

@@ -4,11 +4,12 @@
 
 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 '@dxos/ui-editor';
 
-import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
-import { addLink, Inline, removeLink, setStyle, type Formatting } from '../../extensions';
+import { createEditorAction, createEditorActionGroup } from './actions';
+import { type EditorToolbarState } from './useEditorToolbar';
 
 const formats = {
   strong: 'ph--text-b--regular',
@@ -28,38 +29,34 @@ const createFormattingGroup = (formatting: Formatting) =>
 const createFormattingActions = (formatting: Formatting, getView: () => EditorView) =>
   Object.entries(formats).map(([type, icon]) => {
     const checked = !!formatting[type as keyof Formatting];
-    return createEditorAction(
-      type,
-      () => {
-        const view = getView();
-        if (!view) {
-          return;
-        }
+    return createEditorAction(type, { 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);
-      },
-      { checked, icon },
-    );
+      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 NodeArg<any>, ...formattingActions],
+    nodes: [formattingGroupAction as Node.NodeArg<any>, ...formattingActions],
     edges: [
       { source: 'root', target: 'formatting' },
       ...formattingActions.map(({ id }) => ({ source: formattingGroupAction.id, target: id })),

package/src/components/EditorToolbar/headings.ts

@@ -4,13 +4,15 @@
 
 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 { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
-import { setHeading } from '../../extensions';
 import { translationKey } from '../../translations';
 
+import { createEditorAction, createEditorActionGroup } from './actions';
+import { type EditorToolbarState } from './useEditorToolbar';
+
 const createHeadingGroupAction = (value: string) =>
   createEditorActionGroup(
     'heading',
@@ -18,12 +20,13 @@ const createHeadingGroupAction = (value: string) =>
       variant: 'dropdownMenu',
       applyActive: true,
       selectCardinality: 'single',
+      // TODO(wittjosiah): Remove? Not sure this does anything.
       value,
     } as ToolbarMenuActionGroupProperties,
     'ph--text-h--regular',
   );
 
-const createHeadingActions = (getView: () => EditorView) =>
+const createHeadingActions = (currentLevel: string, getView: () => EditorView) =>
   Object.entries({
     '0': 'ph--paragraph--regular',
     '1': 'ph--text-h-one--regular',
@@ -34,24 +37,29 @@ const createHeadingActions = (getView: () => EditorView) =>
     '6': 'ph--text-h-six--regular',
   }).map(([levelStr, icon]) => {
     const level = parseInt(levelStr);
-    return createEditorAction(`heading--${levelStr}`, () => setHeading(level)(getView()), {
-      label: ['heading level label', { count: level, ns: translationKey }],
-      icon,
-    });
+    return createEditorAction(
+      `heading--${levelStr}`,
+      {
+        label: ['heading level label', { count: level, ns: translationKey }],
+        icon,
+        checked: levelStr === currentLevel,
+      },
+      () => setHeading(level)(getView()),
+    );
   });
 
 const computeHeadingValue = (state: EditorToolbarState) => {
   const blockType = state ? state.blockType : 'paragraph';
-  const header = blockType && /heading(\d)/.exec(blockType);
-  return header ? header[1] : blockType === 'paragraph' || !blockType ? '0' : '';
+  const heading = blockType && /heading(\d)/.exec(blockType);
+  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(getView);
+  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 })),

package/src/components/EditorToolbar/image.ts

@@ -2,15 +2,26 @@
 // Copyright 2025 DXOS.org
 //
 
-import { createEditorAction } from './util';
+import { type Node } from '@dxos/app-graph';
+
+import { createEditorAction } from './actions';
 
 const createImageUploadAction = (onImageUpload: () => void) =>
-  createEditorAction('image', onImageUpload, {
-    testId: 'editor.toolbar.image',
-    icon: 'ph--image-square--regular',
-  });
+  createEditorAction(
+    'image',
+    {
+      testId: 'editor.toolbar.image',
+      icon: 'ph--image-square--regular',
+    },
+    onImageUpload,
+  );
 
-export const createImageUpload = (onImageUpload: () => void) => ({
+export const createImageUpload = (
+  onImageUpload: () => void,
+): {
+  nodes: Node.NodeArg<any>[];
+  edges: Array<{ source: string; target: string }>;
+} => ({
   nodes: [createImageUploadAction(onImageUpload)],
   edges: [{ source: 'root', target: 'image' }],
 });

package/src/components/EditorToolbar/index.ts

@@ -3,10 +3,6 @@
 //
 
 export * from './EditorToolbar';
-export {
-  type EditorToolbarState,
-  type EditorToolbarActionGraphProps,
-  useEditorToolbarState,
-  createEditorAction,
-  createEditorActionGroup,
-} from './util';
+
+export { createEditorAction, createEditorActionGroup } from './actions';
+export { type EditorToolbarState, useEditorToolbar } from './useEditorToolbar';

package/src/components/EditorToolbar/search.ts

@@ -5,15 +5,26 @@
 import { openSearchPanel } from '@codemirror/search';
 import { type EditorView } from '@codemirror/view';
 
-import { createEditorAction } from './util';
+import { type Node } from '@dxos/app-graph';
+
+import { createEditorAction } from './actions';
 
 const createSearchAction = (getView: () => EditorView) =>
-  createEditorAction('search', () => openSearchPanel(getView()), {
-    testId: 'editor.toolbar.search',
-    icon: 'ph--magnifying-glass--regular',
-  });
+  createEditorAction(
+    'search',
+    {
+      testId: 'editor.toolbar.search',
+      icon: 'ph--magnifying-glass--regular',
+    },
+    () => openSearchPanel(getView()),
+  );
 
-export const createSearch = (getView: () => EditorView) => ({
+export const createSearch = (
+  getView: () => EditorView,
+): {
+  nodes: Node.NodeArg<any>[];
+  edges: Array<{ source: string; target: string }>;
+} => ({
   nodes: [createSearchAction(getView)],
   edges: [{ source: 'root', target: 'search' }],
 });

package/src/components/EditorToolbar/useEditorToolbar.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom } from '@effect-atom/atom-react';
+import { useMemo } from 'react';
+
+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: EditorToolbarState = {}): Atom.Writable<EditorToolbarState> => {
+  // TODO(wittjosiah): Including initialState in the deps causes reactivity issues.
+  return useMemo(() => Atom.make<EditorToolbarState>(initialState), []);
+};