toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-19 13:12:05 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(whiteboard): error when drag away last element in Chrome

Browse Source
This commit is contained in:
austaras 2022-08-12 18:23:00 +08:00 committed by Austaras
parent c67a033f8a
commit 308d2c4445
9 changed files with 85 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
libs/components/board-shapes/src/editor-util/EditorUtil.tsx
View File

@ -124,10 +124,16 @@ export class EditorUtil extends TDShapeUtil<T, E> {
);
const activateIfEditing = useCallback(() => {
const shapes =
state.document.pages[state.appState.currentPageId].shapes;
// https://bugs.chromium.org/p/chromium/issues/detail?id=1352417
if (shapes[shape.id] != null) {
return;
}
if (editingText && editingId !== shape.id) {
app.setEditingText(shape.id);
}
}, [app, shape.id, editingText, editingId]);
}, [app, state, shape.id, editingText, editingId]);
return (
<HTMLContainer ref={ref} {...events}>

3
libs/components/editor-core/src/RenderRoot.tsx
View File

@ -1,6 +1,6 @@
import type { BlockEditor } from './editor';
import { styled, usePatchNodes } from '@toeverything/components/ui';
import type { FC, PropsWithChildren } from 'react';
import type { PropsWithChildren } from 'react';
import React, { useEffect, useRef, useState, useCallback } from 'react';
import { EditorProvider } from './Contexts';
import { SelectionRect, SelectionRef } from './Selection';
@ -152,6 +152,7 @@ export const RenderRoot = ({
};
const onDrop = (event: React.DragEvent<Element>) => {
event.preventDefault();
editor.dragDropManager.handlerEditorDrop(event);
editor.getHooks().onRootNodeDrop(event);
};

10
libs/components/editor-core/src/editor/commands/block-commands.ts
View File

@ -32,11 +32,11 @@ export class BlockCommands {
) {
const block = await this._editor.getBlockById(blockId);
if (block) {
const next_block = await this._editor.createBlock(type);
if (next_block) {
await block.after(next_block);
this._editor.selectionManager.activeNodeByNodeId(next_block.id);
return next_block;
const nextBlock = await this._editor.createBlock(type);
if (nextBlock) {
await block.after(nextBlock);
this._editor.selectionManager.activeNodeByNodeId(nextBlock.id);
return nextBlock;
}
}
return undefined;

110
libs/components/editor-core/src/editor/drag-drop/drag-drop.ts
View File

@ -101,73 +101,70 @@ export class DragDropManager {
if (this._blockDragDirection !== BlockDropPlacement.none) {
const blockId = event.dataTransfer.getData(this._blockIdKey);
if (!(await this._canBeDrop(event))) return;
if (this._blockDragDirection === BlockDropPlacement.bottom) {
this._editor.commands.blockCommands.moveBlockAfter(
blockId,
this._blockDragTargetId
);
}
if (
[BlockDropPlacement.left, BlockDropPlacement.right].includes(
this._blockDragDirection
)
) {
const dropType =
this._blockDragDirection === BlockDropPlacement.left
? GridDropType.left
: GridDropType.right;
// if target is a grid item create grid item
if (targetBlock.type !== Protocol.Block.Type.gridItem) {
await this._editor.commands.blockCommands.createLayoutBlock(
switch (this._blockDragDirection) {
case BlockDropPlacement.bottom: {
this._editor.commands.blockCommands.moveBlockAfter(
blockId,
this._blockDragTargetId,
dropType
);
} else {
await this._editor.commands.blockCommands.moveInNewGridItem(
blockId,
this._blockDragTargetId,
dropType
this._blockDragTargetId
);
break;
}
}
if (
[
BlockDropPlacement.outerLeft,
BlockDropPlacement.outerRight,
].includes(this._blockDragDirection)
) {
if (targetBlock.type !== Protocol.Block.Type.grid) {
await this._editor.commands.blockCommands.createLayoutBlock(
blockId,
this._blockDragTargetId,
this._blockDragDirection ===
BlockDropPlacement.outerLeft
case BlockDropPlacement.left:
case BlockDropPlacement.right: {
const dropType =
this._blockDragDirection === BlockDropPlacement.left
? GridDropType.left
: GridDropType.right
);
}
if (targetBlock.type === Protocol.Block.Type.grid) {
const gridItems = await targetBlock.children();
if (
BlockDropPlacement.outerRight ===
this._blockDragDirection
) {
: GridDropType.right;
// if target is a grid item create grid item
if (targetBlock.type !== Protocol.Block.Type.gridItem) {
await this._editor.commands.blockCommands.createLayoutBlock(
blockId,
this._blockDragTargetId,
dropType
);
} else {
await this._editor.commands.blockCommands.moveInNewGridItem(
blockId,
gridItems[gridItems.length - 1].id
this._blockDragTargetId,
dropType
);
}
if (
BlockDropPlacement.outerLeft ===
this._blockDragDirection
) {
await this._editor.commands.blockCommands.moveInNewGridItem(
break;
}
case BlockDropPlacement.outerLeft:
case BlockDropPlacement.outerRight: {
if (targetBlock.type !== Protocol.Block.Type.grid) {
await this._editor.commands.blockCommands.createLayoutBlock(
blockId,
gridItems[0].id,
GridDropType.right
this._blockDragTargetId,
this._blockDragDirection ===
BlockDropPlacement.outerLeft
? GridDropType.left
: GridDropType.right
);
}
if (targetBlock.type === Protocol.Block.Type.grid) {
const gridItems = await targetBlock.children();
if (
BlockDropPlacement.outerRight ===
this._blockDragDirection
) {
await this._editor.commands.blockCommands.moveInNewGridItem(
blockId,
gridItems[gridItems.length - 1].id
);
}
if (
BlockDropPlacement.outerLeft ===
this._blockDragDirection
) {
await this._editor.commands.blockCommands.moveInNewGridItem(
blockId,
gridItems[0].id,
GridDropType.right
);
}
}
}
}
}
@ -424,7 +421,6 @@ export class DragDropManager {
}
public handlerEditorDrop(event: React.DragEvent<Element>) {
event.preventDefault();
// IMP: can not use Decorators now may use decorators is right
if (this.isEnabled()) {
if (this.isDragBlock(event)) {

1
libs/components/editor-core/src/editor/scroll/scroll.ts
View File

@ -207,6 +207,7 @@ export class ScrollManager {
}
private _getKeepInViewParams(blockRect: Rect) {
if (this.scrollContainer == null) return 0;
const { top, bottom } = domToRect(this._scrollContainer);
if (blockRect.top <= top + blockRect.height * 3) {
return -1;

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

@ -1,4 +1,4 @@
import { noop, Point } from '@toeverything/utils';
import { Point } from '@toeverything/utils';
import { useCallback, useEffect, useRef, useState } from 'react';
import { useEditor } from './Contexts';
import {
@ -62,7 +62,7 @@ export const useBlock = (blockId: string) => {
return undefined;
}
let valid = true;
let offUpdate = noop;
let offUpdate: () => void | undefined = undefined;
editor.getBlockById(blockId).then(node => {
if (!valid) {
return;
@ -79,7 +79,7 @@ export const useBlock = (blockId: string) => {
return () => {
valid = false;
offUpdate();
offUpdate?.();
};
}, [blockId, editor, requestReRender]);

29
libs/components/editor-core/src/render-block/RenderBlock.tsx
View File

@ -1,7 +1,6 @@
import { styled } from '@toeverything/components/ui';
import { FC, useLayoutEffect, useMemo, useRef } from 'react';
import { useCallback, useMemo } from 'react';
// import { RenderChildren } from './RenderChildren';
import { useEditor } from '../Contexts';
import { useBlock } from '../hooks';
@ -10,19 +9,21 @@ interface RenderBlockProps {
hasContainer?: boolean;
}
export const RenderBlock = ({
export function RenderBlock({
blockId,
hasContainer = true,
}: RenderBlockProps) => {
}: RenderBlockProps) {
const { editor, editorElement } = useEditor();
const { block } = useBlock(blockId);
const blockRef = useRef<HTMLDivElement>(null);
useLayoutEffect(() => {
if (block && blockRef.current) {
block.dom = blockRef.current;
}
});
const setRef = useCallback(
(dom: HTMLElement) => {
if (block != null && dom != null) {
block.dom = dom;
}
},
[block]
);
const blockView = useMemo(() => {
if (block?.type) {
@ -54,17 +55,13 @@ export const RenderBlock = ({
) : null;
return hasContainer ? (
<BlockContainer
block-id={blockId}
ref={blockRef}
data-block-id={blockId}
>
<BlockContainer block-id={blockId} ref={setRef} data-block-id={blockId}>
{view}
</BlockContainer>
) : (
<> {view}</>
);
};
}
const BlockContainer = styled('div')(({ theme }) => ({
fontSize: theme.typography.body1.fontSize,

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

@ -93,7 +93,7 @@ export class LeftMenuPlugin extends BasePlugin {
}
};
private _onDrop = () => {
private _onDrop = (e: React.DragEvent<Element>) => {
this._lineInfo.next(undefined);
};
private _handleDragOverBlockNode = async (

1
libs/utils/src/lodash.ts
View File

@ -12,7 +12,6 @@ export {
isFunction,
isString,
isPlainObject,
noop,
lowerFirst,
last,
first,