refactor(editor): replace debounce and throttle with lodash (#10639)

blocksuite/framework/block-std/package.json

@@ -23,10 +23,12 @@
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
     "@types/hast": "^3.0.4",
+    "@types/lodash-es": "^4.17.12",
     "dompurify": "^3.2.4",
     "fractional-indexing": "^3.2.0",
     "lib0": "^0.2.97",
     "lit": "^3.2.0",
+    "lodash-es": "^4.17.21",
     "lz-string": "^1.5.0",
     "rehype-parse": "^9.0.0",
     "unified": "^11.0.5",

blocksuite/framework/block-std/src/gfx/viewport.ts

@@ -5,8 +5,9 @@ import {
   type IVec,
   Vec,
 } from '@blocksuite/global/gfx';
-import { debounce, Slot } from '@blocksuite/global/utils';
+import { Slot } from '@blocksuite/global/utils';
 import { signal } from '@preact/signals-core';
+import debounce from 'lodash-es/debounce';
 
 import type { GfxViewportElement } from '.';
 
@@ -73,21 +74,13 @@ export class Viewport {
 
   ZOOM_MIN = ZOOM_MIN;
 
-  private readonly _resetZooming = debounce(
-    () => {
-      this.zooming$.value = false;
-    },
-    200,
-    { leading: false, trailing: true }
-  );
+  private readonly _resetZooming = debounce(() => {
+    this.zooming$.value = false;
+  }, 200);
 
-  private readonly _resetPanning = debounce(
-    () => {
-      this.panning$.value = false;
-    },
-    200,
-    { leading: false, trailing: true }
-  );
+  private readonly _resetPanning = debounce(() => {
+    this.panning$.value = false;
+  }, 200);
 
   constructor() {
     this.elementReady.once(el => (this._element = el));

blocksuite/framework/block-std/src/range/range-binding.ts

@@ -1,5 +1,5 @@
-import { throttle } from '@blocksuite/global/utils';
 import type { BaseSelection, BlockModel } from '@blocksuite/store';
+import throttle from 'lodash-es/throttle';
 
 import { TextSelection } from '../selection/index.js';
 import type { BlockComponent } from '../view/element/block-component.js';
@@ -7,7 +7,6 @@ import { BLOCK_ID_ATTR } from '../view/index.js';
 import { isActiveInEditor } from './active.js';
 import { RANGE_SYNC_EXCLUDE_ATTR } from './consts.js';
 import type { RangeManager } from './range-manager.js';
-
 /**
  * Two-way binding between native range and text selection
  */

blocksuite/framework/global/src/utils/function.ts

@@ -23,96 +23,6 @@ export function noop(_?: unknown) {
   return;
 }
 
-/**
- * @example
- * ```ts
- * const log = (message: string) => console.log(`[${new Date().toISOString()}] ${message}`);
- *
- * const throttledLog = throttle(log, 1000);
- *
- * throttledLog("Hello, world!");
- * throttledLog("Hello, world!");
- * throttledLog("Hello, world!");
- * throttledLog("Hello, world!");
- * throttledLog("Hello, world!");
- * ```
- */
-
-export function throttle<T extends (...args: any[]) => any>(
-  fn: T,
-  limit: number,
-  options?: { leading?: boolean; trailing?: boolean }
-): T;
-export function throttle<
-  Args extends unknown[],
-  T extends (...args: Args) => void,
->(
-  fn: (...args: Args) => void,
-  limit: number,
-  options?: { leading?: boolean; trailing?: boolean }
-): T;
-export function throttle<
-  Args extends unknown[],
-  T extends (this: unknown, ...args: Args) => void,
->(fn: T, limit: number, { leading = true, trailing = true } = {}): T {
-  let timer: ReturnType<typeof setTimeout> | null = null;
-  let lastArgs: Args | null = null;
-
-  const setTimer = () => {
-    if (lastArgs && trailing) {
-      fn(...lastArgs);
-      lastArgs = null;
-      timer = setTimeout(setTimer, limit);
-    } else {
-      timer = null;
-    }
-  };
-
-  return function (this: unknown, ...args: Parameters<T>) {
-    if (timer) {
-      // in throttle
-      lastArgs = args;
-      return;
-    }
-    // Execute the function on the leading edge
-    if (leading) {
-      fn.apply(this, args);
-    }
-    timer = setTimeout(setTimer, limit);
-  } as T;
-}
-
-export const debounce = <T extends (...args: any[]) => void>(
-  fn: T,
-  limit: number,
-  { leading = true, trailing = true } = {}
-): T => {
-  let timer: ReturnType<typeof setTimeout> | null = null;
-  let lastArgs: Parameters<T> | null = null;
-
-  // eslint-disable-next-line sonarjs/no-identical-functions
-  const setTimer = () => {
-    if (lastArgs && trailing) {
-      fn(...lastArgs);
-      lastArgs = null;
-      timer = setTimeout(setTimer, limit);
-    } else {
-      timer = null;
-    }
-  };
-
-  return function (...args: Parameters<T>) {
-    if (timer) {
-      lastArgs = args;
-      clearTimeout(timer);
-    }
-    if (leading && !timer) {
-      fn(...args);
-    }
-    timer = setTimeout(setTimer, limit);
-  } as T;
-};
-
 export async function nextTick() {
   // @ts-expect-error check window.scheduler
   if ('scheduler' in window && 'yield' in window.scheduler) {