From a1a7b67e633ad9afd9409db5d5b3ee05e6d270e8 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 14 Aug 2021 21:10:24 -0400
Subject: [PATCH 01/30] Group custom emojis by pack in emoji picker
---
src/components/emoji_picker/emoji_picker.js | 29 ++++++++++++++-----
src/components/emoji_picker/emoji_picker.scss | 13 +++++++++
src/components/emoji_picker/emoji_picker.vue | 10 +++++++
3 files changed, 45 insertions(+), 7 deletions(-)
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 6b589079..ce7738ee 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -182,17 +182,32 @@ const EmojiPicker = {
customEmojiBuffer () {
return this.filteredEmoji.slice(0, this.customEmojiBufferSlice)
},
+ groupedCustomEmojis () {
+ const packOf = emoji => (emoji.tags.filter(k => k.startsWith('pack:'))[0] || '').slice(5)
+ return this.customEmojiBuffer.reduce((res, emoji) => {
+ const pack = packOf(emoji)
+ if (!res[pack]) {
+ res[pack] = {
+ id: `custom-${pack}`,
+ text: pack,
+ /// FIXME
+ // icon: 'smile-beam',
+ image: emoji.imageUrl,
+ emojis: []
+ }
+ }
+ res[pack].emojis.push(emoji)
+ return res
+ }, {})
+ },
emojis () {
const standardEmojis = this.$store.state.instance.emoji || []
- const customEmojis = this.customEmojiBuffer
+ // const customEmojis = this.customEmojiBuffer
return [
- {
- id: 'custom',
- text: this.$t('emoji.custom'),
- icon: 'smile-beam',
- emojis: customEmojis
- },
+ ...Object
+ .keys(this.groupedCustomEmojis)
+ .map(k => this.groupedCustomEmojis[k]),
{
id: 'standard',
text: this.$t('emoji.unicode'),
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index ec711758..46cfa1c8 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -18,6 +18,19 @@
--lightText: var(--popoverLightText, $fallback--lightText);
--icon: var(--popoverIcon, $fallback--icon);
+ &-header-image {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ width: 30px;
+ height: 24px;
+ img {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
+ }
+ }
+
.keep-open,
.too-many-emoji {
padding: 7px;
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 3262a3d9..65aa5bb6 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -13,7 +13,17 @@
:title="group.text"
@click.prevent="highlight(group.id)"
>
+ <span
+ v-if="group.image"
+ class="emoji-picker-header-image"
+ >
+ <img
+ :alt="group.text"
+ :src="group.image"
+ >
+ </span>
<FAIcon
+ v-else
:icon="group.icon"
fixed-width
/>
From 44bedcd725378eb32784999ec92f136ec83c72e2 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 14 Aug 2021 21:23:45 -0400
Subject: [PATCH 02/30] Fix load more emoji action
---
src/components/emoji_picker/emoji_picker.js | 5 ++++-
src/modules/instance.js | 12 +++++++++++-
2 files changed, 15 insertions(+), 2 deletions(-)
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index ce7738ee..ef9c3745 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -97,7 +97,7 @@ const EmojiPicker = {
}
},
triggerLoadMore (target) {
- const ref = this.$refs['group-end-custom']
+ const ref = this.$refs[`group-end-${this.lastNonUnicodeGroupId}`][0]
if (!ref) return
const bottom = ref.offsetTop + ref.offsetHeight
@@ -216,6 +216,9 @@ const EmojiPicker = {
}
]
},
+ lastNonUnicodeGroupId () {
+ return this.emojis[this.emojis.length - 2].id
+ },
emojisView () {
return this.emojis.filter(value => value.emojis.length > 0)
},
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 220463ca..c6d124b9 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -163,6 +163,16 @@ const instance = {
if (res.ok) {
const result = await res.json()
const values = Array.isArray(result) ? Object.assign({}, ...result) : result
+ const caseInsensitiveStrCmp = (a, b) => {
+ const la = a.toLowerCase()
+ const lb = b.toLowerCase()
+ return la > lb ? 1 : (la < lb ? -1 : 0)
+ }
+ const byPackThenByName = (a, b) => {
+ const packOf = emoji => (emoji.tags.filter(k => k.startsWith('pack:'))[0] || '').slice(5)
+ return caseInsensitiveStrCmp(packOf(a), packOf(b)) || caseInsensitiveStrCmp(a.displayText, b.displayText)
+ }
+
const emoji = Object.entries(values).map(([key, value]) => {
const imageUrl = value.image_url
return {
@@ -173,7 +183,7 @@ const instance = {
}
// Technically could use tags but those are kinda useless right now,
// should have been "pack" field, that would be more useful
- }).sort((a, b) => a.displayText.toLowerCase() > b.displayText.toLowerCase() ? 1 : -1)
+ }).sort(byPackThenByName)
commit('setInstanceOption', { name: 'customEmoji', value: emoji })
} else {
throw (res)
From aea760ce1cb5b2ec42cb2133f446dca07ed3516e Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 14 Aug 2021 21:50:58 -0400
Subject: [PATCH 03/30] Display all emoji groups on emoji picker header
---
src/components/emoji_picker/emoji_picker.js | 28 +++++++++++++++++--
src/components/emoji_picker/emoji_picker.scss | 6 +++-
src/components/emoji_picker/emoji_picker.vue | 4 +--
3 files changed, 33 insertions(+), 5 deletions(-)
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index ef9c3745..4b322f7d 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -37,6 +37,8 @@ const filterByKeyword = (list, keyword = '') => {
return orderedEmojiList.flat()
}
+const packOf = emoji => (emoji.tags.filter(k => k.startsWith('pack:'))[0] || '').slice(5)
+
const EmojiPicker = {
props: {
enableStickerPicker: {
@@ -173,9 +175,12 @@ const EmojiPicker = {
}
return 0
},
+ allEmojis () {
+ return this.$store.state.instance.customEmoji || []
+ },
filteredEmoji () {
return filterByKeyword(
- this.$store.state.instance.customEmoji || [],
+ this.allEmojis,
this.keyword
)
},
@@ -183,7 +188,6 @@ const EmojiPicker = {
return this.filteredEmoji.slice(0, this.customEmojiBufferSlice)
},
groupedCustomEmojis () {
- const packOf = emoji => (emoji.tags.filter(k => k.startsWith('pack:'))[0] || '').slice(5)
return this.customEmojiBuffer.reduce((res, emoji) => {
const pack = packOf(emoji)
if (!res[pack]) {
@@ -200,6 +204,26 @@ const EmojiPicker = {
return res
}, {})
},
+ allEmojiGroups () {
+ return this.allEmojis
+ .reduce((res, emoji) => {
+ const packName = packOf(emoji)
+ const packId = `custom-${packName}`
+ if (res.filter(k => k.id === packId).length === 0) {
+ res.push({
+ id: packId,
+ text: packName,
+ image: emoji.imageUrl
+ })
+ }
+ return res
+ }, [])
+ .concat({
+ id: 'standard',
+ text: this.$t('emoji.unicode'),
+ icon: 'box-open'
+ })
+ },
emojis () {
const standardEmojis = this.$store.state.instance.emoji || []
// const customEmojis = this.customEmojiBuffer
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 46cfa1c8..9d7a9bae 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -51,6 +51,7 @@
display: flex;
height: 32px;
padding: 10px 7px 5px;
+ overflow-x: auto;
}
.content {
@@ -62,6 +63,9 @@
.emoji-tabs {
flex-grow: 1;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
}
.emoji-groups {
@@ -69,6 +73,7 @@
}
.additional-tabs {
+ display: block;
border-left: 1px solid;
border-left-color: $fallback--icon;
border-left-color: var(--icon, $fallback--icon);
@@ -78,7 +83,6 @@
.additional-tabs,
.emoji-tabs {
- display: block;
min-width: 0;
flex-basis: auto;
flex-shrink: 1;
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 65aa5bb6..5bcee2bc 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -3,12 +3,12 @@
<div class="heading">
<span class="emoji-tabs">
<span
- v-for="group in emojis"
+ v-for="group in allEmojiGroups"
:key="group.id"
class="emoji-tabs-item"
:class="{
active: activeGroupView === group.id,
- disabled: group.emojis.length === 0
+ disabled: false
}"
:title="group.text"
@click.prevent="highlight(group.id)"
From 34ae3d45dcbe76cf6833fb368e8f259e457ecaf4 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 14 Aug 2021 23:37:00 -0400
Subject: [PATCH 04/30] Load visible emoji groups when scrolling
---
src/components/emoji_picker/emoji_picker.js | 101 ++++++++++++++-----
src/components/emoji_picker/emoji_picker.vue | 4 +-
2 files changed, 75 insertions(+), 30 deletions(-)
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 4b322f7d..4c53d38c 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -56,7 +56,8 @@ const EmojiPicker = {
keepOpen: false,
customEmojiBufferSlice: LOAD_EMOJI_BY,
customEmojiTimeout: null,
- customEmojiLoadAllConfirmed: false
+ customEmojiLoadAllConfirmed: false,
+ groupLoadedCount: {}
}
},
components: {
@@ -78,7 +79,9 @@ const EmojiPicker = {
const target = (e && e.target) || this.$refs['emoji-groups']
this.updateScrolledClass(target)
this.scrolledGroup(target)
- this.triggerLoadMore(target)
+ this.$nextTick(() => {
+ this.triggerLoadMore(target)
+ })
},
highlight (key) {
const ref = this.$refs['group-' + key]
@@ -87,6 +90,7 @@ const EmojiPicker = {
this.activeGroup = key
this.$nextTick(() => {
this.$refs['emoji-groups'].scrollTop = top + 1
+ this.loadEmoji(key)
})
},
updateScrolledClass (target) {
@@ -99,28 +103,40 @@ const EmojiPicker = {
}
},
triggerLoadMore (target) {
- const ref = this.$refs[`group-end-${this.lastNonUnicodeGroupId}`][0]
- if (!ref) return
- const bottom = ref.offsetTop + ref.offsetHeight
+ Object.keys(this.allCustomGroups)
+ .map(groupId => {
+ const ref = this.$refs[`group-end-${groupId}`][0]
+ if (!ref) return undefined
- const scrollerBottom = target.scrollTop + target.clientHeight
- const scrollerTop = target.scrollTop
- const scrollerMax = target.scrollHeight
+ const bottom = ref.offsetTop + ref.offsetHeight
- // Loads more emoji when they come into view
- const approachingBottom = bottom - scrollerBottom < LOAD_EMOJI_MARGIN
- // Always load when at the very top in case there's no scroll space yet
- const atTop = scrollerTop < 5
- // Don't load when looking at unicode category or at the very bottom
- const bottomAboveViewport = bottom < scrollerTop || scrollerBottom === scrollerMax
- if (!bottomAboveViewport && (approachingBottom || atTop)) {
- this.loadEmoji()
- }
+ const group = this.$refs[`group-${groupId}`][0]
+ const top = group.offsetTop
+
+ const scrollerBottom = target.scrollTop + target.clientHeight
+ const scrollerTop = target.scrollTop
+ const scrollerMax = target.scrollHeight
+
+ // Loads more emoji when they come into view
+ const approachingBottom = bottom - scrollerBottom < LOAD_EMOJI_MARGIN
+ // Always load when at the very top in case there's no scroll space yet
+ const atTop = scrollerTop < top + target.clientHeight / 2 && top < scrollerBottom
+ // Don't load when looking at unicode category or at the very bottom
+ const bottomAboveViewport = bottom < scrollerTop || scrollerBottom === scrollerMax
+ if (!bottomAboveViewport && (approachingBottom || atTop)) {
+ return groupId
+ }
+ return undefined
+ })
+ .filter(k => k)
+ .map(k => {
+ this.loadEmoji(k)
+ })
},
scrolledGroup (target) {
const top = target.scrollTop + 5
this.$nextTick(() => {
- this.emojisView.forEach(group => {
+ this.allEmojiGroups.forEach(group => {
const ref = this.$refs['group-' + group.id]
if (ref.offsetTop <= top) {
this.activeGroup = group.id
@@ -128,14 +144,21 @@ const EmojiPicker = {
})
})
},
- loadEmoji () {
- const allLoaded = this.customEmojiBuffer.length === this.filteredEmoji.length
+ loadEmoji (loadGroup) {
+ if (!this.allCustomGroups[loadGroup]) {
+ return
+ }
+
+ const allLoaded = this.loadedCount[loadGroup] >= this.allCustomGroups[loadGroup].emojis.length
if (allLoaded) {
return
}
- this.customEmojiBufferSlice += LOAD_EMOJI_BY
+ this.groupLoadedCount = {
+ ...this.groupLoadedCount,
+ [loadGroup]: this.loadedCount[loadGroup] + LOAD_EMOJI_BY
+ }
},
startEmojiLoad (forceUpdate = false) {
if (!forceUpdate) {
@@ -156,6 +179,9 @@ const EmojiPicker = {
},
setShowStickers (value) {
this.showingStickers = value
+ },
+ limitedEmojis (list, groupId) {
+ return list.slice(0, this.loadedCount[groupId])
}
},
watch: {
@@ -204,24 +230,36 @@ const EmojiPicker = {
return res
}, {})
},
- allEmojiGroups () {
- return this.allEmojis
+ allCustomGroups () {
+ return this.filteredEmoji
.reduce((res, emoji) => {
const packName = packOf(emoji)
const packId = `custom-${packName}`
- if (res.filter(k => k.id === packId).length === 0) {
- res.push({
+ if (!res[packId]) {
+ res[packId] = ({
id: packId,
text: packName,
- image: emoji.imageUrl
+ image: emoji.imageUrl,
+ emojis: []
})
}
+ res[packId].emojis.push(emoji)
return res
- }, [])
+ }, {})
+ },
+ sensibleInitialAmountForAGroup () {
+ const groupCount = Object.keys(this.allCustomGroups).length
+ return Math.max(Math.floor(LOAD_EMOJI_BY / Math.max(groupCount, 1)), 1)
+ },
+ allEmojiGroups () {
+ const standardEmojis = this.$store.state.instance.emoji || []
+ return Object.entries(this.allCustomGroups)
+ .map(([_, v]) => v)
.concat({
id: 'standard',
text: this.$t('emoji.unicode'),
- icon: 'box-open'
+ icon: 'box-open',
+ emojis: filterByKeyword(standardEmojis, this.keyword)
})
},
emojis () {
@@ -240,6 +278,13 @@ const EmojiPicker = {
}
]
},
+ loadedCount () {
+ return Object.keys(this.allCustomGroups)
+ .reduce((res, groupId) => {
+ res[groupId] = this.groupLoadedCount[groupId] || this.sensibleInitialAmountForAGroup
+ return res
+ }, {})
+ },
lastNonUnicodeGroupId () {
return this.emojis[this.emojis.length - 2].id
},
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 5bcee2bc..1630269d 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -66,7 +66,7 @@
@scroll="onScroll"
>
<div
- v-for="group in emojisView"
+ v-for="group in allEmojiGroups"
:key="group.id"
class="emoji-group"
>
@@ -77,7 +77,7 @@
{{ group.text }}
</h6>
<span
- v-for="emoji in group.emojis"
+ v-for="emoji in limitedEmojis(group.emojis, group.id)"
:key="group.id + emoji.displayText"
:title="emoji.displayText"
class="emoji-item"
From 34bcfc5e0b32aeb129b4d2daa15bfd2202d3742f Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sun, 15 Aug 2021 00:03:31 -0400
Subject: [PATCH 05/30] Load emoji properly on first showing
---
src/components/emoji_picker/emoji_picker.js | 10 +++++++++-
1 file changed, 9 insertions(+), 1 deletion(-)
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 4c53d38c..487b904c 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -57,7 +57,8 @@ const EmojiPicker = {
customEmojiBufferSlice: LOAD_EMOJI_BY,
customEmojiTimeout: null,
customEmojiLoadAllConfirmed: false,
- groupLoadedCount: {}
+ groupLoadedCount: {},
+ firstLoaded: false
}
},
components: {
@@ -166,6 +167,13 @@ const EmojiPicker = {
}
this.$nextTick(() => {
this.$refs['emoji-groups'].scrollTop = 0
+ this.$nextTick(() => {
+ if (this.firstLoaded) {
+ return
+ }
+ this.triggerLoadMore(this.$refs['emoji-groups'])
+ this.firstLoaded = true
+ })
})
const bufferSize = this.customEmojiBuffer.length
const bufferPrefilledAll = bufferSize === this.filteredEmoji.length
From 5de792a78ec9e86ae79e3fb0be2078915f7a9282 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sun, 15 Aug 2021 00:43:35 -0400
Subject: [PATCH 06/30] Optimise emoji picker loading process
---
src/components/emoji_picker/emoji_picker.js | 83 ++++----------------
src/components/emoji_picker/emoji_picker.vue | 4 +-
src/modules/instance.js | 18 +++++
3 files changed, 34 insertions(+), 71 deletions(-)
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 487b904c..3d1ca135 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -105,6 +105,7 @@ const EmojiPicker = {
},
triggerLoadMore (target) {
Object.keys(this.allCustomGroups)
+ .filter(id => this.filteredEmojiGroups.filter(group => group.id === id).length > 0)
.map(groupId => {
const ref = this.$refs[`group-end-${groupId}`][0]
if (!ref) return undefined
@@ -122,9 +123,10 @@ const EmojiPicker = {
const approachingBottom = bottom - scrollerBottom < LOAD_EMOJI_MARGIN
// Always load when at the very top in case there's no scroll space yet
const atTop = scrollerTop < top + target.clientHeight / 2 && top < scrollerBottom
+ const unscrollable = top - bottom < target.clientHeight
// Don't load when looking at unicode category or at the very bottom
const bottomAboveViewport = bottom < scrollerTop || scrollerBottom === scrollerMax
- if (!bottomAboveViewport && (approachingBottom || atTop)) {
+ if (!bottomAboveViewport && (approachingBottom || atTop || unscrollable)) {
return groupId
}
return undefined
@@ -175,12 +177,6 @@ const EmojiPicker = {
this.firstLoaded = true
})
})
- const bufferSize = this.customEmojiBuffer.length
- const bufferPrefilledAll = bufferSize === this.filteredEmoji.length
- if (bufferPrefilledAll && !forceUpdate) {
- return
- }
- this.customEmojiBufferSlice = LOAD_EMOJI_BY
},
toggleStickers () {
this.showingStickers = !this.showingStickers
@@ -190,6 +186,9 @@ const EmojiPicker = {
},
limitedEmojis (list, groupId) {
return list.slice(0, this.loadedCount[groupId])
+ },
+ filterByKeyword (list, keyword) {
+ return filterByKeyword(list, keyword)
}
},
watch: {
@@ -209,51 +208,8 @@ const EmojiPicker = {
}
return 0
},
- allEmojis () {
- return this.$store.state.instance.customEmoji || []
- },
- filteredEmoji () {
- return filterByKeyword(
- this.allEmojis,
- this.keyword
- )
- },
- customEmojiBuffer () {
- return this.filteredEmoji.slice(0, this.customEmojiBufferSlice)
- },
- groupedCustomEmojis () {
- return this.customEmojiBuffer.reduce((res, emoji) => {
- const pack = packOf(emoji)
- if (!res[pack]) {
- res[pack] = {
- id: `custom-${pack}`,
- text: pack,
- /// FIXME
- // icon: 'smile-beam',
- image: emoji.imageUrl,
- emojis: []
- }
- }
- res[pack].emojis.push(emoji)
- return res
- }, {})
- },
allCustomGroups () {
- return this.filteredEmoji
- .reduce((res, emoji) => {
- const packName = packOf(emoji)
- const packId = `custom-${packName}`
- if (!res[packId]) {
- res[packId] = ({
- id: packId,
- text: packName,
- image: emoji.imageUrl,
- emojis: []
- })
- }
- res[packId].emojis.push(emoji)
- return res
- }, {})
+ return this.$store.getters.groupedCustomEmojis
},
sensibleInitialAmountForAGroup () {
const groupCount = Object.keys(this.allCustomGroups).length
@@ -270,21 +226,13 @@ const EmojiPicker = {
emojis: filterByKeyword(standardEmojis, this.keyword)
})
},
- emojis () {
- const standardEmojis = this.$store.state.instance.emoji || []
- // const customEmojis = this.customEmojiBuffer
-
- return [
- ...Object
- .keys(this.groupedCustomEmojis)
- .map(k => this.groupedCustomEmojis[k]),
- {
- id: 'standard',
- text: this.$t('emoji.unicode'),
- icon: 'box-open',
- emojis: filterByKeyword(standardEmojis, this.keyword)
- }
- ]
+ filteredEmojiGroups () {
+ return this.allEmojiGroups
+ .map(group => ({
+ ...group,
+ emojis: filterByKeyword(group.emojis, this.keyword)
+ }))
+ .filter(group => group.emojis.length > 0)
},
loadedCount () {
return Object.keys(this.allCustomGroups)
@@ -296,9 +244,6 @@ const EmojiPicker = {
lastNonUnicodeGroupId () {
return this.emojis[this.emojis.length - 2].id
},
- emojisView () {
- return this.emojis.filter(value => value.emojis.length > 0)
- },
stickerPickerEnabled () {
return (this.$store.state.instance.stickers || []).length !== 0
}
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 1630269d..8bbde389 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -3,7 +3,7 @@
<div class="heading">
<span class="emoji-tabs">
<span
- v-for="group in allEmojiGroups"
+ v-for="group in filteredEmojiGroups"
:key="group.id"
class="emoji-tabs-item"
:class="{
@@ -66,7 +66,7 @@
@scroll="onScroll"
>
<div
- v-for="group in allEmojiGroups"
+ v-for="group in filteredEmojiGroups"
:key="group.id"
class="emoji-group"
>
diff --git a/src/modules/instance.js b/src/modules/instance.js
index c6d124b9..44925202 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -114,6 +114,24 @@ const instance = {
.map(key => [key, state[key]])
.reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
},
+ groupedCustomEmojis (state) {
+ return state.customEmoji
+ .reduce((res, emoji) => {
+ emoji.tags.forEach(packName => {
+ const packId = `custom-${packName}`
+ if (!res[packId]) {
+ res[packId] = ({
+ id: packId,
+ text: packName,
+ image: emoji.imageUrl,
+ emojis: []
+ })
+ }
+ res[packId].emojis.push(emoji)
+ })
+ return res
+ }, {})
+ },
instanceDomain (state) {
return new URL(state.server).hostname
}
From 61975244bcae8637bd06bc0c3bc5ec34a7b6563d Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sun, 15 Aug 2021 00:53:57 -0400
Subject: [PATCH 07/30] Lint
---
src/components/emoji_picker/emoji_picker.js | 2 --
1 file changed, 2 deletions(-)
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 3d1ca135..87e6495c 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -37,8 +37,6 @@ const filterByKeyword = (list, keyword = '') => {
return orderedEmojiList.flat()
}
-const packOf = emoji => (emoji.tags.filter(k => k.startsWith('pack:'))[0] || '').slice(5)
-
const EmojiPicker = {
props: {
enableStickerPicker: {
From 1c8384203c078ae2581c09814a9e324b8f127357 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Thu, 7 Oct 2021 23:23:58 -0400
Subject: [PATCH 08/30] Use lozad for lazy image loading
Ref: grouped-emoji-picker
---
package.json | 1 +
src/components/emoji_picker/emoji_picker.js | 6 +++++-
src/components/emoji_picker/emoji_picker.vue | 3 ++-
src/directives/lazy_image_container.js | 13 +++++++++++++
yarn.lock | 5 +++++
5 files changed, 26 insertions(+), 2 deletions(-)
create mode 100644 src/directives/lazy_image_container.js
diff --git a/package.json b/package.json
index e9a246b3..db702df6 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
"diff": "3.5.0",
"escape-html": "1.0.3",
"localforage": "1.10.0",
+ "lozad": "^1.16.0",
"parse-link-header": "1.0.1",
"phoenix": "1.6.2",
"punycode.js": "2.1.0",
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 87e6495c..7b92db2e 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -1,5 +1,6 @@
import { defineAsyncComponent } from 'vue'
import Checkbox from '../checkbox/checkbox.vue'
+import LazyImageContainer from '../../directives/lazy_image_container'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faBoxOpen,
@@ -63,6 +64,9 @@ const EmojiPicker = {
StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
Checkbox
},
+ directives: {
+ LazyImageContainer
+ },
methods: {
onStickerUploaded (e) {
this.$emit('sticker-uploaded', e)
@@ -183,7 +187,7 @@ const EmojiPicker = {
this.showingStickers = value
},
limitedEmojis (list, groupId) {
- return list.slice(0, this.loadedCount[groupId])
+ return list // list.slice(0, this.loadedCount[groupId])
},
filterByKeyword (list, keyword) {
return filterByKeyword(list, keyword)
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 8bbde389..b2477339 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -61,6 +61,7 @@
</div>
<div
ref="emoji-groups"
+ v-lazy-image-container
class="emoji-groups"
:class="groupsScrolledClass"
@scroll="onScroll"
@@ -86,7 +87,7 @@
<span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
<img
v-else
- :src="emoji.imageUrl"
+ :data-src="emoji.imageUrl"
>
</span>
<span :ref="'group-end-' + group.id" />
diff --git a/src/directives/lazy_image_container.js b/src/directives/lazy_image_container.js
new file mode 100644
index 00000000..44adc828
--- /dev/null
+++ b/src/directives/lazy_image_container.js
@@ -0,0 +1,13 @@
+
+import lozad from 'lozad'
+
+const LazyImageContainer = {
+ inserted (el) {
+ const images = el.querySelectorAll('img')
+ console.log(images.length)
+ el.$observer = lozad(images)
+ el.$observer.observe()
+ }
+}
+
+export default LazyImageContainer
diff --git a/yarn.lock b/yarn.lock
index 042d87ac..cf98fef3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6383,6 +6383,11 @@ lower-case@^1.1.1:
version "1.1.4"
resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
+lozad@^1.16.0:
+ version "1.16.0"
+ resolved "https://registry.yarnpkg.com/lozad/-/lozad-1.16.0.tgz#86ce732c64c69926ccdebb81c8c90bb3735948b4"
+ integrity sha512-JBr9WjvEFeKoyim3svo/gsQPTkgG/mOHJmDctZ/+U9H3ymUuvEkqpn8bdQMFsvTMcyRJrdJkLv0bXqGm0sP72w==
+
lru-cache@^4.0.1:
version "4.1.5"
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
From 618282ef4878433a9a0741ccd48ed5c45ad49a0f Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 01:02:16 -0400
Subject: [PATCH 09/30] Clean up legacy code in emoji picker
Ref: grouped-emoji-picker
---
src/components/emoji_input/emoji_input.js | 1 -
src/components/emoji_picker/emoji_picker.js | 130 ++++---------------
src/components/emoji_picker/emoji_picker.vue | 3 +-
src/directives/lazy_image_container.js | 13 --
4 files changed, 28 insertions(+), 119 deletions(-)
delete mode 100644 src/directives/lazy_image_container.js
diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 391cc5b5..be9a80f3 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -205,7 +205,6 @@ const EmojiInput = {
},
triggerShowPicker () {
this.showPicker = true
- this.$refs.picker.startEmojiLoad()
this.$nextTick(() => {
this.scrollIntoView()
this.focusPickerInput()
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 7b92db2e..5a7c3e67 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -1,6 +1,6 @@
import { defineAsyncComponent } from 'vue'
import Checkbox from '../checkbox/checkbox.vue'
-import LazyImageContainer from '../../directives/lazy_image_container'
+import lozad from 'lozad'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faBoxOpen,
@@ -53,7 +53,6 @@ const EmojiPicker = {
showingStickers: false,
groupsScrolledClass: 'scrolled-top',
keepOpen: false,
- customEmojiBufferSlice: LOAD_EMOJI_BY,
customEmojiTimeout: null,
customEmojiLoadAllConfirmed: false,
groupLoadedCount: {},
@@ -64,9 +63,6 @@ const EmojiPicker = {
StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
Checkbox
},
- directives: {
- LazyImageContainer
- },
methods: {
onStickerUploaded (e) {
this.$emit('sticker-uploaded', e)
@@ -81,10 +77,6 @@ const EmojiPicker = {
onScroll (e) {
const target = (e && e.target) || this.$refs['emoji-groups']
this.updateScrolledClass(target)
- this.scrolledGroup(target)
- this.$nextTick(() => {
- this.triggerLoadMore(target)
- })
},
highlight (key) {
const ref = this.$refs['group-' + key]
@@ -93,7 +85,6 @@ const EmojiPicker = {
this.activeGroup = key
this.$nextTick(() => {
this.$refs['emoji-groups'].scrollTop = top + 1
- this.loadEmoji(key)
})
},
updateScrolledClass (target) {
@@ -105,101 +96,48 @@ const EmojiPicker = {
this.groupsScrolledClass = 'scrolled-middle'
}
},
- triggerLoadMore (target) {
- Object.keys(this.allCustomGroups)
- .filter(id => this.filteredEmojiGroups.filter(group => group.id === id).length > 0)
- .map(groupId => {
- const ref = this.$refs[`group-end-${groupId}`][0]
- if (!ref) return undefined
-
- const bottom = ref.offsetTop + ref.offsetHeight
-
- const group = this.$refs[`group-${groupId}`][0]
- const top = group.offsetTop
-
- const scrollerBottom = target.scrollTop + target.clientHeight
- const scrollerTop = target.scrollTop
- const scrollerMax = target.scrollHeight
-
- // Loads more emoji when they come into view
- const approachingBottom = bottom - scrollerBottom < LOAD_EMOJI_MARGIN
- // Always load when at the very top in case there's no scroll space yet
- const atTop = scrollerTop < top + target.clientHeight / 2 && top < scrollerBottom
- const unscrollable = top - bottom < target.clientHeight
- // Don't load when looking at unicode category or at the very bottom
- const bottomAboveViewport = bottom < scrollerTop || scrollerBottom === scrollerMax
- if (!bottomAboveViewport && (approachingBottom || atTop || unscrollable)) {
- return groupId
- }
- return undefined
- })
- .filter(k => k)
- .map(k => {
- this.loadEmoji(k)
- })
- },
- scrolledGroup (target) {
- const top = target.scrollTop + 5
- this.$nextTick(() => {
- this.allEmojiGroups.forEach(group => {
- const ref = this.$refs['group-' + group.id]
- if (ref.offsetTop <= top) {
- this.activeGroup = group.id
- }
- })
- })
- },
- loadEmoji (loadGroup) {
- if (!this.allCustomGroups[loadGroup]) {
- return
- }
-
- const allLoaded = this.loadedCount[loadGroup] >= this.allCustomGroups[loadGroup].emojis.length
-
- if (allLoaded) {
- return
- }
-
- this.groupLoadedCount = {
- ...this.groupLoadedCount,
- [loadGroup]: this.loadedCount[loadGroup] + LOAD_EMOJI_BY
- }
- },
- startEmojiLoad (forceUpdate = false) {
- if (!forceUpdate) {
- this.keyword = ''
- }
- this.$nextTick(() => {
- this.$refs['emoji-groups'].scrollTop = 0
- this.$nextTick(() => {
- if (this.firstLoaded) {
- return
- }
- this.triggerLoadMore(this.$refs['emoji-groups'])
- this.firstLoaded = true
- })
- })
- },
toggleStickers () {
this.showingStickers = !this.showingStickers
},
setShowStickers (value) {
this.showingStickers = value
},
- limitedEmojis (list, groupId) {
- return list // list.slice(0, this.loadedCount[groupId])
- },
filterByKeyword (list, keyword) {
return filterByKeyword(list, keyword)
+ },
+ initializeLazyLoad () {
+ this.destroyLazyLoad()
+ this.$lozad = lozad('img', {})
+ this.$lozad.observe()
+ },
+ destroyLazyLoad () {
+ if (this.$lozad) {
+ if (this.$lozad.observer) {
+ this.$lozad.observer.disconnect()
+ }
+ if (this.$lozad.mutationObserver) {
+ this.$lozad.mutationObserver.disconnect()
+ }
+ }
}
},
watch: {
keyword () {
this.customEmojiLoadAllConfirmed = false
this.onScroll()
- this.startEmojiLoad(true)
+ // Wait for the dom to change
+ this.$nextTick(() => this.initializeLazyLoad())
+ },
+ allCustomGroups () {
+ this.$nextTick(() => this.initializeLazyLoad())
}
},
+ mounted () {
+ this.initializeLazyLoad()
+ },
+ destroyed () {
+ this.destroyLazyLoad()
+ },
computed: {
activeGroupView () {
return this.showingStickers ? '' : this.activeGroup
@@ -213,10 +151,6 @@ const EmojiPicker = {
allCustomGroups () {
return this.$store.getters.groupedCustomEmojis
},
- sensibleInitialAmountForAGroup () {
- const groupCount = Object.keys(this.allCustomGroups).length
- return Math.max(Math.floor(LOAD_EMOJI_BY / Math.max(groupCount, 1)), 1)
- },
allEmojiGroups () {
const standardEmojis = this.$store.state.instance.emoji || []
return Object.entries(this.allCustomGroups)
@@ -236,16 +170,6 @@ const EmojiPicker = {
}))
.filter(group => group.emojis.length > 0)
},
- loadedCount () {
- return Object.keys(this.allCustomGroups)
- .reduce((res, groupId) => {
- res[groupId] = this.groupLoadedCount[groupId] || this.sensibleInitialAmountForAGroup
- return res
- }, {})
- },
- lastNonUnicodeGroupId () {
- return this.emojis[this.emojis.length - 2].id
- },
stickerPickerEnabled () {
return (this.$store.state.instance.stickers || []).length !== 0
}
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index b2477339..ea6f1e4f 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -61,7 +61,6 @@
</div>
<div
ref="emoji-groups"
- v-lazy-image-container
class="emoji-groups"
:class="groupsScrolledClass"
@scroll="onScroll"
@@ -78,7 +77,7 @@
{{ group.text }}
</h6>
<span
- v-for="emoji in limitedEmojis(group.emojis, group.id)"
+ v-for="emoji in group.emojis"
:key="group.id + emoji.displayText"
:title="emoji.displayText"
class="emoji-item"
diff --git a/src/directives/lazy_image_container.js b/src/directives/lazy_image_container.js
deleted file mode 100644
index 44adc828..00000000
--- a/src/directives/lazy_image_container.js
+++ /dev/null
@@ -1,13 +0,0 @@
-
-import lozad from 'lozad'
-
-const LazyImageContainer = {
- inserted (el) {
- const images = el.querySelectorAll('img')
- console.log(images.length)
- el.$observer = lozad(images)
- el.$observer.observe()
- }
-}
-
-export default LazyImageContainer
From 38190e50e4124dac19643478d975bf9cbc68ddaa Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 01:11:32 -0400
Subject: [PATCH 10/30] Fix scrol->highlight behaviour
Ref: grouped-emoji-picker
---
src/components/emoji_picker/emoji_picker.js | 18 ++++++++++++++++++
1 file changed, 18 insertions(+)
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 5a7c3e67..4d221aeb 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -77,6 +77,18 @@ const EmojiPicker = {
onScroll (e) {
const target = (e && e.target) || this.$refs['emoji-groups']
this.updateScrolledClass(target)
+ this.scrolledGroup(target)
+ },
+ scrolledGroup (target) {
+ const top = target.scrollTop + 5
+ this.$nextTick(() => {
+ this.allEmojiGroups.forEach(group => {
+ const ref = this.$refs['group-' + group.id]
+ if (ref[0].offsetTop <= top) {
+ this.activeGroup = group.id
+ }
+ })
+ })
},
highlight (key) {
const ref = this.$refs['group-' + key]
@@ -133,6 +145,9 @@ const EmojiPicker = {
}
},
mounted () {
+ if (this.defaultGroup) {
+ this.highlight(this.defaultGroup)
+ }
this.initializeLazyLoad()
},
destroyed () {
@@ -151,6 +166,9 @@ const EmojiPicker = {
allCustomGroups () {
return this.$store.getters.groupedCustomEmojis
},
+ defaultGroup () {
+ return Object.keys(this.allCustomGroups)[0]
+ },
allEmojiGroups () {
const standardEmojis = this.$store.state.instance.emoji || []
return Object.entries(this.allCustomGroups)
From 62e14d215d7f566b5bdfd6e85e9ca49eee069f37 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 01:20:35 -0400
Subject: [PATCH 11/30] Clean up unused variables
Ref: grouped-emoji-picker
---
src/components/emoji_picker/emoji_picker.js | 13 +------------
1 file changed, 1 insertion(+), 12 deletions(-)
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 4d221aeb..bdc1ac12 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -14,13 +14,6 @@ library.add(
faSmileBeam
)
-// At widest, approximately 20 emoji are visible in a row,
-// loading 3 rows, could be overkill for narrow picker
-const LOAD_EMOJI_BY = 60
-
-// When to start loading new batch emoji, in pixels
-const LOAD_EMOJI_MARGIN = 64
-
const filterByKeyword = (list, keyword = '') => {
if (keyword === '') return list
@@ -53,10 +46,7 @@ const EmojiPicker = {
showingStickers: false,
groupsScrolledClass: 'scrolled-top',
keepOpen: false,
- customEmojiTimeout: null,
- customEmojiLoadAllConfirmed: false,
- groupLoadedCount: {},
- firstLoaded: false
+ customEmojiTimeout: null
}
},
components: {
@@ -135,7 +125,6 @@ const EmojiPicker = {
},
watch: {
keyword () {
- this.customEmojiLoadAllConfirmed = false
this.onScroll()
// Wait for the dom to change
this.$nextTick(() => this.initializeLazyLoad())
From ce59d6962dd6333f269311c25073b587df728993 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 13:06:03 -0400
Subject: [PATCH 12/30] Remove useless class `disabled` in emoji picker
Ref: grouped-emoji-picker
---
src/components/emoji_picker/emoji_picker.vue | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index ea6f1e4f..70296fa3 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -7,8 +7,7 @@
:key="group.id"
class="emoji-tabs-item"
:class="{
- active: activeGroupView === group.id,
- disabled: false
+ active: activeGroupView === group.id
}"
:title="group.text"
@click.prevent="highlight(group.id)"
From f82519e15e2659ef4473436d09171e9b1f57241e Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 13:17:47 -0400
Subject: [PATCH 13/30] Use StillImage for emoji group header
Ref: grouped-emoji-picker
---
src/components/emoji_picker/emoji_picker.js | 4 +++-
src/components/emoji_picker/emoji_picker.vue | 4 ++--
2 files changed, 5 insertions(+), 3 deletions(-)
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index bdc1ac12..b57c8afe 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -1,5 +1,6 @@
import { defineAsyncComponent } from 'vue'
import Checkbox from '../checkbox/checkbox.vue'
+import StillImage from '../still-image/still-image.vue'
import lozad from 'lozad'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
@@ -51,7 +52,8 @@ const EmojiPicker = {
},
components: {
StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
- Checkbox
+ Checkbox,
+ StillImage
},
methods: {
onStickerUploaded (e) {
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 70296fa3..452a8de1 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -16,10 +16,10 @@
v-if="group.image"
class="emoji-picker-header-image"
>
- <img
+ <still-image
:alt="group.text"
:src="group.image"
- >
+ />
</span>
<FAIcon
v-else
From 3058f47394485ca1aef3cdc872627916e0cbc2c8 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 14:10:17 -0400
Subject: [PATCH 14/30] Fix vertical scrollbar of emoji picker header
Ref: grouped-emoji-picker
---
src/components/emoji_picker/emoji_picker.scss | 29 ++++++++++++++-----
1 file changed, 22 insertions(+), 7 deletions(-)
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 9d7a9bae..a988f9eb 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -1,5 +1,10 @@
@import '../../_variables.scss';
+$emoji-picker-header-height: 36px;
+$emoji-picker-header-picture-width: 32px;
+$emoji-picker-header-picture-height: 32px;
+$emoji-picker-emoji-size: 32px;
+
.emoji-picker {
display: flex;
flex-direction: column;
@@ -22,9 +27,11 @@
display: inline-flex;
justify-content: center;
align-items: center;
- width: 30px;
- height: 24px;
- img {
+ width: $emoji-picker-header-picture-width;
+ max-width: $emoji-picker-header-picture-width;
+ height: $emoji-picker-header-picture-height;
+ max-height: $emoji-picker-header-picture-height;
+ .still-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
@@ -49,7 +56,7 @@
.heading {
display: flex;
- height: 32px;
+ //height: $emoji-picker-header-height;
padding: 10px 7px 5px;
overflow-x: auto;
}
@@ -86,11 +93,19 @@
min-width: 0;
flex-basis: auto;
flex-shrink: 1;
+ display: flex;
+ align-content: center;
&-item {
padding: 0 7px;
cursor: pointer;
font-size: 24px;
+ width: $emoji-picker-header-picture-width;
+ max-width: $emoji-picker-header-picture-width;
+ height: $emoji-picker-header-picture-height;
+ max-height: $emoji-picker-header-picture-height;
+ display: flex;
+ align-items: center;
&.disabled {
opacity: 0.5;
@@ -178,11 +193,11 @@
}
&-item {
- width: 32px;
- height: 32px;
+ width: $emoji-picker-emoji-size;
+ height: $emoji-picker-emoji-size;
box-sizing: border-box;
display: flex;
- font-size: 32px;
+ font-size: $emoji-picker-emoji-size;
align-items: center;
justify-content: center;
margin: 4px;
From 68614af0ce9285c1f95824bb397da4361abea971 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 14:46:00 -0400
Subject: [PATCH 15/30] Fix sticker picker heading tab
Ref: grouped-emoji-picker
---
src/components/emoji_picker/emoji_picker.scss | 9 ++++-----
1 file changed, 4 insertions(+), 5 deletions(-)
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index a988f9eb..b4606396 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -56,9 +56,7 @@ $emoji-picker-emoji-size: 32px;
.heading {
display: flex;
- //height: $emoji-picker-header-height;
padding: 10px 7px 5px;
- overflow-x: auto;
}
.content {
@@ -73,6 +71,7 @@ $emoji-picker-emoji-size: 32px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
+ overflow-x: auto;
}
.emoji-groups {
@@ -80,7 +79,8 @@ $emoji-picker-emoji-size: 32px;
}
.additional-tabs {
- display: block;
+ display: flex;
+ flex: 1;
border-left: 1px solid;
border-left-color: $fallback--icon;
border-left-color: var(--icon, $fallback--icon);
@@ -90,9 +90,8 @@ $emoji-picker-emoji-size: 32px;
.additional-tabs,
.emoji-tabs {
- min-width: 0;
flex-basis: auto;
- flex-shrink: 1;
+ // flex-shrink: 1;
display: flex;
align-content: center;
From 0b74749d8e09b33e209072af49b3d5a2ef72bb9d Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 15:09:24 -0400
Subject: [PATCH 16/30] Lazy-load emoji picker in post form
When clicking the reply button, we used to load the whole emoji picker.
This causes a considerable delay even if the user is not going to use
the emoji picker. Now the content of the emoji picker is loaded only
after the user has explicitly opened the emoji picker.
Ref: grouped-emoji-picker
---
src/components/emoji_input/emoji_input.vue | 1 +
src/components/emoji_picker/emoji_picker.js | 24 ++++++++++++++++----
src/components/emoji_picker/emoji_picker.vue | 9 ++++++--
3 files changed, 27 insertions(+), 7 deletions(-)
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index aa2950ce..3d9a629b 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -19,6 +19,7 @@
v-if="enableEmojiPicker"
ref="picker"
:class="{ hide: !showPicker }"
+ :showing="showPicker"
:enable-sticker-picker="enableStickerPicker"
class="emoji-picker-panel"
@emoji="insert"
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index b57c8afe..578f7053 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -38,6 +38,10 @@ const EmojiPicker = {
required: false,
type: Boolean,
default: false
+ },
+ showing: {
+ required: true,
+ type: Boolean
}
},
data () {
@@ -47,7 +51,9 @@ const EmojiPicker = {
showingStickers: false,
groupsScrolledClass: 'scrolled-top',
keepOpen: false,
- customEmojiTimeout: null
+ customEmojiTimeout: null,
+ // Lazy-load only after the first time `showing` becomes true.
+ contentLoaded: false
}
},
components: {
@@ -114,6 +120,9 @@ const EmojiPicker = {
this.$lozad = lozad('img', {})
this.$lozad.observe()
},
+ waitForDomAndInitializeLazyLoad() {
+ this.$nextTick(() => this.initializeLazyLoad())
+ },
destroyLazyLoad () {
if (this.$lozad) {
if (this.$lozad.observer) {
@@ -128,18 +137,23 @@ const EmojiPicker = {
watch: {
keyword () {
this.onScroll()
- // Wait for the dom to change
- this.$nextTick(() => this.initializeLazyLoad())
+ this.waitForDomAndInitializeLazyLoad()
},
allCustomGroups () {
- this.$nextTick(() => this.initializeLazyLoad())
+ this.waitForDomAndInitializeLazyLoad()
+ },
+ showing (val) {
+ if (val) {
+ this.contentLoaded = true
+ this.waitForDomAndInitializeLazyLoad()
+ }
}
},
mounted () {
if (this.defaultGroup) {
this.highlight(this.defaultGroup)
}
- this.initializeLazyLoad()
+ this.waitForDomAndInitializeLazyLoad()
},
destroyed () {
this.destroyLazyLoad()
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 452a8de1..db4347e8 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -1,5 +1,7 @@
<template>
- <div class="emoji-picker panel panel-default panel-body">
+ <div
+ class="emoji-picker panel panel-default panel-body"
+ >
<div class="heading">
<span class="emoji-tabs">
<span
@@ -45,7 +47,10 @@
</span>
</span>
</div>
- <div class="content">
+ <div
+ v-if="contentLoaded"
+ class="content"
+ >
<div
class="emoji-content"
:class="{hidden: showingStickers}"
From 55ecabf3a3f5b93a375f0026198519ee2423f3ab Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 15:25:13 -0400
Subject: [PATCH 17/30] Lint
Ref: grouped-emoji-picker
---
src/components/emoji_picker/emoji_picker.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 578f7053..29feec5b 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -120,7 +120,7 @@ const EmojiPicker = {
this.$lozad = lozad('img', {})
this.$lozad.observe()
},
- waitForDomAndInitializeLazyLoad() {
+ waitForDomAndInitializeLazyLoad () {
this.$nextTick(() => this.initializeLazyLoad())
},
destroyLazyLoad () {
From 2186bd83a6d2c03aa321c3954aa8fb1a9574ffea Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 15:30:55 -0400
Subject: [PATCH 18/30] Group emojis only by pack and remove pack: prefix
Ref: grouped-emoji-picker
---
src/modules/instance.js | 8 +++++++-
1 file changed, 7 insertions(+), 1 deletion(-)
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 44925202..15825783 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -115,9 +115,15 @@ const instance = {
.reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
},
groupedCustomEmojis (state) {
+ const packsOf = emoji => {
+ return emoji.tags
+ .filter(k => k.startsWith('pack:'))
+ .map(k => k.slice(5)) // remove 'pack:' prefix
+ }
+
return state.customEmoji
.reduce((res, emoji) => {
- emoji.tags.forEach(packName => {
+ packsOf(emoji).forEach(packName => {
const packId = `custom-${packName}`
if (!res[packId]) {
res[packId] = ({
From 2c0ca850d879c37cf364fe90f62fc160185ea1dd Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 15:47:39 -0400
Subject: [PATCH 19/30] Fix error on emoji picker first load
Ref: grouped-emoji-picker
---
src/components/emoji_picker/emoji_picker.js | 20 +++++++++++++++-----
1 file changed, 15 insertions(+), 5 deletions(-)
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 29feec5b..471626d0 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -132,6 +132,18 @@ const EmojiPicker = {
this.$lozad.mutationObserver.disconnect()
}
}
+ },
+ onShowing () {
+ const oldContentLoaded = this.contentLoaded
+ this.contentLoaded = true
+ this.waitForDomAndInitializeLazyLoad()
+ if (!oldContentLoaded) {
+ this.$nextTick(() => {
+ if (this.defaultGroup) {
+ this.highlight(this.defaultGroup)
+ }
+ })
+ }
}
},
watch: {
@@ -144,16 +156,14 @@ const EmojiPicker = {
},
showing (val) {
if (val) {
- this.contentLoaded = true
- this.waitForDomAndInitializeLazyLoad()
+ this.onShowing()
}
}
},
mounted () {
- if (this.defaultGroup) {
- this.highlight(this.defaultGroup)
+ if (this.showing) {
+ this.onShowing()
}
- this.waitForDomAndInitializeLazyLoad()
},
destroyed () {
this.destroyLazyLoad()
From 08ad3ba54bf2bdd7904fe0fc821a8cca67a67ab5 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 8 Jan 2022 01:35:16 -0500
Subject: [PATCH 20/30] Use StillImage to render emojis in emoji picker
---
src/components/emoji_picker/emoji_picker.js | 15 +++++++++++++--
src/components/emoji_picker/emoji_picker.vue | 5 +++--
src/components/still-image/still-image.js | 19 +++++++++++++++++--
src/components/still-image/still-image.vue | 5 +++--
4 files changed, 36 insertions(+), 8 deletions(-)
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 471626d0..c0e90434 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -117,8 +117,19 @@ const EmojiPicker = {
},
initializeLazyLoad () {
this.destroyLazyLoad()
- this.$lozad = lozad('img', {})
- this.$lozad.observe()
+ this.$nextTick(() => {
+ this.$lozad = lozad('.still-image.emoji-picker-emoji', {
+ load: el => {
+ const vn = el.__vue__
+ if (!vn) {
+ return
+ }
+
+ vn.loadLazy()
+ }
+ })
+ this.$lozad.observe()
+ })
},
waitForDomAndInitializeLazyLoad () {
this.$nextTick(() => this.initializeLazyLoad())
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index db4347e8..b2dae51e 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -88,10 +88,11 @@
@click.stop.prevent="onEmoji(emoji)"
>
<span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
- <img
+ <still-image
v-else
+ class="emoji-picker-emoji"
:data-src="emoji.imageUrl"
- >
+ />
</span>
<span :ref="'group-end-' + group.id" />
</div>
diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js
index d7abbcb5..1806d33b 100644
--- a/src/components/still-image/still-image.js
+++ b/src/components/still-image/still-image.js
@@ -7,16 +7,23 @@ const StillImage = {
'imageLoadHandler',
'alt',
'height',
- 'width'
+ 'width',
+ 'dataSrc'
],
data () {
return {
+ // for lazy loading, see loadLazy()
+ realSrc: this.src,
stopGifs: this.$store.getters.mergedConfig.stopGifs
}
},
computed: {
animated () {
- return this.stopGifs && (this.mimetype === 'image/gif' || this.src.endsWith('.gif'))
+ if (!this.realSrc) {
+ return false
+ }
+
+ return this.stopGifs && (this.mimetype === 'image/gif' || this.realSrc.endsWith('.gif'))
},
style () {
const appendPx = (str) => /\d$/.test(str) ? str + 'px' : str
@@ -27,7 +34,15 @@ const StillImage = {
}
},
methods: {
+ loadLazy () {
+ if (this.dataSrc) {
+ this.realSrc = this.dataSrc
+ }
+ },
onLoad () {
+ if (!this.realSrc) {
+ return
+ }
const image = this.$refs.src
if (!image) return
this.imageLoadHandler && this.imageLoadHandler(image)
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index e939b532..eb553c14 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -11,10 +11,11 @@
<!-- NOTE: key is required to force to re-render img tag when src is changed -->
<img
ref="src"
- :key="src"
+ :key="realSrc"
:alt="alt"
:title="alt"
- :src="src"
+ :data-src="dataSrc"
+ :src="realSrc"
:referrerpolicy="referrerpolicy"
@load="onLoad"
@error="onError"
From 4f989cec26cd440ad1998c473f6807456a7d43b1 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 8 Jan 2022 01:37:19 -0500
Subject: [PATCH 21/30] Clean up emoji picker css
---
src/components/emoji_picker/emoji_picker.scss | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index b4606396..a7c89303 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -91,7 +91,6 @@ $emoji-picker-emoji-size: 32px;
.additional-tabs,
.emoji-tabs {
flex-basis: auto;
- // flex-shrink: 1;
display: flex;
align-content: center;
From 2c8c900e09245f8282a748cee7d28191e8dff422 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 8 Jan 2022 02:17:59 -0500
Subject: [PATCH 22/30] Scroll active tab header into view in emoji picker
---
src/components/emoji_picker/emoji_picker.js | 18 ++++++++++++++++++
src/components/emoji_picker/emoji_picker.vue | 6 +++++-
2 files changed, 23 insertions(+), 1 deletion(-)
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index c0e90434..612e0c19 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -86,8 +86,26 @@ const EmojiPicker = {
this.activeGroup = group.id
}
})
+ this.scrollHeader()
})
},
+ scrollHeader () {
+ // Scroll the active tab's header into view
+ const headerRef = this.$refs['group-header-' + this.activeGroup][0]
+ const left = headerRef.offsetLeft
+ const right = left + headerRef.offsetWidth
+ const headerCont = this.$refs.header
+ const currentScroll = headerCont.scrollLeft
+ const currentScrollRight = currentScroll + headerCont.clientWidth
+ const setScroll = s => { headerCont.scrollLeft = s }
+
+ const margin = 7 // .emoji-tabs-item: padding
+ if (left - margin < currentScroll) {
+ setScroll(left - margin)
+ } else if (right + margin > currentScrollRight) {
+ setScroll(right + margin - headerCont.clientWidth)
+ }
+ },
highlight (key) {
const ref = this.$refs['group-' + key]
const top = ref.offsetTop
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index b2dae51e..b202df91 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -3,9 +3,13 @@
class="emoji-picker panel panel-default panel-body"
>
<div class="heading">
- <span class="emoji-tabs">
+ <span
+ ref="header"
+ class="emoji-tabs"
+ >
<span
v-for="group in filteredEmojiGroups"
+ :ref="'group-header-' + group.id"
:key="group.id"
class="emoji-tabs-item"
:class="{
From b72afe428b7b6c4495ce5cde8419cd0beb2a2770 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 8 Jan 2022 16:13:02 -0500
Subject: [PATCH 23/30] Generate grouped unicode emojis from unicode-emoji-json
---
.gitignore | 1 +
build/build.js | 3 +
build/dev-server.js | 3 +
build/update-emoji.js | 27 +
package.json | 1 +
static/emoji.json | 1431 -----------------------------------------
yarn.lock | 5 +
7 files changed, 40 insertions(+), 1431 deletions(-)
create mode 100644 build/update-emoji.js
delete mode 100644 static/emoji.json
diff --git a/.gitignore b/.gitignore
index 479d57c4..4df5ec83 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,4 @@ test/e2e/reports
selenium-debug.log
.idea/
config/local.json
+static/emoji.json
diff --git a/build/build.js b/build/build.js
index b3c9aad4..35969eb6 100644
--- a/build/build.js
+++ b/build/build.js
@@ -18,6 +18,9 @@ console.log(
var spinner = ora('building for production...')
spinner.start()
+var updateEmoji = require('./update-emoji').updateEmoji
+updateEmoji()
+
var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
rm('-rf', assetsPath)
mkdir('-p', assetsPath)
diff --git a/build/dev-server.js b/build/dev-server.js
index c06192bd..008e9e54 100644
--- a/build/dev-server.js
+++ b/build/dev-server.js
@@ -10,6 +10,9 @@ var webpackConfig = process.env.NODE_ENV === 'testing'
? require('./webpack.prod.conf')
: require('./webpack.dev.conf')
+var updateEmoji = require('./update-emoji').updateEmoji
+updateEmoji()
+
// default port where dev server listens for incoming traffic
var port = process.env.PORT || config.dev.port
// Define HTTP proxies to your custom API backend
diff --git a/build/update-emoji.js b/build/update-emoji.js
new file mode 100644
index 00000000..5336a95b
--- /dev/null
+++ b/build/update-emoji.js
@@ -0,0 +1,27 @@
+
+module.exports = {
+ updateEmoji () {
+ const emojis = require('unicode-emoji-json/data-by-group')
+ const fs = require('fs')
+
+ Object.keys(emojis)
+ .map(k => {
+ emojis[k].map(e => {
+ delete e.unicode_version
+ delete e.emoji_version
+ delete e.skin_tone_support_unicode_version
+ })
+ })
+
+ const res = {}
+ Object.keys(emojis)
+ .map(k => {
+ const groupId = k.replace('&', 'and').replace(/ /g, '-').toLowerCase()
+ res[groupId] = emojis[k]
+ })
+
+ console.log('Updating emojis...')
+ fs.writeFileSync('static/emoji.json', JSON.stringify(res))
+ console.log('Done.')
+ }
+}
diff --git a/package.json b/package.json
index db702df6..c5d8b678 100644
--- a/package.json
+++ b/package.json
@@ -115,6 +115,7 @@
"stylelint": "13.6.1",
"stylelint-config-standard": "20.0.0",
"stylelint-rscss": "0.4.0",
+ "unicode-emoji-json": "^0.3.0",
"url-loader": "1.1.2",
"vue-loader": "^16.0.0",
"vue-style-loader": "4.1.2",
diff --git a/static/emoji.json b/static/emoji.json
deleted file mode 100644
index 12b91b3f..00000000
--- a/static/emoji.json
+++ /dev/null
@@ -1,1431 +0,0 @@
-{
- "100": "๐ฏ",
- "1234": "๐ข",
- "1st_place_medal": "๐ฅ",
- "2nd_place_medal": "๐ฅ",
- "3rd_place_medal": "๐ฅ",
- "8ball": "๐ฑ",
- "a_button_blood_type": "๐
ฐ",
- "ab": "๐",
- "abacus": "๐งฎ",
- "abc": "๐ค",
- "abcd": "๐ก",
- "accept": "๐",
- "adhesive_bandage": "๐ฉน",
- "admission_tickets": "๐",
- "adult": "๐ง",
- "aerial_tramway": "๐ก",
- "airplane": "โ",
- "airplane_arriving": "๐ฌ",
- "airplane_departure": "๐ซ",
- "alarm_clock": "โฐ",
- "alembic": "โ๏ธ",
- "alien": "๐ฝ",
- "ambulance": "๐",
- "amphora": "๐บ",
- "anchor": "โ",
- "angel": "๐ผ",
- "anger": "๐ข",
- "anger_right": "๐ฏ",
- "angry": "๐ ",
- "anguished": "๐ง",
- "ant": "๐",
- "apple": "๐",
- "aquarius": "โ",
- "aries": "โ",
- "arrow_backward": "โ๏ธ",
- "arrow_double_down": "โฌ",
- "arrow_double_up": "โซ",
- "arrow_down": "โฌ๏ธ",
- "arrow_down_small": "๐ฝ",
- "arrow_forward": "โถ๏ธ",
- "arrow_heading_down": "โคต๏ธ",
- "arrow_heading_up": "โคด๏ธ",
- "arrow_left": "โฌ
๏ธ",
- "arrow_lower_left": "โ๏ธ",
- "arrow_lower_right": "โ๏ธ",
- "arrow_right": "โก",
- "arrow_right_hook": "โช๏ธ",
- "arrow_up": "โฌ๏ธ",
- "arrow_up_down": "โ",
- "arrow_up_small": "๐ผ",
- "arrow_upper_left": "โ",
- "arrow_upper_right": "โ๏ธ",
- "arrows_clockwise": "๐",
- "arrows_counterclockwise": "๐",
- "art": "๐จ",
- "articulated_lorry": "๐",
- "artist_palette": "๐จ",
- "asterisk": "*โฃ",
- "astonished": "๐ฒ",
- "athletic_shoe": "๐",
- "atm": "๐ง",
- "atom": "โ",
- "atom_symbol": "โ๏ธ",
- "auto_rickshaw": "๐บ",
- "automobile": "๐",
- "avocado": "๐ฅ",
- "axe": "๐ช",
- "b_button_blood_type": "๐
ฑ",
- "baby": "๐ถ",
- "baby_bottle": "๐ผ",
- "baby_chick": "๐ค",
- "baby_symbol": "๐ผ",
- "back": "๐",
- "bacon": "๐ฅ",
- "badger": "๐ฆก",
- "badminton": "๐ธ",
- "bagel": "๐ฅฏ",
- "baggage_claim": "๐",
- "baguette_bread": "๐ฅ",
- "balance_scale": "โ๏ธ",
- "bald": "๐ฆฒ",
- "ballet_shoes": "๐ฉฐ",
- "balloon": "๐",
- "ballot_box": "๐ณ",
- "ballot_box_with_check": "โ๏ธ",
- "bamboo": "๐",
- "banana": "๐",
- "bangbang": "โผ๏ธ",
- "banjo": "๐ช",
- "bank": "๐ฆ",
- "bar_chart": "๐",
- "barber": "๐",
- "baseball": "โพ",
- "basket": "๐งบ",
- "basketball": "๐",
- "basketballer": "โน",
- "bat": "๐ฆ",
- "bath": "๐",
- "bathtub": "๐",
- "battery": "๐",
- "beach_umbrella": "โฑ",
- "beach_with_umbrella": "๐",
- "bear": "๐ป",
- "beard": "๐ง",
- "bearded_person": "๐ง",
- "bed": "๐",
- "bee": "๐",
- "beer": "๐บ",
- "beers": "๐ป",
- "beetle": "๐",
- "beginner": "๐ฐ",
- "bell": "๐",
- "bellhop_bell": "๐",
- "bento": "๐ฑ",
- "beverage_box": "๐ง",
- "bicyclist": "๐ด",
- "bike": "๐ฒ",
- "bikini": "๐",
- "billed_cap": "๐งข",
- "biohazard": "โฃ๏ธ",
- "bird": "๐ฆ",
- "birthday": "๐",
- "black_circle": "โซ",
- "black_heart": "๐ค",
- "black_joker": "๐",
- "black_large_square": "โฌ",
- "black_medium_small_square": "โพ",
- "black_medium_square": "โผ",
- "black_nib": "โ๏ธ",
- "black_small_square": "โช",
- "black_square_button": "๐ฒ",
- "blond_haired_person": "๐ฑ",
- "blossom": "๐ผ",
- "blowfish": "๐ก",
- "blue_book": "๐",
- "blue_car": "๐",
- "blue_circle": "๐ต",
- "blue_heart": "๐",
- "blue_square": "๐ฆ",
- "blush": "๐",
- "boar": "๐",
- "bomb": "๐ฃ",
- "bone": "๐ฆด",
- "book": "๐",
- "bookmark": "๐",
- "bookmark_tabs": "๐",
- "books": "๐",
- "boom": "๐ฅ",
- "boot": "๐ข",
- "bouquet": "๐",
- "bow": "๐",
- "bow_and_arrow": "๐น",
- "bowl_with_spoon": "๐ฅฃ",
- "bowling": "๐ณ",
- "boxing_glove": "๐ฅ",
- "boy": "๐ฆ",
- "brain": "๐ง ",
- "bread": "๐",
- "breast_feeding": "๐คฑ",
- "breastfeeding": "๐คฑ",
- "brick": "๐งฑ",
- "bride_with_veil": "๐ฐ",
- "bridge_at_night": "๐",
- "briefcase": "๐ผ",
- "briefs": "๐ฉฒ",
- "broccoli": "๐ฅฆ",
- "broken_heart": "๐",
- "broom": "๐งน",
- "brown_circle": "๐ค",
- "brown_heart": "๐ค",
- "bug": "๐",
- "building_construction": "๐",
- "bulb": "๐ก",
- "bullettrain_front": "๐
",
- "bullettrain_side": "๐",
- "burrito": "๐ฏ",
- "bus": "๐",
- "busstop": "๐",
- "bust_in_silhouette": "๐ค",
- "busts_in_silhouette": "๐ฅ",
- "butter": "๐ง",
- "butterfly": "๐ฆ",
- "cactus": "๐ต",
- "cake": "๐ฐ",
- "calendar": "๐",
- "call_me": "๐ค",
- "call_me_hand": "๐ค",
- "calling": "๐ฒ",
- "camel": "๐ซ",
- "camera": "๐ท",
- "camera_with_flash": "๐ธ",
- "camping": "๐",
- "cancer": "โ",
- "candle": "๐ฏ",
- "candy": "๐ฌ",
- "canned_food": "๐ฅซ",
- "canoe": "๐ถ",
- "capital_abcd": "๐ ",
- "capricorn": "โ",
- "card_file_box": "๐",
- "card_index": "๐",
- "card_index_dividers": "๐",
- "carousel_horse": "๐ ",
- "carrot": "๐ฅ",
- "cat": "๐ฑ",
- "cat2": "๐",
- "cd": "๐ฟ",
- "chains": "โ๏ธ",
- "chair": "๐ช",
- "champagne": "๐พ",
- "champagne_glass": "๐ฅ",
- "chart": "๐น",
- "chart_with_downwards_trend": "๐",
- "chart_with_upwards_trend": "๐",
- "check_box_with_check": "โ",
- "check_mark": "โ",
- "checkered_flag": "๐",
- "cheese": "๐ง",
- "cheese_wedge": "๐ง",
- "cherries": "๐",
- "cherry_blossom": "๐ธ",
- "chess_pawn": "โ",
- "chestnut": "๐ฐ",
- "chicken": "๐",
- "child": "๐ง",
- "children_crossing": "๐ธ",
- "chipmunk": "๐ฟ",
- "chocolate_bar": "๐ซ",
- "chopsticks": "๐ฅข",
- "christmas_tree": "๐",
- "church": "โช",
- "cinema": "๐ฆ",
- "circled_m": "โ",
- "circus_tent": "๐ช",
- "city_dusk": "๐",
- "city_sunset": "๐",
- "cityscape": "๐",
- "cityscape_at_dusk": "๐",
- "cl": "๐",
- "clap": "๐",
- "clapper": "๐ฌ",
- "classical_building": "๐",
- "clinking_glasses": "๐ฅ",
- "clipboard": "๐",
- "clock1": "๐",
- "clock10": "๐",
- "clock1030": "๐ฅ",
- "clock11": "๐",
- "clock1130": "๐ฆ",
- "clock12": "๐",
- "clock1230": "๐ง",
- "clock130": "๐",
- "clock2": "๐",
- "clock230": "๐",
- "clock3": "๐",
- "clock330": "๐",
- "clock4": "๐",
- "clock430": "๐",
- "clock5": "๐",
- "clock530": "๐ ",
- "clock6": "๐",
- "clock630": "๐ก",
- "clock7": "๐",
- "clock730": "๐ข",
- "clock8": "๐",
- "clock830": "๐ฃ",
- "clock9": "๐",
- "clock930": "๐ค",
- "closed_book": "๐",
- "closed_lock_with_key": "๐",
- "closed_umbrella": "๐",
- "cloud": "โ๏ธ",
- "cloud_with_lightning": "๐ฉ",
- "cloud_with_lightning_and_rain": "โ๏ธ",
- "cloud_with_rain": "๐ง",
- "cloud_with_snow": "๐จ",
- "clown": "๐คก",
- "clown_face": "๐คก",
- "club_suit": "โฃ๏ธ",
- "clubs": "โฃ",
- "coat": "๐งฅ",
- "cocktail": "๐ธ",
- "coconut": "๐ฅฅ",
- "coffee": "โ",
- "coffin": "โฐ๏ธ",
- "cold_face": "๐ฅถ",
- "cold_sweat": "๐ฐ",
- "comet": "โ๏ธ",
- "compass": "๐งญ",
- "compression": "๐",
- "computer": "๐ป",
- "computer_mouse": "๐ฑ",
- "confetti_ball": "๐",
- "confounded": "๐",
- "confused": "๐",
- "congratulations": "ใ",
- "construction": "๐ง",
- "construction_worker": "๐ท",
- "control_knobs": "๐",
- "convenience_store": "๐ช",
- "cookie": "๐ช",
- "cooking": "๐ณ",
- "cool": "๐",
- "cop": "๐ฎ",
- "copyright": "ยฉ",
- "corn": "๐ฝ",
- "couch_and_lamp": "๐",
- "couple": "๐ซ",
- "couple_with_heart": "๐",
- "couplekiss": "๐",
- "cow": "๐ฎ",
- "cow2": "๐",
- "cowboy": "๐ค ",
- "cowboy_hat_face": "๐ค ",
- "crab": "๐ฆ",
- "crayon": "๐",
- "crazy_face": "๐คช",
- "credit_card": "๐ณ",
- "crescent_moon": "๐",
- "cricket": "๐ฆ",
- "cricket_game": "๐",
- "crocodile": "๐",
- "croissant": "๐ฅ",
- "cross": "โ๏ธ",
- "crossed_fingers": "๐ค",
- "crossed_flags": "๐",
- "crossed_swords": "โ๏ธ",
- "crown": "๐",
- "cry": "๐ข",
- "crying_cat_face": "๐ฟ",
- "crystal_ball": "๐ฎ",
- "cucumber": "๐ฅ",
- "cup_with_straw": "๐ฅค",
- "cupcake": "๐ง",
- "cupid": "๐",
- "curling_stone": "๐ฅ",
- "curly_hair": "๐ฆฑ",
- "curly_loop": "โฐ",
- "currency_exchange": "๐ฑ",
- "curry": "๐",
- "custard": "๐ฎ",
- "customs": "๐",
- "cut_of_meat": "๐ฅฉ",
- "cyclone": "๐",
- "dagger": "๐ก",
- "dancer": "๐",
- "dancers": "๐ฏ",
- "dango": "๐ก",
- "dark_skin_tone": "๐ฟ",
- "dark_sunglasses": "๐ถ",
- "dart": "๐ฏ",
- "dash": "๐จ",
- "date": "๐
",
- "deaf_person": "๐ง",
- "deciduous_tree": "๐ณ",
- "deer": "๐ฆ",
- "department_store": "๐ฌ",
- "derelict_house": "๐",
- "desert": "๐",
- "desert_island": "๐",
- "desktop_computer": "๐ฅ",
- "detective": "๐ต",
- "diamond_shape_with_a_dot_inside": "๐ ",
- "diamond_suit": "โฆ๏ธ",
- "diamonds": "โฆ",
- "disappointed": "๐",
- "disappointed_relieved": "๐ฅ",
- "diving_mask": "๐คฟ",
- "diya_lamp": "๐ช",
- "dizzy": "๐ซ",
- "dizzy_face": "๐ต",
- "dna": "๐งฌ",
- "do_not_litter": "๐ฏ",
- "dog": "๐ถ",
- "dog2": "๐",
- "dollar": "๐ต",
- "dolls": "๐",
- "dolphin": "๐ฌ",
- "door": "๐ช",
- "double_exclamation_mark": "โผ",
- "doughnut": "๐ฉ",
- "dove": "๐",
- "down_arrow": "โฌ",
- "downleft_arrow": "โ",
- "downright_arrow": "โ",
- "dragon": "๐",
- "dragon_face": "๐ฒ",
- "dress": "๐",
- "dromedary_camel": "๐ช",
- "drooling_face": "๐คค",
- "drop_of_blood": "๐ฉธ",
- "droplet": "๐ง",
- "drum": "๐ฅ",
- "duck": "๐ฆ",
- "dumpling": "๐ฅ",
- "dvd": "๐",
- "e-mail": "๐ง",
- "eagle": "๐ฆ
",
- "ear": "๐",
- "ear_of_rice": "๐พ",
- "ear_with_hearing_aid": "๐ฆป",
- "earth_africa": "๐",
- "earth_americas": "๐",
- "earth_asia": "๐",
- "egg": "๐ฅ",
- "eggplant": "๐",
- "eight": "8โฃ",
- "eight_pointed_black_star": "โด๏ธ",
- "eight_spoked_asterisk": "โณ๏ธ",
- "eightpointed_star": "โด",
- "eightspoked_asterisk": "โณ",
- "eject_button": "โ",
- "electric_plug": "๐",
- "elephant": "๐",
- "elf": "๐ง",
- "end": "๐",
- "envelope": "โ",
- "envelope_with_arrow": "๐ฉ",
- "euro": "๐ถ",
- "european_castle": "๐ฐ",
- "european_post_office": "๐ค",
- "evergreen_tree": "๐ฒ",
- "exclamation": "โ",
- "exclamation_question_mark": "โ",
- "exploding_head": "๐คฏ",
- "expressionless": "๐",
- "eye": "๐",
- "eyeglasses": "๐",
- "eyes": "๐",
- "face_vomiting": "๐คฎ",
- "face_with_hand_over_mouth": "๐คญ",
- "face_with_headbandage": "๐ค",
- "face_with_monocle": "๐ง",
- "face_with_raised_eyebrow": "๐คจ",
- "face_with_symbols_on_mouth": "๐คฌ",
- "face_with_symbols_over_mouth": "๐คฌ",
- "face_with_thermometer": "๐ค",
- "factory": "๐ญ",
- "fairy": "๐ง",
- "falafel": "๐ง",
- "fallen_leaf": "๐",
- "family": "๐ช",
- "fast_forward": "โฉ",
- "fax": "๐ ",
- "fearful": "๐จ",
- "feet": "๐พ",
- "female_sign": "โ",
- "ferris_wheel": "๐ก",
- "ferry": "โด๏ธ",
- "field_hockey": "๐",
- "file_cabinet": "๐",
- "file_folder": "๐",
- "film_frames": "๐",
- "film_projector": "๐ฝ",
- "fingers_crossed": "๐ค",
- "fire": "๐ฅ",
- "fire_engine": "๐",
- "fire_extinguisher": "๐งฏ",
- "firecracker": "๐งจ",
- "fireworks": "๐",
- "first_place": "๐ฅ",
- "first_quarter_moon": "๐",
- "first_quarter_moon_with_face": "๐",
- "fish": "๐",
- "fish_cake": "๐ฅ",
- "fishing_pole_and_fish": "๐ฃ",
- "fist": "โ",
- "five": "5โฃ",
- "flag_black": "๐ด",
- "flag_white": "๐ณ",
- "flags": "๐",
- "flamingo": "๐ฆฉ",
- "flashlight": "๐ฆ",
- "flat_shoe": "๐ฅฟ",
- "fleur-de-lis": "โ",
- "fleurde-lis": "โ๏ธ",
- "floppy_disk": "๐พ",
- "flower_playing_cards": "๐ด",
- "flushed": "๐ณ",
- "flying_disc": "๐ฅ",
- "flying_saucer": "๐ธ",
- "fog": "๐ซ",
- "foggy": "๐",
- "foot": "๐ฆถ",
- "football": "๐",
- "footprints": "๐ฃ",
- "fork_and_knife": "๐ด",
- "fork_and_knife_with_plate": "๐ฝ",
- "fortune_cookie": "๐ฅ ",
- "fountain": "โฒ",
- "fountain_pen": "๐",
- "four": "4โฃ",
- "four_leaf_clover": "๐",
- "fox": "๐ฆ",
- "framed_picture": "๐ผ",
- "free": "๐",
- "french_bread": "๐ฅ",
- "fried_shrimp": "๐ค",
- "fries": "๐",
- "frog": "๐ธ",
- "frowning": "๐ฆ",
- "frowning_face": "โน๏ธ",
- "fuelpump": "โฝ",
- "full_moon": "๐",
- "full_moon_with_face": "๐",
- "funeral_urn": "โฑ๏ธ",
- "game_die": "๐ฒ",
- "garlic": "๐ง",
- "gear": "โ๏ธ",
- "gem": "๐",
- "gemini": "โ",
- "genie": "๐ง",
- "ghost": "๐ป",
- "gift": "๐",
- "gift_heart": "๐",
- "giraffe": "๐ฆ",
- "girl": "๐ง",
- "glass_of_milk": "๐ฅ",
- "globe_with_meridians": "๐",
- "gloves": "๐งค",
- "goal": "๐ฅ
",
- "goal_net": "๐ฅ
",
- "goat": "๐",
- "goggles": "๐ฅฝ",
- "golf": "โณ",
- "golfer": "๐",
- "gorilla": "๐ฆ",
- "grapes": "๐",
- "green_apple": "๐",
- "green_book": "๐",
- "green_circle": "๐ข",
- "green_heart": "๐",
- "green_salad": "๐ฅ",
- "green_square": "๐ฉ",
- "grey_exclamation": "โ",
- "grey_question": "โ",
- "grimacing": "๐ฌ",
- "grin": "๐",
- "grinning": "๐",
- "guard": "๐",
- "guardsman": "๐",
- "guide_dog": "๐ฆฎ",
- "guitar": "๐ธ",
- "gun": "๐ซ",
- "haircut": "๐",
- "hamburger": "๐",
- "hammer": "๐จ",
- "hammer_and_pick": "โ๏ธ",
- "hammer_and_wrench": "๐ ",
- "hamster": "๐น",
- "hand_with_fingers_splayed": "๐",
- "handbag": "๐",
- "handshake": "๐ค",
- "hash": "#โฃ",
- "hatched_chick": "๐ฅ",
- "hatching_chick": "๐ฃ",
- "head_bandage": "๐ค",
- "headphones": "๐ง",
- "hear_no_evil": "๐",
- "heart": "โค๏ธ",
- "heart_decoration": "๐",
- "heart_exclamation": "โฃ",
- "heart_eyes": "๐",
- "heart_eyes_cat": "๐ป",
- "heart_suit": "โฅ๏ธ",
- "heartbeat": "๐",
- "heartpulse": "๐",
- "hearts": "โฅ",
- "heavy_check_mark": "โ๏ธ",
- "heavy_division_sign": "โ",
- "heavy_dollar_sign": "๐ฒ",
- "heavy_minus_sign": "โ",
- "heavy_multiplication_x": "โ๏ธ",
- "heavy_plus_sign": "โ",
- "hedgehog": "๐ฆ",
- "helicopter": "๐",
- "herb": "๐ฟ",
- "hibiscus": "๐บ",
- "high_brightness": "๐",
- "high_heel": "๐ ",
- "hiking_boot": "๐ฅพ",
- "hindu_temple": "๐",
- "hippopotamus": "๐ฆ",
- "hockey": "๐",
- "hole": "๐ณ",
- "honey_pot": "๐ฏ",
- "horse": "๐ด",
- "horse_racing": "๐",
- "hospital": "๐ฅ",
- "hot_face": "๐ฅต",
- "hot_pepper": "๐ถ",
- "hot_springs": "โจ",
- "hotdog": "๐ญ",
- "hotel": "๐จ",
- "hotsprings": "โจ๏ธ",
- "hourglass": "โ",
- "hourglass_flowing_sand": "โณ",
- "house": "๐ ",
- "house_with_garden": "๐ก",
- "houses": "๐",
- "hugging": "๐ค",
- "hundred_points": "๐ฏ",
- "hushed": "๐ฏ",
- "ice": "๐ง",
- "ice_cream": "๐จ",
- "ice_hockey": "๐",
- "ice_skate": "โธ๏ธ",
- "icecream": "๐ฆ",
- "id": "๐",
- "ideograph_advantage": "๐",
- "imp": "๐ฟ",
- "inbox_tray": "๐ฅ",
- "incoming_envelope": "๐จ",
- "index_pointing_up": "โ",
- "infinity": "โพ",
- "information": "โน๏ธ",
- "information_desk_person": "๐",
- "information_source": "โน",
- "innocent": "๐",
- "input_numbers": "๐ข",
- "interrobang": "โ๏ธ",
- "iphone": "๐ฑ",
- "izakaya_lantern": "๐ฎ",
- "jack_o_lantern": "๐",
- "japan": "๐พ",
- "japanese_castle": "๐ฏ",
- "japanese_congratulations_button": "ใ๏ธ",
- "japanese_free_of_charge_button": "๐",
- "japanese_goblin": "๐บ",
- "japanese_ogre": "๐น",
- "japanese_reserved_button": "๐ฏ",
- "japanese_secret_button": "ใ๏ธ",
- "japanese_service_charge_button": "๐",
- "jeans": "๐",
- "joy": "๐",
- "joy_cat": "๐น",
- "joystick": "๐น",
- "kaaba": "๐",
- "kangaroo": "๐ฆ",
- "key": "๐",
- "keyboard": "โจ๏ธ",
- "keycap_ten": "๐",
- "kick_scooter": "๐ด",
- "kimono": "๐",
- "kiss": "๐",
- "kissing": "๐",
- "kissing_cat": "๐ฝ",
- "kissing_closed_eyes": "๐",
- "kissing_heart": "๐",
- "kissing_smiling_eyes": "๐",
- "kitchen_knife": "๐ช",
- "kite": "๐ช",
- "kiwi": "๐ฅ",
- "kiwi_fruit": "๐ฅ",
- "knife": "๐ช",
- "koala": "๐จ",
- "koko": "๐",
- "lab_coat": "๐ฅผ",
- "label": "๐ท",
- "lacrosse": "๐ฅ",
- "large_blue_diamond": "๐ท",
- "large_orange_diamond": "๐ถ",
- "last_quarter_moon": "๐",
- "last_quarter_moon_with_face": "๐",
- "last_track_button": "โฎ๏ธ",
- "latin_cross": "โ",
- "laughing": "๐",
- "leafy_green": "๐ฅฌ",
- "leaves": "๐",
- "ledger": "๐",
- "left_arrow": "โฌ
",
- "left_arrow_curving_right": "โช",
- "left_facing_fist": "๐ค",
- "left_luggage": "๐
",
- "left_right_arrow": "โ",
- "leftfacing_fist": "๐ค",
- "leftright_arrow": "โ๏ธ",
- "leftwards_arrow_with_hook": "โฉ๏ธ",
- "leg": "๐ฆต",
- "lemon": "๐",
- "leo": "โ",
- "leopard": "๐",
- "level_slider": "๐",
- "libra": "โ",
- "light_rail": "๐",
- "light_skin_tone": "๐ป",
- "link": "๐",
- "linked_paperclips": "๐",
- "lion_face": "๐ฆ",
- "lips": "๐",
- "lipstick": "๐",
- "lizard": "๐ฆ",
- "llama": "๐ฆ",
- "lobster": "๐ฆ",
- "lock": "๐",
- "lock_with_ink_pen": "๐",
- "lollipop": "๐ญ",
- "loop": "โฟ",
- "lotion_bottle": "๐งด",
- "loud_sound": "๐",
- "loudspeaker": "๐ข",
- "love_hotel": "๐ฉ",
- "love_letter": "๐",
- "love_you_gesture": "๐ค",
- "loveyou_gesture": "๐ค",
- "low_brightness": "๐
",
- "luggage": "๐งณ",
- "lying_face": "๐คฅ",
- "m": "โ๏ธ",
- "mag": "๐",
- "mag_right": "๐",
- "mage": "๐ง",
- "magnet": "๐งฒ",
- "mahjong": "๐",
- "mailbox": "๐ซ",
- "mailbox_closed": "๐ช",
- "mailbox_with_mail": "๐ฌ",
- "mailbox_with_no_mail": "๐ญ",
- "male_sign": "โ",
- "man": "๐จ",
- "man_dancing": "๐บ",
- "man_in_suit": "๐ด",
- "man_in_tuxedo": "๐คต",
- "man_with_chinese_cap": "๐ฒ",
- "man_with_gua_pi_mao": "๐ฒ",
- "man_with_turban": "๐ณ",
- "mango": "๐ฅญ",
- "mans_shoe": "๐",
- "mantelpiece_clock": "๐ฐ",
- "manual_wheelchair": "๐ฆฝ",
- "maple_leaf": "๐",
- "martial_arts_uniform": "๐ฅ",
- "mask": "๐ท",
- "massage": "๐",
- "mate": "๐ง",
- "meat_on_bone": "๐",
- "mechanical_arm": "๐ฆพ",
- "mechanical_leg": "๐ฆฟ",
- "medal": "๐
",
- "medical_symbol": "โ",
- "medium_skin_tone": "๐ฝ",
- "mediumdark_skin_tone": "๐พ",
- "mediumlight_skin_tone": "๐ผ",
- "mega": "๐ฃ",
- "melon": "๐",
- "memo": "๐",
- "menorah": "๐",
- "mens": "๐น",
- "merperson": "๐ง",
- "metal": "๐ค",
- "metro": "๐",
- "microbe": "๐ฆ ",
- "microphone": "๐ค",
- "microscope": "๐ฌ",
- "middle_finger": "๐",
- "military_medal": "๐",
- "milk": "๐ฅ",
- "milky_way": "๐",
- "minibus": "๐",
- "minidisc": "๐ฝ",
- "mobile_phone_off": "๐ด",
- "money_mouth": "๐ค",
- "money_with_wings": "๐ธ",
- "moneybag": "๐ฐ",
- "moneymouth_face": "๐ค",
- "monkey": "๐",
- "monkey_face": "๐ต",
- "monorail": "๐",
- "moon_cake": "๐ฅฎ",
- "mortar_board": "๐",
- "mosque": "๐",
- "mosquito": "๐ฆ",
- "motor_boat": "๐ฅ",
- "motor_scooter": "๐ต",
- "motorcycle": "๐",
- "motorized_wheelchair": "๐ฆผ",
- "motorway": "๐ฃ",
- "mount_fuji": "๐ป",
- "mountain": "โฐ๏ธ",
- "mountain_bicyclist": "๐ต",
- "mountain_cableway": "๐ ",
- "mountain_railway": "๐",
- "mouse": "๐ญ",
- "mouse2": "๐",
- "movie_camera": "๐ฅ",
- "moyai": "๐ฟ",
- "mrs_claus": "๐คถ",
- "multiplication_sign": "โ",
- "muscle": "๐ช",
- "mushroom": "๐",
- "musical_keyboard": "๐น",
- "musical_note": "๐ต",
- "musical_score": "๐ผ",
- "mute": "๐",
- "nail_care": "๐
",
- "name_badge": "๐",
- "national_park": "๐",
- "nauseated_face": "๐คข",
- "nazar_amulet": "๐งฟ",
- "necktie": "๐",
- "negative_squared_cross_mark": "โ",
- "nerd": "๐ค",
- "neutral_face": "๐",
- "new": "๐",
- "new_moon": "๐",
- "new_moon_with_face": "๐",
- "newspaper": "๐ฐ",
- "next_track_button": "โญ๏ธ",
- "ng": "๐",
- "night_with_stars": "๐",
- "nine": "9โฃ",
- "no_bell": "๐",
- "no_bicycles": "๐ณ",
- "no_entry": "โ",
- "no_entry_sign": "๐ซ",
- "no_good": "๐
",
- "no_mobile_phones": "๐ต",
- "no_mouth": "๐ถ",
- "no_pedestrians": "๐ท",
- "no_smoking": "๐ญ",
- "non-potable_water": "๐ฑ",
- "nose": "๐",
- "notebook": "๐",
- "notebook_with_decorative_cover": "๐",
- "notes": "๐ถ",
- "nut_and_bolt": "๐ฉ",
- "o": "โญ",
- "o_button_blood_type": "๐
พ",
- "ocean": "๐",
- "octagonal_sign": "๐",
- "octopus": "๐",
- "oden": "๐ข",
- "office": "๐ข",
- "oil_drum": "๐ข",
- "ok": "๐",
- "ok_hand": "๐",
- "ok_woman": "๐",
- "old_key": "๐",
- "older_adult": "๐ง",
- "older_man": "๐ด",
- "older_person": "๐ง",
- "older_woman": "๐ต",
- "om_symbol": "๐",
- "on": "๐",
- "oncoming_automobile": "๐",
- "oncoming_bus": "๐",
- "oncoming_fist": "๐",
- "oncoming_police_car": "๐",
- "oncoming_taxi": "๐",
- "one": "1โฃ",
- "onepiece_swimsuit": "๐ฉฑ",
- "onion": "๐ง
",
- "open_file_folder": "๐",
- "open_hands": "๐",
- "open_mouth": "๐ฎ",
- "ophiuchus": "โ",
- "orange_book": "๐",
- "orange_circle": "๐ ",
- "orange_heart": "๐งก",
- "orange_square": "๐ง",
- "orangutan": "๐ฆง",
- "orthodox_cross": "โฆ๏ธ",
- "otter": "๐ฆฆ",
- "outbox_tray": "๐ค",
- "owl": "๐ฆ",
- "ox": "๐",
- "oyster": "๐ฆช",
- "p_button": "๐
ฟ",
- "package": "๐ฆ",
- "page_facing_up": "๐",
- "page_with_curl": "๐",
- "pager": "๐",
- "paintbrush": "๐",
- "palm_tree": "๐ด",
- "palms_up_together": "๐คฒ",
- "pancakes": "๐ฅ",
- "panda_face": "๐ผ",
- "paperclip": "๐",
- "parachute": "๐ช",
- "parrot": "๐ฆ",
- "part_alternation_mark": "ใฝ",
- "partly_sunny": "โ
",
- "partying_face": "๐ฅณ",
- "passenger_ship": "๐ณ",
- "passport_control": "๐",
- "pause_button": "โธ๏ธ",
- "peace": "โฎ",
- "peace_symbol": "โฎ๏ธ",
- "peach": "๐",
- "peacock": "๐ฆ",
- "peanuts": "๐ฅ",
- "pear": "๐",
- "pen": "๐",
- "pencil": "๐",
- "pencil2": "โ",
- "penguin": "๐ง",
- "pensive": "๐",
- "people_with_bunny_ears_partying": "๐ฏ",
- "people_wrestling": "๐คผ",
- "performing_arts": "๐ญ",
- "persevere": "๐ฃ",
- "person": "๐ง",
- "person_biking": "๐ด",
- "person_bouncing_ball": "โน๏ธ",
- "person_bowing": "๐",
- "person_cartwheeling": "๐คธ",
- "person_climbing": "๐ง",
- "person_doing_cartwheel": "๐คธ",
- "person_facepalming": "๐คฆ",
- "person_fencing": "๐คบ",
- "person_frowning": "๐",
- "person_gesturing_no": "๐
",
- "person_gesturing_ok": "๐",
- "person_getting_haircut": "๐",
- "person_getting_massage": "๐",
- "person_in_lotus_position": "๐ง",
- "person_in_steamy_room": "๐ง",
- "person_juggling": "๐คน",
- "person_kneeling": "๐ง",
- "person_mountain_biking": "๐ต",
- "person_playing_handball": "๐คพ",
- "person_playing_water_polo": "๐คฝ",
- "person_pouting": "๐",
- "person_raising_hand": "๐",
- "person_rowing_boat": "๐ฃ",
- "person_running": "๐",
- "person_shrugging": "๐คท",
- "person_standing": "๐ง",
- "person_surfing": "๐",
- "person_swimming": "๐",
- "person_tipping_hand": "๐",
- "person_walking": "๐ถ",
- "person_wearing_turban": "๐ณ",
- "person_with_blond_hair": "๐ฑ",
- "person_with_pouting_face": "๐",
- "petri_dish": "๐งซ",
- "pick": "โ๏ธ",
- "pie": "๐ฅง",
- "pig": "๐ท",
- "pig2": "๐",
- "pig_nose": "๐ฝ",
- "pill": "๐",
- "pinching_hand": "๐ค",
- "pineapple": "๐",
- "ping_pong": "๐",
- "pisces": "โ",
- "pizza": "๐",
- "place_of_worship": "๐",
- "play_button": "โถ",
- "play_or_pause_button": "โฏ๏ธ",
- "play_pause": "โฏ",
- "pleading_face": "๐ฅบ",
- "point_down": "๐",
- "point_left": "๐",
- "point_right": "๐",
- "point_up": "โ๏ธ",
- "point_up_2": "๐",
- "police_car": "๐",
- "police_officer": "๐ฎ",
- "poodle": "๐ฉ",
- "poop": "๐ฉ",
- "popcorn": "๐ฟ",
- "post_office": "๐ฃ",
- "postal_horn": "๐ฏ",
- "postbox": "๐ฎ",
- "potable_water": "๐ฐ",
- "potato": "๐ฅ",
- "pouch": "๐",
- "poultry_leg": "๐",
- "pound": "๐ท",
- "pouting_cat": "๐พ",
- "pray": "๐",
- "prayer_beads": "๐ฟ",
- "pregnant_woman": "๐คฐ",
- "pretzel": "๐ฅจ",
- "prince": "๐คด",
- "princess": "๐ธ",
- "printer": "๐จ",
- "probing_cane": "๐ฆฏ",
- "punch": "๐",
- "purple_circle": "๐ฃ",
- "purple_heart": "๐",
- "purse": "๐",
- "pushpin": "๐",
- "put_litter_in_its_place": "๐ฎ",
- "puzzle_piece": "๐งฉ",
- "question": "โ",
- "rabbit": "๐ฐ",
- "rabbit2": "๐",
- "raccoon": "๐ฆ",
- "racehorse": "๐",
- "racing_car": "๐",
- "radio": "๐ป",
- "radio_button": "๐",
- "radioactive": "โข๏ธ",
- "rage": "๐ก",
- "railway_car": "๐",
- "railway_track": "๐ค",
- "rainbow": "๐",
- "raised_back_of_hand": "๐ค",
- "raised_hand": "โ",
- "raised_hands": "๐",
- "raising_hand": "๐",
- "ram": "๐",
- "ramen": "๐",
- "rat": "๐",
- "razor": "๐ช",
- "receipt": "๐งพ",
- "record_button": "โบ๏ธ",
- "recycle": "โป",
- "recycling_symbol": "โป๏ธ",
- "red_car": "๐",
- "red_circle": "๐ด",
- "red_envelope": "๐งง",
- "red_hair": "๐ฆฐ",
- "red_heart": "โค",
- "red_square": "๐ฅ",
- "regional_indicator_a": "๐ฆ",
- "regional_indicator_b": "๐ง",
- "regional_indicator_c": "๐จ",
- "regional_indicator_d": "๐ฉ",
- "regional_indicator_e": "๐ช",
- "regional_indicator_f": "๐ซ",
- "regional_indicator_g": "๐ฌ",
- "regional_indicator_h": "๐ญ",
- "regional_indicator_i": "๐ฎ",
- "regional_indicator_j": "๐ฏ",
- "regional_indicator_k": "๐ฐ",
- "regional_indicator_l": "๐ฑ",
- "regional_indicator_m": "๐ฒ",
- "regional_indicator_n": "๐ณ",
- "regional_indicator_o": "๐ด",
- "regional_indicator_p": "๐ต",
- "regional_indicator_q": "๐ถ",
- "regional_indicator_r": "๐ท",
- "regional_indicator_s": "๐ธ",
- "regional_indicator_t": "๐น",
- "regional_indicator_u": "๐บ",
- "regional_indicator_v": "๐ป",
- "regional_indicator_w": "๐ผ",
- "regional_indicator_x": "๐ฝ",
- "regional_indicator_y": "๐พ",
- "regional_indicator_z": "๐ฟ",
- "registered": "ยฎ",
- "relieved": "๐",
- "reminder_ribbon": "๐",
- "repeat": "๐",
- "repeat_one": "๐",
- "rescue_workerโs_helmet": "โ๏ธ",
- "restroom": "๐ป",
- "reverse_button": "โ",
- "revolving_hearts": "๐",
- "rewind": "โช",
- "rhino": "๐ฆ",
- "rhinoceros": "๐ฆ",
- "ribbon": "๐",
- "rice": "๐",
- "rice_ball": "๐",
- "rice_cracker": "๐",
- "rice_scene": "๐",
- "right_arrow": "โก๏ธ",
- "right_arrow_curving_down": "โคต",
- "right_arrow_curving_left": "โฉ",
- "right_arrow_curving_up": "โคด",
- "right_facing_fist": "๐ค",
- "rightfacing_fist": "๐ค",
- "ring": "๐",
- "ringed_planet": "๐ช",
- "robot": "๐ค",
- "rocket": "๐",
- "rofl": "๐คฃ",
- "roll_of_paper": "๐งป",
- "rolledup_newspaper": "๐",
- "roller_coaster": "๐ข",
- "rolling_eyes": "๐",
- "rolling_on_the_floor_laughing": "๐คฃ",
- "rooster": "๐",
- "rose": "๐น",
- "rosette": "๐ต",
- "rotating_light": "๐จ",
- "round_pushpin": "๐",
- "rowboat": "๐ฃ",
- "rugby_football": "๐",
- "runner": "๐",
- "running_shirt_with_sash": "๐ฝ",
- "safety_pin": "๐งท",
- "safety_vest": "๐ฆบ",
- "sagittarius": "โ",
- "sailboat": "โต",
- "sake": "๐ถ",
- "salad": "๐ฅ",
- "salt": "๐ง",
- "sandal": "๐ก",
- "sandwich": "๐ฅช",
- "santa": "๐
",
- "sari": "๐ฅป",
- "satellite": "๐ก",
- "sauropod": "๐ฆ",
- "saxophone": "๐ท",
- "scales": "โ",
- "scarf": "๐งฃ",
- "school": "๐ซ",
- "school_satchel": "๐",
- "scissors": "โ",
- "scooter": "๐ด",
- "scorpion": "๐ฆ",
- "scorpius": "โ",
- "scream": "๐ฑ",
- "scream_cat": "๐",
- "scroll": "๐",
- "seat": "๐บ",
- "second_place": "๐ฅ",
- "secret": "ใ",
- "see_no_evil": "๐",
- "seedling": "๐ฑ",
- "selfie": "๐คณ",
- "seven": "7โฃ",
- "shallow_pan_of_food": "๐ฅ",
- "shamrock": "โ๏ธ",
- "shark": "๐ฆ",
- "shaved_ice": "๐ง",
- "sheep": "๐",
- "shell": "๐",
- "shield": "๐ก",
- "shinto_shrine": "โฉ๏ธ",
- "ship": "๐ข",
- "shirt": "๐",
- "shopping_bags": "๐",
- "shopping_cart": "๐",
- "shorts": "๐ฉณ",
- "shower": "๐ฟ",
- "shrimp": "๐ฆ",
- "shushing_face": "๐คซ",
- "sign_of_the_horns": "๐ค",
- "signal_strength": "๐ถ",
- "six": "6โฃ",
- "six_pointed_star": "๐ฏ",
- "skateboard": "๐น",
- "ski": "๐ฟ",
- "skier": "โท๏ธ",
- "skull": "๐",
- "skull_and_crossbones": "โ ๏ธ",
- "skull_crossbones": "โ ",
- "skunk": "๐ฆจ",
- "sled": "๐ท",
- "sleeping": "๐ด",
- "sleeping_accommodation": "๐",
- "sleepy": "๐ช",
- "slight_frown": "๐",
- "slight_smile": "๐",
- "slightly_frowning_face": "๐",
- "slot_machine": "๐ฐ",
- "sloth": "๐ฆฅ",
- "small_airplane": "๐ฉ",
- "small_blue_diamond": "๐น",
- "small_orange_diamond": "๐ธ",
- "small_red_triangle": "๐บ",
- "small_red_triangle_down": "๐ป",
- "smile": "๐",
- "smile_cat": "๐ธ",
- "smiley": "๐",
- "smiley_cat": "๐บ",
- "smiling": "โบ๏ธ",
- "smiling_face": "โบ",
- "smiling_face_with_hearts": "๐ฅฐ",
- "smiling_imp": "๐",
- "smirk": "๐",
- "smirk_cat": "๐ผ",
- "smoking": "๐ฌ",
- "snail": "๐",
- "snake": "๐",
- "sneezing_face": "๐คง",
- "snowboarder": "๐",
- "snowcapped_mountain": "๐",
- "snowflake": "โ",
- "snowman": "โ",
- "soap": "๐งผ",
- "sob": "๐ญ",
- "soccer": "โฝ",
- "socks": "๐งฆ",
- "softball": "๐ฅ",
- "soon": "๐",
- "sos": "๐",
- "sound": "๐",
- "space_invader": "๐พ",
- "spade_suit": "โ ๏ธ",
- "spades": "โ ",
- "spaghetti": "๐",
- "sparkle": "โ",
- "sparkler": "๐",
- "sparkles": "โจ",
- "sparkling_heart": "๐",
- "speak_no_evil": "๐",
- "speaker": "๐",
- "speaking_head": "๐ฃ",
- "speech_balloon": "๐ฌ",
- "speech_left": "๐จ",
- "speedboat": "๐ค",
- "spider": "๐ท",
- "spider_web": "๐ธ",
- "spiral_calendar": "๐",
- "spiral_notepad": "๐",
- "sponge": "๐งฝ",
- "spoon": "๐ฅ",
- "squid": "๐ฆ",
- "stadium": "๐",
- "star": "โญ",
- "star2": "๐",
- "star_and_crescent": "โช๏ธ",
- "star_of_david": "โก",
- "star_struck": "๐คฉ",
- "stars": "๐ ",
- "starstruck": "๐คฉ",
- "station": "๐",
- "statue_of_liberty": "๐ฝ",
- "steam_locomotive": "๐",
- "stethoscope": "๐ฉบ",
- "stew": "๐ฒ",
- "stop_button": "โน๏ธ",
- "stopwatch": "โฑ๏ธ",
- "straight_ruler": "๐",
- "strawberry": "๐",
- "stuck_out_tongue": "๐",
- "stuck_out_tongue_closed_eyes": "๐",
- "stuck_out_tongue_winking_eye": "๐",
- "studio_microphone": "๐",
- "stuffed_flatbread": "๐ฅ",
- "sun": "โ",
- "sun_behind_large_cloud": "๐ฅ",
- "sun_behind_rain_cloud": "๐ฆ",
- "sun_behind_small_cloud": "๐ค",
- "sun_with_face": "๐",
- "sunflower": "๐ป",
- "sunglasses": "๐",
- "sunny": "โ๏ธ",
- "sunrise": "๐
",
- "sunrise_over_mountains": "๐",
- "superhero": "๐ฆธ",
- "supervillain": "๐ฆน",
- "surfer": "๐",
- "sushi": "๐ฃ",
- "suspension_railway": "๐",
- "swan": "๐ฆข",
- "sweat": "๐",
- "sweat_drops": "๐ฆ",
- "sweat_smile": "๐
",
- "sweet_potato": "๐ ",
- "swimmer": "๐",
- "symbols": "๐ฃ",
- "synagogue": "๐",
- "syringe": "๐",
- "t_rex": "๐ฆ",
- "taco": "๐ฎ",
- "tada": "๐",
- "takeout_box": "๐ฅก",
- "tanabata_tree": "๐",
- "tangerine": "๐",
- "taurus": "โ",
- "taxi": "๐",
- "tea": "๐ต",
- "teddy_bear": "๐งธ",
- "telephone": "โ",
- "telephone_receiver": "๐",
- "telescope": "๐ญ",
- "tennis": "๐พ",
- "tent": "โบ",
- "test_tube": "๐งช",
- "thermometer": "๐ก",
- "thermometer_face": "๐ค",
- "thinking": "๐ค",
- "third_place": "๐ฅ",
- "thought_balloon": "๐ญ",
- "thread": "๐งต",
- "three": "3โฃ",
- "thumbsdown": "๐",
- "thumbsup": "๐",
- "ticket": "๐ซ",
- "tiger": "๐ฏ",
- "tiger2": "๐
",
- "timer_clock": "โฒ๏ธ",
- "tired_face": "๐ซ",
- "tm": "โข",
- "toilet": "๐ฝ",
- "tokyo_tower": "๐ผ",
- "tomato": "๐
",
- "tone1": "๐ป",
- "tone2": "๐ผ",
- "tone3": "๐ฝ",
- "tone4": "๐พ",
- "tone5": "๐ฟ",
- "tongue": "๐
",
- "toolbox": "๐งฐ",
- "tooth": "๐ฆท",
- "top": "๐",
- "tophat": "๐ฉ",
- "tornado": "๐ช",
- "track_next": "โญ",
- "track_previous": "โฎ",
- "trackball": "๐ฒ",
- "tractor": "๐",
- "trade_mark": "โข๏ธ",
- "traffic_light": "๐ฅ",
- "train": "๐",
- "train2": "๐",
- "tram": "๐",
- "trex": "๐ฆ",
- "triangular_flag_on_post": "๐ฉ",
- "triangular_ruler": "๐",
- "trident": "๐ฑ",
- "triumph": "๐ค",
- "trolleybus": "๐",
- "trophy": "๐",
- "tropical_drink": "๐น",
- "tropical_fish": "๐ ",
- "truck": "๐",
- "trumpet": "๐บ",
- "tulip": "๐ท",
- "tumbler_glass": "๐ฅ",
- "turkey": "๐ฆ",
- "turtle": "๐ข",
- "tv": "๐บ",
- "twisted_rightwards_arrows": "๐",
- "two": "2โฃ",
- "two_hearts": "๐",
- "two_men_holding_hands": "๐ฌ",
- "two_women_holding_hands": "๐ญ",
- "u5272": "๐น",
- "u5408": "๐ด",
- "u55b6": "๐บ",
- "u6307": "๐ฏ",
- "u6708": "๐ท",
- "u6709": "๐ถ",
- "u6e80": "๐ต",
- "u7121": "๐",
- "u7533": "๐ธ",
- "u7981": "๐ฒ",
- "u7a7a": "๐ณ",
- "umbrella": "โ",
- "umbrella_on_ground": "โฑ๏ธ",
- "unamused": "๐",
- "underage": "๐",
- "unicorn": "๐ฆ",
- "unlock": "๐",
- "up": "๐",
- "up_arrow": "โฌ",
- "updown_arrow": "โ๏ธ",
- "upleft_arrow": "โ๏ธ",
- "upright_arrow": "โ",
- "upside_down": "๐",
- "v": "โ๏ธ",
- "vampire": "๐ง",
- "vertical_traffic_light": "๐ฆ",
- "vhs": "๐ผ",
- "vibration_mode": "๐ณ",
- "victory_hand": "โ",
- "video_camera": "๐น",
- "video_game": "๐ฎ",
- "violin": "๐ป",
- "virgo": "โ",
- "volcano": "๐",
- "volleyball": "๐",
- "vs": "๐",
- "vulcan": "๐",
- "vulcan_salute": "๐",
- "waffle": "๐ง",
- "walking": "๐ถ",
- "waning_crescent_moon": "๐",
- "waning_gibbous_moon": "๐",
- "warning": "โ ",
- "wastebasket": "๐",
- "watch": "โ",
- "water_buffalo": "๐",
- "watermelon": "๐",
- "wave": "๐",
- "wavy_dash": "ใฐ๏ธ",
- "waxing_crescent_moon": "๐",
- "waxing_gibbous_moon": "๐",
- "wc": "๐พ",
- "weary": "๐ฉ",
- "wedding": "๐",
- "weightlifter": "๐",
- "whale": "๐ณ",
- "whale2": "๐",
- "wheel_of_dharma": "โธ๏ธ",
- "wheelchair": "โฟ",
- "white_check_mark": "โ
",
- "white_circle": "โช",
- "white_flower": "๐ฎ",
- "white_hair": "๐ฆณ",
- "white_heart": "๐ค",
- "white_large_square": "โฌ",
- "white_medium_small_square": "โฝ",
- "white_medium_square": "โป๏ธ",
- "white_small_square": "โซ๏ธ",
- "white_square_button": "๐ณ",
- "wilted_flower": "๐ฅ",
- "wilted_rose": "๐ฅ",
- "wind_blowing_face": "๐ฌ",
- "wind_chime": "๐",
- "wine_glass": "๐ท",
- "wink": "๐",
- "wolf": "๐บ",
- "woman": "๐ฉ",
- "woman_with_headscarf": "๐ง",
- "womans_clothes": "๐",
- "womans_hat": "๐",
- "womens": "๐บ",
- "woozy_face": "๐ฅด",
- "world_map": "๐บ",
- "worried": "๐",
- "wrench": "๐ง",
- "writing_hand": "โ๏ธ",
- "x": "โ",
- "yarn": "๐งถ",
- "yawning_face": "๐ฅฑ",
- "yellow_circle": "๐ก",
- "yellow_heart": "๐",
- "yellow_square": "๐จ",
- "yen": "๐ด",
- "yin_yang": "โฏ๏ธ",
- "yoyo": "๐ช",
- "yum": "๐",
- "zany_face": "๐คช",
- "zap": "โก",
- "zebra": "๐ฆ",
- "zero": "0โฃ",
- "zipper_mouth": "๐ค",
- "zombie": "๐ง",
- "zzz": "๐ค"
-}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index cf98fef3..f4d4358c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9733,6 +9733,11 @@ unicode-canonical-property-names-ecmascript@^2.0.0:
resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
integrity sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==
+unicode-emoji-json@^0.3.0:
+ version "0.3.0"
+ resolved "https://registry.yarnpkg.com/unicode-emoji-json/-/unicode-emoji-json-0.3.0.tgz#965e097ef8a367081c5036f81873015a95a5c1ad"
+ integrity sha512-yImheILedqhZtVEEenRELu9AnX347ZTA3bVMWAU5WMUv7pdU2hcfpwo2mKN8Rns9uHLmOZP90/4B4SPS5aF/iw==
+
unicode-match-property-ecmascript@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz#54fd16e0ecb167cf04cf1f756bdcc92eba7976c3"
From 1953320d80dcbdf895798e6319ec69e1075bc4a8 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 8 Jan 2022 16:55:00 -0500
Subject: [PATCH 24/30] Make emoji picker use grouped unicode emojis
---
src/components/emoji_input/suggestor.js | 2 +-
src/components/emoji_picker/emoji_picker.js | 16 ++++----
.../post_status_form/post_status_form.js | 6 +--
src/components/react_button/react_button.js | 4 +-
.../settings_modal/tabs/profile_tab.js | 4 +-
src/modules/instance.js | 38 +++++++++++++++----
6 files changed, 48 insertions(+), 22 deletions(-)
diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js
index e8efbd1e..befe82be 100644
--- a/src/components/emoji_input/suggestor.js
+++ b/src/components/emoji_input/suggestor.js
@@ -2,7 +2,7 @@
* suggest - generates a suggestor function to be used by emoji-input
* data: object providing source information for specific types of suggestions:
* data.emoji - optional, an array of all emoji available i.e.
- * (state.instance.emoji + state.instance.customEmoji)
+ * (getters.standardEmojiList + state.instance.customEmoji)
* data.users - optional, an array of all known users
* updateUsersList - optional, a function to search and append to users
*
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 612e0c19..5d759ec3 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -213,16 +213,18 @@ const EmojiPicker = {
defaultGroup () {
return Object.keys(this.allCustomGroups)[0]
},
+ unicodeEmojiGroups () {
+ return this.$store.getters.standardEmojiGroupList.map(group => ({
+ id: `standard-${group.id}`,
+ text: this.$t(`emoji.unicode_groups.${group.id}`),
+ icon: 'box-open',
+ emojis: group.emojis
+ }))
+ },
allEmojiGroups () {
- const standardEmojis = this.$store.state.instance.emoji || []
return Object.entries(this.allCustomGroups)
.map(([_, v]) => v)
- .concat({
- id: 'standard',
- text: this.$t('emoji.unicode'),
- icon: 'box-open',
- emojis: filterByKeyword(standardEmojis, this.keyword)
- })
+ .concat(this.unicodeEmojiGroups)
},
filteredEmojiGroups () {
return this.allEmojiGroups
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 84a9e29e..a4e57cb7 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -164,7 +164,7 @@ const PostStatusForm = {
emojiUserSuggestor () {
return suggestor({
emoji: [
- ...this.$store.state.instance.emoji,
+ ...this.$store.getters.standardEmojiList,
...this.$store.state.instance.customEmoji
],
store: this.$store
@@ -173,13 +173,13 @@ const PostStatusForm = {
emojiSuggestor () {
return suggestor({
emoji: [
- ...this.$store.state.instance.emoji,
+ ...this.$store.getters.standardEmojiList,
...this.$store.state.instance.customEmoji
]
})
},
emoji () {
- return this.$store.state.instance.emoji || []
+ return this.$store.getters.standardEmojiList || []
},
customEmoji () {
return this.$store.state.instance.customEmoji || []
diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index ce82c90d..c2d9bfb5 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -45,7 +45,7 @@ const ReactButton = {
if (this.filterWord !== '') {
const filterWordLowercase = this.filterWord.toLowerCase()
let orderedEmojiList = []
- for (const emoji of this.$store.state.instance.emoji) {
+ for (const emoji of this.$store.getters.standardEmojiList) {
if (emoji.replacement === this.filterWord) return [emoji]
const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase)
@@ -58,7 +58,7 @@ const ReactButton = {
}
return orderedEmojiList.flat()
}
- return this.$store.state.instance.emoji || []
+ return this.$store.getters.standardEmojiList || []
},
mergedConfig () {
return this.$store.getters.mergedConfig
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index bee8a7bb..4b68b46d 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -60,7 +60,7 @@ const ProfileTab = {
emojiUserSuggestor () {
return suggestor({
emoji: [
- ...this.$store.state.instance.emoji,
+ ...this.$store.getters.standardEmojiList,
...this.$store.state.instance.customEmoji
],
store: this.$store
@@ -68,7 +68,7 @@ const ProfileTab = {
},
emojiSuggestor () {
return suggestor({ emoji: [
- ...this.$store.state.instance.emoji,
+ ...this.$store.getters.standardEmojiList,
...this.$store.state.instance.customEmoji
] })
},
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 15825783..64d04464 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -3,6 +3,18 @@ import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
import apiService from '../services/api/api.service.js'
import { instanceDefaultProperties } from './config.js'
+const SORTED_EMOJI_GROUP_IDS = [
+ 'smileys-and-emotion',
+ 'people-and-body',
+ 'animals-and-nature',
+ 'food-and-drink',
+ 'travel-and-places',
+ 'activities',
+ 'objects',
+ 'symbols',
+ 'flags'
+]
+
const defaultState = {
// Stuff from apiConfig
name: 'Pleroma FE',
@@ -63,7 +75,7 @@ const defaultState = {
// Nasty stuff
customEmoji: [],
customEmojiFetched: false,
- emoji: [],
+ emoji: {},
emojiFetched: false,
pleromaBackend: true,
postFormats: [],
@@ -138,6 +150,17 @@ const instance = {
return res
}, {})
},
+ standardEmojiList (state) {
+ return SORTED_EMOJI_GROUP_IDS
+ .map(groupId => state.emoji[groupId] || [])
+ .reduce((a, b) => a.concat(b), [])
+ },
+ standardEmojiGroupList (state) {
+ return SORTED_EMOJI_GROUP_IDS.map(groupId => ({
+ id: groupId,
+ emojis: state.emoji[groupId] || []
+ }))
+ },
instanceDomain (state) {
return new URL(state.server).hostname
}
@@ -164,13 +187,14 @@ const instance = {
const res = await window.fetch('/static/emoji.json')
if (res.ok) {
const values = await res.json()
- const emoji = Object.keys(values).map((key) => {
- return {
- displayText: key,
+ const emoji = Object.keys(values).reduce((res, groupId) => {
+ res[groupId] = values[groupId].map(e => ({
+ displayText: e.name,
imageUrl: false,
- replacement: values[key]
- }
- }).sort((a, b) => a.name > b.name ? 1 : -1)
+ replacement: e.emoji
+ }))
+ return res
+ }, {})
commit('setInstanceOption', { name: 'emoji', value: emoji })
} else {
throw (res)
From 8e9c6f9528db193c5e6f33ba2cfc308989493338 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 8 Jan 2022 17:14:23 -0500
Subject: [PATCH 25/30] Add icons for unicode emoji groups
---
src/components/emoji_picker/emoji_picker.js | 36 +++++++++++++++++++--
1 file changed, 33 insertions(+), 3 deletions(-)
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 5d759ec3..58713fb7 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -6,15 +6,45 @@ import { library } from '@fortawesome/fontawesome-svg-core'
import {
faBoxOpen,
faStickyNote,
- faSmileBeam
+ faSmileBeam,
+ faSmile,
+ faUser,
+ faPaw,
+ faIceCream,
+ faBus,
+ faBasketballBall,
+ faLightbulb,
+ faCode,
+ faFlag
} from '@fortawesome/free-solid-svg-icons'
library.add(
faBoxOpen,
faStickyNote,
- faSmileBeam
+ faSmileBeam,
+ faSmile,
+ faUser,
+ faPaw,
+ faIceCream,
+ faBus,
+ faBasketballBall,
+ faLightbulb,
+ faCode,
+ faFlag
)
+const UNICODE_EMOJI_GROUP_ICON = {
+ 'smileys-and-emotion': 'smile',
+ 'people-and-body': 'user',
+ 'animals-and-nature': 'paw',
+ 'food-and-drink': 'ice-cream',
+ 'travel-and-places': 'bus',
+ 'activities': 'basketball-ball',
+ 'objects': 'lightbulb',
+ 'symbols': 'code',
+ 'flags': 'flag',
+}
+
const filterByKeyword = (list, keyword = '') => {
if (keyword === '') return list
@@ -217,7 +247,7 @@ const EmojiPicker = {
return this.$store.getters.standardEmojiGroupList.map(group => ({
id: `standard-${group.id}`,
text: this.$t(`emoji.unicode_groups.${group.id}`),
- icon: 'box-open',
+ icon: UNICODE_EMOJI_GROUP_ICON[group.id],
emojis: group.emojis
}))
},
From 210a67f444f27c602a9e51bc52fc39d31ad1d911 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 8 Jan 2022 17:16:48 -0500
Subject: [PATCH 26/30] Add English translation for unicode emoji group names
---
src/i18n/en.json | 11 +++++++++++
1 file changed, 11 insertions(+)
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f8336e5c..9b09daf6 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -186,6 +186,17 @@
"add_emoji": "Insert emoji",
"custom": "Custom emoji",
"unicode": "Unicode emoji",
+ "unicode_groups": {
+ "activities": "Activities",
+ "animals-and-nature": "Animals & Nature",
+ "flags": "Flags",
+ "food-and-drink": "Food & Drink",
+ "objects": "Objects",
+ "people-and-body": "People & Body",
+ "smileys-and-emotion": "Smileys & Emotion",
+ "symbols": "Symbols",
+ "travel-and-places": "Travel & Places"
+ },
"load_all_hint": "Loaded first {saneAmount} emoji, loading all emoji may cause performance issues.",
"load_all": "Loading all {emojiAmount} emoji"
},
From 3ed30dd2ba0fcfbd6439190c1c841abb0becb62e Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 8 Jan 2022 17:17:32 -0500
Subject: [PATCH 27/30] Lint
---
src/components/emoji_picker/emoji_picker.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 58713fb7..5ca0699d 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -42,7 +42,7 @@ const UNICODE_EMOJI_GROUP_ICON = {
'activities': 'basketball-ball',
'objects': 'lightbulb',
'symbols': 'code',
- 'flags': 'flag',
+ 'flags': 'flag'
}
const filterByKeyword = (list, keyword = '') => {
From 906349e3b4847779cb744bfeecffcdc3814a9649 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 17 Jan 2022 23:41:11 -0500
Subject: [PATCH 28/30] Make StillImage react to src changes
---
src/components/still-image/still-image.js | 8 ++++++++
1 file changed, 8 insertions(+)
diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js
index 1806d33b..200ef147 100644
--- a/src/components/still-image/still-image.js
+++ b/src/components/still-image/still-image.js
@@ -57,6 +57,14 @@ const StillImage = {
onError () {
this.imageLoadError && this.imageLoadError()
}
+ },
+ watch: {
+ src () {
+ this.realSrc = this.src
+ },
+ dataSrc () {
+ this.$el.removeAttribute('data-loaded')
+ }
}
}
From d6a14a48e0d7c553c8227b94f118fdcbce3460ff Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 6 Apr 2022 21:29:50 -0400
Subject: [PATCH 29/30] Make emoji picker work with vue3
---
src/components/emoji_picker/emoji_picker.js | 21 ++++++++++++++------
src/components/emoji_picker/emoji_picker.vue | 8 +++++---
2 files changed, 20 insertions(+), 9 deletions(-)
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 5ca0699d..daf1a4c2 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -83,7 +83,9 @@ const EmojiPicker = {
keepOpen: false,
customEmojiTimeout: null,
// Lazy-load only after the first time `showing` becomes true.
- contentLoaded: false
+ contentLoaded: false,
+ groupRefs: {},
+ emojiRefs: {}
}
},
components: {
@@ -92,6 +94,12 @@ const EmojiPicker = {
StillImage
},
methods: {
+ setGroupRef (name) {
+ return el => { this.groupRefs[name] = el }
+ },
+ setEmojiRef (name) {
+ return el => { this.emojiRefs[name] = el }
+ },
onStickerUploaded (e) {
this.$emit('sticker-uploaded', e)
},
@@ -111,8 +119,8 @@ const EmojiPicker = {
const top = target.scrollTop + 5
this.$nextTick(() => {
this.allEmojiGroups.forEach(group => {
- const ref = this.$refs['group-' + group.id]
- if (ref[0].offsetTop <= top) {
+ const ref = this.groupRefs['group-' + group.id]
+ if (ref && ref.offsetTop <= top) {
this.activeGroup = group.id
}
})
@@ -121,7 +129,7 @@ const EmojiPicker = {
},
scrollHeader () {
// Scroll the active tab's header into view
- const headerRef = this.$refs['group-header-' + this.activeGroup][0]
+ const headerRef = this.groupRefs['group-header-' + this.activeGroup]
const left = headerRef.offsetLeft
const right = left + headerRef.offsetWidth
const headerCont = this.$refs.header
@@ -137,7 +145,7 @@ const EmojiPicker = {
}
},
highlight (key) {
- const ref = this.$refs['group-' + key]
+ const ref = this.groupRefs['group-' + key]
const top = ref.offsetTop
this.setShowStickers(false)
this.activeGroup = key
@@ -168,7 +176,8 @@ const EmojiPicker = {
this.$nextTick(() => {
this.$lozad = lozad('.still-image.emoji-picker-emoji', {
load: el => {
- const vn = el.__vue__
+ const name = el.getAttribute('data-emoji-name')
+ const vn = this.emojiRefs[name]
if (!vn) {
return
}
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index b202df91..6084fd66 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -9,7 +9,7 @@
>
<span
v-for="group in filteredEmojiGroups"
- :ref="'group-header-' + group.id"
+ :ref="setGroupRef('group-header-' + group.id)"
:key="group.id"
class="emoji-tabs-item"
:class="{
@@ -79,7 +79,7 @@
class="emoji-group"
>
<h6
- :ref="'group-' + group.id"
+ :ref="setGroupRef('group-' + group.id)"
class="emoji-group-title"
>
{{ group.text }}
@@ -95,10 +95,12 @@
<still-image
v-else
class="emoji-picker-emoji"
+ :ref="setEmojiRef(group.id + emoji.displayText)"
:data-src="emoji.imageUrl"
+ :data-emoji-name="group.id + emoji.displayText"
/>
</span>
- <span :ref="'group-end-' + group.id" />
+ <span :ref="setGroupRef('group-end-' + group.id)" />
</div>
</div>
<div class="keep-open">
From 0336cd037046030a8817c4eaaf38cef6b242e2ee Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 29 Apr 2022 22:40:06 -0400
Subject: [PATCH 30/30] Limit the width of unsupported multichar emojis
---
src/components/emoji_picker/emoji_picker.scss | 8 ++++++--
src/components/emoji_picker/emoji_picker.vue | 7 +++++--
2 files changed, 11 insertions(+), 4 deletions(-)
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index a7c89303..92a0cbcb 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -195,18 +195,22 @@ $emoji-picker-emoji-size: 32px;
height: $emoji-picker-emoji-size;
box-sizing: border-box;
display: flex;
- font-size: $emoji-picker-emoji-size;
+ line-height: $emoji-picker-emoji-size;
align-items: center;
justify-content: center;
margin: 4px;
cursor: pointer;
- img {
+ .emoji-picker-emoji.-custom {
object-fit: contain;
max-width: 100%;
max-height: 100%;
}
+ .emoji-picker-emoji.-unicode {
+ font-size: 24px;
+ overflow: hidden;
+ }
}
}
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 6084fd66..d61e5d8b 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -91,10 +91,13 @@
class="emoji-item"
@click.stop.prevent="onEmoji(emoji)"
>
- <span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
+ <span
+ v-if="!emoji.imageUrl"
+ class="emoji-picker-emoji -unicode"
+ >{{ emoji.replacement }}</span>
<still-image
v-else
- class="emoji-picker-emoji"
+ class="emoji-picker-emoji -custom"
:ref="setEmojiRef(group.id + emoji.displayText)"
:data-src="emoji.imageUrl"
:data-emoji-name="group.id + emoji.displayText"