fix/fix-editor-issues

package.json

@@ -26,6 +26,7 @@
     "@hookform/resolvers": "^3.3.2",
     "@lit/react": "^1.0.2",
     "@material/web": "^1.0.1",
+    "codemirror": "^6.0.1",
     "firebase": "^10.7.1",
     "overlayscrollbars": "^2.4.5",
     "overlayscrollbars-react": "^0.5.3",

src/components/Editor/ui/EditorField.tsx

@@ -31,8 +31,8 @@ const EditorField = ({ onChange, value = '', isJson, isReadOnly }: EditorFieldPr
       prettifyEditors(false);
     });
     const extensions = [
-      keymap.of(defaultKeymap),
       codemirrorLanguage,
+      keymap.of(defaultKeymap),
       oneDark,
       EditorView.lineWrapping,
       onUpdate,

src/components/RequestEditor/RequestEditor.tsx

@@ -38,7 +38,7 @@ const RequestEditor: FC<HTMLAttributes<HTMLElement>> = ({ children, ...props })
         onChange={(val: string) => {
           if (!prettify) setEditorState(val);
         }}
-        isJson={false}
+        isJson
         isReadOnly={false}
       />
       {children}

src/components/RequestEditor/lib/formatRequest.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-continue */
 /* eslint-disable class-methods-use-this */
 class RequestFormatter {
 	insideBrackets: boolean;
@@ -40,10 +41,11 @@ class RequestFormatter {
 		if (comments) {
 			this.comments = comments.join('\n');
 		}
-		return str.replace(/\/\/.*/g, ''); // Remove lines starting with //
+		return str.replace(/\/\/.*/g, '');
 	}
 
 	preFormatString(input: string) {
+		if (input.length === 0) return '';
 		let result = input;
 		result = this.removeComments(result);
 		result = this.removeSpacesAroundSymbols(result);
@@ -54,29 +56,35 @@ class RequestFormatter {
 
 	formatRequest(input: string) {
 		const text = this.preFormatString(input);
+		if (text.length === 0) {
+			return text;
+		}
 
 		for (let i = 0; i < text.length; i += 1) {
 			const char = text[i];
 
+			if (char === ' ') continue;
 			if (char === '{') {
 				this.insideBrackets = true;
-				this.outputText += `${char}${' '.repeat((this.indentationLevel + 1) * this.indentationSpaces)}`;
+				this.outputText += ` ${char}`;
 				this.indentationLevel += 1;
+				this.outputText.trim();
 			} else if (char === '}') {
 				this.insideBrackets = false;
 				this.indentationLevel -= 1;
 				this.outputText += `\n${' '.repeat(this.indentationLevel * this.indentationSpaces)}${char}`;
 			} else if (char === ':' && text[i + 1] !== ' ') {
 				this.outputText += `${char} `;
 			} else if (this.isLetter(char) && this.insideBrackets && (text[i - 1] === ' ' || text[i - 1] === '{')) {
+				this.outputText.trim();
 				this.outputText += `\n${' '.repeat(this.indentationLevel * this.indentationSpaces)}${char}`;
 			} else {
 				this.outputText += char;
 			}
 		}
 
-		// Insert comments before the formatted query
-		return `${this.comments}\n\n${this.outputText}`;
+		if (this.comments.length > 0) return `${this.comments}\n\n${this.outputText}`;
+		return this.outputText;
 	}
 }
 

src/styles/codemirror.css

@@ -6,3 +6,7 @@
   background-color: transparent !important;
   margin-right: 20px;
 }
+
+.cm-activeLine {
+  background-color: transparent;
+}