feat: render custom server emojis on editor (#579)

components/publish/PublishEmojiPicker.client.vue

@@ -4,6 +4,7 @@ import { updateCustomEmojis } from '~/composables/emojis'
 
 const emit = defineEmits<{
   (e: 'select', code: string): void
+  (e: 'selectCustom', image: any): void
 }>()
 
 const el = $ref<HTMLElement>()
@@ -22,8 +23,10 @@ async function openEmojiPicker() {
     const { Picker } = await import('emoji-mart')
     picker = new Picker({
       data: () => promise,
-      onEmojiSelect(e: any) {
-        emit('select', e.native || e.shortcodes)
+      onEmojiSelect({ native, src, alt, name }: any) {
+        native
+          ? emit('select', native)
+          : emit('selectCustom', { src, alt, 'data-emoji-id': name })
       },
       theme: isDark.value ? 'dark' : 'light',
       custom: customEmojisData.value,

components/publish/PublishWidget.vue

@@ -68,6 +68,9 @@ async function handlePaste(evt: ClipboardEvent) {
 function insertText(text: string) {
   editor.value?.chain().insertContent(text).focus().run()
 }
+function insertEmoji(image: any) {
+  editor.value?.chain().focus().setEmoji(image).run()
+}
 
 async function pickAttachments() {
   const files = await fileOpen([
@@ -277,7 +280,7 @@ defineExpose({
         v-if="shouldExpanded" flex="~ gap-2 1" m="l--1" pt-2 justify="between" max-full
         border="t base"
       >
-        <PublishEmojiPicker @select="insertText" />
+        <PublishEmojiPicker @select="insertText" @select-custom="insertEmoji" />
 
         <CommonTooltip placement="bottom" :content="$t('tooltip.add_media')">
           <button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments">