Manually handle misbehaving keyboard shortcuts (#1092)

* manually handle misbehaving keyboard shortcuts

MM-19198
MM-19032

includes zooming, redo/undo & copy/cut/paste for good measure

* manually handle misbehaving menu items

* bump electron minor version

* remove temp log import

* update context menu package version

package-lock.json

@@ -1391,9 +1391,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "10.14.18",
+      "version": "10.17.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.14.18.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.0.tgz",
-      "integrity": "sha512-ryO3Q3++yZC/+b8j8BdKd/dn9JlzlHBPdm80656xwYUdmPkpTGTjkAdt6BByiNupGPE8w0FhBgvYy/fX9hRNGQ==",
+      "integrity": "sha512-wuJwN2KV4tIRz1bu9vq5kSPasJ8IsEjZaP1ZR7KlmdUZvGF/rXy8DmXOVwUD0kAtvtJ7aqMKPqUXC0NUTDbrDg==",
       "dev": true
     },
     "@webassemblyjs/ast": {
@@ -4650,9 +4650,9 @@
       "dev": true
     },
     "electron": {
-      "version": "5.0.10",
+      "version": "5.0.11",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-5.0.10.tgz",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-5.0.11.tgz",
-      "integrity": "sha512-OSyxTlJ+7Yf0B+6pTdHdxY9RvI4U+mVKAbn+CkAOWxlCPMg3K+jt5UHKSPRRLnXQhQ0Tulg4vupbC0k27aukVw==",
+      "integrity": "sha512-2QVVycTmvMmKC3S9XV7zSvouYBooHRTOBx1r64nBwtMh44gPydR3HzUbyVYjjxsw+4vIuH6AqNuY48KtWRpajg==",
       "dev": true,
       "requires": {
         "@types/node": "^10.12.18",

package.json

@@ -52,7 +52,7 @@
     "cross-env": "^5.2.0",
     "css-loader": "^1.0.1",
     "devtron": "^1.4.0",
-    "electron": "^5.0.10",
+    "electron": "^5.0.11",
     "electron-builder": "^21.2.0",
     "electron-connect": "^0.6.3",
     "electron-notarize": "^0.1.1",

src/browser/components/MainPage.jsx

@@ -78,6 +78,17 @@ export default class MainPage extends React.Component {
     return null;
   }
 
+  getTabWebContents(index = this.state.key || 0, teams = this.props.teams) {
+    if (!teams || !teams.length || index > teams.length) {
+      return null;
+    }
+    const tabURL = teams[index].url;
+    if (!tabURL) {
+      return null;
+    }
+    return remote.webContents.getAllWebContents().find((webContents) => webContents.getURL().includes(tabURL));
+  }
+
   componentDidMount() {
     const self = this;
     ipcRenderer.on('login-request', (event, request, authInfo) => {
@@ -133,6 +144,84 @@ export default class MainPage extends React.Component {
       document.getElementById(`mattermostView${self.state.key}`).openDevTools();
     });
 
+    ipcRenderer.on('zoom-in', () => {
+      const activeTabWebContents = this.getTabWebContents(this.state.key);
+      if (!activeTabWebContents) {
+        return;
+      }
+      if (activeTabWebContents.getZoomLevel() >= 9) {
+        return;
+      }
+      activeTabWebContents.setZoomLevel(activeTabWebContents.getZoomLevel() + 1);
+    });
+
+    ipcRenderer.on('zoom-out', () => {
+      const activeTabWebContents = this.getTabWebContents(this.state.key);
+      if (!activeTabWebContents) {
+        return;
+      }
+      if (activeTabWebContents.getZoomLevel() <= -8) {
+        return;
+      }
+      activeTabWebContents.setZoomLevel(activeTabWebContents.getZoomLevel() - 1);
+    });
+
+    ipcRenderer.on('zoom-reset', () => {
+      const activeTabWebContents = this.getTabWebContents(this.state.key);
+      if (!activeTabWebContents) {
+        return;
+      }
+      activeTabWebContents.setZoomLevel(0);
+    });
+
+    ipcRenderer.on('undo', () => {
+      const activeTabWebContents = this.getTabWebContents(this.state.key);
+      if (!activeTabWebContents) {
+        return;
+      }
+      activeTabWebContents.undo();
+    });
+
+    ipcRenderer.on('redo', () => {
+      const activeTabWebContents = this.getTabWebContents(this.state.key);
+      if (!activeTabWebContents) {
+        return;
+      }
+      activeTabWebContents.redo();
+    });
+
+    ipcRenderer.on('cut', () => {
+      const activeTabWebContents = this.getTabWebContents(this.state.key);
+      if (!activeTabWebContents) {
+        return;
+      }
+      activeTabWebContents.cut();
+    });
+
+    ipcRenderer.on('copy', () => {
+      const activeTabWebContents = this.getTabWebContents(this.state.key);
+      if (!activeTabWebContents) {
+        return;
+      }
+      activeTabWebContents.copy();
+    });
+
+    ipcRenderer.on('paste', () => {
+      const activeTabWebContents = this.getTabWebContents(this.state.key);
+      if (!activeTabWebContents) {
+        return;
+      }
+      activeTabWebContents.paste();
+    });
+
+    ipcRenderer.on('paste-and-match', () => {
+      const activeTabWebContents = this.getTabWebContents(this.state.key);
+      if (!activeTabWebContents) {
+        return;
+      }
+      activeTabWebContents.pasteAndMatchStyle();
+    });
+
     //goBack and goForward
     ipcRenderer.on('go-back', () => {
       const mattermost = self.refs[`mattermostView${self.state.key}`];

src/main.js

@@ -445,6 +445,62 @@ function handleAppWebContentsCreated(dc, contents) {
     }
     popupWindow.loadURL(url);
   });
+
+  // implemented to temporarily help solve for https://community-daily.mattermost.com/core/pl/b95bi44r4bbnueqzjjxsi46qiw
+  contents.on('before-input-event', (event, input) => {
+    if (!input.shift && !input.control && !input.alt && !input.meta) {
+      return;
+    }
+
+    if ((process.platform === 'darwin' && !input.meta) || (process.platform !== 'darwin' && !input.control)) {
+      return;
+    }
+
+    // handle certain keyboard shortcuts manually
+    switch (input.key) { // eslint-disable-line padded-blocks
+
+    // Manually handle zoom-in/out/reset keyboard shortcuts
+    // - temporary fix for https://mattermost.atlassian.net/browse/MM-19031 and https://mattermost.atlassian.net/browse/MM-19032
+    case '-':
+      mainWindow.webContents.send('zoom-out');
+      break;
+    case '=':
+      mainWindow.webContents.send('zoom-in');
+      break;
+    case '0':
+      mainWindow.webContents.send('zoom-reset');
+      break;
+
+    // Manually handle undo/redo keyboard shortcuts
+    // - temporary fix for https://mattermost.atlassian.net/browse/MM-19198
+    case 'z':
+      if (input.shift) {
+        mainWindow.webContents.send('redo');
+      } else {
+        mainWindow.webContents.send('undo');
+      }
+      break;
+
+    // Manually handle copy/cut/paste keyboard shortcuts
+    case 'c':
+      mainWindow.webContents.send('copy');
+      break;
+    case 'x':
+      mainWindow.webContents.send('cut');
+      break;
+    case 'v':
+      if (input.shift) {
+        mainWindow.webContents.send('paste-and-match');
+      } else {
+        mainWindow.webContents.send('paste');
+      }
+      break;
+    default:
+      // allows the input event to proceed if not handled by a case above
+      return;
+    }
+    event.preventDefault();
+  });
 }
 
 function initializeAfterAppReady() {

src/main/menus/app.js

@@ -76,15 +76,42 @@ function createTemplate(mainWindow, config, isDev) {
   template.push({
     label: '&Edit',
     submenu: [{
-      role: 'undo',
+      label: 'Undo',
+      accelerator: 'CmdOrCtrl+Z',
+      click() {
+        mainWindow.webContents.send('undo');
+      },
     }, {
-      role: 'redo',
+      label: 'Redo',
+      accelerator: 'CmdOrCtrl+SHIFT+Z',
+      click() {
+        mainWindow.webContents.send('redo');
+      },
     }, separatorItem, {
-      role: 'cut',
+      label: 'Cut',
+      accelerator: 'CmdOrCtrl+X',
+      click() {
+        mainWindow.webContents.send('cut');
+      },
     }, {
-      role: 'copy',
+      label: 'Copy',
+      accelerator: 'CmdOrCtrl+C',
+      click() {
+        mainWindow.webContents.send('copy');
+      },
     }, {
-      role: 'paste',
+      label: 'Paste',
+      accelerator: 'CmdOrCtrl+V',
+      click() {
+        mainWindow.webContents.send('paste');
+      },
+    }, {
+      label: 'Paste and Match Style',
+      accelerator: 'CmdOrCtrl+SHIFT+V',
+      visible: process.platform === 'darwin',
+      click() {
+        mainWindow.webContents.send('paste-and-match');
+      },
     }, {
       role: 'selectall',
     }],
@@ -126,21 +153,23 @@ function createTemplate(mainWindow, config, isDev) {
     }, {
       role: 'togglefullscreen',
     }, separatorItem, {
-      role: 'resetzoom',
+      label: 'Actual Size',
+      accelerator: 'CmdOrCtrl+0',
+      click() {
+        mainWindow.webContents.send('zoom-reset');
+      },
     }, {
-      role: 'zoomin',
+      label: 'Zoom In',
+      accelerator: 'CmdOrCtrl+SHIFT+=',
+      click() {
+        mainWindow.webContents.send('zoom-in');
+      },
     }, {
-      label: 'Zoom In (hidden)',
+      label: 'Zoom Out',
-      accelerator: 'CmdOrCtrl+=',
+      accelerator: 'CmdOrCtrl+-',
-      visible: false,
+      click() {
-      role: 'zoomin',
+        mainWindow.webContents.send('zoom-out');
-    }, {
+      },
-      role: 'zoomout',
-    }, {
-      label: 'Zoom Out (hidden)',
-      accelerator: 'CmdOrCtrl+Shift+-',
-      visible: false,
-      role: 'zoomout',
     }, separatorItem, {
       label: 'Developer Tools for Application Wrapper',
       accelerator: (() => {

src/package-lock.json

@@ -72,6 +72,14 @@
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
       "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
     },
+    "ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "requires": {
+        "color-convert": "^1.9.0"
+      }
+    },
     "applescript": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/applescript/-/applescript-1.0.0.tgz",
@@ -85,6 +93,11 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "astral-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz",
+      "integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg=="
+    },
     "auto-launch": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/auto-launch/-/auto-launch-5.0.5.tgz",
@@ -182,6 +195,45 @@
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
       "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
     },
+    "cli-truncate": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.0.0.tgz",
+      "integrity": "sha512-C4hp+8GCIFVsUUiXcw+ce+7wexVWImw8rQrgMBFsqerx9LvvcGlwm6sMjQYAEmV/Xb87xc1b5Ttx505MSpZVqg==",
+      "requires": {
+        "slice-ansi": "^2.1.0",
+        "string-width": "^4.1.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
+        },
+        "string-width": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.1.0.tgz",
+          "integrity": "sha512-NrX+1dVVh+6Y9dnQ19pR0pP4FiEIlUvdTGn8pw6CKTNq5sgib2nIhmUNT5TAmhWmvKr3WcxBcP3E8nWezuipuQ==",
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^5.2.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        }
+      }
+    },
     "cliui": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
@@ -197,6 +249,19 @@
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
       "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
     },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -238,10 +303,11 @@
       }
     },
     "electron-context-menu": {
-      "version": "0.10.1",
+      "version": "0.15.0",
-      "resolved": "https://registry.npmjs.org/electron-context-menu/-/electron-context-menu-0.10.1.tgz",
+      "resolved": "https://registry.npmjs.org/electron-context-menu/-/electron-context-menu-0.15.0.tgz",
-      "integrity": "sha512-KFkKwFbT6iJUgarEknYuXQlJAT+naJZtSWFBtHf9RiSb70wscWdDNpYoUERzF7FgqYE1Mil4npfRWsjqGLwtog==",
+      "integrity": "sha512-XLdtbX90NPkWycG3IzwtCmfX4ggu+lofNOW1nVRStb+ScFs49WTourW1k77Z4DTyThR3gUHg3UPXVBMbW1gNsg==",
       "requires": {
+        "cli-truncate": "^2.0.0",
         "electron-dl": "^1.2.0",
         "electron-is-dev": "^1.0.1"
       }
@@ -258,9 +324,9 @@
       }
     },
     "electron-dl": {
-      "version": "1.12.0",
+      "version": "1.14.0",
-      "resolved": "https://registry.npmjs.org/electron-dl/-/electron-dl-1.12.0.tgz",
+      "resolved": "https://registry.npmjs.org/electron-dl/-/electron-dl-1.14.0.tgz",
-      "integrity": "sha512-UMc2CL45Ybpvu66LDPYzwmDRmYK4Ivz+wdnTM0eXcNMztvQwhixAk2UPme1c7McqG8bAlKEkQpZn3epmQy4EWg==",
+      "integrity": "sha512-4okyei42a1mLsvLK7hLrIfd20EQzB18nIlLTwBV992aMSmTGLUEFRTmO1MfSslGNrzD8nuPuy1l/VxO8so4lig==",
       "requires": {
         "ext-name": "^5.0.0",
         "pupa": "^1.0.0",
@@ -300,6 +366,11 @@
         }
       }
     },
+    "emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
     "esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
@@ -463,9 +534,9 @@
       }
     },
     "mime-db": {
-      "version": "1.37.0",
+      "version": "1.42.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.37.0.tgz",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.42.0.tgz",
-      "integrity": "sha512-R3C4db6bgQhlIhPU48fUtdVmKnflq+hRdad7IyKhtFj06VPNVdk2RhiYL3UjQIlso8L+YxAtFkobT0VK+S/ybg=="
+      "integrity": "sha512-UbfJCR4UAVRNgMpfImz05smAXK7+c+ZntjaA26ANtkXLlOe947Aag5zdIcKQULAiF9Cq4WxBi9jUs5zkA84bYQ=="
     },
     "minimatch": {
       "version": "3.0.4",
@@ -688,6 +759,23 @@
         "unzip-stream": "^0.3.0"
       }
     },
+    "slice-ansi": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz",
+      "integrity": "sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==",
+      "requires": {
+        "ansi-styles": "^3.2.0",
+        "astral-regex": "^1.0.0",
+        "is-fullwidth-code-point": "^2.0.0"
+      },
+      "dependencies": {
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+        }
+      }
+    },
     "sort-keys": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",

src/package.json

@@ -12,7 +12,7 @@
     "@hapi/joi": "^15.1.0",
     "auto-launch": "^5.0.5",
     "bootstrap": "^3.3.7",
-    "electron-context-menu": "^0.10.1",
+    "electron-context-menu": "^0.15.0",
     "electron-devtools-installer": "^2.2.4",
     "electron-is-dev": "^1.0.1",
     "electron-log": "^2.2.17",