From 743b220953f85bd995594707289c2d052163b749 Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Sat, 4 Feb 2017 14:41:26 +0900 Subject: [PATCH 1/4] unfinished syntaxHighLightCheck --- .../PreferencesModal/CheckHighlightEditor.js | 59 +++++++++++++++++++ browser/main/modals/PreferencesModal/UiTab.js | 8 ++- 2 files changed, 65 insertions(+), 2 deletions(-) create mode 100644 browser/main/modals/PreferencesModal/CheckHighlightEditor.js diff --git a/browser/main/modals/PreferencesModal/CheckHighlightEditor.js b/browser/main/modals/PreferencesModal/CheckHighlightEditor.js new file mode 100644 index 00000000..e656733a --- /dev/null +++ b/browser/main/modals/PreferencesModal/CheckHighlightEditor.js @@ -0,0 +1,59 @@ +import React, { PropTypes } from 'react' +import CodeMirror from 'codemirror' +import _ from 'lodash' +const defaultEditorFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace'] + +export default class CheckHighlightEditor extends React.Component { + constructor (props) { + super(props) + } + + componentDidMount () { + this.value = this.props.value + this.editor = CodeMirror(this.refs.root, { + value: this.props.value, + lineNumbers: true, + lineWrapping: true, + theme: this.props.theme, + indentUnit: 4, + tabSize: 4, + inputStyle: 'textarea' + }) + + this.setMode(this.props.mode) + + let editorTheme = document.getElementById('editorTheme') + } + + setMode(mode) { + let syntax = CodeMirror.findModeByName('ejs') + } + + render() { + let { className, fontFamily } = this.props + fontFamily = _.isString(fontFamily) && fontFamily.length > 0 + ? [fontFamily].concat(defaultEditorFontFamily) + : defaultEditorFontFamily + return ( +
+ ) + } +} + +CheckHighlightEditor.propTypes = { + value: PropTypes.string.isRequired, + mode: PropTypes.string, + theme: PropTypes.string.isRequired, + className: PropTypes.string, +} + +CheckHighlightEditor.defaultProps = { + readOnly: true, + theme: 'base16-dark', + fontSize: 14, + fontFamily: 'Monaco, Consolas', + indentSize: 4, + indentType: 'space' +} diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js index 47903f87..c06858f3 100644 --- a/browser/main/modals/PreferencesModal/UiTab.js +++ b/browser/main/modals/PreferencesModal/UiTab.js @@ -4,6 +4,7 @@ import styles from './ConfigTab.styl' import ConfigManager from 'browser/main/lib/ConfigManager' import store from 'browser/main/store' import consts from 'browser/lib/consts' +import CheckHighlghtEditor from '../PreferencesModal/CheckHighlightEditor' const OSX = global.process.platform === 'darwin' @@ -18,7 +19,6 @@ class UiTab extends React.Component { handleUIChange (e) { let { config } = this.state - config.ui = { theme: this.refs.uiTheme.value, disableDirectWrite: this.refs.uiD2w != null @@ -62,7 +62,6 @@ class UiTab extends React.Component { render () { const themes = consts.THEMES const { config } = this.state - return (
@@ -113,6 +112,11 @@ class UiTab extends React.Component { }) } +
From 7b5a7aabeda9ec88506f8275beace5f065f4e667 Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Thu, 16 Feb 2017 13:00:45 +0900 Subject: [PATCH 2/4] add HighLightCheckEditor --- .../PreferencesModal/CheckHighlightEditor.js | 59 ------------------- .../modals/PreferencesModal/ConfigTab.styl | 7 +++ browser/main/modals/PreferencesModal/UiTab.js | 48 ++++++++++++--- package.json | 1 + 4 files changed, 47 insertions(+), 68 deletions(-) delete mode 100644 browser/main/modals/PreferencesModal/CheckHighlightEditor.js diff --git a/browser/main/modals/PreferencesModal/CheckHighlightEditor.js b/browser/main/modals/PreferencesModal/CheckHighlightEditor.js deleted file mode 100644 index e656733a..00000000 --- a/browser/main/modals/PreferencesModal/CheckHighlightEditor.js +++ /dev/null @@ -1,59 +0,0 @@ -import React, { PropTypes } from 'react' -import CodeMirror from 'codemirror' -import _ from 'lodash' -const defaultEditorFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace'] - -export default class CheckHighlightEditor extends React.Component { - constructor (props) { - super(props) - } - - componentDidMount () { - this.value = this.props.value - this.editor = CodeMirror(this.refs.root, { - value: this.props.value, - lineNumbers: true, - lineWrapping: true, - theme: this.props.theme, - indentUnit: 4, - tabSize: 4, - inputStyle: 'textarea' - }) - - this.setMode(this.props.mode) - - let editorTheme = document.getElementById('editorTheme') - } - - setMode(mode) { - let syntax = CodeMirror.findModeByName('ejs') - } - - render() { - let { className, fontFamily } = this.props - fontFamily = _.isString(fontFamily) && fontFamily.length > 0 - ? [fontFamily].concat(defaultEditorFontFamily) - : defaultEditorFontFamily - return ( -
- ) - } -} - -CheckHighlightEditor.propTypes = { - value: PropTypes.string.isRequired, - mode: PropTypes.string, - theme: PropTypes.string.isRequired, - className: PropTypes.string, -} - -CheckHighlightEditor.defaultProps = { - readOnly: true, - theme: 'base16-dark', - fontSize: 14, - fontFamily: 'Monaco, Consolas', - indentSize: 4, - indentType: 'space' -} diff --git a/browser/main/modals/PreferencesModal/ConfigTab.styl b/browser/main/modals/PreferencesModal/ConfigTab.styl index 896b06ed..6bb12f86 100644 --- a/browser/main/modals/PreferencesModal/ConfigTab.styl +++ b/browser/main/modals/PreferencesModal/ConfigTab.styl @@ -98,10 +98,17 @@ margin-left: 10px font-size: 12px +.code-mirror + width 400px + height 140px + margin-top 10px + margin-bottom 10px + colorDarkControl() border-color $ui-dark-borderColor background-color $ui-dark-backgroundColor color $ui-dark-text-color + body[data-theme="dark"] .root color $ui-dark-text-color diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js index c06858f3..9b3a0b3e 100644 --- a/browser/main/modals/PreferencesModal/UiTab.js +++ b/browser/main/modals/PreferencesModal/UiTab.js @@ -4,7 +4,7 @@ import styles from './ConfigTab.styl' import ConfigManager from 'browser/main/lib/ConfigManager' import store from 'browser/main/store' import consts from 'browser/lib/consts' -import CheckHighlghtEditor from '../PreferencesModal/CheckHighlightEditor' +import CodeMirror from 'react-codemirror' const OSX = global.process.platform === 'darwin' @@ -13,12 +13,28 @@ class UiTab extends React.Component { super(props) this.state = { - config: props.config + config: props.config, + options: { + lineNumbers: true, + theme: props.config.editor.theme, + readOnly: true, + mode: 'javascript' + }, + code: ' 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};' } } handleUIChange (e) { - let { config } = this.state + let { config, options } = this.state + let checkHighLight = document.getElementById('checkHighLight') + + if (checkHighLight == null) { + checkHighLight = document.createElement('link') + checkHighLight.setAttribute('id', 'checkHighLight') + checkHighLight.setAttribute('rel', 'stylesheet') + document.head.appendChild(checkHighLight) + } + config.ui = { theme: this.refs.uiTheme.value, disableDirectWrite: this.refs.uiD2w != null @@ -41,7 +57,23 @@ class UiTab extends React.Component { lineNumber: this.refs.previewLineNumber.checked } + + + let newOptions = { + lineNumbers: true, + theme: config.editor.theme, + readOnly: true, + mode: 'javascript' + } + + if (newOptions.theme !== options.theme) { + checkHighLight.setAttribute('href', '../node_modules/codemirror/theme/' + newOptions.theme + '.css') + } + + this.setState({options: newOptions}) + this.setState({ config }) + } handleSaveUIClick (e) { @@ -61,7 +93,7 @@ class UiTab extends React.Component { render () { const themes = consts.THEMES - const { config } = this.state + const { config, options } = this.state return (
@@ -112,11 +144,9 @@ class UiTab extends React.Component { }) } - +
+ +
diff --git a/package.json b/package.json index 7a0df7c8..9cf16f8f 100644 --- a/package.json +++ b/package.json @@ -67,6 +67,7 @@ "node-ipc": "^8.1.0", "raphael": "^2.2.7", "react": "^15.0.2", + "react-codemirror": "^0.3.0", "react-dom": "^15.0.2", "react-redux": "^4.4.5", "redux": "^3.5.2", From 5a201dd1b9ab8a777b54100a18412660c717d5bb Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Sat, 18 Feb 2017 12:26:38 +0900 Subject: [PATCH 3/4] correction the pointed out code --- browser/main/modals/PreferencesModal/UiTab.js | 77 ++++++++----------- 1 file changed, 32 insertions(+), 45 deletions(-) diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js index 9b3a0b3e..7e32cdbb 100644 --- a/browser/main/modals/PreferencesModal/UiTab.js +++ b/browser/main/modals/PreferencesModal/UiTab.js @@ -14,66 +14,52 @@ class UiTab extends React.Component { this.state = { config: props.config, - options: { - lineNumbers: true, - theme: props.config.editor.theme, - readOnly: true, - mode: 'javascript' - }, - code: ' 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};' + codemirrorTheme: props.config.editor.theme } } handleUIChange (e) { - let { config, options } = this.state + let { codemirrorTheme } = this.state let checkHighLight = document.getElementById('checkHighLight') - if (checkHighLight == null) { + if (checkHighLight === null) { checkHighLight = document.createElement('link') checkHighLight.setAttribute('id', 'checkHighLight') checkHighLight.setAttribute('rel', 'stylesheet') document.head.appendChild(checkHighLight) } - config.ui = { - theme: this.refs.uiTheme.value, - disableDirectWrite: this.refs.uiD2w != null - ? this.refs.uiD2w.checked - : false - } - config.editor = { - theme: this.refs.editorTheme.value, - fontSize: this.refs.editorFontSize.value, - fontFamily: this.refs.editorFontFamily.value, - indentType: this.refs.editorIndentType.value, - indentSize: this.refs.editorIndentSize.value, - switchPreview: this.refs.editorSwitchPreview.value, - keyMap: this.refs.editorKeyMap.value - } - config.preview = { - fontSize: this.refs.previewFontSize.value, - fontFamily: this.refs.previewFontFamily.value, - codeBlockTheme: this.refs.previewCodeBlockTheme.value, - lineNumber: this.refs.previewLineNumber.checked + const newConfig = { + ui: { + theme: this.refs.uiTheme.value, + disableDirectWrite: this.refs.uiD2w != null + ? this.refs.uiD2w.checked + : false + }, + editor: { + theme: this.refs.editorTheme.value, + fontSize: this.refs.editorFontSize.value, + fontFamily: this.refs.editorFontFamily.value, + indentType: this.refs.editorIndentType.value, + indentSize: this.refs.editorIndentSize.value, + switchPreview: this.refs.editorSwitchPreview.value, + keyMap: this.refs.editorKeyMap.value + }, + preview: { + fontSize: this.refs.previewFontSize.value, + fontFamily: this.refs.previewFontFamily.value, + codeBlockTheme: this.refs.previewCodeBlockTheme.value, + lineNumber: this.refs.previewLineNumber.checked + } } + const newCodemirrorTheme = this.refs.editorTheme.value - - let newOptions = { - lineNumbers: true, - theme: config.editor.theme, - readOnly: true, - mode: 'javascript' + if (newCodemirrorTheme !== codemirrorTheme) { + checkHighLight.setAttribute('href', '../node_modules/codemirror/theme/' + newCodemirrorTheme + '.css') } - if (newOptions.theme !== options.theme) { - checkHighLight.setAttribute('href', '../node_modules/codemirror/theme/' + newOptions.theme + '.css') - } - - this.setState({options: newOptions}) - - this.setState({ config }) - + this.setState({ config: newConfig, codemirrorTheme: newCodemirrorTheme }) } handleSaveUIClick (e) { @@ -93,7 +79,8 @@ class UiTab extends React.Component { render () { const themes = consts.THEMES - const { config, options } = this.state + 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};' return (
@@ -145,7 +132,7 @@ class UiTab extends React.Component { }
- +
From a74651b515bce766218663213419f6600573b2fd Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Sat, 25 Mar 2017 15:32:45 +0900 Subject: [PATCH 4/4] load javascript mode of codemirror & clean up dirty codes --- browser/main/modals/PreferencesModal/UiTab.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js index 7e32cdbb..e3f8bc62 100644 --- a/browser/main/modals/PreferencesModal/UiTab.js +++ b/browser/main/modals/PreferencesModal/UiTab.js @@ -4,22 +4,26 @@ import styles from './ConfigTab.styl' import ConfigManager from 'browser/main/lib/ConfigManager' import store from 'browser/main/store' import consts from 'browser/lib/consts' -import CodeMirror from 'react-codemirror' +import ReactCodeMirror from 'react-codemirror' +import CodeMirror from 'codemirror' const OSX = global.process.platform === 'darwin' class UiTab extends React.Component { constructor (props) { super(props) - this.state = { config: props.config, codemirrorTheme: props.config.editor.theme } } + componentWillMount () { + CodeMirror.autoLoadMode(ReactCodeMirror, 'javascript') + } + handleUIChange (e) { - let { codemirrorTheme } = this.state + const { codemirrorTheme } = this.state let checkHighLight = document.getElementById('checkHighLight') if (checkHighLight === null) { @@ -56,7 +60,7 @@ class UiTab extends React.Component { const newCodemirrorTheme = this.refs.editorTheme.value if (newCodemirrorTheme !== codemirrorTheme) { - checkHighLight.setAttribute('href', '../node_modules/codemirror/theme/' + newCodemirrorTheme + '.css') + checkHighLight.setAttribute('href', `../node_modules/codemirror/theme/${newCodemirrorTheme}.css`) } this.setState({ config: newConfig, codemirrorTheme: newCodemirrorTheme }) @@ -132,7 +136,7 @@ class UiTab extends React.Component { }
- +