Skip to content

Commit 0e939fd

Browse files
cyber-haribavi-r
cyber-hari
authored and
bavi-r
committed
docs(monaco-editor): refactor monaco editor docs to support v21
1 parent faecb74 commit 0e939fd

File tree

18 files changed

+790
-85
lines changed

18 files changed

+790
-85
lines changed

‎docs/@ng-catbee/monaco-editor/api-reference.md‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,25 @@ title: API Reference
44
sidebar_position: 4
55
---
66

7-
## `CatbeeMonacoEditorComponent`: Single editor
7+
## `CatbeeMonacoEditor`: Single editor
88

99
### Properties
1010

11-
| Property | Description | Type | Default |
12-
| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | -------------------------- |
13-
| `[height]` | Height of Monaco Editor | `string` | `300px` |
14-
| `[width]` | Width of Monaco Editor | `string` | `100%` |
15-
| `[disabled]` | Disabled of monaco editor | `boolean` | `false` |
16-
| `[placeholder]` | Placeholder of monaco editor, Can change the style via defining the `.monaco-editor-placeholder` CSS. | `string` | - |
17-
| `[placeholderColor]` | Color of the placeholder text | `string` | `rgba(128, 128, 128, 0.6)` |
18-
| `[showPlaceholderOnWhiteSpace]` | Show placeholder when editor is empty but contains whitespace characters | `boolean` | `false` |
19-
| `[autoFormat]` | Whether to automatically format the document | `boolean` | `true` |
20-
| `[options]` | Default options when creating editors | `MonacoEditorOptions` | - |
21-
| `[initDelay]` | Delay initializing monaco editor in ms | `number` | `0` |
22-
| `[model]` | Model of monaco editor | `CatbeeMonacoEditorModel` | - |
23-
| `[reInitOnOptionsChange]` | Whether to re-initialize the editor instance when options change. By default, the editor will re-initialize only if the language option changes. Note: Some options (like language) may require re-initialization to take effect. | `boolean` | `false` |
11+
| Property | Description | Type | Default |
12+
| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -------------------------- |
13+
| `[(ngModel)]` or `[(value)]` | Value of monaco editor | `string` | - |
14+
| `[language]` | Language of monaco editor | `string` | `plaintext` |
15+
| `[uri]` | URI of monaco editor model | `string` | - |
16+
| `[height]` | Height of Monaco Editor | `string` | `300px` |
17+
| `[width]` | Width of Monaco Editor | `string` | `100%` |
18+
| `[disabled]` | Disabled of monaco editor | `boolean` | `false` |
19+
| `[placeholder]` | Placeholder of monaco editor, Can change the style via defining the `.monaco-editor-placeholder` CSS. | `string` | - |
20+
| `[placeholderColor]` | Color of the placeholder text | `string` | `rgba(128, 128, 128, 0.6)` |
21+
| `[showPlaceholderOnWhiteSpace]` | Show placeholder when editor is empty but contains whitespace characters | `boolean` | `false` |
22+
| `[autoFormat]` | Whether to automatically format the document | `boolean` | `true` |
23+
| `[options]` | Default options when creating editors | `MonacoEditorOptions` | - |
24+
| `[initDelay]` | Delay initializing monaco editor in ms | `number` | `0` |
25+
| `[reInitOnOptionsChange]` | Whether to re-initialize the editor instance when options change. By default, the editor will re-initialize only if the language option changes. Note: Some options (like language) may require re-initialization to take effect. | `boolean` | `false` |
2426

2527
### Events
2628

@@ -46,19 +48,19 @@ sidebar_position: 4
4648
| `(editorMouseLeave)` | Event emitted when the mouse leaves the editor | `EventEmitter<MonacoEditorPartialMouseEvent>` |
4749
| `(editorModelContentChange)` | Event emitted when the content of the current model has changed | `EventEmitter<MonacoModelContentChangedEvent>` |
4850

49-
## `CatbeeMonacoDiffEditorComponent`: Diff editor
51+
## `CatbeeMonacoDiffEditor`: Diff editor
5052

5153
### Properties
5254

53-
| Property | Description | Type | Default |
54-
| ------------- | --------------------------------------------- | ------------------------- | ----------- |
55-
| `[height]` | Height of Monaco Editor | `string` | `300px` |
56-
| `[width]` | Width of Monaco Editor | `string` | `100%` |
57-
| `[disabled]` | Disables Modified Editor | `boolean` | `false` |
58-
| `[options]` | Default options when creating editors | `MonacoDiffEditorOptions` | - |
59-
| `[language]` | Language of both original and modified models | `string` | `plaintext` |
60-
| `[initDelay]` | Delay initializing monaco editor in ms | `number` | `0` |
61-
| `[model]` | Model of monaco editor | `CatbeeMonacoEditorModel` | - |
55+
| Property | Description | Type | Default |
56+
| ---------------------------- | --------------------------------------------- | ----------------------------- | ----------- |
57+
| `[(ngModel)]` or `[(value)]` | Model of monaco editor | `CatbeeMonacoDiffEditorModel` | - |
58+
| `[language]` | Language of both original and modified models | `string` | `plaintext` |
59+
| `[height]` | Height of Monaco Editor | `string` | `300px` |
60+
| `[width]` | Width of Monaco Editor | `string` | `100%` |
61+
| `[disabled]` | Disables Modified Editor | `boolean` | `false` |
62+
| `[options]` | Default options when creating editors | `MonacoDiffEditorOptions` | - |
63+
| `[initDelay]` | Delay initializing monaco editor in ms | `number` | `0` |
6264

6365
|
6466
| `[originalEditable]` | Whether the original editor is editable | `boolean` | `false` |

‎docs/@ng-catbee/monaco-editor/intro.md‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ pagination_prev: null
77

88
## @ng-catbee/monaco-editor – Angular Monaco Editor Integration
99

10-
> A modern Angular library that seamlessly integrates the Monaco Editor, offering fully support for both **single** and **diff** editors — fully compatible with Reactive Forms, Template-driven Forms, and custom data models.
10+
> A modern Angular library that seamlessly integrates the Monaco Editor, offering full support for both **single** and **diff** editors — fully compatible with Reactive Forms, Template-driven Forms, and Signal Forms.
1111
1212
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', margin: '1rem 0', }}>
1313
<img src="https://img.shields.io/badge/build-passing-brightgreen" alt="Build Status" />
@@ -27,19 +27,27 @@ pagination_prev: null
2727

2828
## 📦 Demo
2929

30-
- [Stackblitz](https://stackblitz.com/edit/ng-catbee-monaco-editor?file=src%2Fapp%2Fapp.component.ts)
31-
- [Codesandbox](https://codesandbox.io/p/sandbox/ng-catbee-monaco-editor-txmm59?file=%2Fsrc%2Fapp%2Fapp.component.ts)
30+
- [Stackblitz](https://stackblitz.com/edit/ng-catbee-monaco-editor-v21?file=src%2Fapp%2Fapp.component.ts)
31+
- [Codesandbox](https://codesandbox.io/p/devbox/ng-catbee-monaco-editor-forked-fs62z7?file=%2Fsrc%2Fapp%2Fapp.component.ts)
3232

3333
## ✨ Features
3434

3535
- 📝 **Single Editor**: Drop-in Monaco editor for Angular apps
3636
- 🔀 **Diff Editor**: Effortlessly compare code side-by-side
37-
- ⚙️ **Supports Reactive & Template-driven Forms**: (FormControl, ngModel)
37+
- ⚙️ **Supports Reactive, Template-driven & Signal Forms**: (FormControl, ngModel, Signal)
3838
- 🎨 **Customizable**: Language, theme, and editor settings
39-
- 💡 **Custom Model Binding**: ([model] input for flexibility)
4039
- 🎨 **Highly Configurable**: theme, language, layout, options
4140
- 🧠 **Full Type Safety**: with rich TypeScript definitions
4241

42+
## 🧩 Angular Compatibility
43+
44+
| Angular Version | Supported |
45+
| --------------- | ------------------------------------------------------------ |
46+
| `v17` and above | ✅ Fully supported |
47+
| `v20` & `v21` | ✅ v21 release fully supports both Angular 20 and Angular 21 |
48+
49+
This library is built and tested with Angular **20.3.0** and **21.x**, and supports all modern standalone-based Angular projects (v17+).
50+
4351
## 📜 License
4452

4553
MIT © Catbee Technologies (see the [LICENSE](/license/) file for the full text)

‎docs/@ng-catbee/monaco-editor/monaco-editor.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
id: usage
2+
id: monaco-editor
33
title: monaco-editor
44
slug: /@ng-catbee/monaco-editor/intro
55
---

‎docs/@ng-catbee/monaco-editor/types.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ Below are the key exported types and interfaces available in @ng-catbee/monaco-e
3535

3636
## Catbee-Specific Types
3737

38-
- **`CatbeeMonacoEditorModel`** — Model interface for the single editor component.
3938
- **`CatbeeMonacoDiffEditorModel`** — Model interface for the diff editor component.
4039
- **`CatbeeMonacoDiffEditorEvent`** — Event interface emitted by the diff editor component.
4140

‎docs/@ng-catbee/monaco-editor/usage/diff-editor.md‎

Lines changed: 63 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,35 +4,35 @@ title: Diff Editor
44
sidebar_position: 3
55
---
66

7-
## CatbeeMonacoDiffEditorComponent Example
7+
## CatbeeMonacoDiffEditor Example
88

99
### 1. Using [(ngModel)]
1010

1111
```ts
1212
import { Component } from '@angular/core';
13-
import { CatbeeMonacoDiffEditorComponent, MonacoDiffEditorOptions, CatbeeMonacoDiffEditorModel, CatbeeMonacoDiffEditorEvent } from '@ng-catbee/monaco-editor';
13+
import { CatbeeMonacoDiffEditor, MonacoDiffEditorOptions, CatbeeMonacoDiffEditorModel, CatbeeMonacoDiffEditorEvent } from '@ng-catbee/monaco-editor';
14+
import { FormsModule } from '@angular/forms';
1415

1516
@Component({
1617
selector: 'app-root',
17-
imports: [CatbeeMonacoDiffEditorComponent, FormsModule],
18+
imports: [CatbeeMonacoDiffEditor, FormsModule],
1819
template: `
1920
<ng-catbee-monaco-diff-editor
2021
[height]="'400px'"
2122
[width]="'100%'"
2223
[options]="options"
2324
[(ngModel)]="diffModel"
25+
[language]="'javascript'"
2426
(editorDiffUpdate)="onDiffUpdate($event)"
2527
[originalEditable]="false"
2628
[disabled]="false"
27-
[language]="'javascript'"
2829
/>
2930
`
3031
})
3132
export class AppComponent {
3233
options: MonacoDiffEditorOptions = {
3334
theme: 'vs-dark',
34-
automaticLayout: true,
35-
minimap: { enabled: false }
35+
automaticLayout: true
3636
};
3737

3838
diffModel: CatbeeMonacoDiffEditorModel = {
@@ -50,46 +50,91 @@ export class AppComponent {
5050

5151
```ts
5252
import { Component } from '@angular/core';
53-
import { CatbeeMonacoDiffEditorComponent, MonacoDiffEditorOptions } from '@ng-catbee/monaco-editor';
54-
import { ReactiveFormsModule } from '@angular/forms';
53+
import { CatbeeMonacoDiffEditor, MonacoDiffEditorOptions } from '@ng-catbee/monaco-editor';
54+
import { ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';
5555

5656
@Component({
5757
selector: 'app-root',
5858
standalone: true,
59-
imports: [CatbeeMonacoDiffEditorComponent, ReactiveFormsModule],
59+
imports: [CatbeeMonacoDiffEditor, ReactiveFormsModule],
6060
template: `
6161
<form [formGroup]="form">
62-
<ng-catbee-monaco-diff-editor formControlName="code" [language]="'javascript'" />
62+
<ng-catbee-monaco-diff-editor
63+
formControlName="code"
64+
[language]="'javascript'"
65+
[options]="options"
66+
/>
6367
</form>
6468
`
6569
})
6670
export class AppComponent {
71+
options: MonacoDiffEditorOptions = {
72+
theme: 'vs-dark',
73+
automaticLayout: true
74+
};
75+
6776
form = new FormGroup({
6877
code: new FormControl({
6978
original: 'function hello() {\n\talert("Hello, world!");\n}',
7079
modified: 'function hello() {\n\talert("");\n}'
7180
})
7281
});
82+
83+
constructor() {
84+
this.form.get('code')!.valueChanges.subscribe(value => {
85+
console.log('Reactive Form value changed:', value);
86+
});
87+
}
7388
}
7489
```
7590

76-
### 3. Using Custom Model
91+
### 3. Using Signal Forms
7792

7893
```ts
79-
import { Component } from '@angular/core';
80-
import { CatbeeMonacoDiffEditorComponent, MonacoDiffEditorOptions, CatbeeMonacoDiffEditorModel } from '@ng-catbee/monaco-editor';
94+
import { Component, effect, signal } from '@angular/core';
95+
import { Field, form, required, pattern } from '@angular/forms/signals';
96+
import { CatbeeMonacoDiffEditorV2, MonacoDiffEditorOptions, CatbeeMonacoDiffEditorModel } from '@ng-catbee/monaco-editor';
8197

8298
@Component({
8399
selector: 'app-root',
84-
imports: [CatbeeMonacoDiffEditorComponent],
100+
imports: [CatbeeMonacoDiffEditorV2, Field],
85101
template: `
86-
<ng-catbee-monaco-diff-editor [model]="model" />
102+
<ng-catbee-monaco-diff-editor-v2
103+
[height]="'400px'"
104+
[width]="'100%'"
105+
[options]="options"
106+
[field]="myForm"
107+
/>
87108
`
88109
})
89110
export class AppComponent {
90-
model: CatbeeMonacoDiffEditorModel = {
91-
original: `function hello() {\n console.log('Hello, world!');\n}`,
92-
modified: `function hello() {\n console.log('Hello, Catbee!');\n}`
111+
options: MonacoDiffEditorOptions = {
112+
theme: 'vs-dark',
113+
automaticLayout: true
93114
};
115+
116+
diffModel = signal<CatbeeMonacoDiffEditorModel>({
117+
original: 'function hello() {\n\talert("Hello, world!");\n}',
118+
modified: 'function hello() {\n\talert("");\n}'
119+
});
120+
121+
myForm = form(this.diffModel, (path) => {
122+
required(path.original, { message: 'Original code is required.' });
123+
required(path.modified, { message: 'Modified code is required.' });
124+
pattern(path.original, {
125+
pattern: /alert/,
126+
message: 'The code must contain an alert statement.'
127+
});
128+
pattern(path.modified, {
129+
pattern: /alert/,
130+
message: 'The code must contain an alert statement.'
131+
});
132+
});
133+
134+
constructor() {
135+
effect(() => {
136+
console.log('Signal Form value changed:', this.myForm().value());
137+
});
138+
}
94139
}
95140
```

0 commit comments

Comments
 (0)