From f62b67de613ff240d48b6aa03abf2e6fa3c4c8a1 Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Wed, 24 Jan 2024 02:43:22 +0000
Subject: [PATCH] fix(core): should set lang when locale changes (#5679)

this + https://github.com/toeverything/design/pull/110 should fix #5591

fix TOV-457

Reason: HTML requires `lang` to be set to render the correct CJK glyphs.

https://heistak.github.io/your-code-displays-japanese-wrong

<img width="692" alt="image" src="https://github.com/toeverything/AFFiNE/assets/584378/1d350219-5157-42cb-8e98-76d92d55b41e">
---
 .../core/src/components/affine/language-menu/index.tsx    | 1 +
 .../frontend/core/src/hooks/affine/use-language-helper.ts | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/core/src/components/affine/language-menu/index.tsx b/packages/frontend/core/src/components/affine/language-menu/index.tsx
index e16b3b4bf..9281e5c69 100644
--- a/packages/frontend/core/src/components/affine/language-menu/index.tsx
+++ b/packages/frontend/core/src/components/affine/language-menu/index.tsx
@@ -15,6 +15,7 @@ const LanguageMenuContent = memo(function LanguageMenuContent() {
             key={option.name}
             selected={currentLanguage?.originalName === option.originalName}
             title={option.name}
+            lang={option.tag}
             onSelect={() => onLanguageChange(option.tag)}
           >
             {option.originalName}
diff --git a/packages/frontend/core/src/hooks/affine/use-language-helper.ts b/packages/frontend/core/src/hooks/affine/use-language-helper.ts
index f179187ca..098441954 100644
--- a/packages/frontend/core/src/hooks/affine/use-language-helper.ts
+++ b/packages/frontend/core/src/hooks/affine/use-language-helper.ts
@@ -1,6 +1,6 @@
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { LOCALES, useI18N } from '@affine/i18n';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 
 export function useLanguageHelper() {
   const i18n = useI18N();
@@ -24,6 +24,12 @@ export function useLanguageHelper() {
     [i18n]
   );
 
+  useEffect(() => {
+    if (currentLanguage) {
+      document.documentElement.lang = currentLanguage.tag;
+    }
+  }, [currentLanguage]);
+
   return useMemo(
     () => ({
       currentLanguage,