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

package/src/components/MarkdownEditor/MarkdownEditor.tsx

@@ -1,295 +1,243 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
+import { type Extension } from '@codemirror/state';
 import { type EditorView } from '@codemirror/view';
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { useDropzone } from 'react-dropzone';
-
-import { type FileInfo } from '@dxos/app-framework';
-import { invariant } from '@dxos/invariant';
-import { toLocalizedString, useThemeContext, useTranslation } from '@dxos/react-ui';
+import { createContext } from '@radix-ui/react-context';
+import React, { type PropsWithChildren, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { Surface } from '@dxos/app-framework';
+import { DXN } from '@dxos/keys';
+import { type Live } from '@dxos/live-object';
+import { useClient } from '@dxos/react-client';
 import {
-  CommandMenu,
-  type CommandMenuGroup,
-  type DNDOptions,
-  type EditorInputMode,
-  type EditorSelectionState,
-  type EditorStateStore,
-  EditorToolbar,
-  type EditorToolbarActionGraphProps,
-  type EditorViewMode,
-  RefPopover,
-  type UseCommandMenuOptions,
-  type UseTextEditorProps,
-  addLink,
-  coreSlashCommands,
-  createBasicExtensions,
-  createElement,
-  createMarkdownExtensions,
-  createThemeExtensions,
-  dropFile,
-  editorGutter,
-  editorSlots,
-  filterItems,
-  linkSlashCommands,
-  processEditorPayload,
-  stackItemContentEditorClassNames,
-  useCommandMenu,
+  type EditorToolbarState,
+  PopoverMenuProvider,
+  type PreviewBlock,
+  type PreviewOptions,
+  type UsePopoverMenu,
   useEditorToolbarState,
-  useFormattingState,
-  useTextEditor,
+  usePopoverMenu,
 } from '@dxos/react-ui-editor';
-import { StackItem } from '@dxos/react-ui-stack';
-import { isNonNullable, isNotFalsy } from '@dxos/util';
+import { isNonNullable } from '@dxos/util';
+
+import {
+  type DocumentType,
+  type ExtensionsOptions,
+  type UsePopoverMenuOptionsProps,
+  useExtensions,
+  usePopoverMenuOptions,
+} from '../../hooks';
 
-import { useSelectCurrentThread } from '../../hooks';
-import { meta } from '../../meta';
-import { type MarkdownPluginState } from '../../types';
+import {
+  MarkdownEditorContent as NaturalMarkdownEditorContent,
+  type MarkdownEditorContentProps as NaturalMarkdownEditorContentProps,
+} from './MarkdownEditorContent';
+import {
+  MarkdownEditorToolbar as NaturalMarkdownToolbar,
+  type MarkdownEditorToolbarProps as NaturalMarkdownToolbarProps,
+} from './MarkdownEditorToolbar';
+
+//
+// Context
+//
 
-export type MarkdownEditorProps = {
+type MarkdownEditorContextValue = {
   id: string;
-  role?: string;
-  toolbar?: boolean;
-  inputMode?: EditorInputMode;
-  scrollPastEnd?: boolean;
-  slashCommandGroups?: CommandMenuGroup[];
-  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 = ({
-  extensions: _extensions,
+  setEditorView: (view: EditorView) => void;
+  extensions: Extension[];
+  previewBlocks: PreviewBlock[];
+  toolbarState: Live<EditorToolbarState>;
+  popoverMenu: Omit<UsePopoverMenu, 'extension'>;
+} & (Pick<ExtensionsOptions, 'viewMode'> &
+  Pick<NaturalMarkdownToolbarProps, 'editorView' | 'onFileUpload' | 'onViewModeChange'>);
+
+const [MarkdownEditorContextProvider, useMarkdownEditorContext] =
+  createContext<MarkdownEditorContextValue>('MarkdownEditor.Context');
+
+//
+// MarkdownEditor.Root
+//
+
+type MarkdownEditorRootProps = PropsWithChildren<
+  {
+    object?: DocumentType;
+    extensions?: Extension[];
+  } & Pick<MarkdownEditorContextValue, 'id' | 'onFileUpload' | 'onViewModeChange' | 'viewMode'> &
+    Pick<UsePopoverMenuOptionsProps, 'slashCommandGroups' | 'onLinkQuery'> &
+    Pick<ExtensionsOptions, 'editorStateStore' | 'selectionManager' | 'settings'>
+>;
+
+const MarkdownEditorRoot = ({
+  children,
+  id,
+  object,
+  editorStateStore,
+  selectionManager,
+  settings,
+  viewMode,
+  extensions: extensionsParam,
   slashCommandGroups,
   onLinkQuery,
   ...props
-}: MarkdownEditorProps) => {
-  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],
+}: MarkdownEditorRootProps) => {
+  const [editorView, setEditorView] = useState<EditorView>();
+
+  // Preview blocks.
+  const [previewBlocks, setPreviewBlocks] = useState<PreviewBlock[]>([]);
+  const previewOptions = useMemo<PreviewOptions>(
+    () => ({
+      addBlockContainer: (block) => {
+        setPreviewBlocks((prev) => [...prev, block]);
+      },
+      removeBlockContainer: ({ link }) => {
+        setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.ref !== link.ref));
+      },
+    }),
+    [],
   );
 
-  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]);
+  // Toolbar state.
+  const toolbarState = useEditorToolbarState({ viewMode });
+
+  // Context menu.
+  const menuOptions = usePopoverMenuOptions({
+    editorView,
+    slashCommandGroups,
+    onLinkQuery,
+  });
+  const { extension: menuExtension, ...menuProps } = usePopoverMenu(menuOptions);
+
+  // Extensions.
+  const coreExtensions = useExtensions({
+    id,
+    object,
+    editorStateStore,
+    previewOptions,
+    selectionManager,
+    settings,
+    viewMode,
+  });
+
+  const extensions = useMemo(
+    () => [coreExtensions, menuExtension, extensionsParam].filter(isNonNullable),
+    [coreExtensions, menuExtension, extensionsParam],
+  );
 
-  const { commandMenu, groupsRef, currentItem, onSelect, ...refPopoverProps } = useCommandMenu(options);
+  return (
+    <MarkdownEditorContextProvider
+      id={id}
+      editorView={editorView}
+      setEditorView={setEditorView}
+      extensions={extensions}
+      previewBlocks={previewBlocks}
+      toolbarState={toolbarState}
+      popoverMenu={menuProps}
+      viewMode={viewMode}
+      {...props}
+    >
+      {children}
+    </MarkdownEditorContextProvider>
+  );
+};
 
-  const extensions = useMemo(() => [_extensions, commandMenu].filter(isNotFalsy), [_extensions, commandMenu]);
+MarkdownEditorRoot.displayName = 'MarkdownEditor.Root';
+
+//
+// MarkdownEditor.Main
+//
+
+type MarkdownEditorContentProps = Omit<NaturalMarkdownEditorContentProps, 'id' | 'extensions' | 'toolbarState'>;
+
+const MarkdownEditorContent = (props: MarkdownEditorContentProps) => {
+  const {
+    id,
+    extensions,
+    editorView,
+    setEditorView,
+    toolbarState,
+    viewMode,
+    popoverMenu: { groupsRef, ...menuProps },
+  } = useMarkdownEditorContext(MarkdownEditorContent.displayName);
 
   return (
-    <RefPopover modal={false} {...refPopoverProps}>
-      <MarkdownEditorImpl ref={viewRef} {...props} extensions={extensions} />
-      <CommandMenu groups={groupsRef.current} currentItem={currentItem} onSelect={onSelect} />
-    </RefPopover>
+    <PopoverMenuProvider view={editorView} groups={groupsRef.current} {...menuProps}>
+      <NaturalMarkdownEditorContent
+        {...props}
+        id={id}
+        extensions={extensions}
+        toolbarState={toolbarState}
+        viewMode={viewMode}
+        ref={setEditorView}
+      />
+    </PopoverMenuProvider>
   );
 };
 
-const MarkdownEditorImpl = forwardRef<EditorView | undefined, MarkdownEditorProps>(
-  (
-    {
-      id,
-      role = 'article',
-      initialValue,
-      customActions,
-      editorStateStore,
-      extensions,
-      extensionProviders,
-      scrollPastEnd,
-      toolbar,
-      viewMode,
-      onFileUpload,
-      onViewModeChange,
-    },
-    forwardedRef,
-  ) => {
-    const { t } = useTranslation(meta.id);
-    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,
-            search: 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],
-    );
-
-    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'],
-      },
-    });
-
-    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 getView = useCallback(() => {
-      invariant(editorView);
-      return editorView;
-    }, [editorView]);
-
-    const handleViewModeChange = useCallback(
-      (mode: EditorViewMode) => onViewModeChange?.(id, mode),
-      [id, onViewModeChange],
-    );
-
-    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>
-    );
-  },
-);
-
-// 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.
-const useTest = (view?: EditorView) => {
-  useEffect(() => {
-    const composer = (window as any).composer;
-    if (composer) {
-      composer.editorView = view;
-    }
-  }, [view]);
+MarkdownEditorContent.displayName = 'MarkdownEditor.Content';
+
+//
+// MarkdownEditor.Toolbar
+//
+
+type MarkdownEditorToolbarProps = Omit<
+  NaturalMarkdownToolbarProps,
+  'state' | 'editorView' | 'onFileUpload' | 'onViewModeChange'
+>;
+
+const MarkdownEditorToolbar = (props: MarkdownEditorToolbarProps) => {
+  const { toolbarState, ...rootProps } = useMarkdownEditorContext(MarkdownEditorToolbar.displayName);
+
+  return <NaturalMarkdownToolbar {...props} {...rootProps} state={toolbarState} />;
+};
+
+MarkdownEditorToolbar.displayName = 'MarkdownEditor.Toolbar';
+
+//
+// MarkdownEditor.Blocks (embedded objects)
+//
+
+type MarkdownEditorBlocksProps = {};
+
+const MarkdownEditorBlocks = (_props: MarkdownEditorBlocksProps) => {
+  const { previewBlocks } = useMarkdownEditorContext(MarkdownEditorBlocks.displayName);
+
+  return (
+    <>
+      {previewBlocks.map(({ link, el }) => (
+        <PreviewBlock key={link.ref} link={link} el={el} />
+      ))}
+    </>
+  );
+};
+
+MarkdownEditorBlocks.displayName = 'MarkdownEditor.Blocks';
+
+const PreviewBlock = ({ el, link }: PreviewBlock) => {
+  const client = useClient();
+  const dxn = DXN.parse(link.ref);
+  const subject = client.graph.ref(dxn).target;
+  const data = useMemo(() => ({ subject }), [subject]);
+
+  return createPortal(<Surface role='card--transclusion' data={data} limit={1} />, el);
+};
+
+//
+// MarkdownEditor
+//
+
+export const MarkdownEditor = {
+  Root: MarkdownEditorRoot,
+  Content: MarkdownEditorContent,
+  Toolbar: MarkdownEditorToolbar,
+  Blocks: MarkdownEditorBlocks,
+};
+
+export type {
+  MarkdownEditorRootProps,
+  MarkdownEditorContentProps,
+  MarkdownEditorToolbarProps,
+  MarkdownEditorBlocksProps,
 };

package/src/components/MarkdownEditor/MarkdownEditorContent.tsx

@@ -0,0 +1,134 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo } from 'react';
+
+import { type Live } from '@dxos/live-object';
+import { useDynamicRef, useThemeContext, useTranslation } from '@dxos/react-ui';
+import {
+  type EditorSelectionState,
+  type EditorStateStore,
+  type EditorToolbarState,
+  type EditorViewMode,
+  type PopoverMenuGroup,
+  type UseTextEditorProps,
+  createBasicExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
+  dropFile,
+  editorGutter,
+  editorSlots,
+  formattingListener,
+  processEditorPayload,
+  stackItemContentEditorClassNames,
+  useTextEditor,
+} from '@dxos/react-ui-editor';
+import { isTruthy } from '@dxos/util';
+
+import { useSelectCurrentThread } from '../../hooks';
+import { meta } from '../../meta';
+
+import { type MarkdownEditorToolbarProps } from './MarkdownEditorToolbar';
+
+export type MarkdownEditorContentProps = {
+  id: string;
+  role?: string;
+  viewMode?: EditorViewMode;
+  scrollPastEnd?: boolean;
+  slashCommandGroups?: PopoverMenuGroup[];
+  editorStateStore?: EditorStateStore;
+  toolbarState?: Live<EditorToolbarState>;
+  onLinkQuery?: (query?: string) => Promise<PopoverMenuGroup[]>;
+} & (Pick<UseTextEditorProps, 'initialValue' | 'extensions'> & Pick<MarkdownEditorToolbarProps, 'onFileUpload'>);
+
+export const MarkdownEditorContent = forwardRef<EditorView | null, MarkdownEditorContentProps>(
+  (
+    { id, role, initialValue, editorStateStore, toolbarState, extensions, viewMode, scrollPastEnd, onFileUpload },
+    forwardedRef,
+  ) => {
+    const { t } = useTranslation(meta.id);
+    const { themeMode } = useThemeContext();
+
+    // TODO(burdon): Toolbar state is not reactive.
+    const toolbarStateRef = useDynamicRef(toolbarState);
+
+    // Restore last selection and scroll point.
+    const { scrollTo, selection } = useMemo<EditorSelectionState>(() => editorStateStore?.getState(id) ?? {}, [id]);
+
+    const {
+      parentRef,
+      view: editorView,
+      focusAttributes,
+    } = useTextEditor(
+      () => ({
+        ...(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,
+        }),
+        initialValue,
+        extensions: [
+          createBasicExtensions({
+            readOnly: viewMode === 'readonly',
+            placeholder: t('editor placeholder'),
+            scrollPastEnd: scrollPastEnd && role !== 'section',
+            search: true,
+          }),
+          createThemeExtensions({
+            themeMode,
+            slots: editorSlots,
+            syntaxHighlighting: true,
+          }),
+          createMarkdownExtensions(),
+          formattingListener(() => toolbarStateRef.current),
+          editorGutter,
+          role !== 'section' &&
+            onFileUpload &&
+            dropFile({
+              // TODO(wittjosiah): Factor out to file uploader plugin.
+              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 });
+                }
+              },
+            }),
+          extensions,
+        ].filter(isTruthy),
+      }),
+      [id, viewMode, themeMode, extensions],
+    );
+
+    useImperativeHandle<EditorView | null, EditorView | null>(forwardedRef, () => editorView, [editorView]);
+    useSelectCurrentThread(editorView, id);
+    useTest(editorView);
+
+    return (
+      <div
+        role='none'
+        ref={parentRef}
+        data-testid='composer.markdownRoot'
+        className={stackItemContentEditorClassNames(role)}
+        data-popover-collision-boundary={true}
+        {...focusAttributes}
+      />
+    );
+  },
+);
+
+// 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.
+const useTest = (view: EditorView | null) => {
+  useEffect(() => {
+    const composer = (window as any).composer;
+    if (composer) {
+      composer.editorView = view;
+    }
+  }, [view]);
+};