From 1cd55d7ad78af494d72d80e09c6f1eb0cbd0e9cc Mon Sep 17 00:00:00 2001
From: Akmal Isomadinov <isomadinovakmal1997@gmail.com>
Date: Wed, 24 Jul 2024 15:59:57 +0500
Subject: [PATCH] Doceditor: Fixed rtl

---
 packages/doceditor/src/hooks/useTheme.ts          | 15 +++++++++++----
 .../doceditor/src/providers/ThemeProvider.tsx     |  3 +++
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/doceditor/src/hooks/useTheme.ts b/packages/doceditor/src/hooks/useTheme.ts
index 2437bbb181..33330b3c79 100644
--- a/packages/doceditor/src/hooks/useTheme.ts
+++ b/packages/doceditor/src/hooks/useTheme.ts
@@ -46,9 +46,16 @@ export interface UseThemeProps {
   i18n?: i18n;
   systemTheme?: ThemeKeys;
   colorTheme?: TGetColorTheme;
+  lang?: string;
 }
 
-const useTheme = ({ user, i18n, systemTheme, colorTheme }: UseThemeProps) => {
+const useTheme = ({
+  user,
+  i18n,
+  systemTheme,
+  colorTheme,
+  lang,
+}: UseThemeProps) => {
   const [currentColorTheme, setCurrentColorTheme] =
     React.useState<TColorScheme>(() => {
       if (!colorTheme) return {} as TColorScheme;
@@ -60,7 +67,7 @@ const useTheme = ({ user, i18n, systemTheme, colorTheme }: UseThemeProps) => {
     });
 
   const [theme, setTheme] = React.useState<TTheme>(() => {
-    const interfaceDirection = i18n?.dir ? i18n.dir() : "ltr";
+    const interfaceDirection = i18n?.dir ? i18n.dir(lang) : "ltr";
 
     const newTheme = match<MatchType>([user?.theme, systemTheme])
       .returnType<TTheme>()
@@ -99,7 +106,7 @@ const useTheme = ({ user, i18n, systemTheme, colorTheme }: UseThemeProps) => {
     const SYSTEM_THEME = getSystemTheme();
 
     let theme = user?.theme ?? SYSTEM_THEME;
-    const interfaceDirection = i18n?.dir ? i18n.dir() : "ltr";
+    const interfaceDirection = i18n?.dir ? i18n.dir(lang) : "ltr";
 
     if (user?.theme === ThemeKeys.SystemStr) theme = SYSTEM_THEME;
 
@@ -116,7 +123,7 @@ const useTheme = ({ user, i18n, systemTheme, colorTheme }: UseThemeProps) => {
     });
 
     setCookie(SYSTEM_THEME_KEY, themeCookie);
-  }, [user?.theme, i18n, currentColorTheme]);
+  }, [user?.theme, i18n, currentColorTheme, lang]);
 
   React.useEffect(() => {
     getCurrentColorTheme();
diff --git a/packages/doceditor/src/providers/ThemeProvider.tsx b/packages/doceditor/src/providers/ThemeProvider.tsx
index 09f79e25e5..205f7eb720 100644
--- a/packages/doceditor/src/providers/ThemeProvider.tsx
+++ b/packages/doceditor/src/providers/ThemeProvider.tsx
@@ -56,11 +56,14 @@ const ThemeProvider = ({
 }: TThemeProvider) => {
   const { i18n } = useI18N({ settings, user });
 
+  const lang = user?.cultureName ?? settings?.culture;
+
   const { theme, currentColorTheme } = useTheme({
     user,
     i18n,
     systemTheme,
     colorTheme,
+    lang,
   });
 
   return (