@dxos/plugin-markdown 0.8.4-main.28f8d3d → 0.8.4-main.406dc2a

package/src/components/MarkdownCard/MarkdownCard.tsx

@@ -2,20 +2,20 @@
 // Copyright 2025 DXOS.org
 //
 
-import { pipe } from 'effect';
+import * as Function from 'effect/Function';
 import React, { useCallback } from 'react';
 
 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';
-import { Button, Icon, useTranslation } from '@dxos/react-ui';
+import { IconButton, useTranslation } from '@dxos/react-ui';
 import { Card } from '@dxos/react-ui-stack';
 import { DataType } from '@dxos/schema';
 
 import { meta } from '../../meta';
 import { Markdown } from '../../types';
-import { getAbstract, getFallbackName } from '../../util';
+import { getContentSnippet, getFallbackName } from '../../util';
 
 // TODO(burdon): Factor out.
 const getTitle = (subject: Markdown.Document | DataType.Text, fallback: string) => {
@@ -29,9 +29,9 @@ const getTitle = (subject: Markdown.Document | DataType.Text, fallback: string)
 // TODO(burdon): Factor out.
 const getSnippet = (subject: Markdown.Document | DataType.Text, fallback: string) => {
   if (Obj.instanceOf(Markdown.Document, subject)) {
-    return getAbstract(subject.content?.target?.content ?? fallback);
+    return Obj.getDescription(subject) || getContentSnippet(subject.content?.target?.content ?? fallback);
   } else if (Obj.instanceOf(DataType.Text, subject)) {
-    return getAbstract(subject.content);
+    return getContentSnippet(subject.content ?? fallback);
   }
 };
 
@@ -46,7 +46,7 @@ export const MarkdownCard = ({ subject, role }: MarkdownCardProps) => {
   const handleNavigate = useCallback(
     () =>
       dispatch(
-        pipe(
+        Function.pipe(
           createIntent(LayoutAction.UpdatePopover, {
             part: 'popover',
             subject: null,
@@ -60,16 +60,17 @@ export const MarkdownCard = ({ subject, role }: MarkdownCardProps) => {
 
   return (
     <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>}
-      {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.Heading classNames='flex items-center'>
+        {getTitle(subject, t('fallback title'))}
+        <span className='grow' />
+        <IconButton
+          iconOnly
+          icon='ph--arrow-right--regular'
+          label={t('navigate to document label')}
+          onClick={handleNavigate}
+        />
+      </Card.Heading>
+      {snippet && <Card.Text classNames='line-clamp-3 text-sm text-description'>{snippet}</Card.Text>}
     </Card.SurfaceRoot>
   );
 };

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, 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,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],
+          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,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 {
@@ -122,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 {
@@ -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 } 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 { translations } from '../../translations';
 
@@ -28,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

@@ -8,10 +8,8 @@ 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,
   type DNDOptions,
   type EditorInputMode,
   type EditorSelectionState,
@@ -19,29 +17,29 @@ import {
   EditorToolbar,
   type EditorToolbarActionGraphProps,
   type EditorViewMode,
-  RefPopover,
-  type UseCommandMenuOptions,
+  type PopoverMenuGroup,
+  PopoverMenuProvider,
+  type UsePopoverMenuProps,
   type UseTextEditorProps,
   addLink,
-  coreSlashCommands,
   createBasicExtensions,
-  createElement,
   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';
@@ -53,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.
@@ -70,66 +68,67 @@ 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(
-    (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,
       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('mx-1 px-1.5 pt-[1px] pb-[2px] border border-separator rounded-sm')
+                  .text(text),
+              ),
+              Domino.of('span').text('for commands.'),
+            )
+            .build(),
       },
       getMenu,
     };
-  }, [getMenu]);
-
-  const { commandMenu, groupsRef, currentItem, onSelect, ...refPopoverProps } = useCommandMenu(options);
+  }, [onLinkQuery, getMenu]);
 
-  const extensions = useMemo(() => [_extensions, commandMenu].filter(isNotFalsy), [_extensions, commandMenu]);
+  const { groupsRef, extension, ...commandMenuProps } = usePopoverMenu(options);
+  const extensions = useMemo(() => [extensionsParam, extension].filter(isTruthy), [extensionsParam, extension]);
 
   return (
-    <RefPopover modal={false} {...refPopoverProps}>
+    <PopoverMenuProvider view={viewRef.current} groups={groupsRef.current} {...commandMenuProps}>
       <MarkdownEditorImpl ref={viewRef} {...props} extensions={extensions} />
-      <CommandMenu groups={groupsRef.current} currentItem={currentItem} onSelect={onSelect} />
-    </RefPopover>
+    </PopoverMenuProvider>
   );
 };
 
-const MarkdownEditorImpl = forwardRef<EditorView | undefined, MarkdownEditorProps>(
+const MarkdownEditorImpl = forwardRef<EditorView | null, MarkdownEditorProps>(
   (
     {
       id,
@@ -187,13 +186,13 @@ const MarkdownEditorImpl = forwardRef<EditorView | undefined, MarkdownEditorProp
             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,
@@ -206,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);
 
@@ -285,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) {