@dxos/plugin-markdown 0.8.4-main.2e9d522 → 0.8.4-main.5ea62a8

package/src/components/Suggestions.stories.tsx

@@ -5,23 +5,20 @@
 import '@dxos-theme';
 
 import { type Meta } from '@storybook/react-vite';
-import { Match, Option, pipe, Schema } from 'effect';
+import { Match, Option, Schema, pipe } from 'effect';
 import React, { type FC, useEffect, useMemo, useState } from 'react';
 
 import {
   Capabilities,
-  CollaborationActions,
   IntentPlugin,
   SettingsPlugin,
   contributes,
-  createIntent,
   useCapability,
   useIntentDispatcher,
 } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Obj, Ref, Type } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
-import { DXN } from '@dxos/keys';
 import { ClientPlugin } from '@dxos/plugin-client';
 import { PreviewPlugin } from '@dxos/plugin-preview';
 import { SpacePlugin } from '@dxos/plugin-space';
@@ -30,18 +27,19 @@ import { ThemePlugin } from '@dxos/plugin-theme';
 import { faker } from '@dxos/random';
 import { createDocAccessor, fullyQualifiedId, toCursorRange, useQueue, useSpace } from '@dxos/react-client/echo';
 import { IconButton, Toolbar } from '@dxos/react-ui';
-import { command, type EditorSelection, type Range, useTextEditor } from '@dxos/react-ui-editor';
+import { type EditorSelection, type Range, command, useTextEditor } from '@dxos/react-ui-editor';
 import { StackItem } from '@dxos/react-ui-stack';
 import { defaultTx } from '@dxos/react-ui-theme';
 import { DataType } from '@dxos/schema';
 import { withLayout } from '@dxos/storybook-utils';
 
-import MarkdownContainer from './MarkdownContainer';
-import { MarkdownPlugin } from '../MarkdownPlugin';
 import { MarkdownCapabilities } from '../capabilities';
-import { MARKDOWN_PLUGIN } from '../meta';
+import { MarkdownPlugin } from '../MarkdownPlugin';
+import { meta } from '../meta';
 import { translations } from '../translations';
-import { createDocument, DocumentType, type MarkdownSettingsProps } from '../types';
+import { Markdown } from '../types';
+
+import { MarkdownContainer } from './MarkdownContainer';
 
 faker.seed(1);
 
@@ -61,7 +59,7 @@ const TestItem = Schema.Struct({
   }),
 );
 
-const TestChat: FC<{ doc: DocumentType; content: string }> = ({ doc, content }) => {
+const TestChat: FC<{ doc: Markdown.Document; content: string }> = ({ doc, content }) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { parentRef } = useTextEditor({ initialValue: content });
   const { editorState } = useCapability(MarkdownCapabilities.State);
@@ -98,14 +96,14 @@ const TestChat: FC<{ doc: DocumentType; content: string }> = ({ doc, content })
     //   const message = deref(ref);
     // }
 
-    void dispatch(
-      createIntent(CollaborationActions.InsertContent, {
-        target: doc as any as Type.Expando,
-        object: Ref.fromDXN(new DXN(DXN.kind.QUEUE, [...queue.dxn.parts, message.id])),
-        at: cursor,
-        label: 'Proposal',
-      }),
-    );
+    // void dispatch(
+    //   createIntent(CollaborationActions.InsertContent, {
+    //     target: doc as any as Type.Expando,
+    //     object: Ref.fromDXN(new DXN(DXN.kind.QUEUE, [...queue.dxn.parts, message.id])),
+    //     at: cursor,
+    //     label: 'Proposal',
+    //   }),
+    // );
   };
 
   return (
@@ -120,8 +118,8 @@ const TestChat: FC<{ doc: DocumentType; content: string }> = ({ doc, content })
 
 const DefaultStory = ({ document, chat }: { document: string; chat: string }) => {
   const space = useSpace();
-  const [doc, setDoc] = useState<DocumentType>();
-  const settings = useCapability(Capabilities.SettingsStore).getStore<MarkdownSettingsProps>(MARKDOWN_PLUGIN)!.value;
+  const [doc, setDoc] = useState<Markdown.Document>();
+  const settings = useCapability(Capabilities.SettingsStore).getStore<Markdown.Settings>(meta.id)!.value;
   const { editorState } = useCapability(MarkdownCapabilities.State);
 
   useEffect(() => {
@@ -130,10 +128,8 @@ const DefaultStory = ({ document, chat }: { document: string; chat: string }) =>
     }
 
     const doc = space.db.add(
-      createDocument({
+      Markdown.makeDocument({
         name: 'Test',
-
-        // Create links.
         content: document.replaceAll(/\[(\w+)\]/g, (_, label) => {
           const obj = space.db.add(Obj.make(TestItem, { title: label, description: faker.lorem.paragraph() }));
           const dxn = Ref.make(obj).dxn.toString();
@@ -157,7 +153,8 @@ const DefaultStory = ({ document, chat }: { document: string; chat: string }) =>
   );
 };
 
-const meta: Meta<typeof DefaultStory> = {
+// TODO(burdon): Make consistent.
+const storybook: Meta<typeof DefaultStory> = {
   title: 'plugins/plugin-markdown/Suggestions',
   render: DefaultStory,
   decorators: [
@@ -166,8 +163,8 @@ const meta: Meta<typeof DefaultStory> = {
         ThemePlugin({ tx: defaultTx }),
         StorybookLayoutPlugin(),
         ClientPlugin({
-          types: [DocumentType, TestItem],
-          onClientInitialized: async (_, client) => {
+          types: [Markdown.Document, TestItem],
+          onClientInitialized: async ({ client }) => {
             await client.halo.createIdentity();
           },
         }),
@@ -187,7 +184,7 @@ const meta: Meta<typeof DefaultStory> = {
   },
 };
 
-export default meta;
+export default storybook;
 
 type Story = Meta<typeof DefaultStory>;
 

package/src/components/Toolbar.stories.tsx

@@ -4,18 +4,18 @@
 
 import '@dxos-theme';
 
-import { type Meta } from '@storybook/react-vite';
-import React, { type FC, useCallback, useState } from 'react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useCallback, useState } from 'react';
 
-import { Obj } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { PublicKey } from '@dxos/keys';
 import { faker } from '@dxos/random';
 import { createDocAccessor } from '@dxos/react-client/echo';
 import { useThemeContext } from '@dxos/react-ui';
 import {
-  EditorToolbar,
   type Comment,
+  EditorToolbar,
+  type EditorViewMode,
   comments,
   createBasicExtensions,
   createDataExtensions,
@@ -26,19 +26,22 @@ import {
   formattingKeymap,
   translations,
   useComments,
+  useEditorToolbarState,
   useFormattingState,
   useTextEditor,
-  useEditorToolbarState,
-  type EditorViewMode,
 } from '@dxos/react-ui-editor';
 import { DataType } from '@dxos/schema';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 faker.seed(101);
 
-const DefaultStory: FC<{ content?: string }> = ({ content = '' }) => {
+type StoryProps = {
+  content?: string;
+};
+
+const DefaultStory = ({ content = '' }: StoryProps) => {
   const { themeMode } = useThemeContext();
-  const [text] = useState(Obj.make(DataType.Text, { content }));
+  const [text] = useState(DataType.makeText(content));
   const toolbarState = useEditorToolbarState({ viewMode: 'preview' });
   const formattingObserver = useFormattingState(toolbarState);
   const { parentRef, view } = useTextEditor(() => {
@@ -94,19 +97,21 @@ const content = [
   '',
 ].join('\n');
 
-const meta: Meta<typeof EditorToolbar> = {
+const meta = {
   title: 'plugins/plugin-markdown/Toolbar',
-  component: EditorToolbar,
-  render: DefaultStory as any,
+  component: EditorToolbar as any,
+  render: DefaultStory,
   decorators: [withTheme, withLayout({ fullscreen: true })],
   parameters: {
     translations,
   },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-export const Default = {
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
   args: {
     content,
   },

package/src/components/index.ts

@@ -7,4 +7,4 @@ import { lazy } from 'react';
 export * from './MarkdownSettings';
 
 export const MarkdownContainer = lazy(() => import('./MarkdownContainer'));
-export const MarkdownPreview = lazy(() => import('./MarkdownPreview'));
+export const MarkdownCard = lazy(() => import('./MarkdownCard'));

package/src/events.ts

@@ -4,8 +4,8 @@
 
 import { Events } from '@dxos/app-framework';
 
-import { MARKDOWN_PLUGIN } from './meta';
+import { meta } from './meta';
 
 export namespace MarkdownEvents {
-  export const SetupExtensions = Events.createStateEvent(`${MARKDOWN_PLUGIN}/setup-extensions`);
+  export const SetupExtensions = Events.createStateEvent(`${meta.id}/event/setup-extensions`);
 }

package/src/extensions.tsx

@@ -7,27 +7,32 @@ import React, { type AnchorHTMLAttributes, type ReactNode, useMemo } from 'react
 import { createRoot } from 'react-dom/client';
 
 import {
-  createIntent,
   LayoutAction,
   type PromiseIntentDispatcher,
+  createIntent,
   useCapabilities,
   useIntentDispatcher,
 } from '@dxos/app-framework';
 import { debounceAndThrottle } from '@dxos/async';
 import { invariant } from '@dxos/invariant';
-import { createDocAccessor, fullyQualifiedId, getSpace, type QueryResult } from '@dxos/react-client/echo';
+import { type QueryResult, createDocAccessor, fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { Icon, ThemeProvider } from '@dxos/react-ui';
 import { type SelectionManager } from '@dxos/react-ui-attention';
 import {
   type AutocompleteResult,
+  Cursor,
   type EditorStateStore,
+  EditorView,
   type EditorViewMode,
   type Extension,
   InputModeExtensions,
-  createDataExtensions,
+  type PreviewOptions,
+  type RenderCallback,
   autocomplete,
+  createDataExtensions,
   decorateMarkdown,
+  documentId,
   folding,
   formattingKeymap,
   linkTooltip,
@@ -35,27 +40,22 @@ import {
   preview,
   selectionState,
   typewriter,
-  type RenderCallback,
-  EditorView,
-  documentId,
-  Cursor,
-  type PreviewOptions,
 } from '@dxos/react-ui-editor';
 import { defaultTx } from '@dxos/react-ui-theme';
 import { type DataType } from '@dxos/schema';
 import { isNotFalsy } from '@dxos/util';
 
 import { MarkdownCapabilities } from './capabilities';
-import { type DocumentType, type MarkdownSettingsProps } from './types';
+import { type Markdown } from './types';
 import { setFallbackName } from './util';
 
 type ExtensionsOptions = {
-  document?: DocumentType;
+  document?: Markdown.Document;
   id?: string;
   text?: DataType.Text;
   dispatch?: PromiseIntentDispatcher;
-  query?: QueryResult<DocumentType>;
-  settings: MarkdownSettingsProps;
+  query?: QueryResult<Markdown.Document>;
+  settings: Markdown.Settings;
   selectionManager?: SelectionManager;
   viewMode?: EditorViewMode;
   editorStateStore?: EditorStateStore;

package/src/functions/create.ts

@@ -0,0 +1,23 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Effect, Schema } from 'effect';
+
+import { DatabaseService, defineFunction } from '@dxos/functions';
+
+import { Markdown } from '../types';
+
+// TODO(wittjosiah): Reconcile with MarkdownAction.Create.
+export default defineFunction({
+  name: 'dxos.org/function/markdown/create',
+  description: 'Creates a new markdown document.',
+  inputSchema: Schema.Struct({
+    name: Schema.optional(Schema.String),
+    content: Schema.optional(Schema.String),
+  }),
+  outputSchema: Markdown.Document,
+  handler: Effect.fn(function* ({ data: { name, content } }) {
+    return yield* DatabaseService.add(Markdown.makeDocument({ name, content }));
+  }),
+});

package/src/functions/diff.ts

@@ -0,0 +1,35 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Effect, Schema } from 'effect';
+
+import { ArtifactId, applyDiffs } from '@dxos/assistant';
+import { createDocAccessor } from '@dxos/echo-db';
+import { DatabaseService, defineFunction } from '@dxos/functions';
+import { trim } from '@dxos/util';
+
+import { Markdown } from '../types';
+
+// TODO(wittjosiah): Reconcile with ThreadAction.AddProposal.
+export default defineFunction({
+  name: 'dxos.org/function/markdown/diff',
+  description: trim`
+    Applies a set of diffs to the markdown document.
+  `,
+  inputSchema: Schema.Struct({
+    id: ArtifactId.annotations({
+      description: 'The ID of the markdown document.',
+    }),
+    diffs: Schema.Array(Schema.String).annotations({
+      description: 'The diffs to apply to the document.',
+    }),
+  }),
+  outputSchema: Schema.Void,
+  handler: Effect.fn(function* ({ data: { id, diffs } }) {
+    const object = yield* DatabaseService.resolve(ArtifactId.toDXN(id), Markdown.Document);
+    const content = yield* Effect.promise(() => object.content.load());
+    const accessor = createDocAccessor(content, ['content']);
+    applyDiffs(accessor, diffs);
+  }),
+});

package/src/functions/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export { default as create } from './create';
+export { default as diff } from './diff';
+export { default as open } from './open';

package/src/functions/open.ts

@@ -0,0 +1,30 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Effect, Schema } from 'effect';
+
+import { ArtifactId } from '@dxos/assistant';
+import { DatabaseService, defineFunction } from '@dxos/functions';
+
+import { Markdown } from '../types';
+
+export default defineFunction({
+  name: 'dxos.org/function/markdown/open',
+  description: 'Opens and reads the contents of a new markdown document.',
+  inputSchema: Schema.Struct({
+    id: ArtifactId.annotations({
+      description: 'The ID of the markdown document.',
+    }),
+  }),
+  outputSchema: Schema.Struct({
+    content: Schema.String,
+  }),
+  handler: Effect.fn(function* ({ data: { id } }) {
+    const object = yield* DatabaseService.resolve(ArtifactId.toDXN(id), Markdown.Document);
+    const { content } = yield* Effect.promise(() => object.content.load());
+    return {
+      content,
+    };
+  }),
+});

package/src/hooks/useSelectCurrentThread.tsx

@@ -6,11 +6,11 @@ import { EditorView } from '@codemirror/view';
 import { Schema } from 'effect';
 import { useMemo } from 'react';
 
-import { createResolver, LayoutAction, useIntentResolver } from '@dxos/app-framework';
+import { LayoutAction, createResolver, useIntentResolver } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
 import { Cursor, setSelection } from '@dxos/react-ui-editor';
 
-import { MARKDOWN_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
 /**
  * Handle scrolling and selection of the current thread in a markdown editor.
@@ -52,5 +52,5 @@ export const useSelectCurrentThread = (editorView: EditorView | undefined, docum
     [documentId, editorView],
   );
 
-  useIntentResolver(MARKDOWN_PLUGIN, scrollIntoViewResolver);
+  useIntentResolver(meta.id, scrollIntoViewResolver);
 };

package/src/index.ts

@@ -4,6 +4,9 @@
 
 export { MarkdownCapabilities } from './capabilities';
 export { MarkdownEvents } from './events';
-export * from './MarkdownPlugin';
+
 export * from './meta';
+export * from './types';
 export * from './util';
+
+export * from './MarkdownPlugin';

package/src/meta.ts

@@ -3,18 +3,17 @@
 //
 
 import { type PluginMeta } from '@dxos/app-framework';
-
-export const MARKDOWN_PLUGIN = 'dxos.org/plugin/markdown';
+import { trim } from '@dxos/util';
 
 export const meta: PluginMeta = {
-  id: MARKDOWN_PLUGIN,
+  id: 'dxos.org/plugin/markdown',
   name: 'Markdown',
-  description: `
-    A Markdown editor that is collaborative and fully extensible. It provides rich text editing as well as read only and markdown view.
-    In addition to markdown capabilities, it also support threaded in-line comments which can be accessed from the right hand sidebar at any times inside the document.
-    Your AI agent will have access to all markdown docs in your Space which means you can use them to extend the memory of your personal agent and add long term context for automated workflows.
+  description: trim`
+    A collaborative and extensible Markdown editor.
+    In addition to markdown capabilities, the plugin supports collaborative in-line comments.
+    You can use documents to extend the memory of your personal agents and add context for automated workflows.
   `,
-  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-markdown',
   icon: 'ph--text-aa--regular',
+  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-markdown',
   screenshots: ['https://dxos.network/plugin-details-markdown-dark.png'],
 };

package/src/translations.ts

@@ -5,12 +5,12 @@
 import { type Resource } from '@dxos/react-ui';
 
 import { meta } from './meta';
-import { DocumentType } from './types';
+import { Markdown } from './types';
 
 export const translations = [
   {
     'en-US': {
-      [DocumentType.typename]: {
+      [Markdown.Document.typename]: {
         'typename label': 'Document',
         'typename label_zero': 'Documents',
         'typename label_one': 'Document',
@@ -21,6 +21,7 @@ export const translations = [
       },
       [meta.id]: {
         'plugin name': 'Editor',
+        'settings title': 'Editor settings',
         'choose markdown from space dialog title': 'Choose one or more documents to add',
         // TODO(burdon): Style-guide for user-facing text (e.g., hints, questions, capitalization, etc.)
         'empty choose markdown from space message': 'None available; try creating a new one instead?',

package/src/types/Markdown.ts

@@ -0,0 +1,56 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Schema } from 'effect';
+
+import { Obj, Ref, Type } from '@dxos/echo';
+import { LabelAnnotation } from '@dxos/echo-schema';
+import { EditorInputMode, EditorViewMode } from '@dxos/react-ui-editor/types';
+import { DataType, ItemAnnotation } from '@dxos/schema';
+
+/**
+ * Document Item type.
+ */
+export const Document = Schema.Struct({
+  name: Schema.optional(Schema.String),
+  fallbackName: Schema.optional(Schema.String),
+  content: Type.Ref(DataType.Text),
+}).pipe(
+  Type.Obj({
+    typename: 'dxos.org/type/Document',
+    version: '0.1.0',
+  }),
+  LabelAnnotation.set(['name', 'fallbackName']),
+  ItemAnnotation.set(true),
+);
+
+export type Document = Schema.Schema.Type<typeof Document>;
+
+/**
+ * Document factory.
+ */
+export const makeDocument = ({
+  content = '',
+  ...props
+}: Partial<{ name: string; fallbackName: string; content: string }> = {}) =>
+  Obj.make(Document, { ...props, content: Ref.make(DataType.makeText(content)) });
+
+/**
+ * Plugin settings.
+ */
+export const Settings = Schema.mutable(
+  Schema.Struct({
+    defaultViewMode: EditorViewMode,
+    editorInputMode: Schema.optional(EditorInputMode),
+    experimental: Schema.optional(Schema.Boolean),
+    debug: Schema.optional(Schema.Boolean),
+    toolbar: Schema.optional(Schema.Boolean),
+    typewriter: Schema.optional(Schema.String),
+    // TODO(burdon): Per document settings.
+    numberedHeadings: Schema.optional(Schema.Boolean),
+    folding: Schema.optional(Schema.Boolean),
+  }),
+);
+
+export interface Settings extends Schema.Schema.Type<typeof Settings> {}

package/src/types/MarkdownAction.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Schema } from 'effect';
+
+import { EditorViewMode } from '@dxos/react-ui-editor/types';
+
+import { meta } from '../meta';
+
+import { Document } from './Markdown';
+
+export class Create extends Schema.TaggedClass<Create>()(`${meta.id}/action/create`, {
+  input: Schema.Struct({
+    name: Schema.optional(Schema.String),
+    content: Schema.optional(Schema.String),
+  }),
+  output: Schema.Struct({
+    object: Document,
+  }),
+}) {}
+
+export class SetViewMode extends Schema.TaggedClass<SetViewMode>()(`${meta.id}/action/set-view-mode`, {
+  input: Schema.Struct({
+    id: Schema.String,
+    viewMode: EditorViewMode,
+  }),
+  output: Schema.Void,
+}) {}

package/src/types/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './schema';
+export * as MarkdownAction from './MarkdownAction';
+export * as Markdown from './Markdown';
 export * from './types';

package/src/types/types.ts

@@ -2,44 +2,16 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Schema } from 'effect';
-
-import { Type } from '@dxos/echo';
 import { type Extension } from '@dxos/react-ui-editor';
-import { EditorInputMode, EditorViewMode } from '@dxos/react-ui-editor/types';
-
-import { DocumentType } from './schema';
-import { MARKDOWN_PLUGIN } from '../meta';
-
-const MARKDOWN_ACTION = `${MARKDOWN_PLUGIN}/action`;
-
-export namespace MarkdownAction {
-  export class Create extends Schema.TaggedClass<Create>()(MARKDOWN_ACTION, {
-    input: Schema.Struct({
-      spaceId: Type.SpaceId,
-      name: Schema.optional(Schema.String),
-      content: Schema.optional(Schema.String),
-    }),
-    output: Schema.Struct({
-      object: DocumentType,
-    }),
-  }) {}
+import { type EditorViewMode } from '@dxos/react-ui-editor/types';
 
-  export class SetViewMode extends Schema.TaggedClass<SetViewMode>()(`${MARKDOWN_ACTION}/set-view-mode`, {
-    input: Schema.Struct({
-      id: Schema.String,
-      viewMode: EditorViewMode,
-    }),
-    output: Schema.Void,
-  }) {}
-}
+import { type Document } from './Markdown';
 
-export type MarkdownProperties = Record<string, any>;
+// TODO(burdon): Remove these from ./types since not part of plugin-markdown API?
+// TODO(wittjosiah): MarkdownExtensionProvider is a part of the MarkdownCapabilities api which should be in ./types.
 
-// TODO(burdon): Async.
-export type MarkdownExtensionProvider = (props: { document?: DocumentType }) => Extension | undefined;
-
-export type OnChange = (text: string) => void;
+// TODO(burdon): Async?
+export type MarkdownExtensionProvider = (props: { document?: Document }) => Extension | undefined;
 
 export type MarkdownPluginState = {
   // Codemirror extensions provided by other plugins.
@@ -49,19 +21,3 @@ export type MarkdownPluginState = {
   // View mode per document.
   viewMode: Record<string, EditorViewMode>;
 };
-
-export const MarkdownSettingsSchema = Schema.mutable(
-  Schema.Struct({
-    defaultViewMode: EditorViewMode,
-    editorInputMode: Schema.optional(EditorInputMode),
-    experimental: Schema.optional(Schema.Boolean),
-    debug: Schema.optional(Schema.Boolean),
-    toolbar: Schema.optional(Schema.Boolean),
-    typewriter: Schema.optional(Schema.String),
-    // TODO(burdon): Per document settings.
-    numberedHeadings: Schema.optional(Schema.Boolean),
-    folding: Schema.optional(Schema.Boolean),
-  }),
-);
-
-export type MarkdownSettingsProps = Schema.Schema.Type<typeof MarkdownSettingsSchema>;