@dxos/plugin-markdown 0.8.4-main.67995b8 → 0.8.4-main.ae835ea

package/src/components/MarkdownContainer.tsx

@@ -2,252 +2,119 @@
 // Copyright 2024 DXOS.org
 //
 
+import { type Extension } from '@codemirror/state';
 import { Rx } from '@effect-rx/rx-react';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { createPortal } from 'react-dom';
-
-import { Capabilities, Surface, useAppGraph, useCapabilities, usePluginManager } from '@dxos/app-framework';
-import { DXN, Filter, Obj, Query, Type } from '@dxos/echo';
-import { ClientCapabilities } from '@dxos/plugin-client';
-import { SpaceCapabilities } from '@dxos/plugin-space';
-import { fullyQualifiedId, getSpace, useQuery, useSpace } from '@dxos/react-client/echo';
-import { toLocalizedString, useTranslation } from '@dxos/react-ui';
+import React, { useMemo } from 'react';
+
+import { Capabilities, useAppGraph, useCapabilities } from '@dxos/app-framework';
+import { Obj } from '@dxos/echo';
+import { fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
 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 { StackItem } from '@dxos/react-ui-stack';
 import { DataType } from '@dxos/schema';
 
-import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
-import { useExtensions } from '../extensions';
-import { Markdown } from '../types';
-import { getFallbackName } from '../util';
-
-export type MarkdownContainerProps = Pick<
-  MarkdownEditorProps,
-  'role' | 'extensionProviders' | 'viewMode' | 'editorStateStore' | 'onViewModeChange'
-> & {
-  id: string;
-  object: Markdown.Document | DataType.Text | any;
+import { MarkdownCapabilities } from '../capabilities';
+import { type DocumentType, useLinkQuery } from '../hooks';
+import { Markdown, type MarkdownPluginState } from '../types';
+
+import { MarkdownEditor, type MarkdownEditorContentProps, type MarkdownEditorRootProps } from './MarkdownEditor';
+
+export type MarkdownContainerProps = {
+  role?: string;
+  object: DocumentType;
   settings: Markdown.Settings;
   selectionManager?: SelectionManager;
-};
+} & (Pick<MarkdownEditorRootProps, 'id' | 'viewMode' | 'onViewModeChange'> &
+  Pick<MarkdownEditorContentProps, 'editorStateStore'> &
+  Pick<MarkdownPluginState, 'extensionProviders'>);
+
+// TODO(burdon): Attention doesn't update in storybook.
+// TODO(burdon): Toolbar state (currently not working in labs: e.g., heading, list, table).
+//  Heading state is correct (see react-ui-editor headings.ts, but the toolbar isn't updated).
+// TODO(burdon): View mode (currently not working in labs).
+// TODO(burdon): Test update document name.
+// TODO(burdon): Test comment threads.
+// TODO(burdon): Test preview blocks.
+// TODO(burdon): Test file upload.
 
 export const MarkdownContainer = ({
   id,
   role,
   object,
   settings,
-  selectionManager,
-  viewMode,
-  editorStateStore,
-  onViewModeChange,
+  extensionProviders,
+  ...props
 }: MarkdownContainerProps) => {
-  const { t } = useTranslation();
-  const scrollPastEnd = role === 'article';
-  const doc = Obj.instanceOf(Markdown.Document, 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 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 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 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): 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.
-    <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--transclusion' data={data} limit={1} />, el);
-};
-
-type DocumentEditorProps = Omit<MarkdownContainerProps, 'object' | 'extensionProviders' | 'editorStateStore'> &
-  Pick<MarkdownEditorProps, 'id' | 'scrollPastEnd' | 'extensions' | 'onLinkQuery'> & {
-    document: Markdown.Document;
-  };
-
-export const DocumentEditor = ({ id, document: doc, settings, viewMode, ...props }: DocumentEditorProps) => {
-  const space = getSpace(doc);
-
-  // Migrate gradually to `fallbackName`.
-  useEffect(() => {
-    if (typeof doc.fallbackName === 'string') {
-      return;
+  const isDocument = Obj.instanceOf(Markdown.Document, object);
+  const isText = Obj.instanceOf(DataType.Text, object);
+  const attendableId = isDocument ? fullyQualifiedId(object) : undefined;
+
+  // Extensions from other plugins.
+  // TODO(burdon): Document MarkdownPluginState.extensionProviders
+  const otherExtensionProviders = useCapabilities(MarkdownCapabilities.Extensions);
+  const extensions = useMemo<Extension[]>(() => {
+    if (!Obj.instanceOf(Markdown.Document, object)) {
+      return [];
     }
 
-    const fallbackName = doc.content?.target?.content ? getFallbackName(doc.content.target.content) : undefined;
-    if (fallbackName) {
-      doc.fallbackName = fallbackName;
-    }
-  }, [doc, doc.content]);
+    return [...(otherExtensionProviders ?? []), ...(extensionProviders ?? [])]
+      .flat()
+      .reduce((acc: Extension[], provider) => {
+        const extension =
+          typeof provider === 'function' ? provider({ document: object as Markdown.Document }) : provider;
+        if (extension) {
+          acc.push(extension);
+        }
 
-  // File dragging.
-  const [upload] = useCapabilities(Capabilities.FileUploader);
-  const handleFileUpload = useMemo(() => {
-    if (space === undefined || upload === undefined) {
-      return undefined;
-    }
-
-    // TODO(burdon): Re-order props: space, file.
-    return async (file: File) => upload!(file, space);
-  }, [space, upload]);
+        return acc;
+      }, []);
+  }, [extensionProviders, otherExtensionProviders, object]);
 
+  // Toolbar actions from app graph.
   const { graph } = useAppGraph();
   const customActions = useMemo(() => {
     return Rx.make((get) => {
       const actions = get(graph.actions(id));
       const nodes = actions.filter((action) => action.properties.disposition === 'toolbar');
-      return { nodes, edges: nodes.map((node) => ({ source: 'root', target: node.id })) };
+      const edges = nodes.map((node) => ({ source: 'root', target: node.id }));
+      return { nodes, edges };
     });
   }, [graph]);
 
+  // File upload.
+  const [upload] = useCapabilities(Capabilities.FileUploader);
+  const handleFileUpload = useMemo(() => {
+    if (!space || !upload) {
+      return undefined;
+    }
+
+    return async (file: File) => upload(space, file);
+  }, [space, upload]);
+
+  // Query for @ refs.
+  const handleLinkQuery = useLinkQuery(space);
+
   return (
-    <MarkdownEditor
-      id={id}
-      initialValue={doc.content?.target?.content}
-      viewMode={viewMode}
-      toolbar={settings.toolbar}
-      customActions={customActions}
-      inputMode={settings.editorInputMode}
-      onFileUpload={handleFileUpload}
-      {...props}
-    />
+    <StackItem.Content toolbar={settings.toolbar}>
+      <MarkdownEditor.Root
+        id={attendableId ?? id}
+        object={object}
+        extensions={extensions}
+        onFileUpload={handleFileUpload}
+        onLinkQuery={handleLinkQuery}
+        {...props}
+      >
+        {settings.toolbar && (
+          <MarkdownEditor.Toolbar id={attendableId ?? id} role={role} customActions={customActions} />
+        )}
+        <MarkdownEditor.Content
+          initialValue={isDocument ? object.content?.target?.content : isText ? object.content : object.text}
+          scrollPastEnd={role === 'article'}
+        />
+        <MarkdownEditor.Blocks />
+      </MarkdownEditor.Root>
+    </StackItem.Content>
   );
 };
 

package/src/components/MarkdownEditor/FileUpload.tsx

@@ -0,0 +1,63 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
+import { createPortal } from 'react-dom';
+import { useDropzone } from 'react-dropzone';
+
+import { type FileInfo } from '@dxos/app-framework';
+import { addLink } from '@dxos/react-ui-editor';
+
+export const IMAGE_FILES = ['.jpg', '.jpeg', '.png', '.gif'];
+
+export type FileUploadAction = () => void;
+
+export type FileUploadProps = {
+  editorView?: EditorView;
+  onFileUpload?: (file: File) => Promise<FileInfo | undefined>;
+};
+
+// TODO(burdon): Factor out.
+// TODO(burdon): Move to root? (support drag into document via dropzone).
+export const FileUpload = forwardRef<FileUploadAction, FileUploadProps>(
+  ({ editorView, onFileUpload }, forwardedRef) => {
+    // https://react-dropzone.js.org
+    const { acceptedFiles, open, inputRef } = useDropzone({
+      disabled: !onFileUpload,
+      multiple: false,
+      noDrag: true,
+      accept: {
+        'image/*': IMAGE_FILES,
+      },
+    });
+
+    useImperativeHandle(forwardedRef, () => open, []);
+
+    useEffect(() => {
+      if (editorView && acceptedFiles.length && onFileUpload) {
+        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,
+          });
+
+          // TODO(burdon): Factor out.
+          const info = await onFileUpload(file);
+          if (info) {
+            addLink({ url: info.url, image: true })(editorView);
+          }
+        });
+      }
+    }, [editorView, acceptedFiles, onFileUpload]);
+
+    if (!onFileUpload) {
+      return null;
+    }
+
+    return <>{createPortal(<input ref={inputRef} />, document.body)} </>;
+  },
+);

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

@@ -2,43 +2,76 @@
 // 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 } from '@dxos/echo';
+import { AttentionPlugin } from '@dxos/plugin-attention';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { fullyQualifiedId, 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 && fullyQualifiedId(doc);
+  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} />;
+  // TODO(burdon): Toolbar attention isn't working in this story.
+  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.makeDocument({ content }));
+          },
+        }),
+        IntentPlugin(),
+        AttentionPlugin(),
+      ],
+    }),
   ],
   parameters: {
     translations: [...translations, ...editorTranslations],
@@ -47,15 +80,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 = {};