@nomadreservations/ngx-codemirror

`@nomadreservations/ngx-codemirror` [CodeMirror (5.x)](http://codemirror.net/) code editor in your Angular application. Server Side Rendering(SSR) compliant and @angular 6+ Ready.

Stats

StarsIssuesVersionUpdatedCreatedSize
@nomadreservations/ngx-codemirror
1932.0.03 years ago4 years agoMinified + gzip package size for @nomadreservations/ngx-codemirror in KB

Readme

@nomadreservations/ngx-codemirror

@nomadreservations/ngx-codemirror CodeMirror (5.x) code editor in your Angular application. Server Side Rendering(SSR) compliant and @angular 6+ Ready.

Note: If you're looking for @angular 5 support please use version 1.0.x

Originally derived from ng2-codemirror

Table of Contents:

1. Installation

To use @nomadreservations/ngx-codemirror in your project install it via npm:

npm i @nomadreservations/ngx-codemirror codemirror --save
npm i @types/codemirror --save-dev

or

yarn add @nomadreservations/ngx-codemirror codemirror
yarn add --dev @types/codemirror --save-dev

2. Project structure

  • Library:
    • src folder for the classes
    • src/lib/public_api.ts entry point for all public APIs of the package
    • package.json npm options

3. Testing

The following command run unit & integration tests that are in the tests folder (you can change the folder in spec.bundle.js file):

yarn test

It also reports coverage using Istanbul.

4. Building

The following command:

yarn build

To test locally the npm package:

yarn pack-lib

Then you can install it in an app to test it:

yarn add [path]@nomadreservations/ngx-codemirror-[version].tgz

5. Publishing

Before publishing the first time:

yarn publish-lib

6. Documentation

To generate the documentation, this project uses compodoc:

yarn docs:watch
yarn compodoc

7. Using the library

7.1. Installing

npm install @nomadreservations/ngx-codemirror --save

Then you need to include base CSS of codemirror located in codemirror/lib/codemirror.css

7.2. Sample

Include CodemirrorModule in your main module :

import { CodemirrorModule } from '@nomadreservations/ngx-codemirror';

@NgModule({
  // ...
  imports:      [
    CodemirrorModule
  ],
  // ...
})
export class AppModule { }
import { Component } from '@angular/core';
import { CodemirrorService } from '@nomadreservations/ngx-codemirror';

@Component({
  selector: 'sample',
  template: `
    <ngx-codemirror [(ngModel)]="code"
      [config]="{...}"
      (focus)="onFocus()"
      (blur)="onBlur()">
    </ngx-codemirror>
  `
})
export class Sample{

  constructor(
    private _codeMirror: CodemirrorService,
  ) { }

  public ngOnInit() {
    this._codeMirror.instance$.subscribe((editor) => {
      console.log(editor.state);
    });
  }
}

7.3. Configuration

7.4. Loading

Using SystemJS configuration

System.config({
    map: {
        '@nomadreservations/ngx-codemirror': 'node_modules/@nomadreservations/ngx-codemirror/bundles/@nomadreservations/ngx-codemirror.umd.js'
    }
});

Angular-CLI

No need to set up anything, just import it in your code.

Rollup or webpack

No need to set up anything, just import it in your code.

Plain JavaScript

Include the umd bundle in your index.html:

<script src="node_modules/@nomadreservations/ngx-codemirror/bundles/@nomadreservations/ngx-codemirror.umd.js"></script>

and use global nomadreservations.ngxCodemirror namespace.

7.5. AoT compilation

The library is compatible with AoT compilation.

8. License

MIT

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.