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

package/src/containers/MarkdownContainer/MarkdownContainer.tsx

@@ -4,69 +4,75 @@
 
 import { type Extension } from '@codemirror/state';
 import { Atom } from '@effect-atom/atom-react';
-import React, { forwardRef, useMemo } from 'react';
+import React, { forwardRef, useCallback, useMemo } from 'react';
 
-import { useCapabilities } from '@dxos/app-framework/ui';
-import { AppCapabilities } from '@dxos/app-toolkit';
-import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
-import { useAppGraph } from '@dxos/app-toolkit/ui';
+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, type MarkdownEditorContentProps, type MarkdownEditorRootProps } from '../../components';
-import { useLinkQuery } from '../../hooks';
-import { Markdown, MarkdownCapabilities, type MarkdownPluginState } from '../../types';
+import {
+  MarkdownEditor,
+  MarkdownEditorProvider,
+  type MarkdownEditorContentProps,
+  type MarkdownEditorProviderProps,
+} from '#components';
+import { useLinkQuery } from '#hooks';
+import { Markdown, MarkdownCapabilities, type MarkdownPluginState } from '#types';
 
-export type MarkdownContainerProps = SurfaceComponentProps<
+export type MarkdownContainerProps = AppSurface.ObjectArticleProps<
   Markdown.Document | Text.Text,
   {
     id: string;
     settings: Markdown.Settings;
     selectionManager?: SelectionManager;
-  } & Pick<MarkdownEditorRootProps, 'viewMode' | 'onViewModeChange'> &
-    Pick<MarkdownEditorContentProps, 'editorStateStore'> &
-    Pick<MarkdownPluginState, 'extensionProviders'>
+  } & Pick<MarkdownPluginState, 'extensionProviders'> &
+    Pick<MarkdownEditorProviderProps, 'viewMode' | 'onSelectObject' | 'onViewModeChange'> &
+    Pick<MarkdownEditorContentProps, 'editorStateStore'>
 >;
 
 export const MarkdownContainer = forwardRef<HTMLDivElement, MarkdownContainerProps>(
-  ({ role, subject: object, id, settings, extensionProviders, ...props }, forwardedRef) => {
+  (
+    { role, subject: object, id, attendableId, settings, extensionProviders, onSelectObject, viewMode, ...props },
+    forwardedRef,
+  ) => {
     const db = Obj.isObject(object) ? Obj.getDatabase(object) : undefined;
-    const attendableId = Obj.instanceOf(Markdown.Document, object) ? Obj.getDXN(object).toString() : 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.
-    // TODO(burdon): Document MarkdownPluginState.extensionProviders
     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: object as Markdown.Document }) : provider;
+          const extension = typeof provider === 'function' ? provider({ document, viewMode }) : provider;
           if (extension) {
             acc.push(extension);
           }
 
           return acc;
         }, []);
-    }, [extensionProviders, otherExtensionProviders, object]);
+    }, [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(id));
+        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 };
@@ -86,29 +92,55 @@ export const MarkdownContainer = forwardRef<HTMLDivElement, MarkdownContainerPro
     // 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 (
-      <MarkdownEditor.Root
-        id={attendableId ?? id}
+      <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}
       >
-        <Panel.Root ref={forwardedRef}>
-          {settings.toolbar && (
-            <Panel.Toolbar asChild>
-              <MarkdownEditor.Toolbar id={attendableId ?? id} role={role} customActions={customActions} />
-            </Panel.Toolbar>
-          )}
-          <Panel.Content>
-            <MarkdownEditor.Content initialValue={initialValue} scrollPastEnd={role === 'article'} />
-            <MarkdownEditor.Blocks />
-          </Panel.Content>
-        </Panel.Root>
-      </MarkdownEditor.Root>
+        {(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

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

package/src/containers/index.ts

@@ -4,8 +4,8 @@
 
 import { type ComponentType, lazy } from 'react';
 
-export type { MarkdownContainerProps } from './MarkdownContainer/MarkdownContainer';
+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'));
-export const MarkdownSettings: ComponentType<any> = lazy(() => import('./MarkdownSettings'));

package/src/hooks/index.ts

@@ -5,4 +5,3 @@
 export * from './useEditorMenuOptions';
 export * from './useExtensions';
 export * from './useLinkQuery';
-export * from './useSelectCurrentThread';

package/src/hooks/useEditorMenuOptions.ts

@@ -15,7 +15,7 @@ import {
 } from '@dxos/react-ui-editor';
 import { Domino } from '@dxos/ui';
 
-import { meta } from '../meta';
+import { meta } from '#meta';
 
 export type UseEditorMenuOptionsProps = {
   editorView?: EditorView;
@@ -59,7 +59,7 @@ export const useEditorMenuOptions = ({
           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 Domino.of('div').append(pressEl, ...triggerEls, forCommandsEl).root;
       },
     };
 

package/src/hooks/useExtensions.tsx

@@ -5,15 +5,14 @@
 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 { 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';
@@ -21,11 +20,9 @@ import {
   Cursor,
   type EditorStateStore,
   EditorView,
-  type EditorViewMode,
   type Extension,
   InputModeExtensions,
   type PreviewOptions,
-  type RenderCallback,
   createDataExtensions,
   decorateMarkdown,
   documentId,
@@ -36,11 +33,13 @@ import {
   preview,
   replacer,
   selectionState,
-  typewriter,
+  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 | Text.Text | { id: string; text: string };
@@ -48,12 +47,16 @@ export type DocumentType = Markdown.Document | Text.Text | { id: string; text: s
 export type ExtensionsOptions = {
   id: string;
   object?: DocumentType;
-  invokePromise?: Capabilities.OperationInvoker['invokePromise'];
   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.
@@ -61,12 +64,14 @@ export const useExtensions = ({
   id,
   object,
   settings,
-  selectionManager,
+  compact,
   viewMode,
+  selectionManager,
   editorStateStore,
   previewOptions,
+  onSelectObject,
 }: ExtensionsOptions): Extension[] => {
-  const { invokePromise } = useOperationInvoker();
+  const { platform } = useThemeContext();
   const identity = useIdentity();
   const space = getSpace(object);
 
@@ -88,24 +93,27 @@ export const useExtensions = ({
         id,
         object,
         settings,
-        selectionManager,
+        compact,
         viewMode,
+        selectionManager,
         previewOptions,
-        invokePromise,
+        platform,
+        onSelectObject,
       }),
     [
       id,
       object,
+      compact,
       viewMode,
-      invokePromise,
+      selectionManager,
       previewOptions,
       settings,
       settings?.debug,
       settings?.editorInputMode,
       settings?.folding,
       settings?.numberedHeadings,
-      settings?.typewriter,
-      selectionManager,
+      platform,
+      onSelectObject,
     ],
   );
 
@@ -143,16 +151,18 @@ export const useExtensions = ({
 const createBaseExtensions = ({
   id,
   object,
-  invokePromise,
+  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);
 
   //
@@ -166,12 +176,7 @@ const createBaseExtensions = ({
           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,
-            });
-          }),
+          renderLinkButton: onSelectObject && createRenderLink(onSelectObject),
         }),
         linkTooltip(renderLinkTooltip),
         preview(previewOptions),
@@ -181,9 +186,9 @@ const createBaseExtensions = ({
   }
 
   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 }));
     }
   }
 
@@ -217,21 +222,33 @@ const createRenderLink =
   (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'));
+    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) {
-      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' });
+      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(anchor.root);
+    el.appendChild(icon.root);
   };
 
 const renderLinkTooltip: RenderCallback<{ url: string }> = (el, { url }) => {
@@ -239,7 +256,7 @@ const renderLinkTooltip: RenderCallback<{ url: string }> = (el, { url }) => {
     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,
+      .text(safeUrl(url)?.toString() ?? url)
+      .append(Domino.svg('ph--arrow-square-out--regular')).root,
   );
 };

package/src/hooks/useLinkQuery.ts

@@ -5,24 +5,18 @@
 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 { Annotation } from '@dxos/echo';
 import { EntityKind, SystemTypeAnnotation, getTypeAnnotation } from '@dxos/echo/internal';
-import { toLocalizedString, useTranslation } from '@dxos/react-ui';
+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';
 
+import { Markdown } from '../types';
+
 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(
@@ -36,35 +30,29 @@ export const useLinkQuery = (db: Database.Database | undefined) => {
 
   const handleLinkQuery = useCallback(
     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 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 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
           ?.filter((object) => toLocalizedString(getLabel(object), t).toLowerCase().includes(name))
-          // TODO(wittjosiah): Remove `any` type.
-          .map((object: any): EditorMenuItem => {
-            const metadata = resolve(Obj.getTypename(object)!);
+          .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,
+              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 {
@@ -74,9 +62,30 @@ export const useLinkQuery = (db: Database.Database | 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] },
+      ];
     },
-    [db, filter, resolve],
+    [db, filter, t],
   );
 
   return handleLinkQuery;

package/src/index.ts

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

package/src/meta.ts

@@ -6,7 +6,7 @@ import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
 export const meta: Plugin.Meta = {
-  id: 'dxos.org/plugin/markdown',
+  id: 'org.dxos.plugin.markdown',
   name: 'Markdown',
   description: trim`
     Full-featured collaborative markdown editor with real-time editing, inline comments, and rich formatting.

package/src/operations/create-markdown.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Operation } from '@dxos/compute';
+
+import { Markdown, MarkdownOperation } from '../types';
+
+const handler: Operation.WithHandler<typeof MarkdownOperation.CreateMarkdown> = MarkdownOperation.CreateMarkdown.pipe(
+  Operation.withHandler(({ name, content }) =>
+    Effect.succeed({
+      object: Markdown.make({ name, content }),
+    }),
+  ),
+);
+
+export default handler;