fix: improve context menu prevention logic for specific elements (#609)

Refs: CO-2083

- update the listener to traverse `event.composedPath()`
and check for allowed checks anywhere in the hierarchy

Author: keshavbhatt

src/index.test.tsx

@@ -0,0 +1,117 @@
+/*
+ * SPDX-FileCopyrightText: 2025 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import '@testing-library/jest-dom';
+
+jest.mock('react-dom/client', () => ({
+	createRoot: jest.fn().mockImplementation(() => ({
+		render: jest.fn(),
+		unmount: jest.fn()
+	}))
+}));
+
+describe('index.tsx - Context Menu Behavior', () => {
+	let originalGetSelection: typeof window.getSelection;
+
+	beforeAll(() => {
+		originalGetSelection = window.getSelection;
+		import('./index');
+	});
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+		window.getSelection = originalGetSelection;
+		document.body.innerHTML = '';
+	});
+
+	it('should block context menu for regular elements', () => {
+		const target = document.body;
+		const event = new MouseEvent('contextmenu', {
+			bubbles: true,
+			cancelable: true,
+			composed: true
+		});
+		const preventDefaultSpy = jest.spyOn(event, 'preventDefault');
+
+		target.dispatchEvent(event);
+
+		expect(preventDefaultSpy).toHaveBeenCalled();
+	});
+
+	it('should allow context menu for A tags', () => {
+		const link = document.createElement('a');
+		document.body.appendChild(link);
+		const event = new MouseEvent('contextmenu', {
+			bubbles: true,
+			cancelable: true,
+			composed: true
+		});
+		const preventDefaultSpy = jest.spyOn(event, 'preventDefault');
+
+		link.dispatchEvent(event);
+
+		expect(preventDefaultSpy).not.toHaveBeenCalled();
+	});
+
+	it('should allow context menu for IMG tags', () => {
+		const img = document.createElement('img');
+		document.body.appendChild(img);
+		const event = new MouseEvent('contextmenu', {
+			bubbles: true,
+			cancelable: true,
+			composed: true
+		});
+		const preventDefaultSpy = jest.spyOn(event, 'preventDefault');
+
+		img.dispatchEvent(event);
+
+		expect(preventDefaultSpy).not.toHaveBeenCalled();
+	});
+
+	it('should allow context menu for bypass-class elements', () => {
+		const div = document.createElement('div');
+		div.classList.add('carbonio-bypass-context-menu');
+		document.body.appendChild(div);
+		const event = new MouseEvent('contextmenu', {
+			bubbles: true,
+			cancelable: true,
+			composed: true
+		});
+		const preventDefaultSpy = jest.spyOn(event, 'preventDefault');
+
+		div.dispatchEvent(event);
+
+		expect(preventDefaultSpy).not.toHaveBeenCalled();
+	});
+
+	it('should allow context menu for text selections', () => {
+		const range = document.createRange();
+		const textNode = document.createTextNode('selectable text');
+		document.body.appendChild(textNode);
+		range.selectNode(textNode);
+
+		window.getSelection = jest.fn(
+			() =>
+				({
+					type: 'Range',
+					rangeCount: 1,
+					getRangeAt: jest.fn(() => range)
+				}) as never
+		);
+
+		const event = new MouseEvent('contextmenu', {
+			bubbles: true,
+			cancelable: true,
+			composed: true
+		});
+		const preventDefaultSpy = jest.spyOn(event, 'preventDefault');
+
+		textNode.dispatchEvent(event);
+
+		expect(preventDefaultSpy).not.toHaveBeenCalled();
+
+		document.body.childNodes.forEach((n) => n.nodeType === Node.TEXT_NODE && n.remove());
+	});
+});

src/index.tsx

@@ -19,21 +19,21 @@ import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
 
 window.addEventListener('contextmenu', (ev) => {
-	if (
-		!(
-			['IMG', 'A'].find(
-				(name) => ev?.target instanceof HTMLElement && ev.target.tagName === name
-			) ||
-			ev.view?.getSelection?.()?.type === 'Range' ||
-			ev
-				.composedPath()
-				.find(
-					(element) =>
-						element instanceof HTMLElement &&
-						element.classList.contains('carbonio-bypass-context-menu')
-				)
-		)
-	) {
+	const path = ev.composedPath?.() || [];
+
+	const isAllowedTarget = path.some(
+		(element) => element instanceof HTMLElement && ['A', 'IMG'].includes(element.tagName)
+	);
+
+	const selection = window.getSelection?.();
+	const isTextSelection = selection?.type === 'Range';
+
+	const hasBypassClass = path.some(
+		(element) =>
+			element instanceof HTMLElement && element.classList.contains('carbonio-bypass-context-menu')
+	);
+
+	if (!(isAllowedTarget || isTextSelection || hasBypassClass)) {
 		ev.preventDefault();
 	}
 });