From 64a2ead2caa275014bedecdfbdff9b3192e42389 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 24 Jun 2021 17:19:42 +0200
Subject: [PATCH] Remove TagInputEdit and TagInputNew

---
 ts/components/Badge.svelte    |  2 +-
 ts/editor/Tag.svelte          |  8 ++++++--
 ts/editor/TagEditor.svelte    |  9 +++------
 ts/editor/TagInput.svelte     | 11 +++++++----
 ts/editor/TagInputEdit.svelte | 34 ----------------------------------
 ts/editor/TagInputNew.svelte  | 35 -----------------------------------
 6 files changed, 17 insertions(+), 82 deletions(-)
 delete mode 100644 ts/editor/TagInputEdit.svelte
 delete mode 100644 ts/editor/TagInputNew.svelte

diff --git a/ts/components/Badge.svelte b/ts/components/Badge.svelte
index 451e20acb..b0b158dc2 100644
--- a/ts/components/Badge.svelte
+++ b/ts/components/Badge.svelte
@@ -9,7 +9,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     let className = "";
     export { className as class };
-    export let tooltip: string | undefined;
+    export let tooltip: string | undefined = undefined;
 
     const dispatch = createEventDispatcher();
 
diff --git a/ts/editor/Tag.svelte b/ts/editor/Tag.svelte
index af459aa86..f2ec6c4b3 100644
--- a/ts/editor/Tag.svelte
+++ b/ts/editor/Tag.svelte
@@ -5,7 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import { createEventDispatcher } from "svelte";
     import Badge from "components/Badge.svelte";
-    import TagInputEdit from "./TagInputEdit.svelte";
+    import TagInput from "./TagInput.svelte";
     import { deleteIcon } from "./icons";
 
     export let name: string;
@@ -13,11 +13,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const dispatch = createEventDispatcher();
 
     let active = false;
+    let input: HTMLInputElement;
 
     function checkForActivation(): void {
         const selection = window.getSelection()!;
         if (selection.isCollapsed) {
             active = true;
+            input.focus();
         }
     }
 
@@ -32,10 +34,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 {#if active}
-    <TagInputEdit
+    <TagInput
         bind:name
+        bind:input
         on:focusout={() => (active = false)}
         on:update={updateTag}
+        on:mount={(event) => event.detail.input.focus()}
     />
 {:else}
     <span
diff --git a/ts/editor/TagEditor.svelte b/ts/editor/TagEditor.svelte
index 30497da86..52fafff12 100644
--- a/ts/editor/TagEditor.svelte
+++ b/ts/editor/TagEditor.svelte
@@ -6,15 +6,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import StickyBottom from "components/StickyBottom.svelte";
     import AddTagBadge from "./AddTagBadge.svelte";
     import Tag from "./Tag.svelte";
-    import TagInputNew from "./TagInputNew.svelte";
+    import TagInput from "./TagInput.svelte";
 
     export let tags = ["en::foobar", "zh::あっちこっち"];
 
     let tagInputNew: HTMLInputElement;
-    let inputNew = false;
+    let newName: string = "";
 
     function focusInputNew(): void {
-        inputNew = true;
         tagInputNew.focus();
     }
 
@@ -32,9 +31,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             <Tag name={tag} on:tagdelete={deleteTag} />
         {/each}
 
-        <div d-none={!inputNew}>
-            <TagInputNew bind:input={tagInputNew} on:blur={() => (inputNew = false)} />
-        </div>
+        <TagInput bind:input={tagInputNew} name={newName} />
     </div>
 </StickyBottom>
 
diff --git a/ts/editor/TagInput.svelte b/ts/editor/TagInput.svelte
index 8785f4292..9d901d48a 100644
--- a/ts/editor/TagInput.svelte
+++ b/ts/editor/TagInput.svelte
@@ -3,11 +3,12 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
-    import { createEventDispatcher } from "svelte";
-    import TagAutocomplete from "./TagAutocomplete.svelte";
+    import type Dropdown from "bootstrap/js/dist/dropdown";
+
+    import { createEventDispatcher, onMount } from "svelte";
     import { normalizeTagname } from "./tags";
 
-    import type Dropdown from "bootstrap/js/dist/dropdown";
+    import TagAutocomplete from "./TagAutocomplete.svelte";
 
     export let name: string;
     export let input: HTMLInputElement;
@@ -56,6 +57,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     function setTagname({ detail }: CustomEvent): void {
         name = detail.name;
     }
+
+    onMount(() => dispatch("mount", { input }));
 </script>
 
 <TagAutocomplete
@@ -68,9 +71,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 >
     <label id={triggerId} class={`ps-2 pe-1 ${triggerClass}`} data-value={name}>
         <input
+            bind:this={input}
             type="text"
             size="1"
-            bind:this={input}
             bind:value={name}
             on:focus={(event) => onFocus(event, dropdown)}
             on:blur={(event) => dropdownBlur(event, dropdown)}
diff --git a/ts/editor/TagInputEdit.svelte b/ts/editor/TagInputEdit.svelte
deleted file mode 100644
index 47564474d..000000000
--- a/ts/editor/TagInputEdit.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
-<script lang="typescript">
-    import { onMount } from "svelte";
-    import TagInput from "./TagInput.svelte";
-
-    export let name: string;
-
-    let input: HTMLInputElement;
-
-    function moveCursorToEnd(element: HTMLInputElement): void {
-        element.selectionStart = element.selectionEnd = element.value.length;
-    }
-
-    onMount(() => {
-        // Make sure Autocomplete was fully mounted
-        setTimeout(() => {
-            moveCursorToEnd(input);
-            input.focus();
-        }, 0);
-    });
-
-    function onKeydown(): void {
-        console.log("onkeydown");
-    }
-
-    /* function stopPropagation(event: Event): void { */
-    /*     event.stopPropagation(); */
-    /* } */
-</script>
-
-<TagInput bind:name bind:input on:keydown={onKeydown} on:focusout on:update on:add />
diff --git a/ts/editor/TagInputNew.svelte b/ts/editor/TagInputNew.svelte
deleted file mode 100644
index ab76633c3..000000000
--- a/ts/editor/TagInputNew.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
-<script lang="typescript">
-    import { createEventDispatcher } from "svelte";
-    import TagInput from "./TagInput.svelte";
-
-    export let input: HTMLInputElement;
-
-    let name = "";
-    let active = true;
-
-    const dispatch = createEventDispatcher();
-
-    function onKeydown(): void {
-        console.log("onkeydown");
-    }
-
-    function translateToAdd({ detail }: CustomEvent): void {
-        if (name) {
-            dispatch("add", detail);
-            name = "";
-        }
-    }
-</script>
-
-<TagInput
-    bind:name
-    bind:input
-    on:keydown={onKeydown}
-    on:add
-    on:update={translateToAdd}
-    on:blur
-/>