@dxos/plugin-markdown 0.8.4-main.c1de068 → 0.8.4-main.c351d160a8

package/src/containers/MarkdownSettings/MarkdownSettings.tsx

@@ -0,0 +1,122 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { Input, Select, useTranslation } from '@dxos/react-ui';
+import { Settings } 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';
+
+export type MarkdownSettingsComponentProps = {
+  settings: Markdown.Settings;
+  onSettingsChange: (fn: (current: Markdown.Settings) => Markdown.Settings) => void;
+};
+
+export const MarkdownSettings = ({ settings, onSettingsChange }: MarkdownSettingsComponentProps) => {
+  const { t } = useTranslation(meta.id);
+
+  // TODO(wittjosiah): Add skill test confirmation for entering vim mode.
+  return (
+    <Settings.Root>
+      <Settings.Section title={t('settings title', { ns: meta.id })}>
+        <Settings.Group>
+          <Settings.ItemInput title={t('default view mode label')}>
+            <Select.Root
+              value={settings.defaultViewMode}
+              onValueChange={(value) => {
+                onSettingsChange((s) => ({ ...s, 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: '@dxos/react-ui-editor' })}
+                      </Select.Option>
+                    ))}
+                  </Select.Viewport>
+                  <Select.Arrow />
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
+          </Settings.ItemInput>
+
+          <Settings.ItemInput title={t('editor input mode label')}>
+            <Select.Root
+              value={settings.editorInputMode ?? 'default'}
+              onValueChange={(value) => {
+                onSettingsChange((s) => ({ ...s, 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>
+          </Settings.ItemInput>
+
+          <Settings.ItemInput title={t('settings toolbar label')}>
+            <Input.Switch
+              checked={settings.toolbar}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, toolbar: !!checked }))}
+            />
+          </Settings.ItemInput>
+
+          <Settings.ItemInput title={t('settings numbered headings label')}>
+            <Input.Switch
+              checked={settings.numberedHeadings}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, numberedHeadings: !!checked }))}
+            />
+          </Settings.ItemInput>
+
+          <Settings.ItemInput title={t('settings folding label')}>
+            <Input.Switch
+              checked={settings.folding}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, folding: !!checked }))}
+            />
+          </Settings.ItemInput>
+
+          <Settings.ItemInput title={t('settings experimental label')}>
+            <Input.Switch
+              checked={settings.experimental}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, experimental: !!checked }))}
+            />
+          </Settings.ItemInput>
+
+          <Settings.ItemInput title={t('settings debug label')}>
+            <Input.Switch
+              checked={settings.debug}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, debug: !!checked }))}
+            />
+          </Settings.ItemInput>
+
+          {settings.debug && (
+            <Settings.ItemInput title={t('settings debug textarea label', { ns: meta.id })}>
+              <Input.TextArea
+                rows={5}
+                value={settings.typewriter}
+                onChange={({ target: { value } }) => onSettingsChange((s) => ({ ...s, typewriter: value }))}
+                placeholder={t('settings debug placeholder')}
+              />
+            </Settings.ItemInput>
+          )}
+        </Settings.Group>
+      </Settings.Section>
+    </Settings.Root>
+  );
+};

package/src/containers/MarkdownSettings/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { MarkdownSettings } from './MarkdownSettings';
+
+export default MarkdownSettings;

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 MarkdownContainer: ComponentType<any> = lazy(() => import('./MarkdownContainer'));
+export const MarkdownSettings: ComponentType<any> = lazy(() => import('./MarkdownSettings'));

package/src/hooks/index.ts

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

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').children(pressEl, ...triggerEls, forCommandsEl).root;
+      },
+    };
+
+    return { viewRef, getMenu, trigger, placeholder };
+  }, [getMenu, onLinkQuery]);
+};

package/src/hooks/useExtensions.tsx

@@ -0,0 +1,237 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ViewUpdate } from '@codemirror/view';
+import { useMemo } from 'react';
+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 { type SelectionManager } from '@dxos/react-ui-attention';
+import { Text } from '@dxos/schema';
+import { Domino } from '@dxos/ui';
+import {
+  Cursor,
+  type EditorStateStore,
+  EditorView,
+  type EditorViewMode,
+  type Extension,
+  InputModeExtensions,
+  type PreviewOptions,
+  type RenderCallback,
+  createDataExtensions,
+  decorateMarkdown,
+  documentId,
+  folding,
+  formattingKeymap,
+  linkTooltip,
+  listener,
+  preview,
+  replacer,
+  selectionState,
+  typewriter,
+} from '@dxos/ui-editor';
+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;
+  selectionManager?: SelectionManager;
+  viewMode?: EditorViewMode;
+  editorStateStore?: EditorStateStore;
+  previewOptions?: PreviewOptions;
+  /** Callback when an internal link is clicked. */
+  onSelectObject?: (objectId: string) => void;
+};
+
+// TODO(burdon): Merge with createBaseExtensions below.
+export const useExtensions = ({
+  id,
+  object,
+  settings,
+  selectionManager,
+  viewMode,
+  editorStateStore,
+  previewOptions,
+  onSelectObject,
+}: ExtensionsOptions): Extension[] => {
+  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,
+        selectionManager,
+        viewMode,
+        previewOptions,
+        onSelectObject,
+      }),
+    [
+      id,
+      object,
+      viewMode,
+      previewOptions,
+      onSelectObject,
+      settings,
+      settings?.debug,
+      settings?.editorInputMode,
+      settings?.folding,
+      settings?.numberedHeadings,
+      settings?.typewriter,
+      selectionManager,
+    ],
+  );
+
+  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,
+  selectionManager,
+  viewMode,
+  previewOptions,
+}: ExtensionsOptions): Extension[] => {
+  const extensions: Extension[] = [
+    selectionManager && selectionChange(selectionManager),
+    settings?.editorInputMode && InputModeExtensions[settings.editorInputMode],
+    settings?.folding && 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.typewriter?.split(/[,\n]/) ?? '';
+    if (items) {
+      extensions.push(typewriter({ 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 anchor = Domino.of('a')
+      .classNames('dx-link dx-icon-inline ms-1')
+      .children(Domino.svg(isInternal ? 'ph--arrow-square-down--regular' : 'ph--arrow-square-out--regular'));
+
+    if (isInternal) {
+      anchor.on('click', () => {
+        const qualifiedId = url.split('/').at(-1);
+        invariant(qualifiedId, 'Invalid link format.');
+        onSelectObject(qualifiedId);
+      });
+    } else {
+      anchor.attributes({ href: url, rel: 'noreferrer', target: '_blank' });
+    }
+
+    el.appendChild(anchor.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)?.origin ?? url)
+      .children(Domino.svg('ph--arrow-square-out--regular')).root,
+  );
+};

package/src/hooks/useLinkQuery.ts

@@ -0,0 +1,83 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Option from 'effect/Option';
+import { useCallback, useMemo } from 'react';
+
+import { usePluginManager } from '@dxos/app-framework/ui';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { type Database, Filter, Obj, Query, Type } from '@dxos/echo';
+import { EntityKind, SystemTypeAnnotation, getTypeAnnotation } from '@dxos/echo/internal';
+import { toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { type EditorMenuGroup, type EditorMenuItem } from '@dxos/react-ui-editor';
+import { insertAtCursor, insertAtLineStart } from '@dxos/ui-editor';
+
+export const useLinkQuery = (db: Database.Database | undefined) => {
+  const { t } = useTranslation();
+
+  const manager = usePluginManager();
+  const resolve = useCallback(
+    (typename: string) =>
+      manager.capabilities.getAll(AppCapabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {},
+    [manager],
+  );
+
+  const filter = useMemo(
+    () =>
+      Filter.or(
+        ...(db?.schemaRegistry.query({ location: ['database', 'runtime'] }).runSync() ?? [])
+          .filter((schema) => getTypeAnnotation(schema)?.kind !== EntityKind.Relation)
+          .filter((schema) => !SystemTypeAnnotation.get(schema).pipe(Option.getOrElse(() => false)))
+          .map((schema) => Filter.typename(Type.getTypename(schema))),
+      ),
+    [db],
+  );
+
+  const handleLinkQuery = useCallback(
+    async (query?: string): Promise<EditorMenuGroup[]> => {
+      const name = query?.startsWith('@') ? query.slice(1).toLowerCase() : (query?.toLowerCase() ?? '');
+      const results = await db?.query(Query.select(filter)).run();
+
+      // TODO(wittjosiah): Use `Obj.Unknown` type.
+      const getLabel = (object: any) => {
+        const label = Obj.getLabel(object);
+        if (label) {
+          return label;
+        }
+
+        // TODO(wittjosiah): Remove metadata labels.
+        const type = Obj.getTypename(object)!;
+        const metadata = resolve(type);
+        return metadata.label?.(object) || ['object name placeholder', { ns: type, default: 'New object' }];
+      };
+
+      const items =
+        results
+          ?.filter((object) => toLocalizedString(getLabel(object), t).toLowerCase().includes(name))
+          // TODO(wittjosiah): Remove `any` type.
+          .map((object: any): EditorMenuItem => {
+            const metadata = resolve(Obj.getTypename(object)!);
+            const label = toLocalizedString(getLabel(object), t);
+            return {
+              id: object.id,
+              label,
+              icon: metadata.icon,
+              onSelect: ({ view, head }) => {
+                const link = `[${label}](${Obj.getDXN(object)})`;
+                if (query?.startsWith('@')) {
+                  insertAtLineStart(view, head, `!${link}\n`);
+                } else {
+                  insertAtCursor(view, head, `${link} `);
+                }
+              },
+            };
+          }) ?? [];
+
+      return [{ id: 'echo', items }];
+    },
+    [db, filter, resolve],
+  );
+
+  return handleLinkQuery;
+};

package/src/hooks/useSelectCurrentThread.tsx

@@ -3,54 +3,59 @@
 //
 
 import { EditorView } from '@codemirror/view';
-import { Schema } from 'effect';
+import * as Effect from 'effect/Effect';
 import { useMemo } from 'react';
 
-import { createResolver, LayoutAction, useIntentResolver } from '@dxos/app-framework';
+import { useOperationResolver } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { invariant } from '@dxos/invariant';
-import { Cursor, setSelection } from '@dxos/react-ui-editor';
+import { OperationResolver } from '@dxos/operation';
+import { Cursor, setSelection } from '@dxos/ui-editor';
 
-import { MARKDOWN_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
 /**
  * Handle scrolling and selection of the current thread in a markdown editor.
  */
-export const useSelectCurrentThread = (editorView: EditorView | undefined, documentId: string) => {
-  const scrollIntoViewResolver = useMemo(
+export const useSelectCurrentThread = (editorView: EditorView | null, documentId: string, attendableId: string) => {
+  const scrollIntoViewHandler = useMemo(
     () =>
-      createResolver({
-        intent: LayoutAction.UpdateLayout,
+      OperationResolver.make({
+        operation: LayoutOperation.ScrollIntoView,
         position: 'hoist',
-        filter: (data): data is { part: 'current'; subject: string; options: { cursor: string } } => {
-          if (!Schema.is(LayoutAction.ScrollIntoView.fields.input)(data)) {
-            return false;
-          }
-
-          return !!editorView && data.subject === documentId && !!data.options?.cursor;
-        },
-        resolve: ({ options: { cursor } }) => {
-          invariant(editorView, 'Editor view is not defined.');
-          const range = Cursor.getRangeFromCursor(editorView.state, cursor!);
-          if (range) {
-            const selection = editorView.state.selection.main.from !== range.from ? { anchor: range.from } : undefined;
-            const effects = [
-              // NOTE: This does not use the DOM scrollIntoView function.
-              EditorView.scrollIntoView(range.from, { y: 'start', yMargin: 96 }),
-            ];
-            if (selection) {
-              // Update the editor selection to get bi-directional highlighting.
-              effects.push(setSelection.of({ current: documentId }));
+        filter: (input) => !!editorView && !!input.cursor && input.subject === attendableId,
+        handler: (input) =>
+          Effect.sync(() => {
+            invariant(editorView, 'Editor view is not defined.');
+            const cursor = input.cursor;
+            if (!cursor) {
+              return;
             }
+            const range = Cursor.getRangeFromCursor(editorView.state, cursor);
+            if (range) {
+              const selection =
+                editorView.state.selection.main.from !== range.from ? { anchor: range.from } : undefined;
+              const effects = [
+                // NOTE: This does not use the DOM scrollIntoView function.
+                EditorView.scrollIntoView(range.from, {
+                  y: 'start',
+                  yMargin: 96,
+                }),
+              ];
+              if (selection) {
+                // Update the editor selection to get bi-directional highlighting.
+                effects.push(setSelection.of({ current: documentId }));
+              }
 
-            editorView.dispatch({
-              effects,
-              selection: selection ? { anchor: range.from } : undefined,
-            });
-          }
-        },
+              editorView.dispatch({
+                effects,
+                selection: selection ? { anchor: range.from } : undefined,
+              });
+            }
+          }),
       }),
-    [documentId, editorView],
+    [documentId, attendableId, editorView],
   );
 
-  useIntentResolver(MARKDOWN_PLUGIN, scrollIntoViewResolver);
+  useOperationResolver(meta.id, scrollIntoViewHandler);
 };

package/src/index.ts

@@ -2,8 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-export { MarkdownCapabilities } from './capabilities';
-export { MarkdownEvents } from './events';
-export * from './MarkdownPlugin';
+export { MarkdownCapabilities, MarkdownEvents } from './types';
+
 export * from './meta';
+export * from './types';
 export * from './util';
+
+export * from './MarkdownPlugin';
+
+export { MarkdownEditor } from './components';

package/src/meta.ts

@@ -2,19 +2,18 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type PluginMeta } from '@dxos/app-framework';
+import { type Plugin } from '@dxos/app-framework';
+import { trim } from '@dxos/util';
 
-export const MARKDOWN_PLUGIN = 'dxos.org/plugin/markdown';
-
-export const meta: PluginMeta = {
-  id: MARKDOWN_PLUGIN,
+export const meta: Plugin.Meta = {
+  id: 'org.dxos.plugin.markdown',
   name: 'Markdown',
-  description: `
-    A Markdown editor that is collaborative and fully extensible. It provides rich text editing as well as read only and markdown view.
-    In addition to markdown capabilities, it also support threaded in-line comments which can be accessed from the right hand sidebar at any times inside the document.
-    Your AI agent will have access to all markdown docs in your Space which means you can use them to extend the memory of your personal agent and add long term context for automated workflows.
+  description: trim`
+    Full-featured collaborative markdown editor with real-time editing, inline comments, and rich formatting.
+    Supports AI-powered editing assistance and seamlessly integrates with other workspace objects.
   `,
-  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-markdown',
   icon: 'ph--text-aa--regular',
+  iconHue: 'indigo',
+  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-markdown',
   screenshots: ['https://dxos.network/plugin-details-markdown-dark.png'],
 };