@dxos/plugin-markdown 0.8.4-main.e098934 → 0.8.4-main.e8ec1fe

package/src/functions/update.test.ts

@@ -0,0 +1,151 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { describe, expect, it } from '@effect/vitest';
+import * as Effect from 'effect/Effect';
+import * as Layer from 'effect/Layer';
+
+import { AiService, ConsolePrinter, MemoizedAiService } from '@dxos/ai';
+import { TestAiService } from '@dxos/ai/testing';
+import {
+  AiConversation,
+  type ContextBinding,
+  GenerationObserver,
+  makeToolExecutionServiceFromFunctions,
+  makeToolResolverFromFunctions,
+} from '@dxos/assistant';
+import { Blueprint } from '@dxos/blueprints';
+import { PropertiesType } from '@dxos/client-protocol';
+import { Obj, Query, Ref } from '@dxos/echo';
+import { TestHelpers, acquireReleaseResource } from '@dxos/effect';
+import {
+  CredentialsService,
+  DatabaseService,
+  FunctionInvocationService,
+  QueueService,
+  TracingService,
+} from '@dxos/functions';
+import { FunctionInvocationServiceLayerTest, TestDatabaseLayer } from '@dxos/functions-runtime/testing';
+import { invariant } from '@dxos/invariant';
+import { ObjectId } from '@dxos/keys';
+import { Markdown } from '@dxos/plugin-markdown/types';
+import { Collection } from '@dxos/schema';
+import { HasSubject, type Message } from '@dxos/types';
+
+import { WithProperties, testToolkit } from '../testing';
+import { MarkdownBlueprint, MarkdownFunction } from '../toolkit';
+
+ObjectId.dangerouslyDisableRandomness();
+
+const TestLayer = Layer.mergeAll(
+  AiService.model('@anthropic/claude-opus-4-0'),
+  makeToolResolverFromFunctions([MarkdownFunction.create, MarkdownFunction.open, MarkdownFunction.update], testToolkit),
+  makeToolExecutionServiceFromFunctions(testToolkit, testToolkit.toLayer({}) as any),
+).pipe(
+  Layer.provideMerge(
+    FunctionInvocationServiceLayerTest({
+      functions: [MarkdownFunction.create, MarkdownFunction.open, MarkdownFunction.update],
+    }),
+  ),
+  Layer.provideMerge(
+    Layer.mergeAll(
+      TestAiService(),
+      TestDatabaseLayer({
+        spaceKey: 'fixed',
+        indexing: { vector: true },
+        types: [PropertiesType, Collection.Collection, Blueprint.Blueprint, Markdown.Document, HasSubject.HasSubject],
+      }),
+      CredentialsService.configuredLayer([]),
+      TracingService.layerNoop,
+    ),
+  ),
+);
+
+describe('update', () => {
+  it.effect(
+    'call a function to update a markdown document',
+    Effect.fnUntraced(
+      function* (_) {
+        const doc = Markdown.make({
+          name: 'BlueYard',
+          content: 'Founders and portfolio of BlueYard.',
+        });
+        yield* DatabaseService.add(doc);
+
+        yield* FunctionInvocationService.invokeFunction(MarkdownFunction.update, {
+          id: doc.id,
+          diffs: ['- Founders', '+ # Founders'],
+        });
+
+        const updatedDoc = yield* DatabaseService.resolve(Obj.getDXN(doc), Markdown.Document);
+        expect(updatedDoc.name).toBe(doc.name);
+        const text = yield* DatabaseService.load(updatedDoc.content);
+        expect(text.content).toBe('# Founders and portfolio of BlueYard.');
+      },
+      WithProperties,
+      Effect.provide(TestLayer),
+      TestHelpers.provideTestContext,
+    ),
+  );
+
+  it.scoped(
+    'create and update a markdown document',
+    Effect.fnUntraced(
+      function* (_) {
+        const queue = yield* QueueService.createQueue<Message.Message | ContextBinding>();
+        const conversation = yield* acquireReleaseResource(() => new AiConversation(queue));
+
+        yield* DatabaseService.flush({ indexes: true });
+        const markdownBlueprint = yield* DatabaseService.add(Obj.clone(MarkdownBlueprint));
+        yield* Effect.promise(() =>
+          conversation.context.bind({
+            blueprints: [Ref.make(markdownBlueprint)],
+          }),
+        );
+
+        const observer = GenerationObserver.fromPrinter(new ConsolePrinter());
+
+        yield* conversation.createRequest({
+          observer,
+          prompt: `Create a document with a cookie recipe.`,
+        });
+        {
+          const { objects: docs } = yield* DatabaseService.runQuery(Query.type(Markdown.Document));
+          if (docs.length !== 1) {
+            throw new Error(`Expected 1 document; got ${docs.length}: ${docs.map((_) => _.name)}`);
+          }
+
+          const doc = docs[0];
+          invariant(Obj.instanceOf(Markdown.Document, doc));
+          console.log({
+            name: doc.name,
+            content: yield* DatabaseService.load(doc.content).pipe(Effect.map((_) => _.content)),
+          });
+        }
+
+        yield* conversation.createRequest({
+          observer,
+          prompt: 'Add a section with a holiday-themed variation.',
+        });
+        {
+          const { objects: docs } = yield* DatabaseService.runQuery(Query.type(Markdown.Document));
+          if (docs.length !== 1) {
+            throw new Error(`Expected 1 document; got ${docs.length}: ${docs.map((_) => _.name)}`);
+          }
+
+          const doc = docs[0];
+          invariant(Obj.instanceOf(Markdown.Document, doc));
+          console.log({
+            name: doc.name,
+            content: yield* DatabaseService.load(doc.content).pipe(Effect.map((_) => _.content)),
+          });
+        }
+      },
+      WithProperties,
+      Effect.provide(TestLayer),
+      TestHelpers.provideTestContext,
+    ),
+    MemoizedAiService.isGenerationEnabled() ? 240_000 : 30_000,
+  );
+});

package/src/functions/{diff.ts → update.ts}

@@ -2,7 +2,8 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Effect, Schema } from 'effect';
+import * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
 
 import { ArtifactId, applyDiffs } from '@dxos/assistant';
 import { createDocAccessor } from '@dxos/echo-db';
@@ -13,7 +14,8 @@ import { Markdown } from '../types';
 
 // TODO(wittjosiah): Reconcile with ThreadAction.AddProposal.
 export default defineFunction({
-  name: 'dxos.org/function/markdown/diff',
+  key: 'dxos.org/function/markdown/update',
+  name: 'Update',
   description: trim`
     Applies a set of diffs to the markdown document.
   `,

package/src/hooks/index.ts

@@ -2,4 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './useEditorMenuOptions';
+export * from './useExtensions';
+export * from './useLinkQuery';
 export * from './useSelectCurrentThread';

package/src/hooks/useEditorMenuOptions.ts

@@ -0,0 +1,71 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import { useCallback, useMemo, useRef } from 'react';
+
+import { Domino, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import {
+  type EditorMenuGroup,
+  type UseEditorMenuProps,
+  filterMenuGroups,
+  formattingCommands,
+  linkSlashCommands,
+} from '@dxos/react-ui-editor';
+
+import { meta } from '../meta';
+
+export type UseEditorMenuOptionsProps = {
+  editorView?: EditorView;
+  slashCommandGroups?: EditorMenuGroup[];
+  onLinkQuery?: (query?: string) => Promise<EditorMenuGroup[]>;
+};
+
+export const useEditorMenuOptions = ({
+  editorView,
+  slashCommandGroups,
+  onLinkQuery,
+}: UseEditorMenuOptionsProps): UseEditorMenuProps => {
+  const { t } = useTranslation(meta.id);
+
+  const getMenu = useCallback<NonNullable<UseEditorMenuProps['getMenu']>>(
+    ({ text, trigger }) => {
+      switch (trigger) {
+        case '@': {
+          return onLinkQuery?.(text) ?? [];
+        }
+
+        case '/':
+        default: {
+          return filterMenuGroups([formattingCommands, linkSlashCommands, ...(slashCommandGroups ?? [])], (item) =>
+            text ? toLocalizedString(item.label, t).toLowerCase().includes(text.toLowerCase()) : true,
+          );
+        }
+      }
+    },
+    [slashCommandGroups, onLinkQuery],
+  );
+
+  const viewRef = useRef(editorView);
+  return useMemo<UseEditorMenuProps>(() => {
+    const trigger = onLinkQuery ? ['/', '@'] : ['/'];
+    const placeholder = {
+      delay: 3_000,
+      content: () =>
+        Domino.of('div')
+          .children(
+            Domino.of('span').text('Press'),
+            ...trigger.map((text) =>
+              Domino.of('span')
+                .classNames('mx-1 pli-1.5 pt-[1px] pb-[2px] border border-separator rounded-sm')
+                .text(text),
+            ),
+            Domino.of('span').text('for commands.'),
+          )
+          .build(),
+    };
+
+    return { viewRef, getMenu, trigger, placeholder };
+  }, [getMenu, onLinkQuery]);
+};

package/src/{extensions.tsx → hooks/useExtensions.tsx}

@@ -6,16 +6,13 @@ import { type ViewUpdate } from '@codemirror/view';
 import React, { type AnchorHTMLAttributes, type ReactNode, useMemo } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import {
-  LayoutAction,
-  type PromiseIntentDispatcher,
-  createIntent,
-  useCapabilities,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
+import { LayoutAction, type PromiseIntentDispatcher, createIntent } from '@dxos/app-framework';
+import { useIntentDispatcher } from '@dxos/app-framework/react';
 import { debounceAndThrottle } from '@dxos/async';
+import { Obj } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
-import { createDocAccessor, fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
+import { createDocAccessor } from '@dxos/react-client/echo';
+import { 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';
@@ -36,23 +33,24 @@ import {
   linkTooltip,
   listener,
   preview,
+  replacer,
   selectionState,
   typewriter,
 } from '@dxos/react-ui-editor';
 import { defaultTx } from '@dxos/react-ui-theme';
-import { type DataType } from '@dxos/schema';
-import { isNotFalsy } from '@dxos/util';
+import { Text } from '@dxos/schema';
+import { isTruthy } from '@dxos/util';
+
+import { Markdown } from '../types';
+import { setFallbackName } from '../util';
 
-import { MarkdownCapabilities } from './capabilities';
-import { type Markdown } from './types';
-import { setFallbackName } from './util';
+export type DocumentType = Markdown.Document | Text.Text | { id: string; text: string };
 
-type ExtensionsOptions = {
-  document?: Markdown.Document;
-  id?: string;
-  text?: DataType.Text;
+export type ExtensionsOptions = {
+  id: string;
+  object?: DocumentType;
   dispatch?: PromiseIntentDispatcher;
-  settings: Markdown.Settings;
+  settings?: Markdown.Settings;
   selectionManager?: SelectionManager;
   viewMode?: EditorViewMode;
   editorStateStore?: EditorStateStore;
@@ -61,9 +59,8 @@ type ExtensionsOptions = {
 
 // TODO(burdon): Merge with createBaseExtensions below.
 export const useExtensions = ({
-  document,
   id,
-  text,
+  object,
   settings,
   selectionManager,
   viewMode,
@@ -72,93 +69,72 @@ export const useExtensions = ({
 }: ExtensionsOptions): Extension[] => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const identity = useIdentity();
-  const space = getSpace(document) ?? getSpace(text);
+  const space = getSpace(object);
+
+  let target: Obj.Any | undefined;
+  if (Obj.instanceOf(Markdown.Document, object)) {
+    target = (object as Markdown.Document).content.target;
+  } else if (Obj.instanceOf(Text.Text, object)) {
+    target = object;
+  }
 
   // TODO(wittjosiah): Autocomplete is not working and this query is causing performance issues.
   // TODO(burdon): Unsubscribe.
   // const query = space?.db.query(Filter.type(DocumentType));
   // query?.subscribe();
+
   const baseExtensions = useMemo(
     () =>
       createBaseExtensions({
-        document,
         id,
-        text,
+        object,
         settings,
         selectionManager,
         viewMode,
         previewOptions,
         dispatch,
-        // query,
       }),
     [
-      document,
       id,
-      text,
+      object,
       viewMode,
       dispatch,
       previewOptions,
       settings,
-      settings.editorInputMode,
-      settings.folding,
-      settings.numberedHeadings,
-      settings.debug,
-      settings.typewriter,
+      settings?.debug,
+      settings?.editorInputMode,
+      settings?.folding,
+      settings?.numberedHeadings,
+      settings?.typewriter,
       selectionManager,
     ],
   );
 
-  const extensionProviders = useCapabilities(MarkdownCapabilities.Extensions);
-
-  //
-  // External extensions from other plugins.
-  //
-  const pluginExtensions = useMemo<Extension[]>(() => {
-    if (!document) {
-      return [];
-    }
-
-    return extensionProviders.flat().reduce((acc: Extension[], provider) => {
-      const extension = typeof provider === 'function' ? provider({ document }) : provider;
-      if (extension) {
-        acc.push(extension);
-      }
-
-      return acc;
-    }, []);
-  }, [extensionProviders, document]);
-
-  //
-  // Basic plugins.
-  //
   return useMemo<Extension[]>(
     () =>
       [
+        // TODO(burdon): Pass this in?
         // NOTE: Data extensions must be first so that automerge is updated before other extensions compute their state.
-        document &&
-          createDataExtensions({
-            id: document.id,
-            text: document.content.target && createDocAccessor(document.content.target, ['content']),
-            space,
-            identity,
-          }),
-        text &&
-          id &&
+        target &&
           createDataExtensions({
             id,
-            text: createDocAccessor(text, ['content']),
+            text: createDocAccessor(target, ['content']),
             space,
             identity,
           }),
-        selectionState(editorStateStore),
-        document &&
+
+        // TODO(burdon): Reconcile with effect in parent.
+        Obj.instanceOf(Markdown.Document, object) &&
           listener({
-            onChange: (text) => setFallbackName(document, text),
+            onChange: ({ text }) => {
+              setFallbackName(object as Markdown.Document, text);
+            },
           }),
+
         baseExtensions,
-        pluginExtensions,
-      ].filter(isNotFalsy),
-    [baseExtensions, pluginExtensions, document, document?.content?.target, text, id, space, identity],
+        selectionState(editorStateStore),
+      ].filter(isTruthy),
+    [identity, space, id, object, target, baseExtensions],
   );
 };
 
@@ -166,8 +142,8 @@ export const useExtensions = ({
  * Create extension instances for editor.
  */
 const createBaseExtensions = ({
-  document,
   id,
+  object,
   dispatch,
   settings,
   selectionManager,
@@ -176,9 +152,9 @@ const createBaseExtensions = ({
 }: ExtensionsOptions): Extension[] => {
   const extensions: Extension[] = [
     selectionManager && selectionChange(selectionManager),
-    settings.editorInputMode && InputModeExtensions[settings.editorInputMode],
-    settings.folding && folding(),
-  ].filter(isNotFalsy);
+    settings?.editorInputMode && InputModeExtensions[settings.editorInputMode],
+    settings?.folding && folding(),
+  ].filter(isTruthy);
 
   //
   // Markdown
@@ -189,17 +165,18 @@ const createBaseExtensions = ({
         formattingKeymap(),
         decorateMarkdown({
           selectionChangeDelay: 100,
-          numberedHeadings: settings.numberedHeadings ? { from: 2 } : undefined,
+          numberedHeadings: settings?.numberedHeadings ? { from: 2 } : undefined,
           // TODO(wittjosiah): For internal links, consider ignoring the link text and rendering the label of the object being linked to.
+          // TODO(burdon): Create dx-tag.
           renderLinkButton:
-            dispatch && (document || id)
+            dispatch && (object || id)
               ? createLinkRenderer((id: string) => {
                   void dispatch(
                     createIntent(LayoutAction.Open, {
                       part: 'main',
                       subject: [id],
                       options: {
-                        pivotId: document ? fullyQualifiedId(document) : id,
+                        pivotId: object && Obj.isObject(object) ? Obj.getDXN(object).toString() : id,
                       },
                     }),
                   );
@@ -208,11 +185,12 @@ const createBaseExtensions = ({
         }),
         linkTooltip(renderLinkTooltip),
         preview(previewOptions),
+        replacer(),
       ],
     );
   }
 
-  if (settings.debug) {
+  if (settings?.debug) {
     const items = settings.typewriter?.split(/[,\n]/) ?? '';
     if (items) {
       extensions.push(typewriter({ items }));
@@ -222,7 +200,7 @@ const createBaseExtensions = ({
   return extensions;
 };
 
-export const selectionChange = (selectionManager: SelectionManager) => {
+const selectionChange = (selectionManager: SelectionManager) => {
   return EditorView.updateListener.of(
     debounceAndThrottle((update: ViewUpdate) => {
       if (update.selectionSet) {
@@ -235,6 +213,7 @@ export const selectionChange = (selectionManager: SelectionManager) => {
             to: cursorConverter.toCursor(range.to),
           }))
           .filter(({ from, to }) => to > from);
+
         selectionManager.updateMultiRange(id, ranges);
       }
     }, 100),
@@ -293,8 +272,8 @@ const renderLinkTooltip: RenderCallback<{ url: string }> = (el, { url }) => {
   );
 };
 
-// TODO(burdon): Remove react rendering; use DOM directly.
-export const renderRoot = <T extends Element>(root: T, node: ReactNode): T => {
+// TODO(burdon): REMOVE.
+const renderRoot = <T extends Element>(root: T, node: ReactNode): T => {
   createRoot(root).render(<ThemeProvider tx={defaultTx}>{node}</ThemeProvider>);
   return root;
 };

package/src/hooks/useLinkQuery.ts

@@ -0,0 +1,83 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useCallback, useMemo } from 'react';
+
+import { Capabilities } from '@dxos/app-framework';
+import { useCapabilities, usePluginManager } from '@dxos/app-framework/react';
+import { Filter, Obj, Query, Type } from '@dxos/echo';
+import { ClientCapabilities } from '@dxos/plugin-client';
+import { SpaceCapabilities } from '@dxos/plugin-space';
+import { type Space } from '@dxos/react-client/echo';
+import { toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { type EditorMenuGroup, type EditorMenuItem, insertAtCursor, insertAtLineStart } from '@dxos/react-ui-editor';
+
+export const useLinkQuery = (space: Space | undefined) => {
+  const { t } = useTranslation();
+
+  const manager = usePluginManager();
+  const resolve = useCallback(
+    (typename: string) =>
+      manager.context.getCapabilities(Capabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {},
+    [manager],
+  );
+
+  const objectForms = useCapabilities(SpaceCapabilities.ObjectForm);
+  const schemaWhiteList = useCapabilities(ClientCapabilities.SchemaWhiteList);
+  const filter = useMemo(
+    () =>
+      Filter.or(
+        ...objectForms.map((form) => Filter.type(form.objectSchema)),
+        ...schemaWhiteList.flat().map((schema) => Filter.typename(Type.getTypename(schema))),
+      ),
+    [objectForms, schemaWhiteList],
+  );
+
+  const handleLinkQuery = useCallback(
+    async (query?: string): Promise<EditorMenuGroup[]> => {
+      const name = query?.startsWith('@') ? query.slice(1).toLowerCase() : (query?.toLowerCase() ?? '');
+      const results = await space?.db.query(Query.select(filter)).run();
+
+      // TODO(wittjosiah): Use `Obj.Any` type.
+      const getLabel = (object: any) => {
+        const label = Obj.getLabel(object);
+        if (label) {
+          return label;
+        }
+
+        // TODO(wittjosiah): Remove metadata labels.
+        const type = Obj.getTypename(object)!;
+        const metadata = resolve(type);
+        return metadata.label?.(object) || ['object name placeholder', { ns: type, default: 'New object' }];
+      };
+
+      const items =
+        results?.objects
+          .filter((object) => toLocalizedString(getLabel(object), t).toLowerCase().includes(name))
+          // TODO(wittjosiah): Remove `any` type.
+          .map((object: any): EditorMenuItem => {
+            const metadata = resolve(Obj.getTypename(object)!);
+            const label = toLocalizedString(getLabel(object), t);
+            return {
+              id: object.id,
+              label,
+              icon: metadata.icon,
+              onSelect: ({ view, head }) => {
+                const link = `[${label}](${Obj.getDXN(object)})`;
+                if (query?.startsWith('@')) {
+                  insertAtLineStart(view, head, `!${link}\n`);
+                } else {
+                  insertAtCursor(view, head, `${link} `);
+                }
+              },
+            };
+          }) ?? [];
+
+      return [{ id: 'echo', items }];
+    },
+    [space, filter, resolve],
+  );
+
+  return handleLinkQuery;
+};

package/src/hooks/useSelectCurrentThread.tsx

@@ -3,10 +3,11 @@
 //
 
 import { EditorView } from '@codemirror/view';
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import { useMemo } from 'react';
 
-import { LayoutAction, createResolver, useIntentResolver } from '@dxos/app-framework';
+import { LayoutAction, createResolver } from '@dxos/app-framework';
+import { useIntentResolver } from '@dxos/app-framework/react';
 import { invariant } from '@dxos/invariant';
 import { Cursor, setSelection } from '@dxos/react-ui-editor';
 
@@ -15,13 +16,19 @@ import { meta } from '../meta';
 /**
  * Handle scrolling and selection of the current thread in a markdown editor.
  */
-export const useSelectCurrentThread = (editorView: EditorView | undefined, documentId: string) => {
+export const useSelectCurrentThread = (editorView: EditorView | null, documentId: string) => {
   const scrollIntoViewResolver = useMemo(
     () =>
       createResolver({
         intent: LayoutAction.UpdateLayout,
         position: 'hoist',
-        filter: (data): data is { part: 'current'; subject: string; options: { cursor: string } } => {
+        filter: (
+          data,
+        ): data is {
+          part: 'current';
+          subject: string;
+          options: { cursor: string };
+        } => {
           if (!Schema.is(LayoutAction.ScrollIntoView.fields.input)(data)) {
             return false;
           }
@@ -35,7 +42,10 @@ export const useSelectCurrentThread = (editorView: EditorView | undefined, docum
             const selection = editorView.state.selection.main.from !== range.from ? { anchor: range.from } : undefined;
             const effects = [
               // NOTE: This does not use the DOM scrollIntoView function.
-              EditorView.scrollIntoView(range.from, { y: 'start', yMargin: 96 }),
+              EditorView.scrollIntoView(range.from, {
+                y: 'start',
+                yMargin: 96,
+              }),
             ];
             if (selection) {
               // Update the editor selection to get bi-directional highlighting.

package/src/meta.ts

@@ -9,11 +9,11 @@ export const meta: PluginMeta = {
   id: 'dxos.org/plugin/markdown',
   name: 'Markdown',
   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.
+    Full-featured collaborative markdown editor with real-time editing, inline comments, and rich formatting.
+    Supports AI-powered editing assistance and seamlessly integrates with other workspace objects.
   `,
   icon: 'ph--text-aa--regular',
+  iconHue: 'indigo',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-markdown',
   screenshots: ['https://dxos.network/plugin-details-markdown-dark.png'],
 };