@dxos/react-ui-editor 0.8.4-main.3f58842 → 0.8.4-main.548089c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.8.4-main.3f58842",
+  "version": "0.8.4-main.548089c",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,16 +10,19 @@
   "type": "module",
   "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"
     },
     "./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"
     },
     "./testing": {
+      "source": "./src/testing/index.ts",
       "types": "./dist/types/src/testing/index.d.ts",
       "browser": "./dist/lib/browser/testing/index.mjs",
       "node": "./dist/lib/node-esm/testing/index.mjs"
@@ -34,29 +37,34 @@
     "src"
   ],
   "dependencies": {
-    "@automerge/automerge": "3.0.0",
-    "@codemirror/autocomplete": "^6.18.1",
-    "@codemirror/commands": "^6.6.2",
-    "@codemirror/lang-javascript": "^6.2.2",
-    "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/lang-markdown": "^6.3.0",
-    "@codemirror/language": "^6.10.3",
+    "@automerge/automerge": "3.1.2",
+    "@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-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.2",
-    "@codemirror/search": "^6.5.6",
-    "@codemirror/state": "^6.4.1",
-    "@codemirror/theme-one-dark": "^6.1.2",
-    "@codemirror/view": "^6.34.1",
+    "@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",
     "@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.2.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",
     "codemirror": "^6.0.1",
     "lib0": "^0.2.65",
@@ -64,70 +72,73 @@
     "lodash.merge": "^4.6.2",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/app-graph": "0.8.4-main.3f58842",
-    "@dxos/async": "0.8.4-main.3f58842",
-    "@dxos/debug": "0.8.4-main.3f58842",
-    "@dxos/context": "0.8.4-main.3f58842",
-    "@dxos/display-name": "0.8.4-main.3f58842",
-    "@dxos/echo-schema": "0.8.4-main.3f58842",
-    "@dxos/invariant": "0.8.4-main.3f58842",
-    "@dxos/lit-ui": "0.8.4-main.3f58842",
-    "@dxos/live-object": "0.8.4-main.3f58842",
-    "@dxos/log": "0.8.4-main.3f58842",
-    "@dxos/react-hooks": "0.8.4-main.3f58842",
-    "@dxos/protocols": "0.8.4-main.3f58842",
-    "@dxos/react-ui-menu": "0.8.4-main.3f58842",
-    "@dxos/react-ui-stack": "0.8.4-main.3f58842",
-    "@dxos/util": "0.8.4-main.3f58842"
+    "@dxos/app-graph": "0.8.4-main.548089c",
+    "@dxos/client": "0.8.4-main.548089c",
+    "@dxos/async": "0.8.4-main.548089c",
+    "@dxos/context": "0.8.4-main.548089c",
+    "@dxos/display-name": "0.8.4-main.548089c",
+    "@dxos/echo": "0.8.4-main.548089c",
+    "@dxos/invariant": "0.8.4-main.548089c",
+    "@dxos/debug": "0.8.4-main.548089c",
+    "@dxos/live-object": "0.8.4-main.548089c",
+    "@dxos/log": "0.8.4-main.548089c",
+    "@dxos/lit-ui": "0.8.4-main.548089c",
+    "@dxos/protocols": "0.8.4-main.548089c",
+    "@dxos/react-hooks": "0.8.4-main.548089c",
+    "@dxos/react-ui-menu": "0.8.4-main.548089c",
+    "@dxos/react-ui-stack": "0.8.4-main.548089c",
+    "@dxos/util": "0.8.4-main.548089c",
+    "@dxos/react-ui-types": "0.8.4-main.548089c"
   },
   "devDependencies": {
-    "@automerge/automerge": "3.0.0",
-    "@automerge/automerge-repo": "2.0.8",
-    "@automerge/automerge-repo-network-broadcastchannel": "2.0.8",
-    "@effect-rx/rx-react": "0.38.0",
-    "@effect/platform": "0.89.0",
+    "@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",
     "@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": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
     "@types/react-test-renderer": "^17.0.2",
     "chai": "^4.4.1",
     "chai-dom": "^1.11.0",
-    "effect": "3.17.0",
+    "effect": "3.18.3",
     "happy-dom": "^13.3.1",
-    "jsdom": "^24.0.0",
+    "jsdom": "^27.0.0",
     "mocha": "^10.6.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "react-test-renderer": "~18.2.0",
-    "vite": "5.4.7",
-    "vite-plugin-top-level-await": "^1.4.1",
-    "vite-plugin-wasm": "^3.3.0",
-    "@dxos/config": "0.8.4-main.3f58842",
-    "@dxos/echo": "0.8.4-main.3f58842",
-    "@dxos/echo-signals": "0.8.4-main.3f58842",
-    "@dxos/keyboard": "0.8.4-main.3f58842",
-    "@dxos/random": "0.8.4-main.3f58842",
-    "@dxos/react-client": "0.8.4-main.3f58842",
-    "@dxos/react-ui": "0.8.4-main.3f58842",
-    "@dxos/react-ui-attention": "0.8.4-main.3f58842",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.3f58842",
-    "@dxos/schema": "0.8.4-main.3f58842",
-    "@dxos/react-ui-theme": "0.8.4-main.3f58842",
-    "@dxos/storybook-utils": "0.8.4-main.3f58842"
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "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.548089c",
+    "@dxos/echo": "0.8.4-main.548089c",
+    "@dxos/echo-signals": "0.8.4-main.548089c",
+    "@dxos/react-client": "0.8.4-main.548089c",
+    "@dxos/random": "0.8.4-main.548089c",
+    "@dxos/keyboard": "0.8.4-main.548089c",
+    "@dxos/react-ui": "0.8.4-main.548089c",
+    "@dxos/react-ui-attention": "0.8.4-main.548089c",
+    "@dxos/react-ui-stack": "0.8.4-main.548089c",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.548089c",
+    "@dxos/react-ui-theme": "0.8.4-main.548089c",
+    "@dxos/schema": "0.8.4-main.548089c",
+    "@dxos/storybook-utils": "0.8.4-main.548089c"
   },
   "peerDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
+    "@effect-atom/atom-react": "^0.3.4",
     "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-client": "0.8.4-main.3f58842",
-    "@dxos/react-ui": "0.8.4-main.3f58842",
-    "@dxos/react-ui-theme": "0.8.4-main.3f58842"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-client": "0.8.4-main.548089c",
+    "@dxos/react-ui-theme": "0.8.4-main.548089c",
+    "@dxos/react-ui": "0.8.4-main.548089c"
   },
   "publishConfig": {
     "access": "public"

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

@@ -0,0 +1,69 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import { useMemo } from 'react';
+
+import { createDocAccessor, createObject } from '@dxos/client/echo';
+import { useThemeContext } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { Text } from '@dxos/schema';
+
+import { automerge, createBasicExtensions, createThemeExtensions } from '../../extensions';
+import { Editor } from '../Editor';
+
+const meta = {
+  title: 'ui/react-ui-editor/Editor',
+  component: Editor,
+  decorators: [withTheme, withLayout({ container: 'column' })],
+} satisfies Meta<typeof Editor>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => {
+    const { themeMode } = useThemeContext();
+    const extensions = useMemo(
+      () => [
+        // Basic extensions.
+        createBasicExtensions(),
+        createThemeExtensions({ themeMode }),
+      ],
+      [],
+    );
+
+    return <Editor classNames='p-2' {...args} extensions={extensions} />;
+  },
+  args: {
+    moveToEnd: true,
+    value: 'Hello world!',
+    onChange: (value) => console.log(value),
+  },
+};
+
+export const Automerge: Story = {
+  render: ({ value, ...props }) => {
+    const { themeMode } = useThemeContext();
+    const extensions = useMemo(
+      () => [
+        // Basic extensions.
+        createBasicExtensions(),
+        createThemeExtensions({ themeMode }),
+        automerge(createDocAccessor(createObject(Text.make(value)), ['content'])),
+      ],
+      [],
+    );
+
+    // TODO(burdon): Remove the need for initialValue.
+    return <Editor classNames='p-2' {...props} initialValue={value} extensions={extensions} />;
+  },
+  args: {
+    moveToEnd: true,
+    value: 'Hello world!',
+    onChange: (value) => console.log(value),
+  },
+};

package/src/components/Editor/Editor.tsx

@@ -2,38 +2,81 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type EditorView } from '@codemirror/view';
-import React, { forwardRef, useImperativeHandle } from 'react';
+import { Transaction } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
 
-import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
+import { type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
-import { type DataType } from '@dxos/schema';
 
-import { useTextEditor, type UseTextEditorProps } from '../../hooks';
+import { initialSync } from '../../extensions';
+import { type UseTextEditorProps, useTextEditor } from '../../hooks';
+
+// TODO(burdon): Convert to radix-style (support hooks inside).
+// <Editor.Root>
+//   <Editor.Toolbar />
+//   <Editor.TextEditor />
+// </Editor.Root>
+
+export type EditorController = {
+  view: EditorView | null;
+  focus: () => void;
+};
 
 export type EditorProps = ThemedClassName<
   {
-    id: string;
-    text: DataType.Text;
-  } & Omit<UseTextEditorProps, 'id'>
+    moveToEnd?: boolean;
+    value?: string;
+    onChange?: (value: string) => void;
+  } & UseTextEditorProps
 >;
 
 /**
  * Minimal text editor.
+ * NOTE: This shouold not be used with the automerge extension.
  */
-export const Editor = forwardRef<EditorView | undefined, EditorProps>(
-  ({ classNames, id, text, ...props }, forwardedRef) => {
-    const { themeMode } = useThemeContext();
+export const Editor = forwardRef<EditorController, EditorProps>(
+  ({ classNames, id, extensions, moveToEnd, value, onChange, ...props }, forwardedRef) => {
     const { parentRef, focusAttributes, view } = useTextEditor(
       () => ({
         id,
-        initialValue: text.content,
+        initialValue: value,
+        extensions: [
+          extensions ?? [],
+          EditorView.updateListener.of(({ view, docChanged, transactions }) => {
+            const isInitialSync = transactions.some((tr) => tr.annotation(Transaction.userEvent) === initialSync.value);
+            if (!isInitialSync && docChanged) {
+              onChange?.(view.state.doc.toString());
+            }
+          }),
+        ],
         ...props,
       }),
-      [id, text, themeMode],
+      [id, extensions, onChange],
     );
 
-    useImperativeHandle(forwardedRef, () => view, [view]);
-    return <div ref={parentRef} className={mx(classNames)} {...focusAttributes} />;
+    // External controller.
+    useImperativeHandle(
+      forwardedRef,
+      () => ({
+        view,
+        focus: () => view?.focus(),
+      }),
+      [view],
+    );
+
+    // Set initial value and cursor position.
+    useEffect(() => {
+      requestAnimationFrame(() => {
+        view?.dispatch({
+          annotations: initialSync,
+          changes: value ? [{ from: 0, to: view?.state.doc.length ?? 0, insert: value ?? '' }] : [],
+          selection: moveToEnd ? { anchor: view?.state.doc.length ?? 0 } : undefined,
+        });
+        view?.focus();
+      });
+    }, [view, value, moveToEnd]);
+
+    return <div role='none' className={mx('is-full', classNames)} {...focusAttributes} ref={parentRef} />;
   },
 );

package/src/components/EditorToolbar/EditorToolbar.tsx

@@ -2,12 +2,20 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
+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 { rxFromSignal } from '@dxos/app-graph';
+import { ElevationProvider, type ThemedClassName } from '@dxos/react-ui';
+import {
+  type ActionGraphProps,
+  MenuProvider,
+  ToolbarMenu,
+  createGapSeparator,
+  useMenuActions,
+} from '@dxos/react-ui-menu';
+
+import { type EditorViewMode } from '../../types';
 
 import { createBlocks } from './blocks';
 import { createFormatting } from './formatting';
@@ -15,110 +23,113 @@ 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 EditorToolbarActionGraphProps } from './util';
 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 EditorToolbarProps = ThemedClassName<
+  {
+    role?: string;
+    attendableId?: string;
+  } & (EditorToolbarActionGraphProps & EditorToolbarFeatureFlags)
+>;
+
+// TODO(burdon): Remove role dependency.
+export const EditorToolbar = memo(({ classNames, role, attendableId, ...props }: EditorToolbarProps) => {
+  const menuProps = useEditorToolbarActionGraph(props);
+
+  return (
+    <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
+      <MenuProvider {...menuProps} attendableId={attendableId}>
+        <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);
+    };
+
+    if (features?.showHeadings ?? true) {
+      addSubGraph(graph, get(rxFromSignal(() => createHeadings(state, 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, get(rxFromSignal(() => createFormatting(state, 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, get(rxFromSignal(() => createLists(state, 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, get(rxFromSignal(() => createBlocks(state, getView))));
     }
-    if (features.image) {
-      const image = get(rxFromSignal(() => createImageUpload(features.image!)));
-      nodes.push(...image.nodes);
-      edges.push(...image.edges);
+    if (features?.onImageUpload) {
+      addSubGraph(graph, get(rxFromSignal(() => 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, get(rxFromSignal(() => 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, get(rxFromSignal(() => createViewMode(state, 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/blocks.ts

@@ -7,8 +7,9 @@ import { type EditorView } from '@codemirror/view';
 import { type NodeArg } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 
-import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
-import { removeBlockquote, addBlockquote, removeCodeblock, addCodeblock, insertTable } from '../../extensions';
+import { addBlockquote, addCodeblock, insertTable, removeBlockquote, removeCodeblock } from '../../extensions';
+
+import { type EditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
 
 const createBlockGroupAction = (value: string) =>
   createEditorActionGroup('block', {
@@ -24,28 +25,24 @@ 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;
-        }
-
-        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 },
-    );
+    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;
+      }
+    });
   });
 
 export const createBlocks = (state: EditorToolbarState, getView: () => EditorView) => {