Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/acrodata/code-editor
📝 CodeMirror 6 wrapper for Angular
https://github.com/acrodata/code-editor
angular code-editor codemirror codemirror6 ngx-codemirror
Last synced: about 1 month ago
JSON representation
📝 CodeMirror 6 wrapper for Angular
- Host: GitHub
- URL: https://github.com/acrodata/code-editor
- Owner: acrodata
- License: mit
- Created: 2024-05-20T15:19:31.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-10-18T02:50:33.000Z (about 2 months ago)
- Last Synced: 2024-10-30T09:29:20.299Z (about 1 month ago)
- Topics: angular, code-editor, codemirror, codemirror6, ngx-codemirror
- Language: TypeScript
- Homepage: https://acrodata.github.io/code-editor/
- Size: 4.33 MB
- Stars: 21
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - acrodata/code-editor - CodeMirror 6 wrapper for Angular. (Table of contents / Third Party Components)
- fucking-awesome-angular - acrodata/code-editor - CodeMirror 6 wrapper for Angular. (Table of contents / Third Party Components)
- fucking-awesome-angular - acrodata/code-editor - CodeMirror 6 wrapper for Angular. (Table of contents / Third Party Components)
README
# Code Editor
[](https://www.npmjs.com/package/@acrodata/code-editor)
[](https://github.com/acrodata/code-editor/blob/main/LICENSE)
CodeMirror 6 wrapper for Angular
#### Quick links
[Documentation](https://github.com/acrodata/code-editor?tab=readme-ov-file#code-editor) |
[Playground](https://acrodata.github.io/code-editor/)
## Installation
```bash
npm install @acrodata/code-editor --save
```
## Usage
### Code Editor
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CodeEditor } from '@acrodata/code-editor';
@Component({
selector: 'your-app',
template: ``,
standalone: true,
imports: [FormsModule, CodeEditor],
})
export class YourAppComponent {
value = `console.log("Hello world")`;
}
```
### Diff Editor
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DiffEditor } from '@acrodata/code-editor';
@Component({
selector: 'your-app',
template: ``,
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][_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-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`][_basicSetup], [`minimal`][_minimalSetup] or `null`. |
| [extensions] | Extension[] | `[]` | It will be appended to the root [extensions][_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`][_basicSetup], [`minimal`][_minimalSetup] or `null`. |
| [originalValue] | string | `''` | The diff-editor's original value. |
| [originalExtensions] | Extension[] | `[]` | The MergeView original config's [extensions][_extensions]. |
| [modifiedValue] | string | `''` | The diff-editor's modified value. |
| [modifiedExtensions] | Extension[] | `[]` | The MergeView modified config's [extensions][_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
[_root]: https://codemirror.net/docs/ref/#view.EditorView.root
[_language-data]: https://github.com/codemirror/language-data/blob/main/src/language-data.ts
[_basicSetup]: https://codemirror.net/docs/ref/#codemirror.basicSetup
[_minimalSetup]: https://codemirror.net/docs/ref/#codemirror.minimalSetup
[_extensions]: https://codemirror.net/docs/ref/#state.EditorStateConfig.extensions