@contentstack/live-preview-utils 2.0.4 → 3.0.0

package/dist/modern/utils/index.js

@@ -1,74 +1,10 @@
+import "../chunk-5WRI5ZAA.js";
+
 // src/utils/index.ts
-import { livePreviewStyles } from "../styles/live_preview.js";
-import { PublicLogger } from "./public-logger.js";
+import { PublicLogger } from "../logger/logger.js";
 function hasWindow() {
   return typeof window !== "undefined";
 }
-var tooltipSingularInnerHtml = `<div class="singular edit-button">
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M8.1 3.5L0.3 11.3C0.1 11.5 0 11.7 0 12V15C0 15.6 0.4 16 1 16H4C4.3 16 4.5 15.9 4.7 15.7L12.5 7.9L8.1 3.5Z" fill="#718096"></path>
-      <path d="M15.7 3.3L12.7 0.3C12.3 -0.1 11.7 -0.1 11.3 0.3L9.5 2.1L13.9 6.5L15.7 4.7C16.1 4.3 16.1 3.7 15.7 3.3Z" fill="#718096"></path>
-    </svg>Edit
-  </div>`;
-var tooltipMultipleInnerHtml = `<div class="edit-button" title="edit">
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M8.1 3.5L0.3 11.3C0.1 11.5 0 11.7 0 12V15C0 15.6 0.4 16 1 16H4C4.3 16 4.5 15.9 4.7 15.7L12.5 7.9L8.1 3.5Z" fill="#718096"></path>
-      <path d="M15.7 3.3L12.7 0.3C12.3 -0.1 11.7 -0.1 11.3 0.3L9.5 2.1L13.9 6.5L15.7 4.7C16.1 4.3 16.1 3.7 15.7 3.3Z" fill="#718096"></path>
-    </svg>
-  </div>
-  <div title="click element" class="external-link-button">
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M2.66654 2.66758H13.3332V13.3342H6.66654V16.0009H13.3332C14.0405 16.0009 14.7187 15.72 15.2188 15.2199C15.7189 14.7198 15.9999 14.0415 15.9999 13.3342V2.66758C15.9999 1.96034 15.7189 1.28206 15.2188 0.781964C14.7187 0.281867 14.0405 0.000915527 13.3332 0.000915527H2.66654C1.9593 0.000915527 1.28102 0.281867 0.780927 0.781964C0.280829 1.28206 -0.00012207 1.96034 -0.00012207 2.66758V9.33425H2.66654V2.66758Z" fill="#718096" />
-      <path d="M6.94263 7.05734L0.999958 13L2.88529 14.8853L8.82796 8.94267L10.8853 11V5.00001H4.88529L6.94263 7.05734Z" fill="#718096" />
-    </svg>
-  </div>`;
-var createSingularEditButton = (editCallback) => {
-  const singularEditButton = document.createElement("div");
-  singularEditButton.classList.add("cslp-tooltip-child", "singular");
-  singularEditButton.setAttribute(
-    "data-test-id",
-    "cslp-singular-edit-button"
-  );
-  singularEditButton.innerHTML = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M8.1 3.5L0.3 11.3C0.1 11.5 0 11.7 0 12V15C0 15.6 0.4 16 1 16H4C4.3 16 4.5 15.9 4.7 15.7L12.5 7.9L8.1 3.5Z" fill="#718096"></path>
-      <path d="M15.7 3.3L12.7 0.3C12.3 -0.1 11.7 -0.1 11.3 0.3L9.5 2.1L13.9 6.5L15.7 4.7C16.1 4.3 16.1 3.7 15.7 3.3Z" fill="#718096"></path>
-    </svg>Edit`;
-  singularEditButton.addEventListener("click", editCallback);
-  return singularEditButton;
-};
-var createMultipleEditButton = (editCallback, linkCallback) => {
-  const multipleEditButton = document.createElement("div");
-  multipleEditButton.classList.add("cslp-tooltip-child");
-  multipleEditButton.setAttribute("data-title", "Edit");
-  multipleEditButton.setAttribute(
-    "data-test-id",
-    "cslp-multiple-edit-button"
-  );
-  multipleEditButton.innerHTML = ` <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M8.1 3.5L0.3 11.3C0.1 11.5 0 11.7 0 12V15C0 15.6 0.4 16 1 16H4C4.3 16 4.5 15.9 4.7 15.7L12.5 7.9L8.1 3.5Z" fill="#718096"></path>
-      <path d="M15.7 3.3L12.7 0.3C12.3 -0.1 11.7 -0.1 11.3 0.3L9.5 2.1L13.9 6.5L15.7 4.7C16.1 4.3 16.1 3.7 15.7 3.3Z" fill="#718096"></path>
-    </svg>`;
-  multipleEditButton.addEventListener("click", editCallback);
-  const multipleExternalLinkButton = document.createElement("div");
-  multipleExternalLinkButton.classList.add("cslp-tooltip-child");
-  multipleExternalLinkButton.setAttribute("data-title", "Go to link");
-  multipleExternalLinkButton.setAttribute(
-    "data-test-id",
-    "cslp-multiple-external-link-button"
-  );
-  multipleExternalLinkButton.innerHTML = ` <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M2.66654 2.66758H13.3332V13.3342H6.66654V16.0009H13.3332C14.0405 16.0009 14.7187 15.72 15.2188 15.2199C15.7189 14.7198 15.9999 14.0415 15.9999 13.3342V2.66758C15.9999 1.96034 15.7189 1.28206 15.2188 0.781964C14.7187 0.281867 14.0405 0.000915527 13.3332 0.000915527H2.66654C1.9593 0.000915527 1.28102 0.281867 0.780927 0.781964C0.280829 1.28206 -0.00012207 1.96034 -0.00012207 2.66758V9.33425H2.66654V2.66758Z" fill="#718096" />
-      <path d="M6.94263 7.05734L0.999958 13L2.88529 14.8853L8.82796 8.94267L10.8853 11V5.00001H4.88529L6.94263 7.05734Z" fill="#718096" />
-    </svg>`;
-  multipleExternalLinkButton.addEventListener("click", linkCallback);
-  const multipleEditFragment = document.createDocumentFragment();
-  multipleEditFragment.appendChild(multipleEditButton);
-  multipleEditFragment.appendChild(multipleExternalLinkButton);
-  const multipleDiv = document.createElement("div");
-  multipleDiv.appendChild(multipleEditFragment);
-  multipleDiv.classList.add(livePreviewStyles()["multiple"]);
-  return multipleDiv;
-};
 function addLivePreviewQueryTags(link) {
   try {
     const docUrl = new URL(document.location.href);
@@ -87,122 +23,29 @@ function addLivePreviewQueryTags(link) {
     return link;
   }
 }
-function inIframe() {
-  return window.location !== window.parent.location;
-}
-function shouldRenderEditButton(editButton) {
-  if (!editButton.enable) {
-    if (editButton.enable === void 0)
-      PublicLogger.error(
-        "enable key is required inside editButton object"
-      );
-    return false;
-  }
-  try {
-    const currentLocation = new URL(window.location.href);
-    const cslpButtonQueryValue = currentLocation.searchParams.get("cslp-buttons");
-    if (cslpButtonQueryValue !== null && editButton.includeByQueryParameter !== false)
-      return cslpButtonQueryValue === "false" ? false : true;
-  } catch (error) {
-    PublicLogger.error(error);
-  }
-  if (inIframe() && editButton.exclude?.find(
-    (exclude) => exclude === "insideLivePreviewPortal"
-  )) {
-    return false;
-  } else if (inIframe()) {
-    return true;
-  }
-  if (editButton.exclude?.find(
-    (exclude) => exclude === "outsideLivePreviewPortal"
-  )) {
-    return false;
-  }
-  return true;
-}
-function getEditButtonPosition(currentHoveredElement, defaultPosition) {
-  if (!currentHoveredElement)
-    return { upperBoundOfTooltip: 0, leftBoundOfTooltip: 0 };
-  const cslpButtonPosition = currentHoveredElement.getAttribute(
-    "data-cslp-button-position"
-  );
-  if (cslpButtonPosition) {
-    return calculateEditButtonPosition(
-      currentHoveredElement,
-      cslpButtonPosition
-    );
-  }
-  return calculateEditButtonPosition(
-    currentHoveredElement,
-    defaultPosition || "top"
-  );
-}
-function calculateEditButtonPosition(currentHoveredElement, cslpButtonPosition) {
-  const editButtonPosition = {
-    upperBoundOfTooltip: 0,
-    leftBoundOfTooltip: 0
-  };
-  const currentRectOfElement = currentHoveredElement.getBoundingClientRect();
-  try {
-    const buttonMeasurementValues = {
-      width: 72,
-      halfWidth: 36,
-      height: 40,
-      basicMargin: 5,
-      widthWithMargin: 77
-    };
-    switch (cslpButtonPosition) {
-      case "top-center":
-        editButtonPosition.upperBoundOfTooltip = currentRectOfElement.top - buttonMeasurementValues.height;
-        editButtonPosition.leftBoundOfTooltip = currentRectOfElement.width / 2 - buttonMeasurementValues.halfWidth + currentRectOfElement.left;
-        break;
-      case "top-right":
-        editButtonPosition.upperBoundOfTooltip = currentRectOfElement.top - buttonMeasurementValues.height;
-        editButtonPosition.leftBoundOfTooltip = currentRectOfElement.right - buttonMeasurementValues.width;
-        break;
-      case "right":
-        editButtonPosition.upperBoundOfTooltip = currentRectOfElement.top - buttonMeasurementValues.basicMargin;
-        editButtonPosition.leftBoundOfTooltip = currentRectOfElement.right + buttonMeasurementValues.basicMargin;
-        break;
-      case "bottom":
-        editButtonPosition.upperBoundOfTooltip = currentRectOfElement.bottom + buttonMeasurementValues.basicMargin;
-        editButtonPosition.leftBoundOfTooltip = currentRectOfElement.left - buttonMeasurementValues.basicMargin;
-        break;
-      case "bottom-left":
-        editButtonPosition.upperBoundOfTooltip = currentRectOfElement.bottom + buttonMeasurementValues.basicMargin;
-        editButtonPosition.leftBoundOfTooltip = currentRectOfElement.left - buttonMeasurementValues.basicMargin;
-        break;
-      case "bottom-center":
-        editButtonPosition.upperBoundOfTooltip = currentRectOfElement.bottom + buttonMeasurementValues.basicMargin;
-        editButtonPosition.leftBoundOfTooltip = currentRectOfElement.width / 2 - buttonMeasurementValues.halfWidth + currentRectOfElement.left;
-        break;
-      case "bottom-right":
-        editButtonPosition.upperBoundOfTooltip = currentRectOfElement.bottom + buttonMeasurementValues.basicMargin;
-        editButtonPosition.leftBoundOfTooltip = currentRectOfElement.right - buttonMeasurementValues.width;
-        break;
-      case "left":
-        editButtonPosition.upperBoundOfTooltip = currentRectOfElement.top - buttonMeasurementValues.basicMargin;
-        editButtonPosition.leftBoundOfTooltip = currentRectOfElement.left - buttonMeasurementValues.widthWithMargin;
-        break;
-      default:
-        editButtonPosition.upperBoundOfTooltip = currentRectOfElement.top - buttonMeasurementValues.height;
-        editButtonPosition.leftBoundOfTooltip = currentRectOfElement.left - buttonMeasurementValues.basicMargin;
-        break;
+function addParamsToUrl() {
+  window.addEventListener("click", (event) => {
+    const target = event.target;
+    const targetHref = target.href;
+    const docOrigin = document.location.origin;
+    if (targetHref && targetHref.includes(docOrigin) && !targetHref.includes("live_preview")) {
+      const newUrl = addLivePreviewQueryTags(target.href);
+      event.target.href = newUrl || target.href;
     }
-    return editButtonPosition;
-  } catch (error) {
-    PublicLogger.error(error);
-    return editButtonPosition;
+  });
+}
+function isOpeningInTimeline() {
+  if (hasWindow()) {
+    const urlParams = new URLSearchParams(window.location.search);
+    const previewTimestamp = urlParams.get("preview_timestamp");
+    return !!previewTimestamp;
   }
+  return false;
 }
 export {
   addLivePreviewQueryTags,
-  createMultipleEditButton,
-  createSingularEditButton,
-  getEditButtonPosition,
+  addParamsToUrl,
   hasWindow,
-  shouldRenderEditButton,
-  tooltipMultipleInnerHtml,
-  tooltipSingularInnerHtml
+  isOpeningInTimeline
 };
 //# sourceMappingURL=index.js.map

package/dist/modern/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/index.ts"],"sourcesContent":["import { livePreviewStyles } from \"../styles/live_preview\";\nimport { PublicLogger } from \"./public-logger\";\nimport { IConfigEditButton, IEditButtonPosition } from \"./types\";\n\nexport function hasWindow(): boolean {\n    return typeof window !== \"undefined\";\n}\n\nexport const tooltipSingularInnerHtml = `<div class=\"singular edit-button\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M8.1 3.5L0.3 11.3C0.1 11.5 0 11.7 0 12V15C0 15.6 0.4 16 1 16H4C4.3 16 4.5 15.9 4.7 15.7L12.5 7.9L8.1 3.5Z\" fill=\"#718096\"></path>\n      <path d=\"M15.7 3.3L12.7 0.3C12.3 -0.1 11.7 -0.1 11.3 0.3L9.5 2.1L13.9 6.5L15.7 4.7C16.1 4.3 16.1 3.7 15.7 3.3Z\" fill=\"#718096\"></path>\n    </svg>Edit\n  </div>`;\n\nexport const tooltipMultipleInnerHtml = `<div class=\"edit-button\" title=\"edit\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M8.1 3.5L0.3 11.3C0.1 11.5 0 11.7 0 12V15C0 15.6 0.4 16 1 16H4C4.3 16 4.5 15.9 4.7 15.7L12.5 7.9L8.1 3.5Z\" fill=\"#718096\"></path>\n      <path d=\"M15.7 3.3L12.7 0.3C12.3 -0.1 11.7 -0.1 11.3 0.3L9.5 2.1L13.9 6.5L15.7 4.7C16.1 4.3 16.1 3.7 15.7 3.3Z\" fill=\"#718096\"></path>\n    </svg>\n  </div>\n  <div title=\"click element\" class=\"external-link-button\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M2.66654 2.66758H13.3332V13.3342H6.66654V16.0009H13.3332C14.0405 16.0009 14.7187 15.72 15.2188 15.2199C15.7189 14.7198 15.9999 14.0415 15.9999 13.3342V2.66758C15.9999 1.96034 15.7189 1.28206 15.2188 0.781964C14.7187 0.281867 14.0405 0.000915527 13.3332 0.000915527H2.66654C1.9593 0.000915527 1.28102 0.281867 0.780927 0.781964C0.280829 1.28206 -0.00012207 1.96034 -0.00012207 2.66758V9.33425H2.66654V2.66758Z\" fill=\"#718096\" />\n      <path d=\"M6.94263 7.05734L0.999958 13L2.88529 14.8853L8.82796 8.94267L10.8853 11V5.00001H4.88529L6.94263 7.05734Z\" fill=\"#718096\" />\n    </svg>\n  </div>`;\n\nexport const createSingularEditButton = (\n    editCallback: (e: MouseEvent) => void\n): HTMLDivElement => {\n    const singularEditButton = document.createElement(\"div\");\n    singularEditButton.classList.add(\"cslp-tooltip-child\", \"singular\");\n    singularEditButton.setAttribute(\n        \"data-test-id\",\n        \"cslp-singular-edit-button\"\n    );\n    singularEditButton.innerHTML = `<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M8.1 3.5L0.3 11.3C0.1 11.5 0 11.7 0 12V15C0 15.6 0.4 16 1 16H4C4.3 16 4.5 15.9 4.7 15.7L12.5 7.9L8.1 3.5Z\" fill=\"#718096\"></path>\n      <path d=\"M15.7 3.3L12.7 0.3C12.3 -0.1 11.7 -0.1 11.3 0.3L9.5 2.1L13.9 6.5L15.7 4.7C16.1 4.3 16.1 3.7 15.7 3.3Z\" fill=\"#718096\"></path>\n    </svg>Edit`;\n\n    singularEditButton.addEventListener(\"click\", editCallback);\n\n    return singularEditButton;\n};\n\nexport const createMultipleEditButton = (\n    editCallback: (e: MouseEvent) => void,\n    linkCallback: (e: MouseEvent) => void\n): HTMLDivElement => {\n    const multipleEditButton = document.createElement(\"div\");\n    multipleEditButton.classList.add(\"cslp-tooltip-child\");\n    multipleEditButton.setAttribute(\"data-title\", \"Edit\");\n    multipleEditButton.setAttribute(\n        \"data-test-id\",\n        \"cslp-multiple-edit-button\"\n    );\n    multipleEditButton.innerHTML = ` <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M8.1 3.5L0.3 11.3C0.1 11.5 0 11.7 0 12V15C0 15.6 0.4 16 1 16H4C4.3 16 4.5 15.9 4.7 15.7L12.5 7.9L8.1 3.5Z\" fill=\"#718096\"></path>\n      <path d=\"M15.7 3.3L12.7 0.3C12.3 -0.1 11.7 -0.1 11.3 0.3L9.5 2.1L13.9 6.5L15.7 4.7C16.1 4.3 16.1 3.7 15.7 3.3Z\" fill=\"#718096\"></path>\n    </svg>`;\n\n    multipleEditButton.addEventListener(\"click\", editCallback);\n\n    const multipleExternalLinkButton = document.createElement(\"div\");\n    multipleExternalLinkButton.classList.add(\"cslp-tooltip-child\");\n    multipleExternalLinkButton.setAttribute(\"data-title\", \"Go to link\");\n    multipleExternalLinkButton.setAttribute(\n        \"data-test-id\",\n        \"cslp-multiple-external-link-button\"\n    );\n    multipleExternalLinkButton.innerHTML = ` <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M2.66654 2.66758H13.3332V13.3342H6.66654V16.0009H13.3332C14.0405 16.0009 14.7187 15.72 15.2188 15.2199C15.7189 14.7198 15.9999 14.0415 15.9999 13.3342V2.66758C15.9999 1.96034 15.7189 1.28206 15.2188 0.781964C14.7187 0.281867 14.0405 0.000915527 13.3332 0.000915527H2.66654C1.9593 0.000915527 1.28102 0.281867 0.780927 0.781964C0.280829 1.28206 -0.00012207 1.96034 -0.00012207 2.66758V9.33425H2.66654V2.66758Z\" fill=\"#718096\" />\n      <path d=\"M6.94263 7.05734L0.999958 13L2.88529 14.8853L8.82796 8.94267L10.8853 11V5.00001H4.88529L6.94263 7.05734Z\" fill=\"#718096\" />\n    </svg>`;\n\n    multipleExternalLinkButton.addEventListener(\"click\", linkCallback);\n\n    const multipleEditFragment = document.createDocumentFragment();\n    multipleEditFragment.appendChild(multipleEditButton);\n    multipleEditFragment.appendChild(multipleExternalLinkButton);\n\n    const multipleDiv = document.createElement(\"div\");\n    multipleDiv.appendChild(multipleEditFragment);\n    multipleDiv.classList.add(livePreviewStyles()[\"multiple\"]);\n\n    return multipleDiv;\n};\n\nexport function addLivePreviewQueryTags(link: string): string {\n    try {\n        const docUrl: URL = new URL(document.location.href);\n        const newUrl: URL = new URL(link);\n        const livePreviewHash: string | null =\n            docUrl.searchParams.get(\"live_preview\");\n        const ctUid: string | null =\n            docUrl.searchParams.get(\"content_type_uid\");\n        const entryUid: string | null = docUrl.searchParams.get(\"entry_uid\");\n        if (livePreviewHash && ctUid && entryUid) {\n            newUrl.searchParams.set(\"live_preview\", livePreviewHash);\n            newUrl.searchParams.set(\"content_type_uid\", ctUid);\n            newUrl.searchParams.set(\"entry_uid\", entryUid);\n        }\n        return newUrl.href;\n    } catch (error) {\n        PublicLogger.error(\"Error while adding live preview to URL\");\n        return link;\n    }\n}\n\nfunction inIframe() {\n    return window.location !== window.parent.location;\n}\n\nexport function shouldRenderEditButton(editButton: IConfigEditButton): boolean {\n    if (!editButton.enable) {\n        if (editButton.enable === undefined)\n            PublicLogger.error(\n                \"enable key is required inside editButton object\"\n            );\n        return false;\n    }\n\n    // return boolean in case of cslp-buttons query added in url\n    try {\n        const currentLocation = new URL(window.location.href);\n        const cslpButtonQueryValue =\n            currentLocation.searchParams.get(\"cslp-buttons\");\n        if (\n            cslpButtonQueryValue !== null &&\n            editButton.includeByQueryParameter !== false\n        )\n            return cslpButtonQueryValue === \"false\" ? false : true;\n    } catch (error) {\n        PublicLogger.error(error);\n    }\n\n    // case if inside live preview\n    if (\n        inIframe() &&\n        editButton.exclude?.find(\n            (exclude) => exclude === \"insideLivePreviewPortal\"\n        )\n    ) {\n        return false;\n    } else if (inIframe()) {\n        return true;\n    }\n\n    // case outside live preview\n    if (\n        editButton.exclude?.find(\n            (exclude) => exclude === \"outsideLivePreviewPortal\"\n        )\n    ) {\n        return false;\n    }\n\n    // Priority list => 1. cslpEditButton query value 2.  Inside live preview  3. renderCslpButtonByDefault value selected by user\n    return true;\n}\n\nexport function getEditButtonPosition(\n    currentHoveredElement: HTMLElement | null,\n    defaultPosition: string | undefined\n): IEditButtonPosition {\n    if (!currentHoveredElement)\n        return { upperBoundOfTooltip: 0, leftBoundOfTooltip: 0 };\n\n    const cslpButtonPosition = currentHoveredElement.getAttribute(\n        \"data-cslp-button-position\"\n    );\n    if (cslpButtonPosition) {\n        return calculateEditButtonPosition(\n            currentHoveredElement,\n            cslpButtonPosition\n        );\n    }\n\n    // NOTE: position \"top\" and \"top-left\" will be the position of edit button if no default position passed in config\n    return calculateEditButtonPosition(\n        currentHoveredElement,\n        defaultPosition || \"top\"\n    );\n}\n\nfunction calculateEditButtonPosition(\n    currentHoveredElement: HTMLElement,\n    cslpButtonPosition: string\n): IEditButtonPosition {\n    const editButtonPosition: IEditButtonPosition = {\n        upperBoundOfTooltip: 0,\n        leftBoundOfTooltip: 0,\n    };\n    const currentRectOfElement = currentHoveredElement.getBoundingClientRect();\n    try {\n        const buttonMeasurementValues = {\n            width: 72,\n            halfWidth: 36,\n            height: 40,\n            basicMargin: 5,\n            widthWithMargin: 77,\n        };\n\n        switch (cslpButtonPosition) {\n            case \"top-center\":\n                editButtonPosition.upperBoundOfTooltip =\n                    currentRectOfElement.top - buttonMeasurementValues.height;\n                editButtonPosition.leftBoundOfTooltip =\n                    currentRectOfElement.width / 2 -\n                    buttonMeasurementValues.halfWidth +\n                    currentRectOfElement.left;\n                break;\n            case \"top-right\":\n                editButtonPosition.upperBoundOfTooltip =\n                    currentRectOfElement.top - buttonMeasurementValues.height;\n                editButtonPosition.leftBoundOfTooltip =\n                    currentRectOfElement.right - buttonMeasurementValues.width;\n                break;\n            case \"right\":\n                editButtonPosition.upperBoundOfTooltip =\n                    currentRectOfElement.top -\n                    buttonMeasurementValues.basicMargin;\n                editButtonPosition.leftBoundOfTooltip =\n                    currentRectOfElement.right +\n                    buttonMeasurementValues.basicMargin;\n                break;\n            case \"bottom\":\n                editButtonPosition.upperBoundOfTooltip =\n                    currentRectOfElement.bottom +\n                    buttonMeasurementValues.basicMargin;\n                editButtonPosition.leftBoundOfTooltip =\n                    currentRectOfElement.left -\n                    buttonMeasurementValues.basicMargin;\n                break;\n            case \"bottom-left\":\n                editButtonPosition.upperBoundOfTooltip =\n                    currentRectOfElement.bottom +\n                    buttonMeasurementValues.basicMargin;\n                editButtonPosition.leftBoundOfTooltip =\n                    currentRectOfElement.left -\n                    buttonMeasurementValues.basicMargin;\n                break;\n            case \"bottom-center\":\n                editButtonPosition.upperBoundOfTooltip =\n                    currentRectOfElement.bottom +\n                    buttonMeasurementValues.basicMargin;\n                editButtonPosition.leftBoundOfTooltip =\n                    currentRectOfElement.width / 2 -\n                    buttonMeasurementValues.halfWidth +\n                    currentRectOfElement.left;\n                break;\n            case \"bottom-right\":\n                editButtonPosition.upperBoundOfTooltip =\n                    currentRectOfElement.bottom +\n                    buttonMeasurementValues.basicMargin;\n                editButtonPosition.leftBoundOfTooltip =\n                    currentRectOfElement.right - buttonMeasurementValues.width;\n                break;\n            case \"left\":\n                editButtonPosition.upperBoundOfTooltip =\n                    currentRectOfElement.top -\n                    buttonMeasurementValues.basicMargin;\n                editButtonPosition.leftBoundOfTooltip =\n                    currentRectOfElement.left -\n                    buttonMeasurementValues.widthWithMargin;\n                break;\n            // default position => top, top-left or any other string\n            default:\n                editButtonPosition.upperBoundOfTooltip =\n                    currentRectOfElement.top - buttonMeasurementValues.height;\n                editButtonPosition.leftBoundOfTooltip =\n                    currentRectOfElement.left -\n                    buttonMeasurementValues.basicMargin;\n                break;\n        }\n        return editButtonPosition;\n    } catch (error) {\n        PublicLogger.error(error);\n        return editButtonPosition;\n    }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/utils/index.ts"],"sourcesContent":["import { PublicLogger } from \"../logger/logger\";\n\nexport function hasWindow(): boolean {\n    return typeof window !== \"undefined\";\n}\nexport function addLivePreviewQueryTags(link: string): string {\n    try {\n        const docUrl: URL = new URL(document.location.href);\n        const newUrl: URL = new URL(link);\n        const livePreviewHash: string | null =\n            docUrl.searchParams.get(\"live_preview\");\n        const ctUid: string | null =\n            docUrl.searchParams.get(\"content_type_uid\");\n        const entryUid: string | null = docUrl.searchParams.get(\"entry_uid\");\n        if (livePreviewHash && ctUid && entryUid) {\n            newUrl.searchParams.set(\"live_preview\", livePreviewHash);\n            newUrl.searchParams.set(\"content_type_uid\", ctUid);\n            newUrl.searchParams.set(\"entry_uid\", entryUid);\n        }\n        return newUrl.href;\n    } catch (error) {\n        PublicLogger.error(\"Error while adding live preview to URL\");\n        return link;\n    }\n}\nexport function addParamsToUrl() {\n    // Setting the query params to all the click events related to current domain\n    window.addEventListener(\"click\", (event: any) => {\n        const target: any = event.target;\n        const targetHref: string | any = target.href;\n        const docOrigin: string = document.location.origin;\n        if (\n            targetHref &&\n            targetHref.includes(docOrigin) &&\n            !targetHref.includes(\"live_preview\")\n        ) {\n            const newUrl = addLivePreviewQueryTags(target.href);\n            event.target.href = newUrl || target.href;\n        }\n    });\n}\nexport function isOpeningInTimeline(): boolean {\n    if (hasWindow()) {\n        const urlParams = new URLSearchParams(window.location.search);\n        const previewTimestamp = urlParams.get(\"preview_timestamp\");\n        return !!previewTimestamp;\n    }\n    return false;\n}"],"mappings":";;;AAAA,SAAS,oBAAoB;AAEtB,SAAS,YAAqB;AACjC,SAAO,OAAO,WAAW;AAC7B;AACO,SAAS,wBAAwB,MAAsB;AAC1D,MAAI;AACA,UAAM,SAAc,IAAI,IAAI,SAAS,SAAS,IAAI;AAClD,UAAM,SAAc,IAAI,IAAI,IAAI;AAChC,UAAM,kBACF,OAAO,aAAa,IAAI,cAAc;AAC1C,UAAM,QACF,OAAO,aAAa,IAAI,kBAAkB;AAC9C,UAAM,WAA0B,OAAO,aAAa,IAAI,WAAW;AACnE,QAAI,mBAAmB,SAAS,UAAU;AACtC,aAAO,aAAa,IAAI,gBAAgB,eAAe;AACvD,aAAO,aAAa,IAAI,oBAAoB,KAAK;AACjD,aAAO,aAAa,IAAI,aAAa,QAAQ;AAAA,IACjD;AACA,WAAO,OAAO;AAAA,EAClB,SAAS,OAAO;AACZ,iBAAa,MAAM,wCAAwC;AAC3D,WAAO;AAAA,EACX;AACJ;AACO,SAAS,iBAAiB;AAE7B,SAAO,iBAAiB,SAAS,CAAC,UAAe;AAC7C,UAAM,SAAc,MAAM;AAC1B,UAAM,aAA2B,OAAO;AACxC,UAAM,YAAoB,SAAS,SAAS;AAC5C,QACI,cACA,WAAW,SAAS,SAAS,KAC7B,CAAC,WAAW,SAAS,cAAc,GACrC;AACE,YAAM,SAAS,wBAAwB,OAAO,IAAI;AAClD,YAAM,OAAO,OAAO,UAAU,OAAO;AAAA,IACzC;AAAA,EACJ,CAAC;AACL;AACO,SAAS,sBAA+B;AAC3C,MAAI,UAAU,GAAG;AACb,UAAM,YAAY,IAAI,gBAAgB,OAAO,SAAS,MAAM;AAC5D,UAAM,mBAAmB,UAAU,IAAI,mBAAmB;AAC1D,WAAO,CAAC,CAAC;AAAA,EACb;AACA,SAAO;AACX;","names":[]}

package/dist/modern/visualBuilder/components/CommentIcon.cjs

@@ -0,0 +1,134 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/visualBuilder/components/CommentIcon.tsx
+var CommentIcon_exports = {};
+__export(CommentIcon_exports, {
+  default: () => CommentIcon
+});
+module.exports = __toCommonJS(CommentIcon_exports);
+var import_compat = require("preact/compat");
+var import_visualBuilderPostMessage = __toESM(require("../utils/visualBuilderPostMessage.cjs"), 1);
+var import_postMessage = require("../utils/types/postMessage.types.cjs");
+var import_icons = require("./icons/index.cjs");
+var import_getDiscussionIdByFieldMetaData = require("../utils/getDiscussionIdByFieldMetaData.cjs");
+var import_loading = require("./icons/loading.cjs");
+var import_classnames = __toESM(require("classnames"), 1);
+var import_visualBuilder = require("../visualBuilder.style.cjs");
+var import_jsx_runtime = require("preact/jsx-runtime");
+function CommentIcon(props) {
+  const { fieldMetadata, fieldSchema, invertTooltipPosition = false } = props;
+  const [activeDiscussion, setActiveDiscussion] = (0, import_compat.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_compat.useState)(false);
+  (0, import_compat.useEffect)(() => {
+    const fetchDiscussionId = async () => {
+      try {
+        setIsLoading(true);
+        const discussion = await (0, import_getDiscussionIdByFieldMetaData.getDiscussionIdByFieldMetaData)({
+          fieldMetadata,
+          fieldSchema
+        });
+        setActiveDiscussion(discussion);
+      } catch (error) {
+        console.error("Failed to fetch discussion ID:", error);
+        setActiveDiscussion({ uid: "new" });
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchDiscussionId();
+  }, [fieldMetadata]);
+  (0, import_compat.useEffect)(() => {
+    const handleReceiveDiscussionId = (response) => {
+      const { entryId, discussion, contentTypeId, fieldPath } = response.data;
+      if (fieldMetadata.entry_uid === entryId && fieldMetadata.content_type_uid === contentTypeId && fieldMetadata.fieldPathWithIndex === fieldPath) {
+        setActiveDiscussion(discussion ?? { uid: "new" });
+      }
+    };
+    const recieveDiscussionIDEvent = import_visualBuilderPostMessage.default?.on(
+      import_postMessage.VisualBuilderPostMessageEvents.UPDATE_DISCUSSION_ID,
+      handleReceiveDiscussionId
+    );
+    return () => {
+      recieveDiscussionIDEvent?.unregister();
+    };
+  }, []);
+  const handleCommentModal = async () => {
+    import_visualBuilderPostMessage.default?.send(
+      import_postMessage.VisualBuilderPostMessageEvents.OPEN_FIELD_COMMENT_MODAL,
+      {
+        fieldMetadata,
+        discussion: activeDiscussion,
+        fieldSchema
+      }
+    );
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__comment-button-loading",
+        className: (0, import_classnames.default)(
+          "visual-builder__button visual-builder__button--secondary visual-builder__button--comment-loader",
+          (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__button"],
+          (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__button--secondary"],
+          (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__button--comment-loader"]
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loading.LoadingIcon, {})
+      }
+    );
+  }
+  if (!activeDiscussion?.uid) {
+    return;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__comment-button",
+      className: (0, import_classnames.default)(
+        "visual-builder__button visual-builder__button--secondary",
+        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__button"],
+        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__button--secondary"],
+        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__tooltip"],
+        {
+          "visual-builder__tooltip--bottom": invertTooltipPosition,
+          [(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__tooltip--bottom"]]: invertTooltipPosition
+        }
+      ),
+      "data-tooltip": "Add comment",
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        handleCommentModal();
+      },
+      children: activeDiscussion?.uid === "new" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.AddCommentIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ReadCommentIcon, {})
+    }
+  );
+}
+//# sourceMappingURL=CommentIcon.cjs.map

package/dist/modern/visualBuilder/components/CommentIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/components/CommentIcon.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"preact/compat\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { AddCommentIcon, ReadCommentIcon } from \"./icons\";\nimport { getDiscussionIdByFieldMetaData } from \"../utils/getDiscussionIdByFieldMetaData\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { LoadingIcon } from \"./icons/loading\";\nimport classNames from \"classnames\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\n\ninterface CommentIconProps {\n    fieldMetadata: CslpData;\n    fieldSchema: ISchemaFieldMap;\n    invertTooltipPosition: boolean;\n}\n\ninterface RecieveDiscussionEventData {\n    data: {\n        discussion: IActiveDiscussion;\n        fieldUID: string;\n        fieldPath: string;\n        contentTypeId: string;\n        entryId: string;\n    };\n}\n\ninterface Field {\n    uid: string;\n    path: string;\n    og_path: string;\n}\n\nexport interface IActiveDiscussion {\n  uid: string;\n  title?: string;\n  field?: Field;\n}\n\n\nexport default function CommentIcon(props: CommentIconProps) {\n    const { fieldMetadata, fieldSchema, invertTooltipPosition = false } = props;\n    const [activeDiscussion, setActiveDiscussion] =\n        useState<IActiveDiscussion | null>(null);\n    const [isLoading, setIsLoading] = useState<boolean>(false);\n\n    // Fetch discussion data based on field metadata\n    useEffect(() => {\n        const fetchDiscussionId = async () => {\n            try {\n                setIsLoading(true);\n                const discussion = await getDiscussionIdByFieldMetaData({\n                    fieldMetadata,\n                    fieldSchema,\n                });\n                setActiveDiscussion(discussion);\n            } catch (error) {\n                console.error(\"Failed to fetch discussion ID:\", error);\n                setActiveDiscussion({uid:\"new\"});\n            } finally {\n                setIsLoading(false);\n            }\n        };\n\n        fetchDiscussionId();\n    }, [fieldMetadata]);\n\n    // Set up message listener for receiving discussion ID\n    useEffect(() => {\n        const handleReceiveDiscussionId = (\n            response: RecieveDiscussionEventData\n        ) => {\n            const { entryId, discussion, contentTypeId, fieldPath } =\n                response.data;\n            if (\n                fieldMetadata.entry_uid === entryId &&\n                fieldMetadata.content_type_uid === contentTypeId &&\n                fieldMetadata.fieldPathWithIndex === fieldPath\n            ) {\n                setActiveDiscussion(discussion ?? {uid:\"new\"})\n            }\n        };\n\n        const recieveDiscussionIDEvent = visualBuilderPostMessage?.on(\n            VisualBuilderPostMessageEvents.UPDATE_DISCUSSION_ID,\n            handleReceiveDiscussionId\n        );\n\n        // Cleanup: Remove message listener when the component unmounts\n        return () => {\n            recieveDiscussionIDEvent?.unregister();\n        };\n    }, []);\n\n    // Handles opening the comment modal with the relevant field metadata and discussion data\n    const handleCommentModal = async () => {\n        visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.OPEN_FIELD_COMMENT_MODAL,\n            {\n                fieldMetadata,\n                discussion:activeDiscussion,\n                fieldSchema,\n            }\n        );\n    };\n\n    if (isLoading) {\n        return (\n            <button\n                data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__comment-button-loading\"\n                className={classNames(\n                    \"visual-builder__button visual-builder__button--secondary visual-builder__button--comment-loader\",\n                    visualBuilderStyles()[\"visual-builder__button\"],\n                    visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                    visualBuilderStyles()[\n                        \"visual-builder__button--comment-loader\"\n                    ]\n                )}\n            >\n                <LoadingIcon />\n            </button>\n        );\n    }\n\n    if (!activeDiscussion?.uid) {\n        return;\n    }\n\n    return (\n        <button\n            data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__comment-button\"\n            className={classNames(\n                \"visual-builder__button visual-builder__button--secondary\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Add comment\"}\n            onClick={(e) => {\n                e.preventDefault();\n                e.stopPropagation();\n                handleCommentModal();\n            }}\n        >\n            {activeDiscussion?.uid === \"new\" ? <AddCommentIcon /> : <ReadCommentIcon />}\n        </button>\n    );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA2C;AAE3C,sCAAqC;AACrC,yBAA+C;AAC/C,mBAAgD;AAChD,4CAA+C;AAE/C,qBAA4B;AAC5B,wBAAuB;AACvB,2BAAoC;AA8GpB;AA/ED,SAAR,YAA6B,OAAyB;AACzD,QAAM,EAAE,eAAe,aAAa,wBAAwB,MAAM,IAAI;AACtE,QAAM,CAAC,kBAAkB,mBAAmB,QACxC,wBAAmC,IAAI;AAC3C,QAAM,CAAC,WAAW,YAAY,QAAI,wBAAkB,KAAK;AAGzD,+BAAU,MAAM;AACZ,UAAM,oBAAoB,YAAY;AAClC,UAAI;AACA,qBAAa,IAAI;AACjB,cAAM,aAAa,UAAM,sEAA+B;AAAA,UACpD;AAAA,UACA;AAAA,QACJ,CAAC;AACD,4BAAoB,UAAU;AAAA,MAClC,SAAS,OAAO;AACZ,gBAAQ,MAAM,kCAAkC,KAAK;AACrD,4BAAoB,EAAC,KAAI,MAAK,CAAC;AAAA,MACnC,UAAE;AACE,qBAAa,KAAK;AAAA,MACtB;AAAA,IACJ;AAEA,sBAAkB;AAAA,EACtB,GAAG,CAAC,aAAa,CAAC;AAGlB,+BAAU,MAAM;AACZ,UAAM,4BAA4B,CAC9B,aACC;AACD,YAAM,EAAE,SAAS,YAAY,eAAe,UAAU,IAClD,SAAS;AACb,UACI,cAAc,cAAc,WAC5B,cAAc,qBAAqB,iBACnC,cAAc,uBAAuB,WACvC;AACE,4BAAoB,cAAc,EAAC,KAAI,MAAK,CAAC;AAAA,MACjD;AAAA,IACJ;AAEA,UAAM,2BAA2B,gCAAAA,SAA0B;AAAA,MACvD,kDAA+B;AAAA,MAC/B;AAAA,IACJ;AAGA,WAAO,MAAM;AACT,gCAA0B,WAAW;AAAA,IACzC;AAAA,EACJ,GAAG,CAAC,CAAC;AAGL,QAAM,qBAAqB,YAAY;AACnC,oCAAAA,SAA0B;AAAA,MACtB,kDAA+B;AAAA,MAC/B;AAAA,QACI;AAAA,QACA,YAAW;AAAA,QACX;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ;AAEA,MAAI,WAAW;AACX,WACI;AAAA,MAAC;AAAA;AAAA,QACG,eAAY;AAAA,QACZ,eAAW,kBAAAC;AAAA,UACP;AAAA,cACA,0CAAoB,EAAE,wBAAwB;AAAA,cAC9C,0CAAoB,EAAE,mCAAmC;AAAA,cACzD,0CAAoB,EAChB,wCACJ;AAAA,QACJ;AAAA,QAEA,sDAAC,8BAAY;AAAA;AAAA,IACjB;AAAA,EAER;AAEA,MAAI,CAAC,kBAAkB,KAAK;AACxB;AAAA,EACJ;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAY;AAAA,MACZ,eAAW,kBAAAA;AAAA,QACP;AAAA,YACA,0CAAoB,EAAE,wBAAwB;AAAA,YAC9C,0CAAoB,EAAE,mCAAmC;AAAA,YACzD,0CAAoB,EAAE,yBAAyB;AAAA,QAC/C;AAAA,UACI,mCAAmC;AAAA,UACnC,KAAC,0CAAoB,EAAE,iCAAiC,CAAC,GACrD;AAAA,QACR;AAAA,MACJ;AAAA,MACA,gBAAc;AAAA,MACd,SAAS,CAAC,MAAM;AACZ,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,2BAAmB;AAAA,MACvB;AAAA,MAEC,4BAAkB,QAAQ,QAAQ,4CAAC,+BAAe,IAAK,4CAAC,gCAAgB;AAAA;AAAA,EAC7E;AAER;","names":["visualBuilderPostMessage","classNames"]}

package/dist/modern/visualBuilder/components/CommentIcon.d.cts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CslpData } from '../../cslp/types/cslp.types.cjs';
+import { ISchemaFieldMap } from '../utils/types/index.types.cjs';
+import '../../cms/types/contentTypeSchema.types.cjs';
+
+interface CommentIconProps {
+    fieldMetadata: CslpData;
+    fieldSchema: ISchemaFieldMap;
+    invertTooltipPosition: boolean;
+}
+interface Field {
+    uid: string;
+    path: string;
+    og_path: string;
+}
+interface IActiveDiscussion {
+    uid: string;
+    title?: string;
+    field?: Field;
+}
+declare function CommentIcon(props: CommentIconProps): react_jsx_runtime.JSX.Element | undefined;
+
+export { type IActiveDiscussion, CommentIcon as default };

package/dist/modern/visualBuilder/components/CommentIcon.d.ts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CslpData } from '../../cslp/types/cslp.types.js';
+import { ISchemaFieldMap } from '../utils/types/index.types.js';
+import '../../cms/types/contentTypeSchema.types.js';
+
+interface CommentIconProps {
+    fieldMetadata: CslpData;
+    fieldSchema: ISchemaFieldMap;
+    invertTooltipPosition: boolean;
+}
+interface Field {
+    uid: string;
+    path: string;
+    og_path: string;
+}
+interface IActiveDiscussion {
+    uid: string;
+    title?: string;
+    field?: Field;
+}
+declare function CommentIcon(props: CommentIconProps): react_jsx_runtime.JSX.Element | undefined;
+
+export { type IActiveDiscussion, CommentIcon as default };

package/dist/modern/visualBuilder/components/CommentIcon.js

@@ -0,0 +1,105 @@
+import "../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/components/CommentIcon.tsx
+import { useEffect, useState } from "preact/compat";
+import visualBuilderPostMessage from "../utils/visualBuilderPostMessage.js";
+import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types.js";
+import { AddCommentIcon, ReadCommentIcon } from "./icons/index.js";
+import { getDiscussionIdByFieldMetaData } from "../utils/getDiscussionIdByFieldMetaData.js";
+import { LoadingIcon } from "./icons/loading.js";
+import classNames from "classnames";
+import { visualBuilderStyles } from "../visualBuilder.style.js";
+import { jsx } from "preact/jsx-runtime";
+function CommentIcon(props) {
+  const { fieldMetadata, fieldSchema, invertTooltipPosition = false } = props;
+  const [activeDiscussion, setActiveDiscussion] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  useEffect(() => {
+    const fetchDiscussionId = async () => {
+      try {
+        setIsLoading(true);
+        const discussion = await getDiscussionIdByFieldMetaData({
+          fieldMetadata,
+          fieldSchema
+        });
+        setActiveDiscussion(discussion);
+      } catch (error) {
+        console.error("Failed to fetch discussion ID:", error);
+        setActiveDiscussion({ uid: "new" });
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchDiscussionId();
+  }, [fieldMetadata]);
+  useEffect(() => {
+    const handleReceiveDiscussionId = (response) => {
+      const { entryId, discussion, contentTypeId, fieldPath } = response.data;
+      if (fieldMetadata.entry_uid === entryId && fieldMetadata.content_type_uid === contentTypeId && fieldMetadata.fieldPathWithIndex === fieldPath) {
+        setActiveDiscussion(discussion ?? { uid: "new" });
+      }
+    };
+    const recieveDiscussionIDEvent = visualBuilderPostMessage?.on(
+      VisualBuilderPostMessageEvents.UPDATE_DISCUSSION_ID,
+      handleReceiveDiscussionId
+    );
+    return () => {
+      recieveDiscussionIDEvent?.unregister();
+    };
+  }, []);
+  const handleCommentModal = async () => {
+    visualBuilderPostMessage?.send(
+      VisualBuilderPostMessageEvents.OPEN_FIELD_COMMENT_MODAL,
+      {
+        fieldMetadata,
+        discussion: activeDiscussion,
+        fieldSchema
+      }
+    );
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__comment-button-loading",
+        className: classNames(
+          "visual-builder__button visual-builder__button--secondary visual-builder__button--comment-loader",
+          visualBuilderStyles()["visual-builder__button"],
+          visualBuilderStyles()["visual-builder__button--secondary"],
+          visualBuilderStyles()["visual-builder__button--comment-loader"]
+        ),
+        children: /* @__PURE__ */ jsx(LoadingIcon, {})
+      }
+    );
+  }
+  if (!activeDiscussion?.uid) {
+    return;
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__comment-button",
+      className: classNames(
+        "visual-builder__button visual-builder__button--secondary",
+        visualBuilderStyles()["visual-builder__button"],
+        visualBuilderStyles()["visual-builder__button--secondary"],
+        visualBuilderStyles()["visual-builder__tooltip"],
+        {
+          "visual-builder__tooltip--bottom": invertTooltipPosition,
+          [visualBuilderStyles()["visual-builder__tooltip--bottom"]]: invertTooltipPosition
+        }
+      ),
+      "data-tooltip": "Add comment",
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        handleCommentModal();
+      },
+      children: activeDiscussion?.uid === "new" ? /* @__PURE__ */ jsx(AddCommentIcon, {}) : /* @__PURE__ */ jsx(ReadCommentIcon, {})
+    }
+  );
+}
+export {
+  CommentIcon as default
+};
+//# sourceMappingURL=CommentIcon.js.map

package/dist/modern/visualBuilder/components/CommentIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/components/CommentIcon.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"preact/compat\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { AddCommentIcon, ReadCommentIcon } from \"./icons\";\nimport { getDiscussionIdByFieldMetaData } from \"../utils/getDiscussionIdByFieldMetaData\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { LoadingIcon } from \"./icons/loading\";\nimport classNames from \"classnames\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\n\ninterface CommentIconProps {\n    fieldMetadata: CslpData;\n    fieldSchema: ISchemaFieldMap;\n    invertTooltipPosition: boolean;\n}\n\ninterface RecieveDiscussionEventData {\n    data: {\n        discussion: IActiveDiscussion;\n        fieldUID: string;\n        fieldPath: string;\n        contentTypeId: string;\n        entryId: string;\n    };\n}\n\ninterface Field {\n    uid: string;\n    path: string;\n    og_path: string;\n}\n\nexport interface IActiveDiscussion {\n  uid: string;\n  title?: string;\n  field?: Field;\n}\n\n\nexport default function CommentIcon(props: CommentIconProps) {\n    const { fieldMetadata, fieldSchema, invertTooltipPosition = false } = props;\n    const [activeDiscussion, setActiveDiscussion] =\n        useState<IActiveDiscussion | null>(null);\n    const [isLoading, setIsLoading] = useState<boolean>(false);\n\n    // Fetch discussion data based on field metadata\n    useEffect(() => {\n        const fetchDiscussionId = async () => {\n            try {\n                setIsLoading(true);\n                const discussion = await getDiscussionIdByFieldMetaData({\n                    fieldMetadata,\n                    fieldSchema,\n                });\n                setActiveDiscussion(discussion);\n            } catch (error) {\n                console.error(\"Failed to fetch discussion ID:\", error);\n                setActiveDiscussion({uid:\"new\"});\n            } finally {\n                setIsLoading(false);\n            }\n        };\n\n        fetchDiscussionId();\n    }, [fieldMetadata]);\n\n    // Set up message listener for receiving discussion ID\n    useEffect(() => {\n        const handleReceiveDiscussionId = (\n            response: RecieveDiscussionEventData\n        ) => {\n            const { entryId, discussion, contentTypeId, fieldPath } =\n                response.data;\n            if (\n                fieldMetadata.entry_uid === entryId &&\n                fieldMetadata.content_type_uid === contentTypeId &&\n                fieldMetadata.fieldPathWithIndex === fieldPath\n            ) {\n                setActiveDiscussion(discussion ?? {uid:\"new\"})\n            }\n        };\n\n        const recieveDiscussionIDEvent = visualBuilderPostMessage?.on(\n            VisualBuilderPostMessageEvents.UPDATE_DISCUSSION_ID,\n            handleReceiveDiscussionId\n        );\n\n        // Cleanup: Remove message listener when the component unmounts\n        return () => {\n            recieveDiscussionIDEvent?.unregister();\n        };\n    }, []);\n\n    // Handles opening the comment modal with the relevant field metadata and discussion data\n    const handleCommentModal = async () => {\n        visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.OPEN_FIELD_COMMENT_MODAL,\n            {\n                fieldMetadata,\n                discussion:activeDiscussion,\n                fieldSchema,\n            }\n        );\n    };\n\n    if (isLoading) {\n        return (\n            <button\n                data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__comment-button-loading\"\n                className={classNames(\n                    \"visual-builder__button visual-builder__button--secondary visual-builder__button--comment-loader\",\n                    visualBuilderStyles()[\"visual-builder__button\"],\n                    visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                    visualBuilderStyles()[\n                        \"visual-builder__button--comment-loader\"\n                    ]\n                )}\n            >\n                <LoadingIcon />\n            </button>\n        );\n    }\n\n    if (!activeDiscussion?.uid) {\n        return;\n    }\n\n    return (\n        <button\n            data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__comment-button\"\n            className={classNames(\n                \"visual-builder__button visual-builder__button--secondary\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Add comment\"}\n            onClick={(e) => {\n                e.preventDefault();\n                e.stopPropagation();\n                handleCommentModal();\n            }}\n        >\n            {activeDiscussion?.uid === \"new\" ? <AddCommentIcon /> : <ReadCommentIcon />}\n        </button>\n    );\n}\n"],"mappings":";;;AAAA,SAAgB,WAAW,gBAAgB;AAE3C,OAAO,8BAA8B;AACrC,SAAS,sCAAsC;AAC/C,SAAS,gBAAgB,uBAAuB;AAChD,SAAS,sCAAsC;AAE/C,SAAS,mBAAmB;AAC5B,OAAO,gBAAgB;AACvB,SAAS,2BAA2B;AA8GpB;AA/ED,SAAR,YAA6B,OAAyB;AACzD,QAAM,EAAE,eAAe,aAAa,wBAAwB,MAAM,IAAI;AACtE,QAAM,CAAC,kBAAkB,mBAAmB,IACxC,SAAmC,IAAI;AAC3C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAkB,KAAK;AAGzD,YAAU,MAAM;AACZ,UAAM,oBAAoB,YAAY;AAClC,UAAI;AACA,qBAAa,IAAI;AACjB,cAAM,aAAa,MAAM,+BAA+B;AAAA,UACpD;AAAA,UACA;AAAA,QACJ,CAAC;AACD,4BAAoB,UAAU;AAAA,MAClC,SAAS,OAAO;AACZ,gBAAQ,MAAM,kCAAkC,KAAK;AACrD,4BAAoB,EAAC,KAAI,MAAK,CAAC;AAAA,MACnC,UAAE;AACE,qBAAa,KAAK;AAAA,MACtB;AAAA,IACJ;AAEA,sBAAkB;AAAA,EACtB,GAAG,CAAC,aAAa,CAAC;AAGlB,YAAU,MAAM;AACZ,UAAM,4BAA4B,CAC9B,aACC;AACD,YAAM,EAAE,SAAS,YAAY,eAAe,UAAU,IAClD,SAAS;AACb,UACI,cAAc,cAAc,WAC5B,cAAc,qBAAqB,iBACnC,cAAc,uBAAuB,WACvC;AACE,4BAAoB,cAAc,EAAC,KAAI,MAAK,CAAC;AAAA,MACjD;AAAA,IACJ;AAEA,UAAM,2BAA2B,0BAA0B;AAAA,MACvD,+BAA+B;AAAA,MAC/B;AAAA,IACJ;AAGA,WAAO,MAAM;AACT,gCAA0B,WAAW;AAAA,IACzC;AAAA,EACJ,GAAG,CAAC,CAAC;AAGL,QAAM,qBAAqB,YAAY;AACnC,8BAA0B;AAAA,MACtB,+BAA+B;AAAA,MAC/B;AAAA,QACI;AAAA,QACA,YAAW;AAAA,QACX;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ;AAEA,MAAI,WAAW;AACX,WACI;AAAA,MAAC;AAAA;AAAA,QACG,eAAY;AAAA,QACZ,WAAW;AAAA,UACP;AAAA,UACA,oBAAoB,EAAE,wBAAwB;AAAA,UAC9C,oBAAoB,EAAE,mCAAmC;AAAA,UACzD,oBAAoB,EAChB,wCACJ;AAAA,QACJ;AAAA,QAEA,8BAAC,eAAY;AAAA;AAAA,IACjB;AAAA,EAER;AAEA,MAAI,CAAC,kBAAkB,KAAK;AACxB;AAAA,EACJ;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAY;AAAA,MACZ,WAAW;AAAA,QACP;AAAA,QACA,oBAAoB,EAAE,wBAAwB;AAAA,QAC9C,oBAAoB,EAAE,mCAAmC;AAAA,QACzD,oBAAoB,EAAE,yBAAyB;AAAA,QAC/C;AAAA,UACI,mCAAmC;AAAA,UACnC,CAAC,oBAAoB,EAAE,iCAAiC,CAAC,GACrD;AAAA,QACR;AAAA,MACJ;AAAA,MACA,gBAAc;AAAA,MACd,SAAS,CAAC,MAAM;AACZ,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,2BAAmB;AAAA,MACvB;AAAA,MAEC,4BAAkB,QAAQ,QAAQ,oBAAC,kBAAe,IAAK,oBAAC,mBAAgB;AAAA;AAAA,EAC7E;AAER;","names":[]}