search

acrodata / code-editor

📝 CodeMirror 6 wrapper for Angular
https://acrodata.github.io/code-editor/
MIT License
21 stars 1 forks source link
angular code-editor codemirror codemirror6 ngx-codemirror

readme

Code Editor

npm license

codemirror+angular

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