@pie-lib/editable-html 9.3.1-next.53 → 9.4.0

package/lib/editor.js

@@ -1,7 +1,9 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -18,36 +20,67 @@ Object.defineProperty(exports, "DEFAULT_PLUGINS", {
   }
 });
 exports.serialization = exports["default"] = exports.Editor = void 0;
+
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _slateReact = require("slate-react");
+
 var _slatePropTypes = _interopRequireDefault(require("slate-prop-types"));
+
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
 var serialization = _interopRequireWildcard(require("./serialization"));
+
 exports.serialization = serialization;
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _react = _interopRequireDefault(require("react"));
+
 var _slate = require("slate");
+
 var _plugins = require("./plugins");
+
 var _debug = _interopRequireDefault(require("debug"));
+
 var _styles = require("@material-ui/core/styles");
+
 var _classnames = _interopRequireDefault(require("classnames"));
+
 var _renderUi = require("@pie-lib/render-ui");
+
 var _slatePlainSerializer = _interopRequireDefault(require("slate-plain-serializer"));
+
 var _insertImageHandler = _interopRequireDefault(require("./plugins/image/insert-image-handler"));
+
 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 log = (0, _debug["default"])('editable-html:editor');
 var defaultToolbarOpts = {
   position: 'bottom',
@@ -62,20 +95,26 @@ var defaultResponseAreaProps = {
   onHandleAreaChange: function onHandleAreaChange() {}
 };
 var defaultLanguageCharactersProps = [];
+
 var createToolbarOpts = function createToolbarOpts(toolbarOpts, error) {
   return _objectSpread(_objectSpread(_objectSpread({}, defaultToolbarOpts), toolbarOpts), {}, {
     error: error
   });
 };
+
 var Editor = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(Editor, _React$Component);
+
   var _super = _createSuper(Editor);
+
   function Editor(_props) {
     var _this;
+
     (0, _classCallCheck2["default"])(this, Editor);
     _this = _super.call(this, _props);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handlePlugins", function (props) {
       var normalizedResponseAreaProps = _objectSpread(_objectSpread({}, defaultResponseAreaProps), props.responseAreaProps);
+
       _this.plugins = (0, _plugins.buildPlugins)(props.activePlugins, {
         math: {
           onClick: _this.onMathClick,
@@ -114,13 +153,17 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           autoWidth: props.autoWidthToolbar,
           onDone: function onDone() {
             var _this$state$value$sta, _this$state$value$sta2;
+
             var nonEmpty = props.nonEmpty;
             log('[onDone]');
+
             _this.setState({
               toolbarInFocus: false,
               focusedNode: null
             });
+
             _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) {
               _this.resetValue(true).then(function () {
                 _this.onEditingDone();
@@ -133,10 +176,12 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         table: {
           onFocus: function onFocus() {
             log('[table:onFocus]...');
+
             _this.onPluginFocus();
           },
           onBlur: function onBlur() {
             log('[table:onBlur]...');
+
             _this.onPluginBlur();
           }
         },
@@ -149,10 +194,12 @@ 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();
           }
         },
@@ -172,6 +219,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
       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 () {
@@ -181,10 +229,12 @@ var Editor = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["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
@@ -194,44 +244,55 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           focusedNode: null
         });
       }
+
       _this.stashValue();
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["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 () {
       log('[onEditingDone]');
+
       _this.setState({
         stashedValue: null,
         focusedNode: null
       });
+
       log('[onEditingDone] value: ', _this.state.value);
+
       _this.props.onChange(_this.state.value, true);
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["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) {
           _this.resetValue(true).then(function () {
             _this.onEditingDone();
+
             resolve();
           });
         } else {
           _this.onEditingDone();
+
           resolve();
         }
       }
@@ -246,6 +307,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           preBlurValue: _this.state.value,
           focusedNode: !node ? null : node
         }, _this.handleBlur.bind((0, _assertThisInitialized2["default"])(_this), resolve));
+
         _this.props.onBlur(event);
       });
     });
@@ -253,14 +315,19 @@ var Editor = /*#__PURE__*/function (_React$Component) {
       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);
           }
@@ -271,19 +338,21 @@ var Editor = /*#__PURE__*/function (_React$Component) {
       return new Promise(function (resolve) {
         var editorDOM = document.querySelector("[data-key=\"".concat(_this.state.value.document.key, "\"]"));
         log('[onFocus]', document.activeElement);
-
         /**
          * 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 () {
@@ -291,24 +360,29 @@ 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();
+
         resolve();
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "stashValue", function () {
       log('[stashValue]');
+
       if (!_this.state.stashedValue) {
         _this.setState({
           stashedValue: _this.state.value
@@ -317,17 +391,22 @@ var Editor = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "resetValue", function (force) {
       var _this$state = _this.state,
-        value = _this$state.value,
-        focusedNode = _this$state.focusedNode;
+          value = _this$state.value,
+          focusedNode = _this$state.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 () {
@@ -348,13 +427,16 @@ var Editor = /*#__PURE__*/function (_React$Component) {
       log('[onChange]');
       var value = change.value;
       var charactersLimit = _this.props.charactersLimit;
+
       if (value && value.document && value.document.text && value.document.text.length > charactersLimit) {
         return;
       }
+
       _this.setState({
         value: value
       }, function () {
         log('[onChange], call done()');
+
         if (done) {
           done();
         }
@@ -364,12 +446,14 @@ var Editor = /*#__PURE__*/function (_React$Component) {
       if (_this.state.value.isFocused) {
         return _this.state.value;
       }
+
       return _this.state.preBlurValue;
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "valueToSize", function (v) {
       if (!v) {
         return;
       }
+
       if (typeof v === 'string') {
         if (v.endsWith('%')) {
           return undefined;
@@ -380,9 +464,11 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           return isNaN(value) ? value : "".concat(value, "px");
         }
       }
+
       if (typeof v === 'number') {
         return "".concat(v, "px");
       }
+
       return;
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "validateNode", function (node) {
@@ -392,13 +478,14 @@ var Editor = /*#__PURE__*/function (_React$Component) {
       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) {
       log('[changeData]. .. ', key, data);
-
       /**
        * HACK ALERT: We should be calling setState here and storing the change data:
        *
@@ -408,7 +495,6 @@ 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}})
 
@@ -419,106 +505,135 @@ var Editor = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["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 _ref = (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 = 27;
-                break;
-              }
-              if (_this.props.imageSupport) {
-                _context.next = 9;
-                break;
-              }
-              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
+          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 = 27;
+                  break;
                 }
-              });
-              if (dropContext) {
-                _this.focus();
-              } else {
-                range = (0, _slateReact.getEventRange)(event, editor);
-                if (range) {
-                  change.select(range);
+
+                if (_this.props.imageSupport) {
+                  _context.next = 9;
+                  break;
                 }
-              }
-              ch = change.insertInline(inline);
-              _this.onChange(ch);
-              handler = new _insertImageHandler["default"](inline, function () {
-                return _this.state.value;
-              }, _this.onChange, true);
-              _this.props.imageSupport.add(handler);
-              _context.next = 25;
-              break;
-            case 22:
-              _context.prev = 22;
-              _context.t0 = _context["catch"](9);
-              log('[onDropPaste] error: ', _context.t0);
-            case 25:
-              _context.next = 41;
-              break;
-            case 27:
-              if (!(type === 'fragment')) {
-                _context.next = 31;
+
+                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);
+                  }
+                }
+
+                ch = change.insertInline(inline);
+
+                _this.onChange(ch);
+
+                handler = new _insertImageHandler["default"](inline, function () {
+                  return _this.state.value;
+                }, _this.onChange, true);
+
+                _this.props.imageSupport.add(handler);
+
+                _context.next = 25;
                 break;
-              }
-              change.insertFragment(fragment);
-              _context.next = 41;
-              break;
-            case 31:
-              if (!(type === 'text' || type === 'html')) {
+
+              case 22:
+                _context.prev = 22;
+                _context.t0 = _context["catch"](9);
+                log('[onDropPaste] error: ', _context.t0);
+
+              case 25:
                 _context.next = 41;
                 break;
-              }
-              if (text) {
-                _context.next = 34;
-                break;
-              }
-              return _context.abrupt("return");
-            case 34:
-              _change$value = change.value, _document = _change$value.document, selection = _change$value.selection, startBlock = _change$value.startBlock;
-              if (!startBlock.isVoid) {
-                _context.next = 37;
+
+              case 27:
+                if (!(type === 'fragment')) {
+                  _context.next = 31;
+                  break;
+                }
+
+                change.insertFragment(fragment);
+                _context.next = 41;
                 break;
-              }
-              return _context.abrupt("return");
-            case 37:
-              defaultBlock = startBlock;
-              defaultMarks = _document.getInsertMarksAtRange(selection);
-              frag = _slatePlainSerializer["default"].deserialize(text, {
-                defaultBlock: defaultBlock,
-                defaultMarks: defaultMarks
-              }).document;
-              change.insertFragment(frag);
-            case 41:
-            case "end":
-              return _context.stop();
+
+              case 31:
+                if (!(type === 'text' || type === 'html')) {
+                  _context.next = 41;
+                  break;
+                }
+
+                if (text) {
+                  _context.next = 34;
+                  break;
+                }
+
+                return _context.abrupt("return");
+
+              case 34:
+                _change$value = change.value, _document = _change$value.document, selection = _change$value.selection, startBlock = _change$value.startBlock;
+
+                if (!startBlock.isVoid) {
+                  _context.next = 37;
+                  break;
+                }
+
+                return _context.abrupt("return");
+
+              case 37:
+                defaultBlock = startBlock;
+                defaultMarks = _document.getInsertMarksAtRange(selection);
+                frag = _slatePlainSerializer["default"].deserialize(text, {
+                  defaultBlock: defaultBlock,
+                  defaultMarks: defaultMarks
+                }).document;
+                change.insertFragment(frag);
+
+              case 41:
+              case "end":
+                return _context.stop();
+            }
           }
         }, _callee, null, [[9, 22]]);
       }));
+
       return function (_x, _x2, _x3) {
         return _ref.apply(this, arguments);
       };
@@ -526,9 +641,11 @@ var Editor = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderPlaceholder", function (props) {
       var editor = props.editor;
       var document = editor.value.document;
+
       if (!editor.props.placeholder || document.text !== '' || document.nodes.size !== 1) {
         return false;
       }
+
       return /*#__PURE__*/_react["default"].createElement("span", {
         contentEditable: false,
         style: {
@@ -547,24 +664,32 @@ var Editor = /*#__PURE__*/function (_React$Component) {
       value: _props.value,
       toolbarOpts: createToolbarOpts(_props.toolbarOpts, _props.error)
     };
+
     _this.onResize = function () {
       _props.onChange(_this.state.value, true);
     };
+
     _this.handlePlugins(_this.props);
+
     return _this;
   }
+
   (0, _createClass2["default"])(Editor, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
+
       // onRef is needed to get the ref of the component because we export it using withStyles
       this.props.onRef(this);
       window.addEventListener('resize', this.onResize);
+
       if (this.editor && this.props.autoFocus) {
         Promise.resolve().then(function () {
           if (_this2.editor) {
             var editorDOM = document.querySelector("[data-key=\"".concat(_this2.editor.value.document.key, "\"]"));
+
             _this2.editor.focus();
+
             if (editorDOM) {
               editorDOM.focus();
             }
@@ -577,11 +702,13 @@ var Editor = /*#__PURE__*/function (_React$Component) {
     value: function componentWillReceiveProps(nextProps) {
       var toolbarOpts = this.state.toolbarOpts;
       var newToolbarOpts = createToolbarOpts(nextProps.toolbarOpts, nextProps.error);
+
       if (!(0, _isEqual["default"])(newToolbarOpts, toolbarOpts)) {
         this.setState({
           toolbarOpts: newToolbarOpts
         });
       }
+
       if (!(0, _isEqual["default"])(nextProps.languageCharactersProps, this.props.languageCharactersProps)) {
         this.handlePlugins(nextProps);
       }
@@ -605,9 +732,8 @@ var Editor = /*#__PURE__*/function (_React$Component) {
      */
     function componentWillUnmount() {
       window.removeEventListener('resize', this.onResize);
-    }
+    } // Allowing time for onChange to take effect if it is called
 
-    // Allowing time for onChange to take effect if it is called
   }, {
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(props) {
@@ -622,10 +748,10 @@ var Editor = /*#__PURE__*/function (_React$Component) {
     key: "buildSizeStyle",
     value: function buildSizeStyle() {
       var _this$props = this.props,
-        width = _this$props.width,
-        minHeight = _this$props.minHeight,
-        height = _this$props.height,
-        maxHeight = _this$props.maxHeight;
+          width = _this$props.width,
+          minHeight = _this$props.minHeight,
+          height = _this$props.height,
+          maxHeight = _this$props.maxHeight;
       return {
         width: this.valueToSize(width),
         height: this.valueToSize(height),
@@ -637,20 +763,21 @@ var Editor = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _classNames,
-        _this3 = this;
+          _this3 = this;
+
       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,
-        placeholder = _this$props2.placeholder,
-        pluginProps = _this$props2.pluginProps,
-        onKeyDown = _this$props2.onKeyDown;
+          disabled = _this$props2.disabled,
+          spellCheck = _this$props2.spellCheck,
+          highlightShape = _this$props2.highlightShape,
+          classes = _this$props2.classes,
+          className = _this$props2.className,
+          placeholder = _this$props2.placeholder,
+          pluginProps = _this$props2.pluginProps,
+          onKeyDown = _this$props2.onKeyDown;
       var _this$state2 = this.state,
-        value = _this$state2.value,
-        focusedNode = _this$state2.focusedNode,
-        toolbarOpts = _this$state2.toolbarOpts;
+          value = _this$state2.value,
+          focusedNode = _this$state2.focusedNode,
+          toolbarOpts = _this$state2.toolbarOpts;
       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'), _classNames), className);
@@ -712,6 +839,8 @@ 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,
@@ -795,13 +924,12 @@ 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',
       textAlign: 'center'
@@ -817,6 +945,8 @@ var styles = {
     padding: '0 !important'
   }
 };
+
 var _default = (0, _styles.withStyles)(styles)(Editor);
+
 exports["default"] = _default;
 //# sourceMappingURL=editor.js.map