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

package/src/capabilities/react-surface.tsx

@@ -2,16 +2,16 @@
 // Copyright 2025 DXOS.org
 //
 
-import React from 'react';
+import React, { useCallback } from 'react';
 
-import { Capabilities, contributes, createSurface, useCapability } from '@dxos/app-framework';
+import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
+import { SurfaceCardRole, useCapability } from '@dxos/app-framework/react';
 import { Obj } from '@dxos/echo';
 import { SettingsStore } from '@dxos/local-storage';
 import { AttentionCapabilities } from '@dxos/plugin-attention';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { DataType } from '@dxos/schema';
+import { Text } from '@dxos/schema';
 
-import { MarkdownCard, MarkdownContainer, MarkdownSettings } from '../components';
+import { MarkdownCard, MarkdownContainer, type MarkdownContainerProps, MarkdownSettings } from '../components';
 import { meta } from '../meta';
 import { Markdown } from '../types';
 import { isEditorModel } from '../util';
@@ -26,76 +26,25 @@ export default () =>
       filter: (data): data is { subject: Markdown.Document; variant: undefined } =>
         Obj.instanceOf(Markdown.Document, data.subject) && !data.variant,
       component: ({ data, role }) => {
-        const selectionManager = useCapability(AttentionCapabilities.Selection);
-        const settingsStore = useCapability(Capabilities.SettingsStore);
-        const settings = settingsStore.getStore<Markdown.Settings>(meta.id)!.value;
-        const { state, editorState, getViewMode, setViewMode } = useCapability(MarkdownCapabilities.State);
-        const viewMode = getViewMode(fullyQualifiedId(data.subject));
-
-        return (
-          <MarkdownContainer
-            id={fullyQualifiedId(data.subject)}
-            object={data.subject}
-            role={role}
-            settings={settings}
-            selectionManager={selectionManager}
-            extensionProviders={state.extensionProviders}
-            viewMode={viewMode}
-            editorStateStore={editorState}
-            onViewModeChange={setViewMode}
-          />
-        );
+        return <Container id={Obj.getDXN(data.subject).toString()} subject={data.subject} role={role} />;
       },
     }),
     createSurface({
       id: `${meta.id}/surface/text`,
       role: ['article', 'section', 'tabpanel'],
-      filter: (data): data is { id: string; subject: DataType.Text } =>
-        typeof data.id === 'string' && Obj.instanceOf(DataType.Text, data.subject),
+      filter: (data): data is { id: string; subject: Text.Text } =>
+        typeof data.id === 'string' && Obj.instanceOf(Text.Text, data.subject),
       component: ({ data, role }) => {
-        const selectionManager = useCapability(AttentionCapabilities.Selection);
-        const settingsStore = useCapability(Capabilities.SettingsStore);
-        const settings = settingsStore.getStore<Markdown.Settings>(meta.id)!.value;
-        const { state, editorState, getViewMode, setViewMode } = useCapability(MarkdownCapabilities.State);
-
-        return (
-          <MarkdownContainer
-            id={data.id}
-            object={data.subject}
-            role={role}
-            settings={settings}
-            selectionManager={selectionManager}
-            extensionProviders={state.extensionProviders}
-            viewMode={getViewMode(data.id)}
-            editorStateStore={editorState}
-            onViewModeChange={setViewMode}
-          />
-        );
+        return <Container id={data.id} subject={data.subject} role={role} />;
       },
     }),
+    // TODO(burdon): Remove this variant and conform to Text.
     createSurface({
       id: `${meta.id}/surface/editor`,
       role: ['article', 'section'],
       filter: (data): data is { subject: { id: string; text: string } } => isEditorModel(data.subject),
       component: ({ data, role }) => {
-        const selectionManager = useCapability(AttentionCapabilities.Selection);
-        const settingsStore = useCapability(Capabilities.SettingsStore);
-        const settings = settingsStore.getStore<Markdown.Settings>(meta.id)!.value;
-        const { state, editorState, getViewMode, setViewMode } = useCapability(MarkdownCapabilities.State);
-
-        return (
-          <MarkdownContainer
-            id={data.subject.id}
-            object={data.subject}
-            role={role}
-            settings={settings}
-            selectionManager={selectionManager}
-            extensionProviders={state.extensionProviders}
-            viewMode={getViewMode(data.subject.id)}
-            editorStateStore={editorState}
-            onViewModeChange={setViewMode}
-          />
-        );
+        return <Container id={data.subject.id} subject={data.subject} role={role} />;
       },
     }),
     createSurface({
@@ -107,9 +56,38 @@ export default () =>
     }),
     createSurface({
       id: `${meta.id}/surface/preview`,
-      role: ['card--popover', 'card--intrinsic', 'card--extrinsic', 'card--transclusion', 'card'],
-      filter: (data): data is { subject: Markdown.Document | DataType.Text } =>
-        Obj.instanceOf(Markdown.Document, data.subject) || Obj.instanceOf(DataType.Text, data.subject),
-      component: ({ data, role }) => <MarkdownCard {...data} role={role} />,
+      role: SurfaceCardRole.literals as any,
+      filter: (data): data is { subject: Markdown.Document | Text.Text } =>
+        Obj.instanceOf(Markdown.Document, data.subject) || Obj.instanceOf(Text.Text, data.subject),
+      component: ({ data, role }) => <MarkdownCard {...data} role={role as SurfaceCardRole} />,
     }),
   ]);
+
+/**
+ * Common wrapper.
+ */
+const Container = ({ id, subject, role }: { id: string; subject: MarkdownContainerProps['object']; role: string }) => {
+  const selectionManager = useCapability(AttentionCapabilities.Selection);
+  const settingsStore = useCapability(Capabilities.SettingsStore);
+  const settings = settingsStore.getStore<Markdown.Settings>(meta.id)!.value;
+  const { state, editorState, getViewMode, setViewMode } = useCapability(MarkdownCapabilities.State);
+  const viewMode = getViewMode(id);
+  const handleViewModeChange = useCallback<NonNullable<MarkdownContainerProps['onViewModeChange']>>(
+    (mode) => setViewMode(id, mode),
+    [id, setViewMode],
+  );
+
+  return (
+    <MarkdownContainer
+      id={id}
+      object={subject}
+      role={role}
+      settings={settings}
+      selectionManager={selectionManager}
+      extensionProviders={state.extensionProviders}
+      editorStateStore={editorState}
+      viewMode={viewMode}
+      onViewModeChange={handleViewModeChange}
+    />
+  );
+};

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

@@ -2,8 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
@@ -11,8 +9,8 @@ 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 { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { translations } from '../../translations';
 
@@ -31,18 +29,17 @@ const meta: Meta<typeof MarkdownCard> = {
     );
   },
   decorators: [
+    withTheme,
     withPluginManager({
       plugins: [IntentPlugin()],
     }),
-    withTheme,
-    withLayout(),
   ],
   parameters: {
     layout: 'centered',
     translations,
   },
   tags: ['cards'],
-} satisfies Meta<typeof MarkdownCard>;
+};
 
 export default meta;
 
@@ -51,7 +48,7 @@ type Story = StoryObj<typeof meta>;
 export const Popover: Story = {
   args: {
     role: 'card--popover',
-    subject: Markdown.makeDocument({
+    subject: Markdown.make({
       name: faker.lorem.words(3),
       content: faker.lorem.paragraphs(3),
     }),
@@ -61,7 +58,7 @@ export const Popover: Story = {
 export const Intrinsic: Story = {
   args: {
     role: 'card--intrinsic',
-    subject: Markdown.makeDocument({
+    subject: Markdown.make({
       name: faker.lorem.words(3),
       content: faker.lorem.paragraphs(3),
     }),
@@ -71,7 +68,7 @@ export const Intrinsic: Story = {
 export const Extrinsic: Story = {
   args: {
     role: 'card--extrinsic',
-    subject: Markdown.makeDocument({
+    subject: Markdown.make({
       name: faker.lorem.words(3),
       content: faker.lorem.paragraphs(3),
     }),

package/src/components/MarkdownCard/MarkdownCard.tsx

@@ -2,57 +2,43 @@
 // 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 { LayoutAction, chain, createIntent } from '@dxos/app-framework';
+import { useIntentDispatcher } from '@dxos/app-framework/react';
 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 { type CardPreviewProps } from '@dxos/plugin-preview';
+import { IconButton, useTranslation } from '@dxos/react-ui';
 import { Card } from '@dxos/react-ui-stack';
-import { DataType } from '@dxos/schema';
+import { Text } 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) => {
-  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);
-  }
-};
-
-// 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);
-  } else if (Obj.instanceOf(DataType.Text, subject)) {
-    return getAbstract(subject.content);
-  }
-};
-
-export type MarkdownCardProps = PreviewProps<Markdown.Document | DataType.Text>;
+export type MarkdownCardProps = CardPreviewProps<Markdown.Document | Text.Text>;
 
 export const MarkdownCard = ({ subject, role }: MarkdownCardProps) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { t } = useTranslation(meta.id);
   const snippet = getSnippet(subject, t('fallback abstract'));
+  const info = getInfo(subject);
 
   // TODO(wittjosiah): Factor out so this component isn't dependent on the app framework.
   const handleNavigate = useCallback(
     () =>
       dispatch(
-        pipe(
+        Function.pipe(
           createIntent(LayoutAction.UpdatePopover, {
             part: 'popover',
             subject: null,
             options: { state: false, anchorId: '' },
           }),
-          chain(LayoutAction.Open, { part: 'main', subject: [fullyQualifiedId(subject)] }),
+          chain(LayoutAction.Open, {
+            part: 'main',
+            subject: [Obj.getDXN(subject).toString()],
+          }),
         ),
       ),
     [dispatch, subject],
@@ -60,16 +46,44 @@ 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.Text classNames='text-xs text-description'>
+        {info.words} {t('words label', { count: info.words })}
+      </Card.Text>
     </Card.SurfaceRoot>
   );
 };
+
+const getInfo = (subject: Markdown.Document | Text.Text) => {
+  const text = (Obj.instanceOf(Markdown.Document, subject) ? subject.content?.target?.content : subject.content) ?? '';
+  return { words: text.split(' ').length };
+};
+
+// TODO(burdon): Factor out.
+const getTitle = (subject: Markdown.Document | Text.Text, fallback: string) => {
+  if (Obj.instanceOf(Markdown.Document, subject)) {
+    const title = Obj.getLabel(subject);
+    return title ?? getFallbackName(subject.content?.target?.content ?? fallback);
+  } else if (Obj.instanceOf(Text.Text, subject)) {
+    return getFallbackName(subject.content);
+  }
+};
+
+// TODO(burdon): Factor out.
+const getSnippet = (subject: Markdown.Document | Text.Text, fallback: string) => {
+  if (Obj.instanceOf(Markdown.Document, subject)) {
+    return Obj.getDescription(subject) || getContentSnippet(subject.content?.target?.content ?? fallback);
+  } else if (Obj.instanceOf(Text.Text, subject)) {
+    return getContentSnippet(subject.content ?? fallback);
+  }
+};

package/src/components/MarkdownContainer.stories.tsx

@@ -2,28 +2,29 @@
 // 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, createIntent } from '@dxos/app-framework';
+import { Surface, useIntentDispatcher } from '@dxos/app-framework/react';
 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 { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { useAttentionAttributes } from '@dxos/react-ui-attention';
 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 { Text } from '@dxos/schema';
+import { type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
+import { Organization, Person } from '@dxos/types';
 
 import { MarkdownPlugin } from '../MarkdownPlugin';
 import { translations } from '../translations';
@@ -34,62 +35,92 @@ 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]);
+  const id = doc && Obj.getDXN(doc).toString();
+  const attentionAttrs = useAttentionAttributes(id);
+
+  useAsyncEffect(async () => {
+    if (space) {
+      await dispatch(
+        createIntent(LayoutAction.SwitchWorkspace, {
+          part: 'workspace',
+          subject: space.id,
+        }),
+      );
+    }
+  }, [space, dispatch]);
 
-  return <Surface role='article' data={data} />;
+  return (
+    <div className='contents' {...attentionAttrs}>
+      <Surface role='article' data={data} limit={1} />
+    </div>
+  );
 };
 
 const meta = {
   title: 'plugins/plugin-markdown/MarkdownContainer',
   render: DefaultStory,
   decorators: [
-    withPluginManager({
+    withTheme,
+    withLayout({ container: 'column' }),
+    withPluginManager<{ title?: string; content?: string }>((context) => ({
       plugins: [
-        AttentionPlugin(),
-        ThemePlugin({ tx: defaultTx }),
-        StorybookLayoutPlugin(),
         ClientPlugin({
-          types: [Markdown.Document, DataType.Text, Testing.Contact],
+          types: [Markdown.Document, Text.Text, Person.Person, Organization.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' });
-            space.db.add(doc);
             const createObjects = createObjectFactory(space.db, generator);
-            await createObjects([{ type: Testing.Contact, count: 10 }]);
+            await createObjects([{ type: Organization.Organization, count: 10 }]);
+
+            const queue = space.queues.create();
+            const kai = Obj.make(Person.Person, { fullName: 'Kai' });
+            const dxos = Obj.make(Organization.Organization, { name: 'DXOS' });
+            await queue.append([kai, dxos]);
+
+            space.db.add(
+              Markdown.make({
+                name: context.args.title ?? 'Testing',
+                content: [
+                  `# ${context.args.title ?? 'Testing'}`,
+                  context.args.content ?? '',
+                  // TODO(burdon): Popovers not currently working.
+                  '## Here are some objects',
+                  `![Alice](${Obj.getDXN(kai)})`,
+                  `![DXOS](${Obj.getDXN(dxos)})`,
+                  '',
+                  'END',
+                  '',
+                ].join('\n\n'),
+              }),
+            );
+
             await space.db.flush({ indexes: true });
           },
         }),
-        SpacePlugin(),
-        SettingsPlugin(),
+        SpacePlugin({}),
+        GraphPlugin(),
         IntentPlugin(),
+        SettingsPlugin(),
+        // UI
+        ThemePlugin({ tx: defaultTx }),
+        AttentionPlugin(),
         MarkdownPlugin(),
         PreviewPlugin(),
-        GraphPlugin(),
+        StorybookLayoutPlugin({}),
       ],
-      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',
-          },
-        }),
-      ],
-    }),
-    withLayout({ fullscreen: true }),
+    })),
   ],
   parameters: {
-    translations,
+    layout: 'fullscreen',
     controls: { disable: true },
+    translations,
   },
 } satisfies Meta<typeof Capabilities>;
 
@@ -97,4 +128,9 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    title: 'Testing',
+    content: ['This is a line with **some** formatting.'].join('\n\n'),
+  },
+};