From 3278a07deacca01b15837eb782c205f69da9ac82 Mon Sep 17 00:00:00 2001
From: automated-signal <37887102+automated-signal@users.noreply.github.com>
Date: Wed, 21 Feb 2024 18:13:12 -0600
Subject: [PATCH] Fix username link QR code in RTL

Co-authored-by: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
---
 ts/components/UsernameLinkModalBody.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/ts/components/UsernameLinkModalBody.tsx b/ts/components/UsernameLinkModalBody.tsx
index ce7463e47e..22a2737092 100644
--- a/ts/components/UsernameLinkModalBody.tsx
+++ b/ts/components/UsernameLinkModalBody.tsx
@@ -300,16 +300,19 @@ type CreateTextMeasurerOptionsType = Readonly<{
   font: string;
   letterSpacing: number;
   maxWidth: number;
+  direction: 'ltr' | 'rtl';
 }>;
 
 function createTextMeasurer({
   font,
   letterSpacing,
   maxWidth,
+  direction,
 }: CreateTextMeasurerOptionsType): (text: string) => boolean {
   const [, context] = createCanvasAndContext({ width: 1, height: 1 });
 
   context.font = font;
+  context.direction = direction;
   // Experimental Chrome APIs
   (
     context as unknown as {
@@ -324,6 +327,7 @@ type GenerateImageURLOptionsType = Readonly<{
   link: string;
   username: string;
   hint: string;
+  hintDirection: 'ltr' | 'rtl';
   colorId: number;
 }>;
 
@@ -332,6 +336,7 @@ export async function _generateImageBlob({
   link,
   username,
   hint,
+  hintDirection,
   colorId,
 }: GenerateImageURLOptionsType): Promise<Blob> {
   const usernameLines = splitText(username, {
@@ -340,6 +345,7 @@ export async function _generateImageBlob({
       maxWidth: USERNAME_MAX_WIDTH,
       font: USERNAME_FONT,
       letterSpacing: USERNAME_LETTER_SPACING,
+      direction: 'ltr',
     }),
   });
 
@@ -349,6 +355,7 @@ export async function _generateImageBlob({
       maxWidth: HINT_MAX_WIDTH,
       font: HINT_FONT,
       letterSpacing: HINT_LETTER_SPACING,
+      direction: hintDirection,
     }),
   });
 
@@ -381,6 +388,7 @@ export async function _generateImageBlob({
 
   context.save();
   context.font = USERNAME_FONT;
+  context.direction = 'ltr';
   // Experimental Chrome APIs
   (
     context as unknown as {
@@ -397,6 +405,7 @@ export async function _generateImageBlob({
 
   context.save();
   context.font = HINT_FONT;
+  context.direction = hintDirection;
   // Experimental Chrome APIs
   (
     context as unknown as {
@@ -586,6 +595,7 @@ export function UsernameLinkModalBody({
         username,
         colorId,
         hint: i18n('icu:UsernameLinkModalBody__hint'),
+        hintDirection: i18n.getLocaleDirection(),
       });
       const arrayBuffer = await blob.arrayBuffer();
       if (isAborted) {