Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@ngstack/code-editor

Package Overview
Dependencies
Maintainers
0
Versions
42
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ngstack/code-editor

Code editor component for Angular applications.

  • 9.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
4K
increased by72.5%
Maintainers
0
Weekly downloads
 
Created
Source

@ngstack/code-editor

Code editor component for Angular applications.

Based on the Monaco editor that powers VS Code.

Buy Me A Coffee

Installing

npm install @ngstack/code-editor

Integrating with Angular CLI project

Import CodeEditorModule into your main application module:

import { CodeEditorModule } from '@ngstack/code-editor';

@NgModule({
  imports: [CodeEditorModule.forRoot()]
})
export class AppModule {}

If you want to use a specific version of the Monaco editor, use editorVersion parameter. If not provided, the component is always going to use the latest version.

@NgModule({
  imports: [
    CodeEditorModule.forRoot({
      editorVersion: '0.44.0'
    })
  ]
})
export class AppModule {}

Update template to use the ngs-code-editor:

<ngs-code-editor [theme]="theme" [codeModel]="model" [options]="options" (valueChanged)="onCodeChanged($event)"></ngs-code-editor>

Update component controller class and provide corresponding properties and events:

export class AppComponent {
  theme = 'vs-dark';

  model: CodeModel = {
    language: 'json',
    uri: 'main.json',
    value: '{}'
  };

  options = {
    contextmenu: true,
    minimap: {
      enabled: true
    }
  };

  onCodeChanged(value) {
    console.log('CODE', value);
  }
}

Input Properties

NameTypeDefault ValueDescription
themestringvsEditor theme. Supported values: vs, vs-dark or hc-black.
optionsObject{...}Editor options.
readOnlybooleanfalseToggles readonly state of the editor.
codeModelCodeModelSource code model.

The codeModel property holds the value that implements the CodeModel interface:

export interface CodeModel {
  language: string;
  value: string;
  uri: string;

  dependencies?: Array<string>;
  schemas?: Array<{
    uri: string;
    schema: Object;
  }>;
}

Editor Options

For available options see IEditorConstructionOptions docs.

The following options are used by default when Editor Component gets created:

{
  "lineNumbers": true,
  "contextmenu": false,
  "minimap": {
    "enabled": false
  }
}

Output Events

NameArgument TypeDescription
loadedRaised when editor finished loading all its components.
valueChangedstringRaised after editor value gets changed.

Typings

The editor is able to resolve typing libraries when set to the Typescript or Javascript language.

Use dependencies property to provide a list of libraries to resolve

<ngs-code-editor [codeModel]="model" ...> </ngs-code-editor>

And in the controller class:

export class MyEditorComponent {
  codeModel: CodeModel = {
    language: 'typescript',
    uri: 'main.ts',
    value: '',
    dependencies: ['@types/node', '@ngstack/translate', '@ngstack/code-editor']
  };
}

Run your application, it may take a few seconds to resolve dependencies. It is performed in the background (web worker), so you can type your code.

Try pasting the following snippet at runtime:

import { TranslateModule, TranslateService } from '@ngstack/translate';
import { CodeEditorModule } from '@ngstack/code-editor';
import * as fs from 'fs';

export class MyClass {
  constructor(translate: TranslateService) {}
}

You should have all the types resolved and auto-completion working.

JSON schemas

You can associate multiple schemas when working with JSON files.

<ngs-code-editor [codeModel]="model" ...> </ngs-code-editor>

Provide the required schemas like in the example below.

export class MyEditorComponent {
  codeModel: CodeModel = {
    language: 'json',
    uri: 'main.json',
    value: '{ "test": true }',
    schemas: [
      {
        uri: 'http://custom/schema.json',
        schema: {
          type: 'object',
          properties: {
            type: {
              enum: ['button', 'textbox']
            }
          }
        }
      }
    ]
  };
}

The schemas get automatically installed and associated with the corresponding file.

Offline Setup

Editor

You can run the editor in the offline mode with your Angular CLI application using the following steps:

Install the monaco-editor:

npm install monaco-editor

Update the angular.json file and append the following asset rule:

{
  "glob": "**/*",
  "input": "../node_modules/monaco-editor/min",
  "output": "./assets/monaco"
}

Update the main application module and setup the service to use the custom baseUrl when application starts:

import { CodeEditorModule, CodeEditorService } from '@ngstack/code-editor';

@NgModule({
  ...,
  imports: [
    ...,
    CodeEditorModule.forRoot({
      baseUrl: 'assets/monaco'
    })
  ],
  ...
})
export class AppModule {}

Typings Worker

Update the angular.json file and append the following asset rule:

{
  "glob": "**/*.js",
  "input": "../node_modules/@ngstack/code-editor/workers",
  "output": "./assets/workers"
}

Then update the CodeEditorService configuration at the application startup:

@NgModule({
  ...,
  imports: [
    ...,
    CodeEditorModule.forRoot({
      typingsWorkerUrl: 'assets/workers/typings-worker.js'
    })
  ],
  ...
})
export class AppModule {}

Lazy Loading

To enable Lazy Loading use CodeEditorModule.forRoot() in the main application, and CodeEditorModule.forChild() in all lazy-loaded feature modules.

For more details please refer to Lazy Loading Feature Modules

Keywords

FAQs

Package last updated on 06 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc