rewite whole code

add dataApi
renew PreferencesModal

browser/components/CodeEditor.js

@@ -5,6 +5,8 @@ import _ from 'lodash'
 
 const ace = window.ace
 
+const defaultEditorFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace']
+
 export default class CodeEditor extends React.Component {
   constructor (props) {
     super(props)
@@ -94,16 +96,16 @@ export default class CodeEditor extends React.Component {
   }
 
   componentDidMount () {
-    let { mode, value } = this.props
+    let { mode, value, theme, fontSize } = this.props
     this.value = value
     let el = ReactDOM.findDOMNode(this)
     let editor = this.editor = ace.edit(el)
     editor.$blockScrolling = Infinity
     editor.renderer.setShowGutter(true)
-    editor.setTheme('ace/theme/xcode')
+    editor.setTheme('ace/theme/' + theme)
     editor.moveCursorTo(0, 0)
     editor.setReadOnly(!!this.props.readOnly)
-    editor.setFontSize('14')
+    editor.setFontSize(fontSize)
 
     editor.on('blur', this.blurHandler)
 
@@ -135,9 +137,9 @@ export default class CodeEditor extends React.Component {
       : 'text'
     session.setMode('ace/mode/' + syntaxMode)
 
-    session.setUseSoftTabs(this.state.indentType === 'space')
-    session.setTabSize(!isNaN(this.state.indentSize) ? parseInt(this.state.indentSize, 10) : 4)
-    session.setOption('useWorker', false)
+    session.setUseSoftTabs(this.props.indentType === 'space')
+    session.setTabSize(this.props.indentSize)
+    session.setOption('useWorker', true)
     session.setUseWrapMode(true)
     session.setValue(_.isString(value) ? value : '')
 
@@ -154,7 +156,8 @@ export default class CodeEditor extends React.Component {
   componentDidUpdate (prevProps, prevState) {
     let { value } = this.props
     this.value = value
-    var session = this.editor.getSession()
+    let editor = this.editor
+    let session = this.editor.getSession()
 
     if (prevProps.mode !== this.props.mode) {
       let mode = _.find(modes, {name: this.props.mode})
@@ -163,23 +166,18 @@ export default class CodeEditor extends React.Component {
         : 'text'
       session.setMode('ace/mode' + syntaxMode)
     }
-  }
-
-  handleConfigApply (e, config) {
-    // this.setState({
-    //   fontSize: config['editor-font-size'],
-    //   fontFamily: config['editor-font-family'],
-    //   indentType: config['editor-indent-type'],
-    //   indentSize: config['editor-indent-size'],
-    //   themeSyntax: config['theme-syntax']
-    // }, function () {
-    //   var editor = this.editor
-    //   editor.setTheme('ace/theme/' + this.state.themeSyntax)
-
-    //   var session = editor.getSession()
-    //   session.setUseSoftTabs(this.state.indentType === 'space')
-    //   session.setTabSize(!isNaN(this.state.indentSize) ? parseInt(this.state.indentSize, 10) : 4)
-    // })
+    if (prevProps.theme !== this.props.theme) {
+      editor.setTheme('ace/theme/' + this.props.theme)
+    }
+    if (prevProps.fontSize !== this.props.fontSize) {
+      editor.setFontSize(this.props.fontSize)
+    }
+    if (prevProps.indentSize !== this.props.indentSize) {
+      session.setTabSize(this.props.indentSize)
+    }
+    if (prevProps.indentType !== this.props.indentType) {
+      session.setUseSoftTabs(this.props.indentType === 'space')
+    }
   }
 
   handleChange (e) {
@@ -222,8 +220,10 @@ export default class CodeEditor extends React.Component {
   }
 
   render () {
-    let { className } = this.props
-
+    let { className, fontFamily } = this.props
+    fontFamily = _.isString(fontFamily) && fontFamily.length > 0
+      ? [fontFamily].concat(defaultEditorFontFamily)
+      : defaultEditorFontFamily
     return (
       <div
         className={className == null
@@ -231,8 +231,7 @@ export default class CodeEditor extends React.Component {
           : `CodeEditor ${className}`
         }
         style={{
-          fontSize: '14px',
-          fontFamily: 'monospace'
+          fontFamily: fontFamily.join(', ')
         }}
       />
     )
@@ -249,7 +248,12 @@ CodeEditor.propTypes = {
 }
 
 CodeEditor.defaultProps = {
-  readOnly: false
+  readOnly: false,
+  theme: 'xcode',
+  fontSize: 14,
+  fontFamily: 'Monaco, Consolas',
+  indentSize: 4,
+  indentType: 'space'
 }
 
 export default CodeEditor

browser/components/MarkdownEditor.js

@@ -27,19 +27,22 @@ class MarkdownEditor extends React.Component {
   }
 
   handleContextMenu (e) {
-    let newStatus = this.state.status === 'PREVIEW'
-      ? 'CODE'
-      : 'PREVIEW'
-    this.setState({
-      status: newStatus
-    }, () => {
-      if (newStatus === 'CODE') {
-        this.refs.code.focus()
-      } else {
-        this.refs.code.blur()
-        this.refs.preview.focus()
-      }
-    })
+    let { config } = this.props
+    if (config.editor.switchPreview === 'RIGHTCLICK') {
+      let newStatus = this.state.status === 'PREVIEW'
+        ? 'CODE'
+        : 'PREVIEW'
+      this.setState({
+        status: newStatus
+      }, () => {
+        if (newStatus === 'CODE') {
+          this.refs.code.focus()
+        } else {
+          this.refs.code.blur()
+          this.refs.preview.focus()
+        }
+      })
+    }
   }
 
   focus () {
@@ -59,7 +62,14 @@ class MarkdownEditor extends React.Component {
   }
 
   render () {
-    let { className, value } = this.props
+    let { className, value, config } = this.props
+    let editorFontSize = parseInt(config.editor.fontSize, 10)
+    if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
+    let editorIndentSize = parseInt(config.editor.indentSize, 10)
+    if (!(editorFontSize > 0 && editorFontSize < 132)) editorIndentSize = 4
+
+    let previewStyle = {}
+    if (this.props.ignorePreviewPointerEvents) previewStyle.pointerEvents = 'none'
 
     return (
       <div className={className == null
@@ -72,15 +82,23 @@ class MarkdownEditor extends React.Component {
           ref='code'
           mode='markdown'
           value={value}
+          theme={config.editor.theme}
+          fontFamily={config.editor.fontFamily}
+          fontSize={editorFontSize}
+          indentType={config.editor.indentType}
+          indentSize={editorIndentSize}
           onChange={(e) => this.handleChange(e)}
         />
         <MarkdownPreview styleName={this.state.status === 'PREVIEW'
             ? 'preview'
             : 'preview--hide'
           }
-          style={this.props.ignorePreviewPointerEvents
-            ? {pointerEvents: 'none'} : {}
-          }
+          style={previewStyle}
+          fontSize={config.preview.fontSize}
+          fontFamily={config.preview.fontFamily}
+          codeBlockTheme={config.preview.theme}
+          codeBlockFontFamily={config.editor.fontFamily}
+          lineNumber={config.preview.lineNumber}
           ref='preview'
           onContextMenu={(e) => this.handleContextMenu(e)}
           tabIndex='0'

browser/components/MarkdownPreview.js

@@ -1,5 +1,6 @@
 import React, { PropTypes } from 'react'
 import markdown from 'browser/lib/markdown'
+import _ from 'lodash'
 
 const markdownStyle = require('!!css!stylus?sourceMap!./markdown.styl')[0][1]
 const { shell } = require('electron')
@@ -8,6 +9,15 @@ const goExternal = function (e) {
   shell.openExternal(e.target.href)
 }
 
+const OSX = global.process.platform === 'darwin'
+
+const defaultFontFamily = ['helvetica', 'arial', 'sans-serif']
+if (!OSX) {
+  defaultFontFamily.unshift('\'Microsoft YaHei\'')
+  defaultFontFamily.unshift('meiryo')
+}
+const defaultCodeBlockFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace']
+
 export default class MarkdownPreview extends React.Component {
   constructor (props) {
     super(props)
@@ -30,7 +40,12 @@ export default class MarkdownPreview extends React.Component {
   }
 
   componentDidUpdate (prevProps) {
-    if (prevProps.value !== this.props.value) this.rewriteIframe()
+    if (prevProps.value !== this.props.value ||
+      prevProps.fontFamily !== this.props.fontFamily ||
+      prevProps.fontSize !== this.props.fontSize ||
+      prevProps.codeBlockFontFamily !== this.props.codeBlockFontFamily ||
+      prevProps.lineNumber !== this.props.lineNumber
+    ) this.rewriteIframe()
   }
 
   rewriteIframe () {
@@ -38,7 +53,14 @@ export default class MarkdownPreview extends React.Component {
       el.removeEventListener('click', goExternal)
     })
 
-    let { value } = this.props
+    let { value, fontFamily, fontSize, codeBlockFontFamily, lineNumber } = this.props
+    fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
+      ? [fontFamily].concat(defaultFontFamily)
+      : defaultFontFamily
+    codeBlockFontFamily = _.isString(codeBlockFontFamily) && codeBlockFontFamily.trim().length > 0
+      ? [codeBlockFontFamily].concat(defaultCodeBlockFontFamily)
+      : defaultCodeBlockFontFamily
+
     this.refs.root.contentWindow.document.head.innerHTML = `
       <style>
         @font-face {
@@ -51,6 +73,18 @@ export default class MarkdownPreview extends React.Component {
           text-rendering: optimizeLegibility;
         }
         ${markdownStyle}
+        body {
+          font-family: ${fontFamily.join(', ')};
+          font-size: ${fontSize}px;
+        }
+        code {
+          font-family: ${codeBlockFontFamily.join(', ')};
+        }
+        .lineNumber {
+          ${lineNumber && 'display: block !important;'}
+          font-family: ${codeBlockFontFamily.join(', ')};
+          opacity: 0.5;
+        }
       </style>
       <link rel="stylesheet" href="../node_modules/highlight.js/styles/xcode.css" id="hljs-css">
       <link rel="stylesheet" href="../resources/katex.min.css">

browser/components/markdown.styl

@@ -188,7 +188,6 @@ ol
   &>li>ul, &>li>ol
     margin 0
 code
-  font-family Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace
   padding 0.2em 0.4em
   background-color #f7f7f7
   border-radius 3px
@@ -213,9 +212,9 @@ pre
       border none
       margin -5px
   &>span.lineNumber
-    font-family Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace
     display none
     float left
+    font-size 0.85em
     margin 0 0.5em 0 -0.5em
     border-right 1px solid
     text-align right