From 6db78976013c2919142f63dd4fedfa342516aa4d Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 8 Mar 2021 14:20:06 +0100
Subject: [PATCH] Improve focus handling

* Ported from #1046:

* disabling buttons will clear button highlight
* enabling button will set button highlight
* move caret to end executed before enabling buttons (so button highlight will be for actual position of caret)
* move caret to end will also be executed if previousActiveElement is null, which will only be the case before the first onBlur was executed:
  * so that caret will be moved to end on opening editor
---
 ts/editor/focusHandlers.ts | 14 +++++++++-----
 ts/editor/toolbar.ts       | 39 ++++++++++++++++++++++++++++++--------
 2 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/ts/editor/focusHandlers.ts b/ts/editor/focusHandlers.ts
index abc7095bb..cd0b630f4 100644
--- a/ts/editor/focusHandlers.ts
+++ b/ts/editor/focusHandlers.ts
@@ -16,9 +16,14 @@ function caretToEnd(currentField: EditingArea): void {
     selection.addRange(range);
 }
 
-function focusField(field: EditingArea) {
+function focusField(field: EditingArea, moveCaretToEnd: boolean): void {
     field.focusEditable();
     bridgeCommand(`focus:${field.ord}`);
+
+    if (moveCaretToEnd) {
+        caretToEnd(field);
+    }
+
     enableButtons();
 }
 
@@ -33,11 +38,10 @@ export function onFocus(evt: FocusEvent): void {
         !(previousFocus instanceof EditingArea) ||
         previousFocus === previousActiveElement
     ) {
-        focusField(currentField);
+        const moveCaretToEnd =
+            Boolean(previousFocus) || !Boolean(previousActiveElement);
 
-        if (previousFocus) {
-            caretToEnd(currentField);
-        }
+        focusField(currentField, moveCaretToEnd);
     }
 }
 
diff --git a/ts/editor/toolbar.ts b/ts/editor/toolbar.ts
index aa0b7ad5c..a4d87819b 100644
--- a/ts/editor/toolbar.ts
+++ b/ts/editor/toolbar.ts
@@ -1,9 +1,10 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
+const highlightButtons = ["bold", "italic", "underline", "superscript", "subscript"];
+
 export function updateButtonState(): void {
-    const buts = ["bold", "italic", "underline", "superscript", "subscript"];
-    for (const name of buts) {
+    for (const name of highlightButtons) {
         const elem = document.querySelector(`#${name}`) as HTMLElement;
         elem.classList.toggle("highlighted", document.queryCommandState(name));
     }
@@ -12,6 +13,13 @@ export function updateButtonState(): void {
     //    'col': document.queryCommandValue("forecolor")
 }
 
+function clearButtonHighlight(): void {
+    for (const name of highlightButtons) {
+        const elem = document.querySelector(`#${name}`) as HTMLElement;
+        elem.classList.remove("highlighted");
+    }
+}
+
 export function preventButtonFocus(): void {
     for (const element of document.querySelectorAll("button.linkb")) {
         element.addEventListener("mousedown", (evt: Event) => {
@@ -20,19 +28,34 @@ export function preventButtonFocus(): void {
     }
 }
 
-export function disableButtons(): void {
-    $("button.linkb:not(.perm)").prop("disabled", true);
+export function enableButtons(): void {
+    const buttons = document.querySelectorAll(
+        "button.linkb"
+    ) as NodeListOf<HTMLButtonElement>;
+    buttons.forEach((elem: HTMLButtonElement): void => {
+        elem.disabled = false;
+    });
+    updateButtonState();
 }
 
-export function enableButtons(): void {
-    $("button.linkb").prop("disabled", false);
+export function disableButtons(): void {
+    const buttons = document.querySelectorAll(
+        "button.linkb:not(.perm)"
+    ) as NodeListOf<HTMLButtonElement>;
+    buttons.forEach((elem: HTMLButtonElement): void => {
+        elem.disabled = true;
+    });
+    clearButtonHighlight();
 }
 
 export function setFGButton(col: string): void {
     document.getElementById("forecolor")!.style.backgroundColor = col;
 }
 
-export function toggleEditorButton(buttonid: string): void {
-    const button = $(buttonid)[0];
+export function toggleEditorButton(buttonOrId: string | HTMLElement): void {
+    const button =
+        typeof buttonOrId === "string"
+            ? (document.getElementById(buttonOrId) as HTMLElement)
+            : buttonOrId;
     button.classList.toggle("highlighted");
 }