fix: delete block leftMenu not delete (#472)

This commit is contained in:
Frozen FIsh
2022-09-30 12:33:27 +08:00
committed by GitHub
parent ab22ac6957
commit b317c595c6
3 changed files with 16 additions and 5 deletions
@@ -46,12 +46,14 @@ export class BlockCommands {
* *
* remove block by block id * remove block by block id
* @param {string} blockId * @param {string} blockId
* @param onDelete Delete Block's LeftMenuDraggable
* @memberof BlockCommands * @memberof BlockCommands
*/ */
public async removeBlock(blockId: string) { public async removeBlock(blockId: string, onDelete?: () => void) {
const block = await this._editor.getBlockById(blockId); const block = await this._editor.getBlockById(blockId);
if (block) { if (block) {
block.remove(); onDelete();
await block.remove();
} }
} }
@@ -18,17 +18,21 @@ interface LeftMenuProps {
editor?: Virgo; editor?: Virgo;
hooks: PluginHooks; hooks: PluginHooks;
blockId: string; blockId: string;
onDelete: () => void;
} }
export function LeftMenu(props: LeftMenuProps) { export function LeftMenu(props: LeftMenuProps) {
const { editor, anchorEl, hooks, blockId, onClose } = props; const { editor, anchorEl, hooks, blockId, onClose, onDelete } = props;
const { t } = useTranslation(); const { t } = useTranslation();
const menu: CascaderItemProps[] = useMemo( const menu: CascaderItemProps[] = useMemo(
() => [ () => [
{ {
title: t('Delete'), title: t('Delete'),
callback: () => { callback: async () => {
editor.commands.blockCommands.removeBlock(blockId); await editor.commands.blockCommands.removeBlock(
blockId,
onDelete
);
}, },
shortcut: 'Del', shortcut: 'Del',
icon: <DeleteCashBinIcon />, icon: <DeleteCashBinIcon />,
@@ -165,6 +165,10 @@ export const LeftMenuDraggable = (props: LeftMenuProps) => {
setAnchorEl(currentTarget); setAnchorEl(currentTarget);
}; };
const onDelete = useCallback(() => {
setBlock(undefined);
}, []);
const onClose = useCallback(() => setAnchorEl(undefined), [setAnchorEl]); const onClose = useCallback(() => setAnchorEl(undefined), [setAnchorEl]);
useEffect(() => { useEffect(() => {
@@ -241,6 +245,7 @@ export const LeftMenuDraggable = (props: LeftMenuProps) => {
editor={props.editor} editor={props.editor}
hooks={props.hooks} hooks={props.hooks}
onClose={onClose} onClose={onClose}
onDelete={onDelete}
blockId={block.block.id} blockId={block.block.id}
> >
<Draggable onClick={onClick}> <Draggable onClick={onClick}>