feat: init emoji picker (#532)
This commit is contained in:
Anthony Fu
GitHub
parent
6037700197
commit
55443e4d8a
46
components/publish/PublishEmojiPicker.client.vue
Normal file
46
components/publish/PublishEmojiPicker.client.vue
Normal 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>
|
||||
|
|
@ -64,6 +64,10 @@ async function handlePaste(evt: ClipboardEvent) {
|
|||
await uploadAttachments(Array.from(files))
|
||||
}
|
||||
|
||||
function insertText(text: string) {
|
||||
editor.value?.chain().insertContent(text).focus().run()
|
||||
}
|
||||
|
||||
async function pickAttachments() {
|
||||
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
|
||||
border="t base"
|
||||
>
|
||||
<PublishEmojiPicker @select="insertText" />
|
||||
|
||||
<CommonTooltip placement="bottom" :content="$t('tooltip.add_media')">
|
||||
<button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments">
|
||||
<div i-ri:image-add-line />
|
||||
|
|
|
|||
|
|
@ -300,6 +300,7 @@
|
|||
"add_content_warning": "Add content warning",
|
||||
"add_media": "Add images, a video or an audio file",
|
||||
"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_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.",
|
||||
|
|
|
|||
|
|
@ -57,6 +57,7 @@
|
|||
"devDependencies": {
|
||||
"@antfu/eslint-config": "^0.34.0",
|
||||
"@antfu/ni": "^0.18.8",
|
||||
"@emoji-mart/data": "^1.1.0",
|
||||
"@iconify-json/carbon": "^1.1.11",
|
||||
"@iconify-json/logos": "^1.1.19",
|
||||
"@iconify-json/material-symbols": "^1.1.25",
|
||||
|
|
@ -74,6 +75,7 @@
|
|||
"@vitejs/plugin-vue": "^3.2.0",
|
||||
"@vue-macros/nuxt": "^0.1.2",
|
||||
"@vueuse/nuxt": "^9.8.2",
|
||||
"emoji-mart": "^5.4.0",
|
||||
"eslint": "^8.29.0",
|
||||
"esno": "^0.16.3",
|
||||
"fs-extra": "^11.1.0",
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ lockfileVersion: 5.4
|
|||
specifiers:
|
||||
'@antfu/eslint-config': ^0.34.0
|
||||
'@antfu/ni': ^0.18.8
|
||||
'@emoji-mart/data': ^1.1.0
|
||||
'@fnando/sparkline': ^0.3.10
|
||||
'@iconify-json/carbon': ^1.1.11
|
||||
'@iconify-json/logos': ^1.1.19
|
||||
|
|
@ -34,6 +35,7 @@ specifiers:
|
|||
'@vueuse/nuxt': ^9.8.2
|
||||
blurhash: ^2.0.4
|
||||
browser-fs-access: ^0.31.1
|
||||
emoji-mart: ^5.4.0
|
||||
eslint: ^8.29.0
|
||||
esno: ^0.16.3
|
||||
floating-vue: 2.0.0-beta.20
|
||||
|
|
@ -105,6 +107,7 @@ dependencies:
|
|||
devDependencies:
|
||||
'@antfu/eslint-config': 0.34.0_s5ps7njkmjlaqajutnox5ntcla
|
||||
'@antfu/ni': 0.18.8
|
||||
'@emoji-mart/data': 1.1.0
|
||||
'@iconify-json/carbon': 1.1.11
|
||||
'@iconify-json/logos': 1.1.19
|
||||
'@iconify-json/material-symbols': 1.1.25
|
||||
|
|
@ -122,6 +125,7 @@ devDependencies:
|
|||
'@vitejs/plugin-vue': 3.2.0
|
||||
'@vue-macros/nuxt': 0.1.2_bvgxowbvgmi7uddrvyjqbdegoy
|
||||
'@vueuse/nuxt': 9.8.2_nuxt@3.0.0
|
||||
emoji-mart: 5.4.0
|
||||
eslint: 8.29.0
|
||||
esno: 0.16.3
|
||||
fs-extra: 11.1.0
|
||||
|
|
@ -1459,6 +1463,10 @@ packages:
|
|||
mime: 3.0.0
|
||||
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:
|
||||
resolution: {integrity: sha512-lhc/XLith28QdW0HpHZvZKkorWgmCNT7sVelMHDj3HFdTfdqkwEKvT+aXVQtNAmCC39VJhunDkWhONWB7335mg==}
|
||||
dependencies:
|
||||
|
|
@ -1624,8 +1632,8 @@ packages:
|
|||
vue-i18n:
|
||||
optional: true
|
||||
dependencies:
|
||||
'@intlify/message-compiler': 9.3.0-beta.10
|
||||
'@intlify/shared': 9.3.0-beta.10
|
||||
'@intlify/message-compiler': 9.3.0-beta.11
|
||||
'@intlify/shared': 9.3.0-beta.11
|
||||
jsonc-eslint-parser: 1.4.1
|
||||
source-map: 0.6.1
|
||||
vue-i18n: 9.3.0-beta.10
|
||||
|
|
@ -1657,11 +1665,24 @@ packages:
|
|||
source-map: 0.6.1
|
||||
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:
|
||||
resolution: {integrity: sha512-h93uAanbAt/XgjDHclrVB7xix6r7Uz11wx0iGNOCdHP7aA2LCJjUT3uNbekJjjbo+Fl5jzTSJZdm2SexzoqhRA==}
|
||||
engines: {node: '>= 14'}
|
||||
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:
|
||||
resolution: {integrity: sha512-bqMDYrbmV0oMLGHTdYMUXfcEsy2rPwQnGrQAg4gvw5FimvJfTQt3RliLVayT5ldOfeT2g0IUc/0t7LPeGrFUag==}
|
||||
engines: {node: '>= 14.16'}
|
||||
|
|
@ -1678,7 +1699,7 @@ packages:
|
|||
optional: true
|
||||
dependencies:
|
||||
'@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
|
||||
'@vue/compiler-sfc': 3.2.45
|
||||
debug: 4.3.4
|
||||
|
|
@ -4725,6 +4746,10 @@ packages:
|
|||
resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==}
|
||||
dev: true
|
||||
|
||||
/emoji-mart/5.4.0:
|
||||
resolution: {integrity: sha512-xrRrUmMqZG64oRxmUZcf8zSMUGQtIUYUL3aZD5iMkqAve+I9wMNh3OVOXL7NW9fEm48L2LI3BUPpj/DUIAJrVg==}
|
||||
dev: true
|
||||
|
||||
/emoji-regex/8.0.0:
|
||||
resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
|
||||
dev: true
|
||||
|
|
@ -9966,7 +9991,7 @@ packages:
|
|||
vue-router:
|
||||
optional: true
|
||||
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-router-bridge': 0.8.0
|
||||
ufo: 1.0.1
|
||||
|
|
|
|||
|
|
@ -175,3 +175,7 @@ body {
|
|||
stroke: var(--c-primary);
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
em-emoji-picker {
|
||||
--border-radius: 0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue