@dxos/react-ui-editor 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/src/components/EditorToolbar/formatting.ts

@@ -4,11 +4,11 @@
 
 import { type EditorView } from '@codemirror/view';
 
-import { type Node } from '@dxos/app-graph';
-import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { type ActionGroupBuilderFn, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 import { type Formatting, Inline, addLink, removeLink, setStyle } from '@dxos/ui-editor';
 
-import { createEditorAction, createEditorActionGroup } from './actions';
+import { translationKey } from '../../translations';
+
 import { type EditorToolbarState } from './useEditorToolbar';
 
 const formats = {
@@ -19,47 +19,46 @@ const formats = {
   link: 'ph--link--regular',
 };
 
-const createFormattingGroup = (formatting: Formatting) =>
-  createEditorActionGroup('formatting', {
-    variant: 'toggleGroup',
-    selectCardinality: 'multiple',
-    value: Object.keys(formats).filter((key) => !!formatting[key as keyof Formatting]),
-  } as ToolbarMenuActionGroupProperties);
-
-const createFormattingActions = (formatting: Formatting, getView: () => EditorView) =>
-  Object.entries(formats).map(([type, icon]) => {
-    const checked = !!formatting[type as keyof Formatting];
-    return createEditorAction(type, { checked, icon }, () => {
-      const view = getView();
-      if (!view) {
-        return;
-      }
+/** Add formatting actions to the builder. */
+export const addFormatting =
+  (state: EditorToolbarState, getView: () => EditorView): ActionGroupBuilderFn =>
+  (builder) => {
+    const formatting: Formatting = state;
+    builder.group(
+      'formatting',
+      {
+        label: ['formatting.label', { ns: translationKey }],
+        iconOnly: true,
+        variant: 'toggleGroup',
+        selectCardinality: 'multiple',
+        value: Object.keys(formats).filter((key) => !!formatting[key as keyof Formatting]),
+      } as ToolbarMenuActionGroupProperties,
+      (group) => {
+        for (const [type, icon] of Object.entries(formats)) {
+          const checked = !!formatting[type as keyof Formatting];
+          group.action(type, { label: [`formatting.${type}.label`, { ns: translationKey }], 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);
-    });
-  });
-
-export const createFormatting = (state: EditorToolbarState, getView: () => EditorView) => {
-  const formattingGroupAction = createFormattingGroup(state);
-  const formattingActions = createFormattingActions(state, getView);
-  return {
-    nodes: [formattingGroupAction as Node.NodeArg<any>, ...formattingActions],
-    edges: [
-      { source: 'root', target: 'formatting' },
-      ...formattingActions.map(({ id }) => ({ source: formattingGroupAction.id, target: id })),
-    ],
+            setStyle(
+              type === 'strong'
+                ? Inline.Strong
+                : type === 'emphasis'
+                  ? Inline.Emphasis
+                  : type === 'strikethrough'
+                    ? Inline.Strikethrough
+                    : Inline.Code,
+              !checked,
+            )(view);
+          });
+        }
+      },
+    );
   };
-};

package/src/components/EditorToolbar/headings.ts

@@ -4,49 +4,22 @@
 
 import { type EditorView } from '@codemirror/view';
 
-import { type Node } 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 { translationKey } from '../../translations';
 
-import { createEditorAction, createEditorActionGroup } from './actions';
 import { type EditorToolbarState } from './useEditorToolbar';
 
-const createHeadingGroupAction = (value: string) =>
-  createEditorActionGroup(
-    'heading',
-    {
-      variant: 'dropdownMenu',
-      applyActive: true,
-      selectCardinality: 'single',
-      // TODO(wittjosiah): Remove? Not sure this does anything.
-      value,
-    } as ToolbarMenuActionGroupProperties,
-    'ph--text-h--regular',
-  );
-
-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',
-  }).map(([levelStr, icon]) => {
-    const level = parseInt(levelStr);
-    return createEditorAction(
-      `heading--${levelStr}`,
-      {
-        label: ['heading level label', { count: level, ns: translationKey }],
-        icon,
-        checked: levelStr === currentLevel,
-      },
-      () => setHeading(level)(getView()),
-    );
-  });
+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';
@@ -54,15 +27,36 @@ const computeHeadingValue = (state: EditorToolbarState) => {
   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(headingValue, getView);
-  return {
-    nodes: [headingGroupAction as Node.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,26 +2,21 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Node } from '@dxos/app-graph';
+import { type ActionGroupBuilderFn } from '@dxos/react-ui-menu';
 
-import { createEditorAction } from './actions';
+import { translationKey } from '../../translations';
 
-const createImageUploadAction = (onImageUpload: () => void) =>
-  createEditorAction(
-    'image',
-    {
-      testId: 'editor.toolbar.image',
-      icon: 'ph--image-square--regular',
-    },
-    onImageUpload,
-  );
-
-export const createImageUpload = (
-  onImageUpload: () => void,
-): {
-  nodes: Node.NodeArg<any>[];
-  edges: Array<{ source: string; target: string }>;
-} => ({
-  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

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

package/src/components/EditorToolbar/lists.ts

@@ -0,0 +1,57 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+
+import { type ActionGroupBuilderFn, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { List, addList, removeList } from '@dxos/ui-editor';
+
+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',
+};
+
+/** 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,26 +5,21 @@
 import { openSearchPanel } from '@codemirror/search';
 import { type EditorView } from '@codemirror/view';
 
-import { type Node } from '@dxos/app-graph';
+import { type ActionGroupBuilderFn } from '@dxos/react-ui-menu';
 
-import { createEditorAction } from './actions';
+import { translationKey } from '../../translations';
 
-const createSearchAction = (getView: () => EditorView) =>
-  createEditorAction(
-    'search',
-    {
-      testId: 'editor.toolbar.search',
-      icon: 'ph--magnifying-glass--regular',
-    },
-    () => openSearchPanel(getView()),
-  );
-
-export const createSearch = (
-  getView: () => EditorView,
-): {
-  nodes: Node.NodeArg<any>[];
-  edges: Array<{ source: string; target: string }>;
-} => ({
-  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/view-mode.ts

@@ -2,54 +2,48 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Node } 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 { createEditorAction, createEditorActionGroup } from './actions';
 import { type EditorToolbarState } from './useEditorToolbar';
 
-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 Node.NodeArg<any>, ...viewModeActions],
-    edges: [
-      { source: 'root', target: 'viewMode' },
-      ...viewModeActions.map(({ id }) => ({ source: viewModeGroupAction.id, target: id })),
-    ],
   };
-};

package/src/stories/Automerge.stories.tsx

@@ -16,8 +16,7 @@ import { Query, useQuery, useSpace } from '@dxos/react-client/echo';
 import { type Identity, useIdentity } from '@dxos/react-client/halo';
 import { useClientStory, withMultiClientProvider } from '@dxos/react-client/testing';
 import { Button, useThemeContext } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
-import { render } from '@dxos/storybook-utils';
+import { withLayout, withTheme, Loading } from '@dxos/react-ui/testing';
 import { createBasicExtensions, createDataExtensions, createThemeExtensions } from '@dxos/ui-editor';
 
 import { useTextEditor } from '../hooks';
@@ -51,7 +50,7 @@ const Editor = ({ source, messenger, identity, autoFocus }: EditorProps) => {
     [source, themeMode],
   );
 
-  return <div ref={parentRef} className='flex is-full' />;
+  return <div ref={parentRef} className='flex w-full' />;
 };
 
 const DefaultStory = () => {
@@ -77,11 +76,11 @@ const DefaultStory = () => {
   }, []);
 
   if (!object1 || !object2) {
-    return null;
+    return <Loading data={{ object1: !!object1, object2: !!object2 }} />;
   }
 
   return (
-    <div className='bs-full is-full grid grid-cols-2 gap-4'>
+    <div className='h-full w-full grid grid-cols-2 gap-4'>
       <Editor source={object1} autoFocus />
       <Editor source={object2} />
     </div>
@@ -117,7 +116,7 @@ const EchoStory = () => {
   }, [objects, source]);
 
   return (
-    <div className='bs-full is-full flex flex-col overflow-hidden'>
+    <div className='h-full w-full flex flex-col overflow-hidden'>
       <pre className='p-2 text-xs text-subdued'>
         {JSON.stringify({ index, identity: identity?.identityKey.truncate(), spaceId, objects }, null, 2)}
       </pre>
@@ -137,6 +136,7 @@ const EchoStory = () => {
 const meta = {
   title: 'ui/react-ui-editor/Automerge',
   component: Editor as any,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
     translations,
@@ -149,14 +149,12 @@ type Story = StoryObj<typeof meta>;
 
 // TODO(burdon): ERROR: factories.ts:126 Error: Non-base58 character
 export const Default: Story = {
-  decorators: [withTheme],
-  render: render(DefaultStory),
+  render: DefaultStory,
 };
 
 // TODO(burdon): Failing (doesn't sync)
 export const WithEcho: Story = {
   decorators: [
-    withTheme,
     withMultiClientProvider({
       numClients: 2,
       createIdentity: true,
@@ -171,5 +169,5 @@ export const WithEcho: Story = {
       },
     }),
   ],
-  render: render(EchoStory),
+  render: EchoStory,
 };

package/src/stories/Comments.stories.tsx

@@ -9,7 +9,7 @@ import React, { type FC, useContext, useMemo } from 'react';
 import { keySymbols, parseShortcut } from '@dxos/keyboard';
 import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 import { type Comment, annotations, comments, createExternalCommentSync } from '@dxos/ui-editor';
 
@@ -20,7 +20,7 @@ import { EditorStory, content, longText } from './components';
 const meta = {
   title: 'ui/react-ui-editor/Comments',
   component: EditorStory,
-  decorators: [withRegistry, withTheme],
+  decorators: [withRegistry, withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },
@@ -77,14 +77,14 @@ export const Comments: Story = {
 };
 
 const Key: FC<{ char: string }> = ({ char }) => (
-  <span className='flex justify-center items-center is-[24px] bs-[24px] rounded text-xs bg-neutral-200 text-black'>
+  <span className='flex justify-center items-center w-[24px] h-[24px] rounded-sm text-xs bg-neutral-200 text-black'>
     {char}
   </span>
 );
 
 const CommentTooltip: FC<{ shortcut: string }> = ({ shortcut }) => {
   return (
-    <div className='flex items-center gap-2 pli-2 plb-2 bg-neutral-700 text-white text-xs rounded'>
+    <div className='flex items-center gap-2 px-2 py-2 bg-neutral-700 text-white text-xs rounded-sm'>
       <div>Create comment</div>
       <div className='flex gap-1'>
         {keySymbols(parseShortcut(shortcut)).map((char) => (

package/src/stories/EditorToolbar.stories.tsx

@@ -7,8 +7,8 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useContext, useState } from 'react';
 
 import { invariant } from '@dxos/invariant';
-import { useThemeContext } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
+import { Panel, useThemeContext } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 import {
   type EditorInputMode,
@@ -18,19 +18,18 @@ import {
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
-  editorWidth,
+  documentSlots,
   formattingKeymap,
   formattingListener,
 } from '@dxos/ui-editor';
-import { attentionSurface, mx } from '@dxos/ui-theme';
 
 import { EditorToolbar, type EditorToolbarState, useEditorToolbar } from '../components';
 import { type UseTextEditorProps, useTextEditor } from '../hooks';
 import { translations } from '../translations';
 
-type StoryProps = { placeholder?: string } & UseTextEditorProps;
+type DefaultStoryProps = { placeholder?: string } & UseTextEditorProps;
 
-const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
+const DefaultStory = ({ autoFocus, initialValue, placeholder }: DefaultStoryProps) => {
   const { themeMode } = useThemeContext();
   const registry = useContext(RegistryContext);
 
@@ -53,9 +52,18 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
       selectionEnd: true,
       extensions: [
         editorInputMode ? InputModeExtensions[editorInputMode] : [],
-        createBasicExtensions({ placeholder, lineWrapping: true, readOnly: viewMode === 'readonly', search: true }),
+        createBasicExtensions({
+          placeholder,
+          lineWrapping: true,
+          readOnly: viewMode === 'readonly',
+          search: true,
+        }),
+        createThemeExtensions({
+          themeMode,
+          syntaxHighlighting: true,
+          slots: documentSlots,
+        }),
         createMarkdownExtensions(),
-        createThemeExtensions({ themeMode, syntaxHighlighting: true }),
         viewMode === 'source' ? [] : decorateMarkdown(),
         formattingKeymap(),
         formattingListener(updateToolbarState),
@@ -76,22 +84,29 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
     [registry, toolbarState],
   );
 
-  // TODO(marijn): This doesn't update the state on view changes.
-  //  Also not sure if view is even guaranteed to exist at this point.
   return (
-    <div role='none' className={mx('fixed inset-0 flex flex-col')}>
-      {toolbarState && <EditorToolbar state={toolbarState} getView={getView} onViewModeChange={handleViewModeChange} />}
-      <div role='none' className={mx('grow overflow-hidden', attentionSurface)}>
-        <div className={mx(editorWidth)} ref={parentRef} />
-      </div>
-    </div>
+    <Panel.Root>
+      {toolbarState && (
+        <Panel.Toolbar>
+          <EditorToolbar
+            classNames='dx-document'
+            state={toolbarState}
+            getView={getView}
+            onViewModeChange={handleViewModeChange}
+          />
+        </Panel.Toolbar>
+      )}
+      <Panel.Content>
+        <div role='none' className='dx-container dx-document bg-base-surface' ref={parentRef} />
+      </Panel.Content>
+    </Panel.Root>
   );
 };
 
 const meta = {
   title: 'ui/react-ui-editor/EditorToolbar',
   render: DefaultStory,
-  decorators: [withRegistry, withTheme],
+  decorators: [withRegistry, withTheme(), withLayout({ layout: 'fullscreen', classNames: 'bg-sidebar-surface' })],
   parameters: {
     layout: 'fullscreen',
     translations,