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

package/src/capabilities/state.ts

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

package/src/capabilities/toolkit.ts

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

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

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

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

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

package/src/components/MarkdownCard/index.ts

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

package/src/components/MarkdownContainer.stories.tsx

@@ -4,44 +4,59 @@
 
 import '@dxos-theme';
 
-import { type Meta } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
 
-import { Capabilities, contributes, IntentPlugin, SettingsPlugin, Surface } from '@dxos/app-framework';
+import {
+  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 { Obj, Query, Ref, 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 { defaultTx } from '@dxos/react-ui-theme';
 import { DataType } from '@dxos/schema';
-import { createObjectFactory, Testing, type ValueGenerator } from '@dxos/schema/testing';
+import { type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
 import { withLayout } from '@dxos/storybook-utils';
 
 import { MarkdownPlugin } from '../MarkdownPlugin';
-import translations from '../translations';
-import { DocumentType } from '../types';
+import { translations } from '../translations';
+import { Markdown } from '../types';
 
 faker.seed(1);
 
 const generator: ValueGenerator = faker as any;
 
 const DefaultStory = () => {
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const space = useSpace();
-  const [doc] = useQuery(space, Query.type(DocumentType));
+  const [doc] = useQuery(space, Query.type(Markdown.Document));
   const data = useMemo(() => ({ subject: doc }), [doc]);
 
-  return <Surface role='article' data={data} />;
+  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: [
@@ -51,19 +66,25 @@ const meta: Meta<typeof DefaultStory> = {
         ThemePlugin({ tx: defaultTx }),
         StorybookLayoutPlugin(),
         ClientPlugin({
-          types: [DocumentType, 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 = Obj.make(DocumentType, {
+
+            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: Ref.make(Obj.make(DataType.Text, { content: '# Test\n\n' })),
+              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 });
           },
         }),
@@ -74,19 +95,6 @@ const meta: Meta<typeof DefaultStory> = {
         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',
-          },
-        }),
-      ],
     }),
     withLayout({ fullscreen: true }),
   ],
@@ -94,10 +102,10 @@ const meta: Meta<typeof DefaultStory> = {
     translations,
     controls: { disable: true },
   },
-};
+} satisfies Meta<typeof Capabilities>;
 
 export default meta;
 
-type Story = Meta<typeof DefaultStory>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};

package/src/components/MarkdownContainer.tsx

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

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

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