Merge pull request #152 from sillsdev/rtl

fix: populate script isRtl in controller and svelte

Author: andrew-polk

components/language-chooser/common/find-language/findLanguageInterfaces.ts

@@ -72,8 +72,14 @@ export interface IOrthography {
 // isRtl setting to match its IScript in every case, which can accomplish
 // with und-{script}.
 export function isRTLScript(scriptCode: string): boolean {
-  const locale = new Intl.Locale(`und-${scriptCode}`);
-  // getTextInfo is the standardized property; textInfo is the older name
-  const info = locale.getTextInfo?.() ?? (locale as any).textInfo;
-  return info?.direction === "rtl";
+  try {
+    const locale = new Intl.Locale(`und-${scriptCode}`);
+    // getTextInfo is the standardized property; textInfo is the older name
+    const info = locale.getTextInfo?.() ?? (locale as any).textInfo;
+    return info?.direction === "rtl";
+  } catch {
+    // An unrecognized/malformed script code makes Intl.Locale throw. Such a
+    // script has no known RTL direction, so treat it as not RTL.
+    return false;
+  }
 }

components/language-chooser/common/language-chooser-controller/src/view-models/language-chooser.ts

@@ -9,6 +9,7 @@ import {
   type IRegion,
   type IScript,
   isManuallyEnteredTagLanguage,
+  isRTLScript,
   isUnlistedLanguage,
   isValidBcp47Tag,
   languageForManuallyEnteredTag,
@@ -118,7 +119,7 @@ export function useLanguageChooserViewModel(
     if (selectedLang.scripts.length === 1) {
       // Automatically select a language's only script
       _setScriptList([]);
-      selectedScript.value = selectedLang.scripts[0];
+      selectedScript.value = scriptWithReadingDirection(selectedLang.scripts[0]);
     } else {
       _setScriptList(selectedLang.scripts);
     }
@@ -135,7 +136,9 @@ export function useLanguageChooserViewModel(
 
   function _onScriptSelected(index: number) {
     selectItem(index, listedScripts.value);
-    selectedScript.value = listedScripts.value[index].script;
+    selectedScript.value = scriptWithReadingDirection(
+      listedScripts.value[index].script
+    );
     _onOrthographyChanged();
   }
 
@@ -271,7 +274,9 @@ export function useLanguageChooserViewModel(
     region?: IRegion;
     dialect?: string;
   }) {
-    selectedScript.requestUpdate(script);
+    selectedScript.requestUpdate(
+      script ? scriptWithReadingDirection(script) : script
+    );
     customizations.requestUpdate({
       region,
       dialect,
@@ -308,6 +313,13 @@ export function useLanguageChooserViewModel(
   };
 }
 
+// Returns a copy of the script with its reading direction (isRtl) populated,
+// so consumers receive the direction as part of the selected orthography.
+// Mirrors the behavior of the React useLanguageChooser hook.
+function scriptWithReadingDirection(script: IScript): IScript {
+  return { ...script, isRtl: isRTLScript(script.code) };
+}
+
 function hasValidDisplayName(selection: IOrthography) {
   if (!selection.language) {
     return false;

components/language-chooser/common/language-chooser-controller/test/language-chooser.spec.ts

@@ -336,9 +336,10 @@ describe("selected script", () => {
     test.viewModel.listedLanguages.value[0].isSelected.requestUpdate(true);
     test.viewModel.listedScripts.value[0].isSelected.requestUpdate(true);
 
-    expect(test.viewModel.selectedScript.value).toEqual(
-      NorthernUzbekLanguage.scripts[0]
-    );
+    expect(test.viewModel.selectedScript.value).toEqual({
+      ...NorthernUzbekLanguage.scripts[0],
+      isRtl: false,
+    });
   });
 
   it("should be undefined after script deselected", () => {
@@ -366,9 +367,20 @@ describe("selected script", () => {
 
     test.viewModel.listedLanguages.value[0].isSelected.requestUpdate(true);
 
-    expect(test.viewModel.selectedScript.value).toEqual(
-      WaataLanguage.scripts[0]
-    );
+    expect(test.viewModel.selectedScript.value).toEqual({
+      ...WaataLanguage.scripts[0],
+      isRtl: false,
+    });
+  });
+
+  it("should populate isRtl for a right-to-left script", () => {
+    const test = new TestHelper({ initialLanguages: [NorthernUzbekLanguage] });
+
+    test.viewModel.listedLanguages.value[0].isSelected.requestUpdate(true);
+    // NorthernUzbekLanguage.scripts[1] is Arabic, a right-to-left script
+    test.viewModel.listedScripts.value[1].isSelected.requestUpdate(true);
+
+    expect(test.viewModel.selectedScript.value?.isRtl).toBe(true);
   });
 });
 
@@ -626,7 +638,9 @@ describe("customize language modal", () => {
     scriptViewModel.isSelected.requestUpdate(true);
     t.viewModel.onCustomizeButtonClicked();
 
-    expect(spy).toHaveBeenCalledWith({ script: scriptViewModel.script });
+    expect(spy).toHaveBeenCalledWith({
+      script: { ...scriptViewModel.script, isRtl: false },
+    });
   });
 
   it("populates with dialect when custom dialect was selected", () => {
@@ -706,6 +720,7 @@ describe("customize language modal", () => {
     expect(t.viewModel.selectedScript.value).toEqual({
       code: "abc",
       name: "ABC Script",
+      isRtl: false,
     });
   });
 

components/language-chooser/svelte/language-chooser-svelte-daisyui/src/demos/BasicDemo.svelte

@@ -70,7 +70,15 @@
 
           <div>
             <div class="text-base-content/60">Script</div>
-            <div>{orthography.script?.name || "-"}</div>
+            <div>
+              {#if orthography.script}
+                {orthography.script.name} ({orthography.script.isRtl
+                  ? "RTL"
+                  : "LTR"})
+              {:else}
+                -
+              {/if}
+            </div>
           </div>
 
           <div>