|
1 | 1 | # Monaco Editor control
|
2 | 2 |
|
3 |
| -This control is a implementatiopn of Monaco Editor. |
| 3 | +This control is an implementation of the Monaco Editor. The Monaco Editor is the code editor that powers [VS Code](https://github.com/microsoft/vscode). |
4 | 4 |
|
5 | 5 | Here is an example of the control:
|
6 | 6 |
|
@@ -30,22 +30,33 @@ import { MonacoEditor } from "@pnp/spfx-controls-react/lib/MonacoEditor";
|
30 | 30 | ```
|
31 | 31 |
|
32 | 32 | - The `onValueChange` change event returns the upadated code and array with messages of errors on validation and can be implemented as follows:
|
33 |
| - **this validation is done only to JSON language |
| 33 | + |
| 34 | +> This validation is only available for JSON language |
| 35 | +
|
| 36 | +Your `onValueChange` handler would follow a similar format to this: |
| 37 | + |
| 38 | + |
| 39 | +```TypeScript |
| 40 | + const onValueChange = (newValue: string, validationErrors: string[]): void => { console.log(newValue); }; |
| 41 | +``` |
| 42 | + |
| 43 | +Or, if using React Hooks: |
34 | 44 |
|
35 | 45 | ```TypeScript
|
36 | 46 | const onValueChange = React.useCallback((newValue: string, validationErrors: string[]): void => {console.log(newValue);} , []);
|
37 | 47 | ```
|
38 | 48 |
|
| 49 | + |
39 | 50 | ## Implementation
|
40 | 51 |
|
41 | 52 | The `MonacoEditor` control can be configured with the following properties:
|
42 | 53 |
|
43 | 54 | | Property | Type | Required | Description |
|
44 | 55 | | ---- | ---- | ---- | ---- |
|
45 | 56 | | value | string | yes | default content for editor |
|
46 |
| -| theme | string | no | theme used by editor , two themes are supported 'vs' and 'vs-dark', default 'vs' | |
47 |
| -| readOnly | boolean | no | indecate if editor is in read only mode | |
48 |
| -| showLineNumbers | boolean | no | editor show linenumber or not, default : yes| |
| 57 | +| theme | string | no | theme used by editor, two themes are supported 'vs' and 'vs-dark', default 'vs' | |
| 58 | +| readOnly | boolean | no | indicate if editor is in read-only mode | |
| 59 | +| showLineNumbers | boolean | no | editor show line number or not, default : yes| |
49 | 60 | | onValueChange |(newValue:string, validationErrors:string[]) => void | no | function to get code changes, return an array with validation error in case of language is 'JSON' |
|
50 | 61 | | language |string | yes | editor code language, please see https://microsoft.github.io/monaco-editor/index.html for supported languages|
|
51 | 62 | | jsonDiagnosticsOptions |monaco.languages.json.DiagnosticsOptions | no | define options to JSON validation, please see https://microsoft.github.io/monaco-editor/index.html for more details |
|
|
0 commit comments