@dxos/react-ui-editor 0.8.4-main.406dc2a → 0.8.4-main.422d1c7879

package/src/components/EditorToolbar/headings.ts

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

package/src/components/EditorToolbar/image.ts

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

package/src/components/EditorToolbar/index.ts

@@ -2,11 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './types';
+
 export * from './EditorToolbar';
-export {
-  type EditorToolbarState,
-  type EditorToolbarActionGraphProps,
-  useEditorToolbarState,
-  createEditorAction,
-  createEditorActionGroup,
-} from './util';

package/src/components/EditorToolbar/lists.ts

@@ -4,12 +4,11 @@
 
 import { type EditorView } from '@codemirror/view';
 
-import { type NodeArg } from '@dxos/app-graph';
-import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { type ActionGroupBuilderFn, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { List, addList, removeList } from '@dxos/ui-editor';
 
-import { List, addList, removeList } from '../../extensions';
-
-import { type EditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
+import { translationKey } from '../../translations';
+import { type EditorToolbarState } from './types';
 
 const listStyles = {
   bullet: 'ph--list-bullets--regular',
@@ -17,40 +16,42 @@ const listStyles = {
   task: 'ph--list-checks--regular',
 };
 
-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);
-      }
-    });
-  });
-
-export const createLists = (state: EditorToolbarState, getView: () => EditorView) => {
-  const value = state.listStyle ?? '';
-  const listGroupAction = createListGroupAction(value);
-  const listActionsMap = createListActions(value, getView);
-  return {
-    nodes: [listGroupAction as NodeArg<any>, ...listActionsMap],
-    edges: [
-      { source: 'root', target: 'list' },
-      ...listActionsMap.map(({ id }) => ({ source: listGroupAction.id, target: id })),
-    ],
+/** Add list actions to the builder. */
+export const addLists =
+  (state: EditorToolbarState, getView: () => EditorView): ActionGroupBuilderFn =>
+  (builder) => {
+    const value = state.listStyle ?? '';
+    builder.group(
+      'list',
+      {
+        label: ['list.label', { ns: translationKey }],
+        iconOnly: true,
+        variant: 'toggleGroup',
+        selectCardinality: 'single',
+        value,
+      } as ToolbarMenuActionGroupProperties,
+      (group) => {
+        for (const [listStyle, icon] of Object.entries(listStyles)) {
+          const checked = value === listStyle;
+          group.action(
+            `list-${listStyle}`,
+            { label: [`list.${listStyle}.label`, { ns: translationKey }], checked, icon },
+            () => {
+              const view = getView();
+              if (!view) {
+                return;
+              }
+
+              const listType =
+                listStyle === 'ordered' ? List.Ordered : listStyle === 'bullet' ? List.Bullet : List.Task;
+              if (checked) {
+                removeList(listType)(view);
+              } else {
+                addList(listType)(view);
+              }
+            },
+          );
+        }
+      },
+    );
   };
-};

package/src/components/EditorToolbar/search.ts

@@ -5,19 +5,21 @@
 import { openSearchPanel } from '@codemirror/search';
 import { type EditorView } from '@codemirror/view';
 
-import { createEditorAction } from './util';
+import { type ActionGroupBuilderFn } from '@dxos/react-ui-menu';
 
-const createSearchAction = (getView: () => EditorView) =>
-  createEditorAction(
-    'search',
-    {
-      testId: 'editor.toolbar.search',
-      icon: 'ph--magnifying-glass--regular',
-    },
-    () => openSearchPanel(getView()),
-  );
+import { translationKey } from '../../translations';
 
-export const createSearch = (getView: () => EditorView) => ({
-  nodes: [createSearchAction(getView)],
-  edges: [{ source: 'root', target: 'search' }],
-});
+/** Add search action to the builder. */
+export const addSearch =
+  (getView: () => EditorView): ActionGroupBuilderFn =>
+  (builder) => {
+    builder.action(
+      'search',
+      {
+        label: ['search.label', { ns: translationKey }],
+        testId: 'editor.toolbar.search',
+        icon: 'ph--magnifying-glass--regular',
+      },
+      () => openSearchPanel(getView()),
+    );
+  };

package/src/components/EditorToolbar/types.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type EditorViewMode, type Formatting } from '@dxos/ui-editor';
+
+export type EditorToolbarState = Formatting & { viewMode?: EditorViewMode };

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

@@ -2,53 +2,47 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type NodeArg } from '@dxos/app-graph';
-import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { type ActionGroupBuilderFn, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { type EditorViewMode } from '@dxos/ui-editor';
 
 import { translationKey } from '../../translations';
-import { type EditorViewMode } from '../../types';
+import { type EditorToolbarState } from './types';
 
-import { type EditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
-
-const createViewModeGroupAction = (value: string) =>
-  createEditorActionGroup(
-    'viewMode',
-    {
-      variant: 'dropdownMenu',
-      applyActive: true,
-      selectCardinality: 'single',
-      value,
-    } as ToolbarMenuActionGroupProperties,
-    'ph--eye--regular',
-  );
+const viewModes = {
+  preview: 'ph--eye--regular',
+  source: 'ph--pencil-simple--regular',
+  readonly: 'ph--pencil-slash--regular',
+};
 
-const createViewModeActions = (value: string, onViewModeChange: (mode: EditorViewMode) => void) =>
-  Object.entries({
-    preview: 'ph--eye--regular',
-    source: 'ph--pencil-simple--regular',
-    readonly: 'ph--pencil-slash--regular',
-  }).map(([viewMode, icon]) => {
-    const checked = viewMode === value;
-    return createEditorAction(
-      `view-mode--${viewMode}`,
+/** Add view mode actions to the builder. */
+export const addViewMode =
+  (state: EditorToolbarState, onViewModeChange: (mode: EditorViewMode) => void): ActionGroupBuilderFn =>
+  (builder) => {
+    const value = state.viewMode ?? 'source';
+    builder.group(
+      'viewMode',
       {
-        label: [`${viewMode} mode label`, { ns: translationKey }],
-        checked,
-        icon,
+        label: ['view-mode.label', { ns: translationKey }],
+        icon: 'ph--eye--regular',
+        iconOnly: true,
+        variant: 'dropdownMenu',
+        applyActive: true,
+        selectCardinality: 'single',
+        value,
+      } as ToolbarMenuActionGroupProperties,
+      (group) => {
+        for (const [viewMode, icon] of Object.entries(viewModes)) {
+          const checked = viewMode === value;
+          group.action(
+            `view-mode--${viewMode}`,
+            {
+              label: [`view-mode.${viewMode}.label`, { ns: translationKey }],
+              checked,
+              icon,
+            },
+            () => onViewModeChange(viewMode as EditorViewMode),
+          );
+        }
       },
-      () => onViewModeChange(viewMode as EditorViewMode),
     );
-  });
-
-export const createViewMode = (state: EditorToolbarState, onViewModeChange: (mode: EditorViewMode) => void) => {
-  const value = state.viewMode ?? 'source';
-  const viewModeGroupAction = createViewModeGroupAction(value);
-  const viewModeActions = createViewModeActions(value, onViewModeChange);
-  return {
-    nodes: [viewModeGroupAction as NodeArg<any>, ...viewModeActions],
-    edges: [
-      { source: 'root', target: 'viewMode' },
-      ...viewModeActions.map(({ id }) => ({ source: viewModeGroupAction.id, target: id })),
-    ],
   };
-};

package/src/components/index.ts

@@ -3,4 +3,6 @@
 //
 
 export * from './Editor';
-export * from './EditorToolbar';
+
+export * from './EditorMenuProvider';
+export * from './EditorPreviewProvider';

package/src/extensions/Assistant.stories.tsx

@@ -0,0 +1,111 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as LanguageModel from '@effect/ai/LanguageModel';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import * as Layer from 'effect/Layer';
+import * as ManagedRuntime from 'effect/ManagedRuntime';
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { AiService } from '@dxos/ai';
+import { AiServiceTestingPreset } from '@dxos/ai/testing';
+import { useThemeContext } from '@dxos/react-ui';
+import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
+import { compactSlots, createBasicExtensions, createThemeExtensions } from '@dxos/ui-editor';
+import { trim } from '@dxos/util';
+
+import { Editor, type EditorViewProps } from '../components';
+import { translations } from '../translations';
+import { assistant, type AssistantOptions } from './assistant-extension';
+
+// TODO(burdon): Factor out.
+const useTestGenerate = () => {
+  const [generate, setGenerate] = useState<AssistantOptions['generate']>();
+  useEffect(() => {
+    let disposed = false;
+    const rt = ManagedRuntime.make(
+      AiService.model('@anthropic/claude-haiku-4-5').pipe(
+        Layer.provide(AiServiceTestingPreset('edge-remote')),
+        Layer.orDie,
+      ),
+    );
+
+    if (!disposed) {
+      setGenerate(
+        () =>
+          ({ instructions, content }: { instructions: string; content: string }) =>
+            rt.runPromise(
+              Effect.gen(function* () {
+                const prompt = [instructions, content].join('\n\n');
+                const response = yield* LanguageModel.generateText({ prompt });
+                return response.text;
+              }),
+            ),
+      );
+    }
+
+    return () => {
+      disposed = true;
+      void rt.dispose();
+    };
+  }, []);
+
+  return generate;
+};
+
+type DefaultStoryProps = Pick<EditorViewProps, 'value'>;
+
+const DefaultStory = (props: DefaultStoryProps) => {
+  const { themeMode } = useThemeContext();
+  const generate = useTestGenerate();
+  const extensions = useMemo(
+    () =>
+      generate
+        ? [
+            createBasicExtensions({ placeholder: 'Type here...' }),
+            createThemeExtensions({ themeMode, slots: compactSlots }),
+            assistant({ generate }),
+          ]
+        : [],
+    [generate, themeMode],
+  );
+
+  if (extensions.length === 0) {
+    return <Loading />;
+  }
+
+  return (
+    <Editor.Root>
+      <Editor.View {...props} classNames='dx-container border border-subdued-separator' extensions={extensions} />
+    </Editor.Root>
+  );
+};
+
+const meta: Meta<typeof DefaultStory> = {
+  title: 'ui/react-ui-editor/Assistant',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  tags: ['experimental'],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: trim`
+      This text has a speling mistake.
+
+      And it grammatical errors.
+
+      But we can fix it.
+    `,
+  },
+};