fix onPaste handler on Chrome / Safari (#3396)

* fix onDOMBeforeInput callback definition * fix onPaste on chrome / safari * improve comment * Update editable.tsx * Create real-suns-matter.md Co-authored-by: Ian Storm Taylor <[email protected]>
ianstormtaylor · Mar 31, 2021 · 469e6b2 · 469e6b2
1 parent 7fe41f1
commit 469e6b2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 11 deletions.
diff --git a/.changeset/real-suns-matter.md b/.changeset/real-suns-matter.md
@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Fixed allowing the `onPaste` handler to be overridden in all browsers.
diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx
@@ -1017,20 +1017,22 @@ export const Editable = (props: EditableProps) => {
         )}
         onPaste={useCallback(
           (event: React.ClipboardEvent<HTMLDivElement>) => {
-            // COMPAT: Certain browsers don't support the `beforeinput` event, so we
-            // fall back to React's `onPaste` here instead.
-            // COMPAT: Firefox, Chrome and Safari are not emitting `beforeinput` events
-            // when "paste without formatting" option is used.
-            // This unfortunately needs to be handled with paste events instead.
             if (
+              !readOnly &&
               hasEditableTarget(editor, event.target) &&
-              !isEventHandled(event, attributes.onPaste) &&
-              (!HAS_BEFORE_INPUT_SUPPORT ||
-                isPlainTextOnlyPaste(event.nativeEvent)) &&
-              !readOnly
+              !isEventHandled(event, attributes.onPaste)
             ) {
-              event.preventDefault()
-              ReactEditor.insertData(editor, event.clipboardData)
+              // COMPAT: Certain browsers don't support the `beforeinput` event, so we
+              // fall back to React's `onPaste` here instead.
+              // COMPAT: Firefox, Chrome and Safari don't emit `beforeinput` events
+              // when "paste without formatting" is used, so fallback. (2020/02/20)
+              if (
+                !HAS_BEFORE_INPUT_SUPPORT ||
+                isPlainTextOnlyPaste(event.nativeEvent)
+              ) {
+                event.preventDefault()
+                ReactEditor.insertData(editor, event.clipboardData)
+              }
             }
           },
           [readOnly, attributes.onPaste]