From 58354061d808c21b55c9c837c34e98f6f58e02de Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Wed, 27 Jun 2018 19:34:58 +0900 Subject: [PATCH 1/4] 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 (
@@ -262,8 +268,16 @@ class UiTab extends React.Component { }) } -
- (this.codeMirrorInstance = e)} value={codemirrorSampleCode} options={{ lineNumbers: true, readOnly: true, mode: 'javascript', theme: codemirrorTheme }} /> +
+ (this.codeMirrorInstance = e)} + value={codemirrorSampleCode} + options={{ + lineNumbers: true, + readOnly: true, + mode: 'javascript', + theme: codemirrorTheme + }} />
@@ -596,7 +610,19 @@ class UiTab extends React.Component { type='checkbox' />  {i18n.__('Allow custom CSS for preview')} - this.handleUIChange(e)} ref={e => (this.customCSSCM = e)} value={config.preview.customCSS} options={{ lineNumbers: true, mode: 'css', theme: codemirrorTheme }} /> +
+ this.handleUIChange(e)} + ref={e => (this.customCSSCM = e)} + value={config.preview.customCSS} + options={{ + lineNumbers: true, + mode: 'css', + theme: codemirrorTheme + }} /> +
From 8f4c92e251fcc0f9189c79408b5656b5ef4f08e0 Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Wed, 27 Jun 2018 19:48:09 +0900 Subject: [PATCH 2/4] extract normalizeEditorFonrFamily --- browser/components/CodeEditor.js | 7 ++----- browser/lib/normalizeEditorFontFamily.js | 9 +++++++++ browser/main/modals/PreferencesModal/UiTab.js | 8 ++------ 3 files changed, 13 insertions(+), 11 deletions(-) create mode 100644 browser/lib/normalizeEditorFontFamily.js diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js index b1d63124..de542f49 100644 --- a/browser/components/CodeEditor.js +++ b/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 = consts.DEFAULT_EDITOR_FONT_FAMILY 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 (
0 + ? [fontFamily].concat(defaultEditorFontFamily) + : defaultEditorFontFamily +} diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js index 55b0050c..56d8d19c 100644 --- a/browser/main/modals/PreferencesModal/UiTab.js +++ b/browser/main/modals/PreferencesModal/UiTab.js @@ -11,14 +11,13 @@ 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' const electron = require('electron') const ipc = electron.ipcRenderer -const defaultEditorFontFamily = consts.DEFAULT_EDITOR_FONT_FAMILY - class UiTab extends React.Component { constructor (props) { super(props) @@ -167,10 +166,7 @@ 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 + const fontFamily = normalizeEditorFontFamily(config.editor.fontFamily) return (
From 95c10a1de7f3e8d75c7c5fd5437326a4be4a461b Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Wed, 27 Jun 2018 20:42:01 +0900 Subject: [PATCH 3/4] add test --- browser/components/CodeEditor.js | 2 +- browser/lib/normalizeEditorFontFamily.js | 4 ++-- tests/lib/normalize-editor-font-family-test.js | 16 ++++++++++++++++ 3 files changed, 19 insertions(+), 3 deletions(-) create mode 100644 tests/lib/normalize-editor-font-family-test.js diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js index de542f49..a4d2278e 100644 --- a/browser/components/CodeEditor.js +++ b/browser/components/CodeEditor.js @@ -506,7 +506,7 @@ export default class CodeEditor extends React.Component { ref='root' tabIndex='-1' style={{ - fontFamily: fontFamily.join(', '), + fontFamily, fontSize: fontSize, width: width }} diff --git a/browser/lib/normalizeEditorFontFamily.js b/browser/lib/normalizeEditorFontFamily.js index 290e452a..a2a2ec31 100644 --- a/browser/lib/normalizeEditorFontFamily.js +++ b/browser/lib/normalizeEditorFontFamily.js @@ -4,6 +4,6 @@ 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) - : defaultEditorFontFamily + ? [fontFamily].concat(defaultEditorFontFamily).join(', ') + : defaultEditorFontFamily.join(', ') } diff --git a/tests/lib/normalize-editor-font-family-test.js b/tests/lib/normalize-editor-font-family-test.js new file mode 100644 index 00000000..aacd03ac --- /dev/null +++ b/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(', ')}`) +}) From 009573584198f50fb484da8e9cd1b485f2e409a0 Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Wed, 27 Jun 2018 20:42:19 +0900 Subject: [PATCH 4/4] fix from eslint --- browser/main/modals/PreferencesModal/UiTab.js | 1 - 1 file changed, 1 deletion(-) diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js index 56d8d19c..aa3568e7 100644 --- a/browser/main/modals/PreferencesModal/UiTab.js +++ b/browser/main/modals/PreferencesModal/UiTab.js @@ -165,7 +165,6 @@ 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 (