Merge pull request #7 from kylermintah/master

Adding hyperlink support
reezpatel · Apr 13, 2021 · 7067030 · 7067030
2 parents 9d4c84a + 1c61b58
commit 7067030
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 5 deletions.
diff --git a/app/Components/JSONView/JBlock/index.tsx b/app/Components/JSONView/JBlock/index.tsx
@@ -10,7 +10,7 @@ const JBlock = ({ children, collapsible, onArrowClick, active, copyData }) => {
   const events = React.useContext(EventContext);
 
   const handleSectionClick = (e: MouseEvent) => {
-    e.preventDefault();
+    // e.preventDefault();
     e.stopPropagation();
 
     setSelected(!selected);

diff --git a/app/Components/JSONView/JString/index.tsx b/app/Components/JSONView/JString/index.tsx
@@ -11,12 +11,24 @@ const JString = ({ label, value, isLast }) => {
       )}
       {value === null ? (
         <span className="null">null</span>
-      ) : (
-        <span className="string">"{value}"</span>
-      )}
+      ) : isValidHttpUrl(value) ? (
+        <span className="hyperlink">"<a href={String(value)} target='_blank'>{value}</a>"</span>
+      ) : <span className="string">"{value}"</span>}
       {!isLast && ','}
     </section>
   );
 };
 
+function isValidHttpUrl(string) {
+  let url;
+
+  try {
+    url = new URL(string);
+  } catch (_) {
+    return false;  
+  }
+
+  return url.protocol === "http:" || url.protocol === "https:";
+}
+
 export { JString };
diff --git a/package.json b/package.json
@@ -15,7 +15,6 @@
     "@types/chrome": "^0.0.96",
     "jsonpath": "^1.0.2",
     "jsonpath-plus": "^3.0.0",
-    "parcel-bundler": "^1.12.4",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-icons": "^3.9.0",
@@ -24,6 +23,7 @@
     "typescript": "^3.7.5"
   },
   "devDependencies": {
+    "parcel-bundler": "^1.12.3",
     "sass": "^1.25.0"
   }
 }
diff --git a/styles/styles.scss b/styles/styles.scss
@@ -3,6 +3,7 @@
   --accent-color: #00cc7d;
   --accent-color-light: #00cc7e69;
   --string-color: #d69d85;
+  --hyperlink-color: #43beee;
   --number-color: #b5cea8;
   --boolean-color: #4ec9b0;
   --label-color: #569cd6;
@@ -79,6 +80,14 @@ body {
     color: var(--string-color);
   }
 
+  .hyperlink {
+    color: var(--hyperlink-color);
+  }
+
+  .hyperlink a{ 
+    color: var(--hyperlink-color);
+ }
+
   .boolean {
     color: var(--boolean-color);
   }