Antlr Editor


See example into deployed Storybook

Usage

$3

``bash
yarn add antlr-editor antlr4ts monaco-editor react-monaco-editor
`

$3

`javascript
import React, { useState } from "react";
import { AntlrEditor } from "antlr-editor";
import * as tools from "my-antlr-lib";
import { getSuggestions } from "./custom-suggestions";

const Editor = ({}) => {
const [script, setScript] = useState("");
const [errors, setErros] = useState([]);
const customTools = { ...tools, getSuggestionsFromRange: getSuggestions };
return (
<>
script={script}
setScript={setScript}
languageVersion="my-language"
setErrors={setErrors}
variables={{}}
variableURLs={[]}
tools={customTools}
/>
{errors.length > 0 &&

export default Editor;
`

$3

| Name | Type | Default value |
| --------------- | :-------------: | :-----------: |
| script | string | - |
| setScript | Function | - |
| languageVersion | string | - |
| setErrors | Function | - |
| tools | Tools \* | - |
| theme | string | vs-dark |
| variables | Variables \* | { } |
| variableURLs | VariableURLs \* | [ ] |
| options | Options \* | {} |

See details about \* props below

$3

#### tools

tools has to be mainly antlr4 auto-generated Lexer & Parser.

| Name | Type | Default value |
| ----------------------- | :-----------: | :-----------: |
| id | string | - |
| initialRule | string | - |
| grammar | string | - |
| Lexer | Antlr4 Lexer | - |
| Parser | Antlr4 Parser | - |
| getSuggestionsFromRange | Function | () => [] |

Have a look to VTL 2.0 Antlr Tools for example.

#### variables

variables enable to pass an object to provide auto-suggestion.

The shape of this object is:

`json
const obj = {
"var1": {"type": "STRING", "role": "IDENTIFIER"},
"var2": {"type": "INTEGER", "role": "MEASURE"},
}
`

#### variableURLs

variableURLs enable to pass an array of string to fetch to provide auto-suggestion:

`json
["http://metadata/1", "http://metadata/2"]
`

The shape of each fetched resources has to be:

`json
[
{ "name": "var1", "type": "STRING", "role": "IDENTIFIER" },
{ "name": "var2", "type": "INTEGER", "role": "MEASURE" }
]
`

#### Options

The shape of options props has to be:

`json
{
"minimap": "Values: true | false - Default: true",
"theme": "Values: 'vs-dark' | 'vs-light - Default: 'vs-dark'",
"hideLines": "Values: true | false - Default: false",
"style": {
"cssProperty": "value",
...
// Style props are applied to editor container
}
}
``