add basic light theme and scrollpastend

client/components/codeEditor/codeEditor.jsx

@@ -1,17 +1,35 @@
-
+import "./codeEditor.less";
-import './codeEditor.less';
 import React, { useEffect, useRef, forwardRef, useImperativeHandle } from "react";
 
 import { EditorState } from "@codemirror/state";
 import { defaultKeymap, history, historyField, undo, redo } from "@codemirror/commands";
 import { foldGutter, foldKeymap } from "@codemirror/language";
-import { EditorView, keymap, lineNumbers, highlightActiveLineGutter, highlightActiveLine } from "@codemirror/view";
+import {
+	EditorView,
+	keymap,
+	lineNumbers,
+	highlightActiveLineGutter,
+	highlightActiveLine,
+	scrollPastEnd,
+} from "@codemirror/view";
 import { markdown } from "@codemirror/lang-markdown";
 import { css } from "@codemirror/lang-css";
-import { oneDark } from "@codemirror/theme-one-dark";
+import { basicLightTheme } from "cm6-theme-basic-light";
 
 const CodeEditor = forwardRef(
-	({ value = "", onChange = () => {}, language, editorTheme, tab, view, style, ...props }, ref) => {
+	(
+		{
+			value = "",
+			onChange = () => {},
+			language = "",
+			tab = "brewText",
+			editorTheme = "default",
+			view,
+			style,
+			...props
+		},
+		ref,
+	) => {
 		const editorRef = useRef(null);
 		const viewRef = useRef(null);
 
@@ -76,13 +94,16 @@ const CodeEditor = forwardRef(
 					keymap.of(defaultKeymap),
 					customKeymap,
 					updateListener,
+					EditorView.lineWrapping,
+					scrollPastEnd(),
 					languageExtension(),
 					highlightActiveLine(),
 					highlightActiveLineGutter(),
 					keymap.of(foldKeymap),
 					foldGutter(),
 					lineNumbers(),
-					oneDark,
+					basicLightTheme,
+					bracketMatching(),
 				],
 			});
 

client/components/codeEditor/codeEditor.less

@@ -24,19 +24,6 @@
 		font-size: 16px;
 	}
 
-	.cm-scroller {
-		width:100%;
-
-	}
-	.cm-content {
-		width:70%;
-
-		.cm-line {
-			word-wrap: break-word;
-    		white-space: pre-wrap;
-    		word-break: normal;
-		}
-	}
 
 	/* Line numbers and gutters */
 	.cm-gutters {

package.json

@@ -97,7 +97,6 @@
     "@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",
@@ -105,7 +104,7 @@
     "@vitejs/plugin-react": "^5.1.2",
     "body-parser": "^2.2.0",
     "classnames": "^2.5.1",
-    "codemirror": "^6.0.2",
+    "cm6-theme-basic-light": "^0.2.0",
     "cookie-parser": "^1.4.7",
     "core-js": "^3.47.0",
     "cors": "^2.8.5",