@dxos/plugin-markdown 0.7.5-main.9cb18ac → 0.7.5-main.9d2a38b

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 { 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;
@@ -76,8 +76,8 @@ export const MarkdownEditor = ({
   const { t } = useTranslation(MARKDOWN_PLUGIN);
   const { themeMode } = useThemeContext();
   const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const [formattingState, formattingObserver] = useFormattingState();
-  const { hasAttention } = useAttention(id);
+  const toolbarState = useEditorToolbarState({ viewMode });
+  const formattingObserver = useFormattingState(toolbarState);
 
   // Restore last selection and scroll point.
   const { scrollTo, selection } = useMemo<EditorSelectionState>(() => editorStateStore?.getState(id) ?? {}, [id]);
@@ -89,20 +89,21 @@ export const MarkdownEditor = ({
     [extensionProviders],
   );
 
-  // TODO(Zan): Move these into thread plugin as well?
-  const [commentsState, commentObserver] = useCommentState();
+  // 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 });
     }
   };
 
@@ -148,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>
@@ -215,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' },

package/src/extensions.tsx

@@ -5,7 +5,13 @@
 import React, { type AnchorHTMLAttributes, type ReactNode, useMemo } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { createIntent, NavigationAction, type PromiseIntentDispatcher, useIntentDispatcher } from '@dxos/app-framework';
+import {
+  createIntent,
+  NavigationAction,
+  type PromiseIntentDispatcher,
+  useCapabilities,
+  useIntentDispatcher,
+} from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
 import { createDocAccessor, fullyQualifiedId, getSpace, type Query } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
@@ -29,7 +35,8 @@ import {
 import { defaultTx } from '@dxos/react-ui-theme';
 import { isNotFalsy } from '@dxos/util';
 
-import { type DocumentType, type MarkdownPluginState, type MarkdownSettingsProps } from './types';
+import { MarkdownCapabilities } from './capabilities';
+import { type DocumentType, type MarkdownSettingsProps } from './types';
 import { setFallbackName } from './util';
 
 type ExtensionsOptions = {
@@ -42,13 +49,7 @@ type ExtensionsOptions = {
 };
 
 // TODO(burdon): Merge with createBaseExtensions below.
-export const useExtensions = ({
-  document,
-  settings,
-  viewMode,
-  editorStateStore,
-  extensionProviders,
-}: ExtensionsOptions & Pick<MarkdownPluginState, 'extensionProviders'>): Extension[] => {
+export const useExtensions = ({ document, settings, viewMode, editorStateStore }: ExtensionsOptions): Extension[] => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const identity = useIdentity();
   const space = getSpace(document);
@@ -79,12 +80,14 @@ export const useExtensions = ({
     ],
   );
 
+  const extensionProviders = useCapabilities(MarkdownCapabilities.Extensions);
+
   //
   // External extensions from other plugins.
   //
   const pluginExtensions = useMemo<Extension[] | undefined>(
     () =>
-      extensionProviders?.reduce((acc: Extension[], provider) => {
+      extensionProviders.flat().reduce((acc: Extension[], provider) => {
         const extension = typeof provider === 'function' ? provider({ document }) : provider;
         if (extension) {
           acc.push(extension);

package/src/index.ts

@@ -2,10 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { MarkdownPlugin } from './MarkdownPlugin';
-
-export default MarkdownPlugin;
-
+export { MarkdownCapabilities } from './capabilities';
 export * from './MarkdownPlugin';
-export * from './types';
+export * from './meta';
 export * from './util';

package/src/meta.ts

@@ -6,7 +6,7 @@ import { type PluginMeta } from '@dxos/app-framework';
 
 export const MARKDOWN_PLUGIN = 'dxos.org/plugin/markdown';
 
-export default {
+export const meta = {
   id: MARKDOWN_PLUGIN,
   name: 'Markdown',
   description: 'Text editor supporting extended Markdown.',

package/src/translations.ts

@@ -34,6 +34,7 @@ export default [
         'settings debug placeholder': 'Typewriter script...',
         'toggle view mode label': 'Toggle read-only',
         'default view mode label': 'Default view mode',
+        'upload image label': 'Upload Image',
       },
     },
   },

package/src/types/schema.ts

@@ -4,11 +4,7 @@
 
 import { Ref, S, TypedObject } from '@dxos/echo-schema';
 import { ThreadType } from '@dxos/plugin-space/types';
-
-// TODO(burdon): Factor out.
-export class TextType extends TypedObject({ typename: 'dxos.org/type/Text', version: '0.1.0' })({
-  content: S.String,
-}) {}
+import { TextType } from '@dxos/schema';
 
 export class DocumentType extends TypedObject({ typename: 'dxos.org/type/Document', version: '0.1.0' })({
   name: S.optional(S.String),

package/src/types/types.ts

@@ -2,17 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import type {
-  GraphSerializerProvides,
-  IntentResolverProvides,
-  MetadataRecordsProvides,
-  SettingsProvides,
-  SurfaceProvides,
-  TranslationsProvides,
-} from '@dxos/app-framework';
 import { S } from '@dxos/echo-schema';
-import { type SchemaProvides } from '@dxos/plugin-space';
-import { type Extension, type EditorInputMode, EditorViewMode } from '@dxos/react-ui-editor';
+// TODO(wittjosiah): This pulls in UI code into the types entrypoint.
+import { type Extension, EditorInputMode, EditorViewMode } from '@dxos/react-ui-editor';
 
 import { DocumentType } from './schema';
 import { MARKDOWN_PLUGIN } from '../meta';
@@ -46,13 +38,6 @@ export type MarkdownExtensionProvider = (props: { document?: DocumentType }) =>
 
 export type OnChange = (text: string) => void;
 
-export type MarkdownExtensionProvides = {
-  // TODO(burdon): Rename.
-  markdown: {
-    extensions: MarkdownExtensionProvider;
-  };
-};
-
 export type MarkdownPluginState = {
   // Codemirror extensions provided by other plugins.
   extensionProviders?: MarkdownExtensionProvider[];
@@ -62,31 +47,18 @@ export type MarkdownPluginState = {
   viewMode: Record<string, EditorViewMode>;
 };
 
-export type MarkdownSettingsProps = {
-  defaultViewMode: EditorViewMode;
-  editorInputMode?: EditorInputMode;
-  experimental?: boolean;
-  debug?: boolean;
-  toolbar?: boolean;
-  typewriter?: string;
-  // TODO(burdon): Per document settings.
-  numberedHeadings?: boolean;
-  folding?: boolean;
-};
-
-// TODO(Zan): Move this to the plugin-space plugin or another common location when we implement comments in sheets.
-type ThreadProvides<T> = {
-  thread: {
-    predicate: (obj: any) => obj is T;
-    createSort: (obj: T) => (anchorA: string | undefined, anchorB: string | undefined) => number;
-  };
-};
+export const MarkdownSettingsSchema = S.mutable(
+  S.Struct({
+    defaultViewMode: EditorViewMode,
+    editorInputMode: S.optional(EditorInputMode),
+    experimental: S.optional(S.Boolean),
+    debug: S.optional(S.Boolean),
+    toolbar: S.optional(S.Boolean),
+    typewriter: S.optional(S.String),
+    // TODO(burdon): Per document settings.
+    numberedHeadings: S.optional(S.Boolean),
+    folding: S.optional(S.Boolean),
+  }),
+);
 
-export type MarkdownPluginProvides = SurfaceProvides &
-  IntentResolverProvides &
-  GraphSerializerProvides &
-  MetadataRecordsProvides &
-  SettingsProvides<MarkdownSettingsProps> &
-  TranslationsProvides &
-  SchemaProvides &
-  ThreadProvides<DocumentType>;
+export type MarkdownSettingsProps = S.Schema.Type<typeof MarkdownSettingsSchema>;

package/src/util.tsx

@@ -2,12 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Plugin } from '@dxos/app-framework';
 import { debounce } from '@dxos/async';
 import { type TypedObjectSerializer } from '@dxos/plugin-space/types';
 import { create, createObject, isEchoObject, loadObjectReferences, makeRef } from '@dxos/react-client/echo';
+import { TextType } from '@dxos/schema';
 
-import { DocumentType, type MarkdownProperties, type MarkdownExtensionProvides, TextType } from './types';
+import { DocumentType, type MarkdownProperties } from './types';
 
 export const isMarkdownProperties = (data: unknown): data is MarkdownProperties =>
   isEchoObject(data)
@@ -16,12 +16,6 @@ export const isMarkdownProperties = (data: unknown): data is MarkdownProperties
       ? 'title' in data && typeof data.title === 'string'
       : false;
 
-type MarkdownExtensionPlugin = Plugin<MarkdownExtensionProvides>;
-
-export const markdownExtensionPlugins = (plugins: Plugin[]): MarkdownExtensionPlugin[] => {
-  return (plugins as MarkdownExtensionPlugin[]).filter((plugin) => Boolean(plugin.provides?.markdown));
-};
-
 const nonTitleChars = /[^\w ]/g;
 
 export const getFallbackName = (content: string) => {