mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-24 20:14:35 -04:00
Replace emoji-mart with emoji-picker-element (#620)
* 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:
parent
fe40d7247d
commit
5574f09ef5
15 changed files with 203 additions and 167 deletions
src/components/markdown-renderer/markdown-it-plugins/emoji
|
@ -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
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue