@pie-element/categorize 13.1.0-next.28 → 13.1.1-next.1

package/configure/lib/design/index.js

@@ -1,727 +0,0 @@
-"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