refactor(editor): remove legacy service watcher (#10455)

The main changes in this PR involve replacing the deprecated `BlockServiceWatcher` with the new `LifeCycleWatcher` across multiple files. Here's a detailed breakdown:

1. **Core Architectural Change:**
   - Removed `BlockServiceWatcher` class completely (deleted file)
   - Migrated to `LifeCycleWatcher` as the new standard for watching component lifecycle events

2. **Key Changes in Implementation:**
   - Changed from using `blockService.specSlots` events to using `view.viewUpdated` events
   - Replaced `flavour` static property with `key` static property
   - Updated event handling to use more specific payload type checking

3. **Major File Changes:**
   - Modified multiple block components:
     - Embed synced doc block
     - Frame preview
     - Edgeless root spec
     - AI-related components (code, image, paragraph, etc.)
     - Quick search service
     - Edgeless clipboard

4. **Pattern of Changes:**
   The migration follows a consistent pattern:
   ```typescript
   // Old pattern
   class SomeWatcher extends BlockServiceWatcher {
     static override readonly flavour = 'some:flavour';
     mounted() {
       this.blockService.specSlots.viewConnected.on(...)
     }
   }

   // New pattern
   class SomeWatcher extends LifeCycleWatcher {
     static override key = 'some-watcher';
     mounted() {
       const { view } = this.std;
       view.viewUpdated.on(payload => {
         if (payload.type !== 'block' || payload.method !== 'add') return;
         // Handle event
       });
     }
   }
   ```

5. **Benefits:**
   - More explicit and type-safe event handling
   - Cleaner architecture by removing deprecated code
   - More consistent approach to lifecycle management
   - Better separation of concerns

This appears to be a significant architectural improvement that modernizes the codebase by removing deprecated patterns and standardizing on a more robust lifecycle management system.

packages/frontend/core/src/blocksuite/ai/extensions/ai-code.ts

@@ -1,4 +1,4 @@
-import { BlockServiceWatcher } from '@blocksuite/affine/block-std';
+import { LifeCycleWatcher } from '@blocksuite/affine/block-std';
 import {
   AffineCodeToolbarWidget,
   CodeBlockSpec,
@@ -7,15 +7,19 @@ import type { ExtensionType } from '@blocksuite/affine/store';
 
 import { setupCodeToolbarAIEntry } from '../entries/code-toolbar/setup-code-toolbar';
 
-class AICodeBlockWatcher extends BlockServiceWatcher {
-  static override readonly flavour = 'affine:code';
+class AICodeBlockWatcher extends LifeCycleWatcher {
+  static override key = 'ai-code-block-watcher';
 
   override mounted() {
     super.mounted();
-    const service = this.blockService;
-    service.specSlots.widgetConnected.on(view => {
-      if (view.component instanceof AffineCodeToolbarWidget) {
-        setupCodeToolbarAIEntry(view.component);
+    const { view } = this.std;
+    view.viewUpdated.on(payload => {
+      if (payload.type !== 'widget' || payload.method !== 'add') {
+        return;
+      }
+      const component = payload.view;
+      if (component instanceof AffineCodeToolbarWidget) {
+        setupCodeToolbarAIEntry(component);
       }
     });
   }

packages/frontend/core/src/blocksuite/ai/extensions/ai-edgeless-root.ts

@@ -1,4 +1,4 @@
-import { BlockServiceWatcher } from '@blocksuite/affine/block-std';
+import { LifeCycleWatcher } from '@blocksuite/affine/block-std';
 import {
   AffineFormatBarWidget,
   AffineSlashMenuWidget,
@@ -39,32 +39,37 @@ export function createAIEdgelessRootBlockSpec(
 }
 
 function getAIEdgelessRootWatcher(framework: FrameworkProvider) {
-  class AIEdgelessRootWatcher extends BlockServiceWatcher {
-    static override readonly flavour = 'affine:page';
+  class AIEdgelessRootWatcher extends LifeCycleWatcher {
+    static override key = 'ai-edgeless-root-watcher';
 
     override mounted() {
       super.mounted();
-      this.blockService.specSlots.widgetConnected.on(view => {
-        if (view.component instanceof AffineAIPanelWidget) {
-          view.component.style.width = '430px';
-          view.component.config = buildAIPanelConfig(view.component, framework);
-          setupSpaceAIEntry(view.component);
+      const { view } = this.std;
+      view.viewUpdated.on(payload => {
+        if (payload.type !== 'widget' || payload.method !== 'add') {
+          return;
+        }
+        const component = payload.view;
+        if (component instanceof AffineAIPanelWidget) {
+          component.style.width = '430px';
+          component.config = buildAIPanelConfig(component, framework);
+          setupSpaceAIEntry(component);
         }
 
-        if (view.component instanceof EdgelessCopilotWidget) {
-          setupEdgelessCopilot(view.component);
+        if (component instanceof EdgelessCopilotWidget) {
+          setupEdgelessCopilot(component);
         }
 
-        if (view.component instanceof EdgelessElementToolbarWidget) {
-          setupEdgelessElementToolbarAIEntry(view.component);
+        if (component instanceof EdgelessElementToolbarWidget) {
+          setupEdgelessElementToolbarAIEntry(component);
         }
 
-        if (view.component instanceof AffineFormatBarWidget) {
-          setupFormatBarAIEntry(view.component);
+        if (component instanceof AffineFormatBarWidget) {
+          setupFormatBarAIEntry(component);
         }
 
-        if (view.component instanceof AffineSlashMenuWidget) {
-          setupSlashMenuAIEntry(view.component);
+        if (component instanceof AffineSlashMenuWidget) {
+          setupSlashMenuAIEntry(component);
         }
       });
     }

packages/frontend/core/src/blocksuite/ai/extensions/ai-image.ts

@@ -1,4 +1,4 @@
-import { BlockServiceWatcher } from '@blocksuite/affine/block-std';
+import { LifeCycleWatcher } from '@blocksuite/affine/block-std';
 import {
   AffineImageToolbarWidget,
   ImageBlockSpec,
@@ -7,14 +7,19 @@ import type { ExtensionType } from '@blocksuite/affine/store';
 
 import { setupImageToolbarAIEntry } from '../entries/image-toolbar/setup-image-toolbar';
 
-class AIImageBlockWatcher extends BlockServiceWatcher {
-  static override readonly flavour = 'affine:image';
+class AIImageBlockWatcher extends LifeCycleWatcher {
+  static override key = 'ai-image-block-watcher';
 
   override mounted() {
     super.mounted();
-    this.blockService.specSlots.widgetConnected.on(view => {
-      if (view.component instanceof AffineImageToolbarWidget) {
-        setupImageToolbarAIEntry(view.component);
+    const { view } = this.std;
+    view.viewUpdated.on(payload => {
+      if (payload.type !== 'widget' || payload.method !== 'add') {
+        return;
+      }
+      const component = payload.view;
+      if (component instanceof AffineImageToolbarWidget) {
+        setupImageToolbarAIEntry(component);
       }
     });
   }

packages/frontend/core/src/blocksuite/ai/extensions/ai-page-root.ts

@@ -1,4 +1,4 @@
-import { BlockServiceWatcher } from '@blocksuite/affine/block-std';
+import { LifeCycleWatcher } from '@blocksuite/affine/block-std';
 import {
   AffineFormatBarWidget,
   AffineSlashMenuWidget,
@@ -17,24 +17,29 @@ import {
 } from '../widgets/ai-panel/ai-panel';
 
 function getAIPageRootWatcher(framework: FrameworkProvider) {
-  class AIPageRootWatcher extends BlockServiceWatcher {
-    static override readonly flavour = 'affine:page';
+  class AIPageRootWatcher extends LifeCycleWatcher {
+    static override key = 'ai-page-root-watcher';
 
     override mounted() {
       super.mounted();
-      this.blockService.specSlots.widgetConnected.on(view => {
-        if (view.component instanceof AffineAIPanelWidget) {
-          view.component.style.width = '630px';
-          view.component.config = buildAIPanelConfig(view.component, framework);
-          setupSpaceAIEntry(view.component);
+      const { view } = this.std;
+      view.viewUpdated.on(payload => {
+        if (payload.type !== 'widget' || payload.method !== 'add') {
+          return;
+        }
+        const component = payload.view;
+        if (component instanceof AffineAIPanelWidget) {
+          component.style.width = '630px';
+          component.config = buildAIPanelConfig(component, framework);
+          setupSpaceAIEntry(component);
         }
 
-        if (view.component instanceof AffineFormatBarWidget) {
-          setupFormatBarAIEntry(view.component);
+        if (component instanceof AffineFormatBarWidget) {
+          setupFormatBarAIEntry(component);
         }
 
-        if (view.component instanceof AffineSlashMenuWidget) {
-          setupSlashMenuAIEntry(view.component);
+        if (component instanceof AffineSlashMenuWidget) {
+          setupSlashMenuAIEntry(component);
         }
       });
     }

packages/frontend/core/src/blocksuite/ai/extensions/ai-paragraph.ts

@@ -1,18 +1,16 @@
-import { BlockServiceWatcher } from '@blocksuite/affine/block-std';
+import { LifeCycleWatcher } from '@blocksuite/affine/block-std';
 import {
   ParagraphBlockService,
   ParagraphBlockSpec,
 } from '@blocksuite/affine/blocks';
-import { assertInstanceOf } from '@blocksuite/affine/global/utils';
 import type { ExtensionType } from '@blocksuite/affine/store';
 
-class AIParagraphBlockWatcher extends BlockServiceWatcher {
-  static override readonly flavour = 'affine:paragraph';
+class AIParagraphBlockWatcher extends LifeCycleWatcher {
+  static override key = 'ai-paragraph-block-watcher';
 
   override mounted() {
     super.mounted();
-    const service = this.blockService;
-    assertInstanceOf(service, ParagraphBlockService);
+    const service = this.std.get(ParagraphBlockService);
     service.placeholderGenerator = model => {
       if (model.type === 'text') {
         return "Type '/' for commands, 'space' for AI";

packages/frontend/core/src/blocksuite/extensions/edgeless-clipboard.ts

@@ -1,47 +1,44 @@
 import { AIChatBlockSchema } from '@affine/core/blocksuite/ai/blocks';
-import { BlockServiceWatcher } from '@blocksuite/affine/block-std';
+import { LifeCycleWatcher } from '@blocksuite/affine/block-std';
 import { EdgelessRootBlockComponent } from '@blocksuite/affine/blocks';
 import type { BlockSnapshot } from '@blocksuite/affine/store';
 
-export class EdgelessClipboardWatcher extends BlockServiceWatcher {
-  static override readonly flavour = 'affine:page';
+export class EdgelessClipboardWatcher extends LifeCycleWatcher {
+  static override key = 'edgeless-clipboard-watcher';
 
   override mounted() {
     super.mounted();
-    this.blockService.disposables.add(
-      this.blockService.specSlots.viewConnected.on(view => {
-        const { component } = view;
-        if (component instanceof EdgelessRootBlockComponent) {
-          const AIChatBlockFlavour = AIChatBlockSchema.model.flavour;
-          const createFunc = (block: BlockSnapshot) => {
-            const {
-              xywh,
-              scale,
-              messages,
-              sessionId,
-              rootDocId,
-              rootWorkspaceId,
-            } = block.props;
-            const blockId = component.service.crud.addBlock(
-              AIChatBlockFlavour,
-              {
-                xywh,
-                scale,
-                messages,
-                sessionId,
-                rootDocId,
-                rootWorkspaceId,
-              },
-              component.surface.model.id
-            );
-            return blockId;
-          };
-          component.clipboardController.registerBlock(
-            AIChatBlockFlavour,
-            createFunc
-          );
-        }
-      })
-    );
+    const { view } = this.std;
+    view.viewUpdated.on(payload => {
+      if (payload.type !== 'block' || payload.method !== 'add') {
+        return;
+      }
+      const component = payload.view;
+      if (!(component instanceof EdgelessRootBlockComponent)) {
+        return;
+      }
+      const AIChatBlockFlavour = AIChatBlockSchema.model.flavour;
+      const createFunc = (block: BlockSnapshot) => {
+        const { xywh, scale, messages, sessionId, rootDocId, rootWorkspaceId } =
+          block.props;
+        const blockId = component.service.crud.addBlock(
+          AIChatBlockFlavour,
+          {
+            xywh,
+            scale,
+            messages,
+            sessionId,
+            rootDocId,
+            rootWorkspaceId,
+          },
+          component.surface.model.id
+        );
+        return blockId;
+      };
+      component.clipboardController.registerBlock(
+        AIChatBlockFlavour,
+        createFunc
+      );
+    });
   }
 }

packages/frontend/core/src/blocksuite/extensions/quick-search-service.ts

@@ -10,10 +10,7 @@ import {
 import { ExternalLinksQuickSearchSession } from '@affine/core/modules/quicksearch/impls/external-links';
 import { JournalsQuickSearchSession } from '@affine/core/modules/quicksearch/impls/journals';
 import { track } from '@affine/track';
-import {
-  BlockServiceWatcher,
-  type WidgetComponent,
-} from '@blocksuite/affine/block-std';
+import { LifeCycleWatcher } from '@blocksuite/affine/block-std';
 import type { QuickSearchResult } from '@blocksuite/affine/blocks';
 import {
   AffineSlashMenuWidget,
@@ -123,65 +120,56 @@ export function patchQuickSearchService(framework: FrameworkProvider) {
     },
   });
 
-  const SlashMenuQuickSearchExtension = patchSpecService(
-    'affine:page',
-    (component: WidgetComponent) => {
-      if (component instanceof AffineSlashMenuWidget) {
-        component.config.items.forEach(item => {
-          if (
-            'action' in item &&
-            (item.name === 'Linked Doc' || item.name === 'Link')
-          ) {
-            item.action = async ({ rootComponent }) => {
-              const [success, { insertedLinkType }] =
-                rootComponent.std.command.exec(insertLinkByQuickSearchCommand);
+  class SlashMenuQuickSearchExtension extends LifeCycleWatcher {
+    static override key = 'slash-menu-quick-search-extension';
 
-              if (!success) return;
-
-              insertedLinkType
-                ?.then(type => {
-                  const flavour = type?.flavour;
-                  if (!flavour) return;
-
-                  if (flavour === 'affine:bookmark') {
-                    track.doc.editor.slashMenu.bookmark();
-                    return;
-                  }
-
-                  if (flavour === 'affine:embed-linked-doc') {
-                    track.doc.editor.slashMenu.linkDoc({
-                      control: 'linkDoc',
-                    });
-                    return;
-                  }
-                })
-                .catch(console.error);
-            };
-          }
-        });
-      }
-    }
-  );
-  return [QuickSearch, SlashMenuQuickSearchExtension];
-}
-
-function patchSpecService(
-  flavour: string,
-  onWidgetConnected?: (component: WidgetComponent) => void
-) {
-  class TempServiceWatcher extends BlockServiceWatcher {
-    static override readonly flavour = flavour;
     override mounted() {
       super.mounted();
-      const disposableGroup = this.blockService.disposables;
-      if (onWidgetConnected) {
-        disposableGroup.add(
-          this.blockService.specSlots.widgetConnected.on(({ component }) => {
-            onWidgetConnected(component);
-          })
-        );
-      }
+      const { view } = this.std;
+      view.viewUpdated.on(payload => {
+        if (payload.type !== 'widget' || payload.method !== 'add') {
+          return;
+        }
+        const component = payload.view;
+        if (component instanceof AffineSlashMenuWidget) {
+          component.config.items.forEach(item => {
+            if (
+              'action' in item &&
+              (item.name === 'Linked Doc' || item.name === 'Link')
+            ) {
+              item.action = async ({ rootComponent }) => {
+                const [success, { insertedLinkType }] =
+                  rootComponent.std.command.exec(
+                    insertLinkByQuickSearchCommand
+                  );
+
+                if (!success) return;
+
+                insertedLinkType
+                  ?.then(type => {
+                    const flavour = type?.flavour;
+                    if (!flavour) return;
+
+                    if (flavour === 'affine:bookmark') {
+                      track.doc.editor.slashMenu.bookmark();
+                      return;
+                    }
+
+                    if (flavour === 'affine:embed-linked-doc') {
+                      track.doc.editor.slashMenu.linkDoc({
+                        control: 'linkDoc',
+                      });
+                      return;
+                    }
+                  })
+                  .catch(console.error);
+              };
+            }
+          });
+        }
+      });
     }
   }
-  return TempServiceWatcher;
+
+  return [QuickSearch, SlashMenuQuickSearchExtension];
 }

packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/snapshot.tsx

@@ -2,16 +2,14 @@ import { Skeleton } from '@affine/component';
 import type { EditorSettingSchema } from '@affine/core/modules/editor-setting';
 import { EditorSettingService } from '@affine/core/modules/editor-setting';
 import type { EditorHost } from '@blocksuite/affine/block-std';
-import {
-  BlockServiceIdentifier,
-  BlockStdScope,
-} from '@blocksuite/affine/block-std';
+import { BlockStdScope } from '@blocksuite/affine/block-std';
 import {
   GfxControllerIdentifier,
   type GfxPrimitiveElementModel,
 } from '@blocksuite/affine/block-std/gfx';
 import {
   EdgelessCRUDIdentifier,
+  type EdgelessRootPreviewBlockComponent,
   SpecProvider,
 } from '@blocksuite/affine/blocks';
 import { Bound } from '@blocksuite/affine/global/utils';
@@ -93,14 +91,18 @@ export const EdgelessSnapshot = (props: Props) => {
     }
 
     // refresh viewport
-    const edgelessService = editorHost.std.get(
-      BlockServiceIdentifier('affine:page')
-    );
     const gfx = editorHost.std.get(GfxControllerIdentifier);
-    edgelessService.specSlots.viewConnected.once(({ component }) => {
-      const edgelessBlock = component as any;
+    const disposable = editorHost.std.view.viewUpdated.on(payload => {
+      if (
+        payload.type !== 'block' ||
+        payload.method !== 'add' ||
+        payload.view.model.flavour !== 'affine:page'
+      ) {
+        return;
+      }
+      const component = payload.view as EdgelessRootPreviewBlockComponent;
       doc.readonly = false;
-      edgelessBlock.editorViewportSelector = 'ref-viewport';
+      component.editorViewportSelector = 'ref-viewport';
       const frame = getFrameBlock(doc);
       if (frame && docName !== 'frame') {
         // docName with value 'frame' shouldn't be deleted, it is a part of frame settings
@@ -110,6 +112,7 @@ export const EdgelessSnapshot = (props: Props) => {
       const bound = boundMap.get(docName);
       bound && gfx.viewport.setViewportByBound(bound);
       doc.readonly = true;
+      disposable.dispose();
     });
 
     // append to dom node