Merge pull request #158 from toeverything/chore/ref-menu-plugin

fix: cleaning ReferenceMenuPlugin side effect

libs/components/editor-plugins/src/menu/reference-menu/Container.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
-import style9 from 'style9';
 
 import { Virgo, PluginHooks, HookType } from '@toeverything/framework/virgo';
 import {

libs/components/editor-plugins/src/menu/reference-menu/Plugin.tsx

@@ -1,33 +1,34 @@
 import { StrictMode } from 'react';
-import { createRoot, type Root } from 'react-dom/client';
 
 import { BasePlugin } from '../../base-plugin';
+import { PluginRenderRoot } from '../../utils';
 import { ReferenceMenu } from './ReferenceMenu';
 
 const PLUGIN_NAME = 'reference-menu';
 
 export class ReferenceMenuPlugin extends BasePlugin {
-    private root?: Root;
+    private _root?: PluginRenderRoot;
 
     public static override get pluginName(): string {
         return PLUGIN_NAME;
     }
 
     protected override _onRender(): void {
-        const container = document.createElement('div');
-        // TODO: remove
-        container.classList.add(`id-${PLUGIN_NAME}`);
-        // this.editor.attachElement(this.menu_container);
-        window.document.body.appendChild(container);
-        this.root = createRoot(container);
-        this.render_reference_menu();
-    }
+        this._root = new PluginRenderRoot({
+            name: PLUGIN_NAME,
+            render: this.editor.reactRenderRoot.render,
+        });
+        this._root.mount();
 
-    private render_reference_menu(): void {
-        this.root?.render(
+        this._root?.render(
             <StrictMode>
                 <ReferenceMenu editor={this.editor} hooks={this.hooks} />
             </StrictMode>
         );
     }
+
+    public override dispose() {
+        this._root?.unmount();
+        super.dispose();
+    }
 }

libs/components/editor-plugins/src/menu/reference-menu/ReferenceMenu.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import style9 from 'style9';
 
-import { MuiClickAwayListener } from '@toeverything/components/ui';
+import { MuiClickAwayListener, styled } from '@toeverything/components/ui';
 import { Virgo, HookType, PluginHooks } from '@toeverything/framework/virgo';
 import { Point } from '@toeverything/utils';
 
@@ -120,8 +119,7 @@ export const ReferenceMenu = ({ editor, hooks, style }: ReferenceMenuProps) => {
     };
 
     return (
-        <div
-            className={styles('referenceMenu')}
+        <ReferenceMenuWrapper
             style={{ top: position.y, left: position.x }}
             onKeyUp={handle_keyup}
         >
@@ -140,13 +138,11 @@ export const ReferenceMenu = ({ editor, hooks, style }: ReferenceMenuProps) => {
                     />
                 </div>
             </MuiClickAwayListener>
-        </div>
+        </ReferenceMenuWrapper>
     );
 };
 
-const styles = style9.create({
-    referenceMenu: {
-        position: 'absolute',
-        zIndex: 1,
-    },
+const ReferenceMenuWrapper = styled('div')({
+    position: 'absolute',
+    zIndex: 1,
 });

libs/components/editor-plugins/src/menu/reference-menu/index.ts

@@ -0,0 +1 @@
+export { ReferenceMenuPlugin } from './Plugin';