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) {
+      onEmojiSelect({ native, src, alt, name }: any) {
-        emit('select', e.native || e.shortcodes)
+        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">

composables/content-parse.ts

@@ -19,9 +19,10 @@ export function parseMastodonHTML(html: string, customEmojis: Record<string, Emo
     // custom emojis
     .replace(/:([\w-]+?):/g, (_, name) => {
       const emoji = customEmojis[name]
-      if (emoji)
+
-        return `<img src="${emoji.url}" alt=":${name}:" class="custom-emoji" data-emoji-id="${name}" />`
+      return emoji
-      return `:${name}:`
+        ? `<img src="${emoji.url}" alt=":${name}:" class="custom-emoji" data-emoji-id="${name}" />`
+        : `:${name}:`
     })
     .replace(EMOJI_REGEX, '<em-emoji native="$1" />')
 
@@ -115,8 +116,9 @@ export function treeToText(input: Node): string {
   if ('children' in input)
     body = (input.children as Node[]).map(n => treeToText(n)).join('')
 
+  // add spaces around emoji to prevent parsing errors: 2 or more consecutive emojis will not be parsed
   if (input.name === 'img' && input.attributes.class?.includes('custom-emoji'))
-    return `:${input.attributes['data-emoji-id']}:`
+    return ` :${input.attributes['data-emoji-id']}: `
 
   return pre + body + post
 }

composables/tiptap.ts

@@ -14,6 +14,7 @@ import { Plugin } from 'prosemirror-state'
 import type { Ref } from 'vue'
 import { HashSuggestion, MentionSuggestion } from './tiptap/suggestion'
 import { CodeBlockShiki } from './tiptap/shiki'
+import { Emoji } from './tiptap/emoji'
 
 export interface UseTiptapOptions {
   content: Ref<string | undefined>
@@ -41,6 +42,13 @@ export function useTiptap(options: UseTiptapOptions) {
       Italic,
       Code,
       Text,
+      Emoji,
+      Emoji.configure({
+        inline: true,
+        HTMLAttributes: {
+          class: 'custom-emoji',
+        },
+      }),
       Mention.configure({
         suggestion: MentionSuggestion,
       }),

composables/tiptap/emoji.ts

@@ -0,0 +1,108 @@
+import {
+  Node,
+  mergeAttributes,
+  nodeInputRule,
+} from '@tiptap/core'
+
+export interface EmojiOptions {
+  inline: boolean
+  allowBase64: boolean
+  HTMLAttributes: Record<string, any>
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    emoji: {
+      /**
+       * Add an emoji.
+       */
+      setEmoji: (options: { src: string; alt?: string; title?: string }) => ReturnType
+    }
+  }
+}
+
+export const inputRegex = /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/
+
+export const Emoji = Node.create<EmojiOptions>({
+  name: 'custom-emoji',
+
+  addOptions() {
+    return {
+      inline: false,
+      allowBase64: false,
+      HTMLAttributes: {},
+    }
+  },
+
+  inline() {
+    return this.options.inline
+  },
+
+  group() {
+    return this.options.inline ? 'inline' : 'block'
+  },
+
+  draggable: false,
+
+  addAttributes() {
+    return {
+      'src': {
+        default: null,
+      },
+      'alt': {
+        default: null,
+      },
+      'title': {
+        default: null,
+      },
+      'width': {
+        default: null,
+      },
+      'height': {
+        default: null,
+      },
+      'data-emoji-id': {
+        default: null,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: this.options.allowBase64
+          ? 'img[src]'
+          : 'img[src]:not([src^="data:"])',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['img', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]
+  },
+
+  addCommands() {
+    return {
+      setEmoji: options => ({ commands }) => {
+        return commands.insertContent({
+          type: this.name,
+          attrs: options,
+        })
+      },
+    }
+  },
+
+  addInputRules() {
+    return [
+      nodeInputRule({
+        find: inputRegex,
+        type: this.type,
+        getAttributes: (match) => {
+          const [,, alt, src, title] = match
+
+          return { src, alt, title }
+        },
+      }),
+    ]
+  },
+})