@dxos/plugin-markdown 0.8.4-main.67995b8 → 0.8.4-main.c4373fc

package/src/capabilities/toolkit.ts

@@ -0,0 +1,49 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Tool from '@effect/ai/Tool';
+import * as Toolkit from '@effect/ai/Toolkit';
+import * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
+
+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 MarkdownToolkit extends Toolkit.make(
+  Tool.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) =>
+    MarkdownToolkit.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, MarkdownToolkit),
+  contributes(Capabilities.ToolkitHandler, MarkdownToolkit.layer(context)),
+];

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

@@ -2,44 +2,43 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+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 { withTheme } from '@dxos/react-ui/testing';
 import { CardContainer } from '@dxos/react-ui-stack/testing';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
 
-import { MarkdownPreview } from './MarkdownPreview';
 import { translations } from '../../translations';
 
+import { MarkdownCard } from './MarkdownCard';
+
 faker.seed(1234);
 
-const meta: Meta<typeof MarkdownPreview> = {
-  title: 'Cards/plugin-markdown',
-  component: MarkdownPreview,
+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}>
-        <MarkdownPreview role={role} subject={subject} {...args} />
+        <MarkdownCard role={role} subject={subject} {...args} />
       </CardContainer>
     );
   },
   decorators: [
+    withTheme,
     withPluginManager({
       plugins: [IntentPlugin()],
     }),
-    withTheme,
-    withLayout(),
   ],
   parameters: {
     layout: 'centered',
     translations,
   },
+  tags: ['cards'],
 };
 
 export default meta;
@@ -56,9 +55,9 @@ export const Popover: Story = {
   },
 };
 
-export const Extrinsic: Story = {
+export const Intrinsic: Story = {
   args: {
-    role: 'card--extrinsic',
+    role: 'card--intrinsic',
     subject: Markdown.makeDocument({
       name: faker.lorem.words(3),
       content: faker.lorem.paragraphs(3),
@@ -66,9 +65,9 @@ export const Extrinsic: Story = {
   },
 };
 
-export const Intrinsic: Story = {
+export const Extrinsic: Story = {
   args: {
-    role: 'card--intrinsic',
+    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}

@@ -2,10 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
-import { pipe } from 'effect';
+import * as Function from 'effect/Function';
 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';
@@ -35,7 +35,9 @@ const getSnippet = (subject: Markdown.Document | DataType.Text, fallback: string
   }
 };
 
-export const MarkdownPreview = ({ subject, role }: PreviewProps<Markdown.Document | DataType.Text>) => {
+export type MarkdownCardProps = PreviewProps<Markdown.Document | DataType.Text>;
+
+export const MarkdownCard = ({ subject, role }: MarkdownCardProps) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { t } = useTranslation(meta.id);
   const snippet = getSnippet(subject, t('fallback abstract'));
@@ -44,7 +46,7 @@ export const MarkdownPreview = ({ subject, role }: PreviewProps<Markdown.Documen
   const handleNavigate = useCallback(
     () =>
       dispatch(
-        pipe(
+        Function.pipe(
           createIntent(LayoutAction.UpdatePopover, {
             part: 'popover',
             subject: null,

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

@@ -2,28 +2,34 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
+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 {
+  type Capabilities,
+  IntentPlugin,
+  LayoutAction,
+  SettingsPlugin,
+  Surface,
+  createIntent,
+  useIntentDispatcher,
+} from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { todo } from '@dxos/debug';
-import { Query, Type } from '@dxos/echo';
+import { Obj, Query } from '@dxos/echo';
 import { AttentionPlugin } from '@dxos/plugin-attention';
 import { ClientPlugin } from '@dxos/plugin-client';
 import { GraphPlugin } from '@dxos/plugin-graph';
 import { PreviewPlugin } from '@dxos/plugin-preview';
-import { SpaceCapabilities, SpacePlugin } from '@dxos/plugin-space';
+import { SpacePlugin } from '@dxos/plugin-space';
 import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
 import { ThemePlugin } from '@dxos/plugin-theme';
 import { faker } from '@dxos/random';
 import { useQuery, useSpace } from '@dxos/react-client/echo';
+import { useAsyncEffect } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
 import { defaultTx } from '@dxos/react-ui-theme';
 import { DataType } from '@dxos/schema';
-import { createObjectFactory, Testing, type ValueGenerator } from '@dxos/schema/testing';
-import { withLayout } from '@dxos/storybook-utils';
+import { type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
 
 import { MarkdownPlugin } from '../MarkdownPlugin';
 import { translations } from '../translations';
@@ -34,67 +40,70 @@ faker.seed(1);
 const generator: ValueGenerator = faker as any;
 
 const DefaultStory = () => {
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const space = useSpace();
   const [doc] = useQuery(space, Query.type(Markdown.Document));
   const data = useMemo(() => ({ subject: doc }), [doc]);
 
-  return <Surface role='article' data={data} />;
+  useAsyncEffect(async () => {
+    if (space) {
+      await dispatch(createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: space.id }));
+    }
+  }, [space, dispatch]);
+
+  return <Surface role='article' data={data} limit={1} />;
 };
 
-const meta: Meta<typeof DefaultStory> = {
+const meta = {
   title: 'plugins/plugin-markdown/MarkdownContainer',
   render: DefaultStory,
   decorators: [
+    withTheme,
     withPluginManager({
       plugins: [
-        AttentionPlugin(),
-        ThemePlugin({ tx: defaultTx }),
-        StorybookLayoutPlugin(),
         ClientPlugin({
-          types: [Markdown.Document, DataType.Text, Testing.Contact],
-          onClientInitialized: async (_, client) => {
+          types: [Markdown.Document, DataType.Text, DataType.Person, DataType.Organization],
+          onClientInitialized: async ({ client }) => {
             await client.halo.createIdentity();
             await client.spaces.waitUntilReady();
             await client.spaces.default.waitUntilReady();
             const space = client.spaces.default;
-            const doc = Markdown.makeDocument({ name: 'Test', content: '# Test\n\n' });
+            const queue = space.queues.create();
+            const alice = Obj.make(DataType.Person, { fullName: 'Alice' });
+            const acme = Obj.make(DataType.Organization, { name: 'ACME' });
+            await queue.append([alice, acme]);
+            const doc = Markdown.makeDocument({
+              name: 'Test',
+              content: `# Test\n\n![Alice](${Obj.getDXN(alice)})\n\n![ACME](${Obj.getDXN(acme)})`,
+            });
             space.db.add(doc);
             const createObjects = createObjectFactory(space.db, generator);
-            await createObjects([{ type: Testing.Contact, count: 10 }]);
+            await createObjects([{ type: DataType.Organization, count: 10 }]);
             await space.db.flush({ indexes: true });
           },
         }),
-        SpacePlugin(),
-        SettingsPlugin(),
+        SpacePlugin({}),
+        GraphPlugin(),
         IntentPlugin(),
+        SettingsPlugin(),
+        // UI
+        ThemePlugin({ tx: defaultTx }),
+        AttentionPlugin(),
         MarkdownPlugin(),
         PreviewPlugin(),
-        GraphPlugin(),
-      ],
-      capabilities: [
-        // NOTE: Editor only queries for object form schemas when linking.
-        contributes(SpaceCapabilities.ObjectForm, {
-          objectSchema: Testing.Contact,
-          getIntent: () => todo(),
-        }),
-        contributes(Capabilities.Metadata, {
-          id: Type.getTypename(Testing.Contact),
-          metadata: {
-            icon: 'ph--user--regular',
-          },
-        }),
+        StorybookLayoutPlugin({}),
       ],
     }),
-    withLayout({ fullscreen: true }),
   ],
   parameters: {
-    translations,
+    layout: 'fullscreen',
     controls: { disable: true },
+    translations,
   },
-};
+} 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

@@ -10,24 +10,26 @@ import { Capabilities, Surface, useAppGraph, useCapabilities, usePluginManager }
 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 { useClient } from '@dxos/react-client';
+import { fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
 import { toLocalizedString, useTranslation } from '@dxos/react-ui';
 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 { Markdown } from '../types';
 import { getFallbackName } from '../util';
 
+import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
+
 export type MarkdownContainerProps = Pick<
   MarkdownEditorProps,
   'role' | 'extensionProviders' | 'viewMode' | 'editorStateStore' | 'onViewModeChange'
@@ -93,7 +95,8 @@ export const MarkdownContainer = ({
       ),
     [objectForms, schemaWhiteList],
   );
-  const onLinkQuery = useCallback(
+
+  const handleLinkQuery = useCallback(
     async (query?: string): Promise<CommandMenuGroup[]> => {
       const name = query?.startsWith('@') ? query.slice(1).toLowerCase() : (query?.toLowerCase() ?? '');
       const results = await space?.db.query(Query.select(filter)).run();
@@ -121,7 +124,7 @@ export 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 {
@@ -135,6 +138,7 @@ export const MarkdownContainer = ({
     [filter, resolve, space],
   );
 
+  // TODO(burdon): Reconcile variants.
   const editor = doc ? (
     <DocumentEditor
       id={fullyQualifiedId(object)}
@@ -145,7 +149,7 @@ export const MarkdownContainer = ({
       settings={settings}
       scrollPastEnd={scrollPastEnd}
       onViewModeChange={onViewModeChange}
-      onLinkQuery={space ? onLinkQuery : undefined}
+      onLinkQuery={space ? handleLinkQuery : undefined}
     />
   ) : text ? (
     <MarkdownEditor
@@ -158,10 +162,9 @@ export const MarkdownContainer = ({
       inputMode={settings.editorInputMode}
       scrollPastEnd={scrollPastEnd}
       onViewModeChange={onViewModeChange}
-      onLinkQuery={space ? onLinkQuery : undefined}
+      onLinkQuery={space ? handleLinkQuery : undefined}
     />
   ) : (
-    // TODO(burdon): Normalize with above.
     <MarkdownEditor
       id={id}
       role={role}
@@ -172,7 +175,7 @@ export const MarkdownContainer = ({
       inputMode={settings.editorInputMode}
       scrollPastEnd={scrollPastEnd}
       onViewModeChange={onViewModeChange}
-      onLinkQuery={space ? onLinkQuery : undefined}
+      onLinkQuery={space ? handleLinkQuery : undefined}
     />
   );
 
@@ -189,9 +192,9 @@ export const MarkdownContainer = ({
 // TODO(wittjosiah): This shouldn't be "card" but "block".
 //   It's not a preview card but an interactive embedded object.
 const PreviewBlock = ({ link, el }: { link: PreviewLinkRef; el: HTMLElement }) => {
-  const echoDXN = useMemo(() => DXN.parse(link.ref).asEchoDXN(), [link.ref]);
-  const space = useSpace(echoDXN?.spaceId);
-  const [subject] = useQuery(space, Query.select(Filter.ids(echoDXN?.echoId ?? '')));
+  const client = useClient();
+  const dxn = DXN.parse(link.ref);
+  const subject = client.graph.ref(dxn).target;
   const data = useMemo(() => ({ subject }), [subject]);
 
   return createPortal(<Surface role='card--transclusion' data={data} limit={1} />, el);

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

@@ -2,21 +2,21 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
 
 import { IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { createDocAccessor, createObject } from '@dxos/react-client/echo';
+import { withTheme } from '@dxos/react-ui/testing';
 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 { Stack, StackItem } from '@dxos/react-ui-stack';
 
-import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
 import { translations } from '../../translations';
 
+import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
+
 const content = Array.from({ length: 100 }, (_, i) => `Line ${i + 1}`).join('\n');
 
 type StoryProps = MarkdownEditorProps & {
@@ -27,33 +27,37 @@ type StoryProps = MarkdownEditorProps & {
 const DefaultStory = ({ content = '# Test', toolbar }: StoryProps) => {
   const doc = useMemo(() => createObject({ content }), [content]); // TODO(burdon): Remove dependency on createObject.
   const extensions = useMemo(() => [automerge(createDocAccessor(doc, ['content']))], [doc]);
-  return <MarkdownEditor id='test' initialValue={doc.content} extensions={extensions} toolbar={toolbar} />;
+  return (
+    <Stack orientation='horizontal' rail={false}>
+      <StackItem.Root item={{ id: 'story' }}>
+        <MarkdownEditor id='test' initialValue={doc.content} extensions={extensions} toolbar={toolbar} />
+      </StackItem.Root>
+    </Stack>
+  );
 };
 
-const meta: Meta<typeof MarkdownEditor> = {
+const meta = {
   title: 'plugins/plugin-markdown/MarkdownEditor',
-  component: MarkdownEditor,
+  component: MarkdownEditor as any,
   render: DefaultStory,
-  decorators: [
-    withPluginManager({ plugins: [IntentPlugin()] }),
-    withAttention,
-    withTheme,
-    withLayout({ fullscreen: true }),
-  ],
+  decorators: [withTheme, withPluginManager({ plugins: [IntentPlugin()] }), withAttention],
   parameters: {
+    layout: 'fullscreen',
     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,15 +3,15 @@
 //
 
 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 { Domino, toLocalizedString, useThemeContext, useTranslation } from '@dxos/react-ui';
 import {
-  CommandMenu,
   type CommandMenuGroup,
+  CommandMenuProvider,
   type DNDOptions,
   type EditorInputMode,
   type EditorSelectionState,
@@ -19,10 +19,9 @@ import {
   EditorToolbar,
   type EditorToolbarActionGraphProps,
   type EditorViewMode,
-  RefPopover,
+  type UseCommandMenuOptions,
   type UseTextEditorProps,
   addLink,
-  createElement,
   coreSlashCommands,
   createBasicExtensions,
   createMarkdownExtensions,
@@ -34,14 +33,13 @@ 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, isTruthy } from '@dxos/util';
 
 import { useSelectCurrentThread } from '../../hooks';
 import { meta } from '../../meta';
@@ -70,24 +68,26 @@ 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
 }: MarkdownEditorProps) => {
   const { t } = useTranslation();
-  const viewRef = useRef<EditorView>();
+  const viewRef = useRef<EditorView>(null);
 
-  const getMenu = useCallback(
+  const getMenu = useCallback<UseCommandMenuOptions['getMenu']>(
     (trigger: string, query?: string) => {
       switch (trigger) {
-        case '@':
+        case '@': {
           return onLinkQuery?.(query) ?? [];
+        }
         case '/':
-        default:
+        default: {
           return filterItems([coreSlashCommands, linkSlashCommands, ...(slashCommandGroups ?? [])], (item) =>
             query ? toLocalizedString(item.label, t).toLowerCase().includes(query.toLowerCase()) : true,
           );
+        }
       }
     },
     [onLinkQuery, slashCommandGroups],
@@ -100,36 +100,35 @@ 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')
+            .children(
+              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]);
+  }, [onLinkQuery, getMenu]);
 
-  const { commandMenu, groupsRef, currentItem, onSelect, ...refPopoverProps } = useCommandMenu(options);
+  const { groupsRef, commandMenu, ...commandMenuProps } = useCommandMenu(options);
 
-  const extensions = useMemo(() => [_extensions, commandMenu].filter(isNotFalsy), [_extensions, commandMenu]);
+  const extensions = useMemo(() => [extensionsParam, commandMenu].filter(isTruthy), [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>
   );
 };
 
-const MarkdownEditorImpl = forwardRef<EditorView | undefined, MarkdownEditorProps>(
+const MarkdownEditorImpl = forwardRef<EditorView | null, MarkdownEditorProps>(
   (
     {
       id,
@@ -185,14 +184,15 @@ 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 }),
           providerExtensions,
           extensions,
-        ].filter(isNotFalsy),
+        ].filter(isTruthy),
         ...(role !== 'section' && {
           id,
           scrollTo,
@@ -205,7 +205,7 @@ const MarkdownEditorImpl = forwardRef<EditorView | undefined, MarkdownEditorProp
       [id, formattingObserver, viewMode, themeMode, extensions, providerExtensions],
     );
 
-    useImperativeHandle(forwardedRef, () => editorView, [editorView]);
+    useImperativeHandle<EditorView | null, EditorView | null>(forwardedRef, () => editorView, [editorView]);
     useTest(editorView);
     useSelectCurrentThread(editorView, id);
 
@@ -284,7 +284,7 @@ const MarkdownEditorImpl = forwardRef<EditorView | undefined, MarkdownEditorProp
 
 // Expose editor view for playwright tests.
 // TODO(wittjosiah): Find a better way to expose this or find a way to limit it to test runs.
-const useTest = (view?: EditorView) => {
+const useTest = (view: EditorView | null) => {
   useEffect(() => {
     const composer = (window as any).composer;
     if (composer) {