Issue #3471154 by utkarsh_33, fazilitehreem, jessebaker: Allow deleting...

Issue #3471154 by utkarsh_33, fazilitehreem, jessebaker: Allow deleting component instances by pressing "Delete" or "Backspace"

tests/src/Cypress/cypress/e2e/xb-general.cy.js

@@ -521,4 +521,49 @@ describe('General Experience Builder', { testIsolation: false }, () => {
     // Assert that only one request was sent
     cy.get('@getPreview.all').should('have.length', 1);
   });
+
+  it('Can delete component with delete button', () => {
+    cy.drupalLogin('xbUser', 'xbUser');
+    cy.loadURLandWaitForXBLoaded();
+
+    // Check there are three heroes initially.
+    cy.testInIframe(
+      '[data-xb-component-id="experience_builder:my-hero"]',
+      (myHeroComponent) => {
+        expect(myHeroComponent.length).to.equal(3);
+      },
+    );
+
+    // Select the component and ensure it's focused
+    cy.getIframeBody()
+      .find(`[data-xb-component-id="experience_builder:my-hero"]`)
+      .first()
+      .click();
+
+    cy.getIframeBody().realPress('{del}');
+
+    // Check there are two heroes after deleting
+    cy.testInIframe(
+      '[data-xb-component-id="experience_builder:my-hero"]',
+      (myHeroComponent) => {
+        expect(myHeroComponent.length).to.equal(2);
+      },
+    );
+    cy.getIframeBody()
+      .find(`[data-xb-component-id="experience_builder:my-hero"]`)
+      .first()
+      .click();
+
+    cy.get('[data-xb-uuid="root"]').click();
+    cy.realPress('{del}');
+    cy.getIframeBody().find('[data-component-id="experience_builder:two_column"] .column-one').should('have.length', 1);
+
+    // Deleting from the content menu.
+    cy.get('[data-xb-uuid="root"]').findByText('Two Column').click();
+    cy.realPress('{del}');
+
+    cy.get('[data-xb-uuid="root"]').findByText('Two Column').should('not.exist');
+
+  });
+
 });

ui/src/features/canvas/Canvas.tsx

@@ -15,7 +15,9 @@ import {
   selectPanning,
   setPanningIFrame,
   setPanningParent,
+  selectSelectedComponent,
 } from '@/features/ui/uiSlice';
+import { deleteNode } from '../layout/layoutModelSlice';
 
 const Canvas = () => {
   const dispatch = useAppDispatch();
@@ -29,6 +31,7 @@ const Canvas = () => {
     useAppSelector(selectPanning);
   const [modifierKeyPressed, setModifierKeyPressed] = useState(false);
   const modifierKeyPressedRef = useRef(false);
+  const selectedComponent = useAppSelector(selectSelectedComponent);
   useHotkeys(['NumpadAdd', 'Equal'], () => dispatch(canvasViewPortZoomIn()));
   useHotkeys(['Minus', 'NumpadSubtract'], () =>
     dispatch(canvasViewPortZoomOut()),
@@ -41,6 +44,11 @@ const Canvas = () => {
     keydown: false,
     keyup: true,
   });
+  useHotkeys(['Backspace', 'Delete'], () => {
+    if (selectedComponent) {
+      dispatch(deleteNode(selectedComponent));
+    }
+  });
   const isPanningParentRef = useRef(isPanningParent);
   const isPanningIFrameRef = useRef(isPanningIFrame);
 
@@ -89,6 +97,8 @@ const Canvas = () => {
           isPanningIFrameRef.current &&
             handlePreviewMouseMove(event.data.coordinates);
           break;
+        case 'dispatchDeleteKey':
+          selectedComponent && dispatch(deleteNode(selectedComponent));
       }
     }
     window.addEventListener('message', handleIframeEvent);

ui/src/hooks/useIframeKeyHandlers.ts

@@ -31,6 +31,9 @@ function useIframeKeyHandlers(iframeRef: React.RefObject<HTMLIFrameElement>) {
         event.type === 'keydown' && event.key === modifierKey,
       dispatchModifierKeyUp:
         event.type === 'keyup' && event.key === modifierKey,
+      dispatchDeleteKey:
+        event.type === 'keydown' &&
+        (event.key === 'Backspace' || event.key === 'Delete'),
     };
 
     Object.entries(keyCombinations).some(([message, shouldDispatch]) => {