fix(settings): re-add spellcheck setting

This was included in the old editor preferences dialog,
which got removed altogether with the document-bar.

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

frontend/locales/en.json

@@ -445,35 +445,6 @@
         "errorAddingAlias": "The chosen alias can not be added to this note",
         "errorRemovingAlias": "There was an error removing the alias",
         "errorMakingPrimary": "There was an error marking the alias as primary"
-      },
-      "preferences": {
-        "title": "Preferences",
-        "theme": {
-          "label": "Editor theme",
-          "one-dark": "Dark",
-          "neat": "Light"
-        },
-        "keyMap": {
-          "label": "Keymap",
-          "sublime": "Sublime",
-          "emacs": "Emacs",
-          "vim": "Vim"
-        },
-        "indentWithTabs": {
-          "label": "Tab character",
-          "on": "Tabs",
-          "off": "Spaces"
-        },
-        "indentUnit": "Number of spaces per tab",
-        "spellcheck": {
-          "label": "Spell checking"
-        },
-        "ligatures": {
-          "label": "Show ligatures"
-        },
-        "smartPaste": {
-          "label": "Auto format pasted content"
-        }
       }
     },
     "embeddings": {
@@ -637,6 +608,10 @@
       "lineWrapping": {
         "label": "Line Wrapping",
         "help": "Breaks long lines so they're visible without scrolling."
+      },
+      "spellCheck":{
+        "label": "Spell checking",
+        "help": "Enables browser spell checking."
       }
     },
     "global": {

frontend/src/components/global-dialogs/settings-dialog/editor/editor-settings-tab-content.tsx

@@ -11,6 +11,7 @@ import { SyncScrollSettingButtonGroup } from './sync-scroll-setting-button-group
 import React from 'react'
 import { ListGroup } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
+import { SpellcheckSettingButtonGroup } from './spellcheck-setting-button-group'
 
 /**
  * Shows the editor specific settings.
@@ -32,6 +33,9 @@ export const EditorSettingsTabContent: React.FC = () => {
       <SettingLine i18nKey={'editor.lineWrapping'}>
         <LineWrappingSettingButtonGroup />
       </SettingLine>
+      <SettingLine i18nKey={'editor.spellCheck'}>
+        <SpellcheckSettingButtonGroup />
+      </SettingLine>
     </ListGroup>
   )
 }

frontend/src/components/global-dialogs/settings-dialog/editor/spellcheck-setting-button-group.tsx

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { useApplicationState } from '../../../../hooks/common/use-application-state'
+import { setEditorSpellCheck } from '../../../../redux/editor/methods'
+import { OnOffButtonGroup } from '../utils/on-off-button-group'
+import React from 'react'
+
+/**
+ * Allows to change whether spellchecking is enabled or not in the editor.
+ */
+export const SpellcheckSettingButtonGroup: React.FC = () => {
+  const enabled = useApplicationState((state) => state.editorConfig.spellCheck)
+  return <OnOffButtonGroup value={enabled} onSelect={setEditorSpellCheck} />
+}

frontend/src/redux/editor/methods.ts

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -9,7 +9,8 @@ import type {
   SetEditorLigaturesAction,
   SetEditorLineWrappingAction,
   SetEditorSmartPasteAction,
-  SetEditorSyncScrollAction
+  SetEditorSyncScrollAction,
+  SetEditorSpellCheckAction
 } from './types'
 import { EditorConfigActionType } from './types'
 
@@ -45,6 +46,14 @@ export const setEditorSmartPaste = (smartPaste: boolean): void => {
   store.dispatch(action)
 }
 
+export const setEditorSpellCheck = (spellCheck: boolean): void => {
+  const action: SetEditorSpellCheckAction = {
+    type: EditorConfigActionType.SET_SPELL_CHECK,
+    spellCheck
+  }
+  store.dispatch(action)
+}
+
 export const loadFromLocalStorage = (): void => {
   const action: LoadFromLocalStorageAction = {
     type: EditorConfigActionType.LOAD_FROM_LOCAL_STORAGE

frontend/src/redux/editor/reducers.ts

@@ -14,7 +14,7 @@ export const initialState: EditorConfig = {
   ligatures: true,
   syncScroll: true,
   smartPaste: true,
-  spellCheck: false,
+  spellCheck: true,
   lineWrapping: true
 }
 

frontend/src/redux/editor/types.ts

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -28,7 +28,7 @@ export type EditorConfigActions =
   | SetEditorLigaturesAction
   | SetEditorSmartPasteAction
   | SetEditorLineWrappingAction
-  | SetSpellCheckAction
+  | SetEditorSpellCheckAction
   | LoadFromLocalStorageAction
 
 export interface LoadFromLocalStorageAction extends Action<EditorConfigActionType> {
@@ -55,7 +55,7 @@ export interface SetEditorSmartPasteAction extends Action<EditorConfigActionType
   smartPaste: boolean
 }
 
-export interface SetSpellCheckAction extends Action<EditorConfigActionType> {
+export interface SetEditorSpellCheckAction extends Action<EditorConfigActionType> {
   type: EditorConfigActionType.SET_SPELL_CHECK
   spellCheck: boolean
 }