use codemirror

browser/main/Detail/SnippetNoteDetail.js

@@ -7,19 +7,23 @@ import StarButton from './StarButton'
 import TagSelect from './TagSelect'
 import FolderSelect from './FolderSelect'
 import dataApi from 'browser/main/lib/dataApi'
-import modes from 'browser/lib/modes'
 import { hashHistory } from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
+import CodeMirror from 'codemirror'
 
-function detectModeByFilename (filename) {
-  for (let key in modes) {
-    const mode = modes[key]
-    if (mode.match != null && mode.match.test(filename)) {
-      console.log(mode)
-      return mode.mode
-    }
+function pass (name) {
+  switch (name) {
+    case 'ejs':
+      return 'Embedded Javascript'
+    case 'html_ruby':
+      return 'Embedded Ruby'
+    case 'objectivec':
+      return 'Objective C'
+    case 'text':
+      return 'Plain Text'
+    default:
+      return name
   }
-  return null
 }
 
 const electron = require('electron')
@@ -283,8 +287,8 @@ class SnippetNoteDetail extends React.Component {
   handleNameInputChange (e, index) {
     let snippets = this.state.note.snippets.slice()
     snippets[index].name = e.target.value
-    let mode = detectModeByFilename(e.target.value.trim())
-    if (mode != null) snippets[index].mode = mode
+    // let mode = detectModeByFilename(e.target.value.trim())
+    // if (mode != null) snippets[index].mode = mode
     this.state.note.snippets = snippets
 
     this.setState({
@@ -297,9 +301,9 @@ class SnippetNoteDetail extends React.Component {
   handleModeButtonClick (index) {
     return (e) => {
       let menu = new Menu()
-      modes.forEach((mode) => {
+      CodeMirror.modeInfo.forEach((mode) => {
         menu.append(new MenuItem({
-          label: mode.label,
+          label: mode.name,
           click: (e) => this.handleModeOptionClick(index, mode.name)(e)
         }))
       })
@@ -376,9 +380,9 @@ class SnippetNoteDetail extends React.Component {
     })
     let viewList = note.snippets.map((snippet, index) => {
       let isActive = this.state.snippetIndex === index
-      let mode = snippet.mode === 'text'
-        ? null
-        : modes.filter((mode) => mode.name === snippet.mode)[0]
+
+      let syntax = CodeMirror.findModeByName(pass(snippet.mode))
+      if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
 
       return <div styleName='tabView'
         key={index}
@@ -393,9 +397,9 @@ class SnippetNoteDetail extends React.Component {
           <button styleName='tabView-top-mode'
             onClick={(e) => this.handleModeButtonClick(index)(e)}
           >
-            {mode == null
+            {snippet.mode == null
               ? 'Select Syntax...'
-              : mode.label
+              : syntax.name
             }&nbsp;
             <i className='fa fa-caret-down'/>
           </button>

browser/main/global.styl

@@ -87,3 +87,16 @@ body[data-theme="dark"]
   .ModalBase
     .modalBack
       background-color alpha(black, 60%)
+
+.CodeMirror
+  font-family inherit !important
+  line-height 1.4em
+  height 100%
+.CodeMirror-focused .CodeMirror-selected
+  background #B1D7FE
+.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection
+  background #B1D7FE
+.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection
+  background #B1D7FE
+::selection
+  background #B1D7FE

browser/main/lib/ConfigManager.js

@@ -4,6 +4,8 @@ const OSX = global.process.platform === 'darwin'
 const electron = require('electron')
 const { ipcRenderer } = electron
 
+let isInitialized = false
+
 const defaultConfig = {
   zoom: 1,
   isSideNavFolded: false,
@@ -19,11 +21,11 @@ const defaultConfig = {
     defaultNote: 'ALWAYS_ASK' // 'ALWAYS_ASK', 'SNIPPET_NOTE', 'MARKDOWN_NOTE'
   },
   editor: {
-    theme: 'xcode',
+    theme: 'default',
     fontSize: '14',
     fontFamily: 'Monaco, Consolas',
     indentType: 'space',
-    indentSize: '4',
+    indentSize: '2',
     switchPreview: 'BLUR' // Available value: RIGHTCLICK, BLUR
   },
   preview: {
@@ -64,6 +66,20 @@ function get () {
     _save(config)
   }
 
+  if (!isInitialized) {
+    isInitialized = true
+    let editorTheme = document.getElementById('editorTheme')
+    if (editorTheme == null) {
+      editorTheme = document.createElement('link')
+      editorTheme.setAttribute('id', 'editorTheme')
+      editorTheme.setAttribute('rel', 'stylesheet')
+      document.head.appendChild(editorTheme)
+    }
+    if (config.editor.theme !== 'default') {
+      editorTheme.setAttribute('href', '../node_modules/codemirror/theme/' + config.editor.theme + '.css')
+    }
+  }
+
   return config
 }
 
@@ -79,6 +95,15 @@ function set (updates) {
     document.body.setAttribute('data-theme', 'default')
   }
 
+  let editorTheme = document.getElementById('editorTheme')
+  if (editorTheme == null) {
+    editorTheme = document.createElement('link')
+    editorTheme.setAttribute('id', 'editorTheme')
+    editorTheme.setAttribute('rel', 'stylesheet')
+    document.head.appendChild(editorTheme)
+  }
+  editorTheme.setAttribute('href', '../node_modules/codemirror/theme/' + newConfig.editor.theme + '.css')
+
   ipcRenderer.send('config-renew', {
     config: get()
   })

browser/main/lib/dataApi/resolveStorageNotes.js

@@ -21,10 +21,15 @@ function resolveStorageNotes (storage) {
       return /\.cson$/.test(notePath)
     })
     .map(function parseCSONFile (notePath) {
-      let data = CSON.readFileSync(path.join(notesDirPath, notePath))
-      data.key = path.basename(notePath, '.cson')
-      data.storage = storage.key
-      return data
+      try {
+        let data = CSON.readFileSync(path.join(notesDirPath, notePath))
+        data.key = path.basename(notePath, '.cson')
+        data.storage = storage.key
+        return data
+      } catch (err) {
+        console.error(notePath)
+        throw err
+      }
     })
 
   return Promise.resolve(notes)

browser/main/modals/PreferencesModal/ConfigTab.js

@@ -4,10 +4,10 @@ import styles from './ConfigTab.styl'
 import hljsTheme from 'browser/lib/hljsThemes'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import store from 'browser/main/store'
+import consts from 'browser/lib/consts'
 
 const electron = require('electron')
 const ipc = electron.ipcRenderer
-const ace = window.ace
 
 const OSX = global.process.platform === 'darwin'
 
@@ -153,7 +153,7 @@ class ConfigTab extends React.Component {
         {keymapAlert.message}
       </p>
       : null
-    let aceThemeList = ace.require('ace/ext/themelist')
+    let themes = consts.THEMES
     let hljsThemeList = hljsTheme()
     let { config } = this.state
 
@@ -263,8 +263,8 @@ class ConfigTab extends React.Component {
                 onChange={(e) => this.handleUIChange(e)}
               >
                 {
-                  aceThemeList.themes.map((theme) => {
-                    return (<option value={theme.name} key={theme.name}>{theme.caption}</option>)
+                  themes.map((theme) => {
+                    return (<option value={theme} key={theme}>{theme}</option>)
                   })
                 }
               </select>