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
mattermost · Oct 28, 2019 · 81c32c2 · 81c32c2
1 parent d017a68
commit 81c32c2
Show file tree

Hide file tree

Showing 7 changed files with 297 additions and 35 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/src/browser/components/MainPage.jsx b/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}`];

diff --git a/src/main.js b/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() {

diff --git a/src/main/menus/app.js b/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',
-    }, {
-      role: 'zoomin',
-    }, {
-      label: 'Zoom In (hidden)',
-      accelerator: 'CmdOrCtrl+=',
-      visible: false,
-      role: 'zoomin',
+      label: 'Actual Size',
+      accelerator: 'CmdOrCtrl+0',
+      click() {
+        mainWindow.webContents.send('zoom-reset');
+      },
     }, {
-      role: 'zoomout',
+      label: 'Zoom In',
+      accelerator: 'CmdOrCtrl+SHIFT+=',
+      click() {
+        mainWindow.webContents.send('zoom-in');
+      },
     }, {
-      label: 'Zoom Out (hidden)',
-      accelerator: 'CmdOrCtrl+Shift+-',
-      visible: false,
-      role: 'zoomout',
+      label: 'Zoom Out',
+      accelerator: 'CmdOrCtrl+-',
+      click() {
+        mainWindow.webContents.send('zoom-out');
+      },
     }, separatorItem, {
       label: 'Developer Tools for Application Wrapper',
       accelerator: (() => {