From 1c5e360d7e1899ceade1ba0424b15ff513f8c122 Mon Sep 17 00:00:00 2001
From: Saul-Mirone <Saul-Mirone@outlook.com>
Date: Wed, 26 Feb 2025 13:24:32 +0000
Subject: [PATCH] feat(editor): add widget in viewUpdated slot (#10452)

---
 .../src/surface-ref-block.ts                  |  3 +-
 .../src/helpers/preview-helper.ts             |  2 ++
 .../src/watchers/drag-event-watcher.ts        |  7 +++--
 .../block-std/src/view/view-store.ts          | 30 +++++++++++++++----
 4 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/blocksuite/affine/block-surface-ref/src/surface-ref-block.ts b/blocksuite/affine/block-surface-ref/src/surface-ref-block.ts
index 0c895a7ddd..a3aa4f8bc5 100644
--- a/blocksuite/affine/block-surface-ref/src/surface-ref-block.ts
+++ b/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();
diff --git a/blocksuite/affine/widget-drag-handle/src/helpers/preview-helper.ts b/blocksuite/affine/widget-drag-handle/src/helpers/preview-helper.ts
index 313ee0b0da..50ef054f36 100644
--- a/blocksuite/affine/widget-drag-handle/src/helpers/preview-helper.ts
+++ b/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);
 
diff --git a/blocksuite/affine/widget-drag-handle/src/watchers/drag-event-watcher.ts b/blocksuite/affine/widget-drag-handle/src/watchers/drag-event-watcher.ts
index 00fa5e2714..6f06b0e64b 100644
--- a/blocksuite/affine/widget-drag-handle/src/watchers/drag-event-watcher.ts
+++ b/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());
diff --git a/blocksuite/framework/block-std/src/view/view-store.ts b/blocksuite/framework/block-std/src/view/view-store.ts
index 0b307bb34c..e11d92cd1d 100644
--- a/blocksuite/framework/block-std/src/view/view-store.ts
+++ b/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 = (