Read data-slate-fragment when application/x-slate-fragment is missing (#4454)

* fix missing slate-fragment onpaste ion safari

* add changeset

.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

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) &&

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))

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 getClipboardData = (dataTransfer: DataTransfer): DataTransfer => {
+export const getSlateFragmentAttribute = (
-  if (!dataTransfer.getData('application/x-slate-fragment')) {
+  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 fragment = getSlateFragmentAttribute(dataTransfer)
     if (fragment) {
       const clipboardData = new DataTransfer()
       dataTransfer.types.forEach(type => {