Use lodash throttle instead of debounce for updating selection change (#3355)

* Add lodash

* Switched debounce to lodash/throttle

* Updated yarn.lock

packages/slate-react/package.json

@@ -14,12 +14,12 @@
     "dist/"
   ],
   "dependencies": {
-    "@types/debounce": "^1.2.0",
     "@types/is-hotkey": "^0.1.1",
-    "debounce": "^1.2.0",
+    "@types/lodash": "^4.14.149",
     "direction": "^1.0.3",
     "is-hotkey": "^0.1.6",
     "is-plain-object": "^3.0.0",
+    "lodash": "^4.17.4",
     "scroll-into-view-if-needed": "^2.2.20"
   },
   "devDependencies": {

packages/slate-react/src/components/editable.tsx

@@ -8,7 +8,7 @@ import {
   Text,
   Transforms,
 } from 'slate'
-import debounce from 'debounce'
+import throttle from 'lodash/throttle'
 import scrollIntoView from 'scroll-into-view-if-needed'
 
 import Children from './children'
@@ -348,7 +348,7 @@ export const Editable = (props: EditableProps) => {
   // released. This causes issues in situations where another change happens
   // while a selection is being dragged.
   const onDOMSelectionChange = useCallback(
-    debounce(() => {
+    throttle(() => {
       if (!readOnly && !state.isComposing && !state.isUpdatingSelection) {
         const { activeElement } = window.document
         const el = ReactEditor.toDOMNode(editor, editor)