Fix resetting of formatting modes when pressing modifer or dead keys (#1811)

* Fix shift removing bold formatting

* Remove input handler on selection change

We listened to "non-input events" mostly to catch events that
change the selection (like Ctrl-a, or arrow keys) anyway

ts/lib/keys.ts

@@ -16,11 +16,16 @@ function translateModifierToPlatform(modifier: Modifier): string {
     return platformModifiers[allModifiers.indexOf(modifier)];
 }
 
-const GENERAL_KEY = 0;
+export function checkIfModifierKey(event: KeyboardEvent): boolean {
-const NUMPAD_KEY = 3;
+    // At least the web view on Desktop Anki gives out the wrong values for
+    // `event.location`, which is why we do it like this.
+    let isInputKey = false;
 
-export function checkIfInputKey(event: KeyboardEvent): boolean {
+    for (const modifier of allModifiers) {
-    return event.location === GENERAL_KEY || event.location === NUMPAD_KEY;
+        isInputKey ||= event.code.startsWith(modifier);
+    }
+
+    return isInputKey;
 }
 
 export function keyboardEventIsPrintableKey(event: KeyboardEvent): boolean {

ts/lib/shortcuts.ts

@@ -4,7 +4,7 @@
 import { on } from "./events";
 import type { Modifier } from "./keys";
 import {
-    checkIfInputKey,
+    checkIfModifierKey,
     checkModifiers,
     keyToPlatformString,
     modifiersToPlatformString,
@@ -135,7 +135,7 @@ function innerShortcut(
     function handler(event: KeyboardEvent): void {
         if (nextCheck(event)) {
             innerShortcut(target, event, callback, ...restChecks);
-        } else if (checkIfInputKey(event)) {
+        } else if (!checkIfModifierKey(event)) {
             // Any non-modifier key will cancel the shortcut sequence
             remove();
         }

ts/sveltelib/input-handler.ts

@@ -3,7 +3,6 @@
 
 import { getRange, getSelection } from "../lib/cross-browser";
 import { on } from "../lib/events";
-import { keyboardEventIsPrintableKey } from "../lib/keys";
 import { HandlerList } from "./handler-list";
 
 const nbsp = "\xa0";
@@ -62,13 +61,6 @@ function useInputHandler(): [InputHandlerAPI, SetupInputHandlerAction] {
         insertText.clear();
     }
 
-    function onKeydown(event: KeyboardEvent): void {
-        /* using arrow keys should cancel */
-        if (!keyboardEventIsPrintableKey(event)) {
-            clearInsertText();
-        }
-    }
-
     function onInput(this: HTMLElement, event: InputEvent): void {
         // prevent unwanted <div> from being left behind when clearing field contents
         if (
@@ -87,7 +79,7 @@ function useInputHandler(): [InputHandlerAPI, SetupInputHandlerAction] {
 
         const blurOff = on(element, "blur", clearInsertText);
         const pointerDownOff = on(element, "pointerdown", clearInsertText);
-        const keyDownOff = on(element, "keydown", onKeydown);
+        const selectionChangeOff = on(document, "selectionchange", clearInsertText);
 
         return {
             destroy() {
@@ -95,7 +87,7 @@ function useInputHandler(): [InputHandlerAPI, SetupInputHandlerAction] {
                 inputOff();
                 blurOff();
                 pointerDownOff();
-                keyDownOff();
+                selectionChangeOff();
             },
         };
     }