fix: change ids handling for saving of blocks and elements

packages/app-page-builder/src/blockEditor/Editor.tsx

@@ -14,7 +14,7 @@ import createElementPlugin from "~/admin/utils/createElementPlugin";
 import { createStateInitializer } from "./createStateInitializer";
 import { BlockEditorConfig } from "./config/BlockEditorConfig";
 import { BlockWithContent } from "~/blockEditor/state";
-import { createElement } from "~/editor/helpers";
+import { createElement, addElementId } from "~/editor/helpers";
 import { PbPageBlock, PbEditorElement } from "~/types";
 
 export const BlockEditor: React.FC = () => {
@@ -52,7 +52,7 @@ export const BlockEditor: React.FC = () => {
                 // We need to wrap all elements into a "document" element, it's a requirement for the editor to work.
                 const content: PbEditorElement = {
                     ...createElement("document"),
-                    elements: [pageBlockData.content]
+                    elements: [addElementId(pageBlockData.content)]
                 };
 
                 setBlock({

packages/app-page-builder/src/blockEditor/config/eventActions/saveBlock/saveBlockAction.ts

@@ -6,6 +6,7 @@ import { BlockEventActionCallable } from "~/blockEditor/types";
 import { BlockWithContent } from "~/blockEditor/state";
 import { UPDATE_PAGE_BLOCK } from "~/admin/views/PageBlocks/graphql";
 import getPreviewImage from "./getPreviewImage";
+import { removeElementId } from "~/editor/helpers";
 
 // TODO: add more properties here
 type BlockType = Pick<BlockWithContent, "name" | "content" | "blockCategory">;
@@ -35,7 +36,7 @@ export const saveBlockAction: BlockEventActionCallable<SaveBlockActionArgsType>
         blockCategory: state.block.blockCategory,
         // We need to grab the contents of the "document" element, and we can safely just grab the first element
         // because we only have 1 block in the block editor.
-        content: element.elements[0]
+        content: removeElementId(element.elements[0])
     };
 
     if (debouncedSave) {

packages/app-page-builder/src/editor/helpers.ts

@@ -8,7 +8,8 @@ import {
     PbEditorPageElementPlugin,
     PbEditorPageElementSettingsPlugin,
     PbEditorPageElementStyleSettingsPlugin,
-    PbEditorElement
+    PbEditorElement,
+    PbElement
 } from "~/types";
 
 const ALPHANUMERIC = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
@@ -146,6 +147,25 @@ export const addElementId = (target: Omit<PbEditorElement, "id">): PbEditorEleme
     }
     return element;
 };
+/**
+ * Remove id from elements recursively
+ */
+export const removeElementId = (el: PbElement): PbElement => {
+    // @ts-ignore
+    delete el.id;
+
+    el.elements = el.elements.map(el => {
+        // @ts-ignore
+        delete el.id;
+        if (el.elements && el.elements.length) {
+            el = removeElementId(el);
+        }
+
+        return el;
+    });
+
+    return el;
+};
 
 export const createBlockElements = (name: string): PbEditorElement => {
     const plugin = plugins.byName<PbEditorBlockPlugin>(name);

packages/app-page-builder/src/editor/plugins/elementSettings/save/SaveAction.tsx

@@ -31,23 +31,7 @@ import {
     PbEditorElement
 } from "~/types";
 import { useEventActionHandler } from "../../../hooks/useEventActionHandler";
-
-const removeIds = (el: PbElement): PbElement => {
-    // @ts-ignore
-    delete el.id;
-
-    el.elements = el.elements.map(el => {
-        // @ts-ignore
-        delete el.id;
-        if (el.elements && el.elements.length) {
-            el = removeIds(el);
-        }
-
-        return el;
-    });
-
-    return el;
-};
+import { removeElementId } from "~/editor/helpers";
 
 interface ImageDimensionsType {
     width: number;
@@ -94,15 +78,8 @@ const SaveAction: React.FC = ({ children }) => {
     const client = useApolloClient();
 
     const onSubmit = async (formData: PbDocumentElement) => {
-        // TODO: find a way to decouple this.
-        // One option is to have a `save` plugin in `blockEditor` AND in the `pageEditor` where each can be implemented differently, but then we need to extract the image creation logic somewhere.
         const pbElement = (await getElementTree(element)) as PbElement;
-        if (formData.type === "block") {
-            // We need ids for block editor
-            formData.content = pluginOnSave(pbElement);
-        } else {
-            formData.content = pluginOnSave(removeIds(pbElement));
-        }
+        formData.content = pluginOnSave(removeElementId(pbElement));
 
         const meta = await getDataURLImageDimensions(formData.preview);
         const blob = dataURLtoBlob(formData.preview);