Programming text editor joining curly braces

See more:

Javascript

Hi,

I'm working on writing my own JS, line-based programming text editor. Everything's going really well but I'm stuck on one feature, the graphical line you see in some editors which joins {} to form a code block. I've uploaded a screenshot of a hard-coded version linking lines 2-7 here[^].

What I'm having trouble with is figuring out which lines need to be linked. That is, parsing the code, picking out the {} and somehow deciding which ones form a pair.

This will have to deal with every possibility including erroneous ones, such as;

I'll only draw the graphic if the { and } are at the start of the line for now, implementing support for things like function x() { later on.

{
}
---
{

}
---
{
    {
}
---
{
    }
}
---
{
    {

    }
}
---
{
}

{
}

I'd just like some advice on the best approach please

What I have tried:

--------------------------------------------------------------------