@lobehub/editor 4.15.0 → 4.15.2

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

@@ -0,0 +1,119 @@
+import { createDebugLogger, init_debug } from "../../../utils/debug.js";
+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 { $createMathBlockNode, $createMathInlineNode, MathBlockNode, MathInlineNode } from "../node/index.js";
+import { registerMathCommand } from "../command/index.js";
+import { isLikelyMathContent } from "../utils/index.js";
+import { $createNodeSelection, $setSelection } from "lexical";
+//#region src/plugins/math/plugin/index.ts
+init_helper();
+init_plugin();
+init_debug();
+const MathPlugin = class extends KernelPlugin {
+	static {
+		this.pluginName = "MathPlugin";
+	}
+	constructor(kernel, config) {
+		super();
+		this.kernel = kernel;
+		this.config = config;
+		this.logger = createDebugLogger("plugin", "math");
+		kernel.registerNodes([MathInlineNode, MathBlockNode]);
+		if (config?.theme) kernel.registerThemes(config?.theme);
+		this.registerDecorator(kernel, MathInlineNode.getType(), (node, editor) => {
+			return config?.decorator ? config.decorator(node, editor) : null;
+		});
+		this.registerDecorator(kernel, MathBlockNode.getType(), (node, editor) => {
+			return config?.decorator ? config.decorator(node, editor) : null;
+		});
+	}
+	onInit(editor) {
+		this.register(registerMathCommand(editor));
+		this.registerMarkdown();
+		this.registerLiteXml();
+	}
+	registerLiteXml() {
+		const litexmlService = this.kernel.requireService(ILitexmlService);
+		if (!litexmlService) return;
+		litexmlService.registerXMLWriter(MathInlineNode.getType(), (node, ctx) => {
+			if (node instanceof MathInlineNode) {
+				const attributes = { code: node.getTextContent() };
+				return ctx.createXmlNode("math", attributes);
+			}
+			return false;
+		});
+		litexmlService.registerXMLWriter(MathBlockNode.getType(), (node, ctx) => {
+			if (node instanceof MathBlockNode) {
+				const attributes = { code: node.getTextContent() };
+				return ctx.createXmlNode("mathBlock", attributes);
+			}
+			return false;
+		});
+		litexmlService.registerXMLReader("math", (xmlNode) => {
+			return INodeHelper.createElementNode(MathInlineNode.getType(), {
+				code: xmlNode.getAttribute("code") || "",
+				version: 1
+			});
+		});
+		litexmlService.registerXMLReader("mathBlock", (xmlNode) => {
+			return INodeHelper.createElementNode(MathBlockNode.getType(), {
+				code: xmlNode.getAttribute("code") || "",
+				version: 1
+			});
+		});
+	}
+	registerMarkdown() {
+		const markdownService = this.kernel.requireService(IMarkdownShortCutService);
+		markdownService?.registerMarkdownShortCut({
+			regExp: /\$([^\s$](?:[^$]*[^\s$])?)\$\s?$/,
+			replace: (textNode, match) => {
+				const [, code] = match;
+				if (!isLikelyMathContent(code)) return;
+				const mathNode = $createMathInlineNode(code);
+				this.logger.debug("Math node inserted:", mathNode);
+				textNode.insertBefore(mathNode);
+				textNode.setTextContent("");
+				textNode.select();
+			},
+			trigger: "$",
+			type: "text-match"
+		});
+		markdownService?.registerMarkdownShortCut({
+			regExp: /^(\$\$)$/,
+			replace: (parentNode, _1, _2, isImport) => {
+				const node = $createMathBlockNode();
+				if (isImport || parentNode.getNextSibling()) parentNode.replace(node);
+				else parentNode.insertBefore(node);
+				const sel = $createNodeSelection();
+				sel.add(node.getKey());
+				$setSelection(sel);
+			},
+			trigger: "enter",
+			type: "element"
+		});
+		markdownService?.registerMarkdownWriter(MathInlineNode.getType(), (ctx, node) => {
+			ctx.appendLine(node.getTextContent());
+			return true;
+		});
+		markdownService?.registerMarkdownWriter(MathBlockNode.getType(), (ctx, node) => {
+			ctx.appendLine(node.getTextContent());
+			return true;
+		});
+		markdownService?.registerMarkdownReader("inlineMath", (node) => {
+			return INodeHelper.createElementNode("math", {
+				code: node.value,
+				version: 1
+			});
+		});
+		markdownService?.registerMarkdownReader("math", (node) => {
+			return INodeHelper.createElementNode("mathBlock", {
+				code: node.value,
+				version: 1
+			});
+		});
+	}
+};
+//#endregion
+export { MathPlugin };

package/es/plugins/math/react/components/MathEditor.js

@@ -0,0 +1,198 @@
+import { compareNodeOrder, init_utils } from "../../../../editor-kernel/utils.js";
+import { useLexicalComposerContext } from "../../../../editor-kernel/react/react-context.js";
+import { useLexicalEditor } from "../../../../editor-kernel/react/useLexicalEditor.js";
+import PortalAnchor from "../../../../editor-kernel/react/PortalAnchor.js";
+import { $isMathNode, MathBlockNode } from "../../node/index.js";
+import { SELECT_MATH_SIDE_COMMAND, UPDATE_MATH_COMMAND } from "../../command/index.js";
+import MathEditorContainer from "./MathEditorContainer.js";
+import MathEditorContent from "./MathEditorContent.js";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { $getNodeByKey, $getSelection, $isNodeSelection, $isRangeSelection } from "lexical";
+import { mergeRegister } from "@lexical/utils";
+//#region src/plugins/math/react/components/MathEditor.tsx
+init_utils();
+const MathEdit = memo(({ renderComp }) => {
+	const textareaRef = useRef(null);
+	const isUpdatingRef = useRef(false);
+	const [mathNode, setMathNode] = useState(null);
+	const [value, setValue] = useState("");
+	const lastValidRef = useRef("");
+	const isInputValidRef = useRef(true);
+	const [mathDOM, setMathDOM] = useState(null);
+	const [prev, setPrev] = useState(false);
+	const [isBlockMode, setIsBlockMode] = useState(false);
+	const [isOpen, setIsOpen] = useState(false);
+	const [editor] = useLexicalComposerContext();
+	useEffect(() => {
+		if (!mathNode) return;
+		if (!isInputValidRef.current) return;
+		const timeoutId = setTimeout(() => {
+			const lexicalEditor = editor.getLexicalEditor();
+			if (lexicalEditor && !isUpdatingRef.current) {
+				const currentCode = mathNode.code;
+				if (value && currentCode && currentCode === value) return;
+				isUpdatingRef.current = true;
+				lexicalEditor.update(() => {
+					if (lexicalEditor.getEditorState().read(() => {
+						return lexicalEditor.getElementByKey(mathNode.getKey());
+					})) {
+						const writableNode = mathNode.getWritable();
+						writableNode.__code = value;
+					}
+				});
+				setTimeout(() => {
+					isUpdatingRef.current = false;
+				}, 50);
+			}
+		}, 50);
+		return () => clearTimeout(timeoutId);
+	}, [
+		value,
+		mathNode,
+		editor
+	]);
+	const handleSubmit = useCallback(() => {
+		if (!mathNode) return;
+		const lexicalEditor = editor.getLexicalEditor();
+		if (lexicalEditor) {
+			const codeToCommit = isInputValidRef.current ? value : lastValidRef.current;
+			lexicalEditor.dispatchCommand(UPDATE_MATH_COMMAND, {
+				code: codeToCommit,
+				key: mathNode.getKey()
+			});
+		}
+	}, [
+		editor,
+		mathNode,
+		value
+	]);
+	const handleCancel = useCallback(() => {
+		if (!mathNode) return;
+		const lexicalEditor = editor.getLexicalEditor();
+		if (lexicalEditor) {
+			lexicalEditor.dispatchCommand(SELECT_MATH_SIDE_COMMAND, {
+				key: mathNode.getKey(),
+				prev: false
+			});
+			lexicalEditor.focus();
+		}
+	}, [mathNode, editor]);
+	const handleDelete = useCallback(() => {
+		if (!mathNode) return;
+		const lexicalEditor = editor.getLexicalEditor();
+		if (lexicalEditor) lexicalEditor.update(() => {
+			mathNode.remove();
+		});
+	}, [mathNode, editor]);
+	const handleArrowLeft = useCallback(() => {
+		if (!mathNode) return;
+		editor.dispatchCommand(SELECT_MATH_SIDE_COMMAND, {
+			key: mathNode.getKey(),
+			prev: true
+		});
+	}, [mathNode, editor]);
+	const handleArrowRight = useCallback(() => {
+		if (!mathNode) return;
+		editor.dispatchCommand(SELECT_MATH_SIDE_COMMAND, {
+			key: mathNode.getKey(),
+			prev: false
+		});
+	}, [mathNode, editor]);
+	const handleFocus = useCallback(() => {
+		textareaRef.current?.focus();
+		if (prev) textareaRef.current?.resizableTextArea?.textArea?.setSelectionRange(0, 0);
+	}, [prev]);
+	const setTextareaRef = useCallback((ref) => {
+		textareaRef.current = ref;
+	}, []);
+	useLexicalEditor((editor) => {
+		return mergeRegister(editor.registerUpdateListener(({ prevEditorState }) => {
+			if (isUpdatingRef.current) return;
+			const canEdit = editor.getEditorState().read(() => {
+				const selection = $getSelection();
+				if (!$isNodeSelection(selection)) return false;
+				const node = selection.getNodes()[0];
+				if (!$isMathNode(node)) return false;
+				const isSameNode = mathNode && mathNode.getKey() === node.getKey();
+				setMathNode(node);
+				if (!isSameNode && node.code !== value) {
+					setValue(node.code);
+					lastValidRef.current = node.code;
+					isInputValidRef.current = true;
+				}
+				setMathDOM(editor.getElementByKey(node.getKey()));
+				setIsBlockMode(node instanceof MathBlockNode);
+				return node;
+			});
+			if (canEdit) {
+				const anchorNodeKey = prevEditorState.read(() => {
+					const sel = prevEditorState._selection;
+					if (!$isRangeSelection(sel)) return false;
+					return sel.anchor.key;
+				});
+				editor.getEditorState().read(() => {
+					const anchorNode = anchorNodeKey ? $getNodeByKey(anchorNodeKey) : null;
+					if (anchorNode && compareNodeOrder(anchorNode, canEdit) < 0) setPrev(true);
+					else setPrev(false);
+				});
+				setIsOpen(true);
+			}
+			if (!canEdit) {
+				setMathNode(null);
+				setMathDOM(null);
+				setValue("");
+				lastValidRef.current = "";
+				isInputValidRef.current = true;
+				setIsBlockMode(false);
+				setIsOpen(false);
+			}
+		}));
+	}, [mathNode, value]);
+	const mathEditorContent = /* @__PURE__ */ jsx(MathEditorContent, {
+		focusRef: setTextareaRef,
+		mathNode,
+		onArrowLeft: handleArrowLeft,
+		onArrowRight: handleArrowRight,
+		onCancel: handleCancel,
+		onDelete: handleDelete,
+		onSubmit: handleSubmit,
+		onValidationChange: (isValid) => {
+			isInputValidRef.current = isValid;
+			if (isValid) lastValidRef.current = value;
+		},
+		onValueChange: setValue,
+		value
+	});
+	useEffect(() => {
+		if (!isOpen) return;
+		const handlePointerDown = (event) => {
+			const target = event.target;
+			if (!target) return;
+			if (Array.from(document.querySelectorAll("[data-math-editor-container]")).some((el) => el && el.contains(target))) return;
+			handleCancel();
+		};
+		document.addEventListener("mousedown", handlePointerDown);
+		document.addEventListener("touchstart", handlePointerDown);
+		return () => {
+			document.removeEventListener("mousedown", handlePointerDown);
+			document.removeEventListener("touchstart", handlePointerDown);
+		};
+	}, [isOpen, handleCancel]);
+	if (renderComp) return /* @__PURE__ */ jsx(Fragment, { children: renderComp({
+		children: /* @__PURE__ */ jsx("div", {
+			"data-math-editor-container": true,
+			children: mathEditorContent
+		}),
+		open: isOpen
+	}) });
+	return /* @__PURE__ */ jsx(PortalAnchor, { children: /* @__PURE__ */ jsx(MathEditorContainer, {
+		isBlockMode,
+		mathDOM,
+		onFocus: handleFocus,
+		prev,
+		children: mathEditorContent
+	}) });
+});
+//#endregion
+export { MathEdit as default };

package/es/plugins/math/react/components/MathEditorContainer.js

@@ -0,0 +1,101 @@
+import { cleanPosition, updatePosition } from "../../../../utils/updatePosition.js";
+import { styles } from "../style.js";
+import { Flexbox, Popover } from "@lobehub/ui";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/plugins/math/react/components/MathEditorContainer.tsx
+const MathEditorContainer = memo(({ children, isBlockMode, mathDOM, onFocus, prev }) => {
+	const anchorRef = useRef(null);
+	const [blockWidth, setBlockWidth] = useState(void 0);
+	const lastBlockWidthRef = useRef(void 0);
+	const setBlockWidthIfNeeded = useCallback((nextWidth) => {
+		const normalizedWidth = typeof nextWidth === "number" ? Math.round(nextWidth) : void 0;
+		if (lastBlockWidthRef.current === normalizedWidth) return;
+		lastBlockWidthRef.current = normalizedWidth;
+		setBlockWidth(normalizedWidth);
+	}, []);
+	const updateBlockWidth = useCallback(() => {
+		if (!isBlockMode) {
+			setBlockWidthIfNeeded(void 0);
+			return;
+		}
+		const editorContainer = mathDOM?.closest("[contenteditable=\"true\"]");
+		if (editorContainer) setBlockWidthIfNeeded(editorContainer.getBoundingClientRect().width);
+	}, [
+		isBlockMode,
+		mathDOM,
+		setBlockWidthIfNeeded
+	]);
+	const updateAnchorPosition = useCallback(() => {
+		return updatePosition({
+			callback: () => {
+				if (!anchorRef.current || !mathDOM) return;
+				onFocus?.();
+				updateBlockWidth();
+			},
+			floating: anchorRef.current,
+			placement: isBlockMode ? "bottom-start" : "bottom",
+			reference: mathDOM
+		});
+	}, [
+		isBlockMode,
+		mathDOM,
+		onFocus,
+		updateBlockWidth
+	]);
+	const handleAnchorClick = useCallback(() => {
+		if (!mathDOM) return;
+		updateAnchorPosition();
+	}, [mathDOM, updateAnchorPosition]);
+	useEffect(() => {
+		if (!mathDOM || !anchorRef.current) return;
+		const floating = anchorRef.current;
+		const resizeObserver = new ResizeObserver(() => {
+			updateBlockWidth();
+		});
+		resizeObserver.observe(floating);
+		let editorContainer = null;
+		if (isBlockMode) {
+			editorContainer = mathDOM.closest("[contenteditable=\"true\"]");
+			if (editorContainer) resizeObserver.observe(editorContainer);
+		}
+		updateAnchorPosition();
+		window.addEventListener("resize", updateAnchorPosition);
+		return () => {
+			resizeObserver.disconnect();
+			window.removeEventListener("resize", updateAnchorPosition);
+		};
+	}, [
+		mathDOM,
+		prev,
+		isBlockMode,
+		updateAnchorPosition
+	]);
+	useEffect(() => {
+		if (mathDOM || !anchorRef.current) return;
+		cleanPosition(anchorRef.current);
+	}, [mathDOM]);
+	return /* @__PURE__ */ jsx(Popover, {
+		arrow: false,
+		content: /* @__PURE__ */ jsx(Flexbox, {
+			className: styles.mathEditor,
+			"data-math-editor-container": true,
+			style: blockWidth ? { width: blockWidth } : void 0,
+			children
+		}),
+		open: !!mathDOM,
+		placement: isBlockMode ? "bottomLeft" : "bottom",
+		styles: { content: {
+			borderRadius: "6px",
+			padding: 0
+		} },
+		children: /* @__PURE__ */ jsx("span", {
+			className: styles.mathEditorAnchor,
+			onClick: handleAnchorClick,
+			ref: anchorRef
+		})
+	});
+});
+MathEditorContainer.displayName = "MathEditorContainer";
+//#endregion
+export { MathEditorContainer as default };

package/es/plugins/math/react/components/MathEditorContent.js

@@ -0,0 +1,133 @@
+import { CONTROL_OR_META, init_sys } from "../../../../common/sys.js";
+import { useTranslation } from "../../../../editor-kernel/react/useTranslation.js";
+import { styles } from "../style.js";
+import { Button, Flexbox, Hotkey, Text, TextArea } from "@lobehub/ui";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { isModifierMatch } from "lexical";
+import { renderToString } from "katex";
+//#region src/plugins/math/react/components/MathEditorContent.tsx
+init_sys();
+const MathEditorContent = memo(({ focusRef, mathNode, onArrowLeft, onArrowRight, onCancel, onDelete, onSubmit, onValidationChange, onValueChange, value }) => {
+	const t = useTranslation();
+	const textareaRef = useRef(null);
+	const [latexError, setLatexError] = useState("");
+	useEffect(() => {
+		focusRef?.(textareaRef.current);
+	}, [focusRef]);
+	useEffect(() => {
+		if (!mathNode) return;
+		if (!value.trim()) {
+			setLatexError("");
+			onValidationChange?.(true);
+			return;
+		}
+		const timeoutId = setTimeout(() => {
+			try {
+				renderToString(value, {
+					displayMode: true,
+					throwOnError: true
+				});
+				setLatexError("");
+				onValidationChange?.(true);
+			} catch (error) {
+				setLatexError(error instanceof Error ? error.message : "LaTeX Parse Error");
+				onValidationChange?.(false);
+			}
+		}, 50);
+		return () => clearTimeout(timeoutId);
+	}, [
+		value,
+		mathNode,
+		onValidationChange
+	]);
+	const handleKeyDown = useCallback((e) => {
+		if (!mathNode) return;
+		if (isModifierMatch(e, CONTROL_OR_META) && e.key === "Enter") {
+			e.preventDefault();
+			onSubmit();
+			return;
+		}
+		if (e.key === "Escape") {
+			e.preventDefault();
+			onCancel();
+			return;
+		}
+		if (e.key === "Backspace" && !value.trim()) {
+			e.preventDefault();
+			onDelete();
+			return;
+		}
+		if (e.key === "ArrowLeft" && e.currentTarget.selectionStart === 0) {
+			e.preventDefault();
+			onArrowLeft();
+		}
+		if (e.key === "ArrowRight" && e.currentTarget.selectionStart === e.currentTarget.value.length) {
+			e.preventDefault();
+			onArrowRight();
+		}
+	}, [
+		mathNode,
+		onSubmit,
+		onCancel,
+		onDelete,
+		onArrowLeft,
+		onArrowRight,
+		value
+	]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(TextArea, {
+			autoFocus: true,
+			autoSize: {
+				maxRows: 6,
+				minRows: 1
+			},
+			className: styles.mathEditorTextArea,
+			onChange: (e) => {
+				onValueChange(e.target.value);
+			},
+			onKeyDown: handleKeyDown,
+			placeholder: `${t("math.placeholder")}...`,
+			ref: textareaRef,
+			resize: false,
+			value,
+			variant: "borderless"
+		}),
+		latexError && /* @__PURE__ */ jsx(Flexbox, {
+			className: styles.mathEditorFooter,
+			horizontal: true,
+			paddingBlock: 4,
+			paddingInline: 12,
+			width: "100%",
+			children: /* @__PURE__ */ jsx(Text, {
+				fontSize: 13,
+				type: "danger",
+				children: latexError
+			})
+		}),
+		/* @__PURE__ */ jsx(Flexbox, {
+			className: styles.mathEditorFooter,
+			horizontal: true,
+			justify: "flex-end",
+			padding: 4,
+			width: "100%",
+			children: /* @__PURE__ */ jsxs(Button, {
+				onClick: (e) => {
+					e.preventDefault();
+					onSubmit();
+				},
+				size: "small",
+				type: "text",
+				variant: "filled",
+				children: [t("confirm"), /* @__PURE__ */ jsx(Hotkey, {
+					compact: true,
+					keys: "mod+enter",
+					variant: "borderless"
+				})]
+			})
+		})
+	] });
+});
+MathEditorContent.displayName = "MathEditorContent";
+//#endregion
+export { MathEditorContent as default };

package/es/plugins/math/react/components/MathInline.js

@@ -0,0 +1,86 @@
+import { createDebugLogger, init_debug } from "../../../../utils/debug.js";
+import { useLexicalEditor } from "../../../../editor-kernel/react/useLexicalEditor.js";
+import { useLexicalNodeSelection } from "../../../../editor-kernel/react/useLexicalNodeSelection.js";
+import { $isMathNode, MathBlockNode } from "../../node/index.js";
+import Placeholder from "./Placeholder.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { $getSelection, $isNodeSelection } from "lexical";
+import { addClassNamesToElement, removeClassNamesFromElement } from "@lexical/utils";
+import katex from "katex";
+//#region src/plugins/math/react/components/MathInline.tsx
+init_debug();
+const logger = createDebugLogger("plugin", "math");
+const MathInline = ({ editor, node, className }) => {
+	const ref = useRef(null);
+	const [isSelected, setIsSelected, clearSelected] = useLexicalNodeSelection(node.getKey());
+	const [isEditing, setIsEditing] = useState(false);
+	const isMathBlock = node instanceof MathBlockNode;
+	useEffect(() => {
+		if (ref.current && node.code) katex.render(node.code, ref.current, {
+			displayMode: node instanceof MathBlockNode,
+			throwOnError: false
+		});
+	}, [node.code]);
+	useEffect(() => {
+		const parent = editor.getElementByKey(node.getKey());
+		if (parent) {
+			const timeoutId = setTimeout(() => {
+				if (isEditing) {
+					addClassNamesToElement(parent, "editing");
+					removeClassNamesFromElement(parent, "selected");
+				} else if (isSelected) {
+					addClassNamesToElement(parent, "selected");
+					removeClassNamesFromElement(parent, "editing");
+				} else {
+					removeClassNamesFromElement(parent, "selected");
+					removeClassNamesFromElement(parent, "editing");
+				}
+			}, 10);
+			return () => clearTimeout(timeoutId);
+		}
+	}, [
+		isSelected,
+		isEditing,
+		editor,
+		node
+	]);
+	useLexicalEditor((editor) => {
+		return editor.registerUpdateListener(() => {
+			editor.getEditorState().read(() => {
+				const selection = $getSelection();
+				if (!$isNodeSelection(selection)) {
+					setIsEditing(false);
+					return;
+				}
+				const selectedNode = selection.getNodes()[0];
+				if (!$isMathNode(selectedNode)) {
+					setIsEditing(false);
+					return;
+				}
+				if (selectedNode.getKey() === node.getKey()) setIsEditing(true);
+				else setIsEditing(false);
+			});
+		});
+	}, [node]);
+	return /* @__PURE__ */ jsx("span", {
+		className,
+		onClick: useCallback((e) => {
+			logger.debug("📊 Math click event:", e.target === ref.current);
+			e.preventDefault();
+			e.stopPropagation();
+			if (isSelected) clearSelected();
+			setIsSelected(true);
+			editor.focus();
+		}, [
+			clearSelected,
+			editor,
+			isSelected,
+			setIsSelected
+		]),
+		ref,
+		children: node.code ? node.code : /* @__PURE__ */ jsx(Placeholder, { mathBlock: isMathBlock })
+	});
+};
+//#endregion
+export { MathInline as default };

package/es/plugins/math/react/components/Placeholder.js

@@ -0,0 +1,24 @@
+import { useTranslation } from "../../../../editor-kernel/react/useTranslation.js";
+import { styles } from "../style.js";
+import { Center, Text } from "@lobehub/ui";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/plugins/math/react/components/Placeholder.tsx
+const Placeholder = ({ mathBlock }) => {
+	const t = useTranslation();
+	const node = /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		className: cx("katex", styles.mathPlaceholder),
+		fontSize: mathBlock ? "1.2em" : "1em",
+		type: "secondary",
+		children: t("math.placeholder")
+	});
+	if (!mathBlock) return node;
+	return /* @__PURE__ */ jsx(Center, {
+		padding: 18,
+		width: "100%",
+		children: node
+	});
+};
+//#endregion
+export { Placeholder as default };

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

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