@lobehub/editor 4.24.1 → 4.25.1

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 };

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

@@ -1,13 +1,13 @@
 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 { EDIT_LINK_CARD_COMMAND } from "../../node/LinkCardNode.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 { Fragment, 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";
@@ -16,27 +16,43 @@ const EDIT_LINK_COMMAND = createCommand();
 const LinkEdit = ({ editor }) => {
 	const divRef = useRef(null);
 	const linkNodeRef = useRef(null);
+	const cardNodeRef = useRef(null);
 	const linkInputRef = useRef(null);
 	const linkTextInputRef = useRef(null);
 	const [linkUrl, setLinkUrl] = useState("");
 	const [linkText, setLinkText] = useState("");
+	const [openTarget, setOpenTarget] = useState("_blank");
 	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;
+		cardNodeRef.current = null;
 		setLinkUrl("");
 		setLinkText("");
+		setOpenTarget("_blank");
 		setLinkDom(null);
 	}, [editor]);
 	const handleSubmit = useCallback(() => {
-		if (!linkNodeRef.current || !linkInputRef.current || !linkTextInputRef.current || !editor) return;
-		const linkNode = linkNodeRef.current;
+		if (!editor.isEditable()) return;
+		if (!linkInputRef.current || !linkTextInputRef.current || !editor) return;
 		const inputDOM = linkInputRef.current.input;
 		const textInputDOM = linkTextInputRef.current.input;
+		if (cardNodeRef.current) {
+			const cardNode = cardNodeRef.current;
+			editor.update(() => {
+				cardNode.setTitle(textInputDOM.value);
+				cardNode.setURL(inputDOM.value);
+				cardNode.setOpenTarget(openTarget);
+			});
+			editor.focus();
+			handleCancel();
+			return;
+		}
+		if (!linkNodeRef.current) return;
+		const linkNode = linkNodeRef.current;
 		if (editor.getEditorState().read(() => linkNode.getURL()) !== inputDOM.value) editor.update(() => {
 			linkNode.setURL(inputDOM.value);
 		});
@@ -51,10 +67,11 @@ const LinkEdit = ({ editor }) => {
 		linkNodeRef,
 		linkInputRef,
 		linkTextInputRef,
+		openTarget,
 		handleCancel
 	]);
 	const handleKeyDown = useCallback((event) => {
-		if (!linkNodeRef.current || !linkInputRef.current || !linkTextInputRef.current || !editor) return;
+		if (!linkNodeRef.current && !cardNodeRef.current || !linkInputRef.current || !linkTextInputRef.current || !editor) return;
 		const linkNode = linkNodeRef.current;
 		const inputDOM = linkInputRef.current.input;
 		const textInputDOM = linkTextInputRef.current.input;
@@ -62,6 +79,11 @@ const LinkEdit = ({ editor }) => {
 			case "Enter":
 				event.preventDefault();
 				if (event.currentTarget === textInputDOM) {
+					if (cardNodeRef.current) {
+						inputDOM.focus();
+						return;
+					}
+					if (!linkNode) return;
 					if (editor.getEditorState().read(() => linkNode.getTextContent()) !== textInputDOM.value) {
 						editor.dispatchCommand(UPDATE_LINK_TEXT_COMMAND, {
 							key: linkNode.getKey(),
@@ -88,11 +110,18 @@ const LinkEdit = ({ editor }) => {
 		handleCancel
 	]);
 	useEffect(() => {
-		if (linkDom) updatePosition({
-			floating: divRef.current,
-			reference: linkDom
-		});
-		else cleanPosition(divRef.current);
+		if (linkDom) {
+			updatePosition({
+				floating: divRef.current,
+				reference: linkDom
+			});
+			const focusTimer = setTimeout(() => {
+				linkInputRef.current?.focus();
+			});
+			return () => {
+				clearTimeout(focusTimer);
+			};
+		} else cleanPosition(divRef.current);
 	}, [linkDom]);
 	useEffect(() => {
 		const handlePointerDown = (event) => {
@@ -111,16 +140,33 @@ const LinkEdit = ({ editor }) => {
 	}, [linkDom]);
 	useLexicalEditor((editor) => {
 		return mergeRegister(editor.registerCommand(EDIT_LINK_COMMAND, (payload) => {
+			if (!editor.isEditable()) return false;
 			if (!payload.linkNode || !payload.linkNodeDOM) {
 				handleCancel();
 				return false;
 			}
 			linkNodeRef.current = payload.linkNode;
+			cardNodeRef.current = null;
 			setLinkUrl(payload.linkNode.getURL());
 			setLinkText(payload.linkNode.getTextContent());
+			setOpenTarget(payload.linkNode.getTarget() || "_blank");
 			setLinkDom(payload.linkNodeDOM);
 			return true;
+		}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(EDIT_LINK_CARD_COMMAND, (payload) => {
+			if (!editor.isEditable()) return false;
+			if (!payload.cardNode || !payload.cardNodeDOM) {
+				handleCancel();
+				return false;
+			}
+			cardNodeRef.current = payload.cardNode;
+			linkNodeRef.current = null;
+			setLinkUrl(payload.cardNode.getURL());
+			setLinkText(payload.cardNode.getTitle());
+			setOpenTarget(payload.cardNode.getOpenTarget() || "_blank");
+			setLinkDom(payload.cardNodeDOM);
+			return true;
 		}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(KEY_ESCAPE_COMMAND, () => {
+			if (!linkNodeRef.current && !cardNodeRef.current) return false;
 			handleCancel();
 			return true;
 		}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(KEY_TAB_COMMAND, (payload) => {
@@ -133,7 +179,8 @@ const LinkEdit = ({ editor }) => {
 			return false;
 		}, COMMAND_PRIORITY_NORMAL));
 	}, [editor]);
-	if (!linkNodeRef.current || !editable) return null;
+	if (!linkNodeRef.current && !cardNodeRef.current) return null;
+	const isCardEdit = Boolean(cardNodeRef.current);
 	return /* @__PURE__ */ jsxs(Block, {
 		className: styles.linkEdit,
 		ref: divRef,
@@ -145,7 +192,7 @@ const LinkEdit = ({ editor }) => {
 			children: [
 				/* @__PURE__ */ jsx(Text, {
 					weight: 500,
-					children: t("link.editTextTitle")
+					children: isCardEdit ? "Title" : t("link.editTextTitle")
 				}),
 				/* @__PURE__ */ jsx(Input, {
 					onChange: (e) => {
@@ -175,7 +222,39 @@ const LinkEdit = ({ editor }) => {
 					}),
 					ref: linkInputRef,
 					value: linkUrl
-				})
+				}),
+				isCardEdit ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Text, {
+					weight: 500,
+					children: "Open target"
+				}), /* @__PURE__ */ jsxs("select", {
+					onChange: (e) => {
+						setOpenTarget(e.target.value);
+					},
+					onKeyDown: (e) => {
+						if (e.key === "Enter") {
+							e.preventDefault();
+							handleSubmit();
+						}
+						if (e.key === "Escape") {
+							e.preventDefault();
+							handleCancel();
+						}
+					},
+					style: {
+						border: `1px solid ${cssVar.colorBorder}`,
+						borderRadius: 6,
+						height: 32,
+						paddingInline: 8
+					},
+					value: openTarget,
+					children: [/* @__PURE__ */ jsx("option", {
+						value: "_blank",
+						children: "New page"
+					}), /* @__PURE__ */ jsx("option", {
+						value: "_self",
+						children: "Current page"
+					})]
+				})] }) : null
 			]
 		}), /* @__PURE__ */ jsx(Flexbox, {
 			className: styles.linkEditFooter,

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

@@ -0,0 +1,128 @@
+import { useCallback, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { $createNodeSelection, $getNodeByKey, $setSelection } from "lexical";
+//#region src/plugins/link/react/components/LinkIframe.tsx
+const LinkIframe = ({ editor, node, rendererRegistry, src, title, url }) => {
+	const key = node.getKey();
+	const [isSelected, setIsSelected] = useState(() => isNodeSelected(editor, key));
+	const [loadedSrc, setLoadedSrc] = useState(null);
+	const isLoading = loadedSrc !== src;
+	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 onLoad = useCallback(() => {
+		setLoadedSrc(src);
+	}, [src]);
+	const onMouseDownCapture = useCallback((event) => {
+		if (!editor.isEditable()) return;
+		event.currentTarget.focus();
+		event.preventDefault();
+		event.stopPropagation();
+		editor.focus();
+		editor.update(() => {
+			const selection = $createNodeSelection();
+			selection.add(key);
+			$setSelection(selection);
+		});
+	}, [editor, key]);
+	const props = {
+		editor,
+		isEditable: editor.isEditable(),
+		isLoading,
+		isSelected,
+		node,
+		onLoad,
+		onMouseDownCapture,
+		src,
+		title,
+		url
+	};
+	return rendererRegistry.renderIframeNode(props) || /* @__PURE__ */ jsx(DefaultLinkIframe, { ...props });
+};
+LinkIframe.displayName = "LinkIframe";
+function isNodeSelected(editor, key) {
+	return editor.getEditorState().read(() => {
+		return $getNodeByKey(key)?.isSelected() ?? false;
+	});
+}
+function DefaultLinkIframe(props) {
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			border: "1px solid rgba(0,0,0,0.12)",
+			borderRadius: 8,
+			boxShadow: props.isSelected ? "0 0 0 2px rgba(22,119,255,0.18)" : void 0,
+			overflow: "hidden",
+			position: "relative",
+			width: "100%",
+			...props.isSelected ? { borderColor: "#1677ff" } : {}
+		},
+		tabIndex: 0,
+		children: [
+			props.isLoading && /* @__PURE__ */ jsx("style", { children: "@keyframes lobe-link-iframe-spin{to{transform:rotate(360deg)}}" }),
+			/* @__PURE__ */ jsx("div", {
+				onMouseDownCapture: props.onMouseDownCapture,
+				style: {
+					borderBottom: "1px solid rgba(0,0,0,0.08)",
+					color: "rgba(0,0,0,0.55)",
+					cursor: props.isEditable ? "pointer" : "default",
+					fontSize: 12,
+					padding: "8px 10px"
+				},
+				children: props.title
+			}),
+			props.isLoading && /* @__PURE__ */ jsxs("div", {
+				style: {
+					alignItems: "center",
+					background: "rgba(0,0,0,0.03)",
+					bottom: 0,
+					color: "rgba(0,0,0,0.45)",
+					display: "flex",
+					fontSize: 13,
+					gap: 8,
+					height: 320,
+					justifyContent: "center",
+					left: 0,
+					position: "absolute",
+					right: 0,
+					zIndex: 1
+				},
+				children: [/* @__PURE__ */ jsx("span", { style: {
+					animation: "lobe-link-iframe-spin 1s linear infinite",
+					border: "2px solid rgba(0,0,0,0.12)",
+					borderRadius: "50%",
+					borderTopColor: "#1677ff",
+					display: "inline-block",
+					height: 14,
+					width: 14
+				} }), "Loading embed..."]
+			}),
+			/* @__PURE__ */ jsx("iframe", {
+				loading: "lazy",
+				onLoad: props.onLoad,
+				src: props.src,
+				style: {
+					border: 0,
+					display: "block",
+					height: 320,
+					visibility: props.isLoading ? "hidden" : "visible",
+					width: "100%"
+				},
+				title: props.title
+			})
+		]
+	});
+}
+//#endregion
+export { DefaultLinkIframe, LinkIframe as default };