Fix focus issues with Mathjax editor

ts/editor/MathjaxHandleEditor.svelte

@@ -46,12 +46,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <!-- <textarea bind:value use:openCodemirror /> -->
 <div on:click|stopPropagation on:focus|stopPropagation on:keydown|stopPropagation>
+    <!-- TODO no focusin for now, as EditingArea will defer to Editable/Codable -->
     <textarea
         value={initialValue}
         on:mouseup|preventDefault|stopPropagation
         on:click|stopPropagation
         on:focusin|stopPropagation
-        on:focusout|stopPropagation
         use:autofocus
     />
 </div>

ts/editor/editing-area.ts

@@ -16,7 +16,7 @@ import type { Codable } from "./codable";
 import { updateActiveButtons } from "./toolbar";
 import { bridgeCommand } from "./lib";
 import { onInput, onKey, onKeyUp } from "./input-handlers";
-import { onFocus, onBlur } from "./focus-handlers";
+import { deferFocusDown, saveFieldIfFieldChanged } from "./focus-handlers";
 import { nightModeKey } from "components/context-keys";
 import { decoratedComponents } from "editable/decorated";
 
@@ -202,13 +202,12 @@ export class EditingArea extends HTMLDivElement {
         this.activeInput.surroundSelection(before, after);
     }
 
-    onFocus(event: FocusEvent): void {
+    onFocus(): void {
-        onFocus(event);
+        deferFocusDown(this);
     }
 
     onBlur(event: FocusEvent): void {
-        this.resetHandles();
+        saveFieldIfFieldChanged(this, event.relatedTarget as Element);
-        onBlur(event);
     }
 
     onEnter(event: KeyboardEvent): void {

ts/editor/focus-handlers.ts

@@ -12,19 +12,30 @@ import { saveField } from "./change-timer";
 import { bridgeCommand } from "./lib";
 import { getCurrentField } from "./helpers";
 
-export function onFocus(evt: FocusEvent): void {
+export function deferFocusDown(editingArea: EditingArea): void {
-    const currentField = evt.currentTarget as EditingArea;
+    editingArea.focus();
-    currentField.focus();
+    editingArea.caretToEnd();
-    currentField.caretToEnd();
 
-    bridgeCommand(`focus:${currentField.ord}`);
+    if (editingArea.getSelection().anchorNode === null) {
+        // selection is not inside editable after focusing
+        editingArea.caretToEnd();
+    }
+
+    bridgeCommand(`focus:${editingArea.ord}`);
     fieldFocused.set(true);
 }
 
-export function onBlur(evt: FocusEvent): void {
+export function saveFieldIfFieldChanged(
-    const previousFocus = evt.currentTarget as EditingArea;
+    editingArea: EditingArea,
-    const currentFieldUnchanged = previousFocus === getCurrentField();
+    focusTo: Element | null
+): void {
+    const fieldChanged =
+        editingArea !== getCurrentField() && !editingArea.contains(focusTo);
 
-    saveField(previousFocus, currentFieldUnchanged ? "key" : "blur");
+    saveField(editingArea, fieldChanged ? "blur" : "key");
     fieldFocused.set(false);
+
+    if (fieldChanged) {
+        editingArea.resetHandles();
+    }
 }