Replace emoji-mart with emoji-picker-element ()

* Change dependencies

* Use emoji-picker-element instead of emoji-mart

* Optimize emoji-picker appeareance and data-source

* Add twemoji font to emoji-picker

* Add missing useEffect dependency

* Add emoji-shortcode map

* Include emoji-data into bundle and remove dynamic fetch

* Rename shortcode-map

* Fix emoji-picker being hidden on second attempt to open it

* Add support for skin-tone short-codes

* Remove whitespace line

* Don't reinitialize the picker on every open

* Fixed linting and test issues

* Update CHANGELOG entry
This commit is contained in:
Erik Michelson 2020-10-10 23:12:17 +02:00 committed by GitHub
parent fe40d7247d
commit 5574f09ef5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 203 additions and 167 deletions
src/components/markdown-renderer/markdown-it-plugins/emoji

View file

@ -1,36 +1,40 @@
import emojiData from 'emoji-mart/data/twitter.json'
import { Data } from 'emoji-mart/dist-es/utils/data'
import { ForkAwesomeIcons } from '../../../editor/editor-pane/tool-bar/emoji-picker/icon-names'
import emojiData from 'emojibase-data/en/compact.json'
export const markdownItTwitterEmojis = Object.keys((emojiData as unknown as Data).emojis)
.reduce((reduceObject, emojiIdentifier) => {
const emoji = (emojiData as unknown as Data).emojis[emojiIdentifier]
const emojiCodes = emoji.unified ?? emoji.b
if (emojiCodes) {
reduceObject[emojiIdentifier] = emojiCodes.split('-').map(char => `&#x${char};`).join('')
}
interface EmojiEntry {
shortcodes: string[]
unicode: string
}
type ShortCodeMap = { [key: string]: string }
const shortCodeMap = (emojiData as unknown as EmojiEntry[])
.reduce((reduceObject, emoji) => {
emoji.shortcodes.forEach(shortcode => {
reduceObject[shortcode] = emoji.unicode
})
return reduceObject
}, {} as { [key: string]: string })
}, {} as ShortCodeMap)
export const emojiSkinToneModifierMap = [2, 3, 4, 5, 6]
const emojiSkinToneModifierMap = [1, 2, 3, 4, 5]
.reduce((reduceObject, modifierValue) => {
const lightSkinCode = 127995
const codepoint = lightSkinCode + (modifierValue - 2)
const codepoint = lightSkinCode + (modifierValue - 1)
const shortcode = `skin-tone-${modifierValue}`
reduceObject[shortcode] = `&#${codepoint};`
return reduceObject
}, {} as { [key: string]: string })
}, {} as ShortCodeMap)
export const forkAwesomeIconMap = Object.keys(ForkAwesomeIcons)
const forkAwesomeIconMap = Object.keys(ForkAwesomeIcons)
.reduce((reduceObject, icon) => {
const shortcode = `fa-${icon}`
// noinspection CheckTagEmptyBody
reduceObject[shortcode] = `<i class="fa fa-${icon}"></i>`
return reduceObject
}, {} as { [key: string]: string })
}, {} as ShortCodeMap)
export const combinedEmojiData = {
...markdownItTwitterEmojis,
...shortCodeMap,
...emojiSkinToneModifierMap,
...forkAwesomeIconMap
}