From a50ac40ae64c759f3eb6ebc0416364f4643ed38a Mon Sep 17 00:00:00 2001
From: Tilman Vatteroth <git@tilmanvatteroth.de>
Date: Wed, 8 Mar 2023 17:12:13 +0100
Subject: [PATCH] feat(editor): extract the spell check codemirror extension
 into separate hook

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
---
 .../editor-page/editor-pane/editor-pane.tsx    |  7 ++++---
 .../use-code-mirror-spell-check-extension.ts   | 18 ++++++++++++++++++
 2 files changed, 22 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/editor-page/editor-pane/hooks/code-mirror-extensions/use-code-mirror-spell-check-extension.ts

diff --git a/frontend/src/components/editor-page/editor-pane/editor-pane.tsx b/frontend/src/components/editor-page/editor-pane/editor-pane.tsx
index 935461447..6c4510617 100644
--- a/frontend/src/components/editor-page/editor-pane/editor-pane.tsx
+++ b/frontend/src/components/editor-page/editor-pane/editor-pane.tsx
@@ -13,6 +13,7 @@ import type { ScrollProps } from '../synced-scroll/scroll-props'
 import styles from './extended-codemirror/codemirror.module.scss'
 import { useCodeMirrorFileInsertExtension } from './hooks/code-mirror-extensions/use-code-mirror-file-insert-extension'
 import { useCodeMirrorScrollWatchExtension } from './hooks/code-mirror-extensions/use-code-mirror-scroll-watch-extension'
+import { useCodeMirrorSpellCheckExtension } from './hooks/code-mirror-extensions/use-code-mirror-spell-check-extension'
 import { useOnImageUploadFromRenderer } from './hooks/image-upload-from-renderer/use-on-image-upload-from-renderer'
 import { useCodeMirrorTablePasteExtension } from './hooks/table-paste/use-code-mirror-table-paste-extension'
 import { useApplyScrollState } from './hooks/use-apply-scroll-state'
@@ -59,6 +60,7 @@ export const EditorPane: React.FC<ScrollProps> = ({ scrollState, onScroll, onMak
   const editorScrollExtension = useCodeMirrorScrollWatchExtension(onScroll)
   const tablePasteExtensions = useCodeMirrorTablePasteExtension()
   const fileInsertExtension = useCodeMirrorFileInsertExtension()
+  const spellCheckExtension = useCodeMirrorSpellCheckExtension()
   const cursorActivityExtension = useCursorActivityCallback()
 
   const codeMirrorRef = useCodeMirrorReference()
@@ -84,7 +86,6 @@ 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)
   const linter = useLinter()
 
   const extensions = useMemo(
@@ -104,7 +105,7 @@ export const EditorPane: React.FC<ScrollProps> = ({ scrollState, onScroll, onMak
       updateViewContext,
       yjsExtension,
       firstEditorUpdateExtension,
-      EditorView.contentAttributes.of({ spellcheck: String(spellCheck) })
+      spellCheckExtension
     ],
     [
       linter,
@@ -115,7 +116,7 @@ export const EditorPane: React.FC<ScrollProps> = ({ scrollState, onScroll, onMak
       updateViewContext,
       yjsExtension,
       firstEditorUpdateExtension,
-      spellCheck
+      spellCheckExtension
     ]
   )
 
diff --git a/frontend/src/components/editor-page/editor-pane/hooks/code-mirror-extensions/use-code-mirror-spell-check-extension.ts b/frontend/src/components/editor-page/editor-pane/hooks/code-mirror-extensions/use-code-mirror-spell-check-extension.ts
new file mode 100644
index 000000000..8a73734cb
--- /dev/null
+++ b/frontend/src/components/editor-page/editor-pane/hooks/code-mirror-extensions/use-code-mirror-spell-check-extension.ts
@@ -0,0 +1,18 @@
+/*
+ * 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 type { Extension } from '@codemirror/state'
+import { EditorView } from '@codemirror/view'
+import { useMemo } from 'react'
+
+/**
+ * Creates a {@link Extension codemirror extension} that activates or deactivates the browser spell check.
+ */
+export const useCodeMirrorSpellCheckExtension = (): Extension => {
+  const spellCheck = useApplicationState((state) => state.editorConfig.spellCheck)
+
+  return useMemo(() => EditorView.contentAttributes.of({ spellcheck: String(spellCheck) }), [spellCheck])
+}