Angular - Codemirror component

Use the CodeMirror (5.x) code editor in your Angular application.

versione	Typescript Support	Angular Support
^1.x.x	~2.3.3	^4.2.4
^2.x.x	^2.4.2	^5.0.0
^3.x.x	~2.9.2	^6.0.0
^4.x.x	~3.2.2	^7.0.0
^5.x.x	~3.5.3	^8.0.0
^6.x.x	~3.8.3	^9.0.0
^7.x.x	~4.0.2	^10.0.0
^8.x.x	~4.1.5	^11.0.0
^9.x.x	~4.3.5	^12.0.0
^10.x.x	~4.6.4	^13.0.0

NB:

• Breaking Changes:
  • from versione 10.x.x angular 12 is not supported.
  • from version 9.x.x angular 11 is not supported.
  • from version 8.x.x angular 10 is not supported.
  • from version 7.x.x angular 9 is not supported.
  • from version 6.x.x angular 8 is not supported.
  • from version 5.x.x angular 7 is not supported.
  • from version 4.x.x angular 6 is not supported.
  • from version 3.x.x angular 2,4 and 5 not are more supported.

Installation

• Include Codemirror javascript files in your application (with files for modes)
• Install lt-codemirror
  • NPM : npm install lt-codemirror

Dependencies

CodeMirror library is required for this component, if NPM doesn't install it for you, type this :

  
  npm install codemirror

CodeMirror need to be accessible by import 'codemirror'

Then you need to include base CSS and base JS of codemirror in angular.json

  {
    "build": {
      "options": {
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "src/styles.css",
          "./node_modules/codemirror/lib/codemirror.css",
          "./node_modules/codemirror/theme/dracula.css"
        ],
        "scripts": [
          "./node_modules/codemirror/lib/codemirror.js",
          "./node_modules/codemirror/mode/htmlmixed/htmlmixed.js"
        ]
      },
    }
  }

Sample

Include LtCodemirrorModule in your main module :

import { LtCodemirrorModule } from 'lt-codemirror';

@NgModule({
  // ...
  imports:      [
    LtCodemirrorModule
  ],
  // ...
})
export class AppModule { }

import { Component } from '@angular/core';

@Component({
  selector: 'sample',
  template: `
    <lt-codemirror [(ngModel)]="code"
      [config]="{...}"
      [size]="{w:'100%',h:477}"
      (focus)="onFocus()"
      (blur)="onBlur()">
    </lt-codemirror>
  `
})
export class Sample{
  constructor(){
    this.code = `// Some code...`;
  }
}

if you want to change the themes or add mode, you must add this simple line

Example

  {
    "apps": [{
      "styles": [
        "../node_modules/codemirror/lib/codemirror.css",
        "../node_modules/codemirror/theme/dracula.css",
      ],
      "scripts": [
        "../node_modules/codemirror/lib/codemirror.js",
        "../node_modules/codemirror/mode/htmlmixed/htmlmixed.js"
      ]
    }]
  }

import { Component } from '@angular/core';
import 'codemirror/mode/htmlmixed/htmlmixed';

@Component({
  selector: 'sample',
  template: `
    <lt-codemirror [(ngModel)]="code"
      [config]="config"
      [size]="{w:'100%',h:477}"
      (focus)="onFocus()"
      (blur)="onBlur()">
    </lt-codemirror>
  `
})
export class Sample{
  constructor(){
    this.code = `// Some code...`;
    this.config = {
      lineNumbers: true,
      mode : 'htmlmixed',
      styleActiveLine: true,
      matchBrackets: true,
      theme: 'dracula'
    }
  }
}

New Implementation

• Added the Size for TextArea

Configuration

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

Credits to Simon Babay forked from the original package.

Licence

See LICENSE file