Skip to content
Snippets Groups Projects
Commit e807bfbc authored by fazilitehreem's avatar fazilitehreem Committed by Jesse Baker
Browse files

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"
parent 86391126
No related branches found
No related tags found
1 merge request!242#3471154: Handled delete component with delete button
Pipeline #274745 passed
......@@ -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');
});
});
......@@ -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);
......
......@@ -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]) => {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment