mac specific keyboard shortcuts #199

packages/web/src/buttons/ToolStripCommandButton.svelte

@@ -1,13 +1,16 @@
 <script context="module">
   function getCommandTitle(command) {
     let res = command.text;
-    if (command.keyText || command.keyTextFromGroup) res += ` (${command.keyText || command.keyTextFromGroup})`;
+    if (command.keyText || command.keyTextFromGroup) {
+      res += ` (${formatKeyText(command.keyText || command.keyTextFromGroup)})`;
+    }
     return res;
   }
 </script>
 
 <script lang="ts">
   import { commandsCustomized } from '../stores';
+  import { formatKeyText } from '../utility/common';
   import ToolStripButton from './ToolStripButton.svelte';
 
   export let command;

packages/web/src/commands/CommandListener.svelte

@@ -2,6 +2,7 @@
   import { commandsCustomized, visibleCommandPalette } from '../stores';
   import { get } from 'svelte/store';
   import { runGroupCommand } from './runCommand';
+import { resolveKeyText } from '../utility/common';
 
   export function handleCommandKeyDown(e) {
     let keyText = '';
@@ -15,13 +16,13 @@
     const commandsFiltered: any = Object.values(commandsValue).filter(
       (x: any) =>
         x.keyText &&
-        x.keyText
+        resolveKeyText(x.keyText)
           .toLowerCase()
           .split('|')
           .map(x => x.trim())
           .includes(keyText.toLowerCase()) &&
         (x.disableHandleKeyText == null ||
-          !x.disableHandleKeyText
+          !resolveKeyText(x.disableHandleKeyText)
             .toLowerCase()
             .split('|')
             .map(x => x.trim())

packages/web/src/commands/CommandPalette.svelte

@@ -18,7 +18,7 @@
     category: 'Database',
     toolbarName: 'Database search',
     name: 'Search',
-    keyText: isElectronAvailable() ? 'Ctrl+P' : 'F3',
+    keyText: isElectronAvailable() ? 'CtrlOrCommand+P' : 'F3',
     onClick: () => visibleCommandPalette.set('database'),
     testEnabled: () => getVisibleCommandPalette() != 'database',
   });

packages/web/src/commands/recentDatabaseSwitch.ts

@@ -25,6 +25,6 @@ registerCommand({
   id: 'database.switch',
   category: 'Database',
   name: 'Change to recent',
-  keyText: 'Ctrl+D',
+  keyText: 'CtrlOrCommand+D',
   getSubCommands: () => getRecentDatabases().map(switchDatabaseCommand),
 });

packages/web/src/commands/stdCommands.ts

@@ -97,7 +97,7 @@ registerCommand({
   toolbarOrder: 2,
   name: 'Query',
   toolbarName: 'New query',
-  keyText: 'Ctrl+Q',
+  keyText: 'CtrlOrCommand+Q',
   onClick: () => newQuery(),
 });
 
@@ -321,7 +321,7 @@ registerCommand({
   category: null,
   isGroupCommand: true,
   name: 'Save',
-  keyText: 'Ctrl+S',
+  keyText: 'CtrlOrCommand+S',
   group: 'save',
 });
 
@@ -330,7 +330,7 @@ registerCommand({
   category: null,
   isGroupCommand: true,
   name: 'Save As',
-  keyText: 'Ctrl+Shift+S',
+  keyText: 'CtrlOrCommand+Shift+S',
   group: 'saveAs',
 });
 
@@ -339,7 +339,7 @@ registerCommand({
   category: null,
   isGroupCommand: true,
   name: 'Undo',
-  keyText: 'Ctrl+Z',
+  keyText: 'CtrlOrCommand+Z',
   group: 'undo',
 });
 
@@ -348,7 +348,7 @@ registerCommand({
   category: null,
   isGroupCommand: true,
   name: 'Redo',
-  keyText: 'Ctrl+Y',
+  keyText: 'CtrlOrCommand+Y',
   group: 'redo',
 });
 
@@ -356,7 +356,7 @@ registerCommand({
   id: 'file.open',
   category: 'File',
   name: 'Open',
-  keyText: 'Ctrl+O',
+  keyText: 'CtrlOrCommand+O',
   testEnabled: () => getElectron() != null,
   onClick: openElectronFile,
 });
@@ -492,7 +492,7 @@ export function registerFileCommands({
       group: 'save',
       category,
       name: 'Save',
-      // keyText: 'Ctrl+S',
+      // keyText: 'CtrlOrCommand+S',
       icon: 'icon save',
       toolbar: true,
       isRelatedToTab: true,
@@ -524,7 +524,7 @@ export function registerFileCommands({
       icon: 'icon run',
       toolbar: true,
       isRelatedToTab: true,
-      keyText: 'F5 | Ctrl+Enter',
+      keyText: 'F5 | CtrlOrCommand+Enter',
       testEnabled: () =>
         getCurrentEditor() != null &&
         !getCurrentEditor()?.isBusy() &&
@@ -548,8 +548,8 @@ export function registerFileCommands({
       id: idPrefix + '.toggleComment',
       category,
       name: 'Toggle comment',
-      keyText: 'Ctrl+/',
+      keyText: 'CtrlOrCommand+/',
-      disableHandleKeyText: 'Ctrl+/',
+      disableHandleKeyText: 'CtrlOrCommand+/',
       testEnabled: () => getCurrentEditor() != null,
       onClick: () => getCurrentEditor().toggleComment(),
     });
@@ -560,14 +560,14 @@ export function registerFileCommands({
       id: idPrefix + '.find',
       category,
       name: 'Find',
-      keyText: 'Ctrl+F',
+      keyText: 'CtrlOrCommand+F',
       testEnabled: () => getCurrentEditor() != null,
       onClick: () => getCurrentEditor().find(),
     });
     registerCommand({
       id: idPrefix + '.replace',
       category,
-      keyText: 'Ctrl+H',
+      keyText: 'CtrlOrCommand+H',
       name: 'Replace',
       testEnabled: () => getCurrentEditor() != null,
       onClick: () => getCurrentEditor().replace(),
@@ -666,7 +666,7 @@ registerCommand({
   id: 'app.zoomIn',
   category: 'Application',
   name: 'Zoom in',
-  keyText: 'Ctrl+=',
+  keyText: 'CtrlOrCommand+=',
   testEnabled: () => getElectron() != null,
   onClick: () => getElectron().send('window-action', 'zoomin'),
 });
@@ -675,7 +675,7 @@ registerCommand({
   id: 'app.zoomOut',
   category: 'Application',
   name: 'Zoom out',
-  keyText: 'Ctrl+-',
+  keyText: 'CtrlOrCommand+-',
   testEnabled: () => getElectron() != null,
   onClick: () => getElectron().send('window-action', 'zoomout'),
 });

packages/web/src/datagrid/CollectionDataGridCore.svelte

@@ -13,7 +13,7 @@
     id: 'collectionDataGrid.export',
     category: 'Data grid',
     name: 'Export',
-    keyText: 'Ctrl+E',
+    keyText: 'CtrlOrCommand+E',
     icon: 'icon export',
     testEnabled: () => getCurrentEditor() != null,
     onClick: () => getCurrentEditor().exportGrid(),

packages/web/src/datagrid/DataGrid.svelte

@@ -35,7 +35,7 @@
     id: 'dataGrid.toggleLeftPanel',
     category: 'Data grid',
     name: 'Toggle left panel',
-    keyText: 'Ctrl+L',
+    keyText: 'CtrlOrCommand+L',
     testEnabled: () => getCurrentEditor() != null,
     onClick: () => getCurrentEditor().toggleLeftPanel(),
   });

packages/web/src/datagrid/DataGridCore.svelte

@@ -17,7 +17,7 @@
     id: 'dataGrid.revertRowChanges',
     category: 'Data grid',
     name: 'Revert row changes',
-    keyText: 'Ctrl+R',
+    keyText: 'CtrlOrCommand+R',
     testEnabled: () => getCurrentDataGrid()?.getGrider()?.containsChanges,
     onClick: () => getCurrentDataGrid().revertRowChanges(),
   });
@@ -35,7 +35,7 @@
     category: 'Data grid',
     name: 'Delete selected rows',
     toolbarName: 'Delete row(s)',
-    keyText: 'Ctrl+Delete',
+    keyText: 'CtrlOrCommand+Delete',
     icon: 'icon minus',
     testEnabled: () => getCurrentDataGrid()?.getGrider()?.editable,
     onClick: () => getCurrentDataGrid().deleteSelectedRows(),
@@ -56,7 +56,7 @@
     id: 'dataGrid.setNull',
     category: 'Data grid',
     name: 'Set NULL',
-    keyText: 'Ctrl+0',
+    keyText: 'CtrlOrCommand+0',
     testEnabled: () => getCurrentDataGrid()?.getGrider()?.editable,
     onClick: () => getCurrentDataGrid().setFixedValue(null),
   });
@@ -97,8 +97,8 @@
     id: 'dataGrid.copyToClipboard',
     category: 'Data grid',
     name: 'Copy to clipboard',
-    keyText: 'Ctrl+C',
+    keyText: 'CtrlOrCommand+C',
-    disableHandleKeyText: 'Ctrl+C',
+    disableHandleKeyText: 'CtrlOrCommand+C',
     testEnabled: () => getCurrentDataGrid() != null,
     onClick: () => getCurrentDataGrid().copyToClipboard(),
   });
@@ -106,7 +106,7 @@
   registerCommand({
     id: 'dataGrid.editJsonDocument',
     category: 'Data grid',
-    keyText: 'Ctrl+J',
+    keyText: 'CtrlOrCommand+J',
     name: 'Edit row as JSON document',
     testEnabled: () => getCurrentDataGrid()?.editJsonEnabled(),
     onClick: () => getCurrentDataGrid().editJsonDocument(),
@@ -164,7 +164,7 @@
     id: 'dataGrid.filterSelected',
     category: 'Data grid',
     name: 'Filter selected value',
-    keyText: 'Ctrl+Shift+F',
+    keyText: 'CtrlOrCommand+Shift+F',
     testEnabled: () => getCurrentDataGrid()?.getDisplay().filterable,
     onClick: () => getCurrentDataGrid().filterSelectedValue(),
   });
@@ -173,7 +173,7 @@
     id: 'dataGrid.findColumn',
     category: 'Data grid',
     name: 'Find column',
-    keyText: 'Ctrl+F',
+    keyText: 'CtrlOrCommand+F',
     testEnabled: () => getCurrentDataGrid() != null,
     getSubCommands: () => getCurrentDataGrid().buildFindMenu(),
   });
@@ -182,7 +182,7 @@
     id: 'dataGrid.hideColumn',
     category: 'Data grid',
     name: 'Hide column',
-    keyText: 'Ctrl+H',
+    keyText: 'CtrlOrCommand+H',
     testEnabled: () => getCurrentDataGrid() != null,
     onClick: () => getCurrentDataGrid().hideColumn(),
   });
@@ -191,7 +191,7 @@
     id: 'dataGrid.clearFilter',
     category: 'Data grid',
     name: 'Clear filter',
-    keyText: 'Ctrl+I',
+    keyText: 'CtrlOrCommand+I',
     testEnabled: () => getCurrentDataGrid()?.clearFilterEnabled(),
     onClick: () => getCurrentDataGrid().clearFilter(),
   });
@@ -200,7 +200,7 @@
     id: 'dataGrid.generateSqlFromData',
     category: 'Data grid',
     name: 'Generate SQL',
-    keyText: 'Ctrl+G',
+    keyText: 'CtrlOrCommand+G',
     testEnabled: () => getCurrentDataGrid()?.generateSqlFromDataEnabled(),
     onClick: () => getCurrentDataGrid().generateSqlFromData(),
   });
@@ -1433,7 +1433,7 @@
       {
         text: copyRowsFormatDefs[$copyRowsFormat].label,
         onClick: () => copyToClipboardCore($copyRowsFormat),
-        keyText: 'Ctrl+C',
+        keyText: 'CtrlOrCommand+C',
         tag: 'copy',
       },
     ];

packages/web/src/datagrid/JslDataGridCore.svelte

@@ -6,7 +6,7 @@
     category: 'Data grid',
     name: 'Export',
     icon: 'icon export',
-    keyText: 'Ctrl+E',
+    keyText: 'CtrlOrCommand+E',
     testEnabled: () => getCurrentEditor() != null,
     onClick: () => getCurrentEditor().exportGrid(),
   });

packages/web/src/datagrid/SqlDataGridCore.svelte

@@ -22,7 +22,7 @@
     category: 'Data grid',
     name: 'Export',
     icon: 'icon export',
-    keyText: 'Ctrl+E',
+    keyText: 'CtrlOrCommand+E',
     testEnabled: () => getCurrentEditor() != null,
     onClick: () => getCurrentEditor().exportGrid(),
   });

packages/web/src/formview/FormView.svelte

@@ -28,8 +28,8 @@
     id: 'dataForm.copyToClipboard',
     category: 'Data form',
     name: 'Copy to clipboard',
-    keyText: 'Ctrl+C',
+    keyText: 'CtrlOrCommand+C',
-    disableHandleKeyText: 'Ctrl+C',
+    disableHandleKeyText: 'CtrlOrCommand+C',
     testEnabled: () => getCurrentDataForm() != null,
     onClick: () => getCurrentDataForm().copyToClipboard(),
   });
@@ -38,7 +38,7 @@
     id: 'dataForm.revertRowChanges',
     category: 'Data form',
     name: 'Revert row changes',
-    keyText: 'Ctrl+R',
+    keyText: 'CtrlOrCommand+R',
     testEnabled: () => getCurrentDataForm()?.getFormer()?.containsChanges,
     onClick: () => getCurrentDataForm().getFormer().revertRowChanges(),
   });
@@ -47,7 +47,7 @@
     id: 'dataForm.setNull',
     category: 'Data form',
     name: 'Set NULL',
-    keyText: 'Ctrl+0',
+    keyText: 'CtrlOrCommand+0',
     testEnabled: () => getCurrentDataForm() != null,
     onClick: () => getCurrentDataForm().setFixedValue(null),
   });
@@ -88,7 +88,7 @@
     id: 'dataForm.filterSelected',
     category: 'Data form',
     name: 'Filter this value',
-    keyText: 'Ctrl+Shift+F',
+    keyText: 'CtrlOrCommand+Shift+F',
     testEnabled: () => getCurrentDataForm() != null,
     onClick: () => getCurrentDataForm().filterSelectedValue(),
   });
@@ -105,7 +105,7 @@
     id: 'dataForm.goToFirst',
     category: 'Data form',
     name: 'First',
-    keyText: 'Ctrl+Home',
+    keyText: 'CtrlOrCommand+Home',
     toolbar: true,
     isRelatedToTab: true,
     icon: 'icon arrow-begin',
@@ -117,7 +117,7 @@
     id: 'dataForm.goToPrevious',
     category: 'Data form',
     name: 'Previous',
-    keyText: 'Ctrl+ArrowUp',
+    keyText: 'CtrlOrCommand+ArrowUp',
     toolbar: true,
     isRelatedToTab: true,
     icon: 'icon arrow-left',
@@ -129,7 +129,7 @@
     id: 'dataForm.goToNext',
     category: 'Data form',
     name: 'Next',
-    keyText: 'Ctrl+ArrowDown',
+    keyText: 'CtrlOrCommand+ArrowDown',
     toolbar: true,
     isRelatedToTab: true,
     icon: 'icon arrow-right',
@@ -141,7 +141,7 @@
     id: 'dataForm.goToLast',
     category: 'Data form',
     name: 'Last',
-    keyText: 'Ctrl+End',
+    keyText: 'CtrlOrCommand+End',
     toolbar: true,
     isRelatedToTab: true,
     icon: 'icon arrow-end',

packages/web/src/freetable/FreeTableGridCore.svelte

@@ -6,7 +6,7 @@
     category: 'Data grid',
     icon: 'icon export',
     name: 'Export',
-    keyText: 'Ctrl+E',
+    keyText: 'CtrlOrCommand+E',
     testEnabled: () => getCurrentEditor() != null,
     onClick: () => getCurrentEditor().exportGrid(),
   });

packages/web/src/modals/DropDownMenu.svelte

@@ -42,6 +42,7 @@
   import { commandsCustomized, visibleCommandPalette } from '../stores';
   import { prepareMenuItems } from '../utility/contextMenu';
   import FontIcon from '../icons/FontIcon.svelte';
+  import { formatKeyText } from '../utility/common';
 
   export let items;
   export let top;
@@ -115,7 +116,7 @@
         <a on:click={e => handleClick(e, item)} class:disabled={item.disabled}>
           {item.text || item.label}
           {#if item.keyText}
-            <span class="keyText">{item.keyText}</span>
+            <span class="keyText">{formatKeyText(item.keyText)}</span>
           {/if}
           {#if item.submenu}
             <div class="menu-right">

packages/web/src/tabs/CollectionDataTab.svelte

@@ -9,7 +9,7 @@
     group: 'save',
     category: 'Collection data',
     name: 'Save',
-    // keyText: 'Ctrl+S',
+    // keyText: 'CtrlOrCommand+S',
     toolbar: true,
     isRelatedToTab: true,
     icon: 'icon save',

packages/web/src/tabs/FavoriteEditorTab.svelte

@@ -24,7 +24,7 @@
     id: 'favoriteJsonEditor.preview',
     name: 'Preview',
     category: 'Favorite JSON editor',
-    keyText: 'F5 | Ctrl+Enter',
+    keyText: 'F5 | CtrlOrCommand+Enter',
     testEnabled: () => getCurrentEditor() != null,
     onClick: () => getCurrentEditor().preview(),
   });

packages/web/src/tabs/FreeTableTab.svelte

@@ -6,7 +6,7 @@
     group: 'save',
     category: 'Table data',
     name: 'Save',
-    // keyText: 'Ctrl+S',
+    // keyText: 'CtrlOrCommand+S',
     toolbar: true,
     isRelatedToTab: true,
     icon: 'icon save',

packages/web/src/tabs/MarkdownEditorTab.svelte

@@ -20,7 +20,7 @@
     icon: 'icon run',
     toolbar: true,
     isRelatedToTab: true,
-    keyText: 'F5 | Ctrl+Enter',
+    keyText: 'F5 | CtrlOrCommand+Enter',
     testEnabled: () => getCurrentEditor() != null,
     onClick: () => getCurrentEditor().preview(),
   });

packages/web/src/tabs/QueryTab.svelte

@@ -13,7 +13,7 @@
     id: 'query.insertSqlJoin',
     category: 'Query',
     name: 'Insert SQL Join',
-    keyText: 'Ctrl+J',
+    keyText: 'CtrlOrCommand+J',
     testEnabled: () => getCurrentEditor()?.isSqlEditor(),
     onClick: () => getCurrentEditor().insertSqlJoin(),
   });
@@ -34,7 +34,7 @@
     id: 'query.executeCurrent',
     category: 'Query',
     name: 'Execute current',
-    keyText: 'Ctrl+Shift+Enter',
+    keyText: 'CtrlOrCommand+Shift+Enter',
     testEnabled: () =>
       getCurrentEditor() != null && !getCurrentEditor()?.isBusy() && getCurrentEditor()?.hasConnection(),
     onClick: () => getCurrentEditor().executeCurrent(),

packages/web/src/tabs/TableDataTab.svelte

@@ -6,7 +6,7 @@
     group: 'save',
     category: 'Table data',
     name: 'Save',
-    // keyText: 'Ctrl+S',
+    // keyText: 'CtrlOrCommand+S',
     toolbar: true,
     isRelatedToTab: true,
     icon: 'icon save',

packages/web/src/utility/common.ts

@@ -39,3 +39,23 @@ export async function asyncFilter(arr, predicate) {
 
   return arr.filter((_v, index) => results[index]);
 }
+
+export function isMac() {
+  // @ts-ignore
+  const platform = navigator?.platform || navigator?.userAgentData?.platform || 'unknown'
+  return platform.toUpperCase().indexOf('MAC') >= 0;
+}
+
+export function formatKeyText(keyText: string): string {
+  if (isMac()) {
+    return keyText.replace('CtrlOrCommand+', '⌘ ').replace('Shift+', '⇧ ').replace('Alt+', '⌥ ')
+  }
+  return keyText.replace('CtrlOrCommand+', 'Ctrl+');
+}
+
+export function resolveKeyText(keyText: string): string {
+  if (isMac()) {
+    return keyText.replace('CtrlOrCommand+', 'Command+')
+  }
+  return keyText.replace('CtrlOrCommand+', 'Ctrl+');
+}

packages/web/src/widgets/TabsPanel.svelte

@@ -104,7 +104,7 @@
     id: 'tabs.nextTab',
     category: 'Tabs',
     name: 'Next tab',
-    keyText: 'Ctrl+Tab',
+    keyText: 'CtrlOrCommand+Tab',
     testEnabled: () => getOpenedTabs().filter(x => !x.closedTime).length >= 2,
     onClick: () => {
       const tabs = get(openedTabs).filter(x => x.closedTime == null);
@@ -124,7 +124,7 @@
     id: 'tabs.closeTab',
     category: 'Tabs',
     name: 'Close tab',
-    keyText: isElectronAvailable() ? 'Ctrl+W' : null,
+    keyText: isElectronAvailable() ? 'CtrlOrCommand+W' : null,
     testEnabled: () => getOpenedTabs().filter(x => !x.closedTime).length >= 1,
     onClick: closeCurrentTab,
   });

packages/web/src/widgets/Toolbar.svelte

@@ -1,7 +1,9 @@
 <script context="module">
   function getCommandTitle(command) {
     let res = command.text;
-    if (command.keyText || command.keyTextFromGroup) res += ` (${command.keyText || command.keyTextFromGroup})`;
+    if (command.keyText || command.keyTextFromGroup) {
+      res += ` (${formatKeyText(command.keyText || command.keyTextFromGroup)})`;
+    }
     return res;
   }
 </script>
@@ -15,6 +17,7 @@
   import getElectron from '../utility/getElectron';
   import { useFavorites } from '../utility/metadataLoaders';
   import ToolbarButton from '../buttons/ToolbarButton.svelte';
+  import { formatKeyText } from '../utility/common';
 
   const electron = getElectron();