Add insertFragmentData and insertTextData to the ReactEditor API (#4614)

* Add insertFragmentData and insertTextData to the ReactEditor API

* Add patch changeset

* Docs for insertFragment and insertTextData

.changeset/three-rings-provide.md

@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Add insertFragmentData and insertTextData to the ReactEditor API

docs/libraries/slate-react.md

@@ -138,7 +138,15 @@ Check if a DOM node is within the editor.
 
 ### `insertData(editor: ReactEditor, data: DataTransfer)`
 
-Insert data from a `DataTransfer` into the editor.
+Insert data from a `DataTransfer` into the editor. This is a proxy method to call in this order `insertFragmentData(editor: ReactEditor, data: DataTransfer)` and then `insertTextData(editor: ReactEditor, data: DataTransfer)`.
+
+### `insertFragmentData(editor: ReactEditor, data: DataTransfer)`
+
+Insert fragment data from a `DataTransfer` into the editor.
+
+### `insertTextData(editor: ReactEditor, data: DataTransfer)`
+
+Insert text data from a `DataTransfer` into the editor.
 
 ### `setFragmentData(editor: ReactEditor, data: DataTransfer)`
 

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

@@ -32,6 +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
   setFragmentData: (data: DataTransfer) => void
   hasRange: (editor: ReactEditor, range: Range) => boolean
 }

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

@@ -195,6 +195,11 @@ export const withReact = <T extends Editor>(editor: T) => {
   }
 
   e.insertData = (data: DataTransfer) => {
+    e.insertFragmentData(data)
+    e.insertTextData(data)
+  }
+
+  e.insertFragmentData = (data: DataTransfer) => {
     /**
      * Checking copied fragment from application/x-slate-fragment or data-slate-fragment
      */
@@ -208,7 +213,9 @@ export const withReact = <T extends Editor>(editor: T) => {
       e.insertFragment(parsed)
       return
     }
+  }
 
+  e.insertTextData = (data: DataTransfer) => {
     const text = data.getData('text/plain')
 
     if (text) {