zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

46
composables/tiptap/suggestion.ts
View file

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