basic css changes

client/components/codeEditor/codeEditor.jsx

@@ -6,11 +6,15 @@ import { foldGutter, foldKeymap } from "@codemirror/language";
 import { EditorView, keymap, lineNumbers, highlightActiveLineGutter, highlightActiveLine } from "@codemirror/view";
 import { markdown } from "@codemirror/lang-markdown";
 import { css } from "@codemirror/lang-css";
+import { oneDark } from "@codemirror/theme-one-dark";
 
-const CodeEditor = forwardRef(({ value = "", onChange = () => {} }, ref) => {
+const CodeEditor = forwardRef(
+	({ value = "", onChange = () => {}, language, editorTheme, tab, view, style, ...props }, ref) => {
 		const editorRef = useRef(null);
 		const viewRef = useRef(null);
 
+		console.log(props);
+
 		// --- init editor ---
 		useEffect(() => {
 			if (!editorRef.current) return;
@@ -52,6 +56,17 @@ const CodeEditor = forwardRef(({ value = "", onChange = () => {} }, ref) => {
 				{ key: "Mod-i", run: italicCommand },
 			]);
 
+			const languageExtension = () => {
+				switch (language) {
+					case "gfm":
+						return markdown({ codeLanguages: [] }); // GitHub-flavored Markdown
+					case "css":
+						return css();
+					default:
+						return markdown();
+				}
+			};
+
 			const state = EditorState.create({
 				doc: value,
 				extensions: [
@@ -59,14 +74,13 @@ const CodeEditor = forwardRef(({ value = "", onChange = () => {} }, ref) => {
 					keymap.of(defaultKeymap),
 					customKeymap,
 					updateListener,
-				markdown(),
+					languageExtension(),
-				css(),
 					highlightActiveLine(),
 					highlightActiveLineGutter(),
 					keymap.of(foldKeymap),
 					foldGutter(),
 					lineNumbers(),
-			
+					oneDark,
 				],
 			});
 
@@ -137,7 +151,8 @@ const CodeEditor = forwardRef(({ value = "", onChange = () => {} }, ref) => {
 			focus: () => viewRef.current.focus(),
 		}));
 
-	return <div ref={editorRef} style={{ height: "100%" }} />;
+		return <div className="codeEditor" ref={editorRef} style={style} />;
-});
+	},
+);
 
 export default CodeEditor;

client/components/codeEditor/codeEditor.less

@@ -1,59 +1,80 @@
-@import (less) 'codemirror/lib/codemirror.css';
+// Icon fonts for emoji/autocomplete
-@import (less) 'codemirror/addon/fold/foldgutter.css';
+@import (less) "@themes/fonts/iconFonts/diceFont.less";
-@import (less) 'codemirror/addon/search/matchesonscrollbar.css';
+@import (less) "@themes/fonts/iconFonts/elderberryInn.less";
-@import (less) 'codemirror/addon/dialog/dialog.css';
+@import (less) "@themes/fonts/iconFonts/gameIcons.less";
-@import (less) 'codemirror/addon/hint/show-hint.css';
+@import (less) "@themes/fonts/iconFonts/fontAwesome.less";
-
-//Icon fonts included so they can appear in emoji autosuggest dropdown
-@import (less) '@themes/fonts/iconFonts/diceFont.less';
-@import (less) '@themes/fonts/iconFonts/elderberryInn.less';
-@import (less) '@themes/fonts/iconFonts/gameIcons.less';
-@import (less) '@themes/fonts/iconFonts/fontAwesome.less';
 
 @keyframes sourceMoveAnimation {
-	50% {   color            : white;background-color : red;}
+	50% {
-	100% { color            : unset;background-color : unset;}
+		color: white;
+		background-color: red;
+	}
+	100% {
+		color: unset;
+		background-color: unset;
+	}
 }
 
 .codeEditor {
+	font-family: monospace;
+	height: 100%;
+
 	@media screen and (pointer: coarse) {
 		font-size: 16px;
 	}
-	.CodeMirror-foldmarker {
+
-		font-family : inherit;
+	/* Line numbers and gutters */
-		font-weight : 600;
+	.cm-gutters {
-		color       : grey;
+		background-color: #f0f0f0;
-		text-shadow : none;
+		color: #555;
+		border-right: 1px solid #ddd;
 	}
 
-	.CodeMirror-foldgutter {
+	/* Folding gutter */
+	.cm-foldGutter {
 		cursor: pointer;
-		border-left : 1px solid #EEEEEE;
+		color: grey;
+		font-weight: 600;
 		transition: background 0.1s;
-		&:hover { background : #DDDDDD; }
+
+		&:hover {
+			background: #dddddd;
+		}
 	}
 
-	.sourceMoveFlash .CodeMirror-line {
+	/* Active line */
+	.cm-activeLine {
+		background-color: #f5f5f5;
+	}
+
+	.cm-activeLineGutter {
+		background-color: #e0e0e0;
+	}
+
+	/* Flash animation for source moves */
+	.sourceMoveFlash .cm-line {
 		animation-name: sourceMoveAnimation;
 		animation-duration: 0.4s;
 	}
 
-	.CodeMirror-search-field {
+	/* Search input */
+	.cm-searchField {
 		width: 25em !important;
 		outline: 1px inset #00000055 !important;
 	}
 
+	/* Tab character visualization (optional) */
 	//.cm-tab {
-	//  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAQAAACOs/baAAAARUlEQVR4nGJgIAG8JkXxUAcCtDWemcGR1lY4MvgzCEKY7jSBjgxBDAG09UEQzAe0AMwMHrSOAwEGRtpaMIwAAAAA//8DAG4ID9EKs6YqAAAAAElFTkSuQmCC) no-repeat right;
+	//  background: url(...) no-repeat right;
 	//}
 
-	//.cm-trailingspace {
+	/* Trailing space visualization (optional) */
-	//  .cm-space {
+	//.cm-trailingSpace .cm-space {
-	//    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAQAgMAAABW5NbuAAAACVBMVEVHcEwAAAAAAAAWawmTAAAAA3RSTlMAPBJ6PMxpAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAFUlEQVQI12NgwACcCQysASAEZGAAACMuAX06aCQUAAAAAElFTkSuQmCC) no-repeat right;
+	//  background: url(...) no-repeat right;
-	//  }
 	//}
 }
 
+/* Emoji preview styling */
 .emojiPreview {
 	font-size: 1.5em;
 	line-height: 1.2em;

client/homebrew/editor/editor.less

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

package-lock.json

@@ -21,6 +21,7 @@
         "@codemirror/lang-markdown": "^6.5.0",
         "@codemirror/language": "^6.12.2",
         "@codemirror/state": "^6.6.0",
+        "@codemirror/theme-one-dark": "^6.1.3",
         "@codemirror/view": "^6.40.0",
         "@dmsnell/diff-match-patch": "^1.1.0",
         "@googleapis/drive": "^20.1.0",
@@ -2173,6 +2174,18 @@
         "@marijn/find-cluster-break": "^1.0.0"
       }
     },
+    "node_modules/@codemirror/theme-one-dark": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.3.tgz",
+      "integrity": "sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
     "node_modules/@codemirror/view": {
       "version": "6.40.0",
       "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.40.0.tgz",

package.json

@@ -97,6 +97,7 @@
     "@codemirror/lang-markdown": "^6.5.0",
     "@codemirror/language": "^6.12.2",
     "@codemirror/state": "^6.6.0",
+    "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.40.0",
     "@dmsnell/diff-match-patch": "^1.1.0",
     "@googleapis/drive": "^20.1.0",

themes/codeMirror/customEditorStyles.less

@@ -1,4 +1,4 @@
-.editor .codeEditor .CodeMirror {
+.editor .codeEditor .cm-editor {
 	// Themes with dark backgrounds
 	&.cm-s-3024-night,
 	&.cm-s-abbott,

themes/codeMirror/customThemes/darkbrewery.css

@@ -15,11 +15,11 @@
 	--highlight: #bcbcbc;
 	color: #91A6AA;
 	background: var(--bg);
-	.CodeMirror-scroll {
+	.cm-scroller {
-		.CodeMirror-gutters {
+		.cm-gutters {
 			border-right: 1px solid #555;
 			background: var(--bg);
-			.CodeMirror-gutter {
+			.cm-gutter {
 				background-color: var(--bg);
 				&.CodeMirror-foldgutter {
 					cursor: pointer;
@@ -31,9 +31,9 @@
 				}
 			}
 		}
-		.CodeMirror-lines {
+		.cm-content {
 			/* Line numbers*/
-			.CodeMirror-linenumber.CodeMirror-gutter-elt {
+			.CodeMirror-linenumber.cm-gutter-elt {
 				background-color: var(--bg);
 				color: #81969A;
 			}

themes/codeMirror/customThemes/darkvision.css

@@ -18,13 +18,13 @@
     }
 
     /* Line number stuff */
-    .CodeMirror-gutter-elt {
+    .cm-gutter-elt {
         color: #81969A;
     }
     .CodeMirror-linenumber {
         background-color: #0C0C0C;
     }
-    .CodeMirror-gutter {
+    .cm-gutter {
         background-color: #0C0C0C;
     }