@lobehub/editor 4.15.0 → 4.15.2

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

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

@@ -0,0 +1,80 @@
+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 { $createCodeMirrorNode, CodeMirrorNode } from "../node/CodeMirrorNode.js";
+import { registerCodeMirrorCommand } from "../command/index.js";
+import { modeMatch } from "../lib/mode.js";
+import { $createNodeSelection, $setSelection } from "lexical";
+//#region src/plugins/codemirror-block/plugin/index.ts
+init_helper();
+init_plugin();
+const CodemirrorPlugin = class extends KernelPlugin {
+	static {
+		this.pluginName = "CodemirrorPlugin";
+	}
+	constructor(kernel, config) {
+		super();
+		this.kernel = kernel;
+		kernel.registerNodes([CodeMirrorNode]);
+		kernel.registerThemes({ hr: config?.theme || "" });
+		this.registerDecorator(kernel, "codemirror", (node, editor) => {
+			return config?.decorator ? config.decorator(node, editor) : null;
+		});
+	}
+	onInit(editor) {
+		this.register(registerCodeMirrorCommand(editor));
+		this.registerMarkdown();
+		this.registerLiteXml();
+	}
+	registerLiteXml() {
+		const litexmlService = this.kernel.requireService(ILitexmlService);
+		if (!litexmlService) return;
+		litexmlService.registerXMLWriter(CodeMirrorNode.getType(), (node, ctx) => {
+			const codeMirrorNode = node;
+			return ctx.createXmlNode("code", { lang: codeMirrorNode.lang || "plain" }, codeMirrorNode.code);
+		});
+		litexmlService.registerXMLReader("code", (xmlElement, children) => {
+			const text = children.map((v) => v.text || "").join("");
+			const language = xmlElement.getAttribute("lang") || "plain";
+			return INodeHelper.createTypeNode("code", {
+				code: text || xmlElement.textContent || "",
+				language: modeMatch(language),
+				version: 1
+			});
+		});
+	}
+	registerMarkdown() {
+		const markdownService = this.kernel.requireService(IMarkdownShortCutService);
+		markdownService?.registerMarkdownShortCut({
+			regExp: /^(```|···)(.+)?$/,
+			replace: (parentNode, _, match) => {
+				const code = $createCodeMirrorNode(modeMatch(match[2]), "");
+				parentNode.replace(code);
+				const sel = $createNodeSelection();
+				sel.add(code.getKey());
+				$setSelection(sel);
+			},
+			trigger: "enter",
+			type: "element"
+		});
+		markdownService?.registerMarkdownWriter(CodeMirrorNode.getType(), (ctx, node) => {
+			if (node instanceof CodeMirrorNode) {
+				ctx.appendLine("```" + node.lang);
+				ctx.appendLine("\n");
+				ctx.appendLine(node.code);
+				ctx.appendLine("\n```\n");
+			}
+		});
+		markdownService?.registerMarkdownReader("code", (node) => {
+			const language = node.lang ? modeMatch(node.lang) : "plain";
+			return INodeHelper.createTypeNode("code", {
+				code: node.value,
+				language,
+				version: 1
+			});
+		});
+	}
+};
+//#endregion
+export { CodemirrorPlugin };

package/es/plugins/codemirror-block/react/CodemirrorNode.js

@@ -0,0 +1,219 @@
+"use client";
+import { Toolbar } from "../../../codemirror/components/Toolbar.js";
+import { loadCodeMirror } from "../../../codemirror/loader.js";
+import { styles } from "../../../codemirror/style.js";
+import { lobeTheme } from "../../../codemirror/theme.js";
+import { useTranslation } from "../../../editor-kernel/react/useTranslation.js";
+import { SELECT_AFTER_CODEMIRROR_COMMAND, SELECT_BEFORE_CODEMIRROR_COMMAND } from "../command/index.js";
+import { useLexicalNodeSelection } from "../../../editor-kernel/react/useLexicalNodeSelection.js";
+import { Block } from "@lobehub/ui";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { debounce } from "es-toolkit/compat";
+import { $getSelection, $setSelection, COMMAND_PRIORITY_CRITICAL, KEY_DOWN_COMMAND } from "lexical";
+import { mergeRegister } from "@lexical/utils";
+//#region src/plugins/codemirror-block/react/CodemirrorNode.tsx
+const ReactCodemirrorNode = ({ node, className, editor }) => {
+	const ref = useRef(null);
+	const keydownRef = useRef("");
+	const instanceRef = useRef(null);
+	const isEmptyRef = useRef(false);
+	const t = useTranslation();
+	const [isSelected, setSelected, clearSelection, isNodeSelected] = useLexicalNodeSelection(node.getKey());
+	const [selectedLang, setSelectedLang] = useState(node.lang || "javascript");
+	const [tabSize, setTabSize] = useState(node.options.tabSize ?? 2);
+	const [useTabs, setUseTabs] = useState(node.options.indentWithTabs ?? false);
+	const [showLineNumbers, setShowLineNumbers] = useState(node.options.lineNumbers ?? false);
+	const [expand, setExpand] = useState(true);
+	const handleCopy = useCallback(async () => {
+		if (instanceRef.current) {
+			const code = instanceRef.current.getValue();
+			try {
+				await navigator.clipboard.writeText(code);
+			} catch {}
+		}
+	}, []);
+	const labels = useMemo(() => ({
+		selectLanguage: t("codemirror.selectLanguage"),
+		showLineNumbers: t("codemirror.showLineNumbers"),
+		tabSize: t("codemirror.tabSize"),
+		useTabs: t("codemirror.useTabs")
+	}), [t]);
+	const handleLanguageChange = useCallback((value) => {
+		setSelectedLang(value);
+		if (instanceRef.current) instanceRef.current.setOption("mode", value);
+		editor.update(() => {
+			node.setLang(value);
+		});
+	}, [editor, node]);
+	const handleTabSizeChange = useCallback((value = 2) => {
+		const v = value === null ? 2 : value;
+		setTabSize(v);
+		if (instanceRef.current) instanceRef.current.setOption("tabSize", v);
+		editor.update(() => {
+			node.setTabSize(v);
+		});
+	}, [editor, node]);
+	const handleUseTabsChange = useCallback((checked) => {
+		setUseTabs(checked);
+		if (instanceRef.current) instanceRef.current.setOption("indentWithTabs", checked);
+		editor.update(() => {
+			node.setIndentWithTabs(checked);
+		});
+	}, [editor, node]);
+	const handleShowLineNumbersChange = useCallback((checked) => {
+		setShowLineNumbers(checked);
+		if (instanceRef.current) instanceRef.current.setOption("lineNumbers", checked);
+		editor.update(() => {
+			node.setLineNumbers(checked);
+		});
+	}, [editor, node]);
+	useEffect(() => {
+		const sel = editor.getEditorState().read(() => $getSelection());
+		if (instanceRef.current?.view.hasFocus && sel === null) return;
+		if (!isSelected || !isNodeSelected) {
+			if (instanceRef.current) instanceRef.current.blur();
+			return;
+		}
+		if (isSelected && instanceRef.current && isNodeSelected) {
+			if (instanceRef.current?.view.hasFocus) return;
+			instanceRef.current.focus();
+			if (keydownRef.current === "end") instanceRef.current.setSelectionToEnd();
+		}
+	}, [
+		isSelected,
+		isNodeSelected,
+		editor
+	]);
+	useEffect(() => {
+		if (instanceRef.current) return;
+		if (ref.current) {
+			const dom = ref.current;
+			loadCodeMirror().then((CodeMirror) => {
+				if (instanceRef.current) return;
+				const instance = CodeMirror.fromTextArea(dom, {
+					indentWithTabs: useTabs,
+					lineNumbers: showLineNumbers,
+					mode: node.lang,
+					tabSize,
+					theme: "default",
+					value: node.code
+				});
+				console.info(instance);
+				instance.view.dispatch({ effects: instance.optionHelper.theme.reconfigure(instance.view.constructor.theme(lobeTheme, { dark: false })) });
+				isEmptyRef.current = !node.code.trim();
+				instance.on("keydown", (instance, e) => {
+					e.stopPropagation();
+					if ((e.key === "Enter" || e.keyCode === 13) && (e.metaKey || e.ctrlKey)) {
+						e.preventDefault();
+						instanceRef.current?.blur();
+						editor.dispatchCommand(SELECT_AFTER_CODEMIRROR_COMMAND, { key: node.getKey() });
+						queueMicrotask(() => {
+							editor.focus();
+						});
+						return;
+					}
+					if (e.key === "Backspace" || e.keyCode === 8) {
+						if (!isEmptyRef.current) return;
+						e.preventDefault();
+						editor.update(() => {
+							const prevNode = node.getPreviousSibling();
+							node.remove();
+							if (prevNode) {
+								const prevSelection = prevNode.selectEnd();
+								if (prevSelection) $setSelection(prevSelection);
+							}
+						});
+						queueMicrotask(() => {
+							editor.focus();
+						});
+					}
+				});
+				instance.on("leftOut", () => {
+					instanceRef.current?.blur();
+					editor.dispatchCommand(SELECT_BEFORE_CODEMIRROR_COMMAND, { key: node.getKey() });
+					queueMicrotask(() => {
+						editor.focus();
+					});
+				});
+				instance.on("rightOut", () => {
+					instanceRef.current?.blur();
+					editor.dispatchCommand(SELECT_AFTER_CODEMIRROR_COMMAND, { key: node.getKey() });
+					queueMicrotask(() => {
+						editor.focus();
+					});
+				});
+				instance.on("change", () => {
+					isEmptyRef.current = !instance.getValue().trim();
+				});
+				instance.on("change", debounce(() => {
+					const currentValue = instance.getValue();
+					editor.update(() => {
+						node.setCode(currentValue);
+					});
+				}));
+				instance.on("focus", () => {
+					if (editor.getEditorState().read(() => {
+						const sel = $getSelection();
+						if (!sel) return false;
+						if (sel?.getNodes().length > 1 || !sel?.getNodes().includes(node)) return true;
+						return false;
+					})) setSelected(true);
+				});
+				instanceRef.current = instance;
+				if (isSelected) instanceRef.current.focus();
+			});
+		}
+		return () => {
+			if (instanceRef.current) {
+				instanceRef.current.destroy();
+				instanceRef.current = null;
+			}
+		};
+	}, [ref]);
+	useEffect(() => {
+		return mergeRegister(editor.registerCommand(KEY_DOWN_COMMAND, (payload) => {
+			if (payload.key === "ArrowLeft" || payload.key === "ArrowUp") keydownRef.current = "end";
+			else keydownRef.current = "";
+			return false;
+		}, COMMAND_PRIORITY_CRITICAL));
+	}, [
+		clearSelection,
+		editor,
+		isSelected,
+		node,
+		setSelected
+	]);
+	return /* @__PURE__ */ jsxs(Block, {
+		className: cx(styles, isSelected && !isNodeSelected && "selected", className),
+		onMouseDown: (e) => e.stopPropagation(),
+		onMouseUp: (e) => e.stopPropagation(),
+		onSelect: (e) => e.stopPropagation(),
+		variant: "filled",
+		children: [/* @__PURE__ */ jsx(Toolbar, {
+			expand,
+			labels,
+			onClick: () => setExpand(!expand),
+			onCopy: handleCopy,
+			onLanguageChange: handleLanguageChange,
+			onShowLineNumbersChange: handleShowLineNumbersChange,
+			onTabSizeChange: handleTabSizeChange,
+			onUseTabsChange: handleUseTabsChange,
+			selectedLang,
+			showLineNumbers,
+			tabSize,
+			toggleExpand: () => setExpand(!expand),
+			useTabs
+		}), /* @__PURE__ */ jsx("div", {
+			className: cx("cm-container", !expand && "cm-container-collapsed"),
+			children: /* @__PURE__ */ jsx("textarea", {
+				className: "cm-textarea",
+				ref
+			})
+		})]
+	});
+};
+ReactCodemirrorNode.displayName = "ReactCodemirrorNode";
+//#endregion
+export { ReactCodemirrorNode as default };

package/es/plugins/codemirror-block/react/ReactCodemirrorNode.d.ts

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

package/es/plugins/codemirror-block/react/ReactCodemirrorNode.js

@@ -0,0 +1,26 @@
+"use client";
+import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context.js";
+import { CodemirrorPlugin } from "../plugin/index.js";
+import ReactCodemirrorNode from "./CodemirrorNode.js";
+import { useLayoutEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/plugins/codemirror-block/react/ReactCodemirrorNode.tsx
+const ReactCodemirrorPlugin = ({ className }) => {
+	const [editor] = useLexicalComposerContext();
+	useLayoutEffect(() => {
+		editor.registerPlugin(CodemirrorPlugin, {
+			decorator(node, editor) {
+				return /* @__PURE__ */ jsx(ReactCodemirrorNode, {
+					className,
+					editor,
+					node
+				});
+			},
+			theme: className
+		});
+	}, [editor, className]);
+	return null;
+};
+ReactCodemirrorPlugin.displayName = "ReactCodemirrorPlugin";
+//#endregion
+export { ReactCodemirrorPlugin as default };

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

@@ -0,0 +1 @@
+import { ReactCodemirrorPlugin } from "./ReactCodemirrorNode.js";

package/es/plugins/codemirror-block/react/type.d.ts

@@ -0,0 +1,6 @@
+//#region src/plugins/codemirror-block/react/type.d.ts
+interface ReactCodemirrorPluginProps {
+  className?: string;
+}
+//#endregion
+export { ReactCodemirrorPluginProps };

package/es/plugins/common/command/index.d.ts

@@ -0,0 +1,11 @@
+import * as _$lexical from "lexical";
+import { LexicalEditor } from "lexical";
+import { HeadingTagType } from "@lexical/rich-text";
+
+//#region src/plugins/common/command/index.d.ts
+declare const INSERT_QUOTE_COMMAND: _$lexical.LexicalCommand<unknown>;
+declare const INSERT_HEADING_COMMAND: _$lexical.LexicalCommand<{
+  tag: HeadingTagType;
+}>;
+//#endregion
+export { INSERT_HEADING_COMMAND, INSERT_QUOTE_COMMAND };

package/es/plugins/common/command/index.js

@@ -0,0 +1,24 @@
+import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR, createCommand } from "lexical";
+import { $createHeadingNode, $createQuoteNode } from "@lexical/rich-text";
+import { mergeRegister } from "@lexical/utils";
+import { $setBlocksType } from "@lexical/selection";
+//#region src/plugins/common/command/index.ts
+const INSERT_QUOTE_COMMAND = createCommand("INSERT_QUOTE_COMMAND");
+const INSERT_HEADING_COMMAND = createCommand("INSERT_HEADING_COMMAND");
+function registerCommands(editor) {
+	return mergeRegister(editor.registerCommand(INSERT_QUOTE_COMMAND, () => {
+		editor.update(() => {
+			const selection = $getSelection();
+			if ($isRangeSelection(selection)) $setBlocksType(selection, () => $createQuoteNode());
+		});
+		return true;
+	}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(INSERT_HEADING_COMMAND, (payload) => {
+		editor.update(() => {
+			const selection = $getSelection();
+			if ($isRangeSelection(selection)) $setBlocksType(selection, () => $createHeadingNode(payload.tag));
+		});
+		return true;
+	}, COMMAND_PRIORITY_EDITOR));
+}
+//#endregion
+export { INSERT_HEADING_COMMAND, INSERT_QUOTE_COMMAND, registerCommands };