@cloudparker/easy-monaco-editor-svelte v2.0.0

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';

	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:

{
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:

{
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

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

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

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