@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
2. Project structure
3. Testing
4. Building
5. Publishing
6. Documentation
7. Using the library
8. License

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

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:

you can register your library on Travis CI: you have already configured .travis.yml file
you must have a user on the npm registry: Publishing npm packages

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

config : The configuration object for CodeMirror see http://codemirror.net/doc/manual.html#config

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