@dxos/react-ui-editor 0.8.2-staging.7ac8446 → 0.8.3-main.672df60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.8.2-staging.7ac8446",
+  "version": "0.8.3-main.672df60",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -13,6 +13,11 @@
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
+    },
+    "./testing": {
+      "types": "./dist/types/src/testing/index.d.ts",
+      "browser": "./dist/lib/browser/testing/index.mjs",
+      "node": "./dist/lib/node-esm/testing/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -24,9 +29,11 @@
     "src"
   ],
   "dependencies": {
+    "@automerge/automerge": "3.0.0-beta.4",
     "@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",
     "@codemirror/language-data": "^6.5.1",
@@ -40,38 +47,43 @@
     "@lezer/generator": "^1.7.1",
     "@lezer/highlight": "^1.2.1",
     "@lezer/markdown": "^1.3.1",
-    "@preact/signals-react": "^1.3.8",
+    "@preact-signals/safe-react": "^0.9.0",
+    "@preact/signals-react": "^3.2.0",
     "@radix-ui/react-context": "1.1.1",
     "@replit/codemirror-vim": "^6.2.1",
     "@replit/codemirror-vscode-keymap": "^6.0.2",
+    "ajv": "^8.17.1",
     "codemirror": "^6.0.1",
     "lib0": "^0.2.65",
     "lodash.defaultsdeep": "^4.6.1",
-    "lodash.get": "^4.4.2",
     "lodash.merge": "^4.6.2",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/app-graph": "0.8.2-staging.7ac8446",
-    "@dxos/automerge": "0.8.2-staging.7ac8446",
-    "@dxos/async": "0.8.2-staging.7ac8446",
-    "@dxos/context": "0.8.2-staging.7ac8446",
-    "@dxos/debug": "0.8.2-staging.7ac8446",
-    "@dxos/echo-schema": "0.8.2-staging.7ac8446",
-    "@dxos/display-name": "0.8.2-staging.7ac8446",
-    "@dxos/invariant": "0.8.2-staging.7ac8446",
-    "@dxos/live-object": "0.8.2-staging.7ac8446",
-    "@dxos/log": "0.8.2-staging.7ac8446",
-    "@dxos/protocols": "0.8.2-staging.7ac8446",
-    "@dxos/react-hooks": "0.8.2-staging.7ac8446",
-    "@dxos/react-ui-menu": "0.8.2-staging.7ac8446",
-    "@dxos/util": "0.8.2-staging.7ac8446"
+    "@dxos/app-graph": "0.8.3-main.672df60",
+    "@dxos/async": "0.8.3-main.672df60",
+    "@dxos/context": "0.8.3-main.672df60",
+    "@dxos/debug": "0.8.3-main.672df60",
+    "@dxos/display-name": "0.8.3-main.672df60",
+    "@dxos/echo-schema": "0.8.3-main.672df60",
+    "@dxos/invariant": "0.8.3-main.672df60",
+    "@dxos/lit-ui": "0.8.3-main.672df60",
+    "@dxos/live-object": "0.8.3-main.672df60",
+    "@dxos/log": "0.8.3-main.672df60",
+    "@dxos/protocols": "0.8.3-main.672df60",
+    "@dxos/react-hooks": "0.8.3-main.672df60",
+    "@dxos/util": "0.8.3-main.672df60",
+    "@dxos/react-ui-menu": "0.8.3-main.672df60"
   },
   "devDependencies": {
+    "@automerge/automerge": "3.0.0-beta.4",
+    "@automerge/automerge-repo": "2.0.1",
+    "@automerge/automerge-repo-network-broadcastchannel": "2.0.1",
+    "@effect-rx/rx-react": "^0.34.1",
+    "@effect/platform": "0.80.12",
     "@phosphor-icons/react": "^2.1.5",
     "@types/chai": "^4.2.15",
     "@types/chai-dom": "^1.11.0",
     "@types/lodash.defaultsdeep": "^4.6.6",
-    "@types/lodash.get": "^4.4.7",
     "@types/lodash.merge": "^4.6.6",
     "@types/lodash.sortby": "^4.7.7",
     "@types/react": "~18.2.0",
@@ -79,6 +91,7 @@
     "@types/react-test-renderer": "^17.0.2",
     "chai": "^4.4.1",
     "chai-dom": "^1.11.0",
+    "effect": "3.14.21",
     "happy-dom": "^13.3.1",
     "jsdom": "^24.0.0",
     "mocha": "^10.6.0",
@@ -88,23 +101,27 @@
     "vite": "5.4.7",
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
-    "@dxos/automerge": "0.8.2-staging.7ac8446",
-    "@dxos/config": "0.8.2-staging.7ac8446",
-    "@dxos/echo-signals": "0.8.2-staging.7ac8446",
-    "@dxos/keyboard": "0.8.2-staging.7ac8446",
-    "@dxos/random": "0.8.2-staging.7ac8446",
-    "@dxos/react-client": "0.8.2-staging.7ac8446",
-    "@dxos/react-ui": "0.8.2-staging.7ac8446",
-    "@dxos/storybook-utils": "0.8.2-staging.7ac8446",
-    "@dxos/react-ui-theme": "0.8.2-staging.7ac8446"
+    "@dxos/config": "0.8.3-main.672df60",
+    "@dxos/keyboard": "0.8.3-main.672df60",
+    "@dxos/random": "0.8.3-main.672df60",
+    "@dxos/echo-signals": "0.8.3-main.672df60",
+    "@dxos/react-client": "0.8.3-main.672df60",
+    "@dxos/react-ui-attention": "0.8.3-main.672df60",
+    "@dxos/react-ui": "0.8.3-main.672df60",
+    "@dxos/react-ui-syntax-highlighter": "0.8.3-main.672df60",
+    "@dxos/storybook-utils": "0.8.3-main.672df60",
+    "@dxos/react-ui-theme": "0.8.3-main.672df60"
   },
   "peerDependencies": {
+    "@effect-rx/rx-react": "^0.34.1",
+    "@effect/platform": "0.80.12",
     "@phosphor-icons/react": "^2.1.5",
+    "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-client": "0.8.2-staging.7ac8446",
-    "@dxos/react-ui-theme": "0.8.2-staging.7ac8446",
-    "@dxos/react-ui": "0.8.2-staging.7ac8446"
+    "@dxos/react-ui": "0.8.3-main.672df60",
+    "@dxos/react-client": "0.8.3-main.672df60",
+    "@dxos/react-ui-theme": "0.8.3-main.672df60"
   },
   "publishConfig": {
     "access": "public"

package/src/components/EditorToolbar/EditorToolbar.tsx

@@ -2,104 +2,127 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback } from 'react';
+import { Rx } from '@effect-rx/rx-react';
+import React, { memo, useMemo } from 'react';
 
-import { type NodeArg } from '@dxos/app-graph';
+import { rxFromSignal, type NodeArg } from '@dxos/app-graph';
 import { ElevationProvider } from '@dxos/react-ui';
-import {
-  type MenuActionHandler,
-  MenuProvider,
-  ToolbarMenu,
-  createGapSeparator,
-  useMenuActions,
-} from '@dxos/react-ui-menu';
+import { MenuProvider, ToolbarMenu, createGapSeparator, useMenuActions } from '@dxos/react-ui-menu';
 import { textBlockWidth } from '@dxos/react-ui-theme';
 
 import { createBlocks } from './blocks';
-import { createComment } from './comment';
 import { createFormatting } from './formatting';
 import { createHeadings } from './headings';
+import { createImageUpload } from './image';
 import { createLists } from './lists';
-import {
-  type EditorToolbarActionGraphProps,
-  type EditorToolbarFeatureFlags,
-  type EditorToolbarProps,
-  editorToolbarSearch,
-} from './util';
-import { createViewMode } from './viewMode';
-import { stackItemContentToolbarClassNames } from '../../fragments';
+import { createSearch } from './search';
+import { type EditorToolbarActionGraphProps, type EditorToolbarFeatureFlags, type EditorToolbarProps } from './util';
+import { createViewMode } from './view-mode';
+import { stackItemContentToolbarClassNames } from '../../defaults';
 
 const createToolbar = ({
+  getView,
   state,
   customActions,
   ...features
-}: EditorToolbarFeatureFlags & Pick<EditorToolbarActionGraphProps, 'state' | 'customActions'>): {
+}: EditorToolbarFeatureFlags & Pick<EditorToolbarActionGraphProps, 'getView' | 'state' | 'customActions'>): Rx.Rx<{
   nodes: NodeArg<any>[];
   edges: { source: string; target: string }[];
-} => {
-  const nodes = [];
-  const edges = [];
-  if (features.headings ?? true) {
-    const headings = createHeadings(state);
-    nodes.push(...headings.nodes);
-    edges.push(...headings.edges);
-  }
-  if (features.formatting ?? true) {
-    const formatting = createFormatting(state);
-    nodes.push(...formatting.nodes);
-    edges.push(...formatting.edges);
-  }
-  if (features.lists ?? true) {
-    const lists = createLists(state);
-    nodes.push(...lists.nodes);
-    edges.push(...lists.edges);
-  }
-  if (features.blocks ?? true) {
-    const blocks = createBlocks(state);
-    nodes.push(...blocks.nodes);
-    edges.push(...blocks.edges);
-  }
-  if (customActions) {
-    const custom = customActions();
-    nodes.push(...custom.nodes);
-    edges.push(...custom.edges);
-  }
-  const editorToolbarGap = createGapSeparator();
-  nodes.push(...editorToolbarGap.nodes);
-  edges.push(...editorToolbarGap.edges);
-  if (features.comment ?? true) {
-    const comment = createComment(state);
-    nodes.push(...comment.nodes);
-    edges.push(...comment.edges);
-  }
-  if (features.search ?? true) {
-    nodes.push(editorToolbarSearch);
-    edges.push({ source: 'root', target: editorToolbarSearch.id });
-  }
-  if (features.viewMode ?? true) {
-    const viewMode = createViewMode(state);
-    nodes.push(...viewMode.nodes);
-    edges.push(...viewMode.edges);
-  }
-  return { nodes, edges };
+}> => {
+  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);
+    }
+    if (features.formatting ?? true) {
+      const formatting = get(rxFromSignal(() => createFormatting(state, getView)));
+      nodes.push(...formatting.nodes);
+      edges.push(...formatting.edges);
+    }
+    if (features.lists ?? true) {
+      const lists = get(rxFromSignal(() => createLists(state, getView)));
+      nodes.push(...lists.nodes);
+      edges.push(...lists.edges);
+    }
+    if (features.blocks ?? true) {
+      const blocks = get(rxFromSignal(() => createBlocks(state, getView)));
+      nodes.push(...blocks.nodes);
+      edges.push(...blocks.edges);
+    }
+    if (features.image) {
+      const image = get(rxFromSignal(() => createImageUpload(features.image!)));
+      nodes.push(...image.nodes);
+      edges.push(...image.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);
+    }
+    if (features.search ?? true) {
+      const search = get(rxFromSignal(() => createSearch(getView)));
+      nodes.push(...search.nodes);
+      edges.push(...search.edges);
+    }
+    if (features.viewMode) {
+      const viewMode = get(rxFromSignal(() => createViewMode(state, features.viewMode!)));
+      nodes.push(...viewMode.nodes);
+      edges.push(...viewMode.edges);
+    }
+    return { nodes, edges };
+  });
 };
 
-const useEditorToolbarActionGraph = ({ onAction, ...props }: EditorToolbarProps) => {
-  const menuCreator = useCallback(() => createToolbar(props), [props]);
-  const { resolveGroupItems } = useMenuActions(menuCreator);
+// 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 { resolveGroupItems, onAction: onAction as MenuActionHandler };
+  return useMenuActions(menuCreator);
 };
 
-export const EditorToolbar = ({ classNames, attendableId, role, ...props }: EditorToolbarProps) => {
+export const EditorToolbar = memo(({ classNames, attendableId, role, ...props }: EditorToolbarProps) => {
   const menuProps = useEditorToolbarActionGraph(props);
   return (
     <div role='none' className={stackItemContentToolbarClassNames(role)}>
       <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
         <MenuProvider {...menuProps} attendableId={attendableId}>
-          <ToolbarMenu classNames={[textBlockWidth, '!bg-transparent', classNames]} />
+          <ToolbarMenu classNames={[textBlockWidth, classNames]} />
         </MenuProvider>
       </ElevationProvider>
     </div>
   );
-};
+});

package/src/components/EditorToolbar/blocks.ts

@@ -2,11 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
+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 { type PayloadType } from '../../extensions';
+import { removeBlockquote, addBlockquote, removeCodeblock, addCodeblock, insertTable } from '../../extensions';
 
 const createBlockGroupAction = (value: string) =>
   createEditorActionGroup('block', {
@@ -15,22 +17,41 @@ const createBlockGroupAction = (value: string) =>
     value,
   } as ToolbarMenuActionGroupProperties);
 
-const createBlockActions = (value: string, blankLine?: boolean) =>
+const createBlockActions = (value: string, getView: () => EditorView, blankLine?: boolean) =>
   Object.entries({
     blockquote: 'ph--quotes--regular',
     codeblock: 'ph--code-block--regular',
     table: 'ph--table--regular',
   }).map(([type, icon]) => {
+    const checked = type === value;
     return createEditorAction(
-      { type: type as PayloadType, checked: type === value, ...(type === 'table' && { disabled: !!blankLine }) },
-      icon,
+      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 },
     );
   });
 
-export const createBlocks = (state: EditorToolbarState) => {
+export const createBlocks = (state: EditorToolbarState, getView: () => EditorView) => {
   const value = state?.blockQuote ? 'blockquote' : state.blockType ?? '';
   const blockGroupAction = createBlockGroupAction(value);
-  const blockActions = createBlockActions(value, state.blankLine);
+  const blockActions = createBlockActions(value, getView, state.blankLine);
   return {
     nodes: [blockGroupAction as NodeArg<any>, ...blockActions],
     edges: [

package/src/components/EditorToolbar/formatting.ts

@@ -2,11 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
+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 { type Formatting, type PayloadType } from '../../extensions';
+import { addLink, Inline, removeLink, setStyle, type Formatting } from '../../extensions';
 
 const formats = {
   strong: 'ph--text-b--regular',
@@ -23,14 +25,39 @@ const createFormattingGroup = (formatting: Formatting) =>
     value: Object.keys(formats).filter((key) => !!formatting[key as keyof Formatting]),
   } as ToolbarMenuActionGroupProperties);
 
-const createFormattingActions = (formatting: Formatting) =>
-  Object.entries(formats).map(([type, icon]) =>
-    createEditorAction({ type: type as PayloadType, checked: !!formatting[type as keyof Formatting] }, icon),
-  );
+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;
+        }
+
+        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 },
+    );
+  });
 
-export const createFormatting = (state: EditorToolbarState) => {
+export const createFormatting = (state: EditorToolbarState, getView: () => EditorView) => {
   const formattingGroupAction = createFormattingGroup(state);
-  const formattingActions = createFormattingActions(state);
+  const formattingActions = createFormattingActions(state, getView);
   return {
     nodes: [formattingGroupAction as NodeArg<any>, ...formattingActions],
     edges: [

package/src/components/EditorToolbar/headings.ts

@@ -2,10 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
+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';
 
 const createHeadingGroupAction = (value: string) =>
@@ -20,7 +23,7 @@ const createHeadingGroupAction = (value: string) =>
     'ph--text-h--regular',
   );
 
-const createHeadingActions = (value: string) =>
+const createHeadingActions = (getView: () => EditorView) =>
   Object.entries({
     '0': 'ph--paragraph--regular',
     '1': 'ph--text-h-one--regular',
@@ -31,12 +34,10 @@ const createHeadingActions = (value: string) =>
     '6': 'ph--text-h-six--regular',
   }).map(([levelStr, icon]) => {
     const level = parseInt(levelStr);
-    return createEditorAction(
-      { type: 'heading', data: level, checked: value === levelStr },
+    return createEditorAction(`heading--${levelStr}`, () => setHeading(level)(getView()), {
+      label: ['heading level label', { count: level, ns: translationKey }],
       icon,
-      ['heading level label', { count: level, ns: translationKey }],
-      `heading--${levelStr}`,
-    );
+    });
   });
 
 const computeHeadingValue = (state: EditorToolbarState) => {
@@ -45,10 +46,10 @@ const computeHeadingValue = (state: EditorToolbarState) => {
   return header ? header[1] : blockType === 'paragraph' || !blockType ? '0' : '';
 };
 
-export const createHeadings = (state: EditorToolbarState) => {
+export const createHeadings = (state: EditorToolbarState, getView: () => EditorView) => {
   const headingValue = computeHeadingValue(state);
   const headingGroupAction = createHeadingGroupAction(headingValue);
-  const headingActions = createHeadingActions(headingValue);
+  const headingActions = createHeadingActions(getView);
   return {
     nodes: [headingGroupAction as NodeArg<any>, ...headingActions],
     edges: [

package/src/components/EditorToolbar/image.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createEditorAction } from './util';
+
+const createImageUploadAction = (onImageUpload: () => void) =>
+  createEditorAction('image', onImageUpload, {
+    testId: 'editor.toolbar.image',
+    icon: 'ph--image-square--regular',
+  });
+
+export const createImageUpload = (onImageUpload: () => void) => ({
+  nodes: [createImageUploadAction(onImageUpload)],
+  edges: [{ source: 'root', target: 'image' }],
+});

package/src/components/EditorToolbar/index.ts

@@ -3,4 +3,10 @@
 //
 
 export * from './EditorToolbar';
-export { type EditorToolbarState, useEditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
+export {
+  type EditorToolbarState,
+  type EditorToolbarActionGraphProps,
+  useEditorToolbarState,
+  createEditorAction,
+  createEditorActionGroup,
+} from './util';

package/src/components/EditorToolbar/lists.ts

@@ -2,11 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
+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 { type PayloadType } from '../../extensions';
+import { addList, List, removeList } from '../../extensions';
 
 const listStyles = {
   bullet: 'ph--list-bullets--regular',
@@ -21,15 +23,32 @@ const createListGroupAction = (value: string) =>
     value,
   } as ToolbarMenuActionGroupProperties);
 
-const createListActions = (value: string) =>
-  Object.entries(listStyles).map(([listStyle, icon]) =>
-    createEditorAction({ type: `list-${listStyle}` as PayloadType, checked: value === listStyle }, icon),
-  );
+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 },
+    );
+  });
 
-export const createLists = (state: EditorToolbarState) => {
+export const createLists = (state: EditorToolbarState, getView: () => EditorView) => {
   const value = state.listStyle ?? '';
   const listGroupAction = createListGroupAction(value);
-  const listActionsMap = createListActions(value);
+  const listActionsMap = createListActions(value, getView);
   return {
     nodes: [listGroupAction as NodeArg<any>, ...listActionsMap],
     edges: [

package/src/components/EditorToolbar/search.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { openSearchPanel } from '@codemirror/search';
+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',
+  });
+
+export const createSearch = (getView: () => EditorView) => ({
+  nodes: [createSearchAction(getView)],
+  edges: [{ source: 'root', target: 'search' }],
+});