feat: change cursor when drag

libs/components/editor-plugins/src/menu/group-menu/DragItem.tsx

@@ -10,6 +10,7 @@ type DragItemProps = {
     isShow: boolean;
     groupBlock: AsyncBlock;
     editor: Virgo;
+    item: React.MutableRefObject<HTMLDivElement>;
     onPositionChange?: (position: Point) => void;
 } & React.HTMLAttributes<HTMLDivElement>;
 
@@ -17,10 +18,11 @@ export const DragItem = function ({
     isShow,
     editor,
     groupBlock,
+    item,
     ...divProps
 }: DragItemProps) {
     return (
-        <StyledDiv {...divProps}>
+        <StyledDiv {...divProps} ref={item}>
             <StyledButton>
                 <HandleParentIcon />
             </StyledButton>
@@ -33,13 +35,14 @@ const StyledDiv = styled('div')({
     display: 'inlineFlex',
     width: `${ICON_WIDTH}px`,
     height: `${ICON_WIDTH}px`,
+    cursor: 'grab',
     ':hover': {
         backgroundColor: '#edeef0',
         borderRadius: '4px',
     },
 });
 
-const StyledButton = styled(Button)({
+const StyledButton = styled('div')({
     padding: '0',
     display: 'inlineFlex',
     alignItems: 'center',

libs/components/editor-plugins/src/menu/group-menu/GropuMenu.tsx

@@ -23,6 +23,7 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
     const [direction, setDirection] = useState<GroupDirection>(
         GroupDirection.down
     );
+    const dragItemRef = useRef<HTMLDivElement>(null);
     const menuRef = useRef<HTMLUListElement>(null);
 
     const handleRootMouseMove = useCallback(
@@ -50,6 +51,7 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
 
     const handleRootDragOver = useCallback(
         async (e: React.DragEvent<Element>) => {
+            e.preventDefault();
             let groupBlockOnDragOver = null;
             const mousePoint = new Point(e.clientX, e.clientY);
             if (editor.dragDropManager.isDragGroup(e)) {
@@ -89,7 +91,7 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
         [editor, groupBlock]
     );
 
-    const handleRootDragEnd = () => {
+    const handleRootDragEnd = (e: DragEvent) => {
         setDragOverGroup(null);
     };
 
@@ -139,13 +141,16 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
     };
 
     const handleDragStart = async (e: React.DragEvent<HTMLDivElement>) => {
+        editor.dragDropManager.isOnDrag = true;
         const dragImage = await editor.blockHelper.getBlockDragImg(
             groupBlock.id
         );
         if (dragImage) {
-            e.dataTransfer.setDragImage(dragImage, 0, 0);
             editor.dragDropManager.setDragGroupInfo(e, groupBlock.id);
+            dragImage.style.cursor = 'grabbing !important';
+            e.dataTransfer.setDragImage(dragImage, 0, 0);
         }
+        e.dataTransfer.setData('text/plain', groupBlock.id);
     };
 
     const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
@@ -169,11 +174,15 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
                     menuRef={menuRef}
                 >
                     <DragItem
+                        item={dragItemRef}
                         editor={editor}
                         isShow={!!groupBlock}
                         groupBlock={groupBlock}
                         onClick={handleClick}
                         onDragStart={handleDragStart}
+                        onDragCapture={() => {
+                            editor.dragDropManager.isOnDrag = true;
+                        }}
                         onMouseDown={handleMouseDown}
                         draggable={true}
                     />

libs/components/editor-plugins/src/menu/group-menu/Plugin.tsx

@@ -15,9 +15,6 @@ export class GroupMenuPlugin extends BasePlugin {
 
     protected override on_render(): void {
         if (this.editor.isWhiteboard) return;
-        const container = document.createElement('div');
-        // TODO remove
-        container.classList.add(`id-${PLUGIN_NAME}`);
         this.root = new PluginRenderRoot({
             name: PLUGIN_NAME,
             render: this.editor.reactRenderRoot.render,

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

@@ -133,6 +133,7 @@ export const LeftMenuDraggable: FC<LeftMenuProps> = props => {
         );
 
         const onDragStart = async (event: React.DragEvent<Element>) => {
+            editor.dragDropManager.isOnDrag = true;
             if (block == null) return;
             const dragImage = await editor.blockHelper.getBlockDragImg(
                 block.blockId

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

@@ -55,8 +55,8 @@ export class LeftMenuPlugin extends BasePlugin {
         blockInfo: BlockDomInfo
     ) => {
         const { type, dom, blockId } = blockInfo;
+        event.preventDefault();
         if (this.editor.dragDropManager.isDragBlock(event)) {
-            event.preventDefault();
             if (ignoreBlockTypes.includes(type)) {
                 return;
             }