diff --git a/libs/components/board-shapes/src/editor-util/EditorUtil.tsx b/libs/components/board-shapes/src/editor-util/EditorUtil.tsx index a7c56ebce1..2f1820e0c3 100644 --- a/libs/components/board-shapes/src/editor-util/EditorUtil.tsx +++ b/libs/components/board-shapes/src/editor-util/EditorUtil.tsx @@ -124,10 +124,16 @@ export class EditorUtil extends TDShapeUtil { ); 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 ( diff --git a/libs/components/editor-core/src/RenderRoot.tsx b/libs/components/editor-core/src/RenderRoot.tsx index 8930160084..93ae57a6f0 100644 --- a/libs/components/editor-core/src/RenderRoot.tsx +++ b/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) => { + event.preventDefault(); editor.dragDropManager.handlerEditorDrop(event); editor.getHooks().onRootNodeDrop(event); }; diff --git a/libs/components/editor-core/src/editor/commands/block-commands.ts b/libs/components/editor-core/src/editor/commands/block-commands.ts index 5972e9d41d..f156bd627a 100644 --- a/libs/components/editor-core/src/editor/commands/block-commands.ts +++ b/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); - 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; diff --git a/libs/components/editor-core/src/editor/drag-drop/drag-drop.ts b/libs/components/editor-core/src/editor/drag-drop/drag-drop.ts index be64c07b97..9da0ed55ee 100644 --- a/libs/components/editor-core/src/editor/drag-drop/drag-drop.ts +++ b/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) { - 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) { - event.preventDefault(); // IMP: can not use Decorators now may use decorators is right if (this.isEnabled()) { if (this.isDragBlock(event)) { diff --git a/libs/components/editor-core/src/editor/scroll/scroll.ts b/libs/components/editor-core/src/editor/scroll/scroll.ts index 971e2ca471..69b4d85703 100644 --- a/libs/components/editor-core/src/editor/scroll/scroll.ts +++ b/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; diff --git a/libs/components/editor-core/src/hooks.ts b/libs/components/editor-core/src/hooks.ts index f0af8a0f87..895fe7857b 100644 --- a/libs/components/editor-core/src/hooks.ts +++ b/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]); diff --git a/libs/components/editor-core/src/render-block/RenderBlock.tsx b/libs/components/editor-core/src/render-block/RenderBlock.tsx index 426b270533..a7ebc1e2e1 100644 --- a/libs/components/editor-core/src/render-block/RenderBlock.tsx +++ b/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(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 ? ( - + {view} ) : ( <> {view} ); -}; +} const BlockContainer = styled('div')(({ theme }) => ({ fontSize: theme.typography.body1.fontSize, 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 4eda43b55c..3b432167ee 100644 --- a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx +++ b/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) => { this._lineInfo.next(undefined); }; private _handleDragOverBlockNode = async ( diff --git a/libs/utils/src/lodash.ts b/libs/utils/src/lodash.ts index 593d52ba4b..be22a6dd5c 100644 --- a/libs/utils/src/lodash.ts +++ b/libs/utils/src/lodash.ts @@ -12,7 +12,6 @@ export { isFunction, isString, isPlainObject, - noop, lowerFirst, last, first,