@dxos/plugin-markdown 0.8.4-main.e8ec1fe → 0.8.4-main.effb148878

package/src/capabilities/react-surface.tsx

@@ -2,92 +2,127 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useCallback } from 'react';
+import * as Effect from 'effect/Effect';
+import React, { forwardRef, useCallback, useMemo } from 'react';
 
-import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
-import { SurfaceCardRole, useCapability } from '@dxos/app-framework/react';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import {
+  Surface,
+  useAtomCapability,
+  useAtomCapabilityState,
+  useCapabilities,
+  useCapability,
+  useSettingsState,
+} from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
-import { SettingsStore } from '@dxos/local-storage';
 import { AttentionCapabilities } from '@dxos/plugin-attention';
 import { Text } from '@dxos/schema';
+import { type EditorViewMode } from '@dxos/ui-editor/types';
 
-import { MarkdownCard, MarkdownContainer, type MarkdownContainerProps, MarkdownSettings } from '../components';
-import { meta } from '../meta';
-import { Markdown } from '../types';
-import { isEditorModel } from '../util';
+import { MarkdownSettings } from '#components';
+import { MarkdownCard, EditableMarkdownCard, MarkdownArticle, type MarkdownArticleProps } from '#containers';
+import { meta } from '#meta';
+import { Markdown, MarkdownCapabilities } from '#types';
 
-import { MarkdownCapabilities } from './capabilities';
-
-export default () =>
-  contributes(Capabilities.ReactSurface, [
-    createSurface({
-      id: `${meta.id}/surface/document`,
-      role: ['article', 'section', 'tabpanel'],
-      filter: (data): data is { subject: Markdown.Document; variant: undefined } =>
-        Obj.instanceOf(Markdown.Document, data.subject) && !data.variant,
-      component: ({ data, role }) => {
-        return <Container id={Obj.getDXN(data.subject).toString()} subject={data.subject} role={role} />;
-      },
-    }),
-    createSurface({
-      id: `${meta.id}/surface/text`,
-      role: ['article', 'section', 'tabpanel'],
-      filter: (data): data is { id: string; subject: Text.Text } =>
-        typeof data.id === 'string' && Obj.instanceOf(Text.Text, data.subject),
-      component: ({ data, role }) => {
-        return <Container id={data.id} subject={data.subject} role={role} />;
-      },
-    }),
-    // TODO(burdon): Remove this variant and conform to Text.
-    createSurface({
-      id: `${meta.id}/surface/editor`,
-      role: ['article', 'section'],
-      filter: (data): data is { subject: { id: string; text: string } } => isEditorModel(data.subject),
-      component: ({ data, role }) => {
-        return <Container id={data.subject.id} subject={data.subject} role={role} />;
-      },
-    }),
-    createSurface({
-      id: `${meta.id}/surface/plugin-settings`,
-      role: 'article',
-      filter: (data): data is { subject: SettingsStore<Markdown.Settings> } =>
-        data.subject instanceof SettingsStore && data.subject.prefix === meta.id,
-      component: ({ data: { subject } }) => <MarkdownSettings settings={subject.value} />,
-    }),
-    createSurface({
-      id: `${meta.id}/surface/preview`,
-      role: SurfaceCardRole.literals as any,
-      filter: (data): data is { subject: Markdown.Document | Text.Text } =>
-        Obj.instanceOf(Markdown.Document, data.subject) || Obj.instanceOf(Text.Text, data.subject),
-      component: ({ data, role }) => <MarkdownCard {...data} role={role as SurfaceCardRole} />,
-    }),
-  ]);
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: 'surface.document',
+        // TODO(wittjosiah): Split into multiple surfaces if this filter proves too strict for non-article roles.
+        role: ['article', 'section', 'tabpanel'],
+        filter: (data): data is { subject: Markdown.Document; attendableId: string; variant: undefined } =>
+          typeof data.attendableId === 'string' && Obj.instanceOf(Markdown.Document, data.subject) && !data.variant,
+        component: ({ data, role, ref }) => {
+          return (
+            <Container
+              id={Obj.getURI(data.subject)}
+              attendableId={data.attendableId}
+              subject={data.subject}
+              role={role}
+              ref={ref}
+            />
+          );
+        },
+      }),
+      Surface.create({
+        id: 'surface.text',
+        // TODO(wittjosiah): Split into multiple surfaces if this filter proves too strict for non-article roles.
+        // TODO(burdon): Why is attendableId required? See EventArticle.tsx
+        filter: AppSurface.oneOf(
+          AppSurface.object(AppSurface.Article, Text.Text),
+          AppSurface.object(AppSurface.Section, Text.Text),
+          AppSurface.object(AppSurface.Tabpanel, Text.Text),
+        ),
+        component: ({ data, role, ref }) => {
+          return (
+            <Container
+              id={Obj.getURI(data.subject)}
+              attendableId={data.attendableId}
+              subject={data.subject}
+              role={role}
+              ref={ref}
+            />
+          );
+        },
+      }),
+      Surface.create({
+        id: 'surface.plugin-settings',
+        filter: AppSurface.settings(AppSurface.Article, meta.id),
+        component: ({ data: { subject } }) => {
+          const { settings, updateSettings } = useSettingsState<Markdown.Settings>(subject.atom);
+          return <MarkdownSettings settings={settings} onSettingsChange={updateSettings} />;
+        },
+      }),
+      Surface.create({
+        id: 'surface.editable',
+        position: 'first',
+        filter: AppSurface.object(AppSurface.Card, [Markdown.Document, Text.Text], (data) => data.editable === true),
+        component: ({ data }) => <EditableMarkdownCard subject={data.subject} />,
+      }),
+      Surface.create({
+        id: 'surface.preview',
+        filter: AppSurface.object(AppSurface.Card, [Markdown.Document, Text.Text], (data) => data.editable !== true),
+        component: ({ data }) => <MarkdownCard {...data} />,
+      }),
+    ]),
+  ),
+);
 
 /**
  * Common wrapper.
  */
-const Container = ({ id, subject, role }: { id: string; subject: MarkdownContainerProps['object']; role: string }) => {
+const Container = forwardRef<
+  HTMLDivElement,
+  AppSurface.ObjectArticleProps<Markdown.Document | Text.Text, { id: string }>
+>(({ id, attendableId, subject, role }, forwardedRef) => {
   const selectionManager = useCapability(AttentionCapabilities.Selection);
-  const settingsStore = useCapability(Capabilities.SettingsStore);
-  const settings = settingsStore.getStore<Markdown.Settings>(meta.id)!.value;
-  const { state, editorState, getViewMode, setViewMode } = useCapability(MarkdownCapabilities.State);
-  const viewMode = getViewMode(id);
-  const handleViewModeChange = useCallback<NonNullable<MarkdownContainerProps['onViewModeChange']>>(
-    (mode) => setViewMode(id, mode),
-    [id, setViewMode],
+  const settings = useAtomCapability(MarkdownCapabilities.Settings);
+  const [state, setState] = useAtomCapabilityState(MarkdownCapabilities.State);
+  const editorState = useCapability(MarkdownCapabilities.EditorState);
+  const extensions = useCapabilities(MarkdownCapabilities.Extensions);
+  const extensionProviders = useMemo(() => extensions.flat(), [extensions]);
+
+  const viewMode: EditorViewMode = (id && state.viewMode[id]) || settings?.defaultViewMode || 'source';
+  const handleViewModeChange = useCallback<NonNullable<MarkdownArticleProps['onViewModeChange']>>(
+    (mode) => setState((current) => ({ ...current, viewMode: { ...current.viewMode, [id]: mode } })),
+    [id, setState],
   );
 
   return (
-    <MarkdownContainer
-      id={id}
-      object={subject}
+    <MarkdownArticle
       role={role}
+      subject={subject}
+      id={id}
+      attendableId={attendableId}
       settings={settings}
       selectionManager={selectionManager}
-      extensionProviders={state.extensionProviders}
+      extensionProviders={extensionProviders}
       editorStateStore={editorState}
       viewMode={viewMode}
       onViewModeChange={handleViewModeChange}
+      ref={forwardedRef}
     />
   );
-};
+});

package/src/capabilities/settings.ts

@@ -2,24 +2,36 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes } from '@dxos/app-framework';
-import { live } from '@dxos/live-object';
+import * as Effect from 'effect/Effect';
 
-import { meta } from '../meta';
-import { Markdown } from '../types';
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { createKvsStore } from '@dxos/effect';
 
-export default () => {
-  const settings = live<Markdown.Settings>({
-    defaultViewMode: 'preview',
-    toolbar: true,
-    numberedHeadings: true,
-    folding: true,
-    experimental: false,
-  });
+import { meta } from '#meta';
+import { Markdown, MarkdownCapabilities } from '#types';
 
-  return contributes(Capabilities.Settings, {
-    prefix: meta.id,
-    schema: Markdown.Settings,
-    value: settings,
-  });
-};
+export default Capability.makeModule(() =>
+  Effect.sync(() => {
+    const settingsAtom = createKvsStore({
+      key: meta.id,
+      schema: Markdown.Settings,
+      defaultValue: () => ({
+        defaultViewMode: 'preview' as const,
+        toolbar: true,
+        numberedHeadings: true,
+        folding: true,
+        experimental: false,
+      }),
+    });
+
+    return [
+      Capability.contributes(MarkdownCapabilities.Settings, settingsAtom),
+      Capability.contributes(AppCapabilities.Settings, {
+        prefix: meta.id,
+        schema: Markdown.Settings,
+        atom: settingsAtom,
+      }),
+    ];
+  }),
+);

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

@@ -7,8 +7,8 @@ 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';
+import { type FileInfo } from '@dxos/app-toolkit';
+import { addLink } from '@dxos/ui-editor';
 
 export const IMAGE_FILES = ['.jpg', '.jpeg', '.png', '.gif'];
 

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

@@ -3,72 +3,76 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Filter, Obj } from '@dxos/echo';
-import { AttentionPlugin } from '@dxos/plugin-attention';
-import { ClientPlugin } from '@dxos/plugin-client';
-import { 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 { 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 { Markdown } from '../../types';
+import { translations } from '#translations';
+import { Markdown } from '#types';
 
-import { MarkdownEditor, type MarkdownEditorRootProps } 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 = Omit<MarkdownEditorRootProps, 'id' | 'extensions'>;
-
-const DefaultStory = (props: StoryProps) => {
-  const space = useSpace();
+const DefaultStory = (props: DefaultStoryProps) => {
+  const [space] = useSpaces();
   const [doc] = useQuery(space?.db, Filter.type(Markdown.Document));
-  const id = doc && Obj.getDXN(doc).toString();
-  const attentionAttrs = useAttentionAttributes(id);
-
+  const id = doc && Obj.getURI(doc);
   if (!id) {
-    return null;
+    return <Loading data={{ id }} />;
   }
 
   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>
+    <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 DefaultStory> = {
-  title: 'plugins/plugin-markdown/MarkdownEditor',
-  component: DefaultStory,
-  render: DefaultStory as any,
+  title: 'plugins/plugin-markdown/components/MarkdownEditor',
+  render: DefaultStory,
   decorators: [
-    withTheme,
-    withLayout({ container: 'column' }),
-    // TODO(burdon): Create story without client.
+    withLayout({ layout: 'column' }),
     withPluginManager({
       plugins: [
+        ...corePlugins(),
+        // TODO(burdon): Try to write story without ClientPlugin.
         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.make({ content }));
-          },
+          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') }),
+              );
+            }),
         }),
-        IntentPlugin(),
-        AttentionPlugin(),
       ],
     }),
   ],