fix(Editor): change editor to ace editor

package.json

@@ -13,8 +13,10 @@
   "dependencies": {
     "@mapbox/mapbox-gl-style-spec": "13.7.1",
     "@urbica/react-map-gl": "1.7.0",
+    "brace": "^0.11.1",
     "mapbox-gl": "1.1.0",
     "react": "16.8.6",
+    "react-ace": "^7.0.2",
     "react-dom": "16.8.6"
   },
   "devDependencies": {

src/components/App.js

@@ -1,34 +1,38 @@
-import React, { useState, createRef } from 'react';
+import React, { useState } from 'react';
 import MapGL from '@urbica/react-map-gl';
-import { validate } from '@mapbox/mapbox-gl-style-spec';
 import { initStyle, initViewport } from '../config';
 import 'mapbox-gl/dist/mapbox-gl.css';
+import AceEditor from 'react-ace';
+import 'brace/mode/json';
+import 'brace/theme/github';
 
-const initStyleString = JSON.stringify(initStyle, null, 1);
+const initValue = JSON.stringify(initStyle, null, 1);
 
 function App() {
-  const [style, setStyle] = useState(initStyleString);
   const [viewport, setViewport] = useState(initViewport);
-  const editorRef = createRef();
+  const [value, setValue] = useState(initValue);
+  const [mapStyle, setMapStyle] = useState(initStyle);
 
   const onViewportChange = (newViewport) => {
     setViewport(newViewport);
   };
 
-  const setStyleHandler = () => {
-    let { value } = editorRef.current;
-    value = value.replace(/'/g, '"');
+  const onChange = (newValue) => {
+    newValue = newValue.replace(/'/g, '"');
+    setValue(newValue);
 
-    const result = validate(value);
-
-    if (result.length === 0) {
-      setStyle(value);
-      editorRef.current.value = JSON.stringify(JSON.parse(value), null, 1);
-    } else {
-      result.forEach(({ message }) => console.error(message));
+    try {
+      const newStyle = JSON.parse(newValue);
+      setMapStyleHandler(newStyle);
+    } catch (e) {
+      console.error(e);
     }
   };
 
+  const setMapStyleHandler = (newStyle) => {
+    setMapStyle(newStyle);
+  };
+
   return (
     <div style={{
       display: 'flex',
@@ -40,22 +44,37 @@ function App() {
           width: '50%',
           height: '100vh'
         }}
-        mapStyle={JSON.parse(style)}
+        mapStyle={mapStyle}
         accessToken='pk.eyJ1IjoiZGV2aWNlMjUiLCJhIjoiY2lzaGN3d2tiMDAxOTJ6bGYydDZrcHptdiJ9.UK55aUzBquqYns1AdnuTQg'
         {...viewport}
         onViewportChange={onViewportChange}
       />
-      <textarea
-        ref={editorRef}
-        style={{ width: '50%' }}
-        defaultValue={style}
+      <AceEditor
+        style={{
+          width: '50%',
+          height: '100vh'
+        }}
+        placeholder='JSON Style here'
+        theme='github'
+        mode='json'
+        name='styleEditor'
+        fontSize={14}
+        showPrintMargin={true}
+        showGutter={true}
+        highlightActiveLine={true}
+        value={value}
+        onChange={onChange}
+        setOptions={{
+          enableBasicAutocompletion: true,
+          enableLiveAutocompletion: false,
+          enableSnippets: false,
+          showLineNumbers: true,
+          tabSize: 2
+        }}
       />
-      <button onClick={setStyleHandler}>
-        apply
-      </button>
-
-      <div className='zoomPanel'>Zoom:{viewport.zoom.toFixed(2)}</div>
-
+      <div className='zoomPanel'>
+        {`Zoom: ${viewport.zoom.toFixed(2)}`}
+      </div>
     </div>
   );
 }

src/config/initStyle.js

@@ -12,8 +12,8 @@ export default {
             geometry: {
               type: 'Point',
               coordinates: [
-                0,
-                0
+                37.4841,
+                55.8067
               ]
             }
           }

src/config/initViewport.js

@@ -1,5 +1,5 @@
 export default {
-  latitude: 0,
-  longitude: 0,
-  zoom: 0
+  latitude: 55.8067,
+  longitude: 37.4841,
+  zoom: 9
 };