feat(plugin): migrate plugin runner to rxjs

libs/components/editor-plugins/src/block-property/Plugin.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { BasePlugin } from '../base-plugin';
+import { BlockDomInfo, HookType } from '@toeverything/framework/virgo';
+
+import View from './View';
+import { Subscription } from 'rxjs';
+const PLUGIN_NAME = 'block-property';
+
+export class BlockPropertyPlugin extends BasePlugin {
+    public static override get pluginName(): string {
+        return PLUGIN_NAME;
+    }
+
+    private _root: Root | undefined;
+    private _rootDom: HTMLElement;
+    // record mouse moving block id
+    private _currentSlidingBlockInfo: BlockDomInfo;
+    private _hover = false;
+
+    private _setHover = (isHover: boolean) => {
+        this._hover = isHover;
+    };
+    private _insertRootToBlock = async () => {
+        this._rootDom = document.createElement('div');
+        this._rootDom.style.position = 'relative';
+        this._rootDom.style.zIndex = '1000';
+        this._rootDom.classList.add(`id-${PLUGIN_NAME}`);
+        this._currentSlidingBlockInfo.dom.appendChild(this._rootDom);
+        this._root = createRoot(this._rootDom);
+    };
+
+    private _onSlidingBlockChange = async (blockDomInfo: BlockDomInfo) => {
+        this._currentSlidingBlockInfo = blockDomInfo;
+        await this._insertRootToBlock();
+        this._renderView();
+    };
+
+    private _onMouseMove = async ([event, blockDomInfo]: [
+        React.MouseEvent,
+        BlockDomInfo
+    ]) => {
+        if (
+            blockDomInfo.blockId !== this._currentSlidingBlockInfo?.blockId &&
+            !this._hover
+        ) {
+            await this.dispose();
+
+            await this._onSlidingBlockChange(blockDomInfo);
+        }
+    };
+
+    private _renderView = () => {
+        this._root.render(
+            <View
+                blockDomInfo={this._currentSlidingBlockInfo}
+                setIsHover={this._setHover}
+            />
+        );
+    };
+
+    protected override _onRender(): void {
+        const sub = this.hooks
+            .get(HookType.AFTER_ON_NODE_MOUSE_MOVE)
+            .subscribe(this._onMouseMove);
+
+        this.sub.add(sub);
+    }
+
+    override async dispose() {
+        if (this._currentSlidingBlockInfo) {
+            this._currentSlidingBlockInfo.dom.removeChild(this._rootDom);
+            this._currentSlidingBlockInfo = undefined;
+        }
+
+        this._rootDom = undefined;
+        if (this._root) {
+            this._root.unmount();
+        }
+        super.dispose();
+    }
+}

libs/components/editor-plugins/src/block-property/index.tsx

@@ -1,83 +0,0 @@
-import React from 'react';
-import { createRoot, type Root } from 'react-dom/client';
-import { BasePlugin } from '../base-plugin';
-import { BlockDomInfo, HookType } from '@toeverything/framework/virgo';
-
-import View from './view';
-const PLUGIN_NAME = 'block-property';
-
-export class BlockPropertyPlugin extends BasePlugin {
-    public static override get pluginName(): string {
-        return PLUGIN_NAME;
-    }
-
-    private root: Root | undefined;
-    private root_dom: HTMLElement;
-    // record mouse moving block id
-    private current_sliding_block_info: BlockDomInfo;
-    private is_render = false;
-    private is_hover = false;
-
-    private set_is_hover = (isHover: boolean) => {
-        this.is_hover = isHover;
-    };
-    private insert_root_to_block = async () => {
-        this.root_dom = document.createElement('div');
-        this.root_dom.style.position = 'relative';
-        this.root_dom.style.zIndex = '1000';
-        this.root_dom.classList.add(`id-${PLUGIN_NAME}`);
-        this.current_sliding_block_info.dom.appendChild(this.root_dom);
-        this.root = createRoot(this.root_dom);
-    };
-
-    private on_sliding_block_change = async (blockDomInfo: BlockDomInfo) => {
-        this.current_sliding_block_info = blockDomInfo;
-        await this.insert_root_to_block();
-        this.render_view();
-        this.is_render = true;
-    };
-
-    private on_mouse_move = async (
-        event: React.MouseEvent,
-        blockDomInfo: BlockDomInfo
-    ) => {
-        if (
-            blockDomInfo.blockId !== this.current_sliding_block_info?.blockId &&
-            !this.is_hover
-        ) {
-            await this.dispose();
-
-            await this.on_sliding_block_change(blockDomInfo);
-        }
-    };
-
-    private render_view = () => {
-        this.root.render(
-            <View
-                blockDomInfo={this.current_sliding_block_info}
-                setIsHover={this.set_is_hover}
-            />
-        );
-    };
-
-    protected override _onRender(): void {
-        this.hooks.addHook(
-            HookType.AFTER_ON_NODE_MOUSE_MOVE,
-            this.on_mouse_move,
-            this
-        );
-    }
-
-    override async dispose() {
-        if (this.current_sliding_block_info) {
-            this.current_sliding_block_info.dom.removeChild(this.root_dom);
-            this.current_sliding_block_info = undefined;
-        }
-
-        this.root_dom = undefined;
-        this.is_render = false;
-        if (this.root) {
-            this.root.unmount();
-        }
-    }
-}