Start GraphQL support

src-web/components/Editor/Editor.tsx

@@ -3,9 +3,11 @@ import { Compartment, EditorState } from '@codemirror/state';
 import { keymap, placeholder as placeholderExt, tooltips } from '@codemirror/view';
 import classnames from 'classnames';
 import { EditorView } from 'codemirror';
+import { formatSdl } from 'format-graphql';
 import { useEffect, useRef } from 'react';
-import './Editor.css';
 import { useUnmount } from 'react-use';
+import { IconButton } from '../IconButton';
+import './Editor.css';
 import { baseExtensions, getLanguageExtension, multiLineExtensions } from './extensions';
 import { singleLineExt } from './singleLine';
 
@@ -93,7 +95,17 @@ export function _Editor({
         singleLine ? 'cm-singleline' : 'cm-multiline',
         readOnly && 'cm-readonly',
       )}
-    />
+    >
+      <IconButton
+        icon="eye"
+        className="absolute right-3 bottom-3 z-10"
+        onClick={() => {
+          const doc = cm.current?.view.state.doc ?? '';
+          const insert = formatSdl(doc.toString());
+          cm.current?.view.dispatch({ changes: { from: 0, to: doc.length, insert } });
+        }}
+      />
+    </div>
   );
 }
 

src-web/components/Editor/extensions.ts

@@ -32,6 +32,7 @@ import {
   rectangularSelection,
 } from '@codemirror/view';
 import { tags as t } from '@lezer/highlight';
+import { graphqlLanguageSupport } from 'cm6-graphql';
 import { debouncedAutocompletionDisplay } from './autocomplete';
 import { twig } from './twig/extension';
 import { url } from './url/extension';
@@ -77,6 +78,7 @@ export const myHighlightStyle = HighlightStyle.define([
 // ]);
 
 const syntaxExtensions: Record<string, LanguageSupport> = {
+  'application/graphql+json': graphqlLanguageSupport(),
   'application/json': json(),
   'application/javascript': javascript(),
   'text/html': html(),