Merge pull request #230 from mjmlio/snippets-custom

revamp snippet without autocomplete

src/components/FileEditor/index.js

@@ -18,12 +18,12 @@ import 'codemirror/addon/search/jump-to-line'
 import 'codemirror/addon/dialog/dialog'
 import 'codemirror/addon/scroll/annotatescrollbar'
 import 'codemirror/addon/search/matchesonscrollbar'
+import 'codemirror/addon/hint/show-hint'
+import 'codemirror/addon/hint/xml-hint'
 import 'codemirror/mode/xml/xml'
 import 'codemirror/addon/lint/lint'
 
 import 'helpers/codemirror-util-autoformat'
-import 'helpers/codemirror-util-xml-hint'
-import 'helpers/codemirror-util-show-hint'
 
 import isOldSyntax from 'helpers/detectOldMJMLSyntax'
 
@@ -120,9 +120,6 @@ 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() {
@@ -173,7 +170,7 @@ class FileEditor extends Component {
       return
     }
 
-    const { wrapLines, highlightTag, lightTheme, snippets } = this.props
+    const { wrapLines, highlightTag, lightTheme } = this.props
 
     if (this._codeMirror) {
       this._codeMirror.toTextArea()
@@ -206,12 +203,13 @@ class FileEditor extends Component {
         "' '": cm => completeIfInTag(CodeMirror, cm),
         "'='": cm => completeIfInTag(CodeMirror, cm),
         'Ctrl-Space': 'autocomplete',
-        "'+'": cm => completeAfterSnippet(CodeMirror, cm, snippets),
         /* eslint-enable quotes */
       },
       lint: this.handleValidate,
     })
 
+    this._codeMirror.on('keydown', (cm, e) => this.handleKey(cm, e))
+
     this._codeMirror.on('change', this.handleChange)
   }
 
@@ -225,6 +223,14 @@ class FileEditor extends Component {
     }))
   }
 
+  handleKey = (cm, e) => {
+    const { snippets } = this.props
+    if (e.key === 'Tab') {
+      e.preventDefault()
+      return completeAfterSnippet(CodeMirror, cm, snippets)
+    }
+  }
+
   handleChange = debounce(async () => {
     const { setPreview, fileName, mjmlEngine } = this.props
     const mjml = this._codeMirror.getValue()

src/components/SettingsModal/index.js

@@ -186,7 +186,7 @@ class SettingsModal extends Component {
 
             <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>
+              <p className="mt-10">{'Type a trigger and hit tab to expand it in the editor'}</p>
               <div className="Snippets d-f">
                 <div className="fg-1">
                   <SnippetForm />

src/components/SnippetForm/index.js

@@ -16,7 +16,14 @@ import { addSnippet, updateSnippet } from 'actions/snippets'
   },
 )
 class SnippetForm extends Component {
+  static defaultProps = {
+    name: '',
+    trigger: '',
+  }
+
   state = {
+    snippetName: '',
+    snippetTrigger: '',
     snippetNameIsAvailable: true,
     snippetTriggerIsAvailable: true,
     snippetWasEdited: false,

src/components/SnippetsList/SnippetItem.js

@@ -1,8 +1,9 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
-import IconEdit from 'react-icons/md/mode-edit'
-import IconClose from 'react-icons/md/close'
+import IconExpandMore from 'react-icons/md/expand-more'
+import IconExpandLess from 'react-icons/md/expand-less'
+import IconDelete from 'react-icons/md/delete'
 
 import { loadSnippet, deleteSnippet } from 'actions/snippets'
 
@@ -47,10 +48,11 @@ class SnippetItem extends Component {
           </div>
           <div className="SnippetItem--item-actions">
             <div onClick={this.handleLoad} className="action action-rename">
-              <IconEdit />
+              {snippetIsEdited && <IconExpandLess />}
+              {!snippetIsEdited && <IconExpandMore />}
             </div>
             <div onClick={() => this.handleDelete(name)} className="action action-remove">
-              <IconClose />
+              <IconDelete />
             </div>
           </div>
         </div>

src/components/SnippetsList/style.scss

@@ -7,6 +7,9 @@
   padding: 0 20px 40px 20px;
   height: 600px;
   overflow-y: auto;
+  scrollbar {
+    display: none;
+  }
 }
 
 .SnippetItem {

src/helpers/codemirror-autocomplete-snippets.js

@@ -1,19 +1,30 @@
-/* eslint-disable */
-
 export function completeAfterSnippet(CodeMirror, cm, snippets) {
   const triggers = {}
   snippets.map(e => {
-    return (triggers['+' + e.trigger] = e.content)
+    return (triggers[e.trigger] = e.content)
   })
 
-  setTimeout(function() {
-    if (!cm.state.completionActive)
-      cm.showHint({
-        completeSingle: false,
-        schemaInfo: triggers,
-        tags: 'snippets',
-      })
-  }, 100)
+  const trigger = cm.findWordAt(cm.getCursor())
+  const range = cm.getRange(trigger.anchor, trigger.head)
+
+  if (triggers[range]) {
+    cm.replaceRange(
+      triggers[range],
+      {
+        ch: trigger.anchor.ch,
+        line: trigger.anchor.line,
+      },
+      {
+        ch: trigger.head.ch,
+        line: trigger.head.line,
+      },
+    )
+  } else {
+    cm.replaceRange('\t', {
+      ch: trigger.head.ch,
+      line: trigger.head.line,
+    })
+  }
 
   return CodeMirror.Pass
 }