@pie-element/math-templated 2.11.2-next.7000

package/configure/lib/design.js

@@ -0,0 +1,597 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
+
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+
+var _pick = _interopRequireDefault(require("lodash/pick"));
+
+var _throttle = _interopRequireDefault(require("lodash/throttle"));
+
+var _configUi = require("@pie-lib/pie-toolbox/config-ui");
+
+var _editableHtml = require("@pie-lib/pie-toolbox/editable-html");
+
+var _settings = require("@pie-lib/pie-toolbox/code/config-ui/settings");
+
+var _response = _interopRequireDefault(require("./response"));
+
+var _markupUtils = require("./markupUtils");
+
+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 Panel = _configUi.settings.Panel,
+    toggle = _configUi.settings.toggle;
+
+var createElementFromHTML = function createElementFromHTML(htmlString) {
+  var div = document.createElement('div');
+  div.innerHTML = htmlString.trim();
+  return div;
+};
+
+var Design = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Design, _React$Component);
+
+  var _super = _createSuper(Design);
+
+  function Design() {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Design);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {});
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChange", function (key, value) {
+      var _this$props = _this.props,
+          onModelChanged = _this$props.onModelChanged,
+          model = _this$props.model;
+      var updatedModel = (0, _cloneDeep["default"])(model);
+      updatedModel[key] = value;
+      onModelChanged(updatedModel);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onResponseChange", function (response, index) {
+      var _this$props2 = _this.props,
+          model = _this$props2.model,
+          onModelChanged = _this$props2.onModelChanged;
+
+      var newModel = _objectSpread({}, model);
+
+      newModel.responses[index] = response;
+      onModelChanged(newModel);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChangeResponse", function (index, newVal) {
+      var _this$props3 = _this.props,
+          model = _this$props3.model,
+          onModelChanged = _this$props3.onModelChanged;
+      var responses = model.responses;
+
+      if (!responses[index]) {
+        responses[index] = [{
+          answer: newVal || '',
+          id: 'response' + index,
+          allowSpaces: true
+        }];
+      } else {
+        responses[index][0].answer = newVal || '';
+      }
+
+      onModelChanged(_objectSpread(_objectSpread({}, model), {}, {
+        responses: responses
+      }));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onResponsesChanged", function (responses) {
+      _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
+        responses: responses
+      }));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (markup) {
+      var _this$props4 = _this.props,
+          responses = _this$props4.model.responses,
+          onModelChanged = _this$props4.onModelChanged;
+      var newResponses = {};
+      var domMarkup = createElementFromHTML(markup);
+      var responseAreas = domMarkup.querySelectorAll('[data-type="math_templated"]');
+      responseAreas.forEach(function (element) {
+        var _element$dataset = element.dataset,
+            value = _element$dataset.value,
+            dataIndex = _element$dataset.index;
+
+        if (!value) {
+          element.dataset.value = "R ".concat(dataIndex);
+        }
+
+        newResponses[dataIndex] = responses[dataIndex] || {
+          // TODO: Initialize with customizable defaults
+          allowSpaces: true,
+          validation: 'symbolic',
+          allowTrailingZeros: false,
+          ignoreOrder: false,
+          answer: '',
+          alternates: {}
+        };
+        element.dataset.index = dataIndex;
+      });
+      var processedMarkup = (0, _markupUtils.processMarkup)(markup);
+
+      var callback = function callback() {
+        return onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
+          slateMarkup: domMarkup.innerHTML,
+          responses: newResponses,
+          markup: processedMarkup
+        }));
+      };
+
+      _this.setState({
+        cachedChoices: undefined
+      }, callback);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onHandleAreaChange", (0, _throttle["default"])(function (nodes) {
+      var _this$props5 = _this.props,
+          responses = _this$props5.model.responses,
+          onModelChanged = _this$props5.onModelChanged;
+      var cachedResponses = _this.state.cachedResponses;
+
+      if (!nodes) {
+        return;
+      }
+
+      var newChoices = responses ? (0, _cloneDeep["default"])(responses) : {};
+      var newCachedResponses = cachedResponses ? (0, _cloneDeep["default"])(cachedResponses) : {};
+      nodes.forEach(function (node) {
+        var keyForNode = node.data.get('index');
+
+        if (!newChoices[keyForNode] && newCachedResponses[keyForNode]) {
+          Object.assign(newChoices, (0, _pick["default"])(newCachedResponses, keyForNode));
+
+          if (newCachedResponses.hasOwnProperty(keyForNode)) {
+            delete newCachedResponses[keyForNode];
+          }
+        } else {
+          Object.assign(newCachedResponses, (0, _pick["default"])(newChoices, keyForNode));
+
+          if (newChoices.hasOwnProperty(keyForNode)) {
+            delete newChoices[keyForNode];
+          }
+        }
+      });
+
+      var callback = function callback() {
+        return onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
+          responses: newChoices
+        }));
+      };
+
+      _this.setState({
+        cachedResponses: newCachedResponses
+      }, callback);
+    }, 500, {
+      trailing: false,
+      leading: true
+    }));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onBlur", function (e) {
+      var _ref = e || {},
+          relatedTarget = _ref.relatedTarget,
+          currentTarget = _ref.currentTarget;
+
+      function getParentWithRoleTooltip(element) {
+        var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+        // only run this max 16 times
+        if (!element || depth >= 16) return null;
+        var parent = element.offsetParent;
+        if (!parent) return null;
+
+        if (parent.getAttribute('role') === 'tooltip') {
+          return parent;
+        }
+
+        return getParentWithRoleTooltip(parent, depth + 1);
+      }
+
+      function getDeepChildDataKeypad(element) {
+        var _element$children;
+
+        var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+        // only run this max 4 times
+        if (!element || depth >= 4) return null;
+        var child = element === null || element === void 0 ? void 0 : (_element$children = element.children) === null || _element$children === void 0 ? void 0 : _element$children[0];
+        if (!child) return null;
+
+        if (child.attributes && child.attributes['data-keypad']) {
+          return child;
+        }
+
+        return getDeepChildDataKeypad(child, depth + 1);
+      }
+
+      var parentWithTooltipRole = getParentWithRoleTooltip(relatedTarget);
+      var childWithDataKeypad = parentWithTooltipRole ? getDeepChildDataKeypad(parentWithTooltipRole) : null;
+
+      if (!relatedTarget || !currentTarget || !(childWithDataKeypad !== null && childWithDataKeypad !== void 0 && childWithDataKeypad.attributes['data-keypad'])) {
+        _this.setState({
+          activeAnswerBlock: ''
+        });
+      }
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Design, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var slateMarkup = this.props.model.slateMarkup;
+      this.setState({
+        markup: slateMarkup
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props6 = this.props,
+          classes = _this$props6.classes,
+          configuration = _this$props6.configuration,
+          imageSupport = _this$props6.imageSupport,
+          model = _this$props6.model,
+          onConfigurationChanged = _this$props6.onConfigurationChanged,
+          onModelChanged = _this$props6.onModelChanged,
+          uploadSoundSupport = _this$props6.uploadSoundSupport;
+
+      var _ref2 = configuration || {},
+          _ref2$baseInputConfig = _ref2.baseInputConfiguration,
+          baseInputConfiguration = _ref2$baseInputConfig === void 0 ? {} : _ref2$baseInputConfig,
+          _ref2$contentDimensio = _ref2.contentDimensions,
+          contentDimensions = _ref2$contentDimensio === void 0 ? {} : _ref2$contentDimensio,
+          _ref2$prompt = _ref2.prompt,
+          prompt = _ref2$prompt === void 0 ? {} : _ref2$prompt,
+          _ref2$rationale = _ref2.rationale,
+          rationale = _ref2$rationale === void 0 ? {} : _ref2$rationale,
+          settingsPanelDisabled = _ref2.settingsPanelDisabled,
+          _ref2$teacherInstruct = _ref2.teacherInstructions,
+          teacherInstructions = _ref2$teacherInstruct === void 0 ? {} : _ref2$teacherInstruct,
+          _ref2$language = _ref2.language,
+          language = _ref2$language === void 0 ? {} : _ref2$language,
+          _ref2$languageChoices = _ref2.languageChoices,
+          languageChoices = _ref2$languageChoices === void 0 ? {} : _ref2$languageChoices,
+          _ref2$spellCheck = _ref2.spellCheck,
+          spellCheck = _ref2$spellCheck === void 0 ? {} : _ref2$spellCheck,
+          _ref2$playerSpellChec = _ref2.playerSpellCheck,
+          playerSpellCheck = _ref2$playerSpellChec === void 0 ? {} : _ref2$playerSpellChec,
+          _ref2$maxImageWidth = _ref2.maxImageWidth,
+          maxImageWidth = _ref2$maxImageWidth === void 0 ? {} : _ref2$maxImageWidth,
+          _ref2$maxImageHeight = _ref2.maxImageHeight,
+          maxImageHeight = _ref2$maxImageHeight === void 0 ? {} : _ref2$maxImageHeight,
+          _ref2$mathMlOptions = _ref2.mathMlOptions,
+          mathMlOptions = _ref2$mathMlOptions === void 0 ? {} : _ref2$mathMlOptions,
+          _ref2$template = _ref2.template,
+          template = _ref2$template === void 0 ? {} : _ref2$template,
+          _ref2$editSource = _ref2.editSource,
+          editSource = _ref2$editSource === void 0 ? {} : _ref2$editSource,
+          _ref2$ignoreOrder = _ref2.ignoreOrder,
+          cIgnoreOrder = _ref2$ignoreOrder === void 0 ? {} : _ref2$ignoreOrder,
+          _ref2$allowTrailingZe = _ref2.allowTrailingZeros,
+          cAllowTrailingZeros = _ref2$allowTrailingZe === void 0 ? {} : _ref2$allowTrailingZe,
+          _ref2$partialScoring = _ref2.partialScoring,
+          partialScoring = _ref2$partialScoring === void 0 ? {} : _ref2$partialScoring,
+          maxResponseAreas = _ref2.maxResponseAreas;
+
+      var _ref3 = model || {},
+          errors = _ref3.errors,
+          promptEnabled = _ref3.promptEnabled,
+          rationaleEnabled = _ref3.rationaleEnabled,
+          spellCheckEnabled = _ref3.spellCheckEnabled,
+          teacherInstructionsEnabled = _ref3.teacherInstructionsEnabled,
+          toolbarEditorPosition = _ref3.toolbarEditorPosition,
+          responses = _ref3.responses,
+          equationEditor = _ref3.equationEditor;
+
+      var _ref4 = errors || {},
+          _ref4$choices = _ref4.choices,
+          choicesErrors = _ref4$choices === void 0 ? {} : _ref4$choices,
+          promptError = _ref4.prompt,
+          rationaleError = _ref4.rationale,
+          responseAreasError = _ref4.responseAreas,
+          teacherInstructionsError = _ref4.teacherInstructions,
+          responsesErrors = _ref4.responses;
+
+      var panelSettings = {
+        'language.enabled': language.settings && toggle(language.label, true),
+        language: language.settings && language.enabled && (0, _settings.dropdown)(languageChoices.label, languageChoices.options)
+      };
+      var panelProperties = {
+        teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+        rationaleEnabled: rationale.settings && toggle(rationale.label),
+        promptEnabled: prompt.settings && toggle(prompt.label),
+        spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+        playerSpellCheckEnabled: playerSpellCheck.settings && toggle(playerSpellCheck.label),
+        'editSource.enabled': (editSource === null || editSource === void 0 ? void 0 : editSource.settings) && toggle(editSource.label, true),
+        partialScoring: partialScoring.settings && toggle(partialScoring.label)
+      };
+      var defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+      var defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+      var toolbarOpts = {
+        position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
+      };
+
+      var getPluginProps = function getPluginProps() {
+        var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        var baseInputConfiguration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        return _objectSpread(_objectSpread({}, baseInputConfiguration), props);
+      };
+
+      return /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
+        dimensions: contentDimensions,
+        hideSettings: settingsPanelDisabled,
+        settings: /*#__PURE__*/_react["default"].createElement(Panel, {
+          model: model,
+          configuration: configuration,
+          onChangeModel: function onChangeModel(updatedModel) {
+            return onModelChanged(updatedModel);
+          },
+          onChangeConfiguration: onConfigurationChanged,
+          groups: {
+            Settings: panelSettings,
+            Properties: panelProperties
+          }
+        })
+      }, teacherInstructionsEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+        label: teacherInstructions.label,
+        className: classes.promptHolder
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
+        className: classes.prompt,
+        markup: model.teacherInstructions || '',
+        onChange: function onChange(value) {
+          return _this2.handleChange('teacherInstructions', value);
+        },
+        imageSupport: imageSupport,
+        nonEmpty: false,
+        error: teacherInstructionsError,
+        toolbarOpts: toolbarOpts,
+        pluginProps: 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.promptHolder
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
+        className: classes.prompt,
+        markup: model.prompt,
+        onChange: function onChange(value) {
+          return _this2.handleChange('prompt', value);
+        },
+        imageSupport: imageSupport,
+        nonEmpty: false,
+        disableUnderline: true,
+        error: promptError,
+        toolbarOpts: toolbarOpts,
+        pluginProps: getPluginProps(teacherInstructions === null || teacherInstructions === void 0 ? void 0 : teacherInstructions.inputConfiguration, baseInputConfiguration),
+        spellCheck: spellCheckEnabled,
+        maxImageWidth: defaultImageMaxWidth,
+        maxImageHeight: defaultImageMaxHeight,
+        uploadSoundSupport: uploadSoundSupport,
+        languageCharactersProps: [{
+          language: 'spanish'
+        }, {
+          language: 'special'
+        }],
+        mathMlOptions: mathMlOptions
+      }), promptError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, promptError)), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        className: classes.title
+      }, "Response Template"), /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
+        activePlugins: _editableHtml.ALL_PLUGINS,
+        toolbarOpts: {
+          position: 'top'
+        },
+        spellCheck: spellCheckEnabled,
+        pluginProps: getPluginProps(template === null || template === void 0 ? void 0 : template.inputConfiguration, baseInputConfiguration),
+        responseAreaProps: {
+          type: 'math-templated',
+          respAreaToolbar: null,
+          error: function error() {
+            return choicesErrors;
+          },
+          onHandleAreaChange: this.onHandleAreaChange,
+          maxResponseAreas: maxResponseAreas
+        },
+        className: classes.markup,
+        markup: model.slateMarkup,
+        onChange: this.onChange,
+        imageSupport: imageSupport,
+        disableImageAlignmentButtons: true,
+        onBlur: this.onBlur,
+        disabled: false,
+        highlightShape: false,
+        error: responseAreasError,
+        uploadSoundSupport: uploadSoundSupport,
+        languageCharactersProps: [{
+          language: 'spanish'
+        }, {
+          language: 'special'
+        }],
+        mathMlOptions: mathMlOptions
+      }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        className: classes.title
+      }, "Define Response"), /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+        label: "Response Template Equation Editor",
+        className: classes.selectContainer
+      }, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+        className: classes.select,
+        onChange: function onChange(event) {
+          return _this2.handleChange('equationEditor', event.target.value);
+        },
+        value: equationEditor
+      }, /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+        value: "non-negative-integers"
+      }, "Numeric - Non-Negative Integers"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+        value: "integers"
+      }, "Numeric - Integers"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+        value: "decimals"
+      }, "Numeric - Decimals"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+        value: "fractions"
+      }, "Numeric - Fractions"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+        value: 1
+      }, "Grade 1 - 2"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+        value: 3
+      }, "Grade 3 - 5"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+        value: 6
+      }, "Grade 6 - 7"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+        value: 8
+      }, "Grade 8 - HS"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+        value: 'geometry'
+      }, "Geometry"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+        value: 'advanced-algebra'
+      }, "Advanced Algebra"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+        value: 'statistics'
+      }, "Statistics"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+        value: 'item-authoring'
+      }, "Item Authoring"))), Object.keys(responses || {}).map(function (responseKey, idx) {
+        var response = responses[responseKey];
+        return /*#__PURE__*/_react["default"].createElement(_response["default"], {
+          key: responseKey,
+          responseKey: responseKey,
+          mode: equationEditor,
+          response: response,
+          onResponseChange: _this2.onResponseChange,
+          index: idx,
+          cIgnoreOrder: cIgnoreOrder,
+          cAllowTrailingZeros: cAllowTrailingZeros,
+          error: responsesErrors && responsesErrors[idx]
+        });
+      }), rationaleEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+        label: rationale.label,
+        className: classes.promptHolder
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
+        className: classes.prompt,
+        markup: model.rationale || '',
+        onChange: function onChange(value) {
+          return _this2.handleChange('rationale', value);
+        },
+        imageSupport: imageSupport,
+        nonEmpty: false,
+        error: rationaleError,
+        toolbarOpts: toolbarOpts,
+        pluginProps: getPluginProps(rationale === null || rationale === void 0 ? void 0 : rationale.inputConfiguration, _objectSpread(_objectSpread({}, baseInputConfiguration), {}, {
+          math: {
+            controlledKeypadMode: false
+          }
+        })),
+        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("div", {
+        className: classes.errorText
+      }, rationaleError)));
+    }
+  }]);
+  return Design;
+}(_react["default"].Component);
+
+(0, _defineProperty2["default"])(Design, "propTypes", {
+  model: _propTypes["default"].object.isRequired,
+  configuration: _propTypes["default"].object.isRequired,
+  classes: _propTypes["default"].object.isRequired,
+  onModelChanged: _propTypes["default"].func.isRequired,
+  onConfigurationChanged: _propTypes["default"].func.isRequired,
+  imageSupport: _propTypes["default"].shape({
+    add: _propTypes["default"].func.isRequired,
+    "delete": _propTypes["default"].func.isRequired
+  }),
+  uploadSoundSupport: _propTypes["default"].object
+});
+
+var _default = (0, _styles.withStyles)(function (theme) {
+  return {
+    promptHolder: {
+      width: '100%',
+      paddingTop: theme.spacing.unit * 2,
+      marginBottom: theme.spacing.unit * 2
+    },
+    prompt: {
+      width: '100%'
+    },
+    errorText: {
+      color: theme.palette.error.main,
+      fontSize: '0.75rem',
+      marginTop: theme.spacing.unit
+    },
+    markup: {
+      width: '100%',
+      marginTop: theme.spacing.unit * 2,
+      marginBottom: theme.spacing.unit * 3
+    },
+    selectContainer: {
+      width: '100%',
+      marginTop: theme.spacing.unit * 2
+    },
+    select: {
+      width: '100%'
+    },
+    title: {
+      fontSize: theme.typography.fontSize * 1.25,
+      fontWeight: 'bold'
+    }
+  };
+})(Design);
+
+exports["default"] = _default;
+//# sourceMappingURL=design.js.map