diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js
index dde3d3c8..fe0b35b1 100644
--- a/browser/components/CodeEditor.js
+++ b/browser/components/CodeEditor.js
@@ -37,6 +37,9 @@ export default class CodeEditor extends React.Component {
}
this.props.onBlur != null && this.props.onBlur(e)
}
+ this.loadStyleHandler = (e) => {
+ this.editor.refresh()
+ }
}
componentDidMount () {
@@ -72,11 +75,16 @@ export default class CodeEditor extends React.Component {
this.editor.on('blur', this.blurHandler)
this.editor.on('change', this.changeHandler)
+
+ let editorTheme = document.getElementById('editorTheme')
+ editorTheme.addEventListener('load', this.loadStyleHandler)
}
componentWillUnmount () {
this.editor.off('blur', this.blurHandler)
this.editor.off('change', this.changeHandler)
+ let editorTheme = document.getElementById('editorTheme')
+ editorTheme.removeEventListener('load', this.loadStyleHandler)
}
componentDidUpdate (prevProps, prevState) {
@@ -86,7 +94,7 @@ export default class CodeEditor extends React.Component {
}
if (prevProps.theme !== this.props.theme) {
this.editor.setOption('theme', this.props.theme)
- needRefresh = true
+ // editor should be refreshed after css loaded
}
if (prevProps.fontSize !== this.props.fontSize) {
needRefresh = true
diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js
index f61a69e4..b92ddae3 100644
--- a/browser/components/MarkdownEditor.js
+++ b/browser/components/MarkdownEditor.js
@@ -114,6 +114,7 @@ class MarkdownEditor extends React.Component {
render () {
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)
@@ -153,6 +154,7 @@ class MarkdownEditor extends React.Component {
codeBlockTheme={config.preview.codeBlockTheme}
codeBlockFontFamily={config.editor.fontFamily}
lineNumber={config.preview.lineNumber}
+ indentSize={editorIndentSize}
ref='preview'
onContextMenu={(e) => this.handleContextMenu(e)}
tabIndex='0'
diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js
index b052c765..b848c775 100644
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -1,11 +1,45 @@
import React, { PropTypes } from 'react'
import markdown from 'browser/lib/markdown'
import _ from 'lodash'
-import hljsTheme from 'browser/lib/hljsThemes'
+import CodeMirror from 'codemirror'
+import consts from 'browser/lib/consts'
+
+const { remote } = require('electron')
+const { app } = remote
+const path = require('path')
const markdownStyle = require('!!css!stylus?sourceMap!./markdown.styl')[0][1]
-const { shell } = require('electron')
+const appPath = 'file://' + (process.env.NODE_ENV === 'production'
+ ? app.getAppPath()
+ : path.resolve())
+function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber) {
+ return `
+@font-face {
+ font-family: 'Lato';
+ src: url('${appPath}/resources/fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
+ url('${appPath}/resources/fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
+ url('${appPath}/resources/fonts/Lato-Regular.ttf') format('truetype');
+ font-style: normal;
+ font-weight: normal;
+ 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(', ')};
+}
+`
+}
+
+const { shell } = require('electron')
const OSX = global.process.platform === 'darwin'
const defaultFontFamily = ['helvetica', 'arial', 'sans-serif']
@@ -68,9 +102,17 @@ export default class MarkdownPreview extends React.Component {
}
componentDidMount () {
- this.refs.root.setAttribute('sandbox', 'allow-same-origin')
+ this.refs.root.setAttribute('sandbox', 'allow-scripts')
this.refs.root.contentWindow.document.body.addEventListener('contextmenu', this.contextMenuHandler)
+
+ this.refs.root.contentWindow.document.head.innerHTML = `
+
+
+
+
+ `
this.rewriteIframe()
+ this.applyStyle()
this.refs.root.contentWindow.document.addEventListener('mousedown', this.mouseDownHandler)
this.refs.root.contentWindow.document.addEventListener('mouseup', this.mouseUpHandler)
@@ -83,14 +125,36 @@ export default class MarkdownPreview extends React.Component {
}
componentDidUpdate (prevProps) {
- if (prevProps.value !== this.props.value ||
- prevProps.fontFamily !== this.props.fontFamily ||
+ if (prevProps.value !== this.props.value) this.rewriteIframe()
+ if (prevProps.fontFamily !== this.props.fontFamily ||
prevProps.fontSize !== this.props.fontSize ||
prevProps.codeBlockFontFamily !== this.props.codeBlockFontFamily ||
prevProps.codeBlockTheme !== this.props.codeBlockTheme ||
prevProps.lineNumber !== this.props.lineNumber ||
- prevProps.theme !== this.props.theme
- ) this.rewriteIframe()
+ prevProps.theme !== this.props.theme) {
+ this.applyStyle()
+ this.rewriteIframe()
+ }
+ }
+
+ applyStyle () {
+ let { fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme } = 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.setCodeTheme(codeBlockTheme)
+ this.getWindow().document.getElementById('style').innerHTML = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, lineNumber)
+ }
+
+ setCodeTheme (theme) {
+ theme = consts.THEMES.some((_theme) => _theme === theme)
+ ? theme
+ : 'default'
+ this.getWindow().document.getElementById('codeTheme').href = `${appPath}/node_modules/codemirror/theme/${theme}.css`
}
rewriteIframe () {
@@ -101,43 +165,7 @@ export default class MarkdownPreview extends React.Component {
el.removeEventListener('click', this.checkboxClickHandler)
})
- let { value, fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, theme } = this.props
- fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
- ? [fontFamily].concat(defaultFontFamily)
- : defaultFontFamily
- codeBlockFontFamily = _.isString(codeBlockFontFamily) && codeBlockFontFamily.trim().length > 0
- ? [codeBlockFontFamily].concat(defaultCodeBlockFontFamily)
- : defaultCodeBlockFontFamily
- codeBlockTheme = hljsTheme().some((theme) => theme.name === codeBlockTheme) ? codeBlockTheme : 'xcode'
-
- this.refs.root.contentWindow.document.head.innerHTML = `
-
-
-
- `
+ let { value, theme, indentSize, codeBlockTheme } = this.props
this.refs.root.contentWindow.document.body.setAttribute('data-theme', theme)
this.refs.root.contentWindow.document.body.innerHTML = markdown.render(value)
@@ -145,9 +173,27 @@ export default class MarkdownPreview extends React.Component {
Array.prototype.forEach.call(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
el.addEventListener('click', this.anchorClickHandler)
})
+
Array.prototype.forEach.call(this.refs.root.contentWindow.document.querySelectorAll('input[type="checkbox"]'), (el) => {
el.addEventListener('click', this.checkboxClickHandler)
})
+
+ codeBlockTheme = consts.THEMES.some((_theme) => _theme === codeBlockTheme)
+ ? codeBlockTheme
+ : 'default'
+
+ Array.prototype.forEach.call(this.refs.root.contentWindow.document.querySelectorAll('.code code'), (el) => {
+ let syntax = CodeMirror.findModeByName(el.className)
+ if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
+ CodeMirror.requireMode(syntax.mode, () => {
+ let content = el.innerHTML
+ el.innerHTML = ''
+ el.parentNode.className += ` cm-s-${codeBlockTheme} CodeMirror`
+ CodeMirror.runMode(content, syntax.mime, el, {
+ tabSize: indentSize
+ })
+ })
+ })
}
focus () {
diff --git a/browser/components/markdown.styl b/browser/components/markdown.styl
index e6f33b2c..f8ee6345 100644
--- a/browser/components/markdown.styl
+++ b/browser/components/markdown.styl
@@ -191,7 +191,7 @@ code
padding 0.2em 0.4em
background-color #f7f7f7
border-radius 3px
- font-size 0.85em
+ font-size 1em
text-decoration none
margin-right 2px
pre
@@ -200,26 +200,36 @@ pre
border-radius 5px
overflow-x auto
margin 0 0 1em
- line-height 1.35
+ display flex
+ line-height 1.4em
+ &.CodeMirror
+ height initial
+ &>code
+ flex 1
+ overflow-x auto
code
- margin 0
background-color inherit
+ margin 0
padding 0
border none
border-radius 0
- pre
- border none
- margin -5px
&>span.lineNumber
display none
- float left
- font-size 0.85em
- margin 0 0.5em 0 -0.5em
+ font-size 1em
+ padding 0.5em 0
+ margin -0.5em 0.5em -0.5em -0.5em
border-right 1px solid
text-align right
+ border-top-left-radius 4px
+ border-bottom-left-radius 4px
+ &.CodeMirror-gutters
+ position initial
+ top initial
+ left initial
+ min-height 0 !important
&>span
display block
- padding 0 .5em 0 1em
+ padding 0 .5em 0
table
display block
width 100%
diff --git a/browser/finder/NoteDetail.js b/browser/finder/NoteDetail.js
index 68d3d5ab..2abaaa96 100644
--- a/browser/finder/NoteDetail.js
+++ b/browser/finder/NoteDetail.js
@@ -185,11 +185,13 @@ class NoteDetail extends React.Component {
return (
' +
- createGutter(str) +
- '' +
- hljs.highlight(lang, str).value +
- ''
- } catch (e) {}
- }
- return '' +
+ return '' +
createGutter(str) +
- '' +
- str.replace(/\&/g, '&').replace(/\/g, '>').replace(/\"/g, '"') +
+ '' +
+ str +
''
}
})
diff --git a/browser/main/modals/PreferencesModal/ConfigTab.js b/browser/main/modals/PreferencesModal/ConfigTab.js
index 2f72dc4c..4091a749 100644
--- a/browser/main/modals/PreferencesModal/ConfigTab.js
+++ b/browser/main/modals/PreferencesModal/ConfigTab.js
@@ -1,7 +1,6 @@
import React, { PropTypes } from 'react'
import CSSModules from 'browser/lib/CSSModules'
import styles from './ConfigTab.styl'
-import hljsTheme from 'browser/lib/hljsThemes'
import ConfigManager from 'browser/main/lib/ConfigManager'
import store from 'browser/main/store'
import consts from 'browser/lib/consts'
@@ -154,7 +153,6 @@ class ConfigTab extends React.Component {
: null
let themes = consts.THEMES
- let hljsThemeList = hljsTheme()
let { config } = this.state
return (
@@ -369,8 +367,8 @@ class ConfigTab extends React.Component {
onChange={(e) => this.handleUIChange(e)}
>
{
- hljsThemeList.map((theme) => {
- return ()
+ themes.map((theme) => {
+ return ()
})
}
diff --git a/lib/finder.html b/lib/finder.html
index 4ab996b0..1b7f12ea 100644
--- a/lib/finder.html
+++ b/lib/finder.html
@@ -8,7 +8,6 @@
-
@@ -43,12 +42,12 @@
const electron = require('electron')
electron.webFrame.setZoomLevelLimits(1, 1)
const _ = require('lodash')
- var scriptUrl = _.find(electron.remote.process.argv, a => a === '--hot')
+ var scriptUrl = _.find(electron.remote.process.argv, (a) => a === '--hot')
? 'http://localhost:8080/assets/finder.js'
: '../compiled/finder.js'
- var scriptEl=document.createElement('script')
- scriptEl.setAttribute("type","text/javascript")
- scriptEl.setAttribute("src", scriptUrl)
+ var scriptEl = document.createElement('script')
+ scriptEl.setAttribute('type', 'text/javascript')
+ scriptEl.setAttribute('src', scriptUrl)
document.body.appendChild(scriptEl)