fix(interface): keep middle-click target platform agnostic

Author: OldFriendWenjianjian

apps/tauri/src/platform.ts

@@ -25,7 +25,17 @@ export const platform: Platform = {
 	platform: 'tauri',
 
 	getMiddleClickNavigationGuardEnvironment() {
-		return {userAgent: navigator.userAgent, eventTarget: document};
+		return {
+			userAgent: navigator.userAgent,
+			eventTarget: {
+				addEventListener(type, listener, options) {
+					document.addEventListener(type, listener, options);
+				},
+				removeEventListener(type, listener) {
+					document.removeEventListener(type, listener);
+				}
+			}
+		};
 	},
 
 	async openDirectoryPickerDialog(opts) {

packages/interface/src/contexts/PlatformContext.tsx

@@ -1,5 +1,7 @@
 import { createContext, useContext, PropsWithChildren } from "react";
 
+import type { MiddleClickNavigationGuardTarget } from "../util/middleClickNavigation";
+
 /**
  * Platform abstraction layer
  *
@@ -13,7 +15,7 @@ export type Platform = {
 	/** Provide browser event access for the Windows Tauri middle-click guard. */
 	getMiddleClickNavigationGuardEnvironment?(): {
 		userAgent: string;
-		eventTarget: EventTarget;
+		eventTarget: MiddleClickNavigationGuardTarget;
 	};
 
 	/** Open native directory picker dialog (Tauri only) */

packages/interface/src/util/middleClickNavigation.ts

@@ -1,3 +1,20 @@
+export type MiddleClickNavigationEvent = {
+	button: number;
+	preventDefault(): void;
+};
+
+export type MiddleClickNavigationGuardTarget = {
+	addEventListener(
+		type: 'auxclick',
+		listener: (event: MiddleClickNavigationEvent) => void,
+		options: {passive: false}
+	): void;
+	removeEventListener(
+		type: 'auxclick',
+		listener: (event: MiddleClickNavigationEvent) => void
+	): void;
+};
+
 export function shouldInstallMiddleClickNavigationGuard(
 	platform: 'web' | 'tauri',
 	userAgent: string
@@ -6,12 +23,10 @@ export function shouldInstallMiddleClickNavigationGuard(
 }
 
 export function installMiddleClickNavigationGuard(
-	target: EventTarget
+	target: MiddleClickNavigationGuardTarget
 ): () => void {
-	const preventMiddleClickNavigation = (event: Event) => {
-		const mouseEvent = event as MouseEvent;
-
-		if (mouseEvent.button === 1) mouseEvent.preventDefault();
+	const preventMiddleClickNavigation = (event: MiddleClickNavigationEvent) => {
+		if (event.button === 1) event.preventDefault();
 	};
 
 	target.addEventListener('auxclick', preventMiddleClickNavigation, {
@@ -24,7 +39,10 @@ export function installMiddleClickNavigationGuard(
 
 export function installMiddleClickNavigationGuardForPlatform(
 	platform: 'web' | 'tauri',
-	environment?: {userAgent: string; eventTarget: EventTarget}
+	environment?: {
+		userAgent: string;
+		eventTarget: MiddleClickNavigationGuardTarget;
+	}
 ): (() => void) | undefined {
 	if (
 		!environment ||

packages/interface/tests/middleClickNavigation.test.ts

@@ -2,6 +2,7 @@ import {describe, expect, it} from 'bun:test';
 import {
 	installMiddleClickNavigationGuard,
 	installMiddleClickNavigationGuardForPlatform,
+	type MiddleClickNavigationGuardTarget,
 	shouldInstallMiddleClickNavigationGuard
 } from '../src/util/middleClickNavigation';
 
@@ -11,6 +12,17 @@ function mouseEvent(type: string, button: number) {
 	return event;
 }
 
+function guardTarget(target: EventTarget): MiddleClickNavigationGuardTarget {
+	return {
+		addEventListener(type, listener, options) {
+			target.addEventListener(type, listener as EventListener, options);
+		},
+		removeEventListener(type, listener) {
+			target.removeEventListener(type, listener as EventListener);
+		}
+	};
+}
+
 describe('middle-click navigation guard', () => {
 	it('is enabled only for the Windows desktop app', () => {
 		expect(
@@ -26,7 +38,7 @@ describe('middle-click navigation guard', () => {
 
 	it('prevents middle-button auxiliary clicks', () => {
 		const target = new EventTarget();
-		installMiddleClickNavigationGuard(target);
+		installMiddleClickNavigationGuard(guardTarget(target));
 		const event = mouseEvent('auxclick', 1);
 
 		target.dispatchEvent(event);
@@ -36,7 +48,7 @@ describe('middle-click navigation guard', () => {
 
 	it.each([0, 2])('does not prevent mouse button %i', (button) => {
 		const target = new EventTarget();
-		installMiddleClickNavigationGuard(target);
+		installMiddleClickNavigationGuard(guardTarget(target));
 		const event = mouseEvent('auxclick', button);
 
 		target.dispatchEvent(event);
@@ -46,7 +58,7 @@ describe('middle-click navigation guard', () => {
 
 	it('does not prevent the middle-button press that starts autoscroll', () => {
 		const target = new EventTarget();
-		installMiddleClickNavigationGuard(target);
+		installMiddleClickNavigationGuard(guardTarget(target));
 		const event = mouseEvent('mousedown', 1);
 
 		target.dispatchEvent(event);
@@ -56,7 +68,7 @@ describe('middle-click navigation guard', () => {
 
 	it('removes the guard during cleanup', () => {
 		const target = new EventTarget();
-		const cleanup = installMiddleClickNavigationGuard(target);
+		const cleanup = installMiddleClickNavigationGuard(guardTarget(target));
 		cleanup();
 		const event = mouseEvent('auxclick', 1);
 
@@ -74,7 +86,7 @@ describe('middle-click navigation guard', () => {
 		const eventTarget = new EventTarget();
 		const cleanup = installMiddleClickNavigationGuardForPlatform('tauri', {
 			userAgent: 'Windows NT 10.0',
-			eventTarget
+			eventTarget: guardTarget(eventTarget)
 		});
 		const guardedEvent = mouseEvent('auxclick', 1);