Merge pull request #61 from micsco/ms/syntax-highlighting

Enable Syntax Highlight and automatic formatting of JSON and XML
webhooksite · Mar 23, 2019 · 360063f · 360063f
2 parents 9391198 + 7cb4877
commit 360063f
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 19 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -38,3 +38,5 @@ RUN php artisan optimize && php artisan migrate
 ADD --chown=www-data:www-data /resources /var/www/html/resources
 COPY --chown=www-data:www-data --from=npm /app/public/css /var/www/html/public/css
 COPY --chown=www-data:www-data --from=npm /app/public/js /var/www/html/public/js
+
+USER root
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,13 +7,16 @@
   },
   "dependencies": {
     "angular": "^1.4.5",
+    "angular-highlightjs": "^0.7.1",
     "angular-ui-router": "^0.4.2",
-    "bootstrap-sass": "^3.3.7",
     "bootstrap-notify": "^3.1.3",
+    "bootstrap-sass": "^3.3.7",
     "clipboard": "^2.0.4",
+    "highlight.js": "^9.15.6",
     "jquery": "^3.1.1",
     "laravel-echo": "^1.3.5",
     "laravel-elixir": "^4.0.0",
+    "pretty-data": "^0.40.0",
     "pusher-js": "^4.2.2"
   },
   "scripts": {

diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
@@ -1,6 +1,9 @@
+var prettyData = require('pretty-data').pd;
+
 angular
     .module("app", [
-        'ui.router'
+        'ui.router',
+        'hljs'
     ])
     .config(['$stateProvider', '$urlRouterProvider', '$urlMatcherFactoryProvider',
         function ($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider) {
@@ -185,7 +188,19 @@ angular
 
         $scope.setCurrentRequest = (function (request) {
             $scope.currentRequestIndex = request.uuid;
-            $scope.currentRequest = request;
+            $scope.currentRequest = JSON.parse(JSON.stringify(request));
+
+            if ($scope.formatJsonEnable) {
+                var hloutput = hljs.highlightAuto(request.content);
+
+                if (hloutput.language === "json") {
+                    $scope.currentRequest.content = $scope.formatContentJson(request.content)
+                }
+                if (hloutput.language === "xml") {
+                    $scope.currentRequest.content = prettyData.xml(request.content);
+                }
+            }
+
             $scope.markAsRead(request.uuid);
 
             // Change the state url so it may be copied from address bar

diff --git a/resources/assets/js/libs.js b/resources/assets/js/libs.js
@@ -3,4 +3,12 @@ require('bootstrap-sass');
 require('bootstrap-notify');
 require('angular');
 require('angular-ui-router');
-window.Clipboard = require('clipboard');
+window.Clipboard = require('clipboard');
+
+window.hljs = require('highlight.js/lib/highlight');
+var javascript = require('highlight.js/lib/languages/javascript');
+var xml = require('highlight.js/lib/languages/javascript');
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('xml', xml);
+
+require('angular-highlightjs');
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
@@ -1,4 +1,5 @@
 @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
+@import "node_modules/highlight.js/styles/github";
 
 /*
  * Variables
@@ -217,6 +218,12 @@ code {
   color: #ccc;
 }
 
+#req-content {
+  pre {
+    padding: 0;
+  }
+}
+
   /*
    * JSON syntax highlighting
    */

diff --git a/resources/views/app.php b/resources/views/app.php
@@ -195,9 +195,9 @@ class="btn btn-xs" ng-class="redirectUrl ? '' : 'disabled'"
 
                                     <!-- Auto-JSON -->
                                     <label class="small"
-                                           title="Automatically applies easy to read JSON formatting on valid requests">
+                                           title="Automatically applies easy to read JSON and XML formatting on valid requests">
                                         <input type="checkbox" ng-model="formatJsonEnable"
-                                               ga-on="click" ga-event-category="JSONFormat" ga-event-action="toggle"/> Format JSON</label> &emsp;
+                                               ga-on="click" ga-event-category="JSONFormat" ga-event-action="toggle"/> Format JSON/XML</label> &emsp;
 
                                     <!-- Auto Navigate -->
                                     <label class="small"
@@ -321,9 +321,11 @@ class="btn btn-xs" ng-class="redirectUrl ? '' : 'disabled'"
                                 <p id="noContent" ng-show="hasRequests && currentRequest.content == ''">
                                     (no body content)</p>
 
-                                <pre id="req-content"
+                                <div id="req-content"
                                      ng-show="hasRequests && currentRequest.content != ''"
-                                     ng-bind="formatJsonEnable ? formatContentJson(currentRequest.content) : currentRequest.content"></pre>
+                                     hljs 
+                                     hljs-source="currentRequest.content">
+                                </div>
                             </div>
                         </div>
                     </div>