new mini IDE for site using monaco-graphql

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.

Start with the current MiniGraphQL component, which uses codemirror-graphql, and review how monaco-graphql could replace it using editor.setModel() for shared language workers and schema fetching. Done means the docs have the new mini-IDE with the stated accessibility, multi-instance, validation, highlighting, and embedded-demo requirements, including any needed swapi-graphql schema work.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.