From 58354061d808c21b55c9c837c34e98f6f58e02de Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Wed, 27 Jun 2018 19:34:58 +0900
Subject: [PATCH] set font-family to editor in Preference > Interface

---
 browser/components/CodeEditor.js              |  2 +-
 browser/lib/consts.js                         | 10 +++++-
 browser/main/modals/PreferencesModal/UiTab.js | 32 +++++++++++++++++--
 3 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js
index 91e7683a..b1d63124 100644
--- a/browser/components/CodeEditor.js
+++ b/browser/components/CodeEditor.js
@@ -14,7 +14,7 @@ const { ipcRenderer } = require('electron')
 
 CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js'
 
-const defaultEditorFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace']
+const defaultEditorFontFamily = consts.DEFAULT_EDITOR_FONT_FAMILY
 const buildCMRulers = (rulers, enableRulers) =>
   enableRulers ? rulers.map(ruler => ({column: ruler})) : []
 
diff --git a/browser/lib/consts.js b/browser/lib/consts.js
index ec811007..84b962eb 100644
--- a/browser/lib/consts.js
+++ b/browser/lib/consts.js
@@ -36,7 +36,15 @@ const consts = {
     'Violet Eggplant'
   ],
   THEMES: ['default'].concat(themes),
-  SNIPPET_FILE: snippetFile
+  SNIPPET_FILE: snippetFile,
+  DEFAULT_EDITOR_FONT_FAMILY: [
+    'Monaco',
+    'Menlo',
+    'Ubuntu Mono',
+    'Consolas',
+    'source-code-pro',
+    'monospace'
+  ]
 }
 
 module.exports = consts
diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js
index ce149f65..55b0050c 100644
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -17,6 +17,8 @@ const OSX = global.process.platform === 'darwin'
 const electron = require('electron')
 const ipc = electron.ipcRenderer
 
+const defaultEditorFontFamily = consts.DEFAULT_EDITOR_FONT_FAMILY
+
 class UiTab extends React.Component {
   constructor (props) {
     super(props)
@@ -165,6 +167,10 @@ class UiTab extends React.Component {
     const codemirrorSampleCode = 'function iamHappy (happy) {\n\tif (happy) {\n\t  console.log("I am Happy!")\n\t} else {\n\t  console.log("I am not Happy!")\n\t}\n};'
     const enableEditRulersStyle = config.editor.enableRulers ? 'block' : 'none'
     const customCSS = config.preview.customCSS
+    let { fontFamily } = config.editor
+    fontFamily = _.isString(fontFamily) && fontFamily.length > 0
+      ? [fontFamily].concat(defaultEditorFontFamily)
+      : defaultEditorFontFamily
     return (
       <div styleName='root'>
         <div styleName='group'>
@@ -262,8 +268,16 @@ class UiTab extends React.Component {
                   })
                 }
               </select>
-              <div styleName='code-mirror'>
-                <ReactCodeMirror ref={e => (this.codeMirrorInstance = e)} value={codemirrorSampleCode} options={{ lineNumbers: true, readOnly: true, mode: 'javascript', theme: codemirrorTheme }} />
+              <div styleName='code-mirror' style={{fontFamily}}>
+                <ReactCodeMirror
+                  ref={e => (this.codeMirrorInstance = e)}
+                  value={codemirrorSampleCode}
+                  options={{
+                    lineNumbers: true,
+                    readOnly: true,
+                    mode: 'javascript',
+                    theme: codemirrorTheme
+                  }} />
               </div>
             </div>
           </div>
@@ -596,7 +610,19 @@ class UiTab extends React.Component {
                 type='checkbox'
               />&nbsp;
               {i18n.__('Allow custom CSS for preview')}
-              <ReactCodeMirror onChange={e => this.handleUIChange(e)} ref={e => (this.customCSSCM = e)} value={config.preview.customCSS} options={{ lineNumbers: true, mode: 'css', theme: codemirrorTheme }} />
+              <div style={{fontFamily}}>
+                <ReactCodeMirror
+                  width='400px'
+                  height='400px'
+                  onChange={e => this.handleUIChange(e)}
+                  ref={e => (this.customCSSCM = e)}
+                  value={config.preview.customCSS}
+                  options={{
+                    lineNumbers: true,
+                    mode: 'css',
+                    theme: codemirrorTheme
+                  }} />
+              </div>
             </div>
           </div>