Fixed multiple editor related issues:

1. Replace option in query tool edit menu is not working on non-Mac OS. #7262
2. Format SQL shortcut and multiline selection are not working. #7268
3. "Use Spaces?" Preference of Editor is not working. #7269

docs/en_US/release_notes_8_5.rst

@@ -30,3 +30,6 @@ Bug fixes
 *********
 
   | `Issue #7229 <https://github.com/pgadmin-org/pgadmin4/issues/7229>`_ -  Fix an issue in table dialog where changing column name was not syncing table constraints appropriately.
+  | `Issue #7262 <https://github.com/pgadmin-org/pgadmin4/issues/7262>`_ -  Fix an issue in editor where replace option in query tool edit menu is not working on non-Mac OS.
+  | `Issue #7268 <https://github.com/pgadmin-org/pgadmin4/issues/7268>`_ -  Fix an issue in editor where Format SQL shortcut and multiline selection are not working.
+  | `Issue #7269 <https://github.com/pgadmin-org/pgadmin4/issues/7269>`_ -  Fix an issue in editor where "Use Spaces?" Preference of Editor is not working.

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

@@ -21,13 +21,14 @@ import {
   highlightSpecialChars,
   drawSelection,
   dropCursor,
+  rectangularSelection,
+  crosshairCursor,
   highlightActiveLine,
   EditorView,
   keymap,
 } from '@codemirror/view';
 import { EditorState, Compartment } from '@codemirror/state';
-import { history, defaultKeymap, historyKeymap, indentLess, insertTab } from '@codemirror/commands';
-import { highlightSelectionMatches } from '@codemirror/search';
+import { history, defaultKeymap, historyKeymap, indentLess, indentMore } from '@codemirror/commands';
 import { closeBrackets, autocompletion, closeBracketsKeymap, completionKeymap, acceptCompletion } from '@codemirror/autocomplete';
 import {
   foldGutter,
@@ -91,25 +92,30 @@ function handlePaste(e) {
   checkTrojanSource(copiedText, true);
 }
 
+
+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' }));
+  return true;
+}
+
 /* React wrapper for CodeMirror */
 const defaultExtensions = [
   highlightSpecialChars(),
   drawSelection(),
+  rectangularSelection(),
   dropCursor(),
+  crosshairCursor(),
   EditorState.allowMultipleSelections.of(true),
   indentOnInput(),
   syntaxHighlighting,
-  highlightSelectionMatches(),
   keymap.of([defaultKeymap, closeBracketsKeymap, historyKeymap, foldKeymap, completionKeymap].flat()),
   keymap.of([{
     key: 'Tab',
     preventDefault: true,
-    run: insertTab,
-  },
-  {
-    key: 'Shift-Tab',
-    preventDefault: true,
-    run: indentLess,
+    run: insertTabWithUnit,
+    shift: indentLess,
   },{
     key: 'Tab',
     run: acceptCompletion,
@@ -170,7 +176,6 @@ export default function Editor({
         extensions: [
           ...finalExtns,
           configurables.current.of([]),
-          keymap.of(customKeyMap??[]),
           editableConfig.current.of([
             EditorView.editable.of(!disabled),
             EditorState.readOnly.of(readonly),
@@ -204,6 +209,7 @@ export default function Editor({
           }),
           breakpoint ? breakpointGutter : [],
           showActiveLine ? highlightActiveLine() : activeLineExtn(),
+          keymap.of(customKeyMap??[]),
         ],
       });
 

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

@@ -62,14 +62,14 @@ CopyButton.propTypes = {
 };
 
 
-export default function CodeMirror({className, currEditor, showCopyBtn=false, ...props}) {
+export default function CodeMirror({className, currEditor, showCopyBtn=false, customKeyMap=[], ...props}) {
   const classes = useStyles();
   const editor = useRef();
   const [[showFind, isReplace], setShowFind] = useState([false, false]);
   const [showGoto, setShowGoto] = useState(false);
   const [showCopy, setShowCopy] = useState(false);
 
-  const editMenuKeyMap = useMemo(()=>[{
+  const finalCustomKeyMap = useMemo(()=>[{
     key: 'Mod-f', run: (_view, e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -89,7 +89,8 @@ export default function CodeMirror({className, currEditor, showCopyBtn=false, ..
       e.stopPropagation();
       setShowGoto(true);
     },
-  }], []);
+  },
+  ...customKeyMap], []);
 
   const closeFind = () => {
     setShowFind([false, false]);
@@ -112,7 +113,7 @@ export default function CodeMirror({className, currEditor, showCopyBtn=false, ..
 
   return (
     <div className={clsx(className, classes.root)} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} >
-      <Editor currEditor={currEditorWrap} customKeyMap={editMenuKeyMap} {...props} />
+      <Editor currEditor={currEditorWrap} customKeyMap={finalCustomKeyMap} {...props} />
       {showCopy && <CopyButton editor={editor.current} />}
       <FindDialog editor={editor.current} show={showFind} replace={isReplace} onClose={closeFind} />
       <GotoDialog editor={editor.current} show={showGoto} onClose={closeGoto} />
@@ -124,4 +125,5 @@ CodeMirror.propTypes = {
   currEditor: PropTypes.func,
   className: CustomPropTypes.className,
   showCopyBtn: PropTypes.bool,
+  customKeyMap: PropTypes.array,
 };

web/pgadmin/tools/sqleditor/static/js/components/sections/MainToolBar.jsx

@@ -33,7 +33,6 @@ import { InputSelectNonSearch } from '../../../../../../static/js/components/For
 import PropTypes from 'prop-types';
 import CustomPropTypes from '../../../../../../static/js/custom_prop_types';
 import ConfirmTransactionContent from '../dialogs/ConfirmTransactionContent';
-import { isMac } from '../../../../../../static/js/keyboard_shortcuts';
 import { LayoutDocker } from '../../../../../../static/js/helpers/Layout';
 import CloseRunningDialog from '../dialogs/CloseRunningDialog';
 
@@ -63,8 +62,8 @@ const FIXED_PREF = {
   replace: {
     'control': true,
     ctrl_is_meta: true,
-    'shift': isMac() ? false : true,
-    'alt': isMac() ? true : false,
+    'shift': false,
+    'alt': true,
     'key': {
       'key_code': 70,
       'char': 'F',
@@ -120,7 +119,8 @@ const FIXED_PREF = {
   },
   format_sql: {
     'control': true,
-    'shift': true,
+    ctrl_is_meta: true,
+    'shift': false,
     'alt': false,
     'key': {
       'key_code': 75,

web/pgadmin/tools/sqleditor/static/js/components/sections/Query.jsx

@@ -238,7 +238,7 @@ export default function Query() {
     eventBus.registerListener(QUERY_TOOL_EVENTS.EDITOR_FIND_REPLACE, (replace=false)=>{
       editor.current?.focus();
       let key = {
-        keyCode: 70, metaKey: false, ctrlKey: true, shiftKey: replace, altKey: false,
+        keyCode: 70, metaKey: false, ctrlKey: true, shiftKey: false, altKey: replace,
       };
       if(isMac()) {
         key.metaKey = true;
@@ -409,5 +409,14 @@ export default function Query() {
     onCursorActivity={cursorActivity}
     onChange={change}
     autocomplete={true}
+    customKeyMap={[
+      {
+        key: 'Mod-k', run: (_view, e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          eventBus.fireEvent(QUERY_TOOL_EVENTS.TRIGGER_FORMAT_SQL);
+        },
+      }
+    ]}
   />;
 }