Skip to content

Commit 96169a1

Browse files
authored
fix(caret): align caret correctly in RTL tape mode (@byseif21) (monkeytypegame#7259)
* In RTL tests, enabling tape mode causes the main caret to be misaligned from the start of the test and remain offset while typing. The tape margin was always calculated from the left side, which is correct for LTR but incorrect for RTL layouts. fix * we should have mirrored the margin from the right side.
1 parent 3f21023 commit 96169a1

File tree

1 file changed

+7
-8
lines changed

1 file changed

+7
-8
lines changed

frontend/src/ts/utils/caret.ts

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -450,6 +450,9 @@ export class Caret {
450450
let left = 0;
451451
let top = 0;
452452

453+
const tapeOffset =
454+
wordsWrapperCache.getOffsetWidth() * (Config.tapeMargin / 100);
455+
453456
// yes, this is all super verbose, but its easier to maintain and understand
454457
if (isWordRTL) {
455458
let afterLetterCorrection = 0;
@@ -475,8 +478,7 @@ export class Caret {
475478
left += options.letter.getOffsetLeft();
476479
left += afterLetterCorrection;
477480
if (this.isMainCaret && lockedMainCaretInTape) {
478-
left +=
479-
wordsWrapperCache.getOffsetWidth() * (Config.tapeMargin / 100);
481+
left += wordsWrapperCache.getOffsetWidth() - tapeOffset;
480482
} else {
481483
left += options.word.getOffsetLeft();
482484
left += options.word.getOffsetWidth();
@@ -486,8 +488,7 @@ export class Caret {
486488
left += width * -1;
487489
}
488490
if (this.isMainCaret && lockedMainCaretInTape) {
489-
left +=
490-
wordsWrapperCache.getOffsetWidth() * (Config.tapeMargin / 100);
491+
left += wordsWrapperCache.getOffsetWidth() - tapeOffset;
491492
} else {
492493
left += options.letter.getOffsetLeft();
493494
left += options.word.getOffsetLeft();
@@ -508,15 +509,13 @@ export class Caret {
508509
left += options.letter.getOffsetLeft();
509510
left += afterLetterCorrection;
510511
if (this.isMainCaret && lockedMainCaretInTape) {
511-
left +=
512-
wordsWrapperCache.getOffsetWidth() * (Config.tapeMargin / 100);
512+
left += tapeOffset;
513513
} else {
514514
left += options.word.getOffsetLeft();
515515
}
516516
} else if (Config.tapeMode === "letter") {
517517
if (this.isMainCaret && lockedMainCaretInTape) {
518-
left +=
519-
wordsWrapperCache.getOffsetWidth() * (Config.tapeMargin / 100);
518+
left += tapeOffset;
520519
} else {
521520
left += options.letter.getOffsetLeft();
522521
left += options.word.getOffsetLeft();

0 commit comments

Comments
 (0)