slate-react 0.91.11 → 0.92.0-202321717544

package/dist/components/editable.d.ts

@@ -73,6 +73,10 @@ export declare const defaultDecorate: (entry: NodeEntry) => Range[];
  * Check if an event is overrided by a handler.
  */
 export declare const isEventHandled: <EventType extends React.SyntheticEvent<unknown, unknown>>(event: EventType, handler?: ((event: EventType) => void | boolean) | undefined) => boolean;
+/**
+ * Check if the event's target is an input element
+ */
+export declare const isDOMEventTargetInput: <EventType extends React.SyntheticEvent<unknown, unknown>>(event: EventType) => boolean;
 /**
  * Check if a DOM event is overrided by a handler.
  */

package/dist/components/editable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editable.d.ts","sourceRoot":"","sources":["../packages/slate-react/src/components/editable.tsx"],"names":[],"mappings":"AAGA,OAAO,KAON,MAAM,OAAO,CAAA;AAEd,OAAO,EAEL,OAAO,EAEP,SAAS,EAET,KAAK,EACL,IAAI,EAEL,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAOpD,OAAO,EAGL,QAAQ,EAMT,MAAM,cAAc,CAAA;AAwCrB;;GAEG;AAEH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,GAAG,CAAA;IACb,OAAO,EAAE,OAAO,CAAA;IAChB,UAAU,EAAE;QACV,iBAAiB,EAAE,SAAS,CAAA;QAC5B,mBAAmB,CAAC,EAAE,IAAI,CAAA;QAC1B,iBAAiB,CAAC,EAAE,IAAI,CAAA;QACxB,GAAG,CAAC,EAAE,KAAK,CAAA;QACX,GAAG,EAAE,GAAG,CAAA;KACT,CAAA;CACF;AAED;;GAEG;AAEH,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,GAAG,CAAA;IACb,IAAI,EAAE,IAAI,CAAA;IACV,IAAI,EAAE,IAAI,CAAA;IACV,UAAU,EAAE;QACV,iBAAiB,EAAE,IAAI,CAAA;KACxB,CAAA;CACF;AAED;;GAEG;AAEH,oBAAY,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,KAAK,EAAE,CAAA;IACxC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,GAAG,CAAC,OAAO,CAAA;IAC1D,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,GAAG,CAAC,OAAO,CAAA;IACpD,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,GAAG,CAAC,OAAO,CAAA;IAClE,uBAAuB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC3E,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B,GAAG,KAAK,CAAC,sBAAsB,CAAC,cAAc,CAAC,CAAA;AAEhD;;GAEG;AAEH,eAAO,MAAM,QAAQ,UAAW,aAAa,gBAg/C5C,CAAA;AAED;;GAEG;AACH,oBAAY,sBAAsB,GAAG;IACnC,QAAQ,EAAE,GAAG,CAAA;IACb,UAAU,EAAE;QACV,wBAAwB,EAAE,OAAO,CAAA;QACjC,GAAG,CAAC,EAAE,KAAK,CAAA;QACX,eAAe,EAAE,OAAO,CAAA;QACxB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA;QACzB,KAAK,EAAE,KAAK,CAAC,aAAa,CAAA;KAC3B,CAAA;CACF,CAAA;AAED;;GAEG;AAEH,eAAO,MAAM,kBAAkB,8BAG5B,sBAAsB,gBAOxB,CAAA;AAED;;GAEG;AAEH,eAAO,MAAM,eAAe,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,KAAK,EAAa,CAAA;AA4BtE;;GAEG;AAEH,eAAO,MAAM,cAAc,gHAIO,IAAI,GAAG,OAAO,yBAc/C,CAAA;AAED;;GAEG;AAEH,eAAO,MAAM,iBAAiB,uDAEJ,IAAI,GAAG,OAAO,yBAevC,CAAA"}
+{"version":3,"file":"editable.d.ts","sourceRoot":"","sources":["../packages/slate-react/src/components/editable.tsx"],"names":[],"mappings":"AAGA,OAAO,KAON,MAAM,OAAO,CAAA;AAEd,OAAO,EAEL,OAAO,EAEP,SAAS,EAET,KAAK,EACL,IAAI,EAEL,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAOpD,OAAO,EAGL,QAAQ,EAMT,MAAM,cAAc,CAAA;AAyCrB;;GAEG;AAEH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,GAAG,CAAA;IACb,OAAO,EAAE,OAAO,CAAA;IAChB,UAAU,EAAE;QACV,iBAAiB,EAAE,SAAS,CAAA;QAC5B,mBAAmB,CAAC,EAAE,IAAI,CAAA;QAC1B,iBAAiB,CAAC,EAAE,IAAI,CAAA;QACxB,GAAG,CAAC,EAAE,KAAK,CAAA;QACX,GAAG,EAAE,GAAG,CAAA;KACT,CAAA;CACF;AAED;;GAEG;AAEH,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,GAAG,CAAA;IACb,IAAI,EAAE,IAAI,CAAA;IACV,IAAI,EAAE,IAAI,CAAA;IACV,UAAU,EAAE;QACV,iBAAiB,EAAE,IAAI,CAAA;KACxB,CAAA;CACF;AAED;;GAEG;AAEH,oBAAY,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,KAAK,EAAE,CAAA;IACxC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,GAAG,CAAC,OAAO,CAAA;IAC1D,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,GAAG,CAAC,OAAO,CAAA;IACpD,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,GAAG,CAAC,OAAO,CAAA;IAClE,uBAAuB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC3E,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B,GAAG,KAAK,CAAC,sBAAsB,CAAC,cAAc,CAAC,CAAA;AAEhD;;GAEG;AAEH,eAAO,MAAM,QAAQ,UAAW,aAAa,gBAohD5C,CAAA;AAED;;GAEG;AACH,oBAAY,sBAAsB,GAAG;IACnC,QAAQ,EAAE,GAAG,CAAA;IACb,UAAU,EAAE;QACV,wBAAwB,EAAE,OAAO,CAAA;QACjC,GAAG,CAAC,EAAE,KAAK,CAAA;QACX,eAAe,EAAE,OAAO,CAAA;QACxB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA;QACzB,KAAK,EAAE,KAAK,CAAC,aAAa,CAAA;KAC3B,CAAA;CACF,CAAA;AAED;;GAEG;AAEH,eAAO,MAAM,kBAAkB,8BAG5B,sBAAsB,gBAOxB,CAAA;AAED;;GAEG;AAEH,eAAO,MAAM,eAAe,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,KAAK,EAAa,CAAA;AA4BtE;;GAEG;AAEH,eAAO,MAAM,cAAc,gHAIO,IAAI,GAAG,OAAO,yBAc/C,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,qBAAqB,yFAUjC,CAAA;AAED;;GAEG;AAEH,eAAO,MAAM,iBAAiB,uDAEJ,IAAI,GAAG,OAAO,yBAevC,CAAA"}

package/dist/hooks/android-input-manager/use-android-input-manager.d.ts

@@ -3,6 +3,6 @@ import { CreateAndroidInputManagerOptions } from './android-input-manager';
 declare type UseAndroidInputManagerOptions = {
     node: RefObject<HTMLElement>;
 } & Omit<CreateAndroidInputManagerOptions, 'editor' | 'onUserInput' | 'receivedUserInput'>;
-export declare function useAndroidInputManager({ node, ...options }: UseAndroidInputManagerOptions): import("./android-input-manager").AndroidInputManager | null;
+export declare const useAndroidInputManager: ({ node, ...options }: UseAndroidInputManagerOptions) => import("./android-input-manager").AndroidInputManager | null;
 export {};
 //# sourceMappingURL=use-android-input-manager.d.ts.map

package/dist/hooks/android-input-manager/use-android-input-manager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-android-input-manager.d.ts","sourceRoot":"","sources":["../../packages/slate-react/src/hooks/android-input-manager/use-android-input-manager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAA;AAI3C,OAAO,EAEL,gCAAgC,EACjC,MAAM,yBAAyB,CAAA;AAIhC,aAAK,6BAA6B,GAAG;IACnC,IAAI,EAAE,SAAS,CAAC,WAAW,CAAC,CAAA;CAC7B,GAAG,IAAI,CACN,gCAAgC,EAChC,QAAQ,GAAG,aAAa,GAAG,mBAAmB,CAC/C,CAAA;AAQD,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,GAAG,OAAO,EACX,EAAE,6BAA6B,gEA2B/B"}
+{"version":3,"file":"use-android-input-manager.d.ts","sourceRoot":"","sources":["../../packages/slate-react/src/hooks/android-input-manager/use-android-input-manager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAA;AAI3C,OAAO,EAEL,gCAAgC,EACjC,MAAM,yBAAyB,CAAA;AAIhC,aAAK,6BAA6B,GAAG;IACnC,IAAI,EAAE,SAAS,CAAC,WAAW,CAAC,CAAA;CAC7B,GAAG,IAAI,CACN,gCAAgC,EAChC,QAAQ,GAAG,aAAa,GAAG,mBAAmB,CAC/C,CAAA;AAQD,eAAO,MAAM,sBAAsB,yBAER,6BAA6B,iEA2BnD,CAAA"}

package/dist/hooks/use-slate-selector.d.ts

@@ -21,7 +21,7 @@ export declare function useSlateSelector<T>(selector: (editor: Editor) => T, equ
 /**
  * Create selector context with editor updating on every editor change
  */
-export declare function getSelectorContext(editor: Editor): {
+export declare function useSelectorContext(editor: Editor): {
     selectorContext: {
         getSlate: () => import("..").ReactEditor;
         addEventListener: (callback: EditorChangeHandler) => () => void;

package/dist/hooks/use-slate-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-slate-selector.d.ts","sourceRoot":"","sources":["../packages/slate-react/src/hooks/use-slate-selector.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAO9B,aAAK,mBAAmB,GAAG,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;AACnD;;GAEG;AAEH,eAAO,MAAM,oBAAoB;cACrB,MAAM,MAAM;iCACO,mBAAmB,KAAK,MAAM,IAAI;EACpD,CAAA;AAIb;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,CAAC,EAC/B,UAAU,GAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAqB,KAuElD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM;;;qCAed,mBAAmB;;uBARd,MAAM;EAiB7C"}
+{"version":3,"file":"use-slate-selector.d.ts","sourceRoot":"","sources":["../packages/slate-react/src/hooks/use-slate-selector.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAO9B,aAAK,mBAAmB,GAAG,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;AACnD;;GAEG;AAEH,eAAO,MAAM,oBAAoB;cACrB,MAAM,MAAM;iCACO,mBAAmB,KAAK,MAAM,IAAI;EACpD,CAAA;AAIb;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,CAAC,EAC/B,UAAU,GAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAqB,KAuElD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM;;;qCAoBd,mBAAmB;;uBAZzC,MAAM;EAqBlB"}

package/dist/index.es.js

@@ -1393,7 +1393,7 @@ var Leaf = props => {
     return () => {
       EDITOR_TO_PLACEHOLDER_ELEMENT.delete(editor);
     };
-  }, [placeholderRef, leaf]);
+  }, [placeholderRef, leaf, editor]);
   var children = /*#__PURE__*/React.createElement(String, {
     isLast: isLast,
     leaf: leaf,
@@ -3176,7 +3176,7 @@ function useMutationObserver(node, callback, options) {
 
     mutationObserver.observe(node.current, options);
     return () => mutationObserver.disconnect();
-  }, []);
+  }, [mutationObserver, node, options]);
 }
 
 var _excluded$2 = ["node"];
@@ -3189,7 +3189,7 @@ var MUTATION_OBSERVER_CONFIG = {
   childList: true,
   characterData: true
 };
-function useAndroidInputManager(_ref) {
+var useAndroidInputManager = !IS_ANDROID ? () => null : _ref => {
   var {
     node
   } = _ref,
@@ -3212,7 +3212,7 @@ function useAndroidInputManager(_ref) {
   }
 
   return inputManager;
-}
+};
 
 function useTrackUserInput() {
   var editor = useSlateStatic();
@@ -3229,7 +3229,7 @@ function useTrackUserInput() {
     animationFrameIdRef.current = window.requestAnimationFrame(() => {
       receivedUserInput.current = false;
     });
-  }, []);
+  }, [editor]);
   useEffect(() => () => cancelAnimationFrame(animationFrameIdRef.current), []);
   return {
     receivedUserInput,
@@ -3297,13 +3297,23 @@ var Editable = props => {
     if (ref.current && autoFocus) {
       ref.current.focus();
     }
-  }, [autoFocus]); // Listen on the native `selectionchange` event to be able to update any time
+  }, [autoFocus]);
+  /**
+   * The AndroidInputManager object has a cyclical dependency on onDOMSelectionChange
+   *
+   * It is defined as a reference to simplify hook dependencies and clarify that
+   * it needs to be initialized.
+   */
+
+  var androidInputManagerRef = useRef(); // Listen on the native `selectionchange` event to be able to update any time
   // the selection changes. This is required because React's `onSelect` is leaky
   // and non-standard so it doesn't fire until after a selection has been
   // released. This causes issues in situations where another change happens
   // while a selection is being dragged.
 
-  var onDOMSelectionChange = useCallback(throttle(() => {
+  var onDOMSelectionChange = useMemo(() => throttle(() => {
+    var androidInputManager = androidInputManagerRef.current;
+
     if ((IS_ANDROID || !ReactEditor.isComposing(editor)) && (!state.isUpdatingSelection || androidInputManager !== null && androidInputManager !== void 0 && androidInputManager.isFlushing()) && !state.isDraggingInternally) {
       var root = ReactEditor.findDocumentOrShadowRoot(editor);
       var {
@@ -3350,14 +3360,16 @@ var Editable = props => {
         Transforms.deselect(editor);
       }
     }
-  }, 100), [readOnly]);
+  }, 100), [editor, readOnly, state]);
   var scheduleOnDOMSelectionChange = useMemo(() => debounce(onDOMSelectionChange, 0), [onDOMSelectionChange]);
-  var androidInputManager = useAndroidInputManager({
+  androidInputManagerRef.current = useAndroidInputManager({
     node: ref,
     onDOMSelectionChange,
     scheduleOnDOMSelectionChange
   });
   useIsomorphicLayoutEffect(() => {
+    var _androidInputManagerR, _androidInputManagerR2;
+
     // Update element-related weak maps with the DOM element ref.
     var window;
 
@@ -3377,7 +3389,7 @@ var Editable = props => {
     var root = ReactEditor.findDocumentOrShadowRoot(editor);
     var domSelection = root.getSelection();
 
-    if (!domSelection || !ReactEditor.isFocused(editor) || androidInputManager !== null && androidInputManager !== void 0 && androidInputManager.hasPendingAction()) {
+    if (!domSelection || !ReactEditor.isFocused(editor) || (_androidInputManagerR = androidInputManagerRef.current) !== null && _androidInputManagerR !== void 0 && _androidInputManagerR.hasPendingAction()) {
       return;
     }
 
@@ -3455,7 +3467,7 @@ var Editable = props => {
     };
 
     var newDomRange = setDomSelection();
-    var ensureSelection = (androidInputManager === null || androidInputManager === void 0 ? void 0 : androidInputManager.isFlushing()) === 'action';
+    var ensureSelection = ((_androidInputManagerR2 = androidInputManagerRef.current) === null || _androidInputManagerR2 === void 0 ? void 0 : _androidInputManagerR2.isFlushing()) === 'action';
 
     if (!IS_ANDROID || !ensureSelection) {
       setTimeout(() => {
@@ -3516,8 +3528,8 @@ var Editable = props => {
       var _EDITOR_TO_USER_SELEC;
 
       // COMPAT: BeforeInput events aren't cancelable on android, so we have to handle them differently using the android input manager.
-      if (androidInputManager) {
-        return androidInputManager.handleDOMBeforeInput(event);
+      if (androidInputManagerRef.current) {
+        return androidInputManagerRef.current.handleDOMBeforeInput(event);
       } // Some IMEs/Chrome extensions like e.g. Grammarly set the selection immediately before
       // triggering a `beforeinput` expecting the change to be applied to the immediately before
       // set selection.
@@ -3772,7 +3784,7 @@ var Editable = props => {
         Transforms.select(editor, toRestore);
       }
     }
-  }, [readOnly, propsOnDOMBeforeInput]);
+  }, [editor, onDOMSelectionChange, onUserInput, propsOnDOMBeforeInput, readOnly, scheduleOnDOMSelectionChange]);
   var callbackRef = useCallback(node => {
     if (node == null) {
       onDOMSelectionChange.cancel();
@@ -3796,7 +3808,7 @@ var Editable = props => {
     }
 
     ref.current = node;
-  }, [ref, onDOMBeforeInput, onDOMSelectionChange, scheduleOnDOMSelectionChange]); // Attach a native DOM event handler for `selectionchange`, because React's
+  }, [onDOMSelectionChange, scheduleOnDOMSelectionChange, editor, onDOMBeforeInput]); // Attach a native DOM event handler for `selectionchange`, because React's
   // built-in `onSelect` handler doesn't fire for all selection changes. It's a
   // leaky polyfill that only fires on keypresses or clicks. Instead, we want to
   // fire for any change to the selection inside the editor. (2019/11/04)
@@ -3932,14 +3944,14 @@ var Editable = props => {
           Editor.insertText(editor, _text2);
         }
       }
-    }, [readOnly]),
+    }, [attributes.onBeforeInput, editor, readOnly]),
     onInput: useCallback(event => {
       if (isEventHandled(event, attributes.onInput)) {
         return;
       }
 
-      if (androidInputManager) {
-        androidInputManager.handleInput();
+      if (androidInputManagerRef.current) {
+        androidInputManagerRef.current.handleInput();
         return;
       } // Flush native operations, as native events will have propogated
       // and we can correctly compare DOM text values in components
@@ -3952,7 +3964,7 @@ var Editable = props => {
       }
 
       deferredOperations.current = [];
-    }, []),
+    }, [attributes.onInput]),
     onBlur: useCallback(event => {
       if (readOnly || state.isUpdatingSelection || !ReactEditor.hasSelectableTarget(editor, event.target) || isEventHandled(event, attributes.onBlur)) {
         return;
@@ -4005,7 +4017,7 @@ var Editable = props => {
       }
 
       IS_FOCUSED.delete(editor);
-    }, [readOnly, attributes.onBlur]),
+    }, [readOnly, state.isUpdatingSelection, state.latestElement, editor, attributes.onBlur]),
     onClick: useCallback(event => {
       if (ReactEditor.hasTarget(editor, event.target) && !isEventHandled(event, attributes.onClick) && isDOMNode(event.target)) {
         var node = ReactEditor.toSlateNode(editor, event.target);
@@ -4056,15 +4068,17 @@ var Editable = props => {
           Transforms.select(editor, _range);
         }
       }
-    }, [readOnly, attributes.onClick]),
+    }, [editor, attributes.onClick, readOnly]),
     onCompositionEnd: useCallback(event => {
       if (ReactEditor.hasSelectableTarget(editor, event.target)) {
+        var _androidInputManagerR3;
+
         if (ReactEditor.isComposing(editor)) {
           setIsComposing(false);
           IS_COMPOSING.set(editor, false);
         }
 
-        androidInputManager === null || androidInputManager === void 0 ? void 0 : androidInputManager.handleCompositionEnd(event);
+        (_androidInputManagerR3 = androidInputManagerRef.current) === null || _androidInputManagerR3 === void 0 ? void 0 : _androidInputManagerR3.handleCompositionEnd(event);
 
         if (isEventHandled(event, attributes.onCompositionEnd) || IS_ANDROID) {
           return;
@@ -4092,7 +4106,7 @@ var Editable = props => {
           }
         }
       }
-    }, [attributes.onCompositionEnd]),
+    }, [attributes.onCompositionEnd, editor]),
     onCompositionUpdate: useCallback(event => {
       if (ReactEditor.hasSelectableTarget(editor, event.target) && !isEventHandled(event, attributes.onCompositionUpdate)) {
         if (!ReactEditor.isComposing(editor)) {
@@ -4100,10 +4114,12 @@ var Editable = props => {
           IS_COMPOSING.set(editor, true);
         }
       }
-    }, [attributes.onCompositionUpdate]),
+    }, [attributes.onCompositionUpdate, editor]),
     onCompositionStart: useCallback(event => {
       if (ReactEditor.hasSelectableTarget(editor, event.target)) {
-        androidInputManager === null || androidInputManager === void 0 ? void 0 : androidInputManager.handleCompositionStart(event);
+        var _androidInputManagerR4;
+
+        (_androidInputManagerR4 = androidInputManagerRef.current) === null || _androidInputManagerR4 === void 0 ? void 0 : _androidInputManagerR4.handleCompositionStart(event);
 
         if (isEventHandled(event, attributes.onCompositionStart) || IS_ANDROID) {
           return;
@@ -4138,15 +4154,15 @@ var Editable = props => {
           }
         }
       }
-    }, [attributes.onCompositionStart]),
+    }, [attributes.onCompositionStart, editor]),
     onCopy: useCallback(event => {
-      if (ReactEditor.hasSelectableTarget(editor, event.target) && !isEventHandled(event, attributes.onCopy)) {
+      if (ReactEditor.hasSelectableTarget(editor, event.target) && !isEventHandled(event, attributes.onCopy) && !isDOMEventTargetInput(event)) {
         event.preventDefault();
         ReactEditor.setFragmentData(editor, event.clipboardData, 'copy');
       }
-    }, [attributes.onCopy]),
+    }, [attributes.onCopy, editor]),
     onCut: useCallback(event => {
-      if (!readOnly && ReactEditor.hasSelectableTarget(editor, event.target) && !isEventHandled(event, attributes.onCut)) {
+      if (!readOnly && ReactEditor.hasSelectableTarget(editor, event.target) && !isEventHandled(event, attributes.onCut) && !isDOMEventTargetInput(event)) {
         event.preventDefault();
         ReactEditor.setFragmentData(editor, event.clipboardData, 'cut');
         var {
@@ -4165,7 +4181,7 @@ var Editable = props => {
           }
         }
       }
-    }, [readOnly, attributes.onCut]),
+    }, [readOnly, editor, attributes.onCut]),
     onDragOver: useCallback(event => {
       if (ReactEditor.hasTarget(editor, event.target) && !isEventHandled(event, attributes.onDragOver)) {
         // Only when the target is void, call `preventDefault` to signal
@@ -4177,7 +4193,7 @@ var Editable = props => {
           event.preventDefault();
         }
       }
-    }, [attributes.onDragOver]),
+    }, [attributes.onDragOver, editor]),
     onDragStart: useCallback(event => {
       if (!readOnly && ReactEditor.hasTarget(editor, event.target) && !isEventHandled(event, attributes.onDragStart)) {
         var node = ReactEditor.toSlateNode(editor, event.target);
@@ -4196,7 +4212,7 @@ var Editable = props => {
         state.isDraggingInternally = true;
         ReactEditor.setFragmentData(editor, event.dataTransfer, 'drag');
       }
-    }, [readOnly, attributes.onDragStart]),
+    }, [readOnly, editor, attributes.onDragStart, state]),
     onDrop: useCallback(event => {
       if (!readOnly && ReactEditor.hasTarget(editor, event.target) && !isEventHandled(event, attributes.onDrop)) {
         event.preventDefault(); // Keep a reference to the dragged range before updating selection
@@ -4227,7 +4243,7 @@ var Editable = props => {
       }
 
       state.isDraggingInternally = false;
-    }, [readOnly, attributes.onDrop]),
+    }, [readOnly, editor, attributes.onDrop, state]),
     onDragEnd: useCallback(event => {
       if (!readOnly && state.isDraggingInternally && attributes.onDragEnd && ReactEditor.hasTarget(editor, event.target)) {
         attributes.onDragEnd(event);
@@ -4237,7 +4253,7 @@ var Editable = props => {
 
 
       state.isDraggingInternally = false;
-    }, [readOnly, attributes.onDragEnd]),
+    }, [readOnly, state, attributes, editor]),
     onFocus: useCallback(event => {
       if (!readOnly && !state.isUpdatingSelection && ReactEditor.hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onFocus)) {
         var el = ReactEditor.toDOMNode(editor, editor);
@@ -4253,10 +4269,12 @@ var Editable = props => {
 
         IS_FOCUSED.set(editor, true);
       }
-    }, [readOnly, attributes.onFocus]),
+    }, [readOnly, state, editor, attributes.onFocus]),
     onKeyDown: useCallback(event => {
       if (!readOnly && ReactEditor.hasEditableTarget(editor, event.target)) {
-        androidInputManager === null || androidInputManager === void 0 ? void 0 : androidInputManager.handleKeyDown(event);
+        var _androidInputManagerR5;
+
+        (_androidInputManagerR5 = androidInputManagerRef.current) === null || _androidInputManagerR5 === void 0 ? void 0 : _androidInputManagerR5.handleKeyDown(event);
         var {
           nativeEvent
         } = event; // COMPAT: The composition end event isn't fired reliably in all browsers,
@@ -4544,7 +4562,7 @@ var Editable = props => {
           }
         }
       }
-    }, [readOnly, attributes.onKeyDown]),
+    }, [readOnly, editor, attributes.onKeyDown]),
     onPaste: useCallback(event => {
       if (!readOnly && ReactEditor.hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onPaste)) {
         // COMPAT: Certain browsers don't support the `beforeinput` event, so we
@@ -4559,7 +4577,7 @@ var Editable = props => {
           ReactEditor.insertData(editor, event.clipboardData);
         }
       }
-    }, [readOnly, attributes.onPaste])
+    }, [readOnly, editor, attributes.onPaste])
   }), /*#__PURE__*/React.createElement(Children, {
     decorations: decorations,
     node: editor,
@@ -4627,6 +4645,13 @@ var isEventHandled = (event, handler) => {
 
   return event.isDefaultPrevented() || event.isPropagationStopped();
 };
+/**
+ * Check if the event's target is an input element
+ */
+
+var isDOMEventTargetInput = event => {
+  return isDOMNode(event.target) && (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement);
+};
 /**
  * Check if a DOM event is overrided by a handler.
  */
@@ -4751,7 +4776,7 @@ function useSlateSelector(selector) {
  * Create selector context with editor updating on every editor change
  */
 
-function getSelectorContext(editor) {
+function useSelectorContext(editor) {
   var eventListeners = useRef([]).current;
   var slateRef = useRef({
     editor
@@ -4759,7 +4784,7 @@ function getSelectorContext(editor) {
   var onChange = useCallback(editor => {
     slateRef.editor = editor;
     eventListeners.forEach(listener => listener(editor));
-  }, []);
+  }, [eventListeners, slateRef]);
   var selectorContext = useMemo(() => {
     return {
       getSlate: () => slateRef.editor,
@@ -4812,7 +4837,7 @@ var Slate = props => {
   var {
     selectorContext,
     onChange: handleSelectorChange
-  } = getSelectorContext(editor);
+  } = useSelectorContext(editor);
   var onContextChange = useCallback(() => {
     if (onChange) {
       onChange(editor.children);
@@ -4823,18 +4848,18 @@ var Slate = props => {
       editor
     }));
     handleSelectorChange(editor);
-  }, [onChange]);
+  }, [editor, handleSelectorChange, onChange]);
   useEffect(() => {
     EDITOR_TO_ON_CHANGE.set(editor, onContextChange);
     return () => {
       EDITOR_TO_ON_CHANGE.set(editor, () => {});
       unmountRef.current = true;
     };
-  }, [onContextChange]);
+  }, [editor, onContextChange]);
   var [isFocused, setIsFocused] = useState(ReactEditor.isFocused(editor));
   useEffect(() => {
     setIsFocused(ReactEditor.isFocused(editor));
-  });
+  }, [editor]);
   useIsomorphicLayoutEffect(() => {
     var fn = () => setIsFocused(ReactEditor.isFocused(editor));