diff --git a/package-lock.json b/package-lock.json index f5b32ba5..982bd8b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2584,6 +2584,16 @@ "ebnf": "^1.9.1" } }, + "node_modules/@shopify/lang-jsonc": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@shopify/lang-jsonc/-/lang-jsonc-1.0.1.tgz", + "integrity": "sha512-KrBrRFhvr1qJiZBODAtqbL1u1e67UR3plBN79Z8nd5TQAAzpx66jS4zs7Ss9M22ygGrpWFhyhSoNVlp5VCYktQ==", + "license": "MIT", + "dependencies": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.3.7" + } + }, "node_modules/@svgr/babel-plugin-add-jsx-attribute": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz", @@ -16323,6 +16333,7 @@ "@replit/codemirror-emacs": "^6.1.0", "@replit/codemirror-vim": "^6.3.0", "@replit/codemirror-vscode-keymap": "^6.0.2", + "@shopify/lang-jsonc": "^1.0.1", "@tanstack/react-query": "^5.90.5", "@tanstack/react-router": "^1.133.13", "@tanstack/react-virtual": "^3.13.12", diff --git a/src-web/components/GrpcEditor.tsx b/src-web/components/GrpcEditor.tsx index 4a98582a..6727e8f6 100644 --- a/src-web/components/GrpcEditor.tsx +++ b/src-web/components/GrpcEditor.tsx @@ -1,4 +1,4 @@ -import { jsonLanguage } from '@codemirror/lang-json'; +import { jsoncLanguage } from '@shopify/lang-jsonc'; import { linter } from '@codemirror/lint'; import type { EditorView } from '@codemirror/view'; import type { GrpcRequest } from '@yaakapp-internal/models'; @@ -115,7 +115,7 @@ export function GrpcEditor({ delay: 200, needsRefresh: handleRefresh, }), - jsonLanguage.data.of({ + jsoncLanguage.data.of({ autocomplete: jsonCompletion(), }), stateExtensions({}), diff --git a/src-web/components/core/Editor/extensions.ts b/src-web/components/core/Editor/extensions.ts index 1ec1eb07..64e07656 100644 --- a/src-web/components/core/Editor/extensions.ts +++ b/src-web/components/core/Editor/extensions.ts @@ -8,7 +8,7 @@ import { history, historyKeymap } from '@codemirror/commands'; import { go } from '@codemirror/lang-go'; import { java } from '@codemirror/lang-java'; import { javascript } from '@codemirror/lang-javascript'; -import { json } from '@codemirror/lang-json'; +import { jsonc, jsoncLanguage } from '@shopify/lang-jsonc'; import { markdown } from '@codemirror/lang-markdown'; import { php } from '@codemirror/lang-php'; import { python } from '@codemirror/lang-python'; @@ -107,7 +107,7 @@ const syntaxExtensions: Record< null | (() => LanguageSupport) > = { graphql: null, - json: json, + json: jsonc, javascript: javascript, // HTML as XML because HTML is oddly slow html: xml, @@ -194,6 +194,11 @@ export function getLanguageExtension({ if (language === 'json') { extraExtensions.push(linter(jsonParseLinter())); + extraExtensions.push( + jsoncLanguage.data.of({ + commentTokens: { line: '//', block: { open: '/*', close: '*/' } }, + }), + ); if (!hideGutter) { extraExtensions.push(lintGutter()); } diff --git a/src-web/components/core/Editor/json-lint.ts b/src-web/components/core/Editor/json-lint.ts index f4b080dd..35c33904 100644 --- a/src-web/components/core/Editor/json-lint.ts +++ b/src-web/components/core/Editor/json-lint.ts @@ -11,7 +11,7 @@ export function jsonParseLinter() { // We need lint to not break on stuff like {"foo:" ${[ ... ]}} so we'll replace all template // syntax with repeating `1` characters, so it's valid JSON and the position is still correct. const escapedDoc = doc.replace(TEMPLATE_SYNTAX_REGEX, (m) => '1'.repeat(m.length)); - jsonLintParse(escapedDoc); + jsonLintParse(escapedDoc, { mode: 'cjson' }); // biome-ignore lint/suspicious/noExplicitAny: none } catch (err: any) { if (!('location' in err)) { diff --git a/src-web/package.json b/src-web/package.json index 3f360cbc..45d42a59 100644 --- a/src-web/package.json +++ b/src-web/package.json @@ -27,6 +27,7 @@ "@replit/codemirror-emacs": "^6.1.0", "@replit/codemirror-vim": "^6.3.0", "@replit/codemirror-vscode-keymap": "^6.0.2", + "@shopify/lang-jsonc": "^1.0.1", "@tanstack/react-query": "^5.90.5", "@tanstack/react-router": "^1.133.13", "@tanstack/react-virtual": "^3.13.12",