From f1807dc95c5d9b9f0a04db1c86798cab2409d9bf Mon Sep 17 00:00:00 2001
From: DuroCodes <davidwright13503@gmail.com>
Date: Sun, 27 Apr 2025 16:10:09 -0400
Subject: [PATCH] feat: add monaco auto types

---
 bun.lock                         |  3 +++
 package.json                     |  1 +
 src/components/monaco-editor.tsx | 16 ++++++++++++----
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/bun.lock b/bun.lock
index 2559140..5ed1dea 100644
--- a/bun.lock
+++ b/bun.lock
@@ -20,6 +20,7 @@
         "drizzle-orm": "^0.42.0",
         "lucide-react": "^0.488.0",
         "monaco-editor": "^0.52.2",
+        "monaco-editor-auto-typings": "^0.4.6",
         "nanoid": "^5.1.5",
         "next": "15.3.1",
         "next-themes": "^0.4.6",
@@ -418,6 +419,8 @@
 
     "monaco-editor": ["monaco-editor@0.52.2", "", {}, "sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ=="],
 
+    "monaco-editor-auto-typings": ["monaco-editor-auto-typings@0.4.6", "", { "peerDependencies": { "monaco-editor": "*" } }, "sha512-yN6yP2oQJkpyZtUyi5qT9AjZLILrTZWOFny7Km2yNiPMPqOWq/znkTS4b5Yk1sHumSaLJUw5m1EPKiopRqtEpA=="],
+
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
 
     "nanoid": ["nanoid@5.1.5", "", { "bin": { "nanoid": "bin/nanoid.js" } }, "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw=="],
diff --git a/package.json b/package.json
index b16c130..18bbc4a 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "drizzle-orm": "^0.42.0",
     "lucide-react": "^0.488.0",
     "monaco-editor": "^0.52.2",
+    "monaco-editor-auto-typings": "^0.4.6",
     "nanoid": "^5.1.5",
     "next": "15.3.1",
     "next-themes": "^0.4.6",
diff --git a/src/components/monaco-editor.tsx b/src/components/monaco-editor.tsx
index 9a0fc35..12b9642 100644
--- a/src/components/monaco-editor.tsx
+++ b/src/components/monaco-editor.tsx
@@ -1,11 +1,15 @@
 "use client";
 
-import { useEditor } from "./editor-provider";
-import { THEME_MAP } from "~/utils/themes";
 import { useEffect, useState } from "react";
 import { Editor, type Monaco } from "@monaco-editor/react";
 import { createHighlighter } from "shiki";
 import { shikiToMonaco } from "@shikijs/monaco";
+import {
+  AutoTypings,
+  LocalStorageCache,
+} from "monaco-editor-auto-typings/custom-editor";
+import { useEditor } from "./editor-provider";
+import { THEME_MAP } from "~/utils/themes";
 import { LANGUAGES } from "~/utils/languages";
 
 export function MonacoEditor() {
@@ -66,8 +70,12 @@ export function MonacoEditor() {
         language={language}
         value={content}
         onChange={(val) => setContent(val || "")}
-        onMount={(_, m) => {
-          handleEditorDidMount(m).catch(console.error);
+        onMount={async (editor, monaco) => {
+          handleEditorDidMount(monaco).catch(console.error);
+          await AutoTypings.create(editor, {
+            sourceCache: new LocalStorageCache(),
+            monaco,
+          });
         }}
         options={{
           fontSize: 14,