feat(editor): Migrate debounce mixin to useDebounce composable (no-changelog) (#8244)

packages/editor-ui/src/composables/__tests__/useDebounce.test.ts

@@ -1,8 +1,8 @@
 import { vi, describe, it, expect } from 'vitest';
-import { useDebounceHelper } from '../useDebounce';
+import { useDebounce } from '../useDebounce';
 import { render, screen } from '@testing-library/vue';
 
-describe('useDebounceHelper', () => {
+describe('useDebounce()', () => {
 	const debounceTime = 500;
 
 	const TestComponent = {
@@ -24,7 +24,7 @@ describe('useDebounceHelper', () => {
 		},
 		setup() {
 			vitest.useFakeTimers();
-			const { callDebounced } = useDebounceHelper();
+			const { callDebounced } = useDebounce();
 			return {
 				callDebounced,
 				debounceTime,

packages/editor-ui/src/composables/useClipboard.ts

@@ -1,6 +1,6 @@
 import { onBeforeUnmount, onMounted, ref } from 'vue';
-import { debounce } from 'lodash-es';
 import { useClipboard as useClipboardCore } from '@vueuse/core';
+import { useDebounce } from '@/composables/useDebounce';
 
 type ClipboardEventFn = (data: string, event?: ClipboardEvent) => void;
 
@@ -11,6 +11,7 @@ export function useClipboard(
 		onPaste() {},
 	},
 ) {
+	const { debounce } = useDebounce();
 	const { copy, copied, isSupported, text } = useClipboardCore();
 
 	const ignoreClasses = ['el-messsage-box', 'ignore-key-press'];
@@ -46,7 +47,9 @@ export function useClipboard(
 		}
 	}
 
-	const debouncedOnPaste = debounce(onPaste, 1000, { leading: true });
+	const debouncedOnPaste = debounce(onPaste, {
+		debounceTime: 1000,
+	});
 
 	/**
 	 * Initialize copy/paste elements and events

packages/editor-ui/src/composables/useDebounce.ts

@@ -1,38 +1,54 @@
 import { ref } from 'vue';
-import { debounce } from 'lodash-es';
+import { debounce as _debounce } from 'lodash-es';
 
-type DebouncedFunction = (...args: unknown[]) => Promise<void> | void;
+export interface DebounceOptions {
+	debounceTime: number;
+	trailing?: boolean;
+}
 
-export function useDebounceHelper() {
+export type DebouncedFunction<R = void> = (...args: unknown[]) => R;
+
+export function useDebounce() {
 	// Create a ref for the WeakMap to store debounced functions.
-	const debouncedFunctions = ref(new WeakMap<DebouncedFunction, DebouncedFunction>());
+	const debounceCache = ref(new WeakMap<DebouncedFunction<unknown>, DebouncedFunction<unknown>>());
 
-	const callDebounced = async (
-		func: DebouncedFunction,
-		options: { debounceTime: number; trailing?: boolean },
-		...inputParameters: unknown[]
-	): Promise<void> => {
+	const debounce = <T extends DebouncedFunction<ReturnType<T>>>(
+		fn: T,
+		options: DebounceOptions,
+	): T => {
 		const { trailing, debounceTime } = options;
 
 		// Check if a debounced version of the function is already stored in the WeakMap.
-		let debouncedFunc = debouncedFunctions.value.get(func);
+		let debouncedFn = debounceCache.value.get(fn);
 
 		// If a debounced version is not found, create one and store it in the WeakMap.
-		if (debouncedFunc === undefined) {
-			debouncedFunc = debounce(
+		if (debouncedFn === undefined) {
+			debouncedFn = _debounce(
 				async (...args: unknown[]) => {
-					await func(...args);
+					return fn(...args);
 				},
 				debounceTime,
 				trailing ? { trailing } : { leading: true },
 			);
-			debouncedFunctions.value.set(func, debouncedFunc);
+
+			debounceCache.value.set(fn, debouncedFn);
 		}
 
-		await debouncedFunc(...inputParameters);
+		return debouncedFn as T;
+	};
+
+	const callDebounced = <T extends DebouncedFunction<ReturnType<T>>>(
+		fn: T,
+		options: DebounceOptions,
+		...inputParameters: Parameters<T>
+	): ReturnType<T> => {
+		const debouncedFn = debounce(fn, options);
+
+		return debouncedFn(...inputParameters) as ReturnType<T>;
 	};
 
 	return {
+		debounce,
 		callDebounced,
 	};
 }

packages/editor-ui/src/composables/useHistoryHelper.ts

@@ -6,11 +6,11 @@ import { useHistoryStore } from '@/stores/history.store';
 import { useUIStore } from '@/stores/ui.store';
 
 import { onMounted, onUnmounted, nextTick } from 'vue';
-import { useDebounceHelper } from './useDebounce';
 import { useDeviceSupport } from 'n8n-design-system/composables/useDeviceSupport';
 import { getNodeViewTab } from '@/utils/canvasUtils';
 import type { Route } from 'vue-router';
 import { useTelemetry } from './useTelemetry';
+import { useDebounce } from '@/composables/useDebounce';
 
 const UNDO_REDO_DEBOUNCE_INTERVAL = 100;
 const ELEMENT_UI_OVERLAY_SELECTOR = '.el-overlay';
@@ -22,7 +22,7 @@ export function useHistoryHelper(activeRoute: Route) {
 	const historyStore = useHistoryStore();
 	const uiStore = useUIStore();
 
-	const { callDebounced } = useDebounceHelper();
+	const { callDebounced } = useDebounce();
 	const { isCtrlKeyPressed } = useDeviceSupport();
 
 	const undo = async () =>