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

blocksuite/playground/apps/_common/components/docs-panel.ts

@@ -108,7 +108,7 @@ export class DocsPanel extends WithDisposable(ShadowlessElement) {
     });
 
     this.disposables.add(
-      this.editor.doc.workspace.slots.docListUpdated.on(() => {
+      this.editor.doc.workspace.slots.docListUpdated.subscribe(() => {
         this.requestUpdate();
       })
     );

blocksuite/playground/apps/_common/components/starter-debug-menu.ts

@@ -732,7 +732,7 @@ export class StarterDebugMenu extends ShadowlessElement {
   }
 
   override firstUpdated() {
-    this.doc.slots.historyUpdated.on(() => {
+    this.doc.slots.historyUpdated.subscribe(() => {
       this._canUndo = this.doc.canUndo;
       this._canRedo = this.doc.canRedo;
     });

blocksuite/playground/apps/_common/mock-services.ts

@@ -1,5 +1,4 @@
 import { toast } from '@blocksuite/affine/components/toast';
-import { Slot } from '@blocksuite/affine/global/slot';
 import {
   ColorScheme,
   type DocMode,
@@ -17,6 +16,7 @@ import {
 import { type Workspace } from '@blocksuite/affine/store';
 import type { TestAffineEditorContainer } from '@blocksuite/integration-test';
 import { Signal, signal } from '@preact/signals-core';
+import { Subject } from 'rxjs';
 
 function getModeFromStorage() {
   const mapJson = localStorage.getItem('playground:docMode');
@@ -37,7 +37,7 @@ export function removeModeFromStorage(docId: string) {
 }
 
 const DEFAULT_MODE: DocMode = 'page';
-const slotMap = new Map<string, Slot<DocMode>>();
+const slotMap = new Map<string, Subject<DocMode>>();
 
 export function mockDocModeService(editor: TestAffineEditorContainer) {
   const getEditorModeCallback: () => DocMode = () => editor.mode;
@@ -54,9 +54,9 @@ export function mockDocModeService(editor: TestAffineEditorContainer) {
     },
     onPrimaryModeChange: (handler: (mode: DocMode) => void, docId: string) => {
       if (!slotMap.get(docId)) {
-        slotMap.set(docId, new Slot());
+        slotMap.set(docId, new Subject());
       }
-      return slotMap.get(docId)!.on(handler);
+      return slotMap.get(docId)!.subscribe(handler);
     },
     getEditorMode: () => {
       return getEditorModeCallback();
@@ -68,7 +68,7 @@ export function mockDocModeService(editor: TestAffineEditorContainer) {
       const modeMap = getModeFromStorage();
       modeMap.set(docId, mode);
       saveModeToStorage(modeMap);
-      slotMap.get(docId)?.emit(mode);
+      slotMap.get(docId)?.next(mode);
     },
     togglePrimaryMode: (docId: string) => {
       const mode =

blocksuite/playground/apps/starter/utils/extensions.ts

@@ -51,7 +51,7 @@ export function createTestEditor(store: Store, workspace: Workspace) {
 
   editor.std
     .get(RefNodeSlotsProvider)
-    .docLinkClicked.on(({ pageId: docId }) => {
+    .docLinkClicked.subscribe(({ pageId: docId }) => {
       const target = workspace.getDoc(docId);
       if (!target) {
         throw new Error(`Failed to jump to doc ${docId}`);

blocksuite/playground/apps/starter/utils/test.ts

@@ -9,7 +9,12 @@ export async function prepareTestApp(collection: Workspace) {
   const store = await getStore(collection, noInit);
   store.load();
   if (!store.root) {
-    await new Promise(resolve => store.slots.rootAdded.once(resolve));
+    await new Promise(resolve => {
+      const subscription = store.slots.rootAdded.subscribe(value => {
+        subscription.unsubscribe();
+        resolve(value);
+      });
+    });
   }
 
   await createTestApp(store, collection);
@@ -34,7 +39,7 @@ async function getStore(
   }
 
   const { resolve, reject, promise } = Promise.withResolvers<Store>();
-  collection.slots.docListUpdated.on(() => {
+  collection.slots.docListUpdated.subscribe(() => {
     const doc = collection.docs.values().next().value;
     const firstDoc = doc?.getStore();
     if (!firstDoc) {