fix: backspacing causing desync on some platforms

Author: Miodec

frontend/src/ts/input/input-element.ts

@@ -1,10 +1,10 @@
-const el = document.querySelector("#wordsInput") as HTMLInputElement;
+const el = document.querySelector("#wordsInput") as HTMLTextAreaElement;
 
 if (el === null) {
   throw new Error("Words input element not found");
 }
 
-export function getInputElement(): HTMLInputElement {
+export function getInputElement(): HTMLTextAreaElement {
   return el;
 }
 

frontend/src/ts/input/listeners/misc.ts

@@ -20,20 +20,17 @@ inputEl.addEventListener("select selectstart", (event) => {
 
 inputEl.addEventListener("selectionchange", (event) => {
   const selection = window.getSelection();
+
   console.debug("wordsInput event selectionchange", {
     event,
     selection: selection?.toString(),
     isCollapsed: selection?.isCollapsed,
-    selectionStart: (event.target as HTMLInputElement).selectionStart,
-    selectionEnd: (event.target as HTMLInputElement).selectionEnd,
+    selectionStart: inputEl.selectionStart,
+    selectionEnd: inputEl.selectionEnd,
   });
-  const el = event.target;
-  if (el === null || !(el instanceof HTMLInputElement)) {
-    return;
-  }
 
-  const hasSelectedText = el.selectionStart !== el.selectionEnd;
-  const isCursorAtEnd = el.selectionStart === el.value.length;
+  const hasSelectedText = inputEl.selectionStart !== inputEl.selectionEnd;
+  const isCursorAtEnd = inputEl.selectionStart === inputEl.value.length;
   if (hasSelectedText || !isCursorAtEnd) {
     moveInputElementCaretToTheEnd();
   }