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

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

@@ -2,43 +2,75 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
-import React, { useMemo } from 'react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
 
 import { IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { createDocAccessor, createObject } from '@dxos/react-client/echo';
-import { withAttention } from '@dxos/react-ui-attention/testing';
-import { automerge, translations as editorTranslations } from '@dxos/react-ui-editor';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { Filter, Obj } from '@dxos/echo';
+import { AttentionPlugin } from '@dxos/plugin-attention';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { useQuery, useSpace } from '@dxos/react-client/echo';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { useAttentionAttributes } from '@dxos/react-ui-attention';
+import { translations as editorTranslations } from '@dxos/react-ui-editor';
+import { StackItem } from '@dxos/react-ui-stack';
 
-import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
 import { translations } from '../../translations';
+import { Markdown } from '../../types';
+
+import { MarkdownEditor, type MarkdownEditorRootProps } from './MarkdownEditor';
 
 const content = Array.from({ length: 100 }, (_, i) => `Line ${i + 1}`).join('\n');
 
-type StoryProps = MarkdownEditorProps & {
-  content?: string;
-  toolbar?: boolean;
-};
+type StoryProps = Omit<MarkdownEditorRootProps, 'id' | 'extensions'>;
+
+const DefaultStory = (props: StoryProps) => {
+  const space = useSpace();
+  const [doc] = useQuery(space?.db, Filter.type(Markdown.Document));
+  const id = doc && Obj.getDXN(doc).toString();
+  const attentionAttrs = useAttentionAttributes(id);
+
+  if (!id) {
+    return null;
+  }
 
-const DefaultStory = ({ content = '# Test', toolbar }: StoryProps) => {
-  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} />;
+  return (
+    <div className='contents' {...attentionAttrs}>
+      <StackItem.Content toolbar>
+        <MarkdownEditor.Root id={id} object={doc} {...props}>
+          <MarkdownEditor.Toolbar id={id} />
+          <MarkdownEditor.Content />
+        </MarkdownEditor.Root>
+      </StackItem.Content>
+    </div>
+  );
 };
 
-const meta: Meta<typeof MarkdownEditor> = {
+const meta: Meta<typeof DefaultStory> = {
   title: 'plugins/plugin-markdown/MarkdownEditor',
-  component: MarkdownEditor,
-  render: DefaultStory,
+  component: DefaultStory,
+  render: DefaultStory as any,
   decorators: [
-    withPluginManager({ plugins: [IntentPlugin()] }),
-    withAttention,
     withTheme,
-    withLayout({ fullscreen: true }),
+    withLayout({ container: 'column' }),
+    // TODO(burdon): Create story without client.
+    withPluginManager({
+      plugins: [
+        ClientPlugin({
+          types: [Markdown.Document],
+          onClientInitialized: async ({ client }) => {
+            await client.halo.createIdentity();
+            await client.spaces.waitUntilReady();
+            const space = client.spaces.default;
+            await space.waitUntilReady();
+            space.db.add(Markdown.make({ content }));
+          },
+        }),
+        IntentPlugin(),
+        AttentionPlugin(),
+      ],
+    }),
   ],
   parameters: {
     translations: [...translations, ...editorTranslations],
@@ -47,15 +79,6 @@ const meta: Meta<typeof MarkdownEditor> = {
 
 export default meta;
 
-export const Default = {
-  args: {
-    content,
-  },
-};
+type Story = StoryObj<typeof meta>;
 
-export const WithToolbar = {
-  args: {
-    toolbar: true,
-    content,
-  },
-};
+export const Default: Story = {};

package/src/components/MarkdownEditor/MarkdownEditor.tsx

@@ -1,294 +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, 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 { 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/react';
+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 UseTextEditorProps,
-  addLink,
-  createElement,
-  coreSlashCommands,
-  createBasicExtensions,
-  createMarkdownExtensions,
-  createThemeExtensions,
-  dropFile,
-  editorGutter,
-  editorSlots,
-  filterItems,
-  linkSlashCommands,
-  processEditorPayload,
-  stackItemContentEditorClassNames,
-  useEditorToolbarState,
-  useFormattingState,
-  useTextEditor,
-  useCommandMenu,
-  type UseCommandMenuOptions,
+  EditorMenuProvider,
+  type EditorToolbarState,
+  type PreviewBlock,
+  type PreviewOptions,
+  type UseEditorMenu,
+  useEditorMenu,
+  useEditorToolbar,
 } from '@dxos/react-ui-editor';
-import { StackItem } from '@dxos/react-ui-stack';
-import { isNotFalsy, isNonNullable } from '@dxos/util';
+import { isNonNullable } from '@dxos/util';
+
+import {
+  type DocumentType,
+  type ExtensionsOptions,
+  type UseEditorMenuOptionsProps,
+  useEditorMenuOptions,
+  useExtensions,
+} from '../../hooks';
 
-import { useSelectCurrentThread } from '../../hooks';
-import { MARKDOWN_PLUGIN } 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;
-  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 = ({
-  extensions: _extensions,
+  setEditorView: (view: EditorView) => void;
+  extensions: Extension[];
+  previewBlocks: PreviewBlock[];
+  toolbarState: Live<EditorToolbarState>;
+  popoverMenu: Omit<UseEditorMenu, '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<UseEditorMenuOptionsProps, '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 = useEditorToolbar({ viewMode });
+
+  // Context menu.
+  const menuOptions = useEditorMenuOptions({
+    editorView,
+    slashCommandGroups,
+    onLinkQuery,
+  });
+  const { extension: menuExtension, ...menuProps } = useEditorMenu(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,
+    editorView,
+    setEditorView,
+    viewMode,
+    toolbarState,
+    extensions,
+    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>
+    <EditorMenuProvider view={editorView} groups={groupsRef.current} {...menuProps}>
+      <NaturalMarkdownEditorContent
+        {...props}
+        id={id}
+        viewMode={viewMode}
+        toolbarState={toolbarState}
+        extensions={extensions}
+        ref={setEditorView}
+      />
+    </EditorMenuProvider>
   );
 };
 
-const MarkdownEditorImpl = forwardRef<EditorView | undefined, MarkdownEditorProps>(
-  (
-    {
-      id,
-      role = 'article',
-      initialValue,
-      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,
-        }),
-      }),
-      [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.makeRef(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,
 };