75 lines
1.7 KiB
JavaScript
75 lines
1.7 KiB
JavaScript
import { ReactRenderer } from '@tiptap/react'
|
|
import tippy from 'tippy.js'
|
|
import MentionList from './MentionList'
|
|
|
|
/**
|
|
* TipTap suggestion configuration for @mentions.
|
|
* Fetches users from /api/search/users?q=... as the user types.
|
|
*/
|
|
export default {
|
|
items: async ({ query }) => {
|
|
if (!query || query.length < 2) return []
|
|
|
|
try {
|
|
const res = await fetch(`/api/search/users?q=${encodeURIComponent(query)}&per_page=6`)
|
|
if (!res.ok) return []
|
|
const json = await res.json()
|
|
return json.data ?? []
|
|
} catch {
|
|
return []
|
|
}
|
|
},
|
|
|
|
render: () => {
|
|
let component
|
|
let popup
|
|
|
|
return {
|
|
onStart: (props) => {
|
|
component = new ReactRenderer(MentionList, {
|
|
props,
|
|
editor: props.editor,
|
|
})
|
|
|
|
if (!props.clientRect) return
|
|
|
|
popup = tippy('body', {
|
|
getReferenceClientRect: props.clientRect,
|
|
appendTo: () => document.body,
|
|
content: component.element,
|
|
showOnCreate: true,
|
|
interactive: true,
|
|
trigger: 'manual',
|
|
placement: 'bottom-start',
|
|
theme: 'mention',
|
|
arrow: false,
|
|
offset: [0, 8],
|
|
})
|
|
},
|
|
|
|
onUpdate: (props) => {
|
|
component?.updateProps(props)
|
|
|
|
if (!props.clientRect) return
|
|
|
|
popup?.[0]?.setProps({
|
|
getReferenceClientRect: props.clientRect,
|
|
})
|
|
},
|
|
|
|
onKeyDown: (props) => {
|
|
if (props.event.key === 'Escape') {
|
|
popup?.[0]?.hide()
|
|
return true
|
|
}
|
|
return component?.ref?.onKeyDown(props) ?? false
|
|
},
|
|
|
|
onExit: () => {
|
|
popup?.[0]?.destroy()
|
|
component?.destroy()
|
|
},
|
|
}
|
|
},
|
|
}
|