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

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,63 +2,84 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useMemo } from 'react';
+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 { translations } from '../../translations';
+import { Markdown } from '../../types';
 
-import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
+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);
 
-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} />;
+  if (!id) {
+    return null;
+  }
+
+  // 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 = {
+const meta: Meta<typeof DefaultStory> = {
   title: 'plugins/plugin-markdown/MarkdownEditor',
-  component: MarkdownEditor as any,
-  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],
   },
-} satisfies Meta<typeof DefaultStory>;
+};
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  args: {
-    content,
-  },
-};
-
-export const WithToolbar: Story = {
-  args: {
-    toolbar: true,
-    content,
-  },
-};
+export const Default: Story = {};