chore: protect against word letter self overflow

Author: Miodec

frontend/src/ts/input/handlers/before-insert-text.ts

@@ -88,11 +88,16 @@ export function onBeforeInsertText(data: string): boolean {
     const pendingWordData = TestUI.pendingWordData.get(
       TestState.activeWordIndex,
     );
-    const topAfterAppend = TestUI.getActiveWordTopWithDifferentData(
-      (pendingWordData ?? TestInput.input.current) + data,
-    );
-    const wordJumped = topAfterAppend > TestUI.activeWordTop;
-    if (wordJumped) {
+    const { top: topAfterAppend, height: heightAfterAppend } =
+      TestUI.getActiveWordTopAndHeightWithDifferentData(
+        (pendingWordData ?? TestInput.input.current) + data,
+      );
+    if (topAfterAppend > TestUI.activeWordTop) {
+      //word jumped to next line
+      return true;
+    }
+    if (heightAfterAppend > TestUI.activeWordHeight) {
+      // letters wrapped to next line
       return true;
     }
   }

frontend/src/ts/test/test-ui.ts

@@ -153,15 +153,11 @@ const wordsWrapperEl = document.querySelector(
 ) as HTMLElement;
 
 export let activeWordTop = 0;
+export let activeWordHeight = 0;
 export let lineTransition = false;
 export let currentTestLine = 0;
 export let resultCalculating = false;
 
-export function setActiveWordTop(): void {
-  const activeWord = getActiveWordElement();
-  activeWordTop = activeWord?.offsetTop ?? 0;
-}
-
 export function setResultCalculating(val: boolean): void {
   resultCalculating = val;
 }
@@ -250,6 +246,7 @@ export function updateActiveElement(
     newActiveWord.classList.remove("typed");
 
     activeWordTop = newActiveWord.offsetTop;
+    activeWordHeight = newActiveWord.offsetHeight;
     console.log("activewordtopupdated");
 
     updateWordsInputPosition();
@@ -1274,6 +1271,7 @@ export async function lineJump(
         onComplete: () => {
           currentLinesJumping = 0;
           activeWordTop = activeWordEl.offsetTop;
+          activeWordHeight = activeWordEl.offsetHeight;
           removeTestElements(lastElementIndexToRemove);
           wordsEl.style.marginTop = "0";
           lineTransition = false;
@@ -1732,7 +1730,10 @@ function updateLiveStatsColor(value: TimerColor): void {
   }
 }
 
-export function getActiveWordTopWithDifferentData(data: string): number {
+export function getActiveWordTopAndHeightWithDifferentData(data: string): {
+  top: number;
+  height: number;
+} {
   const activeWord = getActiveWordElement();
 
   if (!activeWord) throw new Error("No active word element found");
@@ -1748,11 +1749,12 @@ export function getActiveWordTopWithDifferentData(data: string): number {
   activeWord.append(...nodes);
 
   const top = activeWord.offsetTop;
+  const height = activeWord.offsetHeight;
   for (const node of nodes) {
     node.remove();
   }
 
-  return top;
+  return { top, height };
 }
 
 // this means input, delete or composition