fix: fix inconsistent pb element save-behavior in editor

packages/app-page-builder-elements/src/renderers/components/EmptyElement.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import styled from "@emotion/styled";
+
+const EmptyElementWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    min-height: 100px;
+    ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph1")};
+    color: ${props => props.theme.styles.colors["color4"]};
+`;
+
+type EmptyElementProps = {
+    message: string;
+};
+
+export const EmptyElement = ({ message }: EmptyElementProps) => {
+    return <EmptyElementWrapper>{message}</EmptyElementWrapper>;
+};

packages/app-page-builder-elements/src/renderers/components/index.ts

@@ -1 +1,2 @@
 export * from "./DefaultLinkComponent";
+export * from "./EmptyElement";

packages/app-page-builder-elements/src/renderers/embeds/components/OEmbed.tsx

@@ -1,7 +1,9 @@
 import React, { useEffect, useCallback } from "react";
-import { Element } from "~/types";
 import styled from "@emotion/styled";
 
+import { EmptyElement } from "~/renderers/components";
+import { Element } from "~/types";
+
 export interface OEmbedPropsInitCallableParams {
     props: OEmbedProps;
     node: HTMLElement;
@@ -74,5 +76,9 @@ export const OEmbed = (props: OEmbedProps) => {
         appendSDK(props).then(() => initEmbed(props));
     });
 
-    return url ? renderer() : null;
+    if (!url) {
+        return <EmptyElement message="Please provide a link for this embed element." />;
+    }
+
+    return renderer();
 };

packages/app-page-builder-elements/src/renderers/embeds/iframe.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { createRenderer } from "~/createRenderer";
 import { useRenderer } from "~/hooks/useRenderer";
+import { EmptyElement } from "~/renderers/components";
 
 export interface IFrameElementData {
     iframe: {
@@ -13,6 +14,11 @@ export const createIFrame = () =>
         const { getElement } = useRenderer();
 
         const element = getElement<IFrameElementData>();
+        const url = element.data.iframe.url;
 
-        return <iframe src={element.data.iframe.url} width="100%" height="100%" />;
+        if (!url) {
+            return <EmptyElement message="Please provide a link for this iframe element." />;
+        }
+
+        return <iframe src={url} width="100%" height="100%" />;
     });

packages/app-page-builder-elements/src/renderers/embeds/pinterest.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from "react";
 import { Element, Renderer } from "~/types";
 import { createRenderer } from "~/createRenderer";
 import { useRenderer } from "~/hooks/useRenderer";
+import { EmptyElement } from "~/renderers/components";
 
 declare global {
     interface Window {
@@ -50,7 +51,7 @@ const Pinterest: PinterestComponent = ({ element }) => {
         return <a data-pin-do="embedPin" data-pin-width={data.size || "small"} href={data.url} />;
     }
 
-    return null;
+    return <EmptyElement message="Please provide a link for this embed element." />;
 };
 
 export const createPinterest = () => {

packages/app-page-builder-elements/src/renderers/image.tsx

@@ -3,7 +3,7 @@ import styled from "@emotion/styled";
 import { createRenderer, CreateRendererOptions } from "~/createRenderer";
 import { useRenderer } from "~/hooks/useRenderer";
 import { LinkComponent as LinkComponentType } from "~/types";
-import { DefaultLinkComponent } from "~/renderers/components";
+import { DefaultLinkComponent, EmptyElement } from "~/renderers/components";
 
 declare global {
     // eslint-disable-next-line
@@ -128,7 +128,7 @@ export const ImageRendererComponent = ({
             );
         }
     } else {
-        content = renderEmpty || null;
+        content = renderEmpty || <EmptyElement message="Please select an image." />;
     }
 
     const linkProps = link || element.data?.link;

packages/app-page-builder-elements/src/renderers/imagesList/imagesComponents/defaultImagesListComponent.tsx

@@ -1,13 +1,13 @@
 import React, { useReducer } from "react";
 import { ImagesListComponent } from "../types";
+import { EmptyElement } from "~/renderers/components";
 
 /**
  * Package react-columned does not have types.
  */
 // @ts-expect-error
 import Columned from "react-columned";
 import Lightbox from "react-images";
-import styled from "@emotion/styled";
 
 const COLUMNS = { 320: 1, 480: 2, 800: 3, 1366: 4 };
 
@@ -57,17 +57,6 @@ const useLightbox = () => {
     };
 };
 
-const NoImagesToDisplay = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100px;
-    width: 100%;
-    border: 1px dashed var(--mdc-theme-secondary);
-    color: var(--mdc-theme-text-secondary-on-background);
-    pointer-events: none;
-`;
-
 export const createDefaultImagesListComponent = (): ImagesListComponent =>
     function DefaultImagesListComponent(props) {
         const { opened, open, close, next, prev, currentIndex } = useLightbox();
@@ -99,5 +88,5 @@ export const createDefaultImagesListComponent = (): ImagesListComponent =>
             );
         }
 
-        return <NoImagesToDisplay>No images to display.</NoImagesToDisplay>;
+        return <EmptyElement message="No images to display." />;
     };

packages/app-page-builder/src/editor/recoil/actions/createElement/action.ts

@@ -1,8 +1,9 @@
+import { UpdateDocumentActionEvent } from "~/editor/recoil/actions/updateDocument";
 import { CreateElementEventActionArgsType } from "./types";
 import { EventActionCallable } from "~/types";
 
 export const createElementAction: EventActionCallable<CreateElementEventActionArgsType> = () => {
     return {
-        actions: []
+        actions: [new UpdateDocumentActionEvent()]
     };
 };