From b9861beaa528995ae0d09db76219e571e82bdf7f Mon Sep 17 00:00:00 2001
From: Egor Komarov <odrin666@gmail.com>
Date: Wed, 28 Mar 2018 14:51:20 +0300
Subject: [PATCH 1/4] ignore

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 83939792..481960da 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
 dist/
 node_modules/
 thumbs.db
+/.idea

From 24615253de404182b46519dbcf87c5860c919f74 Mon Sep 17 00:00:00 2001
From: Egor Komarov <odrin666@gmail.com>
Date: Wed, 28 Mar 2018 15:42:24 +0300
Subject: [PATCH 2/4] use tab; tab size; indent size;

---
 src/components/FileEditor/index.js    | 28 ++++++++++++++++++---
 src/components/SettingsModal/index.js | 36 +++++++++++++++++++++++++++
 2 files changed, 60 insertions(+), 4 deletions(-)

diff --git a/src/components/FileEditor/index.js b/src/components/FileEditor/index.js
index 52a1cdd6..16b171f4 100644
--- a/src/components/FileEditor/index.js
+++ b/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),
     }
   },
   {
@@ -123,6 +126,15 @@ class FileEditor extends Component {
     if (prevProps.snippets !== this.props.snippets) {
       this.initEditor()
     }
+    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() {
@@ -173,7 +185,15 @@ class FileEditor extends Component {
       return
     }
 
-    const { wrapLines, highlightTag, lightTheme, snippets } = this.props
+    const {
+      wrapLines,
+      highlightTag,
+      lightTheme,
+      snippets,
+      useTab,
+      tabSize,
+      indentSize,
+    } = this.props
 
     if (this._codeMirror) {
       this._codeMirror.toTextArea()
@@ -183,9 +203,9 @@ class FileEditor extends Component {
     this._codeMirror = CodeMirror.fromTextArea(this._textarea, {
       dragDrop: false,
       matchTags: highlightTag ? { bothTags: true } : undefined,
-      indentUnit: 2,
-      tabSize: 2,
-      indentWithTabs: false,
+      indentUnit: indentSize,
+      tabSize: tabSize,
+      indentWithTabs: useTab,
       mode: 'xml',
       lineNumbers: true,
       theme: lightTheme ? 'neo' : 'one-dark',
diff --git a/src/components/SettingsModal/index.js b/src/components/SettingsModal/index.js
index 098705dc..19d66c99 100644
--- a/src/components/SettingsModal/index.js
+++ b/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}>

From 10801e7113b6dc4be0f57579890ca3d739ee0665 Mon Sep 17 00:00:00 2001
From: Egor Komarov <odrin666@gmail.com>
Date: Wed, 28 Mar 2018 15:49:16 +0300
Subject: [PATCH 3/4] fix lint error

---
 src/components/FileEditor/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FileEditor/index.js b/src/components/FileEditor/index.js
index 16b171f4..950d7de1 100644
--- a/src/components/FileEditor/index.js
+++ b/src/components/FileEditor/index.js
@@ -201,10 +201,10 @@ class FileEditor extends Component {
     }
 
     this._codeMirror = CodeMirror.fromTextArea(this._textarea, {
+      tabSize,
       dragDrop: false,
       matchTags: highlightTag ? { bothTags: true } : undefined,
       indentUnit: indentSize,
-      tabSize: tabSize,
       indentWithTabs: useTab,
       mode: 'xml',
       lineNumbers: true,

From 8671aaa07d035edfa1656e3dc5d22d9bf9338d3b Mon Sep 17 00:00:00 2001
From: Egor Komarov <odrin666@gmail.com>
Date: Wed, 28 Mar 2018 17:14:16 +0300
Subject: [PATCH 4/4] settings defaults

---
 src/actions/settings.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/actions/settings.js b/src/actions/settings.js
index 6fdcf6cf..33d969cc 100644
--- a/src/actions/settings.js
+++ b/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,