new mini IDE for site using monaco-graphql

[acao]

we should build a new mini-IDE for the docs using monaco-graphql, since it's actually screen-reader accessible, supports multiple instances (with shared, single schema fetch) and it already supports most of the new language features that we need to document (correction - the LSP (gls-interface) does not yet have completion support for interfaces implementing interfaces, though validation and highlighting is supported in monaco-graphql. previously this issue claimed we fully supported this language feature).

according to the vscode team, the best way to re-use the same monaco mode instance across multiple editors is by using editor.setModel(). this way, the language service instance is built once, and the schema is executed once, and one set of language workers will service all editor panes.

the current MiniGraphQL component uses codemirror-graphql which takes much more effort to add new language features to, because of the non-LSP interface

also, if we want the embedded demos to execute against swapi-graphql, need to add new language features to that schema as well.

[dotansimha]

That's a great idea ;) We are using it in GraphQL Codegen website and it works great!

[acao]

there are some fantastic react hooks out there for monaco editor already. we also have a react + monaco example in the form of an unfinished graphiql 2.x rfc!