Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed minor typos and misleading instructions #1415

Merged
merged 1 commit into from
Jan 20, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 16 additions & 5 deletions docs/documentation/docs/controls/MonacoEditor.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Monaco Editor control

This control is a implementatiopn of Monaco Editor.
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).

Here is an example of the control:

Expand Down Expand Up @@ -30,22 +30,33 @@ import { MonacoEditor } from "@pnp/spfx-controls-react/lib/MonacoEditor";
```

- The `onValueChange` change event returns the upadated code and array with messages of errors on validation and can be implemented as follows:
**this validation is done only to JSON language

> This validation is only available for JSON language

Your `onValueChange` handler would follow a similar format to this:


```TypeScript
const onValueChange = (newValue: string, validationErrors: string[]): void => { console.log(newValue); };
```

Or, if using React Hooks:

```TypeScript
const onValueChange = React.useCallback((newValue: string, validationErrors: string[]): void => {console.log(newValue);} , []);
```


## Implementation

The `MonacoEditor` control can be configured with the following properties:

| Property | Type | Required | Description |
| ---- | ---- | ---- | ---- |
| value | string | yes | default content for editor |
| theme | string | no | theme used by editor , two themes are supported 'vs' and 'vs-dark', default 'vs' |
| readOnly | boolean | no | indecate if editor is in read only mode |
| showLineNumbers | boolean | no | editor show linenumber or not, default : yes|
| theme | string | no | theme used by editor, two themes are supported 'vs' and 'vs-dark', default 'vs' |
| readOnly | boolean | no | indicate if editor is in read-only mode |
| showLineNumbers | boolean | no | editor show line number or not, default : yes|
| onValueChange |(newValue:string, validationErrors:string[]) => void | no | function to get code changes, return an array with validation error in case of language is 'JSON' |
| language |string | yes | editor code language, please see https://microsoft.github.io/monaco-editor/index.html for supported languages|
| jsonDiagnosticsOptions |monaco.languages.json.DiagnosticsOptions | no | define options to JSON validation, please see https://microsoft.github.io/monaco-editor/index.html for more details |
Expand Down