Skip to content

Commit

Permalink
fix(app-page-builder): expose a useDeleteElement hook
Browse files Browse the repository at this point in the history
  • Loading branch information
Pavel910 committed Dec 23, 2024
1 parent 3cc4b02 commit 6e1f5ac
Show file tree
Hide file tree
Showing 4 changed files with 95 additions and 52 deletions.
2 changes: 2 additions & 0 deletions packages/app-page-builder/src/editor/hooks/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,5 @@ export { useRootElement } from "./useRootElement";
export { useUI } from "./useUI";
export { useUpdateElement } from "./useUpdateElement";
export { useUpdateHandlers } from "./useUpdateHandlers";
export { useDeleteElement } from "./useDeleteElement";
export { useFindElementBlock } from "./useFindElementBlock";
64 changes: 64 additions & 0 deletions packages/app-page-builder/src/editor/hooks/useDeleteElement.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import { useCallback } from "react";
import { plugins } from "@webiny/plugins";
import { useEventActionHandler, useFindElementBlock, useUpdateElement } from "~/editor";
import { DeleteElementActionEvent } from "~/editor/recoil/actions";
import type { PbBlockVariable, PbEditorElement, PbEditorPageElementPlugin } from "~/types";

const removeVariableFromBlock = (block: PbEditorElement, variableId: string) => {
const variables = block.data.variables ?? [];

const updatedVariables = variables.filter(
(variable: PbBlockVariable) => variable.id.split(".")[0] !== variableId
);

return {
...block,
data: {
...block.data,
variables: updatedVariables
}
};
};

export const useDeleteElement = () => {
const eventActionHandler = useEventActionHandler();
const updateElement = useUpdateElement();
const { findElementBlock } = useFindElementBlock();

const canDeleteElement = useCallback((element: PbEditorElement) => {
const plugin = plugins
.byType<PbEditorPageElementPlugin>("pb-editor-page-element")
.find(pl => pl.elementType === element.type);

if (!plugin) {
return false;
}

if (typeof plugin.canDelete === "function") {
if (!plugin.canDelete({ element })) {
return false;
}
}

return true;
}, []);

const deleteElement = useCallback(async (element: PbEditorElement): Promise<void> => {
const block = await findElementBlock(element.id);

// We need to remove element variable from block if it exists
if (element.data?.variableId && block) {
const updatedBlock = removeVariableFromBlock(block, element.data.variableId);

updateElement(updatedBlock);
}

eventActionHandler.trigger(
new DeleteElementActionEvent({
element
})
);
}, []);

return { canDeleteElement, deleteElement };
};
22 changes: 22 additions & 0 deletions packages/app-page-builder/src/editor/hooks/useFindElementBlock.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { useCallback } from "react";
import { useRecoilCallback } from "recoil";
import { blockByElementSelector } from "~/editor/hooks/useCurrentBlockElement";

/**
* Exposes a getter which traverses the element tree upwards from the given element id, and returns an element
* of type "block", if found.
*/
export const useFindElementBlock = () => {
const findBlock = useRecoilCallback(({ snapshot }) => async (id: string) => {
return await snapshot.getPromise(blockByElementSelector(id));
});

const findElementBlock = useCallback(
async (elementId: string) => {
return findBlock(elementId);
},
[findBlock]
);

return { findElementBlock };
};
Original file line number Diff line number Diff line change
@@ -1,67 +1,22 @@
import React, { useCallback } from "react";
import { plugins } from "@webiny/plugins";
import { useActiveElement, useEventActionHandler } from "~/editor";
import { PbEditorPageElementPlugin, PbBlockVariable, PbEditorElement } from "~/types";
import { useUpdateElement } from "~/editor/hooks/useUpdateElement";
import { useParentBlock } from "~/editor/hooks/useParentBlock";
import { DeleteElementActionEvent } from "~/editor/recoil/actions";

const removeVariableFromBlock = (block: PbEditorElement, variableId: string) => {
const variables = block.data.variables ?? [];

const updatedVariables = variables.filter(
(variable: PbBlockVariable) => variable.id.split(".")[0] !== variableId
);

return {
...block,
data: {
...block.data,
variables: updatedVariables
}
};
};
import { useActiveElement, useDeleteElement } from "~/editor";

interface DeleteActionPropsType {
children: React.ReactElement;
}
const DeleteAction = ({ children }: DeleteActionPropsType) => {
const eventActionHandler = useEventActionHandler();
const [element] = useActiveElement();
const block = useParentBlock();
const updateElement = useUpdateElement();

if (!element) {
return null;
}
const { deleteElement, canDeleteElement } = useDeleteElement();

const onClick = useCallback((): void => {
// We need to remove element variable from block if it exists
if (element.data?.variableId && block) {
const updatedBlock = removeVariableFromBlock(block, element.data.variableId);

updateElement(updatedBlock);
if (!element) {
return;
}
eventActionHandler.trigger(
new DeleteElementActionEvent({
element
})
);
}, [element.id]);

const plugin = plugins
.byType<PbEditorPageElementPlugin>("pb-editor-page-element")
.find(pl => pl.elementType === element.type);

if (!plugin) {
return null;
}

if (typeof plugin.canDelete === "function") {
if (!plugin.canDelete({ element })) {
return null;
if (canDeleteElement(element)) {
deleteElement(element);
}
}
}, [element?.id]);

return React.cloneElement(children, { onClick });
};
Expand Down

0 comments on commit 6e1f5ac

Please sign in to comment.