feat(editor): add widget in viewUpdated slot (#10452)

blocksuite/affine/block-surface-ref/src/surface-ref-block.ts

@@ -423,8 +423,9 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
 
       override mounted() {
         const disposable = this.std.view.viewUpdated.on(payload => {
+          if (payload.type !== 'block') return;
           if (
-            payload.type === 'add' &&
+            payload.method === 'add' &&
             matchModels(payload.view.model, [RootBlockModel])
           ) {
             disposable.dispose();

blocksuite/affine/widget-drag-handle/src/helpers/preview-helper.ts

@@ -145,6 +145,8 @@ export class PreviewHelper {
           }
 
           this.std.view.viewUpdated.on(payload => {
+            if (payload.type !== 'block') return;
+
             if (payload.view.model.flavour === 'affine:page') {
               const gfx = this.std.get(GfxControllerIdentifier);
 

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

@@ -1625,10 +1625,13 @@ export class DragEventWatcher {
 
     disposables.add(
       std.view.viewUpdated.on(payload => {
-        if (payload.type === 'add') {
+        if (payload.type !== 'block') {
+          return;
+        }
+        if (payload.method === 'add') {
           this._makeDropTarget(payload.view);
         } else if (
-          payload.type === 'delete' &&
+          payload.method === 'delete' &&
           this.dropTargetCleanUps.has(payload.id)
         ) {
           this.dropTargetCleanUps.get(payload.id)!.forEach(clean => clean());

blocksuite/framework/block-std/src/view/view-store.ts

@@ -3,16 +3,20 @@ import { Slot } from '@blocksuite/global/utils';
 import { LifeCycleWatcher } from '../extension/index.js';
 import type { BlockComponent, WidgetComponent } from './element/index.js';
 
-type ViewUpdatePayload =
+type ViewUpdateMethod = 'delete' | 'add';
+
+export type ViewUpdatePayload =
   | {
       id: string;
-      type: 'delete';
+      method: ViewUpdateMethod;
+      type: 'block';
       view: BlockComponent;
     }
   | {
       id: string;
-      type: 'add';
-      view: BlockComponent;
+      method: ViewUpdateMethod;
+      type: 'widget';
+      view: WidgetComponent;
     };
 
 export class ViewStore extends LifeCycleWatcher {
@@ -42,7 +46,8 @@ export class ViewStore extends LifeCycleWatcher {
     this._blockMap.delete(node.model.id);
     this.viewUpdated.emit({
       id: node.model.id,
-      type: 'delete',
+      method: 'delete',
+      type: 'block',
       view: node,
     });
   };
@@ -51,6 +56,12 @@ export class ViewStore extends LifeCycleWatcher {
     const id = node.dataset.widgetId as string;
     const widgetIndex = `${node.model.id}|${id}`;
     this._widgetMap.delete(widgetIndex);
+    this.viewUpdated.emit({
+      id: node.model.id,
+      method: 'delete',
+      type: 'widget',
+      view: node,
+    });
   };
 
   getBlock = (id: string): BlockComponent | null => {
@@ -72,7 +83,8 @@ export class ViewStore extends LifeCycleWatcher {
     this._blockMap.set(node.model.id, node);
     this.viewUpdated.emit({
       id: node.model.id,
-      type: 'add',
+      method: 'add',
+      type: 'block',
       view: node,
     });
   };
@@ -81,6 +93,12 @@ export class ViewStore extends LifeCycleWatcher {
     const id = node.dataset.widgetId as string;
     const widgetIndex = `${node.model.id}|${id}`;
     this._widgetMap.set(widgetIndex, node);
+    this.viewUpdated.emit({
+      id: node.model.id,
+      method: 'add',
+      type: 'widget',
+      view: node,
+    });
   };
 
   walkThrough = (