slate-react 0.70.1-2021109235946 → 0.70.2

package/CHANGELOG.md

@@ -1,9 +1,21 @@
 # slate-react
 
-## 0.70.1-2021109235946
+## 0.70.2
 
 ### Patch Changes
 
+- [#4669](https://github.com/ianstormtaylor/slate/pull/4669) [`807716d7`](https://github.com/ianstormtaylor/slate/commit/807716d7dfb0fa5791cdcdfeaf4ac027a003127b) Thanks [@BitPhinix](https://github.com/BitPhinix)! - Flush scheduleOnDOMSelectionChange on beforeinput
+
+* [#4661](https://github.com/ianstormtaylor/slate/pull/4661) [`0f194a86`](https://github.com/ianstormtaylor/slate/commit/0f194a86a08d5de07e58e20fb95c9dc760e9d52d) Thanks [@leoc4e](https://github.com/leoc4e)! - use ownerDocument to create element
+
+## 0.70.1
+
+### Patch Changes
+
+- [#4654](https://github.com/ianstormtaylor/slate/pull/4654) [`2c7750ca`](https://github.com/ianstormtaylor/slate/commit/2c7750cac5949a935a570a9590a82187673b9a44) Thanks [@anho](https://github.com/anho)! - weak guard on DataTransfer to not rely on current window
+
+* [#4652](https://github.com/ianstormtaylor/slate/pull/4652) [`95389ed7`](https://github.com/ianstormtaylor/slate/commit/95389ed7b03487aa066af277afcccba440c32f24) Thanks [@karthikcodes6](https://github.com/karthikcodes6)! - Disabled the auto scroll behaviour when the editor has any active selection
+
 - [#4650](https://github.com/ianstormtaylor/slate/pull/4650) [`b6643132`](https://github.com/ianstormtaylor/slate/commit/b6643132f1f3b64f019a601ee2f44a521c122ad3) Thanks [@e1himself](https://github.com/e1himself)! - Do not disable Grammarly extension in Slate editors
 
 ## 0.70.0

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":"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"}
+{"version":3,"file":"editable.d.ts","sourceRoot":"","sources":["../packages/slate-react/src/components/editable.tsx"],"names":[],"mappings":"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"}

package/dist/index.es.js

@@ -1,6 +1,7 @@
 import React, { useRef, useEffect, useLayoutEffect, useContext, createContext, useState, useMemo, useCallback } from 'react';
 import { Path, Node, Editor, Text as Text$1, Range, Element as Element$1, Transforms } from 'slate';
 import getDirection from 'direction';
+import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { isKeyHotkey } from 'is-hotkey';
@@ -1075,13 +1076,59 @@ var Editable$1 = props => {
     if (ref.current && autoFocus) {
       ref.current.focus();
     }
-  }, [autoFocus]); // Listen on the native `beforeinput` event to get real "Level 2" events. This
+  }, [autoFocus]); // 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(() => {
+    if (!state.isComposing && !state.isUpdatingSelection && !state.isDraggingInternally) {
+      var root = ReactEditor.findDocumentOrShadowRoot(editor);
+      var {
+        activeElement
+      } = root;
+      var el = ReactEditor.toDOMNode(editor, editor);
+      var domSelection = root.getSelection();
+
+      if (activeElement === el) {
+        state.latestElement = activeElement;
+        IS_FOCUSED.set(editor, true);
+      } else {
+        IS_FOCUSED.delete(editor);
+      }
+
+      if (!domSelection) {
+        return Transforms.deselect(editor);
+      }
+
+      var {
+        anchorNode,
+        focusNode
+      } = domSelection;
+      var anchorNodeSelectable = hasEditableTarget(editor, anchorNode) || isTargetInsideVoid(editor, anchorNode);
+      var focusNodeSelectable = hasEditableTarget(editor, focusNode) || isTargetInsideVoid(editor, focusNode);
+
+      if (anchorNodeSelectable && focusNodeSelectable) {
+        var range = ReactEditor.toSlateRange(editor, domSelection, {
+          exactMatch: false,
+          suppressThrow: false
+        });
+        Transforms.select(editor, range);
+      }
+    }
+  }, 100), [readOnly]);
+  var scheduleOnDOMSelectionChange = useMemo(() => debounce(onDOMSelectionChange, 0), [onDOMSelectionChange]); // Listen on the native `beforeinput` event to get real "Level 2" events. This
   // is required because React's `beforeinput` is fake and never really attaches
   // to the real event sadly. (2019/11/01)
   // https://github.com/facebook/react/issues/11211
 
   var onDOMBeforeInput = useCallback(event => {
     if (!readOnly && hasEditableTarget(editor, event.target) && !isDOMEventHandled(event, propsOnDOMBeforeInput)) {
+      // 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.
+      scheduleOnDOMSelectionChange.flush();
       var {
         selection
       } = editor;
@@ -1266,11 +1313,12 @@ var Editable$1 = props => {
               // https://www.w3.org/TR/input-events-2/
               state.isComposing && setIsComposing(false);
               state.isComposing = false;
-            }
+            } // use a weak comparison instead of 'instanceof' to allow
+            // programmatic access of paste events coming from external windows
+            // like cypress where cy.window does not work realibly
 
-            var window = ReactEditor.getWindow(editor);
 
-            if (data instanceof window.DataTransfer) {
+            if ((data === null || data === void 0 ? void 0 : data.constructor.name) === 'DataTransfer') {
               ReactEditor.insertData(editor, data);
             } else if (typeof data === 'string') {
               // Only insertText operations use the native functionality, for now.
@@ -1303,49 +1351,7 @@ var Editable$1 = props => {
         ref.current.removeEventListener('beforeinput', onDOMBeforeInput);
       }
     };
-  }, [onDOMBeforeInput]); // 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(() => {
-    if (!state.isComposing && !state.isUpdatingSelection && !state.isDraggingInternally) {
-      var root = ReactEditor.findDocumentOrShadowRoot(editor);
-      var {
-        activeElement
-      } = root;
-      var el = ReactEditor.toDOMNode(editor, editor);
-      var domSelection = root.getSelection();
-
-      if (activeElement === el) {
-        state.latestElement = activeElement;
-        IS_FOCUSED.set(editor, true);
-      } else {
-        IS_FOCUSED.delete(editor);
-      }
-
-      if (!domSelection) {
-        return Transforms.deselect(editor);
-      }
-
-      var {
-        anchorNode,
-        focusNode
-      } = domSelection;
-      var anchorNodeSelectable = hasEditableTarget(editor, anchorNode) || isTargetInsideVoid(editor, anchorNode);
-      var focusNodeSelectable = hasEditableTarget(editor, focusNode) || isTargetInsideVoid(editor, focusNode);
-
-      if (anchorNodeSelectable && focusNodeSelectable) {
-        var range = ReactEditor.toSlateRange(editor, domSelection, {
-          exactMatch: false,
-          suppressThrow: false
-        });
-        Transforms.select(editor, range);
-      }
-    }
-  }, 100), [readOnly]);
-  var scheduleOnDOMSelectionChange = useCallback(() => setTimeout(onDOMSelectionChange), [onDOMSelectionChange]); // Attach a native DOM event handler for `selectionchange`, because React's
+  }, [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)
@@ -2017,12 +2023,16 @@ var defaultDecorate = () => [];
  */
 
 var defaultScrollSelectionIntoView = (editor, domRange) => {
-  var leafEl = domRange.startContainer.parentElement;
-  leafEl.getBoundingClientRect = domRange.getBoundingClientRect.bind(domRange);
-  scrollIntoView(leafEl, {
-    scrollMode: 'if-needed'
-  });
-  delete leafEl.getBoundingClientRect;
+  // This was affecting the selection of multiple blocks and dragging behavior,
+  // so enabled only if the selection has been collapsed.
+  if (!editor.selection || editor.selection && Range.isCollapsed(editor.selection)) {
+    var leafEl = domRange.startContainer.parentElement;
+    leafEl.getBoundingClientRect = domRange.getBoundingClientRect.bind(domRange);
+    scrollIntoView(leafEl, {
+      scrollMode: 'if-needed'
+    });
+    delete leafEl.getBoundingClientRect;
+  }
 };
 /**
  * Check if the target is in the editor.
@@ -3963,7 +3973,7 @@ var withReact = editor => {
     // node, wrap it in a `<span>` so we have something to set an attribute on.
 
     if (isDOMText(attach)) {
-      var span = document.createElement('span'); // COMPAT: In Chrome and Safari, if we don't add the `white-space` style
+      var span = attach.ownerDocument.createElement('span'); // COMPAT: In Chrome and Safari, if we don't add the `white-space` style
       // then leading and trailing spaces will be ignored. (2017/09/21)
 
       span.style.whiteSpace = 'pre';
@@ -3978,13 +3988,13 @@ var withReact = editor => {
     attach.setAttribute('data-slate-fragment', encoded);
     data.setData('application/x-slate-fragment', encoded); // Add the content to a <div> so that we can get its inner HTML.
 
-    var div = document.createElement('div');
+    var div = contents.ownerDocument.createElement('div');
     div.appendChild(contents);
     div.setAttribute('hidden', 'true');
-    document.body.appendChild(div);
+    contents.ownerDocument.body.appendChild(div);
     data.setData('text/html', div.innerHTML);
     data.setData('text/plain', getPlainText(div));
-    document.body.removeChild(div);
+    contents.ownerDocument.body.removeChild(div);
     return data;
   };