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

blocksuite/affine/blocks/block-image/package.json

@@ -31,6 +31,7 @@
     "file-type": "^20.0.0",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
+    "rxjs": "^7.8.1",
     "zod": "^3.23.8"
   },
   "exports": {

blocksuite/affine/blocks/block-image/src/components/page-image-block.ts

@@ -191,7 +191,7 @@ export class ImageBlockPageComponent extends WithDisposable(ShadowlessElement) {
   private _handleSelection() {
     const selection = this._host.selection;
     this._disposables.add(
-      selection.slots.changed.on(selList => {
+      selection.slots.changed.subscribe(selList => {
         this._isSelected = selList.some(
           sel => sel.blockId === this.block.blockId && sel.is(ImageSelection)
         );
@@ -199,7 +199,7 @@ export class ImageBlockPageComponent extends WithDisposable(ShadowlessElement) {
     );
 
     this._disposables.add(
-      this._model.propsUpdated.on(() => {
+      this._model.propsUpdated.subscribe(() => {
         this.requestUpdate();
       })
     );

blocksuite/affine/blocks/block-image/src/image-block.ts

@@ -60,7 +60,7 @@ export class ImageBlockComponent extends CaptionedBlockComponent<ImageBlockModel
     this.refreshData();
     this.contentEditable = 'false';
     this._disposables.add(
-      this.model.propsUpdated.on(({ key }) => {
+      this.model.propsUpdated.subscribe(({ key }) => {
         if (key === 'sourceId') {
           this.refreshData();
         }

blocksuite/affine/blocks/block-image/src/image-edgeless-block.ts

@@ -62,7 +62,7 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
     this.refreshData();
     this.contentEditable = 'false';
     this.disposables.add(
-      this.model.propsUpdated.on(({ key }) => {
+      this.model.propsUpdated.subscribe(({ key }) => {
         if (key === 'sourceId') {
           this.refreshData();
         }