Fixed new line indentation in query editor and add a user preference to disable it. #7295

web/pgadmin/static/js/components/ReactCodeMirror/components/Editor.jsx

@@ -36,6 +36,7 @@ import {
   bracketMatching,
   indentUnit,
   foldKeymap,
+  indentService
 } from '@codemirror/language';
 
 import syntaxHighlighting from '../extensions/highlighting';
@@ -46,6 +47,7 @@ import CustomEditorView from '../CustomEditorView';
 import breakpointGutter, { breakpointEffect } from '../extensions/breakpointGutter';
 import activeLineExtn from '../extensions/activeLineMarker';
 import currentQueryHighlighterExtn from '../extensions/currentQueryHighlighter';
+import { indentNewLine } from '../extensions/extraStates';
 
 const arrowRightHtml = ReactDOMServer.renderToString(<KeyboardArrowRightRoundedIcon style={{fontSize: '1.2em'}} />);
 const arrowDownHtml = ReactDOMServer.renderToString(<ExpandMoreRoundedIcon style={{fontSize: '1.2em'}} />);
@@ -134,7 +136,15 @@ const defaultExtensions = [
     drop: handleDrop,
     paste: handlePaste,
   }),
-  errorMarkerExtn()
+  errorMarkerExtn(),
+  indentService.of((context, pos) => {
+    if(context.state.facet(indentNewLine)) {
+      const previousLine = context.lineAt(pos, -1);
+      let prevText = previousLine.text.replaceAll('\t', ' '.repeat(context.state.tabSize));
+      return prevText.match(/^\s*/)?.[0].length;
+    }
+    return 0;
+  }),
 ];
 
 export default function Editor({
@@ -310,7 +320,7 @@ export default function Editor({
     );
     if (pref.use_spaces) {
       newConfigExtn.push(
-        indentUnit.of(new Array(pref.tab_size).fill(' ').join('')),
+        indentUnit.of(' '.repeat(pref.tab_size)),
       );
     } else {
       newConfigExtn.push(
@@ -318,6 +328,12 @@ export default function Editor({
       );
     }
 
+    if(pref.indent_new_line) {
+      newConfigExtn.push(indentNewLine.of(true));
+    } else {
+      newConfigExtn.push(indentNewLine.of(false));
+    }
+
     if (pref.wrap_code) {
       newConfigExtn.push(
         EditorView.lineWrapping

web/pgadmin/static/js/components/ReactCodeMirror/extensions/extraStates.js

@@ -0,0 +1,14 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2023, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import { Facet } from '@codemirror/state';
+
+export const indentNewLine = Facet.define({
+  combine: values => values.length ? values[0] : true,
+});

web/pgadmin/tools/sqleditor/utils/query_tool_preferences.py

@@ -892,6 +892,16 @@ def register_query_tool_preferences(self):
         )
     )
 
+    self.sql_font_size = self.preference.register(
+        'Editor', 'indent_new_line',
+        gettext("Auto-indent new line?"), 'boolean', True,
+        category_label=PREF_LABEL_EDITOR,
+        help_str=gettext(
+            'Specifies whether the newly added line using enter key should '
+            'be auto-indented or not'
+        )
+    )
+
     self.expression_width = self.preference.register(
         'editor', 'expression_width',
         gettext("Expression Width"), 'integer', 50,