learn — new interactive code blocks (#47)

* Render MiniGraphiQL with `graphiql` string in node.meta

* Don't validate in Marked: not its responsibility

* Change interactive code snippet colors

* Remove global .miniGraphiQL class

* Refactor MiniGraphiQL to separate files

* Add a TODO comment

* Run Playwright on CI

* wip

* color codemirrors properly

* Style codemirrors properly

* Upgrade pnpm from 9.15.9 to 10.15.0

* Update 2025 conference schedule and speaker details

* Improve syntax highlighting for comments and diffs

* Remove focus outline

* Extract CodeBlockLabel

* Remove unused marked dependency

* Rename `marked` to `interactive-code-block`

* Update codemirror styles

* Allow running esbuild builds

* Remove duplicate image

* Format

* Change syntax theme names to avoid a bug

* Fix heights and properly chain handlers

* Fix tests for new editor

* Run Playwright on CI

* Use the same colors for VariableEditor

* Use the same font for interactive code blocks

* Match the coloring on t.separator [,:] between Lezer and Shiki

Author: hasparus

.github/workflows/check.yml

@@ -22,3 +22,19 @@ jobs:
 
       - name: Run Prettier Check
         run: pnpm format:check
+
+        # per the docs: "caching browser binaries is not recommended,
+        # since the amount of time it takes to restore the cache is
+        # comparable to the time it takes to download the binaries"
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: npx playwright test
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -63,3 +63,5 @@ public/sitemap.xml
 out/
 
 tsconfig.tsbuildinfo
+
+playwright-report/

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "repository": "graphql/graphql.github.io website",
   "private": true,
-  "packageManager": "pnpm@9.15.9",
+  "packageManager": "pnpm@10.15.0",
   "scripts": {
     "analyze": "ANALYZE=true next build",
     "build": "next build && next-image-export-optimizer",
@@ -22,9 +22,17 @@
     "validate:snippets": "node scripts/validate-snippets.js"
   },
   "dependencies": {
+    "@codemirror/autocomplete": "^6.18.6",
+    "@codemirror/commands": "^6.3.3",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/language": "^6.10.0",
+    "@codemirror/lint": "^6.8.5",
+    "@codemirror/state": "^6.4.0",
+    "@codemirror/view": "^6.24.0",
     "@graphql-tools/schema": "10.0.25",
     "@headlessui/react": "^2.2.4",
     "@igorkowalczyk/is-browser": "^5.1.0",
+    "@lezer/highlight": "^1.2.1",
     "@next/bundle-analyzer": "^15.4.5",
     "@radix-ui/react-radio-group": "^1.2.2",
     "@sparticuz/chromium": "^138.0.2",
@@ -34,8 +42,7 @@
     "autoprefixer": "^10.4.20",
     "calendar-link": "^2.10.0",
     "clsx": "^2.1.1",
-    "codemirror": "^5.65.19",
-    "codemirror-graphql": "1.3.2",
+    "cm6-graphql": "^0.2.1",
     "date-fns": "^2.30.0",
     "fast-glob": "^3.3.3",
     "github-slugger": "2.0.0",
@@ -46,9 +53,8 @@
     "leaflet": "^1.9.4",
     "lucide-react": "^0.469.0",
     "markdown-to-jsx": "^7.7.2",
-    "marked": "5.1.2",
     "motion": "^12.11.0",
-    "next": "^14.2.22",
+    "next": "^14.2.32",
     "next-image-export-optimizer": "^1.18.0",
     "next-query-params": "^5.0.1",
     "next-sitemap": "^4.2.3",
@@ -88,7 +94,7 @@
     "@types/codemirror": "5.60.16",
     "@types/hast": "3.0.4",
     "@types/node": "^22.10.5",
-    "@types/react": "^18.3.18",
+    "@types/react": "^18.3.23",
     "@types/rss": "0.0.32",
     "@types/string-similarity": "^4.0.2",
     "@typescript-eslint/eslint-plugin": "7.18.0",
@@ -106,7 +112,7 @@
     "remark-lint-first-heading-level": "3.1.2",
     "remark-lint-heading-increment": "3.1.2",
     "tsx": "^4.19.4",
-    "typescript": "^5.8.3"
+    "typescript": "^5.9.2"
   },
   "browserslist": [
     "chrome >0 and last 2.5 years",
@@ -122,6 +128,9 @@
       "nextra": "patches/nextra.patch",
       "nextra-theme-docs": "patches/nextra-theme-docs.patch",
       "mermaid-isomorphic": "patches/mermaid-isomorphic.patch"
-    }
+    },
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ]
   }
 }