support jsonc

package.json

@@ -18,6 +18,7 @@
     "allotment": "^1.17.0",
     "compress-json": "^2.1.2",
     "html-to-image": "^1.10.8",
+    "jsonc-parser": "^3.2.0",
     "next": "^12.3.1",
     "next-transpile-modules": "^9.0.0",
     "react": "^18.2.0",

src/components/MonacoEditor/index.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import Editor, { loader } from "@monaco-editor/react";
+import Editor, { loader, Monaco } from "@monaco-editor/react";
+import { parse } from "jsonc-parser";
 import { Loading } from "src/components/Loading";
 import useConfig from "src/hooks/store/useConfig";
 import useGraph from "src/hooks/store/useGraph";
@@ -27,6 +28,13 @@ const StyledWrapper = styled.div`
   grid-template-rows: minmax(0, 1fr);
 `;
 
+function handleEditorWillMount(monaco: Monaco) {
+  monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+    allowComments: true,
+    comments: "ignore",
+  });
+}
+
 export const MonacoEditor = ({
   setHasError,
 }: {
@@ -56,7 +64,7 @@ export const MonacoEditor = ({
           return setJson("{}");
         }
 
-        const parsedJSON = JSON.stringify(JSON.parse(value), null, 2);
+        const parsedJSON = JSON.stringify(parse(value), null, 2);
         setJson(parsedJSON);
         setHasError(false);
       } catch (jsonError: any) {
@@ -77,6 +85,7 @@ export const MonacoEditor = ({
         options={editorOptions}
         onChange={setValue}
         loading={<Loading message="Loading Editor..." />}
+        beforeMount={handleEditorWillMount}
       />
     </StyledWrapper>
   );

src/pages/Widget/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import { decompress } from "compress-json";
+import { parse } from "jsonc-parser";
 import { baseURL } from "src/constants/data";
 import useGraph from "src/hooks/store/useGraph";
 import { isValidJson } from "src/utils/isValidJson";
@@ -47,7 +48,7 @@ const WidgetPage = () => {
       const isJsonValid = isValidJson(jsonURI);
 
       if (isJsonValid) {
-        const jsonDecoded = decompress(JSON.parse(isJsonValid));
+        const jsonDecoded = decompress(parse(isJsonValid));
         const { nodes, edges } = parser(JSON.stringify(jsonDecoded));
 
         setGraphValue("nodes", nodes);

src/utils/isValidJson.ts

@@ -1,6 +1,8 @@
+import { parse } from "jsonc-parser";
+
 export const isValidJson = (str: string) => {
   try {
-    JSON.parse(str);
+    parse(str);
   } catch (e) {
     return false;
   }

src/utils/jsonParser.ts

@@ -1,3 +1,5 @@
+import { parse } from "jsonc-parser";
+
 const calculateSize = (
   text: string | [string, string][],
   isParent = false,
@@ -122,7 +124,7 @@ const relationships = (xs: { id: string; children: never[] }[]) => {
 
 export const parser = (jsonStr: string, isExpanded = true) => {
   try {
-    let json = JSON.parse(jsonStr);
+    let json = parse(jsonStr);
     if (!Array.isArray(json)) json = [json];
     const nodes: NodeData[] = [];
     const edges: EdgeData[] = [];

yarn.lock

@@ -3414,6 +3414,11 @@ json5@^2.1.2, json5@^2.2.0, json5@^2.2.1:
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
   integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
 
+jsonc-parser@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz#31ff3f4c2b9793f89c67212627c51c6394f88e76"
+  integrity sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==
+
 jsonfile@^6.0.1:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"