@pie-element/inline-dropdown 4.7.0 → 4.7.1-beta.1

package/configure/lib/inline-dropdown-toolbar.js

@@ -1,447 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.RespAreaToolbar = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _editableHtml = _interopRequireWildcard(require("@pie-lib/editable-html"));
-
-var _mathRendering = require("@pie-lib/math-rendering");
-
-var _styles = require("@material-ui/core/styles");
-
-var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-
-var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
-
-var _classnames2 = _interopRequireDefault(require("classnames"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var MenuItemComp = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(MenuItemComp, _React$Component);
-
-  var _super = _createSuper(MenuItemComp);
-
-  function MenuItemComp() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, MenuItemComp);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onRemoveClick", function (e) {
-      var onRemoveChoice = _this.props.onRemoveChoice;
-      e.preventDefault();
-      e.stopPropagation();
-      onRemoveChoice();
-    });
-    return _this;
-  }
-
-  (0, _createClass2["default"])(MenuItemComp, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          classes = _this$props.classes,
-          correct = _this$props.correct,
-          onClick = _this$props.onClick,
-          value = _this$props.value;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames2["default"])(classes.wrapper, (0, _defineProperty2["default"])({}, classes.correct, correct)),
-        onClick: onClick
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.valueHolder,
-        dangerouslySetInnerHTML: {
-          __html: value
-        }
-      }), /*#__PURE__*/_react["default"].createElement("i", {
-        className: classes.removeIcon,
-        onClick: this.onRemoveClick
-      }, "x"));
-    }
-  }]);
-  return MenuItemComp;
-}(_react["default"].Component);
-
-(0, _defineProperty2["default"])(MenuItemComp, "propTypes", {
-  classes: _propTypes["default"].object.isRequired,
-  correct: _propTypes["default"].bool.isRequired,
-  onClick: _propTypes["default"].func.isRequired,
-  onRemoveChoice: _propTypes["default"].func.isRequired,
-  value: _propTypes["default"].string.isRequired
-});
-var MenuItem = (0, _styles.withStyles)({
-  wrapper: {
-    background: '#fff',
-    borderBottom: '1px solid black',
-    boxSizing: 'border-box',
-    display: 'block',
-    cursor: 'pointer',
-    lineHeight: '30px',
-    padding: '10px 25px 10px 10px',
-    position: 'relative'
-  },
-  correct: {
-    background: '#C4DCFA'
-  },
-  removeIcon: {
-    cursor: 'pointer',
-    fontSize: '20px',
-    fontStyle: 'normal',
-    position: 'absolute',
-    transform: 'translate(0, -50%)',
-    top: '50%',
-    right: '5px',
-    zIndex: 3
-  },
-  valueHolder: {
-    wordBreak: 'break-all'
-  }
-})(MenuItemComp);
-
-var findSlateNode = function findSlateNode(key) {
-  return window.document.querySelector('[data-key="' + key + '"]');
-};
-
-var createElementFromHTML = function createElementFromHTML(htmlString) {
-  var div = document.createElement('div');
-  div.innerHTML = (htmlString || '').trim();
-  return div;
-};
-
-var RespAreaToolbar = /*#__PURE__*/function (_React$Component2) {
-  (0, _inherits2["default"])(RespAreaToolbar, _React$Component2);
-
-  var _super2 = _createSuper(RespAreaToolbar);
-
-  function RespAreaToolbar() {
-    var _this2;
-
-    (0, _classCallCheck2["default"])(this, RespAreaToolbar);
-
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-
-    _this2 = _super2.call.apply(_super2, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "state", {
-      respAreaMarkup: ''
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onRespAreaChange", function (respAreaMarkup) {
-      _this2.setState({
-        respAreaMarkup: respAreaMarkup
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onAddChoice", function () {
-      if (_this2.editorRef) {
-        _this2.editorRef.finishEditing();
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onDone", function (val) {
-      var _this2$props = _this2.props,
-          node = _this2$props.node,
-          onAddChoice = _this2$props.onAddChoice;
-      var onlyText = createElementFromHTML(val).textContent.trim();
-
-      if (!(0, _isEmpty["default"])(onlyText)) {
-        onAddChoice(node.data.get('index'), val);
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onSelectChoice", function (newValue, index) {
-      var _this2$props2 = _this2.props,
-          node = _this2$props2.node,
-          value = _this2$props2.value,
-          onToolbarDone = _this2$props2.onToolbarDone,
-          onSelectChoice = _this2$props2.onSelectChoice;
-
-      var update = _objectSpread(_objectSpread({}, node.data.toJSON()), {}, {
-        value: newValue
-      });
-
-      var change = value.change().setNodeByKey(node.key, {
-        data: update
-      });
-      var nextText = value.document.getNextText(node.key);
-      change.moveFocusTo(nextText.key, 0).moveAnchorTo(nextText.key, 0);
-      onToolbarDone(change, false);
-      onSelectChoice(index);
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onRemoveChoice", function (val, index) {
-      var _this2$props3 = _this2.props,
-          node = _this2$props3.node,
-          value = _this2$props3.value,
-          onToolbarDone = _this2$props3.onToolbarDone,
-          onRemoveChoice = _this2$props3.onRemoveChoice;
-
-      if ((0, _isEqual["default"])(val, node.data.get('value'))) {
-        var update = _objectSpread(_objectSpread({}, node.data.toJSON()), {}, {
-          value: null
-        });
-
-        var change = value.change().setNodeByKey(node.key, {
-          data: update
-        });
-        onToolbarDone(change, false);
-      }
-
-      onRemoveChoice(index);
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onKeyDown", function (event) {
-      if (event.key === 'Enter') {
-        _this2.onAddChoice(); // Cancelling event
-
-
-        return false;
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onBlur", function () {
-      if (_this2.clickedInside) {
-        _this2.clickedInside = false;
-        return;
-      }
-
-      var _this2$props4 = _this2.props,
-          node = _this2$props4.node,
-          choices = _this2$props4.choices,
-          onCheck = _this2$props4.onCheck,
-          onToolbarDone = _this2$props4.onToolbarDone,
-          value = _this2$props4.value;
-      var correctResponse = (choices || []).find(function (choice) {
-        return choice.correct;
-      });
-
-      _this2.onAddChoice();
-
-      if (!choices || choices && choices.length < 2 || !correctResponse) {
-        onCheck(function () {
-          var change = value.change();
-          change.removeNodeByKey(node.get('key'));
-          onToolbarDone(change, false);
-        });
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onClickInside", function () {
-      _this2.clickedInside = true;
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "focusInput", function () {
-      // we need to focus the input so that math is saved even without pressing the green checkmark
-      var slateEditorRef = _this2.editorRef && _this2.editorRef.rootRef && _this2.editorRef.rootRef.slateEditor;
-      var inputRef = slateEditorRef && slateEditorRef.editorRef && slateEditorRef.editorRef.element;
-
-      if (inputRef) {
-        inputRef.focus();
-      }
-    });
-    return _this2;
-  }
-
-  (0, _createClass2["default"])(RespAreaToolbar, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var node = this.props.node;
-      var domNode = findSlateNode(node.key);
-
-      if (domNode) {
-        //eslint-disable-next-line
-        var domNodeRect = domNode.getBoundingClientRect();
-        var editor = domNode.closest('[data-slate-editor]');
-        var editorRect = editor.getBoundingClientRect();
-        var top = domNodeRect.top - editorRect.top;
-        var left = domNodeRect.left - editorRect.left;
-        this.setState({
-          toolbarStyle: {
-            position: 'absolute',
-            top: "".concat(top + domNodeRect.height + 60, "px"),
-            left: "".concat(left + 25, "px"),
-            width: domNodeRect.width
-          }
-        });
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      //eslint-disable-next-line
-      var domNode = _reactDom["default"].findDOMNode(this);
-
-      (0, _mathRendering.renderMath)(domNode);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-
-      var _this$props2 = this.props,
-          classes = _this$props2.classes,
-          choices = _this$props2.choices,
-          spellCheck = _this$props2.spellCheck,
-          uploadSoundSupport = _this$props2.uploadSoundSupport;
-      var _this$state = this.state,
-          respAreaMarkup = _this$state.respAreaMarkup,
-          toolbarStyle = _this$state.toolbarStyle;
-      var filteredDefaultPlugins = (_editableHtml.DEFAULT_PLUGINS || []).filter(function (p) {
-        return p !== 'table' && p !== 'bulleted-list' && p !== 'numbered-list';
-      });
-      var labelPlugins = {
-        audio: {
-          disabled: true
-        },
-        video: {
-          disabled: true
-        }
-      };
-
-      if (!toolbarStyle) {
-        return null;
-      }
-
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        style: _objectSpread(_objectSpread({}, toolbarStyle), {}, {
-          backgroundColor: '#E0E1E6'
-        }),
-        onMouseDown: this.onClickInside
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.itemBuilder
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        ref: function ref(_ref) {
-          if (_ref) {
-            _this3.editorRef = _ref;
-          }
-        },
-        autoFocus: true,
-        autoSave: true,
-        className: classes.respArea,
-        toolbarOpts: {
-          position: 'top',
-          alwaysVisible: false,
-          showDone: false,
-          doneOn: 'blur'
-        },
-        markup: respAreaMarkup,
-        onKeyDown: this.onKeyDown,
-        onChange: this.onRespAreaChange,
-        onDone: this.onDone,
-        placeholder: "Add Choice",
-        activePlugins: filteredDefaultPlugins,
-        pluginProps: labelPlugins,
-        onBlur: this.onBlur,
-        spellCheck: spellCheck,
-        uploadSoundSupport: uploadSoundSupport
-      }), /*#__PURE__*/_react["default"].createElement("i", {
-        style: {
-          cursor: 'pointer',
-          fontSize: '20px',
-          fontStyle: 'normal',
-          position: 'absolute',
-          top: '50%',
-          right: '15px',
-          transform: 'translate(0, -50%)'
-        },
-        contentEditable: false,
-        onMouseDown: function onMouseDown() {
-          return _this3.focusInput();
-        },
-        onClick: function onClick() {
-          return _this3.onAddChoice();
-        }
-      }, "+")), choices && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.choicesHolder
-      }, choices.map(function (_ref2, index) {
-        var label = _ref2.label,
-            correct = _ref2.correct;
-        return /*#__PURE__*/_react["default"].createElement(MenuItem, {
-          key: index,
-          onClick: function onClick() {
-            return _this3.onSelectChoice(label, index);
-          },
-          onRemoveChoice: function onRemoveChoice() {
-            return _this3.onRemoveChoice(label, index);
-          },
-          value: label,
-          correct: correct
-        });
-      })));
-    }
-  }]);
-  return RespAreaToolbar;
-}(_react["default"].Component);
-
-exports.RespAreaToolbar = RespAreaToolbar;
-(0, _defineProperty2["default"])(RespAreaToolbar, "propTypes", {
-  classes: _propTypes["default"].object,
-  node: _propTypes["default"].object,
-  uploadSoundSupport: _propTypes["default"].object,
-  onDone: _propTypes["default"].func,
-  choices: _propTypes["default"].array,
-  onAddChoice: _propTypes["default"].func.isRequired,
-  onRemoveChoice: _propTypes["default"].func.isRequired,
-  onSelectChoice: _propTypes["default"].func.isRequired,
-  onToolbarDone: _propTypes["default"].func.isRequired,
-  value: _propTypes["default"].shape({
-    change: _propTypes["default"].func.isRequired,
-    document: _propTypes["default"].shape({
-      getNextText: _propTypes["default"].func.isRequired
-    })
-  })
-});
-var StyledRespAreaToolbar = (0, _styles.withStyles)({
-  respArea: {
-    backgroundColor: '#fff',
-    '& [data-slate-editor="true"]': {
-      minHeight: 'initial !important'
-    }
-  },
-  choicesHolder: {
-    display: 'flex',
-    flexDirection: 'column',
-    '& > div:last-child': {
-      border: 'none'
-    }
-  },
-  itemBuilder: {
-    padding: '8px',
-    position: 'relative'
-  }
-})(RespAreaToolbar);
-var _default = StyledRespAreaToolbar;
-exports["default"] = _default;
-//# sourceMappingURL=inline-dropdown-toolbar.js.map

package/configure/lib/inline-dropdown-toolbar.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/inline-dropdown-toolbar.jsx"],"names":["MenuItemComp","e","onRemoveChoice","props","preventDefault","stopPropagation","classes","correct","onClick","value","wrapper","valueHolder","__html","removeIcon","onRemoveClick","React","Component","PropTypes","object","isRequired","bool","func","string","MenuItem","background","borderBottom","boxSizing","display","cursor","lineHeight","padding","position","fontSize","fontStyle","transform","top","right","zIndex","wordBreak","findSlateNode","key","window","document","querySelector","createElementFromHTML","htmlString","div","createElement","innerHTML","trim","RespAreaToolbar","respAreaMarkup","setState","editorRef","finishEditing","val","node","onAddChoice","onlyText","textContent","data","get","newValue","index","onToolbarDone","onSelectChoice","update","toJSON","change","setNodeByKey","nextText","getNextText","moveFocusTo","moveAnchorTo","event","clickedInside","choices","onCheck","correctResponse","find","choice","length","removeNodeByKey","slateEditorRef","rootRef","slateEditor","inputRef","element","focus","domNode","domNodeRect","getBoundingClientRect","editor","closest","editorRect","left","toolbarStyle","height","width","ReactDOM","findDOMNode","spellCheck","uploadSoundSupport","state","filteredDefaultPlugins","DEFAULT_PLUGINS","filter","p","labelPlugins","audio","disabled","video","backgroundColor","onClickInside","itemBuilder","ref","respArea","alwaysVisible","showDone","doneOn","onKeyDown","onRespAreaChange","onDone","onBlur","focusInput","choicesHolder","map","label","array","shape","StyledRespAreaToolbar","minHeight","flexDirection","border"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport EditableHtml from '@pie-lib/editable-html';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { withStyles } from '@material-ui/core/styles';\nimport isEqual from 'lodash/isEqual';\nimport isEmpty from 'lodash/isEmpty';\nimport classnames from 'classnames';\nimport { DEFAULT_PLUGINS } from '@pie-lib/editable-html';\n\nclass MenuItemComp extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    correct: PropTypes.bool.isRequired,\n    onClick: PropTypes.func.isRequired,\n    onRemoveChoice: PropTypes.func.isRequired,\n    value: PropTypes.string.isRequired,\n  };\n\n  onRemoveClick = (e) => {\n    const { onRemoveChoice } = this.props;\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    onRemoveChoice();\n  };\n\n  render() {\n    const { classes, correct, onClick, value } = this.props;\n\n    return (\n      <div className={classnames(classes.wrapper, { [classes.correct]: correct })} onClick={onClick}>\n        <div\n          className={classes.valueHolder}\n          dangerouslySetInnerHTML={{\n            __html: value,\n          }}\n        />\n        <i className={classes.removeIcon} onClick={this.onRemoveClick}>\n          x\n        </i>\n      </div>\n    );\n  }\n}\n\nconst MenuItem = withStyles({\n  wrapper: {\n    background: '#fff',\n    borderBottom: '1px solid black',\n    boxSizing: 'border-box',\n    display: 'block',\n    cursor: 'pointer',\n    lineHeight: '30px',\n    padding: '10px 25px 10px 10px',\n    position: 'relative',\n  },\n  correct: {\n    background: '#C4DCFA',\n  },\n  removeIcon: {\n    cursor: 'pointer',\n    fontSize: '20px',\n    fontStyle: 'normal',\n    position: 'absolute',\n    transform: 'translate(0, -50%)',\n    top: '50%',\n    right: '5px',\n    zIndex: 3,\n  },\n  valueHolder: {\n    wordBreak: 'break-all',\n  },\n})(MenuItemComp);\n\nconst findSlateNode = (key) => {\n  return window.document.querySelector('[data-key=\"' + key + '\"]');\n};\n\nconst createElementFromHTML = (htmlString) => {\n  const div = document.createElement('div');\n\n  div.innerHTML = (htmlString || '').trim();\n\n  return div;\n};\n\nexport class RespAreaToolbar extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    node: PropTypes.object,\n    uploadSoundSupport: PropTypes.object,\n    onDone: PropTypes.func,\n    choices: PropTypes.array,\n    onAddChoice: PropTypes.func.isRequired,\n    onRemoveChoice: PropTypes.func.isRequired,\n    onSelectChoice: PropTypes.func.isRequired,\n    onToolbarDone: PropTypes.func.isRequired,\n    value: PropTypes.shape({\n      change: PropTypes.func.isRequired,\n      document: PropTypes.shape({\n        getNextText: PropTypes.func.isRequired,\n      }),\n    }),\n  };\n\n  state = {\n    respAreaMarkup: '',\n  };\n\n  componentDidMount() {\n    const { node } = this.props;\n\n    const domNode = findSlateNode(node.key);\n\n    if (domNode) {\n      //eslint-disable-next-line\n      const domNodeRect = domNode.getBoundingClientRect();\n      const editor = domNode.closest('[data-slate-editor]');\n      const editorRect = editor.getBoundingClientRect();\n      const top = domNodeRect.top - editorRect.top;\n      const left = domNodeRect.left - editorRect.left;\n\n      this.setState({\n        toolbarStyle: {\n          position: 'absolute',\n          top: `${top + domNodeRect.height + 60}px`,\n          left: `${left + 25}px`,\n          width: domNodeRect.width,\n        },\n      });\n    }\n  }\n\n  componentDidUpdate() {\n    //eslint-disable-next-line\n    const domNode = ReactDOM.findDOMNode(this);\n\n    renderMath(domNode);\n  }\n\n  onRespAreaChange = (respAreaMarkup) => {\n    this.setState({ respAreaMarkup });\n  };\n\n  onAddChoice = () => {\n    if (this.editorRef) {\n      this.editorRef.finishEditing();\n    }\n  };\n\n  onDone = (val) => {\n    const { node, onAddChoice } = this.props;\n    const onlyText = createElementFromHTML(val).textContent.trim();\n\n    if (!isEmpty(onlyText)) {\n      onAddChoice(node.data.get('index'), val);\n    }\n  };\n\n  onSelectChoice = (newValue, index) => {\n    const { node, value, onToolbarDone, onSelectChoice } = this.props;\n    const update = { ...node.data.toJSON(), value: newValue };\n    const change = value.change().setNodeByKey(node.key, { data: update });\n\n    const nextText = value.document.getNextText(node.key);\n\n    change.moveFocusTo(nextText.key, 0).moveAnchorTo(nextText.key, 0);\n\n    onToolbarDone(change, false);\n\n    onSelectChoice(index);\n  };\n\n  onRemoveChoice = (val, index) => {\n    const { node, value, onToolbarDone, onRemoveChoice } = this.props;\n\n    if (isEqual(val, node.data.get('value'))) {\n      const update = { ...node.data.toJSON(), value: null };\n      const change = value.change().setNodeByKey(node.key, { data: update });\n\n      onToolbarDone(change, false);\n    }\n\n    onRemoveChoice(index);\n  };\n\n  onKeyDown = (event) => {\n    if (event.key === 'Enter') {\n      this.onAddChoice();\n      // Cancelling event\n      return false;\n    }\n  };\n\n  onBlur = () => {\n    if (this.clickedInside) {\n      this.clickedInside = false;\n      return;\n    }\n\n    const { node, choices, onCheck, onToolbarDone, value } = this.props;\n    const correctResponse = (choices || []).find((choice) => choice.correct);\n\n    this.onAddChoice();\n    if (!choices || (choices && choices.length < 2) || !correctResponse) {\n      onCheck(() => {\n        const change = value.change();\n\n        change.removeNodeByKey(node.get('key'));\n        onToolbarDone(change, false);\n      });\n    }\n  };\n\n  onClickInside = () => {\n    this.clickedInside = true;\n  };\n\n  focusInput = () => {\n    // we need to focus the input so that math is saved even without pressing the green checkmark\n    const slateEditorRef = this.editorRef && this.editorRef.rootRef && this.editorRef.rootRef.slateEditor;\n    const inputRef = slateEditorRef && slateEditorRef.editorRef && slateEditorRef.editorRef.element;\n\n    if (inputRef) {\n      inputRef.focus();\n    }\n  };\n\n  render() {\n    const { classes, choices, spellCheck, uploadSoundSupport } = this.props;\n    const { respAreaMarkup, toolbarStyle } = this.state;\n\n    const filteredDefaultPlugins = (DEFAULT_PLUGINS || []).filter(\n      (p) => p !== 'table' && p !== 'bulleted-list' && p !== 'numbered-list',\n    );\n    const labelPlugins = {\n      audio: { disabled: true },\n      video: { disabled: true },\n    };\n\n    if (!toolbarStyle) {\n      return null;\n    }\n\n    return (\n      <div\n        style={{\n          ...toolbarStyle,\n          backgroundColor: '#E0E1E6',\n        }}\n        onMouseDown={this.onClickInside}\n      >\n        <div className={classes.itemBuilder}>\n          <EditableHtml\n            ref={(ref) => {\n              if (ref) {\n                this.editorRef = ref;\n              }\n            }}\n            autoFocus={true}\n            autoSave\n            className={classes.respArea}\n            toolbarOpts={{\n              position: 'top',\n              alwaysVisible: false,\n              showDone: false,\n              doneOn: 'blur',\n            }}\n            markup={respAreaMarkup}\n            onKeyDown={this.onKeyDown}\n            onChange={this.onRespAreaChange}\n            onDone={this.onDone}\n            placeholder=\"Add Choice\"\n            activePlugins={filteredDefaultPlugins}\n            pluginProps={labelPlugins}\n            onBlur={this.onBlur}\n            spellCheck={spellCheck}\n            uploadSoundSupport={uploadSoundSupport}\n          />\n          <i\n            style={{\n              cursor: 'pointer',\n              fontSize: '20px',\n              fontStyle: 'normal',\n              position: 'absolute',\n              top: '50%',\n              right: '15px',\n              transform: 'translate(0, -50%)',\n            }}\n            contentEditable={false}\n            onMouseDown={() => this.focusInput()}\n            onClick={() => this.onAddChoice()}\n          >\n            +\n          </i>\n        </div>\n        {choices && (\n          <div className={classes.choicesHolder}>\n            {choices.map(({ label, correct }, index) => (\n              <MenuItem\n                key={index}\n                onClick={() => this.onSelectChoice(label, index)}\n                onRemoveChoice={() => this.onRemoveChoice(label, index)}\n                value={label}\n                correct={correct}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\nconst StyledRespAreaToolbar = withStyles({\n  respArea: {\n    backgroundColor: '#fff',\n    '& [data-slate-editor=\"true\"]': {\n      minHeight: 'initial !important',\n    },\n  },\n  choicesHolder: {\n    display: 'flex',\n    flexDirection: 'column',\n    '& > div:last-child': {\n      border: 'none',\n    },\n  },\n  itemBuilder: {\n    padding: '8px',\n    position: 'relative',\n  },\n})(RespAreaToolbar);\n\nexport default StyledRespAreaToolbar;\n"],"file":"inline-dropdown-toolbar.js"}