Read data-slate-fragment when application/x-slate-fragment is missing (…

…#4454) * fix missing slate-fragment onpaste ion safari * add changeset
ianstormtaylor · Aug 13, 2021 · d06706c · d06706c
1 parent 935b3a7
commit d06706c
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 5 deletions.
diff --git a/.changeset/nervous-planes-wonder.md b/.changeset/nervous-planes-wonder.md
@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Fix to read fragment from data-slate-fragment when application/x-slate-fragment is missing
diff --git a/packages/slate-react/src/components/android/android-editable.tsx b/packages/slate-react/src/components/android/android-editable.tsx
@@ -453,8 +453,9 @@ export const AndroidEditable = (props: EditableProps): JSX.Element => {
           )}
           onPaste={useCallback(
             (event: React.ClipboardEvent<HTMLDivElement>) => {
-              // This unfortunately needs to be handled with paste events instead.
+              // this will make application/x-slate-fragment exist when onPaste attributes is passed
               event.clipboardData = getClipboardData(event.clipboardData)
+              // This unfortunately needs to be handled with paste events instead.
               if (
                 hasEditableTarget(editor, event.target) &&
                 !isEventHandled(event, attributes.onPaste) &&

diff --git a/packages/slate-react/src/plugin/with-react.ts b/packages/slate-react/src/plugin/with-react.ts
@@ -9,7 +9,11 @@ import {
   NATIVE_OPERATIONS,
   flushNativeEvents,
 } from '../utils/native'
-import { isDOMText, getPlainText } from '../utils/dom'
+import {
+  isDOMText,
+  getPlainText,
+  getSlateFragmentAttribute,
+} from '../utils/dom'
 import { findCurrentLineRange } from '../utils/lines'
 
 /**
@@ -213,7 +217,12 @@ export const withReact = <T extends Editor>(editor: T) => {
   }
 
   e.insertData = (data: DataTransfer) => {
-    const fragment = data.getData('application/x-slate-fragment')
+    /**
+     * Checking copied fragment from application/x-slate-fragment or data-slate-fragment
+     */
+    const fragment =
+      data.getData('application/x-slate-fragment') ||
+      getSlateFragmentAttribute(data)
 
     if (fragment) {
       const decoded = decodeURIComponent(window.atob(fragment))

diff --git a/packages/slate-react/src/utils/dom.ts b/packages/slate-react/src/utils/dom.ts
@@ -234,11 +234,25 @@ export const getPlainText = (domNode: DOMNode) => {
   return text
 }
 
+/**
+ * Get x-slate-fragment attribute from data-slate-fragment
+ */
 const catchSlateFragment = /data-slate-fragment="(.+?)"/m
+export const getSlateFragmentAttribute = (
+  dataTransfer: DataTransfer
+): string | void => {
+  const htmlData = dataTransfer.getData('text/html')
+  const [, fragment] = htmlData.match(catchSlateFragment) || []
+  return fragment
+}
+
+/**
+ * Get the x-slate-fragment attribute that exist in text/html data
+ * and append it to the DataTransfer object
+ */
 export const getClipboardData = (dataTransfer: DataTransfer): DataTransfer => {
   if (!dataTransfer.getData('application/x-slate-fragment')) {
-    const htmlData = dataTransfer.getData('text/html')
-    const [, fragment] = htmlData.match(catchSlateFragment) || []
+    const fragment = getSlateFragmentAttribute(dataTransfer)
     if (fragment) {
       const clipboardData = new DataTransfer()
       dataTransfer.types.forEach(type => {