@lobehub/editor 4.15.1 → 4.16.0

package/es/plugins/code/node/code.js

@@ -0,0 +1,91 @@
+import { $createCursorNode, $isCursorNode, CardLikeElementNode } from "../../common/node/cursor.js";
+import { $applyNodeReplacement, $createTextNode, $getSelection, $isNodeSelection, $isRangeSelection } from "lexical";
+import { addClassNamesToElement } from "@lexical/utils";
+//#region src/plugins/code/node/code.ts
+var CodeNode = class CodeNode extends CardLikeElementNode {
+	static getType() {
+		return "codeInline";
+	}
+	static clone(node) {
+		return new CodeNode(node.__key);
+	}
+	static importJSON(serializedNode) {
+		return $createCodeNode().updateFromJSON(serializedNode);
+	}
+	createDOM(config) {
+		const element = document.createElement("span");
+		element.setAttribute("data-lexical-key", this.getKey());
+		const childContainer = document.createElement("ne-content");
+		element.append(childContainer);
+		addClassNamesToElement(element, config.theme.codeInline);
+		return element;
+	}
+	getDOMSlot(element) {
+		const neContent = element.querySelector("ne-content");
+		if (!neContent) throw new Error("CodeNode: ne-content not found");
+		return super.getDOMSlot(element).withElement(neContent);
+	}
+	canBeEmpty() {
+		return false;
+	}
+	isCardLike() {
+		return true;
+	}
+	isInline() {
+		return true;
+	}
+	canIndent() {
+		return false;
+	}
+	canInsertTextBefore() {
+		return true;
+	}
+	canInsertTextAfter() {
+		return true;
+	}
+	updateDOM(prevNode, dom, config) {
+		if ((prevNode ? prevNode : null) !== this) addClassNamesToElement(dom, config.theme.codeInline);
+		return false;
+	}
+};
+function $createCodeNode(textContent) {
+	const codeNode = $applyNodeReplacement(new CodeNode());
+	const cursorNode = $createCursorNode();
+	codeNode.append(cursorNode);
+	if (textContent) codeNode.append($createTextNode(textContent));
+	return codeNode;
+}
+function $isCodeInlineNode(node) {
+	return node instanceof CodeNode;
+}
+function getCodeInlineNode(node) {
+	if ($isCursorNode(node)) {
+		const parent = node.getParent();
+		if ($isCodeInlineNode(parent)) return parent;
+		if ($isCodeInlineNode(node.getNextSibling())) return node.getNextSibling();
+		if ($isCodeInlineNode(node.getPreviousSibling())) return node.getPreviousSibling();
+		return null;
+	}
+	if ($isCodeInlineNode(node.getParent())) return node.getParent();
+	return null;
+}
+function $isSelectionInCodeInline(editor) {
+	return editor.getEditorState().read(() => {
+		const selection = $getSelection();
+		if (!selection) return false;
+		if ($isRangeSelection(selection)) {
+			const focusNode = selection.focus.getNode();
+			const anchorNode = selection.anchor.getNode();
+			const code = getCodeInlineNode(focusNode);
+			if (code !== getCodeInlineNode(anchorNode)) return false;
+			if ($isCodeInlineNode(code)) return true;
+			return false;
+		} else if ($isNodeSelection(selection)) {
+			const nodes = selection.getNodes();
+			if (nodes.length === 1 && $isCodeInlineNode(nodes[0])) return true;
+		}
+		return false;
+	});
+}
+//#endregion
+export { $createCodeNode, $isCodeInlineNode, $isSelectionInCodeInline, CodeNode, getCodeInlineNode };

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

@@ -0,0 +1,9 @@
+import { IEditorPluginConstructor } from "../../../types/kernel.js";
+//#region src/plugins/code/plugin/index.d.ts
+interface CodePluginOptions {
+  enableHotkey?: boolean;
+  theme?: string;
+}
+declare const CodePlugin: IEditorPluginConstructor<CodePluginOptions>;
+//#endregion
+export { CodePlugin };

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

@@ -0,0 +1,74 @@
+import { INodeHelper, init_helper } from "../../../editor-kernel/inode/helper.js";
+import { KernelPlugin, init_plugin } from "../../../editor-kernel/plugin.js";
+import { $createCursorNode, cursorNodeSerialized } from "../../common/node/cursor.js";
+import { ILitexmlService } from "../../litexml/service/litexml-service.js";
+import { IMarkdownShortCutService } from "../../markdown/service/shortcut.js";
+import { $createCodeNode, CodeNode } from "../node/code.js";
+import { registerCodeInlineCommand } from "../command/index.js";
+import { registerCodeInline } from "./registry.js";
+import { $setSelection, TextNode } from "lexical";
+//#region src/plugins/code/plugin/index.ts
+init_helper();
+init_plugin();
+const CodePlugin = class extends KernelPlugin {
+	static {
+		this.pluginName = "CodePlugin";
+	}
+	constructor(kernel, config) {
+		super();
+		this.kernel = kernel;
+		this.config = config;
+		kernel.registerNodes([CodeNode]);
+		kernel.registerThemes({ codeInline: config?.theme || "editor-code" });
+	}
+	onInit(editor) {
+		this.register(registerCodeInlineCommand(editor));
+		this.register(registerCodeInline(editor, this.kernel, { enableHotkey: this.config?.enableHotkey }));
+		this.register(editor.registerNodeTransform(TextNode, (node) => {
+			if (node.hasFormat("code")) node.replace($createCodeNode(node.getTextContent())).insertAfter($createCursorNode());
+		}));
+		this.registerMarkdown();
+		this.registerLiteXml();
+	}
+	registerLiteXml() {
+		const litexmlService = this.kernel.requireService(ILitexmlService);
+		if (!litexmlService) return;
+		litexmlService.registerXMLWriter(CodeNode.getType(), (node, ctx) => {
+			return ctx.createXmlNode("codeInline", {});
+		});
+		litexmlService.registerXMLReader("codeInline", (xmlElement, children) => {
+			return INodeHelper.createElementNode(CodeNode.getType(), { children });
+		});
+	}
+	registerMarkdown() {
+		const markdownService = this.kernel.requireService(IMarkdownShortCutService);
+		if (!markdownService) return;
+		markdownService.registerMarkdownWriter(CodeNode.getType(), (ctx, node) => {
+			ctx.appendLine(`\`${node.getTextContent().replaceAll("", "")}\``);
+			return true;
+		});
+		markdownService.registerMarkdownShortCuts([{
+			process: (selection) => {
+				if (selection.getNodes().some((node) => node.getType() === CodeNode.getType())) return false;
+				const text = selection.getTextContent();
+				selection.removeText();
+				selection.insertNodes([$createCodeNode(text), $createCursorNode()]);
+				$setSelection(selection);
+			},
+			tag: "`",
+			type: "text-format"
+		}]);
+		markdownService.registerMarkdownReader("inlineCode", (node) => {
+			return [INodeHelper.createElementNode("codeInline", {
+				children: [cursorNodeSerialized, INodeHelper.createTextNode(node.value || "", {})],
+				direction: "ltr",
+				format: "",
+				indent: 0,
+				type: "codeInline",
+				version: 1
+			}), cursorNodeSerialized];
+		});
+	}
+};
+//#endregion
+export { CodePlugin };

package/es/plugins/code/plugin/registry.js

@@ -0,0 +1,33 @@
+import { HotkeyEnum, init_hotkey } from "../../../types/hotkey.js";
+import { $createCursorNode } from "../../common/node/cursor.js";
+import { CodeNode } from "../node/code.js";
+import { INSERT_CODEINLINE_COMMAND } from "../command/index.js";
+import { $getNodeByKey, HISTORY_MERGE_TAG } from "lexical";
+import { mergeRegister } from "@lexical/utils";
+//#region src/plugins/code/plugin/registry.ts
+init_hotkey();
+function registerCodeInline(editor, kernel, options) {
+	const { enableHotkey = true } = options || {};
+	return mergeRegister(editor.registerUpdateListener(({ mutatedNodes }) => {
+		const keys = (mutatedNodes?.get(CodeNode))?.keys() || [];
+		const needAddBefore = /* @__PURE__ */ new Set();
+		editor.getEditorState().read(() => {
+			for (const key of keys) {
+				const node = $getNodeByKey(key);
+				if (!node) return;
+				if (node.getParent()?.getFirstChild() === node) needAddBefore.add(node);
+			}
+		});
+		if (needAddBefore.size > 0) editor.update(() => {
+			needAddBefore.forEach((node) => {
+				if (!node.getPreviousSibling()) node.insertBefore($createCursorNode());
+			});
+		}, { tag: HISTORY_MERGE_TAG });
+	}), kernel.registerHotkey(HotkeyEnum.CodeInline, () => editor.dispatchCommand(INSERT_CODEINLINE_COMMAND, void 0), {
+		enabled: enableHotkey,
+		preventDefault: true,
+		stopImmediatePropagation: true
+	}));
+}
+//#endregion
+export { registerCodeInline };

package/es/plugins/code/react/CodeReactPlugin.d.ts

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

package/es/plugins/code/react/CodeReactPlugin.js

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

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

@@ -0,0 +1 @@
+import { ReactCodePlugin } from "./CodeReactPlugin.js";

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

@@ -0,0 +1,21 @@
+import { createStaticStyles } from "antd-style";
+//#region src/plugins/code/react/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({ codeInline: css`
+    display: inline;
+
+    margin-inline: 0.25em;
+    padding-block: 0.2em;
+    padding-inline: 0.4em;
+    border: 1px solid var(--lobe-markdown-border-color);
+    border-radius: 0.25em;
+
+    font-family: ${cssVar.fontFamilyCode};
+    font-size: 0.875em;
+    line-height: 1;
+    word-break: break-word;
+    white-space: break-spaces;
+
+    background: ${cssVar.colorFillSecondary};
+  ` }));
+//#endregion
+export { styles };

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

@@ -0,0 +1,7 @@
+//#region src/plugins/code/react/type.d.ts
+interface ReactCodePluginProps {
+  className?: string;
+  enableHotkey?: boolean;
+}
+//#endregion
+export { ReactCodePluginProps };

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

@@ -0,0 +1,8 @@
+import * as _$lexical from "lexical";
+import { LexicalEditor } from "lexical";
+//#region src/plugins/codeblock/command/index.d.ts
+declare const UPDATE_CODEBLOCK_LANG: _$lexical.LexicalCommand<{
+  lang: string;
+}>;
+//#endregion
+export { UPDATE_CODEBLOCK_LANG };

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

@@ -0,0 +1,40 @@
+import { ShikiTokenizer } from "../plugin/CodeHighlighterShiki.js";
+import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR, createCommand } from "lexical";
+import { $findMatchingParent } from "@lexical/utils";
+import { $isCodeNode } from "@lexical/code-core";
+//#region src/plugins/codeblock/command/index.ts
+const CustomShikiTokenizer = {
+	$tokenize: ShikiTokenizer.$tokenize,
+	$tokenizeSerialized: ShikiTokenizer.$tokenizeSerialized,
+	defaultLanguage: ShikiTokenizer.defaultLanguage,
+	defaultTheme: ShikiTokenizer.defaultTheme
+};
+const UPDATE_CODEBLOCK_LANG = createCommand("UPDATE_CODEBLOCK_LANG");
+function registerCodeCommand(editor) {
+	const unregisterLangCommand = editor.registerCommand(UPDATE_CODEBLOCK_LANG, (payload) => {
+		CustomShikiTokenizer.defaultLanguage = payload.lang;
+		const codeNode = editor.getEditorState().read(() => {
+			const selection = $getSelection();
+			if ($isRangeSelection(selection)) if (selection.isCollapsed()) return $findMatchingParent(selection.anchor.getNode(), $isCodeNode);
+			else {
+				const anchor = $findMatchingParent(selection.anchor.getNode(), $isCodeNode);
+				const focus = $findMatchingParent(selection.focus.getNode(), $isCodeNode);
+				if (anchor && focus && anchor === focus) return anchor;
+				return null;
+			}
+			return false;
+		});
+		if (!codeNode) return false;
+		queueMicrotask(() => {
+			editor.update(() => {
+				if ($isCodeNode(codeNode)) codeNode.setLanguage(payload.lang);
+			});
+		});
+		return true;
+	}, COMMAND_PRIORITY_EDITOR);
+	return () => {
+		unregisterLangCommand();
+	};
+}
+//#endregion
+export { CustomShikiTokenizer, UPDATE_CODEBLOCK_LANG, registerCodeCommand };

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

@@ -0,0 +1,6 @@
+import { UPDATE_CODEBLOCK_LANG } from "./command/index.js";
+import { CodeblockPlugin, CodeblockPluginOptions } from "./plugin/index.js";
+import { ReactCodeblockPluginProps } from "./react/type.js";
+import { ReactCodeblockPlugin } from "./react/ReactCodeblockPlugin.js";
+import { bundledLanguagesInfo as bundledLanguagesInfo$1 } from "shiki";
+export { bundledLanguagesInfo$1 as bundledLanguagesInfo };

package/es/plugins/codeblock/index.js

@@ -0,0 +1,5 @@
+import "./command/index.js";
+import "./plugin/index.js";
+import "./react/ReactCodeblockPlugin.js";
+import { bundledLanguagesInfo as bundledLanguagesInfo$1 } from "shiki";
+export { bundledLanguagesInfo$1 as bundledLanguagesInfo };