Save editor preferences to localStorage (#541 / #553)

* Added editor-preferences to redux store

* Add local-storage saving and retrieval of EditorConfig

* Change import to be in a single line

* Add equality check to redux-selector (as suggested by @mrdrogdrog)

* Save and load editor-config to/from localStorage
This commit is contained in:
Erik Michelson 2020-09-09 11:22:52 +02:00 committed by GitHub
parent a86d4cbc58
commit f636e5ec10
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 90 additions and 29 deletions

View file

@ -20,6 +20,7 @@ import 'codemirror/keymap/emacs'
import 'codemirror/keymap/sublime'
import 'codemirror/keymap/vim'
import 'codemirror/mode/gfm/gfm'
import equal from 'fast-deep-equal'
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { Controlled as ControlledCodeMirror } from 'react-codemirror2'
import { useTranslation } from 'react-i18next'
@ -60,12 +61,7 @@ export const EditorPane: React.FC<EditorPaneProps & ScrollProps> = ({ onContentC
const maxLengthWarningAlreadyShown = useRef(false)
const [editor, setEditor] = useState<Editor>()
const [statusBarInfo, setStatusBarInfo] = useState<StatusBarInfo>(defaultState)
const [editorPreferences, setEditorPreferences] = useState<EditorConfiguration>({
theme: 'one-dark',
keyMap: 'sublime',
indentUnit: 4,
indentWithTabs: false
})
const editorPreferences = useSelector((state: ApplicationState) => state.editorConfig.preferences, equal)
const lastScrollPosition = useRef<number>()
const [editorScroll, setEditorScroll] = useState<ScrollInfo>()
@ -158,8 +154,6 @@ export const EditorPane: React.FC<EditorPaneProps & ScrollProps> = ({ onContentC
<MaxLengthWarningModal show={showMaxLengthWarning} onHide={() => setShowMaxLengthWarning(false)} maxLength={maxLength}/>
<ToolBar
editor={editor}
onPreferencesChange={config => setEditorPreferences(config)}
editorPreferences={editorPreferences}
/>
<ControlledCodeMirror
className="overflow-hidden w-100 flex-fill"