fix(plugin): left menu item refresh on blockId change

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

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<string, Subject<unknown>> = {};

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<string, unknown>;
-}
-
 // Editor's various callbacks, used in Editor
 export interface HooksRunner {
     init: () => void;

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: <DeleteCashBinIcon />,
             },
-            shortcut: 'Del',
-            icon: <DeleteCashBinIcon />,
-        },
-        {
-            title: 'Turn into',
-            subItems: [],
-            children: (
-                <TurnIntoMenu
-                    editor={editor}
-                    hooks={hooks}
-                    blockId={blockId}
-                    onClose={() => {
-                        props.onClose();
-                        editor.selection.setSelectedNodesIds([]);
-                    }}
-                />
-            ),
-            icon: <TurnIntoIcon />,
-        },
-        {
-            title: 'Divide Here As A New Group',
-            icon: <UngroupIcon />,
-            callback: () => {
-                editor.commands.blockCommands.splitGroupFromBlock(blockId);
+            {
+                title: 'Turn into',
+                subItems: [],
+                children: (
+                    <TurnIntoMenu
+                        editor={editor}
+                        hooks={hooks}
+                        blockId={blockId}
+                        onClose={() => {
+                            onClose();
+                            editor.selection.setSelectedNodesIds([]);
+                        }}
+                    />
+                ),
+                icon: <TurnIntoIcon />,
             },
-        },
-    ].filter(v => v);
-
-    const [menuList, setMenuList] = useState<CascaderItemProps[]>(menu);
+            {
+                title: 'Divide Here As A New Group',
+                icon: <UngroupIcon />,
+                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}
             <Cascader
-                items={menuList}
+                items={menu}
                 anchorEl={anchorEl}
                 placement="bottom-start"
                 open={Boolean(anchorEl)}

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

@@ -6,14 +6,15 @@ import {
     type DragEvent,
     type ReactNode,
     type CSSProperties,
+    useCallback,
 } from 'react';
 
 import {
     Virgo,
-    BlockDomInfo,
     PluginHooks,
     BlockDropPlacement,
     LINE_GAP,
+    AsyncBlock,
 } from '@toeverything/framework/virgo';
 import { Button } from '@toeverything/components/common';
 import { styled } from '@toeverything/components/ui';
@@ -25,6 +26,11 @@ import { MENU_WIDTH } from './menu-config';
 
 const MENU_BUTTON_OFFSET = 4;
 
+export interface BlockDomInfo {
+    block: AsyncBlock;
+    rect: DOMRect;
+}
+
 export type LineInfoSubject = Subject<
     | {
           direction: BlockDropPlacement;
@@ -138,11 +144,11 @@ export const LeftMenuDraggable: FC<LeftMenuProps> = 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<LeftMenuProps> = props => {
     const onClick = (event: MouseEvent<Element>) => {
         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<LeftMenuProps> = 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<LeftMenuProps> = props => {
                             anchorEl={anchorEl}
                             editor={props.editor}
                             hooks={props.hooks}
-                            onClose={() => setAnchorEl(undefined)}
-                            blockId={block.blockId}
+                            onClose={onClose}
+                            blockId={block.block.id}
                         >
                             <Draggable onClick={onClick}>
                                 <HandleChildIcon />

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(),
         });
     };