@contentstack/live-preview-utils 3.2.0-alpha.1 → 3.2.0

package/dist/modern/visualBuilder/generators/generateThread.d.cts

@@ -3,9 +3,11 @@ import { IThreadDTO, toggleCollabPopupEvent, MissingThreadsInfo, IThreadRenderSt
 declare function generateThread(payload: IThreadDTO | any, options?: {
     isNewThread?: boolean;
     updateConfig?: boolean;
+    hidden?: boolean;
 }): string | undefined;
 declare function updateCollabIconPosition(): void;
 declare function updatePopupPositions(): void;
+declare function updateSuggestionListPosition(): void;
 declare function calculatePopupPosition(button: HTMLElement, popup: HTMLElement): void;
 declare function removeAllCollabIcons(): void;
 declare function hideAllCollabIcons(): void;
@@ -22,4 +24,4 @@ declare function clearAllThreadStatus(): void;
 declare function processThreadsBatch(threads: IThreadDTO[]): Promise<string[]>;
 declare function filterUnrenderedThreads(threads: IThreadDTO[]): IThreadDTO[];
 
-export { HighlightThread, calculatePopupPosition, clearAllThreadStatus, clearThreadStatus, filterUnrenderedThreads, generateThread, handleEmptyThreads, handleMissingThreads, hideAllCollabIcons, isCollabThread, processThreadsBatch, removeAllCollabIcons, removeCollabIcon, showAllCollabIcons, threadRenderStatus, toggleCollabPopup, updateCollabIconPosition, updatePopupPositions };
+export { HighlightThread, calculatePopupPosition, clearAllThreadStatus, clearThreadStatus, filterUnrenderedThreads, generateThread, handleEmptyThreads, handleMissingThreads, hideAllCollabIcons, isCollabThread, processThreadsBatch, removeAllCollabIcons, removeCollabIcon, showAllCollabIcons, threadRenderStatus, toggleCollabPopup, updateCollabIconPosition, updatePopupPositions, updateSuggestionListPosition };

package/dist/modern/visualBuilder/generators/generateThread.d.ts

@@ -3,9 +3,11 @@ import { IThreadDTO, toggleCollabPopupEvent, MissingThreadsInfo, IThreadRenderSt
 declare function generateThread(payload: IThreadDTO | any, options?: {
     isNewThread?: boolean;
     updateConfig?: boolean;
+    hidden?: boolean;
 }): string | undefined;
 declare function updateCollabIconPosition(): void;
 declare function updatePopupPositions(): void;
+declare function updateSuggestionListPosition(): void;
 declare function calculatePopupPosition(button: HTMLElement, popup: HTMLElement): void;
 declare function removeAllCollabIcons(): void;
 declare function hideAllCollabIcons(): void;
@@ -22,4 +24,4 @@ declare function clearAllThreadStatus(): void;
 declare function processThreadsBatch(threads: IThreadDTO[]): Promise<string[]>;
 declare function filterUnrenderedThreads(threads: IThreadDTO[]): IThreadDTO[];
 
-export { HighlightThread, calculatePopupPosition, clearAllThreadStatus, clearThreadStatus, filterUnrenderedThreads, generateThread, handleEmptyThreads, handleMissingThreads, hideAllCollabIcons, isCollabThread, processThreadsBatch, removeAllCollabIcons, removeCollabIcon, showAllCollabIcons, threadRenderStatus, toggleCollabPopup, updateCollabIconPosition, updatePopupPositions };
+export { HighlightThread, calculatePopupPosition, clearAllThreadStatus, clearThreadStatus, filterUnrenderedThreads, generateThread, handleEmptyThreads, handleMissingThreads, hideAllCollabIcons, isCollabThread, processThreadsBatch, removeAllCollabIcons, removeCollabIcon, showAllCollabIcons, threadRenderStatus, toggleCollabPopup, updateCollabIconPosition, updatePopupPositions, updateSuggestionListPosition };

package/dist/modern/visualBuilder/generators/generateThread.js

@@ -7,13 +7,14 @@ import CollabIndicator from "../components/Collab/CollabIndicator.js";
 import Config from "../../configManager/configManager.js";
 import visualBuilderPostMessage from "../utils/visualBuilderPostMessage.js";
 import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types.js";
+import { adjustPositionToViewport } from "../utils/collabUtils.js";
 import { jsx } from "preact/jsx-runtime";
 var popupTopOffset = 43;
 var popupLeftOffset = 9;
 var hiddenClass = css`
     display: none;
 `;
-function createPopupContainer(resolvedXPath, relativeX, relativeY, top, left, updateConfig, payload) {
+function createPopupContainer(resolvedXPath, relativeX, relativeY, top, left, updateConfig, hidden, payload) {
   const popupContainer = document.createElement("div");
   popupContainer.setAttribute("field-path", resolvedXPath);
   popupContainer.setAttribute("relative", `x: ${relativeX}, y: ${relativeY}`);
@@ -23,6 +24,7 @@ function createPopupContainer(resolvedXPath, relativeX, relativeY, top, left, up
   popupContainer.style.zIndex = updateConfig ? "1000" : "999";
   popupContainer.style.cursor = "pointer";
   popupContainer.className = "collab-thread";
+  if (hidden) popupContainer.classList.add(hiddenClass);
   if (payload?._id) popupContainer.setAttribute("threaduid", payload._id);
   return popupContainer;
 }
@@ -45,7 +47,11 @@ function appendPopupContainer(popupContainer) {
   }
 }
 function generateThread(payload, options = {}) {
-  const { isNewThread = false, updateConfig = false } = options;
+  const {
+    isNewThread = false,
+    updateConfig = false,
+    hidden = false
+  } = options;
   const config = Config.get?.();
   let relativeX, relativeY, resolvedXPath;
   if (isNewThread) {
@@ -55,13 +61,24 @@ function generateThread(payload, options = {}) {
     ({ x: relativeX, y: relativeY } = position);
     resolvedXPath = elementXPath;
   }
+  if (payload?._id) {
+    const existingThread = document.querySelector(
+      `div[threaduid='${payload._id}']`
+    );
+    if (existingThread) {
+      return void 0;
+    }
+  }
   const element = getElementByXpath(resolvedXPath);
   if (!element) {
     return payload._id;
   }
   const rect = element.getBoundingClientRect();
-  const top = rect.top + window.scrollY + relativeY * rect.height;
-  const left = rect.left + window.scrollX + relativeX * rect.width;
+  let top = rect.top + window.scrollY + relativeY * rect.height;
+  let left = rect.left + window.scrollX + relativeX * rect.width;
+  const adjustedPosition = adjustPositionToViewport({ top, left });
+  top = adjustedPosition.top;
+  left = adjustedPosition.left;
   const popupContainer = createPopupContainer(
     resolvedXPath,
     relativeX,
@@ -69,9 +86,10 @@ function generateThread(payload, options = {}) {
     top,
     left,
     updateConfig,
+    hidden,
     payload
   );
-  if (updateConfig && config?.collab.enable) {
+  if (updateConfig && config?.collab?.enable) {
     if (config?.collab.isFeedbackMode) {
       Config.set("collab.isFeedbackMode", false);
     }
@@ -116,10 +134,13 @@ function updateCollabIconPosition() {
       return;
     }
     const rect = targetElement.getBoundingClientRect();
-    const x = rect.left + rect.width * relativeX + window.scrollX;
-    const y = rect.top + rect.height * relativeY + window.scrollY;
-    icon.style.top = `${y - popupTopOffset}px`;
-    icon.style.left = `${x - popupLeftOffset}px`;
+    let left = rect.left + rect.width * relativeX + window.scrollX;
+    let top = rect.top + rect.height * relativeY + window.scrollY;
+    const adjustedPosition = adjustPositionToViewport({ top, left });
+    top = adjustedPosition.top;
+    left = adjustedPosition.left;
+    icon.style.top = `${top - popupTopOffset}px`;
+    icon.style.left = `${left - popupLeftOffset}px`;
     icon.classList.remove(hiddenClass);
   });
 }
@@ -153,6 +174,71 @@ function updatePopupPositions() {
     }
   });
 }
+function updateSuggestionListPosition() {
+  const suggestionLists = document.querySelectorAll(
+    ".collab-thread-body--input--textarea--suggestionsList"
+  );
+  if (!suggestionLists.length) return;
+  suggestionLists.forEach((list) => {
+    if (!(list instanceof HTMLElement)) return;
+    const textarea = document.querySelector(
+      ".collab-thread-body--input--textarea"
+    );
+    if (!textarea) return;
+    const positionData = list.getAttribute("data-position");
+    const parsedData = positionData ? JSON.parse(positionData) : null;
+    const showAbove = window.getComputedStyle(list).bottom !== "auto";
+    const textareaRect = textarea.getBoundingClientRect();
+    if (showAbove) {
+      const lineHeight = parseInt(window.getComputedStyle(textarea).lineHeight) || 20;
+      const paddingTop = parseInt(window.getComputedStyle(textarea).paddingTop) || 8;
+      const cursorLineY = parsedData?.cursorLineY || paddingTop + lineHeight;
+      list.style.position = "fixed";
+      list.style.bottom = `${window.innerHeight - textareaRect.top - cursorLineY + lineHeight}px`;
+      list.style.top = "auto";
+    } else {
+      const lineHeight = parseInt(window.getComputedStyle(textarea).lineHeight) || 20;
+      const paddingTop = parseInt(window.getComputedStyle(textarea).paddingTop) || 8;
+      const cursorLineY = parsedData?.cursorLineY || paddingTop + lineHeight;
+      list.style.position = "fixed";
+      list.style.top = `${textareaRect.top + cursorLineY}px`;
+      list.style.bottom = "auto";
+    }
+    if (!positionData && textareaRect) {
+      const lineHeight = parseInt(window.getComputedStyle(textarea).lineHeight) || 20;
+      const paddingTop = parseInt(window.getComputedStyle(textarea).paddingTop) || 8;
+      const positionInfo = {
+        showAbove,
+        cursorLineY: paddingTop + lineHeight
+      };
+      list.setAttribute("data-position", JSON.stringify(positionInfo));
+    }
+    const listRect = list.getBoundingClientRect();
+    if (!showAbove && listRect.bottom > window.innerHeight) {
+      const lineHeight = parseInt(window.getComputedStyle(textarea).lineHeight) || 20;
+      const paddingTop = parseInt(window.getComputedStyle(textarea).paddingTop) || 8;
+      const cursorLineY = parsedData?.cursorLineY || paddingTop + lineHeight;
+      list.style.bottom = `${window.innerHeight - textareaRect.top - cursorLineY + lineHeight}px`;
+      list.style.top = "auto";
+      if (positionData) {
+        const updatedData = JSON.parse(positionData);
+        updatedData.showAbove = true;
+        list.setAttribute("data-position", JSON.stringify(updatedData));
+      }
+    } else if (showAbove && listRect.top < 0) {
+      const lineHeight = parseInt(window.getComputedStyle(textarea).lineHeight) || 20;
+      const paddingTop = parseInt(window.getComputedStyle(textarea).paddingTop) || 8;
+      const cursorLineY = parsedData?.cursorLineY || paddingTop + lineHeight;
+      list.style.top = `${textareaRect.top + cursorLineY}px`;
+      list.style.bottom = "auto";
+      if (positionData) {
+        const updatedData = JSON.parse(positionData);
+        updatedData.showAbove = false;
+        list.setAttribute("data-position", JSON.stringify(updatedData));
+      }
+    }
+  });
+}
 function calculatePopupPosition(button, popup) {
   const buttonRect = button.getBoundingClientRect();
   const viewportHeight = window.innerHeight;
@@ -215,8 +301,6 @@ function toggleCollabPopup({
   );
 }
 function HighlightThread(threadUid) {
-  const config = Config.get?.();
-  if (config?.collab?.pauseFeedback) return;
   toggleCollabPopup({ threadUid, action: "open" });
 }
 function isCollabThread(target) {
@@ -227,7 +311,7 @@ function isCollabThread(target) {
 function handleMissingThreads(payload) {
   visualBuilderPostMessage?.send(
     VisualBuilderPostMessageEvents.COLLAB_MISSING_THREADS,
-    { payload }
+    payload
   );
 }
 function handleEmptyThreads() {
@@ -241,7 +325,7 @@ function handleEmptyThreads() {
   });
 }
 var retryConfig = {
-  maxRetries: 3,
+  maxRetries: 5,
   retryDelay: 1e3
 };
 var isProcessingThreads = false;
@@ -275,7 +359,7 @@ async function processThread(thread) {
   let status = getRenderStatus(thread._id);
   while (status.attempts < retryConfig.maxRetries) {
     try {
-      const result = generateThread(thread, { isNewThread: false });
+      const result = generateThread(thread);
       if (result === void 0) {
         updateRenderStatus(thread._id, true);
         return void 0;
@@ -351,6 +435,7 @@ export {
   threadRenderStatus,
   toggleCollabPopup,
   updateCollabIconPosition,
-  updatePopupPositions
+  updatePopupPositions,
+  updateSuggestionListPosition
 };
 //# sourceMappingURL=generateThread.js.map

package/dist/modern/visualBuilder/generators/generateThread.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/generators/generateThread.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport { render } from \"preact\";\nimport { css } from \"goober\";\nimport CollabIndicator from \"../components/Collab/CollabIndicator\";\nimport Config from \"../../configManager/configManager\";\nimport { IThreadDTO, IThreadRenderStatus } from \"../types/collab.types\";\nimport {\n    MissingThreadsInfo,\n    toggleCollabPopupEvent,\n} from \"../types/collab.types\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\n\nconst popupTopOffset = 43;\nconst popupLeftOffset = 9;\n\nconst hiddenClass = css`\n    display: none;\n`;\n\nfunction createPopupContainer(\n    resolvedXPath: string,\n    relativeX: number,\n    relativeY: number,\n    top: number,\n    left: number,\n    updateConfig: boolean,\n    payload: IThreadDTO | any\n): HTMLDivElement {\n    const popupContainer = document.createElement(\"div\");\n    popupContainer.setAttribute(\"field-path\", resolvedXPath);\n    popupContainer.setAttribute(\"relative\", `x: ${relativeX}, y: ${relativeY}`);\n    popupContainer.style.position = \"absolute\";\n    popupContainer.style.top = `${top - popupTopOffset}px`;\n    popupContainer.style.left = `${left - popupLeftOffset}px`;\n    popupContainer.style.zIndex = updateConfig ? \"1000\" : \"999\";\n    popupContainer.style.cursor = \"pointer\";\n    popupContainer.className = \"collab-thread\";\n    if (payload?._id) popupContainer.setAttribute(\"threaduid\", payload._id);\n    return popupContainer;\n}\n\nfunction appendPopupContainer(popupContainer: HTMLDivElement): void {\n    const visualBuilderContainer = document.querySelector(\n        \".visual-builder__container\"\n    );\n    if (visualBuilderContainer) {\n        let highlightCommentWrapper = visualBuilderContainer.querySelector(\n            \".visual-builder__collab-wrapper\"\n        );\n        if (!highlightCommentWrapper) {\n            highlightCommentWrapper = document.createElement(\"div\");\n            highlightCommentWrapper.className =\n                \"visual-builder__collab-wrapper\";\n            visualBuilderContainer.appendChild(highlightCommentWrapper);\n        }\n        highlightCommentWrapper.appendChild(popupContainer);\n    } else {\n        document.body.appendChild(popupContainer);\n    }\n}\n\nexport function generateThread(\n    payload: IThreadDTO | any,\n    options: { isNewThread?: boolean; updateConfig?: boolean } = {}\n): string | undefined {\n    const { isNewThread = false, updateConfig = false } = options;\n    const config = Config.get?.();\n\n    let relativeX: number, relativeY: number, resolvedXPath: string;\n\n    if (isNewThread) {\n        ({ relativeX, relativeY, xpath: resolvedXPath } = payload);\n    } else {\n        const { position, elementXPath } = payload;\n        ({ x: relativeX, y: relativeY } = position);\n        resolvedXPath = elementXPath;\n    }\n\n    const element = getElementByXpath(resolvedXPath);\n    if (!element) {\n        return payload._id;\n    }\n\n    const rect = element.getBoundingClientRect();\n    const top = rect.top + window.scrollY + relativeY * rect.height;\n    const left = rect.left + window.scrollX + relativeX * rect.width;\n\n    const popupContainer = createPopupContainer(\n        resolvedXPath,\n        relativeX,\n        relativeY,\n        top,\n        left,\n        updateConfig,\n        payload\n    );\n\n    if (updateConfig && config?.collab.enable) {\n        if (config?.collab.isFeedbackMode) {\n            Config.set(\"collab.isFeedbackMode\", false);\n        }\n    }\n\n    render(\n        <CollabIndicator\n            activeThread={!isNewThread ? payload : undefined}\n            newThread={isNewThread}\n        />,\n        popupContainer\n    );\n\n    appendPopupContainer(popupContainer);\n\n    return undefined;\n}\n\nexport function updateCollabIconPosition() {\n    const icons = document.querySelectorAll(\n        \".visual-builder__collab-wrapper .collab-thread\"\n    );\n    const config = Config.get?.();\n    if (config?.collab?.pauseFeedback) return;\n\n    icons.forEach((icon) => {\n        if (!(icon instanceof HTMLElement)) return;\n\n        const path = icon.getAttribute(\"field-path\");\n        const relative = icon.getAttribute(\"relative\");\n\n        if (!path || !relative) {\n            console.error(\"Missing field-path or relative attribute.\");\n            return;\n        }\n\n        const match = relative.match(/x: ([\\d.]+), y: ([\\d.]+)/);\n        if (!match) {\n            console.error(\"Invalid relative attribute format.\");\n            return;\n        }\n\n        const relativeX = parseFloat(match[1]);\n        const relativeY = parseFloat(match[2]);\n\n        const targetElement = getElementByXpath(path);\n\n        if (!targetElement) {\n            icon.classList.add(hiddenClass);\n            return;\n        }\n\n        const rect = targetElement.getBoundingClientRect();\n        const x = rect.left + rect.width * relativeX + window.scrollX;\n        const y = rect.top + rect.height * relativeY + window.scrollY;\n\n        icon.style.top = `${y - popupTopOffset}px`;\n        icon.style.left = `${x - popupLeftOffset}px`;\n        icon.classList.remove(hiddenClass);\n    });\n}\nexport function updatePopupPositions() {\n    const popups = document.querySelectorAll(\n        \".visual-builder__collab-wrapper .collab-thread .collab-popup\"\n    );\n\n    const config = Config.get?.();\n    if (config?.collab?.pauseFeedback) return;\n\n    popups.forEach((popup) => {\n        if (popup && popup instanceof HTMLElement) {\n            const parent = popup.closest(\n                \".visual-builder__collab-wrapper .collab-thread\"\n            );\n\n            if (!parent) {\n                console.error(\n                    \"Parent element with class 'collab-thread' not found.\"\n                );\n                return;\n            }\n\n            const button = parent.querySelector(\n                \".visual-builder__collab-wrapper .collab-thread .collab-indicator\"\n            );\n\n            if (!button || !(button instanceof HTMLElement)) {\n                console.error(\n                    \"Button with class 'collab-indicator' not found.\"\n                );\n                return;\n            }\n\n            calculatePopupPosition(button, popup);\n        }\n    });\n}\n\nexport function calculatePopupPosition(\n    button: HTMLElement,\n    popup: HTMLElement\n) {\n    const buttonRect = button.getBoundingClientRect();\n    const viewportHeight = window.innerHeight;\n    const viewportWidth = window.innerWidth;\n\n    let popupHeight = popup.offsetHeight || 198;\n    let popupWidth = popup.offsetWidth || 334;\n\n    const spaceAbove = buttonRect.top;\n    const spaceBelow = viewportHeight - buttonRect.bottom;\n\n    let top, left;\n\n    if (spaceAbove >= popupHeight) {\n        top = buttonRect.top - popupHeight - 8;\n    } else if (spaceBelow >= popupHeight) {\n        top = buttonRect.bottom + 8;\n    } else {\n        top =\n            spaceBelow > spaceAbove\n                ? buttonRect.bottom + 8\n                : Math.max(buttonRect.top - popupHeight - 8, 0);\n    }\n\n    left = buttonRect.left + buttonRect.width / 2 - popupWidth / 2;\n\n    top = Math.max(top, 0);\n    left = Math.max(left, 0);\n    left = Math.min(left, viewportWidth - popupWidth);\n\n    popup.style.top = `${top}px`;\n    popup.style.left = `${left}px`;\n\n    requestAnimationFrame(() => {\n        const newPopupHeight = popup.offsetHeight;\n        if (newPopupHeight !== popupHeight) {\n            calculatePopupPosition(button, popup);\n        }\n    });\n}\n\nexport function removeAllCollabIcons(): void {\n    const icons = document.querySelectorAll(\n        \".visual-builder__collab-wrapper .collab-thread\"\n    );\n    icons?.forEach((icon) => icon?.remove());\n}\n\nexport function hideAllCollabIcons(): void {\n    const icons = document.querySelectorAll(\n        \".visual-builder__collab-wrapper .collab-thread\"\n    );\n    icons?.forEach((icon) => icon?.classList.add(hiddenClass));\n}\n\nexport function showAllCollabIcons(): void {\n    const icons = document.querySelectorAll(\n        \".visual-builder__collab-wrapper .collab-thread\"\n    );\n    icons?.forEach((icon) => icon?.classList.remove(hiddenClass));\n}\n\nexport function removeCollabIcon(threadUid: string): void {\n    const thread = document.querySelector(`div[threaduid='${threadUid}']`);\n    thread?.remove();\n}\n\nexport function toggleCollabPopup({\n    threadUid = \"\",\n    action,\n}: toggleCollabPopupEvent): void {\n    document.dispatchEvent(\n        new CustomEvent(\"toggleCollabPopup\", {\n            detail: { threadUid, action },\n        })\n    );\n}\n\nexport function HighlightThread(threadUid: string): void {\n    const config = Config.get?.();\n    if (config?.collab?.pauseFeedback) return;\n\n    toggleCollabPopup({ threadUid, action: \"open\" });\n}\n\nexport function isCollabThread(target: HTMLElement): boolean {\n    return Array.from(target.classList).some((className) =>\n        className.startsWith(\"collab\")\n    );\n}\n\nexport function handleMissingThreads(payload: MissingThreadsInfo) {\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.COLLAB_MISSING_THREADS,\n        { payload }\n    );\n}\n\nexport function handleEmptyThreads() {\n    const icons = document.querySelectorAll(\n        \".visual-builder__collab-wrapper .collab-thread\"\n    );\n    icons?.forEach((icon) => {\n        if (!icon.hasAttribute(\"threaduid\")) {\n            icon.remove();\n        }\n    });\n}\n\nconst retryConfig = {\n    maxRetries: 3,\n    retryDelay: 1000,\n};\n\nlet isProcessingThreads = false;\n\nexport const threadRenderStatus = new Map<string, IThreadRenderStatus>();\n\nfunction delay(ms: number): Promise<void> {\n    return new Promise((resolve) => setTimeout(resolve, ms));\n}\n\nfunction getRenderStatus(threadId: string): IThreadRenderStatus {\n    if (!threadRenderStatus.has(threadId)) {\n        threadRenderStatus.set(threadId, {\n            threadId,\n            attempts: 0,\n            isRendered: false,\n        });\n    }\n    return threadRenderStatus.get(threadId)!;\n}\n\nfunction updateRenderStatus(threadId: string, isRendered: boolean): void {\n    const status = getRenderStatus(threadId);\n    status.isRendered = isRendered;\n    threadRenderStatus.set(threadId, status);\n}\n\nexport function clearThreadStatus(threadId: string): void {\n    threadRenderStatus.delete(threadId);\n}\n\nexport function clearAllThreadStatus(): void {\n    threadRenderStatus.clear();\n    isProcessingThreads = false;\n}\n\nasync function processThread(thread: IThreadDTO): Promise<string | undefined> {\n    let status = getRenderStatus(thread._id);\n\n    while (status.attempts < retryConfig.maxRetries) {\n        try {\n            const result = generateThread(thread, { isNewThread: false });\n            if (result === undefined) {\n                updateRenderStatus(thread._id, true);\n                return undefined;\n            }\n\n            status.attempts++;\n            updateRenderStatus(thread._id, false);\n\n            if (status.attempts < retryConfig.maxRetries) {\n                await delay(retryConfig.retryDelay);\n            }\n        } catch (error) {\n            console.error(`Error rendering thread ${thread._id}:`, error);\n            status.attempts++;\n            if (status.attempts >= retryConfig.maxRetries) {\n                break;\n            }\n            await delay(retryConfig.retryDelay);\n        }\n    }\n\n    return thread._id;\n}\n\nexport async function processThreadsBatch(\n    threads: IThreadDTO[]\n): Promise<string[]> {\n    if (isProcessingThreads) return [];\n\n    try {\n        isProcessingThreads = true;\n        const unrenderedThreads = filterUnrenderedThreads(threads);\n        if (unrenderedThreads.length === 0) return [];\n\n        const missingThreadIds = (\n            await Promise.all(\n                unrenderedThreads.map((thread) => processThread(thread))\n            )\n        ).filter(Boolean) as string[];\n\n        missingThreadIds.forEach(clearThreadStatus);\n        return missingThreadIds;\n    } finally {\n        isProcessingThreads = false;\n    }\n}\n\nexport function filterUnrenderedThreads(threads: IThreadDTO[]): IThreadDTO[] {\n    return threads.filter((thread) => {\n        const existingThread = document.querySelector(\n            `[threaduid=\"${thread._id}\"]`\n        );\n        if (existingThread) {\n            updateRenderStatus(thread._id, true);\n            return false;\n        }\n        return true;\n    });\n}\n\nfunction getElementByXpath(xpath: string): HTMLElement | null {\n    const result = document.evaluate(\n        xpath,\n        document,\n        null,\n        XPathResult.FIRST_ORDERED_NODE_TYPE,\n        null\n    );\n    return result.singleNodeValue as HTMLElement | null;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateThread.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport { render } from \"preact\";\nimport { css } from \"goober\";\nimport CollabIndicator from \"../components/Collab/CollabIndicator\";\nimport Config from \"../../configManager/configManager\";\nimport { IThreadDTO, IThreadRenderStatus } from \"../types/collab.types\";\nimport {\n    MissingThreadsInfo,\n    toggleCollabPopupEvent,\n} from \"../types/collab.types\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { adjustPositionToViewport } from \"../utils/collabUtils\";\n\nconst popupTopOffset = 43;\nconst popupLeftOffset = 9;\n\nconst hiddenClass = css`\n    display: none;\n`;\n\nfunction createPopupContainer(\n    resolvedXPath: string,\n    relativeX: number,\n    relativeY: number,\n    top: number,\n    left: number,\n    updateConfig: boolean,\n    hidden: boolean,\n    payload: IThreadDTO | any\n): HTMLDivElement {\n    const popupContainer = document.createElement(\"div\");\n    popupContainer.setAttribute(\"field-path\", resolvedXPath);\n    popupContainer.setAttribute(\"relative\", `x: ${relativeX}, y: ${relativeY}`);\n    popupContainer.style.position = \"absolute\";\n    popupContainer.style.top = `${top - popupTopOffset}px`;\n    popupContainer.style.left = `${left - popupLeftOffset}px`;\n    popupContainer.style.zIndex = updateConfig ? \"1000\" : \"999\";\n    popupContainer.style.cursor = \"pointer\";\n    popupContainer.className = \"collab-thread\";\n    if (hidden) popupContainer.classList.add(hiddenClass);\n    if (payload?._id) popupContainer.setAttribute(\"threaduid\", payload._id);\n    return popupContainer;\n}\n\nfunction appendPopupContainer(popupContainer: HTMLDivElement): void {\n    const visualBuilderContainer = document.querySelector(\n        \".visual-builder__container\"\n    );\n    if (visualBuilderContainer) {\n        let highlightCommentWrapper = visualBuilderContainer.querySelector(\n            \".visual-builder__collab-wrapper\"\n        );\n        if (!highlightCommentWrapper) {\n            highlightCommentWrapper = document.createElement(\"div\");\n            highlightCommentWrapper.className =\n                \"visual-builder__collab-wrapper\";\n            visualBuilderContainer.appendChild(highlightCommentWrapper);\n        }\n        highlightCommentWrapper.appendChild(popupContainer);\n    } else {\n        document.body.appendChild(popupContainer);\n    }\n}\n\nexport function generateThread(\n    payload: IThreadDTO | any,\n    options: {\n        isNewThread?: boolean;\n        updateConfig?: boolean;\n        hidden?: boolean;\n    } = {}\n): string | undefined {\n    const {\n        isNewThread = false,\n        updateConfig = false,\n        hidden = false,\n    } = options;\n    const config = Config.get?.();\n\n    let relativeX: number, relativeY: number, resolvedXPath: string;\n\n    if (isNewThread) {\n        ({ relativeX, relativeY, xpath: resolvedXPath } = payload);\n    } else {\n        const { position, elementXPath } = payload;\n        ({ x: relativeX, y: relativeY } = position);\n        resolvedXPath = elementXPath;\n    }\n\n    // Filter to remove already rendered threads\n    if (payload?._id) {\n        const existingThread = document.querySelector(\n            `div[threaduid='${payload._id}']`\n        );\n        if (existingThread) {\n            return undefined;\n        }\n    }\n\n    const element = getElementByXpath(resolvedXPath);\n    if (!element) {\n        return payload._id;\n    }\n\n    const rect = element.getBoundingClientRect();\n    let top = rect.top + window.scrollY + relativeY * rect.height;\n    let left = rect.left + window.scrollX + relativeX * rect.width;\n\n    const adjustedPosition = adjustPositionToViewport({ top, left });\n    top = adjustedPosition.top;\n    left = adjustedPosition.left;\n\n    const popupContainer = createPopupContainer(\n        resolvedXPath,\n        relativeX,\n        relativeY,\n        top,\n        left,\n        updateConfig,\n        hidden,\n        payload\n    );\n\n    if (updateConfig && config?.collab?.enable) {\n        if (config?.collab.isFeedbackMode) {\n            Config.set(\"collab.isFeedbackMode\", false);\n        }\n    }\n\n    render(\n        <CollabIndicator\n            activeThread={!isNewThread ? payload : undefined}\n            newThread={isNewThread}\n        />,\n        popupContainer\n    );\n\n    appendPopupContainer(popupContainer);\n\n    return undefined;\n}\n\nexport function updateCollabIconPosition() {\n    const icons = document.querySelectorAll(\n        \".visual-builder__collab-wrapper .collab-thread\"\n    );\n    const config = Config.get?.();\n    if (config?.collab?.pauseFeedback) return;\n\n    icons.forEach((icon) => {\n        if (!(icon instanceof HTMLElement)) return;\n\n        const path = icon.getAttribute(\"field-path\");\n        const relative = icon.getAttribute(\"relative\");\n\n        if (!path || !relative) {\n            console.error(\"Missing field-path or relative attribute.\");\n            return;\n        }\n\n        const match = relative.match(/x: ([\\d.]+), y: ([\\d.]+)/);\n        if (!match) {\n            console.error(\"Invalid relative attribute format.\");\n            return;\n        }\n\n        const relativeX = parseFloat(match[1]);\n        const relativeY = parseFloat(match[2]);\n\n        const targetElement = getElementByXpath(path);\n\n        if (!targetElement) {\n            icon.classList.add(hiddenClass);\n            return;\n        }\n\n        const rect = targetElement.getBoundingClientRect();\n        let left = rect.left + rect.width * relativeX + window.scrollX;\n        let top = rect.top + rect.height * relativeY + window.scrollY;\n\n        const adjustedPosition = adjustPositionToViewport({ top, left });\n        top = adjustedPosition.top;\n        left = adjustedPosition.left;\n\n        icon.style.top = `${top - popupTopOffset}px`;\n        icon.style.left = `${left - popupLeftOffset}px`;\n        icon.classList.remove(hiddenClass);\n    });\n}\nexport function updatePopupPositions() {\n    const popups = document.querySelectorAll(\n        \".visual-builder__collab-wrapper .collab-thread .collab-popup\"\n    );\n\n    const config = Config.get?.();\n    if (config?.collab?.pauseFeedback) return;\n\n    popups.forEach((popup) => {\n        if (popup && popup instanceof HTMLElement) {\n            const parent = popup.closest(\n                \".visual-builder__collab-wrapper .collab-thread\"\n            );\n\n            if (!parent) {\n                console.error(\n                    \"Parent element with class 'collab-thread' not found.\"\n                );\n                return;\n            }\n\n            const button = parent.querySelector(\n                \".visual-builder__collab-wrapper .collab-thread .collab-indicator\"\n            );\n\n            if (!button || !(button instanceof HTMLElement)) {\n                console.error(\n                    \"Button with class 'collab-indicator' not found.\"\n                );\n                return;\n            }\n\n            calculatePopupPosition(button, popup);\n        }\n    });\n}\n\nexport function updateSuggestionListPosition() {\n    const suggestionLists = document.querySelectorAll(\n        \".collab-thread-body--input--textarea--suggestionsList\"\n    );\n\n    if (!suggestionLists.length) return;\n\n    suggestionLists.forEach((list) => {\n        if (!(list instanceof HTMLElement)) return;\n\n        const textarea = document.querySelector(\n            \".collab-thread-body--input--textarea\"\n        ) as HTMLTextAreaElement | null;\n\n        if (!textarea) return;\n        const positionData = list.getAttribute(\"data-position\");\n        const parsedData = positionData ? JSON.parse(positionData) : null;\n        const showAbove = window.getComputedStyle(list).bottom !== \"auto\";\n        const textareaRect = textarea.getBoundingClientRect();\n        if (showAbove) {\n            const lineHeight =\n                parseInt(window.getComputedStyle(textarea).lineHeight) || 20;\n            const paddingTop =\n                parseInt(window.getComputedStyle(textarea).paddingTop) || 8;\n            const cursorLineY =\n                parsedData?.cursorLineY || paddingTop + lineHeight;\n\n            list.style.position = \"fixed\";\n            list.style.bottom = `${window.innerHeight - textareaRect.top - cursorLineY + lineHeight}px`;\n            list.style.top = \"auto\";\n        } else {\n            const lineHeight =\n                parseInt(window.getComputedStyle(textarea).lineHeight) || 20;\n            const paddingTop =\n                parseInt(window.getComputedStyle(textarea).paddingTop) || 8;\n\n            const cursorLineY =\n                parsedData?.cursorLineY || paddingTop + lineHeight;\n\n            list.style.position = \"fixed\";\n            list.style.top = `${textareaRect.top + cursorLineY}px`;\n            list.style.bottom = \"auto\";\n        }\n\n        if (!positionData && textareaRect) {\n            const lineHeight =\n                parseInt(window.getComputedStyle(textarea).lineHeight) || 20;\n            const paddingTop =\n                parseInt(window.getComputedStyle(textarea).paddingTop) || 8;\n\n            const positionInfo = {\n                showAbove: showAbove,\n                cursorLineY: paddingTop + lineHeight,\n            };\n            list.setAttribute(\"data-position\", JSON.stringify(positionInfo));\n        }\n\n        const listRect = list.getBoundingClientRect();\n\n        if (!showAbove && listRect.bottom > window.innerHeight) {\n            const lineHeight =\n                parseInt(window.getComputedStyle(textarea).lineHeight) || 20;\n            const paddingTop =\n                parseInt(window.getComputedStyle(textarea).paddingTop) || 8;\n            const cursorLineY =\n                parsedData?.cursorLineY || paddingTop + lineHeight;\n\n            list.style.bottom = `${window.innerHeight - textareaRect.top - cursorLineY + lineHeight}px`;\n            list.style.top = \"auto\";\n\n            if (positionData) {\n                const updatedData = JSON.parse(positionData);\n                updatedData.showAbove = true;\n                list.setAttribute(\"data-position\", JSON.stringify(updatedData));\n            }\n        } else if (showAbove && listRect.top < 0) {\n            const lineHeight =\n                parseInt(window.getComputedStyle(textarea).lineHeight) || 20;\n            const paddingTop =\n                parseInt(window.getComputedStyle(textarea).paddingTop) || 8;\n            const cursorLineY =\n                parsedData?.cursorLineY || paddingTop + lineHeight;\n\n            list.style.top = `${textareaRect.top + cursorLineY}px`;\n            list.style.bottom = \"auto\";\n\n            if (positionData) {\n                const updatedData = JSON.parse(positionData);\n                updatedData.showAbove = false;\n                list.setAttribute(\"data-position\", JSON.stringify(updatedData));\n            }\n        }\n    });\n}\n\nexport function calculatePopupPosition(\n    button: HTMLElement,\n    popup: HTMLElement\n) {\n    const buttonRect = button.getBoundingClientRect();\n    const viewportHeight = window.innerHeight;\n    const viewportWidth = window.innerWidth;\n\n    let popupHeight = popup.offsetHeight || 198;\n    let popupWidth = popup.offsetWidth || 334;\n\n    const spaceAbove = buttonRect.top;\n    const spaceBelow = viewportHeight - buttonRect.bottom;\n\n    let top, left;\n\n    if (spaceAbove >= popupHeight) {\n        top = buttonRect.top - popupHeight - 8;\n    } else if (spaceBelow >= popupHeight) {\n        top = buttonRect.bottom + 8;\n    } else {\n        top =\n            spaceBelow > spaceAbove\n                ? buttonRect.bottom + 8\n                : Math.max(buttonRect.top - popupHeight - 8, 0);\n    }\n\n    left = buttonRect.left + buttonRect.width / 2 - popupWidth / 2;\n\n    top = Math.max(top, 0);\n    left = Math.max(left, 0);\n    left = Math.min(left, viewportWidth - popupWidth);\n\n    popup.style.top = `${top}px`;\n    popup.style.left = `${left}px`;\n\n    requestAnimationFrame(() => {\n        const newPopupHeight = popup.offsetHeight;\n        if (newPopupHeight !== popupHeight) {\n            calculatePopupPosition(button, popup);\n        }\n    });\n}\n\nexport function removeAllCollabIcons(): void {\n    const icons = document.querySelectorAll(\n        \".visual-builder__collab-wrapper .collab-thread\"\n    );\n    icons?.forEach((icon) => icon?.remove());\n}\n\nexport function hideAllCollabIcons(): void {\n    const icons = document.querySelectorAll(\n        \".visual-builder__collab-wrapper .collab-thread\"\n    );\n    icons?.forEach((icon) => icon?.classList.add(hiddenClass));\n}\n\nexport function showAllCollabIcons(): void {\n    const icons = document.querySelectorAll(\n        \".visual-builder__collab-wrapper .collab-thread\"\n    );\n    icons?.forEach((icon) => icon?.classList.remove(hiddenClass));\n}\n\nexport function removeCollabIcon(threadUid: string): void {\n    const thread = document.querySelector(`div[threaduid='${threadUid}']`);\n    thread?.remove();\n}\n\nexport function toggleCollabPopup({\n    threadUid = \"\",\n    action,\n}: toggleCollabPopupEvent): void {\n    document.dispatchEvent(\n        new CustomEvent(\"toggleCollabPopup\", {\n            detail: { threadUid, action },\n        })\n    );\n}\n\nexport function HighlightThread(threadUid: string): void {\n    toggleCollabPopup({ threadUid, action: \"open\" });\n}\n\nexport function isCollabThread(target: HTMLElement): boolean {\n    return Array.from(target.classList).some((className) =>\n        className.startsWith(\"collab\")\n    );\n}\n\nexport function handleMissingThreads(payload: MissingThreadsInfo) {\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.COLLAB_MISSING_THREADS,\n        payload\n    );\n}\n\nexport function handleEmptyThreads() {\n    const icons = document.querySelectorAll(\n        \".visual-builder__collab-wrapper .collab-thread\"\n    );\n    icons?.forEach((icon) => {\n        if (!icon.hasAttribute(\"threaduid\")) {\n            icon.remove();\n        }\n    });\n}\n\nconst retryConfig = {\n    maxRetries: 5,\n    retryDelay: 1000,\n};\n\nlet isProcessingThreads = false;\n\nexport const threadRenderStatus = new Map<string, IThreadRenderStatus>();\n\nfunction delay(ms: number): Promise<void> {\n    return new Promise((resolve) => setTimeout(resolve, ms));\n}\n\nfunction getRenderStatus(threadId: string): IThreadRenderStatus {\n    if (!threadRenderStatus.has(threadId)) {\n        threadRenderStatus.set(threadId, {\n            threadId,\n            attempts: 0,\n            isRendered: false,\n        });\n    }\n    return threadRenderStatus.get(threadId)!;\n}\n\nfunction updateRenderStatus(threadId: string, isRendered: boolean): void {\n    const status = getRenderStatus(threadId);\n    status.isRendered = isRendered;\n    threadRenderStatus.set(threadId, status);\n}\n\nexport function clearThreadStatus(threadId: string): void {\n    threadRenderStatus.delete(threadId);\n}\n\nexport function clearAllThreadStatus(): void {\n    threadRenderStatus.clear();\n    isProcessingThreads = false;\n}\n\nasync function processThread(thread: IThreadDTO): Promise<string | undefined> {\n    let status = getRenderStatus(thread._id);\n\n    while (status.attempts < retryConfig.maxRetries) {\n        try {\n            const result = generateThread(thread);\n            if (result === undefined) {\n                updateRenderStatus(thread._id, true);\n                return undefined;\n            }\n\n            status.attempts++;\n            updateRenderStatus(thread._id, false);\n\n            if (status.attempts < retryConfig.maxRetries) {\n                await delay(retryConfig.retryDelay);\n            }\n        } catch (error) {\n            console.error(`Error rendering thread ${thread._id}:`, error);\n            status.attempts++;\n            if (status.attempts >= retryConfig.maxRetries) {\n                break;\n            }\n            await delay(retryConfig.retryDelay);\n        }\n    }\n\n    return thread._id;\n}\n\nexport async function processThreadsBatch(\n    threads: IThreadDTO[]\n): Promise<string[]> {\n    if (isProcessingThreads) return [];\n\n    try {\n        isProcessingThreads = true;\n        const unrenderedThreads = filterUnrenderedThreads(threads);\n        if (unrenderedThreads.length === 0) return [];\n\n        const missingThreadIds = (\n            await Promise.all(\n                unrenderedThreads.map((thread) => processThread(thread))\n            )\n        ).filter(Boolean) as string[];\n\n        missingThreadIds.forEach(clearThreadStatus);\n        return missingThreadIds;\n    } finally {\n        isProcessingThreads = false;\n    }\n}\n\nexport function filterUnrenderedThreads(threads: IThreadDTO[]): IThreadDTO[] {\n    return threads.filter((thread) => {\n        const existingThread = document.querySelector(\n            `[threaduid=\"${thread._id}\"]`\n        );\n        if (existingThread) {\n            updateRenderStatus(thread._id, true);\n            return false;\n        }\n        return true;\n    });\n}\n\nfunction getElementByXpath(xpath: string): HTMLElement | null {\n    const result = document.evaluate(\n        xpath,\n        document,\n        null,\n        XPathResult.FIRST_ORDERED_NODE_TYPE,\n        null\n    );\n    return result.singleNodeValue as HTMLElement | null;\n}\n"],"mappings":";;;AACA,SAAS,cAAc;AACvB,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAC5B,OAAO,YAAY;AAMnB,OAAO,8BAA8B;AACrC,SAAS,sCAAsC;AAC/C,SAAS,gCAAgC;AAuHjC;AArHR,IAAM,iBAAiB;AACvB,IAAM,kBAAkB;AAExB,IAAM,cAAc;AAAA;AAAA;AAIpB,SAAS,qBACL,eACA,WACA,WACA,KACA,MACA,cACA,QACA,SACc;AACd,QAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,iBAAe,aAAa,cAAc,aAAa;AACvD,iBAAe,aAAa,YAAY,MAAM,SAAS,QAAQ,SAAS,EAAE;AAC1E,iBAAe,MAAM,WAAW;AAChC,iBAAe,MAAM,MAAM,GAAG,MAAM,cAAc;AAClD,iBAAe,MAAM,OAAO,GAAG,OAAO,eAAe;AACrD,iBAAe,MAAM,SAAS,eAAe,SAAS;AACtD,iBAAe,MAAM,SAAS;AAC9B,iBAAe,YAAY;AAC3B,MAAI,OAAQ,gBAAe,UAAU,IAAI,WAAW;AACpD,MAAI,SAAS,IAAK,gBAAe,aAAa,aAAa,QAAQ,GAAG;AACtE,SAAO;AACX;AAEA,SAAS,qBAAqB,gBAAsC;AAChE,QAAM,yBAAyB,SAAS;AAAA,IACpC;AAAA,EACJ;AACA,MAAI,wBAAwB;AACxB,QAAI,0BAA0B,uBAAuB;AAAA,MACjD;AAAA,IACJ;AACA,QAAI,CAAC,yBAAyB;AAC1B,gCAA0B,SAAS,cAAc,KAAK;AACtD,8BAAwB,YACpB;AACJ,6BAAuB,YAAY,uBAAuB;AAAA,IAC9D;AACA,4BAAwB,YAAY,cAAc;AAAA,EACtD,OAAO;AACH,aAAS,KAAK,YAAY,cAAc;AAAA,EAC5C;AACJ;AAEO,SAAS,eACZ,SACA,UAII,CAAC,GACa;AAClB,QAAM;AAAA,IACF,cAAc;AAAA,IACd,eAAe;AAAA,IACf,SAAS;AAAA,EACb,IAAI;AACJ,QAAM,SAAS,OAAO,MAAM;AAE5B,MAAI,WAAmB,WAAmB;AAE1C,MAAI,aAAa;AACb,KAAC,EAAE,WAAW,WAAW,OAAO,cAAc,IAAI;AAAA,EACtD,OAAO;AACH,UAAM,EAAE,UAAU,aAAa,IAAI;AACnC,KAAC,EAAE,GAAG,WAAW,GAAG,UAAU,IAAI;AAClC,oBAAgB;AAAA,EACpB;AAGA,MAAI,SAAS,KAAK;AACd,UAAM,iBAAiB,SAAS;AAAA,MAC5B,kBAAkB,QAAQ,GAAG;AAAA,IACjC;AACA,QAAI,gBAAgB;AAChB,aAAO;AAAA,IACX;AAAA,EACJ;AAEA,QAAM,UAAU,kBAAkB,aAAa;AAC/C,MAAI,CAAC,SAAS;AACV,WAAO,QAAQ;AAAA,EACnB;AAEA,QAAM,OAAO,QAAQ,sBAAsB;AAC3C,MAAI,MAAM,KAAK,MAAM,OAAO,UAAU,YAAY,KAAK;AACvD,MAAI,OAAO,KAAK,OAAO,OAAO,UAAU,YAAY,KAAK;AAEzD,QAAM,mBAAmB,yBAAyB,EAAE,KAAK,KAAK,CAAC;AAC/D,QAAM,iBAAiB;AACvB,SAAO,iBAAiB;AAExB,QAAM,iBAAiB;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAEA,MAAI,gBAAgB,QAAQ,QAAQ,QAAQ;AACxC,QAAI,QAAQ,OAAO,gBAAgB;AAC/B,aAAO,IAAI,yBAAyB,KAAK;AAAA,IAC7C;AAAA,EACJ;AAEA;AAAA,IACI;AAAA,MAAC;AAAA;AAAA,QACG,cAAc,CAAC,cAAc,UAAU;AAAA,QACvC,WAAW;AAAA;AAAA,IACf;AAAA,IACA;AAAA,EACJ;AAEA,uBAAqB,cAAc;AAEnC,SAAO;AACX;AAEO,SAAS,2BAA2B;AACvC,QAAM,QAAQ,SAAS;AAAA,IACnB;AAAA,EACJ;AACA,QAAM,SAAS,OAAO,MAAM;AAC5B,MAAI,QAAQ,QAAQ,cAAe;AAEnC,QAAM,QAAQ,CAAC,SAAS;AACpB,QAAI,EAAE,gBAAgB,aAAc;AAEpC,UAAM,OAAO,KAAK,aAAa,YAAY;AAC3C,UAAM,WAAW,KAAK,aAAa,UAAU;AAE7C,QAAI,CAAC,QAAQ,CAAC,UAAU;AACpB,cAAQ,MAAM,2CAA2C;AACzD;AAAA,IACJ;AAEA,UAAM,QAAQ,SAAS,MAAM,0BAA0B;AACvD,QAAI,CAAC,OAAO;AACR,cAAQ,MAAM,oCAAoC;AAClD;AAAA,IACJ;AAEA,UAAM,YAAY,WAAW,MAAM,CAAC,CAAC;AACrC,UAAM,YAAY,WAAW,MAAM,CAAC,CAAC;AAErC,UAAM,gBAAgB,kBAAkB,IAAI;AAE5C,QAAI,CAAC,eAAe;AAChB,WAAK,UAAU,IAAI,WAAW;AAC9B;AAAA,IACJ;AAEA,UAAM,OAAO,cAAc,sBAAsB;AACjD,QAAI,OAAO,KAAK,OAAO,KAAK,QAAQ,YAAY,OAAO;AACvD,QAAI,MAAM,KAAK,MAAM,KAAK,SAAS,YAAY,OAAO;AAEtD,UAAM,mBAAmB,yBAAyB,EAAE,KAAK,KAAK,CAAC;AAC/D,UAAM,iBAAiB;AACvB,WAAO,iBAAiB;AAExB,SAAK,MAAM,MAAM,GAAG,MAAM,cAAc;AACxC,SAAK,MAAM,OAAO,GAAG,OAAO,eAAe;AAC3C,SAAK,UAAU,OAAO,WAAW;AAAA,EACrC,CAAC;AACL;AACO,SAAS,uBAAuB;AACnC,QAAM,SAAS,SAAS;AAAA,IACpB;AAAA,EACJ;AAEA,QAAM,SAAS,OAAO,MAAM;AAC5B,MAAI,QAAQ,QAAQ,cAAe;AAEnC,SAAO,QAAQ,CAAC,UAAU;AACtB,QAAI,SAAS,iBAAiB,aAAa;AACvC,YAAM,SAAS,MAAM;AAAA,QACjB;AAAA,MACJ;AAEA,UAAI,CAAC,QAAQ;AACT,gBAAQ;AAAA,UACJ;AAAA,QACJ;AACA;AAAA,MACJ;AAEA,YAAM,SAAS,OAAO;AAAA,QAClB;AAAA,MACJ;AAEA,UAAI,CAAC,UAAU,EAAE,kBAAkB,cAAc;AAC7C,gBAAQ;AAAA,UACJ;AAAA,QACJ;AACA;AAAA,MACJ;AAEA,6BAAuB,QAAQ,KAAK;AAAA,IACxC;AAAA,EACJ,CAAC;AACL;AAEO,SAAS,+BAA+B;AAC3C,QAAM,kBAAkB,SAAS;AAAA,IAC7B;AAAA,EACJ;AAEA,MAAI,CAAC,gBAAgB,OAAQ;AAE7B,kBAAgB,QAAQ,CAAC,SAAS;AAC9B,QAAI,EAAE,gBAAgB,aAAc;AAEpC,UAAM,WAAW,SAAS;AAAA,MACtB;AAAA,IACJ;AAEA,QAAI,CAAC,SAAU;AACf,UAAM,eAAe,KAAK,aAAa,eAAe;AACtD,UAAM,aAAa,eAAe,KAAK,MAAM,YAAY,IAAI;AAC7D,UAAM,YAAY,OAAO,iBAAiB,IAAI,EAAE,WAAW;AAC3D,UAAM,eAAe,SAAS,sBAAsB;AACpD,QAAI,WAAW;AACX,YAAM,aACF,SAAS,OAAO,iBAAiB,QAAQ,EAAE,UAAU,KAAK;AAC9D,YAAM,aACF,SAAS,OAAO,iBAAiB,QAAQ,EAAE,UAAU,KAAK;AAC9D,YAAM,cACF,YAAY,eAAe,aAAa;AAE5C,WAAK,MAAM,WAAW;AACtB,WAAK,MAAM,SAAS,GAAG,OAAO,cAAc,aAAa,MAAM,cAAc,UAAU;AACvF,WAAK,MAAM,MAAM;AAAA,IACrB,OAAO;AACH,YAAM,aACF,SAAS,OAAO,iBAAiB,QAAQ,EAAE,UAAU,KAAK;AAC9D,YAAM,aACF,SAAS,OAAO,iBAAiB,QAAQ,EAAE,UAAU,KAAK;AAE9D,YAAM,cACF,YAAY,eAAe,aAAa;AAE5C,WAAK,MAAM,WAAW;AACtB,WAAK,MAAM,MAAM,GAAG,aAAa,MAAM,WAAW;AAClD,WAAK,MAAM,SAAS;AAAA,IACxB;AAEA,QAAI,CAAC,gBAAgB,cAAc;AAC/B,YAAM,aACF,SAAS,OAAO,iBAAiB,QAAQ,EAAE,UAAU,KAAK;AAC9D,YAAM,aACF,SAAS,OAAO,iBAAiB,QAAQ,EAAE,UAAU,KAAK;AAE9D,YAAM,eAAe;AAAA,QACjB;AAAA,QACA,aAAa,aAAa;AAAA,MAC9B;AACA,WAAK,aAAa,iBAAiB,KAAK,UAAU,YAAY,CAAC;AAAA,IACnE;AAEA,UAAM,WAAW,KAAK,sBAAsB;AAE5C,QAAI,CAAC,aAAa,SAAS,SAAS,OAAO,aAAa;AACpD,YAAM,aACF,SAAS,OAAO,iBAAiB,QAAQ,EAAE,UAAU,KAAK;AAC9D,YAAM,aACF,SAAS,OAAO,iBAAiB,QAAQ,EAAE,UAAU,KAAK;AAC9D,YAAM,cACF,YAAY,eAAe,aAAa;AAE5C,WAAK,MAAM,SAAS,GAAG,OAAO,cAAc,aAAa,MAAM,cAAc,UAAU;AACvF,WAAK,MAAM,MAAM;AAEjB,UAAI,cAAc;AACd,cAAM,cAAc,KAAK,MAAM,YAAY;AAC3C,oBAAY,YAAY;AACxB,aAAK,aAAa,iBAAiB,KAAK,UAAU,WAAW,CAAC;AAAA,MAClE;AAAA,IACJ,WAAW,aAAa,SAAS,MAAM,GAAG;AACtC,YAAM,aACF,SAAS,OAAO,iBAAiB,QAAQ,EAAE,UAAU,KAAK;AAC9D,YAAM,aACF,SAAS,OAAO,iBAAiB,QAAQ,EAAE,UAAU,KAAK;AAC9D,YAAM,cACF,YAAY,eAAe,aAAa;AAE5C,WAAK,MAAM,MAAM,GAAG,aAAa,MAAM,WAAW;AAClD,WAAK,MAAM,SAAS;AAEpB,UAAI,cAAc;AACd,cAAM,cAAc,KAAK,MAAM,YAAY;AAC3C,oBAAY,YAAY;AACxB,aAAK,aAAa,iBAAiB,KAAK,UAAU,WAAW,CAAC;AAAA,MAClE;AAAA,IACJ;AAAA,EACJ,CAAC;AACL;AAEO,SAAS,uBACZ,QACA,OACF;AACE,QAAM,aAAa,OAAO,sBAAsB;AAChD,QAAM,iBAAiB,OAAO;AAC9B,QAAM,gBAAgB,OAAO;AAE7B,MAAI,cAAc,MAAM,gBAAgB;AACxC,MAAI,aAAa,MAAM,eAAe;AAEtC,QAAM,aAAa,WAAW;AAC9B,QAAM,aAAa,iBAAiB,WAAW;AAE/C,MAAI,KAAK;AAET,MAAI,cAAc,aAAa;AAC3B,UAAM,WAAW,MAAM,cAAc;AAAA,EACzC,WAAW,cAAc,aAAa;AAClC,UAAM,WAAW,SAAS;AAAA,EAC9B,OAAO;AACH,UACI,aAAa,aACP,WAAW,SAAS,IACpB,KAAK,IAAI,WAAW,MAAM,cAAc,GAAG,CAAC;AAAA,EAC1D;AAEA,SAAO,WAAW,OAAO,WAAW,QAAQ,IAAI,aAAa;AAE7D,QAAM,KAAK,IAAI,KAAK,CAAC;AACrB,SAAO,KAAK,IAAI,MAAM,CAAC;AACvB,SAAO,KAAK,IAAI,MAAM,gBAAgB,UAAU;AAEhD,QAAM,MAAM,MAAM,GAAG,GAAG;AACxB,QAAM,MAAM,OAAO,GAAG,IAAI;AAE1B,wBAAsB,MAAM;AACxB,UAAM,iBAAiB,MAAM;AAC7B,QAAI,mBAAmB,aAAa;AAChC,6BAAuB,QAAQ,KAAK;AAAA,IACxC;AAAA,EACJ,CAAC;AACL;AAEO,SAAS,uBAA6B;AACzC,QAAM,QAAQ,SAAS;AAAA,IACnB;AAAA,EACJ;AACA,SAAO,QAAQ,CAAC,SAAS,MAAM,OAAO,CAAC;AAC3C;AAEO,SAAS,qBAA2B;AACvC,QAAM,QAAQ,SAAS;AAAA,IACnB;AAAA,EACJ;AACA,SAAO,QAAQ,CAAC,SAAS,MAAM,UAAU,IAAI,WAAW,CAAC;AAC7D;AAEO,SAAS,qBAA2B;AACvC,QAAM,QAAQ,SAAS;AAAA,IACnB;AAAA,EACJ;AACA,SAAO,QAAQ,CAAC,SAAS,MAAM,UAAU,OAAO,WAAW,CAAC;AAChE;AAEO,SAAS,iBAAiB,WAAyB;AACtD,QAAM,SAAS,SAAS,cAAc,kBAAkB,SAAS,IAAI;AACrE,UAAQ,OAAO;AACnB;AAEO,SAAS,kBAAkB;AAAA,EAC9B,YAAY;AAAA,EACZ;AACJ,GAAiC;AAC7B,WAAS;AAAA,IACL,IAAI,YAAY,qBAAqB;AAAA,MACjC,QAAQ,EAAE,WAAW,OAAO;AAAA,IAChC,CAAC;AAAA,EACL;AACJ;AAEO,SAAS,gBAAgB,WAAyB;AACrD,oBAAkB,EAAE,WAAW,QAAQ,OAAO,CAAC;AACnD;AAEO,SAAS,eAAe,QAA8B;AACzD,SAAO,MAAM,KAAK,OAAO,SAAS,EAAE;AAAA,IAAK,CAAC,cACtC,UAAU,WAAW,QAAQ;AAAA,EACjC;AACJ;AAEO,SAAS,qBAAqB,SAA6B;AAC9D,4BAA0B;AAAA,IACtB,+BAA+B;AAAA,IAC/B;AAAA,EACJ;AACJ;AAEO,SAAS,qBAAqB;AACjC,QAAM,QAAQ,SAAS;AAAA,IACnB;AAAA,EACJ;AACA,SAAO,QAAQ,CAAC,SAAS;AACrB,QAAI,CAAC,KAAK,aAAa,WAAW,GAAG;AACjC,WAAK,OAAO;AAAA,IAChB;AAAA,EACJ,CAAC;AACL;AAEA,IAAM,cAAc;AAAA,EAChB,YAAY;AAAA,EACZ,YAAY;AAChB;AAEA,IAAI,sBAAsB;AAEnB,IAAM,qBAAqB,oBAAI,IAAiC;AAEvE,SAAS,MAAM,IAA2B;AACtC,SAAO,IAAI,QAAQ,CAAC,YAAY,WAAW,SAAS,EAAE,CAAC;AAC3D;AAEA,SAAS,gBAAgB,UAAuC;AAC5D,MAAI,CAAC,mBAAmB,IAAI,QAAQ,GAAG;AACnC,uBAAmB,IAAI,UAAU;AAAA,MAC7B;AAAA,MACA,UAAU;AAAA,MACV,YAAY;AAAA,IAChB,CAAC;AAAA,EACL;AACA,SAAO,mBAAmB,IAAI,QAAQ;AAC1C;AAEA,SAAS,mBAAmB,UAAkB,YAA2B;AACrE,QAAM,SAAS,gBAAgB,QAAQ;AACvC,SAAO,aAAa;AACpB,qBAAmB,IAAI,UAAU,MAAM;AAC3C;AAEO,SAAS,kBAAkB,UAAwB;AACtD,qBAAmB,OAAO,QAAQ;AACtC;AAEO,SAAS,uBAA6B;AACzC,qBAAmB,MAAM;AACzB,wBAAsB;AAC1B;AAEA,eAAe,cAAc,QAAiD;AAC1E,MAAI,SAAS,gBAAgB,OAAO,GAAG;AAEvC,SAAO,OAAO,WAAW,YAAY,YAAY;AAC7C,QAAI;AACA,YAAM,SAAS,eAAe,MAAM;AACpC,UAAI,WAAW,QAAW;AACtB,2BAAmB,OAAO,KAAK,IAAI;AACnC,eAAO;AAAA,MACX;AAEA,aAAO;AACP,yBAAmB,OAAO,KAAK,KAAK;AAEpC,UAAI,OAAO,WAAW,YAAY,YAAY;AAC1C,cAAM,MAAM,YAAY,UAAU;AAAA,MACtC;AAAA,IACJ,SAAS,OAAO;AACZ,cAAQ,MAAM,0BAA0B,OAAO,GAAG,KAAK,KAAK;AAC5D,aAAO;AACP,UAAI,OAAO,YAAY,YAAY,YAAY;AAC3C;AAAA,MACJ;AACA,YAAM,MAAM,YAAY,UAAU;AAAA,IACtC;AAAA,EACJ;AAEA,SAAO,OAAO;AAClB;AAEA,eAAsB,oBAClB,SACiB;AACjB,MAAI,oBAAqB,QAAO,CAAC;AAEjC,MAAI;AACA,0BAAsB;AACtB,UAAM,oBAAoB,wBAAwB,OAAO;AACzD,QAAI,kBAAkB,WAAW,EAAG,QAAO,CAAC;AAE5C,UAAM,oBACF,MAAM,QAAQ;AAAA,MACV,kBAAkB,IAAI,CAAC,WAAW,cAAc,MAAM,CAAC;AAAA,IAC3D,GACF,OAAO,OAAO;AAEhB,qBAAiB,QAAQ,iBAAiB;AAC1C,WAAO;AAAA,EACX,UAAE;AACE,0BAAsB;AAAA,EAC1B;AACJ;AAEO,SAAS,wBAAwB,SAAqC;AACzE,SAAO,QAAQ,OAAO,CAAC,WAAW;AAC9B,UAAM,iBAAiB,SAAS;AAAA,MAC5B,eAAe,OAAO,GAAG;AAAA,IAC7B;AACA,QAAI,gBAAgB;AAChB,yBAAmB,OAAO,KAAK,IAAI;AACnC,aAAO;AAAA,IACX;AACA,WAAO;AAAA,EACX,CAAC;AACL;AAEA,SAAS,kBAAkB,OAAmC;AAC1D,QAAM,SAAS,SAAS;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,EACJ;AACA,SAAO,OAAO;AAClB;","names":[]}

package/dist/modern/visualBuilder/generators/generateToolbar.cjs

@@ -40,11 +40,16 @@ var import_FieldToolbar = __toESM(require("../components/FieldToolbar.cjs"), 1);
 var import_preact = require("preact");
 var import_fieldLabelWrapper = __toESM(require("../components/fieldLabelWrapper.cjs"), 1);
 var import_jsx_runtime = require("preact/jsx-runtime");
-function appendFocusedToolbar(eventDetails, focusedToolbarElement, hideOverlay) {
+function appendFocusedToolbar(eventDetails, focusedToolbarElement, hideOverlay, isVariant = false) {
   appendFieldPathDropdown(eventDetails, focusedToolbarElement);
-  appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay);
+  appendFieldToolbar(
+    eventDetails,
+    focusedToolbarElement,
+    hideOverlay,
+    isVariant
+  );
 }
-function appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay) {
+function appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay, isVariant = false) {
   if (focusedToolbarElement.querySelector(
     ".visual-builder__focused-toolbar__multiple-field-toolbar"
   ))
@@ -55,7 +60,8 @@ function appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay) {
       import_FieldToolbar.default,
       {
         eventDetails,
-        hideOverlay
+        hideOverlay,
+        isVariant
       }
     ),
     wrapper
@@ -63,7 +69,9 @@ function appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay) {
   focusedToolbarElement.append(wrapper);
 }
 function appendFieldPathDropdown(eventDetails, focusedToolbarElement) {
-  if (document.querySelector(".visual-builder__focused-toolbar__field-label-wrapper"))
+  if (document.querySelector(
+    ".visual-builder__focused-toolbar__field-label-wrapper"
+  ))
     return;
   const { editableElement: targetElement, fieldMetadata } = eventDetails;
   const targetElementDimension = targetElement.getBoundingClientRect();

package/dist/modern/visualBuilder/generators/generateToolbar.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/generators/generateToolbar.tsx"],"sourcesContent":["import { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    DATA_CSLP_ATTR_SELECTOR,\n    LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,\n    RIGHT_EDGE_BUFFER,\n    TOOLBAR_EDGE_BUFFER,\n    TOP_EDGE_BUFFER,\n} from \"../utils/constants\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\n\nimport FieldToolbarComponent from \"../components/FieldToolbar\";\nimport { render } from \"preact\";\nimport FieldLabelWrapperComponent from \"../components/fieldLabelWrapper\";\n\nexport function appendFocusedToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void\n): void {\n    appendFieldPathDropdown(eventDetails, focusedToolbarElement);\n    appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay);\n}\n\nexport function appendFieldToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void\n): void {\n    if (\n        focusedToolbarElement.querySelector(\n            \".visual-builder__focused-toolbar__multiple-field-toolbar\"\n        )\n    )\n        return;\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldToolbarComponent\n            eventDetails={eventDetails}\n            hideOverlay={hideOverlay}\n        />,\n        wrapper\n    );\n\n    focusedToolbarElement.append(wrapper);\n}\n\nexport function appendFieldPathDropdown(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement\n): void {\n    if(document.querySelector(\".visual-builder__focused-toolbar__field-label-wrapper\"))\n        return;\n    const { editableElement: targetElement, fieldMetadata } = eventDetails;\n    const targetElementDimension = targetElement.getBoundingClientRect();\n\n    const distanceFromTop =\n        targetElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n    // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).\n    const adjustedDistanceFromTop =\n        targetElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n            ? distanceFromTop + targetElementDimension.height + TOP_EDGE_BUFFER\n            : distanceFromTop;\n\n    const distanceFromLeft =\n        targetElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n    const adjustedDistanceFromLeft = Math.max(\n        distanceFromLeft,\n        TOOLBAR_EDGE_BUFFER\n    );\n\n    const targetElementRightEdgeOffset =\n        window.scrollX + window.innerWidth - targetElementDimension.left;\n\n    if (targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER) {\n        // Overflow / Cutoff on right edge\n        focusedToolbarElement.style.justifyContent = \"flex-end\";\n        focusedToolbarElement.style.left = `${\n            targetElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n        }px`;\n    } else {\n        focusedToolbarElement.style.justifyContent = \"flex-start\"; // default\n        focusedToolbarElement.style.left = `${adjustedDistanceFromLeft}px`;\n    }\n\n    focusedToolbarElement.style.top = `${adjustedDistanceFromTop}px`;\n\n    const parentPaths = collectParentCSLPPaths(targetElement, 2);\n\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldLabelWrapperComponent\n            fieldMetadata={fieldMetadata}\n            eventDetails={eventDetails}\n            parentPaths={parentPaths}\n            getParentEditableElement={(cslp: string) => {\n                const parentElement = targetElement.closest(\n                    `[${DATA_CSLP_ATTR_SELECTOR}=\"${cslp}\"]`\n                ) as HTMLElement | null;\n                return parentElement;\n            }}\n        />,\n        wrapper\n    );\n\n    focusedToolbarElement.appendChild(wrapper);\n}\n\nfunction collectParentCSLPPaths(\n    targetElement: Element,\n    count: number\n): Array<string> {\n    const cslpPaths: Array<string> = [];\n    let currentElement = targetElement.parentElement;\n\n    while (count > 0 || currentElement === window.document.body) {\n        if (!currentElement) {\n            return cslpPaths;\n        }\n\n        if (currentElement.hasAttribute(DATA_CSLP_ATTR_SELECTOR)) {\n            cslpPaths.push(\n                currentElement.getAttribute(DATA_CSLP_ATTR_SELECTOR) as string\n            );\n            count--;\n        }\n        currentElement = currentElement.parentElement;\n    }\n\n    return cslpPaths;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAMO;AAIP,0BAAkC;AAClC,oBAAuB;AACvB,+BAAuC;AAwB/B;AAtBD,SAAS,qBACZ,cACA,uBACA,aACI;AACJ,0BAAwB,cAAc,qBAAqB;AAC3D,qBAAmB,cAAc,uBAAuB,WAAW;AACvE;AAEO,SAAS,mBACZ,cACA,uBACA,aACI;AACJ,MACI,sBAAsB;AAAA,IAClB;AAAA,EACJ;AAEA;AACJ,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC,oBAAAA;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,wBAAsB,OAAO,OAAO;AACxC;AAEO,SAAS,wBACZ,cACA,uBACI;AACJ,MAAG,SAAS,cAAc,uDAAuD;AAC7E;AACJ,QAAM,EAAE,iBAAiB,eAAe,cAAc,IAAI;AAC1D,QAAM,yBAAyB,cAAc,sBAAsB;AAEnE,QAAM,kBACF,uBAAuB,MAAM,OAAO,UAAU;AAElD,QAAM,0BACF,uBAAuB,MAAM,OAAO,UAAU,mCACxC,kBAAkB,uBAAuB,SAAS,mCAClD;AAEV,QAAM,mBACF,uBAAuB,OAAO;AAClC,QAAM,2BAA2B,KAAK;AAAA,IAClC;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,+BACF,OAAO,UAAU,OAAO,aAAa,uBAAuB;AAEhE,MAAI,+BAA+B,oCAAmB;AAElD,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAC/B,uBAAuB,QAAQ,iDACnC;AAAA,EACJ,OAAO;AACH,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAAG,wBAAwB;AAAA,EAClE;AAEA,wBAAsB,MAAM,MAAM,GAAG,uBAAuB;AAE5D,QAAM,cAAc,uBAAuB,eAAe,CAAC;AAE3D,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC,yBAAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA,0BAA0B,CAAC,SAAiB;AACxC,gBAAM,gBAAgB,cAAc;AAAA,YAChC,IAAI,wCAAuB,KAAK,IAAI;AAAA,UACxC;AACA,iBAAO;AAAA,QACX;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,wBAAsB,YAAY,OAAO;AAC7C;AAEA,SAAS,uBACL,eACA,OACa;AACb,QAAM,YAA2B,CAAC;AAClC,MAAI,iBAAiB,cAAc;AAEnC,SAAO,QAAQ,KAAK,mBAAmB,OAAO,SAAS,MAAM;AACzD,QAAI,CAAC,gBAAgB;AACjB,aAAO;AAAA,IACX;AAEA,QAAI,eAAe,aAAa,wCAAuB,GAAG;AACtD,gBAAU;AAAA,QACN,eAAe,aAAa,wCAAuB;AAAA,MACvD;AACA;AAAA,IACJ;AACA,qBAAiB,eAAe;AAAA,EACpC;AAEA,SAAO;AACX;","names":["FieldToolbarComponent","FieldLabelWrapperComponent"]}
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateToolbar.tsx"],"sourcesContent":["import { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    DATA_CSLP_ATTR_SELECTOR,\n    LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,\n    RIGHT_EDGE_BUFFER,\n    TOOLBAR_EDGE_BUFFER,\n    TOP_EDGE_BUFFER,\n} from \"../utils/constants\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\n\nimport FieldToolbarComponent from \"../components/FieldToolbar\";\nimport { render } from \"preact\";\nimport FieldLabelWrapperComponent from \"../components/fieldLabelWrapper\";\n\nexport function appendFocusedToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void,\n    isVariant: boolean = false\n): void {\n    appendFieldPathDropdown(eventDetails, focusedToolbarElement);\n    appendFieldToolbar(\n        eventDetails,\n        focusedToolbarElement,\n        hideOverlay,\n        isVariant\n    );\n}\n\nexport function appendFieldToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void,\n    isVariant: boolean = false\n): void {\n    if (\n        focusedToolbarElement.querySelector(\n            \".visual-builder__focused-toolbar__multiple-field-toolbar\"\n        )\n    )\n        return;\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldToolbarComponent\n            eventDetails={eventDetails}\n            hideOverlay={hideOverlay}\n            isVariant={isVariant}\n        />,\n        wrapper\n    );\n    focusedToolbarElement.append(wrapper);\n}\n\nexport function appendFieldPathDropdown(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement\n): void {\n    if (\n        document.querySelector(\n            \".visual-builder__focused-toolbar__field-label-wrapper\"\n        )\n    )\n        return;\n    const { editableElement: targetElement, fieldMetadata } = eventDetails;\n    const targetElementDimension = targetElement.getBoundingClientRect();\n\n    const distanceFromTop =\n        targetElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n    // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).\n    const adjustedDistanceFromTop =\n        targetElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n            ? distanceFromTop + targetElementDimension.height + TOP_EDGE_BUFFER\n            : distanceFromTop;\n\n    const distanceFromLeft =\n        targetElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n    const adjustedDistanceFromLeft = Math.max(\n        distanceFromLeft,\n        TOOLBAR_EDGE_BUFFER\n    );\n\n    const targetElementRightEdgeOffset =\n        window.scrollX + window.innerWidth - targetElementDimension.left;\n\n    if (targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER) {\n        // Overflow / Cutoff on right edge\n        focusedToolbarElement.style.justifyContent = \"flex-end\";\n        focusedToolbarElement.style.left = `${\n            targetElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n        }px`;\n    } else {\n        focusedToolbarElement.style.justifyContent = \"flex-start\"; // default\n        focusedToolbarElement.style.left = `${adjustedDistanceFromLeft}px`;\n    }\n\n    focusedToolbarElement.style.top = `${adjustedDistanceFromTop}px`;\n\n    const parentPaths = collectParentCSLPPaths(targetElement, 2);\n\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldLabelWrapperComponent\n            fieldMetadata={fieldMetadata}\n            eventDetails={eventDetails}\n            parentPaths={parentPaths}\n            getParentEditableElement={(cslp: string) => {\n                const parentElement = targetElement.closest(\n                    `[${DATA_CSLP_ATTR_SELECTOR}=\"${cslp}\"]`\n                ) as HTMLElement | null;\n                return parentElement;\n            }}\n        />,\n        wrapper\n    );\n\n    focusedToolbarElement.appendChild(wrapper);\n}\n\nfunction collectParentCSLPPaths(\n    targetElement: Element,\n    count: number\n): Array<string> {\n    const cslpPaths: Array<string> = [];\n    let currentElement = targetElement.parentElement;\n\n    while (count > 0 || currentElement === window.document.body) {\n        if (!currentElement) {\n            return cslpPaths;\n        }\n\n        if (currentElement.hasAttribute(DATA_CSLP_ATTR_SELECTOR)) {\n            cslpPaths.push(\n                currentElement.getAttribute(DATA_CSLP_ATTR_SELECTOR) as string\n            );\n            count--;\n        }\n        currentElement = currentElement.parentElement;\n    }\n\n    return cslpPaths;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAMO;AAIP,0BAAkC;AAClC,oBAAuB;AACvB,+BAAuC;AA+B/B;AA7BD,SAAS,qBACZ,cACA,uBACA,aACA,YAAqB,OACjB;AACJ,0BAAwB,cAAc,qBAAqB;AAC3D;AAAA,IACI;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AACJ;AAEO,SAAS,mBACZ,cACA,uBACA,aACA,YAAqB,OACjB;AACJ,MACI,sBAAsB;AAAA,IAClB;AAAA,EACJ;AAEA;AACJ,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC,oBAAAA;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AACA,wBAAsB,OAAO,OAAO;AACxC;AAEO,SAAS,wBACZ,cACA,uBACI;AACJ,MACI,SAAS;AAAA,IACL;AAAA,EACJ;AAEA;AACJ,QAAM,EAAE,iBAAiB,eAAe,cAAc,IAAI;AAC1D,QAAM,yBAAyB,cAAc,sBAAsB;AAEnE,QAAM,kBACF,uBAAuB,MAAM,OAAO,UAAU;AAElD,QAAM,0BACF,uBAAuB,MAAM,OAAO,UAAU,mCACxC,kBAAkB,uBAAuB,SAAS,mCAClD;AAEV,QAAM,mBACF,uBAAuB,OAAO;AAClC,QAAM,2BAA2B,KAAK;AAAA,IAClC;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,+BACF,OAAO,UAAU,OAAO,aAAa,uBAAuB;AAEhE,MAAI,+BAA+B,oCAAmB;AAElD,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAC/B,uBAAuB,QAAQ,iDACnC;AAAA,EACJ,OAAO;AACH,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAAG,wBAAwB;AAAA,EAClE;AAEA,wBAAsB,MAAM,MAAM,GAAG,uBAAuB;AAE5D,QAAM,cAAc,uBAAuB,eAAe,CAAC;AAE3D,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC,yBAAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA,0BAA0B,CAAC,SAAiB;AACxC,gBAAM,gBAAgB,cAAc;AAAA,YAChC,IAAI,wCAAuB,KAAK,IAAI;AAAA,UACxC;AACA,iBAAO;AAAA,QACX;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,wBAAsB,YAAY,OAAO;AAC7C;AAEA,SAAS,uBACL,eACA,OACa;AACb,QAAM,YAA2B,CAAC;AAClC,MAAI,iBAAiB,cAAc;AAEnC,SAAO,QAAQ,KAAK,mBAAmB,OAAO,SAAS,MAAM;AACzD,QAAI,CAAC,gBAAgB;AACjB,aAAO;AAAA,IACX;AAEA,QAAI,eAAe,aAAa,wCAAuB,GAAG;AACtD,gBAAU;AAAA,QACN,eAAe,aAAa,wCAAuB;AAAA,MACvD;AACA;AAAA,IACJ;AACA,qBAAiB,eAAe;AAAA,EACpC;AAEA,SAAO;AACX;","names":["FieldToolbarComponent","FieldLabelWrapperComponent"]}

package/dist/modern/visualBuilder/generators/generateToolbar.d.cts

@@ -1,8 +1,8 @@
 import { VisualBuilderCslpEventDetails } from '../types/visualBuilder.types.cjs';
 import '../../cslp/types/cslp.types.cjs';
 
-declare function appendFocusedToolbar(eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement, hideOverlay: () => void): void;
-declare function appendFieldToolbar(eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement, hideOverlay: () => void): void;
+declare function appendFocusedToolbar(eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement, hideOverlay: () => void, isVariant?: boolean): void;
+declare function appendFieldToolbar(eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement, hideOverlay: () => void, isVariant?: boolean): void;
 declare function appendFieldPathDropdown(eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement): void;
 
 export { appendFieldPathDropdown, appendFieldToolbar, appendFocusedToolbar };

package/dist/modern/visualBuilder/generators/generateToolbar.d.ts

@@ -1,8 +1,8 @@
 import { VisualBuilderCslpEventDetails } from '../types/visualBuilder.types.js';
 import '../../cslp/types/cslp.types.js';
 
-declare function appendFocusedToolbar(eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement, hideOverlay: () => void): void;
-declare function appendFieldToolbar(eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement, hideOverlay: () => void): void;
+declare function appendFocusedToolbar(eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement, hideOverlay: () => void, isVariant?: boolean): void;
+declare function appendFieldToolbar(eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement, hideOverlay: () => void, isVariant?: boolean): void;
 declare function appendFieldPathDropdown(eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement): void;
 
 export { appendFieldPathDropdown, appendFieldToolbar, appendFocusedToolbar };

package/dist/modern/visualBuilder/generators/generateToolbar.js

@@ -12,11 +12,16 @@ import FieldToolbarComponent from "../components/FieldToolbar.js";
 import { render } from "preact";
 import FieldLabelWrapperComponent from "../components/fieldLabelWrapper.js";
 import { jsx } from "preact/jsx-runtime";
-function appendFocusedToolbar(eventDetails, focusedToolbarElement, hideOverlay) {
+function appendFocusedToolbar(eventDetails, focusedToolbarElement, hideOverlay, isVariant = false) {
   appendFieldPathDropdown(eventDetails, focusedToolbarElement);
-  appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay);
+  appendFieldToolbar(
+    eventDetails,
+    focusedToolbarElement,
+    hideOverlay,
+    isVariant
+  );
 }
-function appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay) {
+function appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay, isVariant = false) {
   if (focusedToolbarElement.querySelector(
     ".visual-builder__focused-toolbar__multiple-field-toolbar"
   ))
@@ -27,7 +32,8 @@ function appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay) {
       FieldToolbarComponent,
       {
         eventDetails,
-        hideOverlay
+        hideOverlay,
+        isVariant
       }
     ),
     wrapper
@@ -35,7 +41,9 @@ function appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay) {
   focusedToolbarElement.append(wrapper);
 }
 function appendFieldPathDropdown(eventDetails, focusedToolbarElement) {
-  if (document.querySelector(".visual-builder__focused-toolbar__field-label-wrapper"))
+  if (document.querySelector(
+    ".visual-builder__focused-toolbar__field-label-wrapper"
+  ))
     return;
   const { editableElement: targetElement, fieldMetadata } = eventDetails;
   const targetElementDimension = targetElement.getBoundingClientRect();

package/dist/modern/visualBuilder/generators/generateToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/generators/generateToolbar.tsx"],"sourcesContent":["import { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    DATA_CSLP_ATTR_SELECTOR,\n    LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,\n    RIGHT_EDGE_BUFFER,\n    TOOLBAR_EDGE_BUFFER,\n    TOP_EDGE_BUFFER,\n} from \"../utils/constants\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\n\nimport FieldToolbarComponent from \"../components/FieldToolbar\";\nimport { render } from \"preact\";\nimport FieldLabelWrapperComponent from \"../components/fieldLabelWrapper\";\n\nexport function appendFocusedToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void\n): void {\n    appendFieldPathDropdown(eventDetails, focusedToolbarElement);\n    appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay);\n}\n\nexport function appendFieldToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void\n): void {\n    if (\n        focusedToolbarElement.querySelector(\n            \".visual-builder__focused-toolbar__multiple-field-toolbar\"\n        )\n    )\n        return;\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldToolbarComponent\n            eventDetails={eventDetails}\n            hideOverlay={hideOverlay}\n        />,\n        wrapper\n    );\n\n    focusedToolbarElement.append(wrapper);\n}\n\nexport function appendFieldPathDropdown(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement\n): void {\n    if(document.querySelector(\".visual-builder__focused-toolbar__field-label-wrapper\"))\n        return;\n    const { editableElement: targetElement, fieldMetadata } = eventDetails;\n    const targetElementDimension = targetElement.getBoundingClientRect();\n\n    const distanceFromTop =\n        targetElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n    // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).\n    const adjustedDistanceFromTop =\n        targetElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n            ? distanceFromTop + targetElementDimension.height + TOP_EDGE_BUFFER\n            : distanceFromTop;\n\n    const distanceFromLeft =\n        targetElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n    const adjustedDistanceFromLeft = Math.max(\n        distanceFromLeft,\n        TOOLBAR_EDGE_BUFFER\n    );\n\n    const targetElementRightEdgeOffset =\n        window.scrollX + window.innerWidth - targetElementDimension.left;\n\n    if (targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER) {\n        // Overflow / Cutoff on right edge\n        focusedToolbarElement.style.justifyContent = \"flex-end\";\n        focusedToolbarElement.style.left = `${\n            targetElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n        }px`;\n    } else {\n        focusedToolbarElement.style.justifyContent = \"flex-start\"; // default\n        focusedToolbarElement.style.left = `${adjustedDistanceFromLeft}px`;\n    }\n\n    focusedToolbarElement.style.top = `${adjustedDistanceFromTop}px`;\n\n    const parentPaths = collectParentCSLPPaths(targetElement, 2);\n\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldLabelWrapperComponent\n            fieldMetadata={fieldMetadata}\n            eventDetails={eventDetails}\n            parentPaths={parentPaths}\n            getParentEditableElement={(cslp: string) => {\n                const parentElement = targetElement.closest(\n                    `[${DATA_CSLP_ATTR_SELECTOR}=\"${cslp}\"]`\n                ) as HTMLElement | null;\n                return parentElement;\n            }}\n        />,\n        wrapper\n    );\n\n    focusedToolbarElement.appendChild(wrapper);\n}\n\nfunction collectParentCSLPPaths(\n    targetElement: Element,\n    count: number\n): Array<string> {\n    const cslpPaths: Array<string> = [];\n    let currentElement = targetElement.parentElement;\n\n    while (count > 0 || currentElement === window.document.body) {\n        if (!currentElement) {\n            return cslpPaths;\n        }\n\n        if (currentElement.hasAttribute(DATA_CSLP_ATTR_SELECTOR)) {\n            cslpPaths.push(\n                currentElement.getAttribute(DATA_CSLP_ATTR_SELECTOR) as string\n            );\n            count--;\n        }\n        currentElement = currentElement.parentElement;\n    }\n\n    return cslpPaths;\n}\n"],"mappings":";;;AACA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAIP,OAAO,2BAA2B;AAClC,SAAS,cAAc;AACvB,OAAO,gCAAgC;AAwB/B;AAtBD,SAAS,qBACZ,cACA,uBACA,aACI;AACJ,0BAAwB,cAAc,qBAAqB;AAC3D,qBAAmB,cAAc,uBAAuB,WAAW;AACvE;AAEO,SAAS,mBACZ,cACA,uBACA,aACI;AACJ,MACI,sBAAsB;AAAA,IAClB;AAAA,EACJ;AAEA;AACJ,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC;AAAA;AAAA,QACG;AAAA,QACA;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,wBAAsB,OAAO,OAAO;AACxC;AAEO,SAAS,wBACZ,cACA,uBACI;AACJ,MAAG,SAAS,cAAc,uDAAuD;AAC7E;AACJ,QAAM,EAAE,iBAAiB,eAAe,cAAc,IAAI;AAC1D,QAAM,yBAAyB,cAAc,sBAAsB;AAEnE,QAAM,kBACF,uBAAuB,MAAM,OAAO,UAAU;AAElD,QAAM,0BACF,uBAAuB,MAAM,OAAO,UAAU,kBACxC,kBAAkB,uBAAuB,SAAS,kBAClD;AAEV,QAAM,mBACF,uBAAuB,OAAO;AAClC,QAAM,2BAA2B,KAAK;AAAA,IAClC;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,+BACF,OAAO,UAAU,OAAO,aAAa,uBAAuB;AAEhE,MAAI,+BAA+B,mBAAmB;AAElD,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAC/B,uBAAuB,QAAQ,gCACnC;AAAA,EACJ,OAAO;AACH,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAAG,wBAAwB;AAAA,EAClE;AAEA,wBAAsB,MAAM,MAAM,GAAG,uBAAuB;AAE5D,QAAM,cAAc,uBAAuB,eAAe,CAAC;AAE3D,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC;AAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA,0BAA0B,CAAC,SAAiB;AACxC,gBAAM,gBAAgB,cAAc;AAAA,YAChC,IAAI,uBAAuB,KAAK,IAAI;AAAA,UACxC;AACA,iBAAO;AAAA,QACX;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,wBAAsB,YAAY,OAAO;AAC7C;AAEA,SAAS,uBACL,eACA,OACa;AACb,QAAM,YAA2B,CAAC;AAClC,MAAI,iBAAiB,cAAc;AAEnC,SAAO,QAAQ,KAAK,mBAAmB,OAAO,SAAS,MAAM;AACzD,QAAI,CAAC,gBAAgB;AACjB,aAAO;AAAA,IACX;AAEA,QAAI,eAAe,aAAa,uBAAuB,GAAG;AACtD,gBAAU;AAAA,QACN,eAAe,aAAa,uBAAuB;AAAA,MACvD;AACA;AAAA,IACJ;AACA,qBAAiB,eAAe;AAAA,EACpC;AAEA,SAAO;AACX;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateToolbar.tsx"],"sourcesContent":["import { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    DATA_CSLP_ATTR_SELECTOR,\n    LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,\n    RIGHT_EDGE_BUFFER,\n    TOOLBAR_EDGE_BUFFER,\n    TOP_EDGE_BUFFER,\n} from \"../utils/constants\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\n\nimport FieldToolbarComponent from \"../components/FieldToolbar\";\nimport { render } from \"preact\";\nimport FieldLabelWrapperComponent from \"../components/fieldLabelWrapper\";\n\nexport function appendFocusedToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void,\n    isVariant: boolean = false\n): void {\n    appendFieldPathDropdown(eventDetails, focusedToolbarElement);\n    appendFieldToolbar(\n        eventDetails,\n        focusedToolbarElement,\n        hideOverlay,\n        isVariant\n    );\n}\n\nexport function appendFieldToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void,\n    isVariant: boolean = false\n): void {\n    if (\n        focusedToolbarElement.querySelector(\n            \".visual-builder__focused-toolbar__multiple-field-toolbar\"\n        )\n    )\n        return;\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldToolbarComponent\n            eventDetails={eventDetails}\n            hideOverlay={hideOverlay}\n            isVariant={isVariant}\n        />,\n        wrapper\n    );\n    focusedToolbarElement.append(wrapper);\n}\n\nexport function appendFieldPathDropdown(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement\n): void {\n    if (\n        document.querySelector(\n            \".visual-builder__focused-toolbar__field-label-wrapper\"\n        )\n    )\n        return;\n    const { editableElement: targetElement, fieldMetadata } = eventDetails;\n    const targetElementDimension = targetElement.getBoundingClientRect();\n\n    const distanceFromTop =\n        targetElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n    // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).\n    const adjustedDistanceFromTop =\n        targetElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n            ? distanceFromTop + targetElementDimension.height + TOP_EDGE_BUFFER\n            : distanceFromTop;\n\n    const distanceFromLeft =\n        targetElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n    const adjustedDistanceFromLeft = Math.max(\n        distanceFromLeft,\n        TOOLBAR_EDGE_BUFFER\n    );\n\n    const targetElementRightEdgeOffset =\n        window.scrollX + window.innerWidth - targetElementDimension.left;\n\n    if (targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER) {\n        // Overflow / Cutoff on right edge\n        focusedToolbarElement.style.justifyContent = \"flex-end\";\n        focusedToolbarElement.style.left = `${\n            targetElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n        }px`;\n    } else {\n        focusedToolbarElement.style.justifyContent = \"flex-start\"; // default\n        focusedToolbarElement.style.left = `${adjustedDistanceFromLeft}px`;\n    }\n\n    focusedToolbarElement.style.top = `${adjustedDistanceFromTop}px`;\n\n    const parentPaths = collectParentCSLPPaths(targetElement, 2);\n\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldLabelWrapperComponent\n            fieldMetadata={fieldMetadata}\n            eventDetails={eventDetails}\n            parentPaths={parentPaths}\n            getParentEditableElement={(cslp: string) => {\n                const parentElement = targetElement.closest(\n                    `[${DATA_CSLP_ATTR_SELECTOR}=\"${cslp}\"]`\n                ) as HTMLElement | null;\n                return parentElement;\n            }}\n        />,\n        wrapper\n    );\n\n    focusedToolbarElement.appendChild(wrapper);\n}\n\nfunction collectParentCSLPPaths(\n    targetElement: Element,\n    count: number\n): Array<string> {\n    const cslpPaths: Array<string> = [];\n    let currentElement = targetElement.parentElement;\n\n    while (count > 0 || currentElement === window.document.body) {\n        if (!currentElement) {\n            return cslpPaths;\n        }\n\n        if (currentElement.hasAttribute(DATA_CSLP_ATTR_SELECTOR)) {\n            cslpPaths.push(\n                currentElement.getAttribute(DATA_CSLP_ATTR_SELECTOR) as string\n            );\n            count--;\n        }\n        currentElement = currentElement.parentElement;\n    }\n\n    return cslpPaths;\n}\n"],"mappings":";;;AACA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAIP,OAAO,2BAA2B;AAClC,SAAS,cAAc;AACvB,OAAO,gCAAgC;AA+B/B;AA7BD,SAAS,qBACZ,cACA,uBACA,aACA,YAAqB,OACjB;AACJ,0BAAwB,cAAc,qBAAqB;AAC3D;AAAA,IACI;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AACJ;AAEO,SAAS,mBACZ,cACA,uBACA,aACA,YAAqB,OACjB;AACJ,MACI,sBAAsB;AAAA,IAClB;AAAA,EACJ;AAEA;AACJ,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC;AAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AACA,wBAAsB,OAAO,OAAO;AACxC;AAEO,SAAS,wBACZ,cACA,uBACI;AACJ,MACI,SAAS;AAAA,IACL;AAAA,EACJ;AAEA;AACJ,QAAM,EAAE,iBAAiB,eAAe,cAAc,IAAI;AAC1D,QAAM,yBAAyB,cAAc,sBAAsB;AAEnE,QAAM,kBACF,uBAAuB,MAAM,OAAO,UAAU;AAElD,QAAM,0BACF,uBAAuB,MAAM,OAAO,UAAU,kBACxC,kBAAkB,uBAAuB,SAAS,kBAClD;AAEV,QAAM,mBACF,uBAAuB,OAAO;AAClC,QAAM,2BAA2B,KAAK;AAAA,IAClC;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,+BACF,OAAO,UAAU,OAAO,aAAa,uBAAuB;AAEhE,MAAI,+BAA+B,mBAAmB;AAElD,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAC/B,uBAAuB,QAAQ,gCACnC;AAAA,EACJ,OAAO;AACH,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAAG,wBAAwB;AAAA,EAClE;AAEA,wBAAsB,MAAM,MAAM,GAAG,uBAAuB;AAE5D,QAAM,cAAc,uBAAuB,eAAe,CAAC;AAE3D,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC;AAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA,0BAA0B,CAAC,SAAiB;AACxC,gBAAM,gBAAgB,cAAc;AAAA,YAChC,IAAI,uBAAuB,KAAK,IAAI;AAAA,UACxC;AACA,iBAAO;AAAA,QACX;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,wBAAsB,YAAY,OAAO;AAC7C;AAEA,SAAS,uBACL,eACA,OACa;AACb,QAAM,YAA2B,CAAC;AAClC,MAAI,iBAAiB,cAAc;AAEnC,SAAO,QAAQ,KAAK,mBAAmB,OAAO,SAAS,MAAM;AACzD,QAAI,CAAC,gBAAgB;AACjB,aAAO;AAAA,IACX;AAEA,QAAI,eAAe,aAAa,uBAAuB,GAAG;AACtD,gBAAU;AAAA,QACN,eAAe,aAAa,uBAAuB;AAAA,MACvD;AACA;AAAA,IACJ;AACA,qBAAiB,eAAe;AAAA,EACpC;AAEA,SAAO;AACX;","names":[]}

package/dist/modern/visualBuilder/hooks/useCollabOperations.cjs

@@ -37,11 +37,12 @@ var import_visualBuilderPostMessage = __toESM(require("../utils/visualBuilderPos
 var import_postMessage = require("../utils/types/postMessage.types.cjs");
 var import_generateThread = require("../generators/generateThread.cjs");
 var import_configManager = __toESM(require("../../configManager/configManager.cjs"), 1);
+var import_collabUtils = require("../utils/collabUtils.cjs");
 var useCollabOperations = () => {
   const createComment = async (payload) => {
     const data = await import_visualBuilderPostMessage.default?.send(
       import_postMessage.VisualBuilderPostMessageEvents.COLLAB_CREATE_COMMENT,
-      { payload }
+      payload
     );
     if (!data) throw new Error("Failed to create comment");
     return data;
@@ -49,7 +50,7 @@ var useCollabOperations = () => {
   const editComment = async (payload) => {
     const data = await import_visualBuilderPostMessage.default?.send(
       import_postMessage.VisualBuilderPostMessageEvents.COLLAB_EDIT_COMMENT,
-      { payload }
+      payload
     );
     if (!data) throw new Error("Failed to update comment");
     return data;
@@ -57,7 +58,7 @@ var useCollabOperations = () => {
   const deleteComment = async (payload) => {
     const data = await import_visualBuilderPostMessage.default?.send(
       import_postMessage.VisualBuilderPostMessageEvents.COLLAB_DELETE_COMMENT,
-      { payload }
+      payload
     );
     if (!data) throw new Error("Failed to delete comment");
     return data;
@@ -65,7 +66,7 @@ var useCollabOperations = () => {
   const resolveThread = async (payload) => {
     const data = await import_visualBuilderPostMessage.default?.send(
       import_postMessage.VisualBuilderPostMessageEvents.COLLAB_RESOLVE_THREAD,
-      { payload }
+      payload
     );
     if (!data) throw new Error("Failed to resolve thread");
     return data;
@@ -73,7 +74,7 @@ var useCollabOperations = () => {
   const fetchComments = async (payload) => {
     return await import_visualBuilderPostMessage.default?.send(
       import_postMessage.VisualBuilderPostMessageEvents.COLLAB_FETCH_COMMENTS,
-      { payload }
+      payload
     );
   };
   const createNewThread = async (buttonRef, inviteMetadata) => {
@@ -98,13 +99,13 @@ var useCollabOperations = () => {
       elementXPath: fieldPath,
       position: { x: relativeX, y: relativeY },
       author: inviteMetadata.currentUser.email,
-      pageRoute: window.location.pathname,
+      pageRoute: (0, import_collabUtils.normalizePath)(window.location.pathname),
       inviteUid: inviteMetadata.inviteUid,
       createdBy: inviteMetadata.currentUser.uid
     };
     const data = await import_visualBuilderPostMessage.default?.send(
       import_postMessage.VisualBuilderPostMessageEvents.COLLAB_CREATE_THREAD,
-      { payload }
+      payload
     );
     parentDiv.setAttribute("threaduid", data.thread._id);
     return data;
@@ -112,7 +113,7 @@ var useCollabOperations = () => {
   const deleteThread = async (payload) => {
     const data = await import_visualBuilderPostMessage.default?.send(
       import_postMessage.VisualBuilderPostMessageEvents.COLLAB_DELETE_THREAD,
-      { payload }
+      payload
     );
     if (!data) throw new Error("Failed to delete thread");
     (0, import_generateThread.removeCollabIcon)(payload.threadUid);