slate-react 0.115.0 → 0.116.0

package/dist/index.js

@@ -224,8 +224,8 @@ var useSlateStatic = function useSlateStatic() {
 // eslint-disable-next-line no-redeclare
 var ReactEditor = slateDom.DOMEditor;
 
-function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // https://github.com/facebook/draft-js/blob/main/src/component/handlers/composition/DraftEditorCompositionHandler.js#L41
 // When using keyboard English association function, conpositionEnd triggered too fast, resulting in after `insertText` still maintain association state.
 var RESOLVE_DELAY = 25;
@@ -421,7 +421,7 @@ function createAndroidInputManager(_ref) {
       updatePlaceholderVisibility();
       return;
     }
-    pendingDiffs[idx] = _objectSpread$6(_objectSpread$6({}, pendingDiffs[idx]), {}, {
+    pendingDiffs[idx] = _objectSpread$7(_objectSpread$7({}, pendingDiffs[idx]), {}, {
       diff: merged
     });
   };
@@ -776,7 +776,7 @@ function createAndroidInputManager(_ref) {
               if (insertPositionHint === null) {
                 insertPositionHint = _diff;
               } else if (insertPositionHint && slate.Range.isCollapsed(targetRange) && insertPositionHint.end + insertPositionHint.text.length === _start2.offset) {
-                insertPositionHint = _objectSpread$6(_objectSpread$6({}, insertPositionHint), {}, {
+                insertPositionHint = _objectSpread$7(_objectSpread$7({}, insertPositionHint), {}, {
                   text: insertPositionHint.text + _text
                 });
               } else {
@@ -920,8 +920,8 @@ function useMutationObserver(node, callback, options) {
 }
 
 var _excluded$2 = ["node"];
-function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var MUTATION_OBSERVER_CONFIG$1 = {
   subtree: true,
   childList: true,
@@ -938,7 +938,7 @@ var useAndroidInputManager = !slateDom.IS_ANDROID ? function () {
   var editor = useSlateStatic();
   var isMounted = useIsMounted();
   var _useState = React.useState(function () {
-      return createAndroidInputManager(_objectSpread$5({
+      return createAndroidInputManager(_objectSpread$6({
         editor: editor
       }, options));
     }),
@@ -952,8 +952,8 @@ var useAndroidInputManager = !slateDom.IS_ANDROID ? function () {
   return inputManager;
 };
 
-function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * Leaf content strings.
  */
@@ -1070,11 +1070,11 @@ var ZeroWidthString = function ZeroWidthString(props) {
   // be because accepting an IME suggestion when at the start of a block (no
   // preceding \uFEFF) removes one or more DOM elements that `toSlateRange`
   // depends on. (https://github.com/ianstormtaylor/slate/issues/5703)
-  return /*#__PURE__*/React.createElement("span", _objectSpread$4({}, attributes), !slateDom.IS_ANDROID || !isLineBreak ? "\uFEFF" : null, isLineBreak ? /*#__PURE__*/React.createElement("br", null) : null);
+  return /*#__PURE__*/React.createElement("span", _objectSpread$5({}, attributes), !slateDom.IS_ANDROID || !isLineBreak ? "\uFEFF" : null, isLineBreak ? /*#__PURE__*/React.createElement("br", null) : null);
 };
 
-function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // Delay the placeholder on Android to prevent the keyboard from closing.
 // (https://github.com/ianstormtaylor/slate/pull/5368)
 var PLACEHOLDER_DELAY = slateDom.IS_ANDROID ? 300 : 0;
@@ -1092,6 +1092,9 @@ function clearTimeoutRef(timeoutRef) {
     timeoutRef.current = null;
   }
 }
+var defaultRenderLeaf = function defaultRenderLeaf(props) {
+  return /*#__PURE__*/React.createElement(DefaultLeaf, _objectSpread$4({}, props));
+};
 /**
  * Individual leaves in a text node with unique formatting.
  */
@@ -1102,9 +1105,7 @@ var Leaf = function Leaf(props) {
     parent = props.parent,
     renderPlaceholder = props.renderPlaceholder,
     _props$renderLeaf = props.renderLeaf,
-    renderLeaf = _props$renderLeaf === void 0 ? function (props) {
-      return /*#__PURE__*/React.createElement(DefaultLeaf, _objectSpread$3({}, props));
-    } : _props$renderLeaf,
+    renderLeaf = _props$renderLeaf === void 0 ? defaultRenderLeaf : _props$renderLeaf,
     leafPosition = props.leafPosition;
   var editor = useSlateStatic();
   var placeholderResizeObserver = React.useRef(null);
@@ -1202,27 +1203,198 @@ var MemoizedLeaf = /*#__PURE__*/React.memo(Leaf, function (prev, next) {
 var DefaultLeaf = function DefaultLeaf(props) {
   var attributes = props.attributes,
     children = props.children;
-  return /*#__PURE__*/React.createElement("span", _objectSpread$3({}, attributes), children);
+  return /*#__PURE__*/React.createElement("span", _objectSpread$4({}, attributes), children);
 };
 
-function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var arrayWithoutHoles = createCommonjsModule(function (module) {
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return arrayLikeToArray(arr);
+}
+module.exports = _arrayWithoutHoles, module.exports.__esModule = true, module.exports["default"] = module.exports;
+});
+
+unwrapExports(arrayWithoutHoles);
+
+var iterableToArray = createCommonjsModule(function (module) {
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+module.exports = _iterableToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
+});
+
+unwrapExports(iterableToArray);
+
+var nonIterableSpread = createCommonjsModule(function (module) {
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+module.exports = _nonIterableSpread, module.exports.__esModule = true, module.exports["default"] = module.exports;
+});
+
+unwrapExports(nonIterableSpread);
+
+var toConsumableArray = createCommonjsModule(function (module) {
+function _toConsumableArray(arr) {
+  return arrayWithoutHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr) || nonIterableSpread();
+}
+module.exports = _toConsumableArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
+});
+
+var _toConsumableArray = unwrapExports(toConsumableArray);
+
+/**
+ * Create a selector that updates when an `update` function is called, and
+ * which only causes the component to render when the result of `selector`
+ * differs from the previous result according to `equalityFn`.
+ *
+ * If `selector` is memoized using `useCallback`, then it will only be called
+ * when it changes or when `update` is called. Otherwise, `selector` will be
+ * called every time the component renders.
+ *
+ * @example
+ * const [state, update] = useGenericSelector(selector, equalityFn)
+ *
+ * useIsomorphicLayoutEffect(() => {
+ *   return addEventListener(update)
+ * }, [addEventListener, update])
+ *
+ * return state
+ */
+function useGenericSelector(selector, equalityFn) {
+  var _useReducer = React.useReducer(function (s) {
+      return s + 1;
+    }, 0),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    forceRender = _useReducer2[1];
+  var latestSubscriptionCallbackError = React.useRef();
+  var latestSelector = React.useRef(function () {
+    return null;
+  });
+  var latestSelectedState = React.useRef(null);
+  var selectedState;
+  try {
+    if (selector !== latestSelector.current || latestSubscriptionCallbackError.current) {
+      var selectorResult = selector();
+      if (equalityFn(latestSelectedState.current, selectorResult)) {
+        selectedState = latestSelectedState.current;
+      } else {
+        selectedState = selectorResult;
+      }
+    } else {
+      selectedState = latestSelectedState.current;
+    }
+  } catch (err) {
+    if (latestSubscriptionCallbackError.current && isError(err)) {
+      err.message += "\nThe error may be correlated with this previous error:\n".concat(latestSubscriptionCallbackError.current.stack, "\n\n");
+    }
+    throw err;
+  }
+  latestSelector.current = selector;
+  latestSelectedState.current = selectedState;
+  latestSubscriptionCallbackError.current = undefined;
+  var update = React.useCallback(function () {
+    try {
+      var newSelectedState = latestSelector.current();
+      if (equalityFn(latestSelectedState.current, newSelectedState)) {
+        return;
+      }
+      latestSelectedState.current = newSelectedState;
+    } catch (err) {
+      // we ignore all errors here, since when the component
+      // is re-rendered, the selectors are called again, and
+      // will throw again, if neither props nor store state
+      // changed
+      if (err instanceof Error) {
+        latestSubscriptionCallbackError.current = err;
+      } else {
+        latestSubscriptionCallbackError.current = new Error(String(err));
+      }
+    }
+    forceRender();
+    // don't rerender on equalityFn change since we want to be able to define it inline
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return [selectedState, update];
+}
+function isError(error) {
+  return error instanceof Error;
+}
+
+/**
+ * A React context for sharing the `decorate` prop of the editable and
+ * subscribing to changes on this prop.
+ */
+var DecorateContext = /*#__PURE__*/React.createContext({});
+var useDecorations = function useDecorations(node, parentDecorations) {
+  var editor = useSlateStatic();
+  var _useContext = React.useContext(DecorateContext),
+    decorate = _useContext.decorate,
+    addEventListener = _useContext.addEventListener;
+  // Not memoized since we want nodes to be decorated on each render
+  var selector = function selector() {
+    var path = ReactEditor.findPath(editor, node);
+    return decorate([node, path]);
+  };
+  var equalityFn = slate.Text.isText(node) ? slateDom.isTextDecorationsEqual : slateDom.isElementDecorationsEqual;
+  var _useGenericSelector = useGenericSelector(selector, equalityFn),
+    _useGenericSelector2 = _slicedToArray(_useGenericSelector, 2),
+    decorations = _useGenericSelector2[0],
+    update = _useGenericSelector2[1];
+  useIsomorphicLayoutEffect(function () {
+    var unsubscribe = addEventListener(update);
+    update();
+    return unsubscribe;
+  }, [addEventListener, update]);
+  return React.useMemo(function () {
+    return [].concat(_toConsumableArray(decorations), _toConsumableArray(parentDecorations));
+  }, [decorations, parentDecorations]);
+};
+var useDecorateContext = function useDecorateContext(decorateProp) {
+  var eventListeners = React.useRef(new Set());
+  var latestDecorate = React.useRef(decorateProp);
+  useIsomorphicLayoutEffect(function () {
+    latestDecorate.current = decorateProp;
+    eventListeners.current.forEach(function (listener) {
+      return listener();
+    });
+  }, [decorateProp]);
+  var decorate = React.useCallback(function (entry) {
+    return latestDecorate.current(entry);
+  }, []);
+  var addEventListener = React.useCallback(function (callback) {
+    eventListeners.current.add(callback);
+    return function () {
+      eventListeners.current["delete"](callback);
+    };
+  }, []);
+  return React.useMemo(function () {
+    return {
+      decorate: decorate,
+      addEventListener: addEventListener
+    };
+  }, [decorate, addEventListener]);
+};
+
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var defaultRenderText = function defaultRenderText(props) {
+  return /*#__PURE__*/React.createElement(DefaultText, _objectSpread$3({}, props));
+};
 /**
  * Text.
  */
 var Text = function Text(props) {
-  var decorations = props.decorations,
+  var parentDecorations = props.decorations,
     isLast = props.isLast,
     parent = props.parent,
     renderPlaceholder = props.renderPlaceholder,
     renderLeaf = props.renderLeaf,
     _props$renderText = props.renderText,
-    renderText = _props$renderText === void 0 ? function (props) {
-      return /*#__PURE__*/React.createElement(DefaultText, _objectSpread$2({}, props));
-    } : _props$renderText,
+    renderText = _props$renderText === void 0 ? defaultRenderText : _props$renderText,
     text = props.text;
   var editor = useSlateStatic();
   var ref = React.useRef(null);
+  var decorations = useDecorations(text, parentDecorations);
   var decoratedLeaves = slate.Text.decorations(text, decorations);
   var key = ReactEditor.findKey(editor, text);
   var children = [];
@@ -1273,28 +1445,30 @@ var MemoizedText = /*#__PURE__*/React.memo(Text, function (prev, next) {
 var DefaultText = function DefaultText(props) {
   var attributes = props.attributes,
     children = props.children;
-  return /*#__PURE__*/React.createElement("span", _objectSpread$2({}, attributes), children);
+  return /*#__PURE__*/React.createElement("span", _objectSpread$3({}, attributes), children);
 };
 
-function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var defaultRenderElement = function defaultRenderElement(props) {
+  return /*#__PURE__*/React.createElement(DefaultElement, _objectSpread$2({}, props));
+};
 /**
  * Element.
  */
 var Element = function Element(props) {
-  var decorations = props.decorations,
+  var parentDecorations = props.decorations,
     element = props.element,
     _props$renderElement = props.renderElement,
-    renderElement = _props$renderElement === void 0 ? function (p) {
-      return /*#__PURE__*/React.createElement(DefaultElement, _objectSpread$1({}, p));
-    } : _props$renderElement,
+    renderElement = _props$renderElement === void 0 ? defaultRenderElement : _props$renderElement,
+    renderChunk = props.renderChunk,
     renderPlaceholder = props.renderPlaceholder,
     renderLeaf = props.renderLeaf,
-    renderText = props.renderText,
-    selection = props.selection;
+    renderText = props.renderText;
   var editor = useSlateStatic();
   var readOnly = useReadOnly();
   var isInline = editor.isInline(element);
+  var decorations = useDecorations(element, parentDecorations);
   var key = ReactEditor.findKey(editor, element);
   var ref = React.useCallback(function (ref) {
     // Update element-related weak maps with the DOM element ref.
@@ -1312,10 +1486,10 @@ var Element = function Element(props) {
     decorations: decorations,
     node: element,
     renderElement: renderElement,
+    renderChunk: renderChunk,
     renderPlaceholder: renderPlaceholder,
     renderLeaf: renderLeaf,
-    renderText: renderText,
-    selection: selection
+    renderText: renderText
   });
   // Attributes that the developer must mix into the element in their
   // custom node renderer component.
@@ -1371,7 +1545,7 @@ var Element = function Element(props) {
   });
 };
 var MemoizedElement = /*#__PURE__*/React.memo(Element, function (prev, next) {
-  return prev.element === next.element && prev.renderElement === next.renderElement && prev.renderText === next.renderText && prev.renderLeaf === next.renderLeaf && prev.renderPlaceholder === next.renderPlaceholder && slateDom.isElementDecorationsEqual(prev.decorations, next.decorations) && (prev.selection === next.selection || !!prev.selection && !!next.selection && slate.Range.equals(prev.selection, next.selection));
+  return prev.element === next.element && prev.renderElement === next.renderElement && prev.renderChunk === next.renderChunk && prev.renderText === next.renderText && prev.renderLeaf === next.renderLeaf && prev.renderPlaceholder === next.renderPlaceholder && slateDom.isElementDecorationsEqual(prev.decorations, next.decorations);
 });
 /**
  * The default element renderer.
@@ -1382,40 +1556,830 @@ var DefaultElement = function DefaultElement(props) {
     element = props.element;
   var editor = useSlateStatic();
   var Tag = editor.isInline(element) ? 'span' : 'div';
-  return /*#__PURE__*/React.createElement(Tag, _objectSpread$1(_objectSpread$1({}, attributes), {}, {
+  return /*#__PURE__*/React.createElement(Tag, _objectSpread$2(_objectSpread$2({}, attributes), {}, {
     style: {
       position: 'relative'
     }
   }), children);
 };
 
+var classCallCheck = createCommonjsModule(function (module) {
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+module.exports = _classCallCheck, module.exports.__esModule = true, module.exports["default"] = module.exports;
+});
+
+var _classCallCheck = unwrapExports(classCallCheck);
+
+var createClass = createCommonjsModule(function (module) {
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, toPropertyKey(descriptor.key), descriptor);
+  }
+}
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
+  return Constructor;
+}
+module.exports = _createClass, module.exports.__esModule = true, module.exports["default"] = module.exports;
+});
+
+var _createClass = unwrapExports(createClass);
+
 /**
- * A React context for sharing the `decorate` prop of the editable.
+ * Traverse and modify a chunk tree
  */
-var DecorateContext = /*#__PURE__*/React.createContext(function () {
-  return [];
-});
+var ChunkTreeHelper = /*#__PURE__*/function () {
+  function ChunkTreeHelper(chunkTree, _ref) {
+    var chunkSize = _ref.chunkSize,
+      debug = _ref.debug;
+    _classCallCheck(this, ChunkTreeHelper);
+    /**
+     * The root of the chunk tree
+     */
+    _defineProperty(this, "root", void 0);
+    /**
+     * The ideal size of a chunk
+     */
+    _defineProperty(this, "chunkSize", void 0);
+    /**
+     * Whether debug mode is enabled
+     *
+     * If enabled, the pointer state will be checked for internal consistency
+     * after each mutating operation.
+     */
+    _defineProperty(this, "debug", void 0);
+    /**
+     * Whether the traversal has reached the end of the chunk tree
+     *
+     * When this is true, the pointerChunk and pointerIndex point to the last
+     * top-level node in the chunk tree, although pointerNode returns null.
+     */
+    _defineProperty(this, "reachedEnd", void 0);
+    /**
+     * The chunk containing the current node
+     */
+    _defineProperty(this, "pointerChunk", void 0);
+    /**
+     * The index of the current node within pointerChunk
+     *
+     * Can be -1 to indicate that the pointer is before the start of the tree.
+     */
+    _defineProperty(this, "pointerIndex", void 0);
+    /**
+     * Similar to a Slate path; tracks the path of pointerChunk relative to the
+     * root.
+     *
+     * Used to move the pointer from the current chunk to the parent chunk more
+     * efficiently.
+     */
+    _defineProperty(this, "pointerIndexStack", void 0);
+    /**
+     * Indexing the current chunk's children has a slight time cost, which adds up
+     * when traversing very large trees, so the current node is cached.
+     *
+     * A value of undefined means that the current node is not cached. This
+     * property must be set to undefined whenever the pointer is moved, unless
+     * the pointer is guaranteed to point to the same node that it did previously.
+     */
+    _defineProperty(this, "cachedPointerNode", void 0);
+    this.root = chunkTree;
+    this.chunkSize = chunkSize;
+    // istanbul ignore next
+    this.debug = debug !== null && debug !== void 0 ? debug : false;
+    this.pointerChunk = chunkTree;
+    this.pointerIndex = -1;
+    this.pointerIndexStack = [];
+    this.reachedEnd = false;
+    this.validateState();
+  }
+  /**
+   * Move the pointer to the next leaf in the chunk tree
+   */
+  _createClass(ChunkTreeHelper, [{
+    key: "readLeaf",
+    value: function readLeaf() {
+      // istanbul ignore next
+      if (this.reachedEnd) return null;
+      // Get the next sibling or aunt node
+      while (true) {
+        if (this.pointerIndex + 1 < this.pointerSiblings.length) {
+          this.pointerIndex++;
+          this.cachedPointerNode = undefined;
+          break;
+        } else if (this.pointerChunk.type === 'root') {
+          this.reachedEnd = true;
+          return null;
+        } else {
+          this.exitChunk();
+        }
+      }
+      this.validateState();
+      // If the next sibling or aunt is a chunk, descend into it
+      this.enterChunkUntilLeaf(false);
+      return this.pointerNode;
+    }
+    /**
+     * Move the pointer to the previous leaf in the chunk tree
+     */
+  }, {
+    key: "returnToPreviousLeaf",
+    value: function returnToPreviousLeaf() {
+      // If we were at the end of the tree, descend into the end of the last
+      // chunk in the tree
+      if (this.reachedEnd) {
+        this.reachedEnd = false;
+        this.enterChunkUntilLeaf(true);
+        return;
+      }
+      // Get the previous sibling or aunt node
+      while (true) {
+        if (this.pointerIndex >= 1) {
+          this.pointerIndex--;
+          this.cachedPointerNode = undefined;
+          break;
+        } else if (this.pointerChunk.type === 'root') {
+          this.pointerIndex = -1;
+          return;
+        } else {
+          this.exitChunk();
+        }
+      }
+      this.validateState();
+      // If the previous sibling or aunt is a chunk, descend into it
+      this.enterChunkUntilLeaf(true);
+    }
+    /**
+     * Insert leaves before the current leaf, leaving the pointer unchanged
+     */
+  }, {
+    key: "insertBefore",
+    value: function insertBefore(leaves) {
+      this.returnToPreviousLeaf();
+      this.insertAfter(leaves);
+      this.readLeaf();
+    }
+    /**
+     * Insert leaves after the current leaf, leaving the pointer on the last
+     * inserted leaf
+     *
+     * The insertion algorithm first checks for any chunk we're currently at the
+     * end of that can receive additional leaves. Next, it tries to insert leaves
+     * at the starts of any subsequent chunks.
+     *
+     * Any remaining leaves are passed to rawInsertAfter to be chunked and
+     * inserted at the highest possible level.
+     */
+  }, {
+    key: "insertAfter",
+    value: function insertAfter(leaves) {
+      // istanbul ignore next
+      if (leaves.length === 0) return;
+      var beforeDepth = 0;
+      var afterDepth = 0;
+      // While at the end of a chunk, insert any leaves that will fit, and then
+      // exit the chunk
+      while (this.pointerChunk.type === 'chunk' && this.pointerIndex === this.pointerSiblings.length - 1) {
+        var remainingCapacity = this.chunkSize - this.pointerSiblings.length;
+        var toInsertCount = Math.min(remainingCapacity, leaves.length);
+        if (toInsertCount > 0) {
+          var leavesToInsert = leaves.splice(0, toInsertCount);
+          this.rawInsertAfter(leavesToInsert, beforeDepth);
+        }
+        this.exitChunk();
+        beforeDepth++;
+      }
+      if (leaves.length === 0) return;
+      // Save the pointer so that we can come back here after inserting leaves
+      // into the starts of subsequent blocks
+      var rawInsertPointer = this.savePointer();
+      // If leaves are inserted into the start of a subsequent block, then we
+      // eventually need to restore the pointer to the last such inserted leaf
+      var finalPointer = null;
+      // Move the pointer into the chunk containing the next leaf, if it exists
+      if (this.readLeaf()) {
+        // While at the start of a chunk, insert any leaves that will fit, and
+        // then exit the chunk
+        while (this.pointerChunk.type === 'chunk' && this.pointerIndex === 0) {
+          var _remainingCapacity = this.chunkSize - this.pointerSiblings.length;
+          var _toInsertCount = Math.min(_remainingCapacity, leaves.length);
+          if (_toInsertCount > 0) {
+            var _leavesToInsert = leaves.splice(-_toInsertCount, _toInsertCount);
+            // Insert the leaves at the start of the chunk
+            this.pointerIndex = -1;
+            this.cachedPointerNode = undefined;
+            this.rawInsertAfter(_leavesToInsert, afterDepth);
+            // If this is the first batch of insertions at the start of a
+            // subsequent chunk, set the final pointer to the last inserted leaf
+            if (!finalPointer) {
+              finalPointer = this.savePointer();
+            }
+          }
+          this.exitChunk();
+          afterDepth++;
+        }
+      }
+      this.restorePointer(rawInsertPointer);
+      // If there are leaves left to insert, insert them between the end of the
+      // previous chunk and the start of the first subsequent chunk, or wherever
+      // the pointer ended up after the first batch of insertions
+      var minDepth = Math.max(beforeDepth, afterDepth);
+      this.rawInsertAfter(leaves, minDepth);
+      if (finalPointer) {
+        this.restorePointer(finalPointer);
+      }
+      this.validateState();
+    }
+    /**
+     * Remove the current node and decrement the pointer, deleting any ancestor
+     * chunk that becomes empty as a result
+     */
+  }, {
+    key: "remove",
+    value: function remove() {
+      this.pointerSiblings.splice(this.pointerIndex--, 1);
+      this.cachedPointerNode = undefined;
+      if (this.pointerSiblings.length === 0 && this.pointerChunk.type === 'chunk') {
+        this.exitChunk();
+        this.remove();
+      } else {
+        this.invalidateChunk();
+      }
+      this.validateState();
+    }
+    /**
+     * Add the current chunk and all ancestor chunks to the list of modified
+     * chunks
+     */
+  }, {
+    key: "invalidateChunk",
+    value: function invalidateChunk() {
+      for (var c = this.pointerChunk; c.type === 'chunk'; c = c.parent) {
+        this.root.modifiedChunks.add(c);
+      }
+    }
+    /**
+     * Whether the pointer is at the start of the tree
+     */
+  }, {
+    key: "atStart",
+    get: function get() {
+      return this.pointerChunk.type === 'root' && this.pointerIndex === -1;
+    }
+    /**
+     * The siblings of the current node
+     */
+  }, {
+    key: "pointerSiblings",
+    get: function get() {
+      return this.pointerChunk.children;
+    }
+    /**
+     * Get the current node (uncached)
+     *
+     * If the pointer is at the start or end of the document, returns null.
+     *
+     * Usually, the current node is a chunk leaf, although it can be a chunk
+     * while insertions are in progress.
+     */
+  }, {
+    key: "getPointerNode",
+    value: function getPointerNode() {
+      if (this.reachedEnd || this.pointerIndex === -1) {
+        return null;
+      }
+      return this.pointerSiblings[this.pointerIndex];
+    }
+    /**
+     * Cached getter for the current node
+     */
+  }, {
+    key: "pointerNode",
+    get: function get() {
+      if (this.cachedPointerNode !== undefined) return this.cachedPointerNode;
+      var pointerNode = this.getPointerNode();
+      this.cachedPointerNode = pointerNode;
+      return pointerNode;
+    }
+    /**
+     * Get the path of a chunk relative to the root, returning null if the chunk
+     * is not connected to the root
+     */
+  }, {
+    key: "getChunkPath",
+    value: function getChunkPath(chunk) {
+      var path = [];
+      for (var c = chunk; c.type === 'chunk'; c = c.parent) {
+        var index = c.parent.children.indexOf(c);
+        // istanbul ignore next
+        if (index === -1) {
+          return null;
+        }
+        path.unshift(index);
+      }
+      return path;
+    }
+    /**
+     * Save the current pointer to be restored later
+     */
+  }, {
+    key: "savePointer",
+    value: function savePointer() {
+      if (this.atStart) return 'start';
+      // istanbul ignore next
+      if (!this.pointerNode) {
+        throw new Error('Cannot save pointer when pointerNode is null');
+      }
+      return {
+        chunk: this.pointerChunk,
+        node: this.pointerNode
+      };
+    }
+    /**
+     * Restore the pointer to a previous state
+     */
+  }, {
+    key: "restorePointer",
+    value: function restorePointer(savedPointer) {
+      if (savedPointer === 'start') {
+        this.pointerChunk = this.root;
+        this.pointerIndex = -1;
+        this.pointerIndexStack = [];
+        this.reachedEnd = false;
+        this.cachedPointerNode = undefined;
+        return;
+      }
+      // Since nodes may have been inserted or removed prior to the saved
+      // pointer since it was saved, the index and index stack must be
+      // recomputed. This is slow, but this is fine since restoring a pointer is
+      // not a frequent operation.
+      var chunk = savedPointer.chunk,
+        node = savedPointer.node;
+      var index = chunk.children.indexOf(node);
+      // istanbul ignore next
+      if (index === -1) {
+        throw new Error('Cannot restore point because saved node is no longer in saved chunk');
+      }
+      var indexStack = this.getChunkPath(chunk);
+      // istanbul ignore next
+      if (!indexStack) {
+        throw new Error('Cannot restore point because saved chunk is no longer connected to root');
+      }
+      this.pointerChunk = chunk;
+      this.pointerIndex = index;
+      this.pointerIndexStack = indexStack;
+      this.reachedEnd = false;
+      this.cachedPointerNode = node;
+      this.validateState();
+    }
+    /**
+     * Assuming the current node is a chunk, move the pointer into that chunk
+     *
+     * @param end If true, place the pointer on the last node of the chunk.
+     * Otherwise, place the pointer on the first node.
+     */
+  }, {
+    key: "enterChunk",
+    value: function enterChunk(end) {
+      var _this$pointerNode;
+      // istanbul ignore next
+      if (((_this$pointerNode = this.pointerNode) === null || _this$pointerNode === void 0 ? void 0 : _this$pointerNode.type) !== 'chunk') {
+        throw new Error('Cannot enter non-chunk');
+      }
+      this.pointerIndexStack.push(this.pointerIndex);
+      this.pointerChunk = this.pointerNode;
+      this.pointerIndex = end ? this.pointerSiblings.length - 1 : 0;
+      this.cachedPointerNode = undefined;
+      this.validateState();
+      // istanbul ignore next
+      if (this.pointerChunk.children.length === 0) {
+        throw new Error('Cannot enter empty chunk');
+      }
+    }
+    /**
+     * Assuming the current node is a chunk, move the pointer into that chunk
+     * repeatedly until the current node is a leaf
+     *
+     * @param end If true, place the pointer on the last node of the chunk.
+     * Otherwise, place the pointer on the first node.
+     */
+  }, {
+    key: "enterChunkUntilLeaf",
+    value: function enterChunkUntilLeaf(end) {
+      while (((_this$pointerNode2 = this.pointerNode) === null || _this$pointerNode2 === void 0 ? void 0 : _this$pointerNode2.type) === 'chunk') {
+        var _this$pointerNode2;
+        this.enterChunk(end);
+      }
+    }
+    /**
+     * Move the pointer to the parent chunk
+     */
+  }, {
+    key: "exitChunk",
+    value: function exitChunk() {
+      // istanbul ignore next
+      if (this.pointerChunk.type === 'root') {
+        throw new Error('Cannot exit root');
+      }
+      var previousPointerChunk = this.pointerChunk;
+      this.pointerChunk = previousPointerChunk.parent;
+      this.pointerIndex = this.pointerIndexStack.pop();
+      this.cachedPointerNode = undefined;
+      this.validateState();
+    }
+    /**
+     * Insert leaves immediately after the current node, leaving the pointer on
+     * the last inserted leaf
+     *
+     * Leaves are chunked according to the number of nodes already in the parent
+     * plus the number of nodes being inserted, or the minimum depth if larger
+     */
+  }, {
+    key: "rawInsertAfter",
+    value: function rawInsertAfter(leaves, minDepth) {
+      var _this = this,
+        _this$pointerSiblings;
+      if (leaves.length === 0) return;
+      var groupIntoChunks = function groupIntoChunks(leaves, parent, perChunk) {
+        if (perChunk === 1) return leaves;
+        var chunks = [];
+        for (var i = 0; i < _this.chunkSize; i++) {
+          var chunkNodes = leaves.slice(i * perChunk, (i + 1) * perChunk);
+          if (chunkNodes.length === 0) break;
+          var chunk = {
+            type: 'chunk',
+            key: new slateDom.Key(),
+            parent: parent,
+            children: []
+          };
+          chunk.children = groupIntoChunks(chunkNodes, chunk, perChunk / _this.chunkSize);
+          chunks.push(chunk);
+        }
+        return chunks;
+      };
+      // Determine the chunking depth based on the number of existing nodes in
+      // the chunk and the number of nodes being inserted
+      var newTotal = this.pointerSiblings.length + leaves.length;
+      var depthForTotal = 0;
+      for (var i = this.chunkSize; i < newTotal; i *= this.chunkSize) {
+        depthForTotal++;
+      }
+      // A depth of 0 means no chunking
+      var depth = Math.max(depthForTotal, minDepth);
+      var perTopLevelChunk = Math.pow(this.chunkSize, depth);
+      var chunks = groupIntoChunks(leaves, this.pointerChunk, perTopLevelChunk);
+      (_this$pointerSiblings = this.pointerSiblings).splice.apply(_this$pointerSiblings, [this.pointerIndex + 1, 0].concat(_toConsumableArray(chunks)));
+      this.pointerIndex += chunks.length;
+      this.cachedPointerNode = undefined;
+      this.invalidateChunk();
+      this.validateState();
+    }
+    /**
+     * If debug mode is enabled, ensure that the state is internally consistent
+     */
+    // istanbul ignore next
+  }, {
+    key: "validateState",
+    value: function validateState() {
+      if (!this.debug) return;
+      var validateDescendant = function validateDescendant(node) {
+        if (node.type === 'chunk') {
+          var parent = node.parent,
+            children = node.children;
+          if (!parent.children.includes(node)) {
+            throw new Error("Debug: Chunk ".concat(node.key.id, " has an incorrect parent property"));
+          }
+          children.forEach(validateDescendant);
+        }
+      };
+      this.root.children.forEach(validateDescendant);
+      if (this.cachedPointerNode !== undefined && this.cachedPointerNode !== this.getPointerNode()) {
+        throw new Error('Debug: The cached pointer is incorrect and has not been invalidated');
+      }
+      var actualIndexStack = this.getChunkPath(this.pointerChunk);
+      if (!actualIndexStack) {
+        throw new Error('Debug: The pointer chunk is not connected to the root');
+      }
+      if (!slate.Path.equals(this.pointerIndexStack, actualIndexStack)) {
+        throw new Error("Debug: The cached index stack [".concat(this.pointerIndexStack.join(', '), "] does not match the path of the pointer chunk [").concat(actualIndexStack.join(', '), "]"));
+      }
+    }
+  }]);
+  return ChunkTreeHelper;
+}();
+
+/**
+ * Traverse an array of children, providing helpers useful for reconciling the
+ * children array with a chunk tree
+ */
+var ChildrenHelper = /*#__PURE__*/function () {
+  function ChildrenHelper(editor, children) {
+    _classCallCheck(this, ChildrenHelper);
+    _defineProperty(this, "editor", void 0);
+    _defineProperty(this, "children", void 0);
+    /**
+     * Sparse array of Slate node keys, each index corresponding to an index in
+     * the children array
+     *
+     * Fetching the key for a Slate node is expensive, so we cache them here.
+     */
+    _defineProperty(this, "cachedKeys", void 0);
+    /**
+     * The index of the next node to be read in the children array
+     */
+    _defineProperty(this, "pointerIndex", void 0);
+    this.editor = editor;
+    this.children = children;
+    this.cachedKeys = new Array(children.length);
+    this.pointerIndex = 0;
+  }
+  /**
+   * Read a given number of nodes, advancing the pointer by that amount
+   */
+  _createClass(ChildrenHelper, [{
+    key: "read",
+    value: function read(n) {
+      // PERF: If only one child was requested (the most common case), use array
+      // indexing instead of slice
+      if (n === 1) {
+        return [this.children[this.pointerIndex++]];
+      }
+      var slicedChildren = this.remaining(n);
+      this.pointerIndex += n;
+      return slicedChildren;
+    }
+    /**
+     * Get the remaining children without advancing the pointer
+     *
+     * @param [maxChildren] Limit the number of children returned.
+     */
+  }, {
+    key: "remaining",
+    value: function remaining(maxChildren) {
+      if (maxChildren === undefined) {
+        return this.children.slice(this.pointerIndex);
+      }
+      return this.children.slice(this.pointerIndex, this.pointerIndex + maxChildren);
+    }
+    /**
+     * Whether all children have been read
+     */
+  }, {
+    key: "reachedEnd",
+    get: function get() {
+      return this.pointerIndex >= this.children.length;
+    }
+    /**
+     * Determine whether a node with a given key appears in the unread part of the
+     * children array, and return its index relative to the current pointer if so
+     *
+     * Searching for the node object itself using indexOf is most efficient, but
+     * will fail to locate nodes that have been modified. In this case, nodes
+     * should be identified by their keys instead.
+     *
+     * Searching an array of keys using indexOf is very inefficient since fetching
+     * the keys for all children in advance is very slow. Insead, if the node
+     * search fails to return a value, fetch the keys of each remaining child one
+     * by one and compare it to the known key.
+     */
+  }, {
+    key: "lookAhead",
+    value: function lookAhead(node, key) {
+      var elementResult = this.children.indexOf(node, this.pointerIndex);
+      if (elementResult > -1) return elementResult - this.pointerIndex;
+      for (var i = this.pointerIndex; i < this.children.length; i++) {
+        var candidateNode = this.children[i];
+        var candidateKey = this.findKey(candidateNode, i);
+        if (candidateKey === key) return i - this.pointerIndex;
+      }
+      return -1;
+    }
+    /**
+     * Convert an array of Slate nodes to an array of chunk leaves, each
+     * containing the node and its key
+     */
+  }, {
+    key: "toChunkLeaves",
+    value: function toChunkLeaves(nodes, startIndex) {
+      var _this = this;
+      return nodes.map(function (node, i) {
+        return {
+          type: 'leaf',
+          node: node,
+          key: _this.findKey(node, startIndex + i),
+          index: startIndex + i
+        };
+      });
+    }
+    /**
+     * Get the key for a Slate node, cached using the node's index
+     */
+  }, {
+    key: "findKey",
+    value: function findKey(node, index) {
+      var cachedKey = this.cachedKeys[index];
+      if (cachedKey) return cachedKey;
+      var key = ReactEditor.findKey(this.editor, node);
+      this.cachedKeys[index] = key;
+      return key;
+    }
+  }]);
+  return ChildrenHelper;
+}();
+
 /**
- * Get the current `decorate` prop of the editable.
+ * Update the chunk tree to match the children array, inserting, removing and
+ * updating differing nodes
  */
-var useDecorate = function useDecorate() {
-  return React.useContext(DecorateContext);
+var reconcileChildren = function reconcileChildren(editor, _ref) {
+  var chunkTree = _ref.chunkTree,
+    children = _ref.children,
+    chunkSize = _ref.chunkSize,
+    _ref$rerenderChildren = _ref.rerenderChildren,
+    rerenderChildren = _ref$rerenderChildren === void 0 ? [] : _ref$rerenderChildren,
+    onInsert = _ref.onInsert,
+    onUpdate = _ref.onUpdate,
+    onIndexChange = _ref.onIndexChange,
+    debug = _ref.debug;
+  chunkTree.modifiedChunks.clear();
+  var chunkTreeHelper = new ChunkTreeHelper(chunkTree, {
+    chunkSize: chunkSize,
+    debug: debug
+  });
+  var childrenHelper = new ChildrenHelper(editor, children);
+  var treeLeaf;
+  // Read leaves from the tree one by one, each one representing a single Slate
+  // node. Each leaf from the tree is compared to the current node in the
+  // children array to determine whether nodes have been inserted, removed or
+  // updated.
+  var _loop = function _loop() {
+    // Check where the tree node appears in the children array. In the most
+    // common case (where no insertions or removals have occurred), this will be
+    // 0. If the node has been removed, this will be -1. If new nodes have been
+    // inserted before the node, or if the node has been moved to a later
+    // position in the same children array, this will be a positive number.
+    var lookAhead = childrenHelper.lookAhead(treeLeaf.node, treeLeaf.key);
+    // If the node was moved, we want to remove it and insert it later, rather
+    // then re-inserting all intermediate nodes before it.
+    var wasMoved = lookAhead > 0 && chunkTree.movedNodeKeys.has(treeLeaf.key);
+    // If the tree leaf was moved or removed, remove it
+    if (lookAhead === -1 || wasMoved) {
+      chunkTreeHelper.remove();
+      return 1; // continue
+    }
+    // Get the matching Slate node and any nodes that may have been inserted
+    // prior to it. Insert these into the chunk tree.
+    var insertedChildrenStartIndex = childrenHelper.pointerIndex;
+    var insertedChildren = childrenHelper.read(lookAhead + 1);
+    var matchingChild = insertedChildren.pop();
+    if (insertedChildren.length) {
+      var _leavesToInsert = childrenHelper.toChunkLeaves(insertedChildren, insertedChildrenStartIndex);
+      chunkTreeHelper.insertBefore(_leavesToInsert);
+      insertedChildren.forEach(function (node, relativeIndex) {
+        onInsert === null || onInsert === void 0 || onInsert(node, insertedChildrenStartIndex + relativeIndex);
+      });
+    }
+    var matchingChildIndex = childrenHelper.pointerIndex - 1;
+    // Make sure the chunk tree contains the most recent version of the Slate
+    // node
+    if (treeLeaf.node !== matchingChild) {
+      treeLeaf.node = matchingChild;
+      chunkTreeHelper.invalidateChunk();
+      onUpdate === null || onUpdate === void 0 || onUpdate(matchingChild, matchingChildIndex);
+    }
+    // Update the index if it has changed
+    if (treeLeaf.index !== matchingChildIndex) {
+      treeLeaf.index = matchingChildIndex;
+      onIndexChange === null || onIndexChange === void 0 || onIndexChange(matchingChild, matchingChildIndex);
+    }
+    // Manually invalidate chunks containing specific children that we want to
+    // re-render
+    if (rerenderChildren.includes(matchingChildIndex)) {
+      chunkTreeHelper.invalidateChunk();
+    }
+  };
+  while (treeLeaf = chunkTreeHelper.readLeaf()) {
+    if (_loop()) continue;
+  }
+  // If there are still Slate nodes remaining from the children array that were
+  // not matched to nodes in the tree, insert them at the end of the tree
+  if (!childrenHelper.reachedEnd) {
+    var remainingChildren = childrenHelper.remaining();
+    var leavesToInsert = childrenHelper.toChunkLeaves(remainingChildren, childrenHelper.pointerIndex);
+    // Move the pointer back to the final leaf in the tree, or the start of the
+    // tree if the tree is currently empty
+    chunkTreeHelper.returnToPreviousLeaf();
+    chunkTreeHelper.insertAfter(leavesToInsert);
+    remainingChildren.forEach(function (node, relativeIndex) {
+      onInsert === null || onInsert === void 0 || onInsert(node, childrenHelper.pointerIndex + relativeIndex);
+    });
+  }
+  chunkTree.movedNodeKeys.clear();
 };
 
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var KEY_TO_CHUNK_TREE = new WeakMap();
 /**
- * A React context for sharing the `selected` state of an element.
+ * Get or create the chunk tree for a Slate node
+ *
+ * If the reconcile option is provided, the chunk tree will be updated to
+ * match the current children of the node. The children are chunked
+ * automatically using the given chunk size.
  */
-var SelectedContext = /*#__PURE__*/React.createContext(false);
+var getChunkTreeForNode = function getChunkTreeForNode(editor, node) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var key = ReactEditor.findKey(editor, node);
+  var chunkTree = KEY_TO_CHUNK_TREE.get(key);
+  if (!chunkTree) {
+    chunkTree = {
+      type: 'root',
+      movedNodeKeys: new Set(),
+      modifiedChunks: new Set(),
+      children: []
+    };
+    KEY_TO_CHUNK_TREE.set(key, chunkTree);
+  }
+  if (options.reconcile) {
+    reconcileChildren(editor, _objectSpread$1({
+      chunkTree: chunkTree,
+      children: node.children
+    }, options.reconcile));
+  }
+  return chunkTree;
+};
+
+var defaultRenderChunk = function defaultRenderChunk(_ref) {
+  var children = _ref.children;
+  return children;
+};
+var ChunkAncestor = function ChunkAncestor(props) {
+  var root = props.root,
+    ancestor = props.ancestor,
+    renderElement = props.renderElement,
+    _props$renderChunk = props.renderChunk,
+    renderChunk = _props$renderChunk === void 0 ? defaultRenderChunk : _props$renderChunk;
+  return ancestor.children.map(function (chunkNode) {
+    if (chunkNode.type === 'chunk') {
+      var key = chunkNode.key.id;
+      var renderedChunk = renderChunk({
+        highest: ancestor === root,
+        lowest: chunkNode.children.some(function (c) {
+          return c.type === 'leaf';
+        }),
+        attributes: {
+          'data-slate-chunk': true
+        },
+        children: /*#__PURE__*/React.createElement(MemoizedChunk, {
+          root: root,
+          ancestor: chunkNode,
+          renderElement: renderElement,
+          renderChunk: renderChunk
+        })
+      });
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: key
+      }, renderedChunk);
+    }
+    // Only blocks containing no inlines are chunked
+    var element = chunkNode.node;
+    return renderElement(element, chunkNode.index, chunkNode.key);
+  });
+};
+var ChunkTree = ChunkAncestor;
+var MemoizedChunk = /*#__PURE__*/React.memo(ChunkAncestor, function (prev, next) {
+  return prev.root === next.root && prev.renderElement === next.renderElement && prev.renderChunk === next.renderChunk && !next.root.modifiedChunks.has(next.ancestor);
+});
+
+var ElementContext = /*#__PURE__*/React.createContext(null);
 /**
- * Get the current `selected` state of an element.
+ * Get the current element.
  */
-var useSelected = function useSelected() {
-  return React.useContext(SelectedContext);
+var useElement = function useElement() {
+  var context = React.useContext(ElementContext);
+  if (!context) {
+    throw new Error('The `useElement` hook must be used inside `renderElement`.');
+  }
+  return context;
+};
+/**
+ * Get the current element, or return null if not inside `renderElement`.
+ */
+var useElementIf = function useElementIf() {
+  return React.useContext(ElementContext);
 };
 
-function _createForOfIteratorHelper$1(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-function _unsupportedIterableToArray$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); }
-function _arrayLikeToArray$1(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 /**
  * Children.
  */
@@ -1423,68 +2387,113 @@ var useChildren = function useChildren(props) {
   var decorations = props.decorations,
     node = props.node,
     renderElement = props.renderElement,
+    renderChunk = props.renderChunk,
     renderPlaceholder = props.renderPlaceholder,
     renderText = props.renderText,
-    renderLeaf = props.renderLeaf,
-    selection = props.selection;
-  var decorate = useDecorate();
+    renderLeaf = props.renderLeaf;
   var editor = useSlateStatic();
   slateDom.IS_NODE_MAP_DIRTY.set(editor, false);
-  var path = ReactEditor.findPath(editor, node);
-  var children = [];
-  var isLeafBlock = slate.Element.isElement(node) && !editor.isInline(node) && slate.Editor.hasInlines(editor, node);
-  for (var i = 0; i < node.children.length; i++) {
-    var p = path.concat(i);
-    var n = node.children[i];
+  var isEditor = slate.Editor.isEditor(node);
+  var isBlock = !isEditor && slate.Element.isElement(node) && !editor.isInline(node);
+  var isLeafBlock = isBlock && slate.Editor.hasInlines(editor, node);
+  var chunkSize = isLeafBlock ? null : editor.getChunkSize(node);
+  var chunking = !!chunkSize;
+  var _useDecorationsByChil = useDecorationsByChild(editor, node, decorations),
+    decorationsByChild = _useDecorationsByChil.decorationsByChild,
+    childrenToRedecorate = _useDecorationsByChil.childrenToRedecorate;
+  // Update the index and parent of each child.
+  // PERF: If chunking is enabled, this is done while traversing the chunk tree
+  // instead to eliminate unnecessary weak map operations.
+  if (!chunking) {
+    node.children.forEach(function (n, i) {
+      slateDom.NODE_TO_INDEX.set(n, i);
+      slateDom.NODE_TO_PARENT.set(n, node);
+    });
+  }
+  var renderElementComponent = React.useCallback(function (n, i, cachedKey) {
+    var key = cachedKey !== null && cachedKey !== void 0 ? cachedKey : ReactEditor.findKey(editor, n);
+    return /*#__PURE__*/React.createElement(ElementContext.Provider, {
+      key: "provider-".concat(key.id),
+      value: n
+    }, /*#__PURE__*/React.createElement(MemoizedElement, {
+      decorations: decorationsByChild[i],
+      element: n,
+      key: key.id,
+      renderElement: renderElement,
+      renderChunk: renderChunk,
+      renderPlaceholder: renderPlaceholder,
+      renderLeaf: renderLeaf,
+      renderText: renderText
+    }));
+  }, [editor, decorationsByChild, renderElement, renderChunk, renderPlaceholder, renderLeaf, renderText]);
+  var renderTextComponent = function renderTextComponent(n, i) {
     var key = ReactEditor.findKey(editor, n);
-    var range = slate.Editor.range(editor, p);
-    var sel = selection && slate.Range.intersection(range, selection);
-    var ds = decorate([n, p]);
-    var _iterator = _createForOfIteratorHelper$1(decorations),
-      _step;
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var dec = _step.value;
-        var d = slate.Range.intersection(dec, range);
-        if (d) {
-          ds.push(d);
-        }
+    return /*#__PURE__*/React.createElement(MemoizedText, {
+      decorations: decorationsByChild[i],
+      key: key.id,
+      isLast: i === node.children.length - 1,
+      parent: node,
+      renderPlaceholder: renderPlaceholder,
+      renderLeaf: renderLeaf,
+      renderText: renderText,
+      text: n
+    });
+  };
+  if (!chunking) {
+    return node.children.map(function (n, i) {
+      return slate.Text.isText(n) ? renderTextComponent(n, i) : renderElementComponent(n, i);
+    });
+  }
+  var chunkTree = getChunkTreeForNode(editor, node, {
+    reconcile: {
+      chunkSize: chunkSize,
+      rerenderChildren: childrenToRedecorate,
+      onInsert: function onInsert(n, i) {
+        slateDom.NODE_TO_INDEX.set(n, i);
+        slateDom.NODE_TO_PARENT.set(n, node);
+      },
+      onUpdate: function onUpdate(n, i) {
+        slateDom.NODE_TO_INDEX.set(n, i);
+        slateDom.NODE_TO_PARENT.set(n, node);
+      },
+      onIndexChange: function onIndexChange(n, i) {
+        slateDom.NODE_TO_INDEX.set(n, i);
       }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
-    }
-    if (slate.Element.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,
-        renderText: renderText,
-        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,
-        renderText: renderText,
-        text: n
-      }));
     }
-    slateDom.NODE_TO_INDEX.set(n, i);
-    slateDom.NODE_TO_PARENT.set(n, node);
+  });
+  return /*#__PURE__*/React.createElement(ChunkTree, {
+    root: chunkTree,
+    ancestor: chunkTree,
+    renderElement: renderElementComponent,
+    renderChunk: renderChunk
+  });
+};
+var useDecorationsByChild = function useDecorationsByChild(editor, node, decorations) {
+  var decorationsByChild = slateDom.splitDecorationsByChild(editor, node, decorations);
+  // The value we return is a mutable array of `DecoratedRange[]` arrays. This
+  // lets us avoid passing an immutable array of decorations for each child into
+  // `ChunkTree` using props. Each `DecoratedRange[]` is only updated if the
+  // decorations at that index have changed, which speeds up the equality check
+  // for the `decorations` prop in the memoized `Element` and `Text` components.
+  var mutableDecorationsByChild = React.useRef(decorationsByChild).current;
+  // Track the list of child indices whose decorations have changed, so that we
+  // can tell the chunk tree to re-render these children.
+  var childrenToRedecorate = [];
+  // Resize the mutable array to match the latest result
+  mutableDecorationsByChild.length = decorationsByChild.length;
+  for (var i = 0; i < decorationsByChild.length; i++) {
+    var _mutableDecorationsBy;
+    var _decorations = decorationsByChild[i];
+    var previousDecorations = (_mutableDecorationsBy = mutableDecorationsByChild[i]) !== null && _mutableDecorationsBy !== void 0 ? _mutableDecorationsBy : null;
+    if (!slateDom.isElementDecorationsEqual(previousDecorations, _decorations)) {
+      mutableDecorationsByChild[i] = _decorations;
+      childrenToRedecorate.push(i);
+    }
   }
-  return children;
+  return {
+    decorationsByChild: mutableDecorationsByChild,
+    childrenToRedecorate: childrenToRedecorate
+  };
 };
 
 /**
@@ -1498,24 +2507,153 @@ var useReadOnly = function useReadOnly() {
   return React.useContext(ReadOnlyContext);
 };
 
-var SlateContext = /*#__PURE__*/React.createContext(null);
 /**
- * Get the current editor object from the React context.
+ * A React context for sharing the editor selector context in a way to control
+ * re-renders.
  */
-var useSlate = function useSlate() {
-  var context = React.useContext(SlateContext);
+var SlateSelectorContext = /*#__PURE__*/React.createContext({});
+var refEquality = function refEquality(a, b) {
+  return a === b;
+};
+/**
+ * Use redux style selectors to prevent re-rendering on every keystroke.
+ *
+ * Bear in mind re-rendering can only prevented if the returned value is a value
+ * type or for reference types (e.g. objects and arrays) add a custom equality
+ * function.
+ *
+ * If `selector` is memoized using `useCallback`, then it will only be called
+ * when it or the editor state changes. Otherwise, `selector` will be called
+ * every time the component renders.
+ *
+ * @example
+ * const isSelectionActive = useSlateSelector(editor => Boolean(editor.selection))
+ */
+function useSlateSelector(selector) {
+  var equalityFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : refEquality;
+  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+    deferred = _ref.deferred;
+  var context = React.useContext(SlateSelectorContext);
   if (!context) {
+    throw new Error("The `useSlateSelector` hook must be used inside the <Slate> component's context.");
+  }
+  var addEventListener = context.addEventListener;
+  var editor = useSlateStatic();
+  var genericSelector = React.useCallback(function () {
+    return selector(editor);
+  }, [editor, selector]);
+  var _useGenericSelector = useGenericSelector(genericSelector, equalityFn),
+    _useGenericSelector2 = _slicedToArray(_useGenericSelector, 2),
+    selectedState = _useGenericSelector2[0],
+    update = _useGenericSelector2[1];
+  useIsomorphicLayoutEffect(function () {
+    var unsubscribe = addEventListener(update, {
+      deferred: deferred
+    });
+    update();
+    return unsubscribe;
+  }, [addEventListener, update, deferred]);
+  return selectedState;
+}
+/**
+ * Create selector context with editor updating on every editor change
+ */
+function useSelectorContext() {
+  var eventListeners = React.useRef(new Set());
+  var deferredEventListeners = React.useRef(new Set());
+  var onChange = React.useCallback(function () {
+    eventListeners.current.forEach(function (listener) {
+      return listener();
+    });
+  }, []);
+  var flushDeferred = React.useCallback(function () {
+    deferredEventListeners.current.forEach(function (listener) {
+      return listener();
+    });
+    deferredEventListeners.current.clear();
+  }, []);
+  var addEventListener = React.useCallback(function (callbackProp) {
+    var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref2$deferred = _ref2.deferred,
+      deferred = _ref2$deferred === void 0 ? false : _ref2$deferred;
+    var callback = deferred ? function () {
+      return deferredEventListeners.current.add(callbackProp);
+    } : callbackProp;
+    eventListeners.current.add(callback);
+    return function () {
+      eventListeners.current["delete"](callback);
+    };
+  }, []);
+  var selectorContext = React.useMemo(function () {
+    return {
+      addEventListener: addEventListener,
+      flushDeferred: flushDeferred
+    };
+  }, [addEventListener, flushDeferred]);
+  return {
+    selectorContext: selectorContext,
+    onChange: onChange
+  };
+}
+function useFlushDeferredSelectorsOnRender() {
+  var _useContext = React.useContext(SlateSelectorContext),
+    flushDeferred = _useContext.flushDeferred;
+  useIsomorphicLayoutEffect(flushDeferred);
+}
+
+/**
+ * Get the current editor object and re-render whenever it changes.
+ */
+var useSlate = function useSlate() {
+  var _useContext = React.useContext(SlateSelectorContext),
+    addEventListener = _useContext.addEventListener;
+  var _useReducer = React.useReducer(function (s) {
+      return s + 1;
+    }, 0),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    forceRender = _useReducer2[1];
+  if (!addEventListener) {
     throw new Error("The `useSlate` hook must be used inside the <Slate> component's context.");
   }
-  var editor = context.editor;
-  return editor;
+  useIsomorphicLayoutEffect(function () {
+    return addEventListener(forceRender);
+  }, [addEventListener]);
+  return useSlateStatic();
 };
-var useSlateWithV = function useSlateWithV() {
-  var context = React.useContext(SlateContext);
-  if (!context) {
-    throw new Error("The `useSlate` hook must be used inside the <Slate> component's context.");
+var EDITOR_TO_V = new WeakMap();
+var getEditorVersionRef = function getEditorVersionRef(editor) {
+  var v = EDITOR_TO_V.get(editor);
+  if (v) {
+    return v;
   }
-  return context;
+  v = {
+    current: 0
+  };
+  EDITOR_TO_V.set(editor, v);
+  // Register the `onChange` handler exactly once per editor
+  var onChange = editor.onChange;
+  editor.onChange = function (options) {
+    v.current++;
+    onChange(options);
+  };
+  return v;
+};
+/**
+ * Get the current editor object and its version, which increments on every
+ * change.
+ *
+ * @deprecated The `v` counter is no longer used except for this hook, and may
+ * be removed in a future version.
+ */
+var useSlateWithV = function useSlateWithV() {
+  var editor = useSlate();
+  var vRef = React.useMemo(function () {
+    return getEditorVersionRef(editor);
+  }, [editor]);
+  return {
+    editor: editor,
+    v: vRef.current
+  };
 };
 
 function useTrackUserInput() {
@@ -1544,40 +2682,6 @@ function useTrackUserInput() {
   };
 }
 
-var classCallCheck = createCommonjsModule(function (module) {
-function _classCallCheck(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-}
-module.exports = _classCallCheck, module.exports.__esModule = true, module.exports["default"] = module.exports;
-});
-
-var _classCallCheck = unwrapExports(classCallCheck);
-
-var createClass = createCommonjsModule(function (module) {
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, toPropertyKey(descriptor.key), descriptor);
-  }
-}
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  Object.defineProperty(Constructor, "prototype", {
-    writable: false
-  });
-  return Constructor;
-}
-module.exports = _createClass, module.exports.__esModule = true, module.exports["default"] = module.exports;
-});
-
-var _createClass = unwrapExports(createClass);
-
 var assertThisInitialized = createCommonjsModule(function (module) {
 function _assertThisInitialized(self) {
   if (self === void 0) {
@@ -1653,42 +2757,6 @@ module.exports = _getPrototypeOf, module.exports.__esModule = true, module.expor
 
 var _getPrototypeOf = unwrapExports(getPrototypeOf);
 
-var arrayWithoutHoles = createCommonjsModule(function (module) {
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return arrayLikeToArray(arr);
-}
-module.exports = _arrayWithoutHoles, module.exports.__esModule = true, module.exports["default"] = module.exports;
-});
-
-unwrapExports(arrayWithoutHoles);
-
-var iterableToArray = createCommonjsModule(function (module) {
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-module.exports = _iterableToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
-});
-
-unwrapExports(iterableToArray);
-
-var nonIterableSpread = createCommonjsModule(function (module) {
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-module.exports = _nonIterableSpread, module.exports.__esModule = true, module.exports["default"] = module.exports;
-});
-
-unwrapExports(nonIterableSpread);
-
-var toConsumableArray = createCommonjsModule(function (module) {
-function _toConsumableArray(arr) {
-  return arrayWithoutHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr) || nonIterableSpread();
-}
-module.exports = _toConsumableArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
-});
-
-var _toConsumableArray = unwrapExports(toConsumableArray);
-
 var createRestoreDomManager = function createRestoreDomManager(editor, receivedUserInput) {
   var bufferedMutations = [];
   var clear = function clear() {
@@ -1825,7 +2893,7 @@ var useComposing = function useComposing() {
   return React.useContext(ComposingContext);
 };
 
-var _excluded$1 = ["autoFocus", "decorate", "onDOMBeforeInput", "placeholder", "readOnly", "renderElement", "renderLeaf", "renderText", "renderPlaceholder", "scrollSelectionIntoView", "style", "as", "disableDefaultStyles"],
+var _excluded$1 = ["autoFocus", "decorate", "onDOMBeforeInput", "placeholder", "readOnly", "renderElement", "renderChunk", "renderLeaf", "renderText", "renderPlaceholder", "scrollSelectionIntoView", "style", "as", "disableDefaultStyles"],
   _excluded2 = ["text"];
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -1850,6 +2918,7 @@ var Editable = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
     _props$readOnly = props.readOnly,
     readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
     renderElement = props.renderElement,
+    renderChunk = props.renderChunk,
     renderLeaf = props.renderLeaf,
     renderText = props.renderText,
     _props$renderPlacehol = props.renderPlaceholder,
@@ -1898,6 +2967,11 @@ var Editable = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
   }, []);
   // The autoFocus TextareaHTMLAttribute doesn't do anything on a div, so it
   // needs to be manually focused.
+  //
+  // If this stops working in Firefox, make sure nothing is causing this
+  // component to re-render during the initial mount. If the DOM selection is
+  // set by `useIsomorphicLayoutEffect` before `onDOMSelectionChange` updates
+  // `editor.selection`, the DOM selection can be removed accidentally.
   React.useEffect(function () {
     if (ref.current && autoFocus) {
       ref.current.focus();
@@ -2449,6 +3523,7 @@ var Editable = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
     };
   }, [scheduleOnDOMSelectionChange, state]);
   var decorations = decorate([editor, []]);
+  var decorateContext = useDecorateContext(decorate);
   var showPlaceholder = placeholder && editor.children.length === 1 && Array.from(slate.Node.texts(editor)).length === 1 && slate.Node.string(editor) === '' && !isComposing;
   var placeHolderResizeHandler = React.useCallback(function (placeholderEl) {
     if (placeholderEl && showPlaceholder) {
@@ -2505,12 +3580,13 @@ var Editable = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       slateDom.EDITOR_TO_PENDING_INSERTION_MARKS["delete"](editor);
     });
   });
+  useFlushDeferredSelectorsOnRender();
   return /*#__PURE__*/React.createElement(ReadOnlyContext.Provider, {
     value: readOnly
   }, /*#__PURE__*/React.createElement(ComposingContext.Provider, {
     value: isComposing
   }, /*#__PURE__*/React.createElement(DecorateContext.Provider, {
-    value: decorate
+    value: decorateContext
   }, /*#__PURE__*/React.createElement(RestoreDOM, {
     node: ref,
     receivedUserInput: receivedUserInput
@@ -3096,10 +4172,10 @@ var Editable = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
     decorations: decorations,
     node: editor,
     renderElement: renderElement,
+    renderChunk: renderChunk,
     renderPlaceholder: renderPlaceholder,
     renderLeaf: renderLeaf,
-    renderText: renderText,
-    selection: editor.selection
+    renderText: renderText
   }))))));
 });
 /**
@@ -3196,130 +4272,6 @@ var useFocused = function useFocused() {
   return React.useContext(FocusedContext);
 };
 
-function isError(error) {
-  return error instanceof Error;
-}
-/**
- * A React context for sharing the editor selector context in a way to control rerenders
- */
-var SlateSelectorContext = /*#__PURE__*/React.createContext({});
-var refEquality = function refEquality(a, b) {
-  return a === b;
-};
-/**
- * use redux style selectors to prevent rerendering on every keystroke.
- * Bear in mind rerendering can only prevented if the returned value is a value type or for reference types (e.g. objects and arrays) add a custom equality function.
- *
- * Example:
- * ```
- *  const isSelectionActive = useSlateSelector(editor => Boolean(editor.selection));
- * ```
- */
-function useSlateSelector(selector) {
-  var equalityFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : refEquality;
-  var _useReducer = React.useReducer(function (s) {
-      return s + 1;
-    }, 0),
-    _useReducer2 = _slicedToArray(_useReducer, 2),
-    forceRender = _useReducer2[1];
-  var context = React.useContext(SlateSelectorContext);
-  if (!context) {
-    throw new Error("The `useSlateSelector` hook must be used inside the <Slate> component's context.");
-  }
-  var getSlate = context.getSlate,
-    addEventListener = context.addEventListener;
-  var latestSubscriptionCallbackError = React.useRef();
-  var latestSelector = React.useRef(function () {
-    return null;
-  });
-  var latestSelectedState = React.useRef(null);
-  var selectedState;
-  try {
-    if (selector !== latestSelector.current || latestSubscriptionCallbackError.current) {
-      var selectorResult = selector(getSlate());
-      if (equalityFn(latestSelectedState.current, selectorResult)) {
-        selectedState = latestSelectedState.current;
-      } else {
-        selectedState = selectorResult;
-      }
-    } else {
-      selectedState = latestSelectedState.current;
-    }
-  } catch (err) {
-    if (latestSubscriptionCallbackError.current && isError(err)) {
-      err.message += "\nThe error may be correlated with this previous error:\n".concat(latestSubscriptionCallbackError.current.stack, "\n\n");
-    }
-    throw err;
-  }
-  useIsomorphicLayoutEffect(function () {
-    latestSelector.current = selector;
-    latestSelectedState.current = selectedState;
-    latestSubscriptionCallbackError.current = undefined;
-  });
-  useIsomorphicLayoutEffect(function () {
-    function checkForUpdates() {
-      try {
-        var newSelectedState = latestSelector.current(getSlate());
-        if (equalityFn(newSelectedState, latestSelectedState.current)) {
-          return;
-        }
-        latestSelectedState.current = newSelectedState;
-      } catch (err) {
-        // we ignore all errors here, since when the component
-        // is re-rendered, the selectors are called again, and
-        // will throw again, if neither props nor store state
-        // changed
-        if (err instanceof Error) {
-          latestSubscriptionCallbackError.current = err;
-        } else {
-          latestSubscriptionCallbackError.current = new Error(String(err));
-        }
-      }
-      forceRender();
-    }
-    var unsubscribe = addEventListener(checkForUpdates);
-    checkForUpdates();
-    return function () {
-      return unsubscribe();
-    };
-  },
-  // don't rerender on equalityFn change since we want to be able to define it inline
-  [addEventListener, getSlate]);
-  return selectedState;
-}
-/**
- * Create selector context with editor updating on every editor change
- */
-function useSelectorContext(editor) {
-  var eventListeners = React.useRef([]).current;
-  var slateRef = React.useRef({
-    editor: editor
-  }).current;
-  var onChange = React.useCallback(function (editor) {
-    slateRef.editor = editor;
-    eventListeners.forEach(function (listener) {
-      return listener(editor);
-    });
-  }, [eventListeners, slateRef]);
-  var selectorContext = React.useMemo(function () {
-    return {
-      getSlate: function getSlate() {
-        return slateRef.editor;
-      },
-      addEventListener: function addEventListener(callback) {
-        eventListeners.push(callback);
-        return function () {
-          eventListeners.splice(eventListeners.indexOf(callback), 1);
-        };
-      }
-    };
-  }, [eventListeners, slateRef]);
-  return {
-    selectorContext: selectorContext,
-    onChange: onChange
-  };
-}
-
 var REACT_MAJOR_VERSION = parseInt(React.version.split('.')[0], 10);
 
 var _excluded = ["editor", "children", "onChange", "onSelectionChange", "onValueChange", "initialValue"];
@@ -3335,24 +4287,18 @@ var Slate = function Slate(props) {
     onValueChange = props.onValueChange,
     initialValue = props.initialValue,
     rest = _objectWithoutProperties(props, _excluded);
-  var _React$useState = React.useState(function () {
-      if (!slate.Node.isNodeList(initialValue)) {
-        throw new Error("[Slate] initialValue is invalid! Expected a list of elements but got: ".concat(slate.Scrubber.stringify(initialValue)));
-      }
-      if (!slate.Editor.isEditor(editor)) {
-        throw new Error("[Slate] editor is invalid! You passed: ".concat(slate.Scrubber.stringify(editor)));
-      }
-      editor.children = initialValue;
-      Object.assign(editor, rest);
-      return {
-        v: 0,
-        editor: editor
-      };
-    }),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    context = _React$useState2[0],
-    setContext = _React$useState2[1];
-  var _useSelectorContext = useSelectorContext(editor),
+  // Run once on first mount, but before `useEffect` or render
+  React.useState(function () {
+    if (!slate.Node.isNodeList(initialValue)) {
+      throw new Error("[Slate] initialValue is invalid! Expected a list of elements but got: ".concat(slate.Scrubber.stringify(initialValue)));
+    }
+    if (!slate.Editor.isEditor(editor)) {
+      throw new Error("[Slate] editor is invalid! You passed: ".concat(slate.Scrubber.stringify(editor)));
+    }
+    editor.children = initialValue;
+    Object.assign(editor, rest);
+  });
+  var _useSelectorContext = useSelectorContext(),
     selectorContext = _useSelectorContext.selectorContext,
     handleSelectorChange = _useSelectorContext.onChange;
   var onContextChange = React.useCallback(function (options) {
@@ -3367,13 +4313,7 @@ var Slate = function Slate(props) {
       default:
         onValueChange === null || onValueChange === void 0 || onValueChange(editor.children);
     }
-    setContext(function (prevContext) {
-      return {
-        v: prevContext.v + 1,
-        editor: editor
-      };
-    });
-    handleSelectorChange(editor);
+    handleSelectorChange();
   }, [editor, handleSelectorChange, onChange, onSelectionChange, onValueChange]);
   React.useEffect(function () {
     slateDom.EDITOR_TO_ON_CHANGE.set(editor, onContextChange);
@@ -3413,13 +4353,11 @@ var Slate = function Slate(props) {
   }, []);
   return /*#__PURE__*/React.createElement(SlateSelectorContext.Provider, {
     value: selectorContext
-  }, /*#__PURE__*/React.createElement(SlateContext.Provider, {
-    value: context
   }, /*#__PURE__*/React.createElement(EditorContext.Provider, {
-    value: context.editor
+    value: editor
   }, /*#__PURE__*/React.createElement(FocusedContext.Provider, {
     value: isFocused
-  }, children))));
+  }, children)));
 };
 
 /**
@@ -3434,6 +4372,31 @@ var useEditor = function useEditor() {
   return editor;
 };
 
+/**
+ * Get the current `selected` state of an element.
+ */
+var useSelected = function useSelected() {
+  var element = useElementIf();
+  // Breaking the rules of hooks is fine here since `!element` will remain true
+  // or false for the entire lifetime of the component this hook is called from.
+  // TODO: Decide if we want to throw an error instead when calling
+  // `useSelected` outside of an element (potentially a breaking change).
+  if (!element) return false;
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  var selector = React.useCallback(function (editor) {
+    if (!editor.selection) return false;
+    var path = ReactEditor.findPath(editor, element);
+    var range = slate.Editor.range(editor, path);
+    return !!slate.Range.intersection(range, editor.selection);
+  }, [element]);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return useSlateSelector(selector, undefined, {
+    // Defer the selector until after `Editable` has rendered so that the path
+    // will be accurate.
+    deferred: true
+  });
+};
+
 /**
  * Get the current slate selection.
  * Only triggers a rerender when the selection actually changes
@@ -3462,7 +4425,11 @@ var withReact = function withReact(editor) {
   var e = editor;
   e = slateDom.withDOM(e, clipboardFormatKey);
   var _e = e,
-    onChange = _e.onChange;
+    onChange = _e.onChange,
+    apply = _e.apply;
+  e.getChunkSize = function () {
+    return null;
+  };
   e.onChange = function (options) {
     // COMPAT: React < 18 doesn't batch `setState` hook calls, which means
     // that the children and selection can get out of sync for one render
@@ -3476,6 +4443,22 @@ var withReact = function withReact(editor) {
       onChange(options);
     });
   };
+  // On move_node, if the chunking optimization is enabled for the parent of the
+  // node being moved, add the moved node to the movedNodeKeys set of the
+  // parent's chunk tree.
+  e.apply = function (operation) {
+    if (operation.type === 'move_node') {
+      var parent = slate.Node.parent(e, operation.path);
+      var chunking = !!e.getChunkSize(parent);
+      if (chunking) {
+        var node = slate.Node.get(e, operation.path);
+        var chunkTree = getChunkTreeForNode(e, parent);
+        var key = ReactEditor.findKey(e, node);
+        chunkTree.movedNodeKeys.add(key);
+      }
+    }
+    apply(operation);
+  };
   return e;
 };
 
@@ -3496,6 +4479,8 @@ exports.ReactEditor = ReactEditor;
 exports.Slate = Slate;
 exports.useComposing = useComposing;
 exports.useEditor = useEditor;
+exports.useElement = useElement;
+exports.useElementIf = useElementIf;
 exports.useFocused = useFocused;
 exports.useReadOnly = useReadOnly;
 exports.useSelected = useSelected;