@graphiql/react - npm Package Compare versions

Comparing version 0.5.2-canary-f252673f.0 to 0.6.0-canary-041744de.0

dist/graphiql-react.cjs.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var e=require("./index.cjs.js");require("graphql");require("react");require("react-dom");exports.EditorContext=e.EditorContext;exports.EditorContextProvider=e.EditorContextProvider;exports.ExecutionContext=e.ExecutionContext;exports.ExecutionContextProvider=e.ExecutionContextProvider;exports.ExplorerContext=e.ExplorerContext;exports.ExplorerContextProvider=e.ExplorerContextProvider;exports.HistoryContext=e.HistoryContext;exports.HistoryContextProvider=e.HistoryContextProvider;exports.ImagePreview=e.ImagePreview;exports.SchemaContext=e.SchemaContext;exports.SchemaContextProvider=e.SchemaContextProvider;exports.StorageContext=e.StorageContext;exports.StorageContextProvider=e.StorageContextProvider;exports.onHasCompletion=e.onHasCompletion;exports.useAutoCompleteLeafs=e.useAutoCompleteLeafs;exports.useCopyQuery=e.useCopyQuery;exports.useDragResize=e.useDragResize;exports.useEditorContext=e.useEditorContext;exports.useExecutionContext=e.useExecutionContext;exports.useExplorerContext=e.useExplorerContext;exports.useHeaderEditor=e.useHeaderEditor;exports.useHistoryContext=e.useHistoryContext;exports.useMergeQuery=e.useMergeQuery;exports.usePrettifyEditors=e.usePrettifyEditors;exports.useQueryEditor=e.useQueryEditor;exports.useResponseEditor=e.useResponseEditor;exports.useSchemaContext=e.useSchemaContext;exports.useSelectHistoryItem=e.useSelectHistoryItem;exports.useStorageContext=e.useStorageContext;exports.useVariableEditor=e.useVariableEditor;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var e=require("./index.cjs.js");require("graphql");require("react");require("react-dom");exports.ChevronDownIcon=e.ChevronDownIcon;exports.ChevronUpIcon=e.ChevronUpIcon;exports.CopyIcon=e.CopyIcon;exports.DocsIcon=e.DocsIcon;exports.Dropdown=e.Dropdown;exports.EditorContext=e.EditorContext;exports.EditorContextProvider=e.EditorContextProvider;exports.ExecuteButton=e.ExecuteButton;exports.ExecutionContext=e.ExecutionContext;exports.ExecutionContextProvider=e.ExecutionContextProvider;exports.ExplorerContext=e.ExplorerContext;exports.ExplorerContextProvider=e.ExplorerContextProvider;exports.HeaderEditor=e.HeaderEditor;exports.HistoryContext=e.HistoryContext;exports.HistoryContextProvider=e.HistoryContextProvider;exports.HistoryIcon=e.HistoryIcon;exports.ImagePreview=e.ImagePreview;exports.KeyboardShortcutIcon=e.KeyboardShortcutIcon;exports.MergeIcon=e.MergeIcon;exports.PlayIcon=e.PlayIcon;exports.PrettifyIcon=e.PrettifyIcon;exports.QueryEditor=e.QueryEditor;exports.ResponseEditor=e.ResponseEditor;exports.SchemaContext=e.SchemaContext;exports.SchemaContextProvider=e.SchemaContextProvider;exports.SettingsIcon=e.SettingsIcon;exports.StopIcon=e.StopIcon;exports.StorageContext=e.StorageContext;exports.StorageContextProvider=e.StorageContextProvider;exports.ToolbarButton=e.ToolbarButton;exports.UnStyledButton=e.UnStyledButton;exports.VariableEditor=e.VariableEditor;exports.onHasCompletion=e.onHasCompletion;exports.useAutoCompleteLeafs=e.useAutoCompleteLeafs;exports.useCopyQuery=e.useCopyQuery;exports.useDragResize=e.useDragResize;exports.useEditorContext=e.useEditorContext;exports.useExecutionContext=e.useExecutionContext;exports.useExplorerContext=e.useExplorerContext;exports.useHeaderEditor=e.useHeaderEditor;exports.useHistoryContext=e.useHistoryContext;exports.useMergeQuery=e.useMergeQuery;exports.usePrettifyEditors=e.usePrettifyEditors;exports.useQueryEditor=e.useQueryEditor;exports.useResponseEditor=e.useResponseEditor;exports.useSchemaContext=e.useSchemaContext;exports.useSelectHistoryItem=e.useSelectHistoryItem;exports.useStorageContext=e.useStorageContext;exports.useVariableEditor=e.useVariableEditor;

dist/graphiql-react.es.js

@@ -1,4 +0,4 @@
-export { E as EditorContext, a as EditorContextProvider, q as ExecutionContext, r as ExecutionContextProvider, v as ExplorerContext, w as ExplorerContextProvider, H as HistoryContext, y as HistoryContextProvider, b as ImagePreview, S as SchemaContext, B as SchemaContextProvider, F as StorageContext, G as StorageContextProvider, d as onHasCompletion, u as useAutoCompleteLeafs, e as useCopyQuery, K as useDragResize, f as useEditorContext, s as useExecutionContext, x as useExplorerContext, g as useHeaderEditor, z as useHistoryContext, h as useMergeQuery, j as usePrettifyEditors, k as useQueryEditor, m as useResponseEditor, D as useSchemaContext, A as useSelectHistoryItem, J as useStorageContext, n as useVariableEditor } from "./index.es.js";
+export { O as ChevronDownIcon, T as ChevronUpIcon, U as CopyIcon, W as DocsIcon, a5 as Dropdown, E as EditorContext, a as EditorContextProvider, a3 as ExecuteButton, r as ExecutionContext, s as ExecutionContextProvider, w as ExplorerContext, x as ExplorerContextProvider, H as HeaderEditor, z as HistoryContext, A as HistoryContextProvider, X as HistoryIcon, b as ImagePreview, Y as KeyboardShortcutIcon, Z as MergeIcon, _ as PlayIcon, $ as PrettifyIcon, Q as QueryEditor, e as ResponseEditor, S as SchemaContext, F as SchemaContextProvider, a0 as SettingsIcon, a1 as StopIcon, J as StorageContext, K as StorageContextProvider, a2 as ToolbarButton, a4 as UnStyledButton, V as VariableEditor, d as onHasCompletion, u as useAutoCompleteLeafs, f as useCopyQuery, N as useDragResize, g as useEditorContext, v as useExecutionContext, y as useExplorerContext, h as useHeaderEditor, B as useHistoryContext, j as useMergeQuery, k as usePrettifyEditors, m as useQueryEditor, n as useResponseEditor, G as useSchemaContext, D as useSelectHistoryItem, M as useStorageContext, q as useVariableEditor } from "./index.es.js";
 import "graphql";
 import "react";
 import "react-dom";

dist/info.cjs.js

@@ -1,1 +0,1 @@
-"use strict";var h=Object.defineProperty;var l=(r,e)=>h(r,"name",{value:e,configurable:!0});var f=require("graphql"),g=require("./codemirror.cjs.js"),s=require("./SchemaReference.cjs.js");require("./info-addon.cjs.js");require("./index.cjs.js");require("react");require("react-dom");require("./introspection.cjs.js");require("./forEachState.cjs.js");g.CodeMirror.registerHelper("info","graphql",(r,e)=>{if(!e.schema||!r.state)return;const i=r.state,n=i.kind,c=i.step,a=s.getTypeInfo(e.schema,r.state);if(n==="Field"&&c===0&&a.fieldDef||n==="AliasedField"&&c===2&&a.fieldDef){const d=document.createElement("div");return T(d,a,e),m(d,e,a.fieldDef),d}else if(n==="Directive"&&c===1&&a.directiveDef){const d=document.createElement("div");return o(d,a,e),m(d,e,a.directiveDef),d}else if(n==="Argument"&&c===0&&a.argDef){const d=document.createElement("div");return E(d,a,e),m(d,e,a.argDef),d}else if(n==="EnumValue"&&a.enumValue&&a.enumValue.description){const d=document.createElement("div");return j(d,a,e),m(d,e,a.enumValue),d}else if(n==="NamedType"&&a.type&&a.type.description){const d=document.createElement("div");return u(d,a,e,a.type),m(d,e,a.type),d}});function T(r,e,i){v(r,e,i),p(r,e,i,e.type)}l(T,"renderField");function v(r,e,i){var n;const c=((n=e.fieldDef)===null||n===void 0?void 0:n.name)||"";c.slice(0,2)!=="__"&&(u(r,e,i,e.parentType),t(r,".")),t(r,c,"field-name",i,s.getFieldReference(e))}l(v,"renderQualifiedField");function o(r,e,i){var n;const c="@"+(((n=e.directiveDef)===null||n===void 0?void 0:n.name)||"");t(r,c,"directive-name",i,s.getDirectiveReference(e))}l(o,"renderDirective");function E(r,e,i){var n;e.directiveDef?o(r,e,i):e.fieldDef&&v(r,e,i);const c=((n=e.argDef)===null||n===void 0?void 0:n.name)||"";t(r,"("),t(r,c,"arg-name",i,s.getArgumentReference(e)),p(r,e,i,e.inputType),t(r,")")}l(E,"renderArg");function p(r,e,i,n){t(r,": "),u(r,e,i,n)}l(p,"renderTypeAnnotation");function j(r,e,i){var n;const c=((n=e.enumValue)===null||n===void 0?void 0:n.name)||"";u(r,e,i,e.inputType),t(r,"."),t(r,c,"enum-value",i,s.getEnumValueReference(e))}l(j,"renderEnumValue");function u(r,e,i,n){n instanceof f.GraphQLNonNull?(u(r,e,i,n.ofType),t(r,"!")):n instanceof f.GraphQLList?(t(r,"["),u(r,e,i,n.ofType),t(r,"]")):t(r,(n==null?void 0:n.name)||"","type-name",i,s.getTypeReference(e,n))}l(u,"renderType");function m(r,e,i){const n=i.description;if(n){const c=document.createElement("div");c.className="info-description",e.renderDescription?c.innerHTML=e.renderDescription(n):c.appendChild(document.createTextNode(n)),r.appendChild(c)}C(r,e,i)}l(m,"renderDescription");function C(r,e,i){const n=i.deprecationReason;if(n){const c=document.createElement("div");c.className="info-deprecation",e.renderDescription?c.innerHTML=e.renderDescription(n):c.appendChild(document.createTextNode(n));const a=document.createElement("span");a.className="info-deprecation-label",a.appendChild(document.createTextNode("Deprecated: ")),c.insertBefore(a,c.firstChild),r.appendChild(c)}}l(C,"renderDeprecation");function t(r,e,i="",n={onClick:null},c=null){if(i){const a=n.onClick;let d;a?(d=document.createElement("a"),d.href="javascript:void 0",d.addEventListener("click",D=>{a(c,D)})):d=document.createElement("span"),d.className=i,d.appendChild(document.createTextNode(e)),r.appendChild(d)}else r.appendChild(document.createTextNode(e))}l(t,"text");
+"use strict";var v=Object.defineProperty;var s=(r,e)=>v(r,"name",{value:e,configurable:!0});var f=require("graphql"),h=require("./codemirror.cjs.js"),m=require("./SchemaReference.cjs.js");require("./info-addon.cjs.js");require("./index.cjs.js");require("react");require("react-dom");require("./introspection.cjs.js");require("./forEachState.cjs.js");h.CodeMirror.registerHelper("info","graphql",(r,e)=>{if(!e.schema||!r.state)return;const i=r.state,n=i.kind,a=i.step,c=m.getTypeInfo(e.schema,r.state);if(n==="Field"&&a===0&&c.fieldDef||n==="AliasedField"&&a===2&&c.fieldDef){const d=document.createElement("div");d.className="CodeMirror-info-header",C(d,c,e);const t=document.createElement("div");return t.appendChild(d),u(t,e,c.fieldDef),t}else if(n==="Directive"&&a===1&&c.directiveDef){const d=document.createElement("div");d.className="CodeMirror-info-header",E(d,c,e);const t=document.createElement("div");return t.appendChild(d),u(t,e,c.directiveDef),t}else if(n==="Argument"&&a===0&&c.argDef){const d=document.createElement("div");d.className="CodeMirror-info-header",N(d,c,e);const t=document.createElement("div");return t.appendChild(d),u(t,e,c.argDef),t}else if(n==="EnumValue"&&c.enumValue&&c.enumValue.description){const d=document.createElement("div");d.className="CodeMirror-info-header",T(d,c,e);const t=document.createElement("div");return t.appendChild(d),u(t,e,c.enumValue),t}else if(n==="NamedType"&&c.type&&c.type.description){const d=document.createElement("div");d.className="CodeMirror-info-header",o(d,c,e,c.type);const t=document.createElement("div");return t.appendChild(d),u(t,e,c.type),t}});function C(r,e,i){D(r,e,i),p(r,e,i,e.type)}s(C,"renderField");function D(r,e,i){var n;const a=((n=e.fieldDef)===null||n===void 0?void 0:n.name)||"";l(r,a,"field-name",i,m.getFieldReference(e))}s(D,"renderQualifiedField");function E(r,e,i){var n;const a="@"+(((n=e.directiveDef)===null||n===void 0?void 0:n.name)||"");l(r,a,"directive-name",i,m.getDirectiveReference(e))}s(E,"renderDirective");function N(r,e,i){var n;const a=((n=e.argDef)===null||n===void 0?void 0:n.name)||"";l(r,a,"arg-name",i,m.getArgumentReference(e)),p(r,e,i,e.inputType)}s(N,"renderArg");function T(r,e,i){var n;const a=((n=e.enumValue)===null||n===void 0?void 0:n.name)||"";o(r,e,i,e.inputType),l(r,"."),l(r,a,"enum-value",i,m.getEnumValueReference(e))}s(T,"renderEnumValue");function p(r,e,i,n){const a=document.createElement("span");a.className="type-name-pill",n instanceof f.GraphQLNonNull?(o(a,e,i,n.ofType),l(a,"!")):n instanceof f.GraphQLList?(l(a,"["),o(a,e,i,n.ofType),l(a,"]")):l(a,(n==null?void 0:n.name)||"","type-name",i,m.getTypeReference(e,n)),r.appendChild(a)}s(p,"renderTypeAnnotation");function o(r,e,i,n){n instanceof f.GraphQLNonNull?(o(r,e,i,n.ofType),l(r,"!")):n instanceof f.GraphQLList?(l(r,"["),o(r,e,i,n.ofType),l(r,"]")):l(r,(n==null?void 0:n.name)||"","type-name",i,m.getTypeReference(e,n))}s(o,"renderType");function u(r,e,i){const n=i.description;if(n){const a=document.createElement("div");a.className="info-description",e.renderDescription?a.innerHTML=e.renderDescription(n):a.appendChild(document.createTextNode(n)),r.appendChild(a)}g(r,e,i)}s(u,"renderDescription");function g(r,e,i){const n=i.deprecationReason;if(n){const a=document.createElement("div");a.className="info-deprecation",r.appendChild(a);const c=document.createElement("span");c.className="info-deprecation-label",c.appendChild(document.createTextNode("Deprecated")),a.appendChild(c);const d=document.createElement("div");d.className="info-deprecation-reason",e.renderDescription?d.innerHTML=e.renderDescription(n):d.appendChild(document.createTextNode(n)),a.appendChild(d)}}s(g,"renderDeprecation");function l(r,e,i="",n={onClick:null},a=null){if(i){const c=n.onClick;let d;c?(d=document.createElement("a"),d.href="javascript:void 0",d.addEventListener("click",t=>{c(a,t)})):d=document.createElement("span"),d.className=i,d.appendChild(document.createTextNode(e)),r.appendChild(d)}else r.appendChild(document.createTextNode(e))}s(l,"text");

dist/info.es.js

@@ -21,24 +21,39 @@ var __defProp = Object.defineProperty;
   if (kind === "Field" && step === 0 && typeInfo.fieldDef || kind === "AliasedField" && step === 2 && typeInfo.fieldDef) {
+    const header = document.createElement("div");
+    header.className = "CodeMirror-info-header";
+    renderField(header, typeInfo, options);
     const into = document.createElement("div");
-    renderField(into, typeInfo, options);
+    into.appendChild(header);
     renderDescription(into, options, typeInfo.fieldDef);
     return into;
   } else if (kind === "Directive" && step === 1 && typeInfo.directiveDef) {
+    const header = document.createElement("div");
+    header.className = "CodeMirror-info-header";
+    renderDirective(header, typeInfo, options);
     const into = document.createElement("div");
-    renderDirective(into, typeInfo, options);
+    into.appendChild(header);
     renderDescription(into, options, typeInfo.directiveDef);
     return into;
   } else if (kind === "Argument" && step === 0 && typeInfo.argDef) {
+    const header = document.createElement("div");
+    header.className = "CodeMirror-info-header";
+    renderArg(header, typeInfo, options);
     const into = document.createElement("div");
-    renderArg(into, typeInfo, options);
+    into.appendChild(header);
     renderDescription(into, options, typeInfo.argDef);
     return into;
   } else if (kind === "EnumValue" && typeInfo.enumValue && typeInfo.enumValue.description) {
+    const header = document.createElement("div");
+    header.className = "CodeMirror-info-header";
+    renderEnumValue(header, typeInfo, options);
     const into = document.createElement("div");
-    renderEnumValue(into, typeInfo, options);
+    into.appendChild(header);
     renderDescription(into, options, typeInfo.enumValue);
     return into;
   } else if (kind === "NamedType" && typeInfo.type && typeInfo.type.description) {
+    const header = document.createElement("div");
+    header.className = "CodeMirror-info-header";
+    renderType(header, typeInfo, options, typeInfo.type);
     const into = document.createElement("div");
-    renderType(into, typeInfo, options, typeInfo.type);
+    into.appendChild(header);
     renderDescription(into, options, typeInfo.type);
@@ -56,6 +71,2 @@ return into;
   const fieldName = ((_a = typeInfo.fieldDef) === null || _a === void 0 ? void 0 : _a.name) || "";
-  if (fieldName.slice(0, 2) !== "__") {
-    renderType(into, typeInfo, options, typeInfo.parentType);
-    text(into, ".");
-  }
   text(into, fieldName, "field-name", options, getFieldReference(typeInfo));
@@ -72,19 +83,7 @@ }
   var _a;
-  if (typeInfo.directiveDef) {
-    renderDirective(into, typeInfo, options);
-  } else if (typeInfo.fieldDef) {
-    renderQualifiedField(into, typeInfo, options);
-  }
   const name = ((_a = typeInfo.argDef) === null || _a === void 0 ? void 0 : _a.name) || "";
-  text(into, "(");
   text(into, name, "arg-name", options, getArgumentReference(typeInfo));
   renderTypeAnnotation(into, typeInfo, options, typeInfo.inputType);
-  text(into, ")");
 }
 __name(renderArg, "renderArg");
-function renderTypeAnnotation(into, typeInfo, options, t) {
-  text(into, ": ");
-  renderType(into, typeInfo, options, t);
-}
-__name(renderTypeAnnotation, "renderTypeAnnotation");
 function renderEnumValue(into, typeInfo, options) {
@@ -98,2 +97,18 @@ var _a;
 __name(renderEnumValue, "renderEnumValue");
+function renderTypeAnnotation(into, typeInfo, options, t) {
+  const typeSpan = document.createElement("span");
+  typeSpan.className = "type-name-pill";
+  if (t instanceof GraphQLNonNull) {
+    renderType(typeSpan, typeInfo, options, t.ofType);
+    text(typeSpan, "!");
+  } else if (t instanceof GraphQLList) {
+    text(typeSpan, "[");
+    renderType(typeSpan, typeInfo, options, t.ofType);
+    text(typeSpan, "]");
+  } else {
+    text(typeSpan, (t === null || t === void 0 ? void 0 : t.name) || "", "type-name", options, getTypeReference(typeInfo, t));
+  }
+  into.appendChild(typeSpan);
+}
+__name(renderTypeAnnotation, "renderTypeAnnotation");
 function renderType(into, typeInfo, options, t) {
@@ -132,12 +147,15 @@ if (t instanceof GraphQLNonNull) {
     deprecationDiv.className = "info-deprecation";
+    into.appendChild(deprecationDiv);
+    const label = document.createElement("span");
+    label.className = "info-deprecation-label";
+    label.appendChild(document.createTextNode("Deprecated"));
+    deprecationDiv.appendChild(label);
+    const reasonDiv = document.createElement("div");
+    reasonDiv.className = "info-deprecation-reason";
     if (options.renderDescription) {
-      deprecationDiv.innerHTML = options.renderDescription(reason);
+      reasonDiv.innerHTML = options.renderDescription(reason);
     } else {
-      deprecationDiv.appendChild(document.createTextNode(reason));
+      reasonDiv.appendChild(document.createTextNode(reason));
     }
-    const label = document.createElement("span");
-    label.className = "info-deprecation-label";
-    label.appendChild(document.createTextNode("Deprecated: "));
-    deprecationDiv.insertBefore(label, deprecationDiv.firstChild);
-    into.appendChild(deprecationDiv);
+    deprecationDiv.appendChild(reasonDiv);
   }
@@ -144,0 +162,0 @@ }

package.json

 {
   "name": "@graphiql/react",
-  "version": "0.5.2-canary-f252673f.0",
+  "version": "0.6.0-canary-041744de.0",
   "repository": {
@@ -25,2 +25,3 @@ "type": "git",
     "dist",
+    "font",
     "src",
@@ -42,5 +43,4 @@ "types"
     "codemirror": "^5.65.3",
-    "codemirror-graphql": "^1.3.2",
+    "codemirror-graphql": "^2.0.0-canary-041744de.0",
     "copy-to-clipboard": "^3.2.0",
-    "escape-html": "^1.0.3",
     "graphql-language-service": "^5.0.6",
@@ -52,11 +52,12 @@ "markdown-it": "^12.2.0",
     "@types/codemirror": "^5.60.5",
-    "@types/escape-html": "^1.0.1",
     "@types/set-value": "^4.0.1",
     "@vitejs/plugin-react": "^1.3.0",
     "graphql": "^16.4.0",
+    "postcss-nesting": "^10.1.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "typescript": "^4.6.3",
-    "vite": "^2.9.5"
+    "vite": "^2.9.5",
+    "vite-plugin-react-svg": "^0.2.0"
   }
 }

src/editor/completion.ts

 import type { Editor, EditorChange } from 'codemirror';
-import escapeHTML from 'escape-html';
+import type { IHint } from 'codemirror-graphql/hint';
 import { GraphQLSchema, GraphQLType, isListType, isNonNullType } from 'graphql';
@@ -21,3 +21,10 @@
     let information: HTMLDivElement | null;
+    let fieldName: HTMLSpanElement | null;
+    let typeNamePill: HTMLSpanElement | null;
+    let typeNamePrefix: HTMLSpanElement | null;
+    let typeName: HTMLAnchorElement | null;
+    let typeNameSuffix: HTMLSpanElement | null;
+    let description: HTMLDivElement | null;
     let deprecation: HTMLDivElement | null;
+    let deprecationReason: HTMLDivElement | null;
     CodeMirror.on(
@@ -27,7 +34,7 @@ data,
       // @ts-expect-error
-      (ctx: GraphQLField<{}, {}, {}>, el: HTMLDivElement) => {
+      (ctx: IHint, el: HTMLDivElement) => {
         // Only the first time (usually when the hint UI is first displayed)
         // do we create the information nodes.
         if (!information) {
-          const hintsUl = el.parentNode as Node & ParentNode;
+          const hintsUl = el.parentNode as HTMLUListElement & ParentNode;
 
@@ -38,10 +45,97 @@ // This "information" node will contain the additional info about the
           information.className = 'CodeMirror-hint-information';
-          information.addEventListener('click', onClickHintInformation);
           hintsUl.appendChild(information);
 
-          // This "deprecation" node will contain info about deprecated usage.
+          const header = document.createElement('header');
+          header.className = 'CodeMirror-hint-information-header';
+          information.appendChild(header);
+
+          fieldName = document.createElement('span');
+          fieldName.className = 'CodeMirror-hint-information-field-name';
+          header.appendChild(fieldName);
+
+          typeNamePill = document.createElement('span');
+          typeNamePill.className = 'CodeMirror-hint-information-type-name-pill';
+          header.appendChild(typeNamePill);
+
+          typeNamePrefix = document.createElement('span');
+          typeNamePill.appendChild(typeNamePrefix);
+
+          typeName = document.createElement('a');
+          typeName.className = 'CodeMirror-hint-information-type-name';
+          typeName.href = 'javascript:void 0'; // eslint-disable-line no-script-url
+          typeName.addEventListener('click', onClickHintInformation);
+          typeNamePill.appendChild(typeName);
+
+          typeNameSuffix = document.createElement('span');
+          typeNamePill.appendChild(typeNameSuffix);
+
+          description = document.createElement('div');
+          description.className = 'CodeMirror-hint-information-description';
+          information.appendChild(description);
+
           deprecation = document.createElement('div');
-          deprecation.className = 'CodeMirror-hint-deprecation';
-          hintsUl.appendChild(deprecation);
+          deprecation.className = 'CodeMirror-hint-information-deprecation';
+          information.appendChild(deprecation);
 
+          const deprecationLabel = document.createElement('span');
+          deprecationLabel.className =
+            'CodeMirror-hint-information-deprecation-label';
+          deprecationLabel.innerText = 'Deprecated';
+          deprecation.appendChild(deprecationLabel);
+
+          deprecationReason = document.createElement('div');
+          deprecationReason.className =
+            'CodeMirror-hint-information-deprecation-reason';
+          deprecation.appendChild(deprecationReason);
+
+          /**
+           * This is a bit hacky: By default, codemirror renders all hints
+           * inside a single container element. The only possibility to add
+           * something into this list is to add to the container element (which
+           * is a `ul` element).
+           *
+           * However, in the UI we want to have a two-column layout for the
+           * hints:
+           * - The first column contains the actual hints, i.e. the things that
+           *   are returned from the `hint` module from `codemirror-graphql`.
+           * - The second column contains the description and optionally the
+           *   deprecation reason for the given field.
+           *
+           * We solve this with a CSS grid layout that has an auto number of
+           * rows and two columns. All the hints go in the first column, and
+           * the description container (which is the `information` element
+           * here) goes in the second column. To make the hints scrollable, the
+           * container element has `overflow-y: auto`.
+           *
+           * Now here comes the crux: When scrolling down the list of hints we
+           * still want the description to be "sticky" to the top. We can't
+           * solve this with `position: sticky` as the container element itself
+           * is already positioned absolutely.
+           *
+           * There are two things to the solution here:
+           * - We add another `overflow: auto` to the `information` element.
+           *   This makes it scrollable on its own if the description or
+           *   deprecation reason is higher that the container element.
+           * - We add an `onscroll` handler to the container element. When the
+           *   user scrolls here we dynamically adjust the top padding of the
+           *   information element such that it looks like it's sticking to
+           *   the top. (Since the `information` element has some padding by
+           *   default we also have to make sure to use this as baseline for
+           *   the total padding.)
+           */
+          const defaultInformationPadding =
+            parseInt(
+              window
+                .getComputedStyle(information)
+                .paddingBottom.replace(/px$/, ''),
+              10,
+            ) || 0;
+          const handleScroll = () => {
+            if (information) {
+              information.style.paddingTop =
+                hintsUl.scrollTop + defaultInformationPadding + 'px';
+            }
+          };
+          hintsUl.addEventListener('scroll', handleScroll);
+
           // When CodeMirror attempts to remove the hint UI, we detect that it was
@@ -54,2 +148,3 @@ // removed and in turn remove the information nodes.
               if (event.target === hintsUl) {
+                hintsUl.removeEventListener('scroll', handleScroll);
                 hintsUl.removeEventListener('DOMNodeRemoved', onRemoveFn);
@@ -63,3 +158,10 @@ if (information) {
                 information = null;
+                fieldName = null;
+                typeNamePill = null;
+                typeNamePrefix = null;
+                typeName = null;
+                typeNameSuffix = null;
+                description = null;
                 deprecation = null;
+                deprecationReason = null;
                 onRemoveFn = null;
@@ -71,27 +173,55 @@ }
 
-        // Now that the UI has been set up, add info to information.
-        const description = ctx.description
-          ? markdown.render(ctx.description)
-          : 'Self descriptive.';
-        const type = ctx.type
-          ? '<span class="infoType">' + renderType(ctx.type) + '</span>'
-          : '';
+        if (fieldName) {
+          fieldName.innerText = ctx.text;
+        }
 
-        information.innerHTML =
-          '<div class="content">' +
-          (description.slice(0, 3) === '<p>'
-            ? '<p>' + type + description.slice(3)
-            : type + description) +
-          '</div>';
+        if (typeNamePill && typeNamePrefix && typeName && typeNameSuffix) {
+          if (ctx.type) {
+            typeNamePill.style.display = 'inline';
 
-        if (ctx && deprecation && ctx.deprecationReason) {
-          const reason = ctx.deprecationReason
-            ? markdown.render(ctx.deprecationReason)
-            : '';
-          deprecation.innerHTML =
-            '<span class="deprecation-label">Deprecated</span>' + reason;
-          deprecation.style.display = 'block';
-        } else if (deprecation) {
-          deprecation.style.display = 'none';
+            const renderType = (type: GraphQLType) => {
+              if (isNonNullType(type)) {
+                typeNameSuffix!.innerText = '!' + typeNameSuffix!.innerText;
+                renderType(type.ofType);
+              } else if (isListType(type)) {
+                typeNamePrefix!.innerText += '[';
+                typeNameSuffix!.innerText = ']' + typeNameSuffix!.innerText;
+                renderType(type.ofType);
+              } else {
+                typeName!.innerText = type.name;
+              }
+            };
+
+            typeNamePrefix.innerText = '';
+            typeNameSuffix.innerText = '';
+            renderType(ctx.type);
+          } else {
+            typeNamePrefix.innerText = '';
+            typeName.innerText = '';
+            typeNameSuffix.innerText = '';
+            typeNamePill.style.display = 'none';
+          }
         }
+
+        if (description) {
+          if (ctx.description) {
+            description.style.display = 'block';
+            description.innerHTML = markdown.render(ctx.description);
+          } else {
+            description.style.display = 'none';
+            description.innerHTML = '';
+          }
+        }
+
+        if (deprecation && deprecationReason) {
+          if (ctx.deprecationReason) {
+            deprecation.style.display = 'block';
+            deprecationReason.innerHTML = markdown.render(
+              ctx.deprecationReason,
+            );
+          } else {
+            deprecation.style.display = 'none';
+            deprecationReason.innerHTML = '';
+          }
+        }
       },
@@ -102,12 +232,7 @@ );
   function onClickHintInformation(event: Event) {
-    if (
-      !schema ||
-      !explorer ||
-      !(event.currentTarget instanceof HTMLElement) ||
-      event.currentTarget.className !== 'typeName'
-    ) {
+    if (!schema || !explorer || !(event.currentTarget instanceof HTMLElement)) {
       return;
     }
 
-    const typeName = event.currentTarget.innerHTML;
+    const typeName = event.currentTarget.innerText;
     const type = schema.getType(typeName);
@@ -120,11 +245,1 @@ if (type) {
 }
-
-function renderType(type: GraphQLType): string {
-  if (isNonNullType(type)) {
-    return `${renderType(type.ofType)}!`;
-  }
-  if (isListType(type)) {
-    return `[${renderType(type.ofType)}]`;
-  }
-  return `<a class="typeName">${escapeHTML(type.name)}</a>`;
-}

src/editor/components/index.ts

@@ -0,3 +1,13 @@
+import { HeaderEditor } from './header-editor';
 import { ImagePreview } from './image-preview';
+import { QueryEditor } from './query-editor';
+import { ResponseEditor } from './response-editor';
+import { VariableEditor } from './variable-editor';
 
-export { ImagePreview };
+export {
+  HeaderEditor,
+  ImagePreview,
+  QueryEditor,
+  ResponseEditor,
+  VariableEditor,
+};

src/editor/hooks.ts

@@ -279,3 +279,3 @@ import { fillLeafs, GetDefaultFieldNamesFn, mergeAst } from '@graphiql/toolkit';
             {
-              className: 'autoInsertedLeaf',
+              className: 'auto-inserted-leaf',
               clearOnEnter: true,
@@ -282,0 +282,0 @@ title: 'Automatically added leaf fields',

src/editor/index.ts

 export { onHasCompletion } from './completion';
-export { ImagePreview } from './components';
 export {
+  HeaderEditor,
+  ImagePreview,
+  QueryEditor,
+  ResponseEditor,
+  VariableEditor,
+} from './components';
+export {
   EditorContext,
@@ -5,0 +11,0 @@ EditorContextProvider,

src/index.ts

 export {
   EditorContext,
   EditorContextProvider,
+  HeaderEditor,
   ImagePreview,
   onHasCompletion,
+  QueryEditor,
+  ResponseEditor,
   useAutoCompleteLeafs,
@@ -15,2 +18,3 @@ useCopyQuery,
   useVariableEditor,
+  VariableEditor,
 } from './editor';
@@ -33,2 +37,3 @@ export {
 } from './history';
+export * from './icons';
 export {
@@ -44,2 +49,4 @@ SchemaContext,
 } from './storage';
+export * from './toolbar';
+export * from './ui';
 export { useDragResize } from './utility/resize';
@@ -67,1 +74,4 @@
 export type { StorageContextType } from './storage';
+
+import './style/root.css';
+import './style/markdown.css';

src/vite-env.d.ts

@@ -1,1 +0,1 @@
-// / <reference types="vite/client" />
+/// <reference types="vite/client" />

types/editor/components/index.d.ts

@@ -0,2 +1,6 @@
+import { HeaderEditor } from './header-editor';
 import { ImagePreview } from './image-preview';
-export { ImagePreview };
+import { QueryEditor } from './query-editor';
+import { ResponseEditor } from './response-editor';
+import { VariableEditor } from './variable-editor';
+export { HeaderEditor, ImagePreview, QueryEditor, ResponseEditor, VariableEditor, };

types/editor/header-editor.d.ts

@@ -11,3 +11,3 @@ /// <reference types="react" />
 };
-export declare function useHeaderEditor({ editorTheme, keyMap, onEdit, readOnly, shouldPersistHeaders, }?: UseHeaderEditorArgs): import("react").RefObject<HTMLDivElement>;
+export declare function useHeaderEditor({ editorTheme, keyMap, onEdit, readOnly, shouldPersistHeaders, }?: UseHeaderEditorArgs, caller?: Function): import("react").RefObject<HTMLDivElement>;
 export declare const STORAGE_KEY = "headers";

types/editor/index.d.ts

 export { onHasCompletion } from './completion';
-export { ImagePreview } from './components';
+export { HeaderEditor, ImagePreview, QueryEditor, ResponseEditor, VariableEditor, } from './components';
 export { EditorContext, EditorContextProvider, useEditorContext, } from './context';
@@ -4,0 +4,0 @@ export { useHeaderEditor } from './header-editor';

types/editor/query-editor.d.ts

@@ -18,4 +18,4 @@ /// <reference types="react" />
 };
-export declare function useQueryEditor({ editorTheme, keyMap, externalFragments, onClickReference, onCopyQuery, onEdit, onEditOperationName, readOnly, validationRules, }?: UseQueryEditorArgs): import("react").RefObject<HTMLDivElement>;
+export declare function useQueryEditor({ editorTheme, keyMap, externalFragments, onClickReference, onCopyQuery, onEdit, onEditOperationName, readOnly, validationRules, }?: UseQueryEditorArgs, caller?: Function): import("react").RefObject<HTMLDivElement>;
 export declare const STORAGE_KEY_QUERY = "query";
 export {};

types/editor/response-editor.d.ts

@@ -13,2 +13,2 @@ import type { Position } from 'codemirror';
 };
-export declare function useResponseEditor({ ResponseTooltip, editorTheme, keyMap, value, }?: UseResponseEditorArgs): import("react").RefObject<HTMLDivElement>;
+export declare function useResponseEditor({ ResponseTooltip, editorTheme, keyMap, value, }?: UseResponseEditorArgs, caller?: Function): import("react").RefObject<HTMLDivElement>;

types/editor/variable-editor.d.ts

@@ -10,3 +10,3 @@ /// <reference types="react" />
 };
-export declare function useVariableEditor({ editorTheme, keyMap, onEdit, readOnly, }?: UseVariableEditorArgs): import("react").RefObject<HTMLDivElement>;
+export declare function useVariableEditor({ editorTheme, keyMap, onEdit, readOnly, }?: UseVariableEditorArgs, caller?: Function): import("react").RefObject<HTMLDivElement>;
 export declare const STORAGE_KEY = "variables";

types/index.d.ts

@@ -1,7 +0,10 @@
-export { EditorContext, EditorContextProvider, ImagePreview, onHasCompletion, useAutoCompleteLeafs, useCopyQuery, useEditorContext, useHeaderEditor, useMergeQuery, usePrettifyEditors, useQueryEditor, useResponseEditor, useVariableEditor, } from './editor';
+export { EditorContext, EditorContextProvider, HeaderEditor, ImagePreview, onHasCompletion, QueryEditor, ResponseEditor, useAutoCompleteLeafs, useCopyQuery, useEditorContext, useHeaderEditor, useMergeQuery, usePrettifyEditors, useQueryEditor, useResponseEditor, useVariableEditor, VariableEditor, } from './editor';
 export { ExecutionContext, ExecutionContextProvider, useExecutionContext, } from './execution';
 export { ExplorerContext, ExplorerContextProvider, useExplorerContext, } from './explorer';
 export { HistoryContext, HistoryContextProvider, useHistoryContext, useSelectHistoryItem, } from './history';
+export * from './icons';
 export { SchemaContext, SchemaContextProvider, useSchemaContext, } from './schema';
 export { StorageContext, StorageContextProvider, useStorageContext, } from './storage';
+export * from './toolbar';
+export * from './ui';
 export { useDragResize } from './utility/resize';
@@ -14,1 +17,3 @@ export type { EditorContextType, ResponseTooltipType, TabsState, UseHeaderEditorArgs, UseQueryEditorArgs, UseResponseEditorArgs, UseVariableEditorArgs, KeyMap, } from './editor';
 export type { StorageContextType } from './storage';
+import './style/root.css';
+import './style/markdown.css';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2356089

increased by25.41%

Dependency count

10

decreased by-9.09%

Number of package files

173

increased by40.65%

Lines of code

45266

increased by8.7%

Worsened metrics

Dev dependency count

10

increased by11.11%

Number of low supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Added@codemirror/language@6.0.0(transitive)

• + Added@codemirror/state@6.4.1(transitive)

• + Added@codemirror/view@6.34.1(transitive)

• + Added@lezer/common@1.2.3(transitive)

• + Added@lezer/highlight@1.2.1(transitive)

• + Added@lezer/lr@1.4.2(transitive)

• + Added@types/codemirror@0.0.90(transitive)

• + Added@types/estree@1.0.6(transitive)

• + Added@types/tern@0.23.9(transitive)

• + Addedcodemirror-graphql@2.1.1(transitive)

• - Removedescape-html@^1.0.3

• - Removed@codemirror/language@0.20.2(transitive)

• - Removed@codemirror/state@0.20.1(transitive)

• - Removed@codemirror/view@0.20.7(transitive)

• - Removed@lezer/common@0.16.1(transitive)

• - Removed@lezer/highlight@0.16.0(transitive)

• - Removed@lezer/lr@0.16.3(transitive)

• - Removedcodemirror-graphql@1.3.2(transitive)

• - Removedescape-html@1.0.3(transitive)

• Updatedcodemirror-graphql@^2.0.0-canary-041744de.0