@dxos/plugin-markdown 0.8.4-main.3eb6e50203 → 0.8.4-main.3fbcb4aa9b

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/{components → containers/MarkdownContainer}/MarkdownContainer.stories.tsx

@@ -6,36 +6,50 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
 import React, { useMemo } from 'react';
 
+import { Capability, Plugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation } from '@dxos/app-toolkit';
+import { AppActivationEvents, LayoutOperation } from '@dxos/app-toolkit';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Obj, Query } from '@dxos/echo';
-import { ClientPlugin } from '@dxos/plugin-client';
-import { PreviewPlugin } from '@dxos/plugin-preview';
+import { ClientPlugin } from '@dxos/plugin-client/plugin';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { PreviewPlugin } from '@dxos/plugin-preview/testing';
 import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
-import { faker } from '@dxos/random';
-import { useQuery, useSpace } from '@dxos/react-client/echo';
+import { random } from '@dxos/random';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
 import { useAsyncEffect } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { useAttentionAttributes } from '@dxos/react-ui-attention';
+import { withLayout } from '@dxos/react-ui/testing';
 import { Text } from '@dxos/schema';
 import { type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
 import { Organization, Person } from '@dxos/types';
 
-import { MarkdownPlugin } from '../MarkdownPlugin';
-import { translations } from '../translations';
-import { Markdown } from '../types';
+import { translations } from '#translations';
+import { Markdown, MarkdownCapabilities, MarkdownEvents } from '#types';
 
-faker.seed(1);
+import { MarkdownPlugin } from '../../MarkdownPlugin';
 
-const generator: ValueGenerator = faker as any;
+random.seed(1);
+
+const generator: ValueGenerator = random as any;
+
+/** Minimal plugin that contributes an empty Extensions capability for stories. */
+const MarkdownExtensionsPlugin = Plugin.define({ id: 'story-markdown-extensions', name: 'Story Extensions' }).pipe(
+  Plugin.addModule({
+    id: 'extensions',
+    activatesOn: MarkdownEvents.SetupExtensions,
+    activate: () => Effect.succeed(Capability.contributes(MarkdownCapabilities.Extensions, [])),
+  }),
+  Plugin.make,
+);
 
 const DefaultStory = () => {
   const { invokePromise } = useOperationInvoker();
-  const space = useSpace();
+  const [space] = useSpaces();
   const [doc] = useQuery(space?.db, Query.type(Markdown.Document));
-  const data = useMemo(() => ({ subject: doc }), [doc]);
   const id = doc && Obj.getDXN(doc).toString();
+  const data = useMemo(() => ({ subject: doc, attendableId: id ?? 'story' }), [doc, id]);
   const attentionAttrs = useAttentionAttributes(id);
 
   useAsyncEffect(async () => {
@@ -46,39 +60,37 @@ const DefaultStory = () => {
 
   return (
     <div className='contents' {...attentionAttrs}>
-      <Surface.Surface role='article' data={data} limit={1} />
+      <Surface.Surface type={AppSurface.Article} data={data} limit={1} />
     </div>
   );
 };
 
 const meta = {
-  title: 'plugins/plugin-markdown/MarkdownContainer',
+  title: 'plugins/plugin-markdown/containers/MarkdownContainer',
   render: DefaultStory,
   decorators: [
-    withTheme(),
     withLayout({ layout: 'column' }),
     withPluginManager<{ title?: string; content?: string }>((context) => ({
+      setupEvents: [AppActivationEvents.SetupSettings, MarkdownEvents.SetupExtensions],
       plugins: [
         ...corePlugins(),
         StorybookPlugin({}),
+        MarkdownExtensionsPlugin(),
         ClientPlugin({
           types: [Markdown.Document, Text.Text, Person.Person, Organization.Organization],
           onClientInitialized: ({ client }) =>
             Effect.gen(function* () {
-              yield* Effect.promise(() => client.halo.createIdentity());
-              yield* Effect.promise(() => client.spaces.waitUntilReady());
-              yield* Effect.promise(() => client.spaces.default.waitUntilReady());
+              const { personalSpace } = yield* initializeIdentity(client);
 
-              const space = client.spaces.default;
-              const createObjects = createObjectFactory(space.db, generator);
+              const createObjects = createObjectFactory(personalSpace.db, generator);
               yield* Effect.promise(() => createObjects([{ type: Organization.Organization, count: 10 }]));
 
-              const queue = space.queues.create();
+              const queue = personalSpace.queues.create();
               const kai = Obj.make(Person.Person, { fullName: 'Kai' });
               const dxos = Obj.make(Organization.Organization, { name: 'DXOS' });
               yield* Effect.promise(() => queue.append([kai, dxos]));
 
-              space.db.add(
+              personalSpace.db.add(
                 Markdown.make({
                   name: context.args.title ?? 'Testing',
                   content: [
@@ -95,7 +107,7 @@ const meta = {
                 }),
               );
 
-              yield* Effect.promise(() => space.db.flush({ indexes: true }));
+              yield* Effect.promise(() => personalSpace.db.flush({ indexes: true }));
             }),
         }),
 

package/src/containers/MarkdownContainer/MarkdownContainer.tsx

@@ -0,0 +1,146 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import { Atom } from '@effect-atom/atom-react';
+import React, { forwardRef, useCallback, useMemo } from 'react';
+
+import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
+import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
+import { AppSurface, useAppGraph } from '@dxos/app-toolkit/ui';
+import { Obj } from '@dxos/echo';
+import { useActionRunner } from '@dxos/plugin-graph';
+import { useObject } from '@dxos/react-client/echo';
+import { Panel } from '@dxos/react-ui';
+import { type SelectionManager } from '@dxos/react-ui-attention';
+import { Editor } from '@dxos/react-ui-editor';
+import { Text } from '@dxos/schema';
+
+import {
+  MarkdownEditor,
+  MarkdownEditorProvider,
+  type MarkdownEditorContentProps,
+  type MarkdownEditorProviderProps,
+} from '#components';
+import { useLinkQuery } from '#hooks';
+import { Markdown, MarkdownCapabilities, type MarkdownPluginState } from '#types';
+
+export type MarkdownContainerProps = AppSurface.ObjectArticleProps<
+  Markdown.Document | Text.Text,
+  {
+    id: string;
+    settings: Markdown.Settings;
+    selectionManager?: SelectionManager;
+  } & Pick<MarkdownPluginState, 'extensionProviders'> &
+    Pick<MarkdownEditorProviderProps, 'viewMode' | 'onSelectObject' | 'onViewModeChange'> &
+    Pick<MarkdownEditorContentProps, 'editorStateStore'>
+>;
+
+export const MarkdownContainer = forwardRef<HTMLDivElement, MarkdownContainerProps>(
+  (
+    { role, subject: object, id, attendableId, settings, extensionProviders, onSelectObject, viewMode, ...props },
+    forwardedRef,
+  ) => {
+    const db = Obj.isObject(object) ? Obj.getDatabase(object) : undefined;
+    const [docContent] = useObject(Obj.instanceOf(Markdown.Document, object) ? object.content : undefined, 'content');
+    const [textContent] = useObject(Obj.instanceOf(Text.Text, object) ? object : undefined, 'content');
+    const initialValue = docContent ?? textContent;
+
+    // Extensions from other plugins.
+    const otherExtensionProviders = useCapabilities(MarkdownCapabilities.Extensions);
+    const extensions = useMemo<Extension[]>(() => {
+      if (!Obj.instanceOf(Markdown.Document, object) && !Obj.instanceOf(Text.Text, object)) {
+        return [];
+      }
+
+      const document = Obj.instanceOf(Markdown.Document, object) ? object : undefined;
+      return [...(otherExtensionProviders ?? []), ...(extensionProviders ?? [])]
+        .flat()
+        .reduce((acc: Extension[], provider) => {
+          const extension = typeof provider === 'function' ? provider({ document, viewMode }) : provider;
+          if (extension) {
+            acc.push(extension);
+          }
+
+          return acc;
+        }, []);
+    }, [extensionProviders, otherExtensionProviders, object, viewMode]);
+
+    // Toolbar actions from app graph.
+    const { graph } = useAppGraph();
+    const runAction = useActionRunner();
+    const customActions = useMemo(() => {
+      return Atom.make((get) => {
+        const actions = get(graph.actions(attendableId ?? id));
+        const nodes = actions.filter((action) => action.properties.disposition === 'toolbar');
+        const edges = nodes.map((node) => ({ source: 'root', target: node.id, relation: 'child' }));
+        return { nodes, edges };
+      });
+    }, [graph]);
+
+    // File upload.
+    const [upload] = useCapabilities(AppCapabilities.FileUploader);
+    const handleFileUpload = useMemo(() => {
+      if (!db || !upload) {
+        return undefined;
+      }
+
+      return async (file: File) => upload(db, file);
+    }, [db, upload]);
+
+    // Query for @ refs.
+    const handleLinkQuery = useLinkQuery(db);
+
+    // Open linked objects.
+    const { invokePromise } = useOperationInvoker();
+    const handleSelectObject = useCallback(
+      (targetId: string) => {
+        if (onSelectObject) {
+          onSelectObject(targetId);
+        } else {
+          void invokePromise?.(LayoutOperation.Open, {
+            subject: [targetId],
+            pivotId: attendableId,
+            // TODO(wittjosiah): This should probably pre-validate.
+            navigation: 'immediate',
+          });
+        }
+      },
+      [onSelectObject, invokePromise, attendableId],
+    );
+
+    return (
+      <MarkdownEditorProvider
+        id={id}
+        attendableId={attendableId}
+        object={object}
+        compact={role !== 'article'}
+        extensions={extensions}
+        settings={settings}
+        viewMode={viewMode}
+        onAction={runAction}
+        onFileUpload={handleFileUpload}
+        onLinkQuery={handleLinkQuery}
+        onSelectObject={handleSelectObject}
+        {...props}
+      >
+        {(editorRootProps) => (
+          <Editor.Root {...editorRootProps}>
+            <Panel.Root role={role} ref={forwardedRef}>
+              {settings.toolbar && (
+                <Panel.Toolbar classNames='bg-toolbar-surface'>
+                  <MarkdownEditor.Toolbar classNames='dx-document' customActions={customActions} />
+                </Panel.Toolbar>
+              )}
+              <Panel.Content>
+                <MarkdownEditor.Content initialValue={initialValue} />
+                <MarkdownEditor.Blocks />
+              </Panel.Content>
+            </Panel.Root>
+          </Editor.Root>
+        )}
+      </MarkdownEditorProvider>
+    );
+  },
+);

package/src/containers/MarkdownContainer/index.ts

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

package/src/containers/index.ts

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

package/src/hooks/index.ts

@@ -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;
@@ -56,10 +56,10 @@ export const useEditorMenuOptions = ({
       content: () => {
         const pressEl = Domino.of('span').text('Press');
         const triggerEls = trigger.map((text) =>
-          Domino.of('span').classNames('mx-1 pli-1.5 pt-[1px] pb-[2px] border border-separator rounded-sm').text(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 Domino.of('div').append(pressEl, ...triggerEls, forCommandsEl).root;
       },
     };
 

package/src/hooks/useExtensions.tsx

@@ -3,30 +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 { 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 { 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,
@@ -37,12 +33,13 @@ import {
   preview,
   replacer,
   selectionState,
-  typewriter,
+  snippets,
 } from '@dxos/ui-editor';
-import { defaultTx } from '@dxos/ui-theme';
-import { isTruthy } from '@dxos/util';
+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 };
@@ -50,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.
@@ -63,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);
 
@@ -90,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,
     ],
   );
 
@@ -145,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);
 
   //
@@ -167,17 +175,8 @@ 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:
-            invokePromise && (object || id)
-              ? createLinkRenderer((targetId: string) => {
-                  void invokePromise(LayoutOperation.Open, {
-                    subject: [targetId],
-                    pivotId: object && Obj.isObject(object) ? Obj.getDXN(object).toString() : id,
-                  });
-                })
-              : undefined,
+          // TODO(wittjosiah): For internal links render the label of the object.
+          renderLinkButton: onSelectObject && createRenderLink(onSelectObject),
         }),
         linkTooltip(renderLinkTooltip),
         preview(previewOptions),
@@ -187,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 }));
     }
   }
 
@@ -197,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;
-};