ngx-codemirror

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

Dependencies

Latest version available for each version of Angular

| @ctrl/ngx-codemirror | Angular | | -------------------- | --------- | | 1.3.10 | 6.x 7.x | | 2.2.1 | 8.x | | 3.1.3 | 9.x | | 4.1.1 | 10.x 11.x | | current | >= 12.x |

An Angular component wrapper for CodeMirror that extends ngModel. Based on JedWatson/react-codemirror

Used in:

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

Install

codemirror is a peer dependency and must also be installed

npm install @metalefs/ngx-codemirror-directive

Use

Import CodemirrorModule and FormsModule and bring in the codemirror files for parsing the language you wish to use.

In your NgModule:

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:

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

Import the base css file and your theme

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

Use The Component

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

• Use The Directive

  <textarea codemirrorEditor
    [options]="options"
    [disabled]="readOnly"
    [autoFocus]="true"
    [enableAutoComplete]="true"
    [autoCompleteWords]="['it','works']"
    [usePreviousWords]="true"
    (cursorActivity)="handleChange($event)"
    (focusChange)="handleChange($event)"
    (scroll)="handleChange($event)"
    (drop)="handleChange($event)"
    (changeValue)="handleChange($event)">
  </textarea>

Inputs

All Inputs of ngModel and

• enableAutoComplete - enable anyword autocomplete feature
• autoCompleteWords - extra words used for autocompletion
• usePreviousWords - use previous words for autocompletion
• 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 and

• focusChange - called when the editor is focused or loses focus
• valueChange - called when the editor's value changes
• 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

GitHub @scttcper  ·  GitHub @metalefs  ·  Twitter @scttcper