mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-21 10:45:20 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add setting for line wrapping

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-04-05 19:23:10 +02:00
parent 4790c7cd1b
commit e368203e16
8 changed files with 74 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

8
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 { useCodeMirrorAutocompletionsExtension } from './hooks/codemirror-extensions/use-code-mirror-autocompletions-extension'
import { useCodeMirrorFileInsertExtension } from './hooks/codemirror-extensions/use-code-mirror-file-insert-extension'
import { useCodeMirrorLineWrappingExtension } from './hooks/codemirror-extensions/use-code-mirror-line-wrapping-extension'
import { useCodeMirrorRemoteCursorsExtension } from './hooks/codemirror-extensions/use-code-mirror-remote-cursor-extensions'
import { useCodeMirrorScrollWatchExtension } from './hooks/codemirror-extensions/use-code-mirror-scroll-watch-extension'
import { useCodeMirrorSpellCheckExtension } from './hooks/codemirror-extensions/use-code-mirror-spell-check-extension'
@ -39,7 +40,6 @@ import { markdown, markdownLanguage } from '@codemirror/lang-markdown'
import { languages } from '@codemirror/language-data'
import { lintGutter } from '@codemirror/lint'
import { oneDark } from '@codemirror/theme-one-dark'
import { EditorView } from '@codemirror/view'
import ReactCodeMirror from '@uiw/react-codemirror'
import React, { useEffect, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
@ -67,6 +67,7 @@ export const EditorPane: React.FC<EditorPaneProps> = ({ scrollState, onScroll, o
const tablePasteExtensions = useCodeMirrorTablePasteExtension()
const fileInsertExtension = useCodeMirrorFileInsertExtension()
const spellCheckExtension = useCodeMirrorSpellCheckExtension()
const lineWrappingExtension = useCodeMirrorLineWrappingExtension()
const cursorActivityExtension = useCursorActivityCallback()
const autoCompletionExtension = useCodeMirrorAutocompletionsExtension()
@ -95,7 +96,7 @@ export const EditorPane: React.FC<EditorPaneProps> = ({ scrollState, onScroll, o
codeLanguages: (input) => findLanguageByCodeBlockName(languages, input)
}),
remoteCursorsExtension,
EditorView.lineWrapping,
lineWrappingExtension,
editorScrollExtension,
tablePasteExtensions,
fileInsertExtension,
@ -115,7 +116,8 @@ export const EditorPane: React.FC<EditorPaneProps> = ({ scrollState, onScroll, o
cursorActivityExtension,
updateViewContextExtension,
yjsExtension,
spellCheckExtension
spellCheckExtension,
lineWrappingExtension
]
)

18
frontend/src/components/editor-page/editor-pane/hooks/codemirror-extensions/use-code-mirror-line-wrapping-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 line wrapping.
*/
export const useCodeMirrorLineWrappingExtension = (): Extension => {
const lineWrapping = useApplicationState((state) => state.editorConfig.lineWrapping)
return useMemo(() => (lineWrapping ? EditorView.lineWrapping : []), [lineWrapping])
}

4
frontend/src/components/layout/settings-dialog/editor/editor-settings-tab-content.tsx
View file

@ -5,6 +5,7 @@
*/
import { SettingLine } from '../utils/setting-line'
import { LigatureSettingButtonGroup } from './ligature-setting-button-group'
import { LineWrappingSettingButtonGroup } from './line-wrapping-setting-button-group'
import { SmartPasteSettingButtonGroup } from './smart-paste-setting-button-group'
import { SyncScrollSettingButtonGroup } from './sync-scroll-setting-button-group'
import React from 'react'
@ -28,6 +29,9 @@ export const EditorSettingsTabContent: React.FC = () => {
<SettingLine i18nKey={'editor.syncScroll'}>
<SyncScrollSettingButtonGroup />
</SettingLine>
<SettingLine i18nKey={'editor.lineWrapping'}>
<LineWrappingSettingButtonGroup />
</SettingLine>
</ListGroup>
)
}

17
frontend/src/components/layout/settings-dialog/editor/line-wrapping-setting-button-group.tsx Normal file
View file

@ -0,0 +1,17 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useApplicationState } from '../../../../hooks/common/use-application-state'
import { setEditorLineWrapping } from '../../../../redux/editor/methods'
import { OnOffButtonGroup } from '../utils/on-off-button-group'
import React from 'react'
/**
* Allows to change if line wrapping should be used or not in the editor.
*/
export const LineWrappingSettingButtonGroup: React.FC = () => {
const enabled = useApplicationState((state) => state.editorConfig.lineWrapping)
return <OnOffButtonGroup value={enabled} onSelect={setEditorLineWrapping} />
}