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.

blocksuite/affine/block-embed/src/embed-synced-doc-block/embed-synced-doc-block.ts

@@ -26,9 +26,9 @@ import {
 } from '@blocksuite/affine-shared/utils';
 import {
   BlockSelection,
-  BlockServiceWatcher,
   BlockStdScope,
   type EditorHost,
+  LifeCycleWatcher,
 } from '@blocksuite/block-std';
 import {
   GfxControllerIdentifier,
@@ -124,27 +124,31 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
       this.std.getOptional(EditorSettingProvider) ??
       signal(GeneralSettingSchema.parse({}));
 
-    class EmbedSyncedDocWatcher extends BlockServiceWatcher {
-      static override readonly flavour = 'affine:embed-synced-doc';
+    class EmbedSyncedDocWatcher extends LifeCycleWatcher {
+      static override key = 'embed-synced-doc-watcher';
 
-      override mounted() {
-        const disposableGroup = this.blockService.disposables;
-        const slots = this.blockService.specSlots;
-        disposableGroup.add(
-          slots.viewConnected.on(({ component }) => {
-            const nextComponent = component as EmbedSyncedDocBlockComponent;
+      override mounted(): void {
+        const { view } = this.std;
+        view.viewUpdated.on(payload => {
+          if (
+            payload.type !== 'block' ||
+            payload.view.model.flavour !== 'affine:embed-synced-doc'
+          ) {
+            return;
+          }
+          const nextComponent = payload.view as EmbedSyncedDocBlockComponent;
+          if (payload.method === 'add') {
             nextComponent.depth = nextDepth;
             currentDisposables.add(() => {
               nextComponent.depth = 0;
             });
-          })
-        );
-        disposableGroup.add(
-          slots.viewDisconnected.on(({ component }) => {
-            const nextComponent = component as EmbedSyncedDocBlockComponent;
+            return;
+          }
+          if (payload.method === 'delete') {
             nextComponent.depth = 0;
-          })
-        );
+            return;
+          }
+        });
       }
     }
 

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

@@ -1,9 +1,9 @@
 import type { FrameBlockModel } from '@blocksuite/affine-model';
 import { SpecProvider } from '@blocksuite/affine-shared/utils';
 import {
-  BlockServiceWatcher,
   BlockStdScope,
   type EditorHost,
+  LifeCycleWatcher,
   ShadowlessElement,
 } from '@blocksuite/block-std';
 import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
@@ -117,22 +117,26 @@ export class FramePreview extends WithDisposable(ShadowlessElement) {
 
   private _initSpec() {
     const refreshViewport = this._refreshViewport.bind(this);
-    class FramePreviewWatcher extends BlockServiceWatcher {
-      static override readonly flavour = 'affine:page';
+    class FramePreviewWatcher extends LifeCycleWatcher {
+      static override key = 'frame-preview-watcher';
 
       override mounted() {
-        const blockService = this.blockService;
-        blockService.disposables.add(
-          blockService.specSlots.viewConnected.on(({ component }) => {
-            const edgelessBlock =
-              component as EdgelessRootPreviewBlockComponent;
-
-            edgelessBlock.editorViewportSelector = 'frame-preview-viewport';
-            edgelessBlock.service.viewport.sizeUpdated.once(() => {
-              refreshViewport();
-            });
-          })
-        );
+        const { view } = this.std;
+        view.viewUpdated.on(payload => {
+          if (
+            payload.type !== 'block' ||
+            payload.method !== 'add' ||
+            payload.view.model.flavour !== 'affine:page'
+          ) {
+            return;
+          }
+          const edgelessBlock =
+            payload.view as EdgelessRootPreviewBlockComponent;
+          edgelessBlock.editorViewportSelector = 'frame-preview-viewport';
+          edgelessBlock.service.viewport.sizeUpdated.once(() => {
+            refreshViewport();
+          });
+        });
       }
     }
     this._previewSpec.extend([FramePreviewWatcher]);

blocksuite/affine/block-root/src/edgeless/edgeless-root-spec.ts

@@ -2,11 +2,14 @@ import { autoConnectWidget } from '@blocksuite/affine-widget-edgeless-auto-conne
 import { frameTitleWidget } from '@blocksuite/affine-widget-frame-title';
 import { edgelessRemoteSelectionWidget } from '@blocksuite/affine-widget-remote-selection';
 import {
-  BlockServiceWatcher,
   BlockViewExtension,
+  LifeCycleWatcher,
   WidgetViewExtension,
 } from '@blocksuite/block-std';
-import { ToolController } from '@blocksuite/block-std/gfx';
+import {
+  GfxControllerIdentifier,
+  ToolController,
+} from '@blocksuite/block-std/gfx';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal, unsafeStatic } from 'lit/static-html.js';
 
@@ -56,17 +59,12 @@ export const edgelessToolbarWidget = WidgetViewExtension(
   literal`${unsafeStatic(EDGELESS_TOOLBAR_WIDGET)}`
 );
 
-class EdgelessLocker extends BlockServiceWatcher {
-  static override readonly flavour = 'affine:page';
+class EdgelessLocker extends LifeCycleWatcher {
+  static override key = 'edgeless-locker';
 
   override mounted() {
-    const service = this.blockService;
-    service.disposables.add(
-      service.specSlots.viewConnected.on(({ service }) => {
-        // Does not allow the user to move and zoom.
-        (service as EdgelessRootService).locked = true;
-      })
-    );
+    const { viewport } = this.std.get(GfxControllerIdentifier);
+    viewport.locked = true;
   }
 }
 

blocksuite/framework/block-std/src/extension/index.ts

@@ -5,5 +5,4 @@ export * from './flavour.js';
 export * from './keymap.js';
 export * from './lifecycle-watcher.js';
 export * from './service.js';
-export * from './service-watcher.js';
 export * from './widget-view-map.js';

blocksuite/framework/block-std/src/extension/service-watcher.ts

@@ -1,47 +0,0 @@
-import type { Container } from '@blocksuite/global/di';
-import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
-
-import {
-  BlockServiceIdentifier,
-  LifeCycleWatcherIdentifier,
-  StdIdentifier,
-} from '../identifier.js';
-import type { BlockStdScope } from '../scope/index.js';
-import { LifeCycleWatcher } from './lifecycle-watcher.js';
-import type { BlockService } from './service.js';
-
-const idMap = new Map<string, number>();
-
-/**
- * @deprecated
- * BlockServiceWatcher is deprecated. You should reconsider where to put your feature.
- *
- * BlockServiceWatcher is a legacy extension that is used to watch the slots registered on block service.
- * However, we recommend using the new extension system.
- */
-export abstract class BlockServiceWatcher extends LifeCycleWatcher {
-  static flavour: string;
-
-  constructor(
-    std: BlockStdScope,
-    readonly blockService: BlockService
-  ) {
-    super(std);
-  }
-
-  static override setup(di: Container) {
-    if (!this.flavour) {
-      throw new BlockSuiteError(
-        ErrorCode.ValueNotExists,
-        'Flavour is not defined in the BlockServiceWatcher'
-      );
-    }
-    const id = idMap.get(this.flavour) ?? 0;
-    idMap.set(this.flavour, id + 1);
-    di.addImpl(
-      LifeCycleWatcherIdentifier(`${this.flavour}-watcher-${id}`),
-      this,
-      [StdIdentifier, BlockServiceIdentifier(this.flavour)]
-    );
-  }
-}