From b28739a38030ce02660cc87e03bdc21d787ecdca Mon Sep 17 00:00:00 2001
From: Vitalii Nobis <vitalii.nobis@neatbyte.solutions>
Date: Wed, 20 Sep 2023 10:06:56 +0000
Subject: [PATCH 1/2] fix: fix inconsistent pb element save-behavior in editor

---
 .../src/renderers/components/EmptyElement.tsx | 20 +++++++++++++++++++
 .../src/renderers/components/index.ts         |  1 +
 .../renderers/embeds/components/OEmbed.tsx    | 10 ++++++++--
 .../src/renderers/embeds/iframe.tsx           |  8 +++++++-
 .../src/renderers/embeds/pinterest.tsx        |  3 ++-
 .../src/renderers/image.tsx                   |  4 ++--
 .../defaultImagesListComponent.tsx            | 15 ++------------
 .../elementSettings/action/ActionSettings.tsx |  7 ++++++-
 .../editor/plugins/elements/button/index.tsx  |  3 ++-
 .../recoil/actions/createElement/action.ts    |  3 ++-
 packages/app-page-builder/src/types.ts        | 10 +++++-----
 11 files changed, 57 insertions(+), 27 deletions(-)
 create mode 100644 packages/app-page-builder-elements/src/renderers/components/EmptyElement.tsx

diff --git a/packages/app-page-builder-elements/src/renderers/components/EmptyElement.tsx b/packages/app-page-builder-elements/src/renderers/components/EmptyElement.tsx
new file mode 100644
index 00000000000..f3341ef571d
--- /dev/null
+++ b/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>;
+};
diff --git a/packages/app-page-builder-elements/src/renderers/components/index.ts b/packages/app-page-builder-elements/src/renderers/components/index.ts
index 3c5fa5e000d..88f0b9624dc 100644
--- a/packages/app-page-builder-elements/src/renderers/components/index.ts
+++ b/packages/app-page-builder-elements/src/renderers/components/index.ts
@@ -1 +1,2 @@
 export * from "./DefaultLinkComponent";
+export * from "./EmptyElement";
diff --git a/packages/app-page-builder-elements/src/renderers/embeds/components/OEmbed.tsx b/packages/app-page-builder-elements/src/renderers/embeds/components/OEmbed.tsx
index 1363772c6af..676190dcee4 100644
--- a/packages/app-page-builder-elements/src/renderers/embeds/components/OEmbed.tsx
+++ b/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();
 };
diff --git a/packages/app-page-builder-elements/src/renderers/embeds/iframe.tsx b/packages/app-page-builder-elements/src/renderers/embeds/iframe.tsx
index 5fec4147d1c..bcfb9d3baeb 100644
--- a/packages/app-page-builder-elements/src/renderers/embeds/iframe.tsx
+++ b/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%" />;
     });
diff --git a/packages/app-page-builder-elements/src/renderers/embeds/pinterest.tsx b/packages/app-page-builder-elements/src/renderers/embeds/pinterest.tsx
index d613e41fa86..379bda04e0d 100644
--- a/packages/app-page-builder-elements/src/renderers/embeds/pinterest.tsx
+++ b/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 = () => {
diff --git a/packages/app-page-builder-elements/src/renderers/image.tsx b/packages/app-page-builder-elements/src/renderers/image.tsx
index 61c17047085..23af4428054 100644
--- a/packages/app-page-builder-elements/src/renderers/image.tsx
+++ b/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;
diff --git a/packages/app-page-builder-elements/src/renderers/imagesList/imagesComponents/defaultImagesListComponent.tsx b/packages/app-page-builder-elements/src/renderers/imagesList/imagesComponents/defaultImagesListComponent.tsx
index 2691ca37310..a410ecbc45f 100644
--- a/packages/app-page-builder-elements/src/renderers/imagesList/imagesComponents/defaultImagesListComponent.tsx
+++ b/packages/app-page-builder-elements/src/renderers/imagesList/imagesComponents/defaultImagesListComponent.tsx
@@ -1,5 +1,6 @@
 import React, { useReducer } from "react";
 import { ImagesListComponent } from "../types";
+import { EmptyElement } from "~/renderers/components";
 
 /**
  * Package react-columned does not have types.
@@ -7,7 +8,6 @@ import { ImagesListComponent } from "../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." />;
     };
diff --git a/packages/app-page-builder/src/editor/plugins/elementSettings/action/ActionSettings.tsx b/packages/app-page-builder/src/editor/plugins/elementSettings/action/ActionSettings.tsx
index 28c34df176a..fa40931af58 100644
--- a/packages/app-page-builder/src/editor/plugins/elementSettings/action/ActionSettings.tsx
+++ b/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);
diff --git a/packages/app-page-builder/src/editor/plugins/elements/button/index.tsx b/packages/app-page-builder/src/editor/plugins/elements/button/index.tsx
index 5c56424e6de..f52bf863d0f 100644
--- a/packages/app-page-builder/src/editor/plugins/elements/button/index.tsx
+++ b/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
                 };
diff --git a/packages/app-page-builder/src/editor/recoil/actions/createElement/action.ts b/packages/app-page-builder/src/editor/recoil/actions/createElement/action.ts
index e3c6e1be096..8b234f322c6 100644
--- a/packages/app-page-builder/src/editor/recoil/actions/createElement/action.ts
+++ b/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()]
     };
 };
diff --git a/packages/app-page-builder/src/types.ts b/packages/app-page-builder/src/types.ts
index 7c6413d39a5..9ac354dada9 100644
--- a/packages/app-page-builder/src/types.ts
+++ b/packages/app-page-builder/src/types.ts
@@ -177,12 +177,12 @@ export interface PbElementDataTypeSource {
 
 export type PbElementDataType = {
     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;

From 53a5fd203b19478b894b1efab20dd8deeedb28eb Mon Sep 17 00:00:00 2001
From: Vitalii Nobis <vitalii.nobis@neatbyte.solutions>
Date: Thu, 23 Nov 2023 09:35:21 +0000
Subject: [PATCH 2/2] fix: revert back button changes

---
 .../plugins/elementSettings/action/ActionSettings.tsx  |  7 +------
 .../src/editor/plugins/elements/button/index.tsx       |  3 +--
 packages/app-page-builder/src/types.ts                 | 10 +++++-----
 3 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/packages/app-page-builder/src/editor/plugins/elementSettings/action/ActionSettings.tsx b/packages/app-page-builder/src/editor/plugins/elementSettings/action/ActionSettings.tsx
index fa40931af58..28c34df176a 100644
--- a/packages/app-page-builder/src/editor/plugins/elementSettings/action/ActionSettings.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elementSettings/action/ActionSettings.tsx
@@ -39,14 +39,9 @@ const ActionSettingsComponent: React.FC<ActionSettingsPropsType> = ({
 }) => {
     const updateElement = useUpdateElement();
 
-    const { actionType } = element.data?.action || {};
+    const { actionType } = element.data?.action || { actionType: "link" };
 
     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);
diff --git a/packages/app-page-builder/src/editor/plugins/elements/button/index.tsx b/packages/app-page-builder/src/editor/plugins/elements/button/index.tsx
index f52bf863d0f..5c56424e6de 100644
--- a/packages/app-page-builder/src/editor/plugins/elements/button/index.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elements/button/index.tsx
@@ -70,8 +70,7 @@ const buttonElementPluginsFactory = (args: PbEditorElementPluginArgs = {}) => {
                                 "center",
                                 DisplayMode.DESKTOP
                             ) as unknown as "flex-start" | "center" | "flex-end"
-                        },
-                        action: { actionType: "link", href: "" }
+                        }
                     },
                     ...options
                 };
diff --git a/packages/app-page-builder/src/types.ts b/packages/app-page-builder/src/types.ts
index c9d9d1b4b38..3dbcbe2266a 100644
--- a/packages/app-page-builder/src/types.ts
+++ b/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;