Allow to choose space as a indentation character (#1177)

packages/insomnia-app/app/models/settings.js

@@ -11,6 +11,7 @@ type BaseSettings = {
   editorIndentSize: number,
   editorLineWrapping: boolean,
   editorKeyMap: string,
+  editorIndentWithTabs: boolean,
   httpProxy: string,
   httpsProxy: string,
   noProxy: string,
@@ -45,6 +46,7 @@ export function init(): BaseSettings {
     editorIndentSize: 2,
     editorLineWrapping: true,
     editorKeyMap: 'default',
+    editorIndentWithTabs: true,
     httpProxy: '',
     httpsProxy: '',
     noProxy: '',

packages/insomnia-app/app/ui/components/codemirror/code-editor.js

@@ -288,7 +288,7 @@ class CodeEditor extends React.Component {
     if (!this.codeMirror.getOption('indentWithTabs')) {
       this.codeMirror.setOption('extraKeys', {
         Tab: cm => {
-          const spaces = new Array(this.codeMirror.getOption('indentUnit') + 1).join(' ');
+          const spaces = this._indentChars();
           cm.replaceSelection(spaces);
         }
       });
@@ -353,6 +353,10 @@ class CodeEditor extends React.Component {
     return mode.indexOf('xml') !== -1;
   }
 
+  _indentChars() {
+    return this.codeMirror.getOption('indentWithTabs') ? '\t' : new Array(this.codeMirror.getOption('indentUnit') + 1).join(' ');
+  }
+
   _handleBeautify() {
     this._prettify(this.codeMirror.getValue());
   }
@@ -375,7 +379,7 @@ class CodeEditor extends React.Component {
         }
       }
 
-      return prettify.json(jsonString, '\t', this.props.autoPrettify);
+      return prettify.json(jsonString, this._indentChars(), this.props.autoPrettify);
     } catch (e) {
       // That's Ok, just leave it
       return code;
@@ -394,7 +398,7 @@ class CodeEditor extends React.Component {
     }
 
     try {
-      return vkBeautify.xml(code, '\t');
+      return vkBeautify.xml(code, this._indentChars());
     } catch (e) {
       // Failed to parse so just return original
       return code;
@@ -422,6 +426,7 @@ class CodeEditor extends React.Component {
       noStyleActiveLine,
       noLint,
       indentSize,
+      indentWithTabs,
       dynamicHeight,
       hintOptions,
       infoOptions,
@@ -448,6 +453,7 @@ class CodeEditor extends React.Component {
       lineNumbers: !hideGutters && !hideLineNumbers,
       foldGutter: !hideGutters && !hideLineNumbers,
       lineWrapping: lineWrapping,
+      indentWithTabs: indentWithTabs,
       matchBrackets: !noMatchBrackets,
       lint: !noLint && !readOnly,
       gutters: []

packages/insomnia-app/app/ui/components/editors/body/body-editor.js

@@ -182,6 +182,7 @@ class BodyEditor extends React.PureComponent<Props> {
           indentSize={settings.editorIndentSize}
           keyMap={settings.editorKeyMap}
           lineWrapping={settings.editorLineWrapping}
+          indentWithTabs={settings.editorIndentWithTabs}
           contentType={contentType || 'text/plain'}
           content={request.body.text || ''}
           render={handleRender}

packages/insomnia-app/app/ui/components/editors/body/raw-editor.js

@@ -15,6 +15,7 @@ class RawEditor extends PureComponent {
       indentSize,
       keyMap,
       lineWrapping,
+      indentWithTabs,
       nunjucksPowerUserMode,
       onChange,
       render,
@@ -27,6 +28,7 @@ class RawEditor extends PureComponent {
         uniquenessKey={uniquenessKey}
         fontSize={fontSize}
         indentSize={indentSize}
+        indentWithTabs={indentWithTabs}
         keyMap={keyMap}
         defaultValue={content}
         className={className}
@@ -57,7 +59,8 @@ RawEditor.propTypes = {
   // Optional
   className: PropTypes.string,
   render: PropTypes.func,
-  getRenderContext: PropTypes.func
+  getRenderContext: PropTypes.func,
+  indentWithTabs: PropTypes.bool
 };
 
 export default RawEditor;

packages/insomnia-app/app/ui/components/settings/general.js

@@ -144,6 +144,18 @@ class General extends React.PureComponent<Props> {
           </label>
         </div>
 
+        <div className="form-control form-control--thin">
+          <label className="inline-block">
+            Indent With Tabs
+            <input
+              type="checkbox"
+              name="editorIndentWithTabs"
+              checked={settings.editorIndentWithTabs}
+              onChange={this._handleUpdateSetting}
+            />
+          </label>
+        </div>
+
         <div className="form-control form-control--outlined pad-top-sm">
           <label>
             Environment Highlight Color Style{' '}