@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
  • 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 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:

• 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