Home
Softono

Code Editor

Open source MIT TypeScript
50
Stars
6
Forks
2
Issues
1
Watchers
4 months
Last Commit

 About Code Editor

πŸ“ CodeMirror 6 wrapper for Angular

Platforms

Web Self-hosted

Languages

TypeScript

Need Help Installing Code Editor?

We provide expert installation service for this software. Our team will install, configure, and secure Code Editor on your server. plans start at just $30.

Code Editor

View on GitHub

Code Editor

npm license

codemirror+angular

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],
})
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<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