From 5fdbd908772fb8cf721496e9f3e5b41a18538217 Mon Sep 17 00:00:00 2001
From: lawvs <18554747+lawvs@users.noreply.github.com>
Date: Tue, 9 Aug 2022 15:00:58 +0800
Subject: [PATCH] fix: clean ReferenceMenuPlugin side effect

---
 .../src/menu/reference-menu/Container.tsx     |  1 -
 .../reference-menu/{index.tsx => Plugin.tsx}  | 25 ++++++++++---------
 .../src/menu/reference-menu/ReferenceMenu.tsx | 16 +++++-------
 .../src/menu/reference-menu/index.ts          |  1 +
 4 files changed, 20 insertions(+), 23 deletions(-)
 rename libs/components/editor-plugins/src/menu/reference-menu/{index.tsx => Plugin.tsx} (51%)
 create mode 100644 libs/components/editor-plugins/src/menu/reference-menu/index.ts

diff --git a/libs/components/editor-plugins/src/menu/reference-menu/Container.tsx b/libs/components/editor-plugins/src/menu/reference-menu/Container.tsx
index 47a1672d4d..42ca2d679d 100644
--- a/libs/components/editor-plugins/src/menu/reference-menu/Container.tsx
+++ b/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 {
diff --git a/libs/components/editor-plugins/src/menu/reference-menu/index.tsx b/libs/components/editor-plugins/src/menu/reference-menu/Plugin.tsx
similarity index 51%
rename from libs/components/editor-plugins/src/menu/reference-menu/index.tsx
rename to libs/components/editor-plugins/src/menu/reference-menu/Plugin.tsx
index 192be43463..688adfd147 100644
--- a/libs/components/editor-plugins/src/menu/reference-menu/index.tsx
+++ b/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();
+    }
 }
diff --git a/libs/components/editor-plugins/src/menu/reference-menu/ReferenceMenu.tsx b/libs/components/editor-plugins/src/menu/reference-menu/ReferenceMenu.tsx
index accd73849b..af1cd96cea 100644
--- a/libs/components/editor-plugins/src/menu/reference-menu/ReferenceMenu.tsx
+++ b/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,
 });
diff --git a/libs/components/editor-plugins/src/menu/reference-menu/index.ts b/libs/components/editor-plugins/src/menu/reference-menu/index.ts
new file mode 100644
index 0000000000..0a3879e398
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/reference-menu/index.ts
@@ -0,0 +1 @@
+export { ReferenceMenuPlugin } from './Plugin';