@memberjunction/ng-code-editor

A flexible Angular code editor component built on CodeMirror 6, with syntax highlighting for 150+ languages, Angular forms integration, and extensive customization options.

Overview

The @memberjunction/ng-code-editor package wraps CodeMirror 6 in an Angular component with full support for ngModel, formControlName, and ControlValueAccessor. It provides syntax highlighting, line wrapping, whitespace visualization, configurable indentation, and runtime language switching -- all reactive to input property changes.

graph TD
    A[CodeEditorModule] --> B[CodeEditorComponent]
    A --> C[ToolbarConfig]

    B --> D["CodeMirror 6 EditorView"]

    D --> E["Language Support
    (150+ languages)"]
    D --> F["Form Integration
    (ngModel / formControl)"]
    D --> G["Extensions
    (themes, keymaps, custom)"]

    B --> H["Setup Modes"]
    H --> H1["basic (full features)"]
    H --> H2["minimal (lightweight)"]
    H --> H3["null (custom only)"]

    style A fill:#2d6a9f,stroke:#1a4971,color:#fff
    style B fill:#7c5295,stroke:#563a6b,color:#fff
    style D fill:#2d8659,stroke:#1a5c3a,color:#fff
    style H fill:#b8762f,stroke:#8a5722,color:#fff

Installation

npm install @memberjunction/ng-code-editor

Usage

Import the Module

import { CodeEditorModule } from '@memberjunction/ng-code-editor';

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

Basic Usage

<mj-code-editor
  [value]="code"
  [language]="'javascript'"
  [placeholder]="'// Enter your code here...'"
  (change)="onCodeChange($event)">
</mj-code-editor>

With ngModel

<mj-code-editor
  [(ngModel)]="code"
  [languages]="languages"
  [language]="'typescript'"
  [lineWrapping]="true"
  [indentWithTab]="true">
</mj-code-editor>

import { languages } from '@codemirror/language-data';

export class MyComponent {
  code = '';
  languages = languages;
}

With Reactive Forms

<form [formGroup]="form">
  <mj-code-editor
    formControlName="query"
    [languages]="languages"
    [language]="'sql'"
    [placeholder]="'SELECT * FROM ...'"
    [setup]="'basic'">
  </mj-code-editor>
</form>

API Reference

Component Selector

mj-code-editor

Inputs

| Input | Type | Default | Description | |-------|------|---------|-------------| | value | string | '' | The editor's content | | disabled | boolean | false | Disables the editor | | readonly | boolean | false | Makes the editor read-only | | placeholder | string | '' | Placeholder text when empty | | indentWithTab | boolean | false | Tab key indents instead of focusing next element | | indentUnit | string | '' | Indentation string (e.g., ' ' for 2 spaces) | | lineWrapping | boolean | false | Wrap long lines | | highlightWhitespace | boolean | false | Visualize whitespace characters | | languages | LanguageDescription[] | [] | Available language descriptions (static) | | language | string | '' | Current language for syntax highlighting | | setup | 'basic' \| 'minimal' \| null | 'basic' | Built-in editor setup | | extensions | Extension[] | [] | Additional CodeMirror extensions | | autoFocus | boolean | false | Focus editor on init (static) | | root | Document \| ShadowRoot | undefined | Custom root for the editor (static) |

Outputs

| Output | Type | Description | |--------|------|-------------| | change | EventEmitter<string> | Content changed | | focus | EventEmitter<void> | Editor gained focus | | blur | EventEmitter<void> | Editor lost focus |

Public Properties

| Property | Type | Description | |----------|------|-------------| | view | EditorView \| undefined | Underlying CodeMirror EditorView instance |

Setup Modes

• 'basic' (default): Full setup with line numbers, fold gutters, search, bracket matching
• 'minimal': Undo/redo history and basic keymaps only
• null: No built-in setup; complete customization via extensions

Dependencies

| Package | Description | |---------|-------------| | @memberjunction/core | Core framework | | @memberjunction/core-entities | Entity definitions | | @memberjunction/global | Global utilities | | @memberjunction/ng-container-directives | Container directives | | codemirror | CodeMirror 6 core | | @codemirror/lang-javascript | JavaScript/TypeScript language | | @codemirror/lang-json | JSON language | | @codemirror/lang-python | Python language | | @codemirror/lang-sql | SQL language | | @codemirror/language-data | 150+ language definitions | | @codemirror/merge | Merge/diff extensions |

Peer Dependencies

• @angular/common ^21.x
• @angular/core ^21.x

Build

cd packages/Angular/Generic/code-editor
npm run build

License

ISC