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>