feat: query for tiptap mention autocomplete (#120)

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
This commit is contained in:
wheat 2022-11-26 01:55:54 -05:00 committed by GitHub
parent baa05fc32f
commit addbe1b567
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 12 deletions

View file

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

View file

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

View file

@ -8,11 +8,14 @@ import TiptapMentionList from '~/components/tiptap/TiptapMentionList.vue'
export const MentionSuggestion: Partial<SuggestionOptions> = { export const MentionSuggestion: Partial<SuggestionOptions> = {
pluginKey: new PluginKey('mention'), pluginKey: new PluginKey('mention'),
char: '@', char: '@',
items({ query }) { async items({ query }) {
// TODO: query if (query.length === 0)
return [ 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) const mentionPaginator = masto.search({ q: query, type: 'accounts', limit: 25, resolve: true })
const results = await mentionPaginator.next()
return results.value.accounts
}, },
render: createSuggestionRenderer(), render: createSuggestionRenderer(),
} }

View file

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