WOrk on editor

Author: MrBlankCoding

src/assets/styles/e_header_footer.css

@@ -4,7 +4,7 @@
   display: grid;
   grid-template-rows: var(--header-height) 1fr;
   height: 100vh;
-  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
+  background: var(--bg-primary);
 }
 .main-content.sidebar-hidden { grid-template-columns: 0 1fr; }
 

src/assets/styles/editor.css

@@ -30,86 +30,34 @@ html, body {
   display: flex;
   flex: 1;
   overflow: hidden;
-  position: relative;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  min-height: 0;
-  flex-direction: row; /* added this line */
 }
 
-.editor-container {
-  flex: 1;
+.editor-area {
   display: flex;
   flex-direction: column;
-  overflow: hidden;
-  position: relative;
-}
-
-/* CodeMirror 6 */
-.cm-editor {
   flex: 1;
-  height: 100%;
-  font-family: var(--font-mono);
-  font-size: var(--editor-font-size);
-  line-height: var(--editor-line-height);
+  min-width: 0;
   background: var(--bg-primary);
-  color: var(--text-primary);
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  outline: none;
-}
-
-.cm-editor.cm-focused {
-  outline: none;
 }
 
-.cm-scroller {
+.editor-container {
   flex: 1;
-  height: 100%;
-  overflow: auto;
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+  border-left: 1px solid var(--border-primary);
 }
 
-.cm-scroller::-webkit-scrollbar {
+::-webkit-scrollbar {
   display: none;
-  width: 0;
-  height: 0;
 }
-
-.cm-content {
-  padding: var(--space-md) 0;
-  min-height: 100%;
-}
-
-.cm-gutters {
-  background: var(--bg-secondary);
-  border-right: 1px solid var(--border-primary);
-}
-
-.cm-lineNumbers .cm-gutterElement {
-  color: var(--text-muted);
-  padding: 0 var(--space-sm);
-  font-size: var(--text-sm);
+html {
+  -ms-overflow-style: none;  
+  scrollbar-width: none;     
 }
 
 
-
-/* ===== EDITOR AREA ===== */
-.editor-area {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-width: 0;
-  margin: 0;
-  padding: 0;
-  background: var(--bg-primary);
-  position: relative;
-  overflow: hidden;
-}
-
 .editor-toolbar {
   display: flex;
   align-items: center;
@@ -228,25 +176,7 @@ html, body {
   display: block;
 }
 
-/* ===== CUSTOM SCROLLBAR ===== */
-::-webkit-scrollbar {
-  width: var(--scrollbar-width);
-  height: var(--scrollbar-width);
-}
-
-::-webkit-scrollbar-track {
-  background: var(--scrollbar-track);
-}
 
-::-webkit-scrollbar-thumb {
-  background: var(--scrollbar-thumb);
-  border-radius: var(--radius-full);
-  transition: var(--transition-colors);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--scrollbar-thumb-hover);
-}
 
 .help-tabs {
   display: flex;

src/editor/editor_settings.js

@@ -5,7 +5,7 @@ import { javascript } from "@codemirror/lang-javascript";
 import { defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { parseUserScriptMetadata } from '../utils/metadataParser.js';
 import { autocompletion, closeBrackets } from "@codemirror/autocomplete";
-import { bracketMatching, foldGutter } from "@codemirror/language";
+import { bracketMatching } from "@codemirror/language";
 import { linter, lintGutter } from "@codemirror/lint";
 import { showMinimap } from '@replit/codemirror-minimap';
 import { oneDark } from '@codemirror/theme-one-dark';
@@ -72,7 +72,7 @@ export class CodeEditorManager {
 
         // Settings compartments
         this.tabSize.of(EditorState.tabSize.of(this.currentSettings.tabSize)),
-        this.lineNumbers.of(this.currentSettings.lineNumbers ? [lineNumbers(), foldGutter(), gutter({class: "cm-gutters"})] : []),
+        this.lineNumbers.of(this.currentSettings.lineNumbers ? [lineNumbers()] : []),
         this.lineWrapping.of(this.currentSettings.lineWrapping ? EditorView.lineWrapping : []),
         this.matchBrackets.of(this.currentSettings.matchBrackets ? bracketMatching() : []),
         this.minimap.of(this.currentSettings.minimap ? showMinimap.compute(['doc'], () => {
@@ -233,10 +233,6 @@ export class CodeEditorManager {
     if (settings.tabSize) {
         effects.push(this.tabSize.reconfigure(EditorState.tabSize.of(settings.tabSize)));
     }
-
-    if (settings.lineNumbers !== undefined) {
-        effects.push(this.lineNumbers.reconfigure(settings.lineNumbers ? [lineNumbers(), foldGutter(), gutter({class: "cm-gutters"})] : []));
-    }
 
     if (settings.lineWrapping !== undefined) {
         effects.push(this.lineWrapping.reconfigure(settings.lineWrapping ? EditorView.lineWrapping : []));