@lobehub/editor 1.4.7 → 1.5.0

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

@@ -0,0 +1,253 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { mergeRegister } from '@lexical/utils';
+import { $getSelection, $isElementNode, $isNodeSelection, $isRangeSelection, $isTextNode } from 'lexical';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { useLexicalComposerContext, useLexicalEditor } from "../../../../editor-kernel/react";
+import { SELECT_MATH_SIDE_COMMAND, UPDATE_MATH_COMMAND } from "../../command";
+import { $isMathNode, MathBlockNode } from "../../node";
+import { MathEditorContainer } from "./MathEditorContainer";
+import { MathEditorContent } from "./MathEditorContent";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var MathEdit = /*#__PURE__*/memo(function (_ref) {
+  var renderComp = _ref.renderComp;
+  var textareaRef = useRef(null);
+  var isUpdatingRef = useRef(false);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    mathNode = _useState2[0],
+    setMathNode = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    mathDOM = _useState6[0],
+    setMathDOM = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    prev = _useState8[0],
+    setPrev = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isBlockMode = _useState10[0],
+    setIsBlockMode = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    isOpen = _useState12[0],
+    setIsOpen = _useState12[1];
+  var _useLexicalComposerCo = useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+
+  // 实时更新节点内容
+  useEffect(function () {
+    if (!mathNode) return;
+
+    // 使用防抖来避免过于频繁的更新
+    var timeoutId = setTimeout(function () {
+      // 直接更新节点内容
+      var lexicalEditor = editor.getLexicalEditor();
+      if (lexicalEditor && !isUpdatingRef.current) {
+        // 检查当前值是否与节点中的值不同，避免不必要的更新
+        var currentCode = mathNode.code;
+        if (currentCode === value) {
+          return; // 值相同，无需更新
+        }
+        isUpdatingRef.current = true;
+        lexicalEditor.update(function () {
+          var currentNode = lexicalEditor.getEditorState().read(function () {
+            return lexicalEditor.getElementByKey(mathNode.getKey());
+          });
+          if (currentNode) {
+            var writableNode = mathNode.getWritable();
+            writableNode.__code = value;
+          }
+        });
+        // 延迟重置更新标志，确保更新监听器不会立即触发
+        setTimeout(function () {
+          isUpdatingRef.current = false;
+        }, 100);
+      }
+    }, 100); // 增加防抖延迟
+
+    return function () {
+      return clearTimeout(timeoutId);
+    };
+  }, [value, mathNode, editor]);
+
+  // 提交逻辑
+  var handleSubmit = useCallback(function () {
+    if (!mathNode) return;
+    var lexicalEditor = editor.getLexicalEditor();
+    if (lexicalEditor) {
+      // 提交时总是使用原始的 value，不包含错误标记
+      lexicalEditor.dispatchCommand(UPDATE_MATH_COMMAND, {
+        code: value,
+        key: mathNode.getKey()
+      });
+    }
+  }, [editor, mathNode, value]);
+
+  // 取消编辑，不保存更改
+  var handleCancel = useCallback(function () {
+    if (!mathNode) return;
+    var lexicalEditor = editor.getLexicalEditor();
+    if (lexicalEditor) {
+      // 使用命令来正确设置光标位置到数学节点之后
+      lexicalEditor.dispatchCommand(SELECT_MATH_SIDE_COMMAND, {
+        key: mathNode.getKey(),
+        prev: false
+      });
+
+      // 将焦点返回到编辑器
+      lexicalEditor.focus();
+    }
+  }, [mathNode, editor]);
+
+  // 删除节点
+  var handleDelete = useCallback(function () {
+    if (!mathNode) return;
+    var lexicalEditor = editor.getLexicalEditor();
+    if (lexicalEditor) {
+      lexicalEditor.update(function () {
+        mathNode.remove();
+      });
+    }
+  }, [mathNode, editor]);
+
+  // 左箭头导航
+  var handleArrowLeft = useCallback(function () {
+    if (!mathNode) return;
+    editor.dispatchCommand(SELECT_MATH_SIDE_COMMAND, {
+      key: mathNode.getKey(),
+      prev: true
+    });
+  }, [mathNode, editor]);
+
+  // 右箭头导航
+  var handleArrowRight = useCallback(function () {
+    if (!mathNode) return;
+    editor.dispatchCommand(SELECT_MATH_SIDE_COMMAND, {
+      key: mathNode.getKey(),
+      prev: false
+    });
+  }, [mathNode, editor]);
+
+  // 处理焦点
+  var handleFocus = useCallback(function () {
+    var _textareaRef$current;
+    (_textareaRef$current = textareaRef.current) === null || _textareaRef$current === void 0 || _textareaRef$current.focus();
+    if (prev) {
+      var _textareaRef$current2;
+      (_textareaRef$current2 = textareaRef.current) === null || _textareaRef$current2 === void 0 || (_textareaRef$current2 = _textareaRef$current2.resizableTextArea) === null || _textareaRef$current2 === void 0 || (_textareaRef$current2 = _textareaRef$current2.textArea) === null || _textareaRef$current2 === void 0 || _textareaRef$current2.setSelectionRange(0, 0);
+    }
+  }, [prev]);
+
+  // 设置 textarea ref
+  var setTextareaRef = useCallback(function (ref) {
+    textareaRef.current = ref;
+  }, []);
+  useLexicalEditor(function (editor) {
+    return mergeRegister(editor.registerUpdateListener(function (_ref2) {
+      var prevEditorState = _ref2.prevEditorState;
+      // 如果正在更新中，跳过此次监听器调用
+      if (isUpdatingRef.current) {
+        return;
+      }
+
+      // Handle editor state updates
+      var canEdit = editor.read(function () {
+        var selection = $getSelection();
+        if (!$isNodeSelection(selection)) {
+          return false;
+        }
+        var node = selection.getNodes()[0];
+        if (!$isMathNode(node)) {
+          // Handle math node
+          return false;
+        }
+
+        // 检查是否是同一个节点，避免不必要的状态更新
+        var isSameNode = mathNode && mathNode.getKey() === node.getKey();
+        setMathNode(node);
+        // 只有在不是同一个节点或值真正改变时才更新 value
+        if (!isSameNode && node.code !== value) {
+          setValue(node.code);
+        }
+        setMathDOM(editor.getElementByKey(node.getKey()));
+        setIsBlockMode(node instanceof MathBlockNode);
+        return node;
+      });
+      if (canEdit) {
+        var node = prevEditorState.read(function () {
+          var sel = prevEditorState._selection;
+          if (!$isRangeSelection(sel) || !sel.isCollapsed()) {
+            return false;
+          }
+          var node = sel.anchor.getNode();
+          if ($isTextNode(node)) {
+            return node.getNextSibling();
+          }
+          if (!$isElementNode(node)) {
+            return false;
+          }
+          return node.getChildAtIndex(sel.anchor.offset);
+        });
+        if (canEdit === node) {
+          setPrev(true);
+        } else {
+          setPrev(false);
+        }
+        setIsOpen(true);
+      }
+      if (!canEdit) {
+        setMathNode(null);
+        setMathDOM(null);
+        setValue('');
+        setIsBlockMode(false);
+        setIsOpen(false);
+      }
+    }));
+  }, [mathNode, value]);
+
+  // 构建 MathEditorContent 组件
+  var mathEditorContent = /*#__PURE__*/_jsx(MathEditorContent, {
+    focusRef: setTextareaRef,
+    mathNode: mathNode,
+    onArrowLeft: handleArrowLeft,
+    onArrowRight: handleArrowRight,
+    onCancel: handleCancel,
+    onDelete: handleDelete,
+    onSubmit: handleSubmit,
+    onValueChange: setValue,
+    prev: prev,
+    value: value
+  });
+
+  // 如果有自定义渲染组件，使用它来包装 MathEditorContent
+  if (renderComp) {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: renderComp({
+        children: mathEditorContent,
+        open: isOpen
+      })
+    });
+  }
+
+  // 否则使用默认的 MathEditorContainer
+  return /*#__PURE__*/_jsx(MathEditorContainer, {
+    isBlockMode: isBlockMode,
+    mathDOM: mathDOM,
+    onFocus: handleFocus,
+    prev: prev,
+    children: mathEditorContent
+  });
+});
+export default MathEdit;

package/es/plugins/math/react/component/MathEditorContainer.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+export interface MathEditorContainerProps {
+    /** 子组件内容 */
+    children: ReactNode;
+    /** 是否为块模式 */
+    isBlockMode: boolean;
+    /** 数学节点对应的 DOM 元素 */
+    mathDOM: HTMLElement | null;
+    /** 焦点回调 */
+    onFocus?: () => void;
+    /** 是否从前一个位置进入 */
+    prev: boolean;
+}
+export declare const MathEditorContainer: import("react").NamedExoticComponent<MathEditorContainerProps>;

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

@@ -0,0 +1,60 @@
+import { computePosition, flip, offset, shift } from '@floating-ui/dom';
+import { Block } from '@lobehub/ui';
+import { memo, useEffect, useRef } from 'react';
+import { useStyles } from "../style";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var MathEditorContainer = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children,
+    isBlockMode = _ref.isBlockMode,
+    mathDOM = _ref.mathDOM,
+    onFocus = _ref.onFocus,
+    prev = _ref.prev;
+  var divRef = useRef(null);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  useEffect(function () {
+    if (!mathDOM || !divRef.current) {
+      return;
+    }
+
+    // Inline 模式下使用默认的 floating-ui 定位
+    computePosition(mathDOM, divRef.current, {
+      middleware: [offset(8), flip(), shift()],
+      placement: 'bottom-start'
+    }).then(function (_ref2) {
+      var x = _ref2.x,
+        y = _ref2.y;
+      if (divRef.current) {
+        divRef.current.style.left = "".concat(x, "px");
+        divRef.current.style.top = "".concat(y, "px");
+        divRef.current.style.width = ''; // 重置宽度
+        onFocus === null || onFocus === void 0 || onFocus();
+      }
+      if (isBlockMode && divRef.current) {
+        // Block 模式下，获取主编辑器容器的位置和宽度
+        var editorContainer = mathDOM.closest('[contenteditable="true"]');
+        if (editorContainer) {
+          var containerRect = editorContainer.getBoundingClientRect();
+          divRef.current.style.width = "".concat(containerRect.width, "px");
+          onFocus === null || onFocus === void 0 || onFocus();
+        }
+      }
+    });
+  }, [mathDOM, prev, isBlockMode, onFocus]);
+
+  // 当没有 mathDOM 时，隐藏容器
+  useEffect(function () {
+    if (!mathDOM && divRef.current) {
+      divRef.current.style.left = "-9999px";
+      divRef.current.style.top = "-9999px";
+    }
+  }, [mathDOM]);
+  return /*#__PURE__*/_jsx(Block, {
+    className: styles.mathEditor,
+    ref: divRef,
+    shadow: true,
+    variant: 'outlined',
+    children: children
+  });
+});
+MathEditorContainer.displayName = 'MathEditorContainer';

package/es/plugins/math/react/component/MathEditorContent.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { type TextAreaRef } from 'antd/es/input/TextArea';
+import { MathBlockNode, MathInlineNode } from '../../node';
+export interface MathEditorContentProps {
+    /** 焦点引用 */
+    focusRef?: (ref: TextAreaRef | null) => void;
+    /** 数学节点 */
+    mathNode: MathInlineNode | MathBlockNode | null;
+    /** 左箭头回调 */
+    onArrowLeft: () => void;
+    /** 右箭头回调 */
+    onArrowRight: () => void;
+    /** 取消回调 */
+    onCancel: () => void;
+    /** 删除节点回调 */
+    onDelete: () => void;
+    /** 提交回调 */
+    onSubmit: () => void;
+    /** 值变化回调 */
+    onValueChange: (value: string) => void;
+    /** 是否从前一个位置进入 */
+    prev: boolean;
+    /** 当前输入值 */
+    value: string;
+}
+export declare const MathEditorContent: import("react").NamedExoticComponent<MathEditorContentProps>;

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

@@ -0,0 +1,163 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Button, Hotkey, Text, TextArea } from '@lobehub/ui';
+import { renderToString } from 'katex';
+import { isModifierMatch } from 'lexical';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { CONTROL_OR_META } from "../../../../common/sys";
+import { useTranslation } from "../../../../editor-kernel/react/useTranslation";
+import { useStyles } from "../style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export var MathEditorContent = /*#__PURE__*/memo(function (_ref) {
+  var focusRef = _ref.focusRef,
+    mathNode = _ref.mathNode,
+    onArrowLeft = _ref.onArrowLeft,
+    onArrowRight = _ref.onArrowRight,
+    onCancel = _ref.onCancel,
+    onDelete = _ref.onDelete,
+    onSubmit = _ref.onSubmit,
+    onValueChange = _ref.onValueChange,
+    prev = _ref.prev,
+    value = _ref.value;
+  var t = useTranslation();
+  var textareaRef = useRef(null);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    latexError = _useState2[0],
+    setLatexError = _useState2[1];
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+
+  // 将 ref 暴露给父组件
+  useEffect(function () {
+    focusRef === null || focusRef === void 0 || focusRef(textareaRef.current);
+  }, [focusRef]);
+
+  // 聚焦和光标位置处理
+  useEffect(function () {
+    if (textareaRef.current) {
+      textareaRef.current.focus();
+      if (prev) {
+        var _textareaRef$current$;
+        (_textareaRef$current$ = textareaRef.current.resizableTextArea) === null || _textareaRef$current$ === void 0 || (_textareaRef$current$ = _textareaRef$current$.textArea) === null || _textareaRef$current$ === void 0 || _textareaRef$current$.setSelectionRange(0, 0);
+      }
+    }
+  }, [prev]);
+
+  // 实时验证 LaTeX 语法
+  useEffect(function () {
+    if (!mathNode) return;
+    var isEmpty = !value.trim();
+    if (isEmpty) {
+      setLatexError('');
+      return;
+    }
+
+    // 使用防抖来避免过于频繁的验证
+    var timeoutId = setTimeout(function () {
+      try {
+        renderToString(value, {
+          displayMode: true,
+          throwOnError: true
+        });
+        // 验证成功：清除错误
+        setLatexError('');
+      } catch (error) {
+        // 验证失败：设置错误信息
+        var errorMessage = error instanceof Error ? error.message : 'LaTeX Parse Error';
+        setLatexError(errorMessage);
+      }
+    }, 50);
+    return function () {
+      return clearTimeout(timeoutId);
+    };
+  }, [value, mathNode]);
+  var handleKeyDown = useCallback(function (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
+      },
+      onChange: function onChange(e) {
+        onValueChange(e.target.value);
+      },
+      onKeyDown: handleKeyDown,
+      placeholder: "".concat(t('math.placeholder'), "..."),
+      ref: textareaRef,
+      resize: false,
+      style: {
+        marginBlock: 4
+      },
+      value: 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: function 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';

package/es/plugins/math/react/component/MathInline.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { LexicalEditor } from 'lexical';
+import { MathBlockNode, MathInlineNode } from '../../node';
+export interface MathInlineProps {
+    className?: string;
+    editor: LexicalEditor;
+    node: MathInlineNode | MathBlockNode;
+}
+declare const MathInline: import("react").NamedExoticComponent<MathInlineProps>;
+export default MathInline;

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

@@ -0,0 +1,105 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { addClassNamesToElement, removeClassNamesFromElement } from '@lexical/utils';
+import Katex from 'katex';
+import { $getSelection, $isNodeSelection, CLICK_COMMAND, COMMAND_PRIORITY_NORMAL } from 'lexical';
+import { memo, useEffect, useRef, useState } from 'react';
+import { useLexicalEditor } from "../../../../editor-kernel/react";
+import { useLexicalNodeSelection } from "../../../../editor-kernel/react/useLexicalNodeSelection";
+import { $isMathNode, MathBlockNode } from "../../node";
+import Placeholder from "./Placeholder";
+import { jsx as _jsx } from "react/jsx-runtime";
+var MathInline = /*#__PURE__*/memo(function (_ref) {
+  var editor = _ref.editor,
+    node = _ref.node,
+    className = _ref.className;
+  var ref = useRef(null);
+  var _useLexicalNodeSelect = useLexicalNodeSelection(node.getKey()),
+    _useLexicalNodeSelect2 = _slicedToArray(_useLexicalNodeSelect, 2),
+    isSelected = _useLexicalNodeSelect2[0],
+    setSelected = _useLexicalNodeSelect2[1];
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isEditing = _useState2[0],
+    setIsEditing = _useState2[1];
+  useEffect(function () {
+    if (ref.current && node.code) {
+      Katex.render(node.code, ref.current, {
+        throwOnError: false
+      });
+    }
+  }, [node.code]);
+  useEffect(function () {
+    var parent = editor.getElementByKey(node.getKey());
+    if (parent) {
+      // 防抖处理，避免过于频繁的 DOM 操作
+      var timeoutId = setTimeout(function () {
+        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 function () {
+        return clearTimeout(timeoutId);
+      };
+    }
+  }, [isSelected, isEditing, editor, node]);
+  useLexicalEditor(function (editor) {
+    return editor.registerCommand(CLICK_COMMAND, function (payload) {
+      console.info(payload, payload.target, ref.current);
+      if (payload.target && payload.target instanceof Node) {
+        var _ref$current;
+        // 获取节点对应的 DOM 元素
+        var nodeElement = editor.getElementByKey(node.getKey());
+
+        // 对于 block 模式，检查是否点击在整个节点容器内
+        // 对于 inline 模式，仍然检查是否点击在渲染内容内
+        var isClickInNode = node instanceof MathBlockNode ? nodeElement === null || nodeElement === void 0 ? void 0 : nodeElement.contains(payload.target) : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.contains(payload.target);
+        if (isClickInNode) {
+          setSelected(true);
+        }
+      }
+      return false;
+    }, COMMAND_PRIORITY_NORMAL);
+  }, [node]);
+
+  // 监听编辑器状态变化来检测编辑状态
+  useLexicalEditor(function (editor) {
+    return editor.registerUpdateListener(function () {
+      editor.read(function () {
+        var selection = $getSelection();
+        if (!$isNodeSelection(selection)) {
+          setIsEditing(false);
+          return;
+        }
+        var 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: className,
+    ref: ref,
+    children: node.code ? node.code : /*#__PURE__*/_jsx(Placeholder, {})
+  });
+});
+export default MathInline;

package/es/plugins/math/react/component/Placeholder.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Placeholder: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export default Placeholder;

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

@@ -0,0 +1,19 @@
+import { Text } from '@lobehub/ui';
+import { memo } from 'react';
+import { useTranslation } from "../../../../editor-kernel/react/useTranslation";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Placeholder = /*#__PURE__*/memo(function () {
+  var t = useTranslation();
+  return /*#__PURE__*/_jsx(Text, {
+    as: 'span',
+    className: 'katex',
+    fontSize: '1em',
+    style: {
+      fontStyle: 'italic',
+      paddingInline: '0.2em'
+    },
+    type: 'secondary',
+    children: t('math.placeholder')
+  });
+});
+export default Placeholder;

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

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import { ReactMathPluginProps } from './type';
+export declare const ReactMathPlugin: FC<ReactMathPluginProps>;