feat: add spell check (#2236)

Signed-off-by: Philip Molares <philip.molares@udo.edu>

src/components/editor-page/editor-pane/editor-pane.tsx

@@ -84,6 +84,7 @@ export const EditorPane: React.FC<ScrollProps> = ({ scrollState, onScroll, onMak
   const yjsExtension = useCodeMirrorYjsExtension(yText, awareness)
   const [firstEditorUpdateExtension, firstUpdateHappened] = useOnFirstEditorUpdateExtension()
   useInsertNoteContentIntoYTextInMockModeEffect(firstUpdateHappened, websocketConnection)
+  const spellCheck = useApplicationState((state) => state.editorConfig.spellCheck)
 
   // ToDo: Don't initialize new extension array here, instead refactor to global extension array
   const markdownExtensionsLinters = useMemo(() => {
@@ -114,7 +115,8 @@ export const EditorPane: React.FC<ScrollProps> = ({ scrollState, onScroll, onMak
       cursorActivityExtension,
       updateViewContext,
       yjsExtension,
-      firstEditorUpdateExtension
+      firstEditorUpdateExtension,
+      EditorView.contentAttributes.of({ spellcheck: String(spellCheck) })
     ],
     [
       linter,
@@ -124,7 +126,8 @@ export const EditorPane: React.FC<ScrollProps> = ({ scrollState, onScroll, onMak
       cursorActivityExtension,
       updateViewContext,
       yjsExtension,
-      firstEditorUpdateExtension
+      firstEditorUpdateExtension,
+      spellCheck
     ]
   )
 

src/redux/editor/reducers.ts

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -14,7 +14,8 @@ const initialState: EditorConfig = {
   editorMode: EditorMode.BOTH,
   ligatures: true,
   syncScroll: true,
-  smartPaste: true
+  smartPaste: true,
+  spellCheck: false
 }
 
 const getInitialState = (): EditorConfig => {
@@ -55,6 +56,13 @@ export const EditorConfigReducer: Reducer<EditorConfig, EditorConfigActions> = (
       }
       saveToLocalStorage(newState)
       return newState
+    case EditorConfigActionType.SET_SPELL_CHECK:
+      newState = {
+        ...state,
+        spellCheck: action.spellCheck
+      }
+      saveToLocalStorage(newState)
+      return newState
     default:
       return state
   }

src/redux/editor/types.ts

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -11,7 +11,8 @@ export enum EditorConfigActionType {
   SET_EDITOR_VIEW_MODE = 'editor/view-mode/set',
   SET_SYNC_SCROLL = 'editor/syncScroll/set',
   SET_LIGATURES = 'editor/preferences/setLigatures',
-  SET_SMART_PASTE = 'editor/preferences/setSmartPaste'
+  SET_SMART_PASTE = 'editor/preferences/setSmartPaste',
+  SET_SPELL_CHECK = 'editor/preferences/setSpellCheck'
 }
 
 export interface EditorConfig {
@@ -19,6 +20,7 @@ export interface EditorConfig {
   syncScroll: boolean
   ligatures: boolean
   smartPaste: boolean
+  spellCheck: boolean
 }
 
 export type EditorConfigActions =
@@ -26,6 +28,7 @@ export type EditorConfigActions =
   | SetEditorLigaturesAction
   | SetEditorSmartPasteAction
   | SetEditorViewModeAction
+  | SetSpellCheckAction
 
 export interface SetEditorSyncScrollAction extends Action<EditorConfigActionType> {
   type: EditorConfigActionType.SET_SYNC_SCROLL
@@ -46,3 +49,8 @@ export interface SetEditorViewModeAction extends Action<EditorConfigActionType>
   type: EditorConfigActionType.SET_EDITOR_VIEW_MODE
   mode: EditorMode
 }
+
+export interface SetSpellCheckAction extends Action<EditorConfigActionType> {
+  type: EditorConfigActionType.SET_SPELL_CHECK
+  spellCheck: boolean
+}