feat: load monaco editor instance from local instead of cdn

Author: kunish

src/app/(protected)/page.tsx

@@ -14,6 +14,8 @@ this is a test message
 
   return (
     <div className="flex flex-col gap-4">
+      <h1 className="py-12 text-center text-9xl font-semibold">daed</h1>
+
       <Editor height="20vh" language="markdown" value={editorValue} onChange={(value) => setEditorValue(value || '')} />
     </div>
   )

src/components/Header.tsx

@@ -151,7 +151,7 @@ export const Header: FC = () => {
         <NavbarMenuToggle className="sm:hidden" />
 
         <NavbarBrand>
-          <NextLink href="/">
+          <NextLink href="/" onClick={() => setIsMenuOpen(false)}>
             <LogoText />
           </NextLink>
         </NavbarBrand>

src/editor/index.ts

@@ -1,14 +1,22 @@
 import { loader } from '@monaco-editor/react'
-import type * as monaco from 'monaco-editor'
+import type { editor } from 'monaco-editor'
 import { daeLang } from '~/editor/languages'
 
 export const initializeEditor = async () => {
+  self.MonacoEnvironment = {
+    getWorker: () => new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url))
+  }
+
+  const monaco = await import('monaco-editor')
+
+  loader.config({ monaco })
+
   const monacoInstance = await loader.init()
 
   monacoInstance.languages.register({ id: 'dae', extensions: ['dae'] })
   monacoInstance.languages.setMonarchTokensProvider('dae', daeLang)
 
   const themeGithubLight = await import('monaco-themes/themes/GitHub Light.json')
 
-  monacoInstance.editor.defineTheme('githubLight', themeGithubLight as monaco.editor.IStandaloneThemeData)
+  monacoInstance.editor.defineTheme('githubLight', themeGithubLight as editor.IStandaloneThemeData)
 }