40 lines
1.0 KiB
Svelte
40 lines
1.0 KiB
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;
|
|
disabled?: boolean;
|
|
onChange: (snapshot: { value: string; mentionedPersons: PersonMention[] }) => void;
|
|
};
|
|
|
|
let {
|
|
initialValue = '',
|
|
initialMentions = [],
|
|
placeholder,
|
|
disabled = false,
|
|
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}
|
|
disabled={disabled}
|
|
/>
|