Nifty Procrastination Machine
    Have ideas to improve npm?Join in the discussion! »

    @nomadreservations/ngx-codemirror
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    @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

    Install

    npm i @nomadreservations/ngx-codemirror

    DownloadsWeekly Downloads

    179

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    165 kB

    Total Files

    29

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar