Fixed an issue where indent with space was not aligning to next tab position. #7486

Author: adityatoshniwal

docs/en_US/release_notes_8_14.rst

@@ -21,6 +21,7 @@ New features
 ************
 
   | `Issue #5786 <https://github.com/pgadmin-org/pgadmin4/issues/5786>`_ -  Allow the use of a pgpass file in the pgAdmin container via Docker secrets.
+  | `Issue #6592 <https://github.com/pgadmin-org/pgadmin4/issues/6592>`_ -  Fixed multiple issues and improved ERD auto-layout.
   | `Issue #8095 <https://github.com/pgadmin-org/pgadmin4/issues/8095>`_ -  Added support for a builtin locale provider in the Database dialog.
 
 Housekeeping
@@ -32,6 +33,7 @@ Bug fixes
 
   | `Issue #5099 <https://github.com/pgadmin-org/pgadmin4/issues/5099>`_ -  Fixed an issue where Ctrl/Cmd + A was not selecting all data in query tool data grid.
   | `Issue #7384 <https://github.com/pgadmin-org/pgadmin4/issues/7384>`_ -  Fixed an issue where querying a foreign table gives the error 'ForeignTableCommand' object has no attribute 'auto_commit'.
+  | `Issue #7486 <https://github.com/pgadmin-org/pgadmin4/issues/7486>`_ -  Fixed an issue where indent with space was not aligning to next tab position.
   | `Issue #7865 <https://github.com/pgadmin-org/pgadmin4/issues/7865>`_ -  Fixed an issue related to the query tool update connection after the server disconnected from the object explorer.
   | `Issue #8010 <https://github.com/pgadmin-org/pgadmin4/issues/8010>`_ -  Fixed an issue where query tool should show results and messages only from the last executed query.
   | `Issue #8065 <https://github.com/pgadmin-org/pgadmin4/issues/8065>`_ -  Ensure the crypt key is retrieved correctly on backend server restart.

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

@@ -104,7 +104,14 @@ function handlePaste(e) {
 function insertTabWithUnit({ state, dispatch }) {
   if (state.selection.ranges.some(r => !r.empty))
     return indentMore({ state, dispatch });
-  dispatch(state.update(state.replaceSelection(state.facet(indentUnit)), { scrollIntoView: true, userEvent: 'input' }));
+
+  // If indent is space based, then calc the number of spaces required.
+  let indentVal = state.facet(indentUnit);
+  if(indentVal != '\t') {
+    const line = state.doc.lineAt(state.selection.main.head);
+    indentVal =  ' '.repeat(indentVal.length - (state.selection.main.head - line.from) % indentVal.length);
+  }
+  dispatch(state.update(state.replaceSelection(indentVal), { scrollIntoView: true, userEvent: 'input' }));
   return true;
 }
 
@@ -181,7 +188,7 @@ export default function Editor({
   useEffect(() => {
     if (!checkIsMounted()) return;
     const finalOptions = { ...defaultOptions, ...options };
-    const osEOL = OS_EOL === 'crlf' ? '\r\n' : '\n'; 
+    const osEOL = OS_EOL === 'crlf' ? '\r\n' : '\n';
     const finalExtns = [
       (language == 'json') ? json() : sql({dialect: PgSQL}),
       ...defaultExtensions,