# ngx-codemirror [![npm](https://badgen.net/npm/v/@ctrl/ngx-codemirror)](https://www.npmjs.com/package/@ctrl/ngx-codemirror) [![coverage](https://badgen.net/codecov/c/github/scttcper/ngx-codemirror)](https://codecov.io/gh/scttcper/ngx-codemirror)

DEMO: https://ngx-codemirror.vercel.app

## Dependencies

Latest version available for each version of Angular

| @ctrl/ngx-codemirror | Angular   | Codemirror |
| -------------------- | --------- | ---------- |
| 1.3.10               | 6.x 7.x   | 5          |
| 2.2.1                | 8.x       | 5          |
| 3.1.3                | 9.x       | 5          |
| 4.1.1                | 10.x 11.x | 5          |
| 5.1.1                | 12.x-14x  | 5          |
| 6.1.0                | 15.x      | 5          |
| current              | >= 16.x   | 5          |

An Angular component wrapper for [CodeMirror](https://codemirror.net/) that extends ngModel. Based on [JedWatson/react-codemirror](https://github.com/JedWatson/react-codemirror)

##### Used in:

tsquery playground: https://tsquery-playground.firebaseapp.com/

## Install

`codemirror` is a peer dependency and must also be installed

```sh
npm install @ctrl/ngx-codemirror codemirror@5
```

## Use

Import `CodemirrorModule` and `FormsModule` and bring in the [codemirror files for parsing the language](https://codemirror.net/mode/index.html) you wish to use.

In your `NgModule`:

```ts
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { CodemirrorModule } from '@ctrl/ngx-codemirror';

  // add to imports:
  imports: [
    BrowserModule,
    FormsModule,
    CodemirrorModule,
    ...
  ]
```

In your `main.ts` or at the root of your application, see [documentation](https://codemirror.net/mode/index.html):

```ts
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/markdown/markdown';
```

Import the base css file and your [theme](https://codemirror.net/demo/theme.html)

```css
@import '~codemirror/lib/codemirror';
@import '~codemirror/theme/material';
```

Use The Component

```html
<ngx-codemirror
  [(ngModel)]="content"
  [options]="{
    lineNumbers: true,
    theme: 'material',
    mode: 'markdown'
  }"
></ngx-codemirror>
```

## Inputs

All Inputs of [ngModel](https://angular.io/api/forms/NgModel#inputs) and

- `options` - options passed to the CodeMirror instance see http://codemirror.net/doc/manual.html#config
- `name` - name applied to the created textarea
- `autoFocus` - setting applied to the created textarea
- `preserveScrollPosition` - preserve previous scroll position after updating value

## Outputs

All outputs of [ngModel](https://angular.io/api/forms/NgModel#outputs) and

- `codeMirrorLoaded` - called when codeMirror instance is initiated
- `focusChange` - called when the editor is focused or loses focus
- `scroll` - called when the editor is scrolled (not wrapped inside angular change detection must manually trigger change detection or run inside ngzone)
- `cursorActivity` - called when the text cursor is moved
- `drop` - called when file(s) are dropped

## License

MIT