fix(caret): positioning for mixed language directions in zen (@byseif21)

frontend/src/ts/utils/caret.ts

@@ -1,6 +1,7 @@
 import { CaretStyle } from "@monkeytype/schemas/configs";
 import Config from "../config";
 import * as TestWords from "../test/test-words";
+import * as TestInput from "../test/test-input";
 import { getTotalInlineMargin } from "./misc";
 import { isWordRightToLeft } from "./strings";
 import { requestDebouncedAnimationFrame } from "./debounced-animation-frame";
@@ -290,6 +291,12 @@ export class Caret {
       const letters = word?.qsa("letter") ?? [];
       const wordText = TestWords.words.get(options.wordIndex);
 
+      // in zen mode, use the input content to determine word direction
+      const wordTextForDirection =
+        Config.mode === "zen"
+          ? TestInput.input.current
+          : TestWords.words.get(options.wordIndex);
+
       // caret can be either on the left side of the target letter or the right
       // we stick to the left side unless we are on the last letter or beyond
       // then we switch to the right side
@@ -334,7 +341,7 @@ export class Caret {
       const { left, top, width } = this.getTargetPositionAndWidth({
         word,
         letter,
-        wordText,
+        wordText: wordTextForDirection,
         side,
         isLanguageRightToLeft: options.isLanguageRightToLeft,
         isDirectionReversed: options.isDirectionReversed,
@@ -405,12 +412,22 @@ export class Caret {
     isLanguageRightToLeft: boolean;
     isDirectionReversed: boolean;
   }): { left: number; top: number; width: number } {
-    const isWordRTL = isWordRightToLeft(
+    const baseWordIsRTL = isWordRightToLeft(
       options.wordText,
       options.isLanguageRightToLeft,
       options.isDirectionReversed,
     );
 
+    // that's for zen mode, for mixed RTL/LTR input
+    const isWordRTL =
+      Config.mode === "zen"
+        ? isWordRightToLeft(
+            options.letter.native.textContent ?? "",
+            options.isLanguageRightToLeft,
+            options.isDirectionReversed,
+          )
+        : baseWordIsRTL;
+
     //if the letter is not visible, use the closest visible letter
     const isLetterVisible = options.letter.getOffsetWidth() > 0;
     if (!isLetterVisible) {