Merge pull request #346 from contentstack/VE-4043-configure-start-edit-retry-2

feat(VE-4043): add start editing button configuration for builder mode

Author: sairaj-cs

src/configManager/config.default.ts

@@ -16,6 +16,10 @@ export function getUserInitData(): IInitData {
             position: "top",
             includeByQueryParameter: true,
         },
+        editButtonBuilder: {
+            enable: true,
+            position: "bottom-right"
+        },
 
         mode: "preview",
 
@@ -50,6 +54,10 @@ export function getDefaultConfig(): IConfig {
             position: "top",
             includeByQueryParameter: true,
         },
+        editButtonBuilder: {
+            enable: true,
+            position: "bottom-right"
+        },
 
         hash: "",
         mode: 1,

src/configManager/handleUserConfig.ts

@@ -108,6 +108,18 @@ export const handleInitData = (initData: Partial<IInitData>): void => {
             config.editButton.includeByQueryParameter ??
             true,
     });
+    
+    Config.set("editButtonBuilder", {
+        enable:
+            initData.editButtonBuilder?.enable ??
+            stackSdk.live_preview?.editButtonBuilder?.enable ??
+            config.editButtonBuilder.enable,
+        position:  
+            initData.editButtonBuilder?.position ??
+            stackSdk.live_preview?.position ??
+            config.editButtonBuilder.position ??
+            "bottom-right",
+    })
 
     // client URL params
     handleClientUrlParams(

src/types/types.ts

@@ -79,12 +79,23 @@ export declare interface IConfig {
     windowType: ILivePreviewWindowType;
     hash: string;
     editButton: IConfigEditButton;
+    editButtonBuilder: IConfigEditButtonBuilder;
     mode: ILivePreviewModeConfig;
     elements: {
         highlightedElement: HTMLElement | null;
     };
 }
 
+export declare interface IConfigEditButtonBuilder {
+    enable: boolean;
+    position?:
+        | "top-left"
+        | "top-right"
+        | "bottom-left"
+        | "bottom-right"
+}
+
+
 export declare interface IConfigEditButton {
     enable: boolean;
     exclude?: ("insideLivePreviewPortal" | "outsideLivePreviewPortal")[];
@@ -115,6 +126,7 @@ export declare interface IInitData {
     clientUrlParams: Partial<Omit<IClientUrlParams, "url">>;
     stackSdk: IStackSdk;
     editButton: IConfigEditButton;
+    editButtonBuilder: IConfigEditButtonBuilder;
     mode: ILivePreviewMode;
 }
 

src/visualBuilder/__test__/index.test.ts

@@ -194,7 +194,7 @@ describe("Visual builder", () => {
                     expect(h1).toHaveAttribute("contenteditable");
                     expect(h1).toHaveAttribute("data-cslp-field-type", "singleline");
                 })
-            }, { timeout: 20 * 1000 });
+            }, { timeout: 40 * 1000 });
 
             test("multi line should be contenteditable", async () => {
                 h1.setAttribute(
@@ -207,7 +207,7 @@ describe("Visual builder", () => {
                     expect(h1).toHaveAttribute("contenteditable");
                     expect(h1).toHaveAttribute("data-cslp-field-type", "multiline");
                 })
-            }, { timeout: 20 * 1000 });
+            }, { timeout: 40 * 1000 });
 
         });
     });

src/visualBuilder/components/__test__/startEditingButton.test.tsx

@@ -1,5 +1,5 @@
 import { render, fireEvent, screen } from "@testing-library/preact";
-import StartEditingButtonComponent from "../startEditingButton";
+import StartEditingButtonComponent, { getEditButtonPosition } from "../startEditingButton";
 import Config from "../../../configManager/configManager";
 import { asyncRender } from "../../../__test__/utils";
 
@@ -45,4 +45,52 @@ describe("StartEditingButtonComponent", () => {
             "https://app.contentstack.com/#!/stack/bltapikey/visual-builder?branch=main&environment=bltenvironment&target-url=http%3A%2F%2Flocalhost%3A3000%2F&locale=en-us"
         );
     });
+
+    test("should not render when enable is false", async () => {
+        Config.set("editButtonBuilder.enable", false);
+        const { container } = await asyncRender(<StartEditingButtonComponent />);
+        expect(container).toBeEmptyDOMElement();
+    });
+
+    test("should render when enable is true", async () => {
+        Config.set("editButtonBuilder.enable", true);
+        const { getByTestId } = await asyncRender(<StartEditingButtonComponent />);
+        const button = getByTestId("vcms-start-editing-btn");
+        expect(button).toBeInTheDocument();
+    });
+
+    test.each([
+        'bottom-right',
+        'bottom-left',
+        'top-left',
+        'top-right'
+    ])('should return valid position %s', (position) => {
+        expect(getEditButtonPosition(position)).toBe(position);
+    });
+
+    test.each([
+        'invalid-position',
+        'center',
+        '',
+        undefined,
+        null,
+        123,
+        {},
+        [],
+        false,
+    ])('should return bottom-right for invalid input: %s', (invalidPosition) => {
+        expect(getEditButtonPosition(invalidPosition)).toBe('bottom-right');
+    });
+    
+    test("should render with default values when editButtonBuilder config is missing", async () => {
+        Config.reset();
+        Config.set("stackDetails.apiKey", "bltapikey");
+        Config.set("stackDetails.environment", "bltenvironment");
+
+        const { getByTestId } = await asyncRender(<StartEditingButtonComponent />);
+        const button = getByTestId("vcms-start-editing-btn");
+        
+        expect(Config.get().editButtonBuilder.position).toBe("bottom-right")
+        expect(button).toBeInTheDocument();
+    });
 });

src/visualBuilder/components/startEditingButton.tsx

@@ -3,14 +3,40 @@ import getVisualBuilderRedirectionUrl from "../utils/getVisualBuilderRedirection
 import { EditIcon } from "./icons";
 import { visualBuilderStyles } from "../visualBuilder.style";
 import React from "preact/compat";
+import Config from "../../configManager/configManager";
+import { IConfigEditButtonBuilder } from "../../types/types";
 
-function StartEditingButtonComponent(): JSX.Element {
-    return (
+
+type Position = NonNullable<IConfigEditButtonBuilder['position']>;
+
+const positionStyles: Record<Position, string> = {
+    "bottom-right": visualBuilderStyles()['visual-builder__start-editing-btn__bottom-right'],
+    "bottom-left": visualBuilderStyles()['visual-builder__start-editing-btn__bottom-left'],
+    "top-left": visualBuilderStyles()['visual-builder__start-editing-btn__top-left'],
+    "top-right": visualBuilderStyles()['visual-builder__start-editing-btn__top-right'],
+}
+
+export function getEditButtonPosition(position: any): Position {
+    const validPositions: Position[] = ['bottom-left', 'bottom-right', 'top-left', 'top-right']
+    if(validPositions.includes(position)){
+        return position
+    } else {
+        return "bottom-right"
+    }
+}
+
+function StartEditingButtonComponent(): JSX.Element | null {
+    const config = Config.get()
+    const enable = config.editButtonBuilder.enable;
+    const position = config.editButtonBuilder.position || "bottom-right";
+
+    return enable ? (
         <a
             href={getVisualBuilderRedirectionUrl().toString()}
             className={classNames(
                 "visual-builder__start-editing-btn",
-                visualBuilderStyles()["visual-builder__start-editing-btn"]
+                visualBuilderStyles()["visual-builder__start-editing-btn"],
+                positionStyles[getEditButtonPosition(position)]
             )}
             data-testid="vcms-start-editing-btn"
             onClick={(e) => {
@@ -24,7 +50,7 @@ function StartEditingButtonComponent(): JSX.Element {
             <EditIcon />
             <span>Start Editing</span>
         </a>
-    );
+    ) : null;
 }
 
 export default StartEditingButtonComponent;

src/visualBuilder/visualBuilder.style.ts

@@ -152,8 +152,6 @@ export function visualBuilderStyles() {
             z-index: 1000;
             text-decoration: none;
             position: fixed;
-            bottom: 30px;
-            right: 30px;
             box-shadow:
                 0px 4px 15px 0px rgba(108, 92, 231, 0.2),
                 0px 3px 14px 3px rgba(0, 0, 0, 0.12),
@@ -201,6 +199,22 @@ export function visualBuilderStyles() {
                 text-transform: capitalize;
             }
         `,
+        "visual-builder__start-editing-btn__bottom-right": css`
+            bottom: 30px;
+            right: 30px;
+        `,
+        "visual-builder__start-editing-btn__bottom-left": css`
+            bottom: 30px;
+            left: 30px;
+        `,
+        "visual-builder__start-editing-btn__top-right": css`
+            top: 30px;
+            right: 30px;
+        `,
+        "visual-builder__start-editing-btn__top-left": css`
+            top: 30px;
+            left: 30px;
+        `,
         "visual-builder__cursor-icon": css`
             height: 40px;
             width: 40px;