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' },

client/homebrew/editor/editor.less

@@ -9,7 +9,9 @@
 	background : white;
 	.codeEditor {
 		height            : calc(100% - 25px);
-		.cm-editor { height : 100%; }
+		.cm-editor { height : 100%;
+			outline:none !important;
+		}
 		&.brewSnippets .cm-snippetLine {
 			background : #33333328;
 			border-top : #333399 solid 1px;

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -24,7 +24,10 @@ const ThemeSnippets = {
 };
 
 //import EditorThemes from '../../../../build/homebrew/codeMirror/editorThemes.json';
-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 EditorThemes = Object.entries(themes)
   .filter(([name, value]) =>

themes/codeMirror/customThemes/default.js

@@ -0,0 +1,83 @@
+// themes/codeMirror/customThemes/default.js
+import { EditorView } from '@codemirror/view';
+import { Compartment } from '@codemirror/state';
+
+export const themeCompartment = new Compartment();
+
+export const defaultCM5Theme = EditorView.theme({
+  "&": {
+    backgroundColor: "white",
+    color: "black",
+  },
+  ".cm-content": {
+    padding: "4px 0",
+    fontFamily: "monospace",
+    fontSize: "13px",
+    lineHeight: "1",
+  },
+  ".cm-line": {
+    padding: "0 4px",
+  },
+  ".cm-gutters": {
+    borderRight: "1px solid #ddd",
+    backgroundColor: "#f7f7f7",
+    whiteSpace: "nowrap",
+  },
+  ".cm-linenumber": {
+    padding: "0 3px 0 5px",
+    minWidth: "20px",
+    textAlign: "right",
+    color: "#999",
+    whiteSpace: "nowrap",
+  },
+  ".cm-cursor": {
+    borderLeft: "1px solid black",
+  },
+  ".cm-fat-cursor": {
+    width: "auto",
+    backgroundColor: "#7e7",
+    caretColor: "transparent",
+  },
+  ".cm-activeline-background": {
+    backgroundColor: "#e8f2ff",
+  },
+  ".cm-selected": {
+    backgroundColor: "#d7d4f0",
+  },
+  ".cm-foldmarker": {
+    color: "blue",
+    textShadow:
+      "#b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px",
+    fontFamily: "arial",
+    lineHeight: "0.3",
+    cursor: "pointer",
+  },
+
+  // Semantic classes
+  ".cm-header": { color: "blue", fontWeight: "bold" },
+  ".cm-strong": { fontWeight: "bold" },
+  ".cm-em": { fontStyle: "italic" },
+  ".cm-quote": { color: "#090" },
+  ".cm-keyword": { color: "#708" },
+  ".cm-atom": { color: "#219" },
+  ".cm-number": { color: "#164" },
+  ".cm-def": { color: "#00f" },
+  ".cm-variable-2": { color: "#05a" },
+  ".cm-variable-3, .cm-type": { color: "#085" },
+  ".cm-comment": { color: "#a50" },
+  ".cm-string": { color: "#a11" },
+  ".cm-string-2": { color: "#f50" },
+  ".cm-meta, .cm-qualifier": { color: "#555" },
+  ".cm-builtin": { color: "#30a" },
+  ".cm-bracket": { color: "#997" },
+  ".cm-tag": { color: "#170" },
+  ".cm-attribute": { color: "#00c" },
+  ".cm-hr": { color: "#999" },
+  ".cm-link": { color: "#00c", textDecoration: "underline" },
+  ".cm-negative": { color: "#d44" },
+  ".cm-positive": { color: "#292" },
+  ".cm-error, .cm-invalidchar": { color: "#f00" },
+  ".cm-matchingbracket": { color: "#0b0" },
+  ".cm-nonmatchingbracket": { color: "#a22" },
+  ".cm-matchingtag": { backgroundColor: "rgba(255, 150, 0, 0.3)" },
+}, { dark: false });