Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
byseif21 wants to merge 6 commits into
base: master
Choose a base branch
from
+17 −2
Open

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

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
82540c9
fix(zen): caret positioning for mixed language directions (@byseif21)
byseif21 Dec 20, 2025
c1868c7
direction at letter level only in zen, so caret follows mixed RTL/LTR…
byseif21 Dec 21, 2025
1dfd966
Merge branch 'master' into fix/zen-caret-mix
byseif21 Dec 21, 2025
d03cc56
unneeded fb
byseif21 Dec 22, 2025
7aea1a2
Merge branch 'master' into fix/zen-caret-mix
byseif21 Jan 5, 2026
130f09e
.
byseif21 Jan 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 17 additions & 2 deletions frontend/src/ts/utils/caret.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -290,6 +291,10 @@ 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 : wordText;

// 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
Expand Down Expand Up @@ -334,7 +339,7 @@ export class Caret {
const { left, top, width } = this.getTargetPositionAndWidth({
word,
letter,
wordText,
wordText: wordTextForDirection,
side,
isLanguageRightToLeft: options.isLanguageRightToLeft,
isDirectionReversed: options.isDirectionReversed,
Expand Down Expand Up @@ -405,12 +410,22 @@ export class Caret {
isLanguageRightToLeft: boolean;
isDirectionReversed: boolean;
}): { left: number; top: number; width: number } {
const [isWordRTL, isFullMatch] = isWordRightToLeft(
const [baseWordIsRTL, isFullMatch] = isWordRightToLeft(
options.wordText,
options.isLanguageRightToLeft,
options.isDirectionReversed,
);

// that's for zen mode, for mixed RTL/LTR input
const isWordRTL =
Config.mode === "zen"
? isWordRightToLeft(
Copy link
Contributor

@Leonabcd123 Leonabcd123 Jan 6, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we're in zen mode, we call isWordRightToLeft twice, with the first one (line 413) being unnecessary, as we don't care whether the whole word is rtl. We also check for zen mode twice (once in getTargetPositionAndWidth and once in goTo). Will be nice to remove one of them as well.

options.letter.native.textContent ?? "",
options.isLanguageRightToLeft,
options.isDirectionReversed,
)[0]
: baseWordIsRTL;

//if the letter is not visible, use the closest visible letter
const isLetterVisible = options.letter.getOffsetWidth() > 0;
if (!isLetterVisible) {
Expand Down