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

src/components/editor/editor-pane/editor-pane.tsx

@@ -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"

src/components/editor/editor-pane/tool-bar/editor-preferences/editor-preferences.tsx

@@ -1,23 +1,23 @@
 import { EditorConfiguration } from 'codemirror'
+import equal from 'fast-deep-equal'
 import React, { Fragment, useCallback, useState } from 'react'
 import { Button, Form, ListGroup } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
+import { useSelector } from 'react-redux'
+import { ApplicationState } from '../../../../../redux'
+import { setEditorPreferences } from '../../../../../redux/editor/methods'
 import { ForkAwesomeIcon } from '../../../../common/fork-awesome/fork-awesome-icon'
 import { CommonModal } from '../../../../common/modals/common-modal'
 import { EditorPreferenceProperty, EditorPreferenceSelect } from './editor-preference-select'
 
-export interface EditorSettingsButtonProps {
-  preferences: EditorConfiguration
-  onPreferencesChange: (config: EditorConfiguration) => void
-}
-
-export const EditorPreferences: React.FC<EditorSettingsButtonProps> = ({ onPreferencesChange, preferences }) => {
+export const EditorPreferences: React.FC = () => {
   const { t } = useTranslation()
   const [showModal, setShowModal] = useState(false)
+  const preferences = useSelector((state: ApplicationState) => state.editorConfig.preferences, equal)
 
   const sendPreferences = useCallback((newPreferences: EditorConfiguration) => {
-    onPreferencesChange(newPreferences)
-  }, [onPreferencesChange])
+    setEditorPreferences(newPreferences)
+  }, [])
 
   return (
     <Fragment>

src/components/editor/editor-pane/tool-bar/tool-bar.tsx

@@ -1,4 +1,4 @@
-import { Editor, EditorConfiguration } from 'codemirror'
+import { Editor } from 'codemirror'
 import React from 'react'
 import { Button, ButtonGroup, ButtonToolbar } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
@@ -28,11 +28,9 @@ import {
 
 export interface ToolBarProps {
   editor: Editor | undefined
-  onPreferencesChange: (config: EditorConfiguration) => void
-  editorPreferences: EditorConfiguration
 }
 
-export const ToolBar: React.FC<ToolBarProps> = ({ editor, onPreferencesChange, editorPreferences }) => {
+export const ToolBar: React.FC<ToolBarProps> = ({ editor }) => {
   const { t } = useTranslation()
 
   const notImplemented = () => {
@@ -109,7 +107,7 @@ export const ToolBar: React.FC<ToolBarProps> = ({ editor, onPreferencesChange, e
         <EmojiPickerButton editor={editor}/>
       </ButtonGroup>
       <ButtonGroup className={'mx-1 flex-wrap'}>
-        <EditorPreferences onPreferencesChange={onPreferencesChange} preferences={editorPreferences}/>
+        <EditorPreferences/>
       </ButtonGroup>
     </ButtonToolbar>
   )