fix #5 while also substituting codemirror with react-ace

app/package.json

@@ -16,6 +16,7 @@
     "moment": "~2.17.1",
     "react-addons-css-transition-group": "~15.4.0",
     "react": "~15.4.0",
+    "react-ace": "~5.2.0",
     "react-codemirror": "~0.3.0",
     "react-dom": "~15.4.0",
     "react-redux": "~4.4.5",

app/styles.css

@@ -101,7 +101,7 @@ input, button, textarea, :focus {
 ::-webkit-scrollbar-thumb {
     -webkit-border-radius: 10px;
     border-radius: 10px;
-    background: rgba(52, 104, 122, 0.3);
+    background: rgba(52, 104, 122, 0.6);
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
 }
 

package.json

@@ -68,6 +68,7 @@
     "mocha": "~3.1.2",
     "moment": "~2.17.1",
     "react": "~15.6.1",
+    "react-ace": "~5.2.0",
     "react-addons-css-transition-group": "~15.4.0",
     "react-addons-test-utils": "~15.4.1",
     "react-codemirror": "~0.3.0",

src/renderer/actions.ts

@@ -37,6 +37,9 @@ export const APPLY_INITIAL_STATE = 'APPLY_INITIAL_STATE';
 export const SET_WEBAPI_STATUS = 'SET_WEBAPI_STATUS';
 export const SET_TASK_STATE = 'SET_TASK_STATE';
 export const APPLY_INITIAL_SOURCE_FILE_DIRECTORY = 'APPLY_INITIAL_SOURCE_FILE_DIRECTORY';
+export const UPDATE_CHD_TEMP = 'UPDATE_CHD_TEMP';
+export const UPDATE_CNF_TEMP = 'UPDATE_CNF_TEMP';
+export const UPDATE_CST_TEMP = 'UPDATE_CST_TEMP';
 
 const CANCELLED_CODE = 999;
 const DEFAULT_WORKSPACE_NAME = 'default';
@@ -79,6 +82,18 @@ export function updateSelectedProcesses(processId: number[]) {
     return {type: UPDATE_SELECTED_PROCESSES, payload: processId};
 }
 
+export function updateChdTemp(newChdTemp: ProcessConfigurations){
+    return {type: UPDATE_CHD_TEMP, payload: newChdTemp};
+}
+
+export function updateCnfTemp(newCnfTemp: ProcessConfigurations){
+    return {type: UPDATE_CNF_TEMP, payload: newCnfTemp};
+}
+
+export function updateCstTemp(newCstTemp: ProcessConfigurations){
+    return {type: UPDATE_CST_TEMP, payload: newCstTemp};
+}
+
 export function updateUnsavedConfigStatus(status: boolean) {
     return {type: UPDATE_UNSAVED_CONFIG_STATUS, payload: status};
 }

src/renderer/components/panels/ConfigurationEditorPanel.tsx

@@ -1,10 +1,20 @@
-import * as React from "react";
-import * as CodeMirror from "react-codemirror";
-import {ConfigurationEditor} from "../ConfigurationEditor";
-import {connect, Dispatch} from "react-redux";
-import {ConfigurationVersion, ProcessConfigurations, State} from "../../state";
-import {updateUnsavedConfigStatus, upgradeConfigurations} from "../../actions";
-import * as selector from "../../selectors";
+import * as React from 'react';
+import {ConfigurationEditor} from '../ConfigurationEditor';
+import {connect, Dispatch} from 'react-redux';
+import {ConfigurationVersion, ProcessConfigurations, State} from '../../state';
+import {
+    updateChdTemp,
+    updateCnfTemp,
+    updateCstTemp,
+    updateUnsavedConfigStatus,
+    upgradeConfigurations
+} from '../../actions';
+import * as selector from '../../selectors';
+import AceEditor from 'react-ace';
+import 'brace/mode/json';
+import 'brace/snippets/json';
+import 'brace/theme/monokai';
+import 'brace/ext/language_tools';
 
 interface IConfigurationEditorPanelProps {
     dispatch?: Dispatch<State>;
@@ -18,7 +28,7 @@ interface IConfigurationEditorPanelProps {
     configType: string;
 }
 
-interface  ConfigurationEditorPanelOwnProps {
+interface ConfigurationEditorPanelOwnProps {
     codeEditorActive: boolean;
     isConfigEditable: boolean;
     configType: string;
@@ -46,15 +56,8 @@ class ConfigurationEditorPanel extends React.Component<IConfigurationEditorPanel
         const configVersion = ConfigurationEditorPanel.getConfigVersion(props[props.configType]);
         this.state = {
             configTemp: props[props.configType],
-            configVersion: configVersion,
-            options: {
-                lineNumbers: true,
-                mode: {
-                    name: "javascript",
-                    json: true
-                },
-                lineWrapping: true
-            }
+            configTempValid: false,
+            configVersion: configVersion
         };
     };
 
@@ -66,19 +69,34 @@ class ConfigurationEditorPanel extends React.Component<IConfigurationEditorPanel
         });
     }
 
-    private updateConfigCode = (newCode: string) => {
-        if (!(this.state.configTemp == JSON.parse(newCode))) {
-            this.props.dispatch(updateUnsavedConfigStatus(true));
+    private updateLocalConfigCode = (newCode: string) => {
+        try {
+            if (!(this.state.configTemp == JSON.parse(newCode))) {
+                this.props.dispatch(updateUnsavedConfigStatus(true));
+            }
+            this.setState({
+                configTemp: JSON.parse(newCode),
+                configTempValid: true
+            })
+        } catch (err) {
+            console.warn('error when parsing json', err);
+        }
+    };
+
+    private updateConfigCode = () => {
+        if (this.props.configType === 'chd') {
+            this.props.dispatch(updateChdTemp(this.state.configTemp));
+        } else if (this.props.configType === 'cnf') {
+            this.props.dispatch(updateCnfTemp(this.state.configTemp));
+        } else if (this.props.configType === 'cst') {
+            this.props.dispatch(updateCstTemp(this.state.configTemp));
         }
-        this.setState({
-            configTemp: JSON.parse(newCode),
-        });
     };
 
     private static getConfigVersion(config: ProcessConfigurations): number {
         if (config) {
-            if ("__metainf__" in config) {
-                return config["__metainf__"]["version"];
+            if ('__metainf__' in config) {
+                return config['__metainf__']['version'];
             } else {
                 return CONFIGURATION_VERSION_NOT_FOUND;
             }
@@ -104,27 +122,39 @@ class ConfigurationEditorPanel extends React.Component<IConfigurationEditorPanel
     };
 
     render() {
-        const codeMirrorOptions = Object.assign({}, this.state.options, {readOnly: !this.props.isConfigEditable});
         return (
             <div className="panel-flexbox-configs">
                 {this.props.codeEditorActive
                     ?
-                    <CodeMirror
-                        value={this.state.configTemp ? JSON.stringify(this.state.configTemp, null, 4) : "please select a configuration"}
-                        onChange={this.updateConfigCode}
-                        options={codeMirrorOptions}
-                        className="dedop-codemirror"
+                    <AceEditor
+                        mode="json"
+                        theme="monokai"
+                        name="Configuration Editor"
+                        editorProps={{$blockScrolling: true}}
+                        showGutter={false}
+                        setOptions={{
+                            enableBasicAutocompletion: true,
+                            tabSize: 2,
+                            useWorker: false
+                        }}
+                        value={this.state.configTemp ? JSON.stringify(this.state.configTemp, null, 4) : 'please select a configuration'}
+                        width='100%'
+                        height='100%'
+                        showPrintMargin={false}
+                        readOnly={!this.props.isConfigEditable}
+                        onChange={this.updateLocalConfigCode}
+                        onBlur={this.updateConfigCode}
                     />
                     :
                     (
                         this.state.configVersion != CONFIGURATION_NOT_FOUND
                             ?
                             <div>
                                 <span
-                                    className={"pt-tag ".concat(this.state.configVersion < this.props.defaultConfVersion[this.props.configType] ? "pt-intent-warning" : "pt-intent-success")}
+                                    className={'pt-tag '.concat(this.state.configVersion < this.props.defaultConfVersion[this.props.configType] ? 'pt-intent-warning' : 'pt-intent-success')}
                                     style={{opacity: 0.5}}
                                 >
-                                    Version {this.state.configVersion >= 0 ? this.state.configVersion : "N/A"}
+                                    Version {this.state.configVersion >= 0 ? this.state.configVersion : 'N/A'}
                                 </span>
                                 {
                                     this.state.configVersion == CONFIGURATION_VERSION_NOT_FOUND || this.state.configVersion < this.props.defaultConfVersion[this.props.configType]

src/renderer/components/tabs/ConfigurationTabs.tsx

@@ -1,29 +1,31 @@
-import * as React from "react";
-import {ProcessConfigurations, State} from "../../state";
-import {Tab2, Tabs2} from "@blueprintjs/core";
-import "codemirror/mode/javascript/javascript";
-import {connect, Dispatch} from "react-redux";
+import * as React from 'react';
+import {ProcessConfigurations, State} from '../../state';
+import {Tab2, Tabs2} from '@blueprintjs/core';
+import {connect, Dispatch} from 'react-redux';
+import * as selector from '../../selectors';
 import {
     saveConfiguration,
     updateConfigEditorMode,
     updateConfigurationTab,
     updateUnsavedConfigStatus
-} from "../../actions";
-import * as selector from "../../selectors";
-import ConfigurationEditorPanel from "../panels/ConfigurationEditorPanel";
+} from '../../actions';
+import ConfigurationEditorPanel from '../panels/ConfigurationEditorPanel';
 
 interface IConfigurationTabsProps {
     dispatch?: Dispatch<State>;
-    chd?: ProcessConfigurations;
-    cnf?: ProcessConfigurations;
-    cst?: ProcessConfigurations;
     codeEditorActive?: boolean;
     selectedConfigurationName?: string;
     currentTab?: number;
     unsavedConfigChanges?: boolean;
     isCnfEditable?: boolean;
     isChdEditable?: boolean;
     isCstEditable?: boolean;
+    chd?: ProcessConfigurations;
+    cnf?: ProcessConfigurations;
+    cst?: ProcessConfigurations;
+    chdTemp: ProcessConfigurations;
+    cnfTemp: ProcessConfigurations;
+    cstTemp: ProcessConfigurations;
 }
 
 function mapStateToProps(state: State): IConfigurationTabsProps {
@@ -38,6 +40,9 @@ function mapStateToProps(state: State): IConfigurationTabsProps {
         isCnfEditable: state.control.isCnfEditable,
         isChdEditable: state.control.isChdEditable,
         isCstEditable: state.control.isCstEditable,
+        chdTemp: state.control.chdTemp,
+        cnfTemp: state.control.cnfTemp,
+        cstTemp: state.control.cstTemp
     }
 }
 
@@ -47,31 +52,18 @@ class ConfigurationTabs extends React.Component<IConfigurationTabsProps, any> {
         this.handleChangeMode = this.handleChangeMode.bind(this);
         this.handleSaveConfig = this.handleSaveConfig.bind(this);
         this.handleChangeTab = this.handleChangeTab.bind(this);
-
-        this.state = {
-            chdTemp: this.props.chd,
-            cnfTemp: this.props.cnf,
-            cstTemp: this.props.cst
-        };
-    }
-
-    componentWillReceiveProps(nextProps) {
-        this.setState({
-            chdTemp: nextProps.chd,
-            cnfTemp: nextProps.cnf,
-            cstTemp: nextProps.cst
-        });
     }
 
     private handleChangeMode() {
         this.props.dispatch(updateConfigEditorMode(!this.props.codeEditorActive));
     }
 
     private handleSaveConfig = () => {
-        const chd = this.state.chdTemp;
-        const cnf = this.state.cnfTemp;
-        const cst = this.state.cstTemp;
-        this.props.dispatch(saveConfiguration(this.props.selectedConfigurationName, chd, cnf, cst));
+        this.props.dispatch(saveConfiguration(
+            this.props.selectedConfigurationName,
+            this.props.chdTemp ? this.props.chdTemp : this.props.chd,
+            this.props.cnfTemp ? this.props.cnfTemp : this.props.cnf,
+            this.props.cstTemp ? this.props.cstTemp : this.props.cst));
         this.props.dispatch(updateUnsavedConfigStatus(false));
     };
 

src/renderer/initialStates.ts

@@ -18,7 +18,6 @@ export const initialControlState: ControlState = {
     isChdEditable: false,
     isCstEditable: false,
     isOfflineMode: false
-
 };
 
 export const initialDataState: DataState = {

src/renderer/reducers.ts

@@ -334,6 +334,18 @@ const controlReducer = (state: ControlState = initialControlState, action) => {
                 selectedConfigurationName: action.payload,
                 unsavedConfigChanges: false
             });
+        case actions.UPDATE_CHD_TEMP:
+            return Object.assign({}, state, {
+                chdTemp: action.payload
+            });
+        case actions.UPDATE_CNF_TEMP:
+            return Object.assign({}, state, {
+                cnfTemp: action.payload
+            });
+        case actions.UPDATE_CST_TEMP:
+            return Object.assign({}, state, {
+                cstTemp: action.payload
+            });
         case actions.SELECT_SOURCE_FILE:
             return Object.assign({}, state, {
                 selectedSourceFileName: action.payload

src/renderer/state.ts

@@ -58,6 +58,11 @@ export interface ControlState {
     cnfDescriptor?: ConfigurationDescriptor;
     chdDescriptor?: ConfigurationDescriptor;
     cstDescriptor?: ConfigurationDescriptor;
+
+    // temporary (unsaved) configurations
+    cnfTemp?: ProcessConfigurations;
+    chdTemp?: ProcessConfigurations;
+    cstTemp?: ProcessConfigurations;
 }
 
 export interface SessionState {