feat(editor): replace slot with rxjs subject (#10768)

blocksuite/framework/block-std/src/view/element/block-component.ts

@@ -214,21 +214,23 @@ export class BlockComponent<
 
     this.std.view.setBlock(this);
 
-    const disposable = this.std.store.slots.blockUpdated.on(({ type, id }) => {
-      if (id === this.model.id && type === 'delete') {
-        this.std.view.deleteBlock(this);
-        disposable.dispose();
+    const disposable = this.std.store.slots.blockUpdated.subscribe(
+      ({ type, id }) => {
+        if (id === this.model.id && type === 'delete') {
+          this.std.view.deleteBlock(this);
+          disposable.unsubscribe();
+        }
       }
-    });
+    );
     this._disposables.add(disposable);
 
     this._disposables.add(
-      this.model.propsUpdated.on(() => {
+      this.model.propsUpdated.subscribe(() => {
         this.requestUpdate();
       })
     );
 
-    this.service?.specSlots.viewConnected.emit({
+    this.service?.specSlots.viewConnected.next({
       service: this.service,
       component: this,
     });
@@ -237,7 +239,7 @@ export class BlockComponent<
   override disconnectedCallback() {
     super.disconnectedCallback();
 
-    this.service?.specSlots.viewDisconnected.emit({
+    this.service?.specSlots.viewDisconnected.next({
       service: this.service,
       component: this,
     });

blocksuite/framework/block-std/src/view/element/gfx-block-component.ts

@@ -30,13 +30,13 @@ function handleGfxConnection(instance: GfxBlockComponent) {
   instance.style.position = 'absolute';
 
   instance.disposables.add(
-    instance.gfx.viewport.viewportUpdated.on(() => {
+    instance.gfx.viewport.viewportUpdated.subscribe(() => {
       updateTransform(instance);
     })
   );
 
   instance.disposables.add(
-    instance.doc.slots.blockUpdated.on(({ type, id }) => {
+    instance.doc.slots.blockUpdated.subscribe(({ type, id }) => {
       if (id === instance.model.id && type === 'update') {
         updateTransform(instance);
       }

blocksuite/framework/block-std/src/view/element/widget-component.ts

@@ -74,7 +74,7 @@ export class WidgetComponent<
     super.connectedCallback();
     this.std.view.setWidget(this);
 
-    this.service?.specSlots.widgetConnected.emit({
+    this.service?.specSlots.widgetConnected.next({
       service: this.service,
       component: this,
     });
@@ -83,7 +83,7 @@ export class WidgetComponent<
   override disconnectedCallback() {
     super.disconnectedCallback();
     this.std?.view.deleteWidget(this);
-    this.service?.specSlots.widgetDisconnected.emit({
+    this.service?.specSlots.widgetDisconnected.next({
       service: this.service,
       component: this,
     });

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

@@ -1,4 +1,4 @@
-import { Slot } from '@blocksuite/global/slot';
+import { Subject } from 'rxjs';
 
 import { LifeCycleWatcher } from '../extension/index.js';
 import type { BlockComponent, WidgetComponent } from './element/index.js';
@@ -24,7 +24,7 @@ export class ViewStore extends LifeCycleWatcher {
 
   private readonly _blockMap = new Map<string, BlockComponent>();
 
-  viewUpdated: Slot<ViewUpdatePayload> = new Slot();
+  viewUpdated: Subject<ViewUpdatePayload> = new Subject();
 
   get views() {
     return Array.from(this._blockMap.values());
@@ -44,7 +44,7 @@ export class ViewStore extends LifeCycleWatcher {
 
   deleteBlock = (node: BlockComponent) => {
     this._blockMap.delete(node.model.id);
-    this.viewUpdated.emit({
+    this.viewUpdated.next({
       id: node.model.id,
       method: 'delete',
       type: 'block',
@@ -56,7 +56,7 @@ 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({
+    this.viewUpdated.next({
       id: node.model.id,
       method: 'delete',
       type: 'widget',
@@ -81,7 +81,7 @@ export class ViewStore extends LifeCycleWatcher {
       this.deleteBlock(node);
     }
     this._blockMap.set(node.model.id, node);
-    this.viewUpdated.emit({
+    this.viewUpdated.next({
       id: node.model.id,
       method: 'add',
       type: 'block',
@@ -93,7 +93,7 @@ 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({
+    this.viewUpdated.next({
       id: node.model.id,
       method: 'add',
       type: 'widget',
@@ -140,5 +140,6 @@ export class ViewStore extends LifeCycleWatcher {
   override unmounted() {
     this._blockMap.clear();
     this._widgetMap.clear();
+    this.viewUpdated.complete();
   }
 }