fix: learn pages crashing due to codemirror (graphql#1402)

Author: dannyhw

package.json

@@ -23,8 +23,8 @@
     "@weknow/gatsby-remark-twitter": "0.2.3",
     "assert": "2.0.0",
     "clsx": "1.2.1",
-    "codemirror": "6.0.1",
-    "codemirror-graphql": "2.0.5",
+    "codemirror": "5.65.1",
+    "codemirror-graphql": "1.2.11",
     "gatsby": "5.8.1",
     "gatsby-plugin-anchor-links": "1.2.1",
     "gatsby-plugin-feed": "5.8.0",

src/components/Marked/MiniGraphiQL.tsx

@@ -9,7 +9,6 @@
 
 import React from "react"
 import { marked } from "marked"
-import * as CodeMirror from "codemirror"
 
 import { graphql, formatError, parse, typeFromAST } from "graphql"
 
@@ -140,6 +139,17 @@ class QueryEditor extends React.Component {
   }
 
   componentDidMount() {
+    var CodeMirror = require("codemirror")
+    require("codemirror/addon/hint/show-hint")
+    require("codemirror/addon/comment/comment")
+    require("codemirror/addon/edit/matchbrackets")
+    require("codemirror/addon/edit/closebrackets")
+    require("codemirror/addon/lint/lint")
+    require("codemirror/keymap/sublime")
+    require("codemirror-graphql/hint")
+    require("codemirror-graphql/lint")
+    require("codemirror-graphql/mode")
+
     this.editor = CodeMirror(this.domNode, {
       value: this.props.value || "",
       viewportMargin: Infinity,
@@ -327,6 +337,15 @@ class VariableEditor extends React.Component {
   componentDidMount() {
     // Lazily require to ensure requiring GraphiQL outside of a Browser context
     // does not produce an error.
+    const CodeMirror = require("codemirror")
+    require("codemirror/addon/hint/show-hint")
+    require("codemirror/addon/edit/matchbrackets")
+    require("codemirror/addon/edit/closebrackets")
+    require("codemirror/addon/lint/lint")
+    require("codemirror/keymap/sublime")
+    require("codemirror-graphql/variables/hint")
+    require("codemirror-graphql/variables/lint")
+    require("codemirror-graphql/variables/mode")
 
     this.editor = CodeMirror(this.domNode, {
       value: this.props.value || "",