" - ? "
" + type + description.slice(3) - : type + description) + - "
+
{"{"}
{"\n "}
- {"hero"}
+ {"hero"}
{" {"}
-
+
{"\n name"}
{"\n height\n mass".split("").map((char, i) => (
{char === "\n" ?
: char}
diff --git a/src/components/index-page/how-it-works.tsx b/src/components/index-page/how-it-works.tsx
index e20aea999f..20842ac2e1 100644
--- a/src/components/index-page/how-it-works.tsx
+++ b/src/components/index-page/how-it-works.tsx
@@ -12,6 +12,13 @@ export function HowItWorks() {
A GraphQL Query
diff --git a/src/components/interactive-code-block/codemirror-theme.tsx b/src/components/interactive-code-block/codemirror-theme.tsx
new file mode 100644
index 0000000000..a6708358d7
--- /dev/null
+++ b/src/components/interactive-code-block/codemirror-theme.tsx
@@ -0,0 +1,137 @@
+import { EditorView } from "@codemirror/view"
+import { Extension } from "@codemirror/state"
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language"
+import { tags as t } from "@lezer/highlight"
+
+export const editorTheme = EditorView.theme({
+ "&": {
+ color: "var(--cm-foreground)",
+ backgroundColor: "var(--cm-background)",
+ },
+
+ ".cm-content": {
+ caretColor: "var(--cm-cursor)",
+ },
+
+ ".cm-cursor, .cm-dropCursor": { borderLeftColor: "var(--cm-cursor)" },
+ "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
+ { backgroundColor: "var(--cm-selection)" },
+
+ ".cm-panels": {
+ backgroundColor: "var(--cm-background)",
+ color: "var(--cm-foreground)",
+ },
+ ".cm-panels.cm-panels-top": {
+ borderBottom: "2px solid var(--cm-gutter-border)",
+ },
+ ".cm-panels.cm-panels-bottom": {
+ borderTop: "2px solid var(--cm-gutter-border)",
+ },
+
+ ".cm-searchMatch": {
+ backgroundColor: "#72a1ff59",
+ outline: "1px solid #457dff",
+ },
+ ".cm-searchMatch.cm-searchMatch-selected": {
+ backgroundColor: "#6199ff2f",
+ },
+
+ ".cm-activeLine": { backgroundColor: "rgba(255, 255, 255, 0.05)" },
+ ".cm-selectionMatch": { backgroundColor: "#aafe661a" },
+
+ "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
+ backgroundColor: "#bad0f847",
+ },
+
+ ".cm-gutters": {
+ backgroundColor: "var(--cm-gutter-background)",
+ color: "var(--cm-line-number)",
+ border: "none",
+ borderRight: "1px solid var(--cm-gutter-border)",
+ },
+
+ ".cm-activeLineGutter": {
+ backgroundColor: "var(--cm-gutter-background)",
+ },
+
+ ".cm-foldPlaceholder": {
+ backgroundColor: "transparent",
+ border: "none",
+ color: "#ddd",
+ },
+
+ ".cm-tooltip": {
+ border: "none",
+ backgroundColor: "var(--cm-hints-background)",
+ color: "var(--cm-hints-foreground)",
+ },
+ ".cm-tooltip .cm-tooltip-arrow:before": {
+ borderTopColor: "transparent",
+ borderBottomColor: "transparent",
+ },
+ ".cm-tooltip .cm-tooltip-arrow:after": {
+ borderTopColor: "var(--cm-hints-background)",
+ borderBottomColor: "var(--cm-hints-background)",
+ },
+ ".cm-tooltip-autocomplete": {
+ "& > ul > li[aria-selected]": {
+ backgroundColor: "var(--cm-hints-active-background)",
+ color: "var(--cm-hints-active-foreground)",
+ },
+ },
+})
+
+export const syntaxTheme = HighlightStyle.define([
+ { tag: t.keyword, class: "cm-keyword" },
+ {
+ tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
+ class: "cm-def",
+ },
+ { tag: [t.function(t.variableName), t.labelName], class: "cm-variable" },
+ { tag: [t.color, t.constant(t.name), t.standard(t.name)], class: "cm-atom" },
+ { tag: [t.definition(t.name), t.separator], class: "cm-def" },
+ {
+ tag: [
+ t.typeName,
+ t.className,
+ t.number,
+ t.changed,
+ t.annotation,
+ t.modifier,
+ t.self,
+ t.namespace,
+ ],
+ class: "cm-atom",
+ },
+ {
+ tag: [
+ t.operator,
+ t.operatorKeyword,
+ t.url,
+ t.escape,
+ t.regexp,
+ t.link,
+ t.special(t.string),
+ t.separator,
+ ],
+ class: "cm-punctuation",
+ },
+ { tag: [t.meta, t.comment], class: "cm-comment" },
+ { tag: t.strong, fontWeight: "bold" },
+ { tag: t.emphasis, fontStyle: "italic" },
+ { tag: t.strikethrough, textDecoration: "line-through" },
+ { tag: t.link, class: "cm-comment", textDecoration: "underline" },
+ { tag: t.heading, fontWeight: "bold", class: "cm-def" },
+ { tag: [t.atom, t.bool, t.special(t.variableName)], class: "cm-atom" },
+ { tag: [t.processingInstruction, t.string, t.inserted], class: "cm-string" },
+ { tag: t.invalid, class: "cm-invalidchar" },
+ {
+ tag: t.punctuation,
+ class: "cm-punctuation",
+ },
+])
+
+export const codeMirrorThemeExtension: Extension = [
+ editorTheme,
+ syntaxHighlighting(syntaxTheme),
+]
diff --git a/src/components/interactive-code-block/get-variable-to-type.tsx b/src/components/interactive-code-block/get-variable-to-type.tsx
new file mode 100644
index 0000000000..dc2924395d
--- /dev/null
+++ b/src/components/interactive-code-block/get-variable-to-type.tsx
@@ -0,0 +1,30 @@
+import { GraphQLSchema, parse, typeFromAST } from "graphql"
+
+export function getVariableToType(schema: GraphQLSchema, documentStr: string) {
+ if (!documentStr || !schema) {
+ return {}
+ }
+
+ try {
+ const documentAST = parse(documentStr)
+ const variableToType = Object.create(null)
+ documentAST.definitions.forEach(definition => {
+ if (definition.kind === "OperationDefinition") {
+ const variableDefinitions = definition.variableDefinitions
+ if (variableDefinitions) {
+ variableDefinitions.forEach(({ variable, type }) => {
+ const inputType = typeFromAST(schema, type)
+ if (inputType) {
+ variableToType[variable.name.value] = inputType
+ }
+ })
+ }
+ }
+ })
+ return variableToType
+ } catch (e) {
+ // ignore
+ }
+
+ return {}
+}
diff --git a/src/components/interactive-code-block/index.tsx b/src/components/interactive-code-block/index.tsx
new file mode 100644
index 0000000000..e856fdcd0b
--- /dev/null
+++ b/src/components/interactive-code-block/index.tsx
@@ -0,0 +1,5 @@
+import dynamic from "next/dynamic"
+
+export const InteractiveCodeBlock = dynamic(() => import("./mini-graphiQL"), {
+ ssr: true,
+})
diff --git a/src/components/interactive-code-block/mini-graphiQL.tsx b/src/components/interactive-code-block/mini-graphiQL.tsx
new file mode 100644
index 0000000000..ac8004aa89
--- /dev/null
+++ b/src/components/interactive-code-block/mini-graphiQL.tsx
@@ -0,0 +1,190 @@
+/**
+ * Copyright (c) 2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from "react"
+
+import { graphql, GraphQLSchema } from "graphql"
+
+import { QueryEditor } from "./query-editor"
+import { VariableEditor } from "./variable-editor"
+import { ResultViewer } from "./result-viewer"
+import { getVariableToType } from "./get-variable-to-type"
+import { StarWarsSchema } from "./swapi-schema"
+import { UsersSchema } from "./users-schema"
+import { CodeBlockLabel } from "@/components/pre/code-block-label"
+
+export type MiniGraphiQLProps = {
+ children: string
+}
+
+interface MiniGraphiQLState {
+ query: string
+ variables: string
+ response: string | null
+ variableToType: Record
+}
+
+const SCHEMA_MAP = {
+ StarWars: StarWarsSchema,
+ Users: UsersSchema,
+} as const
+
+type SchemaKey = keyof typeof SCHEMA_MAP
+
+type Metadata = {
+ graphiql?: boolean
+ variables?: unknown
+ schema?: SchemaKey
+}
+
+export default class MiniGraphiQL extends Component<
+ MiniGraphiQLProps,
+ MiniGraphiQLState
+> {
+ // Lifecycle
+
+ _editorQueryID = 0
+
+ schema: GraphQLSchema
+
+ constructor(props: MiniGraphiQLProps) {
+ super(props)
+
+ const codeMatch = this.props.children.match(/```graphql\s*\n([\s\S]*?)```/)
+ const blockContent = codeMatch?.[1]
+ const [firstLine, ...rest] = (blockContent || "").split("\n")
+
+ const metaMatch = firstLine.match(/^\s*#\s*({.*})\s*$/)?.[1] ?? "{}"
+ const meta = JSON.parse(metaMatch) as Metadata
+
+ const query = rest.join("\n").replace(/^\s+/, "")
+ const variables = meta.variables
+ ? JSON.stringify(meta.variables, null, 2)
+ : ""
+ this.schema = SCHEMA_MAP[meta.schema ?? "StarWars"]
+
+ this.state = {
+ query: query,
+ variables: variables,
+ response: null,
+ variableToType: getVariableToType(this.schema, query),
+ }
+ }
+
+ render() {
+ const editor = (
+
+ void this._runQuery.bind(this)}
+ />
+
+
+ ) : (
+ editor
+ )}
+
+ {
+ private view: EditorView | null = null
+ private domNode: HTMLDivElement | null = null
+ private cachedValue: string
+ private ignoreChangeEvent = false
+
+ constructor(props: QueryEditorProps) {
+ super(props)
+
+ // Keep a cached version of the value, this cache will be updated when the
+ // editor is updated, which can later be used to protect the editor from
+ // unnecessary updates during the update lifecycle.
+ this.cachedValue = props.value || ""
+ }
+
+ /**
+ * Public API for retrieving the CodeMirror instance from this
+ * React component.
+ */
+ getCodeMirror() {
+ return this.view
+ }
+
+ componentDidMount() {
+ if (!this.domNode) return
+
+ const runQueryBinding = keymap.of([
+ {
+ key: "Cmd-Enter",
+ run: () => (this.props.runQuery?.(), true),
+ },
+ {
+ key: "Ctrl-Enter",
+ run: () => (this.props.runQuery?.(), true),
+ },
+ ])
+
+ const state = EditorState.create({
+ doc: this.props.value || "",
+ extensions: [
+ history(),
+ closeBrackets(),
+ bracketMatching(),
+ keymap.of([...historyKeymap, ...completionKeymap, ...defaultKeymap]),
+ runQueryBinding,
+ codeMirrorThemeExtension,
+ graphql(this.props.schema, {}),
+ autocompletion({
+ icons: false,
+ }),
+ EditorView.updateListener.of(update => {
+ if (update.docChanged && !this.ignoreChangeEvent) {
+ this.cachedValue = update.state.doc.toString()
+ if (this.props.onEdit) {
+ this.props.onEdit(this.cachedValue)
+ }
+ }
+ }),
+ ],
+ })
+
+ // Create editor view
+ this.view = new EditorView({
+ state,
+ parent: this.domNode,
+ })
+ }
+
+ componentWillUnmount() {
+ if (this.view) {
+ this.view.destroy()
+ this.view = null
+ }
+ }
+
+ componentDidUpdate(prevProps: QueryEditorProps) {
+ if (!this.view) return
+
+ // Ensure the changes caused by this update are not interpreted as
+ // user-input changes which could otherwise result in an infinite
+ // event loop.
+ this.ignoreChangeEvent = true
+
+ if (this.props.schema !== prevProps.schema && this.props.schema) {
+ updateSchema(this.view, this.props.schema)
+ }
+
+ if (
+ this.props.value !== prevProps.value &&
+ this.props.value !== this.cachedValue
+ ) {
+ this.cachedValue = this.props.value || ""
+ this.view.dispatch({
+ changes: {
+ from: 0,
+ to: this.view.state.doc.length,
+ insert: this.props.value || "",
+ },
+ })
+ }
+
+ this.ignoreChangeEvent = false
+ }
+
+ render() {
+ return (
+ {
+ this.domNode = e
+ }}
+ />
+ )
+ }
+}
diff --git a/src/components/interactive-code-block/result-viewer.tsx b/src/components/interactive-code-block/result-viewer.tsx
new file mode 100644
index 0000000000..032424c44b
--- /dev/null
+++ b/src/components/interactive-code-block/result-viewer.tsx
@@ -0,0 +1,81 @@
+import { Component } from "react"
+import { EditorView } from "@codemirror/view"
+import { EditorState } from "@codemirror/state"
+// todo: perhaps custom grammar to match the shiki highlighting?
+import { json } from "@codemirror/lang-json"
+import { codeMirrorThemeExtension } from "./codemirror-theme"
+
+import "./syntax-highlighting.css"
+
+interface ResultViewerProps {
+ value?: string
+}
+
+/**
+ * ResultViewer
+ *
+ * Maintains an instance of CodeMirror 6 for viewing a GraphQL response.
+ *
+ * Props:
+ *
+ * - value: The text of the editor.
+ *
+ */
+export class ResultViewer extends Component {
+ private view: EditorView | null = null
+ private domNode: HTMLDivElement | null = null
+
+ componentDidMount() {
+ if (!this.domNode) return
+
+ // Create read-only editor state for JSON results
+ const state = EditorState.create({
+ doc: this.props.value || "",
+ extensions: [
+ EditorState.readOnly.of(true),
+ json(),
+ codeMirrorThemeExtension,
+ ],
+ })
+
+ // Create editor view
+ this.view = new EditorView({
+ state,
+ parent: this.domNode,
+ })
+ }
+
+ componentWillUnmount() {
+ if (this.view) {
+ this.view.destroy()
+ this.view = null
+ }
+ }
+
+ shouldComponentUpdate(nextProps: ResultViewerProps) {
+ return this.props.value !== nextProps.value
+ }
+
+ componentDidUpdate() {
+ if (!this.view) return
+
+ this.view.dispatch({
+ changes: {
+ from: 0,
+ to: this.view.state.doc.length,
+ insert: this.props.value || "",
+ },
+ })
+ }
+
+ render() {
+ return (
+ {
+ this.domNode = e
+ }}
+ />
+ )
+ }
+}
diff --git a/src/components/marked/swapi-schema.tsx b/src/components/interactive-code-block/swapi-schema.tsx
similarity index 100%
rename from src/components/marked/swapi-schema.tsx
rename to src/components/interactive-code-block/swapi-schema.tsx
diff --git a/src/components/interactive-code-block/syntax-highlighting.css b/src/components/interactive-code-block/syntax-highlighting.css
new file mode 100644
index 0000000000..62580fb102
--- /dev/null
+++ b/src/components/interactive-code-block/syntax-highlighting.css
@@ -0,0 +1,314 @@
+:root {
+ --cm-comment: #6e7557;
+ --cm-punctuation: #6e7557;
+ --cm-keyword: #990069;
+ --cm-def: hsl(var(--color-pri-base));
+ --cm-property: #0e0f0b;
+ --cm-qualifier: #1c92a9;
+ --cm-attribute: #8b2bb9;
+ --cm-number: #1976d2;
+ --cm-string: #609a06;
+ --cm-builtin: #1976d2;
+ --cm-string-2: #0b7fc7;
+ --cm-variable: #e10198;
+ --cm-meta: #b33086;
+ --cm-atom: #1976d2;
+
+ --cm-background: #ffffff;
+ --cm-foreground: #4f533f;
+ --cm-gutter-background: #f7f7f7;
+ --cm-gutter-border: #ddd;
+ --cm-line-number: #999;
+ --cm-cursor: #000000;
+ --cm-selection: #d7d4f0;
+ --cm-hints-background: hsl(var(--color-neu-0) / 0.8);
+ --cm-hints-foreground: #080707;
+ --cm-hints-active-background: hsl(var(--color-pri-base) / 0.1);
+ --cm-hints-active-foreground: #ffffff;
+}
+
+.dark {
+ /* Dark theme colors (matching Shiki dark.json) */
+ --cm-comment: #737373;
+ --cm-punctuation: #6e7557;
+ --cm-keyword: #c2f653;
+ --cm-def: #dbf6a2;
+ --cm-property: #dbf6a2;
+ --cm-qualifier: #1c92a9;
+ --cm-attribute: #8b2bb9;
+ --cm-number: #79b8ff;
+ --cm-string: #9ecbff;
+ --cm-builtin: #79b8ff;
+ --cm-string-2: #0b7fc7;
+ --cm-variable: #dbf6a2;
+ --cm-meta: #ff99e0;
+ --cm-atom: #79b8ff;
+
+ /* Editor UI colors - dark theme */
+ --cm-background: hsl(var(--color-neu-800) / 0.025);
+ --cm-foreground: #cfd3c5;
+ --cm-gutter-background: #1f2425;
+ --cm-gutter-border: #1b1f20;
+ --cm-line-number: #737373;
+ --cm-cursor: #c8e1ff;
+ --cm-selection: #3392ff44;
+ --cm-hints-foreground: #e1e4e8;
+ --cm-hints-active-background: hsl(var(--color-sec-base) / 0.1);
+ --cm-hints-active-foreground: #ffffff;
+}
+
+.cm-editor {
+ font-family: inherit;
+ font-size: inherit;
+ background: var(--cm-background);
+ color: var(--cm-foreground);
+ position: relative;
+
+ & .cm-content {
+ padding: 16px 0;
+ }
+
+ & .cm-line {
+ padding: 0 0 0 16px;
+ }
+
+ & .cm-scroller {
+ line-height: 1.5;
+ font-family: var(--font-mono);
+ }
+}
+
+.cm-focused {
+ outline: none;
+}
+
+/* Syntax Highlighting Classes */
+.cm-comment {
+ color: var(--cm-comment);
+}
+
+.cm-punctuation {
+ color: var(--cm-punctuation);
+}
+
+.cm-keyword {
+ color: var(--cm-keyword);
+}
+
+.cm-def {
+ color: var(--cm-def);
+}
+
+.cm-property {
+ color: var(--cm-property);
+}
+
+.cm-qualifier {
+ color: var(--cm-qualifier);
+}
+
+.cm-attribute {
+ color: var(--cm-attribute);
+}
+
+.cm-number {
+ color: var(--cm-number);
+}
+
+.cm-string {
+ color: var(--cm-string);
+}
+
+.cm-builtin {
+ color: var(--cm-builtin);
+}
+
+.cm-string-2 {
+ color: var(--cm-string-2);
+}
+
+.cm-variable {
+ color: var(--cm-variable);
+}
+
+.cm-meta {
+ color: var(--cm-meta);
+}
+
+.cm-atom {
+ color: var(--cm-atom);
+}
+
+/* Editor UI Elements */
+.cm-gutters {
+ border-right: 1px solid var(--cm-gutter-border);
+ background-color: var(--cm-gutter-background);
+ white-space: nowrap;
+}
+
+.cm-gutter {
+ white-space: normal;
+ height: 100%;
+ display: inline-block;
+ margin-bottom: -30px;
+}
+
+.cm-lineNumbers .cm-gutterElement {
+ padding: 0 3px 0 5px;
+ min-width: 20px;
+ text-align: right;
+ color: var(--cm-line-number);
+ white-space: nowrap;
+}
+
+.cm-cursor {
+ border-left: 1px solid var(--cm-cursor);
+ border-right: none;
+ width: 0;
+}
+
+.cm-selectionBackground {
+ background: var(--cm-selection);
+}
+
+.cm-focused.cm-focused {
+ outline: none;
+}
+
+.cm-focused .cm-selectionBackground {
+ background: var(--cm-selection);
+}
+
+/* Autocomplete/Hints */
+.cm-editor .cm-tooltip {
+ @apply shadow-md backdrop-blur-[6.4px] dark:border-neu-50;
+
+ border: 1px solid hsl(var(--color-neu-100));
+ background: var(--cm-hints-background);
+ color: var(--cm-hints-foreground);
+ font-family: inherit;
+ font-size: inherit;
+
+ &.cm-completionInfo-right {
+ @apply bg-neu-0 shadow-lg;
+ }
+}
+
+.cm-tooltip-autocomplete {
+ background: var(--cm-hints-background);
+ margin-left: -6px;
+ position: absolute;
+ z-index: 10;
+}
+
+.cm-completionLabel {
+ color: var(--cm-hints-foreground);
+}
+
+.cm-editor .cm-completionDetail {
+ color: var(--cm-def);
+ font-style: normal;
+ font-size: 0.8em;
+}
+
+.cm-completionMatchedText {
+ text-decoration: underline;
+}
+
+.cm-completionIcon {
+ width: 1em;
+ height: 1em;
+ vertical-align: middle;
+ margin-right: 0.5em;
+}
+
+.cm-tooltip.cm-tooltip-autocomplete > ul > li {
+ color: var(--cm-hints-foreground);
+ cursor: pointer;
+ margin: 0;
+ max-width: 300px;
+ overflow: hidden;
+ white-space: pre;
+ font-size: 14px;
+ line-height: 1.5 !important;
+}
+
+.cm-tooltip-autocomplete li:hover {
+ background-color: var(--cm-hints-active-background);
+ color: var(--cm-hints-active-foreground);
+}
+
+/* Lint Markers */
+.cm-lintRange {
+ background-position: left bottom;
+ background-repeat: repeat-x;
+}
+
+.cm-lintRange-error {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==");
+}
+
+.cm-lintRange-warning {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=");
+}
+
+.cm-diagnostic {
+ background-position: center center;
+ background-repeat: no-repeat;
+ cursor: pointer;
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ vertical-align: middle;
+ position: relative;
+}
+
+.cm-diagnostic-error {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII=");
+}
+
+.cm-diagnostic-warning {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII=");
+}
+
+.cm-tooltip-lint {
+ background-color: var(--cm-hints-background);
+ color: var(--cm-hints-foreground);
+ border: none;
+ border-radius: 2px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
+ font-family: inherit;
+ font-size: inherit;
+ padding: 6px 10px;
+ opacity: 0;
+ transition: opacity 0.15s;
+}
+
+/* Matching brackets */
+.cm-matchingBracket {
+ color: #555;
+ text-decoration: underline;
+}
+
+.cm-nonmatchingBracket {
+ color: #f00;
+}
+
+/* Active line */
+.cm-activeLine {
+ background-color: rgba(0, 0, 0, 0.05);
+}
+
+.dark .cm-activeLine {
+ background-color: rgba(255, 255, 255, 0.05);
+}
+
+.cm-searchMatch {
+ background: #ffa;
+ background: rgba(255, 255, 0, 0.4);
+}
+
+.cm-searchMatch-selected {
+ background: #ff8;
+ background: rgba(255, 255, 0, 0.6);
+}
diff --git a/src/components/marked/users-schema.ts b/src/components/interactive-code-block/users-schema.ts
similarity index 100%
rename from src/components/marked/users-schema.ts
rename to src/components/interactive-code-block/users-schema.ts
diff --git a/src/components/interactive-code-block/variable-editor.tsx b/src/components/interactive-code-block/variable-editor.tsx
new file mode 100644
index 0000000000..73fe6a5e7c
--- /dev/null
+++ b/src/components/interactive-code-block/variable-editor.tsx
@@ -0,0 +1,114 @@
+import { Component } from "react"
+import { EditorView } from "@codemirror/view"
+import { EditorState } from "@codemirror/state"
+import { json } from "@codemirror/lang-json"
+import { history } from "@codemirror/commands"
+import { syntaxHighlighting } from "@codemirror/language"
+import { codeMirrorThemeExtension } from "./codemirror-theme"
+
+interface VariableEditorProps {
+ value: string
+ variableToType?: any
+ onEdit?: (value: string) => void
+ onRunQuery?: () => void
+ onHintInformationRender?: (el: HTMLElement) => void
+}
+
+/**
+ * VariableEditor
+ *
+ * An instance of CodeMirror 6 for editing variables defined in QueryEditor.
+ *
+ * Props:
+ *
+ * - variableToType: A mapping of variable name to GraphQLType.
+ * - value: The text of the editor.
+ * - onEdit: A function called when the editor changes, given the edited text.
+ *
+ */
+export class VariableEditor extends Component {
+ private view: EditorView | null = null
+ private domNode: HTMLDivElement | null = null
+ private cachedValue: string
+ private ignoreChangeEvent = false
+
+ constructor(props: VariableEditorProps) {
+ super(props)
+
+ // Keep a cached version of the value, this cache will be updated when the
+ // editor is updated, which can later be used to protect the editor from
+ // unnecessary updates during the update lifecycle.
+ this.cachedValue = props.value || ""
+ }
+
+ componentDidMount() {
+ if (!this.domNode) return
+
+ // Create editor state for JSON (variables are JSON)
+ const state = EditorState.create({
+ doc: this.props.value || "",
+ extensions: [
+ history(),
+ json(),
+ codeMirrorThemeExtension,
+ EditorView.updateListener.of(update => {
+ if (update.docChanged && !this.ignoreChangeEvent) {
+ this.cachedValue = update.state.doc.toString()
+ if (this.props.onEdit) {
+ this.props.onEdit(this.cachedValue)
+ }
+ }
+ }),
+ ],
+ })
+
+ // Create editor view
+ this.view = new EditorView({
+ state,
+ parent: this.domNode,
+ })
+ }
+
+ componentDidUpdate(prevProps: VariableEditorProps) {
+ if (!this.view) return
+
+ // Ensure the changes caused by this update are not interpreted as
+ // user-input changes which could otherwise result in an infinite
+ // event loop.
+ this.ignoreChangeEvent = true
+
+ if (
+ this.props.value !== prevProps.value &&
+ this.props.value !== this.cachedValue
+ ) {
+ this.cachedValue = this.props.value
+ this.view.dispatch({
+ changes: {
+ from: 0,
+ to: this.view.state.doc.length,
+ insert: this.props.value || "",
+ },
+ })
+ }
+
+ this.ignoreChangeEvent = false
+ }
+
+ componentWillUnmount() {
+ if (this.view) {
+ this.view.destroy()
+ this.view = null
+ }
+ }
+
+ render() {
+ return (
+ {
+ this.domNode = e
+ }}
+ />
+ )
+ }
+}
diff --git a/src/components/marked/index.tsx b/src/components/marked/index.tsx
deleted file mode 100644
index 39730051bc..0000000000
--- a/src/components/marked/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import dynamic from "next/dynamic"
-import { StarWarsSchema } from "./swapi-schema"
-import { UsersSchema } from "./users-schema"
-
-const SCHEMA_MAP = {
- StarWars: StarWarsSchema,
- Users: UsersSchema,
-} as const
-
-type SchemaKey = keyof typeof SCHEMA_MAP
-
-type Metadata = {
- graphiql?: boolean
- variables?: unknown
- schema?: SchemaKey
-}
-
-const MiniGraphiQL = dynamic(() => import("./mini-graphiQL"), { ssr: true })
-
-export function Marked({ children }: { children: string }) {
- const codeMatch = children.match(/```graphql\s*\n([\s\S]*?)```/)
- const blockContent = codeMatch?.[1]
- const [firstLine, ...rest] = (blockContent || "").split("\n")
- // First line must contain the metadata JSON comment: # { … }
- const metaMatch = firstLine.match(/^\s*#\s*({.*})\s*$/)
-
- if (!metaMatch) {
- throw new Error(
- `Invalid GraphiQL metadata JSON: ${firstLine}. MiniGraphQL shouldn't be used here.`,
- )
- }
-
- let meta: Metadata
- try {
- meta = JSON.parse(metaMatch[1]) as Metadata
- } catch {
- throw new Error(`Invalid GraphiQL metadata JSON: ${metaMatch[1]}`)
- }
-
- const query = rest.join("\n")
- const variables = meta.variables
- ? JSON.stringify(meta.variables, null, 2)
- : ""
- const schema = SCHEMA_MAP[meta.schema ?? "StarWars"]
-
- return {
- // Lifecycle
-
- constructor(props) {
- super()
- const query = props.query.replace(/^\s+/, "")
-
- // Initialize state
- this.state = {
- query: query,
- variables: props.variables,
- response: null,
- variableToType: getVariableToType(props.schema, query),
- }
-
- this._editorQueryID = 0
- }
-
- render() {
- const editor = (
- "
- ? "
" + type + description.slice(3)
- : type + description) +
- "
"
-
- // Additional rendering?
- if (onHintInformationRender) {
- onHintInformationRender(information)
- }
- })
-}
-
-function getVariableToType(schema, documentStr) {
- if (!documentStr || !schema) {
- return {}
- }
-
- try {
- const documentAST = parse(documentStr)
- const variableToType = Object.create(null)
- documentAST.definitions.forEach(definition => {
- if (definition.kind === "OperationDefinition") {
- const variableDefinitions = definition.variableDefinitions
- if (variableDefinitions) {
- variableDefinitions.forEach(({ variable, type }) => {
- const inputType = typeFromAST(schema, type)
- if (inputType) {
- variableToType[variable.name.value] = inputType
- }
- })
- }
- }
- })
- return variableToType
- } catch (e) {
- // ignore
- }
-
- return {}
-}
diff --git a/src/components/pre/code-block-label.tsx b/src/components/pre/code-block-label.tsx
new file mode 100644
index 0000000000..2de78c266e
--- /dev/null
+++ b/src/components/pre/code-block-label.tsx
@@ -0,0 +1,32 @@
+import cn from "clsx"
+import type { FC, ReactElement, ReactNode } from "react"
+
+import classes from "./pre.module.css"
+
+interface CodeBlockLabelProps {
+ text: ReactNode
+ icon?: FC<{ className?: string }>
+ button?: ReactElement | false
+ className?: string
+}
+
+export function CodeBlockLabel({
+ text,
+ icon: Icon,
+ button,
+ className,
+}: CodeBlockLabelProps): ReactElement {
+ return (
+
+ {Icon &&
-The examples in this guide are based on [a modified version of the SWAPI GraphQL schema](https://github.com/graphql/graphql.github.io/blob/source/src/components/marked/swapi-schema.tsx). Because these queries are designed for illustrative purposes, they will not run on the full version of the SWAPI GraphQL API due to differences between the two schemas. [You can try the full version of the API here.](https://graphql.org/swapi-graphql/)
+The examples in this guide are based on [a modified version of the SWAPI GraphQL schema](https://github.com/graphql/graphql.github.io/blob/source/src/components/interactive-code-block/swapi-schema.tsx). Because these queries are designed for illustrative purposes, they will not run on the full version of the SWAPI GraphQL API due to differences between the two schemas. [You can try the full version of the API here.](https://graphql.org/swapi-graphql/)
## Next steps
diff --git a/src/remark-graphiql-comment.js b/src/remark-graphiql-comment.js
index 1cce6af551..05d7ed56f2 100644
--- a/src/remark-graphiql-comment.js
+++ b/src/remark-graphiql-comment.js
@@ -1,14 +1,19 @@
import { visit } from "unist-util-visit"
+const MINI_GRAPHIQL_COMPONENT = "InteractiveCodeBlock"
+const MINI_GRAPHIQL_PATH = "@/components/interactive-code-block"
+
export const remarkGraphiQLComment = () => ast => {
const nodes = []
- const MINI_GRAPHIQL_COMPONENT = "Marked"
-
visit(ast, { type: "code", lang: "graphql" }, node => {
+ if ((node.meta || "").split(" ").includes("graphiql")) {
+ nodes.push(node)
+ return
+ }
+
const [firstLine] = node.value.split("\n")
- const isGraphiQLComment = /graphiql["']?: ?true/.test(firstLine)
- if (isGraphiQLComment) {
+ if (/graphiql["']?: ?true/.test(firstLine)) {
nodes.push(node)
}
})
@@ -21,7 +26,7 @@ export const remarkGraphiQLComment = () => ast => {
body: [
{
type: "ImportDeclaration",
- source: { type: "Literal", value: "@/components/marked" },
+ source: { type: "Literal", value: MINI_GRAPHIQL_PATH },
specifiers: [
{
type: "ImportSpecifier",
diff --git a/test/e2e/graphql-interactive.spec.ts b/test/e2e/graphql-interactive.spec.ts
index 990db07467..84946b81cd 100644
--- a/test/e2e/graphql-interactive.spec.ts
+++ b/test/e2e/graphql-interactive.spec.ts
@@ -5,9 +5,9 @@ test.describe("interactive examples", () => {
page,
}) => {
await page.goto("/learn")
- await page.waitForSelector(".CodeMirror", { timeout: 10000 })
+ await page.waitForSelector(".cm-editor", { timeout: 10000 })
- const editors = page.locator(".miniGraphiQL")
+ const editors = page.locator(".cm-editor")
let heroEditor: Locator | null = null
for (let i = 0; i < (await editors.count()); i++) {
@@ -23,12 +23,7 @@ test.describe("interactive examples", () => {
throw new Error("Could not find hero GraphQL editor")
}
- const codeMirrorEditor = heroEditor.locator(".CodeMirror").first()
- await expect(codeMirrorEditor).toBeVisible()
-
- await codeMirrorEditor.click()
-
- const codeLines = codeMirrorEditor.locator(".CodeMirror-line")
+ const codeLines = heroEditor.locator(".cm-line")
// Find the line containing "name" and click after it
for (let i = 0; i < (await codeLines.count()); i++) {
@@ -47,20 +42,24 @@ test.describe("interactive examples", () => {
await page.keyboard.type("ap")
await page.keyboard.press("Control+Space")
- const autoCompleteMenu = page.locator(".CodeMirror-hints")
+ const autoCompleteMenu = page.locator(".cm-tooltip-autocomplete")
await expect(autoCompleteMenu).toBeVisible({ timeout: 5000 })
const appearsInSuggestion = page
- .locator(".CodeMirror-hints li")
+ .locator(".cm-completionLabel")
.filter({ hasText: "appearsIn" })
+ expect(page.locator(".cm-completionDetail").first()).toHaveText(
+ "[Episode]!",
+ )
+
if (await appearsInSuggestion.isVisible()) {
await appearsInSuggestion.click()
} else {
await page.keyboard.press("Enter")
}
- const resultViewer = heroEditor.locator(".result-window")
+ const resultViewer = page.locator(".result-window").first()
await expect(resultViewer).toBeVisible()
await expect
@@ -91,7 +90,7 @@ test.describe("interactive examples", () => {
await page.waitForLoadState("networkidle")
// Find the mutation example that has GraphiQL enabled
- const editors = page.locator(".miniGraphiQL")
+ const editors = page.locator(".cm-editor")
let mutationEditor: Locator | null = null
for (let i = 0; i < (await editors.count()); i++) {