@pie-lib/editable-html 11.18.6-esmbeta.0 → 11.19.0-mui-update.0

package/lib/editor.js

@@ -1,9 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -20,77 +18,40 @@ Object.defineProperty(exports, "DEFAULT_PLUGINS", {
   }
 });
 exports.serialization = exports["default"] = exports.Editor = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _slateReact = require("slate-react");
-
 var _slatePropTypes = _interopRequireDefault(require("slate-prop-types"));
-
 var _slate = require("slate");
-
 var _slatePlainSerializer = _interopRequireDefault(require("slate-plain-serializer"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
-
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _debug = _interopRequireDefault(require("debug"));
-
-var _styles = require("@material-ui/core/styles");
-
+var _styles = require("@mui/material/styles");
 var _renderUi = require("@pie-lib/render-ui");
-
 var _alertDialog = _interopRequireDefault(require("./shared/alert-dialog"));
-
-var serialization = _interopRequireWildcard(require("./serialization"));
-
-exports.serialization = serialization;
-
+var _serialization = _interopRequireWildcard(require("./serialization"));
+var serialization = _serialization;
+exports.serialization = _serialization;
 var _insertImageHandler = _interopRequireDefault(require("./plugins/image/insert-image-handler"));
-
 var _plugins = require("./plugins");
-
 var _excluded = ["customPlugins", "showParagraphs", "separateParagraphs"];
-
-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; }
-
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var log = (0, _debug["default"])('editable-html:editor');
 var defaultToolbarOpts = {
   position: 'bottom',
@@ -105,45 +66,36 @@ var defaultResponseAreaProps = {
   onHandleAreaChange: function onHandleAreaChange() {}
 };
 var defaultLanguageCharactersProps = [];
-
 var createToolbarOpts = function createToolbarOpts(toolbarOpts, error, isHtmlMode) {
   return _objectSpread(_objectSpread(_objectSpread({}, defaultToolbarOpts), toolbarOpts), {}, {
     error: error,
     isHtmlMode: isHtmlMode
   });
 };
+
 /**
  * The maximum number of characters the editor can support
  * @type {number}
  */
-
-
 var MAX_CHARACTERS_LIMIT = 1000000;
-
-var Editor = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Editor, _React$Component);
-
-  var _super = _createSuper(Editor);
-
+var Editor = exports.Editor = /*#__PURE__*/function (_React$Component) {
   function Editor(_props) {
     var _this;
-
     (0, _classCallCheck2["default"])(this, Editor);
-    _this = _super.call(this, _props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setKeypadInteraction", function (interacted) {
+    _this = _callSuper(this, Editor, [_props]);
+    (0, _defineProperty2["default"])(_this, "setKeypadInteraction", function (interacted) {
       _this.keypadInteractionDetected = interacted;
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDialog", function (open) {
+    (0, _defineProperty2["default"])(_this, "handleDialog", function (open) {
       var extraDialogProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       var callback = arguments.length > 2 ? arguments[2] : undefined;
-
       _this.setState({
         dialog: _objectSpread({
           open: open
         }, extraDialogProps)
       }, callback);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleHtmlMode", function () {
+    (0, _defineProperty2["default"])(_this, "toggleHtmlMode", function () {
       _this.setState(function (prevState) {
         return {
           isHtmlMode: !prevState.isHtmlMode,
@@ -153,15 +105,13 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         var error = _this.props.error;
         var toolbarOpts = _this.state.toolbarOpts;
         var newToolbarOpts = createToolbarOpts(toolbarOpts, error, _this.state.isHtmlMode);
-
         _this.setState({
           toolbarOpts: newToolbarOpts
         });
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handlePlugins", function (props) {
+    (0, _defineProperty2["default"])(_this, "handlePlugins", function (props) {
       var normalizedResponseAreaProps = _objectSpread(_objectSpread({}, defaultResponseAreaProps), props.responseAreaProps);
-
       var htmlPluginOpts = {
         currentValue: _this.props.value,
         isHtmlMode: _this.state.isHtmlMode,
@@ -169,10 +119,8 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         toggleHtmlMode: _this.toggleHtmlMode,
         handleAlertDialog: _this.handleDialog
       };
-
       var _ref = props.pluginProps || {},
-          customPlugins = _ref.customPlugins;
-
+        customPlugins = _ref.customPlugins;
       customPlugins = customPlugins || [];
       _this.plugins = (0, _plugins.buildPlugins)(props.activePlugins, customPlugins, {
         math: _objectSpread({
@@ -196,13 +144,11 @@ var Editor = /*#__PURE__*/function (_React$Component) {
               var newPendingImages = _this.state.pendingImages.filter(function (img) {
                 return img.key !== node.key;
               });
-
               var oldScheduled = _this.state.scheduled;
               var newState = {
                 pendingImages: newPendingImages,
                 scheduled: oldScheduled && newPendingImages.length === 0 ? false : oldScheduled
               };
-
               _this.setState(newState, function () {
                 return done(e, _this.state.value);
               });
@@ -210,30 +156,23 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           },
           insertImageRequested: props.imageSupport && function (addedImage, getHandler) {
             var pendingImages = _this.state.pendingImages;
-
             var onFinish = function onFinish(result) {
               var cb;
-
               if (_this.state.scheduled && result) {
                 // finish editing only on success
-                cb = _this.onEditingDone.bind((0, _assertThisInitialized2["default"])(_this));
+                cb = _this.onEditingDone.bind(_this);
               }
-
               var newPendingImages = _this.state.pendingImages.filter(function (img) {
                 return img.key !== addedImage.key;
               });
-
               var newState = {
                 pendingImages: newPendingImages
               };
-
               if (newPendingImages.length === 0) {
                 newState.scheduled = false;
               }
-
               _this.setState(newState, cb);
             };
-
             var callback = function callback() {
               /**
                * The handler is the object through which the outer context
@@ -244,7 +183,6 @@ var Editor = /*#__PURE__*/function (_React$Component) {
               });
               props.imageSupport.add(handler);
             };
-
             _this.setState({
               pendingImages: [].concat((0, _toConsumableArray2["default"])(pendingImages), [addedImage])
             }, callback);
@@ -263,20 +201,16 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           disableUnderline: props.disableUnderline,
           autoWidth: props.autoWidthToolbar,
           onDone: function onDone() {
-            var _this$state$value$sta, _this$state$value$sta2;
-
+            var _this$state$value$sta;
             var nonEmpty = props.nonEmpty;
             log('[onDone]');
-
             _this.setState({
               toolbarInFocus: false,
               focusedNode: null,
               focusToolbar: false
             });
-
             _this.editor.blur();
-
-            if (nonEmpty && ((_this$state$value$sta = _this.state.value.startText) === null || _this$state$value$sta === void 0 ? void 0 : (_this$state$value$sta2 = _this$state$value$sta.text) === null || _this$state$value$sta2 === void 0 ? void 0 : _this$state$value$sta2.length) === 0) {
+            if (nonEmpty && ((_this$state$value$sta = _this.state.value.startText) === null || _this$state$value$sta === void 0 || (_this$state$value$sta = _this$state$value$sta.text) === null || _this$state$value$sta === void 0 ? void 0 : _this$state$value$sta.length) === 0) {
               _this.resetValue(true).then(function () {
                 _this.onEditingDone();
               });
@@ -288,12 +222,10 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         table: {
           onFocus: function onFocus() {
             log('[table:onFocus]...');
-
             _this.onPluginFocus();
           },
           onBlur: function onBlur() {
             log('[table:onBlur]...');
-
             _this.onPluginBlur();
           }
         },
@@ -306,12 +238,10 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           error: normalizedResponseAreaProps.error,
           onFocus: function onFocus() {
             log('[table:onFocus]...');
-
             _this.onPluginFocus();
           },
           onBlur: function onBlur() {
             log('[table:onBlur]...');
-
             _this.onPluginBlur();
           }
         },
@@ -327,32 +257,28 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           uploadSoundSupport: props.uploadSoundSupport
         }
       });
-
       if (props.mathMlOptions.mmlOutput || props.mathMlOptions.mmlEditing) {
         _this.props.runSerializationOnMarkup();
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onPluginBlur", function (e) {
+    (0, _defineProperty2["default"])(_this, "onPluginBlur", function (e) {
       log('[onPluginBlur]', e && e.relatedTarget);
       var target = e && e.relatedTarget;
       var node = target ? (0, _slateReact.findNode)(target, _this.state.value) : null;
       log('[onPluginBlur] node: ', node);
-
       _this.setState({
         focusedNode: node
       }, function () {
         _this.resetValue();
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onPluginFocus", function (e) {
+    (0, _defineProperty2["default"])(_this, "onPluginFocus", function (e) {
       log('[onPluginFocus]', e && e.target);
       var target = e && e.target;
-
       if (target) {
         var node = (0, _slateReact.findNode)(target, _this.state.value);
         log('[onPluginFocus] node: ', node);
         var stashedValue = _this.state.stashedValue || _this.state.value;
-
         _this.setState({
           focusedNode: node,
           stashedValue: stashedValue
@@ -362,71 +288,68 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           focusedNode: null
         });
       }
-
       _this.stashValue();
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMathClick", function (node) {
+    (0, _defineProperty2["default"])(_this, "onMathClick", function (node) {
       _this.editor.change(function (c) {
         return c.collapseToStartOf(node);
       });
-
       _this.setState({
         selectedNode: node
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onEditingDone", function () {
+    (0, _defineProperty2["default"])(_this, "onEditingDone", function () {
       var _this$state = _this.state,
-          isHtmlMode = _this$state.isHtmlMode,
-          dialog = _this$state.dialog,
-          value = _this$state.value,
-          pendingImages = _this$state.pendingImages; // Handling HTML mode and dialog state
+        isHtmlMode = _this$state.isHtmlMode,
+        dialog = _this$state.dialog,
+        value = _this$state.value,
+        pendingImages = _this$state.pendingImages;
 
+      // Handling HTML mode and dialog state
       if (isHtmlMode) {
         // Early return if HTML mode is enabled
         if (dialog !== null && dialog !== void 0 && dialog.open) return;
-        var currentValue = (0, serialization.htmlToValue)(value.document.text);
-
+        var currentValue = (0, _serialization.htmlToValue)(value.document.text);
         var previewText = _this.renderHtmlPreviewContent();
-
         _this.openHtmlModeConfirmationDialog(currentValue, previewText);
-
         return;
       }
-
       if (pendingImages.length) {
         // schedule image processing
         _this.setState({
           scheduled: true
         });
-
         return;
-      } // Finalizing editing
-
+      }
 
+      // Finalizing editing
       log('[onEditingDone]');
-
       _this.setState({
         pendingImages: [],
         stashedValue: null,
         focusedNode: null
       });
-
       log('[onEditingDone] value: ', _this.state.value);
-
       _this.props.onChange(_this.state.value, true);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderHtmlPreviewContent", function () {
-      var classes = _this.props.classes;
+    /**
+     * Renders the HTML preview content to be displayed inside the dialog.
+     * This content includes the edited HTML and a prompt for the user.
+     */
+    (0, _defineProperty2["default"])(_this, "renderHtmlPreviewContent", function () {
       return /*#__PURE__*/_react["default"].createElement("div", {
         ref: function ref(_ref2) {
           return _this.elementRef = _ref2;
         }
-      }, /*#__PURE__*/_react["default"].createElement("div", null, "Preview of Edited Html:"), /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        defaultClassName: classes.previewText,
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "Preview of Edited Html:"), /*#__PURE__*/_react["default"].createElement(StyledPreviewText, null, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
         prompt: _this.state.value.document.text
-      }), /*#__PURE__*/_react["default"].createElement("div", null, "Would you like to save these changes ?"));
+      })), /*#__PURE__*/_react["default"].createElement("div", null, "Would you like to save these changes ?"));
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "openHtmlModeConfirmationDialog", function (currentValue, previewText) {
+    /**
+     * Opens a confirmation dialog in HTML mode, displaying the preview of the current HTML content
+     * and offering options to save or continue editing.
+     */
+    (0, _defineProperty2["default"])(_this, "openHtmlModeConfirmationDialog", function (currentValue, previewText) {
       _this.setState({
         dialog: {
           open: true,
@@ -441,131 +364,126 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         }
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleHtmlModeSaveConfirmation", function (currentValue) {
+    /**
+     * Handles the save confirmation action in HTML mode. This updates the value to the confirmed
+     * content, updates value on props, and exits the HTML mode.
+     * @param {string} currentValue - The confirmed value of the HTML content to save.
+     */
+    (0, _defineProperty2["default"])(_this, "handleHtmlModeSaveConfirmation", function (currentValue) {
       _this.setState({
         value: currentValue
       });
-
       _this.props.onChange(currentValue, true);
-
       _this.handleDialog(false);
-
       _this.toggleHtmlMode();
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "htmlModeContinueEditing", function () {
+    /**
+     * Closes the dialog in HTML mode and allows the user to continue editing the html content.
+     * This function is invoked when the user opts to not save the current changes.
+     */
+    (0, _defineProperty2["default"])(_this, "htmlModeContinueEditing", function () {
       _this.handleDialog(false);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleBlur", function (resolve) {
+    // Allowing time for onChange to take effect if it is called
+    (0, _defineProperty2["default"])(_this, "handleBlur", function (resolve) {
       var nonEmpty = _this.props.nonEmpty;
       var doneOn = _this.state.toolbarOpts.doneOn;
-
       _this.setState({
         toolbarInFocus: false,
         focusedNode: null
       });
-
       if (_this.editor) {
         _this.editor.blur();
       }
-
       if (doneOn === 'blur') {
-        var _this$state$value$sta3, _this$state$value$sta4;
-
-        if (nonEmpty && ((_this$state$value$sta3 = _this.state.value.startText) === null || _this$state$value$sta3 === void 0 ? void 0 : (_this$state$value$sta4 = _this$state$value$sta3.text) === null || _this$state$value$sta4 === void 0 ? void 0 : _this$state$value$sta4.length) === 0) {
+        var _this$state$value$sta2;
+        if (nonEmpty && ((_this$state$value$sta2 = _this.state.value.startText) === null || _this$state$value$sta2 === void 0 || (_this$state$value$sta2 = _this$state$value$sta2.text) === null || _this$state$value$sta2 === void 0 ? void 0 : _this$state$value$sta2.length) === 0) {
           _this.resetValue(true).then(function () {
             _this.onEditingDone();
-
             resolve();
           });
         } else {
           _this.onEditingDone();
-
           resolve();
         }
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onBlur", function (event) {
+    (0, _defineProperty2["default"])(_this, "onBlur", function (event) {
       var _this$doneButtonRef$c;
-
       log('[onBlur]');
       var relatedTarget = event.relatedTarget;
-      var toolbarElement = _this.toolbarRef && (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.closest("[class*=\"".concat(_this.toolbarRef.className, "\"]"))); // Check if relatedTarget is a done button
+      var toolbarElement = _this.toolbarRef && (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.closest("[class*=\"".concat(_this.toolbarRef.className, "\"]")));
 
-      var isRawDoneButton = _this.doneButtonRef && (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.closest("[class*=\"".concat((_this$doneButtonRef$c = _this.doneButtonRef.current) === null || _this$doneButtonRef$c === void 0 ? void 0 : _this$doneButtonRef$c.className, "\"]"))); // Skip onBlur handling if relatedTarget is a button from the KeyPad characters
+      // Check if relatedTarget is a done button
+      var isRawDoneButton = _this.doneButtonRef && (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.closest("[class*=\"".concat((_this$doneButtonRef$c = _this.doneButtonRef.current) === null || _this$doneButtonRef$c === void 0 ? void 0 : _this$doneButtonRef$c.className, "\"]")));
 
+      // Skip onBlur handling if relatedTarget is a button from the KeyPad characters
       _this.skipBlurHandling = _this.keypadInteractionDetected && relatedTarget !== null;
-
       if (toolbarElement && !isRawDoneButton && !_this.state.focusToolbar) {
         _this.setState({
           focusToolbar: true
         });
       }
-
       var node = relatedTarget ? (0, _slateReact.findNode)(relatedTarget, _this.state.value) : null;
       log('[onBlur] node: ', node);
       return new Promise(function (resolve) {
         if (!_this.skipBlurHandling) {
           _this.setKeypadInteraction(false);
-
           _this.setState({
             preBlurValue: _this.state.value,
             focusedNode: !node ? null : node
-          }, _this.handleBlur.bind((0, _assertThisInitialized2["default"])(_this), resolve));
+          }, _this.handleBlur.bind(_this, resolve));
         }
-
         _this.props.onBlur(event);
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDomBlur", function (e) {
+    (0, _defineProperty2["default"])(_this, "handleDomBlur", function (e) {
       var editorDOM = document.querySelector("[data-key=\"".concat(_this.state.value.document.key, "\"]"));
       setTimeout(function () {
         var stateValue = _this.state.value;
-
         if (!_this.wrapperRef) {
           return;
         }
-
         var editorElement = !editorDOM || document.activeElement.closest("[class*=\"".concat(editorDOM.className, "\"]"));
         var toolbarElement = !_this.toolbarRef || document.activeElement.closest("[class*=\"".concat(_this.toolbarRef.className, "\"]"));
-
         var isInCurrentComponent = _this.wrapperRef.contains(editorElement) || _this.wrapperRef.contains(toolbarElement);
-
         if (!isInCurrentComponent) {
           editorDOM.removeEventListener('blur', _this.handleDomBlur);
-
           if (stateValue.isFocused) {
             _this.onBlur(e);
           }
         }
       }, 50);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onFocus", function (event, change) {
+    /*
+     * Needs to be wrapped otherwise it causes issues because of race conditions
+     * Known issue for slatejs. See: https://github.com/ianstormtaylor/slate/issues/2097
+     * Using timeout I wasn't able to test this
+     *
+     * Note: The use of promises has been causing issues with MathQuill
+     * */
+    (0, _defineProperty2["default"])(_this, "onFocus", function (event, change) {
       return new Promise(function (resolve) {
         var _navigator;
-
         var editorDOM = document.querySelector("[data-key=\"".concat(_this.state.value.document.key, "\"]"));
         var isTouchDevice = typeof window !== 'undefined' && ('ontouchstart' in window || ((_navigator = navigator) === null || _navigator === void 0 ? void 0 : _navigator.maxTouchPoints) > 0);
         log('[onFocus]', document.activeElement);
-
         if (_this.keypadInteractionDetected && _this.__TEMPORARY_CHANGE_DATA) {
           _this.__TEMPORARY_CHANGE_DATA = null;
         }
+
         /**
          * This is a temporary hack - @see changeData below for some more information.
          */
-
-
         if (_this.__TEMPORARY_CHANGE_DATA) {
           var _this$__TEMPORARY_CHA = _this.__TEMPORARY_CHANGE_DATA,
-              key = _this$__TEMPORARY_CHA.key,
-              data = _this$__TEMPORARY_CHA.data;
+            key = _this$__TEMPORARY_CHA.key,
+            data = _this$__TEMPORARY_CHA.data;
           var domEl = document.querySelector("[data-key=\"".concat(key, "\"]"));
-
           if (domEl) {
             var _change = _this.state.value.change().setNodeByKey(key, {
               data: data
             });
-
             _this.setState({
               value: _change.value
             }, function () {
@@ -573,60 +491,52 @@ var Editor = /*#__PURE__*/function (_React$Component) {
             });
           }
         }
+
         /**
          * This is needed just in case the browser decides to make the editor
          * lose focus without triggering the onBlur event (can happen in a few cases).
          * This will also trigger onBlur if the user clicks outside of the page when the editor
          * is focused.
          */
-
-
         if (editorDOM === document.activeElement) {
           editorDOM.removeEventListener('blur', _this.handleDomBlur);
           editorDOM.addEventListener('blur', _this.handleDomBlur);
         }
-
         _this.stashValue();
+        _this.props.onFocus();
 
-        _this.props.onFocus(); // Added for accessibility: Ensures the editor gains focus when tabbed to for improved keyboard navigation
-
-
+        // Added for accessibility: Ensures the editor gains focus when tabbed to for improved keyboard navigation
         var shouldFocusEditor = !_this.keypadInteractionDetected && !isTouchDevice;
-
         if (shouldFocusEditor) {
-          change === null || change === void 0 ? void 0 : change.focus();
+          change === null || change === void 0 || change.focus();
         }
-
         resolve();
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "stashValue", function () {
+    (0, _defineProperty2["default"])(_this, "stashValue", function () {
       log('[stashValue]');
-
       if (!_this.state.stashedValue) {
         _this.setState({
           stashedValue: _this.state.value
         });
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "resetValue", function (force) {
+    /**
+     * Reset the value if the user didn't click done.
+     */
+    (0, _defineProperty2["default"])(_this, "resetValue", function (force) {
       var _this$state2 = _this.state,
-          value = _this$state2.value,
-          focusedNode = _this$state2.focusedNode;
-
+        value = _this$state2.value,
+        focusedNode = _this$state2.focusedNode;
       var stopReset = _this.plugins.reduce(function (s, p) {
         return s || p.stopReset && p.stopReset(_this.state.value);
       }, false);
-
       log('[resetValue]', value.isFocused, focusedNode, 'stopReset: ', stopReset);
-
       if (_this.state.stashedValue && !value.isFocused && !focusedNode && !stopReset || force) {
         log('[resetValue] resetting...');
         log('stashed', _this.state.stashedValue.document.toObject());
         log('current', _this.state.value.document.toObject());
-
         var newValue = _slate.Value.fromJSON(_this.state.stashedValue.toJSON());
-
         log('newValue: ', newValue.document);
         return new Promise(function (resolve) {
           setTimeout(function () {
@@ -643,54 +553,46 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         return Promise.resolve({});
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (change, done) {
+    (0, _defineProperty2["default"])(_this, "onChange", function (change, done) {
       log('[onChange]');
-      window.me = (0, _assertThisInitialized2["default"])(_this);
+      window.me = _this;
       var value = change.value;
       var charactersLimit = _this.props.charactersLimit;
       var limit = charactersLimit;
-
       if (!limit || limit > MAX_CHARACTERS_LIMIT) {
         limit = MAX_CHARACTERS_LIMIT;
       }
-
       if (value && value.document && value.document.text && value.document.text.length > limit) {
         return;
-      } // Mark the editor as edited when in HTML mode and its content has changed.
-      // This status will later be used to decide whether to prompt a warning to the user when exiting HTML mode.
-
+      }
 
+      // Mark the editor as edited when in HTML mode and its content has changed.
+      // This status will later be used to decide whether to prompt a warning to the user when exiting HTML mode.
       var isEditedInHtmlMode = !_this.state.isHtmlMode ? false : _this.state.value.document.text !== value.document.text ? true : _this.state.isEditedInHtmlMode;
-
       if (isEditedInHtmlMode != _this.state.isEditedInHtmlMode) {
         _this.handlePlugins(_this.props);
       }
-
       _this.setState({
         value: value,
         isEditedInHtmlMode: isEditedInHtmlMode
       }, function () {
         log('[onChange], call done()');
-
         if (done) {
           done();
         }
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getFocusedValue", function () {
+    (0, _defineProperty2["default"])(_this, "getFocusedValue", function () {
       if (_this.state.value.isFocused) {
         return _this.state.value;
       }
-
       return _this.state.preBlurValue;
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "valueToSize", function (v) {
+    (0, _defineProperty2["default"])(_this, "valueToSize", function (v) {
       if (!v) {
         return;
       }
-
       var calcRegex = /^calc\((.*)\)$/;
-
       if (typeof v === 'string') {
         if (v.endsWith('%')) {
           return undefined;
@@ -701,26 +603,24 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           return isNaN(value) ? value : "".concat(value, "px");
         }
       }
-
       if (typeof v === 'number') {
         return "".concat(v, "px");
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "validateNode", function (node) {
+    (0, _defineProperty2["default"])(_this, "validateNode", function (node) {
       if (node.object !== 'block') return;
       var last = node.nodes.last();
       if (!last) return;
       if (last.type !== 'image') return;
       log('[validateNode] last is image..');
       var parent = last.getParent(last.key);
-
       var p = _slate.Block.getParent(last.key);
-
       log('[validateNode] parent:', parent, p);
       return undefined;
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeData", function (key, data) {
+    (0, _defineProperty2["default"])(_this, "changeData", function (key, data) {
       log('[changeData]. .. ', key, data);
+
       /**
        * HACK ALERT: We should be calling setState here and storing the change data:
        *
@@ -730,6 +630,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
        * brings it's own problems. A major clean up is planned for this component so I've decided to temporarily settle
        * on this hack rather than spend more time on this.
        */
+
       // Uncomment this line to see the bug described above.
       //    this.setState({changeData: {key, data}})
 
@@ -738,150 +639,119 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         data: data
       };
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "focus", function (pos, node) {
+    (0, _defineProperty2["default"])(_this, "focus", function (pos, node) {
       var position = pos || 'end';
-
       _this.props.focus(position, node);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onDropPaste", /*#__PURE__*/function () {
-      var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(event, change, dropContext) {
-        var editor, transfer, file, type, fragment, text, src, inline, range, ch, handler, _change$value, _document, selection, startBlock, defaultBlock, defaultMarks, frag;
-
-        return _regenerator["default"].wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                editor = change.editor;
-                transfer = (0, _slateReact.getEventTransfer)(event);
-                file = transfer.files && transfer.files[0];
-                type = transfer.type;
-                fragment = transfer.fragment;
-                text = transfer.text;
-
-                if (!(file && (file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png'))) {
-                  _context.next = 28;
-                  break;
-                }
-
-                if (_this.props.imageSupport) {
-                  _context.next = 9;
-                  break;
+    (0, _defineProperty2["default"])(_this, "onDropPaste", /*#__PURE__*/function () {
+      var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(event, change, dropContext) {
+        var editor, transfer, file, type, fragment, text, src, inline, range, ch, handler, _change$value, _document, selection, startBlock, defaultBlock, defaultMarks, frag, _t;
+        return _regenerator["default"].wrap(function (_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              editor = change.editor;
+              transfer = (0, _slateReact.getEventTransfer)(event);
+              file = transfer.files && transfer.files[0];
+              type = transfer.type;
+              fragment = transfer.fragment;
+              text = transfer.text;
+              if (!(file && (file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png'))) {
+                _context.next = 5;
+                break;
+              }
+              if (_this.props.imageSupport) {
+                _context.next = 1;
+                break;
+              }
+              return _context.abrupt("return");
+            case 1:
+              _context.prev = 1;
+              log('[onDropPaste]');
+              _context.next = 2;
+              return (0, _serialization.getBase64)(file);
+            case 2:
+              src = _context.sent;
+              inline = _slate.Inline.create({
+                type: 'image',
+                isVoid: true,
+                data: {
+                  loading: false,
+                  src: src
                 }
-
-                return _context.abrupt("return");
-
-              case 9:
-                _context.prev = 9;
-                log('[onDropPaste]');
-                _context.next = 13;
-                return (0, serialization.getBase64)(file);
-
-              case 13:
-                src = _context.sent;
-                inline = _slate.Inline.create({
-                  type: 'image',
-                  isVoid: true,
-                  data: {
-                    loading: false,
-                    src: src
-                  }
-                });
-
-                if (dropContext) {
-                  _this.focus();
-                } else {
-                  range = (0, _slateReact.getEventRange)(event, editor);
-
-                  if (range) {
-                    change.select(range);
-                  }
+              });
+              if (dropContext) {
+                _this.focus();
+              } else {
+                range = (0, _slateReact.getEventRange)(event, editor);
+                if (range) {
+                  change.select(range);
                 }
-
-                ch = change.insertInline(inline);
-
-                _this.onChange(ch);
-
-                handler = new _insertImageHandler["default"](inline, function () {}, function () {
-                  return _this.state.value;
-                }, _this.onChange, true);
-                handler.fileChosen(file);
-
-                _this.props.imageSupport.add(handler);
-
-                _context.next = 26;
+              }
+              ch = change.insertInline(inline);
+              _this.onChange(ch);
+              handler = new _insertImageHandler["default"](inline, function () {}, function () {
+                return _this.state.value;
+              }, _this.onChange, true);
+              handler.fileChosen(file);
+              _this.props.imageSupport.add(handler);
+              _context.next = 4;
+              break;
+            case 3:
+              _context.prev = 3;
+              _t = _context["catch"](1);
+              log('[onDropPaste] error: ', _t);
+            case 4:
+              _context.next = 9;
+              break;
+            case 5:
+              if (!(type === 'fragment')) {
+                _context.next = 6;
                 break;
-
-              case 23:
-                _context.prev = 23;
-                _context.t0 = _context["catch"](9);
-                log('[onDropPaste] error: ', _context.t0);
-
-              case 26:
-                _context.next = 42;
+              }
+              change.insertFragment(fragment);
+              _context.next = 9;
+              break;
+            case 6:
+              if (!(type === 'text' || type === 'html')) {
+                _context.next = 9;
                 break;
-
-              case 28:
-                if (!(type === 'fragment')) {
-                  _context.next = 32;
-                  break;
-                }
-
-                change.insertFragment(fragment);
-                _context.next = 42;
+              }
+              if (text) {
+                _context.next = 7;
                 break;
-
-              case 32:
-                if (!(type === 'text' || type === 'html')) {
-                  _context.next = 42;
-                  break;
-                }
-
-                if (text) {
-                  _context.next = 35;
-                  break;
-                }
-
-                return _context.abrupt("return");
-
-              case 35:
-                _change$value = change.value, _document = _change$value.document, selection = _change$value.selection, startBlock = _change$value.startBlock;
-
-                if (!startBlock.isVoid) {
-                  _context.next = 38;
-                  break;
-                }
-
-                return _context.abrupt("return");
-
-              case 38:
-                defaultBlock = startBlock;
-                defaultMarks = _document.getInsertMarksAtRange(selection);
-                frag = _slatePlainSerializer["default"].deserialize(text, {
-                  defaultBlock: defaultBlock,
-                  defaultMarks: defaultMarks
-                }).document;
-                change.insertFragment(frag);
-
-              case 42:
-              case "end":
-                return _context.stop();
-            }
+              }
+              return _context.abrupt("return");
+            case 7:
+              _change$value = change.value, _document = _change$value.document, selection = _change$value.selection, startBlock = _change$value.startBlock;
+              if (!startBlock.isVoid) {
+                _context.next = 8;
+                break;
+              }
+              return _context.abrupt("return");
+            case 8:
+              defaultBlock = startBlock;
+              defaultMarks = _document.getInsertMarksAtRange(selection);
+              frag = _slatePlainSerializer["default"].deserialize(text, {
+                defaultBlock: defaultBlock,
+                defaultMarks: defaultMarks
+              }).document;
+              change.insertFragment(frag);
+            case 9:
+            case "end":
+              return _context.stop();
           }
-        }, _callee, null, [[9, 23]]);
+        }, _callee, null, [[1, 3]]);
       }));
-
       return function (_x, _x2, _x3) {
         return _ref3.apply(this, arguments);
       };
     }());
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderPlaceholder", function (props) {
+    (0, _defineProperty2["default"])(_this, "renderPlaceholder", function (props) {
       var editor = props.editor;
       var document = editor.value.document;
-
       if (!editor.props.placeholder || document.text !== '' || document.nodes.size !== 1 || !document.isEmpty) {
         return false;
       }
-
       return /*#__PURE__*/_react["default"].createElement("span", {
         contentEditable: false,
         style: {
@@ -910,27 +780,24 @@ var Editor = /*#__PURE__*/function (_React$Component) {
     _this.keyPadCharacterRef = /*#__PURE__*/_react["default"].createRef();
     _this.doneButtonRef = /*#__PURE__*/_react["default"].createRef();
     _this.keypadInteractionDetected = false;
-    _this.toggleHtmlMode = _this.toggleHtmlMode.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleToolbarFocus = _this.handleToolbarFocus.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleToolbarBlur = _this.handleToolbarBlur.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.toggleHtmlMode = _this.toggleHtmlMode.bind(_this);
+    _this.handleToolbarFocus = _this.handleToolbarFocus.bind(_this);
+    _this.handleToolbarBlur = _this.handleToolbarBlur.bind(_this);
     _this.onResize = (0, _debounce["default"])(function () {
       if (!_this.state.isHtmlMode && _props.onChange) {
         _props.onChange(_this.state.value, true);
       }
     }, 50);
-
     _this.handlePlugins(_this.props);
-
     return _this;
   }
-
-  (0, _createClass2["default"])(Editor, [{
+  (0, _inherits2["default"])(Editor, _React$Component);
+  return (0, _createClass2["default"])(Editor, [{
     key: "handleToolbarFocus",
     value: function handleToolbarFocus() {
       if (this.state.focusToolbar) {
         return;
       }
-
       this.setState({
         focusToolbar: true
       });
@@ -939,7 +806,6 @@ var Editor = /*#__PURE__*/function (_React$Component) {
     key: "handleToolbarBlur",
     value: function handleToolbarBlur() {
       var _this2 = this;
-
       setTimeout(function () {
         if (!_this2.toolbarContainsFocus()) {
           _this2.setState({
@@ -960,28 +826,22 @@ var Editor = /*#__PURE__*/function (_React$Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this$props$className,
-          _this3 = this;
-
-      // onRef is needed to get the ref of the component because we export it using withStyles
+        _this3 = this;
+      // onRef is needed to get the ref of the component
       this.props.onRef(this);
       window.addEventListener('resize', this.onResize);
       var isResponseAreaEditor = (_this$props$className = this.props.className) === null || _this$props$className === void 0 ? void 0 : _this$props$className.includes('response-area-editor');
-
       if (isResponseAreaEditor && this.editor) {
         var responseAreaEditor = document.querySelector("[data-key=\"".concat(this.editor.value.document.key, "\"]"));
-
         if (responseAreaEditor) {
           responseAreaEditor.setAttribute('aria-label', 'Answer');
         }
       }
-
       if (this.editor && this.props.autoFocus) {
         Promise.resolve().then(function () {
           if (_this3.editor) {
             var editorDOM = document.querySelector("[data-key=\"".concat(_this3.editor.value.document.key, "\"]"));
-
             _this3.editor.focus();
-
             if (editorDOM) {
               editorDOM.focus();
             }
@@ -992,28 +852,23 @@ var Editor = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var _nextProps$value, _nextProps$value$docu, _this$props$value;
-
+      var _nextProps$value, _this$props$value;
       var _this$state3 = this.state,
-          isHtmlMode = _this$state3.isHtmlMode,
-          toolbarOpts = _this$state3.toolbarOpts;
+        isHtmlMode = _this$state3.isHtmlMode,
+        toolbarOpts = _this$state3.toolbarOpts;
       var newToolbarOpts = createToolbarOpts(nextProps.toolbarOpts, nextProps.error, isHtmlMode);
-
       if (!(0, _isEqual["default"])(newToolbarOpts, toolbarOpts)) {
         this.setState({
           toolbarOpts: newToolbarOpts
         });
       }
-
       var differentCharacterProps = !(0, _isEqual["default"])(nextProps.languageCharactersProps, this.props.languageCharactersProps);
       var differentMathMlProps = !(0, _isEqual["default"])(nextProps.mathMlOptions, this.props.mathMlOptions);
       var differentImageMaxDimensionsProps = !(0, _isEqual["default"])(nextProps.maxImageWidth, this.props.maxImageWidth) || !(0, _isEqual["default"])(nextProps.maxImageHeight, this.props.maxImageHeight);
-
       if (differentCharacterProps || differentMathMlProps || differentImageMaxDimensionsProps) {
         this.handlePlugins(nextProps);
       }
-
-      if (!((_nextProps$value = nextProps.value) !== null && _nextProps$value !== void 0 && (_nextProps$value$docu = _nextProps$value.document) !== null && _nextProps$value$docu !== void 0 && _nextProps$value$docu.equals((_this$props$value = this.props.value) === null || _this$props$value === void 0 ? void 0 : _this$props$value.document))) {
+      if (!((_nextProps$value = nextProps.value) !== null && _nextProps$value !== void 0 && (_nextProps$value = _nextProps$value.document) !== null && _nextProps$value !== void 0 && _nextProps$value.equals((_this$props$value = this.props.value) === null || _this$props$value === void 0 ? void 0 : _this$props$value.document))) {
         this.setState({
           focus: false,
           value: nextProps.value
@@ -1025,13 +880,13 @@ var Editor = /*#__PURE__*/function (_React$Component) {
     value: function componentDidUpdate(prevProps, prevState) {
       // The cursor is on a zero width element and when that is placed near void elements, it is not visible
       // so we increase the width to at least 2px in order for the user to see it
+
       // Trigger plugins and finish editing if:
       // 1. The 'isHtmlMode' state has been toggled.
       // 2. We're currently in 'isHtmlMode' and the editor value has been modified.
       if (this.state.isHtmlMode !== prevState.isHtmlMode || this.state.isHtmlMode && !prevState.isEditedInHtmlMode && this.state.isEditedInHtmlMode) {
         this.handlePlugins(this.props);
       }
-
       var zeroWidthEls = document.querySelectorAll('[data-slate-zero-width="z"]');
       Array.from(zeroWidthEls).forEach(function (el) {
         el.style.minWidth = '2px';
@@ -1046,18 +901,17 @@ var Editor = /*#__PURE__*/function (_React$Component) {
      */
     function componentWillUnmount() {
       window.removeEventListener('resize', this.onResize);
-    } // Allowing time for onChange to take effect if it is called
-
+    }
   }, {
     key: "buildSizeStyle",
     value: function buildSizeStyle() {
       var _this$props = this.props,
-          minWidth = _this$props.minWidth,
-          width = _this$props.width,
-          maxWidth = _this$props.maxWidth,
-          minHeight = _this$props.minHeight,
-          height = _this$props.height,
-          maxHeight = _this$props.maxHeight;
+        minWidth = _this$props.minWidth,
+        width = _this$props.width,
+        maxWidth = _this$props.maxWidth,
+        minHeight = _this$props.minHeight,
+        height = _this$props.height,
+        maxHeight = _this$props.maxHeight;
       return {
         width: this.valueToSize(width),
         minWidth: this.valueToSize(minWidth),
@@ -1070,41 +924,39 @@ var Editor = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _classNames,
-          _this4 = this,
-          _value$document,
-          _classNames2;
-
+      var _this4 = this,
+        _value$document;
       var _this$props2 = this.props,
-          disabled = _this$props2.disabled,
-          spellCheck = _this$props2.spellCheck,
-          highlightShape = _this$props2.highlightShape,
-          classes = _this$props2.classes,
-          className = _this$props2.className,
-          isEditor = _this$props2.isEditor,
-          placeholder = _this$props2.placeholder,
-          pluginProps = _this$props2.pluginProps,
-          onKeyDown = _this$props2.onKeyDown; // We don't want to send customPlugins to slate.
+        disabled = _this$props2.disabled,
+        spellCheck = _this$props2.spellCheck,
+        highlightShape = _this$props2.highlightShape,
+        className = _this$props2.className,
+        placeholder = _this$props2.placeholder,
+        pluginProps = _this$props2.pluginProps,
+        onKeyDown = _this$props2.onKeyDown;
+      // We don't want to send customPlugins to slate.
       // Not sure if they would do any harm, but I think it's better to not send them.
       // We use custom plugins to be able to add custom buttons
       // eslint-disable-next-line no-unused-vars
-
       var _ref4 = pluginProps || {},
-          customPlugins = _ref4.customPlugins,
-          showParagraphs = _ref4.showParagraphs,
-          separateParagraphs = _ref4.separateParagraphs,
-          otherPluginProps = (0, _objectWithoutProperties2["default"])(_ref4, _excluded);
-
+        customPlugins = _ref4.customPlugins,
+        showParagraphs = _ref4.showParagraphs,
+        separateParagraphs = _ref4.separateParagraphs,
+        otherPluginProps = (0, _objectWithoutProperties2["default"])(_ref4, _excluded);
       var _this$state4 = this.state,
-          value = _this$state4.value,
-          focusedNode = _this$state4.focusedNode,
-          toolbarOpts = _this$state4.toolbarOpts,
-          dialog = _this$state4.dialog,
-          scheduled = _this$state4.scheduled;
+        value = _this$state4.value,
+        focusedNode = _this$state4.focusedNode,
+        toolbarOpts = _this$state4.toolbarOpts,
+        dialog = _this$state4.dialog,
+        scheduled = _this$state4.scheduled;
       log('[render] value: ', value);
       var sizeStyle = this.buildSizeStyle();
-      var names = (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.withBg, highlightShape), (0, _defineProperty2["default"])(_classNames, classes.toolbarOnTop, toolbarOpts.alwaysVisible && toolbarOpts.position === 'top'), (0, _defineProperty2["default"])(_classNames, classes.scheduled, scheduled), _classNames), className);
-      return /*#__PURE__*/_react["default"].createElement("div", {
+      var wrapperClassNames = (0, _classnames["default"])({
+        withBg: highlightShape,
+        toolbarOnTop: toolbarOpts.alwaysVisible && toolbarOpts.position === 'top',
+        scheduled: scheduled
+      }, className);
+      return /*#__PURE__*/_react["default"].createElement(StyledEditorWrapper, {
         ref: function ref(_ref5) {
           return _this4.wrapperRef = _ref5;
         },
@@ -1113,11 +965,15 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           minWidth: sizeStyle.minWidth,
           maxWidth: sizeStyle.maxWidth
         },
-        className: names,
-        id: "editor-".concat(value === null || value === void 0 ? void 0 : (_value$document = value.document) === null || _value$document === void 0 ? void 0 : _value$document.key)
-      }, scheduled && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.uploading
-      }, "Uploading image and then saving..."), /*#__PURE__*/_react["default"].createElement(_slateReact.Editor, {
+        className: wrapperClassNames,
+        id: "editor-".concat(value === null || value === void 0 || (_value$document = value.document) === null || _value$document === void 0 ? void 0 : _value$document.key)
+      }, scheduled && /*#__PURE__*/_react["default"].createElement(StyledUploadingMessage, null, "Uploading image and then saving..."), /*#__PURE__*/_react["default"].createElement(StyledSlateEditor, {
+        className: (0, _classnames["default"])({
+          noPadding: toolbarOpts === null || toolbarOpts === void 0 ? void 0 : toolbarOpts.noPadding,
+          showParagraph: showParagraphs && !showParagraphs.disabled,
+          separateParagraph: separateParagraphs && !separateParagraphs.disabled
+        })
+      }, /*#__PURE__*/_react["default"].createElement(_slateReact.Editor, {
         plugins: this.plugins,
         innerRef: function innerRef(r) {
           if (r) {
@@ -1155,7 +1011,6 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         readOnly: disabled,
         spellCheck: spellCheck,
         autoCorrect: spellCheck,
-        className: (0, _classnames["default"])((_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, classes.noPadding, toolbarOpts === null || toolbarOpts === void 0 ? void 0 : toolbarOpts.noPadding), (0, _defineProperty2["default"])(_classNames2, classes.showParagraph, showParagraphs && !showParagraphs.disabled), (0, _defineProperty2["default"])(_classNames2, classes.separateParagraph, separateParagraphs && !separateParagraphs.disabled), _classNames2), classes.slateEditor),
         style: {
           minHeight: sizeStyle.minHeight,
           height: sizeStyle.height,
@@ -1166,7 +1021,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         placeholder: placeholder,
         renderPlaceholder: this.renderPlaceholder,
         onDataChange: this.changeData
-      }), /*#__PURE__*/_react["default"].createElement(_alertDialog["default"], {
+      })), /*#__PURE__*/_react["default"].createElement(_alertDialog["default"], {
         open: dialog.open,
         title: dialog.title,
         text: dialog.text,
@@ -1177,11 +1032,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
       }));
     }
   }]);
-  return Editor;
 }(_react["default"].Component); // TODO color - hardcoded gray background and keypad colors will need to change too
-
-
-exports.Editor = Editor;
 (0, _defineProperty2["default"])(Editor, "propTypes", {
   autoFocus: _propTypes["default"].bool,
   editorRef: _propTypes["default"].func.isRequired,
@@ -1210,7 +1061,6 @@ exports.Editor = Editor;
   height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   minHeight: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   maxHeight: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  classes: _propTypes["default"].object.isRequired,
   highlightShape: _propTypes["default"].bool,
   disabled: _propTypes["default"].bool,
   spellCheck: _propTypes["default"].bool,
@@ -1282,23 +1132,31 @@ exports.Editor = Editor;
   extraCSSRules: null,
   isEditor: false
 });
-var styles = {
-  withBg: {
-    backgroundColor: 'rgba(0,0,0,0.06)'
-  },
-  scheduled: {
-    opacity: 0.5,
-    pointerEvents: 'none',
-    position: 'relative'
-  },
-  uploading: {
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)'
-  },
-  slateEditor: {
-    fontFamily: 'Roboto, sans-serif',
+var StyledEditorWrapper = (0, _styles.styled)('div')(function (_ref6) {
+  var theme = _ref6.theme,
+    scheduled = _ref6.scheduled;
+  return {
+    '&.withBg': {
+      backgroundColor: 'rgba(0,0,0,0.06)'
+    },
+    '&.scheduled': {
+      opacity: 0.5,
+      pointerEvents: 'none',
+      position: 'relative'
+    },
+    '&.toolbarOnTop': {
+      marginTop: '45px'
+    }
+  };
+});
+var StyledUploadingMessage = (0, _styles.styled)('div')({
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)'
+});
+var StyledSlateEditor = (0, _styles.styled)('div')(function () {
+  return {
     '& table': {
       tableLayout: 'fixed',
       width: '100%',
@@ -1307,11 +1165,11 @@ var styles = {
       backgroundColor: _renderUi.color.background()
     },
     '& table:not([border="1"]) tr': {
-      borderTop: '1px solid #dfe2e5' // TODO perhaps secondary color for background, for now disable
+      borderTop: '1px solid #dfe2e5'
+      // TODO perhaps secondary color for background, for now disable
       // '&:nth-child(2n)': {
       //   backgroundColor: '#f6f8fa'
       // }
-
     },
     '& td, th': {
       padding: '.6em 1em',
@@ -1319,38 +1177,32 @@ var styles = {
     },
     '& table:not([border="1"]) td, th': {
       border: '1px solid #dfe2e5'
+    },
+    '&.showParagraph': {
+      // a div that has a div after it
+      '& > div:has(+ div)::after': {
+        display: 'block',
+        content: '"¶"',
+        fontSize: '1em',
+        color: '#146EB3'
+      }
+    },
+    '&.separateParagraph': {
+      // a div that has a div after it
+      '& > div:has(+ div)': {
+        marginBottom: '1em'
+      }
+    },
+    '&.noPadding': {
+      padding: '0 !important'
     }
-  },
-  showParagraph: {
-    // a div that has a div after it
-    '& > div:has(+ div)::after': {
-      display: 'block',
-      content: '"¶"',
-      fontSize: '1em',
-      color: '#146EB3'
-    }
-  },
-  separateParagraph: {
-    // a div that has a div after it
-    '& > div:has(+ div)': {
-      marginBottom: '1em'
-    }
-  },
-  toolbarOnTop: {
-    marginTop: '45px'
-  },
-  noPadding: {
-    padding: '0 !important'
-  },
-  previewText: {
-    marginBottom: '36px',
-    marginTop: '6px',
-    padding: '20px',
-    backgroundColor: 'rgba(0,0,0,0.06)'
-  }
-};
-
-var _default = (0, _styles.withStyles)(styles)(Editor);
-
-exports["default"] = _default;
+  };
+});
+var StyledPreviewText = (0, _styles.styled)('div')({
+  marginBottom: '36px',
+  marginTop: '6px',
+  padding: '20px',
+  backgroundColor: 'rgba(0,0,0,0.06)'
+});
+var _default = exports["default"] = Editor;
 //# sourceMappingURL=editor.js.map