@eventstore-ui/editor

@eventstore-ui/editor

Monaco editor wrapped in a web component, with pre-built workers.

See Monaco Editor for more information about usage.

Add to your project

yarn add @eventstore-ui/editor

Also, include the peer dependencies:

yarn add @eventstore-ui/components @eventstore-ui/utils

Set up within a Stencil project:

In your stencil config, add the workers to your copy task.

// import the path to the workers
import { workerPath } from '@eventstore-ui/editor/configure';

export const config: Config = {
    // ...
    outputTargets: [
        {
            // ...
            copy: [
                // ...
                {
                    src: workerPath,
                    dest: 'workers',
                },
            ],
        },
    ],
};

In your globalScript file:

// Add the core web components to the global pool
import '@eventstore-ui/components';
// add the editor web components to the global pool
import '@eventstore-ui/editor';

// import the monaco initialization code
import { initialize } from '@eventstore-ui/editor/initialize';

// initialize the monaco library (with options, if required)
initialize();