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

import React from 'react';
import moment from 'moment';
import ToolbarButton from '../common/toolbar-button';
import CurrentUser from '../../../../current-user';

export const SERIALIZER_RULES = [
    {
        serialize(obj, children) {
            if (obj.object == 'inline' && obj.type == 'cq') {
                // this should only return the children
                return <React.Fragment>{children}</React.Fragment>;
            }
        }
    }
];

class CqButton extends ToolbarButton
{
    handleOnClick(e) {
        return cqClickHandler.call(this.props.editor, e);
    }

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

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

        this.parentEditor = this.props.editor;
    }

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

        const name = data.get('name');
        const date = data.get('date');
        const version = data.get('version');

        const title = name + ' @ ' + date + ' (Version ' + version + ')';

        return (
            <span {...this.props.attributes} className='cq-inline' title={title}>
                {this.props.children}
            </span>
        )
    }
}

function cqClickHandler(e) {
    const {editor} = this;
    const {editorContent} = this.state;
    const hasCq = this.hasInline('cq');

    if (hasCq) {
        // user highlighted a link and clicked the button, so remove the link
        editor.unwrapInline('cq');
    } else if (editorContent.selection.isExpanded) {
        // open the modal
        editor.wrapInline({
            type: 'cq',
            data: {
                'name': CurrentUser.name(),
                'date': moment().format('llll'),
                'version': editor.props.contentVersion
            }
        });
        editor.moveToEnd();
        return;
    }
}

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

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

        }
    };
};
export {CqPlugin, cqClickHandler, CqButton};