elk/components/tiptap/TiptapMentionList.vue

<script setup lang="ts">
import type { Account } from 'masto'

const { items, command } = defineProps<{
  items: Account[]
  command: Function
  isPending?: boolean
}>()

let selectedIndex = $ref(0)

watch(items, () => {
  selectedIndex = 0
})

function onKeyDown(event: KeyboardEvent) {
  if (event.key === 'ArrowUp') {
    selectedIndex = ((selectedIndex + items.length) - 1) % items.length
    return true
  }
  else if (event.key === 'ArrowDown') {
    selectedIndex = (selectedIndex + 1) % items.length
    return true
  }
  else if (event.key === 'Enter') {
    selectItem(selectedIndex)
    return true
  }

  return false
}

function selectItem(index: number) {
  const item = items[index]
  if (item)
    command({ id: item.acct })
}

defineExpose({
  onKeyDown,
})
</script>

<template>
  <div v-if="isPending || items.length" relative bg-base text-base shadow border="~ base rounded" text-sm py-2 overflow-x-hidden overflow-y-auto max-h-100>
    <template v-if="isPending">
      <div flex gap-1 items-center p2 animate-pulse>
        <div i-ri:loader-2-line animate-spin />
        <span>Fetching...</span>
      </div>
    </template>
    <template v-if="items.length">
      <button
        v-for="(item, index) in items"
        :key="index"
        :class="index === selectedIndex ? 'bg-active' : 'text-secondary'"
        block m0 w-full text-left px2 py1
        @click="selectItem(index)"
      >
        <AccountInfo :account="item" />
      </button>
    </template>
  </div>
  <div v-else />
</template>