This package is in a transition, I have forked the original to experiment with zoneless and signal based forms.

• quack.

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" />`,
  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" />`,
  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