@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
- 8. License
To use @nomadreservations/ngx-codemirror in your project install it via npm:
npm i @nomadreservations/ngx-codemirror --save
- 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
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.
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
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
To generate the documentation, this project uses compodoc:
yarn docs:watch
yarn compodoc
npm install @nomadreservations/ngx-codemirror --save
Then you need to include base CSS of codemirror located in codemirror/lib/codemirror.css
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);
});
}
}
config
: The configuration object for CodeMirror see http://codemirror.net/doc/manual.html#config
System.config({
map: {
'@nomadreservations/ngx-codemirror': 'node_modules/@nomadreservations/ngx-codemirror/bundles/@nomadreservations/ngx-codemirror.umd.js'
}
});
No need to set up anything, just import it in your code.
No need to set up anything, just import it in your code.
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.
The library is compatible with AoT compilation.
MIT