Bracket matching option added to config

browser/components/CodeEditor.js

@@ -5,22 +5,32 @@ import CodeMirror from 'codemirror'
 import 'codemirror-mode-elixir'
 import attachmentManagement from 'browser/main/lib/dataApi/attachmentManagement'
 import convertModeName from 'browser/lib/convertModeName'
-import { options, TableEditor, Alignment } from '@susisu/mte-kernel'
+import {
+  options,
+  TableEditor,
+  Alignment
+} from '@susisu/mte-kernel'
 import TextEditorInterface from 'browser/lib/TextEditorInterface'
 import eventEmitter from 'browser/main/lib/eventEmitter'
 import iconv from 'iconv-lite'
 import crypto from 'crypto'
 import consts from 'browser/lib/consts'
 import fs from 'fs'
-const { ipcRenderer } = require('electron')
+const {
+  ipcRenderer
+} = require('electron')
 import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'
 import TurndownService from 'turndown'
-import { gfm } from 'turndown-plugin-gfm'
+import {
+  gfm
+} from 'turndown-plugin-gfm'
 
 CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js'
 
 const buildCMRulers = (rulers, enableRulers) =>
-  (enableRulers ? rulers.map(ruler => ({ column: ruler })) : [])
+  (enableRulers ? rulers.map(ruler => ({
+    column: ruler
+  })) : [])
 
 export default class CodeEditor extends React.Component {
   constructor(props) {
@@ -46,7 +56,10 @@ export default class CodeEditor extends React.Component {
       }
       this.props.onBlur != null && this.props.onBlur(e)
 
-      const { storageKey, noteKey } = this.props
+      const {
+        storageKey,
+        noteKey
+      } = this.props
       attachmentManagement.deleteAttachmentsNotPresentInNote(
         this.editor.getValue(),
         storageKey,
@@ -100,7 +113,9 @@ export default class CodeEditor extends React.Component {
   }
 
   handleFormatTable() {
-    this.tableEditor.formatAll(options({textWidthOptions: {}}))
+    this.tableEditor.formatAll(options({
+      textWidthOptions: {}
+    }))
   }
 
   handleEditorActivity() {
@@ -126,18 +141,19 @@ export default class CodeEditor extends React.Component {
   }
 
   componentDidMount() {
-    const { rulers, enableRulers } = this.props
+    const {
+      rulers,
+      enableRulers
+    } = this.props
     const expandSnippet = this.expandSnippet.bind(this)
     eventEmitter.on('line:jump', this.scrollToLineHandeler)
 
-    const defaultSnippet = [
+    const defaultSnippet = [{
-      {
       id: crypto.randomBytes(16).toString('hex'),
       name: 'Dummy text',
       prefix: ['lorem', 'ipsum'],
       content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
-      }
+    }]
-    ]
     if (!fs.existsSync(consts.SNIPPET_FILE)) {
       fs.writeFileSync(
         consts.SNIPPET_FILE,
@@ -215,12 +231,17 @@ export default class CodeEditor extends React.Component {
       dragDrop: false,
       foldGutter: true,
       gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
-      autoCloseBrackets: {
+      autoCloseBrackets: (this.props.enableBracketMatching ? {
-        pairs: '()[]{}\'\'""$$**``',
+        pairs: '()[]{}\'\'""$$**``ll',
         triples: '```"""\'\'\'',
         explode: '[]{}``$$',
         override: true
-      },
+      } : {
+        pairs: '',
+        triples: '',
+        explode: '',
+        override: true
+      }),
       extraKeys: this.defaultKeyMap
     })
 
@@ -253,43 +274,117 @@ export default class CodeEditor extends React.Component {
     })
 
     this.editorKeyMap = CodeMirror.normalizeKeyMap({
-      'Tab': () => { this.tableEditor.nextCell(this.tableEditorOptions) },
+      'Tab': () => {
-      'Shift-Tab': () => { this.tableEditor.previousCell(this.tableEditorOptions) },
+        this.tableEditor.nextCell(this.tableEditorOptions)
-      'Enter': () => { this.tableEditor.nextRow(this.tableEditorOptions) },
+      },
-      'Ctrl-Enter': () => { this.tableEditor.escape(this.tableEditorOptions) },
+      'Shift-Tab': () => {
-      'Cmd-Enter': () => { this.tableEditor.escape(this.tableEditorOptions) },
+        this.tableEditor.previousCell(this.tableEditorOptions)
-      'Shift-Ctrl-Left': () => { this.tableEditor.alignColumn(Alignment.LEFT, this.tableEditorOptions) },
+      },
-      'Shift-Cmd-Left': () => { this.tableEditor.alignColumn(Alignment.LEFT, this.tableEditorOptions) },
+      'Enter': () => {
-      'Shift-Ctrl-Right': () => { this.tableEditor.alignColumn(Alignment.RIGHT, this.tableEditorOptions) },
+        this.tableEditor.nextRow(this.tableEditorOptions)
-      'Shift-Cmd-Right': () => { this.tableEditor.alignColumn(Alignment.RIGHT, this.tableEditorOptions) },
+      },
-      'Shift-Ctrl-Up': () => { this.tableEditor.alignColumn(Alignment.CENTER, this.tableEditorOptions) },
+      'Ctrl-Enter': () => {
-      'Shift-Cmd-Up': () => { this.tableEditor.alignColumn(Alignment.CENTER, this.tableEditorOptions) },
+        this.tableEditor.escape(this.tableEditorOptions)
-      'Shift-Ctrl-Down': () => { this.tableEditor.alignColumn(Alignment.NONE, this.tableEditorOptions) },
+      },
-      'Shift-Cmd-Down': () => { this.tableEditor.alignColumn(Alignment.NONE, this.tableEditorOptions) },
+      'Cmd-Enter': () => {
-      'Ctrl-Left': () => { this.tableEditor.moveFocus(0, -1, this.tableEditorOptions) },
+        this.tableEditor.escape(this.tableEditorOptions)
-      'Cmd-Left': () => { this.tableEditor.moveFocus(0, -1, this.tableEditorOptions) },
+      },
-      'Ctrl-Right': () => { this.tableEditor.moveFocus(0, 1, this.tableEditorOptions) },
+      'Shift-Ctrl-Left': () => {
-      'Cmd-Right': () => { this.tableEditor.moveFocus(0, 1, this.tableEditorOptions) },
+        this.tableEditor.alignColumn(Alignment.LEFT, this.tableEditorOptions)
-      'Ctrl-Up': () => { this.tableEditor.moveFocus(-1, 0, this.tableEditorOptions) },
+      },
-      'Cmd-Up': () => { this.tableEditor.moveFocus(-1, 0, this.tableEditorOptions) },
+      'Shift-Cmd-Left': () => {
-      'Ctrl-Down': () => { this.tableEditor.moveFocus(1, 0, this.tableEditorOptions) },
+        this.tableEditor.alignColumn(Alignment.LEFT, this.tableEditorOptions)
-      'Cmd-Down': () => { this.tableEditor.moveFocus(1, 0, this.tableEditorOptions) },
+      },
-      'Ctrl-K Ctrl-I': () => { this.tableEditor.insertRow(this.tableEditorOptions) },
+      'Shift-Ctrl-Right': () => {
-      'Cmd-K Cmd-I': () => { this.tableEditor.insertRow(this.tableEditorOptions) },
+        this.tableEditor.alignColumn(Alignment.RIGHT, this.tableEditorOptions)
-      'Ctrl-L Ctrl-I': () => { this.tableEditor.deleteRow(this.tableEditorOptions) },
+      },
-      'Cmd-L Cmd-I': () => { this.tableEditor.deleteRow(this.tableEditorOptions) },
+      'Shift-Cmd-Right': () => {
-      'Ctrl-K Ctrl-J': () => { this.tableEditor.insertColumn(this.tableEditorOptions) },
+        this.tableEditor.alignColumn(Alignment.RIGHT, this.tableEditorOptions)
-      'Cmd-K Cmd-J': () => { this.tableEditor.insertColumn(this.tableEditorOptions) },
+      },
-      'Ctrl-L Ctrl-J': () => { this.tableEditor.deleteColumn(this.tableEditorOptions) },
+      'Shift-Ctrl-Up': () => {
-      'Cmd-L Cmd-J': () => { this.tableEditor.deleteColumn(this.tableEditorOptions) },
+        this.tableEditor.alignColumn(Alignment.CENTER, this.tableEditorOptions)
-      'Alt-Shift-Ctrl-Left': () => { this.tableEditor.moveColumn(-1, this.tableEditorOptions) },
+      },
-      'Alt-Shift-Cmd-Left': () => { this.tableEditor.moveColumn(-1, this.tableEditorOptions) },
+      'Shift-Cmd-Up': () => {
-      'Alt-Shift-Ctrl-Right': () => { this.tableEditor.moveColumn(1, this.tableEditorOptions) },
+        this.tableEditor.alignColumn(Alignment.CENTER, this.tableEditorOptions)
-      'Alt-Shift-Cmd-Right': () => { this.tableEditor.moveColumn(1, this.tableEditorOptions) },
+      },
-      'Alt-Shift-Ctrl-Up': () => { this.tableEditor.moveRow(-1, this.tableEditorOptions) },
+      'Shift-Ctrl-Down': () => {
-      'Alt-Shift-Cmd-Up': () => { this.tableEditor.moveRow(-1, this.tableEditorOptions) },
+        this.tableEditor.alignColumn(Alignment.NONE, this.tableEditorOptions)
-      'Alt-Shift-Ctrl-Down': () => { this.tableEditor.moveRow(1, this.tableEditorOptions) },
+      },
-      'Alt-Shift-Cmd-Down': () => { this.tableEditor.moveRow(1, this.tableEditorOptions) }
+      'Shift-Cmd-Down': () => {
+        this.tableEditor.alignColumn(Alignment.NONE, this.tableEditorOptions)
+      },
+      'Ctrl-Left': () => {
+        this.tableEditor.moveFocus(0, -1, this.tableEditorOptions)
+      },
+      'Cmd-Left': () => {
+        this.tableEditor.moveFocus(0, -1, this.tableEditorOptions)
+      },
+      'Ctrl-Right': () => {
+        this.tableEditor.moveFocus(0, 1, this.tableEditorOptions)
+      },
+      'Cmd-Right': () => {
+        this.tableEditor.moveFocus(0, 1, this.tableEditorOptions)
+      },
+      'Ctrl-Up': () => {
+        this.tableEditor.moveFocus(-1, 0, this.tableEditorOptions)
+      },
+      'Cmd-Up': () => {
+        this.tableEditor.moveFocus(-1, 0, this.tableEditorOptions)
+      },
+      'Ctrl-Down': () => {
+        this.tableEditor.moveFocus(1, 0, this.tableEditorOptions)
+      },
+      'Cmd-Down': () => {
+        this.tableEditor.moveFocus(1, 0, this.tableEditorOptions)
+      },
+      'Ctrl-K Ctrl-I': () => {
+        this.tableEditor.insertRow(this.tableEditorOptions)
+      },
+      'Cmd-K Cmd-I': () => {
+        this.tableEditor.insertRow(this.tableEditorOptions)
+      },
+      'Ctrl-L Ctrl-I': () => {
+        this.tableEditor.deleteRow(this.tableEditorOptions)
+      },
+      'Cmd-L Cmd-I': () => {
+        this.tableEditor.deleteRow(this.tableEditorOptions)
+      },
+      'Ctrl-K Ctrl-J': () => {
+        this.tableEditor.insertColumn(this.tableEditorOptions)
+      },
+      'Cmd-K Cmd-J': () => {
+        this.tableEditor.insertColumn(this.tableEditorOptions)
+      },
+      'Ctrl-L Ctrl-J': () => {
+        this.tableEditor.deleteColumn(this.tableEditorOptions)
+      },
+      'Cmd-L Cmd-J': () => {
+        this.tableEditor.deleteColumn(this.tableEditorOptions)
+      },
+      'Alt-Shift-Ctrl-Left': () => {
+        this.tableEditor.moveColumn(-1, this.tableEditorOptions)
+      },
+      'Alt-Shift-Cmd-Left': () => {
+        this.tableEditor.moveColumn(-1, this.tableEditorOptions)
+      },
+      'Alt-Shift-Ctrl-Right': () => {
+        this.tableEditor.moveColumn(1, this.tableEditorOptions)
+      },
+      'Alt-Shift-Cmd-Right': () => {
+        this.tableEditor.moveColumn(1, this.tableEditorOptions)
+      },
+      'Alt-Shift-Ctrl-Up': () => {
+        this.tableEditor.moveRow(-1, this.tableEditorOptions)
+      },
+      'Alt-Shift-Cmd-Up': () => {
+        this.tableEditor.moveRow(-1, this.tableEditorOptions)
+      },
+      'Alt-Shift-Ctrl-Down': () => {
+        this.tableEditor.moveRow(1, this.tableEditorOptions)
+      },
+      'Alt-Shift-Cmd-Down': () => {
+        this.tableEditor.moveRow(1, this.tableEditorOptions)
+      }
     })
 
     if (this.props.enableTableEditor) {
@@ -370,8 +465,14 @@ export default class CodeEditor extends React.Component {
     return {
       text: wordBeforeCursor,
       range: {
-        from: { line: lineNumber, ch: originCursorPosition },
+        from: {
-        to: { line: lineNumber, ch: cursorPosition }
+          line: lineNumber,
+          ch: originCursorPosition
+        },
+        to: {
+          line: lineNumber,
+          ch: cursorPosition
+        }
       }
     }
   }
@@ -395,7 +496,10 @@ export default class CodeEditor extends React.Component {
 
   componentDidUpdate(prevProps, prevState) {
     let needRefresh = false
-    const { rulers, enableRulers } = this.props
+    const {
+      rulers,
+      enableRulers
+    } = this.props
     if (prevProps.mode !== this.props.mode) {
       this.setMode(this.props.mode)
     }
@@ -436,6 +540,21 @@ export default class CodeEditor extends React.Component {
       this.editor.setOption('scrollPastEnd', this.props.scrollPastEnd)
     }
 
+    if (prevProps.enableBracketMatching !== this.props.enableBracketMatching) {
+      const bracketObject = (this.props.enableBracketMatching ? {
+        pairs: '()[]{}\'\'""$$**``ll',
+        triples: '```"""\'\'\'',
+        explode: '[]{}``$$',
+        override: true
+      } : {
+        pairs: '',
+        triples: '',
+        explode: '',
+        override: true
+      });
+      this.editor.setOption('autoCloseBrackets', bracketObject)
+    }
+
     if (prevProps.enableTableEditor !== this.props.enableTableEditor) {
       if (this.props.enableTableEditor) {
         this.editor.on('cursorActivity', this.editorActivityHandler)
@@ -513,7 +632,10 @@ export default class CodeEditor extends React.Component {
 
   handleDropImage(dropEvent) {
     dropEvent.preventDefault()
-    const { storageKey, noteKey } = this.props
+    const {
+      storageKey,
+      noteKey
+    } = this.props
     attachmentManagement.handleAttachmentDrop(
       this,
       storageKey,
@@ -528,7 +650,10 @@ export default class CodeEditor extends React.Component {
 
   handlePaste(editor, e) {
     const clipboardData = e.clipboardData
-    const { storageKey, noteKey } = this.props
+    const {
+      storageKey,
+      noteKey
+    } = this.props
     const dataTransferItem = clipboardData.items[0]
     const pastedTxt = clipboardData.getData('text')
     const isURL = str => {
@@ -537,15 +662,21 @@ export default class CodeEditor extends React.Component {
     }
     const isInLinkTag = editor => {
       const startCursor = editor.getCursor('start')
-      const prevChar = editor.getRange(
+      const prevChar = editor.getRange({
-        { line: startCursor.line, ch: startCursor.ch - 2 },
+        line: startCursor.line,
-        { line: startCursor.line, ch: startCursor.ch }
+        ch: startCursor.ch - 2
-      )
+      }, {
+        line: startCursor.line,
+        ch: startCursor.ch
+      })
       const endCursor = editor.getCursor('end')
-      const nextChar = editor.getRange(
+      const nextChar = editor.getRange({
-        { line: endCursor.line, ch: endCursor.ch },
+        line: endCursor.line,
-        { line: endCursor.line, ch: endCursor.ch + 1 }
+        ch: endCursor.ch
-      )
+      }, {
+        line: endCursor.line,
+        ch: endCursor.ch + 1
+      })
       return prevChar === '](' && nextChar === ')'
     }
 
@@ -663,16 +794,16 @@ export default class CodeEditor extends React.Component {
 
   decodeResponse(response) {
     const headers = response.headers
-    const _charset = headers.has('content-type')
+    const _charset = headers.has('content-type') ?
-      ? this.extractContentTypeCharset(headers.get('content-type'))
+      this.extractContentTypeCharset(headers.get('content-type')) :
-      : undefined
+      undefined
     return response.arrayBuffer().then(buff => {
       return new Promise((resolve, reject) => {
         try {
           const charset = _charset !== undefined &&
-            iconv.encodingExists(_charset)
+            iconv.encodingExists(_charset) ?
-            ? _charset
+            _charset :
-            : 'utf-8'
+            'utf-8'
           resolve(iconv.decode(new Buffer(buff), charset).toString())
         } catch (e) {
           reject(e)
@@ -693,20 +824,28 @@ export default class CodeEditor extends React.Component {
   }
 
   render() {
-    const {className, fontSize} = this.props
+    const {
+      className,
+      fontSize
+    } = this.props
     const fontFamily = normalizeEditorFontFamily(this.props.fontFamily)
     const width = this.props.width
-    return (
+    return ( <
-      <div
+      div className = {
-        className={className == null ? 'CodeEditor' : `CodeEditor ${className}`}
+        className == null ? 'CodeEditor' : `CodeEditor ${className}`
+      }
       ref = 'root'
       tabIndex = '-1'
-        style={{
+      style = {
+        {
           fontFamily,
           fontSize: fontSize,
           width: width
-        }}
+        }
-        onDrop={e => this.handleDropImage(e)}
+      }
+      onDrop = {
+        e => this.handleDropImage(e)
+      }
       />
     )
   }

browser/components/MarkdownEditor.js

@@ -268,6 +268,7 @@ class MarkdownEditor extends React.Component {
           enableRulers={config.editor.enableRulers}
           rulers={config.editor.rulers}
           displayLineNumbers={config.editor.displayLineNumbers}
+          enableBracketMatching={config.editor.enableBracketMatching}
           scrollPastEnd={config.editor.scrollPastEnd}
           storageKey={storageKey}
           noteKey={noteKey}

browser/components/MarkdownSplitEditor.js

@@ -158,6 +158,7 @@ class MarkdownSplitEditor extends React.Component {
           fontFamily={config.editor.fontFamily}
           fontSize={editorFontSize}
           displayLineNumbers={config.editor.displayLineNumbers}
+          enableBracketMatching={config.editor.enableBracketMatching}
           indentType={config.editor.indentType}
           indentSize={editorIndentSize}
           enableRulers={config.editor.enableRulers}

browser/main/Detail/SnippetNoteDetail.js

@@ -699,6 +699,7 @@ class SnippetNoteDetail extends React.Component {
             indentType={config.editor.indentType}
             indentSize={editorIndentSize}
             displayLineNumbers={config.editor.displayLineNumbers}
+            enableBracketMatching={config.editor.enableBracketMatching}
             keyMap={config.editor.keyMap}
             scrollPastEnd={config.editor.scrollPastEnd}
             fetchUrlTitle={config.editor.fetchUrlTitle}

browser/main/lib/ConfigManager.js

@@ -44,6 +44,7 @@ export const DEFAULT_CONFIG = {
     enableRulers: false,
     rulers: [80, 120],
     displayLineNumbers: true,
+    enableBracketMatching: true,
     switchPreview: 'BLUR', // 'BLUR', 'DBL_CLICK', 'RIGHTCLICK'
     delfaultStatus: 'PREVIEW', // 'PREVIEW', 'CODE'
     scrollPastEnd: false,

browser/main/modals/PreferencesModal/SnippetEditor.js

@@ -27,12 +27,17 @@ class SnippetEditor extends React.Component {
       dragDrop: false,
       foldGutter: true,
       gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
-      autoCloseBrackets: {
+      autoCloseBrackets: (this.enableBracketMatching ? {
-        pairs: '()[]{}\'\'""$$**``',
+        pairs: '()[]{}\'\'""$$**``ll',
         triples: '```"""\'\'\'',
         explode: '[]{}``$$',
         override: true
-      },
+      }:  {
+        pairs: '',
+        triples: '',
+        explode: '',
+        override: true
+      }),
       mode: 'null'
     })
     this.cm.setSize('100%', '100%')

browser/main/modals/PreferencesModal/SnippetTab.js

@@ -136,6 +136,7 @@ class SnippetTab extends React.Component {
               enableRulers={config.editor.enableRulers}
               rulers={config.editor.rulers}
               displayLineNumbers={config.editor.displayLineNumbers}
+              enableBracketMatching={config.editor.enableBracketMatching}
               scrollPastEnd={config.editor.scrollPastEnd}
               onRef={ref => { this.snippetEditor = ref }} />
           </div>

browser/main/modals/PreferencesModal/UiTab.js

@@ -62,6 +62,7 @@ class UiTab extends React.Component {
       checkHighLight.setAttribute('rel', 'stylesheet')
       document.head.appendChild(checkHighLight)
     }
+    console.log("This is a console log")
     
     const newConfig = {
       ui: {
@@ -94,7 +95,8 @@ class UiTab extends React.Component {
         fetchUrlTitle: this.refs.editorFetchUrlTitle.checked,
         enableTableEditor: this.refs.enableTableEditor.checked,
         enableFrontMatterTitle: this.refs.enableFrontMatterTitle.checked,
-        frontMatterTitleField: this.refs.frontMatterTitleField.value
+        frontMatterTitleField: this.refs.frontMatterTitleField.value,
+        enableBracketMatching: this.refs.enableBracketMatching.checked
       },
       preview: {
         fontSize: this.refs.previewFontSize.value,
@@ -539,6 +541,17 @@ class UiTab extends React.Component {
             </label>
           </div>
 
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.editor.enableBracketMatching}
+                ref='enableBracketMatching'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Enable bracket matching')}
+            </label>
+          </div>
+
           <div styleName='group-header2'>{i18n.__('Preview')}</div>
           <div styleName='group-section'>
             <div styleName='group-section-label'>