Disable spell check setting when doc is read-only (#21253)

GitOrigin-RevId: 1053fefd953d4f60b1c2aef4170f99c6885c265d

services/web/frontend/js/features/editor-left-menu/components/settings/settings-spell-check-language.tsx

@@ -5,6 +5,7 @@ import { useProjectSettingsContext } from '../../context/project-settings-contex
 import SettingsMenuSelect from './settings-menu-select'
 import type { Optgroup } from './settings-menu-select'
 import { useFeatureFlag } from '@/shared/context/split-test-context'
+import { useEditorContext } from '@/shared/context/editor-context'
 
 export default function SettingsSpellCheckLanguage() {
   const { t } = useTranslation()
@@ -15,6 +16,7 @@ export default function SettingsSpellCheckLanguage() {
 
   const { spellCheckLanguage, setSpellCheckLanguage } =
     useProjectSettingsContext()
+  const { permissionsLevel } = useEditorContext()
 
   const optgroup: Optgroup = useMemo(() => {
     const options = (languages ?? []).filter(language => {
@@ -48,6 +50,7 @@ export default function SettingsSpellCheckLanguage() {
       optgroup={optgroup}
       label={t('spell_check')}
       name="spellCheckLanguage"
+      disabled={permissionsLevel === 'readOnly'}
     />
   )
 }

services/web/frontend/js/features/source-editor/extensions/spelling/spellchecker.ts

@@ -62,7 +62,6 @@ export class SpellChecker {
 
   destroy() {
     this._clearPendingSpellCheck()
-    // this.hunspellManager?.destroy()
   }
 
   _abortRequest() {

services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts

@@ -108,9 +108,12 @@ function useCodeMirrorScope(view: EditorView) {
     'onlineUserCursorHighlights'
   )
 
-  const [spellCheckLanguage] = useScopeValue<string>(
-    'project.spellCheckLanguage'
-  )
+  let [spellCheckLanguage] = useScopeValue<string>('project.spellCheckLanguage')
+  // spell check is off when read-only
+  if (!permissions.write) {
+    spellCheckLanguage = ''
+  }
+
   const [projectFeatures] =
     useScopeValue<Record<string, boolean | string | number | undefined>>(
       'project.features'