@dxos/react-ui-editor 0.8.4-main.66e292d → 0.8.4-main.69d29f4

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.8.4-main.66e292d",
+  "version": "0.8.4-main.69d29f4",
   "description": "Text editor components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
@@ -14,12 +18,6 @@
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
-    },
-    "./types": {
-      "source": "./src/types/index.ts",
-      "types": "./dist/types/src/types/index.d.ts",
-      "browser": "./dist/lib/browser/types/index.mjs",
-      "node": "./dist/lib/node-esm/types/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -31,109 +29,109 @@
     "src"
   ],
   "dependencies": {
-    "@automerge/automerge": "3.1.2",
+    "@automerge/automerge": "3.2.3",
     "@codemirror/autocomplete": "^6.19.0",
     "@codemirror/commands": "^6.8.1",
     "@codemirror/lang-html": "^6.4.11",
     "@codemirror/lang-javascript": "^6.2.4",
     "@codemirror/lang-json": "^6.0.2",
-    "@codemirror/lang-markdown": "^6.3.4",
+    "@codemirror/lang-markdown": "6.3.4",
     "@codemirror/lang-xml": "^6.1.0",
     "@codemirror/lang-yaml": "^6.1.2",
     "@codemirror/language": "^6.11.3",
     "@codemirror/language-data": "^6.5.1",
-    "@codemirror/lint": "^6.8.5",
+    "@codemirror/lint": "6.8.5",
     "@codemirror/search": "^6.5.11",
     "@codemirror/state": "^6.5.2",
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.38.4",
-    "@fluentui/react-tabster": "^9.24.2",
+    "@fluentui/react-tabster": "9.26.11",
     "@lezer/common": "^1.2.2",
     "@lezer/generator": "^1.7.1",
     "@lezer/highlight": "^1.2.1",
     "@lezer/markdown": "^1.3.1",
-    "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-react": "^3.3.0",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "@replit/codemirror-vim": "^6.2.1",
     "@replit/codemirror-vscode-keymap": "^6.0.2",
     "@uiw/codemirror-theme-vscode": "^4.25.2",
     "ajv": "^8.17.1",
+    "bind-event-listener": "^3.0.0",
     "codemirror": "^6.0.1",
     "lib0": "^0.2.65",
     "lodash.defaultsdeep": "^4.6.1",
     "lodash.merge": "^4.6.2",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/app-graph": "0.8.4-main.66e292d",
-    "@dxos/async": "0.8.4-main.66e292d",
-    "@dxos/client": "0.8.4-main.66e292d",
-    "@dxos/debug": "0.8.4-main.66e292d",
-    "@dxos/context": "0.8.4-main.66e292d",
-    "@dxos/display-name": "0.8.4-main.66e292d",
-    "@dxos/echo": "0.8.4-main.66e292d",
-    "@dxos/echo-db": "0.8.4-main.66e292d",
-    "@dxos/invariant": "0.8.4-main.66e292d",
-    "@dxos/lit-ui": "0.8.4-main.66e292d",
-    "@dxos/live-object": "0.8.4-main.66e292d",
-    "@dxos/log": "0.8.4-main.66e292d",
-    "@dxos/protocols": "0.8.4-main.66e292d",
-    "@dxos/react-hooks": "0.8.4-main.66e292d",
-    "@dxos/react-ui-menu": "0.8.4-main.66e292d",
-    "@dxos/react-ui-stack": "0.8.4-main.66e292d",
-    "@dxos/react-ui-types": "0.8.4-main.66e292d",
-    "@dxos/util": "0.8.4-main.66e292d"
+    "@dxos/app-graph": "0.8.4-main.69d29f4",
+    "@dxos/async": "0.8.4-main.69d29f4",
+    "@dxos/debug": "0.8.4-main.69d29f4",
+    "@dxos/client": "0.8.4-main.69d29f4",
+    "@dxos/context": "0.8.4-main.69d29f4",
+    "@dxos/display-name": "0.8.4-main.69d29f4",
+    "@dxos/echo-db": "0.8.4-main.69d29f4",
+    "@dxos/invariant": "0.8.4-main.69d29f4",
+    "@dxos/echo": "0.8.4-main.69d29f4",
+    "@dxos/lit-ui": "0.8.4-main.69d29f4",
+    "@dxos/protocols": "0.8.4-main.69d29f4",
+    "@dxos/log": "0.8.4-main.69d29f4",
+    "@dxos/react-hooks": "0.8.4-main.69d29f4",
+    "@dxos/react-ui-menu": "0.8.4-main.69d29f4",
+    "@dxos/react-ui-mosaic": "0.8.4-main.69d29f4",
+    "@dxos/ui": "0.8.4-main.69d29f4",
+    "@dxos/ui-editor": "0.8.4-main.69d29f4",
+    "@dxos/util": "0.8.4-main.69d29f4",
+    "@dxos/ui-theme": "0.8.4-main.69d29f4"
   },
   "devDependencies": {
-    "@automerge/automerge": "3.1.2",
-    "@automerge/automerge-repo": "2.4.0",
-    "@automerge/automerge-repo-network-broadcastchannel": "2.4.0",
-    "@effect-atom/atom-react": "^0.3.4",
-    "@effect/platform": "0.92.1",
+    "@automerge/automerge": "3.2.3",
+    "@automerge/automerge-repo": "2.5.1",
+    "@automerge/automerge-repo-network-broadcastchannel": "2.5.1",
+    "@effect-atom/atom-react": "^0.4.6",
+    "@effect/platform": "0.93.6",
     "@types/chai": "^4.2.15",
     "@types/chai-dom": "^1.11.0",
     "@types/lodash.defaultsdeep": "^4.6.6",
     "@types/lodash.merge": "^4.6.6",
     "@types/lodash.sortby": "^4.7.7",
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.2",
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
     "@types/react-test-renderer": "^17.0.2",
     "chai": "^4.4.1",
     "chai-dom": "^1.11.0",
-    "effect": "3.18.3",
+    "effect": "3.19.11",
     "happy-dom": "^13.3.1",
     "jsdom": "^27.0.0",
     "mocha": "^10.6.0",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
     "react-test-renderer": "~19.2.0",
     "vite": "7.1.9",
     "vite-plugin-top-level-await": "^1.6.0",
     "vite-plugin-wasm": "^3.5.0",
-    "@dxos/config": "0.8.4-main.66e292d",
-    "@dxos/echo": "0.8.4-main.66e292d",
-    "@dxos/echo-signals": "0.8.4-main.66e292d",
-    "@dxos/keyboard": "0.8.4-main.66e292d",
-    "@dxos/react-client": "0.8.4-main.66e292d",
-    "@dxos/react-ui": "0.8.4-main.66e292d",
-    "@dxos/random": "0.8.4-main.66e292d",
-    "@dxos/react-ui-attention": "0.8.4-main.66e292d",
-    "@dxos/react-ui-stack": "0.8.4-main.66e292d",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.66e292d",
-    "@dxos/react-ui-theme": "0.8.4-main.66e292d",
-    "@dxos/schema": "0.8.4-main.66e292d",
-    "@dxos/storybook-utils": "0.8.4-main.66e292d"
+    "@dxos/echo-atom": "0.8.4-main.69d29f4",
+    "@dxos/echo": "0.8.4-main.69d29f4",
+    "@dxos/keyboard": "0.8.4-main.69d29f4",
+    "@dxos/config": "0.8.4-main.69d29f4",
+    "@dxos/random": "0.8.4-main.69d29f4",
+    "@dxos/react-client": "0.8.4-main.69d29f4",
+    "@dxos/react-ui": "0.8.4-main.69d29f4",
+    "@dxos/react-ui-attention": "0.8.4-main.69d29f4",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.69d29f4",
+    "@dxos/schema": "0.8.4-main.69d29f4",
+    "@dxos/storybook-utils": "0.8.4-main.69d29f4",
+    "@dxos/ui-theme": "0.8.4-main.69d29f4",
+    "@dxos/ui-types": "0.8.4-main.69d29f4"
   },
   "peerDependencies": {
-    "@effect-atom/atom-react": "^0.3.4",
-    "@effect/platform": "^0.80.12",
-    "effect": "^3.13.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/react-client": "0.8.4-main.66e292d",
-    "@dxos/react-ui-theme": "0.8.4-main.66e292d",
-    "@dxos/react-ui": "0.8.4-main.66e292d"
+    "@effect-atom/atom-react": "^0.4.6",
+    "@effect/platform": "0.93.6",
+    "effect": "3.19.11",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.69d29f4",
+    "@dxos/ui-theme": "0.8.4-main.69d29f4",
+    "@dxos/react-client": "0.8.4-main.69d29f4"
   },
   "publishConfig": {
     "access": "public"

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

@@ -5,17 +5,20 @@
 import { type Decorator, type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
 
+import { createDocAccessor, createObject } from '@dxos/echo-db';
 import { faker } from '@dxos/random';
 import { useThemeContext } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { withAttention } from '@dxos/react-ui-attention/testing';
-
+import { Text } from '@dxos/schema';
 import {
+  automerge,
   createBasicExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
-} from '../../extensions';
+} from '@dxos/ui-editor';
+
 import { createMenuGroup } from '../EditorMenuProvider';
 
 import { Editor, type EditorContentProps } from './Editor';
@@ -28,30 +31,35 @@ faker.seed(1234);
 
 const initialValue = ['# Blue Monday', '', 'How does it **feel**?', ''].join('\n');
 
+const items = faker.helpers.multiple(faker.commerce.productName, { count: 10 }).sort();
+
 // TODO(burdon): Adapter other tests in react-ui-editor/stories to use this pattern.
-const withExtensions: Decorator = (Story, { args }) => {
+const withExtensions: Decorator<EditorContentProps> = (Story, { args }) => {
   const { themeMode } = useThemeContext();
   const extensions = useMemo(
     () => [
-      // Basic extensions.
       createBasicExtensions(),
       createThemeExtensions({ themeMode }),
       createMarkdownExtensions(),
       decorateMarkdown(),
+      automerge(createDocAccessor(createObject(Text.make(args.initialValue)), ['content'])),
     ],
     [themeMode],
   );
 
-  return <Story args={{ ...args, extensions, initialValue }} />;
+  return <Story args={{ ...args, extensions }} />;
 };
 
 const meta = {
   title: 'ui/react-ui-editor/Editor',
   component: Editor.Content,
-  decorators: [withExtensions, withTheme, withLayout({ container: 'column' }), withAttention],
+  decorators: [withExtensions, withTheme, withLayout({ layout: 'column' }), withAttention],
   parameters: {
     layout: 'fullscreen',
   },
+  args: {
+    initialValue,
+  },
 } satisfies Meta<typeof Editor.Content>;
 
 export default meta;
@@ -75,8 +83,6 @@ export const WithToolbar: Story = {
   ),
 };
 
-const items = faker.helpers.multiple(faker.commerce.productName, { count: 10 }).sort();
-
 export const WithPopover: Story = {
   render: (args) => (
     <Editor.Root trigger={['@']} getMenu={({ text }) => [createMenuGroup({ items, filter: text })]}>

package/src/components/Editor/Editor.tsx

@@ -8,7 +8,7 @@ import React, { type PropsWithChildren, forwardRef, useCallback, useImperativeHa
 
 import { invariant } from '@dxos/invariant';
 import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
 
 import {
@@ -41,14 +41,16 @@ const [EditorContextProvider, useEditorContext] = createContext<EditorContextVal
 // Root
 //
 
-type EditorRootProps = PropsWithChildren<Omit<UseEditorMenuProps, 'viewRef'> & Pick<EditorToolbarState, 'viewMode'>>;
+type EditorRootProps = PropsWithChildren<
+  Pick<EditorContextValue, 'extensions'> & Omit<UseEditorMenuProps, 'viewRef'> & Pick<EditorToolbarState, 'viewMode'>
+>;
 
 /**
  * Root component for the Editor compound component.
  * Provides context for all child components and manages the editor controller state.
  */
 const EditorRoot = forwardRef<EditorController | null, EditorRootProps>(
-  ({ children, viewMode, ...props }, forwardedRef) => {
+  ({ children, extensions: extensionsProp, viewMode, ...props }, forwardedRef) => {
     const state = useEditorToolbar({ viewMode });
 
     const [controller, setController] = useState<EditorController>();
@@ -56,7 +58,10 @@ const EditorRoot = forwardRef<EditorController | null, EditorRootProps>(
 
     // TODO(burdon): Consider lighter-weight approach if EditorMenuProvider is not needed.
     const { groupsRef, extension, ...menuProps } = useEditorMenu(props);
-    const extensions = useMemo(() => [extension], [extension]);
+    const extensions = useMemo(
+      () => [extension, extensionsProp].filter(isNonNullable).flat(),
+      [extension, extensionsProp],
+    );
 
     return (
       <EditorContextProvider

package/src/components/EditorContent/EditorContent.tsx

@@ -7,15 +7,16 @@ import { EditorView } from '@codemirror/view';
 import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { initialSync } from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
 
-import { initialSync } from '../../extensions';
 import { type UseTextEditorProps, useTextEditor } from '../../hooks';
 
 import { type EditorController, createEditorController } from './controller';
 
 export type EditorContentProps = ThemedClassName<
   {
+    focusable?: boolean;
     value?: string;
     onChange?: (value: string) => void;
   } & UseTextEditorProps
@@ -27,7 +28,7 @@ export type EditorContentProps = ThemedClassName<
  * @deprecated Use Editor.Content
  */
 export const EditorContent = forwardRef<EditorController, EditorContentProps>(
-  ({ classNames, id, extensions, selectionEnd, value, onChange, ...props }, forwardedRef) => {
+  ({ classNames, id, extensions, selectionEnd, focusable = true, value, onChange, ...props }, forwardedRef) => {
     const { parentRef, focusAttributes, view } = useTextEditor(
       () => ({
         id,
@@ -44,7 +45,7 @@ export const EditorContent = forwardRef<EditorController, EditorContentProps>(
         ],
         ...props,
       }),
-      [id, extensions, onChange, selectionEnd],
+      [id, extensions, selectionEnd, onChange],
     );
 
     // External controller.
@@ -61,10 +62,22 @@ export const EditorContent = forwardRef<EditorController, EditorContentProps>(
           selection: selectionEnd ? { anchor: view?.state.doc.length ?? 0 } : undefined,
         });
 
-        view?.focus();
+        if (selectionEnd) {
+          view?.focus();
+        }
       });
     }, [view, value, selectionEnd]);
 
-    return <div role='none' className={mx('is-full', classNames)} {...focusAttributes} ref={parentRef} />;
+    return (
+      <div
+        role='none'
+        className={mx(
+          'is-full outline-none focus:border-accentSurface focus-within:border-neutralFocusIndicator',
+          classNames,
+        )}
+        ref={parentRef}
+        {...(focusable ? focusAttributes : {})}
+      />
+    );
   },
 );

package/src/components/EditorMenuProvider/EditorMenuProvider.tsx

@@ -46,7 +46,7 @@ export const EditorMenuProvider = ({
   view,
   groups,
   currentItem,
-  open: openParam,
+  open: openProp,
   defaultOpen,
   numItems = 8,
   onOpenChange,
@@ -59,7 +59,7 @@ export const EditorMenuProvider = ({
 
   const viewRef = useDynamicRef(view);
   const [open, setOpen] = useControllableState({
-    prop: openParam,
+    prop: openProp,
     defaultProp: defaultOpen,
     onChange: (open) => {
       invariant(viewRef.current);

package/src/components/EditorMenuProvider/index.ts

@@ -5,7 +5,6 @@
 export * from './menu';
 export * from './menu-presets';
 export * from './popover';
-export * from './util';
 
 export * from './EditorMenuProvider';
 export * from './useEditorMenu';

package/src/components/EditorMenuProvider/menu-presets.ts

@@ -2,9 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
+import { insertAtLineStart } from '@dxos/ui-editor';
+
 import { type EditorMenuGroup } from './menu';
 import { popoverRangeEffect } from './popover';
-import { insertAtLineStart } from './util';
 
 export const formattingCommands: EditorMenuGroup = {
   id: 'markdown',

package/src/components/EditorMenuProvider/menu.ts

@@ -5,10 +5,9 @@
 import { type EditorView } from '@codemirror/view';
 
 import { type Label } from '@dxos/react-ui';
+import { insertAtCursor } from '@dxos/ui-editor';
 import { type MaybePromise } from '@dxos/util';
 
-import { insertAtCursor } from './util';
-
 export type EditorMenuGroup = {
   id: string;
   label?: Label;

package/src/components/EditorMenuProvider/popover.ts

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

package/src/components/EditorMenuProvider/useEditorMenu.ts

@@ -7,10 +7,9 @@ import { type EditorState } from '@codemirror/state';
 import { type RefObject, useCallback, useMemo, useRef, useState } from 'react';
 
 import { invariant } from '@dxos/invariant';
+import { modalStateEffect } from '@dxos/ui-editor';
 import { type MaybePromise } from '@dxos/util';
 
-import { modalStateEffect } from '../../extensions';
-
 import { type EditorMenuProviderProps } from './EditorMenuProvider';
 import { type EditorMenuGroup, type EditorMenuItem } from './menu';
 import { filterMenuGroups, getMenuItem, getNextMenuItem, getPreviousMenuItem } from './menu';
@@ -74,7 +73,6 @@ export const useEditorMenu = ({
 
   const handleOpenChange = useCallback<NonNullable<UseEditorMenu['onOpenChange']>>(
     async ({ view, open }) => {
-      console.log(view, open);
       invariant(view);
       setOpen(open);
       if (!open) {

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;

package/src/components/EditorToolbar/EditorToolbar.tsx

@@ -6,18 +6,17 @@ 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,
+  type MenuAction,
   MenuProvider,
   ToolbarMenu,
   createGapSeparator,
   useMenuActions,
 } from '@dxos/react-ui-menu';
-
-import { type EditorViewMode } from '../../types';
+import { type EditorViewMode } from '@dxos/ui-editor';
 
 import { createLists } from './actions';
 import { createBlocks } from './blocks';
@@ -41,7 +40,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,16 +50,18 @@ 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}>
+      <MenuProvider {...menuProps} attendableId={attendableId} onAction={onAction}>
         <ToolbarMenu classNames={classNames} textBlockWidth />
       </MenuProvider>
     </ElevationProvider>
@@ -111,20 +112,23 @@ const createToolbarActions = ({
       graph.edges.push(...subGraph.edges);
     };
 
+    // Subscribe to state changes.
+    const stateSnapshot = get(state);
+
     if (features?.showHeadings ?? true) {
-      addSubGraph(graph, get(atomFromSignal(() => createHeadings(state, getView))));
+      addSubGraph(graph, createHeadings(stateSnapshot, getView));
     }
     if (features?.showFormatting ?? true) {
-      addSubGraph(graph, get(atomFromSignal(() => createFormatting(state, getView))));
+      addSubGraph(graph, createFormatting(stateSnapshot, getView));
     }
     if (features?.showLists ?? true) {
-      addSubGraph(graph, get(atomFromSignal(() => createLists(state, getView))));
+      addSubGraph(graph, createLists(stateSnapshot, getView));
     }
     if (features?.showBlocks ?? true) {
-      addSubGraph(graph, get(atomFromSignal(() => createBlocks(state, getView))));
+      addSubGraph(graph, createBlocks(stateSnapshot, getView));
     }
     if (features?.onImageUpload) {
-      addSubGraph(graph, get(atomFromSignal(() => createImageUpload(features.onImageUpload!))));
+      addSubGraph(graph, createImageUpload(features.onImageUpload!));
     }
 
     addSubGraph(graph, createGapSeparator());
@@ -133,10 +137,10 @@ const createToolbarActions = ({
       addSubGraph(graph, get(customActions));
     }
     if (features?.showSearch ?? true) {
-      addSubGraph(graph, get(atomFromSignal(() => createSearch(getView))));
+      addSubGraph(graph, createSearch(getView));
     }
     if (features?.onViewModeChange) {
-      addSubGraph(graph, get(atomFromSignal(() => createViewMode(state, features.onViewModeChange!))));
+      addSubGraph(graph, createViewMode(stateSnapshot, features.onViewModeChange!));
     }
 
     return graph;

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,7 +29,7 @@ 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 })),
@@ -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,7 +50,7 @@ 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 })),