@dxos/react-ui-editor 0.8.4-main.b97322e → 0.8.4-main.dedc0f3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.8.4-main.b97322e",
+  "version": "0.8.4-main.dedc0f3",
   "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,19 +37,20 @@
     "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.1",
+    "@codemirror/autocomplete": "^6.18.7",
+    "@codemirror/commands": "^6.8.1",
+    "@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/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.2",
     "@fluentui/react-tabster": "^9.24.2",
     "@lezer/common": "^1.2.2",
     "@lezer/generator": "^1.7.1",
@@ -64,28 +68,29 @@
     "lodash.merge": "^4.6.2",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/app-graph": "0.8.4-main.b97322e",
-    "@dxos/context": "0.8.4-main.b97322e",
-    "@dxos/async": "0.8.4-main.b97322e",
-    "@dxos/debug": "0.8.4-main.b97322e",
-    "@dxos/display-name": "0.8.4-main.b97322e",
-    "@dxos/invariant": "0.8.4-main.b97322e",
-    "@dxos/echo-schema": "0.8.4-main.b97322e",
-    "@dxos/live-object": "0.8.4-main.b97322e",
-    "@dxos/lit-ui": "0.8.4-main.b97322e",
-    "@dxos/log": "0.8.4-main.b97322e",
-    "@dxos/protocols": "0.8.4-main.b97322e",
-    "@dxos/react-hooks": "0.8.4-main.b97322e",
-    "@dxos/react-ui-menu": "0.8.4-main.b97322e",
-    "@dxos/react-ui-stack": "0.8.4-main.b97322e",
-    "@dxos/util": "0.8.4-main.b97322e"
+    "@dxos/app-graph": "0.8.4-main.dedc0f3",
+    "@dxos/async": "0.8.4-main.dedc0f3",
+    "@dxos/context": "0.8.4-main.dedc0f3",
+    "@dxos/display-name": "0.8.4-main.dedc0f3",
+    "@dxos/echo-schema": "0.8.4-main.dedc0f3",
+    "@dxos/invariant": "0.8.4-main.dedc0f3",
+    "@dxos/debug": "0.8.4-main.dedc0f3",
+    "@dxos/lit-ui": "0.8.4-main.dedc0f3",
+    "@dxos/live-object": "0.8.4-main.dedc0f3",
+    "@dxos/log": "0.8.4-main.dedc0f3",
+    "@dxos/protocols": "0.8.4-main.dedc0f3",
+    "@dxos/react-hooks": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-stack": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-menu": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-types": "0.8.4-main.dedc0f3",
+    "@dxos/util": "0.8.4-main.dedc0f3"
   },
   "devDependencies": {
-    "@automerge/automerge": "3.0.0",
-    "@automerge/automerge-repo": "2.0.8",
-    "@automerge/automerge-repo-network-broadcastchannel": "2.0.8",
+    "@automerge/automerge": "3.1.1",
+    "@automerge/automerge-repo": "2.3.0-alpha.0",
+    "@automerge/automerge-repo-network-broadcastchannel": "2.3.0-alpha.0",
     "@effect-rx/rx-react": "0.38.0",
-    "@effect/platform": "0.89.0",
+    "@effect/platform": "0.90.2",
     "@types/chai": "^4.2.15",
     "@types/chai-dom": "^1.11.0",
     "@types/lodash.defaultsdeep": "^4.6.6",
@@ -96,28 +101,29 @@
     "@types/react-test-renderer": "^17.0.2",
     "chai": "^4.4.1",
     "chai-dom": "^1.11.0",
-    "effect": "3.17.0",
+    "effect": "3.17.7",
     "happy-dom": "^13.3.1",
     "jsdom": "^24.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.b97322e",
-    "@dxos/echo": "0.8.4-main.b97322e",
-    "@dxos/echo-signals": "0.8.4-main.b97322e",
-    "@dxos/keyboard": "0.8.4-main.b97322e",
-    "@dxos/random": "0.8.4-main.b97322e",
-    "@dxos/react-client": "0.8.4-main.b97322e",
-    "@dxos/react-ui": "0.8.4-main.b97322e",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.b97322e",
-    "@dxos/schema": "0.8.4-main.b97322e",
-    "@dxos/react-ui-attention": "0.8.4-main.b97322e",
-    "@dxos/storybook-utils": "0.8.4-main.b97322e",
-    "@dxos/react-ui-theme": "0.8.4-main.b97322e"
+    "vite": "7.1.1",
+    "vite-plugin-top-level-await": "^1.6.0",
+    "vite-plugin-wasm": "^3.5.0",
+    "@dxos/config": "0.8.4-main.dedc0f3",
+    "@dxos/echo": "0.8.4-main.dedc0f3",
+    "@dxos/echo-signals": "0.8.4-main.dedc0f3",
+    "@dxos/keyboard": "0.8.4-main.dedc0f3",
+    "@dxos/random": "0.8.4-main.dedc0f3",
+    "@dxos/react-client": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-stack": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-theme": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-attention": "0.8.4-main.dedc0f3",
+    "@dxos/schema": "0.8.4-main.dedc0f3",
+    "@dxos/storybook-utils": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.dedc0f3"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
@@ -125,9 +131,9 @@
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-client": "0.8.4-main.b97322e",
-    "@dxos/react-ui": "0.8.4-main.b97322e",
-    "@dxos/react-ui-theme": "0.8.4-main.b97322e"
+    "@dxos/react-client": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-theme": "0.8.4-main.dedc0f3"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Editor/Editor.tsx

@@ -9,7 +9,7 @@ import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 import { type DataType } from '@dxos/schema';
 
-import { useTextEditor, type UseTextEditorProps } from '../../hooks';
+import { type UseTextEditorProps, useTextEditor } from '../../hooks';
 
 export type EditorProps = ThemedClassName<
   {

package/src/components/EditorToolbar/EditorToolbar.tsx

@@ -5,9 +5,15 @@
 import { Rx } from '@effect-rx/rx-react';
 import React, { memo, useMemo } from 'react';
 
-import { rxFromSignal, type NodeArg } from '@dxos/app-graph';
+import { rxFromSignal } from '@dxos/app-graph';
 import { ElevationProvider } from '@dxos/react-ui';
-import { MenuProvider, ToolbarMenu, createGapSeparator, useMenuActions } from '@dxos/react-ui-menu';
+import {
+  type ActionGraphProps,
+  MenuProvider,
+  ToolbarMenu,
+  createGapSeparator,
+  useMenuActions,
+} from '@dxos/react-ui-menu';
 
 import { createBlocks } from './blocks';
 import { createFormatting } from './formatting';
@@ -18,62 +24,66 @@ import { createSearch } from './search';
 import { type EditorToolbarActionGraphProps, type EditorToolbarFeatureFlags, type EditorToolbarProps } from './util';
 import { createViewMode } from './view-mode';
 
-const createToolbar = ({
+const createToolbarActions = ({
   getView,
   state,
   customActions,
   ...features
-}: EditorToolbarFeatureFlags & Pick<EditorToolbarActionGraphProps, 'getView' | 'state' | 'customActions'>): Rx.Rx<{
-  nodes: NodeArg<any>[];
-  edges: { source: string; target: string }[];
-}> => {
+}: EditorToolbarFeatureFlags &
+  Pick<EditorToolbarActionGraphProps, 'getView' | 'state' | 'customActions'>): Rx.Rx<ActionGraphProps> => {
   return Rx.make((get) => {
-    const nodes = [];
-    const edges = [];
+    const graph: ActionGraphProps = {
+      nodes: [],
+      edges: [],
+    };
+
     if (features.headings ?? true) {
       const headings = get(rxFromSignal(() => createHeadings(state, getView)));
-      nodes.push(...headings.nodes);
-      edges.push(...headings.edges);
+      graph.nodes.push(...headings.nodes);
+      graph.edges.push(...headings.edges);
     }
     if (features.formatting ?? true) {
       const formatting = get(rxFromSignal(() => createFormatting(state, getView)));
-      nodes.push(...formatting.nodes);
-      edges.push(...formatting.edges);
+      graph.nodes.push(...formatting.nodes);
+      graph.edges.push(...formatting.edges);
     }
     if (features.lists ?? true) {
       const lists = get(rxFromSignal(() => createLists(state, getView)));
-      nodes.push(...lists.nodes);
-      edges.push(...lists.edges);
+      graph.nodes.push(...lists.nodes);
+      graph.edges.push(...lists.edges);
     }
     if (features.blocks ?? true) {
       const blocks = get(rxFromSignal(() => createBlocks(state, getView)));
-      nodes.push(...blocks.nodes);
-      edges.push(...blocks.edges);
+      graph.nodes.push(...blocks.nodes);
+      graph.edges.push(...blocks.edges);
     }
     if (features.image) {
       const image = get(rxFromSignal(() => createImageUpload(features.image!)));
-      nodes.push(...image.nodes);
-      edges.push(...image.edges);
+      graph.nodes.push(...image.nodes);
+      graph.edges.push(...image.edges);
+    }
+    {
+      const gap = createGapSeparator();
+      graph.nodes.push(...gap.nodes);
+      graph.edges.push(...gap.edges);
     }
-    const editorToolbarGap = createGapSeparator();
-    nodes.push(...editorToolbarGap.nodes);
-    edges.push(...editorToolbarGap.edges);
     if (customActions) {
       const custom = get(customActions);
-      nodes.push(...custom.nodes);
-      edges.push(...custom.edges);
+      graph.nodes.push(...custom.nodes);
+      graph.edges.push(...custom.edges);
     }
     if (features.search ?? true) {
       const search = get(rxFromSignal(() => createSearch(getView)));
-      nodes.push(...search.nodes);
-      edges.push(...search.edges);
+      graph.nodes.push(...search.nodes);
+      graph.edges.push(...search.edges);
     }
     if (features.viewMode) {
       const viewMode = get(rxFromSignal(() => createViewMode(state, features.viewMode!)));
-      nodes.push(...viewMode.nodes);
-      edges.push(...viewMode.edges);
+      graph.nodes.push(...viewMode.nodes);
+      graph.edges.push(...viewMode.edges);
     }
-    return { nodes, edges };
+
+    return graph;
   });
 };
 
@@ -83,7 +93,7 @@ const createToolbar = ({
 const useEditorToolbarActionGraph = (props: EditorToolbarProps) => {
   const menuCreator = useMemo(
     () =>
-      createToolbar({
+      createToolbarActions({
         getView: props.getView,
         state: props.state,
         customActions: props.customActions,

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) => {

package/src/components/EditorToolbar/formatting.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 { addLink, Inline, removeLink, setStyle, type Formatting } from '../../extensions';
+import { type Formatting, Inline, addLink, removeLink, setStyle } from '../../extensions';
+
+import { type EditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
 
 const formats = {
   strong: 'ph--text-b--regular',
@@ -28,31 +29,27 @@ const createFormattingGroup = (formatting: Formatting) =>
 const createFormattingActions = (formatting: Formatting, getView: () => EditorView) =>
   Object.entries(formats).map(([type, icon]) => {
     const checked = !!formatting[type as keyof Formatting];
-    return createEditorAction(
-      type,
-      () => {
-        const view = getView();
-        if (!view) {
-          return;
-        }
+    return createEditorAction(type, { 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);
-      },
-      { checked, icon },
-    );
+      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) => {

package/src/components/EditorToolbar/headings.ts

@@ -7,10 +7,11 @@ 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 { setHeading } from '../../extensions';
 import { translationKey } from '../../translations';
 
+import { type EditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
+
 const createHeadingGroupAction = (value: string) =>
   createEditorActionGroup(
     'heading',
@@ -34,10 +35,14 @@ const createHeadingActions = (getView: () => EditorView) =>
     '6': 'ph--text-h-six--regular',
   }).map(([levelStr, icon]) => {
     const level = parseInt(levelStr);
-    return createEditorAction(`heading--${levelStr}`, () => setHeading(level)(getView()), {
-      label: ['heading level label', { count: level, ns: translationKey }],
-      icon,
-    });
+    return createEditorAction(
+      `heading--${levelStr}`,
+      {
+        label: ['heading level label', { count: level, ns: translationKey }],
+        icon,
+      },
+      () => setHeading(level)(getView()),
+    );
   });
 
 const computeHeadingValue = (state: EditorToolbarState) => {

package/src/components/EditorToolbar/image.ts

@@ -5,10 +5,14 @@
 import { createEditorAction } from './util';
 
 const createImageUploadAction = (onImageUpload: () => void) =>
-  createEditorAction('image', onImageUpload, {
-    testId: 'editor.toolbar.image',
-    icon: 'ph--image-square--regular',
-  });
+  createEditorAction(
+    'image',
+    {
+      testId: 'editor.toolbar.image',
+      icon: 'ph--image-square--regular',
+    },
+    onImageUpload,
+  );
 
 export const createImageUpload = (onImageUpload: () => void) => ({
   nodes: [createImageUploadAction(onImageUpload)],

package/src/components/EditorToolbar/lists.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 { addList, List, removeList } from '../../extensions';
+import { List, addList, removeList } from '../../extensions';
+
+import { type EditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
 
 const listStyles = {
   bullet: 'ph--list-bullets--regular',
@@ -26,23 +27,19 @@ const createListGroupAction = (value: string) =>
 const createListActions = (value: string, getView: () => EditorView) =>
   Object.entries(listStyles).map(([listStyle, icon]) => {
     const checked = value === listStyle;
-    return createEditorAction(
-      `list-${listStyle}`,
-      () => {
-        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);
-        }
-      },
-      { checked, icon },
-    );
+    return createEditorAction(`list-${listStyle}`, { checked, icon }, () => {
+      const view = getView();
+      if (!view) {
+        return;
+      }
+
+      const listType = listStyle === 'ordered' ? List.Ordered : listStyle === 'bullet' ? List.Bullet : List.Task;
+      if (checked) {
+        removeList(listType)(view);
+      } else {
+        addList(listType)(view);
+      }
+    });
   });
 
 export const createLists = (state: EditorToolbarState, getView: () => EditorView) => {

package/src/components/EditorToolbar/search.ts

@@ -8,10 +8,14 @@ import { type EditorView } from '@codemirror/view';
 import { createEditorAction } from './util';
 
 const createSearchAction = (getView: () => EditorView) =>
-  createEditorAction('search', () => openSearchPanel(getView()), {
-    testId: 'editor.toolbar.search',
-    icon: 'ph--magnifying-glass--regular',
-  });
+  createEditorAction(
+    'search',
+    {
+      testId: 'editor.toolbar.search',
+      icon: 'ph--magnifying-glass--regular',
+    },
+    () => openSearchPanel(getView()),
+  );
 
 export const createSearch = (getView: () => EditorView) => ({
   nodes: [createSearchAction(getView)],

package/src/components/EditorToolbar/util.ts

@@ -7,7 +7,7 @@ import { type Rx } from '@effect-rx/rx-react';
 import { useMemo } from 'react';
 
 import { type Action } from '@dxos/app-graph';
-import { live, type Live } from '@dxos/live-object';
+import { type Live, live } from '@dxos/live-object';
 import { type ThemedClassName } from '@dxos/react-ui';
 import {
   type ActionGraphProps,
@@ -53,13 +53,24 @@ export type EditorToolbarProps = ThemedClassName<
 
 export type EditorToolbarItem = EditorAction | MenuItemGroup | MenuSeparator;
 
-export const createEditorAction = (id: string, invoke: () => void, properties: Partial<MenuActionProperties>) => {
-  const { label = [`${id} label`, { ns: translationKey }], ...rest } = properties;
-  return createMenuAction(id, invoke, { label, ...rest }) as Action<MenuActionProperties>;
+export const createEditorAction = (id: string, props: Partial<MenuActionProperties>, invoke: () => void) => {
+  const { label = [`${id} label`, { ns: translationKey }], ...rest } = props;
+  return createMenuAction(id, invoke, {
+    label,
+    ...rest,
+  }) as Action<MenuActionProperties>;
 };
 
 export const createEditorActionGroup = (
   id: string,
   props: Omit<ToolbarMenuActionGroupProperties, 'icon'>,
   icon?: string,
-) => createMenuItemGroup(id, { icon, iconOnly: true, ...props });
+) => {
+  const { label = [`${id} label`, { ns: translationKey }], ...rest } = props;
+  return createMenuItemGroup(id, {
+    label,
+    icon,
+    iconOnly: true,
+    ...rest,
+  });
+};

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

@@ -5,10 +5,11 @@
 import { type NodeArg } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 
-import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
 import { translationKey } from '../../translations';
 import { type EditorViewMode } from '../../types';
 
+import { type EditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
+
 const createViewModeGroupAction = (value: string) =>
   createEditorActionGroup(
     'viewMode',
@@ -28,11 +29,15 @@ const createViewModeActions = (value: string, onViewModeChange: (mode: EditorVie
     readonly: 'ph--pencil-slash--regular',
   }).map(([viewMode, icon]) => {
     const checked = viewMode === value;
-    return createEditorAction(`view-mode--${viewMode}`, () => onViewModeChange(viewMode as EditorViewMode), {
-      label: [`${viewMode} mode label`, { ns: translationKey }],
-      checked,
-      icon,
-    });
+    return createEditorAction(
+      `view-mode--${viewMode}`,
+      {
+        label: [`${viewMode} mode label`, { ns: translationKey }],
+        checked,
+        icon,
+      },
+      () => onViewModeChange(viewMode as EditorViewMode),
+    );
   });
 
 export const createViewMode = (state: EditorToolbarState, onViewModeChange: (mode: EditorViewMode) => void) => {

package/src/components/Popover/CommandMenu.tsx

@@ -3,7 +3,7 @@
 //
 
 import { type EditorView } from '@codemirror/view';
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { Fragment, useCallback, useEffect, useRef } from 'react';
 
 import { Icon, type Label, Popover, toLocalizedString, useThemeContext, useTranslation } from '@dxos/react-ui';
 import { type MaybePromise } from '@dxos/util';
@@ -45,10 +45,10 @@ export const CommandMenu = ({ groups, currentItem, onSelect }: CommandMenuProps)
         <Popover.Viewport classNames={tx('menu.viewport', 'menu__viewport--exotic-unfocusable', {})}>
           <ul>
             {groupsWithItems.map((group, index) => (
-              <React.Fragment key={group.id}>
+              <Fragment key={group.id}>
                 <CommandGroup group={group} currentItem={currentItem} onSelect={onSelect} />
                 {index < groupsWithItems.length - 1 && <div className={tx('menu.separator', 'menu__item', {})} />}
-              </React.Fragment>
+              </Fragment>
             ))}
           </ul>
         </Popover.Viewport>