slate-react 0.115.0 → 0.116.0

package/dist/index.es.js

@@ -1,10 +1,10 @@
 import getDirection from 'direction';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
-import React, { createContext, useContext, useRef, useEffect, useLayoutEffect, useState, memo, forwardRef, useCallback, Component, useReducer, useMemo } from 'react';
+import React, { createContext, useContext, useRef, useEffect, useLayoutEffect, useState, memo, forwardRef, useCallback, useReducer, useMemo, Fragment, Component } from 'react';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { Editor, Range, Transforms, Node, Text as Text$1, Path, Point, Element as Element$1, Scrubber } from 'slate';
-import { DOMEditor, EDITOR_TO_USER_MARKS, EDITOR_TO_PENDING_DIFFS, EDITOR_TO_PENDING_ACTION, EDITOR_TO_PENDING_INSERTION_MARKS, targetRange, verifyDiffState, EDITOR_TO_PENDING_SELECTION, IS_COMPOSING, IS_NODE_MAP_DIRTY, applyStringDiff, isDOMSelection, isTrackedMutation, EDITOR_TO_FORCE_RENDER, normalizeRange, normalizePoint, EDITOR_TO_PLACEHOLDER_ELEMENT, normalizeStringDiff, mergeStringDiffs, CAN_USE_DOM, IS_ANDROID, EDITOR_TO_SCHEDULE_FLUSH, MARK_PLACEHOLDER_SYMBOL, PLACEHOLDER_SYMBOL, IS_WEBKIT, isTextDecorationsEqual, EDITOR_TO_KEY_TO_ELEMENT, NODE_TO_ELEMENT, ELEMENT_TO_NODE, isElementDecorationsEqual, NODE_TO_INDEX, NODE_TO_PARENT, IS_READ_ONLY, getActiveElement, getSelection, IS_FOCUSED, getDefaultView, EDITOR_TO_WINDOW, EDITOR_TO_ELEMENT, IS_FIREFOX, EDITOR_TO_USER_SELECTION, HAS_BEFORE_INPUT_SUPPORT, isDOMElement, isDOMNode, TRIPLE_CLICK, IS_FIREFOX_LEGACY, IS_IOS, IS_WECHATBROWSER, IS_UC_MOBILE, Hotkeys, IS_CHROME, isPlainTextOnlyPaste, EDITOR_TO_ON_CHANGE, withDOM } from 'slate-dom';
+import { DOMEditor, EDITOR_TO_USER_MARKS, EDITOR_TO_PENDING_DIFFS, EDITOR_TO_PENDING_ACTION, EDITOR_TO_PENDING_INSERTION_MARKS, targetRange, verifyDiffState, EDITOR_TO_PENDING_SELECTION, IS_COMPOSING, IS_NODE_MAP_DIRTY, applyStringDiff, isDOMSelection, isTrackedMutation, EDITOR_TO_FORCE_RENDER, normalizeRange, normalizePoint, EDITOR_TO_PLACEHOLDER_ELEMENT, normalizeStringDiff, mergeStringDiffs, CAN_USE_DOM, IS_ANDROID, EDITOR_TO_SCHEDULE_FLUSH, MARK_PLACEHOLDER_SYMBOL, PLACEHOLDER_SYMBOL, IS_WEBKIT, isTextDecorationsEqual, isElementDecorationsEqual, EDITOR_TO_KEY_TO_ELEMENT, NODE_TO_ELEMENT, ELEMENT_TO_NODE, NODE_TO_INDEX, NODE_TO_PARENT, Key, splitDecorationsByChild, IS_READ_ONLY, getActiveElement, getSelection, IS_FOCUSED, getDefaultView, EDITOR_TO_WINDOW, EDITOR_TO_ELEMENT, IS_FIREFOX, EDITOR_TO_USER_SELECTION, HAS_BEFORE_INPUT_SUPPORT, isDOMElement, isDOMNode, TRIPLE_CLICK, IS_FIREFOX_LEGACY, IS_IOS, IS_WECHATBROWSER, IS_UC_MOBILE, Hotkeys, IS_CHROME, isPlainTextOnlyPaste, EDITOR_TO_ON_CHANGE, withDOM } from 'slate-dom';
 export { NODE_TO_INDEX, NODE_TO_PARENT } from 'slate-dom';
 import { ResizeObserver } from '@juggle/resize-observer';
 import ReactDOM from 'react-dom';
@@ -97,8 +97,8 @@ var useSlateStatic = () => {
 // 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(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // https://github.com/facebook/draft-js/blob/main/src/component/handlers/composition/DraftEditorCompositionHandler.js#L41
 // When using keyboard English association function, conpositionEnd triggered too fast, resulting in after `insertText` still maintain association state.
 var RESOLVE_DELAY = 25;
@@ -294,7 +294,7 @@ function createAndroidInputManager(_ref) {
       updatePlaceholderVisibility();
       return;
     }
-    pendingDiffs[idx] = _objectSpread$6(_objectSpread$6({}, pendingDiffs[idx]), {}, {
+    pendingDiffs[idx] = _objectSpread$7(_objectSpread$7({}, pendingDiffs[idx]), {}, {
       diff: merged
     });
   };
@@ -612,7 +612,7 @@ function createAndroidInputManager(_ref) {
               if (insertPositionHint === null) {
                 insertPositionHint = _diff;
               } else if (insertPositionHint && 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 {
@@ -748,8 +748,8 @@ function useMutationObserver(node, callback, options) {
 }
 
 var _excluded$2 = ["node"];
-function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var MUTATION_OBSERVER_CONFIG$1 = {
   subtree: true,
   childList: true,
@@ -765,7 +765,7 @@ var useAndroidInputManager = !IS_ANDROID ? () => null : _ref => {
   }
   var editor = useSlateStatic();
   var isMounted = useIsMounted();
-  var [inputManager] = useState(() => createAndroidInputManager(_objectSpread$5({
+  var [inputManager] = useState(() => createAndroidInputManager(_objectSpread$6({
     editor
   }, options)));
   useMutationObserver(node, inputManager.handleDomMutations, MUTATION_OBSERVER_CONFIG$1);
@@ -776,8 +776,8 @@ var useAndroidInputManager = !IS_ANDROID ? () => null : _ref => {
   return inputManager;
 };
 
-function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * Leaf content strings.
  */
@@ -894,11 +894,11 @@ var ZeroWidthString = props => {
   // be because accepting an IME suggestion when at the start of a block (no
   // preceding \uFEFF) removes one or more DOM elements that `toSlateRange`
   // depends on. (https://github.com/ianstormtaylor/slate/issues/5703)
-  return /*#__PURE__*/React.createElement("span", _objectSpread$4({}, attributes), !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(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // Delay the placeholder on Android to prevent the keyboard from closing.
 // (https://github.com/ianstormtaylor/slate/pull/5368)
 var PLACEHOLDER_DELAY = IS_ANDROID ? 300 : 0;
@@ -916,6 +916,7 @@ function clearTimeoutRef(timeoutRef) {
     timeoutRef.current = null;
   }
 }
+var defaultRenderLeaf = props => /*#__PURE__*/React.createElement(DefaultLeaf, _objectSpread$4({}, props));
 /**
  * Individual leaves in a text node with unique formatting.
  */
@@ -926,7 +927,7 @@ var Leaf = props => {
     text,
     parent,
     renderPlaceholder,
-    renderLeaf = props => /*#__PURE__*/React.createElement(DefaultLeaf, _objectSpread$3({}, props)),
+    renderLeaf = defaultRenderLeaf,
     leafPosition
   } = props;
   var editor = useSlateStatic();
@@ -1022,26 +1023,145 @@ var DefaultLeaf = props => {
     attributes,
     children
   } = props;
-  return /*#__PURE__*/React.createElement("span", _objectSpread$3({}, attributes), children);
+  return /*#__PURE__*/React.createElement("span", _objectSpread$4({}, attributes), children);
 };
 
-function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * 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 [, forceRender] = useReducer(s => s + 1, 0);
+  var latestSubscriptionCallbackError = useRef();
+  var latestSelector = useRef(() => null);
+  var latestSelectedState = 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 = useCallback(() => {
+    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__*/createContext({});
+var useDecorations = (node, parentDecorations) => {
+  var editor = useSlateStatic();
+  var {
+    decorate,
+    addEventListener
+  } = useContext(DecorateContext);
+  // Not memoized since we want nodes to be decorated on each render
+  var selector = () => {
+    var path = ReactEditor.findPath(editor, node);
+    return decorate([node, path]);
+  };
+  var equalityFn = Text$1.isText(node) ? isTextDecorationsEqual : isElementDecorationsEqual;
+  var [decorations, update] = useGenericSelector(selector, equalityFn);
+  useIsomorphicLayoutEffect(() => {
+    var unsubscribe = addEventListener(update);
+    update();
+    return unsubscribe;
+  }, [addEventListener, update]);
+  return useMemo(() => [...decorations, ...parentDecorations], [decorations, parentDecorations]);
+};
+var useDecorateContext = decorateProp => {
+  var eventListeners = useRef(new Set());
+  var latestDecorate = useRef(decorateProp);
+  useIsomorphicLayoutEffect(() => {
+    latestDecorate.current = decorateProp;
+    eventListeners.current.forEach(listener => listener());
+  }, [decorateProp]);
+  var decorate = useCallback(entry => latestDecorate.current(entry), []);
+  var addEventListener = useCallback(callback => {
+    eventListeners.current.add(callback);
+    return () => {
+      eventListeners.current.delete(callback);
+    };
+  }, []);
+  return useMemo(() => ({
+    decorate,
+    addEventListener
+  }), [decorate, addEventListener]);
+};
+
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var defaultRenderText = props => /*#__PURE__*/React.createElement(DefaultText, _objectSpread$3({}, props));
 /**
  * Text.
  */
 var Text = props => {
   var {
-    decorations,
+    decorations: parentDecorations,
     isLast,
     parent,
     renderPlaceholder,
     renderLeaf,
-    renderText = props => /*#__PURE__*/React.createElement(DefaultText, _objectSpread$2({}, props)),
+    renderText = defaultRenderText,
     text
   } = props;
   var editor = useSlateStatic();
   var ref = useRef(null);
+  var decorations = useDecorations(text, parentDecorations);
   var decoratedLeaves = Text$1.decorations(text, decorations);
   var key = ReactEditor.findKey(editor, text);
   var children = [];
@@ -1095,27 +1215,29 @@ var DefaultText = props => {
     attributes,
     children
   } = props;
-  return /*#__PURE__*/React.createElement("span", _objectSpread$2({}, attributes), children);
+  return /*#__PURE__*/React.createElement("span", _objectSpread$3({}, attributes), children);
 };
 
-function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var defaultRenderElement = props => /*#__PURE__*/React.createElement(DefaultElement, _objectSpread$2({}, props));
 /**
  * Element.
  */
 var Element = props => {
   var {
-    decorations,
+    decorations: parentDecorations,
     element,
-    renderElement = p => /*#__PURE__*/React.createElement(DefaultElement, _objectSpread$1({}, p)),
+    renderElement = defaultRenderElement,
+    renderChunk,
     renderPlaceholder,
     renderLeaf,
-    renderText,
-    selection
+    renderText
   } = props;
   var editor = useSlateStatic();
   var readOnly = useReadOnly();
   var isInline = editor.isInline(element);
+  var decorations = useDecorations(element, parentDecorations);
   var key = ReactEditor.findKey(editor, element);
   var ref = useCallback(ref => {
     // Update element-related weak maps with the DOM element ref.
@@ -1133,10 +1255,10 @@ var Element = props => {
     decorations,
     node: element,
     renderElement,
+    renderChunk,
     renderPlaceholder,
     renderLeaf,
-    renderText,
-    selection
+    renderText
   });
   // Attributes that the developer must mix into the element in their
   // custom node renderer component.
@@ -1189,7 +1311,7 @@ var Element = props => {
   });
 };
 var MemoizedElement = /*#__PURE__*/React.memo(Element, (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 && 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.
@@ -1202,7 +1324,7 @@ var DefaultElement = props => {
   } = props;
   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'
     }
@@ -1210,26 +1332,732 @@ var DefaultElement = props => {
 };
 
 /**
- * A React context for sharing the `decorate` prop of the editable.
+ * Traverse and modify a chunk tree
+ */
+class ChunkTreeHelper {
+  constructor(chunkTree, _ref) {
+    var {
+      chunkSize,
+      debug
+    } = _ref;
+    /**
+     * The root of the chunk tree
+     */
+    _defineProperty(this, "root", void 0);
+    /**
+     * The ideal size of a chunk
+     */
+    _defineProperty(this, "chunkSize", void 0);
+    /**
+     * Whether debug mode is enabled
+     *
+     * If enabled, the pointer state will be checked for internal consistency
+     * after each mutating operation.
+     */
+    _defineProperty(this, "debug", void 0);
+    /**
+     * Whether the traversal has reached the end of the chunk tree
+     *
+     * When this is true, the pointerChunk and pointerIndex point to the last
+     * top-level node in the chunk tree, although pointerNode returns null.
+     */
+    _defineProperty(this, "reachedEnd", void 0);
+    /**
+     * The chunk containing the current node
+     */
+    _defineProperty(this, "pointerChunk", void 0);
+    /**
+     * The index of the current node within pointerChunk
+     *
+     * Can be -1 to indicate that the pointer is before the start of the tree.
+     */
+    _defineProperty(this, "pointerIndex", void 0);
+    /**
+     * Similar to a Slate path; tracks the path of pointerChunk relative to the
+     * root.
+     *
+     * Used to move the pointer from the current chunk to the parent chunk more
+     * efficiently.
+     */
+    _defineProperty(this, "pointerIndexStack", void 0);
+    /**
+     * Indexing the current chunk's children has a slight time cost, which adds up
+     * when traversing very large trees, so the current node is cached.
+     *
+     * A value of undefined means that the current node is not cached. This
+     * property must be set to undefined whenever the pointer is moved, unless
+     * the pointer is guaranteed to point to the same node that it did previously.
+     */
+    _defineProperty(this, "cachedPointerNode", void 0);
+    this.root = chunkTree;
+    this.chunkSize = chunkSize;
+    // istanbul ignore next
+    this.debug = debug !== null && debug !== void 0 ? debug : false;
+    this.pointerChunk = chunkTree;
+    this.pointerIndex = -1;
+    this.pointerIndexStack = [];
+    this.reachedEnd = false;
+    this.validateState();
+  }
+  /**
+   * Move the pointer to the next leaf in the chunk tree
+   */
+  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
+   */
+  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
+   */
+  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.
+   */
+  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
+   */
+  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
+   */
+  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
+   */
+  get atStart() {
+    return this.pointerChunk.type === 'root' && this.pointerIndex === -1;
+  }
+  /**
+   * The siblings of the current node
+   */
+  get pointerSiblings() {
+    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.
+   */
+  getPointerNode() {
+    if (this.reachedEnd || this.pointerIndex === -1) {
+      return null;
+    }
+    return this.pointerSiblings[this.pointerIndex];
+  }
+  /**
+   * Cached getter for the current node
+   */
+  get pointerNode() {
+    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
+   */
+  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
+   */
+  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
+   */
+  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,
+      node
+    } = savedPointer;
+    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.
+   */
+  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.
+   */
+  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
+   */
+  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
+   */
+  rawInsertAfter(leaves, minDepth) {
+    if (leaves.length === 0) return;
+    var 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,
+          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.splice(this.pointerIndex + 1, 0, ...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
+  validateState() {
+    if (!this.debug) return;
+    var validateDescendant = node => {
+      if (node.type === 'chunk') {
+        var {
+          parent,
+          children
+        } = node;
+        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 (!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(', '), "]"));
+    }
+  }
+}
+
+/**
+ * Traverse an array of children, providing helpers useful for reconciling the
+ * children array with a chunk tree
  */
-var DecorateContext = /*#__PURE__*/createContext(() => []);
+class ChildrenHelper {
+  constructor(editor, children) {
+    _defineProperty(this, "editor", void 0);
+    _defineProperty(this, "children", void 0);
+    /**
+     * Sparse array of Slate node keys, each index corresponding to an index in
+     * the children array
+     *
+     * Fetching the key for a Slate node is expensive, so we cache them here.
+     */
+    _defineProperty(this, "cachedKeys", void 0);
+    /**
+     * The index of the next node to be read in the children array
+     */
+    _defineProperty(this, "pointerIndex", void 0);
+    this.editor = editor;
+    this.children = children;
+    this.cachedKeys = new Array(children.length);
+    this.pointerIndex = 0;
+  }
+  /**
+   * Read a given number of nodes, advancing the pointer by that amount
+   */
+  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.
+   */
+  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
+   */
+  get reachedEnd() {
+    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.
+   */
+  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
+   */
+  toChunkLeaves(nodes, startIndex) {
+    return nodes.map((node, i) => ({
+      type: 'leaf',
+      node,
+      key: this.findKey(node, startIndex + i),
+      index: startIndex + i
+    }));
+  }
+  /**
+   * Get the key for a Slate node, cached using the node's index
+   */
+  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;
+  }
+}
+
 /**
- * Get the current `decorate` prop of the editable.
+ * Update the chunk tree to match the children array, inserting, removing and
+ * updating differing nodes
  */
-var useDecorate = () => {
-  return useContext(DecorateContext);
+var reconcileChildren = (editor, _ref) => {
+  var {
+    chunkTree,
+    children,
+    chunkSize,
+    rerenderChildren = [],
+    onInsert,
+    onUpdate,
+    onIndexChange,
+    debug
+  } = _ref;
+  chunkTree.modifiedChunks.clear();
+  var chunkTreeHelper = new ChunkTreeHelper(chunkTree, {
+    chunkSize,
+    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((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((node, relativeIndex) => {
+      onInsert === null || onInsert === void 0 || onInsert(node, childrenHelper.pointerIndex + relativeIndex);
+    });
+  }
+  chunkTree.movedNodeKeys.clear();
 };
 
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var KEY_TO_CHUNK_TREE = new WeakMap();
 /**
- * A React context for sharing the `selected` state of an element.
+ * Get or create the chunk tree for a Slate node
+ *
+ * If the reconcile option is provided, the chunk tree will be updated to
+ * match the current children of the node. The children are chunked
+ * automatically using the given chunk size.
  */
-var SelectedContext = /*#__PURE__*/createContext(false);
+var getChunkTreeForNode = function getChunkTreeForNode(editor, node) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var key = ReactEditor.findKey(editor, node);
+  var chunkTree = KEY_TO_CHUNK_TREE.get(key);
+  if (!chunkTree) {
+    chunkTree = {
+      type: 'root',
+      movedNodeKeys: new Set(),
+      modifiedChunks: new Set(),
+      children: []
+    };
+    KEY_TO_CHUNK_TREE.set(key, chunkTree);
+  }
+  if (options.reconcile) {
+    reconcileChildren(editor, _objectSpread$1({
+      chunkTree,
+      children: node.children
+    }, options.reconcile));
+  }
+  return chunkTree;
+};
+
+var defaultRenderChunk = _ref => {
+  var {
+    children
+  } = _ref;
+  return children;
+};
+var ChunkAncestor = props => {
+  var {
+    root,
+    ancestor,
+    renderElement,
+    renderChunk = defaultRenderChunk
+  } = props;
+  return ancestor.children.map(chunkNode => {
+    if (chunkNode.type === 'chunk') {
+      var key = chunkNode.key.id;
+      var renderedChunk = renderChunk({
+        highest: ancestor === root,
+        lowest: chunkNode.children.some(c => 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(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, (prev, next) => prev.root === next.root && prev.renderElement === next.renderElement && prev.renderChunk === next.renderChunk && !next.root.modifiedChunks.has(next.ancestor));
+
+var ElementContext = /*#__PURE__*/createContext(null);
 /**
- * Get the current `selected` state of an element.
+ * Get the current element.
  */
-var useSelected = () => {
-  return useContext(SelectedContext);
+var useElement = () => {
+  var context = useContext(ElementContext);
+  if (!context) {
+    throw new Error('The `useElement` hook must be used inside `renderElement`.');
+  }
+  return context;
 };
+/**
+ * Get the current element, or return null if not inside `renderElement`.
+ */
+var useElementIf = () => useContext(ElementContext);
 
 /**
  * Children.
@@ -1239,60 +2067,113 @@ var useChildren = props => {
     decorations,
     node,
     renderElement,
+    renderChunk,
     renderPlaceholder,
     renderText,
-    renderLeaf,
-    selection
+    renderLeaf
   } = props;
-  var decorate = useDecorate();
   var editor = useSlateStatic();
   IS_NODE_MAP_DIRTY.set(editor, false);
-  var path = ReactEditor.findPath(editor, node);
-  var children = [];
-  var isLeafBlock = Element$1.isElement(node) && !editor.isInline(node) && 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 = Editor.isEditor(node);
+  var isBlock = !isEditor && Element$1.isElement(node) && !editor.isInline(node);
+  var isLeafBlock = isBlock && Editor.hasInlines(editor, node);
+  var chunkSize = isLeafBlock ? null : editor.getChunkSize(node);
+  var chunking = !!chunkSize;
+  var {
+    decorationsByChild,
+    childrenToRedecorate
+  } = useDecorationsByChild(editor, node, decorations);
+  // 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((n, i) => {
+      NODE_TO_INDEX.set(n, i);
+      NODE_TO_PARENT.set(n, node);
+    });
+  }
+  var renderElementComponent = useCallback((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 = (n, i) => {
     var key = ReactEditor.findKey(editor, n);
-    var range = Editor.range(editor, p);
-    var sel = selection && Range.intersection(range, selection);
-    var ds = decorate([n, p]);
-    for (var dec of decorations) {
-      var d = Range.intersection(dec, range);
-      if (d) {
-        ds.push(d);
-      }
-    }
-    if (Element$1.isElement(n)) {
-      children.push( /*#__PURE__*/React.createElement(SelectedContext.Provider, {
-        key: "provider-".concat(key.id),
-        value: !!sel
-      }, /*#__PURE__*/React.createElement(MemoizedElement, {
-        decorations: ds,
-        element: n,
-        key: key.id,
-        renderElement: renderElement,
-        renderPlaceholder: renderPlaceholder,
-        renderLeaf: renderLeaf,
-        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
-      }));
+    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((n, i) => Text$1.isText(n) ? renderTextComponent(n, i) : renderElementComponent(n, i));
+  }
+  var chunkTree = getChunkTreeForNode(editor, node, {
+    reconcile: {
+      chunkSize,
+      rerenderChildren: childrenToRedecorate,
+      onInsert: (n, i) => {
+        NODE_TO_INDEX.set(n, i);
+        NODE_TO_PARENT.set(n, node);
+      },
+      onUpdate: (n, i) => {
+        NODE_TO_INDEX.set(n, i);
+        NODE_TO_PARENT.set(n, node);
+      },
+      onIndexChange: (n, i) => {
+        NODE_TO_INDEX.set(n, i);
+      }
+    }
+  });
+  return /*#__PURE__*/React.createElement(ChunkTree, {
+    root: chunkTree,
+    ancestor: chunkTree,
+    renderElement: renderElementComponent,
+    renderChunk: renderChunk
+  });
+};
+var 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 = 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);
     }
-    NODE_TO_INDEX.set(n, i);
-    NODE_TO_PARENT.set(n, node);
   }
-  return children;
+  return {
+    decorationsByChild: mutableDecorationsByChild,
+    childrenToRedecorate
+  };
 };
 
 /**
@@ -1306,26 +2187,137 @@ var useReadOnly = () => {
   return useContext(ReadOnlyContext);
 };
 
-var SlateContext = /*#__PURE__*/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 = () => {
-  var context = useContext(SlateContext);
+var SlateSelectorContext = /*#__PURE__*/createContext({});
+var refEquality = (a, b) => 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 {
+    deferred
+  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var context = useContext(SlateSelectorContext);
   if (!context) {
-    throw new Error("The `useSlate` hook must be used inside the <Slate> component's context.");
+    throw new Error("The `useSlateSelector` hook must be used inside the <Slate> component's context.");
   }
   var {
-    editor
+    addEventListener
   } = context;
-  return editor;
-};
-var useSlateWithV = () => {
-  var context = useContext(SlateContext);
-  if (!context) {
+  var editor = useSlateStatic();
+  var genericSelector = useCallback(() => selector(editor), [editor, selector]);
+  var [selectedState, update] = useGenericSelector(genericSelector, equalityFn);
+  useIsomorphicLayoutEffect(() => {
+    var unsubscribe = addEventListener(update, {
+      deferred
+    });
+    update();
+    return unsubscribe;
+  }, [addEventListener, update, deferred]);
+  return selectedState;
+}
+/**
+ * Create selector context with editor updating on every editor change
+ */
+function useSelectorContext() {
+  var eventListeners = useRef(new Set());
+  var deferredEventListeners = useRef(new Set());
+  var onChange = useCallback(() => {
+    eventListeners.current.forEach(listener => listener());
+  }, []);
+  var flushDeferred = useCallback(() => {
+    deferredEventListeners.current.forEach(listener => listener());
+    deferredEventListeners.current.clear();
+  }, []);
+  var addEventListener = useCallback(function (callbackProp) {
+    var {
+      deferred = false
+    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var callback = deferred ? () => deferredEventListeners.current.add(callbackProp) : callbackProp;
+    eventListeners.current.add(callback);
+    return () => {
+      eventListeners.current.delete(callback);
+    };
+  }, []);
+  var selectorContext = useMemo(() => ({
+    addEventListener,
+    flushDeferred
+  }), [addEventListener, flushDeferred]);
+  return {
+    selectorContext,
+    onChange
+  };
+}
+function useFlushDeferredSelectorsOnRender() {
+  var {
+    flushDeferred
+  } = useContext(SlateSelectorContext);
+  useIsomorphicLayoutEffect(flushDeferred);
+}
+
+/**
+ * Get the current editor object and re-render whenever it changes.
+ */
+var useSlate = () => {
+  var {
+    addEventListener
+  } = useContext(SlateSelectorContext);
+  var [, forceRender] = useReducer(s => s + 1, 0);
+  if (!addEventListener) {
     throw new Error("The `useSlate` hook must be used inside the <Slate> component's context.");
   }
-  return context;
+  useIsomorphicLayoutEffect(() => addEventListener(forceRender), [addEventListener]);
+  return useSlateStatic();
+};
+var EDITOR_TO_V = new WeakMap();
+var 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;
+  editor.onChange = 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 = () => {
+  var editor = useSlate();
+  var vRef = useMemo(() => getEditorVersionRef(editor), [editor]);
+  return {
+    editor,
+    v: vRef.current
+  };
 };
 
 function useTrackUserInput() {
@@ -1465,7 +2457,7 @@ var useComposing = () => {
   return 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 ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -1482,6 +2474,7 @@ var Editable = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       placeholder,
       readOnly = false,
       renderElement,
+      renderChunk,
       renderLeaf,
       renderText,
       renderPlaceholder = defaultRenderPlaceholder,
@@ -1515,6 +2508,11 @@ var Editable = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   }), []);
   // The autoFocus TextareaHTMLAttribute doesn't do anything on a div, so it
   // needs to be manually focused.
+  //
+  // If this stops working in Firefox, make sure nothing is causing this
+  // component to re-render during the initial mount. If the DOM selection is
+  // set by `useIsomorphicLayoutEffect` before `onDOMSelectionChange` updates
+  // `editor.selection`, the DOM selection can be removed accidentally.
   useEffect(() => {
     if (ref.current && autoFocus) {
       ref.current.focus();
@@ -2067,6 +3065,7 @@ var Editable = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     };
   }, [scheduleOnDOMSelectionChange, state]);
   var decorations = decorate([editor, []]);
+  var decorateContext = useDecorateContext(decorate);
   var showPlaceholder = placeholder && editor.children.length === 1 && Array.from(Node.texts(editor)).length === 1 && Node.string(editor) === '' && !isComposing;
   var placeHolderResizeHandler = useCallback(placeholderEl => {
     if (placeholderEl && showPlaceholder) {
@@ -2135,12 +3134,13 @@ var Editable = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       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
@@ -2725,10 +3725,10 @@ var Editable = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     decorations: decorations,
     node: editor,
     renderElement: renderElement,
+    renderChunk: renderChunk,
     renderPlaceholder: renderPlaceholder,
     renderLeaf: renderLeaf,
-    renderText: renderText,
-    selection: editor.selection
+    renderText: renderText
   }))))));
 });
 /**
@@ -2825,118 +3825,6 @@ var useFocused = () => {
   return 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__*/createContext({});
-var refEquality = (a, b) => 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 [, forceRender] = useReducer(s => s + 1, 0);
-  var context = useContext(SlateSelectorContext);
-  if (!context) {
-    throw new Error("The `useSlateSelector` hook must be used inside the <Slate> component's context.");
-  }
-  var {
-    getSlate,
-    addEventListener
-  } = context;
-  var latestSubscriptionCallbackError = useRef();
-  var latestSelector = useRef(() => null);
-  var latestSelectedState = 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(() => {
-    latestSelector.current = selector;
-    latestSelectedState.current = selectedState;
-    latestSubscriptionCallbackError.current = undefined;
-  });
-  useIsomorphicLayoutEffect(() => {
-    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 () => 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 = useRef([]).current;
-  var slateRef = useRef({
-    editor
-  }).current;
-  var onChange = useCallback(editor => {
-    slateRef.editor = editor;
-    eventListeners.forEach(listener => listener(editor));
-  }, [eventListeners, slateRef]);
-  var selectorContext = useMemo(() => {
-    return {
-      getSlate: () => slateRef.editor,
-      addEventListener: callback => {
-        eventListeners.push(callback);
-        return () => {
-          eventListeners.splice(eventListeners.indexOf(callback), 1);
-        };
-      }
-    };
-  }, [eventListeners, slateRef]);
-  return {
-    selectorContext,
-    onChange
-  };
-}
-
 var REACT_MAJOR_VERSION = parseInt(React.version.split('.')[0], 10);
 
 var _excluded = ["editor", "children", "onChange", "onSelectionChange", "onValueChange", "initialValue"];
@@ -2954,7 +3842,8 @@ var Slate = props => {
       initialValue
     } = props,
     rest = _objectWithoutProperties(props, _excluded);
-  var [context, setContext] = React.useState(() => {
+  // Run once on first mount, but before `useEffect` or render
+  React.useState(() => {
     if (!Node.isNodeList(initialValue)) {
       throw new Error("[Slate] initialValue is invalid! Expected a list of elements but got: ".concat(Scrubber.stringify(initialValue)));
     }
@@ -2963,15 +3852,11 @@ var Slate = props => {
     }
     editor.children = initialValue;
     Object.assign(editor, rest);
-    return {
-      v: 0,
-      editor
-    };
   });
   var {
     selectorContext,
     onChange: handleSelectorChange
-  } = useSelectorContext(editor);
+  } = useSelectorContext();
   var onContextChange = useCallback(options => {
     var _options$operation;
     if (onChange) {
@@ -2984,11 +3869,7 @@ var Slate = props => {
       default:
         onValueChange === null || onValueChange === void 0 || onValueChange(editor.children);
     }
-    setContext(prevContext => ({
-      v: prevContext.v + 1,
-      editor
-    }));
-    handleSelectorChange(editor);
+    handleSelectorChange();
   }, [editor, handleSelectorChange, onChange, onSelectionChange, onValueChange]);
   useEffect(() => {
     EDITOR_TO_ON_CHANGE.set(editor, onContextChange);
@@ -3023,13 +3904,11 @@ var Slate = props => {
   }, []);
   return /*#__PURE__*/React.createElement(SlateSelectorContext.Provider, {
     value: selectorContext
-  }, /*#__PURE__*/React.createElement(SlateContext.Provider, {
-    value: context
   }, /*#__PURE__*/React.createElement(EditorContext.Provider, {
-    value: context.editor
+    value: editor
   }, /*#__PURE__*/React.createElement(FocusedContext.Provider, {
     value: isFocused
-  }, children))));
+  }, children)));
 };
 
 /**
@@ -3044,6 +3923,31 @@ var useEditor = () => {
   return editor;
 };
 
+/**
+ * Get the current `selected` state of an element.
+ */
+var 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 = useCallback(editor => {
+    if (!editor.selection) return false;
+    var path = ReactEditor.findPath(editor, element);
+    var range = Editor.range(editor, path);
+    return !!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
@@ -3070,8 +3974,10 @@ var withReact = function withReact(editor) {
   var e = editor;
   e = withDOM(e, clipboardFormatKey);
   var {
-    onChange
+    onChange,
+    apply
   } = e;
+  e.getChunkSize = () => null;
   e.onChange = 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
@@ -3083,8 +3989,24 @@ var withReact = function withReact(editor) {
       onChange(options);
     });
   };
+  // On move_node, if the chunking optimization is enabled for the parent of the
+  // node being moved, add the moved node to the movedNodeKeys set of the
+  // parent's chunk tree.
+  e.apply = operation => {
+    if (operation.type === 'move_node') {
+      var parent = Node.parent(e, operation.path);
+      var chunking = !!e.getChunkSize(parent);
+      if (chunking) {
+        var node = Node.get(e, operation.path);
+        var chunkTree = getChunkTreeForNode(e, parent);
+        var key = ReactEditor.findKey(e, node);
+        chunkTree.movedNodeKeys.add(key);
+      }
+    }
+    apply(operation);
+  };
   return e;
 };
 
-export { DefaultElement, DefaultLeaf, DefaultPlaceholder, DefaultText, Editable, ReactEditor, Slate, useComposing, useEditor, useFocused, useReadOnly, useSelected, useSlate, useSlateSelection, useSlateSelector, useSlateStatic, useSlateWithV, withReact };
+export { DefaultElement, DefaultLeaf, DefaultPlaceholder, DefaultText, Editable, ReactEditor, Slate, useComposing, useEditor, useElement, useElementIf, useFocused, useReadOnly, useSelected, useSlate, useSlateSelection, useSlateSelector, useSlateStatic, useSlateWithV, withReact };
 //# sourceMappingURL=index.es.js.map