#159

ply-ct · Sep 9, 2023 · 7a2d7cb · 7a2d7cb
1 parent b937bf4
commit 7a2d7cb
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 25 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -12,7 +12,8 @@
     "editor-worker": "parcel build node_modules/monaco-editor/esm/vs/editor/editor.worker.js --dist-dir out/workers",
     "json-worker": "parcel build node_modules/monaco-editor/esm/vs/language/json/json.worker.js --dist-dir out/workers",
     "yaml-worker": "parcel build node_modules/monaco-yaml/lib/esm/yaml.worker.js --dist-dir out/workers",
-    "monaco-workers": "npm run editor-worker && npm run json-worker && npm run yaml-worker"
+    "graphql-worker": "parcel build node_modules/monaco-graphql/esm/graphql.worker.js --dist-dir out/workers",
+    "monaco-workers": "npm run editor-worker && npm run json-worker && npm run yaml-worker && npm run graphql-worker"
   },
   "overrides": {
     "sass-graph": "^4.0.1"
@@ -26,7 +27,7 @@
     "js-yaml": "^4.1.0",
     "monaco-editor": "^0.36.1",
     "monaco-yaml": "^3.2.1",
-    "vscode-uri": "^3.0.7",
+    "monaco-graphql": "^1.3.0",
     "vue": "^3.3.4"
   },
   "devDependencies": {

diff --git a/web/src/components/Response.vue b/web/src/components/Response.vue
@@ -37,7 +37,7 @@
         />
       </el-tab-pane>
       <el-tab-pane v-if="response.status.code !== 0" label="Headers">
-        <table-comp :value="response.headers" :readonly="true" />
+        <table-comp :value="response.headers" :options="options" />
       </el-tab-pane>
       <el-tab-pane v-if="response.status.code !== 0" label="Source">
         <editor

diff --git a/web/src/util/content.ts b/web/src/util/content.ts
@@ -1,7 +1,7 @@
 import { Request, Response } from '../model/request';
 
 export type ContentHolder = Request | Response;
-export type Language = 'plaintext' | 'json' | 'html' | 'xml' | 'yaml';
+export type Language = 'plaintext' | 'json' | 'html' | 'xml' | 'yaml' | 'graphql';
 
 export const getContentType = (holder: ContentHolder): string | undefined => {
     const key = Object.keys(holder.headers).find((k) => k.toLowerCase() === 'content-type');
@@ -20,17 +20,35 @@ export const getLanguage = (
     defaultLang: Language = 'plaintext'
 ): Language => {
     const contentType = getContentType(holder);
-    if (!contentType) return defaultLang;
-
-    if (contentType === 'application/json' || holder.body?.startsWith('{')) {
-        return 'json';
-    } else if (contentType === 'text/html' || holder.body?.startsWith('<!DOCTYPE html>')) {
-        return 'html';
-    } else if (contentType === 'application/xml' || holder.body?.startsWith('<')) {
-        return 'xml';
-    } else if (contentType.endsWith('/yaml')) {
-        return 'yaml';
+    if (contentType) {
+        if (contentType === 'application/json') {
+            return isGraphql(holder.body) ? 'graphql' : 'json';
+        } else if (contentType === 'text/html') {
+            return 'html';
+        } else if (contentType === 'application/xml') {
+            return 'xml';
+        } else if (contentType?.endsWith('/yaml')) {
+            return 'yaml';
+        }
     } else {
-        return defaultLang;
+        // infer from content
+        if (holder.body?.startsWith('{')) {
+            return 'json';
+        } else if (
+            holder.body?.startsWith('<!DOCTYPE html>') ||
+            holder.body?.startsWith('<!doctype html>')
+        ) {
+            return 'html';
+        } else if (holder.body?.startsWith('<')) {
+            return 'xml';
+        } else if (isGraphql(holder.body)) {
+            return 'graphql';
+        }
     }
+
+    return defaultLang;
+};
+
+const isGraphql = (body?: string): boolean => {
+    return !!(body?.startsWith('query') || body?.startsWith('mutation'));
 };
diff --git a/web/src/util/monaco.ts b/web/src/util/monaco.ts
@@ -34,6 +34,8 @@ export const initialize = () => {
                     url = `${baseUrl}/json.worker.js`;
                 } else if (label === 'yaml') {
                     url = `${baseUrl}/yaml.worker.js`;
+                } else if (label === 'graphql') {
+                    url = `${baseUrl}/graphql.worker.js`;
                 }
                 const blob = await (await fetch(url)).blob();
                 return new Worker(URL.createObjectURL(blob));
@@ -121,7 +123,7 @@ export const getExpressions = (
     return [];
 };
 
-export const expressionLanguages = ['json', 'yaml', 'xml'];
+export const expressionLanguages = ['json', 'yaml', 'xml', 'graphql'];
 export const registeredHoverLanguages: string[] = [];
 
 export const filterMarkers = (