@dxos/plugin-markdown 0.8.4-main.406dc2a → 0.8.4-main.52d7546f51

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

@@ -6,19 +6,18 @@ 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 { type Capabilities } from '@dxos/app-framework';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { debounceAndThrottle } from '@dxos/async';
+import { Obj } from '@dxos/echo';
+import { createDocAccessor } from '@dxos/echo-db';
 import { invariant } from '@dxos/invariant';
-import { createDocAccessor, fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
+import { getSpace, useObject } 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 { Text } from '@dxos/schema';
 import {
   Cursor,
   type EditorStateStore,
@@ -36,23 +35,23 @@ 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';
+} from '@dxos/ui-editor';
+import { defaultTx } from '@dxos/ui-theme';
 import { isTruthy } from '@dxos/util';
 
-import { MarkdownCapabilities } from './capabilities';
-import { type Markdown } from './types';
-import { setFallbackName } from './util';
+import { 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;
-  dispatch?: PromiseIntentDispatcher;
-  settings: Markdown.Settings;
+export type ExtensionsOptions = {
+  id: string;
+  object?: DocumentType;
+  invokePromise?: Capabilities.OperationInvoker['invokePromise'];
+  settings?: Markdown.Settings;
   selectionManager?: SelectionManager;
   viewMode?: EditorViewMode;
   editorStateStore?: EditorStateStore;
@@ -61,104 +60,82 @@ type ExtensionsOptions = {
 
 // TODO(burdon): Merge with createBaseExtensions below.
 export const useExtensions = ({
-  document,
   id,
-  text,
+  object,
   settings,
   selectionManager,
   viewMode,
   editorStateStore,
   previewOptions,
 }: ExtensionsOptions): Extension[] => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
   const identity = useIdentity();
-  const space = getSpace(document) ?? getSpace(text);
+  const space = getSpace(object);
+
+  // Get the content reference from Document objects.
+  const contentRef = Obj.instanceOf(Markdown.Document, object) ? (object as Markdown.Document).content : undefined;
+  // Use useObject to trigger re-render when the reference loads (returns snapshot for reactivity).
+  useObject(contentRef);
+  // Get the actual live object target via .target (needed for createDocAccessor).
+  const target = contentRef?.target ?? (Obj.instanceOf(Text.Text, object) ? object : undefined);
 
   // 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,
+        invokePromise,
       }),
     [
-      document,
       id,
-      text,
+      object,
       viewMode,
-      dispatch,
+      invokePromise,
       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']),
-            space,
+            text: createDocAccessor(target, ['content']),
+            messenger: 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,
+        selectionState(editorStateStore),
       ].filter(isTruthy),
-    [baseExtensions, pluginExtensions, document, document?.content?.target, text, id, space, identity],
+    [identity, space, id, object, target, baseExtensions],
   );
 };
 
@@ -166,9 +143,9 @@ export const useExtensions = ({
  * Create extension instances for editor.
  */
 const createBaseExtensions = ({
-  document,
   id,
-  dispatch,
+  object,
+  invokePromise,
   settings,
   selectionManager,
   viewMode,
@@ -176,8 +153,8 @@ const createBaseExtensions = ({
 }: ExtensionsOptions): Extension[] => {
   const extensions: Extension[] = [
     selectionManager && selectionChange(selectionManager),
-    settings.editorInputMode && InputModeExtensions[settings.editorInputMode],
-    settings.folding && folding(),
+    settings?.editorInputMode && InputModeExtensions[settings.editorInputMode],
+    settings?.folding && folding(),
   ].filter(isTruthy);
 
   //
@@ -189,30 +166,27 @@ 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)
-              ? createLinkRenderer((id: string) => {
-                  void dispatch(
-                    createIntent(LayoutAction.Open, {
-                      part: 'main',
-                      subject: [id],
-                      options: {
-                        pivotId: document ? fullyQualifiedId(document) : id,
-                      },
-                    }),
-                  );
+            invokePromise && (object || id)
+              ? createLinkRenderer((targetId: string) => {
+                  void invokePromise(LayoutOperation.Open, {
+                    subject: [targetId],
+                    pivotId: object && Obj.isObject(object) ? Obj.getDXN(object).toString() : id,
+                  });
                 })
               : undefined,
         }),
         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 +196,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 +209,7 @@ export const selectionChange = (selectionManager: SelectionManager) => {
             to: cursorConverter.toCursor(range.to),
           }))
           .filter(({ from, to }) => to > from);
+
         selectionManager.updateMultiRange(id, ranges);
       }
     }, 100),
@@ -293,8 +268,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 * as Option from 'effect/Option';
+import { useCallback, useMemo } from 'react';
+
+import { usePluginManager } from '@dxos/app-framework/ui';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { type Database, Filter, Obj, Query, Type } from '@dxos/echo';
+import { EntityKind, SystemTypeAnnotation, getTypeAnnotation } from '@dxos/echo/internal';
+import { toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { type EditorMenuGroup, type EditorMenuItem } from '@dxos/react-ui-editor';
+import { insertAtCursor, insertAtLineStart } from '@dxos/ui-editor';
+
+export const useLinkQuery = (db: Database.Database | undefined) => {
+  const { t } = useTranslation();
+
+  const manager = usePluginManager();
+  const resolve = useCallback(
+    (typename: string) =>
+      manager.capabilities.getAll(AppCapabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {},
+    [manager],
+  );
+
+  const filter = useMemo(
+    () =>
+      Filter.or(
+        ...(db?.schemaRegistry.query({ location: ['database', 'runtime'] }).runSync() ?? [])
+          .filter((schema) => getTypeAnnotation(schema)?.kind !== EntityKind.Relation)
+          .filter((schema) => !SystemTypeAnnotation.get(schema).pipe(Option.getOrElse(() => false)))
+          .map((schema) => Filter.typename(Type.getTypename(schema))),
+      ),
+    [db],
+  );
+
+  const handleLinkQuery = useCallback(
+    async (query?: string): Promise<EditorMenuGroup[]> => {
+      const name = query?.startsWith('@') ? query.slice(1).toLowerCase() : (query?.toLowerCase() ?? '');
+      const results = await db?.query(Query.select(filter)).run();
+
+      // TODO(wittjosiah): Use `Obj.Unknown` 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
+          ?.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 }];
+    },
+    [db, filter, resolve],
+  );
+
+  return handleLinkQuery;
+};

package/src/hooks/useSelectCurrentThread.tsx

@@ -3,12 +3,14 @@
 //
 
 import { EditorView } from '@codemirror/view';
-import * as Schema from 'effect/Schema';
+import * as Effect from 'effect/Effect';
 import { useMemo } from 'react';
 
-import { LayoutAction, createResolver, useIntentResolver } from '@dxos/app-framework';
+import { useOperationResolver } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { invariant } from '@dxos/invariant';
-import { Cursor, setSelection } from '@dxos/react-ui-editor';
+import { OperationResolver } from '@dxos/operation';
+import { Cursor, setSelection } from '@dxos/ui-editor';
 
 import { meta } from '../meta';
 
@@ -16,41 +18,44 @@ import { meta } from '../meta';
  * Handle scrolling and selection of the current thread in a markdown editor.
  */
 export const useSelectCurrentThread = (editorView: EditorView | null, documentId: string) => {
-  const scrollIntoViewResolver = useMemo(
+  const scrollIntoViewHandler = useMemo(
     () =>
-      createResolver({
-        intent: LayoutAction.UpdateLayout,
+      OperationResolver.make({
+        operation: LayoutOperation.ScrollIntoView,
         position: 'hoist',
-        filter: (data): data is { part: 'current'; subject: string; options: { cursor: string } } => {
-          if (!Schema.is(LayoutAction.ScrollIntoView.fields.input)(data)) {
-            return false;
-          }
-
-          return !!editorView && data.subject === documentId && !!data.options?.cursor;
-        },
-        resolve: ({ options: { cursor } }) => {
-          invariant(editorView, 'Editor view is not defined.');
-          const range = Cursor.getRangeFromCursor(editorView.state, cursor!);
-          if (range) {
-            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 }),
-            ];
-            if (selection) {
-              // Update the editor selection to get bi-directional highlighting.
-              effects.push(setSelection.of({ current: documentId }));
+        filter: (input) => !!editorView && input.subject === documentId && !!input.cursor,
+        handler: (input) =>
+          Effect.sync(() => {
+            invariant(editorView, 'Editor view is not defined.');
+            const cursor = input.cursor;
+            if (!cursor) {
+              return;
             }
+            const range = Cursor.getRangeFromCursor(editorView.state, cursor);
+            if (range) {
+              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,
+                }),
+              ];
+              if (selection) {
+                // Update the editor selection to get bi-directional highlighting.
+                effects.push(setSelection.of({ current: documentId }));
+              }
 
-            editorView.dispatch({
-              effects,
-              selection: selection ? { anchor: range.from } : undefined,
-            });
-          }
-        },
+              editorView.dispatch({
+                effects,
+                selection: selection ? { anchor: range.from } : undefined,
+              });
+            }
+          }),
       }),
     [documentId, editorView],
   );
 
-  useIntentResolver(meta.id, scrollIntoViewResolver);
+  useOperationResolver(meta.id, scrollIntoViewHandler);
 };

package/src/index.ts

@@ -2,11 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-export { MarkdownCapabilities } from './capabilities';
-export { MarkdownEvents } from './events';
+export { MarkdownCapabilities, MarkdownEvents } from './types';
 
 export * from './meta';
 export * from './types';
 export * from './util';
 
 export * from './MarkdownPlugin';
+
+export { MarkdownEditor } from './components/MarkdownEditor';

package/src/meta.ts

@@ -2,18 +2,18 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type PluginMeta } from '@dxos/app-framework';
+import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
-export const meta: PluginMeta = {
+export const meta: Plugin.Meta = {
   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'],
 };

package/src/testing.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Toolkit from '@effect/ai/Toolkit';
+import * as Effect from 'effect/Effect';
+
+import { SpaceProperties } from '@dxos/client-protocol';
+import { Obj, Ref } from '@dxos/echo';
+import { Database } from '@dxos/echo';
+import { Collection } from '@dxos/schema';
+
+// TODO(wittjosiah): Factor out.
+export const WithProperties = <A, E, R>(effect: Effect.Effect<A, E, R>): Effect.Effect<A, E, R | Database.Service> =>
+  Effect.zipRight(
+    Effect.gen(function* () {
+      // TODO(wittjosiah): Remove cast.
+      yield* Database.add(
+        Obj.make(SpaceProperties, {
+          [Collection.Collection.typename]: Ref.make(Collection.make()),
+        }) as any,
+      );
+    }),
+    effect,
+  );
+
+export const testToolkit = Toolkit.empty as Toolkit.Toolkit<any>;

package/src/translations.ts

@@ -3,6 +3,7 @@
 //
 
 import { type Resource } from '@dxos/react-ui';
+import { translations as editorTranslations } from '@dxos/react-ui-editor';
 
 import { meta } from './meta';
 import { Markdown } from './types';
@@ -18,6 +19,7 @@ export const translations = [
         'object name placeholder': 'New document',
         'rename object label': 'Rename document',
         'delete object label': 'Delete document',
+        'object deleted label': 'Document deleted',
       },
       [meta.id]: {
         'plugin name': 'Editor',
@@ -43,7 +45,11 @@ export const translations = [
         'upload image label': 'Upload image',
         'fallback title': 'Untitled',
         'navigate to document label': 'Open document',
+        'words label_zero': 'words',
+        'words label_one': 'word',
+        'words label_other': 'words',
       },
     },
   },
+  ...editorTranslations,
 ] as const satisfies Resource[];

package/src/types/Markdown.ts

@@ -5,9 +5,9 @@
 import * as Schema from 'effect/Schema';
 
 import { Obj, Ref, Type } from '@dxos/echo';
-import { DescriptionAnnotation, LabelAnnotation } from '@dxos/echo/internal';
-import { EditorInputMode, EditorViewMode } from '@dxos/react-ui-editor/types';
-import { DataType, ItemAnnotation } from '@dxos/schema';
+import { DescriptionAnnotation, FormInputAnnotation, LabelAnnotation } from '@dxos/echo/internal';
+import { Text } from '@dxos/schema';
+import { EditorInputMode, EditorViewMode } from '@dxos/ui-editor/types';
 
 /**
  * Document Item type.
@@ -15,16 +15,15 @@ import { DataType, ItemAnnotation } from '@dxos/schema';
 export const Document = Schema.Struct({
   name: Schema.optional(Schema.String),
   description: Schema.optional(Schema.String),
-  fallbackName: Schema.optional(Schema.String),
-  content: Type.Ref(DataType.Text),
+  fallbackName: Schema.String.pipe(FormInputAnnotation.set(false), Schema.optional),
+  content: Type.Ref(Text.Text).pipe(FormInputAnnotation.set(false)),
 }).pipe(
-  Type.Obj({
+  Type.object({
     typename: 'dxos.org/type/Document',
     version: '0.1.0',
   }),
   LabelAnnotation.set(['name', 'fallbackName']),
   DescriptionAnnotation.set('description'),
-  ItemAnnotation.set(true),
 );
 
 export type Document = Schema.Schema.Type<typeof Document>;
@@ -32,11 +31,11 @@ export type Document = Schema.Schema.Type<typeof Document>;
 /**
  * Document factory.
  */
-export const makeDocument = ({
+export const make = ({
   content = '',
   ...props
 }: Partial<{ name: string; fallbackName: string; content: string }> = {}) =>
-  Obj.make(Document, { ...props, content: Ref.make(DataType.makeText(content)) });
+  Obj.make(Document, { ...props, content: Ref.make(Text.make(content)) });
 
 /**
  * Plugin settings.