Awesome

Code Editor

CodeMirror 6 wrapper for Angular

Quick links

Documentation | Playground

Installation

npm install @acrodata/code-editor --save

Usage

Code Editor

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CodeEditor } from '@acrodata/code-editor';

@Component({
  selector: 'your-app',
  template: `<code-editor [(ngModel)]="code" />`,
  standalone: true,
  imports: [FormsModule, CodeEditor],
})
export class YourAppComponent {
  code = `console.log("Hello world")`;
}

Diff Editor

import { Component } from '@angular/core';
import { DiffEditor } from '@acrodata/code-editor';

@Component({
  selector: 'your-app',
  template: `<diff-editor [(originalValue)]="originalCode" [(modifiedValue)]="modifiedCode" />`,
  standalone: true,
  imports: [DiffEditor],
})
export class YourAppComponent {
  originalCode = `bar`;
  modifiedCode = `foo`;
}

License

MIT