Always set text dir (#1317)

* Always set html text dir * Add a failsafe if the document language does not switch
rage · Sep 23, 2024 · 4a893f0 · 4a893f0
1 parent 75d2b18
commit 4a893f0
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 5 deletions.
diff --git a/services/cms/src/pages/_app.tsx b/services/cms/src/pages/_app.tsx
@@ -7,7 +7,7 @@ import Layout from "../components/Layout"
 import LocalStyles from "../styles/LocalStyles"
 
 import { LoginStateContextProvider } from "@/shared-module/common/contexts/LoginStateContext"
-import useLanguage from "@/shared-module/common/hooks/useLanguage"
+import useLanguage, { getDir } from "@/shared-module/common/hooks/useLanguage"
 import { queryClient } from "@/shared-module/common/services/appQueryClient"
 import GlobalStyles from "@/shared-module/common/styles/GlobalStyles"
 import { OUTDATED_BROWSER_WARNING_SCRIPT } from "@/shared-module/common/utils/constants"
@@ -44,6 +44,7 @@ const MyApp: React.FC<React.PropsWithChildren<AppProps>> = ({ Component, pagePro
         return
       }
       htmlElement.setAttribute("lang", language)
+      htmlElement.setAttribute("dir", getDir(language))
       setLanguage(language)
     })
     i18n.on("loaded", () => {

diff --git a/services/course-material/src/components/layout/Layout.tsx b/services/course-material/src/components/layout/Layout.tsx
@@ -26,6 +26,7 @@ import {
   NavItem,
   NavItems,
 } from "@/shared-module/common/components/Navigation/NavBar"
+import { getDir } from "@/shared-module/common/hooks/useLanguage"
 import ietfLanguageTagToHumanReadableName from "@/shared-module/common/utils/ietfLanguageTagToHumanReadableName"
 import withNoSsr from "@/shared-module/common/utils/withNoSsr"
 
@@ -86,9 +87,22 @@ const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = ({ children }) =>
   }, [changedLanguageUrl, router])
 
   useEffect(() => {
-    if (currentLanguageCode && i18n.language !== currentLanguageCode) {
+    if (!currentLanguageCode) {
+      return
+    }
+    if (i18n.language !== currentLanguageCode) {
       i18n.changeLanguage(currentLanguageCode)
     }
+    const htmlElement = document.querySelector("html")
+    if (!htmlElement || !currentLanguageCode) {
+      return
+    }
+    setTimeout(() => {
+      // eslint-disable-next-line i18next/no-literal-string
+      htmlElement.setAttribute("lang", currentLanguageCode)
+      // eslint-disable-next-line i18next/no-literal-string
+      htmlElement.setAttribute("dir", getDir(currentLanguageCode))
+    }, 100)
   }, [currentLanguageCode, i18n])
 
   const layoutContextValue = useMemo(() => {

diff --git a/services/course-material/src/pages/_app.tsx b/services/course-material/src/pages/_app.tsx
@@ -6,7 +6,7 @@ import React, { useEffect, useState } from "react"
 import Layout from "../components/layout/Layout"
 
 import { LoginStateContextProvider } from "@/shared-module/common/contexts/LoginStateContext"
-import useLanguage from "@/shared-module/common/hooks/useLanguage"
+import useLanguage, { getDir } from "@/shared-module/common/hooks/useLanguage"
 import { queryClient } from "@/shared-module/common/services/appQueryClient"
 import GlobalStyles from "@/shared-module/common/styles/GlobalStyles"
 import { OUTDATED_BROWSER_WARNING_SCRIPT } from "@/shared-module/common/utils/constants"
@@ -43,6 +43,7 @@ const MyApp: React.FC<React.PropsWithChildren<AppProps>> = ({ Component, pagePro
         return
       }
       htmlElement.setAttribute("lang", language)
+      htmlElement.setAttribute("dir", getDir(language))
       setLanguage(language)
     })
     i18n.on("loaded", () => {

diff --git a/services/main-frontend/src/pages/_app.tsx b/services/main-frontend/src/pages/_app.tsx
@@ -6,7 +6,7 @@ import React, { useEffect, useState } from "react"
 import Layout from "../components/Layout"
 
 import { LoginStateContextProvider } from "@/shared-module/common/contexts/LoginStateContext"
-import useLanguage from "@/shared-module/common/hooks/useLanguage"
+import useLanguage, { getDir } from "@/shared-module/common/hooks/useLanguage"
 import { queryClient } from "@/shared-module/common/services/appQueryClient"
 import GlobalStyles from "@/shared-module/common/styles/GlobalStyles"
 import { OUTDATED_BROWSER_WARNING_SCRIPT } from "@/shared-module/common/utils/constants"
@@ -41,6 +41,7 @@ const MyApp: React.FC<React.PropsWithChildren<AppProps>> = ({ Component, pagePro
         return
       }
       htmlElement.setAttribute("lang", language)
+      htmlElement.setAttribute("dir", getDir(language))
       setLanguage(language)
     })
     i18n.on("loaded", () => {

diff --git a/shared-module/packages/common/src/hooks/useLanguage.tsx b/shared-module/packages/common/src/hooks/useLanguage.tsx
@@ -12,7 +12,7 @@ const DEFAULT_LANGUAGE = "en"
 
 const CAN_ACCESS_COOKIES = detectAccessToCookies()
 
-function getDir(language: string) {
+export function getDir(language: string) {
   try {
     return dir(language)
   } catch (e) {