text: import { VueRenderer } from '@tiptap/vue-3'
  import tippy from 'tippy.js'
  import { install } from '~/modules/algolia'
  import { searchUserByName } from '~/utilities/algolia'
  import MentionList from './MentionList.vue'
  
  export default {
    items: async ({ query }) => {
      const { searchClient: algolia } = await install(null)
      const { hits } = await searchUserByName(algolia, query)
      return hits.map((hit) => { return {name: hit.name }})
    },
  
    render: () => {
      let component
      let popup
  
      return {
        onStart: (props) => {
          component = new VueRenderer(MentionList, {
            props,
            editor: props.editor,
          })
  
          popup = tippy('body', {
            getReferenceClientRect: props.clientRect,
            appendTo: () => document.body,
            content: component.element,
            showOnCreate: true,
            interactive: true,
            trigger: 'manual',
            placement: 'bottom-start',
          })
        },
  
        onUpdate(props) {
          component.updateProps(props)
  
          popup[0].setProps({
            getReferenceClientRect: props.clientRect,
          })
        },
  
        onKeyDown(props) {
          if (props.event.key === 'Escape') {
            popup[0].hide()
  
            return true
          }
  
          return component.ref?.onKeyDown(props)
        },
  
        onExit() {
          popup[0].destroy()
          component.destroy()
        },
      }
    },
  }
  