From d99649a9b6ca108846a459cb6b07cbcc478033c1 Mon Sep 17 00:00:00 2001
From: DiamondThree <diamond.shx@gmail.com>
Date: Thu, 28 Jul 2022 23:10:30 +0800
Subject: [PATCH] fix: commond menu in whitebord

---
 .../src/menu/command-menu/Container.tsx       |  2 +-
 .../src/menu/command-menu/Menu.tsx            | 30 +++++++------------
 2 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/libs/components/editor-plugins/src/menu/command-menu/Container.tsx b/libs/components/editor-plugins/src/menu/command-menu/Container.tsx
index 216a601524..cb56362892 100644
--- a/libs/components/editor-plugins/src/menu/command-menu/Container.tsx
+++ b/libs/components/editor-plugins/src/menu/command-menu/Container.tsx
@@ -26,7 +26,7 @@ import {
 
 const RootContainer = styled('div')(({ theme }) => {
     return {
-        position: 'fixed',
+        position: 'absolute',
         zIndex: 1,
         width: 352,
         maxHeight: 525,
diff --git a/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx b/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx
index 3ce81e6ebb..3ab140f3bc 100644
--- a/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx
+++ b/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx
@@ -6,7 +6,6 @@ import React, {
     useRef,
     useState,
 } from 'react';
-import style9 from 'style9';
 
 import { MuiClickAwayListener } from '@toeverything/components/ui';
 import { Virgo, HookType, PluginHooks } from '@toeverything/framework/virgo';
@@ -31,8 +30,6 @@ type CommandMenuPosition = {
     bottom: number | 'initial';
 };
 
-const COMMAND_MENU_HEIGHT = 509;
-
 export const CommandMenu = ({ editor, hooks, style }: CommandMenuProps) => {
     const [show, setShow] = useState(false);
     const [blockId, setBlockId] = useState<string>();
@@ -111,22 +108,24 @@ export const CommandMenu = ({ editor, hooks, style }: CommandMenuProps) => {
                                 ?.getRangeAt(0)
                                 ?.getBoundingClientRect();
                         if (rect) {
-                            let top = rect.top;
+                            let rectTop = rect.top;
                             const clientHeight =
                                 document.documentElement.clientHeight;
 
-                            if (clientHeight - top <= COMMAND_MENU_HEIGHT) {
-                                top = clientHeight - top + 10;
+                            const COMMAND_MENU_HEIGHT =
+                                window.innerHeight * 0.4;
+                            const { top, left } =
+                                editor.container.getBoundingClientRect();
+                            if (clientHeight - rectTop <= COMMAND_MENU_HEIGHT) {
                                 setCommandMenuPosition({
-                                    left: rect.left,
-                                    bottom: top,
+                                    left: rect.left - left,
+                                    bottom: rectTop - top + 10,
                                     top: 'initial',
                                 });
                             } else {
-                                top += 24;
                                 setCommandMenuPosition({
-                                    left: rect.left,
-                                    top: top,
+                                    left: rect.left - left,
+                                    top: rectTop - top + 24,
                                     bottom: 'initial',
                                 });
                             }
@@ -234,7 +233,7 @@ export const CommandMenu = ({ editor, hooks, style }: CommandMenuProps) => {
 
     return (
         <div
-            className={styles('commandMenu')}
+            style={{ zIndex: 1 }}
             onKeyUpCapture={handle_keyup}
             ref={commandMenuContentRef}
         >
@@ -260,10 +259,3 @@ export const CommandMenu = ({ editor, hooks, style }: CommandMenuProps) => {
         </div>
     );
 };
-
-const styles = style9.create({
-    commandMenu: {
-        position: 'absolute',
-        zIndex: 1,
-    },
-});