Hooked up jsonc language mode for Codemirror

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",

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({}),

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());
     }

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)) {

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",