@lobehub/editor 4.24.0 → 4.25.0

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

@@ -1,148 +1,477 @@
+import { $getNearestNodeFromDOMNode as $getNearestNodeFromDOMNode$1, init_utils } from "../../../../editor-kernel/utils.js";
 import { useLexicalEditor } from "../../../../editor-kernel/react/useLexicalEditor.js";
 import { useTranslation } from "../../../../editor-kernel/react/useTranslation.js";
-import { $isLinkNode, HOVER_LINK_COMMAND, HOVER_OUT_LINK_COMMAND, TOGGLE_LINK_COMMAND } from "../../node/LinkNode.js";
+import { getNodeUrl } from "../../service/i-link-service.js";
+import { $isLinkNode, HOVER_LINK_COMMAND, HOVER_OUT_LINK_COMMAND } from "../../node/LinkNode.js";
 import { getSelectedNode } from "../../utils/index.js";
 import { useEditable } from "../../../../editor-kernel/react/useEditable.js";
 import { cleanPosition, updatePosition } from "../../../../utils/updatePosition.js";
 import { styles } from "../style.js";
-import { EDIT_LINK_COMMAND } from "./LinkEdit.js";
-import { ActionIconGroup } from "@lobehub/ui";
-import { EditIcon, ExternalLinkIcon, UnlinkIcon } from "lucide-react";
-import { memo, useCallback, useRef, useState } from "react";
+import { $isLinkToolbarNode, convertLinkNodeByKeyToSchema, convertLinkToolbarNodeByKeyToLink, getLinkToolbarCapabilities, replaceNodeByKeyWithBlockCardNode, replaceNodeByKeyWithCardNode, replaceNodeByKeyWithIframeNode } from "../../conversion/index.js";
+import { Flexbox, Icon } from "@lobehub/ui";
+import { CopyIcon, EditIcon, ExternalLinkIcon, GalleryHorizontalEndIcon, LinkIcon, PanelTopOpenIcon, PanelsTopLeftIcon, UnlinkIcon } from "lucide-react";
+import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { $createRangeSelection, $getNodeByKey, $getSelection, $isRangeSelection, $isTextNode, $setSelection, COMMAND_PRIORITY_NORMAL } from "lexical";
+import { $getNodeByKey, $getSelection, $isRangeSelection, COMMAND_PRIORITY_NORMAL } from "lexical";
 import { mergeRegister } from "@lexical/utils";
 //#region src/plugins/link/react/components/LinkToolbar.tsx
-const LinkToolbar = memo(({ editor, enable }) => {
+init_utils();
+const HOVER_OPEN_DELAY = 180;
+const HOVER_CLOSE_DELAY = 500;
+const toolbarIconMap = {
+	copy: CopyIcon,
+	edit: EditIcon,
+	open: ExternalLinkIcon,
+	unlink: UnlinkIcon
+};
+const LinkToolbar = memo(({ editor, enable, linkService }) => {
 	const divRef = useRef(null);
-	const LinkRef = useRef(null);
-	const [linkNode, setLinkNode] = useState(null);
-	const state = useRef({ isLink: false });
-	const t = useTranslation();
+	const linkDomRef = useRef(null);
+	const [toolbarNodeKey, setToolbarNodeKey] = useState(null);
+	const [menuVersion, setMenuVersion] = useState(0);
+	const selectedLinkKeyRef = useRef(null);
+	const toolbarActionGestureRef = useRef({ pressHandled: false });
+	const toolbarActionResetTimerRef = useRef(-1);
+	const toolbarHoverRef = useRef(false);
+	const visibleLinkKeyRef = useRef(null);
 	const clearTimerRef = useRef(-1);
+	const rebindFrameRef = useRef(-1);
+	const showTimerRef = useRef(-1);
 	const { editable } = useEditable();
-	const handleEdit = useCallback(() => {
-		if (!linkNode) return;
-		editor.dispatchCommand(EDIT_LINK_COMMAND, {
-			linkNode,
-			linkNodeDOM: editor.getElementByKey(linkNode.getKey())
-		});
-	}, [editor, linkNode]);
+	const t = useTranslation();
 	const handleCancel = useCallback(() => {
 		clearTimeout(clearTimerRef.current);
+		clearTimeout(showTimerRef.current);
+		if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(rebindFrameRef.current);
+		linkDomRef.current?.classList.remove("hover");
+		linkDomRef.current = null;
+		toolbarHoverRef.current = false;
+		visibleLinkKeyRef.current = null;
 		cleanPosition(divRef.current);
+		setToolbarNodeKey(null);
 	}, []);
-	const handleRemove = useCallback(() => {
-		if (!linkNode) return;
-		editor.update(() => {
-			const node = $getNodeByKey(linkNode.getKey());
-			if (!$isLinkNode(node)) return;
-			let selection = $getSelection();
-			if (!selection || !$isRangeSelection(selection)) {
-				$setSelection($createRangeSelection());
-				selection = $getSelection();
-			}
-			const first = node.getFirstDescendant();
-			const last = node.getLastDescendant();
-			if (selection && $isRangeSelection(selection) && $isTextNode(first) && $isTextNode(last)) {
-				selection.anchor.set(first.getKey(), 0, "text");
-				selection.focus.set(last.getKey(), last.getTextContentSize(), "text");
-				editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+	const updateToolbarPosition = useCallback(() => {
+		updatePosition({
+			floating: divRef.current,
+			offset: 4,
+			placement: "top-start",
+			reference: linkDomRef.current
+		});
+	}, []);
+	const showToolbar = useCallback((nextNodeKey, reference) => {
+		clearTimeout(clearTimerRef.current);
+		linkDomRef.current?.classList.remove("hover");
+		linkDomRef.current = reference;
+		linkDomRef.current.classList.add("hover");
+		visibleLinkKeyRef.current = nextNodeKey;
+		setToolbarNodeKey(nextNodeKey);
+	}, []);
+	const rebindToolbarToNode = useCallback((nextNodeKey) => {
+		selectedLinkKeyRef.current = nextNodeKey;
+		const bind = () => {
+			const dom = editor.getElementByKey(nextNodeKey);
+			if (!dom) {
+				handleCancel();
 				return;
 			}
-			const children = node.getChildren();
-			for (const child of children) node.insertBefore(child);
-			node.remove();
+			showToolbar(nextNodeKey, dom);
+		};
+		const dom = editor.getElementByKey(nextNodeKey);
+		if (dom) {
+			showToolbar(nextNodeKey, dom);
+			return;
+		}
+		if (typeof requestAnimationFrame === "function") rebindFrameRef.current = requestAnimationFrame(bind);
+		else handleCancel();
+	}, [
+		editor,
+		handleCancel,
+		showToolbar
+	]);
+	const scheduleShowToolbar = useCallback((nextNodeKey, reference) => {
+		clearTimeout(clearTimerRef.current);
+		clearTimeout(showTimerRef.current);
+		showTimerRef.current = setTimeout(() => {
+			showToolbar(nextNodeKey, reference);
+		}, HOVER_OPEN_DELAY);
+	}, [showToolbar]);
+	const scheduleHideToolbar = useCallback((delay = HOVER_CLOSE_DELAY) => {
+		clearTimeout(clearTimerRef.current);
+		clearTimerRef.current = setTimeout(() => {
+			if (!toolbarHoverRef.current) handleCancel();
+		}, delay);
+	}, [handleCancel]);
+	const scheduleToolbarActionGestureReset = useCallback(() => {
+		clearTimeout(toolbarActionResetTimerRef.current);
+		toolbarActionResetTimerRef.current = setTimeout(() => {
+			toolbarActionGestureRef.current.pressHandled = false;
+		}, 1e3);
+	}, []);
+	useEffect(() => () => {
+		clearTimeout(toolbarActionResetTimerRef.current);
+	}, []);
+	useEffect(() => {
+		if (!enable || !editable) handleCancel();
+	}, [
+		editable,
+		enable,
+		handleCancel
+	]);
+	useEffect(() => {
+		if (!linkService) return;
+		return linkService.subscribe(() => {
+			setMenuVersion((version) => version + 1);
 		});
-	}, [editor, linkNode]);
-	const handleOpenLink = useCallback(() => {
-		if (!linkNode) return;
-		const url = editor.getEditorState().read(() => linkNode.getURL());
-		window.open(url, "_blank");
-	}, [editor, linkNode]);
-	useLexicalEditor((editor) => {
-		if (!editable) return;
-		return mergeRegister(editor.registerUpdateListener(() => {
-			const selection = editor.getEditorState().read(() => $getSelection());
-			if (!selection) return;
-			if ($isRangeSelection(selection)) editor.getEditorState().read(() => {
-				const node = getSelectedNode(selection);
-				const parent = node.getParent();
-				const isLink = $isLinkNode(parent) || $isLinkNode(node);
-				if (isLink === state.current.isLink) return;
-				state.current.isLink = isLink;
-				if (isLink) {
-					const linkNode = $isLinkNode(parent) ? parent : node;
-					editor.dispatchCommand(EDIT_LINK_COMMAND, {
-						linkNode,
-						linkNodeDOM: editor.getElementByKey(linkNode.getKey())
+	}, [linkService]);
+	const resolveToolbarNodeKey = useCallback(() => {
+		return editor.getEditorState().read(() => {
+			const currentNode = linkDomRef.current?.isConnected ? $getNearestLinkToolbarNodeFromDOMNode(linkDomRef.current, editor) : null;
+			if (currentNode) return currentNode.getKey();
+			const selection = $getSelection();
+			if ($isRangeSelection(selection)) {
+				const selectedNode = getSelectedNode(selection);
+				const parent = selectedNode.getParent();
+				const selectedToolbarNode = $isLinkToolbarNode(selectedNode) ? selectedNode : $isLinkToolbarNode(parent) ? parent : null;
+				if (selectedToolbarNode) return selectedToolbarNode.getKey();
+			}
+			const fallbackKey = visibleLinkKeyRef.current || toolbarNodeKey;
+			if (!fallbackKey) return null;
+			const fallbackNode = $getNodeByKey(fallbackKey);
+			return $isLinkToolbarNode(fallbackNode) ? fallbackNode.getKey() : null;
+		});
+	}, [editor, toolbarNodeKey]);
+	const items = useMemo(() => {
+		if (!toolbarNodeKey) return [];
+		return readToolbarNode(editor, toolbarNodeKey, (toolbarNode) => {
+			const result = [];
+			const labels = linkService?.getLabels();
+			const capabilities = getLinkToolbarCapabilities(toolbarNode, editor, linkService);
+			const context = $isLinkNode(toolbarNode) ? {
+				close: handleCancel,
+				editor,
+				linkDom: linkDomRef.current,
+				linkNode: toolbarNode
+			} : null;
+			if (context && linkService) result.push(...linkService.getToolbarItems(context).map((item) => ({
+				icon: toolbarIconMap[item.icon],
+				key: item.key,
+				label: typeof item.label === "function" ? item.label(context) : t(item.label),
+				onClick: () => {
+					const nodeKey = resolveToolbarNodeKey();
+					if (!nodeKey) return;
+					readToolbarNode(editor, nodeKey, (currentNode) => {
+						if (!$isLinkNode(currentNode)) return;
+						item.onClick({
+							close: handleCancel,
+							editor,
+							linkDom: linkDomRef.current,
+							linkNode: currentNode
+						});
 					});
-				} else editor.dispatchCommand(EDIT_LINK_COMMAND, {
-					linkNode: null,
-					linkNodeDOM: null
+				}
+			})));
+			else {
+				const url = getNodeUrl(toolbarNode);
+				result.push({
+					icon: ExternalLinkIcon,
+					key: "open",
+					label: t("link.open"),
+					onClick: () => window.open(url, "_blank")
 				});
+			}
+			if (capabilities.canConvertToCard) result.push({
+				icon: GalleryHorizontalEndIcon,
+				key: "convertToCard",
+				label: labels?.convertToCard || "Convert to card",
+				onClick: () => {
+					if (!linkService) return;
+					const nodeKey = resolveToolbarNodeKey();
+					if (!nodeKey) return;
+					replaceNodeByKeyWithCardNode(editor, nodeKey, linkService);
+					handleCancel();
+				}
 			});
-			else state.current.isLink = false;
-		}), editor.registerCommand(HOVER_LINK_COMMAND, (payload) => {
-			if (!enable) return false;
-			if (!payload.event.target || divRef.current === null) return false;
-			clearTimeout(clearTimerRef.current);
-			setLinkNode(payload.linkNode);
-			updatePosition({
-				callback: () => {
-					LinkRef.current = payload.event.target;
-				},
-				floating: divRef.current,
-				offset: 4,
-				placement: "top-start",
-				reference: payload.event.target
+			if (capabilities.canConvertToBlockCard) result.push({
+				icon: PanelsTopLeftIcon,
+				key: "convertToBlockCard",
+				label: labels?.convertToBlockCard || "Convert to block card",
+				onClick: () => {
+					if (!linkService) return;
+					const nodeKey = resolveToolbarNodeKey();
+					if (!nodeKey) return;
+					replaceNodeByKeyWithBlockCardNode(editor, nodeKey, linkService);
+					handleCancel();
+				}
 			});
-			return false;
-		}, COMMAND_PRIORITY_NORMAL), editor.registerCommand(HOVER_OUT_LINK_COMMAND, () => {
-			clearTimerRef.current = setTimeout(handleCancel, 300);
-			return true;
-		}, COMMAND_PRIORITY_NORMAL));
-	}, [enable, editable]);
-	return /* @__PURE__ */ jsx(ActionIconGroup, {
-		className: styles.linkToolbar,
-		items: [
-			{
-				icon: EditIcon,
-				key: "edit",
-				label: t("link.edit"),
-				onClick: handleEdit
-			},
-			{
-				icon: ExternalLinkIcon,
-				key: "openLink",
-				label: t("link.open"),
-				onClick: handleOpenLink
-			},
-			{
-				icon: UnlinkIcon,
-				key: "unlink",
-				label: t("link.unlink"),
+			if (capabilities.canConvertToIframe) result.push({
+				icon: PanelTopOpenIcon,
+				key: "convertToIframe",
+				label: labels?.convertToIframe || "Convert to iframe",
+				onClick: () => {
+					if (!linkService) return;
+					const nodeKey = resolveToolbarNodeKey();
+					if (!nodeKey) return;
+					replaceNodeByKeyWithIframeNode(editor, nodeKey, linkService);
+					handleCancel();
+				}
+			});
+			if (capabilities.canConvertToSchema && $isLinkNode(toolbarNode)) result.push({
+				icon: LinkIcon,
+				key: "convertToSchema",
+				label: labels?.convertToSchema || "Convert to schema",
 				onClick: () => {
-					handleRemove();
+					if (!linkService) return;
+					const nodeKey = resolveToolbarNodeKey();
+					if (!nodeKey) return;
+					convertLinkNodeByKeyToSchema(editor, nodeKey, linkService);
 					handleCancel();
 				}
+			});
+			if (capabilities.canConvertToLink) result.push({
+				icon: LinkIcon,
+				key: "convertToLink",
+				label: labels?.convertToLink || "Convert to link",
+				onClick: () => {
+					const nodeKey = resolveToolbarNodeKey();
+					if (!nodeKey) return;
+					const replacementKey = convertLinkToolbarNodeByKeyToLink(editor, nodeKey);
+					if (!replacementKey) {
+						handleCancel();
+						return;
+					}
+					rebindToolbarToNode(replacementKey);
+				}
+			});
+			if (linkService) result.push(...linkService.getToolbarActions({
+				editor,
+				node: toolbarNode
+			}).map((action) => ({
+				icon: action.icon || LinkIcon,
+				key: action.key,
+				label: action.label,
+				onClick: () => {
+					const nodeKey = resolveToolbarNodeKey();
+					if (!nodeKey) return;
+					readToolbarNode(editor, nodeKey, (currentNode) => {
+						action.onClick({
+							editor,
+							node: currentNode
+						});
+					});
+					handleCancel();
+				}
+			})));
+			return result;
+		}) || [];
+	}, [
+		editor,
+		handleCancel,
+		linkService,
+		menuVersion,
+		rebindToolbarToNode,
+		resolveToolbarNodeKey,
+		t,
+		toolbarNodeKey
+	]);
+	useLayoutEffect(() => {
+		if (!toolbarNodeKey || items.length === 0) return;
+		updateToolbarPosition();
+	}, [
+		items.length,
+		menuVersion,
+		toolbarNodeKey,
+		updateToolbarPosition
+	]);
+	useEffect(() => {
+		if (!toolbarNodeKey || typeof window === "undefined") return;
+		const handleViewportChange = () => updateToolbarPosition();
+		window.addEventListener("resize", handleViewportChange, { passive: true });
+		window.addEventListener("scroll", handleViewportChange, {
+			capture: true,
+			passive: true
+		});
+		return () => {
+			window.removeEventListener("resize", handleViewportChange);
+			window.removeEventListener("scroll", handleViewportChange, { capture: true });
+		};
+	}, [toolbarNodeKey, updateToolbarPosition]);
+	useLexicalEditor((lexicalEditor) => {
+		let rootElement = lexicalEditor.getRootElement();
+		const handleMouseOver = (event) => {
+			if (!enable || !editable || !rootElement) return;
+			const reference = getLinkReferenceElement(event.target);
+			if (!reference || !rootElement.contains(reference)) return;
+			if (event.relatedTarget instanceof Node && reference.contains(event.relatedTarget)) return;
+			const node = lexicalEditor.getEditorState().read(() => $getNearestLinkToolbarNodeFromDOMNode(reference, lexicalEditor));
+			if (!node) return;
+			const nodeKey = node.getKey();
+			if (visibleLinkKeyRef.current) showToolbar(nodeKey, reference);
+			else scheduleShowToolbar(nodeKey, reference);
+		};
+		const handleMouseOut = (event) => {
+			const reference = getLinkReferenceElement(event.target);
+			if (!reference || !rootElement?.contains(reference)) return;
+			if (event.relatedTarget instanceof Node && reference.contains(event.relatedTarget)) return;
+			if (event.relatedTarget instanceof Node && divRef.current?.contains(event.relatedTarget)) return;
+			clearTimeout(showTimerRef.current);
+			if (visibleLinkKeyRef.current !== selectedLinkKeyRef.current) scheduleHideToolbar();
+		};
+		if (typeof document !== "undefined") {
+			document.addEventListener("mouseover", handleMouseOver, true);
+			document.addEventListener("mouseout", handleMouseOut, true);
+		}
+		return mergeRegister(lexicalEditor.registerRootListener((nextRootElement) => {
+			rootElement = nextRootElement;
+		}), lexicalEditor.registerUpdateListener(() => {
+			if (!enable || !editable) {
+				selectedLinkKeyRef.current = null;
+				return;
 			}
-		],
+			const selectedLinkKey = lexicalEditor.getEditorState().read(() => {
+				const selection = $getSelection();
+				if (!$isRangeSelection(selection)) return null;
+				const selectedNode = getSelectedNode(selection);
+				const parent = selectedNode.getParent();
+				return ($isLinkToolbarNode(selectedNode) ? selectedNode : $isLinkToolbarNode(parent) ? parent : null)?.getKey() || null;
+			});
+			if (!selectedLinkKey) {
+				selectedLinkKeyRef.current = null;
+				scheduleHideToolbar();
+				return;
+			}
+			if (selectedLinkKey === selectedLinkKeyRef.current) return;
+			selectedLinkKeyRef.current = selectedLinkKey;
+			const dom = lexicalEditor.getElementByKey(selectedLinkKey);
+			if (dom) showToolbar(selectedLinkKey, dom);
+		}), lexicalEditor.registerCommand(HOVER_LINK_COMMAND, (payload) => {
+			if (!enable || !editable || !payload.event.target) return false;
+			const reference = getLinkReferenceElement(payload.event.target);
+			if (!reference || !$isLinkToolbarNode(payload.node)) return false;
+			const nodeKey = payload.node.getKey();
+			if (visibleLinkKeyRef.current) showToolbar(nodeKey, reference);
+			else scheduleShowToolbar(nodeKey, reference);
+			return false;
+		}, COMMAND_PRIORITY_NORMAL), lexicalEditor.registerCommand(HOVER_OUT_LINK_COMMAND, () => {
+			clearTimeout(showTimerRef.current);
+			if (visibleLinkKeyRef.current !== selectedLinkKeyRef.current) scheduleHideToolbar();
+			return true;
+		}, COMMAND_PRIORITY_NORMAL), () => {
+			if (typeof document !== "undefined") {
+				document.removeEventListener("mouseover", handleMouseOver, true);
+				document.removeEventListener("mouseout", handleMouseOut, true);
+			}
+			clearTimeout(clearTimerRef.current);
+			if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(rebindFrameRef.current);
+			clearTimeout(showTimerRef.current);
+		});
+	}, [
+		editable,
+		enable,
+		scheduleHideToolbar,
+		scheduleShowToolbar,
+		showToolbar
+	]);
+	if (items.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: styles.linkToolbar,
+		ref: divRef
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: styles.linkToolbar,
 		onMouseEnter: () => {
+			toolbarHoverRef.current = true;
 			clearTimeout(clearTimerRef.current);
 		},
 		onMouseLeave: () => {
-			handleCancel();
+			toolbarHoverRef.current = false;
+			scheduleHideToolbar(120);
 		},
 		ref: divRef,
-		shadow: true,
-		size: {
-			blockSize: 32,
-			size: 16
-		},
-		variant: "outlined"
+		children: /* @__PURE__ */ jsx(Flexbox, {
+			align: "center",
+			gap: 8,
+			horizontal: true,
+			children: items.map((item) => /* @__PURE__ */ jsx("button", {
+				"aria-label": item.label,
+				className: styles.popoverActionItem,
+				onClick: (event) => {
+					const shouldRun = shouldRunToolbarActionFromEvent(toolbarActionGestureRef.current, "click");
+					clearTimeout(toolbarActionResetTimerRef.current);
+					if (!shouldRun) {
+						event.preventDefault();
+						event.stopPropagation();
+						return;
+					}
+					event.preventDefault();
+					event.stopPropagation();
+					item.onClick();
+				},
+				onMouseDown: (event) => {
+					if (event.button !== 0) return;
+					if (!shouldRunToolbarActionFromEvent(toolbarActionGestureRef.current, "mousedown")) {
+						event.preventDefault();
+						event.stopPropagation();
+						return;
+					}
+					scheduleToolbarActionGestureReset();
+					event.preventDefault();
+					event.stopPropagation();
+					item.onClick();
+				},
+				onPointerDown: (event) => {
+					if (!shouldRunToolbarActionFromPointer(event)) return;
+					shouldRunToolbarActionFromEvent(toolbarActionGestureRef.current, "pointerdown");
+					scheduleToolbarActionGestureReset();
+					event.preventDefault();
+					event.stopPropagation();
+					item.onClick();
+				},
+				title: item.label,
+				type: "button",
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: item.icon,
+					size: { size: 18 }
+				})
+			}, item.key))
+		})
 	});
 });
+function $getNearestLinkToolbarNodeFromDOMNode(startingDOM, editor) {
+	let node = $getNearestNodeFromDOMNode$1(startingDOM, editor);
+	while (node) {
+		if ($isLinkToolbarNode(node)) return node;
+		node = node.getParent();
+	}
+	return null;
+}
+function readToolbarNode(editor, key, reader) {
+	return editor.getEditorState().read(() => {
+		const node = $getNodeByKey(key);
+		return $isLinkToolbarNode(node) ? reader(node) : null;
+	});
+}
+function shouldRunToolbarActionFromPointer(event) {
+	return event.button <= 0;
+}
+function shouldRunToolbarActionFromEvent(state, eventType) {
+	if (eventType === "pointerdown") {
+		state.pressHandled = true;
+		return true;
+	}
+	if (eventType === "mousedown") {
+		if (state.pressHandled) return false;
+		state.pressHandled = true;
+		return true;
+	}
+	if (state.pressHandled) {
+		state.pressHandled = false;
+		return false;
+	}
+	return true;
+}
+function getLinkReferenceElement(target) {
+	if (!(target instanceof Element)) return null;
+	return target.closest("a, [data-link-card=\"true\"], [data-link-iframe=\"true\"], [data-schema-link=\"true\"]");
+}
 LinkToolbar.displayName = "LinkToolbar";
 //#endregion
-export { LinkToolbar as default };
+export { LinkToolbar as default, readToolbarNode, shouldRunToolbarActionFromEvent, shouldRunToolbarActionFromPointer };

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

@@ -0,0 +1,49 @@
+import { getKernelFromEditor, init_utils } from "../../../../editor-kernel/utils.js";
+import { ILinkService } from "../../service/i-link-service.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/plugins/link/react/components/SchemaLink.tsx
+init_utils();
+const SchemaLink = ({ editor, node, rendererRegistry }) => {
+	const service = getKernelFromEditor(editor)?.requireService(ILinkService);
+	const [, setRendererVersion] = useState(0);
+	const url = node.getURL();
+	const schema = service?.parseSchemaUrl(url) || null;
+	useEffect(() => {
+		const handleChange = () => {
+			setRendererVersion((version) => version + 1);
+		};
+		rendererRegistry.on("change", handleChange);
+		return () => {
+			rendererRegistry.off("change", handleChange);
+		};
+	}, [rendererRegistry]);
+	const props = {
+		editor,
+		node,
+		payload: node.getPayload(),
+		schema,
+		schemaType: node.getSchemaType(),
+		title: node.getTitle(),
+		url
+	};
+	return rendererRegistry.renderLegacySchemaLink(props) || rendererRegistry.renderSchemaNode(props) || /* @__PURE__ */ jsx(DefaultSchemaLink, { ...props });
+};
+SchemaLink.displayName = "SchemaLink";
+function DefaultSchemaLink(props) {
+	return /* @__PURE__ */ jsxs("a", {
+		href: props.url,
+		style: {
+			border: "1px solid rgba(0,0,0,0.12)",
+			borderRadius: 8,
+			color: "inherit",
+			display: "inline-flex",
+			gap: 8,
+			padding: "8px 10px",
+			textDecoration: "none"
+		},
+		children: [/* @__PURE__ */ jsx("span", { children: props.schemaType || "schema" }), /* @__PURE__ */ jsx("strong", { children: props.title })]
+	});
+}
+//#endregion
+export { SchemaLink as default };

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

@@ -1,3 +1,3 @@
-import { ReactLinkPluginProps } from "./type.js";
+import { ReactLinkDefaultToolbarItemKey, ReactLinkDefaultToolbarItems, ReactLinkPluginProps } from "./type.js";
 import { ReactLinkPlugin } from "./ReactLinkPlugin.js";
-export { ReactLinkPlugin, type ReactLinkPluginProps };
+export { type ReactLinkDefaultToolbarItemKey, type ReactLinkDefaultToolbarItems, ReactLinkPlugin, type ReactLinkPluginProps };