@lobehub/editor 4.15.0 → 4.15.2

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

@@ -0,0 +1,50 @@
+"use client";
+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 { ILinkService } from "../service/i-link-service.js";
+import { LinkPlugin } from "../plugin/index.js";
+import PortalAnchor from "../../../editor-kernel/react/PortalAnchor.js";
+import { styles } from "./style.js";
+import LinkEdit from "./components/LinkEdit.js";
+import LinkToolbar from "./components/LinkToolbar.js";
+import { useLayoutEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/plugins/link/react/ReactLinkPlugin.tsx
+const ReactLinkPlugin = ({ theme, enableHotkey = true, validateUrl, attributes }) => {
+	const [enableToolbar, setEnableToolbar] = useState(false);
+	const [editor] = useLexicalComposerContext();
+	useLayoutEffect(() => {
+		editor.registerPlugin(MarkdownPlugin);
+		editor.registerPlugin(LinkPlugin, {
+			attributes,
+			enableHotkey,
+			theme: theme || styles,
+			validateUrl
+		});
+	}, [
+		attributes,
+		enableHotkey,
+		styles,
+		theme,
+		validateUrl
+	]);
+	useLexicalEditor(() => {
+		const linkService = editor.requireService(ILinkService);
+		setEnableToolbar(linkService.enableLinkToolbar);
+		const handleChange = () => {
+			setEnableToolbar(linkService.enableLinkToolbar);
+		};
+		linkService.on("linkToolbarChange", handleChange);
+		return () => {
+			linkService.off("linkToolbarChange", handleChange);
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs(PortalAnchor, { children: [/* @__PURE__ */ jsx(LinkToolbar, {
+		editor: editor.getLexicalEditor(),
+		enable: enableToolbar
+	}), /* @__PURE__ */ jsx(LinkEdit, { editor: editor.getLexicalEditor() })] });
+};
+ReactLinkPlugin.displayName = "ReactLinkPlugin";
+//#endregion
+export { ReactLinkPlugin as default };

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

@@ -0,0 +1,204 @@
+import { useLexicalEditor } from "../../../../editor-kernel/react/useLexicalEditor.js";
+import { useTranslation } from "../../../../editor-kernel/react/useTranslation.js";
+import { UPDATE_LINK_TEXT_COMMAND } from "../../command/index.js";
+import { useEditable } from "../../../../editor-kernel/react/useEditable.js";
+import { cleanPosition, updatePosition } from "../../../../utils/updatePosition.js";
+import { styles } from "../style.js";
+import { Block, Button, Flexbox, Hotkey, Icon, Input, Text } from "@lobehub/ui";
+import { BaselineIcon, LinkIcon } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cssVar } from "antd-style";
+import { COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_NORMAL, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND, createCommand } from "lexical";
+import { mergeRegister } from "@lexical/utils";
+//#region src/plugins/link/react/components/LinkEdit.tsx
+const EDIT_LINK_COMMAND = createCommand();
+const LinkEdit = ({ editor }) => {
+	const divRef = useRef(null);
+	const linkNodeRef = useRef(null);
+	const linkInputRef = useRef(null);
+	const linkTextInputRef = useRef(null);
+	const [linkUrl, setLinkUrl] = useState("");
+	const [linkText, setLinkText] = useState("");
+	const [linkDom, setLinkDom] = useState(null);
+	const { editable } = useEditable();
+	const t = useTranslation();
+	const handleCancel = useCallback(() => {
+		if (!editor) return;
+		editor.focus();
+		cleanPosition(divRef.current);
+		linkNodeRef.current = null;
+		setLinkUrl("");
+		setLinkText("");
+		setLinkDom(null);
+	}, [editor]);
+	const handleSubmit = useCallback(() => {
+		if (!linkNodeRef.current || !linkInputRef.current || !linkTextInputRef.current || !editor) return;
+		const linkNode = linkNodeRef.current;
+		const inputDOM = linkInputRef.current.input;
+		const textInputDOM = linkTextInputRef.current.input;
+		if (editor.getEditorState().read(() => linkNode.getURL()) !== inputDOM.value) editor.update(() => {
+			linkNode.setURL(inputDOM.value);
+		});
+		if (editor.getEditorState().read(() => linkNode.getTextContent()) !== textInputDOM.value) editor.dispatchCommand(UPDATE_LINK_TEXT_COMMAND, {
+			key: linkNode.getKey(),
+			text: textInputDOM.value
+		});
+		editor.focus();
+		handleCancel();
+	}, [
+		editor,
+		linkNodeRef,
+		linkInputRef,
+		linkTextInputRef,
+		handleCancel
+	]);
+	const handleKeyDown = useCallback((event) => {
+		if (!linkNodeRef.current || !linkInputRef.current || !linkTextInputRef.current || !editor) return;
+		const linkNode = linkNodeRef.current;
+		const inputDOM = linkInputRef.current.input;
+		const textInputDOM = linkTextInputRef.current.input;
+		switch (event.key) {
+			case "Enter":
+				event.preventDefault();
+				if (event.currentTarget === textInputDOM) if (editor.getEditorState().read(() => linkNode.getTextContent()) !== textInputDOM.value) {
+					editor.dispatchCommand(UPDATE_LINK_TEXT_COMMAND, {
+						key: linkNode.getKey(),
+						text: textInputDOM.value
+					});
+					inputDOM.focus();
+				} else inputDOM.focus();
+				else if (event.currentTarget === inputDOM) handleSubmit();
+				return;
+			case "Tab":
+				event.preventDefault();
+				if (event.currentTarget === textInputDOM) inputDOM.focus();
+				else editor.focus();
+				return;
+			case "Escape":
+				event.preventDefault();
+				handleCancel();
+				return;
+		}
+	}, [
+		linkNodeRef,
+		linkInputRef,
+		handleSubmit,
+		handleCancel
+	]);
+	useEffect(() => {
+		if (linkDom) updatePosition({
+			floating: divRef.current,
+			reference: linkDom
+		});
+		else cleanPosition(divRef.current);
+	}, [linkDom]);
+	useEffect(() => {
+		const handlePointerDown = (event) => {
+			if (!divRef.current) return;
+			const target = event.target;
+			if (!target) return;
+			if (divRef.current.contains(target)) return;
+			if (linkDom) handleCancel();
+		};
+		document.addEventListener("mousedown", handlePointerDown);
+		document.addEventListener("touchstart", handlePointerDown);
+		return () => {
+			document.removeEventListener("mousedown", handlePointerDown);
+			document.removeEventListener("touchstart", handlePointerDown);
+		};
+	}, [linkDom]);
+	useLexicalEditor((editor) => {
+		return mergeRegister(editor.registerCommand(EDIT_LINK_COMMAND, (payload) => {
+			if (!payload.linkNode || !payload.linkNodeDOM) {
+				handleCancel();
+				return false;
+			}
+			linkNodeRef.current = payload.linkNode;
+			setLinkUrl(payload.linkNode.getURL());
+			setLinkText(payload.linkNode.getTextContent());
+			setLinkDom(payload.linkNodeDOM);
+			return true;
+		}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(KEY_ESCAPE_COMMAND, () => {
+			handleCancel();
+			return true;
+		}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(KEY_TAB_COMMAND, (payload) => {
+			if (linkNodeRef.current && linkTextInputRef.current) {
+				payload.stopImmediatePropagation();
+				payload.preventDefault();
+				linkTextInputRef.current.focus();
+				return true;
+			}
+			return false;
+		}, COMMAND_PRIORITY_NORMAL));
+	}, [editor]);
+	if (!linkNodeRef.current || !editable) return null;
+	return /* @__PURE__ */ jsxs(Block, {
+		className: styles.linkEdit,
+		ref: divRef,
+		shadow: true,
+		variant: "outlined",
+		children: [/* @__PURE__ */ jsxs(Flexbox, {
+			gap: 8,
+			padding: 12,
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					weight: 500,
+					children: t("link.editTextTitle")
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					onChange: (e) => {
+						setLinkText(e.target.value);
+					},
+					onKeyDown: handleKeyDown,
+					prefix: /* @__PURE__ */ jsx(Icon, {
+						color: cssVar.colorTextDescription,
+						icon: BaselineIcon
+					}),
+					ref: linkTextInputRef,
+					value: linkText
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					weight: 500,
+					children: t("link.editLinkTitle")
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					onChange: (e) => {
+						setLinkUrl(e.target.value);
+					},
+					onKeyDown: handleKeyDown,
+					placeholder: "https://enter-link-url",
+					prefix: /* @__PURE__ */ jsx(Icon, {
+						color: cssVar.colorTextDescription,
+						icon: LinkIcon
+					}),
+					ref: linkInputRef,
+					value: linkUrl
+				})
+			]
+		}), /* @__PURE__ */ jsx(Flexbox, {
+			className: styles.linkEditFooter,
+			horizontal: true,
+			justify: "flex-end",
+			padding: 4,
+			width: "100%",
+			children: /* @__PURE__ */ jsxs(Button, {
+				onClick: (e) => {
+					e.preventDefault();
+					handleSubmit();
+				},
+				size: "small",
+				type: "text",
+				variant: "filled",
+				children: [t("confirm"), /* @__PURE__ */ jsx(Hotkey, {
+					compact: true,
+					keys: "enter",
+					variant: "borderless"
+				})]
+			})
+		})]
+	});
+};
+LinkEdit.displayName = "LinkEdit";
+//#endregion
+export { EDIT_LINK_COMMAND, LinkEdit as default };

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

@@ -0,0 +1,148 @@
+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 { 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 { jsx } from "react/jsx-runtime";
+import { $createRangeSelection, $getNodeByKey, $getSelection, $isRangeSelection, $isTextNode, $setSelection, COMMAND_PRIORITY_NORMAL } from "lexical";
+import { mergeRegister } from "@lexical/utils";
+//#region src/plugins/link/react/components/LinkToolbar.tsx
+const LinkToolbar = memo(({ editor, enable }) => {
+	const divRef = useRef(null);
+	const LinkRef = useRef(null);
+	const [linkNode, setLinkNode] = useState(null);
+	const state = useRef({ isLink: false });
+	const t = useTranslation();
+	const clearTimerRef = 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 handleCancel = useCallback(() => {
+		clearTimeout(clearTimerRef.current);
+		cleanPosition(divRef.current);
+	}, []);
+	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);
+				return;
+			}
+			const children = node.getChildren();
+			for (const child of children) node.insertBefore(child);
+			node.remove();
+		});
+	}, [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())
+					});
+				} else editor.dispatchCommand(EDIT_LINK_COMMAND, {
+					linkNode: null,
+					linkNodeDOM: null
+				});
+			});
+			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
+			});
+			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"),
+				onClick: () => {
+					handleRemove();
+					handleCancel();
+				}
+			}
+		],
+		onMouseEnter: () => {
+			clearTimeout(clearTimerRef.current);
+		},
+		onMouseLeave: () => {
+			handleCancel();
+		},
+		ref: divRef,
+		shadow: true,
+		size: {
+			blockSize: 32,
+			size: 16
+		},
+		variant: "outlined"
+	});
+});
+LinkToolbar.displayName = "LinkToolbar";
+//#endregion
+export { LinkToolbar as default };

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

@@ -0,0 +1,2 @@
+import { ReactLinkPluginProps } from "./type.js";
+import { ReactLinkPlugin } from "./ReactLinkPlugin.js";

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

@@ -0,0 +1,34 @@
+import { createStaticStyles, cx } from "antd-style";
+//#region src/plugins/link/react/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => {
+	const position = css`
+    position: absolute;
+    z-index: 999;
+    inset-block-start: -9999px;
+    inset-inline-start: -9999px;
+  `;
+	return {
+		link: css`
+      cursor: pointer;
+
+      margin-block: 1em;
+      margin-inline: 0;
+      padding: 2px;
+      border: none;
+    `,
+		linkEdit: cx(position, css`
+        min-width: 320px;
+        max-width: 100%;
+        background: ${cssVar.colorBgElevated};
+      `),
+		linkEditFooter: css`
+      border-block-start: 1px solid ${cssVar.colorBorderSecondary};
+      background: ${cssVar.colorFillQuaternary};
+    `,
+		linkToolbar: cx(position, css`
+        background: ${cssVar.colorBgElevated};
+      `)
+	};
+});
+//#endregion
+export { styles };

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

@@ -0,0 +1,14 @@
+import { LinkAttributes } from "../node/LinkNode.js";
+
+//#region src/plugins/link/react/type.d.ts
+interface ReactLinkPluginProps {
+  attributes?: LinkAttributes;
+  className?: string;
+  enableHotkey?: boolean;
+  theme?: {
+    link?: string;
+  };
+  validateUrl?: (url: string) => boolean;
+}
+//#endregion
+export { ReactLinkPluginProps };

package/es/plugins/link/service/i-link-service.d.ts

@@ -0,0 +1,10 @@
+import { IServiceID } from "../../../types/kernel.js";
+import EventEmitter from "eventemitter3";
+
+//#region src/plugins/link/service/i-link-service.d.ts
+interface ILinkService {
+  setLinkToolbar(enable: boolean): void;
+}
+declare const ILinkService: IServiceID<ILinkService>;
+//#endregion
+export { ILinkService };

package/es/plugins/link/service/i-link-service.js

@@ -0,0 +1,19 @@
+import { genServiceId } from "../../../editor-kernel/utils.js";
+import EventEmitter from "eventemitter3";
+//#region src/plugins/link/service/i-link-service.ts
+const ILinkService = genServiceId("LinkService");
+var LinkService = class extends EventEmitter {
+	constructor(..._args) {
+		super(..._args);
+		this._enableLinkToolbar = true;
+	}
+	get enableLinkToolbar() {
+		return this._enableLinkToolbar;
+	}
+	setLinkToolbar(enable) {
+		this._enableLinkToolbar = enable;
+		this.emit("linkToolbarChange", enable);
+	}
+};
+//#endregion
+export { ILinkService, LinkService };

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

@@ -0,0 +1,45 @@
+import { $isAtNodeEnd } from "@lexical/selection";
+//#region src/plugins/link/utils/index.ts
+const SUPPORTED_URL_PROTOCOLS = new Set([
+	"http:",
+	"https:",
+	"mailto:",
+	"sms:",
+	"tel:"
+]);
+function sanitizeUrl(url) {
+	try {
+		const parsedUrl = new URL(url);
+		if (!SUPPORTED_URL_PROTOCOLS.has(parsedUrl.protocol)) return "about:blank";
+	} catch {
+		return url;
+	}
+	return url;
+}
+const urlRegExp = /* @__PURE__ */ new RegExp(/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\w$&+,:;=-]+@)?[\d.A-Za-z-]+|(?:www.|[\w$&+,:;=-]+@)[\d.A-Za-z-]+)((?:\/[%+./~\w-_]*)?\??[\w%&+.;=@-]*#?\w*)?)/);
+function validateUrl(url) {
+	return url === "https://" || urlRegExp.test(url);
+}
+function extractUrlFromText(text) {
+	const match = urlRegExp.exec(text);
+	if (!match) return null;
+	const raw = match[0];
+	const start = match.index ?? text.indexOf(raw);
+	const trimmed = raw.replace(/[)\],.;:]+$/u, "");
+	return {
+		index: start,
+		length: trimmed.length,
+		url: trimmed
+	};
+}
+function getSelectedNode(selection) {
+	const anchor = selection.anchor;
+	const focus = selection.focus;
+	const anchorNode = selection.anchor.getNode();
+	const focusNode = selection.focus.getNode();
+	if (anchorNode === focusNode) return anchorNode;
+	if (selection.isBackward()) return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+	else return $isAtNodeEnd(anchor) ? anchorNode : focusNode;
+}
+//#endregion
+export { extractUrlFromText, getSelectedNode, sanitizeUrl, validateUrl };

package/es/plugins/link-highlight/command/index.d.ts

@@ -0,0 +1,8 @@
+import * as _$lexical from "lexical";
+import { LexicalEditor } from "lexical";
+
+//#region src/plugins/link-highlight/command/index.d.ts
+declare const INSERT_LINK_HIGHLIGHT_COMMAND: _$lexical.LexicalCommand<undefined>;
+declare function registerLinkHighlightCommand(editor: LexicalEditor): () => void;
+//#endregion
+export { INSERT_LINK_HIGHLIGHT_COMMAND, registerLinkHighlightCommand };

package/es/plugins/link-highlight/command/index.js

@@ -0,0 +1,30 @@
+import { $createLinkHighlightNode, $isLinkHighlightNode, getLinkHighlightNode } from "../node/link-highlight.js";
+import { $createTextNode, $getSelection, $insertNodes, $isRangeSelection, COMMAND_PRIORITY_EDITOR, createCommand } from "lexical";
+//#region src/plugins/link-highlight/command/index.ts
+const INSERT_LINK_HIGHLIGHT_COMMAND = createCommand("INSERT_LINK_HIGHLIGHT_COMMAND");
+function registerLinkHighlightCommand(editor) {
+	return editor.registerCommand(INSERT_LINK_HIGHLIGHT_COMMAND, () => {
+		editor.update(() => {
+			const selection = $getSelection();
+			if (!selection || !$isRangeSelection(selection)) return false;
+			const focusNode = selection.focus.getNode();
+			const anchorNode = selection.anchor.getNode();
+			const linkHighlight = getLinkHighlightNode(focusNode);
+			if (linkHighlight !== getLinkHighlightNode(anchorNode)) return false;
+			if ($isLinkHighlightNode(linkHighlight)) {
+				for (const node of linkHighlight.getChildren().slice(0)) linkHighlight.insertBefore(node);
+				linkHighlight.remove();
+				return true;
+			}
+			const selectedText = selection.getTextContent();
+			const linkHighlightNode = $createLinkHighlightNode();
+			const textNode = $createTextNode(selectedText);
+			linkHighlightNode.append(textNode);
+			$insertNodes([linkHighlightNode]);
+			linkHighlightNode.select();
+		});
+		return true;
+	}, COMMAND_PRIORITY_EDITOR);
+}
+//#endregion
+export { INSERT_LINK_HIGHLIGHT_COMMAND, registerLinkHighlightCommand };

package/es/plugins/link-highlight/index.d.ts

@@ -0,0 +1,3 @@
+import { INSERT_LINK_HIGHLIGHT_COMMAND, registerLinkHighlightCommand } from "./command/index.js";
+import { LinkHighlightPlugin, LinkHighlightPluginOptions } from "./plugin/index.js";
+import { ReactLinkHighlightPlugin } from "./react/ReactLinkHighlightPlugin.js";

package/es/plugins/link-highlight/node/link-highlight.js

@@ -0,0 +1,80 @@
+import { createDebugLogger, init_debug } from "../../../utils/debug.js";
+import { $applyNodeReplacement, ElementNode } from "lexical";
+import { addClassNamesToElement } from "@lexical/utils";
+//#region src/plugins/link-highlight/node/link-highlight.ts
+init_debug();
+const logger = createDebugLogger("plugin", "link-highlight");
+var LinkHighlightNode = class LinkHighlightNode extends ElementNode {
+	static getType() {
+		return "linkHighlight";
+	}
+	static clone(node) {
+		return new LinkHighlightNode(node.__key);
+	}
+	static importJSON(serializedNode) {
+		return $createLinkHighlightNode().updateFromJSON(serializedNode);
+	}
+	createDOM(config) {
+		logger.debug("🔍 config", config);
+		const element = document.createElement("a");
+		const url = this.getURL();
+		if (url) element.href = this.formatUrl(url);
+		element.setAttribute("target", "_blank");
+		element.setAttribute("rel", "noopener noreferrer");
+		addClassNamesToElement(element, config.theme.linkHighlight);
+		return element;
+	}
+	/**
+	* Format URL to ensure it has proper protocol
+	*/
+	formatUrl(url) {
+		if (/^[a-z][\d+.a-z-]*:/i.test(url)) return url;
+		if (/^[#./]/.test(url)) return url;
+		if (url.includes("@") && !url.startsWith("mailto:")) return `mailto:${url}`;
+		if (/^\+?[\d\s()-]{5,}$/.test(url)) return `tel:${url}`;
+		if (url.startsWith("www.")) return `https://${url}`;
+		if (!url.includes("://")) return `https://${url}`;
+		return url;
+	}
+	canBeEmpty() {
+		return false;
+	}
+	isInline() {
+		return true;
+	}
+	canInsertTextBefore() {
+		return false;
+	}
+	canInsertTextAfter() {
+		return false;
+	}
+	updateDOM(prevNode, dom, config) {
+		if ((prevNode ? prevNode : null) !== this) addClassNamesToElement(dom, config.theme.linkHighlight);
+		if (dom instanceof HTMLAnchorElement) {
+			const url = this.getURL();
+			if (url) dom.href = this.formatUrl(url);
+			else dom.removeAttribute("href");
+		}
+		return false;
+	}
+	/**
+	* Get the URL from the text content
+	*/
+	getURL() {
+		return this.getTextContent().trim();
+	}
+};
+function $createLinkHighlightNode() {
+	return $applyNodeReplacement(new LinkHighlightNode());
+}
+function $isLinkHighlightNode(node) {
+	return node instanceof LinkHighlightNode;
+}
+function getLinkHighlightNode(node) {
+	if ($isLinkHighlightNode(node)) return node;
+	const parent = node.getParent();
+	if ($isLinkHighlightNode(parent)) return parent;
+	return null;
+}
+//#endregion
+export { $createLinkHighlightNode, $isLinkHighlightNode, LinkHighlightNode, getLinkHighlightNode };

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

@@ -0,0 +1,18 @@
+import { IEditorPluginConstructor } from "../../../types/kernel.js";
+//#region src/plugins/link-highlight/plugin/index.d.ts
+interface LinkHighlightPluginOptions {
+  enableHotkey?: boolean;
+  /**
+   * Enable auto-highlight when pasting URLs
+   * @default true
+   */
+  enablePasteAutoHighlight?: boolean;
+  theme?: string;
+  /**
+   * Custom URL validation regex
+   */
+  urlRegex?: RegExp;
+}
+declare const LinkHighlightPlugin: IEditorPluginConstructor<LinkHighlightPluginOptions>;
+//#endregion
+export { LinkHighlightPlugin, LinkHighlightPluginOptions };