Inline and lazy-load EasyMDE CSS, fix border colors (#36714)

Replace the external easymde.min.css import with an inlined and
lazy-loaded CSS file that uses proper theme variables for border colors.
All EasyMDE/CodeMirror rules are scoped under `.EasyMDEContainer`,
removing the need for !important overrides.

- Fixes easymde borders, these were broken since a while now
- Scope all easymde styles to .EasyMDEContainer
- Inline easymde.min.css and codemirror.css into web_src/css/easymde.css
- Lazy-load the CSS alongside the JS in switchToEasyMDE()
- Fix .editor-toolbar and .CodeMirror border colors to use
--color-input-border matching textarea inputs
- Remove unused gutter, line number, and other unconfigured styles
- Move .editor-loading to codeeditor.css where it belongs

<img width="891" height="518" alt="image"
src="https://github.com/user-attachments/assets/87495de5-7872-4645-90e7-96fe0f782f02"
/>

---------

Signed-off-by: silverwind <[email protected]>
Co-authored-by: Claude Opus 4.6 <[email protected]>
Co-authored-by: Copilot <[email protected]>

This commit is contained in:

silverwind

2026-02-26 10:50:44 +00:00

committed by

GitHub

co-authored by

Claude Opus 4.6

Copilot

parent 840cf68c3e

commit 0d006290a7

8 changed files with 495 additions and 154 deletions

									
										web_src/css/features/codeeditor.css
									
		+5
		
												View File
												
				@@ -1,3 +1,8 @@

				.editor-loading {

				  padding: 1rem;

				  text-align: center;

				}

				.monaco-editor-container,

				.editor-loading.is-loading {

				  width: 100%;