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.

Author: byseif21

frontend/src/ts/utils/caret.ts

@@ -450,6 +450,9 @@ export class Caret {
     let left = 0;
     let top = 0;
 
+    const tapeOffset =
+      wordsWrapperCache.getOffsetWidth() * (Config.tapeMargin / 100);
+
     // yes, this is all super verbose, but its easier to maintain and understand
     if (isWordRTL) {
       let afterLetterCorrection = 0;
@@ -475,8 +478,7 @@ export class Caret {
         left += options.letter.getOffsetLeft();
         left += afterLetterCorrection;
         if (this.isMainCaret && lockedMainCaretInTape) {
-          left +=
-            wordsWrapperCache.getOffsetWidth() * (Config.tapeMargin / 100);
+          left += wordsWrapperCache.getOffsetWidth() - tapeOffset;
         } else {
           left += options.word.getOffsetLeft();
           left += options.word.getOffsetWidth();
@@ -486,8 +488,7 @@ export class Caret {
           left += width * -1;
         }
         if (this.isMainCaret && lockedMainCaretInTape) {
-          left +=
-            wordsWrapperCache.getOffsetWidth() * (Config.tapeMargin / 100);
+          left += wordsWrapperCache.getOffsetWidth() - tapeOffset;
         } else {
           left += options.letter.getOffsetLeft();
           left += options.word.getOffsetLeft();
@@ -508,15 +509,13 @@ export class Caret {
         left += options.letter.getOffsetLeft();
         left += afterLetterCorrection;
         if (this.isMainCaret && lockedMainCaretInTape) {
-          left +=
-            wordsWrapperCache.getOffsetWidth() * (Config.tapeMargin / 100);
+          left += tapeOffset;
         } else {
           left += options.word.getOffsetLeft();
         }
       } else if (Config.tapeMode === "letter") {
         if (this.isMainCaret && lockedMainCaretInTape) {
-          left +=
-            wordsWrapperCache.getOffsetWidth() * (Config.tapeMargin / 100);
+          left += tapeOffset;
         } else {
           left += options.letter.getOffsetLeft();
           left += options.word.getOffsetLeft();