@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