Fix an issue in query tool where toggle case of selected text loses s…

…election. pgadmin-org#7277

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

docs/en_US/release_notes_8_5.rst

@@ -29,7 +29,10 @@ Housekeeping
 Bug fixes
 *********
 
+  | `Issue #7116 <https://github.com/pgadmin-org/pgadmin4/issues/7116>`_ -  Bug fixes and improvements in pgAdmin CLI.
+  | `Issue #7165 <https://github.com/pgadmin-org/pgadmin4/issues/7165>`_ -  Fixed schema diff wrong query generation for table, foreign table and sequence.
   | `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.
+  | `Issue #7277 <https://github.com/pgadmin-org/pgadmin4/issues/7277>`_ -  Fix an issue in query tool where toggle case of selected text loses selection.

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);

web/pgadmin/tools/sqleditor/static/js/components/QueryToolComponent.jsx

@@ -79,13 +79,85 @@ function onBeforeUnload(e) {
   e.preventDefault();
   e.returnValue = 'prevent';
 }
+
+const FIXED_PREF = {
+  find: {
+    'control': true,
+    ctrl_is_meta: true,
+    'shift': false,
+    'alt': false,
+    'key': {
+      'key_code': 70,
+      'char': 'F',
+    },
+  },
+  replace: {
+    'control': true,
+    ctrl_is_meta: true,
+    'shift': false,
+    'alt': true,
+    'key': {
+      'key_code': 70,
+      'char': 'F',
+    },
+  },
+  gotolinecol: {
+    'control': true,
+    ctrl_is_meta: true,
+    'shift': false,
+    'alt': false,
+    'key': {
+      'key_code': 76,
+      'char': 'L',
+    },
+  },
+  indent: {
+    'control': false,
+    'shift': false,
+    'alt': false,
+    'key': {
+      'key_code': 9,
+      'char': 'Tab',
+    },
+  },
+  unindent: {
+    'control': false,
+    'shift': true,
+    'alt': false,
+    'key': {
+      'key_code': 9,
+      'char': 'Tab',
+    },
+  },
+  comment: {
+    'control': true,
+    ctrl_is_meta: true,
+    'shift': false,
+    'alt': false,
+    'key': {
+      'key_code': 191,
+      'char': '/',
+    },
+  },
+  format_sql: {
+    'control': true,
+    ctrl_is_meta: true,
+    'shift': false,
+    'alt': false,
+    'key': {
+      'key_code': 75,
+      'char': 'k',
+    },
+  },
+};
+
 export default function QueryToolComponent({params, pgWindow, pgAdmin, selectedNodeInfo, qtPanelDocker, qtPanelId, eventBusObj}) {
   const containerRef = React.useRef(null);
   const preferencesStore = usePreferences();
   const [qtState, _setQtState] = useState({
     preferences: {
       browser: preferencesStore.getPreferencesForModule('browser'),
-      sqleditor: preferencesStore.getPreferencesForModule('sqleditor'),
+      sqleditor: {...preferencesStore.getPreferencesForModule('sqleditor'), ...FIXED_PREF},
       graphs: preferencesStore.getPreferencesForModule('graphs'),
       misc: preferencesStore.getPreferencesForModule('misc'),
     },
@@ -362,7 +434,7 @@ export default function QueryToolComponent({params, pgWindow, pgAdmin, selectedN
     state => {
       setQtState({preferences: {
         browser: state.getPreferencesForModule('browser'),
-        sqleditor: state.getPreferencesForModule('sqleditor'),
+        sqleditor: {...state.getPreferencesForModule('sqleditor'), ...FIXED_PREF},
         graphs: state.getPreferencesForModule('graphs'),
         misc: state.getPreferencesForModule('misc'),
       }});

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

@@ -48,87 +48,6 @@ const useStyles = makeStyles((theme)=>({
   },
 }));
 
-const FIXED_PREF = {
-  find: {
-    'control': true,
-    ctrl_is_meta: true,
-    'shift': false,
-    'alt': false,
-    'key': {
-      'key_code': 70,
-      'char': 'F',
-    },
-  },
-  replace: {
-    'control': true,
-    ctrl_is_meta: true,
-    'shift': false,
-    'alt': true,
-    'key': {
-      'key_code': 70,
-      'char': 'F',
-    },
-  },
-  gotolinecol: {
-    'control': true,
-    ctrl_is_meta: true,
-    'shift': false,
-    'alt': false,
-    'key': {
-      'key_code': 76,
-      'char': 'L',
-    },
-  },
-  indent: {
-    'control': false,
-    'shift': false,
-    'alt': false,
-    'key': {
-      'key_code': 9,
-      'char': 'Tab',
-    },
-  },
-  unindent: {
-    'control': false,
-    'shift': true,
-    'alt': false,
-    'key': {
-      'key_code': 9,
-      'char': 'Tab',
-    },
-  },
-  comment: {
-    'control': true,
-    ctrl_is_meta: true,
-    'shift': false,
-    'alt': false,
-    'key': {
-      'key_code': 191,
-      'char': '/',
-    },
-  },
-  uncomment: {
-    'control': true,
-    ctrl_is_meta: true,
-    'shift': false,
-    'alt': false,
-    'key': {
-      'key_code': 190,
-      'char': '.',
-    },
-  },
-  format_sql: {
-    'control': true,
-    ctrl_is_meta: true,
-    'shift': false,
-    'alt': false,
-    'key': {
-      'key_code': 75,
-      'char': 'k',
-    },
-  },
-};
-
 function autoCommitRollback(type, api, transId, value) {
   let url = url_for(`sqleditor.${type}`, {
     'trans_id': transId,
@@ -451,7 +370,7 @@ export function MainToolBar({containerRef, onFilterClick, onManageMacros}) {
       }
     },
     {
-      shortcut: FIXED_PREF.format_sql,
+      shortcut: queryToolPref.format_sql,
       options: {
         callback: ()=>{formatSQL();}
       }
@@ -596,25 +515,25 @@ export function MainToolBar({containerRef, onFilterClick, onManageMacros}) {
         onClose={onMenuClose}
         label={gettext('Edit Menu')}
       >
-        <PgMenuItem shortcut={FIXED_PREF.find}
+        <PgMenuItem shortcut={queryToolPref.find}
           onClick={()=>{eventBus.fireEvent(QUERY_TOOL_EVENTS.EDITOR_FIND_REPLACE, false);}}>{gettext('Find')}</PgMenuItem>
-        <PgMenuItem shortcut={FIXED_PREF.replace}
+        <PgMenuItem shortcut={queryToolPref.replace}
           onClick={()=>{eventBus.fireEvent(QUERY_TOOL_EVENTS.EDITOR_FIND_REPLACE, true);}}>{gettext('Replace')}</PgMenuItem>
-        <PgMenuItem shortcut={FIXED_PREF.gotolinecol}
+        <PgMenuItem shortcut={queryToolPref.gotolinecol}
           onClick={()=>{eventBus.fireEvent(QUERY_TOOL_EVENTS.EDITOR_EXEC_CMD, 'gotoLineCol');}}>{gettext('Go to Line/Column')}</PgMenuItem>
         <PgMenuDivider />
-        <PgMenuItem shortcut={FIXED_PREF.indent}
+        <PgMenuItem shortcut={queryToolPref.indent}
           onClick={()=>{eventBus.fireEvent(QUERY_TOOL_EVENTS.EDITOR_EXEC_CMD, 'indentMore');}}>{gettext('Indent Selection')}</PgMenuItem>
-        <PgMenuItem shortcut={FIXED_PREF.unindent}
+        <PgMenuItem shortcut={queryToolPref.unindent}
           onClick={()=>{eventBus.fireEvent(QUERY_TOOL_EVENTS.EDITOR_EXEC_CMD, 'indentLess');}}>{gettext('Unindent Selection')}</PgMenuItem>
-        <PgMenuItem shortcut={FIXED_PREF.comment}
+        <PgMenuItem shortcut={queryToolPref.comment}
           onClick={()=>{eventBus.fireEvent(QUERY_TOOL_EVENTS.EDITOR_EXEC_CMD, 'toggleComment');}}>{gettext('Toggle Comment')}</PgMenuItem>
         <PgMenuItem shortcut={queryToolPref.toggle_case}
           onClick={toggleCase}>{gettext('Toggle Case Of Selected Text')}</PgMenuItem>
         <PgMenuItem shortcut={queryToolPref.clear_query}
           onClick={clearQuery}>{gettext('Clear Query')}</PgMenuItem>
         <PgMenuDivider />
-        <PgMenuItem shortcut={FIXED_PREF.format_sql}onClick={formatSQL}>{gettext('Format SQL')}</PgMenuItem>
+        <PgMenuItem shortcut={queryToolPref.format_sql}onClick={formatSQL}>{gettext('Format SQL')}</PgMenuItem>
       </PgMenu>
       <PgMenu
         anchorRef={filterMenuRef}