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