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

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

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

libs/components/editor-core/src/RenderRoot.tsx

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

libs/components/editor-core/src/editor/commands/block-commands.ts

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

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

@@ -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) {
+            switch (this._blockDragDirection) {
-                this._editor.commands.blockCommands.moveBlockAfter(
+                case BlockDropPlacement.bottom: {
-                    blockId,
+                    this._editor.commands.blockCommands.moveBlockAfter(
-                    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(
                         blockId,
-                        this._blockDragTargetId,
+                        this._blockDragTargetId
-                        dropType
-                    );
-                } else {
-                    await this._editor.commands.blockCommands.moveInNewGridItem(
-                        blockId,
-                        this._blockDragTargetId,
-                        dropType
                     );
+                    break;
                 }
-            }
+                case BlockDropPlacement.left:
-            if (
+                case BlockDropPlacement.right: {
-                [
+                    const dropType =
-                    BlockDropPlacement.outerLeft,
+                        this._blockDragDirection === BlockDropPlacement.left
-                    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
                             ? GridDropType.left
-                            : GridDropType.right
+                            : GridDropType.right;
-                    );
+                    // if target is a grid item create grid item
-                }
+                    if (targetBlock.type !== Protocol.Block.Type.gridItem) {
-                if (targetBlock.type === Protocol.Block.Type.grid) {
+                        await this._editor.commands.blockCommands.createLayoutBlock(
-                    const gridItems = await targetBlock.children();
+                            blockId,
-                    if (
+                            this._blockDragTargetId,
-                        BlockDropPlacement.outerRight ===
+                            dropType
-                        this._blockDragDirection
+                        );
-                    ) {
+                    } else {
                         await this._editor.commands.blockCommands.moveInNewGridItem(
                             blockId,
-                            gridItems[gridItems.length - 1].id
+                            this._blockDragTargetId,
+                            dropType
                         );
                     }
-                    if (
+                    break;
-                        BlockDropPlacement.outerLeft ===
+                }
-                        this._blockDragDirection
+                case BlockDropPlacement.outerLeft:
-                    ) {
+                case BlockDropPlacement.outerRight: {
-                        await this._editor.commands.blockCommands.moveInNewGridItem(
+                    if (targetBlock.type !== Protocol.Block.Type.grid) {
+                        await this._editor.commands.blockCommands.createLayoutBlock(
                             blockId,
-                            gridItems[0].id,
+                            this._blockDragTargetId,
-                            GridDropType.right
+                            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)) {

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

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

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

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

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

@@ -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(() => {
+    const setRef = useCallback(
-        if (block && blockRef.current) {
+        (dom: HTMLElement) => {
-            block.dom = blockRef.current;
+            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
+        <BlockContainer block-id={blockId} ref={setRef} data-block-id={blockId}>
-            block-id={blockId}
-            ref={blockRef}
-            data-block-id={blockId}
-        >
             {view}
         </BlockContainer>
     ) : (
         <> {view}</>
     );
-};
+}
 
 const BlockContainer = styled('div')(({ theme }) => ({
     fontSize: theme.typography.body1.fontSize,

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

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

libs/utils/src/lodash.ts

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