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

package/src/components/MarkdownEditor/MarkdownEditorContent.tsx

@@ -0,0 +1,152 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo } from 'react';
+
+import { type Live } from '@dxos/live-object';
+import { type ThemedClassName, useDynamicRef, useThemeContext, useTranslation } from '@dxos/react-ui';
+import {
+  type EditorMenuGroup,
+  type EditorSelectionState,
+  type EditorStateStore,
+  type EditorToolbarState,
+  type EditorViewMode,
+  type ThemeExtensionsOptions,
+  type UseTextEditorProps,
+  createBasicExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
+  dropFile,
+  editorSlots,
+  formattingListener,
+  processEditorPayload,
+  stackItemContentEditorClassNames,
+  useTextEditor,
+} from '@dxos/react-ui-editor';
+import { mx } from '@dxos/react-ui-theme';
+import { isTruthy } from '@dxos/util';
+
+import { useSelectCurrentThread } from '../../hooks';
+import { meta } from '../../meta';
+
+import { type MarkdownEditorToolbarProps } from './MarkdownEditorToolbar';
+
+export type MarkdownEditorContentProps = ThemedClassName<{
+  id: string;
+  role?: string;
+  viewMode?: EditorViewMode;
+  scrollPastEnd?: boolean;
+  slashCommandGroups?: EditorMenuGroup[];
+  editorStateStore?: EditorStateStore;
+  toolbarState?: Live<EditorToolbarState>;
+  onLinkQuery?: (query?: string) => Promise<EditorMenuGroup[]>;
+}> &
+  // prettier-ignore
+  Pick<UseTextEditorProps, 'initialValue' | 'extensions'> &
+  Pick<MarkdownEditorToolbarProps, 'onFileUpload'> &
+  Pick<ThemeExtensionsOptions, 'slots'>;
+
+export const MarkdownEditorContent = forwardRef<EditorView | null, MarkdownEditorContentProps>(
+  (
+    {
+      classNames,
+      id,
+      role,
+      viewMode,
+      initialValue,
+      editorStateStore,
+      toolbarState,
+      extensions,
+      scrollPastEnd,
+      slots = editorSlots,
+      onFileUpload,
+    },
+    forwardedRef,
+  ) => {
+    const { t } = useTranslation(meta.id);
+    const { themeMode } = useThemeContext();
+
+    // TODO(burdon): Toolbar state is not reactive.
+    const toolbarStateRef = useDynamicRef(toolbarState);
+
+    // Restore last selection and scroll point.
+    const { scrollTo, selection } = useMemo<EditorSelectionState>(() => editorStateStore?.getState(id) ?? {}, [id]);
+
+    const {
+      parentRef,
+      view: editorView,
+      focusAttributes,
+    } = useTextEditor(
+      () => ({
+        ...(role !== 'section' && {
+          id,
+          scrollTo,
+          selection,
+          // TODO(wittjosiah): Autofocus based on layout is racy.
+          // autoFocus: layoutPlugin?.provides.layout ? layoutPlugin?.provides.layout.scrollIntoView === id : true,
+          selectionEnd: true,
+        }),
+        initialValue,
+        extensions: [
+          createBasicExtensions({
+            readOnly: viewMode === 'readonly',
+            placeholder: t('editor placeholder'),
+            scrollPastEnd: scrollPastEnd && role !== 'section',
+            search: true,
+          }),
+          createThemeExtensions({
+            themeMode,
+            slots,
+            syntaxHighlighting: true,
+          }),
+          createMarkdownExtensions(),
+          formattingListener(() => toolbarStateRef.current),
+          role !== 'section' &&
+            onFileUpload &&
+            dropFile({
+              // TODO(wittjosiah): Factor out to file uploader plugin.
+              onDrop: async (view, { files }) => {
+                const file = files[0];
+                const info = file && onFileUpload ? await onFileUpload(file) : undefined;
+                if (info) {
+                  processEditorPayload(view, { type: 'image', data: info.url });
+                }
+              },
+            }),
+          extensions,
+        ].filter(isTruthy),
+      }),
+      [id, viewMode, themeMode, extensions],
+    );
+
+    useImperativeHandle<EditorView | null, EditorView | null>(forwardedRef, () => editorView, [editorView]);
+
+    useSelectCurrentThread(editorView, id);
+
+    useTest(editorView);
+
+    return (
+      <div
+        role='none'
+        ref={parentRef}
+        data-testid='composer.markdownRoot'
+        className={mx(stackItemContentEditorClassNames(role), classNames)}
+        data-popover-collision-boundary={true}
+        {...focusAttributes}
+      />
+    );
+  },
+);
+
+// Expose editor view for playwright tests.
+// TODO(wittjosiah): Find a better way to expose this or find a way to limit it to test runs.
+const useTest = (view: EditorView | null) => {
+  useEffect(() => {
+    const composer = (window as any).composer;
+    if (composer) {
+      composer.editorView = view;
+    }
+  }, [view]);
+};

package/src/components/MarkdownEditor/MarkdownEditorToolbar.tsx

@@ -0,0 +1,63 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import React, { useCallback, useState } from 'react';
+
+import { type FileInfo } from '@dxos/app-framework';
+import { invariant } from '@dxos/invariant';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { EditorToolbar, type EditorToolbarProps, type EditorViewMode } from '@dxos/react-ui-editor';
+
+import { FileUpload, type FileUploadAction } from './FileUpload';
+
+export type MarkdownEditorToolbarProps = ThemedClassName<
+  {
+    id: string;
+    editorView?: EditorView;
+    onFileUpload?: (file: File) => Promise<FileInfo | undefined>;
+  } & Pick<EditorToolbarProps, 'role' | 'state' | 'customActions' | 'onViewModeChange'>
+>;
+
+export const MarkdownEditorToolbar = ({
+  classNames,
+  id,
+  role,
+  state,
+  editorView,
+  customActions,
+  onFileUpload,
+  onViewModeChange,
+}: MarkdownEditorToolbarProps) => {
+  const [upload, setUpload] = useState<FileUploadAction | null>(null);
+  const uploadRef = useCallback((next: FileUploadAction) => setUpload(() => next), []);
+
+  const handleViewModeChange = useCallback((mode: EditorViewMode) => onViewModeChange?.(mode), [onViewModeChange]);
+
+  const getView = useCallback(() => {
+    invariant(editorView);
+    return editorView;
+  }, [editorView]);
+
+  if (!editorView) {
+    return <div />;
+  }
+
+  return (
+    <>
+      <EditorToolbar
+        classNames={classNames}
+        attendableId={id}
+        role={role}
+        state={state}
+        customActions={customActions}
+        getView={getView}
+        onImageUpload={upload ?? undefined}
+        onViewModeChange={handleViewModeChange}
+      />
+
+      {onFileUpload && <FileUpload ref={uploadRef} editorView={editorView} onFileUpload={onFileUpload} />}
+    </>
+  );
+};

package/src/components/MarkdownSettings/MarkdownSettings.tsx

@@ -6,100 +6,103 @@ import React from 'react';
 
 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 { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
 
-import { MARKDOWN_PLUGIN } from '../../meta';
-import { type MarkdownSettingsProps } from '../../types';
+import { meta } from '../../meta';
+import { type Markdown } from '../../types';
 
-export const MarkdownSettings = ({ settings }: { settings: MarkdownSettingsProps }) => {
-  const { t } = useTranslation(MARKDOWN_PLUGIN);
+export const MarkdownSettings = ({ settings }: { settings: Markdown.Settings }) => {
+  const { t } = useTranslation(meta.id);
 
   // TODO(wittjosiah): Add skill test confirmation for entering vim mode.
   return (
-    <DeprecatedFormContainer>
-      <DeprecatedFormInput label={t('default view mode label')}>
-        <Select.Root
-          value={settings.defaultViewMode}
-          onValueChange={(value) => {
-            settings.defaultViewMode = value as EditorViewMode;
-          }}
-        >
-          <Select.TriggerButton />
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                {EditorViewModes.map((mode) => (
-                  <Select.Option key={mode} value={mode}>
-                    {t(`${mode} mode label`, { ns: 'react-ui-editor' })}
-                  </Select.Option>
-                ))}
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      </DeprecatedFormInput>
+    <ControlPage>
+      <ControlSection title={t('settings title', { ns: meta.id })}>
+        <ControlGroup>
+          <ControlItemInput title={t('default view mode label')}>
+            <Select.Root
+              value={settings.defaultViewMode}
+              onValueChange={(value) => {
+                settings.defaultViewMode = value as EditorViewMode;
+              }}
+            >
+              <Select.TriggerButton />
+              <Select.Portal>
+                <Select.Content>
+                  <Select.Viewport>
+                    {EditorViewModes.map((mode) => (
+                      <Select.Option key={mode} value={mode}>
+                        {t(`${mode} mode label`, { ns: 'react-ui-editor' })}
+                      </Select.Option>
+                    ))}
+                  </Select.Viewport>
+                  <Select.Arrow />
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
+          </ControlItemInput>
 
-      <DeprecatedFormInput label={t('editor input mode label')}>
-        <Select.Root
-          value={settings.editorInputMode ?? 'default'}
-          onValueChange={(value) => {
-            settings.editorInputMode = value as EditorInputMode;
-          }}
-        >
-          <Select.TriggerButton placeholder={t('select editor input mode placeholder')} />
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                {EditorInputModes.map((mode) => (
-                  <Select.Option key={mode} value={mode}>
-                    {t(`settings editor input mode ${mode} label`)}
-                  </Select.Option>
-                ))}
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      </DeprecatedFormInput>
+          <ControlItemInput title={t('editor input mode label')}>
+            <Select.Root
+              value={settings.editorInputMode ?? 'default'}
+              onValueChange={(value) => {
+                settings.editorInputMode = value as EditorInputMode;
+              }}
+            >
+              <Select.TriggerButton placeholder={t('select editor input mode placeholder')} />
+              <Select.Portal>
+                <Select.Content>
+                  <Select.Viewport>
+                    {EditorInputModes.map((mode) => (
+                      <Select.Option key={mode} value={mode}>
+                        {t(`settings editor input mode ${mode} label`)}
+                      </Select.Option>
+                    ))}
+                  </Select.Viewport>
+                  <Select.Arrow />
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
+          </ControlItemInput>
 
-      <DeprecatedFormInput label={t('settings toolbar label')}>
-        <Input.Switch checked={settings.toolbar} onCheckedChange={(checked) => (settings.toolbar = !!checked)} />
-      </DeprecatedFormInput>
+          <ControlItemInput title={t('settings toolbar label')}>
+            <Input.Switch checked={settings.toolbar} onCheckedChange={(checked) => (settings.toolbar = !!checked)} />
+          </ControlItemInput>
 
-      <DeprecatedFormInput label={t('settings numbered headings label')}>
-        <Input.Switch
-          checked={settings.numberedHeadings}
-          onCheckedChange={(checked) => (settings.numberedHeadings = !!checked)}
-        />
-      </DeprecatedFormInput>
+          <ControlItemInput title={t('settings numbered headings label')}>
+            <Input.Switch
+              checked={settings.numberedHeadings}
+              onCheckedChange={(checked) => (settings.numberedHeadings = !!checked)}
+            />
+          </ControlItemInput>
 
-      <DeprecatedFormInput label={t('settings folding label')}>
-        <Input.Switch checked={settings.folding} onCheckedChange={(checked) => (settings.folding = !!checked)} />
-      </DeprecatedFormInput>
+          <ControlItemInput title={t('settings folding label')}>
+            <Input.Switch checked={settings.folding} onCheckedChange={(checked) => (settings.folding = !!checked)} />
+          </ControlItemInput>
 
-      <DeprecatedFormInput label={t('settings experimental label')}>
-        <Input.Switch
-          checked={settings.experimental}
-          onCheckedChange={(checked) => (settings.experimental = !!checked)}
-        />
-      </DeprecatedFormInput>
+          <ControlItemInput title={t('settings experimental label')}>
+            <Input.Switch
+              checked={settings.experimental}
+              onCheckedChange={(checked) => (settings.experimental = !!checked)}
+            />
+          </ControlItemInput>
 
-      <DeprecatedFormInput
-        label={t('settings debug label')}
-        secondary={
-          settings.debug ? (
-            <Input.Root>
+          <ControlItemInput title={t('settings debug label')}>
+            <Input.Switch checked={settings.debug} onCheckedChange={(checked) => (settings.debug = !!checked)} />
+          </ControlItemInput>
+
+          {settings.debug && (
+            <ControlItemInput title={t('settings debug textarea label', { ns: meta.id })}>
               <Input.TextArea
                 rows={5}
                 value={settings.typewriter}
                 onChange={({ target: { value } }) => (settings.typewriter = value)}
                 placeholder={t('settings debug placeholder')}
               />
-            </Input.Root>
-          ) : undefined
-        }
-      >
-        <Input.Switch checked={settings.debug} onCheckedChange={(checked) => (settings.debug = !!checked)} />
-      </DeprecatedFormInput>
-    </DeprecatedFormContainer>
+            </ControlItemInput>
+          )}
+        </ControlGroup>
+      </ControlSection>
+    </ControlPage>
   );
 };

package/src/components/Suggestions.stories.tsx

@@ -2,46 +2,42 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta } from '@storybook/react-vite';
-import { Match, Option, pipe, Schema } from 'effect';
+import * as Function from 'effect/Function';
+import * as Match from 'effect/Match';
+import * as Option from 'effect/Option';
+import * as Schema from 'effect/Schema';
 import React, { type FC, useEffect, useMemo, useState } from 'react';
 
-import {
-  Capabilities,
-  CollaborationActions,
-  IntentPlugin,
-  SettingsPlugin,
-  contributes,
-  createIntent,
-  useCapability,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
+import { Capabilities, IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
+import { useCapability, useIntentDispatcher } from '@dxos/app-framework/react';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Obj, Ref, Type } from '@dxos/echo';
+import { createDocAccessor, toCursorRange } from '@dxos/echo-db';
 import { invariant } from '@dxos/invariant';
-import { DXN } from '@dxos/keys';
 import { ClientPlugin } from '@dxos/plugin-client';
+import { GraphPlugin } from '@dxos/plugin-graph';
 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 { 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 { withTheme } from '@dxos/react-ui/testing';
+import { 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 { DataType } from '@dxos/schema';
-import { withLayout } from '@dxos/storybook-utils';
+import { render } from '@dxos/storybook-utils';
+import { Message } from '@dxos/types';
 
-import MarkdownContainer from './MarkdownContainer';
-import { MarkdownPlugin } from '../MarkdownPlugin';
 import { MarkdownCapabilities } from '../capabilities';
-import { MARKDOWN_PLUGIN } from '../meta';
+import { MarkdownPlugin } from '../MarkdownPlugin';
+import { meta } from '../meta';
 import { translations } from '../translations';
-import { createDocument, DocumentType, type MarkdownSettingsProps } from '../types';
+import { Markdown } from '../types';
+
+import { MarkdownContainer } from './MarkdownContainer';
 
 faker.seed(1);
 
@@ -61,20 +57,20 @@ const TestItem = Schema.Struct({
   }),
 );
 
-const TestChat: FC<{ doc: DocumentType; content: string }> = ({ doc, content }) => {
+const TestChat: FC<{ doc: Markdown.Document; 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<DataType.Message>(queueDxn);
+  const queue = useQueue<Message.Message>(queueDxn);
 
   const handleInsert = async () => {
     invariant(space);
     invariant(queue);
     await queue.append([
-      Obj.make(DataType.Message, {
+      Obj.make(Message.Message, {
         created: new Date().toISOString(),
         sender: { role: 'assistant' },
         blocks: [{ _tag: 'text', text: 'Hello' }],
@@ -85,8 +81,8 @@ const TestChat: FC<{ doc: DocumentType; content: string }> = ({ doc, content })
 
     const text = await doc.content.load();
     const accessor = createDocAccessor(text, ['content']);
-    const cursor = pipe(
-      editorState.getState(fullyQualifiedId(doc))?.selection,
+    const cursor = Function.pipe(
+      editorState.getState(Obj.getDXN(doc).toString())?.selection,
       Option.fromNullable,
       Option.map(selectionToRange),
       Option.map((range) => toCursorRange(accessor, range.from, range.to)),
@@ -98,14 +94,14 @@ const TestChat: FC<{ doc: DocumentType; content: string }> = ({ doc, content })
     //   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',
-      }),
-    );
+    // 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 (
@@ -120,8 +116,8 @@ const TestChat: FC<{ doc: DocumentType; content: string }> = ({ doc, 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 [doc, setDoc] = useState<Markdown.Document>();
+  const settings = useCapability(Capabilities.SettingsStore).getStore<Markdown.Settings>(meta.id)!.value;
   const { editorState } = useCapability(MarkdownCapabilities.State);
 
   useEffect(() => {
@@ -130,14 +126,17 @@ const DefaultStory = ({ document, chat }: { document: string; chat: string }) =>
     }
 
     const doc = space.db.add(
-      createDocument({
+      Markdown.make({
         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 obj = space.db.add(
+            Obj.make(TestItem, {
+              title: label,
+              description: faker.lorem.paragraph(),
+            }),
+          );
           const dxn = Ref.make(obj).dxn.toString();
-          return `[${label}][${dxn}]`;
+          return `[${label}](${dxn})`;
         }),
       }),
     );
@@ -146,48 +145,54 @@ const DefaultStory = ({ document, chat }: { document: string; chat: string }) =>
   }, [space]);
 
   if (!space || !doc) {
-    return <></>;
+    return null;
   }
 
+  // TODO(burdon): Layout issue.
   return (
-    <>
+    <div className='grid grid-cols-2 bs-full overflow-hidden'>
       <MarkdownContainer id={doc.id} object={doc} settings={settings} editorStateStore={editorState} />
       <TestChat doc={doc} content={chat} />
-    </>
+    </div>
   );
 };
 
-const meta: Meta<typeof DefaultStory> = {
+const storybook: Meta<typeof DefaultStory> = {
   title: 'plugins/plugin-markdown/Suggestions',
-  render: DefaultStory,
+  render: render(DefaultStory),
   decorators: [
+    withTheme,
     withPluginManager({
       plugins: [
-        ThemePlugin({ tx: defaultTx }),
-        StorybookLayoutPlugin(),
         ClientPlugin({
-          types: [DocumentType, TestItem],
-          onClientInitialized: async (_, client) => {
+          types: [Markdown.Document, TestItem],
+          onClientInitialized: async ({ client }) => {
             await client.halo.createIdentity();
           },
         }),
-        SpacePlugin(),
-        SettingsPlugin(),
+        SpacePlugin({}),
+        GraphPlugin(),
         IntentPlugin(),
+        SettingsPlugin(),
+
+        // UI
+        ThemePlugin({ tx: defaultTx }),
         MarkdownPlugin(),
         PreviewPlugin(),
+        StorybookLayoutPlugin({}),
       ],
-      capabilities: [contributes(MarkdownCapabilities.Extensions, [() => command()])],
     }),
-    withLayout({ fullscreen: true, classNames: 'grid grid-cols-2' }),
   ],
   parameters: {
+    layout: 'fullscreen',
+    controls: {
+      disable: true,
+    },
     translations,
-    controls: { disable: true },
   },
 };
 
-export default meta;
+export default storybook;
 
 type Story = Meta<typeof DefaultStory>;
 

package/src/components/index.ts

@@ -2,9 +2,16 @@
 // Copyright 2023 DXOS.org
 //
 
-import { lazy } from 'react';
+import { type LazyExoticComponent, lazy } from 'react';
 
+import { type MarkdownCard as MarkdownCardType } from './MarkdownCard';
+import { type MarkdownContainer as MarkdownContainerType } from './MarkdownContainer';
+
+export * from './MarkdownCard';
+export * from './MarkdownContainer';
 export * from './MarkdownSettings';
 
-export const MarkdownContainer = lazy(() => import('./MarkdownContainer'));
-export const MarkdownPreview = lazy(() => import('./MarkdownPreview'));
+export const MarkdownCard: LazyExoticComponent<typeof MarkdownCardType> = lazy(() => import('./MarkdownCard'));
+export const MarkdownContainer: LazyExoticComponent<typeof MarkdownContainerType> = lazy(
+  () => import('./MarkdownContainer'),
+);

package/src/events.ts

@@ -4,8 +4,8 @@
 
 import { Events } from '@dxos/app-framework';
 
-import { MARKDOWN_PLUGIN } from './meta';
+import { meta } from './meta';
 
 export namespace MarkdownEvents {
-  export const SetupExtensions = Events.createStateEvent(`${MARKDOWN_PLUGIN}/setup-extensions`);
+  export const SetupExtensions = Events.createStateEvent(`${meta.id}/event/setup-extensions`);
 }