@pie-element/placement-ordering 14.1.2-next.5 → 14.1.3

package/configure/lib/defaults.js

@@ -0,0 +1,211 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/** NOTE: teacherInstructions, studentInstructions, rationale & scoringType
+ * functionalities are not defined yet - the value for those can belong to
+ * model or to configuration
+ */
+var _default = exports.default = {
+  model: {
+    choiceLabel: '',
+    choiceLabelEnabled: true,
+    choices: [],
+    correctResponse: [],
+    feedbackEnabled: false,
+    numberedGuides: false,
+    orientation: 'vertical',
+    partialScoring: true,
+    placementArea: false,
+    prompt: '',
+    promptEnabled: true,
+    rationale: '',
+    rationaleEnabled: true,
+    removeTilesAfterPlacing: true,
+    scoringType: 'auto',
+    studentInstructionsEnabled: true,
+    targetLabel: '',
+    teacherInstructions: '',
+    teacherInstructionsEnabled: true,
+    toolbarEditorPosition: 'bottom'
+  },
+  configuration: {
+    baseInputConfiguration: {
+      h3: {
+        disabled: true
+      },
+      audio: {
+        disabled: false
+      },
+      video: {
+        disabled: false
+      },
+      image: {
+        disabled: false
+      },
+      textAlign: {
+        disabled: true
+      },
+      showParagraphs: {
+        disabled: false
+      },
+      separateParagraphs: {
+        disabled: true
+      }
+    },
+    choiceLabel: {
+      settings: true,
+      label: 'Choice label',
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      }
+    },
+    choices: {
+      settings: true,
+      label: 'Choices',
+      inputConfiguration: {
+        audio: {
+          disabled: true
+        },
+        video: {
+          disabled: true
+        },
+        image: {
+          disabled: true
+        }
+      }
+    },
+    feedback: {
+      settings: true,
+      label: 'Feedback',
+      enabled: true
+    },
+    prompt: {
+      settings: true,
+      label: 'Item Stem',
+      required: false,
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      }
+    },
+    numberedGuides: {
+      settings: true,
+      label: 'Numbered guides'
+    },
+    orientation: {
+      settings: true,
+      label: 'Orientation'
+    },
+    partialScoring: {
+      settings: false,
+      label: 'Allow Partial Scoring'
+    },
+    placementArea: {
+      settings: true,
+      label: 'Placement Area'
+    },
+    rationale: {
+      settings: true,
+      label: 'Rationale',
+      required: false,
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      }
+    },
+    removeTilesAfterPlacing: {
+      settings: false,
+      label: 'Remove Tiles after placing'
+    },
+    settingsPanelDisabled: false,
+    scoringType: {
+      settings: false,
+      label: 'Scoring Type'
+    },
+    studentInstructions: {
+      settings: false,
+      label: 'Student Instructions'
+    },
+    targetLabel: {
+      settings: true,
+      label: 'Target label'
+    },
+    spellCheck: {
+      label: 'Spellcheck',
+      settings: false,
+      enabled: true
+    },
+    teacherInstructions: {
+      settings: true,
+      label: 'Teacher Instructions',
+      required: false,
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      }
+    },
+    maxImageWidth: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 300,
+      choicesWithPlacementArea: 240,
+      choicesWithoutPlacementArea: 300
+    },
+    maxImageHeight: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 300,
+      choices: 150
+    },
+    withRubric: {
+      settings: false,
+      label: 'Add Rubric'
+    },
+    mathMlOptions: {
+      mmlOutput: false,
+      mmlEditing: false
+    },
+    language: {
+      settings: false,
+      label: 'Specify Language',
+      enabled: false
+    },
+    languageChoices: {
+      label: 'Language Choices',
+      options: []
+    }
+  }
+};
+//# sourceMappingURL=defaults.js.map

package/configure/lib/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.js","names":["_default","exports","default","model","choiceLabel","choiceLabelEnabled","choices","correctResponse","feedbackEnabled","numberedGuides","orientation","partialScoring","placementArea","prompt","promptEnabled","rationale","rationaleEnabled","removeTilesAfterPlacing","scoringType","studentInstructionsEnabled","targetLabel","teacherInstructions","teacherInstructionsEnabled","toolbarEditorPosition","configuration","baseInputConfiguration","h3","disabled","audio","video","image","textAlign","showParagraphs","separateParagraphs","settings","label","inputConfiguration","feedback","enabled","required","settingsPanelDisabled","studentInstructions","spellCheck","maxImageWidth","choicesWithPlacementArea","choicesWithoutPlacementArea","maxImageHeight","withRubric","mathMlOptions","mmlOutput","mmlEditing","language","languageChoices","options"],"sources":["../src/defaults.js"],"sourcesContent":["/** NOTE: teacherInstructions, studentInstructions, rationale & scoringType\n * functionalities are not defined yet - the value for those can belong to\n * model or to configuration\n */\n\nexport default {\n  model: {\n    choiceLabel: '',\n    choiceLabelEnabled: true,\n    choices: [],\n    correctResponse: [],\n    feedbackEnabled: false,\n    numberedGuides: false,\n    orientation: 'vertical',\n    partialScoring: true,\n    placementArea: false,\n    prompt: '',\n    promptEnabled: true,\n    rationale: '',\n    rationaleEnabled: true,\n    removeTilesAfterPlacing: true,\n    scoringType: 'auto',\n    studentInstructionsEnabled: true,\n    targetLabel: '',\n    teacherInstructions: '',\n    teacherInstructionsEnabled: true,\n    toolbarEditorPosition: 'bottom',\n  },\n  configuration: {\n    baseInputConfiguration: {\n      h3: { disabled: true },\n      audio: { disabled: false },\n      video: { disabled: false },\n      image: { disabled: false },\n      textAlign: { disabled: true },\n      showParagraphs: { disabled: false },\n      separateParagraphs: { disabled: true },\n    },\n    choiceLabel: {\n      settings: true,\n      label: 'Choice label',\n      inputConfiguration: {\n        audio: { disabled: false },\n        video: { disabled: false },\n        image: { disabled: false },\n      },\n    },\n    choices: {\n      settings: true,\n      label: 'Choices',\n      inputConfiguration: {\n        audio: { disabled: true },\n        video: { disabled: true },\n        image: { disabled: true },\n      },\n    },\n    feedback: {\n      settings: true,\n      label: 'Feedback',\n      enabled: true,\n    },\n    prompt: {\n      settings: true,\n      label: 'Item Stem',\n      required: false,\n      inputConfiguration: {\n        audio: { disabled: false },\n        video: { disabled: false },\n        image: { disabled: false },\n      },\n    },\n    numberedGuides: {\n      settings: true,\n      label: 'Numbered guides',\n    },\n    orientation: {\n      settings: true,\n      label: 'Orientation',\n    },\n    partialScoring: {\n      settings: false,\n      label: 'Allow Partial Scoring',\n    },\n    placementArea: {\n      settings: true,\n      label: 'Placement Area',\n    },\n    rationale: {\n      settings: true,\n      label: 'Rationale',\n      required: false,\n      inputConfiguration: {\n        audio: { disabled: false },\n        video: { disabled: false },\n        image: { disabled: false },\n      },\n    },\n    removeTilesAfterPlacing: {\n      settings: false,\n      label: 'Remove Tiles after placing',\n    },\n    settingsPanelDisabled: false,\n    scoringType: {\n      settings: false,\n      label: 'Scoring Type',\n    },\n    studentInstructions: {\n      settings: false,\n      label: 'Student Instructions',\n    },\n    targetLabel: {\n      settings: true,\n      label: 'Target label',\n    },\n    spellCheck: {\n      label: 'Spellcheck',\n      settings: false,\n      enabled: true,\n    },\n    teacherInstructions: {\n      settings: true,\n      label: 'Teacher Instructions',\n      required: false,\n      inputConfiguration: {\n        audio: { disabled: false },\n        video: { disabled: false },\n        image: { disabled: false },\n      },\n    },\n    maxImageWidth: {\n      teacherInstructions: 300,\n      prompt: 300,\n      rationale: 300,\n      choicesWithPlacementArea: 240,\n      choicesWithoutPlacementArea: 300,\n    },\n    maxImageHeight: {\n      teacherInstructions: 300,\n      prompt: 300,\n      rationale: 300,\n      choices: 150,\n    },\n    withRubric: {\n      settings: false,\n      label: 'Add Rubric',\n    },\n    mathMlOptions: {\n      mmlOutput: false,\n      mmlEditing: false,\n    },\n    language: {\n      settings: false,\n      label: 'Specify Language',\n      enabled: false,\n    },\n    languageChoices: {\n      label: 'Language Choices',\n      options: [],\n    },\n  },\n};\n"],"mappings":"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","ignoreList":[]}

package/configure/lib/design.js

@@ -0,0 +1,427 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Design = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _debug = _interopRequireDefault(require("debug"));
+var _lodashEs = require("lodash-es");
+var _nestedProperty = require("nested-property");
+var _pluralize = _interopRequireDefault(require("pluralize"));
+var _styles = require("@mui/material/styles");
+var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _configUi = require("@pie-lib/config-ui");
+var _editableHtmlTipTap = _interopRequireDefault(require("@pie-lib/editable-html-tip-tap"));
+var _drag = require("@pie-lib/drag");
+var _choiceEditor = _interopRequireDefault(require("./choice-editor"));
+var _utils = require("./utils");
+const log = (0, _debug.default)('@pie-element:placement-ordering:design');
+const {
+  Panel,
+  toggle,
+  radio,
+  dropdown
+} = _configUi.settings;
+const getSingularAndPlural = label => !_pluralize.default.isPlural(label) ? {
+  singularLabel: label,
+  pluralLabel: (0, _pluralize.default)(label)
+} : {
+  singularLabel: _pluralize.default.singular(label),
+  pluralLabel: label
+};
+const StyledInputContainer = (0, _styles.styled)(_configUi.InputContainer)(({
+  theme
+}) => ({
+  width: '100%',
+  paddingTop: theme.spacing(2),
+  marginBottom: theme.spacing(2)
+}));
+const StyledRow = (0, _styles.styled)('div')({
+  display: 'grid',
+  gridAutoFlow: 'column',
+  gridAutoColumns: '1fr',
+  gridGap: '8px'
+});
+const StyledChoicesWrapper = (0, _styles.styled)(_configUi.FormSection)(({
+  theme
+}) => ({
+  marginTop: 0,
+  marginBottom: theme.spacing(2.5)
+}));
+const InlineFlexContainer = (0, _styles.styled)('div')({
+  display: 'inline-flex',
+  position: 'absolute'
+});
+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, "onDragEnd", (event, ordering) => {
+      const {
+        active,
+        over
+      } = event;
+      if (!over || !active) {
+        return;
+      }
+      const target = over.data.current;
+      const source = active.data.current;
+      const rawFrom = ordering.tiles.find(t => t.id === source.id && t.type === source.type);
+      const rawTo = target;
+      const from = {
+        ...rawFrom,
+        index: (0, _utils.normalizeIndex)(rawFrom, ordering)
+      };
+      const to = {
+        ...rawTo,
+        index: (0, _utils.normalizeIndex)(rawTo, ordering)
+      };
+      const {
+        response,
+        choices: updatedChoices
+      } = (0, _utils.updateResponseOrChoices)(ordering.response, ordering.choices, from, to);
+      this.onChoiceEditorChange(updatedChoices, response);
+    });
+    this.applyUpdate = modelFn => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+      const update = modelFn((0, _lodashEs.cloneDeep)(model));
+      onModelChanged(update);
+    };
+    this.changeHandler = (modelPath, valuePath) => {
+      return value => {
+        log('[changeHandler] value: ', value);
+        const v = valuePath ? (0, _nestedProperty.get)(value, valuePath) : value;
+        this.applyUpdate(model => {
+          (0, _nestedProperty.set)(model, modelPath, v);
+          return model;
+        });
+      };
+    };
+    this.onPromptChange = this.changeHandler('prompt');
+    this.onTeacherInstructionsChange = this.changeHandler('teacherInstructions');
+    this.onRationaleChange = this.changeHandler('rationale');
+    this.onChoiceAreaLabelChange = this.changeHandler('choiceLabel', 'target.value');
+    this.onAnswerAreaLabelChange = this.changeHandler('targetLabel', 'target.value');
+    this.onFeedbackChange = this.changeHandler('feedback');
+    this.onChoiceEditorChange = (choices, correctResponse) => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+      const update = (0, _lodashEs.cloneDeep)(model);
+      update.choices = choices;
+      update.correctResponse = correctResponse;
+      onModelChanged(update);
+    };
+  }
+  componentDidMount() {
+    const {
+      model,
+      onModelChanged
+    } = this.props || {};
+    const {
+      feedback
+    } = model || {};
+    const update = (0, _lodashEs.cloneDeep)(model);
+
+    // requirement made in PD-2182
+    if (!feedback) {
+      update.feedbackEnabled = false;
+      onModelChanged(update);
+    }
+  }
+  render() {
+    const {
+      model,
+      imageSupport,
+      uploadSoundSupport,
+      onModelChanged,
+      configuration,
+      onConfigurationChanged
+    } = this.props;
+    const {
+      baseInputConfiguration = {},
+      choiceLabel = {},
+      choices = {},
+      contentDimensions = {},
+      feedback = {},
+      prompt = {},
+      placementArea = {},
+      maxImageWidth = {},
+      maxImageHeight = {},
+      numberedGuides = {},
+      orientation = {},
+      partialScoring = {},
+      rationale = {},
+      removeTilesAfterPlacing = {},
+      settingsPanelDisabled,
+      studentInstructions = {},
+      spellCheck = {},
+      scoringType = {},
+      targetLabel = {},
+      teacherInstructions = {},
+      withRubric = {},
+      mathMlOptions = {},
+      language = {},
+      languageChoices = {}
+    } = configuration || {};
+    const {
+      choiceLabelEnabled,
+      errors,
+      extraCSSRules,
+      feedbackEnabled,
+      promptEnabled,
+      rationaleEnabled,
+      spellCheckEnabled,
+      teacherInstructionsEnabled,
+      toolbarEditorPosition,
+      correctResponse
+    } = model || {};
+    const {
+      prompt: promptError,
+      rationale: rationaleError,
+      teacherInstructions: teacherInstructionsError
+    } = errors || {};
+    const ordering = {
+      choices: model.choices,
+      response: !correctResponse || (0, _lodashEs.isEmpty)(correctResponse) ? new Array(model.choices.length) : correctResponse,
+      tiles: (0, _utils.buildTiles)(model.choices, correctResponse)
+    };
+    const validationMessage = (0, _utils.generateValidationMessage)();
+    const {
+      singularLabel = '',
+      pluralLabel = ''
+    } = choices?.label && getSingularAndPlural(choices.label) || {};
+    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+    const maxChoicesImageWidth = maxImageWidth && model.placementArea ? maxImageWidth.choicesWithPlacementArea : maxImageWidth.choicesWithoutPlacementArea || defaultImageMaxWidth;
+    const maxChoicesImageHeight = maxImageHeight && maxImageHeight.choices || defaultImageMaxHeight;
+    const toolbarOpts = {
+      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
+    };
+    const panelSettings = {
+      choiceLabelEnabled: choiceLabel.settings && toggle(choiceLabel.label),
+      placementArea: placementArea.settings && toggle(placementArea.label),
+      numberedGuides: numberedGuides.settings && model.placementArea && toggle(numberedGuides.label),
+      orientation: orientation.settings && radio(orientation.label, ['vertical', 'horizontal']),
+      removeTilesAfterPlacing: removeTilesAfterPlacing.settings && toggle(removeTilesAfterPlacing.label),
+      partialScoring: partialScoring.settings && toggle(partialScoring.label),
+      feedbackEnabled: feedback.settings && toggle(feedback.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),
+      promptEnabled: prompt.settings && toggle(prompt.label),
+      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+      scoringType: scoringType.settings && radio(scoringType.label, ['auto', 'rubric']),
+      rubricEnabled: withRubric?.settings && toggle(withRubric?.label)
+    };
+    const getPluginProps = (props = {}) => ({
+      ...baseInputConfiguration,
+      ...props
+    });
+    return /*#__PURE__*/_react.default.createElement(_drag.DragProvider, {
+      onDragEnd: event => this.onDragEnd(event, ordering)
+    }, /*#__PURE__*/_react.default.createElement(_configUi.layout.ConfigLayout, {
+      extraCSSRules: extraCSSRules,
+      dimensions: contentDimensions,
+      hideSettings: settingsPanelDisabled,
+      settings: /*#__PURE__*/_react.default.createElement(Panel, {
+        model: model,
+        configuration: configuration,
+        onChangeModel: model => onModelChanged(model),
+        onChangeConfiguration: configuration => onConfigurationChanged(configuration, true),
+        groups: {
+          Settings: panelSettings,
+          Properties: panelProperties
+        }
+      })
+    }, teacherInstructionsEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: teacherInstructions.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
+      className: "prompt",
+      markup: model.teacherInstructions || '',
+      onChange: this.onTeacherInstructionsChange,
+      imageSupport: imageSupport,
+      nonEmpty: false,
+      error: teacherInstructionsError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(teacherInstructions?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), teacherInstructionsError && /*#__PURE__*/_react.default.createElement("div", {
+      className: "errorText"
+    }, teacherInstructionsError)), promptEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: prompt && prompt.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
+      className: "prompt",
+      markup: model.prompt,
+      onChange: this.onPromptChange,
+      imageSupport: imageSupport,
+      error: promptError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(prompt?.inputConfiguration),
+      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: "errorText"
+    }, promptError)), /*#__PURE__*/_react.default.createElement(StyledChoicesWrapper, {
+      label: `Define ${pluralLabel}`,
+      labelExtraStyle: {
+        display: 'inline-flex'
+      }
+    }, /*#__PURE__*/_react.default.createElement(InlineFlexContainer, null, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+      slotProps: {
+        tooltip: {
+          sx: {
+            fontSize: 14,
+            whiteSpace: 'pre',
+            maxWidth: '500px'
+          }
+        }
+      },
+      disableFocusListener: true,
+      disableTouchListener: true,
+      placement: 'right',
+      title: validationMessage
+    }, /*#__PURE__*/_react.default.createElement(_Info.default, {
+      fontSize: 'small',
+      color: 'primary',
+      style: {
+        marginLeft: '8px'
+      }
+    }))), /*#__PURE__*/_react.default.createElement(StyledRow, null, choiceLabelEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: choiceLabel && choiceLabel.label && `${singularLabel} label`
+    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, (0, _extends2.default)({}, model.placementArea && {
+      autoWidthToolbar: true
+    }, {
+      className: "prompt",
+      markup: model.choiceLabel,
+      onChange: this.onChoiceAreaLabelChange,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(choiceLabel?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxChoicesImageWidth,
+      maxImageHeight: maxChoicesImageHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }))), targetLabel.settings && model.placementArea && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: targetLabel && targetLabel.label && targetLabel.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
+      autoWidthToolbar: true,
+      className: "prompt",
+      markup: model.targetLabel,
+      onChange: this.onAnswerAreaLabelChange,
+      toolbarOpts: toolbarOpts,
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.choicesWithPlacementArea || defaultImageMaxWidth,
+      maxImageHeight: maxChoicesImageHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }))), choices.settings && /*#__PURE__*/_react.default.createElement(_choiceEditor.default, {
+      correctResponse: correctResponse,
+      choices: model.choices,
+      onChange: this.onChoiceEditorChange,
+      imageSupport: imageSupport,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(choices?.inputConfiguration),
+      choicesLabel: choices.label,
+      placementArea: model.placementArea,
+      singularChoiceLabel: singularLabel,
+      pluralChoiceLabel: pluralLabel,
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxChoicesImageWidth,
+      maxImageHeight: maxChoicesImageHeight,
+      errors: errors || {},
+      mathMlOptions: mathMlOptions,
+      ordering: ordering
+    })), rationaleEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: rationale.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
+      className: "prompt",
+      markup: model.rationale || '',
+      onChange: this.onRationaleChange,
+      imageSupport: imageSupport,
+      error: rationaleError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(rationale?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), rationaleError && /*#__PURE__*/_react.default.createElement(ErrorText, null, rationaleError)), feedbackEnabled && /*#__PURE__*/_react.default.createElement(_configUi.FeedbackConfig, {
+      feedback: model.feedback,
+      onChange: this.onFeedbackChange,
+      imageSupport: imageSupport,
+      toolbarOpts: toolbarOpts
+    })));
+  }
+}
+exports.Design = Design;
+(0, _defineProperty2.default)(Design, "propTypes", {
+  uploadSoundSupport: _propTypes.default.object
+});
+(0, _defineProperty2.default)(Design, "defaultProps", {});
+Design.defaultProps = {
+  onModelChanged: () => {},
+  onConfigurationChanged: () => {}
+};
+Design.propTypes = {
+  model: _propTypes.default.object.isRequired,
+  configuration: _propTypes.default.object.isRequired,
+  onModelChanged: _propTypes.default.func,
+  onConfigurationChanged: _propTypes.default.func,
+  imageSupport: _propTypes.default.object
+};
+var _default = exports.default = Design;
+//# sourceMappingURL=design.js.map