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

blocksuite/affine/widgets/widget-slash-menu/package.json

@@ -26,7 +26,8 @@
     "@toeverything/theme": "^1.1.12",
     "@types/lodash-es": "^4.17.12",
     "lit": "^3.2.0",
-    "lodash-es": "^4.17.21"
+    "lodash-es": "^4.17.21",
+    "rxjs": "^7.8.1"
   },
   "exports": {
     ".": "./src/index.ts",

blocksuite/affine/widgets/widget-slash-menu/src/slash-menu-popover.ts

@@ -233,8 +233,11 @@ export class SlashMenu extends WithDisposable(LitElement) {
         if (isComposition) {
           this._updateFilteredItems();
         } else {
-          this.inlineEditor.slots.renderComplete.once(
-            this._updateFilteredItems
+          const subscription = this.inlineEditor.slots.renderComplete.subscribe(
+            () => {
+              subscription.unsubscribe();
+              this._updateFilteredItems();
+            }
           );
         }
       },
@@ -251,7 +254,12 @@ export class SlashMenu extends WithDisposable(LitElement) {
         if (curRange.index < this._startRange.index) {
           this.abortController.abort();
         }
-        this.inlineEditor.slots.renderComplete.once(this._updateFilteredItems);
+        const subscription = this.inlineEditor.slots.renderComplete.subscribe(
+          () => {
+            subscription.unsubscribe();
+            this._updateFilteredItems();
+          }
+        );
       },
       onAbort: () => this.abortController.abort(),
     });

blocksuite/affine/widgets/widget-slash-menu/src/widget.ts

@@ -4,7 +4,7 @@ import {
 } from '@blocksuite/affine-rich-text';
 import type { UIEventStateContext } from '@blocksuite/block-std';
 import { TextSelection, WidgetComponent } from '@blocksuite/block-std';
-import { DisposableGroup } from '@blocksuite/global/slot';
+import { DisposableGroup } from '@blocksuite/global/disposable';
 import { InlineEditor } from '@blocksuite/inline';
 import debounce from 'lodash-es/debounce';
 
@@ -93,8 +93,16 @@ export class AffineSlashMenuWidget extends WidgetComponent {
   ) => {
     const inlineRangeApplyCallback = (callback: () => void) => {
       // the inline ranged updated in compositionEnd event before this event callback
-      if (isCompositionEnd) callback();
-      else inlineEditor.slots.inlineRangeSync.once(callback);
+      if (isCompositionEnd) {
+        callback();
+      } else {
+        const subscription = inlineEditor.slots.inlineRangeSync.subscribe(
+          () => {
+            subscription.unsubscribe();
+            callback();
+          }
+        );
+      }
     };
 
     if (this.block.model.flavour !== 'affine:page') {