use-arcgis-monaco-editor v0.1.8
ArcGIS Monaco Editor
Custom hook for using Microsofts Monaco Editor in React applications and customized functionality to integrate with ArcGIS items.
Documentation
- Full component docs can be found at: https://arcgis-monaco-editor.netlify.app/
- JSON Schema Docs: https://json-schema.org/understanding-json-schema/reference/index.html
Installation
Import Syntax
Usage
Input
ref options | Name | Type | Default | Description | | :--------------- | :---------------------- | :------ | :------------------------------------------------------------------------------------------------- | | theme | enum: 'light' | 'dark' | 'light' | Default themes of monaco. | | value | string | | The editor value | | language | enum: ... | | All languages that are supported by monaco-editor | | diffEditor | enum: 'true' | 'false' | 'false' | Set if using monaco diffEditor | | modifiedValue | string | | The editor value for modified code pane | | modifiedLanguage | enum: ... | | All languages that are supported by monaco-editor | | schemaType | enum: 'arcgis-item' | | Sets schema of the editor providing code completion, warnings, hover providers for item types, and marking readOnly values based on arcgis item type schemas | | customSchema | object | | JSON Schema Object to set the editor schema | | monacoConstructionOptions | object | {} | IStandaloneEditorConstructionOptions | | monacoOverrideServices | object | {} | IEditorOverrideServices |
Output
| Name | Type | Default | Description |
|---|---|---|---|
| isEditorReady | boolean | Determines if monaco has been initialized and editor created. | |
| editor | ref | editor instance | |
| monaco | ref | monaco instance | |
| warningMarkers | array | [] | Array of monaco warning markers. Auto updated. |
| errorMarkers | array | [] | Array of monaco error markers. Auto updated. |
| modalValue | string | Value of the contents of the modal in string form. Auto updated. |
Contributing
To get started, go ahead and fork this repo. Once you've done that, there are a few things you should know before getting started.
Before you Start
npm install
NPM tasks
To run Storybook
npm start
Use Storybook as the primary development/test environment.
To build for production
npm run build
Submitting a Pull Request
Once you're ready to submit your changes, submit a pull request into the master branch. Often it's a good idea to open an issue to discuss your proposed changes before making a PR, but you're welcome to submit a PR without an issue - just be sure to include a good description of your changes.