|
| 1 | +# Monaco Editor control |
| 2 | + |
| 3 | +This control is a implementatiopn of Monaco Editor. |
| 4 | + |
| 5 | +Here is an example of the control: |
| 6 | + |
| 7 | + |
| 8 | + |
| 9 | +`MonacoEditor` dark theme: |
| 10 | + |
| 11 | + |
| 12 | + |
| 13 | + |
| 14 | +## How to use this control in your solutions |
| 15 | + |
| 16 | +- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency. |
| 17 | +- Import the control into your component: |
| 18 | + |
| 19 | +```TypeScript |
| 20 | +import { MonacoEditor } from "@pnp/spfx-controls-react/lib/MonacoEditor"; |
| 21 | +``` |
| 22 | + |
| 23 | +- Use the `MonacoEditor` control in your code as follows: |
| 24 | + |
| 25 | +```TypeScript |
| 26 | + <MonacoEditor value={defaultValue} |
| 27 | + showMiniMap={true} |
| 28 | + onValueChange={onValueChange} |
| 29 | + language={"javascript"}/> |
| 30 | +``` |
| 31 | + |
| 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 |
| 34 | + |
| 35 | +```TypeScript |
| 36 | + const onValueChange = React.useCallback((newValue: string, validationErrors: string[]): void => {console.log(newValue);} , []); |
| 37 | +``` |
| 38 | + |
| 39 | +## Implementation |
| 40 | + |
| 41 | +The `MonacoEditor` control can be configured with the following properties: |
| 42 | + |
| 43 | +| Property | Type | Required | Description | |
| 44 | +| ---- | ---- | ---- | ---- | |
| 45 | +| 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| |
| 49 | +| 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 | +| language |string | yes | editor code language, please see https://microsoft.github.io/monaco-editor/index.html for supported languages| |
| 51 | +| jsonDiagnosticsOptions |monaco.languages.json.DiagnosticsOptions | no | define options to JSON validation, please see https://microsoft.github.io/monaco-editor/index.html for more details | |
| 52 | +| jscriptDiagnosticsOptions | monaco.languages.typescript.DiagnosticsOptions | no | define options to javascript or typescript validation, please see https://microsoft.github.io/monaco-editor/index.html for more details | |
| 53 | + |
| 54 | + |
0 commit comments