elk/composables/tiptap/suggestion.ts

148 lines
4.4 KiB
TypeScript
Raw Normal View History

import type { GetReferenceClientRect, Instance } from 'tippy.js'
import tippy from 'tippy.js'
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
2023-01-16 11:40:47 +00:00
export const TiptapMentionSuggestion: Partial<SuggestionOptions> = {
pluginKey: new PluginKey('mention'),
char: '@',
async items({ query }) {
if (query.length === 0)
return []
2023-01-15 08:38:02 +00:00
const results = await useMastoClient().v2.search({ q: query, type: 'accounts', limit: 25, resolve: true })
2023-01-12 16:21:27 +00:00
return results.accounts
},
render: createSuggestionRenderer(TiptapMentionList),
}
2023-01-16 11:40:47 +00:00
export const TiptapHashtagSuggestion: Partial<SuggestionOptions> = {
pluginKey: new PluginKey('hashtag'),
char: '#',
async items({ query }) {
if (query.length === 0)
return []
2023-01-15 08:38:02 +00:00
const results = await useMastoClient().v2.search({
q: query,
type: 'hashtags',
limit: 25,
resolve: false,
excludeUnreviewed: true,
})
2023-01-12 16:21:27 +00:00
return results.hashtags
},
render: createSuggestionRenderer(TiptapHashtagList),
}
2023-01-16 11:40:47 +00:00
export const TiptapEmojiSuggestion: 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
let popup: Instance
return {
2022-11-27 06:54:56 +00:00
onStart(props) {
renderer = new VueRenderer(component, {
props,
editor: props.editor,
})
if (!props.clientRect)
return
popup = tippy(document.body, {
getReferenceClientRect: props.clientRect as GetReferenceClientRect,
appendTo: () => document.body,
content: renderer.element,
showOnCreate: true,
interactive: true,
trigger: 'manual',
placement: 'bottom-start',
})
},
2022-11-27 07:05:17 +00:00
// Use arrow function here because Nuxt will transform it incorrectly as Vue hook causing the build to fail
onBeforeUpdate: (props) => {
props.editor.isFocused && renderer.updateProps({ ...props, isPending: true })
},
onUpdate(props) {
if (!props.editor.isFocused)
return
renderer.updateProps({ ...props, isPending: false })
if (!props.clientRect)
return
popup?.setProps({
getReferenceClientRect: props.clientRect as GetReferenceClientRect,
})
},
onKeyDown(props) {
if (props.event.key === 'Escape') {
popup?.hide()
return true
}
return renderer?.ref?.onKeyDown(props.event)
},
onExit() {
popup?.destroy()
renderer?.destroy()
},
}
}
}