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
    }
}