feat: codemirror graphql mode

packages/grafnode-components/src/components/QueryEditor/index.js

@@ -10,7 +10,13 @@ const QueryEditor = ({query, onChange, width}) => {
     if (editor.current && !cmEditor) {
       const _cmEditor = CodeMirror.fromTextArea(editor.current, {
         value: '',
-        lineNumbers: true
+        lineNumbers: true,
+        matchBrackets: true,
+        autoCloseBrackets: true,
+        mode: "graphql",
+        foldGutter: true,
+        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
+        lineWrapping: true
       });
 
       _cmEditor.setValue(query || 'query { }');

packages/grafnode-run/package.json

@@ -28,6 +28,7 @@
     "@tippyjs/react": "^4.2.6",
     "classnames": "^2.3.1",
     "codemirror": "^5.64.0",
+    "codemirror-graphql": "^1.2.5",
     "graphql-request": "^3.7.0",
     "immer": "^9.0.7",
     "lodash": "^4.17.21",

packages/grafnode-run/src/pageComponents/Main/index.js

@@ -14,6 +14,8 @@ import 'codemirror/addon/edit/matchbrackets';
 import 'codemirror/addon/fold/brace-fold';
 import 'codemirror/addon/fold/foldgutter';
 
+import 'codemirror-graphql/mode';
+
 import 'codemirror/addon/fold/foldgutter.css';
 
 const RequestTabPanel = dynamic(import('@grafnode/components').then(mod => mod.RequestTabPanel), { ssr: false });