@dxos/plugin-markdown 0.8.4-main.e098934 → 0.8.4-main.ead640a

package/src/components/MarkdownContainer.stories.tsx

@@ -2,28 +2,34 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
 
-import { Capabilities, IntentPlugin, SettingsPlugin, Surface, contributes } 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 { Testing, type ValueGenerator, createObjectFactory } 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,62 +40,65 @@ 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 = {
   title: 'plugins/plugin-markdown/MarkdownContainer',
   render: DefaultStory,
   decorators: [
+    withTheme,
     withPluginManager({
       plugins: [
-        AttentionPlugin(),
-        ThemePlugin({ tx: defaultTx }),
-        StorybookLayoutPlugin(),
         ClientPlugin({
-          types: [Markdown.Document, DataType.Text, Testing.Contact],
+          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>;
 

package/src/components/MarkdownContainer.tsx

@@ -10,12 +10,13 @@ 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,
+  type PopoverMenuGroup,
+  type PopoverMenuItem,
   type PreviewLinkRef,
   type PreviewOptions,
   insertAtCursor,
@@ -94,8 +95,9 @@ export const MarkdownContainer = ({
       ),
     [objectForms, schemaWhiteList],
   );
-  const onLinkQuery = useCallback(
-    async (query?: string): Promise<CommandMenuGroup[]> => {
+
+  const handleLinkQuery = useCallback(
+    async (query?: string): Promise<PopoverMenuGroup[]> => {
       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.
@@ -114,7 +116,7 @@ export const MarkdownContainer = ({
         results?.objects
           .filter((object) => toLocalizedString(getLabel(object), t).toLowerCase().includes(name))
           // TODO(wittjosiah): Remove `any` type.
-          .map((object: any): CommandMenuItem => {
+          .map((object: any): PopoverMenuItem => {
             const metadata = resolve(Obj.getTypename(object)!);
             const label = toLocalizedString(getLabel(object), t);
             return {
@@ -136,6 +138,7 @@ export const MarkdownContainer = ({
     [filter, resolve, space],
   );
 
+  // TODO(burdon): Reconcile variants.
   const editor = doc ? (
     <DocumentEditor
       id={fullyQualifiedId(object)}
@@ -146,7 +149,7 @@ export const MarkdownContainer = ({
       settings={settings}
       scrollPastEnd={scrollPastEnd}
       onViewModeChange={onViewModeChange}
-      onLinkQuery={space ? onLinkQuery : undefined}
+      onLinkQuery={space ? handleLinkQuery : undefined}
     />
   ) : text ? (
     <MarkdownEditor
@@ -159,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}
@@ -173,7 +175,7 @@ export const MarkdownContainer = ({
       inputMode={settings.editorInputMode}
       scrollPastEnd={scrollPastEnd}
       onViewModeChange={onViewModeChange}
-      onLinkQuery={space ? onLinkQuery : undefined}
+      onLinkQuery={space ? handleLinkQuery : undefined}
     />
   );
 
@@ -190,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,17 +2,16 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 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 { translations } from '../../translations';
 
@@ -28,20 +27,22 @@ 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 = {
   title: 'plugins/plugin-markdown/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>;

package/src/components/MarkdownEditor/MarkdownEditor.tsx

@@ -8,39 +8,38 @@ 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 {
-  type CommandMenuGroup,
-  CommandMenuProvider,
   type DNDOptions,
-  Domino,
   type EditorInputMode,
   type EditorSelectionState,
   type EditorStateStore,
   EditorToolbar,
   type EditorToolbarActionGraphProps,
   type EditorViewMode,
-  type UseCommandMenuOptions,
+  type PopoverMenuGroup,
+  PopoverMenuProvider,
+  type UsePopoverMenuProps,
   type UseTextEditorProps,
   addLink,
-  coreSlashCommands,
   createBasicExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   dropFile,
   editorGutter,
   editorSlots,
-  filterItems,
+  filterMenuGroups,
+  formattingCommands,
   linkSlashCommands,
   processEditorPayload,
   stackItemContentEditorClassNames,
-  useCommandMenu,
   useEditorToolbarState,
   useFormattingState,
+  usePopoverMenu,
   useTextEditor,
 } from '@dxos/react-ui-editor';
 import { StackItem } from '@dxos/react-ui-stack';
-import { isNonNullable, isNotFalsy } from '@dxos/util';
+import { isNonNullable, isTruthy } from '@dxos/util';
 
 import { useSelectCurrentThread } from '../../hooks';
 import { meta } from '../../meta';
@@ -52,16 +51,16 @@ export type MarkdownEditorProps = {
   toolbar?: boolean;
   inputMode?: EditorInputMode;
   scrollPastEnd?: boolean;
-  slashCommandGroups?: CommandMenuGroup[];
+  slashCommandGroups?: PopoverMenuGroup[];
   customActions?: EditorToolbarActionGraphProps['customActions'];
   // TODO(wittjosiah): Generalize custom toolbar actions (e.g. comment, upload, etc.)
   viewMode?: EditorViewMode;
   editorStateStore?: EditorStateStore;
   onViewModeChange?: (id: string, mode: EditorViewMode) => void;
-  onLinkQuery?: (query?: string) => Promise<CommandMenuGroup[]>;
+  onLinkQuery?: (query?: string) => Promise<PopoverMenuGroup[]>;
   onFileUpload?: (file: File) => Promise<FileInfo | undefined>;
-} & Pick<UseTextEditorProps, 'initialValue' | 'extensions'> &
-  Partial<Pick<MarkdownPluginState, 'extensionProviders'>>;
+} & (Pick<UseTextEditorProps, 'initialValue' | 'extensions'> &
+  Partial<Pick<MarkdownPluginState, 'extensionProviders'>>);
 
 /**
  * Base markdown editor component.
@@ -75,24 +74,27 @@ export const MarkdownEditor = ({
   ...props
 }: MarkdownEditorProps) => {
   const { t } = useTranslation();
-  const viewRef = useRef<EditorView>();
+  const viewRef = useRef<EditorView>(null);
 
-  const getMenu = useCallback(
-    (trigger: string, query?: string) => {
+  const getMenu = useCallback<NonNullable<UsePopoverMenuProps['getMenu']>>(
+    ({ text, trigger }) => {
       switch (trigger) {
-        case '@':
-          return onLinkQuery?.(query) ?? [];
+        case '@': {
+          return onLinkQuery?.(text) ?? [];
+        }
+
         case '/':
-        default:
-          return filterItems([coreSlashCommands, linkSlashCommands, ...(slashCommandGroups ?? [])], (item) =>
-            query ? toLocalizedString(item.label, t).toLowerCase().includes(query.toLowerCase()) : true,
+        default: {
+          return filterMenuGroups([formattingCommands, linkSlashCommands, ...(slashCommandGroups ?? [])], (item) =>
+            text ? toLocalizedString(item.label, t).toLowerCase().includes(text.toLowerCase()) : true,
           );
+        }
       }
     },
     [onLinkQuery, slashCommandGroups],
   );
 
-  const options = useMemo<UseCommandMenuOptions>(() => {
+  const options = useMemo<UsePopoverMenuProps>(() => {
     const trigger = onLinkQuery ? ['/', '@'] : ['/'];
     return {
       viewRef,
@@ -101,11 +103,11 @@ export const MarkdownEditor = ({
         delay: 3_000,
         content: () =>
           Domino.of('div')
-            .child(
+            .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]')
+                  .classNames('mx-1 px-1.5 pt-[1px] pb-[2px] border border-separator rounded-sm')
                   .text(text),
               ),
               Domino.of('span').text('for commands.'),
@@ -114,19 +116,19 @@ export const MarkdownEditor = ({
       },
       getMenu,
     };
-  }, [getMenu]);
+  }, [onLinkQuery, getMenu]);
 
-  const { commandMenu, groupsRef, ...commandMenuProps } = useCommandMenu(options);
-  const extensions = useMemo(() => [extensionsParam, commandMenu].filter(isNotFalsy), [extensionsParam, commandMenu]);
+  const { groupsRef, extension, ...commandMenuProps } = usePopoverMenu(options);
+  const extensions = useMemo(() => [extensionsParam, extension].filter(isTruthy), [extensionsParam, extension]);
 
   return (
-    <CommandMenuProvider groups={groupsRef.current} {...commandMenuProps}>
+    <PopoverMenuProvider view={viewRef.current} groups={groupsRef.current} {...commandMenuProps}>
       <MarkdownEditorImpl ref={viewRef} {...props} extensions={extensions} />
-    </CommandMenuProvider>
+    </PopoverMenuProvider>
   );
 };
 
-const MarkdownEditorImpl = forwardRef<EditorView | undefined, MarkdownEditorProps>(
+const MarkdownEditorImpl = forwardRef<EditorView | null, MarkdownEditorProps>(
   (
     {
       id,
@@ -190,7 +192,7 @@ const MarkdownEditorImpl = forwardRef<EditorView | undefined, MarkdownEditorProp
           role !== 'section' && onFileUpload && dropFile({ onDrop: handleDrop }),
           providerExtensions,
           extensions,
-        ].filter(isNotFalsy),
+        ].filter(isTruthy),
         ...(role !== 'section' && {
           id,
           scrollTo,
@@ -203,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);
 
@@ -282,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) {

package/src/components/Suggestions.stories.tsx

@@ -2,24 +2,19 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta } from '@storybook/react-vite';
-import { Match, Option, Schema, pipe } from 'effect';
+import * as Function from 'effect/Function';
+import * as Match from 'effect/Match';
+import * as Option from 'effect/Option';
+import * as Schema from 'effect/Schema';
 import React, { type FC, useEffect, useMemo, useState } from 'react';
 
-import {
-  Capabilities,
-  IntentPlugin,
-  SettingsPlugin,
-  contributes,
-  useCapability,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
+import { Capabilities, IntentPlugin, SettingsPlugin, useCapability, useIntentDispatcher } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Obj, Ref, Type } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { ClientPlugin } from '@dxos/plugin-client';
+import { GraphPlugin } from '@dxos/plugin-graph';
 import { PreviewPlugin } from '@dxos/plugin-preview';
 import { SpacePlugin } from '@dxos/plugin-space';
 import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
@@ -27,11 +22,12 @@ import { ThemePlugin } from '@dxos/plugin-theme';
 import { faker } from '@dxos/random';
 import { createDocAccessor, fullyQualifiedId, toCursorRange, useQueue, useSpace } from '@dxos/react-client/echo';
 import { IconButton, Toolbar } from '@dxos/react-ui';
-import { type EditorSelection, type Range, command, useTextEditor } from '@dxos/react-ui-editor';
+import { withTheme } from '@dxos/react-ui/testing';
+import { type EditorSelection, type Range, useTextEditor } from '@dxos/react-ui-editor';
 import { StackItem } from '@dxos/react-ui-stack';
 import { defaultTx } from '@dxos/react-ui-theme';
 import { DataType } from '@dxos/schema';
-import { withLayout } from '@dxos/storybook-utils';
+import { render } from '@dxos/storybook-utils';
 
 import { MarkdownCapabilities } from '../capabilities';
 import { MarkdownPlugin } from '../MarkdownPlugin';
@@ -83,7 +79,7 @@ const TestChat: FC<{ doc: Markdown.Document; content: string }> = ({ doc, conten
 
     const text = await doc.content.load();
     const accessor = createDocAccessor(text, ['content']);
-    const cursor = pipe(
+    const cursor = Function.pipe(
       editorState.getState(fullyQualifiedId(doc))?.selection,
       Option.fromNullable,
       Option.map(selectionToRange),
@@ -142,45 +138,50 @@ const DefaultStory = ({ document, chat }: { document: string; chat: string }) =>
   }, [space]);
 
   if (!space || !doc) {
-    return <></>;
+    return null;
   }
 
+  // TODO(burdon): Layout issue.
   return (
-    <>
+    <div className='grid grid-cols-2 bs-full overflow-hidden'>
       <MarkdownContainer id={doc.id} object={doc} settings={settings} editorStateStore={editorState} />
       <TestChat doc={doc} content={chat} />
-    </>
+    </div>
   );
 };
 
-// TODO(burdon): Make consistent.
 const storybook: Meta<typeof DefaultStory> = {
   title: 'plugins/plugin-markdown/Suggestions',
-  render: DefaultStory,
+  render: render(DefaultStory),
   decorators: [
+    withTheme,
     withPluginManager({
       plugins: [
-        ThemePlugin({ tx: defaultTx }),
-        StorybookLayoutPlugin(),
         ClientPlugin({
           types: [Markdown.Document, TestItem],
           onClientInitialized: async ({ client }) => {
             await client.halo.createIdentity();
           },
         }),
-        SpacePlugin(),
-        SettingsPlugin(),
+        SpacePlugin({}),
+        GraphPlugin(),
         IntentPlugin(),
+        SettingsPlugin(),
+
+        // UI
+        ThemePlugin({ tx: defaultTx }),
         MarkdownPlugin(),
         PreviewPlugin(),
+        StorybookLayoutPlugin({}),
       ],
-      capabilities: [contributes(MarkdownCapabilities.Extensions, [() => command()])],
     }),
-    withLayout({ fullscreen: true, classNames: 'grid grid-cols-2' }),
   ],
   parameters: {
+    layout: 'fullscreen',
+    controls: {
+      disable: true,
+    },
     translations,
-    controls: { disable: true },
   },
 };
 

package/src/components/Toolbar.stories.tsx

@@ -2,16 +2,16 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useState } from 'react';
 
+import { createObject } from '@dxos/echo-db';
 import { invariant } from '@dxos/invariant';
 import { PublicKey } from '@dxos/keys';
 import { faker } from '@dxos/random';
 import { createDocAccessor } from '@dxos/react-client/echo';
 import { useThemeContext } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
 import {
   type Comment,
   EditorToolbar,
@@ -31,7 +31,6 @@ import {
   useTextEditor,
 } from '@dxos/react-ui-editor';
 import { DataType } from '@dxos/schema';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 faker.seed(101);
 
@@ -41,7 +40,7 @@ type StoryProps = {
 
 const DefaultStory = ({ content = '' }: StoryProps) => {
   const { themeMode } = useThemeContext();
-  const [text] = useState(DataType.makeText(content));
+  const [text] = useState(createObject(DataType.makeText(content)));
   const toolbarState = useEditorToolbarState({ viewMode: 'preview' });
   const formattingObserver = useFormattingState(toolbarState);
   const { parentRef, view } = useTextEditor(() => {
@@ -101,8 +100,9 @@ const meta = {
   title: 'plugins/plugin-markdown/Toolbar',
   component: EditorToolbar as any,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
+  decorators: [withTheme],
   parameters: {
+    layout: 'fullscreen',
     translations,
   },
 } satisfies Meta<typeof DefaultStory>;

package/src/extensions.tsx

@@ -41,7 +41,7 @@ import {
 } from '@dxos/react-ui-editor';
 import { defaultTx } from '@dxos/react-ui-theme';
 import { type DataType } from '@dxos/schema';
-import { isNotFalsy } from '@dxos/util';
+import { isTruthy } from '@dxos/util';
 
 import { MarkdownCapabilities } from './capabilities';
 import { type Markdown } from './types';
@@ -157,7 +157,7 @@ export const useExtensions = ({
           }),
         baseExtensions,
         pluginExtensions,
-      ].filter(isNotFalsy),
+      ].filter(isTruthy),
     [baseExtensions, pluginExtensions, document, document?.content?.target, text, id, space, identity],
   );
 };
@@ -178,7 +178,7 @@ const createBaseExtensions = ({
     selectionManager && selectionChange(selectionManager),
     settings.editorInputMode && InputModeExtensions[settings.editorInputMode],
     settings.folding && folding(),
-  ].filter(isNotFalsy);
+  ].filter(isTruthy);
 
   //
   // Markdown

package/src/functions/diff.ts

@@ -2,7 +2,8 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Effect, Schema } from 'effect';
+import * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
 
 import { ArtifactId, applyDiffs } from '@dxos/assistant';
 import { createDocAccessor } from '@dxos/echo-db';
@@ -13,7 +14,8 @@ import { Markdown } from '../types';
 
 // TODO(wittjosiah): Reconcile with ThreadAction.AddProposal.
 export default defineFunction({
-  name: 'dxos.org/function/markdown/diff',
+  key: 'dxos.org/function/markdown/diff',
+  name: 'Diff',
   description: trim`
     Applies a set of diffs to the markdown document.
   `,

package/src/functions/open.ts

@@ -2,7 +2,8 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Effect, Schema } from 'effect';
+import * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
 
 import { ArtifactId } from '@dxos/assistant';
 import { DatabaseService, defineFunction } from '@dxos/functions';
@@ -10,7 +11,8 @@ import { DatabaseService, defineFunction } from '@dxos/functions';
 import { Markdown } from '../types';
 
 export default defineFunction({
-  name: 'dxos.org/function/markdown/open',
+  key: 'dxos.org/function/markdown/open',
+  name: 'Open',
   description: 'Opens and reads the contents of a new markdown document.',
   inputSchema: Schema.Struct({
     id: ArtifactId.annotations({