Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-11 11:58:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

refact(hook): remove afterOnNodeDragOver

Browse Source
This commit is contained in:
austaras
2022-08-04 16:04:52 +08:00
committed by Austaras
parent 4b81cdbf27
commit c63d5da4df
16 changed files with 48 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx
View File

@@ -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>

6
libs/components/editor-blocks/src/blocks/code/CodeView.tsx
View File

@@ -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>
);
};

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

@@ -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>
);
};

6
libs/components/editor-blocks/src/blocks/figma/FigmaView.tsx
View File

@@ -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>
);
};

6
libs/components/editor-blocks/src/blocks/image/ImageView.tsx
View File

@@ -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>
);
};

7
libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx
View File

@@ -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} />

6
libs/components/editor-blocks/src/blocks/text/TextView.tsx
View File

@@ -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>

6
libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx
View File

@@ -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

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

@@ -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>
);
};

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

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

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

@@ -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>;
}

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

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

7
libs/components/editor-core/src/editor/plugin/hooks.ts
View File

@@ -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);
}

5
libs/components/editor-core/src/editor/types.ts
View File

@@ -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;

3
libs/components/editor-core/src/index.ts
View File

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

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

@@ -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<Element>,
BlockDomInfo
]) => {
const { type, dom, blockId } = blockInfo;
private _handleDragOverBlockNode = async (
event: React.DragEvent<Element>
) => {
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 (