@dxos/plugin-markdown 0.6.13 → 0.6.14-main.7bd9c89

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,117 @@
 // 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 { createDataExtensions, listener, localStorageStateStoreAdapter, state } from '@dxos/react-ui-editor';
 import {
   type AutocompleteResult,
-  type Extension,
   type EditorViewMode,
+  type Extension,
+  InputModeExtensions,
   autocomplete,
   decorateMarkdown,
+  folding,
+  formattingKeymap,
   linkTooltip,
   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;
-  document?: DocumentType;
-  debug?: boolean;
-  experimental?: boolean;
-  numberedHeadings?: boolean;
-  folding?: boolean;
-  query?: Query<DocumentType>;
+type ExtensionsOptions = {
+  document: DocumentType;
   dispatch?: IntentDispatcher;
+  query?: Query<DocumentType>;
+  settings: MarkdownSettingsProps;
+  viewMode?: EditorViewMode;
 };
 
-/**
- * Create extension instances for editor.
- */
-export const createBaseExtensions = ({
-  viewMode,
-  settings,
+// TODO(burdon): Merge with createBaseExtensions above.
+export const useExtensions = ({
+  extensionProviders,
   document,
-  query,
-  dispatch,
-}: ExtensionsOptions): Extension[] => {
-  const extensions: Extension[] = [];
+  settings,
+  viewMode,
+}: Pick<ExtensionsOptions, 'document' | 'settings' | 'viewMode'> &
+  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.folding, settings.numberedHeadings],
+  );
 
   //
-  // 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.
+        createDataExtensions({
+          id: document.id,
+          text: document.content && createDocAccessor(document.content, ['content']),
+          space,
+          identity,
+        }),
+        state(localStorageStateStoreAdapter),
+        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 +123,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 +152,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 +163,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 +206,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;
+};

package/src/hooks/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './useSelectCurrentThread';

package/src/hooks/useSelectCurrentThread.tsx

@@ -0,0 +1,46 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { EditorView } from '@codemirror/view';
+import { useCallback } from 'react';
+
+import { LayoutAction, useIntentResolver } from '@dxos/app-framework';
+import { Cursor, setSelection } from '@dxos/react-ui-editor';
+
+import { MARKDOWN_PLUGIN } from '../meta';
+
+/**
+ * Handle scrolling and selection of the current thread in a markdown editor.
+ */
+export const useSelectCurrentThread = (editorView: EditorView | undefined, documentId: string) => {
+  const handleScrollIntoView = useCallback(
+    ({ action, data }: { action: string; data?: any }) => {
+      if (action === LayoutAction.SCROLL_INTO_VIEW) {
+        if (editorView && data?.id === documentId && 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: documentId }));
+            }
+
+            editorView.dispatch({
+              effects,
+              selection: selection ? { anchor: range.from } : undefined,
+            });
+          }
+        }
+      }
+    },
+    [documentId, editorView],
+  );
+
+  useIntentResolver(MARKDOWN_PLUGIN, handleScrollIntoView);
+};

package/src/meta.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type PluginMeta } from '@dxos/app-framework';
+
+export const MARKDOWN_PLUGIN = 'dxos.org/plugin/markdown';
+
+export default {
+  id: MARKDOWN_PLUGIN,
+  name: 'Markdown Editor',
+  description: 'Text editor supporting extended Markdown.',
+  homePage: 'https://github.com/dxos/dxos/tree/main/packages/apps/plugins/plugin-markdown',
+  icon: 'ph--text-aa--regular',
+} satisfies PluginMeta;

package/src/types/document.ts

@@ -15,3 +15,15 @@ export class DocumentType extends TypedObject({ typename: 'dxos.org/type/Documen
   content: ref(TextType),
   threads: S.mutable(S.Array(ref(ThreadType))),
 }) {}
+
+/**
+ * Checks if an object conforms to the interface needed to render an editor.
+ */
+// TODO(burdon): Normalize types (from FilesPlugin).
+export const isEditorModel = (data: any): data is { id: string; text: string } =>
+  data &&
+  typeof data === 'object' &&
+  'id' in data &&
+  typeof data.id === 'string' &&
+  'text' in data &&
+  typeof data.text === 'string';

package/src/types/types.ts

@@ -12,6 +12,7 @@ import type {
   TranslationsProvides,
 } from '@dxos/app-framework';
 import { type SchemaProvides } from '@dxos/plugin-client';
+import { type SpaceInitProvides } from '@dxos/plugin-space';
 import { type Extension, type EditorInputMode, type EditorViewMode } from '@dxos/react-ui-editor';
 
 import { type DocumentType } from './document';
@@ -26,13 +27,15 @@ export enum MarkdownAction {
 
 export type MarkdownProperties = Record<string, any>;
 
-export type ExtensionsProvider = (props: { document?: DocumentType }) => Extension[];
+// TODO(burdon): Async.
+export type MarkdownExtensionProvider = (props: { document?: DocumentType }) => Extension | undefined;
 
 export type OnChange = (text: string) => void;
 
 export type MarkdownExtensionProvides = {
+  // TODO(burdon): Rename.
   markdown: {
-    extensions: ExtensionsProvider;
+    extensions: MarkdownExtensionProvider;
   };
 };
 
@@ -45,11 +48,11 @@ type StackProvides = {
 
 export type MarkdownPluginState = {
   // Codemirror extensions provided by other plugins.
-  extensionProviders: NonNullable<ExtensionsProvider>[];
+  extensionProviders?: MarkdownExtensionProvider[];
 
   // TODO(burdon): Extend view mode per document to include scroll position, etc.
   // View mode per document.
-  viewMode: { [key: string]: EditorViewMode };
+  viewMode: Record<string, EditorViewMode>;
 };
 
 export type MarkdownSettingsProps = {
@@ -64,12 +67,11 @@ export type MarkdownSettingsProps = {
   folding?: boolean;
 };
 
-// TODO(Zan): Move this to the plugin-space plugin or another common location
-// when we implement comments in sheets.
+// TODO(Zan): Move this to the plugin-space plugin or another common location when we implement comments in sheets.
 type ThreadProvides<T> = {
   thread: {
     predicate: (obj: any) => obj is T;
-    createSort: (obj: T) => (anchorA: string, anchorB: string) => number;
+    createSort: (obj: T) => (anchorA: string | undefined, anchorB: string | undefined) => number;
   };
 };
 
@@ -81,5 +83,6 @@ export type MarkdownPluginProvides = SurfaceProvides &
   SettingsProvides<MarkdownSettingsProps> &
   TranslationsProvides &
   SchemaProvides &
+  SpaceInitProvides &
   StackProvides &
   ThreadProvides<DocumentType>;

package/src/util.tsx

@@ -5,7 +5,7 @@
 import { type Plugin } from '@dxos/app-framework';
 import { debounce } from '@dxos/async';
 import { type TypedObjectSerializer } from '@dxos/plugin-space/types';
-import { create, createEchoObject, isEchoObject, loadObjectReferences } from '@dxos/react-client/echo';
+import { create, createObject, isEchoObject, loadObjectReferences } from '@dxos/react-client/echo';
 
 import { DocumentType, type MarkdownProperties, type MarkdownExtensionProvides, TextType } from './types';
 
@@ -43,6 +43,6 @@ export const serializer: TypedObjectSerializer<DocumentType> = {
 
   deserialize: async ({ content: serialized }) => {
     const { name, content } = JSON.parse(serialized);
-    return createEchoObject(create(DocumentType, { name, content: create(TextType, { content }), threads: [] }));
+    return createObject(create(DocumentType, { name, content: create(TextType, { content }), threads: [] }));
   },
 };

package/dist/lib/browser/DocumentCard-2P4EICBA.mjs

@@ -1,11 +0,0 @@
-import {
-  DocumentCard,
-  DocumentCard_default
-} from "./chunk-RL7QY322.mjs";
-import "./chunk-354DCID5.mjs";
-import "./chunk-4GGD6YJO.mjs";
-export {
-  DocumentCard,
-  DocumentCard_default as default
-};
-//# sourceMappingURL=DocumentCard-2P4EICBA.mjs.map

package/dist/lib/browser/DocumentEditor-GPWV3VN3.mjs

@@ -1,11 +0,0 @@
-import {
-  DocumentEditor_default
-} from "./chunk-7AF2JLK4.mjs";
-import "./chunk-CQJL4G4X.mjs";
-import "./chunk-354DCID5.mjs";
-import "./chunk-VUN4QKTT.mjs";
-import "./chunk-4GGD6YJO.mjs";
-export {
-  DocumentEditor_default as default
-};
-//# sourceMappingURL=DocumentEditor-GPWV3VN3.mjs.map

package/dist/lib/browser/MarkdownEditor-EKJJQEFL.mjs

@@ -1,10 +0,0 @@
-import {
-  MarkdownEditor,
-  MarkdownEditor_default
-} from "./chunk-VUN4QKTT.mjs";
-import "./chunk-4GGD6YJO.mjs";
-export {
-  MarkdownEditor,
-  MarkdownEditor_default as default
-};
-//# sourceMappingURL=MarkdownEditor-EKJJQEFL.mjs.map

package/dist/lib/browser/MarkdownEditor-EKJJQEFL.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}

package/dist/lib/browser/chunk-354DCID5.mjs

@@ -1,117 +0,0 @@
-// packages/plugins/plugin-markdown/src/extensions.tsx
-import { ArrowSquareDown, ArrowSquareOut } from "@phosphor-icons/react";
-import React, { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { NavigationAction } from "@dxos/app-framework";
-import { invariant } from "@dxos/invariant";
-import { fullyQualifiedId } from "@dxos/react-client/echo";
-import { autocomplete, decorateMarkdown, linkTooltip, typewriter, formattingKeymap, InputModeExtensions, folding } from "@dxos/react-ui-editor";
-import { getSize, mx } from "@dxos/react-ui-theme";
-import { isNotFalsy, nonNullable } from "@dxos/util";
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-markdown/src/extensions.tsx";
-var createBaseExtensions = ({ viewMode, settings, document, query, dispatch }) => {
-  const extensions = [];
-  if (settings?.editorInputMode) {
-    const extension = InputModeExtensions[settings.editorInputMode];
-    if (extension) {
-      extensions.push(extension);
-    }
-  }
-  if (viewMode !== "source") {
-    extensions.push(...[
-      formattingKeymap(),
-      decorateMarkdown({
-        selectionChangeDelay: 100,
-        numberedHeadings: settings?.numberedHeadings ? {
-          from: 2
-        } : void 0,
-        // TODO(wittjosiah): For internal links, consider ignoring the link text and rendering the label of the object being linked to.
-        renderLinkButton: dispatch && document ? onRenderLink((id) => {
-          void dispatch({
-            action: NavigationAction.ADD_TO_ACTIVE,
-            data: {
-              id,
-              part: "main",
-              pivotId: fullyQualifiedId(document),
-              scrollIntoView: true
-            }
-          });
-        }) : void 0
-      }),
-      linkTooltip(renderLinkTooltip)
-    ]);
-  }
-  if (query) {
-    extensions.push(autocomplete({
-      onSearch: (text) => {
-        return query.objects.map((object) => object.name?.length && object.id !== document?.id ? {
-          label: object.name,
-          // TODO(burdon): Factor out URL builder.
-          apply: `[${object.name}](/${fullyQualifiedId(object)})`
-        } : void 0).filter(nonNullable);
-      }
-    }));
-  }
-  extensions.push(...[
-    //
-    settings?.folding && folding()
-  ].filter(isNotFalsy));
-  if (settings?.debug) {
-    const items = settings.typewriter ?? "";
-    extensions.push(...[
-      items ? typewriter({
-        items: items.split(/[,\n]/)
-      }) : void 0
-    ].filter(nonNullable));
-  }
-  return extensions;
-};
-var hover = "rounded-sm text-primary-600 hover:text-primary-500 dark:text-primary-300 hover:dark:text-primary-200";
-var onRenderLink = (onSelectObject) => (el, url) => {
-  const isInternal = url.startsWith("/") || // TODO(wittjosiah): This should probably be parsed out on paste?
-  url.startsWith(window.location.origin);
-  const options = isInternal ? {
-    onClick: () => {
-      const qualifiedId = url.split("/").at(-1);
-      invariant(qualifiedId, "Invalid link format.", {
-        F: __dxlog_file,
-        L: 148,
-        S: void 0,
-        A: [
-          "qualifiedId",
-          "'Invalid link format.'"
-        ]
-      });
-      onSelectObject(qualifiedId);
-    }
-  } : {
-    href: url,
-    rel: "noreferrer",
-    target: "_blank"
-  };
-  const LinkIcon = isInternal ? ArrowSquareDown : ArrowSquareOut;
-  createRoot(el).render(/* @__PURE__ */ React.createElement(StrictMode, null, /* @__PURE__ */ React.createElement("a", {
-    ...options,
-    className: hover
-  }, /* @__PURE__ */ React.createElement(LinkIcon, {
-    weight: "bold",
-    className: mx(getSize(4), "inline-block leading-none mis-1 cursor-pointer")
-  }))));
-};
-var renderLinkTooltip = (el, url) => {
-  const web = new URL(url);
-  createRoot(el).render(/* @__PURE__ */ React.createElement(StrictMode, null, /* @__PURE__ */ React.createElement("a", {
-    href: url,
-    target: "_blank",
-    rel: "noreferrer",
-    className: hover
-  }, web.origin, /* @__PURE__ */ React.createElement(ArrowSquareOut, {
-    weight: "bold",
-    className: mx(getSize(4), "inline-block leading-none mis-1 cursor-pointer")
-  }))));
-};
-
-export {
-  createBaseExtensions
-};
-//# sourceMappingURL=chunk-354DCID5.mjs.map