Fix(rtl): better rtl support (#1236) (#1381)

packages/frontend/src/app/pages/home/home.page.html

@@ -120,8 +120,9 @@
                 *ngIf="!preferences[preferenceKeys.ShowImages]"
                 class="no-image-padding"
               ></div>
-              <h2 [title]="recipe.title">{{ recipe.title }}</h2>
+              <h2 dir="auto" [title]="recipe.title">{{ recipe.title }}</h2>
               <p
+                dir="auto"
                 *ngIf="recipe.description?.length && preferences[preferenceKeys.ShowRecipeDescription]"
                 [title]="recipe.description"
               >

packages/frontend/src/app/pages/home/home.page.ts

@@ -25,6 +25,7 @@ import { PreferencesService } from "~/services/preferences.service";
 import {
   MyRecipesPreferenceKey,
   GlobalPreferenceKey,
+  isRtlText,
 } from "@recipesage/util/shared";
 import { HomePopoverPage } from "~/pages/home-popover/home-popover.page";
 import { HomeSearchFilterPopoverPage } from "~/pages/home-search-popover/home-search-filter-popover.page";
@@ -498,6 +499,10 @@ export class HomePage {
     this.selectedRecipeIds = [];
   }
 
+  isRtlText(text: string, firstWordOnly = false): boolean {
+    return isRtlText(text, firstWordOnly);
+  }
+
   async addLabelToSelectedRecipes() {
     const header = await this.translate
       .get("pages.home.addLabel.header")

packages/frontend/src/app/pages/recipe-components/recipe/recipe.page.html

@@ -29,7 +29,7 @@
         <img src="{{ sortedRecipeImages()[0].image.location }}" />
       </ion-thumbnail>
 
-      <ion-label>
+      <ion-label dir="auto">
         <h2 class="recipeTitle ion-text-wrap">{{ recipe.title }}</h2>
 
         <ion-grid
@@ -91,7 +91,7 @@ <h2 class="recipeTitle ion-text-wrap">{{ recipe.title }}</h2>
             </ion-col>
           </ion-row>
         </ion-grid>
-        <p class="ion-text-wrap">{{ recipe.description }}</p>
+        <p dir="auto" class="ion-text-wrap">{{ recipe.description }}</p>
       </ion-label>
     </ion-item>
 
@@ -170,10 +170,11 @@ <h2 class="recipeTitle ion-text-wrap">{{ recipe.title }}</h2>
           </ion-label>
         </ion-item>
         <ion-item class="ingredients ion-text-wrap" lines="none">
-          <ion-label>
+          <ion-label dir="auto">
             <p
               *ngFor="let ingredient of ingredients; index as ingredientIdx"
               [innerHTML]="ingredient.content"
+              dir="auto"
               class="ingredient ion-text-wrap"
               [ngClass]="{ ingredientContent: !ingredient.isHeader, complete: getIngredientComplete(ingredientIdx) }"
               (click)="ingredientClicked($event, ingredient, ingredientIdx)"
@@ -199,23 +200,26 @@ <h2 class="recipeTitle ion-text-wrap">{{ recipe.title }}</h2>
           </ion-label>
         </ion-item>
         <ion-item class="instructions ion-text-wrap" lines="none">
-          <ion-label>
+          <ion-label dir="auto">
             <p
               *ngFor="let instruction of instructions; index as instructionIdx"
               class="instruction ion-text-wrap"
+              dir="auto"
             >
-              <span *ngIf="instruction.isHeader"
-                ><b class="sectionHeader">{{instruction.content}}</b></span
-              >
+              <span *ngIf="instruction.isHeader">
+                <b class="sectionHeader">{{instruction.content}}</b>
+              </span>
               <span
                 *ngIf="!instruction.isHeader"
                 (click)="instructionClicked($event, instruction, instructionIdx)"
                 [ngClass]="{ complete: getInstructionComplete(instructionIdx) }"
+                dir="auto"
               >
                 <b>{{instruction.count}} &nbsp;</b>
                 <span
                   class="instructionContent"
                   [innerHTML]="instruction.content"
+                  dir="auto"
                 ></span>
               </span>
             </p>
@@ -235,9 +239,10 @@ <h2 class="recipeTitle ion-text-wrap">{{ recipe.title }}</h2>
         </ion-label>
       </ion-item>
       <ion-item lines="none" class="ion-text-wrap">
-        <ion-label>
+        <ion-label dir="auto">
           <p
             *ngFor="let note of notes; index as noteIdx"
+            dir="auto"
             [innerHTML]="note.content"
             [ngClass]="{ header: note.isHeader }"
             class="ion-text-wrap"

packages/frontend/src/app/pages/recipe-components/recipe/recipe.page.ts

@@ -66,7 +66,6 @@ export class RecipePage {
   ingredients?: ParsedIngredient[];
   instructions?: ParsedInstruction[];
   notes?: ParsedNote[];
-
   scale = 1;
 
   labelGroupIds: string[] = [];

packages/frontend/src/app/services/recipe.service.ts

@@ -49,18 +49,21 @@ export interface ParsedIngredient {
   originalContent: string;
   isHeader: boolean;
   complete: boolean;
+  isRtl: boolean;
 }
 
 export interface ParsedInstruction {
   content: string;
   isHeader: boolean;
   complete: boolean;
   count: number;
+  isRtl: boolean;
 }
 
 export interface ParsedNote {
   content: string;
   isHeader: boolean;
+  isRtl: boolean;
 }
 
 export enum ExportFormat {

packages/util/shared/src/parsers.ts

@@ -136,6 +136,7 @@ export const parseIngredients = (
   originalContent: string;
   complete: boolean;
   isHeader: boolean;
+  isRtl: boolean;
 }[] => {
   if (!ingredients) return [];
 
@@ -147,6 +148,7 @@ export const parseIngredients = (
       originalContent: match,
       complete: false,
       isHeader: false,
+      isRtl: isRtlText(match),
     })) || [];
 
   for (let i = 0; i < lines.length; i++) {
@@ -226,8 +228,10 @@ export const parseIngredients = (
             acc + ingredientPart + (ingredientPartDelimiters[idx] || ""),
           "",
         );
+        lines[i].isRtl = isRtlText(lines[i].originalContent);
       } else {
         lines[i].content = updatedIngredientParts.join(" + ");
+        lines[i].isRtl = isRtlText(lines[i].originalContent);
       }
 
       lines[i].isHeader = false;
@@ -244,6 +248,7 @@ export const parseInstructions = (
   isHeader: boolean;
   count: number;
   complete: boolean;
+  isRtl: boolean;
 }[] => {
   instructions = replaceFractionsInText(instructions);
 
@@ -269,13 +274,15 @@ export const parseInstructions = (
           isHeader: true,
           count: 0,
           complete: false,
+          isRtl: isRtlText(headerContent, true),
         };
       } else {
         return {
           content: line,
           isHeader: false,
           count: stepCount++,
           complete: false,
+          isRtl: isRtlText(line, true),
         };
       }
     });
@@ -286,6 +293,7 @@ export const parseNotes = (
 ): {
   content: string;
   isHeader: boolean;
+  isRtl: boolean;
 }[] => {
   // Starts with [, anything inbetween, ends with ]
   const headerRegexp = /^\[.*\]$/;
@@ -301,12 +309,46 @@ export const parseNotes = (
       return {
         content: headerContent,
         isHeader: true,
+        isRtl: isRtlText(headerContent),
       };
     } else {
       return {
         content: line,
         isHeader: false,
+        isRtl: isRtlText(line),
       };
     }
   });
 };
+
+/* eslint-disable no-control-regex */
+export const isRtlText = (text: string, onlyFirstWord = true): boolean => {
+  const rtlChars = new RegExp("[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]");
+  const ltrChars = new RegExp(
+    "[\u0000-\u0590\u2000-\u202E\u202A-\u202E\uFB00-\uFB4F]",
+  );
+  const aToZ = new RegExp("[a-zA-Z]");
+  let rtlCount = 0;
+  let ltrCount = 0;
+  if (onlyFirstWord) {
+    const splits = text.split(" ");
+    for (let i = 0; i < splits.length; i++) {
+      if (
+        rtlChars.test(splits[i].charAt(0)) ||
+        aToZ.test(splits[i].charAt(0))
+      ) {
+        text = splits[i];
+        break;
+      }
+    }
+  }
+  for (let i = 0; i < text.length; i++) {
+    if (rtlChars.test(text[i])) {
+      rtlCount++;
+    } else if (ltrChars.test(text[i])) {
+      ltrCount++;
+    }
+  }
+
+  return rtlCount > ltrCount;
+};