@dxos/plugin-markdown 0.8.4-main.ae835ea → 0.8.4-main.bc2380dfbc

package/src/containers/MarkdownCard/snippet.ts

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

package/src/containers/index.ts

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

package/src/hooks/index.ts

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

package/src/hooks/{usePopoverMenuOptions.ts → useEditorMenuOptions.ts}

@@ -5,31 +5,32 @@
 import { type EditorView } from '@codemirror/view';
 import { useCallback, useMemo, useRef } from 'react';
 
-import { Domino, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { toLocalizedString, useTranslation } from '@dxos/react-ui';
 import {
-  type PopoverMenuGroup,
-  type UsePopoverMenuProps,
+  type EditorMenuGroup,
+  type UseEditorMenuProps,
   filterMenuGroups,
   formattingCommands,
   linkSlashCommands,
 } from '@dxos/react-ui-editor';
+import { Domino } from '@dxos/ui';
 
-import { meta } from '../meta';
+import { meta } from '#meta';
 
-export type UsePopoverMenuOptionsProps = {
+export type UseEditorMenuOptionsProps = {
   editorView?: EditorView;
-  slashCommandGroups?: PopoverMenuGroup[];
-  onLinkQuery?: (query?: string) => Promise<PopoverMenuGroup[]>;
+  slashCommandGroups?: EditorMenuGroup[];
+  onLinkQuery?: (query?: string) => Promise<EditorMenuGroup[]>;
 };
 
-export const usePopoverMenuOptions = ({
+export const useEditorMenuOptions = ({
   editorView,
   slashCommandGroups,
   onLinkQuery,
-}: UsePopoverMenuOptionsProps): UsePopoverMenuProps => {
+}: UseEditorMenuOptionsProps): UseEditorMenuProps => {
   const { t } = useTranslation(meta.id);
 
-  const getMenu = useCallback<NonNullable<UsePopoverMenuProps['getMenu']>>(
+  const getMenu = useCallback<NonNullable<UseEditorMenuProps['getMenu']>>(
     ({ text, trigger }) => {
       switch (trigger) {
         case '@': {
@@ -48,22 +49,18 @@ export const usePopoverMenuOptions = ({
   );
 
   const viewRef = useRef(editorView);
-  return useMemo<UsePopoverMenuProps>(() => {
+  return useMemo<UseEditorMenuProps>(() => {
     const trigger = onLinkQuery ? ['/', '@'] : ['/'];
     const placeholder = {
       delay: 3_000,
-      content: () =>
-        Domino.of('div')
-          .children(
-            Domino.of('span').text('Press'),
-            ...trigger.map((text) =>
-              Domino.of('span')
-                .classNames('mx-1 px-1.5 pt-[1px] pb-[2px] border border-separator rounded-sm')
-                .text(text),
-            ),
-            Domino.of('span').text('for commands.'),
-          )
-          .build(),
+      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 };

package/src/hooks/useExtensions.tsx

@@ -3,27 +3,26 @@
 //
 
 import { type ViewUpdate } from '@codemirror/view';
-import React, { type AnchorHTMLAttributes, type ReactNode, useMemo } from 'react';
-import { createRoot } from 'react-dom/client';
+import { useMemo } from 'react';
 
-import { LayoutAction, type PromiseIntentDispatcher, createIntent, useIntentDispatcher } from '@dxos/app-framework';
+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 { createDocAccessor, fullyQualifiedId } from '@dxos/react-client/echo';
-import { getSpace } from '@dxos/react-client/echo';
+import { getSpace, useObject } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
-import { Icon, ThemeProvider } from '@dxos/react-ui';
+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 EditorViewMode,
   type Extension,
   InputModeExtensions,
   type PreviewOptions,
-  type RenderCallback,
   createDataExtensions,
   decorateMarkdown,
   documentId,
@@ -32,27 +31,32 @@ import {
   linkTooltip,
   listener,
   preview,
+  replacer,
   selectionState,
-  typewriter,
-} from '@dxos/react-ui-editor';
-import { defaultTx } from '@dxos/react-ui-theme';
-import { DataType } from '@dxos/schema';
-import { isTruthy } from '@dxos/util';
+  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 { Markdown } from '../types';
 import { setFallbackName } from '../util';
 
-export type DocumentType = Markdown.Document | DataType.Text | { id: string; text: string };
+export type DocumentType = Markdown.Document | Text.Text | { id: string; text: string };
 
 export type ExtensionsOptions = {
   id: string;
   object?: DocumentType;
-  dispatch?: PromiseIntentDispatcher;
   settings?: Markdown.Settings;
-  selectionManager?: SelectionManager;
+  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.
@@ -60,21 +64,23 @@ export const useExtensions = ({
   id,
   object,
   settings,
-  selectionManager,
+  compact,
   viewMode,
+  selectionManager,
   editorStateStore,
   previewOptions,
+  onSelectObject,
 }: ExtensionsOptions): Extension[] => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { platform } = useThemeContext();
   const identity = useIdentity();
   const space = getSpace(object);
 
-  let target: Obj.Any | undefined;
-  if (Obj.instanceOf(Markdown.Document, object)) {
-    target = (object as Markdown.Document).content.target;
-  } else if (Obj.instanceOf(DataType.Text, object)) {
-    target = 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.
@@ -87,24 +93,27 @@ export const useExtensions = ({
         id,
         object,
         settings,
-        selectionManager,
+        compact,
         viewMode,
+        selectionManager,
         previewOptions,
-        dispatch,
+        platform,
+        onSelectObject,
       }),
     [
       id,
       object,
+      compact,
       viewMode,
-      dispatch,
+      selectionManager,
       previewOptions,
       settings,
       settings?.debug,
       settings?.editorInputMode,
       settings?.folding,
       settings?.numberedHeadings,
-      settings?.typewriter,
-      selectionManager,
+      platform,
+      onSelectObject,
     ],
   );
 
@@ -113,7 +122,13 @@ export const useExtensions = ({
       [
         // 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']), space, identity }),
+        target &&
+          createDataExtensions({
+            id,
+            text: createDocAccessor(target, ['content']),
+            messenger: space,
+            identity,
+          }),
 
         // TODO(burdon): Reconcile with effect in parent.
         Obj.instanceOf(Markdown.Document, object) &&
@@ -136,16 +151,18 @@ export const useExtensions = ({
 const createBaseExtensions = ({
   id,
   object,
-  dispatch,
+  onSelectObject,
   settings,
-  selectionManager,
+  compact,
   viewMode,
+  selectionManager,
   previewOptions,
+  platform,
 }: ExtensionsOptions): Extension[] => {
   const extensions: Extension[] = [
     selectionManager && selectionChange(selectionManager),
     settings?.editorInputMode && InputModeExtensions[settings.editorInputMode],
-    settings?.folding && folding(),
+    settings?.folding && !compact && platform !== 'mobile' && folding(),
   ].filter(isTruthy);
 
   //
@@ -158,33 +175,20 @@ const createBaseExtensions = ({
         decorateMarkdown({
           selectionChangeDelay: 100,
           numberedHeadings: settings?.numberedHeadings ? { from: 2 } : undefined,
-          // TODO(wittjosiah): For internal links, consider ignoring the link text and rendering the label of the object being linked to.
-          // TODO(burdon): Create dx-tag.
-          renderLinkButton:
-            dispatch && (object || id)
-              ? createLinkRenderer((id: string) => {
-                  void dispatch(
-                    createIntent(LayoutAction.Open, {
-                      part: 'main',
-                      subject: [id],
-                      options: {
-                        pivotId: object ? fullyQualifiedId(object) : id,
-                      },
-                    }),
-                  );
-                })
-              : 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]/) ?? '';
+    const items = settings.snippets?.split(/[,\n]/) ?? '';
     if (items) {
-      extensions.push(typewriter({ items }));
+      extensions.push(snippets({ items }));
     }
   }
 
@@ -192,79 +196,67 @@ const createBaseExtensions = ({
 };
 
 const selectionChange = (selectionManager: SelectionManager) => {
-  return EditorView.updateListener.of(
-    debounceAndThrottle((update: ViewUpdate) => {
-      if (update.selectionSet) {
-        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);
+  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),
-  );
-};
+    selectionManager.updateMultiRange(id, ranges);
+  }, 100);
 
-// TODO(burdon): Factor out styles.
-const style = {
-  hover: 'rounded-sm text-primary-500 hover:text-primary-600 dark:text-primary-500 hover:dark:text-primary-400',
-  icon: 'inline-block leading-none mis-1 cursor-pointer',
+  return EditorView.updateListener.of((update: ViewUpdate) => {
+    if (update.selectionSet) {
+      debouncedHandler(update);
+    }
+  });
 };
 
-const createLinkRenderer =
+const createRenderLink =
   (onSelectObject: (id: string) => void): RenderCallback<{ url: string }> =>
   (el, { url }) => {
     // TODO(burdon): Formalize/document internal link format.
-    const isInternal =
-      url.startsWith('/') ||
-      // TODO(wittjosiah): This should probably be parsed out on paste?
-      url.startsWith(window.location.origin);
+    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'));
 
-    const options: AnchorHTMLAttributes<any> = isInternal
-      ? {
-          onClick: () => {
-            const qualifiedId = url.split('/').at(-1);
-            invariant(qualifiedId, 'Invalid link format.');
-            onSelectObject(qualifiedId);
-          },
-        }
-      : {
-          href: url,
-          rel: 'noreferrer',
-          target: '_blank',
-        };
+    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;
+          }
 
-    renderRoot(
-      el,
-      <a {...options} className={style.hover}>
-        <Icon
-          icon={isInternal ? 'ph--arrow-square-down--bold' : 'ph--arrow-square-out--bold'}
-          size={4}
-          classNames={style.icon}
-        />
-      </a>,
-    );
+          keyboardEvent.preventDefault();
+          keyboardEvent.stopPropagation();
+          onSelectObject(qualifiedId);
+        });
+    }
+
+    el.appendChild(icon.root);
   };
 
 const renderLinkTooltip: RenderCallback<{ url: string }> = (el, { url }) => {
-  const web = new URL(url);
-  renderRoot(
-    el,
-    <a href={url} rel='noreferrer' target='_blank' className={style.hover}>
-      {web.origin}
-      <Icon icon='ph--arrow-square-out--bold' size={4} classNames={style.icon} />
-    </a>,
+  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,
   );
 };
-
-// TODO(burdon): REMOVE.
-const renderRoot = <T extends Element>(root: T, node: ReactNode): T => {
-  createRoot(root).render(<ThemeProvider tx={defaultTx}>{node}</ThemeProvider>);
-  return root;
-};

package/src/hooks/useLinkQuery.ts

@@ -2,68 +2,56 @@
 // Copyright 2024 DXOS.org
 //
 
+import * as Option from 'effect/Option';
 import { useCallback, useMemo } from 'react';
 
-import { Capabilities, useCapabilities, usePluginManager } from '@dxos/app-framework';
-import { Filter, Obj, Query, Type } from '@dxos/echo';
-import { ClientCapabilities } from '@dxos/plugin-client';
-import { SpaceCapabilities } from '@dxos/plugin-space';
-import { type Space } from '@dxos/react-client/echo';
-import { toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { type PopoverMenuGroup, type PopoverMenuItem, insertAtCursor, insertAtLineStart } from '@dxos/react-ui-editor';
+import { Annotation, type Database, Filter, Obj, Query, Type } from '@dxos/echo';
+import { EntityKind, SystemTypeAnnotation, getTypeAnnotation } from '@dxos/echo/internal';
+import { type Label, 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 = (space: Space | undefined) => {
-  const { t } = useTranslation();
+import { Markdown } from '../types';
 
-  const manager = usePluginManager();
-  const resolve = useCallback(
-    (typename: string) =>
-      manager.context.getCapabilities(Capabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {},
-    [manager],
-  );
+export const useLinkQuery = (db: Database.Database | undefined) => {
+  const { t } = useTranslation();
 
-  const objectForms = useCapabilities(SpaceCapabilities.ObjectForm);
-  const schemaWhiteList = useCapabilities(ClientCapabilities.SchemaWhiteList);
   const filter = useMemo(
     () =>
       Filter.or(
-        ...objectForms.map((form) => Filter.type(form.objectSchema)),
-        ...schemaWhiteList.flat().map((schema) => Filter.typename(Type.getTypename(schema))),
+        ...(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))),
       ),
-    [objectForms, schemaWhiteList],
+    [db],
   );
 
   const handleLinkQuery = useCallback(
-    async (query?: string): Promise<PopoverMenuGroup[]> => {
+    async (query?: string): Promise<EditorMenuGroup[]> => {
+      // A second "@" switches the link query into block-embed mode, so "@@foo" searches for "foo".
       const name = query?.startsWith('@') ? query.slice(1).toLowerCase() : (query?.toLowerCase() ?? '');
-      const results = await space?.db.query(Query.select(filter)).run();
+      const results = await db?.query(Query.select(filter)).run();
 
-      // TODO(wittjosiah): Use `Obj.Any` type.
-      const getLabel = (object: any) => {
-        const label = Obj.getLabel(object);
-        if (label) {
-          return label;
-        }
-
-        // TODO(wittjosiah): Remove metadata labels.
+      const getLabel = (object: Obj.Unknown): Label => {
         const type = Obj.getTypename(object)!;
-        const metadata = resolve(type);
-        return metadata.label?.(object) || ['object name placeholder', { ns: type, default: 'New object' }];
+        return Obj.getLabel(object) ?? ['object-name.placeholder', { ns: type, defaultValue: 'New object' }];
       };
 
       const items =
-        results?.objects
-          .filter((object) => toLocalizedString(getLabel(object), t).toLowerCase().includes(name))
-          // TODO(wittjosiah): Remove `any` type.
-          .map((object: any): PopoverMenuItem => {
-            const metadata = resolve(Obj.getTypename(object)!);
+        results
+          ?.filter((object) => toLocalizedString(getLabel(object), t).toLowerCase().includes(name))
+          .map((object: Obj.Unknown): EditorMenuItem => {
+            const schema = Obj.getSchema(object);
+            const icon = schema ? Option.getOrUndefined(Annotation.IconAnnotation.get(schema))?.icon : undefined;
             const label = toLocalizedString(getLabel(object), t);
             return {
               id: object.id,
               label,
-              icon: metadata.icon,
-              onSelect: (view, head) => {
+              icon,
+              onSelect: ({ view, head }) => {
                 const link = `[${label}](${Obj.getDXN(object)})`;
+                // "@@" inserts a block embed on its own line instead of an inline link.
                 if (query?.startsWith('@')) {
                   insertAtLineStart(view, head, `!${link}\n`);
                 } else {
@@ -73,9 +61,30 @@ export const useLinkQuery = (space: Space | undefined) => {
             };
           }) ?? [];
 
-      return [{ id: 'echo', items }];
+      // Add "Create new document" option at the end.
+      const createItem: EditorMenuItem = {
+        id: 'create-document',
+        label: ['add-object.label', { ns: Markdown.Document.typename }],
+        icon: 'ph--plus--regular',
+        onSelect: ({ view, head }) => {
+          const doc = Markdown.make({ name: name || undefined });
+          db?.add(doc);
+          const label = name || t('object-name.placeholder', { ns: Markdown.Document.typename });
+          const link = `[${label}](${Obj.getDXN(doc)})`;
+          if (query?.startsWith('@')) {
+            insertAtLineStart(view, head, `!${link}\n`);
+          } else {
+            insertAtCursor(view, head, `${link} `);
+          }
+        },
+      };
+
+      return [
+        { id: 'echo', items },
+        { id: 'create', items: [createItem] },
+      ];
     },
-    [space, filter, resolve],
+    [db, filter, t],
   );
 
   return handleLinkQuery;

package/src/index.ts

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