65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
import { VueRenderer } from '@tiptap/vue-3'
|
|
import tippy from 'tippy.js'
|
|
import WikiPageList from '~/components/wiki/WikiPageList.vue'
|
|
|
|
// Wir brauchen Zugriff auf die rohen Items aus useWikiTree
|
|
// Da wir hier ausserhalb von setup() sind, müssen wir den State direkt holen oder übergeben.
|
|
// Einfacher: Wir nutzen useNuxtApp() oder übergeben die Items in der Config.
|
|
|
|
export default {
|
|
items: ({ query }: { query: string }) => {
|
|
// 1. Zugriff auf unsere Wiki Items
|
|
const { items } = useWikiTree()
|
|
|
|
// 2. Filtern
|
|
const allItems = items.value || []
|
|
return allItems
|
|
.filter(item => item.title.toLowerCase().includes(query.toLowerCase()))
|
|
.slice(0, 10) // Max 10 Vorschläge
|
|
},
|
|
|
|
render: () => {
|
|
let component: any
|
|
let popup: any
|
|
|
|
return {
|
|
onStart: (props: any) => {
|
|
component = new VueRenderer(WikiPageList, {
|
|
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',
|
|
})
|
|
},
|
|
|
|
onUpdate(props: any) {
|
|
component.updateProps(props)
|
|
if (!props.clientRect) return
|
|
popup[0].setProps({ getReferenceClientRect: props.clientRect })
|
|
},
|
|
|
|
onKeyDown(props: any) {
|
|
if (props.event.key === 'Escape') {
|
|
popup[0].hide()
|
|
return true
|
|
}
|
|
return component.ref?.onKeyDown(props)
|
|
},
|
|
|
|
onExit() {
|
|
popup[0].destroy()
|
|
component.destroy()
|
|
},
|
|
}
|
|
},
|
|
} |