mirror of
https://github.com/ankitects/anki.git
synced 2025-09-18 22:12:21 -04:00
Fix field not restored if active (#1639)
* Fix field not being restored after Undo, if field also has focus * Execute moveCaretToEnd after undoing a change - Otherwise the caret might be placed in seemingly random positions * Fix wording of comments * Remove autofocus functionality of EditingArea - instead await a tick in focusField - We used the autofocus prop for the initial focus setting when opening the editor. However it seems that awaiting tick in focusField also does the trick.
This commit is contained in:
parent
c5280cd056
commit
0c81bbce04
5 changed files with 30 additions and 26 deletions
|
@ -9,10 +9,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
|
||||
export interface EditingInputAPI {
|
||||
readonly name: string;
|
||||
focus(): void;
|
||||
refocus(): void;
|
||||
focusable: boolean;
|
||||
moveCaretToEnd(): void;
|
||||
/**
|
||||
* The reaction to a user-initiated focus, e.g. by clicking on the
|
||||
* editor label, or pressing Tab.
|
||||
*/
|
||||
focus(): void;
|
||||
/**
|
||||
* Behaves similar to a refresh, e.g. sync with content, put the caret
|
||||
* into a neutral position, and/or clear selections.
|
||||
*/
|
||||
refocus(): void;
|
||||
}
|
||||
|
||||
export interface EditingAreaAPI {
|
||||
|
@ -29,7 +36,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { onMount, setContext as svelteSetContext } from "svelte";
|
||||
import { setContext as svelteSetContext } from "svelte";
|
||||
import { writable } from "svelte/store";
|
||||
|
||||
import { fontFamilyKey, fontSizeKey } from "../lib/context-keys";
|
||||
|
@ -46,7 +53,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
svelteSetContext(fontSizeKey, fontSizeStore);
|
||||
|
||||
export let content: Writable<string>;
|
||||
export let autofocus = false;
|
||||
|
||||
let editingArea: HTMLElement;
|
||||
let focusTrap: FocusTrap;
|
||||
|
@ -130,12 +136,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
});
|
||||
|
||||
setContextProperty(api);
|
||||
|
||||
onMount(() => {
|
||||
if (autofocus) {
|
||||
focus();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<FocusTrap bind:this={focusTrap} on:focus={focusEditingInputInsteadIfAvailable} />
|
||||
|
|
|
@ -44,7 +44,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
|
||||
export let content: Writable<string>;
|
||||
export let field: FieldData;
|
||||
export let autofocus = false;
|
||||
|
||||
const directionStore = writable<"ltr" | "rtl">();
|
||||
setContext(directionKey, directionStore);
|
||||
|
@ -88,7 +87,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
</LabelContainer>
|
||||
<EditingArea
|
||||
{content}
|
||||
{autofocus}
|
||||
fontFamily={field.fontFamily}
|
||||
fontSize={field.fontSize}
|
||||
api={editingArea}
|
||||
|
|
|
@ -34,7 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { onMount, tick } from "svelte";
|
||||
import { get, writable } from "svelte/store";
|
||||
|
||||
import Absolute from "../components/Absolute.svelte";
|
||||
|
@ -125,12 +125,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
plainTextsHidden = fonts.map((_, index) => plainTextsHidden[index] ?? true);
|
||||
}
|
||||
|
||||
let focusTo: number = 0;
|
||||
export function focusField(n: number): void {
|
||||
if (typeof n === "number") {
|
||||
focusTo = n;
|
||||
fields[focusTo].editingArea?.refocus();
|
||||
export function focusField(index: number | null): void {
|
||||
tick().then(() => {
|
||||
if (typeof index === "number") {
|
||||
if (!(index in fields)) {
|
||||
return;
|
||||
}
|
||||
|
||||
fields[index].editingArea?.refocus();
|
||||
} else {
|
||||
$focusedInput?.refocus();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let textColor: string = "black";
|
||||
|
@ -298,7 +304,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
<EditorField
|
||||
{field}
|
||||
content={fieldStores[index]}
|
||||
autofocus={index === focusTo}
|
||||
api={fields[index]}
|
||||
on:focusin={() => {
|
||||
$focusedField = fields[index];
|
||||
|
|
|
@ -83,13 +83,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
codeMirror?.editor.focus();
|
||||
}
|
||||
|
||||
function moveCaretToEnd(): void {
|
||||
codeMirror?.editor.setCursor(codeMirror.editor.lineCount(), 0);
|
||||
}
|
||||
|
||||
function refocus(): void {
|
||||
(codeMirror?.editor as any).display.input.blur();
|
||||
focus();
|
||||
}
|
||||
|
||||
function moveCaretToEnd(): void {
|
||||
codeMirror?.editor.setCursor(codeMirror.editor.lineCount(), 0);
|
||||
moveCaretToEnd();
|
||||
}
|
||||
|
||||
function toggle(): boolean {
|
||||
|
|
|
@ -19,7 +19,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
shadowRoot: Promise<ShadowRoot>;
|
||||
element: Promise<HTMLElement>;
|
||||
moveCaretToEnd(): void;
|
||||
refocus(): void;
|
||||
toggle(): boolean;
|
||||
preventResubscription(): () => void;
|
||||
getTriggerOnNextInsert(): Trigger<OnInsertCallback>;
|
||||
|
@ -196,6 +195,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
richTextPromise.then((richText) => {
|
||||
richText.blur();
|
||||
richText.focus();
|
||||
moveCaretToEnd();
|
||||
});
|
||||
},
|
||||
focusable: !hidden,
|
||||
|
|
Loading…
Reference in a new issue