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

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

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