color codemirrors properly

Author: hasparus

src/codemirror.less renamed to src/codemirror-old.less

@@ -96,19 +96,19 @@ export function PrecisionFigure() {
       className="nextra-codeblocks flex w-full max-w-[100vw] bg-gradient-to-b from-transparent to-sec-lighter px-[14px] py-[30px] *:w-1/2 dark:to-sec-darker/25 max-[380px]:px-0 sm:max-w-[calc(100vw-32px)] xl:px-[46px] max-[380px]:[&_:is(.rounded-t-md,pre)]:rounded-none [&_pre]:!h-48"
       aria-hidden
     >
-      <Pre data-filename="Query" className="p-4">
+      <Pre data-filename="Query" className="p-4 text-[#6E7557]">
         {"{"}
         {"\n  "}
-        <span className="!text-pri-base dark:!text-pri-light">{"hero"}</span>
+        <span className="!text-pri-base dark:!text-sec-light">{"hero"}</span>
         {" {"}
-        <span className="!text-pri-base dark:!text-pri-light">
+        <span className="!text-pri-base dark:!text-sec-light">
           {"\n    name"}
         </span>
         {"\n    height\n    mass".split("").map((char, i) => (
           <span
             key={i}
             id={"ch" + i}
-            className="hidden !text-pri-base dark:!text-pri-light"
+            className="hidden !text-pri-base dark:!text-sec-light"
           >
             {char === "\n" ? <br /> : char}
           </span>

src/components/index-page/graphql-advantages/precision.tsx

@@ -0,0 +1,142 @@
+import { EditorView } from "@codemirror/view"
+import { Extension } from "@codemirror/state"
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language"
+import { tags as t } from "@lezer/highlight"
+
+/// The editor theme styles for One Dark using CSS custom properties.
+export const oneDarkTheme = 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)",
+      },
+    },
+  },
+  { dark: true },
+)
+
+/// The highlighting style for code using CSS custom properties.
+export const oneDarkHighlightStyle = 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),
+    ],
+    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",
+  },
+])
+
+/// Extension to enable the One Dark theme using CSS custom properties.
+export const oneDark: Extension = [
+  oneDarkTheme,
+  syntaxHighlighting(oneDarkHighlightStyle),
+]

src/components/marked/codemirror-one-dark.tsx

@@ -62,7 +62,7 @@ export default class MiniGraphiQL extends Component<
     )
 
     return (
-      <div className="miniGraphiQL">
+      <div className="flex text-sm *:w-1/2">
         {Object.keys(this.state.variableToType).length > 0 ? (
           <div className="hasVariables">
             {editor}
@@ -91,10 +91,10 @@ export default class MiniGraphiQL extends Component<
     this.setState({
       variableToType: getVariableToType(this.props.schema, this.state.query),
     })
-    this._runQuery()
+    this._runQuery({ manual: true })
   }
 
-  async _runQuery() {
+  async _runQuery(options: { manual: boolean }) {
     this._editorQueryID++
     const queryID = this._editorQueryID
     try {
@@ -107,11 +107,17 @@ export default class MiniGraphiQL extends Component<
 
       let resultToSerialize: any = result
       if (result.errors) {
+        if (!options.manual) {
+          // if the query was ran on edit, we display errors on the left side
+          // so we can just return instead of showing the resulting error
+          return
+        }
+
         // Convert errors to serializable format
         const serializedErrors = result.errors.map(error => ({
           message: error.message,
           locations: error.locations,
-          path: error.path
+          path: error.path,
         }))
         // Replace errors with serialized version for JSON.stringify
         resultToSerialize = { ...result, errors: serializedErrors }
@@ -129,6 +135,7 @@ export default class MiniGraphiQL extends Component<
 
   _handleEditQuery(value: string) {
     this.setState({ query: value })
+    void this._runQuery({ manual: false })
   }
 
   _handleEditVariables(value: string) {

src/components/marked/mini-graphiQL.tsx

@@ -2,16 +2,21 @@ import { Component } from "react"
 import { EditorView, keymap } from "@codemirror/view"
 import { EditorState } from "@codemirror/state"
 import { history, historyKeymap, defaultKeymap } from "@codemirror/commands"
-import { syntaxHighlighting, defaultHighlightStyle } from "@codemirror/language"
-import { autocompletion, completionKeymap } from "@codemirror/autocomplete"
+import { bracketMatching } from "@codemirror/language"
+import {
+  autocompletion,
+  closeBrackets,
+  completionKeymap,
+} from "@codemirror/autocomplete"
 import { graphql, updateSchema } from "cm6-graphql"
 import { GraphQLSchema } from "graphql"
+import { oneDark } from "./codemirror-one-dark"
+import "./syntax-highlighting.css"
 
 interface QueryEditorProps {
   schema?: GraphQLSchema
   value?: string
   onEdit?: (value: string) => void
-  onRunQuery?: () => void
   runQuery?: () => void
   onHintInformationRender?: (el: HTMLElement) => void
 }
@@ -54,38 +59,30 @@ export class QueryEditor extends Component<QueryEditorProps> {
   componentDidMount() {
     if (!this.domNode) return
 
-    // Create key bindings
     const runQueryBinding = keymap.of([
       {
         key: "Cmd-Enter",
-        run: () => {
-          if (this.props.onRunQuery) {
-            this.props.onRunQuery()
-          }
-          return true
-        },
+        run: () => (this.props.runQuery?.(), true),
       },
       {
         key: "Ctrl-Enter",
-        run: () => {
-          if (this.props.onRunQuery) {
-            this.props.onRunQuery()
-          }
-          return true
-        },
+        run: () => (this.props.runQuery?.(), true),
       },
     ])
 
-    // Create editor state
     const state = EditorState.create({
       doc: this.props.value || "",
       extensions: [
         history(),
+        closeBrackets(),
+        bracketMatching(),
         keymap.of([...historyKeymap, ...completionKeymap, ...defaultKeymap]),
         runQueryBinding,
-        syntaxHighlighting(defaultHighlightStyle),
-        graphql(this.props.schema),
-        autocompletion(),
+        oneDark,
+        graphql(this.props.schema, {}),
+        autocompletion({
+          icons: false,
+        }),
         EditorView.updateListener.of(update => {
           if (update.docChanged && !this.ignoreChangeEvent) {
             this.cachedValue = update.state.doc.toString()
@@ -94,15 +91,6 @@ export class QueryEditor extends Component<QueryEditorProps> {
             }
           }
         }),
-        EditorView.theme({
-          ".cm-editor": {
-            fontSize: "inherit",
-            fontFamily: "inherit",
-          },
-          ".cm-focused": {
-            outline: "none",
-          },
-        }),
       ],
     })
 

src/components/marked/query-editor.tsx

@@ -2,7 +2,9 @@ import { Component } from "react"
 import { EditorView } from "@codemirror/view"
 import { EditorState } from "@codemirror/state"
 import { json } from "@codemirror/lang-json"
-import { syntaxHighlighting, defaultHighlightStyle } from "@codemirror/language"
+import { oneDark } from "./codemirror-one-dark"
+
+import "./syntax-highlighting.css"
 
 interface ResultViewerProps {
   value?: string
@@ -28,21 +30,7 @@ export class ResultViewer extends Component<ResultViewerProps> {
     // Create read-only editor state for JSON results
     const state = EditorState.create({
       doc: this.props.value || "",
-      extensions: [
-        EditorState.readOnly.of(true),
-        EditorView.editable.of(false),
-        json(),
-        syntaxHighlighting(defaultHighlightStyle),
-        EditorView.theme({
-          ".cm-editor": {
-            fontSize: "inherit",
-            fontFamily: "inherit",
-          },
-          ".cm-focused": {
-            outline: "none",
-          },
-        }),
-      ],
+      extensions: [EditorState.readOnly.of(true), json(), oneDark],
     })
 
     // Create editor view