Fix double insertion due to insertTextData being called when it shoul…

…d not (#4625)

* fix double paste due to insertTextData being called when it should not

* Document return type of insertTextData and insert FragmentData

* Add changeset

.changeset/cool-forks-mix.md

@@ -0,0 +1,5 @@
+---
+'slate-react': minor
+---
+
+insertTextData and insertFragmentData return a boolean (true if some content has been effectively inserted)

docs/libraries/slate-react.md

@@ -142,11 +142,11 @@ Insert data from a `DataTransfer` into the editor. This is a proxy method to cal
 
 ### `insertFragmentData(editor: ReactEditor, data: DataTransfer)`
 
-Insert fragment data from a `DataTransfer` into the editor.
+Insert fragment data from a `DataTransfer` into the editor. Returns true if some content has been effectively inserted.
 
 ### `insertTextData(editor: ReactEditor, data: DataTransfer)`
 
-Insert text data from a `DataTransfer` into the editor.
+Insert text data from a `DataTransfer` into the editor. Returns true if some content has been effectively inserted.
 
 ### `setFragmentData(editor: ReactEditor, data: DataTransfer)`
 

packages/slate-react/src/plugin/react-editor.ts

@@ -32,8 +32,8 @@ import { IS_CHROME, IS_FIREFOX } from '../utils/environment'
 
 export interface ReactEditor extends BaseEditor {
   insertData: (data: DataTransfer) => void
-  insertFragmentData: (data: DataTransfer) => void
-  insertTextData: (data: DataTransfer) => void
+  insertFragmentData: (data: DataTransfer) => boolean
+  insertTextData: (data: DataTransfer) => boolean
   setFragmentData: (data: DataTransfer) => void
   hasRange: (editor: ReactEditor, range: Range) => boolean
 }
@@ -237,16 +237,16 @@ export const ReactEditor = {
    * Insert fragment data from a `DataTransfer` into the editor.
    */
 
-  insertFragmentData(editor: ReactEditor, data: DataTransfer): void {
-    editor.insertFragmentData(data)
+  insertFragmentData(editor: ReactEditor, data: DataTransfer): boolean {
+    return editor.insertFragmentData(data)
   },
 
   /**
    * Insert text data from a `DataTransfer` into the editor.
    */
 
-  insertTextData(editor: ReactEditor, data: DataTransfer): void {
-    editor.insertTextData(data)
+  insertTextData(editor: ReactEditor, data: DataTransfer): boolean {
+    return editor.insertTextData(data)
   },
 
   /**

packages/slate-react/src/plugin/with-react.ts

@@ -195,11 +195,12 @@ export const withReact = <T extends Editor>(editor: T) => {
   }
 
   e.insertData = (data: DataTransfer) => {
-    e.insertFragmentData(data)
-    e.insertTextData(data)
+    if (!e.insertFragmentData(data)) {
+      e.insertTextData(data)
+    }
   }
 
-  e.insertFragmentData = (data: DataTransfer) => {
+  e.insertFragmentData = (data: DataTransfer): boolean => {
     /**
      * Checking copied fragment from application/x-slate-fragment or data-slate-fragment
      */
@@ -211,11 +212,12 @@ export const withReact = <T extends Editor>(editor: T) => {
       const decoded = decodeURIComponent(window.atob(fragment))
       const parsed = JSON.parse(decoded) as Node[]
       e.insertFragment(parsed)
-      return
+      return true
     }
+    return false
   }
 
-  e.insertTextData = (data: DataTransfer) => {
+  e.insertTextData = (data: DataTransfer): boolean => {
     const text = data.getData('text/plain')
 
     if (text) {
@@ -230,7 +232,9 @@ export const withReact = <T extends Editor>(editor: T) => {
         e.insertText(line)
         split = true
       }
+      return true
     }
+    return false
   }
 
   e.onChange = () => {