"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _slateReact = require("slate-react");
var _eventTypes = require("../../../constants/event-types");
var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
require("./formula.css");
const Formula = _ref => {
  let {
    attributes,
    element,
    children
  } = _ref;
  const isSelected = (0, _slateReact.useSelected)();
  const formulaContainerRef = (0, _react.useRef)(null);
  (0, _react.useEffect)(() => {
    const {
      formula = ''
    } = element.data || {};
    if (!formula) return;
    if (formulaContainerRef.current && window.MathJax) {
      formulaContainerRef.current.innerHTML = '';
      const dom = window.MathJax.tex2svg(formula);
      formulaContainerRef.current.appendChild(dom);
    }
  }, [element]);
  const toggleFormulaEditor = (0, _react.useCallback)(() => {
    const eventBus = _eventBus.default.getInstance();
    eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.ON_OPEN_FORMULA_DIALOG, element);
  }, [element]);
  return /*#__PURE__*/_react.default.createElement("span", Object.assign({
    onDoubleClick: toggleFormulaEditor,
    className: 'sf-block-formula ' + (isSelected ? ' sf-selected-formula' : '')
  }, attributes), /*#__PURE__*/_react.default.createElement("span", {
    contentEditable: false,
    ref: formulaContainerRef
  }), /*#__PURE__*/_react.default.createElement("span", {
    contentEditable: false
  }, children));
};
const renderFormula = props => {
  return /*#__PURE__*/_react.default.createElement(Formula, props);
};
var _default = exports.default = renderFormula;