slate-react 0.115.0 → 0.116.0

package/dist/slate-react.js

@@ -2486,8 +2486,8 @@
 	  return slate.Editor.range(editor, positions[left], parentRangeBoundary);
 	};
 
-	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; }
+	function ownKeys$1$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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 	/**
 	 * `withDOM` adds DOM specific behaviors to the editor.
 	 *
@@ -2568,7 +2568,7 @@
 	    var pendingAction = EDITOR_TO_PENDING_ACTION.get(e);
 	    if (pendingAction !== null && pendingAction !== void 0 && pendingAction.at) {
 	      var at = slate.Point.isPoint(pendingAction === null || pendingAction === void 0 ? void 0 : pendingAction.at) ? transformPendingPoint(e, pendingAction.at, op) : transformPendingRange(e, pendingAction.at, op);
-	      EDITOR_TO_PENDING_ACTION.set(e, at ? _objectSpread$7(_objectSpread$7({}, pendingAction), {}, {
+	      EDITOR_TO_PENDING_ACTION.set(e, at ? _objectSpread$1$1(_objectSpread$1$1({}, pendingAction), {}, {
 	        at
 	      }) : null);
 	    }
@@ -2902,6 +2902,8 @@
 
 	var _excluded$3 = ["anchor", "focus"],
 	  _excluded2$1 = ["anchor", "focus"];
+	function ownKeys$8(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$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 	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$3);
@@ -2916,6 +2918,12 @@
 	 * kept in order, and the odd case where they aren't is okay to re-render for.
 	 */
 	var isElementDecorationsEqual = (list, another) => {
+	  if (list === another) {
+	    return true;
+	  }
+	  if (!list || !another) {
+	    return false;
+	  }
 	  if (list.length !== another.length) {
 	    return false;
 	  }
@@ -2936,6 +2944,12 @@
 	 * kept in order, and the odd case where they aren't is okay to re-render for.
 	 */
 	var isTextDecorationsEqual = (list, another) => {
+	  if (list === another) {
+	    return true;
+	  }
+	  if (!list || !another) {
+	    return false;
+	  }
 	  if (list.length !== another.length) {
 	    return false;
 	  }
@@ -2949,12 +2963,52 @@
 	  }
 	  return true;
 	};
+	/**
+	 * Split and group decorations by each child of a node.
+	 *
+	 * @returns An array with length equal to that of `node.children`. Each index
+	 * corresponds to a child of `node`, and the value is an array of decorations
+	 * for that child.
+	 */
+	var splitDecorationsByChild = (editor, node, decorations) => {
+	  var decorationsByChild = Array.from(node.children, () => []);
+	  if (decorations.length === 0) {
+	    return decorationsByChild;
+	  }
+	  var path = DOMEditor.findPath(editor, node);
+	  var level = path.length;
+	  var ancestorRange = slate.Editor.range(editor, path);
+	  var cachedChildRanges = new Array(node.children.length);
+	  var getChildRange = index => {
+	    var cachedRange = cachedChildRanges[index];
+	    if (cachedRange) return cachedRange;
+	    var childRange = slate.Editor.range(editor, [...path, index]);
+	    cachedChildRanges[index] = childRange;
+	    return childRange;
+	  };
+	  for (var decoration of decorations) {
+	    var decorationRange = slate.Range.intersection(ancestorRange, decoration);
+	    if (!decorationRange) continue;
+	    var [startPoint, endPoint] = slate.Range.edges(decorationRange);
+	    var startIndex = startPoint.path[level];
+	    var endIndex = endPoint.path[level];
+	    for (var i = startIndex; i <= endIndex; i++) {
+	      var ds = decorationsByChild[i];
+	      if (!ds) continue;
+	      var childRange = getChildRange(i);
+	      var childDecorationRange = slate.Range.intersection(childRange, decoration);
+	      if (!childDecorationRange) continue;
+	      ds.push(_objectSpread$8(_objectSpread$8({}, decoration), childDecorationRange));
+	    }
+	  }
+	  return decorationsByChild;
+	};
 
 	// eslint-disable-next-line no-redeclare
 	var ReactEditor = 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$1(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$1(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;
@@ -3150,7 +3204,7 @@
 	      updatePlaceholderVisibility();
 	      return;
 	    }
-	    pendingDiffs[idx] = _objectSpread$6(_objectSpread$6({}, pendingDiffs[idx]), {}, {
+	    pendingDiffs[idx] = _objectSpread$7(_objectSpread$7({}, pendingDiffs[idx]), {}, {
 	      diff: merged
 	    });
 	  };
@@ -3505,7 +3559,7 @@
 	              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 {
@@ -3649,8 +3703,8 @@
 	}
 
 	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$1(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$1(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,
@@ -3667,7 +3721,7 @@
 	  var editor = useSlateStatic();
 	  var isMounted = useIsMounted();
 	  var _useState = React.useState(function () {
-	      return createAndroidInputManager(_objectSpread$5({
+	      return createAndroidInputManager(_objectSpread$6({
 	        editor: editor
 	      }, options));
 	    }),
@@ -4180,8 +4234,8 @@
 	    return ResizeObserver;
 	}());
 
-	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$1(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$1(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.
 	 */
@@ -4298,11 +4352,11 @@
 	  // 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), !IS_ANDROID || !isLineBreak ? "\uFEFF" : null, isLineBreak ? /*#__PURE__*/React.createElement("br", null) : null);
+	  return /*#__PURE__*/React.createElement("span", _objectSpread$5({}, attributes), !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$1(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$1(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 = IS_ANDROID ? 300 : 0;
@@ -4320,6 +4374,9 @@
 	    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.
 	 */
@@ -4330,9 +4387,7 @@
 	    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);
@@ -4430,27 +4485,198 @@
 	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$1(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) ? isTextDecorationsEqual : 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$1(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 = [];
@@ -4501,28 +4727,30 @@
 	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$1(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$1(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$1 = 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.
@@ -4540,10 +4768,10 @@
 	    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.
@@ -4599,7 +4827,7 @@
 	  });
 	};
 	var MemoizedElement = /*#__PURE__*/React.memo(Element$1, function (prev, next) {
-	  return prev.element === next.element && prev.renderElement === next.renderElement && prev.renderText === next.renderText && prev.renderLeaf === next.renderLeaf && prev.renderPlaceholder === next.renderPlaceholder && 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 && isElementDecorationsEqual(prev.decorations, next.decorations);
 	});
 	/**
 	 * The default element renderer.
@@ -4610,40 +4838,830 @@
 	    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$1(this, "root", void 0);
+	    /**
+	     * The ideal size of a chunk
+	     */
+	    _defineProperty$1(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$1(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$1(this, "reachedEnd", void 0);
+	    /**
+	     * The chunk containing the current node
+	     */
+	    _defineProperty$1(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$1(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$1(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$1(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 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$1(this, "editor", void 0);
+	    _defineProperty$1(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$1(this, "cachedKeys", void 0);
+	    /**
+	     * The index of the next node to be read in the children array
+	     */
+	    _defineProperty$1(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;
+	}();
+
+	/**
+	 * Update the chunk tree to match the children array, inserting, removing and
+	 * updating differing nodes
+	 */
+	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$1(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();
 	/**
-	 * Get the current `decorate` prop of the editable.
+	 * 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 useDecorate = function useDecorate() {
-	  return React.useContext(DecorateContext);
+	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);
 	/**
-	 * A React context for sharing the `selected` state of an element.
+	 * Get the current element.
 	 */
-	var SelectedContext = /*#__PURE__*/React.createContext(false);
+	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 `selected` state of an element.
+	 * Get the current element, or return null if not inside `renderElement`.
 	 */
-	var useSelected = function useSelected() {
-	  return React.useContext(SelectedContext);
+	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.
 	 */
@@ -4651,68 +5669,113 @@
 	  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();
 	  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) {
+	      NODE_TO_INDEX.set(n, i);
+	      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) {
+	        NODE_TO_INDEX.set(n, i);
+	        NODE_TO_PARENT.set(n, node);
+	      },
+	      onUpdate: function onUpdate(n, i) {
+	        NODE_TO_INDEX.set(n, i);
+	        NODE_TO_PARENT.set(n, node);
+	      },
+	      onIndexChange: function onIndexChange(n, i) {
+	        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
-	      }));
 	    }
-	    NODE_TO_INDEX.set(n, i);
-	    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 = 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 (!isElementDecorationsEqual(previousDecorations, _decorations)) {
+	      mutableDecorationsByChild[i] = _decorations;
+	      childrenToRedecorate.push(i);
+	    }
 	  }
-	  return children;
+	  return {
+	    decorationsByChild: mutableDecorationsByChild,
+	    childrenToRedecorate: childrenToRedecorate
+	  };
 	};
 
 	/**
@@ -4726,24 +5789,153 @@
 	  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 EDITOR_TO_V = new WeakMap();
+	var getEditorVersionRef = function getEditorVersionRef(editor) {
+	  var v = EDITOR_TO_V.get(editor);
+	  if (v) {
+	    return v;
+	  }
+	  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 context = React.useContext(SlateContext);
-	  if (!context) {
-	    throw new Error("The `useSlate` hook must be used inside the <Slate> component's context.");
-	  }
-	  return context;
+	  var editor = useSlate();
+	  var vRef = React.useMemo(function () {
+	    return getEditorVersionRef(editor);
+	  }, [editor]);
+	  return {
+	    editor: editor,
+	    v: vRef.current
+	  };
 	};
 
 	function useTrackUserInput() {
@@ -4772,40 +5964,6 @@
 	  };
 	}
 
-	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) {
@@ -4881,42 +6039,6 @@
 
 	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() {
@@ -5053,7 +6175,7 @@
 	  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); }
@@ -5078,6 +6200,7 @@
 	    _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,
@@ -5126,6 +6249,11 @@
 	  }, []);
 	  // 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();
@@ -5677,6 +6805,7 @@
 	    };
 	  }, [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) {
@@ -5733,12 +6862,13 @@
 	      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
@@ -6324,10 +7454,10 @@
 	    decorations: decorations,
 	    node: editor,
 	    renderElement: renderElement,
+	    renderChunk: renderChunk,
 	    renderPlaceholder: renderPlaceholder,
 	    renderLeaf: renderLeaf,
-	    renderText: renderText,
-	    selection: editor.selection
+	    renderText: renderText
 	  }))))));
 	});
 	/**
@@ -6424,130 +7554,6 @@
 	  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"];
@@ -6563,24 +7569,18 @@
 	    onValueChange = props.onValueChange,
 	    initialValue = props.initialValue,
 	    rest = _objectWithoutProperties$1(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) {
@@ -6595,13 +7595,7 @@
 	      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 () {
 	    EDITOR_TO_ON_CHANGE.set(editor, onContextChange);
@@ -6641,13 +7635,11 @@
 	  }, []);
 	  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)));
 	};
 
 	/**
@@ -6662,6 +7654,31 @@
 	  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
@@ -37248,7 +38265,11 @@
 	  var e = editor;
 	  e = 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
@@ -37262,6 +38283,22 @@
 	      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;
 	};
 
@@ -37276,6 +38313,8 @@
 	exports.Slate = Slate;
 	exports.useComposing = useComposing;
 	exports.useEditor = useEditor;
+	exports.useElement = useElement;
+	exports.useElementIf = useElementIf;
 	exports.useFocused = useFocused;
 	exports.useReadOnly = useReadOnly;
 	exports.useSelected = useSelected;