Code Editor

CodeMirror 6 wrapper for Angular

Quick links

Documentation | Playground

Compatibility

Angular	@acrodata/code-editor
>=16	0.x

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" /> `,imports: [FormsModule,CodeEditor],})exportclassYourAppComponent{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" />`,imports: [FormsModule,DiffEditor],})exportclassYourAppComponent{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