feat(transcription): wire dropdown search input to editor @-text

For issue #380. The search input mirrors the @-text the user types until
the user takes ownership by typing into the input itself. After that,
the input owns its own state and editor typing no longer overrides it.

Two empty states now exist:
- "Namen eingeben…" when the search input is empty (AC-4)
- "Keine Personen gefunden" when the search input has a query but the
  list is empty (existing behavior)

The dropdown reads editorQuery through the shared $state proxy via a
getter prop, matching the established pattern for model.items.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-19 21:03:13 +02:00
committed by marcel
parent 4a4248e726
commit 197c948a35
4 changed files with 86 additions and 16 deletions

View File

@@ -42,10 +42,12 @@ let dropdownState = $state<{
items: Person[];
command: (item: Person) => void;
clientRect: (() => DOMRect | null) | null;
editorQuery: string;
}>({
items: [],
command: () => {},
clientRect: null
clientRect: null,
editorQuery: ''
});
type DropdownExports = {
@@ -187,14 +189,27 @@ onMount(() => {
displayName: renderProps.query
});
dropdownState.clientRect = renderProps.clientRect ?? null;
dropdownState.editorQuery = renderProps.query;
};
return {
onStart(renderProps) {
updateState(renderProps as unknown as LooseRenderProps);
const loose = renderProps as unknown as LooseRenderProps;
updateState(loose);
// MentionDropdown reads `editorQuery` off the shared state
// proxy via its `editorQuery` prop binding below — this is
// the same pattern as `model.items`. We do not pass it as a
// separate prop because Svelte 5's mount() does not expose
// settable prop accessors, so we route through the proxy.
const mounted = mount(MentionDropdown, {
target: document.body,
props: { model: dropdownState }
props: {
model: dropdownState,
get editorQuery() {
return dropdownState.editorQuery;
},
onSearch: () => {}
}
});
component = mounted as object;
exports = mounted as unknown as DropdownExports;