default cm5 theme back

client/components/codeEditor/codeEditor.jsx

@@ -22,7 +22,10 @@ import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { autocompleteEmoji } from './autocompleteEmoji.js';
 import { searchKeymap, search } from '@codemirror/search';
 
-import * as themes from '@uiw/codemirror-themes-all';
+import * as themesImport from '@uiw/codemirror-themes-all';
+import { defaultCM5Theme } from '@themes/codeMirror/customThemes/default.js';
+
+const themes = { default: defaultCM5Theme, ...themesImport };
 const themeCompartment = new Compartment();
 const highlightCompartment = new Compartment();
 
@@ -170,11 +173,11 @@ const CodeEditor = forwardRef(
 					openText   : '▾',
 					closedText : '▸'
 				}),
-				themeCompartment.of(themeExtension),
 
 				highlightActiveLine(),
 				highlightActiveLineGutter(),
 				highlightCompartment.of(combinedHighlight),
+				themeCompartment.of(themeExtension),
 				autocompleteEmoji,
 				search(),
 			];

client/components/codeEditor/codeEditor.less

@@ -24,6 +24,20 @@
 		font-size: 16px;
 	}
 
+	.cm-gutterElement span {
+		font-family : inherit;
+		font-weight : 600;
+		color       : grey;
+		text-shadow : none;
+	}
+
+	.cm-foldGutter {
+		cursor      : pointer;
+		border-left : 1px solid #EEEEEE;
+		transition  : background 0.1s;
+		&:hover { background : #DDDDDD; }
+	}
+
 	/* Flash animation for source moves */
 	.sourceMoveFlash .cm-line {
 		animation-name: sourceMoveAnimation;

client/components/codeEditor/customHighlight.js

@@ -228,7 +228,8 @@ export function tokenizeCustomMarkdown(text) {
 }
 
 export const customHighlightStyle = HighlightStyle.define([
-	{ tag: tags.heading1, color: '#000', fontWeight: '700' },
+	{ tag: tags.heading,  class: 'cm-header' },
+	{ tag: tags.heading1,  class: 'cm-header cm-header-1' },
 	{ tag: tags.keyword, color: '#07a' }, // example for your markdown headings
 	{ tag: customTags.pageLine, color: '#f0a' },
 	{ tag: customTags.snippetLine, class: 'cm-snippetLine', color: '#0af' },