From 00c0e418a96cbf56991846ba026d38b5f5757136 Mon Sep 17 00:00:00 2001
From: Antti Sonkeri <antti.sonkeri@gmail.com>
Date: Wed, 10 Apr 2024 00:24:28 +0300
Subject: [PATCH] fix: json body prettify not working with comments (#1831)

Added Microsoft's node-jsonc-parser library that is able to format json
with comments. Seems to handle bigints properly too.

It may be good to consider replacing existing `decomment` library with
`jsonc-parser` if its only use case is to decomment json.

Fixes usebruno#1830

Co-authored-by: Anoop M D <anoop.md1421@gmail.com>
---
 package-lock.json                             | 20 +++++++++++++++++++
 packages/bruno-app/package.json               |  1 +
 .../RequestBody/RequestBodyMode/index.js      |  5 +++--
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e52e55e50..e225ab3b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12058,6 +12058,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonc-parser": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.1.tgz",
+      "integrity": "sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA=="
+    },
     "node_modules/jsonfile": {
       "version": "6.1.0",
       "license": "MIT",
@@ -18570,6 +18575,7 @@
         "jsesc": "^3.0.2",
         "jshint": "^2.13.6",
         "json5": "^2.2.3",
+        "jsonc-parser": "^3.2.1",
         "jsonlint": "^1.6.3",
         "jsonpath-plus": "^7.2.0",
         "know-your-http-well": "^0.5.0",
@@ -23943,6 +23949,14 @@
         "mini-svg-data-uri": "^1.2.3"
       }
     },
+    "@tailwindcss/forms": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz",
+      "integrity": "sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==",
+      "requires": {
+        "mini-svg-data-uri": "^1.2.3"
+      }
+    },
     "@tippyjs/react": {
       "version": "4.2.6",
       "requires": {
@@ -24231,6 +24245,7 @@
         "jsesc": "^3.0.2",
         "jshint": "^2.13.6",
         "json5": "^2.2.3",
+        "jsonc-parser": "^3.2.1",
         "jsonlint": "^1.6.3",
         "jsonpath-plus": "^7.2.0",
         "know-your-http-well": "^0.5.0",
@@ -30535,6 +30550,11 @@
     "json5": {
       "version": "2.2.3"
     },
+    "jsonc-parser": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.1.tgz",
+      "integrity": "sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA=="
+    },
     "jsonfile": {
       "version": "6.1.0",
       "requires": {
diff --git a/packages/bruno-app/package.json b/packages/bruno-app/package.json
index 179719995..ca1d65352 100644
--- a/packages/bruno-app/package.json
+++ b/packages/bruno-app/package.json
@@ -42,6 +42,7 @@
     "jsesc": "^3.0.2",
     "jshint": "^2.13.6",
     "json5": "^2.2.3",
+    "jsonc-parser": "^3.2.1",
     "jsonlint": "^1.6.3",
     "jsonpath-plus": "^7.2.0",
     "know-your-http-well": "^0.5.0",
diff --git a/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js b/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js
index e60a83450..ba04f3c78 100644
--- a/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js
@@ -8,6 +8,7 @@ import { humanizeRequestBodyMode } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
 import { updateRequestBody } from 'providers/ReduxStore/slices/collections/index';
 import { toastError } from 'utils/common/error';
+import { format, applyEdits } from 'jsonc-parser';
 import { parse, stringify } from 'lossless-json';
 import xmlFormat from 'xml-formatter';
 
@@ -39,8 +40,8 @@ const RequestBodyMode = ({ item, collection }) => {
   const onPrettify = () => {
     if (body?.json && bodyMode === 'json') {
       try {
-        const bodyJson = parse(body.json);
-        const prettyBodyJson = stringify(bodyJson, null, 2);
+        const edits = format(body.json, undefined, { tabSize: 2, insertSpaces: true });
+        const prettyBodyJson = applyEdits(body.json, edits);
         dispatch(
           updateRequestBody({
             content: prettyBodyJson,