react-jam-ui/components/TextEditor/index.js

React JAM UI components

import React from 'react'
import classNames from 'classnames'

import tinymce from './tinymce/tinymce.min'

//plugins
import './tinymce/plugins/advlist/plugin.min'
import './tinymce/plugins/anchor/plugin.min'
import './tinymce/plugins/autolink/plugin.min'
import './tinymce/plugins/autoresize/plugin.min'
import './tinymce/plugins/autosave/plugin.min'
import './tinymce/plugins/bbcode/plugin.min'
import './tinymce/plugins/charmap/plugin.min'
import './tinymce/plugins/code/plugin.min'
import './tinymce/plugins/codesample/plugin.min'
import './tinymce/plugins/colorpicker/plugin.min'
import './tinymce/plugins/contextmenu/plugin.min'
import './tinymce/plugins/directionality/plugin.min'
import './tinymce/plugins/emoticons/plugin.min'
import './tinymce/plugins/fullpage/plugin.min'
import './tinymce/plugins/fullscreen/plugin.min'
import './tinymce/plugins/help/plugin.min'
import './tinymce/plugins/hr/plugin.min'
import './tinymce/plugins/image/plugin.min'
import './tinymce/plugins/imagetools/plugin.min'
import './tinymce/plugins/importcss/plugin.min'
import './tinymce/plugins/insertdatetime/plugin.min'
import './tinymce/plugins/legacyoutput/plugin.min'
import './tinymce/plugins/link/plugin.min'
import './tinymce/plugins/lists/plugin.min'
import './tinymce/plugins/media/plugin.min'
import './tinymce/plugins/nonbreaking/plugin.min'
import './tinymce/plugins/noneditable/plugin.min'
import './tinymce/plugins/pagebreak/plugin.min'
import './tinymce/plugins/paste/plugin.min'
import './tinymce/plugins/preview/plugin.min'
import './tinymce/plugins/print/plugin.min'
import './tinymce/plugins/save/plugin.min'
import './tinymce/plugins/searchreplace/plugin.min'
import './tinymce/plugins/spellchecker/plugin.min'
import './tinymce/plugins/tabfocus/plugin.min'
import './tinymce/plugins/table/plugin.min'
import './tinymce/plugins/template/plugin.min'
import './tinymce/plugins/textcolor/plugin.min'
import './tinymce/plugins/textpattern/plugin.min'
import './tinymce/plugins/toc/plugin.min'
import './tinymce/plugins/visualblocks/plugin.min'
import './tinymce/plugins/visualchars/plugin.min'
import './tinymce/plugins/wordcount/plugin.min'

//theme
import './tinymce/themes/modern/theme.min'

//skin
import './tinymce/skins/twc/skin.min.css'
import './tinymce/skins/twc/content.min.css'

import './styles.styl'

/*  type Props = {
    onBlur: func,
    onChange: func,
    onFocus: func,
    config: object,
    value: string
}; */

export default class TextEditor extends React.PureComponent {
    constructor(props) {
        super();

        const defaultConfig = {
            selector: `.texteditor`,
            skin: false,
            skin_url: '',
            menubar: false,
            branding: false,
            height: 400,
            plugins: [
                'autolink lists link image charmap preview anchor',
                'searchreplace visualblocks fullscreen',
                'media table contextmenu paste code help wordcount'
            ],
            toolbar: 'undo redo | formatselect | bold italic underline  | alignleft aligncenter alignright alignjustify | link unlink bullist numlist outdent indent | removeformat code | insert | help',
            content_css: [],
            init_instance_callback: editor => {
                editor.on('blur', e => {
                    if (props.onBlur) props.onBlur(e, editor.getContent())
                });
                editor.on('Change', e => {
                    //.getContent({format : 'raw'});
                    if (props.onChange) props.onChange(e, editor.getContent())
                });
                editor.on('focus', e => {
                    if (props.onFocus) props.onFocus(e, editor.getContent())
                });
            }
        }

        this.state = {
            config: {
                ...defaultConfig,
                ...props.config
            },
            id: props.id || 'editor-' + (new Date).getTime()
        };
    }

    componentDidMount() {
        const config = {
            ...this.state.config,            
            selector: `textarea#${this.state.id}`
        }

        tinymce.init(config);
    }

    componentWillUnmount() {
        tinymce.remove(`textarea#${this.state.id}`);
    }

    render() {
        const classes = classNames(
            'texteditor-container',
            this.props.className,
            {
                'disabled': this.props.disabled,
                'error': this.props.error,
                'valid': this.props.valid
            }
        );

        return <div className={ classes }>
            <textarea
                id = { this.state.id }
                name = { this.props.name }
                defaultValue = { this.props.value }
            ></textarea>
        </div>
    }
}