Fix Draft 2020-12 schema loading error in Monaco editor

app/components/CodeEditor/CodeEditor.tsx

@@ -15,6 +15,7 @@ import { sendGAEvent } from "@next/third-parties/google";
 import { CodeFile, OutputResult } from "@/lib/types";
 import { OutputReducerAction } from "@/lib/reducers";
 import CertificateButton from "../CertificateButton/CertificateButton";
+import { DRAFT_2020_12_METASCHEMA_FLAT } from "@/lib/schemas";
 
 // Custom hook for editor theme setup
 const useEditorTheme = (monaco: Monaco, colorMode: "dark" | "light") => {
@@ -211,6 +212,19 @@ export default function CodeEditor({
   const handleEditorMount = (editor: any, monaco: Monaco) => {
     setMonaco(monaco);
 
+    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+    validate: true,
+    allowComments: true,
+    enableSchemaRequest: true,
+    schemas: [
+      {
+        uri: "https://json-schema.org/draft/2020-12/schema",
+        fileMatch: ["*"], 
+        schema: DRAFT_2020_12_METASCHEMA_FLAT,
+      },
+    ],
+  });
+
     editorRef.current = editor;
     editorStore.setEditor(editor);
     editorStore.setMonaco(monaco);

lib/schemas.ts

@@ -0,0 +1,30 @@
+export const DRAFT_2020_12_METASCHEMA_FLAT = {
+  $schema: "https://json-schema.org/draft/2020-12/schema",
+  $id: "https://json-schema.org/draft/2020-12/schema",
+  title: "Core vocabulary meta-schema (Flattened for Monaco)",
+  type: ["object", "boolean"],
+  properties: {
+    $id: { type: "string", format: "uri-reference" },
+    $schema: { type: "string", format: "uri" },
+    $ref: { type: "string", format: "uri-reference" },
+    $anchor: { type: "string", pattern: "^[A-Za-z_][-A-Za-z0-0_:]*$" },
+    $defs: {
+      type: "object",
+      additionalProperties: { type: ["object", "boolean"] },
+    },
+    $vocabulary: {
+      type: "object",
+      additionalProperties: { type: "boolean" },
+    },
+    type: {
+      anyOf: [
+        { enum: ["array", "boolean", "integer", "null", "number", "object", "string"] },
+        {
+          type: "array",
+          items: { enum: ["array", "boolean", "integer", "null", "number", "object", "string"] },
+          uniqueItems: true,
+        },
+      ],
+    },
+  },
+};

package.json

@@ -24,7 +24,7 @@
     "@hyperjump/json-schema": "^1.9.2",
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
-    "@monaco-editor/react": "^4.6.0",
+    "@monaco-editor/react": "^4.7.0",
     "@next/mdx": "^14.2.3",
     "@next/third-parties": "^14.2.5",
     "@types/mdx": "^2.0.13",