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

blocksuite/affine/components/package.json

@@ -36,6 +36,7 @@
     "lit-html": "^3.2.1",
     "lodash-es": "^4.17.21",
     "remark-math": "^6.0.0",
+    "rxjs": "^7.8.1",
     "shiki": "^3.0.0",
     "yjs": "^13.6.21",
     "zod": "^3.23.8"

blocksuite/affine/components/src/caption/block-caption.ts

@@ -124,7 +124,7 @@ export class BlockCaptionEditor<
     this.caption = this.model.caption;
 
     this.disposables.add(
-      this.model.propsUpdated.on(({ key }) => {
+      this.model.propsUpdated.subscribe(({ key }) => {
         if (key === 'caption') {
           this.caption = this.model.caption;
           if (!this._focus) {

blocksuite/affine/components/src/embed-card-modal/embed-card-edit-modal.ts

@@ -258,7 +258,9 @@ export class EmbedCardEditModal extends SignalWatcher(
     super.connectedCallback();
 
     this.disposables.add(
-      this.host.std.get(EditorLifeCycleExtension).slots.unmounted.on(this._hide)
+      this.host.std
+        .get(EditorLifeCycleExtension)
+        .slots.unmounted.subscribe(this._hide)
     );
     this._updateInfo();
   }

blocksuite/affine/components/src/filterable-list/index.ts

@@ -204,7 +204,7 @@ export function showPopFilterableList({
   createLitPortal({
     closeOnClickAway: true,
     template: ({ positionSlot }) => {
-      positionSlot.on(({ placement }) => {
+      positionSlot.subscribe(({ placement }) => {
         list.placement = placement;
       });
 

blocksuite/affine/components/src/hover/controller.ts

@@ -1,4 +1,4 @@
-import { DisposableGroup } from '@blocksuite/global/slot';
+import { DisposableGroup } from '@blocksuite/global/disposable';
 import type { ReactiveController, ReactiveElement } from 'lit';
 
 import {

blocksuite/affine/components/src/notification/linked-doc.ts

@@ -19,7 +19,7 @@ function notify(std: BlockStdScope, title: string, message: string) {
   const clear = () => {
     doc.history.off('stack-item-added', addHandler);
     doc.history.off('stack-item-popped', popHandler);
-    disposable.dispose();
+    disposable.unsubscribe();
   };
   const closeNotify = () => {
     abortController.abort();
@@ -31,7 +31,7 @@ function notify(std: BlockStdScope, title: string, message: string) {
   const popHandler = doc.history.on('stack-item-popped', closeNotify);
   const disposable = host.std
     .get(EditorLifeCycleExtension)
-    .slots.unmounted.on(closeNotify);
+    .slots.unmounted.subscribe(closeNotify);
 
   notification.notify({
     title,

blocksuite/affine/components/src/portal/helper.ts

@@ -1,5 +1,4 @@
 import { BlockSuiteError } from '@blocksuite/global/exceptions';
-import { Slot } from '@blocksuite/global/slot';
 import {
   autoUpdate,
   computePosition,
@@ -7,6 +6,7 @@ import {
 } from '@floating-ui/dom';
 import { cssVar } from '@toeverything/theme';
 import { render } from 'lit';
+import { Subject } from 'rxjs';
 
 import type { AdvancedPortalOptions, PortalOptions } from './types.js';
 
@@ -127,13 +127,13 @@ export function createLitPortal({
   positionStrategy = 'absolute',
   ...portalOptions
 }: AdvancedPortalOptions) {
-  let positionSlot = new Slot<ComputePositionReturn>();
+  let positionSlot = new Subject<ComputePositionReturn>();
   const template = portalOptions.template;
   const templateWithPosition =
     template instanceof Function
       ? ({ updatePortal }: { updatePortal: () => void }) => {
           // We need to create a new slot for each template, otherwise the slot may be used in the old template
-          positionSlot = new Slot<ComputePositionReturn>();
+          positionSlot = new Subject<ComputePositionReturn>();
           return template({ updatePortal, positionSlot });
         }
       : template;
@@ -199,7 +199,7 @@ export function createLitPortal({
         if (portalRoot.style.visibility === 'hidden') {
           portalRoot.style.visibility = visibility;
         }
-        positionSlot.emit(positionReturn);
+        positionSlot.next(positionReturn);
       })
       .catch(console.error);
   };

blocksuite/affine/components/src/portal/types.ts

@@ -1,4 +1,3 @@
-import type { Slot } from '@blocksuite/global/slot';
 import type {
   AutoUpdateOptions,
   ComputePositionConfig,
@@ -6,6 +5,7 @@ import type {
   ReferenceElement,
 } from '@floating-ui/dom';
 import type { RenderOptions, TemplateResult } from 'lit';
+import type { Subject } from 'rxjs';
 
 /**
  * See https://lit.dev/docs/templates/expressions/#child-expressions
@@ -64,7 +64,7 @@ export type AdvancedPortalOptions = Omit<
   template:
     | Renderable
     | ((context: {
-        positionSlot: Slot<ComputePositionReturn>;
+        positionSlot: Subject<ComputePositionReturn>;
         updatePortal: () => void;
       }) => Renderable);
   positionStrategy?: 'absolute' | 'fixed';

blocksuite/affine/components/src/toggle-switch/index.ts

@@ -38,11 +38,11 @@ const styles = css`
     transition: 0.1s;
   }
 
-  label.on {
+  label.subscribe {
     background: var(--affine-primary-color);
   }
 
-  label.on:after {
+  label.subscribe:after {
     left: calc(100% - 1px);
     transform: translateX(-100%);
   }

blocksuite/affine/components/src/toolbar/tooltip.ts

@@ -144,7 +144,7 @@ export class Tooltip extends LitElement {
         let arrowStyles: StyleInfo = {};
         return {
           template: ({ positionSlot, updatePortal }) => {
-            positionSlot.on(data => {
+            positionSlot.subscribe(data => {
               // The tooltip placement may change,
               // so we need to update the arrow position
               if (this.arrow) {