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: React.FC<OEmbedProps> = props => {
         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 {
@@ -52,7 +53,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";
 
 export interface ImageElementData {
     image?: {
@@ -80,7 +80,7 @@ export const ImageRendererComponent: React.FC<ImageRendererComponentProps> = ({
 
         content = <PbImg alt={title} title={title} src={src} srcSet={srcSet} onClick={onClick} />;
     } 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-ignore
 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/plugins/elementSettings/action/ActionSettings.tsx

@@ -39,9 +39,14 @@ const ActionSettingsComponent: React.FC<ActionSettingsPropsType> = ({
 }) => {
     const updateElement = useUpdateElement();
 
-    const { actionType } = element.data?.action || { actionType: "link" };
+    const { actionType } = element.data?.action || {};
 
     const updateSettings: FormOnSubmit = data => {
+        // Skip update if nothing is changed.
+        if (data.actionType === actionType) {
+            return;
+        }
+
         const attrKey = `data.action`;
         const newElement: PbEditorElement = merge(element, attrKey, data);
         updateElement(newElement);

packages/app-page-builder/src/editor/plugins/elements/button/index.tsx

@@ -70,7 +70,8 @@ const buttonElementPluginsFactory = (args: PbEditorElementPluginArgs = {}) => {
                                 "center",
                                 DisplayMode.DESKTOP
                             ) as unknown as "flex-start" | "center" | "flex-end"
-                        }
+                        },
+                        action: { actionType: "link", href: "" }
                     },
                     ...options
                 };

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()]
     };
 };

packages/app-page-builder/src/types.ts

@@ -180,12 +180,12 @@ export type PbElementDataType = {
     blockId?: string;
     variables?: PbBlockVariable[];
     action?: {
-        href: string;
-        newTab: boolean;
-        clickHandler: string;
+        href?: string;
+        newTab?: boolean;
+        clickHandler?: string;
         actionType: string;
-        variables: PbButtonElementClickHandlerVariable[];
-        scrollToElement: string;
+        variables?: PbButtonElementClickHandlerVariable[];
+        scrollToElement?: string;
         [key: string]: any;
     };
     settings?: PbElementDataSettingsType;