usfm-editor/dist/components/VerseNumberMenu.js

A WYSIWYG editor component for USFM

"use strict";

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

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

var _slate = require("slate");

var _slateReact = require("slate-react");

var _MyTransforms = require("../plugins/helpers/MyTransforms");

var _MyEditor = require("../plugins/helpers/MyEditor");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _UIComponentContext = require("../injectedUI/UIComponentContext");

var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));

var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));

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

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

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

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; }

const VerseNumberMenu = ({
  verseNumberEl,
  open,
  handleClose,
  useVerseAddRemove
}) => {
  if (!verseNumberEl) return null;
  const {
    VerseMenu
  } = React.useContext(_UIComponentContext.UIComponentContext);
  const editor = (0, _slateReact.useSlate)(); // This will find the verse path. We need the verse number path, so concatenate a zero.

  const verseNumberPath = _MyEditor.MyEditor.getPathFromDOMNode(editor, verseNumberEl).concat(0);

  return /*#__PURE__*/React.createElement(_Popper.default, {
    anchorEl: verseNumberEl,
    open: open,
    modifiers: {
      flip: {
        enabled: true
      }
    }
  }, /*#__PURE__*/React.createElement(_ClickAwayListener.default // If "onClick" is used instead of "onMouseDown", multiple menus may be
  // displayed simultaneously. Additionally, if the verse number displays uses
  // "onClick" to display the menu rather than "onMouseDown', this
  // ClickAwayListener will not work.
  , {
    mouseEvent: "onMouseDown",
    onClickAway: handleClose
  }, /*#__PURE__*/React.createElement(VerseMenu, null, /*#__PURE__*/React.createElement(VerseJoinUnjoinSubmenu, {
    editor: editor,
    verseNumberPath: verseNumberPath
  }), useVerseAddRemove && /*#__PURE__*/React.createElement(VerseAddRemoveSubmenu, {
    editor: editor,
    verseNumberPath: verseNumberPath
  }))));
};

exports.VerseNumberMenu = VerseNumberMenu;

function willVerseMenuDisplay(editor, verseNumberEl, useVerseAddRemove) {
  // This will find the verse path. We need the verse number path, so concatenate a zero.
  const verseNumberPath = _MyEditor.MyEditor.getPathFromDOMNode(editor, verseNumberEl).concat(0);

  const [verseNumberNode] = _MyEditor.MyEditor.node(editor, verseNumberPath);

  const verseNumberString = _slate.Node.string(verseNumberNode);

  const isVerseRange = verseNumberString.includes("-");

  const isLastVerse = verseNumberString == _MyEditor.MyEditor.getLastVerseNumberOrRange(editor, verseNumberPath);

  const prevVerse = _MyEditor.MyEditor.getPreviousVerse(editor, verseNumberPath);

  return prevVerse != undefined || isVerseRange || useVerseAddRemove && isLastVerse;
}

class VerseSubmenu extends React.Component {
  getVerseNumberString() {
    const {
      editor,
      verseNumberPath
    } = this.props;

    const [verseNumberNode] = _MyEditor.MyEditor.node(editor, verseNumberPath);

    return _slate.Node.string(verseNumberNode);
  }

}

_defineProperty(VerseSubmenu, "propTypes", {
  editor: _propTypes.default.object.isRequired,
  verseNumberPath: _propTypes.default.array.isRequired
});

class VerseJoinUnjoinSubmenu extends VerseSubmenu {
  render() {
    const {
      editor,
      verseNumberPath
    } = this.props;
    const verseNumberString = this.getVerseNumberString();
    const isVerseRange = verseNumberString.includes("-");

    const prevVerse = _MyEditor.MyEditor.getPreviousVerse(editor, verseNumberPath);

    return /*#__PURE__*/React.createElement(_UIComponentContext.UIComponentContext.Consumer, null, ({
      JoinWithPreviousVerseButton,
      UnjoinVerseRangeButton
    }) => /*#__PURE__*/React.createElement(React.Fragment, null, prevVerse && /*#__PURE__*/React.createElement(JoinWithPreviousVerseButton, {
      handleClick: event => {
        // !!Important: handleClose (property of VerseNumberMenu) is
        // not necessary in any of the verse menu buttons since all
        // verse transforms either remove or replace the verse number
        // (along with its verse menu), effectively "closing" the menu.
        // Calling handleClose after a verse number is removed will
        // cause an error.
        _MyTransforms.MyTransforms.joinWithPreviousVerse(editor, verseNumberPath);

        _slateReact.ReactEditor.focus(editor);
      }
    }), isVerseRange && /*#__PURE__*/React.createElement(UnjoinVerseRangeButton, {
      handleClick: event => {
        _MyTransforms.MyTransforms.unjoinVerses(editor, verseNumberPath);

        _slateReact.ReactEditor.focus(editor);
      }
    })));
  }

}

class VerseAddRemoveSubmenu extends VerseSubmenu {
  render() {
    const {
      editor,
      verseNumberPath
    } = this.props;
    const isLastVerse = _MyEditor.MyEditor.getLastVerseNumberOrRange(editor, verseNumberPath) == this.getVerseNumberString();

    const prevVerse = _MyEditor.MyEditor.getPreviousVerse(editor, verseNumberPath);

    return /*#__PURE__*/React.createElement(_UIComponentContext.UIComponentContext.Consumer, null, ({
      AddVerseButton,
      RemoveVerseButton
    }) => /*#__PURE__*/React.createElement(React.Fragment, null, isLastVerse && /*#__PURE__*/React.createElement(AddVerseButton, {
      handleClick: event => {
        _MyTransforms.MyTransforms.addVerse(editor, verseNumberPath);

        _slateReact.ReactEditor.focus(editor);
      }
    }), isLastVerse && prevVerse &&
    /*#__PURE__*/
    // Don't show remove button if this is the only verse
    React.createElement(RemoveVerseButton, {
      handleClick: event => {
        _MyTransforms.MyTransforms.removeVerseAndConcatenateContentsWithPrevious(editor, verseNumberPath);

        _slateReact.ReactEditor.focus(editor);
      }
    })));
  }

}