From 72160fac08fde98d223c9dd2b4263897d23454f6 Mon Sep 17 00:00:00 2001
From: Eric Charles <eric@datalayer.io>
Date: Fri, 22 Oct 2021 15:44:56 +0200
Subject: [PATCH] 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               |  5 +++++
 docs/libraries/slate-react.md                   | 10 +++++++++-
 packages/slate-react/src/plugin/react-editor.ts |  2 ++
 packages/slate-react/src/plugin/with-react.ts   |  7 +++++++
 4 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/three-rings-provide.md

diff --git a/.changeset/three-rings-provide.md b/.changeset/three-rings-provide.md
new file mode 100644
index 000000000..cc453c2bb
--- /dev/null
+++ b/.changeset/three-rings-provide.md
@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Add insertFragmentData and insertTextData to the ReactEditor API
diff --git a/docs/libraries/slate-react.md b/docs/libraries/slate-react.md
index e7c1daff6..6596beb74 100644
--- a/docs/libraries/slate-react.md
+++ b/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)`
 
diff --git a/packages/slate-react/src/plugin/react-editor.ts b/packages/slate-react/src/plugin/react-editor.ts
index d1f45a088..a1ecadc0e 100644
--- a/packages/slate-react/src/plugin/react-editor.ts
+++ b/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
 }
diff --git a/packages/slate-react/src/plugin/with-react.ts b/packages/slate-react/src/plugin/with-react.ts
index e2fbd57ff..39371d0f2 100644
--- a/packages/slate-react/src/plugin/with-react.ts
+++ b/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) {