refact(hook): remove afterOnNodeDragOver

libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx

@@ -17,7 +17,7 @@ import {
     supportChildren,
     RenderBlockChildren,
     useOnSelect,
-    WrapperWithPendantAndDragDrop,
+    BlockPendantProvider,
 } from '@toeverything/components/editor-core';
 import { List } from '../../components/style-container';
 import { getChildrenType, BulletIcon, NumberType } from './data';
@@ -188,7 +188,7 @@ export const BulletView: FC<CreateView> = ({ block, editor }) => {
 
     return (
         <BlockContainer editor={editor} block={block} selected={isSelect}>
-            <WrapperWithPendantAndDragDrop editor={editor} block={block}>
+            <BlockPendantProvider block={block}>
                 <List>
                     <BulletLeft>
                         <BulletIcon numberType={properties.numberType} />
@@ -206,7 +206,7 @@ export const BulletView: FC<CreateView> = ({ block, editor }) => {
                         />
                     </div>
                 </List>
-            </WrapperWithPendantAndDragDrop>
+            </BlockPendantProvider>
             <IndentWrapper>
                 <RenderBlockChildren block={block} />
             </IndentWrapper>

libs/components/editor-blocks/src/blocks/code/CodeView.tsx

@@ -50,7 +50,7 @@ import { Option, Select } from '@toeverything/components/ui';
 
 import {
     useOnSelect,
-    WrapperWithPendantAndDragDrop,
+    BlockPendantProvider,
 } from '@toeverything/components/editor-core';
 import { copyToClipboard } from '@toeverything/utils';
 interface CreateCodeView extends CreateView {
@@ -163,7 +163,7 @@ export const CodeView: FC<CreateCodeView> = ({ block, editor }) => {
         editor.selectionManager.activePreviousNode(block.id, 'start');
     };
     return (
-        <WrapperWithPendantAndDragDrop editor={editor} block={block}>
+        <BlockPendantProvider block={block}>
             <CodeBlock
                 onKeyDown={e => {
                     e.stopPropagation();
@@ -222,6 +222,6 @@ export const CodeView: FC<CreateCodeView> = ({ block, editor }) => {
                     handleKeyArrowUp={handleKeyArrowUp}
                 />
             </CodeBlock>
-        </WrapperWithPendantAndDragDrop>
+        </BlockPendantProvider>
     );
 };

libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx

@@ -1,7 +1,7 @@
 import { FC, useState } from 'react';
 import { CreateView } from '@toeverything/framework/virgo';
 import {
-    WrapperWithPendantAndDragDrop,
+    BlockPendantProvider,
     useOnSelect,
 } from '@toeverything/components/editor-core';
 import { Upload } from '../../components/upload/upload';
@@ -33,7 +33,7 @@ export const EmbedLinkView: FC<EmbedLinkView> = props => {
     };
 
     return (
-        <WrapperWithPendantAndDragDrop editor={editor} block={block}>
+        <BlockPendantProvider block={block}>
             <LinkContainer>
                 {embedLinkUrl ? (
                     <SourceView
@@ -53,6 +53,6 @@ export const EmbedLinkView: FC<EmbedLinkView> = props => {
                     />
                 )}
             </LinkContainer>
-        </WrapperWithPendantAndDragDrop>
+        </BlockPendantProvider>
     );
 };

libs/components/editor-blocks/src/blocks/figma/FigmaView.tsx

@@ -2,7 +2,7 @@ import { FC, useState } from 'react';
 import { CreateView } from '@toeverything/framework/virgo';
 import {
     useOnSelect,
-    WrapperWithPendantAndDragDrop,
+    BlockPendantProvider,
 } from '@toeverything/components/editor-core';
 import { Upload } from '../../components/upload/upload';
 import { SourceView } from '../../components/source-view';
@@ -30,7 +30,7 @@ export const FigmaView: FC<FigmaView> = ({ block, editor }) => {
         setIsSelect(isSelect);
     });
     return (
-        <WrapperWithPendantAndDragDrop editor={editor} block={block}>
+        <BlockPendantProvider block={block}>
             <LinkContainer>
                 {figmaUrl ? (
                     <SourceView
@@ -52,6 +52,6 @@ export const FigmaView: FC<FigmaView> = ({ block, editor }) => {
                     />
                 )}
             </LinkContainer>
-        </WrapperWithPendantAndDragDrop>
+        </BlockPendantProvider>
     );
 };

libs/components/editor-blocks/src/blocks/image/ImageView.tsx

@@ -1,7 +1,7 @@
 import {
     useCurrentView,
     useOnSelect,
-    WrapperWithPendantAndDragDrop,
+    BlockPendantProvider,
 } from '@toeverything/components/editor-core';
 import { styled } from '@toeverything/components/ui';
 import { services } from '@toeverything/datasource/db-service';
@@ -158,7 +158,7 @@ export const ImageView: FC<ImageView> = ({ block, editor }) => {
     };
 
     return (
-        <WrapperWithPendantAndDragDrop editor={editor} block={block}>
+        <BlockPendantProvider block={block}>
             <ImageBlock>
                 <div ref={resize_box}>
                     {imgUrl ? (
@@ -229,6 +229,6 @@ export const ImageView: FC<ImageView> = ({ block, editor }) => {
                 </div> */}
                 </div>
             </ImageBlock>
-        </WrapperWithPendantAndDragDrop>
+        </BlockPendantProvider>
     );
 };

libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx

@@ -19,9 +19,8 @@ import {
     supportChildren,
     RenderBlockChildren,
     useOnSelect,
-    WrapperWithPendantAndDragDrop,
+    BlockPendantProvider,
 } from '@toeverything/components/editor-core';
-import { styled } from '@toeverything/components/ui';
 import { List } from '../../components/style-container';
 import { BlockContainer } from '../../components/BlockContainer';
 
@@ -185,7 +184,7 @@ export const NumberedView: FC<CreateView> = ({ block, editor }) => {
 
     return (
         <BlockContainer editor={editor} block={block} selected={isSelect}>
-            <WrapperWithPendantAndDragDrop editor={editor} block={block}>
+            <BlockPendantProvider block={block}>
                 <List>
                     <div className={'checkBoxContainer'}>
                         {getNumber(properties.numberType, number)}.
@@ -203,7 +202,7 @@ export const NumberedView: FC<CreateView> = ({ block, editor }) => {
                         />
                     </div>
                 </List>
-            </WrapperWithPendantAndDragDrop>
+            </BlockPendantProvider>
 
             <IndentWrapper>
                 <RenderBlockChildren block={block} />

libs/components/editor-blocks/src/blocks/text/TextView.tsx

@@ -8,7 +8,7 @@ import {
     supportChildren,
     unwrapGroup,
     useOnSelect,
-    WrapperWithPendantAndDragDrop,
+    BlockPendantProvider,
 } from '@toeverything/components/editor-core';
 import { styled } from '@toeverything/components/ui';
 import { Protocol } from '@toeverything/datasource/db-service';
@@ -231,7 +231,7 @@ export const TextView: FC<CreateTextView> = ({
             selected={isSelect}
             className={containerClassName}
         >
-            <WrapperWithPendantAndDragDrop editor={editor} block={block}>
+            <BlockPendantProvider block={block}>
                 <TextBlock
                     block={block}
                     type={block.type}
@@ -242,7 +242,7 @@ export const TextView: FC<CreateTextView> = ({
                     handleConvert={handleConvert}
                     handleTab={onTab}
                 />
-            </WrapperWithPendantAndDragDrop>
+            </BlockPendantProvider>
             <IndentWrapper>
                 <RenderBlockChildren block={block} />
             </IndentWrapper>

libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx

@@ -3,7 +3,7 @@ import {
     RenderBlock,
     useCurrentView,
     useOnSelect,
-    WrapperWithPendantAndDragDrop,
+    BlockPendantProvider,
 } from '@toeverything/components/editor-core';
 import { styled } from '@toeverything/components/ui';
 import type {
@@ -128,9 +128,9 @@ export const withTreeViewChildren = (
                 selected={isSelect}
                 className={Wrapper.toString()}
             >
-                <WrapperWithPendantAndDragDrop editor={editor} block={block}>
+                <BlockPendantProvider block={block}>
                     <div>{creator(props)}</div>
-                </WrapperWithPendantAndDragDrop>
+                </BlockPendantProvider>
 
                 {collapsed && (
                     <CollapsedNode

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

@@ -1,22 +0,0 @@
-import { AsyncBlock, BlockEditor } from '../editor';
-import type { FC, ReactElement } from 'react';
-import { BlockPendantProvider } from '../block-pendant';
-import { DragDropWrapper } from '../drag-drop-wrapper';
-
-type BlockContentWrapperProps = {
-    block: AsyncBlock;
-    editor: BlockEditor;
-    children: ReactElement | null;
-};
-
-// TODO: remove
-export const WrapperWithPendantAndDragDrop: FC<BlockContentWrapperProps> =
-    function ({ block, children, editor }) {
-        return (
-            <DragDropWrapper block={block} editor={editor}>
-                <BlockPendantProvider block={block}>
-                    {children}
-                </BlockPendantProvider>
-            </DragDropWrapper>
-        );
-    };

libs/components/editor-core/src/block-content-wrapper/index.ts

@@ -1 +0,0 @@
-export * from './BlockContentWrapper';

libs/components/editor-core/src/drag-drop-wrapper/DragDropWrapper.tsx

@@ -1,28 +0,0 @@
-import { AsyncBlock, BlockEditor } from '../editor';
-import { ReactElement } from 'react';
-
-interface DragDropWrapperProps {
-    editor: BlockEditor;
-    block: AsyncBlock;
-    children: ReactElement | null;
-}
-
-export function DragDropWrapper({
-    children,
-    editor,
-    block,
-}: DragDropWrapperProps) {
-    const handlerDragOver: React.DragEventHandler<HTMLDivElement> = event => {
-        event.preventDefault();
-        if (block.dom) {
-            editor.getHooks().afterOnNodeDragOver(event, {
-                blockId: block.id,
-                dom: block.dom,
-                rect: block.dom?.getBoundingClientRect(),
-                type: block.type,
-                properties: block.getProperties(),
-            });
-        }
-    };
-    return <div onDragOver={handlerDragOver}>{children}</div>;
-}

libs/components/editor-core/src/drag-drop-wrapper/index.ts

@@ -1 +0,0 @@
-export * from './DragDropWrapper';

libs/components/editor-core/src/editor/plugin/hooks.ts

@@ -113,13 +113,6 @@ export class Hooks implements HooksRunner, PluginHooks {
         this._runHook(HookType.ON_ROOTNODE_DRAG_OVER_CAPTURE, e);
     }
 
-    public afterOnNodeDragOver(
-        e: React.DragEvent<Element>,
-        node: BlockDomInfo
-    ): void {
-        this._runHook(HookType.AFTER_ON_NODE_DRAG_OVER, e, node);
-    }
-
     public onSearch(): void {
         this._runHook(HookType.ON_SEARCH);
     }

libs/components/editor-core/src/editor/types.ts

@@ -177,7 +177,6 @@ export enum HookType {
     ON_ROOTNODE_DRAG_END = 'onRootNodeDragEnd',
     ON_ROOTNODE_DRAG_OVER_CAPTURE = 'onRootNodeDragOverCapture',
     ON_ROOTNODE_DROP = 'onRootNodeDrop',
-    AFTER_ON_NODE_DRAG_OVER = 'afterOnNodeDragOver',
     BEFORE_COPY = 'beforeCopy',
     BEFORE_CUT = 'beforeCut',
     ON_ROOTNODE_SCROLL = 'onRootNodeScroll',
@@ -219,10 +218,6 @@ export interface HooksRunner {
     onRootNodeDragEnd: (e: React.DragEvent<Element>) => void;
     onRootNodeDragLeave: (e: React.DragEvent<Element>) => void;
     onRootNodeDrop: (e: React.DragEvent<Element>) => void;
-    afterOnNodeDragOver: (
-        e: React.DragEvent<Element>,
-        node: BlockDomInfo
-    ) => void;
     beforeCopy: (e: ClipboardEvent) => void;
     beforeCut: (e: ClipboardEvent) => void;
     onRootNodeScroll: (e: React.UIEvent) => void;

libs/components/editor-core/src/index.ts

@@ -15,7 +15,4 @@ export * from './kanban/types';
 
 export * from './utils';
 
-export * from './drag-drop-wrapper';
-export * from './block-content-wrapper';
-
 export * from './editor';

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

@@ -37,7 +37,7 @@ export class LeftMenuPlugin extends BasePlugin {
         );
         this.sub.add(
             this.hooks
-                .get(HookType.AFTER_ON_NODE_DRAG_OVER)
+                .get(HookType.ON_ROOTNODE_DRAG_OVER)
                 .subscribe(this._handleDragOverBlockNode)
         );
         this.sub.add(
@@ -65,24 +65,30 @@ export class LeftMenuPlugin extends BasePlugin {
     private _onDrop = () => {
         this._lineInfo.next(undefined);
     };
-    private _handleDragOverBlockNode = async ([event, blockInfo]: [
+    private _handleDragOverBlockNode = async (
-        React.DragEvent<Element>,
+        event: React.DragEvent<Element>
-        BlockDomInfo
+    ) => {
-    ]) => {
-        const { type, dom, blockId } = blockInfo;
         event.preventDefault();
-        if (this.editor.dragDropManager.isDragBlock(event)) {
+        if (!this.editor.dragDropManager.isDragBlock(event)) return;
-            if (ignoreBlockTypes.includes(type)) {
+        const block = await this.editor.getBlockByPoint(
-                return;
+            new Point(event.clientX, event.clientY)
-            }
+        );
-            const direction =
+        if (block == null || ignoreBlockTypes.includes(block.type)) return;
-                await this.editor.dragDropManager.checkBlockDragTypes(
+        const direction = await this.editor.dragDropManager.checkBlockDragTypes(
-                    event,
+            event,
-                    dom,
+            block.dom,
-                    blockId
+            block.id
-                );
+        );
-            this._lineInfo.next({ direction, blockInfo });
+        this._lineInfo.next({
-        }
+            direction,
+            blockInfo: {
+                blockId: block.id,
+                dom: block.dom,
+                rect: block.dom.getBoundingClientRect(),
+                type: block.type,
+                properties: block.getProperties(),
+            },
+        });
     };
 
     private _handleMouseMove = async (