Merge pull request #17 from binhtran432k/featur/editor

feat: enhance monaco editor

packages/www/package.json

@@ -40,6 +40,7 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"clsx": "^2.1.1"
+		"clsx": "^2.1.1",
+		"monaco-editor": "^0.49.0"
 	}
 }

packages/www/src/lib/components/Editor.svelte

@@ -0,0 +1,33 @@
+<script>
+	import { onDestroy, onMount } from 'svelte';
+
+	/** @type {HTMLDivElement|undefined} */
+	let divElement;
+	/** @type {import('monaco-editor')|undefined} */
+	let monaco;
+	/** @type {import('monaco-editor').editor.IStandaloneCodeEditor|undefined} */
+	let editor;
+	/** @type {import('monaco-editor').editor.IStandaloneEditorConstructionOptions} */
+	const editorOptions = {
+		minimap: { enabled: false },
+		theme: 'vs-dark',
+		overviewRulerLanes: 0
+	};
+
+	onMount(async () => {
+		if (!divElement) {
+			throw new Error('div element is undefined');
+		}
+		monaco = (await import('$lib/utils/monaco')).default;
+		editor = monaco.editor.create(divElement, editorOptions);
+		editor.setValue('Hello World');
+	});
+
+	onDestroy(() => {
+		editor?.dispose();
+	});
+</script>
+
+<div class="flex h-full flex-col">
+	<div bind:this={divElement} id="editor" class="h-full flex-grow overflow-hidden" />
+</div>

packages/www/src/lib/utils/monaco.js

@@ -0,0 +1,34 @@
+import * as monaco from 'monaco-editor';
+
+// Import the workers in a production-safe way.
+// This is different than in Monaco's documentation for Vite,
+// but avoids a weird error ("Unexpected usage") at runtime
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+
+self.MonacoEnvironment = {
+	getWorker: function (_, label) {
+		switch (label) {
+			case 'json':
+				return new jsonWorker();
+			case 'css':
+			case 'scss':
+			case 'less':
+				return new cssWorker();
+			case 'html':
+			case 'handlebars':
+			case 'razor':
+				return new htmlWorker();
+			case 'typescript':
+			case 'javascript':
+				return new tsWorker();
+			default:
+				return new editorWorker();
+		}
+	}
+};
+
+export default monaco;

packages/www/src/routes/+page.svelte

@@ -1,10 +1,11 @@
 <script>
+	import Editor from '$lib/components/Editor.svelte';
 	import Navbar from '$lib/components/Navbar.svelte';
 </script>
 
 <div class="flex h-full flex-col overflow-hidden">
 	<Navbar />
-	TODO: Add body
+	<Editor />
 </div>
 
 <style>