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

package/src/components/MarkdownEditor/MarkdownEditorToolbar.tsx

@@ -0,0 +1,63 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import React, { useCallback, useState } from 'react';
+
+import { type FileInfo } from '@dxos/app-framework';
+import { invariant } from '@dxos/invariant';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { EditorToolbar, type EditorToolbarProps, type EditorViewMode } from '@dxos/react-ui-editor';
+
+import { FileUpload, type FileUploadAction } from './FileUpload';
+
+export type MarkdownEditorToolbarProps = ThemedClassName<
+  {
+    id: string;
+    editorView?: EditorView;
+    onFileUpload?: (file: File) => Promise<FileInfo | undefined>;
+  } & Pick<EditorToolbarProps, 'role' | 'state' | 'customActions' | 'onViewModeChange'>
+>;
+
+export const MarkdownEditorToolbar = ({
+  classNames,
+  id,
+  role,
+  state,
+  editorView,
+  customActions,
+  onFileUpload,
+  onViewModeChange,
+}: MarkdownEditorToolbarProps) => {
+  const [upload, setUpload] = useState<FileUploadAction | null>(null);
+  const handleRef = useCallback((next: FileUploadAction) => setUpload(() => next), []);
+
+  const handleViewModeChange = useCallback((mode: EditorViewMode) => onViewModeChange?.(mode), [onViewModeChange]);
+
+  const getView = useCallback(() => {
+    invariant(editorView);
+    return editorView;
+  }, [editorView]);
+
+  if (!editorView) {
+    return <div />;
+  }
+
+  return (
+    <>
+      <EditorToolbar
+        classNames={classNames}
+        attendableId={id}
+        role={role}
+        state={state}
+        customActions={customActions}
+        getView={getView}
+        onImageUpload={upload ?? undefined}
+        onViewModeChange={handleViewModeChange}
+      />
+
+      {onFileUpload && <FileUpload ref={handleRef} editorView={editorView} onFileUpload={onFileUpload} />}
+    </>
+  );
+};

package/src/components/Suggestions.stories.tsx

@@ -2,24 +2,19 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta } from '@storybook/react-vite';
-import { Match, Option, Schema, pipe } from 'effect';
+import * as Function from 'effect/Function';
+import * as Match from 'effect/Match';
+import * as Option from 'effect/Option';
+import * as Schema from 'effect/Schema';
 import React, { type FC, useEffect, useMemo, useState } from 'react';
 
-import {
-  Capabilities,
-  IntentPlugin,
-  SettingsPlugin,
-  contributes,
-  useCapability,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
+import { Capabilities, IntentPlugin, SettingsPlugin, 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 { ClientPlugin } from '@dxos/plugin-client';
+import { GraphPlugin } from '@dxos/plugin-graph';
 import { PreviewPlugin } from '@dxos/plugin-preview';
 import { SpacePlugin } from '@dxos/plugin-space';
 import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
@@ -27,11 +22,12 @@ 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 { type EditorSelection, type Range, command, useTextEditor } from '@dxos/react-ui-editor';
+import { withTheme } from '@dxos/react-ui/testing';
+import { type EditorSelection, type Range, 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 { render } from '@dxos/storybook-utils';
 
 import { MarkdownCapabilities } from '../capabilities';
 import { MarkdownPlugin } from '../MarkdownPlugin';
@@ -83,7 +79,7 @@ const TestChat: FC<{ doc: Markdown.Document; content: string }> = ({ doc, conten
 
     const text = await doc.content.load();
     const accessor = createDocAccessor(text, ['content']);
-    const cursor = pipe(
+    const cursor = Function.pipe(
       editorState.getState(fullyQualifiedId(doc))?.selection,
       Option.fromNullable,
       Option.map(selectionToRange),
@@ -133,7 +129,7 @@ const DefaultStory = ({ document, chat }: { document: string; chat: string }) =>
         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();
-          return `[${label}][${dxn}]`;
+          return `[${label}](${dxn})`;
         }),
       }),
     );
@@ -142,45 +138,50 @@ const DefaultStory = ({ document, chat }: { document: string; chat: string }) =>
   }, [space]);
 
   if (!space || !doc) {
-    return <></>;
+    return null;
   }
 
+  // TODO(burdon): Layout issue.
   return (
-    <>
+    <div className='grid grid-cols-2 bs-full overflow-hidden'>
       <MarkdownContainer id={doc.id} object={doc} settings={settings} editorStateStore={editorState} />
       <TestChat doc={doc} content={chat} />
-    </>
+    </div>
   );
 };
 
-// TODO(burdon): Make consistent.
 const storybook: Meta<typeof DefaultStory> = {
   title: 'plugins/plugin-markdown/Suggestions',
-  render: DefaultStory,
+  render: render(DefaultStory),
   decorators: [
+    withTheme,
     withPluginManager({
       plugins: [
-        ThemePlugin({ tx: defaultTx }),
-        StorybookLayoutPlugin(),
         ClientPlugin({
           types: [Markdown.Document, TestItem],
           onClientInitialized: async ({ client }) => {
             await client.halo.createIdentity();
           },
         }),
-        SpacePlugin(),
-        SettingsPlugin(),
+        SpacePlugin({}),
+        GraphPlugin(),
         IntentPlugin(),
+        SettingsPlugin(),
+
+        // UI
+        ThemePlugin({ tx: defaultTx }),
         MarkdownPlugin(),
         PreviewPlugin(),
+        StorybookLayoutPlugin({}),
       ],
-      capabilities: [contributes(MarkdownCapabilities.Extensions, [() => command()])],
     }),
-    withLayout({ fullscreen: true, classNames: 'grid grid-cols-2' }),
   ],
   parameters: {
+    layout: 'fullscreen',
+    controls: {
+      disable: true,
+    },
     translations,
-    controls: { disable: true },
   },
 };
 

package/src/components/index.ts

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

package/src/functions/diff.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/diff',
+  name: 'Diff',
   description: trim`
     Applies a set of diffs to the markdown document.
   `,

package/src/functions/index.ts

@@ -2,6 +2,5 @@
 // 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

@@ -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 } from '@dxos/assistant';
 import { DatabaseService, defineFunction } from '@dxos/functions';
@@ -10,7 +11,8 @@ import { DatabaseService, defineFunction } from '@dxos/functions';
 import { Markdown } from '../types';
 
 export default defineFunction({
-  name: 'dxos.org/function/markdown/open',
+  key: 'dxos.org/function/markdown/open',
+  name: 'Open',
   description: 'Opens and reads the contents of a new markdown document.',
   inputSchema: Schema.Struct({
     id: ArtifactId.annotations({

package/src/hooks/index.ts

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

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

@@ -6,21 +6,16 @@ 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, useIntentDispatcher } from '@dxos/app-framework';
 import { debounceAndThrottle } from '@dxos/async';
+import { Obj } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
-import { type QueryResult, createDocAccessor, fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
+import { createDocAccessor, fullyQualifiedId } 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';
 import {
-  type AutocompleteResult,
   Cursor,
   type EditorStateStore,
   EditorView,
@@ -29,7 +24,6 @@ import {
   InputModeExtensions,
   type PreviewOptions,
   type RenderCallback,
-  autocomplete,
   createDataExtensions,
   decorateMarkdown,
   documentId,
@@ -42,20 +36,19 @@ import {
   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 { DataType } 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 | DataType.Text | { id: string; text: string };
 
-type ExtensionsOptions = {
-  document?: Markdown.Document;
-  id?: string;
-  text?: DataType.Text;
+export type ExtensionsOptions = {
+  id: string;
+  object?: DocumentType;
   dispatch?: PromiseIntentDispatcher;
-  query?: QueryResult<Markdown.Document>;
-  settings: Markdown.Settings;
+  settings?: Markdown.Settings;
   selectionManager?: SelectionManager;
   viewMode?: EditorViewMode;
   editorStateStore?: EditorStateStore;
@@ -64,9 +57,8 @@ type ExtensionsOptions = {
 
 // TODO(burdon): Merge with createBaseExtensions below.
 export const useExtensions = ({
-  document,
   id,
-  text,
+  object,
   settings,
   selectionManager,
   viewMode,
@@ -75,93 +67,66 @@ 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(DataType.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 &&
-          createDataExtensions({
-            id,
-            text: createDocAccessor(text, ['content']),
-            space,
-            identity,
-          }),
-        selectionState(editorStateStore),
-        document &&
+        target && createDataExtensions({ id, text: createDocAccessor(target, ['content']), space, identity }),
+
+        // 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 +134,19 @@ export const useExtensions = ({
  * Create extension instances for editor.
  */
 const createBaseExtensions = ({
-  document,
   id,
+  object,
   dispatch,
   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,17 +157,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 ? fullyQualifiedId(object) : id,
                       },
                     }),
                   );
@@ -216,31 +181,7 @@ const createBaseExtensions = ({
     );
   }
 
-  //
-  // 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 +191,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 +204,7 @@ export const selectionChange = (selectionManager: SelectionManager) => {
             to: cursorConverter.toCursor(range.to),
           }))
           .filter(({ from, to }) => to > from);
+
         selectionManager.updateMultiRange(id, ranges);
       }
     }, 100),
@@ -321,8 +263,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,82 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useCallback, useMemo } from 'react';
+
+import { Capabilities, useCapabilities, usePluginManager } from '@dxos/app-framework';
+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 PopoverMenuGroup, type PopoverMenuItem, 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<PopoverMenuGroup[]> => {
+      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): PopoverMenuItem => {
+            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;
+};