Highlight p5 keywords for the sketch's p5.js version

[samchinmaya]

Issue:

Fixes #3163

Syntax highlighting used a single client/utils/p5-keywords.js, which was last regenerated in June 2024. Checked against the current p5.js reference, it was missing 110 v2 keywords (e.g. clamp, bezierOrder, fontWidth, OKLCH) and still highlighted 40 names that were removed in v2 (e.g. preload, curveVertex). Autocomplete already uses separate, versioned data (p5-hinter-v1.js / p5-hinter-v2.js) selected by the sketch's p5.js version, but highlighting didn't.

Demo:

A new (p5.js 2.x) sketch:

Before: preload is still highlighted although it was removed in v2, while the new clamp and bezierOrder are not.

After: clamp and bezierOrder are highlighted, and preload is not.

Changes:

• Highlight keywords for the sketch's p5.js version. The highlight keyword sets are now built from the same p5-hinter-v1 / p5-hinter-v2 data that autocomplete uses, and chosen by p5Version (falling back to v1 when the version is unknown).
• Remove the separate keyword list. p5-keywords.js, its update-syntax-highlighting script and the unused CodeMirror 5 mode (p5-javascript.js) that imported it are removed, so there is only one source of keyword data to keep updated.
• Regenerate p5-hinter-v2.js from the current p5.js reference.
• Add a weekly workflow (.github/workflows/update-p5-hinter.yml) that runs npm run update-p5-hinter and opens a PR when the reference has changed, so the data no longer goes stale. It only runs on processing/p5.js-web-editor and can also be triggered manually.
• Tests in p5JavaScript.test.js for v1 keywords in a v1 sketch, v2 keywords in a v2 sketch, and the v1 fallback.

Difference from my proposal on the issue: I originally suggested generating a separate p5-keywords file per version. Reusing the existing hinter data instead avoids a second generated file and generator script. Happy to change this if you'd prefer the original approach.

Needed from maintainers for the workflow: for the workflow to open PRs, the repository setting Settings → Actions → General → "Allow GitHub Actions to create and approve pull requests" has to be enabled.

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• has no typecheck errors (npm run typecheck)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123
• meets the standards outlined in the accessibility guidelines

Note on tests: the new tests in p5JavaScript.test.js pass, as do 64 of 65 suites locally. The one failure, server/models/__test__/user.test.ts, is unrelated to this PR: in my local Docker setup (arm64), mongodb-memory-server can't download a MongoDB binary. That suite passes in GitHub CI.

[welcome]

🎉 Thanks for opening this pull request! Please check out our contributing guidelines if you haven't already.

[samchinmaya]

Hi @raclim @lindapaiste, I asked to work on #3163 on Sep 28 and opened this before being assigned. Sorry if that was jumping ahead; I'm happy to close it if you'd rather assign the issue to someone else.

This follows @raclim's feedback on #3336 that the keywords should be updated periodically rather than on every commit: the workflow here runs weekly (and can be triggered manually), and opens a PR only when the p5.js reference has changed.

If it's easier to review, I can split the weekly workflow into a separate PR and keep this one to the syntax highlighting fix.

[khanniie]

hi @samchinmaya thank you for the PR! This looks like a good idea, I'll take a closer look in the next couple of days. I'm not sure about adding a workflow but we should definitely update the list for v2.

[samchinmaya]

Sure I appreciate your time to have a look into this