Set caret correctly after tagjoin
This commit is contained in:
parent
65e9a0f2ed
commit
4420a24363
@ -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>
|
||||
|
@ -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}
|
||||
|
Loading…
Reference in New Issue
Block a user