Update emoji mart See merge request soapbox-pub/soapbox!2309environments/review-develop-3zknud/deployments/2733
marcin mikołajczak
2 years ago
commit
b54a466bfd
@ -1,209 +0,0 @@
|
||||
import clsx from 'clsx';
|
||||
import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
// @ts-ignore
|
||||
import Overlay from 'react-overlays/lib/Overlay';
|
||||
import { createSelector } from 'reselect';
|
||||
|
||||
import { useEmoji } from 'soapbox/actions/emojis';
|
||||
import { getSettings, changeSetting } from 'soapbox/actions/settings';
|
||||
import { IconButton } from 'soapbox/components/ui';
|
||||
import { EmojiPicker as EmojiPickerAsync } from 'soapbox/features/ui/util/async-components';
|
||||
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
|
||||
|
||||
import EmojiPickerMenu from './emoji-picker-menu';
|
||||
|
||||
import type { Emoji as EmojiType } from 'soapbox/components/autosuggest-emoji';
|
||||
import type { RootState } from 'soapbox/store';
|
||||
|
||||
let EmojiPicker: any, Emoji: any; // load asynchronously
|
||||
|
||||
const perLine = 8;
|
||||
const lines = 2;
|
||||
|
||||
const DEFAULTS = [
|
||||
'+1',
|
||||
'grinning',
|
||||
'kissing_heart',
|
||||
'heart_eyes',
|
||||
'laughing',
|
||||
'stuck_out_tongue_winking_eye',
|
||||
'sweat_smile',
|
||||
'joy',
|
||||
'yum',
|
||||
'disappointed',
|
||||
'thinking_face',
|
||||
'weary',
|
||||
'sob',
|
||||
'sunglasses',
|
||||
'heart',
|
||||
'ok_hand',
|
||||
];
|
||||
|
||||
const getFrequentlyUsedEmojis = createSelector([
|
||||
(state: RootState) => state.settings.get('frequentlyUsedEmojis', ImmutableMap()),
|
||||
], emojiCounters => {
|
||||
let emojis = emojiCounters
|
||||
.keySeq()
|
||||
.sort((a: number, b: number) => emojiCounters.get(a) - emojiCounters.get(b))
|
||||
.reverse()
|
||||
.slice(0, perLine * lines)
|
||||
.toArray();
|
||||
|
||||
if (emojis.length < DEFAULTS.length) {
|
||||
const uniqueDefaults = DEFAULTS.filter(emoji => !emojis.includes(emoji));
|
||||
emojis = emojis.concat(uniqueDefaults.slice(0, DEFAULTS.length - emojis.length));
|
||||
}
|
||||
|
||||
return emojis;
|
||||
});
|
||||
|
||||
const getCustomEmojis = createSelector([
|
||||
(state: RootState) => state.custom_emojis as ImmutableList<ImmutableMap<string, string>>,
|
||||
], emojis => emojis.filter((e) => e.get('visible_in_picker')).sort((a, b) => {
|
||||
const aShort = a.get('shortcode')!.toLowerCase();
|
||||
const bShort = b.get('shortcode')!.toLowerCase();
|
||||
|
||||
if (aShort < bShort) {
|
||||
return -1;
|
||||
} else if (aShort > bShort) {
|
||||
return 1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
}) as ImmutableList<ImmutableMap<string, string>>);
|
||||
|
||||
const messages = defineMessages({
|
||||
emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
|
||||
emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search…' },
|
||||
emoji_not_found: { id: 'emoji_button.not_found', defaultMessage: 'No emoji\'s found.' },
|
||||
custom: { id: 'emoji_button.custom', defaultMessage: 'Custom' },
|
||||
recent: { id: 'emoji_button.recent', defaultMessage: 'Frequently used' },
|
||||
search_results: { id: 'emoji_button.search_results', defaultMessage: 'Search results' },
|
||||
people: { id: 'emoji_button.people', defaultMessage: 'People' },
|
||||
nature: { id: 'emoji_button.nature', defaultMessage: 'Nature' },
|
||||
food: { id: 'emoji_button.food', defaultMessage: 'Food & Drink' },
|
||||
activity: { id: 'emoji_button.activity', defaultMessage: 'Activity' },
|
||||
travel: { id: 'emoji_button.travel', defaultMessage: 'Travel & Places' },
|
||||
objects: { id: 'emoji_button.objects', defaultMessage: 'Objects' },
|
||||
symbols: { id: 'emoji_button.symbols', defaultMessage: 'Symbols' },
|
||||
flags: { id: 'emoji_button.flags', defaultMessage: 'Flags' },
|
||||
});
|
||||
|
||||
interface IEmojiPickerDropdown {
|
||||
onPickEmoji: (data: EmojiType) => void
|
||||
button?: JSX.Element
|
||||
}
|
||||
|
||||
const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ onPickEmoji, button }) => {
|
||||
const intl = useIntl();
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const customEmojis = useAppSelector((state) => getCustomEmojis(state));
|
||||
const skinTone = useAppSelector((state) => getSettings(state).get('skinTone') as number);
|
||||
const frequentlyUsedEmojis = useAppSelector((state) => getFrequentlyUsedEmojis(state));
|
||||
|
||||
const [active, setActive] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [placement, setPlacement] = useState<'bottom' | 'top'>();
|
||||
|
||||
const target = useRef(null);
|
||||
|
||||
const onSkinTone = (skinTone: number) => {
|
||||
dispatch(changeSetting(['skinTone'], skinTone));
|
||||
};
|
||||
|
||||
const handlePickEmoji = (emoji: EmojiType) => {
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
dispatch(useEmoji(emoji));
|
||||
|
||||
if (onPickEmoji) {
|
||||
onPickEmoji(emoji);
|
||||
}
|
||||
};
|
||||
|
||||
const onShowDropdown: React.EventHandler<React.KeyboardEvent | React.MouseEvent> = (e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
setActive(true);
|
||||
|
||||
if (!EmojiPicker) {
|
||||
setLoading(true);
|
||||
|
||||
EmojiPickerAsync().then(EmojiMart => {
|
||||
EmojiPicker = EmojiMart.Picker;
|
||||
Emoji = EmojiMart.Emoji;
|
||||
|
||||
setLoading(false);
|
||||
}).catch(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
|
||||
const { top } = (e.target as any).getBoundingClientRect();
|
||||
setPlacement(top * 2 < innerHeight ? 'bottom' : 'top');
|
||||
};
|
||||
|
||||
const onHideDropdown = () => {
|
||||
setActive(false);
|
||||
};
|
||||
|
||||
const onToggle: React.EventHandler<React.KeyboardEvent | React.MouseEvent> = (e) => {
|
||||
if (!loading && (!(e as React.KeyboardEvent).key || (e as React.KeyboardEvent).key === 'Enter')) {
|
||||
if (active) {
|
||||
onHideDropdown();
|
||||
} else {
|
||||
onShowDropdown(e);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown: React.KeyboardEventHandler = e => {
|
||||
if (e.key === 'Escape') {
|
||||
onHideDropdown();
|
||||
}
|
||||
};
|
||||
|
||||
const title = intl.formatMessage(messages.emoji);
|
||||
|
||||
return (
|
||||
<div className='relative' onKeyDown={handleKeyDown}>
|
||||
<div
|
||||
ref={target}
|
||||
title={title}
|
||||
aria-label={title}
|
||||
aria-expanded={active}
|
||||
role='button'
|
||||
onClick={onToggle}
|
||||
onKeyDown={onToggle}
|
||||
tabIndex={0}
|
||||
>
|
||||
{button || <IconButton
|
||||
className={clsx({
|
||||
'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': true,
|
||||
'pulse-loading': active && loading,
|
||||
})}
|
||||
title='😀'
|
||||
src={require('@tabler/icons/mood-happy.svg')}
|
||||
/>}
|
||||
</div>
|
||||
|
||||
<Overlay show={active} placement={placement} target={target.current}>
|
||||
<EmojiPickerMenu
|
||||
customEmojis={customEmojis}
|
||||
loading={loading}
|
||||
onClose={onHideDropdown}
|
||||
onPick={handlePickEmoji}
|
||||
onSkinTone={onSkinTone}
|
||||
skinTone={skinTone}
|
||||
frequentlyUsedEmojis={frequentlyUsedEmojis}
|
||||
/>
|
||||
</Overlay>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { EmojiPicker, Emoji };
|
||||
|
||||
export default EmojiPickerDropdown;
|
||||
@ -1,171 +0,0 @@
|
||||
import clsx from 'clsx';
|
||||
import { supportsPassiveEvents } from 'detect-passive-events';
|
||||
import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
import { buildCustomEmojis, categoriesFromEmojis } from '../../../emoji/emoji';
|
||||
|
||||
import { EmojiPicker } from './emoji-picker-dropdown';
|
||||
import ModifierPicker from './modifier-picker';
|
||||
|
||||
import type { Emoji } from 'soapbox/components/autosuggest-emoji';
|
||||
|
||||
const backgroundImageFn = () => require('emoji-datasource/img/twitter/sheets/32.png');
|
||||
const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
|
||||
|
||||
const messages = defineMessages({
|
||||
emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
|
||||
emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search…' },
|
||||
emoji_not_found: { id: 'emoji_button.not_found', defaultMessage: 'No emoji\'s found.' },
|
||||
custom: { id: 'emoji_button.custom', defaultMessage: 'Custom' },
|
||||
recent: { id: 'emoji_button.recent', defaultMessage: 'Frequently used' },
|
||||
search_results: { id: 'emoji_button.search_results', defaultMessage: 'Search results' },
|
||||
people: { id: 'emoji_button.people', defaultMessage: 'People' },
|
||||
nature: { id: 'emoji_button.nature', defaultMessage: 'Nature' },
|
||||
food: { id: 'emoji_button.food', defaultMessage: 'Food & Drink' },
|
||||
activity: { id: 'emoji_button.activity', defaultMessage: 'Activity' },
|
||||
travel: { id: 'emoji_button.travel', defaultMessage: 'Travel & Places' },
|
||||
objects: { id: 'emoji_button.objects', defaultMessage: 'Objects' },
|
||||
symbols: { id: 'emoji_button.symbols', defaultMessage: 'Symbols' },
|
||||
flags: { id: 'emoji_button.flags', defaultMessage: 'Flags' },
|
||||
});
|
||||
|
||||
interface IEmojiPickerMenu {
|
||||
customEmojis: ImmutableList<ImmutableMap<string, string>>
|
||||
loading?: boolean
|
||||
onClose: () => void
|
||||
onPick: (emoji: Emoji) => void
|
||||
onSkinTone: (skinTone: number) => void
|
||||
skinTone?: number
|
||||
frequentlyUsedEmojis?: Array<string>
|
||||
style?: React.CSSProperties
|
||||
}
|
||||
|
||||
const EmojiPickerMenu: React.FC<IEmojiPickerMenu> = ({
|
||||
customEmojis,
|
||||
loading = true,
|
||||
onClose,
|
||||
onPick,
|
||||
onSkinTone,
|
||||
skinTone,
|
||||
frequentlyUsedEmojis = [],
|
||||
style = {},
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const node = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [modifierOpen, setModifierOpen] = useState(false);
|
||||
|
||||
const categoriesSort = [
|
||||
'recent',
|
||||
'people',
|
||||
'nature',
|
||||
'foods',
|
||||
'activity',
|
||||
'places',
|
||||
'objects',
|
||||
'symbols',
|
||||
'flags',
|
||||
];
|
||||
|
||||
categoriesSort.splice(1, 0, ...Array.from(categoriesFromEmojis(customEmojis) as Set<string>).sort());
|
||||
|
||||
const handleDocumentClick = useCallback((e: MouseEvent | TouchEvent) => {
|
||||
if (node.current && !node.current.contains(e.target as Node)) {
|
||||
onClose();
|
||||
}
|
||||
}, []);
|
||||
|
||||
const getI18n = () => {
|
||||
return {
|
||||
search: intl.formatMessage(messages.emoji_search),
|
||||
notfound: intl.formatMessage(messages.emoji_not_found),
|
||||
categories: {
|
||||
search: intl.formatMessage(messages.search_results),
|
||||
recent: intl.formatMessage(messages.recent),
|
||||
people: intl.formatMessage(messages.people),
|
||||
nature: intl.formatMessage(messages.nature),
|
||||
foods: intl.formatMessage(messages.food),
|
||||
activity: intl.formatMessage(messages.activity),
|
||||
places: intl.formatMessage(messages.travel),
|
||||
objects: intl.formatMessage(messages.objects),
|
||||
symbols: intl.formatMessage(messages.symbols),
|
||||
flags: intl.formatMessage(messages.flags),
|
||||
custom: intl.formatMessage(messages.custom),
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const handleClick = (emoji: any) => {
|
||||
if (!emoji.native) {
|
||||
emoji.native = emoji.colons;
|
||||
}
|
||||
|
||||
onClose();
|
||||
onPick(emoji);
|
||||
};
|
||||
|
||||
const handleModifierOpen = () => {
|
||||
setModifierOpen(true);
|
||||
};
|
||||
|
||||
const handleModifierClose = () => {
|
||||
setModifierOpen(false);
|
||||
};
|
||||
|
||||
const handleModifierChange = (modifier: number) => {
|
||||
onSkinTone(modifier);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('click', handleDocumentClick, false);
|
||||
document.addEventListener('touchend', handleDocumentClick, listenerOptions);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('click', handleDocumentClick, false);
|
||||
document.removeEventListener('touchend', handleDocumentClick, listenerOptions as any);
|
||||
};
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return <div style={{ width: 299 }} />;
|
||||
}
|
||||
|
||||
const title = intl.formatMessage(messages.emoji);
|
||||
|
||||
return (
|
||||
<div className={clsx('emoji-picker-dropdown__menu', { selecting: modifierOpen })} style={style} ref={node}>
|
||||
<EmojiPicker
|
||||
perLine={8}
|
||||
emojiSize={22}
|
||||
sheetSize={32}
|
||||
custom={buildCustomEmojis(customEmojis)}
|
||||
color=''
|
||||
emoji=''
|
||||
set='twitter'
|
||||
title={title}
|
||||
i18n={getI18n()}
|
||||
onClick={handleClick}
|
||||
include={categoriesSort}
|
||||
recent={frequentlyUsedEmojis}
|
||||
skin={skinTone}
|
||||
showPreview={false}
|
||||
backgroundImageFn={backgroundImageFn}
|
||||
autoFocus
|
||||
emojiTooltip
|
||||
/>
|
||||
|
||||
<ModifierPicker
|
||||
active={modifierOpen}
|
||||
modifier={skinTone}
|
||||
onOpen={handleModifierOpen}
|
||||
onClose={handleModifierClose}
|
||||
onChange={handleModifierChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmojiPickerMenu;
|
||||
@ -1,73 +0,0 @@
|
||||
import { supportsPassiveEvents } from 'detect-passive-events';
|
||||
import React, { useCallback, useEffect, useRef } from 'react';
|
||||
|
||||
import { Emoji } from './emoji-picker-dropdown';
|
||||
|
||||
const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
|
||||
const backgroundImageFn = () => require('emoji-datasource/img/twitter/sheets/32.png');
|
||||
|
||||
interface IModifierPickerMenu {
|
||||
active: boolean
|
||||
onSelect: (modifier: number) => void
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const ModifierPickerMenu: React.FC<IModifierPickerMenu> = ({ active, onSelect, onClose }) => {
|
||||
const node = useRef<HTMLDivElement>(null);
|
||||
|
||||
const handleClick: React.MouseEventHandler<HTMLButtonElement> = e => {
|
||||
onSelect(+e.currentTarget.getAttribute('data-index')! * 1);
|
||||
};
|
||||
|
||||
const handleDocumentClick = useCallback(((e: MouseEvent | TouchEvent) => {
|
||||
if (node.current && !node.current.contains(e.target as Node)) {
|
||||
onClose();
|
||||
}
|
||||
}), []);
|
||||
|
||||
const attachListeners = () => {
|
||||
document.addEventListener('click', handleDocumentClick, false);
|
||||
document.addEventListener('touchend', handleDocumentClick, listenerOptions);
|
||||
};
|
||||
|
||||
const removeListeners = () => {
|
||||
document.removeEventListener('click', handleDocumentClick, false);
|
||||
document.removeEventListener('touchend', handleDocumentClick, listenerOptions as any);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
removeListeners();
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (active) attachListeners();
|
||||
else removeListeners();
|
||||
}, [active]);
|
||||
|
||||
return (
|
||||
<div className='emoji-picker-dropdown__modifiers__menu' style={{ display: active ? 'block' : 'none' }} ref={node}>
|
||||
<button onClick={handleClick} data-index={1}>
|
||||
<Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={1} backgroundImageFn={backgroundImageFn} />
|
||||
</button>
|
||||
<button onClick={handleClick} data-index={2}>
|
||||
<Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={2} backgroundImageFn={backgroundImageFn} />
|
||||
</button>
|
||||
<button onClick={handleClick} data-index={3}>
|
||||
<Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={3} backgroundImageFn={backgroundImageFn} />
|
||||
</button>
|
||||
<button onClick={handleClick} data-index={4}>
|
||||
<Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={4} backgroundImageFn={backgroundImageFn} />
|
||||
</button>
|
||||
<button onClick={handleClick} data-index={5}>
|
||||
<Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={5} backgroundImageFn={backgroundImageFn} />
|
||||
</button>
|
||||
<button onClick={handleClick} data-index={6}>
|
||||
<Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={6} backgroundImageFn={backgroundImageFn} />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModifierPickerMenu;
|
||||
@ -1,38 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Emoji } from './emoji-picker-dropdown';
|
||||
import ModifierPickerMenu from './modifier-picker-menu';
|
||||
|
||||
const backgroundImageFn = () => require('emoji-datasource/img/twitter/sheets/32.png');
|
||||
|
||||
interface IModifierPicker {
|
||||
active: boolean
|
||||
modifier?: number
|
||||
onOpen: () => void
|
||||
onClose: () => void
|
||||
onChange: (skinTone: number) => void
|
||||
}
|
||||
|
||||
const ModifierPicker: React.FC<IModifierPicker> = ({ active, modifier, onOpen, onClose, onChange }) => {
|
||||
const handleClick = () => {
|
||||
if (active) {
|
||||
onClose();
|
||||
} else {
|
||||
onOpen();
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelect = (modifier: number) => {
|
||||
onChange(modifier);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='emoji-picker-dropdown__modifiers'>
|
||||
<Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={modifier} onClick={handleClick} backgroundImageFn={backgroundImageFn} />
|
||||
<ModifierPickerMenu active={active} onSelect={handleSelect} onClose={onClose} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModifierPicker;
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,259 @@
|
||||
import { Map as ImmutableMap } from 'immutable';
|
||||
import React, { useEffect, useState, useLayoutEffect } from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import { createSelector } from 'reselect';
|
||||
|
||||
import { useEmoji } from 'soapbox/actions/emojis';
|
||||
import { changeSetting } from 'soapbox/actions/settings';
|
||||
import { useAppDispatch, useAppSelector, useSettings } from 'soapbox/hooks';
|
||||
import { RootState } from 'soapbox/store';
|
||||
|
||||
import { buildCustomEmojis } from '../../emoji';
|
||||
import { EmojiPicker as EmojiPickerAsync } from '../../ui/util/async-components';
|
||||
|
||||
import type { State as PopperState } from '@popperjs/core';
|
||||
import type { Emoji, CustomEmoji, NativeEmoji } from 'soapbox/features/emoji';
|
||||
|
||||
let EmojiPicker: any; // load asynchronously
|
||||
|
||||
export const messages = defineMessages({
|
||||
emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
|
||||
emoji_pick: { id: 'emoji_button.pick', defaultMessage: 'Pick an emoji…' },
|
||||
emoji_oh_no: { id: 'emoji_button.oh_no', defaultMessage: 'Oh no!' },
|
||||
emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search…' },
|
||||
emoji_not_found: { id: 'emoji_button.not_found', defaultMessage: 'No emoji\'s found.' },
|
||||
emoji_add_custom: { id: 'emoji_button.add_custom', defaultMessage: 'Add custom emoji' },
|
||||
custom: { id: 'emoji_button.custom', defaultMessage: 'Custom' },
|
||||
recent: { id: 'emoji_button.recent', defaultMessage: 'Frequently used' },
|
||||
search_results: { id: 'emoji_button.search_results', defaultMessage: 'Search results' },
|
||||
people: { id: 'emoji_button.people', defaultMessage: 'People' },
|
||||
nature: { id: 'emoji_button.nature', defaultMessage: 'Nature' },
|
||||
food: { id: 'emoji_button.food', defaultMessage: 'Food & Drink' },
|
||||
activity: { id: 'emoji_button.activity', defaultMessage: 'Activity' },
|
||||
travel: { id: 'emoji_button.travel', defaultMessage: 'Travel & Places' },
|
||||
objects: { id: 'emoji_button.objects', defaultMessage: 'Objects' },
|
||||
symbols: { id: 'emoji_button.symbols', defaultMessage: 'Symbols' },
|
||||
flags: { id: 'emoji_button.flags', defaultMessage: 'Flags' },
|
||||
skins_choose: { id: 'emoji_button.skins_choose', defaultMessage: 'Choose default skin tone' },
|
||||
skins_1: { id: 'emoji_button.skins_1', defaultMessage: 'Default' },
|
||||
skins_2: { id: 'emoji_button.skins_2', defaultMessage: 'Light' },
|
||||
skins_3: { id: 'emoji_button.skins_3', defaultMessage: 'Medium-Light' },
|
||||
skins_4: { id: 'emoji_button.skins_4', defaultMessage: 'Medium' },
|
||||
skins_5: { id: 'emoji_button.skins_5', defaultMessage: 'Medium-Dark' },
|
||||
skins_6: { id: 'emoji_button.skins_6', defaultMessage: 'Dark' },
|
||||
});
|
||||
|
||||
export interface IEmojiPickerDropdown {
|
||||
onPickEmoji?: (emoji: Emoji) => void
|
||||
condensed?: boolean
|
||||
withCustom?: boolean
|
||||
visible: boolean
|
||||
setVisible: (value: boolean) => void
|
||||
update: (() => Promise<Partial<PopperState>>) | null
|
||||
}
|
||||
|
||||
const perLine = 8;
|
||||
const lines = 2;
|
||||
|
||||
const DEFAULTS = [
|
||||
'+1',
|
||||
'grinning',
|
||||
'kissing_heart',
|
||||
'heart_eyes',
|
||||
'laughing',
|
||||
'stuck_out_tongue_winking_eye',
|
||||
'sweat_smile',
|
||||
'joy',
|
||||
'yum',
|
||||
'disappointed',
|
||||
'thinking_face',
|
||||
'weary',
|
||||
'sob',
|
||||
'sunglasses',
|
||||
'heart',
|
||||
'ok_hand',
|
||||
];
|
||||
|
||||
export const getFrequentlyUsedEmojis = createSelector([
|
||||
(state: RootState) => state.settings.get('frequentlyUsedEmojis', ImmutableMap()),
|
||||
], (emojiCounters: ImmutableMap<string, number>) => {
|
||||
let emojis = emojiCounters
|
||||
.keySeq()
|
||||
.sort((a, b) => emojiCounters.get(a)! - emojiCounters.get(b)!)
|
||||
.reverse()
|
||||
.slice(0, perLine * lines)
|
||||
.toArray();
|
||||
|
||||
if (emojis.length < DEFAULTS.length) {
|
||||
const uniqueDefaults = DEFAULTS.filter(emoji => !emojis.includes(emoji));
|
||||
emojis = emojis.concat(uniqueDefaults.slice(0, DEFAULTS.length - emojis.length));
|
||||
}
|
||||
|
||||
return emojis;
|
||||
});
|
||||
|
||||
const getCustomEmojis = createSelector([
|
||||
(state: RootState) => state.custom_emojis,
|
||||
], emojis => emojis.filter(e => e.get('visible_in_picker')).sort((a, b) => {
|
||||
const aShort = a.get('shortcode')!.toLowerCase();
|
||||
const bShort = b.get('shortcode')!.toLowerCase();
|
||||
|
||||
if (aShort < bShort) {
|
||||
return -1;
|
||||
} else if (aShort > bShort) {
|
||||
return 1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
}));
|
||||
|
||||
// Fixes render bug where popover has a delayed position update
|
||||
const RenderAfter = ({ children, update }: any) => {
|
||||
const [nextTick, setNextTick] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setNextTick(true);
|
||||
}, 0);
|
||||
}, []);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (nextTick) {
|
||||
update();
|
||||
}
|
||||
}, [nextTick, update]);
|
||||
|
||||
return nextTick ? children : null;
|
||||
};
|
||||
|
||||
const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({
|
||||
onPickEmoji, visible, setVisible, update, withCustom = true,
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
const dispatch = useAppDispatch();
|
||||
const settings = useSettings();
|
||||
const title = intl.formatMessage(messages.emoji);
|
||||
const userTheme = settings.get('themeMode');
|
||||
const theme = (userTheme === 'dark' || userTheme === 'light') ? userTheme : 'auto';
|
||||
|
||||
const customEmojis = useAppSelector((state) => getCustomEmojis(state));
|
||||
const frequentlyUsedEmojis = useAppSelector((state) => getFrequentlyUsedEmojis(state));
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handlePick = (emoji: any) => {
|
||||
setVisible(false);
|
||||
|
||||
let pickedEmoji: Emoji;
|
||||
|
||||
if (emoji.native) {
|
||||
pickedEmoji = {
|
||||
id: emoji.id,
|
||||
colons: emoji.shortcodes,
|
||||
custom: false,
|
||||
native: emoji.native,
|
||||
unified: emoji.unified,
|
||||
} as NativeEmoji;
|
||||
} else {
|
||||
pickedEmoji = {
|
||||
id: emoji.id,
|
||||
colons: emoji.shortcodes,
|
||||
custom: true,
|
||||
imageUrl: emoji.src,
|
||||
} as CustomEmoji;
|
||||
}
|
||||
|
||||
dispatch(useEmoji(pickedEmoji)); // eslint-disable-line react-hooks/rules-of-hooks
|
||||
|
||||
if (onPickEmoji) {
|
||||
onPickEmoji(pickedEmoji);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSkinTone = (skinTone: string) => {
|
||||
dispatch(changeSetting(['skinTone'], skinTone));
|
||||
};
|
||||
|
||||
const getI18n = () => {
|
||||
return {
|
||||
search: intl.formatMessage(messages.emoji_search),
|
||||
pick: intl.formatMessage(messages.emoji_pick),
|
||||
search_no_results_1: intl.formatMessage(messages.emoji_oh_no),
|
||||
search_no_results_2: intl.formatMessage(messages.emoji_not_found),
|
||||
add_custom: intl.formatMessage(messages.emoji_add_custom),
|
||||
categories: {
|
||||
search: intl.formatMessage(messages.search_results),
|
||||
frequent: intl.formatMessage(messages.recent),
|
||||
people: intl.formatMessage(messages.people),
|
||||
nature: intl.formatMessage(messages.nature),
|
||||
foods: intl.formatMessage(messages.food),
|
||||
activity: intl.formatMessage(messages.activity),
|
||||
places: intl.formatMessage(messages.travel),
|
||||
objects: intl.formatMessage(messages.objects),
|
||||
symbols: intl.formatMessage(messages.symbols),
|
||||
flags: intl.formatMessage(messages.flags),
|
||||
custom: intl.formatMessage(messages.custom),
|
||||
},
|
||||
skins: {
|
||||
choose: intl.formatMessage(messages.skins_choose),
|
||||
1: intl.formatMessage(messages.skins_1),
|
||||
2: intl.formatMessage(messages.skins_2),
|
||||
3: intl.formatMessage(messages.skins_3),
|
||||
4: intl.formatMessage(messages.skins_4),
|
||||
5: intl.formatMessage(messages.skins_5),
|
||||
6: intl.formatMessage(messages.skins_6),
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// fix scrolling focus issue
|
||||
if (visible) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
if (!EmojiPicker) {
|
||||
setLoading(true);
|
||||
|
||||
EmojiPickerAsync().then(EmojiMart => {
|
||||
EmojiPicker = EmojiMart.Picker;
|
||||
|
||||
setLoading(false);
|
||||
}).catch(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
}, [visible]);
|
||||
|
||||
useEffect(() => () => {
|
||||
document.body.style.overflow = '';
|
||||
}, []);
|
||||
|
||||
return (
|
||||
visible ? (
|
||||
<RenderAfter update={update}>
|
||||
{!loading && (
|
||||
<EmojiPicker
|
||||
custom={withCustom ? [{ emojis: buildCustomEmojis(customEmojis) }] : undefined}
|
||||
title={title}
|
||||
onEmojiSelect={handlePick}
|
||||
recent={frequentlyUsedEmojis}
|
||||
perLine={8}
|
||||
skin={handleSkinTone}
|
||||
emojiSize={22}
|
||||
emojiButtonSize={34}
|
||||
set='twitter'
|
||||
theme={theme}
|
||||
i18n={getI18n()}
|
||||
skinTonePosition='search'
|
||||
previewPosition='none'
|
||||
/>
|
||||
)}
|
||||
</RenderAfter>
|
||||
) : null
|
||||
);
|
||||
};
|
||||
|
||||
export default EmojiPickerDropdown;
|
||||
@ -0,0 +1,30 @@
|
||||
import { Picker as EmojiPicker } from 'emoji-mart';
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
|
||||
import { joinPublicPath } from 'soapbox/utils/static';
|
||||
|
||||
import data from '../data';
|
||||
|
||||
const getSpritesheetURL = (set: string) => {
|
||||
return require('emoji-datasource/img/twitter/sheets/32.png');
|
||||
};
|
||||
|
||||
const getImageURL = (set: string, name: string) => {
|
||||
return joinPublicPath(`/packs/emoji/${name}.svg`);
|
||||
};
|
||||
|
||||
const Picker = (props: any) => {
|
||||
const ref = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const input = { ...props, data, ref, getImageURL, getSpritesheetURL };
|
||||
|
||||
new EmojiPicker(input);
|
||||
}, []);
|
||||
|
||||
return <div ref={ref} />;
|
||||
};
|
||||
|
||||
export {
|
||||
Picker,
|
||||
};
|
||||
@ -0,0 +1,96 @@
|
||||
import clsx from 'clsx';
|
||||
import { supportsPassiveEvents } from 'detect-passive-events';
|
||||
import React, { KeyboardEvent, useEffect, useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import { usePopper } from 'react-popper';
|
||||
|
||||
import { IconButton } from 'soapbox/components/ui';
|
||||
import { isMobile } from 'soapbox/is-mobile';
|
||||
|
||||
import EmojiPickerDropdown, { IEmojiPickerDropdown } from '../components/emoji-picker-dropdown';
|
||||
|
||||
const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
|
||||
|
||||
export const messages = defineMessages({
|
||||
emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
|
||||
});
|
||||
|
||||
const EmojiPickerDropdownContainer = (
|
||||
props: Pick<IEmojiPickerDropdown, 'onPickEmoji' | 'condensed' | 'withCustom'>,
|
||||
) => {
|
||||
const intl = useIntl();
|
||||
const title = intl.formatMessage(messages.emoji);
|
||||
|
||||
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
|
||||
const [popperReference, setPopperReference] = useState<HTMLButtonElement | null>(null);
|
||||
const [containerElement, setContainerElement] = useState<HTMLDivElement | null>(null);
|
||||
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
const placement = props.condensed ? 'bottom-start' : 'top-start';
|
||||
const { styles, attributes, update } = usePopper(popperReference, popperElement, {
|
||||
placement: isMobile(window.innerWidth) ? 'auto' : placement,
|
||||
});
|
||||
|
||||
const handleDocClick = (e: any) => {
|
||||
if (!containerElement?.contains(e.target) && !popperElement?.contains(e.target)) {
|
||||
setVisible(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggle = (e: MouseEvent | KeyboardEvent) => {
|
||||
e.stopPropagation();
|
||||
setVisible(!visible);
|
||||
};
|
||||
|
||||
// TODO: move to class
|
||||
const style: React.CSSProperties = !isMobile(window.innerWidth) ? styles.popper : {
|
||||
...styles.popper, width: '100%',
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('click', handleDocClick, false);
|
||||
document.addEventListener('touchend', handleDocClick, listenerOptions);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('click', handleDocClick, false);
|
||||
// @ts-ignore
|
||||
document.removeEventListener('touchend', handleDocClick, listenerOptions);
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<div className='relative' ref={setContainerElement}>
|
||||
<IconButton
|
||||
className={clsx({
|
||||
'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': true,
|
||||
})}
|
||||
ref={setPopperReference}
|
||||
src={require('@tabler/icons/mood-happy.svg')}
|
||||
title={title}
|
||||
aria-label={title}
|
||||
aria-expanded={visible}
|
||||
role='button'
|
||||
onClick={handleToggle as any}
|
||||
onKeyDown={handleToggle as React.KeyboardEventHandler<HTMLButtonElement>}
|
||||
tabIndex={0}
|
||||
/>
|
||||
|
||||
{createPortal(
|
||||
<div
|
||||
className='z-[101]'
|
||||
ref={setPopperElement}
|
||||
style={style}
|
||||
{...attributes.popper}
|
||||
>
|
||||
<EmojiPickerDropdown visible={visible} setVisible={setVisible} update={update} {...props} />
|
||||
</div>,
|
||||
document.body,
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export default EmojiPickerDropdownContainer;
|
||||
@ -0,0 +1,52 @@
|
||||
import data from '@emoji-mart/data/sets/14/twitter.json';
|
||||
|
||||
export interface NativeEmoji {
|
||||
unified: string
|
||||
native: string
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
|
||||
export interface CustomEmoji {
|
||||
src: string
|
||||
}
|
||||
|
||||
export interface Emoji<T> {
|
||||
id: string
|
||||
name: string
|
||||
keywords: string[]
|
||||
skins: T[]
|
||||
version?: number
|
||||
}
|
||||
|
||||
export interface EmojiCategory {
|
||||
id: string
|
||||
emojis: string[]
|
||||
}
|
||||
|
||||
export interface EmojiMap {
|
||||
[s: string]: Emoji<NativeEmoji>
|
||||
}
|
||||
|
||||
export interface EmojiAlias {
|
||||
[s: string]: string
|
||||
}
|
||||
|
||||
export interface EmojiSheet {
|
||||
cols: number
|
||||
rows: number
|
||||
}
|
||||
|
||||
export interface EmojiData {
|
||||
categories: EmojiCategory[]
|
||||
emojis: EmojiMap
|
||||
aliases: EmojiAlias
|
||||
sheet: EmojiSheet
|
||||
}
|
||||
|
||||
const emojiData = data as EmojiData;
|
||||
const { categories, emojis, aliases, sheet } = emojiData;
|
||||
|
||||
export { categories, emojis, aliases, sheet };
|
||||
|
||||
export default emojiData;
|
||||
@ -1,124 +0,0 @@
|
||||
// @preval
|
||||
// http://www.unicode.org/Public/emoji/5.0/emoji-test.txt
|
||||
// This file contains the compressed version of the emoji data from
|
||||
// both emoji-map.json and from emoji-mart's emojiIndex and data objects.
|
||||
// It's designed to be emitted in an array format to take up less space
|
||||
// over the wire.
|
||||
|
||||
const { emojiIndex } = require('emoji-mart');
|
||||
let data = require('emoji-mart/data/all.json');
|
||||
const { uncompress: emojiMartUncompress } = require('emoji-mart/dist/utils/data');
|
||||
|
||||
const emojiMap = require('./emoji-map.json');
|
||||
const { unicodeToFilename } = require('./unicode-to-filename');
|
||||
const { unicodeToUnifiedName } = require('./unicode-to-unified-name');
|
||||
|
||||
if (data.compressed) {
|
||||
data = emojiMartUncompress(data);
|
||||
}
|
||||
|
||||
const emojiMartData = data;
|
||||
|
||||
const excluded = ['®', '©', '™'];
|
||||
const skinTones = ['🏻', '🏼', '🏽', '🏾', '🏿'];
|
||||
const shortcodeMap = {};
|
||||
|
||||
const shortCodesToEmojiData = {};
|
||||
const emojisWithoutShortCodes = [];
|
||||
|
||||
Object.keys(emojiIndex.emojis).forEach(key => {
|
||||
let emoji = emojiIndex.emojis[key];
|
||||
|
||||
// Emojis with skin tone modifiers are stored like this
|
||||
if (Object.prototype.hasOwnProperty.call(emoji, '1')) {
|
||||
emoji = emoji['1'];
|
||||
}
|
||||
|
||||
shortcodeMap[emoji.native] = emoji.id;
|
||||
});
|
||||
|
||||
const stripModifiers = unicode => {
|
||||
skinTones.forEach(tone => {
|
||||
unicode = unicode.replace(tone, '');
|
||||
});
|
||||
|
||||
return unicode;
|
||||
};
|
||||
|
||||
Object.keys(emojiMap).forEach(key => {
|
||||
if (excluded.includes(key)) {
|
||||
delete emojiMap[key];
|
||||
return;
|
||||
}
|
||||
|
||||
const normalizedKey = stripModifiers(key);
|
||||
let shortcode = shortcodeMap[normalizedKey];
|
||||
|
||||
if (!shortcode) {
|
||||
shortcode = shortcodeMap[normalizedKey + '\uFE0F'];
|
||||
}
|
||||
|
||||
const filename = emojiMap[key];
|
||||
|
||||
const filenameData = [key];
|
||||
|
||||
if (unicodeToFilename(key) !== filename) {
|
||||
// filename can't be derived using unicodeToFilename
|
||||
filenameData.push(filename);
|
||||
}
|
||||
|
||||
if (typeof shortcode === 'undefined') {
|
||||
emojisWithoutShortCodes.push(filenameData);
|
||||
} else {
|
||||
if (!Array.isArray(shortCodesToEmojiData[shortcode])) {
|
||||
shortCodesToEmojiData[shortcode] = [[]];
|
||||
}
|
||||
|
||||
shortCodesToEmojiData[shortcode][0].push(filenameData);
|
||||
}
|
||||
});
|
||||
|
||||
Object.keys(emojiIndex.emojis).forEach(key => {
|
||||
let emoji = emojiIndex.emojis[key];
|
||||
|
||||
// Emojis with skin tone modifiers are stored like this
|
||||
if (Object.prototype.hasOwnProperty.call(emoji, '1')) {
|
||||
emoji = emoji['1'];
|
||||
}
|
||||
|
||||
const { native } = emoji;
|
||||
const { short_names, search, unified } = emojiMartData.emojis[key];
|
||||
|
||||
if (short_names[0] !== key) {
|
||||
throw new Error('The compresser expects the first short_code to be the ' +
|
||||
'key. It may need to be rewritten if the emoji change such that this ' +
|
||||
'is no longer the case.');
|
||||
}
|
||||
|
||||
const searchData = [
|
||||
native,
|
||||
short_names.slice(1), // first short name can be inferred from the key
|
||||
search,
|
||||
];
|
||||
|
||||
if (unicodeToUnifiedName(native) !== unified) {
|
||||
// unified name can't be derived from unicodeToUnifiedName
|
||||
searchData.push(unified);
|
||||
}
|
||||
|
||||
if (!Array.isArray(shortCodesToEmojiData[key])) {
|
||||
shortCodesToEmojiData[key] = [[]];
|
||||
}
|
||||
|
||||
shortCodesToEmojiData[key].push(searchData);
|
||||
});
|
||||
|
||||
// JSON.parse/stringify is to emulate what @preval is doing and avoid any
|
||||
// inconsistent behavior in dev mode
|
||||
module.exports = JSON.parse(JSON.stringify([
|
||||
shortCodesToEmojiData,
|
||||
emojiMartData.skins,
|
||||
emojiMartData.categories,
|
||||
emojiMartData.aliases,
|
||||
emojisWithoutShortCodes,
|
||||
]));
|
||||
File diff suppressed because one or more lines are too long
@ -1,44 +0,0 @@
|
||||
// The output of this module is designed to mimic emoji-mart's
|
||||
// "data" object, such that we can use it for a light version of emoji-mart's
|
||||
// emojiIndex.search functionality.
|
||||
import emojiCompressed from './emoji-compressed';
|
||||
import { unicodeToUnifiedName } from './unicode-to-unified-name';
|
||||
|
||||
const [ shortCodesToEmojiData, skins, categories, short_names ] = emojiCompressed;
|
||||
|
||||
const emojis: Record<string, any> = {};
|
||||
|
||||
// decompress
|
||||
Object.keys(shortCodesToEmojiData).forEach((shortCode) => {
|
||||
const [
|
||||
_filenameData, // eslint-disable-line @typescript-eslint/no-unused-vars
|
||||
searchData,
|
||||
] = shortCodesToEmojiData[shortCode];
|
||||
const [
|
||||
native,
|
||||
short_names,
|
||||
search,
|
||||
unified,
|
||||
] = searchData;
|
||||
|
||||
emojis[shortCode] = {
|
||||
native,
|
||||
search,
|
||||
short_names: [shortCode].concat(short_names),
|
||||
unified: unified || unicodeToUnifiedName(native),
|
||||
};
|
||||
});
|
||||
|
||||
export {
|
||||
emojis,
|
||||
skins,
|
||||
categories,
|
||||
short_names,
|
||||
};
|
||||
|
||||
export default {
|
||||
emojis,
|
||||
skins,
|
||||
categories,
|
||||
short_names,
|
||||
};
|
||||
@ -1,183 +0,0 @@
|
||||
// This code is largely borrowed from:
|
||||
// https://github.com/missive/emoji-mart/blob/5f2ffcc/src/utils/emoji-index.js
|
||||
|
||||
import data from './emoji-mart-data-light';
|
||||
import { getData, getSanitizedData, uniq, intersect } from './emoji-utils';
|
||||
|
||||
const originalPool = {};
|
||||
let index = {};
|
||||
const emojisList = {};
|
||||
const emoticonsList = {};
|
||||
let customEmojisList = [];
|
||||
|
||||
for (const emoji in data.emojis) {
|
||||
const emojiData = data.emojis[emoji];
|
||||
const { short_names, emoticons } = emojiData;
|
||||
const id = short_names[0];
|
||||
|
||||
if (emoticons) {
|
||||
emoticons.forEach(emoticon => {
|
||||
if (emoticonsList[emoticon]) {
|
||||
return;
|
||||
}
|
||||
|
||||
emoticonsList[emoticon] = id;
|
||||
});
|
||||
}
|
||||
|
||||
emojisList[id] = getSanitizedData(id);
|
||||
originalPool[id] = emojiData;
|
||||
}
|
||||
|
||||
function clearCustomEmojis(pool) {
|
||||
customEmojisList.forEach((emoji) => {
|
||||
const emojiId = emoji.id || emoji.short_names[0];
|
||||
|
||||
delete pool[emojiId];
|
||||
delete emojisList[emojiId];
|
||||
});
|
||||
}
|
||||
|
||||
export function addCustomToPool(custom, pool = originalPool) {
|
||||
if (customEmojisList.length) clearCustomEmojis(pool);
|
||||
|
||||
custom.forEach((emoji) => {
|
||||
const emojiId = emoji.id || emoji.short_names[0];
|
||||
|
||||
if (emojiId && !pool[emojiId]) {
|
||||
pool[emojiId] = getData(emoji);
|
||||
emojisList[emojiId] = getSanitizedData(emoji);
|
||||
}
|
||||
});
|
||||
|
||||
customEmojisList = custom;
|
||||
index = {};
|
||||
}
|
||||
|
||||
export function search(value, { emojisToShowFilter, maxResults, include, exclude, custom } = {}) {
|
||||
if (custom !== undefined) {
|
||||
if (customEmojisList !== custom)
|
||||
addCustomToPool(custom, originalPool);
|
||||
} else {
|
||||
custom = [];
|
||||
}
|
||||
|
||||
maxResults = maxResults || 75;
|
||||
include = include || [];
|
||||
exclude = exclude || [];
|
||||
|
||||
let results = null,
|
||||
pool = originalPool;
|
||||
|
||||
if (value.length) {
|
||||
if (value === '-' || value === '-1') {
|
||||
return [emojisList['-1']];
|
||||
}
|
||||
|
||||
let values = value.toLowerCase().split(/[\s|,|\-|_]+/),
|
||||
allResults = [];
|
||||
|
||||
if (values.length > 2) {
|
||||
values = [values[0], values[1]];
|
||||
}
|
||||
|
||||
if (include.length || exclude.length) {
|
||||
pool = {};
|
||||
|
||||
data.categories.forEach(category => {
|
||||
const isIncluded = include && include.length ? include.includes(category.name.toLowerCase()) : true;
|
||||
const isExcluded = exclude && exclude.length ? exclude.includes(category.name.toLowerCase()) : false;
|
||||
if (!isIncluded || isExcluded) {
|
||||
return;
|
||||
}
|
||||
|
||||
category.emojis.forEach(emojiId => pool[emojiId] = data.emojis[emojiId]);
|
||||
});
|
||||
|
||||
if (custom.length) {
|
||||
const customIsIncluded = include && include.length ? include.includes('custom') : true;
|
||||
const customIsExcluded = exclude && exclude.length ? exclude.includes('custom') : false;
|
||||
if (customIsIncluded && !customIsExcluded) {
|
||||
addCustomToPool(custom, pool);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const searchValue = (value) => {
|
||||
let aPool = pool,
|
||||
aIndex = index,
|
||||
length = 0;
|
||||
|
||||
for (let charIndex = 0; charIndex < value.length; charIndex++) {
|
||||
const char = value[charIndex];
|
||||
length++;
|
||||
|
||||
aIndex[char] = aIndex[char] || {};
|
||||
aIndex = aIndex[char];
|
||||
|
||||
if (!aIndex.results) {
|
||||
const scores = {};
|
||||
|
||||
aIndex.results = [];
|
||||
aIndex.pool = {};
|
||||
|
||||
for (const id in aPool) {
|
||||
const emoji = aPool[id],
|
||||
{ search } = emoji,
|
||||
sub = value.substr(0, length),
|
||||
subIndex = search.indexOf(sub);
|
||||
|
||||
if (subIndex !== -1) {
|
||||
let score = subIndex + 1;
|
||||
if (sub === id) score = 0;
|
||||
|
||||
aIndex.results.push(emojisList[id]);
|
||||
aIndex.pool[id] = emoji;
|
||||
|
||||
scores[id] = score;
|
||||
}
|
||||
}
|
||||
|
||||
aIndex.results.sort((a, b) => {
|
||||
const aScore = scores[a.id],
|
||||
bScore = scores[b.id];
|
||||
|
||||
return aScore - bScore;
|
||||
});
|
||||
}
|
||||
|
||||
aPool = aIndex.pool;
|
||||
}
|
||||
|
||||
return aIndex.results;
|
||||
};
|
||||
|
||||
if (values.length > 1) {
|
||||
results = searchValue(value);
|
||||
} else {
|
||||
results = [];
|
||||
}
|
||||
|
||||
allResults = values.map(searchValue).filter(a => a);
|
||||
|
||||
if (allResults.length > 1) {
|
||||
allResults = intersect.apply(null, allResults);
|
||||
} else if (allResults.length) {
|
||||
allResults = allResults[0];
|
||||
}
|
||||
|
||||
results = uniq(results.concat(allResults));
|
||||
}
|
||||
|
||||
if (results) {
|
||||
if (emojisToShowFilter) {
|
||||
results = results.filter((result) => emojisToShowFilter(data.emojis[result.id]));
|
||||
}
|
||||
|
||||
if (results && results.length > maxResults) {
|
||||
results = results.slice(0, maxResults);
|
||||
}
|
||||
}
|
||||
|
||||
return results;
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
// @ts-ignore no types
|
||||
import Emoji from 'emoji-mart/dist-es/components/emoji/emoji';
|
||||
// @ts-ignore no types
|
||||
import Picker from 'emoji-mart/dist-es/components/picker/picker';
|
||||
|
||||
export {
|
||||
Picker,
|
||||
Emoji,
|
||||
};
|
||||
@ -1,32 +0,0 @@
|
||||
// A mapping of unicode strings to an object containing the filename
|
||||
// (i.e. the svg filename) and a shortCode intended to be shown
|
||||
// as a "title" attribute in an HTML element (aka tooltip).
|
||||
|
||||
const [
|
||||
shortCodesToEmojiData,
|
||||
skins, // eslint-disable-line @typescript-eslint/no-unused-vars
|
||||
categories, // eslint-disable-line @typescript-eslint/no-unused-vars
|
||||
short_names, // eslint-disable-line @typescript-eslint/no-unused-vars
|
||||
emojisWithoutShortCodes,
|
||||
] = require('./emoji-compressed');
|
||||
const { unicodeToFilename } = require('./unicode-to-filename');
|
||||
|
||||
// decompress
|
||||
const unicodeMapping = {};
|
||||
|
||||
function processEmojiMapData(emojiMapData, shortCode) {
|
||||
const [ native, filename ] = emojiMapData;
|
||||
|
||||
unicodeMapping[native] = {
|
||||
shortCode,
|
||||
filename: filename || unicodeToFilename(native),
|
||||
};
|
||||
}
|
||||
|
||||
Object.keys(shortCodesToEmojiData).forEach((shortCode) => {
|
||||
const [ filenameData ] = shortCodesToEmojiData[shortCode];
|
||||
filenameData.forEach(emojiMapData => processEmojiMapData(emojiMapData, shortCode));
|
||||
});
|
||||
emojisWithoutShortCodes.forEach(emojiMapData => processEmojiMapData(emojiMapData));
|
||||
|
||||
module.exports = unicodeMapping;
|
||||
@ -1,253 +0,0 @@
|
||||
// This code is largely borrowed from:
|
||||
// https://github.com/missive/emoji-mart/blob/5f2ffcc/src/utils/index.js
|
||||
|
||||
import data from './emoji-mart-data-light';
|
||||
|
||||
const buildSearch = (data) => {
|
||||
const search = [];
|
||||
|
||||
const addToSearch = (strings, split) => {
|
||||
if (!strings) {
|
||||
return;
|
||||
}
|
||||
|
||||
(Array.isArray(strings) ? strings : [strings]).forEach((string) => {
|
||||
(split ? string.split(/[-|_|\s]+/) : [string]).forEach((s) => {
|
||||
s = s.toLowerCase();
|
||||
|
||||
if (!search.includes(s)) {
|
||||
search.push(s);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
addToSearch(data.short_names, true);
|
||||
addToSearch(data.name, true);
|
||||
addToSearch(data.keywords, false);
|
||||
addToSearch(data.emoticons, false);
|
||||
|
||||
return search.join(',');
|
||||
};
|
||||
|
||||
const _String = String;
|
||||
|
||||
const stringFromCodePoint = _String.fromCodePoint || function() {
|
||||
const MAX_SIZE = 0x4000;
|
||||
const codeUnits = [];
|
||||
let highSurrogate;
|
||||
let lowSurrogate;
|
||||
let index = -1;
|
||||
const length = arguments.length;
|
||||
if (!length) {
|
||||
return '';
|
||||
}
|
||||
let result = '';
|
||||
while (++index < length) {
|
||||
let codePoint = Number(arguments[index]);
|
||||
if (
|
||||
!isFinite(codePoint) || // `NaN`, `+Infinity`, or `-Infinity`
|
||||
codePoint < 0 || // not a valid Unicode code point
|
||||
codePoint > 0x10FFFF || // not a valid Unicode code point
|
||||
Math.floor(codePoint) !== codePoint // not an integer
|
||||
) {
|
||||
throw RangeError('Invalid code point: ' + codePoint);
|
||||
}
|
||||
if (codePoint <= 0xFFFF) { // BMP code point
|
||||
codeUnits.push(codePoint);
|
||||
} else { // Astral code point; split in surrogate halves
|
||||
// http://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
|
||||
codePoint -= 0x10000;
|
||||
highSurrogate = (codePoint >> 10) + 0xD800;
|
||||
lowSurrogate = (codePoint % 0x400) + 0xDC00;
|
||||
codeUnits.push(highSurrogate, lowSurrogate);
|
||||
}
|
||||
if (index + 1 === length || codeUnits.length > MAX_SIZE) {
|
||||
result += String.fromCharCode.apply(null, codeUnits);
|
||||
codeUnits.length = 0;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
const _JSON = JSON;
|
||||
|
||||
const COLONS_REGEX = /^(?:\:([^\:]+)\:)(?:\:skin-tone-(\d)\:)?$/;
|
||||
const SKINS = [
|
||||
'1F3FA', '1F3FB', '1F3FC',
|
||||
'1F3FD', '1F3FE', '1F3FF',
|
||||
];
|
||||
|
||||
function unifiedToNative(unified) {
|
||||
const unicodes = unified.split('-'),
|
||||
codePoints = unicodes.map((u) => `0x${u}`);
|
||||
|
||||
return stringFromCodePoint.apply(null, codePoints);
|
||||
}
|
||||
|
||||
function sanitize(emoji) {
|
||||
const { name, short_names, skin_tone, skin_variations, emoticons, unified, custom, imageUrl } = emoji;
|
||||
const id = emoji.id || short_names[0];
|
||||
const colons = `:${id}:`;
|
||||
|
||||
if (custom) {
|
||||
return {
|
||||
id,
|
||||
name,
|
||||
colons,
|
||||
emoticons,
|
||||
custom,
|
||||
imageUrl,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
id,
|
||||
name,
|
||||
colons: skin_tone ? `${colons}:skin-tone-${skin_tone}:` : colons,
|
||||
emoticons,
|
||||
unified: unified.toLowerCase(),
|
||||
skin: skin_tone || (skin_variations ? 1 : null),
|
||||
native: unifiedToNative(unified),
|
||||
};
|
||||
}
|
||||
|
||||
function getSanitizedData() {
|
||||
return sanitize(getData(...arguments));
|
||||
}
|
||||
|
||||
function getData(emoji, skin, set) {
|
||||
let emojiData = {};
|
||||
|
||||
if (typeof emoji === 'string') {
|
||||
const matches = emoji.match(COLONS_REGEX);
|
||||
|
||||
if (matches) {
|
||||
emoji = matches[1];
|
||||
|
||||
if (matches[2]) {
|
||||
skin = parseInt(matches[2]);
|
||||
}
|
||||
}
|
||||
|
||||
if (Object.prototype.hasOwnProperty.call(data.short_names, emoji)) {
|
||||
emoji = data.short_names[emoji];
|
||||
}
|
||||
|
||||
if (Object.prototype.hasOwnProperty.call(data.emojis, emoji)) {
|
||||
emojiData = data.emojis[emoji];
|
||||
}
|
||||
} else if (emoji.id) {
|
||||
if (Object.prototype.hasOwnProperty.call(data.short_names, emoji.id)) {
|
||||
emoji.id = data.short_names[emoji.id];
|
||||
}
|
||||
|
||||
if (Object.prototype.hasOwnProperty.call(data.emojis, emoji.id)) {
|
||||
emojiData = data.emojis[emoji.id];
|
||||
skin = skin || emoji.skin;
|
||||
}
|
||||
}
|
||||
|
||||
if (!Object.keys(emojiData).length) {
|
||||
emojiData = emoji;
|
||||
emojiData.custom = true;
|
||||
|
||||
if (!emojiData.search) {
|
||||
emojiData.search = buildSearch(emoji);
|
||||
}
|
||||
}
|
||||
|
||||
emojiData.emoticons = emojiData.emoticons || [];
|
||||
emojiData.variations = emojiData.variations || [];
|
||||
|
||||
if (emojiData.skin_variations && skin > 1 && set) {
|
||||
emojiData = JSON.parse(_JSON.stringify(emojiData));
|
||||
|
||||
const skinKey = SKINS[skin - 1],
|
||||
variationData = emojiData.skin_variations[skinKey];
|
||||
|
||||
if (!variationData.variations && emojiData.variations) {
|
||||
delete emojiData.variations;
|
||||
}
|
||||
|
||||
if (variationData[`has_img_${set}`]) {
|
||||
emojiData.skin_tone = skin;
|
||||
|
||||
for (const k in variationData) {
|
||||
const v = variationData[k];
|
||||
emojiData[k] = v;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (emojiData.variations && emojiData.variations.length) {
|
||||
emojiData = JSON.parse(_JSON.stringify(emojiData));
|
||||
emojiData.unified = emojiData.variations.shift();
|
||||
}
|
||||
|
||||
return emojiData;
|
||||
}
|
||||
|
||||
function uniq(arr) {
|
||||
return arr.reduce((acc, item) => {
|
||||
if (!acc.includes(item)) {
|
||||
acc.push(item);
|
||||
}
|
||||
return acc;
|
||||
}, []);
|
||||
}
|
||||
|
||||
function intersect(a, b) {
|
||||
const uniqA = uniq(a);
|
||||
const uniqB = uniq(b);
|
||||
|
||||
return uniqA.filter(item => uniqB.includes(item));
|
||||
}
|
||||
|
||||
function deepMerge(a, b) {
|
||||
const o = {};
|
||||
|
||||
for (const key in a) {
|
||||
const originalValue = a[key];
|
||||
let value = originalValue;
|
||||
|
||||
if (Object.prototype.hasOwnProperty.call(b, key)) {
|
||||
value = b[key];
|
||||
}
|
||||
|
||||
if (typeof value === 'object') {
|
||||
value = deepMerge(originalValue, value);
|
||||
}
|
||||
|
||||
o[key] = value;
|
||||
}
|
||||
|
||||
return o;
|
||||
}
|
||||
|
||||
// https://github.com/sonicdoe/measure-scrollbar
|
||||
function measureScrollbar() {
|
||||
const div = document.createElement('div');
|
||||
|
||||
div.style.width = '100px';
|
||||
div.style.height = '100px';
|
||||
div.style.overflow = 'scroll';
|
||||
div.style.position = 'absolute';
|
||||
div.style.top = '-9999px';
|
||||
|
||||
document.body.appendChild(div);
|
||||
const scrollbarWidth = div.offsetWidth - div.clientWidth;
|
||||
document.body.removeChild(div);
|
||||
|
||||
return scrollbarWidth;
|
||||
}
|
||||
|
||||
export {
|
||||
getData,
|
||||
getSanitizedData,
|
||||
uniq,
|
||||
intersect,
|
||||
deepMerge,
|
||||
unifiedToNative,
|
||||
measureScrollbar,
|
||||
};
|
||||
@ -1,132 +0,0 @@
|
||||
import Trie from 'substring-trie';
|
||||
|
||||
import { joinPublicPath } from 'soapbox/utils/static';
|
||||
|
||||
import unicodeMapping from './emoji-unicode-mapping-light';
|
||||
|
||||
const trie = new Trie(Object.keys(unicodeMapping));
|
||||
|
||||
const emojifyTextNode = (node, customEmojis, autoPlayGif = false) => {
|
||||
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] === ':') {
|
||||
// eslint-disable-next-line no-loop-func
|
||||
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', joinPublicPath(`packs/emoji/${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);
|
||||
}
|
||||
node.textContent = str.slice(0, i);
|
||||
str = str.slice(rend);
|
||||
}
|
||||
|
||||
fragment.append(document.createTextNode(str));
|
||||
node.parentElement.replaceChild(fragment, node);
|
||||
};
|
||||
|
||||
const emojifyNode = (node, customEmojis, autoPlayGif = false) => {
|
||||
for (const child of node.childNodes) {
|
||||
switch (child.nodeType) {
|
||||
case Node.TEXT_NODE:
|
||||
emojifyTextNode(child, customEmojis, autoPlayGif);
|
||||
break;
|
||||
case Node.ELEMENT_NODE:
|
||||
if (!child.classList.contains('invisible'))
|
||||
emojifyNode(child, customEmojis, autoPlayGif);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const emojify = (str, customEmojis = {}, autoPlayGif = false) => {
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.innerHTML = str;
|
||||
|
||||
if (!Object.keys(customEmojis).length)
|
||||
customEmojis = null;
|
||||
|
||||
emojifyNode(wrapper, customEmojis, autoPlayGif);
|
||||
|
||||
return wrapper.innerHTML;
|
||||
};
|
||||
|
||||
export default emojify;
|
||||
|
||||
export const buildCustomEmojis = (customEmojis, autoPlayGif = false) => {
|
||||
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']));
|
||||
@ -0,0 +1,228 @@
|
||||
import split from 'graphemesplit';
|
||||
|
||||
import unicodeMapping from './mapping';
|
||||
|
||||
import type { Emoji as EmojiMart, CustomEmoji as EmojiMartCustom } from 'soapbox/features/emoji/data';
|
||||
|
||||
/*
|
||||
* TODO: Consolate emoji object types
|
||||
*
|
||||
* There are five different emoji objects currently
|
||||
* - emoji-mart's "onPickEmoji" handler
|
||||
* - emoji-mart's custom emoji types
|
||||
* - an Emoji type that is either NativeEmoji or CustomEmoji
|
||||
* - a type inside redux's `store.custom_emoji` immutablejs
|
||||
*
|
||||
* there needs to be one type for the picker handler callback
|
||||
* and one type for the emoji-mart data
|
||||
* and one type that is used everywhere that the above two are converted into
|
||||
*/
|
||||
|
||||
export interface CustomEmoji {
|
||||
id: string
|
||||
colons: string
|
||||
custom: true
|
||||
imageUrl: string
|
||||
}
|
||||
|
||||
export interface NativeEmoji {
|
||||
id: string
|
||||
colons: string
|
||||
custom?: boolean
|
||||
unified: string
|
||||
native: string
|
||||
}
|
||||
|
||||
export type Emoji = CustomEmoji | NativeEmoji;
|
||||
|
||||
export function isCustomEmoji(emoji: Emoji): emoji is CustomEmoji {
|
||||
return (emoji as CustomEmoji).imageUrl !== undefined;
|
||||
}
|
||||
|
||||
export function isNativeEmoji(emoji: Emoji): emoji is NativeEmoji {
|
||||
return (emoji as NativeEmoji).native !== undefined;
|
||||
}
|
||||
|
||||
const isAlphaNumeric = (c: string) => {
|
||||
const code = c.charCodeAt(0);
|
||||
|
||||
if (!(code > 47 && code < 58) && // numeric (0-9)
|
||||
!(code > 64 && code < 91) && // upper alpha (A-Z)
|
||||
!(code > 96 && code < 123)) { // lower alpha (a-z)
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
const validEmojiChar = (c: string) => {
|
||||
return isAlphaNumeric(c)
|
||||
|| c === '_'
|
||||
|| c === '-'
|
||||
|| c === '.';
|
||||
};
|
||||
|
||||
const convertCustom = (shortname: string, filename: string) => {
|
||||
return `<img draggable="false" class="emojione" alt="${shortname}" title="${shortname}" src="${filename}" />`;
|
||||
};
|
||||
|
||||
const convertUnicode = (c: string) => {
|
||||
const { unified, shortcode } = unicodeMapping[c];
|
||||
|
||||
return `<img draggable="false" class="emojione" alt="${c}" title=":${shortcode}:" src="/packs/emoji/${unified}.svg" />`;
|
||||
};
|
||||
|
||||
const convertEmoji = (str: string, customEmojis: any) => {
|
||||
if (str.length < 3) return str;
|
||||
if (str in customEmojis) {
|
||||
const emoji = customEmojis[str];
|
||||
const filename = emoji.static_url;
|
||||
|
||||
if (filename?.length > 0) {
|
||||
return convertCustom(str, filename);
|
||||
}
|
||||
}
|
||||
|
||||
return str;
|
||||
};
|
||||
|
||||
export const emojifyText = (str: string, customEmojis = {}) => {
|
||||
let buf = '';
|
||||
let stack = '';
|
||||
let open = false;
|
||||
|
||||
const clearStack = () => {
|
||||
buf += stack;
|
||||
open = false;
|
||||
stack = '';
|
||||
};
|
||||
|
||||
for (let c of split(str)) {
|
||||
// convert FE0E selector to FE0F so it can be found in unimap
|
||||
if (c.codePointAt(c.length - 1) === 65038) {
|
||||
c = c.slice(0, -1) + String.fromCodePoint(65039);
|
||||
}
|
||||
|
||||
// unqualified emojis aren't in emoji-mart's mappings so we just add FEOF
|
||||
const unqualified = c + String.fromCodePoint(65039);
|
||||
|
||||
if (c in unicodeMapping) {
|
||||
if (open) { // unicode emoji inside colon
|
||||
clearStack();
|
||||
}
|
||||
|
||||
buf += convertUnicode(c);
|
||||
} else if (unqualified in unicodeMapping) {
|
||||
if (open) { // unicode emoji inside colon
|
||||
clearStack();
|
||||
}
|
||||
|
||||
buf += convertUnicode(unqualified);
|
||||
} else if (c === ':') {
|
||||
stack += ':';
|
||||
|
||||
// we see another : we convert it and clear the stack buffer
|
||||
if (open) {
|
||||
buf += convertEmoji(stack, customEmojis);
|
||||
stack = '';
|
||||
}
|
||||
|
||||
open = !open;
|
||||
} else {
|
||||
if (open) {
|
||||
stack += c;
|
||||
|
||||
// if the stack is non-null and we see invalid chars it's a string not emoji
|
||||
// so we push it to the return result and clear it
|
||||
if (!validEmojiChar(c)) {
|
||||
clearStack();
|
||||
}
|
||||
} else {
|
||||
buf += c;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// never found a closing colon so it's just a raw string
|
||||
if (open) {
|
||||
buf += stack;
|
||||
}
|
||||
|
||||
return buf;
|
||||
};
|
||||
|
||||
export const parseHTML = (str: string): { text: boolean, data: string }[] => {
|
||||
const tokens = [];
|
||||
let buf = '';
|
||||
let stack = '';
|
||||
let open = false;
|
||||
|
||||
for (const c of str) {
|
||||
if (c === '<') {
|
||||
if (open) {
|
||||
tokens.push({ text: true, data: stack });
|
||||
stack = '<';
|
||||
} else {
|
||||
tokens.push({ text: true, data: buf });
|
||||
stack = '<';
|
||||
open = true;
|
||||
}
|
||||
} else if (c === '>') {
|
||||
if (open) {
|
||||
open = false;
|
||||
tokens.push({ text: false, data: stack + '>' });
|
||||
stack = '';
|
||||
buf = '';
|
||||
} else {
|
||||
buf += '>';
|
||||
}
|
||||
|
||||
} else {
|
||||
if (open) {
|
||||
stack += c;
|
||||
} else {
|
||||
buf += c;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (open) {
|
||||
tokens.push({ text: true, data: buf + stack });
|
||||
} else if (buf !== '') {
|
||||
tokens.push({ text: true, data: buf });
|
||||
}
|
||||
|
||||
return tokens;
|
||||
};
|
||||
|
||||
const emojify = (str: string, customEmojis = {}) => {
|
||||
return parseHTML(str)
|
||||
.map(({ text, data }) => {
|
||||
if (!text) return data;
|
||||
if (data.length === 0 || data === ' ') return data;
|
||||
|
||||
return emojifyText(data, customEmojis);
|
||||
})
|
||||
.join('');
|
||||
};
|
||||
|
||||
export default emojify;
|
||||
|
||||
export const buildCustomEmojis = (customEmojis: any) => {
|
||||
const emojis: EmojiMart<EmojiMartCustom>[] = [];
|
||||
|
||||
customEmojis.forEach((emoji: any) => {
|
||||
const shortcode = emoji.get('shortcode');
|
||||
const url = emoji.get('static_url');
|
||||
const name = shortcode.replace(':', '');
|
||||
|
||||
emojis.push({
|
||||
id: name,
|
||||
name,
|
||||
keywords: [name],
|
||||
skins: [{ src: url }],
|
||||
});
|
||||
});
|
||||
|
||||
return emojis;
|
||||
};
|
||||
@ -0,0 +1,111 @@
|
||||
import data, { EmojiData } from './data';
|
||||
|
||||
const stripLeadingZeros = /^0+/;
|
||||
|
||||
function replaceAll(str: string, find: string, replace: string) {
|
||||
return str.replace(new RegExp(find, 'g'), replace);
|
||||
}
|
||||
|
||||
interface UnicodeMap {
|
||||
[s: string]: {
|
||||
unified: string
|
||||
shortcode: string
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Twemoji strips their hex codes from unicode codepoints to make it look "pretty"
|
||||
* - leading 0s are removed
|
||||
* - fe0f is removed unless it has 200d
|
||||
* - fe0f is NOT removed for 1f441-fe0f-200d-1f5e8-fe0f even though it has a 200d
|
||||
*
|
||||
* this is all wrong
|
||||
*/
|
||||
|
||||
const blacklist = {
|
||||
'1f441-fe0f-200d-1f5e8-fe0f': true,
|
||||
};
|
||||
|
||||
const tweaks = {
|
||||
'#⃣': ['23-20e3', 'hash'],
|
||||
'*⃣': ['2a-20e3', 'keycap_star'],
|
||||
'0⃣': ['30-20e3', 'zero'],
|
||||
'1⃣': ['31-20e3', 'one'],
|
||||
'2⃣': ['32-20e3', 'two'],
|
||||
'3⃣': ['33-20e3', 'three'],
|
||||
'4⃣': ['34-20e3', 'four'],
|
||||
'5⃣': ['35-20e3', 'five'],
|
||||
'6⃣': ['36-20e3', 'six'],
|
||||
'7⃣': ['37-20e3', 'seven'],
|
||||
'8⃣': ['38-20e3', 'eight'],
|
||||
'9⃣': ['39-20e3', 'nine'],
|
||||
'❤🔥': ['2764-fe0f-200d-1f525', 'heart_on_fire'],
|
||||
'❤🩹': ['2764-fe0f-200d-1fa79', 'mending_heart'],
|
||||
'👁🗨️': ['1f441-fe0f-200d-1f5e8-fe0f', 'eye-in-speech-bubble'],
|
||||
'👁️🗨': ['1f441-fe0f-200d-1f5e8-fe0f', 'eye-in-speech-bubble'],
|
||||
'👁🗨': ['1f441-fe0f-200d-1f5e8-fe0f', 'eye-in-speech-bubble'],
|
||||
'🕵♂️': ['1f575-fe0f-200d-2642-fe0f', 'male-detective'],
|
||||
'🕵️♂': ['1f575-fe0f-200d-2642-fe0f', 'male-detective'],
|
||||
'🕵♂': ['1f575-fe0f-200d-2642-fe0f', 'male-detective'],
|
||||
'🕵♀️': ['1f575-fe0f-200d-2640-fe0f', 'female-detective'],
|
||||
'🕵️♀': ['1f575-fe0f-200d-2640-fe0f', 'female-detective'],
|
||||
'🕵♀': ['1f575-fe0f-200d-2640-fe0f', 'female-detective'],
|
||||
'🏌♂️': ['1f3cc-fe0f-200d-2642-fe0f', 'man-golfing'],
|
||||
'🏌️♂': ['1f3cc-fe0f-200d-2642-fe0f', 'man-golfing'],
|
||||
'🏌♂': ['1f3cc-fe0f-200d-2642-fe0f', 'man-golfing'],
|
||||
'🏌♀️': ['1f3cc-fe0f-200d-2640-fe0f', 'woman-golfing'],
|
||||
'🏌️♀': ['1f3cc-fe0f-200d-2640-fe0f', 'woman-golfing'],
|
||||
'🏌♀': ['1f3cc-fe0f-200d-2640-fe0f', 'woman-golfing'],
|
||||
'⛹♂️': ['26f9-fe0f-200d-2642-fe0f', 'man-bouncing-ball'],
|
||||
'⛹️♂': ['26f9-fe0f-200d-2642-fe0f', 'man-bouncing-ball'],
|
||||
'⛹♂': ['26f9-fe0f-200d-2642-fe0f', 'man-bouncing-ball'],
|
||||
'⛹♀️': ['26f9-fe0f-200d-2640-fe0f', 'woman-bouncing-ball'],
|
||||
'⛹️♀': ['26f9-fe0f-200d-2640-fe0f', 'woman-bouncing-ball'],
|
||||
'⛹♀': ['26f9-fe0f-200d-2640-fe0f', 'woman-bouncing-ball'],
|
||||
'🏋♂️': ['1f3cb-fe0f-200d-2642-fe0f', 'man-lifting-weights'],
|
||||
'🏋️♂': ['1f3cb-fe0f-200d-2642-fe0f', 'man-lifting-weights'],
|
||||
'🏋♂': ['1f3cb-fe0f-200d-2642-fe0f', 'man-lifting-weights'],
|
||||
'🏋♀️': ['1f3cb-fe0f-200d-2640-fe0f', 'woman-lifting-weights'],
|
||||
'🏋️♀': ['1f3cb-fe0f-200d-2640-fe0f', 'woman-lifting-weights'],
|
||||
'🏋♀': ['1f3cb-fe0f-200d-2640-fe0f', 'woman-lifting-weights'],
|
||||
'🏳🌈': ['1f3f3-fe0f-200d-1f308', 'rainbow_flag'],
|
||||
'🏳⚧️': ['1f3f3-fe0f-200d-26a7-fe0f', 'transgender_flag'],
|
||||
'🏳️⚧': ['1f3f3-fe0f-200d-26a7-fe0f', 'transgender_flag'],
|
||||
'🏳⚧': ['1f3f3-fe0f-200d-26a7-fe0f', 'transgender_flag'],
|
||||
};
|
||||
|
||||
const stripcodes = (unified: string, native: string) => {
|
||||
const stripped = unified.replace(stripLeadingZeros, '');
|
||||
|
||||
if (unified.includes('200d') && !(unified in blacklist)) {
|
||||
return stripped;
|
||||
} else {
|
||||
return replaceAll(stripped, '-fe0f', '');
|
||||
}
|
||||
};
|
||||
|
||||
export const generateMappings = (data: EmojiData): UnicodeMap => {
|
||||
const result: UnicodeMap = {};
|
||||
const emojis = Object.values(data.emojis ?? {});
|
||||
|
||||
for (const value of emojis) {
|
||||
for (const item of value.skins) {
|
||||
const { unified, native } = item;
|
||||
const stripped = stripcodes(unified, native);
|
||||
|
||||
result[native] = { unified: stripped, shortcode: value.id };
|
||||
}
|
||||
}
|
||||
|
||||
for (const [native, [unified, shortcode]] of Object.entries(tweaks)) {
|
||||
const stripped = stripcodes(unified, native);
|
||||
|
||||
result[native] = { unified: stripped, shortcode };
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
const unicodeMapping = generateMappings(data);
|
||||
|
||||
export default unicodeMapping;
|
||||
@ -0,0 +1,65 @@
|
||||
import { Index } from 'flexsearch';
|
||||
|
||||
import data from './data';
|
||||
|
||||
import type { Emoji } from './index';
|
||||
// import type { Emoji as EmojiMart, CustomEmoji } from 'emoji-mart';
|
||||
|
||||
// @ts-ignore
|
||||
const index = new Index({
|
||||
tokenize: 'full',
|
||||
optimize: true,
|
||||
context: true,
|
||||
});
|
||||
|
||||
for (const [key, emoji] of Object.entries(data.emojis)) {
|
||||
index.add('n' + key, emoji.name);
|
||||
}
|
||||
|
||||
export interface searchOptions {
|
||||
maxResults?: number
|
||||
custom?: any
|
||||
}
|
||||
|
||||
export const addCustomToPool = (customEmojis: any[]) => {
|
||||
// @ts-ignore
|
||||
for (const key in index.register) {
|
||||
if (key[0] === 'c') {
|
||||
index.remove(key); // remove old custom emojis
|
||||
}
|
||||
}
|
||||
|
||||
let i = 0;
|
||||
|
||||
for (const emoji of customEmojis) {
|
||||
index.add('c' + i++, emoji.id);
|
||||
}
|
||||
};
|
||||
|
||||
// we can share an index by prefixing custom emojis with 'c' and native with 'n'
|
||||
const search = (str: string, { maxResults = 5, custom }: searchOptions = {}, custom_emojis?: any): Emoji[] => {
|
||||
return index.search(str, maxResults)
|
||||
.flatMap((id: string) => {
|
||||
if (id[0] === 'c') {
|
||||
const { shortcode, static_url } = custom_emojis.get((id as string).slice(1)).toJS();
|
||||
|
||||
return {
|
||||
id: shortcode,
|
||||
colons: ':' + shortcode + ':',
|
||||
custom: true,
|
||||
imageUrl: static_url,
|
||||
};
|
||||
}
|
||||
|
||||
const { skins } = data.emojis[(id as string).slice(1)];
|
||||
|
||||
return {
|
||||
id: (id as string).slice(1),
|
||||
colons: ':' + id.slice(1) + ':',
|
||||
unified: skins[0].unified,
|
||||
native: skins[0].native,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
export default search;
|
||||
@ -1,26 +0,0 @@
|
||||
// taken from:
|
||||
// https://github.com/twitter/twemoji/blob/47732c7/twemoji-generator.js#L848-L866
|
||||
exports.unicodeToFilename = (str) => {
|
||||
let result = '';
|
||||
let charCode = 0;
|
||||
let p = 0;
|
||||
let i = 0;
|
||||
while (i < str.length) {
|
||||
charCode = str.charCodeAt(i++);
|
||||
if (p) {
|
||||
if (result.length > 0) {
|
||||
result += '-';
|
||||
}
|
||||
result += (0x10000 + ((p - 0xD800) << 10) + (charCode - 0xDC00)).toString(16);
|
||||
p = 0;
|
||||
} else if (0xD800 <= charCode && charCode <= 0xDBFF) {
|
||||
p = charCode;
|
||||
} else {
|
||||
if (result.length > 0) {
|
||||
result += '-';
|
||||
}
|
||||
result += charCode.toString(16);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
};
|
||||
@ -1,21 +0,0 @@
|
||||
function padLeft(str, num) {
|
||||
while (str.length < num) {
|
||||
str = '0' + str;
|
||||
}
|
||||
|
||||
return str;
|
||||
}
|
||||
|
||||
exports.unicodeToUnifiedName = (str) => {
|
||||
let output = '';
|
||||
|
||||
for (let i = 0; i < str.length; i += 2) {
|
||||
if (i > 0) {
|
||||
output += '-';
|
||||
}
|
||||
|
||||
output += padLeft(str.codePointAt(i).toString(16).toUpperCase(), 4);
|
||||
}
|
||||
|
||||
return output;
|
||||
};
|
||||
@ -1,296 +1,10 @@
|
||||
.emoji-mart,
|
||||
.emoji-mart * {
|
||||
box-sizing: border-box;
|
||||
line-height: 1.15;
|
||||
em-emoji-picker {
|
||||
--rgb-background: 255 255 255;
|
||||
--rgb-accent: var(--color-primary-600);
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.emoji-mart {
|
||||
@apply text-base inline-block text-gray-900 dark:text-gray-100 rounded bg-white dark:bg-primary-900 shadow-lg;
|
||||
}
|
||||
|
||||
.emoji-mart .emoji-mart-emoji {
|
||||
@apply p-1.5 align-middle;
|
||||
}
|
||||
|
||||
.emoji-mart-bar {
|
||||
@apply border-0 border-solid border-gray-200 dark:border-gray-800;
|
||||
}
|
||||
|
||||
.emoji-mart-bar:first-child {
|
||||
border-bottom-width: 1px;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
|
||||
.emoji-mart-bar:last-child {
|
||||
border-top-width: 1px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.emoji-mart-anchors {
|
||||
@apply flex flex-row justify-between px-1.5;
|
||||
}
|
||||
|
||||
.emoji-mart-anchor {
|
||||
@apply relative block flex-auto text-gray-700 dark:text-gray-600 text-center overflow-hidden transition-colors py-3 px-1;
|
||||
}
|
||||
|
||||
.emoji-mart-anchor:focus { outline: 0; }
|
||||
|
||||
.emoji-mart-anchor:hover,
|
||||
.emoji-mart-anchor:focus,
|
||||
.emoji-mart-anchor-selected {
|
||||
@apply text-gray-600 dark:text-gray-300;
|
||||
}
|
||||
|
||||
.emoji-mart-anchor-selected .emoji-mart-anchor-bar {
|
||||
@apply bottom-0;
|
||||
}
|
||||
|
||||
.emoji-mart-anchor-bar {
|
||||
@apply absolute -bottom-0.5 left-0 w-11/12 h-0.5 bg-primary-600;
|
||||
}
|
||||
|
||||
.emoji-mart-anchors i {
|
||||
@apply inline-block w-full;
|
||||
max-width: 22px;
|
||||
}
|
||||
|
||||
.emoji-mart-anchors svg,
|
||||
.emoji-mart-anchors img {
|
||||
fill: currentcolor;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.emoji-mart-scroll {
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
height: 270px;
|
||||
padding: 0 6px 6px;
|
||||
will-change: transform; /* avoids "repaints on scroll" in mobile Chrome */
|
||||
}
|
||||
|
||||
.emoji-mart-search {
|
||||
@apply relative mt-1.5 p-2.5 pr-12 bg-white dark:bg-primary-900;
|
||||
}
|
||||
|
||||
.emoji-mart-search input {
|
||||
@apply text-sm pr-9 block w-full border-gray-300 dark:bg-transparent dark:border-gray-800 rounded-full focus:ring-primary-500 focus:border-primary-500;
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&::-webkit-search-cancel-button {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner,
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-mart-search input,
|
||||
.emoji-mart-search input::-webkit-search-decoration,
|
||||
.emoji-mart-search input::-webkit-search-cancel-button,
|
||||
.emoji-mart-search input::-webkit-search-results-button,
|
||||
.emoji-mart-search input::-webkit-search-results-decoration {
|
||||
/* remove webkit/blink styles for <input type="search">
|
||||
* via https://stackoverflow.com/a/9422689 */
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.emoji-mart-search-icon {
|
||||
@apply absolute z-10 border-0;
|
||||
top: 20px;
|
||||
right: 56px;
|
||||
padding: 2px 5px 1px;
|
||||
}
|
||||
|
||||
.emoji-mart-search-icon svg {
|
||||
@apply fill-gray-700 dark:fill-gray-600;
|
||||
}
|
||||
|
||||
.emoji-mart-search-icon:hover svg {
|
||||
@apply stroke-gray-800;
|
||||
}
|
||||
|
||||
.emoji-mart-category .emoji-mart-emoji span {
|
||||
@apply relative text-center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.emoji-mart-category .emoji-mart-emoji:hover::before {
|
||||
@apply bg-gray-50 dark:bg-primary-800;
|
||||
z-index: 0;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.emoji-mart-category-label {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.emoji-mart-category-label span {
|
||||
@apply bg-white dark:bg-primary-900;
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-weight: 500;
|
||||
padding: 5px 6px;
|
||||
}
|
||||
|
||||
.emoji-mart-category-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.emoji-mart-category-list li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.emoji-mart-emoji {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.emoji-mart-emoji-native {
|
||||
font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI', 'Apple Color Emoji', 'Twemoji Mozilla', 'Noto Color Emoji', 'Android Emoji', sans-serif;
|
||||
}
|
||||
|
||||
.emoji-mart-no-results {
|
||||
@apply text-sm text-center text-gray-600 dark:text-gray-300;
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
.emoji-mart-no-results-img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.emoji-mart-no-results .emoji-mart-category-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.emoji-mart-no-results .emoji-mart-no-results-label {
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
|
||||
.emoji-mart-no-results .emoji-mart-emoji:hover::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.emoji-mart-preview {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
/* For screenreaders only, via https://stackoverflow.com/a/19758620 */
|
||||
.emoji-mart-sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.emoji-picker-dropdown__menu {
|
||||
@apply rounded-lg absolute mt-1.5;
|
||||
transform: translateX(calc(-1 * env(safe-area-inset-right))); /* iOS PWA */
|
||||
z-index: 20000;
|
||||
|
||||
.emoji-mart-scroll {
|
||||
transition: opacity 200ms ease;
|
||||
}
|
||||
|
||||
&.selecting .emoji-mart-scroll {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-picker-dropdown__modifiers {
|
||||
position: absolute;
|
||||
top: 65px;
|
||||
right: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.emoji-picker-dropdown__modifiers__menu {
|
||||
@apply absolute bg-white dark:bg-primary-900 rounded-3xl shadow overflow-hidden;
|
||||
z-index: 4;
|
||||
top: -4px;
|
||||
left: -8px;
|
||||
|
||||
button {
|
||||
@apply block cursor-pointer border-0 px-2 py-1 bg-transparent;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@apply bg-gray-300 dark:bg-primary-600;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-mart-emoji {
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.font-icon-picker {
|
||||
.emoji-mart-search {
|
||||
// Search doesn't work. Hide it for now.
|
||||
display: none;
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
.emoji-mart-category-label > span {
|
||||
padding: 9px 6px 5px;
|
||||
}
|
||||
|
||||
.emoji-mart-scroll {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.emoji-mart-search-icon {
|
||||
right: 18px;
|
||||
}
|
||||
|
||||
.emoji-mart-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fa {
|
||||
font-size: 18px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fa-hack {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.dark em-emoji-picker {
|
||||
--rgb-background: var(--color-primary-900);
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue