@dxos/plugin-markdown 0.8.3-main.672df60 → 0.8.3-staging.0fa589b

package/src/components/MarkdownContainer.tsx

@@ -3,12 +3,23 @@
 //
 
 import { Rx } from '@effect-rx/rx-react';
-import React, { useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
 
-import { Capabilities, useAppGraph, useCapabilities } from '@dxos/app-framework';
-import { isInstanceOf } from '@dxos/echo-schema';
-import { fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
+import { Capabilities, Surface, useAppGraph, useCapabilities, usePluginManager } from '@dxos/app-framework';
+import { DXN, Filter, Obj, Query } from '@dxos/echo';
+import { SpaceCapabilities } from '@dxos/plugin-space';
+import { fullyQualifiedId, getSpace, useQuery, useSpace } from '@dxos/react-client/echo';
+import { toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { type SelectionManager } from '@dxos/react-ui-attention';
+import {
+  type CommandMenuGroup,
+  type CommandMenuItem,
+  insertAtCursor,
+  insertAtLineStart,
+  type PreviewLinkRef,
+  type PreviewOptions,
+} from '@dxos/react-ui-editor';
 import { DataType } from '@dxos/schema';
 
 import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
@@ -26,7 +37,6 @@ export type MarkdownContainerProps = Pick<
   selectionManager?: SelectionManager;
 };
 
-// TODO(burdon): Factor out difference for ECHO and non-ECHO objects; i.e., single component.
 const MarkdownContainer = ({
   id,
   role,
@@ -37,58 +47,145 @@ const MarkdownContainer = ({
   editorStateStore,
   onViewModeChange,
 }: MarkdownContainerProps) => {
+  const { t } = useTranslation();
   const scrollPastEnd = role === 'article';
-  const doc = isInstanceOf(DocumentType, object) ? object : undefined;
-  const text = isInstanceOf(DataType.Text, object) ? object : undefined;
-  const extensions = useExtensions({ document: doc, text, id, settings, selectionManager, viewMode, editorStateStore });
-
-  if (doc) {
-    return (
-      <DocumentEditor
-        id={fullyQualifiedId(object)}
-        role={role}
-        document={doc}
-        extensions={extensions}
-        viewMode={viewMode}
-        settings={settings}
-        scrollPastEnd={scrollPastEnd}
-        onViewModeChange={onViewModeChange}
-      />
-    );
-  } else if (text) {
-    return (
-      <MarkdownEditor
-        id={id}
-        role={role}
-        initialValue={text.content}
-        extensions={extensions}
-        viewMode={viewMode}
-        toolbar={settings.toolbar}
-        inputMode={settings.editorInputMode}
-        scrollPastEnd={scrollPastEnd}
-        onViewModeChange={onViewModeChange}
-      />
-    );
-  } else {
+  const doc = Obj.instanceOf(DocumentType, object) ? object : undefined;
+  const text = Obj.instanceOf(DataType.Text, object) ? object : undefined;
+  const [previewBlocks, setPreviewBlocks] = useState<{ link: PreviewLinkRef; el: HTMLElement }[]>([]);
+  const previewOptions = useMemo(
+    (): PreviewOptions => ({
+      addBlockContainer: (link, el) => {
+        setPreviewBlocks((prev) => [...prev, { link, el }]);
+      },
+      removeBlockContainer: (link) => {
+        setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.ref !== link.ref));
+      },
+    }),
+    [],
+  );
+  const extensions = useExtensions({
+    document: doc,
+    text,
+    id,
+    settings,
+    selectionManager,
+    viewMode,
+    editorStateStore,
+    previewOptions,
+  });
+
+  // TODO(wittjosiah): Factor out.
+  const manager = usePluginManager();
+  const resolve = useCallback(
+    (typename: string) =>
+      manager.context.getCapabilities(Capabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {},
+    [manager],
+  );
+  const space = getSpace(object);
+  const objectForms = useCapabilities(SpaceCapabilities.ObjectForm);
+  const filter = useMemo(() => Filter.or(...objectForms.map((form) => Filter.type(form.objectSchema))), [objectForms]);
+  const onLinkQuery = useCallback(
+    async (query?: string): Promise<CommandMenuGroup[]> => {
+      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 type = Obj.getTypename(object)!;
+        const metadata = resolve(type);
+        return (
+          metadata.label?.(object) || object.name || ['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): CommandMenuItem => {
+            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 }];
+    },
+    [filter, resolve, space],
+  );
+
+  const editor = doc ? (
+    <DocumentEditor
+      id={fullyQualifiedId(object)}
+      role={role}
+      document={doc}
+      extensions={extensions}
+      viewMode={viewMode}
+      settings={settings}
+      scrollPastEnd={scrollPastEnd}
+      onViewModeChange={onViewModeChange}
+      onLinkQuery={space ? onLinkQuery : undefined}
+    />
+  ) : text ? (
+    <MarkdownEditor
+      id={id}
+      role={role}
+      initialValue={text.content}
+      extensions={extensions}
+      viewMode={viewMode}
+      toolbar={settings.toolbar}
+      inputMode={settings.editorInputMode}
+      scrollPastEnd={scrollPastEnd}
+      onViewModeChange={onViewModeChange}
+      onLinkQuery={space ? onLinkQuery : undefined}
+    />
+  ) : (
     // TODO(burdon): Normalize with above.
-    return (
-      <MarkdownEditor
-        id={id}
-        role={role}
-        initialValue={object.text}
-        extensions={extensions}
-        viewMode={viewMode}
-        toolbar={settings.toolbar}
-        inputMode={settings.editorInputMode}
-        scrollPastEnd={scrollPastEnd}
-        onViewModeChange={onViewModeChange}
-      />
-    );
-  }
+    <MarkdownEditor
+      id={id}
+      role={role}
+      initialValue={object.text}
+      extensions={extensions}
+      viewMode={viewMode}
+      toolbar={settings.toolbar}
+      inputMode={settings.editorInputMode}
+      scrollPastEnd={scrollPastEnd}
+      onViewModeChange={onViewModeChange}
+      onLinkQuery={space ? onLinkQuery : undefined}
+    />
+  );
+
+  return (
+    <>
+      {editor}
+      {previewBlocks.map(({ link, el }) => (
+        <PreviewBlock key={link.ref} link={link} el={el} />
+      ))}
+    </>
+  );
+};
+
+// TODO(wittjosiah): This shouldn't be "card" but "block".
+//   It's not a preview card but an interactive embedded object.
+const PreviewBlock = ({ link, el }: { link: PreviewLinkRef; el: HTMLElement }) => {
+  const echoDXN = useMemo(() => DXN.parse(link.ref).asEchoDXN(), [link.ref]);
+  const space = useSpace(echoDXN?.spaceId);
+  const [subject] = useQuery(space, Query.select(Filter.ids(echoDXN?.echoId ?? '')));
+  const data = useMemo(() => ({ subject }), [subject]);
+
+  return createPortal(<Surface role='card--document' data={data} limit={1} />, el);
 };
 
 type DocumentEditorProps = Omit<MarkdownContainerProps, 'object' | 'extensionProviders' | 'editorStateStore'> &
-  Pick<MarkdownEditorProps, 'id' | 'scrollPastEnd' | 'extensions'> & {
+  Pick<MarkdownEditorProps, 'id' | 'scrollPastEnd' | 'extensions' | 'onLinkQuery'> & {
     document: DocumentType;
   };
 

package/src/components/MarkdownEditor/MarkdownEditor.stories.tsx

@@ -25,7 +25,7 @@ type StoryProps = MarkdownEditorProps & {
 };
 
 const DefaultStory = ({ content = '# Test', toolbar }: StoryProps) => {
-  const doc = useMemo(() => createObject({ content }), [content]);
+  const doc = useMemo(() => createObject({ content }), [content]); // TODO(burdon): Remove dependency on createObject.
   const extensions = useMemo(() => [automerge(createDocAccessor(doc, ['content']))], [doc]);
   return <MarkdownEditor id='test' initialValue={doc.content} extensions={extensions} toolbar={toolbar} />;
 };

package/src/components/MarkdownEditor/MarkdownEditor.tsx

@@ -3,33 +3,42 @@
 //
 
 import { type EditorView } from '@codemirror/view';
-import React, { useMemo, useEffect, useCallback } from 'react';
+import React, { forwardRef, useMemo, useEffect, useCallback, useImperativeHandle, useRef } from 'react';
 import { useDropzone } from 'react-dropzone';
 
 import { type FileInfo } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
-import { useThemeContext, useTranslation } from '@dxos/react-ui';
+import { toLocalizedString, useThemeContext, useTranslation } from '@dxos/react-ui';
 import {
+  CommandMenu,
+  type CommandMenuGroup,
   type DNDOptions,
-  type EditorViewMode,
   type EditorInputMode,
   type EditorSelectionState,
   type EditorStateStore,
   EditorToolbar,
+  type EditorToolbarActionGraphProps,
+  type EditorViewMode,
+  RefPopover,
   type UseTextEditorProps,
+  addLink,
+  createElement,
+  coreSlashCommands,
   createBasicExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   dropFile,
-  editorSlots,
   editorGutter,
+  editorSlots,
+  filterItems,
+  linkSlashCommands,
   processEditorPayload,
   stackItemContentEditorClassNames,
+  useEditorToolbarState,
   useFormattingState,
   useTextEditor,
-  useEditorToolbarState,
-  addLink,
-  type EditorToolbarActionGraphProps,
+  useCommandMenu,
+  type UseCommandMenuOptions,
 } from '@dxos/react-ui-editor';
 import { StackItem } from '@dxos/react-ui-stack';
 import { isNotFalsy, isNonNullable } from '@dxos/util';
@@ -43,168 +52,235 @@ export type MarkdownEditorProps = {
   role?: string;
   inputMode?: EditorInputMode;
   scrollPastEnd?: boolean;
+  slashCommandGroups?: CommandMenuGroup[];
   toolbar?: boolean;
   customActions?: EditorToolbarActionGraphProps['customActions'];
   // TODO(wittjosiah): Generalize custom toolbar actions (e.g. comment, upload, etc.)
   viewMode?: EditorViewMode;
   editorStateStore?: EditorStateStore;
   onViewModeChange?: (id: string, mode: EditorViewMode) => void;
+  onLinkQuery?: (query?: string) => Promise<CommandMenuGroup[]>;
   onFileUpload?: (file: File) => Promise<FileInfo | undefined>;
 } & Pick<UseTextEditorProps, 'initialValue' | 'extensions'> &
   Partial<Pick<MarkdownPluginState, 'extensionProviders'>>;
 
 /**
  * Base markdown editor component.
- *
  * This component provides all the features of the markdown editor that do no depend on ECHO.
  * This allows it to be used as a common editor for markdown content on arbitrary backends (e.g. files).
  */
 export const MarkdownEditor = ({
-  id,
-  role = 'article',
-  initialValue,
-  extensions,
-  extensionProviders,
-  scrollPastEnd,
-  toolbar,
-  customActions,
-  viewMode,
-  editorStateStore,
-  onFileUpload,
-  onViewModeChange,
+  extensions: _extensions,
+  slashCommandGroups,
+  onLinkQuery,
+  ...props
 }: MarkdownEditorProps) => {
-  const { t } = useTranslation(MARKDOWN_PLUGIN);
-  const { themeMode } = useThemeContext();
-  const toolbarState = useEditorToolbarState({ viewMode });
-  const formattingObserver = useFormattingState(toolbarState);
-
-  // Restore last selection and scroll point.
-  const { scrollTo, selection } = useMemo<EditorSelectionState>(() => editorStateStore?.getState(id) ?? {}, [id]);
-
-  // Extensions from other plugins.
-  // TODO(burdon): Reconcile with DocumentEditor.useExtensions.
-  const providerExtensions = useMemo(
-    () => extensionProviders?.flatMap((provider) => provider({})).filter(isNonNullable),
-    [extensionProviders],
+  const { t } = useTranslation();
+  const viewRef = useRef<EditorView>();
+
+  const getMenu = useCallback(
+    (trigger: string, query?: string) => {
+      switch (trigger) {
+        case '@':
+          return onLinkQuery?.(query) ?? [];
+        case '/':
+        default:
+          return filterItems([coreSlashCommands, linkSlashCommands, ...(slashCommandGroups ?? [])], (item) =>
+            query ? toLocalizedString(item.label, t).toLowerCase().includes(query.toLowerCase()) : true,
+          );
+      }
+    },
+    [onLinkQuery, slashCommandGroups],
   );
 
-  // TODO(wittjosiah): Factor out to file uploader plugin.
-  // Drag files.
-  const handleDrop: DNDOptions['onDrop'] = async (view, { files }) => {
-    const file = files[0];
-    const info = file && onFileUpload ? await onFileUpload(file) : undefined;
-    if (info) {
-      processEditorPayload(view, { type: 'image', data: info.url });
-    }
-  };
-
-  const {
-    parentRef,
-    view: editorView,
-    focusAttributes,
-  } = useTextEditor(
-    () => ({
+  const options = useMemo<UseCommandMenuOptions>(() => {
+    const trigger = onLinkQuery ? ['/', '@'] : ['/'];
+    return {
+      viewRef,
+      trigger,
+      placeholder: {
+        delay: 3_000,
+        content: () => {
+          return createElement('div', undefined, [
+            createElement('span', { text: 'Press' }),
+            ...trigger.map((text) =>
+              createElement('span', {
+                className: 'border border-separator rounded-sm mx-1 px-1.5 pt-[1px] pb-[2px]',
+                text,
+              }),
+            ),
+            createElement('span', { text: 'for commands.' }),
+          ]);
+        },
+      },
+      getMenu,
+    };
+  }, [getMenu]);
+
+  const { commandMenu, groupsRef, currentItem, onSelect, ...refPopoverProps } = useCommandMenu(options);
+
+  const extensions = useMemo(() => [_extensions, commandMenu].filter(isNotFalsy), [_extensions, commandMenu]);
+
+  return (
+    <RefPopover modal={false} {...refPopoverProps}>
+      <MarkdownEditorImpl ref={viewRef} {...props} extensions={extensions} />
+      <CommandMenu groups={groupsRef.current} currentItem={currentItem} onSelect={onSelect} />
+    </RefPopover>
+  );
+};
+
+const MarkdownEditorImpl = forwardRef<EditorView | undefined, MarkdownEditorProps>(
+  (
+    {
+      id,
+      role = 'article',
       initialValue,
-      extensions: [
-        formattingObserver,
-        createBasicExtensions({
-          readOnly: viewMode === 'readonly',
-          placeholder: t('editor placeholder'),
-          scrollPastEnd: role === 'section' ? false : scrollPastEnd,
+      customActions,
+      editorStateStore,
+      extensions,
+      extensionProviders,
+      scrollPastEnd,
+      toolbar,
+      viewMode,
+      onFileUpload,
+      onViewModeChange,
+    },
+    forwardedRef,
+  ) => {
+    const { t } = useTranslation(MARKDOWN_PLUGIN);
+    const { themeMode } = useThemeContext();
+    const toolbarState = useEditorToolbarState({ viewMode });
+    const formattingObserver = useFormattingState(toolbarState);
+
+    // Restore last selection and scroll point.
+    const { scrollTo, selection } = useMemo<EditorSelectionState>(() => editorStateStore?.getState(id) ?? {}, [id]);
+
+    // Extensions from other plugins.
+    // TODO(burdon): Reconcile with DocumentEditor.useExtensions.
+    const providerExtensions = useMemo(
+      () => extensionProviders?.flatMap((provider) => provider({})).filter(isNonNullable),
+      [extensionProviders],
+    );
+
+    // TODO(wittjosiah): Factor out to file uploader plugin.
+    // Drag files.
+    const handleDrop: DNDOptions['onDrop'] = async (view, { files }) => {
+      const file = files[0];
+      const info = file && onFileUpload ? await onFileUpload(file) : undefined;
+      if (info) {
+        processEditorPayload(view, { type: 'image', data: info.url });
+      }
+    };
+
+    const {
+      parentRef,
+      view: editorView,
+      focusAttributes,
+    } = useTextEditor(
+      () => ({
+        initialValue,
+        extensions: [
+          formattingObserver,
+          createBasicExtensions({
+            readOnly: viewMode === 'readonly',
+            placeholder: t('editor placeholder'),
+            scrollPastEnd: role === 'section' ? false : scrollPastEnd,
+          }),
+          createMarkdownExtensions({ themeMode }),
+          createThemeExtensions({ themeMode, syntaxHighlighting: true, slots: editorSlots }),
+          editorGutter,
+          role !== 'section' && onFileUpload && dropFile({ onDrop: handleDrop }),
+          providerExtensions,
+          extensions,
+        ].filter(isNotFalsy),
+        ...(role !== 'section' && {
+          id,
+          scrollTo,
+          selection,
+          // TODO(wittjosiah): Autofocus based on layout is racy.
+          // autoFocus: layoutPlugin?.provides.layout ? layoutPlugin?.provides.layout.scrollIntoView === id : true,
+          moveToEndOfLine: true,
         }),
-        createMarkdownExtensions({ themeMode }),
-        createThemeExtensions({ themeMode, syntaxHighlighting: true, slots: editorSlots }),
-        editorGutter,
-        role !== 'section' && onFileUpload && dropFile({ onDrop: handleDrop }),
-        providerExtensions,
-        extensions,
-      ].filter(isNotFalsy),
-      ...(role !== 'section' && {
-        id,
-        scrollTo,
-        selection,
-        // TODO(wittjosiah): Autofocus based on layout is racy.
-        // autoFocus: layoutPlugin?.provides.layout ? layoutPlugin?.provides.layout.scrollIntoView === id : true,
-        moveToEndOfLine: true,
       }),
-    }),
-    [id, formattingObserver, viewMode, themeMode, extensions, providerExtensions],
-  );
+      [id, formattingObserver, viewMode, themeMode, extensions, providerExtensions],
+    );
 
-  useTest(editorView);
-  useSelectCurrentThread(editorView, id);
+    useImperativeHandle(forwardedRef, () => editorView, [editorView]);
+    useTest(editorView);
+    useSelectCurrentThread(editorView, id);
 
-  // https://react-dropzone.js.org/#src
-  const { acceptedFiles, getInputProps, open } = useDropzone({
-    multiple: false,
-    noDrag: true,
-    accept: {
-      'image/*': ['.jpg', '.jpeg', '.png', '.gif'],
-    },
-  });
+    // https://react-dropzone.js.org/#src
+    const { acceptedFiles, getInputProps, open } = useDropzone({
+      multiple: false,
+      noDrag: true,
+      accept: {
+        'image/*': ['.jpg', '.jpeg', '.png', '.gif'],
+      },
+    });
 
-  useEffect(() => {
-    if (editorView && onFileUpload && acceptedFiles.length) {
-      requestAnimationFrame(async () => {
-        // NOTE: Clone file since react-dropzone patches in a non-standard `path` property, which confuses IPFS.
-        const f = acceptedFiles[0];
-        const file = new File([f], f.name, {
-          type: f.type,
-          lastModified: f.lastModified,
+    useEffect(() => {
+      if (editorView && onFileUpload && acceptedFiles.length) {
+        requestAnimationFrame(async () => {
+          // NOTE: Clone file since react-dropzone patches in a non-standard `path` property, which confuses IPFS.
+          const f = acceptedFiles[0];
+          const file = new File([f], f.name, {
+            type: f.type,
+            lastModified: f.lastModified,
+          });
+
+          const info = await onFileUpload(file);
+          if (info) {
+            addLink({ url: info.url, image: true })(editorView);
+          }
         });
+      }
+    }, [acceptedFiles, editorView, onFileUpload]);
 
-        const info = await onFileUpload(file);
-        if (info) {
-          addLink({ url: info.url, image: true })(editorView);
-        }
-      });
-    }
-  }, [acceptedFiles, editorView, onFileUpload]);
+    const getView = useCallback(() => {
+      invariant(editorView);
+      return editorView;
+    }, [editorView]);
 
-  const getView = useCallback(() => {
-    invariant(editorView);
-    return editorView;
-  }, [editorView]);
+    const handleViewModeChange = useCallback(
+      (mode: EditorViewMode) => onViewModeChange?.(id, mode),
+      [id, onViewModeChange],
+    );
 
-  const handleViewModeChange = useCallback(
-    (mode: EditorViewMode) => onViewModeChange?.(id, mode),
-    [id, onViewModeChange],
-  );
+    const handleImageUpload = useCallback(() => {
+      if (onFileUpload) {
+        open();
+      }
+    }, [onFileUpload]);
 
-  const handleImageUpload = useCallback(() => {
-    if (onFileUpload) {
-      open();
-    }
-  }, [onFileUpload]);
-
-  return (
-    <StackItem.Content toolbar={!!toolbar}>
-      {toolbar && (
-        <>
-          <EditorToolbar
-            attendableId={id}
-            role={role}
-            state={toolbarState}
-            customActions={customActions}
-            getView={getView}
-            image={handleImageUpload}
-            viewMode={handleViewModeChange}
-          />
-          <input {...getInputProps()} />
-        </>
-      )}
-      <div
-        role='none'
-        ref={parentRef}
-        data-testid='composer.markdownRoot'
-        data-toolbar={toolbar ? 'enabled' : 'disabled'}
-        className={stackItemContentEditorClassNames(role)}
-        data-popover-collision-boundary={true}
-        {...focusAttributes}
-      />
-    </StackItem.Content>
-  );
-};
+    return (
+      <StackItem.Content toolbar={!!toolbar}>
+        {toolbar && (
+          <>
+            <EditorToolbar
+              attendableId={id}
+              role={role}
+              state={toolbarState}
+              customActions={customActions}
+              getView={getView}
+              image={handleImageUpload}
+              viewMode={handleViewModeChange}
+            />
+            <input {...getInputProps()} />
+          </>
+        )}
+        <div
+          role='none'
+          ref={parentRef}
+          data-testid='composer.markdownRoot'
+          data-toolbar={toolbar ? 'enabled' : 'disabled'}
+          className={stackItemContentEditorClassNames(role)}
+          data-popover-collision-boundary={true}
+          {...focusAttributes}
+        />
+      </StackItem.Content>
+    );
+  },
+);
 
 // Expose editor view for playwright tests.
 // TODO(wittjosiah): Find a better way to expose this or find a way to limit it to test runs.