Fix an issue in query tool where toggle case of selected text loses selection. #7277

Also make changes to give pgAdmin shortcuts higher priority over CodeMirror default shortcuts.

web/pgadmin/static/js/components/ReactCodeMirror/CustomEditorView.js

@@ -1,7 +1,7 @@
 import {
   EditorView
 } from '@codemirror/view';
-import { StateEffect, EditorState } from '@codemirror/state';
+import { StateEffect, EditorState, EditorSelection } from '@codemirror/state';
 import { autocompletion } from '@codemirror/autocomplete';
 import {undo, indentMore, indentLess, toggleComment} from '@codemirror/commands';
 import { errorMarkerEffect } from './extensions/errorMarker';
@@ -49,7 +49,10 @@ export default class CustomEditorView extends EditorView {
   }
 
   replaceSelection(newValue) {
-    this.dispatch(this.state.replaceSelection(newValue));
+    this.dispatch(this.state.changeByRange(range => ({
+      changes: { from: range.from, to: range.to, insert: newValue },
+      range: EditorSelection.range(range.from, range.to)
+    })));
   }
 
   getCursor() {

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

@@ -110,7 +110,6 @@ const defaultExtensions = [
   EditorState.allowMultipleSelections.of(true),
   indentOnInput(),
   syntaxHighlighting,
-  keymap.of([defaultKeymap, closeBracketsKeymap, historyKeymap, foldKeymap, completionKeymap].flat()),
   keymap.of([{
     key: 'Tab',
     preventDefault: true,
@@ -147,6 +146,8 @@ export default function Editor({
 
   const preferencesStore = usePreferences();
   const editable = !disabled;
+
+  const shortcuts = useRef(new Compartment());
   const configurables = useRef(new Compartment());
   const editableConfig = useRef(new Compartment());
 
@@ -168,13 +169,14 @@ export default function Editor({
             icon.innerHTML = arrowRightHtml;
           }
           return icon;
-        }
+        },
       }));
     }
     if (editorContainerRef.current) {
       const state = EditorState.create({
         extensions: [
           ...finalExtns,
+          shortcuts.current.of([]),
           configurables.current.of([]),
           editableConfig.current.of([
             EditorView.editable.of(!disabled),
@@ -209,7 +211,6 @@ export default function Editor({
           }),
           breakpoint ? breakpointGutter : [],
           showActiveLine ? highlightActiveLine() : activeLineExtn(),
-          keymap.of(customKeyMap??[]),
         ],
       });
 
@@ -243,6 +244,13 @@ export default function Editor({
     }
   }, [value]);
 
+  useEffect(()=>{
+    const keys = keymap.of([customKeyMap??[], defaultKeymap, closeBracketsKeymap, historyKeymap, foldKeymap, completionKeymap].flat());
+    editor.current?.dispatch({
+      effects: shortcuts.current.reconfigure(keys)
+    });
+  }, [customKeyMap]);
+
   useEffect(() => {
     let pref = preferencesStore.getPreferencesForModule('sqleditor');
     let newConfigExtn = [];

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

@@ -90,7 +90,7 @@ export default function CodeMirror({className, currEditor, showCopyBtn=false, cu
       setShowGoto(true);
     },
   },
-  ...customKeyMap], []);
+  ...customKeyMap], [customKeyMap]);
 
   const closeFind = () => {
     setShowFind([false, false]);

web/pgadmin/static/js/utils.js

@@ -14,6 +14,7 @@ import convert from 'convert-units';
 import getApiInstance from './api_instance';
 import usePreferences from '../../preferences/static/js/store';
 import pgAdmin from 'sources/pgadmin';
+import { isMac } from './keyboard_shortcuts';
 
 export function parseShortcutValue(obj) {
   let shortcut = '';
@@ -27,6 +28,37 @@ export function parseShortcutValue(obj) {
   return shortcut;
 }
 
+export function isShortcutValue(obj) {
+  if(!obj) return false;
+  if([obj.alt, obj.control, obj?.key, obj?.key?.char].every((k)=>!_.isUndefined(k))){
+    return true;
+  }
+  return false;
+}
+
+// Convert shortcut obj to codemirror key format
+export function toCodeMirrorKey(obj) {
+  let shortcut = '';
+  if (!obj){
+    return shortcut;
+  }
+  if (obj.alt) { shortcut += 'Alt-'; }
+  if (obj.shift) { shortcut += 'Shift-'; }
+  if (obj.control) {
+    if(isMac() && obj.ctrl_is_meta) {
+      shortcut += 'Mod-';
+    } else {
+      shortcut += 'Ctrl-';
+    }
+  }
+  if(obj?.key.char?.length == 1) {
+    shortcut += obj?.key.char?.toLowerCase();
+  } else {
+    shortcut += obj?.key.char;
+  }
+  return shortcut;
+}
+
 export function getEpoch(inp_date) {
   let date_obj = inp_date ? inp_date : new Date();
   return parseInt(date_obj.getTime()/1000);