slate-react 0.93.0 → 0.94.0

package/dist/index.es.js

@@ -1,9 +1,9 @@
 import getDirection from 'direction';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
-import React, { useLayoutEffect, useEffect, useRef, useState, memo, forwardRef, createContext, useContext, useCallback, Component, useReducer, useMemo } from 'react';
+import React, { createContext, useContext, useRef, useEffect, useLayoutEffect, useState, memo, forwardRef, useCallback, Component, useReducer, useMemo } from 'react';
 import scrollIntoView from 'scroll-into-view-if-needed';
-import { Editor, Scrubber, Transforms, Range, Element as Element$1, Path, Node, Text as Text$1, Point } from 'slate';
+import { Transforms, Element as Element$1, Editor, Scrubber, Range, Path, Point, Node, Text as Text$1 } from 'slate';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { isKeyHotkey } from 'is-hotkey';
 import ReactDOM from 'react-dom';
@@ -58,20 +58,51 @@ function _objectWithoutProperties(source, excluded) {
 }
 
 /**
- * An auto-incrementing identifier for keys.
+ * A React context for sharing the editor object.
  */
-var n = 0;
+
+var EditorContext = /*#__PURE__*/createContext(null);
 /**
- * A class that keeps track of a key string. We use a full class here because we
- * want to be able to use them as keys in `WeakMap` objects.
+ * Get the current editor object from the React context.
  */
 
-class Key {
-  constructor() {
-    this.id = "".concat(n++);
+var useSlateStatic = () => {
+  var editor = useContext(EditorContext);
+
+  if (!editor) {
+    throw new Error("The `useSlateStatic` hook must be used inside the <Slate> component's context.");
   }
 
-}
+  return editor;
+};
+
+var IS_REACT_VERSION_17_OR_ABOVE = parseInt(React.version.split('.')[0], 10) >= 17;
+var IS_IOS = typeof navigator !== 'undefined' && typeof window !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+var IS_APPLE = typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent);
+var IS_ANDROID = typeof navigator !== 'undefined' && /Android/.test(navigator.userAgent);
+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_CHROME = typeof navigator !== 'undefined' && /Chrome/i.test(navigator.userAgent); // Native `beforeInput` events don't work well with react on Chrome 75
+// and older, Chrome 76+ can use `beforeInput` though.
+
+var IS_CHROME_LEGACY = typeof navigator !== 'undefined' && /Chrome?\/(?:[0-7][0-5]|[0-6][0-9])(?:\.)/i.test(navigator.userAgent);
+var IS_ANDROID_CHROME_LEGACY = IS_ANDROID && typeof navigator !== 'undefined' && /Chrome?\/(?:[0-5]?\d)(?:\.)/i.test(navigator.userAgent); // Firefox did not support `beforeInput` until `v87`.
+
+var IS_FIREFOX_LEGACY = typeof navigator !== 'undefined' && /^(?!.*Seamonkey)(?=.*Firefox\/(?:[0-7][0-9]|[0-8][0-6])(?:\.)).*/i.test(navigator.userAgent); // UC mobile browser
+
+var IS_UC_MOBILE = typeof navigator !== 'undefined' && /.*UCBrowser/.test(navigator.userAgent); // Wechat browser
+
+var IS_WECHATBROWSER = typeof navigator !== 'undefined' && /.*Wechat/.test(navigator.userAgent); // Check if DOM is available as React does internally.
+// https://github.com/facebook/react/blob/master/packages/shared/ExecutionEnvironment.js
+
+var CAN_USE_DOM = !!(typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined'); // COMPAT: Firefox/Edge Legacy don't support the `beforeinput` event
+// Chrome Legacy doesn't support `beforeinput` correctly
+
+var HAS_BEFORE_INPUT_SUPPORT = (!IS_CHROME_LEGACY || !IS_ANDROID_CHROME_LEGACY) && !IS_EDGE_LEGACY && // globalThis is undefined in older browsers
+typeof globalThis !== 'undefined' && globalThis.InputEvent && // @ts-ignore The `getTargetRanges` property isn't recognized.
+typeof globalThis.InputEvent.prototype.getTargetRanges === 'function';
 
 /**
  * Two weak maps that allow us rebuild a path given a node. They are populated
@@ -364,59 +395,128 @@ var isTrackedMutation = (editor, mutation, batch) => {
   return isTrackedMutation(editor, parentMutation, batch);
 };
 
-var IS_REACT_VERSION_17_OR_ABOVE = parseInt(React.version.split('.')[0], 10) >= 17;
-var IS_IOS = typeof navigator !== 'undefined' && typeof window !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
-var IS_APPLE = typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent);
-var IS_ANDROID = typeof navigator !== 'undefined' && /Android/.test(navigator.userAgent);
-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
+/**
+ * An auto-incrementing identifier for keys.
+ */
+var n = 0;
+/**
+ * A class that keeps track of a key string. We use a full class here because we
+ * want to be able to use them as keys in `WeakMap` objects.
+ */
 
-var IS_EDGE_LEGACY = typeof navigator !== 'undefined' && /Edge?\/(?:[0-6][0-9]|[0-7][0-8])(?:\.)/i.test(navigator.userAgent);
-var IS_CHROME = typeof navigator !== 'undefined' && /Chrome/i.test(navigator.userAgent); // Native `beforeInput` events don't work well with react on Chrome 75
-// and older, Chrome 76+ can use `beforeInput` though.
+class Key {
+  constructor() {
+    this.id = "".concat(n++);
+  }
 
-var IS_CHROME_LEGACY = typeof navigator !== 'undefined' && /Chrome?\/(?:[0-7][0-5]|[0-6][0-9])(?:\.)/i.test(navigator.userAgent);
-var IS_ANDROID_CHROME_LEGACY = IS_ANDROID && typeof navigator !== 'undefined' && /Chrome?\/(?:[0-5]?\d)(?:\.)/i.test(navigator.userAgent); // Firefox did not support `beforeInput` until `v87`.
+}
 
-var IS_FIREFOX_LEGACY = typeof navigator !== 'undefined' && /^(?!.*Seamonkey)(?=.*Firefox\/(?:[0-7][0-9]|[0-8][0-6])(?:\.)).*/i.test(navigator.userAgent); // UC mobile browser
+var ReactEditor = {
+  androidPendingDiffs: editor => EDITOR_TO_PENDING_DIFFS.get(editor),
+  androidScheduleFlush: editor => {
+    var _EDITOR_TO_SCHEDULE_F;
 
-var IS_UC_MOBILE = typeof navigator !== 'undefined' && /.*UCBrowser/.test(navigator.userAgent); // Wechat browser
+    (_EDITOR_TO_SCHEDULE_F = EDITOR_TO_SCHEDULE_FLUSH.get(editor)) === null || _EDITOR_TO_SCHEDULE_F === void 0 ? void 0 : _EDITOR_TO_SCHEDULE_F();
+  },
+  blur: editor => {
+    var el = ReactEditor.toDOMNode(editor, editor);
+    var root = ReactEditor.findDocumentOrShadowRoot(editor);
+    IS_FOCUSED.set(editor, false);
 
-var IS_WECHATBROWSER = typeof navigator !== 'undefined' && /.*Wechat/.test(navigator.userAgent); // Check if DOM is available as React does internally.
-// https://github.com/facebook/react/blob/master/packages/shared/ExecutionEnvironment.js
+    if (root.activeElement === el) {
+      el.blur();
+    }
+  },
+  deselect: editor => {
+    var {
+      selection
+    } = editor;
+    var root = ReactEditor.findDocumentOrShadowRoot(editor);
+    var domSelection = root.getSelection();
 
-var CAN_USE_DOM = !!(typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined'); // COMPAT: Firefox/Edge Legacy don't support the `beforeinput` event
-// Chrome Legacy doesn't support `beforeinput` correctly
+    if (domSelection && domSelection.rangeCount > 0) {
+      domSelection.removeAllRanges();
+    }
 
-var HAS_BEFORE_INPUT_SUPPORT = (!IS_CHROME_LEGACY || !IS_ANDROID_CHROME_LEGACY) && !IS_EDGE_LEGACY && // globalThis is undefined in older browsers
-typeof globalThis !== 'undefined' && globalThis.InputEvent && // @ts-ignore The `getTargetRanges` property isn't recognized.
-typeof globalThis.InputEvent.prototype.getTargetRanges === 'function';
+    if (selection) {
+      Transforms.deselect(editor);
+    }
+  },
+  findDocumentOrShadowRoot: editor => {
+    var el = ReactEditor.toDOMNode(editor, editor);
+    var root = el.getRootNode();
 
-var ReactEditor = {
-  /**
-   * Check if the user is currently composing inside the editor.
-   */
-  isComposing(editor) {
-    return !!IS_COMPOSING.get(editor);
+    if ((root instanceof Document || root instanceof ShadowRoot) && root.getSelection != null) {
+      return root;
+    }
+
+    return el.ownerDocument;
   },
+  findEventRange: (editor, event) => {
+    if ('nativeEvent' in event) {
+      event = event.nativeEvent;
+    }
 
-  /**
-   * Return the host window of the current editor.
-   */
-  getWindow(editor) {
-    var window = EDITOR_TO_WINDOW.get(editor);
+    var {
+      clientX: x,
+      clientY: y,
+      target
+    } = event;
 
-    if (!window) {
-      throw new Error('Unable to find a host window element for this editor');
+    if (x == null || y == null) {
+      throw new Error("Cannot resolve a Slate range from a DOM event: ".concat(event));
     }
 
-    return window;
-  },
+    var node = ReactEditor.toSlateNode(editor, event.target);
+    var path = ReactEditor.findPath(editor, node); // If the drop target is inside a void node, move it into either the
+    // next or previous node, depending on which side the `x` and `y`
+    // coordinates are closest to.
 
-  /**
-   * Find a key for a Slate node.
-   */
-  findKey(editor, node) {
+    if (Element$1.isElement(node) && Editor.isVoid(editor, node)) {
+      var rect = target.getBoundingClientRect();
+      var isPrev = editor.isInline(node) ? x - rect.left < rect.left + rect.width - x : y - rect.top < rect.top + rect.height - y;
+      var edge = Editor.point(editor, path, {
+        edge: isPrev ? 'start' : 'end'
+      });
+      var point = isPrev ? Editor.before(editor, edge) : Editor.after(editor, edge);
+
+      if (point) {
+        var _range = Editor.range(editor, point);
+
+        return _range;
+      }
+    } // Else resolve a range from the caret position where the drop occured.
+
+
+    var domRange;
+    var {
+      document
+    } = ReactEditor.getWindow(editor); // COMPAT: In Firefox, `caretRangeFromPoint` doesn't exist. (2016/07/25)
+
+    if (document.caretRangeFromPoint) {
+      domRange = document.caretRangeFromPoint(x, y);
+    } else {
+      var position = document.caretPositionFromPoint(x, y);
+
+      if (position) {
+        domRange = document.createRange();
+        domRange.setStart(position.offsetNode, position.offset);
+        domRange.setEnd(position.offsetNode, position.offset);
+      }
+    }
+
+    if (!domRange) {
+      throw new Error("Cannot resolve a Slate range from a DOM event: ".concat(event));
+    } // Resolve a Slate range from the DOM range.
+
+
+    var range = ReactEditor.toSlateRange(editor, domRange, {
+      exactMatch: false,
+      suppressThrow: false
+    });
+    return range;
+  },
+  findKey: (editor, node) => {
     var key = NODE_TO_KEY.get(node);
 
     if (!key) {
@@ -426,11 +526,7 @@ var ReactEditor = {
 
     return key;
   },
-
-  /**
-   * Find the path of Slate node.
-   */
-  findPath(editor, node) {
+  findPath: (editor, node) => {
     var path = [];
     var child = node;
 
@@ -457,52 +553,7 @@ var ReactEditor = {
 
     throw new Error("Unable to find the path for Slate node: ".concat(Scrubber.stringify(node)));
   },
-
-  /**
-   * Find the DOM node that implements DocumentOrShadowRoot for the editor.
-   */
-  findDocumentOrShadowRoot(editor) {
-    var el = ReactEditor.toDOMNode(editor, editor);
-    var root = el.getRootNode();
-
-    if ((root instanceof Document || root instanceof ShadowRoot) && root.getSelection != null) {
-      return root;
-    }
-
-    return el.ownerDocument;
-  },
-
-  /**
-   * Check if the editor is focused.
-   */
-  isFocused(editor) {
-    return !!IS_FOCUSED.get(editor);
-  },
-
-  /**
-   * Check if the editor is in read-only mode.
-   */
-  isReadOnly(editor) {
-    return !!IS_READ_ONLY.get(editor);
-  },
-
-  /**
-   * Blur the editor.
-   */
-  blur(editor) {
-    var el = ReactEditor.toDOMNode(editor, editor);
-    var root = ReactEditor.findDocumentOrShadowRoot(editor);
-    IS_FOCUSED.set(editor, false);
-
-    if (root.activeElement === el) {
-      el.blur();
-    }
-  },
-
-  /**
-   * Focus the editor.
-   */
-  focus(editor) {
+  focus: editor => {
     var el = ReactEditor.toDOMNode(editor, editor);
     var root = ReactEditor.findDocumentOrShadowRoot(editor);
     IS_FOCUSED.set(editor, true);
@@ -513,30 +564,16 @@ var ReactEditor = {
       });
     }
   },
+  getWindow: editor => {
+    var window = EDITOR_TO_WINDOW.get(editor);
 
-  /**
-   * Deselect the editor.
-   */
-  deselect(editor) {
-    var {
-      selection
-    } = editor;
-    var root = ReactEditor.findDocumentOrShadowRoot(editor);
-    var domSelection = root.getSelection();
-
-    if (domSelection && domSelection.rangeCount > 0) {
-      domSelection.removeAllRanges();
+    if (!window) {
+      throw new Error('Unable to find a host window element for this editor');
     }
 
-    if (selection) {
-      Transforms.deselect(editor);
-    }
+    return window;
   },
-
-  /**
-   * 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
@@ -563,39 +600,35 @@ var ReactEditor = {
     // this is the core logic that lets you know you got the right editor.selection instead of null when editor is contenteditable="false"(readOnly)
     targetEl.closest('[contenteditable="false"]') === editorEl || !!targetEl.getAttribute('data-slate-zero-width'));
   },
-
-  /**
-   * Insert data from a `DataTransfer` into the editor.
-   */
-  insertData(editor, data) {
-    editor.insertData(data);
+  hasEditableTarget: (editor, target) => isDOMNode(target) && ReactEditor.hasDOMNode(editor, target, {
+    editable: true
+  }),
+  hasRange: (editor, range) => {
+    var {
+      anchor,
+      focus
+    } = range;
+    return Editor.hasPath(editor, anchor.path) && Editor.hasPath(editor, focus.path);
   },
-
-  /**
-   * Insert fragment data from a `DataTransfer` into the editor.
-   */
-  insertFragmentData(editor, data) {
-    return editor.insertFragmentData(data);
+  hasSelectableTarget: (editor, target) => ReactEditor.hasEditableTarget(editor, target) || ReactEditor.isTargetInsideNonReadonlyVoid(editor, target),
+  hasTarget: (editor, target) => isDOMNode(target) && ReactEditor.hasDOMNode(editor, target),
+  insertData: (editor, data) => {
+    editor.insertData(data);
   },
-
-  /**
-   * Insert text data from a `DataTransfer` into the editor.
-   */
-  insertTextData(editor, data) {
-    return editor.insertTextData(data);
+  insertFragmentData: (editor, data) => editor.insertFragmentData(data),
+  insertTextData: (editor, data) => editor.insertTextData(data),
+  isComposing: editor => {
+    return !!IS_COMPOSING.get(editor);
   },
-
-  /**
-   * Sets data from the currently selected fragment on a `DataTransfer`.
-   */
-  setFragmentData(editor, data, originEvent) {
-    editor.setFragmentData(data, originEvent);
+  isFocused: editor => !!IS_FOCUSED.get(editor),
+  isReadOnly: editor => !!IS_READ_ONLY.get(editor),
+  isTargetInsideNonReadonlyVoid: (editor, target) => {
+    if (IS_READ_ONLY.get(editor)) return false;
+    var slateNode = ReactEditor.hasTarget(editor, target) && ReactEditor.toSlateNode(editor, target);
+    return Element$1.isElement(slateNode) && Editor.isVoid(editor, slateNode);
   },
-
-  /**
-   * Find the native DOM element from a Slate node.
-   */
-  toDOMNode(editor, node) {
+  setFragmentData: (editor, data, originEvent) => editor.setFragmentData(data, originEvent),
+  toDOMNode: (editor, node) => {
     var KEY_TO_ELEMENT = EDITOR_TO_KEY_TO_ELEMENT.get(editor);
     var domNode = Editor.isEditor(node) ? EDITOR_TO_ELEMENT.get(editor) : KEY_TO_ELEMENT === null || KEY_TO_ELEMENT === void 0 ? void 0 : KEY_TO_ELEMENT.get(ReactEditor.findKey(editor, node));
 
@@ -605,11 +638,7 @@ var ReactEditor = {
 
     return domNode;
   },
-
-  /**
-   * Find a native DOM selection point from a Slate point.
-   */
-  toDOMPoint(editor, point) {
+  toDOMPoint: (editor, point) => {
     var [node] = Editor.node(editor, point.path);
     var el = ReactEditor.toDOMNode(editor, node);
     var domPoint; // If we're inside a void node, force the offset to 0, otherwise the zero
@@ -677,16 +706,7 @@ var ReactEditor = {
 
     return domPoint;
   },
-
-  /**
-   * Find a native DOM range from a Slate `range`.
-   *
-   * Notice: the returned range will always be ordinal regardless of the direction of Slate `range` due to DOM API limit.
-   *
-   * there is no way to create a reverse DOM Range using Range.setStart/setEnd
-   * according to https://dom.spec.whatwg.org/#concept-range-bp-set.
-   */
-  toDOMRange(editor, range) {
+  toDOMRange: (editor, range) => {
     var {
       anchor,
       focus
@@ -709,11 +729,7 @@ var ReactEditor = {
     domRange.setEnd(endNode, isEndAtZeroWidth ? 1 : endOffset);
     return domRange;
   },
-
-  /**
-   * Find a Slate node from a native DOM `element`.
-   */
-  toSlateNode(editor, domNode) {
+  toSlateNode: (editor, domNode) => {
     var domEl = isDOMElement(domNode) ? domNode : domNode.parentElement;
 
     if (domEl && !domEl.hasAttribute('data-slate-node')) {
@@ -728,79 +744,7 @@ var ReactEditor = {
 
     return node;
   },
-
-  /**
-   * Get the target range from a DOM `event`.
-   */
-  findEventRange(editor, event) {
-    if ('nativeEvent' in event) {
-      event = event.nativeEvent;
-    }
-
-    var {
-      clientX: x,
-      clientY: y,
-      target
-    } = event;
-
-    if (x == null || y == null) {
-      throw new Error("Cannot resolve a Slate range from a DOM event: ".concat(event));
-    }
-
-    var node = ReactEditor.toSlateNode(editor, event.target);
-    var path = ReactEditor.findPath(editor, node); // If the drop target is inside a void node, move it into either the
-    // next or previous node, depending on which side the `x` and `y`
-    // coordinates are closest to.
-
-    if (Element$1.isElement(node) && Editor.isVoid(editor, node)) {
-      var rect = target.getBoundingClientRect();
-      var isPrev = editor.isInline(node) ? x - rect.left < rect.left + rect.width - x : y - rect.top < rect.top + rect.height - y;
-      var edge = Editor.point(editor, path, {
-        edge: isPrev ? 'start' : 'end'
-      });
-      var point = isPrev ? Editor.before(editor, edge) : Editor.after(editor, edge);
-
-      if (point) {
-        var _range = Editor.range(editor, point);
-
-        return _range;
-      }
-    } // Else resolve a range from the caret position where the drop occured.
-
-
-    var domRange;
-    var {
-      document
-    } = ReactEditor.getWindow(editor); // COMPAT: In Firefox, `caretRangeFromPoint` doesn't exist. (2016/07/25)
-
-    if (document.caretRangeFromPoint) {
-      domRange = document.caretRangeFromPoint(x, y);
-    } else {
-      var position = document.caretPositionFromPoint(x, y);
-
-      if (position) {
-        domRange = document.createRange();
-        domRange.setStart(position.offsetNode, position.offset);
-        domRange.setEnd(position.offsetNode, position.offset);
-      }
-    }
-
-    if (!domRange) {
-      throw new Error("Cannot resolve a Slate range from a DOM event: ".concat(event));
-    } // Resolve a Slate range from the DOM range.
-
-
-    var range = ReactEditor.toSlateRange(editor, domRange, {
-      exactMatch: false,
-      suppressThrow: false
-    });
-    return range;
-  },
-
-  /**
-   * Find a Slate point from a DOM selection's `domNode` and `domOffset`.
-   */
-  toSlatePoint(editor, domPoint, options) {
+  toSlatePoint: (editor, domPoint, options) => {
     var {
       exactMatch,
       suppressThrow
@@ -932,11 +876,7 @@ var ReactEditor = {
       offset
     };
   },
-
-  /**
-   * Find a Slate range from a DOM range or selection.
-   */
-  toSlateRange(editor, domRange, options) {
+  toSlateRange: (editor, domRange, options) => {
     var {
       exactMatch,
       suppressThrow
@@ -1062,2199 +1002,2123 @@ var ReactEditor = {
     }
 
     return range;
-  },
-
-  hasRange(editor, range) {
-    var {
-      anchor,
-      focus
-    } = range;
-    return Editor.hasPath(editor, anchor.path) && Editor.hasPath(editor, focus.path);
-  },
-
-  /**
-   * Check if the target is in the editor.
-   */
-  hasTarget(editor, target) {
-    return isDOMNode(target) && ReactEditor.hasDOMNode(editor, target);
-  },
-
-  /**
-   * Check if the target is editable and in the editor.
-   */
-  hasEditableTarget(editor, target) {
-    return isDOMNode(target) && ReactEditor.hasDOMNode(editor, target, {
-      editable: true
-    });
-  },
+  }
+};
 
-  /**
-   * Check if the target can be selectable
-   */
-  hasSelectableTarget(editor, target) {
-    return ReactEditor.hasEditableTarget(editor, target) || ReactEditor.isTargetInsideNonReadonlyVoid(editor, target);
-  },
+/**
+ * Check whether a text diff was applied in a way we can perform the pending action on /
+ * recover the pending selection.
+ */
 
-  /**
-   * Check if the target is inside void and in an non-readonly editor.
-   */
-  isTargetInsideNonReadonlyVoid(editor, target) {
-    if (IS_READ_ONLY.get(editor)) return false;
-    var slateNode = ReactEditor.hasTarget(editor, target) && ReactEditor.toSlateNode(editor, target);
-    return Element$1.isElement(slateNode) && Editor.isVoid(editor, slateNode);
-  },
+function verifyDiffState(editor, textDiff) {
+  var {
+    path,
+    diff
+  } = textDiff;
 
-  /**
-   * Experimental and android specific: Flush all pending diffs and cancel composition at the next possible time.
-   */
-  androidScheduleFlush(editor) {
-    var _EDITOR_TO_SCHEDULE_F;
+  if (!Editor.hasPath(editor, path)) {
+    return false;
+  }
 
-    (_EDITOR_TO_SCHEDULE_F = EDITOR_TO_SCHEDULE_FLUSH.get(editor)) === null || _EDITOR_TO_SCHEDULE_F === void 0 ? void 0 : _EDITOR_TO_SCHEDULE_F();
-  },
+  var node = Node.get(editor, path);
 
-  /**
-   * Experimental and android specific: Get pending diffs
-   */
-  androidPendingDiffs(editor) {
-    return EDITOR_TO_PENDING_DIFFS.get(editor);
+  if (!Text$1.isText(node)) {
+    return false;
   }
 
-};
+  if (diff.start !== node.text.length || diff.text.length === 0) {
+    return node.text.slice(diff.start, diff.start + diff.text.length) === diff.text;
+  }
 
-var _excluded$3 = ["anchor", "focus"],
-    _excluded2$1 = ["anchor", "focus"];
-var shallowCompare = (obj1, obj2) => Object.keys(obj1).length === Object.keys(obj2).length && Object.keys(obj1).every(key => obj2.hasOwnProperty(key) && obj1[key] === obj2[key]);
+  var nextPath = Path.next(path);
 
-var isDecorationFlagsEqual = (range, other) => {
-  var rangeOwnProps = _objectWithoutProperties(range, _excluded$3);
+  if (!Editor.hasPath(editor, nextPath)) {
+    return false;
+  }
 
-  var otherOwnProps = _objectWithoutProperties(other, _excluded2$1);
+  var nextNode = Node.get(editor, nextPath);
+  return Text$1.isText(nextNode) && nextNode.text.startsWith(diff.text);
+}
+function applyStringDiff(text) {
+  for (var _len = arguments.length, diffs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    diffs[_key - 1] = arguments[_key];
+  }
 
-  return range[PLACEHOLDER_SYMBOL] === other[PLACEHOLDER_SYMBOL] && shallowCompare(rangeOwnProps, otherOwnProps);
-};
-/**
- * Check if a list of decorator ranges are equal to another.
- *
- * PERF: this requires the two lists to also have the ranges inside them in the
- * same order, but this is an okay constraint for us since decorations are
- * kept in order, and the odd case where they aren't is okay to re-render for.
- */
+  return diffs.reduce((text, diff) => text.slice(0, diff.start) + diff.text + text.slice(diff.end), text);
+}
 
+function longestCommonPrefixLength(str, another) {
+  var length = Math.min(str.length, another.length);
 
-var isElementDecorationsEqual = (list, another) => {
-  if (list.length !== another.length) {
-    return false;
+  for (var i = 0; i < length; i++) {
+    if (str.charAt(i) !== another.charAt(i)) {
+      return i;
+    }
   }
 
-  for (var i = 0; i < list.length; i++) {
-    var range = list[i];
-    var other = another[i];
+  return length;
+}
 
-    if (!Range.equals(range, other) || !isDecorationFlagsEqual(range, other)) {
-      return false;
+function longestCommonSuffixLength(str, another, max) {
+  var length = Math.min(str.length, another.length, max);
+
+  for (var i = 0; i < length; i++) {
+    if (str.charAt(str.length - i - 1) !== another.charAt(another.length - i - 1)) {
+      return i;
     }
   }
 
-  return true;
-};
+  return length;
+}
 /**
- * Check if a list of decorator ranges are equal to another.
- *
- * PERF: this requires the two lists to also have the ranges inside them in the
- * same order, but this is an okay constraint for us since decorations are
- * kept in order, and the odd case where they aren't is okay to re-render for.
+ * Remove redundant changes from the diff so that it spans the minimal possible range
  */
 
-var isTextDecorationsEqual = (list, another) => {
-  if (list.length !== another.length) {
-    return false;
-  }
 
-  for (var i = 0; i < list.length; i++) {
-    var range = list[i];
-    var other = another[i]; // compare only offsets because paths doesn't matter for text
+function normalizeStringDiff(targetText, diff) {
+  var {
+    start,
+    end,
+    text
+  } = diff;
+  var removedText = targetText.slice(start, end);
+  var prefixLength = longestCommonPrefixLength(removedText, text);
+  var max = Math.min(removedText.length - prefixLength, text.length - prefixLength);
+  var suffixLength = longestCommonSuffixLength(removedText, text, max);
+  var normalized = {
+    start: start + prefixLength,
+    end: end - suffixLength,
+    text: text.slice(prefixLength, text.length - suffixLength)
+  };
 
-    if (range.anchor.offset !== other.anchor.offset || range.focus.offset !== other.focus.offset || !isDecorationFlagsEqual(range, other)) {
-      return false;
-    }
+  if (normalized.start === normalized.end && normalized.text.length === 0) {
+    return null;
   }
 
-  return true;
-};
-
+  return normalized;
+}
 /**
- * Prevent warning on SSR by falling back to useEffect when DOM isn't available
+ * Return a string diff that is equivalent to applying b after a spanning the range of
+ * both changes
  */
 
-var useIsomorphicLayoutEffect = CAN_USE_DOM ? useLayoutEffect : useEffect;
-
+function mergeStringDiffs(targetText, a, b) {
+  var start = Math.min(a.start, b.start);
+  var overlap = Math.max(0, Math.min(a.start + a.text.length, b.end) - b.start);
+  var applied = applyStringDiff(targetText, a, b);
+  var sliceEnd = Math.max(b.start + b.text.length, a.start + a.text.length + (a.start + a.text.length > b.start ? b.text.length : 0) - overlap);
+  var text = applied.slice(start, sliceEnd);
+  var end = Math.max(a.end, b.end - a.text.length + (a.end - a.start));
+  return normalizeStringDiff(targetText, {
+    start,
+    end,
+    text
+  });
+}
 /**
- * Leaf content strings.
+ * Get the slate range the text diff spans.
  */
 
-var String = props => {
+function targetRange(textDiff) {
   var {
-    isLast,
-    leaf,
-    parent,
-    text
-  } = props;
-  var editor = useSlateStatic();
-  var path = ReactEditor.findPath(editor, text);
-  var parentPath = Path.parent(path);
-  var isMarkPlaceholder = leaf[MARK_PLACEHOLDER_SYMBOL] === true; // COMPAT: Render text inside void nodes with a zero-width space.
-  // So the node can contain selection but the text is not visible.
-
-  if (editor.isVoid(parent)) {
-    return /*#__PURE__*/React.createElement(ZeroWidthString, {
-      length: Node.string(parent).length
-    });
-  } // COMPAT: If this is the last text node in an empty block, render a zero-
-  // width space that will convert into a line break when copying and pasting
-  // to support expected plain text.
+    path,
+    diff
+  } = textDiff;
+  return {
+    anchor: {
+      path,
+      offset: diff.start
+    },
+    focus: {
+      path,
+      offset: diff.end
+    }
+  };
+}
+/**
+ * Normalize a 'pending point' a.k.a a point based on the dom state before applying
+ * the pending diffs. Since the pending diffs might have been inserted with different
+ * marks we have to 'walk' the offset from the starting position to ensure we still
+ * have a valid point inside the document
+ */
 
+function normalizePoint(editor, point) {
+  var {
+    path,
+    offset
+  } = point;
 
-  if (leaf.text === '' && parent.children[parent.children.length - 1] === text && !editor.isInline(parent) && Editor.string(editor, parentPath) === '') {
-    return /*#__PURE__*/React.createElement(ZeroWidthString, {
-      isLineBreak: true,
-      isMarkPlaceholder: isMarkPlaceholder
-    });
-  } // COMPAT: If the text is empty, it's because it's on the edge of an inline
-  // node, so we render a zero-width space so that the selection can be
-  // inserted next to it still.
+  if (!Editor.hasPath(editor, path)) {
+    return null;
+  }
 
+  var leaf = Node.get(editor, path);
 
-  if (leaf.text === '') {
-    return /*#__PURE__*/React.createElement(ZeroWidthString, {
-      isMarkPlaceholder: isMarkPlaceholder
-    });
-  } // COMPAT: Browsers will collapse trailing new lines at the end of blocks,
-  // so we need to add an extra trailing new lines to prevent that.
+  if (!Text$1.isText(leaf)) {
+    return null;
+  }
 
+  var parentBlock = Editor.above(editor, {
+    match: n => Element$1.isElement(n) && Editor.isBlock(editor, n),
+    at: path
+  });
 
-  if (isLast && leaf.text.slice(-1) === '\n') {
-    return /*#__PURE__*/React.createElement(TextString, {
-      isTrailing: true,
-      text: leaf.text
-    });
+  if (!parentBlock) {
+    return null;
   }
 
-  return /*#__PURE__*/React.createElement(TextString, {
-    text: leaf.text
-  });
-};
-/**
- * Leaf strings with text in them.
- */
+  while (offset > leaf.text.length) {
+    var entry = Editor.next(editor, {
+      at: path,
+      match: Text$1.isText
+    });
 
+    if (!entry || !Path.isDescendant(entry[1], parentBlock[1])) {
+      return null;
+    }
 
-var TextString = props => {
-  var {
-    text,
-    isTrailing = false
-  } = props;
-  var ref = useRef(null);
+    offset -= leaf.text.length;
+    leaf = entry[0];
+    path = entry[1];
+  }
 
-  var getTextContent = () => {
-    return "".concat(text !== null && text !== void 0 ? text : '').concat(isTrailing ? '\n' : '');
+  return {
+    path,
+    offset
   };
+}
+/**
+ * Normalize a 'pending selection' to ensure it's valid in the current document state.
+ */
 
-  var [initialText] = useState(getTextContent); // This is the actual text rendering boundary where we interface with the DOM
-  // The text is not rendered as part of the virtual DOM, as since we handle basic character insertions natively,
-  // updating the DOM is not a one way dataflow anymore. What we need here is not reconciliation and diffing
-  // with previous version of the virtual DOM, but rather diffing with the actual DOM element, and replace the DOM <span> content
-  // exactly if and only if its current content does not match our current virtual DOM.
-  // Otherwise the DOM TextNode would always be replaced by React as the user types, which interferes with native text features,
-  // eg makes native spellcheck opt out from checking the text node.
-  // useLayoutEffect: updating our span before browser paint
-
-  useIsomorphicLayoutEffect(() => {
-    // null coalescing text to make sure we're not outputing "null" as a string in the extreme case it is nullish at runtime
-    var textWithTrailing = getTextContent();
+function normalizeRange(editor, range) {
+  var anchor = normalizePoint(editor, range.anchor);
 
-    if (ref.current && ref.current.textContent !== textWithTrailing) {
-      ref.current.textContent = textWithTrailing;
-    } // intentionally not specifying dependencies, so that this effect runs on every render
-    // as this effectively replaces "specifying the text in the virtual DOM under the <span> below" on each render
+  if (!anchor) {
+    return null;
+  }
 
-  }); // We intentionally render a memoized <span> that only receives the initial text content when the component is mounted.
-  // We defer to the layout effect above to update the `textContent` of the span element when needed.
+  if (Range.isCollapsed(range)) {
+    return {
+      anchor,
+      focus: anchor
+    };
+  }
 
-  return /*#__PURE__*/React.createElement(MemoizedText$1, {
-    ref: ref
-  }, initialText);
-};
+  var focus = normalizePoint(editor, range.focus);
 
-var MemoizedText$1 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement("span", {
-    "data-slate-string": true,
-    ref: ref
-  }, props.children);
-}));
-/**
- * Leaf strings without text, render as zero-width strings.
- */
+  if (!focus) {
+    return null;
+  }
 
-var ZeroWidthString = props => {
-  var {
-    length = 0,
-    isLineBreak = false,
-    isMarkPlaceholder = false
-  } = props;
-  var attributes = {
-    'data-slate-zero-width': isLineBreak ? 'n' : 'z',
-    'data-slate-length': length
+  return {
+    anchor,
+    focus
   };
+}
+function transformPendingPoint(editor, point, op) {
+  var pendingDiffs = EDITOR_TO_PENDING_DIFFS.get(editor);
+  var textDiff = pendingDiffs === null || pendingDiffs === void 0 ? void 0 : pendingDiffs.find(_ref => {
+    var {
+      path
+    } = _ref;
+    return Path.equals(path, point.path);
+  });
 
-  if (isMarkPlaceholder) {
-    attributes['data-slate-mark-placeholder'] = true;
+  if (!textDiff || point.offset <= textDiff.diff.start) {
+    return Point.transform(point, op, {
+      affinity: 'backward'
+    });
   }
 
-  return /*#__PURE__*/React.createElement("span", Object.assign({}, attributes), !IS_ANDROID || !isLineBreak ? '\uFEFF' : null, isLineBreak ? /*#__PURE__*/React.createElement("br", null) : null);
-};
+  var {
+    diff
+  } = textDiff; // Point references location inside the diff => transform the point based on the location
+  // the diff will be applied to and add the offset inside the diff.
 
-/**
- * A React context for sharing the editor object.
- */
+  if (point.offset <= diff.start + diff.text.length) {
+    var _anchor = {
+      path: point.path,
+      offset: diff.start
+    };
 
-var EditorContext = /*#__PURE__*/createContext(null);
-/**
- * Get the current editor object from the React context.
- */
+    var _transformed = Point.transform(_anchor, op, {
+      affinity: 'backward'
+    });
 
-var useSlateStatic = () => {
-  var editor = useContext(EditorContext);
+    if (!_transformed) {
+      return null;
+    }
 
-  if (!editor) {
-    throw new Error("The `useSlateStatic` hook must be used inside the <Slate> component's context.");
-  }
+    return {
+      path: _transformed.path,
+      offset: _transformed.offset + point.offset - diff.start
+    };
+  } // Point references location after the diff
 
-  return editor;
-};
 
-function disconnectPlaceholderResizeObserver(placeholderResizeObserver, releaseObserver) {
-  if (placeholderResizeObserver.current) {
-    placeholderResizeObserver.current.disconnect();
+  var anchor = {
+    path: point.path,
+    offset: point.offset - diff.text.length + diff.end - diff.start
+  };
+  var transformed = Point.transform(anchor, op, {
+    affinity: 'backward'
+  });
 
-    if (releaseObserver) {
-      placeholderResizeObserver.current = null;
-    }
+  if (!transformed) {
+    return null;
   }
-}
 
-function clearTimeoutRef(timeoutRef) {
-  if (timeoutRef.current) {
-    clearTimeout(timeoutRef.current);
-    timeoutRef.current = null;
+  if (op.type === 'split_node' && Path.equals(op.path, point.path) && anchor.offset < op.position && diff.start < op.position) {
+    return transformed;
   }
+
+  return {
+    path: transformed.path,
+    offset: transformed.offset + diff.text.length - diff.end + diff.start
+  };
 }
-/**
- * Individual leaves in a text node with unique formatting.
- */
+function transformPendingRange(editor, range, op) {
+  var anchor = transformPendingPoint(editor, range.anchor, op);
 
+  if (!anchor) {
+    return null;
+  }
 
-var Leaf = props => {
-  var {
-    leaf,
-    isLast,
-    text,
-    parent,
-    renderPlaceholder,
-    renderLeaf = props => /*#__PURE__*/React.createElement(DefaultLeaf, Object.assign({}, props))
-  } = props;
-  var editor = useSlateStatic();
-  var placeholderResizeObserver = useRef(null);
-  var placeholderRef = useRef(null);
-  var [showPlaceholder, setShowPlaceholder] = useState(false);
-  var showPlaceholderTimeoutRef = useRef(null);
-  var callbackPlaceholderRef = useCallback(placeholderEl => {
-    disconnectPlaceholderResizeObserver(placeholderResizeObserver, placeholderEl == null);
-
-    if (placeholderEl == null) {
-      var _leaf$onPlaceholderRe;
-
-      EDITOR_TO_PLACEHOLDER_ELEMENT.delete(editor);
-      (_leaf$onPlaceholderRe = leaf.onPlaceholderResize) === null || _leaf$onPlaceholderRe === void 0 ? void 0 : _leaf$onPlaceholderRe.call(leaf, null);
-    } else {
-      EDITOR_TO_PLACEHOLDER_ELEMENT.set(editor, placeholderEl);
-
-      if (!placeholderResizeObserver.current) {
-        // Create a new observer and observe the placeholder element.
-        var ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
-        placeholderResizeObserver.current = new ResizeObserver$1(() => {
-          var _leaf$onPlaceholderRe2;
-
-          (_leaf$onPlaceholderRe2 = leaf.onPlaceholderResize) === null || _leaf$onPlaceholderRe2 === void 0 ? void 0 : _leaf$onPlaceholderRe2.call(leaf, placeholderEl);
-        });
-      }
-
-      placeholderResizeObserver.current.observe(placeholderEl);
-      placeholderRef.current = placeholderEl;
-    }
-  }, [placeholderRef, leaf, editor]);
-  var children = /*#__PURE__*/React.createElement(String, {
-    isLast: isLast,
-    leaf: leaf,
-    parent: parent,
-    text: text
-  });
-  var leafIsPlaceholder = leaf[PLACEHOLDER_SYMBOL];
-  useEffect(() => {
-    if (leafIsPlaceholder) {
-      if (!showPlaceholderTimeoutRef.current) {
-        // Delay the placeholder so it will not render in a selection
-        showPlaceholderTimeoutRef.current = setTimeout(() => {
-          setShowPlaceholder(true);
-          showPlaceholderTimeoutRef.current = null;
-        }, 300);
-      }
-    } else {
-      clearTimeoutRef(showPlaceholderTimeoutRef);
-      setShowPlaceholder(false);
-    }
-
-    return () => clearTimeoutRef(showPlaceholderTimeoutRef);
-  }, [leafIsPlaceholder, setShowPlaceholder]);
-
-  if (leafIsPlaceholder && showPlaceholder) {
-    var placeholderProps = {
-      children: leaf.placeholder,
-      attributes: {
-        'data-slate-placeholder': true,
-        style: {
-          position: 'absolute',
-          pointerEvents: 'none',
-          width: '100%',
-          maxWidth: '100%',
-          display: 'block',
-          opacity: '0.333',
-          userSelect: 'none',
-          textDecoration: 'none',
-          // Fixes https://github.com/udecode/plate/issues/2315
-          WebkitUserModify: IS_SAFARI ? 'inherit' : undefined
-        },
-        contentEditable: false,
-        ref: callbackPlaceholderRef
-      }
+  if (Range.isCollapsed(range)) {
+    return {
+      anchor,
+      focus: anchor
     };
-    children = /*#__PURE__*/React.createElement(React.Fragment, null, renderPlaceholder(placeholderProps), children);
-  } // COMPAT: Having the `data-` attributes on these leaf elements ensures that
-  // in certain misbehaving browsers they aren't weirdly cloned/destroyed by
-  // contenteditable behaviors. (2019/05/08)
-
-
-  var attributes = {
-    'data-slate-leaf': true
-  };
-  return renderLeaf({
-    attributes,
-    children,
-    leaf,
-    text
-  });
-};
-
-var MemoizedLeaf = /*#__PURE__*/React.memo(Leaf, (prev, next) => {
-  return next.parent === prev.parent && next.isLast === prev.isLast && next.renderLeaf === prev.renderLeaf && next.renderPlaceholder === prev.renderPlaceholder && next.text === prev.text && Text$1.equals(next.leaf, prev.leaf) && next.leaf[PLACEHOLDER_SYMBOL] === prev.leaf[PLACEHOLDER_SYMBOL];
-});
-var DefaultLeaf = props => {
-  var {
-    attributes,
-    children
-  } = props;
-  return /*#__PURE__*/React.createElement("span", Object.assign({}, attributes), children);
-};
-
-/**
- * Text.
- */
-
-var Text = props => {
-  var {
-    decorations,
-    isLast,
-    parent,
-    renderPlaceholder,
-    renderLeaf,
-    text
-  } = props;
-  var editor = useSlateStatic();
-  var ref = useRef(null);
-  var leaves = Text$1.decorations(text, decorations);
-  var key = ReactEditor.findKey(editor, text);
-  var children = [];
-
-  for (var i = 0; i < leaves.length; i++) {
-    var leaf = leaves[i];
-    children.push( /*#__PURE__*/React.createElement(MemoizedLeaf, {
-      isLast: isLast && i === leaves.length - 1,
-      key: "".concat(key.id, "-").concat(i),
-      renderPlaceholder: renderPlaceholder,
-      leaf: leaf,
-      text: text,
-      parent: parent,
-      renderLeaf: renderLeaf
-    }));
-  } // Update element-related weak maps with the DOM element ref.
-
-
-  var callbackRef = useCallback(span => {
-    var KEY_TO_ELEMENT = EDITOR_TO_KEY_TO_ELEMENT.get(editor);
-
-    if (span) {
-      KEY_TO_ELEMENT === null || KEY_TO_ELEMENT === void 0 ? void 0 : KEY_TO_ELEMENT.set(key, span);
-      NODE_TO_ELEMENT.set(text, span);
-      ELEMENT_TO_NODE.set(span, text);
-    } else {
-      KEY_TO_ELEMENT === null || KEY_TO_ELEMENT === void 0 ? void 0 : KEY_TO_ELEMENT.delete(key);
-      NODE_TO_ELEMENT.delete(text);
-
-      if (ref.current) {
-        ELEMENT_TO_NODE.delete(ref.current);
-      }
-    }
-
-    ref.current = span;
-  }, [ref, editor, key, text]);
-  return /*#__PURE__*/React.createElement("span", {
-    "data-slate-node": "text",
-    ref: callbackRef
-  }, children);
-};
-
-var MemoizedText = /*#__PURE__*/React.memo(Text, (prev, next) => {
-  return next.parent === prev.parent && next.isLast === prev.isLast && next.renderLeaf === prev.renderLeaf && next.renderPlaceholder === prev.renderPlaceholder && next.text === prev.text && isTextDecorationsEqual(next.decorations, prev.decorations);
-});
-
-/**
- * Element.
- */
-
-var Element = props => {
-  var {
-    decorations,
-    element,
-    renderElement = p => /*#__PURE__*/React.createElement(DefaultElement, Object.assign({}, p)),
-    renderPlaceholder,
-    renderLeaf,
-    selection
-  } = props;
-  var editor = useSlateStatic();
-  var readOnly = useReadOnly();
-  var isInline = editor.isInline(element);
-  var key = ReactEditor.findKey(editor, element);
-  var ref = useCallback(ref => {
-    // Update element-related weak maps with the DOM element ref.
-    var KEY_TO_ELEMENT = EDITOR_TO_KEY_TO_ELEMENT.get(editor);
-
-    if (ref) {
-      KEY_TO_ELEMENT === null || KEY_TO_ELEMENT === void 0 ? void 0 : KEY_TO_ELEMENT.set(key, ref);
-      NODE_TO_ELEMENT.set(element, ref);
-      ELEMENT_TO_NODE.set(ref, element);
-    } else {
-      KEY_TO_ELEMENT === null || KEY_TO_ELEMENT === void 0 ? void 0 : KEY_TO_ELEMENT.delete(key);
-      NODE_TO_ELEMENT.delete(element);
-    }
-  }, [editor, key, element]);
-  var children = useChildren({
-    decorations,
-    node: element,
-    renderElement,
-    renderPlaceholder,
-    renderLeaf,
-    selection
-  }); // Attributes that the developer must mix into the element in their
-  // custom node renderer component.
-
-  var attributes = {
-    'data-slate-node': 'element',
-    ref
-  };
-
-  if (isInline) {
-    attributes['data-slate-inline'] = true;
-  } // If it's a block node with inline children, add the proper `dir` attribute
-  // for text direction.
-
-
-  if (!isInline && Editor.hasInlines(editor, element)) {
-    var text = Node.string(element);
-    var dir = getDirection(text);
-
-    if (dir === 'rtl') {
-      attributes.dir = dir;
-    }
-  } // If it's a void node, wrap the children in extra void-specific elements.
-
-
-  if (Editor.isVoid(editor, element)) {
-    attributes['data-slate-void'] = true;
-
-    if (!readOnly && isInline) {
-      attributes.contentEditable = false;
-    }
-
-    var Tag = isInline ? 'span' : 'div';
-    var [[_text]] = Node.texts(element);
-    children = /*#__PURE__*/React.createElement(Tag, {
-      "data-slate-spacer": true,
-      style: {
-        height: '0',
-        color: 'transparent',
-        outline: 'none',
-        position: 'absolute'
-      }
-    }, /*#__PURE__*/React.createElement(MemoizedText, {
-      renderPlaceholder: renderPlaceholder,
-      decorations: [],
-      isLast: false,
-      parent: element,
-      text: _text
-    }));
-    NODE_TO_INDEX.set(_text, 0);
-    NODE_TO_PARENT.set(_text, element);
   }
 
-  return renderElement({
-    attributes,
-    children,
-    element
-  });
-};
-
-var MemoizedElement = /*#__PURE__*/React.memo(Element, (prev, next) => {
-  return prev.element === next.element && prev.renderElement === next.renderElement && prev.renderLeaf === next.renderLeaf && prev.renderPlaceholder === next.renderPlaceholder && isElementDecorationsEqual(prev.decorations, next.decorations) && (prev.selection === next.selection || !!prev.selection && !!next.selection && Range.equals(prev.selection, next.selection));
-});
-/**
- * The default element renderer.
- */
-
-var DefaultElement = props => {
-  var {
-    attributes,
-    children,
-    element
-  } = props;
-  var editor = useSlateStatic();
-  var Tag = editor.isInline(element) ? 'span' : 'div';
-  return /*#__PURE__*/React.createElement(Tag, Object.assign({}, attributes, {
-    style: {
-      position: 'relative'
-    }
-  }), children);
-};
-
-/**
- * A React context for sharing the `decorate` prop of the editable.
- */
-
-var DecorateContext = /*#__PURE__*/createContext(() => []);
-/**
- * Get the current `decorate` prop of the editable.
- */
-
-var useDecorate = () => {
-  return useContext(DecorateContext);
-};
-
-/**
- * A React context for sharing the `selected` state of an element.
- */
-
-var SelectedContext = /*#__PURE__*/createContext(false);
-/**
- * Get the current `selected` state of an element.
- */
-
-var useSelected = () => {
-  return useContext(SelectedContext);
-};
+  var focus = transformPendingPoint(editor, range.focus, op);
 
-/**
- * Children.
- */
+  if (!focus) {
+    return null;
+  }
 
-var useChildren = props => {
+  return {
+    anchor,
+    focus
+  };
+}
+function transformTextDiff(textDiff, op) {
   var {
-    decorations,
-    node,
-    renderElement,
-    renderPlaceholder,
-    renderLeaf,
-    selection
-  } = props;
-  var decorate = useDecorate();
-  var editor = useSlateStatic();
-  var path = ReactEditor.findPath(editor, node);
-  var children = [];
-  var isLeafBlock = Element$1.isElement(node) && !editor.isInline(node) && Editor.hasInlines(editor, node);
+    path,
+    diff,
+    id
+  } = textDiff;
 
-  for (var i = 0; i < node.children.length; i++) {
-    var p = path.concat(i);
-    var n = node.children[i];
-    var key = ReactEditor.findKey(editor, n);
-    var range = Editor.range(editor, p);
-    var sel = selection && Range.intersection(range, selection);
-    var ds = decorate([n, p]);
+  switch (op.type) {
+    case 'insert_text':
+      {
+        if (!Path.equals(op.path, path) || op.offset >= diff.end) {
+          return textDiff;
+        }
 
-    for (var dec of decorations) {
-      var d = Range.intersection(dec, range);
+        if (op.offset <= diff.start) {
+          return {
+            diff: {
+              start: op.text.length + diff.start,
+              end: op.text.length + diff.end,
+              text: diff.text
+            },
+            id,
+            path
+          };
+        }
 
-      if (d) {
-        ds.push(d);
+        return {
+          diff: {
+            start: diff.start,
+            end: diff.end + op.text.length,
+            text: diff.text
+          },
+          id,
+          path
+        };
       }
-    }
-
-    if (Element$1.isElement(n)) {
-      children.push( /*#__PURE__*/React.createElement(SelectedContext.Provider, {
-        key: "provider-".concat(key.id),
-        value: !!sel
-      }, /*#__PURE__*/React.createElement(MemoizedElement, {
-        decorations: ds,
-        element: n,
-        key: key.id,
-        renderElement: renderElement,
-        renderPlaceholder: renderPlaceholder,
-        renderLeaf: renderLeaf,
-        selection: sel
-      })));
-    } else {
-      children.push( /*#__PURE__*/React.createElement(MemoizedText, {
-        decorations: ds,
-        key: key.id,
-        isLast: isLeafBlock && i === node.children.length - 1,
-        parent: node,
-        renderPlaceholder: renderPlaceholder,
-        renderLeaf: renderLeaf,
-        text: n
-      }));
-    }
-
-    NODE_TO_INDEX.set(n, i);
-    NODE_TO_PARENT.set(n, node);
-  }
-
-  return children;
-};
 
-/**
- * A React context for sharing the `readOnly` state of the editor.
- */
+    case 'remove_text':
+      {
+        if (!Path.equals(op.path, path) || op.offset >= diff.end) {
+          return textDiff;
+        }
 
-var ReadOnlyContext = /*#__PURE__*/createContext(false);
-/**
- * Get the current `readOnly` state of the editor.
- */
+        if (op.offset + op.text.length <= diff.start) {
+          return {
+            diff: {
+              start: diff.start - op.text.length,
+              end: diff.end - op.text.length,
+              text: diff.text
+            },
+            id,
+            path
+          };
+        }
 
-var useReadOnly = () => {
-  return useContext(ReadOnlyContext);
-};
+        return {
+          diff: {
+            start: diff.start,
+            end: diff.end - op.text.length,
+            text: diff.text
+          },
+          id,
+          path
+        };
+      }
 
-var SlateContext = /*#__PURE__*/createContext(null);
-/**
- * Get the current editor object from the React context.
- */
+    case 'split_node':
+      {
+        if (!Path.equals(op.path, path) || op.position >= diff.end) {
+          return {
+            diff,
+            id,
+            path: Path.transform(path, op, {
+              affinity: 'backward'
+            })
+          };
+        }
 
-var useSlate = () => {
-  var context = useContext(SlateContext);
+        if (op.position > diff.start) {
+          return {
+            diff: {
+              start: diff.start,
+              end: Math.min(op.position, diff.end),
+              text: diff.text
+            },
+            id,
+            path
+          };
+        }
 
-  if (!context) {
-    throw new Error("The `useSlate` hook must be used inside the <Slate> component's context.");
-  }
+        return {
+          diff: {
+            start: diff.start - op.position,
+            end: diff.end - op.position,
+            text: diff.text
+          },
+          id,
+          path: Path.transform(path, op, {
+            affinity: 'forward'
+          })
+        };
+      }
 
-  var {
-    editor
-  } = context;
-  return editor;
-};
-var useSlateWithV = () => {
-  var context = useContext(SlateContext);
+    case 'merge_node':
+      {
+        if (!Path.equals(op.path, path)) {
+          return {
+            diff,
+            id,
+            path: Path.transform(path, op)
+          };
+        }
 
-  if (!context) {
-    throw new Error("The `useSlate` hook must be used inside the <Slate> component's context.");
+        return {
+          diff: {
+            start: diff.start + op.position,
+            end: diff.end + op.position,
+            text: diff.text
+          },
+          id,
+          path: Path.transform(path, op)
+        };
+      }
   }
 
-  return context;
-};
-
-var TRIPLE_CLICK = 3;
-
-/**
- * Hotkey mappings for each platform.
- */
-
-var HOTKEYS = {
-  bold: 'mod+b',
-  compose: ['down', 'left', 'right', 'up', 'backspace', 'enter'],
-  moveBackward: 'left',
-  moveForward: 'right',
-  moveWordBackward: 'ctrl+left',
-  moveWordForward: 'ctrl+right',
-  deleteBackward: 'shift?+backspace',
-  deleteForward: 'shift?+delete',
-  extendBackward: 'shift+left',
-  extendForward: 'shift+right',
-  italic: 'mod+i',
-  insertSoftBreak: 'shift+enter',
-  splitBlock: 'enter',
-  undo: 'mod+z'
-};
-var APPLE_HOTKEYS = {
-  moveLineBackward: 'opt+up',
-  moveLineForward: 'opt+down',
-  moveWordBackward: 'opt+left',
-  moveWordForward: 'opt+right',
-  deleteBackward: ['ctrl+backspace', 'ctrl+h'],
-  deleteForward: ['ctrl+delete', 'ctrl+d'],
-  deleteLineBackward: 'cmd+shift?+backspace',
-  deleteLineForward: ['cmd+shift?+delete', 'ctrl+k'],
-  deleteWordBackward: 'opt+shift?+backspace',
-  deleteWordForward: 'opt+shift?+delete',
-  extendLineBackward: 'opt+shift+up',
-  extendLineForward: 'opt+shift+down',
-  redo: 'cmd+shift+z',
-  transposeCharacter: 'ctrl+t'
-};
-var WINDOWS_HOTKEYS = {
-  deleteWordBackward: 'ctrl+shift?+backspace',
-  deleteWordForward: 'ctrl+shift?+delete',
-  redo: ['ctrl+y', 'ctrl+shift+z']
-};
-/**
- * Create a platform-aware hotkey checker.
- */
+  var newPath = Path.transform(path, op);
 
-var create = key => {
-  var generic = HOTKEYS[key];
-  var apple = APPLE_HOTKEYS[key];
-  var windows = WINDOWS_HOTKEYS[key];
-  var isGeneric = generic && isKeyHotkey(generic);
-  var isApple = apple && isKeyHotkey(apple);
-  var isWindows = windows && isKeyHotkey(windows);
-  return event => {
-    if (isGeneric && isGeneric(event)) return true;
-    if (IS_APPLE && isApple && isApple(event)) return true;
-    if (!IS_APPLE && isWindows && isWindows(event)) return true;
-    return false;
+  if (!newPath) {
+    return null;
+  }
+
+  return {
+    diff,
+    path: newPath,
+    id
   };
-};
-/**
- * Hotkeys.
- */
+}
 
+function ownKeys$3(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; }
 
-var Hotkeys = {
-  isBold: create('bold'),
-  isCompose: create('compose'),
-  isMoveBackward: create('moveBackward'),
-  isMoveForward: create('moveForward'),
-  isDeleteBackward: create('deleteBackward'),
-  isDeleteForward: create('deleteForward'),
-  isDeleteLineBackward: create('deleteLineBackward'),
-  isDeleteLineForward: create('deleteLineForward'),
-  isDeleteWordBackward: create('deleteWordBackward'),
-  isDeleteWordForward: create('deleteWordForward'),
-  isExtendBackward: create('extendBackward'),
-  isExtendForward: create('extendForward'),
-  isExtendLineBackward: create('extendLineBackward'),
-  isExtendLineForward: create('extendLineForward'),
-  isItalic: create('italic'),
-  isMoveLineBackward: create('moveLineBackward'),
-  isMoveLineForward: create('moveLineForward'),
-  isMoveWordBackward: create('moveWordBackward'),
-  isMoveWordForward: create('moveWordForward'),
-  isRedo: create('redo'),
-  isSoftBreak: create('insertSoftBreak'),
-  isSplitBlock: create('splitBlock'),
-  isTransposeCharacter: create('transposeCharacter'),
-  isUndo: create('undo')
-};
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+// When using keyboard English association function, conpositionEnd triggered too fast, resulting in after `insertText` still maintain association state.
 
-var createRestoreDomManager = (editor, receivedUserInput) => {
-  var bufferedMutations = [];
+var RESOLVE_DELAY = 25; // Time with no user interaction before the current user action is considered as done.
 
-  var clear = () => {
-    bufferedMutations = [];
+var FLUSH_DELAY = 200; // Replace with `const debug = console.log` to debug
+
+var debug = function debug() {}; // Type guard to check if a value is a DataTransfer
+
+
+var isDataTransfer = value => (value === null || value === void 0 ? void 0 : value.constructor.name) === 'DataTransfer';
+
+function createAndroidInputManager(_ref) {
+  var {
+    editor,
+    scheduleOnDOMSelectionChange,
+    onDOMSelectionChange
+  } = _ref;
+  var flushing = false;
+  var compositionEndTimeoutId = null;
+  var flushTimeoutId = null;
+  var actionTimeoutId = null;
+  var idCounter = 0;
+  var insertPositionHint = false;
+
+  var applyPendingSelection = () => {
+    var pendingSelection = EDITOR_TO_PENDING_SELECTION.get(editor);
+    EDITOR_TO_PENDING_SELECTION.delete(editor);
+
+    if (pendingSelection) {
+      var {
+        selection
+      } = editor;
+      var normalized = normalizeRange(editor, pendingSelection);
+
+      if (normalized && (!selection || !Range.equals(normalized, selection))) {
+        Transforms.select(editor, normalized);
+      }
+    }
   };
 
-  var registerMutations = mutations => {
-    if (!receivedUserInput.current) {
+  var performAction = () => {
+    var action = EDITOR_TO_PENDING_ACTION.get(editor);
+    EDITOR_TO_PENDING_ACTION.delete(editor);
+
+    if (!action) {
       return;
     }
 
-    var trackedMutations = mutations.filter(mutation => isTrackedMutation(editor, mutation, mutations));
-    bufferedMutations.push(...trackedMutations);
-  };
+    if (action.at) {
+      var target = Point.isPoint(action.at) ? normalizePoint(editor, action.at) : normalizeRange(editor, action.at);
 
-  function restoreDOM() {
-    if (bufferedMutations.length > 0) {
-      bufferedMutations.reverse().forEach(mutation => {
-        if (mutation.type === 'characterData') {
-          // We don't want to restore the DOM for characterData mutations
-          // because this interrupts the composition.
-          return;
-        }
+      if (!target) {
+        return;
+      }
 
-        mutation.removedNodes.forEach(node => {
-          mutation.target.insertBefore(node, mutation.nextSibling);
-        });
-        mutation.addedNodes.forEach(node => {
-          mutation.target.removeChild(node);
-        });
-      }); // Clear buffered mutations to ensure we don't undo them twice
+      var _targetRange = Editor.range(editor, target);
 
-      clear();
+      if (!editor.selection || !Range.equals(editor.selection, _targetRange)) {
+        Transforms.select(editor, target);
+      }
     }
-  }
 
-  return {
-    registerMutations,
-    restoreDOM,
-    clear
+    action.run();
   };
-};
 
-var MUTATION_OBSERVER_CONFIG$1 = {
-  subtree: true,
-  childList: true,
-  characterData: true,
-  characterDataOldValue: true
-}; // We have to use a class component here since we rely on `getSnapshotBeforeUpdate` which has no FC equivalent
-// to run code synchronously immediately before react commits the component update to the DOM.
+  var flush = () => {
+    if (flushTimeoutId) {
+      clearTimeout(flushTimeoutId);
+      flushTimeoutId = null;
+    }
 
-class RestoreDOMComponent extends Component {
-  constructor() {
-    super(...arguments);
-    this.context = null;
-    this.manager = null;
-    this.mutationObserver = null;
-  }
+    if (actionTimeoutId) {
+      clearTimeout(actionTimeoutId);
+      actionTimeoutId = null;
+    }
 
-  observe() {
-    var _this$mutationObserve;
+    if (!hasPendingDiffs() && !hasPendingAction()) {
+      applyPendingSelection();
+      return;
+    }
 
-    var {
-      node
-    } = this.props;
+    if (!flushing) {
+      flushing = true;
+      setTimeout(() => flushing = false);
+    }
 
-    if (!node.current) {
-      throw new Error('Failed to attach MutationObserver, `node` is undefined');
+    if (hasPendingAction()) {
+      flushing = 'action';
     }
 
-    (_this$mutationObserve = this.mutationObserver) === null || _this$mutationObserve === void 0 ? void 0 : _this$mutationObserve.observe(node.current, MUTATION_OBSERVER_CONFIG$1);
-  }
+    var selectionRef = editor.selection && Editor.rangeRef(editor, editor.selection, {
+      affinity: 'forward'
+    });
+    EDITOR_TO_USER_MARKS.set(editor, editor.marks);
+    debug('flush', EDITOR_TO_PENDING_ACTION.get(editor), EDITOR_TO_PENDING_DIFFS.get(editor));
+    var scheduleSelectionChange = hasPendingDiffs();
+    var diff;
 
-  componentDidMount() {
-    var {
-      receivedUserInput
-    } = this.props;
-    var editor = this.context;
-    this.manager = createRestoreDomManager(editor, receivedUserInput);
-    this.mutationObserver = new MutationObserver(this.manager.registerMutations);
-    this.observe();
-  }
+    while (diff = (_EDITOR_TO_PENDING_DI = EDITOR_TO_PENDING_DIFFS.get(editor)) === null || _EDITOR_TO_PENDING_DI === void 0 ? void 0 : _EDITOR_TO_PENDING_DI[0]) {
+      var _EDITOR_TO_PENDING_DI, _EDITOR_TO_PENDING_DI2;
 
-  getSnapshotBeforeUpdate() {
-    var _this$mutationObserve2, _this$mutationObserve3, _this$manager2;
+      var pendingMarks = EDITOR_TO_PENDING_INSERTION_MARKS.get(editor);
 
-    var pendingMutations = (_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 ? void 0 : _this$mutationObserve2.takeRecords();
+      if (pendingMarks !== undefined) {
+        EDITOR_TO_PENDING_INSERTION_MARKS.delete(editor);
+        editor.marks = pendingMarks;
+      }
 
-    if (pendingMutations !== null && pendingMutations !== void 0 && pendingMutations.length) {
-      var _this$manager;
+      if (pendingMarks && insertPositionHint === false) {
+        insertPositionHint = null;
+      }
+
+      var range = targetRange(diff);
+
+      if (!editor.selection || !Range.equals(editor.selection, range)) {
+        Transforms.select(editor, range);
+      }
+
+      if (diff.diff.text) {
+        Editor.insertText(editor, diff.diff.text);
+      } else {
+        Editor.deleteFragment(editor);
+      } // Remove diff only after we have applied it to account for it when transforming
+      // pending ranges.
+
+
+      EDITOR_TO_PENDING_DIFFS.set(editor, (_EDITOR_TO_PENDING_DI2 = EDITOR_TO_PENDING_DIFFS.get(editor)) === null || _EDITOR_TO_PENDING_DI2 === void 0 ? void 0 : _EDITOR_TO_PENDING_DI2.filter(_ref2 => {
+        var {
+          id
+        } = _ref2;
+        return id !== diff.id;
+      }));
+
+      if (!verifyDiffState(editor, diff)) {
+        scheduleSelectionChange = false;
+        EDITOR_TO_PENDING_ACTION.delete(editor);
+        EDITOR_TO_USER_MARKS.delete(editor);
+        flushing = 'action'; // Ensure we don't restore the pending user (dom) selection
+        // since the document and dom state do not match.
+
+        EDITOR_TO_PENDING_SELECTION.delete(editor);
+        scheduleOnDOMSelectionChange.cancel();
+        onDOMSelectionChange.cancel();
+        selectionRef === null || selectionRef === void 0 ? void 0 : selectionRef.unref();
+      }
+    }
+
+    var selection = selectionRef === null || selectionRef === void 0 ? void 0 : selectionRef.unref();
+
+    if (selection && !EDITOR_TO_PENDING_SELECTION.get(editor) && (!editor.selection || !Range.equals(selection, editor.selection))) {
+      Transforms.select(editor, selection);
+    }
+
+    if (hasPendingAction()) {
+      performAction();
+      return;
+    } // COMPAT: The selectionChange event is fired after the action is performed,
+    // so we have to manually schedule it to ensure we don't 'throw away' the selection
+    // while rendering if we have pending changes.
 
-      (_this$manager = this.manager) === null || _this$manager === void 0 ? void 0 : _this$manager.registerMutations(pendingMutations);
-    }
 
-    (_this$mutationObserve3 = this.mutationObserver) === null || _this$mutationObserve3 === void 0 ? void 0 : _this$mutationObserve3.disconnect();
-    (_this$manager2 = this.manager) === null || _this$manager2 === void 0 ? void 0 : _this$manager2.restoreDOM();
-    return null;
-  }
+    if (scheduleSelectionChange) {
+      scheduleOnDOMSelectionChange();
+    }
 
-  componentDidUpdate() {
-    var _this$manager3;
+    scheduleOnDOMSelectionChange.flush();
+    onDOMSelectionChange.flush();
+    applyPendingSelection();
+    var userMarks = EDITOR_TO_USER_MARKS.get(editor);
+    EDITOR_TO_USER_MARKS.delete(editor);
 
-    (_this$manager3 = this.manager) === null || _this$manager3 === void 0 ? void 0 : _this$manager3.clear();
-    this.observe();
-  }
+    if (userMarks !== undefined) {
+      editor.marks = userMarks;
+      editor.onChange();
+    }
+  };
 
-  componentWillUnmount() {
-    var _this$mutationObserve4;
+  var handleCompositionEnd = _event => {
+    if (compositionEndTimeoutId) {
+      clearTimeout(compositionEndTimeoutId);
+    }
 
-    (_this$mutationObserve4 = this.mutationObserver) === null || _this$mutationObserve4 === void 0 ? void 0 : _this$mutationObserve4.disconnect();
-  }
+    compositionEndTimeoutId = setTimeout(() => {
+      IS_COMPOSING.set(editor, false);
+      flush();
+    }, RESOLVE_DELAY);
+  };
 
-  render() {
-    return this.props.children;
-  }
+  var handleCompositionStart = _event => {
+    IS_COMPOSING.set(editor, true);
 
-}
+    if (compositionEndTimeoutId) {
+      clearTimeout(compositionEndTimeoutId);
+      compositionEndTimeoutId = null;
+    }
+  };
 
-RestoreDOMComponent.contextType = EditorContext;
-var RestoreDOM = IS_ANDROID ? RestoreDOMComponent : _ref => {
-  var {
-    children
-  } = _ref;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
-};
+  var updatePlaceholderVisibility = function updatePlaceholderVisibility() {
+    var forceHide = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    var placeholderElement = EDITOR_TO_PLACEHOLDER_ELEMENT.get(editor);
 
-/**
- * Check whether a text diff was applied in a way we can perform the pending action on /
- * recover the pending selection.
- */
+    if (!placeholderElement) {
+      return;
+    }
 
-function verifyDiffState(editor, textDiff) {
-  var {
-    path,
-    diff
-  } = textDiff;
+    if (hasPendingDiffs() || forceHide) {
+      placeholderElement.style.display = 'none';
+      return;
+    }
 
-  if (!Editor.hasPath(editor, path)) {
-    return false;
-  }
+    placeholderElement.style.removeProperty('display');
+  };
 
-  var node = Node.get(editor, path);
+  var storeDiff = (path, diff) => {
+    var _EDITOR_TO_PENDING_DI3;
+    var pendingDiffs = (_EDITOR_TO_PENDING_DI3 = EDITOR_TO_PENDING_DIFFS.get(editor)) !== null && _EDITOR_TO_PENDING_DI3 !== void 0 ? _EDITOR_TO_PENDING_DI3 : [];
+    EDITOR_TO_PENDING_DIFFS.set(editor, pendingDiffs);
+    var target = Node.leaf(editor, path);
+    var idx = pendingDiffs.findIndex(change => Path.equals(change.path, path));
 
-  if (!Text$1.isText(node)) {
-    return false;
-  }
+    if (idx < 0) {
+      var normalized = normalizeStringDiff(target.text, diff);
 
-  if (diff.start !== node.text.length || diff.text.length === 0) {
-    return node.text.slice(diff.start, diff.start + diff.text.length) === diff.text;
-  }
+      if (normalized) {
+        pendingDiffs.push({
+          path,
+          diff,
+          id: idCounter++
+        });
+      }
 
-  var nextPath = Path.next(path);
+      updatePlaceholderVisibility();
+      return;
+    }
 
-  if (!Editor.hasPath(editor, nextPath)) {
-    return false;
-  }
+    var merged = mergeStringDiffs(target.text, pendingDiffs[idx].diff, diff);
 
-  var nextNode = Node.get(editor, nextPath);
-  return Text$1.isText(nextNode) && nextNode.text.startsWith(diff.text);
-}
-function applyStringDiff(text) {
-  for (var _len = arguments.length, diffs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    diffs[_key - 1] = arguments[_key];
-  }
+    if (!merged) {
+      pendingDiffs.splice(idx, 1);
+      updatePlaceholderVisibility();
+      return;
+    }
 
-  return diffs.reduce((text, diff) => text.slice(0, diff.start) + diff.text + text.slice(diff.end), text);
-}
+    pendingDiffs[idx] = _objectSpread$3(_objectSpread$3({}, pendingDiffs[idx]), {}, {
+      diff: merged
+    });
+  };
 
-function longestCommonPrefixLength(str, another) {
-  var length = Math.min(str.length, another.length);
+  var scheduleAction = function scheduleAction(run) {
+    var {
+      at
+    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    insertPositionHint = false;
+    EDITOR_TO_PENDING_SELECTION.delete(editor);
+    scheduleOnDOMSelectionChange.cancel();
+    onDOMSelectionChange.cancel();
 
-  for (var i = 0; i < length; i++) {
-    if (str.charAt(i) !== another.charAt(i)) {
-      return i;
+    if (hasPendingAction()) {
+      flush();
     }
-  }
 
-  return length;
-}
+    EDITOR_TO_PENDING_ACTION.set(editor, {
+      at,
+      run
+    }); // COMPAT: When deleting before a non-contenteditable element chrome only fires a beforeinput,
+    // (no input) and doesn't perform any dom mutations. Without a flush timeout we would never flush
+    // in this case and thus never actually perform the action.
 
-function longestCommonSuffixLength(str, another, max) {
-  var length = Math.min(str.length, another.length, max);
+    actionTimeoutId = setTimeout(flush);
+  };
 
-  for (var i = 0; i < length; i++) {
-    if (str.charAt(str.length - i - 1) !== another.charAt(another.length - i - 1)) {
-      return i;
+  var handleDOMBeforeInput = event => {
+    var _targetRange2;
+
+    if (flushTimeoutId) {
+      clearTimeout(flushTimeoutId);
+      flushTimeoutId = null;
     }
-  }
 
-  return length;
-}
-/**
- * Remove redundant changes from the diff so that it spans the minimal possible range
- */
+    var {
+      inputType: type
+    } = event;
+    var targetRange = null;
+    var data = event.dataTransfer || event.data || undefined;
 
+    if (insertPositionHint !== false && type !== 'insertText' && type !== 'insertCompositionText') {
+      insertPositionHint = false;
+    }
 
-function normalizeStringDiff(targetText, diff) {
-  var {
-    start,
-    end,
-    text
-  } = diff;
-  var removedText = targetText.slice(start, end);
-  var prefixLength = longestCommonPrefixLength(removedText, text);
-  var max = Math.min(removedText.length - prefixLength, text.length - prefixLength);
-  var suffixLength = longestCommonSuffixLength(removedText, text, max);
-  var normalized = {
-    start: start + prefixLength,
-    end: end - suffixLength,
-    text: text.slice(prefixLength, text.length - suffixLength)
-  };
+    var [nativeTargetRange] = event.getTargetRanges();
 
-  if (normalized.start === normalized.end && normalized.text.length === 0) {
-    return null;
-  }
+    if (nativeTargetRange) {
+      targetRange = ReactEditor.toSlateRange(editor, nativeTargetRange, {
+        exactMatch: false,
+        suppressThrow: true
+      });
+    } // COMPAT: SelectionChange event is fired after the action is performed, so we
+    // have to manually get the selection here to ensure it's up-to-date.
 
-  return normalized;
-}
-/**
- * Return a string diff that is equivalent to applying b after a spanning the range of
- * both changes
- */
 
-function mergeStringDiffs(targetText, a, b) {
-  var start = Math.min(a.start, b.start);
-  var overlap = Math.max(0, Math.min(a.start + a.text.length, b.end) - b.start);
-  var applied = applyStringDiff(targetText, a, b);
-  var sliceEnd = Math.max(b.start + b.text.length, a.start + a.text.length + (a.start + a.text.length > b.start ? b.text.length : 0) - overlap);
-  var text = applied.slice(start, sliceEnd);
-  var end = Math.max(a.end, b.end - a.text.length + (a.end - a.start));
-  return normalizeStringDiff(targetText, {
-    start,
-    end,
-    text
-  });
-}
-/**
- * Get the slate range the text diff spans.
- */
+    var window = ReactEditor.getWindow(editor);
+    var domSelection = window.getSelection();
 
-function targetRange(textDiff) {
-  var {
-    path,
-    diff
-  } = textDiff;
-  return {
-    anchor: {
-      path,
-      offset: diff.start
-    },
-    focus: {
-      path,
-      offset: diff.end
+    if (!targetRange && domSelection) {
+      nativeTargetRange = domSelection;
+      targetRange = ReactEditor.toSlateRange(editor, domSelection, {
+        exactMatch: false,
+        suppressThrow: true
+      });
     }
-  };
-}
-/**
- * Normalize a 'pending point' a.k.a a point based on the dom state before applying
- * the pending diffs. Since the pending diffs might have been inserted with different
- * marks we have to 'walk' the offset from the starting position to ensure we still
- * have a valid point inside the document
- */
 
-function normalizePoint(editor, point) {
-  var {
-    path,
-    offset
-  } = point;
+    targetRange = (_targetRange2 = targetRange) !== null && _targetRange2 !== void 0 ? _targetRange2 : editor.selection;
+
+    if (!targetRange) {
+      return;
+    } // By default, the input manager tries to store text diffs so that we can
+    // defer flushing them at a later point in time. We don't want to flush
+    // for every input event as this can be expensive. However, there are some
+    // scenarios where we cannot safely store the text diff and must instead
+    // schedule an action to let Slate normalize the editor state.
 
-  if (!Editor.hasPath(editor, path)) {
-    return null;
-  }
 
-  var leaf = Node.get(editor, path);
+    var canStoreDiff = true;
 
-  if (!Text$1.isText(leaf)) {
-    return null;
-  }
+    if (type.startsWith('delete')) {
+      if (Range.isExpanded(targetRange)) {
+        var [_start, _end] = Range.edges(targetRange);
 
-  var parentBlock = Editor.above(editor, {
-    match: n => Element$1.isElement(n) && Editor.isBlock(editor, n),
-    at: path
-  });
+        var _leaf = Node.leaf(editor, _start.path);
 
-  if (!parentBlock) {
-    return null;
-  }
+        if (_leaf.text.length === _start.offset && _end.offset === 0) {
+          var next = Editor.next(editor, {
+            at: _start.path,
+            match: Text$1.isText
+          });
 
-  while (offset > leaf.text.length) {
-    var entry = Editor.next(editor, {
-      at: path,
-      match: Text$1.isText
-    });
+          if (next && Path.equals(next[1], _end.path)) {
+            targetRange = {
+              anchor: _end,
+              focus: _end
+            };
+          }
+        }
+      }
 
-    if (!entry || !Path.isDescendant(entry[1], parentBlock[1])) {
-      return null;
-    }
+      var direction = type.endsWith('Backward') ? 'backward' : 'forward';
+      var [start, end] = Range.edges(targetRange);
+      var [leaf, path] = Editor.leaf(editor, start.path);
+      var diff = {
+        text: '',
+        start: start.offset,
+        end: end.offset
+      };
+      var pendingDiffs = EDITOR_TO_PENDING_DIFFS.get(editor);
+      var relevantPendingDiffs = pendingDiffs === null || pendingDiffs === void 0 ? void 0 : pendingDiffs.find(change => Path.equals(change.path, path));
+      var diffs = relevantPendingDiffs ? [relevantPendingDiffs.diff, diff] : [diff];
+      var text = applyStringDiff(leaf.text, ...diffs);
 
-    offset -= leaf.text.length;
-    leaf = entry[0];
-    path = entry[1];
-  }
+      if (text.length === 0) {
+        // Text leaf will be removed, so we need to schedule an
+        // action to remove it so that Slate can normalize instead
+        // of storing as a diff
+        canStoreDiff = false;
+      }
 
-  return {
-    path,
-    offset
-  };
-}
-/**
- * Normalize a 'pending selection' to ensure it's valid in the current document state.
- */
+      if (Range.isExpanded(targetRange)) {
+        if (canStoreDiff && Path.equals(targetRange.anchor.path, targetRange.focus.path)) {
+          var point = {
+            path: targetRange.anchor.path,
+            offset: start.offset
+          };
+          var range = Editor.range(editor, point, point);
+          handleUserSelect(range);
+          return storeDiff(targetRange.anchor.path, {
+            text: '',
+            end: end.offset,
+            start: start.offset
+          });
+        }
 
-function normalizeRange(editor, range) {
-  var anchor = normalizePoint(editor, range.anchor);
+        return scheduleAction(() => Editor.deleteFragment(editor, {
+          direction
+        }), {
+          at: targetRange
+        });
+      }
+    }
 
-  if (!anchor) {
-    return null;
-  }
+    switch (type) {
+      case 'deleteByComposition':
+      case 'deleteByCut':
+      case 'deleteByDrag':
+        {
+          return scheduleAction(() => Editor.deleteFragment(editor), {
+            at: targetRange
+          });
+        }
 
-  if (Range.isCollapsed(range)) {
-    return {
-      anchor,
-      focus: anchor
-    };
-  }
+      case 'deleteContent':
+      case 'deleteContentForward':
+        {
+          var {
+            anchor
+          } = targetRange;
 
-  var focus = normalizePoint(editor, range.focus);
+          if (canStoreDiff && Range.isCollapsed(targetRange)) {
+            var targetNode = Node.leaf(editor, anchor.path);
 
-  if (!focus) {
-    return null;
-  }
+            if (anchor.offset < targetNode.text.length) {
+              return storeDiff(anchor.path, {
+                text: '',
+                start: anchor.offset,
+                end: anchor.offset + 1
+              });
+            }
+          }
 
-  return {
-    anchor,
-    focus
-  };
-}
-function transformPendingPoint(editor, point, op) {
-  var pendingDiffs = EDITOR_TO_PENDING_DIFFS.get(editor);
-  var textDiff = pendingDiffs === null || pendingDiffs === void 0 ? void 0 : pendingDiffs.find(_ref => {
-    var {
-      path
-    } = _ref;
-    return Path.equals(path, point.path);
-  });
+          return scheduleAction(() => Editor.deleteForward(editor), {
+            at: targetRange
+          });
+        }
 
-  if (!textDiff || point.offset <= textDiff.diff.start) {
-    return Point.transform(point, op, {
-      affinity: 'backward'
-    });
-  }
+      case 'deleteContentBackward':
+        {
+          var _nativeTargetRange;
 
-  var {
-    diff
-  } = textDiff; // Point references location inside the diff => transform the point based on the location
-  // the diff will be applied to and add the offset inside the diff.
+          var {
+            anchor: _anchor
+          } = targetRange; // If we have a mismatch between the native and slate selection being collapsed
+          // we are most likely deleting a zero-width placeholder and thus should perform it
+          // as an action to ensure correct behavior (mostly happens with mark placeholders)
 
-  if (point.offset <= diff.start + diff.text.length) {
-    var _anchor = {
-      path: point.path,
-      offset: diff.start
-    };
+          var nativeCollapsed = isDOMSelection(nativeTargetRange) ? nativeTargetRange.isCollapsed : !!((_nativeTargetRange = nativeTargetRange) !== null && _nativeTargetRange !== void 0 && _nativeTargetRange.collapsed);
 
-    var _transformed = Point.transform(_anchor, op, {
-      affinity: 'backward'
-    });
+          if (canStoreDiff && nativeCollapsed && Range.isCollapsed(targetRange) && _anchor.offset > 0) {
+            return storeDiff(_anchor.path, {
+              text: '',
+              start: _anchor.offset - 1,
+              end: _anchor.offset
+            });
+          }
 
-    if (!_transformed) {
-      return null;
-    }
+          return scheduleAction(() => Editor.deleteBackward(editor), {
+            at: targetRange
+          });
+        }
 
-    return {
-      path: _transformed.path,
-      offset: _transformed.offset + point.offset - diff.start
-    };
-  } // Point references location after the diff
+      case 'deleteEntireSoftLine':
+        {
+          return scheduleAction(() => {
+            Editor.deleteBackward(editor, {
+              unit: 'line'
+            });
+            Editor.deleteForward(editor, {
+              unit: 'line'
+            });
+          }, {
+            at: targetRange
+          });
+        }
+
+      case 'deleteHardLineBackward':
+        {
+          return scheduleAction(() => Editor.deleteBackward(editor, {
+            unit: 'block'
+          }), {
+            at: targetRange
+          });
+        }
 
+      case 'deleteSoftLineBackward':
+        {
+          return scheduleAction(() => Editor.deleteBackward(editor, {
+            unit: 'line'
+          }), {
+            at: targetRange
+          });
+        }
 
-  var anchor = {
-    path: point.path,
-    offset: point.offset - diff.text.length + diff.end - diff.start
-  };
-  var transformed = Point.transform(anchor, op, {
-    affinity: 'backward'
-  });
+      case 'deleteHardLineForward':
+        {
+          return scheduleAction(() => Editor.deleteForward(editor, {
+            unit: 'block'
+          }), {
+            at: targetRange
+          });
+        }
 
-  if (!transformed) {
-    return null;
-  }
+      case 'deleteSoftLineForward':
+        {
+          return scheduleAction(() => Editor.deleteForward(editor, {
+            unit: 'line'
+          }), {
+            at: targetRange
+          });
+        }
 
-  if (op.type === 'split_node' && Path.equals(op.path, point.path) && anchor.offset < op.position && diff.start < op.position) {
-    return transformed;
-  }
+      case 'deleteWordBackward':
+        {
+          return scheduleAction(() => Editor.deleteBackward(editor, {
+            unit: 'word'
+          }), {
+            at: targetRange
+          });
+        }
 
-  return {
-    path: transformed.path,
-    offset: transformed.offset + diff.text.length - diff.end + diff.start
-  };
-}
-function transformPendingRange(editor, range, op) {
-  var anchor = transformPendingPoint(editor, range.anchor, op);
+      case 'deleteWordForward':
+        {
+          return scheduleAction(() => Editor.deleteForward(editor, {
+            unit: 'word'
+          }), {
+            at: targetRange
+          });
+        }
 
-  if (!anchor) {
-    return null;
-  }
+      case 'insertLineBreak':
+        {
+          return scheduleAction(() => Editor.insertSoftBreak(editor), {
+            at: targetRange
+          });
+        }
 
-  if (Range.isCollapsed(range)) {
-    return {
-      anchor,
-      focus: anchor
-    };
-  }
+      case 'insertParagraph':
+        {
+          return scheduleAction(() => Editor.insertBreak(editor), {
+            at: targetRange
+          });
+        }
 
-  var focus = transformPendingPoint(editor, range.focus, op);
+      case 'insertCompositionText':
+      case 'deleteCompositionText':
+      case 'insertFromComposition':
+      case 'insertFromDrop':
+      case 'insertFromPaste':
+      case 'insertFromYank':
+      case 'insertReplacementText':
+      case 'insertText':
+        {
+          if (isDataTransfer(data)) {
+            return scheduleAction(() => ReactEditor.insertData(editor, data), {
+              at: targetRange
+            });
+          }
 
-  if (!focus) {
-    return null;
-  }
+          var _text = data !== null && data !== void 0 ? data : ''; // COMPAT: If we are writing inside a placeholder, the ime inserts the text inside
+          // the placeholder itself and thus includes the zero-width space inside edit events.
 
-  return {
-    anchor,
-    focus
-  };
-}
-function transformTextDiff(textDiff, op) {
-  var {
-    path,
-    diff,
-    id
-  } = textDiff;
 
-  switch (op.type) {
-    case 'insert_text':
-      {
-        if (!Path.equals(op.path, path) || op.offset >= diff.end) {
-          return textDiff;
-        }
+          if (EDITOR_TO_PENDING_INSERTION_MARKS.get(editor)) {
+            _text = _text.replace('\uFEFF', '');
+          } // Pastes from the Android clipboard will generate `insertText` events.
+          // If the copied text contains any newlines, Android will append an
+          // extra newline to the end of the copied text.
 
-        if (op.offset <= diff.start) {
-          return {
-            diff: {
-              start: op.text.length + diff.start,
-              end: op.text.length + diff.end,
-              text: diff.text
-            },
-            id,
-            path
-          };
-        }
 
-        return {
-          diff: {
-            start: diff.start,
-            end: diff.end + op.text.length,
-            text: diff.text
-          },
-          id,
-          path
-        };
-      }
+          if (type === 'insertText' && /.*\n.*\n$/.test(_text)) {
+            _text = _text.slice(0, -1);
+          } // If the text includes a newline, split it at newlines and paste each component
+          // string, with soft breaks in between each.
 
-    case 'remove_text':
-      {
-        if (!Path.equals(op.path, path) || op.offset >= diff.end) {
-          return textDiff;
-        }
 
-        if (op.offset + op.text.length <= diff.start) {
-          return {
-            diff: {
-              start: diff.start - op.text.length,
-              end: diff.end - op.text.length,
-              text: diff.text
-            },
-            id,
-            path
-          };
-        }
+          if (_text.includes('\n')) {
+            return scheduleAction(() => {
+              var parts = _text.split('\n');
 
-        return {
-          diff: {
-            start: diff.start,
-            end: diff.end - op.text.length,
-            text: diff.text
-          },
-          id,
-          path
-        };
-      }
+              parts.forEach((line, i) => {
+                if (line) {
+                  Editor.insertText(editor, line);
+                }
 
-    case 'split_node':
-      {
-        if (!Path.equals(op.path, path) || op.position >= diff.end) {
-          return {
-            diff,
-            id,
-            path: Path.transform(path, op, {
-              affinity: 'backward'
-            })
-          };
-        }
+                if (i !== parts.length - 1) {
+                  Editor.insertSoftBreak(editor);
+                }
+              });
+            }, {
+              at: targetRange
+            });
+          }
 
-        if (op.position > diff.start) {
-          return {
-            diff: {
-              start: diff.start,
-              end: Math.min(op.position, diff.end),
-              text: diff.text
-            },
-            id,
-            path
-          };
-        }
+          if (Path.equals(targetRange.anchor.path, targetRange.focus.path)) {
+            var [_start2, _end2] = Range.edges(targetRange);
+            var _diff = {
+              start: _start2.offset,
+              end: _end2.offset,
+              text: _text
+            }; // COMPAT: Swiftkey has a weird bug where the target range of the 2nd word
+            // inserted after a mark placeholder is inserted with an anchor offset off by 1.
+            // So writing 'some text' will result in 'some ttext'. Luckily all 'normal' insert
+            // text events are fired with the correct target ranges, only the final 'insertComposition'
+            // isn't, so we can adjust the target range start offset if we are confident this is the
+            // swiftkey insert causing the issue.
 
-        return {
-          diff: {
-            start: diff.start - op.position,
-            end: diff.end - op.position,
-            text: diff.text
-          },
-          id,
-          path: Path.transform(path, op, {
-            affinity: 'forward'
-          })
-        };
-      }
+            if (_text && insertPositionHint && type === 'insertCompositionText') {
+              var hintPosition = insertPositionHint.start + insertPositionHint.text.search(/\S|$/);
 
-    case 'merge_node':
-      {
-        if (!Path.equals(op.path, path)) {
-          return {
-            diff,
-            id,
-            path: Path.transform(path, op)
-          };
-        }
+              var diffPosition = _diff.start + _diff.text.search(/\S|$/);
 
-        return {
-          diff: {
-            start: diff.start + op.position,
-            end: diff.end + op.position,
-            text: diff.text
-          },
-          id,
-          path: Path.transform(path, op)
-        };
-      }
-  }
+              if (diffPosition === hintPosition + 1 && _diff.end === insertPositionHint.start + insertPositionHint.text.length) {
+                _diff.start -= 1;
+                insertPositionHint = null;
+                scheduleFlush();
+              } else {
+                insertPositionHint = false;
+              }
+            } else if (type === 'insertText') {
+              if (insertPositionHint === null) {
+                insertPositionHint = _diff;
+              } else if (insertPositionHint && Range.isCollapsed(targetRange) && insertPositionHint.end + insertPositionHint.text.length === _start2.offset) {
+                insertPositionHint = _objectSpread$3(_objectSpread$3({}, insertPositionHint), {}, {
+                  text: insertPositionHint.text + _text
+                });
+              } else {
+                insertPositionHint = false;
+              }
+            } else {
+              insertPositionHint = false;
+            }
 
-  var newPath = Path.transform(path, op);
+            if (canStoreDiff) {
+              storeDiff(_start2.path, _diff);
+              return;
+            }
+          }
 
-  if (!newPath) {
-    return null;
-  }
+          return scheduleAction(() => Editor.insertText(editor, _text), {
+            at: targetRange
+          });
+        }
+    }
+  };
 
-  return {
-    diff,
-    path: newPath,
-    id
+  var hasPendingAction = () => {
+    return !!EDITOR_TO_PENDING_ACTION.get(editor);
   };
-}
 
-function ownKeys$3(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; }
+  var hasPendingDiffs = () => {
+    var _EDITOR_TO_PENDING_DI4;
 
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-// When using keyboard English association function, conpositionEnd triggered too fast, resulting in after `insertText` still maintain association state.
+    return !!((_EDITOR_TO_PENDING_DI4 = EDITOR_TO_PENDING_DIFFS.get(editor)) !== null && _EDITOR_TO_PENDING_DI4 !== void 0 && _EDITOR_TO_PENDING_DI4.length);
+  };
 
-var RESOLVE_DELAY = 25; // Time with no user interaction before the current user action is considered as done.
+  var hasPendingChanges = () => {
+    return hasPendingAction() || hasPendingDiffs();
+  };
 
-var FLUSH_DELAY = 200; // Replace with `const debug = console.log` to debug
+  var isFlushing = () => {
+    return flushing;
+  };
 
-var debug = function debug() {}; // Type guard to check if a value is a DataTransfer
+  var handleUserSelect = range => {
+    EDITOR_TO_PENDING_SELECTION.set(editor, range);
 
+    if (flushTimeoutId) {
+      clearTimeout(flushTimeoutId);
+      flushTimeoutId = null;
+    }
 
-var isDataTransfer = value => (value === null || value === void 0 ? void 0 : value.constructor.name) === 'DataTransfer';
+    var {
+      selection
+    } = editor;
 
-function createAndroidInputManager(_ref) {
-  var {
-    editor,
-    scheduleOnDOMSelectionChange,
-    onDOMSelectionChange
-  } = _ref;
-  var flushing = false;
-  var compositionEndTimeoutId = null;
-  var flushTimeoutId = null;
-  var actionTimeoutId = null;
-  var idCounter = 0;
-  var insertPositionHint = false;
+    if (!range) {
+      return;
+    }
 
-  var applyPendingSelection = () => {
-    var pendingSelection = EDITOR_TO_PENDING_SELECTION.get(editor);
-    EDITOR_TO_PENDING_SELECTION.delete(editor);
+    var pathChanged = !selection || !Path.equals(selection.anchor.path, range.anchor.path);
+    var parentPathChanged = !selection || !Path.equals(selection.anchor.path.slice(0, -1), range.anchor.path.slice(0, -1));
 
-    if (pendingSelection) {
-      var {
-        selection
-      } = editor;
-      var normalized = normalizeRange(editor, pendingSelection);
+    if (pathChanged && insertPositionHint || parentPathChanged) {
+      insertPositionHint = false;
+    }
 
-      if (normalized && (!selection || !Range.equals(normalized, selection))) {
-        Transforms.select(editor, normalized);
-      }
+    if (pathChanged || hasPendingDiffs()) {
+      flushTimeoutId = setTimeout(flush, FLUSH_DELAY);
     }
   };
 
-  var performAction = () => {
-    var action = EDITOR_TO_PENDING_ACTION.get(editor);
-    EDITOR_TO_PENDING_ACTION.delete(editor);
+  var handleInput = () => {
+    if (hasPendingAction() || !hasPendingDiffs()) {
+      flush();
+    }
+  };
 
-    if (!action) {
-      return;
+  var handleKeyDown = _ => {
+    // COMPAT: Swiftkey closes the keyboard when typing inside a empty node
+    // directly next to a non-contenteditable element (= the placeholder).
+    // The only event fired soon enough for us to allow hiding the placeholder
+    // without swiftkey picking it up is the keydown event, so we have to hide it
+    // here. See https://github.com/ianstormtaylor/slate/pull/4988#issuecomment-1201050535
+    if (!hasPendingDiffs()) {
+      updatePlaceholderVisibility(true);
+      setTimeout(updatePlaceholderVisibility);
     }
+  };
 
-    if (action.at) {
-      var target = Point.isPoint(action.at) ? normalizePoint(editor, action.at) : normalizeRange(editor, action.at);
+  var scheduleFlush = () => {
+    if (!hasPendingAction()) {
+      actionTimeoutId = setTimeout(flush);
+    }
+  };
 
-      if (!target) {
-        return;
-      }
+  var handleDomMutations = mutations => {
+    if (hasPendingDiffs() || hasPendingAction()) {
+      return;
+    }
 
-      var _targetRange = Editor.range(editor, target);
+    if (mutations.some(mutation => isTrackedMutation(editor, mutation, mutations))) {
+      var _EDITOR_TO_FORCE_REND;
 
-      if (!editor.selection || !Range.equals(editor.selection, _targetRange)) {
-        Transforms.select(editor, target);
-      }
+      // Cause a re-render to restore the dom state if we encounter tracked mutations without
+      // a corresponding pending action.
+      (_EDITOR_TO_FORCE_REND = EDITOR_TO_FORCE_RENDER.get(editor)) === null || _EDITOR_TO_FORCE_REND === void 0 ? void 0 : _EDITOR_TO_FORCE_REND();
     }
+  };
 
-    action.run();
+  return {
+    flush,
+    scheduleFlush,
+    hasPendingDiffs,
+    hasPendingAction,
+    hasPendingChanges,
+    isFlushing,
+    handleUserSelect,
+    handleCompositionEnd,
+    handleCompositionStart,
+    handleDOMBeforeInput,
+    handleKeyDown,
+    handleDomMutations,
+    handleInput
   };
+}
 
-  var flush = () => {
-    if (flushTimeoutId) {
-      clearTimeout(flushTimeoutId);
-      flushTimeoutId = null;
-    }
+function useIsMounted() {
+  var isMountedRef = useRef(false);
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+  return isMountedRef.current;
+}
 
-    if (actionTimeoutId) {
-      clearTimeout(actionTimeoutId);
-      actionTimeoutId = null;
-    }
+/**
+ * Prevent warning on SSR by falling back to useEffect when DOM isn't available
+ */
 
-    if (!hasPendingDiffs() && !hasPendingAction()) {
-      applyPendingSelection();
-      return;
-    }
+var useIsomorphicLayoutEffect = CAN_USE_DOM ? useLayoutEffect : useEffect;
 
-    if (!flushing) {
-      flushing = true;
-      setTimeout(() => flushing = false);
+function useMutationObserver(node, callback, options) {
+  var [mutationObserver] = useState(() => new MutationObserver(callback));
+  useIsomorphicLayoutEffect(() => {
+    // Discard mutations caused during render phase. This works due to react calling
+    // useLayoutEffect synchronously after the render phase before the next tick.
+    mutationObserver.takeRecords();
+  });
+  useEffect(() => {
+    if (!node.current) {
+      throw new Error('Failed to attach MutationObserver, `node` is undefined');
     }
 
-    if (hasPendingAction()) {
-      flushing = 'action';
-    }
+    mutationObserver.observe(node.current, options);
+    return () => mutationObserver.disconnect();
+  }, [mutationObserver, node, options]);
+}
 
-    var selectionRef = editor.selection && Editor.rangeRef(editor, editor.selection, {
-      affinity: 'forward'
-    });
-    EDITOR_TO_USER_MARKS.set(editor, editor.marks);
-    debug('flush', EDITOR_TO_PENDING_ACTION.get(editor), EDITOR_TO_PENDING_DIFFS.get(editor));
-    var scheduleSelectionChange = hasPendingDiffs();
-    var diff;
+var _excluded$3 = ["node"];
 
-    while (diff = (_EDITOR_TO_PENDING_DI = EDITOR_TO_PENDING_DIFFS.get(editor)) === null || _EDITOR_TO_PENDING_DI === void 0 ? void 0 : _EDITOR_TO_PENDING_DI[0]) {
-      var _EDITOR_TO_PENDING_DI, _EDITOR_TO_PENDING_DI2;
+function ownKeys$2(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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var MUTATION_OBSERVER_CONFIG$1 = {
+  subtree: true,
+  childList: true,
+  characterData: true
+};
+var useAndroidInputManager = !IS_ANDROID ? () => null : _ref => {
+  var {
+    node
+  } = _ref,
+      options = _objectWithoutProperties(_ref, _excluded$3);
+
+  if (!IS_ANDROID) {
+    return null;
+  }
+
+  var editor = useSlateStatic();
+  var isMounted = useIsMounted();
+  var [inputManager] = useState(() => createAndroidInputManager(_objectSpread$2({
+    editor
+  }, options)));
+  useMutationObserver(node, inputManager.handleDomMutations, MUTATION_OBSERVER_CONFIG$1);
+  EDITOR_TO_SCHEDULE_FLUSH.set(editor, inputManager.scheduleFlush);
+
+  if (isMounted) {
+    inputManager.flush();
+  }
+
+  return inputManager;
+};
+
+var _excluded$2 = ["anchor", "focus"],
+    _excluded2$1 = ["anchor", "focus"];
+var shallowCompare = (obj1, obj2) => Object.keys(obj1).length === Object.keys(obj2).length && Object.keys(obj1).every(key => obj2.hasOwnProperty(key) && obj1[key] === obj2[key]);
+
+var isDecorationFlagsEqual = (range, other) => {
+  var rangeOwnProps = _objectWithoutProperties(range, _excluded$2);
+
+  var otherOwnProps = _objectWithoutProperties(other, _excluded2$1);
+
+  return range[PLACEHOLDER_SYMBOL] === other[PLACEHOLDER_SYMBOL] && shallowCompare(rangeOwnProps, otherOwnProps);
+};
+/**
+ * Check if a list of decorator ranges are equal to another.
+ *
+ * PERF: this requires the two lists to also have the ranges inside them in the
+ * same order, but this is an okay constraint for us since decorations are
+ * kept in order, and the odd case where they aren't is okay to re-render for.
+ */
+
+
+var isElementDecorationsEqual = (list, another) => {
+  if (list.length !== another.length) {
+    return false;
+  }
+
+  for (var i = 0; i < list.length; i++) {
+    var range = list[i];
+    var other = another[i];
+
+    if (!Range.equals(range, other) || !isDecorationFlagsEqual(range, other)) {
+      return false;
+    }
+  }
+
+  return true;
+};
+/**
+ * Check if a list of decorator ranges are equal to another.
+ *
+ * PERF: this requires the two lists to also have the ranges inside them in the
+ * same order, but this is an okay constraint for us since decorations are
+ * kept in order, and the odd case where they aren't is okay to re-render for.
+ */
 
-      var pendingMarks = EDITOR_TO_PENDING_INSERTION_MARKS.get(editor);
+var isTextDecorationsEqual = (list, another) => {
+  if (list.length !== another.length) {
+    return false;
+  }
 
-      if (pendingMarks !== undefined) {
-        EDITOR_TO_PENDING_INSERTION_MARKS.delete(editor);
-        editor.marks = pendingMarks;
-      }
+  for (var i = 0; i < list.length; i++) {
+    var range = list[i];
+    var other = another[i]; // compare only offsets because paths doesn't matter for text
 
-      if (pendingMarks && insertPositionHint === false) {
-        insertPositionHint = null;
-      }
+    if (range.anchor.offset !== other.anchor.offset || range.focus.offset !== other.focus.offset || !isDecorationFlagsEqual(range, other)) {
+      return false;
+    }
+  }
 
-      var range = targetRange(diff);
+  return true;
+};
 
-      if (!editor.selection || !Range.equals(editor.selection, range)) {
-        Transforms.select(editor, range);
-      }
+/**
+ * Leaf content strings.
+ */
 
-      if (diff.diff.text) {
-        Editor.insertText(editor, diff.diff.text);
-      } else {
-        Editor.deleteFragment(editor);
-      } // Remove diff only after we have applied it to account for it when transforming
-      // pending ranges.
+var String = props => {
+  var {
+    isLast,
+    leaf,
+    parent,
+    text
+  } = props;
+  var editor = useSlateStatic();
+  var path = ReactEditor.findPath(editor, text);
+  var parentPath = Path.parent(path);
+  var isMarkPlaceholder = leaf[MARK_PLACEHOLDER_SYMBOL] === true; // COMPAT: Render text inside void nodes with a zero-width space.
+  // So the node can contain selection but the text is not visible.
 
+  if (editor.isVoid(parent)) {
+    return /*#__PURE__*/React.createElement(ZeroWidthString, {
+      length: Node.string(parent).length
+    });
+  } // COMPAT: If this is the last text node in an empty block, render a zero-
+  // width space that will convert into a line break when copying and pasting
+  // to support expected plain text.
 
-      EDITOR_TO_PENDING_DIFFS.set(editor, (_EDITOR_TO_PENDING_DI2 = EDITOR_TO_PENDING_DIFFS.get(editor)) === null || _EDITOR_TO_PENDING_DI2 === void 0 ? void 0 : _EDITOR_TO_PENDING_DI2.filter(_ref2 => {
-        var {
-          id
-        } = _ref2;
-        return id !== diff.id;
-      }));
 
-      if (!verifyDiffState(editor, diff)) {
-        scheduleSelectionChange = false;
-        EDITOR_TO_PENDING_ACTION.delete(editor);
-        EDITOR_TO_USER_MARKS.delete(editor);
-        flushing = 'action'; // Ensure we don't restore the pending user (dom) selection
-        // since the document and dom state do not match.
+  if (leaf.text === '' && parent.children[parent.children.length - 1] === text && !editor.isInline(parent) && Editor.string(editor, parentPath) === '') {
+    return /*#__PURE__*/React.createElement(ZeroWidthString, {
+      isLineBreak: true,
+      isMarkPlaceholder: isMarkPlaceholder
+    });
+  } // COMPAT: If the text is empty, it's because it's on the edge of an inline
+  // node, so we render a zero-width space so that the selection can be
+  // inserted next to it still.
 
-        EDITOR_TO_PENDING_SELECTION.delete(editor);
-        scheduleOnDOMSelectionChange.cancel();
-        onDOMSelectionChange.cancel();
-        selectionRef === null || selectionRef === void 0 ? void 0 : selectionRef.unref();
-      }
-    }
 
-    var selection = selectionRef === null || selectionRef === void 0 ? void 0 : selectionRef.unref();
+  if (leaf.text === '') {
+    return /*#__PURE__*/React.createElement(ZeroWidthString, {
+      isMarkPlaceholder: isMarkPlaceholder
+    });
+  } // COMPAT: Browsers will collapse trailing new lines at the end of blocks,
+  // so we need to add an extra trailing new lines to prevent that.
 
-    if (selection && !EDITOR_TO_PENDING_SELECTION.get(editor) && (!editor.selection || !Range.equals(selection, editor.selection))) {
-      Transforms.select(editor, selection);
-    }
 
-    if (hasPendingAction()) {
-      performAction();
-      return;
-    } // COMPAT: The selectionChange event is fired after the action is performed,
-    // so we have to manually schedule it to ensure we don't 'throw away' the selection
-    // while rendering if we have pending changes.
+  if (isLast && leaf.text.slice(-1) === '\n') {
+    return /*#__PURE__*/React.createElement(TextString, {
+      isTrailing: true,
+      text: leaf.text
+    });
+  }
 
+  return /*#__PURE__*/React.createElement(TextString, {
+    text: leaf.text
+  });
+};
+/**
+ * Leaf strings with text in them.
+ */
 
-    if (scheduleSelectionChange) {
-      scheduleOnDOMSelectionChange();
-    }
 
-    scheduleOnDOMSelectionChange.flush();
-    onDOMSelectionChange.flush();
-    applyPendingSelection();
-    var userMarks = EDITOR_TO_USER_MARKS.get(editor);
-    EDITOR_TO_USER_MARKS.delete(editor);
+var TextString = props => {
+  var {
+    text,
+    isTrailing = false
+  } = props;
+  var ref = useRef(null);
 
-    if (userMarks !== undefined) {
-      editor.marks = userMarks;
-      editor.onChange();
-    }
+  var getTextContent = () => {
+    return "".concat(text !== null && text !== void 0 ? text : '').concat(isTrailing ? '\n' : '');
   };
 
-  var handleCompositionEnd = _event => {
-    if (compositionEndTimeoutId) {
-      clearTimeout(compositionEndTimeoutId);
-    }
-
-    compositionEndTimeoutId = setTimeout(() => {
-      IS_COMPOSING.set(editor, false);
-      flush();
-    }, RESOLVE_DELAY);
-  };
+  var [initialText] = useState(getTextContent); // This is the actual text rendering boundary where we interface with the DOM
+  // The text is not rendered as part of the virtual DOM, as since we handle basic character insertions natively,
+  // updating the DOM is not a one way dataflow anymore. What we need here is not reconciliation and diffing
+  // with previous version of the virtual DOM, but rather diffing with the actual DOM element, and replace the DOM <span> content
+  // exactly if and only if its current content does not match our current virtual DOM.
+  // Otherwise the DOM TextNode would always be replaced by React as the user types, which interferes with native text features,
+  // eg makes native spellcheck opt out from checking the text node.
+  // useLayoutEffect: updating our span before browser paint
 
-  var handleCompositionStart = _event => {
-    IS_COMPOSING.set(editor, true);
+  useIsomorphicLayoutEffect(() => {
+    // null coalescing text to make sure we're not outputing "null" as a string in the extreme case it is nullish at runtime
+    var textWithTrailing = getTextContent();
 
-    if (compositionEndTimeoutId) {
-      clearTimeout(compositionEndTimeoutId);
-      compositionEndTimeoutId = null;
-    }
-  };
+    if (ref.current && ref.current.textContent !== textWithTrailing) {
+      ref.current.textContent = textWithTrailing;
+    } // intentionally not specifying dependencies, so that this effect runs on every render
+    // as this effectively replaces "specifying the text in the virtual DOM under the <span> below" on each render
 
-  var updatePlaceholderVisibility = function updatePlaceholderVisibility() {
-    var forceHide = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    var placeholderElement = EDITOR_TO_PLACEHOLDER_ELEMENT.get(editor);
+  }); // We intentionally render a memoized <span> that only receives the initial text content when the component is mounted.
+  // We defer to the layout effect above to update the `textContent` of the span element when needed.
 
-    if (!placeholderElement) {
-      return;
-    }
+  return /*#__PURE__*/React.createElement(MemoizedText$1, {
+    ref: ref
+  }, initialText);
+};
 
-    if (hasPendingDiffs() || forceHide) {
-      placeholderElement.style.display = 'none';
-      return;
-    }
+var MemoizedText$1 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, ref) => {
+  return /*#__PURE__*/React.createElement("span", {
+    "data-slate-string": true,
+    ref: ref
+  }, props.children);
+}));
+/**
+ * Leaf strings without text, render as zero-width strings.
+ */
 
-    placeholderElement.style.removeProperty('display');
+var ZeroWidthString = props => {
+  var {
+    length = 0,
+    isLineBreak = false,
+    isMarkPlaceholder = false
+  } = props;
+  var attributes = {
+    'data-slate-zero-width': isLineBreak ? 'n' : 'z',
+    'data-slate-length': length
   };
 
-  var storeDiff = (path, diff) => {
-    var _EDITOR_TO_PENDING_DI3;
-    var pendingDiffs = (_EDITOR_TO_PENDING_DI3 = EDITOR_TO_PENDING_DIFFS.get(editor)) !== null && _EDITOR_TO_PENDING_DI3 !== void 0 ? _EDITOR_TO_PENDING_DI3 : [];
-    EDITOR_TO_PENDING_DIFFS.set(editor, pendingDiffs);
-    var target = Node.leaf(editor, path);
-    var idx = pendingDiffs.findIndex(change => Path.equals(change.path, path));
-
-    if (idx < 0) {
-      var normalized = normalizeStringDiff(target.text, diff);
-
-      if (normalized) {
-        pendingDiffs.push({
-          path,
-          diff,
-          id: idCounter++
-        });
-      }
+  if (isMarkPlaceholder) {
+    attributes['data-slate-mark-placeholder'] = true;
+  }
 
-      updatePlaceholderVisibility();
-      return;
-    }
+  return /*#__PURE__*/React.createElement("span", Object.assign({}, attributes), !IS_ANDROID || !isLineBreak ? '\uFEFF' : null, isLineBreak ? /*#__PURE__*/React.createElement("br", null) : null);
+};
 
-    var merged = mergeStringDiffs(target.text, pendingDiffs[idx].diff, diff);
+function disconnectPlaceholderResizeObserver(placeholderResizeObserver, releaseObserver) {
+  if (placeholderResizeObserver.current) {
+    placeholderResizeObserver.current.disconnect();
 
-    if (!merged) {
-      pendingDiffs.splice(idx, 1);
-      updatePlaceholderVisibility();
-      return;
+    if (releaseObserver) {
+      placeholderResizeObserver.current = null;
     }
+  }
+}
 
-    pendingDiffs[idx] = _objectSpread$3(_objectSpread$3({}, pendingDiffs[idx]), {}, {
-      diff: merged
-    });
-  };
-
-  var scheduleAction = function scheduleAction(run) {
-    var {
-      at
-    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    insertPositionHint = false;
-    EDITOR_TO_PENDING_SELECTION.delete(editor);
-    scheduleOnDOMSelectionChange.cancel();
-    onDOMSelectionChange.cancel();
+function clearTimeoutRef(timeoutRef) {
+  if (timeoutRef.current) {
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = null;
+  }
+}
+/**
+ * Individual leaves in a text node with unique formatting.
+ */
 
-    if (hasPendingAction()) {
-      flush();
-    }
 
-    EDITOR_TO_PENDING_ACTION.set(editor, {
-      at,
-      run
-    }); // COMPAT: When deleting before a non-contenteditable element chrome only fires a beforeinput,
-    // (no input) and doesn't perform any dom mutations. Without a flush timeout we would never flush
-    // in this case and thus never actually perform the action.
+var Leaf = props => {
+  var {
+    leaf,
+    isLast,
+    text,
+    parent,
+    renderPlaceholder,
+    renderLeaf = props => /*#__PURE__*/React.createElement(DefaultLeaf, Object.assign({}, props))
+  } = props;
+  var editor = useSlateStatic();
+  var placeholderResizeObserver = useRef(null);
+  var placeholderRef = useRef(null);
+  var [showPlaceholder, setShowPlaceholder] = useState(false);
+  var showPlaceholderTimeoutRef = useRef(null);
+  var callbackPlaceholderRef = useCallback(placeholderEl => {
+    disconnectPlaceholderResizeObserver(placeholderResizeObserver, placeholderEl == null);
 
-    actionTimeoutId = setTimeout(flush);
-  };
+    if (placeholderEl == null) {
+      var _leaf$onPlaceholderRe;
 
-  var handleDOMBeforeInput = event => {
-    var _targetRange2;
+      EDITOR_TO_PLACEHOLDER_ELEMENT.delete(editor);
+      (_leaf$onPlaceholderRe = leaf.onPlaceholderResize) === null || _leaf$onPlaceholderRe === void 0 ? void 0 : _leaf$onPlaceholderRe.call(leaf, null);
+    } else {
+      EDITOR_TO_PLACEHOLDER_ELEMENT.set(editor, placeholderEl);
 
-    if (flushTimeoutId) {
-      clearTimeout(flushTimeoutId);
-      flushTimeoutId = null;
-    }
+      if (!placeholderResizeObserver.current) {
+        // Create a new observer and observe the placeholder element.
+        var ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
+        placeholderResizeObserver.current = new ResizeObserver$1(() => {
+          var _leaf$onPlaceholderRe2;
 
-    var {
-      inputType: type
-    } = event;
-    var targetRange = null;
-    var data = event.dataTransfer || event.data || undefined;
+          (_leaf$onPlaceholderRe2 = leaf.onPlaceholderResize) === null || _leaf$onPlaceholderRe2 === void 0 ? void 0 : _leaf$onPlaceholderRe2.call(leaf, placeholderEl);
+        });
+      }
 
-    if (insertPositionHint !== false && type !== 'insertText' && type !== 'insertCompositionText') {
-      insertPositionHint = false;
+      placeholderResizeObserver.current.observe(placeholderEl);
+      placeholderRef.current = placeholderEl;
+    }
+  }, [placeholderRef, leaf, editor]);
+  var children = /*#__PURE__*/React.createElement(String, {
+    isLast: isLast,
+    leaf: leaf,
+    parent: parent,
+    text: text
+  });
+  var leafIsPlaceholder = leaf[PLACEHOLDER_SYMBOL];
+  useEffect(() => {
+    if (leafIsPlaceholder) {
+      if (!showPlaceholderTimeoutRef.current) {
+        // Delay the placeholder so it will not render in a selection
+        showPlaceholderTimeoutRef.current = setTimeout(() => {
+          setShowPlaceholder(true);
+          showPlaceholderTimeoutRef.current = null;
+        }, 300);
+      }
+    } else {
+      clearTimeoutRef(showPlaceholderTimeoutRef);
+      setShowPlaceholder(false);
     }
 
-    var [nativeTargetRange] = event.getTargetRanges();
-
-    if (nativeTargetRange) {
-      targetRange = ReactEditor.toSlateRange(editor, nativeTargetRange, {
-        exactMatch: false,
-        suppressThrow: true
-      });
-    } // COMPAT: SelectionChange event is fired after the action is performed, so we
-    // have to manually get the selection here to ensure it's up-to-date.
+    return () => clearTimeoutRef(showPlaceholderTimeoutRef);
+  }, [leafIsPlaceholder, setShowPlaceholder]);
 
+  if (leafIsPlaceholder && showPlaceholder) {
+    var placeholderProps = {
+      children: leaf.placeholder,
+      attributes: {
+        'data-slate-placeholder': true,
+        style: {
+          position: 'absolute',
+          pointerEvents: 'none',
+          width: '100%',
+          maxWidth: '100%',
+          display: 'block',
+          opacity: '0.333',
+          userSelect: 'none',
+          textDecoration: 'none',
+          // Fixes https://github.com/udecode/plate/issues/2315
+          WebkitUserModify: IS_SAFARI ? 'inherit' : undefined
+        },
+        contentEditable: false,
+        ref: callbackPlaceholderRef
+      }
+    };
+    children = /*#__PURE__*/React.createElement(React.Fragment, null, renderPlaceholder(placeholderProps), children);
+  } // COMPAT: Having the `data-` attributes on these leaf elements ensures that
+  // in certain misbehaving browsers they aren't weirdly cloned/destroyed by
+  // contenteditable behaviors. (2019/05/08)
 
-    var window = ReactEditor.getWindow(editor);
-    var domSelection = window.getSelection();
 
-    if (!targetRange && domSelection) {
-      nativeTargetRange = domSelection;
-      targetRange = ReactEditor.toSlateRange(editor, domSelection, {
-        exactMatch: false,
-        suppressThrow: true
-      });
-    }
+  var attributes = {
+    'data-slate-leaf': true
+  };
+  return renderLeaf({
+    attributes,
+    children,
+    leaf,
+    text
+  });
+};
 
-    targetRange = (_targetRange2 = targetRange) !== null && _targetRange2 !== void 0 ? _targetRange2 : editor.selection;
+var MemoizedLeaf = /*#__PURE__*/React.memo(Leaf, (prev, next) => {
+  return next.parent === prev.parent && next.isLast === prev.isLast && next.renderLeaf === prev.renderLeaf && next.renderPlaceholder === prev.renderPlaceholder && next.text === prev.text && Text$1.equals(next.leaf, prev.leaf) && next.leaf[PLACEHOLDER_SYMBOL] === prev.leaf[PLACEHOLDER_SYMBOL];
+});
+var DefaultLeaf = props => {
+  var {
+    attributes,
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement("span", Object.assign({}, attributes), children);
+};
 
-    if (!targetRange) {
-      return;
-    } // By default, the input manager tries to store text diffs so that we can
-    // defer flushing them at a later point in time. We don't want to flush
-    // for every input event as this can be expensive. However, there are some
-    // scenarios where we cannot safely store the text diff and must instead
-    // schedule an action to let Slate normalize the editor state.
+/**
+ * Text.
+ */
 
+var Text = props => {
+  var {
+    decorations,
+    isLast,
+    parent,
+    renderPlaceholder,
+    renderLeaf,
+    text
+  } = props;
+  var editor = useSlateStatic();
+  var ref = useRef(null);
+  var leaves = Text$1.decorations(text, decorations);
+  var key = ReactEditor.findKey(editor, text);
+  var children = [];
 
-    var canStoreDiff = true;
+  for (var i = 0; i < leaves.length; i++) {
+    var leaf = leaves[i];
+    children.push( /*#__PURE__*/React.createElement(MemoizedLeaf, {
+      isLast: isLast && i === leaves.length - 1,
+      key: "".concat(key.id, "-").concat(i),
+      renderPlaceholder: renderPlaceholder,
+      leaf: leaf,
+      text: text,
+      parent: parent,
+      renderLeaf: renderLeaf
+    }));
+  } // Update element-related weak maps with the DOM element ref.
 
-    if (type.startsWith('delete')) {
-      if (Range.isExpanded(targetRange)) {
-        var [_start, _end] = Range.edges(targetRange);
 
-        var _leaf = Node.leaf(editor, _start.path);
+  var callbackRef = useCallback(span => {
+    var KEY_TO_ELEMENT = EDITOR_TO_KEY_TO_ELEMENT.get(editor);
 
-        if (_leaf.text.length === _start.offset && _end.offset === 0) {
-          var next = Editor.next(editor, {
-            at: _start.path,
-            match: Text$1.isText
-          });
+    if (span) {
+      KEY_TO_ELEMENT === null || KEY_TO_ELEMENT === void 0 ? void 0 : KEY_TO_ELEMENT.set(key, span);
+      NODE_TO_ELEMENT.set(text, span);
+      ELEMENT_TO_NODE.set(span, text);
+    } else {
+      KEY_TO_ELEMENT === null || KEY_TO_ELEMENT === void 0 ? void 0 : KEY_TO_ELEMENT.delete(key);
+      NODE_TO_ELEMENT.delete(text);
 
-          if (next && Path.equals(next[1], _end.path)) {
-            targetRange = {
-              anchor: _end,
-              focus: _end
-            };
-          }
-        }
+      if (ref.current) {
+        ELEMENT_TO_NODE.delete(ref.current);
       }
+    }
 
-      var direction = type.endsWith('Backward') ? 'backward' : 'forward';
-      var [start, end] = Range.edges(targetRange);
-      var [leaf, path] = Editor.leaf(editor, start.path);
-      var diff = {
-        text: '',
-        start: start.offset,
-        end: end.offset
-      };
-      var pendingDiffs = EDITOR_TO_PENDING_DIFFS.get(editor);
-      var relevantPendingDiffs = pendingDiffs === null || pendingDiffs === void 0 ? void 0 : pendingDiffs.find(change => Path.equals(change.path, path));
-      var diffs = relevantPendingDiffs ? [relevantPendingDiffs.diff, diff] : [diff];
-      var text = applyStringDiff(leaf.text, ...diffs);
-
-      if (text.length === 0) {
-        // Text leaf will be removed, so we need to schedule an
-        // action to remove it so that Slate can normalize instead
-        // of storing as a diff
-        canStoreDiff = false;
-      }
+    ref.current = span;
+  }, [ref, editor, key, text]);
+  return /*#__PURE__*/React.createElement("span", {
+    "data-slate-node": "text",
+    ref: callbackRef
+  }, children);
+};
 
-      if (Range.isExpanded(targetRange)) {
-        if (canStoreDiff && Path.equals(targetRange.anchor.path, targetRange.focus.path)) {
-          var point = {
-            path: targetRange.anchor.path,
-            offset: start.offset
-          };
-          var range = Editor.range(editor, point, point);
-          handleUserSelect(range);
-          return storeDiff(targetRange.anchor.path, {
-            text: '',
-            end: end.offset,
-            start: start.offset
-          });
-        }
+var MemoizedText = /*#__PURE__*/React.memo(Text, (prev, next) => {
+  return next.parent === prev.parent && next.isLast === prev.isLast && next.renderLeaf === prev.renderLeaf && next.renderPlaceholder === prev.renderPlaceholder && next.text === prev.text && isTextDecorationsEqual(next.decorations, prev.decorations);
+});
 
-        return scheduleAction(() => Editor.deleteFragment(editor, {
-          direction
-        }), {
-          at: targetRange
-        });
-      }
+/**
+ * Element.
+ */
+
+var Element = props => {
+  var {
+    decorations,
+    element,
+    renderElement = p => /*#__PURE__*/React.createElement(DefaultElement, Object.assign({}, p)),
+    renderPlaceholder,
+    renderLeaf,
+    selection
+  } = props;
+  var editor = useSlateStatic();
+  var readOnly = useReadOnly();
+  var isInline = editor.isInline(element);
+  var key = ReactEditor.findKey(editor, element);
+  var ref = useCallback(ref => {
+    // Update element-related weak maps with the DOM element ref.
+    var KEY_TO_ELEMENT = EDITOR_TO_KEY_TO_ELEMENT.get(editor);
+
+    if (ref) {
+      KEY_TO_ELEMENT === null || KEY_TO_ELEMENT === void 0 ? void 0 : KEY_TO_ELEMENT.set(key, ref);
+      NODE_TO_ELEMENT.set(element, ref);
+      ELEMENT_TO_NODE.set(ref, element);
+    } else {
+      KEY_TO_ELEMENT === null || KEY_TO_ELEMENT === void 0 ? void 0 : KEY_TO_ELEMENT.delete(key);
+      NODE_TO_ELEMENT.delete(element);
     }
+  }, [editor, key, element]);
+  var children = useChildren({
+    decorations,
+    node: element,
+    renderElement,
+    renderPlaceholder,
+    renderLeaf,
+    selection
+  }); // Attributes that the developer must mix into the element in their
+  // custom node renderer component.
 
-    switch (type) {
-      case 'deleteByComposition':
-      case 'deleteByCut':
-      case 'deleteByDrag':
-        {
-          return scheduleAction(() => Editor.deleteFragment(editor), {
-            at: targetRange
-          });
-        }
+  var attributes = {
+    'data-slate-node': 'element',
+    ref
+  };
 
-      case 'deleteContent':
-      case 'deleteContentForward':
-        {
-          var {
-            anchor
-          } = targetRange;
+  if (isInline) {
+    attributes['data-slate-inline'] = true;
+  } // If it's a block node with inline children, add the proper `dir` attribute
+  // for text direction.
 
-          if (canStoreDiff && Range.isCollapsed(targetRange)) {
-            var targetNode = Node.leaf(editor, anchor.path);
 
-            if (anchor.offset < targetNode.text.length) {
-              return storeDiff(anchor.path, {
-                text: '',
-                start: anchor.offset,
-                end: anchor.offset + 1
-              });
-            }
-          }
+  if (!isInline && Editor.hasInlines(editor, element)) {
+    var text = Node.string(element);
+    var dir = getDirection(text);
 
-          return scheduleAction(() => Editor.deleteForward(editor), {
-            at: targetRange
-          });
-        }
+    if (dir === 'rtl') {
+      attributes.dir = dir;
+    }
+  } // If it's a void node, wrap the children in extra void-specific elements.
 
-      case 'deleteContentBackward':
-        {
-          var _nativeTargetRange;
 
-          var {
-            anchor: _anchor
-          } = targetRange; // If we have a mismatch between the native and slate selection being collapsed
-          // we are most likely deleting a zero-width placeholder and thus should perform it
-          // as an action to ensure correct behavior (mostly happens with mark placeholders)
+  if (Editor.isVoid(editor, element)) {
+    attributes['data-slate-void'] = true;
 
-          var nativeCollapsed = isDOMSelection(nativeTargetRange) ? nativeTargetRange.isCollapsed : !!((_nativeTargetRange = nativeTargetRange) !== null && _nativeTargetRange !== void 0 && _nativeTargetRange.collapsed);
+    if (!readOnly && isInline) {
+      attributes.contentEditable = false;
+    }
 
-          if (canStoreDiff && nativeCollapsed && Range.isCollapsed(targetRange) && _anchor.offset > 0) {
-            return storeDiff(_anchor.path, {
-              text: '',
-              start: _anchor.offset - 1,
-              end: _anchor.offset
-            });
-          }
+    var Tag = isInline ? 'span' : 'div';
+    var [[_text]] = Node.texts(element);
+    children = /*#__PURE__*/React.createElement(Tag, {
+      "data-slate-spacer": true,
+      style: {
+        height: '0',
+        color: 'transparent',
+        outline: 'none',
+        position: 'absolute'
+      }
+    }, /*#__PURE__*/React.createElement(MemoizedText, {
+      renderPlaceholder: renderPlaceholder,
+      decorations: [],
+      isLast: false,
+      parent: element,
+      text: _text
+    }));
+    NODE_TO_INDEX.set(_text, 0);
+    NODE_TO_PARENT.set(_text, element);
+  }
 
-          return scheduleAction(() => Editor.deleteBackward(editor), {
-            at: targetRange
-          });
-        }
+  return renderElement({
+    attributes,
+    children,
+    element
+  });
+};
 
-      case 'deleteEntireSoftLine':
-        {
-          return scheduleAction(() => {
-            Editor.deleteBackward(editor, {
-              unit: 'line'
-            });
-            Editor.deleteForward(editor, {
-              unit: 'line'
-            });
-          }, {
-            at: targetRange
-          });
-        }
+var MemoizedElement = /*#__PURE__*/React.memo(Element, (prev, next) => {
+  return prev.element === next.element && prev.renderElement === next.renderElement && prev.renderLeaf === next.renderLeaf && prev.renderPlaceholder === next.renderPlaceholder && isElementDecorationsEqual(prev.decorations, next.decorations) && (prev.selection === next.selection || !!prev.selection && !!next.selection && Range.equals(prev.selection, next.selection));
+});
+/**
+ * The default element renderer.
+ */
 
-      case 'deleteHardLineBackward':
-        {
-          return scheduleAction(() => Editor.deleteBackward(editor, {
-            unit: 'block'
-          }), {
-            at: targetRange
-          });
-        }
+var DefaultElement = props => {
+  var {
+    attributes,
+    children,
+    element
+  } = props;
+  var editor = useSlateStatic();
+  var Tag = editor.isInline(element) ? 'span' : 'div';
+  return /*#__PURE__*/React.createElement(Tag, Object.assign({}, attributes, {
+    style: {
+      position: 'relative'
+    }
+  }), children);
+};
 
-      case 'deleteSoftLineBackward':
-        {
-          return scheduleAction(() => Editor.deleteBackward(editor, {
-            unit: 'line'
-          }), {
-            at: targetRange
-          });
-        }
+/**
+ * A React context for sharing the `decorate` prop of the editable.
+ */
 
-      case 'deleteHardLineForward':
-        {
-          return scheduleAction(() => Editor.deleteForward(editor, {
-            unit: 'block'
-          }), {
-            at: targetRange
-          });
-        }
+var DecorateContext = /*#__PURE__*/createContext(() => []);
+/**
+ * Get the current `decorate` prop of the editable.
+ */
 
-      case 'deleteSoftLineForward':
-        {
-          return scheduleAction(() => Editor.deleteForward(editor, {
-            unit: 'line'
-          }), {
-            at: targetRange
-          });
-        }
+var useDecorate = () => {
+  return useContext(DecorateContext);
+};
 
-      case 'deleteWordBackward':
-        {
-          return scheduleAction(() => Editor.deleteBackward(editor, {
-            unit: 'word'
-          }), {
-            at: targetRange
-          });
-        }
+/**
+ * A React context for sharing the `selected` state of an element.
+ */
 
-      case 'deleteWordForward':
-        {
-          return scheduleAction(() => Editor.deleteForward(editor, {
-            unit: 'word'
-          }), {
-            at: targetRange
-          });
-        }
+var SelectedContext = /*#__PURE__*/createContext(false);
+/**
+ * Get the current `selected` state of an element.
+ */
 
-      case 'insertLineBreak':
-        {
-          return scheduleAction(() => Editor.insertSoftBreak(editor), {
-            at: targetRange
-          });
-        }
+var useSelected = () => {
+  return useContext(SelectedContext);
+};
 
-      case 'insertParagraph':
-        {
-          return scheduleAction(() => Editor.insertBreak(editor), {
-            at: targetRange
-          });
-        }
+/**
+ * Children.
+ */
+
+var useChildren = props => {
+  var {
+    decorations,
+    node,
+    renderElement,
+    renderPlaceholder,
+    renderLeaf,
+    selection
+  } = props;
+  var decorate = useDecorate();
+  var editor = useSlateStatic();
+  var path = ReactEditor.findPath(editor, node);
+  var children = [];
+  var isLeafBlock = Element$1.isElement(node) && !editor.isInline(node) && Editor.hasInlines(editor, node);
 
-      case 'insertCompositionText':
-      case 'deleteCompositionText':
-      case 'insertFromComposition':
-      case 'insertFromDrop':
-      case 'insertFromPaste':
-      case 'insertFromYank':
-      case 'insertReplacementText':
-      case 'insertText':
-        {
-          if (isDataTransfer(data)) {
-            return scheduleAction(() => ReactEditor.insertData(editor, data), {
-              at: targetRange
-            });
-          }
+  for (var i = 0; i < node.children.length; i++) {
+    var p = path.concat(i);
+    var n = node.children[i];
+    var key = ReactEditor.findKey(editor, n);
+    var range = Editor.range(editor, p);
+    var sel = selection && Range.intersection(range, selection);
+    var ds = decorate([n, p]);
 
-          var _text = data !== null && data !== void 0 ? data : ''; // COMPAT: If we are writing inside a placeholder, the ime inserts the text inside
-          // the placeholder itself and thus includes the zero-width space inside edit events.
+    for (var dec of decorations) {
+      var d = Range.intersection(dec, range);
 
+      if (d) {
+        ds.push(d);
+      }
+    }
 
-          if (EDITOR_TO_PENDING_INSERTION_MARKS.get(editor)) {
-            _text = _text.replace('\uFEFF', '');
-          } // Pastes from the Android clipboard will generate `insertText` events.
-          // If the copied text contains any newlines, Android will append an
-          // extra newline to the end of the copied text.
+    if (Element$1.isElement(n)) {
+      children.push( /*#__PURE__*/React.createElement(SelectedContext.Provider, {
+        key: "provider-".concat(key.id),
+        value: !!sel
+      }, /*#__PURE__*/React.createElement(MemoizedElement, {
+        decorations: ds,
+        element: n,
+        key: key.id,
+        renderElement: renderElement,
+        renderPlaceholder: renderPlaceholder,
+        renderLeaf: renderLeaf,
+        selection: sel
+      })));
+    } else {
+      children.push( /*#__PURE__*/React.createElement(MemoizedText, {
+        decorations: ds,
+        key: key.id,
+        isLast: isLeafBlock && i === node.children.length - 1,
+        parent: node,
+        renderPlaceholder: renderPlaceholder,
+        renderLeaf: renderLeaf,
+        text: n
+      }));
+    }
 
+    NODE_TO_INDEX.set(n, i);
+    NODE_TO_PARENT.set(n, node);
+  }
 
-          if (type === 'insertText' && /.*\n.*\n$/.test(_text)) {
-            _text = _text.slice(0, -1);
-          } // If the text includes a newline, split it at newlines and paste each component
-          // string, with soft breaks in between each.
+  return children;
+};
 
+/**
+ * A React context for sharing the `readOnly` state of the editor.
+ */
 
-          if (_text.includes('\n')) {
-            return scheduleAction(() => {
-              var parts = _text.split('\n');
+var ReadOnlyContext = /*#__PURE__*/createContext(false);
+/**
+ * Get the current `readOnly` state of the editor.
+ */
 
-              parts.forEach((line, i) => {
-                if (line) {
-                  Editor.insertText(editor, line);
-                }
+var useReadOnly = () => {
+  return useContext(ReadOnlyContext);
+};
 
-                if (i !== parts.length - 1) {
-                  Editor.insertSoftBreak(editor);
-                }
-              });
-            }, {
-              at: targetRange
-            });
-          }
+var SlateContext = /*#__PURE__*/createContext(null);
+/**
+ * Get the current editor object from the React context.
+ */
 
-          if (Path.equals(targetRange.anchor.path, targetRange.focus.path)) {
-            var [_start2, _end2] = Range.edges(targetRange);
-            var _diff = {
-              start: _start2.offset,
-              end: _end2.offset,
-              text: _text
-            }; // COMPAT: Swiftkey has a weird bug where the target range of the 2nd word
-            // inserted after a mark placeholder is inserted with an anchor offset off by 1.
-            // So writing 'some text' will result in 'some ttext'. Luckily all 'normal' insert
-            // text events are fired with the correct target ranges, only the final 'insertComposition'
-            // isn't, so we can adjust the target range start offset if we are confident this is the
-            // swiftkey insert causing the issue.
+var useSlate = () => {
+  var context = useContext(SlateContext);
 
-            if (_text && insertPositionHint && type === 'insertCompositionText') {
-              var hintPosition = insertPositionHint.start + insertPositionHint.text.search(/\S|$/);
+  if (!context) {
+    throw new Error("The `useSlate` hook must be used inside the <Slate> component's context.");
+  }
 
-              var diffPosition = _diff.start + _diff.text.search(/\S|$/);
+  var {
+    editor
+  } = context;
+  return editor;
+};
+var useSlateWithV = () => {
+  var context = useContext(SlateContext);
 
-              if (diffPosition === hintPosition + 1 && _diff.end === insertPositionHint.start + insertPositionHint.text.length) {
-                _diff.start -= 1;
-                insertPositionHint = null;
-                scheduleFlush();
-              } else {
-                insertPositionHint = false;
-              }
-            } else if (type === 'insertText') {
-              if (insertPositionHint === null) {
-                insertPositionHint = _diff;
-              } else if (insertPositionHint && Range.isCollapsed(targetRange) && insertPositionHint.end + insertPositionHint.text.length === _start2.offset) {
-                insertPositionHint = _objectSpread$3(_objectSpread$3({}, insertPositionHint), {}, {
-                  text: insertPositionHint.text + _text
-                });
-              } else {
-                insertPositionHint = false;
-              }
-            } else {
-              insertPositionHint = false;
-            }
+  if (!context) {
+    throw new Error("The `useSlate` hook must be used inside the <Slate> component's context.");
+  }
 
-            if (canStoreDiff) {
-              storeDiff(_start2.path, _diff);
-              return;
-            }
-          }
+  return context;
+};
 
-          return scheduleAction(() => Editor.insertText(editor, _text), {
-            at: targetRange
-          });
-        }
+function useTrackUserInput() {
+  var editor = useSlateStatic();
+  var receivedUserInput = useRef(false);
+  var animationFrameIdRef = useRef(0);
+  var onUserInput = useCallback(() => {
+    if (receivedUserInput.current) {
+      return;
     }
-  };
 
-  var hasPendingAction = () => {
-    return !!EDITOR_TO_PENDING_ACTION.get(editor);
+    receivedUserInput.current = true;
+    var window = ReactEditor.getWindow(editor);
+    window.cancelAnimationFrame(animationFrameIdRef.current);
+    animationFrameIdRef.current = window.requestAnimationFrame(() => {
+      receivedUserInput.current = false;
+    });
+  }, [editor]);
+  useEffect(() => () => cancelAnimationFrame(animationFrameIdRef.current), []);
+  return {
+    receivedUserInput,
+    onUserInput
   };
+}
 
-  var hasPendingDiffs = () => {
-    var _EDITOR_TO_PENDING_DI4;
+var TRIPLE_CLICK = 3;
 
-    return !!((_EDITOR_TO_PENDING_DI4 = EDITOR_TO_PENDING_DIFFS.get(editor)) !== null && _EDITOR_TO_PENDING_DI4 !== void 0 && _EDITOR_TO_PENDING_DI4.length);
-  };
+/**
+ * Hotkey mappings for each platform.
+ */
 
-  var hasPendingChanges = () => {
-    return hasPendingAction() || hasPendingDiffs();
+var HOTKEYS = {
+  bold: 'mod+b',
+  compose: ['down', 'left', 'right', 'up', 'backspace', 'enter'],
+  moveBackward: 'left',
+  moveForward: 'right',
+  moveWordBackward: 'ctrl+left',
+  moveWordForward: 'ctrl+right',
+  deleteBackward: 'shift?+backspace',
+  deleteForward: 'shift?+delete',
+  extendBackward: 'shift+left',
+  extendForward: 'shift+right',
+  italic: 'mod+i',
+  insertSoftBreak: 'shift+enter',
+  splitBlock: 'enter',
+  undo: 'mod+z'
+};
+var APPLE_HOTKEYS = {
+  moveLineBackward: 'opt+up',
+  moveLineForward: 'opt+down',
+  moveWordBackward: 'opt+left',
+  moveWordForward: 'opt+right',
+  deleteBackward: ['ctrl+backspace', 'ctrl+h'],
+  deleteForward: ['ctrl+delete', 'ctrl+d'],
+  deleteLineBackward: 'cmd+shift?+backspace',
+  deleteLineForward: ['cmd+shift?+delete', 'ctrl+k'],
+  deleteWordBackward: 'opt+shift?+backspace',
+  deleteWordForward: 'opt+shift?+delete',
+  extendLineBackward: 'opt+shift+up',
+  extendLineForward: 'opt+shift+down',
+  redo: 'cmd+shift+z',
+  transposeCharacter: 'ctrl+t'
+};
+var WINDOWS_HOTKEYS = {
+  deleteWordBackward: 'ctrl+shift?+backspace',
+  deleteWordForward: 'ctrl+shift?+delete',
+  redo: ['ctrl+y', 'ctrl+shift+z']
+};
+/**
+ * Create a platform-aware hotkey checker.
+ */
+
+var create = key => {
+  var generic = HOTKEYS[key];
+  var apple = APPLE_HOTKEYS[key];
+  var windows = WINDOWS_HOTKEYS[key];
+  var isGeneric = generic && isKeyHotkey(generic);
+  var isApple = apple && isKeyHotkey(apple);
+  var isWindows = windows && isKeyHotkey(windows);
+  return event => {
+    if (isGeneric && isGeneric(event)) return true;
+    if (IS_APPLE && isApple && isApple(event)) return true;
+    if (!IS_APPLE && isWindows && isWindows(event)) return true;
+    return false;
   };
+};
+/**
+ * Hotkeys.
+ */
 
-  var isFlushing = () => {
-    return flushing;
-  };
 
-  var handleUserSelect = range => {
-    EDITOR_TO_PENDING_SELECTION.set(editor, range);
+var Hotkeys = {
+  isBold: create('bold'),
+  isCompose: create('compose'),
+  isMoveBackward: create('moveBackward'),
+  isMoveForward: create('moveForward'),
+  isDeleteBackward: create('deleteBackward'),
+  isDeleteForward: create('deleteForward'),
+  isDeleteLineBackward: create('deleteLineBackward'),
+  isDeleteLineForward: create('deleteLineForward'),
+  isDeleteWordBackward: create('deleteWordBackward'),
+  isDeleteWordForward: create('deleteWordForward'),
+  isExtendBackward: create('extendBackward'),
+  isExtendForward: create('extendForward'),
+  isExtendLineBackward: create('extendLineBackward'),
+  isExtendLineForward: create('extendLineForward'),
+  isItalic: create('italic'),
+  isMoveLineBackward: create('moveLineBackward'),
+  isMoveLineForward: create('moveLineForward'),
+  isMoveWordBackward: create('moveWordBackward'),
+  isMoveWordForward: create('moveWordForward'),
+  isRedo: create('redo'),
+  isSoftBreak: create('insertSoftBreak'),
+  isSplitBlock: create('splitBlock'),
+  isTransposeCharacter: create('transposeCharacter'),
+  isUndo: create('undo')
+};
 
-    if (flushTimeoutId) {
-      clearTimeout(flushTimeoutId);
-      flushTimeoutId = null;
-    }
+var createRestoreDomManager = (editor, receivedUserInput) => {
+  var bufferedMutations = [];
 
-    var {
-      selection
-    } = editor;
+  var clear = () => {
+    bufferedMutations = [];
+  };
 
-    if (!range) {
+  var registerMutations = mutations => {
+    if (!receivedUserInput.current) {
       return;
     }
 
-    var pathChanged = !selection || !Path.equals(selection.anchor.path, range.anchor.path);
-    var parentPathChanged = !selection || !Path.equals(selection.anchor.path.slice(0, -1), range.anchor.path.slice(0, -1));
-
-    if (pathChanged && insertPositionHint || parentPathChanged) {
-      insertPositionHint = false;
-    }
-
-    if (pathChanged || hasPendingDiffs()) {
-      flushTimeoutId = setTimeout(flush, FLUSH_DELAY);
-    }
+    var trackedMutations = mutations.filter(mutation => isTrackedMutation(editor, mutation, mutations));
+    bufferedMutations.push(...trackedMutations);
   };
 
-  var handleInput = () => {
-    if (hasPendingAction() || !hasPendingDiffs()) {
-      flush();
-    }
-  };
+  function restoreDOM() {
+    if (bufferedMutations.length > 0) {
+      bufferedMutations.reverse().forEach(mutation => {
+        if (mutation.type === 'characterData') {
+          // We don't want to restore the DOM for characterData mutations
+          // because this interrupts the composition.
+          return;
+        }
 
-  var handleKeyDown = _ => {
-    // COMPAT: Swiftkey closes the keyboard when typing inside a empty node
-    // directly next to a non-contenteditable element (= the placeholder).
-    // The only event fired soon enough for us to allow hiding the placeholder
-    // without swiftkey picking it up is the keydown event, so we have to hide it
-    // here. See https://github.com/ianstormtaylor/slate/pull/4988#issuecomment-1201050535
-    if (!hasPendingDiffs()) {
-      updatePlaceholderVisibility(true);
-      setTimeout(updatePlaceholderVisibility);
-    }
-  };
+        mutation.removedNodes.forEach(node => {
+          mutation.target.insertBefore(node, mutation.nextSibling);
+        });
+        mutation.addedNodes.forEach(node => {
+          mutation.target.removeChild(node);
+        });
+      }); // Clear buffered mutations to ensure we don't undo them twice
 
-  var scheduleFlush = () => {
-    if (!hasPendingAction()) {
-      actionTimeoutId = setTimeout(flush);
+      clear();
     }
-  };
+  }
 
-  var handleDomMutations = mutations => {
-    if (hasPendingDiffs() || hasPendingAction()) {
-      return;
-    }
+  return {
+    registerMutations,
+    restoreDOM,
+    clear
+  };
+};
 
-    if (mutations.some(mutation => isTrackedMutation(editor, mutation, mutations))) {
-      var _EDITOR_TO_FORCE_REND;
+var MUTATION_OBSERVER_CONFIG = {
+  subtree: true,
+  childList: true,
+  characterData: true,
+  characterDataOldValue: true
+}; // We have to use a class component here since we rely on `getSnapshotBeforeUpdate` which has no FC equivalent
+// to run code synchronously immediately before react commits the component update to the DOM.
 
-      // Cause a re-render to restore the dom state if we encounter tracked mutations without
-      // a corresponding pending action.
-      (_EDITOR_TO_FORCE_REND = EDITOR_TO_FORCE_RENDER.get(editor)) === null || _EDITOR_TO_FORCE_REND === void 0 ? void 0 : _EDITOR_TO_FORCE_REND();
-    }
-  };
+class RestoreDOMComponent extends Component {
+  constructor() {
+    super(...arguments);
+    this.context = null;
+    this.manager = null;
+    this.mutationObserver = null;
+  }
 
-  return {
-    flush,
-    scheduleFlush,
-    hasPendingDiffs,
-    hasPendingAction,
-    hasPendingChanges,
-    isFlushing,
-    handleUserSelect,
-    handleCompositionEnd,
-    handleCompositionStart,
-    handleDOMBeforeInput,
-    handleKeyDown,
-    handleDomMutations,
-    handleInput
-  };
-}
+  observe() {
+    var _this$mutationObserve;
 
-function useIsMounted() {
-  var isMountedRef = useRef(false);
-  useEffect(() => {
-    isMountedRef.current = true;
-    return () => {
-      isMountedRef.current = false;
-    };
-  }, []);
-  return isMountedRef.current;
-}
+    var {
+      node
+    } = this.props;
 
-function useMutationObserver(node, callback, options) {
-  var [mutationObserver] = useState(() => new MutationObserver(callback));
-  useIsomorphicLayoutEffect(() => {
-    // Discard mutations caused during render phase. This works due to react calling
-    // useLayoutEffect synchronously after the render phase before the next tick.
-    mutationObserver.takeRecords();
-  });
-  useEffect(() => {
     if (!node.current) {
       throw new Error('Failed to attach MutationObserver, `node` is undefined');
     }
 
-    mutationObserver.observe(node.current, options);
-    return () => mutationObserver.disconnect();
-  }, [mutationObserver, node, options]);
-}
+    (_this$mutationObserve = this.mutationObserver) === null || _this$mutationObserve === void 0 ? void 0 : _this$mutationObserve.observe(node.current, MUTATION_OBSERVER_CONFIG);
+  }
 
-var _excluded$2 = ["node"];
+  componentDidMount() {
+    var {
+      receivedUserInput
+    } = this.props;
+    var editor = this.context;
+    this.manager = createRestoreDomManager(editor, receivedUserInput);
+    this.mutationObserver = new MutationObserver(this.manager.registerMutations);
+    this.observe();
+  }
 
-function ownKeys$2(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; }
+  getSnapshotBeforeUpdate() {
+    var _this$mutationObserve2, _this$mutationObserve3, _this$manager2;
 
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var MUTATION_OBSERVER_CONFIG = {
-  subtree: true,
-  childList: true,
-  characterData: true
-};
-var useAndroidInputManager = !IS_ANDROID ? () => null : _ref => {
-  var {
-    node
-  } = _ref,
-      options = _objectWithoutProperties(_ref, _excluded$2);
+    var pendingMutations = (_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 ? void 0 : _this$mutationObserve2.takeRecords();
 
-  if (!IS_ANDROID) {
+    if (pendingMutations !== null && pendingMutations !== void 0 && pendingMutations.length) {
+      var _this$manager;
+
+      (_this$manager = this.manager) === null || _this$manager === void 0 ? void 0 : _this$manager.registerMutations(pendingMutations);
+    }
+
+    (_this$mutationObserve3 = this.mutationObserver) === null || _this$mutationObserve3 === void 0 ? void 0 : _this$mutationObserve3.disconnect();
+    (_this$manager2 = this.manager) === null || _this$manager2 === void 0 ? void 0 : _this$manager2.restoreDOM();
     return null;
   }
 
-  var editor = useSlateStatic();
-  var isMounted = useIsMounted();
-  var [inputManager] = useState(() => createAndroidInputManager(_objectSpread$2({
-    editor
-  }, options)));
-  useMutationObserver(node, inputManager.handleDomMutations, MUTATION_OBSERVER_CONFIG);
-  EDITOR_TO_SCHEDULE_FLUSH.set(editor, inputManager.scheduleFlush);
+  componentDidUpdate() {
+    var _this$manager3;
 
-  if (isMounted) {
-    inputManager.flush();
+    (_this$manager3 = this.manager) === null || _this$manager3 === void 0 ? void 0 : _this$manager3.clear();
+    this.observe();
   }
 
-  return inputManager;
-};
+  componentWillUnmount() {
+    var _this$mutationObserve4;
 
-function useTrackUserInput() {
-  var editor = useSlateStatic();
-  var receivedUserInput = useRef(false);
-  var animationFrameIdRef = useRef(0);
-  var onUserInput = useCallback(() => {
-    if (receivedUserInput.current) {
-      return;
-    }
+    (_this$mutationObserve4 = this.mutationObserver) === null || _this$mutationObserve4 === void 0 ? void 0 : _this$mutationObserve4.disconnect();
+  }
+
+  render() {
+    return this.props.children;
+  }
 
-    receivedUserInput.current = true;
-    var window = ReactEditor.getWindow(editor);
-    window.cancelAnimationFrame(animationFrameIdRef.current);
-    animationFrameIdRef.current = window.requestAnimationFrame(() => {
-      receivedUserInput.current = false;
-    });
-  }, [editor]);
-  useEffect(() => () => cancelAnimationFrame(animationFrameIdRef.current), []);
-  return {
-    receivedUserInput,
-    onUserInput
-  };
 }
 
+RestoreDOMComponent.contextType = EditorContext;
+var RestoreDOM = IS_ANDROID ? RestoreDOMComponent : _ref => {
+  var {
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+
 var _excluded$1 = ["autoFocus", "decorate", "onDOMBeforeInput", "placeholder", "readOnly", "renderElement", "renderLeaf", "renderPlaceholder", "scrollSelectionIntoView", "style", "as", "disableDefaultStyles"],
     _excluded2 = ["text"];