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': '',
}