[CodeMirror v6] Tidy Feature Works Inconsistently

[susan-t]

p5.js version

No response

What is your operating system?

Mac OS

Web browser and version

Chrome, Firefox

Actual Behavior

In the v6 editor, when tidying code in one file, it works as normal. However it inconsistently works when trying to tidy code in other files. Sometimes nothing is tidied and the feature breaks for all files and sometimes the feature causes all the code to become one big code block.

Screen.Recording.2026-04-22.at.1.36.02.PM.mov

Expected Behavior

On the regular p5.js site, the tidy feature works consistently.

Screen.Recording.2026-04-22.at.1.37.33.PM.mov

Steps to reproduce

Steps:

1. Open the v6 sandbox editor
2. Write some code that is formatted incorrectly into each file segment.
3. Try and tidy up each file.

Snippet:

// Paste your code here :)

[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.

[dimssu]

Happy to take this up!

[aadityasingh9601]

Hi @susan-t,

I am also facing the same issue.
The "Tidy Code" feature works only for the JavaScript file & not working at all for the HTML & CSS files.

OS -> Windows.
Web browser -> Brave & MS Edge

[dimssu]

Hi maintainers — I've root-caused this and a fix is ready. The bug is in the CM6 editor's state setup (client/modules/IDE/components/Editor/stateUtils.js): createNewFileState mutates a module-scoped extraKeymaps array by pushing a Shift-Mod-F tidy binding that closes over the current file's mode. Because the array is shared across every file's state, later-created files end up with multiple tidy handlers for the same shortcut (one per mode), so Cmd+Shift+F on e.g. a CSS file ends up running the JS-mode prettier first (throws or mangles) and then cascading through. The first file created tidies correctly; the rest don't. Fix is a minimal, local-array rework plus a regression test. Could I be assigned so I can open a PR? Targeting develop-codemirror-v6.

[Geethegreat]

Hi! I was able to reproduce the bug on the v6 sandbox at https://app-ted0c74.release.editor.p5js.org/ — tidy works fine on the JS file but behaves inconsistently on CSS and HTML files.
I found the root cause in stateUtils.js. extraKeymaps is a module-level array, and inside createNewFileState a new Shift-Mod-F entry is pushed into it each time a file state is created:
jsextraKeymaps.push({ key: `Shift-Mod-F`, run: (cmView) => tidyCodeWithPrettier(cmView, mode) });
Since CodeMirror fires the first matching keymap entry, the tidy function always runs with the first file's mode regardless of which file is currently active. So if JS loads first, Shift-Mod-F always tries to tidy as JavaScript even when you're in CSS or HTML.
I think the fix is to create a local tidyKeymap inside createNewFileState instead of pushing to the shared extraKeymaps.

[Geethegreat]

Great fix @dimssu! I had identified the same root cause,the module-level extraKeymaps mutation closing over each file's mode. Glad to see it resolved! 🙂