suggestions -> suggestionsPromise, so it works with external APIs

ts/editor/TagEditor.svelte

@@ -39,9 +39,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         activeName = selected ?? activeTag.name;
     }
 
-    let suggestions: string[] = [];
+    let suggestionsPromise: Promise<string[]> = Promise.resolve([]);
 
-    function updateSuggestions(): void {}
+    function updateSuggestions(): void {
+        suggestionsPromise = Promise.resolve([
+            "en::vocabulary",
+            "en::idioms",
+            Math.random().toString(36).substring(2),
+        ]);
+    }
 
     function updateWithTagName(tag: TagType): void {
         tag.name = activeName;
@@ -244,6 +250,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 break;
 
             default:
+                if (event.code.startsWith("Arrow")) {
+                    return;
+                }
+
                 autocomplete.update();
                 break;
         }
@@ -259,7 +269,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 {#if index === active}
                     <WithAutocomplete
                         class="d-flex flex-column-reverse"
-                        {suggestions}
+                        {suggestionsPromise}
                         on:autocomplete={onAutocomplete}
                         on:update={updateSuggestions}
                         let:createAutocomplete

ts/editor/WithAutocomplete.svelte

@@ -14,7 +14,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let className: string = "";
     export { className as class };
 
-    export let suggestions: string[];
+    export let suggestionsPromise: Promise<string[]>;
 
     let target: HTMLElement;
     let dropdown: Dropdown;
@@ -27,6 +27,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const dispatch = createEventDispatcher();
 
     function selectNext() {
+        suggestionsPromise.then((suggestions) => {
             if (selected === null) {
                 selected = 0;
             } else if (selected >= suggestions.length - 1) {
@@ -36,9 +37,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             }
 
             dispatch("autocomplete", { selected: suggestions[selected ?? -1] });
+        });
     }
 
     function selectPrevious() {
+        suggestionsPromise.then((suggestions) => {
             if (selected === null) {
                 selected = suggestions.length - 1;
             } else if (selected === 0) {
@@ -48,6 +51,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             }
 
             dispatch("autocomplete", { selected: suggestions[selected ?? -1] });
+        });
     }
 
     function chooseSelected() {
@@ -61,6 +65,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
         await tick();
 
+        suggestionsPromise.then((suggestions) => {
             if (suggestions.length > 0) {
                 dropdown.show();
                 // disabled class will tell Bootstrap not to show menu on clicking
@@ -69,6 +74,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 dropdown.hide();
                 target.classList.add("disabled");
             }
+        });
     }
 
     const createAutocomplete =
@@ -97,6 +103,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <slot createAutocomplete={createAutocomplete(createDropdown)} {autocomplete} />
 
     <DropdownMenu id={menuId} class={className}>
+        {#await suggestionsPromise}
+            <div class="suggestion-item">
+                <DropdownItem>...</DropdownItem>
+            </div>
+        {:then suggestions}
             {#each suggestions as suggestion, i}
                 <div class="suggestion-item">
                     <DropdownItem
@@ -105,6 +116,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     >
                 </div>
             {/each}
+        {/await}
     </DropdownMenu>
 </WithDropdownMenu>