@dxos/plugin-markdown 0.6.8-main.046e6cf

package/src/components/HeadingMenu.tsx

@@ -0,0 +1,46 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { DotsThreeVertical } from '@phosphor-icons/react';
+import React, { type PropsWithChildren, type FC } from 'react';
+
+import { Surface } from '@dxos/app-framework';
+import { Button, DropdownMenu } from '@dxos/react-ui';
+import { fineButtonDimensions, getSize } from '@dxos/react-ui-theme';
+
+import { type DocumentType, type MarkdownProperties } from '../types';
+
+// TODO(thure): This needs to be refactored into a graph node action.
+export const DocumentHeadingMenu: FC<{ document: DocumentType }> = ({ document }) => {
+  return <HeadingMenu properties={document} content={document.content?.content} />;
+};
+
+/**
+ * Menu for the layout heading.
+ */
+export const HeadingMenu = ({
+  content,
+  properties,
+}: PropsWithChildren<{
+  content: string | undefined;
+  properties: MarkdownProperties;
+}>) => {
+  return (
+    <DropdownMenu.Root modal={false}>
+      <DropdownMenu.Trigger asChild>
+        <Button variant='ghost' classNames={fineButtonDimensions}>
+          <DotsThreeVertical className={getSize(4)} />
+        </Button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content sideOffset={8} classNames='z-10'>
+          <DropdownMenu.Viewport>
+            <Surface data={{ content, properties }} role='menuitem' />
+          </DropdownMenu.Viewport>
+          <DropdownMenu.Arrow />
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+};

package/src/components/Layout.tsx

@@ -0,0 +1,27 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+
+import { Main } from '@dxos/react-ui';
+import { editorWithToolbarLayout } from '@dxos/react-ui-editor';
+import { topbarBlockPaddingStart } from '@dxos/react-ui-theme';
+
+export const MainLayout = ({ children, toolbar }: PropsWithChildren<{ toolbar?: boolean }>) => {
+  return (
+    <Main.Content
+      bounce
+      data-toolbar={toolbar ? 'enabled' : 'disabled'}
+      classNames={[topbarBlockPaddingStart, editorWithToolbarLayout]}
+    >
+      {children}
+    </Main.Content>
+  );
+};
+
+// Used when the editor is embedded in another context (e.g., iframe) and has no topbar/sidebar/etc.
+// TODO(wittjosiah): What's the difference between this and Section/Card?
+export const EmbeddedLayout = ({ children }: PropsWithChildren) => {
+  return <Main.Content classNames='min-bs-[100dvh] grid p-0.5'>{children}</Main.Content>;
+};

package/src/components/MarkdownEditor.stories.tsx

@@ -0,0 +1,55 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+import React, { useMemo, type FC } from 'react';
+
+import { createDocAccessor, createEchoObject } from '@dxos/react-client/echo';
+import { Tooltip } from '@dxos/react-ui';
+import { automerge } from '@dxos/react-ui-editor';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { MainLayout } from './Layout';
+import { MarkdownEditor } from './MarkdownEditor';
+
+const Story: FC<{
+  content: string;
+  toolbar?: boolean;
+}> = ({ content = '# Test', toolbar }) => {
+  const doc = useMemo(() => createEchoObject({ content }), [content]);
+  const extensions = useMemo(() => [automerge(createDocAccessor(doc, ['content']))], [doc]);
+
+  return (
+    <Tooltip.Provider>
+      <MainLayout toolbar={toolbar}>
+        <MarkdownEditor id='test' initialValue={doc.content} extensions={extensions} toolbar={toolbar} />
+      </MainLayout>
+    </Tooltip.Provider>
+  );
+};
+
+export default {
+  title: 'plugin-markdown/EditorMain',
+  component: MarkdownEditor,
+  decorators: [withTheme],
+  render: Story,
+  parameters: { layout: 'fullscreen' },
+};
+
+const content = Array.from({ length: 100 })
+  .map((_, i) => `Line ${i + 1}`)
+  .join('\n');
+
+export const Default = {
+  args: {
+    content,
+  },
+};
+
+export const WithToolbar = {
+  args: {
+    content,
+    toolbar: true,
+  },
+};

package/src/components/MarkdownEditor.tsx

@@ -0,0 +1,241 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import React, { useMemo, useEffect } from 'react';
+
+import {
+  LayoutAction,
+  useResolvePlugin,
+  useIntentResolver,
+  parseLayoutPlugin,
+  type FileInfo,
+  type LayoutCoordinate,
+} from '@dxos/app-framework';
+import { parseAttentionPlugin } from '@dxos/plugin-attention';
+import { useThemeContext, useTranslation } from '@dxos/react-ui';
+import {
+  type Action,
+  type DNDOptions,
+  type EditorViewMode,
+  type EditorInputMode,
+  type UseTextEditorProps,
+  Toolbar,
+  createBasicExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
+  dropFile,
+  processAction,
+  scrollThreadIntoView,
+  useActionHandler,
+  useCommentState,
+  useCommentClickListener,
+  useFormattingState,
+  useTextEditor,
+  editorContent,
+  editorGutter,
+} from '@dxos/react-ui-editor';
+import { sectionToolbarLayout } from '@dxos/react-ui-stack';
+import { textBlockWidth, focusRing, mx } from '@dxos/react-ui-theme';
+import { nonNullable } from '@dxos/util';
+
+import { MARKDOWN_PLUGIN } from '../meta';
+import type { MarkdownPluginState } from '../types';
+
+const attentionFragment = mx(
+  'group-focus-within/editor:attention-surface group-[[aria-current]]/editor:attention-surface',
+  'group-focus-within/editor:separator-separator',
+);
+
+const DEFAULT_VIEW_MODE: EditorViewMode = 'preview';
+
+export type MarkdownEditorProps = {
+  id: string;
+  coordinate?: LayoutCoordinate;
+  inputMode?: EditorInputMode;
+  role?: string;
+  scrollPastEnd?: boolean;
+  toolbar?: boolean;
+  viewMode?: EditorViewMode;
+  onViewModeChange?: (id: string, mode: EditorViewMode) => void;
+  onCommentSelect?: (id: string) => void;
+  onFileUpload?: (file: File) => Promise<FileInfo | undefined>;
+} & Pick<UseTextEditorProps, 'initialValue' | 'selection' | 'scrollTo' | 'extensions'> &
+  Partial<Pick<MarkdownPluginState, 'extensionProviders'>>;
+
+export const MarkdownEditor = ({
+  id,
+  role = 'article',
+  initialValue,
+  extensions,
+  extensionProviders,
+  scrollTo,
+  scrollPastEnd,
+  selection,
+  toolbar,
+  viewMode,
+  onCommentSelect,
+  onFileUpload,
+  onViewModeChange,
+}: MarkdownEditorProps) => {
+  const { t } = useTranslation(MARKDOWN_PLUGIN);
+  const { themeMode } = useThemeContext();
+  const attentionPlugin = useResolvePlugin(parseAttentionPlugin);
+  const layoutPlugin = useResolvePlugin(parseLayoutPlugin);
+  const attended = Array.from(attentionPlugin?.provides.attention?.attended ?? []);
+  const isDirectlyAttended = attended.length === 1 && attended[0] === id;
+  const [formattingState, formattingObserver] = useFormattingState();
+
+  // Extensions from other plugins.
+  const providerExtensions = useMemo(() => extensionProviders?.map((provider) => provider({})), [extensionProviders]);
+
+  // TODO(Zan): Move these into thread plugin as well?
+  const [commentsState, commentObserver] = useCommentState();
+  const commentClickObserver = useCommentClickListener((id) => {
+    onCommentSelect?.(id);
+  });
+
+  // Focus comment.
+  useIntentResolver(MARKDOWN_PLUGIN, ({ action, data }) => {
+    switch (action) {
+      case LayoutAction.SCROLL_INTO_VIEW: {
+        if (editorView) {
+          // TODO(Zan): Try catch this. Fails when thread plugin not present?
+          scrollThreadIntoView(editorView, data?.id);
+          if (data?.id === id) {
+            editorView.scrollDOM
+              .closest('[data-attendable-id]')
+              ?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'start' });
+          }
+          return undefined;
+        }
+        break;
+      }
+    }
+  });
+
+  const {
+    parentRef,
+    view: editorView,
+    focusAttributes,
+  } = useTextEditor(
+    () => ({
+      initialValue,
+      extensions: [
+        formattingObserver,
+        commentObserver,
+        commentClickObserver,
+        createBasicExtensions({
+          readonly: viewMode === 'readonly',
+          placeholder: t('editor placeholder'),
+          scrollPastEnd: role === 'section' ? false : scrollPastEnd,
+        }),
+        createMarkdownExtensions({ themeMode }),
+        createThemeExtensions({ themeMode, slots: { content: { className: editorContent } } }),
+        editorGutter,
+        role !== 'section' && onFileUpload ? dropFile({ onDrop: handleDrop }) : [],
+        providerExtensions,
+        extensions,
+      ].filter(nonNullable),
+      ...(role !== 'section' && {
+        id,
+        selection,
+        scrollTo,
+        // TODO(wittjosiah): Autofocus based on layout is racey.
+        autoFocus: layoutPlugin?.provides.layout ? layoutPlugin?.provides.layout.scrollIntoView === id : true,
+        moveToEndOfLine: true,
+      }),
+    }),
+    [id, initialValue, formattingObserver, viewMode, themeMode, extensions, providerExtensions],
+  );
+
+  useTest(editorView);
+
+  // Toolbar handler.
+  const handleToolbarAction = useActionHandler(editorView);
+  const handleAction = (action: Action) => {
+    if (action.type === 'view-mode') {
+      onViewModeChange?.(id, action.data);
+    }
+
+    handleToolbarAction?.(action);
+  };
+
+  // Drag files.
+  const handleDrop: DNDOptions['onDrop'] = async (view, { files }) => {
+    const file = files[0];
+    const info = file && onFileUpload ? await onFileUpload(file) : undefined;
+    if (info) {
+      processAction(view, { type: 'image', data: info.url });
+    }
+  };
+
+  return (
+    <div
+      role='none'
+      // TODO(burdon): Move role logic out of here (see sheet, table, sketch, etc.)
+      {...(role === 'section'
+        ? { className: 'flex flex-col' }
+        : {
+            className: 'contents group/editor',
+            ...(isDirectlyAttended && { 'aria-current': 'location' }),
+          })}
+    >
+      {toolbar && (
+        <div role='none' className={mx('flex shrink-0 justify-center', attentionFragment)}>
+          <Toolbar.Root
+            classNames={
+              role === 'section'
+                ? ['z-[2] group-focus-within/section:visible', !attended && 'invisible', sectionToolbarLayout]
+                : [
+                    textBlockWidth,
+                    'group-focus-within/editor:separator-separator group-[[aria-current]]/editor:separator-separator',
+                  ]
+            }
+            state={formattingState && { ...formattingState, ...commentsState }}
+            onAction={handleAction}
+          >
+            <Toolbar.Markdown />
+            {onFileUpload && <Toolbar.Custom onUpload={onFileUpload} />}
+            <Toolbar.Separator />
+            <Toolbar.View mode={viewMode ?? DEFAULT_VIEW_MODE} />
+            <Toolbar.Actions />
+          </Toolbar.Root>
+        </div>
+      )}
+      <div
+        role='none'
+        ref={parentRef}
+        data-testid='composer.markdownRoot'
+        data-toolbar={toolbar ? 'enabled' : 'disabled'}
+        className={
+          // TODO(burdon): Factor out margin for focus.
+          role === 'section'
+            ? mx('flex flex-col flex-1 min-bs-[12rem] mt-[2px]', focusRing)
+            : mx(
+                'flex is-full bs-full overflow-hidden',
+                focusRing,
+                attentionFragment,
+                'focus-visible:ring-inset',
+                'data-[toolbar=disabled]:pbs-2 data-[toolbar=disabled]:row-span-2',
+              )
+        }
+        {...focusAttributes}
+      />
+    </div>
+  );
+};
+
+// 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) => {
+  useEffect(() => {
+    const composer = (window as any).composer;
+    if (composer) {
+      composer.editorView = view;
+    }
+  }, [view]);
+};
+
+export default MarkdownEditor;

package/src/components/MarkdownSettings.tsx

@@ -0,0 +1,105 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { SettingsValue } from '@dxos/plugin-settings';
+import { Input, Select, useTranslation } from '@dxos/react-ui';
+import { type EditorInputMode, EditorInputModes, type EditorViewMode, EditorViewModes } from '@dxos/react-ui-editor';
+
+import { MARKDOWN_PLUGIN } from '../meta';
+import { type MarkdownSettingsProps } from '../types';
+
+export const MarkdownSettings = ({ settings }: { settings: MarkdownSettingsProps }) => {
+  const { t } = useTranslation(MARKDOWN_PLUGIN);
+
+  // TODO(wittjosiah): Add skill test confirmation for entering vim mode.
+  return (
+    <>
+      <SettingsValue 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>
+      </SettingsValue>
+
+      <SettingsValue 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>
+      </SettingsValue>
+
+      <SettingsValue label={t('settings toolbar label')}>
+        <Input.Switch checked={settings.toolbar} onCheckedChange={(checked) => (settings.toolbar = !!checked)} />
+      </SettingsValue>
+
+      <SettingsValue label={t('settings numbered headings label')}>
+        <Input.Switch
+          checked={settings.numberedHeadings}
+          onCheckedChange={(checked) => (settings.numberedHeadings = !!checked)}
+        />
+      </SettingsValue>
+
+      <SettingsValue label={t('settings folding label')}>
+        <Input.Switch checked={settings.folding} onCheckedChange={(checked) => (settings.folding = !!checked)} />
+      </SettingsValue>
+
+      <SettingsValue label={t('settings experimental label')}>
+        <Input.Switch
+          checked={settings.experimental}
+          onCheckedChange={(checked) => (settings.experimental = !!checked)}
+        />
+      </SettingsValue>
+
+      <SettingsValue
+        label={t('settings debug label')}
+        secondary={
+          settings.debug ? (
+            <Input.Root>
+              <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)} />
+      </SettingsValue>
+    </>
+  );
+};

package/src/components/Toolbar.stories.tsx

@@ -0,0 +1,118 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React, { type FC, useState } from 'react';
+
+import { create } from '@dxos/echo-schema';
+import { PublicKey } from '@dxos/keys';
+import { faker } from '@dxos/random';
+import { createDocAccessor, createEchoObject } from '@dxos/react-client/echo';
+import { Tooltip, useThemeContext } from '@dxos/react-ui';
+import {
+  type Action,
+  type Comment,
+  type EditorViewMode,
+  comments,
+  createBasicExtensions,
+  createDataExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
+  decorateMarkdown,
+  editorContent,
+  formattingKeymap,
+  Toolbar,
+  translations,
+  useActionHandler,
+  useComments,
+  useFormattingState,
+  useTextEditor,
+} from '@dxos/react-ui-editor';
+import { textBlockWidth } from '@dxos/react-ui-theme';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { TextType } from '../types';
+
+faker.seed(101);
+
+const Story: FC<{ content: string }> = ({ content }) => {
+  const { themeMode } = useThemeContext();
+  const [text] = useState(createEchoObject(create(TextType, { content })));
+  const [formattingState, formattingObserver] = useFormattingState();
+  const [viewMode, setViewMode] = useState<EditorViewMode>('preview');
+  const { parentRef, view } = useTextEditor(() => {
+    return {
+      id: text.id,
+      initialValue: text.content,
+      extensions: [
+        formattingObserver,
+        createBasicExtensions({ readonly: viewMode === 'readonly' }),
+        createMarkdownExtensions({ themeMode }),
+        createThemeExtensions({ themeMode, slots: { editor: { className: editorContent } } }),
+        createDataExtensions({ id: text.id, text: createDocAccessor(text, ['content']) }),
+        comments({
+          onCreate: ({ cursor }) => {
+            const id = PublicKey.random().toHex();
+            setComments((comments) => [...comments, { id, cursor }]);
+            return id;
+          },
+        }),
+        formattingKeymap(),
+        ...(viewMode !== 'source' ? [decorateMarkdown()] : []),
+      ],
+    };
+  }, [text, formattingObserver, viewMode, themeMode]);
+
+  const handleToolbarAction = useActionHandler(view);
+  const handleAction = (action: Action) => {
+    if (action.type === 'view-mode') {
+      setViewMode(action.data);
+    } else {
+      handleToolbarAction?.(action);
+    }
+  };
+
+  const [_comments, setComments] = useState<Comment[]>([]);
+  useComments(view, text.id, _comments);
+
+  return (
+    <Tooltip.Provider>
+      <div role='none' className='fixed inset-0 flex flex-col'>
+        <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
+          <Toolbar.View mode={viewMode} />
+          <Toolbar.Markdown />
+          <Toolbar.Custom onUpload={async (file) => ({ url: file.name })} />
+          <Toolbar.Separator />
+          <Toolbar.Actions />
+        </Toolbar.Root>
+        <div ref={parentRef} />
+      </div>
+    </Tooltip.Provider>
+  );
+};
+
+export default {
+  title: 'react-ui-editor/Toolbar',
+  component: Toolbar,
+  decorators: [withTheme],
+  parameters: { translations, layout: 'fullscreen' },
+  render: (args: any) => <Story {...args} />,
+} as any;
+
+const content = [
+  '# Demo',
+  '',
+  'The editor supports **Markdown** styles.',
+  '',
+  faker.lorem.paragraph({ min: 5, max: 8 }),
+  '',
+  '',
+].join('\n');
+
+export const Default = {
+  args: {
+    content,
+  },
+};

package/src/components/index.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type LazyExoticComponent } from 'react';
+
+import { type DocumentEditor as DocumentEditorType } from './DocumentEditor';
+
+export { type DocumentCardProps, type DocumentItemProps } from './DocumentCard';
+
+export * from './DocumentCard';
+export * from './DocumentEditor';
+export * from './MarkdownEditor';
+export * from './HeadingMenu';
+export * from './Layout';
+export * from './MarkdownSettings';
+
+// Lazily load components for content surfaces.
+export const DocumentCard = React.lazy(() => import('./DocumentCard'));
+export const DocumentEditor: LazyExoticComponent<DocumentEditorType> = React.lazy(() => import('./DocumentEditor'));
+export const MarkdownEditor = React.lazy(() => import('./MarkdownEditor'));