From a7cea7f4c1aaaf96cb6de3bfcb1b3190450631a7 Mon Sep 17 00:00:00 2001
From: davew <davew@opentext.com>
Date: Wed, 16 Sep 2020 12:15:50 -0700
Subject: [PATCH] davew/BDEVEXP-2652-redoc-json-coloring

---
 demo/openapi.yaml                |  1 +
 src/common-elements/PrismDiv.tsx | 19 ++++++++++++-------
 src/utils/jsonToHtml.ts          | 15 ++++++++-------
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/demo/openapi.yaml b/demo/openapi.yaml
index e2a7b2b0..88b5a9e1 100644
--- a/demo/openapi.yaml
+++ b/demo/openapi.yaml
@@ -813,6 +813,7 @@ components:
         photoUrls:
           description: The list of URL to a cute photos featuring pet
           type: array
+          example: http://facebook.com/maxthecat
           maxItems: 20
           xml:
             name: photoUrl
diff --git a/src/common-elements/PrismDiv.tsx b/src/common-elements/PrismDiv.tsx
index c1cb6928..06b89084 100644
--- a/src/common-elements/PrismDiv.tsx
+++ b/src/common-elements/PrismDiv.tsx
@@ -50,6 +50,7 @@ export const PrismDiv = styled.div`
 
   .token.punctuation {
     opacity: 0.7;
+    color: #FA669C;
   }
 
   .namespace {
@@ -58,26 +59,30 @@ export const PrismDiv = styled.div`
 
   .token.property,
   .token.tag,
-  .token.number,
   .token.constant,
   .token.symbol {
-    color: #4a8bb3;
+    color: #17B92A;
   }
 
+  .token.number {
+    color: #19B4B6;
+  }
   .token.boolean {
-    color: firebrick;
+    color: #19B4B6;
+  }
+  .token.url {
+    color: #2DA9EE;
   }
-
   .token.selector,
   .token.attr-name,
   .token.string,
   .token.char,
   .token.builtin,
   .token.inserted {
-    color: #a0fbaa;
+    color: #19B4B6;
     & + a,
     & + a:visited {
-      color: #4ed2ba;
+      color: #19B4B6;
       text-decoration: underline;
     }
   }
@@ -86,9 +91,9 @@ export const PrismDiv = styled.div`
     color: white;
   } */
 
+
   .token.operator,
   .token.entity,
-  .token.url,
   .token.variable {
     color: hsl(40, 90%, 60%);
   }
diff --git a/src/utils/jsonToHtml.ts b/src/utils/jsonToHtml.ts
index 6e36d5ce..a805f969 100644
--- a/src/utils/jsonToHtml.ts
+++ b/src/utils/jsonToHtml.ts
@@ -14,11 +14,11 @@ export function jsonToHTML(json, maxExpandLevel) {
 function htmlEncode(t) {
   return t !== undefined
     ? t
-        .toString()
-        .replace(/&/g, '&amp;')
-        .replace(/"/g, '&quot;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
+      .toString()
+      .replace(/&/g, '&amp;')
+      .replace(/"/g, '&quot;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
     : '';
 }
 
@@ -58,7 +58,7 @@ function valueToHTML(value, maxExpandLevel: number) {
         '<a href="' +
         value +
         '">' +
-        htmlEncode(stringifyStringLiteral(value)) +
+        decorateWithSpan(htmlEncode(stringifyStringLiteral(value)), "token url") +
         '</a>' +
         decorateWithSpan('"', 'token string');
     } else {
@@ -106,7 +106,8 @@ function objectToHTML(json, maxExpandLevel: number) {
     const key = keys[i];
     hasContents = true;
     output += '<li><div class="hoverable ' + collapsed + '">';
-    output += '<span class="property token string">"' + htmlEncode(key) + '"</span>: ';
+    output += '<span class="property token">"' + htmlEncode(key) + '"</span>';
+    output += punctuation(':') + ' ';
     output += valueToHTML(json[key], maxExpandLevel);
     if (i < length - 1) {
       output += punctuation(',');