@dxos/plugin-markdown 0.8.3-staging.0fa589b → 0.8.4-main.03d5cd7b56

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/Suggestions.stories.tsx

@@ -1,215 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react';
-import { Match, Option, pipe, Schema } from 'effect';
-import React, { type FC, useEffect, useMemo, useState } from 'react';
-
-import { Message } from '@dxos/ai';
-import {
-  Capabilities,
-  CollaborationActions,
-  IntentPlugin,
-  SettingsPlugin,
-  contributes,
-  createIntent,
-  useCapability,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { Obj, Ref, Type } from '@dxos/echo';
-import { invariant } from '@dxos/invariant';
-import { DXN } from '@dxos/keys';
-import { ClientPlugin } from '@dxos/plugin-client';
-import { PreviewPlugin } from '@dxos/plugin-preview';
-import { SpacePlugin } from '@dxos/plugin-space';
-import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
-import { ThemePlugin } from '@dxos/plugin-theme';
-import { faker } from '@dxos/random';
-import { createDocAccessor, fullyQualifiedId, toCursorRange, useQueue, useSpace } from '@dxos/react-client/echo';
-import { IconButton, Toolbar } from '@dxos/react-ui';
-import { command, type EditorSelection, type Range, useTextEditor } from '@dxos/react-ui-editor';
-import { StackItem } from '@dxos/react-ui-stack';
-import { defaultTx } from '@dxos/react-ui-theme';
-import { withLayout } from '@dxos/storybook-utils';
-
-import MarkdownContainer from './MarkdownContainer';
-import { MarkdownPlugin } from '../MarkdownPlugin';
-import { MarkdownCapabilities } from '../capabilities';
-import { MARKDOWN_PLUGIN } from '../meta';
-import translations from '../translations';
-import { createDocument, DocumentType, type MarkdownSettingsProps } from '../types';
-
-faker.seed(1);
-
-const TestItem = Schema.Struct({
-  title: Schema.String.annotations({
-    title: 'Title',
-    description: 'Product title',
-  }),
-  description: Schema.String.annotations({
-    title: 'Description',
-    description: 'Product description',
-  }),
-}).pipe(
-  Type.Obj({
-    typename: 'dxos.org/type/Test',
-    version: '0.1.0',
-  }),
-);
-
-const TestChat: FC<{ doc: DocumentType; content: string }> = ({ doc, content }) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const { parentRef } = useTextEditor({ initialValue: content });
-  const { editorState } = useCapability(MarkdownCapabilities.State);
-
-  const space = useSpace();
-  const queueDxn = useMemo(() => space && space.queues.create().dxn, [space]);
-  const queue = useQueue<Message>(queueDxn);
-
-  const handleInsert = async () => {
-    invariant(space);
-    invariant(queue);
-    await queue.append([Obj.make(Message, { role: 'assistant', content: [{ type: 'text', text: 'Hello' }] })]);
-    const message = queue.objects.at(-1);
-    invariant(message);
-
-    const text = await doc.content.load();
-    const accessor = createDocAccessor(text, ['content']);
-    const cursor = pipe(
-      editorState.getState(fullyQualifiedId(doc))?.selection,
-      Option.fromNullable,
-      Option.map(selectionToRange),
-      Option.map((range) => toCursorRange(accessor, range.from, range.to)),
-      Option.getOrUndefined,
-    );
-
-    // {
-    //   const ref = refFromDXN(new DXN(DXN.kind.QUEUE, [...queue.dxn.parts, message.id]));
-    //   const message = deref(ref);
-    // }
-
-    void dispatch(
-      createIntent(CollaborationActions.InsertContent, {
-        target: doc as any as Type.Expando,
-        object: Ref.fromDXN(new DXN(DXN.kind.QUEUE, [...queue.dxn.parts, message.id])),
-        at: cursor,
-        label: 'Proposal',
-      }),
-    );
-  };
-
-  return (
-    <StackItem.Content toolbar>
-      <Toolbar.Root>
-        <IconButton icon='ph--plus--regular' disabled={!queue} label='Insert' onClick={handleInsert} />
-      </Toolbar.Root>
-      <div ref={parentRef} className='p-4' />
-    </StackItem.Content>
-  );
-};
-
-const DefaultStory = ({ document, chat }: { document: string; chat: string }) => {
-  const space = useSpace();
-  const [doc, setDoc] = useState<DocumentType>();
-  const settings = useCapability(Capabilities.SettingsStore).getStore<MarkdownSettingsProps>(MARKDOWN_PLUGIN)!.value;
-  const { editorState } = useCapability(MarkdownCapabilities.State);
-
-  useEffect(() => {
-    if (!space) {
-      return undefined;
-    }
-
-    const doc = space.db.add(
-      createDocument({
-        name: 'Test',
-
-        // Create links.
-        content: document.replaceAll(/\[(\w+)\]/g, (_, label) => {
-          const obj = space.db.add(Obj.make(TestItem, { title: label, description: faker.lorem.paragraph() }));
-          const dxn = Ref.make(obj).dxn.toString();
-          return `[${label}][${dxn}]`;
-        }),
-      }),
-    );
-
-    setDoc(doc);
-  }, [space]);
-
-  if (!space || !doc) {
-    return <></>;
-  }
-
-  return (
-    <>
-      <MarkdownContainer id={doc.id} object={doc} settings={settings} editorStateStore={editorState} />
-      <TestChat doc={doc} content={chat} />
-    </>
-  );
-};
-
-const meta: Meta<typeof DefaultStory> = {
-  title: 'plugins/plugin-markdown/Suggestions',
-  render: DefaultStory,
-  decorators: [
-    withPluginManager({
-      plugins: [
-        ThemePlugin({ tx: defaultTx }),
-        StorybookLayoutPlugin(),
-        ClientPlugin({
-          types: [DocumentType, TestItem],
-          onClientInitialized: async (_, client) => {
-            await client.halo.createIdentity();
-          },
-        }),
-        SpacePlugin(),
-        SettingsPlugin(),
-        IntentPlugin(),
-        MarkdownPlugin(),
-        PreviewPlugin(),
-      ],
-      capabilities: [contributes(MarkdownCapabilities.Extensions, [() => command()])],
-    }),
-    withLayout({ fullscreen: true, classNames: 'grid grid-cols-2' }),
-  ],
-  parameters: {
-    translations,
-    controls: { disable: true },
-  },
-};
-
-export default meta;
-
-type Story = Meta<typeof DefaultStory>;
-
-export const Default: Story = {
-  args: {
-    chat: 'Hello\n',
-    document: [
-      '# Test',
-      '',
-      faker.lorem.paragraph(1),
-      '',
-      'This is a [DXOS] story that tests [ECHO] references inside the Markdown plugin.',
-      '',
-      faker.lorem.paragraph(3),
-      '',
-    ].join('\n'),
-  },
-};
-
-// TODO(wittjosiah): Factor out.
-const selectionToRange = Match.type<EditorSelection>().pipe(
-  Match.when(
-    ({ head, anchor }) => (head ? head > anchor : false),
-    ({ head, anchor }) => ({ from: anchor, to: head! }) as Range,
-  ),
-  Match.when(
-    ({ head, anchor }) => (head ? head < anchor : false),
-    ({ head, anchor }) => ({ from: head!, to: anchor }) as Range,
-  ),
-  Match.orElse(({ anchor }) => ({ from: anchor, to: anchor }) as Range),
-);

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`);
-}