slate-react 0.110.2 → 0.110.3

package/dist/index.js

@@ -258,6 +258,7 @@ typeof globalThis.InputEvent.prototype.getTargetRanges === 'function';
  * Two weak maps that allow us rebuild a path given a node. They are populated
  * at render time such that after a render occurs we can always backtrack.
  */
+var IS_NODE_MAP_DIRTY = new WeakMap();
 var NODE_TO_INDEX = new WeakMap();
 var NODE_TO_PARENT = new WeakMap();
 /**
@@ -1872,6 +1873,9 @@ function createAndroidInputManager(_ref) {
       clearTimeout(flushTimeoutId);
       flushTimeoutId = null;
     }
+    if (IS_NODE_MAP_DIRTY.get(editor)) {
+      return;
+    }
     var type = event.inputType;
     var targetRange = null;
     var data = event.dataTransfer || event.data || undefined;
@@ -2874,6 +2878,7 @@ var useChildren = function useChildren(props) {
     selection = props.selection;
   var decorate = useDecorate();
   var editor = useSlateStatic();
+  IS_NODE_MAP_DIRTY.set(editor, false);
   var path = ReactEditor.findPath(editor, node);
   var children = [];
   var isLeafBlock = slate.Element.isElement(node) && !editor.isInline(node) && slate.Editor.hasInlines(editor, node);
@@ -3377,6 +3382,10 @@ var Editable = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
   // while a selection is being dragged.
   var onDOMSelectionChange = React.useMemo(function () {
     return throttle(function () {
+      if (IS_NODE_MAP_DIRTY.get(editor)) {
+        onDOMSelectionChange();
+        return;
+      }
       var el = ReactEditor.toDOMNode(editor, editor);
       var root = el.getRootNode();
       if (!processing.current && IS_WEBKIT && root instanceof ShadowRoot) {
@@ -3631,48 +3640,52 @@ var Editable = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       // When there is an inline element, e.g. a link, and you select
       // right after it (the start of the next node).
       selection.anchor.offset !== 0) {
-        var _node$parentElement, _window$getComputedSt;
         _native = true;
         // Skip native if there are marks, as
         // `insertText` will insert a node, not just text.
         if (editor.marks) {
           _native = false;
         }
-        // Chrome also has issues correctly editing the end of anchor elements: https://bugs.chromium.org/p/chromium/issues/detail?id=1259100
-        // Therefore we don't allow native events to insert text at the end of anchor nodes.
-        var anchor = selection.anchor;
-        var _ReactEditor$toDOMPoi = ReactEditor.toDOMPoint(editor, anchor),
-          _ReactEditor$toDOMPoi2 = _slicedToArray(_ReactEditor$toDOMPoi, 2),
-          node = _ReactEditor$toDOMPoi2[0],
-          offset = _ReactEditor$toDOMPoi2[1];
-        var anchorNode = (_node$parentElement = node.parentElement) === null || _node$parentElement === void 0 ? void 0 : _node$parentElement.closest('a');
-        var _window = ReactEditor.getWindow(editor);
-        if (_native && anchorNode && ReactEditor.hasDOMNode(editor, anchorNode)) {
-          var _lastText$textContent;
-          // Find the last text node inside the anchor.
-          var lastText = _window === null || _window === void 0 ? void 0 : _window.document.createTreeWalker(anchorNode, NodeFilter.SHOW_TEXT).lastChild();
-          if (lastText === node && ((_lastText$textContent = lastText.textContent) === null || _lastText$textContent === void 0 ? void 0 : _lastText$textContent.length) === offset) {
-            _native = false;
+        // If the NODE_MAP is dirty, we can't trust the selection anchor (eg ReactEditor.toDOMPoint)
+        if (!IS_NODE_MAP_DIRTY.get(editor)) {
+          var _node$parentElement, _window$getComputedSt;
+          // Chrome also has issues correctly editing the end of anchor elements: https://bugs.chromium.org/p/chromium/issues/detail?id=1259100
+          // Therefore we don't allow native events to insert text at the end of anchor nodes.
+          var anchor = selection.anchor;
+          var _ReactEditor$toDOMPoi = ReactEditor.toDOMPoint(editor, anchor),
+            _ReactEditor$toDOMPoi2 = _slicedToArray(_ReactEditor$toDOMPoi, 2),
+            node = _ReactEditor$toDOMPoi2[0],
+            offset = _ReactEditor$toDOMPoi2[1];
+          var anchorNode = (_node$parentElement = node.parentElement) === null || _node$parentElement === void 0 ? void 0 : _node$parentElement.closest('a');
+          var _window = ReactEditor.getWindow(editor);
+          if (_native && anchorNode && ReactEditor.hasDOMNode(editor, anchorNode)) {
+            var _lastText$textContent;
+            // Find the last text node inside the anchor.
+            var lastText = _window === null || _window === void 0 ? void 0 : _window.document.createTreeWalker(anchorNode, NodeFilter.SHOW_TEXT).lastChild();
+            if (lastText === node && ((_lastText$textContent = lastText.textContent) === null || _lastText$textContent === void 0 ? void 0 : _lastText$textContent.length) === offset) {
+              _native = false;
+            }
           }
-        }
-        // Chrome has issues with the presence of tab characters inside elements with whiteSpace = 'pre'
-        // causing abnormal insert behavior: https://bugs.chromium.org/p/chromium/issues/detail?id=1219139
-        if (_native && node.parentElement && (_window === null || _window === void 0 || (_window$getComputedSt = _window.getComputedStyle(node.parentElement)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.whiteSpace) === 'pre') {
-          var block = slate.Editor.above(editor, {
-            at: anchor.path,
-            match: function match(n) {
-              return slate.Element.isElement(n) && slate.Editor.isBlock(editor, n);
+          // Chrome has issues with the presence of tab characters inside elements with whiteSpace = 'pre'
+          // causing abnormal insert behavior: https://bugs.chromium.org/p/chromium/issues/detail?id=1219139
+          if (_native && node.parentElement && (_window === null || _window === void 0 || (_window$getComputedSt = _window.getComputedStyle(node.parentElement)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.whiteSpace) === 'pre') {
+            var block = slate.Editor.above(editor, {
+              at: anchor.path,
+              match: function match(n) {
+                return slate.Element.isElement(n) && slate.Editor.isBlock(editor, n);
+              }
+            });
+            if (block && slate.Node.string(block[0]).includes('\t')) {
+              _native = false;
             }
-          });
-          if (block && slate.Node.string(block[0]).includes('\t')) {
-            _native = false;
           }
         }
       }
       // COMPAT: For the deleting forward/backward input types we don't want
       // to change the selection because it is the range that will be deleted,
       // and those commands determine that for themselves.
-      if (!type.startsWith('delete') || type.startsWith('deleteBy')) {
+      // If the NODE_MAP is dirty, we can't trust the selection anchor (eg ReactEditor.toDOMPoint via ReactEditor.toSlateRange)
+      if ((!type.startsWith('delete') || type.startsWith('deleteBy')) && !IS_NODE_MAP_DIRTY.get(editor)) {
         var _event$getTargetRange = event.getTargetRanges(),
           _event$getTargetRange2 = _slicedToArray(_event$getTargetRange, 1),
           targetRange = _event$getTargetRange2[0];
@@ -5058,6 +5071,16 @@ var withReact = function withReact(editor) {
         }
     }
     apply(op);
+    switch (op.type) {
+      case 'insert_node':
+      case 'remove_node':
+      case 'merge_node':
+      case 'move_node':
+      case 'split_node':
+        {
+          IS_NODE_MAP_DIRTY.set(e, true);
+        }
+    }
     for (var _i = 0, _matches = matches; _i < _matches.length; _i++) {
       var _matches$_i = _slicedToArray(_matches[_i], 2),
         path = _matches$_i[0],