diff --git a/package.json b/package.json
index a93616adb6..8dd09c717a 100644
--- a/package.json
+++ b/package.json
@@ -132,7 +132,7 @@
     "react-addons-css-transition-group": "15.6.2",
     "react-addons-shallow-compare": "15.6.2",
     "react-bootstrap": "0.31.0",
-    "react-codemirror": "1.0.0",
+    "react-codemirror2": "4.0.0",
     "react-color": "2.11.3",
     "react-confirm-button": "0.0.2",
     "react-container-dimensions": "1.3.2",
@@ -165,7 +165,6 @@
     "react-side-effect": "1.1.0",
     "react-sidebar": "2.3.2",
     "react-sortable-items": "https://github.com/geosolutions-it/react-sortable-items/tarball/react15",
-    "wkt-parser": "https://github.com/geosolutions-it/wkt-parser/tarball/mapstore2_fixes",
     "react-spinkit": "2.1.2",
     "react-swipeable-views": "0.12.2",
     "react-twitter-widgets": "1.3.0",
@@ -189,6 +188,7 @@
     "url": "0.10.3",
     "uuid": "3.0.1",
     "w3c-schemas": "1.3.1",
+    "wkt-parser": "https://github.com/geosolutions-it/wkt-parser/tarball/mapstore2_fixes",
     "xml2js": "0.4.17"
   },
   "scripts": {
diff --git a/web/client/examples/plugins/components/PluginConfigurator.jsx b/web/client/examples/plugins/components/PluginConfigurator.jsx
index 2dd2f3fecb..d3ac5d3118 100644
--- a/web/client/examples/plugins/components/PluginConfigurator.jsx
+++ b/web/client/examples/plugins/components/PluginConfigurator.jsx
@@ -9,7 +9,7 @@ const PropTypes = require('prop-types');
 const React = require('react');
 const {Checkbox, FormGroup, Button, Glyphicon} = require('react-bootstrap');
 
-const Codemirror = require('react-codemirror');
+const {Controlled: Codemirror} = require('react-codemirror2');
 require('codemirror/lib/codemirror.css');
 
 require('codemirror/mode/javascript/javascript');
@@ -67,7 +67,7 @@ class PluginConfigurator extends React.Component {
     renderCfg = () => {
         return this.state.configVisible ? [
             <label key="config-label">Enter a JSON object to configure plugin properties</label>,
-            <Codemirror key="code-mirror" value={this.state.code} onChange={this.updateCode} options={{
+            <Codemirror key={"code-mirror" + this.props.pluginName} value={this.state.code} onBeforeChange={this.updateCode} options={{
                 mode: {name: "javascript", json: true},
                 lineNumbers: true
             }}/>,
@@ -108,7 +108,7 @@ class PluginConfigurator extends React.Component {
         }
     };
 
-    updateCode = (newCode) => {
+    updateCode = (editor, data, newCode) => {
         this.setState({
             code: newCode
         });
diff --git a/web/client/examples/plugins/components/PluginCreator.jsx b/web/client/examples/plugins/components/PluginCreator.jsx
index cf62755c0a..42bd4d6acb 100644
--- a/web/client/examples/plugins/components/PluginCreator.jsx
+++ b/web/client/examples/plugins/components/PluginCreator.jsx
@@ -10,7 +10,7 @@ const React = require('react');
 
 const {Button, Glyphicon, Modal, Checkbox, FormGroup} = require('react-bootstrap');
 
-const Codemirror = require('react-codemirror');
+const {Controlled: Codemirror} = require('react-codemirror2');
 
 
 require('codemirror/lib/codemirror.css');
@@ -68,7 +68,7 @@ class PluginCreator extends React.Component {
                     <Modal.Title>Live edit your own plugin</Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
-                  <Codemirror style={{width: '500px'}} key="code-mirror" value={this.state.code} onChange={this.updateCode} options={{
+                  <Codemirror style={{width: '500px'}} key="code-mirror" value={this.state.code} onBeforeChange={this.updateCode} options={{
                           mode: {name: "javascript"},
                           lineNumbers: true
                       }}/>
@@ -79,7 +79,7 @@ class PluginCreator extends React.Component {
         </li>);
     }
 
-    updateCode = (newCode) => {
+    updateCode = (editor, data, newCode) => {
         this.setState({
             code: newCode
         });
diff --git a/web/client/examples/plugins/components/ThemeCreator.jsx b/web/client/examples/plugins/components/ThemeCreator.jsx
index 39765ce503..425cecf66a 100644
--- a/web/client/examples/plugins/components/ThemeCreator.jsx
+++ b/web/client/examples/plugins/components/ThemeCreator.jsx
@@ -10,7 +10,7 @@ const React = require('react');
 
 const {Button, Glyphicon, Modal, FormGroup, Checkbox} = require('react-bootstrap');
 
-const Codemirror = require('react-codemirror');
+const {Controlled: Codemirror} = require('react-codemirror2');
 
 
 require('codemirror/lib/codemirror.css');
@@ -68,7 +68,7 @@ class ThemeCreator extends React.Component {
                     <Modal.Title>Live edit your own theme</Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
-                  <Codemirror style={{width: '500px'}} key="code-mirror" value={this.state.code} onChange={this.updateCode} options={{
+                  <Codemirror style={{width: '500px'}} key="code-mirror" value={this.state.code} onBeforeChange={this.updateCode} options={{
                           mode: {name: "css"},
                           lineNumbers: true
                       }}/>
@@ -79,7 +79,7 @@ class ThemeCreator extends React.Component {
         </li>);
     }
 
-    updateCode = (newCode) => {
+    updateCode = (editor, data, newCode) => {
         this.setState({
             code: newCode
         });
diff --git a/web/client/examples/plugins/localConfig.json b/web/client/examples/plugins/localConfig.json
index 438804a6f4..dbbdf5d561 100644
--- a/web/client/examples/plugins/localConfig.json
+++ b/web/client/examples/plugins/localConfig.json
@@ -1,6 +1,6 @@
 {
-	"proxyUrl": "/mapstore/proxy/?url=",
-	"geoStoreUrl": "/mapstore/rest/geostore/",
+	"proxyUrl": "../../proxy/?url=",
+	"geoStoreUrl": "../../rest/geostore/",
   "printUrl": "https://demo.geo-solutions.it/geoserver/pdf/info.json",
 	"bingApiKey": "AhuXBu7ipR1gNbBfXhtUAyCZ6rkC5PkWpxs2MnMRZ1ZupxQfivjLCch22ozKSCAn",
 	"translationsPath": "../../translations"