application/components/common/rich-editor2/plugins/hr.js

import React from 'react';
import ToolbarButton from '../common/toolbar-button';

export const SERIALIZER_RULES = [
    {
        deserialize(el, next) {
            if (el.tagName.toLowerCase() == 'hr') {
                return {
                    object: 'block',
                    type: 'hr',
                    nodes: next(el.childNodes)
                };
            }
        },
        serialize(obj, children) {
            if (obj.object == 'block' && obj.type == 'hr') {
                return <hr />;
            }
        }
    }
];


export class HrButton extends ToolbarButton
{
    handleOnClick(e) {
        return hrClickHandler.call(this.props.editor, e);
    }

    getLabel() {
        return <i className='fa'>—</i>;
    }
}


class HrNode extends React.Component
{
    constructor(props) {
        super(props);

        this.parentEditor = this.props.editor;
    }

    render() {
        const {data} = this.props.node;

        return (
            <hr {...this.props.attributes} className='hr-node' />
        )
    }
}

export function hrClickHandler(e) {
    const {editor} = this;
    const {editorContent} = this.state;

    if (editorContent.selection.isExpanded) {
        editor.splitBlock();
    }

    editor.insertBlock({
        object: 'block',
        type: 'hr',
    });
    editor.moveToEnd();
    return;
}

export function HrPlugin(options) {
    return {
        renderNode(props, editor, next) {
            const {attributes, children} = props;

            switch(props.node.type) {
                case 'hr':
                    return <HrNode {...props} editor={editor}/>;
                default:
                    return next();
            }

        }
    };
}