@dxos/plugin-markdown 0.8.4-main.72ec0f3 → 0.8.4-main.7996785055

package/src/capabilities/artifact-definition/artifact-definition.ts

@@ -0,0 +1,110 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+// ISSUE(burdon): defineArtifact
+// @ts-nocheck
+
+import * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
+
+import { ToolResult, createTool } from '@dxos/ai';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { ArtifactId, createArtifactElement } from '@dxos/assistant';
+import { defineArtifact } from '@dxos/blueprints';
+import { Obj } from '@dxos/echo';
+import { assertArgument, invariant } from '@dxos/invariant';
+import { SpaceOperation } from '@dxos/plugin-space/operations';
+import { Filter } from '@dxos/react-client/echo';
+
+import { meta } from '../../meta';
+import { Markdown } from '../../types';
+
+export default Capability.makeModule(() =>
+  Effect.sync(() => {
+    const definition = defineArtifact({
+      id: `artifact:${meta.id}`, // TODO(burdon): meta.id/artifact?
+      name: meta.name,
+      instructions: `
+      The markdown plugin allows you to work with text documents in the current space.
+      Use these tools to interact with documents, including listing available documents and retrieving their content.
+      Documents are stored in Markdown format.
+    `,
+      schema: Markdown.Document,
+      tools: [
+        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?.invoke, 'No operation invoker');
+
+            const document = Markdown.make({ name, content });
+
+            const { error } = await extensions.invoke(SpaceOperation.AddObject, {
+              target: extensions.space,
+              object: document,
+            });
+            if (error) {
+              return ToolResult.Error(error?.message ?? 'Failed to add document to space');
+            }
+
+            return ToolResult.Success(createArtifactElement(document.id));
+          },
+        }),
+        createTool(meta.id, {
+          name: 'list',
+          description: 'List all markdown documents in the current space.',
+          caption: 'Listing markdown documents...',
+          schema: Schema.Struct({}),
+          execute: async (_input, { extensions }) => {
+            invariant(extensions?.space, 'No space');
+            const space = extensions.space;
+            const { objects: documents } = await space.db.query(Filter.type(Markdown.Document)).run();
+            const documentInfo = documents.map((doc) => {
+              invariant(Obj.instanceOf(Markdown.Document, doc));
+              return {
+                id: Obj.getDXN(doc).toString(),
+                name: doc.name || doc.fallbackName || 'Unnamed Document',
+                // TODO(ZaymonFC): Include updatedAt?
+              };
+            });
+
+            return ToolResult.Success(documentInfo);
+          },
+        }),
+        createTool(meta.id, {
+          name: 'inspect',
+          description: 'Read the content of a markdown document.',
+          caption: 'Inspecting markdown document...',
+          schema: Schema.Struct({
+            id: ArtifactId,
+          }),
+          execute: async ({ id }, { extensions }) => {
+            invariant(extensions?.space, 'No space');
+            const document = await extensions.space.db.query(Filter.id(ArtifactId.toDXN(id).toString())).first();
+            assertArgument(Obj.instanceOf(Markdown.Document, document), 'document', 'Invalid type');
+
+            const { content } = await document.content?.load();
+            return ToolResult.Success({
+              id: Obj.getDXN(document).toString(),
+              name: document.name || document.fallbackName || 'Unnamed Document',
+              content,
+            });
+          },
+        }),
+      ],
+    });
+
+    return Capability.contributes(Capabilities.ArtifactDefinition, definition);
+  }),
+);

package/src/capabilities/artifact-definition/index.ts

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

package/src/capabilities/blueprint-definition/blueprint-definition.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+
+import { MarkdownBlueprint } from '../../blueprints';
+
+const blueprintDefinition = Capability.makeModule<
+  [],
+  Capability.Capability<typeof AppCapabilities.BlueprintDefinition>[]
+>(() => Effect.succeed([Capability.contributes(AppCapabilities.BlueprintDefinition, MarkdownBlueprint)]));
+
+export default blueprintDefinition;

package/src/capabilities/blueprint-definition/index.ts

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

package/src/capabilities/index.ts

@@ -2,15 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
-import { lazy } from '@dxos/app-framework';
-
-export const AnchorSort: any = lazy(() => import('./anchor-sort'));
-export const AppGraphSerializer = lazy(() => import('./app-graph-serializer'));
-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 './anchor-sort';
+export * from './app-graph-serializer';
 export * from './blueprint-definition';
-export * from './capabilities';
+export * from './operation-handler';
+export * from './react-surface';
+export * from './settings';
+export * from './state';

package/src/capabilities/operation-handler/index.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+import { OperationHandlerSet } from '@dxos/operation';
+
+export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
+  'OperationHandler',
+  () => import('./operation-handler'),
+);

package/src/capabilities/operation-handler/operation-handler.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import type { OperationHandlerSet } from '@dxos/operation';
+
+import { MarkdownOperationHandlerSet } from '../../operations';
+
+export default Capability.makeModule<OperationHandlerSet.OperationHandlerSet>(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(Capabilities.OperationHandler, MarkdownOperationHandlerSet);
+  }),
+);

package/src/capabilities/react-surface/index.ts

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

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

@@ -0,0 +1,120 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import React, { forwardRef, useCallback, useMemo } from 'react';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import {
+  Surface,
+  useAtomCapability,
+  useAtomCapabilityState,
+  useCapability,
+  useSettingsState,
+} from '@dxos/app-framework/ui';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
+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 '../../containers';
+import { meta } from '../../meta';
+import { Markdown, MarkdownCapabilities } from '../../types';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: `${meta.id}.surface.document`,
+        role: ['article', 'section', 'tabpanel'],
+        filter: (data): data is { subject: Markdown.Document; attendableId: string; variant: undefined } =>
+          typeof data.attendableId === 'string' && Obj.instanceOf(Markdown.Document, data.subject) && !data.variant,
+        component: ({ data, role, ref }) => {
+          return (
+            <Container
+              id={Obj.getDXN(data.subject).toString()}
+              attendableId={data.attendableId}
+              subject={data.subject}
+              role={role}
+              ref={ref}
+            />
+          );
+        },
+      }),
+      Surface.create({
+        id: `${meta.id}.surface.text`,
+        role: ['article', 'section', 'tabpanel'],
+        // TODO(burdon): Why is attendableId required? See EventArticle.tsx
+        filter: (data): data is { attendableId: string; subject: Text.Text } =>
+          typeof data.attendableId === 'string' && Obj.instanceOf(Text.Text, data.subject),
+        component: ({ data, role, ref }) => {
+          return (
+            <Container
+              id={Obj.getDXN(data.subject).toString()}
+              attendableId={data.attendableId}
+              subject={data.subject}
+              role={role}
+              ref={ref}
+            />
+          );
+        },
+      }),
+      Surface.create({
+        id: `${meta.id}.surface.plugin-settings`,
+        role: 'article',
+        filter: (data): data is { subject: AppCapabilities.Settings } =>
+          AppCapabilities.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} />;
+        },
+      }),
+      Surface.create({
+        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, attendableId, 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}
+        attendableId={attendableId}
+        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,37 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+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(AppCapabilities.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,47 @@
+//
+// 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 { type EditorViewEntry, type EditorViewRegistry, MarkdownCapabilities, MarkdownStateSchema } from '../../types';
+
+const createEditorViewRegistry = (): EditorViewRegistry => {
+  const views = new Map<string, EditorViewEntry>();
+  return {
+    register: (attendableId, view, documentId) => {
+      views.set(attendableId, { view, documentId });
+    },
+    unregister: (attendableId) => {
+      views.delete(attendableId);
+    },
+    get: (attendableId) => views.get(attendableId),
+  };
+};
+
+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`);
+
+    const editorViews = createEditorViewRegistry();
+
+    return [
+      Capability.contributes(MarkdownCapabilities.State, stateAtom),
+      Capability.contributes(MarkdownCapabilities.EditorState, editorState),
+      Capability.contributes(MarkdownCapabilities.EditorViews, editorViews),
+    ];
+  }),
+);

package/src/cli/index.ts

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

package/src/cli/plugin.ts

@@ -0,0 +1,40 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/operation';
+import { type CreateObject } from '@dxos/plugin-space/types';
+import { SpaceOperation } from '@dxos/plugin-space/operations';
+import { Text } from '@dxos/schema';
+
+// NOTE: Must not import from index to avoid pulling in react dependencies.
+import { OperationHandler } from '../capabilities/operation-handler';
+import { meta } from '../meta';
+import { Markdown } from '../types';
+
+export const MarkdownPlugin = Plugin.define(meta).pipe(
+  AppPlugin.addMetadataModule({
+    metadata: {
+      id: Markdown.Document.typename,
+      metadata: {
+        createObject: ((props, options) =>
+          Effect.gen(function* () {
+            const object = Markdown.make(props);
+            return yield* Operation.invoke(SpaceOperation.AddObject, {
+              object,
+              target: options.target,
+              hidden: true,
+              targetNodeId: options.targetNodeId,
+            });
+          })) satisfies CreateObject,
+      },
+    },
+  }),
+  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
+  AppPlugin.addSchemaModule({ schema: [Markdown.Document, Text.Text] }),
+  Plugin.make,
+);

package/src/components/MarkdownEditor/FileUpload.tsx

@@ -7,8 +7,8 @@ import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
 import { createPortal } from 'react-dom';
 import { useDropzone } from 'react-dropzone';
 
-import { type FileInfo } from '@dxos/app-framework';
-import { addLink } from '@dxos/react-ui-editor';
+import { type FileInfo } from '@dxos/app-toolkit';
+import { addLink } from '@dxos/ui-editor';
 
 export const IMAGE_FILES = ['.jpg', '.jpeg', '.png', '.gif'];
 

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

@@ -3,72 +3,71 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Filter, Obj } from '@dxos/echo';
-import { AttentionPlugin } from '@dxos/plugin-attention';
 import { ClientPlugin } from '@dxos/plugin-client';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { corePlugins } from '@dxos/plugin-testing';
 import { useQuery, useSpace } from '@dxos/react-client/echo';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { useAttentionAttributes } from '@dxos/react-ui-attention';
+import { Panel } from '@dxos/react-ui';
+import { Loading, withLayout } from '@dxos/react-ui/testing';
+import { AttendableContainer } from '@dxos/react-ui-attention';
 import { translations as editorTranslations } from '@dxos/react-ui-editor';
-import { StackItem } from '@dxos/react-ui-stack';
+import { Text } from '@dxos/schema';
 
 import { translations } from '../../translations';
 import { Markdown } from '../../types';
 
 import { MarkdownEditor, type MarkdownEditorRootProps } from './MarkdownEditor';
 
-const content = Array.from({ length: 100 }, (_, i) => `Line ${i + 1}`).join('\n');
+type DefaultStoryProps = Omit<MarkdownEditorRootProps, 'id' | 'extensions'>;
 
-type StoryProps = Omit<MarkdownEditorRootProps, 'id' | 'extensions'>;
-
-const DefaultStory = (props: StoryProps) => {
+const DefaultStory = (props: DefaultStoryProps) => {
   const space = useSpace();
   const [doc] = useQuery(space?.db, Filter.type(Markdown.Document));
   const id = doc && Obj.getDXN(doc).toString();
-  const attentionAttrs = useAttentionAttributes(id);
-
   if (!id) {
-    return null;
+    return <Loading data={{ id }} />;
   }
 
   return (
-    <div className='contents' {...attentionAttrs}>
-      <StackItem.Content toolbar>
-        <MarkdownEditor.Root id={id} object={doc} {...props}>
-          <MarkdownEditor.Toolbar id={id} />
-          <MarkdownEditor.Content />
-        </MarkdownEditor.Root>
-      </StackItem.Content>
-    </div>
+    <AttendableContainer id={id} tabIndex={0} classNames='dx-container'>
+      <MarkdownEditor.Root id={id} object={doc} {...props}>
+        <Panel.Root>
+          <Panel.Toolbar asChild>
+            <MarkdownEditor.Toolbar />
+          </Panel.Toolbar>
+          <Panel.Content asChild>
+            <MarkdownEditor.Content />
+          </Panel.Content>
+        </Panel.Root>
+      </MarkdownEditor.Root>
+    </AttendableContainer>
   );
 };
 
 const meta: Meta<typeof DefaultStory> = {
-  title: 'plugins/plugin-markdown/MarkdownEditor',
-  component: DefaultStory,
-  render: DefaultStory as any,
+  title: 'plugins/plugin-markdown/components/MarkdownEditor',
+  render: DefaultStory,
   decorators: [
-    withTheme,
-    withLayout({ container: 'column' }),
-    // TODO(burdon): Create story without client.
+    withLayout({ layout: 'column' }),
     withPluginManager({
       plugins: [
+        ...corePlugins(),
+        // TODO(burdon): Try to write story without ClientPlugin.
         ClientPlugin({
-          types: [Markdown.Document],
-          onClientInitialized: async ({ client }) => {
-            await client.halo.createIdentity();
-            await client.spaces.waitUntilReady();
-            const space = client.spaces.default;
-            await space.waitUntilReady();
-            space.db.add(Markdown.make({ content }));
-          },
+          types: [Markdown.Document, Text.Text],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              const { personalSpace } = yield* initializeIdentity(client);
+              personalSpace.db.add(
+                Markdown.make({ content: Array.from({ length: 100 }, (_, i) => `Line ${i + 1}`).join('\n') }),
+              );
+            }),
         }),
-        IntentPlugin(),
-        AttentionPlugin(),
       ],
     }),
   ],