From 27885aabe741962595f2b0aa8f179bae4e70c6d3 Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Sat, 5 Aug 2023 12:04:43 +0800
Subject: [PATCH] =?UTF-8?q?Demo:=E5=A4=A7=E7=BA=B2=E4=B8=8D=E5=86=8D?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E8=8A=82=E7=82=B9=E9=BB=98=E8=AE=A4=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 simple-mind-map/src/utils/index.js        | 55 ++++++++++++++
 web/src/pages/Edit/components/Outline.vue | 90 +++++++++++++++++------
 2 files changed, 123 insertions(+), 22 deletions(-)

diff --git a/simple-mind-map/src/utils/index.js b/simple-mind-map/src/utils/index.js
index 2be4cc22..9c1745d0 100644
--- a/simple-mind-map/src/utils/index.js
+++ b/simple-mind-map/src/utils/index.js
@@ -539,4 +539,59 @@ export const getVisibleColorFromTheme = (themeConfig) => {
       return color
     }
   }
+}
+
+// 将<p><span></span><p>形式的节点富文本内容转换成<br>换行的文本
+let nodeRichTextToTextWithWrapEl = null
+export const nodeRichTextToTextWithWrap = (html) => {
+  if (!nodeRichTextToTextWithWrapEl) {
+    nodeRichTextToTextWithWrapEl = document.createElement('div')
+  }
+  nodeRichTextToTextWithWrapEl.innerHTML = html
+  const childNodes = nodeRichTextToTextWithWrapEl.childNodes
+  let res = ''
+  for(let i = 0; i < childNodes.length; i++) {
+    const node = childNodes[i]
+    if (node.nodeType === 1) {// 元素节点
+      if (node.tagName.toLowerCase() === 'p') {
+        res += node.textContent + '\n'
+      } else {
+        res += node.textContent
+      }
+    } else if (node.nodeType === 3) {// 文本节点
+      res += node.nodeValue
+    }
+  }
+  return res.replace(/\n$/, '')
+}
+
+// 将<br>换行的文本转换成<p><span></span><p>形式的节点富文本内容
+let textToNodeRichTextWithWrapEl = null
+export const textToNodeRichTextWithWrap = (html) => {
+  if (!textToNodeRichTextWithWrapEl) {
+    textToNodeRichTextWithWrapEl = document.createElement('div')
+  }
+  textToNodeRichTextWithWrapEl.innerHTML = html
+  const childNodes = textToNodeRichTextWithWrapEl.childNodes
+  let list = []
+  let str = ''
+  for(let i = 0; i < childNodes.length; i++) {
+    const node = childNodes[i]
+    if (node.nodeType === 1) {// 元素节点
+      if (node.tagName.toLowerCase() === 'br') {
+        list.push(str)
+        str = ''
+      } else {
+        str += node.textContent
+      }
+    } else if (node.nodeType === 3) {// 文本节点
+      str += node.nodeValue
+    }
+  }
+  if (str) {
+    list.push(str)
+  }
+  return list.map((item) => {
+    return `<p><span>${item}</span></p>`
+  }).join('')
 }
\ No newline at end of file
diff --git a/web/src/pages/Edit/components/Outline.vue b/web/src/pages/Edit/components/Outline.vue
index 173f4095..c106e08e 100644
--- a/web/src/pages/Edit/components/Outline.vue
+++ b/web/src/pages/Edit/components/Outline.vue
@@ -8,7 +8,11 @@
       :expand-on-click-node="false"
       default-expand-all
     >
-      <span class="customNode" slot-scope="{ node, data }" @click="onClick($event, node)">
+      <span
+        class="customNode"
+        slot-scope="{ node, data }"
+        @click="onClick($event, node)"
+      >
         <span
           class="nodeEdit"
           :key="getKey()"
@@ -16,6 +20,7 @@
           @keydown.stop="onKeydown($event, node)"
           @keyup.stop
           @blur="onBlur($event, node)"
+          @paste="onPaste($event, node)"
           v-html="node.label"
         ></span>
       </span>
@@ -26,6 +31,11 @@
 <script>
 import Sidebar from './Sidebar'
 import { mapState } from 'vuex'
+import {
+  nodeRichTextToTextWithWrap,
+  textToNodeRichTextWithWrap,
+  getTextFromHtml
+} from 'simple-mind-map/src/utils'
 
 /**
  * @Author: 王林
@@ -47,7 +57,12 @@ export default {
       data: [],
       defaultProps: {
         label(data) {
-          return data.data.richText ? data.data.text : data.data.text.replaceAll(/\n/g, '</br>')
+          const text = (data.data.richText
+            ? nodeRichTextToTextWithWrap(data.data.text)
+            : data.data.text
+          ).replaceAll(/\n/g, '<br>')
+          data.data.textCache = text
+          return text
         }
       },
       notHandleDataChange: false
@@ -77,12 +92,33 @@ export default {
   },
   methods: {
     onBlur(e, node) {
-      const richText = node.data.data.richText
-      if (richText) {
-        node.data._node.setText(e.target.innerHTML, true)
-      } else {
-        node.data._node.setText(e.target.innerText)
+      if (node.data.data.textCache === e.target.innerHTML) {
+        return
       }
+      delete node.data.data.textCache
+      const richText = node.data.data.richText
+      const text = richText ? e.target.innerHTML : e.target.innerText
+      if (richText) {
+        node.data._node.setText(textToNodeRichTextWithWrap(text), true, true)
+      } else {
+        node.data._node.setText(text)
+      }
+    },
+
+    // 拦截粘贴事件
+    onPaste(e) {
+      e.preventDefault()
+      const selection = window.getSelection()
+      if (!selection.rangeCount) return
+      selection.deleteFromDocument()
+      let text = (e.clipboardData || window.clipboardData).getData('text')
+      // 去除格式
+      text = getTextFromHtml(text)
+      // 去除换行
+      text = text.replaceAll(/\n/g, '')
+      const node = document.createTextNode(text)
+      selection.getRangeAt(0).insertNode(node)
+      selection.collapseToEnd()
     },
 
     getKey() {
@@ -121,7 +157,7 @@ export default {
       this.mindMap.execCommand('GO_TARGET_NODE', node.data.data.uid, () => {
         this.mindMap.renderer.textEdit.openFocusOnNodeActive()
       })
-    },
+    }
   }
 }
 </script>
@@ -129,7 +165,8 @@ export default {
 <style lang="less" scoped>
 .customNode {
   width: 100%;
-  overflow-x: auto;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: bold;
 
   &::-webkit-scrollbar {
     width: 7px;
@@ -154,27 +191,36 @@ export default {
 }
 
 .outlineTree {
-
   &.isDark {
     background-color: #262a2e;
   }
+
+  /deep/ .el-tree-node > .el-tree-node__children {
+    overflow: inherit;
+  }
+
   /deep/ .el-tree-node__content {
     height: auto;
     margin: 5px 0;
 
-    .el-tree-node__expand-icon.is-leaf {
-      position: relative;
+    .el-tree-node__expand-icon {
+      color: #262a2e;
 
-      &::after {
-        position: absolute;
-        content: '';
-        width: 5px;
-        height: 5px;
-        border-radius: 50%;
-        background-color: #c0c4cc;
-        left: 10px;
-        top: 50%;
-        transform: translateY(-50%);
+      &.is-leaf {
+        color: transparent;
+        position: relative;
+
+        &::after {
+          background-color: #262a2e;
+          position: absolute;
+          content: '';
+          width: 5px;
+          height: 5px;
+          border-radius: 50%;
+          left: 10px;
+          top: 50%;
+          transform: translateY(-50%);
+        }
       }
     }
   }