@pie-element/hotspot 11.0.5-esm.0 → 11.1.0-next.0

package/configure/lib/root.js

@@ -1,422 +1,330 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Root = 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"));
-
+exports.default = exports.Root = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _configUi = require("@pie-lib/config-ui");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
-
-var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
-
-var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
-
+var _editableHtmlTipTap = _interopRequireDefault(require("@pie-lib/editable-html-tip-tap"));
+var _styles = require("@mui/material/styles");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
 var _hotspotPalette = _interopRequireDefault(require("./hotspot-palette"));
-
 var _hotspotContainer = _interopRequireDefault(require("./hotspot-container"));
-
 var _utils = require("./utils");
-
-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,
-    dropdown = _configUi.settings.dropdown;
-
-var Root = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Root, _React$Component);
-
-  var _super = _createSuper(Root);
-
-  function Root() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Root);
-
-    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), "handleColorChange", function (fieldType, color) {
-      var onColorChanged = _this.props.onColorChanged;
-      var cType = "".concat(fieldType, "Color");
+const {
+  Panel,
+  toggle,
+  dropdown
+} = _configUi.settings;
+const DimensionsContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  display: 'flex',
+  marginBottom: theme.spacing(1.5)
+}));
+const FieldContainer = (0, _styles.styled)('div')({
+  flex: 1,
+  width: '90%'
+});
+const PromptContainer = (0, _styles.styled)(_configUi.InputContainer)(({
+  theme
+}) => ({
+  paddingTop: theme.spacing(1),
+  marginTop: theme.spacing(2),
+  marginBottom: theme.spacing(2),
+  width: '100%'
+}));
+const SubHeading = (0, _styles.styled)(_Typography.default)(({
+  theme
+}) => ({
+  marginRight: theme.spacing(1)
+}));
+const FlexContainer = (0, _styles.styled)('div')({
+  display: 'flex',
+  alignItems: 'center'
+});
+const StyledTooltip = (0, _styles.styled)(_Tooltip.default)(({
+  theme
+}) => ({
+  '& .MuiTooltip-tooltip': {
+    fontSize: theme.typography.fontSize - 2,
+    whiteSpace: 'pre',
+    maxWidth: '500px'
+  }
+}));
+const ErrorText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1)
+}));
+class Root extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "handleColorChange", (fieldType, color) => {
+      const {
+        onColorChanged
+      } = this.props;
+      const cType = `${fieldType}Color`;
       onColorChanged(cType, color);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnUpdateImageDimensions", function (value, resizeType) {
-      var _this$props = _this.props,
-          _this$props$model = _this$props.model,
-          dimensions = _this$props$model.dimensions,
-          shapes = _this$props$model.shapes,
-          _this$props$configura = _this$props.configuration.preserveAspectRatio,
-          preserveAspectRatio = _this$props$configura === void 0 ? {} : _this$props$configura,
-          onUpdateImageDimension = _this$props.onUpdateImageDimension,
-          onUpdateShapes = _this$props.onUpdateShapes;
-
-      var nextImageDimensions = _objectSpread(_objectSpread({}, dimensions), {}, (0, _defineProperty2["default"])({}, resizeType, value)); // if preserveAspectRatio.enabled, updateImageDimensions function makes sure aspect ratio is kept
-
-
-      var updatedDimensions = (0, _utils.updateImageDimensions)(dimensions, nextImageDimensions, preserveAspectRatio.enabled, resizeType); // transform shapes map into shapes array
-
-      var shapesArray = (0, _utils.getAllShapes)(shapes); // transform all the shapes to fit the re-sized image
+    (0, _defineProperty2.default)(this, "handleOnUpdateImageDimensions", (value, resizeType) => {
+      const {
+        model: {
+          dimensions,
+          shapes
+        },
+        configuration: {
+          preserveAspectRatio = {}
+        },
+        onUpdateImageDimension,
+        onUpdateShapes
+      } = this.props;
+      const nextImageDimensions = {
+        ...dimensions,
+        [resizeType]: value
+      };
 
-      var updatedShapes = (0, _utils.getUpdatedShapes)(dimensions, updatedDimensions, shapesArray); // transform shapes array back into shapes map
+      // if preserveAspectRatio.enabled, updateImageDimensions function makes sure aspect ratio is kept
+      const updatedDimensions = (0, _utils.updateImageDimensions)(dimensions, nextImageDimensions, preserveAspectRatio.enabled, resizeType);
+      // transform shapes map into shapes array
+      const shapesArray = (0, _utils.getAllShapes)(shapes);
+      // transform all the shapes to fit the re-sized image
+      const updatedShapes = (0, _utils.getUpdatedShapes)(dimensions, updatedDimensions, shapesArray);
+      // transform shapes array back into shapes map
 
       onUpdateShapes((0, _utils.groupShapes)(updatedShapes));
       onUpdateImageDimension(updatedDimensions);
     });
-    return _this;
   }
-
-  (0, _createClass2["default"])(Root, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props2 = this.props,
-          classes = _this$props2.classes,
-          configuration = _this$props2.configuration,
-          model = _this$props2.model,
-          imageSupport = _this$props2.imageSupport,
-          uploadSoundSupport = _this$props2.uploadSoundSupport,
-          onConfigurationChanged = _this$props2.onConfigurationChanged,
-          onImageUpload = _this$props2.onImageUpload,
-          onModelChangedByConfig = _this$props2.onModelChangedByConfig,
-          onPromptChanged = _this$props2.onPromptChanged,
-          onRationaleChanged = _this$props2.onRationaleChanged,
-          onUpdateImageDimension = _this$props2.onUpdateImageDimension,
-          onTeacherInstructionsChanged = _this$props2.onTeacherInstructionsChanged,
-          onUpdateShapes = _this$props2.onUpdateShapes;
-
-      var _ref = configuration || {},
-          _ref$baseInputConfigu = _ref.baseInputConfiguration,
-          baseInputConfiguration = _ref$baseInputConfigu === void 0 ? {} : _ref$baseInputConfigu,
-          _ref$contentDimension = _ref.contentDimensions,
-          contentDimensions = _ref$contentDimension === void 0 ? {} : _ref$contentDimension,
-          _ref$maxImageWidth = _ref.maxImageWidth,
-          maxImageWidth = _ref$maxImageWidth === void 0 ? {} : _ref$maxImageWidth,
-          _ref$maxImageHeight = _ref.maxImageHeight,
-          maxImageHeight = _ref$maxImageHeight === void 0 ? {} : _ref$maxImageHeight,
-          _ref$multipleCorrect = _ref.multipleCorrect,
-          multipleCorrect = _ref$multipleCorrect === void 0 ? {} : _ref$multipleCorrect,
-          _ref$partialScoring = _ref.partialScoring,
-          partialScoring = _ref$partialScoring === void 0 ? {} : _ref$partialScoring,
-          _ref$preserveAspectRa = _ref.preserveAspectRatio,
-          preserveAspectRatio = _ref$preserveAspectRa === void 0 ? {} : _ref$preserveAspectRa,
-          _ref$prompt = _ref.prompt,
-          prompt = _ref$prompt === void 0 ? {} : _ref$prompt,
-          _ref$rationale = _ref.rationale,
-          rationale = _ref$rationale === void 0 ? {} : _ref$rationale,
-          settingsPanelDisabled = _ref.settingsPanelDisabled,
-          _ref$spellCheck = _ref.spellCheck,
-          spellCheck = _ref$spellCheck === void 0 ? {} : _ref$spellCheck,
-          _ref$teacherInstructi = _ref.teacherInstructions,
-          teacherInstructions = _ref$teacherInstructi === void 0 ? {} : _ref$teacherInstructi,
-          _ref$withRubric = _ref.withRubric,
-          withRubric = _ref$withRubric === void 0 ? {} : _ref$withRubric,
-          _ref$mathMlOptions = _ref.mathMlOptions,
-          mathMlOptions = _ref$mathMlOptions === void 0 ? {} : _ref$mathMlOptions,
-          _ref$language = _ref.language,
-          language = _ref$language === void 0 ? {} : _ref$language,
-          _ref$languageChoices = _ref.languageChoices,
-          languageChoices = _ref$languageChoices === void 0 ? {} : _ref$languageChoices;
-
-      var _ref2 = model || {},
-          errors = _ref2.errors,
-          extraCSSRules = _ref2.extraCSSRules,
-          promptEnabled = _ref2.promptEnabled,
-          rationaleEnabled = _ref2.rationaleEnabled,
-          spellCheckEnabled = _ref2.spellCheckEnabled,
-          teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled,
-          toolbarEditorPosition = _ref2.toolbarEditorPosition;
-
-      var _ref3 = errors || {},
-          promptError = _ref3.prompt,
-          rationaleError = _ref3.rationale,
-          shapesError = _ref3.shapes,
-          selectionsError = _ref3.selections,
-          teacherInstructionsError = _ref3.teacherInstructions;
-
-      var validationMessage = (0, _utils.generateValidationMessage)(configuration);
-      var defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
-      var defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
-      var toolbarOpts = {
-        position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
-      };
-      var panelSettings = {
-        multipleCorrect: multipleCorrect.settings && toggle(multipleCorrect.label),
-        partialScoring: partialScoring.settings && toggle(partialScoring.label),
-        promptEnabled: prompt.settings && toggle(prompt.label),
-        'language.enabled': language.settings && toggle(language.label, true),
-        language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options)
-      };
-      var panelProperties = {
-        teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
-        rationaleEnabled: rationale.settings && toggle(rationale.label),
-        spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
-        rubricEnabled: (withRubric === null || withRubric === void 0 ? void 0 : withRubric.settings) && toggle(withRubric === null || withRubric === void 0 ? void 0 : withRubric.label)
-      };
-
-      var getPluginProps = function getPluginProps() {
-        var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-        return _objectSpread(_objectSpread({}, baseInputConfiguration), props);
-      };
-
-      return /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
-        extraCSSRules: extraCSSRules,
-        dimensions: contentDimensions,
-        hideSettings: settingsPanelDisabled,
-        settings: /*#__PURE__*/_react["default"].createElement(Panel, {
-          model: model,
-          onChangeModel: onModelChangedByConfig,
-          configuration: configuration,
-          onChangeConfiguration: onConfigurationChanged,
-          groups: {
-            Settings: panelSettings,
-            Properties: panelProperties
-          }
-        })
-      }, teacherInstructionsEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-        label: teacherInstructions.label,
-        className: classes.promptContainer
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        markup: model.teacherInstructions || '',
-        onChange: onTeacherInstructionsChanged,
-        imageSupport: imageSupport,
-        nonEmpty: false,
-        error: teacherInstructionsError,
-        toolbarOpts: toolbarOpts,
-        pluginProps: getPluginProps(teacherInstructions === null || teacherInstructions === void 0 ? void 0 : 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: classes.errorText
-      }, teacherInstructionsError)), promptEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-        label: prompt.label,
-        className: classes.promptContainer
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        markup: model.prompt || '',
-        onChange: onPromptChanged,
-        imageSupport: imageSupport,
-        nonEmpty: false,
-        error: promptError,
-        toolbarOpts: toolbarOpts,
-        pluginProps: getPluginProps(prompt === null || prompt === void 0 ? void 0 : prompt.inputConfiguration),
-        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("div", {
-        className: classes.flexContainer
-      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-        className: classes.subheading,
-        variant: "subheading"
-      }, "Define Hotspot"), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-        classes: {
-          tooltip: classes.tooltip
-        },
-        disableFocusListener: true,
-        disableTouchListener: true,
-        placement: 'left',
-        title: validationMessage
-      }, /*#__PURE__*/_react["default"].createElement(_Info["default"], {
-        fontSize: 'small',
-        color: 'primary',
-        style: {
-          "float": 'right'
-        }
-      }))), /*#__PURE__*/_react["default"].createElement(_hotspotPalette["default"], {
-        hotspotColor: model.hotspotColor,
-        hotspotList: model.hotspotList,
-        outlineColor: model.outlineColor,
-        outlineList: model.outlineList,
-        onHotspotColorChange: function onHotspotColorChange(color) {
-          return _this2.handleColorChange('hotspot', color);
-        },
-        onOutlineColorChange: function onOutlineColorChange(color) {
-          return _this2.handleColorChange('outline', color);
+  render() {
+    const {
+      configuration,
+      model,
+      imageSupport,
+      uploadSoundSupport,
+      onConfigurationChanged,
+      onImageUpload,
+      onModelChangedByConfig,
+      onPromptChanged,
+      onRationaleChanged,
+      onUpdateImageDimension,
+      onTeacherInstructionsChanged,
+      onUpdateShapes
+    } = this.props;
+    const {
+      baseInputConfiguration = {},
+      contentDimensions = {},
+      maxImageWidth = {},
+      maxImageHeight = {},
+      multipleCorrect = {},
+      partialScoring = {},
+      preserveAspectRatio = {},
+      prompt = {},
+      rationale = {},
+      settingsPanelDisabled,
+      spellCheck = {},
+      teacherInstructions = {},
+      withRubric = {},
+      mathMlOptions = {},
+      language = {},
+      languageChoices = {}
+    } = configuration || {};
+    const {
+      errors,
+      extraCSSRules,
+      promptEnabled,
+      rationaleEnabled,
+      spellCheckEnabled,
+      teacherInstructionsEnabled,
+      toolbarEditorPosition
+    } = model || {};
+    const {
+      prompt: promptError,
+      rationale: rationaleError,
+      shapes: shapesError,
+      selections: selectionsError,
+      teacherInstructions: teacherInstructionsError
+    } = errors || {};
+    const validationMessage = (0, _utils.generateValidationMessage)(configuration);
+    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+    const toolbarOpts = {
+      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
+    };
+    const panelSettings = {
+      multipleCorrect: multipleCorrect.settings && toggle(multipleCorrect.label),
+      partialScoring: partialScoring.settings && toggle(partialScoring.label),
+      promptEnabled: prompt.settings && toggle(prompt.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),
+      rationaleEnabled: rationale.settings && toggle(rationale.label),
+      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+      rubricEnabled: withRubric?.settings && toggle(withRubric?.label)
+    };
+    const getPluginProps = (props = {}) => ({
+      ...baseInputConfiguration,
+      ...props
+    });
+    return /*#__PURE__*/_react.default.createElement(_configUi.layout.ConfigLayout, {
+      extraCSSRules: extraCSSRules,
+      dimensions: contentDimensions,
+      hideSettings: settingsPanelDisabled,
+      settings: /*#__PURE__*/_react.default.createElement(Panel, {
+        model: model,
+        onChangeModel: onModelChangedByConfig,
+        configuration: configuration,
+        onChangeConfiguration: onConfigurationChanged,
+        groups: {
+          Settings: panelSettings,
+          Properties: panelProperties
         }
-      }), /*#__PURE__*/_react["default"].createElement(_hotspotContainer["default"], {
-        dimensions: model.dimensions,
-        imageUrl: model.imageUrl,
-        multipleCorrect: model.multipleCorrect,
-        hasErrors: !!shapesError || !!selectionsError,
-        hotspotColor: model.hotspotColor,
-        outlineColor: model.outlineColor,
-        selectedHotspotColor: model.selectedHotspotColor,
-        hoverOutlineColor: model.hoverOutlineColor,
-        onUpdateImageDimension: onUpdateImageDimension,
-        onUpdateShapes: onUpdateShapes,
-        onImageUpload: onImageUpload,
-        shapes: model.shapes,
-        strokeWidth: model.strokeWidth,
-        preserveAspectRatioEnabled: preserveAspectRatio.enabled,
-        insertImage: imageSupport && imageSupport.add
-      }), shapesError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, shapesError), selectionsError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, selectionsError), model.imageUrl && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-        variant: "subheading"
-      }, "Image Dimensions"), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.dimensions
-      }, /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextField, {
-        key: "hotspot-manual-width",
-        label: "Width",
-        value: model.dimensions.width,
-        min: 0,
-        onChange: function onChange(e, value) {
-          return _this2.handleOnUpdateImageDimensions(value, 'width');
-        },
-        showErrorWhenOutsideRange: true,
-        className: classes.field
-      }), /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextField, {
-        key: "hotspot-manual-height",
-        label: "Height",
-        value: model.dimensions.height,
-        min: 0,
-        onChange: function onChange(e, value) {
-          return _this2.handleOnUpdateImageDimensions(value, 'height');
-        },
-        showErrorWhenOutsideRange: true,
-        className: classes.field
-      }))), rationaleEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-        label: rationale.label,
-        className: classes.promptContainer
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        markup: model.rationale || '',
-        onChange: onRationaleChanged,
-        imageSupport: imageSupport,
-        error: rationaleError,
-        toolbarOpts: toolbarOpts,
-        pluginProps: getPluginProps(rationale === null || rationale === void 0 ? void 0 : 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("div", {
-        className: classes.errorText
-      }, rationaleError)));
-    }
-  }]);
-  return Root;
-}(_react["default"].Component);
-
+      })
+    }, teacherInstructionsEnabled && /*#__PURE__*/_react.default.createElement(PromptContainer, {
+      label: teacherInstructions.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
+      markup: model.teacherInstructions || '',
+      onChange: onTeacherInstructionsChanged,
+      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(ErrorText, null, teacherInstructionsError)), promptEnabled && /*#__PURE__*/_react.default.createElement(PromptContainer, {
+      label: prompt.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
+      markup: model.prompt || '',
+      onChange: onPromptChanged,
+      imageSupport: imageSupport,
+      nonEmpty: false,
+      error: promptError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(prompt?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: defaultImageMaxWidth,
+      maxImageHeight: defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), promptError && /*#__PURE__*/_react.default.createElement(ErrorText, null, promptError)), /*#__PURE__*/_react.default.createElement(FlexContainer, null, /*#__PURE__*/_react.default.createElement(SubHeading, {
+      variant: "h6"
+    }, "Define Hotspot"), /*#__PURE__*/_react.default.createElement(StyledTooltip, {
+      disableFocusListener: true,
+      disableTouchListener: true,
+      placement: 'left',
+      title: validationMessage
+    }, /*#__PURE__*/_react.default.createElement(_Info.default, {
+      fontSize: 'small',
+      color: 'primary',
+      style: {
+        float: 'right'
+      }
+    }))), /*#__PURE__*/_react.default.createElement(_hotspotPalette.default, {
+      hotspotColor: model.hotspotColor,
+      hotspotList: model.hotspotList,
+      outlineColor: model.outlineColor,
+      outlineList: model.outlineList,
+      onHotspotColorChange: color => this.handleColorChange('hotspot', color),
+      onOutlineColorChange: color => this.handleColorChange('outline', color)
+    }), /*#__PURE__*/_react.default.createElement(_hotspotContainer.default, {
+      dimensions: model.dimensions,
+      imageUrl: model.imageUrl,
+      multipleCorrect: model.multipleCorrect,
+      hasErrors: !!shapesError || !!selectionsError,
+      hotspotColor: model.hotspotColor,
+      outlineColor: model.outlineColor,
+      selectedHotspotColor: model.selectedHotspotColor,
+      hoverOutlineColor: model.hoverOutlineColor,
+      onUpdateImageDimension: onUpdateImageDimension,
+      onUpdateShapes: onUpdateShapes,
+      onImageUpload: onImageUpload,
+      shapes: model.shapes,
+      strokeWidth: model.strokeWidth,
+      preserveAspectRatioEnabled: preserveAspectRatio.enabled,
+      insertImage: imageSupport && imageSupport.add
+    }), shapesError && /*#__PURE__*/_react.default.createElement(ErrorText, null, shapesError), selectionsError && /*#__PURE__*/_react.default.createElement(ErrorText, null, selectionsError), model.imageUrl && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      variant: "h6"
+    }, "Image Dimensions"), /*#__PURE__*/_react.default.createElement(DimensionsContainer, null, /*#__PURE__*/_react.default.createElement(FieldContainer, null, /*#__PURE__*/_react.default.createElement(_configUi.NumberTextField, {
+      key: "hotspot-manual-width",
+      label: "Width",
+      value: model.dimensions.width,
+      min: 0,
+      onChange: (e, value) => this.handleOnUpdateImageDimensions(value, 'width'),
+      showErrorWhenOutsideRange: true
+    })), /*#__PURE__*/_react.default.createElement(FieldContainer, null, /*#__PURE__*/_react.default.createElement(_configUi.NumberTextField, {
+      key: "hotspot-manual-height",
+      label: "Height",
+      value: model.dimensions.height,
+      min: 0,
+      onChange: (e, value) => this.handleOnUpdateImageDimensions(value, 'height'),
+      showErrorWhenOutsideRange: true
+    })))), rationaleEnabled && /*#__PURE__*/_react.default.createElement(PromptContainer, {
+      label: rationale.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
+      markup: model.rationale || '',
+      onChange: onRationaleChanged,
+      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)));
+  }
+}
 exports.Root = Root;
-
-var styles = function styles(theme) {
-  return {
-    dimensions: {
-      display: 'flex',
-      marginBottom: theme.spacing.unit * 1.5
-    },
-    field: {
-      flex: 1,
-      width: '90%'
-    },
-    promptContainer: {
-      paddingTop: theme.spacing.unit * 2,
-      marginBottom: theme.spacing.unit * 2,
-      width: '100%'
-    },
-    subheading: {
-      marginRight: theme.spacing.unit
-    },
-    flexContainer: {
-      display: 'flex',
-      alignItems: 'center'
-    },
-    tooltip: {
-      fontSize: theme.typography.fontSize - 2,
-      whiteSpace: 'pre',
-      maxWidth: '500px'
-    },
-    errorText: {
-      fontSize: theme.typography.fontSize - 2,
-      color: theme.palette.error.main,
-      paddingTop: theme.spacing.unit
-    }
-  };
-};
-
 Root.propTypes = {
-  classes: _propTypes["default"].object.isRequired,
-  configuration: _propTypes["default"].object,
-  model: _propTypes["default"].object.isRequired,
-  imageSupport: _propTypes["default"].shape({
-    add: _propTypes["default"].func,
-    "delete": _propTypes["default"].func
+  configuration: _propTypes.default.object,
+  model: _propTypes.default.object.isRequired,
+  imageSupport: _propTypes.default.shape({
+    add: _propTypes.default.func,
+    delete: _propTypes.default.func
   }),
-  uploadSoundSupport: _propTypes["default"].shape({
-    add: _propTypes["default"].func,
-    "delete": _propTypes["default"].func
+  uploadSoundSupport: _propTypes.default.shape({
+    add: _propTypes.default.func,
+    delete: _propTypes.default.func
   }),
-  onImageUpload: _propTypes["default"].func.isRequired,
-  onColorChanged: _propTypes["default"].func.isRequired,
-  onPromptChanged: _propTypes["default"].func.isRequired,
-  onUpdateImageDimension: _propTypes["default"].func.isRequired,
-  onUpdateShapes: _propTypes["default"].func.isRequired,
-  onModelChangedByConfig: _propTypes["default"].func.isRequired,
-  onRationaleChanged: _propTypes["default"].func.isRequired,
-  onConfigurationChanged: _propTypes["default"].func.isRequired,
-  onTeacherInstructionsChanged: _propTypes["default"].func.isRequired
+  onImageUpload: _propTypes.default.func.isRequired,
+  onColorChanged: _propTypes.default.func.isRequired,
+  onPromptChanged: _propTypes.default.func.isRequired,
+  onUpdateImageDimension: _propTypes.default.func.isRequired,
+  onUpdateShapes: _propTypes.default.func.isRequired,
+  onModelChangedByConfig: _propTypes.default.func.isRequired,
+  onRationaleChanged: _propTypes.default.func.isRequired,
+  onConfigurationChanged: _propTypes.default.func.isRequired,
+  onTeacherInstructionsChanged: _propTypes.default.func.isRequired
 };
-
-var _default = (0, _styles.withStyles)(styles)(Root);
-
-exports["default"] = _default;
+var _default = exports.default = Root;
 //# sourceMappingURL=root.js.map