CodeMirror 6 wrapper for Angular
npm install @acrodata/code-editor --saveimport { 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")`;
}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`;
}
}| 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 | - |
Event emitted when the editor's value changes. |
| (focus) | EventEmitter | - |
Event emitted when focus on the editor. |
| (blur) | EventEmitter | - |
Event emitted when the editor has lost focus. |
| 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 | - |
Event emitted when the editor's original value changes. |
| (originalFocus) | EventEmitter | - |
Event emitted when focus on the original editor. |
| (originalBlur) | EventEmitter | - |
Event emitted when blur on the original editor. |
| (modifiedValueChange) | EventEmitter | - |
Event emitted when the editor's modified value changes. |
| (modifiedFocus) | EventEmitter | - |
Event emitted when focus on the modified editor. |
| (modifiedBlur) | EventEmitter | - |
Event emitted when blur on the modified editor. |
MIT