fix(plugin): left menu postion and size

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;
-    style: React.CSSProperties;
-    onDragStart: (event: React.DragEvent<Element>) => void;
-    onDragEnd: (event: React.DragEvent<Element>) => void;
+    children: ReactNode;
+    style: CSSProperties;
+    onDragStart: (event: 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 -
-                                    MENU_WIDTH -
-                                    MENU_BUTTON_OFFSET
-                            ) - rootRect.left,
+                            block.rect.left -
+                            MENU_WIDTH -
+                            MENU_BUTTON_OFFSET -
+                            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';