@dxos/plugin-markdown 0.8.4-main.2e9d522 → 0.8.4-main.3eb6e50203

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

@@ -6,56 +6,52 @@ import { type ViewUpdate } from '@codemirror/view';
 import React, { type AnchorHTMLAttributes, type ReactNode, useMemo } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import {
-  createIntent,
-  LayoutAction,
-  type PromiseIntentDispatcher,
-  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, type QueryResult } 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 {
-  type AutocompleteResult,
+  Cursor,
   type EditorStateStore,
+  EditorView,
   type EditorViewMode,
   type Extension,
   InputModeExtensions,
+  type PreviewOptions,
+  type RenderCallback,
   createDataExtensions,
-  autocomplete,
   decorateMarkdown,
+  documentId,
   folding,
   formattingKeymap,
   linkTooltip,
   listener,
   preview,
+  replacer,
   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';
+} from '@dxos/ui-editor';
+import { defaultTx } from '@dxos/ui-theme';
+import { isTruthy } from '@dxos/util';
+
+import { Markdown } from '../types';
+import { setFallbackName } from '../util';
 
-import { MarkdownCapabilities } from './capabilities';
-import { type DocumentType, type MarkdownSettingsProps } from './types';
-import { setFallbackName } from './util';
+export type DocumentType = Markdown.Document | Text.Text | { id: string; text: string };
 
-type ExtensionsOptions = {
-  document?: DocumentType;
-  id?: string;
-  text?: DataType.Text;
-  dispatch?: PromiseIntentDispatcher;
-  query?: QueryResult<DocumentType>;
-  settings: MarkdownSettingsProps;
+export type ExtensionsOptions = {
+  id: string;
+  object?: DocumentType;
+  invokePromise?: Capabilities.OperationInvoker['invokePromise'];
+  settings?: Markdown.Settings;
   selectionManager?: SelectionManager;
   viewMode?: EditorViewMode;
   editorStateStore?: EditorStateStore;
@@ -64,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,
-      ].filter(isNotFalsy),
-    [baseExtensions, pluginExtensions, document, document?.content?.target, text, id, space, identity],
+        selectionState(editorStateStore),
+      ].filter(isTruthy),
+    [identity, space, id, object, target, baseExtensions],
   );
 };
 
@@ -169,20 +143,19 @@ export const useExtensions = ({
  * Create extension instances for editor.
  */
 const createBaseExtensions = ({
-  document,
   id,
-  dispatch,
+  object,
+  invokePromise,
   settings,
   selectionManager,
-  query,
   viewMode,
   previewOptions,
 }: 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
@@ -193,54 +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(),
       ],
     );
   }
 
-  //
-  // Autocomplete object links.
-  //
-  if (query) {
-    extensions.push(
-      autocomplete({
-        onSearch: (text: string) => {
-          // TODO(burdon): Specify filter (e.g., stack).
-          return query.objects
-            .map<AutocompleteResult | undefined>((object) =>
-              object.name?.length && object.id !== document?.id
-                ? {
-                    label: object.name,
-                    // TODO(burdon): Factor out URL builder.
-                    apply: `[${object.name}](/${fullyQualifiedId(object)})`,
-                  }
-                : undefined,
-            )
-            .filter(isNotFalsy);
-        },
-      }),
-    );
-  }
-
-  if (settings.debug) {
+  if (settings?.debug) {
     const items = settings.typewriter?.split(/[,\n]/) ?? '';
     if (items) {
       extensions.push(typewriter({ items }));
@@ -250,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) {
@@ -263,6 +209,7 @@ export const selectionChange = (selectionManager: SelectionManager) => {
             to: cursorConverter.toCursor(range.to),
           }))
           .filter(({ from, to }) => to > from);
+
         selectionManager.updateMultiRange(id, ranges);
       }
     }, 100),
@@ -321,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,54 +3,59 @@
 //
 
 import { EditorView } from '@codemirror/view';
-import { Schema } from 'effect';
+import * as Effect from 'effect/Effect';
 import { useMemo } from 'react';
 
-import { createResolver, LayoutAction, 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 { MARKDOWN_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
 /**
  * Handle scrolling and selection of the current thread in a markdown editor.
  */
-export const useSelectCurrentThread = (editorView: EditorView | undefined, documentId: string) => {
-  const scrollIntoViewResolver = useMemo(
+export const useSelectCurrentThread = (editorView: EditorView | null, documentId: string) => {
+  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(MARKDOWN_PLUGIN, scrollIntoViewResolver);
+  useOperationResolver(meta.id, scrollIntoViewHandler);
 };

package/src/index.ts

@@ -2,8 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-export { MarkdownCapabilities } from './capabilities';
-export { MarkdownEvents } from './events';
-export * from './MarkdownPlugin';
+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,19 +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 MARKDOWN_PLUGIN = 'dxos.org/plugin/markdown';
-
-export const meta: PluginMeta = {
-  id: MARKDOWN_PLUGIN,
+export const meta: Plugin.Meta = {
+  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`
+    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.
   `,
-  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-markdown',
   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,14 +3,15 @@
 //
 
 import { type Resource } from '@dxos/react-ui';
+import { translations as editorTranslations } from '@dxos/react-ui-editor';
 
 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',
@@ -18,9 +19,11 @@ 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',
+        '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?',
@@ -42,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[];