@dxos/plugin-markdown 0.7.5-main.9d26e3a → 0.7.5-main.e9bb01b

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 { createIntent, type FileInfo, LayoutAction, 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,26 @@ 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 }));
+    await dispatch(
+      createIntent(LayoutAction.UpdateComplementary, {
+        part: 'complementary',
+        subject: 'comments',
+        options: { state: 'expanded' },
+      }),
+    );
   }, [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 +154,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 +243,13 @@ const useTest = (view?: EditorView) => {
     }
   }, [view]);
 };
+
+export const createUploadAction = () => ({
+  nodes: [
+    createEditorAction({ type: 'image', testId: 'editor.toolbar.image' }, 'ph--image-square--regular', [
+      'upload image label',
+      { ns: MARKDOWN_PLUGIN },
+    ]),
+  ],
+  edges: [{ source: 'root', target: 'image' }],
+});

package/src/components/MarkdownSettings.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 
 import { Input, Select, useTranslation } from '@dxos/react-ui';
 import { type EditorInputMode, EditorInputModes, type EditorViewMode, EditorViewModes } from '@dxos/react-ui-editor';
-import { DeprecatedFormInput } from '@dxos/react-ui-form';
+import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
 
 import { MARKDOWN_PLUGIN } from '../meta';
 import { type MarkdownSettingsProps } from '../types';
@@ -16,7 +16,7 @@ export const MarkdownSettings = ({ settings }: { settings: MarkdownSettingsProps
 
   // TODO(wittjosiah): Add skill test confirmation for entering vim mode.
   return (
-    <>
+    <DeprecatedFormContainer>
       <DeprecatedFormInput label={t('default view mode label')}>
         <Select.Root
           value={settings.defaultViewMode}
@@ -100,6 +100,6 @@ export const MarkdownSettings = ({ settings }: { settings: MarkdownSettingsProps
       >
         <Input.Switch checked={settings.debug} onCheckedChange={(checked) => (settings.debug = !!checked)} />
       </DeprecatedFormInput>
-    </>
+    </DeprecatedFormContainer>
   );
 };

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,
+  LayoutAction,
+  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);
@@ -145,11 +148,12 @@ const createBaseExtensions = ({ document, dispatch, settings, query, viewMode }:
             dispatch && document
               ? onRenderLink((id: string) => {
                   void dispatch(
-                    createIntent(NavigationAction.AddToActive, {
-                      id,
+                    createIntent(LayoutAction.Open, {
                       part: 'main',
-                      pivotId: fullyQualifiedId(document),
-                      scrollIntoView: true,
+                      subject: [id],
+                      options: {
+                        pivotId: fullyQualifiedId(document),
+                      },
                     }),
                   );
                 })

package/src/hooks/useSelectCurrentThread.tsx

@@ -6,6 +6,7 @@ import { EditorView } from '@codemirror/view';
 import { useMemo } from 'react';
 
 import { createResolver, LayoutAction, useIntentResolver } from '@dxos/app-framework';
+import { S } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { Cursor, setSelection } from '@dxos/react-ui-editor';
 
@@ -17,9 +18,17 @@ import { MARKDOWN_PLUGIN } from '../meta';
 export const useSelectCurrentThread = (editorView: EditorView | undefined, documentId: string) => {
   const scrollIntoViewResolver = useMemo(
     () =>
-      createResolver(
-        LayoutAction.ScrollIntoView,
-        ({ cursor }) => {
+      createResolver({
+        intent: LayoutAction.UpdateLayout,
+        position: 'hoist',
+        filter: (data): data is { part: 'current'; subject: string; options: { cursor: string } } => {
+          if (!S.is(LayoutAction.ScrollIntoView.fields.input)(data)) {
+            return false;
+          }
+
+          return !!editorView && data.subject === documentId && !!data.options?.cursor;
+        },
+        resolve: ({ options: { cursor } }) => {
           invariant(editorView, 'Editor view is not defined.');
           const range = Cursor.getRangeFromCursor(editorView.state, cursor!);
           if (range) {
@@ -39,11 +48,7 @@ export const useSelectCurrentThread = (editorView: EditorView | undefined, docum
             });
           }
         },
-        {
-          disposition: 'hoist',
-          filter: (data) => !!editorView && data.id === documentId && !!data.cursor,
-        },
-      ),
+      }),
     [documentId, editorView],
   );
 

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,10 +6,15 @@ 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.',
+  description: `Composer offers a Modern Markdown editor that is collaborative and fully extensible. It provides rich text editing as well as read only and markdown view.
+
+In addition to markdown capabilities, it also support threaded in-line comments which can be accessed from the right hand sidebar at any times inside the document.
+
+Your AI agent will have access to all markdown docs in your Space which means you can use them to extend the memory of your personal agent and add long term context for automated workflows.`,
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-markdown',
   icon: 'ph--text-aa--regular',
+  screenshots: ['https://dxos.network/plugin-details-markdown-dark.png'],
 } satisfies PluginMeta;

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>;