@dxos/plugin-markdown 0.8.1 → 0.8.2-main.f081794

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-markdown",
-  "version": "0.8.1",
+  "version": "0.8.2-main.f081794",
   "description": "DXOS Surface plugin for interacting with Markdown",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -38,30 +38,32 @@
     "@preact/signals-core": "^1.6.0",
     "effect": "3.13.3",
     "react-dropzone": "^14.2.3",
-    "@dxos/app-framework": "0.8.1",
-    "@dxos/echo-schema": "0.8.1",
-    "@dxos/artifact": "0.8.1",
-    "@dxos/async": "0.8.1",
-    "@dxos/invariant": "0.8.1",
-    "@dxos/keys": "0.8.1",
-    "@dxos/local-storage": "0.8.1",
-    "@dxos/live-object": "0.8.1",
-    "@dxos/log": "0.8.1",
-    "@dxos/plugin-client": "0.8.1",
-    "@dxos/plugin-deck": "0.8.1",
-    "@dxos/plugin-graph": "0.8.1",
-    "@dxos/plugin-space": "0.8.1",
-    "@dxos/plugin-attention": "0.8.1",
-    "@dxos/plugin-theme": "0.8.1",
-    "@dxos/react-client": "0.8.1",
-    "@dxos/react-hooks": "0.8.1",
-    "@dxos/react-ui-attention": "0.8.1",
-    "@dxos/react-ui-card": "0.8.1",
-    "@dxos/react-ui-editor": "0.8.1",
-    "@dxos/react-ui-form": "0.8.1",
-    "@dxos/react-ui-stack": "0.8.1",
-    "@dxos/util": "0.8.1",
-    "@dxos/schema": "0.8.1"
+    "@dxos/app-framework": "0.8.2-main.f081794",
+    "@dxos/automerge": "0.8.2-main.f081794",
+    "@dxos/artifact": "0.8.2-main.f081794",
+    "@dxos/echo-schema": "0.8.2-main.f081794",
+    "@dxos/keys": "0.8.2-main.f081794",
+    "@dxos/lit-ui": "0.8.2-main.f081794",
+    "@dxos/async": "0.8.2-main.f081794",
+    "@dxos/invariant": "0.8.2-main.f081794",
+    "@dxos/live-object": "0.8.2-main.f081794",
+    "@dxos/log": "0.8.2-main.f081794",
+    "@dxos/plugin-attention": "0.8.2-main.f081794",
+    "@dxos/local-storage": "0.8.2-main.f081794",
+    "@dxos/plugin-client": "0.8.2-main.f081794",
+    "@dxos/plugin-deck": "0.8.2-main.f081794",
+    "@dxos/plugin-graph": "0.8.2-main.f081794",
+    "@dxos/plugin-theme": "0.8.2-main.f081794",
+    "@dxos/react-client": "0.8.2-main.f081794",
+    "@dxos/plugin-space": "0.8.2-main.f081794",
+    "@dxos/react-hooks": "0.8.2-main.f081794",
+    "@dxos/react-ui-card": "0.8.2-main.f081794",
+    "@dxos/react-ui-attention": "0.8.2-main.f081794",
+    "@dxos/react-ui-form": "0.8.2-main.f081794",
+    "@dxos/react-ui-stack": "0.8.2-main.f081794",
+    "@dxos/react-ui-editor": "0.8.2-main.f081794",
+    "@dxos/schema": "0.8.2-main.f081794",
+    "@dxos/util": "0.8.2-main.f081794"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -70,18 +72,20 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui": "0.8.1",
-    "@dxos/random": "0.8.1",
-    "@dxos/react-ui-theme": "0.8.1",
-    "@dxos/debug": "0.8.1",
-    "@dxos/storybook-utils": "0.8.1"
+    "@dxos/debug": "0.8.2-main.f081794",
+    "@dxos/plugin-storybook-layout": "0.8.2-main.f081794",
+    "@dxos/plugin-theme": "0.8.2-main.f081794",
+    "@dxos/random": "0.8.2-main.f081794",
+    "@dxos/react-ui": "0.8.2-main.f081794",
+    "@dxos/storybook-utils": "0.8.2-main.f081794",
+    "@dxos/react-ui-theme": "0.8.2-main.f081794"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.1",
-    "@dxos/react-ui-theme": "0.8.1"
+    "@dxos/react-ui": "0.8.2-main.f081794",
+    "@dxos/react-ui-theme": "0.8.2-main.f081794"
   },
   "publishConfig": {
     "access": "public"

package/src/MarkdownPlugin.tsx

@@ -12,13 +12,13 @@ import { translations as editorTranslations } from '@dxos/react-ui-editor';
 import { TextType } from '@dxos/schema';
 
 import {
+  AppGraphSerializer,
+  ArtifactDefinition,
+  IntentResolver,
   MarkdownState,
   MarkdownSettings,
   ReactSurface,
-  IntentResolver,
-  AppGraphSerializer,
   Thread,
-  ArtifactDefinition,
 } from './capabilities';
 import { MarkdownEvents } from './events';
 import { meta } from './meta';

package/src/capabilities/intent-resolver.ts

@@ -2,10 +2,21 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, createResolver, type PluginsContext } from '@dxos/app-framework';
-import { ObjectId } from '@dxos/echo-schema';
+import {
+  Capabilities,
+  CollaborationActions,
+  contributes,
+  createResolver,
+  type PluginsContext,
+} from '@dxos/app-framework';
+import { next as A } from '@dxos/automerge/automerge';
+import { isInstanceOf, ObjectId } from '@dxos/echo-schema';
 import { DXN, QueueSubspaceTags } from '@dxos/keys';
-import { makeRef, create, refFromDXN } from '@dxos/live-object';
+import { makeRef, live, refFromDXN } from '@dxos/live-object';
+import { log } from '@dxos/log';
+import { ClientCapabilities } from '@dxos/plugin-client';
+import { resolveRef } from '@dxos/react-client';
+import { createDocAccessor } from '@dxos/react-client/echo';
 import { TextType } from '@dxos/schema';
 
 import { MarkdownCapabilities } from './capabilities';
@@ -16,9 +27,9 @@ export default (context: PluginsContext) =>
     createResolver({
       intent: MarkdownAction.Create,
       resolve: ({ name, spaceId, content }) => {
-        const doc = create(DocumentType, {
+        const doc = live(DocumentType, {
           name,
-          content: makeRef(create(TextType, { content: content ?? '' })),
+          content: makeRef(live(TextType, { content: content ?? '' })),
           assistantChatQueue: refFromDXN(new DXN(DXN.kind.QUEUE, [QueueSubspaceTags.DATA, spaceId, ObjectId.random()])),
           threads: [],
         });
@@ -33,4 +44,26 @@ export default (context: PluginsContext) =>
         state.viewMode[id] = viewMode;
       },
     }),
+    // TODO(burdon): What is the error boundary for intents? Are errors reported back to caller?
+    createResolver({
+      intent: CollaborationActions.InsertContent,
+      resolve: async ({ spaceId, target: targetRef, object: objectRef, label }) => {
+        const client = context.requestCapability(ClientCapabilities.Client);
+        const space = client.spaces.get(spaceId);
+        const target = await resolveRef(client, targetRef.dxn, space);
+        if (target && isInstanceOf(DocumentType, target)) {
+          const accessor = createDocAccessor(target, ['content']);
+          // TODO(burdon): Should be a cursor that references a selected position.
+          const index = 0;
+          accessor.handle.change((doc) => {
+            // TODO(burdon): Throws error:
+            // intent-dispatcher.ts:270 Cannot read properties of undefined (reading 'annotations') (FiberFailure) TypeError: Cannot read properties of undefined (reading 'annotations')
+            const ref = `[${label ?? 'Generated content'}]](${objectRef.dxn.toString()})\n`;
+            A.splice(doc, accessor.path.slice(), index, 0, ref);
+          });
+        } else {
+          log.warn('target is not a document', { targetRef, objectRef });
+        }
+      },
+    }),
   ]);

package/src/capabilities/settings.ts

@@ -3,13 +3,13 @@
 //
 
 import { Capabilities, contributes } from '@dxos/app-framework';
-import { create } from '@dxos/live-object';
+import { live } from '@dxos/live-object';
 
 import { MARKDOWN_PLUGIN } from '../meta';
 import { type MarkdownSettingsProps, MarkdownSettingsSchema } from '../types';
 
 export default () => {
-  const settings = create<MarkdownSettingsProps>({
+  const settings = live<MarkdownSettingsProps>({
     defaultViewMode: 'preview',
     toolbar: true,
     numberedHeadings: true,

package/src/capabilities/state.ts

@@ -12,7 +12,6 @@ import { type MarkdownPluginState, type MarkdownSettingsProps } from '../types';
 
 export default (context: PluginsContext) => {
   const state = new LocalStorageStore<MarkdownPluginState>(MARKDOWN_PLUGIN, { extensionProviders: [], viewMode: {} });
-
   state.prop({ key: 'viewMode', type: LocalStorageStore.json<{ [key: string]: EditorViewMode }>() });
 
   // TODO(wittjosiah): Fold into state.
@@ -27,5 +26,6 @@ export default (context: PluginsContext) => {
 
   const setViewMode = (id: string, viewMode: EditorViewMode) => (state.values.viewMode[id] = viewMode);
 
+  // Return object with methods.
   return contributes(MarkdownCapabilities.State, { state: state.values, editorState, getViewMode, setViewMode });
 };

package/src/components/MarkdownContainer.tsx

@@ -68,6 +68,7 @@ const MarkdownContainer = ({
       />
     );
   } else {
+    // TODO(burdon): Normalize with above.
     return (
       <MarkdownEditor
         id={id}

package/src/components/MarkdownEditor.stories.tsx

@@ -10,19 +10,14 @@ import React, { useMemo } from 'react';
 import { IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { createDocAccessor, createObject } from '@dxos/react-client/echo';
-import { Main } from '@dxos/react-ui';
-import { AttendableContainer } from '@dxos/react-ui-attention';
 import { withAttention } from '@dxos/react-ui-attention/testing';
-import { editorWithToolbarLayout, automerge, translations as editorTranslations } from '@dxos/react-ui-editor';
-import { topbarBlockPaddingStart } from '@dxos/react-ui-theme';
+import { automerge, translations as editorTranslations } from '@dxos/react-ui-editor';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
 import translations from '../translations';
 
-const content = Array.from({ length: 100 })
-  .map((_, i) => `Line ${i + 1}`)
-  .join('\n');
+const content = Array.from({ length: 100 }, (_, i) => `Line ${i + 1}`).join('\n');
 
 type StoryProps = MarkdownEditorProps & {
   content?: string;
@@ -32,43 +27,35 @@ type StoryProps = MarkdownEditorProps & {
 const DefaultStory = ({ content = '# Test', toolbar }: StoryProps) => {
   const doc = useMemo(() => createObject({ content }), [content]);
   const extensions = useMemo(() => [automerge(createDocAccessor(doc, ['content']))], [doc]);
-  return (
-    <Main.Content
-      bounce
-      data-toolbar={toolbar ? 'enabled' : 'disabled'}
-      classNames={[topbarBlockPaddingStart, editorWithToolbarLayout]}
-    >
-      <AttendableContainer id='test'>
-        <MarkdownEditor id='test' initialValue={doc.content} extensions={extensions} toolbar={toolbar} />
-      </AttendableContainer>
-    </Main.Content>
-  );
-};
-
-export const Default = {
-  args: {
-    content,
-  },
-};
-
-export const WithToolbar = {
-  args: {
-    content,
-    toolbar: true,
-  },
+  return <MarkdownEditor id='test' initialValue={doc.content} extensions={extensions} toolbar={toolbar} />;
 };
 
 const meta: Meta<typeof MarkdownEditor> = {
-  title: 'plugins/plugin-markdown/EditorMain',
+  title: 'plugins/plugin-markdown/MarkdownEditor',
   component: MarkdownEditor,
   render: DefaultStory,
   decorators: [
     withTheme,
-    withLayout({ tooltips: true }),
+    withLayout({ tooltips: true, fullscreen: true }),
     withAttention,
     withPluginManager({ plugins: [IntentPlugin()] }),
   ],
-  parameters: { layout: 'fullscreen', translations: [...translations, ...editorTranslations] },
+  parameters: {
+    translations: [...translations, ...editorTranslations],
+  },
 };
 
 export default meta;
+
+export const Default = {
+  args: {
+    content,
+  },
+};
+
+export const WithToolbar = {
+  args: {
+    toolbar: true,
+    content,
+  },
+};

package/src/components/MarkdownEditor.tsx

@@ -211,7 +211,7 @@ export const MarkdownEditor = ({
   );
 
   return (
-    <StackItem.Content toolbar={!!toolbar}>
+    <StackItem.Content toolbar={!!toolbar} classNames='is-full min-bs-0'>
       {toolbar && (
         <>
           <EditorToolbar

package/src/components/Suggestions.stories.tsx

@@ -0,0 +1,182 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta } from '@storybook/react';
+import React, { type FC, useEffect, useMemo, useState } from 'react';
+
+import {
+  Capabilities,
+  CollaborationActions,
+  IntentPlugin,
+  SettingsPlugin,
+  contributes,
+  createIntent,
+  useCapability,
+  useIntentDispatcher,
+} from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Message } from '@dxos/artifact';
+import { S, AST, create, type Expando, EchoObject } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import { DXN } from '@dxos/keys';
+import { live, makeRef, refFromDXN } from '@dxos/live-object';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { SpacePlugin } from '@dxos/plugin-space';
+import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
+import { ThemePlugin } from '@dxos/plugin-theme';
+import { faker } from '@dxos/random';
+import { randomQueueDxn, useQueue, useSpace } from '@dxos/react-client/echo';
+import { IconButton, Toolbar } from '@dxos/react-ui';
+import { command, useTextEditor } from '@dxos/react-ui-editor';
+import { StackItem } from '@dxos/react-ui-stack';
+import { defaultTx } from '@dxos/react-ui-theme';
+import { withLayout } from '@dxos/storybook-utils';
+
+import MarkdownContainer from './MarkdownContainer';
+import { MarkdownPlugin } from '../MarkdownPlugin';
+import { MarkdownCapabilities } from '../capabilities';
+import { MARKDOWN_PLUGIN } from '../meta';
+import translations from '../translations';
+import { createDocument, DocumentType, type MarkdownSettingsProps } from '../types';
+
+faker.seed(1);
+
+const TestItem = S.Struct({
+  title: S.String.annotations({
+    [AST.TitleAnnotationId]: 'Title',
+    [AST.DescriptionAnnotationId]: 'Product title',
+  }),
+  description: S.String.annotations({
+    [AST.TitleAnnotationId]: 'Description',
+    [AST.DescriptionAnnotationId]: 'Product description',
+  }),
+}).pipe(EchoObject({ typename: 'dxos.org/type/Test', version: '0.1.0' }));
+
+const TestChat: FC<{ doc: DocumentType; content: string }> = ({ doc, content }) => {
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { parentRef } = useTextEditor({ initialValue: content });
+
+  const space = useSpace();
+  const queueDxn = useMemo(() => space && randomQueueDxn(space.id), [space]);
+  const queue = useQueue<Message>(queueDxn);
+
+  const handleInsert = () => {
+    invariant(space);
+    invariant(queue);
+    queue.append([create(Message, { role: 'assistant', content: [{ type: 'text', text: 'Hello' }] })]);
+    const message = queue.items[queue.items.length - 1];
+
+    // {
+    //   const ref = refFromDXN(new DXN(DXN.kind.QUEUE, [...queue.dxn.parts, message.id]));
+
+    //   const message = deref(ref);
+    // }
+
+    void dispatch(
+      createIntent(CollaborationActions.InsertContent, {
+        spaceId: space.id,
+        target: makeRef(doc as any as Expando), // TODO(burdon): Comomon base type.
+        object: refFromDXN(new DXN(DXN.kind.QUEUE, [...queue.dxn.parts, message.id])),
+        label: 'Proposal',
+      }),
+    );
+  };
+
+  return (
+    <StackItem.Content toolbar classNames='w-full'>
+      <Toolbar.Root classNames='border-be border-separator'>
+        <IconButton icon='ph--plus--regular' disabled={!queue} label='Insert' onClick={handleInsert} />
+      </Toolbar.Root>
+      <div ref={parentRef} className='p-4' />
+    </StackItem.Content>
+  );
+};
+
+const DefaultStory = ({ document, chat }: { document: string; chat: string }) => {
+  const space = useSpace();
+  const [doc, setDoc] = useState<DocumentType>();
+  const settings = useCapability(Capabilities.SettingsStore).getStore<MarkdownSettingsProps>(MARKDOWN_PLUGIN)!.value;
+
+  useEffect(() => {
+    if (!space) {
+      return undefined;
+    }
+
+    const doc = space.db.add(
+      createDocument({
+        name: 'Test',
+
+        // Create links.
+        content: document.replaceAll(/\[(\w+)\]/g, (_, label) => {
+          const obj = space.db.add(live(TestItem, { title: label, description: faker.lorem.paragraph() }));
+          const dxn = makeRef(obj).dxn.toString();
+          return `[${label}][${dxn}]`;
+        }),
+      }),
+    );
+
+    setDoc(doc);
+  }, [space]);
+
+  if (!space || !doc) {
+    return <></>;
+  }
+
+  return (
+    <>
+      <MarkdownContainer id={doc.id} object={doc} settings={settings} />
+      <TestChat doc={doc} content={chat} />
+    </>
+  );
+};
+
+const meta: Meta<typeof DefaultStory> = {
+  title: 'plugins/plugin-markdown/Suggestions',
+  render: DefaultStory,
+  decorators: [
+    withPluginManager({
+      plugins: [
+        ThemePlugin({ tx: defaultTx }),
+        StorybookLayoutPlugin(),
+        ClientPlugin({
+          types: [DocumentType, TestItem],
+          onClientInitialized: async (_, client) => {
+            await client.halo.createIdentity();
+          },
+        }),
+        SpacePlugin(),
+        SettingsPlugin(),
+        IntentPlugin(),
+        MarkdownPlugin(),
+      ],
+      capabilities: [contributes(MarkdownCapabilities.Extensions, [() => command()])],
+    }),
+    withLayout({ tooltips: true, fullscreen: true, classNames: 'grid grid-cols-2' }),
+  ],
+  parameters: {
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = Meta<typeof DefaultStory>;
+
+export const Default: Story = {
+  args: {
+    chat: 'Hello\n',
+    document: [
+      '# Test',
+      '',
+      faker.lorem.paragraph(1),
+      '',
+      'This is a [DXOS] story that tests [ECHO] references inside the Markdown plugin.',
+      '',
+      faker.lorem.paragraph(3),
+      '',
+    ].join('\n'),
+  },
+};

package/src/components/Toolbar.stories.tsx

@@ -8,11 +8,12 @@ import { type Meta } from '@storybook/react';
 import React, { type FC, useState } from 'react';
 
 import { PublicKey } from '@dxos/keys';
-import { create } from '@dxos/live-object';
+import { live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { createDocAccessor, createObject } from '@dxos/react-client/echo';
 import { useThemeContext } from '@dxos/react-ui';
 import {
+  EditorToolbar,
   type EditorAction,
   type Comment,
   comments,
@@ -23,7 +24,6 @@ import {
   decorateMarkdown,
   editorContent,
   formattingKeymap,
-  EditorToolbar,
   translations,
   useActionHandler,
   useComments,
@@ -36,11 +36,9 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 faker.seed(101);
 
-const _onUpload = async (file: File) => ({ url: file.name });
-
 const DefaultStory: FC<{ content?: string }> = ({ content = '' }) => {
   const { themeMode } = useThemeContext();
-  const [text] = useState(createObject(create(TextType, { content })));
+  const [text] = useState(createObject(live(TextType, { content })));
   const toolbarState = useEditorToolbarState({ viewMode: 'preview' });
   const formattingObserver = useFormattingState(toolbarState);
   const { parentRef, view } = useTextEditor(() => {
@@ -79,9 +77,9 @@ const DefaultStory: FC<{ content?: string }> = ({ content = '' }) => {
   useComments(view, text.id, _comments);
 
   return (
-    <div role='none' className='fixed inset-0 flex flex-col'>
+    <div role='none' className='flex flex-col'>
       <EditorToolbar onAction={handleAction} state={toolbarState ?? {}} />
-      <div ref={parentRef} />
+      <div className='flex grow overflow-hidden' ref={parentRef} />
     </div>
   );
 };
@@ -96,18 +94,20 @@ const content = [
   '',
 ].join('\n');
 
-export const Default = {
-  args: {
-    content,
-  },
-};
-
 const meta: Meta<typeof EditorToolbar> = {
   title: 'plugins/plugin-markdown/Toolbar',
   component: EditorToolbar,
   render: DefaultStory as any,
-  decorators: [withTheme, withLayout({ tooltips: true })],
-  parameters: { translations, layout: 'fullscreen' },
+  decorators: [withTheme, withLayout({ tooltips: true, fullscreen: true })],
+  parameters: {
+    translations,
+  },
 };
 
 export default meta;
+
+export const Default = {
+  args: {
+    content,
+  },
+};

package/src/extensions.tsx

@@ -29,8 +29,10 @@ import {
   formattingKeymap,
   linkTooltip,
   listener,
+  preview,
   selectionState,
   typewriter,
+  type RenderCallback,
 } from '@dxos/react-ui-editor';
 import { defaultTx } from '@dxos/react-ui-theme';
 import { type TextType } from '@dxos/schema';
@@ -175,7 +177,7 @@ const createBaseExtensions = ({
           // TODO(wittjosiah): For internal links, consider ignoring the link text and rendering the label of the object being linked to.
           renderLinkButton:
             dispatch && (document || id)
-              ? onRenderLink((id: string) => {
+              ? createLinkRenderer((id: string) => {
                   void dispatch(
                     createIntent(LayoutAction.Open, {
                       part: 'main',
@@ -189,6 +191,7 @@ const createBaseExtensions = ({
               : undefined,
         }),
         linkTooltip(renderLinkTooltip),
+        preview(),
       ],
     );
   }
@@ -233,40 +236,42 @@ const style = {
   icon: 'inline-block leading-none mis-1 cursor-pointer',
 };
 
-const onRenderLink = (onSelectObject: (id: string) => void) => (el: Element, url: string) => {
-  // 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 createLinkRenderer =
+  (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 options: AnchorHTMLAttributes<any> = isInternal
-    ? {
-        onClick: () => {
-          const qualifiedId = url.split('/').at(-1);
-          invariant(qualifiedId, 'Invalid link format.');
-          onSelectObject(qualifiedId);
-        },
-      }
-    : {
-        href: url,
-        rel: 'noreferrer',
-        target: '_blank',
-      };
+    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',
+        };
 
-  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>,
-  );
-};
+    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>,
+    );
+  };
 
-const renderLinkTooltip = (el: Element, url: string) => {
+const renderLinkTooltip: RenderCallback<{ url: string }> = (el, { url }) => {
   const web = new URL(url);
   renderRoot(
     el,