Merge pull request #2138 from BoostIO/improve-uitab-editor

Improve uitab editor

browser/components/CodeEditor.js

@@ -11,10 +11,10 @@ import crypto from 'crypto'
 import consts from 'browser/lib/consts'
 import fs from 'fs'
 const { ipcRenderer } = require('electron')
+import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'
 
 CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js'
 
-const defaultEditorFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace']
 const buildCMRulers = (rulers, enableRulers) =>
   enableRulers ? rulers.map(ruler => ({column: ruler})) : []
 
@@ -495,10 +495,7 @@ export default class CodeEditor extends React.Component {
 
   render () {
     const {className, fontSize} = this.props
-    let fontFamily = this.props.fontFamily
-    fontFamily = _.isString(fontFamily) && fontFamily.length > 0
-      ? [fontFamily].concat(defaultEditorFontFamily)
-      : defaultEditorFontFamily
+    const fontFamily = normalizeEditorFontFamily(this.props.fontFamily)
     const width = this.props.width
     return (
       <div
@@ -509,7 +506,7 @@ export default class CodeEditor extends React.Component {
         ref='root'
         tabIndex='-1'
         style={{
-          fontFamily: fontFamily.join(', '),
+          fontFamily,
           fontSize: fontSize,
           width: width
         }}

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

browser/lib/normalizeEditorFontFamily.js

@@ -0,0 +1,9 @@
+import consts from 'browser/lib/consts'
+import isString from 'lodash/isString'
+
+export default function normalizeEditorFontFamily (fontFamily) {
+  const defaultEditorFontFamily = consts.DEFAULT_EDITOR_FONT_FAMILY
+  return isString(fontFamily) && fontFamily.length > 0
+    ? [fontFamily].concat(defaultEditorFontFamily).join(', ')
+    : defaultEditorFontFamily.join(', ')
+}

browser/main/modals/PreferencesModal/UiTab.js

@@ -11,6 +11,7 @@ import 'codemirror-mode-elixir'
 import _ from 'lodash'
 import i18n from 'browser/lib/i18n'
 import { getLanguages } from 'browser/lib/Languages'
+import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'
 
 const OSX = global.process.platform === 'darwin'
 
@@ -164,7 +165,7 @@ class UiTab extends React.Component {
     const { config, codemirrorTheme } = this.state
     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
+    const fontFamily = normalizeEditorFontFamily(config.editor.fontFamily)
     return (
       <div styleName='root'>
         <div styleName='group'>
@@ -262,8 +263,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 +605,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>
 

tests/lib/normalize-editor-font-family-test.js

@@ -0,0 +1,16 @@
+/**
+ * @fileoverview Unit test for browser/lib/normalizeEditorFontFamily
+ */
+import test from 'ava'
+import normalizeEditorFontFamily from '../../browser/lib/normalizeEditorFontFamily'
+import consts from '../../browser/lib/consts'
+const defaultEditorFontFamily = consts.DEFAULT_EDITOR_FONT_FAMILY
+
+test('normalizeEditorFontFamily() should return default font family (string[])', t => {
+  t.is(normalizeEditorFontFamily(), defaultEditorFontFamily.join(', '))
+})
+
+test('normalizeEditorFontFamily(["hoge", "huga"]) should return default font family connected with arg.', t => {
+  const arg = 'font1, font2'
+  t.is(normalizeEditorFontFamily(arg), `${arg}, ${defaultEditorFontFamily.join(', ')}`)
+})