Add users mention with search and autocomplete
This commit is contained in:
dtonon
parent
1ff1c225c5
commit
be7c5a38ba
6 changed files with 656 additions and 12 deletions
|
|
@ -3,6 +3,12 @@
|
|||
import { uploadImage } from "$lib/blossom";
|
||||
import { BLOSSOM_URL } from "$lib/config";
|
||||
import PostContent from "$lib/components/PostContent.svelte";
|
||||
import {
|
||||
profileStore,
|
||||
searchLocalProfiles,
|
||||
searchRemoteProfiles,
|
||||
type ProfileEntry,
|
||||
} from "$lib/profiles.svelte";
|
||||
|
||||
type Props = {
|
||||
value: string;
|
||||
|
|
@ -11,6 +17,7 @@
|
|||
rows?: number;
|
||||
placeholder?: string;
|
||||
minHeightClass?: string;
|
||||
contextPubkeys?: string[];
|
||||
};
|
||||
|
||||
let {
|
||||
|
|
@ -20,6 +27,7 @@
|
|||
rows = 4,
|
||||
placeholder = "",
|
||||
minHeightClass = "",
|
||||
contextPubkeys = [],
|
||||
}: Props = $props();
|
||||
|
||||
let textareaEl = $state<HTMLTextAreaElement | null>(null);
|
||||
|
|
@ -27,6 +35,70 @@
|
|||
let uploadError = $state<string | null>(null);
|
||||
let previewing = $state(false);
|
||||
|
||||
// Mention autocomplete state
|
||||
let mentionQuery = $state<string | null>(null);
|
||||
let mentionStart = $state(0);
|
||||
let mentionEnd = $state(0);
|
||||
let mentionRemoteResults = $state<ProfileEntry[]>([]);
|
||||
let mentionIndex = $state(0);
|
||||
let userMovedCursor = $state(false);
|
||||
let anchorAbove = $state(false);
|
||||
let remoteSearching = $state(false);
|
||||
let remoteSearchTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
let remoteSearchAbort: AbortController | null = null;
|
||||
let listboxEl = $state<HTMLDivElement | null>(null);
|
||||
|
||||
const contextSet = $derived(new Set(contextPubkeys));
|
||||
|
||||
const mentionLocalResults = $derived.by(() => {
|
||||
if (mentionQuery === null) return [];
|
||||
if (mentionQuery === "") {
|
||||
// Bare "@": only thread participants we know about, no global cache spill.
|
||||
const out: ProfileEntry[] = [];
|
||||
for (const pk of contextSet) {
|
||||
const p = profileStore.profiles.get(pk);
|
||||
if (p) out.push(p);
|
||||
}
|
||||
return out
|
||||
.sort((a, b) =>
|
||||
(a.name ?? a.displayName ?? "").localeCompare(
|
||||
b.name ?? b.displayName ?? "",
|
||||
),
|
||||
)
|
||||
.slice(0, 8);
|
||||
}
|
||||
return searchLocalProfiles(mentionQuery, {
|
||||
contextPubkeys: contextSet,
|
||||
limit: 8,
|
||||
});
|
||||
});
|
||||
|
||||
// Most-relevant first internally, reversed for display so the best match
|
||||
// sits at the bottom (closest to the textarea when the dropdown opens above).
|
||||
const mergedResults = $derived.by(() => {
|
||||
const seen = new Set<string>();
|
||||
const out: ProfileEntry[] = [];
|
||||
for (const p of mentionLocalResults) {
|
||||
if (seen.has(p.pubkey)) continue;
|
||||
seen.add(p.pubkey);
|
||||
out.push(p);
|
||||
}
|
||||
for (const p of mentionRemoteResults) {
|
||||
if (seen.has(p.pubkey)) continue;
|
||||
seen.add(p.pubkey);
|
||||
out.push(p);
|
||||
}
|
||||
return out.slice(0, 8).reverse();
|
||||
});
|
||||
|
||||
const mentionOpen = $derived(mentionQuery !== null);
|
||||
|
||||
const safeMentionIndex = $derived.by(() => {
|
||||
if (mergedResults.length === 0) return 0;
|
||||
if (!userMovedCursor) return mergedResults.length - 1;
|
||||
return Math.min(mentionIndex, mergedResults.length - 1);
|
||||
});
|
||||
|
||||
export function focus() {
|
||||
textareaEl?.focus();
|
||||
}
|
||||
|
|
@ -70,6 +142,155 @@
|
|||
input.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
function detectMentionContext(text: string, cursor: number) {
|
||||
const before = text.slice(0, cursor);
|
||||
const m = before.match(/(?:^|\s)@([^\s@]*)$/);
|
||||
if (!m) return null;
|
||||
const query = m[1];
|
||||
return {
|
||||
query,
|
||||
start: cursor - query.length - 1,
|
||||
end: cursor,
|
||||
};
|
||||
}
|
||||
|
||||
function scheduleRemoteSearch(query: string, localCount: number) {
|
||||
if (remoteSearchTimer) clearTimeout(remoteSearchTimer);
|
||||
remoteSearchAbort?.abort();
|
||||
if (!query || query.length < 1 || localCount >= 8) {
|
||||
mentionRemoteResults = [];
|
||||
remoteSearching = false;
|
||||
return;
|
||||
}
|
||||
remoteSearching = true;
|
||||
remoteSearchTimer = setTimeout(async () => {
|
||||
const abort = new AbortController();
|
||||
remoteSearchAbort = abort;
|
||||
const captured = query;
|
||||
try {
|
||||
const results = await searchRemoteProfiles(captured, abort.signal);
|
||||
if (abort.signal.aborted) return;
|
||||
if (mentionQuery !== captured) return;
|
||||
mentionRemoteResults = results;
|
||||
} finally {
|
||||
if (mentionQuery === captured) remoteSearching = false;
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
|
||||
function closeMention() {
|
||||
mentionQuery = null;
|
||||
mentionRemoteResults = [];
|
||||
mentionIndex = 0;
|
||||
userMovedCursor = false;
|
||||
remoteSearching = false;
|
||||
if (remoteSearchTimer) clearTimeout(remoteSearchTimer);
|
||||
remoteSearchAbort?.abort();
|
||||
}
|
||||
|
||||
function updateMentionFromTextarea() {
|
||||
const ta = textareaEl;
|
||||
if (!ta) {
|
||||
closeMention();
|
||||
return;
|
||||
}
|
||||
const ctx = detectMentionContext(ta.value, ta.selectionStart);
|
||||
if (!ctx) {
|
||||
closeMention();
|
||||
return;
|
||||
}
|
||||
const wasOpen = mentionQuery !== null;
|
||||
if (ctx.query !== mentionQuery) {
|
||||
mentionIndex = 0;
|
||||
userMovedCursor = false;
|
||||
mentionRemoteResults = [];
|
||||
}
|
||||
mentionQuery = ctx.query;
|
||||
mentionStart = ctx.start;
|
||||
mentionEnd = ctx.end;
|
||||
scheduleRemoteSearch(ctx.query, mentionLocalResults.length);
|
||||
if (!wasOpen) updateAnchor();
|
||||
}
|
||||
|
||||
function updateAnchor() {
|
||||
const ta = textareaEl;
|
||||
if (!ta) return;
|
||||
const rect = ta.getBoundingClientRect();
|
||||
const spaceBelow = window.innerHeight - rect.bottom;
|
||||
const spaceAbove = rect.top;
|
||||
anchorAbove = spaceBelow < 280 && spaceAbove > spaceBelow;
|
||||
}
|
||||
|
||||
async function selectMention(entry: ProfileEntry) {
|
||||
const ta = textareaEl;
|
||||
if (!ta || mentionQuery === null) return;
|
||||
const before = value.slice(0, mentionStart);
|
||||
const after = value.slice(mentionEnd);
|
||||
const insertion = `nostr:${entry.npub}`;
|
||||
const trailing = after.startsWith(" ") ? "" : " ";
|
||||
value = before + insertion + trailing + after;
|
||||
closeMention();
|
||||
await tick();
|
||||
const pos = (before + insertion + trailing).length;
|
||||
ta.focus();
|
||||
ta.setSelectionRange(pos, pos);
|
||||
}
|
||||
|
||||
function profileLabel(p: ProfileEntry): string {
|
||||
return p.name || p.displayName || p.nip05 || p.npub.slice(0, 12) + "…";
|
||||
}
|
||||
|
||||
function profileSubLabel(p: ProfileEntry): string | null {
|
||||
const main = profileLabel(p);
|
||||
if (p.nip05 && p.nip05 !== main) return p.nip05;
|
||||
if (p.displayName && p.displayName !== main) return p.displayName;
|
||||
return null;
|
||||
}
|
||||
|
||||
function onTextareaInput() {
|
||||
updateMentionFromTextarea();
|
||||
}
|
||||
|
||||
function onTextareaKeydown(e: KeyboardEvent) {
|
||||
if (mentionQuery === null) return;
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
closeMention();
|
||||
return;
|
||||
}
|
||||
if (mergedResults.length === 0) return;
|
||||
if (e.key === "ArrowDown") {
|
||||
e.preventDefault();
|
||||
userMovedCursor = true;
|
||||
mentionIndex = (safeMentionIndex + 1) % mergedResults.length;
|
||||
} else if (e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
userMovedCursor = true;
|
||||
mentionIndex =
|
||||
(safeMentionIndex - 1 + mergedResults.length) % mergedResults.length;
|
||||
} else if (e.key === "Enter" || e.key === "Tab") {
|
||||
e.preventDefault();
|
||||
const entry = mergedResults[safeMentionIndex];
|
||||
if (entry) selectMention(entry);
|
||||
}
|
||||
}
|
||||
|
||||
function onTextareaClickOrSelect() {
|
||||
updateMentionFromTextarea();
|
||||
}
|
||||
|
||||
function onTextareaBlur() {
|
||||
setTimeout(() => closeMention(), 120);
|
||||
}
|
||||
|
||||
// Keep the highlighted (most-relevant) item visible as results change.
|
||||
$effect(() => {
|
||||
if (!listboxEl) return;
|
||||
const idx = safeMentionIndex;
|
||||
const items = listboxEl.querySelectorAll<HTMLElement>('[role="option"]');
|
||||
items[idx]?.scrollIntoView({ block: "nearest" });
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col {previewing ? 'flex-1 min-h-0' : ''}">
|
||||
|
|
@ -85,14 +306,110 @@
|
|||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<textarea
|
||||
bind:this={textareaEl}
|
||||
bind:value
|
||||
{disabled}
|
||||
{rows}
|
||||
{placeholder}
|
||||
class="w-full rounded-t border border-gray-200 px-3 py-2 focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50 resize-none {minHeightClass}"
|
||||
></textarea>
|
||||
<div class="relative">
|
||||
<textarea
|
||||
bind:this={textareaEl}
|
||||
bind:value
|
||||
{disabled}
|
||||
{rows}
|
||||
{placeholder}
|
||||
oninput={onTextareaInput}
|
||||
onkeydown={onTextareaKeydown}
|
||||
onclick={onTextareaClickOrSelect}
|
||||
onkeyup={onTextareaClickOrSelect}
|
||||
onblur={onTextareaBlur}
|
||||
aria-autocomplete="list"
|
||||
aria-controls={mentionOpen ? "mention-listbox" : undefined}
|
||||
class="w-full rounded-t border border-gray-200 px-3 py-2 focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50 resize-none {minHeightClass}"
|
||||
></textarea>
|
||||
{#if mentionOpen}
|
||||
<div
|
||||
id="mention-listbox"
|
||||
bind:this={listboxEl}
|
||||
class="absolute z-30 left-0 right-0 max-h-72 overflow-auto rounded border border-gray-200 bg-white shadow-lg"
|
||||
class:bottom-full={anchorAbove}
|
||||
class:mb-1={anchorAbove}
|
||||
class:top-full={!anchorAbove}
|
||||
class:mt-1={!anchorAbove}
|
||||
>
|
||||
{#if mentionQuery === ""}
|
||||
<div
|
||||
class="px-3 py-1.5 text-xs text-gray-400"
|
||||
class:border-b={mergedResults.length > 0}
|
||||
class:border-gray-100={mergedResults.length > 0}
|
||||
>
|
||||
Type to search
|
||||
</div>
|
||||
{:else if remoteSearching && mergedResults.length > 0}
|
||||
<div
|
||||
class="px-3 py-1.5 text-xs text-gray-400 flex items-center gap-2 border-b border-gray-100"
|
||||
aria-live="polite"
|
||||
>
|
||||
<span
|
||||
class="h-3 w-3 inline-block rounded-full border border-gray-300 border-t-gray-600 animate-spin"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<span>Searching…</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if mergedResults.length === 0 && mentionQuery !== ""}
|
||||
<div class="px-3 py-2 text-xs text-gray-400 flex items-center gap-2">
|
||||
{#if remoteSearching}
|
||||
<span
|
||||
class="h-3 w-3 inline-block rounded-full border border-gray-300 border-t-gray-600 animate-spin"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<span>Searching…</span>
|
||||
{:else}
|
||||
No matches
|
||||
{/if}
|
||||
</div>
|
||||
{:else if mergedResults.length > 0}
|
||||
<ul role="listbox">
|
||||
{#each mergedResults as entry, i (entry.pubkey)}
|
||||
<li
|
||||
role="option"
|
||||
aria-selected={i === safeMentionIndex}
|
||||
class="flex items-center gap-2 px-3 py-1.5 cursor-pointer text-sm"
|
||||
class:bg-gray-100={i === safeMentionIndex}
|
||||
onmousedown={(e) => {
|
||||
e.preventDefault();
|
||||
selectMention(entry);
|
||||
}}
|
||||
onmouseenter={() => {
|
||||
userMovedCursor = true;
|
||||
mentionIndex = i;
|
||||
}}
|
||||
>
|
||||
{#if entry.picture}
|
||||
<img
|
||||
src={entry.picture}
|
||||
alt=""
|
||||
class="h-6 w-6 rounded-full object-cover flex-shrink-0"
|
||||
/>
|
||||
{:else}
|
||||
<span
|
||||
class="h-6 w-6 rounded-full bg-gray-200 flex items-center justify-center text-xs text-gray-500 flex-shrink-0"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{profileLabel(entry)[0]?.toUpperCase() ?? "?"}
|
||||
</span>
|
||||
{/if}
|
||||
<span class="font-medium text-gray-700 truncate">
|
||||
{profileLabel(entry)}
|
||||
</span>
|
||||
{#if profileSubLabel(entry)}
|
||||
<span class="text-xs text-gray-400 truncate">
|
||||
{profileSubLabel(entry)}
|
||||
</span>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<div
|
||||
class="flex flex-shrink-0 items-center gap-4 rounded-b border border-t-0 border-gray-200 bg-gray-50 px-3 py-2 text-sm"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue