Module @memberjunction/ng-code-editor - v5.49.0

@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

Classes

CodeEditorComponent
CodeEditorModule

Interfaces

CompositionTokenClickEvent
CompositionTokenConfig
CompositionTokenInfo
ToolbarActionEvent
ToolbarButton
ToolbarButtonGroup
ToolbarConfig

Type Aliases

CompositionTokenResolver
Setup

Variables

External
TOOLBAR_BUTTONS

Functions

compositionTokenExtension
createCopyButton
createCopyOnlyToolbar