@lobehub/editor 4.15.0 → 4.15.2

package/es/plugins/common/data-source/json-data-source.js

@@ -0,0 +1,133 @@
+import { INodeHelper, init_helper } from "../../../editor-kernel/inode/helper.js";
+import { exportNodeToJSON, init_utils } from "../utils/index.js";
+import DataSource from "../../../editor-kernel/data-source.js";
+import { cursorNodeSerialized } from "../node/cursor.js";
+import { $parseSerializedNodeImpl } from "../../litexml/utils/index.js";
+import { $isTableSelection } from "@lexical/table";
+import { $getCharacterOffsets, $getNodeByKey, $getRoot, $getSelection, $isElementNode, $isRangeSelection, $isTextNode, IS_CODE, resetRandomKey } from "lexical";
+//#region src/plugins/common/data-source/json-data-source.ts
+init_helper();
+init_utils();
+var JSONDataSource = class extends DataSource {
+	read(editor, data, options = {}) {
+		let dataObj;
+		if (typeof data === "string") dataObj = JSON.parse(data);
+		else dataObj = data;
+		const process = (node) => {
+			for (let i = 0; i < node.children.length; i++) {
+				const child = node.children[i];
+				if ("children" in child && Array.isArray(child.children)) process(child);
+				if (child.type === "text" && "format" in child && typeof child.format === "number" && (child.format & IS_CODE) > 0) {
+					node.children[i] = {
+						children: [{
+							...child,
+							format: child.format & ~IS_CODE
+						}],
+						direction: "ltr",
+						format: "",
+						indent: 0,
+						type: "codeInline",
+						version: 1
+					};
+					node.children.splice(i + 1, 0, cursorNodeSerialized);
+				}
+			}
+		};
+		process(dataObj.root);
+		if (dataObj.keepId || options.keepId) {
+			const state = editor.parseEditorState({ root: INodeHelper.createRootNode() }, (state) => {
+				try {
+					const root = $parseSerializedNodeImpl(dataObj.root, editor, true, state);
+					let maxId = -1;
+					Array.from(state._nodeMap.keys()).forEach((key) => {
+						if (key === "root") return;
+						const numericKey = Number(key);
+						if (Number.isInteger(numericKey) && numericKey >= 0) maxId = Math.max(maxId, numericKey);
+					});
+					resetRandomKey(maxId + 1);
+					state._nodeMap.set(root.getKey(), root);
+				} catch (error) {
+					console.error(error);
+				}
+			});
+			editor.setEditorState(state);
+		} else editor.setEditorState(editor.parseEditorState({ root: dataObj.root }));
+	}
+	write(editor, options) {
+		if (options?.selection) return editor.getEditorState().read(() => {
+			const selection = $getSelection();
+			if (!selection) return null;
+			if ($isRangeSelection(selection)) {
+				const selectedNodes = selection.getNodes();
+				const lastIndex = selectedNodes.length - 1;
+				const anchor = selection.anchor;
+				const focus = selection.focus;
+				const isBefore = anchor.isBefore(focus);
+				const firstNode = selectedNodes[0];
+				const lastNode = selectedNodes[lastIndex];
+				const [anchorOffset, focusOffset] = $getCharacterOffsets(selection);
+				let lastElement = [];
+				const rootNodes = [];
+				for (let i = 0; i < selectedNodes.length; i++) {
+					const node = selectedNodes[i];
+					if ($isElementNode(node)) {
+						const sNode = {
+							...node.exportJSON(),
+							$key: node.getKey()
+						};
+						for (let i = 0; i < rootNodes.length; i++) {
+							const child = rootNodes[i];
+							const childNode = $getNodeByKey(child.$key);
+							if (node.isParentOf(childNode)) {
+								sNode.children.push(child);
+								rootNodes.splice(i, 1);
+								i--;
+							}
+						}
+						let hasPush = false;
+						for (let i = lastElement.length - 1; i >= 0; i--) if ($getNodeByKey(lastElement[i].$key)?.isParentOf(node)) {
+							lastElement[i].children.push(sNode);
+							hasPush = true;
+							break;
+						} else lastElement.pop();
+						if (!hasPush) rootNodes.push(sNode);
+						lastElement.push(sNode);
+					} else if ($isTextNode(node)) {
+						const sNode = {
+							...node.exportJSON(),
+							$key: node.getKey()
+						};
+						if (node === firstNode) if (node === lastNode) {
+							if (anchor.type !== "element" || focus.type !== "element" || focus.offset === anchor.offset) sNode.text = anchorOffset < focusOffset ? sNode.text.slice(anchorOffset, focusOffset) : sNode.text.slice(focusOffset, anchorOffset);
+						} else sNode.text = isBefore ? sNode.text.slice(anchorOffset) : sNode.text.slice(focusOffset);
+						else if (node === lastNode) sNode.text = isBefore ? sNode.text.slice(0, focusOffset) : sNode.text.slice(0, anchorOffset);
+						let hasPush = false;
+						for (let i = lastElement.length - 1; i >= 0; i--) if ($getNodeByKey(lastElement[i].$key)?.isParentOf(node)) {
+							lastElement[i].children.push(sNode);
+							hasPush = true;
+							break;
+						} else lastElement.pop();
+						if (!hasPush) rootNodes.push(sNode);
+					} else {
+						const sNode = {
+							...node.exportJSON(),
+							$key: node.getKey()
+						};
+						let hasPush = false;
+						for (let i = lastElement.length - 1; i >= 0; i--) if ($getNodeByKey(lastElement[i].$key)?.isParentOf(node)) {
+							lastElement[i].children.push(sNode);
+							hasPush = true;
+							break;
+						} else lastElement.pop();
+						if (!hasPush) rootNodes.push(sNode);
+					}
+				}
+				return rootNodes;
+			} else if ($isTableSelection(selection)) {}
+			return selection.getNodes().map((node) => exportNodeToJSON(node));
+		});
+		return editor.read(() => ({ root: exportNodeToJSON($getRoot()) }));
+	}
+};
+//#endregion
+export { JSONDataSource as default };

package/es/plugins/common/data-source/text-data-source.js

@@ -0,0 +1,32 @@
+import { INodeHelper, init_helper } from "../../../editor-kernel/inode/helper.js";
+import DataSource from "../../../editor-kernel/data-source.js";
+import { $getRoot, $getSelection } from "lexical";
+//#region src/plugins/common/data-source/text-data-source.ts
+init_helper();
+var TextDataSource = class extends DataSource {
+	read(editor, data) {
+		if (typeof data !== "string") throw new Error("Invalid data type " + typeof data);
+		const lines = data.split(/\n/g);
+		const rootNode = INodeHelper.createRootNode();
+		lines.forEach((line) => {
+			const paragraph = INodeHelper.createParagraph();
+			if (line) {
+				const textNode = INodeHelper.createTextNode(line);
+				INodeHelper.appendChild(paragraph, textNode);
+			}
+			INodeHelper.appendChild(rootNode, paragraph);
+		});
+		editor.setEditorState(editor.parseEditorState({ root: rootNode }));
+	}
+	write(editor, options) {
+		if (options?.selection) return editor.getEditorState().read(() => {
+			const selection = $getSelection();
+			return selection ? selection.getTextContent().replaceAll("", "") : null;
+		});
+		return editor.getEditorState().read(() => {
+			return $getRoot().getTextContent().replaceAll("", "");
+		});
+	}
+};
+//#endregion
+export { TextDataSource as default };

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

@@ -0,0 +1,6 @@
+import { INSERT_HEADING_COMMAND, INSERT_QUOTE_COMMAND } from "./command/index.js";
+import { $createCursorNode, $isCardLikeElementNode, $isCursorNode, CardLikeElementNode, cursorNodeSerialized } from "./node/cursor.js";
+import { CommonPlugin, CommonPluginOptions } from "./plugin/index.js";
+import { ReactEditorContentProps, ReactPlainTextProps } from "./react/type.js";
+import { ReactEditorContent } from "./react/ReactEditorContent.js";
+import { ReactPlainText } from "./react/ReactPlainText.js";

package/es/plugins/common/node/ElementDOMSlot.js

@@ -0,0 +1,30 @@
+import { $getNodeFromDOMNode, init_utils } from "../../../editor-kernel/utils.js";
+import { COMMAND_PRIORITY_HIGH, SELECTION_CHANGE_COMMAND } from "lexical";
+import { CAN_USE_DOM, mergeRegister } from "@lexical/utils";
+//#region src/plugins/common/node/ElementDOMSlot.ts
+init_utils();
+function getElement(node) {
+	if (node.nodeType === Node.ELEMENT_NODE) return node;
+	return node.parentElement;
+}
+function registerBreakLineClick(editor) {
+	return mergeRegister(editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+		if (CAN_USE_DOM) {
+			const sel = document.getSelection();
+			if (sel?.anchorNode) {
+				const node = getElement(sel.anchorNode);
+				if (node?.hasAttribute("data-lexical-linebreak") && node.parentElement) {
+					const p = node.parentElement;
+					editor.update(() => {
+						const elem = $getNodeFromDOMNode(p, editor);
+						if (elem) elem.selectEnd();
+					});
+					return true;
+				}
+			}
+		}
+		return false;
+	}, COMMAND_PRIORITY_HIGH));
+}
+//#endregion
+export { registerBreakLineClick };

package/es/plugins/common/node/cursor.d.ts

@@ -0,0 +1,16 @@
+import { ElementNode, LexicalEditor, LexicalNode, SerializedLexicalNode, TextNode } from "lexical";
+
+//#region src/plugins/common/node/cursor.d.ts
+declare class CardLikeElementNode extends ElementNode {
+  isCardLike(): boolean;
+}
+declare const cursorNodeSerialized: SerializedLexicalNode;
+declare class CursorNode extends TextNode {
+  static getType(): string;
+  isUnmergeable(): boolean;
+}
+declare function $createCursorNode(): CursorNode;
+declare function $isCardLikeElementNode(node: LexicalNode | null | undefined): node is CardLikeElementNode;
+declare function $isCursorNode(node: LexicalNode | null | undefined): node is CursorNode;
+//#endregion
+export { $createCursorNode, $isCardLikeElementNode, $isCursorNode, CardLikeElementNode, cursorNodeSerialized };

package/es/plugins/common/node/cursor.js

@@ -0,0 +1,189 @@
+import { createDebugLogger, init_debug } from "../../../utils/debug.js";
+import { $createTextNode, $getNodeByKey, $getSelection, $isDecoratorNode, $isRangeSelection, $setSelection, COMMAND_PRIORITY_HIGH, DecoratorNode, ElementNode, HISTORY_MERGE_TAG, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_BACKSPACE_COMMAND, TextNode } from "lexical";
+import { mergeRegister } from "@lexical/utils";
+//#region src/plugins/common/node/cursor.ts
+init_debug();
+const logger = createDebugLogger("common", "cursor");
+var CardLikeElementNode = class extends ElementNode {
+	isCardLike() {
+		return true;
+	}
+};
+const cursorNodeSerialized = {
+	detail: 0,
+	format: 0,
+	mode: "normal",
+	style: "",
+	text: "",
+	type: "cursor",
+	version: 1
+};
+var CursorNode = class extends TextNode {
+	static getType() {
+		return "cursor";
+	}
+	isUnmergeable() {
+		return true;
+	}
+};
+function $createCursorNode() {
+	return new CursorNode("");
+}
+function $isCardLikeElementNode(node) {
+	return node instanceof CardLikeElementNode;
+}
+function $isCursorNode(node) {
+	return node instanceof CursorNode;
+}
+function registerCursorNode(editor) {
+	return mergeRegister(editor.registerUpdateListener(({ mutatedNodes }) => {
+		editor.getEditorState().read(() => {
+			if (!mutatedNodes) return;
+			const needAddCursor = [];
+			for (const [kClass, nodeMaps] of mutatedNodes) if (DecoratorNode.prototype.isPrototypeOf(kClass.prototype)) for (const [key, mutation] of nodeMaps) {
+				const node = $getNodeByKey(key);
+				logger.debug("🎭 DecoratorNode mutated:", node?.getType(), mutation, node);
+				if (mutation === "created" && node?.isInline() && node.getNextSibling() === null) needAddCursor.push(node);
+			}
+			if (needAddCursor.length > 0) editor.update(() => {
+				needAddCursor.forEach((node) => {
+					node.insertAfter($createCursorNode());
+				});
+			}, { tag: HISTORY_MERGE_TAG });
+			return false;
+		});
+	}), editor.registerUpdateListener(({ mutatedNodes }) => {
+		editor.getEditorState().read(() => {
+			const cursorNodes = mutatedNodes?.get(CursorNode);
+			const needRemove = /* @__PURE__ */ new Set();
+			if (cursorNodes) {
+				for (const [key, mutation] of cursorNodes) if (mutation === "updated") {
+					const cursorNode = $getNodeByKey(key);
+					if (cursorNode?.getIndexWithinParent() === 0) {
+						const nextElement = cursorNode.getNextSibling();
+						if (!$isCardLikeElementNode(nextElement) && !$isDecoratorNode(nextElement) && !$isCardLikeElementNode(cursorNode?.getParent())) needRemove.add(cursorNode);
+						else continue;
+					}
+					const element = cursorNode?.getPreviousSibling();
+					if (!$isCardLikeElementNode(element) && !$isDecoratorNode(element) && !$isCardLikeElementNode(cursorNode?.getParent())) needRemove.add(cursorNode);
+				}
+			}
+			if (needRemove.size > 0) editor.update(() => {
+				needRemove.forEach((node) => {
+					node.remove();
+				});
+			}, { tag: HISTORY_MERGE_TAG });
+			return false;
+		});
+	}), editor.registerUpdateListener(() => {
+		editor.getEditorState().read(() => {
+			const selection = $getSelection();
+			if (editor.isComposing()) return false;
+			if (!$isRangeSelection(selection) || !selection.isCollapsed()) return false;
+			const node = selection.anchor.getNode();
+			if (node instanceof CursorNode) {
+				if (node.__text !== "") editor.update(() => {
+					node.setTextContent("");
+					const data = node.__text.replace("", "");
+					if (data) {
+						const textNode = $createTextNode(data);
+						node.insertAfter(textNode);
+						textNode.selectEnd();
+					}
+				}, { tag: HISTORY_MERGE_TAG });
+				return false;
+			}
+		});
+	}), editor.registerCommand(KEY_BACKSPACE_COMMAND, (event) => {
+		const selection = $getSelection();
+		if (!$isRangeSelection(selection) || !selection.isCollapsed()) return false;
+		const node = selection.anchor.getNode();
+		if (node instanceof CursorNode) {
+			event.preventDefault();
+			const prev = node.getPreviousSibling();
+			const parent = node.getParent();
+			const parentPrev = parent?.getPreviousSibling();
+			let needDispatch = false;
+			if ($isDecoratorNode(prev)) {
+				prev.selectPrevious();
+				node.remove();
+				prev.remove();
+				event.preventDefault();
+				return true;
+			} else if (prev) {
+				prev.selectEnd();
+				needDispatch = true;
+			} else if (parent) {
+				if (parent.getChildrenSize() === 1) parent.remove();
+				else if (parentPrev) {
+					parentPrev.selectEnd();
+					needDispatch = true;
+				}
+			}
+			if (needDispatch) queueMicrotask(() => {
+				editor.dispatchCommand(KEY_BACKSPACE_COMMAND, event);
+			});
+			return true;
+		}
+		return false;
+	}, COMMAND_PRIORITY_HIGH), editor.registerCommand(KEY_ARROW_LEFT_COMMAND, (event) => {
+		const selection = $getSelection();
+		if (!$isRangeSelection(selection)) return false;
+		const focusNode = selection.focus.getNode();
+		if (!event.shiftKey) {
+			if (focusNode instanceof CursorNode && !$isCardLikeElementNode(focusNode.getParent()) && !$isCardLikeElementNode(focusNode.getPreviousSibling())) focusNode.selectStart();
+			return false;
+		}
+		const prev = focusNode.getPreviousSibling();
+		if (selection.focus.offset === 0 && $isCursorNode(prev)) try {
+			const { key: anchorKey, offset: anchorOffset, type: anchorType } = selection.anchor;
+			const sel = prev.selectPrevious();
+			const { key, offset, type } = sel.anchor;
+			sel.anchor.set(anchorKey, anchorOffset, anchorType);
+			sel.focus.set(key, offset, type);
+			$setSelection(sel);
+			return true;
+		} catch (error) {
+			logger.error("❌ Cursor selection error:", error);
+		}
+		else if ($isCursorNode(focusNode)) try {
+			const { key: anchorKey, offset: anchorOffset, type: anchorType } = selection.anchor;
+			const sel = focusNode.selectPrevious();
+			const { key, offset, type } = sel.anchor;
+			sel.anchor.set(anchorKey, anchorOffset, anchorType);
+			sel.focus.set(key, offset, type);
+			$setSelection(sel);
+			return true;
+		} catch (error) {
+			logger.error("❌ Cursor navigation error:", error);
+		}
+		return false;
+	}, COMMAND_PRIORITY_HIGH), editor.registerCommand(KEY_ARROW_RIGHT_COMMAND, (event) => {
+		const selection = $getSelection();
+		if (!$isRangeSelection(selection)) return false;
+		if (!event.shiftKey) {
+			const focusNode = selection.focus.getNode();
+			if (focusNode instanceof CursorNode && !$isCardLikeElementNode(focusNode.getParent()) && !$isCardLikeElementNode(focusNode.getPreviousSibling())) focusNode.selectEnd();
+			return false;
+		}
+		const { key: anchorKey, offset: anchorOffset, type: anchorType } = selection.anchor;
+		const { key: focusKey, offset: focusOffset, type: focusType } = selection.focus;
+		const focusNode = selection.focus.getNode();
+		if (focusType === "text" && focusOffset !== focusNode.getTextContentSize() || focusType === "element" && focusOffset !== focusNode.getChildrenSize()) return false;
+		const sel = focusNode.selectNext();
+		if ($isCursorNode(sel.focus.getNode())) {
+			sel.focus.getNode().selectNext();
+			const { key, offset, type } = sel.anchor;
+			sel.anchor.set(anchorKey, anchorOffset, anchorType);
+			sel.focus.set(key, offset, type);
+			$setSelection(sel);
+			return true;
+		} else {
+			selection.anchor.set(anchorKey, anchorOffset, anchorType);
+			selection.focus.set(focusKey, focusOffset, focusType);
+		}
+		return false;
+	}, COMMAND_PRIORITY_HIGH));
+}
+//#endregion
+export { $createCursorNode, $isCardLikeElementNode, $isCursorNode, CardLikeElementNode, CursorNode, cursorNodeSerialized, registerCursorNode };

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

@@ -0,0 +1,43 @@
+import { IEditorPluginConstructor } from "../../../types/kernel.js";
+import { PasteHandlerConfig } from "./paste-handler.js";
+
+//#region src/plugins/common/plugin/index.d.ts
+interface CommonPluginOptions extends PasteHandlerConfig {
+  enableHotkey?: boolean;
+  /**
+   * Enable/disable markdown shortcuts
+   * @default true - most formats enabled, but subscript/superscript are disabled by default
+   */
+  markdownOption?: boolean | {
+    bold?: boolean;
+    code?: boolean;
+    header?: boolean;
+    italic?: boolean;
+    quote?: boolean;
+    strikethrough?: boolean;
+    subscript?: boolean;
+    superscript?: boolean;
+    underline?: boolean;
+    underlineStrikethrough?: boolean;
+  };
+  /**
+   * Force paste as plain text, stripping all rich text formatting
+   * @default false
+   */
+  pasteAsPlainText?: boolean;
+  theme?: {
+    quote?: string;
+    textBold?: string;
+    textCode?: string;
+    textHighlight?: string;
+    textItalic?: string;
+    textStrikethrough?: string;
+    textSubscript?: string;
+    textSuperscript?: string;
+    textUnderline?: string;
+    textUnderlineStrikethrough?: string;
+  };
+}
+declare const CommonPlugin: IEditorPluginConstructor<CommonPluginOptions>;
+//#endregion
+export { CommonPlugin, CommonPluginOptions };