diff --git a/ts/editor/AutocompleteItem.svelte b/ts/editor/AutocompleteItem.svelte index edf7b02e4..576434e25 100644 --- a/ts/editor/AutocompleteItem.svelte +++ b/ts/editor/AutocompleteItem.svelte @@ -51,8 +51,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html border: none; &.active { - background-color: button.$focus-color; - color: white; + background-color: button.$focus-color !important; + color: white !important; } } diff --git a/ts/editor/TagEditor.svelte b/ts/editor/TagEditor.svelte index 3e8f62478..cdaae15fb 100644 --- a/ts/editor/TagEditor.svelte +++ b/ts/editor/TagEditor.svelte @@ -32,13 +32,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html let activeName = ""; let activeInput: HTMLInputElement; - function onAutocomplete({ detail }) { - const activeTag = tags[active!]; - const selected = detail.selected; - - activeName = selected ?? activeTag.name; - } - let suggestionsPromise: Promise = Promise.resolve([]); function updateSuggestions(): void { @@ -49,6 +42,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html ]); } + function onAutocomplete(selected: string): void { + const activeTag = tags[active!]; + + activeName = selected ?? activeTag.name; + activeInput.setSelectionRange(Infinity, Infinity); + } + + function onChosen(chosen: string) { + onAutocomplete(chosen); + splitTag(active!, Infinity, Infinity); + } + function updateWithTagName(tag: TagType): void { tag.name = activeName; tags = tags; @@ -96,13 +101,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html contained ); if (contained >= 0) { - tags[contained].flash(); + tags[contained >= index ? contained + 1 : contained].flash(); return false; } return true; } + async function enterBehavior( + index: number, + start: number, + end: number, + autocomplete: any + ): Promise { + if (autocomplete.isVisible()) { + autocomplete.chooseSelected(); + } else { + splitTag(index, start, end); + } + } + async function splitTag(index: number, start: number, end: number): Promise { const current = activeName.slice(0, start); const splitOff = activeName.slice(end); @@ -271,8 +289,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html + onAutocomplete(detail.selected)} + on:choose={({ detail }) => onChosen(detail.chosen)} let:createAutocomplete let:autocomplete > @@ -280,7 +300,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html id={tag.id} bind:name={activeName} bind:input={activeInput} - on:click={(event) => event.stopPropagation()} on:focus={() => { activeName = tag.name; createAutocomplete(activeInput); @@ -288,7 +307,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html on:keydown={(event) => update(event, autocomplete)} on:input={() => updateWithTagName(tag)} on:tagsplit={({ detail }) => - splitTag(index, detail.start, detail.end)} + enterBehavior( + index, + detail.start, + detail.end, + autocomplete + )} on:tagadd={() => insertTag(index)} on:tagdelete={() => deleteTagAt(index)} on:tagjoinprevious={() => joinWithPreviousTag(index)} diff --git a/ts/editor/TagInput.svelte b/ts/editor/TagInput.svelte index 9cb96a2fa..e5f5c18bf 100644 --- a/ts/editor/TagInput.svelte +++ b/ts/editor/TagInput.svelte @@ -87,6 +87,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html function onEnter(event: Event): void { event.preventDefault(); dispatch("tagsplit", { start: input.selectionStart, end: input.selectionEnd }); + event.preventDefault(); } function onKeydown(event: KeyboardEvent): void { diff --git a/ts/editor/WithAutocomplete.svelte b/ts/editor/WithAutocomplete.svelte index 80180f074..ab24946a9 100644 --- a/ts/editor/WithAutocomplete.svelte +++ b/ts/editor/WithAutocomplete.svelte @@ -19,9 +19,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html let target: HTMLElement; let dropdown: Dropdown; let autocomplete: any; - let selected: number | null = null; - // blue highlight + let selected: number | null = null; let active: boolean = false; const dispatch = createEventDispatcher(); @@ -54,8 +53,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html dispatch("autocomplete", { selected: suggestions[selected ?? -1] }); } - function chooseSelected() { + async function chooseSelected() { + const suggestions = await suggestionsPromise; + active = true; + dispatch("choose", { chosen: suggestions[selected ?? -1] }); } async function update() { @@ -102,7 +104,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html async function chooseIndex(index: number): Promise { const suggestions = await suggestionsPromise; - dispatch("autocomplete", { selected: suggestions[index] }); + dispatch("autocomplete", { name: suggestions[index] }); } function selectIfMousedown(event: MouseEvent, index: number): void {