feat(tiptap): add discord-style emoji suggestion support (#1066)

Co-authored-by: Daniel Roe <daniel@roe.dev>

components/search/SearchEmojiInfo.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Emoji } from 'emoji-mart'
+
+export interface SearchEmoji {
+  title: string
+  src: string
+}
+
+defineProps<{
+  emoji: SearchEmoji
+}>()
+</script>
+
+<template>
+  <div flex gap-2 items-center>
+    <img
+      :key="emoji.title"
+      width="30"
+      height="30"
+      :src="emoji.src"
+      loading="lazy"
+    >
+    <div flex="~ col gap1" pt-1 pl-2 shrink h-full overflow-hidden leading-none>
+      <div flex="~" gap-2>
+        <span text-lg>:{{ emoji.title }}:</span>
+      </div>
+    </div>
+  </div>
+</template>

components/tiptap/TiptapEmojiList.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { getEmojiMatchesInText } from '@iconify/utils/lib/emoji/replace/find'
+import CommonScrollIntoView from '../common/CommonScrollIntoView.vue'
+import type { CustomEmoji, Emoji } from '~~/composables/tiptap/suggestion'
+import { isCustomEmoji } from '~~/composables/tiptap/suggestion'
+import { emojiFilename, emojiPrefix, emojiRegEx, getEmojiAttributes } from '~~/config/emojis'
+
+const { items, command } = defineProps<{
+  items: (CustomEmoji | Emoji)[]
+  command: Function
+  isPending?: boolean
+}>()
+
+const emojis = computed(() => {
+  return items.map((item: CustomEmoji | Emoji) => {
+    if (isCustomEmoji(item)) {
+      return {
+        title: item.shortcode,
+        src: item.url,
+        emoji: item,
+      }
+    }
+
+    const skin = item.skins.find(skin => skin.native !== undefined)
+    const match = getEmojiMatchesInText(emojiRegEx, skin!.native)[0]
+    const file = emojiFilename(match)
+
+    return {
+      title: item.id,
+      src: `/emojis/${emojiPrefix}/${file.filename}`,
+      emoji: item,
+    }
+  })
+})
+
+let selectedIndex = $ref(0)
+
+watch(items, () => {
+  selectedIndex = 0
+})
+
+function onKeyDown(event: KeyboardEvent) {
+  if (event.key === 'ArrowUp') {
+    selectedIndex = ((selectedIndex + items.length) - 1) % items.length
+    return true
+  }
+  else if (event.key === 'ArrowDown') {
+    selectedIndex = (selectedIndex + 1) % items.length
+    return true
+  }
+  else if (event.key === 'Enter') {
+    selectItem(selectedIndex)
+    return true
+  }
+
+  return false
+}
+
+function selectItem(index: number) {
+  const emoji = emojis.value[index]
+  if (emoji)
+    command(emoji)
+}
+
+defineExpose({
+  onKeyDown,
+})
+</script>
+
+<template>
+  <div v-if="isPending || items.length" relative bg-base text-base shadow border="~ base rounded" text-sm py-2 overflow-x-hidden overflow-y-auto max-h-100>
+    <template v-if="isPending">
+      <div flex gap-1 items-center p2 animate-pulse>
+        <div i-ri:loader-2-line animate-spin />
+        <span>Fetching...</span>
+      </div>
+    </template>
+    <template v-if="items.length">
+      <CommonScrollIntoView
+        v-for="(item, index) in emojis" :key="index"
+        :active="index === selectedIndex"
+        as="button"
+        :class="index === selectedIndex ? 'bg-active' : 'text-secondary'"
+        block m0 w-full text-left px2 py1
+        @click="selectItem(index)"
+      >
+        <SearchEmojiInfo :emoji="item" />
+      </CommonScrollIntoView>
+    </template>
+  </div>
+  <div v-else />
+</template>

composables/tiptap.ts

@@ -58,6 +58,11 @@ export function useTiptap(options: UseTiptapOptions) {
         .configure({
           suggestion: HashtagSuggestion,
         }),
+      Mention
+        .extend({ name: 'emoji' })
+        .configure({
+          suggestion: EmojiSuggestion,
+        }),
       Placeholder.configure({
         placeholder: () => placeholder.value!,
       }),

composables/tiptap/suggestion.ts

@@ -4,8 +4,17 @@ import { VueRenderer } from '@tiptap/vue-3'
 import type { SuggestionOptions } from '@tiptap/suggestion'
 import { PluginKey } from 'prosemirror-state'
 import type { Component } from 'vue'
+import type { Emoji, EmojiMartData } from '@emoji-mart/data'
+import type { mastodon } from 'masto'
+import { currentCustomEmojis, updateCustomEmojis } from '~/composables/emojis'
 import TiptapMentionList from '~/components/tiptap/TiptapMentionList.vue'
 import TiptapHashtagList from '~/components/tiptap/TiptapHashtagList.vue'
+import TiptapEmojiList from '~/components/tiptap/TiptapEmojiList.vue'
+
+export { Emoji }
+
+export type CustomEmoji = (mastodon.v1.CustomEmoji & { custom: true })
+export const isCustomEmoji = (emoji: CustomEmoji | Emoji): emoji is CustomEmoji => !!(emoji as CustomEmoji).custom
 
 export const MentionSuggestion: Partial<SuggestionOptions> = {
   pluginKey: new PluginKey('mention'),
@@ -39,6 +48,43 @@ export const HashtagSuggestion: Partial<SuggestionOptions> = {
   render: createSuggestionRenderer(TiptapHashtagList),
 }
 
+export const EmojiSuggestion: Partial<SuggestionOptions> = {
+  pluginKey: new PluginKey('emoji'),
+  char: ':',
+  async items({ query }): Promise<(CustomEmoji | Emoji)[]> {
+    if (query.length === 0)
+      return []
+
+    if (currentCustomEmojis.value.emojis.length === 0)
+      await updateCustomEmojis()
+
+    const emojis = await import('@emoji-mart/data')
+      .then(r => r.default as EmojiMartData)
+      .then(data => Object.values(data.emojis).filter(({ id }) => id.startsWith(query)))
+
+    const customEmojis: CustomEmoji[] = currentCustomEmojis.value.emojis
+      .filter(emoji => emoji.shortcode.startsWith(query))
+      .map(emoji => ({ ...emoji, custom: true }))
+    return [...emojis, ...customEmojis]
+  },
+  command: ({ editor, props, range }) => {
+    const emoji: CustomEmoji | Emoji = props.emoji
+    editor.commands.deleteRange(range)
+    if (isCustomEmoji(emoji)) {
+      editor.commands.insertCustomEmoji({
+        title: emoji.shortcode,
+        src: emoji.url,
+      })
+    }
+    else {
+      const skin = emoji.skins.find(skin => skin.native !== undefined)
+      if (skin)
+        editor.commands.insertEmoji(skin.native)
+    }
+  },
+  render: createSuggestionRenderer(TiptapEmojiList),
+}
+
 function createSuggestionRenderer(component: Component): SuggestionOptions['render'] {
   return () => {
     let renderer: VueRenderer