fix: #516 commneu menu style

libs/components/editor-blocks/src/blocks/group/GroupView.tsx

@@ -59,7 +59,7 @@ const GroupActionWrapper = styled('div')(({ theme }) => ({
 const GroupContainer = styled('div')<{ isSelect?: boolean }>(
     ({ isSelect, theme }) => ({
         background: theme.affine.palette.white,
-        border: '2px solid #ECF1FB',
+        border: '2px solid rgba(236,241,251,.5)',
         padding: '15px 12px',
         borderRadius: '10px',
         ...(isSelect

libs/components/editor-plugins/src/menu/inline-menu/menu-item/DropdownItem.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from 'react';
 import style9 from 'style9';
 import {
-    MuiPopover,
+    Popover,
     styled,
     type SvgIconProps,
     Tooltip,
@@ -32,15 +32,6 @@ export const MenuDropdownItem = ({
         null
     );
 
-    const handle_open_dropdown_menu = useCallback(
-        (event: React.MouseEvent<HTMLButtonElement>) => {
-            event.preventDefault();
-            event.stopPropagation();
-            set_anchor_ele(event.currentTarget);
-        },
-        []
-    );
-
     const handle_close_dropdown_menu = useCallback(() => {
         set_anchor_ele(null);
     }, []);
@@ -50,40 +41,10 @@ export const MenuDropdownItem = ({
 
     return (
         <>
-            <Tooltip
+            <Popover
+                trigger="click"
+                placement="bottom-start"
                 content={
-                    <div style={{ padding: '2px 4px' }}>
-                        <p>{name}</p>
-                        {shortcut && <p>{shortcut}</p>}
-                    </div>
-                }
-                placement="bottom"
-                trigger="hover"
-            >
-                <button
-                    onClick={handle_open_dropdown_menu}
-                    className={styles('currentDropdownButton')}
-                    aria-label={name}
-                    onMouseDown={e => {
-                        // prevent toolbar from taking focus away from editor
-                        e.preventDefault();
-                        e.stopPropagation();
-                    }}
-                >
-                    <MenuIcon sx={{ width: 20, height: 20 }} />
-                    <ArrowDropDownIcon sx={{ width: 20, height: 20 }} />
-                </button>
-            </Tooltip>
-            <MuiPopover
-                id={anchor_ele ? 'inline-menu-pop' : undefined}
-                open={Boolean(anchor_ele)}
-                anchorEl={anchor_ele}
-                onClose={handle_close_dropdown_menu}
-                anchorOrigin={{
-                    horizontal: 'left',
-                    vertical: 40,
-                }}
-            >
                     <div className={styles('dropdownContainer')}>
                         {children.map(item => {
                             const {
@@ -108,7 +69,8 @@ export const MenuDropdownItem = ({
                                                 editor,
                                                 type: itemNameKey,
                                                 anchorNodeId:
-                                                selectionInfo?.anchorNode?.id,
+                                                    selectionInfo?.anchorNode
+                                                        ?.id,
                                             });
                                         }
                                         handle_close_dropdown_menu();
@@ -139,14 +101,43 @@ export const MenuDropdownItem = ({
                                         // }
                                     />
                                     {/* <ItemIcon sx={{ width: 20, height: 20 }} /> */}
-                                <span className={styles('dropdownItemItext')}>
+                                    <span
+                                        className={styles('dropdownItemItext')}
+                                    >
                                         {name}
                                     </span>
                                 </button>
                             );
                         })}
                     </div>
-            </MuiPopover>
+                } // id={anchor_ele ? 'inline-menu-pop' : undefined}
+                // open={Boolean(anchor_ele)}
+                // anchorEl={anchor_ele}
+                // onClose={handle_close_dropdown_menu}
+                // anchorOrigin={{
+                //     horizontal: 'left',
+                //     vertical: 40,
+                // }}
+            >
+                <Tooltip
+                    content={
+                        <div style={{ padding: '2px 4px' }}>
+                            <p>{name}</p>
+                            {shortcut && <p>{shortcut}</p>}
+                        </div>
+                    }
+                    placement="top"
+                    trigger="hover"
+                >
+                    <button
+                        className={styles('currentDropdownButton')}
+                        aria-label={name}
+                    >
+                        <MenuIcon sx={{ width: 20, height: 20 }} />
+                        <ArrowDropDownIcon sx={{ width: 20, height: 20 }} />
+                    </button>
+                </Tooltip>
+            </Popover>
         </>
     );
 };

libs/components/editor-plugins/src/menu/inline-menu/menu-item/IconItem.tsx

@@ -45,7 +45,7 @@ export const MenuIconItem = ({
                     {shortcut && <p>{shortcut}</p>}
                 </div>
             }
-            placement="bottom"
+            placement="top"
             trigger="hover"
         >
             <button