diff --git a/libs/components/editor-core/src/editor/index.ts b/libs/components/editor-core/src/editor/index.ts index 4b12aa5b78..03903d31bf 100644 --- a/libs/components/editor-core/src/editor/index.ts +++ b/libs/components/editor-core/src/editor/index.ts @@ -7,12 +7,6 @@ export * from './commands/types'; export { Editor as BlockEditor } from './editor'; export * from './selection'; export { BlockDropPlacement, HookType, GroupDirection } from './types'; -export type { - BlockDomInfo, - Plugin, - PluginCreator, - PluginHooks, - Virgo, -} from './types'; +export type { Plugin, PluginCreator, PluginHooks, Virgo } from './types'; export { BaseView, getTextHtml, getTextProperties } from './views/base-view'; export type { ChildrenView, CreateView } from './views/base-view'; diff --git a/libs/components/editor-core/src/editor/plugin/hooks.ts b/libs/components/editor-core/src/editor/plugin/hooks.ts index 45cecebc0f..42b9c262a0 100644 --- a/libs/components/editor-core/src/editor/plugin/hooks.ts +++ b/libs/components/editor-core/src/editor/plugin/hooks.ts @@ -1,6 +1,5 @@ -import { DragEvent } from 'react'; import { Observable, Subject } from 'rxjs'; -import { HooksRunner, HookType, BlockDomInfo, PluginHooks } from '../types'; +import { HooksRunner, HookType, PluginHooks } from '../types'; export class Hooks implements HooksRunner, PluginHooks { private _subject: Record> = {}; diff --git a/libs/components/editor-core/src/editor/types.ts b/libs/components/editor-core/src/editor/types.ts index 95cec2a76a..63732fbba7 100644 --- a/libs/components/editor-core/src/editor/types.ts +++ b/libs/components/editor-core/src/editor/types.ts @@ -183,14 +183,6 @@ export enum HookType { ON_ROOTNODE_SCROLL = 'onRootNodeScroll', } -export interface BlockDomInfo { - blockId: string; - dom: HTMLElement; - type: BlockFlavorKeys; - rect: DOMRect; - properties: Record; -} - // Editor's various callbacks, used in Editor export interface HooksRunner { init: () => void; diff --git a/libs/components/editor-plugins/src/menu/left-menu/LeftMenu.tsx b/libs/components/editor-plugins/src/menu/left-menu/LeftMenu.tsx index 3dfd8e8b09..38db125aca 100644 --- a/libs/components/editor-plugins/src/menu/left-menu/LeftMenu.tsx +++ b/libs/components/editor-plugins/src/menu/left-menu/LeftMenu.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import { useMemo } from 'react'; import { Virgo, PluginHooks } from '@toeverything/framework/virgo'; import { Cascader, CascaderItemProps } from '@toeverything/components/ui'; import { TurnIntoMenu } from './TurnIntoMenu'; @@ -18,42 +18,43 @@ interface LeftMenuProps { } export function LeftMenu(props: LeftMenuProps) { - const { editor, anchorEl, hooks, blockId } = props; - const menu: CascaderItemProps[] = [ - { - title: 'Delete', - callback: () => { - editor.commands.blockCommands.removeBlock(blockId); + const { editor, anchorEl, hooks, blockId, onClose } = props; + const menu: CascaderItemProps[] = useMemo( + () => [ + { + title: 'Delete', + callback: () => { + editor.commands.blockCommands.removeBlock(blockId); + }, + shortcut: 'Del', + icon: , }, - shortcut: 'Del', - icon: , - }, - { - title: 'Turn into', - subItems: [], - children: ( - { - props.onClose(); - editor.selection.setSelectedNodesIds([]); - }} - /> - ), - icon: , - }, - { - title: 'Divide Here As A New Group', - icon: , - callback: () => { - editor.commands.blockCommands.splitGroupFromBlock(blockId); + { + title: 'Turn into', + subItems: [], + children: ( + { + onClose(); + editor.selection.setSelectedNodesIds([]); + }} + /> + ), + icon: , }, - }, - ].filter(v => v); - - const [menuList, setMenuList] = useState(menu); + { + title: 'Divide Here As A New Group', + icon: , + callback: () => { + editor.commands.blockCommands.splitGroupFromBlock(blockId); + }, + }, + ], + [editor, hooks, blockId, onClose] + ); // const filterItems = ( // value: string, @@ -90,7 +91,7 @@ export function LeftMenu(props: LeftMenuProps) { <> {props.children} = props => { if (block == null) return; setRootRect(editor.container.getBoundingClientRect()); const dragImage = await editor.blockHelper.getBlockDragImg( - block.blockId + block.block.id ); if (dragImage) { event.dataTransfer.setDragImage(dragImage, -50, -10); - editor.dragDropManager.setDragBlockInfo(event, block.blockId); + editor.dragDropManager.setDragBlockInfo(event, block.block.id); } }; @@ -154,16 +160,18 @@ export const LeftMenuDraggable: FC = props => { const onClick = (event: MouseEvent) => { if (block == null) return; const currentTarget = event.currentTarget; - editor.selection.setSelectedNodesIds([block.blockId]); + editor.selection.setSelectedNodesIds([block.block.id]); setVisible(true); setAnchorEl(currentTarget); }; + const onClose = useCallback(() => setAnchorEl(undefined), [setAnchorEl]); + useEffect(() => { const sub = blockInfo .pipe( distinctUntilChanged( - (prev, curr) => prev?.blockId === curr?.blockId + (prev, curr) => prev?.block.id === curr?.block.id ) ) .subscribe(block => { @@ -185,7 +193,7 @@ export const LeftMenuDraggable: FC = props => { setRootRect(editor.container.getBoundingClientRect()); setLine(prev => { if ( - prev?.blockInfo.blockId !== blockInfo.blockId || + prev?.blockInfo.block.id !== blockInfo.block.id || prev?.direction !== direction ) { return { @@ -224,8 +232,8 @@ export const LeftMenuDraggable: FC = props => { anchorEl={anchorEl} editor={props.editor} hooks={props.hooks} - onClose={() => setAnchorEl(undefined)} - blockId={block.blockId} + onClose={onClose} + blockId={block.block.id} > 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 4155307f74..91402bbd95 100644 --- a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx +++ b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx @@ -1,12 +1,12 @@ -import { - BlockDomInfo, - HookType, - BlockDropPlacement, -} from '@toeverything/framework/virgo'; +import { HookType, BlockDropPlacement } from '@toeverything/framework/virgo'; import { StrictMode } from 'react'; import { BasePlugin } from '../../base-plugin'; import { ignoreBlockTypes } from './menu-config'; -import { LineInfoSubject, LeftMenuDraggable } from './LeftMenuDraggable'; +import { + LineInfoSubject, + LeftMenuDraggable, + BlockDomInfo, +} from './LeftMenuDraggable'; import { PluginRenderRoot } from '../../utils'; import { Subject, throttleTime } from 'rxjs'; import { domToRect, last, Point } from '@toeverything/utils'; @@ -81,11 +81,8 @@ export class LeftMenuPlugin extends BasePlugin { this._lineInfo.next({ direction, blockInfo: { - blockId: block.id, - dom: block.dom, - type: block.type, + block, rect: block.dom.getBoundingClientRect(), - properties: block.getProperties(), }, }); } else if (!isOuter) { @@ -116,11 +113,8 @@ export class LeftMenuPlugin extends BasePlugin { this._lineInfo.next({ direction, blockInfo: { - blockId: block.id, - dom: block.dom, + block, rect: block.dom.getBoundingClientRect(), - type: block.type, - properties: block.getProperties(), }, }); }; @@ -169,11 +163,8 @@ export class LeftMenuPlugin extends BasePlugin { } } this._blockInfo.next({ - blockId: node.id, - dom: node.dom, + block: node, rect: node.dom.getBoundingClientRect(), - type: node.type, - properties: node.getProperties(), }); };