@pie-element/inline-dropdown 8.3.4-next.3 → 9.0.0-beta.0

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

@@ -1,573 +1,455 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 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"));
-
+exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _utils = require("./utils");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
-
 var _mathRendering = require("@pie-lib/math-rendering");
-
-var _styles = require("@material-ui/core/styles");
-
+var _styles = require("@mui/material/styles");
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
-
-var _classnames2 = _interopRequireDefault(require("classnames"));
-
 var _renderUi = require("@pie-lib/render-ui");
-
-var _Add = _interopRequireDefault(require("@material-ui/icons/Add"));
-
-var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
-
-var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
-
-var _Edit = _interopRequireDefault(require("@material-ui/icons/Edit"));
-
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
-
-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;
+var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
+var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+var _Edit = _interopRequireDefault(require("@mui/icons-material/Edit"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+const MenuItemWrapper = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  display: 'flex',
+  alignItems: 'flex-start',
+  position: 'relative',
+  background: theme.palette.common.white,
+  borderBottom: `1px solid ${theme.palette.grey[400]}`,
+  '&:last-child': {
+    borderRadius: '0 0 4px 4px'
+  }
+}));
+const SelectedIcon = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  color: theme.palette.common.white,
+  fontSize: theme.typography.fontSize,
+  fontStyle: 'normal',
+  position: 'absolute',
+  transform: 'translate(0, -50%)',
+  backgroundColor: _renderUi.color.correct(),
+  borderRadius: '50%',
+  top: theme.spacing(2),
+  left: theme.spacing(1),
+  zIndex: 3
+}));
+const ValueHolder = (0, _styles.styled)('div')(({
+  theme,
+  correct
+}) => ({
+  flex: 1,
+  padding: theme.spacing(0.75),
+  paddingLeft: theme.spacing(3.5),
+  ...(correct && {
+    background: _renderUi.color.correctSecondary()
+  })
+}));
+const ActionButtons = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  margin: theme.spacing(0.5),
+  display: 'flex'
+}));
+const StyledIconButton = (0, _styles.styled)(_IconButton.default)(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize,
+  padding: theme.spacing(0.5),
+  color: theme.palette.common.black
+}));
+class MenuItemComp extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "onRemoveClick", e => {
+      const {
+        onRemoveChoice
+      } = this.props;
       e.preventDefault();
       e.stopPropagation();
       onRemoveChoice();
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onEditClick", function (e) {
-      var onEditChoice = _this.props.onEditChoice;
+    (0, _defineProperty2.default)(this, "onEditClick", e => {
+      const {
+        onEditChoice
+      } = this.props;
       e.preventDefault();
       e.stopPropagation();
       onEditChoice();
     });
-    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: classes.wrapper
-      }, correct && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.selectedIcon,
-        onClick: onClick
-      }, /*#__PURE__*/_react["default"].createElement(_Check["default"], {
-        fontSize: "inherit"
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames2["default"])(classes.valueHolder, (0, _defineProperty2["default"])({}, classes.correct, correct)),
-        onClick: onClick,
-        dangerouslySetInnerHTML: {
-          __html: value
-        }
-      }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.actionButtons
-      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
-        className: classes.iconButton,
-        onClick: this.onEditClick,
-        size: "small",
-        "aria-label": "Edit"
-      }, /*#__PURE__*/_react["default"].createElement(_Edit["default"], {
-        fontSize: "inherit"
-      })), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
-        className: classes.iconButton,
-        onClick: this.onRemoveClick,
-        size: "small",
-        "aria-label": "Remove"
-      }, /*#__PURE__*/_react["default"].createElement(_Close["default"], {
-        fontSize: "inherit"
-      }))));
-    }
-  }]);
-  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,
-  onEditChoice: _propTypes["default"].func.isRequired,
-  value: _propTypes["default"].string.isRequired
-});
-var MenuItem = (0, _styles.withStyles)(function (theme) {
-  return {
-    wrapper: {
-      display: 'flex',
-      alignItems: 'flex-start',
-      position: 'relative',
-      background: theme.palette.common.white,
-      borderBottom: "1px solid ".concat(theme.palette.grey[400]),
-      '&:last-child': {
-        borderRadius: '0 0 4px 4px'
+  render() {
+    const {
+      correct,
+      onClick,
+      value
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement(MenuItemWrapper, null, correct && /*#__PURE__*/_react.default.createElement(SelectedIcon, {
+      onClick: onClick
+    }, /*#__PURE__*/_react.default.createElement(_Check.default, {
+      fontSize: "inherit"
+    })), /*#__PURE__*/_react.default.createElement(ValueHolder, {
+      correct: correct,
+      onClick: onClick,
+      dangerouslySetInnerHTML: {
+        __html: value
       }
-    },
-    correct: {
-      background: _renderUi.color.correctSecondary()
-    },
-    actionButtons: {
-      margin: theme.spacing.unit / 2,
-      display: 'flex'
-    },
-    iconButton: {
-      fontSize: theme.typography.fontSize,
-      padding: theme.spacing.unit / 2,
-      color: theme.palette.common.black
-    },
-    selectedIcon: {
-      display: 'flex',
-      justifyContent: 'center',
-      color: theme.palette.common.white,
-      fontSize: theme.typography.fontSize,
-      fontStyle: 'normal',
-      position: 'absolute',
-      transform: 'translate(0, -50%)',
-      backgroundColor: _renderUi.color.correct(),
-      borderRadius: '50%',
-      top: theme.spacing.unit * 2,
-      left: theme.spacing.unit,
-      zIndex: 3
-    },
-    valueHolder: {
-      flex: 1,
-      padding: theme.spacing.unit * 0.75,
-      paddingLeft: theme.spacing.unit * 3.5
-    }
-  };
-})(MenuItemComp);
-
-var findSlateNode = function findSlateNode(key) {
+    }), /*#__PURE__*/_react.default.createElement(ActionButtons, null, /*#__PURE__*/_react.default.createElement(StyledIconButton, {
+      onClick: this.onEditClick,
+      size: "small",
+      "aria-label": "Edit"
+    }, /*#__PURE__*/_react.default.createElement(_Edit.default, {
+      fontSize: "inherit"
+    })), /*#__PURE__*/_react.default.createElement(StyledIconButton, {
+      onClick: this.onRemoveClick,
+      size: "small",
+      "aria-label": "Remove"
+    }, /*#__PURE__*/_react.default.createElement(_Close.default, {
+      fontSize: "inherit"
+    }))));
+  }
+}
+(0, _defineProperty2.default)(MenuItemComp, "propTypes", {
+  correct: _propTypes.default.bool.isRequired,
+  onClick: _propTypes.default.func.isRequired,
+  onRemoveChoice: _propTypes.default.func.isRequired,
+  onEditChoice: _propTypes.default.func.isRequired,
+  value: _propTypes.default.string.isRequired
+});
+const MenuItem = MenuItemComp;
+const findSlateNode = key => {
   return window.document.querySelector('[data-key="' + key + '"]');
 };
-
-var createElementFromHTML = function createElementFromHTML(htmlString) {
-  var div = document.createElement('div');
+const createElementFromHTML = htmlString => {
+  const 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), "clickedInside", false);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "preventDone", false);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "state", {
+const ResponseContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  boxShadow: theme.shadows[2],
+  borderRadius: '4px',
+  width: '400px'
+}));
+const RespArea = (0, _styles.styled)(_editableHtml.default)(({
+  theme
+}) => ({
+  borderRadius: '4px',
+  backgroundColor: theme.palette.common.white,
+  '& [data-slate-editor="true"]': {
+    minHeight: 'initial !important'
+  }
+}));
+const AddButton = (0, _styles.styled)(_IconButton.default)(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize + 2,
+  padding: theme.spacing(0.5),
+  color: theme.palette.common.black,
+  position: 'absolute',
+  top: '50%',
+  right: theme.spacing(2),
+  transform: 'translate(0, -50%)'
+}));
+const ChoicesHolder = (0, _styles.styled)('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  '& > div:last-child': {
+    border: 'none'
+  }
+});
+const ItemBuilder = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  padding: theme.spacing(0.5),
+  position: 'relative'
+}));
+class RespAreaToolbar extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "clickedInside", false);
+    (0, _defineProperty2.default)(this, "preventDone", false);
+    (0, _defineProperty2.default)(this, "state", {
       respAreaMarkup: '',
       editedChoiceIndex: -1
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onRespAreaChange", function (respAreaMarkup) {
-      _this2.setState({
-        respAreaMarkup: respAreaMarkup
+    (0, _defineProperty2.default)(this, "onRespAreaChange", respAreaMarkup => {
+      this.setState({
+        respAreaMarkup
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onAddChoice", function () {
-      if (_this2.editorRef) {
-        _this2.editorRef.finishEditing();
+    (0, _defineProperty2.default)(this, "onAddChoice", () => {
+      if (this.editorRef) {
+        this.editorRef.finishEditing();
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onDone", function (val) {
-      var _choices$editedChoice;
-
-      var _this2$props = _this2.props,
-          choices = _this2$props.choices,
-          node = _this2$props.node,
-          value = _this2$props.value,
-          onAddChoice = _this2$props.onAddChoice,
-          onToolbarDone = _this2$props.onToolbarDone;
-      var editedChoiceIndex = _this2.state.editedChoiceIndex;
-      var onlyText = createElementFromHTML(val).textContent.trim();
-
-      if (editedChoiceIndex >= 0 && choices !== null && choices !== void 0 && (_choices$editedChoice = choices[editedChoiceIndex]) !== null && _choices$editedChoice !== void 0 && _choices$editedChoice.correct) {
-        var update = _objectSpread(_objectSpread({}, node.data.toJSON()), {}, {
+    (0, _defineProperty2.default)(this, "onDone", val => {
+      const {
+        choices,
+        node,
+        value,
+        onAddChoice,
+        onToolbarDone
+      } = this.props;
+      const {
+        editedChoiceIndex
+      } = this.state;
+      const onlyText = createElementFromHTML(val).textContent.trim();
+      if (editedChoiceIndex >= 0 && choices?.[editedChoiceIndex]?.correct) {
+        const update = {
+          ...node.data.toJSON(),
           value: val
-        });
-
-        var change = value.change().setNodeByKey(node.key, {
+        };
+        const change = value.change().setNodeByKey(node.key, {
           data: update
         });
         onToolbarDone(change, false);
       }
-
-      if (!(0, _isEmpty["default"])(onlyText)) {
+      if (!(0, _isEmpty.default)(onlyText)) {
         onAddChoice(node.data.get('index'), val, editedChoiceIndex);
       }
-
-      _this2.setState({
+      this.setState({
         editedChoiceIndex: -1
       });
     });
-    (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()), {}, {
+    (0, _defineProperty2.default)(this, "onSelectChoice", (newValue, index) => {
+      const {
+        node,
+        value,
+        onToolbarDone,
+        onSelectChoice
+      } = this.props;
+      const update = {
+        ...node.data.toJSON(),
         value: newValue
-      });
-
-      var change = value.change().setNodeByKey(node.key, {
+      };
+      const change = value.change().setNodeByKey(node.key, {
         data: update
       });
-      var nextText = value.document.getNextText(node.key);
+      const 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()), {}, {
+    (0, _defineProperty2.default)(this, "onRemoveChoice", (val, index) => {
+      const {
+        node,
+        value,
+        onToolbarDone,
+        onRemoveChoice
+      } = this.props;
+      if ((0, _isEqual.default)(val, node.data.get('value'))) {
+        const update = {
+          ...node.data.toJSON(),
           value: null
-        });
-
-        var change = value.change().setNodeByKey(node.key, {
+        };
+        const change = value.change().setNodeByKey(node.key, {
           data: update
         });
         onToolbarDone(change, false);
       }
-
       onRemoveChoice(index);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onEditChoice", function (val, index) {
-      _this2.onRespAreaChange(val);
-
-      _this2.setState({
+    (0, _defineProperty2.default)(this, "onEditChoice", (val, index) => {
+      this.onRespAreaChange(val);
+      this.setState({
         editedChoiceIndex: index
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onKeyDown", function (event) {
+    (0, _defineProperty2.default)(this, "onKeyDown", event => {
       if (event.key === 'Enter') {
-        _this2.preventDone = false;
-
-        _this2.onAddChoice(); // Cancelling event
-
-
+        this.preventDone = false;
+        this.onAddChoice();
+        // Cancelling event
         return false;
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onBlur", function () {
-      if (_this2.clickedInside) {
-        _this2.clickedInside = false;
+    (0, _defineProperty2.default)(this, "onBlur", () => {
+      if (this.clickedInside) {
+        this.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();
-
+      const {
+        node,
+        choices,
+        onCheck,
+        onToolbarDone,
+        value
+      } = this.props;
+      const correctResponse = (choices || []).find(choice => choice.correct);
+      this.onAddChoice();
       if (!choices || choices && choices.length < 2 || !correctResponse) {
-        onCheck(function () {
-          var change = value.change();
+        onCheck(() => {
+          const 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)(this, "onClickInside", () => {
+      this.clickedInside = true;
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "focusInput", function () {
+    (0, _defineProperty2.default)(this, "focusInput", () => {
       // 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;
-
+      const slateEditorRef = this.editorRef && this.editorRef.rootRef && this.editorRef.rootRef.slateEditor;
+      const 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")
-          }
-        });
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
+  componentDidMount() {
+    const {
+      node
+    } = this.props;
+    const domNode = findSlateNode(node.key);
+    if (domNode) {
       //eslint-disable-next-line
-      var domNode = _reactDom["default"].findDOMNode(this);
-
-      (0, _mathRendering.renderMath)(domNode);
+      const domNodeRect = domNode.getBoundingClientRect();
+      const editor = domNode.closest('[data-slate-editor]');
+      const editorRect = editor.getBoundingClientRect();
+      const top = domNodeRect.top - editorRect.top;
+      const left = domNodeRect.left - editorRect.left;
+      this.setState({
+        toolbarStyle: {
+          position: 'absolute',
+          top: `${top + domNodeRect.height + 60}px`,
+          left: `${left + 25}px`
+        }
+      });
     }
-  }, {
-    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,
-          _this$props2$mathMlOp = _this$props2.mathMlOptions,
-          mathMlOptions = _this$props2$mathMlOp === void 0 ? {} : _this$props2$mathMlOp,
-          _this$props2$baseInpu = _this$props2.baseInputConfiguration,
-          baseInputConfiguration = _this$props2$baseInpu === void 0 ? {} : _this$props2$baseInpu,
-          _this$props2$response = _this$props2.responseAreaInputConfiguration,
-          responseAreaInputConfiguration = _this$props2$response === void 0 ? {} : _this$props2$response;
-      var _this$state = this.state,
-          respAreaMarkup = _this$state.respAreaMarkup,
-          toolbarStyle = _this$state.toolbarStyle;
-
-      if (!toolbarStyle) {
-        return null;
-      }
-
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.responseContainer,
-        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,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
-        onChange: function onChange(respAreaMarkup) {
-          if (_this3.preventDone) {
-            return;
-          }
-
-          _this3.onRespAreaChange(respAreaMarkup);
-        },
-        onDone: function onDone(val) {
-          if (_this3.preventDone) {
-            return;
-          }
-
-          _this3.onDone(val);
-        },
-        onBlur: function onBlur(e) {
-          if (!e.relatedTarget) {
-            return;
-          }
-
-          var isInInsertCharacter = !!(e.relatedTarget && e.relatedTarget.closest('.insert-character-dialog'));
-          var isInDoneButton = !!(e.relatedTarget && e.relatedTarget.closest('[aria-label="Done"]'));
-          _this3.preventDone = isInInsertCharacter || isInDoneButton;
-
-          if (isInInsertCharacter || isInDoneButton) {
-            _this3.clickedInside = true;
-          }
-
-          _this3.onBlur(e);
-        },
-        placeholder: "Add Choice",
-        pluginProps: (0, _utils.getPluginProps)(responseAreaInputConfiguration === null || responseAreaInputConfiguration === void 0 ? void 0 : responseAreaInputConfiguration.inputConfiguration, baseInputConfiguration),
-        spellCheck: spellCheck,
-        uploadSoundSupport: uploadSoundSupport,
-        mathMlOptions: mathMlOptions
-      }), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
-        className: classes.addButton,
-        onMouseDown: function onMouseDown() {
-          return _this3.focusInput();
-        },
-        onClick: function onClick() {
-          return _this3.onAddChoice();
-        },
-        size: "small",
-        "aria-label": "Add"
-      }, /*#__PURE__*/_react["default"].createElement(_Add["default"], {
-        fontSize: "inherit"
-      }))), 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);
-          },
-          onEditChoice: function onEditChoice() {
-            return _this3.onEditChoice(label, index);
-          },
-          value: label,
-          correct: correct
-        });
-      })));
+  }
+  componentDidUpdate() {
+    //eslint-disable-next-line
+    const domNode = _reactDom.default.findDOMNode(this);
+    (0, _mathRendering.renderMath)(domNode);
+  }
+  render() {
+    const {
+      choices,
+      spellCheck,
+      uploadSoundSupport,
+      mathMlOptions = {},
+      baseInputConfiguration = {},
+      responseAreaInputConfiguration = {}
+    } = this.props;
+    const {
+      respAreaMarkup,
+      toolbarStyle
+    } = this.state;
+    if (!toolbarStyle) {
+      return null;
     }
-  }]);
-  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,
-  onCheck: _propTypes["default"].func,
-  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
+    return /*#__PURE__*/_react.default.createElement(ResponseContainer, {
+      style: {
+        ...toolbarStyle,
+        backgroundColor: '#E0E1E6'
+      },
+      onMouseDown: this.onClickInside
+    }, /*#__PURE__*/_react.default.createElement(ItemBuilder, null, /*#__PURE__*/_react.default.createElement(RespArea, {
+      ref: ref => {
+        if (ref) {
+          this.editorRef = ref;
+        }
+      },
+      autoFocus: true,
+      autoSave: true,
+      toolbarOpts: {
+        position: 'top',
+        alwaysVisible: false,
+        showDone: false,
+        doneOn: 'blur'
+      },
+      markup: respAreaMarkup,
+      onKeyDown: this.onKeyDown,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      onChange: respAreaMarkup => {
+        if (this.preventDone) {
+          return;
+        }
+        this.onRespAreaChange(respAreaMarkup);
+      },
+      onDone: val => {
+        if (this.preventDone) {
+          return;
+        }
+        this.onDone(val);
+      },
+      onBlur: e => {
+        if (!e.relatedTarget) {
+          return;
+        }
+        const isInInsertCharacter = !!(e.relatedTarget && e.relatedTarget.closest('.insert-character-dialog'));
+        const isInDoneButton = !!(e.relatedTarget && e.relatedTarget.closest('[aria-label="Done"]'));
+        this.preventDone = isInInsertCharacter || isInDoneButton;
+        if (isInInsertCharacter || isInDoneButton) {
+          this.clickedInside = true;
+        }
+        this.onBlur(e);
+      },
+      placeholder: "Add Choice",
+      pluginProps: (0, _utils.getPluginProps)(responseAreaInputConfiguration?.inputConfiguration, baseInputConfiguration),
+      spellCheck: spellCheck,
+      uploadSoundSupport: uploadSoundSupport,
+      mathMlOptions: mathMlOptions
+    }), /*#__PURE__*/_react.default.createElement(AddButton, {
+      onMouseDown: () => this.focusInput(),
+      onClick: () => this.onAddChoice(),
+      size: "small",
+      "aria-label": "Add"
+    }, /*#__PURE__*/_react.default.createElement(_Add.default, {
+      fontSize: "inherit"
+    }))), choices && /*#__PURE__*/_react.default.createElement(ChoicesHolder, null, choices.map(({
+      label,
+      correct
+    }, index) => /*#__PURE__*/_react.default.createElement(MenuItem, {
+      key: index,
+      onClick: () => this.onSelectChoice(label, index),
+      onRemoveChoice: () => this.onRemoveChoice(label, index),
+      onEditChoice: () => this.onEditChoice(label, index),
+      value: label,
+      correct: correct
+    }))));
+  }
+}
+(0, _defineProperty2.default)(RespAreaToolbar, "propTypes", {
+  node: _propTypes.default.object,
+  uploadSoundSupport: _propTypes.default.object,
+  onDone: _propTypes.default.func,
+  choices: _propTypes.default.array,
+  onAddChoice: _propTypes.default.func.isRequired,
+  onCheck: _propTypes.default.func,
+  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
     })
   }),
-  spellCheck: _propTypes["default"].bool
+  spellCheck: _propTypes.default.bool
 });
-var StyledRespAreaToolbar = (0, _styles.withStyles)(function (theme) {
-  return {
-    responseContainer: {
-      boxShadow: theme.shadows[2],
-      borderRadius: '4px',
-      width: '400px'
-    },
-    respArea: {
-      borderRadius: '4px',
-      backgroundColor: theme.palette.common.white,
-      '& [data-slate-editor="true"]': {
-        minHeight: 'initial !important'
-      }
-    },
-    addButton: {
-      fontSize: theme.typography.fontSize + 2,
-      padding: theme.spacing.unit / 2,
-      color: theme.palette.common.black,
-      position: 'absolute',
-      top: '50%',
-      right: theme.spacing.unit * 2,
-      transform: 'translate(0, -50%)'
-    },
-    choicesHolder: {
-      display: 'flex',
-      flexDirection: 'column',
-      '& > div:last-child': {
-        border: 'none'
-      }
-    },
-    itemBuilder: {
-      padding: theme.spacing.unit / 2,
-      position: 'relative'
-    }
-  };
-})(RespAreaToolbar);
-var _default = StyledRespAreaToolbar;
-exports["default"] = _default;
+const StyledRespAreaToolbar = RespAreaToolbar;
+var _default = exports.default = StyledRespAreaToolbar;
 //# sourceMappingURL=inline-dropdown-toolbar.js.map