github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-25 03:06:31 -05:00
Code Issues Projects Releases Packages Wiki Activity

feat(editor): extract the spell check codemirror extension into separate hook

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-03-08 17:12:13 +01:00
parent 25fbfdbea8
commit a50ac40ae6
2 changed files with 22 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/components/editor-page/editor-pane/editor-pane.tsx
View file

@ -13,6 +13,7 @@ import type { ScrollProps } from '../synced-scroll/scroll-props'
import styles from './extended-codemirror/codemirror.module.scss' import styles from './extended-codemirror/codemirror.module.scss'
import { useCodeMirrorFileInsertExtension } from './hooks/code-mirror-extensions/use-code-mirror-file-insert-extension' 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 { 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 { 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 { useCodeMirrorTablePasteExtension } from './hooks/table-paste/use-code-mirror-table-paste-extension'
import { useApplyScrollState } from './hooks/use-apply-scroll-state' 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 editorScrollExtension = useCodeMirrorScrollWatchExtension(onScroll)
const tablePasteExtensions = useCodeMirrorTablePasteExtension() const tablePasteExtensions = useCodeMirrorTablePasteExtension()
const fileInsertExtension = useCodeMirrorFileInsertExtension() const fileInsertExtension = useCodeMirrorFileInsertExtension()
const spellCheckExtension = useCodeMirrorSpellCheckExtension()
const cursorActivityExtension = useCursorActivityCallback() const cursorActivityExtension = useCursorActivityCallback()
const codeMirrorRef = useCodeMirrorReference() const codeMirrorRef = useCodeMirrorReference()
@ -84,7 +86,6 @@ export const EditorPane: React.FC<ScrollProps> = ({ scrollState, onScroll, onMak
const yjsExtension = useCodeMirrorYjsExtension(yText, awareness) const yjsExtension = useCodeMirrorYjsExtension(yText, awareness)
const [firstEditorUpdateExtension, firstUpdateHappened] = useOnFirstEditorUpdateExtension() const [firstEditorUpdateExtension, firstUpdateHappened] = useOnFirstEditorUpdateExtension()
useInsertNoteContentIntoYTextInMockModeEffect(firstUpdateHappened, websocketConnection) useInsertNoteContentIntoYTextInMockModeEffect(firstUpdateHappened, websocketConnection)
const spellCheck = useApplicationState((state) => state.editorConfig.spellCheck)
const linter = useLinter() const linter = useLinter()
const extensions = useMemo( const extensions = useMemo(
@ -104,7 +105,7 @@ export const EditorPane: React.FC<ScrollProps> = ({ scrollState, onScroll, onMak
updateViewContext, updateViewContext,
yjsExtension, yjsExtension,
firstEditorUpdateExtension, firstEditorUpdateExtension,
EditorView.contentAttributes.of({ spellcheck: String(spellCheck) }) spellCheckExtension
], ],
[ [
linter, linter,
@ -115,7 +116,7 @@ export const EditorPane: React.FC<ScrollProps> = ({ scrollState, onScroll, onMak
updateViewContext, updateViewContext,
yjsExtension, yjsExtension,
firstEditorUpdateExtension, firstEditorUpdateExtension,
spellCheck spellCheckExtension
] ]
) )

18
frontend/src/components/editor-page/editor-pane/hooks/code-mirror-extensions/use-code-mirror-spell-check-extension.ts Normal file
View file

@ -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])
}