@lobehub/editor 4.5.0 → 4.6.0

package/es/renderer.js

@@ -0,0 +1,1254 @@
+import { E as CodeNode, L as CursorNode, M as CodeMirrorNode, O as styles$1, _ as AutoLinkNode, b as LinkNode, c as MathBlockNode, f as LinkHighlightNode, i as MentionNode, l as MathInlineNode, t as styles$2 } from "./style-Ub1LiKko.js";
+import { S as PlaceholderNode, a as styles$6, b as DiffNode, c as ImageNode, d as BlockImageNode, h as styles$7, m as HorizontalRuleNode, n as styles$5, r as styles$3, t as styles$4, v as FileNode, x as PlaceholderBlockNode } from "./style-CFkese2R.js";
+import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
+import { $getRoot, $isElementNode, $isTextNode } from "lexical";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement, useCallback, useMemo, useState } from "react";
+import { ActionIcon, Block, Flexbox, MaterialFileTypeIcon, Mermaid, Text } from "@lobehub/ui";
+import katex from "katex";
+import { createStaticStyles, cx } from "antd-style";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { Check, ChevronDown, ChevronRight, CopyIcon } from "lucide-react";
+import { createHighlighterCoreSync, isSpecialLang, stringifyTokenStyle } from "@shikijs/core";
+import { createJavaScriptRegexEngine } from "@shikijs/engine-javascript";
+import { bundledLanguagesInfo } from "shiki";
+import { createHeadlessEditor } from "@lexical/headless";
+//#region src/renderer/engine/shiki.ts
+let _highlighter = null;
+let _themeLoaded = false;
+function getHighlighter() {
+	if (!_highlighter) _highlighter = createHighlighterCoreSync({
+		engine: createJavaScriptRegexEngine(),
+		langs: [],
+		themes: []
+	});
+	return _highlighter;
+}
+async function ensureTheme(highlighter) {
+	if (_themeLoaded) return;
+	try {
+		const { ShikiLobeTheme } = await import("@lobehub/ui");
+		highlighter.loadThemeSync(ShikiLobeTheme);
+		_themeLoaded = true;
+	} catch {}
+}
+function isLanguageLoaded(language) {
+	if (isSpecialLang(language)) return true;
+	return getHighlighter().getLoadedLanguages().includes(language);
+}
+function parseInlineStyle(style) {
+	const result = {};
+	for (const part of style.split(";")) {
+		const colonIdx = part.indexOf(":");
+		if (colonIdx === -1) continue;
+		const prop = part.slice(0, colonIdx).trim();
+		const val = part.slice(colonIdx + 1).trim();
+		if (!prop || !val) continue;
+		const camelProp = prop.replaceAll(/-([a-z])/g, (_, c) => c.toUpperCase());
+		result[camelProp] = val;
+	}
+	return result;
+}
+async function loadLanguage(language) {
+	if (isLanguageLoaded(language)) return;
+	const info = bundledLanguagesInfo.find((desc) => desc.id === language || desc.aliases?.includes(language));
+	if (info) await getHighlighter().loadLanguage(info.import());
+}
+function highlightCode(code, language, key) {
+	if (!language || !isLanguageLoaded(language)) return null;
+	const highlighter = getHighlighter();
+	ensureTheme(highlighter);
+	const theme = _themeLoaded ? "lobe-theme" : highlighter.getLoadedThemes()[0] || "none";
+	try {
+		const { tokens } = highlighter.codeToTokens(code, {
+			lang: language,
+			theme
+		});
+		const nodes = [];
+		for (const [lineIdx, line] of tokens.entries()) {
+			if (lineIdx > 0) nodes.push(createElement("br", { key: `${key}-br-${lineIdx}` }));
+			for (const [tokenIdx, token] of line.entries()) {
+				const tokenStyle = stringifyTokenStyle(token.htmlStyle || (token.color ? `color: ${token.color}` : ""));
+				if (tokenStyle) nodes.push(createElement("span", {
+					key: `${key}-${lineIdx}-${tokenIdx}`,
+					style: parseInlineStyle(tokenStyle)
+				}, token.content));
+				else nodes.push(token.content);
+			}
+		}
+		return nodes;
+	} catch {
+		return null;
+	}
+}
+//#endregion
+//#region src/renderer/style.ts
+const tableHeaderFix = createStaticStyles(({ css, cssVar }) => css`
+    .editor_table > tbody > tr:first-of-type {
+      background: ${cssVar.colorFillQuaternary};
+
+      .editor_table_cell_header {
+        font-weight: bold;
+      }
+    }
+  `);
+function getRendererClassName(className) {
+	return cx(styles$1.root, styles$1.variant, className);
+}
+function getListClassName(listType) {
+	return cx(listType === "number" ? "editor_listOrdered" : "editor_listUnordered", styles$3);
+}
+function getTableWrapperClassName() {
+	return cx("editor_table_scrollable_wrapper", styles$4, tableHeaderFix);
+}
+function getMathInlineClassName() {
+	return styles$5.mathInline;
+}
+function getMathBlockClassName() {
+	return styles$5.mathBlock;
+}
+function getImageClassName() {
+	return styles$6.image;
+}
+function getBlockImageClassName() {
+	return styles$6.blockImage;
+}
+function getMentionClassName() {
+	return cx("editor_mention", styles$2.mention);
+}
+function getCSSVariables(variant) {
+	const isChat = variant === "chat";
+	return {
+		"--common-font-size": `${isChat ? 14 : 16}px`,
+		"--common-header-multiple": String(isChat ? .25 : .6),
+		"--common-line-height": String(isChat ? 1.4 : 1.6),
+		"--common-margin-multiple": String(isChat ? 1 : 2)
+	};
+}
+//#endregion
+//#region src/renderer/engine/utils.ts
+function parseCSSText(cssText) {
+	const style = {};
+	for (const part of cssText.split(";")) {
+		const colonIndex = part.indexOf(":");
+		if (colonIndex === -1) continue;
+		const prop = part.slice(0, colonIndex).trim();
+		const value = part.slice(colonIndex + 1).trim();
+		if (!prop || !value) continue;
+		const camelProp = prop.replaceAll(/-([a-z])/g, (_, c) => c.toUpperCase());
+		style[camelProp] = value;
+	}
+	return style;
+}
+//#endregion
+//#region src/renderer/engine/render-builtin-node.tsx
+const SAFE_URL_PROTOCOLS = new Set([
+	"http:",
+	"https:",
+	"mailto:",
+	"sms:",
+	"tel:"
+]);
+function sanitizeUrl(url) {
+	try {
+		const parsed = new URL(url);
+		if (!SAFE_URL_PROTOCOLS.has(parsed.protocol)) return "about:blank";
+	} catch {
+		return url;
+	}
+	return url;
+}
+function formatLinkHighlightUrl(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;
+}
+function textToSlug(text) {
+	return text.toLowerCase().trim().replaceAll(/[^\s\w\u3000-\u9FFF\uAC00-\uD7AF\uFF00-\uFFEF-]/g, "").replaceAll(/[\s_]+/g, "-").replaceAll(/^-+|-+$/g, "");
+}
+function renderBuiltinNode(node, key, children, headingSlugs, textContent) {
+	switch (node.type) {
+		case "root": return children;
+		case "paragraph": return /* @__PURE__ */ jsx("p", {
+			style: node.format ? { textAlign: node.format } : void 0,
+			children
+		}, key);
+		case "heading": {
+			const tag = node.tag;
+			const baseSlug = textToSlug(textContent || "");
+			let slug = baseSlug;
+			if (baseSlug) {
+				const count = headingSlugs.get(baseSlug);
+				if (count !== void 0) {
+					slug = `${baseSlug}-${count}`;
+					headingSlugs.set(baseSlug, count + 1);
+				} else headingSlugs.set(baseSlug, 1);
+			}
+			return createElement(tag, {
+				id: slug || void 0,
+				key
+			}, children);
+		}
+		case "quote": return /* @__PURE__ */ jsx("blockquote", {
+			className: "editor_quote",
+			children
+		}, key);
+		case "list": return /* @__PURE__ */ jsx(node.listType === "number" ? "ol" : "ul", {
+			className: getListClassName(node.listType),
+			start: node.start !== 1 ? node.start : void 0,
+			children
+		}, key);
+		case "listitem": {
+			const isChecklist = node.checked !== void 0;
+			const hasNestedList = node.children?.some((c) => c.type === "list");
+			const value = typeof node.value === "number" && node.value > 1 ? node.value : void 0;
+			let cls = "editor_listItem";
+			if (hasNestedList) cls = "editor_listItemNested";
+			else if (isChecklist) cls = node.checked ? "editor_listItem editor_listItemChecked" : "editor_listItem editor_listItemUnchecked";
+			return /* @__PURE__ */ jsx("li", {
+				className: cls,
+				role: isChecklist ? "checkbox" : void 0,
+				value,
+				children
+			}, key);
+		}
+		case "link":
+		case "autolink": return /* @__PURE__ */ jsx("a", {
+			href: sanitizeUrl(node.url),
+			rel: node.rel || "noopener noreferrer",
+			target: node.target || void 0,
+			children
+		}, key);
+		case "linkHighlight": return /* @__PURE__ */ jsx("a", {
+			href: textContent ? sanitizeUrl(formatLinkHighlightUrl(textContent)) : void 0,
+			rel: "noopener noreferrer",
+			target: "_blank",
+			children
+		}, key);
+		case "table": return /* @__PURE__ */ jsx("div", {
+			className: getTableWrapperClassName(),
+			children: /* @__PURE__ */ jsx("table", {
+				className: "editor_table",
+				children: /* @__PURE__ */ jsx("tbody", { children })
+			})
+		}, key);
+		case "tablerow": return /* @__PURE__ */ jsx("tr", { children }, key);
+		case "tablecell": {
+			const isHeader = !!node.headerState;
+			const CellTag = isHeader ? "th" : "td";
+			const cls = isHeader ? "editor_table_cell editor_table_cell_header" : "editor_table_cell";
+			const cellStyle = {};
+			if (node.width) cellStyle.width = `${node.width}px`;
+			if (node.backgroundColor) cellStyle.backgroundColor = node.backgroundColor;
+			if (node.verticalAlign) cellStyle.verticalAlign = node.verticalAlign;
+			return /* @__PURE__ */ jsx(CellTag, {
+				className: cls,
+				colSpan: node.colSpan > 1 ? node.colSpan : void 0,
+				rowSpan: node.rowSpan > 1 ? node.rowSpan : void 0,
+				style: Object.keys(cellStyle).length > 0 ? cellStyle : void 0,
+				children
+			}, key);
+		}
+		case "linebreak": return /* @__PURE__ */ jsx("br", {}, key);
+		case "tab": return /* @__PURE__ */ jsx("span", { children: "	" }, key);
+		case "codeInline": return /* @__PURE__ */ jsx("code", {
+			className: "editor_code",
+			children
+		}, key);
+		case "code-highlight":
+			if (node.style) return /* @__PURE__ */ jsx("span", {
+				style: parseCSSText(node.style),
+				children: node.text
+			}, key);
+			return /* @__PURE__ */ jsx("span", { children: node.text }, key);
+		case "cursor": return null;
+		default:
+			console.warn(`[LexicalRenderer] Unknown node type: "${node.type}"`);
+			return children ?? null;
+	}
+}
+//#endregion
+//#region src/renderer/engine/render-text-node.tsx
+const FORMAT_TAGS = [
+	[1, "strong"],
+	[2, "em"],
+	[4, "s"],
+	[8, "u"],
+	[16, "code"],
+	[32, "sub"],
+	[64, "sup"],
+	[128, "mark"]
+];
+function shouldPreserveWhitespace(text) {
+	return /[\t\n]| {2,}|^ | $/.test(text);
+}
+function renderTextNode(node, key) {
+	const style = node.style ? parseCSSText(node.style) : void 0;
+	const preserveWhitespace = shouldPreserveWhitespace(node.text);
+	let element = node.text;
+	const format = node.format || 0;
+	for (const [flag, tag] of FORMAT_TAGS) if (format & flag) element = createElement(tag, { key: `${key}-${flag}` }, element);
+	if (style || preserveWhitespace) element = createElement("span", {
+		key,
+		style: {
+			...style,
+			...preserveWhitespace ? { whiteSpace: "break-spaces" } : void 0
+		}
+	}, element);
+	return element;
+}
+//#endregion
+//#region src/renderer/engine/render-tree.ts
+function isHeadlessRenderableNode(node) {
+	return typeof node.renderHeadless === "function";
+}
+function renderNode(node, registry, headingSlugs, overrides, key, renderContext) {
+	const type = node.getType();
+	if (type === "cursor") return null;
+	if ($isTextNode(node)) return renderTextNode(node.exportJSON(), key);
+	const serialized = node.exportJSON();
+	let children = null;
+	if ($isElementNode(node)) {
+		const childNodes = node.getChildren();
+		if (childNodes.length > 0) children = childNodes.map((child, i) => renderNode(child, registry, headingSlugs, overrides, `${key}-${i}`, renderContext));
+	}
+	const textContent = node.getTextContent ? node.getTextContent() : void 0;
+	const override = overrides?.[type];
+	if (override) return override(serialized, key, children);
+	if (isHeadlessRenderableNode(node)) {
+		const context = {
+			children,
+			extra: renderContext?.extra,
+			key,
+			variant: renderContext?.variant
+		};
+		return node.renderHeadless(context);
+	}
+	const renderer = registry.get(type);
+	if (renderer) return renderer(serialized, key, children);
+	return renderBuiltinNode(serialized, key, children, headingSlugs, textContent);
+}
+//#endregion
+//#region src/renderer/nodes/index.ts
+const rendererNodes = [
+	HeadingNode,
+	QuoteNode,
+	ListNode,
+	ListItemNode,
+	TableNode,
+	TableRowNode,
+	TableCellNode,
+	ImageNode,
+	BlockImageNode,
+	MathInlineNode,
+	MathBlockNode,
+	CodeMirrorNode,
+	HorizontalRuleNode,
+	MentionNode,
+	FileNode,
+	CodeNode,
+	LinkNode,
+	AutoLinkNode,
+	CursorNode,
+	DiffNode,
+	LinkHighlightNode,
+	PlaceholderNode,
+	PlaceholderBlockNode
+];
+//#endregion
+//#region src/renderer/renderers/mermaid.tsx
+function renderMermaidBlock(node, key) {
+	return /* @__PURE__ */ jsx(Mermaid, {
+		animated: false,
+		defaultExpand: true,
+		fullFeatured: true,
+		style: { width: "100%" },
+		theme: "lobe-theme",
+		variant: "filled",
+		children: node.code || ""
+	}, key);
+}
+//#endregion
+//#region src/renderer/renderers/codeblock.tsx
+const useStyles$1 = createStaticStyles(({ css, cssVar }) => css`
+    cursor: default;
+
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    width: 100%;
+    margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);
+    border-radius: var(--lobe-markdown-border-radius);
+
+    background: ${cssVar.colorFillQuaternary};
+
+    .renderer-cm-header {
+      width: 100%;
+    }
+
+    .renderer-cm-code {
+      width: 100%;
+      border-block-start: 1px solid ${cssVar.colorFillQuaternary};
+    }
+
+    .renderer-cm-pre {
+      overflow-x: auto;
+
+      margin: 0;
+      padding: 16px;
+
+      font-family: ${cssVar.fontFamilyCode};
+      font-size: calc(var(--lobe-markdown-font-size) * 0.85);
+      line-height: 1.6;
+      white-space: pre;
+
+      background: transparent;
+
+      code {
+        font-family: inherit;
+        font-size: inherit;
+      }
+    }
+
+    .renderer-cm-collapsed {
+      overflow: hidden;
+      height: 0;
+      border-block-start: none;
+    }
+  `);
+function CodeBlockCopyButton({ code }) {
+	const [copied, setCopied] = useState(false);
+	const handleCopy = useCallback(() => {
+		navigator.clipboard.writeText(code).catch(() => {});
+		setCopied(true);
+		setTimeout(() => setCopied(false), 1e3);
+	}, [code]);
+	return /* @__PURE__ */ jsx(ActionIcon, {
+		active: copied,
+		icon: copied ? Check : CopyIcon,
+		onClick: handleCopy,
+		size: "small",
+		title: "Copy"
+	});
+}
+function getLanguageName(lang) {
+	return {
+		bash: "Bash",
+		c: "C",
+		cpp: "C++",
+		csharp: "C#",
+		css: "CSS",
+		dart: "Dart",
+		go: "Go",
+		graphql: "GraphQL",
+		html: "HTML",
+		java: "Java",
+		javascript: "JavaScript",
+		json: "JSON",
+		jsx: "JSX",
+		kotlin: "Kotlin",
+		lua: "Lua",
+		markdown: "Markdown",
+		php: "PHP",
+		python: "Python",
+		ruby: "Ruby",
+		rust: "Rust",
+		scss: "SCSS",
+		shell: "Shell",
+		sql: "SQL",
+		swift: "Swift",
+		tsx: "TSX",
+		typescript: "TypeScript",
+		xml: "XML",
+		yaml: "YAML"
+	}[lang] || lang.charAt(0).toUpperCase() + lang.slice(1);
+}
+function getFileExt(lang) {
+	return {
+		bash: "sh",
+		csharp: "cs",
+		javascript: "js",
+		kotlin: "kt",
+		markdown: "md",
+		python: "py",
+		ruby: "rb",
+		rust: "rs",
+		shell: "sh",
+		swift: "swift",
+		typescript: "ts",
+		yaml: "yml"
+	}[lang] || lang;
+}
+function CodeBlockRenderer({ node, codeChildren }) {
+	const language = node.language || "";
+	const code = node.code || "";
+	const [expand, setExpand] = useState(true);
+	const codeContent = codeChildren || highlightCode(code, language, "cb") || code;
+	return /* @__PURE__ */ jsxs(Block, {
+		className: useStyles$1,
+		variant: "filled",
+		children: [/* @__PURE__ */ jsxs(Flexbox, {
+			align: "center",
+			className: "renderer-cm-header",
+			horizontal: true,
+			justify: "space-between",
+			padding: 4,
+			children: [/* @__PURE__ */ jsxs(Flexbox, {
+				align: "center",
+				gap: 4,
+				horizontal: true,
+				children: [language && /* @__PURE__ */ jsx(MaterialFileTypeIcon, {
+					fallbackUnknownType: false,
+					filename: `*.${getFileExt(language)}`,
+					size: 18,
+					type: "file",
+					variant: "raw"
+				}), /* @__PURE__ */ jsx(Text, {
+					ellipsis: true,
+					fontSize: 13,
+					children: language ? getLanguageName(language) : "Plain Text"
+				})]
+			}), /* @__PURE__ */ jsxs(Flexbox, {
+				gap: 4,
+				horizontal: true,
+				children: [/* @__PURE__ */ jsx(CodeBlockCopyButton, { code }), /* @__PURE__ */ jsx(ActionIcon, {
+					icon: expand ? ChevronDown : ChevronRight,
+					onClick: () => setExpand(!expand),
+					size: "small"
+				})]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: expand ? "renderer-cm-code" : "renderer-cm-code renderer-cm-collapsed",
+			children: /* @__PURE__ */ jsx("pre", {
+				className: "renderer-cm-pre",
+				children: /* @__PURE__ */ jsx("code", { children: codeContent })
+			})
+		})]
+	});
+}
+function renderCodeBlock(node, key, children) {
+	if ((node.language || "").toLowerCase() === "mermaid") return renderMermaidBlock(node, key);
+	return /* @__PURE__ */ jsx(CodeBlockRenderer, {
+		codeChildren: children,
+		node
+	}, key);
+}
+//#endregion
+//#region src/renderer/renderers/file.tsx
+function renderFile(node, key) {
+	const { name, fileUrl, status, message } = node;
+	const cls = styles$7.file;
+	if (status === "error") return /* @__PURE__ */ jsxs("span", {
+		className: cls,
+		"data-file-status": "error",
+		children: [
+			name,
+			": ",
+			message || "Upload failed"
+		]
+	}, key);
+	if (status === "pending" || !fileUrl) return /* @__PURE__ */ jsx("span", {
+		className: cls,
+		"data-file-status": "pending",
+		children: name
+	}, key);
+	return /* @__PURE__ */ jsx("a", {
+		className: cls,
+		download: name,
+		href: fileUrl,
+		children: name
+	}, key);
+}
+//#endregion
+//#region src/renderer/renderers/horizontalrule.tsx
+const useStyles = createStaticStyles(({ css, cssVar }) => css`
+    display: flex;
+    align-items: center;
+
+    width: 100%;
+    height: calc(var(--lobe-markdown-margin-multiple) * 1em);
+    margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);
+
+    hr {
+      width: 100%;
+      border-color: ${cssVar.colorBorder};
+      border-style: dashed;
+      border-width: 1px;
+      border-block-start: none;
+      border-inline-start: none;
+      border-inline-end: none;
+    }
+  `);
+function renderHR(_node, key) {
+	return createElement("div", {
+		className: useStyles,
+		key
+	}, createElement("hr"));
+}
+//#endregion
+//#region src/renderer/renderers/image.tsx
+function renderImage(node, key) {
+	const { src, altText, width, height, maxWidth } = node;
+	const style = {};
+	if (maxWidth) style.maxWidth = maxWidth;
+	if (width && width !== "inherit") style.width = width;
+	if (height && height !== "inherit") style.height = height;
+	return /* @__PURE__ */ jsx("span", {
+		className: getImageClassName(),
+		children: /* @__PURE__ */ jsx("img", {
+			alt: altText || "",
+			src,
+			style
+		})
+	}, key);
+}
+function renderBlockImage(node, key) {
+	const { src, altText, width, height, maxWidth } = node;
+	const style = {};
+	if (maxWidth) style.maxWidth = maxWidth;
+	if (width && width !== "inherit") style.width = width;
+	if (height && height !== "inherit") style.height = height;
+	return /* @__PURE__ */ jsx("figure", {
+		className: getBlockImageClassName(),
+		children: /* @__PURE__ */ jsx("img", {
+			alt: altText || "",
+			src,
+			style
+		})
+	}, key);
+}
+//#endregion
+//#region src/renderer/renderers/math.tsx
+function renderMath(node, key) {
+	const code = node.code || "";
+	const displayMode = node.type === "mathBlock";
+	const html = katex.renderToString(code, {
+		displayMode,
+		throwOnError: false
+	});
+	return createElement(displayMode ? "div" : "span", {
+		className: displayMode ? getMathBlockClassName() : getMathInlineClassName(),
+		dangerouslySetInnerHTML: { __html: html },
+		key
+	});
+}
+//#endregion
+//#region src/renderer/renderers/mention.tsx
+function renderMention(node, key) {
+	const label = node.label || "";
+	return /* @__PURE__ */ jsx("span", {
+		className: getMentionClassName(),
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "editor_mention",
+			children: ["@", label]
+		})
+	}, key);
+}
+//#endregion
+//#region src/renderer/renderers/index.ts
+function createDefaultRenderers() {
+	return new Map([
+		["image", renderImage],
+		["block-image", renderBlockImage],
+		["math", renderMath],
+		["mathBlock", renderMath],
+		["code", renderCodeBlock],
+		["horizontalrule", renderHR],
+		["mention", renderMention],
+		["file", renderFile]
+	]);
+}
+//#endregion
+//#region src/renderer/LexicalRenderer.tsx
+function LexicalRenderer({ value, overrides, extraNodes, renderContext, as: Tag = "div", className, style, variant }) {
+	const content = useMemo(() => {
+		const nodes = extraNodes ? [...rendererNodes, ...extraNodes] : rendererNodes;
+		const registry = createDefaultRenderers();
+		const editor = createHeadlessEditor({
+			editable: false,
+			nodes,
+			onError: (error) => {
+				console.error("[LexicalRenderer]", error);
+			}
+		});
+		const state = editor.parseEditorState(value);
+		editor.setEditorState(state);
+		let result = null;
+		const headingSlugs = /* @__PURE__ */ new Map();
+		state.read(() => {
+			result = $getRoot().getChildren().map((child, i) => renderNode(child, registry, headingSlugs, overrides, `r-${i}`, {
+				...renderContext,
+				variant
+			}));
+		});
+		return result;
+	}, [
+		value,
+		overrides,
+		extraNodes,
+		renderContext,
+		variant
+	]);
+	const cssVars = getCSSVariables(variant);
+	return createElement(Tag, {
+		className: getRendererClassName(className),
+		style: {
+			...cssVars,
+			...style
+		}
+	}, createElement("div", null, content));
+}
+//#endregion
+//#region src/renderer/diff/compute.ts
+const CHAR_DIFF_MAX_MATRIX_CELLS = 5e4;
+const DELETE_MARK_STYLE = "background-color: color-mix(in srgb, var(--ant-color-error) 18%, transparent); text-decoration: line-through;";
+const INSERT_MARK_STYLE = "background-color: color-mix(in srgb, var(--ant-color-success) 18%, transparent);";
+function getBaseNodeType(node) {
+	if (!node) return null;
+	const type = node.type;
+	return typeof type === "string" ? type : null;
+}
+function getNormalizedBlockType(node) {
+	if (!node) return null;
+	const record = node;
+	const type = getBaseNodeType(node);
+	if (!type) return null;
+	if (type === "heading") return `heading:${String(record.tag || "unknown")}`;
+	if (type === "list") return `list:${String(record.listType || "bullet")}`;
+	return type;
+}
+function createCell(block) {
+	if (!block) return null;
+	return {
+		baseBlockType: getBaseNodeType(block),
+		block,
+		blockType: getNormalizedBlockType(block)
+	};
+}
+function getChildren(node) {
+	const children = node.children;
+	return Array.isArray(children) ? children : null;
+}
+function nodesEqual(a, b) {
+	return JSON.stringify(a) === JSON.stringify(b);
+}
+function isTextNode(node) {
+	const record = node;
+	return record.type === "text" && typeof record.text === "string";
+}
+function appendStyle(baseStyle, extraStyle) {
+	const normalizedBase = typeof baseStyle === "string" ? baseStyle.trim() : "";
+	if (!normalizedBase) return extraStyle;
+	return `${normalizedBase}${normalizedBase.endsWith(";") ? "" : ";"} ${extraStyle}`;
+}
+function cloneTextNode(node, text, markKind) {
+	let { style } = node;
+	if (markKind === "delete") style = appendStyle(style, DELETE_MARK_STYLE);
+	else if (markKind === "insert") style = appendStyle(style, INSERT_MARK_STYLE);
+	return {
+		...node,
+		style,
+		text
+	};
+}
+function cloneNodeWithChildren(node, children) {
+	return {
+		...node,
+		children
+	};
+}
+function decorateSubtree(node, kind) {
+	if (isTextNode(node)) return cloneTextNode(node, node.text, kind);
+	const children = getChildren(node);
+	if (!children) return node;
+	return cloneNodeWithChildren(node, children.map((child) => decorateSubtree(child, kind)));
+}
+function reverseText(value) {
+	return Array.from(value).reverse().join("");
+}
+function mergeTextOps(ops) {
+	const merged = [];
+	for (const op of ops) {
+		if (!op.text) continue;
+		const last = merged.at(-1);
+		if (last && last.kind === op.kind) {
+			last.text += op.text;
+			continue;
+		}
+		merged.push({ ...op });
+	}
+	return merged;
+}
+function diffMiddleChars(oldChars, newChars) {
+	const m = oldChars.length;
+	const n = newChars.length;
+	if (m === 0 && n === 0) return [];
+	if (m === 0) return [{
+		kind: "insert",
+		text: newChars.join("")
+	}];
+	if (n === 0) return [{
+		kind: "delete",
+		text: oldChars.join("")
+	}];
+	if (m * n > CHAR_DIFF_MAX_MATRIX_CELLS) return [{
+		kind: "delete",
+		text: oldChars.join("")
+	}, {
+		kind: "insert",
+		text: newChars.join("")
+	}];
+	const dp = Array.from({ length: m + 1 }, () => Array.from({ length: n + 1 }).fill(0));
+	for (let i = 1; i <= m; i++) for (let j = 1; j <= n; j++) if (oldChars[i - 1] === newChars[j - 1]) dp[i][j] = dp[i - 1][j - 1] + 1;
+	else dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
+	const reversedOps = [];
+	let i = m;
+	let j = n;
+	while (i > 0 && j > 0) {
+		if (oldChars[i - 1] === newChars[j - 1]) {
+			const last = reversedOps.at(-1);
+			if (last && last.kind === "equal") last.text += oldChars[i - 1];
+			else reversedOps.push({
+				kind: "equal",
+				text: oldChars[i - 1]
+			});
+			i--;
+			j--;
+			continue;
+		}
+		if (dp[i - 1][j] >= dp[i][j - 1]) {
+			const last = reversedOps.at(-1);
+			if (last && last.kind === "delete") last.text += oldChars[i - 1];
+			else reversedOps.push({
+				kind: "delete",
+				text: oldChars[i - 1]
+			});
+			i--;
+		} else {
+			const last = reversedOps.at(-1);
+			if (last && last.kind === "insert") last.text += newChars[j - 1];
+			else reversedOps.push({
+				kind: "insert",
+				text: newChars[j - 1]
+			});
+			j--;
+		}
+	}
+	while (i > 0) {
+		const last = reversedOps.at(-1);
+		if (last && last.kind === "delete") last.text += oldChars[i - 1];
+		else reversedOps.push({
+			kind: "delete",
+			text: oldChars[i - 1]
+		});
+		i--;
+	}
+	while (j > 0) {
+		const last = reversedOps.at(-1);
+		if (last && last.kind === "insert") last.text += newChars[j - 1];
+		else reversedOps.push({
+			kind: "insert",
+			text: newChars[j - 1]
+		});
+		j--;
+	}
+	return mergeTextOps(reversedOps.reverse().map((op) => ({
+		kind: op.kind,
+		text: reverseText(op.text)
+	})));
+}
+function diffTextByChar(oldText, newText) {
+	const oldChars = Array.from(oldText);
+	const newChars = Array.from(newText);
+	let prefix = 0;
+	while (prefix < oldChars.length && prefix < newChars.length && oldChars[prefix] === newChars[prefix]) prefix++;
+	let oldSuffix = oldChars.length - 1;
+	let newSuffix = newChars.length - 1;
+	while (oldSuffix >= prefix && newSuffix >= prefix && oldChars[oldSuffix] === newChars[newSuffix]) {
+		oldSuffix--;
+		newSuffix--;
+	}
+	const ops = [];
+	if (prefix > 0) ops.push({
+		kind: "equal",
+		text: oldChars.slice(0, prefix).join("")
+	});
+	ops.push(...diffMiddleChars(oldChars.slice(prefix, oldSuffix + 1), newChars.slice(prefix, newSuffix + 1)));
+	if (oldSuffix < oldChars.length - 1) ops.push({
+		kind: "equal",
+		text: oldChars.slice(oldSuffix + 1).join("")
+	});
+	return mergeTextOps(ops);
+}
+function splitTextNodeByCharDiff(oldNode, newNode) {
+	const ops = diffTextByChar(oldNode.text, newNode.text);
+	const oldNodes = [];
+	const newNodes = [];
+	let changed = false;
+	for (const op of ops) {
+		if (!op.text) continue;
+		if (op.kind === "equal") {
+			oldNodes.push(cloneTextNode(oldNode, op.text));
+			newNodes.push(cloneTextNode(newNode, op.text));
+			continue;
+		}
+		changed = true;
+		if (op.kind === "delete") {
+			oldNodes.push(cloneTextNode(oldNode, op.text, "delete"));
+			continue;
+		}
+		newNodes.push(cloneTextNode(newNode, op.text, "insert"));
+	}
+	return {
+		changed,
+		newNodes: newNodes.length > 0 ? newNodes : [newNode],
+		oldNodes: oldNodes.length > 0 ? oldNodes : [oldNode]
+	};
+}
+function alignNodes(oldNodes, newNodes) {
+	const m = oldNodes.length;
+	const n = newNodes.length;
+	const dp = Array.from({ length: m + 1 }, () => Array.from({ length: n + 1 }).fill(0));
+	for (let i = 1; i <= m; i++) for (let j = 1; j <= n; j++) {
+		const skip = Math.max(dp[i - 1][j], dp[i][j - 1]);
+		const oldType = getNormalizedBlockType(oldNodes[i - 1]);
+		const newType = getNormalizedBlockType(newNodes[j - 1]);
+		if (oldType && oldType === newType) {
+			const score = nodesEqual(oldNodes[i - 1], newNodes[j - 1]) ? 2 : 1;
+			dp[i][j] = Math.max(skip, dp[i - 1][j - 1] + score);
+		} else dp[i][j] = skip;
+	}
+	const ops = [];
+	let i = m;
+	let j = n;
+	while (i > 0 && j > 0) {
+		const oldType = getNormalizedBlockType(oldNodes[i - 1]);
+		const newType = getNormalizedBlockType(newNodes[j - 1]);
+		if (oldType && oldType === newType) {
+			const exact = nodesEqual(oldNodes[i - 1], newNodes[j - 1]);
+			const score = exact ? 2 : 1;
+			if (dp[i][j] === dp[i - 1][j - 1] + score) {
+				ops.push(exact ? {
+					kind: "equal",
+					node: oldNodes[i - 1]
+				} : {
+					kind: "modify",
+					newNode: newNodes[j - 1],
+					oldNode: oldNodes[i - 1]
+				});
+				i--;
+				j--;
+				continue;
+			}
+		}
+		if (dp[i - 1][j] >= dp[i][j - 1]) {
+			ops.push({
+				kind: "delete",
+				node: oldNodes[i - 1]
+			});
+			i--;
+		} else {
+			ops.push({
+				kind: "insert",
+				node: newNodes[j - 1]
+			});
+			j--;
+		}
+	}
+	while (i > 0) ops.push({
+		kind: "delete",
+		node: oldNodes[--i]
+	});
+	while (j > 0) ops.push({
+		kind: "insert",
+		node: newNodes[--j]
+	});
+	return ops.reverse();
+}
+function diffChildrenInline(oldChildren, newChildren) {
+	const ops = alignNodes(oldChildren, newChildren);
+	const nextOldChildren = [];
+	const nextNewChildren = [];
+	let changed = false;
+	for (const op of ops) switch (op.kind) {
+		case "equal":
+			nextOldChildren.push(op.node);
+			nextNewChildren.push(op.node);
+			break;
+		case "delete":
+			changed = true;
+			nextOldChildren.push(decorateSubtree(op.node, "delete"));
+			break;
+		case "insert":
+			changed = true;
+			nextNewChildren.push(decorateSubtree(op.node, "insert"));
+			break;
+		case "modify": {
+			changed = true;
+			if (isTextNode(op.oldNode) && isTextNode(op.newNode)) {
+				const textDiff = splitTextNodeByCharDiff(op.oldNode, op.newNode);
+				nextOldChildren.push(...textDiff.oldNodes);
+				nextNewChildren.push(...textDiff.newNodes);
+				break;
+			}
+			const nested = diffNodeInline(op.oldNode, op.newNode);
+			nextOldChildren.push(nested.oldNode);
+			nextNewChildren.push(nested.newNode);
+			break;
+		}
+	}
+	return {
+		changed,
+		newChildren: nextNewChildren,
+		oldChildren: nextOldChildren
+	};
+}
+function diffNodeInline(oldNode, newNode) {
+	if (nodesEqual(oldNode, newNode)) return {
+		changed: false,
+		newNode,
+		oldNode
+	};
+	const oldChildren = getChildren(oldNode);
+	const newChildren = getChildren(newNode);
+	if (!oldChildren || !newChildren) return {
+		changed: true,
+		newNode,
+		oldNode
+	};
+	const childDiff = diffChildrenInline(oldChildren, newChildren);
+	if (!childDiff.changed) return {
+		changed: false,
+		newNode,
+		oldNode
+	};
+	return {
+		changed: true,
+		newNode: cloneNodeWithChildren(newNode, childDiff.newChildren),
+		oldNode: cloneNodeWithChildren(oldNode, childDiff.oldChildren)
+	};
+}
+function getRootChildren(state) {
+	return Array.isArray(state.root.children) ? [...state.root.children] : [];
+}
+function computeLexicalDiffRows(oldState, newState) {
+	const ops = alignNodes(getRootChildren(oldState), getRootChildren(newState));
+	const rows = [];
+	let index = 0;
+	while (index < ops.length) {
+		const op = ops[index];
+		if (op.kind === "equal") {
+			rows.push({
+				kind: "equal",
+				newCell: createCell(op.node),
+				oldCell: createCell(op.node)
+			});
+			index++;
+			continue;
+		}
+		if (op.kind === "modify") {
+			const diffed = diffNodeInline(op.oldNode, op.newNode);
+			rows.push({
+				kind: "modify",
+				newCell: createCell(diffed.newNode),
+				oldCell: createCell(diffed.oldNode)
+			});
+			index++;
+			continue;
+		}
+		const deletes = [];
+		const inserts = [];
+		while (index < ops.length && (ops[index].kind === "delete" || ops[index].kind === "insert")) {
+			const current = ops[index];
+			if (current.kind === "delete") deletes.push(current.node);
+			else if (current.kind === "insert") inserts.push(current.node);
+			index++;
+		}
+		const maxLength = Math.max(deletes.length, inserts.length);
+		for (let pairIndex = 0; pairIndex < maxLength; pairIndex++) {
+			const oldBlock = deletes[pairIndex] ?? null;
+			const newBlock = inserts[pairIndex] ?? null;
+			if (oldBlock && newBlock) {
+				rows.push({
+					kind: "modify",
+					newCell: createCell(newBlock),
+					oldCell: createCell(oldBlock)
+				});
+				continue;
+			}
+			if (oldBlock) {
+				rows.push({
+					kind: "delete",
+					newCell: null,
+					oldCell: createCell(oldBlock)
+				});
+				continue;
+			}
+			rows.push({
+				kind: "insert",
+				newCell: createCell(newBlock),
+				oldCell: null
+			});
+		}
+	}
+	return rows;
+}
+//#endregion
+//#region src/renderer/diff/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	body: css`
+    display: flex;
+    flex-direction: column;
+    background: ${cssVar.colorBgContainer};
+  `,
+	cell: css`
+    overflow: auto;
+    min-width: 0;
+    min-height: 24px;
+
+    > div {
+      width: 100%;
+      min-width: 0;
+    }
+  `,
+	cellOld: css``,
+	deleteCell: css`
+    background: color-mix(in srgb, ${cssVar.colorError} 10%, transparent);
+  `,
+	emptyCell: css`
+    background: ${cssVar.colorFillQuaternary};
+  `,
+	header: css`
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    border-block-end: 1px solid ${cssVar.colorBorderSecondary};
+    background: ${cssVar.colorFillQuaternary};
+  `,
+	headerCell: css`
+    padding-block: 8px;
+    padding-inline: 16px;
+
+    font-size: 12px;
+    font-weight: 600;
+    color: ${cssVar.colorTextSecondary};
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  `,
+	headerOld: css`
+    border-inline-end: 1px solid ${cssVar.colorBorderSecondary};
+  `,
+	insertCell: css`
+    background: color-mix(in srgb, ${cssVar.colorSuccess} 10%, transparent);
+  `,
+	root: css`
+    overflow: hidden;
+
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    border-radius: ${cssVar.borderRadiusSM};
+
+    font-size: 14px;
+
+    background: ${cssVar.colorBgContainer};
+  `,
+	row: css`
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  `
+}));
+//#endregion
+//#region src/renderer/LexicalDiff.tsx
+function wrapBlock(block) {
+	return { root: {
+		children: [block],
+		direction: "ltr",
+		format: "",
+		indent: 0,
+		type: "root",
+		version: 1
+	} };
+}
+function RowCell({ className, content }) {
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		children: content
+	});
+}
+function LexicalDiff({ oldValue, newValue, variant = "default", extraNodes, overrides, renderContext, labels, blockRenderers, renderBlockDiff, className, style }) {
+	const rows = useMemo(() => computeLexicalDiffRows(oldValue, newValue), [oldValue, newValue]);
+	const renderDefaultCell = (block) => {
+		if (!block) return null;
+		return /* @__PURE__ */ jsx(LexicalRenderer, {
+			extraNodes,
+			overrides,
+			renderContext,
+			value: wrapBlock(block),
+			variant
+		});
+	};
+	const renderRow = (row, index) => {
+		const blockType = row.oldCell?.blockType && row.newCell?.blockType ? row.oldCell.blockType === row.newCell.blockType ? row.oldCell.blockType : null : row.oldCell?.blockType ?? row.newCell?.blockType ?? null;
+		const baseBlockType = row.oldCell?.baseBlockType && row.newCell?.baseBlockType ? row.oldCell.baseBlockType === row.newCell.baseBlockType ? row.oldCell.baseBlockType : null : row.oldCell?.baseBlockType ?? row.newCell?.baseBlockType ?? null;
+		const context = {
+			baseBlockType,
+			blockType,
+			newBaseBlockType: row.newCell?.baseBlockType ?? null,
+			newBlockType: row.newCell?.blockType ?? null,
+			oldBaseBlockType: row.oldCell?.baseBlockType ?? null,
+			oldBlockType: row.oldCell?.blockType ?? null,
+			renderDefaultNew: () => renderDefaultCell(row.newCell?.block ?? null),
+			renderDefaultOld: () => renderDefaultCell(row.oldCell?.block ?? null),
+			row
+		};
+		const renderers = [
+			blockType ? blockRenderers?.[blockType] : void 0,
+			baseBlockType && baseBlockType !== blockType ? blockRenderers?.[baseBlockType] : void 0,
+			renderBlockDiff
+		];
+		let rendered;
+		for (const renderer of renderers) {
+			if (!renderer) continue;
+			const next = renderer(context);
+			if (next === null) continue;
+			rendered = next;
+			break;
+		}
+		const oldContent = rendered?.old ?? context.renderDefaultOld();
+		const newContent = rendered?.new ?? context.renderDefaultNew();
+		return /* @__PURE__ */ jsxs("div", {
+			className: styles.row,
+			children: [/* @__PURE__ */ jsx(RowCell, {
+				className: cx(styles.cell, styles.cellOld, !row.oldCell && styles.emptyCell, row.kind === "delete" && styles.deleteCell),
+				content: oldContent
+			}), /* @__PURE__ */ jsx(RowCell, {
+				className: cx(styles.cell, !row.newCell && styles.emptyCell, row.kind === "insert" && styles.insertCell),
+				content: newContent
+			})]
+		}, `row-${index}`);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(styles.root, className),
+		style,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: styles.header,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cx(styles.headerCell, styles.headerOld),
+				children: labels?.old ?? "Old"
+			}), /* @__PURE__ */ jsx("div", {
+				className: styles.headerCell,
+				children: labels?.new ?? "New"
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: styles.body,
+			children: rows.map(renderRow)
+		})]
+	});
+}
+//#endregion
+export { LexicalDiff, LexicalRenderer, createDefaultRenderers, loadLanguage, rendererNodes };