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">

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}

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,