Merge branch 'master' into fix-autocomplete-codeblock

browser/main/modals/PreferencesModal/SnippetTab.js

@@ -11,7 +11,7 @@ import copy from 'copy-to-clipboard'
 const path = require('path')
 
 class SnippetTab extends React.Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
     this.state = {
       currentSnippet: null
@@ -19,7 +19,7 @@ class SnippetTab extends React.Component {
     this.changeDelay = null
   }
 
-  notify (title, options) {
+  notify(title, options) {
     if (global.process.platform === 'win32') {
       options.icon = path.join(
         'file://',
@@ -30,7 +30,7 @@ class SnippetTab extends React.Component {
     return new window.Notification(title, options)
   }
 
-  handleSnippetNameOrPrefixChange () {
+  handleSnippetNameOrPrefixChange() {
     clearTimeout(this.changeDelay)
     this.changeDelay = setTimeout(() => {
       // notify the snippet editor that the name or prefix of snippet has been changed
@@ -39,20 +39,20 @@ class SnippetTab extends React.Component {
     }, 500)
   }
 
-  handleSnippetSelect (snippet) {
+  handleSnippetSelect(snippet) {
     const { currentSnippet } = this.state
     if (snippet !== null) {
       if (currentSnippet === null || currentSnippet.id !== snippet.id) {
         dataApi.fetchSnippet(snippet.id).then(changedSnippet => {
           // notify the snippet editor to load the content of the new snippet
           this.snippetEditor.onSnippetChanged(changedSnippet)
-          this.setState({currentSnippet: changedSnippet})
+          this.setState({ currentSnippet: changedSnippet })
         })
       }
     }
   }
 
-  onSnippetNameOrPrefixChanged (e, type) {
+  onSnippetNameOrPrefixChanged(e, type) {
     const newSnippet = Object.assign({}, this.state.currentSnippet)
     if (type === 'name') {
       newSnippet.name = e.target.value
@@ -63,14 +63,14 @@ class SnippetTab extends React.Component {
     this.handleSnippetNameOrPrefixChange()
   }
 
-  handleDeleteSnippet (snippet) {
+  handleDeleteSnippet(snippet) {
     // prevent old snippet still display when deleted
     if (snippet.id === this.state.currentSnippet.id) {
-      this.setState({currentSnippet: null})
+      this.setState({ currentSnippet: null })
     }
   }
 
-  handleCopySnippet (e) {
+  handleCopySnippet(e) {
     const showCopyNotification = this.props.config.ui.showCopyNotification
     copy(this.state.currentSnippet.content)
     if (showCopyNotification) {
@@ -81,7 +81,7 @@ class SnippetTab extends React.Component {
     }
   }
 
-  render () {
+  render() {
     const { config, storageKey } = this.props
     const { currentSnippet } = this.state
 
@@ -91,16 +91,23 @@ class SnippetTab extends React.Component {
     if (!(editorFontSize > 0 && editorFontSize < 132)) editorIndentSize = 4
     return (
       <div styleName='root'>
-        <div styleName='header'>{i18n.__('Snippets')}</div>
+        <div styleName='group-header'>{i18n.__('Snippets')}</div>
         <SnippetList
           onSnippetSelect={this.handleSnippetSelect.bind(this)}
           onSnippetDeleted={this.handleDeleteSnippet.bind(this)}
-          currentSnippet={currentSnippet} />
-        <div styleName='snippet-detail' style={{visibility: currentSnippet ? 'visible' : 'hidden'}}>
+          currentSnippet={currentSnippet}
+        />
+        <div
+          styleName='snippet-detail'
+          style={{ visibility: currentSnippet ? 'visible' : 'hidden' }}
+        >
           <div styleName='group-section'>
             <div styleName='group-section-control'>
-              <button styleName='group-control-rightButton'
-                onClick={e => this.handleCopySnippet(e)}>{i18n.__('Copy')}
+              <button
+                styleName='group-control-rightButton'
+                onClick={e => this.handleCopySnippet(e)}
+              >
+                {i18n.__('Copy')}
               </button>
             </div>
           </div>
@@ -110,18 +117,26 @@ class SnippetTab extends React.Component {
               <input
                 styleName='group-section-control-input'
                 value={currentSnippet ? currentSnippet.name : ''}
-                onChange={e => { this.onSnippetNameOrPrefixChanged(e, 'name') }}
-                type='text' />
+                onChange={e => {
+                  this.onSnippetNameOrPrefixChanged(e, 'name')
+                }}
+                type='text'
+              />
             </div>
           </div>
           <div styleName='group-section'>
-            <div styleName='group-section-label'>{i18n.__('Snippet prefix')}</div>
+            <div styleName='group-section-label'>
+              {i18n.__('Snippet prefix')}
+            </div>
             <div styleName='group-section-control'>
               <input
                 styleName='group-section-control-input'
                 value={currentSnippet ? currentSnippet.prefix : ''}
-                onChange={e => { this.onSnippetNameOrPrefixChanged(e, 'prefix') }}
-                type='text' />
+                onChange={e => {
+                  this.onSnippetNameOrPrefixChanged(e, 'prefix')
+                }}
+                type='text'
+              />
             </div>
           </div>
           <div styleName='snippet-editor-section'>
@@ -137,13 +152,20 @@ class SnippetTab extends React.Component {
               rulers={config.editor.rulers}
               displayLineNumbers={config.editor.displayLineNumbers}
               matchingPairs={config.editor.matchingPairs}
+              matchingCloseBefore={config.editor.matchingCloseBefore}
               matchingTriples={config.editor.matchingTriples}
               explodingPairs={config.editor.explodingPairs}
               codeBlockMatchingPairs={config.editor.codeBlockMatchingPairs}
+              codeBlockMatchingCloseBefore={
+                config.editor.codeBlockMatchingCloseBefore
+              }
               codeBlockMatchingTriples={config.editor.codeBlockMatchingTriples}
               codeBlockExplodingPairs={config.editor.codeBlockExplodingPairs}
               scrollPastEnd={config.editor.scrollPastEnd}
-              onRef={ref => { this.snippetEditor = ref }} />
+              onRef={ref => {
+                this.snippetEditor = ref
+              }}
+            />
           </div>
         </div>
       </div>
@@ -151,7 +173,6 @@ class SnippetTab extends React.Component {
   }
 }
 
-SnippetTab.PropTypes = {
-}
+SnippetTab.PropTypes = {}
 
 export default CSSModules(SnippetTab, styles)