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

blocksuite/framework/inline/package.json

@@ -28,6 +28,7 @@
     "@blocksuite/global": "workspace:*",
     "@preact/signals-core": "^1.8.0",
     "lit": "^3.2.0",
+    "rxjs": "^7.8.1",
     "yjs": "^13.6.21",
     "zod": "^3.23.8"
   },

blocksuite/framework/inline/src/components/v-element.ts

@@ -1,6 +1,6 @@
+import { DisposableGroup } from '@blocksuite/global/disposable';
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
 import { SignalWatcher } from '@blocksuite/global/lit';
-import { DisposableGroup } from '@blocksuite/global/slot';
 import { effect, signal } from '@preact/signals-core';
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';

blocksuite/framework/inline/src/inline-editor.ts

@@ -1,7 +1,8 @@
+import { DisposableGroup } from '@blocksuite/global/disposable';
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
-import { DisposableGroup, Slot } from '@blocksuite/global/slot';
 import { type Signal, signal } from '@preact/signals-core';
 import { nothing, render, type TemplateResult } from 'lit';
+import { Subject } from 'rxjs';
 import type * as Y from 'yjs';
 
 import type { VLine } from './components/v-line.js';
@@ -160,19 +161,19 @@ export class InlineEditor<
   };
 
   readonly slots = {
-    mounted: new Slot(),
-    unmounted: new Slot(),
-    renderComplete: new Slot(),
-    textChange: new Slot(),
-    inlineRangeSync: new Slot<Range | null>(),
+    mounted: new Subject<void>(),
+    unmounted: new Subject<void>(),
+    renderComplete: new Subject<void>(),
+    textChange: new Subject<void>(),
+    inlineRangeSync: new Subject<Range | null>(),
     /**
      * Corresponding to the `compositionUpdate` and `beforeInput` events, and triggered only when the `inlineRange` is not null.
      */
-    inputting: new Slot(),
+    inputting: new Subject<void>(),
     /**
      * Triggered only when the `inlineRange` is not null.
      */
-    keydown: new Slot<KeyboardEvent>(),
+    keydown: new Subject<KeyboardEvent>(),
   };
 
   readonly vLineRenderer: ((vLine: VLine) => TemplateResult) | null;
@@ -252,7 +253,7 @@ export class InlineEditor<
     this.renderService.mount();
 
     this._mounted = true;
-    this.slots.mounted.emit();
+    this.slots.mounted.next();
 
     this.render();
   }
@@ -267,7 +268,7 @@ export class InlineEditor<
     this._rootElement = null;
     this._mounted = false;
     this.disposables.dispose();
-    this.slots.unmounted.emit();
+    this.slots.unmounted.next();
   }
 
   setReadonly(isReadonly: boolean): void {

blocksuite/framework/inline/src/services/event.ts

@@ -118,7 +118,7 @@ export class EventService<TextAttributes extends BaseTextAttributes> {
       this.editor as InlineEditor
     );
 
-    this.editor.slots.inputting.emit();
+    this.editor.slots.inputting.next();
   };
 
   private readonly _onClick = (event: MouseEvent) => {
@@ -180,7 +180,7 @@ export class EventService<TextAttributes extends BaseTextAttributes> {
       });
     }
 
-    this.editor.slots.inputting.emit();
+    this.editor.slots.inputting.next();
   };
 
   private readonly _onCompositionStart = () => {
@@ -215,14 +215,14 @@ export class EventService<TextAttributes extends BaseTextAttributes> {
     )
       return;
 
-    this.editor.slots.inputting.emit();
+    this.editor.slots.inputting.next();
   };
 
   private readonly _onKeyDown = (event: KeyboardEvent) => {
     const inlineRange = this.editor.getInlineRange();
     if (!inlineRange) return;
 
-    this.editor.slots.keydown.emit(event);
+    this.editor.slots.keydown.next(event);
 
     if (
       !event.shiftKey &&

blocksuite/framework/inline/src/services/range.ts

@@ -257,7 +257,8 @@ export class RangeService<TextAttributes extends BaseTextAttributes> {
         if (editor.inlineRangeProviderOverride) return;
 
         if (this.editor.renderService.rendering) {
-          editor.slots.renderComplete.once(() => {
+          const subscription = editor.slots.renderComplete.subscribe(() => {
+            subscription.unsubscribe();
             this.syncInlineRange(newInlineRange);
           });
         } else {
@@ -308,11 +309,14 @@ export class RangeService<TextAttributes extends BaseTextAttributes> {
             selection.addRange(newRange);
             this.editor.rootElement.focus();
 
-            this.editor.slots.inlineRangeSync.emit(newRange);
+            this.editor.slots.inlineRangeSync.next(newRange);
           } else {
-            this.editor.slots.renderComplete.once(() => {
-              this.syncInlineRange(inlineRange);
-            });
+            const subscription = this.editor.slots.renderComplete.subscribe(
+              () => {
+                subscription.unsubscribe();
+                this.syncInlineRange(inlineRange);
+              }
+            );
           }
         } catch (error) {
           console.error('failed to apply inline range');
@@ -322,7 +326,10 @@ export class RangeService<TextAttributes extends BaseTextAttributes> {
     };
 
     if (this.editor.renderService.rendering) {
-      this.editor.slots.renderComplete.once(handler);
+      const subscription = this.editor.slots.renderComplete.subscribe(() => {
+        subscription.unsubscribe();
+        handler();
+      });
     } else {
       handler();
     }

blocksuite/framework/inline/src/services/render.ts

@@ -14,7 +14,7 @@ export class RenderService<TextAttributes extends BaseTextAttributes> {
     _: Y.YTextEvent,
     transaction: Y.Transaction
   ) => {
-    this.editor.slots.textChange.emit();
+    this.editor.slots.textChange.next();
 
     const yText = this.editor.yText;
 
@@ -153,7 +153,7 @@ export class RenderService<TextAttributes extends BaseTextAttributes> {
       .waitForUpdate()
       .then(() => {
         this._rendering = false;
-        this.editor.slots.renderComplete.emit();
+        this.editor.slots.renderComplete.next();
         this.editor.syncInlineRange();
       })
       .catch(console.error);