feat: add monaco auto types

This commit is contained in:
DuroCodes
2025-04-27 16:10:09 -04:00
parent 58bf79cc3a
commit f1807dc95c
3 changed files with 16 additions and 4 deletions

View File

@@ -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=="],

View File

@@ -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",

View File

@@ -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,