slate-react 0.58.0 → 0.58.4

package/dist/index.js

@@ -28,6 +28,58 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
+var defineProperty = _defineProperty;
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+var arrayWithHoles = _arrayWithHoles;
+
+function _iterableToArrayLimit(arr, i) {
+  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
+    return;
+  }
+
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
+
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+var iterableToArrayLimit = _iterableToArrayLimit;
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance");
+}
+
+var nonIterableRest = _nonIterableRest;
+
+function _slicedToArray(arr, i) {
+  return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || nonIterableRest();
+}
+
+var slicedToArray = _slicedToArray;
+
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -43,9 +95,11 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+var objectWithoutPropertiesLoose = _objectWithoutPropertiesLoose;
+
 function _objectWithoutProperties(source, excluded) {
   if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var target = objectWithoutPropertiesLoose(source, excluded);
   var key, i;
 
   if (Object.getOwnPropertySymbols) {
@@ -62,6 +116,46 @@ function _objectWithoutProperties(source, excluded) {
   return target;
 }
 
+var objectWithoutProperties = _objectWithoutProperties;
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) {
+    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+      arr2[i] = arr[i];
+    }
+
+    return arr2;
+  }
+}
+
+var arrayWithoutHoles = _arrayWithoutHoles;
+
+function _iterableToArray(iter) {
+  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+}
+
+var iterableToArray = _iterableToArray;
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance");
+}
+
+var nonIterableSpread = _nonIterableSpread;
+
+function _toConsumableArray(arr) {
+  return arrayWithoutHoles(arr) || iterableToArray(arr) || nonIterableSpread();
+}
+
+var toConsumableArray = _toConsumableArray;
+
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+
+var classCallCheck = _classCallCheck;
+
 /**
  * An auto-incrementing identifier for keys.
  */
@@ -71,12 +165,11 @@ var n = 0;
  * want to be able to use them as keys in `WeakMap` objects.
  */
 
-class Key {
-  constructor() {
-    this.id = "".concat(n++);
-  }
+var Key = function Key() {
+  classCallCheck(this, Key);
 
-}
+  this.id = "".concat(n++);
+};
 
 /**
  * Two weak maps that allow us rebuild a path given a node. They are populated
@@ -111,52 +204,52 @@ var EDITOR_TO_ON_CHANGE = new WeakMap();
 
 var PLACEHOLDER_SYMBOL = Symbol('placeholder');
 
-/**
- * Types.
- */
 /**
  * Check if a DOM node is a comment node.
  */
 
-var isDOMComment = value => {
+var isDOMComment = function isDOMComment(value) {
   return isDOMNode(value) && value.nodeType === 8;
 };
 /**
  * Check if a DOM node is an element node.
  */
 
-var isDOMElement = value => {
+var isDOMElement = function isDOMElement(value) {
   return isDOMNode(value) && value.nodeType === 1;
 };
 /**
  * Check if a value is a DOM node.
  */
 
-var isDOMNode = value => {
+var isDOMNode = function isDOMNode(value) {
   return value instanceof Node;
 };
 /**
  * Check if a DOM node is an element node.
  */
 
-var isDOMText = value => {
+var isDOMText = function isDOMText(value) {
   return isDOMNode(value) && value.nodeType === 3;
 };
 /**
  * Checks whether a paste event is a plaintext-only event.
  */
 
-var isPlainTextOnlyPaste = event => {
+var isPlainTextOnlyPaste = function isPlainTextOnlyPaste(event) {
   return event.clipboardData && event.clipboardData.getData('text/plain') !== '' && event.clipboardData.types.length === 1;
 };
 /**
  * Normalize a DOM point so that it always refers to a text node.
  */
 
-var normalizeDOMPoint = domPoint => {
-  var [node, offset] = domPoint; // If it's an element node, its offset refers to the index of its children
+var normalizeDOMPoint = function normalizeDOMPoint(domPoint) {
+  var _domPoint = slicedToArray(domPoint, 2),
+      node = _domPoint[0],
+      offset = _domPoint[1]; // If it's an element node, its offset refers to the index of its children
   // including comment nodes, so try to find the right text child node.
 
+
   if (isDOMElement(node) && node.childNodes.length) {
     var isLast = offset === node.childNodes.length;
     var direction = isLast ? 'backward' : 'forward';
@@ -181,10 +274,8 @@ var normalizeDOMPoint = domPoint => {
  * `direction`.
  */
 
-var getEditableChild = (parent, index, direction) => {
-  var {
-    childNodes
-  } = parent;
+var getEditableChild = function getEditableChild(parent, index, direction) {
+  var childNodes = parent.childNodes;
   var child = childNodes[index];
   var i = index;
   var triedForward = false;
@@ -223,7 +314,7 @@ var getEditableChild = (parent, index, direction) => {
  * The domNode must be attached to the DOM.
  */
 
-var getPlainText = domNode => {
+var getPlainText = function getPlainText(domNode) {
   var text = '';
 
   if (isDOMText(domNode) && domNode.nodeValue) {
@@ -231,7 +322,8 @@ var getPlainText = domNode => {
   }
 
   if (isDOMElement(domNode)) {
-    for (var childNode of Array.from(domNode.childNodes)) {
+    for (var _i = 0, _Array$from = Array.from(domNode.childNodes); _i < _Array$from.length; _i++) {
+      var childNode = _Array$from[_i];
       text += getPlainText(childNode);
     }
 
@@ -249,7 +341,7 @@ var ReactEditor = {
   /**
    * Find a key for a Slate node.
    */
-  findKey(editor, node) {
+  findKey: function findKey(editor, node) {
     var key = NODE_TO_KEY.get(node);
 
     if (!key) {
@@ -263,7 +355,7 @@ var ReactEditor = {
   /**
    * Find the path of Slate node.
    */
-  findPath(editor, node) {
+  findPath: function findPath(editor, node) {
     var path = [];
     var child = node;
 
@@ -294,21 +386,21 @@ var ReactEditor = {
   /**
    * Check if the editor is focused.
    */
-  isFocused(editor) {
+  isFocused: function isFocused(editor) {
     return !!IS_FOCUSED.get(editor);
   },
 
   /**
    * Check if the editor is in read-only mode.
    */
-  isReadOnly(editor) {
+  isReadOnly: function isReadOnly(editor) {
     return !!IS_READ_ONLY.get(editor);
   },
 
   /**
    * Blur the editor.
    */
-  blur(editor) {
+  blur: function blur(editor) {
     var el = ReactEditor.toDOMNode(editor, editor);
     IS_FOCUSED.set(editor, false);
 
@@ -320,7 +412,7 @@ var ReactEditor = {
   /**
    * Focus the editor.
    */
-  focus(editor) {
+  focus: function focus(editor) {
     var el = ReactEditor.toDOMNode(editor, editor);
     IS_FOCUSED.set(editor, true);
 
@@ -334,10 +426,8 @@ var ReactEditor = {
   /**
    * Deselect the editor.
    */
-  deselect(editor) {
-    var {
-      selection
-    } = editor;
+  deselect: function deselect(editor) {
+    var selection = editor.selection;
     var domSelection = window.getSelection();
 
     if (domSelection && domSelection.rangeCount > 0) {
@@ -352,11 +442,10 @@ var ReactEditor = {
   /**
    * Check if a DOM node is within the editor.
    */
-  hasDOMNode(editor, target) {
+  hasDOMNode: function hasDOMNode(editor, target) {
     var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-    var {
-      editable = false
-    } = options;
+    var _options$editable = options.editable,
+        editable = _options$editable === void 0 ? false : _options$editable;
     var editorEl = ReactEditor.toDOMNode(editor, editor);
     var targetEl; // COMPAT: In Firefox, reading `target.nodeType` will throw an error if
     // target is originating from an internal "restricted" element (e.g. a
@@ -381,21 +470,21 @@ var ReactEditor = {
   /**
    * Insert data from a `DataTransfer` into the editor.
    */
-  insertData(editor, data) {
+  insertData: function insertData(editor, data) {
     editor.insertData(data);
   },
 
   /**
    * Sets data from the currently selected fragment on a `DataTransfer`.
    */
-  setFragmentData(editor, data) {
+  setFragmentData: function setFragmentData(editor, data) {
     editor.setFragmentData(data);
   },
 
   /**
    * Find the native DOM element from a Slate node.
    */
-  toDOMNode(editor, node) {
+  toDOMNode: function toDOMNode(editor, node) {
     var domNode = slate.Editor.isEditor(node) ? EDITOR_TO_ELEMENT.get(editor) : KEY_TO_ELEMENT.get(ReactEditor.findKey(editor, node));
 
     if (!domNode) {
@@ -408,13 +497,16 @@ var ReactEditor = {
   /**
    * Find a native DOM selection point from a Slate point.
    */
-  toDOMPoint(editor, point) {
-    var [node] = slate.Editor.node(editor, point.path);
+  toDOMPoint: function toDOMPoint(editor, point) {
+    var _Editor$node = slate.Editor.node(editor, point.path),
+        _Editor$node2 = slicedToArray(_Editor$node, 1),
+        node = _Editor$node2[0];
+
     var el = ReactEditor.toDOMNode(editor, node);
     var domPoint; // If we're inside a void node, force the offset to 0, otherwise the zero
     // width spacing character will result in an incorrect offset of 1
 
-    if (slate.Editor.void(editor, {
+    if (slate.Editor["void"](editor, {
       at: point
     })) {
       point = {
@@ -430,16 +522,15 @@ var ReactEditor = {
     var texts = Array.from(el.querySelectorAll(selector));
     var start = 0;
 
-    for (var text of texts) {
+    for (var _i = 0, _texts = texts; _i < _texts.length; _i++) {
+      var text = _texts[_i];
       var domNode = text.childNodes[0];
 
       if (domNode == null || domNode.textContent == null) {
         continue;
       }
 
-      var {
-        length
-      } = domNode.textContent;
+      var length = domNode.textContent.length;
       var attr = text.getAttribute('data-slate-length');
       var trueLength = attr == null ? length : parseInt(attr, 10);
       var end = start + trueLength;
@@ -463,20 +554,27 @@ var ReactEditor = {
   /**
    * Find a native DOM range from a Slate `range`.
    */
-  toDOMRange(editor, range) {
-    var {
-      anchor,
-      focus
-    } = range;
+  toDOMRange: function toDOMRange(editor, range) {
+    var anchor = range.anchor,
+        focus = range.focus;
     var isBackward = slate.Range.isBackward(range);
     var domAnchor = ReactEditor.toDOMPoint(editor, anchor);
     var domFocus = slate.Range.isCollapsed(range) ? domAnchor : ReactEditor.toDOMPoint(editor, focus);
     var domRange = window.document.createRange();
-    var [startNode, startOffset] = isBackward ? domFocus : domAnchor;
-    var [endNode, endOffset] = isBackward ? domAnchor : domFocus; // A slate Point at zero-width Leaf always has an offset of 0 but a native DOM selection at
+
+    var _ref = isBackward ? domFocus : domAnchor,
+        _ref2 = slicedToArray(_ref, 2),
+        startNode = _ref2[0],
+        startOffset = _ref2[1];
+
+    var _ref3 = isBackward ? domAnchor : domFocus,
+        _ref4 = slicedToArray(_ref3, 2),
+        endNode = _ref4[0],
+        endOffset = _ref4[1]; // A slate Point at zero-width Leaf always has an offset of 0 but a native DOM selection at
     // zero-width node has an offset of 1 so we have to check if we are in a zero-width node and
     // adjust the offset accordingly.
 
+
     var startEl = isDOMElement(startNode) ? startNode : startNode.parentElement;
     var isStartAtZeroWidth = !!startEl.getAttribute('data-slate-zero-width');
     var endEl = isDOMElement(endNode) ? endNode : endNode.parentElement;
@@ -489,7 +587,7 @@ var ReactEditor = {
   /**
    * Find a Slate node from a native DOM `element`.
    */
-  toSlateNode(editor, domNode) {
+  toSlateNode: function toSlateNode(editor, domNode) {
     var domEl = isDOMElement(domNode) ? domNode : domNode.parentElement;
 
     if (domEl && !domEl.hasAttribute('data-slate-node')) {
@@ -508,16 +606,15 @@ var ReactEditor = {
   /**
    * Get the target range from a DOM `event`.
    */
-  findEventRange(editor, event) {
+  findEventRange: function findEventRange(editor, event) {
     if ('nativeEvent' in event) {
       event = event.nativeEvent;
     }
 
-    var {
-      clientX: x,
-      clientY: y,
-      target
-    } = event;
+    var _event = event,
+        x = _event.clientX,
+        y = _event.clientY,
+        target = _event.target;
 
     if (x == null || y == null) {
       throw new Error("Cannot resolve a Slate range from a DOM event: ".concat(event));
@@ -545,9 +642,8 @@ var ReactEditor = {
 
 
     var domRange;
-    var {
-      document
-    } = window; // COMPAT: In Firefox, `caretRangeFromPoint` doesn't exist. (2016/07/25)
+    var _window = window,
+        document = _window.document; // COMPAT: In Firefox, `caretRangeFromPoint` doesn't exist. (2016/07/25)
 
     if (document.caretRangeFromPoint) {
       domRange = document.caretRangeFromPoint(x, y);
@@ -573,8 +669,12 @@ var ReactEditor = {
   /**
    * Find a Slate point from a DOM selection's `domNode` and `domOffset`.
    */
-  toSlatePoint(editor, domPoint) {
-    var [nearestNode, nearestOffset] = normalizeDOMPoint(domPoint);
+  toSlatePoint: function toSlatePoint(editor, domPoint) {
+    var _normalizeDOMPoint = normalizeDOMPoint(domPoint),
+        _normalizeDOMPoint2 = slicedToArray(_normalizeDOMPoint, 2),
+        nearestNode = _normalizeDOMPoint2[0],
+        nearestOffset = _normalizeDOMPoint2[1];
+
     var parentNode = nearestNode.parentNode;
     var textNode = null;
     var offset = 0;
@@ -591,8 +691,8 @@ var ReactEditor = {
         range.setStart(textNode, 0);
         range.setEnd(nearestNode, nearestOffset);
         var contents = range.cloneContents();
-        var removals = [...contents.querySelectorAll('[data-slate-zero-width]'), ...contents.querySelectorAll('[contenteditable=false]')];
-        removals.forEach(el => {
+        var removals = [].concat(toConsumableArray(contents.querySelectorAll('[data-slate-zero-width]')), toConsumableArray(contents.querySelectorAll('[contenteditable=false]')));
+        removals.forEach(function (el) {
           el.parentNode.removeChild(el);
         }); // COMPAT: Edge has a bug where Range.prototype.toString() will
         // convert \n into \r\n. The bug causes a loop when slate-react
@@ -631,15 +731,15 @@ var ReactEditor = {
     var slateNode = ReactEditor.toSlateNode(editor, textNode);
     var path = ReactEditor.findPath(editor, slateNode);
     return {
-      path,
-      offset
+      path: path,
+      offset: offset
     };
   },
 
   /**
    * Find a Slate range from a DOM range or selection.
    */
-  toSlateRange(editor, domRange) {
+  toSlateRange: function toSlateRange(editor, domRange) {
     var el = domRange instanceof Selection ? domRange.anchorNode : domRange.startContainer;
     var anchorNode;
     var anchorOffset;
@@ -670,11 +770,10 @@ var ReactEditor = {
     var anchor = ReactEditor.toSlatePoint(editor, [anchorNode, anchorOffset]);
     var focus = isCollapsed ? anchor : ReactEditor.toSlatePoint(editor, [focusNode, focusOffset]);
     return {
-      anchor,
-      focus
+      anchor: anchor,
+      focus: focus
     };
   }
-
 };
 
 /**
@@ -686,7 +785,7 @@ var FocusedContext = React.createContext(false);
  * Get the current `focused` state of the editor.
  */
 
-var useFocused = () => {
+var useFocused = function useFocused() {
   return React.useContext(FocusedContext);
 };
 
@@ -699,7 +798,7 @@ var EditorContext = React.createContext(null);
  * Get the current editor object from the React context.
  */
 
-var useEditor = () => {
+var useEditor = function useEditor() {
   var editor = React.useContext(EditorContext);
 
   if (!editor) {
@@ -719,14 +818,16 @@ var SlateContext = React.createContext(null);
  * Get the current editor object from the React context.
  */
 
-var useSlate = () => {
+var useSlate = function useSlate() {
   var context = React.useContext(SlateContext);
 
   if (!context) {
     throw new Error("The `useSlate` hook must be used inside the <SlateProvider> component's context.");
   }
 
-  var [editor] = context;
+  var _context = slicedToArray(context, 1),
+      editor = _context[0];
+
   return editor;
 };
 
@@ -735,29 +836,31 @@ var useSlate = () => {
  * is a mutable singleton so it won't ever register as "changed" otherwise.
  */
 
-var Slate = props => {
-  var {
-    editor,
-    children,
-    onChange,
-    value
-  } = props,
-      rest = _objectWithoutProperties(props, ["editor", "children", "onChange", "value"]);
-
-  var [key, setKey] = React.useState(0);
-  var context = React.useMemo(() => {
+var Slate = function Slate(props) {
+  var editor = props.editor,
+      children = props.children,
+      onChange = props.onChange,
+      value = props.value,
+      rest = objectWithoutProperties(props, ["editor", "children", "onChange", "value"]);
+
+  var _useState = React.useState(0),
+      _useState2 = slicedToArray(_useState, 2),
+      key = _useState2[0],
+      setKey = _useState2[1];
+
+  var context = React.useMemo(function () {
     editor.children = value;
     Object.assign(editor, rest);
     return [editor];
-  }, [key, value, ...Object.values(rest)]);
-  var onContextChange = React.useCallback(() => {
+  }, [key, value].concat(toConsumableArray(Object.values(rest))));
+  var onContextChange = React.useCallback(function () {
     onChange(editor.children);
     setKey(key + 1);
   }, [key, onChange]);
   EDITOR_TO_ON_CHANGE.set(editor, onContextChange);
-  React.useEffect(() => {
-    return () => {
-      EDITOR_TO_ON_CHANGE.set(editor, () => {});
+  React.useEffect(function () {
+    return function () {
+      EDITOR_TO_ON_CHANGE.set(editor, function () {});
     };
   }, []);
   return React__default.createElement(SlateContext.Provider, {
@@ -778,7 +881,7 @@ var ReadOnlyContext = React.createContext(false);
  * Get the current `readOnly` state of the editor.
  */
 
-var useReadOnly = () => {
+var useReadOnly = function useReadOnly() {
   return React.useContext(ReadOnlyContext);
 };
 
@@ -791,7 +894,7 @@ var SelectedContext = React.createContext(false);
  * Get the current `selected` state of an element.
  */
 
-var useSelected = () => {
+var useSelected = function useSelected() {
   return React.useContext(SelectedContext);
 };
 
@@ -799,14 +902,12 @@ var useSelected = () => {
  * `withReact` adds React and DOM specific behaviors to the editor.
  */
 
-var withReact = editor => {
+var withReact = function withReact(editor) {
   var e = editor;
-  var {
-    apply,
-    onChange
-  } = e;
+  var apply = e.apply,
+      onChange = e.onChange;
 
-  e.apply = op => {
+  e.apply = function (op) {
     var matches = [];
 
     switch (op.type) {
@@ -814,11 +915,34 @@ var withReact = editor => {
       case 'remove_text':
       case 'set_node':
         {
-          for (var [node, path] of slate.Editor.levels(e, {
-            at: op.path
-          })) {
-            var key = ReactEditor.findKey(e, node);
-            matches.push([path, key]);
+          var _iteratorNormalCompletion = true;
+          var _didIteratorError = false;
+          var _iteratorError = undefined;
+
+          try {
+            for (var _iterator = slate.Editor.levels(e, {
+              at: op.path
+            })[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+              var _step$value = slicedToArray(_step.value, 2),
+                  node = _step$value[0],
+                  path = _step$value[1];
+
+              var key = ReactEditor.findKey(e, node);
+              matches.push([path, key]);
+            }
+          } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+          } finally {
+            try {
+              if (!_iteratorNormalCompletion && _iterator["return"] != null) {
+                _iterator["return"]();
+              }
+            } finally {
+              if (_didIteratorError) {
+                throw _iteratorError;
+              }
+            }
           }
 
           break;
@@ -829,12 +953,35 @@ var withReact = editor => {
       case 'merge_node':
       case 'split_node':
         {
-          for (var [_node, _path] of slate.Editor.levels(e, {
-            at: slate.Path.parent(op.path)
-          })) {
-            var _key = ReactEditor.findKey(e, _node);
+          var _iteratorNormalCompletion2 = true;
+          var _didIteratorError2 = false;
+          var _iteratorError2 = undefined;
 
-            matches.push([_path, _key]);
+          try {
+            for (var _iterator2 = slate.Editor.levels(e, {
+              at: slate.Path.parent(op.path)
+            })[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+              var _step2$value = slicedToArray(_step2.value, 2),
+                  _node = _step2$value[0],
+                  _path = _step2$value[1];
+
+              var _key = ReactEditor.findKey(e, _node);
+
+              matches.push([_path, _key]);
+            }
+          } catch (err) {
+            _didIteratorError2 = true;
+            _iteratorError2 = err;
+          } finally {
+            try {
+              if (!_iteratorNormalCompletion2 && _iterator2["return"] != null) {
+                _iterator2["return"]();
+              }
+            } finally {
+              if (_didIteratorError2) {
+                throw _iteratorError2;
+              }
+            }
           }
 
           break;
@@ -843,26 +990,35 @@ var withReact = editor => {
 
     apply(op);
 
-    for (var [_path2, _key2] of matches) {
-      var [_node2] = slate.Editor.node(e, _path2);
+    for (var _i = 0, _matches = matches; _i < _matches.length; _i++) {
+      var _matches$_i = slicedToArray(_matches[_i], 2),
+          _path2 = _matches$_i[0],
+          _key2 = _matches$_i[1];
+
+      var _Editor$node = slate.Editor.node(e, _path2),
+          _Editor$node2 = slicedToArray(_Editor$node, 1),
+          _node2 = _Editor$node2[0];
+
       NODE_TO_KEY.set(_node2, _key2);
     }
   };
 
-  e.setFragmentData = data => {
-    var {
-      selection
-    } = e;
+  e.setFragmentData = function (data) {
+    var selection = e.selection;
 
     if (!selection) {
       return;
     }
 
-    var [start, end] = slate.Range.edges(selection);
-    var startVoid = slate.Editor.void(e, {
+    var _Range$edges = slate.Range.edges(selection),
+        _Range$edges2 = slicedToArray(_Range$edges, 2),
+        start = _Range$edges2[0],
+        end = _Range$edges2[1];
+
+    var startVoid = slate.Editor["void"](e, {
       at: start.path
     });
-    var endVoid = slate.Editor.void(e, {
+    var endVoid = slate.Editor["void"](e, {
       at: end.path
     });
 
@@ -876,7 +1032,7 @@ var withReact = editor => {
     var contents = domRange.cloneContents();
     var attach = contents.childNodes[0]; // Make sure attach is non-empty, since empty nodes will not get copied.
 
-    contents.childNodes.forEach(node => {
+    contents.childNodes.forEach(function (node) {
       if (node.textContent && node.textContent.trim() !== '') {
         attach = node;
       }
@@ -885,7 +1041,9 @@ var withReact = editor => {
     // content, since the spacer is before void's content in the DOM.
 
     if (endVoid) {
-      var [voidNode] = endVoid;
+      var _endVoid = slicedToArray(endVoid, 1),
+          voidNode = _endVoid[0];
+
       var r = domRange.cloneRange();
       var domNode = ReactEditor.toDOMNode(e, voidNode);
       r.setEndAfter(domNode);
@@ -902,7 +1060,7 @@ var withReact = editor => {
     // show up elsewhere when pasted.
 
 
-    Array.from(contents.querySelectorAll('[data-slate-zero-width]')).forEach(zw => {
+    Array.from(contents.querySelectorAll('[data-slate-zero-width]')).forEach(function (zw) {
       var isNewline = zw.getAttribute('data-slate-zero-width') === 'n';
       zw.textContent = isNewline ? '\n' : '';
     }); // Set a `data-slate-fragment` attribute on a non-empty node, so it shows up
@@ -934,7 +1092,7 @@ var withReact = editor => {
     document.body.removeChild(div);
   };
 
-  e.insertData = data => {
+  e.insertData = function (data) {
     var fragment = data.getData('application/x-slate-fragment');
 
     if (fragment) {
@@ -949,26 +1107,46 @@ var withReact = editor => {
     if (text) {
       var lines = text.split(/\r\n|\r|\n/);
       var split = false;
+      var _iteratorNormalCompletion3 = true;
+      var _didIteratorError3 = false;
+      var _iteratorError3 = undefined;
 
-      for (var line of lines) {
-        if (split) {
-          slate.Transforms.splitNodes(e, {
-            always: true
-          });
-        }
+      try {
+        for (var _iterator3 = lines[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+          var line = _step3.value;
+
+          if (split) {
+            slate.Transforms.splitNodes(e, {
+              always: true
+            });
+          }
 
-        slate.Transforms.insertText(e, line);
-        split = true;
+          slate.Transforms.insertText(e, line);
+          split = true;
+        }
+      } catch (err) {
+        _didIteratorError3 = true;
+        _iteratorError3 = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion3 && _iterator3["return"] != null) {
+            _iterator3["return"]();
+          }
+        } finally {
+          if (_didIteratorError3) {
+            throw _iteratorError3;
+          }
+        }
       }
     }
   };
 
-  e.onChange = () => {
+  e.onChange = function () {
     // COMPAT: React doesn't batch `setState` hook calls, which means that the
     // children and selection can get out of sync for one render pass. So we
     // have to use this unstable API to ensure it batches them. (2019/12/03)
     // https://github.com/facebook/react/issues/14259#issuecomment-439702367
-    ReactDOM.unstable_batchedUpdates(() => {
+    ReactDOM.unstable_batchedUpdates(function () {
       var onContextChange = EDITOR_TO_ON_CHANGE.get(e);
 
       if (onContextChange) {
@@ -986,13 +1164,11 @@ var withReact = editor => {
  * Leaf content strings.
  */
 
-var String = props => {
-  var {
-    isLast,
-    leaf,
-    parent,
-    text
-  } = props;
+var String = function String(props) {
+  var isLast = props.isLast,
+      leaf = props.leaf,
+      parent = props.parent,
+      text = props.text;
   var editor = useEditor();
   var path = ReactEditor.findPath(editor, text);
   var parentPath = slate.Path.parent(path); // COMPAT: Render text inside void nodes with a zero-width space.
@@ -1038,11 +1214,10 @@ var String = props => {
  */
 
 
-var TextString = props => {
-  var {
-    text,
-    isTrailing = false
-  } = props;
+var TextString = function TextString(props) {
+  var text = props.text,
+      _props$isTrailing = props.isTrailing,
+      isTrailing = _props$isTrailing === void 0 ? false : _props$isTrailing;
   return React__default.createElement("span", {
     "data-slate-string": true
   }, text, isTrailing ? '\n' : null);
@@ -1052,29 +1227,30 @@ var TextString = props => {
  */
 
 
-var ZeroWidthString = props => {
-  var {
-    length = 0,
-    isLineBreak = false
-  } = props;
+var ZeroWidthString = function ZeroWidthString(props) {
+  var _props$length = props.length,
+      length = _props$length === void 0 ? 0 : _props$length,
+      _props$isLineBreak = props.isLineBreak,
+      isLineBreak = _props$isLineBreak === void 0 ? false : _props$isLineBreak;
   return React__default.createElement("span", {
     "data-slate-zero-width": isLineBreak ? 'n' : 'z',
     "data-slate-length": length
-  }, '\uFEFF', isLineBreak ? React__default.createElement("br", null) : null);
+  }, "\uFEFF", isLineBreak ? React__default.createElement("br", null) : null);
 };
 
 /**
  * Individual leaves in a text node with unique formatting.
  */
 
-var Leaf = props => {
-  var {
-    leaf,
-    isLast,
-    text,
-    parent,
-    renderLeaf = props => React__default.createElement(DefaultLeaf, Object.assign({}, props))
-  } = props;
+var Leaf = function Leaf(props) {
+  var leaf = props.leaf,
+      isLast = props.isLast,
+      text = props.text,
+      parent = props.parent,
+      _props$renderLeaf = props.renderLeaf,
+      renderLeaf = _props$renderLeaf === void 0 ? function (props) {
+    return React__default.createElement(DefaultLeaf, Object.assign({}, props));
+  } : _props$renderLeaf;
   var children = React__default.createElement(String, {
     isLast: isLast,
     leaf: leaf,
@@ -1088,11 +1264,14 @@ var Leaf = props => {
       style: {
         pointerEvents: 'none',
         display: 'inline-block',
-        verticalAlign: 'text-top',
         width: '0',
         maxWidth: '100%',
         whiteSpace: 'nowrap',
-        opacity: '0.333'
+        opacity: '0.333',
+        userSelect: 'none',
+        fontStyle: 'normal',
+        fontWeight: 'normal',
+        textDecoration: 'none'
       }
     }, leaf.placeholder), children);
   } // COMPAT: Having the `data-` attributes on these leaf elements ensures that
@@ -1104,25 +1283,23 @@ var Leaf = props => {
     'data-slate-leaf': true
   };
   return renderLeaf({
-    attributes,
-    children,
-    leaf,
-    text
+    attributes: attributes,
+    children: children,
+    leaf: leaf,
+    text: text
   });
 };
 
-var MemoizedLeaf = React__default.memo(Leaf, (prev, next) => {
+var MemoizedLeaf = React__default.memo(Leaf, function (prev, next) {
   return next.parent === prev.parent && next.isLast === prev.isLast && next.renderLeaf === prev.renderLeaf && next.text === prev.text && slate.Text.matches(next.leaf, prev.leaf);
 });
 /**
  * The default custom leaf renderer.
  */
 
-var DefaultLeaf = props => {
-  var {
-    attributes,
-    children
-  } = props;
+var DefaultLeaf = function DefaultLeaf(props) {
+  var attributes = props.attributes,
+      children = props.children;
   return React__default.createElement("span", Object.assign({}, attributes), children);
 };
 
@@ -1136,14 +1313,12 @@ var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutE
  * Text.
  */
 
-var Text = props => {
-  var {
-    decorations,
-    isLast,
-    parent,
-    renderLeaf,
-    text
-  } = props;
+var Text = function Text(props) {
+  var decorations = props.decorations,
+      isLast = props.isLast,
+      parent = props.parent,
+      renderLeaf = props.renderLeaf,
+      text = props.text;
   var editor = useEditor();
   var ref = React.useRef(null);
   var leaves = slate.Text.decorations(text, decorations);
@@ -1163,14 +1338,14 @@ var Text = props => {
   } // Update element-related weak maps with the DOM element ref.
 
 
-  useIsomorphicLayoutEffect(() => {
+  useIsomorphicLayoutEffect(function () {
     if (ref.current) {
       KEY_TO_ELEMENT.set(key, ref.current);
       NODE_TO_ELEMENT.set(text, ref.current);
       ELEMENT_TO_NODE.set(ref.current, text);
     } else {
-      KEY_TO_ELEMENT.delete(key);
-      NODE_TO_ELEMENT.delete(text);
+      KEY_TO_ELEMENT["delete"](key);
+      NODE_TO_ELEMENT["delete"](text);
     }
   });
   return React__default.createElement("span", {
@@ -1179,7 +1354,7 @@ var Text = props => {
   }, children);
 };
 
-var MemoizedText = React__default.memo(Text, (prev, next) => {
+var MemoizedText = React__default.memo(Text, function (prev, next) {
   return next.parent === prev.parent && next.isLast === prev.isLast && next.renderLeaf === prev.renderLeaf && next.text === prev.text;
 });
 
@@ -1187,15 +1362,16 @@ var MemoizedText = React__default.memo(Text, (prev, next) => {
  * Element.
  */
 
-var Element = props => {
-  var {
-    decorate,
-    decorations,
-    element,
-    renderElement = p => React__default.createElement(DefaultElement, Object.assign({}, p)),
-    renderLeaf,
-    selection
-  } = props;
+var Element = function Element(props) {
+  var decorate = props.decorate,
+      decorations = props.decorations,
+      element = props.element,
+      _props$renderElement = props.renderElement,
+      renderElement = _props$renderElement === void 0 ? function (p) {
+    return React__default.createElement(DefaultElement, Object.assign({}, p));
+  } : _props$renderElement,
+      renderLeaf = props.renderLeaf,
+      selection = props.selection;
   var ref = React.useRef(null);
   var editor = useEditor();
   var readOnly = useReadOnly();
@@ -1213,7 +1389,7 @@ var Element = props => {
 
   var attributes = {
     'data-slate-node': 'element',
-    ref
+    ref: ref
   };
 
   if (isInline) {
@@ -1240,7 +1416,12 @@ var Element = props => {
     }
 
     var Tag = isInline ? 'span' : 'div';
-    var [[_text]] = slate.Node.texts(element);
+
+    var _Node$texts = slate.Node.texts(element),
+        _Node$texts2 = slicedToArray(_Node$texts, 1),
+        _Node$texts2$ = slicedToArray(_Node$texts2[0], 1),
+        _text = _Node$texts2$[0];
+
     children = readOnly ? null : React__default.createElement(Tag, {
       "data-slate-spacer": true,
       style: {
@@ -1260,38 +1441,36 @@ var Element = props => {
   } // Update element-related weak maps with the DOM element ref.
 
 
-  useIsomorphicLayoutEffect(() => {
+  useIsomorphicLayoutEffect(function () {
     if (ref.current) {
       KEY_TO_ELEMENT.set(key, ref.current);
       NODE_TO_ELEMENT.set(element, ref.current);
       ELEMENT_TO_NODE.set(ref.current, element);
     } else {
-      KEY_TO_ELEMENT.delete(key);
-      NODE_TO_ELEMENT.delete(element);
+      KEY_TO_ELEMENT["delete"](key);
+      NODE_TO_ELEMENT["delete"](element);
     }
   });
   return React__default.createElement(SelectedContext.Provider, {
     value: !!selection
   }, renderElement({
-    attributes,
-    children,
-    element
+    attributes: attributes,
+    children: children,
+    element: element
   }));
 };
 
-var MemoizedElement = React__default.memo(Element, (prev, next) => {
+var MemoizedElement = React__default.memo(Element, function (prev, next) {
   return prev.decorate === next.decorate && prev.element === next.element && prev.renderElement === next.renderElement && prev.renderLeaf === next.renderLeaf && isRangeListEqual(prev.decorations, next.decorations) && (prev.selection === next.selection || !!prev.selection && !!next.selection && slate.Range.equals(prev.selection, next.selection));
 });
 /**
  * The default element renderer.
  */
 
-var DefaultElement = props => {
-  var {
-    attributes,
-    children,
-    element
-  } = props;
+var DefaultElement = function DefaultElement(props) {
+  var attributes = props.attributes,
+      children = props.children,
+      element = props.element;
   var editor = useEditor();
   var Tag = editor.isInline(element) ? 'span' : 'div';
   return React__default.createElement(Tag, Object.assign({}, attributes, {
@@ -1308,7 +1487,7 @@ var DefaultElement = props => {
  * kept in order, and the odd case where they aren't is okay to re-render for.
  */
 
-var isRangeListEqual = (list, another) => {
+var isRangeListEqual = function isRangeListEqual(list, another) {
   if (list.length !== another.length) {
     return false;
   }
@@ -1329,15 +1508,13 @@ var isRangeListEqual = (list, another) => {
  * Children.
  */
 
-var Children = props => {
-  var {
-    decorate,
-    decorations,
-    node,
-    renderElement,
-    renderLeaf,
-    selection
-  } = props;
+var Children = function Children(props) {
+  var decorate = props.decorate,
+      decorations = props.decorations,
+      node = props.node,
+      renderElement = props.renderElement,
+      renderLeaf = props.renderLeaf,
+      selection = props.selection;
   var editor = useEditor();
   var path = ReactEditor.findPath(editor, node);
   var children = [];
@@ -1350,12 +1527,31 @@ var Children = props => {
     var range = slate.Editor.range(editor, p);
     var sel = selection && slate.Range.intersection(range, selection);
     var ds = decorate([n, p]);
+    var _iteratorNormalCompletion = true;
+    var _didIteratorError = false;
+    var _iteratorError = undefined;
 
-    for (var dec of decorations) {
-      var d = slate.Range.intersection(dec, range);
+    try {
+      for (var _iterator = decorations[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var dec = _step.value;
+        var d = slate.Range.intersection(dec, range);
 
-      if (d) {
-        ds.push(d);
+        if (d) {
+          ds.push(d);
+        }
+      }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator["return"] != null) {
+          _iterator["return"]();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
       }
     }
 
@@ -1392,7 +1588,9 @@ var IS_APPLE = typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.use
 var IS_FIREFOX = typeof navigator !== 'undefined' && /^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);
 var IS_SAFARI = typeof navigator !== 'undefined' && /Version\/[\d\.]+.*Safari/.test(navigator.userAgent); // "modern" Edge was released at 79.x
 
-var IS_EDGE_LEGACY = typeof navigator !== 'undefined' && /Edge?\/(?:[0-6][0-9]|[0-7][0-8])/i.test(navigator.userAgent);
+var IS_EDGE_LEGACY = typeof navigator !== 'undefined' && /Edge?\/(?:[0-6][0-9]|[0-7][0-8])/i.test(navigator.userAgent); // Native beforeInput events don't work well with react on Chrome 75 and older, Chrome 76+ can use beforeInput
+
+var IS_CHROME_LEGACY = typeof navigator !== 'undefined' && /Chrome?\/(?:[0-7][0-5]|[0-6][0-9])/i.test(navigator.userAgent);
 
 /**
  * Hotkey mappings for each platform.
@@ -1438,14 +1636,14 @@ var WINDOWS_HOTKEYS = {
  * Create a platform-aware hotkey checker.
  */
 
-var create = key => {
+var create = function create(key) {
   var generic = HOTKEYS[key];
   var apple = APPLE_HOTKEYS[key];
   var windows = WINDOWS_HOTKEYS[key];
   var isGeneric = generic && isHotkey.isKeyHotkey(generic);
   var isApple = apple && isHotkey.isKeyHotkey(apple);
   var isWindows = windows && isHotkey.isKeyHotkey(windows);
-  return event => {
+  return function (event) {
     if (isGeneric && isGeneric(event)) return true;
     if (IS_APPLE && isApple && isApple(event)) return true;
     if (!IS_APPLE && isWindows && isWindows(event)) return true;
@@ -1485,52 +1683,55 @@ var Hotkeys = {
 
 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(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+// Chrome Legacy doesn't support `beforeinput` correctly
 
-var HAS_BEFORE_INPUT_SUPPORT = !(IS_FIREFOX || IS_EDGE_LEGACY);
+var HAS_BEFORE_INPUT_SUPPORT = !(IS_FIREFOX || IS_EDGE_LEGACY || IS_CHROME_LEGACY);
 /**
  * Editable.
  */
 
-var Editable = props => {
-  var {
-    autoFocus,
-    decorate = defaultDecorate,
-    onDOMBeforeInput: propsOnDOMBeforeInput,
-    placeholder,
-    readOnly = false,
-    renderElement,
-    renderLeaf,
-    style = {},
-    as: Component = 'div'
-  } = props,
-      attributes = _objectWithoutProperties(props, ["autoFocus", "decorate", "onDOMBeforeInput", "placeholder", "readOnly", "renderElement", "renderLeaf", "style", "as"]);
+var Editable = function Editable(props) {
+  var autoFocus = props.autoFocus,
+      _props$decorate = props.decorate,
+      decorate = _props$decorate === void 0 ? defaultDecorate : _props$decorate,
+      propsOnDOMBeforeInput = props.onDOMBeforeInput,
+      placeholder = props.placeholder,
+      _props$readOnly = props.readOnly,
+      readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
+      renderElement = props.renderElement,
+      renderLeaf = props.renderLeaf,
+      _props$style = props.style,
+      style = _props$style === void 0 ? {} : _props$style,
+      _props$as = props.as,
+      Component = _props$as === void 0 ? 'div' : _props$as,
+      attributes = objectWithoutProperties(props, ["autoFocus", "decorate", "onDOMBeforeInput", "placeholder", "readOnly", "renderElement", "renderLeaf", "style", "as"]);
 
   var editor = useSlate();
   var ref = React.useRef(null); // Update internal state on each render.
 
   IS_READ_ONLY.set(editor, readOnly); // Keep track of some state for the event handler logic.
 
-  var state = React.useMemo(() => ({
-    isComposing: false,
-    isUpdatingSelection: false,
-    latestElement: null
-  }), []); // Update element-related weak maps with the DOM element ref.
+  var state = React.useMemo(function () {
+    return {
+      isComposing: false,
+      isUpdatingSelection: false,
+      latestElement: null
+    };
+  }, []); // Update element-related weak maps with the DOM element ref.
 
-  useIsomorphicLayoutEffect(() => {
+  useIsomorphicLayoutEffect(function () {
     if (ref.current) {
       EDITOR_TO_ELEMENT.set(editor, ref.current);
       NODE_TO_ELEMENT.set(editor, ref.current);
       ELEMENT_TO_NODE.set(ref.current, editor);
     } else {
-      NODE_TO_ELEMENT.delete(editor);
+      NODE_TO_ELEMENT["delete"](editor);
     }
   }); // Whenever the editor updates, make sure the DOM selection state is in sync.
 
-  useIsomorphicLayoutEffect(() => {
-    var {
-      selection
-    } = editor;
+  useIsomorphicLayoutEffect(function () {
+    var selection = editor.selection;
     var domSelection = window.getSelection();
 
     if (state.isComposing || !domSelection || !ReactEditor.isFocused(editor)) {
@@ -1566,11 +1767,12 @@ var Editable = props => {
       domSelection.addRange(newDomRange);
       var leafEl = newDomRange.startContainer.parentElement;
       scrollIntoView(leafEl, {
-        scrollMode: 'if-needed'
+        scrollMode: 'if-needed',
+        boundary: el
       });
     }
 
-    setTimeout(() => {
+    setTimeout(function () {
       // COMPAT: In Firefox, it's not enough to create a range, you also need
       // to focus the contenteditable element too. (2016/11/16)
       if (newDomRange && IS_FIREFOX) {
@@ -1582,7 +1784,7 @@ var Editable = props => {
   }); // The autoFocus TextareaHTMLAttribute doesn't do anything on a div, so it
   // needs to be manually focused.
 
-  React.useEffect(() => {
+  React.useEffect(function () {
     if (ref.current && autoFocus) {
       ref.current.focus();
     }
@@ -1591,14 +1793,10 @@ var Editable = props => {
   // to the real event sadly. (2019/11/01)
   // https://github.com/facebook/react/issues/11211
 
-  var onDOMBeforeInput = React.useCallback(event => {
+  var onDOMBeforeInput = React.useCallback(function (event) {
     if (!readOnly && hasEditableTarget(editor, event.target) && !isDOMEventHandled(event, propsOnDOMBeforeInput)) {
-      var {
-        selection
-      } = editor;
-      var {
-        inputType: type
-      } = event;
+      var selection = editor.selection;
+      var type = event.inputType;
       var data = event.dataTransfer || event.data || undefined; // These two types occur while a user is composing text and can't be
       // cancelled. Let them through and wait for the composition to end.
 
@@ -1611,7 +1809,9 @@ var Editable = props => {
       // and those commands determine that for themselves.
 
       if (!type.startsWith('delete') || type.startsWith('deleteBy')) {
-        var [targetRange] = event.getTargetRanges();
+        var _event$getTargetRange = event.getTargetRanges(),
+            _event$getTargetRange2 = slicedToArray(_event$getTargetRange, 1),
+            targetRange = _event$getTargetRange2[0];
 
         if (targetRange) {
           var range = ReactEditor.toSlateRange(editor, targetRange);
@@ -1739,14 +1939,14 @@ var Editable = props => {
   // real `beforeinput` events sadly... (2019/11/04)
   // https://github.com/facebook/react/issues/11211
 
-  useIsomorphicLayoutEffect(() => {
-    if (ref.current) {
+  useIsomorphicLayoutEffect(function () {
+    if (ref.current && HAS_BEFORE_INPUT_SUPPORT) {
       // @ts-ignore The `beforeinput` event isn't recognized.
       ref.current.addEventListener('beforeinput', onDOMBeforeInput);
     }
 
-    return () => {
-      if (ref.current) {
+    return function () {
+      if (ref.current && HAS_BEFORE_INPUT_SUPPORT) {
         // @ts-ignore The `beforeinput` event isn't recognized.
         ref.current.removeEventListener('beforeinput', onDOMBeforeInput);
       }
@@ -1757,11 +1957,9 @@ var Editable = props => {
   // released. This causes issues in situations where another change happens
   // while a selection is being dragged.
 
-  var onDOMSelectionChange = React.useCallback(throttle(() => {
+  var onDOMSelectionChange = React.useCallback(throttle(function () {
     if (!readOnly && !state.isComposing && !state.isUpdatingSelection) {
-      var {
-        activeElement
-      } = window.document;
+      var activeElement = window.document.activeElement;
       var el = ReactEditor.toDOMNode(editor, editor);
       var domSelection = window.getSelection();
 
@@ -1769,17 +1967,15 @@ var Editable = props => {
         state.latestElement = activeElement;
         IS_FOCUSED.set(editor, true);
       } else {
-        IS_FOCUSED.delete(editor);
+        IS_FOCUSED["delete"](editor);
       }
 
       if (!domSelection) {
         return slate.Transforms.deselect(editor);
       }
 
-      var {
-        anchorNode,
-        focusNode
-      } = domSelection;
+      var anchorNode = domSelection.anchorNode,
+          focusNode = domSelection.focusNode;
       var anchorNodeSelectable = hasEditableTarget(editor, anchorNode) || isTargetInsideVoid(editor, anchorNode);
       var focusNodeSelectable = hasEditableTarget(editor, focusNode) || isTargetInsideVoid(editor, focusNode);
 
@@ -1796,22 +1992,19 @@ var Editable = props => {
   // fire for any change to the selection inside the editor. (2019/11/04)
   // https://github.com/facebook/react/issues/5785
 
-  useIsomorphicLayoutEffect(() => {
+  useIsomorphicLayoutEffect(function () {
     window.document.addEventListener('selectionchange', onDOMSelectionChange);
-    return () => {
+    return function () {
       window.document.removeEventListener('selectionchange', onDOMSelectionChange);
     };
   }, [onDOMSelectionChange]);
   var decorations = decorate([editor, []]);
 
   if (placeholder && editor.children.length === 1 && Array.from(slate.Node.texts(editor)).length === 1 && slate.Node.string(editor) === '') {
+    var _decorations$push;
+
     var start = slate.Editor.start(editor, []);
-    decorations.push({
-      [PLACEHOLDER_SYMBOL]: true,
-      placeholder,
-      anchor: start,
-      focus: start
-    });
+    decorations.push((_decorations$push = {}, defineProperty(_decorations$push, PLACEHOLDER_SYMBOL, true), defineProperty(_decorations$push, "placeholder", placeholder), defineProperty(_decorations$push, "anchor", start), defineProperty(_decorations$push, "focus", start), _decorations$push));
   }
 
   return React__default.createElement(ReadOnlyContext.Provider, {
@@ -1841,7 +2034,7 @@ var Editable = props => {
       // Allow words to break if they are too long.
       wordWrap: 'break-word'
     }, style),
-    onBeforeInput: React.useCallback(event => {
+    onBeforeInput: React.useCallback(function (event) {
       // COMPAT: Certain browsers don't support the `beforeinput` event, so we
       // fall back to React's leaky polyfill instead just for it. It
       // only works for the `insertText` input type.
@@ -1851,7 +2044,7 @@ var Editable = props => {
         slate.Editor.insertText(editor, text);
       }
     }, [readOnly]),
-    onBlur: React.useCallback(event => {
+    onBlur: React.useCallback(function (event) {
       if (readOnly || state.isUpdatingSelection || !hasEditableTarget(editor, event.target) || isEventHandled(event, attributes.onBlur)) {
         return;
       } // COMPAT: If the current `activeElement` is still the previous
@@ -1864,9 +2057,7 @@ var Editable = props => {
         return;
       }
 
-      var {
-        relatedTarget
-      } = event;
+      var relatedTarget = event.relatedTarget;
       var el = ReactEditor.toDOMNode(editor, editor); // COMPAT: The event should be ignored if the focus is returning
       // to the editor from an embedded editable element (eg. an <input>
       // element inside a void node).
@@ -1892,24 +2083,30 @@ var Editable = props => {
         }
       }
 
-      IS_FOCUSED.delete(editor);
+      IS_FOCUSED["delete"](editor);
     }, [readOnly, attributes.onBlur]),
-    onClick: React.useCallback(event => {
+    onClick: React.useCallback(function (event) {
       if (!readOnly && hasTarget(editor, event.target) && !isEventHandled(event, attributes.onClick) && isDOMNode(event.target)) {
         var node = ReactEditor.toSlateNode(editor, event.target);
         var path = ReactEditor.findPath(editor, node);
 
         var _start = slate.Editor.start(editor, path);
 
-        if (slate.Editor.void(editor, {
+        var end = slate.Editor.end(editor, path);
+        var startVoid = slate.Editor["void"](editor, {
           at: _start
-        })) {
+        });
+        var endVoid = slate.Editor["void"](editor, {
+          at: end
+        });
+
+        if (startVoid && endVoid && slate.Path.equals(startVoid[1], endVoid[1])) {
           var range = slate.Editor.range(editor, _start);
           slate.Transforms.select(editor, range);
         }
       }
     }, [readOnly, attributes.onClick]),
-    onCompositionEnd: React.useCallback(event => {
+    onCompositionEnd: React.useCallback(function (event) {
       if (hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onCompositionEnd)) {
         state.isComposing = false; // COMPAT: In Chrome, `beforeinput` events for compositions
         // aren't correct and never fire the "insertFromComposition"
@@ -1921,31 +2118,29 @@ var Editable = props => {
         }
       }
     }, [attributes.onCompositionEnd]),
-    onCompositionStart: React.useCallback(event => {
+    onCompositionStart: React.useCallback(function (event) {
       if (hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onCompositionStart)) {
         state.isComposing = true;
       }
     }, [attributes.onCompositionStart]),
-    onCopy: React.useCallback(event => {
+    onCopy: React.useCallback(function (event) {
       if (hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onCopy)) {
         event.preventDefault();
         ReactEditor.setFragmentData(editor, event.clipboardData);
       }
     }, [attributes.onCopy]),
-    onCut: React.useCallback(event => {
+    onCut: React.useCallback(function (event) {
       if (!readOnly && hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onCut)) {
         event.preventDefault();
         ReactEditor.setFragmentData(editor, event.clipboardData);
-        var {
-          selection
-        } = editor;
+        var selection = editor.selection;
 
         if (selection && slate.Range.isExpanded(selection)) {
           slate.Editor.deleteFragment(editor);
         }
       }
     }, [readOnly, attributes.onCut]),
-    onDragOver: React.useCallback(event => {
+    onDragOver: React.useCallback(function (event) {
       if (hasTarget(editor, event.target) && !isEventHandled(event, attributes.onDragOver)) {
         // Only when the target is void, call `preventDefault` to signal
         // that drops are allowed. Editable content is droppable by
@@ -1957,11 +2152,11 @@ var Editable = props => {
         }
       }
     }, [attributes.onDragOver]),
-    onDragStart: React.useCallback(event => {
+    onDragStart: React.useCallback(function (event) {
       if (hasTarget(editor, event.target) && !isEventHandled(event, attributes.onDragStart)) {
         var node = ReactEditor.toSlateNode(editor, event.target);
         var path = ReactEditor.findPath(editor, node);
-        var voidMatch = slate.Editor.void(editor, {
+        var voidMatch = slate.Editor["void"](editor, {
           at: path
         }); // If starting a drag on a void node, make sure it is selected
         // so that it shows up in the selection's fragment.
@@ -1974,7 +2169,7 @@ var Editable = props => {
         ReactEditor.setFragmentData(editor, event.dataTransfer);
       }
     }, [attributes.onDragStart]),
-    onDrop: React.useCallback(event => {
+    onDrop: React.useCallback(function (event) {
       if (hasTarget(editor, event.target) && !readOnly && !isEventHandled(event, attributes.onDrop)) {
         // COMPAT: Certain browsers don't fire `beforeinput` events at all, and
         // Chromium browsers don't properly fire them for files being
@@ -1989,7 +2184,7 @@ var Editable = props => {
         }
       }
     }, [readOnly, attributes.onDrop]),
-    onFocus: React.useCallback(event => {
+    onFocus: React.useCallback(function (event) {
       if (!readOnly && !state.isUpdatingSelection && hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onFocus)) {
         var el = ReactEditor.toDOMNode(editor, editor);
         state.latestElement = window.document.activeElement; // COMPAT: If the editor has nested editable elements, the focus
@@ -2004,14 +2199,10 @@ var Editable = props => {
         IS_FOCUSED.set(editor, true);
       }
     }, [readOnly, attributes.onFocus]),
-    onKeyDown: React.useCallback(event => {
+    onKeyDown: React.useCallback(function (event) {
       if (!readOnly && hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onKeyDown)) {
-        var {
-          nativeEvent
-        } = event;
-        var {
-          selection
-        } = editor; // COMPAT: Since we prevent the default behavior on
+        var nativeEvent = event.nativeEvent;
+        var selection = editor.selection; // COMPAT: Since we prevent the default behavior on
         // `beforeinput` events, the browser doesn't think there's ever
         // any history stack to undo or redo, so we have to manage these
         // hotkeys ourselves. (2019/11/06)
@@ -2227,13 +2418,13 @@ var Editable = props => {
         }
       }
     }, [readOnly, attributes.onKeyDown]),
-    onPaste: React.useCallback(event => {
+    onPaste: React.useCallback(function (event) {
       // COMPAT: Certain browsers don't support the `beforeinput` event, so we
       // fall back to React's `onPaste` here instead.
       // COMPAT: Firefox, Chrome and Safari are not emitting `beforeinput` events
       // when "paste without formatting" option is used.
       // This unfortunately needs to be handled with paste events instead.
-      if ((!HAS_BEFORE_INPUT_SUPPORT || isPlainTextOnlyPaste(event.nativeEvent)) && !readOnly && hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onPaste)) {
+      if (!isEventHandled(event, attributes.onPaste) && (!HAS_BEFORE_INPUT_SUPPORT || isPlainTextOnlyPaste(event.nativeEvent)) && !readOnly && hasEditableTarget(editor, event.target)) {
         event.preventDefault();
         ReactEditor.insertData(editor, event.clipboardData);
       }
@@ -2251,13 +2442,15 @@ var Editable = props => {
  * A default memoized decorate function.
  */
 
-var defaultDecorate = () => [];
+var defaultDecorate = function defaultDecorate() {
+  return [];
+};
 /**
  * Check if the target is in the editor.
  */
 
 
-var hasTarget = (editor, target) => {
+var hasTarget = function hasTarget(editor, target) {
   return isDOMNode(target) && ReactEditor.hasDOMNode(editor, target);
 };
 /**
@@ -2265,7 +2458,7 @@ var hasTarget = (editor, target) => {
  */
 
 
-var hasEditableTarget = (editor, target) => {
+var hasEditableTarget = function hasEditableTarget(editor, target) {
   return isDOMNode(target) && ReactEditor.hasDOMNode(editor, target, {
     editable: true
   });
@@ -2275,7 +2468,7 @@ var hasEditableTarget = (editor, target) => {
  */
 
 
-var isTargetInsideVoid = (editor, target) => {
+var isTargetInsideVoid = function isTargetInsideVoid(editor, target) {
   var slateNode = hasTarget(editor, target) && ReactEditor.toSlateNode(editor, target);
   return slate.Editor.isVoid(editor, slateNode);
 };
@@ -2284,7 +2477,7 @@ var isTargetInsideVoid = (editor, target) => {
  */
 
 
-var isEventHandled = (event, handler) => {
+var isEventHandled = function isEventHandled(event, handler) {
   if (!handler) {
     return false;
   }
@@ -2297,7 +2490,7 @@ var isEventHandled = (event, handler) => {
  */
 
 
-var isDOMEventHandled = (event, handler) => {
+var isDOMEventHandled = function isDOMEventHandled(event, handler) {
   if (!handler) {
     return false;
   }