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)]="value" />`,
  standalone: true,
  imports: [FormsModule, CodeEditor],
})
export class YourAppComponent {
  value = `console.log("Hello world")`;
}

Diff Editor

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

@Component({
  selector: 'your-app',
  template: `<diff-editor [(ngModel)]="value" />`,
  standalone: true,
  imports: [FormsModule, DiffEditor],
})
export class YourAppComponent {
  value = {
    original: `bar`;
    modified: `foo`;
  }
}

API

Code Editor

Name	Type	Default	Description
[value]	string	`''`	The editor's value.
[root]	Document \| ShadowRoot	`undefined`	EditorView's root.
[autoFocus]	boolean	`false`	Whether focus on the editor after init.
[disabled]	boolean	`false`	Whether the editor is disabled.
[readonly]	boolean	`false`	Whether the editor is readonly.
[theme]	Theme	`light`	The editor's theme.
[placeholder]	string	`''`	The editor's placecholder.
[indentWithTab]	boolean	`false`	Whether indent with Tab key.
[indentUnit]	string	`''`	Should be a string consisting either entirely of the same whitespace character.
[lineWrapping]	boolean	`false`	Whether the editor wraps lines.
[highlightWhitespace]	boolean	`false`	Whether highlight the whitespace.
[languages]	LanguageDescription[]	`[]`	An array of language descriptions for known language-data.
[language]	string	`''`	The editor's language. You should set the `languages` prop at first.
[setup]	Setup	`'basic'`	The editor's built-in setup. The value can be set to `basic`, `minimal` or `null`.
[extensions]	Extension[]	`[]`	It will be appended to the root extensions.
(change)	EventEmitter<string>	`-`	Event emitted when the editor's value changes.
(focus)	EventEmitter<void>	`-`	Event emitted when focus on the editor.
(blur)	EventEmitter<void>	`-`	Event emitted when the editor has lost focus.

Diff Editor

Name	Type	Default	Description
[setup]	Setup	`'basic'`	The editor's built-in setup. The value can be set to `basic`, `minimal` or `null`.
[originalValue]	string	`''`	The diff-editor's original value.
[originalExtensions]	Extension[]	`[]`	The MergeView original config's extensions.
[modifiedValue]	string	`''`	The diff-editor's modified value.
[modifiedExtensions]	Extension[]	`[]`	The MergeView modified config's extensions.
[orientation]	Orientation	`undefined`	Controls whether editor A or editor B is shown first. Defaults to `"a-b"`.
[revertControls]	RevertControls	`undefined`	Controls whether revert controls are shown between changed chunks.
[renderRevertControl]	RenderRevertControl	`undefined`	When given, this function is called to render the button to revert a chunk.
[highlightChanges]	boolean	`true`	By default, the merge view will mark inserted and deleted text in changed chunks.
[gutter]	boolean	`true`	Controls whether a gutter marker is shown next to changed lines.
[disabled]	boolean	`false`	Whether the diff-editor is disabled.
[collapseUnchanged]	{ margin?: number; minSize?: number }	`undefined`	When given, long stretches of unchanged text are collapsed.
[diffConfig]	DiffConfig	`undefined`	Pass options to the diff algorithm.
(originalValueChange)	EventEmitter<string>	`-`	Event emitted when the editor's original value changes.
(originalFocus)	EventEmitter<void>	`-`	Event emitted when focus on the original editor.
(originalBlur)	EventEmitter<void>	`-`	Event emitted when blur on the original editor.
(modifiedValueChange)	EventEmitter<string>	`-`	Event emitted when the editor's modified value changes.
(modifiedFocus)	EventEmitter<void>	`-`	Event emitted when focus on the modified editor.
(modifiedBlur)	EventEmitter<void>	`-`	Event emitted when blur on the modified editor.

License

MIT