From 4420a2436345642d3f5c2f94ccc99e5feade6eed Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sat, 26 Jun 2021 00:21:11 +0200
Subject: [PATCH] Set caret correctly after tagjoin

---
 ts/editor/TagEditor.svelte | 28 ++++++++++++++++++++++------
 ts/editor/TagInput.svelte  | 10 +++++++---
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/ts/editor/TagEditor.svelte b/ts/editor/TagEditor.svelte
index 9be359ac3..24eb9d3cc 100644
--- a/ts/editor/TagEditor.svelte
+++ b/ts/editor/TagEditor.svelte
@@ -56,24 +56,36 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         tags = tags;
     }
 
-    function joinWithPreviousTag(index: number): void {
+    function joinWithPreviousTag(
+        index: number,
+        setPosition: (position: number) => void
+    ): void {
         if (index === 0) {
             return;
         }
 
         const spliced = tags.splice(index - 1, 1)[0];
+        const length = spliced.name.length;
         tags[index - 1].name = spliced.name + tags[index - 1].name;
         tags = tags;
+
+        setPosition(length);
     }
 
-    function joinWithNextTag(index: number): void {
+    function joinWithNextTag(
+        index: number,
+        setPosition: (position: number) => void
+    ): void {
         if (index === tags.length - 1) {
             return;
         }
 
         const spliced = tags.splice(index + 1, 1)[0];
+        const length = tags[index].name.length;
         tags[index].name = tags[index].name + spliced.name;
         tags = tags;
+
+        setPosition(length);
     }
 
     function appendTag(): void {
@@ -86,12 +98,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         newName = "";
     }
 
-    function joinWithLastTag(): void {
+    function joinWithLastTag(setPosition: (position: number) => void): void {
         const popped = tags.pop();
         tags = tags;
 
         if (popped) {
             newName = popped.name + newName;
+            setPosition(popped.name.length);
         }
     }
 </script>
@@ -115,8 +128,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                         on:tagupdate={() => checkForDuplicateAt(index)}
                         on:tagadd={() => insertTagAt(index)}
                         on:tagdelete={() => deleteTagAt(index)}
-                        on:tagjoinprevious={() => joinWithPreviousTag(index)}
-                        on:tagjoinnext={() => joinWithNextTag(index)}
+                        on:tagjoinprevious={({ detail }) =>
+                            joinWithPreviousTag(index, detail.setPosition)}
+                        on:tagjoinnext={({ detail }) =>
+                            joinWithNextTag(index, detail.setPosition)}
                     />
                 {/each}
 
@@ -127,7 +142,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     on:blur={destroyAutocomplete}
                     on:tagupdate={appendTag}
                     on:tagadd={appendTag}
-                    on:tagjoinprevious={joinWithLastTag}
+                    on:tagjoinprevious={({ detail }) =>
+                        joinWithLastTag(detail.setPosition)}
                 />
             </TagAutocomplete>
         </ButtonToolbar>
diff --git a/ts/editor/TagInput.svelte b/ts/editor/TagInput.svelte
index dd02955bc..c28d476fb 100644
--- a/ts/editor/TagInput.svelte
+++ b/ts/editor/TagInput.svelte
@@ -11,6 +11,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     const dispatch = createEventDispatcher();
 
+    function setPosition(position: number): void {
+        setTimeout(() => input.setSelectionRange(position, position));
+    }
+
     function onAccept(): void {
         name = normalizeTagname(name);
         dispatch("tagupdate", { name });
@@ -18,7 +22,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     function onBackspace(event: KeyboardEvent) {
         if (input.selectionStart === 0 && input.selectionEnd === 0) {
-            dispatch("tagjoinprevious");
+            dispatch("tagjoinprevious", { setPosition });
             event.preventDefault();
         } else if (name.endsWith("::")) {
             name = name.slice(0, -2);
@@ -31,7 +35,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             input.selectionStart === input.value.length &&
             input.selectionEnd === input.value.length
         ) {
-            dispatch("tagjoinnext");
+            dispatch("tagjoinnext", { setPosition });
             event.preventDefault();
         } else if (name.endsWith("::")) {
             name = name.slice(0, -2);
@@ -91,10 +95,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <label class="ps-2 pe-1" data-value={name}>
     <input
         bind:this={input}
+        bind:value={name}
         type="text"
         tabindex="-1"
         size="1"
-        bind:value={name}
         on:focus
         on:blur
         on:blur={onAccept}