@lobehub/editor 4.15.1 → 4.16.0

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

@@ -0,0 +1,181 @@
+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 { IBlockMenuService } from "../../block/service/i-block-menu-service.js";
+import { getCodeLanguageByInput } from "../utils/language.js";
+import { registerCodeHighlighting, toCodeTheme } from "./CodeHighlighterShiki.js";
+import { CustomShikiTokenizer, registerCodeCommand } from "../command/index.js";
+import { $createRangeSelection, $getSelection, $isRangeSelection, $setSelection, 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();
+		this.registerBlockSelect();
+	}
+	registerBlockSelect() {
+		const blockMenuService = this.kernel.requireService(IBlockMenuService);
+		if (!blockMenuService) return;
+		this.register(blockMenuService.registerSelectHandler({
+			key: "__codeblock_block_select_handler",
+			onSelect: (node) => {
+				if (!$isCodeNode(node)) return false;
+				const textNodes = node.getAllTextNodes();
+				const firstTextNode = textNodes[0];
+				const lastTextNode = textNodes.at(-1);
+				if (!firstTextNode || !lastTextNode) {
+					node.select(0, node.getChildrenSize());
+					return true;
+				}
+				const selection = $createRangeSelection();
+				selection.setTextNodeRange(firstTextNode, 0, lastTextNode, lastTextNode.getTextContentSize());
+				$setSelection(selection);
+				return true;
+			},
+			order: 100
+		}));
+	}
+	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 };

package/es/plugins/codemirror-block/node/CodeMirrorNode.js

@@ -0,0 +1,205 @@
+import { getKernelFromEditor, init_utils } from "../../../editor-kernel/utils.js";
+import { $applyNodeReplacement, DecoratorNode, isHTMLElement } from "lexical";
+import { addClassNamesToElement } from "@lexical/utils";
+//#region src/plugins/codemirror-block/node/CodeMirrorNode.ts
+init_utils();
+const LANGUAGE_DATA_ATTRIBUTE = "data-language";
+const THEME_DATA_ATTRIBUTE = "data-theme";
+const DEFAULT_OPTIONS = {
+	indentWithTabs: false,
+	lineNumbers: false,
+	tabSize: 2
+};
+function hasChildDOMNodeTag(node, tagName) {
+	for (const child of node.childNodes) {
+		if (isHTMLElement(child) && child.tagName === tagName) return true;
+		hasChildDOMNodeTag(child, tagName);
+	}
+	return false;
+}
+function isGitHubCodeTable(table) {
+	return table.classList.contains("js-file-line-container");
+}
+function isGitHubCodeCell(cell) {
+	return cell.classList.contains("js-file-line");
+}
+var CodeMirrorNode = class CodeMirrorNode extends DecoratorNode {
+	static getType() {
+		return "code";
+	}
+	static clone(node) {
+		return new CodeMirrorNode(node.__lang, node.__code, node.__codeTheme, node.__options, node.__key);
+	}
+	static importJSON(serializedNode) {
+		let code = serializedNode.code;
+		if ("children" in serializedNode) code = serializedNode.children?.map((child) => child.text).join("") || "";
+		return $createCodeMirrorNode(serializedNode.language, code, serializedNode.codeTheme, serializedNode.options).updateFromJSON(serializedNode);
+	}
+	static importDOM() {
+		return {
+			code: (node) => {
+				return node.textContent !== null && (/\r?\n/.test(node.textContent) || hasChildDOMNodeTag(node, "BR")) ? {
+					conversion: $convertPreElement,
+					priority: 1
+				} : null;
+			},
+			div: () => ({
+				conversion: $convertDivElement,
+				priority: 1
+			}),
+			pre: () => ({
+				conversion: $convertPreElement,
+				priority: 0
+			}),
+			table: (node) => {
+				if (isGitHubCodeTable(node)) return {
+					conversion: $convertTableElement,
+					priority: 3
+				};
+				return null;
+			},
+			td: (node) => {
+				const td = node;
+				const table = td.closest("table");
+				if (isGitHubCodeCell(td) || table && isGitHubCodeTable(table)) return {
+					conversion: convertCodeNoop,
+					priority: 3
+				};
+				return null;
+			},
+			tr: (node) => {
+				const table = node.closest("table");
+				if (table && isGitHubCodeTable(table)) return {
+					conversion: convertCodeNoop,
+					priority: 3
+				};
+				return null;
+			}
+		};
+	}
+	constructor(lang, code, codeTheme, options, key) {
+		super(key);
+		this.__lang = lang;
+		this.__code = code;
+		this.__codeTheme = codeTheme;
+		this.__options = options;
+	}
+	get lang() {
+		return this.__lang;
+	}
+	get code() {
+		return this.__code;
+	}
+	get codeTheme() {
+		return this.__codeTheme;
+	}
+	get options() {
+		return this.__options;
+	}
+	exportDOM(editor) {
+		const element = document.createElement("pre");
+		addClassNamesToElement(element, editor._config.theme.code);
+		element.setAttribute("spellcheck", "false");
+		const language = this.__lang;
+		if (language) element.setAttribute(LANGUAGE_DATA_ATTRIBUTE, language);
+		const theme = this.__codeTheme;
+		if (theme) element.setAttribute(THEME_DATA_ATTRIBUTE, theme);
+		element.textContent = this.__code;
+		return { element };
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			code: this.code,
+			codeTheme: this.codeTheme,
+			language: this.lang,
+			options: this.options
+		};
+	}
+	setLang(lang) {
+		const writer = this.getWritable();
+		writer.__lang = lang;
+		return this;
+	}
+	setCode(code) {
+		const writer = this.getWritable();
+		writer.__code = code;
+		return this;
+	}
+	setCodeTheme(codeTheme) {
+		const writer = this.getWritable();
+		writer.__codeTheme = codeTheme;
+		return this;
+	}
+	setTabSize(tabSize) {
+		const writer = this.getWritable();
+		writer.__options.tabSize = tabSize;
+		return this;
+	}
+	setIndentWithTabs(indentWithTabs) {
+		const writer = this.getWritable();
+		writer.__options.indentWithTabs = indentWithTabs;
+		return this;
+	}
+	setLineNumbers(lineNumbers) {
+		const writer = this.getWritable();
+		writer.__options.lineNumbers = lineNumbers;
+		return this;
+	}
+	createDOM(config) {
+		const element = document.createElement("div");
+		addClassNamesToElement(element, config.theme.hr);
+		return element;
+	}
+	getTextContent() {
+		return "\n";
+	}
+	isInline() {
+		return false;
+	}
+	updateDOM() {
+		return false;
+	}
+	decorate(editor) {
+		const decorator = getKernelFromEditor(editor)?.getDecorator("codemirror");
+		if (!decorator) return null;
+		if (typeof decorator === "function") return decorator(this, editor);
+		else return decorator.render(this, editor);
+	}
+};
+function $createCodeMirrorNode(lang, code = "", codeTheme = "default", options = DEFAULT_OPTIONS) {
+	return $applyNodeReplacement(new CodeMirrorNode(lang, code, codeTheme, options));
+}
+function isCodeElement(div) {
+	return div.style.fontFamily.match("monospace") !== null;
+}
+function isCodeChildElement(node) {
+	let parent = node.parentElement;
+	while (parent !== null) {
+		if (isCodeElement(parent)) return true;
+		parent = parent.parentElement;
+	}
+	return false;
+}
+function $convertDivElement(domNode) {
+	const div = domNode;
+	const isCode = isCodeElement(div);
+	if (!isCode && !isCodeChildElement(div)) return { node: null };
+	return { node: isCode ? $createCodeMirrorNode("plain", domNode.textContent || "", "") : null };
+}
+function $convertTableElement() {
+	return { node: $createCodeMirrorNode("plain", "", "") };
+}
+function $convertPreElement(domNode) {
+	const language = domNode.getAttribute(LANGUAGE_DATA_ATTRIBUTE);
+	const codeTheme = domNode.getAttribute(THEME_DATA_ATTRIBUTE) || "";
+	return { node: $createCodeMirrorNode(language || "plain", domNode.textContent || "", codeTheme) };
+}
+function $isCodeMirrorNode(node) {
+	return node.getType() === CodeMirrorNode.getType();
+}
+function convertCodeNoop() {
+	return { node: null };
+}
+//#endregion
+export { $createCodeMirrorNode, $isCodeMirrorNode, CodeMirrorNode };

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

@@ -0,0 +1,12 @@
+import { IEditorPluginConstructor } from "../../../types/kernel.js";
+import { CodeMirrorNode } from "../node/CodeMirrorNode.js";
+import { LexicalEditor } from "lexical";
+
+//#region src/plugins/codemirror-block/plugin/index.d.ts
+interface CodemirrorPluginOptions {
+  decorator: (node: CodeMirrorNode, editor: LexicalEditor) => any;
+  theme?: string;
+}
+declare const CodemirrorPlugin: IEditorPluginConstructor<CodemirrorPluginOptions>;
+//#endregion
+export { CodemirrorPlugin, CodemirrorPluginOptions };