# P5.js web editor doesn't like private fields

**URL:** <https://discourse.processing.org/t/p5-js-web-editor-doesnt-like-private-fields/37430>\
**Category:** p5.js\
**Created:** [June 9, 2022, 6:59pm UTC](https://discourse.processing.org/t/p5-js-web-editor-doesnt-like-private-fields/37430 "2022-06-09T18:59:25Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [June 9, 2022, 8:57pm UTC](https://discourse.processing.org/t/p5-js-web-editor-doesnt-like-private-fields/37430/3 "2022-06-09T20:57:54Z")

</div>

Hi @fabiopettinati,

Looking at the [`p5-web-editor`](https://github.com/processing/p5.js-web-editor/blob/9265277e01700af0415c329522b6ba6c006629e9/client/modules/IDE/components/Editor.jsx#L371) code, I found that they use [CodeMirror](https://codemirror.net/) which is a code editor written in JavaScript.

For the private fields, looks like the issue has already been solved in 2020 on their GitHub repository:

> <https://github.com/codemirror/codemirror5/issues/6249>
>
> Private fields (https://v8.dev/features/class-fields) use a \`#\` at the start of …the field declaration in a class. CodeMirror currently doesn't highlight these private fields as fields and its syntax highlighting marks the whole line as red. Example
> 
> \`\`\`js
> class Project {
> #id;
>   
> constructor(name) {
> this.name = name;
> this.#id = Math.random();
> }
>   
> get id() {
> return this.#id;
> }
> 
> #setId(id) {
> this.#id = id;
> }
> 
> aMethod() {}
> 
> static fromStore(id, name) {
> const proj = new Project(name);
> proj.#setId(id);
> proj.aMethod();
> return proj; 
> }
> }
> \`\`\`
> 
> Current syntax highlighting:
> 
> \<img width="318" alt="Screenshot 2020-04-27 at 11 01 05" src="https://user-images.githubusercontent.com/5948271/80359893-6cbc0000-8876-11ea-966b-ac0dcecffbbf.png"\>
> 
> (Code was pasted on https://codemirror.net/mode/javascript/index.html)
> 
> The expected syntax highlighting here is that private fields have the same color as normal fields (e.g. \`name\` in this example).
> 
> Downstream issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1073903

The thing is that `p5-web-editor` uses `codemirror ^5.62.0` which may not be up to date with the latest [package](https://www.npmjs.com/package/codemirror).

As @mnse said, you can open an issue on the p5 editor repository. 😉

---

_[View the full topic](https://discourse.processing.org/t/p5-js-web-editor-doesnt-like-private-fields/37430)._