reactjs simple text editor

 import React, { Component } from 'react'
 import PubSub from 'pubsub'
 import GlobalVars from 'globalVars'
 import styles from './main.css'

 // globalVars.runMode
 class Text extends Component{
     static defaultProps = {
         text: '文案内容'

     };
     constructor(props, context) {
         super(props)
         this.state = {
                 'content' : props.content
                ,'Styles' : props.Styles
                ,'editMode' : false
             }

         PubSub.subscribe('textEditorBar' , (evt) => {
             var workingEditor = evt.data
             if (workingEditor != this.editorID){
                 this.hideEditor()
             }
         })
     }
     componentWillReceiveProps(nextProps){
         this.setState({'Styles' : nextProps.Styles})
     }

     emitChange(evt ){
         //https://github.com/sstur/react-rte/blob/master/src/SimpleRichTextEditor.js
         var new_content = this.textInput.innerHTML
         if (new_content != this.state.content){
             this.setState({'content' : new_content})
         }
     }

     showEditor(evt){
         evt.preventDefault()
         this.setState({'editMode' : {'palette' : false}})
     }
     hideEditor(evt){
        this.setState({'editMode' : false})
     }
     saveSelection() {
         //https://github.com/mindmup/bootstrap-wysiwyg/blob/master/bootstrap-wysiwyg.js

         var sel = window.getSelection()
         if (sel.getRangeAt && sel.rangeCount) {
             this.selectedRange = sel.getRangeAt()
         }
     }
     updateToolbar() {
         var btns = document.querySelectorAll('.' + styles.textEditor + ' li[data-tag]')

         for (var i=;i< btns.length;i++){
             var tag = btns[i].dataset.tag

             if (document.queryCommandState(tag)){
                 btns[i].classList.add(styles.editActive)
             }else {
                 btns[i].classList.remove(styles.editActive)
             }
         }
     }
     emitKeyUp() {
         this.saveSelection()
         this.updateToolbar()
     }
     emitPaste(evt) {
         evt.preventDefault()
         var content = this.formatContent(evt.clipboardData.getData('Text') , {'nl2br':true})
         this.restoreSelection()
         document.execCommand('insertHTML', false, content)
         this.saveSelection()
     }
     formatContent(content , opt){
         opt = opt || {}
         if (!content) return ''
         if (opt.nl2br){
             //content = content.replace(/<(?:.|\n)*?>/gm, '').replace(/\n/g,'</br/>')
             content = content.replace(/\n/g,'</br/>')
         }
         return content
     }

     restoreSelection() {
         var selection = window.getSelection()
         if (this.selectedRange) {
             try {
                 selection.removeAllRanges()
             } catch (ex) {
                 document.body.createTextRange().select()
                 document.selection.empty()
             }

             selection.addRange(this.selectedRange)
         }
     }

     setStyles(tag ,new_val){
         this.restoreSelection()
         document.execCommand(tag ,false , new_val || null)
         this.saveSelection()
         this.updateToolbar()
     }
     getSelectionHtml(){
         var userSelection
         if (window.getSelection) {
             // W3C Ranges
             userSelection = window.getSelection()
             // Get the range:
             if (userSelection.getRangeAt){
                 var range = userSelection.getRangeAt()
                 var container = range.commonAncestorContainer
                 if (container.nodeType == ) {
                     container = container.parentNode
                     return container.outerHTML
                 }
                 //if (container.nodeName === "A") {alert ("Yes, it's an anchor!");}
                 var clonedSelection = range.cloneContents()
                 var div = document.createElement('div')
                 div.appendChild(clonedSelection)
                 return div.innerHTML
             }
         } else if (document.selection) {
             // Explorer selection, return the HTML
             userSelection = document.selection.createRange()
             return userSelection.htmlText
         } else {
             return ''
         }
     }
     setLink(){
         this.restoreSelection()
         var wSelf = this
         var tmp = document.createElement('div')
         tmp.innerHTML = this.getSelectionHtml()
         var link = tmp.getElementsByTagName('a')
         PubSub.publish(
                 'widgetEditLink'
                 , {'link' : link[]
                     ,'cbk' : (new_val) => {
                         this.restoreSelection()
                         var sText = window.getSelection()
                         if (new_val.link){
                             document.execCommand('createlink', false, new_val.link)
                             //document.execCommand('insertHTML', false, '<a href="' + new_val.link + '" target="' + (new_val.target || '_blank') + '">' + sText + '</a>')
                         }else{
                             var range = window.getSelection().getRangeAt()
                             var container = range.commonAncestorContainer
                             if (container.nodeType == ) {
                                 container = container.parentNode
                             }
                             if (container.nodeName === "A") {
                                 container.outerHTML = container.innerHTML
                             }

                         }
                         this.saveSelection()
                     }
                 }
         ,this)

     }
     setWholeStyles(tag , val){
         var Styles = {...this.state.Styles }|| {}
         if (val){
             Styles[tag] = val
         } else {
             delete Styles[tag]
         }
         this.setState({'Styles' : Styles})
     }
     shouldComponentUpdate(newProps, newState){
         if (this.props.setProps) {
             var state_clone = {...newState}
             delete state_clone.editMode
             this.props.setProps(state_clone)
         }
         return true
     }
     setFontSize(evt){
         this.setWholeStyles('fontSize' , evt.target.value)
     }
     setForeColor(evt){
         this.setWholeStyles('color' , evt.target.dataset.color)
     }
     palette(){
         var {editMode} = this.state || {}
         this.setState({'editMode' : {'palette': !editMode.palette}})
     }

     render(){
         var {content ,Styles ,editMode}  = this.state
         Styles = Styles || {}
         content = this.formatContent(content) 

         var fontsize_options = {
             's' : styles.textSmall
             ,'n' : styles.textNormal
             , 'l' : styles.textLarge
         }
         var fontsize_state = (Styles.fontSize in fontsize_options) ? Styles.fontSize :'n'
         var wrapper_cls = styles.textWrapper
         var fontsize_cls = fontsize_options[fontsize_state]
         if (fontsize_cls) wrapper_cls += ' ' + fontsize_cls

         var StylesClone = {...Styles}
         delete StylesClone.fontSize

         if ('edit' == GlobalVars.runMode){
             if (editMode) {
                 editMode = editMode || {}
                 //fontSize foreColor
                 var size_options = []
                 ;[{'txt' :'小' ,'val' : 's'}
                 ,{'txt' :'普通' ,'val' : 'n'}
                 ,{'txt' : '大' ,'val' : 'l'}].forEach((item , i) => {
                     size_options.push(<option key={i} value={item.val}>{item.txt}</option>)
                 })

                 var color_options = []
                 ;['#f00','#ccc' , '#0ff','#f69'].forEach((color , i) => {
                     color_options.push(<li key={i} onClick={this.setForeColor.bind(this)} data-color={color} style={{'color':color}}>{color}</li>)

                 })

                 var palette_style = {}
                 if (editMode.palette) {
                     palette_style.display = 'block'
                 }
                 var edit_btn = (
                     <ul className={styles.textEditor}>
                         <li data-tag='bold'  onClick={this.setStyles.bind(this,'bold')}>B</li>
                         <li data-tag='italic'  onClick={this.setStyles.bind(this,'italic')}>I</li>
                         <li data-tag='underline'  onClick={this.setStyles.bind(this,'underline')}>U</li> 

                         <li data-tag='justifyLeft' onClick={this.setStyles.bind(this,'justifyLeft')}>L</li>
                         <li data-tag='justifyCenter' onClick={this.setStyles.bind(this,'justifyCenter')}>C</li>
                         <li data-tag='justifyRight'  onClick={this.setStyles.bind(this,'justifyRight')}>R</li>
                         <li data-tag='justifyFull' onClick={this.setStyles.bind(this,'justifyFull')}>F</li> 

                         <li onClick={this.setLink.bind(this)}>Link</li> 

                         <li onClick={this.palette.bind(this)} className={styles.textColorEditor}>
                             Color
                             <ul style={palette_style}>
                                 <li  onClick={this.setForeColor.bind(this)} data-color='' style={{'color':'grey'}}>默认</li>
                                 {color_options}
                             </ul>
                         </li>
                         <li>
                         <select value={fontsize_state}  onChange={this.setFontSize.bind(this)}>
                             {size_options}
                        </select>
                         </li>
                     </ul>)
             }
             var holder_cls = `${styles.textHolder} textEditorHolder`
             this.editorID = uuid()
             return (
                 <div className={holder_cls} data-editorid={this.editorID}>
                     <div
                         contentEditable
                         suppressContentEditableWarning
                         ref={(input) => this.textInput = input}
                         onInput={this.emitChange.bind(this)}
                         onBlur={this.emitChange.bind(this )}
                         onClick={this.showEditor.bind(this)}
                         onKeyUp={this.emitKeyUp.bind(this)}
                         onMouseUp={this.emitKeyUp.bind(this)}
                         onPaste={this.emitPaste.bind(this)}
                         style={StylesClone}
                         className={wrapper_cls}
                         dangerouslySetInnerHTML={{__html:content}}
                     ></div>
                     {edit_btn}
                 </div>
             ) 

         }else {
             return (
                 <div style={StylesClone} className={wrapper_cls}>{content}</div>
             )
         }
     }
 }
 export default Text