@lobehub/editor/es/plugins/math/react/components/MathEditorContainer.js

A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.

import { Block } from '@lobehub/ui';
import { memo, useEffect, useRef } from 'react';
import { cleanPosition, updatePosition } from "../../../../utils/updatePosition";
import { styles } from "../style";
import { jsx as _jsx } from "react/jsx-runtime";
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 updateMathPosition = function updateMathPosition() {
    return updatePosition({
      callback: function callback() {
        if (!divRef.current || !mathDOM) return;
        // 展示的时候聚焦
        onFocus === null || onFocus === void 0 || onFocus();
        if (!isBlockMode) {
          divRef.current.style.width = '';
          return;
        }
        var editorContainer = mathDOM.closest('[contenteditable="true"]');
        if (editorContainer) {
          var containerRect = editorContainer.getBoundingClientRect();
          divRef.current.style.width = "".concat(containerRect.width, "px");
        }
      },
      floating: divRef.current,
      reference: mathDOM
    });
  };
  useEffect(function () {
    if (!mathDOM || !divRef.current) return;
    var floating = divRef.current;

    // 监听尺寸变化，随内容变化重新定位
    var resizeObserver = new ResizeObserver(function () {
      return updateMathPosition();
    });
    resizeObserver.observe(mathDOM);
    resizeObserver.observe(floating);
    var editorContainer = null;
    if (isBlockMode) {
      editorContainer = mathDOM.closest('[contenteditable="true"]');
      if (editorContainer) resizeObserver.observe(editorContainer);
    }

    // 窗口尺寸变化时也重新定位
    window.addEventListener('resize', updateMathPosition);
    return function () {
      resizeObserver.disconnect();
      window.removeEventListener('resize', updateMathPosition);
    };
  }, [mathDOM, prev, isBlockMode, onFocus]);

  // 当没有 mathDOM 时，隐藏容器
  useEffect(function () {
    if (mathDOM || !divRef.current) return;
    cleanPosition(divRef.current);
  }, [mathDOM]);
  return /*#__PURE__*/_jsx(Block, {
    className: styles.mathEditor,
    "data-math-editor-container": true,
    onClick: function onClick(e) {
      e.preventDefault();
    },
    ref: divRef,
    shadow: true,
    variant: 'outlined',
    children: children
  });
});
MathEditorContainer.displayName = 'MathEditorContainer';
export default MathEditorContainer;