This is just a side project to provide additional features that fulfill my needs.

@fsegurai/ngx-codemirror is an Angular library that combines...

• CodeMirror to provide a versatile text editor implemented in JavaScript for the browser

Table of contents

• Installation
• Configuration
• Usage
• Demo application
• License

Installation

@fsegurai/ngx-codemirror

To add @fsegurai/ngx-codemirror along with the required codemirror library to your package.json use the following commands.

npm install @fsegurai/ngx-codemirror --save

Configuration

Component Module

For Not-Standalone mode, you need to import the CodemirrorModule in your Angular module.

import { CodemirrorModule } from '@fsegurai/ngx-codemirror';

@NgModule({
    imports: [
        CodemirrorModule.forRoot({
            // codemirror options
        }),
    ],
})
export class AppModule {
}

Standalone Component

For Standalone mode, you just need to import the components you want to use.

/* CodemirrorComponent */
import { CodemirrorComponent } from '@fsegurai/ngx-codemirror';

// or

/* CodeDiffEditorComponent */
import { CodeDiffEditorComponent } from '@fsegurai/ngx-codemirror';

Usage

Basic Usage

<ngx-code-editor
        [value]="editorContent"
        [theme]="'dark'"
        [language]="'javascript'"
        [placeholder]="'Type your code here...'"
        [lineWrapping]="true"
        (ngModelChange)="onEditorChange($event)">
</ngx-code-editor>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    editorContent = '// Start coding...';

    onEditorChange(content: string) {
        console.log('Editor Content:', content);
    }
}

Advanced Usage

Customize themes, languages, and editor behavior dynamically:

<ngx-code-editor
        [(ngModel)]="editorContent"
        [theme]="selectedTheme"
        [language]="selectedLanguage"
        [setup]="editorSetup"
        [indentWithTab]="true"
        [lineWrapping]="true"
        (ngModelChange)="onEditorChange($event)">
</ngx-code-editor>

@Component({
    selector: 'app-advanced-editor',
    templateUrl: './advanced-editor.component.html',
})
export class AdvancedEditorComponent {
    editorContent = '';
    selectedTheme = 'dark';
    selectedLanguage = 'javascript';
    editorSetup = 'basic';

    onEditorChange(updatedContent: string) {
        console.log('Updated Content:', updatedContent);
    }
}

Integration

The library provides a customizable editor component with various inputs and outputs for flexible usage.

Inputs

• value - The initial content of the editor.
• theme - The theme of the editor.
• language - The language mode of the editor.
• placeholder - The placeholder text of the editor.
• lineWrapping - Enable line wrapping in the editor.
• indentWithTab - Enable indentation with tabs in the editor.
• setup - The setup of the editor.
• extensions - The extensions of the editor.
• and more...

Outputs

• change - The output event when the editor content changes.
• focus - The output event when the editor is focused.
• blur - The output event when the editor is blurred.

Demo application

A demo is available @ https://fsegurai.github.io/ngx-codemirror and its source code can be found inside the demo directory.

It's important to mention that for this project I'm using:
Node.js v20.11.1 and Bun v1.1.32 (or later).

The following commands will clone the repository, install npm dependencies and serve the application @ http://localhost:4200

It is advisable to use bun as the package manager for managing numerous dependencies, as it is faster than npm and generally more reliable.

git clone https://github.com/fsegurai/ngx-codemirror.git
cd ngx-codemirror
bun install
bun start

License

Licensed under MIT.