impr(tape mode): support RTL languages (@NadAlaba)

frontend/src/styles/test.scss

@@ -261,9 +261,23 @@
     }
   }
 
-  &.tape .word {
-    margin: 0.25em 0.6em 0.75em 0;
-    white-space: nowrap;
+  &.tape {
+    display: block;
+    text-wrap: nowrap;
+    width: 200vw;
+    .word {
+      margin: 0.25em 0.6em 0.25em 0;
+      display: inline-block;
+      vertical-align: top;
+    }
+    .beforeNewline {
+      display: inline-block;
+      vertical-align: top;
+      margin: 0.25em 0;
+    }
+    .afterNewline {
+      display: inline-block;
+    }
   }
 
   /* a little hack for right-to-left languages */
@@ -462,13 +476,13 @@
     display: inline-block;
   }
 
-  &.lastbeforenewline::after {
-    font-family: "Font Awesome";
-    font-weight: 600;
-    content: "\f107";
-    margin-left: 0.5rem;
-    opacity: 0.25;
-  }
+  //&.lastbeforenewline::after {
+  //  font-family: "Font Awesome";
+  //  font-weight: 600;
+  //  content: "\f107";
+  //  margin-left: 0.5rem;
+  //  opacity: 0.25;
+  //}
 
   .wordInputHighlight {
     opacity: 1;
@@ -564,9 +578,9 @@
   pointer-events: none;
   top: -2.5rem;
 
-  &.focus {
-    // top: 0rem;
-  }
+  //&.focus {
+  // top: 0rem;
+  //}
 
   i {
     margin-right: 0.5rem;
@@ -1181,7 +1195,9 @@
 .pageTest {
   #wordsWrapper {
     position: relative;
+    overflow: visible clip;
     &.tape {
+      overflow: hidden;
       -webkit-mask-image: linear-gradient(
         90deg,
         rgba(0, 0, 0, 0) 1%,
@@ -1220,7 +1236,8 @@
   }
   .outOfFocusWarning {
     text-align: center;
-    height: 0;
+    height: 100%;
+    align-content: center;
     font-size: 1rem;
     z-index: 999;
     position: absolute;

frontend/src/ts/config.ts

@@ -930,7 +930,7 @@ export function setTapeMargin(
   }
 
   if (
-    !isConfigValueValid("max line width", value, ConfigSchemas.TapeMarginSchema)
+    !isConfigValueValid("tape margin", value, ConfigSchemas.TapeMarginSchema)
   ) {
     return false;
   }

frontend/src/ts/controllers/input-controller.ts

@@ -115,7 +115,7 @@ function updateUI(): void {
   }
 }
 
-function backspaceToPrevious(): void {
+async function backspaceToPrevious(): Promise<void> {
   if (!TestState.isActive) return;
 
   if (
@@ -155,7 +155,7 @@ function backspaceToPrevious(): void {
   }
   TestState.decreaseActiveWordIndex();
   TestUI.setActiveWordElementIndex(TestUI.activeWordElementIndex - 1);
-  TestUI.updateActiveElement(true);
+  await TestUI.updateActiveElement(true);
   Funbox.toggleScript(TestWords.words.getCurrent());
   void TestUI.updateActiveWordLetters();
 
@@ -335,33 +335,36 @@ async function handleSpace(): Promise<void> {
     }
   }
   TestUI.setActiveWordElementIndex(TestUI.activeWordElementIndex + 1);
-  TestUI.updateActiveElement();
+  await TestUI.updateActiveElement();
   void Caret.updatePosition();
 
-  if (
-    !Config.showAllLines ||
+  const shouldLimitToThreeLines =
     Config.mode === "time" ||
-    (Config.mode === "custom" && CustomText.getLimitValue() === 0) ||
-    (Config.mode === "custom" && CustomText.getLimitMode() === "time")
-  ) {
-    const currentTop: number = Math.floor(
+    (Config.mode === "custom" && CustomText.getLimitMode() === "time") ||
+    (Config.mode === "custom" && CustomText.getLimitValue() === 0);
+
+  const currentTop: number = Math.floor(
+    document.querySelectorAll<HTMLElement>("#words .word")[
+      TestUI.activeWordElementIndex - 1
+    ]?.offsetTop ?? 0
+  );
+  let nextTop: number;
+  try {
+    nextTop = Math.floor(
       document.querySelectorAll<HTMLElement>("#words .word")[
-        TestUI.activeWordElementIndex - 1
+        TestUI.activeWordElementIndex
       ]?.offsetTop ?? 0
     );
-    let nextTop: number;
-    try {
-      nextTop = Math.floor(
-        document.querySelectorAll<HTMLElement>("#words .word")[
-          TestUI.activeWordElementIndex
-        ]?.offsetTop ?? 0
-      );
-    } catch (e) {
-      nextTop = 0;
-    }
+  } catch (e) {
+    nextTop = 0;
+  }
 
-    if (nextTop > currentTop) {
+  if (nextTop > currentTop) {
+    if (!Config.showAllLines || shouldLimitToThreeLines) {
       TestUI.lineJump(currentTop);
+    } else if (Config.mode === "zen") {
+      // this makes wrapper height changes less jumpy in zen+showAllLines
+      TestUI.updateWordsWrapperHeight();
     }
   } //end of line wrap
 
@@ -1067,7 +1070,7 @@ $(document).on("keydown", async (event) => {
   }
 
   if (event.key === "Backspace" && TestInput.input.current.length === 0) {
-    backspaceToPrevious();
+    await backspaceToPrevious();
     if (TestInput.input.current) {
       setWordsInput(" " + TestInput.input.current + " ");
     }
@@ -1266,7 +1269,7 @@ $("#wordsInput").on("beforeinput", (event) => {
   }
 });
 
-$("#wordsInput").on("input", (event) => {
+$("#wordsInput").on("input", async (event) => {
   if (!event.originalEvent?.isTrusted || TestUI.testRestarting) {
     (event.target as HTMLInputElement).value = " ";
     return;
@@ -1335,7 +1338,7 @@ $("#wordsInput").on("input", (event) => {
 
   if (realInputValue.length === 0 && currTestInput.length === 0) {
     // fallback for when no Backspace keydown event (mobile)
-    backspaceToPrevious();
+    await backspaceToPrevious();
   } else if (inputValue.length < currTestInput.length) {
     if (containsChinese) {
       if (

frontend/src/ts/test/caret.ts

@@ -114,11 +114,17 @@ function getTargetPositionLeft(
 
     if (Config.tapeMode === "word" && inputLen > 0) {
       let currentWordWidth = 0;
+      let lastPositiveLetterWidth = 0;
       for (let i = 0; i < inputLen; i++) {
         if (invisibleExtraLetters && i >= wordLen) break;
-        currentWordWidth +=
-          $(currentWordNodeList[i] as HTMLElement).outerWidth(true) ?? 0;
+        const letterOuterWidth =
+          $(currentWordNodeList[i] as Element).outerWidth(true) ?? 0;
+        currentWordWidth += letterOuterWidth;
+        if (letterOuterWidth > 0) lastPositiveLetterWidth = letterOuterWidth;
       }
+      // if current letter has zero width move the caret to previous positive width letter
+      if ($(currentWordNodeList[inputLen] as Element).outerWidth(true) === 0)
+        currentWordWidth -= lastPositiveLetterWidth;
       if (isLanguageRightToLeft) currentWordWidth *= -1;
       result += currentWordWidth;
     }

frontend/src/ts/test/test-logic.ts

@@ -429,13 +429,6 @@ export async function init(): Promise<void> {
     }
   }
 
-  if (Config.tapeMode !== "off" && language.rightToLeft) {
-    Notifications.add("This language does not support tape mode.", 0, {
-      important: true,
-    });
-    UpdateConfig.setTapeMode("off");
-  }
-
   const allowLazyMode = !language.noLazyMode || Config.mode === "custom";
   if (Config.lazyMode && !allowLazyMode) {
     rememberLazyMode = true;
@@ -518,7 +511,7 @@ export async function init(): Promise<void> {
   Funbox.toggleScript(TestWords.words.getCurrent());
   TestUI.setRightToLeft(language.rightToLeft);
   TestUI.setLigatures(language.ligatures ?? false);
-  TestUI.showWords();
+  await TestUI.showWords();
   console.debug("Test initialized with words", generatedWords);
   console.debug(
     "Test initialized with section indexes",
@@ -1424,7 +1417,6 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => {
       restart();
     }
     if (eventKey === "difficulty" && !nosave) restart();
-    if (eventKey === "showAllLines" && !nosave) restart();
     if (
       eventKey === "customLayoutFluid" &&
       Config.funbox.includes("layoutfluid")