@lobehub/editor 4.8.4 → 4.8.5

package/es/renderer.js

@@ -121,6 +121,65 @@ function formatLinkHighlightUrl(url) {
 function textToSlug(text) {
 	return text.toLowerCase().trim().replaceAll(/[^\s\w\u3000-\u9FFF\uAC00-\uD7AF\uFF00-\uFFEF-]/g, "").replaceAll(/[\s_]+/g, "-").replaceAll(/^-+|-+$/g, "");
 }
+const DIFF_ROOT_STYLE = { position: "relative" };
+const DIFF_LIST_ITEM_ROOT_STYLE = {
+	display: "inline-block",
+	minWidth: "100%",
+	position: "relative"
+};
+const DIFF_DELETED_STYLE = {
+	color: "var(--ant-color-text-quaternary, rgba(0, 0, 0, 0.45))",
+	textDecoration: "line-through"
+};
+function renderDiffNode(node, key, children) {
+	const diffType = typeof node.diffType === "string" ? node.diffType : "unchanged";
+	const renderedChildren = children ?? [];
+	const sharedContentStyle = {
+		marginBlockStart: "calc(var(--lobe-markdown-margin-multiple, 1) * 0.5em)",
+		paddingInlineEnd: 4
+	};
+	const borderColor = diffType === "add" || diffType === "listItemAdd" ? "var(--ant-color-success, #52c41a)" : diffType === "remove" || diffType === "listItemRemove" ? "var(--ant-color-error, #ff4d4f)" : "var(--ant-color-warning, #faad14)";
+	const contentStyle = diffType === "unchanged" ? sharedContentStyle : {
+		...sharedContentStyle,
+		borderInlineEnd: `3px solid ${borderColor}`
+	};
+	const rootStyle = diffType === "listItemAdd" || diffType === "listItemModify" || diffType === "listItemRemove" ? DIFF_LIST_ITEM_ROOT_STYLE : DIFF_ROOT_STYLE;
+	const wrapChild = (child, childKey, style) => {
+		if (child === void 0 || child === null) return null;
+		return /* @__PURE__ */ jsx("div", {
+			style,
+			children: child
+		}, childKey);
+	};
+	let content;
+	switch (diffType) {
+		case "add":
+		case "listItemAdd":
+			content = wrapChild(renderedChildren[0], `${key}-add`);
+			break;
+		case "remove":
+		case "listItemRemove":
+			content = wrapChild(renderedChildren[0], `${key}-remove`, DIFF_DELETED_STYLE);
+			break;
+		case "modify":
+		case "listItemModify":
+			content = [wrapChild(renderedChildren[0], `${key}-old`, DIFF_DELETED_STYLE), wrapChild(renderedChildren[1], `${key}-new`)];
+			break;
+		default:
+			content = renderedChildren;
+			break;
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: "ne-diff",
+		"data-diff-type": diffType,
+		style: rootStyle,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "content",
+			style: contentStyle,
+			children: content
+		})
+	}, key);
+}
 function renderBuiltinNode(node, key, children, headingSlugs, textContent) {
 	switch (node.type) {
 		case "root": return children;
@@ -216,6 +275,7 @@ function renderBuiltinNode(node, key, children, headingSlugs, textContent) {
 				children: node.text
 			}, key);
 			return /* @__PURE__ */ jsx("span", { children: node.text }, key);
+		case "diff": return renderDiffNode(node, key, children);
 		case "cursor": return null;
 		default:
 			console.warn(`[LexicalRenderer] Unknown node type: "${node.type}"`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "4.8.4",
+  "version": "4.8.5",
   "description": "A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.",
   "keywords": [
     "lobehub",