@pie-element/categorize 13.1.1-next.1 → 13.1.1-next.11

package/configure/lib/design/index.js

@@ -0,0 +1,727 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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("@mui/material/styles");
+var _core = require("@dnd-kit/core");
+var _configUi = require("@pie-lib/config-ui");
+var _categorize = require("@pie-lib/categorize");
+var _editableHtmlTipTap = _interopRequireDefault(require("@pie-lib/editable-html-tip-tap"));
+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(1),
+  marginTop: theme.spacing(1),
+  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)
+      }));
+
+      //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.
+      updatedModel.correctResponse = (0, _categorize.ensureNoExtraChoicesInAlternate)(updatedModel.correctResponse || [], updatedModel.choices);
+
+      //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)(this, "changeRationale", rationale => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      onChange({
+        ...model,
+        rationale
+      });
+    });
+    (0, _defineProperty2.default)(this, "changeTeacherInstructions", teacherInstructions => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      onChange({
+        ...model,
+        teacherInstructions
+      });
+    });
+    (0, _defineProperty2.default)(this, "changeFeedback", feedback => {
+      this.updateModel({
+        feedback
+      });
+    });
+    (0, _defineProperty2.default)(this, "onAddAlternateResponse", () => {
+      const {
+        model: {
+          correctResponse
+        }
+      } = this.props;
+      this.updateModel({
+        correctResponse: (correctResponse || []).map(cr => ({
+          ...cr,
+          alternateResponses: [...(cr.alternateResponses || []), []]
+        }))
+      });
+    });
+    (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)(this, "countChoiceInCorrectResponse", choice => {
+      const {
+        model
+      } = this.props;
+      return (0, _categorize.countInAnswer)(choice.id, model.correctResponse);
+    });
+    (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)(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)(this, "onAlertModalCancel", () => {
+      const {
+        model
+      } = this.props;
+      const maxChoices = (0, _utils2.getMaxCategoryChoices)(model);
+      this.updateModel({
+        maxChoicesPerCategory: maxChoices
+      });
+    });
+    (0, _defineProperty2.default)(this, "onDragStart", event => {
+      const {
+        active
+      } = event;
+      const draggedItem = active.data.current;
+      this.setState({
+        activeDragItem: draggedItem
+      });
+    });
+    (0, _defineProperty2.default)(this, "onDragEnd", ({
+      active,
+      over
+    }) => {
+      // scrolls back to the original draggable element (scrollIntoViewIfNeeded).
+      const scrollX = window.scrollX;
+      const scrollY = window.scrollY;
+      this.setState({
+        activeDragItem: null
+      });
+      if (!active) {
+        return;
+      }
+
+      // Restore scroll position after dnd-kit's drop animation fires scrollIntoViewIfNeeded.
+      // Two rAF frames are needed: dnd-kit uses one rAF internally for focus/scroll restoration.
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          window.scrollTo(scrollX, scrollY);
+        });
+      });
+      const {
+        model
+      } = this.props;
+      const {
+        allowAlternateEnabled,
+        categories = [],
+        choices = []
+      } = model;
+      const activeData = active?.data?.current;
+      const overData = over?.data?.current;
+      if (!activeData) return;
+      const choiceIndex = activeData.choiceIndex || 0;
+      const overType = overData?.type;
+      const isPreview = activeData.type === 'choice-preview';
+      const isNewChoice = activeData.type === 'choice';
+      const choiceId = activeData.choice?.id || (typeof activeData.id === 'string' ? activeData.id.split('-')[0] : activeData.id);
+      if (isPreview && (!overData || overType === 'choice')) {
+        this.removeChoiceFromSource(activeData, choiceIndex, {
+          allowAlternateEnabled,
+          categories,
+          choices
+        });
+        return;
+      }
+      if (isPreview && overType === 'category') {
+        return this.moveChoice(choiceId, activeData.categoryId, overData.id, choiceIndex);
+      }
+      if (isNewChoice && overType === 'category') {
+        return this.addChoiceToCategory({
+          id: activeData.id
+        }, overData.id);
+      }
+      if (isPreview && overType === 'category-alternate') {
+        return this.moveChoiceInAlternate(choiceId, activeData.categoryId, overData.id, choiceIndex, overData.alternateResponseIndex);
+      }
+      if (allowAlternateEnabled && isNewChoice && overType === 'category-alternate') {
+        return this.addChoiceToAlternateCategory({
+          id: activeData.id
+        }, overData.id, overData.alternateResponseIndex);
+      }
+    });
+    (0, _defineProperty2.default)(this, "removeChoiceFromSource", (activeData, choiceIndex, {
+      allowAlternateEnabled,
+      categories,
+      choices
+    }) => {
+      const isAlternateSource = activeData.alternateResponseIndex !== undefined;
+      if (!isAlternateSource) {
+        this.deleteChoiceFromCategory(activeData.categoryId, activeData.choiceId, choiceIndex);
+        return;
+      }
+      if (!allowAlternateEnabled) return;
+      const category = categories?.find(c => c.id === activeData.categoryId);
+      const choice = choices?.find(c => c.id === activeData.choiceId);
+      if (category && choice) {
+        this.deleteChoiceFromAlternateCategory(category, choice, choiceIndex, activeData.alternateResponseIndex);
+      }
+    });
+    (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
+      });
+    });
+    (0, _defineProperty2.default)(this, "deleteChoiceFromCategory", (categoryId, choiceId, choiceIndex) => {
+      const {
+        model
+      } = this.props;
+      const correctResponse = (0, _categorize.removeChoiceFromCategory)(choiceId, categoryId, choiceIndex, model.correctResponse);
+      this.updateModel({
+        correctResponse
+      });
+    });
+    (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,
+        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(StyledInputContainer, {
+      label: teacherInstructions.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.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(_editableHtmlTipTap.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,
+        model: model,
+        configuration: configuration,
+        categories: categoriesList,
+        onModelChanged: this.updateModel,
+        uploadSoundSupport: uploadSoundSupport,
+        mathMlOptions: mathMlOptions
+      }));
+    }), rationaleEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: rationale.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.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", {
+  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
+  })
+});
+var _default = exports.default = Design;
+//# sourceMappingURL=index.js.map