@edtr-io/plugin-text/dist/plugins/katex/editor.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DefaultEditorComponent = void 0;

var _editorUi = require("@edtr-io/editor-ui");

var React = _interopRequireWildcard(require("react"));

var _reactMathquill = _interopRequireDefault(require("react-mathquill"));

var _dropdown = require("../../toolbar/dropdown");

var _math = require("./math.component");

var _index = require("./index");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var Wrapper = _editorUi.styled.div(function (props) {
  return _objectSpread({
    whiteSpace: undefined,
    overflowWrap: undefined
  }, props.inline ? {
    display: 'inline-block'
  } : {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    marginTop: '15px'
  });
});

var DefaultEditorComponent = function DefaultEditorComponent(props) {
  var attributes = props.attributes,
      node = props.node,
      editor = props.editor,
      readOnly = props.readOnly,
      name = props.name;
  var _ref = node,
      data = _ref.data;
  var inline = data.get('inline');
  var formula = data.get('formula');

  function setFormula(value) {
    editor.setNodeByKey(node.key, {
      type: node.type,
      data: {
        formula: value,
        inline: node.data.get('inline')
      }
    });
  }

  var _React$useState = React.useState(true),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      useVisual = _React$useState2[0],
      setUseVisual = _React$useState2[1]; //Refs for positioning of hovering menu


  var mathQuillRef = React.createRef();
  var latexInputRef = React.useRef();
  var wrappedMathquillRef = Object.defineProperty({}, 'current', {
    // wrapper around Mathquill component
    get: function get() {
      return mathQuillRef.current ? mathQuillRef.current.element : null;
    }
  }); // state for math formula, because focus jumps to end of input field if updated directly

  var _React$useState3 = React.useState(formula),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      formulaState = _React$useState4[0],
      setFormulaState = _React$useState4[1]; // if math formula gets selected or leaves edit, update formula from state


  var edit = props.isSelected && editor.value.selection.isCollapsed && !readOnly;
  var lastEdit = React.useRef(edit);

  if (lastEdit.current !== edit) {
    if (formula !== formulaState) {
      setFormula(formulaState);
    }

    lastEdit.current = edit;
  }

  function checkLeaveLatexInput(e) {
    if (!latexInputRef.current) return;
    var _latexInputRef$curren = latexInputRef.current,
        selectionEnd = _latexInputRef$curren.selectionEnd,
        value = _latexInputRef$curren.value;

    if (e.key === 'ArrowLeft' && selectionEnd === 0) {
      // leave left
      editor.moveToStart().moveBackward(1).focus();
    } else if (e.key === 'ArrowRight' && selectionEnd === value.length) {
      // leave right
      editor.moveToEnd().moveForward(1).focus();
    }
  }

  if (edit) {
    return React.createElement(Wrapper, _extends({}, attributes, {
      onClick: function onClick(e) {
        e.stopPropagation();
      },
      inline: inline
    }), useVisual ? React.createElement(_reactMathquill.default, {
      latex: formulaState,
      onChange: setFormulaState,
      config: {
        handlers: {
          moveOutOf: function moveOutOf(dir) {
            if (dir == 1) {
              // leave right
              editor.moveToEnd().moveForward(1).focus();
            } else if (dir == -1) {
              // leave left
              editor.moveToStart().moveBackward(1).focus();
            }
          },
          deleteOutOf: function deleteOutOf(dir) {
            if (dir == -1) {
              editor.delete().focus();
            }
          }
        }
      },
      ref: mathQuillRef,
      mathquillDidMount: function mathquillDidMount(mathquill) {
        if (mathquill) {
          if (mathquill.latex() == '' && formula != '') {
            // Error occured
            alert('Error while parsing LaTeX.');
            setUseVisual(false);
          }

          setTimeout(function () {
            editor.blur();
            setTimeout(function () {
              mathquill.focus();
            });
          });
        }
      }
    }) : inline ? React.createElement("input", {
      ref: function ref(_ref2) {
        return latexInputRef.current = _ref2;
      },
      type: "text",
      value: formulaState,
      onChange: function onChange(e) {
        //cant set formula directly, because otherwise focus jumps to end of input field
        setFormulaState(e.target.value);
      },
      onKeyDown: checkLeaveLatexInput,
      autoFocus: true
    }) : React.createElement("textarea", {
      style: {
        width: '100%'
      },
      ref: function ref(_ref3) {
        return latexInputRef.current = _ref3;
      },
      value: formulaState,
      onChange: function onChange(e) {
        return setFormulaState(e.target.value);
      },
      onKeyDown: checkLeaveLatexInput,
      autoFocus: true
    }), React.createElement(_editorUi.HoveringOverlay, {
      position: 'above',
      anchor: useVisual ? wrappedMathquillRef : latexInputRef
    }, React.createElement(_dropdown.Dropdown, {
      name: name,
      value: useVisual ? 'visual' : 'latex',
      onChange: function onChange(e) {
        setUseVisual(e.target.value == 'visual');
      }
    }, React.createElement(_dropdown.Option, {
      active: useVisual,
      value: "visual",
      name: name
    }, "visual"), React.createElement(_dropdown.Option, {
      active: !useVisual,
      value: "latex",
      name: name
    }, "latex")), React.createElement(_editorUi.InlineCheckbox, {
      label: "Inline",
      checked: inline,
      onChange: function onChange(checked) {
        var newData = {
          formula: formulaState,
          inline: checked // remove old node, merge blocks if necessary

        };

        if (node.isLeafBlock()) {
          var n = editor.value.document.getNextBlock(node.key);
          editor.removeNodeByKey(node.key);

          if (n) {
            editor.mergeNodeByKey(n.key);
          }
        } else {
          editor.removeNodeByKey(node.key);
        }

        if (checked) {
          editor.insertInline({
            type: _index.katexInlineNode,
            data: newData
          });
        } else {
          editor.insertBlock({
            type: _index.katexBlockNode,
            data: newData
          });
        }
      }
    })));
  }

  return React.createElement("span", attributes, formula ? React.createElement(_math.Math, {
    formula: formula,
    inline: inline
  }) : React.createElement("span", {
    style: {
      backgroundColor: 'lightgrey'
    }
  }, "[neue Formel]"));
};

exports.DefaultEditorComponent = DefaultEditorComponent;
//# sourceMappingURL=editor.js.map