@kedao/editor/lib/extensions/emoticon/index.js

Rich Text Editor Based On Draft.js

import React from 'react';
import { ContentUtils } from '@kedao/utils';
import './styles.scss';
// https://www.iconfinder.com/iconsets/emoji-18
export const defaultEmoticons = [
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
    23, 24, 25
].map((item) => `${item}.png`);
const insertEmoticon = (editor, editorState, src) => {
    editor.setValue(ContentUtils.insertText(editorState, ' ', null, {
        type: 'EMOTICON',
        mutability: 'IMMUTABLE',
        data: { src }
    }));
};
let controlRef = null;
const bindControlRef = (ref) => (controlRef = ref);
export default (options) => {
    options = Object.assign({ emoticons: [], closeOnSelect: false, closeOnBlur: false }, options);
    const { emoticons, closeOnSelect, closeOnBlur, includeEditors, excludeEditors } = options;
    return {
        type: 'entity',
        includeEditors,
        excludeEditors,
        name: 'EMOTICON',
        control: (props) => ({
            key: 'EMOTICON',
            replace: 'emoji',
            type: 'dropdown',
            text: React.createElement("i", { className: "bfi-emoji" }),
            showArrow: false,
            ref: bindControlRef,
            autoHide: closeOnBlur,
            component: (React.createElement("div", { className: "kedao-emoticon-picker" },
                React.createElement("div", { className: "kedao-emoticons-list" }, emoticons.map((item, index) => (React.createElement("img", { onClick: () => {
                        insertEmoticon(props.editor, props.editorState, item);
                        closeOnSelect && controlRef && controlRef.hide();
                    }, key: index, src: item }))))))
        }),
        mutability: 'IMMUTABLE',
        component: (props) => {
            const entity = props.contentState.getEntity(props.entityKey);
            const { src } = entity.getData();
            return (React.createElement("span", { className: "kedao-emoticon-in-editor" },
                React.createElement("img", { src: src }),
                props.children));
        },
        importer: (nodeName, node) => {
            if (nodeName.toLowerCase() === 'span' &&
                node.classList &&
                node.classList.contains('kedao-emoticon-wrap')) {
                const imgNode = node.querySelector('img');
                const src = imgNode.getAttribute('src');
                // 移除img节点以避免生成atomic block
                node.removeChild(imgNode);
                return {
                    mutability: 'IMMUTABLE',
                    data: { src }
                };
            }
        },
        exporter: (entityObject, initialText) => {
            const { src } = entityObject.data;
            return (React.createElement("span", { className: "kedao-emoticon-wrap" },
                React.createElement("img", { src: src }),
                initialText));
        }
    };
};
//# sourceMappingURL=index.js.map