diff --git a/docs/documentation/docs/controls/MonacoEditor.md b/docs/documentation/docs/controls/MonacoEditor.md index 3aaf6257e..10900ef0b 100644 --- a/docs/documentation/docs/controls/MonacoEditor.md +++ b/docs/documentation/docs/controls/MonacoEditor.md @@ -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: @@ -30,12 +30,23 @@ 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: @@ -43,9 +54,9 @@ 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 |