@dxos/plugin-markdown 0.7.4-staging.f7e8224 → 0.7.5-feature-compute.4d9d99a

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,73 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { createSurface, contributes, Capabilities, useCapability } from '@dxos/app-framework';
+import { fullyQualifiedId } from '@dxos/react-client/echo';
+
+import { MarkdownCapabilities } from './capabilities';
+import { MarkdownContainer, MarkdownSettings } from '../components';
+import { MARKDOWN_PLUGIN } from '../meta';
+import { DocumentType, isEditorModel, type MarkdownSettingsProps } from '../types';
+
+export default () =>
+  contributes(Capabilities.ReactSurface, [
+    createSurface({
+      id: `${MARKDOWN_PLUGIN}/document`,
+      role: ['article', 'section'],
+      filter: (data): data is { subject: DocumentType } => data.subject instanceof DocumentType,
+      component: ({ data, role }) => {
+        const settingsStore = useCapability(Capabilities.SettingsStore);
+        const settings = settingsStore.getStore<MarkdownSettingsProps>(MARKDOWN_PLUGIN)!.value;
+        const { state, editorState, getViewMode, setViewMode } = useCapability(MarkdownCapabilities.State);
+
+        return (
+          <MarkdownContainer
+            id={fullyQualifiedId(data.subject)}
+            object={data.subject}
+            role={role}
+            settings={settings}
+            extensionProviders={state.extensionProviders}
+            viewMode={getViewMode(fullyQualifiedId(data.subject))}
+            editorStateStore={editorState}
+            onViewModeChange={setViewMode}
+          />
+        );
+      },
+    }),
+    createSurface({
+      id: `${MARKDOWN_PLUGIN}/editor`,
+      role: ['article', 'section'],
+      filter: (data): data is { subject: { id: string; text: string } } => isEditorModel(data.subject),
+      component: ({ data, role }) => {
+        const settingsStore = useCapability(Capabilities.SettingsStore);
+        const settings = settingsStore.getStore<MarkdownSettingsProps>(MARKDOWN_PLUGIN)!.value;
+        const { state, editorState, getViewMode, setViewMode } = useCapability(MarkdownCapabilities.State);
+
+        return (
+          <MarkdownContainer
+            id={data.subject.id}
+            object={data.subject}
+            role={role}
+            settings={settings}
+            extensionProviders={state.extensionProviders}
+            viewMode={getViewMode(data.subject.id)}
+            editorStateStore={editorState}
+            onViewModeChange={setViewMode}
+          />
+        );
+      },
+    }),
+    createSurface({
+      id: `${MARKDOWN_PLUGIN}/settings`,
+      role: 'settings',
+      filter: (data): data is any => data.subject === MARKDOWN_PLUGIN,
+      component: () => {
+        const settingsStore = useCapability(Capabilities.SettingsStore);
+        const settings = settingsStore.getStore<MarkdownSettingsProps>(MARKDOWN_PLUGIN)!.value;
+        return <MarkdownSettings settings={settings} />;
+      },
+    }),
+  ]);

package/src/capabilities/settings.ts

@@ -0,0 +1,25 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, contributes } from '@dxos/app-framework';
+import { create } from '@dxos/live-object';
+
+import { MARKDOWN_PLUGIN } from '../meta';
+import { type MarkdownSettingsProps, MarkdownSettingsSchema } from '../types';
+
+export default () => {
+  const settings = create<MarkdownSettingsProps>({
+    defaultViewMode: 'preview',
+    toolbar: true,
+    numberedHeadings: true,
+    folding: true,
+    experimental: false,
+  });
+
+  return contributes(Capabilities.Settings, {
+    schema: MarkdownSettingsSchema,
+    prefix: MARKDOWN_PLUGIN,
+    value: settings,
+  });
+};

package/src/capabilities/state.ts

@@ -0,0 +1,31 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
+import { LocalStorageStore } from '@dxos/local-storage';
+import { type EditorViewMode, createEditorStateStore } from '@dxos/react-ui-editor';
+
+import { MarkdownCapabilities } from './capabilities';
+import { MARKDOWN_PLUGIN } from '../meta';
+import { type MarkdownPluginState, type MarkdownSettingsProps } from '../types';
+
+export default (context: PluginsContext) => {
+  const state = new LocalStorageStore<MarkdownPluginState>(MARKDOWN_PLUGIN, { extensionProviders: [], viewMode: {} });
+
+  state.prop({ key: 'viewMode', type: LocalStorageStore.json<{ [key: string]: EditorViewMode }>() });
+
+  // TODO(wittjosiah): Fold into state.
+  const editorState = createEditorStateStore(`${MARKDOWN_PLUGIN}/editor`);
+
+  const getViewMode = (id: string) => {
+    const defaultViewMode = context
+      .requestCapability(Capabilities.SettingsStore)
+      .getStore<MarkdownSettingsProps>(MARKDOWN_PLUGIN)!.value.defaultViewMode;
+    return (id && state.values.viewMode[id]) || defaultViewMode;
+  };
+
+  const setViewMode = (id: string, viewMode: EditorViewMode) => (state.values.viewMode[id] = viewMode);
+
+  return contributes(MarkdownCapabilities.State, { state: state.values, editorState, getViewMode, setViewMode });
+};

package/src/capabilities/thread.ts

@@ -0,0 +1,34 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { contributes } from '@dxos/app-framework';
+import { ThreadCapabilities } from '@dxos/plugin-space';
+import { createDocAccessor, getRangeFromCursor } from '@dxos/react-client/echo';
+
+import { DocumentType } from '../types';
+
+export default () =>
+  contributes(ThreadCapabilities.Thread, {
+    predicate: (obj) => obj instanceof DocumentType,
+    createSort: (doc: DocumentType) => {
+      const accessor = doc.content.target ? createDocAccessor(doc.content.target, ['content']) : undefined;
+      if (!accessor) {
+        return (_) => 0;
+      }
+
+      const getStartPosition = (cursor: string | undefined) => {
+        const range = cursor ? getRangeFromCursor(accessor, cursor) : undefined;
+        return range?.start ?? Number.MAX_SAFE_INTEGER;
+      };
+
+      return (anchorA: string | undefined, anchorB: string | undefined): number => {
+        if (anchorA === undefined || anchorB === undefined) {
+          return 0;
+        }
+        const posA = getStartPosition(anchorA);
+        const posB = getStartPosition(anchorB);
+        return posA - posB;
+      };
+    },
+  });

package/src/components/MarkdownContainer.tsx

@@ -4,7 +4,7 @@
 
 import React, { useEffect, useMemo } from 'react';
 
-import { useResolvePlugin, parseFileManagerPlugin } from '@dxos/app-framework';
+import { Capabilities, useCapabilities } from '@dxos/app-framework';
 import { fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
 
 import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
@@ -27,7 +27,6 @@ const MarkdownContainer = ({
   id,
   role,
   object,
-  extensionProviders,
   settings,
   viewMode,
   editorStateStore,
@@ -35,7 +34,7 @@ const MarkdownContainer = ({
 }: MarkdownContainerProps) => {
   const scrollPastEnd = role === 'article';
   const doc = object instanceof DocumentType ? object : undefined;
-  const extensions = useExtensions({ extensionProviders, document: doc, settings, viewMode, editorStateStore });
+  const extensions = useExtensions({ document: doc, settings, viewMode, editorStateStore });
 
   if (doc) {
     return (
@@ -77,26 +76,31 @@ export const DocumentEditor = ({ id, document: doc, settings, viewMode, ...props
 
   // Migrate gradually to `fallbackName`.
   useEffect(() => {
-    if (!doc.fallbackName && doc.content?.content) {
-      doc.fallbackName = getFallbackName(doc.content.content);
+    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 fileManagerPlugin = useResolvePlugin(parseFileManagerPlugin);
+  const [upload] = useCapabilities(Capabilities.FileUploader);
   const handleFileUpload = useMemo(() => {
-    if (space === undefined || fileManagerPlugin?.provides.file.upload === undefined) {
+    if (space === undefined || upload === undefined) {
       return undefined;
     }
 
     // TODO(burdon): Re-order props: space, file.
-    return async (file: File) => fileManagerPlugin?.provides?.file?.upload?.(file, space);
-  }, [space, fileManagerPlugin]);
+    return async (file: File) => upload!(file, space);
+  }, [space, upload]);
 
   return (
     <MarkdownEditor
       id={id}
-      initialValue={doc.content?.content}
+      initialValue={doc.content?.target?.content}
       viewMode={viewMode}
       toolbar={settings.toolbar}
       inputMode={settings.editorInputMode}

package/src/components/MarkdownEditor.stories.tsx

@@ -7,13 +7,18 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 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 { Main } from '@dxos/react-ui';
-import { editorWithToolbarLayout, automerge } from '@dxos/react-ui-editor';
+import { AttendableContainer } from '@dxos/react-ui-attention';
+import { withAttention } from '@dxos/react-ui-attention/testing';
+import { editorWithToolbarLayout, automerge, translations as editorTranslations } from '@dxos/react-ui-editor';
 import { topbarBlockPaddingStart } from '@dxos/react-ui-theme';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
+import translations from '../translations';
 
 const content = Array.from({ length: 100 })
   .map((_, i) => `Line ${i + 1}`)
@@ -27,14 +32,15 @@ type StoryProps = MarkdownEditorProps & {
 const DefaultStory = ({ content = '# Test', toolbar }: StoryProps) => {
   const doc = useMemo(() => createObject({ content }), [content]);
   const extensions = useMemo(() => [automerge(createDocAccessor(doc, ['content']))], [doc]);
-
   return (
     <Main.Content
       bounce
       data-toolbar={toolbar ? 'enabled' : 'disabled'}
       classNames={[topbarBlockPaddingStart, editorWithToolbarLayout]}
     >
-      <MarkdownEditor id='test' initialValue={doc.content} extensions={extensions} toolbar={toolbar} />
+      <AttendableContainer id='test'>
+        <MarkdownEditor id='test' initialValue={doc.content} extensions={extensions} toolbar={toolbar} />
+      </AttendableContainer>
     </Main.Content>
   );
 };
@@ -56,8 +62,13 @@ const meta: Meta<typeof MarkdownEditor> = {
   title: 'plugins/plugin-markdown/EditorMain',
   component: MarkdownEditor,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ tooltips: true })],
-  parameters: { layout: 'fullscreen' },
+  decorators: [
+    withTheme,
+    withLayout({ tooltips: true }),
+    withAttention,
+    withPluginManager({ plugins: [IntentPlugin()] }),
+  ],
+  parameters: { layout: 'fullscreen', translations: [...translations, ...editorTranslations] },
 };
 
 export default meta;

package/src/components/MarkdownEditor.tsx

@@ -5,18 +5,18 @@
 import { openSearchPanel } from '@codemirror/search';
 import { type EditorView } from '@codemirror/view';
 import React, { useMemo, useEffect, useCallback } from 'react';
+import { useDropzone } from 'react-dropzone';
 
-import { type FileInfo, LayoutAction, NavigationAction, useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent, type FileInfo, LayoutAction, NavigationAction, useIntentDispatcher } from '@dxos/app-framework';
 import { useThemeContext, useTranslation } from '@dxos/react-ui';
-import { useAttention } from '@dxos/react-ui-attention';
 import {
-  type Action,
+  type EditorAction,
   type DNDOptions,
   type EditorViewMode,
   type EditorInputMode,
   type EditorSelectionState,
   type EditorStateStore,
-  Toolbar,
+  EditorToolbar,
   type UseTextEditorProps,
   createBasicExtensions,
   createMarkdownExtensions,
@@ -24,23 +24,23 @@ import {
   dropFile,
   editorContent,
   editorGutter,
-  processAction,
+  processEditorPayload,
   useActionHandler,
   useCommentState,
   useCommentClickListener,
   useFormattingState,
   useTextEditor,
+  stackItemContentEditorClassNames,
+  useEditorToolbarState,
+  createEditorAction,
 } from '@dxos/react-ui-editor';
 import { StackItem } from '@dxos/react-ui-stack';
-import { mx, textBlockWidth } from '@dxos/react-ui-theme';
 import { isNotFalsy, nonNullable } from '@dxos/util';
 
 import { useSelectCurrentThread } from '../hooks';
 import { MARKDOWN_PLUGIN } from '../meta';
 import { type MarkdownPluginState } from '../types';
 
-const DEFAULT_VIEW_MODE: EditorViewMode = 'preview';
-
 export type MarkdownEditorProps = {
   id: string;
   role?: string;
@@ -75,9 +75,9 @@ export const MarkdownEditor = ({
 }: MarkdownEditorProps) => {
   const { t } = useTranslation(MARKDOWN_PLUGIN);
   const { themeMode } = useThemeContext();
-  const dispatch = useIntentDispatcher();
-  const [formattingState, formattingObserver] = useFormattingState();
-  const { hasAttention } = useAttention(id);
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const toolbarState = useEditorToolbarState({ viewMode });
+  const formattingObserver = useFormattingState(toolbarState);
 
   // Restore last selection and scroll point.
   const { scrollTo, selection } = useMemo<EditorSelectionState>(() => editorStateStore?.getState(id) ?? {}, [id]);
@@ -89,28 +89,21 @@ export const MarkdownEditor = ({
     [extensionProviders],
   );
 
-  // TODO(Zan): Move these into thread plugin as well?
-  const [commentsState, commentObserver] = useCommentState();
-  const onCommentClick = useCallback(() => {
-    void dispatch([
-      {
-        action: NavigationAction.OPEN,
-        data: { activeParts: { complementary: 'comments' } },
-      },
-      {
-        action: LayoutAction.SET_LAYOUT,
-        data: { element: 'complementary', state: true },
-      },
-    ]);
+  // TODO(Zan): Factor out to thread plugin.
+  const commentObserver = useCommentState(toolbarState);
+  const onCommentClick = useCallback(async () => {
+    await dispatch(createIntent(NavigationAction.Open, { activeParts: { complementary: 'comments' } }));
+    await dispatch(createIntent(LayoutAction.SetLayout, { element: 'complementary', state: true }));
   }, [dispatch]);
   const commentClickObserver = useCommentClickListener(onCommentClick);
 
+  // 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) {
-      processAction(view, { type: 'image', data: info.url });
+      processEditorPayload(view, { type: 'image', data: info.url });
     }
   };
 
@@ -156,57 +149,79 @@ export const MarkdownEditor = ({
   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) {
+          processEditorPayload(editorView, { type: 'image', data: info.url });
+        }
+      });
+    }
+  }, [acceptedFiles, editorView]);
+
   // Toolbar handler.
   const handleToolbarAction = useActionHandler(editorView);
-  const handleAction = (action: Action) => {
-    switch (action.type) {
-      case 'search': {
-        if (editorView) {
-          openSearchPanel(editorView);
+  const handleAction = useCallback(
+    (action: EditorAction) => {
+      switch (action.properties.type) {
+        case 'search': {
+          if (editorView) {
+            openSearchPanel(editorView);
+          }
+          return;
+        }
+        case 'view-mode': {
+          onViewModeChange?.(id, action.properties.data);
+          return;
+        }
+        case 'image': {
+          open();
+          return;
         }
-        return;
-      }
-      case 'view-mode': {
-        onViewModeChange?.(id, action.data);
-        return;
       }
-    }
 
-    handleToolbarAction?.(action);
-  };
+      handleToolbarAction?.(action);
+    },
+    [editorView, onViewModeChange, open],
+  );
 
   return (
-    <StackItem.Content toolbar={toolbar}>
+    <StackItem.Content toolbar={!!toolbar}>
       {toolbar && (
-        <div
-          role='none'
-          className={mx(
-            'attention-surface is-full border-be !border-separator',
-            role === 'section' && 'sticky block-start-0 z-[1] -mbe-px min-is-0',
-          )}
-        >
-          <Toolbar.Root
-            classNames={[textBlockWidth, !hasAttention && 'opacity-20']}
-            state={formattingState && { ...formattingState, ...commentsState }}
+        <>
+          <EditorToolbar
+            attendableId={id}
+            role={role}
+            state={toolbarState}
+            customActions={onFileUpload ? createUploadAction : undefined}
             onAction={handleAction}
-          >
-            <Toolbar.Markdown />
-            {onFileUpload && <Toolbar.Custom onUpload={onFileUpload} />}
-            <Toolbar.Separator />
-            <Toolbar.View mode={viewMode ?? DEFAULT_VIEW_MODE} />
-            <Toolbar.Actions />
-          </Toolbar.Root>
-        </div>
+          />
+          <input {...getInputProps()} />
+        </>
       )}
       <div
         role='none'
         ref={parentRef}
         data-testid='composer.markdownRoot'
         data-toolbar={toolbar ? 'enabled' : 'disabled'}
-        className={mx(
-          'ch-focus-ring-inset data-[toolbar=disabled]:pbs-2 attention-surface',
-          role === 'article' ? 'min-bs-0' : '[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24',
-        )}
+        className={stackItemContentEditorClassNames(role)}
         {...focusAttributes}
       />
     </StackItem.Content>
@@ -223,3 +238,14 @@ const useTest = (view?: EditorView) => {
     }
   }, [view]);
 };
+
+export const createUploadAction = () => ({
+  nodes: [
+    createEditorAction(
+      { type: 'image', testId: 'editor.toolbar.image' },
+      'ph--image-square--regular',
+      'upload image label',
+    ),
+  ],
+  edges: [{ source: 'root', target: 'image' }],
+});

package/src/components/Toolbar.stories.tsx

@@ -13,9 +13,8 @@ import { faker } from '@dxos/random';
 import { createDocAccessor, createObject } from '@dxos/react-client/echo';
 import { useThemeContext } from '@dxos/react-ui';
 import {
-  type Action,
+  type EditorAction,
   type Comment,
-  type EditorViewMode,
   comments,
   createBasicExtensions,
   createDataExtensions,
@@ -24,32 +23,33 @@ import {
   decorateMarkdown,
   editorContent,
   formattingKeymap,
-  Toolbar,
+  EditorToolbar,
   translations,
   useActionHandler,
   useComments,
   useFormattingState,
   useTextEditor,
+  useEditorToolbarState,
 } from '@dxos/react-ui-editor';
-import { textBlockWidth } from '@dxos/react-ui-theme';
+import { TextType } from '@dxos/schema';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { TextType } from '../types';
-
 faker.seed(101);
 
+const _onUpload = async (file: File) => ({ url: file.name });
+
 const DefaultStory: FC<{ content?: string }> = ({ content = '' }) => {
   const { themeMode } = useThemeContext();
   const [text] = useState(createObject(create(TextType, { content })));
-  const [formattingState, formattingObserver] = useFormattingState();
-  const [viewMode, setViewMode] = useState<EditorViewMode>('preview');
+  const toolbarState = useEditorToolbarState({ viewMode: 'preview' });
+  const formattingObserver = useFormattingState(toolbarState);
   const { parentRef, view } = useTextEditor(() => {
     return {
       id: text.id,
       initialValue: text.content,
       extensions: [
         formattingObserver,
-        createBasicExtensions({ readonly: viewMode === 'readonly' }),
+        createBasicExtensions({ readonly: toolbarState.viewMode === 'readonly' }),
         createMarkdownExtensions({ themeMode }),
         createThemeExtensions({ themeMode, syntaxHighlighting: true, slots: { editor: { className: editorContent } } }),
         createDataExtensions({ id: text.id, text: createDocAccessor(text, ['content']) }),
@@ -61,15 +61,15 @@ const DefaultStory: FC<{ content?: string }> = ({ content = '' }) => {
           },
         }),
         formattingKeymap(),
-        ...(viewMode !== 'source' ? [decorateMarkdown()] : []),
+        ...(toolbarState.viewMode !== 'source' ? [decorateMarkdown()] : []),
       ],
     };
-  }, [text, formattingObserver, viewMode, themeMode]);
+  }, [text, formattingObserver, toolbarState.viewMode, themeMode]);
 
   const handleToolbarAction = useActionHandler(view);
-  const handleAction = (action: Action) => {
+  const handleAction = (action: EditorAction) => {
     if (action.type === 'view-mode') {
-      setViewMode(action.data);
+      toolbarState.viewMode = action.properties.data;
     } else {
       handleToolbarAction?.(action);
     }
@@ -80,13 +80,7 @@ const DefaultStory: FC<{ content?: string }> = ({ content = '' }) => {
 
   return (
     <div role='none' className='fixed inset-0 flex flex-col'>
-      <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
-        <Toolbar.View mode={viewMode} />
-        <Toolbar.Markdown />
-        <Toolbar.Custom onUpload={async (file) => ({ url: file.name })} />
-        <Toolbar.Separator />
-        <Toolbar.Actions />
-      </Toolbar.Root>
+      <EditorToolbar onAction={handleAction} state={toolbarState ?? {}} />
       <div ref={parentRef} />
     </div>
   );
@@ -108,9 +102,9 @@ export const Default = {
   },
 };
 
-const meta: Meta<typeof Toolbar.Root> = {
+const meta: Meta<typeof EditorToolbar> = {
   title: 'plugins/plugin-markdown/Toolbar',
-  component: Toolbar.Root,
+  component: EditorToolbar,
   render: DefaultStory as any,
   decorators: [withTheme, withLayout({ tooltips: true })],
   parameters: { translations, layout: 'fullscreen' },