fix(plugin): left menu postion and size

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

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

libs/components/editor-core/src/block-content-wrapper/BlockContentWrapper.tsx

@@ -9,6 +9,7 @@ type BlockContentWrapperProps = {
     children: ReactElement | null;
 };
 
+// TODO: remove
 export const WrapperWithPendantAndDragDrop: FC<BlockContentWrapperProps> =
     function ({ block, children, editor }) {
         return (

libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx

@@ -1,5 +1,4 @@
 import type { FC, PropsWithChildren } from 'react';
-import React, { useState } from 'react';
 import { styled } from '@toeverything/components/ui';
 import type { AsyncBlock } from '../editor';
 import { PendantPopover } from './pendant-popover';
@@ -11,74 +10,68 @@ interface BlockTagProps {
     block: AsyncBlock;
 }
 
-/**
- * @deprecated Need to be refactored
- */
 export const BlockPendantProvider: FC<PropsWithChildren<BlockTagProps>> = ({
     block,
     children,
 }) => {
-    const [container, setContainer] = useState<HTMLElement>(null);
-    const [isHover, setIsHover] = useState(false);
     return (
-        <Container ref={(dom: HTMLElement) => setContainer(dom)}>
+        <Container>
             {children}
-            {container && (
+
-                <PendantPopover
+            <PendantPopover block={block}>
-                    block={block}
+                <StyledTriggerLine />
-                    container={container}
+            </PendantPopover>
-                    onVisibleChange={visible => {
+
-                        setIsHover(visible);
-                    }}
-                >
-                    <StyledTriggerLine
-                        className="triggerLine"
-                        isHover={isHover}
-                    />
-                </PendantPopover>
-            )}
             <PendantRender block={block} />
         </Container>
     );
 };
 
-const Container = styled('div')({
+export const LINE_GAP = 16;
+const TAG_GAP = 4;
+
+const StyledTriggerLine = styled('div')({
+    padding: `${TAG_GAP}px 0`,
+    width: '100px',
+    cursor: 'default',
+    display: 'flex',
+    alignItems: 'flex-end',
     position: 'relative',
-    padding: '4px',
+
-    '&:hover .triggerLine::before': {
+    '::before': {
-        display: 'flex',
+        content: "''",
+        width: '100%',
+        height: '2px',
+        background: '#dadada',
+        display: 'none',
+        position: 'absolute',
+        left: '0',
+        top: '4px',
+    },
+    '::after': {
+        content: "''",
+        width: '0',
+        height: '2px',
+        background: '#aac4d5',
+        display: 'block',
+        position: 'absolute',
+        left: '0',
+        top: '4px',
+        transition: 'width .3s',
     },
 });
 
-const StyledTriggerLine = styled('div')<{ isHover: boolean }>(({ isHover }) => {
+const Container = styled('div')({
-    return {
+    position: 'relative',
-        padding: '4px 0',
+    paddingBottom: `${LINE_GAP - TAG_GAP * 2}px`,
-        width: '100px',
+    '&:hover': {
-        cursor: 'default',
+        [StyledTriggerLine.toString()]: {
-        display: 'flex',
+            '&::before': {
-        alignItems: 'flex-end',
+                display: 'flex',
-        position: 'relative',
+            },
-
+            '&::after': {
-        '::before': {
+                width: '100%',
-            content: "''",
+            },
-            width: '100%',
-            height: '2px',
-            background: '#dadada',
-            display: 'none',
-            position: 'absolute',
-            left: '0',
-            top: '4px',
         },
-        '::after': {
+    },
-            content: "''",
-            width: isHover ? '100%' : '0',
-            height: '2px',
-            background: '#aac4d5',
-            display: 'block',
-            position: 'absolute',
-            left: '0',
-            top: '4px',
-            transition: 'width .3s',
-        },
-    };
 });

libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useRef } from 'react';
+import { FC, useRef } from 'react';
 import { AsyncBlock } from '../../editor';
 import { PendantHistoryPanel } from '../pendant-history-panel';
 import {
@@ -21,8 +21,6 @@ export const PendantPopover: FC<
             pointerEnterDelay={300}
             pointerLeaveDelay={200}
             placement="bottom-start"
-            // visible={true}
-            // trigger="click"
             content={
                 <PendantHistoryPanel
                     block={block}

libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx

@@ -1,10 +1,19 @@
-import { useState, useEffect, FC } from 'react';
+import {
+    useState,
+    useEffect,
+    FC,
+    type MouseEvent,
+    type DragEvent,
+    type ReactNode,
+    type CSSProperties,
+} from 'react';
 
 import {
     Virgo,
     BlockDomInfo,
     PluginHooks,
     BlockDropPlacement,
+    LINE_GAP,
 } from '@toeverything/framework/virgo';
 import { Button } from '@toeverything/components/common';
 import { styled } from '@toeverything/components/ui';
@@ -14,7 +23,7 @@ import { distinctUntilChanged, Subject } from 'rxjs';
 import { HandleChildIcon } from '@toeverything/components/icons';
 import { MENU_WIDTH } from './menu-config';
 
-const MENU_BUTTON_OFFSET = 12;
+const MENU_BUTTON_OFFSET = 4;
 
 export type LineInfoSubject = Subject<
     | {
@@ -64,13 +73,13 @@ function Line(props: { lineInfo: LineInfo; rootRect: DOMRect }) {
     };
     const bottomLineStyle = {
         ...horizontalLineStyle,
-        top: intersectionRect.bottom + 1 - rootRect.y,
+        top: intersectionRect.bottom + 1 - rootRect.y - LINE_GAP,
     };
 
     const verticalLineStyle = {
         ...lineStyle,
         width: 2,
-        height: intersectionRect.height,
+        height: intersectionRect.height - LINE_GAP,
         top: intersectionRect.y - rootRect.y,
     };
     const leftLineStyle = {
@@ -93,10 +102,10 @@ function Line(props: { lineInfo: LineInfo; rootRect: DOMRect }) {
 }
 
 function DragComponent(props: {
-    children: React.ReactNode;
+    children: ReactNode;
-    style: React.CSSProperties;
+    style: CSSProperties;
-    onDragStart: (event: React.DragEvent<Element>) => void;
+    onDragStart: (event: DragEvent<Element>) => void;
-    onDragEnd: (event: React.DragEvent<Element>) => void;
+    onDragEnd: (event: DragEvent<Element>) => void;
 }) {
     const { style, children, onDragStart, onDragEnd } = props;
     return (
@@ -122,7 +131,7 @@ export const LeftMenuDraggable: FC<LeftMenuProps> = props => {
     const [block, setBlock] = useState<BlockDomInfo | undefined>();
     const [line, setLine] = useState<LineInfo | undefined>(undefined);
 
-    const handleDragStart = async (event: React.DragEvent<Element>) => {
+    const handleDragStart = async (event: DragEvent<Element>) => {
         event.stopPropagation();
         setVisible(false);
 
@@ -138,12 +147,12 @@ export const LeftMenuDraggable: FC<LeftMenuProps> = props => {
         }
     };
 
-    const handleDragEnd = (event: React.DragEvent<Element>) => {
+    const handleDragEnd = (event: DragEvent<Element>) => {
         event.preventDefault();
         setLine(undefined);
     };
 
-    const onClick = (event: React.MouseEvent) => {
+    const onClick = (event: MouseEvent<Element>) => {
         if (block == null) return;
         const currentTarget = event.currentTarget;
         editor.selection.setSelectedNodesIds([block.blockId]);
@@ -200,11 +209,10 @@ export const LeftMenuDraggable: FC<LeftMenuProps> = props => {
                     style={{
                         position: 'absolute',
                         left:
-                            Math.min(
+                            block.rect.left -
-                                block.rect.left -
+                            MENU_WIDTH -
-                                    MENU_WIDTH -
+                            MENU_BUTTON_OFFSET -
-                                    MENU_BUTTON_OFFSET
+                            rootRect.left,
-                            ) - rootRect.left,
                         top: block.rect.top - rootRect.top,
                         opacity: visible ? 1 : 0,
                         zIndex: 1,
@@ -240,7 +248,7 @@ const Draggable = styled(Button)({
     justifyContent: 'center',
     backgroundColor: 'transparent',
     width: '16px',
-    height: '20px',
+    height: '22px',
     '& svg': {
         fontSize: '20px',
         marginLeft: '-2px',
@@ -253,5 +261,5 @@ const Draggable = styled(Button)({
 
 const LigoLeftMenu = styled('div')({
     backgroundColor: 'transparent',
-    marginRight: '4px',
+    // marginRight: '4px',
 });

libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx

@@ -1,5 +1,5 @@
 import { BlockDomInfo, HookType } from '@toeverything/framework/virgo';
-import React, { StrictMode } from 'react';
+import { StrictMode } from 'react';
 import { BasePlugin } from '../../base-plugin';
 import { ignoreBlockTypes } from './menu-config';
 import { LineInfoSubject, LeftMenuDraggable } from './LeftMenuDraggable';

libs/components/ui/src/popover/Container.tsx

@@ -15,11 +15,11 @@ export const PopoverContainer = styled('div')<
     const shadow = theme.affine.shadows.shadowSxDownLg;
     const white = theme.affine.palette.white;
 
-    const border_radius =
+    const borderRadius =
         border_radius_map[direction] || border_radius_map['left-top'];
     return {
         boxShadow: shadow,
-        borderRadius: border_radius,
+        borderRadius: borderRadius,
         padding: '8px 4px',
         backgroundColor: white,
         ...style,

libs/components/ui/src/popover/Popover.tsx

@@ -1,7 +1,7 @@
 import type { MuiPopperPlacementType as PopperPlacementType } from '../mui';
 import React, { forwardRef, type PropsWithChildren } from 'react';
 import { type PopperHandler, Popper } from '../popper';
-import { PopoverContainer } from './container';
+import { PopoverContainer } from './Container';
 import type { PopoverProps, PopoverDirection } from './interface';
 
 export const placementToContainerDirection: Record<

libs/components/ui/src/popover/index.ts

@@ -1,3 +1,3 @@
 export * from './Popover';
 export * from './interface';
-export { PopoverContainer } from './container';
+export { PopoverContainer } from './Container';