@@ -9,7 +9,7 @@ CodeMirror 6 wrapper for Angular
9
9
10
10
#### Quick links
11
11
12
- [ Documentation] ( https://acrodata. github.io/ code-editor/ ) |
12
+ [ Documentation] ( https://github.com/acrodata/ code-editor?tab=readme-ov-file#code-editor ) |
13
13
[ Playground] ( https://acrodata.github.io/code-editor/ )
14
14
15
15
## Installation
@@ -42,6 +42,7 @@ export class YourAppComponent {
42
42
43
43
``` ts
44
44
import { Component } from ' @angular/core' ;
45
+ import { FormsModule } from ' @angular/forms' ;
45
46
import { DiffEditor } from ' @acrodata/code-editor' ;
46
47
47
48
@Component ({
@@ -58,6 +59,61 @@ export class YourAppComponent {
58
59
}
59
60
```
60
61
62
+ ## API
63
+
64
+ ### Code Editor
65
+
66
+ | Name | Type | Default | Description |
67
+ | --------------------- | ---------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ |
68
+ | [ value] | string | ` '' ` | The editor's value. |
69
+ | [ root] | Document \| ShadowRoot | ` undefined ` | EditorView's [ root] [ _root ] . |
70
+ | [ autoFocus] | boolean | ` false ` | Whether focus on the editor after init. |
71
+ | [ disabled] | boolean | ` false ` | Whether the editor is disabled. |
72
+ | [ readonly] | boolean | ` false ` | Whether the editor is readonly. |
73
+ | [ theme] | Theme | ` light ` | The editor's theme. |
74
+ | [ placeholder] | string | ` '' ` | The editor's placecholder. |
75
+ | [ indentWithTab] | boolean | ` false ` | Whether indent with Tab key. |
76
+ | [ indentUnit] | string | ` '' ` | Should be a string consisting either entirely of the same whitespace character. |
77
+ | [ lineWrapping] | boolean | ` false ` | Whether the editor wraps lines. |
78
+ | [ highlightWhitespace] | boolean | ` false ` | Whether highlight the whitespace. |
79
+ | [ languages] | LanguageDescription[ ] | ` [] ` | An array of language descriptions for known [ language-data] [ _language-data ] . |
80
+ | [ language] | string | ` '' ` | The editor's language. You should set the ` languages ` prop at first. |
81
+ | [ setup] | Setup | ` 'basic' ` | The editor's built-in setup. The value can be set to [ ` basic ` ] [ _basicSetup ] , [ ` minimal ` ] [ _minimalSetup ] or ` null ` . |
82
+ | [ extensions] | Extension[ ] | ` [] ` | It will be appended to the root [ extensions] [ _extensions ] . |
83
+ | (change) | EventEmitter<string > | ` - ` | Event emitted when the editor's value changes. |
84
+ | (focus) | EventEmitter<void > | ` - ` | Event emitted when focus on the editor. |
85
+ | (blur) | EventEmitter<void > | ` - ` | Event emitted when the editor has lost focus. |
86
+
87
+ ### Diff Editor
88
+
89
+ | Name | Type | Default | Description |
90
+ | --------------------- | ------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ |
91
+ | [ setup] | Setup | ` 'basic' ` | The editor's built-in setup. The value can be set to [ ` basic ` ] [ _basicSetup ] , [ ` minimal ` ] [ _minimalSetup ] or ` null ` . |
92
+ | [ originalValue] | string | ` '' ` | The diff-editor's original value. |
93
+ | [ originalExtensions] | Extension[ ] | ` [] ` | The MergeView original config's [ extensions] [ _extensions ] . |
94
+ | [ modifiedValue] | string | ` '' ` | The diff-editor's modified value. |
95
+ | [ modifiedExtensions] | Extension[ ] | ` [] ` | The MergeView modified config's [ extensions] [ _extensions ] . |
96
+ | [ orientation] | Orientation | ` undefined ` | Controls whether editor A or editor B is shown first. Defaults to ` "a-b" ` . |
97
+ | [ revertControls] | RevertControls | ` undefined ` | Controls whether revert controls are shown between changed chunks. |
98
+ | [ renderRevertControl] | RenderRevertControl | ` undefined ` | When given, this function is called to render the button to revert a chunk. |
99
+ | [ highlightChanges] | boolean | ` true ` | By default, the merge view will mark inserted and deleted text in changed chunks. |
100
+ | [ gutter] | boolean | ` true ` | Controls whether a gutter marker is shown next to changed lines. |
101
+ | [ disabled] | boolean | ` false ` | Whether the diff-editor is disabled. |
102
+ | [ collapseUnchanged] | { margin?: number; minSize?: number } | ` undefined ` | When given, long stretches of unchanged text are collapsed. |
103
+ | [ diffConfig] | DiffConfig | ` undefined ` | Pass options to the diff algorithm. |
104
+ | (originalValueChange) | EventEmitter<string > | ` - ` | Event emitted when the editor's original value changes. |
105
+ | (originalFocus) | EventEmitter<void > | ` - ` | Event emitted when focus on the original editor. |
106
+ | (originalBlur) | EventEmitter<void > | ` - ` | Event emitted when blur on the original editor. |
107
+ | (modifiedValueChange) | EventEmitter<string > | ` - ` | Event emitted when the editor's modified value changes. |
108
+ | (modifiedFocus) | EventEmitter<void > | ` - ` | Event emitted when focus on the modified editor. |
109
+ | (modifiedBlur) | EventEmitter<void > | ` - ` | Event emitted when blur on the modified editor. |
110
+
61
111
## License
62
112
63
113
MIT
114
+
115
+ [ _root ] : https://codemirror.net/docs/ref/#view.EditorView.root
116
+ [ _language-data ] : https://github.com/codemirror/language-data/blob/main/src/language-data.ts
117
+ [ _basicSetup ] : https://codemirror.net/docs/ref/#codemirror.basicSetup
118
+ [ _minimalSetup ] : https://codemirror.net/docs/ref/#codemirror.minimalSetup
119
+ [ _extensions ] : https://codemirror.net/docs/ref/#state.EditorStateConfig.extensions
0 commit comments