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(0)
        }
    }
    updateToolbar() {
        var btns = document.querySelectorAll('.' + styles.textEditor + ' li[data-tag]')

        for (var i=0;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(/<(?:.|
)*?>/gm, '').replace(/
/g,'</br/>')
            content = content.replace(/
/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(0)
                var container = range.commonAncestorContainer
                if (container.nodeType == 3) {
                    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[0] 
                    ,'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(0)
                            var container = range.commonAncestorContainer
                            if (container.nodeType == 3) {
                                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