fix(app-page-builder): expose a useDeleteElement hook

Author: Pavel910

packages/app-page-builder/src/editor/hooks/index.ts

@@ -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";

packages/app-page-builder/src/editor/hooks/useDeleteElement.ts

@@ -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 };
+};

packages/app-page-builder/src/editor/hooks/useFindElementBlock.ts

@@ -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 };
+};

packages/app-page-builder/src/editor/plugins/elementSettings/delete/DeleteAction.ts

@@ -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 });
 };