@dxos/plugin-markdown 0.8.4-main.72ec0f3 → 0.8.4-main.74a063c4e0

package/src/components/MarkdownEditor/MarkdownEditorToolbar.tsx

@@ -5,59 +5,54 @@
 import { type EditorView } from '@codemirror/view';
 import React, { useCallback, useState } from 'react';
 
-import { type FileInfo } from '@dxos/app-framework';
+import { type FileInfo } from '@dxos/app-toolkit';
 import { invariant } from '@dxos/invariant';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { EditorToolbar, type EditorToolbarProps, type EditorViewMode } from '@dxos/react-ui-editor';
+import { EditorToolbar, type EditorToolbarProps } from '@dxos/react-ui-editor';
+import { composable, composableProps } from '@dxos/ui-theme';
 
 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} />}
-    </>
-  );
-};
+export type MarkdownEditorToolbarProps = {
+  id: string;
+  editorView?: EditorView;
+  onFileUpload?: (file: File) => Promise<FileInfo | undefined>;
+} & Pick<EditorToolbarProps, 'role' | 'state' | 'customActions' | 'onAction' | 'onViewModeChange'>;
+
+export const MarkdownEditorToolbar = composable<HTMLDivElement, MarkdownEditorToolbarProps>(
+  (
+    { id, role, state, editorView, customActions, onAction, onFileUpload, onViewModeChange, ...props },
+    forwardedRef,
+  ) => {
+    const { className, ...rest } = composableProps(props);
+    const [upload, setUpload] = useState<FileUploadAction | null>(null);
+    const uploadRef = useCallback((next: FileUploadAction) => setUpload(() => next), []);
+
+    const getView = useCallback(() => {
+      invariant(editorView);
+      return editorView;
+    }, [editorView]);
+
+    if (!editorView) {
+      return <div className={className} {...rest} ref={forwardedRef} />;
+    }
+
+    return (
+      <div role='none' className='contents' ref={forwardedRef}>
+        <EditorToolbar
+          {...rest}
+          classNames={className}
+          attendableId={id}
+          role={role}
+          state={state}
+          customActions={customActions}
+          getView={getView}
+          onAction={onAction}
+          onImageUpload={upload ?? undefined}
+          onViewModeChange={onViewModeChange}
+        />
+
+        {onFileUpload && <FileUpload ref={uploadRef} editorView={editorView} onFileUpload={onFileUpload} />}
+      </div>
+    );
+  },
+);

package/src/components/MarkdownSettings/MarkdownSettings.stories.tsx

@@ -0,0 +1,39 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '../../translations';
+import { MarkdownSettings } from './MarkdownSettings';
+
+const meta = {
+  title: 'plugins/plugin-markdown/components/MarkdownSettings',
+  tags: ['settings'],
+  component: MarkdownSettings,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof MarkdownSettings>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    settings: {
+      defaultViewMode: 'preview',
+      editorInputMode: 'default',
+      toolbar: true,
+      numberedHeadings: false,
+      folding: false,
+      experimental: false,
+      debug: false,
+    },
+  },
+};

package/src/components/MarkdownSettings/MarkdownSettings.tsx

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

package/src/components/MarkdownSettings/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './MarkdownSettings';
+export { MarkdownSettings as default } from './MarkdownSettings';

package/src/components/index.ts

@@ -1,12 +1,9 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
-import { lazy } from 'react';
+import { type ComponentType, lazy } from 'react';
 
-export * from './MarkdownCard';
-export * from './MarkdownContainer';
-export * from './MarkdownSettings';
+export * from './MarkdownEditor';
 
-export const MarkdownCard = lazy(() => import('./MarkdownCard'));
-export const MarkdownContainer = lazy(() => import('./MarkdownContainer'));
+export const MarkdownSettings: ComponentType<any> = lazy(() => import('./MarkdownSettings'));

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

@@ -0,0 +1,67 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useMemo } from 'react';
+
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Obj } from '@dxos/echo';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { Markdown } from '@dxos/plugin-markdown/types';
+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: random.lorem.paragraphs(5),
+      }),
+    [],
+  );
+
+  return (
+    <CardContainer icon='ph--text-aa--regular'>
+      <Card.Root border={false}>
+        <Card.Toolbar>
+          <Card.DragHandle />
+          <Card.Title>{Obj.getLabel(subject)}</Card.Title>
+          <Card.Menu />
+        </Card.Toolbar>
+        <MarkdownCard subject={subject} {...args} />
+      </Card.Root>
+    </CardContainer>
+  );
+};
+
+const meta: Meta<typeof MarkdownCardStory> = {
+  title: 'plugins/plugin-markdown/containers/MarkdownCard',
+  component: MarkdownCardStory,
+  decorators: [
+    withTheme(),
+    withPluginManager({
+      plugins: [OperationPlugin(), RuntimePlugin(), 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,57 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { Obj } from '@dxos/echo';
+import { Card, useTranslation } from '@dxos/react-ui';
+import { Text } from '@dxos/schema';
+
+import { MarkdownEditor } 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: 240, scale: 0.8 })], []);
+  const info = getInfo(subject);
+
+  return (
+    <Card.Content>
+      {snippet && (
+        <Card.Section className='px-1'>
+          <MarkdownEditor.Root id={subject.id} viewMode='readonly' extensions={extensions}>
+            <MarkdownEditor.Content initialValue={snippet} slots={{ content: { className: 'm-0' } }} />
+          </MarkdownEditor.Root>
+        </Card.Section>
+      )}
+      <Card.Section>
+        <Card.Text classNames='px-1.5 text-xs text-description'>
+          {info.words} {t('words.label', { count: info.words })}
+        </Card.Text>
+      </Card.Section>
+    </Card.Content>
+  );
+};
+
+const MAX_LINES = 5;
+
+const getSnippet = (subject: Markdown.Document | Text.Text, fallback?: string) => {
+  if (Obj.instanceOf(Markdown.Document, subject)) {
+    return Obj.getDescription(subject) || getContentSnippet(subject.content?.target?.content ?? fallback, MAX_LINES);
+  } else if (Obj.instanceOf(Text.Text, subject)) {
+    return getContentSnippet(subject.content ?? fallback, MAX_LINES);
+  }
+};
+
+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,78 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type PluginValue, EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+
+export type SnippetOptions = {
+  /** Maximum height of the editor in pixels. Content is clipped to whole lines within this height. */
+  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, clips to whole line boundaries,
+ * and disables scrolling entirely.
+ * Uses requestMeasure to read post-layout heights and lineBlockAtHeight to handle
+ * varying line heights from headings and other decorated blocks.
+ */
+export const snippet = ({ height, scale = 1 }: SnippetOptions) => {
+  // Internal height is divided by scale so the visible area matches the requested height.
+  const internalHeight = Math.round(height / scale);
+
+  const clipPlugin = ViewPlugin.fromClass(
+    class SnippetPlugin implements PluginValue {
+      private clipHeight = 0;
+
+      update(update: ViewUpdate) {
+        update.view.requestMeasure({
+          // key deduplicates concurrent requests within the same animation frame.
+          key: this,
+          read: (view) => {
+            const containerHeight = view.dom.clientHeight;
+            if (containerHeight === 0) {
+              return 0;
+            }
+            // With CSS zoom, clientHeight can be in visual pixels while line positions use
+            // layout pixels (same space as internalHeight / theme maxHeight).
+            const clipLimit = scale === 1 ? containerHeight : Math.min(internalHeight, containerHeight / scale);
+            // Find the block (line) at the very bottom of the visible area.
+            const block = view.lineBlockAtHeight(clipLimit - 1);
+            // If the block overflows the container, clip at the block's top edge.
+            return block.top + block.height > clipLimit ? block.top : clipLimit;
+          },
+          write: (clipHeight, view) => {
+            if (clipHeight > 0 && clipHeight !== this.clipHeight) {
+              this.clipHeight = clipHeight;
+              view.dom.style.maxHeight = `${clipHeight}px`;
+            }
+          },
+        });
+      }
+    },
+  );
+
+  return [
+    clipPlugin,
+    EditorView.theme({
+      '&': {
+        maxHeight: `${internalHeight}px`,
+        overflow: 'hidden',
+        ...(scale !== 1 && { zoom: `${scale}` }),
+      },
+      '.cm-content': {
+        whiteSpace: 'pre',
+        margin: '0',
+        padding: '0',
+      },
+      '.cm-line': {
+        padding: '0',
+      },
+      '.cm-scroller': {
+        overflow: 'hidden !important',
+      },
+    }),
+  ];
+};