Create a separate UI to adjust custom language's editor

[praisethemoon]

A proof of concept has been made to extract rule literals, and highlight them separately.

The extraction method can be further improved as it possibly cannot capture all keywords. It only works on rules which have literals as alternative, direct values.

Here I present 2 cases, one where this approach will work and another where it wont:

Case 1:

Register 
  = "r1"
  / "r2"
  / "r3"
  / "r4"
  / "r5"

In this example, all rules will be able to be highlighted with one common colour.

Case 2:

Struct_type
  = "struct" _ "{" _  fields:Struct_attributes _ "}" {return {type: "struct_type", fields}}

Literal struct will not be highlighted.

How this works:

This is all done thanks to the clean AST from peggy:

const generateTokensFromRules = (ast: peggy.ast.Grammar) => {
    function random_rgba() {
        var o = Math.round, r = Math.random, s = 255;
        return 'rgba(' + o(r()*s) + ',' + o(r()*s) + ',' + o(r()*s) + ',' + r().toFixed(1) + ')';
    }

    /**
     * We try to save old colors
     * Assign new colors to new rules
     */
    const old_testCodeTokenColorsState = testCodeTokenColorsState.get()
    const old_colormap: any = {}

    old_testCodeTokenColorsState.forEach((e, i) => {
        old_colormap[e.name] = e.color
    })

    const tokensPerRules = ast.rules.map((e, i) => (
        {
            name: e.name,
            tokens: e.expression.type != "choice"?([] as string[]):e.expression.alternatives.map((f, j) => f.type == "literal"?f.value:"").filter((f, j) => f != ""),
            color: old_colormap[e.name] != null?old_colormap[e.name]:Math.floor(Math.random()*16777215).toString(16)
        }
    )).filter((e, j) => e.tokens.length > 0)

    testCodeTokenColorsState.set(tokensPerRules)
}

I tried to avoid iterating through all the literals because they contain symbols like ->, [,] etc