@pie-element/number-line 11.3.4-next.3 → 12.0.0-beta.1

package/configure/lib/main.js

@@ -1,205 +1,141 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toPointType = exports["default"] = exports.Main = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-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.toPointType = 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 _editableHtmlTipTap = _interopRequireDefault(require("@pie-lib/editable-html-tip-tap"));
 var _numberLine = require("@pie-element/number-line");
-
 var _numberTextField = _interopRequireDefault(require("./number-text-field"));
-
 var _cardBar = _interopRequireDefault(require("./card-bar"));
-
 var _size = _interopRequireDefault(require("./size"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _domain = _interopRequireDefault(require("./domain"));
-
 var _arrows = _interopRequireDefault(require("./arrows"));
-
 var _pointConfig = _interopRequireDefault(require("./point-config"));
-
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
-
-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 _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 _ticks = _interopRequireDefault(require("./ticks"));
-
 var _defaults = require("./defaults");
-
 var _utils = require("./utils");
-
 var math = _interopRequireWildcard(require("mathjs"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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; } }
-
-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; }
-
-var trimModel = function trimModel(model) {
-  return _objectSpread(_objectSpread({}, model), {}, {
-    feedback: undefined,
-    prompt: undefined,
-    teacherInstructions: undefined,
-    graph: _objectSpread(_objectSpread({}, model.graph), {}, {
-      title: undefined,
-      disabled: true
-    }),
-    correctResponse: undefined
-  });
-};
-
-var lineIsSwitched = _numberLine.dataConverter.lineIsSwitched,
-    switchGraphLine = _numberLine.dataConverter.switchGraphLine,
-    toGraphFormat = _numberLine.dataConverter.toGraphFormat,
-    toSessionFormat = _numberLine.dataConverter.toSessionFormat;
-var Panel = _configUi.settings.Panel,
-    toggle = _configUi.settings.toggle;
-var minorLimits = {};
-var minorValues = {};
-var majorValues = {};
-
-var styles = function styles(theme) {
-  return {
-    maxNumberOfPoints: {
-      width: '150px'
-    },
-    checkbox: {
-      marginTop: theme.spacing.unit * 2,
-      marginBottom: theme.spacing.unit * 2
-    },
-    row: {
-      display: 'flex',
-      flexWrap: 'wrap',
-      '& > *': {
-        paddingRight: theme.spacing.unit * 2
-      }
-    },
-    pointTypeChooser: {
-      margin: "".concat(theme.spacing.unit * 2.5, "px 0")
-    },
-    promptContainer: {
-      paddingTop: theme.spacing.unit * 2,
-      marginBottom: theme.spacing.unit * 2,
-      width: '100%'
-    },
-    title: {
-      marginBottom: theme.spacing.unit * 4
-    },
-    tooltip: {
-      fontSize: theme.typography.fontSize - 2,
-      whiteSpace: 'pre',
-      maxWidth: '500px'
-    },
-    inlineFlexContainer: {
-      display: 'inline-flex'
-    },
-    resetButton: {
-      marginBottom: theme.spacing.unit * 2.5
-    },
-    errorText: {
-      fontSize: theme.typography.fontSize - 2,
-      color: theme.palette.error.main,
-      paddingTop: theme.spacing.unit
-    },
-    flexRow: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '10px'
-    },
-    description: {
-      marginBottom: theme.spacing.unit * 2.5
-    }
-  };
-};
-
-var toPointType = function toPointType(response) {
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const trimModel = model => ({
+  ...model,
+  feedback: undefined,
+  prompt: undefined,
+  teacherInstructions: undefined,
+  graph: {
+    ...model.graph,
+    title: undefined,
+    disabled: true
+  },
+  correctResponse: undefined
+});
+const {
+  lineIsSwitched,
+  switchGraphLine,
+  toGraphFormat,
+  toSessionFormat
+} = _numberLine.dataConverter;
+const {
+  Panel,
+  toggle
+} = _configUi.settings;
+let minorLimits = {};
+let minorValues = {};
+let majorValues = {};
+const StyledNumberTextField = (0, _styles.styled)(_numberTextField.default)({
+  width: '150px'
+});
+const Row = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  display: 'flex',
+  flexWrap: 'wrap',
+  '& > *': {
+    paddingRight: theme.spacing(2)
+  }
+}));
+const PointTypeChooser = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  margin: `${theme.spacing(2.5)}px 0`
+}));
+const StyledInputContainer = (0, _styles.styled)(_configUi.InputContainer)(({
+  theme
+}) => ({
+  paddingTop: theme.spacing(2),
+  marginBottom: theme.spacing(2),
+  width: '100%'
+}));
+const StyledFormSection = (0, _styles.styled)(_configUi.FormSection)(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(4)
+}));
+const ErrorText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1)
+}));
+const FlexRow = (0, _styles.styled)('div')({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '10px'
+});
+const FlexRowFormSection = (0, _styles.styled)(_configUi.FormSection)({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '10px'
+});
+const Description = (0, _styles.styled)(_Typography.default)(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2.5)
+}));
+const toPointType = response => {
   function rest(response) {
     if (response.pointType) {
       if (response.direction) {
-        return "".concat(response.pointType[0]).concat(response.direction[0]);
+        return `${response.pointType[0]}${response.direction[0]}`;
       }
-
       return response.pointType[0];
     }
-
-    return "".concat(response.leftPoint[0]).concat(response.rightPoint[0]);
+    return `${response.leftPoint[0]}${response.rightPoint[0]}`;
   }
-
-  return "".concat(response.type[0]).concat(rest(response)).toUpperCase();
+  return `${response.type[0]}${rest(response)}`.toUpperCase();
 };
-
 exports.toPointType = toPointType;
-
-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), "graphChange", function (obj) {
-      var _this$props = _this.props,
-          model = _this$props.model,
-          onChange = _this$props.onChange;
-
-      var graph = _objectSpread(_objectSpread({}, model.graph), obj);
-
-      var respIndex = [];
-      model.correctResponse.forEach(function (correctResp, key) {
+class Main extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "graphChange", obj => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      let graph = {
+        ...model.graph,
+        ...obj
+      };
+      let respIndex = [];
+      model.correctResponse.forEach((correctResp, key) => {
         if (correctResp.domainPosition < graph.domain.min || correctResp.domainPosition > graph.domain.max || correctResp.size && (correctResp.domainPosition + correctResp.size < graph.domain.min || correctResp.domainPosition + correctResp.size > graph.domain.max)) {
           respIndex.push(key);
         }
       });
-
       if (respIndex.length > 0) {
-        _this.setState({
+        this.setState({
           correctAnswerDialog: {
             open: true,
             text: 'This\n' + 'change would make it impossible for students to plot one or more elements in the current\n' + 'correct answer. If you proceed, all such elements will be removed from the correct\n' + 'answer.',
@@ -207,29 +143,23 @@ var Main = /*#__PURE__*/function (_React$Component) {
             graph: model.graph
           }
         });
-      } //reload ticks value whenever domain and width is changed
-
-
-      graph = _this.reloadTicksData(graph);
+      }
+      //reload ticks value whenever domain and width is changed
+      graph = this.reloadTicksData(graph);
       onChange({
-        graph: graph
+        graph
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeSize", function (_ref) {
-      var width = _ref.width,
-          height = _ref.height;
-      return _this.graphChange({
-        width: width,
-        height: height
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getAdjustedHeight", function (availableTypes, maxNumberOfPoints) {
-      var onlyPFAvailable = true;
-      Object.entries(availableTypes || {}).forEach(function (_ref2) {
-        var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
-            type = _ref3[0],
-            value = _ref3[1];
-
+    (0, _defineProperty2.default)(this, "changeSize", ({
+      width,
+      height
+    }) => this.graphChange({
+      width,
+      height
+    }));
+    (0, _defineProperty2.default)(this, "getAdjustedHeight", (availableTypes, maxNumberOfPoints) => {
+      let onlyPFAvailable = true;
+      Object.entries(availableTypes || {}).forEach(([type, value]) => {
         if (type !== 'PF' && value) {
           onlyPFAvailable = false;
           return;
@@ -237,74 +167,83 @@ var Main = /*#__PURE__*/function (_React$Component) {
       });
       return maxNumberOfPoints && (maxNumberOfPoints === 1 || onlyPFAvailable) ? 100 : 50 + (maxNumberOfPoints || 20) * 25;
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeMaxNoOfPoints", function (e, maxNumberOfPoints) {
+    (0, _defineProperty2.default)(this, "changeMaxNoOfPoints", (e, maxNumberOfPoints) => {
       maxNumberOfPoints = Math.floor(maxNumberOfPoints);
-
-      if (_this.props.model.correctResponse.length > maxNumberOfPoints) {
-        _this.setState({
+      if (this.props.model.correctResponse.length > maxNumberOfPoints) {
+        this.setState({
           dialog: {
             open: true,
             text: 'To use this value, you must first remove one or more elements from the correct answers.'
           }
         });
-
         return;
       }
-
-      var availableTypes = _this.props.model.graph.availableTypes;
-
-      var height = _this.getAdjustedHeight(availableTypes, maxNumberOfPoints);
-
-      _this.graphChange({
-        maxNumberOfPoints: maxNumberOfPoints,
-        height: height
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeGraphTitle", function (title) {
-      return _this.graphChange({
-        title: title
+      const {
+        model: {
+          graph: {
+            availableTypes
+          }
+        }
+      } = this.props;
+      const height = this.getAdjustedHeight(availableTypes, maxNumberOfPoints);
+      this.graphChange({
+        maxNumberOfPoints,
+        height
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeTicks", function (object) {
-      var _this$props2 = _this.props,
-          model = _this$props2.model,
-          onChange = _this$props2.onChange;
-      var ticks = object.ticks;
-
-      var correctResponse = _numberLine.tickUtils.snapElements(model.graph.domain, ticks, model.correctResponse);
-
-      var initialElements = model.graph.initialElements ? _numberLine.tickUtils.snapElements(model.graph.domain, ticks, model.graph.initialElements) : [];
-
-      var updatedGraph = _this.updateMajorValue(_objectSpread(_objectSpread({}, model.graph), {}, {
-        ticks: ticks
-      }));
-
-      var graph = _objectSpread(_objectSpread({}, updatedGraph), {}, {
-        initialElements: initialElements
+    (0, _defineProperty2.default)(this, "changeGraphTitle", title => this.graphChange({
+      title
+    }));
+    /*
+     * Gets triggered whenever ticks related data is changed by user.
+     * */
+    (0, _defineProperty2.default)(this, "changeTicks", object => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      let {
+        ticks
+      } = object;
+      const correctResponse = _numberLine.tickUtils.snapElements(model.graph.domain, ticks, model.correctResponse);
+      const initialElements = model.graph.initialElements ? _numberLine.tickUtils.snapElements(model.graph.domain, ticks, model.graph.initialElements) : [];
+      let updatedGraph = this.updateMajorValue({
+        ...model.graph,
+        ticks
       });
-
+      const graph = {
+        ...updatedGraph,
+        initialElements
+      };
       onChange({
-        graph: graph,
-        correctResponse: correctResponse
+        graph,
+        correctResponse
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "reloadTicksData", function (graph) {
-      var domain = graph.domain,
-          ticks = graph.ticks,
-          width = graph.width; //Set tick interval type if not present for legacy number line models depending upon minor value
-
+    /*
+     * This function is duplicated in controller/index.js
+     * This function will reload ticks data whenever graph object is changed and also sets required tick object
+     * for rendering Ticks Components.
+     * @param graph object containing domain, ticks and width value
+     * @return graph object with updated ticks values
+     * */
+    (0, _defineProperty2.default)(this, "reloadTicksData", graph => {
+      const {
+        domain,
+        ticks,
+        width
+      } = graph;
+      //Set tick interval type if not present for legacy number line models depending upon minor value
       if (!ticks.tickIntervalType) {
         if (ticks.minor > 0.5) {
           ticks.tickIntervalType = 'Integer';
         } else {
           ticks.tickIntervalType = 'Decimal';
         }
-      } // This section will calculate minor and major values array and assign respective value
+      }
+      // This section will calculate minor and major values array and assign respective value
       // to different tick types object
-
-
       minorLimits = _numberLine.tickUtils.getMinorLimits(domain, width);
-
       if (minorLimits.min >= 1) {
         /*
          * In this scenario only integer tick will be enabled
@@ -325,11 +264,9 @@ var Main = /*#__PURE__*/function (_React$Component) {
         if (ticks.tickIntervalType === 'Integer') {
           ticks.tickIntervalType = 'Fraction';
         }
-
         minorValues = _numberLine.tickUtils.generateMinorValues(minorLimits);
-        var minValue = math.number(math.fraction(minorValues.fraction[0]));
-        var maxValue = math.number(math.fraction(minorValues.fraction[minorValues.fraction.length - 1]));
-
+        let minValue = math.number(math.fraction(minorValues.fraction[0]));
+        let maxValue = math.number(math.fraction(minorValues.fraction[minorValues.fraction.length - 1]));
         if (ticks.minor < minValue || ticks.minor > maxValue) {
           switch (ticks.tickIntervalType) {
             case 'Fraction':
@@ -337,7 +274,6 @@ var Main = /*#__PURE__*/function (_React$Component) {
               ticks.fractionTick = minorValues.fraction[minorValues.fraction.length - 1];
               ticks.decimalTick = minorValues.decimal[0];
               break;
-
             case 'Decimal':
             case 'Integer':
               ticks.minor = minorValues.decimal[minorValues.decimal.length - 1];
@@ -347,30 +283,26 @@ var Main = /*#__PURE__*/function (_React$Component) {
         } else {
           switch (ticks.tickIntervalType) {
             case 'Fraction':
-              var fraction = math.fraction(math.number(ticks.minor));
+              let fraction = math.fraction(math.number(ticks.minor));
               ticks.fractionTick = fraction.n + '/' + fraction.d;
               ticks.decimalTick = ticks.decimalTick ? ticks.decimalTick : minorValues.decimal[0];
               break;
-
             case 'Decimal':
             case 'Integer':
               ticks.decimalTick = ticks.minor;
               ticks.fractionTick = ticks.fractionTick ? ticks.fractionTick : minorValues.fraction[0];
           }
         }
-
         ticks.integerTick = 1;
       } else if (minorLimits.min < 1 && minorLimits.max >= 1) {
         /*
          * In this scenario all integer, decimal or fraction tick will be enabled
          * */
         minorValues = _numberLine.tickUtils.generateMinorValues(minorLimits);
-
         if (!(ticks.minor >= minorLimits.min && ticks.minor <= minorLimits.max)) {
           if (minorLimits.min > 0.5) {
             ticks.tickIntervalType = 'Integer';
           }
-
           switch (ticks.tickIntervalType) {
             case 'Integer':
               ticks.minor = math.number(math.ceil(minorLimits.min));
@@ -378,14 +310,12 @@ var Main = /*#__PURE__*/function (_React$Component) {
               ticks.decimalTick = minorLimits.min > 0.5 ? 0 : minorValues.decimal[0];
               ticks.fractionTick = minorLimits.min > 0.5 ? '0' : minorValues.fraction[0];
               break;
-
             case 'Decimal':
               ticks.minor = minorValues.decimal[0];
               ticks.integerTick = 1;
               ticks.decimalTick = ticks.minor;
               ticks.fractionTick = minorValues.fraction[0];
               break;
-
             case 'Fraction':
               ticks.minor = math.number(math.fraction(minorValues.fraction[0]));
               ticks.integerTick = 1;
@@ -399,150 +329,158 @@ var Main = /*#__PURE__*/function (_React$Component) {
               ticks.decimalTick = minorLimits.min > 0.5 ? 0 : minorValues.decimal[0];
               ticks.fractionTick = minorLimits.min > 0.5 ? '0' : minorValues.fraction[0];
               break;
-
             case 'Decimal':
               ticks.integerTick = 1;
               ticks.decimalTick = ticks.minor;
               ticks.fractionTick = minorValues.fraction[0];
               break;
-
             case 'Fraction':
               ticks.integerTick = 1;
               ticks.decimalTick = minorValues.decimal[0];
-
-              var _fraction = math.fraction(math.number(ticks.minor));
-
-              ticks.fractionTick = _fraction.n + '/' + _fraction.d;
+              let fraction = math.fraction(math.number(ticks.minor));
+              ticks.fractionTick = fraction.n + '/' + fraction.d;
           }
         }
       }
-
-      return _this.updateMajorValue(_objectSpread(_objectSpread({}, graph), {}, {
-        ticks: ticks
-      }));
+      return this.updateMajorValue({
+        ...graph,
+        ticks
+      });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "updateMajorValue", function (graph) {
-      var domain = graph.domain,
-          ticks = graph.ticks,
-          width = graph.width;
+    /*
+     * This function is duplicated in controller/index.js
+     * This function will update major value whenever minor value is changed or tick type is changed
+     * @param graph object containing domain, ticks and width value
+     * @return graph object with updated ticks values
+     * */
+    (0, _defineProperty2.default)(this, "updateMajorValue", graph => {
+      const {
+        domain,
+        ticks,
+        width
+      } = graph;
       majorValues = _numberLine.tickUtils.generateMajorValuesForMinor(ticks.minor, domain, width);
-
       if (majorValues.decimal.indexOf(ticks.major) === -1) {
-        var currIndex = 0;
-
+        let currIndex = 0;
         if (ticks.tickIntervalType === 'Integer') {
           currIndex = majorValues.decimal.length > 4 ? 4 : majorValues.decimal.length - 1;
         } else {
           currIndex = majorValues.decimal.length - 1;
         }
-
         ticks.major = majorValues.decimal[currIndex];
       }
-
       graph.fraction = ticks.tickIntervalType === 'Fraction' && ticks.major < 1;
-      return _objectSpread(_objectSpread({}, graph), {}, {
-        ticks: ticks
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeArrows", function (arrows) {
-      return _this.graphChange({
-        arrows: arrows
-      });
+      return {
+        ...graph,
+        ticks
+      };
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setDefaults", function () {
-      var _defaultModel$graph = _defaults.model.graph,
-          availableTypes = _defaultModel$graph.availableTypes,
-          maxNumberOfPoints = _defaultModel$graph.maxNumberOfPoints;
-
-      var height = _this.getAdjustedHeight(availableTypes, maxNumberOfPoints);
-
-      var graph = _objectSpread(_objectSpread({}, (0, _cloneDeep["default"])(_defaults.model.graph)), {}, {
-        height: height
-      });
-
-      _this.props.onChange({
-        graph: graph
+    (0, _defineProperty2.default)(this, "changeArrows", arrows => this.graphChange({
+      arrows
+    }));
+    (0, _defineProperty2.default)(this, "setDefaults", () => {
+      const {
+        graph: {
+          availableTypes,
+          maxNumberOfPoints
+        }
+      } = _defaults.model;
+      const height = this.getAdjustedHeight(availableTypes, maxNumberOfPoints);
+      const graph = {
+        ...(0, _cloneDeep.default)(_defaults.model.graph),
+        height
+      };
+      this.props.onChange({
+        graph
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "moveCorrectResponse", function (index, el, position) {
+    (0, _defineProperty2.default)(this, "moveCorrectResponse", (index, el, position) => {
       el.position = position;
-      var _this$props3 = _this.props,
-          onChange = _this$props3.onChange,
-          model = _this$props3.model;
-      var update = toSessionFormat(el.type === 'line' && lineIsSwitched(el) ? switchGraphLine(el) : el);
-      var correctResponse = (0, _toConsumableArray2["default"])(model.correctResponse);
+      const {
+        onChange,
+        model
+      } = this.props;
+      const update = toSessionFormat(el.type === 'line' && lineIsSwitched(el) ? switchGraphLine(el) : el);
+      const correctResponse = [...model.correctResponse];
       correctResponse[index] = update;
       onChange({
-        correctResponse: correctResponse
+        correctResponse
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "availableTypesChange", function (availableTypes) {
-      var _this$props4 = _this.props,
-          model = _this$props4.model,
-          onChange = _this$props4.onChange;
-      var correctResponse = model.correctResponse,
-          maxNumberOfPoints = model.graph.maxNumberOfPoints;
-      new Set(correctResponse.map(toPointType)).forEach(function (pointType) {
+    (0, _defineProperty2.default)(this, "availableTypesChange", availableTypes => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      const {
+        correctResponse,
+        graph: {
+          maxNumberOfPoints
+        }
+      } = model;
+      new Set(correctResponse.map(toPointType)).forEach(pointType => {
         availableTypes[pointType] = true;
       });
-
-      var height = _this.getAdjustedHeight(availableTypes, maxNumberOfPoints);
-
-      var graph = _objectSpread(_objectSpread({}, model.graph), {}, {
-        availableTypes: availableTypes,
-        height: height
-      });
-
+      const height = this.getAdjustedHeight(availableTypes, maxNumberOfPoints);
+      const graph = {
+        ...model.graph,
+        availableTypes,
+        height
+      };
       onChange({
-        graph: graph
+        graph
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "deleteCorrectResponse", function (indices) {
-      var _this$props5 = _this.props,
-          model = _this$props5.model,
-          onChange = _this$props5.onChange;
-      var correctResponse = model.correctResponse.filter(function (v, index) {
-        return !indices.some(function (d) {
-          return d === index;
-        });
-      });
+    (0, _defineProperty2.default)(this, "deleteCorrectResponse", indices => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      const correctResponse = model.correctResponse.filter((v, index) => !indices.some(d => d === index));
       onChange({
-        correctResponse: correctResponse
+        correctResponse
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "addCorrectResponse", function (data) {
-      var _this$props6 = _this.props,
-          model = _this$props6.model,
-          onChange = _this$props6.onChange;
-      var correctResponse = (0, _toConsumableArray2["default"])(model.correctResponse);
+    (0, _defineProperty2.default)(this, "addCorrectResponse", data => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      const correctResponse = [...model.correctResponse];
       correctResponse.push(toSessionFormat(data));
       onChange({
-        correctResponse: correctResponse
+        correctResponse
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "clearCorrectResponse", function () {
-      var onChange = _this.props.onChange;
+    (0, _defineProperty2.default)(this, "clearCorrectResponse", () => {
+      const {
+        onChange
+      } = this.props;
       onChange({
         correctResponse: []
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "undoCorrectResponse", function () {
-      var _this$props7 = _this.props,
-          model = _this$props7.model,
-          onChange = _this$props7.onChange;
-      var correctResponse = (0, _toConsumableArray2["default"])(model.correctResponse);
+    (0, _defineProperty2.default)(this, "undoCorrectResponse", () => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      const correctResponse = [...model.correctResponse];
       correctResponse.pop();
       onChange({
-        correctResponse: correctResponse
+        correctResponse
       });
     });
-    var _props$model$graph = props.model.graph,
-        _availableTypes = _props$model$graph.availableTypes,
-        _maxNumberOfPoints = _props$model$graph.maxNumberOfPoints;
-
-    var _height = _this.getAdjustedHeight(_availableTypes, _maxNumberOfPoints);
-
-    _this.state = {
+    const {
+      model: {
+        graph: {
+          availableTypes: _availableTypes,
+          maxNumberOfPoints: _maxNumberOfPoints
+        }
+      }
+    } = props;
+    const _height = this.getAdjustedHeight(_availableTypes, _maxNumberOfPoints);
+    this.state = {
       dialog: {
         open: false,
         text: ''
@@ -552,397 +490,323 @@ var Main = /*#__PURE__*/function (_React$Component) {
         text: ''
       }
     };
-
-    _this.graphChange({
+    this.graphChange({
       height: _height
     });
-
-    return _this;
   }
-
-  (0, _createClass2["default"])(Main, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props8 = this.props,
-          configuration = _this$props8.configuration,
-          model = _this$props8.model,
-          onChange = _this$props8.onChange;
-
-      var _ref4 = configuration || {},
-          title = _ref4.title;
-
-      var _ref5 = model || {},
-          showTitle = _ref5.titleEnabled;
-
-      var titleEnabled = showTitle === undefined || showTitle === null ? title.enabled : showTitle;
-      onChange && onChange(_objectSpread(_objectSpread({}, model), {}, {
-        titleEnabled: titleEnabled
-      }));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props9 = this.props,
-          classes = _this$props9.classes,
-          model = _this$props9.model,
-          _onChange = _this$props9.onChange,
-          configuration = _this$props9.configuration,
-          onConfigurationChanged = _this$props9.onConfigurationChanged,
-          uploadSoundSupport = _this$props9.uploadSoundSupport,
-          imageSupport = _this$props9.imageSupport;
-
-      var _ref6 = configuration || {},
-          _ref6$baseInputConfig = _ref6.baseInputConfiguration,
-          baseInputConfiguration = _ref6$baseInputConfig === void 0 ? {} : _ref6$baseInputConfig,
-          _ref6$contentDimensio = _ref6.contentDimensions,
-          contentDimensions = _ref6$contentDimensio === void 0 ? {} : _ref6$contentDimensio,
-          _ref6$instruction = _ref6.instruction,
-          instruction = _ref6$instruction === void 0 ? {} : _ref6$instruction,
-          _ref6$teacherInstruct = _ref6.teacherInstructions,
-          teacherInstructions = _ref6$teacherInstruct === void 0 ? {} : _ref6$teacherInstruct,
-          _ref6$title = _ref6.title,
-          title = _ref6$title === void 0 ? {} : _ref6$title,
-          _ref6$prompt = _ref6.prompt,
-          prompt = _ref6$prompt === void 0 ? {} : _ref6$prompt,
-          _ref6$rationale = _ref6.rationale,
-          rationale = _ref6$rationale === void 0 ? {} : _ref6$rationale,
-          _ref6$spellCheck = _ref6.spellCheck,
-          spellCheck = _ref6$spellCheck === void 0 ? {} : _ref6$spellCheck,
-          _ref6$mathMlOptions = _ref6.mathMlOptions,
-          mathMlOptions = _ref6$mathMlOptions === void 0 ? {} : _ref6$mathMlOptions,
-          _ref6$numberLineDimen = _ref6.numberLineDimensions,
-          numberLineDimensions = _ref6$numberLineDimen === void 0 ? {} : _ref6$numberLineDimen,
-          _ref6$maxMaxElements = _ref6.maxMaxElements,
-          maxMaxElements = _ref6$maxMaxElements === void 0 ? 20 : _ref6$maxMaxElements,
-          _ref6$hidePointConfig = _ref6.hidePointConfigButtons,
-          hidePointConfigButtons = _ref6$hidePointConfig === void 0 ? false : _ref6$hidePointConfig,
-          _ref6$availableTools = _ref6.availableTools,
-          availableTools = _ref6$availableTools === void 0 ? ['PF'] : _ref6$availableTools,
-          _ref6$settingsPanelDi = _ref6.settingsPanelDisabled,
-          settingsPanelDisabled = _ref6$settingsPanelDi === void 0 ? false : _ref6$settingsPanelDi;
-
-      var _ref7 = model || {},
-          _ref7$errors = _ref7.errors,
-          errors = _ref7$errors === void 0 ? {} : _ref7$errors,
-          extraCSSRules = _ref7.extraCSSRules,
-          spellCheckEnabled = _ref7.spellCheckEnabled,
-          toolbarEditorPosition = _ref7.toolbarEditorPosition,
-          teacherInstructionsEnabled = _ref7.teacherInstructionsEnabled,
-          titleEnabled = _ref7.titleEnabled,
-          promptEnabled = _ref7.promptEnabled,
-          rationaleEnabled = _ref7.rationaleEnabled;
-
-      var graph = model.graph;
-      graph = this.reloadTicksData(graph);
-      var _this$state = this.state,
-          dialog = _this$state.dialog,
-          correctAnswerDialog = _this$state.correctAnswerDialog;
-
-      var _ref8 = errors || {},
-          correctResponseError = _ref8.correctResponseError,
-          domainError = _ref8.domainError,
-          maxError = _ref8.maxError,
-          pointsError = _ref8.pointsError,
-          promptError = _ref8.prompt,
-          rationaleError = _ref8.rationale,
-          teacherInstructionsError = _ref8.teacherInstructions,
-          widthError = _ref8.widthError;
-
-      var validationMessage = (0, _utils.generateValidationMessage)();
-      var correctResponse = (0, _cloneDeep["default"])(model.correctResponse || []).map(toGraphFormat);
-      var initialModel = (0, _cloneDeep["default"])(model);
-      initialModel['disabled'] = true;
-      var toolbarOpts = {
-        position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
-      };
-      var panelProperties = {
-        teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
-        titleEnabled: title.settings && toggle(title.label),
-        promptEnabled: prompt.settings && toggle(prompt.label),
-        rationaleEnabled: rationale.settings && toggle(rationale.label),
-        spellCheckEnabled: spellCheck.settings && toggle(spellCheck.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,
-          configuration: configuration,
-          onChangeModel: _onChange,
-          onChangeConfiguration: onConfigurationChanged,
-          groups: {
-            Properties: panelProperties
-          }
-        })
-      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-        component: "div",
-        type: "body1",
-        className: classes.description
-      }, instruction.label), teacherInstructionsEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-        label: teacherInstructions.label,
-        className: classes.promptContainer
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        className: classes.teacherInstructions,
-        markup: model.teacherInstructions || '',
-        onChange: function onChange(teacherInstructions) {
-          return _onChange({
-            teacherInstructions: teacherInstructions
-          });
-        },
-        nonEmpty: false,
-        disableUnderline: true,
-        error: teacherInstructionsError,
-        toolbarOpts: toolbarOpts,
-        pluginProps: getPluginProps(teacherInstructions === null || teacherInstructions === void 0 ? void 0 : teacherInstructions.inputConfiguration),
-        spellCheck: spellCheckEnabled,
-        imageSupport: imageSupport,
-        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"], {
-        className: classes.prompt,
-        markup: model.prompt || '',
-        onChange: function onChange(prompt) {
-          return _onChange({
-            prompt: prompt
-          });
-        },
-        nonEmpty: false,
-        disableUnderline: true,
-        error: promptError,
-        toolbarOpts: toolbarOpts,
-        pluginProps: getPluginProps(prompt === null || prompt === void 0 ? void 0 : prompt.inputConfiguration),
-        spellCheck: spellCheckEnabled,
-        imageSupport: imageSupport,
-        uploadSoundSupport: uploadSoundSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
-        mathMlOptions: mathMlOptions
-      }), promptError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, promptError)), /*#__PURE__*/_react["default"].createElement(_cardBar["default"], {
-        header: "Set Up Number Line",
-        info: /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-          classes: {
-            tooltip: classes.tooltip
-          },
-          disableFocusListener: true,
-          disableTouchListener: true,
-          placement: 'right',
-          title: validationMessage
-        }, /*#__PURE__*/_react["default"].createElement(_Info["default"], {
-          fontSize: 'small',
-          color: 'primary',
-          style: {
-            marginLeft: '8px'
+  componentDidMount() {
+    const {
+      configuration,
+      model,
+      onChange
+    } = this.props;
+    const {
+      title
+    } = configuration || {};
+    const {
+      titleEnabled: showTitle
+    } = model || {};
+    const titleEnabled = showTitle === undefined || showTitle === null ? title.enabled : showTitle;
+    onChange && onChange({
+      ...model,
+      titleEnabled
+    });
+  }
+  render() {
+    const {
+      model,
+      onChange,
+      configuration,
+      onConfigurationChanged,
+      uploadSoundSupport,
+      imageSupport
+    } = this.props;
+    const {
+      baseInputConfiguration = {},
+      contentDimensions = {},
+      instruction = {},
+      teacherInstructions = {},
+      title = {},
+      prompt = {},
+      rationale = {},
+      spellCheck = {},
+      mathMlOptions = {},
+      numberLineDimensions = {},
+      maxMaxElements = 20,
+      hidePointConfigButtons = false,
+      availableTools = ['PF'],
+      settingsPanelDisabled = false
+    } = configuration || {};
+    const {
+      errors = {},
+      extraCSSRules,
+      spellCheckEnabled,
+      toolbarEditorPosition,
+      teacherInstructionsEnabled,
+      titleEnabled,
+      promptEnabled,
+      rationaleEnabled
+    } = model || {};
+    let {
+      graph
+    } = model;
+    graph = this.reloadTicksData(graph);
+    const {
+      dialog,
+      correctAnswerDialog
+    } = this.state;
+    const {
+      correctResponseError,
+      domainError,
+      maxError,
+      pointsError,
+      prompt: promptError,
+      rationale: rationaleError,
+      teacherInstructions: teacherInstructionsError,
+      widthError
+    } = errors || {};
+    const validationMessage = (0, _utils.generateValidationMessage)();
+    const correctResponse = (0, _cloneDeep.default)(model.correctResponse || []).map(toGraphFormat);
+    const initialModel = (0, _cloneDeep.default)(model);
+    initialModel['disabled'] = true;
+    const toolbarOpts = {
+      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
+    };
+    const panelProperties = {
+      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+      titleEnabled: title.settings && toggle(title.label),
+      promptEnabled: prompt.settings && toggle(prompt.label),
+      rationaleEnabled: rationale.settings && toggle(rationale.label),
+      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.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,
+        configuration: configuration,
+        onChangeModel: onChange,
+        onChangeConfiguration: onConfigurationChanged,
+        groups: {
+          Properties: panelProperties
+        }
+      })
+    }, /*#__PURE__*/_react.default.createElement(Description, {
+      component: "div",
+      type: "body1"
+    }, instruction.label), teacherInstructionsEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: teacherInstructions.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
+      markup: model.teacherInstructions || '',
+      onChange: teacherInstructions => onChange({
+        teacherInstructions
+      }),
+      nonEmpty: false,
+      disableUnderline: true,
+      error: teacherInstructionsError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(teacherInstructions?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      imageSupport: imageSupport,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), teacherInstructionsError && /*#__PURE__*/_react.default.createElement(ErrorText, null, teacherInstructionsError)), promptEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: prompt.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
+      markup: model.prompt || '',
+      onChange: prompt => onChange({
+        prompt
+      }),
+      nonEmpty: false,
+      disableUnderline: true,
+      error: promptError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(prompt?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      imageSupport: imageSupport,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), promptError && /*#__PURE__*/_react.default.createElement(ErrorText, null, promptError)), /*#__PURE__*/_react.default.createElement(_cardBar.default, {
+      header: "Set Up Number Line",
+      info: /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+        disableFocusListener: true,
+        disableTouchListener: true,
+        placement: 'right',
+        title: validationMessage,
+        slotProps: {
+          tooltip: {
+            sx: theme => ({
+              fontSize: theme.typography.fontSize - 2,
+              whiteSpace: 'pre',
+              maxWidth: '500px'
+            })
           }
-        }))
-      }, "Set up the number line by entering the domain and number of tick marks to display. Labels on the number line can be edited or removed by clicking on the label."), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.row
-      }, /*#__PURE__*/_react["default"].createElement(_domain["default"], {
-        domain: graph.domain,
-        errors: errors,
-        onChange: function onChange(domain) {
-          return _this2.graphChange({
-            domain: domain
-          });
         }
-      })), maxError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, maxError), domainError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, domainError), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_configUi.FormSection, null, /*#__PURE__*/_react["default"].createElement(_ticks["default"], {
-        ticks: graph.ticks,
-        minorLimits: minorLimits,
-        minorValues: minorValues,
-        majorValues: majorValues,
-        onChange: this.changeTicks
-      }))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.flexRow
-      }, model.widthEnabled && /*#__PURE__*/_react["default"].createElement(_size["default"], {
-        size: graph,
-        min: numberLineDimensions.min,
-        max: numberLineDimensions.max,
-        step: numberLineDimensions.step,
-        onChange: this.changeSize
-      }), /*#__PURE__*/_react["default"].createElement("div", null), /*#__PURE__*/_react["default"].createElement(_arrows["default"], {
-        arrows: graph.arrows,
-        onChange: this.changeArrows
-      })), widthError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, widthError), /*#__PURE__*/_react["default"].createElement(_numberLine.NumberLineComponent, {
-        onMoveElement: function onMoveElement() {},
-        onDeleteElements: function onDeleteElements() {},
-        onAddElement: function onAddElement() {},
-        onClearElements: function onClearElements() {},
-        onUndoElement: function onUndoElement() {},
-        minWidth: numberLineDimensions.min,
-        maxWidth: numberLineDimensions.max,
-        maxHeight: 70,
-        model: trimModel(initialModel)
-      }), titleEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.FormSection, {
-        label: (title === null || title === void 0 ? void 0 : title.label) || 'Title',
-        className: classes.title
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        markup: graph.title || '',
-        onChange: this.changeGraphTitle,
-        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,
-        imageSupport: imageSupport,
-        uploadSoundSupport: uploadSoundSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
-        mathMlOptions: mathMlOptions
-      })), !graph.exhibitOnly && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_cardBar["default"], {
-        header: "Define Tool Set and Correct Response"
-      }, "Select answer type and place it on the number line. Intersecting points, line segments and/or rays will appear above the number line. ", /*#__PURE__*/_react["default"].createElement("i", null, "Note: A maximum of 20 points, line segments or rays may be plotted.")), /*#__PURE__*/_react["default"].createElement(_cardBar["default"], {
-        header: "Available Tools",
-        mini: true
-      }, "Click on the input options to be displayed to the students. All inputs will display by default."), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.pointTypeChooser
-      }, /*#__PURE__*/_react["default"].createElement(_pointConfig["default"], {
-        onSelectionChange: this.availableTypesChange,
-        selection: graph.availableTypes,
-        availableTools: availableTools,
-        hideButtons: hidePointConfigButtons
-      })), /*#__PURE__*/_react["default"].createElement(_configUi.FormSection, {
-        className: classes.flexRow
-      }, /*#__PURE__*/_react["default"].createElement("label", null, "Max No of Elements"), /*#__PURE__*/_react["default"].createElement(_numberTextField["default"], {
-        className: classes.maxNumberOfPoints,
-        min: 1,
-        max: maxMaxElements,
-        onlyIntegersAllowed: true,
-        value: graph.maxNumberOfPoints,
-        onChange: this.changeMaxNoOfPoints
-      }), pointsError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, pointsError)), /*#__PURE__*/_react["default"].createElement("label", null, "Correct Answer"), /*#__PURE__*/_react["default"].createElement(_numberLine.NumberLineComponent, {
-        onMoveElement: this.moveCorrectResponse,
-        onDeleteElements: this.deleteCorrectResponse,
-        onAddElement: this.addCorrectResponse,
-        onClearElements: this.clearCorrectResponse,
-        onUndoElement: this.undoCorrectResponse,
-        minWidth: numberLineDimensions.min,
-        maxWidth: numberLineDimensions.max,
-        answer: correctResponse //strip feedback for this model
-        ,
-        model: trimModel(model)
-      }), correctResponseError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, correctResponseError)), /*#__PURE__*/_react["default"].createElement(_configUi.AlertDialog, {
-        open: dialog.open,
-        title: "Warning",
-        text: dialog.text,
-        onConfirm: function onConfirm() {
-          return _this2.setState({
-            dialog: {
-              open: false
-            }
-          });
+      }, /*#__PURE__*/_react.default.createElement(_Info.default, {
+        fontSize: 'small',
+        color: 'primary',
+        style: {
+          marginLeft: '8px'
         }
-      }), /*#__PURE__*/_react["default"].createElement(_configUi.AlertDialog, {
-        open: correctAnswerDialog.open,
-        title: "Warning",
-        text: correctAnswerDialog.text,
-        onConfirm: function onConfirm() {
-          var indices = _this2.state.correctAnswerDialog.indices;
-
-          if (indices && indices.length > 0) {
-            _this2.deleteCorrectResponse(indices);
+      }))
+    }, "Set up the number line by entering the domain and number of tick marks to display. Labels on the number line can be edited or removed by clicking on the label."), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(_domain.default, {
+      domain: graph.domain,
+      errors: errors,
+      onChange: domain => this.graphChange({
+        domain
+      })
+    })), maxError && /*#__PURE__*/_react.default.createElement(ErrorText, null, maxError), domainError && /*#__PURE__*/_react.default.createElement(ErrorText, null, domainError), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_configUi.FormSection, null, /*#__PURE__*/_react.default.createElement(_ticks.default, {
+      ticks: graph.ticks,
+      minorLimits: minorLimits,
+      minorValues: minorValues,
+      majorValues: majorValues,
+      onChange: this.changeTicks
+    }))), /*#__PURE__*/_react.default.createElement(FlexRow, null, model.widthEnabled && /*#__PURE__*/_react.default.createElement(_size.default, {
+      size: graph,
+      min: numberLineDimensions.min,
+      max: numberLineDimensions.max,
+      step: numberLineDimensions.step,
+      onChange: this.changeSize
+    }), /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement(_arrows.default, {
+      arrows: graph.arrows,
+      onChange: this.changeArrows
+    })), widthError && /*#__PURE__*/_react.default.createElement(ErrorText, null, widthError), /*#__PURE__*/_react.default.createElement(_numberLine.NumberLineComponent, {
+      onMoveElement: () => {},
+      onDeleteElements: () => {},
+      onAddElement: () => {},
+      onClearElements: () => {},
+      onUndoElement: () => {},
+      minWidth: numberLineDimensions.min,
+      maxWidth: numberLineDimensions.max,
+      maxHeight: 70,
+      model: trimModel(initialModel)
+    }), titleEnabled && /*#__PURE__*/_react.default.createElement(StyledFormSection, {
+      label: title?.label || 'Title'
+    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
+      markup: graph.title || '',
+      onChange: this.changeGraphTitle,
+      toolbarOpts: toolbarOpts,
+      activePlugins: ['bold', 'html', 'italic', 'underline', 'strikethrough', 'image', 'math', 'languageCharacters', 'responseArea'],
+      pluginProps: getPluginProps(title?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      imageSupport: imageSupport,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    })), !graph.exhibitOnly && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_cardBar.default, {
+      header: "Define Tool Set and Correct Response"
+    }, "Select answer type and place it on the number line. Intersecting points, line segments and/or rays will appear above the number line. ", /*#__PURE__*/_react.default.createElement("i", null, "Note: A maximum of 20 points, line segments or rays may be plotted.")), /*#__PURE__*/_react.default.createElement(_cardBar.default, {
+      header: "Available Tools",
+      mini: true
+    }, "Click on the input options to be displayed to the students. All inputs will display by default."), /*#__PURE__*/_react.default.createElement(PointTypeChooser, null, /*#__PURE__*/_react.default.createElement(_pointConfig.default, {
+      onSelectionChange: this.availableTypesChange,
+      selection: graph.availableTypes,
+      availableTools: availableTools,
+      hideButtons: hidePointConfigButtons
+    })), /*#__PURE__*/_react.default.createElement(FlexRowFormSection, null, /*#__PURE__*/_react.default.createElement("label", null, "Max No of Elements"), /*#__PURE__*/_react.default.createElement(StyledNumberTextField, {
+      min: 1,
+      max: maxMaxElements,
+      onlyIntegersAllowed: true,
+      value: graph.maxNumberOfPoints,
+      onChange: this.changeMaxNoOfPoints
+    }), pointsError && /*#__PURE__*/_react.default.createElement(ErrorText, null, pointsError)), /*#__PURE__*/_react.default.createElement("label", null, "Correct Answer"), /*#__PURE__*/_react.default.createElement(_numberLine.NumberLineComponent, {
+      onMoveElement: this.moveCorrectResponse,
+      onDeleteElements: this.deleteCorrectResponse,
+      onAddElement: this.addCorrectResponse,
+      onClearElements: this.clearCorrectResponse,
+      onUndoElement: this.undoCorrectResponse,
+      minWidth: numberLineDimensions.min,
+      maxWidth: numberLineDimensions.max,
+      answer: correctResponse
+      //strip feedback for this model
+      ,
+      model: trimModel(model)
+    }), correctResponseError && /*#__PURE__*/_react.default.createElement(ErrorText, null, correctResponseError)), /*#__PURE__*/_react.default.createElement(_configUi.AlertDialog, {
+      open: dialog.open,
+      title: "Warning",
+      text: dialog.text,
+      onConfirm: () => this.setState({
+        dialog: {
+          open: false
+        }
+      })
+    }), /*#__PURE__*/_react.default.createElement(_configUi.AlertDialog, {
+      open: correctAnswerDialog.open,
+      title: "Warning",
+      text: correctAnswerDialog.text,
+      onConfirm: () => {
+        let indices = this.state.correctAnswerDialog.indices;
+        if (indices && indices.length > 0) {
+          this.deleteCorrectResponse(indices);
+        }
+        this.setState({
+          correctAnswerDialog: {
+            open: false
           }
-
-          _this2.setState({
-            correctAnswerDialog: {
-              open: false
-            }
-          });
-        },
-        onClose: function onClose() {
-          var graph = _this2.state.correctAnswerDialog.graph;
-
-          _onChange({
-            graph: graph
-          });
-
-          _this2.setState({
-            correctAnswerDialog: {
-              open: false
-            }
-          });
-        },
-        onConfirmText: 'OK',
-        onCloseText: 'Cancel'
-      }), rationaleEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-        label: rationale.label || 'Rationale',
-        className: classes.promptContainer
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        className: classes.prompt,
-        markup: model.rationale || '',
-        onChange: function onChange(rationale) {
-          return _onChange({
-            rationale: rationale
-          });
-        },
-        error: rationaleError,
-        toolbarOpts: toolbarOpts,
-        spellCheck: spellCheckEnabled,
-        pluginProps: getPluginProps(rationale === null || rationale === void 0 ? void 0 : rationale.inputConfiguration),
-        imageSupport: imageSupport,
-        uploadSoundSupport: uploadSoundSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
-        mathMlOptions: mathMlOptions
-      }), rationaleError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, rationaleError)));
-    }
-  }]);
-  return Main;
-}(_react["default"].Component);
-
+        });
+      },
+      onClose: () => {
+        const graph = this.state.correctAnswerDialog.graph;
+        onChange({
+          graph
+        });
+        this.setState({
+          correctAnswerDialog: {
+            open: false
+          }
+        });
+      },
+      onConfirmText: 'OK',
+      onCloseText: 'Cancel'
+    }), rationaleEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: rationale.label || 'Rationale'
+    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
+      markup: model.rationale || '',
+      onChange: rationale => onChange({
+        rationale
+      }),
+      error: rationaleError,
+      toolbarOpts: toolbarOpts,
+      spellCheck: spellCheckEnabled,
+      pluginProps: getPluginProps(rationale?.inputConfiguration),
+      imageSupport: imageSupport,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), rationaleError && /*#__PURE__*/_react.default.createElement(ErrorText, null, rationaleError)));
+  }
+}
 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,
-  imageSupport: _propTypes["default"].object.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,
+  imageSupport: _propTypes.default.object.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