mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-02-24 01:02:31 +01:00
Code Issues Releases Wiki Activity

fix onPaste handler on Chrome / Safari (#3396)

Browse Source 
* 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 <ian@ianstormtaylor.com>
This commit is contained in:
cvlmtg 2021-04-01 00:34:04 +02:00 committed by GitHub
parent 7fe41f1566
commit 469e6b26f5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/real-suns-matter.md Normal file
View File

@ -0,0 +1,5 @@
---
'slate-react': patch
---
Fixed allowing the `onPaste` handler to be overridden in all browsers.

24
packages/slate-react/src/components/editable.tsx
View File

@ -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]