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;
}
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>

View File

@ -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}