feat: query for tiptap mention autocomplete (#120)

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>

components/tiptap/TiptapMentionList.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import type { Account } from 'masto'
+
 const { items, command } = defineProps<{
-  items: any[]
+  items: Account[]
   command: Function
 }>()
 
@@ -30,7 +32,7 @@ function onKeyDown(event: KeyboardEvent) {
 function selectItem(index: number) {
   const item = items[index]
   if (item)
-    command({ id: item })
+    command({ id: item.acct })
 }
 
 defineExpose({
@@ -39,7 +41,7 @@ defineExpose({
 </script>
 
 <template>
-  <div relative bg-base text-base shadow border="~ base rounded" text-sm>
+  <div 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="items.length">
       <button
         v-for="(item, index) in items"
@@ -48,7 +50,7 @@ defineExpose({
         block m0 w-full text-left px2 py1
         @click="selectItem(index)"
       >
-        {{ item }}asd
+        <AccountInfo :link="false" :account="item" />
       </button>
     </template>
     <div v-else block m0 w-full text-left px2 py1 italic op30>

composables/tiptap.ts

@@ -44,9 +44,11 @@ export function useTiptap(options: UseTiptapOptions) {
       Mention.configure({
         suggestion: MentionSuggestion,
       }),
-      Mention.configure({
-        suggestion: HashSuggestion,
-      }),
+      Mention
+        .extend({ name: 'hastag' })
+        .configure({
+          suggestion: HashSuggestion,
+        }),
       Placeholder.configure({
         placeholder,
       }),

composables/tiptap/suggestion.ts

@@ -8,11 +8,14 @@ import TiptapMentionList from '~/components/tiptap/TiptapMentionList.vue'
 export const MentionSuggestion: Partial<SuggestionOptions> = {
   pluginKey: new PluginKey('mention'),
   char: '@',
-  items({ query }) {
-    // TODO: query
-    return [
-      'TODO MENTION QUERY', 'Lea Thompson', 'Cyndi Lauper', 'Tom Cruise', 'Madonna', 'Jerry Hall', 'Joan Collins', 'Winona Ryder', 'Christina Applegate', 'Alyssa Milano', 'Molly Ringwald', 'Ally Sheedy', 'Debbie Harry', 'Olivia Newton-John', 'Elton John', 'Michael J. Fox', 'Axl Rose', 'Emilio Estevez', 'Ralph Macchio', 'Rob Lowe', 'Jennifer Grey', 'Mickey Rourke', 'John Cusack', 'Matthew Broderick', 'Justine Bateman', 'Lisa Bonet',
-    ].filter(item => item.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5)
+  async items({ query }) {
+    if (query.length === 0)
+      return []
+
+    const mentionPaginator = masto.search({ q: query, type: 'accounts', limit: 25, resolve: true })
+    const results = await mentionPaginator.next()
+
+    return results.value.accounts
   },
   render: createSuggestionRenderer(),
 }

styles/tiptap.css

@@ -5,3 +5,7 @@
   height: 0;
   opacity: 0.4;
 }
+
+span[data-type="mention"] {
+  --at-apply: text-primary
+}