Replace Monaco with CodeMirror

[silverwind]

• Replace monaco-editor with CodeMirror 6
• Add --color-syntax-* CSS variables for all syntax token types, shared by CodeMirror, Chroma and EasyMDE
• Consolidate chroma CSS into a single theme-independent file (modules/chroma.css)
• Syntax colors in the code editor now match the code view and light/dark themes
• Code editor is now 12px instead of 14px font size to match code view and GitHub
• Use a global style for kbd elements
• When editing existing files, focus will be on codemirror instead of filename input.
• Keyboard shortcuts are roughtly the same as VSCode
• Add a "Find" button, useful for mobile
• Add context menu similar to Monaco
• Add a command palette (Ctrl/Cmd+Shift+P or F1) or via button
• Add clickable URLs via Ctrl/Cmd+click
• Add e2e test for the code editor
• Remove window.codeEditors global
• The main missing Monaco features are hover types and semantic rename but these were not fully working because monaco operated only on single files and only for JS/TS/HTML/CSS/JSON.

	Monaco (main)	CodeMirror (cm)	Delta
Build time	7.8s	5.3s	-32%
JS output	25 MB	14 MB	-44%
CSS output	1.2 MB	1012 KB	-17%
Total (no maps)	23.3 MB	12.1 MB	-48%

Fixes: #36311
Fixes: #14776
Fixes: #12171

[Copilot]

Pull request overview

This PR replaces the existing Monaco-based repository code editor with a CodeMirror 6 implementation to improve mobile usability and reduce frontend build/bundle size, while also aligning syntax highlighting across the code editor and EasyMDE via shared CSS variables.

Changes:

• Remove Monaco (and its webpack worker/plugin setup) and introduce a new CodeMirror 6 editor module with matching CSS.
• Add shared --color-syntax-* theme variables and update EasyMDE highlighting to use them.
• Add a Playwright e2e test to verify editor-to-textarea synchronization.

Reviewed changes

Copilot reviewed 20 out of 22 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
webpack.config.ts	Removes Monaco webpack plugin/worker configuration.
web_src/js/modules/codeeditor.ts	New CodeMirror 6 editor implementation (creation, language detection, option handling).
web_src/js/features/repo-editor.ts	Switches repo editor to the new CodeMirror module and updates value-setting logic.
web_src/js/features/repo-settings.ts	Switches git hook editor to the new CodeMirror module.
web_src/js/globals.d.ts	Clarifies exported window.codeEditors contents for customization.
web_src/js/bootstrap.ts / web_src/js/bootstrap.test.ts	Removes Monaco-specific ignored-error logic and its unit test.
web_src/css/themes/theme-gitea-{light,dark}.css	Adds new --color-syntax-* variables for highlighting.
web_src/css/modules/codeeditor.css	New CodeMirror-focused styling for the code editor UI.
web_src/css/index.css	Switches code editor CSS import from features/ to modules/.
web_src/css/easymde.css	Updates EasyMDE token colors to use shared --color-syntax-* variables.
web_src/css/features/codeeditor.css	Removes Monaco-specific styling.
web_src/css/codemirror/{light,dark}.css	Removes legacy CodeMirror theme overrides/imports.
templates/repo/editor/{edit,patch}.tmpl	Adds a textarea placeholder used by the new CodeMirror editor.
options/locale/locale_en-US.json	Adds translation for the new placeholder string.
tests/e2e/codeeditor.test.ts	Adds e2e coverage for editor-to-textarea updates.
package.json / pnpm-lock.yaml	Removes Monaco deps and adds CodeMirror 6 + Lezer highlight deps.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[silverwind]

One line, select all + highlight

Fixed in 3734024.

[silverwind]

many styling fixes done, here is the search panel now:

[bircni]

trim_trailing_whitespace is now only done in backend - previously I think it was also done in frontend?

[silverwind]

trim_trailing_whitespace is now only done in backend - previously I think it was also done in frontend?

CodeMirror does not have such a feature currently, but maybe it can be re-implemented.

[silverwind]

CodeMirror does not have such a feature currently, but maybe it can be re-implemented.

Implemented in 8f09499.

[bircni]

CodeMirror does not have such a feature currently, but maybe it can be re-implemented.

Implemented in 8f09499.

Cool already saw it!! 😄

[silverwind]

Color unification done. Now light and dark use the same hue for all colors, just different lightness. Color scheme is roughtly based on dark theme, but did a number of tweaks. All colors pass WCAG AA.

Another notable change is that text in diff word highlights now uses monochrome text color, which ensures there can be no contrast problems any more.

[bircni]

When you're ready feel free to tag me

[silverwind]

It is ready for review. All monaco feature besides hover tooltips are implemented. Besides a few small tweaks, I don't expect any more major changes.

[bircni]

Could you update the description? it still states webpack

[lunny]

Could we disable the collapses? I think they’re always bothering me.

[silverwind]

Could you update the description? it still states webpack

I will benchmark size and speed again later.

Could we disable the collapses? I think they’re always bothering me.

Yes the fold chevrons are a bit visually distracting. I will probably make them only show when cursor hovers over that column, like in VSCode.

[silverwind]

All done:

• Fold chevrons only show on hover like in VSCode
• Fixed a rendering bug in chevrons
• Made editor loading sequence stable without content shifts
• Extracted a CSS variable for the selection color and made in brighter on dark

[bircni]

Code review for #36764 (by Claude Sonnet 4.6)

Issues to address before merging:

• Scoped DOM queries — document.querySelector('a[data-tab="preview"]') and similar selectors (already FIXMEd) should be scoped to the editor container to avoid matching unrelated elements when multiple editors exist
• Clipboard error handling — navigator.clipboard.readText() can throw on permission denial; wrap in try/catch
• Non-null assertions — querySelector('.js-code-find')! will throw if the element is absent; verify these are truly guaranteed or add guards
• JSONC detection — /(tsconfig|devcontainer|jsconfig)/i is a fragile hardcoded list; will need ongoing maintenance
• CSS missing fallbacks — var(--color-syntax-link) etc. have no fallback values; elements become invisible if a theme doesn't define them
• Brittle CSS selectors — .cm-panel.cm-search br + * will silently break if CodeMirror changes its DOM structure upstream
• Test coverage — the single e2e test only checks textarea sync; command palette, language detection, keybindings, and indent/wrap toggles are untested

Minor:

• MenuItem union type: prefer {type: 'separator'} | {type: 'item', ...} over {...} | 'separator'
• Hard-coded z-index: 301 on .cm-command-palette needs coordination with other modals
• Config assembly split between editor_util.go and editor.go (Autofocus, Filename set separately) — consolidate in one place

[silverwind]

Scoped DOM queries — document.querySelector('a[data-tab="preview"]') and similar selectors (already FIXMEd) should be scoped to the editor container to avoid matching unrelated elements when multiple editors exist

There's only one editor per page currently. The FIXME is already there acknowledging this needs a broader refactor.

Clipboard error handling — navigator.clipboard.readText() can throw on permission denial; wrap in try/catch

Fixed in 5bbf069.

Non-null assertions — querySelector('.js-code-find')! will throw if the element is absent; verify these are truly guaranteed or add guards

These are inside an if (elEditorOptions) guard. The child elements are guaranteed by the template when the parent exists. Using ! over ?. is the project convention.

JSONC detection — /(tsconfig|devcontainer|jsconfig)/i is a fragile hardcoded list; will need ongoing maintenance

This is the same approach VSCode takes. These are the well-known JSONC filenames. The regex is easy to extend if needed.

CSS missing fallbacks — var(--color-syntax-link) etc. have no fallback values; elements become invisible if a theme doesn't define them

Both themes always define all variables. Custom themes inherit from the default themes. Fallback values would be dead code.

Brittle CSS selectors — .cm-panel.cm-search br + * will silently break if CodeMirror changes its DOM structure upstream

Inherent to styling CodeMirror internals. These selectors are pinned to the current CodeMirror version and would be reviewed on upgrades.

Test coverage — the single e2e test only checks textarea sync; command palette, language detection, keybindings, and indent/wrap toggles are untested

Valid, but a separate effort. More e2e tests can be added incrementally.

MenuItem union type: prefer {type: 'separator'} | {type: 'item', ...} over {...} | 'separator'

The current form is more concise and the === 'separator' check reads naturally.

Hard-coded z-index: 301 on .cm-command-palette needs coordination with other modals

It's positioned above CodeMirror's internal z-indexes (which go up to 300) and below Gitea's modal overlays. Works correctly.

Config assembly split between editor_util.go and editor.go (Autofocus, Filename set separately) — consolidate in one place

Intentional: editor_util.go builds the shared config from .editorconfig, while editor.go adds route-specific overrides like Autofocus and Filename which depend on request context.

---

This comment was written by Claude Opus 4.6.

[silverwind]

#36764 (comment) is updated and includes a table of build size and performance.