processing / p5.js-web-editor

The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything.
https://editor.p5js.org
GNU Lesser General Public License v2.1
1.42k stars 1.35k forks source link

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

Open fabiopettinati opened 2 years ago

fabiopettinati commented 2 years ago

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[bot] commented 2 years ago

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.