fix(zen mode): newline not working

Author: Miodec

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

@@ -51,8 +51,8 @@ export function onBeforeInsertText(data: string): boolean {
     return true;
   }
 
-  //only allow newlines if the test has newlines
-  if (data === "\n" && !TestWords.hasNewline) {
+  //only allow newlines if the test has newlines or in zen mode
+  if (data === "\n" && !TestWords.hasNewline && Config.mode !== "zen") {
     return true;
   }
 

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

@@ -217,6 +217,7 @@ export async function onInsertText(options: OnInsertTextParams): Promise<void> {
     const result = await goToNextWord({
       correctInsert: correct,
       isCompositionEnding: isCompositionEnding === true,
+      zenNewline: charIsNewline && Config.mode === "zen",
     });
     lastBurst = result.lastBurst;
     increasedWordIndex = result.increasedWordIndex;

frontend/src/ts/input/helpers/word-navigation.ts

@@ -21,6 +21,7 @@ type GoToNextWordParams = {
   correctInsert: boolean;
   // this is used to tell test ui to update the word before moving to the next word (in case of a composition that ends with a space)
   isCompositionEnding: boolean;
+  zenNewline?: boolean;
 };
 
 type GoToNextWordReturn = {
@@ -31,13 +32,18 @@ type GoToNextWordReturn = {
 export async function goToNextWord({
   correctInsert,
   isCompositionEnding,
+  zenNewline,
 }: GoToNextWordParams): Promise<GoToNextWordReturn> {
   const ret = {
     increasedWordIndex: false,
     lastBurst: 0,
   };
 
-  TestUI.beforeTestWordChange("forward", correctInsert, isCompositionEnding);
+  TestUI.beforeTestWordChange(
+    "forward",
+    correctInsert,
+    isCompositionEnding || zenNewline === true
+  );
 
   if (correctInsert) {
     Replay.addReplayEvent("submitCorrectWord");

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

@@ -1766,7 +1766,24 @@ export async function afterTestWordChange(
     }
   } else if (direction === "back") {
     if (Config.mode === "zen") {
-      getWordElement(TestState.activeWordIndex + 1)?.remove();
+      const wordsChildren = [
+        ...(document.querySelector("#words")?.children ?? []),
+      ] as HTMLElement[];
+
+      let deleteElements = false;
+      for (const child of wordsChildren) {
+        if (
+          !deleteElements &&
+          parseInt(child.getAttribute("data-wordindex") ?? "-1", 10) ===
+            TestState.activeWordIndex
+        ) {
+          deleteElements = true;
+          continue;
+        }
+        if (deleteElements) {
+          child.remove();
+        }
+      }
     }
   }
 }