Save spellCheckLanguage to both project-wide and user-wide setting

GitOrigin-RevId: 059cc64d0fe2e955814a7192f82d4ff8ea4e2572

services/web/frontend/js/features/editor-left-menu/hooks/use-set-project-wide-settings.tsx

@@ -4,6 +4,7 @@ import { useProjectContext } from '../../../shared/context/project-context'
 import useScopeValue from '../../../shared/hooks/use-scope-value'
 import { ProjectSettingsScope, saveProjectSettings } from '../utils/api'
 import useSetRootDocId from './use-set-root-doc-id'
+import useSetSpellCheckLanguage from './use-set-spell-check-language'
 
 // TODO: handle ignoreUpdates
 export default function useSetProjectWideSettings() {
@@ -35,16 +36,7 @@ export default function useSetProjectWideSettings() {
   )
 
   const setRootDocId = useSetRootDocId()
-
-  const setSpellCheckLanguage = useCallback(
-    (spellCheckLanguage: string) => {
-      if (project?.spellCheckLanguage) {
-        setProject({ ...project, spellCheckLanguage })
-        saveProjectSettings(projectId, { spellCheckLanguage })
-      }
-    },
-    [projectId, project, setProject]
-  )
+  const setSpellCheckLanguage = useSetSpellCheckLanguage()
 
   return {
     compiler: project?.compiler,

services/web/frontend/js/features/editor-left-menu/hooks/use-set-spell-check-language.tsx

@@ -0,0 +1,25 @@
+import { useCallback } from 'react'
+import { useProjectContext } from '../../../shared/context/project-context'
+import useScopeValue from '../../../shared/hooks/use-scope-value'
+import { saveProjectSettings, saveUserSettings } from '../utils/api'
+
+export default function useSetSpellCheckLanguage() {
+  const [spellCheckLanguageScope, setSpellCheckLanguageScope] =
+    useScopeValue<string>('project.spellCheckLanguage')
+  const { _id: projectId } = useProjectContext()
+
+  const setSpellCheckLanguage = useCallback(
+    (spellCheckLanguage: string) => {
+      if (spellCheckLanguageScope) {
+        setSpellCheckLanguageScope(spellCheckLanguage)
+
+        // save to both project setting and user setting
+        saveProjectSettings(projectId, { spellCheckLanguage })
+        saveUserSettings({ spellCheckLanguage })
+      }
+    },
+    [projectId, setSpellCheckLanguageScope, spellCheckLanguageScope]
+  )
+
+  return setSpellCheckLanguage
+}

services/web/frontend/js/features/editor-left-menu/utils/api.ts

@@ -23,7 +23,20 @@ export type UserSettingsScope = {
   lineHeight: LineHeight
 }
 
-export function saveUserSettings(data: Partial<UserSettingsScope>) {
+export type ProjectSettingsScope = {
+  compiler: ProjectCompiler
+  imageName: string
+  rootDoc_id: string
+  spellCheckLanguage: string
+}
+
+type SaveUserSettings = Partial<
+  UserSettingsScope & {
+    spellCheckLanguage: ProjectSettingsScope['spellCheckLanguage']
+  }
+>
+
+export function saveUserSettings(data: SaveUserSettings) {
   postJSON('/user/settings', {
     body: {
       _csrf: window.csrfToken,
@@ -32,13 +45,6 @@ export function saveUserSettings(data: Partial<UserSettingsScope>) {
   })
 }
 
-export type ProjectSettingsScope = {
-  compiler: ProjectCompiler
-  imageName: string
-  rootDoc_id: string
-  spellCheckLanguage: string
-}
-
 // server asks for "rootDocId" but client has "rootDoc_id"
 type ProjectSettingsRequestBody = Partial<
   Omit<ProjectSettingsScope, 'rootDoc_id'> & {