@dxos/react-ui-editor 0.10.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Text editor components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -19,14 +19,12 @@
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
-      "browser": "./dist/lib/browser/index.mjs",
-      "node": "./dist/lib/node-esm/index.mjs"
+      "import": "./dist/lib/index.mjs"
     },
     "./translations": {
       "source": "./src/translations.ts",
       "types": "./dist/types/src/translations.d.ts",
-      "browser": "./dist/lib/browser/translations.mjs",
-      "node": "./dist/lib/node-esm/translations.mjs"
+      "import": "./dist/lib/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -35,103 +33,62 @@
     "src"
   ],
   "dependencies": {
-    "@automerge/automerge": "3.3.0-fragments.2",
-    "@codemirror/autocomplete": "^6.20.2",
-    "@codemirror/commands": "^6.10.3",
-    "@codemirror/lang-html": "^6.4.11",
-    "@codemirror/lang-javascript": "^6.2.5",
-    "@codemirror/lang-json": "^6.0.2",
-    "@codemirror/lang-markdown": "6.5.0",
-    "@codemirror/lang-xml": "^6.1.0",
-    "@codemirror/lang-yaml": "^6.1.3",
-    "@codemirror/language": "^6.12.3",
-    "@codemirror/language-data": "^6.5.2",
-    "@codemirror/lint": "6.9.7",
-    "@codemirror/search": "^6.7.0",
-    "@codemirror/state": "^6.6.0",
-    "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.43.0",
-    "@fluentui/react-tabster": "9.26.11",
-    "@lezer/common": "^1.5.2",
-    "@lezer/generator": "^1.8.0",
-    "@lezer/highlight": "^1.2.3",
-    "@lezer/markdown": "^1.6.3",
+    "@codemirror/search": "^6.7.1",
+    "@codemirror/state": "^6.7.1",
+    "@codemirror/view": "^6.43.6",
+    "@effect-atom/atom": "^0.5.3",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "@replit/codemirror-vim": "^6.3.0",
-    "@replit/codemirror-vscode-keymap": "^6.0.2",
-    "@uiw/codemirror-theme-vscode": "^4.25.2",
-    "ajv": "^8.18.0",
-    "bind-event-listener": "^3.0.0",
-    "codemirror": "^6.0.2",
-    "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.10.0",
-    "@dxos/async": "0.10.0",
-    "@dxos/context": "0.10.0",
-    "@dxos/debug": "0.10.0",
-    "@dxos/echo": "0.10.0",
-    "@dxos/echo-client": "0.10.0",
-    "@dxos/client": "0.10.0",
-    "@dxos/echo-doc": "0.10.0",
-    "@dxos/invariant": "0.10.0",
-    "@dxos/effect": "0.10.0",
-    "@dxos/log": "0.10.0",
-    "@dxos/lit-ui": "0.10.0",
-    "@dxos/keys": "0.10.0",
-    "@dxos/protocols": "0.10.0",
-    "@dxos/react-hooks": "0.10.0",
-    "@dxos/display-name": "0.10.0",
-    "@dxos/react-ui-menu": "0.10.0",
-    "@dxos/react-ui-mosaic": "0.10.0",
-    "@dxos/ui": "0.10.0",
-    "@dxos/ui-editor": "0.10.0",
-    "@dxos/util": "0.10.0",
-    "@dxos/ui-theme": "0.10.0"
+    "@dxos/app-graph": "0.11.0",
+    "@dxos/async": "0.11.0",
+    "@dxos/echo-react": "0.11.0",
+    "@dxos/log": "0.11.0",
+    "@dxos/invariant": "0.11.0",
+    "@dxos/react-ui-menu": "0.11.0",
+    "@dxos/ui-editor": "0.11.0",
+    "@dxos/util": "0.11.0"
   },
   "devDependencies": {
-    "@automerge/automerge": "3.3.0-fragments.2",
-    "@automerge/automerge-repo": "2.6.0-subduction.37",
-    "@automerge/automerge-repo-network-broadcastchannel": "2.6.0-subduction.37",
+    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-markdown": "6.5.1",
     "@effect-atom/atom-react": "^0.5.0",
     "@effect/ai": "0.36.0",
     "@effect/platform": "0.96.2",
     "@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.17",
     "@types/react-dom": "~19.2.3",
-    "@types/react-test-renderer": "^17.0.2",
     "chai": "^4.4.1",
     "chai-dom": "^1.11.0",
     "effect": "3.21.4",
     "happy-dom": "^20.0.0",
     "jsdom": "^29.1.1",
+    "lodash.defaultsdeep": "^4.6.1",
     "mocha": "^10.6.0",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "react-test-renderer": "~19.2.7",
-    "vite": "^8.0.16",
+    "vite": "^8.1.4",
     "vite-plugin-top-level-await": "^1.6.0",
     "vite-plugin-wasm": "^3.6.0",
-    "@dxos/ai": "0.10.0",
-    "@dxos/config": "0.10.0",
-    "@dxos/keyboard": "0.10.0",
-    "@dxos/echo": "0.10.0",
-    "@dxos/random": "0.10.0",
-    "@dxos/react-client": "0.10.0",
-    "@dxos/react-ui-attention": "0.10.0",
-    "@dxos/react-ui": "0.10.0",
-    "@dxos/react-ui-syntax-highlighter": "0.10.0",
-    "@dxos/schema": "0.10.0",
-    "@dxos/storybook-utils": "0.10.0",
-    "@dxos/ui-theme": "0.10.0",
-    "@dxos/ui-types": "0.10.0"
+    "@dxos/ai": "0.11.0",
+    "@dxos/echo": "0.11.0",
+    "@dxos/echo-client": "0.11.0",
+    "@dxos/keys": "0.11.0",
+    "@dxos/protocols": "0.11.0",
+    "@dxos/echo-doc": "0.11.0",
+    "@dxos/random": "0.11.0",
+    "@dxos/react-client": "0.11.0",
+    "@dxos/react-ui": "0.11.0",
+    "@dxos/react-ui-attention": "0.11.0",
+    "@dxos/react-ui-list": "0.11.0",
+    "@dxos/react-ui-syntax-highlighter": "0.11.0",
+    "@dxos/schema": "0.11.0",
+    "@dxos/ui-theme": "0.11.0",
+    "@dxos/storybook-utils": "0.11.0",
+    "@dxos/ui": "0.11.0",
+    "@dxos/ui-types": "0.11.0"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -139,9 +96,9 @@
     "effect": "3.21.4",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/react-client": "0.10.0",
-    "@dxos/ui-theme": "0.10.0",
-    "@dxos/react-ui": "0.10.0"
+    "@dxos/react-client": "^0.11.0",
+    "@dxos/react-ui": "^0.11.0",
+    "@dxos/ui-theme": "^0.11.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Editor/Editor.tsx

@@ -2,10 +2,19 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Extension } from '@codemirror/state';
-import { Atom } from '@effect-atom/atom-react';
-import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';
+import { type EditorState, type Extension } from '@codemirror/state';
+import { Atom } from '@effect-atom/atom';
+import React, {
+  type PropsWithChildren,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
 
 import { invariant } from '@dxos/invariant';
 import { type ThemedClassName } from '@dxos/react-ui';
@@ -23,40 +32,18 @@ import {
   EditorToolbar as NaturalEditorToolbar,
   type EditorToolbarProps as NaturalEditorToolbarProps,
 } from '../EditorToolbar';
-import {
-  type EditorController,
-  EditorView as NaturalEditorContent,
-  type EditorViewProps as NaturalEditorContentProps,
-  createEditorController,
-  noopController,
-} from './EditorView';
-
-//
-// Context
-//
-
-type EditorContextValue = {
-  controller?: EditorController;
-  setController: (controller: EditorController) => void;
-  extensions?: Extension[];
-  state: Atom.Writable<EditorToolbarState>;
-};
-
-const [EditorContextProvider, useEditorContext] = createContext<EditorContextValue>('Editor');
-
-/**
- * Access the editor context. Must be used within `Editor.Root`.
- */
-export { useEditorContext };
+import { type EditorController, noopController } from './controller';
+import { EditorContextProvider, type EditorContextValue, useEditorContext } from './EditorContext';
+import { EditorView as NaturalEditorContent, type EditorViewProps as NaturalEditorContentProps } from './EditorView';
 
 //
 // Root
 //
 
 type EditorRootProps = PropsWithChildren<
-  Pick<EditorContextValue, 'extensions'> &
+  Pick<EditorContextValue, 'extensions' | 'widgets'> &
     Omit<UseEditorMenuProps, 'viewRef'> &
-    Pick<EditorMenuProviderProps, 'numItems'> & {
+    Pick<EditorMenuProviderProps, 'numItems' | 'searchPlaceholder'> & {
       viewMode?: EditorToolbarState['viewMode'];
     }
 >;
@@ -66,7 +53,10 @@ type EditorRootProps = PropsWithChildren<
  * Provides context for all child components and manages the editor controller state.
  */
 const EditorRoot = forwardRef<EditorController | null, EditorRootProps>(
-  ({ children, extensions: extensionsProp, viewMode, numItems, ...props }, forwardedRef) => {
+  (
+    { children, extensions: extensionsProp, widgets, viewMode, numItems, searchPlaceholder, ...props },
+    forwardedRef,
+  ) => {
     // TODO(wittjosiah): Including initialState in the deps causes reactivity issues.
     const state = useMemo(() => Atom.make<EditorToolbarState>({ viewMode }), [viewMode]);
 
@@ -87,9 +77,16 @@ const EditorRoot = forwardRef<EditorController | null, EditorRootProps>(
         controller={controller}
         setController={setController}
         extensions={extensions}
+        widgets={widgets}
         state={state}
       >
-        <EditorMenuProvider getView={getView} groups={groupsRef.current} numItems={numItems} {...menuProps}>
+        <EditorMenuProvider
+          getView={getView}
+          groups={groupsRef.current}
+          numItems={numItems}
+          searchPlaceholder={searchPlaceholder}
+          {...menuProps}
+        >
           {children}
         </EditorMenuProvider>
       </EditorContextProvider>
@@ -164,6 +161,116 @@ const EditorToolbar = (props: EditorToolbarProps) => {
 
 EditorToolbar.displayName = EDITOR_TOOLBAR_NAME;
 
+//
+// Blocks
+//
+
+const EDITOR_BLOCKS_NAME = 'Editor.Blocks';
+
+/**
+ * Renders the xmlTags widget portals (embedded blocks) contributed via the editor's `setWidgets`
+ * callback. Place inside `Editor.Root`; the widgets come from context (pass them to `Editor.Root`).
+ */
+const EditorBlocks = () => {
+  const { widgets = [] } = useEditorContext(EDITOR_BLOCKS_NAME);
+  return (
+    <>
+      {widgets.map(({ id, root, Component, props }) => (
+        <div key={id}>{createPortal(<Component {...props} />, root)}</div>
+      ))}
+    </>
+  );
+};
+
+EditorBlocks.displayName = EDITOR_BLOCKS_NAME;
+
+//
+// Diagnostics
+//
+
+const EDITOR_DIAGNOSTICS_NAME = 'Editor.Diagnostics';
+
+/** Rough leaf count of a (recursively nested) CodeMirror extension tree. */
+const countExtensions = (extension: Extension | undefined): number =>
+  extension == null
+    ? 0
+    : Array.isArray(extension)
+      ? extension.reduce((sum, child) => sum + countExtensions(child), 0)
+      : 1;
+
+type EditorDiagnosticsProps = ThemedClassName<{}>;
+
+/**
+ * Developer panel showing live editor state read from the CodeMirror `EditorState` (document size,
+ * selection, viewport, configured-extension count). A debugging aid — gate it behind a dev/debug
+ * setting; unrelated to `@codemirror/lint` diagnostics. Place inside `Editor.Root`, below the content.
+ */
+const EditorDiagnostics = ({ classNames }: EditorDiagnosticsProps) => {
+  const { controller, extensions } = useEditorContext(EDITOR_DIAGNOSTICS_NAME);
+  const view = controller?.view ?? null;
+  // `EditorState` is immutable (a new object per transaction), so a reference change signals an update.
+  // Poll on animation frames while mounted — self-contained (no injected updateListener) and re-renders
+  // only when the state actually changes; catches programmatic transactions too.
+  const [, setRevision] = useState(0);
+  const lastState = useRef<EditorState | null>(null);
+  useEffect(() => {
+    if (!view) {
+      return;
+    }
+    let frame = 0;
+    const tick = () => {
+      if (view.state !== lastState.current) {
+        lastState.current = view.state;
+        setRevision((revision) => revision + 1);
+      }
+      frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [view]);
+
+  if (!view) {
+    return null;
+  }
+
+  const { state } = view;
+  const { doc, selection } = state;
+  const { main } = selection;
+  const head = doc.lineAt(main.head);
+  // The context holds the extensions passed to `Root`; count leaves (CodeMirror does not expose the
+  // resolved extension set at runtime, so this is the configured, not the active, count).
+  const extensionCount = countExtensions(extensions);
+  const item = (label: string, value: string | number) => (
+    <span>
+      <span className='text-subdued'>{label} </span>
+      {value}
+    </span>
+  );
+
+  return (
+    <div
+      className={mx(
+        'flex flex-wrap gap-x-4 gap-y-0.5 border-bs border-separator px-2 py-1 text-xs font-mono text-description',
+        classNames,
+      )}
+      data-testid='editor.diagnostics'
+    >
+      {item('chars', doc.length)}
+      {item('lines', doc.lines)}
+      {item(
+        'cursor',
+        main.empty ? `${head.number}:${main.head - head.from + 1}` : `${main.from}–${main.to} (${main.to - main.from})`,
+      )}
+      {selection.ranges.length > 1 && item('ranges', selection.ranges.length)}
+      {item('viewport', `${view.viewport.from}–${view.viewport.to}`)}
+      {item('mode', state.readOnly ? 'read-only' : 'editable')}
+      {item('extensions', extensionCount)}
+    </div>
+  );
+};
+
+EditorDiagnostics.displayName = EDITOR_DIAGNOSTICS_NAME;
+
 //
 // Editor
 //
@@ -173,6 +280,8 @@ export const Editor = {
   Toolbar: EditorToolbar,
   Content: EditorContent,
   View: EditorView,
+  Blocks: EditorBlocks,
+  Diagnostics: EditorDiagnostics,
 };
 
 export type {
@@ -183,5 +292,3 @@ export type {
   EditorToolbarState,
   EditorViewProps,
 };
-
-export { createEditorController };

package/src/components/Editor/EditorContext.ts

@@ -0,0 +1,34 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import { type Atom } from '@effect-atom/atom-react';
+import { createContext } from '@radix-ui/react-context';
+
+import { type XmlWidgetState } from '@dxos/ui-editor';
+
+import { type EditorToolbarState } from '../EditorToolbar/types';
+import { type EditorController } from './controller';
+
+// Kept out of `Editor.tsx`: react-refresh only fast-refreshes a module whose exports are all
+// components, so a context and its hook exported beside them force a full page reload on every edit.
+
+//
+// Context
+//
+
+export type EditorContextValue = {
+  controller?: EditorController;
+  setController: (controller: EditorController) => void;
+  extensions?: Extension[];
+  /** xmlTags widget portals (embedded blocks); rendered by `Editor.Blocks`, fed via `setWidgets`. */
+  widgets?: XmlWidgetState[];
+  state: Atom.Writable<EditorToolbarState>;
+};
+
+export const [EditorContextProvider, useEditorContext] = createContext<EditorContextValue>('Editor');
+
+/**
+ * Access the editor context. Must be used within `Editor.Root`.
+ */

package/src/components/Editor/EditorView.tsx

@@ -11,7 +11,7 @@ import { initialSync } from '@dxos/ui-editor';
 import { mx } from '@dxos/ui-theme';
 
 import { type UseTextEditorProps, useTextEditor } from '../../hooks';
-import { type EditorController, createEditorController, noopController } from './controller';
+import { type EditorController, createEditorController } from './controller';
 
 export type EditorViewProps = ThemedClassName<
   {
@@ -62,11 +62,15 @@ export const EditorView = forwardRef<EditorController, EditorViewProps>(
     // disagree. After internal typing the prop will already match the editor's
     // doc, and dispatching anyway would race fast keystrokes — a stale rAF
     // closure can replace doc content with an older value, dropping characters.
+    //
+    // `undefined` means uncontrolled: the doc was seeded once from `value` at creation and the caller
+    // isn't driving it, so leave it be (coalescing undefined→'' here would wipe that seed on mount). A
+    // controlled caller clears the doc by passing '' explicitly.
     useEffect(() => {
-      if (!view) {
+      if (!view || value === undefined) {
         return;
       }
-      const next = value ?? '';
+      const next = value;
       if (view.state.doc.toString() === next) {
         return;
       }
@@ -86,14 +90,13 @@ export const EditorView = forwardRef<EditorController, EditorViewProps>(
       });
     }, [view, value, selectionEnd]);
 
+    // Focus chrome (border/ring) is the caller's responsibility (e.g. `dx-input`).
     return (
       <div
-        className={mx('w-full outline-hidden focus:border-accent-bg focus-within:border-focus-ring-subtle', classNames)}
+        className={mx('w-full outline-hidden', classNames)}
         {...(focusable ? focusAttributes : {})}
         ref={parentRef}
       />
     );
   },
 );
-
-export { type EditorController, createEditorController, noopController };

package/src/components/Editor/index.ts

@@ -2,4 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
+export { type EditorController, createEditorController, noopController } from './controller';
+export { useEditorContext } from './EditorContext';
+
 export * from './Editor';

package/src/components/EditorMenuProvider/EditorMenuProvider.tsx

@@ -4,7 +4,15 @@
 
 import { type EditorView } from '@codemirror/view';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { Fragment, type PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+  Fragment,
+  type KeyboardEvent,
+  type PropsWithChildren,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 
 import { addEventListener } from '@dxos/async';
 import { invariant } from '@dxos/invariant';
@@ -12,6 +20,7 @@ import {
   DX_ANCHOR_ACTIVATE,
   type DxAnchorActivate,
   Icon,
+  Input,
   Popover,
   ScrollArea,
   toLocalizedString,
@@ -20,7 +29,9 @@ import {
   useTranslation,
 } from '@dxos/react-ui';
 
-import { type EditorMenuGroup, type EditorMenuItem } from './menu';
+import { translationKey } from '#translations';
+
+import { type EditorMenuGroup, type EditorMenuItem, getMenuItem } from './menu';
 
 export type EditorMenuProviderProps = PropsWithChildren<{
   // Provided as a getter (not a value prop) so the live `EditorView` is never carried in a React prop that
@@ -31,10 +42,16 @@ export type EditorMenuProviderProps = PropsWithChildren<{
   open?: boolean;
   defaultOpen?: boolean;
   numItems?: number;
+  /** Render the menu as a combobox: the popover owns the query input and takes focus from the editor. */
+  search?: boolean;
+  query?: string;
+  searchPlaceholder?: string;
   onOpenChange?: (event: { view: EditorView; open: boolean; trigger?: string }) => void;
   onActivate?: (event: { view: EditorView; trigger?: string }) => void;
   onSelect?: (event: { view: EditorView; item: EditorMenuItem }) => void;
   onCancel?: (event: { view: EditorView }) => void;
+  onQueryChange?: (query: string) => void;
+  onNavigate?: (direction: 'up' | 'down') => void;
 }>;
 
 /**
@@ -50,12 +67,17 @@ export const EditorMenuProvider = ({
   open: openProp,
   defaultOpen,
   numItems = 8,
+  search,
+  query = '',
+  searchPlaceholder,
   onOpenChange,
   onActivate,
   onSelect,
   onCancel,
+  onQueryChange,
+  onNavigate,
 }: EditorMenuProviderProps) => {
-  const { tx } = useThemeContext();
+  const { t } = useTranslation(translationKey);
   const triggerRef = useRef<HTMLButtonElement | null>(null);
 
   // Hold the latest `getView` so callbacks/effects always read the current view without re-subscribing.
@@ -106,12 +128,59 @@ export const EditorMenuProvider = ({
       const view = getViewRef.current?.();
       invariant(view);
       onSelect?.({ view, item });
+      // Close the popover after acting (e.g. Delete) and return focus to the editor; otherwise the menu
+      // lingers open over the now-changed document.
+      setOpen(false);
+      view.focus();
     },
-    [getViewRef, onSelect],
+    [getViewRef, onSelect, setOpen],
   );
 
   const menuGroups = groups?.filter((group) => group.items.length > 0) ?? [];
 
+  // Handing off from the slash menu refocuses the editor and reopens the popover a frame later, so
+  // neither `autoFocus` nor `onOpenAutoFocus` lands on the input. Claim focus a frame after the
+  // modal-state dispatch `handleOpenChange` schedules, which otherwise hands focus back to CodeMirror.
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    if (!search || !open) {
+      return;
+    }
+
+    let inner: number;
+    const outer = requestAnimationFrame(() => {
+      inner = requestAnimationFrame(() => searchInputRef.current?.focus());
+    });
+
+    return () => {
+      cancelAnimationFrame(outer);
+      cancelAnimationFrame(inner);
+    };
+  }, [search, open]);
+
+  const handleSearchKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      switch (event.key) {
+        case 'ArrowUp':
+        case 'ArrowDown': {
+          event.preventDefault();
+          onNavigate?.(event.key === 'ArrowUp' ? 'up' : 'down');
+          break;
+        }
+
+        case 'Enter': {
+          const item = getMenuItem(menuGroups, currentItem);
+          if (item) {
+            event.preventDefault();
+            handleSelect(item);
+          }
+          break;
+        }
+      }
+    },
+    [menuGroups, currentItem, handleSelect, onNavigate],
+  );
+
   return (
     <Popover.Root modal={false} open={open} onOpenChange={setOpen}>
       <Popover.VirtualTrigger virtualRef={triggerRef} />
@@ -120,9 +189,10 @@ export const EditorMenuProvider = ({
       <Popover.Portal>
         <Popover.Content
           align='start'
-          classNames={['flex flex-col', !menuGroups.length && 'hidden']}
+          classNames={['flex flex-col', !search && !menuGroups.length && 'hidden']}
           style={{
-            maxBlockSize: 36 * numItems + 10,
+            // The search input shares the box, so `numItems` keeps meaning "items visible".
+            maxBlockSize: 36 * numItems + 10 + (search ? 36 : 0),
           }}
           // NOTE: We keep the focus in the editor, but Radix routes escape key.
           onEscapeKeyDown={() => {
@@ -131,8 +201,26 @@ export const EditorMenuProvider = ({
               onCancel?.({ view: currentView });
             }
           }}
-          onOpenAutoFocus={(event) => event.preventDefault()}
+          // In search mode the query is typed into the popover's own input, so it must take focus.
+          onOpenAutoFocus={search ? undefined : (event) => event.preventDefault()}
         >
+          {search && (
+            <Input.Root>
+              <Input.TextInput
+                ref={searchInputRef}
+                density='sm'
+                variant='subdued'
+                classNames='shrink-0 mbe-1'
+                value={query}
+                placeholder={searchPlaceholder}
+                // Placeholder text is not a persistent accessible name, and it is optional — fall
+                // back to the generic label so the input is never anonymous.
+                aria-label={searchPlaceholder ?? t('search.label')}
+                onChange={(event) => onQueryChange?.(event.target.value)}
+                onKeyDown={handleSearchKeyDown}
+              />
+            </Input.Root>
+          )}
           <Popover.Viewport asChild classNames='dx-container'>
             <ScrollArea.Root thin>
               <ScrollArea.Viewport>
@@ -219,7 +307,9 @@ const MenuItem = ({ item, current, onSelect }: MenuItemProps) => {
   const listRef = useRef<HTMLLIElement>(null);
   useEffect(() => {
     if (current && listRef.current) {
-      listRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      // Instant, not smooth: held arrow keys retarget faster than a smooth scroll can settle, and each
+      // new animation supersedes the last, so the list stalls then jumps.
+      listRef.current.scrollIntoView({ behavior: 'instant', block: 'nearest' });
     }
   }, [current]);