feat: init emoji picker (#532)

This commit is contained in:
Anthony Fu 2022-12-23 20:15:19 +01:00 committed by GitHub
parent 6037700197
commit 55443e4d8a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 88 additions and 4 deletions

View file

@ -0,0 +1,46 @@
<script setup lang="ts">
import type { Picker } from 'emoji-mart'
const emit = defineEmits<{
(e: 'select', code: string): void
}>()
const el = $ref<HTMLElement>()
let picker = $ref<Picker>()
async function openEmojiPicker() {
if (!picker) {
const { Picker } = await import('emoji-mart')
picker = new Picker({
data: () => import('@emoji-mart/data').then(r => r.default),
onEmojiSelect(e: any) {
emit('select', e.native)
},
theme: isDark.value ? 'dark' : 'light',
})
// TODO: custom picker
el?.appendChild(picker as any as HTMLElement)
}
}
watchEffect(() => {
if (!picker)
return
picker.update({
theme: isDark.value ? 'dark' : 'light',
})
})
</script>
<template>
<VDropdown
@apply-show="openEmojiPicker()"
>
<button btn-action-icon :title="$t('tooltip.emoji')">
<div i-ri:emotion-line />
</button>
<template #popper>
<div ref="el" />
</template>
</VDropdown>
</template>

View file

@ -64,6 +64,10 @@ async function handlePaste(evt: ClipboardEvent) {
await uploadAttachments(Array.from(files)) await uploadAttachments(Array.from(files))
} }
function insertText(text: string) {
editor.value?.chain().insertContent(text).focus().run()
}
async function pickAttachments() { async function pickAttachments() {
const files = await fileOpen([ const files = await fileOpen([
{ {
@ -232,6 +236,8 @@ defineExpose({
v-if="shouldExpanded" flex="~ gap-2 1" m="l--1" pt-2 justify="between" max-full v-if="shouldExpanded" flex="~ gap-2 1" m="l--1" pt-2 justify="between" max-full
border="t base" border="t base"
> >
<PublishEmojiPicker @select="insertText" />
<CommonTooltip placement="bottom" :content="$t('tooltip.add_media')"> <CommonTooltip placement="bottom" :content="$t('tooltip.add_media')">
<button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments"> <button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments">
<div i-ri:image-add-line /> <div i-ri:image-add-line />

View file

@ -300,6 +300,7 @@
"add_content_warning": "Add content warning", "add_content_warning": "Add content warning",
"add_media": "Add images, a video or an audio file", "add_media": "Add images, a video or an audio file",
"change_content_visibility": "Change content visibility", "change_content_visibility": "Change content visibility",
"emoji": "Emoji",
"explore_links_intro": "These news stories are being talked about by people on this and other servers of the decentralized network right now.", "explore_links_intro": "These news stories are being talked about by people on this and other servers of the decentralized network right now.",
"explore_posts_intro": "These posts from this and other servers in the decentralized network are gaining traction on this server right now.", "explore_posts_intro": "These posts from this and other servers in the decentralized network are gaining traction on this server right now.",
"explore_tags_intro": "These hashtags are gaining traction among people on this and other servers of the decentralized network right now.", "explore_tags_intro": "These hashtags are gaining traction among people on this and other servers of the decentralized network right now.",

View file

@ -57,6 +57,7 @@
"devDependencies": { "devDependencies": {
"@antfu/eslint-config": "^0.34.0", "@antfu/eslint-config": "^0.34.0",
"@antfu/ni": "^0.18.8", "@antfu/ni": "^0.18.8",
"@emoji-mart/data": "^1.1.0",
"@iconify-json/carbon": "^1.1.11", "@iconify-json/carbon": "^1.1.11",
"@iconify-json/logos": "^1.1.19", "@iconify-json/logos": "^1.1.19",
"@iconify-json/material-symbols": "^1.1.25", "@iconify-json/material-symbols": "^1.1.25",
@ -74,6 +75,7 @@
"@vitejs/plugin-vue": "^3.2.0", "@vitejs/plugin-vue": "^3.2.0",
"@vue-macros/nuxt": "^0.1.2", "@vue-macros/nuxt": "^0.1.2",
"@vueuse/nuxt": "^9.8.2", "@vueuse/nuxt": "^9.8.2",
"emoji-mart": "^5.4.0",
"eslint": "^8.29.0", "eslint": "^8.29.0",
"esno": "^0.16.3", "esno": "^0.16.3",
"fs-extra": "^11.1.0", "fs-extra": "^11.1.0",

View file

@ -3,6 +3,7 @@ lockfileVersion: 5.4
specifiers: specifiers:
'@antfu/eslint-config': ^0.34.0 '@antfu/eslint-config': ^0.34.0
'@antfu/ni': ^0.18.8 '@antfu/ni': ^0.18.8
'@emoji-mart/data': ^1.1.0
'@fnando/sparkline': ^0.3.10 '@fnando/sparkline': ^0.3.10
'@iconify-json/carbon': ^1.1.11 '@iconify-json/carbon': ^1.1.11
'@iconify-json/logos': ^1.1.19 '@iconify-json/logos': ^1.1.19
@ -34,6 +35,7 @@ specifiers:
'@vueuse/nuxt': ^9.8.2 '@vueuse/nuxt': ^9.8.2
blurhash: ^2.0.4 blurhash: ^2.0.4
browser-fs-access: ^0.31.1 browser-fs-access: ^0.31.1
emoji-mart: ^5.4.0
eslint: ^8.29.0 eslint: ^8.29.0
esno: ^0.16.3 esno: ^0.16.3
floating-vue: 2.0.0-beta.20 floating-vue: 2.0.0-beta.20
@ -105,6 +107,7 @@ dependencies:
devDependencies: devDependencies:
'@antfu/eslint-config': 0.34.0_s5ps7njkmjlaqajutnox5ntcla '@antfu/eslint-config': 0.34.0_s5ps7njkmjlaqajutnox5ntcla
'@antfu/ni': 0.18.8 '@antfu/ni': 0.18.8
'@emoji-mart/data': 1.1.0
'@iconify-json/carbon': 1.1.11 '@iconify-json/carbon': 1.1.11
'@iconify-json/logos': 1.1.19 '@iconify-json/logos': 1.1.19
'@iconify-json/material-symbols': 1.1.25 '@iconify-json/material-symbols': 1.1.25
@ -122,6 +125,7 @@ devDependencies:
'@vitejs/plugin-vue': 3.2.0 '@vitejs/plugin-vue': 3.2.0
'@vue-macros/nuxt': 0.1.2_bvgxowbvgmi7uddrvyjqbdegoy '@vue-macros/nuxt': 0.1.2_bvgxowbvgmi7uddrvyjqbdegoy
'@vueuse/nuxt': 9.8.2_nuxt@3.0.0 '@vueuse/nuxt': 9.8.2_nuxt@3.0.0
emoji-mart: 5.4.0
eslint: 8.29.0 eslint: 8.29.0
esno: 0.16.3 esno: 0.16.3
fs-extra: 11.1.0 fs-extra: 11.1.0
@ -1459,6 +1463,10 @@ packages:
mime: 3.0.0 mime: 3.0.0
dev: true dev: true
/@emoji-mart/data/1.1.0:
resolution: {integrity: sha512-gwwGC0v5+BQM5On8hy0Uw7qT+xBHVLFuamHj8wHLo4JkuYM+XlGbQuQZj/X7JJLQuBiHs4d3Xh2O+h6YlbtCCA==}
dev: true
/@esbuild-kit/cjs-loader/2.4.1: /@esbuild-kit/cjs-loader/2.4.1:
resolution: {integrity: sha512-lhc/XLith28QdW0HpHZvZKkorWgmCNT7sVelMHDj3HFdTfdqkwEKvT+aXVQtNAmCC39VJhunDkWhONWB7335mg==} resolution: {integrity: sha512-lhc/XLith28QdW0HpHZvZKkorWgmCNT7sVelMHDj3HFdTfdqkwEKvT+aXVQtNAmCC39VJhunDkWhONWB7335mg==}
dependencies: dependencies:
@ -1624,8 +1632,8 @@ packages:
vue-i18n: vue-i18n:
optional: true optional: true
dependencies: dependencies:
'@intlify/message-compiler': 9.3.0-beta.10 '@intlify/message-compiler': 9.3.0-beta.11
'@intlify/shared': 9.3.0-beta.10 '@intlify/shared': 9.3.0-beta.11
jsonc-eslint-parser: 1.4.1 jsonc-eslint-parser: 1.4.1
source-map: 0.6.1 source-map: 0.6.1
vue-i18n: 9.3.0-beta.10 vue-i18n: 9.3.0-beta.10
@ -1657,11 +1665,24 @@ packages:
source-map: 0.6.1 source-map: 0.6.1
dev: true dev: true
/@intlify/message-compiler/9.3.0-beta.11:
resolution: {integrity: sha512-gGGfBGzM7JBXp1Q9gbDAy5jELz9ho3ILqnpxp2yp64+gkqohrqc2YXIvCdwZoc6AtKIh/Zmv4sWVqxkvMsBWtQ==}
engines: {node: '>= 14'}
dependencies:
'@intlify/shared': 9.3.0-beta.11
source-map: 0.6.1
dev: true
/@intlify/shared/9.3.0-beta.10: /@intlify/shared/9.3.0-beta.10:
resolution: {integrity: sha512-h93uAanbAt/XgjDHclrVB7xix6r7Uz11wx0iGNOCdHP7aA2LCJjUT3uNbekJjjbo+Fl5jzTSJZdm2SexzoqhRA==} resolution: {integrity: sha512-h93uAanbAt/XgjDHclrVB7xix6r7Uz11wx0iGNOCdHP7aA2LCJjUT3uNbekJjjbo+Fl5jzTSJZdm2SexzoqhRA==}
engines: {node: '>= 14'} engines: {node: '>= 14'}
dev: true dev: true
/@intlify/shared/9.3.0-beta.11:
resolution: {integrity: sha512-CtbotesxTRiC3bRyXyv1NG39fkqJ790f8z8xFaeIXSZpOdiyxoh5BIyypCzSFQZDGLwz0Q9gyWbW1XpxQJm68Q==}
engines: {node: '>= 14'}
dev: true
/@intlify/unplugin-vue-i18n/0.8.0_vue-i18n@9.3.0-beta.10: /@intlify/unplugin-vue-i18n/0.8.0_vue-i18n@9.3.0-beta.10:
resolution: {integrity: sha512-bqMDYrbmV0oMLGHTdYMUXfcEsy2rPwQnGrQAg4gvw5FimvJfTQt3RliLVayT5ldOfeT2g0IUc/0t7LPeGrFUag==} resolution: {integrity: sha512-bqMDYrbmV0oMLGHTdYMUXfcEsy2rPwQnGrQAg4gvw5FimvJfTQt3RliLVayT5ldOfeT2g0IUc/0t7LPeGrFUag==}
engines: {node: '>= 14.16'} engines: {node: '>= 14.16'}
@ -1678,7 +1699,7 @@ packages:
optional: true optional: true
dependencies: dependencies:
'@intlify/bundle-utils': 3.4.0_vue-i18n@9.3.0-beta.10 '@intlify/bundle-utils': 3.4.0_vue-i18n@9.3.0-beta.10
'@intlify/shared': 9.3.0-beta.10 '@intlify/shared': 9.3.0-beta.11
'@rollup/pluginutils': 4.2.1 '@rollup/pluginutils': 4.2.1
'@vue/compiler-sfc': 3.2.45 '@vue/compiler-sfc': 3.2.45
debug: 4.3.4 debug: 4.3.4
@ -4725,6 +4746,10 @@ packages:
resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==} resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==}
dev: true dev: true
/emoji-mart/5.4.0:
resolution: {integrity: sha512-xrRrUmMqZG64oRxmUZcf8zSMUGQtIUYUL3aZD5iMkqAve+I9wMNh3OVOXL7NW9fEm48L2LI3BUPpj/DUIAJrVg==}
dev: true
/emoji-regex/8.0.0: /emoji-regex/8.0.0:
resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
dev: true dev: true
@ -9966,7 +9991,7 @@ packages:
vue-router: vue-router:
optional: true optional: true
dependencies: dependencies:
'@intlify/shared': 9.3.0-beta.10 '@intlify/shared': 9.3.0-beta.11
'@intlify/vue-i18n-bridge': 0.8.0_vue-i18n@9.3.0-beta.10 '@intlify/vue-i18n-bridge': 0.8.0_vue-i18n@9.3.0-beta.10
'@intlify/vue-router-bridge': 0.8.0 '@intlify/vue-router-bridge': 0.8.0
ufo: 1.0.1 ufo: 1.0.1

View file

@ -175,3 +175,7 @@ body {
stroke: var(--c-primary); stroke: var(--c-primary);
stroke-width: 2; stroke-width: 2;
} }
em-emoji-picker {
--border-radius: 0;
}