Set caret correctly after tagjoin

This commit is contained in:
Henrik Giesel 2021-06-26 00:21:11 +02:00
parent 65e9a0f2ed
commit 4420a24363
2 changed files with 29 additions and 9 deletions

View File

@ -56,24 +56,36 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
tags = tags; tags = tags;
} }
function joinWithPreviousTag(index: number): void { function joinWithPreviousTag(
index: number,
setPosition: (position: number) => void
): void {
if (index === 0) { if (index === 0) {
return; return;
} }
const spliced = tags.splice(index - 1, 1)[0]; const spliced = tags.splice(index - 1, 1)[0];
const length = spliced.name.length;
tags[index - 1].name = spliced.name + tags[index - 1].name; tags[index - 1].name = spliced.name + tags[index - 1].name;
tags = tags; tags = tags;
setPosition(length);
} }
function joinWithNextTag(index: number): void { function joinWithNextTag(
index: number,
setPosition: (position: number) => void
): void {
if (index === tags.length - 1) { if (index === tags.length - 1) {
return; return;
} }
const spliced = tags.splice(index + 1, 1)[0]; const spliced = tags.splice(index + 1, 1)[0];
const length = tags[index].name.length;
tags[index].name = tags[index].name + spliced.name; tags[index].name = tags[index].name + spliced.name;
tags = tags; tags = tags;
setPosition(length);
} }
function appendTag(): void { function appendTag(): void {
@ -86,12 +98,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
newName = ""; newName = "";
} }
function joinWithLastTag(): void { function joinWithLastTag(setPosition: (position: number) => void): void {
const popped = tags.pop(); const popped = tags.pop();
tags = tags; tags = tags;
if (popped) { if (popped) {
newName = popped.name + newName; newName = popped.name + newName;
setPosition(popped.name.length);
} }
} }
</script> </script>
@ -115,8 +128,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:tagupdate={() => checkForDuplicateAt(index)} on:tagupdate={() => checkForDuplicateAt(index)}
on:tagadd={() => insertTagAt(index)} on:tagadd={() => insertTagAt(index)}
on:tagdelete={() => deleteTagAt(index)} on:tagdelete={() => deleteTagAt(index)}
on:tagjoinprevious={() => joinWithPreviousTag(index)} on:tagjoinprevious={({ detail }) =>
on:tagjoinnext={() => joinWithNextTag(index)} joinWithPreviousTag(index, detail.setPosition)}
on:tagjoinnext={({ detail }) =>
joinWithNextTag(index, detail.setPosition)}
/> />
{/each} {/each}
@ -127,7 +142,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:blur={destroyAutocomplete} on:blur={destroyAutocomplete}
on:tagupdate={appendTag} on:tagupdate={appendTag}
on:tagadd={appendTag} on:tagadd={appendTag}
on:tagjoinprevious={joinWithLastTag} on:tagjoinprevious={({ detail }) =>
joinWithLastTag(detail.setPosition)}
/> />
</TagAutocomplete> </TagAutocomplete>
</ButtonToolbar> </ButtonToolbar>

View File

@ -11,6 +11,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
function setPosition(position: number): void {
setTimeout(() => input.setSelectionRange(position, position));
}
function onAccept(): void { function onAccept(): void {
name = normalizeTagname(name); name = normalizeTagname(name);
dispatch("tagupdate", { 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) { function onBackspace(event: KeyboardEvent) {
if (input.selectionStart === 0 && input.selectionEnd === 0) { if (input.selectionStart === 0 && input.selectionEnd === 0) {
dispatch("tagjoinprevious"); dispatch("tagjoinprevious", { setPosition });
event.preventDefault(); event.preventDefault();
} else if (name.endsWith("::")) { } else if (name.endsWith("::")) {
name = name.slice(0, -2); 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.selectionStart === input.value.length &&
input.selectionEnd === input.value.length input.selectionEnd === input.value.length
) { ) {
dispatch("tagjoinnext"); dispatch("tagjoinnext", { setPosition });
event.preventDefault(); event.preventDefault();
} else if (name.endsWith("::")) { } else if (name.endsWith("::")) {
name = name.slice(0, -2); 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}> <label class="ps-2 pe-1" data-value={name}>
<input <input
bind:this={input} bind:this={input}
bind:value={name}
type="text" type="text"
tabindex="-1" tabindex="-1"
size="1" size="1"
bind:value={name}
on:focus on:focus
on:blur on:blur
on:blur={onAccept} on:blur={onAccept}