WebACAD/CodeMirror

CodeMirror form component for angular.

Dependencies

• @angular/common
• @angular/core
• @angular/forms
• codemirror
• rxjs

Installation

$ npm install --save @webacad/ng-codemirror

or with yarn

$ yarn add @webacad/ng-codemirror

Register module

app.module.ts:

import {CodemirrorModule} from '@webacad/ng-codemirror';

@NgModule({
	imports: [
		CodemirrorModule,
	],
})
export class AppModule {}

Usage

<wa-codemirror mode="javascript"></wa-codemirror>

Available options:

• mode: codemirror mode option
• theme: codemirror theme option
• lineNumbers: codemirror lineNumbers option
• viewportMargin: codemirror viewportMargin option

Using in angular forms

This package implements all the necessary code for angular forms. That means that you can use it just like any other ordinary form control.

App-wide configuration

The component itself provides only a few options for codemirror. If you need to have more control over the codemirror or if you want to configure it globally, use the WA_CODEMIRROR_DEFAULTS injection token:

import * as CodeMirror from 'codemirror';

export const AppCodeMirrorConfiguration: CodeMirror.EditorConfiguration = {
	lineNumbers: true,
	theme: 'material',
};

and register it in your app module:

import {CodemirrorModule, WA_CODEMIRROR_DEFAULTS} from '@webacad/ng-codemirror';
import {AppCodeMirrorConfiguration} from './codemirror-configuration';

@NgModule({
	imports: [
		CodemirrorModule,
	],
	providers: [
		{
			provide: WA_CODEMIRROR_DEFAULTS,
			useValue: CodeMirrorConfiguration,
		},
	],
})
export class AppModule {}