From 82540c93dd2b3111b35a6102b82b598fd0ecc365 Mon Sep 17 00:00:00 2001
From: byseif21 <byseif21@gmail.com>
Date: Sat, 20 Dec 2025 22:39:31 +0200
Subject: [PATCH] fix(zen): caret positioning for mixed language directions
 (@byseif21)

---
 frontend/src/ts/utils/caret.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/src/ts/utils/caret.ts b/frontend/src/ts/utils/caret.ts
index 47408db78..ab23777bf 100644
--- a/frontend/src/ts/utils/caret.ts
+++ b/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,