@dxos/plugin-markdown 0.8.4-main.dedc0f3 → 0.8.4-main.dfabb4ec29

package/src/containers/MarkdownContainer/MarkdownContainer.stories.tsx

@@ -0,0 +1,135 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React, { useMemo } from 'react';
+
+import { Capability, Plugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
+import { AppActivationEvents, LayoutOperation } from '@dxos/app-toolkit';
+import { AppSurface } from '@dxos/app-toolkit/ui';
+import { Obj, Query } from '@dxos/echo';
+import { ClientPlugin } from '@dxos/plugin-client/plugin';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { PreviewPlugin } from '@dxos/plugin-preview/testing';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
+import { random } from '@dxos/random';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
+import { useAsyncEffect } from '@dxos/react-ui';
+import { useAttentionAttributes } from '@dxos/react-ui-attention';
+import { withLayout } from '@dxos/react-ui/testing';
+import { Text } from '@dxos/schema';
+import { type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
+import { Organization, Person } from '@dxos/types';
+
+import { translations } from '#translations';
+import { Markdown, MarkdownCapabilities, MarkdownEvents } from '#types';
+
+import { MarkdownPlugin } from '../../MarkdownPlugin';
+
+random.seed(1);
+
+const generator: ValueGenerator = random as any;
+
+/** Minimal plugin that contributes an empty Extensions capability for stories. */
+const MarkdownExtensionsPlugin = Plugin.define({ id: 'story-markdown-extensions', name: 'Story Extensions' }).pipe(
+  Plugin.addModule({
+    id: 'extensions',
+    activatesOn: MarkdownEvents.SetupExtensions,
+    activate: () => Effect.succeed(Capability.contributes(MarkdownCapabilities.Extensions, [])),
+  }),
+  Plugin.make,
+);
+
+const DefaultStory = () => {
+  const { invokePromise } = useOperationInvoker();
+  const [space] = useSpaces();
+  const [doc] = useQuery(space?.db, Query.type(Markdown.Document));
+  const id = doc && Obj.getDXN(doc).toString();
+  const data = useMemo(() => ({ subject: doc, attendableId: id ?? 'story' }), [doc, id]);
+  const attentionAttrs = useAttentionAttributes(id);
+
+  useAsyncEffect(async () => {
+    if (space) {
+      await invokePromise(LayoutOperation.SwitchWorkspace, { subject: space.id });
+    }
+  }, [space, invokePromise]);
+
+  return (
+    <div className='contents' {...attentionAttrs}>
+      <Surface.Surface type={AppSurface.Article} data={data} limit={1} />
+    </div>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-markdown/containers/MarkdownContainer',
+  render: DefaultStory,
+  decorators: [
+    withLayout({ layout: 'column' }),
+    withPluginManager<{ title?: string; content?: string }>((context) => ({
+      setupEvents: [AppActivationEvents.SetupSettings, MarkdownEvents.SetupExtensions],
+      plugins: [
+        ...corePlugins(),
+        StorybookPlugin({}),
+        MarkdownExtensionsPlugin(),
+        ClientPlugin({
+          types: [Markdown.Document, Text.Text, Person.Person, Organization.Organization],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              const { personalSpace } = yield* initializeIdentity(client);
+
+              const createObjects = createObjectFactory(personalSpace.db, generator);
+              yield* Effect.promise(() => createObjects([{ type: Organization.Organization, count: 10 }]));
+
+              const queue = personalSpace.queues.create();
+              const kai = Obj.make(Person.Person, { fullName: 'Kai' });
+              const dxos = Obj.make(Organization.Organization, { name: 'DXOS' });
+              yield* Effect.promise(() => queue.append([kai, dxos]));
+
+              personalSpace.db.add(
+                Markdown.make({
+                  name: context.args.title ?? 'Testing',
+                  content: [
+                    `# ${context.args.title ?? 'Testing'}`,
+                    context.args.content ?? '',
+                    // TODO(burdon): Popovers not currently working.
+                    '## Here are some objects',
+                    `![Alice](${Obj.getDXN(kai)})`,
+                    `![DXOS](${Obj.getDXN(dxos)})`,
+                    '',
+                    'END',
+                    '',
+                  ].join('\n\n'),
+                }),
+              );
+
+              yield* Effect.promise(() => personalSpace.db.flush({ indexes: true }));
+            }),
+        }),
+
+        MarkdownPlugin(),
+        PreviewPlugin(),
+      ],
+    })),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    controls: { disable: true },
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: 'Testing',
+    content: ['This is a line with **some** formatting.'].join('\n\n'),
+  },
+};

package/src/containers/MarkdownContainer/MarkdownContainer.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 MarkdownContainerProps = 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 MarkdownContainer = forwardRef<HTMLDivElement, MarkdownContainerProps>(
+  (
+    { 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/MarkdownContainer/index.ts

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

package/src/containers/index.ts

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

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]);
+};

package/src/hooks/useExtensions.tsx

@@ -0,0 +1,262 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ViewUpdate } from '@codemirror/view';
+import { useMemo } from 'react';
+
+import { fromUrlPath } from '@dxos/app-toolkit';
+import { debounceAndThrottle } from '@dxos/async';
+import { Obj } from '@dxos/echo';
+import { createDocAccessor } from '@dxos/echo-db';
+import { invariant } from '@dxos/invariant';
+import { getSpace, useObject } from '@dxos/react-client/echo';
+import { useIdentity } from '@dxos/react-client/halo';
+import { useThemeContext } from '@dxos/react-ui';
+import { type SelectionManager } from '@dxos/react-ui-attention';
+import { Text } from '@dxos/schema';
+import { Domino } from '@dxos/ui';
+import {
+  Cursor,
+  type EditorStateStore,
+  EditorView,
+  type Extension,
+  InputModeExtensions,
+  type PreviewOptions,
+  createDataExtensions,
+  decorateMarkdown,
+  documentId,
+  folding,
+  formattingKeymap,
+  linkTooltip,
+  listener,
+  preview,
+  replacer,
+  selectionState,
+  snippets,
+} from '@dxos/ui-editor';
+import { type EditorViewMode, type RenderCallback } from '@dxos/ui-editor/types';
+import { isTruthy, safeUrl } from '@dxos/util';
+
+import { Markdown } from '#types';
+
+import { setFallbackName } from '../util';
+
+export type DocumentType = Markdown.Document | Text.Text | { id: string; text: string };
+
+export type ExtensionsOptions = {
+  id: string;
+  object?: DocumentType;
+  settings?: Markdown.Settings;
+  compact?: boolean;
+  viewMode?: EditorViewMode;
+  editable?: boolean;
+  selectionManager?: SelectionManager;
+  editorStateStore?: EditorStateStore;
+  previewOptions?: PreviewOptions;
+  platform?: 'mobile' | 'desktop';
+  /** Callback when an internal link is clicked. */
+  onSelectObject?: (objectId: string) => void;
+};
+
+// TODO(burdon): Merge with createBaseExtensions below.
+export const useExtensions = ({
+  id,
+  object,
+  settings,
+  compact,
+  viewMode,
+  selectionManager,
+  editorStateStore,
+  previewOptions,
+  onSelectObject,
+}: ExtensionsOptions): Extension[] => {
+  const { platform } = useThemeContext();
+  const identity = useIdentity();
+  const space = getSpace(object);
+
+  // Get the content reference from Document objects.
+  const contentRef = Obj.instanceOf(Markdown.Document, object) ? (object as Markdown.Document).content : undefined;
+  // Use useObject to trigger re-render when the reference loads (returns snapshot for reactivity).
+  useObject(contentRef);
+  // Get the actual live object target via .target (needed for createDocAccessor).
+  const target = contentRef?.target ?? (Obj.instanceOf(Text.Text, object) ? object : undefined);
+
+  // TODO(wittjosiah): Autocomplete is not working and this query is causing performance issues.
+  // TODO(burdon): Unsubscribe.
+  // const query = space?.db.query(Filter.type(DocumentType));
+  // query?.subscribe();
+
+  const baseExtensions = useMemo(
+    () =>
+      createBaseExtensions({
+        id,
+        object,
+        settings,
+        compact,
+        viewMode,
+        selectionManager,
+        previewOptions,
+        platform,
+        onSelectObject,
+      }),
+    [
+      id,
+      object,
+      compact,
+      viewMode,
+      selectionManager,
+      previewOptions,
+      settings,
+      settings?.debug,
+      settings?.editorInputMode,
+      settings?.folding,
+      settings?.numberedHeadings,
+      platform,
+      onSelectObject,
+    ],
+  );
+
+  return useMemo<Extension[]>(
+    () =>
+      [
+        // TODO(burdon): Pass this in?
+        // NOTE: Data extensions must be first so that automerge is updated before other extensions compute their state.
+        target &&
+          createDataExtensions({
+            id,
+            text: createDocAccessor(target, ['content']),
+            messenger: space,
+            identity,
+          }),
+
+        // TODO(burdon): Reconcile with effect in parent.
+        Obj.instanceOf(Markdown.Document, object) &&
+          listener({
+            onChange: ({ text }) => {
+              setFallbackName(object as Markdown.Document, text);
+            },
+          }),
+
+        baseExtensions,
+        selectionState(editorStateStore),
+      ].filter(isTruthy),
+    [identity, space, id, object, target, baseExtensions],
+  );
+};
+
+/**
+ * Create extension instances for editor.
+ */
+const createBaseExtensions = ({
+  id,
+  object,
+  onSelectObject,
+  settings,
+  compact,
+  viewMode,
+  selectionManager,
+  previewOptions,
+  platform,
+}: ExtensionsOptions): Extension[] => {
+  const extensions: Extension[] = [
+    selectionManager && selectionChange(selectionManager),
+    settings?.editorInputMode && InputModeExtensions[settings.editorInputMode],
+    settings?.folding && !compact && platform !== 'mobile' && folding(),
+  ].filter(isTruthy);
+
+  //
+  // Markdown
+  //
+  if (viewMode !== 'source') {
+    extensions.push(
+      ...[
+        formattingKeymap(),
+        decorateMarkdown({
+          selectionChangeDelay: 100,
+          numberedHeadings: settings?.numberedHeadings ? { from: 2 } : undefined,
+          // TODO(wittjosiah): For internal links render the label of the object.
+          renderLinkButton: onSelectObject && createRenderLink(onSelectObject),
+        }),
+        linkTooltip(renderLinkTooltip),
+        preview(previewOptions),
+        replacer(),
+      ],
+    );
+  }
+
+  if (settings?.debug) {
+    const items = settings.snippets?.split(/[,\n]/) ?? '';
+    if (items) {
+      extensions.push(snippets({ items }));
+    }
+  }
+
+  return extensions;
+};
+
+const selectionChange = (selectionManager: SelectionManager) => {
+  const debouncedHandler = debounceAndThrottle((update: ViewUpdate) => {
+    const id = update.state.facet(documentId);
+    const cursorConverter = update.state.facet(Cursor.converter);
+    const selection = update.state.selection;
+    const ranges = selection.ranges
+      .map((range) => ({
+        from: cursorConverter.toCursor(range.from),
+        to: cursorConverter.toCursor(range.to),
+      }))
+      .filter(({ from, to }) => to > from);
+
+    selectionManager.updateMultiRange(id, ranges);
+  }, 100);
+
+  return EditorView.updateListener.of((update: ViewUpdate) => {
+    if (update.selectionSet) {
+      debouncedHandler(update);
+    }
+  });
+};
+
+const createRenderLink =
+  (onSelectObject: (id: string) => void): RenderCallback<{ url: string }> =>
+  (el, { url }) => {
+    // TODO(burdon): Formalize/document internal link format.
+    const isInternal = url.startsWith('/') || url.startsWith(window.location.origin);
+    const qualifiedId = isInternal ? fromUrlPath(new URL(url, window.location.origin).pathname) : undefined;
+    const icon = Domino.of('span')
+      .classNames('dx-link ms-1 inline-block align-[-0.125em]')
+      .append(Domino.svg(isInternal ? 'ph--arrow-square-down--regular' : 'ph--arrow-square-out--regular'));
+
+    if (isInternal) {
+      invariant(qualifiedId, 'Invalid link format.');
+      icon
+        .attributes({ role: 'button', tabindex: '0' })
+        .on('click', (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          onSelectObject(qualifiedId);
+        })
+        .on('keydown', (event) => {
+          const keyboardEvent = event as KeyboardEvent;
+          if (keyboardEvent.key !== 'Enter' && keyboardEvent.key !== ' ') {
+            return;
+          }
+
+          keyboardEvent.preventDefault();
+          keyboardEvent.stopPropagation();
+          onSelectObject(qualifiedId);
+        });
+    }
+
+    el.appendChild(icon.root);
+  };
+
+const renderLinkTooltip: RenderCallback<{ url: string }> = (el, { url }) => {
+  el.appendChild(
+    Domino.of('a')
+      .attributes({ href: url, target: '_blank', rel: 'noreferrer' })
+      .classNames('dx-link flex items-center gap-2')
+      .text(safeUrl(url)?.toString() ?? url)
+      .append(Domino.svg('ph--arrow-square-out--regular')).root,
+  );
+};