@dxos/plugin-markdown 0.8.4-main.c4373fc → 0.8.4-main.c85a9c8dae

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/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,245 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ViewUpdate } from '@codemirror/view';
+import { useMemo } from 'react';
+
+import { type Capabilities } from '@dxos/app-framework';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } 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 { 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;
+  invokePromise?: Capabilities.OperationInvoker['invokePromise'];
+  settings?: Markdown.Settings;
+  selectionManager?: SelectionManager;
+  viewMode?: EditorViewMode;
+  editorStateStore?: EditorStateStore;
+  previewOptions?: PreviewOptions;
+};
+
+// TODO(burdon): Merge with createBaseExtensions below.
+export const useExtensions = ({
+  id,
+  object,
+  settings,
+  selectionManager,
+  viewMode,
+  editorStateStore,
+  previewOptions,
+}: ExtensionsOptions): Extension[] => {
+  const { invokePromise } = useOperationInvoker();
+  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,
+        invokePromise,
+      }),
+    [
+      id,
+      object,
+      viewMode,
+      invokePromise,
+      previewOptions,
+      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,
+  invokePromise,
+  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: createRenderLink((targetId: string) => {
+            void invokePromise?.(LayoutOperation.Open, {
+              subject: [targetId],
+              pivotId: object && Obj.isObject(object) ? Obj.getDXN(object).toString() : id,
+            });
+          }),
+        }),
+        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,12 +3,14 @@
 //
 
 import { EditorView } from '@codemirror/view';
-import * as Schema from 'effect/Schema';
+import * as Effect from 'effect/Effect';
 import { useMemo } from 'react';
 
-import { LayoutAction, createResolver, 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 { meta } from '../meta';
 
@@ -16,41 +18,44 @@ import { meta } from '../meta';
  * Handle scrolling and selection of the current thread in a markdown editor.
  */
 export const useSelectCurrentThread = (editorView: EditorView | null, documentId: string) => {
-  const scrollIntoViewResolver = useMemo(
+  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.subject === documentId && !!input.cursor,
+        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],
   );
 
-  useIntentResolver(meta.id, scrollIntoViewResolver);
+  useOperationResolver(meta.id, scrollIntoViewHandler);
 };

package/src/index.ts

@@ -2,11 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-export { MarkdownCapabilities } from './capabilities';
-export { MarkdownEvents } from './events';
+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,18 +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 meta: PluginMeta = {
+export const meta: Plugin.Meta = {
   id: 'dxos.org/plugin/markdown',
   name: 'Markdown',
   description: trim`
-    A collaborative and extensible Markdown editor.
-    In addition to markdown capabilities, the plugin supports collaborative in-line comments.
-    You can use documents to extend the memory of your personal agents and add context for automated workflows.
+    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.
   `,
   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'],
 };