@cloudparker/easy-monaco-editor-svelte/readme.md

The library provides a straightforward and effortless method for initializing and utilizing the Monaco library in Svelte.js. It enables loading the Monaco library from a Content Delivery Network (CDN) for convenience.

# easy-monaco-editor-svelete

The library provides a straightforward and effortless method for initializing and utilizing the Monaco library in Svelte.js. It enables loading the Monaco library from a Content Delivery Network (CDN) for convenience.

# Install
```
npm install @cloudparker/easy-monaco-editor-svelte --save-dev
```

# Screenshot
 
<img  src="https://raw.githubusercontent.com/paramanandapradhan/screenshots/master/%40cloudparker/easy-monaco-editor-svelte/monaco-js-screenshot.webp" width="340">

# Sample

```js
<script lang="ts">
	import EasyMonacoEditor from '$lib';

	let editorRef: HTMLDivElement;
	let editor: any;

	let code = `function x() {
      console.log("Hello, world!");
    }`;

	const handleMonaco = (monaco: any) => {
		console.log('monaco', monaco);
		if (monaco && editorRef) {
			editor = monaco.editor.create(editorRef, {
				value: code,
				language: 'javascript'
			});
		}
	};

	$effect(() => {
		return () => {
			editor && editor.dispose();
		};
	});
</script>

<h1>Javascript Editor</h1>
<div class="js-editor-container">
	<EasyMonacoEditor onLoad={handleMonaco}>
		<div class="editor" bind:this={editorRef} style=""></div>
	</EasyMonacoEditor>
</div>

<style>
	.js-editor-container {
		padding: 16px 0;
	}

	.editor {
		min-height: 340px;
		width: 100%;
		border: 1px solid #777;
	}
</style>


```
 # Props

### monacoLoaderUrl: string
_default:_ `https://cdn.jsdelivr.net/npm/monaco-editor@0.52.0/min/vs/loader.js`

Monaco loader package URL, change if needed.

### monacoRequireConfig: any
_default:_ 
```js
{
paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.52.0/min/vs' }
}
```
Change the required config if needed.

### monacoWorkerUrl: string
_default:_ `https://cdn.jsdelivr.net/npm/monaco-editor@0.52.0/min/vs/worker.js`

Change if required.

### monacoEnvironment: any
_default:_
```js
{
getWorkerUrl: (workerId: string, label: string) => {
return monacoWorkerUrl;
}
}
```
Change if required.

### monacoModeules: any
_default:_ `['vs/editor/editor.main']`

Change if required.

### canLoadRequireJs: boolean
_Default:_ true

Determine whether to load RequireJS or not. The library is needed for the current version of Monaco.

### requireJsUrl: string
_default:_ `https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.7/require.min.js`

Require.js URL, change if needed.

## Events

**on:monaco**

Triggers after Monaco initialization is completed. It also returns the Monaco instance. This instance can be used later to create an editor.

# Create Editor

```html
<div class="js-editor-container">
	<EasyMonacoEditor onLoad={handleMonaco}>
		<div class="editor" bind:this={editorRef} style=""></div>
	</EasyMonacoEditor>
</div>

```
```js
const handleMonaco = (ev: CustomEvent) => {
    let monaco: any = ev.detail;
    if (monaco && editorRef) {
        editor = monaco.editor.create(editorRef, {
            value: code,
            language: 'javascript',
        });
    }
};
```
```js
$effect(() => {
    return () => {
        editor && editor.dispose();
    };
});

```