@dxos/plugin-markdown 0.7.5-main.9d26e3a → 0.7.5-main.9d2a38b

package/src/MarkdownPlugin.tsx

@@ -1,85 +1,59 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
-import { pipe } from 'effect';
-import React from 'react';
-
 import {
-  parseIntentPlugin,
-  resolvePlugin,
-  type PluginDefinition,
-  createSurface,
-  createResolver,
+  Capabilities,
+  contributes,
   createIntent,
-  chain,
+  defineModule,
+  definePlugin,
+  Events,
+  oneOf,
 } from '@dxos/app-framework';
-import type { BaseObject } from '@dxos/echo-schema';
-import { create, makeRef, RefArray } from '@dxos/live-object';
-import { LocalStorageStore } from '@dxos/local-storage';
-import { SpaceAction } from '@dxos/plugin-space';
-import { CollectionType } from '@dxos/plugin-space/types';
-import { createDocAccessor, fullyQualifiedId, getRangeFromCursor, isSpace } from '@dxos/react-client/echo';
-import {
-  type EditorInputMode,
-  type EditorViewMode,
-  translations as editorTranslations,
-  createEditorStateStore,
-} from '@dxos/react-ui-editor';
+import { type BaseObject } from '@dxos/echo-schema';
+import { RefArray } from '@dxos/live-object';
+import { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
+import { translations as editorTranslations } from '@dxos/react-ui-editor';
+import { TextType } from '@dxos/schema';
 
-import { MarkdownContainer, MarkdownSettings } from './components';
-import meta, { MARKDOWN_PLUGIN } from './meta';
-import translations from './translations';
-import { DocumentType, isEditorModel, TextType } from './types';
 import {
-  type MarkdownPluginProvides,
-  type MarkdownSettingsProps,
-  MarkdownAction,
-  type MarkdownPluginState,
-} from './types';
-import { markdownExtensionPlugins, serializer } from './util';
-
-export const MarkdownPlugin = (): PluginDefinition<MarkdownPluginProvides> => {
-  const settings = new LocalStorageStore<MarkdownSettingsProps>(MARKDOWN_PLUGIN, {
-    defaultViewMode: 'preview',
-    toolbar: true,
-    numberedHeadings: true,
-    folding: true,
-    experimental: false,
-  });
-
-  const editorStateStore = createEditorStateStore(`${MARKDOWN_PLUGIN}/editor`);
-
-  const state = new LocalStorageStore<MarkdownPluginState>(MARKDOWN_PLUGIN, { extensionProviders: [], viewMode: {} });
-
-  const getViewMode = (id: string) => (id && state.values.viewMode[id]) || settings.values.defaultViewMode;
-  const setViewMode = (id: string, viewMode: EditorViewMode) => (state.values.viewMode[id] = viewMode);
-
-  return {
-    meta,
-    ready: async ({ plugins }) => {
-      settings
-        .prop({ key: 'defaultViewMode', type: LocalStorageStore.enum<EditorViewMode>() })
-        .prop({ key: 'editorInputMode', type: LocalStorageStore.enum<EditorInputMode>({ allowUndefined: true }) })
-        .prop({ key: 'toolbar', type: LocalStorageStore.bool({ allowUndefined: true }) })
-        .prop({ key: 'experimental', type: LocalStorageStore.bool({ allowUndefined: true }) })
-        .prop({ key: 'debug', type: LocalStorageStore.bool({ allowUndefined: true }) })
-        .prop({ key: 'typewriter', type: LocalStorageStore.string({ allowUndefined: true }) })
-        .prop({ key: 'numberedHeadings', type: LocalStorageStore.bool({ allowUndefined: true }) })
-        .prop({ key: 'folding', type: LocalStorageStore.bool({ allowUndefined: true }) });
-
-      state.prop({ key: 'viewMode', type: LocalStorageStore.json<{ [key: string]: EditorViewMode }>() });
-
-      markdownExtensionPlugins(plugins).forEach((plugin) => {
-        const { extensions } = plugin.provides.markdown;
-        state.values.extensionProviders?.push(extensions);
-      });
-    },
-    provides: {
-      settings: settings.values,
-      metadata: {
-        records: {
-          [DocumentType.typename]: {
+  MarkdownState,
+  MarkdownSettings,
+  ReactSurface,
+  IntentResolver,
+  AppGraphSerializer,
+  Thread,
+} from './capabilities';
+import { MARKDOWN_PLUGIN, meta } from './meta';
+import translations from './translations';
+import { DocumentType, MarkdownAction } from './types';
+import { serializer } from './util';
+
+export const MarkdownPlugin = () =>
+  definePlugin(meta, [
+    defineModule({
+      id: `${meta.id}/module/settings`,
+      activatesOn: Events.SetupSettings,
+      activate: MarkdownSettings,
+    }),
+    defineModule({
+      id: `${meta.id}/module/state`,
+      activatesOn: Events.Startup,
+      activate: MarkdownState,
+    }),
+    defineModule({
+      id: `${meta.id}/module/translations`,
+      activatesOn: Events.SetupTranslations,
+      activate: () => contributes(Capabilities.Translations, [...translations, ...editorTranslations]),
+    }),
+    defineModule({
+      id: `${meta.id}/module/metadata`,
+      activatesOn: oneOf(Events.Startup, Events.SetupAppGraph),
+      activate: () =>
+        contributes(Capabilities.Metadata, {
+          id: DocumentType.typename,
+          metadata: {
             createObject: (props: { name?: string }) => createIntent(MarkdownAction.Create, props),
             label: (object: any) => (object instanceof DocumentType ? object.name || object.fallbackName : undefined),
             placeholder: ['document title placeholder', { ns: MARKDOWN_PLUGIN }],
@@ -92,142 +66,34 @@ export const MarkdownPlugin = (): PluginDefinition<MarkdownPluginProvides> => {
               await RefArray.loadAll<BaseObject>([doc.content, ...doc.threads]),
             serializer,
           },
-        },
-      },
-      translations: [...translations, ...editorTranslations],
-      echo: {
-        schema: [DocumentType],
-        system: [TextType],
-      },
-      graph: {
-        serializer: (plugins) => {
-          const dispatch = resolvePlugin(plugins, parseIntentPlugin)?.provides.intent.dispatchPromise;
-          if (!dispatch) {
-            return [];
-          }
-
-          return [
-            {
-              inputType: DocumentType.typename,
-              outputType: 'text/markdown',
-              // Reconcile with metadata serializers.
-              serialize: async (node) => {
-                const doc = node.data;
-                const content = await doc.content.load();
-                return {
-                  name:
-                    doc.name ||
-                    doc.fallbackName ||
-                    translations[0]['en-US'][MARKDOWN_PLUGIN]['document title placeholder'],
-                  data: content.content,
-                  type: 'text/markdown',
-                };
-              },
-              deserialize: async (data, ancestors) => {
-                const space = ancestors.find(isSpace);
-                const target =
-                  ancestors.findLast((ancestor) => ancestor instanceof CollectionType) ??
-                  space?.properties[CollectionType.typename]?.target;
-                if (!space || !target) {
-                  return;
-                }
-
-                const result = await dispatch(
-                  pipe(
-                    createIntent(MarkdownAction.Create, { name: data.name, content: data.data }),
-                    chain(SpaceAction.AddObject, { target }),
-                  ),
-                );
-
-                return result.data?.object;
-              },
-            },
-          ];
-        },
-      },
-      thread: {
-        predicate: (obj) => obj instanceof DocumentType,
-        createSort: (doc: DocumentType) => {
-          const accessor = doc.content.target ? createDocAccessor(doc.content.target, ['content']) : undefined;
-          if (!accessor) {
-            return (_) => 0;
-          }
-
-          const getStartPosition = (cursor: string | undefined) => {
-            const range = cursor ? getRangeFromCursor(accessor, cursor) : undefined;
-            return range?.start ?? Number.MAX_SAFE_INTEGER;
-          };
-
-          return (anchorA: string | undefined, anchorB: string | undefined): number => {
-            if (anchorA === undefined || anchorB === undefined) {
-              return 0;
-            }
-            const posA = getStartPosition(anchorA);
-            const posB = getStartPosition(anchorB);
-            return posA - posB;
-          };
-        },
-      },
-      surface: {
-        definitions: () => [
-          createSurface({
-            id: `${MARKDOWN_PLUGIN}/document`,
-            role: ['article', 'section'],
-            filter: (data): data is { subject: DocumentType } => data.subject instanceof DocumentType,
-            component: ({ data, role }) => (
-              <MarkdownContainer
-                id={fullyQualifiedId(data.subject)}
-                object={data.subject}
-                role={role}
-                settings={settings.values}
-                extensionProviders={state.values.extensionProviders}
-                viewMode={getViewMode(fullyQualifiedId(data.subject))}
-                editorStateStore={editorStateStore}
-                onViewModeChange={setViewMode}
-              />
-            ),
-          }),
-          createSurface({
-            id: `${MARKDOWN_PLUGIN}/editor`,
-            role: ['article', 'section'],
-            filter: (data): data is { subject: { id: string; text: string } } => isEditorModel(data.subject),
-            component: ({ data, role }) => (
-              <MarkdownContainer
-                id={data.subject.id}
-                object={data.subject}
-                role={role}
-                settings={settings.values}
-                extensionProviders={state.values.extensionProviders}
-                viewMode={getViewMode(data.subject.id)}
-                editorStateStore={editorStateStore}
-                onViewModeChange={setViewMode}
-              />
-            ),
-          }),
-          createSurface({
-            id: `${MARKDOWN_PLUGIN}/settings`,
-            role: 'settings',
-            filter: (data): data is any => data.subject === MARKDOWN_PLUGIN,
-            component: () => <MarkdownSettings settings={settings.values} />,
-          }),
-        ],
-      },
-      intent: {
-        resolvers: () => [
-          createResolver(MarkdownAction.Create, ({ name, content }) => {
-            const doc = create(DocumentType, {
-              name,
-              content: makeRef(create(TextType, { content: content ?? '' })),
-              threads: [],
-            });
-
-            return { data: { object: doc } };
-          }),
-          createResolver(MarkdownAction.SetViewMode, ({ id, viewMode }) => {
-            state.values.viewMode[id] = viewMode;
-          }),
-        ],
-      },
-    },
-  };
-};
+        }),
+    }),
+    defineModule({
+      id: `${meta.id}/module/schema`,
+      activatesOn: ClientEvents.SetupClient,
+      activate: () => [
+        contributes(ClientCapabilities.SystemSchema, [TextType]),
+        contributes(ClientCapabilities.Schema, [DocumentType]),
+      ],
+    }),
+    defineModule({
+      id: `${meta.id}/module/react-surface`,
+      activatesOn: Events.Startup,
+      activate: ReactSurface,
+    }),
+    defineModule({
+      id: `${meta.id}/module/intent-resolver`,
+      activatesOn: Events.SetupIntents,
+      activate: IntentResolver,
+    }),
+    defineModule({
+      id: `${meta.id}/module/app-graph-serializer`,
+      activatesOn: Events.Startup,
+      activate: AppGraphSerializer,
+    }),
+    defineModule({
+      id: `${meta.id}/module/thread`,
+      activatesOn: Events.Startup,
+      activate: Thread,
+    }),
+  ]);

package/src/capabilities/app-graph-serializer.ts

@@ -0,0 +1,50 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { pipe } from 'effect';
+
+import { contributes, Capabilities, type PluginsContext, chain, createIntent } from '@dxos/app-framework';
+import { SpaceAction, CollectionType } from '@dxos/plugin-space/types';
+import { isSpace } from '@dxos/react-client/echo';
+
+import { MARKDOWN_PLUGIN } from '../meta';
+import translations from '../translations';
+import { MarkdownAction, DocumentType } from '../types';
+
+export default (context: PluginsContext) =>
+  contributes(Capabilities.AppGraphSerializer, [
+    {
+      inputType: DocumentType.typename,
+      outputType: 'text/markdown',
+      // Reconcile with metadata serializers.
+      serialize: async (node) => {
+        const doc = node.data;
+        const content = await doc.content.load();
+        return {
+          name: doc.name || doc.fallbackName || translations[0]['en-US'][MARKDOWN_PLUGIN]['document title placeholder'],
+          data: content.content,
+          type: 'text/markdown',
+        };
+      },
+      deserialize: async (data, ancestors) => {
+        const space = ancestors.find(isSpace);
+        const target =
+          ancestors.findLast((ancestor) => ancestor instanceof CollectionType) ??
+          space?.properties[CollectionType.typename]?.target;
+        if (!space || !target) {
+          return;
+        }
+
+        const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
+        const result = await dispatch(
+          pipe(
+            createIntent(MarkdownAction.Create, { name: data.name, content: data.data }),
+            chain(SpaceAction.AddObject, { target }),
+          ),
+        );
+
+        return result.data?.object;
+      },
+    },
+  ]);

package/src/capabilities/capabilities.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { defineCapability } from '@dxos/app-framework';
+import { type EditorViewMode, type EditorStateStore } from '@dxos/react-ui-editor';
+
+import { MARKDOWN_PLUGIN } from '../meta';
+import { type MarkdownExtensionProvider, type MarkdownPluginState } from '../types';
+
+export namespace MarkdownCapabilities {
+  export const State = defineCapability<{
+    state: MarkdownPluginState;
+    editorState: EditorStateStore;
+    getViewMode: (id: string) => EditorViewMode;
+    setViewMode: (id: string, viewMode: EditorViewMode) => void;
+  }>(`${MARKDOWN_PLUGIN}/capability/state`);
+
+  export const Extensions = defineCapability<MarkdownExtensionProvider[]>(`${MARKDOWN_PLUGIN}/capability/extensions`);
+}

package/src/capabilities/index.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { lazy } from '@dxos/app-framework';
+
+export const AppGraphSerializer = lazy(() => import('./app-graph-serializer'));
+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 const Thread = lazy(() => import('./thread'));
+
+export * from './capabilities';

package/src/capabilities/intent-resolver.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, contributes, createResolver, type PluginsContext } from '@dxos/app-framework';
+import { makeRef, create } from '@dxos/live-object';
+import { TextType } from '@dxos/schema';
+
+import { MarkdownCapabilities } from './capabilities';
+import { DocumentType, MarkdownAction } from '../types';
+
+export default (context: PluginsContext) =>
+  contributes(Capabilities.IntentResolver, [
+    createResolver(MarkdownAction.Create, ({ name, content }) => {
+      const doc = create(DocumentType, {
+        name,
+        content: makeRef(create(TextType, { content: content ?? '' })),
+        threads: [],
+      });
+
+      return { data: { object: doc } };
+    }),
+    createResolver(MarkdownAction.SetViewMode, ({ id, viewMode }) => {
+      const { state } = context.requestCapability(MarkdownCapabilities.State);
+      state.viewMode[id] = viewMode;
+    }),
+  ]);

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,73 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { createSurface, contributes, Capabilities, useCapability } from '@dxos/app-framework';
+import { fullyQualifiedId } from '@dxos/react-client/echo';
+
+import { MarkdownCapabilities } from './capabilities';
+import { MarkdownContainer, MarkdownSettings } from '../components';
+import { MARKDOWN_PLUGIN } from '../meta';
+import { DocumentType, isEditorModel, type MarkdownSettingsProps } from '../types';
+
+export default () =>
+  contributes(Capabilities.ReactSurface, [
+    createSurface({
+      id: `${MARKDOWN_PLUGIN}/document`,
+      role: ['article', 'section'],
+      filter: (data): data is { subject: DocumentType } => data.subject instanceof DocumentType,
+      component: ({ data, role }) => {
+        const settingsStore = useCapability(Capabilities.SettingsStore);
+        const settings = settingsStore.getStore<MarkdownSettingsProps>(MARKDOWN_PLUGIN)!.value;
+        const { state, editorState, getViewMode, setViewMode } = useCapability(MarkdownCapabilities.State);
+
+        return (
+          <MarkdownContainer
+            id={fullyQualifiedId(data.subject)}
+            object={data.subject}
+            role={role}
+            settings={settings}
+            extensionProviders={state.extensionProviders}
+            viewMode={getViewMode(fullyQualifiedId(data.subject))}
+            editorStateStore={editorState}
+            onViewModeChange={setViewMode}
+          />
+        );
+      },
+    }),
+    createSurface({
+      id: `${MARKDOWN_PLUGIN}/editor`,
+      role: ['article', 'section'],
+      filter: (data): data is { subject: { id: string; text: string } } => isEditorModel(data.subject),
+      component: ({ data, role }) => {
+        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}
+            extensionProviders={state.extensionProviders}
+            viewMode={getViewMode(data.subject.id)}
+            editorStateStore={editorState}
+            onViewModeChange={setViewMode}
+          />
+        );
+      },
+    }),
+    createSurface({
+      id: `${MARKDOWN_PLUGIN}/settings`,
+      role: 'settings',
+      filter: (data): data is any => data.subject === MARKDOWN_PLUGIN,
+      component: () => {
+        const settingsStore = useCapability(Capabilities.SettingsStore);
+        const settings = settingsStore.getStore<MarkdownSettingsProps>(MARKDOWN_PLUGIN)!.value;
+        return <MarkdownSettings settings={settings} />;
+      },
+    }),
+  ]);

package/src/capabilities/settings.ts

@@ -0,0 +1,25 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, contributes } from '@dxos/app-framework';
+import { create } from '@dxos/live-object';
+
+import { MARKDOWN_PLUGIN } from '../meta';
+import { type MarkdownSettingsProps, MarkdownSettingsSchema } from '../types';
+
+export default () => {
+  const settings = create<MarkdownSettingsProps>({
+    defaultViewMode: 'preview',
+    toolbar: true,
+    numberedHeadings: true,
+    folding: true,
+    experimental: false,
+  });
+
+  return contributes(Capabilities.Settings, {
+    schema: MarkdownSettingsSchema,
+    prefix: MARKDOWN_PLUGIN,
+    value: settings,
+  });
+};

package/src/capabilities/state.ts

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

package/src/capabilities/thread.ts

@@ -0,0 +1,34 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { contributes } from '@dxos/app-framework';
+import { ThreadCapabilities } from '@dxos/plugin-space';
+import { createDocAccessor, getRangeFromCursor } from '@dxos/react-client/echo';
+
+import { DocumentType } from '../types';
+
+export default () =>
+  contributes(ThreadCapabilities.Thread, {
+    predicate: (obj) => obj instanceof DocumentType,
+    createSort: (doc: DocumentType) => {
+      const accessor = doc.content.target ? createDocAccessor(doc.content.target, ['content']) : undefined;
+      if (!accessor) {
+        return (_) => 0;
+      }
+
+      const getStartPosition = (cursor: string | undefined) => {
+        const range = cursor ? getRangeFromCursor(accessor, cursor) : undefined;
+        return range?.start ?? Number.MAX_SAFE_INTEGER;
+      };
+
+      return (anchorA: string | undefined, anchorB: string | undefined): number => {
+        if (anchorA === undefined || anchorB === undefined) {
+          return 0;
+        }
+        const posA = getStartPosition(anchorA);
+        const posB = getStartPosition(anchorB);
+        return posA - posB;
+      };
+    },
+  });

package/src/components/MarkdownContainer.tsx

@@ -4,7 +4,7 @@
 
 import React, { useEffect, useMemo } from 'react';
 
-import { useResolvePlugin, parseFileManagerPlugin } from '@dxos/app-framework';
+import { Capabilities, useCapabilities } from '@dxos/app-framework';
 import { fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
 
 import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
@@ -27,7 +27,6 @@ const MarkdownContainer = ({
   id,
   role,
   object,
-  extensionProviders,
   settings,
   viewMode,
   editorStateStore,
@@ -35,7 +34,7 @@ const MarkdownContainer = ({
 }: MarkdownContainerProps) => {
   const scrollPastEnd = role === 'article';
   const doc = object instanceof DocumentType ? object : undefined;
-  const extensions = useExtensions({ extensionProviders, document: doc, settings, viewMode, editorStateStore });
+  const extensions = useExtensions({ document: doc, settings, viewMode, editorStateStore });
 
   if (doc) {
     return (
@@ -88,15 +87,15 @@ export const DocumentEditor = ({ id, document: doc, settings, viewMode, ...props
   }, [doc, doc.content]);
 
   // File dragging.
-  const fileManagerPlugin = useResolvePlugin(parseFileManagerPlugin);
+  const [upload] = useCapabilities(Capabilities.FileUploader);
   const handleFileUpload = useMemo(() => {
-    if (space === undefined || fileManagerPlugin?.provides.file.upload === undefined) {
+    if (space === undefined || upload === undefined) {
       return undefined;
     }
 
     // TODO(burdon): Re-order props: space, file.
-    return async (file: File) => fileManagerPlugin?.provides?.file?.upload?.(file, space);
-  }, [space, fileManagerPlugin]);
+    return async (file: File) => upload!(file, space);
+  }, [space, upload]);
 
   return (
     <MarkdownEditor