@dxos/plugin-markdown 0.8.4-main.2e9d522 → 0.8.4-main.3eb6e50203

package/src/capabilities/react-surface.tsx

@@ -1,113 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { createSurface, contributes, Capabilities, useCapability } from '@dxos/app-framework';
-import { Obj } from '@dxos/echo';
-import { SettingsStore } from '@dxos/local-storage';
-import { AttentionCapabilities } from '@dxos/plugin-attention';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { DataType } from '@dxos/schema';
-
-import { MarkdownCapabilities } from './capabilities';
-import { MarkdownContainer, MarkdownSettings, MarkdownPreview } 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', 'tabpanel'],
-      filter: (data): data is { subject: DocumentType; variant: undefined } =>
-        Obj.instanceOf(DocumentType, data.subject) && !data.variant,
-      component: ({ data, role }) => {
-        const selectionManager = useCapability(AttentionCapabilities.Selection);
-        const settingsStore = useCapability(Capabilities.SettingsStore);
-        const settings = settingsStore.getStore<MarkdownSettingsProps>(MARKDOWN_PLUGIN)!.value;
-        const { state, editorState, getViewMode, setViewMode } = useCapability(MarkdownCapabilities.State);
-        const viewMode = getViewMode(fullyQualifiedId(data.subject));
-
-        return (
-          <MarkdownContainer
-            id={fullyQualifiedId(data.subject)}
-            object={data.subject}
-            role={role}
-            settings={settings}
-            selectionManager={selectionManager}
-            extensionProviders={state.extensionProviders}
-            viewMode={viewMode}
-            editorStateStore={editorState}
-            onViewModeChange={setViewMode}
-          />
-        );
-      },
-    }),
-    createSurface({
-      id: `${MARKDOWN_PLUGIN}/text`,
-      role: ['article', 'section', 'tabpanel'],
-      filter: (data): data is { id: string; subject: DataType.Text } =>
-        typeof data.id === 'string' && Obj.instanceOf(DataType.Text, data.subject),
-      component: ({ data, role }) => {
-        const selectionManager = useCapability(AttentionCapabilities.Selection);
-        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.id}
-            object={data.subject}
-            role={role}
-            settings={settings}
-            selectionManager={selectionManager}
-            extensionProviders={state.extensionProviders}
-            viewMode={getViewMode(data.id)}
-            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 selectionManager = useCapability(AttentionCapabilities.Selection);
-        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}
-            selectionManager={selectionManager}
-            extensionProviders={state.extensionProviders}
-            viewMode={getViewMode(data.subject.id)}
-            editorStateStore={editorState}
-            onViewModeChange={setViewMode}
-          />
-        );
-      },
-    }),
-    createSurface({
-      id: `${MARKDOWN_PLUGIN}/plugin-settings`,
-      role: 'article',
-      filter: (data): data is { subject: SettingsStore<MarkdownSettingsProps> } =>
-        data.subject instanceof SettingsStore && data.subject.prefix === MARKDOWN_PLUGIN,
-      component: ({ data: { subject } }) => <MarkdownSettings settings={subject.value} />,
-    }),
-    createSurface({
-      id: `${MARKDOWN_PLUGIN}/preview`,
-      role: ['card--popover', 'card--intrinsic', 'card--extrinsic', 'card--transclusion', 'card'],
-      filter: (data): data is { subject: DocumentType | DataType.Text } =>
-        Obj.instanceOf(DocumentType, data.subject) || Obj.instanceOf(DataType.Text, data.subject),
-      component: ({ data, role }) => <MarkdownPreview {...data} role={role} />,
-    }),
-  ]);

package/src/capabilities/settings.ts

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

package/src/capabilities/state.ts

@@ -1,31 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capabilities, contributes, type PluginContext } 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: PluginContext) => {
-  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
-      .getCapability(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 object with methods.
-  return contributes(MarkdownCapabilities.State, { state: state.values, editorState, getViewMode, setViewMode });
-};

package/src/components/MarkdownPreview/MarkdownPreview.stories.tsx

@@ -1,81 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
-import React from 'react';
-
-import { IntentPlugin } from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { Obj, Ref } from '@dxos/echo';
-import { DocumentType } from '@dxos/plugin-markdown/types';
-import { faker } from '@dxos/random';
-import { CardContainer } from '@dxos/react-ui-stack/testing';
-import { DataType } from '@dxos/schema';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
-
-import { MarkdownPreview } from './MarkdownPreview';
-import { translations } from '../../translations';
-
-faker.seed(1234);
-
-const meta: Meta<typeof MarkdownPreview> = {
-  title: 'Cards/plugin-markdown',
-  component: MarkdownPreview,
-  render: ({ role, subject, ...args }) => {
-    return (
-      <CardContainer icon='ph--text-aa--regular' role={role}>
-        <MarkdownPreview subject={subject} role={role} />
-      </CardContainer>
-    );
-  },
-  decorators: [
-    withPluginManager({
-      plugins: [IntentPlugin()],
-    }),
-    withTheme,
-    withLayout(),
-  ],
-  parameters: {
-    layout: 'centered',
-    translations,
-  },
-};
-
-export default meta;
-
-const data = (() => {
-  const document = Obj.make(DocumentType, {
-    name: faker.lorem.words(3),
-    content: Ref.make(
-      Obj.make(DataType.Text, {
-        content: faker.lorem.paragraphs(3),
-      }),
-    ),
-  });
-
-  return { document };
-})();
-
-export const Popover = {
-  args: {
-    subject: Obj.make(DocumentType, data.document),
-    role: 'card--popover',
-  },
-};
-
-export const Extrinsic = {
-  args: {
-    subject: Obj.make(DocumentType, data.document),
-    role: 'card--extrinsic',
-  },
-};
-
-export const Intrinsic = {
-  args: {
-    subject: Obj.make(DocumentType, data.document),
-    role: 'card--intrinsic',
-  },
-};

package/src/components/MarkdownPreview/MarkdownPreview.tsx

@@ -1,73 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { pipe } from 'effect';
-import React, { useCallback } from 'react';
-
-import { chain, createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
-import { Obj } from '@dxos/echo';
-import { type PreviewProps } from '@dxos/plugin-preview';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { Button, Icon, useTranslation } from '@dxos/react-ui';
-import { Card } from '@dxos/react-ui-stack';
-import { DataType } from '@dxos/schema';
-
-import { MARKDOWN_PLUGIN } from '../../meta';
-import { DocumentType } from '../../types';
-import { getAbstract, getFallbackName } from '../../util';
-
-// TODO(burdon): Factor out.
-const getTitle = (subject: DocumentType | DataType.Text, fallback: string) => {
-  if (Obj.instanceOf(DocumentType, subject)) {
-    return subject.name ?? subject.fallbackName ?? getFallbackName(subject.content?.target?.content ?? fallback);
-  } else if (Obj.instanceOf(DataType.Text, subject)) {
-    return getFallbackName(subject.content);
-  }
-};
-
-// TODO(burdon): Factor out.
-const getSnippet = (subject: DocumentType | DataType.Text, fallback: string) => {
-  if (Obj.instanceOf(DocumentType, subject)) {
-    return getAbstract(subject.content?.target?.content ?? fallback);
-  } else if (Obj.instanceOf(DataType.Text, subject)) {
-    return getAbstract(subject.content);
-  }
-};
-
-export const MarkdownPreview = ({ subject, role }: PreviewProps<DocumentType | DataType.Text>) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const { t } = useTranslation(MARKDOWN_PLUGIN);
-  const snippet = getSnippet(subject, t('fallback abstract'));
-
-  // TODO(wittjosiah): Factor out so this component isn't dependent on the app framework.
-  const handleNavigate = useCallback(
-    () =>
-      dispatch(
-        pipe(
-          createIntent(LayoutAction.UpdatePopover, {
-            part: 'popover',
-            subject: null,
-            options: { state: false, anchorId: '' },
-          }),
-          chain(LayoutAction.Open, { part: 'main', subject: [fullyQualifiedId(subject)] }),
-        ),
-      ),
-    [dispatch, subject],
-  );
-
-  return (
-    <Card.SurfaceRoot role={role}>
-      <Card.Heading>{getTitle(subject, t('fallback title'))}</Card.Heading>
-      {snippet && <Card.Text classNames='line-clamp-3 break-words col-span-2'>{snippet}</Card.Text>}
-      {role === 'card--popover' && (
-        <Card.Chrome>
-          <Button onClick={handleNavigate}>
-            <span className='grow'>{t('navigate to document label')}</span>
-            <Icon icon='ph--arrow-right--regular' />
-          </Button>
-        </Card.Chrome>
-      )}
-    </Card.SurfaceRoot>
-  );
-};

package/src/components/MarkdownPreview/index.ts

@@ -1,9 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { MarkdownPreview } from './MarkdownPreview';
-
-export * from './MarkdownPreview';
-
-export default MarkdownPreview;

package/src/components/Toolbar.stories.tsx

@@ -1,113 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
-import React, { type FC, useCallback, useState } from 'react';
-
-import { Obj } from '@dxos/echo';
-import { invariant } from '@dxos/invariant';
-import { PublicKey } from '@dxos/keys';
-import { faker } from '@dxos/random';
-import { createDocAccessor } from '@dxos/react-client/echo';
-import { useThemeContext } from '@dxos/react-ui';
-import {
-  EditorToolbar,
-  type Comment,
-  comments,
-  createBasicExtensions,
-  createDataExtensions,
-  createMarkdownExtensions,
-  createThemeExtensions,
-  decorateMarkdown,
-  editorSlots,
-  formattingKeymap,
-  translations,
-  useComments,
-  useFormattingState,
-  useTextEditor,
-  useEditorToolbarState,
-  type EditorViewMode,
-} from '@dxos/react-ui-editor';
-import { DataType } from '@dxos/schema';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-faker.seed(101);
-
-const DefaultStory: FC<{ content?: string }> = ({ content = '' }) => {
-  const { themeMode } = useThemeContext();
-  const [text] = useState(Obj.make(DataType.Text, { content }));
-  const toolbarState = useEditorToolbarState({ viewMode: 'preview' });
-  const formattingObserver = useFormattingState(toolbarState);
-  const { parentRef, view } = useTextEditor(() => {
-    return {
-      id: text.id,
-      initialValue: text.content,
-      extensions: [
-        formattingObserver,
-        createBasicExtensions({ readOnly: toolbarState.viewMode === 'readonly' }),
-        createMarkdownExtensions({ themeMode }),
-        createThemeExtensions({ themeMode, syntaxHighlighting: true, slots: editorSlots }),
-        createDataExtensions({ id: text.id, text: createDocAccessor(text, ['content']) }),
-        comments({
-          onCreate: ({ cursor }) => {
-            const id = PublicKey.random().toHex();
-            setComments((comments) => [...comments, { id, cursor }]);
-            return id;
-          },
-        }),
-        formattingKeymap(),
-        ...(toolbarState.viewMode !== 'source' ? [decorateMarkdown()] : []),
-      ],
-    };
-  }, [text, formattingObserver, toolbarState.viewMode, themeMode]);
-
-  const handleViewModeChange = (viewMode: EditorViewMode) => {
-    toolbarState.viewMode = viewMode;
-  };
-
-  const getView = useCallback(() => {
-    invariant(view);
-    return view;
-  }, [view]);
-
-  const [_comments, setComments] = useState<Comment[]>([]);
-  useComments(view, text.id, _comments);
-
-  return (
-    <div role='none' className='flex flex-col'>
-      <EditorToolbar state={toolbarState ?? {}} getView={getView} viewMode={handleViewModeChange} />
-      <div className='flex grow overflow-hidden' ref={parentRef} />
-    </div>
-  );
-};
-
-const content = [
-  '# Demo',
-  '',
-  'The editor supports **Markdown** styles.',
-  '',
-  faker.lorem.paragraph({ min: 5, max: 8 }),
-  '',
-  '',
-].join('\n');
-
-const meta: Meta<typeof EditorToolbar> = {
-  title: 'plugins/plugin-markdown/Toolbar',
-  component: EditorToolbar,
-  render: DefaultStory as any,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: {
-    translations,
-  },
-};
-
-export default meta;
-
-export const Default = {
-  args: {
-    content,
-  },
-};

package/src/events.ts

@@ -1,11 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Events } from '@dxos/app-framework';
-
-import { MARKDOWN_PLUGIN } from './meta';
-
-export namespace MarkdownEvents {
-  export const SetupExtensions = Events.createStateEvent(`${MARKDOWN_PLUGIN}/setup-extensions`);
-}

package/src/types/schema.ts

@@ -1,39 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { Schema } from 'effect';
-
-import { Obj, Ref, Type } from '@dxos/echo';
-import { LabelAnnotation } from '@dxos/echo-schema';
-import { DataType } from '@dxos/schema';
-
-export const DocumentSchema = Schema.Struct({
-  name: Schema.optional(Schema.String),
-  fallbackName: Schema.optional(Schema.String),
-  content: Type.Ref(DataType.Text),
-}).pipe(LabelAnnotation.set(['name', 'fallbackName']));
-
-export const DocumentType = DocumentSchema.pipe(
-  Type.Obj({
-    typename: 'dxos.org/type/Document',
-    version: '0.1.0',
-  }),
-);
-export type DocumentType = Schema.Schema.Type<typeof DocumentType>;
-
-// TODO(burdon): Replace when defaults are supported.
-export const createDocument = ({ name, content }: { name: string; content: string }) =>
-  Obj.make(DocumentType, { name, content: Ref.make(Obj.make(DataType.Text, { content })) });
-
-/**
- * Checks if an object conforms to the interface needed to render an editor.
- */
-// TODO(burdon): Normalize types (from FilesPlugin).
-export const isEditorModel = (data: any): data is { id: string; text: string } =>
-  data &&
-  typeof data === 'object' &&
-  'id' in data &&
-  typeof data.id === 'string' &&
-  'text' in data &&
-  typeof data.text === 'string';