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

components/content/ContentRich.setup.ts

@@ -1,5 +1,6 @@
 import type { Emoji } from 'masto'
 import { emojisArrayToObject } from '~/composables/utils'
+import { currentCustomEmojis } from '~/composables/emojis'
 
 defineOptions({
   name: 'ContentRich',
@@ -11,11 +12,21 @@ const { content, emojis, markdown = true } = defineProps<{
   emojis?: Emoji[]
 }>()
 
+const useEmojis = computed(() => {
+  const result: Emoji[] = []
+  if (emojis)
+    result.push(...emojis)
+
+  result.push(...currentCustomEmojis.value.emojis)
+
+  return emojisArrayToObject(result)
+})
+
 export default () => h(
   'span',
   { class: 'content-rich' },
   contentToVNode(content, {
-    emojis: emojisArrayToObject(emojis || []),
+    emojis: useEmojis.value,
     markdown,
   }),
 )

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