diff --git a/client/src/Editor.tsx b/client/src/Editor.tsx index 3b472961..2c696579 100644 --- a/client/src/Editor.tsx +++ b/client/src/Editor.tsx @@ -78,7 +78,8 @@ const Editor: React.FC<{setRestart?, onDidChangeContent?, value: string, theme: }, tabSize: 2, 'semanticHighlighting.enabled': true, - theme: 'vs' + theme: 'vs', + wordWrap: config.wordWrap }) setEditor(editor) const abbrevRewriter = new AbbreviationRewriter(new AbbreviationProvider(), model, editor) @@ -87,7 +88,7 @@ const Editor: React.FC<{setRestart?, onDidChangeContent?, value: string, theme: model.dispose(); abbrevRewriter.dispose(); } - }, []) + }, [config.wordWrap]) useEffect(() => { const socketUrl = ((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "/websocket" + "/" + project diff --git a/client/src/Settings.tsx b/client/src/Settings.tsx index e5027c00..e80e04b8 100644 --- a/client/src/Settings.tsx +++ b/client/src/Settings.tsx @@ -23,12 +23,14 @@ const Settings: React.FC<{closeNav, theme, setTheme, project, setProject}> = If screen width is below 800, default to vertical layout instead. */ const {width, height} = useWindowDimensions() const [verticalLayout, setVerticalLayout] = React.useState(width < 800) + const [wordWrap, setWordWrap] = React.useState(false) const [customTheme, setCustomTheme] = React.useState('initial') // Synchronize state with initial local store useEffect(() => { let _abbreviationCharacter = window.localStorage.getItem("abbreviationCharacter") let _verticalLayout = window.localStorage.getItem("verticalLayout") + let _wordWrap = window.localStorage.getItem("wordWrap") let _theme = window.localStorage.getItem("theme") let _savingAllowed = window.localStorage.getItem("savingAllowed") let _customTheme = window.localStorage.getItem("customTheme") @@ -44,6 +46,10 @@ const Settings: React.FC<{closeNav, theme, setTheme, project, setProject}> = setTheme(_theme) setSavingAllowed(true) } + if (_wordWrap) { + setWordWrap(_wordWrap == "true") + setSavingAllowed(true) + } if (_customTheme) { setCustomTheme(_customTheme) setSavingAllowed(true) @@ -64,19 +70,22 @@ const Settings: React.FC<{closeNav, theme, setTheme, project, setProject}> = useEffect(() => { config.abbreviationCharacter = abbreviationCharacter config.verticalLayout = verticalLayout + config.wordWrap = wordWrap config.theme = theme if (savingAllowed) { window.localStorage.setItem("abbreviationCharacter", abbreviationCharacter) window.localStorage.setItem("verticalLayout", verticalLayout ? 'true' : 'false') + window.localStorage.setItem("wordWrap", wordWrap ? 'true' : 'false') window.localStorage.setItem("theme", theme) window.localStorage.setItem("customTheme", customTheme) } else { window.localStorage.removeItem("abbreviationCharacter") window.localStorage.removeItem("verticalLayout") + window.localStorage.removeItem("wordWrap") window.localStorage.removeItem("theme") window.localStorage.removeItem("customTheme") } - }, [savingAllowed, abbreviationCharacter, verticalLayout, theme]) + }, [savingAllowed, abbreviationCharacter, verticalLayout, wordWrap, theme]) const handleChangeSaving = (ev) => { if (ev.target.checked) { @@ -172,6 +181,10 @@ const Settings: React.FC<{closeNav, theme, setTheme, project, setProject}> =

+

+ {setWordWrap(!wordWrap)}} checked={wordWrap} /> + +

diff --git a/client/src/config/config.ts b/client/src/config/config.ts index fd9a3773..c37becae 100644 --- a/client/src/config/config.ts +++ b/client/src/config/config.ts @@ -7,6 +7,7 @@ export const config = { 'inputModeCustomTranslations': {}, 'eagerReplacementEnabled': true, 'verticalLayout': false, // value here irrelevant, will be overwritten with `width < 800` in Settings.tsx + 'wordWrap': false, 'theme': 'lightPlus', 'customTheme': '', }