@nomadreservations/ngx-codemirror

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

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
  • 7.1. Installing
  • 7.2. Sample
  • 7.3. Configuration
  • 7.4. Loading
  • 7.5. AoT compilation
• 8. License

1. Installation

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

npm i @nomadreservations/ngx-codemirror --save

2. Project structure

• Library:
  • src folder for the classes
  • public_api.ts entry point for all public APIs of the package
  • package.json npm options
  • rollup.config.js Rollup configuration for building the umd bundles
  • rollup.es.config.js Rollup configuration for building the es2015 bundles
  • tsconfig-build.json ngc compiler options for AoT compilation
  • build.js building process using ShellJS
• Testing:
  • tests folder for unit & integration tests
  • karma.conf.js Karma configuration that uses webpack to build the tests
  • spec.bundle.js defines the files used by webpack
• Extra:
  • tslint.json TypeScript linter rules with Codelyzer
  • travis.yml Travis CI configuration

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

• starts TSLint with Codelyzer
• starts AoT compilation using ngc compiler
• creates dist folder with all the files of distribution

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

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