Merge pull request #227 from mjmlio/feature/snippets-2

Snippet feature

src/actions/settings.js

@@ -53,6 +53,7 @@ export function loadSettings() {
         mobile: 320,
         desktop: 650,
       },
+      snippets: [],
     })
 
     // clean old format for TargetEmails

src/actions/snippets.js

@@ -0,0 +1,59 @@
+import { addAlert } from 'reducers/alerts'
+
+import { saveSettings } from 'actions/settings'
+
+export function addSnippet(snippetName, snippetTrigger, snippetContent) {
+  return dispatch => {
+    dispatch({
+      type: 'SNIPPET_ADD',
+      payload: {
+        snippetName,
+        snippetTrigger,
+        snippetContent,
+      },
+    })
+    dispatch(saveSettings())
+    dispatch(addAlert(`Created ${snippetName}`, 'success'))
+  }
+}
+
+export function updateSnippet(oldName, newName, newTrigger, newContent) {
+  return dispatch => {
+    dispatch({
+      type: 'SNIPPET_UPDATE',
+      payload: {
+        oldName,
+        newName,
+        newTrigger,
+        newContent,
+      },
+    })
+    dispatch(saveSettings())
+    dispatch(addAlert(`Updated ${oldName}`, 'success'))
+  }
+}
+
+export function deleteSnippet(snippetName) {
+  return dispatch => {
+    dispatch({
+      type: 'SNIPPET_DELETE',
+      payload: { snippetName },
+    })
+    dispatch(saveSettings())
+    dispatch(addAlert(`Deleted ${snippetName}`, 'success'))
+  }
+}
+
+export function loadSnippet(snippetName, snippetTrigger, snippetContent) {
+  return dispatch => {
+    dispatch({
+      type: 'SNIPPET_LOAD',
+      payload: {
+        snippetName,
+        snippetTrigger,
+        snippetContent,
+      },
+    })
+    dispatch(saveSettings())
+  }
+}

src/components/FileEditor/index.js

@@ -19,19 +19,20 @@ import 'codemirror/addon/dialog/dialog'
 import 'codemirror/addon/scroll/annotatescrollbar'
 import 'codemirror/addon/search/matchesonscrollbar'
 import 'codemirror/mode/xml/xml'
-import 'codemirror/addon/hint/show-hint'
-import 'codemirror/addon/hint/xml-hint'
 import 'codemirror/addon/lint/lint'
 
 import 'helpers/codemirror-util-autoformat'
+import 'helpers/codemirror-util-xml-hint'
+import 'helpers/codemirror-util-show-hint'
 
 import {
-  tags as autocompleteTags,
   completeAfter,
   completeIfAfterLt,
   completeIfInTag,
 } from 'helpers/codemirror-autocomplete-mjml'
 
+import { completeAfterSnippet } from 'helpers/codemirror-autocomplete-snippets'
+
 import foldByLevel from 'helpers/foldByLevel'
 import { fsReadFile, fsWriteFile } from 'helpers/fs'
 import { setPreview } from 'actions/preview'
@@ -50,6 +51,7 @@ import './styles.scss'
       highlightTag: settings.getIn(['editor', 'highlightTag']),
       lightTheme: settings.getIn(['editor', 'lightTheme'], false),
       errors: get(preview, 'errors', []),
+      snippets: settings.get('snippets'),
     }
   },
   {
@@ -107,6 +109,9 @@ class FileEditor extends Component {
     if (prevProps.lightTheme !== this.props.lightTheme) {
       this._codeMirror.setOption('theme', this.props.lightTheme ? 'neo' : 'one-dark')
     }
+    if (prevProps.snippets !== this.props.snippets) {
+      this.initEditor()
+    }
   }
 
   componentWillUnmount() {
@@ -150,7 +155,7 @@ class FileEditor extends Component {
       return
     }
 
-    const { wrapLines, highlightTag, lightTheme } = this.props
+    const { wrapLines, highlightTag, lightTheme, snippets } = this.props
 
     if (this._codeMirror) {
       this._codeMirror.toTextArea()
@@ -183,11 +188,9 @@ class FileEditor extends Component {
         "' '": cm => completeIfInTag(CodeMirror, cm),
         "'='": cm => completeIfInTag(CodeMirror, cm),
         'Ctrl-Space': 'autocomplete',
+        "'+'": cm => completeAfterSnippet(CodeMirror, cm, snippets),
         /* eslint-enable quotes */
       },
-      hintOptions: {
-        schemaInfo: autocompleteTags,
-      },
       lint: this.handleValidate,
     })
 

src/components/ProjectsList/style.scss

@@ -94,4 +94,4 @@
   right: -3px;
   bottom: 10px;
   background: $blue;
-}
+}

src/components/SettingsModal/index.js

@@ -7,6 +7,7 @@ import IconClose from 'react-icons/md/close'
 import IconMJMLEngine from 'react-icons/md/settings-applications'
 import IconEditor from 'react-icons/md/format-align-left'
 import IconPreview from 'react-icons/md/important-devices'
+import IconCode from 'react-icons/md/code'
 
 import { isModalOpened, closeModal } from 'reducers/modals'
 import { updateSettings } from 'actions/settings'
@@ -15,6 +16,8 @@ import Modal from 'components/Modal'
 import Button from 'components/Button'
 import CheckBox from 'components/CheckBox'
 import TabsVertical, { TabItem } from 'components/TabsVertical'
+import SnippetForm from 'components/SnippetForm'
+import SnippetsList from 'components/SnippetsList'
 
 import MJMLEngine from 'components/MJMLEngine'
 
@@ -180,6 +183,19 @@ class SettingsModal extends Component {
                 <span>{'Desktop size'}</span>
               </div>
             </TabItem>
+
+            <TabItem title="Snippets" className="d-b" icon={IconCode}>
+              <h1 className="c-white">{'Create and manage code snippets'}</h1>
+              <p className="mt-10">{'Trigger snippets by typing "+" in the text editor'}</p>
+              <div className="Snippets d-f">
+                <div className="fg-1">
+                  <SnippetForm />
+                </div>
+                <div className="SnippetsList d-f flow-h-5 fg-1">
+                  <SnippetsList />
+                </div>
+              </div>
+            </TabItem>
           </TabsVertical>
         </div>
       </Modal>

src/components/SettingsModal/style.scss

@@ -7,4 +7,9 @@
   overflow: auto;
   width: auto;
   margin: 0;
+  overflow: hidden;
 }
+
+.Snippets {
+  overflow: hidden;
+}