From b2d2cb8715c4138239f29aaeb8df1b14faa6f415 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 29 Jun 2021 00:14:31 +0200
Subject: [PATCH] suggestions -> suggestionsPromise, so it works with external
 APIs

---
 ts/editor/TagEditor.svelte        | 16 +++++--
 ts/editor/WithAutocomplete.svelte | 74 ++++++++++++++++++-------------
 2 files changed, 56 insertions(+), 34 deletions(-)

diff --git a/ts/editor/TagEditor.svelte b/ts/editor/TagEditor.svelte
index 63405fa11..4ae3d7cd2 100644
--- a/ts/editor/TagEditor.svelte
+++ b/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
diff --git a/ts/editor/WithAutocomplete.svelte b/ts/editor/WithAutocomplete.svelte
index eaee1853b..f1f5b626c 100644
--- a/ts/editor/WithAutocomplete.svelte
+++ b/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,27 +27,31 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const dispatch = createEventDispatcher();
 
     function selectNext() {
-        if (selected === null) {
-            selected = 0;
-        } else if (selected >= suggestions.length - 1) {
-            selected = null;
-        } else {
-            selected++;
-        }
+        suggestionsPromise.then((suggestions) => {
+            if (selected === null) {
+                selected = 0;
+            } else if (selected >= suggestions.length - 1) {
+                selected = null;
+            } else {
+                selected++;
+            }
 
-        dispatch("autocomplete", { selected: suggestions[selected ?? -1] });
+            dispatch("autocomplete", { selected: suggestions[selected ?? -1] });
+        });
     }
 
     function selectPrevious() {
-        if (selected === null) {
-            selected = suggestions.length - 1;
-        } else if (selected === 0) {
-            selected = null;
-        } else {
-            selected--;
-        }
+        suggestionsPromise.then((suggestions) => {
+            if (selected === null) {
+                selected = suggestions.length - 1;
+            } else if (selected === 0) {
+                selected = null;
+            } else {
+                selected--;
+            }
 
-        dispatch("autocomplete", { selected: suggestions[selected ?? -1] });
+            dispatch("autocomplete", { selected: suggestions[selected ?? -1] });
+        });
     }
 
     function chooseSelected() {
@@ -61,14 +65,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
         await tick();
 
-        if (suggestions.length > 0) {
-            dropdown.show();
-            // disabled class will tell Bootstrap not to show menu on clicking
-            target.classList.remove("disabled");
-        } else {
-            dropdown.hide();
-            target.classList.add("disabled");
-        }
+        suggestionsPromise.then((suggestions) => {
+            if (suggestions.length > 0) {
+                dropdown.show();
+                // disabled class will tell Bootstrap not to show menu on clicking
+                target.classList.remove("disabled");
+            } else {
+                dropdown.hide();
+                target.classList.add("disabled");
+            }
+        });
     }
 
     const createAutocomplete =
@@ -97,14 +103,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <slot createAutocomplete={createAutocomplete(createDropdown)} {autocomplete} />
 
     <DropdownMenu id={menuId} class={className}>
-        {#each suggestions as suggestion, i}
+        {#await suggestionsPromise}
             <div class="suggestion-item">
-                <DropdownItem
-                    class={i === selected ? (active ? "active" : "focus") : ""}
-                    on:click>{suggestion}</DropdownItem
-                >
+                <DropdownItem>...</DropdownItem>
             </div>
-        {/each}
+        {:then suggestions}
+            {#each suggestions as suggestion, i}
+                <div class="suggestion-item">
+                    <DropdownItem
+                        class={i === selected ? (active ? "active" : "focus") : ""}
+                        on:click>{suggestion}</DropdownItem
+                    >
+                </div>
+            {/each}
+        {/await}
     </DropdownMenu>
 </WithDropdownMenu>