@dxos/plugin-markdown 0.8.4-main.2e9d522 → 0.8.4-main.3c1ae3b

package/src/capabilities/index.ts

@@ -4,12 +4,13 @@
 
 import { lazy } from '@dxos/app-framework';
 
-export const AnchorSort = lazy(() => import('./anchor-sort'));
+export const AnchorSort: any = lazy(() => import('./anchor-sort'));
 export const AppGraphSerializer = lazy(() => import('./app-graph-serializer'));
-export const ArtifactDefinition = lazy(() => import('./artifact-definition'));
+export const BlueprintDefinition = lazy(() => import('./blueprint-definition'));
 export const IntentResolver = lazy(() => import('./intent-resolver'));
 export const ReactSurface = lazy(() => import('./react-surface'));
 export const MarkdownSettings = lazy(() => import('./settings'));
 export const MarkdownState = lazy(() => import('./state'));
 
+export * from './blueprint-definition';
 export * from './capabilities';

package/src/capabilities/intent-resolver.ts

@@ -3,33 +3,29 @@
 //
 
 import { next as A } from '@automerge/automerge';
-import { Option, pipe, type Schema } from 'effect';
+import * as Option from 'effect/Option';
+import type * as Schema from 'effect/Schema';
 
 import {
   Capabilities,
   CollaborationActions,
+  type PluginContext,
   contributes,
   createResolver,
-  type PluginContext,
 } from '@dxos/app-framework';
 import { Obj } from '@dxos/echo';
-import { createDocAccessor, getRangeFromCursor, Ref } from '@dxos/react-client/echo';
-import { DataType } from '@dxos/schema';
+import { createDocAccessor, getRangeFromCursor } from '@dxos/echo-db';
+
+import { Markdown, MarkdownAction } from '../types';
 
 import { MarkdownCapabilities } from './capabilities';
-import { DocumentType, MarkdownAction } from '../types';
 
 export default (context: PluginContext) =>
   contributes(Capabilities.IntentResolver, [
     createResolver({
       intent: MarkdownAction.Create,
       resolve: ({ name, content }) => {
-        const doc = Obj.make(DocumentType, {
-          name,
-          content: Ref.make(Obj.make(DataType.Text, { content: content ?? '' })),
-        });
-
-        return { data: { object: doc } };
+        return { data: { object: Markdown.make({ name, content }) } };
       },
     }),
     createResolver({
@@ -40,23 +36,22 @@ export default (context: PluginContext) =>
       },
     }),
     createResolver({
-      intent: CollaborationActions.InsertContent,
+      intent: CollaborationActions.AcceptProposal,
       filter: (
         data,
-      ): data is Omit<Schema.Schema.Type<typeof CollaborationActions.InsertContent.fields.input>, 'target'> & {
-        target: DocumentType;
-      } => Obj.instanceOf(DocumentType, data.target),
-      resolve: async ({ target, object: objectRef, at, label }) => {
-        const text = await target.content.load();
+      ): data is Omit<Schema.Schema.Type<typeof CollaborationActions.AcceptProposal.fields.input>, 'subject'> & {
+        subject: Markdown.Document;
+      } => Obj.instanceOf(Markdown.Document, data.subject),
+      resolve: async ({ subject, anchor, proposal }) => {
+        const text = await subject.content.load();
         const accessor = createDocAccessor(text, ['content']);
-        const { start, end } = pipe(
-          Option.fromNullable(at),
+        const { start, end } = Option.fromNullable(anchor).pipe(
           Option.flatMap((at) => Option.fromNullable(getRangeFromCursor(accessor, at))),
+          // Fallback to the end of the document.
           Option.getOrElse(() => ({ start: text.content.length - 1, end: text.content.length - 1 })),
         );
         accessor.handle.change((doc) => {
-          const ref = `[${label ?? 'Generated content'}]](${objectRef.dxn.toString()})\n`;
-          A.splice(doc, accessor.path.slice(), start, end - start, ref);
+          A.splice(doc, accessor.path.slice(), start, end - start, proposal.text);
         });
       },
     }),

package/src/capabilities/react-surface.tsx

@@ -2,112 +2,96 @@
 // Copyright 2025 DXOS.org
 //
 
-import React from 'react';
+import React, { forwardRef, useCallback } from 'react';
 
-import { createSurface, contributes, Capabilities, 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, type MarkdownContainerProps, MarkdownSettings } from '../components';
+import { meta } from '../meta';
+import { Markdown } from '../types';
+import { isEditorModel } from '../util';
 
 import { MarkdownCapabilities } from './capabilities';
-import { MarkdownContainer, MarkdownSettings, MarkdownPreview } from '../components';
-import { MARKDOWN_PLUGIN } from '../meta';
-import { DocumentType, isEditorModel, type MarkdownSettingsProps } from '../types';
 
 export default () =>
   contributes(Capabilities.ReactSurface, [
     createSurface({
-      id: `${MARKDOWN_PLUGIN}/document`,
+      id: `${meta.id}/surface/document`,
       role: ['article', 'section', 'tabpanel'],
-      filter: (data): data is { subject: DocumentType; variant: undefined } =>
-        Obj.instanceOf(DocumentType, data.subject) && !data.variant,
-      component: ({ data, role }) => {
-        const selectionManager = useCapability(AttentionCapabilities.Selection);
-        const settingsStore = useCapability(Capabilities.SettingsStore);
-        const settings = settingsStore.getStore<MarkdownSettingsProps>(MARKDOWN_PLUGIN)!.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}
-          />
-        );
+      filter: (data): data is { subject: Markdown.Document; variant: undefined } =>
+        Obj.instanceOf(Markdown.Document, data.subject) && !data.variant,
+      component: ({ data, role, ref }) => {
+        return <Container id={Obj.getDXN(data.subject).toString()} subject={data.subject} role={role} ref={ref} />;
       },
     }),
     createSurface({
-      id: `${MARKDOWN_PLUGIN}/text`,
+      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<MarkdownSettingsProps>(MARKDOWN_PLUGIN)!.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: `${MARKDOWN_PLUGIN}/editor`,
+      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<MarkdownSettingsProps>(MARKDOWN_PLUGIN)!.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({
-      id: `${MARKDOWN_PLUGIN}/plugin-settings`,
+      id: `${meta.id}/surface/plugin-settings`,
       role: 'article',
-      filter: (data): data is { subject: SettingsStore<MarkdownSettingsProps> } =>
-        data.subject instanceof SettingsStore && data.subject.prefix === MARKDOWN_PLUGIN,
+      filter: (data): data is { subject: SettingsStore<Markdown.Settings> } =>
+        data.subject instanceof SettingsStore && data.subject.prefix === meta.id,
       component: ({ data: { subject } }) => <MarkdownSettings settings={subject.value} />,
     }),
     createSurface({
-      id: `${MARKDOWN_PLUGIN}/preview`,
-      role: ['card--popover', 'card--intrinsic', 'card--extrinsic', 'card--transclusion', 'card'],
-      filter: (data): data is { subject: DocumentType | DataType.Text } =>
-        Obj.instanceOf(DocumentType, data.subject) || Obj.instanceOf(DataType.Text, data.subject),
-      component: ({ data, role }) => <MarkdownPreview {...data} role={role} />,
+      id: `${meta.id}/surface/preview`,
+      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, ref }) => <MarkdownCard {...data} role={role as SurfaceCardRole} ref={ref} />,
     }),
   ]);
+
+/**
+ * Common wrapper.
+ */
+// TOOD(burdon): Use common type def.
+const Container = forwardRef<HTMLDivElement, { id: string; subject: MarkdownContainerProps['object']; role: string }>(
+  ({ id, subject, role }, forwardedRef) => {
+    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}
+        ref={forwardedRef}
+      />
+    );
+  },
+);

package/src/capabilities/settings.ts

@@ -6,10 +6,10 @@ import { Capabilities, contributes } from '@dxos/app-framework';
 import { live } from '@dxos/live-object';
 
 import { meta } from '../meta';
-import { type MarkdownSettingsProps, MarkdownSettingsSchema } from '../types';
+import { Markdown } from '../types';
 
 export default () => {
-  const settings = live<MarkdownSettingsProps>({
+  const settings = live<Markdown.Settings>({
     defaultViewMode: 'preview',
     toolbar: true,
     numberedHeadings: true,
@@ -19,7 +19,7 @@ export default () => {
 
   return contributes(Capabilities.Settings, {
     prefix: meta.id,
-    schema: MarkdownSettingsSchema,
+    schema: Markdown.Settings,
     value: settings,
   });
 };

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/components/MarkdownCard/MarkdownCard.stories.tsx

@@ -0,0 +1,76 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+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 { 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: [
+    withTheme,
+    withPluginManager({
+      plugins: [IntentPlugin()],
+    }),
+  ],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+  tags: ['cards'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Popover: Story = {
+  args: {
+    role: 'card--popover',
+    subject: Markdown.make({
+      name: faker.lorem.words(3),
+      content: faker.lorem.paragraphs(3),
+    }),
+  },
+};
+
+export const Intrinsic: Story = {
+  args: {
+    role: 'card--intrinsic',
+    subject: Markdown.make({
+      name: faker.lorem.words(3),
+      content: faker.lorem.paragraphs(3),
+    }),
+  },
+};
+
+export const Extrinsic: Story = {
+  args: {
+    role: 'card--extrinsic',
+    subject: Markdown.make({
+      name: faker.lorem.words(3),
+      content: faker.lorem.paragraphs(3),
+    }),
+  },
+};

package/src/components/MarkdownCard/MarkdownCard.tsx

@@ -0,0 +1,96 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Function from 'effect/Function';
+import React, { forwardRef, useCallback, useMemo } from 'react';
+
+import { LayoutAction, chain, createIntent } from '@dxos/app-framework';
+import { useIntentDispatcher } from '@dxos/app-framework/react';
+import { Obj } from '@dxos/echo';
+import { type CardPreviewProps } from '@dxos/plugin-preview';
+import { IconButton, useTranslation } from '@dxos/react-ui';
+import { Card } from '@dxos/react-ui-stack';
+import { Text } from '@dxos/schema';
+
+import { meta } from '../../meta';
+import { Markdown } from '../../types';
+import { getContentSnippet, getFallbackName } from '../../util';
+import { MarkdownEditor } from '../MarkdownEditor';
+
+export type MarkdownCardProps = CardPreviewProps<Markdown.Document | Text.Text>;
+
+export const MarkdownCard = forwardRef<HTMLDivElement, MarkdownCardProps>(
+  ({ subject, role }: MarkdownCardProps, forwardedRef) => {
+    const { dispatchPromise: dispatch } = useIntentDispatcher();
+    const { t } = useTranslation(meta.id);
+    const snippet = useMemo(() => getSnippet(subject, t('fallback abstract')), [subject]);
+    const info = getInfo(subject);
+
+    // TODO(wittjosiah): Factor out so this component isn't dependent on the app framework.
+    const handleNavigate = useCallback(() => {
+      void dispatch(
+        Function.pipe(
+          createIntent(LayoutAction.UpdatePopover, {
+            part: 'popover',
+            subject: null,
+            options: { state: false, anchorId: '' },
+          }),
+          chain(LayoutAction.Open, {
+            part: 'main',
+            subject: [Obj.getDXN(subject).toString()],
+          }),
+        ),
+      );
+    }, [dispatch, subject]);
+
+    return (
+      <Card.SurfaceRoot role={role} ref={forwardedRef}>
+        <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='flex max-h-[300px] overflow-hidden'>
+            <MarkdownEditor.Root id={subject.id} viewMode='readonly'>
+              <MarkdownEditor.Content initialValue={snippet} slots={{}} classNames='!bg-transparent' />
+            </MarkdownEditor.Root>
+          </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/MarkdownCard/index.ts

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