slate-react 0.91.11 → 0.92.0-202321717544

package/dist/slate-react.js

@@ -2791,7 +2791,7 @@
 	    return function () {
 	      EDITOR_TO_PLACEHOLDER_ELEMENT["delete"](editor);
 	    };
-	  }, [placeholderRef, leaf]);
+	  }, [placeholderRef, leaf, editor]);
 	  var children = /*#__PURE__*/React__default['default'].createElement(String$1, {
 	    isLast: isLast,
 	    leaf: leaf,
@@ -5044,7 +5044,7 @@
 	    return function () {
 	      return mutationObserver.disconnect();
 	    };
-	  }, []);
+	  }, [mutationObserver, node, options]);
 	}
 
 	var _excluded$2 = ["node"];
@@ -5057,7 +5057,9 @@
 	  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);
 
@@ -5084,7 +5086,7 @@
 	  }
 
 	  return inputManager;
-	}
+	};
 
 	function useTrackUserInput() {
 	  var editor = useSlateStatic();
@@ -5101,7 +5103,7 @@
 	    animationFrameIdRef.current = window.requestAnimationFrame(function () {
 	      receivedUserInput.current = false;
 	    });
-	  }, []);
+	  }, [editor]);
 	  React.useEffect(function () {
 	    return function () {
 	      return cancelAnimationFrame(animationFrameIdRef.current);
@@ -5200,65 +5202,79 @@
 	    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_1(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_1(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_1(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;
 
@@ -5276,7 +5292,7 @@
 	    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;
 	    }
 
@@ -5352,7 +5368,7 @@
 	    };
 
 	    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 () {
@@ -5413,8 +5429,8 @@
 	      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.
@@ -5674,7 +5690,7 @@
 	        slate.Transforms.select(editor, toRestore);
 	      }
 	    }
-	  }, [readOnly, propsOnDOMBeforeInput]);
+	  }, [editor, onDOMSelectionChange, onUserInput, propsOnDOMBeforeInput, readOnly, scheduleOnDOMSelectionChange]);
 	  var callbackRef = React.useCallback(function (node) {
 	    if (node == null) {
 	      onDOMSelectionChange.cancel();
@@ -5698,7 +5714,7 @@
 	    }
 
 	    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)
@@ -5824,14 +5840,14 @@
 	          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
@@ -5854,7 +5870,7 @@
 	      }
 
 	      deferredOperations.current = [];
-	    }, []),
+	    }, [attributes.onInput]),
 	    onBlur: React.useCallback(function (event) {
 	      if (readOnly || state.isUpdatingSelection || !ReactEditor.hasSelectableTarget(editor, event.target) || isEventHandled(event, attributes.onBlur)) {
 	        return;
@@ -5905,7 +5921,7 @@
 	      }
 
 	      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);
@@ -5958,15 +5974,17 @@
 	          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;
@@ -5994,7 +6012,7 @@
 	          }
 	        }
 	      }
-	    }, [attributes.onCompositionEnd]),
+	    }, [attributes.onCompositionEnd, editor]),
 	    onCompositionUpdate: React.useCallback(function (event) {
 	      if (ReactEditor.hasSelectableTarget(editor, event.target) && !isEventHandled(event, attributes.onCompositionUpdate)) {
 	        if (!ReactEditor.isComposing(editor)) {
@@ -6002,10 +6020,12 @@
 	          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;
@@ -6041,15 +6061,15 @@
 	          }
 	        }
 	      }
-	    }, [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;
@@ -6066,7 +6086,7 @@
 	          }
 	        }
 	      }
-	    }, [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
@@ -6078,7 +6098,7 @@
 	          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);
@@ -6097,7 +6117,7 @@
 	        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
@@ -6128,7 +6148,7 @@
 	      }
 
 	      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);
@@ -6138,7 +6158,7 @@
 
 
 	      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);
@@ -6154,10 +6174,12 @@
 
 	        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.
@@ -6441,7 +6463,7 @@
 	          }
 	        }
 	      }
-	    }, [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
@@ -6456,7 +6478,7 @@
 	          ReactEditor.insertData(editor, event.clipboardData);
 	        }
 	      }
-	    }, [readOnly, attributes.onPaste])
+	    }, [readOnly, editor, attributes.onPaste])
 	  }), /*#__PURE__*/React__default['default'].createElement(Children, {
 	    decorations: decorations,
 	    node: editor,
@@ -6524,6 +6546,13 @@
 
 	  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.
 	 */
@@ -6658,7 +6687,7 @@
 	 * 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
@@ -6668,7 +6697,7 @@
 	    eventListeners.forEach(function (listener) {
 	      return listener(editor);
 	    });
-	  }, []);
+	  }, [eventListeners, slateRef]);
 	  var selectorContext = React.useMemo(function () {
 	    return {
 	      getSlate: function getSlate() {
@@ -6723,9 +6752,9 @@
 	      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) {
@@ -6739,14 +6768,14 @@
 	      };
 	    });
 	    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),
@@ -6755,7 +6784,7 @@
 
 	  React.useEffect(function () {
 	    setIsFocused(ReactEditor.isFocused(editor));
-	  });
+	  }, [editor]);
 	  useIsomorphicLayoutEffect(function () {
 	    var fn = function fn() {
 	      return setIsFocused(ReactEditor.isFocused(editor));