Merge pull request #289 from mjmlio/fix-263

Fix 263

src/components/FileEditor/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import debounce from 'lodash/debounce'
-import get from 'lodash/get'
+import { get } from 'lodash'
 
 import beautifyJS from 'js-beautify'
 
@@ -25,6 +25,8 @@ import 'codemirror/addon/lint/lint'
 
 import 'helpers/codemirror-util-autoformat'
 
+import { addAlert } from 'reducers/alerts'
+
 import isOldSyntax from 'helpers/detectOldMJMLSyntax'
 
 import { codeMirrorCtrlD, codeMirrorDuplicate } from 'helpers/codemirror-shortcuts'
@@ -69,10 +71,12 @@ function beautify(content) {
       useTab: settings.getIn(['editor', 'useTab'], false),
       tabSize: settings.getIn(['editor', 'tabSize'], 2),
       indentSize: settings.getIn(['editor', 'indentSize'], 2),
+      preventAutoSave: settings.getIn(['editor', 'preventAutoSave'], false),
     }
   },
   {
     setPreview,
+    addAlert,
   },
 )
 class FileEditor extends Component {
@@ -257,14 +261,31 @@ class FileEditor extends Component {
     }
   }
 
+  async handleSave() {
+    const { fileName, addAlert } = this.props
+    const mjml = this._codeMirror.getValue()
+
+    try {
+      await fsWriteFile(fileName, mjml)
+      addAlert('File successfully saved', 'success')
+    } catch (e) {
+      addAlert('Could not save file', 'error')
+      console.log(e) // eslint-disable-line no-console
+    }
+  }
+
   handleChange = debounce(async () => {
-    const { setPreview, fileName, mjmlEngine } = this.props
+    const { setPreview, fileName, mjmlEngine, preventAutoSave } = this.props
     const mjml = this._codeMirror.getValue()
     if (mjmlEngine === 'auto') {
       setPreview(fileName, mjml)
-      this.debounceWrite(fileName, mjml)
+
+      if (!preventAutoSave) this.debounceWrite(fileName, mjml)
     } else {
-      await fsWriteFile(fileName, mjml)
+      if (!preventAutoSave) {
+        await fsWriteFile(fileName, mjml)
+      }
+
       setPreview(fileName, mjml)
     }
 

src/components/ProjectsList/ProjectItem.js

@@ -19,7 +19,6 @@ class ProjectItem extends Component {
 
   render() {
     const { onRemove, onOpen, onDuplicate, onEditName, onToggleSelect, isSelected, p } = this.props
-
     const { isOver } = this.state
 
     return (

src/components/SettingsModal/index.js

@@ -98,6 +98,7 @@ class SettingsModal extends Component {
     const editorUseTab = settings.getIn(['editor', 'useTab'], false)
     const editorTabSize = settings.getIn(['editor', 'tabSize'], 2)
     const editorIndentSize = settings.getIn(['editor', 'indentSize'], 2)
+    const preventAutoSave = settings.getIn(['editor', 'preventAutoSave'], false)
 
     return (
       <Modal
@@ -194,6 +195,12 @@ class SettingsModal extends Component {
                   onChange={e => this.changeEditorSetting('indentSize')(Number(e.target.value))}
                 />
               </div>
+              <CheckBox
+                value={preventAutoSave}
+                onChange={this.changeEditorSetting('preventAutoSave')}
+              >
+                {'Don’t auto-save on change'}
+              </CheckBox>
             </TabItem>
 
             <TabItem title="Preview" className="flow-v-10" icon={IconPreview}>

src/helpers/takeScreenshot.js

@@ -13,6 +13,7 @@ export function takeScreenshot(html, deviceWidth, workingDirectory) {
     })
 
     const tmpFileName = path.join(workingDirectory, TMP_FILE)
+
     await fsWriteFile(tmpFileName, html)
 
     win.loadURL(`file://${tmpFileName}`)

src/pages/Project/index.js

@@ -10,6 +10,7 @@ import IconCamera from 'react-icons/md/camera-alt'
 import IconEmail from 'react-icons/md/email'
 import IconAdd from 'react-icons/md/note-add'
 import IconBeautify from 'react-icons/md/autorenew'
+import IconSave from 'react-icons/md/save'
 import fs from 'fs'
 import { shell, clipboard } from 'electron'
 import beautifyJS from 'js-beautify'
@@ -38,6 +39,7 @@ import { takeScreenshot, cleanUp } from 'helpers/takeScreenshot'
     preview: state.preview,
     previewSize: state.settings.get('previewSize'),
     beautifyOutput: state.settings.getIn(['mjml', 'beautify']),
+    preventAutoSave: state.settings.getIn(['editor', 'preventAutoSave']),
   }),
   {
     openModal,
@@ -185,7 +187,7 @@ class ProjectPage extends Component {
   }
 
   render() {
-    const { preview } = this.props
+    const { preview, preventAutoSave } = this.props
     const { path, activeFile } = this.state
 
     const rootPath = this.props.location.query.path
@@ -203,6 +205,12 @@ class ProjectPage extends Component {
             </Button>
           </div>
           <div className="d-f flow-h-10">
+            {preventAutoSave && [
+              <Button key="save" transparent onClick={() => this._editor.handleSave()}>
+                <IconSave style={{ marginRight: 5 }} />
+                {'Save'}
+              </Button>,
+            ]}
             {isMJMLFile && [
               <Button key="beautify" transparent onClick={this.handleBeautify}>
                 <IconBeautify style={{ marginRight: 5 }} />