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

package/src/components/MarkdownContainer.stories.tsx

@@ -2,102 +2,135 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
 
-import { Capabilities, contributes, IntentPlugin, SettingsPlugin, Surface } from '@dxos/app-framework';
+import { type Capabilities, IntentPlugin, LayoutAction, SettingsPlugin, createIntent } from '@dxos/app-framework';
+import { Surface, useIntentDispatcher } from '@dxos/app-framework/react';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { todo } from '@dxos/debug';
-import { Obj, Query, Ref, Type } from '@dxos/echo';
+import { Obj, Query } from '@dxos/echo';
 import { AttentionPlugin } from '@dxos/plugin-attention';
 import { ClientPlugin } from '@dxos/plugin-client';
 import { GraphPlugin } from '@dxos/plugin-graph';
 import { PreviewPlugin } from '@dxos/plugin-preview';
-import { SpaceCapabilities, SpacePlugin } from '@dxos/plugin-space';
+import { SpacePlugin } from '@dxos/plugin-space';
 import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
 import { ThemePlugin } from '@dxos/plugin-theme';
 import { faker } from '@dxos/random';
 import { useQuery, useSpace } from '@dxos/react-client/echo';
+import { useAsyncEffect } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { useAttentionAttributes } from '@dxos/react-ui-attention';
 import { defaultTx } from '@dxos/react-ui-theme';
-import { DataType } from '@dxos/schema';
-import { createObjectFactory, Testing, type ValueGenerator } from '@dxos/schema/testing';
-import { withLayout } from '@dxos/storybook-utils';
+import { Text } from '@dxos/schema';
+import { type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
+import { Organization, Person } from '@dxos/types';
 
 import { MarkdownPlugin } from '../MarkdownPlugin';
 import { translations } from '../translations';
-import { DocumentType } from '../types';
+import { Markdown } from '../types';
 
 faker.seed(1);
 
 const generator: ValueGenerator = faker as any;
 
 const DefaultStory = () => {
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const space = useSpace();
-  const [doc] = useQuery(space, Query.type(DocumentType));
+  const [doc] = useQuery(space, Query.type(Markdown.Document));
   const data = useMemo(() => ({ subject: doc }), [doc]);
+  const id = doc && Obj.getDXN(doc).toString();
+  const attentionAttrs = useAttentionAttributes(id);
+
+  useAsyncEffect(async () => {
+    if (space) {
+      await dispatch(
+        createIntent(LayoutAction.SwitchWorkspace, {
+          part: 'workspace',
+          subject: space.id,
+        }),
+      );
+    }
+  }, [space, dispatch]);
 
-  return <Surface role='article' data={data} />;
+  return (
+    <div className='contents' {...attentionAttrs}>
+      <Surface role='article' data={data} limit={1} />
+    </div>
+  );
 };
 
-const meta: Meta<typeof DefaultStory> = {
+const meta = {
   title: 'plugins/plugin-markdown/MarkdownContainer',
   render: DefaultStory,
   decorators: [
-    withPluginManager({
+    withTheme,
+    withLayout({ container: 'column' }),
+    withPluginManager<{ title?: string; content?: string }>((context) => ({
       plugins: [
-        AttentionPlugin(),
-        ThemePlugin({ tx: defaultTx }),
-        StorybookLayoutPlugin(),
         ClientPlugin({
-          types: [DocumentType, DataType.Text, Testing.Contact],
-          onClientInitialized: async (_, client) => {
+          types: [Markdown.Document, Text.Text, Person.Person, Organization.Organization],
+          onClientInitialized: async ({ client }) => {
             await client.halo.createIdentity();
             await client.spaces.waitUntilReady();
             await client.spaces.default.waitUntilReady();
+
             const space = client.spaces.default;
-            const doc = Obj.make(DocumentType, {
-              name: 'Test',
-              content: Ref.make(Obj.make(DataType.Text, { content: '# Test\n\n' })),
-            });
-            space.db.add(doc);
             const createObjects = createObjectFactory(space.db, generator);
-            await createObjects([{ type: Testing.Contact, count: 10 }]);
+            await createObjects([{ type: Organization.Organization, count: 10 }]);
+
+            const queue = space.queues.create();
+            const kai = Obj.make(Person.Person, { fullName: 'Kai' });
+            const dxos = Obj.make(Organization.Organization, { name: 'DXOS' });
+            await queue.append([kai, dxos]);
+
+            space.db.add(
+              Markdown.make({
+                name: context.args.title ?? 'Testing',
+                content: [
+                  `# ${context.args.title ?? 'Testing'}`,
+                  context.args.content ?? '',
+                  // TODO(burdon): Popovers not currently working.
+                  '## Here are some objects',
+                  `![Alice](${Obj.getDXN(kai)})`,
+                  `![DXOS](${Obj.getDXN(dxos)})`,
+                  '',
+                  'END',
+                  '',
+                ].join('\n\n'),
+              }),
+            );
+
             await space.db.flush({ indexes: true });
           },
         }),
-        SpacePlugin(),
-        SettingsPlugin(),
+        SpacePlugin({}),
+        GraphPlugin(),
         IntentPlugin(),
+        SettingsPlugin(),
+        // UI
+        ThemePlugin({ tx: defaultTx }),
+        AttentionPlugin(),
         MarkdownPlugin(),
         PreviewPlugin(),
-        GraphPlugin(),
-      ],
-      capabilities: [
-        // NOTE: Editor only queries for object form schemas when linking.
-        contributes(SpaceCapabilities.ObjectForm, {
-          objectSchema: Testing.Contact,
-          getIntent: () => todo(),
-        }),
-        contributes(Capabilities.Metadata, {
-          id: Type.getTypename(Testing.Contact),
-          metadata: {
-            icon: 'ph--user--regular',
-          },
-        }),
+        StorybookLayoutPlugin({}),
       ],
-    }),
-    withLayout({ fullscreen: true }),
+    })),
   ],
   parameters: {
-    translations,
+    layout: 'fullscreen',
     controls: { disable: true },
+    translations,
   },
-};
+} satisfies Meta<typeof Capabilities>;
 
 export default meta;
 
-type Story = Meta<typeof DefaultStory>;
+type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    title: 'Testing',
+    content: ['This is a line with **some** formatting.'].join('\n\n'),
+  },
+};

package/src/components/MarkdownContainer.tsx

@@ -2,253 +2,107 @@
 // Copyright 2024 DXOS.org
 //
 
-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 { type Extension } from '@codemirror/state';
+import { Atom } from '@effect-atom/atom-react';
+import React, { forwardRef, useMemo } from 'react';
+
+import { Capabilities } from '@dxos/app-framework';
+import { useAppGraph, useCapabilities } from '@dxos/app-framework/react';
+import { Obj } from '@dxos/echo';
+import { 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 { DataType } from '@dxos/schema';
-
-import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
-import { useExtensions } from '../extensions';
-import { DocumentType, type MarkdownSettingsProps } from '../types';
-import { getFallbackName } from '../util';
-
-export type MarkdownContainerProps = Pick<
-  MarkdownEditorProps,
-  'role' | 'extensionProviders' | 'viewMode' | 'editorStateStore' | 'onViewModeChange'
-> & {
-  id: string;
-  object: DocumentType | DataType.Text | any;
-  settings: MarkdownSettingsProps;
-  selectionManager?: SelectionManager;
-};
-
-const MarkdownContainer = ({
-  id,
-  role,
-  object,
-  settings,
-  selectionManager,
-  viewMode,
-  editorStateStore,
-  onViewModeChange,
-}: MarkdownContainerProps) => {
-  const { t } = useTranslation();
-  const scrollPastEnd = role === 'article';
-  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 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} />
-      ))}
-    </>
-  );
-};
+import { StackItem } from '@dxos/react-ui-stack';
+import { Text } from '@dxos/schema';
 
-// 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]);
+import { MarkdownCapabilities } from '../capabilities';
+import { type DocumentType, useLinkQuery } from '../hooks';
+import { Markdown, type MarkdownPluginState } from '../types';
 
-  return createPortal(<Surface role='card--transclusion' data={data} limit={1} />, el);
-};
+import { MarkdownEditor, type MarkdownEditorContentProps, type MarkdownEditorRootProps } from './MarkdownEditor';
 
-type DocumentEditorProps = Omit<MarkdownContainerProps, 'object' | 'extensionProviders' | 'editorStateStore'> &
-  Pick<MarkdownEditorProps, 'id' | 'scrollPastEnd' | 'extensions' | 'onLinkQuery'> & {
-    document: DocumentType;
-  };
-
-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 fallbackName = doc.content?.target?.content ? getFallbackName(doc.content.target.content) : undefined;
-    if (fallbackName) {
-      doc.fallbackName = fallbackName;
-    }
-  }, [doc, doc.content]);
-
-  // 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]);
-
-  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 })) };
-    });
-  }, [graph]);
-
-  return (
-    <MarkdownEditor
-      id={id}
-      initialValue={doc.content?.target?.content}
-      viewMode={viewMode}
-      toolbar={settings.toolbar}
-      customActions={customActions}
-      inputMode={settings.editorInputMode}
-      onFileUpload={handleFileUpload}
-      {...props}
-    />
-  );
-};
+export type MarkdownContainerProps = {
+  role?: string;
+  object: DocumentType;
+  settings: Markdown.Settings;
+  selectionManager?: SelectionManager;
+} & (Pick<MarkdownEditorRootProps, 'id' | 'viewMode' | 'onViewModeChange'> &
+  Pick<MarkdownEditorContentProps, 'editorStateStore'> &
+  Pick<MarkdownPluginState, 'extensionProviders'>);
+
+export const MarkdownContainer = forwardRef<HTMLDivElement, MarkdownContainerProps>(
+  ({ id, role, object, settings, extensionProviders, ...props }, forwardedRef) => {
+    const space = getSpace(object);
+    const isDocument = Obj.instanceOf(Markdown.Document, object);
+    const isText = Obj.instanceOf(Text.Text, object);
+    const attendableId = isDocument ? Obj.getDXN(object).toString() : 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 [];
+      }
+
+      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);
+          }
+
+          return acc;
+        }, []);
+    }, [extensionProviders, otherExtensionProviders, object]);
+
+    // Toolbar actions from app graph.
+    const { graph } = useAppGraph();
+    const customActions = useMemo(() => {
+      return Atom.make((get) => {
+        const actions = get(graph.actions(id));
+        const nodes = actions.filter((action) => action.properties.disposition === 'toolbar');
+        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 (
+      <StackItem.Content toolbar={settings.toolbar} ref={forwardedRef}>
+        <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>
+    );
+  },
+);
 
 export default MarkdownContainer;

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)} </>;
+  },
+);