Awesome
Code Editor
<img src="https://github.com/acrodata/code-editor/assets/20625845/2a511ccf-bf6a-414b-9f0d-4aafe4a8079b" width="400" alt="codemirror+angular">CodeMirror 6 wrapper for Angular
Quick links
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