feat(publish): add hashtag autocomplete (#778)

components/tiptap/TiptapHashtagList.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { Tag } from 'masto'
+import CommonScrollIntoView from '../common/CommonScrollIntoView.vue'
+import HashtagInfo from '../search/HashtagInfo.vue'
+
+const { items, command } = defineProps<{
+  items: Tag[]
+  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.name })
+}
+
+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">
+      <CommonScrollIntoView
+        v-for="(item, index) in items" :key="index"
+        :active="index === selectedIndex"
+        as="button"
+        :class="index === selectedIndex ? 'bg-active' : 'text-secondary'"
+        block m0 w-full text-left px2 py1
+        @click="selectItem(index)"
+      >
+        <HashtagInfo :hashtag="item" />
+      </CommonScrollIntoView>
+    </template>
+  </div>
+  <div v-else />
+</template>