@lobehub/editor 4.24.0 → 4.25.0

package/es/plugins/link/plugin/index.d.ts

@@ -1,16 +1,41 @@
 import { IEditorPluginConstructor } from "../../../types/kernel.js";
 import "../../../types/index.js";
+import { LinkCardNode } from "../node/LinkCardNode.js";
+import { LinkIframeNode } from "../node/LinkIframeNode.js";
 import { LinkAttributes } from "../node/LinkNode.js";
+import { SchemaNode } from "../node/SchemaNode.js";
+import { LinkEmbedRule, LinkLabels, LinkToolbarAction, SchemaLinkRendererConfig, SchemaRule } from "../service/i-link-service.js";
+import { normalizeSchemaLinkNode } from "../normalization/index.js";
+import { LexicalEditor } from "lexical";
 //#region src/plugins/link/plugin/index.d.ts
 interface LinkPluginOptions {
+  allowedProtocols?: string[];
+  /** Registration-time option. Recreate LinkPlugin to apply changes. */
   attributes?: LinkAttributes;
+  decoratorCard?: (node: LinkCardNode, editor: LexicalEditor) => any;
+  decoratorIframe?: (node: LinkIframeNode, editor: LexicalEditor) => any;
+  decoratorSchema?: (node: SchemaNode, editor: LexicalEditor) => any;
+  /** Registration-time option. Recreate LinkPlugin to apply changes. */
   enableHotkey?: boolean;
+  labels?: Partial<LinkLabels>;
+  linkEmbedRules?: LinkEmbedRule[];
+  /** Registration-time option. Recreate LinkPlugin to apply changes. */
   linkRegex?: RegExp;
+  /** Registration-time normalization strategy. Defaults to true for legacy compatibility. */
+  normalizeSchemaLinks?: boolean;
+  schemaLinkRenderers?: SchemaLinkRendererConfig[];
+  schemaRules?: SchemaRule[];
+  /** Registration-time option. Recreate LinkPlugin to apply changes. */
   theme?: {
     link?: string;
+    linkCard?: string;
+    linkIframe?: string;
+    schemaLink?: string;
   };
+  toolbarActions?: LinkToolbarAction[];
+  /** Registration-time option. Recreate LinkPlugin to apply changes. */
   validateUrl?: (url: string) => boolean;
 }
 declare const LinkPlugin: IEditorPluginConstructor<LinkPluginOptions>;
 //#endregion
-export { LinkPlugin, LinkPluginOptions };
+export { LinkPlugin, LinkPluginOptions, normalizeSchemaLinkNode };

package/es/plugins/link/plugin/index.js

@@ -2,9 +2,14 @@ import { INodeHelper, init_helper } from "../../../editor-kernel/inode/helper.js
 import { KernelPlugin, init_plugin } from "../../../editor-kernel/plugin.js";
 import { ILitexmlService } from "../../litexml/service/litexml-service.js";
 import { IMarkdownShortCutService } from "../../markdown/service/shortcut.js";
+import { ILinkService, LinkService } from "../service/i-link-service.js";
 import { $createLinkNode, $isLinkNode, AutoLinkNode, LinkNode } from "../node/LinkNode.js";
 import { INSERT_LINK_COMMAND, registerLinkCommand } from "../command/index.js";
-import { ILinkService, LinkService } from "../service/i-link-service.js";
+import { $isLinkCardNode, LinkCardNode } from "../node/LinkCardNode.js";
+import { $isLinkBlockCardNode, LinkBlockCardNode } from "../node/LinkBlockCardNode.js";
+import { $isLinkIframeNode, LinkIframeNode } from "../node/LinkIframeNode.js";
+import { $isSchemaNode, SchemaNode } from "../node/SchemaNode.js";
+import { normalizeSchemaLinkNode } from "../normalization/index.js";
 import { registerLinkCommands } from "./registry.js";
 import { $createTextNode, COMMAND_PRIORITY_NORMAL, PASTE_COMMAND } from "lexical";
 //#region src/plugins/link/plugin/index.ts
@@ -18,10 +23,22 @@ const LinkPlugin = class extends KernelPlugin {
 		super();
 		this.kernel = kernel;
 		this.config = config;
-		this.linkRegex = /^https?:\/\/\S+$/;
+		this.linkRegex = /^[a-z][\d+.a-z-]*:\/\/\S+$/i;
 		this.service = new LinkService();
-		kernel.registerNodes([LinkNode, AutoLinkNode]);
+		kernel.registerNodes([
+			LinkNode,
+			AutoLinkNode,
+			LinkCardNode,
+			LinkBlockCardNode,
+			LinkIframeNode,
+			SchemaNode
+		]);
+		this.service.updateConfig(config);
 		kernel.registerService(ILinkService, this.service);
+		this.registerDecorator(kernel, LinkCardNode.getType(), (node, editor) => config?.decoratorCard ? config.decoratorCard(node, editor) : null);
+		this.registerDecorator(kernel, LinkBlockCardNode.getType(), (node, editor) => config?.decoratorCard ? config.decoratorCard(node, editor) : null);
+		this.registerDecorator(kernel, LinkIframeNode.getType(), (node, editor) => config?.decoratorIframe ? config.decoratorIframe(node, editor) : null);
+		this.registerDecorator(kernel, SchemaNode.getType(), (node, editor) => config?.decoratorSchema ? config.decoratorSchema(node, editor) : null);
 		if (config?.theme) kernel.registerThemes(config.theme);
 		if (config?.linkRegex) this.linkRegex = config.linkRegex;
 	}
@@ -45,6 +62,9 @@ const LinkPlugin = class extends KernelPlugin {
 			}
 			return false;
 		}, COMMAND_PRIORITY_NORMAL));
+		if (this.config?.normalizeSchemaLinks !== false) this.register(editor.registerNodeTransform(LinkNode, (node) => {
+			normalizeSchemaLinkNode(node, editor, this.service);
+		}));
 		this.registerMarkdown();
 		this.registerLiteXml();
 	}
@@ -69,6 +89,74 @@ const LinkPlugin = class extends KernelPlugin {
 				version: 1
 			})];
 		});
+		litexmlService.registerXMLWriter(LinkCardNode.getType(), (node, ctx) => {
+			if (!$isLinkCardNode(node)) return false;
+			return ctx.createXmlNode("link-card", {
+				description: node.getDescription(),
+				href: node.getURL(),
+				icon: node.getIcon(),
+				openTarget: node.getOpenTarget() || "_blank",
+				title: node.getTitle()
+			});
+		});
+		litexmlService.registerXMLWriter(LinkBlockCardNode.getType(), (node, ctx) => {
+			if (!$isLinkBlockCardNode(node)) return false;
+			return ctx.createXmlNode("link-card", {
+				description: node.getDescription(),
+				href: node.getURL(),
+				icon: node.getIcon(),
+				layout: "block",
+				openTarget: node.getOpenTarget() || "_blank",
+				title: node.getTitle()
+			});
+		});
+		litexmlService.registerXMLReader("link-card", (xmlNode) => {
+			return [INodeHelper.createTypeNode(xmlNode.getAttribute("layout") === "block" ? LinkBlockCardNode.getType() : LinkCardNode.getType(), {
+				description: xmlNode.getAttribute("description") || "",
+				icon: xmlNode.getAttribute("icon") || "",
+				openTarget: xmlNode.getAttribute("openTarget") || "_blank",
+				title: xmlNode.getAttribute("title") || xmlNode.getAttribute("href") || "",
+				type: xmlNode.getAttribute("layout") === "block" ? LinkBlockCardNode.getType() : LinkCardNode.getType(),
+				url: xmlNode.getAttribute("href") || "",
+				version: 1
+			})];
+		});
+		litexmlService.registerXMLWriter(LinkIframeNode.getType(), (node, ctx) => {
+			if (!$isLinkIframeNode(node)) return false;
+			return ctx.createXmlNode("link-iframe", {
+				href: node.getURL(),
+				src: node.getSrc(),
+				title: node.getTitle()
+			});
+		});
+		litexmlService.registerXMLReader("link-iframe", (xmlNode) => {
+			return [INodeHelper.createTypeNode(LinkIframeNode.getType(), {
+				src: xmlNode.getAttribute("src") || xmlNode.getAttribute("href") || "",
+				title: xmlNode.getAttribute("title") || xmlNode.getAttribute("href") || "",
+				type: LinkIframeNode.getType(),
+				url: xmlNode.getAttribute("href") || "",
+				version: 1
+			})];
+		});
+		litexmlService.registerXMLWriter(SchemaNode.getType(), (node, ctx) => {
+			if (!$isSchemaNode(node)) return false;
+			return ctx.createXmlNode("schema-link", {
+				href: node.getURL(),
+				payload: JSON.stringify(node.getPayload() ?? null),
+				schemaType: node.getSchemaType(),
+				title: node.getTitle()
+			});
+		});
+		litexmlService.registerXMLReader("schema-link", (xmlNode) => {
+			return [INodeHelper.createTypeNode(SchemaNode.getType(), {
+				payload: parseJsonAttribute(xmlNode.getAttribute("payload")),
+				schemaType: xmlNode.getAttribute("schemaType") || "",
+				title: xmlNode.getAttribute("title") || xmlNode.getAttribute("href") || "",
+				type: SchemaNode.getType(),
+				url: xmlNode.getAttribute("href") || "",
+				version: 1
+			})];
+		});
 	}
 	registerMarkdown() {
 		this.kernel.requireService(IMarkdownShortCutService)?.registerMarkdownShortCut({
@@ -88,6 +176,30 @@ const LinkPlugin = class extends KernelPlugin {
 		this.kernel.requireService(IMarkdownShortCutService)?.registerMarkdownWriter(LinkNode.getType(), (ctx, node) => {
 			if ($isLinkNode(node)) ctx.wrap("[", `](${node.getURL()})`);
 		});
+		this.kernel.requireService(IMarkdownShortCutService)?.registerMarkdownWriter(LinkCardNode.getType(), (ctx, node) => {
+			if ($isLinkCardNode(node)) {
+				ctx.appendLine(`[${node.getTitle()}](${node.getURL()})\n`);
+				return true;
+			}
+		});
+		this.kernel.requireService(IMarkdownShortCutService)?.registerMarkdownWriter(LinkBlockCardNode.getType(), (ctx, node) => {
+			if ($isLinkBlockCardNode(node)) {
+				ctx.appendLine(`[${node.getTitle()}](${node.getURL()})\n`);
+				return true;
+			}
+		});
+		this.kernel.requireService(IMarkdownShortCutService)?.registerMarkdownWriter(LinkIframeNode.getType(), (ctx, node) => {
+			if ($isLinkIframeNode(node)) {
+				ctx.appendLine(`[${node.getTitle()}](${node.getURL()})\n`);
+				return true;
+			}
+		});
+		this.kernel.requireService(IMarkdownShortCutService)?.registerMarkdownWriter(SchemaNode.getType(), (ctx, node) => {
+			if ($isSchemaNode(node)) {
+				ctx.appendLine(`[${node.getTitle()}](${node.getURL()})\n`);
+				return true;
+			}
+		});
 		this.kernel.requireService(IMarkdownShortCutService)?.registerMarkdownReader("link", (node, children) => {
 			return [INodeHelper.createElementNode("link", {
 				children,
@@ -102,5 +214,13 @@ const LinkPlugin = class extends KernelPlugin {
 		});
 	}
 };
+function parseJsonAttribute(value) {
+	if (!value) return void 0;
+	try {
+		return JSON.parse(value);
+	} catch {
+		return value;
+	}
+}
 //#endregion
-export { LinkPlugin };
+export { LinkPlugin, normalizeSchemaLinkNode };

package/es/plugins/link/react/ReactLinkPlugin.js

@@ -2,49 +2,207 @@
 import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context.js";
 import { useLexicalEditor } from "../../../editor-kernel/react/useLexicalEditor.js";
 import { MarkdownPlugin } from "../../markdown/plugin/index.js";
+import { useTranslation } from "../../../editor-kernel/react/useTranslation.js";
 import { ILinkService } from "../service/i-link-service.js";
+import { UNLINK_LINK_COMMAND } from "../command/index.js";
 import { LinkPlugin } from "../plugin/index.js";
+import { useEditable } from "../../../editor-kernel/react/useEditable.js";
 import PortalAnchor from "../../../editor-kernel/react/PortalAnchor.js";
+import LinkCard from "./components/LinkCard.js";
 import { styles } from "./style.js";
-import LinkEdit from "./components/LinkEdit.js";
+import LinkEdit, { EDIT_LINK_COMMAND } from "./components/LinkEdit.js";
+import LinkIframe from "./components/LinkIframe.js";
 import LinkToolbar from "./components/LinkToolbar.js";
-import { useLayoutEffect, useState } from "react";
+import SchemaLink from "./components/SchemaLink.js";
+import { LinkReactRendererRegistry, splitReactSchemaRules } from "./renderer-registry.js";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { message } from "antd";
 //#region src/plugins/link/react/ReactLinkPlugin.tsx
-const ReactLinkPlugin = ({ theme, enableHotkey = true, validateUrl, attributes }) => {
-	const [enableToolbar, setEnableToolbar] = useState(false);
+async function copyTextToClipboard(text) {
+	try {
+		await navigator.clipboard.writeText(text);
+	} catch {
+		const textarea = document.createElement("textarea");
+		textarea.value = text;
+		document.body.append(textarea);
+		textarea.select();
+		document.execCommand("copy");
+		textarea.remove();
+	}
+}
+function isDefaultToolbarItemEnabled(defaultToolbarItems, key) {
+	if (defaultToolbarItems === false) return false;
+	if (defaultToolbarItems === true || defaultToolbarItems === void 0) return true;
+	return defaultToolbarItems[key] !== false;
+}
+const ReactLinkPlugin = ({ allowedProtocols, theme, enableHotkey = true, validateUrl, attributes, defaultToolbarItems, labels, linkEmbedRules, normalizeSchemaLinks, renderLinkCard, renderLinkIframe, renderSchema, schemaLinkRenderers, schemaRules, toolbarActions }) => {
+	const [enableToolbar, setEnableToolbar] = useState(true);
+	const [linkService, setLinkService] = useState(null);
 	const [editor] = useLexicalComposerContext();
+	const { editable } = useEditable();
+	const t = useTranslation();
+	const registeredRef = useRef(false);
+	const rendererRegistryRef = useRef(new LinkReactRendererRegistry());
+	const splitSchemaRules = useMemo(() => splitReactSchemaRules(schemaRules), [schemaRules]);
 	useLayoutEffect(() => {
+		if (registeredRef.current) return;
+		registeredRef.current = true;
 		editor.registerPlugin(MarkdownPlugin);
 		editor.registerPlugin(LinkPlugin, {
+			allowedProtocols,
 			attributes,
+			decoratorCard: (node, editor) => /* @__PURE__ */ jsx(LinkCard, {
+				description: node.getDescription(),
+				editor,
+				icon: node.getIcon(),
+				node,
+				openTarget: node.getOpenTarget(),
+				rendererRegistry: rendererRegistryRef.current,
+				title: node.getTitle(),
+				url: node.getURL()
+			}),
+			decoratorIframe: (node, editor) => /* @__PURE__ */ jsx(LinkIframe, {
+				editor,
+				node,
+				rendererRegistry: rendererRegistryRef.current,
+				src: node.getSrc(),
+				title: node.getTitle(),
+				url: node.getURL()
+			}),
+			decoratorSchema: (node, editor) => /* @__PURE__ */ jsx(SchemaLink, {
+				editor,
+				node,
+				rendererRegistry: rendererRegistryRef.current
+			}),
 			enableHotkey,
+			labels,
+			linkEmbedRules,
+			normalizeSchemaLinks,
+			schemaLinkRenderers: getSchemaLinkRendererProtocols(schemaLinkRenderers),
+			schemaRules: splitSchemaRules.coreRules,
 			theme: theme || styles,
+			toolbarActions,
 			validateUrl
 		});
 	}, [
+		allowedProtocols,
 		attributes,
 		enableHotkey,
+		labels,
+		linkEmbedRules,
+		normalizeSchemaLinks,
+		schemaLinkRenderers,
+		schemaRules,
 		styles,
 		theme,
+		toolbarActions,
 		validateUrl
 	]);
+	useLayoutEffect(() => {
+		rendererRegistryRef.current.update({
+			renderLinkCard,
+			renderLinkIframe,
+			renderSchema,
+			schemaLinkRenderers,
+			schemaRenderers: splitSchemaRules.schemaRenderers
+		});
+	}, [
+		renderLinkCard,
+		renderLinkIframe,
+		renderSchema,
+		schemaLinkRenderers,
+		splitSchemaRules.schemaRenderers
+	]);
+	useLayoutEffect(() => {
+		if (!registeredRef.current) return;
+		editor.requireService(ILinkService)?.updateConfig({
+			allowedProtocols,
+			labels,
+			linkEmbedRules,
+			schemaLinkRenderers: getSchemaLinkRendererProtocols(schemaLinkRenderers),
+			schemaRules: splitSchemaRules.coreRules,
+			toolbarActions
+		});
+	}, [
+		allowedProtocols,
+		editor,
+		labels,
+		linkEmbedRules,
+		schemaLinkRenderers,
+		splitSchemaRules.coreRules,
+		toolbarActions
+	]);
 	useLexicalEditor(() => {
 		const linkService = editor.requireService(ILinkService);
+		setLinkService(linkService);
 		setEnableToolbar(linkService.enableLinkToolbar);
 		const handleChange = () => {
 			setEnableToolbar(linkService.enableLinkToolbar);
 		};
 		linkService.on("linkToolbarChange", handleChange);
+		const unregisterItems = [];
+		const registerDefaultToolbarItem = (key, item) => {
+			if (!isDefaultToolbarItemEnabled(defaultToolbarItems, key)) return;
+			unregisterItems.push(linkService.registerToolbarItem(item));
+		};
+		registerDefaultToolbarItem("open", {
+			icon: "open",
+			key: "open",
+			label: "link.open",
+			onClick: ({ editor, linkNode }) => {
+				const linkUrl = editor.getEditorState().read(() => linkNode.getURL());
+				window.open(linkUrl, "_blank");
+			},
+			order: 10
+		});
+		registerDefaultToolbarItem("edit", {
+			icon: "edit",
+			key: "edit",
+			label: "link.edit",
+			onClick: ({ close, editor, linkDom, linkNode }) => {
+				close();
+				editor.dispatchCommand(EDIT_LINK_COMMAND, {
+					linkNode,
+					linkNodeDOM: linkDom
+				});
+			},
+			order: 20
+		});
+		registerDefaultToolbarItem("copy", {
+			icon: "copy",
+			key: "copy",
+			label: "link.copy",
+			onClick: async ({ editor, linkNode }) => {
+				await copyTextToClipboard(editor.getEditorState().read(() => linkNode.getURL()));
+				message.success(t("link.copySuccess"));
+			},
+			order: 30
+		});
+		registerDefaultToolbarItem("unlink", {
+			icon: "unlink",
+			key: "unlink",
+			label: "link.unlink",
+			onClick: ({ close, editor, linkNode }) => {
+				editor.dispatchCommand(UNLINK_LINK_COMMAND, { key: linkNode.getKey() });
+				close();
+			},
+			order: 40
+		});
 		return () => {
 			linkService.off("linkToolbarChange", handleChange);
+			unregisterItems.forEach((unregister) => unregister());
 		};
-	}, []);
+	}, [defaultToolbarItems, t]);
 	return /* @__PURE__ */ jsxs(PortalAnchor, { children: [/* @__PURE__ */ jsx(LinkToolbar, {
 		editor: editor.getLexicalEditor(),
-		enable: enableToolbar
-	}), /* @__PURE__ */ jsx(LinkEdit, { editor: editor.getLexicalEditor() })] });
+		enable: enableToolbar && editable,
+		linkService
+	}), editable && /* @__PURE__ */ jsx(LinkEdit, { editor: editor.getLexicalEditor() })] });
 };
 ReactLinkPlugin.displayName = "ReactLinkPlugin";
+function getSchemaLinkRendererProtocols(renderers) {
+	return renderers?.map(({ protocol }) => ({ protocol }));
+}
 //#endregion
 export { ReactLinkPlugin, ReactLinkPlugin as default };

package/es/plugins/link/react/components/LinkCard.js

@@ -0,0 +1,235 @@
+import { getKernelFromEditor, init_utils } from "../../../../editor-kernel/utils.js";
+import { ILinkService } from "../../service/i-link-service.js";
+import { EDIT_LINK_CARD_COMMAND } from "../../node/LinkCardNode.js";
+import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { $createNodeSelection, $getNodeByKey, $setSelection } from "lexical";
+//#region src/plugins/link/react/components/LinkCard.tsx
+init_utils();
+const LinkCard = ({ description, editor, icon, node, openTarget, rendererRegistry, title, url }) => {
+	const key = node.getKey();
+	const linkService = getKernelFromEditor(editor)?.requireService(ILinkService);
+	const subscribeCardMetadata = useCallback((listener) => linkService?.subscribeCardMetadata(listener) || (() => {}), [linkService]);
+	const getCardMetadataSnapshot = useCallback(() => linkService?.isCardMetadataLoading(key) ?? false, [key, linkService]);
+	const isLoading = useSyncExternalStore(subscribeCardMetadata, getCardMetadataSnapshot, getCardMetadataSnapshot);
+	const [isSelected, setIsSelected] = useState(() => isNodeSelected(editor, key));
+	const [, setRendererVersion] = useState(0);
+	useEffect(() => {
+		return editor.registerUpdateListener(() => {
+			setIsSelected(isNodeSelected(editor, key));
+		});
+	}, [editor, key]);
+	useEffect(() => {
+		const handleChange = () => {
+			setRendererVersion((version) => version + 1);
+		};
+		rendererRegistry.on("change", handleChange);
+		return () => {
+			rendererRegistry.off("change", handleChange);
+		};
+	}, [rendererRegistry]);
+	const onClickCapture = useCallback((event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		if (editor.isEditable()) return;
+		if (openTarget === "_self") {
+			window.location.href = url;
+			return;
+		}
+		window.open(url, openTarget || "_blank");
+	}, [
+		editor,
+		openTarget,
+		url
+	]);
+	const onMouseDownCapture = useCallback((event) => {
+		if (!editor.isEditable()) return;
+		event.preventDefault();
+		event.stopPropagation();
+		editor.focus();
+		editor.update(() => {
+			const selection = $createNodeSelection();
+			selection.add(key);
+			$setSelection(selection);
+		});
+		editor.dispatchCommand(EDIT_LINK_CARD_COMMAND, {
+			cardNode: node,
+			cardNodeDOM: editor.getElementByKey(key)
+		});
+	}, [
+		editor,
+		key,
+		node
+	]);
+	const props = {
+		description,
+		editor,
+		icon,
+		isLoading,
+		isSelected,
+		layout: node.isInline() ? "inline" : "block",
+		node,
+		onClickCapture,
+		onMouseDownCapture,
+		openTarget,
+		title,
+		url
+	};
+	return rendererRegistry.renderCardNode(props) || /* @__PURE__ */ jsx(DefaultLinkCard, { ...props });
+};
+LinkCard.displayName = "LinkCard";
+function isNodeSelected(editor, key) {
+	return editor.getEditorState().read(() => {
+		return $getNodeByKey(key)?.isSelected() ?? false;
+	});
+}
+function DefaultLinkCard(props) {
+	if (props.layout === "block") return /* @__PURE__ */ jsxs("a", {
+		"aria-busy": props.isLoading,
+		href: props.url,
+		onClickCapture: props.onClickCapture,
+		onMouseDownCapture: props.onMouseDownCapture,
+		rel: "noreferrer",
+		style: {
+			alignItems: "center",
+			border: "1px solid rgba(0,0,0,0.12)",
+			borderRadius: 12,
+			color: "inherit",
+			display: "grid",
+			gap: 12,
+			gridTemplateColumns: "40px minmax(0, 1fr)",
+			maxWidth: 520,
+			outline: props.isSelected ? "2px solid rgba(22,119,255,0.45)" : void 0,
+			outlineOffset: props.isSelected ? 1 : void 0,
+			padding: 12,
+			textDecoration: "none",
+			width: "100%"
+		},
+		target: props.openTarget || "_blank",
+		children: [props.isLoading ? /* @__PURE__ */ jsx(LinkCardLoadingIndicator, { size: 18 }) : props.icon ? /* @__PURE__ */ jsx("img", {
+			alt: "",
+			src: props.icon,
+			style: {
+				borderRadius: 8,
+				height: 40,
+				objectFit: "cover",
+				width: 40
+			}
+		}) : null, /* @__PURE__ */ jsxs("span", {
+			style: {
+				display: "grid",
+				gap: 4,
+				minWidth: 0
+			},
+			children: [/* @__PURE__ */ jsx("strong", {
+				style: {
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap"
+				},
+				children: props.title
+			}), props.isLoading ? /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: 12,
+					opacity: .65
+				},
+				children: "Loading preview..."
+			}) : props.description ? /* @__PURE__ */ jsx("span", {
+				style: {
+					opacity: .65,
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap"
+				},
+				children: props.description
+			}) : null]
+		})]
+	});
+	return /* @__PURE__ */ jsxs("a", {
+		"aria-busy": props.isLoading,
+		href: props.url,
+		onClickCapture: props.onClickCapture,
+		onMouseDownCapture: props.onMouseDownCapture,
+		rel: "noreferrer",
+		style: {
+			alignItems: "center",
+			color: "#1677ff",
+			display: "inline-flex",
+			gap: 4,
+			lineHeight: 1,
+			maxWidth: 320,
+			outline: props.isSelected ? "2px solid rgba(22,119,255,0.45)" : void 0,
+			outlineOffset: props.isSelected ? 1 : void 0,
+			padding: "0 2px",
+			textDecoration: "none",
+			verticalAlign: "baseline"
+		},
+		target: props.openTarget || "_blank",
+		children: [props.isLoading ? /* @__PURE__ */ jsx(LinkCardLoadingIndicator, { size: "1.1em" }) : props.icon ? /* @__PURE__ */ jsx("img", {
+			alt: "",
+			src: props.icon,
+			style: {
+				borderRadius: 5,
+				display: "block",
+				height: "1.1em",
+				objectFit: "cover",
+				position: "relative",
+				top: "0.06em",
+				width: "1.1em"
+			}
+		}) : /* @__PURE__ */ jsx("span", {
+			style: {
+				alignItems: "center",
+				background: "rgba(0,0,0,0.06)",
+				borderRadius: 5,
+				display: "inline-flex",
+				fontSize: 11,
+				height: "1.1em",
+				justifyContent: "center",
+				lineHeight: 1,
+				position: "relative",
+				top: "0.06em",
+				width: "1.1em"
+			},
+			children: props.title.slice(0, 1).toUpperCase()
+		}), /* @__PURE__ */ jsx("span", {
+			style: {
+				display: "inline-block",
+				lineHeight: 1,
+				minWidth: 0,
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap"
+			},
+			children: /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: "1em",
+					fontWeight: 400,
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap"
+				},
+				children: props.title
+			})
+		})]
+	});
+}
+function LinkCardLoadingIndicator({ size }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { children: "@keyframes lobe-link-card-spin{to{transform:rotate(360deg)}}" }), /* @__PURE__ */ jsx("span", {
+		"aria-label": "Loading link preview",
+		role: "status",
+		style: {
+			animation: "lobe-link-card-spin 1s linear infinite",
+			border: "2px solid rgba(0,0,0,0.12)",
+			borderRadius: "50%",
+			borderTopColor: "#1677ff",
+			boxSizing: "border-box",
+			display: "inline-block",
+			flex: "0 0 auto",
+			height: size,
+			width: size
+		}
+	})] });
+}
+//#endregion
+export { DefaultLinkCard, LinkCard as default };