From 0c81bbce04c1998b92ed0c1fa08d1cd5d13f3f56 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sat, 5 Feb 2022 06:58:31 +0100
Subject: [PATCH] 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.
---
 ts/editor/EditingArea.svelte                  | 22 +++++++++----------
 ts/editor/EditorField.svelte                  |  2 --
 ts/editor/NoteEditor.svelte                   | 21 +++++++++++-------
 .../plain-text-input/PlainTextInput.svelte    |  9 ++++----
 .../rich-text-input/RichTextInput.svelte      |  2 +-
 5 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/ts/editor/EditingArea.svelte b/ts/editor/EditingArea.svelte
index 6dc95ea0a..be5654a79 100644
--- a/ts/editor/EditingArea.svelte
+++ b/ts/editor/EditingArea.svelte
@@ -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} />
diff --git a/ts/editor/EditorField.svelte b/ts/editor/EditorField.svelte
index 23fa633b7..5915b9c25 100644
--- a/ts/editor/EditorField.svelte
+++ b/ts/editor/EditorField.svelte
@@ -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}
diff --git a/ts/editor/NoteEditor.svelte b/ts/editor/NoteEditor.svelte
index f84af9c29..9fa22d74f 100644
--- a/ts/editor/NoteEditor.svelte
+++ b/ts/editor/NoteEditor.svelte
@@ -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];
diff --git a/ts/editor/plain-text-input/PlainTextInput.svelte b/ts/editor/plain-text-input/PlainTextInput.svelte
index 6f50ba306..3dfea8bd9 100644
--- a/ts/editor/plain-text-input/PlainTextInput.svelte
+++ b/ts/editor/plain-text-input/PlainTextInput.svelte
@@ -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 {
diff --git a/ts/editor/rich-text-input/RichTextInput.svelte b/ts/editor/rich-text-input/RichTextInput.svelte
index 47e3c1ffc..4a94c76ed 100644
--- a/ts/editor/rich-text-input/RichTextInput.svelte
+++ b/ts/editor/rich-text-input/RichTextInput.svelte
@@ -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,