enable hotkeys only when a widget is selected (#2262)

app/client/cypress/support/commands.js

@@ -94,8 +94,9 @@ Cypress.Commands.add("CheckShareIcon", (orgName, count) => {
   cy.get(homePage.orgList.concat(orgName).concat(")"))
     .scrollIntoView()
     .should("be.visible");
-  cy.get(homePage.orgList.concat(orgName).concat(") .org-share-user-icons"))
-    .should('have.length', count)
+  cy.get(
+    homePage.orgList.concat(orgName).concat(") .org-share-user-icons"),
+  ).should("have.length", count);
 });
 
 Cypress.Commands.add("shareApp", (email, role) => {
@@ -1144,8 +1145,8 @@ Cypress.Commands.add("Deletepage", Pagename => {
   cy.get(".t--page-sidebar-" + Pagename + "");
   cy.get(
     ".t--page-sidebar-" +
-    Pagename +
-    ">.t--page-sidebar-menu-actions>.bp3-popover-target",
+      Pagename +
+      ">.t--page-sidebar-menu-actions>.bp3-popover-target",
   ).click({ force: true });
   cy.get(pages.Menuaction).click({ force: true });
   cy.get(pages.Delete).click({ force: true });

app/client/src/pages/Editor/index.tsx

@@ -45,6 +45,8 @@ import {
   pasteWidget,
 } from "actions/widgetActions";
 import { isMac } from "utils/helpers";
+import { getSelectedWidget } from "selectors/ui";
+import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
 
 type EditorProps = {
   currentApplicationId?: string;
@@ -60,11 +62,33 @@ type EditorProps = {
   deleteSelectedWidget: () => void;
   cutSelectedWidget: () => void;
   user?: User;
+  selectedWidget?: string;
 };
 
 type Props = EditorProps & RouteComponentProps<BuilderRouteParams>;
+
+const getSelectedText = () => {
+  if (typeof window.getSelection === "function") {
+    const selectionObj = window.getSelection();
+    return selectionObj && selectionObj.toString();
+  }
+};
+
 @HotkeysTarget
 class Editor extends Component<Props> {
+  public stopPropagationIfWidgetSelected(e: KeyboardEvent): boolean {
+    if (
+      this.props.selectedWidget &&
+      this.props.selectedWidget != MAIN_CONTAINER_WIDGET_ID &&
+      !getSelectedText()
+    ) {
+      e.preventDefault();
+      e.stopPropagation();
+      return true;
+    }
+    return false;
+  }
+
   public renderHotkeys() {
     return (
       <Hotkeys>
@@ -91,10 +115,10 @@ class Editor extends Component<Props> {
           label="Copy Widget"
           group="Canvas"
           onKeyDown={(e: any) => {
-            this.props.copySelectedWidget();
+            if (this.stopPropagationIfWidgetSelected(e)) {
+              this.props.copySelectedWidget();
+            }
           }}
-          preventDefault
-          stopPropagation
         />
         <Hotkey
           global={true}
@@ -104,19 +128,6 @@ class Editor extends Component<Props> {
           onKeyDown={(e: any) => {
             this.props.pasteCopiedWidget();
           }}
-          preventDefault
-          stopPropagation
-        />
-        <Hotkey
-          global={true}
-          combo="del"
-          label="Delete Widget"
-          group="Canvas"
-          onKeyDown={(e: any) => {
-            if (!isMac()) this.props.deleteSelectedWidget();
-          }}
-          preventDefault
-          stopPropagation
         />
         <Hotkey
           global={true}
@@ -124,10 +135,10 @@ class Editor extends Component<Props> {
           label="Delete Widget"
           group="Canvas"
           onKeyDown={(e: any) => {
-            if (isMac()) this.props.deleteSelectedWidget();
+            if (this.stopPropagationIfWidgetSelected(e) && isMac()) {
+              this.props.pasteCopiedWidget();
+            }
           }}
-          preventDefault
-          stopPropagation
         />
         <Hotkey
           global={true}
@@ -135,10 +146,10 @@ class Editor extends Component<Props> {
           label="Delete Widget"
           group="Canvas"
           onKeyDown={(e: any) => {
-            this.props.deleteSelectedWidget();
+            if (this.stopPropagationIfWidgetSelected(e)) {
+              this.props.deleteSelectedWidget();
+            }
           }}
-          preventDefault
-          stopPropagation
         />
         <Hotkey
           global={true}
@@ -146,10 +157,10 @@ class Editor extends Component<Props> {
           label="Cut Widget"
           group="Canvas"
           onKeyDown={(e: any) => {
-            this.props.cutSelectedWidget();
+            if (this.stopPropagationIfWidgetSelected(e)) {
+              this.props.cutSelectedWidget();
+            }
           }}
-          preventDefault
-          stopPropagation
         />
       </Hotkeys>
     );
@@ -264,6 +275,7 @@ const mapStateToProps = (state: AppState) => ({
   isEditorLoading: getIsEditorLoading(state),
   isEditorInitialized: getIsEditorInitialized(state),
   user: getCurrentUser(state),
+  selectedWidget: getSelectedWidget(state),
 });
 
 const mapDispatchToProps = (dispatch: any) => {

app/client/src/selectors/ui.tsx

@@ -0,0 +1,4 @@
+import { AppState } from "reducers";
+
+export const getSelectedWidget = (state: AppState) =>
+  state.ui.widgetDragResize.selectedWidget;