use codemirror

browser/finder/NoteDetail.js

@@ -4,12 +4,26 @@ import styles from './NoteDetail.styl'
 import MarkdownPreview from 'browser/components/MarkdownPreview'
 import MarkdownEditor from 'browser/components/MarkdownEditor'
 import CodeEditor from 'browser/components/CodeEditor'
-import modes from 'browser/lib/modes'
+import CodeMirror from 'codemirror'
 
 const electron = require('electron')
 const { clipboard } = electron
 const path = require('path')
 
+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
+  }
+}
 function notify (title, options) {
   if (global.process.platform === 'win32') {
     options.icon = path.join('file://', global.__dirname, '../../resources/app.png')
@@ -118,9 +132,9 @@ class NoteDetail 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}
@@ -134,7 +148,10 @@ class NoteDetail extends React.Component {
             />
             <button styleName='tabView-top-mode'
             >
-              {mode == null ? null : mode.mode}
+              {snippet.mode == null
+                ? 'Not selected'
+                : syntax.name
+              }&nbsp;
             </button>
           </div>
           {snippet.mode === 'markdown'

browser/finder/index.js

@@ -9,7 +9,7 @@ import styles from './FinderMain.styl'
 import StorageSection from './StorageSection'
 import NoteList from './NoteList'
 import NoteDetail from './NoteDetail'
-
+require('!!style!css!stylus?sourceMap!../main/global.styl')
 const electron = require('electron')
 const { remote } = electron
 const { Menu } = remote

browser/finder/ipcClient.js

@@ -86,6 +86,18 @@ nodeIpc.connectTo(
       } else {
         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)
+      }
+      if (config.editor.theme !== 'default') {
+        editorTheme.setAttribute('href', '../node_modules/codemirror/theme/' + config.editor.theme + '.css')
+      }
+
       store.default.dispatch({
         type: 'SET_CONFIG',
         config: config