@dxos/react-ui-editor 0.8.4-main.9be5663bfe → 0.8.4-main.abd8ff62ef

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.8.4-main.9be5663bfe",
+  "version": "0.8.4-main.abd8ff62ef",
   "description": "Text editor components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -12,18 +12,24 @@
   "author": "DXOS.org",
   "sideEffects": false,
   "type": "module",
+  "imports": {
+    "#translations": "./src/translations.ts"
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
+    },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "browser": "./dist/lib/browser/translations.mjs",
+      "node": "./dist/lib/node-esm/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
@@ -63,31 +69,33 @@
     "lodash.merge": "^4.6.2",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/app-graph": "0.8.4-main.9be5663bfe",
-    "@dxos/client": "0.8.4-main.9be5663bfe",
-    "@dxos/context": "0.8.4-main.9be5663bfe",
-    "@dxos/async": "0.8.4-main.9be5663bfe",
-    "@dxos/display-name": "0.8.4-main.9be5663bfe",
-    "@dxos/echo": "0.8.4-main.9be5663bfe",
-    "@dxos/echo-db": "0.8.4-main.9be5663bfe",
-    "@dxos/invariant": "0.8.4-main.9be5663bfe",
-    "@dxos/debug": "0.8.4-main.9be5663bfe",
-    "@dxos/log": "0.8.4-main.9be5663bfe",
-    "@dxos/lit-ui": "0.8.4-main.9be5663bfe",
-    "@dxos/react-hooks": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-menu": "0.8.4-main.9be5663bfe",
-    "@dxos/protocols": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-mosaic": "0.8.4-main.9be5663bfe",
-    "@dxos/ui": "0.8.4-main.9be5663bfe",
-    "@dxos/ui-theme": "0.8.4-main.9be5663bfe",
-    "@dxos/util": "0.8.4-main.9be5663bfe",
-    "@dxos/ui-editor": "0.8.4-main.9be5663bfe"
+    "@dxos/app-graph": "0.8.4-main.abd8ff62ef",
+    "@dxos/async": "0.8.4-main.abd8ff62ef",
+    "@dxos/client": "0.8.4-main.abd8ff62ef",
+    "@dxos/context": "0.8.4-main.abd8ff62ef",
+    "@dxos/debug": "0.8.4-main.abd8ff62ef",
+    "@dxos/display-name": "0.8.4-main.abd8ff62ef",
+    "@dxos/echo": "0.8.4-main.abd8ff62ef",
+    "@dxos/echo-db": "0.8.4-main.abd8ff62ef",
+    "@dxos/effect": "0.8.4-main.abd8ff62ef",
+    "@dxos/invariant": "0.8.4-main.abd8ff62ef",
+    "@dxos/log": "0.8.4-main.abd8ff62ef",
+    "@dxos/lit-ui": "0.8.4-main.abd8ff62ef",
+    "@dxos/protocols": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-hooks": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-mosaic": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-menu": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-editor": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef",
+    "@dxos/util": "0.8.4-main.abd8ff62ef"
   },
   "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.5.0",
+    "@effect/ai": "0.33.2",
     "@effect/platform": "0.94.4",
     "@types/chai": "^4.2.15",
     "@types/chai-dom": "^1.11.0",
@@ -106,22 +114,23 @@
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "react-test-renderer": "~19.2.0",
-    "vite": "^7.1.11",
+    "vite": "^8.0.10",
     "vite-plugin-top-level-await": "^1.6.0",
-    "vite-plugin-wasm": "^3.5.0",
-    "@dxos/config": "0.8.4-main.9be5663bfe",
-    "@dxos/echo": "0.8.4-main.9be5663bfe",
-    "@dxos/echo-atom": "0.8.4-main.9be5663bfe",
-    "@dxos/keyboard": "0.8.4-main.9be5663bfe",
-    "@dxos/random": "0.8.4-main.9be5663bfe",
-    "@dxos/react-client": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-attention": "0.8.4-main.9be5663bfe",
-    "@dxos/schema": "0.8.4-main.9be5663bfe",
-    "@dxos/storybook-utils": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.9be5663bfe",
-    "@dxos/ui-types": "0.8.4-main.9be5663bfe",
-    "@dxos/ui-theme": "0.8.4-main.9be5663bfe"
+    "vite-plugin-wasm": "^3.6.0",
+    "@dxos/config": "0.8.4-main.abd8ff62ef",
+    "@dxos/ai": "0.8.4-main.abd8ff62ef",
+    "@dxos/echo-atom": "0.8.4-main.abd8ff62ef",
+    "@dxos/random": "0.8.4-main.abd8ff62ef",
+    "@dxos/echo": "0.8.4-main.abd8ff62ef",
+    "@dxos/keyboard": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-client": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-attention": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef",
+    "@dxos/schema": "0.8.4-main.abd8ff62ef",
+    "@dxos/storybook-utils": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-types": "0.8.4-main.abd8ff62ef"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -129,9 +138,9 @@
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-client": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui": "0.8.4-main.9be5663bfe",
-    "@dxos/ui-theme": "0.8.4-main.9be5663bfe"
+    "@dxos/react-ui": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-client": "0.8.4-main.abd8ff62ef"
   },
   "publishConfig": {
     "access": "public"

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

@@ -20,11 +20,7 @@ import {
 } from '@dxos/ui-editor';
 
 import { createMenuGroup } from '../EditorMenuProvider';
-import { Editor, type EditorContentProps } from './Editor';
-
-// TODO(burdon): PreviewPopoverProvider (MarkdownStream, Preview story).
-// TODO(burdon): Adapt Markdown plugin to use new Editor (plan first to check fit).
-// TODO(burdon): Remove redundant hooks and simplify props.
+import { Editor, type EditorViewProps } from './Editor';
 
 random.seed(1234);
 
@@ -32,8 +28,7 @@ const initialValue = ['# Blue Monday', '', 'How does it **feel**?', ''].join('\n
 
 const items = random.helpers.multiple(random.commerce.productName, { count: 10 }).sort();
 
-// TODO(burdon): Adapter other tests in react-ui-editor/stories to use this pattern.
-const withExtensions: Decorator<EditorContentProps> = (Story, { args }) => {
+const withExtensions: Decorator<EditorViewProps> = (Story, { args }) => {
   const { themeMode } = useThemeContext();
   const extensions = useMemo(
     () => [
@@ -51,7 +46,7 @@ const withExtensions: Decorator<EditorContentProps> = (Story, { args }) => {
 
 const meta = {
   title: 'ui/react-ui-editor/Editor',
-  component: Editor.Content,
+  component: Editor.View,
   decorators: [withExtensions, withTheme(), withLayout({ layout: 'column' }), withAttention()],
   parameters: {
     layout: 'fullscreen',
@@ -59,16 +54,16 @@ const meta = {
   args: {
     initialValue,
   },
-} satisfies Meta<typeof Editor.Content>;
+} satisfies Meta<typeof Editor.View>;
 
 export default meta;
 
-type Story = StoryObj<EditorContentProps>;
+type Story = StoryObj<EditorViewProps>;
 
 export const Default: Story = {
   render: (args) => (
     <Editor.Root>
-      <Editor.Content {...args} />
+      <Editor.View {...args} />
     </Editor.Root>
   ),
 };
@@ -77,7 +72,7 @@ export const WithToolbar: Story = {
   render: (args) => (
     <Editor.Root>
       <Editor.Toolbar />
-      <Editor.Content {...args} />
+      <Editor.View {...args} />
     </Editor.Root>
   ),
 };
@@ -85,10 +80,10 @@ export const WithToolbar: Story = {
 export const WithPopover: Story = {
   render: (args) => (
     <Editor.Root trigger={['@']} getMenu={({ text }) => [createMenuGroup({ items, filter: text })]}>
-      <Editor.Viewport>
+      <Editor.Content>
         <Editor.Toolbar />
-        <Editor.Content {...args} />
-      </Editor.Viewport>
+        <Editor.View {...args} />
+      </Editor.Content>
     </Editor.Root>
   ),
 };

package/src/components/Editor/Editor.tsx

@@ -3,7 +3,7 @@
 //
 
 import { type Extension } from '@codemirror/state';
-import { type Atom } from '@effect-atom/atom-react';
+import { Atom } from '@effect-atom/atom-react';
 import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren, forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';
 
@@ -13,18 +13,23 @@ import { mx } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
 
 import {
-  type EditorController,
-  EditorContent as NaturalEditorContent,
-  type EditorContentProps as NaturalEditorContentProps,
-  noopController,
-} from '../EditorContent';
-import { EditorMenuProvider, type UseEditorMenuProps, useEditorMenu } from '../EditorMenuProvider';
+  EditorMenuProvider,
+  type EditorMenuProviderProps,
+  type UseEditorMenuProps,
+  useEditorMenu,
+} from '../EditorMenuProvider';
 import {
   type EditorToolbarState,
   EditorToolbar as NaturalEditorToolbar,
   type EditorToolbarProps as NaturalEditorToolbarProps,
-  useEditorToolbar,
 } from '../EditorToolbar';
+import {
+  type EditorController,
+  EditorView as NaturalEditorContent,
+  type EditorViewProps as NaturalEditorContentProps,
+  createEditorController,
+  noopController,
+} from './EditorView';
 
 //
 // Context
@@ -49,7 +54,11 @@ export { useEditorContext };
 //
 
 type EditorRootProps = PropsWithChildren<
-  Pick<EditorContextValue, 'extensions'> & Omit<UseEditorMenuProps, 'viewRef'> & Pick<EditorToolbarState, 'viewMode'>
+  Pick<EditorContextValue, 'extensions'> &
+    Omit<UseEditorMenuProps, 'viewRef'> &
+    Pick<EditorMenuProviderProps, 'numItems'> & {
+      viewMode?: EditorToolbarState['viewMode'];
+    }
 >;
 
 /**
@@ -57,11 +66,9 @@ type EditorRootProps = PropsWithChildren<
  * Provides context for all child components and manages the editor controller state.
  */
 const EditorRoot = forwardRef<EditorController | null, EditorRootProps>(
-  ({ children, extensions: extensionsProp, viewMode, ...props }, forwardedRef) => {
-    const state = useEditorToolbar({ viewMode });
-
-    const [controller, setController] = useState<EditorController>();
-    useImperativeHandle(forwardedRef, () => controller ?? noopController, [controller]);
+  ({ children, extensions: extensionsProp, viewMode, numItems, ...props }, forwardedRef) => {
+    // TODO(wittjosiah): Including initialState in the deps causes reactivity issues.
+    const state = useMemo(() => Atom.make<EditorToolbarState>({ viewMode }), [viewMode]);
 
     // TODO(burdon): Consider lighter-weight approach if EditorMenuProvider is not needed.
     const { groupsRef, extension, ...menuProps } = useEditorMenu(props);
@@ -70,6 +77,10 @@ const EditorRoot = forwardRef<EditorController | null, EditorRootProps>(
       [extension, extensionsProp],
     );
 
+    // External controller.
+    const [controller, setController] = useState<EditorController>(noopController);
+    useImperativeHandle(forwardedRef, () => controller, [controller]);
+
     return (
       <EditorContextProvider
         controller={controller}
@@ -77,7 +88,7 @@ const EditorRoot = forwardRef<EditorController | null, EditorRootProps>(
         extensions={extensions}
         state={state}
       >
-        <EditorMenuProvider view={controller?.view} groups={groupsRef.current} {...menuProps}>
+        <EditorMenuProvider view={controller?.view} groups={groupsRef.current} numItems={numItems} {...menuProps}>
           {children}
         </EditorMenuProvider>
       </EditorContextProvider>
@@ -88,17 +99,17 @@ const EditorRoot = forwardRef<EditorController | null, EditorRootProps>(
 EditorRoot.displayName = 'Editor.Root';
 
 //
-// Viewport
+// Content
 //
 
-const EDITOR_VIEWPORT_NAME = 'Editor.Viewport';
+const EDITOR_CONTENT_NAME = 'Editor.Content';
 
-type EditorViewportProps = ThemedClassName<PropsWithChildren<{}>>;
+type EditorContentProps = ThemedClassName<PropsWithChildren<{}>>;
 
 /**
- * Viewport component that wraps the toolbar and editor content area.
+ * Content component that wraps the toolbar and editor view area.
  */
-const EditorViewport = ({ classNames, children }: EditorViewportProps) => {
+const EditorContent = ({ classNames, children }: EditorContentProps) => {
   return (
     <div role='none' className={mx('grid grid-rows-[min-content_1fr] h-full overflow-hidden', classNames)}>
       {children}
@@ -106,23 +117,22 @@ const EditorViewport = ({ classNames, children }: EditorViewportProps) => {
   );
 };
 
-EditorViewport.displayName = EDITOR_VIEWPORT_NAME;
+EditorContent.displayName = EDITOR_CONTENT_NAME;
 
 //
-// Content
+// View
 //
 
-const EDITOR_CONTENT_NAME = 'Editor.Content';
+const EDITOR_VIEW_NAME = 'Editor.View';
 
-type EditorContentProps = Omit<NaturalEditorContentProps, 'ref'>;
+type EditorViewProps = Omit<NaturalEditorContentProps, 'ref'>;
 
 /**
- * Content component that renders the actual CodeMirror editor.
+ * View component that renders the actual CodeMirror editor.
  * Automatically registers the editor controller with the context.
  */
-const EditorContent = ({ extensions: providedExtensions, ...props }: EditorContentProps) => {
-  const { extensions: additionalExtensions = [], setController } = useEditorContext(EDITOR_CONTENT_NAME);
-
+const EditorView = ({ extensions: providedExtensions, ...props }: EditorViewProps) => {
+  const { extensions: additionalExtensions = [], setController } = useEditorContext(EDITOR_VIEW_NAME);
   const extensions = useMemo(
     () => [additionalExtensions, providedExtensions].filter(isNonNullable).flat(),
     [providedExtensions, additionalExtensions],
@@ -131,7 +141,7 @@ const EditorContent = ({ extensions: providedExtensions, ...props }: EditorConte
   return <NaturalEditorContent {...props} extensions={extensions} ref={setController} />;
 };
 
-EditorContent.displayName = EDITOR_CONTENT_NAME;
+EditorView.displayName = EDITOR_VIEW_NAME;
 
 //
 // Toolbar
@@ -147,8 +157,6 @@ type EditorToolbarProps = Omit<NaturalEditorToolbarProps, 'getView' | 'state'>;
  */
 const EditorToolbar = (props: EditorToolbarProps) => {
   const { controller, state } = useEditorContext(EDITOR_TOOLBAR_NAME);
-
-  // TODO(burdon): Fix invariant.
   const getView = useCallback(() => {
     invariant(controller?.view);
     return controller?.view;
@@ -165,9 +173,18 @@ EditorToolbar.displayName = EDITOR_TOOLBAR_NAME;
 
 export const Editor = {
   Root: EditorRoot,
-  Viewport: EditorViewport,
-  Content: EditorContent,
   Toolbar: EditorToolbar,
+  Content: EditorContent,
+  View: EditorView,
+};
+
+export type {
+  EditorController,
+  EditorRootProps,
+  EditorContentProps,
+  EditorViewProps,
+  EditorToolbarProps,
+  EditorToolbarState,
 };
 
-export type { EditorController, EditorRootProps, EditorViewportProps, EditorContentProps, EditorToolbarProps };
+export { createEditorController };

package/src/components/Editor/EditorView.tsx

@@ -0,0 +1,103 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Transaction } from '@codemirror/state';
+import { EditorView as NaturalEditorView } from '@codemirror/view';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { initialSync } from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
+
+import { type UseTextEditorProps, useTextEditor } from '../../hooks';
+import { type EditorController, createEditorController, noopController } from './controller';
+
+export type EditorViewProps = ThemedClassName<
+  {
+    focusable?: boolean;
+    value?: string;
+    onChange?: (value: string) => void;
+  } & UseTextEditorProps
+>;
+
+/**
+ * Minimal text editor.
+ * NOTE: This shouold not be used with the automerge extension.
+ */
+// TODO(burdon): Move controller to Root component, then make composable.
+export const EditorView = forwardRef<EditorController, EditorViewProps>(
+  ({ classNames, id, extensions, selectionEnd, focusable = true, value, onChange, ...props }, forwardedRef) => {
+    // Hold the latest onChange in a ref so callers may pass an inline callback
+    // without forcing the underlying editor to be destroyed and recreated on
+    // every render — which would blur the focused input on each keystroke.
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+
+    const { parentRef, focusAttributes, view } = useTextEditor(
+      () => ({
+        id,
+        initialValue: value,
+        selectionEnd,
+        extensions: [
+          extensions ?? [],
+          NaturalEditorView.updateListener.of(({ view, docChanged, transactions }) => {
+            const isInitialSync = transactions.some((tr) => tr.annotation(Transaction.userEvent) === initialSync.value);
+            if (!isInitialSync && docChanged) {
+              onChangeRef.current?.(view.state.doc.toString());
+            }
+          }),
+        ],
+        ...props,
+      }),
+      [id, extensions, selectionEnd],
+    );
+
+    // External controller.
+    useImperativeHandle(forwardedRef, () => {
+      return createEditorController(view);
+    }, [id, view]);
+
+    // Sync the editor doc to the controlled `value` prop, but only when they
+    // disagree. After internal typing the prop will already match the editor's
+    // doc, and dispatching anyway would race fast keystrokes — a stale rAF
+    // closure can replace doc content with an older value, dropping characters.
+    useEffect(() => {
+      if (!view) {
+        return;
+      }
+      const next = value ?? '';
+      if (view.state.doc.toString() === next) {
+        return;
+      }
+      requestAnimationFrame(() => {
+        if (view.state.doc.toString() === next) {
+          return;
+        }
+        view.dispatch({
+          annotations: initialSync,
+          changes: [{ from: 0, to: view.state.doc.length, insert: next }],
+          selection: selectionEnd ? { anchor: next.length } : undefined,
+        });
+
+        if (selectionEnd) {
+          view.focus();
+        }
+      });
+    }, [view, value, selectionEnd]);
+
+    return (
+      <div
+        role='none'
+        className={mx(
+          'w-full outline-hidden focus:border-accent-surface focus-within:border-neutral-focus-indicator',
+          classNames,
+        )}
+        {...(focusable ? focusAttributes : {})}
+        ref={parentRef}
+      />
+    );
+  },
+);
+
+export { type EditorController, createEditorController, noopController };

package/src/components/EditorMenuProvider/popover.ts

@@ -13,7 +13,8 @@ import {
   keymap,
 } from '@codemirror/view';
 
-import { type PlaceholderOptions, type Range, modalStateField, placeholder } from '@dxos/ui-editor';
+import { type PlaceholderOptions, modalStateField, placeholder } from '@dxos/ui-editor';
+import { type Range } from '@dxos/ui-editor/types';
 import { isNonNullable, isTruthy } from '@dxos/util';
 
 const DELIMITERS = [' ', ':'];

package/src/components/EditorToolbar/EditorToolbar.tsx

@@ -9,7 +9,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, Menu, type MenuAction, MenuBuilder, useMenuActions } from '@dxos/react-ui-menu';
-import { type EditorViewMode } from '@dxos/ui-editor';
+import { type EditorViewMode } from '@dxos/ui-editor/types';
 
 import { addBlocks } from './blocks';
 import { addFormatting } from './formatting';
@@ -17,9 +17,11 @@ import { addHeadings } from './headings';
 import { addImageUpload } from './image';
 import { addLists } from './lists';
 import { addSearch } from './search';
-import { type EditorToolbarState } from './useEditorToolbar';
+import { type EditorToolbarState } from './types';
 import { addViewMode } from './view-mode';
 
+// TODO(burdon): Enable toolbar variants (e.g., markdown, code).
+
 export type EditorToolbarFeatureFlags = Partial<{
   showHeadings: boolean;
   showFormatting: boolean;
@@ -49,7 +51,7 @@ export type EditorToolbarProps = ThemedClassName<
 >;
 
 export const EditorToolbar = memo(({ classNames, role, attendableId, onAction, ...props }: EditorToolbarProps) => {
-  const menuActions = useEditorToolbarActionGraph(props);
+  const menuActions = useMarkdownMenuActions(props);
 
   return (
     <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
@@ -63,13 +65,13 @@ export const EditorToolbar = memo(({ classNames, role, attendableId, onAction, .
 type ToolbarActionsProps = Pick<EditorToolbarActionGraphProps, 'state' | 'getView' | 'customActions'> &
   EditorToolbarFeatureFlags;
 
+// TODO(burdon): Some actions should toggle the state (e.g., toggle bullets on/off depending on the current state).
 // 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 useMarkdownMenuActions = ({ state, getView, customActions, ...features }: ToolbarActionsProps) => {
   const menuCreator = useMemo(
-    () => createToolbarActions({ state, getView, customActions, ...features }),
+    () => createMarkdownActions({ state, getView, customActions, ...features }),
     [
       state,
       getView,
@@ -87,7 +89,7 @@ const useEditorToolbarActionGraph = ({ state, getView, customActions, ...feature
   return useMenuActions(menuCreator);
 };
 
-const createToolbarActions = ({
+const createMarkdownActions = ({
   state,
   getView,
   customActions,

package/src/components/EditorToolbar/blocks.ts

@@ -7,8 +7,9 @@ import { type EditorView } from '@codemirror/view';
 import { type ActionGroupBuilderFn, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 import { addBlockquote, addCodeblock, insertTable, removeBlockquote, removeCodeblock } from '@dxos/ui-editor';
 
-import { translationKey } from '../../translations';
-import { type EditorToolbarState } from './useEditorToolbar';
+import { translationKey } from '#translations';
+
+import { type EditorToolbarState } from './types';
 
 const blockTypes = {
   blockquote: 'ph--quotes--regular',

package/src/components/EditorToolbar/formatting.ts

@@ -7,8 +7,9 @@ import { type EditorView } from '@codemirror/view';
 import { type ActionGroupBuilderFn, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 import { type Formatting, Inline, addLink, removeLink, setStyle } from '@dxos/ui-editor';
 
-import { translationKey } from '../../translations';
-import { type EditorToolbarState } from './useEditorToolbar';
+import { translationKey } from '#translations';
+
+import { type EditorToolbarState } from './types';
 
 const formats = {
   strong: 'ph--text-b--regular',

package/src/components/EditorToolbar/headings.ts

@@ -7,8 +7,9 @@ import { type EditorView } from '@codemirror/view';
 import { type ActionGroupBuilderFn, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 import { setHeading } from '@dxos/ui-editor';
 
-import { translationKey } from '../../translations';
-import { type EditorToolbarState } from './useEditorToolbar';
+import { translationKey } from '#translations';
+
+import { type EditorToolbarState } from './types';
 
 const headingIcons: Record<string, string> = {
   0: 'ph--paragraph--regular',

package/src/components/EditorToolbar/image.ts

@@ -4,7 +4,7 @@
 
 import { type ActionGroupBuilderFn } from '@dxos/react-ui-menu';
 
-import { translationKey } from '../../translations';
+import { translationKey } from '#translations';
 
 /** Add image upload action to the builder. */
 export const addImageUpload =

package/src/components/EditorToolbar/index.ts

@@ -2,6 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './EditorToolbar';
+export * from './types';
 
-export { type EditorToolbarState, useEditorToolbar } from './useEditorToolbar';
+export * from './EditorToolbar';

package/src/components/EditorToolbar/lists.ts

@@ -7,8 +7,9 @@ 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';
+import { translationKey } from '#translations';
+
+import { type EditorToolbarState } from './types';
 
 const listStyles = {
   bullet: 'ph--list-bullets--regular',

package/src/components/EditorToolbar/search.ts

@@ -7,7 +7,7 @@ import { type EditorView } from '@codemirror/view';
 
 import { type ActionGroupBuilderFn } from '@dxos/react-ui-menu';
 
-import { translationKey } from '../../translations';
+import { translationKey } from '#translations';
 
 /** Add search action to the builder. */
 export const addSearch =

package/src/components/EditorToolbar/types.ts

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