feat: codemirror graphql mode

This commit is contained in:
Anoop M D 2021-12-05 21:34:03 +05:30
parent 12d0890b83
commit 26da4307be
5 changed files with 2717 additions and 108 deletions

1393
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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 { }');

File diff suppressed because it is too large Load Diff

View File

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

View File

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