chore: add event to get all entries in a page

src/__test__/live-preview.test.ts

@@ -1,16 +1,16 @@
 import fetch from "jest-fetch-mock";
 
 import LivePreview from "../live-preview";
-import { getDefaultConfig } from "../utils/defaults";
 import * as LiveEditorModule from "../liveEditor";
+import { getDefaultConfig } from "../utils/defaults";
 import { PublicLogger } from "../utils/public-logger";
 
+import { IInitData, ILivePreviewWindowType } from "../types/types";
+import Config from "../utils/configHandler";
 import {
     convertObjectToMinifiedString,
     sendPostmessageToWindow,
 } from "./utils";
-import { IInitData, ILivePreviewWindowType } from "../types/types";
-import Config from "../utils/configHandler";
 
 jest.mock("../liveEditor/utils/liveEditorPostMessage", () => {
     const { getAllContentTypes } = jest.requireActual("./data/contentType");
@@ -25,6 +25,7 @@ jest.mock("../liveEditor/utils/liveEditorPostMessage", () => {
                     });
                 return Promise.resolve();
             }),
+            on: jest.fn(),
         },
     };
 });

src/liveEditor/__test__/index.test.ts

@@ -1,17 +1,16 @@
 import crypto from "crypto";
 
+import { getFieldSchemaMap } from "../../__test__/data/fieldSchemaMap";
 import { sleep } from "../../__test__/utils";
-import { IConfig } from "../../types/types";
-import { getDefaultConfig } from "../../utils/defaults";
 import { VisualEditor } from "../index";
 import { FieldSchemaMap } from "../utils/fieldSchemaMap";
-import { getFieldSchemaMap } from "../../__test__/data/fieldSchemaMap";
 
 jest.mock("../utils/liveEditorPostMessage", () => {
     const { getAllContentTypes } = jest.requireActual(
         "../../__test__/data/contentType"
     );
     const contentTypes = getAllContentTypes();
+
     return {
         __esModule: true,
         default: {
@@ -22,6 +21,7 @@ jest.mock("../utils/liveEditorPostMessage", () => {
                     });
                 return Promise.resolve();
             }),
+            on: jest.fn(),
         },
     };
 });

src/liveEditor/__test__/visualEditorHover.test.ts

@@ -1,7 +1,5 @@
 import { getFieldSchemaMap } from "../../__test__/data/fieldSchemaMap";
 import { sleep } from "../../__test__/utils";
-import { IConfig } from "../../types/types";
-import { getDefaultConfig } from "../../utils/defaults";
 import { VisualEditor } from "../index";
 import { FieldSchemaMap } from "../utils/fieldSchemaMap";
 import liveEditorPostMessage from "../utils/liveEditorPostMessage";

src/liveEditor/index.ts

@@ -28,13 +28,14 @@ import {
 } from "./utils/getCsDataOfElement";
 import liveEditorPostMessage from "./utils/liveEditorPostMessage";
 import { LiveEditorPostMessageEvents } from "./utils/types/postMessage.types";
-import { addCslpOutline } from "../utils/cslpdata";
+import { addCslpOutline, extractDetailsFromCslp } from "../utils/cslpdata";
 import Config from "../utils/configHandler";
 import { ILivePreviewWindowType } from "../types/types";
 import { inIframe } from "../utils/inIframe";
 import { getFieldType } from "./utils/getFieldType";
 import { generateCustomCursor } from "./utils/generateCustomCursor";
 import { VisualEditorCslpEventDetails } from "../types/liveEditor.types";
+import { getEntryUidFromCurrentPage } from "./utils/getEntryUidFromCurrentPage";
 
 export class VisualEditor {
     private customCursor: HTMLDivElement | null = null;
@@ -116,6 +117,11 @@ export class VisualEditor {
                 window.addEventListener("mouseover", (event) => {
                     addCslpOutline(event);
                 });
+
+                liveEditorPostMessage?.on(
+                    LiveEditorPostMessageEvents.GET_ENTRY_UID_IN_CURRENT_PAGE,
+                    getEntryUidFromCurrentPage
+                );
             })
             .catch(() => {
                 if (!inIframe()) {

src/liveEditor/utils/__test__/fieldSchemaMap.test.ts

@@ -20,6 +20,7 @@ jest.mock("../../utils/liveEditorPostMessage", () => {
                 }
                 return Promise.resolve();
             }),
+            on: jest.fn(),
         },
     };
 });

src/liveEditor/utils/__test__/focusOverlayWrapper.test.ts

@@ -9,6 +9,7 @@ jest.mock("../liveEditorPostMessage", () => {
         __esModule: true,
         default: {
             send: jest.fn(),
+            on: jest.fn(),
         },
     };
 });

src/liveEditor/utils/__test__/getEntryUidFromCurrentPage.test.ts

@@ -0,0 +1,45 @@
+import { JSDOM } from "jsdom";
+import { getEntryUidFromCurrentPage } from "../getEntryUidFromCurrentPage";
+
+const dom = new JSDOM(`
+<div>
+    <nav class="menu"><ul class="nav-ul header-ul"><li class="nav-li"><a data-cslp="header.bltdaa9dd393f0b2e35.en-us.navigation_menu.0.label" aria-current="page" class="active active" href="/">Home</a></li><li class="nav-li"><a data-cslp="header.bltdaa9dd393f0b2e35.en-us.navigation_menu.1.label" class="" href="/about-us">About Us</a></li><li class="nav-li"><a data-cslp="header.bltdaa9dd393f0b2e35.en-us.navigation_menu.2.label" class="" href="/blog">Blog</a></li><li class="nav-li"><a data-cslp="header.bltdaa9dd393f0b2e35.en-us.navigation_menu.3.label" class="" href="/contact-us">Contact Us</a></li><li class="nav-li"><a class="" href="/page-test">Page test</a></li></ul></nav>
+    <h1 data-cslp="page.bltf5bb5f8fb088a332.en-us.page_components.0.hero_banner.banner_title" class="hero-title">From here as well updated</h1>
+    <div class="copyright cslp-edit-mode" data-cslp="footer.blt1cfcd36cefdd1ec6.en-us.copyright"><p>Copyright © 2022. LogoIpsum. All rights reserved.</p></div>
+</div>
+`);
+
+const domWithDuplicate = new JSDOM(`
+  <div>
+    <h1 data-cslp="page.bltf5bb5f8fb088a332.en-us.page_components.0.hero_banner.banner_title" class="hero-title">From here as well updated</h1>
+    <h1 data-cslp="page.bltf5bb5f8fb088a332.en-us.page_components.0.hero_banner.banner_title" class="hero-title">From here as well updated</h1>
+  </div>
+`);
+
+const domWithNoCslp = new JSDOM(`
+  <div>
+    <h1 class="hero-title">From here as well updated</h1>
+  </div>
+`);
+
+describe("getFieldType", () => {
+    test("should return all entries in current page", () => {
+        document.body.innerHTML = dom.window.document.body.innerHTML;
+        const { entryUidsInCurrentPage } = getEntryUidFromCurrentPage();
+        expect(entryUidsInCurrentPage.length).toBe(3);
+    });
+
+    test("should return one entry if there are more than one element with same entry", () => {
+        document.body.innerHTML =
+            domWithDuplicate.window.document.body.innerHTML;
+        const { entryUidsInCurrentPage } = getEntryUidFromCurrentPage();
+        expect(entryUidsInCurrentPage.length).toBe(1);
+    });
+
+    test("should return empty array if there are no cslp", () => {
+        document.body.innerHTML = domWithNoCslp.window.document.body.innerHTML;
+        const { entryUidsInCurrentPage } = getEntryUidFromCurrentPage();
+        expect(entryUidsInCurrentPage.length).toBe(0);
+        expect(entryUidsInCurrentPage).toEqual([]);
+    });
+});

src/liveEditor/utils/getEntryUidFromCurrentPage.ts

@@ -0,0 +1,19 @@
+import { extractDetailsFromCslp } from "../../utils/cslpdata";
+
+export function getEntryUidFromCurrentPage() {
+    const elementsWithCslp = Array.from(
+        document.querySelectorAll("[data-cslp]")
+    );
+    const entryUidsInCurrentPage = elementsWithCslp.map((element) => {
+        return extractDetailsFromCslp(
+            element.getAttribute("data-cslp") as string
+        ).entry_uid;
+    });
+    const uniqueEntryUidsInCurrentPage = Array.from<string>(
+        new Set(entryUidsInCurrentPage)
+    );
+
+    return {
+        entryUidsInCurrentPage: uniqueEntryUidsInCurrentPage,
+    };
+}

src/liveEditor/utils/types/postMessage.types.ts

@@ -7,4 +7,5 @@ export enum LiveEditorPostMessageEvents {
     FOCUS_FIELD = "focus-field",
     DELETE_INSTANCE = "delete-instance",
     MOVE_INSTANCE = "move-instance",
+    GET_ENTRY_UID_IN_CURRENT_PAGE = "get-entry-uid-in-current-page",
 }