fix: Safari paste image base64 and blob (#524)

* fix: fixed the issue with upload image urls in the Safari browser * revert: delete async --------- Co-authored-by: cycleccc <[email protected]>
wangeditor-next · Jan 25, 2025 · 68800af · 68800af
1 parent 781f037
commit 68800af
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 68 deletions.
diff --git a/packages/core/src/editor/helper.ts b/packages/core/src/editor/helper.ts
diff --git a/packages/core/src/editor/plugins/with-event-data.ts b/packages/core/src/editor/plugins/with-event-data.ts
@@ -9,9 +9,7 @@ import {
 
 import { IDomEditor } from '../..'
 import { getPlainText, isDOMText } from '../../utils/dom'
-import { IS_SAFARI } from '../../utils/ua'
 import { DomEditor } from '../dom-editor'
-import { convertBlobUrlToBase64, extractBlobUrlFromImg } from '../helper'
 
 export const withEventData = <T extends Editor>(editor: T) => {
   const e = editor as T & IDomEditor
@@ -108,7 +106,7 @@ export const withEventData = <T extends Editor>(editor: T) => {
     return data
   }
 
-  e.insertData = async (data: DataTransfer) => {
+  e.insertData = (data: DataTransfer) => {
     const fragment = data.getData('application/x-slate-fragment')
     // 只有从编辑器中内复制的内容，才会获取 fragment，从其他地方粘贴到编辑器中，不会获取 fragment
 
@@ -121,23 +119,9 @@ export const withEventData = <T extends Editor>(editor: T) => {
     }
 
     const text = data.getData('text/plain')
-    let html = data.getData('text/html')
+    const html = data.getData('text/html')
     // const rtf = data.getData('text/rtf')
 
-    if (IS_SAFARI) {
-      const blobUrl = extractBlobUrlFromImg(html)
-
-      if (blobUrl) {
-        const base64Data = await convertBlobUrlToBase64(blobUrl)
-
-        if (base64Data) {
-          html = `<img src="${base64Data}" alt="image.png">`
-
-          URL.revokeObjectURL(blobUrl)
-        }
-      }
-    }
-
     if (html) {
       e.dangerouslyInsertHtml(html)
       return

diff --git a/packages/core/src/text-area/event-handlers/paste.ts b/packages/core/src/text-area/event-handlers/paste.ts
@@ -4,25 +4,26 @@
  */
 
 import { IDomEditor } from '../../editor/interface'
-import { DomEditor } from '../../editor/dom-editor'
-import TextArea from '../TextArea'
-import { hasEditableTarget } from '../helpers'
 import { isPlainTextOnlyPaste } from '../../utils/dom'
-import { HAS_BEFORE_INPUT_SUPPORT } from '../../utils/ua'
+import { HAS_BEFORE_INPUT_SUPPORT, IS_SAFARI } from '../../utils/ua'
 import { EDITOR_TO_CAN_PASTE } from '../../utils/weak-maps'
+import { hasEditableTarget } from '../helpers'
+import TextArea from '../TextArea'
 
 function handleOnPaste(e: Event, textarea: TextArea, editor: IDomEditor) {
   EDITOR_TO_CAN_PASTE.set(editor, true) // 标记为：可执行默认粘贴
 
   const event = e as ClipboardEvent
   const { readOnly } = editor.getConfig()
 
-  if (readOnly) return
-  if (!hasEditableTarget(editor, event.target)) return
+  if (readOnly) { return }
+  if (!hasEditableTarget(editor, event.target)) { return }
 
   const { customPaste } = editor.getConfig()
+
   if (customPaste) {
     const res = customPaste(editor, event)
+
     if (res === false) {
       // 自行实现粘贴，不执行默认粘贴
       EDITOR_TO_CAN_PASTE.set(editor, false) // 标记为：不可执行默认粘贴
@@ -32,12 +33,13 @@ function handleOnPaste(e: Event, textarea: TextArea, editor: IDomEditor) {
 
   // 如果支持 beforeInput 且不是纯粘贴文本（如 html、图片文件），则使用 beforeInput 来实现
   // 这里只处理：不支持 beforeInput 或者 粘贴纯文本
-  if (HAS_BEFORE_INPUT_SUPPORT && !isPlainTextOnlyPaste(event)) return
+  if (!IS_SAFARI && HAS_BEFORE_INPUT_SUPPORT && !isPlainTextOnlyPaste(event)) { return }
 
   event.preventDefault()
 
   const data = event.clipboardData
-  if (data == null) return
+
+  if (data == null) { return }
   editor.insertData(data)
 }