diff --git a/package.json b/package.json index e24115b..a0c999d 100644 --- a/package.json +++ b/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", diff --git a/src/components/MonacoEditor/index.tsx b/src/components/MonacoEditor/index.tsx index c141e4c..fa0a8d7 100644 --- a/src/components/MonacoEditor/index.tsx +++ b/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={} + beforeMount={handleEditorWillMount} /> ); diff --git a/src/pages/Widget/index.tsx b/src/pages/Widget/index.tsx index 93eaea9..5b3eba2 100644 --- a/src/pages/Widget/index.tsx +++ b/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); diff --git a/src/utils/isValidJson.ts b/src/utils/isValidJson.ts index aeb6b97..c771d5f 100644 --- a/src/utils/isValidJson.ts +++ b/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; } diff --git a/src/utils/jsonParser.ts b/src/utils/jsonParser.ts index f59016b..b9f32f0 100644 --- a/src/utils/jsonParser.ts +++ b/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[] = []; diff --git a/yarn.lock b/yarn.lock index 6ad10b6..ca5e8bd 100644 --- a/yarn.lock +++ b/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"