@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 initialize init, 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

| Property | Description | Type | Default | |----------|-------------|------|---------| | [placeholder] | Placeholder of monaco editor, Can change the style via defining the .monaco-editor-placeholder CSS. | string | - | | [height] | Height of monaco editor | string | 200px | | [disabled] | Disabled of monaco editor | boolean | false | | [autoFormat] | Whether to automatically format the document | boolean | true | | [options] | Default options when creating editors | monaco.editor.IStandaloneEditorConstructionOptions | - | | [model] | Model of monaco editor | NuMonacoEditorModel | - | | [delay] | Delay init monaco editor, unit: ms | number | 0 | | (event) | Event callback | EventEmitter<NuMonacoEditorEvent> | - |

nu-monaco-diff-editor

| Property | Description | Type | Default | |----------|-------------|------|---------| | [height] | Height of monaco editor | string | 200px | | [disabled] | Disabled of monaco editor | boolean | false | | [options] | Default options when creating editors | monaco.editor.IStandaloneEditorConstructionOptions | - | | [old] | Old model of monaco editor | NuMonacoEditorDiffModel | - | | [new] | New model of monaco editor | NuMonacoEditorDiffModel | - | | [delay] | Delay init monaco editor, unit: ms | number | 0 | | (event) | Event callback | EventEmitter<NuMonacoEditorEvent> | - |

License

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