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

Co-authored-by: Daniel Roe <daniel@roe.dev>
This commit is contained in:
Yuexun Jiang 2023-01-16 18:22:26 +08:00 committed by GitHub
parent 9898a19358
commit e847f8ef1d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 172 additions and 0 deletions

View file

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

View file

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

View file

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

View file

@ -4,8 +4,17 @@ import { VueRenderer } from '@tiptap/vue-3'
import type { SuggestionOptions } from '@tiptap/suggestion' import type { SuggestionOptions } from '@tiptap/suggestion'
import { PluginKey } from 'prosemirror-state' import { PluginKey } from 'prosemirror-state'
import type { Component } from 'vue' 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 TiptapMentionList from '~/components/tiptap/TiptapMentionList.vue'
import TiptapHashtagList from '~/components/tiptap/TiptapHashtagList.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> = { export const MentionSuggestion: Partial<SuggestionOptions> = {
pluginKey: new PluginKey('mention'), pluginKey: new PluginKey('mention'),
@ -39,6 +48,43 @@ export const HashtagSuggestion: Partial<SuggestionOptions> = {
render: createSuggestionRenderer(TiptapHashtagList), 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'] { function createSuggestionRenderer(component: Component): SuggestionOptions['render'] {
return () => { return () => {
let renderer: VueRenderer let renderer: VueRenderer