feat: improve editor performance (#14429)

#### PR Dependency Tree


* **PR #14429** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* HTML import now splits lines on <br> into separate paragraphs while
preserving inline formatting.

* **Bug Fixes**
* Paste falls back to inserting after the first paragraph when no
explicit target is found.

* **Style**
  * Improved page-mode viewport styling for consistent content layout.

* **Tests**
* Added snapshot tests for <br>-based paragraph splitting; re-enabled an
e2e drag-page test.

* **Chores**
* Deferred/deduplicated font loading, inline text caching,
drag-handle/pointer optimizations, and safer inline render
synchronization.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/widgets/drag-handle/src/watchers/edgeless-watcher.ts

@@ -14,6 +14,17 @@ import {
 } from '../config.js';
 import type { AffineDragHandleWidget } from '../drag-handle.js';
 
+type HoveredElemArea = {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+  width: number;
+  height: number;
+  padding: number;
+  containerWidth: number;
+};
+
 /**
  * Used to control the drag handle visibility in edgeless mode
  *
@@ -21,6 +32,52 @@ import type { AffineDragHandleWidget } from '../drag-handle.js';
  * 2. Multiple selection is not supported
  */
 export class EdgelessWatcher {
+  private _pendingHoveredElemArea: HoveredElemArea | null = null;
+
+  private _lastAppliedHoveredElemArea: HoveredElemArea | null = null;
+
+  private _showDragHandleRafId: number | null = null;
+
+  private _surfaceElementUpdatedRafId: number | null = null;
+
+  private readonly _cloneArea = (area: HoveredElemArea): HoveredElemArea => ({
+    left: area.left,
+    top: area.top,
+    right: area.right,
+    bottom: area.bottom,
+    width: area.width,
+    height: area.height,
+    padding: area.padding,
+    containerWidth: area.containerWidth,
+  });
+
+  private readonly _isAreaEqual = (
+    left: HoveredElemArea | null,
+    right: HoveredElemArea | null
+  ) => {
+    if (!left || !right) return false;
+    return (
+      left.left === right.left &&
+      left.top === right.top &&
+      left.right === right.right &&
+      left.bottom === right.bottom &&
+      left.width === right.width &&
+      left.height === right.height &&
+      left.padding === right.padding &&
+      left.containerWidth === right.containerWidth
+    );
+  };
+
+  private readonly _scheduleShowDragHandleFromSurfaceUpdate = () => {
+    if (this._surfaceElementUpdatedRafId !== null) return;
+
+    this._surfaceElementUpdatedRafId = requestAnimationFrame(() => {
+      this._surfaceElementUpdatedRafId = null;
+      if (!this.widget.isGfxDragHandleVisible) return;
+      this._showDragHandle();
+    });
+  };
+
   private readonly _handleEdgelessToolUpdated = (
     newTool: ToolOptionWithType
   ) => {
@@ -43,46 +100,123 @@ export class EdgelessWatcher {
     }
 
     if (
-      this.widget.center[0] !== center[0] &&
+      this.widget.center[0] !== center[0] ||
       this.widget.center[1] !== center[1]
     ) {
       this.widget.center = [...center];
     }
 
     if (this.widget.isGfxDragHandleVisible) {
-      this._showDragHandle();
-      this._updateDragHoverRectTopLevelBlock();
+      const area = this.hoveredElemArea;
+      this._showDragHandle(area);
+      this._updateDragHoverRectTopLevelBlock(area);
     } else if (this.widget.activeDragHandle) {
       this.widget.hide();
     }
   };
 
-  private readonly _showDragHandle = () => {
-    if (!this.widget.anchorBlockId) return;
+  private readonly _flushShowDragHandle = () => {
+    this._showDragHandleRafId = null;
+
+    if (!this.widget.anchorBlockId.peek()) return;
 
     const container = this.widget.dragHandleContainer;
     const grabber = this.widget.dragHandleGrabber;
     if (!container || !grabber) return;
 
-    const area = this.hoveredElemArea;
+    const area = this._pendingHoveredElemArea ?? this.hoveredElemArea;
+    this._pendingHoveredElemArea = null;
     if (!area) return;
 
-    container.style.transition = 'none';
-    container.style.paddingTop = `0px`;
-    container.style.paddingBottom = `0px`;
-    container.style.left = `${area.left}px`;
-    container.style.top = `${area.top}px`;
-    container.style.display = 'flex';
+    if (
+      this.widget.isGfxDragHandleVisible &&
+      this._isAreaEqual(this._lastAppliedHoveredElemArea, area)
+    ) {
+      return;
+    }
+
+    if (container.style.transition !== 'none') {
+      container.style.transition = 'none';
+    }
+    const nextPaddingTop = '0px';
+    if (container.style.paddingTop !== nextPaddingTop) {
+      container.style.paddingTop = nextPaddingTop;
+    }
+    const nextPaddingBottom = '0px';
+    if (container.style.paddingBottom !== nextPaddingBottom) {
+      container.style.paddingBottom = nextPaddingBottom;
+    }
+    const nextLeft = `${area.left}px`;
+    if (container.style.left !== nextLeft) {
+      container.style.left = nextLeft;
+    }
+    const nextTop = `${area.top}px`;
+    if (container.style.top !== nextTop) {
+      container.style.top = nextTop;
+    }
+    if (container.style.display !== 'flex') {
+      container.style.display = 'flex';
+    }
 
     this.widget.handleAnchorModelDisposables();
 
     this.widget.activeDragHandle = 'gfx';
+    this._lastAppliedHoveredElemArea = this._cloneArea(area);
   };
 
-  private readonly _updateDragHoverRectTopLevelBlock = () => {
+  private readonly _showDragHandle = (area?: HoveredElemArea | null) => {
+    const nextArea = area ?? this.hoveredElemArea;
+    this._pendingHoveredElemArea = nextArea;
+    if (!this._pendingHoveredElemArea) {
+      return;
+    }
+    if (
+      this.widget.isGfxDragHandleVisible &&
+      this._showDragHandleRafId === null &&
+      this._isAreaEqual(
+        this._lastAppliedHoveredElemArea,
+        this._pendingHoveredElemArea
+      )
+    ) {
+      return;
+    }
+    if (this._showDragHandleRafId !== null) {
+      return;
+    }
+    this._showDragHandleRafId = requestAnimationFrame(
+      this._flushShowDragHandle
+    );
+  };
+
+  private readonly _updateDragHoverRectTopLevelBlock = (
+    area?: HoveredElemArea | null
+  ) => {
     if (!this.widget.dragHoverRect) return;
 
-    this.widget.dragHoverRect = this.hoveredElemAreaRect;
+    const nextArea = area ?? this.hoveredElemArea;
+    if (!nextArea) {
+      this.widget.dragHoverRect = null;
+      return;
+    }
+
+    const nextRect = new Rect(
+      nextArea.left,
+      nextArea.top,
+      nextArea.right,
+      nextArea.bottom
+    );
+    const prevRect = this.widget.dragHoverRect;
+    if (
+      prevRect &&
+      prevRect.left === nextRect.left &&
+      prevRect.top === nextRect.top &&
+      prevRect.width === nextRect.width &&
+      prevRect.height === nextRect.height
+    ) {
+      return;
+    }
+
+    this.widget.dragHoverRect = nextRect;
   };
 
   get gfx() {
@@ -123,7 +257,7 @@ export class EdgelessWatcher {
     return new Rect(area.left, area.top, area.right, area.bottom);
   }
 
-  get hoveredElemArea() {
+  get hoveredElemArea(): HoveredElemArea | null {
     const edgelessElement = this.widget.anchorEdgelessElement.peek();
 
     if (!edgelessElement) return null;
@@ -174,6 +308,19 @@ export class EdgelessWatcher {
       viewport.viewportUpdated.subscribe(this._handleEdgelessViewPortUpdated)
     );
 
+    disposables.add(() => {
+      if (this._showDragHandleRafId !== null) {
+        cancelAnimationFrame(this._showDragHandleRafId);
+        this._showDragHandleRafId = null;
+      }
+      if (this._surfaceElementUpdatedRafId !== null) {
+        cancelAnimationFrame(this._surfaceElementUpdatedRafId);
+        this._surfaceElementUpdatedRafId = null;
+      }
+      this._pendingHoveredElemArea = null;
+      this._lastAppliedHoveredElemArea = null;
+    });
+
     disposables.add(
       selection.slots.updated.subscribe(() => {
         this.updateAnchorElement();
@@ -216,7 +363,7 @@ export class EdgelessWatcher {
             this.widget.hide();
           }
           if (payload.type === 'update') {
-            this._showDragHandle();
+            this._scheduleShowDragHandleFromSurfaceUpdate();
           }
         }
       })
@@ -224,9 +371,10 @@ export class EdgelessWatcher {
 
     if (surface) {
       disposables.add(
-        surface.elementUpdated.subscribe(() => {
+        surface.elementUpdated.subscribe(({ id }) => {
           if (this.widget.isGfxDragHandleVisible) {
-            this._showDragHandle();
+            if (id !== this.widget.anchorBlockId.peek()) return;
+            this._scheduleShowDragHandleFromSurfaceUpdate();
           }
         })
       );

blocksuite/affine/widgets/drag-handle/src/watchers/pointer-event-watcher.ts

@@ -153,6 +153,10 @@ export class PointerEventWatcher {
 
   private _lastShowedBlock: { id: string; el: BlockComponent } | null = null;
 
+  private _lastPointerHitBlockId: string | null = null;
+
+  private _lastPointerHitBlockElement: Element | null = null;
+
   /**
    * When pointer move on block, should show drag handle
    * And update hover block id and path
@@ -169,6 +173,7 @@ export class PointerEventWatcher {
       point
     );
     if (!closestBlock) {
+      this._lastPointerHitBlockId = null;
       this.widget.anchorBlockId.value = null;
       return;
     }
@@ -237,19 +242,38 @@ export class PointerEventWatcher {
 
       const state = ctx.get('pointerState');
 
-      // When pointer is moving, should do nothing
-      if (state.delta.x !== 0 && state.delta.y !== 0) return;
-
       const { target } = state.raw;
       const element = captureEventTarget(target);
       // When pointer not on block or on dragging, should do nothing
-      if (!element) return;
+      if (!element) {
+        this._lastPointerHitBlockId = null;
+        this._lastPointerHitBlockElement = null;
+        return;
+      }
 
       // When pointer on drag handle, should do nothing
       if (element.closest('.affine-drag-handle-container')) return;
 
       if (!this.widget.rootComponent) return;
 
+      const hitBlock = element.closest(`[${BLOCK_ID_ATTR}]`);
+      const hitBlockId = hitBlock?.getAttribute(BLOCK_ID_ATTR) ?? null;
+
+      // Pointer move events are high-frequency. If hovered block identity is
+      // unchanged and the underlying block element is the same, skip the
+      // closest-note lookup.
+      if (
+        hitBlockId &&
+        this.widget.isBlockDragHandleVisible &&
+        hitBlockId === this._lastPointerHitBlockId &&
+        hitBlock === this._lastPointerHitBlockElement &&
+        isBlockIdEqual(this.widget.anchorBlockId.peek(), hitBlockId)
+      ) {
+        return;
+      }
+      this._lastPointerHitBlockId = hitBlockId;
+      this._lastPointerHitBlockElement = hitBlock;
+
       // When pointer out of note block hover area or inside database, should hide drag handle
       const point = new Point(state.raw.x, state.raw.y);
 
@@ -354,6 +378,8 @@ export class PointerEventWatcher {
   reset() {
     this._lastHoveredBlockId = null;
     this._lastShowedBlock = null;
+    this._lastPointerHitBlockId = null;
+    this._lastPointerHitBlockElement = null;
   }
 
   watch() {