@dxos/react-ui-editor 0.8.3 → 0.8.4-main.3a94e84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.8.3",
+  "version": "0.8.4-main.3a94e84",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -14,6 +14,11 @@
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
     },
+    "./types": {
+      "types": "./dist/types/src/types/index.d.ts",
+      "browser": "./dist/lib/browser/types/index.mjs",
+      "node": "./dist/lib/node-esm/types/index.mjs"
+    },
     "./testing": {
       "types": "./dist/types/src/testing/index.d.ts",
       "browser": "./dist/lib/browser/testing/index.mjs",
@@ -29,7 +34,7 @@
     "src"
   ],
   "dependencies": {
-    "@automerge/automerge": "3.0.0-beta.4",
+    "@automerge/automerge": "3.0.0",
     "@codemirror/autocomplete": "^6.18.1",
     "@codemirror/commands": "^6.6.2",
     "@codemirror/lang-javascript": "^6.2.2",
@@ -59,29 +64,28 @@
     "lodash.merge": "^4.6.2",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/app-graph": "0.8.3",
-    "@dxos/async": "0.8.3",
-    "@dxos/context": "0.8.3",
-    "@dxos/debug": "0.8.3",
-    "@dxos/display-name": "0.8.3",
-    "@dxos/invariant": "0.8.3",
-    "@dxos/lit-ui": "0.8.3",
-    "@dxos/echo-schema": "0.8.3",
-    "@dxos/live-object": "0.8.3",
-    "@dxos/log": "0.8.3",
-    "@dxos/protocols": "0.8.3",
-    "@dxos/react-hooks": "0.8.3",
-    "@dxos/react-ui-menu": "0.8.3",
-    "@dxos/react-ui-stack": "0.8.3",
-    "@dxos/util": "0.8.3"
+    "@dxos/async": "0.8.4-main.3a94e84",
+    "@dxos/context": "0.8.4-main.3a94e84",
+    "@dxos/app-graph": "0.8.4-main.3a94e84",
+    "@dxos/debug": "0.8.4-main.3a94e84",
+    "@dxos/invariant": "0.8.4-main.3a94e84",
+    "@dxos/live-object": "0.8.4-main.3a94e84",
+    "@dxos/lit-ui": "0.8.4-main.3a94e84",
+    "@dxos/display-name": "0.8.4-main.3a94e84",
+    "@dxos/log": "0.8.4-main.3a94e84",
+    "@dxos/protocols": "0.8.4-main.3a94e84",
+    "@dxos/echo-schema": "0.8.4-main.3a94e84",
+    "@dxos/react-hooks": "0.8.4-main.3a94e84",
+    "@dxos/react-ui-stack": "0.8.4-main.3a94e84",
+    "@dxos/react-ui-menu": "0.8.4-main.3a94e84",
+    "@dxos/util": "0.8.4-main.3a94e84"
   },
   "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",
+    "@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",
     "@types/chai": "^4.2.15",
     "@types/chai-dom": "^1.11.0",
     "@types/lodash.defaultsdeep": "^4.6.6",
@@ -92,7 +96,7 @@
     "@types/react-test-renderer": "^17.0.2",
     "chai": "^4.4.1",
     "chai-dom": "^1.11.0",
-    "effect": "3.14.21",
+    "effect": "3.17.0",
     "happy-dom": "^13.3.1",
     "jsdom": "^24.0.0",
     "mocha": "^10.6.0",
@@ -102,29 +106,28 @@
     "vite": "5.4.7",
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
-    "@dxos/config": "0.8.3",
-    "@dxos/echo": "0.8.3",
-    "@dxos/echo-signals": "0.8.3",
-    "@dxos/keyboard": "0.8.3",
-    "@dxos/random": "0.8.3",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-syntax-highlighter": "0.8.3",
-    "@dxos/react-ui-attention": "0.8.3",
-    "@dxos/react-client": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3",
-    "@dxos/schema": "0.8.3"
+    "@dxos/config": "0.8.4-main.3a94e84",
+    "@dxos/echo": "0.8.4-main.3a94e84",
+    "@dxos/echo-signals": "0.8.4-main.3a94e84",
+    "@dxos/keyboard": "0.8.4-main.3a94e84",
+    "@dxos/random": "0.8.4-main.3a94e84",
+    "@dxos/react-client": "0.8.4-main.3a94e84",
+    "@dxos/react-ui": "0.8.4-main.3a94e84",
+    "@dxos/react-ui-attention": "0.8.4-main.3a94e84",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.3a94e84",
+    "@dxos/schema": "0.8.4-main.3a94e84",
+    "@dxos/react-ui-theme": "0.8.4-main.3a94e84",
+    "@dxos/storybook-utils": "0.8.4-main.3a94e84"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "0.80.12",
-    "@phosphor-icons/react": "^2.1.5",
+    "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-client": "0.8.3",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "@dxos/react-client": "0.8.4-main.3a94e84",
+    "@dxos/react-ui-theme": "0.8.4-main.3a94e84",
+    "@dxos/react-ui": "0.8.4-main.3a94e84"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Editor/Editor.tsx

@@ -0,0 +1,39 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import React, { forwardRef, useImperativeHandle } from 'react';
+
+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';
+
+export type EditorProps = ThemedClassName<
+  {
+    id: string;
+    text: DataType.Text;
+  } & Omit<UseTextEditorProps, 'id'>
+>;
+
+/**
+ * Minimal text editor.
+ */
+export const Editor = forwardRef<EditorView | undefined, EditorProps>(
+  ({ classNames, id, text, ...props }, forwardedRef) => {
+    const { themeMode } = useThemeContext();
+    const { parentRef, focusAttributes, view } = useTextEditor(
+      () => ({
+        id,
+        initialValue: text.content,
+        ...props,
+      }),
+      [id, text, themeMode],
+    );
+
+    useImperativeHandle(forwardedRef, () => view, [view]);
+    return <div ref={parentRef} className={mx(classNames)} {...focusAttributes} />;
+  },
+);

package/src/components/Editor/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './Editor';

package/src/components/EditorToolbar/blocks.ts

@@ -49,7 +49,7 @@ const createBlockActions = (value: string, getView: () => EditorView, blankLine?
   });
 
 export const createBlocks = (state: EditorToolbarState, getView: () => EditorView) => {
-  const value = state?.blockQuote ? 'blockquote' : state.blockType ?? '';
+  const value = state?.blockQuote ? 'blockquote' : (state.blockType ?? '');
   const blockGroupAction = createBlockGroupAction(value);
   const blockActions = createBlockActions(value, getView, state.blankLine);
   return {

package/src/components/EditorToolbar/util.ts

@@ -10,17 +10,18 @@ import { type Action } from '@dxos/app-graph';
 import { live, type Live } from '@dxos/live-object';
 import { type ThemedClassName } from '@dxos/react-ui';
 import {
-  type MenuSeparator,
+  type ActionGraphProps,
+  type MenuActionProperties,
   type MenuItemGroup,
+  type MenuSeparator,
   type ToolbarMenuActionGroupProperties,
   createMenuAction,
   createMenuItemGroup,
-  type ActionGraphProps,
-  type MenuActionProperties,
 } from '@dxos/react-ui-menu';
 
-import type { EditorAction, EditorViewMode, Formatting } from '../../extensions';
+import type { EditorAction, Formatting } from '../../extensions';
 import { translationKey } from '../../translations';
+import { type EditorViewMode } from '../../types';
 
 export type EditorToolbarState = Formatting & Partial<{ viewMode: EditorViewMode }>;
 

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

@@ -6,8 +6,8 @@ import { type NodeArg } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 
 import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
-import { type EditorViewMode } from '../../extensions';
 import { translationKey } from '../../translations';
+import { type EditorViewMode } from '../../types';
 
 const createViewModeGroupAction = (value: string) =>
   createEditorActionGroup(

package/src/components/Popover/RefDropdownMenu.tsx

@@ -11,17 +11,23 @@ import { DropdownMenu } from '@dxos/react-ui';
 
 import { type PreviewLinkRef, type PreviewLinkTarget, type PreviewLookup } from '../../extensions';
 
-// TODO(burdon): Reconcile with RefPopover?
+// TODO(burdon): Reconcile this file with RefPopover?
 
 const customEventOptions = { capture: true, passive: false };
 
 // Create a context for the dxn value.
-type RefDropdownMenuValue = Partial<{ link: PreviewLinkRef; target: PreviewLinkTarget; pending: boolean }>;
+type RefDropdownMenuValue = Partial<{
+  link: PreviewLinkRef;
+  target: PreviewLinkTarget;
+  pending: boolean;
+}>;
 
 const REF_DROPDOWN_MENU = 'RefDropdownMenu';
 const [RefDropdownMenuContextProvider, useRefDropdownMenu] = createContext<RefDropdownMenuValue>(REF_DROPDOWN_MENU, {});
 
-type RefDropdownMenuProviderProps = PropsWithChildren<{ onLookup?: PreviewLookup }>;
+type RefDropdownMenuProviderProps = PropsWithChildren<{
+  onLookup?: PreviewLookup;
+}>;
 
 const RefDropdownMenuProvider = ({ children, onLookup }: RefDropdownMenuProviderProps) => {
   const trigger = useRef<DxRefTag | null>(null);

package/src/components/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2022 DXOS.org
 //
 
+export * from './Editor';
 export * from './EditorToolbar';
 export * from './Popover';

package/src/extensions/automerge/automerge.stories.tsx

@@ -19,7 +19,7 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { editorSlots } from '../../defaults';
 import { useTextEditor } from '../../hooks';
-import translations from '../../translations';
+import { translations } from '../../translations';
 import { createBasicExtensions, createDataExtensions, createThemeExtensions } from '../factories';
 
 const initialContent = 'Hello world!';
@@ -93,7 +93,9 @@ export default {
   component: Editor,
   decorators: [withTheme, withLayout({ fullscreen: true })],
   render: () => <Story />,
-  parameters: { translations },
+  parameters: {
+    translations,
+  },
 };
 
 const EchoStory = ({ spaceKey }: ClientRepeatedComponentProps) => {

package/src/extensions/blast.ts

@@ -9,6 +9,7 @@ import { type Extension } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 import defaultsDeep from 'lodash.defaultsdeep';
 
+import { throttle } from '@dxos/async';
 import { invariant } from '@dxos/invariant';
 
 export type BlastOptions = {
@@ -214,12 +215,12 @@ class Blaster {
     requestAnimationFrame(this.loop.bind(this));
   }
 
-  shake = throttle<{ time: number }>(({ time }) => {
+  shake = throttle(({ time }: { time: number }) => {
     this._shakeTime = this._shakeTimeMax || time;
     this._shakeTimeMax = time;
   }, 100);
 
-  spawn = throttle<{ element: Element; point: { x: number; y: number } }>(({ element, point }) => {
+  spawn = throttle(({ element, point }: { element: Element; point: { x: number; y: number } }) => {
     const color = getRGBComponents(element, this._options.color);
     const numParticles = random(this._options.particleNumRange.min, this._options.particleNumRange.max);
     const dir = this._lastPoint.x === point.x ? 0 : this._lastPoint.x < point.x ? 1 : -1;
@@ -336,20 +337,6 @@ class Effect2 extends Effect {
 // Utils
 //
 
-function throttle<T>(callback: (arg: T) => void, limit: number): (arg: T) => void {
-  let wait = false;
-  return function (...args: any[]) {
-    if (!wait) {
-      // @ts-ignore
-      callback.apply(this, args);
-      wait = true;
-      setTimeout(() => {
-        wait = false;
-      }, limit);
-    }
-  };
-}
-
 const getRGBComponents = (node: Element, color: BlastOptions['color']): Particle['color'] => {
   if (typeof color === 'function') {
     return color();

package/src/extensions/command/index.ts

@@ -6,5 +6,5 @@ export * from './action';
 export * from './command';
 export * from './command-menu';
 export * from './floating-menu';
-export * from './useCommandMenu';
 export * from './typeahead';
+export * from './useCommandMenu';

package/src/extensions/command/typeahead.ts

@@ -87,30 +87,43 @@ export const typeahead = ({ onComplete }: TypeaheadOptions = {}): Extension => {
   ];
 };
 
+type CompletionOptions = {
+  default?: string;
+  minLength?: number;
+};
+
 /**
  * Util to match current line to a static list of completions.
  */
 export const staticCompletion =
-  (completions: string[], defaultCompletion?: string) =>
+  (completions: string[], options: CompletionOptions = {}) =>
   ({ line }: TypeaheadContext) => {
-    if (line.length === 0 && defaultCompletion) {
-      return defaultCompletion;
+    if (line.length === 0 && options.default) {
+      return options.default;
     }
 
-    const words = line.split(/\s+/).filter(Boolean);
-    if (words.length) {
-      const word = words.at(-1)!;
-      for (const completion of completions) {
-        const match = matchCompletion(completion, word);
-        if (match) {
-          return match;
+    const parts = line.split(/\s+/).filter(Boolean);
+    if (parts.length) {
+      const str = parts.at(-1)!;
+      if (str.length >= (options.minLength ?? 0)) {
+        for (const completion of completions) {
+          const match = matchCompletion(completion, str);
+          if (match) {
+            return match;
+          }
         }
       }
     }
   };
 
-export const matchCompletion = (completion: string, word: string): string | undefined => {
-  if (completion.length > word.length && completion.startsWith(word)) {
-    return completion.slice(word.length);
+export const matchCompletion = (completion: string, str: string, minLength = 0): string | undefined => {
+  if (
+    str.length >= minLength &&
+    completion.length > str.length &&
+    completion.startsWith(str)
+    // TODO(burdon): If case insensitive, need to replace existing chars.
+    // completion.toLowerCase().startsWith(str.toLowerCase())
+  ) {
+    return completion.slice(str.length);
   }
 };

package/src/extensions/factories.ts

@@ -83,7 +83,7 @@ const defaultBasicOptions: BasicExtensionsOptions = {
   keymap: 'standard',
   lineWrapping: true,
   search: true,
-};
+} as const;
 
 const keymaps: { [key: string]: readonly KeyBinding[] } = {
   // https://codemirror.net/docs/ref/#commands.standardKeymap
@@ -93,7 +93,7 @@ const keymaps: { [key: string]: readonly KeyBinding[] } = {
 };
 
 export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extension => {
-  const props: BasicExtensionsOptions = defaultsDeep({}, _props, defaultBasicOptions);
+  const props = defaultsDeep({}, _props, defaultBasicOptions);
   return [
     // NOTE: Doesn't catch errors in keymap functions.
     EditorView.exceptionSink.of((err) => {
@@ -157,17 +157,28 @@ export type ThemeExtensionsOptions = {
     scroll?: {
       className?: string;
     };
+    scroller?: {
+      className?: string;
+    };
     content?: {
       className?: string;
     };
   };
 };
 
-const defaultThemeSlots = {
+export const grow: ThemeExtensionsOptions['slots'] = {
   editor: {
-    className: 'w-full bs-full',
+    className: 'is-full bs-full',
   },
-};
+} as const;
+
+export const fullWidth: ThemeExtensionsOptions['slots'] = {
+  editor: {
+    className: 'is-full',
+  },
+} as const;
+
+export const defaultThemeSlots = grow;
 
 /**
  * https://codemirror.net/examples/styling
@@ -195,6 +206,14 @@ export const createThemeExtensions = ({
           }
         },
       ),
+    slots.scroller?.className &&
+      ViewPlugin.fromClass(
+        class {
+          constructor(view: EditorView) {
+            view.dom.querySelector('.cm-scroller')?.classList.add(...slots.scroller.className.split(' '));
+          }
+        },
+      ),
   ].filter(isNotFalsy);
 };
 

package/src/extensions/markdown/formatting.test.ts

@@ -182,7 +182,7 @@ describe('removeStyle', () => {
 
   testCommand('can remove code style', 'a `{variable}`', code, 'a {variable}');
 
-  // TODO(dmaretskyi): Flaky on CI: https://cloud.nx.app/runs/0byxg4Uq5G/task/react-ui-editor%3Atest
+  // TODO(dmaretskyi): Flaky on CI.
   // testCommand(
   //   'can remove emphasis across multiple blocks',
   //   '{*one*\n\n# *two*\n\n> 1. *three} four*\n',

package/src/extensions/markdown/formatting.ts

@@ -13,10 +13,11 @@ import {
   type StateCommand,
   type Text,
 } from '@codemirror/state';
-import { EditorView, keymap } from '@codemirror/view';
+import { EditorView, keymap, type ViewUpdate } from '@codemirror/view';
 import { type SyntaxNodeRef, type SyntaxNode } from '@lezer/common';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 
+import { debounceAndThrottle } from '@dxos/async';
 import { type Live } from '@dxos/live-object';
 
 import { type EditorToolbarState } from '../../components';
@@ -1251,15 +1252,16 @@ export const getFormatting = (state: EditorState): Formatting => {
  * Hook provides an extension to compute the current formatting state.
  */
 export const useFormattingState = (state: Live<EditorToolbarState>): Extension => {
-  return useMemo(
-    () =>
-      EditorView.updateListener.of((update) => {
-        if (update.docChanged || update.selectionSet) {
-          Object.entries(getFormatting(update.state)).forEach(([key, active]) => {
-            state[key as keyof Formatting] = active as any;
-          });
-        }
-      }),
-    [],
+  const handleUpdate = useCallback(
+    debounceAndThrottle((update: ViewUpdate) => {
+      if (update.docChanged || update.selectionSet) {
+        Object.entries(getFormatting(update.state)).forEach(([key, active]) => {
+          state[key as keyof Formatting] = active as any;
+        });
+      }
+    }, 100),
+    [state],
   );
+
+  return useMemo(() => EditorView.updateListener.of(handleUpdate), [handleUpdate]);
 };

package/src/extensions/modes.ts

@@ -6,18 +6,9 @@ import { type Extension } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
 import { vim } from '@replit/codemirror-vim';
 import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
-import { Schema } from 'effect';
 
 import { singleValueFacet } from '../util';
 
-export const EditorViewModes = ['preview', 'readonly', 'source'] as const;
-export const EditorViewMode = Schema.Union(...EditorViewModes.map((mode) => Schema.Literal(mode)));
-export type EditorViewMode = Schema.Schema.Type<typeof EditorViewMode>;
-
-export const EditorInputModes = ['default', 'vim', 'vscode'] as const;
-export const EditorInputMode = Schema.Union(...EditorInputModes.map((mode) => Schema.Literal(mode)));
-export type EditorInputMode = Schema.Schema.Type<typeof EditorInputMode>;
-
 export type EditorInputConfig = {
   type?: string;
   noTabster?: boolean;

package/src/index.ts

@@ -2,7 +2,7 @@
 // Copyright 2022 DXOS.org
 //
 
-import translations from './translations';
+import { translations } from './translations';
 
 export { type Extension, EditorState } from '@codemirror/state';
 export { EditorView, keymap } from '@codemirror/view';

package/src/stories/CommandMenu.stories.tsx

@@ -5,7 +5,7 @@
 import '@dxos-theme';
 
 import { type EditorView } from '@codemirror/view';
-import { type StoryObj } from '@storybook/react';
+import { type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useRef } from 'react';
 
 import { Obj, Query } from '@dxos/echo';
@@ -113,7 +113,7 @@ export const Link: Story = {
           return [];
         }
 
-        const name = query?.startsWith('@') ? query.slice(1).toLowerCase() : query?.toLowerCase() ?? '';
+        const name = query?.startsWith('@') ? query.slice(1).toLowerCase() : (query?.toLowerCase() ?? '');
         const result = await space?.db.query(Query.type(Testing.Contact)).run();
         const items = result.objects
           .filter((object) => object.name.toLowerCase().includes(name))

package/src/stories/EditorToolbar.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type StoryObj } from '@storybook/react';
+import { type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useState } from 'react';
 
 import { invariant } from '@dxos/invariant';
@@ -15,8 +15,6 @@ import { type Meta, withLayout, withTheme } from '@dxos/storybook-utils';
 import { EditorToolbar, useEditorToolbarState } from '../components';
 import { editorWidth } from '../defaults';
 import {
-  type EditorInputMode,
-  type EditorViewMode,
   InputModeExtensions,
   createMarkdownExtensions,
   createBasicExtensions,
@@ -26,7 +24,8 @@ import {
   useFormattingState,
 } from '../extensions';
 import { useTextEditor, type UseTextEditorProps } from '../hooks';
-import translations from '../translations';
+import { translations } from '../translations';
+import { type EditorInputMode, type EditorViewMode } from '../types';
 
 type StoryProps = { placeholder?: string } & UseTextEditorProps;
 

package/src/stories/Preview.stories.tsx

@@ -48,10 +48,10 @@ const PreviewCard = () => {
     <Popover.Portal>
       <Popover.Content onOpenAutoFocus={(event) => event.preventDefault()}>
         <Popover.Viewport>
-          <Card.Container role='popover'>
+          <Card.SurfaceRoot role='card--popover'>
             <Card.Heading>{target?.label}</Card.Heading>
             {target && <Card.Text classNames='line-clamp-3'>{target.text}</Card.Text>}
-          </Card.Container>
+          </Card.SurfaceRoot>
         </Popover.Viewport>
         <Popover.Arrow />
       </Popover.Content>
@@ -126,7 +126,7 @@ const PreviewBlock = ({ link, el, view }: { link: PreviewLinkRef; el: HTMLElemen
   }, [handleAction, link, target]);
 
   return createPortal(
-    <Card.Content classNames={hoverableControls}>
+    <Card.StaticRoot classNames={hoverableControls}>
       <div className='flex items-start'>
         {!view?.state.readOnly && (
           <Card.Toolbar classNames='is-min p-[--dx-cardSpacingInline]'>
@@ -159,7 +159,7 @@ const PreviewBlock = ({ link, el, view }: { link: PreviewLinkRef; el: HTMLElemen
         </Card.Heading>
       </div>
       {target && <Card.Text classNames='line-clamp-3 mbs-0'>{target.text}</Card.Text>}
-    </Card.Content>,
+    </Card.StaticRoot>,
     el,
   );
 };

package/src/stories/TextEditor.stories.tsx

@@ -217,7 +217,7 @@ export const Typeahead = {
       extensions={[
         decorateMarkdown({ renderLinkButton }),
         typeahead({
-          onComplete: staticCompletion(completions, completions[0]),
+          onComplete: staticCompletion(completions, { minLength: 2 }),
         }),
       ]}
     />