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.