@pie-element/drag-in-the-blank 5.10.2-next.1 → 5.10.2-next.10

package/configure/lib/choice.js

@@ -0,0 +1,126 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tileSource = exports["default"] = exports.BlankContent = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _MoreVert = _interopRequireDefault(require("@material-ui/icons/MoreVert"));
+
+var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
+
+var _reactDnd = require("react-dnd");
+
+var _styles = require("@material-ui/core/styles");
+
+var _markupUtils = require("./markupUtils");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var GripIcon = function GripIcon(_ref) {
+  var style = _ref.style;
+  return /*#__PURE__*/_react["default"].createElement("span", {
+    style: style
+  }, /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], {
+    style: {
+      margin: '0 -16px'
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null));
+};
+
+GripIcon.propTypes = {
+  style: _propTypes["default"].object
+};
+var BlankContent = (0, _styles.withStyles)(function (theme) {
+  return {
+    choice: {
+      display: 'inline-flex',
+      minWidth: '178px',
+      minHeight: '36px',
+      background: theme.palette.common.white,
+      boxSizing: 'border-box',
+      borderRadius: '3px',
+      overflow: 'hidden',
+      position: 'relative',
+      padding: '8px 35px 8px 35px',
+      cursor: 'grab'
+    },
+    deleteIcon: {
+      position: 'absolute',
+      top: '6px',
+      right: '0',
+      color: theme.palette.grey[500],
+      zIndex: 2,
+      '& :hover': {
+        cursor: 'pointer',
+        color: theme.palette.common.black
+      }
+    }
+  };
+})(function (props) {
+  var classes = props.classes,
+      connectDragSource = props.connectDragSource,
+      choice = props.choice,
+      onClick = props.onClick,
+      onRemoveChoice = props.onRemoveChoice,
+      error = props.error;
+  return connectDragSource( /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.choice,
+    style: {
+      border: "1px solid ".concat(error ? '#f44336' : '#C0C3CF')
+    },
+    onClick: onClick
+  }, /*#__PURE__*/_react["default"].createElement(GripIcon, {
+    style: {
+      position: 'absolute',
+      top: '6px',
+      left: '15px',
+      color: '#9e9e9e',
+      zIndex: 2
+    }
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: choice.value
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_Delete["default"], {
+    className: classes.deleteIcon,
+    onClick: function onClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      onRemoveChoice(e);
+    }
+  })));
+});
+exports.BlankContent = BlankContent;
+var tileSource = {
+  canDrag: function canDrag(props) {
+    if ((0, _markupUtils.choiceIsEmpty)(props.choice)) {
+      alert('You need to define a value for an answer choice before it can be associated with a response area.');
+      return false;
+    }
+
+    return !props.disabled;
+  },
+  beginDrag: function beginDrag(props) {
+    return {
+      id: props.targetId,
+      value: props.choice,
+      instanceId: props.instanceId
+    };
+  }
+};
+exports.tileSource = tileSource;
+
+var _default = (0, _reactDnd.DragSource)('drag-in-the-blank-choice', tileSource, function (connect, monitor) {
+  return {
+    connectDragSource: connect.dragSource(),
+    isDragging: monitor.isDragging()
+  };
+})(BlankContent);
+
+exports["default"] = _default;
+//# sourceMappingURL=choice.js.map

package/configure/lib/choice.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/choice.jsx"],"names":["GripIcon","style","margin","propTypes","PropTypes","object","BlankContent","theme","choice","display","minWidth","minHeight","background","palette","common","white","boxSizing","borderRadius","overflow","position","padding","cursor","deleteIcon","top","right","color","grey","zIndex","black","props","classes","connectDragSource","onClick","onRemoveChoice","error","border","left","__html","value","e","preventDefault","stopPropagation","tileSource","canDrag","alert","disabled","beginDrag","id","targetId","instanceId","connect","monitor","dragSource","isDragging"],"mappings":"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","sourcesContent":["import React from 'react';\nimport MoreVert from '@material-ui/icons/MoreVert';\nimport Delete from '@material-ui/icons/Delete';\nimport { DragSource } from 'react-dnd';\nimport { withStyles } from '@material-ui/core/styles';\nimport { choiceIsEmpty } from './markupUtils';\nimport PropTypes from 'prop-types';\n\nconst GripIcon = ({ style }) => {\n  return (\n    <span style={style}>\n      <MoreVert style={{ margin: '0 -16px' }} />\n      <MoreVert />\n    </span>\n  );\n};\n\nGripIcon.propTypes = {\n  style: PropTypes.object,\n};\n\nexport const BlankContent = withStyles((theme) => ({\n  choice: {\n    display: 'inline-flex',\n    minWidth: '178px',\n    minHeight: '36px',\n    background: theme.palette.common.white,\n    boxSizing: 'border-box',\n    borderRadius: '3px',\n    overflow: 'hidden',\n    position: 'relative',\n    padding: '8px 35px 8px 35px',\n    cursor: 'grab',\n  },\n  deleteIcon: {\n    position: 'absolute',\n    top: '6px',\n    right: '0',\n    color: theme.palette.grey[500],\n    zIndex: 2,\n\n    '& :hover': {\n      cursor: 'pointer',\n      color: theme.palette.common.black,\n    },\n  },\n}))((props) => {\n  const { classes, connectDragSource, choice, onClick, onRemoveChoice, error } = props;\n\n  return connectDragSource(\n    <div className={classes.choice} style={{ border: `1px solid ${error ? '#f44336' : '#C0C3CF'}` }} onClick={onClick}>\n      <GripIcon\n        style={{\n          position: 'absolute',\n          top: '6px',\n          left: '15px',\n          color: '#9e9e9e',\n          zIndex: 2,\n        }}\n      />\n\n      <span dangerouslySetInnerHTML={{ __html: choice.value }} />\n\n      <Delete\n        className={classes.deleteIcon}\n        onClick={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n\n          onRemoveChoice(e);\n        }}\n      />\n    </div>,\n  );\n});\n\nexport const tileSource = {\n  canDrag(props) {\n    if (choiceIsEmpty(props.choice)) {\n      alert('You need to define a value for an answer choice before it can be associated with a response area.');\n      return false;\n    }\n\n    return !props.disabled;\n  },\n  beginDrag(props) {\n    return {\n      id: props.targetId,\n      value: props.choice,\n      instanceId: props.instanceId,\n    };\n  },\n};\n\nexport default DragSource('drag-in-the-blank-choice', tileSource, (connect, monitor) => ({\n  connectDragSource: connect.dragSource(),\n  isDragging: monitor.isDragging(),\n}))(BlankContent);\n"],"file":"choice.js"}

package/configure/lib/choices.js

@@ -0,0 +1,388 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Choices = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+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 = require("@pie-lib/pie-toolbox/editable-html");
+
+var _mathRenderingAccessible = require("@pie-lib/pie-toolbox/math-rendering-accessible");
+
+var _find = _interopRequireDefault(require("lodash/find"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _choice = _interopRequireDefault(require("./choice"));
+
+var _markupUtils = require("./markupUtils");
+
+var _styles = require("@material-ui/core/styles");
+
+var _configUi = require("@pie-lib/pie-toolbox/config-ui");
+
+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 styles = function styles(theme) {
+  return {
+    design: {
+      display: 'flex',
+      flexDirection: 'column',
+      marginBottom: theme.spacing.unit * 1.5
+    },
+    addButton: {
+      marginLeft: 'auto'
+    },
+    altChoices: {
+      alignItems: 'flex-start',
+      display: 'flex',
+      flexWrap: 'wrap',
+      justifyContent: 'space-evenly',
+      marginTop: theme.spacing.unit,
+      '& > *': {
+        margin: theme.spacing.unit
+      }
+    },
+    errorText: {
+      fontSize: theme.typography.fontSize - 2,
+      color: theme.palette.error.main,
+      paddingBottom: theme.spacing.unit * 2
+    }
+  };
+};
+
+var Choices = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Choices, _React$Component);
+
+  var _super = _createSuper(Choices);
+
+  function Choices() {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Choices);
+
+    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), "state", {
+      warning: {
+        open: false
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "preventDone", false);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "rerenderMath", function () {
+      //eslint-disable-next-line
+      var domNode = _reactDom["default"].findDOMNode((0, _assertThisInitialized2["default"])(_this));
+
+      (0, _mathRenderingAccessible.renderMath)(domNode);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChoiceChanged", function (prevValue, val, key) {
+      var _this$props = _this.props,
+          onChange = _this$props.onChange,
+          model = _this$props.model;
+      var choices = model.choices,
+          correctResponse = model.correctResponse,
+          alternateResponses = model.alternateResponses;
+      var duplicatedValue = (choices || []).find(function (c) {
+        return c.value === val && c.id !== key;
+      }); // discard the new added choice or the changes if the choice would be a duplicate to one that already exists
+
+      if (duplicatedValue) {
+        if (prevValue === '') {
+          // remove the new added choice from choices
+          var _newChoices = (choices || []).filter(function (c) {
+            return c.id !== key;
+          });
+
+          onChange(_newChoices);
+        }
+
+        _this.setState({
+          warning: {
+            open: true,
+            text: 'Identical answer choices are not allowed and the changes will be discarded.'
+          }
+        });
+
+        return;
+      }
+
+      var newChoices = (choices === null || choices === void 0 ? void 0 : choices.map(function (choice) {
+        return choice.id === key ? _objectSpread(_objectSpread({}, choice), {}, {
+          value: val
+        }) : choice;
+      })) || [];
+
+      if (!(0, _markupUtils.choiceIsEmpty)({
+        value: val
+      })) {
+        onChange(newChoices);
+        return;
+      } // if the edited content is empty, its usage has to be searched in the correct response definitions
+
+
+      var usedForResponse = false;
+
+      if (correctResponse) {
+        Object.keys(correctResponse).forEach(function (responseKey) {
+          if (correctResponse[responseKey] === key) {
+            usedForResponse = true;
+          }
+        });
+      }
+
+      if (alternateResponses && !usedForResponse) {
+        Object.values(alternateResponses).forEach(function (alternate) {
+          if (alternate.indexOf(key) >= 0) {
+            usedForResponse = true;
+          }
+        });
+      }
+
+      if (usedForResponse) {
+        _this.setState({
+          warning: {
+            open: true,
+            text: 'Answer choices cannot be blank and the changes will be discarded.'
+          }
+        });
+
+        return;
+      }
+
+      var newChoicesWithoutTheEmptyOne = newChoices.filter(function (choice) {
+        return choice.id !== key;
+      });
+      onChange(newChoicesWithoutTheEmptyOne);
+
+      _this.setState({
+        warning: {
+          open: true,
+          text: 'Answer choices cannot be blank.'
+        }
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChoiceFocus", function (id) {
+      return _this.setState({
+        focusedEl: id
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onAddChoice", function () {
+      var _this$props2 = _this.props,
+          oldChoices = _this$props2.model.choices,
+          onChange = _this$props2.onChange;
+
+      _this.setState({
+        focusedEl: "".concat(oldChoices.length)
+      }, function () {
+        onChange([].concat((0, _toConsumableArray2["default"])(oldChoices), [{
+          id: "".concat(oldChoices.length),
+          value: ''
+        }]));
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChoiceRemove", function (id) {
+      var _this$props3 = _this.props,
+          onChange = _this$props3.onChange,
+          choices = _this$props3.model.choices;
+      var newChoices = (choices || []).filter(function (choice) {
+        return choice.id !== id;
+      });
+      onChange(newChoices);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getVisibleChoices", function () {
+      var _this$props4 = _this.props,
+          duplicates = _this$props4.duplicates,
+          _this$props4$model = _this$props4.model,
+          choices = _this$props4$model.choices,
+          correctResponse = _this$props4$model.correctResponse;
+
+      if (!choices) {
+        return [];
+      }
+
+      if (duplicates) {
+        return choices;
+      } // if duplicates not allowed, remove the choices that are used to define the correct response
+
+
+      return choices.filter(function (choice) {
+        return !(0, _find["default"])(correctResponse, function (v) {
+          return v === choice.id;
+        });
+      });
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Choices, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.rerenderMath();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.rerenderMath();
+
+      if (this.focusedNodeRef) {
+        this.focusedNodeRef.focus('end');
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$state = this.state,
+          focusedEl = _this$state.focusedEl,
+          warning = _this$state.warning;
+      var _this$props5 = this.props,
+          classes = _this$props5.classes,
+          duplicates = _this$props5.duplicates,
+          error = _this$props5.error,
+          _this$props5$mathMlOp = _this$props5.mathMlOptions,
+          mathMlOptions = _this$props5$mathMlOp === void 0 ? {} : _this$props5$mathMlOp,
+          maxChoices = _this$props5.maxChoices,
+          choices = _this$props5.model.choices,
+          toolbarOpts = _this$props5.toolbarOpts,
+          uploadSoundSupport = _this$props5.uploadSoundSupport,
+          _this$props5$imageSup = _this$props5.imageSupport,
+          imageSupport = _this$props5$imageSup === void 0 ? {} : _this$props5$imageSup,
+          _this$props5$pluginPr = _this$props5.pluginProps,
+          pluginProps = _this$props5$pluginPr === void 0 ? {} : _this$props5$pluginPr;
+      var visibleChoices = this.getVisibleChoices() || [];
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.design
+      }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+        className: classes.addButton,
+        variant: "contained",
+        color: "primary",
+        onClick: this.onAddChoice,
+        disabled: maxChoices && choices && maxChoices === choices.length
+      }, "Add Choice"), /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.altChoices
+      }, visibleChoices.map(function (choice, index) {
+        return focusedEl === choice.id ? /*#__PURE__*/_react["default"].createElement("div", {
+          key: index,
+          style: {
+            minWidth: '100%',
+            zIndex: '100'
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
+          ref: function ref(_ref) {
+            return _this2.focusedNodeRef = _ref;
+          },
+          className: classes.prompt,
+          imageSupport: imageSupport,
+          markup: choice.value,
+          pluginProps: pluginProps,
+          languageCharactersProps: [{
+            language: 'spanish'
+          }, {
+            language: 'special'
+          }],
+          onChange: function onChange(val) {
+            if (_this2.preventDone) {
+              return;
+            }
+
+            _this2.onChoiceChanged(choice.value, val, choice.id);
+          },
+          onDone: function onDone() {
+            if (_this2.preventDone) {
+              return;
+            }
+
+            _this2.setState({
+              focusedEl: undefined
+            });
+          },
+          onBlur: function onBlur(e) {
+            var inInInsertCharacter = e.relatedTarget && e.relatedTarget.closest('.insert-character-dialog');
+            _this2.preventDone = inInInsertCharacter;
+          },
+          disableUnderline: true,
+          toolbarOpts: toolbarOpts,
+          uploadSoundSupport: uploadSoundSupport,
+          mathMlOptions: mathMlOptions
+        })) : /*#__PURE__*/_react["default"].createElement(_choice["default"], {
+          key: index,
+          duplicates: duplicates,
+          targetId: "0",
+          choice: choice,
+          error: error,
+          onClick: function onClick() {
+            return _this2.onChoiceFocus(choice.id);
+          },
+          onRemoveChoice: function onRemoveChoice() {
+            return _this2.onChoiceRemove(choice.id);
+          }
+        });
+      })), error && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, error), /*#__PURE__*/_react["default"].createElement(_configUi.AlertDialog, {
+        open: warning.open,
+        title: "Warning",
+        text: warning.text,
+        onConfirm: function onConfirm() {
+          return _this2.setState({
+            warning: {
+              open: false
+            }
+          });
+        }
+      }));
+    }
+  }]);
+  return Choices;
+}(_react["default"].Component);
+
+exports.Choices = Choices;
+(0, _defineProperty2["default"])(Choices, "propTypes", {
+  duplicates: _propTypes["default"].bool,
+  error: _propTypes["default"].string,
+  model: _propTypes["default"].object.isRequired,
+  onChange: _propTypes["default"].func.isRequired,
+  classes: _propTypes["default"].object.isRequired,
+  toolbarOpts: _propTypes["default"].object,
+  pluginProps: _propTypes["default"].object,
+  maxChoices: _propTypes["default"].number,
+  uploadSoundSupport: _propTypes["default"].object
+});
+var Styled = (0, _styles.withStyles)(styles)(Choices);
+var _default = Styled;
+exports["default"] = _default;
+//# sourceMappingURL=choices.js.map

package/configure/lib/choices.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/choices.jsx"],"names":["styles","theme","design","display","flexDirection","marginBottom","spacing","unit","addButton","marginLeft","altChoices","alignItems","flexWrap","justifyContent","marginTop","margin","errorText","fontSize","typography","color","palette","error","main","paddingBottom","Choices","warning","open","domNode","ReactDOM","findDOMNode","prevValue","val","key","props","onChange","model","choices","correctResponse","alternateResponses","duplicatedValue","find","c","value","id","newChoices","filter","setState","text","map","choice","usedForResponse","Object","keys","forEach","responseKey","values","alternate","indexOf","newChoicesWithoutTheEmptyOne","focusedEl","oldChoices","length","duplicates","v","rerenderMath","focusedNodeRef","focus","state","classes","mathMlOptions","maxChoices","toolbarOpts","uploadSoundSupport","imageSupport","pluginProps","visibleChoices","getVisibleChoices","onAddChoice","index","minWidth","zIndex","ref","prompt","language","preventDone","onChoiceChanged","undefined","e","inInInsertCharacter","relatedTarget","closest","onChoiceFocus","onChoiceRemove","React","Component","PropTypes","bool","string","object","isRequired","func","number","Styled"],"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/pie-toolbox/editable-html';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering-accessible';\nimport find from 'lodash/find';\nimport Button from '@material-ui/core/Button';\nimport Choice from './choice';\nimport { choiceIsEmpty } from './markupUtils';\nimport { withStyles } from '@material-ui/core/styles';\nimport { AlertDialog } from '@pie-lib/pie-toolbox/config-ui';\n\nconst styles = (theme) => ({\n  design: {\n    display: 'flex',\n    flexDirection: 'column',\n    marginBottom: theme.spacing.unit * 1.5,\n  },\n  addButton: {\n    marginLeft: 'auto',\n  },\n  altChoices: {\n    alignItems: 'flex-start',\n    display: 'flex',\n    flexWrap: 'wrap',\n    justifyContent: 'space-evenly',\n    marginTop: theme.spacing.unit,\n\n    '& > *': {\n      margin: theme.spacing.unit,\n    },\n  },\n  errorText: {\n    fontSize: theme.typography.fontSize - 2,\n    color: theme.palette.error.main,\n    paddingBottom: theme.spacing.unit * 2,\n  },\n});\n\nexport class Choices extends React.Component {\n  static propTypes = {\n    duplicates: PropTypes.bool,\n    error: PropTypes.string,\n    model: PropTypes.object.isRequired,\n    onChange: PropTypes.func.isRequired,\n    classes: PropTypes.object.isRequired,\n    toolbarOpts: PropTypes.object,\n    pluginProps: PropTypes.object,\n    maxChoices: PropTypes.number,\n    uploadSoundSupport: PropTypes.object,\n  };\n\n  state = { warning: { open: false } };\n  preventDone = false;\n\n  componentDidMount() {\n    this.rerenderMath();\n  }\n\n  componentDidUpdate() {\n    this.rerenderMath();\n\n    if (this.focusedNodeRef) {\n      this.focusedNodeRef.focus('end');\n    }\n  }\n\n  rerenderMath = () => {\n    //eslint-disable-next-line\n    const domNode = ReactDOM.findDOMNode(this);\n\n    renderMath(domNode);\n  };\n\n  onChoiceChanged = (prevValue, val, key) => {\n    const { onChange, model } = this.props;\n    const { choices, correctResponse, alternateResponses } = model;\n    const duplicatedValue = (choices || []).find((c) => c.value === val && c.id !== key);\n\n    // discard the new added choice or the changes if the choice would be a duplicate to one that already exists\n    if (duplicatedValue) {\n      if (prevValue === '') {\n        // remove the new added choice from choices\n        const newChoices = (choices || []).filter((c) => c.id !== key);\n\n        onChange(newChoices);\n      }\n\n      this.setState({\n        warning: {\n          open: true,\n          text: 'Identical answer choices are not allowed and the changes will be discarded.',\n        },\n      });\n\n      return;\n    }\n\n    const newChoices = choices?.map((choice) => (choice.id === key ? { ...choice, value: val } : choice)) || [];\n\n    if (!choiceIsEmpty({ value: val })) {\n      onChange(newChoices);\n\n      return;\n    }\n\n    // if the edited content is empty, its usage has to be searched in the correct response definitions\n    let usedForResponse = false;\n\n    if (correctResponse) {\n      Object.keys(correctResponse).forEach((responseKey) => {\n        if (correctResponse[responseKey] === key) {\n          usedForResponse = true;\n        }\n      });\n    }\n\n    if (alternateResponses && !usedForResponse) {\n      Object.values(alternateResponses).forEach((alternate) => {\n        if (alternate.indexOf(key) >= 0) {\n          usedForResponse = true;\n        }\n      });\n    }\n\n    if (usedForResponse) {\n      this.setState({\n        warning: {\n          open: true,\n          text: 'Answer choices cannot be blank and the changes will be discarded.',\n        },\n      });\n\n      return;\n    }\n\n    const newChoicesWithoutTheEmptyOne = newChoices.filter((choice) => choice.id !== key);\n\n    onChange(newChoicesWithoutTheEmptyOne);\n\n    this.setState({\n      warning: {\n        open: true,\n        text: 'Answer choices cannot be blank.',\n      },\n    });\n  };\n\n  onChoiceFocus = (id) =>\n    this.setState({\n      focusedEl: id,\n    });\n\n  onAddChoice = () => {\n    const {\n      model: { choices: oldChoices },\n      onChange,\n    } = this.props;\n\n    this.setState(\n      {\n        focusedEl: `${oldChoices.length}`,\n      },\n      () => {\n        onChange([\n          ...oldChoices,\n          {\n            id: `${oldChoices.length}`,\n            value: '',\n          },\n        ]);\n      },\n    );\n  };\n\n  onChoiceRemove = (id) => {\n    const {\n      onChange,\n      model: { choices },\n    } = this.props;\n    const newChoices = (choices || []).filter((choice) => choice.id !== id);\n\n    onChange(newChoices);\n  };\n\n  getVisibleChoices = () => {\n    const {\n      duplicates,\n      model: { choices, correctResponse },\n    } = this.props;\n\n    if (!choices) {\n      return [];\n    }\n\n    if (duplicates) {\n      return choices;\n    }\n\n    // if duplicates not allowed, remove the choices that are used to define the correct response\n    return choices.filter((choice) => !find(correctResponse, (v) => v === choice.id));\n  };\n\n  render() {\n    const { focusedEl, warning } = this.state;\n    const {\n      classes,\n      duplicates,\n      error,\n      mathMlOptions = {},\n      maxChoices,\n      model: { choices },\n      toolbarOpts,\n      uploadSoundSupport,\n      imageSupport = {},\n      pluginProps = {},\n    } = this.props;\n    const visibleChoices = this.getVisibleChoices() || [];\n\n    return (\n      <div className={classes.design}>\n        <Button\n          className={classes.addButton}\n          variant=\"contained\"\n          color=\"primary\"\n          onClick={this.onAddChoice}\n          disabled={maxChoices && choices && maxChoices === choices.length}\n        >\n          Add Choice\n        </Button>\n\n        <div className={classes.altChoices}>\n          {visibleChoices.map((choice, index) =>\n            focusedEl === choice.id ? (\n              <div\n                key={index}\n                style={{\n                  minWidth: '100%',\n                  zIndex: '100',\n                }}\n              >\n                <EditableHtml\n                  ref={(ref) => (this.focusedNodeRef = ref)}\n                  className={classes.prompt}\n                  imageSupport={imageSupport}\n                  markup={choice.value}\n                  pluginProps={pluginProps}\n                  languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n                  onChange={(val) => {\n                    if (this.preventDone) {\n                      return;\n                    }\n\n                    this.onChoiceChanged(choice.value, val, choice.id);\n                  }}\n                  onDone={() => {\n                    if (this.preventDone) {\n                      return;\n                    }\n\n                    this.setState({\n                      focusedEl: undefined,\n                    });\n                  }}\n                  onBlur={(e) => {\n                    const inInInsertCharacter = e.relatedTarget && e.relatedTarget.closest('.insert-character-dialog');\n\n                    this.preventDone = inInInsertCharacter;\n                  }}\n                  disableUnderline\n                  toolbarOpts={toolbarOpts}\n                  uploadSoundSupport={uploadSoundSupport}\n                  mathMlOptions={mathMlOptions}\n                />\n              </div>\n            ) : (\n              <Choice\n                key={index}\n                duplicates={duplicates}\n                targetId=\"0\"\n                choice={choice}\n                error={error}\n                onClick={() => this.onChoiceFocus(choice.id)}\n                onRemoveChoice={() => this.onChoiceRemove(choice.id)}\n              />\n            ),\n          )}\n        </div>\n        {error && <div className={classes.errorText}>{error}</div>}\n\n        <AlertDialog\n          open={warning.open}\n          title=\"Warning\"\n          text={warning.text}\n          onConfirm={() => this.setState({ warning: { open: false } })}\n        />\n      </div>\n    );\n  }\n}\n\nconst Styled = withStyles(styles)(Choices);\n\nexport default Styled;\n"],"file":"choices.js"}