[3] GraphiQL 5 x Monaco editor / Monaco-GraphQL / JSONC variables/headers

[dimaMachina]

closes #2326 #780 #3874 #2971 #3957 #3956 #3788 #3387

• Migrate Codemirror editors to Monaco editor

• Setup Monaco GraphQL

• Resize works

• Configure save operations/variables/headers values to storage

• save operationName to storage

• color theme should be adjusted to actual codemirror color theme on dark/light mode (currently hard copied from graphiql prototype)

• validation errors don't appear on the initial loading

• validation error in the variables editor (related issue monaco-editor error in variables editor jonathanawesome/graphiql-prototype#55)

• fix unit/e2e tests

[changeset-bot]

🦋 Changeset detected

Latest commit: a2765fb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages

Name	Type
graphiql	Major
@graphiql/react	Minor
monaco-graphql	Minor
@graphiql/plugin-code-exporter	Major
@graphiql/plugin-doc-explorer	Patch
@graphiql/plugin-explorer	Major
@graphiql/plugin-history	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

The latest changes of this PR are available as canary in npm (based on the declared changesets):

cm6-graphql@0.2.2-canary-b05ed7ff.0
codemirror-graphql@2.2.2-canary-b05ed7ff.0
graphiql@5.0.0-canary-b05ed7ff.0
@graphiql/plugin-code-exporter@4.0.6-canary-b05ed7ff.0
@graphiql/plugin-doc-explorer@0.3.0-canary-b05ed7ff.0
@graphiql/plugin-explorer@4.0.6-canary-b05ed7ff.0
@graphiql/plugin-history@0.3.0-canary-b05ed7ff.0
@graphiql/react@0.35.0-canary-b05ed7ff.0
@graphiql/toolkit@0.11.3-canary-b05ed7ff.0
graphql-language-service@5.3.2-canary-b05ed7ff.0
graphql-language-service-cli@3.5.1-canary-b05ed7ff.0
graphql-language-service-server@2.14.7-canary-b05ed7ff.0
monaco-graphql@1.7.0-canary-b05ed7ff.0

[acao]

another thing I'll be cleaning up is a lot of no longer needed - for example, most of onHasCompletion can go, we deleted quite a bit when we added monaco in 2020

[acao]

rebased!

I will start a pre-release process for this branch. any changes we merge to this branch will be merged as a pre-release

[netlify]

✅ Deploy Preview for graphiql-test ready!

Name	Link
🔨 Latest commit	f02956a
🔍 Latest deploy log	https://app.netlify.com/sites/graphiql-test/deploys/64c7811d10faa600083992b2
😎 Deploy Preview	https://deploy-preview-3234--graphiql-test.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[acao]

@dimaMachina I am going to revive this, and manually re-create these changes on a new branch. I will try to keep tooling changes minimal for now

[TallTed]

Tweaks to human-facing grammar, punctuation, etc., for clarity and consistency

[codecov]

Codecov Report

Attention: Patch coverage is 66.66667% with 1 line in your changes missing coverage. Please review.

Project coverage is 63.96%. Comparing base (c94a092) to head (a2765fb).

Files with missing lines	Patch %	Lines
...guage-service/src/interface/getHoverInformation.ts	66.66%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##            v4-10    #3234   +/-   ##
=======================================
  Coverage   63.96%   63.96%           
=======================================
  Files          35       35           
  Lines        3086     3086           
  Branches      950      934   -16     
=======================================
  Hits         1974     1974           
  Misses       1107     1107           
  Partials        5        5           

Files with missing lines	Coverage Δ
...l-language-service/src/interface/getDiagnostics.ts	65.27% <ø> (ø)
...nguage-service/src/utils/getVariablesJSONSchema.ts	1.58% <ø> (ø)
...guage-service/src/interface/getHoverInformation.ts	51.14% <66.66%> (ø)

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.