Skip to content

Commit 32486ca

Browse files
Apply suggestions from code review
Co-authored-by: Vladimir Abadzhev <vladimira@devexpress.com>
1 parent 0e34f8f commit 32486ca

3 files changed

Lines changed: 24 additions & 29 deletions

File tree

CS/CodeEditor/Docs/CodeEditor.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
# CodeEditor
22

3-
WPF control that embeds Monaco Editor (VS Code editor) using WebView2 for code editing with syntax highlighting.
3+
WPF code editor control with syntax highlighting and other modern code display/navigation capabilities. This control embeds Monaco Editor (Visual Studio Code editor) using WebView2.
44

55
## Properties
66

77
| Name | Type | Description |
88
| ---- | ---- | ----------- |
9-
| `Text` | `string` | Gets or sets editor text. This is a dependency property. Supports two-way binding. |
9+
| `Text` | `string` | Gets or sets the editor text. This is a dependency property. Supports two-way binding. |
1010
| `EditorLanguage` | `string` | Gets or sets the programming language for syntax highlighting. This is a dependency property. Default: `"csharp"` |
1111
| `ReadOnly` | `bool` | Gets or sets whether the editor is read-only. This is a dependency property. Default: `false` |
1212
| `IsModified` | `bool` | Gets whether the content has been modified since the last save. This is a readonly dependency property. |
@@ -39,7 +39,7 @@ WPF control that embeds Monaco Editor (VS Code editor) using WebView2 for code e
3939
| Name | Description |
4040
| ---- | ----------- |
4141
| `GetAvailableLanguagesAsync(CancellationToken)` | Asynchronously retrieves a list of available programming language IDs. |
42-
| `RegisterLanguage(LanguageDescriptor)` | Registers a custom programming language with Monarch tokenizer. |
42+
| `RegisterLanguage(LanguageDescriptor)` | Registers a custom programming language with a Monarch tokenizer. |
4343
| `RegisterTheme(MonacoTheme)` | Registers a custom Monaco Editor theme. |
4444
| `MarkAsSaved()` | Resets the `IsModified` property to `false`. |
4545
| `Dispose()` | Releases WebView2 resources. |

CS/CodeEditor/Docs/CodeEditorService.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,4 @@ public interface ICodeEditorService {
1818
| ---- | ----------- |
1919
| `MarkAsSaved()` | Resets the `IsModified` flag of the associated `CodeEditor` to `false`. |
2020
| `GetLanguagesAsync(CancellationToken)` | Asynchronously retrieves a collection of available programming language IDs from the associated `CodeEditor`. |
21-
| `RegisterLanguage(LanguageDescriptor)` | Registers a custom programming language with Monarch tokenizer in the associated `CodeEditor`. |
21+
| `RegisterLanguage(LanguageDescriptor)` | Registers a custom programming language with a Monarch tokenizer in the associated `CodeEditor`. |

CS/CodeEditor/Docs/Overview.md

Lines changed: 20 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,25 @@
11
## Introduction
22

3-
`CodeEditor` is a WPF control that embeds the [Monaco Editor](https://microsoft.github.io/monaco-editor/) (the editor engine used by Visual Studio Code) using [Microsoft WebView2](https://learn.microsoft.com/en-us/microsoft-edge/webview2/).
3+
This DevExpress WPF example can display code using a specially-designed `CodeEditor` control. This control is a wrapper around the [Monaco Editor](https://microsoft.github.io/monaco-editor/) used by Visual Studio Code. This advanced editor supports numerous modern code editing capabilities such as syntax highlighting, region folding, minimap, theming, and custom language support. Since **Monaco Editor** is a web control, our WPF wrapper uses [Microsoft WebView2](https://learn.microsoft.com/en-us/microsoft-edge/webview2/) to display it.
44

5-
The editor includes modern code editing capabilities — syntax highlighting, folding, minimap, theming, and custom languages — within WPF applications.
5+
66

7-
The primary editing surface is the `CodeEditor` control, which exposes a focused, WPF-friendly API.
7+
88

9-
The library also includes:
9+
Our `CodeEditor` control implementation uses the following helper classes:
1010

1111
- `ThemeBehavior` - integrates Monaco with DevExpress themes.
1212
- `CodeEditorService` - a lightweight service for cases where direct interaction with the control is not sufficient.
1313

1414
The control is designed as a **state-driven wrapper**: WPF owns the editor state through dependency properties, and Monaco reflects that state while propagating changes back to WPF in an MVVM-friendly way.
1515

16-
> **Supported Monaco version:** 0.55.1
17-
> The control is built and validated against this specific release.
1816

1917
## Prerequisites
2018

21-
- Windows with [Microsoft Edge WebView2 Runtime](https://learn.microsoft.com/en-us/microsoft-edge/webview2/concepts/distribution)
22-
- DevExpress WPF **26.1** (or newer compatible version)
23-
24-
The required .NET version depends on the DevExpress WPF version in use.
25-
See DevExpress documentation:
26-
[WPF Controls → Prerequisites → .NET / .NET Core](https://docs.devexpress.com/WPF/8091/prerequisites#netnet-core)
19+
- DevExpress WPF v26.1 (or newer compatible version)
20+
- Monaco Editor v0.55.1 (the control is built and validated against this specific release)
21+
- .NET version compatible with DevExpress WPF version you use: [WPF Controls → Prerequisites → .NET / .NET Core](https://docs.devexpress.com/WPF/8091/prerequisites#netnet-core)
22+
- Windows with [Microsoft Edge WebView2 Runtime](https://learn.microsoft.com/en-us/microsoft-edge/webview2/concepts/distribution)
2723

2824
> The `CodeEditor` project must be compiled against the same DevExpress WPF version that is used in the consuming application.
2925
@@ -95,21 +91,21 @@ The editor content is automatically synchronized with the bound property.
9591

9692
### Built-in Monaco Themes
9793

98-
You can use any of the standard Monaco themes:
94+
You can use standard Monaco themes:
9995

10096
```csharp
10197
editor.ThemeName = "vs";
10298
editor.ThemeName = "vs-dark";
10399
editor.ThemeName = "hc-black";
104100
```
105101

106-
These themes are provided by Monaco.
102+
107103

108104
### DevExpress Theme Integration
109105

110-
By default, `CodeEditor` does not automatically track DevExpress theme changes.
106+
111107

112-
To synchronize Monaco with the active DevExpress theme, attach `ThemeBehavior`:
108+
To synchronize a Monaco Editor with the active DevExpress theme, attach a `ThemeBehavior`:
113109

114110
```xml
115111
xmlns:ce="clr-namespace:CodeEditor;assembly=CodeEditor"
@@ -129,14 +125,14 @@ xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
129125
</ce:CodeEditor>
130126
```
131127

132-
`ThemeBehavior`:
128+
`ThemeBehavior` synchronizes DevExpress themes and Monaco Editor appearance in the following manner:
133129

134-
- Detects the current DevExpress theme
130+
- Detects the current DevExpress theme at startup and each time the theme changes
135131
- Resolves Light / Dark / High Contrast base
136132
- Registers and applies a corresponding Monaco theme
137133
- Optionally maps DevExpress palette colors to Monaco color keys via the `ApplyDevExpressColors` property
138134

139-
The theme is updated automatically when the DevExpress theme changes.
135+
140136

141137
### Custom Themes
142138

@@ -164,7 +160,7 @@ For a complete list of commonly used Monaco theme color keys, see the official V
164160

165161
In addition to UI colors, Monaco themes support token-level styling via `Rules`.
166162

167-
Rules define how specific token types (such as `keyword`, `comment`, `string`, and other) are rendered.
163+
Rules define how the editor renders specific token types such as `keyword`, `comment`, `string`, and others.
168164

169165
You can use `Rules` to override the appearance of existing token types or to define styling for custom tokens introduced by a custom language definition.
170166

@@ -249,7 +245,7 @@ editor.EditorLanguage = "mylang";
249245

250246
### Monarch Definition
251247

252-
The `Monarch` property defines the syntax highlighting rules.
248+
The `Monarch` property defines syntax highlighting rules.
253249

254250
The property must contain a valid Monaco Monarch tokenizer definition specified as a JavaScript object literal.
255251

@@ -261,11 +257,11 @@ All standard Monarch features are supported:
261257
- Rule objects
262258
- Includes and state transitions
263259

264-
Refer to the following topic for additional information: [Monarch Documentation](https://microsoft.github.io/monaco-editor/monarch.html)
260+
Refer to the following help topic for additional information: [Monarch Documentation](https://microsoft.github.io/monaco-editor/monarch.html)
265261

266262
### Language Configuration
267263

268-
The optional `Configuration` property defines editor behavior such as:
264+
The optional `Configuration` property defines editor behavior attributes such as:
269265

270266
- Line and block comments
271267
- Brackets
@@ -274,8 +270,7 @@ The optional `Configuration` property defines editor behavior such as:
274270

275271
The configuration must also be provided as a JavaScript object literal.
276272

277-
For language configuration details (brackets, comments, auto-closing pairs, etc.),
278-
refer to the following topic: [Language Configuration Guide](https://code.visualstudio.com/api/language-extensions/language-configuration-guide)
273+
For additional information, refer to the following help topic: [Language Configuration Guide](https://code.visualstudio.com/api/language-extensions/language-configuration-guide)
279274

280275
## See also
281276

0 commit comments

Comments
 (0)