@dxos/plugin-markdown 0.8.3-staging.0fa589b → 0.8.4-main.1068cf700f

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,74 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react';
-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 { Icon, Popover } from '@dxos/react-ui';
-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: 'plugins/plugin-markdown/MarkdownPreview',
-  component: MarkdownPreview,
-  render: ({ subject }) => {
-    return (
-      <Popover.Root open>
-        <Popover.Content>
-          <Popover.Viewport>
-            <MarkdownPreview subject={subject} role='popover' />
-          </Popover.Viewport>
-          <Popover.Arrow />
-        </Popover.Content>
-        <Popover.Trigger>
-          <Icon icon='ph--text-aa--regular' size={5} />
-        </Popover.Trigger>
-      </Popover.Root>
-    );
-  },
-  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 Default = {
-  args: {
-    subject: Obj.make(DocumentType, data.document),
-  },
-};

package/src/components/MarkdownPreview/MarkdownPreview.tsx

@@ -1,71 +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.Container 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>}
-      <Card.Chrome>
-        <Button onClick={handleNavigate}>
-          <span className='grow'>{t('navigate to document label')}</span>
-          <Icon icon='ph--arrow-right--regular' />
-        </Button>
-      </Card.Chrome>
-    </Card.Container>
-  );
-};

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