@dxos/plugin-markdown 0.8.4-main.ead640a → 0.8.4-main.effb148878

package/src/containers/MarkdownArticle/MarkdownArticle.tsx

@@ -0,0 +1,146 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import { Atom } from '@effect-atom/atom-react';
+import React, { forwardRef, useCallback, useMemo } from 'react';
+
+import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
+import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
+import { AppSurface, useAppGraph } from '@dxos/app-toolkit/ui';
+import { Obj } from '@dxos/echo';
+import { useActionRunner } from '@dxos/plugin-graph';
+import { useObject } from '@dxos/react-client/echo';
+import { Panel } from '@dxos/react-ui';
+import { type SelectionManager } from '@dxos/react-ui-attention';
+import { Editor } from '@dxos/react-ui-editor';
+import { Text } from '@dxos/schema';
+
+import {
+  MarkdownEditor,
+  MarkdownEditorProvider,
+  type MarkdownEditorContentProps,
+  type MarkdownEditorProviderProps,
+} from '#components';
+import { useLinkQuery } from '#hooks';
+import { Markdown, MarkdownCapabilities, type MarkdownPluginState } from '#types';
+
+export type MarkdownArticleProps = AppSurface.ObjectArticleProps<
+  Markdown.Document | Text.Text,
+  {
+    id: string;
+    settings: Markdown.Settings;
+    selectionManager?: SelectionManager;
+  } & Pick<MarkdownPluginState, 'extensionProviders'> &
+    Pick<MarkdownEditorProviderProps, 'viewMode' | 'onSelectObject' | 'onViewModeChange'> &
+    Pick<MarkdownEditorContentProps, 'editorStateStore'>
+>;
+
+export const MarkdownArticle = forwardRef<HTMLDivElement, MarkdownArticleProps>(
+  (
+    { role, subject: object, id, attendableId, settings, extensionProviders, onSelectObject, viewMode, ...props },
+    forwardedRef,
+  ) => {
+    const db = Obj.isObject(object) ? Obj.getDatabase(object) : undefined;
+    const [docContent] = useObject(Obj.instanceOf(Markdown.Document, object) ? object.content : undefined, 'content');
+    const [textContent] = useObject(Obj.instanceOf(Text.Text, object) ? object : undefined, 'content');
+    const initialValue = docContent ?? textContent;
+
+    // Extensions from other plugins.
+    const otherExtensionProviders = useCapabilities(MarkdownCapabilities.Extensions);
+    const extensions = useMemo<Extension[]>(() => {
+      if (!Obj.instanceOf(Markdown.Document, object) && !Obj.instanceOf(Text.Text, object)) {
+        return [];
+      }
+
+      const document = Obj.instanceOf(Markdown.Document, object) ? object : undefined;
+      return [...(otherExtensionProviders ?? []), ...(extensionProviders ?? [])]
+        .flat()
+        .reduce((acc: Extension[], provider) => {
+          const extension = typeof provider === 'function' ? provider({ document, viewMode }) : provider;
+          if (extension) {
+            acc.push(extension);
+          }
+
+          return acc;
+        }, []);
+    }, [extensionProviders, otherExtensionProviders, object, viewMode]);
+
+    // Toolbar actions from app graph.
+    const { graph } = useAppGraph();
+    const runAction = useActionRunner();
+    const customActions = useMemo(() => {
+      return Atom.make((get) => {
+        const actions = get(graph.actions(attendableId ?? id));
+        const nodes = actions.filter((action) => action.properties.disposition === 'toolbar');
+        const edges = nodes.map((node) => ({ source: 'root', target: node.id, relation: 'child' }));
+        return { nodes, edges };
+      });
+    }, [graph]);
+
+    // File upload.
+    const [upload] = useCapabilities(AppCapabilities.FileUploader);
+    const handleFileUpload = useMemo(() => {
+      if (!db || !upload) {
+        return undefined;
+      }
+
+      return async (file: File) => upload(db, file);
+    }, [db, upload]);
+
+    // Query for @ refs.
+    const handleLinkQuery = useLinkQuery(db);
+
+    // Open linked objects.
+    const { invokePromise } = useOperationInvoker();
+    const handleSelectObject = useCallback(
+      (targetId: string) => {
+        if (onSelectObject) {
+          onSelectObject(targetId);
+        } else {
+          void invokePromise?.(LayoutOperation.Open, {
+            subject: [targetId],
+            pivotId: attendableId,
+            // TODO(wittjosiah): This should probably pre-validate.
+            navigation: 'immediate',
+          });
+        }
+      },
+      [onSelectObject, invokePromise, attendableId],
+    );
+
+    return (
+      <MarkdownEditorProvider
+        id={id}
+        attendableId={attendableId}
+        object={object}
+        compact={role !== 'article'}
+        extensions={extensions}
+        settings={settings}
+        viewMode={viewMode}
+        onAction={runAction}
+        onFileUpload={handleFileUpload}
+        onLinkQuery={handleLinkQuery}
+        onSelectObject={handleSelectObject}
+        {...props}
+      >
+        {(editorRootProps) => (
+          <Editor.Root {...editorRootProps}>
+            <Panel.Root role={role} ref={forwardedRef}>
+              {settings.toolbar && (
+                <Panel.Toolbar classNames='bg-toolbar-surface'>
+                  <MarkdownEditor.Toolbar classNames='dx-document' customActions={customActions} />
+                </Panel.Toolbar>
+              )}
+              <Panel.Content>
+                <MarkdownEditor.Content initialValue={initialValue} />
+                <MarkdownEditor.Blocks />
+              </Panel.Content>
+            </Panel.Root>
+          </Editor.Root>
+        )}
+      </MarkdownEditorProvider>
+    );
+  },
+);

package/src/containers/MarkdownArticle/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { MarkdownArticle, type MarkdownArticleProps } from './MarkdownArticle';
+export { MarkdownArticle as default } from './MarkdownArticle';

package/src/containers/MarkdownCard/MarkdownCard.stories.tsx

@@ -0,0 +1,68 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useMemo } from 'react';
+
+import { ProcessManagerPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Obj } from '@dxos/echo';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
+import { Markdown } from '@dxos/plugin-markdown';
+import { random } from '@dxos/random';
+import { Card } from '@dxos/react-ui';
+import { CardContainer } from '@dxos/react-ui-mosaic/testing';
+import { withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { MarkdownCard, type MarkdownCardProps } from './MarkdownCard';
+
+random.seed(1234);
+
+const MarkdownCardStory = ({ ...args }: Omit<MarkdownCardProps, 'subject'>) => {
+  const subject = useMemo(
+    () =>
+      Markdown.make({
+        name: random.lorem.words(3),
+        content: '# Title\n' + random.lorem.paragraphs(5),
+      }),
+    [],
+  );
+
+  return (
+    <CardContainer icon='ph--text-aa--regular'>
+      <Card.Root border={false}>
+        <Card.Header>
+          <Card.DragHandle />
+          <Card.Title>{Obj.getLabel(subject)}</Card.Title>
+          <Card.Menu />
+        </Card.Header>
+        <MarkdownCard subject={subject} {...args} />
+      </Card.Root>
+    </CardContainer>
+  );
+};
+
+const meta: Meta<typeof MarkdownCardStory> = {
+  title: 'plugins/plugin-markdown/containers/MarkdownCard',
+  component: MarkdownCardStory,
+  decorators: [
+    withTheme(),
+    withPluginManager({
+      plugins: [ProcessManagerPlugin(), ClientPlugin({})],
+    }),
+  ],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+  tags: ['cards'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/containers/MarkdownCard/MarkdownCard.tsx

@@ -0,0 +1,75 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { Obj } from '@dxos/echo';
+import { Card, useTranslation } from '@dxos/react-ui';
+import { Editor } from '@dxos/react-ui-editor';
+import { Text } from '@dxos/schema';
+import { mx } from '@dxos/ui-theme';
+
+import { MarkdownEditor, MarkdownEditorProvider } from '#components';
+import { meta } from '#meta';
+import { Markdown } from '#types';
+
+import { getContentSnippet } from '../../util';
+import { snippet as snippetExtension } from './snippet';
+
+export type MarkdownCardProps = { subject: Markdown.Document | Text.Text };
+
+export const MarkdownCard = ({ subject }: MarkdownCardProps) => {
+  const { t } = useTranslation(meta.id);
+  const snippet = useMemo(() => getSnippet(subject), [subject]);
+  const extensions = useMemo(() => [snippetExtension({ height: 300, scale: 0.8 })], []);
+  const info = getInfo(subject);
+
+  return (
+    <Card.Body>
+      {snippet && (
+        <Card.Section className='relative'>
+          <Card.Row fullWidth>
+            <MarkdownEditorProvider id={subject.id} viewMode='readonly' extensions={extensions}>
+              {(editorRootProps) => (
+                <Editor.Root {...editorRootProps}>
+                  <MarkdownEditor.Content initialValue={snippet} slots={{ content: { className: 'px-2!' } }} />
+                </Editor.Root>
+              )}
+            </MarkdownEditorProvider>
+            <Fade />
+          </Card.Row>
+        </Card.Section>
+      )}
+      <Card.Section>
+        <Card.Row fullWidth>
+          <Card.Text classNames='px-2 text-xs text-description'>
+            {info.words} {t('words.label', { count: info.words })}
+          </Card.Text>
+        </Card.Row>
+      </Card.Section>
+    </Card.Body>
+  );
+};
+
+const Fade = () => (
+  <div
+    className={mx(
+      'z-10 absolute bottom-0 inset-x-0 h-12 w-full',
+      'bg-gradient-to-b from-transparent to-(--surface-bg) pointer-events-none',
+    )}
+  />
+);
+
+const getSnippet = (subject: Markdown.Document | Text.Text, fallback?: string, maxLines = 16) => {
+  if (Obj.instanceOf(Markdown.Document, subject)) {
+    return Obj.getDescription(subject) || getContentSnippet(subject.content?.target?.content ?? fallback, maxLines);
+  } else if (Obj.instanceOf(Text.Text, subject)) {
+    return getContentSnippet(subject.content ?? fallback, maxLines);
+  }
+};
+
+const getInfo = (subject: Markdown.Document | Text.Text) => {
+  const text = (Obj.instanceOf(Markdown.Document, subject) ? subject.content?.target?.content : subject.content) ?? '';
+  return { words: text.split(' ').length };
+};

package/src/containers/MarkdownCard/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { MarkdownCard as default } from './MarkdownCard';

package/src/containers/MarkdownCard/snippet.ts

@@ -0,0 +1,54 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { EditorState } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+
+export type SnippetOptions = {
+  /** Maximum height of the editor in pixels. Overflowing content is hidden. */
+  height: number;
+  /** Zoom factor applied to the editor (e.g. 0.5 renders at 50%). @default 1 */
+  scale?: number;
+};
+
+/**
+ * CodeMirror extension for rendering a non-scrollable snippet of editor content.
+ * Constrains the editor to the given height via CSS `max-height`, wraps long
+ * lines (`pre-wrap`), and disables scrolling entirely.
+ *
+ * NOTE: Uses CSS `zoom` rather than `transform: scale` because `zoom` affects
+ * layout, so line wrapping fills the full visual width of the container.
+ * `transform: scale` only scales paint output, leaving empty space on the right.
+ */
+export const snippet = ({ height, scale = 1 }: SnippetOptions) => {
+  return [
+    EditorState.readOnly.of(true),
+    EditorView.editable.of(false),
+    EditorState.transactionFilter.of((tr) => {
+      if (tr.selection) {
+        return [];
+      } // Drop any selection changes.
+      return tr;
+    }),
+    EditorView.theme({
+      // Outer editor element: clip to the caller-specified height.
+      '&': {
+        maxHeight: `${height}px`,
+        overflow: 'hidden',
+      },
+      '.cm-scroller': {
+        // Prevent scroll; scale up the inner clip so the final pixel height matches `height`.
+        maxHeight: `${height / scale}px`,
+        overflow: 'hidden !important',
+        padding: '0',
+      },
+      '.cm-content': {
+        // zoom (unlike transform: scale) affects layout, so line-wrapping fills the full visual width of the container.
+        zoom: scale,
+        margin: '0',
+        padding: '0',
+      },
+    }),
+  ];
+};

package/src/containers/index.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export type { MarkdownArticleProps } from './MarkdownArticle';
+
+export const MarkdownCard: ComponentType<any> = lazy(() => import('./MarkdownCard'));
+export const EditableMarkdownCard: ComponentType<any> = lazy(() => import('./EditableMarkdownCard'));
+export const MarkdownArticle: ComponentType<any> = lazy(() => import('./MarkdownArticle'));

package/src/hooks/index.ts

@@ -2,4 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './useSelectCurrentThread';
+export * from './useEditorMenuOptions';
+export * from './useExtensions';
+export * from './useLinkQuery';

package/src/hooks/useEditorMenuOptions.ts

@@ -0,0 +1,68 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import { useCallback, useMemo, useRef } from 'react';
+
+import { toLocalizedString, useTranslation } from '@dxos/react-ui';
+import {
+  type EditorMenuGroup,
+  type UseEditorMenuProps,
+  filterMenuGroups,
+  formattingCommands,
+  linkSlashCommands,
+} from '@dxos/react-ui-editor';
+import { Domino } from '@dxos/ui';
+
+import { meta } from '#meta';
+
+export type UseEditorMenuOptionsProps = {
+  editorView?: EditorView;
+  slashCommandGroups?: EditorMenuGroup[];
+  onLinkQuery?: (query?: string) => Promise<EditorMenuGroup[]>;
+};
+
+export const useEditorMenuOptions = ({
+  editorView,
+  slashCommandGroups,
+  onLinkQuery,
+}: UseEditorMenuOptionsProps): UseEditorMenuProps => {
+  const { t } = useTranslation(meta.id);
+
+  const getMenu = useCallback<NonNullable<UseEditorMenuProps['getMenu']>>(
+    ({ text, trigger }) => {
+      switch (trigger) {
+        case '@': {
+          return onLinkQuery?.(text) ?? [];
+        }
+
+        case '/':
+        default: {
+          return filterMenuGroups([formattingCommands, linkSlashCommands, ...(slashCommandGroups ?? [])], (item) =>
+            text ? toLocalizedString(item.label, t).toLowerCase().includes(text.toLowerCase()) : true,
+          );
+        }
+      }
+    },
+    [slashCommandGroups, onLinkQuery],
+  );
+
+  const viewRef = useRef(editorView);
+  return useMemo<UseEditorMenuProps>(() => {
+    const trigger = onLinkQuery ? ['/', '@'] : ['/'];
+    const placeholder = {
+      delay: 3_000,
+      content: () => {
+        const pressEl = Domino.of('span').text('Press');
+        const triggerEls = trigger.map((text) =>
+          Domino.of('span').classNames('mx-1 px-1.5 pt-[1px] pb-[2px] border border-separator rounded-xs').text(text),
+        );
+        const forCommandsEl = Domino.of('span').text('for commands.');
+        return Domino.of('div').append(pressEl, ...triggerEls, forCommandsEl).root;
+      },
+    };
+
+    return { viewRef, getMenu, trigger, placeholder };
+  }, [getMenu, onLinkQuery]);
+};