From addbe1b5673568db5b45a3f3337955756fe876f9 Mon Sep 17 00:00:00 2001
From: wheat <jacobrclevenger@gmail.com>
Date: Sat, 26 Nov 2022 01:55:54 -0500
Subject: [PATCH] feat: query for tiptap mention autocomplete (#120)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
---
 components/tiptap/TiptapMentionList.vue | 10 ++++++----
 composables/tiptap.ts                   |  8 +++++---
 composables/tiptap/suggestion.ts        | 13 ++++++++-----
 styles/tiptap.css                       |  4 ++++
 4 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/components/tiptap/TiptapMentionList.vue b/components/tiptap/TiptapMentionList.vue
index 0b286994..f1264a14 100644
--- a/components/tiptap/TiptapMentionList.vue
+++ b/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>
diff --git a/composables/tiptap.ts b/composables/tiptap.ts
index 964a1e7e..a3e294ef 100644
--- a/composables/tiptap.ts
+++ b/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,
       }),
diff --git a/composables/tiptap/suggestion.ts b/composables/tiptap/suggestion.ts
index 48d9f675..f88d2422 100644
--- a/composables/tiptap/suggestion.ts
+++ b/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(),
 }
diff --git a/styles/tiptap.css b/styles/tiptap.css
index adafdc30..dcc6d3b5 100644
--- a/styles/tiptap.css
+++ b/styles/tiptap.css
@@ -5,3 +5,7 @@
   height: 0;
   opacity: 0.4;
 }
+
+span[data-type="mention"] {
+  --at-apply: text-primary
+}