@lobehub/editor 4.15.1 → 4.16.0

package/es/plugins/codeblock/plugin/CodeHighlighterShiki.js

@@ -0,0 +1,415 @@
+import { $getHighlightNodes, getHighlightSerializeNode, isCodeLanguageLoaded, isCodeThemeLoaded, loadCodeLanguage, loadCodeTheme } from "./FacadeShiki.js";
+import invariant from "./invariant.js";
+import { $createLineBreakNode, $createPoint, $createTabNode, $createTextNode, $getCaretRange, $getCaretRangeInDirection, $getNodeByKey, $getSelection, $getSiblingCaret, $getTextPointCaret, $insertNodes, $isLineBreakNode, $isRangeSelection, $isTabNode, $isTextNode, $normalizeCaret, $setSelectionFromCaretRange, COMMAND_PRIORITY_LOW, INDENT_CONTENT_COMMAND, INSERT_TAB_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_TAB_COMMAND, MOVE_TO_END, MOVE_TO_START, OUTDENT_CONTENT_COMMAND, TextNode } from "lexical";
+import { mergeRegister } from "@lexical/utils";
+import { $getEndOfCodeInLine, $getFirstCodeNodeOfLine, $getLastCodeNodeOfLine, $getStartOfCodeInLine, $isCodeHighlightNode, $isCodeNode, CodeHighlightNode, CodeNode, DEFAULT_CODE_LANGUAGE } from "@lexical/code-core";
+const ShikiTokenizer = {
+	$tokenize(codeNode, language) {
+		return $getHighlightNodes(codeNode, language || this.defaultLanguage);
+	},
+	$tokenizeSerialized(code, language, theme) {
+		return getHighlightSerializeNode(code, language || this.defaultLanguage, toCodeTheme({ defaultTheme: theme || this.defaultTheme }));
+	},
+	defaultLanguage: DEFAULT_CODE_LANGUAGE,
+	defaultTheme: "lobe-theme"
+};
+function toCodeTheme(tokenizer) {
+	if (typeof tokenizer.defaultTheme === "string") return tokenizer.defaultTheme;
+	return tokenizer.defaultTheme.light + " " + tokenizer.defaultTheme.dark;
+}
+function $textNodeTransform(node, editor, tokenizer) {
+	const parentNode = node.getParent();
+	if ($isCodeNode(parentNode)) codeNodeTransform(parentNode, editor, tokenizer);
+	else if ($isCodeHighlightNode(node)) node.replace($createTextNode(node.__text));
+}
+function updateCodeGutter(node, editor) {
+	const codeElement = editor.getElementByKey(node.getKey());
+	if (codeElement === null) return;
+	const children = node.getChildren();
+	const childrenLength = children.length;
+	if (childrenLength === codeElement.__cachedChildrenLength) return;
+	codeElement.__cachedChildrenLength = childrenLength;
+	let gutter = "1";
+	let count = 1;
+	for (let i = 0; i < childrenLength; i++) if ($isLineBreakNode(children[i])) gutter += "\n" + ++count;
+	codeElement.dataset.gutter = gutter;
+}
+const MAX_CONCURRENT_HIGHLIGHTING = 2;
+const nodesCurrentlyHighlighting = /* @__PURE__ */ new Set();
+const waitingNodesCurrentlyHighlighting = /* @__PURE__ */ new Set();
+function codeNodeTransform(node, editor, tokenizer) {
+	const nodeKey = node.getKey();
+	let language = node.getLanguage();
+	if (!language) {
+		language = tokenizer.defaultLanguage;
+		node.setLanguage(language);
+	}
+	let theme = node.getTheme();
+	if (!theme) {
+		theme = toCodeTheme(tokenizer);
+		node.setTheme(theme);
+	}
+	let inFlight = false;
+	if (!isCodeThemeLoaded(theme)) {
+		loadCodeTheme(theme, editor, nodeKey);
+		inFlight = true;
+	}
+	if (isCodeLanguageLoaded(language)) {
+		if (!node.getIsSyntaxHighlightSupported()) node.setIsSyntaxHighlightSupported(true);
+	} else {
+		if (node.getIsSyntaxHighlightSupported()) node.setIsSyntaxHighlightSupported(false);
+		loadCodeLanguage(language, editor, nodeKey);
+		inFlight = true;
+	}
+	if (inFlight) return;
+	if (nodesCurrentlyHighlighting.has(nodeKey)) return;
+	if (nodesCurrentlyHighlighting.size > MAX_CONCURRENT_HIGHLIGHTING) {
+		waitingNodesCurrentlyHighlighting.add(nodeKey);
+		return;
+	}
+	nodesCurrentlyHighlighting.add(nodeKey);
+	editor.update(() => {
+		$updateAndRetainSelection(nodeKey, () => {
+			const currentNode = $getNodeByKey(nodeKey);
+			if (!$isCodeNode(currentNode) || !currentNode.isAttached()) return false;
+			const lang = currentNode.getLanguage() || tokenizer.defaultLanguage;
+			const highlightNodes = tokenizer.$tokenize(currentNode, lang);
+			const { from, to, nodesForReplacement } = getDiffRange(currentNode.getChildren(), highlightNodes);
+			if (from !== to || nodesForReplacement.length) {
+				node.splice(from, to - from, nodesForReplacement);
+				return true;
+			}
+			return false;
+		});
+	}, {
+		onUpdate: () => {
+			nodesCurrentlyHighlighting.delete(nodeKey);
+			if (nodesCurrentlyHighlighting.size < MAX_CONCURRENT_HIGHLIGHTING && waitingNodesCurrentlyHighlighting.size) {
+				const next = waitingNodesCurrentlyHighlighting.values().next().value;
+				if (!next) return;
+				waitingNodesCurrentlyHighlighting.delete(next);
+				requestAnimationFrame(() => {
+					editor.getEditorState().read(() => {
+						codeNodeTransform($getNodeByKey(next), editor, tokenizer);
+					});
+				});
+			}
+		},
+		skipTransforms: true
+	});
+}
+function $updateAndRetainSelection(nodeKey, updateFn) {
+	const node = $getNodeByKey(nodeKey);
+	if (!$isCodeNode(node) || !node.isAttached()) return;
+	const selection = $getSelection();
+	if (!$isRangeSelection(selection)) {
+		updateFn();
+		return;
+	}
+	const anchor = selection.anchor;
+	const anchorOffset = anchor.offset;
+	const isNewLineAnchor = anchor.type === "element" && $isLineBreakNode(node.getChildAtIndex(anchor.offset - 1));
+	let textOffset = 0;
+	if (!isNewLineAnchor) textOffset = anchorOffset + anchor.getNode().getPreviousSiblings().reduce((offset, _node) => {
+		return offset + _node.getTextContentSize();
+	}, 0);
+	if (!updateFn()) return;
+	if (isNewLineAnchor) {
+		anchor.getNode().select(anchorOffset, anchorOffset);
+		return;
+	}
+	node.getChildren().some((_node) => {
+		const isText = $isTextNode(_node);
+		if (isText || $isLineBreakNode(_node)) {
+			const textContentSize = _node.getTextContentSize();
+			if (isText && textContentSize >= textOffset) {
+				_node.select(textOffset, textOffset);
+				return true;
+			}
+			textOffset -= textContentSize;
+		}
+		return false;
+	});
+}
+function getDiffRange(prevNodes, nextNodes) {
+	let leadingMatch = 0;
+	while (leadingMatch < prevNodes.length) {
+		if (!isEqual(prevNodes[leadingMatch], nextNodes[leadingMatch])) break;
+		leadingMatch++;
+	}
+	const prevNodesLength = prevNodes.length;
+	const nextNodesLength = nextNodes.length;
+	const maxTrailingMatch = Math.min(prevNodesLength, nextNodesLength) - leadingMatch;
+	let trailingMatch = 0;
+	while (trailingMatch < maxTrailingMatch) {
+		trailingMatch++;
+		if (!isEqual(prevNodes[prevNodesLength - trailingMatch], nextNodes[nextNodesLength - trailingMatch])) {
+			trailingMatch--;
+			break;
+		}
+	}
+	const from = leadingMatch;
+	const to = prevNodesLength - trailingMatch;
+	return {
+		from,
+		nodesForReplacement: nextNodes.slice(leadingMatch, nextNodesLength - trailingMatch),
+		to
+	};
+}
+function isEqual(nodeA, nodeB) {
+	return $isCodeHighlightNode(nodeA) && $isCodeHighlightNode(nodeB) && nodeA.__text === nodeB.__text && nodeA.__highlightType === nodeB.__highlightType && nodeA.__style === nodeB.__style || $isTabNode(nodeA) && $isTabNode(nodeB) || $isLineBreakNode(nodeA) && $isLineBreakNode(nodeB);
+}
+/**
+* Returns a boolean.
+* Check that the selection span is within a single CodeNode.
+* This is used to guard against executing handlers that can only be
+* applied in a single CodeNode context
+*/
+function $isSelectionInCode(selection) {
+	if (!$isRangeSelection(selection)) return false;
+	const anchorNode = selection.anchor.getNode();
+	const maybeAnchorCodeNode = $isCodeNode(anchorNode) ? anchorNode : anchorNode.getParent();
+	const focusNode = selection.focus.getNode();
+	const maybeFocusCodeNode = $isCodeNode(focusNode) ? focusNode : focusNode.getParent();
+	return $isCodeNode(maybeAnchorCodeNode) && maybeAnchorCodeNode.is(maybeFocusCodeNode);
+}
+/**
+* Returns an Array of code lines
+* Take the sequence of LineBreakNode | TabNode | CodeHighlightNode forming
+* the selection and split it by LineBreakNode.
+* If the selection ends at the start of the last line, it is considered empty.
+* Empty lines are discarded.
+*/
+function $getCodeLines(selection) {
+	const nodes = selection.getNodes();
+	const lines = [];
+	if (nodes.length === 1 && $isCodeNode(nodes[0])) return lines;
+	let lastLine = [];
+	for (const node of nodes) {
+		invariant($isCodeHighlightNode(node) || $isTabNode(node) || $isLineBreakNode(node), "Expected selection to be inside CodeBlock and consisting of CodeHighlightNode, TabNode and LineBreakNode");
+		if ($isLineBreakNode(node)) {
+			if (lastLine.length > 0) {
+				lines.push(lastLine);
+				lastLine = [];
+			}
+		} else lastLine.push(node);
+	}
+	if (lastLine.length > 0) {
+		const selectionEnd = selection.isBackward() ? selection.anchor : selection.focus;
+		const lastPoint = $createPoint(lastLine[0].getKey(), 0, "text");
+		if (!selectionEnd.is(lastPoint)) lines.push(lastLine);
+	}
+	return lines;
+}
+function $handleTab(shiftKey) {
+	const selection = $getSelection();
+	if (!$isRangeSelection(selection) || !$isSelectionInCode(selection)) return null;
+	const indentOrOutdent = !shiftKey ? INDENT_CONTENT_COMMAND : OUTDENT_CONTENT_COMMAND;
+	const tabOrOutdent = !shiftKey ? INSERT_TAB_COMMAND : OUTDENT_CONTENT_COMMAND;
+	const anchor = selection.anchor;
+	const focus = selection.focus;
+	if (anchor.is(focus)) return tabOrOutdent;
+	const codeLines = $getCodeLines(selection);
+	if (codeLines.length !== 1) return indentOrOutdent;
+	const codeLine = codeLines[0];
+	const codeLineLength = codeLine.length;
+	invariant(codeLineLength !== 0, "$getCodeLines only extracts non-empty lines");
+	let selectionFirst;
+	let selectionLast;
+	if (selection.isBackward()) {
+		selectionFirst = focus;
+		selectionLast = anchor;
+	} else {
+		selectionFirst = anchor;
+		selectionLast = focus;
+	}
+	const firstOfLine = $getFirstCodeNodeOfLine(codeLine[0]);
+	const lastOfLine = $getLastCodeNodeOfLine(codeLine[0]);
+	const anchorOfLine = $createPoint(firstOfLine.getKey(), 0, "text");
+	const focusOfLine = $createPoint(lastOfLine.getKey(), lastOfLine.getTextContentSize(), "text");
+	if (selectionFirst.isBefore(anchorOfLine)) return indentOrOutdent;
+	if (focusOfLine.isBefore(selectionLast)) return indentOrOutdent;
+	if (anchorOfLine.isBefore(selectionFirst) || selectionLast.isBefore(focusOfLine)) return tabOrOutdent;
+	return indentOrOutdent;
+}
+function $handleMultilineIndent(type) {
+	const selection = $getSelection();
+	if (!$isRangeSelection(selection) || !$isSelectionInCode(selection)) return false;
+	const codeLines = $getCodeLines(selection);
+	const codeLinesLength = codeLines.length;
+	if (codeLinesLength === 0 && selection.isCollapsed()) {
+		if (type === INDENT_CONTENT_COMMAND) selection.insertNodes([$createTabNode()]);
+		return true;
+	}
+	if (codeLinesLength === 0 && type === INDENT_CONTENT_COMMAND && selection.getTextContent() === "\n") {
+		const tabNode = $createTabNode();
+		const lineBreakNode = $createLineBreakNode();
+		const direction = selection.isBackward() ? "previous" : "next";
+		selection.insertNodes([tabNode, lineBreakNode]);
+		$setSelectionFromCaretRange($getCaretRangeInDirection($getCaretRange($getTextPointCaret(tabNode, "next", 0), $normalizeCaret($getSiblingCaret(lineBreakNode, "next"))), direction));
+		return true;
+	}
+	for (let i = 0; i < codeLinesLength; i++) {
+		const line = codeLines[i];
+		if (line.length > 0) {
+			let firstOfLine = line[0];
+			if (i === 0) firstOfLine = $getFirstCodeNodeOfLine(firstOfLine);
+			if (type === INDENT_CONTENT_COMMAND) {
+				const tabNode = $createTabNode();
+				firstOfLine.insertBefore(tabNode);
+				if (i === 0) {
+					const anchorKey = selection.isBackward() ? "focus" : "anchor";
+					const anchorLine = $createPoint(firstOfLine.getKey(), 0, "text");
+					if (selection[anchorKey].is(anchorLine)) selection[anchorKey].set(tabNode.getKey(), 0, "text");
+				}
+			} else if ($isTabNode(firstOfLine)) firstOfLine.remove();
+		}
+	}
+	return true;
+}
+function $handleShiftLines(type, event) {
+	const selection = $getSelection();
+	if (!$isRangeSelection(selection)) return false;
+	const { anchor, focus } = selection;
+	const anchorOffset = anchor.offset;
+	const focusOffset = focus.offset;
+	const anchorNode = anchor.getNode();
+	const focusNode = focus.getNode();
+	const arrowIsUp = type === KEY_ARROW_UP_COMMAND;
+	if (!$isSelectionInCode(selection) || !($isCodeHighlightNode(anchorNode) || $isTabNode(anchorNode)) || !($isCodeHighlightNode(focusNode) || $isTabNode(focusNode))) return false;
+	if (!event.altKey) {
+		if (selection.isCollapsed()) {
+			const codeNode = anchorNode.getParentOrThrow();
+			if (arrowIsUp && anchorOffset === 0 && anchorNode.getPreviousSibling() === null) {
+				if (codeNode.getPreviousSibling() === null) {
+					codeNode.selectPrevious();
+					event.preventDefault();
+					return true;
+				}
+			} else if (!arrowIsUp && anchorOffset === anchorNode.getTextContentSize() && anchorNode.getNextSibling() === null) {
+				if (codeNode.getNextSibling() === null) {
+					codeNode.selectNext();
+					event.preventDefault();
+					return true;
+				}
+			}
+		}
+		return false;
+	}
+	let start;
+	let end;
+	if (anchorNode.isBefore(focusNode)) {
+		start = $getFirstCodeNodeOfLine(anchorNode);
+		end = $getLastCodeNodeOfLine(focusNode);
+	} else {
+		start = $getFirstCodeNodeOfLine(focusNode);
+		end = $getLastCodeNodeOfLine(anchorNode);
+	}
+	if (start === null || end === null) return false;
+	const range = start.getNodesBetween(end);
+	for (const node of range) if (!$isCodeHighlightNode(node) && !$isTabNode(node) && !$isLineBreakNode(node)) return false;
+	event.preventDefault();
+	event.stopPropagation();
+	const linebreak = arrowIsUp ? start.getPreviousSibling() : end.getNextSibling();
+	if (!$isLineBreakNode(linebreak)) return true;
+	const sibling = arrowIsUp ? linebreak.getPreviousSibling() : linebreak.getNextSibling();
+	if (sibling === null) return true;
+	const maybeInsertionPoint = $isCodeHighlightNode(sibling) || $isTabNode(sibling) || $isLineBreakNode(sibling) ? arrowIsUp ? $getFirstCodeNodeOfLine(sibling) : $getLastCodeNodeOfLine(sibling) : null;
+	let insertionPoint = maybeInsertionPoint !== null ? maybeInsertionPoint : sibling;
+	linebreak.remove();
+	range.forEach((node) => node.remove());
+	if (type === KEY_ARROW_UP_COMMAND) {
+		range.forEach((node) => insertionPoint.insertBefore(node));
+		insertionPoint.insertBefore(linebreak);
+	} else {
+		insertionPoint.insertAfter(linebreak);
+		insertionPoint = linebreak;
+		range.forEach((node) => {
+			insertionPoint.insertAfter(node);
+			insertionPoint = node;
+		});
+	}
+	selection.setTextNodeRange(anchorNode, anchorOffset, focusNode, focusOffset);
+	return true;
+}
+function $handleMoveTo(type, event) {
+	const selection = $getSelection();
+	if (!$isRangeSelection(selection)) return false;
+	const { anchor, focus } = selection;
+	const anchorNode = anchor.getNode();
+	const focusNode = focus.getNode();
+	const isMoveToStart = type === MOVE_TO_START;
+	if (!$isSelectionInCode(selection) || !($isCodeHighlightNode(anchorNode) || $isTabNode(anchorNode)) || !($isCodeHighlightNode(focusNode) || $isTabNode(focusNode))) return false;
+	if (isMoveToStart) {
+		const start = $getStartOfCodeInLine(focusNode, focus.offset);
+		if (start !== null) {
+			const { node, offset } = start;
+			if ($isLineBreakNode(node)) node.selectNext(0, 0);
+			else selection.setTextNodeRange(node, offset, node, offset);
+		} else focusNode.getParentOrThrow().selectStart();
+	} else $getEndOfCodeInLine(focusNode).select();
+	event.preventDefault();
+	event.stopPropagation();
+	return true;
+}
+function registerCodeHighlighting(editor, tokenizer) {
+	if (!editor.hasNodes([CodeNode, CodeHighlightNode])) throw new Error("CodeHighlightPlugin: CodeNode or CodeHighlightNode not registered on editor");
+	if (tokenizer == null) tokenizer = ShikiTokenizer;
+	const registrations = [];
+	if (editor._headless !== true) registrations.push(editor.registerMutationListener(CodeNode, (mutations) => {
+		editor.update(() => {
+			for (const [key, type] of mutations) if (type !== "destroyed") {
+				const node = $getNodeByKey(key);
+				if (node !== null) updateCodeGutter(node, editor);
+			}
+		});
+	}, { skipInitialization: false }));
+	registrations.push(editor.registerMutationListener(CodeNode, (mutations) => {
+		editor.update(() => {
+			for (const [key, type] of mutations) if (type !== "destroyed") {
+				const node = $getNodeByKey(key);
+				if (node !== null) {
+					const codeNode = node;
+					if (codeNode.getTheme()?.endsWith(" needUpdate")) editor.update(() => {
+						codeNode.setTheme(codeNode.getTheme()?.replace(" needUpdate", "") || "");
+					});
+				}
+			}
+		});
+	}, { skipInitialization: false }), editor.registerNodeTransform(CodeNode, (node) => codeNodeTransform(node, editor, tokenizer)), editor.registerNodeTransform(TextNode, (node) => $textNodeTransform(node, editor, tokenizer)), editor.registerNodeTransform(CodeHighlightNode, (node) => $textNodeTransform(node, editor, tokenizer)), editor.registerCommand(KEY_TAB_COMMAND, (event) => {
+		const command = $handleTab(event.shiftKey);
+		if (command === null) return false;
+		event.preventDefault();
+		editor.dispatchCommand(command, void 0);
+		return true;
+	}, COMMAND_PRIORITY_LOW), editor.registerCommand(INSERT_TAB_COMMAND, () => {
+		if (!$isSelectionInCode($getSelection())) return false;
+		$insertNodes([$createTabNode()]);
+		return true;
+	}, COMMAND_PRIORITY_LOW), editor.registerCommand(INDENT_CONTENT_COMMAND, () => $handleMultilineIndent(INDENT_CONTENT_COMMAND), COMMAND_PRIORITY_LOW), editor.registerCommand(OUTDENT_CONTENT_COMMAND, () => $handleMultilineIndent(OUTDENT_CONTENT_COMMAND), COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_UP_COMMAND, (event) => {
+		const selection = $getSelection();
+		if (!$isRangeSelection(selection)) return false;
+		const { anchor } = selection;
+		const anchorNode = anchor.getNode();
+		if (!$isSelectionInCode(selection)) return false;
+		if (selection.isCollapsed() && anchor.offset === 0 && anchorNode.getPreviousSibling() === null && $isCodeNode(anchorNode.getParentOrThrow())) {
+			event.preventDefault();
+			return true;
+		}
+		return $handleShiftLines(KEY_ARROW_UP_COMMAND, event);
+	}, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_DOWN_COMMAND, (event) => {
+		const selection = $getSelection();
+		if (!$isRangeSelection(selection)) return false;
+		const { anchor } = selection;
+		const anchorNode = anchor.getNode();
+		if (!$isSelectionInCode(selection)) return false;
+		if (selection.isCollapsed() && anchor.offset === anchorNode.getTextContentSize() && anchorNode.getNextSibling() === null && $isCodeNode(anchorNode.getParentOrThrow())) {
+			event.preventDefault();
+			return true;
+		}
+		return $handleShiftLines(KEY_ARROW_DOWN_COMMAND, event);
+	}, COMMAND_PRIORITY_LOW), editor.registerCommand(MOVE_TO_START, (event) => $handleMoveTo(MOVE_TO_START, event), COMMAND_PRIORITY_LOW), editor.registerCommand(MOVE_TO_END, (event) => $handleMoveTo(MOVE_TO_END, event), COMMAND_PRIORITY_LOW));
+	return mergeRegister(...registrations);
+}
+//#endregion
+export { ShikiTokenizer, registerCodeHighlighting, toCodeTheme };

package/es/plugins/codeblock/plugin/FacadeShiki.js

@@ -0,0 +1,193 @@
+import { INodeHelper, init_helper } from "../../../editor-kernel/inode/helper.js";
+import { ShikiLobeTheme } from "@lobehub/ui";
+import { $createLineBreakNode, $createTabNode, $getNodeByKey } from "lexical";
+import { $createCodeHighlightNode, $isCodeNode } from "@lexical/code-core";
+import { bundledLanguagesInfo, bundledThemesInfo } from "shiki";
+import { createHighlighterCoreSync, isSpecialLang, isSpecialTheme, stringifyTokenStyle } from "@shikijs/core";
+import { createJavaScriptRegexEngine } from "@shikijs/engine-javascript";
+//#region src/plugins/codeblock/plugin/FacadeShiki.ts
+init_helper();
+const shiki = createHighlighterCoreSync({
+	engine: createJavaScriptRegexEngine(),
+	langs: [],
+	themes: []
+});
+shiki.loadTheme(ShikiLobeTheme);
+function getDiffedLanguage(language) {
+	const diffLanguageMatch = /^diff-([\w-]+)/i.exec(language);
+	return diffLanguageMatch ? diffLanguageMatch[1] : null;
+}
+function isCodeLanguageLoaded(language) {
+	const langId = getDiffedLanguage(language) || language;
+	if (isSpecialLang(langId)) return true;
+	return shiki.getLoadedLanguages().includes(langId);
+}
+function loadCodeLanguage(language, editor, codeNodeKey) {
+	const diffedLanguage = getDiffedLanguage(language);
+	const langId = diffedLanguage ? diffedLanguage : language;
+	if (!isCodeLanguageLoaded(langId)) {
+		const languageInfo = bundledLanguagesInfo.find((desc) => desc.id === langId || desc.aliases && desc.aliases.includes(langId));
+		if (languageInfo) shiki.loadLanguage(languageInfo.import()).then(() => {
+			if (editor && codeNodeKey) editor.update(() => {
+				const codeNode = $getNodeByKey(codeNodeKey);
+				if ($isCodeNode(codeNode) && codeNode.getLanguage() === language && !codeNode.getIsSyntaxHighlightSupported()) codeNode.setIsSyntaxHighlightSupported(true);
+			});
+		});
+	}
+}
+function _isCodeThemeLoaded(theme) {
+	const themeId = theme;
+	if (isSpecialTheme(themeId)) return true;
+	return shiki.getLoadedThemes().includes(themeId);
+}
+function isCodeThemeLoaded(theme) {
+	return theme.split(" ").every((t) => _isCodeThemeLoaded(t));
+}
+async function _loadCodeTheme(theme, editor, codeNodeKey) {
+	if (!isCodeThemeLoaded(theme)) {
+		if (theme === "lobe-theme") {
+			if (editor && codeNodeKey) editor.update(() => {
+				const codeNode = $getNodeByKey(codeNodeKey);
+				if ($isCodeNode(codeNode)) codeNode.markDirty();
+			});
+			return;
+		}
+		const themeInfo = bundledThemesInfo.find((info) => info.id === theme);
+		if (themeInfo) shiki.loadTheme(themeInfo.import()).then(() => {
+			if (editor && codeNodeKey) editor.update(() => {
+				const codeNode = $getNodeByKey(codeNodeKey);
+				if ($isCodeNode(codeNode)) codeNode.markDirty();
+			});
+		});
+	}
+}
+async function loadCodeTheme(theme, editor, codeNodeKey) {
+	const themes = theme.split(" ");
+	await Promise.all(themes.map((t) => _loadCodeTheme(t, editor, codeNodeKey)));
+}
+function getTokenStyleObject(token) {
+	let style = "";
+	if (token.color) style += `color: ${token.color};`;
+	if (token.bgColor) style += `background-color: ${token.bgColor};`;
+	return style;
+}
+function mapTokensToLexicalSerialized(tokens, diff) {
+	const nodes = [];
+	tokens.forEach((line, idx) => {
+		if (idx) nodes.push({
+			type: "linebreak",
+			version: 1
+		});
+		line.forEach((token, tidx) => {
+			let text = token.content;
+			if (diff && tidx === 0 && text.length > 0) {
+				const prefixes = [
+					"+",
+					"-",
+					">",
+					"<",
+					" "
+				];
+				const prefixTypes = [
+					"inserted",
+					"deleted",
+					"inserted",
+					"deleted",
+					"unchanged"
+				];
+				const prefixIndex = prefixes.indexOf(text[0]);
+				if (prefixIndex !== -1) {
+					nodes.push(INodeHelper.createLikeTextNode("code-highlight", prefixes[prefixIndex], { highlightType: prefixTypes[prefixIndex] }));
+					text = text.slice(1);
+				}
+			}
+			text.split("	").forEach((part, pidx) => {
+				if (pidx) nodes.push(INodeHelper.createLikeTextNode("tab", "	"));
+				if (part !== "") {
+					const node = INodeHelper.createLikeTextNode("code-highlight", part);
+					node.style = stringifyTokenStyle(token.htmlStyle || getTokenStyleObject(token));
+					nodes.push(node);
+				}
+			});
+		});
+	});
+	return nodes;
+}
+function mapTokensToLexicalStructure(tokens, diff) {
+	const nodes = [];
+	tokens.forEach((line, idx) => {
+		if (idx) nodes.push($createLineBreakNode());
+		line.forEach((token, tidx) => {
+			let text = token.content;
+			if (diff && tidx === 0 && text.length > 0) {
+				const prefixes = [
+					"+",
+					"-",
+					">",
+					"<",
+					" "
+				];
+				const prefixTypes = [
+					"inserted",
+					"deleted",
+					"inserted",
+					"deleted",
+					"unchanged"
+				];
+				const prefixIndex = prefixes.indexOf(text[0]);
+				if (prefixIndex !== -1) {
+					nodes.push($createCodeHighlightNode(prefixes[prefixIndex], prefixTypes[prefixIndex]));
+					text = text.slice(1);
+				}
+			}
+			text.split("	").forEach((part, pidx) => {
+				if (pidx) nodes.push($createTabNode());
+				if (part !== "") {
+					const node = $createCodeHighlightNode(part);
+					const style = stringifyTokenStyle(token.htmlStyle || getTokenStyleObject(token));
+					node.setStyle(style);
+					nodes.push(node);
+				}
+			});
+		});
+	});
+	return nodes;
+}
+const DIFF_LANGUAGE_REGEX = /^diff-([\w-]+)/i;
+function getHighlightSerializeNode(code, language, theme = "lobe-theme") {
+	const diffLanguageMatch = DIFF_LANGUAGE_REGEX.exec(language);
+	const themes = theme.split(" ");
+	const options = themes.length > 1 ? {
+		defaultColor: false,
+		lang: diffLanguageMatch ? diffLanguageMatch[1] : language,
+		themes: {
+			dark: themes[1],
+			light: themes[0]
+		}
+	} : {
+		lang: language,
+		theme: themes[0]
+	};
+	const { tokens } = shiki.codeToTokens(code, options);
+	return mapTokensToLexicalSerialized(tokens, !!diffLanguageMatch);
+}
+function $getHighlightNodes(codeNode, language) {
+	const diffLanguageMatch = DIFF_LANGUAGE_REGEX.exec(language);
+	const code = codeNode.getTextContent();
+	const themes = (codeNode.getTheme() || "lobe-theme").split(" ");
+	const options = themes.length > 1 ? {
+		defaultColor: false,
+		lang: diffLanguageMatch ? diffLanguageMatch[1] : language,
+		themes: {
+			dark: themes[1],
+			light: themes[0]
+		}
+	} : {
+		lang: language,
+		theme: themes[0]
+	};
+	const { tokens } = shiki.codeToTokens(code, options);
+	return mapTokensToLexicalStructure(tokens, !!diffLanguageMatch);
+}
+//#endregion
+export { $getHighlightNodes, getHighlightSerializeNode, isCodeLanguageLoaded, isCodeThemeLoaded, loadCodeLanguage, loadCodeTheme };

package/es/plugins/codeblock/plugin/index.d.ts

@@ -0,0 +1,16 @@
+import { IEditorPluginConstructor } from "../../../types/kernel.js";
+//#region src/plugins/codeblock/plugin/index.d.ts
+interface CodeblockPluginOptions {
+  /** Shiki theme name to use for syntax highlighting */
+  shikiTheme?: string | {
+    dark: string;
+    light: string;
+  };
+  /** Custom CSS theme configuration */
+  theme?: {
+    code?: string;
+  };
+}
+declare const CodeblockPlugin: IEditorPluginConstructor<CodeblockPluginOptions>;
+//#endregion
+export { CodeblockPlugin, CodeblockPluginOptions };