Skip to content

Commit 2668035

Browse files
authored
Merge pull request #232 from Odrin/feature/editor-indent-settings
Move CodeMirror indent settings to app settings
2 parents c10d5b0 + 8e4e6e5 commit 2668035

File tree

4 files changed

+63
-4
lines changed

4 files changed

+63
-4
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@
22
dist/
33
node_modules/
44
thumbs.db
5+
/.idea

src/actions/settings.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,9 @@ export function loadSettings() {
3333
foldLevel: 1,
3434
highlightTag: false,
3535
lightTheme: false,
36+
useTab: false,
37+
tabSize: 2,
38+
indentSize: 2,
3639
},
3740
mjml: {
3841
minify: false,

src/components/FileEditor/index.js

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,9 @@ function beautify(content) {
6262
lightTheme: settings.getIn(['editor', 'lightTheme'], false),
6363
errors: get(preview, 'errors', []),
6464
snippets: settings.get('snippets'),
65+
useTab: settings.getIn(['editor', 'useTab'], false),
66+
tabSize: settings.getIn(['editor', 'tabSize'], 2),
67+
indentSize: settings.getIn(['editor', 'indentSize'], 2),
6568
}
6669
},
6770
{
@@ -120,6 +123,15 @@ class FileEditor extends Component {
120123
if (prevProps.lightTheme !== this.props.lightTheme) {
121124
this._codeMirror.setOption('theme', this.props.lightTheme ? 'neo' : 'one-dark')
122125
}
126+
if (prevProps.useTab !== this.props.useTab) {
127+
this._codeMirror.setOption('indentWithTabs', this.props.useTab)
128+
}
129+
if (prevProps.tabSize !== this.props.tabSize) {
130+
this._codeMirror.setOption('tabSize', this.props.tabSize)
131+
}
132+
if (prevProps.indentSize !== this.props.indentSize) {
133+
this._codeMirror.setOption('indentUnit', this.props.indentSize)
134+
}
123135
}
124136

125137
componentWillUnmount() {
@@ -170,19 +182,26 @@ class FileEditor extends Component {
170182
return
171183
}
172184

173-
const { wrapLines, highlightTag, lightTheme } = this.props
185+
const {
186+
wrapLines,
187+
highlightTag,
188+
lightTheme,
189+
useTab,
190+
tabSize,
191+
indentSize,
192+
} = this.props
174193

175194
if (this._codeMirror) {
176195
this._codeMirror.toTextArea()
177196
this._codeMirror = null
178197
}
179198

180199
this._codeMirror = CodeMirror.fromTextArea(this._textarea, {
200+
tabSize,
181201
dragDrop: false,
182202
matchTags: highlightTag ? { bothTags: true } : undefined,
183-
indentUnit: 2,
184-
tabSize: 2,
185-
indentWithTabs: false,
203+
indentUnit: indentSize,
204+
indentWithTabs: useTab,
186205
mode: 'xml',
187206
lineNumbers: true,
188207
theme: lightTheme ? 'neo' : 'one-dark',

src/components/SettingsModal/index.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,9 @@ class SettingsModal extends Component {
9494
const editorLightTheme = settings.getIn(['editor', 'lightTheme'], false)
9595
const minifyOutput = settings.getIn(['mjml', 'minify'], false)
9696
const beautifyOutput = settings.getIn(['mjml', 'beautify'], false)
97+
const editorUseTab = settings.getIn(['editor', 'useTab'], false)
98+
const editorTabSize = settings.getIn(['editor', 'tabSize'], 2)
99+
const editorIndentSize = settings.getIn(['editor', 'indentSize'], 2)
97100

98101
return (
99102
<Modal
@@ -156,6 +159,39 @@ class SettingsModal extends Component {
156159
/>
157160
</div>
158161
</CheckBox>
162+
<CheckBox value={editorUseTab} onChange={this.changeEditorSetting('useTab')}>
163+
<div>{'User tab character'}</div>
164+
<div className="mt-5">
165+
{'Tab size:'}
166+
<input
167+
className="ml-5"
168+
type="number"
169+
min={1}
170+
style={{ width: 80 }}
171+
value={editorTabSize}
172+
onClick={e => {
173+
e.preventDefault()
174+
e.stopPropagation()
175+
}}
176+
onChange={e => this.changeEditorSetting('tabSize')(Number(e.target.value))}
177+
/>
178+
</div>
179+
</CheckBox>
180+
<div className="mt-5">
181+
{'Indent size:'}
182+
<input
183+
className="ml-5"
184+
type="number"
185+
min={1}
186+
style={{ width: 80 }}
187+
value={editorIndentSize}
188+
onClick={e => {
189+
e.preventDefault()
190+
e.stopPropagation()
191+
}}
192+
onChange={e => this.changeEditorSetting('indentSize')(Number(e.target.value))}
193+
/>
194+
</div>
159195
</TabItem>
160196

161197
<TabItem title="Preview" className="flow-v-10" icon={IconPreview}>

0 commit comments

Comments
 (0)