@dxos/plugin-markdown 0.8.4-main.fd6878d → 0.8.4-staging.60fe92afc8

package/src/capabilities/state.ts

@@ -2,30 +2,46 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, type PluginContext, contributes } from '@dxos/app-framework';
-import { LocalStorageStore } from '@dxos/local-storage';
-import { type EditorViewMode, createEditorStateStore } from '@dxos/react-ui-editor';
-
-import { meta } from '../meta';
-import { type Markdown, type MarkdownPluginState } from '../types';
-
-import { MarkdownCapabilities } from './capabilities';
-
-export default (context: PluginContext) => {
-  const state = new LocalStorageStore<MarkdownPluginState>(meta.id, { extensionProviders: [], viewMode: {} });
-  state.prop({ key: 'viewMode', type: LocalStorageStore.json<{ [key: string]: EditorViewMode }>() });
-
-  // TODO(wittjosiah): Fold into state.
-  const editorState = createEditorStateStore(`${meta.id}/editor`);
-
-  const getViewMode = (id: string) => {
-    const defaultViewMode = context.getCapability(Capabilities.SettingsStore).getStore<Markdown.Settings>(meta.id)!
-      .value.defaultViewMode;
-    return (id && state.values.viewMode[id]) || defaultViewMode;
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { createKvsStore } from '@dxos/effect';
+import { createEditorStateStore } from '@dxos/ui-editor';
+
+import { meta } from '#meta';
+import { MarkdownCapabilities } from '#types';
+
+const createEditorViewRegistry = (): MarkdownCapabilities.EditorViewRegistry => {
+  const views = new Map<string, MarkdownCapabilities.EditorViewEntry>();
+  return {
+    register: (attendableId, view, documentId) => {
+      views.set(attendableId, { view, documentId });
+    },
+    unregister: (attendableId) => {
+      views.delete(attendableId);
+    },
+    get: (attendableId) => views.get(attendableId),
   };
-
-  const setViewMode = (id: string, viewMode: EditorViewMode) => (state.values.viewMode[id] = viewMode);
-
-  // Return object with methods.
-  return contributes(MarkdownCapabilities.State, { state: state.values, editorState, getViewMode, setViewMode });
 };
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    // Persisted state using KVS store.
+    const stateAtom = createKvsStore({
+      key: `${meta.id}.state`,
+      schema: MarkdownCapabilities.StateSchema,
+      defaultValue: () => ({ viewMode: {} }),
+    });
+
+    // TODO(wittjosiah): Fold into state.
+    const editorState = createEditorStateStore(`${meta.id}.editor`);
+
+    const editorViews = createEditorViewRegistry();
+
+    return [
+      Capability.contributes(MarkdownCapabilities.State, stateAtom),
+      Capability.contributes(MarkdownCapabilities.EditorState, editorState),
+      Capability.contributes(MarkdownCapabilities.EditorViews, editorViews),
+    ];
+  }),
+);

package/src/components/MarkdownEditor/FileUpload.tsx

@@ -0,0 +1,68 @@
+//
+// 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-toolkit';
+import { addLink } from '@dxos/ui-editor';
+
+export const IMAGE_FILES = ['.jpg', '.jpeg', '.png', '.gif'];
+
+export type FileUploadAction = () => void;
+
+export type FileUploadProps = {
+  // Provided as a getter (not a value prop) so the live `EditorView` is never carried in a React prop
+  // that React 19.2's dev render-logger would walk into a cross-origin frame. See
+  // `react-ui-editor/.../controller.ts` for the full rationale.
+  getView?: () => EditorView | null;
+  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>(({ getView, 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 (acceptedFiles.length && onFileUpload) {
+      requestAnimationFrame(async () => {
+        const editorView = getView?.();
+        if (!editorView) {
+          return;
+        }
+        // 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);
+        }
+      });
+    }
+  }, [getView, acceptedFiles, onFileUpload]);
+
+  if (!onFileUpload) {
+    return null;
+  }
+
+  return <>{createPortal(<input ref={inputRef} />, document.body)} </>;
+});

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

@@ -2,44 +2,79 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React from 'react';
 
-import { type Meta } from '@storybook/react-vite';
-import React, { useMemo } 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 { ClientPlugin } from '@dxos/plugin-client/testing';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { corePlugins } from '@dxos/plugin-testing';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
+import { Panel } from '@dxos/react-ui';
+import { AttendableContainer } from '@dxos/react-ui-attention';
+import { Editor } from '@dxos/react-ui-editor';
+import { translations as editorTranslations } from '@dxos/react-ui-editor/translations';
+import { Loading, withLayout } from '@dxos/react-ui/testing';
+import { Text } from '@dxos/schema';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+import { Markdown } from '#types';
 
-import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
+import { MarkdownEditor, MarkdownEditorProvider, type MarkdownEditorProviderProps } from './MarkdownEditor';
 
-const content = Array.from({ length: 100 }, (_, i) => `Line ${i + 1}`).join('\n');
+type DefaultStoryProps = Omit<MarkdownEditorProviderProps, 'id' | 'extensions' | 'children'>;
 
-type StoryProps = MarkdownEditorProps & {
-  content?: string;
-  toolbar?: boolean;
-};
+const DefaultStory = (props: DefaultStoryProps) => {
+  const [space] = useSpaces();
+  const [doc] = useQuery(space?.db, Filter.type(Markdown.Document));
+  const id = doc && Obj.getURI(doc);
+  if (!id) {
+    return <Loading data={{ 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} />;
+  return (
+    <AttendableContainer id={id} tabIndex={0} classNames='dx-container'>
+      <MarkdownEditorProvider id={id} object={doc} {...props}>
+        {(editorRootProps) => (
+          <Editor.Root {...editorRootProps}>
+            <Panel.Root>
+              <Panel.Toolbar asChild>
+                <MarkdownEditor.Toolbar />
+              </Panel.Toolbar>
+              <Panel.Content asChild>
+                <MarkdownEditor.Content />
+              </Panel.Content>
+            </Panel.Root>
+          </Editor.Root>
+        )}
+      </MarkdownEditorProvider>
+    </AttendableContainer>
+  );
 };
 
-const meta: Meta<typeof MarkdownEditor> = {
-  title: 'plugins/plugin-markdown/MarkdownEditor',
-  component: MarkdownEditor,
+const meta: Meta<typeof DefaultStory> = {
+  title: 'plugins/plugin-markdown/components/MarkdownEditor',
   render: DefaultStory,
   decorators: [
-    withPluginManager({ plugins: [IntentPlugin()] }),
-    withAttention,
-    withTheme,
-    withLayout({ fullscreen: true }),
+    withLayout({ layout: 'column' }),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        // TODO(burdon): Try to write story without ClientPlugin.
+        ClientPlugin({
+          types: [Markdown.Document, Text.Text],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              const { personalSpace } = yield* initializeIdentity(client);
+              personalSpace.db.add(
+                Markdown.make({ content: Array.from({ length: 100 }, (_, i) => `Line ${i + 1}`).join('\n') }),
+              );
+            }),
+        }),
+      ],
+    }),
   ],
   parameters: {
     translations: [...translations, ...editorTranslations],
@@ -48,15 +83,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 = {};