RocketChat/Rocket.Chat

import { emoji } from '../../../app/emoji/client/lib';

const emojiList = emoji.list as Record<string, { emojiPackage: string }>;
const emojiPackages = emoji.packages as Record<string, { render(emojiName: string): string }>;

export const renderEmoji = (emojiName: string): string | undefined => {
    const emojiPackageName = emojiList[emojiName]?.emojiPackage;
    if (emojiPackageName) {
        const emojiPackage = emojiPackages[emojiPackageName];
        return emojiPackage.render(emojiName);
    }

    return undefined;
};

type EmojiParserResult = {
    'className'?: string;
    'name': string;
    'data-title'?: string;
    'children'?: string;
    'image'?: string;
};

const createGetEmojiClassNameAndDataTitle =
    (parser: (emojiName: string) => string | undefined) =>
    (emojiName: string): EmojiParserResult => {
        const html = parser(emojiName);
        if (!html) {
            return { 'className': '', 'data-title': '', 'children': '', 'name': '' };
        }

        const div = document.createElement('div');

        div.innerHTML = html;

        const emojiElement = div.firstElementChild;
        if (!emojiElement) {
            return { 'className': '', 'data-title': '', 'children': '', 'name': '', 'image': '' };
        }

        const image =
            emojiElement instanceof HTMLElement
                ? emojiElement.style.backgroundImage
                : (Object.fromEntries((emojiElement.getAttribute('style') || '')?.split(';').map((s) => s.split(':'))) as Record<string, string>)[
                        'background-image'
                  ];

        return {
            'className': emojiElement.getAttribute('class') || '',
            'data-title': emojiElement.getAttribute('data-title') || '',
            'name': emojiElement.getAttribute('name') || '',
            'children': emojiElement.innerHTML,
            image,
        };
    };

export const getEmojiClassNameAndDataTitle = createGetEmojiClassNameAndDataTitle(renderEmoji);