Syntax highlighting still not working for private fields (supported in ES2022)

[fabiopettinati]

The editor doesn't highlight property fields correctly. Upon encountering any # symbol it displays the rest of the line in red color.

@josephh in discourse.processing.org identified the issue as being related to the use of CodeMirror in p5.web.editor. The issue in CodeMirror got fixed back in 2020 and perhaps the p5 editor is not using the mrs up-to-date version.

The code below will show the problem when opened in the editor. The lines ending in // <---- issue here are displayed in red starting with the # symbol.

function setup() {
class Acme {
#bar; // <---- issue here
constructor(v) { this.#bar = v; } // <---- issue here
get foo() { return this.#bar; } // <---- issue here
set foo(v) { this.#bar = v; } // <---- issue here
}

let acme = new Acme(7);
console.log(acme.foo); // expected output: 7
acme.foo = 5; // #bar now = 5
console.log(acme.foo); // expected output: 5
}

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[Harshit-7373]

@fabiopettinati @raclim
This issue is likely due to an outdated version of CodeMirror, which does not correctly handle the # symbol for private class fields introduced in modern JavaScript (ES2021).

We need to update their CodeMirror dependency to a more recent version that supports the latest JavaScript syntax.