CodeMirror 6 wrapper for Angular
npm install @acrodata/code-editor

CodeMirror 6 wrapper for Angular
#### Quick links
``bash`
npm install @acrodata/code-editor --save
`ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CodeEditor } from '@acrodata/code-editor';
@Component({
selector: 'your-app',
template: ,console.log("Hello world")
standalone: true,
imports: [FormsModule, CodeEditor],
})
export class YourAppComponent {
value = ;`
}
`ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DiffEditor } from '@acrodata/code-editor';
@Component({
selector: 'your-app',
template: ,bar
standalone: true,
imports: [FormsModule, DiffEditor],
})
export class YourAppComponent {
value = {
original: ;foo
modified: ;`
}
}
| Name | Type | Default | Description |
| --------------------- | ---------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ |
| [value] | string | '' | The editor's value. |undefined
| [root] | Document \| ShadowRoot | | EditorView's [root][_root]. |false
| [autoFocus] | boolean | | Whether focus on the editor after init. |false
| [disabled] | boolean | | Whether the editor is disabled. |false
| [readonly] | boolean | | Whether the editor is readonly. |light
| [theme] | Theme | | The editor's theme. |''
| [placeholder] | string | | The editor's placecholder. |false
| [indentWithTab] | boolean | | Whether indent with Tab key. |''
| [indentUnit] | string | | Should be a string consisting either entirely of the same whitespace character. |false
| [lineWrapping] | boolean | | Whether the editor wraps lines. |false
| [highlightWhitespace] | boolean | | Whether highlight the whitespace. |[]
| [languages] | LanguageDescription[] | | An array of language descriptions for known [language-data][_language-data]. |''
| [language] | string | | The editor's language. You should set the languages prop at first. |'basic'
| [setup] | Setup | | The editor's built-in setup. The value can be set to [basic][_basicSetup], [minimal][_minimalSetup] or null. |[]
| [extensions] | Extension[] | | It will be appended to the root [extensions][_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][_basicSetup], [minimal][_minimalSetup] or null. |''
| [originalValue] | string | | The diff-editor's original value. |[]
| [originalExtensions] | Extension[] | | The MergeView original config's [extensions][_extensions]. |''
| [modifiedValue] | string | | The diff-editor's modified value. |[]
| [modifiedExtensions] | Extension[] | | The MergeView modified config's [extensions][_extensions]. |undefined
| [orientation] | Orientation | | Controls whether editor A or editor B is shown first. Defaults to "a-b". |undefined
| [revertControls] | RevertControls | | Controls whether revert controls are shown between changed chunks. |undefined
| [renderRevertControl] | RenderRevertControl | | When given, this function is called to render the button to revert a chunk. |true
| [highlightChanges] | boolean | | By default, the merge view will mark inserted and deleted text in changed chunks. |true
| [gutter] | boolean | | Controls whether a gutter marker is shown next to changed lines. |false
| [disabled] | boolean | | Whether the diff-editor is disabled. |undefined
| [collapseUnchanged] | { margin?: number; minSize?: number } | | When given, long stretches of unchanged text are collapsed. |undefined
| [diffConfig] | DiffConfig | | 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. |-` | Event emitted when blur on the modified editor. |
| (modifiedBlur) | EventEmitter
MIT
[_root]: https://codemirror.net/docs/ref/#view.EditorView.root
[_language-data]: https://github.com/codemirror/language-data/blob/main/src/language-data.ts
[_basicSetup]: https://codemirror.net/docs/ref/#codemirror.basicSetup
[_minimalSetup]: https://codemirror.net/docs/ref/#codemirror.minimalSetup
[_extensions]: https://codemirror.net/docs/ref/#state.EditorStateConfig.extensions