From 0b7644e975266db831c45f6bb6a4fb9b045bdf5f Mon Sep 17 00:00:00 2001
From: cvlmtg <cvlmtg@users.noreply.github.com>
Date: Wed, 18 Dec 2019 17:15:17 +0100
Subject: [PATCH] fix onBeforeInput memoization (#3347)

* fix memoization of onBeforeInput callback

* fix lint

* fix callbacks dependencies
---
 .../slate-react/src/components/editable.tsx   | 37 ++++++++++---------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx
index 84dd2ec3a..3d0fd31a7 100644
--- a/packages/slate-react/src/components/editable.tsx
+++ b/packages/slate-react/src/components/editable.tsx
@@ -433,16 +433,19 @@ export const Editable = (props: EditableProps) => {
           // Allow for passed-in styles to override anything.
           ...style,
         }}
-        onBeforeInput={useCallback((event: React.SyntheticEvent) => {
-          // COMPAT: Firefox doesn't support the `beforeinput` event, so we
-          // fall back to React's leaky polyfill instead just for it. It
-          // only works for the `insertText` input type.
-          if (IS_FIREFOX && !readOnly) {
-            event.preventDefault()
-            const text = (event as any).data as string
-            editor.exec({ type: 'insert_text', text })
-          }
-        }, [])}
+        onBeforeInput={useCallback(
+          (event: React.SyntheticEvent) => {
+            // COMPAT: Firefox doesn't support the `beforeinput` event, so we
+            // fall back to React's leaky polyfill instead just for it. It
+            // only works for the `insertText` input type.
+            if (IS_FIREFOX && !readOnly) {
+              event.preventDefault()
+              const text = (event as any).data as string
+              editor.exec({ type: 'insert_text', text })
+            }
+          },
+          [readOnly]
+        )}
         onBlur={useCallback(
           (event: React.FocusEvent<HTMLDivElement>) => {
             if (
@@ -498,7 +501,7 @@ export const Editable = (props: EditableProps) => {
 
             IS_FOCUSED.delete(editor)
           },
-          [attributes.onBlur]
+          [readOnly, attributes.onBlur]
         )}
         onClick={useCallback(
           (event: React.MouseEvent<HTMLDivElement>) => {
@@ -518,7 +521,7 @@ export const Editable = (props: EditableProps) => {
               }
             }
           },
-          [attributes.onClick]
+          [readOnly, attributes.onClick]
         )}
         onCompositionEnd={useCallback(
           (event: React.CompositionEvent<HTMLDivElement>) => {
@@ -578,7 +581,7 @@ export const Editable = (props: EditableProps) => {
               }
             }
           },
-          [attributes.onCut]
+          [readOnly, attributes.onCut]
         )}
         onDragOver={useCallback(
           (event: React.DragEvent<HTMLDivElement>) => {
@@ -643,7 +646,7 @@ export const Editable = (props: EditableProps) => {
               }
             }
           },
-          [attributes.onDrop]
+          [readOnly, attributes.onDrop]
         )}
         onFocus={useCallback(
           (event: React.FocusEvent<HTMLDivElement>) => {
@@ -667,7 +670,7 @@ export const Editable = (props: EditableProps) => {
               IS_FOCUSED.set(editor, true)
             }
           },
-          [attributes.onFocus]
+          [readOnly, attributes.onFocus]
         )}
         onKeyDown={useCallback(
           (event: React.KeyboardEvent<HTMLDivElement>) => {
@@ -863,7 +866,7 @@ export const Editable = (props: EditableProps) => {
               }
             }
           },
-          [attributes.onKeyDown]
+          [readOnly, attributes.onKeyDown]
         )}
         onPaste={useCallback(
           (event: React.ClipboardEvent<HTMLDivElement>) => {
@@ -882,7 +885,7 @@ export const Editable = (props: EditableProps) => {
               })
             }
           },
-          [attributes.onPaste]
+          [readOnly, attributes.onPaste]
         )}
       >
         <Children