@pie-element/fraction-model 4.3.4-next.3 → 5.0.0-beta.1

package/configure/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["FractionModelConfigure","pieAuthors","document","querySelectorAll","hasPlayerAsParent","Array","from","some","author","contains","_modelCopy","_model","o","dispatchEvent","ModelUpdatedEvent","render","createDefaultModel","_configuration","defaultValues","configuration","m","c","newConfiguration","resetModelAfterConfigurationIsSet","language","enabled","languageChoices","options","length","value","settings","find","option","push","label","handler","InsertImageEvent","src","done","DeleteImageEvent","InsertSoundEvent","DeleteSoundEvent","el","React","createElement","Main","classes","model","onConfigurationChanged","onChange","imageSupport","add","insertImage","bind","onDeleteImage","uploadSoundSupport","insertSound","onDeleteSound","ReactDOM","HTMLElement","normalizedModel"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Main from './main';\nimport {\n  ModelUpdatedEvent,\n  DeleteImageEvent,\n  InsertImageEvent,\n  InsertSoundEvent,\n  DeleteSoundEvent,\n} from '@pie-framework/pie-configure-events';\nimport defaultValues from './defaults';\n\nexport default class FractionModelConfigure extends HTMLElement {\n  /**\n   * This function makes sure you set the default values on the model\n   * @param model\n   * @returns model\n   */\n  static createDefaultModel = (model = {}) => {\n    const c = defaultValues.configuration;\n    let language = model.language || '';\n\n    if (!language && c.language && c.language.enabled) {\n      if (c.languageChoices?.options?.length) {\n        language = c.languageChoices.options[0].value;\n      }\n    }\n\n    const normalizedModel = {\n      ...defaultValues.model,\n      ...model,\n      language,\n    };\n\n    return normalizedModel;\n  };\n\n  constructor() {\n    super();\n    this._model = FractionModelConfigure.createDefaultModel();\n    this._configuration = defaultValues.configuration;\n  }\n\n  set model(m) {\n    this._model = FractionModelConfigure.createDefaultModel(m);\n    this.render();\n  }\n\n  set configuration(c) {\n    const newConfiguration = {\n      ...defaultValues.configuration,\n      ...c,\n    };\n    this._configuration = newConfiguration;\n\n    this.resetModelAfterConfigurationIsSet();\n\n    // if language:enabled is true, then the corresponding default item model should include a language value;\n    // if it is false, then the language field should be omitted from the item model.\n    // if a default item model includes a language value (e.g., en_US) and the corresponding authoring view settings have language:settings = true,\n    // then (a) language:enabled should also be true, and (b) that default language value should be represented in languageChoices[] (as a key).\n    if (newConfiguration?.language?.enabled) {\n      if (newConfiguration?.languageChoices?.options?.length) {\n        this._model.language = newConfiguration?.languageChoices.options[0].value;\n      }\n    } else if (newConfiguration.language.settings && this._model.language) {\n      this._configuration.language.enabled = true;\n\n      if (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) {\n        this._configuration.languageChoices.options = [];\n      }\n\n      // check if the language is already included in the languageChoices.options array\n      // and if not, then add it.\n      if (!this._configuration.languageChoices.options.find((option) => option.value === this._model.language)) {\n        this._configuration.languageChoices.options.push({\n          value: this._model.language,\n          label: this._model.language,\n        });\n      }\n    } else {\n      delete this._model.language;\n    }\n    this.render();\n  }\n\n  resetModelAfterConfigurationIsSet = () => {\n    // In environments that use pie-player-components, model is set before configuration.\n    // This is the reason why sometimes the model gets altered non-reversible\n    // (altered using default configuration instead of client configuration, because at that point client configuration was not set yet)\n    // Therefore, in such environments, we will make sure to keep a modelCopy (initialised in set model) and use it to reset\n    // the model in set configuration (resetModelAfterConfigurationIsSet) if set configuration is ever called\n    const pieAuthors = document.querySelectorAll('pie-author');\n    this.hasPlayerAsParent = Array.from(pieAuthors).some((author) => author.contains(this));\n\n    if (this.hasPlayerAsParent) {\n      if (this._modelCopy) {\n        this._model = this._modelCopy;\n      } else {\n        delete this._modelCopy;\n      }\n    }\n  };\n\n  connectedCallback() {\n    this.render();\n  }\n\n  modelChanged(m) {\n    this._model = m;\n    this.dispatchEvent(new ModelUpdatedEvent(this._model), true);\n    this.render();\n  }\n\n  onChange = (o) => {\n    this._model = { ...this._model, ...o };\n    this.dispatchEvent(new ModelUpdatedEvent(this._model));\n    this.render();\n  };\n\n  onConfigurationChanged(c) {\n    this._configuration = c;\n    this.render();\n  }\n\n  /**\n   *\n   * @param {done, progress, file} handler\n   */\n  insertImage(handler) {\n    this.dispatchEvent(new InsertImageEvent(handler));\n  }\n\n  onDeleteImage(src, done) {\n    this.dispatchEvent(new DeleteImageEvent(src, done));\n  }\n\n  insertSound(handler) {\n    this.dispatchEvent(new InsertSoundEvent(handler));\n  }\n\n  onDeleteSound(src, done) {\n    this.dispatchEvent(new DeleteSoundEvent(src, done));\n  }\n\n  render() {\n    if (this._model) {\n      const el = React.createElement(Main, {\n        classes: {},\n        model: this._model,\n        configuration: this._configuration,\n        onConfigurationChanged: this.onConfigurationChanged,\n        onChange: this.onChange,\n        imageSupport: {\n          add: this.insertImage.bind(this),\n          delete: this.onDeleteImage.bind(this),\n        },\n        uploadSoundSupport: {\n          add: this.insertSound.bind(this),\n          delete: this.onDeleteSound.bind(this),\n        },\n      });\n\n      ReactDOM.render(el, this);\n    }\n  }\n}\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_main","_pieConfigureEvents","_defaults","FractionModelConfigure","HTMLElement","constructor","_defineProperty2","default","pieAuthors","document","querySelectorAll","hasPlayerAsParent","Array","from","some","author","contains","_modelCopy","_model","o","dispatchEvent","ModelUpdatedEvent","render","_root","createDefaultModel","_configuration","defaultValues","configuration","model","m","c","newConfiguration","resetModelAfterConfigurationIsSet","language","enabled","languageChoices","options","length","value","settings","find","option","push","label","connectedCallback","modelChanged","onConfigurationChanged","insertImage","handler","InsertImageEvent","onDeleteImage","src","done","DeleteImageEvent","insertSound","InsertSoundEvent","onDeleteSound","DeleteSoundEvent","el","React","createElement","Main","classes","onChange","imageSupport","add","bind","delete","uploadSoundSupport","createRoot","disconnectedCallback","unmount","exports","normalizedModel"],"sources":["../src/index.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport Main from './main';\nimport {\n  ModelUpdatedEvent,\n  DeleteImageEvent,\n  InsertImageEvent,\n  InsertSoundEvent,\n  DeleteSoundEvent,\n} from '@pie-framework/pie-configure-events';\nimport defaultValues from './defaults';\n\nexport default class FractionModelConfigure extends HTMLElement {\n  /**\n   * This function makes sure you set the default values on the model\n   * @param model\n   * @returns model\n   */\n  static createDefaultModel = (model = {}) => {\n    const c = defaultValues.configuration;\n    let language = model.language || '';\n\n    if (!language && c.language && c.language.enabled) {\n      if (c.languageChoices?.options?.length) {\n        language = c.languageChoices.options[0].value;\n      }\n    }\n\n    const normalizedModel = {\n      ...defaultValues.model,\n      ...model,\n      language,\n    };\n\n    return normalizedModel;\n  };\n\n  constructor() {\n    super();\n    this._root = null;\n    this._model = FractionModelConfigure.createDefaultModel();\n    this._configuration = defaultValues.configuration;\n  }\n\n  set model(m) {\n    this._model = FractionModelConfigure.createDefaultModel(m);\n    this.render();\n  }\n\n  set configuration(c) {\n    const newConfiguration = {\n      ...defaultValues.configuration,\n      ...c,\n    };\n    this._configuration = newConfiguration;\n\n    this.resetModelAfterConfigurationIsSet();\n\n    // if language:enabled is true, then the corresponding default item model should include a language value;\n    // if it is false, then the language field should be omitted from the item model.\n    // if a default item model includes a language value (e.g., en_US) and the corresponding authoring view settings have language:settings = true,\n    // then (a) language:enabled should also be true, and (b) that default language value should be represented in languageChoices[] (as a key).\n    if (newConfiguration?.language?.enabled) {\n      if (newConfiguration?.languageChoices?.options?.length) {\n        this._model.language = newConfiguration?.languageChoices.options[0].value;\n      }\n    } else if (newConfiguration.language.settings && this._model.language) {\n      this._configuration.language.enabled = true;\n\n      if (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) {\n        this._configuration.languageChoices.options = [];\n      }\n\n      // check if the language is already included in the languageChoices.options array\n      // and if not, then add it.\n      if (!this._configuration.languageChoices.options.find((option) => option.value === this._model.language)) {\n        this._configuration.languageChoices.options.push({\n          value: this._model.language,\n          label: this._model.language,\n        });\n      }\n    } else {\n      delete this._model.language;\n    }\n    this.render();\n  }\n\n  resetModelAfterConfigurationIsSet = () => {\n    // In environments that use pie-player-components, model is set before configuration.\n    // This is the reason why sometimes the model gets altered non-reversible\n    // (altered using default configuration instead of client configuration, because at that point client configuration was not set yet)\n    // Therefore, in such environments, we will make sure to keep a modelCopy (initialised in set model) and use it to reset\n    // the model in set configuration (resetModelAfterConfigurationIsSet) if set configuration is ever called\n    const pieAuthors = document.querySelectorAll('pie-author');\n    this.hasPlayerAsParent = Array.from(pieAuthors).some((author) => author.contains(this));\n\n    if (this.hasPlayerAsParent) {\n      if (this._modelCopy) {\n        this._model = this._modelCopy;\n      } else {\n        delete this._modelCopy;\n      }\n    }\n  };\n\n  connectedCallback() {\n    this.render();\n  }\n\n  modelChanged(m) {\n    this._model = m;\n    this.dispatchEvent(new ModelUpdatedEvent(this._model), true);\n    this.render();\n  }\n\n  onChange = (o) => {\n    this._model = { ...this._model, ...o };\n    this.dispatchEvent(new ModelUpdatedEvent(this._model));\n    this.render();\n  };\n\n  onConfigurationChanged(c) {\n    this._configuration = c;\n    this.render();\n  }\n\n  /**\n   *\n   * @param {done, progress, file} handler\n   */\n  insertImage(handler) {\n    this.dispatchEvent(new InsertImageEvent(handler));\n  }\n\n  onDeleteImage(src, done) {\n    this.dispatchEvent(new DeleteImageEvent(src, done));\n  }\n\n  insertSound(handler) {\n    this.dispatchEvent(new InsertSoundEvent(handler));\n  }\n\n  onDeleteSound(src, done) {\n    this.dispatchEvent(new DeleteSoundEvent(src, done));\n  }\n\n  render() {\n    if (this._model) {\n      const el = React.createElement(Main, {\n        classes: {},\n        model: this._model,\n        configuration: this._configuration,\n        onConfigurationChanged: this.onConfigurationChanged,\n        onChange: this.onChange,\n        imageSupport: {\n          add: this.insertImage.bind(this),\n          delete: this.onDeleteImage.bind(this),\n        },\n        uploadSoundSupport: {\n          add: this.insertSound.bind(this),\n          delete: this.onDeleteSound.bind(this),\n        },\n      });\n\n      if (!this._root) {\n        this._root = createRoot(this);\n      }\n      this._root.render(el);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/configure/lib/main.js

@@ -1,107 +1,84 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Main = 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.Main = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _configUi = require("@pie-lib/config-ui");
-
-var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styles = require("@material-ui/core/styles");
-
+var _configUi = require("@pie-lib/config-ui");
+var _editableHtmlTipTap = _interopRequireDefault(require("@pie-lib/editable-html-tip-tap"));
+var _fractionModel = require("@pie-element/fraction-model");
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
+var _styles = require("@mui/material/styles");
 var _cardBar = _interopRequireDefault(require("./card-bar"));
-
 var _modelOptions = _interopRequireDefault(require("./model-options"));
-
-var _fractionModel = require("@pie-element/fraction-model");
-
-var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
-
-var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
-
-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 styles = function styles(theme) {
-  return {
-    label: {
-      marginBottom: theme.spacing.unit * 4
-    },
-    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
-    },
-    flexRow: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '10px'
-    },
-    errorMessage: {
-      fontSize: theme.typography.fontSize - 2,
-      color: theme.palette.error.main,
-      marginTop: theme.spacing.unit
-    },
-    modelError: {
-      border: "2px solid ".concat(theme.palette.error.main)
-    }
-  };
-};
-
-var Main = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Main, _React$Component);
-
-  var _super = _createSuper(Main);
-
-  function Main(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Main);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onCorrectAnswerChange", function (correctResponse) {
-      var _this$props = _this.props,
-          model = _this$props.model,
-          onChange = _this$props.onChange;
+const StyledFormSection = (0, _styles.styled)(_configUi.FormSection)(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(4)
+}));
+const StyledTooltip = (0, _styles.styled)(_Tooltip.default)(({
+  theme
+}) => ({
+  '& .MuiTooltip-tooltip': {
+    fontSize: theme.typography.fontSize - 2,
+    whiteSpace: 'pre',
+    maxWidth: '500px'
+  }
+}));
+const ErrorMessage = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  marginTop: theme.spacing(1)
+}));
+const ModelErrorContainer = (0, _styles.styled)('div')(({
+  theme,
+  hasError
+}) => ({
+  ...(hasError && {
+    border: `2px solid ${theme.palette.error.main}`
+  })
+}));
+const Label = (0, _styles.styled)('label')(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(4)
+}));
+class Main extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    /*
+     * Method to handle correct answer change
+     * @param {array} correctResponse - correct response
+     * */
+    (0, _defineProperty2.default)(this, "onCorrectAnswerChange", correctResponse => {
+      const {
+        model,
+        onChange
+      } = this.props;
       model.correctResponse = correctResponse;
-      onChange(_objectSpread({}, model));
+      onChange({
+        ...model
+      });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onModelOptionsChange", function (oldModel, newModel, showDiag) {
-      var onChange = _this.props.onChange;
-
+    /*
+     * Method to handle model options change
+     * @param {object} oldModel - old model
+     * @param {object} newModel - new model
+     * @param {boolean} showDiag - show dialog or not
+     * */
+    (0, _defineProperty2.default)(this, "onModelOptionsChange", (oldModel, newModel, showDiag) => {
+      const {
+        onChange
+      } = this.props;
       if (showDiag && oldModel.correctResponse.length > 0) {
-        _this.setState({
+        this.setState({
           correctAnswerChangeDialog: {
             open: true,
             oldModel: oldModel,
@@ -110,204 +87,167 @@ var Main = /*#__PURE__*/function (_React$Component) {
           }
         });
       } else {
-        onChange(_objectSpread({}, newModel));
+        onChange({
+          ...newModel
+        });
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "generateRandomKey", function () {
+    /*
+     * Method to generate random key
+     * */
+    (0, _defineProperty2.default)(this, "generateRandomKey", () => {
       return Math.floor(Math.random() * 10000);
     });
-    _this.state = {
+    this.state = {
       correctAnswerChangeDialog: {
         open: false,
         text: ''
       }
     };
-    return _this;
   }
-  /*
-   * Method to handle correct answer change
-   * @param {array} correctResponse - correct response
-   * */
-
-
-  (0, _createClass2["default"])(Main, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props2 = this.props,
-          classes = _this$props2.classes,
-          model = _this$props2.model,
-          _onChange = _this$props2.onChange,
-          configuration = _this$props2.configuration,
-          imageSupport = _this$props2.imageSupport,
-          uploadSoundSupport = _this$props2.uploadSoundSupport;
-
-      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$title = _ref.title,
-          title = _ref$title === void 0 ? {} : _ref$title,
-          _ref$prompt = _ref.prompt,
-          prompt = _ref$prompt === void 0 ? {} : _ref$prompt,
-          _ref$modelOptions = _ref.modelOptions,
-          modelOptions = _ref$modelOptions === void 0 ? {} : _ref$modelOptions,
-          _ref$mathMlOptions = _ref.mathMlOptions,
-          mathMlOptions = _ref$mathMlOptions === void 0 ? {} : _ref$mathMlOptions;
-
-      var _ref2 = model || {},
-          _ref2$errors = _ref2.errors,
-          errors = _ref2$errors === void 0 ? {} : _ref2$errors,
-          extraCSSRules = _ref2.extraCSSRules,
-          spellCheckEnabled = _ref2.spellCheckEnabled,
-          toolbarEditorPosition = _ref2.toolbarEditorPosition;
-
-      var correctAnswerChangeDialog = this.state.correctAnswerChangeDialog;
-      var toolbarOpts = {
-        position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
-      };
-
-      var getPluginProps = function getPluginProps() {
-        var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-        return _objectSpread(_objectSpread({}, baseInputConfiguration), props);
-      };
-
-      var fractionModelChartKey = this.generateRandomKey();
-      return /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
-        extraCSSRules: extraCSSRules,
-        dimensions: contentDimensions,
-        hideSettings: true
-      }, /*#__PURE__*/_react["default"].createElement(_cardBar["default"], {
-        header: "Set Up"
-      }), /*#__PURE__*/_react["default"].createElement(_configUi.FormSection, {
-        label: (title === null || title === void 0 ? void 0 : title.label) || 'Title',
-        className: classes.label
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        className: classes.title,
-        markup: model.title || '',
-        onChange: function onChange(title) {
-          return _onChange({
-            title: title
-          });
-        },
-        toolbarOpts: toolbarOpts,
-        activePlugins: ['bold', 'html', 'italic', 'underline', 'strikethrough', 'image', 'math', 'languageCharacters', 'responseArea'],
-        pluginProps: getPluginProps(title === null || title === void 0 ? void 0 : title.inputConfiguration),
-        spellCheck: spellCheckEnabled,
-        uploadSoundSupport: uploadSoundSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
-        mathMlOptions: mathMlOptions
-      })), /*#__PURE__*/_react["default"].createElement(_configUi.FormSection, {
-        label: (prompt === null || prompt === void 0 ? void 0 : prompt.label) || 'Question',
-        className: classes.label
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        markup: model.prompt || '',
-        minHeight: 60,
-        onChange: function onChange(prompt) {
-          return _onChange({
-            prompt: prompt
-          });
-        },
-        toolbarOpts: toolbarOpts,
-        pluginProps: getPluginProps(prompt === null || prompt === void 0 ? void 0 : prompt.inputConfiguration),
-        spellCheck: spellCheckEnabled,
-        uploadSoundSupport: uploadSoundSupport,
-        imageSupport: imageSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
-        mathMlOptions: mathMlOptions
-      })), /*#__PURE__*/_react["default"].createElement(_configUi.FormSection, null, /*#__PURE__*/_react["default"].createElement(_modelOptions["default"], {
-        model: model,
-        onChange: this.onModelOptionsChange,
-        modelOptions: modelOptions
-      })), /*#__PURE__*/_react["default"].createElement(_configUi.FormSection, null, /*#__PURE__*/_react["default"].createElement(_cardBar["default"], {
-        header: "Correct Answer",
-        info: /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-          classes: {
-            tooltip: classes.tooltip
-          },
-          disableFocusListener: true,
-          disableTouchListener: true,
-          placement: 'right',
-          title: 'The correct answer should include no more than one partially-filled model'
-        }, /*#__PURE__*/_react["default"].createElement(_Info["default"], {
-          fontSize: 'small',
-          color: 'primary',
-          style: {
-            marginLeft: '8px'
+  render() {
+    const {
+      model,
+      onChange,
+      configuration,
+      imageSupport,
+      uploadSoundSupport
+    } = this.props;
+    const {
+      baseInputConfiguration = {},
+      contentDimensions = {},
+      title = {},
+      prompt = {},
+      modelOptions = {},
+      mathMlOptions = {}
+    } = configuration || {};
+    const {
+      errors = {},
+      extraCSSRules,
+      spellCheckEnabled,
+      toolbarEditorPosition
+    } = model || {};
+    const {
+      correctAnswerChangeDialog
+    } = this.state;
+    const toolbarOpts = {
+      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
+    };
+    const getPluginProps = (props = {}) => ({
+      ...baseInputConfiguration,
+      ...props
+    });
+    const fractionModelChartKey = this.generateRandomKey();
+    return /*#__PURE__*/_react.default.createElement(_configUi.layout.ConfigLayout, {
+      extraCSSRules: extraCSSRules,
+      dimensions: contentDimensions,
+      hideSettings: true
+    }, /*#__PURE__*/_react.default.createElement(_cardBar.default, {
+      header: "Set Up"
+    }), /*#__PURE__*/_react.default.createElement(StyledFormSection, {
+      label: title?.label || 'Title'
+    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
+      markup: model.title || '',
+      onChange: title => onChange({
+        title
+      }),
+      toolbarOpts: toolbarOpts,
+      activePlugins: ['bold', 'html', 'italic', 'underline', 'strikethrough', 'image', 'math', 'languageCharacters', 'responseArea'],
+      pluginProps: getPluginProps(title?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    })), /*#__PURE__*/_react.default.createElement(StyledFormSection, {
+      label: prompt?.label || 'Question'
+    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
+      markup: model.prompt || '',
+      minHeight: 60,
+      onChange: prompt => onChange({
+        prompt
+      }),
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(prompt?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      uploadSoundSupport: uploadSoundSupport,
+      imageSupport: imageSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    })), /*#__PURE__*/_react.default.createElement(_configUi.FormSection, null, /*#__PURE__*/_react.default.createElement(_modelOptions.default, {
+      model: model,
+      onChange: this.onModelOptionsChange,
+      modelOptions: modelOptions
+    })), /*#__PURE__*/_react.default.createElement(_configUi.FormSection, null, "            ", /*#__PURE__*/_react.default.createElement(_cardBar.default, {
+      header: "Correct Answer",
+      info: /*#__PURE__*/_react.default.createElement(StyledTooltip, {
+        disableFocusListener: true,
+        disableTouchListener: true,
+        placement: 'right',
+        title: 'The correct answer should include no more than one partially-filled model'
+      }, /*#__PURE__*/_react.default.createElement(_Info.default, {
+        fontSize: 'small',
+        color: 'primary',
+        style: {
+          marginLeft: '8px'
+        }
+      }))
+    }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(Label, null, "Click/touch the number of parts to represent the correct fraction model"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(ModelErrorContainer, {
+      hasError: !!errors.correctResponse
+    }, /*#__PURE__*/_react.default.createElement(_fractionModel.FractionModelChart, {
+      key: fractionModelChartKey,
+      value: model.correctResponse,
+      modelType: model.modelTypeSelected,
+      noOfModels: model.maxModelSelected,
+      partsPerModel: model.partsPerModel,
+      showLabel: model.showGraphLabels,
+      onChange: this.onCorrectAnswerChange
+    })), errors.correctResponse && /*#__PURE__*/_react.default.createElement(ErrorMessage, null, errors.correctResponse)), /*#__PURE__*/_react.default.createElement(_configUi.AlertDialog, {
+      open: correctAnswerChangeDialog.open,
+      title: "Warning",
+      text: correctAnswerChangeDialog.text,
+      onConfirm: () => {
+        let newModel = this.state.correctAnswerChangeDialog.newModel;
+        newModel.correctResponse = [];
+        onChange({
+          ...newModel
+        });
+        this.setState({
+          correctAnswerChangeDialog: {
+            open: false
           }
-        }))
-      }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("label", {
-        className: classes.label
-      }, "Click/touch the number of parts to represent the correct fraction model"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", {
-        className: errors.correctResponse && classes.modelError
-      }, /*#__PURE__*/_react["default"].createElement(_fractionModel.FractionModelChart, {
-        key: fractionModelChartKey,
-        value: model.correctResponse,
-        modelType: model.modelTypeSelected,
-        noOfModels: model.maxModelSelected,
-        partsPerModel: model.partsPerModel,
-        showLabel: model.showGraphLabels,
-        onChange: this.onCorrectAnswerChange
-      })), errors.correctResponse && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorMessage
-      }, errors.correctResponse)), /*#__PURE__*/_react["default"].createElement(_configUi.AlertDialog, {
-        open: correctAnswerChangeDialog.open,
-        title: "Warning",
-        text: correctAnswerChangeDialog.text,
-        onConfirm: function onConfirm() {
-          var newModel = _this2.state.correctAnswerChangeDialog.newModel;
-          newModel.correctResponse = [];
-
-          _onChange(_objectSpread({}, newModel));
-
-          _this2.setState({
-            correctAnswerChangeDialog: {
-              open: false
-            }
-          });
-        },
-        onClose: function onClose() {
-          var oldModel = _this2.state.correctAnswerChangeDialog.oldModel;
-
-          _onChange(_objectSpread({}, oldModel));
-
-          _this2.setState({
-            correctAnswerChangeDialog: {
-              open: false
-            }
-          });
-        },
-        onConfirmText: 'OK',
-        onCloseText: 'Cancel'
-      }));
-    }
-  }]);
-  return Main;
-}(_react["default"].Component);
-
+        });
+      },
+      onClose: () => {
+        const oldModel = this.state.correctAnswerChangeDialog.oldModel;
+        onChange({
+          ...oldModel
+        });
+        this.setState({
+          correctAnswerChangeDialog: {
+            open: false
+          }
+        });
+      },
+      onConfirmText: 'OK',
+      onCloseText: 'Cancel'
+    }));
+  }
+}
 exports.Main = Main;
-(0, _defineProperty2["default"])(Main, "propTypes", {
-  classes: _propTypes["default"].object.isRequired,
-  model: _propTypes["default"].object.isRequired,
-  configuration: _propTypes["default"].object.isRequired,
-  onConfigurationChanged: _propTypes["default"].func.isRequired,
-  onChange: _propTypes["default"].func.isRequired,
-  uploadSoundSupport: _propTypes["default"].object.isRequired
+(0, _defineProperty2.default)(Main, "propTypes", {
+  model: _propTypes.default.object.isRequired,
+  configuration: _propTypes.default.object.isRequired,
+  onConfigurationChanged: _propTypes.default.func.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  uploadSoundSupport: _propTypes.default.object.isRequired
 });
-
-var _default = (0, _styles.withStyles)(styles, {
-  name: 'Main'
-})(Main);
-
-exports["default"] = _default;
+var _default = exports.default = Main;
 //# sourceMappingURL=main.js.map