@ng-util/monaco-editor v17.0.1

@ng-util/monaco-editor

Monaco Code Editor for Angular.

Inspired by ngx-monaco-editor.

Demo

• Stackblitz
• Codesandbox

Usage

Installation

Install from npm repository:

npm install @ng-util/monaco-editor --save

Configure monaco-editor library

Currently this library only supports load monaco-editor with AMD mode. The default is to use cdn (https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min) lazy loading。

If you are using local monaco editor library, you could add the following:

"assets": [
  {
    "glob": "**/*",
    "input": "node_modules/monaco-editor/min/vs",
    "output": "/lib/vs"
  }
],

And configure baseUrl via NuMonacoEditorModule.forRoot.

NuMonacoEditorModule.forRoot({
  baseUrl: `lib`,
}),

Sample

Include NuMonacoEditorModule in Main Module and Feature Modules where you want to use the editor component.(eg: app.module.ts):

import { NgModule } from '@angular/core';
import { NuMonacoEditorModule } from '@ng-util/monaco-editor';

@NgModule({
  imports: [
    NuMonacoEditorModule  // And use `provideNuMonacoEditorConfig` to modify the global configuration
  ],
})
export class AppModule { }

Create Editor options in component.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<nu-monaco-editor [(ngModel)]="value" [options]="editorOptions"></nu-monaco-editor>`,
})
export class DemoComponent {
  value: string = 'const a = 1;';
  editorOptions = { theme: 'vs-dark', language: 'typescript' };
}

Or monaco diff editor:

import { Component } from '@angular/core';
import { NuMonacoEditorDiffModel } from '@ng-util/monaco-editor';

@Component({
  selector: 'app-root',
  template: `<nu-monaco-diff-editor [options]="editorOptions" [old]="old" [new]="new"></nu-monaco-diff-editor>`,
})
export class DemoComponent {
  editorOptions = { theme: 'vs-dark', language: 'javascript' };
  old: NuMonacoEditorDiffModel = { code: `<p>1</p>` };
  new: NuMonacoEditorDiffModel = { code: `<p>2</p>` };
}

Events

Output event can be divided into different stages of feedback according to the type attribute. When you need to initializeinit, you can program the editor in one step.

import { Component } from '@angular/core';
import { NuMonacoEditorEvent } from '@ng-util/monaco-editor';

@Component({
  selector: 'app-root',
  template: `<nu-monaco-editor [(ngModel)]="value" [options]="editorOptions" (event)="showEvent($event)"></nu-monaco-editor>`,
})
export class DemoComponent {
  value: string = 'const a = 1;';
  editorOptions = { theme: 'vs-dark', language: 'javascript' };

  showEvent(e: NuMonacoEditorEvent): void {
    if (e.type === 'init') {
      // doing
    }
  }
}

Configurations

forRoot() method of NuMonacoEditorModule accepts config of type NuMonacoEditorConfig.

NuMonacoEditorModule.forRoot({
  baseUrl: ``, // The base URL to monaco editor library assets via AMD (RequireJS), Default: `https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min`
  defaultOptions: {}, // Default options when creating editors
  monacoLoad: (m) => {} // The event after the first loading of the monaco editor library is completed, use this function to extend monaco editor functionalities.
}),

Configure JSON Defaults

monacoLoad property of NuMonacoEditorConfig can be used to configure JSON default.

NuMonacoEditorModule.forRoot({
  defaultOptions: { scrollBeyondLastLine: false },
  monacoLoad: () => {
    const uri = monaco.Uri.parse('a://b/foo.json');
    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
      validate: true,
      schemas: [
        {
          uri: 'http://myserver/foo-schema.json',
          fileMatch: [uri.toString()],
          schema: {
            type: 'object',
            properties: {
              p1: {
                enum: ['v1', 'v2'],
              },
              p2: {
                $ref: 'http://myserver/bar-schema.json',
              },
            },
          },
        },
        {
          uri: 'http://myserver/bar-schema.json',
          fileMatch: [uri.toString()],
          schema: {
            type: 'object',
            properties: {
              q1: {
                enum: ['x1', 'x2'],
              },
            },
          },
        },
      ],
    });
  },
}),

Now pass model config of type NuMonacoEditorModule to Editor Component.

import { Component } from '@angular/core';
import { NuMonacoEditorEvent, NuMonacoEditorModel } from '@ng-util/monaco-editor';

@Component({
  selector: 'app-demo',
  template: `
  <nu-monaco-editor #a [(ngModel)]="value" [model]="model" (event)="showEvent($event)"></nu-monaco-editor>
  <button (click)="a.editor.getAction('editor.action.formatDocument').run()">Format document</button>
  `,
})
export class DemoComponent {
  value = '{"p1":"a"}';
  model: NuMonacoEditorModel;

  showEvent(e: NuMonacoEditorEvent) {
    if (e.type === 'init') {
      this.model = {
        language: 'json',
        uri: monaco.Uri.parse('a://b/foo.json'),
      };
    }
  }
}

API

nu-monaco-editor

nu-monaco-diff-editor

License

The MIT License (see the LICENSE file for the full text)