Repository navigation
[CodeMirror v6] Tidy Feature Works Inconsistently #4093
Description
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:
- Open the v6 sandbox editor
- Write some code that is formatted incorrectly into each file segment.
- Try and tidy up each file.
Snippet:
// Paste your code here :)
Activity
welcome commentedon Apr 22, 2026
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 commentedon Apr 23, 2026
Happy to take this up!
aadityasingh9601 commentedon Apr 23, 2026
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 commentedon Apr 23, 2026
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):createNewFileStatemutates a module-scopedextraKeymapsarray by pushing aShift-Mod-Ftidy 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), soCmd+Shift+Fon 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? Targetingdevelop-codemirror-v6.Geethegreat commentedon Apr 24, 2026
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.
yugalkaushik commentedon May 9, 2026
https://github.com/user-attachments/assets/38334c3c-aaab-4667-9a35-658800d61a42
Hi, I tried replicating the issue on my end, but everything seems to be working as expected. The tidy code functionality itself works perfectly fine for me, although I was not able to trigger it using the Ctrl + Shift + F shortcut key.
@susan-t could you please check again and let us know if you are still facing the issue?
susan-t commentedon May 9, 2026
@yugalkaushik I was only facing the issue through the v6 sandbox editor!! However, since the website is not up anymore, I'm not sure if it's an issue any longer!
yugalkaushik commentedon May 11, 2026
https://app-tedc8aa.release.editor.p5js.org/ So this is the new link for the v6 editor. I tested it out and the issue still persists for non-JS files. I'll look into it.
yugalkaushik commentedon May 13, 2026
@skyash-dev Yeah, it works perfectly fine locally. I just wanted to check whether @dimssu was able to replicate the issue since he created a pull request for the fix.
skyyash commentedon May 14, 2026
unable to reproduce this locally! (i accidentally deleted the previous comment:/)
fix: scope CM6 Tidy keymap per file state (#4093)
Merge pull request #4097 from dimssu/fix/issue-4093-tidy-cm6
khanniie commentedon May 29, 2026
Hi everyone! Appreciate the testing and really glad we caught this! I just merged in @dimssu 's fix, would you be able to verify if the issue is now fixed on your ends? If so I will resolve the issue.
skyyash commentedon May 30, 2026
hi @khanniie!
i can still reproduce this on the sandbox environment and whats interesting to me is that it is inconsistent only when triggered from edit -> tidy code and works just fine when triggered through ctrl+shift+f...
recording.mp4
also i cant reproduce this locally on the cm6 branch.
recording.mp4
yugalkaushik commentedon May 30, 2026
@skyash-dev I agree with you as I’m also unable to replicate the issue locally and on my end, tidy is not behaving as expected either.
preview-cm6.mp4
khanniie commentedon May 30, 2026
@yugalkaushik @skyash-dev Thank you both for the testing and quick response! I took a second pass and I think I've fixed it for myself on staging and locally, would you be able to check to see if it's fixed on your ends as well?
skyyash commentedon May 31, 2026
@khanniie yes it's fixed, kudos!
curious to know, what was the solution?
khanniie commentedon May 31, 2026
@skyash-dev thank you!! :D haha I'm still wrapping my head around it myself but I believe the header bar IDE file that was calling tidyCode was holding onto a stale reference of the function (so it was pointing towards the wrong file name and type). The fix was to change the click={cmRef.current.tidyCode} to click={()=>cmRef.current.tidyCode()}