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

Sample

<script lang="ts">
	import EasyMonacoEditor from '$lib';
	import { onMount } from 'svelte';

	let editorRef: HTMLDivElement;
	let editor: any;

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

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

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

<h1>Javascript Editor</h1>
<div class="js-editor-container">
	<EasyMonacoEditor on:monaco={handleMonaco}>
		<div bind:this={editorRef} style="min-height:340px;width:100%" />
	</EasyMonacoEditor>
</div>

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

Props

monacoLoaderUrl: string

default: https://cdn.jsdelivr.net/npm/[email protected]/min/vs/loader.js

Monaco loader package URL, change if needed.

monacoRequireConfig: any

default:

{
paths: { vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs' }
}

Change the required config if needed.

monacoWorkerUrl: string

default: https://cdn.jsdelivr.net/npm/[email protected]/min/vs/worker.js

Change if required.

monacoEnvironment: any

default:

{
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.6/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

<div class="js-editor-container">
       <EasyMonacoEditor on:monaco={handleMonaco}>
        <div bind:this={editorRef} style="min-height:340px;width:100%" />
    </EasyMonacoEditor>
</div>

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

onMount(() => {
    return () => {
        editor && editor.dispose();
    };
});