@dxos/plugin-markdown 0.8.3 → 0.8.4-main.1f223c7

package/src/capabilities/state.ts

@@ -2,25 +2,25 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, type PluginContext } from '@dxos/app-framework';
+import { Capabilities, type PluginContext, contributes } from '@dxos/app-framework';
 import { LocalStorageStore } from '@dxos/local-storage';
 import { type EditorViewMode, createEditorStateStore } from '@dxos/react-ui-editor';
 
+import { meta } from '../meta';
+import { type Markdown, type MarkdownPluginState } from '../types';
+
 import { MarkdownCapabilities } from './capabilities';
-import { MARKDOWN_PLUGIN } from '../meta';
-import { type MarkdownPluginState, type MarkdownSettingsProps } from '../types';
 
 export default (context: PluginContext) => {
-  const state = new LocalStorageStore<MarkdownPluginState>(MARKDOWN_PLUGIN, { extensionProviders: [], viewMode: {} });
+  const state = new LocalStorageStore<MarkdownPluginState>(meta.id, { extensionProviders: [], viewMode: {} });
   state.prop({ key: 'viewMode', type: LocalStorageStore.json<{ [key: string]: EditorViewMode }>() });
 
   // TODO(wittjosiah): Fold into state.
-  const editorState = createEditorStateStore(`${MARKDOWN_PLUGIN}/editor`);
+  const editorState = createEditorStateStore(`${meta.id}/editor`);
 
   const getViewMode = (id: string) => {
-    const defaultViewMode = context
-      .getCapability(Capabilities.SettingsStore)
-      .getStore<MarkdownSettingsProps>(MARKDOWN_PLUGIN)!.value.defaultViewMode;
+    const defaultViewMode = context.getCapability(Capabilities.SettingsStore).getStore<Markdown.Settings>(meta.id)!
+      .value.defaultViewMode;
     return (id && state.values.viewMode[id]) || defaultViewMode;
   };
 

package/src/capabilities/toolkit.ts

@@ -0,0 +1,47 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { AiTool, AiToolkit } from '@effect/ai';
+import { Effect, Schema } from 'effect';
+
+import { Capabilities, type Capability, type PluginContext, contributes, createIntent } from '@dxos/app-framework';
+import { invariant } from '@dxos/invariant';
+import { getActiveSpace } from '@dxos/plugin-space';
+import { SpaceAction } from '@dxos/plugin-space/types';
+
+import { MarkdownAction } from '../types';
+
+// TODO(burdon): Reconcile with functions (currently reuses plugin framework intents).
+class Toolkit extends AiToolkit.make(
+  AiTool.make('create-document', {
+    description: 'Creates a new markdown document.',
+    parameters: {
+      name: Schema.optional(Schema.String),
+      content: Schema.optional(Schema.String),
+    },
+    // TODO(wittjosiah): Return document.
+    success: Schema.Any,
+    failure: Schema.Never,
+  }),
+) {
+  static layer = (context: PluginContext) =>
+    Toolkit.toLayer({
+      'create-document': ({ name, content }) => {
+        const { dispatch } = context.getCapability(Capabilities.IntentDispatcher);
+        const space = getActiveSpace(context);
+        invariant(space, 'No active space');
+
+        return Effect.gen(function* () {
+          const { object } = yield* dispatch(createIntent(MarkdownAction.Create, { name, content }));
+          yield* dispatch(createIntent(SpaceAction.AddObject, { object, target: space }));
+          return { id: object.id };
+        }).pipe(Effect.orDie);
+      },
+    });
+}
+
+export default (context: PluginContext): Capability<any>[] => [
+  contributes(Capabilities.Toolkit, Toolkit),
+  contributes(Capabilities.ToolkitHandler, Toolkit.layer(context)),
+];

package/src/components/MarkdownCard/MarkdownCard.stories.tsx

@@ -0,0 +1,79 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { IntentPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Markdown } from '@dxos/plugin-markdown/types';
+import { faker } from '@dxos/random';
+import { CardContainer } from '@dxos/react-ui-stack/testing';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { translations } from '../../translations';
+
+import { MarkdownCard } from './MarkdownCard';
+
+faker.seed(1234);
+
+const meta: Meta<typeof MarkdownCard> = {
+  title: 'plugins/plugin-markdown/Card',
+  component: MarkdownCard,
+  render: ({ role, subject, ...args }) => {
+    return (
+      <CardContainer icon='ph--text-aa--regular' role={role}>
+        <MarkdownCard role={role} subject={subject} {...args} />
+      </CardContainer>
+    );
+  },
+  decorators: [
+    withPluginManager({
+      plugins: [IntentPlugin()],
+    }),
+    withTheme,
+    withLayout(),
+  ],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+  tags: ['cards'],
+} satisfies Meta<typeof MarkdownCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Popover: Story = {
+  args: {
+    role: 'card--popover',
+    subject: Markdown.makeDocument({
+      name: faker.lorem.words(3),
+      content: faker.lorem.paragraphs(3),
+    }),
+  },
+};
+
+export const Intrinsic: Story = {
+  args: {
+    role: 'card--intrinsic',
+    subject: Markdown.makeDocument({
+      name: faker.lorem.words(3),
+      content: faker.lorem.paragraphs(3),
+    }),
+  },
+};
+
+export const Extrinsic: Story = {
+  args: {
+    role: 'card--extrinsic',
+    subject: Markdown.makeDocument({
+      name: faker.lorem.words(3),
+      content: faker.lorem.paragraphs(3),
+    }),
+  },
+};

package/src/components/{MarkdownPreview/MarkdownPreview.tsx → MarkdownCard/MarkdownCard.tsx}

@@ -5,7 +5,7 @@
 import { pipe } from 'effect';
 import React, { useCallback } from 'react';
 
-import { chain, createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, chain, createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { Obj } from '@dxos/echo';
 import { type PreviewProps } from '@dxos/plugin-preview';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
@@ -13,13 +13,13 @@ import { Button, Icon, useTranslation } from '@dxos/react-ui';
 import { Card } from '@dxos/react-ui-stack';
 import { DataType } from '@dxos/schema';
 
-import { MARKDOWN_PLUGIN } from '../../meta';
-import { DocumentType } from '../../types';
+import { meta } from '../../meta';
+import { Markdown } from '../../types';
 import { getAbstract, getFallbackName } from '../../util';
 
 // TODO(burdon): Factor out.
-const getTitle = (subject: DocumentType | DataType.Text, fallback: string) => {
-  if (Obj.instanceOf(DocumentType, subject)) {
+const getTitle = (subject: Markdown.Document | DataType.Text, fallback: string) => {
+  if (Obj.instanceOf(Markdown.Document, subject)) {
     return subject.name ?? subject.fallbackName ?? getFallbackName(subject.content?.target?.content ?? fallback);
   } else if (Obj.instanceOf(DataType.Text, subject)) {
     return getFallbackName(subject.content);
@@ -27,17 +27,19 @@ const getTitle = (subject: DocumentType | DataType.Text, fallback: string) => {
 };
 
 // TODO(burdon): Factor out.
-const getSnippet = (subject: DocumentType | DataType.Text, fallback: string) => {
-  if (Obj.instanceOf(DocumentType, subject)) {
+const getSnippet = (subject: Markdown.Document | DataType.Text, fallback: string) => {
+  if (Obj.instanceOf(Markdown.Document, subject)) {
     return getAbstract(subject.content?.target?.content ?? fallback);
   } else if (Obj.instanceOf(DataType.Text, subject)) {
     return getAbstract(subject.content);
   }
 };
 
-export const MarkdownPreview = ({ subject, role }: PreviewProps<DocumentType | DataType.Text>) => {
+export type MarkdownCardProps = PreviewProps<Markdown.Document | DataType.Text>;
+
+export const MarkdownCard = ({ subject, role }: MarkdownCardProps) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const { t } = useTranslation(MARKDOWN_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const snippet = getSnippet(subject, t('fallback abstract'));
 
   // TODO(wittjosiah): Factor out so this component isn't dependent on the app framework.
@@ -57,15 +59,17 @@ export const MarkdownPreview = ({ subject, role }: PreviewProps<DocumentType | D
   );
 
   return (
-    <Card.Container role={role}>
+    <Card.SurfaceRoot role={role}>
       <Card.Heading>{getTitle(subject, t('fallback title'))}</Card.Heading>
       {snippet && <Card.Text classNames='line-clamp-3 break-words col-span-2'>{snippet}</Card.Text>}
-      <Card.Chrome>
-        <Button onClick={handleNavigate}>
-          <span className='grow'>{t('navigate to document label')}</span>
-          <Icon icon='ph--arrow-right--regular' />
-        </Button>
-      </Card.Chrome>
-    </Card.Container>
+      {role === 'card--popover' && (
+        <Card.Chrome>
+          <Button onClick={handleNavigate}>
+            <span className='grow'>{t('navigate to document label')}</span>
+            <Icon icon='ph--arrow-right--regular' />
+          </Button>
+        </Card.Chrome>
+      )}
+    </Card.SurfaceRoot>
   );
 };

package/src/components/MarkdownCard/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { MarkdownCard } from './MarkdownCard';
+
+export * from './MarkdownCard';
+
+export default MarkdownCard;

package/src/components/MarkdownContainer.stories.tsx

@@ -4,13 +4,13 @@
 
 import '@dxos-theme';
 
-import { type Meta } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
 
-import { Capabilities, contributes, IntentPlugin, SettingsPlugin, Surface } from '@dxos/app-framework';
+import { Capabilities, IntentPlugin, SettingsPlugin, Surface, contributes } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { todo } from '@dxos/debug';
-import { Obj, Query, Ref, Type } from '@dxos/echo';
+import { Query, Type } from '@dxos/echo';
 import { AttentionPlugin } from '@dxos/plugin-attention';
 import { ClientPlugin } from '@dxos/plugin-client';
 import { GraphPlugin } from '@dxos/plugin-graph';
@@ -22,12 +22,12 @@ import { faker } from '@dxos/random';
 import { useQuery, useSpace } from '@dxos/react-client/echo';
 import { defaultTx } from '@dxos/react-ui-theme';
 import { DataType } from '@dxos/schema';
-import { createObjectFactory, Testing, type ValueGenerator } from '@dxos/schema/testing';
+import { Testing, type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
 import { withLayout } from '@dxos/storybook-utils';
 
 import { MarkdownPlugin } from '../MarkdownPlugin';
-import translations from '../translations';
-import { DocumentType } from '../types';
+import { translations } from '../translations';
+import { Markdown } from '../types';
 
 faker.seed(1);
 
@@ -35,13 +35,13 @@ const generator: ValueGenerator = faker as any;
 
 const DefaultStory = () => {
   const space = useSpace();
-  const [doc] = useQuery(space, Query.type(DocumentType));
+  const [doc] = useQuery(space, Query.type(Markdown.Document));
   const data = useMemo(() => ({ subject: doc }), [doc]);
 
   return <Surface role='article' data={data} />;
 };
 
-const meta: Meta<typeof DefaultStory> = {
+const meta = {
   title: 'plugins/plugin-markdown/MarkdownContainer',
   render: DefaultStory,
   decorators: [
@@ -51,16 +51,13 @@ const meta: Meta<typeof DefaultStory> = {
         ThemePlugin({ tx: defaultTx }),
         StorybookLayoutPlugin(),
         ClientPlugin({
-          types: [DocumentType, DataType.Text, Testing.Contact],
-          onClientInitialized: async (_, client) => {
+          types: [Markdown.Document, DataType.Text, Testing.Contact],
+          onClientInitialized: async ({ client }) => {
             await client.halo.createIdentity();
             await client.spaces.waitUntilReady();
             await client.spaces.default.waitUntilReady();
             const space = client.spaces.default;
-            const doc = Obj.make(DocumentType, {
-              name: 'Test',
-              content: Ref.make(Obj.make(DataType.Text, { content: '# Test\n\n' })),
-            });
+            const doc = Markdown.makeDocument({ name: 'Test', content: '# Test\n\n' });
             space.db.add(doc);
             const createObjects = createObjectFactory(space.db, generator);
             await createObjects([{ type: Testing.Contact, count: 10 }]);
@@ -94,10 +91,10 @@ const meta: Meta<typeof DefaultStory> = {
     translations,
     controls: { disable: true },
   },
-};
+} satisfies Meta<typeof Capabilities>;
 
 export default meta;
 
-type Story = Meta<typeof DefaultStory>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};

package/src/components/MarkdownContainer.tsx

@@ -7,7 +7,8 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { Capabilities, Surface, useAppGraph, useCapabilities, usePluginManager } from '@dxos/app-framework';
-import { DXN, Filter, Obj, Query } from '@dxos/echo';
+import { DXN, Filter, Obj, Query, Type } from '@dxos/echo';
+import { ClientCapabilities } from '@dxos/plugin-client';
 import { SpaceCapabilities } from '@dxos/plugin-space';
 import { fullyQualifiedId, getSpace, useQuery, useSpace } from '@dxos/react-client/echo';
 import { toLocalizedString, useTranslation } from '@dxos/react-ui';
@@ -15,29 +16,30 @@ import { type SelectionManager } from '@dxos/react-ui-attention';
 import {
   type CommandMenuGroup,
   type CommandMenuItem,
-  insertAtCursor,
-  insertAtLineStart,
   type PreviewLinkRef,
   type PreviewOptions,
+  insertAtCursor,
+  insertAtLineStart,
 } from '@dxos/react-ui-editor';
 import { DataType } from '@dxos/schema';
 
-import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
 import { useExtensions } from '../extensions';
-import { DocumentType, type MarkdownSettingsProps } from '../types';
+import { Markdown } from '../types';
 import { getFallbackName } from '../util';
 
+import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
+
 export type MarkdownContainerProps = Pick<
   MarkdownEditorProps,
   'role' | 'extensionProviders' | 'viewMode' | 'editorStateStore' | 'onViewModeChange'
 > & {
   id: string;
-  object: DocumentType | DataType.Text | any;
-  settings: MarkdownSettingsProps;
+  object: Markdown.Document | DataType.Text | any;
+  settings: Markdown.Settings;
   selectionManager?: SelectionManager;
 };
 
-const MarkdownContainer = ({
+export const MarkdownContainer = ({
   id,
   role,
   object,
@@ -49,7 +51,7 @@ const MarkdownContainer = ({
 }: MarkdownContainerProps) => {
   const { t } = useTranslation();
   const scrollPastEnd = role === 'article';
-  const doc = Obj.instanceOf(DocumentType, object) ? object : undefined;
+  const doc = Obj.instanceOf(Markdown.Document, object) ? object : undefined;
   const text = Obj.instanceOf(DataType.Text, object) ? object : undefined;
   const [previewBlocks, setPreviewBlocks] = useState<{ link: PreviewLinkRef; el: HTMLElement }[]>([]);
   const previewOptions = useMemo(
@@ -83,18 +85,30 @@ const MarkdownContainer = ({
   );
   const space = getSpace(object);
   const objectForms = useCapabilities(SpaceCapabilities.ObjectForm);
-  const filter = useMemo(() => Filter.or(...objectForms.map((form) => Filter.type(form.objectSchema))), [objectForms]);
+  const schemaWhiteList = useCapabilities(ClientCapabilities.SchemaWhiteList);
+  const filter = useMemo(
+    () =>
+      Filter.or(
+        ...objectForms.map((form) => Filter.type(form.objectSchema)),
+        ...schemaWhiteList.flat().map((schema) => Filter.typename(Type.getTypename(schema))),
+      ),
+    [objectForms, schemaWhiteList],
+  );
   const onLinkQuery = useCallback(
     async (query?: string): Promise<CommandMenuGroup[]> => {
-      const name = query?.startsWith('@') ? query.slice(1).toLowerCase() : query?.toLowerCase() ?? '';
+      const name = query?.startsWith('@') ? query.slice(1).toLowerCase() : (query?.toLowerCase() ?? '');
       const results = await space?.db.query(Query.select(filter)).run();
       // TODO(wittjosiah): Use `Obj.Any` type.
       const getLabel = (object: any) => {
+        const label = Obj.getLabel(object);
+        if (label) {
+          return label;
+        }
+
+        // TODO(wittjosiah): Remove metadata labels.
         const type = Obj.getTypename(object)!;
         const metadata = resolve(type);
-        return (
-          metadata.label?.(object) || object.name || ['object name placeholder', { ns: type, default: 'New object' }]
-        );
+        return metadata.label?.(object) || ['object name placeholder', { ns: type, default: 'New object' }];
       };
       const items =
         results?.objects
@@ -108,7 +122,7 @@ const MarkdownContainer = ({
               label,
               icon: metadata.icon,
               onSelect: (view, head) => {
-                const link = `[${label}][${Obj.getDXN(object)}]`;
+                const link = `[${label}](${Obj.getDXN(object)})`;
                 if (query?.startsWith('@')) {
                   insertAtLineStart(view, head, `!${link}\n`);
                 } else {
@@ -181,12 +195,12 @@ const PreviewBlock = ({ link, el }: { link: PreviewLinkRef; el: HTMLElement }) =
   const [subject] = useQuery(space, Query.select(Filter.ids(echoDXN?.echoId ?? '')));
   const data = useMemo(() => ({ subject }), [subject]);
 
-  return createPortal(<Surface role='card--document' data={data} limit={1} />, el);
+  return createPortal(<Surface role='card--transclusion' data={data} limit={1} />, el);
 };
 
 type DocumentEditorProps = Omit<MarkdownContainerProps, 'object' | 'extensionProviders' | 'editorStateStore'> &
   Pick<MarkdownEditorProps, 'id' | 'scrollPastEnd' | 'extensions' | 'onLinkQuery'> & {
-    document: DocumentType;
+    document: Markdown.Document;
   };
 
 export const DocumentEditor = ({ id, document: doc, settings, viewMode, ...props }: DocumentEditorProps) => {

package/src/components/MarkdownEditor/MarkdownEditor.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type Meta } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
 
 import { IntentPlugin } from '@dxos/app-framework';
@@ -14,8 +14,9 @@ import { withAttention } from '@dxos/react-ui-attention/testing';
 import { automerge, translations as editorTranslations } from '@dxos/react-ui-editor';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
+import { translations } from '../../translations';
+
 import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
-import translations from '../../translations';
 
 const content = Array.from({ length: 100 }, (_, i) => `Line ${i + 1}`).join('\n');
 
@@ -30,9 +31,9 @@ const DefaultStory = ({ content = '# Test', toolbar }: StoryProps) => {
   return <MarkdownEditor id='test' initialValue={doc.content} extensions={extensions} toolbar={toolbar} />;
 };
 
-const meta: Meta<typeof MarkdownEditor> = {
+const meta = {
   title: 'plugins/plugin-markdown/MarkdownEditor',
-  component: MarkdownEditor,
+  component: MarkdownEditor as any,
   render: DefaultStory,
   decorators: [
     withPluginManager({ plugins: [IntentPlugin()] }),
@@ -43,17 +44,19 @@ const meta: Meta<typeof MarkdownEditor> = {
   parameters: {
     translations: [...translations, ...editorTranslations],
   },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-export const Default = {
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
   args: {
     content,
   },
 };
 
-export const WithToolbar = {
+export const WithToolbar: Story = {
   args: {
     toolbar: true,
     content,

package/src/components/MarkdownEditor/MarkdownEditor.tsx

@@ -3,26 +3,26 @@
 //
 
 import { type EditorView } from '@codemirror/view';
-import React, { forwardRef, useMemo, useEffect, useCallback, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { useDropzone } from 'react-dropzone';
 
 import { type FileInfo } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
 import { toLocalizedString, useThemeContext, useTranslation } from '@dxos/react-ui';
 import {
-  CommandMenu,
   type CommandMenuGroup,
+  CommandMenuProvider,
   type DNDOptions,
+  Domino,
   type EditorInputMode,
   type EditorSelectionState,
   type EditorStateStore,
   EditorToolbar,
   type EditorToolbarActionGraphProps,
   type EditorViewMode,
-  RefPopover,
+  type UseCommandMenuOptions,
   type UseTextEditorProps,
   addLink,
-  createElement,
   coreSlashCommands,
   createBasicExtensions,
   createMarkdownExtensions,
@@ -34,26 +34,25 @@ import {
   linkSlashCommands,
   processEditorPayload,
   stackItemContentEditorClassNames,
+  useCommandMenu,
   useEditorToolbarState,
   useFormattingState,
   useTextEditor,
-  useCommandMenu,
-  type UseCommandMenuOptions,
 } from '@dxos/react-ui-editor';
 import { StackItem } from '@dxos/react-ui-stack';
-import { isNotFalsy, isNonNullable } from '@dxos/util';
+import { isNonNullable, isNotFalsy } from '@dxos/util';
 
 import { useSelectCurrentThread } from '../../hooks';
-import { MARKDOWN_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 import { type MarkdownPluginState } from '../../types';
 
 export type MarkdownEditorProps = {
   id: string;
   role?: string;
+  toolbar?: boolean;
   inputMode?: EditorInputMode;
   scrollPastEnd?: boolean;
   slashCommandGroups?: CommandMenuGroup[];
-  toolbar?: boolean;
   customActions?: EditorToolbarActionGraphProps['customActions'];
   // TODO(wittjosiah): Generalize custom toolbar actions (e.g. comment, upload, etc.)
   viewMode?: EditorViewMode;
@@ -70,7 +69,7 @@ export type MarkdownEditorProps = {
  * This allows it to be used as a common editor for markdown content on arbitrary backends (e.g. files).
  */
 export const MarkdownEditor = ({
-  extensions: _extensions,
+  extensions: extensionsParam,
   slashCommandGroups,
   onLinkQuery,
   ...props
@@ -100,32 +99,30 @@ export const MarkdownEditor = ({
       trigger,
       placeholder: {
         delay: 3_000,
-        content: () => {
-          return createElement('div', undefined, [
-            createElement('span', { text: 'Press' }),
-            ...trigger.map((text) =>
-              createElement('span', {
-                className: 'border border-separator rounded-sm mx-1 px-1.5 pt-[1px] pb-[2px]',
-                text,
-              }),
-            ),
-            createElement('span', { text: 'for commands.' }),
-          ]);
-        },
+        content: () =>
+          Domino.of('div')
+            .child(
+              Domino.of('span').text('Press'),
+              ...trigger.map((text) =>
+                Domino.of('span')
+                  .classNames('border border-separator rounded-sm mx-1 px-1.5 pt-[1px] pb-[2px]')
+                  .text(text),
+              ),
+              Domino.of('span').text('for commands.'),
+            )
+            .build(),
       },
       getMenu,
     };
   }, [getMenu]);
 
-  const { commandMenu, groupsRef, currentItem, onSelect, ...refPopoverProps } = useCommandMenu(options);
-
-  const extensions = useMemo(() => [_extensions, commandMenu].filter(isNotFalsy), [_extensions, commandMenu]);
+  const { commandMenu, groupsRef, ...commandMenuProps } = useCommandMenu(options);
+  const extensions = useMemo(() => [extensionsParam, commandMenu].filter(isNotFalsy), [extensionsParam, commandMenu]);
 
   return (
-    <RefPopover modal={false} {...refPopoverProps}>
+    <CommandMenuProvider groups={groupsRef.current} {...commandMenuProps}>
       <MarkdownEditorImpl ref={viewRef} {...props} extensions={extensions} />
-      <CommandMenu groups={groupsRef.current} currentItem={currentItem} onSelect={onSelect} />
-    </RefPopover>
+    </CommandMenuProvider>
   );
 };
 
@@ -147,7 +144,7 @@ const MarkdownEditorImpl = forwardRef<EditorView | undefined, MarkdownEditorProp
     },
     forwardedRef,
   ) => {
-    const { t } = useTranslation(MARKDOWN_PLUGIN);
+    const { t } = useTranslation(meta.id);
     const { themeMode } = useThemeContext();
     const toolbarState = useEditorToolbarState({ viewMode });
     const formattingObserver = useFormattingState(toolbarState);
@@ -185,8 +182,9 @@ const MarkdownEditorImpl = forwardRef<EditorView | undefined, MarkdownEditorProp
             readOnly: viewMode === 'readonly',
             placeholder: t('editor placeholder'),
             scrollPastEnd: role === 'section' ? false : scrollPastEnd,
+            search: true,
           }),
-          createMarkdownExtensions({ themeMode }),
+          createMarkdownExtensions(),
           createThemeExtensions({ themeMode, syntaxHighlighting: true, slots: editorSlots }),
           editorGutter,
           role !== 'section' && onFileUpload && dropFile({ onDrop: handleDrop }),