From de6dc26d6ca0bb698a628b7a7c8442683f617697 Mon Sep 17 00:00:00 2001
From: Konstantin Ullrich <konstantinullrich12@gmail.com>
Date: Fri, 13 Mar 2020 16:14:30 +0100
Subject: [PATCH 1/3] Replace native Context Menu with a syleguided one in
 SearchInput

---
 ts/components/session/SessionSearchInput.tsx | 81 +++++++++++++++++---
 1 file changed, 69 insertions(+), 12 deletions(-)

diff --git a/ts/components/session/SessionSearchInput.tsx b/ts/components/session/SessionSearchInput.tsx
index c92b0cb1b..8cae48432 100644
--- a/ts/components/session/SessionSearchInput.tsx
+++ b/ts/components/session/SessionSearchInput.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
+import { ContextMenu, ContextMenuTrigger, MenuItem } from 'react-contextmenu';
 
 interface Props {
   searchString: string;
@@ -12,24 +13,56 @@ export class SessionSearchInput extends React.Component<Props> {
   public constructor(props: Props) {
     super(props);
     this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleUndo = this.handleUndo.bind(this);
+    this.handleRedo = this.handleRedo.bind(this);
+    this.handleCut = this.handleCut.bind(this);
+    this.handleCopy = this.handleCopy.bind(this);
+    this.handlePast = this.handlePast.bind(this);
+    this.handleSelectAll = this.handleSelectAll.bind(this);
   }
 
   public render() {
     const { searchString } = this.props;
+    const triggerId = `session-search-input-context`;
 
     return (
-      <div className="session-search-input">
-        <SessionIconButton
-          iconSize={SessionIconSize.Medium}
-          iconType={SessionIconType.Search}
-        />
-        <input
-          value={searchString}
-          onChange={e => this.props.onChange(e.target.value)}
-          onKeyDown={this.handleKeyDown}
-          placeholder={this.props.placeholder}
-        />
-      </div>
+      <>
+        <ContextMenuTrigger id={triggerId}>
+          <div className="session-search-input">
+            <SessionIconButton
+              iconSize={SessionIconSize.Medium}
+              iconType={SessionIconType.Search}
+            />
+            <input
+              value={searchString}
+              onChange={e => this.props.onChange(e.target.value)}
+              onKeyDown={this.handleKeyDown}
+              placeholder={this.props.placeholder}
+            />
+          </div>
+        </ContextMenuTrigger>
+        <ContextMenu id={triggerId}>
+          <MenuItem onClick={this.handleUndo}>
+            {window.i18n('editMenuUndo')}
+          </MenuItem>
+          <MenuItem onClick={this.handleRedo}>
+            {window.i18n('editMenuRedo')}
+          </MenuItem>
+          <hr />
+          <MenuItem onClick={this.handleCut}>
+            {window.i18n('editMenuCut')}
+          </MenuItem>
+          <MenuItem onClick={this.handleCopy}>
+            {window.i18n('editMenuCopy')}
+          </MenuItem>
+          <MenuItem onClick={this.handlePast}>
+            {window.i18n('editMenuPaste')}
+          </MenuItem>
+          <MenuItem onClick={this.handleSelectAll}>
+            {window.i18n('editMenuSelectAll')}
+          </MenuItem>
+        </ContextMenu>
+      </>
     );
   }
 
@@ -42,4 +75,28 @@ export class SessionSearchInput extends React.Component<Props> {
       }
     }
   }
+
+  public handleUndo() {
+    document.execCommand('undo');
+  }
+
+  public handleRedo() {
+    document.execCommand('redo');
+  }
+
+  public handleCut() {
+    document.execCommand('cut');
+  }
+
+  public handleCopy() {
+    document.execCommand('copy');
+  }
+
+  public handlePast() {
+    document.execCommand('paste');
+  }
+
+  public handleSelectAll() {
+    document.execCommand('selectAll');
+  }
 }

From e9be9bcbc5a89d5753c63bd78ab6e4f46a383bfc Mon Sep 17 00:00:00 2001
From: Konstantin Ullrich <konstantinullrich12@gmail.com>
Date: Fri, 13 Mar 2020 16:23:27 +0100
Subject: [PATCH 2/3] lint quotemark  ` should be '

---
 ts/components/session/SessionSearchInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ts/components/session/SessionSearchInput.tsx b/ts/components/session/SessionSearchInput.tsx
index 8cae48432..769092536 100644
--- a/ts/components/session/SessionSearchInput.tsx
+++ b/ts/components/session/SessionSearchInput.tsx
@@ -23,7 +23,7 @@ export class SessionSearchInput extends React.Component<Props> {
 
   public render() {
     const { searchString } = this.props;
-    const triggerId = `session-search-input-context`;
+    const triggerId = 'session-search-input-context';
 
     return (
       <>

From 447ba9d3aa388e789654b97650e996feb1cbfd45 Mon Sep 17 00:00:00 2001
From: Konstantin Ullrich <konstantinullrich12@gmail.com>
Date: Wed, 18 Mar 2020 08:13:44 +0100
Subject: [PATCH 3/3] Remove redundant code from SessionSearchInput

---
 ts/components/session/SessionSearchInput.tsx | 42 +++-----------------
 1 file changed, 6 insertions(+), 36 deletions(-)

diff --git a/ts/components/session/SessionSearchInput.tsx b/ts/components/session/SessionSearchInput.tsx
index 769092536..ddbc71a53 100644
--- a/ts/components/session/SessionSearchInput.tsx
+++ b/ts/components/session/SessionSearchInput.tsx
@@ -13,12 +13,6 @@ export class SessionSearchInput extends React.Component<Props> {
   public constructor(props: Props) {
     super(props);
     this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleUndo = this.handleUndo.bind(this);
-    this.handleRedo = this.handleRedo.bind(this);
-    this.handleCut = this.handleCut.bind(this);
-    this.handleCopy = this.handleCopy.bind(this);
-    this.handlePast = this.handlePast.bind(this);
-    this.handleSelectAll = this.handleSelectAll.bind(this);
   }
 
   public render() {
@@ -42,23 +36,23 @@ export class SessionSearchInput extends React.Component<Props> {
           </div>
         </ContextMenuTrigger>
         <ContextMenu id={triggerId}>
-          <MenuItem onClick={this.handleUndo}>
+          <MenuItem onClick={() => document.execCommand('undo')}>
             {window.i18n('editMenuUndo')}
           </MenuItem>
-          <MenuItem onClick={this.handleRedo}>
+          <MenuItem onClick={() => document.execCommand('redo')}>
             {window.i18n('editMenuRedo')}
           </MenuItem>
           <hr />
-          <MenuItem onClick={this.handleCut}>
+          <MenuItem onClick={() => document.execCommand('cut')}>
             {window.i18n('editMenuCut')}
           </MenuItem>
-          <MenuItem onClick={this.handleCopy}>
+          <MenuItem onClick={() => document.execCommand('copy')}>
             {window.i18n('editMenuCopy')}
           </MenuItem>
-          <MenuItem onClick={this.handlePast}>
+          <MenuItem onClick={() => document.execCommand('paste')}>
             {window.i18n('editMenuPaste')}
           </MenuItem>
-          <MenuItem onClick={this.handleSelectAll}>
+          <MenuItem onClick={() => document.execCommand('selectAll')}>
             {window.i18n('editMenuSelectAll')}
           </MenuItem>
         </ContextMenu>
@@ -75,28 +69,4 @@ export class SessionSearchInput extends React.Component<Props> {
       }
     }
   }
-
-  public handleUndo() {
-    document.execCommand('undo');
-  }
-
-  public handleRedo() {
-    document.execCommand('redo');
-  }
-
-  public handleCut() {
-    document.execCommand('cut');
-  }
-
-  public handleCopy() {
-    document.execCommand('copy');
-  }
-
-  public handlePast() {
-    document.execCommand('paste');
-  }
-
-  public handleSelectAll() {
-    document.execCommand('selectAll');
-  }
 }