标点符号跟前一个标签灰显黑显

src/common/components/EditableSpan/index.jsx

@@ -3,6 +3,7 @@ import style from './index.less';
 import config from "@config/index";
 import {filterArr,isIE} from '@utils/tools.js';
 import Notify from '../Notify/index.js';
+import classNames from 'classnames';
 
 import $ from 'jquery';
 /*****
@@ -199,8 +200,17 @@ class EditableSpan extends Component{
     }
   }
 
+  getClass(){
+    const {full,value,saveText,i} = this.props;
+    const preSelected = saveText[i-1];
+    const isFull = full?' '+style['full']:'';       //是否宽度设为整行宽度
+    //有标点符号之外的字符或者前一个标签有选中值时，显示为黑色，否则灰显
+    const unselect = config.punctuationReg.test(value)||preSelected?'':style['unselect'];
+    return classNames(style['editable-span'],isFull,unselect);
+  }
+
   render() {
-    return <span className={style['editable-span']+(this.props.full?' '+style['full']:'')}
+    return <span className={this.getClass()}
                       contentEditable='true'
                       ref={this.$span}
                       onInput={this.onChange}

src/common/components/EditableSpan/index.less

@@ -1,3 +1,4 @@
+@import "~@less/variables.less";
 .editable-span{
   display: inline-block;
   outline: none;
@@ -11,4 +12,7 @@
 }
 .full{
   width: 100%;
+}
+.unselect{
+  color: @placeholder-color;
 }