@dxos/plugin-markdown 0.8.2-staging.7ac8446 → 0.8.3-main.672df60

package/src/components/{MarkdownEditor.tsx → MarkdownEditor/MarkdownEditor.tsx}

@@ -2,17 +2,15 @@
 // Copyright 2023 DXOS.org
 //
 
-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, useIntentDispatcher } from '@dxos/app-framework';
-import { ATTENDABLE_PATH_SEPARATOR, DeckAction } from '@dxos/plugin-deck/types';
+import { type FileInfo } from '@dxos/app-framework';
+import { invariant } from '@dxos/invariant';
 import { useThemeContext, useTranslation } from '@dxos/react-ui';
 import {
   type DNDOptions,
-  type EditorAction,
   type EditorViewMode,
   type EditorInputMode,
   type EditorSelectionState,
@@ -20,27 +18,25 @@ import {
   EditorToolbar,
   type UseTextEditorProps,
   createBasicExtensions,
-  createEditorAction,
   createMarkdownExtensions,
   createThemeExtensions,
   dropFile,
-  editorContent,
+  editorSlots,
   editorGutter,
   processEditorPayload,
   stackItemContentEditorClassNames,
-  useActionHandler,
-  useCommentState,
-  useCommentClickListener,
   useFormattingState,
   useTextEditor,
   useEditorToolbarState,
+  addLink,
+  type EditorToolbarActionGraphProps,
 } from '@dxos/react-ui-editor';
 import { StackItem } from '@dxos/react-ui-stack';
 import { isNotFalsy, isNonNullable } from '@dxos/util';
 
-import { useSelectCurrentThread } from '../hooks';
-import { MARKDOWN_PLUGIN } from '../meta';
-import { type MarkdownPluginState } from '../types';
+import { useSelectCurrentThread } from '../../hooks';
+import { MARKDOWN_PLUGIN } from '../../meta';
+import { type MarkdownPluginState } from '../../types';
 
 export type MarkdownEditorProps = {
   id: string;
@@ -48,8 +44,8 @@ export type MarkdownEditorProps = {
   inputMode?: EditorInputMode;
   scrollPastEnd?: boolean;
   toolbar?: boolean;
+  customActions?: EditorToolbarActionGraphProps['customActions'];
   // TODO(wittjosiah): Generalize custom toolbar actions (e.g. comment, upload, etc.)
-  comment?: boolean;
   viewMode?: EditorViewMode;
   editorStateStore?: EditorStateStore;
   onViewModeChange?: (id: string, mode: EditorViewMode) => void;
@@ -71,7 +67,7 @@ export const MarkdownEditor = ({
   extensionProviders,
   scrollPastEnd,
   toolbar,
-  comment = true,
+  customActions,
   viewMode,
   editorStateStore,
   onFileUpload,
@@ -79,7 +75,6 @@ export const MarkdownEditor = ({
 }: MarkdownEditorProps) => {
   const { t } = useTranslation(MARKDOWN_PLUGIN);
   const { themeMode } = useThemeContext();
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const toolbarState = useEditorToolbarState({ viewMode });
   const formattingObserver = useFormattingState(toolbarState);
 
@@ -93,18 +88,6 @@ export const MarkdownEditor = ({
     [extensionProviders],
   );
 
-  // TODO(Zan): Factor out to thread plugin.
-  const commentObserver = useCommentState(toolbarState);
-  const onCommentClick = useCallback(async () => {
-    await dispatch(
-      createIntent(DeckAction.ChangeCompanion, {
-        primary: id,
-        companion: `${id}${ATTENDABLE_PATH_SEPARATOR}comments`,
-      }),
-    );
-  }, [dispatch]);
-  const commentClickObserver = useCommentClickListener(onCommentClick);
-
   // TODO(wittjosiah): Factor out to file uploader plugin.
   // Drag files.
   const handleDrop: DNDOptions['onDrop'] = async (view, { files }) => {
@@ -124,19 +107,13 @@ export const MarkdownEditor = ({
       initialValue,
       extensions: [
         formattingObserver,
-        comment && commentObserver,
-        comment && commentClickObserver,
         createBasicExtensions({
           readOnly: viewMode === 'readonly',
           placeholder: t('editor placeholder'),
           scrollPastEnd: role === 'section' ? false : scrollPastEnd,
         }),
         createMarkdownExtensions({ themeMode }),
-        createThemeExtensions({
-          themeMode,
-          syntaxHighlighting: true,
-          slots: { content: { className: editorContent } },
-        }),
+        createThemeExtensions({ themeMode, syntaxHighlighting: true, slots: editorSlots }),
         editorGutter,
         role !== 'section' && onFileUpload && dropFile({ onDrop: handleDrop }),
         providerExtensions,
@@ -151,7 +128,7 @@ export const MarkdownEditor = ({
         moveToEndOfLine: true,
       }),
     }),
-    [id, formattingObserver, comment, viewMode, themeMode, extensions, providerExtensions],
+    [id, formattingObserver, viewMode, themeMode, extensions, providerExtensions],
   );
 
   useTest(editorView);
@@ -178,38 +155,28 @@ export const MarkdownEditor = ({
 
         const info = await onFileUpload(file);
         if (info) {
-          processEditorPayload(editorView, { type: 'image', data: info.url });
+          addLink({ url: info.url, image: true })(editorView);
         }
       });
     }
-  }, [acceptedFiles, editorView]);
+  }, [acceptedFiles, editorView, onFileUpload]);
 
-  // Toolbar handler.
-  const handleToolbarAction = useActionHandler(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;
-        }
-      }
+  const getView = useCallback(() => {
+    invariant(editorView);
+    return editorView;
+  }, [editorView]);
 
-      handleToolbarAction?.(action);
-    },
-    [editorView, onViewModeChange, open],
+  const handleViewModeChange = useCallback(
+    (mode: EditorViewMode) => onViewModeChange?.(id, mode),
+    [id, onViewModeChange],
   );
 
+  const handleImageUpload = useCallback(() => {
+    if (onFileUpload) {
+      open();
+    }
+  }, [onFileUpload]);
+
   return (
     <StackItem.Content toolbar={!!toolbar}>
       {toolbar && (
@@ -218,9 +185,10 @@ export const MarkdownEditor = ({
             attendableId={id}
             role={role}
             state={toolbarState}
-            comment={comment}
-            customActions={onFileUpload ? createUploadAction : undefined}
-            onAction={handleAction}
+            customActions={customActions}
+            getView={getView}
+            image={handleImageUpload}
+            viewMode={handleViewModeChange}
           />
           <input {...getInputProps()} />
         </>
@@ -231,6 +199,7 @@ export const MarkdownEditor = ({
         data-testid='composer.markdownRoot'
         data-toolbar={toolbar ? 'enabled' : 'disabled'}
         className={stackItemContentEditorClassNames(role)}
+        data-popover-collision-boundary={true}
         {...focusAttributes}
       />
     </StackItem.Content>
@@ -247,13 +216,3 @@ 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/MarkdownEditor/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './MarkdownEditor';

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

@@ -0,0 +1,73 @@
+//
+// 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 { create } from '@dxos/echo-schema';
+import { DocumentType } from '@dxos/plugin-markdown/types';
+import { faker } from '@dxos/random';
+import { makeRef } from '@dxos/react-client/echo';
+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>
+          <MarkdownPreview subject={subject} role='popover' />
+          <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 = create(DocumentType, {
+    name: faker.lorem.words(3),
+    content: makeRef(
+      create(DataType.Text, {
+        content: faker.lorem.paragraphs(3),
+      }),
+    ),
+  });
+
+  return { document };
+})();
+
+export const Default = {
+  args: {
+    subject: create(DocumentType, data.document),
+  },
+};

package/src/components/MarkdownPreview/MarkdownPreview.tsx

@@ -0,0 +1,71 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { pipe } from 'effect';
+import React, { useCallback } from 'react';
+
+import { chain, createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { isInstanceOf } from '@dxos/echo-schema';
+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 (isInstanceOf(DocumentType, subject)) {
+    return subject.name ?? subject.fallbackName ?? getFallbackName(subject.content?.target?.content ?? fallback);
+  } else if (isInstanceOf(DataType.Text, subject)) {
+    return getFallbackName(subject.content);
+  }
+};
+
+// TODO(burdon): Factor out.
+const getSnippet = (subject: DocumentType | DataType.Text, fallback: string) => {
+  if (isInstanceOf(DocumentType, subject)) {
+    return getAbstract(subject.content?.target?.content ?? fallback);
+  } else if (isInstanceOf(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

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

package/src/components/{MarkdownSettings.tsx → MarkdownSettings/MarkdownSettings.tsx}

@@ -8,8 +8,8 @@ import { Input, Select, useTranslation } from '@dxos/react-ui';
 import { type EditorInputMode, EditorInputModes, type EditorViewMode, EditorViewModes } from '@dxos/react-ui-editor';
 import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
 
-import { MARKDOWN_PLUGIN } from '../meta';
-import { type MarkdownSettingsProps } from '../types';
+import { MARKDOWN_PLUGIN } from '../../meta';
+import { type MarkdownSettingsProps } from '../../types';
 
 export const MarkdownSettings = ({ settings }: { settings: MarkdownSettingsProps }) => {
   const { t } = useTranslation(MARKDOWN_PLUGIN);

package/src/components/MarkdownSettings/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './MarkdownSettings';

package/src/components/Suggestions.stories.tsx

@@ -0,0 +1,217 @@
+//
+// 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 { Type } from '@dxos/echo';
+import { create, createQueueDxn, type Expando } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import { DXN } from '@dxos/keys';
+import { live, makeRef, refFromDXN } from '@dxos/live-object';
+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 && createQueueDxn(space.id), [space]);
+  const queue = useQueue<Message>(queueDxn);
+
+  const handleInsert = async () => {
+    invariant(space);
+    invariant(queue);
+    queue.append([create(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 Expando, // TODO(burdon): Common base type.
+        object: refFromDXN(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(live(TestItem, { title: label, description: faker.lorem.paragraph() }));
+          const dxn = makeRef(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),
+);