import { autoPlayGif } from '../../initial_state'; import unicodeMapping from './emoji_unicode_mapping_light'; import { assetHost } from 'mastodon/utils/config'; import Trie from 'substring-trie'; const trie = new Trie(Object.keys(unicodeMapping)); // Convert to file names from emojis. (For different variation selector emojis) const emojiFilenames = (emojis) => { return emojis.map(v => unicodeMapping[v].filename); }; // Emoji requiring extra borders depending on theme const darkEmoji = emojiFilenames(['đą', 'đ', 'âĢ', 'đ¤', 'âŦ', 'âŧī¸', 'âž', 'âŧī¸', 'âī¸', 'âĒī¸', 'đŖ', 'đŗ', 'đˇ', 'đ¸', 'âŖī¸', 'đļī¸', 'â´ī¸', 'đ', 'đââī¸', 'đŊī¸', 'đŗ', 'đĻ', 'đ', 'đĒ', 'đŗī¸', 'đšī¸', 'đ', 'đī¸', 'đī¸', 'đââī¸', 'đ¤', 'đ', 'đĨ', 'đŧ', 'â ī¸', 'đŠ', 'đĻ', 'đŧ', 'đš', 'đŽ', 'đ', 'đ´', 'đ', 'đē', 'đą', 'đ˛', 'đ˛']); const lightEmoji = emojiFilenames(['đŊ', 'âž', 'đ', 'âī¸', 'đ¨', 'đī¸', 'đ', 'đĨ', 'đģ', 'đ', 'â', 'â', 'â¸ī¸', 'đŠī¸', 'đ', 'đ', 'đ', 'đ§ī¸', 'đ', 'đ', 'đ', 'đ', 'đ', 'đ', 'â ī¸', 'đ¨ī¸', 'đ', 'đ', 'đŦ', 'đ', 'đ', 'đŗī¸', 'âĒ', 'âŦ', 'âŊ', 'âģī¸', 'âĢī¸']); const emojiFilename = (filename) => { const borderedEmoji = (document.body && document.body.classList.contains('theme-mastodon-light')) ? lightEmoji : darkEmoji; return borderedEmoji.includes(filename) ? (filename + '_border') : filename; }; const emojifyTextNode = (node, customEmojis) => { let str = node.textContent; const fragment = new DocumentFragment(); for (;;) { let match, i = 0; if (customEmojis === null) { while (i < str.length && !(match = trie.search(str.slice(i)))) { i += str.codePointAt(i) < 65536 ? 1 : 2; } } else { while (i < str.length && str[i] !== ':' && !(match = trie.search(str.slice(i)))) { i += str.codePointAt(i) < 65536 ? 1 : 2; } } let rend, replacement = null; if (i === str.length) { break; } else if (str[i] === ':') { if (!(() => { rend = str.indexOf(':', i + 1) + 1; if (!rend) return false; // no pair of ':' const shortname = str.slice(i, rend); // now got a replacee as ':shortname:' // if you want additional emoji handler, add statements below which set replacement and return true. if (shortname in customEmojis) { const filename = autoPlayGif ? customEmojis[shortname].url : customEmojis[shortname].static_url; replacement = document.createElement('img'); replacement.setAttribute('draggable', false); replacement.setAttribute('class', 'emojione custom-emoji'); replacement.setAttribute('alt', shortname); replacement.setAttribute('title', shortname); replacement.setAttribute('src', filename); replacement.setAttribute('data-original', customEmojis[shortname].url); replacement.setAttribute('data-static', customEmojis[shortname].static_url); return true; } return false; })()) rend = ++i; } else { // matched to unicode emoji const { filename, shortCode } = unicodeMapping[match]; const title = shortCode ? `:${shortCode}:` : ''; replacement = document.createElement('img'); replacement.setAttribute('draggable', false); replacement.setAttribute('class', 'emojione'); replacement.setAttribute('alt', match); replacement.setAttribute('title', title); replacement.setAttribute('src', `${assetHost}/emoji/${emojiFilename(filename)}.svg`); rend = i + match.length; // If the matched character was followed by VS15 (for selecting text presentation), skip it. if (str.codePointAt(rend) === 65038) { rend += 1; } } fragment.append(document.createTextNode(str.slice(0, i))); if (replacement) { fragment.append(replacement); } str = str.slice(rend); } fragment.append(document.createTextNode(str)); node.parentElement.replaceChild(fragment, node); }; const emojifyNode = (node, customEmojis) => { for (const child of node.childNodes) { switch(child.nodeType) { case Node.TEXT_NODE: emojifyTextNode(child, customEmojis); break; case Node.ELEMENT_NODE: if (!child.classList.contains('invisible')) emojifyNode(child, customEmojis); break; } } }; const emojify = (str, customEmojis = {}) => { const wrapper = document.createElement('div'); wrapper.innerHTML = str; if (!Object.keys(customEmojis).length) customEmojis = null; emojifyNode(wrapper, customEmojis); return wrapper.innerHTML; }; export default emojify; export const buildCustomEmojis = (customEmojis) => { const emojis = []; customEmojis.forEach(emoji => { const shortcode = emoji.get('shortcode'); const url = autoPlayGif ? emoji.get('url') : emoji.get('static_url'); const name = shortcode.replace(':', ''); emojis.push({ id: name, name, short_names: [name], text: '', emoticons: [], keywords: [name], imageUrl: url, custom: true, customCategory: emoji.get('category'), }); }); return emojis; }; export const categoriesFromEmojis = customEmojis => customEmojis.reduce((set, emoji) => set.add(emoji.get('category') ? `custom-${emoji.get('category')}` : 'custom'), new Set(['custom']));