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

package/src/capabilities/react-surface/react-surface.tsx

@@ -0,0 +1,100 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import React, { forwardRef, useCallback, useMemo } from 'react';
+
+import { Capability, Common } from '@dxos/app-framework';
+import {
+  type SurfaceComponentProps,
+  useAtomCapability,
+  useAtomCapabilityState,
+  useCapability,
+  useSettingsState,
+} from '@dxos/app-framework/react';
+import { Obj } from '@dxos/echo';
+import { AttentionCapabilities } from '@dxos/plugin-attention';
+import { Text } from '@dxos/schema';
+import { type EditorViewMode } from '@dxos/ui-editor';
+
+import { MarkdownCard, MarkdownContainer, type MarkdownContainerProps, MarkdownSettings } from '../../components';
+import { meta } from '../../meta';
+import { Markdown, MarkdownCapabilities } from '../../types';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Common.Capability.ReactSurface, [
+      Common.createSurface({
+        id: `${meta.id}/surface/document`,
+        role: ['article', 'section', 'tabpanel'],
+        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} />;
+        },
+      }),
+      Common.createSurface({
+        id: `${meta.id}/surface/text`,
+        role: ['article', 'section', 'tabpanel'],
+        filter: (data): data is { id: string; subject: Text.Text } =>
+          typeof data.id === 'string' && Obj.instanceOf(Text.Text, data.subject),
+        component: ({ data, role }) => {
+          return <Container id={data.id} subject={data.subject} role={role} />;
+        },
+      }),
+      Common.createSurface({
+        id: `${meta.id}/surface/plugin-settings`,
+        role: 'article',
+        filter: (data): data is { subject: Common.Capability.Settings } =>
+          Common.Capability.isSettings(data.subject) && data.subject.prefix === meta.id,
+        component: ({ data: { subject } }) => {
+          const { settings, updateSettings } = useSettingsState<Markdown.Settings>(subject.atom);
+          return <MarkdownSettings settings={settings} onSettingsChange={updateSettings} />;
+        },
+      }),
+      Common.createSurface({
+        id: `${meta.id}/surface/preview`,
+        role: 'card--content',
+        filter: (data): data is { subject: Markdown.Document | Text.Text } =>
+          Obj.instanceOf(Markdown.Document, data.subject) || Obj.instanceOf(Text.Text, data.subject),
+        component: ({ data }) => <MarkdownCard {...data} />,
+      }),
+    ]),
+  ),
+);
+
+/**
+ * Common wrapper.
+ */
+const Container = forwardRef<HTMLDivElement, SurfaceComponentProps<Markdown.Document | Text.Text, { id: string }>>(
+  ({ id, subject, role }, forwardedRef) => {
+    const selectionManager = useCapability(AttentionCapabilities.Selection);
+    const settings = useAtomCapability(MarkdownCapabilities.Settings);
+    const [state, setState] = useAtomCapabilityState(MarkdownCapabilities.State);
+    const editorState = useCapability(MarkdownCapabilities.EditorState);
+    const extensions = useCapability(MarkdownCapabilities.Extensions);
+    const extensionProviders = useMemo(() => extensions.flat(), [extensions]);
+
+    const viewMode: EditorViewMode = (id && state.viewMode[id]) || settings?.defaultViewMode || 'source';
+    const handleViewModeChange = useCallback<NonNullable<MarkdownContainerProps['onViewModeChange']>>(
+      (mode) => setState((current) => ({ ...current, viewMode: { ...current.viewMode, [id]: mode } })),
+      [id, setState],
+    );
+
+    return (
+      <MarkdownContainer
+        role={role}
+        subject={subject}
+        id={id}
+        settings={settings}
+        selectionManager={selectionManager}
+        extensionProviders={extensionProviders}
+        editorStateStore={editorState}
+        viewMode={viewMode}
+        onViewModeChange={handleViewModeChange}
+        ref={forwardedRef}
+      />
+    );
+  },
+);

package/src/capabilities/settings/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const MarkdownSettings = Capability.lazy('MarkdownSettings', () => import('./settings'));

package/src/capabilities/settings/settings.ts

@@ -0,0 +1,36 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability, Common } from '@dxos/app-framework';
+import { createKvsStore } from '@dxos/effect';
+
+import { meta } from '../../meta';
+import { Markdown, MarkdownCapabilities } from '../../types';
+
+export default Capability.makeModule(() =>
+  Effect.sync(() => {
+    const settingsAtom = createKvsStore({
+      key: meta.id,
+      schema: Markdown.Settings,
+      defaultValue: () => ({
+        defaultViewMode: 'preview' as const,
+        toolbar: true,
+        numberedHeadings: true,
+        folding: true,
+        experimental: false,
+      }),
+    });
+
+    return [
+      Capability.contributes(MarkdownCapabilities.Settings, settingsAtom),
+      Capability.contributes(Common.Capability.Settings, {
+        prefix: meta.id,
+        schema: Markdown.Settings,
+        atom: settingsAtom,
+      }),
+    ];
+  }),
+);

package/src/capabilities/state/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const MarkdownState = Capability.lazy('MarkdownState', () => import('./state'));

package/src/capabilities/state/state.ts

@@ -0,0 +1,31 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { createKvsStore } from '@dxos/effect';
+import { createEditorStateStore } from '@dxos/ui-editor';
+
+import { meta } from '../../meta';
+import { MarkdownCapabilities, MarkdownStateSchema } from '../../types';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    // Persisted state using KVS store.
+    const stateAtom = createKvsStore({
+      key: `${meta.id}/state`,
+      schema: MarkdownStateSchema,
+      defaultValue: () => ({ viewMode: {} }),
+    });
+
+    // TODO(wittjosiah): Fold into state.
+    const editorState = createEditorStateStore(`${meta.id}/editor`);
+
+    return [
+      Capability.contributes(MarkdownCapabilities.State, stateAtom),
+      Capability.contributes(MarkdownCapabilities.EditorState, editorState),
+    ];
+  }),
+);

package/src/cli/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './plugin';

package/src/cli/plugin.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Common, Plugin } from '@dxos/app-framework';
+import { type CreateObject } from '@dxos/plugin-space/types';
+import { Text } from '@dxos/schema';
+
+// NOTE: Must not import from index to avoid pulling in react dependencies.
+import { OperationResolver } from '../capabilities/operation-resolver';
+import { meta } from '../meta';
+import { Markdown } from '../types';
+
+export const MarkdownPlugin = Plugin.define(meta).pipe(
+  Common.Plugin.addSchemaModule({ schema: [Markdown.Document, Text.Text] }),
+  Common.Plugin.addMetadataModule({
+    metadata: {
+      id: Markdown.Document.typename,
+      metadata: {
+        createObject: ((props) => Effect.sync(() => Markdown.make(props))) satisfies CreateObject,
+        addToCollectionOnCreate: true,
+      },
+    },
+  }),
+  Common.Plugin.addOperationResolverModule({ activate: OperationResolver }),
+  Plugin.make,
+);

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

@@ -2,78 +2,57 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
+import React, { useMemo } from 'react';
 
-import { IntentPlugin } from '@dxos/app-framework';
+import { OperationPlugin } 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 { withTheme } from '@dxos/react-ui/testing';
+import { CardContainer } from '@dxos/react-ui-mosaic/testing';
 
 import { translations } from '../../translations';
 
-import { MarkdownCard } from './MarkdownCard';
+import { MarkdownCard, type MarkdownCardProps } from './MarkdownCard';
 
 faker.seed(1234);
 
-const meta: Meta<typeof MarkdownCard> = {
+// TODO(wittjosiah): ECHO objects don't work when passed via Storybook args.
+const MarkdownCardStory = ({ ...args }: Omit<MarkdownCardProps, 'subject'>) => {
+  const subject = useMemo(
+    () =>
+      Markdown.make({
+        name: faker.lorem.words(3),
+        content: faker.lorem.paragraphs(3),
+      }),
+    [],
+  );
+  return (
+    <CardContainer icon='ph--text-aa--regular'>
+      <MarkdownCard subject={subject} {...args} />
+    </CardContainer>
+  );
+};
+
+const meta: Meta<typeof MarkdownCardStory> = {
   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>
-    );
-  },
+  component: MarkdownCardStory,
   decorators: [
+    withTheme,
     withPluginManager({
-      plugins: [IntentPlugin()],
+      plugins: [OperationPlugin()],
     }),
-    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),
-    }),
-  },
-};
+export const Default: Story = {};

package/src/components/MarkdownCard/MarkdownCard.tsx

@@ -2,74 +2,61 @@
 // Copyright 2025 DXOS.org
 //
 
-import { pipe } from 'effect';
-import React, { useCallback } from 'react';
+import React, { useMemo } 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 { Card } from '@dxos/react-ui-stack';
-import { DataType } from '@dxos/schema';
+import { useTranslation } from '@dxos/react-ui';
+import { Card } from '@dxos/react-ui-mosaic';
+import { Text } from '@dxos/schema';
 
 import { meta } from '../../meta';
 import { Markdown } from '../../types';
-import { getAbstract, getFallbackName } from '../../util';
+import { getContentSnippet, getFallbackName } from '../../util';
+import { MarkdownEditor } from '../MarkdownEditor';
+
+export type MarkdownCardProps = { subject: Markdown.Document | Text.Text };
+
+export const MarkdownCard = ({ subject }: MarkdownCardProps) => {
+  const { t } = useTranslation(meta.id);
+  const snippet = useMemo(() => getSnippet(subject), [subject]);
+  const info = getInfo(subject);
+
+  return (
+    <Card.Content>
+      {snippet && (
+        <div className='max-h-[300px] overflow-hidden'>
+          <MarkdownEditor.Root id={subject.id} viewMode='readonly'>
+            <MarkdownEditor.Content initialValue={snippet} slots={{}} classNames='!bg-transparent' />
+          </MarkdownEditor.Root>
+        </div>
+      )}
+      <Card.Text classNames='text-xs text-description'>
+        {info.words} {t('words label', { count: info.words })}
+      </Card.Text>
+    </Card.Content>
+  );
+};
+
+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 | DataType.Text, fallback: string) => {
+const getTitle = (subject: Markdown.Document | Text.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)) {
+    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 | DataType.Text, fallback: string) => {
+const getSnippet = (subject: Markdown.Document | Text.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);
+    return Obj.getDescription(subject) || getContentSnippet(subject.content?.target?.content ?? fallback);
+  } else if (Obj.instanceOf(Text.Text, subject)) {
+    return getContentSnippet(subject.content ?? fallback);
   }
 };
-
-export type MarkdownCardProps = PreviewProps<Markdown.Document | DataType.Text>;
-
-export const MarkdownCard = ({ subject, role }: MarkdownCardProps) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  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.
-  const handleNavigate = useCallback(
-    () =>
-      dispatch(
-        pipe(
-          createIntent(LayoutAction.UpdatePopover, {
-            part: 'popover',
-            subject: null,
-            options: { state: false, anchorId: '' },
-          }),
-          chain(LayoutAction.Open, { part: 'main', subject: [fullyQualifiedId(subject)] }),
-        ),
-      ),
-    [dispatch, subject],
-  );
-
-  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.SurfaceRoot>
-  );
-};

package/src/components/MarkdownContainer.stories.tsx

@@ -2,36 +2,25 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
 import React, { useMemo } from 'react';
 
-import {
-  type Capabilities,
-  IntentPlugin,
-  LayoutAction,
-  SettingsPlugin,
-  Surface,
-  createIntent,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
+import { Common } from '@dxos/app-framework';
+import { Surface, useOperationInvoker } from '@dxos/app-framework/react';
 import { withPluginManager } from '@dxos/app-framework/testing';
 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 { SpacePlugin } from '@dxos/plugin-space';
-import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
-import { ThemePlugin } from '@dxos/plugin-theme';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 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 { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { useAttentionAttributes } from '@dxos/react-ui-attention';
+import { Text } from '@dxos/schema';
 import { type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
-import { withLayout } from '@dxos/storybook-utils';
+import { Organization, Person } from '@dxos/types';
 
 import { MarkdownPlugin } from '../MarkdownPlugin';
 import { translations } from '../translations';
@@ -42,70 +31,93 @@ faker.seed(1);
 const generator: ValueGenerator = faker as any;
 
 const DefaultStory = () => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
   const space = useSpace();
-  const [doc] = useQuery(space, Query.type(Markdown.Document));
+  const [doc] = useQuery(space?.db, 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 }));
+      await invokePromise(Common.LayoutOperation.SwitchWorkspace, { subject: space.id });
     }
-  }, [space, dispatch]);
+  }, [space, invokePromise]);
 
-  return <Surface role='article' data={data} limit={1} />;
+  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({ layout: 'column' }),
+    withPluginManager<{ title?: string; content?: string }>((context) => ({
       plugins: [
-        AttentionPlugin(),
-        ThemePlugin({ tx: defaultTx }),
-        StorybookLayoutPlugin(),
+        ...corePlugins(),
+        StorybookPlugin({}),
         ClientPlugin({
-          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 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: DataType.Organization, count: 10 }]);
-            await space.db.flush({ indexes: true });
-          },
+          types: [Markdown.Document, Text.Text, Person.Person, Organization.Organization],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+              yield* Effect.promise(() => client.spaces.waitUntilReady());
+              yield* Effect.promise(() => client.spaces.default.waitUntilReady());
+
+              const space = client.spaces.default;
+              const createObjects = createObjectFactory(space.db, generator);
+              yield* Effect.promise(() => 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' });
+              yield* Effect.promise(() => 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'),
+                }),
+              );
+
+              yield* Effect.promise(() => space.db.flush({ indexes: true }));
+            }),
         }),
-        SpacePlugin(),
-        SettingsPlugin(),
-        IntentPlugin(),
+
         MarkdownPlugin(),
         PreviewPlugin(),
-        GraphPlugin(),
       ],
-    }),
-    withLayout({ fullscreen: true }),
+    })),
   ],
   parameters: {
-    translations,
+    layout: 'fullscreen',
     controls: { disable: true },
+    translations,
   },
-} satisfies Meta<typeof Capabilities>;
+} satisfies Meta<typeof DefaultStory>;
 
 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'),
+  },
+};