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

package/configure/lib/configure.js

@@ -1,500 +1,410 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Config = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-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.Config = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _utils = require("./utils");
-
 var _react = _interopRequireDefault(require("react"));
-
-var _styles = require("@material-ui/core/styles");
-
+var _styles = require("@mui/material/styles");
 var _configUi = require("@pie-lib/config-ui");
-
-var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
-
-var _drag = require("@pie-lib/drag");
-
+var _editableHtmlTipTap = _interopRequireDefault(require("@pie-lib/editable-html-tip-tap"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _debug = _interopRequireDefault(require("debug"));
-
 var _generalConfigBlock = _interopRequireDefault(require("./general-config-block"));
-
 var _answerConfigBlock = _interopRequireDefault(require("./answer-config-block"));
-
-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 log = (0, _debug["default"])('@pie-element:match:configure');
-var Panel = _configUi.settings.Panel,
-    toggle = _configUi.settings.toggle,
-    radio = _configUi.settings.radio,
-    dropdown = _configUi.settings.dropdown;
-
-var styles = function styles(theme) {
-  return {
-    promptHolder: {
-      width: '100%',
-      paddingTop: theme.spacing.unit * 2,
-      marginBottom: theme.spacing.unit * 2
-    },
-    errorText: {
-      fontSize: theme.typography.fontSize - 2,
-      color: theme.palette.error.main,
-      paddingTop: theme.spacing.unit
-    }
-  };
-};
-
-var Configure = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Configure, _React$Component);
-
-  var _super = _createSuper(Configure);
-
-  function Configure(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Configure);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onTabChange", function (event, value) {
-      _this.setState({
+const log = (0, _debug.default)('@pie-element:match:configure');
+const {
+  Panel,
+  toggle,
+  radio,
+  dropdown
+} = _configUi.settings;
+const MainLayout = (0, _styles.styled)('div')(() => ({
+  '& .promptHolder': {
+    width: '100%'
+  }
+}));
+const PromptHolder = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  width: '100%',
+  paddingTop: theme.spacing(2),
+  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 Configure extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "onTabChange", (event, value) => {
+      this.setState({
         activeTab: value
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChangeTabIndex", function (index) {
-      _this.setState({
+    (0, _defineProperty2.default)(this, "onChangeTabIndex", index => {
+      this.setState({
         activeTab: index
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (model) {
-      _this.props.onModelChanged(model);
+    (0, _defineProperty2.default)(this, "onChange", model => {
+      this.props.onModelChanged(model);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onFeedbackChange", function (feedback) {
-      var _this$props = _this.props,
-          model = _this$props.model,
-          onModelChanged = _this$props.onModelChanged;
+    (0, _defineProperty2.default)(this, "onFeedbackChange", feedback => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
       model.feedback = feedback;
       onModelChanged(model);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onDeleteRow", function (rowIndex) {
-      var model = _this.props.model;
-
-      var newModel = _objectSpread({}, model);
-
+    (0, _defineProperty2.default)(this, "onDeleteRow", rowIndex => {
+      const {
+        model
+      } = this.props;
+      const newModel = {
+        ...model
+      };
       newModel.rows.splice(rowIndex, 1);
-
-      _this.onChange(newModel);
+      this.onChange(newModel);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onAddRow", function () {
-      var _this$props2 = _this.props,
-          model = _this$props2.model,
-          configuration = _this$props2.configuration;
-
-      var newModel = _objectSpread({}, model);
-
-      var _ref = configuration || {},
-          maxQuestions = _ref.maxQuestions;
-
+    (0, _defineProperty2.default)(this, "onAddRow", () => {
+      const {
+        model,
+        configuration
+      } = this.props;
+      const newModel = {
+        ...model
+      };
+      const {
+        maxQuestions
+      } = configuration || {};
       if (maxQuestions && (newModel.rows || []).length >= maxQuestions) {
-        _this.setState({
+        this.setState({
           dialog: {
             open: true,
-            text: "There can be maximum ".concat(maxQuestions, " question row") + (maxQuestions > 1 ? 's' : '') + '.'
+            text: `There can be maximum ${maxQuestions} question row` + (maxQuestions > 1 ? 's' : '') + '.'
           }
         });
-
         return;
       }
-
       newModel.rows = newModel.rows.concat({
-        id: _this.rowIdCounter + 1,
-        title: "Question Text ".concat((newModel.rows || []).length + 1),
+        id: this.rowIdCounter + 1,
+        title: `Question Text ${(newModel.rows || []).length + 1}`,
         values: new Array(model.layout - 1).fill(false)
       });
-      _this.rowIdCounter += 1;
-
-      _this.onChange(newModel);
+      this.rowIdCounter += 1;
+      this.onChange(newModel);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onLayoutChange", function (newLayout) {
-      var model = _this.props.model;
-      var oldLayout = model.layout;
-
-      var newModel = _objectSpread({}, model);
-
+    (0, _defineProperty2.default)(this, "onLayoutChange", newLayout => {
+      const {
+        model
+      } = this.props;
+      const oldLayout = model.layout;
+      const newModel = {
+        ...model
+      };
       if (newLayout > oldLayout) {
-        for (var i = 0; i < newLayout - oldLayout; i++) {
-          newModel.headers.push("Column ".concat(newModel.headers.length + 1));
+        for (let i = 0; i < newLayout - oldLayout; i++) {
+          newModel.headers.push(`Column ${newModel.headers.length + 1}`);
         }
-
-        newModel.rows.forEach(function (row) {
-          for (var _i = 0; _i < newLayout - oldLayout; _i++) {
+        newModel.rows.forEach(row => {
+          for (let i = 0; i < newLayout - oldLayout; i++) {
             row.values.push(false);
           }
         });
       } else if (newLayout < oldLayout) {
         newModel.headers.splice(newLayout);
-        newModel.rows.forEach(function (row) {
+        newModel.rows.forEach(row => {
           row.values.splice(newLayout - 1);
         });
       }
-
       newModel.layout = newLayout;
-
-      _this.onChange(newModel);
+      this.onChange(newModel);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onResponseTypeChange", function (newChoiceMode) {
-      var model = _this.props.model;
-
-      var newModel = _objectSpread({}, model); // if we're switching to radio and we have more than one true, reset
-
+    (0, _defineProperty2.default)(this, "onResponseTypeChange", newChoiceMode => {
+      const {
+        model
+      } = this.props;
+      const newModel = {
+        ...model
+      };
 
+      // if we're switching to radio and we have more than one true, reset
       if (newChoiceMode === 'radio') {
-        newModel.rows.forEach(function (row) {
-          var trueCount = row.values.reduce(function (total, current) {
-            return current === true ? total + 1 : total;
-          });
-
+        newModel.rows.forEach(row => {
+          const trueCount = row.values.reduce((total, current) => current === true ? total + 1 : total);
           if (trueCount > 1) {
             row.values = new Array(model.layout - 1).fill(false);
           }
         });
       }
-
       newModel.choiceMode = newChoiceMode;
-
-      _this.onChange(newModel);
+      this.onChange(newModel);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onPartialScoringChange", function (partialScoring) {
-      _this.props.model.partialScoring = partialScoring;
-
-      _this.props.onModelChanged(_this.props.model);
+    (0, _defineProperty2.default)(this, "onPartialScoringChange", partialScoring => {
+      this.props.model.partialScoring = partialScoring;
+      this.props.onModelChanged(this.props.model);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onPromptChanged", function (prompt) {
-      _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
-        prompt: prompt
-      }));
+    (0, _defineProperty2.default)(this, "onPromptChanged", prompt => {
+      this.props.onModelChanged({
+        ...this.props.model,
+        prompt
+      });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onTeacherInstructionsChanged", function (teacherInstructions) {
-      _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
-        teacherInstructions: teacherInstructions
-      }));
+    (0, _defineProperty2.default)(this, "onTeacherInstructionsChanged", teacherInstructions => {
+      this.props.onModelChanged({
+        ...this.props.model,
+        teacherInstructions
+      });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onRationaleChanged", function (rationale) {
-      _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
-        rationale: rationale
-      }));
+    (0, _defineProperty2.default)(this, "onRationaleChanged", rationale => {
+      this.props.onModelChanged({
+        ...this.props.model,
+        rationale
+      });
     });
-    var maxId = 0;
-
+    let maxId = 0;
     if (props.model.rows && props.model.rows.length > 0) {
-      maxId = Math.max.apply(Math, (0, _toConsumableArray2["default"])(props.model.rows.map(function (row) {
-        return row.id;
-      })));
+      maxId = Math.max(...props.model.rows.map(row => row.id));
     }
-
-    _this.rowIdCounter = maxId + 1;
-    _this.state = {
+    this.rowIdCounter = maxId + 1;
+    this.state = {
       activeTab: 0,
       dialog: {
         open: false,
         text: ''
       }
     };
-    return _this;
   }
-
-  (0, _createClass2["default"])(Configure, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$validateRowsID = this.validateRowsID(this.props.model.rows),
-          updatedRows = _this$validateRowsID.updatedRows,
-          wasChanged = _this$validateRowsID.wasChanged;
-
-      if (wasChanged) {
-        var newModel = _objectSpread(_objectSpread({}, this.props.model), {}, {
-          rows: updatedRows
-        });
-
-        this.props.onModelChanged(newModel);
-      }
-    }
-  }, {
-    key: "validateRowsID",
-    value: function validateRowsID(rows) {
-      var wasChanged = false;
-      var updatedRows = (rows || []).map(function (row, index) {
-        if (row.id !== index + 1) {
-          wasChanged = true;
-          return _objectSpread(_objectSpread({}, row), {}, {
-            id: index + 1
-          });
-        }
-
-        return row;
-      });
-      return {
-        updatedRows: updatedRows,
-        wasChanged: wasChanged
+  componentDidMount() {
+    const {
+      updatedRows,
+      wasChanged
+    } = this.validateRowsID(this.props.model.rows);
+    if (wasChanged) {
+      const newModel = {
+        ...this.props.model,
+        rows: updatedRows
       };
+      this.props.onModelChanged(newModel);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props3 = this.props,
-          classes = _this$props3.classes,
-          model = _this$props3.model,
-          imageSupport = _this$props3.imageSupport,
-          onModelChanged = _this$props3.onModelChanged,
-          configuration = _this$props3.configuration,
-          onConfigurationChanged = _this$props3.onConfigurationChanged,
-          uploadSoundSupport = _this$props3.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$feedback = _ref2.feedback,
-          feedback = _ref2$feedback === void 0 ? {} : _ref2$feedback,
-          _ref2$lockChoiceOrder = _ref2.lockChoiceOrder,
-          lockChoiceOrder = _ref2$lockChoiceOrder === void 0 ? {} : _ref2$lockChoiceOrder,
-          _ref2$maxImageWidth = _ref2.maxImageWidth,
-          maxImageWidth = _ref2$maxImageWidth === void 0 ? {} : _ref2$maxImageWidth,
-          _ref2$maxImageHeight = _ref2.maxImageHeight,
-          maxImageHeight = _ref2$maxImageHeight === void 0 ? {} : _ref2$maxImageHeight,
-          _ref2$partialScoring = _ref2.partialScoring,
-          partialScoring = _ref2$partialScoring === void 0 ? {} : _ref2$partialScoring,
-          _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$scoringType = _ref2.scoringType,
-          scoringType = _ref2$scoringType === void 0 ? {} : _ref2$scoringType,
-          _ref2$spellCheck = _ref2.spellCheck,
-          spellCheck = _ref2$spellCheck === void 0 ? {} : _ref2$spellCheck,
-          _ref2$studentInstruct = _ref2.studentInstructions,
-          studentInstructions = _ref2$studentInstruct === void 0 ? {} : _ref2$studentInstruct,
-          _ref2$teacherInstruct = _ref2.teacherInstructions,
-          teacherInstructions = _ref2$teacherInstruct === void 0 ? {} : _ref2$teacherInstruct,
-          _ref2$withRubric = _ref2.withRubric,
-          withRubric = _ref2$withRubric === void 0 ? {} : _ref2$withRubric,
-          _ref2$language = _ref2.language,
-          language = _ref2$language === void 0 ? {} : _ref2$language,
-          _ref2$languageChoices = _ref2.languageChoices,
-          languageChoices = _ref2$languageChoices === void 0 ? {} : _ref2$languageChoices;
-
-      var _ref3 = model || {},
-          errors = _ref3.errors,
-          extraCSSRules = _ref3.extraCSSRules,
-          feedbackEnabled = _ref3.feedbackEnabled,
-          promptEnabled = _ref3.promptEnabled,
-          rationaleEnabled = _ref3.rationaleEnabled,
-          spellCheckEnabled = _ref3.spellCheckEnabled,
-          teacherInstructionsEnabled = _ref3.teacherInstructionsEnabled,
-          toolbarEditorPosition = _ref3.toolbarEditorPosition;
-
-      var _ref4 = errors || {},
-          promptError = _ref4.prompt,
-          rationaleError = _ref4.rationale,
-          teacherInstructionsError = _ref4.teacherInstructions;
-
-      var dialog = this.state.dialog;
-      var toolbarOpts = {
-        position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
-      };
-      var defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
-      var defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
-      var panelSettings = {
-        partialScoring: partialScoring.settings && toggle(partialScoring.label),
-        lockChoiceOrder: lockChoiceOrder.settings && toggle(lockChoiceOrder.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)
-      };
-      var panelProperties = {
-        teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
-        studentInstructionsEnabled: studentInstructions.settings && toggle(studentInstructions.label),
-        promptEnabled: prompt.settings && toggle(prompt.label),
-        rationaleEnabled: rationale.settings && toggle(rationale.label),
-        spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
-        scoringType: scoringType.settings && radio(scoringType.label, ['auto', 'rubric']),
-        rubricEnabled: (withRubric === null || withRubric === void 0 ? void 0 : withRubric.settings) && toggle(withRubric === null || withRubric === void 0 ? void 0 : withRubric.label)
-      };
-      log('[render] model', model);
-      return /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
-        extraCSSRules: extraCSSRules,
-        dimensions: contentDimensions,
-        hideSettings: settingsPanelDisabled,
-        settings: /*#__PURE__*/_react["default"].createElement(Panel, {
-          model: model,
-          configuration: configuration,
-          onChangeModel: function onChangeModel(model) {
-            return onModelChanged(model);
-          },
-          onChangeConfiguration: function onChangeConfiguration(config) {
-            return onConfigurationChanged(config);
-          },
-          groups: {
-            Settings: panelSettings,
-            Properties: panelProperties
-          }
-        })
-      }, teacherInstructionsEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-        label: teacherInstructions.label,
-        className: classes.promptHolder
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        className: classes.prompt,
-        markup: model.teacherInstructions || '',
-        onChange: this.onTeacherInstructionsChanged,
-        imageSupport: imageSupport,
-        error: teacherInstructionsError,
-        nonEmpty: false,
-        toolbarOpts: toolbarOpts,
-        pluginProps: (0, _utils.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'
-        }]
-      }), 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["default"], {
-        className: classes.prompt,
-        markup: model.prompt,
-        onChange: this.onPromptChanged,
-        imageSupport: imageSupport,
-        error: promptError,
-        nonEmpty: false,
-        disableUnderline: true,
-        toolbarOpts: toolbarOpts,
-        pluginProps: (0, _utils.getPluginProps)(prompt === null || prompt === void 0 ? void 0 : prompt.inputConfiguration, baseInputConfiguration),
-        spellCheck: spellCheckEnabled,
-        maxImageWidth: maxImageWidth && maxImageWidth.prompt,
-        maxImageHeight: maxImageHeight && maxImageHeight.prompt,
-        uploadSoundSupport: uploadSoundSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }]
-      }), promptError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, promptError)), /*#__PURE__*/_react["default"].createElement(_generalConfigBlock["default"], {
-        model: model,
-        configuration: configuration,
-        onResponseTypeChange: this.onResponseTypeChange,
-        onLayoutChange: this.onLayoutChange
-      }), /*#__PURE__*/_react["default"].createElement(_answerConfigBlock["default"], {
+  }
+  validateRowsID(rows) {
+    let wasChanged = false;
+    const updatedRows = (rows || []).map((row, index) => {
+      if (row.id !== index + 1) {
+        wasChanged = true;
+        return {
+          ...row,
+          id: index + 1
+        };
+      }
+      return row;
+    });
+    return {
+      updatedRows,
+      wasChanged
+    };
+  }
+  render() {
+    const {
+      model,
+      imageSupport,
+      onModelChanged,
+      configuration,
+      onConfigurationChanged,
+      uploadSoundSupport
+    } = this.props;
+    const {
+      baseInputConfiguration = {},
+      contentDimensions = {},
+      feedback = {},
+      lockChoiceOrder = {},
+      maxImageWidth = {},
+      maxImageHeight = {},
+      partialScoring = {},
+      prompt = {},
+      rationale = {},
+      settingsPanelDisabled,
+      scoringType = {},
+      spellCheck = {},
+      studentInstructions = {},
+      teacherInstructions = {},
+      withRubric = {},
+      language = {},
+      languageChoices = {}
+    } = configuration || {};
+    const {
+      errors,
+      extraCSSRules,
+      feedbackEnabled,
+      promptEnabled,
+      rationaleEnabled,
+      spellCheckEnabled,
+      teacherInstructionsEnabled,
+      toolbarEditorPosition
+    } = model || {};
+    const {
+      prompt: promptError,
+      rationale: rationaleError,
+      teacherInstructions: teacherInstructionsError
+    } = errors || {};
+    const {
+      dialog
+    } = this.state;
+    const toolbarOpts = {
+      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
+    };
+    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+    const panelSettings = {
+      partialScoring: partialScoring.settings && toggle(partialScoring.label),
+      lockChoiceOrder: lockChoiceOrder.settings && toggle(lockChoiceOrder.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),
+      promptEnabled: prompt.settings && toggle(prompt.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)
+    };
+    log('[render] model', model);
+    return /*#__PURE__*/_react.default.createElement(MainLayout, null, /*#__PURE__*/_react.default.createElement(_configUi.layout.ConfigLayout, {
+      extraCSSRules: extraCSSRules,
+      dimensions: contentDimensions,
+      hideSettings: settingsPanelDisabled,
+      settings: /*#__PURE__*/_react.default.createElement(Panel, {
         model: model,
         configuration: configuration,
-        imageSupport: imageSupport,
-        onChange: this.onChange,
-        onAddRow: this.onAddRow,
-        onDeleteRow: this.onDeleteRow,
-        toolbarOpts: toolbarOpts,
-        spellCheck: spellCheckEnabled,
-        uploadSoundSupport: uploadSoundSupport
-      }), rationaleEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-        label: rationale.label,
-        className: classes.promptHolder
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        className: classes.prompt,
-        markup: model.rationale || '',
-        onChange: this.onRationaleChanged,
-        imageSupport: imageSupport,
-        error: rationaleError,
-        toolbarOpts: toolbarOpts,
-        pluginProps: (0, _utils.getPluginProps)(rationale === null || rationale === void 0 ? void 0 : rationale.inputConfiguration, baseInputConfiguration),
-        spellCheck: spellCheckEnabled,
-        maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
-        maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
-        uploadSoundSupport: uploadSoundSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }]
-      }), rationaleError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, rationaleError)), feedbackEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.FeedbackConfig, {
-        feedback: model.feedback,
-        onChange: this.onFeedbackChange,
-        toolbarOpts: toolbarOpts
-      }), /*#__PURE__*/_react["default"].createElement(_configUi.AlertDialog, {
-        open: dialog.open,
-        title: "Warning",
-        text: dialog.text,
-        onConfirm: function onConfirm() {
-          return _this2.setState({
-            dialog: {
-              open: false
-            }
-          });
+        onChangeModel: model => onModelChanged(model),
+        onChangeConfiguration: config => onConfigurationChanged(config),
+        groups: {
+          Settings: panelSettings,
+          Properties: panelProperties
         }
-      }));
-    }
-  }]);
-  return Configure;
-}(_react["default"].Component);
-
-(0, _defineProperty2["default"])(Configure, "propTypes", {
-  onModelChanged: _propTypes["default"].func,
-  onConfigurationChanged: _propTypes["default"].func,
-  classes: _propTypes["default"].object,
-  model: _propTypes["default"].object.isRequired,
-  configuration: _propTypes["default"].object.isRequired,
-  imageSupport: _propTypes["default"].shape({
-    add: _propTypes["default"].func.isRequired,
-    "delete": _propTypes["default"].func.isRequired
+      })
+    }, teacherInstructionsEnabled && /*#__PURE__*/_react.default.createElement(_configUi.InputContainer, {
+      label: teacherInstructions.label,
+      className: "promptHolder"
+    }, /*#__PURE__*/_react.default.createElement(PromptHolder, null, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
+      className: "prompt",
+      markup: model.teacherInstructions || '',
+      onChange: this.onTeacherInstructionsChanged,
+      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'
+      }]
+    }), teacherInstructionsError && /*#__PURE__*/_react.default.createElement(ErrorText, null, teacherInstructionsError))), promptEnabled && /*#__PURE__*/_react.default.createElement(_configUi.InputContainer, {
+      label: prompt.label,
+      className: "promptHolder"
+    }, /*#__PURE__*/_react.default.createElement(PromptHolder, null, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
+      className: "prompt",
+      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'
+      }]
+    }), promptError && /*#__PURE__*/_react.default.createElement(ErrorText, null, promptError))), /*#__PURE__*/_react.default.createElement(_generalConfigBlock.default, {
+      model: model,
+      configuration: configuration,
+      onResponseTypeChange: this.onResponseTypeChange,
+      onLayoutChange: this.onLayoutChange
+    }), /*#__PURE__*/_react.default.createElement(_answerConfigBlock.default, {
+      model: model,
+      configuration: configuration,
+      imageSupport: imageSupport,
+      onChange: this.onChange,
+      onAddRow: this.onAddRow,
+      onDeleteRow: this.onDeleteRow,
+      toolbarOpts: toolbarOpts,
+      spellCheck: spellCheckEnabled,
+      uploadSoundSupport: uploadSoundSupport
+    }), rationaleEnabled && /*#__PURE__*/_react.default.createElement(_configUi.InputContainer, {
+      label: rationale.label,
+      className: "promptHolder"
+    }, /*#__PURE__*/_react.default.createElement(PromptHolder, null, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
+      className: "prompt",
+      markup: model.rationale || '',
+      onChange: this.onRationaleChanged,
+      imageSupport: imageSupport,
+      error: rationaleError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: (0, _utils.getPluginProps)(rationale?.inputConfiguration, baseInputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }]
+    }), rationaleError && /*#__PURE__*/_react.default.createElement(ErrorText, null, rationaleError))), feedbackEnabled && /*#__PURE__*/_react.default.createElement(_configUi.FeedbackConfig, {
+      feedback: model.feedback,
+      onChange: this.onFeedbackChange,
+      toolbarOpts: toolbarOpts
+    }), /*#__PURE__*/_react.default.createElement(_configUi.AlertDialog, {
+      open: dialog.open,
+      title: "Warning",
+      text: dialog.text,
+      onConfirm: () => this.setState({
+        dialog: {
+          open: false
+        }
+      })
+    })));
+  }
+}
+(0, _defineProperty2.default)(Configure, "propTypes", {
+  onModelChanged: _propTypes.default.func,
+  onConfigurationChanged: _propTypes.default.func,
+  model: _propTypes.default.object.isRequired,
+  configuration: _propTypes.default.object.isRequired,
+  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
+  uploadSoundSupport: _propTypes.default.shape({
+    add: _propTypes.default.func.isRequired,
+    delete: _propTypes.default.func.isRequired
   })
 });
-(0, _defineProperty2["default"])(Configure, "defaultProps", {
-  classes: {}
-});
-var Config = Configure;
-exports.Config = Config;
-
-var _default = (0, _drag.withDragContext)((0, _styles.withStyles)(styles)(Configure));
-
-exports["default"] = _default;
+(0, _defineProperty2.default)(Configure, "defaultProps", {});
+const Config = exports.Config = Configure;
+var _default = exports.default = Configure;
 //# sourceMappingURL=configure.js.map