slate-react 0.91.11 → 0.92.0-202321717544

package/dist/index.js

@@ -1639,7 +1639,7 @@ var Leaf = function Leaf(props) {
     return function () {
       EDITOR_TO_PLACEHOLDER_ELEMENT["delete"](editor);
     };
-  }, [placeholderRef, leaf]);
+  }, [placeholderRef, leaf, editor]);
   var children = /*#__PURE__*/React__default['default'].createElement(String, {
     isLast: isLast,
     leaf: leaf,
@@ -3636,7 +3636,7 @@ function useMutationObserver(node, callback, options) {
     return function () {
       return mutationObserver.disconnect();
     };
-  }, []);
+  }, [mutationObserver, node, options]);
 }
 
 var _excluded$2 = ["node"];
@@ -3649,7 +3649,9 @@ var MUTATION_OBSERVER_CONFIG = {
   childList: true,
   characterData: true
 };
-function useAndroidInputManager(_ref) {
+var useAndroidInputManager = !IS_ANDROID ? function () {
+  return null;
+} : function (_ref) {
   var node = _ref.node,
       options = _objectWithoutProperties(_ref, _excluded$2);
 
@@ -3676,7 +3678,7 @@ function useAndroidInputManager(_ref) {
   }
 
   return inputManager;
-}
+};
 
 function useTrackUserInput() {
   var editor = useSlateStatic();
@@ -3693,7 +3695,7 @@ function useTrackUserInput() {
     animationFrameIdRef.current = window.requestAnimationFrame(function () {
       receivedUserInput.current = false;
     });
-  }, []);
+  }, [editor]);
   React.useEffect(function () {
     return function () {
       return cancelAnimationFrame(animationFrameIdRef.current);
@@ -3792,65 +3794,79 @@ var Editable = function 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 = React.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 = React.useCallback(throttle__default['default'](function () {
-    if ((IS_ANDROID || !ReactEditor.isComposing(editor)) && (!state.isUpdatingSelection || androidInputManager !== null && androidInputManager !== void 0 && androidInputManager.isFlushing()) && !state.isDraggingInternally) {
-      var root = ReactEditor.findDocumentOrShadowRoot(editor);
-      var activeElement = root.activeElement;
-      var el = ReactEditor.toDOMNode(editor, editor);
-      var domSelection = root.getSelection();
+  var onDOMSelectionChange = React.useMemo(function () {
+    return throttle__default['default'](function () {
+      var androidInputManager = androidInputManagerRef.current;
 
-      if (activeElement === el) {
-        state.latestElement = activeElement;
-        IS_FOCUSED.set(editor, true);
-      } else {
-        IS_FOCUSED["delete"](editor);
-      }
+      if ((IS_ANDROID || !ReactEditor.isComposing(editor)) && (!state.isUpdatingSelection || androidInputManager !== null && androidInputManager !== void 0 && androidInputManager.isFlushing()) && !state.isDraggingInternally) {
+        var root = ReactEditor.findDocumentOrShadowRoot(editor);
+        var activeElement = root.activeElement;
+        var el = ReactEditor.toDOMNode(editor, editor);
+        var domSelection = root.getSelection();
 
-      if (!domSelection) {
-        return slate.Transforms.deselect(editor);
-      }
+        if (activeElement === el) {
+          state.latestElement = activeElement;
+          IS_FOCUSED.set(editor, true);
+        } else {
+          IS_FOCUSED["delete"](editor);
+        }
 
-      var anchorNode = domSelection.anchorNode,
-          focusNode = domSelection.focusNode;
-      var anchorNodeSelectable = ReactEditor.hasEditableTarget(editor, anchorNode) || ReactEditor.isTargetInsideNonReadonlyVoid(editor, anchorNode);
-      var focusNodeSelectable = ReactEditor.hasEditableTarget(editor, focusNode) || ReactEditor.isTargetInsideNonReadonlyVoid(editor, focusNode);
+        if (!domSelection) {
+          return slate.Transforms.deselect(editor);
+        }
 
-      if (anchorNodeSelectable && focusNodeSelectable) {
-        var range = ReactEditor.toSlateRange(editor, domSelection, {
-          exactMatch: false,
-          suppressThrow: true
-        });
+        var anchorNode = domSelection.anchorNode,
+            focusNode = domSelection.focusNode;
+        var anchorNodeSelectable = ReactEditor.hasEditableTarget(editor, anchorNode) || ReactEditor.isTargetInsideNonReadonlyVoid(editor, anchorNode);
+        var focusNodeSelectable = ReactEditor.hasEditableTarget(editor, focusNode) || ReactEditor.isTargetInsideNonReadonlyVoid(editor, focusNode);
 
-        if (range) {
-          if (!ReactEditor.isComposing(editor) && !(androidInputManager !== null && androidInputManager !== void 0 && androidInputManager.hasPendingChanges()) && !(androidInputManager !== null && androidInputManager !== void 0 && androidInputManager.isFlushing())) {
-            slate.Transforms.select(editor, range);
-          } else {
-            androidInputManager === null || androidInputManager === void 0 ? void 0 : androidInputManager.handleUserSelect(range);
+        if (anchorNodeSelectable && focusNodeSelectable) {
+          var range = ReactEditor.toSlateRange(editor, domSelection, {
+            exactMatch: false,
+            suppressThrow: true
+          });
+
+          if (range) {
+            if (!ReactEditor.isComposing(editor) && !(androidInputManager !== null && androidInputManager !== void 0 && androidInputManager.hasPendingChanges()) && !(androidInputManager !== null && androidInputManager !== void 0 && androidInputManager.isFlushing())) {
+              slate.Transforms.select(editor, range);
+            } else {
+              androidInputManager === null || androidInputManager === void 0 ? void 0 : androidInputManager.handleUserSelect(range);
+            }
           }
-        }
-      } // Deselect the editor if the dom selection is not selectable in readonly mode
+        } // Deselect the editor if the dom selection is not selectable in readonly mode
 
 
-      if (readOnly && (!anchorNodeSelectable || !focusNodeSelectable)) {
-        slate.Transforms.deselect(editor);
+        if (readOnly && (!anchorNodeSelectable || !focusNodeSelectable)) {
+          slate.Transforms.deselect(editor);
+        }
       }
-    }
-  }, 100), [readOnly]);
+    }, 100);
+  }, [editor, readOnly, state]);
   var scheduleOnDOMSelectionChange = React.useMemo(function () {
     return debounce__default['default'](onDOMSelectionChange, 0);
   }, [onDOMSelectionChange]);
-  var androidInputManager = useAndroidInputManager({
+  androidInputManagerRef.current = useAndroidInputManager({
     node: ref,
     onDOMSelectionChange: onDOMSelectionChange,
     scheduleOnDOMSelectionChange: scheduleOnDOMSelectionChange
   });
   useIsomorphicLayoutEffect(function () {
+    var _androidInputManagerR, _androidInputManagerR2;
+
     // Update element-related weak maps with the DOM element ref.
     var window;
 
@@ -3868,7 +3884,7 @@ var Editable = function 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;
     }
 
@@ -3944,7 +3960,7 @@ var Editable = function 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(function () {
@@ -4005,8 +4021,8 @@ var Editable = function 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.
@@ -4266,7 +4282,7 @@ var Editable = function Editable(props) {
         slate.Transforms.select(editor, toRestore);
       }
     }
-  }, [readOnly, propsOnDOMBeforeInput]);
+  }, [editor, onDOMSelectionChange, onUserInput, propsOnDOMBeforeInput, readOnly, scheduleOnDOMSelectionChange]);
   var callbackRef = React.useCallback(function (node) {
     if (node == null) {
       onDOMSelectionChange.cancel();
@@ -4290,7 +4306,7 @@ var Editable = function 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)
@@ -4416,14 +4432,14 @@ var Editable = function Editable(props) {
           slate.Editor.insertText(editor, _text2);
         }
       }
-    }, [readOnly]),
+    }, [attributes.onBeforeInput, editor, readOnly]),
     onInput: React.useCallback(function (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
@@ -4446,7 +4462,7 @@ var Editable = function Editable(props) {
       }
 
       deferredOperations.current = [];
-    }, []),
+    }, [attributes.onInput]),
     onBlur: React.useCallback(function (event) {
       if (readOnly || state.isUpdatingSelection || !ReactEditor.hasSelectableTarget(editor, event.target) || isEventHandled(event, attributes.onBlur)) {
         return;
@@ -4497,7 +4513,7 @@ var Editable = function Editable(props) {
       }
 
       IS_FOCUSED["delete"](editor);
-    }, [readOnly, attributes.onBlur]),
+    }, [readOnly, state.isUpdatingSelection, state.latestElement, editor, attributes.onBlur]),
     onClick: React.useCallback(function (event) {
       if (ReactEditor.hasTarget(editor, event.target) && !isEventHandled(event, attributes.onClick) && isDOMNode(event.target)) {
         var node = ReactEditor.toSlateNode(editor, event.target);
@@ -4550,15 +4566,17 @@ var Editable = function Editable(props) {
           slate.Transforms.select(editor, _range);
         }
       }
-    }, [readOnly, attributes.onClick]),
+    }, [editor, attributes.onClick, readOnly]),
     onCompositionEnd: React.useCallback(function (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;
@@ -4586,7 +4604,7 @@ var Editable = function Editable(props) {
           }
         }
       }
-    }, [attributes.onCompositionEnd]),
+    }, [attributes.onCompositionEnd, editor]),
     onCompositionUpdate: React.useCallback(function (event) {
       if (ReactEditor.hasSelectableTarget(editor, event.target) && !isEventHandled(event, attributes.onCompositionUpdate)) {
         if (!ReactEditor.isComposing(editor)) {
@@ -4594,10 +4612,12 @@ var Editable = function Editable(props) {
           IS_COMPOSING.set(editor, true);
         }
       }
-    }, [attributes.onCompositionUpdate]),
+    }, [attributes.onCompositionUpdate, editor]),
     onCompositionStart: React.useCallback(function (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;
@@ -4633,15 +4653,15 @@ var Editable = function Editable(props) {
           }
         }
       }
-    }, [attributes.onCompositionStart]),
+    }, [attributes.onCompositionStart, editor]),
     onCopy: React.useCallback(function (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: React.useCallback(function (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 selection = editor.selection;
@@ -4658,7 +4678,7 @@ var Editable = function Editable(props) {
           }
         }
       }
-    }, [readOnly, attributes.onCut]),
+    }, [readOnly, editor, attributes.onCut]),
     onDragOver: React.useCallback(function (event) {
       if (ReactEditor.hasTarget(editor, event.target) && !isEventHandled(event, attributes.onDragOver)) {
         // Only when the target is void, call `preventDefault` to signal
@@ -4670,7 +4690,7 @@ var Editable = function Editable(props) {
           event.preventDefault();
         }
       }
-    }, [attributes.onDragOver]),
+    }, [attributes.onDragOver, editor]),
     onDragStart: React.useCallback(function (event) {
       if (!readOnly && ReactEditor.hasTarget(editor, event.target) && !isEventHandled(event, attributes.onDragStart)) {
         var node = ReactEditor.toSlateNode(editor, event.target);
@@ -4689,7 +4709,7 @@ var Editable = function Editable(props) {
         state.isDraggingInternally = true;
         ReactEditor.setFragmentData(editor, event.dataTransfer, 'drag');
       }
-    }, [readOnly, attributes.onDragStart]),
+    }, [readOnly, editor, attributes.onDragStart, state]),
     onDrop: React.useCallback(function (event) {
       if (!readOnly && ReactEditor.hasTarget(editor, event.target) && !isEventHandled(event, attributes.onDrop)) {
         event.preventDefault(); // Keep a reference to the dragged range before updating selection
@@ -4720,7 +4740,7 @@ var Editable = function Editable(props) {
       }
 
       state.isDraggingInternally = false;
-    }, [readOnly, attributes.onDrop]),
+    }, [readOnly, editor, attributes.onDrop, state]),
     onDragEnd: React.useCallback(function (event) {
       if (!readOnly && state.isDraggingInternally && attributes.onDragEnd && ReactEditor.hasTarget(editor, event.target)) {
         attributes.onDragEnd(event);
@@ -4730,7 +4750,7 @@ var Editable = function Editable(props) {
 
 
       state.isDraggingInternally = false;
-    }, [readOnly, attributes.onDragEnd]),
+    }, [readOnly, state, attributes, editor]),
     onFocus: React.useCallback(function (event) {
       if (!readOnly && !state.isUpdatingSelection && ReactEditor.hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onFocus)) {
         var el = ReactEditor.toDOMNode(editor, editor);
@@ -4746,10 +4766,12 @@ var Editable = function Editable(props) {
 
         IS_FOCUSED.set(editor, true);
       }
-    }, [readOnly, attributes.onFocus]),
+    }, [readOnly, state, editor, attributes.onFocus]),
     onKeyDown: React.useCallback(function (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.nativeEvent; // COMPAT: The composition end event isn't fired reliably in all browsers,
         // so we sometimes might end up stuck in a composition state even though we
         // aren't composing any more.
@@ -5033,7 +5055,7 @@ var Editable = function Editable(props) {
           }
         }
       }
-    }, [readOnly, attributes.onKeyDown]),
+    }, [readOnly, editor, attributes.onKeyDown]),
     onPaste: React.useCallback(function (event) {
       if (!readOnly && ReactEditor.hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onPaste)) {
         // COMPAT: Certain browsers don't support the `beforeinput` event, so we
@@ -5048,7 +5070,7 @@ var Editable = function Editable(props) {
           ReactEditor.insertData(editor, event.clipboardData);
         }
       }
-    }, [readOnly, attributes.onPaste])
+    }, [readOnly, editor, attributes.onPaste])
   }), /*#__PURE__*/React__default['default'].createElement(Children, {
     decorations: decorations,
     node: editor,
@@ -5116,6 +5138,13 @@ var isEventHandled = function isEventHandled(event, handler) {
 
   return event.isDefaultPrevented() || event.isPropagationStopped();
 };
+/**
+ * Check if the event's target is an input element
+ */
+
+var isDOMEventTargetInput = function isDOMEventTargetInput(event) {
+  return isDOMNode(event.target) && (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement);
+};
 /**
  * Check if a DOM event is overrided by a handler.
  */
@@ -5250,7 +5279,7 @@ function useSlateSelector(selector) {
  * Create selector context with editor updating on every editor change
  */
 
-function getSelectorContext(editor) {
+function useSelectorContext(editor) {
   var eventListeners = React.useRef([]).current;
   var slateRef = React.useRef({
     editor: editor
@@ -5260,7 +5289,7 @@ function getSelectorContext(editor) {
     eventListeners.forEach(function (listener) {
       return listener(editor);
     });
-  }, []);
+  }, [eventListeners, slateRef]);
   var selectorContext = React.useMemo(function () {
     return {
       getSlate: function getSlate() {
@@ -5315,9 +5344,9 @@ var Slate = function Slate(props) {
       context = _React$useState2[0],
       setContext = _React$useState2[1];
 
-  var _getSelectorContext = getSelectorContext(editor),
-      selectorContext = _getSelectorContext.selectorContext,
-      handleSelectorChange = _getSelectorContext.onChange;
+  var _useSelectorContext = useSelectorContext(editor),
+      selectorContext = _useSelectorContext.selectorContext,
+      handleSelectorChange = _useSelectorContext.onChange;
 
   var onContextChange = React.useCallback(function () {
     if (onChange) {
@@ -5331,14 +5360,14 @@ var Slate = function Slate(props) {
       };
     });
     handleSelectorChange(editor);
-  }, [onChange]);
+  }, [editor, handleSelectorChange, onChange]);
   React.useEffect(function () {
     EDITOR_TO_ON_CHANGE.set(editor, onContextChange);
     return function () {
       EDITOR_TO_ON_CHANGE.set(editor, function () {});
       unmountRef.current = true;
     };
-  }, [onContextChange]);
+  }, [editor, onContextChange]);
 
   var _useState = React.useState(ReactEditor.isFocused(editor)),
       _useState2 = _slicedToArray(_useState, 2),
@@ -5347,7 +5376,7 @@ var Slate = function Slate(props) {
 
   React.useEffect(function () {
     setIsFocused(ReactEditor.isFocused(editor));
-  });
+  }, [editor]);
   useIsomorphicLayoutEffect(function () {
     var fn = function fn() {
       return setIsFocused(ReactEditor.isFocused(editor));