@dxos/plugin-markdown 0.8.2-staging.7ac8446 → 0.8.2

package/src/capabilities/artifact-definition.ts

@@ -2,14 +2,19 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, type PromiseIntentDispatcher } from '@dxos/app-framework';
-import { ArtifactId, defineArtifact, defineTool, ToolResult } from '@dxos/artifact';
-import { isInstanceOf, S } from '@dxos/echo-schema';
+import { pipe, Schema } from 'effect';
+
+import { createTool, ToolResult } from '@dxos/ai';
+import { Capabilities, chain, contributes, createIntent, type PromiseIntentDispatcher } from '@dxos/app-framework';
+import { ArtifactId, defineArtifact } from '@dxos/artifact';
+import { createArtifactElement } from '@dxos/assistant';
+import { isInstanceOf } from '@dxos/echo-schema';
 import { invariant, assertArgument } from '@dxos/invariant';
+import { SpaceAction } from '@dxos/plugin-space/types';
 import { Filter, fullyQualifiedId, type Space } from '@dxos/react-client/echo';
 
 import { meta } from '../meta';
-import { DocumentType } from '../types';
+import { DocumentType, MarkdownAction } from '../types';
 
 // TODO(burdon): Factor out.
 declare global {
@@ -30,15 +35,48 @@ export default () => {
     `,
     schema: DocumentType,
     tools: [
-      defineTool(meta.id, {
+      createTool(meta.id, {
+        name: 'create',
+        description: 'Create a new markdown document',
+        caption: 'Creating document...',
+        schema: Schema.Struct({
+          name: Schema.optional(Schema.String).annotations({
+            description: 'Optional name for the document.',
+          }),
+          content: Schema.String.annotations({
+            description: 'The content of the document.',
+          }),
+        }),
+        execute: async ({ name, content }, { extensions }) => {
+          invariant(extensions?.space, 'No space');
+          invariant(extensions?.dispatch, 'No intent dispatcher');
+
+          const intent = pipe(
+            createIntent(MarkdownAction.Create, {
+              spaceId: extensions.space.id,
+              name,
+              content,
+            }),
+            chain(SpaceAction.AddObject, { target: extensions.space }),
+          );
+
+          const { data, error } = await extensions.dispatch(intent);
+          if (!data || error) {
+            return ToolResult.Error(error?.message ?? 'Failed to create document');
+          }
+
+          return ToolResult.Success(createArtifactElement(data.id));
+        },
+      }),
+      createTool(meta.id, {
         name: 'list',
         description: 'List all markdown documents in the current space.',
         caption: 'Listing markdown documents...',
-        schema: S.Struct({}),
+        schema: Schema.Struct({}),
         execute: async (_input, { extensions }) => {
           invariant(extensions?.space, 'No space');
           const space = extensions.space;
-          const { objects: documents } = await space.db.query(Filter.schema(DocumentType)).run();
+          const { objects: documents } = await space.db.query(Filter.type(DocumentType)).run();
           const documentInfo = documents.map((doc) => {
             invariant(isInstanceOf(DocumentType, doc));
             return {
@@ -51,16 +89,16 @@ export default () => {
           return ToolResult.Success(documentInfo);
         },
       }),
-      defineTool(meta.id, {
+      createTool(meta.id, {
         name: 'inspect',
         description: 'Read the content of a markdown document.',
         caption: 'Inspecting markdown document...',
-        schema: S.Struct({
+        schema: Schema.Struct({
           id: ArtifactId,
         }),
         execute: async ({ id }, { extensions }) => {
           invariant(extensions?.space, 'No space');
-          const document = await extensions.space.db.query({ id: ArtifactId.toDXN(id).toString() }).first();
+          const document = await extensions.space.db.query(Filter.ids(ArtifactId.toDXN(id).toString())).first();
           assertArgument(isInstanceOf(DocumentType, document), 'Invalid type');
 
           const { content } = await document.content?.load();

package/src/capabilities/index.ts

@@ -4,12 +4,12 @@
 
 import { lazy } from '@dxos/app-framework';
 
+export const AnchorSort = lazy(() => import('./anchor-sort'));
 export const AppGraphSerializer = lazy(() => import('./app-graph-serializer'));
 export const ArtifactDefinition = lazy(() => import('./artifact-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 const Thread = lazy(() => import('./thread'));
 
 export * from './capabilities';

package/src/capabilities/intent-resolver.ts

@@ -2,25 +2,32 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, createResolver, type PluginsContext } from '@dxos/app-framework';
-import { ObjectId } from '@dxos/echo-schema';
-import { DXN, QueueSubspaceTags } from '@dxos/keys';
-import { makeRef, create, refFromDXN } from '@dxos/live-object';
-import { TextType } from '@dxos/schema';
+import { next as A } from '@automerge/automerge';
+import { Option, pipe, type Schema } from 'effect';
+
+import {
+  Capabilities,
+  CollaborationActions,
+  contributes,
+  createResolver,
+  type PluginContext,
+} from '@dxos/app-framework';
+import { isInstanceOf } from '@dxos/echo-schema';
+import { live } from '@dxos/live-object';
+import { createDocAccessor, getRangeFromCursor, Ref } from '@dxos/react-client/echo';
+import { DataType } from '@dxos/schema';
 
 import { MarkdownCapabilities } from './capabilities';
 import { DocumentType, MarkdownAction } from '../types';
 
-export default (context: PluginsContext) =>
+export default (context: PluginContext) =>
   contributes(Capabilities.IntentResolver, [
     createResolver({
       intent: MarkdownAction.Create,
-      resolve: ({ name, spaceId, content }) => {
-        const doc = create(DocumentType, {
+      resolve: ({ name, content }) => {
+        const doc = live(DocumentType, {
           name,
-          content: makeRef(create(TextType, { content: content ?? '' })),
-          assistantChatQueue: refFromDXN(new DXN(DXN.kind.QUEUE, [QueueSubspaceTags.DATA, spaceId, ObjectId.random()])),
-          threads: [],
+          content: Ref.make(live(DataType.Text, { content: content ?? '' })),
         });
 
         return { data: { object: doc } };
@@ -29,8 +36,29 @@ export default (context: PluginsContext) =>
     createResolver({
       intent: MarkdownAction.SetViewMode,
       resolve: ({ id, viewMode }) => {
-        const { state } = context.requestCapability(MarkdownCapabilities.State);
+        const { state } = context.getCapability(MarkdownCapabilities.State);
         state.viewMode[id] = viewMode;
       },
     }),
+    createResolver({
+      intent: CollaborationActions.InsertContent,
+      filter: (
+        data,
+      ): data is Omit<Schema.Schema.Type<typeof CollaborationActions.InsertContent.fields.input>, 'target'> & {
+        target: DocumentType;
+      } => isInstanceOf(DocumentType, data.target),
+      resolve: async ({ target, object: objectRef, at, label }) => {
+        const text = await target.content.load();
+        const accessor = createDocAccessor(text, ['content']);
+        const { start, end } = pipe(
+          Option.fromNullable(at),
+          Option.flatMap((at) => Option.fromNullable(getRangeFromCursor(accessor, at))),
+          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);
+        });
+      },
+    }),
   ]);

package/src/capabilities/react-surface.tsx

@@ -7,11 +7,12 @@ import React from 'react';
 import { createSurface, contributes, Capabilities, useCapability } from '@dxos/app-framework';
 import { isInstanceOf } from '@dxos/echo-schema';
 import { SettingsStore } from '@dxos/local-storage';
+import { AttentionCapabilities } from '@dxos/plugin-attention';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { TextType } from '@dxos/schema';
+import { DataType } from '@dxos/schema';
 
 import { MarkdownCapabilities } from './capabilities';
-import { MarkdownContainer, MarkdownSettings } from '../components';
+import { MarkdownContainer, MarkdownSettings, MarkdownPreview } from '../components';
 import { MARKDOWN_PLUGIN } from '../meta';
 import { DocumentType, isEditorModel, type MarkdownSettingsProps } from '../types';
 
@@ -23,9 +24,11 @@ export default () =>
       filter: (data): data is { subject: DocumentType; variant: undefined } =>
         isInstanceOf(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
@@ -33,8 +36,9 @@ export default () =>
             object={data.subject}
             role={role}
             settings={settings}
+            selectionManager={selectionManager}
             extensionProviders={state.extensionProviders}
-            viewMode={getViewMode(fullyQualifiedId(data.subject))}
+            viewMode={viewMode}
             editorStateStore={editorState}
             onViewModeChange={setViewMode}
           />
@@ -44,9 +48,10 @@ export default () =>
     createSurface({
       id: `${MARKDOWN_PLUGIN}/text`,
       role: ['article', 'section', 'tabpanel'],
-      filter: (data): data is { id: string; subject: TextType } =>
-        typeof data.id === 'string' && isInstanceOf(TextType, data.subject),
+      filter: (data): data is { id: string; subject: DataType.Text } =>
+        typeof data.id === 'string' && isInstanceOf(DataType.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);
@@ -57,6 +62,7 @@ export default () =>
             object={data.subject}
             role={role}
             settings={settings}
+            selectionManager={selectionManager}
             extensionProviders={state.extensionProviders}
             viewMode={getViewMode(data.id)}
             editorStateStore={editorState}
@@ -70,6 +76,7 @@ export default () =>
       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);
@@ -80,6 +87,7 @@ export default () =>
             object={data.subject}
             role={role}
             settings={settings}
+            selectionManager={selectionManager}
             extensionProviders={state.extensionProviders}
             viewMode={getViewMode(data.subject.id)}
             editorStateStore={editorState}
@@ -95,4 +103,11 @@ export default () =>
         data.subject instanceof SettingsStore && data.subject.prefix === MARKDOWN_PLUGIN,
       component: ({ data: { subject } }) => <MarkdownSettings settings={subject.value} />,
     }),
+    createSurface({
+      id: `${MARKDOWN_PLUGIN}/preview`,
+      role: 'popover',
+      filter: (data): data is { subject: DocumentType | DataType.Text } =>
+        isInstanceOf(DocumentType, data.subject) || isInstanceOf(DataType.Text, data.subject),
+      component: ({ data, role }) => <MarkdownPreview {...data} role={role} />,
+    }),
   ]);

package/src/capabilities/settings.ts

@@ -3,13 +3,13 @@
 //
 
 import { Capabilities, contributes } from '@dxos/app-framework';
-import { create } from '@dxos/live-object';
+import { live } from '@dxos/live-object';
 
 import { MARKDOWN_PLUGIN } from '../meta';
 import { type MarkdownSettingsProps, MarkdownSettingsSchema } from '../types';
 
 export default () => {
-  const settings = create<MarkdownSettingsProps>({
+  const settings = live<MarkdownSettingsProps>({
     defaultViewMode: 'preview',
     toolbar: true,
     numberedHeadings: true,

package/src/capabilities/state.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
+import { Capabilities, contributes, type PluginContext } from '@dxos/app-framework';
 import { LocalStorageStore } from '@dxos/local-storage';
 import { type EditorViewMode, createEditorStateStore } from '@dxos/react-ui-editor';
 
@@ -10,9 +10,8 @@ import { MarkdownCapabilities } from './capabilities';
 import { MARKDOWN_PLUGIN } from '../meta';
 import { type MarkdownPluginState, type MarkdownSettingsProps } from '../types';
 
-export default (context: PluginsContext) => {
+export default (context: PluginContext) => {
   const state = new LocalStorageStore<MarkdownPluginState>(MARKDOWN_PLUGIN, { extensionProviders: [], viewMode: {} });
-
   state.prop({ key: 'viewMode', type: LocalStorageStore.json<{ [key: string]: EditorViewMode }>() });
 
   // TODO(wittjosiah): Fold into state.
@@ -20,12 +19,13 @@ export default (context: PluginsContext) => {
 
   const getViewMode = (id: string) => {
     const defaultViewMode = context
-      .requestCapability(Capabilities.SettingsStore)
+      .getCapability(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 object with methods.
   return contributes(MarkdownCapabilities.State, { state: state.values, editorState, getViewMode, setViewMode });
 };

package/src/components/MarkdownContainer.tsx

@@ -2,12 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Rx } from '@effect-rx/rx-react';
 import React, { useEffect, useMemo } from 'react';
 
-import { Capabilities, useCapabilities } from '@dxos/app-framework';
+import { Capabilities, useAppGraph, useCapabilities } from '@dxos/app-framework';
 import { isInstanceOf } from '@dxos/echo-schema';
 import { fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
-import { TextType } from '@dxos/schema';
+import { type SelectionManager } from '@dxos/react-ui-attention';
+import { DataType } from '@dxos/schema';
 
 import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
 import { useExtensions } from '../extensions';
@@ -19,25 +21,26 @@ export type MarkdownContainerProps = Pick<
   'role' | 'extensionProviders' | 'viewMode' | 'editorStateStore' | 'onViewModeChange'
 > & {
   id: string;
-  object: DocumentType | TextType | any;
+  object: DocumentType | DataType.Text | any;
   settings: MarkdownSettingsProps;
+  selectionManager?: SelectionManager;
 };
 
-// TODO(burdon): Move toolbar here.
 // TODO(burdon): Factor out difference for ECHO and non-ECHO objects; i.e., single component.
 const MarkdownContainer = ({
   id,
   role,
   object,
   settings,
+  selectionManager,
   viewMode,
   editorStateStore,
   onViewModeChange,
 }: MarkdownContainerProps) => {
   const scrollPastEnd = role === 'article';
   const doc = isInstanceOf(DocumentType, object) ? object : undefined;
-  const text = isInstanceOf(TextType, object) ? object : undefined;
-  const extensions = useExtensions({ document: doc, text, id, settings, viewMode, editorStateStore });
+  const text = isInstanceOf(DataType.Text, object) ? object : undefined;
+  const extensions = useExtensions({ document: doc, text, id, settings, selectionManager, viewMode, editorStateStore });
 
   if (doc) {
     return (
@@ -61,13 +64,13 @@ const MarkdownContainer = ({
         extensions={extensions}
         viewMode={viewMode}
         toolbar={settings.toolbar}
-        comment={false}
         inputMode={settings.editorInputMode}
         scrollPastEnd={scrollPastEnd}
         onViewModeChange={onViewModeChange}
       />
     );
   } else {
+    // TODO(burdon): Normalize with above.
     return (
       <MarkdownEditor
         id={id}
@@ -115,12 +118,22 @@ export const DocumentEditor = ({ id, document: doc, settings, viewMode, ...props
     return async (file: File) => upload!(file, space);
   }, [space, upload]);
 
+  const { graph } = useAppGraph();
+  const customActions = useMemo(() => {
+    return Rx.make((get) => {
+      const actions = get(graph.actions(id));
+      const nodes = actions.filter((action) => action.properties.disposition === 'toolbar');
+      return { nodes, edges: nodes.map((node) => ({ source: 'root', target: node.id })) };
+    });
+  }, [graph]);
+
   return (
     <MarkdownEditor
       id={id}
       initialValue={doc.content?.target?.content}
       viewMode={viewMode}
       toolbar={settings.toolbar}
+      customActions={customActions}
       inputMode={settings.editorInputMode}
       onFileUpload={handleFileUpload}
       {...props}

package/src/components/{MarkdownEditor.stories.tsx → MarkdownEditor/MarkdownEditor.stories.tsx}

@@ -10,19 +10,14 @@ import React, { useMemo } from 'react';
 import { IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { createDocAccessor, createObject } from '@dxos/react-client/echo';
-import { Main } from '@dxos/react-ui';
-import { AttendableContainer } from '@dxos/react-ui-attention';
 import { withAttention } from '@dxos/react-ui-attention/testing';
-import { editorWithToolbarLayout, automerge, translations as editorTranslations } from '@dxos/react-ui-editor';
-import { topbarBlockPaddingStart } from '@dxos/react-ui-theme';
+import { automerge, translations as editorTranslations } from '@dxos/react-ui-editor';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
-import translations from '../translations';
+import translations from '../../translations';
 
-const content = Array.from({ length: 100 })
-  .map((_, i) => `Line ${i + 1}`)
-  .join('\n');
+const content = Array.from({ length: 100 }, (_, i) => `Line ${i + 1}`).join('\n');
 
 type StoryProps = MarkdownEditorProps & {
   content?: string;
@@ -32,43 +27,35 @@ type StoryProps = MarkdownEditorProps & {
 const DefaultStory = ({ content = '# Test', toolbar }: StoryProps) => {
   const doc = useMemo(() => createObject({ content }), [content]);
   const extensions = useMemo(() => [automerge(createDocAccessor(doc, ['content']))], [doc]);
-  return (
-    <Main.Content
-      bounce
-      data-toolbar={toolbar ? 'enabled' : 'disabled'}
-      classNames={[topbarBlockPaddingStart, editorWithToolbarLayout]}
-    >
-      <AttendableContainer id='test'>
-        <MarkdownEditor id='test' initialValue={doc.content} extensions={extensions} toolbar={toolbar} />
-      </AttendableContainer>
-    </Main.Content>
-  );
-};
-
-export const Default = {
-  args: {
-    content,
-  },
-};
-
-export const WithToolbar = {
-  args: {
-    content,
-    toolbar: true,
-  },
+  return <MarkdownEditor id='test' initialValue={doc.content} extensions={extensions} toolbar={toolbar} />;
 };
 
 const meta: Meta<typeof MarkdownEditor> = {
-  title: 'plugins/plugin-markdown/EditorMain',
+  title: 'plugins/plugin-markdown/MarkdownEditor',
   component: MarkdownEditor,
   render: DefaultStory,
   decorators: [
     withTheme,
-    withLayout({ tooltips: true }),
+    withLayout({ fullscreen: true }),
     withAttention,
     withPluginManager({ plugins: [IntentPlugin()] }),
   ],
-  parameters: { layout: 'fullscreen', translations: [...translations, ...editorTranslations] },
+  parameters: {
+    translations: [...translations, ...editorTranslations],
+  },
 };
 
 export default meta;
+
+export const Default = {
+  args: {
+    content,
+  },
+};
+
+export const WithToolbar = {
+  args: {
+    toolbar: true,
+    content,
+  },
+};