From 4a893f051fda68f73e3f96338b37713fbb6286ba Mon Sep 17 00:00:00 2001 From: Henrik Nygren Date: Mon, 23 Sep 2024 15:09:13 +0300 Subject: [PATCH] Always set text dir (#1317) * Always set html text dir * Add a failsafe if the document language does not switch --- services/cms/src/pages/_app.tsx | 3 ++- .../src/components/layout/Layout.tsx | 16 +++++++++++++++- services/course-material/src/pages/_app.tsx | 3 ++- services/main-frontend/src/pages/_app.tsx | 3 ++- .../packages/common/src/hooks/useLanguage.tsx | 2 +- 5 files changed, 22 insertions(+), 5 deletions(-) diff --git a/services/cms/src/pages/_app.tsx b/services/cms/src/pages/_app.tsx index 51c17c0511f4..1d3563f2f8bc 100644 --- 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> = ({ 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 index 0ed2a1197189..9f5576859b9b 100644 --- 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> = ({ 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 index fc636200b894..3fa1a0b6ebc1 100644 --- 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> = ({ 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 index 741e76991bf5..f867c43bc4ce 100644 --- 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> = ({ 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 index 170dc86a24a6..ebfa7f35948e 100644 --- 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) {