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">
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>

View file

@ -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,
}),

View file

@ -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(),
}

View file

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