Highlight CodeMirror JSON snippets the same as non-interactive ones (#2145)

Author: hasparus

package.json

@@ -26,12 +26,12 @@
   "dependencies": {
     "@codemirror/autocomplete": "^6.18.6",
     "@codemirror/commands": "^6.3.3",
-    "@codemirror/lang-json": "^6.0.1",
     "@codemirror/language": "^6.10.0",
     "@codemirror/lint": "^6.8.5",
     "@codemirror/state": "^6.4.0",
     "@codemirror/view": "^6.24.0",
     "@graphql-tools/schema": "10.0.25",
+    "@hasparus/lezer-json-shikified": "1.1.3",
     "@headlessui/react": "^2.2.4",
     "@igorkowalczyk/is-browser": "^5.1.0",
     "@lezer/highlight": "^1.2.1",

pnpm-lock.yaml

@@ -0,0 +1,32 @@
+import { parser } from "@hasparus/lezer-json-shikified"
+import {
+  continuedIndent,
+  indentNodeProp,
+  foldNodeProp,
+  foldInside,
+  LRLanguage,
+  LanguageSupport,
+} from "@codemirror/language"
+
+export const jsonLanguage = LRLanguage.define({
+  name: "json",
+  parser: parser.configure({
+    props: [
+      indentNodeProp.add({
+        Object: continuedIndent({ except: /^\s*\}/ }),
+        Array: continuedIndent({ except: /^\s*\]/ }),
+      }),
+      foldNodeProp.add({
+        "Object Array": foldInside,
+      }),
+    ],
+  }),
+  languageData: {
+    closeBrackets: { brackets: ["[", "{", '"'] },
+    indentOnInput: /^\s*[}\]]$/,
+  },
+})
+
+export function json() {
+  return new LanguageSupport(jsonLanguage)
+}

src/components/interactive-code-block/codemirror-json.tsx

@@ -1,8 +1,7 @@
 import { Component } from "react"
 import { EditorView } from "@codemirror/view"
 import { EditorState } from "@codemirror/state"
-// todo: perhaps custom grammar to match the shiki highlighting?
-import { json } from "@codemirror/lang-json"
+import { json } from "./codemirror-json"
 import { codeMirrorThemeExtension } from "./codemirror-theme"
 
 import "./syntax-highlighting.css"

src/components/interactive-code-block/result-viewer.tsx

@@ -1,7 +1,7 @@
 import { Component } from "react"
 import { EditorView } from "@codemirror/view"
 import { EditorState } from "@codemirror/state"
-import { json } from "@codemirror/lang-json"
+import { json } from "./codemirror-json"
 import { history } from "@codemirror/commands"
 import { syntaxHighlighting } from "@codemirror/language"
 import { codeMirrorThemeExtension } from "./codemirror-theme"