@lobehub/editor 4.15.1 → 4.15.2

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

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

@@ -0,0 +1,157 @@
+import { INodeHelper, init_helper } from "../../../editor-kernel/inode/helper.js";
+import { KernelPlugin, init_plugin } from "../../../editor-kernel/plugin.js";
+import { ILitexmlService } from "../../litexml/service/litexml-service.js";
+import { IMarkdownShortCutService } from "../../markdown/service/shortcut.js";
+import { getCodeLanguageByInput } from "../utils/language.js";
+import { registerCodeHighlighting, toCodeTheme } from "./CodeHighlighterShiki.js";
+import { CustomShikiTokenizer, registerCodeCommand } from "../command/index.js";
+import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR, PASTE_COMMAND, TabNode } from "lexical";
+import { $createCodeNode, $isCodeHighlightNode, $isCodeNode, CodeHighlightNode, CodeNode } from "@lexical/code-core";
+//#region src/plugins/codeblock/plugin/index.ts
+init_helper();
+init_plugin();
+const origin = CodeNode.importDOM;
+const LANGUAGE_DATA_ATTRIBUTE = "data-language";
+const MAX_LENGTH = 8e3;
+function $convertPreElement(domNode) {
+	const language = domNode.getAttribute(LANGUAGE_DATA_ATTRIBUTE);
+	if (domNode.innerHTML.length > MAX_LENGTH) return { node: null };
+	return { node: $createCodeNode(language) };
+}
+CodeNode.importDOM = () => {
+	const node = origin();
+	if (node) node.pre = () => ({
+		conversion: $convertPreElement,
+		priority: 0
+	});
+	return node;
+};
+function toMarkdownTheme(theme) {
+	if (!theme) return "";
+	if (typeof theme === "string") return theme;
+	return `${theme.light} ${theme.dark}`;
+}
+function isHeadlessEditor(editor) {
+	return editor._headless === true;
+}
+const CodeblockPlugin = class extends KernelPlugin {
+	static {
+		this.pluginName = "CodeblockPlugin";
+	}
+	constructor(kernel, config = {}) {
+		super();
+		this.kernel = kernel;
+		this.config = config;
+		kernel.registerNodes([CodeNode, CodeHighlightNode]);
+		kernel.registerThemes({ code: config.theme?.code || "editor-code" });
+		if (this.config?.shikiTheme) CustomShikiTokenizer.defaultTheme = this.config?.shikiTheme;
+	}
+	onInit(editor) {
+		if (!isHeadlessEditor(editor)) if (this.config?.shikiTheme) this.register(registerCodeHighlighting(editor, CustomShikiTokenizer));
+		else this.register(registerCodeHighlighting(editor));
+		this.register(registerCodeCommand(editor));
+		if (!isHeadlessEditor(editor)) this.register(editor.registerCommand(PASTE_COMMAND, (event) => {
+			if (!(event instanceof ClipboardEvent)) return false;
+			const clipboardData = event.clipboardData;
+			if (!clipboardData) return false;
+			const isInHighlightNodeSelection = editor.getEditorState().read(() => {
+				const sel = $getSelection();
+				if (!$isRangeSelection(sel)) return false;
+				let node = sel.focus.getNode();
+				while (node) {
+					if ($isCodeHighlightNode(node) || $isCodeNode(node)) return sel;
+					node = node.getParent();
+				}
+				return false;
+			});
+			if (isInHighlightNodeSelection) {
+				const rawText = clipboardData.getData("text/plain").trimEnd() || clipboardData.getData("text/uri-list").trimEnd();
+				editor.update(() => {
+					isInHighlightNodeSelection.insertRawText(rawText);
+				});
+				return true;
+			}
+			return false;
+		}, COMMAND_PRIORITY_EDITOR));
+		this.registerMarkdown();
+		this.registerLiteXml();
+	}
+	registerLiteXml() {
+		const litexmlService = this.kernel.requireService(ILitexmlService);
+		if (!litexmlService) return;
+		litexmlService.registerXMLWriter(CodeNode.getType(), (node, ctx) => {
+			const codeNode = node;
+			return ctx.createXmlNode("code", { lang: codeNode.getLanguage() || "plaintext" }, codeNode.getTextContent());
+		});
+		litexmlService.registerXMLReader("code", (xmlElment, children) => {
+			const text = children.map((v) => v.text || "").join("");
+			return INodeHelper.createElementNode(CodeNode.getType(), {
+				children: text.split("\n").flatMap((text, index, arr) => {
+					const textNode = INodeHelper.createTextNode(text);
+					textNode.type = "code-highlight";
+					if (index === arr.length - 1) return textNode;
+					return [textNode, {
+						type: "linebreak",
+						version: 1
+					}];
+				}).flat(),
+				direction: "ltr",
+				format: "",
+				indent: 0,
+				language: xmlElment.getAttribute("lang"),
+				textStyle: "--shiki-dark:var(--color-info);--shiki-light:var(--color-info)",
+				theme: `${toMarkdownTheme(this.config?.shikiTheme)} needUpdate`,
+				version: 1
+			});
+		});
+	}
+	registerMarkdown() {
+		const markdownService = this.kernel.requireService(IMarkdownShortCutService);
+		if (!markdownService) return;
+		markdownService.registerMarkdownShortCut({
+			regExp: /^(```|···)(.+)?$/,
+			replace: (parentNode, _, match) => {
+				const code = $createCodeNode(getCodeLanguageByInput(match[2]), toCodeTheme(CustomShikiTokenizer));
+				parentNode.replace(code);
+				code.selectStart();
+			},
+			trigger: "enter",
+			type: "element"
+		});
+		markdownService.registerMarkdownWriter(CodeNode.getType(), (ctx, node) => {
+			if ($isCodeNode(node)) ctx.wrap("```" + (node.getLanguage() || "") + "\n", "\n```\n");
+		});
+		markdownService.registerMarkdownWriter(TabNode.getType(), (ctx) => {
+			ctx.appendLine("  ");
+		});
+		markdownService.registerMarkdownWriter(CodeHighlightNode.getType(), (ctx, node) => {
+			if ($isCodeHighlightNode(node)) ctx.appendLine(node.getTextContent());
+		});
+		markdownService.registerMarkdownWriter("linebreak", (ctx, node) => {
+			if ($isCodeNode(node.getParent())) ctx.appendLine("\n");
+		});
+		markdownService.registerMarkdownReader("code", (node) => {
+			const language = node.lang ? getCodeLanguageByInput(node.lang) : "plaintext";
+			return INodeHelper.createElementNode("code", {
+				children: node.value.split("\n").flatMap((text, index, arr) => {
+					const textNode = INodeHelper.createTextNode(text);
+					textNode.type = "code-highlight";
+					if (index === arr.length - 1) return textNode;
+					return [textNode, {
+						type: "linebreak",
+						version: 1
+					}];
+				}).flat(),
+				direction: "ltr",
+				format: "",
+				indent: 0,
+				language,
+				textStyle: "--shiki-dark:var(--color-info);--shiki-light:var(--color-info)",
+				theme: `${toMarkdownTheme(this.config?.shikiTheme)} needUpdate`,
+				version: 1
+			});
+		});
+	}
+};
+//#endregion
+export { CodeblockPlugin };

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

@@ -0,0 +1,14 @@
+//#region src/plugins/codeblock/plugin/invariant.ts
+/**
+* Copyright (c) Meta Platforms, Inc. and affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
+function invariant(cond, message) {
+	if (cond) return;
+	throw new Error("Internal Lexical error: invariant() is meant to be replaced at compile time. There is no runtime version. Error: " + message);
+}
+//#endregion
+export { invariant as default };

package/es/plugins/codeblock/react/ReactCodeblockPlugin.d.ts

@@ -0,0 +1,7 @@
+import { ReactCodeblockPluginProps } from "./type.js";
+import { FC } from "react";
+
+//#region src/plugins/codeblock/react/ReactCodeblockPlugin.d.ts
+declare const ReactCodeblockPlugin: FC<ReactCodeblockPluginProps>;
+//#endregion
+export { ReactCodeblockPlugin };

package/es/plugins/codeblock/react/ReactCodeblockPlugin.js

@@ -0,0 +1,27 @@
+"use client";
+import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context.js";
+import { MarkdownPlugin } from "../../markdown/plugin/index.js";
+import { CodeblockPlugin } from "../plugin/index.js";
+import { styles } from "./style.js";
+import { useLayoutEffect } from "react";
+import { cx } from "antd-style";
+//#region src/plugins/codeblock/react/ReactCodeblockPlugin.tsx
+const ReactCodeblockPlugin = ({ theme, shikiTheme }) => {
+	const [editor] = useLexicalComposerContext();
+	useLayoutEffect(() => {
+		editor.registerPlugin(MarkdownPlugin);
+		editor.registerPlugin(CodeblockPlugin, {
+			shikiTheme: shikiTheme || "lobe-theme",
+			theme: theme || { code: styles.code }
+		});
+	}, [
+		cx(styles.code),
+		editor,
+		shikiTheme,
+		theme
+	]);
+	return null;
+};
+ReactCodeblockPlugin.displayName = "ReactCodeblockPlugin";
+//#endregion
+export { ReactCodeblockPlugin as default };

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

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

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

@@ -0,0 +1,58 @@
+import { createStaticStyles } from "antd-style";
+//#region src/plugins/codeblock/react/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	code: css`
+    position: relative;
+
+    overflow: hidden;
+    display: block;
+
+    width: 100%;
+    margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);
+    padding: 16px;
+    border-radius: var(--lobe-markdown-border-radius);
+
+    font-family: ${cssVar.fontFamilyCode};
+    font-size: calc(var(--lobe-markdown-font-size) * 0.85);
+
+    background: ${cssVar.colorFillTertiary} !important;
+    box-shadow: 0 0 0 1px var(--lobe-markdown-border-color) inset;
+
+    &::after {
+      content: attr(data-language);
+
+      position: absolute;
+      z-index: 3;
+      inset-block-end: 8px;
+      inset-inline-end: 8px;
+
+      display: block;
+
+      padding-block: 1px;
+      padding-inline: 7px;
+      border-radius: ${cssVar.borderRadius};
+
+      font-family: ${cssVar.fontFamilyCode};
+      font-size: 12px;
+      color: ${cssVar.colorTextSecondary};
+
+      opacity: 0;
+      background: ${cssVar.colorFillQuaternary};
+      backdrop-filter: blur(8px);
+      backdrop-filter: blur(8px);
+
+      transition: opacity 0.1s;
+    }
+
+    &:hover {
+      &::after {
+        opacity: 1;
+      }
+    }
+  `,
+	noBackground: css`
+    background: transparent !important;
+  `
+}));
+//#endregion
+export { styles };

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

@@ -0,0 +1,8 @@
+import { CodeblockPluginOptions } from "../plugin/index.js";
+//#region src/plugins/codeblock/react/type.d.ts
+interface ReactCodeblockPluginProps extends CodeblockPluginOptions {
+  className?: string;
+  shikiTheme?: string;
+}
+//#endregion
+export { ReactCodeblockPluginProps };

package/es/plugins/codeblock/utils/language.js

@@ -0,0 +1,9 @@
+import { bundledLanguagesInfo } from "shiki";
+//#region src/plugins/codeblock/utils/language.ts
+function getCodeLanguageByInput(input) {
+	if (!input) return "plaintext";
+	const inputLang = input.toLocaleLowerCase();
+	return bundledLanguagesInfo.find((lang) => lang.id === inputLang || lang.aliases?.includes(inputLang))?.id || "plaintext";
+}
+//#endregion
+export { getCodeLanguageByInput };

package/es/plugins/codemirror-block/command/index.d.ts

@@ -0,0 +1,13 @@
+import * as _$lexical from "lexical";
+import { LexicalEditor } from "lexical";
+
+//#region src/plugins/codemirror-block/command/index.d.ts
+declare const INSERT_CODEMIRROR_COMMAND: _$lexical.LexicalCommand<unknown>;
+declare const SELECT_BEFORE_CODEMIRROR_COMMAND: _$lexical.LexicalCommand<{
+  key: string;
+}>;
+declare const SELECT_AFTER_CODEMIRROR_COMMAND: _$lexical.LexicalCommand<{
+  key: string;
+}>;
+//#endregion
+export { INSERT_CODEMIRROR_COMMAND, SELECT_AFTER_CODEMIRROR_COMMAND, SELECT_BEFORE_CODEMIRROR_COMMAND };

package/es/plugins/codemirror-block/command/index.js

@@ -0,0 +1,67 @@
+import { $createCodeMirrorNode, $isCodeMirrorNode } from "../node/CodeMirrorNode.js";
+import { UPDATE_CODEBLOCK_LANG } from "../../codeblock/command/index.js";
+import { $createNodeSelection, $createParagraphNode, $getNodeByKey, $getSelection, $insertNodes, $isRangeSelection, $setSelection, COMMAND_PRIORITY_EDITOR, createCommand } from "lexical";
+import { $findMatchingParent, mergeRegister } from "@lexical/utils";
+//#region src/plugins/codemirror-block/command/index.ts
+const INSERT_CODEMIRROR_COMMAND = createCommand("INSERT_CODEMIRROR_COMMAND");
+const SELECT_BEFORE_CODEMIRROR_COMMAND = createCommand("SELECT_BEFORE_CODEMIRROR_COMMAND");
+const SELECT_AFTER_CODEMIRROR_COMMAND = createCommand("SELECT_AFTER_CODEMIRROR_COMMAND");
+function registerCodeMirrorCommand(editor) {
+	return mergeRegister(editor.registerCommand(INSERT_CODEMIRROR_COMMAND, () => {
+		editor.update(() => {
+			const codeMirrorNode = $createCodeMirrorNode("", "");
+			$insertNodes([codeMirrorNode]);
+			const selection = $createNodeSelection();
+			selection.add(codeMirrorNode.getKey());
+			$setSelection(selection);
+		});
+		return true;
+	}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(UPDATE_CODEBLOCK_LANG, (payload) => {
+		const codeMirrorNode = editor.getEditorState().read(() => {
+			const selection = $getSelection();
+			if ($isRangeSelection(selection)) if (selection.isCollapsed()) return $findMatchingParent(selection.anchor.getNode(), $isCodeMirrorNode);
+			else {
+				const anchor = $findMatchingParent(selection.anchor.getNode(), $isCodeMirrorNode);
+				const focus = $findMatchingParent(selection.focus.getNode(), $isCodeMirrorNode);
+				if (anchor && focus && anchor === focus) return anchor;
+				return null;
+			}
+			return false;
+		});
+		if (!codeMirrorNode) return false;
+		queueMicrotask(() => {
+			editor.update(() => {
+				if ($isCodeMirrorNode(codeMirrorNode)) codeMirrorNode.setLang(payload.lang);
+			});
+		});
+		return true;
+	}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(SELECT_BEFORE_CODEMIRROR_COMMAND, (payload) => {
+		editor.update(() => {
+			const node = $getNodeByKey(payload.key);
+			if (!node) return;
+			const prevNode = node.getPreviousSibling();
+			const sel = prevNode?.selectEnd();
+			console.info("SELECT_BEFORE_CODEMIRROR_COMMAND", prevNode, sel);
+			if (sel) $setSelection(sel);
+			editor.focus();
+		});
+		return false;
+	}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(SELECT_AFTER_CODEMIRROR_COMMAND, (payload) => {
+		editor.update(() => {
+			const node = $getNodeByKey(payload.key);
+			if (!node) return;
+			const selection = node.getNextSibling()?.selectStart();
+			if (selection) $setSelection(selection);
+			else {
+				const paragraph = $createParagraphNode();
+				node.insertAfter(paragraph);
+				const paragraphSelection = paragraph.selectStart();
+				if (paragraphSelection) $setSelection(paragraphSelection);
+			}
+			editor.focus();
+		});
+		return false;
+	}, COMMAND_PRIORITY_EDITOR));
+}
+//#endregion
+export { INSERT_CODEMIRROR_COMMAND, SELECT_AFTER_CODEMIRROR_COMMAND, SELECT_BEFORE_CODEMIRROR_COMMAND, registerCodeMirrorCommand };

package/es/plugins/codemirror-block/index.d.ts

@@ -0,0 +1,3 @@
+import { INSERT_CODEMIRROR_COMMAND, SELECT_AFTER_CODEMIRROR_COMMAND, SELECT_BEFORE_CODEMIRROR_COMMAND } from "./command/index.js";
+import { CodemirrorPlugin, CodemirrorPluginOptions } from "./plugin/index.js";
+import { ReactCodemirrorPlugin } from "./react/ReactCodemirrorNode.js";

package/es/plugins/codemirror-block/lib/mode.js

@@ -0,0 +1,8 @@
+import { LANGUAGES } from "../../../codemirror/constants.js";
+//#region src/plugins/codemirror-block/lib/mode.ts
+function modeMatch(mode = "") {
+	mode = mode.toLocaleLowerCase() || "plain";
+	return LANGUAGES.find((m) => m.value === mode || m.ext?.includes(mode))?.value || "plain";
+}
+//#endregion
+export { modeMatch };

package/es/plugins/codemirror-block/node/CodeMirrorNode.d.ts

@@ -0,0 +1,48 @@
+import { DOMConversionMap, DOMExportOutput, DecoratorNode, EditorConfig, LexicalEditor, LexicalNode, SerializedLexicalNode, Spread } from "lexical";
+
+//#region src/plugins/codemirror-block/node/CodeMirrorNode.d.ts
+interface CodeMirrorOptions {
+  indentWithTabs: boolean;
+  lineNumbers: boolean;
+  tabSize: number;
+}
+type SerializedCodeMirrorNode = Spread<{
+  code: string;
+  codeTheme: string;
+  language: string;
+  options: {
+    indentWithTabs: boolean;
+    lineNumbers: boolean;
+    tabSize: number;
+  };
+}, SerializedLexicalNode>;
+declare class CodeMirrorNode extends DecoratorNode<any> {
+  private __lang;
+  private __code;
+  private __codeTheme;
+  private __options;
+  static getType(): string;
+  static clone(node: CodeMirrorNode): CodeMirrorNode;
+  static importJSON(serializedNode: SerializedCodeMirrorNode): CodeMirrorNode;
+  static importDOM(): DOMConversionMap | null;
+  constructor(lang: string, code: string, codeTheme: string, options: CodeMirrorOptions, key?: string);
+  get lang(): string;
+  get code(): string;
+  get codeTheme(): string;
+  get options(): CodeMirrorOptions;
+  exportDOM(editor: LexicalEditor): DOMExportOutput;
+  exportJSON(): SerializedCodeMirrorNode;
+  setLang(lang: string): this;
+  setCode(code: string): this;
+  setCodeTheme(codeTheme: string): this;
+  setTabSize(tabSize: number): this;
+  setIndentWithTabs(indentWithTabs: boolean): this;
+  setLineNumbers(lineNumbers: boolean): this;
+  createDOM(config: EditorConfig): HTMLElement;
+  getTextContent(): string;
+  isInline(): false;
+  updateDOM(): boolean;
+  decorate(editor: LexicalEditor): any;
+}
+//#endregion
+export { CodeMirrorNode };