@pie-lib/editable-html 7.17.4-next.45 → 7.17.4-next.454

package/lib/editor.js

@@ -1,5 +1,9 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,6 +21,24 @@ 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"));
@@ -43,33 +65,19 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _renderUi = require("@pie-lib/render-ui");
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+var _slatePlainSerializer = _interopRequireDefault(require("slate-plain-serializer"));
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+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 _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+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 _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+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 _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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 = {
@@ -79,24 +87,127 @@ var defaultToolbarOpts = {
   showDone: true,
   doneOn: 'blur'
 };
+var defaultResponseAreaProps = {
+  options: {},
+  respAreaToolbar: function respAreaToolbar() {},
+  onHandleAreaChange: function onHandleAreaChange() {}
+};
+var defaultLanguageCharactersProps = [];
 
 var createToolbarOpts = function createToolbarOpts(toolbarOpts) {
-  return _objectSpread({}, defaultToolbarOpts, {}, toolbarOpts);
+  return _objectSpread(_objectSpread({}, defaultToolbarOpts), toolbarOpts);
 };
 
-var Editor =
-/*#__PURE__*/
-function (_React$Component) {
-  _inherits(Editor, _React$Component);
+var Editor = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Editor, _React$Component);
 
-  function Editor(props) {
+  var _super = _createSuper(Editor);
+
+  function Editor(_props) {
     var _this;
 
-    _classCallCheck(this, Editor);
+    (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,
+          onFocus: _this.onPluginFocus,
+          onBlur: _this.onPluginBlur
+        },
+        image: {
+          onDelete: props.imageSupport && props.imageSupport["delete"] && function (src, done) {
+            props.imageSupport["delete"](src, function (e) {
+              done(e, _this.state.value);
+            });
+          },
+          insertImageRequested: props.imageSupport && function (getHandler) {
+            /**
+             * The handler is the object through which the outer context
+             * communicates file upload events like: fileChosen, cancel, progress
+             */
+            var handler = getHandler(function () {
+              return _this.state.value;
+            });
+            props.imageSupport.add(handler);
+          },
+          onFocus: _this.onPluginFocus,
+          onBlur: _this.onPluginBlur,
+          maxImageWidth: _this.props.maxImageWidth,
+          maxImageHeight: _this.props.maxImageHeight
+        },
+        toolbar: {
+          /**
+           * To minimize converting html -> state -> html
+           * We only emit markup once 'done' is clicked.
+           */
+          disableUnderline: props.disableUnderline,
+          autoWidth: props.autoWidthToolbar,
+          onDone: function onDone() {
+            var _this$state$value$sta, _this$state$value$sta2;
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(Editor).call(this, props));
+            var nonEmpty = props.nonEmpty;
+            log('[onDone]');
 
-    _defineProperty(_assertThisInitialized(_this), "onPluginBlur", function (e) {
+            _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();
+              });
+            } else {
+              _this.onEditingDone();
+            }
+          }
+        },
+        table: {
+          onFocus: function onFocus() {
+            log('[table:onFocus]...');
+
+            _this.onPluginFocus();
+          },
+          onBlur: function onBlur() {
+            log('[table:onBlur]...');
+
+            _this.onPluginBlur();
+          }
+        },
+        responseArea: {
+          type: normalizedResponseAreaProps.type,
+          options: normalizedResponseAreaProps.options,
+          maxResponseAreas: normalizedResponseAreaProps.maxResponseAreas,
+          respAreaToolbar: normalizedResponseAreaProps.respAreaToolbar,
+          onHandleAreaChange: normalizedResponseAreaProps.onHandleAreaChange,
+          error: normalizedResponseAreaProps.error,
+          onFocus: function onFocus() {
+            log('[table:onFocus]...');
+
+            _this.onPluginFocus();
+          },
+          onBlur: function onBlur() {
+            log('[table:onBlur]...');
+
+            _this.onPluginBlur();
+          }
+        },
+        languageCharacters: props.languageCharactersProps,
+        media: {
+          focus: _this.focus,
+          createChange: function createChange() {
+            return _this.state.value.change();
+          },
+          onChange: _this.onChange
+        }
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["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;
@@ -108,8 +219,7 @@ function (_React$Component) {
         _this.resetValue();
       });
     });
-
-    _defineProperty(_assertThisInitialized(_this), "onPluginFocus", function (e) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onPluginFocus", function (e) {
       log('[onPluginFocus]', e && e.target);
       var target = e && e.target;
 
@@ -130,8 +240,7 @@ function (_React$Component) {
 
       _this.stashValue();
     });
-
-    _defineProperty(_assertThisInitialized(_this), "onMathClick", function (node) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMathClick", function (node) {
       _this.editor.change(function (c) {
         return c.collapseToStartOf(node);
       });
@@ -140,8 +249,7 @@ function (_React$Component) {
         selectedNode: node
       });
     });
-
-    _defineProperty(_assertThisInitialized(_this), "onEditingDone", function () {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onEditingDone", function () {
       log('[onEditingDone]');
 
       _this.setState({
@@ -153,8 +261,7 @@ function (_React$Component) {
 
       _this.props.onChange(_this.state.value, true);
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handleBlur", function (resolve) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleBlur", function (resolve) {
       var nonEmpty = _this.props.nonEmpty;
       var doneOn = _this.state.toolbarOpts.doneOn;
 
@@ -168,7 +275,9 @@ function (_React$Component) {
       }
 
       if (doneOn === 'blur') {
-        if (nonEmpty && _this.state.value.startText.text.length === 0) {
+        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();
 
@@ -181,22 +290,39 @@ function (_React$Component) {
         }
       }
     });
-
-    _defineProperty(_assertThisInitialized(_this), "onBlur", function (event) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onBlur", function (event) {
       log('[onBlur]');
       var target = event.relatedTarget;
       var node = target ? (0, _slateReact.findNode)(target, _this.state.value) : null;
       log('[onBlur] node: ', node);
       return new Promise(function (resolve) {
         _this.setState({
-          focusedNode: node
-        }, _this.handleBlur.bind(_assertThisInitialized(_this), resolve));
+          focusedNode: !node ? null : node
+        }, _this.handleBlur.bind((0, _assertThisInitialized2["default"])(_this), resolve));
 
         _this.props.onBlur(event);
       });
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDomBlur", function (e) {
+      var editorDOM = document.querySelector("[data-key=\"".concat(_this.state.value.document.key, "\"]"));
+      setTimeout(function () {
+        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);
 
-    _defineProperty(_assertThisInitialized(_this), "onFocus", function () {
+          _this.onBlur(e);
+        }
+      }, 50);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onFocus", function () {
       return new Promise(function (resolve) {
         var editorDOM = document.querySelector("[data-key=\"".concat(_this.state.value.document.key, "\"]"));
         log('[onFocus]', document.activeElement);
@@ -231,13 +357,8 @@ function (_React$Component) {
 
 
         if (editorDOM === document.activeElement) {
-          var handleDomBlur = function handleDomBlur(e) {
-            editorDOM.removeEventListener('blur', handleDomBlur);
-
-            _this.onBlur(e);
-          };
-
-          editorDOM.addEventListener('blur', handleDomBlur);
+          editorDOM.removeEventListener('blur', _this.handleDomBlur);
+          editorDOM.addEventListener('blur', _this.handleDomBlur);
         }
 
         _this.stashValue();
@@ -247,8 +368,7 @@ function (_React$Component) {
         resolve();
       });
     });
-
-    _defineProperty(_assertThisInitialized(_this), "stashValue", function () {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "stashValue", function () {
       log('[stashValue]');
 
       if (!_this.state.stashedValue) {
@@ -257,8 +377,7 @@ function (_React$Component) {
         });
       }
     });
-
-    _defineProperty(_assertThisInitialized(_this), "resetValue", function (force) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "resetValue", function (force) {
       var _this$state = _this.state,
           value = _this$state.value,
           focusedNode = _this$state.focusedNode;
@@ -292,12 +411,17 @@ function (_React$Component) {
         return Promise.resolve({});
       }
     });
-
-    _defineProperty(_assertThisInitialized(_this), "onChange", function (change, done) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (change, done) {
       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: change.value
+        value: value
       }, function () {
         log('[onChange], call done()');
 
@@ -306,8 +430,7 @@ function (_React$Component) {
         }
       });
     });
-
-    _defineProperty(_assertThisInitialized(_this), "valueToSize", function (v) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "valueToSize", function (v) {
       if (!v) {
         return;
       }
@@ -329,8 +452,7 @@ function (_React$Component) {
 
       return;
     });
-
-    _defineProperty(_assertThisInitialized(_this), "validateNode", function (node) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "validateNode", function (node) {
       if (node.object !== 'block') return;
       var last = node.nodes.last();
       if (!last) return;
@@ -343,16 +465,16 @@ function (_React$Component) {
       log('[validateNode] parent:', parent, p);
       return undefined;
     });
-
-    _defineProperty(_assertThisInitialized(_this), "changeData", function (key, data) {
+    (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:
        *
        * <code>this.setState({changeData: { key, data}})</code>
-       * However this is causing issues with the Mathquill instance. The 'input' event stops firing on the element and no more changes get through.
-       * The issues seem to be related to the promises in onBlur/onFocus. But removing these 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.
+       * However this is causing issues with the Mathquill instance. The 'input' event stops firing on the element and no
+       * more changes get through. The issues seem to be related to the promises in onBlur/onFocus. But removing these
+       * 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}})
@@ -362,114 +484,150 @@ function (_React$Component) {
         data: data
       };
     });
-
-    _defineProperty(_assertThisInitialized(_this), "focus", function (pos, node) {
+    (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, _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 = 25;
+                  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
+                  }
+                });
+
+                if (dropContext) {
+                  _this.focus();
+                } else {
+                  range = (0, _slateReact.getEventRange)(event, editor);
+
+                  if (range) {
+                    change.select(range);
+                  }
+                }
+
+                ch = change.insertInline(inline);
+
+                _this.onChange(ch);
+
+                _context.next = 23;
+                break;
+
+              case 20:
+                _context.prev = 20;
+                _context.t0 = _context["catch"](9);
+                log('[onDropPaste] error: ', _context.t0);
+
+              case 23:
+                _context.next = 39;
+                break;
+
+              case 25:
+                if (!(type === 'fragment')) {
+                  _context.next = 29;
+                  break;
+                }
+
+                change.insertFragment(fragment);
+                _context.next = 39;
+                break;
+
+              case 29:
+                if (!(type === 'text' || type === 'html')) {
+                  _context.next = 39;
+                  break;
+                }
+
+                if (text) {
+                  _context.next = 32;
+                  break;
+                }
+
+                return _context.abrupt("return");
+
+              case 32:
+                _change$value = change.value, _document = _change$value.document, selection = _change$value.selection, startBlock = _change$value.startBlock;
+
+                if (!startBlock.isVoid) {
+                  _context.next = 35;
+                  break;
+                }
+
+                return _context.abrupt("return");
+
+              case 35:
+                defaultBlock = startBlock;
+                defaultMarks = _document.getInsertMarksAtRange(selection);
+                frag = _slatePlainSerializer["default"].deserialize(text, {
+                  defaultBlock: defaultBlock,
+                  defaultMarks: defaultMarks
+                }).document;
+                change.insertFragment(frag);
+
+              case 39:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, null, [[9, 20]]);
+      }));
 
+      return function (_x, _x2, _x3) {
+        return _ref.apply(this, arguments);
+      };
+    }());
     _this.state = {
-      value: props.value,
-      toolbarOpts: createToolbarOpts(props.toolbarOpts)
+      value: _props.value,
+      toolbarOpts: createToolbarOpts(_props.toolbarOpts)
     };
 
     _this.onResize = function () {
-      props.onChange(_this.state.value, true);
+      _props.onChange(_this.state.value, true);
     };
 
-    _this.plugins = (0, _plugins.buildPlugins)(props.activePlugins, {
-      math: {
-        onClick: _this.onMathClick,
-        onFocus: _this.onPluginFocus,
-        onBlur: _this.onPluginBlur
-      },
-      image: {
-        onDelete: _this.props.imageSupport && _this.props.imageSupport["delete"] && function (src, done) {
-          _this.props.imageSupport["delete"](src, function (e) {
-            done(e, _this.state.value);
-          });
-        },
-        insertImageRequested: _this.props.imageSupport && function (getHandler) {
-          /**
-           * The handler is the object through which the outer context
-           * communicates file upload events like: fileChosen, cancel, progress
-           */
-          var handler = getHandler(function () {
-            return _this.state.value;
-          });
-
-          _this.props.imageSupport.add(handler);
-        },
-        onFocus: _this.onPluginFocus,
-        onBlur: _this.onPluginBlur
-      },
-      toolbar: {
-        /**
-         * To minimize converting html -> state -> html
-         * We only emit markup once 'done' is clicked.
-         */
-        disableUnderline: props.disableUnderline,
-        autoWidth: props.autoWidthToolbar,
-        onDone: function onDone() {
-          var nonEmpty = _this.props.nonEmpty;
-          log('[onDone]');
-
-          _this.setState({
-            toolbarInFocus: false,
-            focusedNode: null
-          });
-
-          _this.editor.blur();
+    _this.handlePlugins(_this.props);
 
-          if (nonEmpty && _this.state.value.startText.text.length === 0) {
-            _this.resetValue(true).then(function () {
-              _this.onEditingDone();
-            });
-          } else {
-            _this.onEditingDone();
-          }
-        }
-      },
-      table: {
-        onFocus: function onFocus() {
-          log('[table:onFocus]...');
-
-          _this.onPluginFocus();
-        },
-        onBlur: function onBlur() {
-          log('[table:onBlur]...');
-
-          _this.onPluginBlur();
-        }
-      },
-      responseArea: {
-        type: props.responseAreaProps && props.responseAreaProps.type,
-        options: props.responseAreaProps && props.responseAreaProps.options,
-        respAreaToolbar: props.responseAreaProps && props.responseAreaProps.respAreaToolbar,
-        onFocus: function onFocus() {
-          log('[table:onFocus]...');
-
-          _this.onPluginFocus();
-        },
-        onBlur: function onBlur() {
-          log('[table:onBlur]...');
-
-          _this.onPluginBlur();
-        }
-      },
-      media: {
-        focus: _this.focus,
-        createChange: function createChange() {
-          return _this.state.value.change();
-        },
-        onChange: _this.onChange
-      }
-    });
     return _this;
   }
 
-  _createClass(Editor, [{
+  (0, _createClass2["default"])(Editor, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
@@ -503,14 +661,29 @@ function (_React$Component) {
           toolbarOpts: newToolbarOpts
         });
       }
+
+      if (!(0, _isEqual["default"])(nextProps.languageCharactersProps, this.props.languageCharactersProps)) {
+        this.handlePlugins(nextProps);
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      // 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
+      var zeroWidthEls = document.querySelectorAll('[data-slate-zero-width="z"]');
+      Array.from(zeroWidthEls).forEach(function (el) {
+        el.style.minWidth = '2px';
+        el.style.display = 'inline-block';
+      });
     }
   }, {
     key: "componentWillUnmount",
-
+    value:
     /**
      * Remove onResize event listener
      */
-    value: function componentWillUnmount() {
+    function componentWillUnmount() {
       window.removeEventListener('resize', this.onResize);
     } // Allowing time for onChange to take effect if it is called
 
@@ -547,6 +720,7 @@ function (_React$Component) {
 
       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,
@@ -559,16 +733,16 @@ function (_React$Component) {
           toolbarOpts = _this$state2.toolbarOpts;
       log('[render] value: ', value);
       var sizeStyle = this.buildSizeStyle();
-      var names = (0, _classnames["default"])((_classNames = {}, _defineProperty(_classNames, classes.withBg, highlightShape), _defineProperty(_classNames, classes.toolbarOnTop, toolbarOpts.alwaysVisible && toolbarOpts.position === 'top'), _classNames), className);
-      return _react["default"].createElement("div", {
-        ref: function ref(_ref) {
-          return _this3.wrapperRef = _ref;
+      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);
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        ref: function ref(_ref2) {
+          return _this3.wrapperRef = _ref2;
         },
         style: {
           width: sizeStyle.width
         },
         className: names
-      }, _react["default"].createElement(_slateReact.Editor, {
+      }, /*#__PURE__*/_react["default"].createElement(_slateReact.Editor, {
         plugins: this.plugins,
         innerRef: function innerRef(r) {
           if (r) {
@@ -578,16 +752,28 @@ function (_React$Component) {
         ref: function ref(r) {
           return _this3.editor = r && _this3.props.editorRef(r);
         },
+        toolbarRef: function toolbarRef(r) {
+          if (r) {
+            _this3.toolbarRef = r;
+          }
+        },
         value: value,
         focus: this.focus,
         onKeyDown: onKeyDown,
         onChange: this.onChange,
         onBlur: this.onBlur,
+        onDrop: function onDrop(event, editor) {
+          return _this3.onDropPaste(event, editor, true);
+        },
+        onPaste: function onPaste(event, editor) {
+          return _this3.onDropPaste(event, editor);
+        },
         onFocus: this.onFocus,
         onEditingDone: this.onEditingDone,
         focusedNode: focusedNode,
         normalize: this.normalize,
         readOnly: disabled,
+        spellCheck: spellCheck,
         className: classes.slateEditor,
         style: {
           minHeight: sizeStyle.minHeight,
@@ -601,14 +787,12 @@ function (_React$Component) {
       }));
     }
   }]);
-
   return Editor;
 }(_react["default"].Component); // TODO color - hardcoded gray background and keypad colors will need to change too
 
 
 exports.Editor = Editor;
-
-_defineProperty(Editor, "propTypes", {
+(0, _defineProperty2["default"])(Editor, "propTypes", {
   autoFocus: _propTypes["default"].bool,
   editorRef: _propTypes["default"].func.isRequired,
   onRef: _propTypes["default"].func.isRequired,
@@ -619,6 +803,7 @@ _defineProperty(Editor, "propTypes", {
   focus: _propTypes["default"].func.isRequired,
   value: _slatePropTypes["default"].value.isRequired,
   imageSupport: _propTypes["default"].object,
+  charactersLimit: _propTypes["default"].number,
   width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   minHeight: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
@@ -626,6 +811,7 @@ _defineProperty(Editor, "propTypes", {
   classes: _propTypes["default"].object.isRequired,
   highlightShape: _propTypes["default"].bool,
   disabled: _propTypes["default"].bool,
+  spellCheck: _propTypes["default"].bool,
   nonEmpty: _propTypes["default"].bool,
   disableUnderline: _propTypes["default"].bool,
   autoWidthToolbar: _propTypes["default"].bool,
@@ -635,8 +821,13 @@ _defineProperty(Editor, "propTypes", {
     type: _propTypes["default"].oneOf(['explicit-constructed-response', 'inline-dropdown', 'drag-in-the-blank']),
     options: _propTypes["default"].object,
     respAreaToolbar: _propTypes["default"].func,
-    onDelete: _propTypes["default"].func
+    onHandleAreaChange: _propTypes["default"].func
   }),
+  languageCharactersProps: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    language: _propTypes["default"].string,
+    characterIcon: _propTypes["default"].string,
+    characters: _propTypes["default"].arrayOf(_propTypes["default"].arrayOf(_propTypes["default"].string))
+  })),
   toolbarOpts: _propTypes["default"].shape({
     position: _propTypes["default"].oneOf(['bottom', 'top']),
     alignment: _propTypes["default"].oneOf(['left', 'right']),
@@ -650,17 +841,19 @@ _defineProperty(Editor, "propTypes", {
     });
     return !allValid && new Error("Invalid values: ".concat(values, ", values must be one of [").concat(_plugins.ALL_PLUGINS.join(','), "]"));
   }),
-  className: _propTypes["default"].string
+  className: _propTypes["default"].string,
+  maxImageWidth: _propTypes["default"].number,
+  maxImageHeight: _propTypes["default"].number
 });
-
-_defineProperty(Editor, "defaultProps", {
+(0, _defineProperty2["default"])(Editor, "defaultProps", {
   disableUnderline: true,
   onFocus: function onFocus() {},
   onBlur: function onBlur() {},
+  onKeyDown: function onKeyDown() {},
   toolbarOpts: defaultToolbarOpts,
-  onKeyDown: function onKeyDown() {}
+  responseAreaProps: defaultResponseAreaProps,
+  languageCharactersProps: defaultLanguageCharactersProps
 });
-
 var styles = {
   withBg: {
     backgroundColor: 'rgba(0,0,0,0.06)'
@@ -674,7 +867,7 @@ var styles = {
       color: _renderUi.color.text(),
       backgroundColor: _renderUi.color.background()
     },
-    '& tr': {
+    '& table:not([border="1"]) tr': {
       borderTop: '1px solid #dfe2e5' // TODO perhaps secondary color for background, for now disable
       // '&:nth-child(2n)': {
       //   backgroundColor: '#f6f8fa'
@@ -682,9 +875,11 @@ var styles = {
 
     },
     '& td, th': {
-      border: '1px solid #dfe2e5',
       padding: '.6em 1em',
       textAlign: 'center'
+    },
+    '& table:not([border="1"]) td, th': {
+      border: '1px solid #dfe2e5'
     }
   },
   toolbarOnTop: {