diff --git a/package.json b/package.json index 4b68f20246..2bc6135aee 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 819a1922b9..15c546a706 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -25,9 +25,6 @@ importers: '@codemirror/commands': specifier: ^6.3.3 version: 6.8.1 - '@codemirror/lang-json': - specifier: ^6.0.1 - version: 6.0.2 '@codemirror/language': specifier: ^6.10.0 version: 6.11.3 @@ -43,6 +40,9 @@ importers: '@graphql-tools/schema': specifier: 10.0.25 version: 10.0.25(graphql@16.10.0) + '@hasparus/lezer-json-shikified': + specifier: 1.1.3 + version: 1.1.3 '@headlessui/react': specifier: ^2.2.4 version: 2.2.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -907,9 +907,6 @@ packages: '@codemirror/commands@6.8.1': resolution: {integrity: sha512-KlGVYufHMQzxbdQONiLyGQDUW0itrLZwq3CcY7xpv9ZLRHqzkBSoteocBHtMCoY7/Ci4xhzSrToIeLg7FxHuaw==} - '@codemirror/lang-json@6.0.2': - resolution: {integrity: sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==} - '@codemirror/language@6.11.3': resolution: {integrity: sha512-9HBM2XnwDj7fnu0551HkGdrUrrqmYq/WC5iv6nbY2WdicXdGbhR/gfbZOH73Aqj4351alY1+aoG9rCNfiwS1RA==} @@ -1314,6 +1311,9 @@ packages: peerDependencies: graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 + '@hasparus/lezer-json-shikified@1.1.3': + resolution: {integrity: sha512-fuM39qCIgpFOZBkcK2wWCZuBVYVO7yzWb+ITCB6AR67quD80PVX5931vb/IvVolPQ2ssgt2Cp/4GOe+b5yujoQ==} + '@headlessui/react@2.2.8': resolution: {integrity: sha512-vkiZulDC0lFeTrZTbA4tHvhZHvkUb2PFh5xJ1BvWAZdRK0fayMKO1QEO4inWkXxK1i0I1rcwwu1d6mo0K7Pcbw==} engines: {node: '>=10'} @@ -1474,9 +1474,6 @@ packages: '@lezer/highlight@1.2.1': resolution: {integrity: sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==} - '@lezer/json@1.0.3': - resolution: {integrity: sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==} - '@lezer/lr@1.4.2': resolution: {integrity: sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==} @@ -6848,11 +6845,6 @@ snapshots: '@codemirror/view': 6.38.2 '@lezer/common': 1.2.3 - '@codemirror/lang-json@6.0.2': - dependencies: - '@codemirror/language': 6.11.3 - '@lezer/json': 1.0.3 - '@codemirror/language@6.11.3': dependencies: '@codemirror/state': 6.5.2 @@ -7290,6 +7282,12 @@ snapshots: dependencies: graphql: 16.10.0 + '@hasparus/lezer-json-shikified@1.1.3': + dependencies: + '@lezer/common': 1.2.3 + '@lezer/highlight': 1.2.1 + '@lezer/lr': 1.4.2 + '@headlessui/react@2.2.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@floating-ui/react': 0.26.28(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -7435,12 +7433,6 @@ snapshots: dependencies: '@lezer/common': 1.2.3 - '@lezer/json@1.0.3': - dependencies: - '@lezer/common': 1.2.3 - '@lezer/highlight': 1.2.1 - '@lezer/lr': 1.4.2 - '@lezer/lr@1.4.2': dependencies: '@lezer/common': 1.2.3 diff --git a/src/components/interactive-code-block/codemirror-json.tsx b/src/components/interactive-code-block/codemirror-json.tsx new file mode 100644 index 0000000000..c2dac47d9f --- /dev/null +++ b/src/components/interactive-code-block/codemirror-json.tsx @@ -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) +} diff --git a/src/components/interactive-code-block/result-viewer.tsx b/src/components/interactive-code-block/result-viewer.tsx index 032424c44b..d3cb29725e 100644 --- a/src/components/interactive-code-block/result-viewer.tsx +++ b/src/components/interactive-code-block/result-viewer.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" diff --git a/src/components/interactive-code-block/variable-editor.tsx b/src/components/interactive-code-block/variable-editor.tsx index 73fe6a5e7c..ba535450af 100644 --- a/src/components/interactive-code-block/variable-editor.tsx +++ b/src/components/interactive-code-block/variable-editor.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"