@dxos/plugin-markdown 0.6.13 → 0.6.14-main.1366248

package/src/components/MarkdownEditor.tsx

@@ -3,69 +3,63 @@
 //
 
 import { openSearchPanel } from '@codemirror/search';
-import { EditorView } from '@codemirror/view';
+import { type EditorView } from '@codemirror/view';
 import React, { useMemo, useEffect, useCallback } from 'react';
 
-import {
-  type FileInfo,
-  LayoutAction,
-  type LayoutCoordinate,
-  useResolvePlugin,
-  useIntentResolver,
-  parseLayoutPlugin,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
-import { parseAttentionPlugin } from '@dxos/plugin-attention';
+import { type FileInfo, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
 import { useThemeContext, useTranslation } from '@dxos/react-ui';
+import { useAttendableAttributes, useAttention } from '@dxos/react-ui-attention';
 import {
   type Action,
   type DNDOptions,
   type EditorViewMode,
   type EditorInputMode,
-  type UseTextEditorProps,
+  type EditorSelectionState,
+  type EditorStateStore,
   Toolbar,
+  type UseTextEditorProps,
   createBasicExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   dropFile,
+  editorContent,
+  editorGutter,
   processAction,
   useActionHandler,
   useCommentState,
   useCommentClickListener,
   useFormattingState,
   useTextEditor,
-  editorContent,
-  editorGutter,
-  Cursor,
-  setSelection,
 } from '@dxos/react-ui-editor';
 import { sectionToolbarLayout } from '@dxos/react-ui-stack';
 import { textBlockWidth, focusRing, mx } from '@dxos/react-ui-theme';
-import { nonNullable } from '@dxos/util';
+import { isNotFalsy, nonNullable } from '@dxos/util';
 
+import { useSelectCurrentThread } from '../hooks';
 import { MARKDOWN_PLUGIN } from '../meta';
-import type { MarkdownPluginState } from '../types';
-
-const attentionFragment = mx(
-  'group-focus-within/editor:attention-surface group-[[aria-current]]/editor:attention-surface',
-  'group-focus-within/editor:border-separator',
-);
+import { type MarkdownPluginState } from '../types';
 
 const DEFAULT_VIEW_MODE: EditorViewMode = 'preview';
 
 export type MarkdownEditorProps = {
   id: string;
-  coordinate?: LayoutCoordinate;
-  inputMode?: EditorInputMode;
   role?: string;
+  inputMode?: EditorInputMode;
   scrollPastEnd?: boolean;
   toolbar?: boolean;
   viewMode?: EditorViewMode;
+  editorStateStore?: EditorStateStore;
   onViewModeChange?: (id: string, mode: EditorViewMode) => void;
   onFileUpload?: (file: File) => Promise<FileInfo | undefined>;
-} & Pick<UseTextEditorProps, 'initialValue' | 'scrollTo' | 'selection' | 'extensions'> &
+} & Pick<UseTextEditorProps, 'initialValue' | 'extensions'> &
   Partial<Pick<MarkdownPluginState, 'extensionProviders'>>;
 
+/**
+ * Base markdown editor component.
+ *
+ * This component provides all the features of the markdown editor that do no depend on ECHO.
+ * This allows it to be used as a common editor for markdown content on arbitrary backends (e.g. files).
+ */
 export const MarkdownEditor = ({
   id,
   role = 'article',
@@ -73,62 +67,39 @@ export const MarkdownEditor = ({
   extensions,
   extensionProviders,
   scrollPastEnd,
-  scrollTo,
-  selection,
   toolbar,
   viewMode,
+  editorStateStore,
   onFileUpload,
   onViewModeChange,
 }: MarkdownEditorProps) => {
   const { t } = useTranslation(MARKDOWN_PLUGIN);
   const { themeMode } = useThemeContext();
   const dispatch = useIntentDispatcher();
-  const attentionPlugin = useResolvePlugin(parseAttentionPlugin);
-  const layoutPlugin = useResolvePlugin(parseLayoutPlugin);
-  const attended = Array.from(attentionPlugin?.provides.attention?.attended ?? []);
-  const isDirectlyAttended = attended.length === 1 && attended[0] === id;
   const [formattingState, formattingObserver] = useFormattingState();
+  const attendableAttributes = useAttendableAttributes(id);
+  const { hasAttention } = useAttention(id);
+
+  // Restore last selection and scroll point.
+  const { scrollTo, selection } = useMemo<EditorSelectionState>(() => editorStateStore?.getState(id) ?? {}, [id]);
 
   // Extensions from other plugins.
-  const providerExtensions = useMemo(() => extensionProviders?.map((provider) => provider({})), [extensionProviders]);
+  // TODO(burdon): Reconcile with DocumentEditor.useExtensions.
+  const providerExtensions = useMemo(
+    () => extensionProviders?.flatMap((provider) => provider({})).filter(nonNullable),
+    [extensionProviders],
+  );
 
   // TODO(Zan): Move these into thread plugin as well?
   const [commentsState, commentObserver] = useCommentState();
   const onCommentClick = useCallback(() => {
-    void dispatch({ action: LayoutAction.SET_LAYOUT, data: { element: 'complementary', state: true } });
+    void dispatch({
+      action: LayoutAction.SET_LAYOUT,
+      data: { element: 'complementary', state: true },
+    });
   }, [dispatch]);
   const commentClickObserver = useCommentClickListener(onCommentClick);
 
-  // Focus the space that references the comment.
-  useIntentResolver(MARKDOWN_PLUGIN, ({ action, data }) => {
-    switch (action) {
-      // TODO(burdon): Use fully qualified ids everywhere.
-      case LayoutAction.SCROLL_INTO_VIEW: {
-        if (editorView && data?.id === id && data?.cursor) {
-          // TODO(burdon): We need typed intents.
-          const range = Cursor.getRangeFromCursor(editorView.state, data.cursor);
-          if (range) {
-            const selection = editorView.state.selection.main.from !== range.from ? { anchor: range.from } : undefined;
-            const effects = [
-              // NOTE: This does not use the DOM scrollIntoView function.
-              EditorView.scrollIntoView(range.from, { y: 'start', yMargin: 96 }),
-            ];
-            if (selection) {
-              // Update the editor selection to get bi-directional highlighting.
-              effects.push(setSelection.of({ current: id }));
-            }
-
-            editorView.dispatch({
-              effects,
-              selection: selection ? { anchor: range.from } : undefined,
-            });
-          }
-        }
-        break;
-      }
-    }
-  });
-
   // Drag files.
   const handleDrop: DNDOptions['onDrop'] = async (view, { files }) => {
     const file = files[0];
@@ -161,16 +132,16 @@ export const MarkdownEditor = ({
           slots: { content: { className: editorContent } },
         }),
         editorGutter,
-        role !== 'section' && onFileUpload ? dropFile({ onDrop: handleDrop }) : [],
+        role !== 'section' && onFileUpload && dropFile({ onDrop: handleDrop }),
         providerExtensions,
         extensions,
-      ].filter(nonNullable),
+      ].filter(isNotFalsy),
       ...(role !== 'section' && {
         id,
         scrollTo,
         selection,
         // TODO(wittjosiah): Autofocus based on layout is racy.
-        autoFocus: layoutPlugin?.provides.layout ? layoutPlugin?.provides.layout.scrollIntoView === id : true,
+        // autoFocus: layoutPlugin?.provides.layout ? layoutPlugin?.provides.layout.scrollIntoView === id : true,
         moveToEndOfLine: true,
       }),
     }),
@@ -178,6 +149,7 @@ export const MarkdownEditor = ({
   );
 
   useTest(editorView);
+  useSelectCurrentThread(editorView, id);
 
   // Toolbar handler.
   const handleToolbarAction = useActionHandler(editorView);
@@ -201,29 +173,27 @@ export const MarkdownEditor = ({
   return (
     <div
       role='none'
-      // TODO(burdon): Move role logic out of here (see sheet, table, sketch, etc.)
       {...(role === 'section'
         ? { className: 'flex flex-col' }
         : {
-            className: 'contents group/editor',
-            ...(isDirectlyAttended && { 'aria-current': 'location' }),
+            className: 'contents',
+            // TODO(wittjosiah): Factor out to `useAttendableAttributes`?
+            ...(hasAttention && { 'aria-current': 'location' }),
+            ...attendableAttributes,
           })}
     >
       {toolbar && (
-        <div role='none' className={mx('flex shrink-0 justify-center overflow-x-auto', attentionFragment)}>
+        <div role='none' className='flex shrink-0 justify-center overflow-x-auto attention-surface'>
           <Toolbar.Root
             classNames={
               role === 'section'
                 ? [
                     textBlockWidth,
                     'z-[2] group-focus-within/section:visible',
-                    !isDirectlyAttended && 'invisible',
+                    !hasAttention && 'invisible',
                     sectionToolbarLayout,
                   ]
-                : [
-                    textBlockWidth,
-                    'group-focus-within/editor:border-separator group-[[aria-current]]/editor:border-separator',
-                  ]
+                : [textBlockWidth]
             }
             state={formattingState && { ...formattingState, ...commentsState }}
             onAction={handleAction}
@@ -247,8 +217,8 @@ export const MarkdownEditor = ({
             : mx(
                 'flex is-full bs-full overflow-hidden',
                 focusRing,
-                attentionFragment,
-                'focus-visible:ring-inset',
+                'focus-visible:ring-inset attention-surface',
+                'p-0.5', // TODO(burdon): Handle padding for focusRing consistently.
                 'data-[toolbar=disabled]:pbs-2 data-[toolbar=disabled]:row-span-2',
               )
         }
@@ -268,5 +238,3 @@ const useTest = (view?: EditorView) => {
     }
   }, [view]);
 };
-
-export default MarkdownEditor;

package/src/components/MarkdownSettings.tsx

@@ -4,8 +4,8 @@
 
 import React from 'react';
 
-import { SettingsValue } from '@dxos/plugin-settings';
 import { Input, Select, useTranslation } from '@dxos/react-ui';
+import { DeprecatedFormInput } from '@dxos/react-ui-data';
 import { type EditorInputMode, EditorInputModes, type EditorViewMode, EditorViewModes } from '@dxos/react-ui-editor';
 
 import { MARKDOWN_PLUGIN } from '../meta';
@@ -17,7 +17,7 @@ export const MarkdownSettings = ({ settings }: { settings: MarkdownSettingsProps
   // TODO(wittjosiah): Add skill test confirmation for entering vim mode.
   return (
     <>
-      <SettingsValue label={t('default view mode label')}>
+      <DeprecatedFormInput label={t('default view mode label')}>
         <Select.Root
           value={settings.defaultViewMode}
           onValueChange={(value) => {
@@ -37,9 +37,9 @@ export const MarkdownSettings = ({ settings }: { settings: MarkdownSettingsProps
             </Select.Content>
           </Select.Portal>
         </Select.Root>
-      </SettingsValue>
+      </DeprecatedFormInput>
 
-      <SettingsValue label={t('editor input mode label')}>
+      <DeprecatedFormInput label={t('editor input mode label')}>
         <Select.Root
           value={settings.editorInputMode ?? 'default'}
           onValueChange={(value) => {
@@ -59,31 +59,31 @@ export const MarkdownSettings = ({ settings }: { settings: MarkdownSettingsProps
             </Select.Content>
           </Select.Portal>
         </Select.Root>
-      </SettingsValue>
+      </DeprecatedFormInput>
 
-      <SettingsValue label={t('settings toolbar label')}>
+      <DeprecatedFormInput label={t('settings toolbar label')}>
         <Input.Switch checked={settings.toolbar} onCheckedChange={(checked) => (settings.toolbar = !!checked)} />
-      </SettingsValue>
+      </DeprecatedFormInput>
 
-      <SettingsValue label={t('settings numbered headings label')}>
+      <DeprecatedFormInput label={t('settings numbered headings label')}>
         <Input.Switch
           checked={settings.numberedHeadings}
           onCheckedChange={(checked) => (settings.numberedHeadings = !!checked)}
         />
-      </SettingsValue>
+      </DeprecatedFormInput>
 
-      <SettingsValue label={t('settings folding label')}>
+      <DeprecatedFormInput label={t('settings folding label')}>
         <Input.Switch checked={settings.folding} onCheckedChange={(checked) => (settings.folding = !!checked)} />
-      </SettingsValue>
+      </DeprecatedFormInput>
 
-      <SettingsValue label={t('settings experimental label')}>
+      <DeprecatedFormInput label={t('settings experimental label')}>
         <Input.Switch
           checked={settings.experimental}
           onCheckedChange={(checked) => (settings.experimental = !!checked)}
         />
-      </SettingsValue>
+      </DeprecatedFormInput>
 
-      <SettingsValue
+      <DeprecatedFormInput
         label={t('settings debug label')}
         secondary={
           settings.debug ? (
@@ -99,7 +99,7 @@ export const MarkdownSettings = ({ settings }: { settings: MarkdownSettingsProps
         }
       >
         <Input.Switch checked={settings.debug} onCheckedChange={(checked) => (settings.debug = !!checked)} />
-      </SettingsValue>
+      </DeprecatedFormInput>
     </>
   );
 };

package/src/components/Toolbar.stories.tsx

@@ -4,12 +4,13 @@
 
 import '@dxos-theme';
 
+import { type Meta } from '@storybook/react';
 import React, { type FC, useState } from 'react';
 
 import { create } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
 import { faker } from '@dxos/random';
-import { createDocAccessor, createEchoObject } from '@dxos/react-client/echo';
+import { createDocAccessor, createObject } from '@dxos/react-client/echo';
 import { useThemeContext } from '@dxos/react-ui';
 import {
   type Action,
@@ -37,9 +38,9 @@ import { TextType } from '../types';
 
 faker.seed(101);
 
-const Story: FC<{ content: string }> = ({ content }) => {
+const DefaultStory: FC<{ content?: string }> = ({ content = '' }) => {
   const { themeMode } = useThemeContext();
-  const [text] = useState(createEchoObject(create(TextType, { content })));
+  const [text] = useState(createObject(create(TextType, { content })));
   const [formattingState, formattingObserver] = useFormattingState();
   const [viewMode, setViewMode] = useState<EditorViewMode>('preview');
   const { parentRef, view } = useTextEditor(() => {
@@ -91,14 +92,6 @@ const Story: FC<{ content: string }> = ({ content }) => {
   );
 };
 
-export default {
-  title: 'react-ui-editor/Toolbar',
-  component: Toolbar,
-  decorators: [withTheme, withLayout({ tooltips: true })],
-  parameters: { translations, layout: 'fullscreen' },
-  render: (args: any) => <Story {...args} />,
-} as any;
-
 const content = [
   '# Demo',
   '',
@@ -114,3 +107,13 @@ export const Default = {
     content,
   },
 };
+
+const meta: Meta<typeof Toolbar.Root> = {
+  title: 'plugins/plugin-markdown/Toolbar',
+  component: Toolbar.Root,
+  render: DefaultStory as any,
+  decorators: [withTheme, withLayout({ tooltips: true })],
+  parameters: { translations, layout: 'fullscreen' },
+};
+
+export default meta;

package/src/components/index.ts

@@ -2,20 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { type LazyExoticComponent } from 'react';
+import { lazy } from 'react';
 
-import { type DocumentEditor as DocumentEditorType } from './DocumentEditor';
-
-export { type DocumentCardProps, type DocumentItemProps } from './DocumentCard';
-
-export * from './DocumentCard';
-export * from './DocumentEditor';
-export * from './MarkdownEditor';
-export * from './HeadingMenu';
-export * from './Layout';
 export * from './MarkdownSettings';
 
-// Lazily load components for content surfaces.
-export const DocumentCard = React.lazy(() => import('./DocumentCard'));
-export const DocumentEditor: LazyExoticComponent<DocumentEditorType> = React.lazy(() => import('./DocumentEditor'));
-export const MarkdownEditor = React.lazy(() => import('./MarkdownEditor'));
+export const MarkdownContainer = lazy(() => import('./MarkdownContainer'));

package/src/extensions.tsx

@@ -2,63 +2,133 @@
 // Copyright 2023 DXOS.org
 //
 
-import { ArrowSquareDown, ArrowSquareOut, type Icon } from '@phosphor-icons/react';
-import React, { type AnchorHTMLAttributes, StrictMode } from 'react';
+import React, { type AnchorHTMLAttributes, type ReactNode, useMemo } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { type IntentDispatcher, NavigationAction } from '@dxos/app-framework';
+import { type IntentDispatcher, NavigationAction, useIntentDispatcher } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
-import { fullyQualifiedId, type Query } from '@dxos/react-client/echo';
+import { createDocAccessor, fullyQualifiedId, getSpace, type Query } from '@dxos/react-client/echo';
+import { useIdentity } from '@dxos/react-client/halo';
+import { Icon, ThemeProvider } from '@dxos/react-ui';
 import {
   type AutocompleteResult,
-  type Extension,
+  type EditorStateStore,
   type EditorViewMode,
+  type Extension,
+  InputModeExtensions,
+  createDataExtensions,
   autocomplete,
   decorateMarkdown,
+  folding,
+  formattingKeymap,
   linkTooltip,
+  listener,
+  selectionState,
   typewriter,
-  formattingKeymap,
-  InputModeExtensions,
-  folding,
 } from '@dxos/react-ui-editor';
-import { getSize, mx } from '@dxos/react-ui-theme';
-import { isNotFalsy, nonNullable } from '@dxos/util';
+import { defaultTx } from '@dxos/react-ui-theme';
+import { isNotFalsy } from '@dxos/util';
 
-import { type DocumentType, type MarkdownSettingsProps } from './types';
+import { type DocumentType, type MarkdownPluginState, type MarkdownSettingsProps } from './types';
+import { setFallbackName } from './util';
 
-export type ExtensionsOptions = {
-  viewMode?: EditorViewMode;
-  settings?: MarkdownSettingsProps;
+type ExtensionsOptions = {
   document?: DocumentType;
-  debug?: boolean;
-  experimental?: boolean;
-  numberedHeadings?: boolean;
-  folding?: boolean;
-  query?: Query<DocumentType>;
   dispatch?: IntentDispatcher;
+  query?: Query<DocumentType>;
+  settings: MarkdownSettingsProps;
+  viewMode?: EditorViewMode;
+  editorStateStore?: EditorStateStore;
 };
 
-/**
- * Create extension instances for editor.
- */
-export const createBaseExtensions = ({
-  viewMode,
-  settings,
+// TODO(burdon): Merge with createBaseExtensions below.
+export const useExtensions = ({
   document,
-  query,
-  dispatch,
-}: ExtensionsOptions): Extension[] => {
-  const extensions: Extension[] = [];
+  settings,
+  viewMode,
+  editorStateStore,
+  extensionProviders,
+}: ExtensionsOptions & Pick<MarkdownPluginState, 'extensionProviders'>): Extension[] => {
+  const dispatch = useIntentDispatcher();
+  const identity = useIdentity();
+  const space = getSpace(document);
+
+  // TODO(wittjosiah): Autocomplete is not working and this query is causing performance issues.
+  // TODO(burdon): Unsubscribe.
+  // const query = space?.db.query(Filter.schema(DocumentType));
+  // query?.subscribe();
+  const baseExtensions = useMemo(
+    () =>
+      createBaseExtensions({
+        document,
+        settings,
+        viewMode,
+        dispatch,
+        // query,
+      }),
+    [
+      document,
+      viewMode,
+      dispatch,
+      settings,
+      settings.editorInputMode,
+      settings.folding,
+      settings.numberedHeadings,
+      settings.debug,
+      settings.typewriter,
+    ],
+  );
 
   //
-  // Editor mode.
+  // External extensions from other plugins.
   //
-  if (settings?.editorInputMode) {
-    const extension = InputModeExtensions[settings.editorInputMode];
-    if (extension) {
-      extensions.push(extension);
-    }
-  }
+  const pluginExtensions = useMemo<Extension[] | undefined>(
+    () =>
+      extensionProviders?.reduce((acc: Extension[], provider) => {
+        const extension = typeof provider === 'function' ? provider({ document }) : provider;
+        if (extension) {
+          acc.push(extension);
+        }
+
+        return acc;
+      }, []),
+    [extensionProviders],
+  );
+
+  //
+  // Basic plugins.
+  //
+  return useMemo<Extension[]>(
+    () =>
+      [
+        // NOTE: Data extensions must be first so that automerge is updated before other extensions compute their state.
+        document &&
+          createDataExtensions({
+            id: document.id,
+            text: document.content && createDocAccessor(document.content, ['content']),
+            space,
+            identity,
+          }),
+        selectionState(editorStateStore),
+        document &&
+          listener({
+            onChange: (text) => setFallbackName(document, text),
+          }),
+        baseExtensions,
+        pluginExtensions,
+      ].filter(isNotFalsy),
+    [baseExtensions, pluginExtensions, document, document?.content, space, identity],
+  );
+};
+
+/**
+ * Create extension instances for editor.
+ */
+const createBaseExtensions = ({ document, dispatch, settings, query, viewMode }: ExtensionsOptions): Extension[] => {
+  const extensions: Extension[] = [
+    settings.editorInputMode && InputModeExtensions[settings.editorInputMode],
+    settings.folding && folding(),
+  ].filter(isNotFalsy);
 
   //
   // Markdown
@@ -69,7 +139,7 @@ export const createBaseExtensions = ({
         formattingKeymap(),
         decorateMarkdown({
           selectionChangeDelay: 100,
-          numberedHeadings: settings?.numberedHeadings ? { from: 2 } : undefined,
+          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.
           renderLinkButton:
             dispatch && document
@@ -98,7 +168,6 @@ export const createBaseExtensions = ({
     extensions.push(
       autocomplete({
         onSearch: (text: string) => {
-          // TODO query
           // TODO(burdon): Specify filter (e.g., stack).
           return query.objects
             .map<AutocompleteResult | undefined>((object) =>
@@ -110,29 +179,27 @@ export const createBaseExtensions = ({
                   }
                 : undefined,
             )
-            .filter(nonNullable);
+            .filter(isNotFalsy);
         },
       }),
     );
   }
 
-  extensions.push(
-    ...[
-      //
-      settings?.folding && folding(),
-    ].filter(isNotFalsy),
-  );
-
-  if (settings?.debug) {
-    const items = settings.typewriter ?? '';
-    extensions.push(...[items ? typewriter({ items: items.split(/[,\n]/) }) : undefined].filter(nonNullable));
+  if (settings.debug) {
+    const items = settings.typewriter?.split(/[,\n]/) ?? '';
+    if (items) {
+      extensions.push(typewriter({ items }));
+    }
   }
 
   return extensions;
 };
 
-// TODO(burdon): Factor out style.
-const hover = 'rounded-sm text-primary-600 hover:text-primary-500 dark:text-primary-300 hover:dark:text-primary-200';
+// 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',
+};
 
 const onRenderLink = (onSelectObject: (id: string) => void) => (el: Element, url: string) => {
   // TODO(burdon): Formalize/document internal link format.
@@ -155,25 +222,31 @@ const onRenderLink = (onSelectObject: (id: string) => void) => (el: Element, url
         target: '_blank',
       };
 
-  const LinkIcon: Icon = isInternal ? ArrowSquareDown : ArrowSquareOut;
-
-  createRoot(el).render(
-    <StrictMode>
-      <a {...options} className={hover}>
-        <LinkIcon weight='bold' className={mx(getSize(4), 'inline-block leading-none mis-1 cursor-pointer')} />
-      </a>
-    </StrictMode>,
+  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 web = new URL(url);
-  createRoot(el).render(
-    <StrictMode>
-      <a href={url} target='_blank' rel='noreferrer' className={hover}>
-        {web.origin}
-        <ArrowSquareOut weight='bold' className={mx(getSize(4), 'inline-block leading-none mis-1 cursor-pointer')} />
-      </a>
-    </StrictMode>,
+  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>,
   );
 };
+
+// TODO(burdon): Remove react rendering; use DOM directly.
+export const renderRoot = <T extends Element>(root: T, node: ReactNode): T => {
+  createRoot(root).render(<ThemeProvider tx={defaultTx}>{node}</ThemeProvider>);
+  return root;
+};