@pie-element/categorize 11.3.4-next.0 → 12.0.0-beta.0

package/configure/lib/design/index.js

@@ -1,545 +1,700 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Design = 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"));
-
+exports.default = exports.Design = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _utils = require("./utils");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styles = require("@material-ui/core/styles");
-
+var _styles = require("@mui/material/styles");
+var _core = require("@dnd-kit/core");
 var _configUi = require("@pie-lib/config-ui");
-
 var _categorize = require("@pie-lib/categorize");
-
 var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
-
 var _drag = require("@pie-lib/drag");
-
+var _mathRendering = require("@pie-lib/math-rendering");
 var _categories = _interopRequireDefault(require("./categories"));
-
 var _alternateResponses = _interopRequireDefault(require("./categories/alternateResponses"));
-
 var _choices = _interopRequireDefault(require("./choices"));
-
+var _choice = _interopRequireDefault(require("./choices/choice"));
+var _choicePreview = _interopRequireDefault(require("./categories/choice-preview"));
 var _builder = require("./builder");
-
 var _header = _interopRequireDefault(require("./header"));
-
 var _utils2 = require("../utils");
-
 var _translator = _interopRequireDefault(require("@pie-lib/translator"));
+const {
+  translator
+} = _translator.default;
+const {
+  dropdown,
+  Panel,
+  toggle,
+  radio,
+  numberField
+} = _configUi.settings;
+const {
+  Provider: IdProvider
+} = _drag.uid;
+
+// Simple wrapper to render math in DragOverlay portal
+class DragPreviewWrapper extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "containerRef", /*#__PURE__*/_react.default.createRef());
+  }
+  componentDidMount() {
+    if (this.containerRef.current) {
+      setTimeout(() => (0, _mathRendering.renderMath)(this.containerRef.current), 0);
+    }
+  }
+  render() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: this.containerRef
+    }, this.props.children);
+  }
+}
+const StyledHeader = (0, _styles.styled)(_header.default)(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2)
+}));
+const StyledInputContainer = (0, _styles.styled)(_configUi.InputContainer)(({
+  theme
+}) => ({
+  width: '100%',
+  paddingTop: theme.spacing(2),
+  marginBottom: theme.spacing(2)
+}));
+const ErrorText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1)
+}));
+class Design extends _react.default.Component {
+  constructor(_props) {
+    super(_props);
+    (0, _defineProperty2.default)(this, "updateModel", props => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      const updatedModel = {
+        ...model,
+        ...props
+      };
+      updatedModel.choices = updatedModel.choices.map(c => ({
+        ...c,
+        categoryCount: this.checkAllowMultiplePlacements(updatedModel.allowMultiplePlacementsEnabled, c)
+      }));
 
-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 translator = _translator["default"].translator;
-var dropdown = _configUi.settings.dropdown,
-    Panel = _configUi.settings.Panel,
-    toggle = _configUi.settings.toggle,
-    radio = _configUi.settings.radio,
-    numberField = _configUi.settings.numberField;
-var IdProvider = _drag.uid.Provider;
-
-var Design = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Design, _React$Component);
-
-  var _super = _createSuper(Design);
-
-  function Design(_props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Design);
-    _this = _super.call(this, _props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "updateModel", function (props) {
-      var _this$props = _this.props,
-          model = _this$props.model,
-          onChange = _this$props.onChange;
-
-      var updatedModel = _objectSpread(_objectSpread({}, model), props);
-
-      updatedModel.choices = updatedModel.choices.map(function (c) {
-        return _objectSpread(_objectSpread({}, c), {}, {
-          categoryCount: _this.checkAllowMultiplePlacements(updatedModel.allowMultiplePlacementsEnabled, c)
-        });
-      }); //Ensure that there are no extra choices in correctResponse, if the user has decided that only one choice may be used.
-
-      updatedModel.correctResponse = (0, _categorize.ensureNoExtraChoicesInAnswer)(updatedModel.correctResponse || [], updatedModel.choices); //Ensure that there are no extra choices in alternate responses, if the user has decided that only one choice may be used.
+      //Ensure that there are no extra choices in correctResponse, if the user has decided that only one choice may be used.
+      updatedModel.correctResponse = (0, _categorize.ensureNoExtraChoicesInAnswer)(updatedModel.correctResponse || [], updatedModel.choices);
 
-      updatedModel.correctResponse = (0, _categorize.ensureNoExtraChoicesInAlternate)(updatedModel.correctResponse || [], updatedModel.choices); //clean categories
+      //Ensure that there are no extra choices in alternate responses, if the user has decided that only one choice may be used.
+      updatedModel.correctResponse = (0, _categorize.ensureNoExtraChoicesInAlternate)(updatedModel.correctResponse || [], updatedModel.choices);
 
-      updatedModel.categories = updatedModel.categories.map(function (c) {
-        return {
-          id: c.id,
-          label: c.label
-        };
-      });
-      updatedModel.choices = updatedModel.choices.map(function (h) {
-        return {
-          id: h.id,
-          content: h.content,
-          categoryCount: h.categoryCount
-        };
-      }); // ensure that maxChoicesPerCategory is reset if author switch back the corresponding switch (allowMaxChoicesPerCategory)
+      //clean categories
+      updatedModel.categories = updatedModel.categories.map(c => ({
+        id: c.id,
+        label: c.label
+      }));
+      updatedModel.choices = updatedModel.choices.map(h => ({
+        id: h.id,
+        content: h.content,
+        categoryCount: h.categoryCount
+      }));
 
+      // ensure that maxChoicesPerCategory is reset if author switch back the corresponding switch (allowMaxChoicesPerCategory)
       updatedModel.maxChoicesPerCategory = updatedModel.allowMaxChoicesPerCategory ? updatedModel.maxChoicesPerCategory : 0;
       onChange(updatedModel);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeRationale", function (rationale) {
-      var _this$props2 = _this.props,
-          model = _this$props2.model,
-          onChange = _this$props2.onChange;
-      onChange(_objectSpread(_objectSpread({}, model), {}, {
-        rationale: rationale
-      }));
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeTeacherInstructions", function (teacherInstructions) {
-      var _this$props3 = _this.props,
-          model = _this$props3.model,
-          onChange = _this$props3.onChange;
-      onChange(_objectSpread(_objectSpread({}, model), {}, {
-        teacherInstructions: teacherInstructions
-      }));
+    (0, _defineProperty2.default)(this, "changeRationale", rationale => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      onChange({
+        ...model,
+        rationale
+      });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeFeedback", function (feedback) {
-      _this.updateModel({
-        feedback: feedback
+    (0, _defineProperty2.default)(this, "changeTeacherInstructions", teacherInstructions => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      onChange({
+        ...model,
+        teacherInstructions
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onAddAlternateResponse", function () {
-      var correctResponse = _this.props.model.correctResponse;
-
-      _this.updateModel({
-        correctResponse: (correctResponse || []).map(function (cr) {
-          return _objectSpread(_objectSpread({}, cr), {}, {
-            alternateResponses: [].concat((0, _toConsumableArray2["default"])(cr.alternateResponses || []), [[]])
-          });
-        })
+    (0, _defineProperty2.default)(this, "changeFeedback", feedback => {
+      this.updateModel({
+        feedback
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onPromptChanged", function (prompt) {
-      return _this.updateModel({
-        prompt: prompt
+    (0, _defineProperty2.default)(this, "onAddAlternateResponse", () => {
+      const {
+        model: {
+          correctResponse
+        }
+      } = this.props;
+      this.updateModel({
+        correctResponse: (correctResponse || []).map(cr => ({
+          ...cr,
+          alternateResponses: [...(cr.alternateResponses || []), []]
+        }))
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onRemoveAlternateResponse", function (index) {
-      var correctResponse = _this.props.model.correctResponse;
-
-      _this.updateModel({
-        correctResponse: (correctResponse || []).map(function (cr) {
-          return _objectSpread(_objectSpread({}, cr), {}, {
-            alternateResponses: (cr.alternateResponses || []).filter(function (alt, altIndex) {
-              return altIndex !== index;
-            })
-          });
-        })
+    (0, _defineProperty2.default)(this, "onPromptChanged", prompt => this.updateModel({
+      prompt
+    }));
+    (0, _defineProperty2.default)(this, "onRemoveAlternateResponse", index => {
+      const {
+        model: {
+          correctResponse
+        }
+      } = this.props;
+      this.updateModel({
+        correctResponse: (correctResponse || []).map(cr => ({
+          ...cr,
+          alternateResponses: (cr.alternateResponses || []).filter((alt, altIndex) => altIndex !== index)
+        }))
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "countChoiceInCorrectResponse", function (choice) {
-      var model = _this.props.model;
+    (0, _defineProperty2.default)(this, "countChoiceInCorrectResponse", choice => {
+      const {
+        model
+      } = this.props;
       return (0, _categorize.countInAnswer)(choice.id, model.correctResponse);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "checkAllowMultiplePlacements", function (allowMultiplePlacements, c) {
+    (0, _defineProperty2.default)(this, "checkAllowMultiplePlacements", (allowMultiplePlacements, c) => {
       if (allowMultiplePlacements === _utils2.multiplePlacements.enabled) {
         return 0;
       }
-
       if (allowMultiplePlacements === _utils2.multiplePlacements.disabled) {
         return 1;
       }
-
       return c.categoryCount || 0;
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "isAlertModalOpened", function () {
-      var model = _this.props.model;
-
-      var _ref = model || {},
-          _ref$maxChoicesPerCat = _ref.maxChoicesPerCategory,
-          maxChoicesPerCategory = _ref$maxChoicesPerCat === void 0 ? 0 : _ref$maxChoicesPerCat;
-
-      var maxChoices = (0, _utils2.getMaxCategoryChoices)(model); // when maxChoicesPerCategory is set to 0, there is no limit so modal should not be opened
-
+    (0, _defineProperty2.default)(this, "isAlertModalOpened", () => {
+      const {
+        model
+      } = this.props;
+      const {
+        maxChoicesPerCategory = 0
+      } = model || {};
+      const maxChoices = (0, _utils2.getMaxCategoryChoices)(model);
+      // when maxChoicesPerCategory is set to 0, there is no limit so modal should not be opened
       return maxChoicesPerCategory !== 0 ? maxChoices > maxChoicesPerCategory : false;
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onAlertModalCancel", function () {
-      var model = _this.props.model;
-      var maxChoices = (0, _utils2.getMaxCategoryChoices)(model);
-
-      _this.updateModel({
+    (0, _defineProperty2.default)(this, "onAlertModalCancel", () => {
+      const {
+        model
+      } = this.props;
+      const maxChoices = (0, _utils2.getMaxCategoryChoices)(model);
+      this.updateModel({
         maxChoicesPerCategory: maxChoices
       });
     });
-    _this.uid = _props.uid || _drag.uid.generateId();
-    return _this;
-  }
-
-  (0, _createClass2["default"])(Design, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props4 = this.props,
-          classes = _this$props4.classes,
-          configuration = _this$props4.configuration,
-          imageSupport = _this$props4.imageSupport,
-          model = _this$props4.model,
-          uploadSoundSupport = _this$props4.uploadSoundSupport,
-          onConfigurationChanged = _this$props4.onConfigurationChanged;
-
-      var _ref2 = configuration || {},
-          _ref2$allowAlternate = _ref2.allowAlternate,
-          allowAlternate = _ref2$allowAlternate === void 0 ? {} : _ref2$allowAlternate,
-          _ref2$allowMultiplePl = _ref2.allowMultiplePlacements,
-          allowMultiplePlacements = _ref2$allowMultiplePl === void 0 ? {} : _ref2$allowMultiplePl,
-          _ref2$baseInputConfig = _ref2.baseInputConfiguration,
-          baseInputConfiguration = _ref2$baseInputConfig === void 0 ? {} : _ref2$baseInputConfig,
-          _ref2$categoriesPerRo = _ref2.categoriesPerRow,
-          categoriesPerRow = _ref2$categoriesPerRo === void 0 ? {} : _ref2$categoriesPerRo,
-          _ref2$choicesPosition = _ref2.choicesPosition,
-          choicesPosition = _ref2$choicesPosition === void 0 ? {} : _ref2$choicesPosition,
-          _ref2$contentDimensio = _ref2.contentDimensions,
-          contentDimensions = _ref2$contentDimensio === void 0 ? {} : _ref2$contentDimensio,
-          _ref2$feedback = _ref2.feedback,
-          feedback = _ref2$feedback === void 0 ? {} : _ref2$feedback,
-          _ref2$lockChoiceOrder = _ref2.lockChoiceOrder,
-          lockChoiceOrder = _ref2$lockChoiceOrder === void 0 ? {} : _ref2$lockChoiceOrder,
-          _ref2$maxImageHeight = _ref2.maxImageHeight,
-          maxImageHeight = _ref2$maxImageHeight === void 0 ? {} : _ref2$maxImageHeight,
-          _ref2$maxImageWidth = _ref2.maxImageWidth,
-          maxImageWidth = _ref2$maxImageWidth === void 0 ? {} : _ref2$maxImageWidth,
-          _ref2$maxPlacements = _ref2.maxPlacements,
-          maxPlacements = _ref2$maxPlacements === void 0 ? {} : _ref2$maxPlacements,
-          _ref2$minCategoriesPe = _ref2.minCategoriesPerRow,
-          minCategoriesPerRow = _ref2$minCategoriesPe === void 0 ? 1 : _ref2$minCategoriesPe,
-          _ref2$partialScoring = _ref2.partialScoring,
-          partialScoring = _ref2$partialScoring === void 0 ? {} : _ref2$partialScoring,
-          _ref2$prompt = _ref2.prompt,
-          prompt = _ref2$prompt === void 0 ? {} : _ref2$prompt,
-          _ref2$rationale = _ref2.rationale,
-          rationale = _ref2$rationale === void 0 ? {} : _ref2$rationale,
-          _ref2$scoringType = _ref2.scoringType,
-          scoringType = _ref2$scoringType === void 0 ? {} : _ref2$scoringType,
-          settingsPanelDisabled = _ref2.settingsPanelDisabled,
-          _ref2$spellCheck = _ref2.spellCheck,
-          spellCheck = _ref2$spellCheck === void 0 ? {} : _ref2$spellCheck,
-          _ref2$studentInstruct = _ref2.studentInstructions,
-          studentInstructions = _ref2$studentInstruct === void 0 ? {} : _ref2$studentInstruct,
-          _ref2$teacherInstruct = _ref2.teacherInstructions,
-          teacherInstructions = _ref2$teacherInstruct === void 0 ? {} : _ref2$teacherInstruct,
-          _ref2$withRubric = _ref2.withRubric,
-          withRubric = _ref2$withRubric === void 0 ? {} : _ref2$withRubric,
-          _ref2$mathMlOptions = _ref2.mathMlOptions,
-          mathMlOptions = _ref2$mathMlOptions === void 0 ? {} : _ref2$mathMlOptions,
-          _ref2$language = _ref2.language,
-          language = _ref2$language === void 0 ? {} : _ref2$language,
-          _ref2$languageChoices = _ref2.languageChoices,
-          languageChoices = _ref2$languageChoices === void 0 ? {} : _ref2$languageChoices,
-          _ref2$allowMaxAnswerC = _ref2.allowMaxAnswerChoices,
-          allowMaxAnswerChoices = _ref2$allowMaxAnswerC === void 0 ? {} : _ref2$allowMaxAnswerC;
-
-      var _ref3 = model || {},
-          allowAlternateEnabled = _ref3.allowAlternateEnabled,
-          allowMaxChoicesPerCategory = _ref3.allowMaxChoicesPerCategory,
-          errors = _ref3.errors,
-          feedbackEnabled = _ref3.feedbackEnabled,
-          maxChoicesPerCategory = _ref3.maxChoicesPerCategory,
-          promptEnabled = _ref3.promptEnabled,
-          rationaleEnabled = _ref3.rationaleEnabled,
-          spellCheckEnabled = _ref3.spellCheckEnabled,
-          teacherInstructionsEnabled = _ref3.teacherInstructionsEnabled,
-          toolbarEditorPosition = _ref3.toolbarEditorPosition,
-          extraCSSRules = _ref3.extraCSSRules;
+    (0, _defineProperty2.default)(this, "onDragStart", event => {
+      const {
+        active
+      } = event;
+      const draggedItem = active.data.current;
+      this.setState({
+        activeDragItem: draggedItem
+      });
+    });
+    (0, _defineProperty2.default)(this, "onDragEnd", event => {
+      const {
+        active,
+        over
+      } = event;
+      this.setState({
+        activeDragItem: null
+      });
+      if (!over || !active) {
+        return;
+      }
+      const {
+        model
+      } = this.props;
+      const {
+        allowAlternateEnabled
+      } = model;
+      const activeData = active.data.current;
+      const overData = over.data.current;
+
+      // moving a choice between categories (correct response)
+      if (activeData.type === 'choice-preview' && overData.type === 'category') {
+        // Extract original choice.id - if DraggableChoice uses the unique id in data, extract the first part
+        // Format: ${choice.id}-${categoryId}-${choiceIndex} or ${choice.id}-${categoryId}-${choiceIndex}-alt-${alternateResponseIndex}
+        const choiceId = activeData.choice?.id || (typeof activeData.id === 'string' ? activeData.id.split('-')[0] : activeData.id);
+        this.moveChoice(choiceId, activeData.categoryId, overData.id, activeData.choiceIndex || 0);
+      }
 
-      var _ref4 = errors || {},
-          promptError = _ref4.prompt,
-          rationaleError = _ref4.rationale,
-          teacherInstructionsError = _ref4.teacherInstructions;
+      // placing a choice into a category (correct response)
+      if (activeData.type === 'choice' && overData.type === 'category') {
+        this.addChoiceToCategory({
+          id: activeData.id
+        }, overData.id);
+      }
 
-      var toolbarOpts = {
-        position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
-      };
-      var config = model.config || {};
-      config.choices = config.choices || {
-        label: '',
-        columns: 2
-      };
-      var categories = (0, _builder.buildCategories)(model.categories || [], model.choices || [], model.correctResponse || []);
-      var alternateResponses = (0, _builder.buildAlternateResponses)(model.categories || [], model.choices || [], model.correctResponse || []);
-      var choices = model.choices.map(function (c) {
-        c.correctResponseCount = _this2.countChoiceInCorrectResponse(c); // ensure categoryCount is set even though updatedModel hasn't been called
+      // moving a choice between categories (alternate response)
+      if (activeData.type === 'choice-preview' && overData.type === 'category-alternate') {
+        const toAlternateIndex = overData.alternateResponseIndex;
+        // Extract original choice.id - if DraggableChoice uses the unique id in data, extract the first part
+        const choiceId = activeData.choice?.id || (typeof activeData.id === 'string' ? activeData.id.split('-')[0] : activeData.id);
+        this.moveChoiceInAlternate(choiceId, activeData.categoryId, overData.id, activeData.choiceIndex || 0, toAlternateIndex);
+      }
 
-        c.categoryCount = _this2.checkAllowMultiplePlacements(model.allowMultiplePlacementsEnabled, c);
-        return c;
+      // placing a choice into a category (alternate response)
+      if (allowAlternateEnabled && activeData.type === 'choice' && overData.type === 'category-alternate') {
+        const choiceId = activeData.id;
+        const categoryId = overData.id;
+        const toAlternateResponseIndex = overData.alternateResponseIndex;
+        this.addChoiceToAlternateCategory({
+          id: choiceId
+        }, categoryId, toAlternateResponseIndex);
+      }
+    });
+    (0, _defineProperty2.default)(this, "addChoiceToCategory", (addedChoice, categoryId) => {
+      const {
+        model
+      } = this.props;
+      let {
+        choices = [],
+        correctResponse = [],
+        maxChoicesPerCategory = 0
+      } = model || {};
+      const choice = (choices || []).find(choice => choice.id === addedChoice.id);
+      let newCorrectResponse = (0, _categorize.moveChoiceToCategory)(addedChoice.id, undefined, categoryId, 0, correctResponse);
+      if (choice.categoryCount !== 0) {
+        newCorrectResponse = (0, _categorize.verifyAllowMultiplePlacements)(addedChoice, categoryId, newCorrectResponse);
+      }
+      const maxCategoryChoices = (0, _utils2.getMaxCategoryChoices)(model);
+      this.updateModel({
+        correctResponse: newCorrectResponse,
+        maxChoicesPerCategory: maxChoicesPerCategory !== 0 && maxChoicesPerCategory < maxCategoryChoices ? maxChoicesPerCategory + 1 : maxChoicesPerCategory
       });
-      var defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
-      var defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
-      var panelSettings = {
-        partialScoring: partialScoring.settings && toggle(partialScoring.label),
-        lockChoiceOrder: lockChoiceOrder.settings && toggle(lockChoiceOrder.label),
-        categoriesPerRow: categoriesPerRow.settings && numberField(categoriesPerRow.label, {
-          label: categoriesPerRow.label,
-          min: minCategoriesPerRow,
-          max: 6
-        }),
-        choicesPosition: choicesPosition.settings && radio(choicesPosition.label, ['below', 'above', 'left', 'right']),
-        allowMultiplePlacementsEnabled: allowMultiplePlacements.settings && dropdown(allowMultiplePlacements.label, [_utils2.multiplePlacements.enabled, _utils2.multiplePlacements.disabled, _utils2.multiplePlacements.perChoice]),
-        maxAnswerChoices: allowMaxAnswerChoices.settings && numberField(allowMaxAnswerChoices.label, {
-          label: '',
-          min: (choices === null || choices === void 0 ? void 0 : choices.length) || 0,
-          max: 30
-        }),
-        allowMaxChoicesPerCategory: maxPlacements.settings && toggle(maxPlacements.label),
-        maxChoicesPerCategory: allowMaxChoicesPerCategory === true && numberField(maxPlacements.label, {
-          label: '',
-          min: 0,
-          max: 30
-        }),
-        promptEnabled: prompt.settings && toggle(prompt.label),
-        feedbackEnabled: feedback.settings && toggle(feedback.label),
-        allowAlternateEnabled: allowAlternate.settings && toggle(allowAlternate.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),
-        studentInstructionsEnabled: studentInstructions.settings && toggle(studentInstructions.label),
-        rationaleEnabled: rationale.settings && toggle(rationale.label),
-        spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
-        scoringType: scoringType.settings && radio(scoringType.label, ['auto', 'rubric']),
-        rubricEnabled: (withRubric === null || withRubric === void 0 ? void 0 : withRubric.settings) && toggle(withRubric === null || withRubric === void 0 ? void 0 : withRubric.label)
-      };
-      var isOpened = this.isAlertModalOpened();
-      var alertMaxChoicesMsg = translator.t('translation:categorize:maxChoicesPerCategoryRestriction', {
-        lng: model.language,
-        maxChoicesPerCategory: maxChoicesPerCategory
+    });
+    (0, _defineProperty2.default)(this, "deleteChoiceFromCategory", (category, choice, choiceIndex) => {
+      const {
+        model
+      } = this.props;
+      const correctResponse = (0, _categorize.removeChoiceFromCategory)(choice.id, category.id, choiceIndex, model.correctResponse);
+      this.updateModel({
+        correctResponse
       });
-      return /*#__PURE__*/_react["default"].createElement(IdProvider, {
-        value: this.uid
-      }, /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
-        extraCSSRules: extraCSSRules,
-        dimensions: contentDimensions,
-        hideSettings: settingsPanelDisabled,
-        settings: /*#__PURE__*/_react["default"].createElement(Panel, {
-          model: model,
-          onChangeModel: this.updateModel,
-          configuration: configuration,
-          onChangeConfiguration: onConfigurationChanged,
-          groups: {
-            Settings: panelSettings,
-            Properties: panelProperties
-          },
-          modal: /*#__PURE__*/_react["default"].createElement(_configUi.AlertDialog, {
-            title: 'Warning',
-            text: alertMaxChoicesMsg,
-            open: isOpened,
-            onClose: this.onAlertModalCancel
-          })
-        })
-      }, teacherInstructionsEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-        label: teacherInstructions.label,
-        className: classes.inputContainer
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        className: classes.input,
-        markup: model.teacherInstructions || '',
-        onChange: this.changeTeacherInstructions,
-        imageSupport: imageSupport,
-        error: teacherInstructionsError,
-        nonEmpty: false,
-        toolbarOpts: toolbarOpts,
-        pluginProps: (0, _utils.getPluginProps)(teacherInstructions === null || teacherInstructions === void 0 ? void 0 : teacherInstructions.inputConfiguration, baseInputConfiguration),
-        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.inputContainer
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        className: classes.input,
-        markup: model.prompt || '',
-        onChange: this.onPromptChanged,
-        imageSupport: imageSupport,
-        error: promptError,
-        nonEmpty: false,
-        disableUnderline: true,
-        toolbarOpts: toolbarOpts,
-        pluginProps: (0, _utils.getPluginProps)(prompt === null || prompt === void 0 ? void 0 : prompt.inputConfiguration, baseInputConfiguration),
-        spellCheck: spellCheckEnabled,
-        maxImageWidth: maxImageWidth && maxImageWidth.prompt,
-        maxImageHeight: maxImageHeight && maxImageHeight.prompt,
-        uploadSoundSupport: uploadSoundSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
-        mathMlOptions: mathMlOptions
-      }), promptError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, promptError)), /*#__PURE__*/_react["default"].createElement(_categories["default"], {
-        imageSupport: imageSupport,
-        uploadSoundSupport: uploadSoundSupport,
+    });
+    (0, _defineProperty2.default)(this, "moveChoice", (choiceId, from, to, choiceIndex) => {
+      const {
+        model
+      } = this.props;
+      let {
+        choices,
+        correctResponse = [],
+        maxChoicesPerCategory = 0
+      } = model || {};
+      const choice = (choices || []).find(choice => choice.id === choiceId);
+      if (to === from || !choice) {
+        return;
+      }
+      if (choice.categoryCount !== 0) {
+        correctResponse = (0, _categorize.moveChoiceToCategory)(choice.id, from, to, choiceIndex, correctResponse);
+        correctResponse = (0, _categorize.verifyAllowMultiplePlacements)(choice, to, correctResponse);
+      } else if (choice.categoryCount === 0) {
+        correctResponse = (0, _categorize.moveChoiceToCategory)(choice.id, undefined, to, 0, correctResponse);
+      }
+      const maxCategoryChoices = (0, _utils2.getMaxCategoryChoices)(model);
+      // when maxChoicesPerCategory is set to 0, there is no limit so it should not be updated
+      this.updateModel({
+        correctResponse,
+        maxChoicesPerCategory: maxChoicesPerCategory !== 0 && maxChoicesPerCategory < maxCategoryChoices ? maxChoicesPerCategory + 1 : maxChoicesPerCategory
+      });
+    });
+    // methods for alternate responses
+    (0, _defineProperty2.default)(this, "addChoiceToAlternateCategory", (addedChoice, categoryId, altIndex) => {
+      const {
+        model
+      } = this.props;
+      const {
+        correctResponse,
+        choices,
+        maxChoicesPerCategory = 0
+      } = model;
+      const choice = choices.find(c => c.id === addedChoice.id);
+      correctResponse.forEach(a => {
+        if (a.category === categoryId) {
+          a.alternateResponses = a.alternateResponses || [];
+          if (a.alternateResponses[altIndex] === undefined) {
+            a.alternateResponses[altIndex] = [];
+          }
+          a.alternateResponses[altIndex].push(addedChoice.id);
+          if (choice.categoryCount && choice.categoryCount !== 0) {
+            a.alternateResponses[altIndex] = a.alternateResponses[altIndex].reduce((acc, currentValue) => {
+              if (currentValue === choice.id) {
+                const foundIndex = acc.findIndex(c => c === choice.id);
+                if (foundIndex === -1) {
+                  acc.push(currentValue);
+                }
+              } else {
+                acc.push(currentValue);
+              }
+              return acc;
+            }, []);
+          }
+          return a;
+        } else {
+          if (a.alternateResponses[altIndex] && choice.categoryCount !== 0) {
+            a.alternateResponses[altIndex] = a.alternateResponses[altIndex].filter(c => c !== addedChoice.id);
+            return a;
+          }
+        }
+        return a;
+      });
+      const maxCategoryChoices = (0, _utils2.getMaxCategoryChoices)(model);
+      // when maxChoicesPerCategory is set to 0, there is no limit so it should not be updated
+      this.updateModel({
+        correctResponse,
+        maxChoicesPerCategory: maxChoicesPerCategory !== 0 && maxChoicesPerCategory < maxCategoryChoices ? maxChoicesPerCategory + 1 : maxChoicesPerCategory
+      });
+    });
+    (0, _defineProperty2.default)(this, "moveChoiceInAlternate", (choiceId, from, to, choiceIndex, alternateIndex) => {
+      const {
+        model
+      } = this.props;
+      let {
+        choices,
+        correctResponse = [],
+        maxChoicesPerCategory = 0
+      } = model || {};
+      const choice = (choices || []).find(choice => choice.id === choiceId);
+      correctResponse = (0, _categorize.moveChoiceToAlternate)(choiceId, from, to, choiceIndex, correctResponse, alternateIndex, choice?.categoryCount);
+      const maxCategoryChoices = (0, _utils2.getMaxCategoryChoices)(model);
+      // when maxChoicesPerCategory is set to 0, there is no limit so it should not be updated
+      this.updateModel({
+        correctResponse,
+        maxChoicesPerCategory: maxChoicesPerCategory !== 0 && maxChoicesPerCategory < maxCategoryChoices ? maxChoicesPerCategory + 1 : maxChoicesPerCategory
+      });
+    });
+    (0, _defineProperty2.default)(this, "deleteChoiceFromAlternateCategory", (category, choice, choiceIndex, altIndex) => {
+      const {
+        model
+      } = this.props;
+      const correctResponse = (0, _categorize.removeChoiceFromAlternate)(choice.id, category.id, choiceIndex, altIndex, model.correctResponse);
+      this.updateModel({
+        correctResponse
+      });
+    });
+    (0, _defineProperty2.default)(this, "renderDragOverlay", () => {
+      const {
+        activeDragItem
+      } = this.state;
+      const {
+        model,
+        configuration
+      } = this.props;
+      if (!activeDragItem) return null;
+      if (activeDragItem.type === 'choice') {
+        const choice = model.choices?.find(c => c.id === activeDragItem.id);
+        if (!choice) return null;
+        return /*#__PURE__*/_react.default.createElement(_choice.default, {
+          choice: choice,
+          configuration: configuration
+        });
+      } else if (activeDragItem.type === 'choice-preview' && activeDragItem.alternateResponseIndex === undefined) {
+        const choice = model.choices?.find(c => c.id === activeDragItem.id);
+        if (!choice) return null;
+        return /*#__PURE__*/_react.default.createElement(_choicePreview.default, {
+          choice: choice
+        });
+      } else if (activeDragItem.type === 'choice-preview' && activeDragItem.alternateResponseIndex !== undefined) {
+        const choice = model.choices?.find(c => c.id === activeDragItem.id);
+        if (!choice) return null;
+        return /*#__PURE__*/_react.default.createElement(_choicePreview.default, {
+          choice: choice,
+          alternateResponseIndex: activeDragItem.alternateResponseIndex
+        });
+      }
+      return null;
+    });
+    this.uid = _props.uid || _drag.uid.generateId();
+    this.state = {
+      activeDragItem: null
+    };
+  }
+  render() {
+    const {
+      configuration,
+      imageSupport,
+      model,
+      uploadSoundSupport,
+      onConfigurationChanged
+    } = this.props;
+    const {
+      allowAlternate = {},
+      allowMultiplePlacements = {},
+      baseInputConfiguration = {},
+      categoriesPerRow = {},
+      choicesPosition = {},
+      contentDimensions = {},
+      feedback = {},
+      lockChoiceOrder = {},
+      maxImageHeight = {},
+      maxImageWidth = {},
+      maxPlacements = {},
+      minCategoriesPerRow = 1,
+      partialScoring = {},
+      prompt = {},
+      rationale = {},
+      scoringType = {},
+      settingsPanelDisabled,
+      spellCheck = {},
+      studentInstructions = {},
+      teacherInstructions = {},
+      withRubric = {},
+      mathMlOptions = {},
+      language = {},
+      languageChoices = {},
+      allowMaxAnswerChoices = {}
+    } = configuration || {};
+    const {
+      allowAlternateEnabled,
+      allowMaxChoicesPerCategory,
+      errors,
+      feedbackEnabled,
+      maxChoicesPerCategory,
+      promptEnabled,
+      rationaleEnabled,
+      spellCheckEnabled,
+      teacherInstructionsEnabled,
+      toolbarEditorPosition,
+      extraCSSRules
+    } = model || {};
+    const {
+      prompt: promptError,
+      rationale: rationaleError,
+      teacherInstructions: teacherInstructionsError
+    } = errors || {};
+    const toolbarOpts = {
+      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
+    };
+    const config = model.config || {};
+    config.choices = config.choices || {
+      label: '',
+      columns: 2
+    };
+    const categories = (0, _builder.buildCategories)(model.categories || [], model.choices || [], model.correctResponse || []);
+    const alternateResponses = (0, _builder.buildAlternateResponses)(model.categories || [], model.choices || [], model.correctResponse || []);
+    const choices = model.choices.map(c => {
+      c.correctResponseCount = this.countChoiceInCorrectResponse(c);
+      // ensure categoryCount is set even though updatedModel hasn't been called
+      c.categoryCount = this.checkAllowMultiplePlacements(model.allowMultiplePlacementsEnabled, c);
+      return c;
+    });
+    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+    const panelSettings = {
+      partialScoring: partialScoring.settings && toggle(partialScoring.label),
+      lockChoiceOrder: lockChoiceOrder.settings && toggle(lockChoiceOrder.label),
+      categoriesPerRow: categoriesPerRow.settings && numberField(categoriesPerRow.label, {
+        label: categoriesPerRow.label,
+        min: minCategoriesPerRow,
+        max: 6
+      }),
+      choicesPosition: choicesPosition.settings && radio(choicesPosition.label, ['below', 'above', 'left', 'right']),
+      allowMultiplePlacementsEnabled: allowMultiplePlacements.settings && dropdown(allowMultiplePlacements.label, [_utils2.multiplePlacements.enabled, _utils2.multiplePlacements.disabled, _utils2.multiplePlacements.perChoice]),
+      maxAnswerChoices: allowMaxAnswerChoices.settings && numberField(allowMaxAnswerChoices.label, {
+        label: '',
+        min: choices?.length || 0,
+        max: 30
+      }),
+      allowMaxChoicesPerCategory: maxPlacements.settings && toggle(maxPlacements.label),
+      maxChoicesPerCategory: allowMaxChoicesPerCategory === true && numberField(maxPlacements.label, {
+        label: '',
+        min: 0,
+        max: 30
+      }),
+      promptEnabled: prompt.settings && toggle(prompt.label),
+      feedbackEnabled: feedback.settings && toggle(feedback.label),
+      allowAlternateEnabled: allowAlternate.settings && toggle(allowAlternate.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),
+      studentInstructionsEnabled: studentInstructions.settings && toggle(studentInstructions.label),
+      rationaleEnabled: rationale.settings && toggle(rationale.label),
+      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+      scoringType: scoringType.settings && radio(scoringType.label, ['auto', 'rubric']),
+      rubricEnabled: withRubric?.settings && toggle(withRubric?.label)
+    };
+    const isOpened = this.isAlertModalOpened();
+    const alertMaxChoicesMsg = translator.t('translation:categorize:maxChoicesPerCategoryRestriction', {
+      lng: model.language,
+      maxChoicesPerCategory
+    });
+    return /*#__PURE__*/_react.default.createElement(_drag.DragProvider, {
+      onDragStart: this.onDragStart,
+      onDragEnd: this.onDragEnd
+    }, /*#__PURE__*/_react.default.createElement(IdProvider, {
+      value: this.uid
+    }, /*#__PURE__*/_react.default.createElement(_configUi.layout.ConfigLayout, {
+      extraCSSRules: extraCSSRules,
+      dimensions: contentDimensions,
+      hideSettings: settingsPanelDisabled,
+      settings: /*#__PURE__*/_react.default.createElement(Panel, {
         model: model,
-        categories: categories || [],
-        onModelChanged: this.updateModel,
-        toolbarOpts: toolbarOpts,
-        spellCheck: spellCheckEnabled,
+        onChangeModel: this.updateModel,
         configuration: configuration,
-        defaultImageMaxWidth: defaultImageMaxWidth,
-        defaultImageMaxHeight: defaultImageMaxHeight,
-        mathMlOptions: mathMlOptions
-      }), /*#__PURE__*/_react["default"].createElement(_choices["default"], {
+        onChangeConfiguration: onConfigurationChanged,
+        groups: {
+          Settings: panelSettings,
+          Properties: panelProperties
+        },
+        modal: /*#__PURE__*/_react.default.createElement(_configUi.AlertDialog, {
+          title: 'Warning',
+          text: alertMaxChoicesMsg,
+          open: isOpened,
+          onClose: this.onAlertModalCancel
+        })
+      })
+    }, teacherInstructionsEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: teacherInstructions.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtml.default, {
+      markup: model.teacherInstructions || '',
+      onChange: this.changeTeacherInstructions,
+      imageSupport: imageSupport,
+      error: teacherInstructionsError,
+      nonEmpty: false,
+      toolbarOpts: toolbarOpts,
+      pluginProps: (0, _utils.getPluginProps)(teacherInstructions?.inputConfiguration, baseInputConfiguration),
+      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(StyledInputContainer, {
+      label: prompt.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtml.default, {
+      markup: model.prompt || '',
+      onChange: this.onPromptChanged,
+      imageSupport: imageSupport,
+      error: promptError,
+      nonEmpty: false,
+      disableUnderline: true,
+      toolbarOpts: toolbarOpts,
+      pluginProps: (0, _utils.getPluginProps)(prompt?.inputConfiguration, baseInputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.prompt,
+      maxImageHeight: maxImageHeight && maxImageHeight.prompt,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), promptError && /*#__PURE__*/_react.default.createElement(ErrorText, null, promptError)), /*#__PURE__*/_react.default.createElement(_categories.default, {
+      imageSupport: imageSupport,
+      uploadSoundSupport: uploadSoundSupport,
+      model: model,
+      categories: categories || [],
+      onModelChanged: this.updateModel,
+      toolbarOpts: toolbarOpts,
+      spellCheck: spellCheckEnabled,
+      configuration: configuration,
+      defaultImageMaxWidth: defaultImageMaxWidth,
+      defaultImageMaxHeight: defaultImageMaxHeight,
+      mathMlOptions: mathMlOptions
+    }), /*#__PURE__*/_react.default.createElement(_choices.default, {
+      imageSupport: imageSupport,
+      uploadSoundSupport: uploadSoundSupport,
+      choices: choices,
+      model: model,
+      onModelChanged: this.updateModel,
+      toolbarOpts: toolbarOpts,
+      spellCheck: spellCheckEnabled,
+      configuration: configuration,
+      defaultImageMaxWidth: defaultImageMaxWidth,
+      defaultImageMaxHeight: defaultImageMaxHeight
+    }), allowAlternateEnabled && /*#__PURE__*/_react.default.createElement(StyledHeader, {
+      label: "Alternate Responses",
+      buttonLabel: "ADD AN ALTERNATE RESPONSE",
+      onAdd: this.onAddAlternateResponse
+    }), allowAlternateEnabled && alternateResponses.map((categoriesList, index) => {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+        key: index
+      }, /*#__PURE__*/_react.default.createElement(StyledHeader, {
+        variant: 'subtitle1',
+        label: "Alternate Response",
+        buttonLabel: "REMOVE ALTERNATE RESPONSE",
+        onAdd: () => this.onRemoveAlternateResponse(index)
+      }), /*#__PURE__*/_react.default.createElement(_alternateResponses.default, {
+        altIndex: index,
         imageSupport: imageSupport,
-        uploadSoundSupport: uploadSoundSupport,
-        choices: choices,
         model: model,
-        onModelChanged: this.updateModel,
-        toolbarOpts: toolbarOpts,
-        spellCheck: spellCheckEnabled,
         configuration: configuration,
-        defaultImageMaxWidth: defaultImageMaxWidth,
-        defaultImageMaxHeight: defaultImageMaxHeight
-      }), allowAlternateEnabled && /*#__PURE__*/_react["default"].createElement(_header["default"], {
-        className: classes.alternatesHeader,
-        label: "Alternate Responses",
-        buttonLabel: "ADD AN ALTERNATE RESPONSE",
-        onAdd: this.onAddAlternateResponse
-      }), allowAlternateEnabled && alternateResponses.map(function (categoriesList, index) {
-        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
-          key: index
-        }, /*#__PURE__*/_react["default"].createElement(_header["default"], {
-          className: classes.alternatesHeader,
-          variant: 'subtitle1',
-          label: "Alternate Response",
-          buttonLabel: "REMOVE ALTERNATE RESPONSE",
-          onAdd: function onAdd() {
-            return _this2.onRemoveAlternateResponse(index);
-          }
-        }), /*#__PURE__*/_react["default"].createElement(_alternateResponses["default"], {
-          altIndex: index,
-          imageSupport: imageSupport,
-          model: model,
-          configuration: configuration,
-          categories: categoriesList,
-          onModelChanged: _this2.updateModel,
-          uploadSoundSupport: uploadSoundSupport,
-          mathMlOptions: mathMlOptions
-        }));
-      }), rationaleEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-        label: rationale.label,
-        className: classes.inputContainer
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        className: classes.input,
-        markup: model.rationale || '',
-        onChange: this.changeRationale,
-        imageSupport: imageSupport,
-        error: rationaleError,
-        nonEmpty: false,
-        toolbarOpts: toolbarOpts,
-        pluginProps: (0, _utils.getPluginProps)(prompt === null || prompt === void 0 ? void 0 : prompt.inputConfiguration, baseInputConfiguration),
-        spellCheck: spellCheckEnabled,
-        maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
-        maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
+        categories: categoriesList,
+        onModelChanged: this.updateModel,
         uploadSoundSupport: uploadSoundSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
         mathMlOptions: mathMlOptions
-      }), rationaleError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, rationaleError)), feedbackEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.FeedbackConfig, {
-        feedback: model.feedback,
-        onChange: this.changeFeedback,
-        toolbarOpts: toolbarOpts
-      })));
-    }
-  }]);
-  return Design;
-}(_react["default"].Component);
-
+      }));
+    }), rationaleEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: rationale.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtml.default, {
+      markup: model.rationale || '',
+      onChange: this.changeRationale,
+      imageSupport: imageSupport,
+      error: rationaleError,
+      nonEmpty: false,
+      toolbarOpts: toolbarOpts,
+      pluginProps: (0, _utils.getPluginProps)(prompt?.inputConfiguration, baseInputConfiguration),
+      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)), feedbackEnabled && /*#__PURE__*/_react.default.createElement(_configUi.FeedbackConfig, {
+      feedback: model.feedback,
+      onChange: this.changeFeedback,
+      toolbarOpts: toolbarOpts
+    })), /*#__PURE__*/_react.default.createElement(_core.DragOverlay, null, /*#__PURE__*/_react.default.createElement(DragPreviewWrapper, null, this.renderDragOverlay()))));
+  }
+}
 exports.Design = Design;
-(0, _defineProperty2["default"])(Design, "propTypes", {
-  classes: _propTypes["default"].object.isRequired,
-  configuration: _propTypes["default"].object,
-  className: _propTypes["default"].string,
-  onConfigurationChanged: _propTypes["default"].func,
-  model: _propTypes["default"].object.isRequired,
-  onChange: _propTypes["default"].func.isRequired,
-  uid: _propTypes["default"].string,
-  imageSupport: _propTypes["default"].shape({
-    add: _propTypes["default"].func.isRequired,
-    "delete": _propTypes["default"].func.isRequired
+(0, _defineProperty2.default)(Design, "propTypes", {
+  configuration: _propTypes.default.object,
+  className: _propTypes.default.string,
+  onConfigurationChanged: _propTypes.default.func,
+  model: _propTypes.default.object.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  uid: _propTypes.default.string,
+  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 styles = function styles(theme) {
-  return {
-    alternatesHeader: {
-      marginBottom: theme.spacing.unit * 2
-    },
-    text: {
-      paddingTop: theme.spacing.unit * 2,
-      paddingBottom: theme.spacing.unit * 2
-    },
-    inputContainer: {
-      width: '100%',
-      paddingTop: theme.spacing.unit * 2,
-      marginBottom: theme.spacing.unit * 2
-    },
-    title: {
-      marginBottom: theme.spacing.unit * 4
-    },
-    errorText: {
-      fontSize: theme.typography.fontSize - 2,
-      color: theme.palette.error.main,
-      paddingTop: theme.spacing.unit
-    }
-  };
-};
-
-var _default = (0, _drag.withDragContext)((0, _styles.withStyles)(styles)(Design));
-
-exports["default"] = _default;
+var _default = exports.default = Design;
 //# sourceMappingURL=index.js.map