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

blocksuite/affine/block-root/src/edgeless/components/frame/frame-preview.ts

@@ -8,15 +8,12 @@ import {
 } from '@blocksuite/block-std';
 import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
 import { Bound, deserializeXYWH } from '@blocksuite/global/gfx';
-import {
-  debounce,
-  DisposableGroup,
-  WithDisposable,
-} from '@blocksuite/global/utils';
+import { DisposableGroup, WithDisposable } from '@blocksuite/global/utils';
 import { type Query, type Store } from '@blocksuite/store';
 import { css, html, nothing, type PropertyValues } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import debounce from 'lodash-es/debounce';
 
 import type { EdgelessRootPreviewBlockComponent } from '../../edgeless-root-preview-block.js';
 
@@ -182,7 +179,9 @@ export class FramePreview extends WithDisposable(ShadowlessElement) {
     this._clearFrameDisposables();
     this._frameDisposables = new DisposableGroup();
     this._frameDisposables.add(
-      frame.propsUpdated.on(debounce(this._updateFrameViewportWH, 10))
+      frame.propsUpdated.on(
+        debounce(this._updateFrameViewportWH, 10, { leading: true })
+      )
     );
   }
 

blocksuite/affine/block-root/src/edgeless/components/panel/color-panel.ts

@@ -11,7 +11,7 @@ import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
-import { isEqual } from 'lodash-es';
+import isEqual from 'lodash-es/isEqual';
 
 function TransparentIcon(hollowCircle = false) {
   const CircleIcon: TemplateResult | typeof nothing = hollowCircle

blocksuite/affine/block-root/src/edgeless/components/toolbar/edgeless-toolbar.ts

@@ -16,7 +16,7 @@ import {
 import { stopPropagation } from '@blocksuite/affine-shared/utils';
 import { WidgetComponent } from '@blocksuite/block-std';
 import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
-import { debounce, Slot } from '@blocksuite/global/utils';
+import { Slot } from '@blocksuite/global/utils';
 import {
   ArrowLeftSmallIcon,
   ArrowRightSmallIcon,
@@ -29,6 +29,7 @@ import { baseTheme, cssVar } from '@toeverything/theme';
 import { css, html, nothing, unsafeCSS } from 'lit';
 import { query, state } from 'lit/decorators.js';
 import { cache } from 'lit/directives/cache.js';
+import debounce from 'lodash-es/debounce';
 
 import type { EdgelessRootBlockComponent } from '../../edgeless-root-block.js';
 import type { MenuPopper } from './common/create-popper.js';
@@ -233,36 +234,40 @@ export class EdgelessToolbarWidget extends WidgetComponent<
   @state()
   accessor containerWidth = 1920;
 
-  private readonly _onContainerResize = debounce(({ w }: { w: number }) => {
-    if (!this.isConnected) return;
+  private readonly _onContainerResize = debounce(
+    ({ w }: { w: number }) => {
+      if (!this.isConnected) return;
 
-    this.slots.resize.emit({ w, h: TOOLBAR_HEIGHT });
-    this.containerWidth = w;
+      this.slots.resize.emit({ w, h: TOOLBAR_HEIGHT });
+      this.containerWidth = w;
 
-    if (this._denseSeniorTools) {
-      this.scrollSeniorToolIndex = Math.min(
-        this._seniorTools.length - this.scrollSeniorToolSize,
-        this.scrollSeniorToolIndex
-      );
-    } else {
-      this.scrollSeniorToolIndex = 0;
-    }
+      if (this._denseSeniorTools) {
+        this.scrollSeniorToolIndex = Math.min(
+          this._seniorTools.length - this.scrollSeniorToolSize,
+          this.scrollSeniorToolIndex
+        );
+      } else {
+        this.scrollSeniorToolIndex = 0;
+      }
 
-    if (
-      this._denseQuickTools &&
-      this._moreQuickToolsMenu &&
-      this._moreQuickToolsMenuRef
-    ) {
-      this._moreQuickToolsMenu.close();
-      this._openMoreQuickToolsMenu({
-        currentTarget: this._moreQuickToolsMenuRef,
-      });
-    }
-    if (!this._denseQuickTools && this._moreQuickToolsMenu) {
-      this._moreQuickToolsMenu.close();
-      this._moreQuickToolsMenu = null;
-    }
-  }, 300);
+      if (
+        this._denseQuickTools &&
+        this._moreQuickToolsMenu &&
+        this._moreQuickToolsMenuRef
+      ) {
+        this._moreQuickToolsMenu.close();
+        this._openMoreQuickToolsMenu({
+          currentTarget: this._moreQuickToolsMenuRef,
+        });
+      }
+      if (!this._denseQuickTools && this._moreQuickToolsMenu) {
+        this._moreQuickToolsMenu.close();
+        this._moreQuickToolsMenu = null;
+      }
+    },
+    300,
+    { leading: true }
+  );
 
   private _resizeObserver: ResizeObserver | null = null;
 

blocksuite/affine/block-root/src/widgets/linked-doc/linked-doc-popover.ts

@@ -12,16 +12,13 @@ import {
 } from '@blocksuite/affine-shared/utils';
 import { PropTypes, requiredProperties } from '@blocksuite/block-std';
 import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
-import {
-  SignalWatcher,
-  throttle,
-  WithDisposable,
-} from '@blocksuite/global/utils';
+import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils';
 import { MoreHorizontalIcon } from '@blocksuite/icons/lit';
 import { effect } from '@preact/signals-core';
 import { css, html, LitElement, nothing } from 'lit';
 import { property, query, queryAll, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import throttle from 'lodash-es/throttle';
 
 import { getPopperPosition } from '../../utils/position.js';
 import type { LinkedDocContext, LinkedMenuGroup } from './config.js';

blocksuite/affine/block-root/src/widgets/slash-menu/index.ts

@@ -4,12 +4,9 @@ import {
 } from '@blocksuite/affine-components/rich-text';
 import type { UIEventStateContext } from '@blocksuite/block-std';
 import { TextSelection, WidgetComponent } from '@blocksuite/block-std';
-import {
-  assertType,
-  debounce,
-  DisposableGroup,
-} from '@blocksuite/global/utils';
+import { assertType, DisposableGroup } from '@blocksuite/global/utils';
 import { InlineEditor } from '@blocksuite/inline';
+import debounce from 'lodash-es/debounce';
 
 import type { RootBlockComponent } from '../../types.js';
 import {
@@ -75,7 +72,8 @@ const showSlashMenu = debounce(
     container.append(slashMenu);
     return slashMenu;
   },
-  100
+  100,
+  { leading: true }
 );
 
 export const AFFINE_SLASH_MENU_WIDGET = 'affine-slash-menu-widget';

blocksuite/affine/block-root/src/widgets/slash-menu/slash-menu-popover.ts

@@ -13,12 +13,13 @@ import {
   isFuzzyMatch,
   substringMatchScore,
 } from '@blocksuite/affine-shared/utils';
-import { throttle, WithDisposable } from '@blocksuite/global/utils';
+import { WithDisposable } from '@blocksuite/global/utils';
 import { autoPlacement, offset } from '@floating-ui/dom';
 import { html, LitElement, nothing, type PropertyValues } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import throttle from 'lodash-es/throttle';
 
 import { getPopperPosition } from '../../utils/position.js';
 import type {