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	-	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.

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	-	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.

License

MIT