@lobehub/editor 4.15.1 → 4.15.2

package/es/plugins/common/plugin/register.js

@@ -0,0 +1,306 @@
+import { createDebugLogger, init_debug } from "../../../utils/debug.js";
+import { HotkeyEnum, init_hotkey } from "../../../types/hotkey.js";
+import { $closest } from "../../../editor-kernel/utils.js";
+import { $createNodeSelection, $createParagraphNode, $getRoot, $getSelection, $isDecoratorNode, $isElementNode, $isLineBreakNode, $isNodeSelection, $isRangeSelection, $isRootOrShadowRoot, $isTextNode, $setSelection, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_LOW, COMMAND_PRIORITY_NORMAL, FORMAT_TEXT_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_BACKSPACE_COMMAND, REDO_COMMAND, UNDO_COMMAND } from "lexical";
+import { $isHeadingNode, QuoteNode } from "@lexical/rich-text";
+import { mergeRegister } from "@lexical/utils";
+import { $isCodeHighlightNode, $isCodeNode } from "@lexical/code-core";
+//#region src/plugins/common/plugin/register.ts
+init_hotkey();
+init_debug();
+const logger = createDebugLogger("plugin", "common");
+function resolveElement(element, isBackward, focusOffset) {
+	const parent = element.getParent();
+	let offset = focusOffset;
+	let block = element;
+	if (parent !== null) {
+		if (isBackward && focusOffset === 0) {
+			offset = block.getIndexWithinParent();
+			block = parent;
+		} else if (!isBackward && focusOffset === block.getChildrenSize()) {
+			offset = block.getIndexWithinParent() + 1;
+			block = parent;
+		}
+	}
+	return block.getChildAtIndex(isBackward ? offset - 1 : offset);
+}
+function isCodeNodeLastLine(focusNode) {
+	if (!$isCodeHighlightNode(focusNode)) return false;
+	const codeNode = focusNode.getParent();
+	if (!$isCodeNode(codeNode)) return false;
+	let last = codeNode.getLastChild();
+	do {
+		if ($isLineBreakNode(last)) return false;
+		if (last === focusNode) return codeNode;
+		last = last?.getPreviousSibling();
+	} while (last !== focusNode && last);
+	if (last === focusNode) return codeNode;
+	return false;
+}
+function $getAdjacentNode(focus, isBackward) {
+	const focusOffset = focus.offset;
+	if (focus.type === "element") return resolveElement(focus.getNode(), isBackward, focusOffset);
+	else {
+		const focusNode = focus.getNode();
+		if (isBackward && focusOffset === 0 || !isBackward && focusOffset === focusNode.getTextContentSize()) {
+			const possibleNode = isBackward ? focusNode.getPreviousSibling() : focusNode.getNextSibling();
+			if (possibleNode === null) return resolveElement(focusNode.getParentOrThrow(), isBackward, focusNode.getIndexWithinParent() + (isBackward ? 0 : 1));
+			return possibleNode;
+		} else if (!isBackward && isCodeNodeLastLine(focusNode)) return focusNode.getParent()?.getNextSibling() || null;
+	}
+	return null;
+}
+function $getDownUpNode(focus, isUp) {
+	let blockParent = focus.getNode();
+	while (blockParent !== null && blockParent.isInline()) blockParent = blockParent.getParent();
+	if (!blockParent) return null;
+	let nextNode = isUp ? blockParent.getPreviousSibling() : blockParent.getNextSibling();
+	while (!nextNode && !$isRootOrShadowRoot(blockParent)) {
+		blockParent = blockParent.getParent();
+		if (!blockParent) return null;
+		nextNode = isUp ? blockParent.getPreviousSibling() : blockParent.getNextSibling();
+	}
+	if (!nextNode) return null;
+	return nextNode;
+}
+function $isSelectionAtEndOfRoot(selection) {
+	const focus = selection.focus;
+	return focus.key === "root" && focus.offset === $getRoot().getChildrenSize();
+}
+function registerHeaderBackspace(editor) {
+	return editor.registerCommand(KEY_BACKSPACE_COMMAND, (payload) => {
+		const headingNode = editor.getEditorState().read(() => {
+			const selection = $getSelection();
+			if (!$isRangeSelection(selection) || !selection.isCollapsed()) return false;
+			const anchor = selection.anchor;
+			if (anchor.offset !== 0) return false;
+			const anchorNode = anchor.getNode();
+			if ($isTextNode(anchorNode)) {
+				if (anchorNode.getPreviousSibling()) return false;
+				const parent = anchorNode.getParentOrThrow();
+				if (!$isHeadingNode(parent)) return false;
+				return parent;
+			}
+			if ($isHeadingNode(anchorNode)) return anchorNode;
+			return false;
+		});
+		if (headingNode) {
+			payload.stopImmediatePropagation();
+			payload.preventDefault();
+			payload.stopPropagation();
+			editor.update(() => {
+				const node = $createParagraphNode();
+				headingNode.replace(node, true);
+				node.select(0, 0);
+			});
+			return true;
+		}
+		return false;
+	}, COMMAND_PRIORITY_NORMAL);
+}
+function registerRichKeydown(editor, kernel, options) {
+	const { enableHotkey = true } = options || {};
+	return mergeRegister(kernel.registerHotkey(HotkeyEnum.PasteAsPlainText, async () => {
+		try {
+			const text = await navigator.clipboard.readText();
+			editor.update(() => {
+				const selection = $getSelection();
+				if (!$isRangeSelection(selection)) return;
+				selection.insertText(text);
+			});
+		} catch (error) {
+			logger.error("❌ Failed to paste as plain text:", error);
+		}
+	}, {
+		enabled: enableHotkey,
+		preventDefault: true,
+		stopPropagation: true
+	}), kernel.registerHotkey(HotkeyEnum.Bold, () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold"), {
+		enabled: enableHotkey,
+		preventDefault: true,
+		stopImmediatePropagation: true
+	}), kernel.registerHotkey(HotkeyEnum.Italic, () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic"), {
+		enabled: enableHotkey,
+		preventDefault: true,
+		stopImmediatePropagation: true
+	}), kernel.registerHotkey(HotkeyEnum.Underline, () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline"), {
+		enabled: enableHotkey,
+		preventDefault: true,
+		stopImmediatePropagation: true
+	}), kernel.registerHotkey(HotkeyEnum.Strikethrough, () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough"), {
+		enabled: enableHotkey,
+		preventDefault: true,
+		stopImmediatePropagation: true
+	}), kernel.registerHotkey(HotkeyEnum.Undo, () => editor.dispatchCommand(UNDO_COMMAND, void 0), {
+		enabled: enableHotkey,
+		preventDefault: true,
+		stopImmediatePropagation: true
+	}), kernel.registerHotkey(HotkeyEnum.Redo, () => editor.dispatchCommand(REDO_COMMAND, void 0), {
+		enabled: enableHotkey,
+		preventDefault: true,
+		stopImmediatePropagation: true
+	}), kernel.registerHighCommand(KEY_ARROW_UP_COMMAND, (event) => {
+		const selection = $getSelection();
+		if ($isNodeSelection(selection)) {
+			const nodes = selection.getNodes();
+			if (nodes.length > 0) {
+				nodes[0].selectPrevious();
+				event.preventDefault();
+				return true;
+			}
+		} else if ($isRangeSelection(selection)) {
+			const possibleNode = $getAdjacentNode(selection.focus, true);
+			const upblock = possibleNode || $getDownUpNode(selection.focus, true);
+			if (!event.shiftKey && $isDecoratorNode(possibleNode)) {
+				const nodeSelection = $createNodeSelection();
+				nodeSelection.add(possibleNode.getKey());
+				editor.update(() => {
+					$setSelection(nodeSelection);
+				});
+				event.preventDefault();
+				return true;
+			} else if (!event.shiftKey && $isDecoratorNode(upblock)) {
+				const nodeSelection = $createNodeSelection();
+				nodeSelection.add(upblock.getKey());
+				editor.update(() => {
+					$setSelection(nodeSelection);
+				});
+				event.preventDefault();
+				return true;
+			} else if (possibleNode && possibleNode.getType() !== "linebreak") {
+				possibleNode?.selectEnd();
+				event.preventDefault();
+				return true;
+			}
+		}
+		return false;
+	}, COMMAND_PRIORITY_EDITOR), kernel.registerHighCommand(KEY_ARROW_DOWN_COMMAND, (event) => {
+		const selection = $getSelection();
+		if ($isRangeSelection(selection)) {
+			if (!selection.isCollapsed()) return false;
+			const focusNode = selection.focus.getNode();
+			const quotaNode = $closest(focusNode, (node) => node.getType() === QuoteNode.getType());
+			if (!quotaNode) return false;
+			if (quotaNode.getNextSibling()) return false;
+			const lastChild = quotaNode.getLastChild();
+			if (!lastChild) return false;
+			if (!$closest(focusNode, (node) => node === lastChild)) return false;
+			event.preventDefault();
+			editor.update(() => {
+				const paragraph = $createParagraphNode();
+				quotaNode.insertAfter(paragraph);
+				paragraph.select();
+			});
+			return true;
+		}
+		return false;
+	}, COMMAND_PRIORITY_LOW), kernel.registerHighCommand(KEY_ARROW_DOWN_COMMAND, (event) => {
+		const selection = $getSelection();
+		if ($isNodeSelection(selection)) {
+			const nodes = selection.getNodes();
+			if (nodes.length > 0) {
+				const node = nodes[0].getNextSibling();
+				if ($isRootOrShadowRoot(node)) {
+					const parent = node.getParent();
+					if (parent) {
+						const index = node.getIndexWithinParent();
+						parent.select(index, index);
+						event.preventDefault();
+						return true;
+					}
+				}
+				node?.selectStart();
+				event.preventDefault();
+				return true;
+			}
+		} else if ($isRangeSelection(selection)) {
+			if ($isSelectionAtEndOfRoot(selection)) {
+				event.preventDefault();
+				return true;
+			}
+			const possibleNode = $getAdjacentNode(selection.focus, false);
+			const upblock = possibleNode || $getDownUpNode(selection.focus, false);
+			if (!event.shiftKey && $isDecoratorNode(possibleNode)) {
+				const nodeSelection = $createNodeSelection();
+				nodeSelection.add(possibleNode.getKey());
+				editor.update(() => {
+					$setSelection(nodeSelection);
+				});
+				event.preventDefault();
+				return true;
+			} else if (!event.shiftKey && $isDecoratorNode(upblock)) {
+				const nodeSelection = $createNodeSelection();
+				nodeSelection.add(upblock.getKey());
+				editor.update(() => {
+					$setSelection(nodeSelection);
+				});
+				event.preventDefault();
+				return true;
+			} else if (possibleNode && possibleNode.getType() !== "linebreak") {
+				possibleNode?.selectStart();
+				event.preventDefault();
+				return true;
+			}
+		}
+		return false;
+	}, COMMAND_PRIORITY_EDITOR), kernel.registerHighCommand(KEY_ARROW_RIGHT_COMMAND, (event) => {
+		const selection = $getSelection();
+		if ($isRangeSelection(selection)) {
+			const focusNode = selection.focus.getNode();
+			if ($isElementNode(focusNode) && focusNode.getChildAtIndex(selection.focus.offset)?.getType() === "table") {
+				focusNode.getChildAtIndex(selection.focus.offset)?.selectStart();
+				event.preventDefault();
+				return true;
+			}
+		} else if ($isNodeSelection(selection)) {
+			const nodes = selection.getNodes();
+			if (nodes.length > 0) {
+				const node = nodes[0].getNextSibling();
+				if ($isRootOrShadowRoot(node)) {
+					const parent = node.getParent();
+					if (parent) {
+						const index = node.getIndexWithinParent();
+						parent.select(index, index);
+						event.preventDefault();
+						return true;
+					}
+				}
+			}
+		}
+		return false;
+	}, COMMAND_PRIORITY_EDITOR));
+}
+const NEEDS_FOLLOWING_PARAGRAPH_TYPES = new Set([
+	"code",
+	"table",
+	"block-image"
+]);
+function registerLastElement(editor) {
+	let isProcessing = false;
+	return editor.registerUpdateListener(({ dirtyElements }) => {
+		if (!editor.isEditable()) return;
+		if (!dirtyElements.has("root") && !Array.from(dirtyElements.keys()).some((key) => {
+			return editor.getEditorState()._nodeMap.get(key)?.getParent()?.getKey() === "root";
+		})) return;
+		if (isProcessing) return;
+		if (editor.getEditorState().read(() => {
+			const lastChild = $getRoot().getLastChild();
+			return NEEDS_FOLLOWING_PARAGRAPH_TYPES.has(lastChild?.getType());
+		})) {
+			isProcessing = true;
+			queueMicrotask(() => {
+				editor.update(() => {
+					const root = $getRoot();
+					const currentLast = root.getLastChild();
+					if (NEEDS_FOLLOWING_PARAGRAPH_TYPES.has(currentLast?.getType())) {
+						const paragraph = $createParagraphNode();
+						root.append(paragraph);
+					}
+					isProcessing = false;
+				});
+			});
+		}
+	});
+}
+//#endregion
+export { registerHeaderBackspace, registerLastElement, registerRichKeydown };

package/es/plugins/common/react/Placeholder/index.js

@@ -0,0 +1,65 @@
+import { $canShowPlaceholderCurry, init_utils } from "../../utils/index.js";
+import { $closestNodeType } from "../../../../editor-kernel/utils.js";
+import { useLexicalEditor } from "../../../../editor-kernel/react/useLexicalEditor.js";
+import { styles } from "./style.js";
+import { memo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { $getNodeByKey, $getSelection, $isBlockElementNode, $isRangeSelection } from "lexical";
+import { mergeRegister } from "@lexical/utils";
+//#region src/plugins/common/react/Placeholder/index.tsx
+init_utils();
+function canShowPlaceholderFromCurrentEditorState(editor) {
+	return editor.getEditorState().read($canShowPlaceholderCurry(editor.isComposing()));
+}
+function hasOnlyBrChild(element) {
+	const children = element.childNodes;
+	return children.length === 1 && children[0].nodeType === Node.ELEMENT_NODE && children[0].tagName.toLowerCase() === "br";
+}
+const Placeholder = memo(({ children, style, lineEmptyPlaceholder }) => {
+	const currentPlaceHolderRef = useRef(null);
+	const [canShowPlaceholder, setCanShowPlaceholder] = useState(() => false);
+	useLexicalEditor((editor) => {
+		setCanShowPlaceholder(() => canShowPlaceholderFromCurrentEditorState(editor));
+		function resetCanShowPlaceholder() {
+			const currentCanShowPlaceholder = canShowPlaceholderFromCurrentEditorState(editor);
+			setCanShowPlaceholder(currentCanShowPlaceholder);
+			return currentCanShowPlaceholder;
+		}
+		resetCanShowPlaceholder();
+		return mergeRegister(editor.registerUpdateListener(() => {
+			if (!resetCanShowPlaceholder() && lineEmptyPlaceholder) editor.getEditorState().read(() => {
+				const sel = $getSelection();
+				if ($isRangeSelection(sel) && sel.isCollapsed()) {
+					const anchor = sel.anchor;
+					let node = $getNodeByKey(anchor.key);
+					while (node && !$isBlockElementNode(node)) node = node.getParent();
+					const tableNode = $closestNodeType(node, ["tablecell", "heading"]);
+					if (node && !tableNode) {
+						const dom = editor.getElementByKey(node.getKey());
+						if (dom && hasOnlyBrChild(dom)) {
+							if (currentPlaceHolderRef.current && currentPlaceHolderRef.current !== dom) currentPlaceHolderRef.current.dataset.placeholder = "";
+							currentPlaceHolderRef.current = dom;
+							dom.dataset.placeholder = lineEmptyPlaceholder;
+							return;
+						}
+					}
+					if (currentPlaceHolderRef.current) {
+						currentPlaceHolderRef.current.dataset.placeholder = "";
+						currentPlaceHolderRef.current = null;
+					}
+				}
+			});
+		}), editor.registerEditableListener(() => {
+			resetCanShowPlaceholder();
+		}));
+	}, []);
+	if (!canShowPlaceholder) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: styles.placeholder,
+		style,
+		children
+	});
+});
+Placeholder.displayName = "Placeholder";
+//#endregion
+export { Placeholder as default };

package/es/plugins/common/react/Placeholder/style.js

@@ -0,0 +1,22 @@
+import { createStaticStyles } from "antd-style";
+//#region src/plugins/common/react/Placeholder/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	placeholder: css`
+    pointer-events: none;
+    user-select: none;
+
+    position: absolute;
+    inset-block-start: 0;
+
+    margin-block: 4px;
+
+    line-height: var(--lobe-markdown-line-height);
+    color: ${cssVar.colorTextDescription};
+    letter-spacing: 0.02em;
+  `,
+	placeholderContainer: css`
+    transform: translateY(-2px);
+  `
+}));
+//#endregion
+export { styles };

package/es/plugins/common/react/ReactEditorContent.d.ts

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

package/es/plugins/common/react/ReactEditorContent.js

@@ -0,0 +1,8 @@
+"use client";
+//#region src/plugins/common/react/ReactEditorContent.tsx
+const ReactEditorContent = () => {
+	return null;
+};
+ReactEditorContent.displayName = "ReactEditorContent";
+//#endregion
+export { ReactEditorContent as default };

package/es/plugins/common/react/ReactPlainText.d.ts

@@ -0,0 +1,7 @@
+import { ReactPlainTextProps } from "./type.js";
+import * as _$react from "react";
+
+//#region src/plugins/common/react/ReactPlainText.d.ts
+declare const ReactPlainText: _$react.NamedExoticComponent<ReactPlainTextProps>;
+//#endregion
+export { ReactPlainText };

package/es/plugins/common/react/ReactPlainText.js

@@ -0,0 +1,192 @@
+"use client";
+import { LexicalErrorBoundary } from "../../../editor-kernel/react/LexicalErrorBoundary.js";
+import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context.js";
+import { MarkdownPlugin } from "../../markdown/plugin/index.js";
+import { CommonPlugin } from "../plugin/index.js";
+import { useDecorators } from "../../../editor-kernel/react/useDecorators.js";
+import Placeholder from "./Placeholder/index.js";
+import { styles, themeStyles } from "./style.js";
+import { Children, memo, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { COMMAND_PRIORITY_EDITOR, KEY_DOWN_COMMAND } from "lexical";
+//#region src/plugins/common/react/ReactPlainText.tsx
+const ReactPlainText = memo(({ style, children, theme = {}, onChange, editable, className, variant, enableHotkey = true, enablePasteMarkdown = true, autoFormatMarkdown = true, markdownOption = true, pasteAsPlainText = false, pasteMarkdownAutoConvertThreshold, pasteVSCodeAsCodeBlock = true, onKeyDown, onFocus, onBlur, autoFocus, onPressEnter, onCompositionStart, onCompositionEnd, onContextMenu, onTextChange }) => {
+	const isChat = variant === "chat";
+	const { fontSize = isChat ? 14 : 16, headerMultiple = isChat ? .25 : .6, lineHeight = isChat ? 1.4 : 1.6, marginMultiple = isChat ? 1 : 2, ...restTheme } = theme;
+	const editorContainerRef = useRef(null);
+	const [editor] = useLexicalComposerContext();
+	const decorators = useDecorators(editor, LexicalErrorBoundary);
+	const cssVariables = useMemo(() => ({
+		"--common-font-size": `${fontSize}px`,
+		"--common-header-multiple": String(headerMultiple),
+		"--common-line-height": String(lineHeight),
+		"--common-margin-multiple": String(marginMultiple)
+	}), [
+		fontSize,
+		headerMultiple,
+		marginMultiple,
+		lineHeight
+	]);
+	const computedThemeStyles = useMemo(() => {
+		const bold = markdownOption === true || typeof markdownOption === "object" && markdownOption.bold === true;
+		const italic = markdownOption === true || typeof markdownOption === "object" && markdownOption.italic === true;
+		const strikethrough = markdownOption === true || typeof markdownOption === "object" && markdownOption.strikethrough === true;
+		const underline = markdownOption === true || typeof markdownOption === "object" && markdownOption.underline === true;
+		const underlineStrikethrough = markdownOption === true || typeof markdownOption === "object" && markdownOption.underlineStrikethrough === true;
+		return {
+			quote: themeStyles.quote,
+			textBold: bold ? themeStyles.textBold_true : themeStyles.textBold_false,
+			textCode: themeStyles.textCode,
+			textItalic: italic ? themeStyles.textItalic_true : themeStyles.textItalic_false,
+			textStrikethrough: strikethrough ? themeStyles.textStrikethrough_true : themeStyles.textStrikethrough_false,
+			textUnderline: underline ? themeStyles.textUnderline_true : themeStyles.textUnderline_false,
+			textUnderlineStrikethrough: underlineStrikethrough ? themeStyles.textUnderlineStrikethrough_true : themeStyles.textUnderlineStrikethrough_false
+		};
+	}, [markdownOption]);
+	const [isInitialized, setIsInitialized] = useState(false);
+	const { props: { type, content, placeholder, lineEmptyPlaceholder } } = Children.only(children);
+	useLayoutEffect(() => {
+		editor.registerPlugin(MarkdownPlugin, {
+			autoFormatMarkdown,
+			enablePasteMarkdown,
+			pasteMarkdownAutoConvertThreshold
+		});
+		editor.registerPlugin(CommonPlugin, {
+			enableHotkey,
+			markdownOption,
+			pasteAsPlainText,
+			pasteVSCodeAsCodeBlock,
+			theme: restTheme ? {
+				...computedThemeStyles,
+				...restTheme
+			} : computedThemeStyles
+		});
+	}, [
+		editor,
+		enableHotkey,
+		enablePasteMarkdown,
+		autoFormatMarkdown,
+		markdownOption,
+		pasteAsPlainText,
+		pasteMarkdownAutoConvertThreshold,
+		pasteVSCodeAsCodeBlock,
+		restTheme,
+		computedThemeStyles
+	]);
+	useEffect(() => {
+		const container = editorContainerRef.current;
+		if (container && !isInitialized) {
+			editor.setRootElement(container, editable);
+			editor.setDocument(type, content);
+			setIsInitialized(true);
+		}
+		let previousContent;
+		return editor.getLexicalEditor()?.registerUpdateListener(({ dirtyElements, dirtyLeaves }) => {
+			onChange?.(editor);
+			if (onTextChange && (dirtyElements.size > 0 || dirtyLeaves.size > 0)) {
+				const currentContent = JSON.stringify(editor.getDocument(type));
+				if (previousContent === void 0) previousContent = currentContent;
+				else if (currentContent !== previousContent) {
+					previousContent = currentContent;
+					onTextChange(editor);
+				}
+			}
+		});
+	}, [
+		editor,
+		type,
+		content,
+		onChange,
+		onTextChange,
+		isInitialized
+	]);
+	useEffect(() => {
+		if (!isInitialized) return;
+		if (typeof editable === "boolean") editor.setEditable(editable);
+	}, [isInitialized, editable]);
+	useEffect(() => {
+		if (editor && onPressEnter) return editor.registerHighCommand(KEY_DOWN_COMMAND, (event) => {
+			if (event.key === "Enter" && !event.isComposing && onPressEnter({
+				editor,
+				event
+			})) {
+				event.preventDefault();
+				return true;
+			}
+			if (onKeyDown?.({
+				editor,
+				event
+			})) {
+				event.preventDefault();
+				return true;
+			}
+			return false;
+		}, COMMAND_PRIORITY_EDITOR);
+	}, [
+		editor,
+		onPressEnter,
+		onKeyDown
+	]);
+	useEffect(() => {
+		if (autoFocus && editorContainerRef.current) editorContainerRef.current.focus();
+	}, [autoFocus]);
+	const handleBlur = (event) => {
+		onBlur?.({
+			editor,
+			event
+		});
+	};
+	const handleCompositionEnd = (event) => {
+		onCompositionEnd?.({
+			editor,
+			event
+		});
+	};
+	const handleCompositionStart = (event) => {
+		onCompositionStart?.({
+			editor,
+			event
+		});
+	};
+	const handleContextMenu = (event) => {
+		onContextMenu?.({
+			editor,
+			event
+		});
+	};
+	const handleFocus = (event) => {
+		onFocus?.({
+			editor,
+			event
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(styles.root, styles.variant, className),
+		style: {
+			...cssVariables,
+			...style
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: styles.editorContent,
+				contentEditable: editable ?? true,
+				onBlur: handleBlur,
+				onCompositionEnd: handleCompositionEnd,
+				onCompositionStart: handleCompositionStart,
+				onContextMenu: handleContextMenu,
+				onFocus: handleFocus,
+				ref: editorContainerRef
+			}),
+			/* @__PURE__ */ jsx(Placeholder, {
+				lineEmptyPlaceholder,
+				style,
+				children: placeholder
+			}),
+			decorators
+		]
+	});
+});
+ReactPlainText.displayName = "ReactPlainText";
+//#endregion
+export { ReactPlainText as default };

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

@@ -0,0 +1,3 @@
+import { ReactEditorContentProps, ReactPlainTextProps } from "./type.js";
+import { ReactEditorContent } from "./ReactEditorContent.js";
+import { ReactPlainText } from "./ReactPlainText.js";