c4ee2c666b
Mirrors MentionEditor for users but searches /api/persons?q=, allows
multi-word queries (delegated to detectPersonMention), displays life
dates next to each result, and uses min-h-[44px] rows for WCAG 2.2 AA
touch targets. Selection writes both the @DisplayName text and a
{personId, displayName} sidecar entry.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
32 lines
1006 B
Svelte
32 lines
1006 B
Svelte
<script lang="ts">
|
|
import { untrack } from 'svelte';
|
|
import PersonMentionEditor from './PersonMentionEditor.svelte';
|
|
import type { components } from '$lib/generated/api';
|
|
|
|
type PersonMention = components['schemas']['PersonMention'];
|
|
|
|
type Props = {
|
|
initialValue?: string;
|
|
initialMentions?: PersonMention[];
|
|
placeholder?: string;
|
|
onChange: (snapshot: { value: string; mentionedPersons: PersonMention[] }) => void;
|
|
};
|
|
|
|
let { initialValue = '', initialMentions = [], placeholder, onChange }: Props = $props();
|
|
|
|
// initial* props seed mount-time state; reading them inside untrack signals
|
|
// the intentional one-shot capture and silences state_referenced_locally.
|
|
let value = $state(untrack(() => initialValue));
|
|
let mentionedPersons = $state<PersonMention[]>(untrack(() => [...initialMentions]));
|
|
|
|
$effect(() => {
|
|
onChange({ value, mentionedPersons: [...mentionedPersons] });
|
|
});
|
|
</script>
|
|
|
|
<PersonMentionEditor
|
|
bind:value={value}
|
|
bind:mentionedPersons={mentionedPersons}
|
|
placeholder={placeholder}
|
|
/>
|