Feat：非富文本模式文本编辑框的样式同步节点样式

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

@@ -6,7 +6,9 @@ import {
   htmlEscape,
   handleInputPasteText,
   checkSmmFormatData,
-  getTextFromHtml
+  getTextFromHtml,
+  isWhite,
+  getVisibleColorFromTheme
 } from '../../utils'
 import {
   ERROR_TYPES,
@@ -218,9 +220,11 @@ export default class TextEdit {
     openRealtimeRenderOnNodeTextEdit
   ) {
     if (!this.textEditNode) return
-    this.textEditNode.style.backgroundColor = openRealtimeRenderOnNodeTextEdit
+    this.textEditNode.style.background = openRealtimeRenderOnNodeTextEdit
       ? 'transparent'
-      : '#fff'
+      : this.currentNode
+      ? this.getBackground(this.currentNode)
+      : ''
     this.textEditNode.style.boxShadow = openRealtimeRenderOnNodeTextEdit
       ? 'none'
       : '0 0 20px rgba(0,0,0,.5)'
@@ -266,14 +270,14 @@ export default class TextEdit {
         ${
           openRealtimeRenderOnNodeTextEdit
             ? ''
-            : `background-color:#fff;
-        box-shadow: 0 0 20px rgba(0,0,0,.5);`
+            : `box-shadow: 0 0 20px rgba(0,0,0,.5);`
         }
         padding: ${this.textNodePaddingY}px ${this.textNodePaddingX}px;
         margin-left: -${this.textNodePaddingX}px;
         margin-top: -${this.textNodePaddingY}px;
         outline: none; 
         word-break: break-all;
+        line-break: anywhere;
       `
       this.textEditNode.setAttribute('contenteditable', true)
       this.textEditNode.addEventListener('keyup', e => {
@@ -320,6 +324,9 @@ export default class TextEdit {
       })
     const isMultiLine = node._textData.node.attr('data-ismultiLine') === 'true'
     node.style.domText(this.textEditNode, scale)
+    if (!openRealtimeRenderOnNodeTextEdit) {
+      this.textEditNode.style.background = this.getBackground(node)
+    }
     this.textEditNode.style.zIndex = nodeTextEditZIndex
     this.textEditNode.innerHTML = textLines.join('<br>')
     this.textEditNode.style.minWidth =
@@ -370,6 +377,27 @@ export default class TextEdit {
     this.textEditNode.style.top = rect.top + 'px'
   }
 
+  // 获取编辑区域的背景填充
+  getBackground(node) {
+    const gradientStyle = node.style.merge('gradientStyle')
+    // 当前使用的是渐变色背景
+    if (gradientStyle) {
+      const startColor = node.style.merge('startColor')
+      const endColor = node.style.merge('endColor')
+      return `linear-gradient(to right, ${startColor}, ${endColor})`
+    } else {
+      // 单色背景
+      const bgColor = node.style.merge('fillColor')
+      const color = node.style.merge('color')
+      // 默认使用节点的填充色，否则如果节点颜色是白色的话编辑时看不见
+      return bgColor === 'transparent'
+        ? isWhite(color)
+          ? getVisibleColorFromTheme(this.mindMap.themeConfig)
+          : '#fff'
+        : bgColor
+    }
+  }
+
   // 删除文本编辑元素
   removeTextEditEl() {
     if (this.mindMap.richText) {

simple-mind-map/src/core/render/node/Style.js

@@ -238,6 +238,8 @@ class Style {
       fontStyle: this.merge('fontStyle'),
       textDecoration: this.merge('textDecoration')
     }
+    node.style.color = styles.color
+    node.style.textDecoration = styles.textDecoration
     node.style.fontFamily = styles.fontFamily
     node.style.fontSize = styles.fontSize * fontSizeScale + 'px'
     node.style.fontWeight = styles.fontWeight || 'normal'

simple-mind-map/src/plugins/RichText.js

@@ -4,8 +4,6 @@ import 'quill/dist/quill.snow.css'
 import {
   walk,
   getTextFromHtml,
-  isWhite,
-  getVisibleColorFromTheme,
   isUndef,
   checkSmmFormatData,
   removeHtmlNodeByClass,
@@ -250,7 +248,8 @@ class RichText {
     this.textEditNode.style.marginTop = `-${paddingY * scaleY}px`
     this.textEditNode.style.zIndex = nodeTextEditZIndex
     if (!openRealtimeRenderOnNodeTextEdit) {
-      this.textEditNode.style.background = this.getBackground(node)
+      this.textEditNode.style.background =
+        this.mindMap.renderer.textEdit.getBackground(node)
     }
     this.textEditNode.style.minWidth = originWidth + paddingX * 2 + 'px'
     this.textEditNode.style.minHeight = originHeight + 'px'
@@ -312,7 +311,7 @@ class RichText {
     this.textEditNode.style.background = openRealtimeRenderOnNodeTextEdit
       ? 'transparent'
       : this.node
-      ? this.getBackground(node)
+      ? this.mindMap.renderer.textEdit.getBackground(this.node)
       : ''
     this.textEditNode.style.boxShadow = openRealtimeRenderOnNodeTextEdit
       ? 'none'
@@ -340,27 +339,6 @@ class RichText {
     targetNode.removeChild(this.textEditNode)
   }
 
-  // 获取编辑区域的背景填充
-  getBackground(node) {
-    const gradientStyle = node.style.merge('gradientStyle')
-    // 当前使用的是渐变色背景
-    if (gradientStyle) {
-      const startColor = node.style.merge('startColor')
-      const endColor = node.style.merge('endColor')
-      return `linear-gradient(to right, ${startColor}, ${endColor})`
-    } else {
-      // 单色背景
-      const bgColor = node.style.merge('fillColor')
-      const color = node.style.merge('color')
-      // 默认使用节点的填充色，否则如果节点颜色是白色的话编辑时看不见
-      return bgColor === 'transparent'
-        ? isWhite(color)
-          ? getVisibleColorFromTheme(this.mindMap.themeConfig)
-          : '#fff'
-        : bgColor
-    }
-  }
-
   // 如果是非富文本的情况，需要手动应用文本样式
   setTextStyleIfNotRichText(node) {
     let style = {