Merge pull request #214 from hogpilot/ace-editor

Improved JSON viewing/editing with Ace editor
Esri · Oct 24, 2017 · a5a4e10 · a5a4e10
2 parents c6b5c5f + 8e8c2b7
commit a5a4e10
Show file tree

Hide file tree

Showing 12 changed files with 144 additions and 108 deletions.
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -46,7 +46,7 @@ body {
     white-space: normal;
 }
 
-.list-group-item pre{
+.list-group-item pre, .jsonEditor {
     font-size: .8em;
 }
 
@@ -96,8 +96,24 @@ body {
 
 .edit-controls {
     position: absolute;
-    top: 20px;
-    right: 25px;
+    top: -38px;
+    right: 3px;
+}
+
+.edit-controls button span {
+    pointer-events: none;
+}
+
+.jsonViewer.ace-tomorrow .ace_invisible.ace_invisible_space.ace_invalid {
+    background-color: rgba(0, 0, 0, 0);
+    color: #777;
+    outline: 1px #ccc solid;
+}
+
+.jsonViewer.ace-tomorrow-night .ace_invisible.ace_invisible_space.ace_invalid {
+    background-color: rgba(0, 0, 0, 0);
+    color: #999;
+    outline: 1px #555 solid;
 }
 
 .portal-signin {

diff --git a/src/index.html b/src/index.html
@@ -10,7 +10,6 @@
         <link rel="stylesheet" href="js/lib/bootstrap/css/bootstrap-3.3.4.min.css"/>
         <link rel="stylesheet" href="css/styles.css"/>
         <link rel="stylesheet" href="js/lib/nprogress.css" />
-        <link rel="stylesheet" href="js/lib/tomorrow.min.css">
         <link rel="stylesheet" href="css/font-awesome/css/font-awesome-4.2.0.min.css">
         <link rel="shortcut icon" href="assets/images/favicon.ico">
     </head>
@@ -463,12 +462,12 @@ <h3 id="deepCopyModalLabel">Copy information</h3>
                     {name: "bootstrap-shim", location: location.pathname.replace(/\/[^/]*$/, '') + "/js/lib", main: "bootstrap-shim"},
                     {name: "mustache", location: location.pathname.replace(/\/[^/]*$/, '') + "/js/lib", main: "mustache-0.7.2"},
                     {name: "nprogress", location: location.pathname.replace(/\/[^/]*$/, '') + "/js/lib", main: "nprogress-0.1.6"},
-                    {name: "highlight", location: location.pathname.replace(/\/[^/]*$/, '') + "/js/lib", main: "highlight-8.3.min"},
                     {name: "clipboard", location: location.pathname.replace(/\/[^/]*$/, '') + "/js/lib", main: "clipboard-1.5.15.min"},
                     {name: "portal", location: location.pathname.replace(/\/[^/]*$/, '') + "/js/lib", main: "portal.min"}
                 ],
             };
         </script>
+        <script src="js/lib/ace/ace.js"></script>
         <script src="js/lib/arcgis/dojo/dojo.js"></script>
         <script src="js/main.min.js"></script>
 

diff --git a/src/js/lib/ace/ace.js b/src/js/lib/ace/ace.js
diff --git a/src/js/lib/ace/ext-searchbox.js b/src/js/lib/ace/ext-searchbox.js
diff --git a/src/js/lib/ace/mode-json.js b/src/js/lib/ace/mode-json.js