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

blocksuite/affine/blocks/block-root/src/widgets/edgeless-navigator-bg/index.ts

@@ -42,13 +42,13 @@ export class EdgelessNavigatorBlackBackgroundWidget extends WidgetComponent<Root
   override firstUpdated() {
     const { _disposables, gfx } = this;
     _disposables.add(
-      this._slots.navigatorFrameChanged.on(frame => {
+      this._slots.navigatorFrameChanged.subscribe(frame => {
         this.frame = frame;
       })
     );
 
     _disposables.add(
-      this._slots.navigatorSettingUpdated.on(({ blackBackground }) => {
+      this._slots.navigatorSettingUpdated.subscribe(({ blackBackground }) => {
         if (blackBackground !== undefined) {
           this.std
             .get(EditPropsStore)
@@ -76,7 +76,7 @@ export class EdgelessNavigatorBlackBackgroundWidget extends WidgetComponent<Root
     );
 
     _disposables.add(
-      this._slots.fullScreenToggled.on(
+      this._slots.fullScreenToggled.subscribe(
         () =>
           setTimeout(() => {
             this.requestUpdate();

blocksuite/affine/blocks/block-root/src/widgets/edgeless-zoom-toolbar/index.ts

@@ -63,7 +63,7 @@ export class AffineEdgelessZoomToolbarWidget extends WidgetComponent<
     const slots = std.get(EdgelessLegacySlotIdentifier);
 
     disposables.add(
-      slots.navigatorSettingUpdated.on(({ hideToolbar }) => {
+      slots.navigatorSettingUpdated.subscribe(({ hideToolbar }) => {
         if (hideToolbar !== undefined) {
           this._hide = hideToolbar;
         }

blocksuite/affine/blocks/block-root/src/widgets/edgeless-zoom-toolbar/zoom-bar-toggle-button.ts

@@ -69,7 +69,7 @@ export class ZoomBarToggleButton extends WithDisposable(LitElement) {
   override firstUpdated() {
     const { disposables } = this;
     disposables.add(
-      this.edgeless.slots.readonlyUpdated.on(() => {
+      this.edgeless.slots.readonlyUpdated.subscribe(() => {
         this.requestUpdate();
       })
     );

blocksuite/affine/blocks/block-root/src/widgets/edgeless-zoom-toolbar/zoom-toolbar.ts

@@ -130,12 +130,12 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) {
   override firstUpdated() {
     const { disposables } = this;
     disposables.add(
-      this.edgeless.service.viewport.viewportUpdated.on(() =>
+      this.edgeless.service.viewport.viewportUpdated.subscribe(() =>
         this.requestUpdate()
       )
     );
     disposables.add(
-      this.edgeless.slots.readonlyUpdated.on(() => {
+      this.edgeless.slots.readonlyUpdated.subscribe(() => {
         this.requestUpdate();
       })
     );

blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/align-button.ts

@@ -304,7 +304,7 @@ export class EdgelessAlignButton extends WithDisposable(LitElement) {
 
   override firstUpdated() {
     this._disposables.add(
-      this.edgeless.service.selection.slots.updated.on(() =>
+      this.edgeless.service.selection.slots.updated.subscribe(() =>
         this.requestUpdate()
       )
     );

blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/change-note-button.ts

@@ -159,7 +159,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
     const surfaceService = this.edgeless.service;
     if (!surfaceService) return;
 
-    this.edgeless.slots.toggleNoteSlicer.emit();
+    this.edgeless.slots.toggleNoteSlicer.next();
   }
 
   private _setCollapse() {
@@ -201,7 +201,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
     const clear = () => {
       this.doc.history.off('stack-item-added', addHandler);
       this.doc.history.off('stack-item-popped', popHandler);
-      disposable.dispose();
+      disposable.unsubscribe();
     };
     const closeNotify = () => {
       abortController.abort();
@@ -212,7 +212,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
     const popHandler = this.doc.history.on('stack-item-popped', closeNotify);
     const disposable = this.edgeless.std
       .get(EditorLifeCycleExtension)
-      .slots.unmounted.on(closeNotify);
+      .slots.unmounted.subscribe(closeNotify);
 
     const undo = () => {
       this.doc.undo();

blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/change-shape-button.ts

@@ -232,7 +232,7 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
     const _disposables = this._disposables;
 
     _disposables.add(
-      this._shapePanel.slots.select.on(shapeName => {
+      this._shapePanel.slots.select.subscribe(shapeName => {
         this.edgeless.doc.captureSync();
         this.elements.forEach(element => {
           this.crud.updateElement(element.id, {

blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/index.ts

@@ -361,13 +361,13 @@ export class EdgelessElementToolbarWidget extends WidgetComponent<
     this.moreGroups = getMoreMenuConfig(this.std).configure(this.moreGroups);
 
     _disposables.add(
-      edgeless.service.viewport.viewportUpdated.on(() => {
+      edgeless.service.viewport.viewportUpdated.subscribe(() => {
         this._recalculatePosition();
       })
     );
 
     _disposables.add(
-      this.selection.slots.updated.on(() => {
+      this.selection.slots.updated.subscribe(() => {
         if (
           this.selection.selectedIds.length === 0 ||
           this.selection.editing ||
@@ -383,18 +383,18 @@ export class EdgelessElementToolbarWidget extends WidgetComponent<
     );
 
     _disposables.add(
-      this.edgeless.service.surface.elementAdded.on(
+      this.edgeless.service.surface.elementAdded.subscribe(
         this._updateOnSelectedChange
       )
     );
     _disposables.add(
-      this.edgeless.service.surface.elementUpdated.on(
+      this.edgeless.service.surface.elementUpdated.subscribe(
         this._updateOnSelectedChange
       )
     );
 
     _disposables.add(
-      this.doc.slots.blockUpdated.on(this._updateOnSelectedChange)
+      this.doc.slots.blockUpdated.subscribe(this._updateOnSelectedChange)
     );
 
     _disposables.add(
@@ -410,19 +410,19 @@ export class EdgelessElementToolbarWidget extends WidgetComponent<
     );
 
     _disposables.add(
-      edgeless.slots.elementResizeStart.on(() => {
+      edgeless.slots.elementResizeStart.subscribe(() => {
         this._dragging = true;
       })
     );
     _disposables.add(
-      edgeless.slots.elementResizeEnd.on(() => {
+      edgeless.slots.elementResizeEnd.subscribe(() => {
         this._dragging = false;
         this._recalculatePosition();
       })
     );
 
     _disposables.add(
-      edgeless.slots.readonlyUpdated.on(() => this.requestUpdate())
+      edgeless.slots.readonlyUpdated.subscribe(() => this.requestUpdate())
     );
 
     this.updateComplete

blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/config.ts

@@ -359,13 +359,18 @@ const pageToolGroup: KeyboardToolPanelGroup = {
 
             const inlineEditor = getInlineEditorByModel(std.host, currentModel);
             // Wait for range to be updated
-            inlineEditor?.slots.inlineRangeSync.once(() => {
-              linkedDocWidget.show({
-                mode: 'mobile',
-                addTriggerKey: true,
-              });
-              closeToolPanel();
-            });
+            if (inlineEditor) {
+              const subscription = inlineEditor.slots.inlineRangeSync.subscribe(
+                () => {
+                  subscription.unsubscribe();
+                  linkedDocWidget.show({
+                    mode: 'mobile',
+                    addTriggerKey: true,
+                  });
+                  closeToolPanel();
+                }
+              );
+            }
           })
           .run();
       },

blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/position-controller.ts

@@ -1,6 +1,6 @@
 import { type VirtualKeyboardProvider } from '@blocksuite/affine-shared/services';
 import type { BlockStdScope, ShadowlessElement } from '@blocksuite/block-std';
-import { DisposableGroup } from '@blocksuite/global/slot';
+import { DisposableGroup } from '@blocksuite/global/disposable';
 import { effect, type Signal } from '@preact/signals-core';
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
 

blocksuite/affine/blocks/block-root/src/widgets/linked-doc/index.ts

@@ -199,7 +199,7 @@ export class AffineLinkedDocWidget extends WidgetComponent<
   private _watchViewportChange() {
     const gfx = this.std.get(GfxControllerIdentifier);
     this.disposables.add(
-      gfx.viewport.viewportUpdated.on(() => {
+      gfx.viewport.viewportUpdated.subscribe(() => {
         this._updateInputRects();
       })
     );
@@ -273,7 +273,7 @@ export class AffineLinkedDocWidget extends WidgetComponent<
       });
     }
 
-    const disposable = inlineEditor.slots.renderComplete.on(() => {
+    const disposable = inlineEditor.slots.renderComplete.subscribe(() => {
       this._updateInputRects();
     });
     this._context = {
@@ -283,7 +283,7 @@ export class AffineLinkedDocWidget extends WidgetComponent<
       triggerKey: primaryTriggerKey,
       config: this.config,
       close: () => {
-        disposable.dispose();
+        disposable.unsubscribe();
         this._inputRects$.value = [];
         this._mode$.value = 'none';
         this._context = null;

blocksuite/affine/blocks/block-root/src/widgets/linked-doc/linked-doc-popover.ts

@@ -183,9 +183,11 @@ export class LinkedDocPopover extends SignalWatcher(
         if (isComposition) {
           this._updateLinkedDocGroup().catch(console.error);
         } else {
-          this.context.inlineEditor.slots.renderComplete.once(
-            this._updateLinkedDocGroup
-          );
+          const subscription =
+            this.context.inlineEditor.slots.renderComplete.subscribe(() => {
+              subscription.unsubscribe();
+              this._updateLinkedDocGroup().catch(console.error);
+            });
         }
       },
       onPaste: () => {
@@ -201,9 +203,11 @@ export class LinkedDocPopover extends SignalWatcher(
         if (curRange.index < this.context.startRange.index) {
           this.context.close();
         }
-        this.context.inlineEditor.slots.renderComplete.once(
-          this._updateLinkedDocGroup
-        );
+        const subscription =
+          this.context.inlineEditor.slots.renderComplete.subscribe(() => {
+            subscription.unsubscribe();
+            this._updateLinkedDocGroup().catch(console.error);
+          });
       },
       onMove: step => {
         const itemLen = this._flattenActionList.length;
@@ -332,7 +336,9 @@ export class LinkedDocPopover extends SignalWatcher(
       }
 
       const gfx = this.context.std.get(GfxControllerIdentifier);
-      this.disposables.add(gfx.viewport.viewportUpdated.on(updatePosition));
+      this.disposables.add(
+        gfx.viewport.viewportUpdated.subscribe(updatePosition)
+      );
 
       updatePosition();
     }

blocksuite/affine/blocks/block-root/src/widgets/linked-doc/mobile-linked-doc-menu.ts

@@ -196,20 +196,28 @@ export class AffineMobileLinkedDocMenu extends SignalWatcher(
           if (isComposition) {
             this._updateLinkedDocGroup().catch(console.error);
           } else {
-            inlineEditor.slots.renderComplete.once(this._updateLinkedDocGroup);
+            const subscription = inlineEditor.slots.renderComplete.subscribe(
+              () => {
+                subscription.unsubscribe();
+                this._updateLinkedDocGroup().catch(console.error);
+              }
+            );
           }
         },
         onDelete: () => {
-          inlineEditor.slots.renderComplete.once(() => {
-            const curRange = inlineEditor.getInlineRange();
+          const subscription = inlineEditor.slots.renderComplete.subscribe(
+            () => {
+              subscription.unsubscribe();
+              const curRange = inlineEditor.getInlineRange();
 
-            if (!this.context.startRange || !curRange) return;
+              if (!this.context.startRange || !curRange) return;
 
-            if (curRange.index < this.context.startRange.index) {
-              this.context.close();
+              if (curRange.index < this.context.startRange.index) {
+                this.context.close();
+              }
+              this._updateLinkedDocGroup().catch(console.error);
             }
-            this._updateLinkedDocGroup().catch(console.error);
-          });
+          );
         },
         onConfirm: () => {
           this._firstActionItem?.action()?.catch(console.error);