diff --git a/libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx b/libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx index 6f1970df15..dee9042e7a 100644 --- a/libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx +++ b/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 = ({ block, editor }) => { return ( - + @@ -206,7 +206,7 @@ export const BulletView: FC = ({ block, editor }) => { /> - + diff --git a/libs/components/editor-blocks/src/blocks/code/CodeView.tsx b/libs/components/editor-blocks/src/blocks/code/CodeView.tsx index 3a729e51f0..3b64cc3b1a 100644 --- a/libs/components/editor-blocks/src/blocks/code/CodeView.tsx +++ b/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 = ({ block, editor }) => { editor.selectionManager.activePreviousNode(block.id, 'start'); }; return ( - + { e.stopPropagation(); @@ -222,6 +222,6 @@ export const CodeView: FC = ({ block, editor }) => { handleKeyArrowUp={handleKeyArrowUp} /> - + ); }; diff --git a/libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx b/libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx index ac073abdb0..da33c2be4a 100644 --- a/libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx +++ b/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 = props => { }; return ( - + {embedLinkUrl ? ( = props => { /> )} - + ); }; diff --git a/libs/components/editor-blocks/src/blocks/figma/FigmaView.tsx b/libs/components/editor-blocks/src/blocks/figma/FigmaView.tsx index 1dbaef3e11..2d12315235 100644 --- a/libs/components/editor-blocks/src/blocks/figma/FigmaView.tsx +++ b/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 = ({ block, editor }) => { setIsSelect(isSelect); }); return ( - + {figmaUrl ? ( = ({ block, editor }) => { /> )} - + ); }; diff --git a/libs/components/editor-blocks/src/blocks/image/ImageView.tsx b/libs/components/editor-blocks/src/blocks/image/ImageView.tsx index 36b446d790..dd07a1058a 100644 --- a/libs/components/editor-blocks/src/blocks/image/ImageView.tsx +++ b/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 = ({ block, editor }) => { }; return ( - +
{imgUrl ? ( @@ -229,6 +229,6 @@ export const ImageView: FC = ({ block, editor }) => {
*/}
-
+ ); }; diff --git a/libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx b/libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx index 514ce335f6..2f8f29b706 100644 --- a/libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx +++ b/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 = ({ block, editor }) => { return ( - +
{getNumber(properties.numberType, number)}. @@ -203,7 +202,7 @@ export const NumberedView: FC = ({ block, editor }) => { />
-
+ diff --git a/libs/components/editor-blocks/src/blocks/text/TextView.tsx b/libs/components/editor-blocks/src/blocks/text/TextView.tsx index ced1a8745d..66c6360633 100644 --- a/libs/components/editor-blocks/src/blocks/text/TextView.tsx +++ b/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 = ({ selected={isSelect} className={containerClassName} > - + = ({ handleConvert={handleConvert} handleTab={onTab} /> - + diff --git a/libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx b/libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx index f7f9cf39d7..f2b2b3652d 100644 --- a/libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx +++ b/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()} > - +
{creator(props)}
-
+ {collapsed && ( = - function ({ block, children, editor }) { - return ( - - - {children} - - - ); - }; diff --git a/libs/components/editor-core/src/block-content-wrapper/index.ts b/libs/components/editor-core/src/block-content-wrapper/index.ts deleted file mode 100644 index 80c770d496..0000000000 --- a/libs/components/editor-core/src/block-content-wrapper/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './BlockContentWrapper'; diff --git a/libs/components/editor-core/src/drag-drop-wrapper/DragDropWrapper.tsx b/libs/components/editor-core/src/drag-drop-wrapper/DragDropWrapper.tsx deleted file mode 100644 index 030c2b5c20..0000000000 --- a/libs/components/editor-core/src/drag-drop-wrapper/DragDropWrapper.tsx +++ /dev/null @@ -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 = 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
{children}
; -} diff --git a/libs/components/editor-core/src/drag-drop-wrapper/index.ts b/libs/components/editor-core/src/drag-drop-wrapper/index.ts deleted file mode 100644 index bfade20431..0000000000 --- a/libs/components/editor-core/src/drag-drop-wrapper/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './DragDropWrapper'; diff --git a/libs/components/editor-core/src/editor/plugin/hooks.ts b/libs/components/editor-core/src/editor/plugin/hooks.ts index 1c05308a84..45cecebc0f 100644 --- a/libs/components/editor-core/src/editor/plugin/hooks.ts +++ b/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, - node: BlockDomInfo - ): void { - this._runHook(HookType.AFTER_ON_NODE_DRAG_OVER, e, node); - } - public onSearch(): void { this._runHook(HookType.ON_SEARCH); } diff --git a/libs/components/editor-core/src/editor/types.ts b/libs/components/editor-core/src/editor/types.ts index 797d68f46c..ca22ae5d4e 100644 --- a/libs/components/editor-core/src/editor/types.ts +++ b/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) => void; onRootNodeDragLeave: (e: React.DragEvent) => void; onRootNodeDrop: (e: React.DragEvent) => void; - afterOnNodeDragOver: ( - e: React.DragEvent, - node: BlockDomInfo - ) => void; beforeCopy: (e: ClipboardEvent) => void; beforeCut: (e: ClipboardEvent) => void; onRootNodeScroll: (e: React.UIEvent) => void; diff --git a/libs/components/editor-core/src/index.ts b/libs/components/editor-core/src/index.ts index 64939c0659..6cdd358058 100644 --- a/libs/components/editor-core/src/index.ts +++ b/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'; diff --git a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx index 29c421f29f..806c93c971 100644 --- a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx +++ b/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]: [ - React.DragEvent, - BlockDomInfo - ]) => { - const { type, dom, blockId } = blockInfo; + private _handleDragOverBlockNode = async ( + event: React.DragEvent + ) => { event.preventDefault(); - if (this.editor.dragDropManager.isDragBlock(event)) { - if (ignoreBlockTypes.includes(type)) { - return; - } - const direction = - await this.editor.dragDropManager.checkBlockDragTypes( - event, - dom, - blockId - ); - this._lineInfo.next({ direction, blockInfo }); - } + if (!this.editor.dragDropManager.isDragBlock(event)) return; + const block = await this.editor.getBlockByPoint( + new Point(event.clientX, event.clientY) + ); + if (block == null || ignoreBlockTypes.includes(block.type)) return; + const direction = await this.editor.dragDropManager.checkBlockDragTypes( + event, + block.dom, + block.id + ); + this._lineInfo.next({ + direction, + blockInfo: { + blockId: block.id, + dom: block.dom, + rect: block.dom.getBoundingClientRect(), + type: block.type, + properties: block.getProperties(), + }, + }); }; private _handleMouseMove = async (