application/components/common/rich-editor2/util/serializer.js

import { EIDRM } from "constants";

export function combineRules(ruleSet) {
    let outRules = [];
    for (var i=0; i < ruleSet.length; i++) {
        outRules = outRules.concat(ruleSet[i]);
    }

    return outRules;
}
export const BLOCK_TAGS = {
    'p': 'paragraph',
    'h1': 'heading-one',
    'h2': 'heading-two',
    'h3': 'heading-three',
    'h4': 'heading-four',
    'h5': 'heading-five',
    'h6': 'heading-six',
    'blockquote': 'blockquote'
};

export const MARK_TAGS = {
    'strong': 'bold',
    'b': 'bold',
    'i': 'italic',
    'em': 'italic'
};

export const RULES = [
    {
        deserialize(el, next) {
            const block = BLOCK_TAGS[el.tagName.toLowerCase()];

            if (block) {
                if (el.getAttribute('style')) {
                    const styles = el.getAttribute('style');
                    if (styles.search(/text-align: ?right/) !== -1) {
                        return {
                            object: 'block',
                            type: 'text-right',
                            nodes: next(el.childNodes)
                        };
                    } else if (styles.search(/text-align: ?center/) !== -1) {
                        return {
                            object: 'block',
                            type: 'text-center',
                            nodes: next(el.childNodes)
                        };
                    }
                }

                return {
                    object: 'block',
                    type: block,
                    nodes: next(el.childNodes)
                };
            }
        },
        serialize(obj, children) {
            if (obj.object == 'block') {
                switch(obj.type) {
                    case 'line':
                    case 'paragraph':
                        return <p>{children}</p>;
                    case 'heading-one':
                        return <h1>{children}</h1>;
                    case 'heading-two':
                        return <h2>{children}</h2>;
                    case 'heading-three':
                        return <h3>{children}</h3>;
                    case 'heading-four':
                        return <h4>{children}</h4>;
                    case 'heading-five':
                        return <h5>{children}</h5>;
                    case 'heading-six':
                        return <h6>{children}</h6>;
                    case 'blockquote':
                        return <blockquote>{children}</blockquote>;
                    case 'text-right':
                        return <div className='__ceo-text-right' style={{'text-align':'right'}}>{children}</div>;
                    case 'text-center':
                        return <div className='__ceo-text-center' style={{'text-align':'center'}}>{children}</div>;
                    case 'text-left':
                        return <div className='__ceo-text-left' style={{'text-align':'left'}}>{children}</div>;
                    case 'code':
                        return (
                            <pre>
                                <code>{children}</code>
                            </pre>
                        );
                }
            }
        }
    },
    {
        deserialize(el, next) {
            const mark = MARK_TAGS[el.tagName.toLowerCase()];

            if (mark) {
                return {
                    object: 'mark',
                    type: mark,
                    nodes: next(el.childNodes)
                }
            }
        },
        serialize(obj, children) {
            if (obj.object == 'mark') {
                switch(obj.type) {
                    case 'bold':
                        return <strong>{children}</strong>;
                    case 'italic':
                        return <em>{children}</em>;
                    case 'underline':
                        return <span style={{'textDecoration': 'underline'}}>{children}</span>;
                }
            }
        }    },
    {
        // special case for lists!
        deserialize(el, next) {
            if (el.tagName.toLowerCase() == 'ul') {
                return {
                    object: 'block',
                    type: 'bulleted-list',
                    nodes: next(el.childNodes)
                }
            } else if (el.tagName.toLowerCase() == 'ol') {
                return {
                    object: 'block',
                    type: 'ordered-list',
                    nodes: next(el.childNodes)
                }
            } else if (el.tagName.toLowerCase() == 'li') {
                return {
                    object: 'block',
                    type: 'list-item',
                    nodes: next(el.childNodes)
                }
            }
        },
        serialize(obj, children) {
            if (obj.object == 'block') {
                switch (obj.type) {
                    case 'bulleted-list':
                    case 'ul':
                        return <ul>{children}</ul>;
                    case 'ordered-list':
                    case 'ol':
                        return <ol>{children}</ol>;
                    case 'list-item':
                    case 'li':
                        return <li>{children}</li>;
                }
            }
        }
    },
    {
        // special for google docs
        deserialize(el, next) {
            if (el.tagName.toLowerCase() == 'span') {
                const styles = el.getAttribute('style');
                if (styles && styles.search(/font-weight:700/) !== -1) {
                    return {
                        object: 'mark',
                        type: 'bold',
                        nodes: next(el.childNodes)
                    };
                } else if (styles && styles.search(/font-style:italic/) !== -1) {
                    return {
                        object: 'mark',
                        type: 'italic',
                        nodes: next(el.childNodes)
                    };
                }
            }
        }
    }
];