Antlr Editor
See example into deployed Storybook
Usage
Install
yarn add antlr-editor antlr4ts monaco-editor react-monaco-editor
AntlrEditor
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 (
<>
<AntlrEditor
script={script}
setScript={setScript}
languageVersion="my-language"
setErrors={setErrors}
variables={{}}
variableURLs={[]}
tools={customTools}
/>
{errors.length > 0 && <div>{`Errors: ${errors.join(" - ")}`}</div>}
</>
);
};
export default Editor;
AntlrEditor Props
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
Props
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:
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:
["http://metadata/1", "http://metadata/2"]
The shape of each fetched resources has to be:
[
{ "name": "var1", "type": "STRING", "role": "IDENTIFIER" },
{ "name": "var2", "type": "INTEGER", "role": "MEASURE" }
]
Options
The shape of options
props has to be:
{
"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
}
}