@lobehub/editor 1.6.0 → 1.6.2

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

@@ -43,7 +43,7 @@ var Placeholder = /*#__PURE__*/memo(function (_ref) {
   if (!canShowPlaceholder) {
     return null;
   }
-  return /*#__PURE__*/_jsx("p", {
+  return /*#__PURE__*/_jsx("div", {
     className: styles.placeholder,
     style: style,
     children: children

package/es/plugins/link/react/ReactLinkPlugin.js

@@ -123,12 +123,10 @@ export var ReactLinkPlugin = function ReactLinkPlugin(_ref) {
       },
       onMouseLeave: function onMouseLeave() {
         clearTimeout(clearTimerRef.current);
-        clearTimerRef.current = setTimeout(function () {
-          if (divRef.current) {
-            divRef.current.style.left = '-9999px';
-            divRef.current.style.top = '-9999px';
-          }
-        }, 300);
+        if (divRef.current) {
+          divRef.current.style.left = '-9999px';
+          divRef.current.style.top = '-9999px';
+        }
       },
       ref: divRef
     }), /*#__PURE__*/_jsx(LinkEdit, {})]

package/es/plugins/link/react/components/LinkToolbar.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["linkNode", "editor"];
+var _excluded = ["linkNode", "editor", "onMouseLeave"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -22,6 +22,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 var LinkToolbar = /*#__PURE__*/memo(function (_ref) {
   var linkNode = _ref.linkNode,
     editor = _ref.editor,
+    onMouseLeave = _ref.onMouseLeave,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(),
     styles = _useStyles.styles;
@@ -94,8 +95,12 @@ var LinkToolbar = /*#__PURE__*/memo(function (_ref) {
       icon: UnlinkIcon,
       key: 'unlink',
       label: t('link.unlink'),
-      onClick: handleRemove
+      onClick: function onClick(e) {
+        handleRemove();
+        onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave(e);
+      }
     }],
+    onMouseLeave: onMouseLeave,
     shadow: true,
     size: {
       blockSize: 32,

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

@@ -58,13 +58,20 @@ var MathEdit = /*#__PURE__*/memo(function (_ref) {
       // 直接更新节点内容
       var lexicalEditor = editor.getLexicalEditor();
       if (lexicalEditor && !isUpdatingRef.current) {
-        // 仅在校验通过时更新文档；失败时不更新，保持最后一次成功渲染
         if (!isInputValidRef.current) {
+          var currentNode = lexicalEditor.getEditorState().read(function () {
+            return lexicalEditor.getElementByKey(mathNode.getKey());
+          });
+          if (currentNode) {
+            var writableNode = mathNode.getWritable();
+            writableNode.__code = value;
+          }
           return;
         }
+
         // 检查当前值是否与节点中的值不同，避免不必要的更新
         var currentCode = mathNode.code;
-        if (currentCode === value) {
+        if (value && currentCode && currentCode === value) {
           return; // 值相同，无需更新
         }
         isUpdatingRef.current = true;
@@ -73,8 +80,8 @@ var MathEdit = /*#__PURE__*/memo(function (_ref) {
             return lexicalEditor.getElementByKey(mathNode.getKey());
           });
           if (currentNode) {
-            var writableNode = mathNode.getWritable();
-            writableNode.__code = value;
+            var _writableNode = mathNode.getWritable();
+            _writableNode.__code = value;
           }
         });
         // 延迟重置更新标志，确保更新监听器不会立即触发
@@ -255,8 +262,12 @@ var MathEdit = /*#__PURE__*/memo(function (_ref) {
     var handlePointerDown = function handlePointerDown(event) {
       var target = event.target;
       if (!target) return;
-      var container = document.querySelector('[data-math-editor-container]');
-      if (container && container.contains(target)) return;
+
+      // 支持多个容器（例如使用 renderComp 渲染到外部节点时，会有额外容器）
+      var containers = Array.from(document.querySelectorAll('[data-math-editor-container]'));
+      if (containers.some(function (el) {
+        return el && el.contains(target);
+      })) return;
       handleCancel();
     };
     document.addEventListener('mousedown', handlePointerDown);
@@ -269,9 +280,14 @@ var MathEdit = /*#__PURE__*/memo(function (_ref) {
 
   // 如果有自定义渲染组件，使用它来包装 MathEditorContent
   if (renderComp) {
+    // 为自定义渲染的内容增加容器标记，便于外部点击检测
+    var wrapped = /*#__PURE__*/_jsx("div", {
+      "data-math-editor-container": true,
+      children: mathEditorContent
+    });
     return /*#__PURE__*/_jsx(_Fragment, {
       children: renderComp({
-        children: mathEditorContent,
+        children: wrapped,
         open: isOpen
       })
     });

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

@@ -13,33 +13,48 @@ export var MathEditorContainer = /*#__PURE__*/memo(function (_ref) {
   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();
+    if (!mathDOM || !divRef.current) return;
+    var floating = divRef.current;
+    var updatePosition = function updatePosition() {
+      if (!mathDOM || !floating) return;
+      computePosition(mathDOM, floating, {
+        middleware: [offset(8), flip(), shift()],
+        placement: 'bottom-start'
+      }).then(function (_ref2) {
+        var x = _ref2.x,
+          y = _ref2.y;
+        if (!floating) return;
+        floating.style.left = "".concat(x, "px");
+        floating.style.top = "".concat(y, "px");
+        floating.style.width = '';
+        if (isBlockMode) {
+          var _editorContainer = mathDOM.closest('[contenteditable="true"]');
+          if (_editorContainer) {
+            var containerRect = _editorContainer.getBoundingClientRect();
+            floating.style.width = "".concat(containerRect.width, "px");
+          }
         }
-      }
+      });
+    };
+
+    // 监听尺寸变化，随内容变化重新定位
+    var resizeObserver = new ResizeObserver(function () {
+      return updatePosition();
     });
+    resizeObserver.observe(mathDOM);
+    resizeObserver.observe(floating);
+    var editorContainer = null;
+    if (isBlockMode) {
+      editorContainer = mathDOM.closest('[contenteditable="true"]');
+      if (editorContainer) resizeObserver.observe(editorContainer);
+    }
+
+    // 窗口尺寸变化时也重新定位
+    window.addEventListener('resize', updatePosition);
+    return function () {
+      resizeObserver.disconnect();
+      window.removeEventListener('resize', updatePosition);
+    };
   }, [mathDOM, prev, isBlockMode, onFocus]);
 
   // 当没有 mathDOM 时，隐藏容器
@@ -52,6 +67,9 @@ export var MathEditorContainer = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/_jsx(Block, {
     className: styles.mathEditor,
     "data-math-editor-container": true,
+    onClick: function onClick(e) {
+      e.preventDefault();
+    },
     ref: divRef,
     shadow: true,
     variant: 'outlined',

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

@@ -28,9 +28,12 @@ var MathInline = /*#__PURE__*/memo(function (_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isEditing = _useState2[0],
     setIsEditing = _useState2[1];
+  var isMathBlock = node instanceof MathBlockNode;
   useEffect(function () {
     if (ref.current && node.code) {
       Katex.render(node.code, ref.current, {
+        // 使用 displayMode 渲染块级公式
+        displayMode: node instanceof MathBlockNode,
         throwOnError: false
       });
     }
@@ -101,7 +104,9 @@ var MathInline = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/_jsx("span", {
     className: className,
     ref: ref,
-    children: node.code ? node.code : /*#__PURE__*/_jsx(Placeholder, {})
+    children: node.code ? node.code : /*#__PURE__*/_jsx(Placeholder, {
+      mathBlock: isMathBlock
+    })
   });
 });
 export default MathInline;

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

@@ -1,3 +1,5 @@
 /// <reference types="react" />
-declare const Placeholder: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+declare const Placeholder: import("react").NamedExoticComponent<{
+    mathBlock?: boolean | undefined;
+}>;
 export default Placeholder;

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

@@ -1,13 +1,15 @@
 import { Text } from '@lobehub/ui';
 import { memo } from 'react';
+import { Center } from 'react-layout-kit';
 import { useTranslation } from "../../../../editor-kernel/react/useTranslation";
 import { jsx as _jsx } from "react/jsx-runtime";
-var Placeholder = /*#__PURE__*/memo(function () {
+var Placeholder = /*#__PURE__*/memo(function (_ref) {
+  var mathBlock = _ref.mathBlock;
   var t = useTranslation();
-  return /*#__PURE__*/_jsx(Text, {
+  var node = /*#__PURE__*/_jsx(Text, {
     as: 'span',
     className: 'katex',
-    fontSize: '1em',
+    fontSize: mathBlock ? '1.2em' : '1em',
     style: {
       fontStyle: 'italic',
       paddingInline: '0.2em'
@@ -15,5 +17,11 @@ var Placeholder = /*#__PURE__*/memo(function () {
     type: 'secondary',
     children: t('math.placeholder')
   });
+  if (!mathBlock) return node;
+  return /*#__PURE__*/_jsx(Center, {
+    padding: 18,
+    width: '100%',
+    children: node
+  });
 });
 export default Placeholder;

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

@@ -8,8 +8,8 @@ export var useStyles = createStyles(function (_ref) {
     token = _ref.token;
   var latex = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    cursor: pointer;\n    user-select: none;\n    font-size: 1em;\n\n    .katex-error {\n      color: ", " !important;\n    }\n\n    .katex-html {\n      overflow: auto hidden;\n      padding: 3px;\n\n      .base {\n        margin-block: 0;\n        margin-inline: auto;\n      }\n\n      .tag {\n        position: relative !important;\n        display: inline-block;\n        padding-inline-start: 0.5rem;\n      }\n    }\n\n    &.selected {\n      color: #000;\n      background: ", ";\n    }\n\n    &:hover {\n      background: ", ";\n    }\n\n    &.editing {\n      background: ", ";\n    }\n\n    &:has(.katex-error) {\n      background: ", ";\n    }\n  "])), token.colorError, token.yellow, token.colorFillTertiary, token.colorFillTertiary, token.colorErrorBg);
   return {
-    mathInline: cx(latex, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        display: inline-block;\n      "])))),
-    mathBlock: cx(latex, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        overflow: auto hidden;\n        display: block;\n        white-space: nowrap;\n      "])))),
+    mathInline: cx(latex, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        display: inline-block;\n        border-radius: calc(var(--lobe-markdown-border-radius) * 0.5px);\n      "])))),
+    mathBlock: cx(latex, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        overflow: auto hidden;\n        display: block;\n        border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n        white-space: nowrap;\n      "])))),
     mathEditor: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: absolute;\n      z-index: 999;\n      inset-block-start: -9999px;\n      inset-inline-start: -9999px;\n\n      width: 320px;\n\n      background: ", ";\n\n      textarea {\n        width: 100%;\n\n        font-family: ", ";\n        font-size: 13px;\n\n        background: transparent !important;\n\n        transition: none !important;\n      }\n    "])), token.colorBgElevated, token.fontFamilyCode),
     mathEditorFooter: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      border-block-start: 1px solid ", ";\n      background: ", ";\n    "])), token.colorBorderSecondary, token.colorFillQuaternary)
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "description": "A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.",
   "keywords": [
     "lobehub",