Merge pull request #232 from Odrin/feature/editor-indent-settings

Move CodeMirror indent settings to app settings

Author: meriadec

.gitignore

@@ -2,3 +2,4 @@
 dist/
 node_modules/
 thumbs.db
+/.idea

src/actions/settings.js

@@ -33,6 +33,9 @@ export function loadSettings() {
         foldLevel: 1,
         highlightTag: false,
         lightTheme: false,
+        useTab: false,
+        tabSize: 2,
+        indentSize: 2,
       },
       mjml: {
         minify: false,

src/components/FileEditor/index.js

@@ -62,6 +62,9 @@ function beautify(content) {
       lightTheme: settings.getIn(['editor', 'lightTheme'], false),
       errors: get(preview, 'errors', []),
       snippets: settings.get('snippets'),
+      useTab: settings.getIn(['editor', 'useTab'], false),
+      tabSize: settings.getIn(['editor', 'tabSize'], 2),
+      indentSize: settings.getIn(['editor', 'indentSize'], 2),
     }
   },
   {
@@ -120,6 +123,15 @@ class FileEditor extends Component {
     if (prevProps.lightTheme !== this.props.lightTheme) {
       this._codeMirror.setOption('theme', this.props.lightTheme ? 'neo' : 'one-dark')
     }
+    if (prevProps.useTab !== this.props.useTab) {
+      this._codeMirror.setOption('indentWithTabs', this.props.useTab)
+    }
+    if (prevProps.tabSize !== this.props.tabSize) {
+      this._codeMirror.setOption('tabSize', this.props.tabSize)
+    }
+    if (prevProps.indentSize !== this.props.indentSize) {
+      this._codeMirror.setOption('indentUnit', this.props.indentSize)
+    }
   }
 
   componentWillUnmount() {
@@ -170,19 +182,26 @@ class FileEditor extends Component {
       return
     }
 
-    const { wrapLines, highlightTag, lightTheme } = this.props
+    const {
+      wrapLines,
+      highlightTag,
+      lightTheme,
+      useTab,
+      tabSize,
+      indentSize,
+    } = this.props
 
     if (this._codeMirror) {
       this._codeMirror.toTextArea()
       this._codeMirror = null
     }
 
     this._codeMirror = CodeMirror.fromTextArea(this._textarea, {
+      tabSize,
       dragDrop: false,
       matchTags: highlightTag ? { bothTags: true } : undefined,
-      indentUnit: 2,
-      tabSize: 2,
-      indentWithTabs: false,
+      indentUnit: indentSize,
+      indentWithTabs: useTab,
       mode: 'xml',
       lineNumbers: true,
       theme: lightTheme ? 'neo' : 'one-dark',

src/components/SettingsModal/index.js

@@ -94,6 +94,9 @@ class SettingsModal extends Component {
     const editorLightTheme = settings.getIn(['editor', 'lightTheme'], false)
     const minifyOutput = settings.getIn(['mjml', 'minify'], false)
     const beautifyOutput = settings.getIn(['mjml', 'beautify'], false)
+    const editorUseTab = settings.getIn(['editor', 'useTab'], false)
+    const editorTabSize = settings.getIn(['editor', 'tabSize'], 2)
+    const editorIndentSize = settings.getIn(['editor', 'indentSize'], 2)
 
     return (
       <Modal
@@ -156,6 +159,39 @@ class SettingsModal extends Component {
                   />
                 </div>
               </CheckBox>
+              <CheckBox value={editorUseTab} onChange={this.changeEditorSetting('useTab')}>
+                <div>{'User tab character'}</div>
+                <div className="mt-5">
+                  {'Tab size:'}
+                  <input
+                    className="ml-5"
+                    type="number"
+                    min={1}
+                    style={{ width: 80 }}
+                    value={editorTabSize}
+                    onClick={e => {
+                      e.preventDefault()
+                      e.stopPropagation()
+                    }}
+                    onChange={e => this.changeEditorSetting('tabSize')(Number(e.target.value))}
+                  />
+                </div>
+              </CheckBox>
+              <div className="mt-5">
+                {'Indent size:'}
+                <input
+                  className="ml-5"
+                  type="number"
+                  min={1}
+                  style={{ width: 80 }}
+                  value={editorIndentSize}
+                  onClick={e => {
+                    e.preventDefault()
+                    e.stopPropagation()
+                  }}
+                  onChange={e => this.changeEditorSetting('indentSize')(Number(e.target.value))}
+                />
+              </div>
             </TabItem>
 
             <TabItem title="Preview" className="flow-v-10" icon={IconPreview}>