Feat：调整粘贴逻辑，如果支持操作剪贴板数据，那么以剪贴板数据为准，否则以画布内数据为准

README.md

@@ -519,4 +519,8 @@ const mindMap = new MindMap({
         <img src="./web/src/assets/avatar/xbkkjbs0246658.png" style="width: 50px;height: 50px;" />
         <span>xbkkjbs0246658</span>
     </span>
+    <span>
+        <img src="./web/src/assets/avatar/4399行星元帅.jpg" style="width: 50px;height: 50px;" />
+        <span>4399行星元帅</span>
+    </span>
 </p>

simple-mind-map/src/core/render/Render.js

@@ -33,7 +33,8 @@ import {
   removeRichTextStyes,
   formatGetNodeGeneralization,
   sortNodeList,
-  throttle
+  throttle,
+  checkClipboardReadEnable
 } from '../../utils'
 import { shapeList } from './node/Shape'
 import { lineStyleProps } from '../../theme/default'
@@ -92,12 +93,7 @@ class Render {
     // 文本编辑框，需要再bindEvent之前实例化，否则单击事件只能触发隐藏文本编辑框，而无法保存文本修改
     this.textEdit = new TextEdit(this)
     // 当前复制的数据
-    this.lastBeingCopyData = null
     this.beingCopyData = null
-    this.beingPasteText = ''
-    this.beingPasteImgSize = 0
-    this.currentBeingPasteType = ''
-    this.pasteData = { text: null, img: null }
     // 节点高亮框
     this.highlightBoxNode = null
     this.highlightBoxNodeStyle = null
@@ -195,7 +191,7 @@ class Render {
     })
     // 处理非https下的复制黏贴问题
     // 暂时不启用，因为给页面的其他输入框（比如节点文本编辑框）粘贴内容也会触发，冲突问题暂时没有想到好的解决方法，不可能要求所有输入框都阻止冒泡
-    // if (!navigator.clipboard) {
+    // if (!checkClipboardReadEnable()) {
     //   this.handlePaste = this.handlePaste.bind(this)
     //   window.addEventListener('paste', this.handlePaste)
     //   this.mindMap.on('beforeDestroy', () => {
@@ -434,7 +430,7 @@ class Render {
     })
     // 粘贴节点
     this.mindMap.keyCommand.addShortcut('Control+v', () => {
-      if (navigator.clipboard) this.paste()
+      this.paste()
     })
     // 根节点居中显示
     this.mindMap.keyCommand.addShortcut('Control+Enter', () => {
@@ -1154,8 +1150,6 @@ class Render {
         text = clipboardData.getData('text')
       }
     })
-    this.pasteData.img = img
-    this.pasteData.text = text
     this.paste()
   }
 
@@ -1168,35 +1162,12 @@ class Render {
       disabledClipboard,
       onlyPasteTextWhenHasImgAndText
     } = this.mindMap.opt
-    // 读取剪贴板的文字和图片
+    // 如果支持剪贴板操作，那么以剪贴板数据为准
-    let text = ''
+    if (!disabledClipboard && checkClipboardReadEnable()) {
-    let img = null
-    if (!disabledClipboard) {
       try {
-        const res = navigator.clipboard
+        const res = await getDataFromClipboard()
-          ? await getDataFromClipboard()
+        let text = res.text || ''
-          : this.pasteData
+        let img = res.img || null
-        text = res.text || ''
-        img = res.img || null
-      } catch (error) {
-        errorHandler(ERROR_TYPES.READ_CLIPBOARD_ERROR, error)
-      }
-    }
-    // 检查剪切板数据是否有变化
-    // 通过图片大小来判断图片是否发生变化，可能是不准确的，但是目前没有其他好方法
-    const imgSize = img ? img.size : 0
-    if (this.beingPasteText !== text || this.beingPasteImgSize !== imgSize) {
-      this.currentBeingPasteType = CONSTANTS.PASTE_TYPE.CLIP_BOARD
-      this.beingPasteText = text
-      this.beingPasteImgSize = imgSize
-    }
-    // 检查要粘贴的节点数据是否有变化，节点优先级高于剪切板
-    if (this.lastBeingCopyData !== this.beingCopyData) {
-      this.lastBeingCopyData = this.beingCopyData
-      this.currentBeingPasteType = CONSTANTS.PASTE_TYPE.CANVAS
-    }
-    // 粘贴剪切板的数据
-    if (this.currentBeingPasteType === CONSTANTS.PASTE_TYPE.CLIP_BOARD) {
         // 存在文本，则创建子节点
         if (text) {
           // 判断粘贴的是否是simple-mind-map的数据
@@ -1216,7 +1187,10 @@ class Render {
                 }
               }
             } catch (error) {
-            errorHandler(ERROR_TYPES.CUSTOM_HANDLE_CLIPBOARD_TEXT_ERROR, error)
+              errorHandler(
+                ERROR_TYPES.CUSTOM_HANDLE_CLIPBOARD_TEXT_ERROR,
+                error
+              )
             }
           }
           // 默认处理
@@ -1275,7 +1249,10 @@ class Render {
           try {
             let imgData = null
             // 自定义图片处理函数
-          if (handleNodePasteImg && typeof handleNodePasteImg === 'function') {
+            if (
+              handleNodePasteImg &&
+              typeof handleNodePasteImg === 'function'
+            ) {
               imgData = await handleNodePasteImg(img)
             } else {
               imgData = await loadImage(img)
@@ -1294,8 +1271,12 @@ class Render {
             errorHandler(ERROR_TYPES.LOAD_CLIPBOARD_IMAGE_ERROR, error)
           }
         }
+      } catch (error) {
+        errorHandler(ERROR_TYPES.READ_CLIPBOARD_ERROR, error)
+      }
     } else {
-      // 粘贴节点数据
+      // 禁用剪贴板或不支持剪贴板时
+      // 粘贴画布内的节点数据
       if (this.beingCopyData) {
         this.mindMap.execCommand('PASTE_NODE', this.beingCopyData)
       }

simple-mind-map/src/utils/index.js

@@ -1069,9 +1069,14 @@ export const isSameObject = (a, b) => {
   }
 }
 
+// 检查navigator.clipboard对象的读取是否可用
+export const checkClipboardReadEnable = () => {
+  return navigator.clipboard && typeof navigator.clipboard.read === 'function'
+}
+
 // 将数据设置到用户剪切板中
 export const setDataToClipboard = data => {
-  if (navigator.clipboard) {
+  if (navigator.clipboard && navigator.clipboard.writeText) {
     navigator.clipboard.writeText(JSON.stringify(data))
   }
 }
@@ -1080,7 +1085,7 @@ export const setDataToClipboard = data => {
 export const getDataFromClipboard = async () => {
   let text = null
   let img = null
-  if (navigator.clipboard) {
+  if (checkClipboardReadEnable()) {
     const items = await navigator.clipboard.read()
     if (items && items.length > 0) {
       for (const clipboardItem of items) {

web/src/utils/index.js

@@ -62,14 +62,14 @@ export const copy = text => {
 
 // 复制文本到剪贴板
 export const setDataToClipboard = data => {
-  if (navigator.clipboard) {
+  if (navigator.clipboard && navigator.clipboard.writeText) {
     navigator.clipboard.writeText(data)
   }
 }
 
 // 复制图片到剪贴板
 export const setImgToClipboard = img => {
-  if (navigator.clipboard) {
+  if (navigator.clipboard && navigator.clipboard.write) {
     const data = [new ClipboardItem({ ['image/png']: img })]
     navigator.clipboard.write(data)
   }