fix: restore CM6 editor visual consistency#4144

[parthjadhao01]

Issue:

Fixes #4144

The CM6 branch had three visual inconsistencies compared to the current CM5 editor: temporary layout compression during font-size changes, missing fold gutter styling, and the fold collapsed placeholder not matching CM5's appearance.

Demo:

Befor :

Screen.Recording.2026-06-03.at.5.24.43.PM.mov

After :

Screen.Recording.2026-06-03.at.5.27.13.PM.mov

Changes:

• stateUtils.js — Added fontSizeCpt Compartment using EditorView.theme() so font-size changes go through CM6's state system instead of direct DOM manipulation, preventing layout compression. Added createFoldMarker using the official foldGutter({ markerDOM }) API to render fold arrows using the same SVG icons as CM5 (codefold-icon-open / codefold-icon-closed). Used window.document explicitly to avoid shadowing by the document parameter in createNewFileState.
• codemirror.js — Wired fontSizeCpt reconfigure on font-size preference change, following the same Compartment pattern as lineNumbersCpt, lineWrappingCpt etc.
• _editor.scss — Added fold gutter styles translated from CM5 (.CodeMirror-foldgutter-* → .cm-foldGutter, .cm-fold-open, .cm-fold-closed) and fold placeholder styles (.CodeMirror-foldmarker → .cm-foldPlaceholder) using the same theme variables.

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 #4144
• meets the standards outlined in the accessibility guidelines

[khanniie]

Looks super good! Appreciate the fix and fast turnaround!

[khanniie]

let's avoid using !important if possible. I think if you add enough specificity to the CSS it should be possible override it naturally

[parthjadhao01]

Done, removed the !important flags

[khanniie]

thank you so much!