feat: init emoji picker (#532)

components/publish/PublishEmojiPicker.client.vue

@@ -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>

components/publish/PublishWidget.vue

@@ -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 />

locales/en-US.json

@@ -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.",

package.json

@@ -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",

pnpm-lock.yaml

@@ -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/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
       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

styles/global.css

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