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

package/configure/lib/main.js

@@ -1,226 +1,166 @@
 "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.Main = 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 = exports.Main = void 0;
 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 _configUi = require("@pie-lib/config-ui");
-
 var _mathRendering = require("@pie-lib/math-rendering");
-
 var _renderUi = require("@pie-lib/render-ui");
-
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
-
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-
 var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
-
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
-
 var _reduce = _interopRequireDefault(require("lodash/reduce"));
-
 var _max = _interopRequireDefault(require("lodash/max"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
-
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
-
-var _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/ExpansionPanel"));
-
-var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/ExpansionPanelSummary"));
-
-var _ExpansionPanelDetails = _interopRequireDefault(require("@material-ui/core/ExpansionPanelDetails"));
-
-var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
-
-var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
-
+var _styles = require("@mui/material/styles");
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Accordion = _interopRequireDefault(require("@mui/material/Accordion"));
+var _AccordionSummary = _interopRequireDefault(require("@mui/material/AccordionSummary"));
+var _AccordionDetails = _interopRequireDefault(require("@mui/material/AccordionDetails"));
+var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
+var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
 var _inlineDropdownToolbar = _interopRequireDefault(require("./inline-dropdown-toolbar"));
-
 var _utils = require("./utils");
-
 var _responseArea = _interopRequireDefault(require("./response-area"));
-
-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 toggle = _configUi.settings.toggle,
-    Panel = _configUi.settings.Panel,
-    dropdown = _configUi.settings.dropdown;
-
-var styles = function styles(theme) {
-  return {
-    promptHolder: {
-      width: '100%',
-      paddingTop: theme.spacing.unit * 2,
-      marginBottom: theme.spacing.unit * 2
-    },
-    choiceRationaleHolder: {
-      width: '100%',
-      paddingTop: theme.spacing.unit / 2,
-      marginBottom: theme.spacing.unit * 2
-    },
-    markup: {
-      minHeight: '100px',
-      width: '100%',
-      '& [data-slate-editor="true"]': {
-        minHeight: '100px'
-      }
-    },
-    choiceConfiguration: {
-      paddingTop: theme.spacing.unit * 2,
-      paddingBottom: theme.spacing.unit * 2
-    },
-    text: {
-      fontSize: theme.typography.fontSize + 2,
-      marginRight: theme.spacing.unit
-    },
-    rationaleLabel: {
-      display: 'flex',
-      alignItems: 'center',
-      whiteSpace: 'break-spaces',
-      color: _renderUi.color.disabled(),
-      padding: 0,
-      fontSize: theme.typography.fontSize - 2,
-      lineHeight: 1
-    },
-    rationaleChoices: {
-      marginBottom: theme.spacing.unit * 2.5
-    },
-    panelDetails: {
-      display: 'block',
-      paddingTop: 0,
-      paddingBottom: 0
-    },
-    flexContainer: {
-      display: 'flex',
-      alignItems: 'center',
-      marginBottom: theme.spacing.unit
-    },
-    tooltip: {
-      fontSize: theme.typography.fontSize - 2,
-      whiteSpace: 'pre',
-      maxWidth: '500px'
-    },
-    errorText: {
-      fontSize: theme.typography.fontSize - 2,
-      color: theme.palette.error.main,
-      paddingTop: theme.spacing.unit
-    }
-  };
-};
-
-var createElementFromHTML = function createElementFromHTML(htmlString) {
-  var div = document.createElement('div');
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const {
+  toggle,
+  Panel,
+  dropdown
+} = _configUi.settings;
+const PromptHolder = (0, _styles.styled)(_configUi.InputContainer)(({
+  theme
+}) => ({
+  width: '100%',
+  paddingTop: theme.spacing(2),
+  marginBottom: theme.spacing(2)
+}));
+const ChoiceRationaleHolder = (0, _styles.styled)(_configUi.InputContainer)(({
+  theme
+}) => ({
+  width: '100%',
+  paddingTop: theme.spacing(0.5),
+  marginBottom: theme.spacing(2)
+}));
+const StyledTypography = (0, _styles.styled)(_Typography.default)(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize + 2,
+  marginRight: theme.spacing(1)
+}));
+const RationaleLabel = (0, _styles.styled)('span')(({
+  theme
+}) => ({
+  display: 'flex',
+  alignItems: 'center',
+  whiteSpace: 'break-spaces',
+  color: _renderUi.color.disabled(),
+  padding: 0,
+  fontSize: theme.typography.fontSize - 2,
+  lineHeight: 1
+}));
+const RationaleChoices = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2.5)
+}));
+const StyledAccordionDetails = (0, _styles.styled)(_AccordionDetails.default)({
+  display: 'block',
+  paddingTop: 0,
+  paddingBottom: 0
+});
+const FlexContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  display: 'flex',
+  alignItems: 'center',
+  marginBottom: theme.spacing(1)
+}));
+const StyledTooltip = (0, _styles.styled)(_Tooltip.default)(({
+  theme
+}) => ({
+  '& .MuiTooltip-tooltip': {
+    fontSize: theme.typography.fontSize - 2,
+    whiteSpace: 'pre',
+    maxWidth: '500px'
+  }
+}));
+const ErrorText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1)
+}));
+const createElementFromHTML = htmlString => {
+  const div = document.createElement('div');
   div.innerHTML = (htmlString || '').trim();
   return div;
 };
-
-var Main = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Main, _React$Component);
-
-  var _super = _createSuper(Main);
-
-  function Main() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Main);
-
-    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", {
+class Main extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "state", {
       warning: {
         open: false
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onModelChange", function (newVal) {
-      _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), newVal));
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onPromptChanged", function (prompt) {
-      _this.onModelChange({
-        prompt: prompt
+    (0, _defineProperty2.default)(this, "onModelChange", newVal => {
+      this.props.onModelChanged({
+        ...this.props.model,
+        ...newVal
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onRationaleChanged", function (rationale) {
-      _this.onModelChange({
-        rationale: rationale
+    (0, _defineProperty2.default)(this, "onPromptChanged", prompt => {
+      this.onModelChange({
+        prompt
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChoiceRationaleChanged", function (index, choice) {
-      var model = _this.props.model;
-      var indexOfChoice = model.choices && model.choices[index] && model.choices[index].findIndex(function (elem) {
-        return elem.label === choice.label && elem.value === choice.value;
+    (0, _defineProperty2.default)(this, "onRationaleChanged", rationale => {
+      this.onModelChange({
+        rationale
       });
+    });
+    (0, _defineProperty2.default)(this, "onChoiceRationaleChanged", (index, choice) => {
+      const {
+        model
+      } = this.props;
+      const indexOfChoice = model.choices && model.choices[index] && model.choices[index].findIndex(elem => elem.label === choice.label && elem.value === choice.value);
       model.choices[index] && model.choices[index].splice(indexOfChoice, 1, choice);
-
-      _this.onModelChange(model);
+      this.onModelChange(model);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onTeacherInstructionsChanged", function (teacherInstructions) {
-      _this.onModelChange({
-        teacherInstructions: teacherInstructions
+    (0, _defineProperty2.default)(this, "onTeacherInstructionsChanged", teacherInstructions => {
+      this.onModelChange({
+        teacherInstructions
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMarkupChanged", function (slateMarkup) {
-      _this.onModelChange({
-        slateMarkup: slateMarkup
+    (0, _defineProperty2.default)(this, "onMarkupChanged", slateMarkup => {
+      this.onModelChange({
+        slateMarkup
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onCheck", function (callback) {
-      _this.setState({
+    (0, _defineProperty2.default)(this, "onCheck", callback => {
+      this.setState({
         warning: {
           open: true,
           text: 'Response areas with under 2 options or with no correct answers will be discarded.',
-          onClose: function onClose() {
-            _this.setState({
+          onClose: () => {
+            this.setState({
               warning: {
                 open: false
               }
             });
           },
-          onConfirm: function onConfirm() {
-            _this.setState({
+          onConfirm: () => {
+            this.setState({
               warning: {
                 open: false
               }
@@ -229,29 +169,27 @@ var Main = /*#__PURE__*/function (_React$Component) {
         }
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (markup) {
-      var respAreaChoices = _this.state.respAreaChoices;
-      var domMarkup = createElementFromHTML(markup);
-      var allRespAreas = domMarkup.querySelectorAll('[data-type="inline_dropdown"]');
-      var allChoices = {};
-      allRespAreas.forEach(function (el) {
+    (0, _defineProperty2.default)(this, "onChange", markup => {
+      const {
+        respAreaChoices
+      } = this.state;
+      const domMarkup = createElementFromHTML(markup);
+      const allRespAreas = domMarkup.querySelectorAll('[data-type="inline_dropdown"]');
+      const allChoices = {};
+      allRespAreas.forEach(el => {
         allChoices[el.dataset.index] = el.dataset.value || '';
       });
-      var existingRespAreaChoices = (0, _reduce["default"])(respAreaChoices, function (obj, choices, key) {
-        if (!(0, _isUndefined["default"])(allChoices[key])) {
+      const existingRespAreaChoices = (0, _reduce.default)(respAreaChoices, (obj, choices, key) => {
+        if (!(0, _isUndefined.default)(allChoices[key])) {
           obj[key] = respAreaChoices[key];
         }
-
         return obj;
       }, {});
-      var newRespAreaChoices = {};
-      var shouldWarn = false;
-      allRespAreas.forEach(function (el, index) {
-        var newChoices = existingRespAreaChoices[el.dataset.index] || [];
-
-        if (newChoices.length < 2 || !newChoices.find(function (c) {
-          return c.correct;
-        })) {
+      const newRespAreaChoices = {};
+      let shouldWarn = false;
+      allRespAreas.forEach((el, index) => {
+        const newChoices = existingRespAreaChoices[el.dataset.index] || [];
+        if (newChoices.length < 2 || !newChoices.find(c => c.correct)) {
           el.remove();
           shouldWarn = true;
         } else {
@@ -259,54 +197,52 @@ var Main = /*#__PURE__*/function (_React$Component) {
           el.dataset.index = index;
         }
       });
-
       if (shouldWarn) {
-        _this.setState({
+        this.setState({
           warning: {
             open: true,
             text: 'Response areas with under 2 options or with no correct answers will be discarded.',
-            onClose: function onClose() {
-              _this.setState({
+            onClose: () => {
+              this.setState({
                 warning: {
                   open: false
                 }
               });
             },
-            onConfirm: function onConfirm() {
-              _this.setState({
+            onConfirm: () => {
+              this.setState({
                 warning: {
                   open: false
                 }
-              }, function () {
-                return _this.onModelChange({
-                  choices: (0, _cloneDeep["default"])(newRespAreaChoices),
-                  slateMarkup: domMarkup.innerHTML
-                });
-              });
+              }, () => this.onModelChange({
+                choices: (0, _cloneDeep.default)(newRespAreaChoices),
+                slateMarkup: domMarkup.innerHTML
+              }));
             }
           }
         });
       } else {
-        _this.onModelChange({
-          choices: (0, _cloneDeep["default"])(newRespAreaChoices),
+        this.onModelChange({
+          choices: (0, _cloneDeep.default)(newRespAreaChoices),
           slateMarkup: domMarkup.innerHTML
         });
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onAddChoice", function (index, label, choiceIndex) {
-      var _respAreaChoices$inde;
-
-      var respAreaChoices = _this.state.respAreaChoices;
-      var maxResponseAreaChoices = _this.props.configuration.maxResponseAreaChoices;
-
+    (0, _defineProperty2.default)(this, "onAddChoice", (index, label, choiceIndex) => {
+      const {
+        respAreaChoices
+      } = this.state;
+      const {
+        maxResponseAreaChoices
+      } = this.props.configuration;
       if (respAreaChoices[index] && respAreaChoices[index].length >= maxResponseAreaChoices) {
-        _this.setState({
+        this.setState({
           warning: {
             open: true,
-            text: "There are only ".concat(maxResponseAreaChoices, " answers allowed per choice."),
+            text: `There are only ${maxResponseAreaChoices} answers allowed per choice.`,
             onClose: undefined,
-            onConfirm: function onConfirm() {
-              _this.setState({
+            onConfirm: () => {
+              this.setState({
                 warning: {
                   open: false
                 }
@@ -314,26 +250,22 @@ var Main = /*#__PURE__*/function (_React$Component) {
             }
           }
         });
-
         return;
       }
-
       if (!respAreaChoices[index]) {
         respAreaChoices[index] = [];
-      } // check for duplicate answer, but exclude the one that is currently edited
-
+      }
 
-      if ((respAreaChoices[index] || []).find(function (r, idx) {
-        return r.label === label && idx !== choiceIndex;
-      })) {
+      // check for duplicate answer, but exclude the one that is currently edited
+      if ((respAreaChoices[index] || []).find((r, idx) => r.label === label && idx !== choiceIndex)) {
         // show warning for duplicated answers
-        _this.setState({
+        this.setState({
           warning: {
             open: true,
             text: 'Duplicate answers are not allowed.',
             onClose: undefined,
-            onConfirm: function onConfirm() {
-              _this.setState({
+            onConfirm: () => {
+              this.setState({
                 warning: {
                   open: false
                 }
@@ -341,374 +273,287 @@ var Main = /*#__PURE__*/function (_React$Component) {
             }
           }
         });
-
         return;
       }
-
-      if (choiceIndex >= 0 && (_respAreaChoices$inde = respAreaChoices[index]) !== null && _respAreaChoices$inde !== void 0 && _respAreaChoices$inde[choiceIndex]) {
+      if (choiceIndex >= 0 && respAreaChoices[index]?.[choiceIndex]) {
         // we need to update the choice label with the new value
         respAreaChoices[index][choiceIndex].label = label;
       } else {
         // add a new choice
-        var value = respAreaChoices[index] && (0, _max["default"])(respAreaChoices[index].map(function (c) {
-          return parseInt(c.value);
-        }).filter(function (val) {
-          return !isNaN(val);
-        })) || 0;
+        const value = respAreaChoices[index] && (0, _max.default)(respAreaChoices[index].map(c => parseInt(c.value)).filter(val => !isNaN(val))) || 0;
         respAreaChoices[index].push({
-          label: label,
-          value: "".concat(value + 1),
+          label,
+          value: `${value + 1}`,
           correct: false
         });
       }
-
-      _this.onModelChange({
-        choices: (0, _cloneDeep["default"])(respAreaChoices)
+      this.onModelChange({
+        choices: (0, _cloneDeep.default)(respAreaChoices)
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onRemoveChoice", function (respIndex, index) {
-      var respAreaChoices = _this.state.respAreaChoices;
+    (0, _defineProperty2.default)(this, "onRemoveChoice", (respIndex, index) => {
+      const {
+        respAreaChoices
+      } = this.state;
       respAreaChoices[respIndex].splice(index, 1);
-
-      _this.onModelChange({
-        choices: (0, _cloneDeep["default"])(respAreaChoices)
+      this.onModelChange({
+        choices: (0, _cloneDeep.default)(respAreaChoices)
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSelectChoice", function (respIndex, selectedIndex) {
-      var respAreaChoices = _this.state.respAreaChoices;
-      respAreaChoices[respIndex] = respAreaChoices[respIndex].map(function (choice, index) {
-        return _objectSpread(_objectSpread({}, choice), {}, {
-          correct: index === selectedIndex
-        });
-      });
-
-      _this.onModelChange({
-        choices: (0, _cloneDeep["default"])(respAreaChoices)
+    (0, _defineProperty2.default)(this, "onSelectChoice", (respIndex, selectedIndex) => {
+      const {
+        respAreaChoices
+      } = this.state;
+      respAreaChoices[respIndex] = respAreaChoices[respIndex].map((choice, index) => ({
+        ...choice,
+        correct: index === selectedIndex
+      }));
+      this.onModelChange({
+        choices: (0, _cloneDeep.default)(respAreaChoices)
       });
     });
-    return _this;
   }
-
-  (0, _createClass2["default"])(Main, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var choices = this.props.model.choices;
-      this.setState({
-        respAreaChoices: (0, _cloneDeep["default"])(choices)
-      });
-    }
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nProps) {
-      var newState = {};
-
-      if (!(0, _isEqual["default"])(nProps.model.choices, this.props.model.choices) || !(0, _isEqual["default"])(nProps.model.choices, this.state.respAreaChoices)) {
-        newState.respAreaChoices = (0, _cloneDeep["default"])(nProps.model.choices);
-      }
-
-      if (!(0, _isEmpty["default"])(newState)) {
-        this.setState(newState);
+  componentDidMount() {
+    const {
+      model: {
+        choices
       }
+    } = this.props;
+    this.setState({
+      respAreaChoices: (0, _cloneDeep.default)(choices)
+    });
+  }
+  UNSAFE_componentWillReceiveProps(nProps) {
+    const newState = {};
+    if (!(0, _isEqual.default)(nProps.model.choices, this.props.model.choices) || !(0, _isEqual.default)(nProps.model.choices, this.state.respAreaChoices)) {
+      newState.respAreaChoices = (0, _cloneDeep.default)(nProps.model.choices);
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      //eslint-disable-next-line
-      var domNode = _reactDom["default"].findDOMNode(this);
-
-      (0, _mathRendering.renderMath)(domNode);
+    if (!(0, _isEmpty.default)(newState)) {
+      this.setState(newState);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var warning = this.state.warning;
-      var _this$props = this.props,
-          classes = _this$props.classes,
-          model = _this$props.model,
-          configuration = _this$props.configuration,
-          onConfigurationChanged = _this$props.onConfigurationChanged,
-          imageSupport = _this$props.imageSupport,
-          uploadSoundSupport = _this$props.uploadSoundSupport;
-
-      var _ref = configuration || {},
-          _ref$baseInputConfigu = _ref.baseInputConfiguration,
-          baseInputConfiguration = _ref$baseInputConfigu === void 0 ? {} : _ref$baseInputConfigu,
-          _ref$choiceRationale = _ref.choiceRationale,
-          choiceRationale = _ref$choiceRationale === void 0 ? {} : _ref$choiceRationale,
-          _ref$contentDimension = _ref.contentDimensions,
-          contentDimensions = _ref$contentDimension === void 0 ? {} : _ref$contentDimension,
-          _ref$lockChoiceOrder = _ref.lockChoiceOrder,
-          lockChoiceOrder = _ref$lockChoiceOrder === void 0 ? {} : _ref$lockChoiceOrder,
-          maxResponseAreas = _ref.maxResponseAreas,
-          _ref$maxImageWidth = _ref.maxImageWidth,
-          maxImageWidth = _ref$maxImageWidth === void 0 ? {} : _ref$maxImageWidth,
-          _ref$maxImageHeight = _ref.maxImageHeight,
-          maxImageHeight = _ref$maxImageHeight === void 0 ? {} : _ref$maxImageHeight,
-          _ref$partialScoring = _ref.partialScoring,
-          partialScoring = _ref$partialScoring === void 0 ? {} : _ref$partialScoring,
-          _ref$prompt = _ref.prompt,
-          prompt = _ref$prompt === void 0 ? {} : _ref$prompt,
-          _ref$rationale = _ref.rationale,
-          rationale = _ref$rationale === void 0 ? {} : _ref$rationale,
-          settingsPanelDisabled = _ref.settingsPanelDisabled,
-          _ref$spellCheck = _ref.spellCheck,
-          spellCheck = _ref$spellCheck === void 0 ? {} : _ref$spellCheck,
-          _ref$teacherInstructi = _ref.teacherInstructions,
-          teacherInstructions = _ref$teacherInstructi === void 0 ? {} : _ref$teacherInstructi,
-          _ref$template = _ref.template,
-          template = _ref$template === void 0 ? {} : _ref$template,
-          _ref$withRubric = _ref.withRubric,
-          withRubric = _ref$withRubric === void 0 ? {} : _ref$withRubric,
-          _ref$mathMlOptions = _ref.mathMlOptions,
-          mathMlOptions = _ref$mathMlOptions === void 0 ? {} : _ref$mathMlOptions,
-          _ref$language = _ref.language,
-          language = _ref$language === void 0 ? {} : _ref$language,
-          _ref$languageChoices = _ref.languageChoices,
-          languageChoices = _ref$languageChoices === void 0 ? {} : _ref$languageChoices,
-          _ref$responseAreaInpu = _ref.responseAreaInputConfiguration,
-          responseAreaInputConfiguration = _ref$responseAreaInpu === void 0 ? {} : _ref$responseAreaInpu;
-
-      var _ref2 = model || {},
-          choiceRationaleEnabled = _ref2.choiceRationaleEnabled,
-          choices = _ref2.choices,
-          errors = _ref2.errors,
-          extraCSSRules = _ref2.extraCSSRules,
-          promptEnabled = _ref2.promptEnabled,
-          rationaleEnabled = _ref2.rationaleEnabled,
-          spellCheckEnabled = _ref2.spellCheckEnabled,
-          teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled,
-          toolbarEditorPosition = _ref2.toolbarEditorPosition;
-
-      var _ref3 = errors || {},
-          promptError = _ref3.prompt,
-          rationaleError = _ref3.rationale,
-          responseAreasError = _ref3.responseAreasError,
-          responseAreaChoicesError = _ref3.responseAreaChoicesError,
-          teacherInstructionsError = _ref3.teacherInstructions;
-
-      var defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
-      var defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
-
-      var renderChoiceRationale = function renderChoiceRationale() {
-        return (Object.keys(choices) || []).map(function (key, index) {
-          return /*#__PURE__*/_react["default"].createElement("div", {
-            key: key,
-            className: classes.rationaleChoices
-          }, /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], null, /*#__PURE__*/_react["default"].createElement(_ExpansionPanelSummary["default"], {
-            expandIcon: /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], null)
-          }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            className: classes.text
-          }, "Rationale for response area #".concat(index + 1))), /*#__PURE__*/_react["default"].createElement(_ExpansionPanelDetails["default"], {
-            className: classes.panelDetails
-          }, (choices[key] || []).map(function (choice) {
-            return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
-              key: choice.label
-            }, /*#__PURE__*/_react["default"].createElement("span", {
-              className: classes.rationaleLabel,
-              dangerouslySetInnerHTML: {
-                __html: "".concat(rationale.label, " for ").concat(choice.label, " (").concat(choice.correct ? 'correct' : 'incorrect', ")")
-              }
-            }), /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-              className: classes.choiceRationaleHolder
-            }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-              className: classes.prompt,
-              markup: choice.rationale || '',
+  }
+  componentDidUpdate() {
+    //eslint-disable-next-line
+    const domNode = _reactDom.default.findDOMNode(this);
+    (0, _mathRendering.renderMath)(domNode);
+  }
+  render() {
+    const {
+      warning
+    } = this.state;
+    const {
+      model,
+      configuration,
+      onConfigurationChanged,
+      imageSupport,
+      uploadSoundSupport
+    } = this.props;
+    const {
+      baseInputConfiguration = {},
+      choiceRationale = {},
+      contentDimensions = {},
+      lockChoiceOrder = {},
+      maxResponseAreas,
+      maxImageWidth = {},
+      maxImageHeight = {},
+      partialScoring = {},
+      prompt = {},
+      rationale = {},
+      settingsPanelDisabled,
+      spellCheck = {},
+      teacherInstructions = {},
+      template = {},
+      withRubric = {},
+      mathMlOptions = {},
+      language = {},
+      languageChoices = {},
+      responseAreaInputConfiguration = {}
+    } = configuration || {};
+    const {
+      choiceRationaleEnabled,
+      choices,
+      errors,
+      extraCSSRules,
+      promptEnabled,
+      rationaleEnabled,
+      spellCheckEnabled,
+      teacherInstructionsEnabled,
+      toolbarEditorPosition
+    } = model || {};
+    const {
+      prompt: promptError,
+      rationale: rationaleError,
+      responseAreasError,
+      responseAreaChoicesError,
+      teacherInstructions: teacherInstructionsError
+    } = errors || {};
+    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+    const renderChoiceRationale = () => (Object.keys(choices) || []).map((key, index) => /*#__PURE__*/_react.default.createElement(RationaleChoices, {
+      key: key
+    }, /*#__PURE__*/_react.default.createElement(_Accordion.default, {
+      slotProps: {
+        transition: {
+          timeout: {
+            enter: 225,
+            exit: 195
+          }
+        }
+      }
+    }, /*#__PURE__*/_react.default.createElement(_AccordionSummary.default, {
+      expandIcon: /*#__PURE__*/_react.default.createElement(_ExpandMore.default, null)
+    }, /*#__PURE__*/_react.default.createElement(StyledTypography, {
+      component: 'div'
+    }, `Rationale for response area #${index + 1}`)), /*#__PURE__*/_react.default.createElement(StyledAccordionDetails, null, (choices[key] || []).map(choice => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: choice.label
+    }, /*#__PURE__*/_react.default.createElement(RationaleLabel, {
+      dangerouslySetInnerHTML: {
+        __html: `${rationale.label} for ${choice.label} (${choice.correct ? 'correct' : 'incorrect'})`
+      }
+    }), /*#__PURE__*/_react.default.createElement(ChoiceRationaleHolder, null, /*#__PURE__*/_react.default.createElement(_editableHtml.default, {
+      markup: choice.rationale || '',
+      spellCheck: spellCheckEnabled,
+      onChange: c => this.onChoiceRationaleChanged(key, {
+        ...choice,
+        rationale: c
+      }),
+      imageSupport: imageSupport,
+      maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      mathMlOptions: mathMlOptions
+    }))))))));
+    const toolbarOpts = {
+      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
+    };
+    const validationMessage = (0, _utils.generateValidationMessage)(configuration);
+    const panelSettings = {
+      partialScoring: partialScoring.settings && toggle(partialScoring.label),
+      lockChoiceOrder: lockChoiceOrder.settings && toggle(lockChoiceOrder.label),
+      'language.enabled': language.settings && toggle(language.label, true),
+      language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options)
+    };
+    const panelProperties = {
+      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+      rationaleEnabled: rationale.settings && toggle(rationale.label),
+      choiceRationaleEnabled: choiceRationale.settings && toggle(choiceRationale.label),
+      promptEnabled: prompt.settings && toggle(prompt.label),
+      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+      rubricEnabled: withRubric?.settings && toggle(withRubric?.label)
+    };
+    const getPluginProps = (props = {}) => ({
+      ...baseInputConfiguration,
+      ...props
+    });
+    return /*#__PURE__*/_react.default.createElement(_configUi.layout.ConfigLayout, {
+      extraCSSRules: extraCSSRules,
+      dimensions: contentDimensions,
+      hideSettings: settingsPanelDisabled,
+      settings: /*#__PURE__*/_react.default.createElement(Panel, {
+        model: model,
+        configuration: configuration,
+        onChangeModel: model => this.onModelChange(model),
+        onChangeConfiguration: configuration => onConfigurationChanged(configuration, true),
+        groups: {
+          Settings: panelSettings,
+          Properties: panelProperties
+        }
+      })
+    }, teacherInstructionsEnabled && /*#__PURE__*/_react.default.createElement(PromptHolder, {
+      label: teacherInstructions.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtml.default, {
+      markup: model.teacherInstructions || '',
+      onChange: this.onTeacherInstructionsChanged,
+      imageSupport: imageSupport,
+      nonEmpty: false,
+      error: teacherInstructionsError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(teacherInstructions?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), teacherInstructionsError && /*#__PURE__*/_react.default.createElement(ErrorText, null, teacherInstructionsError)), promptEnabled && /*#__PURE__*/_react.default.createElement(PromptHolder, {
+      label: prompt.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtml.default, {
+      markup: model.prompt,
+      onChange: this.onPromptChanged,
+      imageSupport: imageSupport,
+      nonEmpty: false,
+      disableUnderline: true,
+      error: promptError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(prompt?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: defaultImageMaxWidth,
+      maxImageHeight: defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), promptError && /*#__PURE__*/_react.default.createElement(ErrorText, null, promptError)), /*#__PURE__*/_react.default.createElement(FlexContainer, null, /*#__PURE__*/_react.default.createElement(StyledTypography, {
+      component: 'div'
+    }, "Define Template, Choices, and Correct Responses"), /*#__PURE__*/_react.default.createElement(StyledTooltip, {
+      disableFocusListener: true,
+      disableTouchListener: true,
+      placement: 'right',
+      title: validationMessage
+    }, /*#__PURE__*/_react.default.createElement(_Info.default, {
+      fontSize: 'small',
+      color: 'primary'
+    }))), /*#__PURE__*/_react.default.createElement(_responseArea.default, {
+      responseAreasError: responseAreasError,
+      responseAreaChoicesError: responseAreaChoicesError,
+      editableHtmlProps: {
+        pluginProps: getPluginProps(template?.inputConfiguration),
+        activePlugins: _editableHtml.ALL_PLUGINS,
+        toolbarOpts: {
+          position: 'top'
+        },
+        responseAreaProps: {
+          type: 'inline-dropdown',
+          options: {
+            duplicates: true
+          },
+          maxResponseAreas: maxResponseAreas,
+          respAreaToolbar: (node, value, onToolbarDone) => {
+            const {
+              respAreaChoices
+            } = this.state;
+            return () => /*#__PURE__*/_react.default.createElement(_inlineDropdownToolbar.default, {
+              onAddChoice: this.onAddChoice,
+              onCheck: this.onCheck,
+              onRemoveChoice: index => this.onRemoveChoice(node.data.get('index'), index),
+              onSelectChoice: index => this.onSelectChoice(node.data.get('index'), index),
+              node: node,
+              value: value,
+              onToolbarDone: onToolbarDone,
+              choices: respAreaChoices[node.data.get('index')],
               spellCheck: spellCheckEnabled,
-              onChange: function onChange(c) {
-                return _this2.onChoiceRationaleChanged(key, _objectSpread(_objectSpread({}, choice), {}, {
-                  rationale: c
-                }));
-              },
-              imageSupport: imageSupport,
-              maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
-              maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
               uploadSoundSupport: uploadSoundSupport,
-              mathMlOptions: mathMlOptions
-            })));
-          }))));
-        });
-      };
-
-      var toolbarOpts = {
-        position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
-      };
-      var validationMessage = (0, _utils.generateValidationMessage)(configuration);
-      var panelSettings = {
-        partialScoring: partialScoring.settings && toggle(partialScoring.label),
-        lockChoiceOrder: lockChoiceOrder.settings && toggle(lockChoiceOrder.label),
-        'language.enabled': language.settings && toggle(language.label, true),
-        language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options)
-      };
-      var panelProperties = {
-        teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
-        rationaleEnabled: rationale.settings && toggle(rationale.label),
-        choiceRationaleEnabled: choiceRationale.settings && toggle(choiceRationale.label),
-        promptEnabled: prompt.settings && toggle(prompt.label),
-        spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
-        rubricEnabled: (withRubric === null || withRubric === void 0 ? void 0 : withRubric.settings) && toggle(withRubric === null || withRubric === void 0 ? void 0 : withRubric.label)
-      };
-
-      var getPluginProps = function getPluginProps() {
-        var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-        return _objectSpread(_objectSpread({}, baseInputConfiguration), props);
-      };
-
-      return /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
-        extraCSSRules: extraCSSRules,
-        dimensions: contentDimensions,
-        hideSettings: settingsPanelDisabled,
-        settings: /*#__PURE__*/_react["default"].createElement(Panel, {
-          model: model,
-          configuration: configuration,
-          onChangeModel: function onChangeModel(model) {
-            return _this2.onModelChange(model);
-          },
-          onChangeConfiguration: function onChangeConfiguration(configuration) {
-            return onConfigurationChanged(configuration, true);
-          },
-          groups: {
-            Settings: panelSettings,
-            Properties: panelProperties
+              mathMlOptions: mathMlOptions,
+              baseInputConfiguration: baseInputConfiguration,
+              responseAreaInputConfiguration: responseAreaInputConfiguration
+            });
           }
-        })
-      }, teacherInstructionsEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-        label: teacherInstructions.label,
-        className: classes.promptHolder
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        className: classes.prompt,
-        markup: model.teacherInstructions || '',
-        onChange: this.onTeacherInstructionsChanged,
-        imageSupport: imageSupport,
-        nonEmpty: false,
-        error: teacherInstructionsError,
-        toolbarOpts: toolbarOpts,
-        pluginProps: getPluginProps(teacherInstructions === null || teacherInstructions === void 0 ? void 0 : teacherInstructions.inputConfiguration),
-        spellCheck: spellCheckEnabled,
-        maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
-        maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight,
-        uploadSoundSupport: uploadSoundSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
-        mathMlOptions: mathMlOptions
-      }), teacherInstructionsError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, teacherInstructionsError)), promptEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-        label: prompt.label,
-        className: classes.promptHolder
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        className: classes.prompt,
-        markup: model.prompt,
-        onChange: this.onPromptChanged,
-        imageSupport: imageSupport,
-        nonEmpty: false,
-        disableUnderline: true,
-        error: promptError,
-        toolbarOpts: toolbarOpts,
-        pluginProps: getPluginProps(prompt === null || prompt === void 0 ? void 0 : prompt.inputConfiguration),
-        spellCheck: spellCheckEnabled,
-        maxImageWidth: defaultImageMaxWidth,
-        maxImageHeight: defaultImageMaxHeight,
-        uploadSoundSupport: uploadSoundSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
-        mathMlOptions: mathMlOptions
-      }), promptError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, promptError)), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.flexContainer
-      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-        className: classes.text,
-        component: 'div'
-      }, "Define Template, Choices, and Correct Responses"), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-        classes: {
-          tooltip: classes.tooltip
         },
-        disableFocusListener: true,
-        disableTouchListener: true,
-        placement: 'right',
-        title: validationMessage
-      }, /*#__PURE__*/_react["default"].createElement(_Info["default"], {
-        fontSize: 'small',
-        color: 'primary'
-      }))), /*#__PURE__*/_react["default"].createElement(_responseArea["default"], {
-        responseAreasError: responseAreasError,
-        responseAreaChoicesError: responseAreaChoicesError,
-        editableHtmlProps: {
-          pluginProps: getPluginProps(template === null || template === void 0 ? void 0 : template.inputConfiguration),
-          activePlugins: _editableHtml.ALL_PLUGINS,
-          toolbarOpts: {
-            position: 'top'
-          },
-          responseAreaProps: {
-            type: 'inline-dropdown',
-            options: {
-              duplicates: true
-            },
-            maxResponseAreas: maxResponseAreas,
-            respAreaToolbar: function respAreaToolbar(node, value, onToolbarDone) {
-              var respAreaChoices = _this2.state.respAreaChoices;
-              return function () {
-                return /*#__PURE__*/_react["default"].createElement(_inlineDropdownToolbar["default"], {
-                  onAddChoice: _this2.onAddChoice,
-                  onCheck: _this2.onCheck,
-                  onRemoveChoice: function onRemoveChoice(index) {
-                    return _this2.onRemoveChoice(node.data.get('index'), index);
-                  },
-                  onSelectChoice: function onSelectChoice(index) {
-                    return _this2.onSelectChoice(node.data.get('index'), index);
-                  },
-                  node: node,
-                  value: value,
-                  onToolbarDone: onToolbarDone,
-                  choices: respAreaChoices[node.data.get('index')],
-                  spellCheck: spellCheckEnabled,
-                  uploadSoundSupport: uploadSoundSupport,
-                  mathMlOptions: mathMlOptions,
-                  baseInputConfiguration: baseInputConfiguration,
-                  responseAreaInputConfiguration: responseAreaInputConfiguration
-                });
-              };
-            }
-          },
-          spellCheck: spellCheckEnabled,
-          className: classes.markup,
-          markup: model.slateMarkup || '',
-          onChange: this.onChange,
-          imageSupport: imageSupport,
-          disableImageAlignmentButtons: true,
-          disabled: false,
-          highlightShape: false,
-          error: responseAreasError,
-          uploadSoundSupport: uploadSoundSupport,
-          languageCharactersProps: [{
-            language: 'spanish'
-          }, {
-            language: 'special'
-          }],
-          mathMlOptions: mathMlOptions
-        }
-      }), choiceRationaleEnabled && renderChoiceRationale(), rationaleEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-        label: rationale.label,
-        className: classes.promptHolder
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        className: classes.prompt,
-        markup: model.rationale || '',
-        onChange: this.onRationaleChanged,
-        imageSupport: imageSupport,
-        error: rationaleError,
-        toolbarOpts: toolbarOpts,
-        pluginProps: getPluginProps(rationale === null || rationale === void 0 ? void 0 : rationale.inputConfiguration),
         spellCheck: spellCheckEnabled,
-        maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
-        maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
+        markup: model.slateMarkup || '',
+        onChange: this.onChange,
+        imageSupport: imageSupport,
+        disableImageAlignmentButtons: true,
+        disabled: false,
+        highlightShape: false,
+        error: responseAreasError,
         uploadSoundSupport: uploadSoundSupport,
         languageCharactersProps: [{
           language: 'spanish'
@@ -716,38 +561,53 @@ var Main = /*#__PURE__*/function (_React$Component) {
           language: 'special'
         }],
         mathMlOptions: mathMlOptions
-      }), rationaleError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, rationaleError)), /*#__PURE__*/_react["default"].createElement(_configUi.AlertDialog, {
-        open: warning.open,
-        title: "Warning",
-        text: warning.text,
-        onClose: warning.onClose,
-        onConfirm: warning.onConfirm
-      }));
-    }
-  }]);
-  return Main;
-}(_react["default"].Component);
-
+      }
+    }), choiceRationaleEnabled && renderChoiceRationale(), rationaleEnabled && /*#__PURE__*/_react.default.createElement(PromptHolder, {
+      label: rationale.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtml.default, {
+      markup: model.rationale || '',
+      onChange: this.onRationaleChanged,
+      imageSupport: imageSupport,
+      error: rationaleError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(rationale?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), rationaleError && /*#__PURE__*/_react.default.createElement(ErrorText, null, rationaleError)), /*#__PURE__*/_react.default.createElement(_configUi.AlertDialog, {
+      open: warning.open,
+      title: "Warning",
+      text: warning.text,
+      onClose: warning.onClose,
+      onConfirm: warning.onConfirm,
+      disableAutoFocus: true,
+      disableEnforceFocus: true,
+      disableRestoreFocus: true
+    }));
+  }
+}
 exports.Main = Main;
-(0, _defineProperty2["default"])(Main, "propTypes", {
-  configuration: _propTypes["default"].object.isRequired,
-  model: _propTypes["default"].object.isRequired,
-  disableSidePanel: _propTypes["default"].bool,
-  onModelChanged: _propTypes["default"].func.isRequired,
-  onConfigurationChanged: _propTypes["default"].func.isRequired,
-  classes: _propTypes["default"].object.isRequired,
-  imageSupport: _propTypes["default"].shape({
-    add: _propTypes["default"].func.isRequired,
-    "delete": _propTypes["default"].func.isRequired
+(0, _defineProperty2.default)(Main, "propTypes", {
+  configuration: _propTypes.default.object.isRequired,
+  model: _propTypes.default.object.isRequired,
+  disableSidePanel: _propTypes.default.bool,
+  onModelChanged: _propTypes.default.func.isRequired,
+  onConfigurationChanged: _propTypes.default.func.isRequired,
+  imageSupport: _propTypes.default.shape({
+    add: _propTypes.default.func.isRequired,
+    delete: _propTypes.default.func.isRequired
   }),
-  uploadSoundSupport: _propTypes["default"].shape({
-    add: _propTypes["default"].func.isRequired,
-    "delete": _propTypes["default"].func.isRequired
+  uploadSoundSupport: _propTypes.default.shape({
+    add: _propTypes.default.func.isRequired,
+    delete: _propTypes.default.func.isRequired
   })
 });
-var Styled = (0, _styles.withStyles)(styles)(Main);
-var _default = Styled;
-exports["default"] = _default;
+var _default = exports.default = Main;
 //# sourceMappingURL=main.js.map