@contentstack/live-preview-utils 3.2.0 → 3.2.1

package/dist/legacy/visualBuilder/listeners/mouseClick.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/listeners/mouseClick.ts"],"sourcesContent":["import {\n    cleanIndividualFieldResidual,\n    handleIndividualFields,\n} from \"../utils/handleIndividualFields\";\n\nimport {\n    getCsDataOfElement,\n    getDOMEditStack,\n} from \"../utils/getCsDataOfElement\";\n\nimport { appendFocusedToolbar } from \"../generators/generateToolbar\";\n\nimport { addFocusOverlay, hideOverlay } from \"../generators/generateOverlay\";\n\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\n\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\n\nimport { VisualBuilder } from \"..\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport EventListenerHandlerParams from \"./types\";\nimport { toggleHighlightedCommentIconDisplay } from \"../generators/generateHighlightedComment\";\nimport { VB_EmptyBlockParentClass } from \"../..\";\nimport { getFieldVariantStatus } from \"../components/FieldRevert/FieldRevertComponent\";\nimport getXPath from \"get-xpath\";\nimport Config from \"../../configManager/configManager\";\nimport { generateThread } from \"../generators/generateThread\";\nimport { isCollabThread } from \"../generators/generateThread\";\nimport { toggleCollabPopup } from \"../generators/generateThread\";\nimport { fixSvgXPath } from \"../utils/collabUtils\";\n\ntype HandleBuilderInteractionParams = Omit<\n    EventListenerHandlerParams,\n    \"eventDetails\" | \"customCursor\"\n> & { reEvaluate?: boolean };\n\ntype AddFocusOverlayParams = Pick<\n    EventListenerHandlerParams,\n    \"overlayWrapper\" | \"resizeObserver\"\n> & { editableElement: Element; isFieldDisabled?: boolean };\n\ntype AddFocusedToolbarParams = Pick<\n    EventListenerHandlerParams,\n    \"eventDetails\" | \"focusedToolbar\"\n> & { hideOverlay: () => void; isVariant: boolean };\n\nfunction addOverlay(params: AddFocusOverlayParams) {\n    if (!params.overlayWrapper || !params.editableElement) return;\n\n    addFocusOverlay(\n        params.editableElement,\n        params.overlayWrapper,\n        params.isFieldDisabled\n    );\n    params.resizeObserver.observe(params.editableElement);\n}\n\nexport function addFocusedToolbar(params: AddFocusedToolbarParams): void {\n    const { editableElement } = params.eventDetails;\n\n    if (!editableElement || !params.focusedToolbar) return;\n\n    appendFocusedToolbar(\n        params.eventDetails,\n        params.focusedToolbar,\n        params.hideOverlay,\n        params.isVariant\n    );\n}\n\nasync function handleBuilderInteraction(\n    params: HandleBuilderInteractionParams\n): Promise<void> {\n    const eventTarget = params.event.target as HTMLElement | null;\n    const isAnchorElement = eventTarget instanceof HTMLAnchorElement;\n    const elementHasCslp =\n        eventTarget &&\n        (eventTarget.hasAttribute(\"data-cslp\") ||\n            eventTarget.closest(\"[data-cslp]\"));\n\n    // if the target element is a studio-ui element, return\n    // this is currently used for the \"Edit in Studio\" button\n    if (eventTarget?.getAttribute(\"data-studio-ui\") === \"true\") {\n        return;\n    }\n\n    if (params.event.altKey) {\n        if (isAnchorElement) {\n            params.event.preventDefault();\n            params.event.stopPropagation();\n        }\n        return;\n    }\n    // prevent default behavior for anchor elements and elements with cslp attribute\n    if (\n        isAnchorElement ||\n        (elementHasCslp && !eventTarget.closest(\".visual-builder__empty-block\"))\n    ) {\n        params.event.preventDefault();\n        params.event.stopPropagation();\n    }\n\n    const config = Config.get();\n\n    if (config?.collab.enable === true) {\n        if (config?.collab.pauseFeedback) return;\n        const xpath = fixSvgXPath(getXPath(eventTarget));\n        if (!eventTarget) return;\n\n        const rect = eventTarget.getBoundingClientRect();\n        const relativeX = (params.event.clientX - rect.left) / rect.width;\n        const relativeY = (params.event.clientY - rect.top) / rect.height;\n\n        if (!isCollabThread(eventTarget)) {\n            params.event.preventDefault();\n            params.event.stopPropagation();\n        }\n\n        if (isCollabThread(eventTarget)) {\n            Config.set(\"collab.isFeedbackMode\", false);\n        } else if (config?.collab.isFeedbackMode) {\n            generateThread(\n                { xpath, relativeX, relativeY },\n                {\n                    isNewThread: true,\n                    updateConfig: true,\n                }\n            );\n        } else {\n            toggleCollabPopup({ threadUid: \"\", action: \"close\" });\n            Config.set(\"collab.isFeedbackMode\", true);\n        }\n        return;\n    }\n\n    const eventDetails = getCsDataOfElement(params.event);\n\n    // Send mouse click post message\n    sendMouseClickPostMessage(eventDetails);\n\n    if (\n        !eventDetails ||\n        !params.overlayWrapper ||\n        !params.visualBuilderContainer\n    ) {\n        return;\n    }\n\n    const { editableElement, fieldMetadata } = eventDetails;\n    const variantStatus = await getFieldVariantStatus(fieldMetadata);\n    const isVariant = variantStatus\n        ? Object.values(variantStatus).some((value) => value === true)\n        : false;\n\n    // Clean residuals if necessary\n    cleanResidualsIfNeeded(params, editableElement);\n\n    // Return if the selected element is an empty block\n    if (isEmptyBlockElement(editableElement)) {\n        return;\n    }\n\n    // when previous and current selected element is same, return.\n    // this also avoids inserting psuedo-editable field (field data is\n    // not equal to text content in DOM) when performing mouse\n    // selections in the content editable\n    const previousSelectedElement =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    if (\n        isSameSelectedElement(previousSelectedElement, editableElement, params)\n    ) {\n        return;\n    }\n\n    VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n        editableElement;\n\n    // Add overlay and focused toolbar\n    addOverlayAndToolbar(params, eventDetails, editableElement, isVariant);\n\n    const { cslpValue } = fieldMetadata;\n\n    toggleHighlightedCommentIconDisplay(cslpValue, false);\n\n    // Handle field schema and individual fields\n    await handleFieldSchemaAndIndividualFields(\n        params,\n        eventDetails,\n        fieldMetadata,\n        editableElement,\n        previousSelectedElement\n    );\n\n    // Observe changes to the editable element\n    observeEditableElementChanges(params, editableElement);\n}\n\nfunction sendMouseClickPostMessage(eventDetails: any) {\n    visualBuilderPostMessage\n        ?.send(VisualBuilderPostMessageEvents.MOUSE_CLICK, {\n            cslpData: eventDetails?.cslpData,\n            fieldMetadata: eventDetails?.fieldMetadata,\n        })\n        .catch((err) => {\n            console.warn(\"Error while sending post message\", err);\n        });\n}\nfunction cleanResidualsIfNeeded(\n    params: HandleBuilderInteractionParams,\n    editableElement: Element\n) {\n    const previousSelectedElement =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    if (\n        (previousSelectedElement &&\n            previousSelectedElement !== editableElement) ||\n        params.reEvaluate\n    ) {\n        cleanIndividualFieldResidual({\n            overlayWrapper: params.overlayWrapper!,\n            visualBuilderContainer: params.visualBuilderContainer,\n            focusedToolbar: params.focusedToolbar,\n            resizeObserver: params.resizeObserver,\n        });\n    }\n}\nfunction isEmptyBlockElement(editableElement: Element): boolean {\n    return (\n        editableElement.classList.contains(VB_EmptyBlockParentClass) ||\n        editableElement.classList.contains(\"visual-builder__empty-block\")\n    );\n}\n\nfunction isSameSelectedElement(\n    previousSelectedElement: Element | null,\n    editableElement: Element,\n    params: HandleBuilderInteractionParams\n): boolean {\n    return !!(\n        previousSelectedElement &&\n        previousSelectedElement === editableElement &&\n        !params.reEvaluate\n    );\n}\n\nfunction addOverlayAndToolbar(\n    params: HandleBuilderInteractionParams,\n    eventDetails: any,\n    editableElement: Element,\n    isVariant: boolean\n) {\n    addOverlay({\n        overlayWrapper: params.overlayWrapper,\n        resizeObserver: params.resizeObserver,\n        editableElement: editableElement,\n    });\n\n    addFocusedToolbar({\n        eventDetails: eventDetails,\n        focusedToolbar: params.focusedToolbar,\n        hideOverlay: () => {\n            hideOverlay({\n                visualBuilderContainer: params.visualBuilderContainer,\n                visualBuilderOverlayWrapper: params.overlayWrapper,\n                focusedToolbar: params.focusedToolbar,\n                resizeObserver: params.resizeObserver,\n            });\n        },\n        isVariant,\n    });\n}\nasync function handleFieldSchemaAndIndividualFields(\n    params: HandleBuilderInteractionParams,\n    eventDetails: any,\n    fieldMetadata: any,\n    editableElement: Element,\n    previousSelectedElement: Element | null\n) {\n    const { content_type_uid, fieldPath } = fieldMetadata;\n    const fieldSchema = await FieldSchemaMap.getFieldSchema(\n        content_type_uid,\n        fieldPath\n    );\n\n    if (fieldSchema) {\n        const { isDisabled } = isFieldDisabled(fieldSchema, eventDetails);\n        if (isDisabled) {\n            addOverlay({\n                overlayWrapper: params.overlayWrapper,\n                resizeObserver: params.resizeObserver,\n                editableElement: editableElement,\n                isFieldDisabled: true,\n            });\n        }\n    }\n\n    visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.FOCUS_FIELD, {\n        DOMEditStack: getDOMEditStack(editableElement),\n    });\n\n    await handleIndividualFields(eventDetails, {\n        visualBuilderContainer: params.visualBuilderContainer!,\n        resizeObserver: params.resizeObserver,\n        lastEditedField: previousSelectedElement,\n    });\n}\nfunction observeEditableElementChanges(\n    params: HandleBuilderInteractionParams,\n    editableElement: Element\n) {\n    const focusElementObserver = new MutationObserver((mutations) => {\n        mutations.forEach((mutation) => {\n            if (\n                mutation.type === \"attributes\" &&\n                mutation.attributeName === \"data-cslp\"\n            ) {\n                focusElementObserver?.disconnect();\n                VisualBuilder.VisualBuilderGlobalState.value.focusElementObserver =\n                    null;\n                handleBuilderInteraction({ ...params, reEvaluate: true });\n            }\n        });\n    });\n\n    VisualBuilder.VisualBuilderGlobalState.value.focusElementObserver =\n        focusElementObserver;\n    focusElementObserver.observe(editableElement, { attributes: true });\n}\n\nexport default handleBuilderInteraction;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/listeners/mouseClick.ts"],"sourcesContent":["import {\n    cleanIndividualFieldResidual,\n    handleIndividualFields,\n} from \"../utils/handleIndividualFields\";\n\nimport {\n    getCsDataOfElement,\n    getDOMEditStack,\n} from \"../utils/getCsDataOfElement\";\n\nimport { appendFocusedToolbar } from \"../generators/generateToolbar\";\n\nimport { addFocusOverlay, hideOverlay } from \"../generators/generateOverlay\";\n\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\n\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\n\nimport { VisualBuilder } from \"..\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport EventListenerHandlerParams from \"./types\";\nimport { toggleHighlightedCommentIconDisplay } from \"../generators/generateHighlightedComment\";\nimport { VB_EmptyBlockParentClass } from \"../..\";\nimport { getFieldVariantStatus } from \"../components/FieldRevert/FieldRevertComponent\";\nimport getXPath from \"get-xpath\";\nimport Config from \"../../configManager/configManager\";\nimport { generateThread } from \"../generators/generateThread\";\nimport { isCollabThread } from \"../generators/generateThread\";\nimport { toggleCollabPopup } from \"../generators/generateThread\";\nimport { fixSvgXPath } from \"../utils/collabUtils\";\nimport { v4 as uuidV4 } from \"uuid\";\n\ntype HandleBuilderInteractionParams = Omit<\n    EventListenerHandlerParams,\n    \"eventDetails\" | \"customCursor\"\n> & { reEvaluate?: boolean };\n\ntype AddFocusOverlayParams = Pick<\n    EventListenerHandlerParams,\n    \"overlayWrapper\" | \"resizeObserver\"\n> & { editableElement: Element; isFieldDisabled?: boolean };\n\ntype AddFocusedToolbarParams = Pick<\n    EventListenerHandlerParams,\n    \"eventDetails\" | \"focusedToolbar\"\n> & { hideOverlay: () => void; isVariant: boolean };\n\nfunction addOverlay(params: AddFocusOverlayParams) {\n    if (!params.overlayWrapper || !params.editableElement) return;\n\n    addFocusOverlay(\n        params.editableElement,\n        params.overlayWrapper,\n        params.isFieldDisabled\n    );\n    params.resizeObserver.observe(params.editableElement);\n}\n\nexport function addFocusedToolbar(params: AddFocusedToolbarParams): void {\n    const { editableElement } = params.eventDetails;\n\n    if (!editableElement || !params.focusedToolbar) return;\n\n    appendFocusedToolbar(\n        params.eventDetails,\n        params.focusedToolbar,\n        params.hideOverlay,\n        params.isVariant\n    );\n}\n\nasync function handleBuilderInteraction(\n    params: HandleBuilderInteractionParams\n): Promise<void> {\n    const eventTarget = params.event.target as HTMLElement | null;\n    const isAnchorElement = eventTarget instanceof HTMLAnchorElement;\n    const elementHasCslp =\n        eventTarget &&\n        (eventTarget.hasAttribute(\"data-cslp\") ||\n            eventTarget.closest(\"[data-cslp]\"));\n\n    // if multiple elements with the same cslp element are found,\n    // assign a unique ID to each element which we can use to identify\n    // them in updateFocussedState and other places where we\n    // would have queried the element by data-cslp\n    const duplicates = document.querySelectorAll(\n        `[data-cslp=\"${eventTarget?.getAttribute(\"data-cslp\")}\"]`\n    );\n    if (duplicates.length > 1) {\n        duplicates.forEach((ele) => {\n            if (!ele.hasAttribute(\"data-cslp-unique-id\")) {\n                const uniqueId = `cslp-${uuidV4()}`;\n                ele.setAttribute(\"data-cslp-unique-id\", uniqueId);\n            }\n        });\n    }\n\n    // if the target element is a studio-ui element, return\n    // this is currently used for the \"Edit in Studio\" button\n    if (eventTarget?.getAttribute(\"data-studio-ui\") === \"true\") {\n        return;\n    }\n\n    if (params.event.altKey) {\n        if (isAnchorElement) {\n            params.event.preventDefault();\n            params.event.stopPropagation();\n        }\n        return;\n    }\n    // prevent default behavior for anchor elements and elements with cslp attribute\n    if (\n        isAnchorElement ||\n        (elementHasCslp && !eventTarget.closest(\".visual-builder__empty-block\"))\n    ) {\n        params.event.preventDefault();\n        params.event.stopPropagation();\n    }\n\n    const config = Config.get();\n\n    if (config?.collab.enable === true) {\n        if (config?.collab.pauseFeedback) return;\n        const xpath = fixSvgXPath(getXPath(eventTarget));\n        if (!eventTarget) return;\n\n        const rect = eventTarget.getBoundingClientRect();\n        const relativeX = (params.event.clientX - rect.left) / rect.width;\n        const relativeY = (params.event.clientY - rect.top) / rect.height;\n\n        if (!isCollabThread(eventTarget)) {\n            params.event.preventDefault();\n            params.event.stopPropagation();\n        }\n\n        if (isCollabThread(eventTarget)) {\n            Config.set(\"collab.isFeedbackMode\", false);\n        } else if (config?.collab.isFeedbackMode) {\n            generateThread(\n                { xpath, relativeX, relativeY },\n                {\n                    isNewThread: true,\n                    updateConfig: true,\n                }\n            );\n        } else {\n            toggleCollabPopup({ threadUid: \"\", action: \"close\" });\n            Config.set(\"collab.isFeedbackMode\", true);\n        }\n        return;\n    }\n\n    const eventDetails = getCsDataOfElement(params.event);\n\n    // Send mouse click post message\n    sendMouseClickPostMessage(eventDetails);\n\n    if (\n        !eventDetails ||\n        !params.overlayWrapper ||\n        !params.visualBuilderContainer\n    ) {\n        return;\n    }\n\n    const { editableElement, fieldMetadata } = eventDetails;\n    const variantStatus = await getFieldVariantStatus(fieldMetadata);\n    const isVariant = variantStatus\n        ? Object.values(variantStatus).some((value) => value === true)\n        : false;\n\n    // Clean residuals if necessary\n    cleanResidualsIfNeeded(params, editableElement);\n\n    // Return if the selected element is an empty block\n    if (isEmptyBlockElement(editableElement)) {\n        return;\n    }\n\n    // when previous and current selected element is same, return.\n    // this also avoids inserting psuedo-editable field (field data is\n    // not equal to text content in DOM) when performing mouse\n    // selections in the content editable\n    const previousSelectedElement =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    if (\n        isSameSelectedElement(previousSelectedElement, editableElement, params)\n    ) {\n        return;\n    }\n\n    VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n        editableElement;\n\n    // Add overlay and focused toolbar\n    addOverlayAndToolbar(params, eventDetails, editableElement, isVariant);\n\n    const { cslpValue } = fieldMetadata;\n\n    toggleHighlightedCommentIconDisplay(cslpValue, false);\n\n    // Handle field schema and individual fields\n    await handleFieldSchemaAndIndividualFields(\n        params,\n        eventDetails,\n        fieldMetadata,\n        editableElement,\n        previousSelectedElement\n    );\n\n    // Observe changes to the editable element\n    observeEditableElementChanges(params, editableElement);\n}\n\nfunction sendMouseClickPostMessage(eventDetails: any) {\n    visualBuilderPostMessage\n        ?.send(VisualBuilderPostMessageEvents.MOUSE_CLICK, {\n            cslpData: eventDetails?.cslpData,\n            fieldMetadata: eventDetails?.fieldMetadata,\n        })\n        .catch((err) => {\n            console.warn(\"Error while sending post message\", err);\n        });\n}\nfunction cleanResidualsIfNeeded(\n    params: HandleBuilderInteractionParams,\n    editableElement: Element\n) {\n    const previousSelectedElement =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    if (\n        (previousSelectedElement &&\n            previousSelectedElement !== editableElement) ||\n        params.reEvaluate\n    ) {\n        cleanIndividualFieldResidual({\n            overlayWrapper: params.overlayWrapper!,\n            visualBuilderContainer: params.visualBuilderContainer,\n            focusedToolbar: params.focusedToolbar,\n            resizeObserver: params.resizeObserver,\n        });\n    }\n}\nfunction isEmptyBlockElement(editableElement: Element): boolean {\n    return (\n        editableElement.classList.contains(VB_EmptyBlockParentClass) ||\n        editableElement.classList.contains(\"visual-builder__empty-block\")\n    );\n}\n\nfunction isSameSelectedElement(\n    previousSelectedElement: Element | null,\n    editableElement: Element,\n    params: HandleBuilderInteractionParams\n): boolean {\n    return !!(\n        previousSelectedElement &&\n        previousSelectedElement === editableElement &&\n        !params.reEvaluate\n    );\n}\n\nfunction addOverlayAndToolbar(\n    params: HandleBuilderInteractionParams,\n    eventDetails: any,\n    editableElement: Element,\n    isVariant: boolean\n) {\n    addOverlay({\n        overlayWrapper: params.overlayWrapper,\n        resizeObserver: params.resizeObserver,\n        editableElement: editableElement,\n    });\n\n    addFocusedToolbar({\n        eventDetails: eventDetails,\n        focusedToolbar: params.focusedToolbar,\n        hideOverlay: () => {\n            hideOverlay({\n                visualBuilderContainer: params.visualBuilderContainer,\n                visualBuilderOverlayWrapper: params.overlayWrapper,\n                focusedToolbar: params.focusedToolbar,\n                resizeObserver: params.resizeObserver,\n            });\n        },\n        isVariant,\n    });\n}\nasync function handleFieldSchemaAndIndividualFields(\n    params: HandleBuilderInteractionParams,\n    eventDetails: any,\n    fieldMetadata: any,\n    editableElement: Element,\n    previousSelectedElement: Element | null\n) {\n    const { content_type_uid, fieldPath } = fieldMetadata;\n    const fieldSchema = await FieldSchemaMap.getFieldSchema(\n        content_type_uid,\n        fieldPath\n    );\n\n    if (fieldSchema) {\n        const { isDisabled } = isFieldDisabled(fieldSchema, eventDetails);\n        if (isDisabled) {\n            addOverlay({\n                overlayWrapper: params.overlayWrapper,\n                resizeObserver: params.resizeObserver,\n                editableElement: editableElement,\n                isFieldDisabled: true,\n            });\n        }\n    }\n\n    visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.FOCUS_FIELD, {\n        DOMEditStack: getDOMEditStack(editableElement),\n    });\n\n    await handleIndividualFields(eventDetails, {\n        visualBuilderContainer: params.visualBuilderContainer!,\n        resizeObserver: params.resizeObserver,\n        lastEditedField: previousSelectedElement,\n    });\n}\nfunction observeEditableElementChanges(\n    params: HandleBuilderInteractionParams,\n    editableElement: Element\n) {\n    const focusElementObserver = new MutationObserver((mutations) => {\n        mutations.forEach((mutation) => {\n            if (\n                mutation.type === \"attributes\" &&\n                mutation.attributeName === \"data-cslp\"\n            ) {\n                focusElementObserver?.disconnect();\n                VisualBuilder.VisualBuilderGlobalState.value.focusElementObserver =\n                    null;\n                handleBuilderInteraction({ ...params, reEvaluate: true });\n            }\n        });\n    });\n\n    VisualBuilder.VisualBuilderGlobalState.value.focusElementObserver =\n        focusElementObserver;\n    focusElementObserver.observe(editableElement, { attributes: true });\n}\n\nexport default handleBuilderInteraction;\n"],"mappings":"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","names":[]}

package/dist/legacy/visualBuilder/utils/collabUtils.cjs

@@ -79,10 +79,11 @@ var getMessageWithDisplayName = (comment, userState, profile) => {
   var _a;
   if (!comment) return void 0;
   let tempText = sanitizeData(comment.message).replace(/<[^>]*>/g, "");
-  (_a = comment == null ? void 0 : comment.toUsers) == null ? void 0 : _a.forEach((user) => {
+  (_a = comment.toUsers) == null ? void 0 : _a.forEach((user) => {
     const userPattern = new RegExp(`{{${user}}}`, "g");
     const userData = userState.userMap[user];
-    const replacement = profile === "html" ? `<b class="collab-thread-comment--message">@${userData.display || getUserName(userData)}</b>` : `@${userData.display || getUserName(userData)}`;
+    const displayName = userData ? userData.display || getUserName(userData) : `unknown user`;
+    const replacement = profile === "html" ? `<b class="collab-thread-comment--message">@${displayName}</b>` : `@${displayName}`;
     tempText = tempText.replace(userPattern, replacement);
   });
   return tempText;

package/dist/legacy/visualBuilder/utils/collabUtils.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/utils/collabUtils.ts"],"sourcesContent":["import {\n    ICommentState,\n    IMentionedList,\n    IMentionItem,\n    IMessageDTO,\n    IUserDTO,\n    IUserState,\n} from \"../types/collab.types\";\nimport { maxMessageLength, mentionLimit } from \"./constants\";\nimport { uniqBy } from \"lodash-es\";\nimport DOMPurify from \"dompurify\";\nimport dayjs from \"dayjs\";\n\nconst escapeRegExp = (string: string): string => {\n    return string.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n};\n\n/**\n * Generates the title for the thread based on the number of comments.\n * @param {number} commentCount - The number of comments.\n * @returns {string} The title for the thread.\n */\nexport const getThreadTitle = (commentCount: number): string => {\n    if (commentCount === 0) return \"Add New Comment\";\n    return commentCount === 1 ? \"1 Comment\" : `${commentCount} Comments`;\n};\n\n/**\n * returns the available email.\n * @param {IUserDTO} user - The user object.\n * @returns {string} The user's email.\n */\nexport const getUserName = (user: IUserDTO): string => {\n    return user.firstName && user.lastName\n        ? `${user.firstName} ${user.lastName}`\n        : user.firstName || user.lastName || user.email;\n};\n\n/**\n * Validates the comment length and the number of mentions.\n * @param {string} comment - The comment message.\n * @param {IMentionedList} toUsers - The list of mentioned users.\n * @returns {string} The error message if validation fails, otherwise an empty string.\n */\nexport const validateCommentAndMentions = (\n    comment: string,\n    toUsers: IMentionedList\n): string => {\n    if (comment.length > maxMessageLength) {\n        return `Limit exceeded. You can have a maximum length of ${maxMessageLength} characters.`;\n    }\n    if (toUsers.length > mentionLimit) {\n        return `Limit exceeded. You can tag a maximum of ${mentionLimit} users.`;\n    }\n    return \"\";\n};\n\n/**\n * Removes mentions that no longer exist in the message.\n * @param {string} message - The comment message.\n * @param {IMentionedList} toUsers - The list of mentioned users.\n * @returns {Object} The updated lists of mentioned users.\n */\nexport const filterOutInvalidMentions = (\n    message: string,\n    toUsers: IMentionedList\n) => {\n    const to_users_temp = toUsers.filter((user) =>\n        message.includes(user.display)\n    );\n\n    return {\n        toUsers: uniqBy(to_users_temp, \"id\"),\n    };\n};\n\n/**\n * Replaces mention placeholders with display names in the comment message.\n * @param {IMessageDTO | undefined} comment - The comment object.\n * @param {IUserState} userState - The user state containing user and role maps.\n * @param {\"text\" | \"html\"} profile - The format for the output message, either plain text or HTML.\n * @returns {string | undefined} The formatted message or undefined if the comment is not provided.\n */\nexport const getMessageWithDisplayName = (\n    comment: IMessageDTO | undefined | null,\n    userState: IUserState,\n    profile: \"text\" | \"html\"\n): string | undefined => {\n    if (!comment) return undefined;\n\n    let tempText = sanitizeData(comment.message).replace(/<[^>]*>/g, \"\");\n\n    comment?.toUsers?.forEach((user) => {\n        const userPattern = new RegExp(`{{${user}}}`, \"g\");\n        const userData = userState.userMap[user];\n        const replacement =\n            profile === \"html\"\n                ? `<b class=\"collab-thread-comment--message\">@${userData.display || getUserName(userData)}</b>`\n                : `@${userData.display || getUserName(userData)}`;\n        tempText = tempText.replace(userPattern, replacement);\n    });\n\n    return tempText;\n};\n\n/**\n * Sanitizes HTML content to prevent XSS attacks.\n * @param {any} dirty - The unsanitized HTML content.\n * @returns {string} The sanitized HTML content.\n */\nexport const sanitizeData = (dirty: any): string => {\n    return DOMPurify.sanitize(dirty, { USE_PROFILES: { html: true } });\n};\n\n/**\n * Constructs the comment body with mentions replaced by their unique identifiers.\n * @param {ICommentState} state - The state containing the comment and mentions.\n * @returns {Object} The comment body containing the sanitized message and mentioned users.\n */\nexport const getCommentBody = (state: ICommentState): ICommentState => {\n    let finalMessage = sanitizeData(state.message)\n        .replace(/[^\\S\\r\\n]+/g, \" \")\n        .replace(/ *\\n */g, \"\\n\")\n        .replace(/<[^>]*>/g, \"\")\n        .trim();\n\n    const comment = {\n        message: finalMessage,\n        toUsers: [],\n        images: [],\n        createdBy: state.createdBy,\n        author: state.author,\n    };\n\n    const updateMentionToUID = (\n        entity: IMentionItem,\n        result: Array<string>\n    ) => {\n        const displayName = entity.display;\n\n        const escapedDisplayName = escapeRegExp(`@${displayName}`);\n        const regexUser = new RegExp(escapedDisplayName, \"g\");\n        finalMessage = finalMessage.replace(regexUser, `{{${entity.id}}}`);\n        result.push(entity.id);\n    };\n\n    state.toUsers?.forEach((user) => updateMentionToUID(user, comment.toUsers));\n\n    comment.message = finalMessage;\n    return comment;\n};\n\nexport function normalizePath(path: string): string {\n    if (path === \"/\") return path;\n    return path.endsWith(\"/\") ? path.slice(0, -1) : path;\n}\n\nexport function fixSvgXPath(xpath: string | null): string {\n    if (!xpath) return \"\";\n    return xpath.replace(/\\/svg/g, \"/*[name()='svg']\");\n}\n\n/**\n * populate the position of the thread based on edges of the screen.\n * @param position\n * @param options\n * @returns\n */\nexport function adjustPositionToViewport(\n    position: { top: number; left: number },\n    options: {\n        threadWidth?: number;\n        safeMargin?: number;\n        topSafeMargin?: number;\n    } = {}\n): { top: number; left: number } {\n    const { top, left } = position;\n    const viewportWidth = window.innerWidth;\n    const safeMargin = options.safeMargin ?? 16;\n    const topSafeMargin = options.topSafeMargin ?? 42;\n    const threadWidth = options.threadWidth ?? 16;\n\n    let adjustedLeft = left;\n    let adjustedTop = top;\n\n    // Adjust position if too close to right edge\n    if (adjustedLeft + threadWidth > viewportWidth - safeMargin) {\n        adjustedLeft = viewportWidth - safeMargin - threadWidth;\n    }\n\n    // Adjust position if too close to top edge\n    if (adjustedTop - window.scrollY < topSafeMargin) {\n        adjustedTop = window.scrollY + topSafeMargin;\n    }\n\n    return { top: adjustedTop, left: adjustedLeft };\n}\n\nexport function formatDate(dateString: string): string {\n    if (!dateString) return \"\";\n    return dayjs(dateString).format(\"MMM DD, YYYY, hh:mm A\");\n}\n\ninterface PositionCoords {\n    top: number;\n    left: number;\n}\n\ninterface Positions {\n    bottom: PositionCoords;\n    top: PositionCoords;\n    left: PositionCoords;\n    right: PositionCoords;\n}\n\n/**\n * Calculates and updates tooltip position based on available viewport space.\n */\nexport const positionTooltip = (\n    tooltipRef: React.RefObject<HTMLDivElement>,\n    targetRef: React.RefObject<HTMLDivElement>,\n    position: \"top\" | \"bottom\" | \"left\" | \"right\",\n    setActualPosition: (position: \"top\" | \"bottom\" | \"left\" | \"right\") => void\n) => {\n    if (!tooltipRef.current || !targetRef.current) return;\n\n    const targetRect = targetRef.current.getBoundingClientRect();\n    const tooltipRect = tooltipRef.current.getBoundingClientRect();\n    const margin = 8;\n\n    const positions: Positions = {\n        bottom: {\n            top: targetRect.bottom + margin,\n            left: targetRect.left + (targetRect.width - tooltipRect.width) / 2,\n        },\n        top: {\n            top: targetRect.top - tooltipRect.height - margin,\n            left: targetRect.left + (targetRect.width - tooltipRect.width) / 2,\n        },\n        left: {\n            top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,\n            left: targetRect.left - tooltipRect.width - margin,\n        },\n        right: {\n            top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,\n            left: targetRect.right + margin,\n        },\n    };\n\n    let bestPosition = position;\n    let coords = positions[position];\n\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n\n    const wouldBeOutsideViewport = {\n        bottom: coords.top + tooltipRect.height > viewportHeight,\n        top: coords.top < 0,\n        left: coords.left < 0,\n        right: coords.left + tooltipRect.width > viewportWidth,\n    };\n\n    const horizontalOutOfBounds =\n        coords.left < 0 || coords.left + tooltipRect.width > viewportWidth;\n\n    if (wouldBeOutsideViewport[position] || horizontalOutOfBounds) {\n        const positionPriority = [\"bottom\", \"top\", \"right\", \"left\"];\n\n        positionPriority.splice(positionPriority.indexOf(position), 1);\n        positionPriority.push(position);\n\n        for (const pos of positionPriority) {\n            const testCoords = positions[pos as keyof Positions];\n\n            const isVisible =\n                testCoords.top >= 0 &&\n                testCoords.top + tooltipRect.height <= viewportHeight &&\n                testCoords.left >= 0 &&\n                testCoords.left + tooltipRect.width <= viewportWidth;\n\n            if (isVisible) {\n                bestPosition = pos as \"top\" | \"bottom\" | \"left\" | \"right\";\n                coords = testCoords;\n                break;\n            }\n        }\n    }\n\n    if (coords.left < 0) {\n        coords.left = margin;\n    } else if (coords.left + tooltipRect.width > viewportWidth) {\n        coords.left = viewportWidth - tooltipRect.width - margin;\n    }\n\n    if (coords.top < 0) {\n        coords.top = margin;\n    } else if (coords.top + tooltipRect.height > viewportHeight) {\n        coords.top = viewportHeight - tooltipRect.height - margin;\n    }\n\n    setActualPosition(bestPosition);\n\n    Object.assign(tooltipRef.current.style, {\n        top: `${coords.top}px`,\n        left: `${coords.left}px`,\n    });\n};\n"],"mappings":"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","names":["DOMPurify","dayjs"]}
+{"version":3,"sources":["../../../../src/visualBuilder/utils/collabUtils.ts"],"sourcesContent":["import {\n    ICommentState,\n    IMentionedList,\n    IMentionItem,\n    IMessageDTO,\n    IUserDTO,\n    IUserState,\n} from \"../types/collab.types\";\nimport { maxMessageLength, mentionLimit } from \"./constants\";\nimport { uniqBy } from \"lodash-es\";\nimport DOMPurify from \"dompurify\";\nimport dayjs from \"dayjs\";\n\nconst escapeRegExp = (string: string): string => {\n    return string.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n};\n\n/**\n * Generates the title for the thread based on the number of comments.\n * @param {number} commentCount - The number of comments.\n * @returns {string} The title for the thread.\n */\nexport const getThreadTitle = (commentCount: number): string => {\n    if (commentCount === 0) return \"Add New Comment\";\n    return commentCount === 1 ? \"1 Comment\" : `${commentCount} Comments`;\n};\n\n/**\n * returns the available email.\n * @param {IUserDTO} user - The user object.\n * @returns {string} The user's email.\n */\nexport const getUserName = (user: IUserDTO): string => {\n    return user.firstName && user.lastName\n        ? `${user.firstName} ${user.lastName}`\n        : user.firstName || user.lastName || user.email;\n};\n\n/**\n * Validates the comment length and the number of mentions.\n * @param {string} comment - The comment message.\n * @param {IMentionedList} toUsers - The list of mentioned users.\n * @returns {string} The error message if validation fails, otherwise an empty string.\n */\nexport const validateCommentAndMentions = (\n    comment: string,\n    toUsers: IMentionedList\n): string => {\n    if (comment.length > maxMessageLength) {\n        return `Limit exceeded. You can have a maximum length of ${maxMessageLength} characters.`;\n    }\n    if (toUsers.length > mentionLimit) {\n        return `Limit exceeded. You can tag a maximum of ${mentionLimit} users.`;\n    }\n    return \"\";\n};\n\n/**\n * Removes mentions that no longer exist in the message.\n * @param {string} message - The comment message.\n * @param {IMentionedList} toUsers - The list of mentioned users.\n * @returns {Object} The updated lists of mentioned users.\n */\nexport const filterOutInvalidMentions = (\n    message: string,\n    toUsers: IMentionedList\n) => {\n    const to_users_temp = toUsers.filter((user) =>\n        message.includes(user.display)\n    );\n\n    return {\n        toUsers: uniqBy(to_users_temp, \"id\"),\n    };\n};\n\n/**\n * Replaces mention placeholders with display names in the comment message.\n * @param {IMessageDTO | undefined} comment - The comment object.\n * @param {IUserState} userState - The user state containing user and role maps.\n * @param {\"text\" | \"html\"} profile - The format for the output message, either plain text or HTML.\n * @returns {string | undefined} The formatted message or undefined if the comment is not provided.\n */\nexport const getMessageWithDisplayName = (\n    comment: IMessageDTO | undefined | null,\n    userState: IUserState,\n    profile: \"text\" | \"html\"\n): string | undefined => {\n    if (!comment) return undefined;\n\n    let tempText = sanitizeData(comment.message).replace(/<[^>]*>/g, \"\");\n\n    comment.toUsers?.forEach((user) => {\n        const userPattern = new RegExp(`{{${user}}}`, \"g\");\n        const userData = userState.userMap[user];\n        const displayName = userData\n            ? userData.display || getUserName(userData)\n            : `unknown user`;\n\n        const replacement =\n            profile === \"html\"\n                ? `<b class=\"collab-thread-comment--message\">@${displayName}</b>`\n                : `@${displayName}`;\n        tempText = tempText.replace(userPattern, replacement);\n    });\n\n    return tempText;\n};\n\n/**\n * Sanitizes HTML content to prevent XSS attacks.\n * @param {any} dirty - The unsanitized HTML content.\n * @returns {string} The sanitized HTML content.\n */\nexport const sanitizeData = (dirty: any): string => {\n    return DOMPurify.sanitize(dirty, { USE_PROFILES: { html: true } });\n};\n\n/**\n * Constructs the comment body with mentions replaced by their unique identifiers.\n * @param {ICommentState} state - The state containing the comment and mentions.\n * @returns {Object} The comment body containing the sanitized message and mentioned users.\n */\nexport const getCommentBody = (state: ICommentState): ICommentState => {\n    let finalMessage = sanitizeData(state.message)\n        .replace(/[^\\S\\r\\n]+/g, \" \")\n        .replace(/ *\\n */g, \"\\n\")\n        .replace(/<[^>]*>/g, \"\")\n        .trim();\n\n    const comment = {\n        message: finalMessage,\n        toUsers: [],\n        images: [],\n        createdBy: state.createdBy,\n        author: state.author,\n    };\n\n    const updateMentionToUID = (\n        entity: IMentionItem,\n        result: Array<string>\n    ) => {\n        const displayName = entity.display;\n\n        const escapedDisplayName = escapeRegExp(`@${displayName}`);\n        const regexUser = new RegExp(escapedDisplayName, \"g\");\n        finalMessage = finalMessage.replace(regexUser, `{{${entity.id}}}`);\n        result.push(entity.id);\n    };\n\n    state.toUsers?.forEach((user) => updateMentionToUID(user, comment.toUsers));\n\n    comment.message = finalMessage;\n    return comment;\n};\n\nexport function normalizePath(path: string): string {\n    if (path === \"/\") return path;\n    return path.endsWith(\"/\") ? path.slice(0, -1) : path;\n}\n\nexport function fixSvgXPath(xpath: string | null): string {\n    if (!xpath) return \"\";\n    return xpath.replace(/\\/svg/g, \"/*[name()='svg']\");\n}\n\n/**\n * populate the position of the thread based on edges of the screen.\n * @param position\n * @param options\n * @returns\n */\nexport function adjustPositionToViewport(\n    position: { top: number; left: number },\n    options: {\n        threadWidth?: number;\n        safeMargin?: number;\n        topSafeMargin?: number;\n    } = {}\n): { top: number; left: number } {\n    const { top, left } = position;\n    const viewportWidth = window.innerWidth;\n    const safeMargin = options.safeMargin ?? 16;\n    const topSafeMargin = options.topSafeMargin ?? 42;\n    const threadWidth = options.threadWidth ?? 16;\n\n    let adjustedLeft = left;\n    let adjustedTop = top;\n\n    // Adjust position if too close to right edge\n    if (adjustedLeft + threadWidth > viewportWidth - safeMargin) {\n        adjustedLeft = viewportWidth - safeMargin - threadWidth;\n    }\n\n    // Adjust position if too close to top edge\n    if (adjustedTop - window.scrollY < topSafeMargin) {\n        adjustedTop = window.scrollY + topSafeMargin;\n    }\n\n    return { top: adjustedTop, left: adjustedLeft };\n}\n\nexport function formatDate(dateString: string): string {\n    if (!dateString) return \"\";\n    return dayjs(dateString).format(\"MMM DD, YYYY, hh:mm A\");\n}\n\ninterface PositionCoords {\n    top: number;\n    left: number;\n}\n\ninterface Positions {\n    bottom: PositionCoords;\n    top: PositionCoords;\n    left: PositionCoords;\n    right: PositionCoords;\n}\n\n/**\n * Calculates and updates tooltip position based on available viewport space.\n */\nexport const positionTooltip = (\n    tooltipRef: React.RefObject<HTMLDivElement>,\n    targetRef: React.RefObject<HTMLDivElement>,\n    position: \"top\" | \"bottom\" | \"left\" | \"right\",\n    setActualPosition: (position: \"top\" | \"bottom\" | \"left\" | \"right\") => void\n) => {\n    if (!tooltipRef.current || !targetRef.current) return;\n\n    const targetRect = targetRef.current.getBoundingClientRect();\n    const tooltipRect = tooltipRef.current.getBoundingClientRect();\n    const margin = 8;\n\n    const positions: Positions = {\n        bottom: {\n            top: targetRect.bottom + margin,\n            left: targetRect.left + (targetRect.width - tooltipRect.width) / 2,\n        },\n        top: {\n            top: targetRect.top - tooltipRect.height - margin,\n            left: targetRect.left + (targetRect.width - tooltipRect.width) / 2,\n        },\n        left: {\n            top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,\n            left: targetRect.left - tooltipRect.width - margin,\n        },\n        right: {\n            top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,\n            left: targetRect.right + margin,\n        },\n    };\n\n    let bestPosition = position;\n    let coords = positions[position];\n\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n\n    const wouldBeOutsideViewport = {\n        bottom: coords.top + tooltipRect.height > viewportHeight,\n        top: coords.top < 0,\n        left: coords.left < 0,\n        right: coords.left + tooltipRect.width > viewportWidth,\n    };\n\n    const horizontalOutOfBounds =\n        coords.left < 0 || coords.left + tooltipRect.width > viewportWidth;\n\n    if (wouldBeOutsideViewport[position] || horizontalOutOfBounds) {\n        const positionPriority = [\"bottom\", \"top\", \"right\", \"left\"];\n\n        positionPriority.splice(positionPriority.indexOf(position), 1);\n        positionPriority.push(position);\n\n        for (const pos of positionPriority) {\n            const testCoords = positions[pos as keyof Positions];\n\n            const isVisible =\n                testCoords.top >= 0 &&\n                testCoords.top + tooltipRect.height <= viewportHeight &&\n                testCoords.left >= 0 &&\n                testCoords.left + tooltipRect.width <= viewportWidth;\n\n            if (isVisible) {\n                bestPosition = pos as \"top\" | \"bottom\" | \"left\" | \"right\";\n                coords = testCoords;\n                break;\n            }\n        }\n    }\n\n    if (coords.left < 0) {\n        coords.left = margin;\n    } else if (coords.left + tooltipRect.width > viewportWidth) {\n        coords.left = viewportWidth - tooltipRect.width - margin;\n    }\n\n    if (coords.top < 0) {\n        coords.top = margin;\n    } else if (coords.top + tooltipRect.height > viewportHeight) {\n        coords.top = viewportHeight - tooltipRect.height - margin;\n    }\n\n    setActualPosition(bestPosition);\n\n    Object.assign(tooltipRef.current.style, {\n        top: `${coords.top}px`,\n        left: `${coords.left}px`,\n    });\n};\n"],"mappings":"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","names":["DOMPurify","dayjs"]}

package/dist/legacy/visualBuilder/utils/collabUtils.js

@@ -36,10 +36,11 @@ var getMessageWithDisplayName = (comment, userState, profile) => {
   var _a;
   if (!comment) return void 0;
   let tempText = sanitizeData(comment.message).replace(/<[^>]*>/g, "");
-  (_a = comment == null ? void 0 : comment.toUsers) == null ? void 0 : _a.forEach((user) => {
+  (_a = comment.toUsers) == null ? void 0 : _a.forEach((user) => {
     const userPattern = new RegExp(`{{${user}}}`, "g");
     const userData = userState.userMap[user];
-    const replacement = profile === "html" ? `<b class="collab-thread-comment--message">@${userData.display || getUserName(userData)}</b>` : `@${userData.display || getUserName(userData)}`;
+    const displayName = userData ? userData.display || getUserName(userData) : `unknown user`;
+    const replacement = profile === "html" ? `<b class="collab-thread-comment--message">@${displayName}</b>` : `@${displayName}`;
     tempText = tempText.replace(userPattern, replacement);
   });
   return tempText;

package/dist/legacy/visualBuilder/utils/collabUtils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/utils/collabUtils.ts"],"sourcesContent":["import {\n    ICommentState,\n    IMentionedList,\n    IMentionItem,\n    IMessageDTO,\n    IUserDTO,\n    IUserState,\n} from \"../types/collab.types\";\nimport { maxMessageLength, mentionLimit } from \"./constants\";\nimport { uniqBy } from \"lodash-es\";\nimport DOMPurify from \"dompurify\";\nimport dayjs from \"dayjs\";\n\nconst escapeRegExp = (string: string): string => {\n    return string.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n};\n\n/**\n * Generates the title for the thread based on the number of comments.\n * @param {number} commentCount - The number of comments.\n * @returns {string} The title for the thread.\n */\nexport const getThreadTitle = (commentCount: number): string => {\n    if (commentCount === 0) return \"Add New Comment\";\n    return commentCount === 1 ? \"1 Comment\" : `${commentCount} Comments`;\n};\n\n/**\n * returns the available email.\n * @param {IUserDTO} user - The user object.\n * @returns {string} The user's email.\n */\nexport const getUserName = (user: IUserDTO): string => {\n    return user.firstName && user.lastName\n        ? `${user.firstName} ${user.lastName}`\n        : user.firstName || user.lastName || user.email;\n};\n\n/**\n * Validates the comment length and the number of mentions.\n * @param {string} comment - The comment message.\n * @param {IMentionedList} toUsers - The list of mentioned users.\n * @returns {string} The error message if validation fails, otherwise an empty string.\n */\nexport const validateCommentAndMentions = (\n    comment: string,\n    toUsers: IMentionedList\n): string => {\n    if (comment.length > maxMessageLength) {\n        return `Limit exceeded. You can have a maximum length of ${maxMessageLength} characters.`;\n    }\n    if (toUsers.length > mentionLimit) {\n        return `Limit exceeded. You can tag a maximum of ${mentionLimit} users.`;\n    }\n    return \"\";\n};\n\n/**\n * Removes mentions that no longer exist in the message.\n * @param {string} message - The comment message.\n * @param {IMentionedList} toUsers - The list of mentioned users.\n * @returns {Object} The updated lists of mentioned users.\n */\nexport const filterOutInvalidMentions = (\n    message: string,\n    toUsers: IMentionedList\n) => {\n    const to_users_temp = toUsers.filter((user) =>\n        message.includes(user.display)\n    );\n\n    return {\n        toUsers: uniqBy(to_users_temp, \"id\"),\n    };\n};\n\n/**\n * Replaces mention placeholders with display names in the comment message.\n * @param {IMessageDTO | undefined} comment - The comment object.\n * @param {IUserState} userState - The user state containing user and role maps.\n * @param {\"text\" | \"html\"} profile - The format for the output message, either plain text or HTML.\n * @returns {string | undefined} The formatted message or undefined if the comment is not provided.\n */\nexport const getMessageWithDisplayName = (\n    comment: IMessageDTO | undefined | null,\n    userState: IUserState,\n    profile: \"text\" | \"html\"\n): string | undefined => {\n    if (!comment) return undefined;\n\n    let tempText = sanitizeData(comment.message).replace(/<[^>]*>/g, \"\");\n\n    comment?.toUsers?.forEach((user) => {\n        const userPattern = new RegExp(`{{${user}}}`, \"g\");\n        const userData = userState.userMap[user];\n        const replacement =\n            profile === \"html\"\n                ? `<b class=\"collab-thread-comment--message\">@${userData.display || getUserName(userData)}</b>`\n                : `@${userData.display || getUserName(userData)}`;\n        tempText = tempText.replace(userPattern, replacement);\n    });\n\n    return tempText;\n};\n\n/**\n * Sanitizes HTML content to prevent XSS attacks.\n * @param {any} dirty - The unsanitized HTML content.\n * @returns {string} The sanitized HTML content.\n */\nexport const sanitizeData = (dirty: any): string => {\n    return DOMPurify.sanitize(dirty, { USE_PROFILES: { html: true } });\n};\n\n/**\n * Constructs the comment body with mentions replaced by their unique identifiers.\n * @param {ICommentState} state - The state containing the comment and mentions.\n * @returns {Object} The comment body containing the sanitized message and mentioned users.\n */\nexport const getCommentBody = (state: ICommentState): ICommentState => {\n    let finalMessage = sanitizeData(state.message)\n        .replace(/[^\\S\\r\\n]+/g, \" \")\n        .replace(/ *\\n */g, \"\\n\")\n        .replace(/<[^>]*>/g, \"\")\n        .trim();\n\n    const comment = {\n        message: finalMessage,\n        toUsers: [],\n        images: [],\n        createdBy: state.createdBy,\n        author: state.author,\n    };\n\n    const updateMentionToUID = (\n        entity: IMentionItem,\n        result: Array<string>\n    ) => {\n        const displayName = entity.display;\n\n        const escapedDisplayName = escapeRegExp(`@${displayName}`);\n        const regexUser = new RegExp(escapedDisplayName, \"g\");\n        finalMessage = finalMessage.replace(regexUser, `{{${entity.id}}}`);\n        result.push(entity.id);\n    };\n\n    state.toUsers?.forEach((user) => updateMentionToUID(user, comment.toUsers));\n\n    comment.message = finalMessage;\n    return comment;\n};\n\nexport function normalizePath(path: string): string {\n    if (path === \"/\") return path;\n    return path.endsWith(\"/\") ? path.slice(0, -1) : path;\n}\n\nexport function fixSvgXPath(xpath: string | null): string {\n    if (!xpath) return \"\";\n    return xpath.replace(/\\/svg/g, \"/*[name()='svg']\");\n}\n\n/**\n * populate the position of the thread based on edges of the screen.\n * @param position\n * @param options\n * @returns\n */\nexport function adjustPositionToViewport(\n    position: { top: number; left: number },\n    options: {\n        threadWidth?: number;\n        safeMargin?: number;\n        topSafeMargin?: number;\n    } = {}\n): { top: number; left: number } {\n    const { top, left } = position;\n    const viewportWidth = window.innerWidth;\n    const safeMargin = options.safeMargin ?? 16;\n    const topSafeMargin = options.topSafeMargin ?? 42;\n    const threadWidth = options.threadWidth ?? 16;\n\n    let adjustedLeft = left;\n    let adjustedTop = top;\n\n    // Adjust position if too close to right edge\n    if (adjustedLeft + threadWidth > viewportWidth - safeMargin) {\n        adjustedLeft = viewportWidth - safeMargin - threadWidth;\n    }\n\n    // Adjust position if too close to top edge\n    if (adjustedTop - window.scrollY < topSafeMargin) {\n        adjustedTop = window.scrollY + topSafeMargin;\n    }\n\n    return { top: adjustedTop, left: adjustedLeft };\n}\n\nexport function formatDate(dateString: string): string {\n    if (!dateString) return \"\";\n    return dayjs(dateString).format(\"MMM DD, YYYY, hh:mm A\");\n}\n\ninterface PositionCoords {\n    top: number;\n    left: number;\n}\n\ninterface Positions {\n    bottom: PositionCoords;\n    top: PositionCoords;\n    left: PositionCoords;\n    right: PositionCoords;\n}\n\n/**\n * Calculates and updates tooltip position based on available viewport space.\n */\nexport const positionTooltip = (\n    tooltipRef: React.RefObject<HTMLDivElement>,\n    targetRef: React.RefObject<HTMLDivElement>,\n    position: \"top\" | \"bottom\" | \"left\" | \"right\",\n    setActualPosition: (position: \"top\" | \"bottom\" | \"left\" | \"right\") => void\n) => {\n    if (!tooltipRef.current || !targetRef.current) return;\n\n    const targetRect = targetRef.current.getBoundingClientRect();\n    const tooltipRect = tooltipRef.current.getBoundingClientRect();\n    const margin = 8;\n\n    const positions: Positions = {\n        bottom: {\n            top: targetRect.bottom + margin,\n            left: targetRect.left + (targetRect.width - tooltipRect.width) / 2,\n        },\n        top: {\n            top: targetRect.top - tooltipRect.height - margin,\n            left: targetRect.left + (targetRect.width - tooltipRect.width) / 2,\n        },\n        left: {\n            top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,\n            left: targetRect.left - tooltipRect.width - margin,\n        },\n        right: {\n            top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,\n            left: targetRect.right + margin,\n        },\n    };\n\n    let bestPosition = position;\n    let coords = positions[position];\n\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n\n    const wouldBeOutsideViewport = {\n        bottom: coords.top + tooltipRect.height > viewportHeight,\n        top: coords.top < 0,\n        left: coords.left < 0,\n        right: coords.left + tooltipRect.width > viewportWidth,\n    };\n\n    const horizontalOutOfBounds =\n        coords.left < 0 || coords.left + tooltipRect.width > viewportWidth;\n\n    if (wouldBeOutsideViewport[position] || horizontalOutOfBounds) {\n        const positionPriority = [\"bottom\", \"top\", \"right\", \"left\"];\n\n        positionPriority.splice(positionPriority.indexOf(position), 1);\n        positionPriority.push(position);\n\n        for (const pos of positionPriority) {\n            const testCoords = positions[pos as keyof Positions];\n\n            const isVisible =\n                testCoords.top >= 0 &&\n                testCoords.top + tooltipRect.height <= viewportHeight &&\n                testCoords.left >= 0 &&\n                testCoords.left + tooltipRect.width <= viewportWidth;\n\n            if (isVisible) {\n                bestPosition = pos as \"top\" | \"bottom\" | \"left\" | \"right\";\n                coords = testCoords;\n                break;\n            }\n        }\n    }\n\n    if (coords.left < 0) {\n        coords.left = margin;\n    } else if (coords.left + tooltipRect.width > viewportWidth) {\n        coords.left = viewportWidth - tooltipRect.width - margin;\n    }\n\n    if (coords.top < 0) {\n        coords.top = margin;\n    } else if (coords.top + tooltipRect.height > viewportHeight) {\n        coords.top = viewportHeight - tooltipRect.height - margin;\n    }\n\n    setActualPosition(bestPosition);\n\n    Object.assign(tooltipRef.current.style, {\n        top: `${coords.top}px`,\n        left: `${coords.left}px`,\n    });\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/utils/collabUtils.ts"],"sourcesContent":["import {\n    ICommentState,\n    IMentionedList,\n    IMentionItem,\n    IMessageDTO,\n    IUserDTO,\n    IUserState,\n} from \"../types/collab.types\";\nimport { maxMessageLength, mentionLimit } from \"./constants\";\nimport { uniqBy } from \"lodash-es\";\nimport DOMPurify from \"dompurify\";\nimport dayjs from \"dayjs\";\n\nconst escapeRegExp = (string: string): string => {\n    return string.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n};\n\n/**\n * Generates the title for the thread based on the number of comments.\n * @param {number} commentCount - The number of comments.\n * @returns {string} The title for the thread.\n */\nexport const getThreadTitle = (commentCount: number): string => {\n    if (commentCount === 0) return \"Add New Comment\";\n    return commentCount === 1 ? \"1 Comment\" : `${commentCount} Comments`;\n};\n\n/**\n * returns the available email.\n * @param {IUserDTO} user - The user object.\n * @returns {string} The user's email.\n */\nexport const getUserName = (user: IUserDTO): string => {\n    return user.firstName && user.lastName\n        ? `${user.firstName} ${user.lastName}`\n        : user.firstName || user.lastName || user.email;\n};\n\n/**\n * Validates the comment length and the number of mentions.\n * @param {string} comment - The comment message.\n * @param {IMentionedList} toUsers - The list of mentioned users.\n * @returns {string} The error message if validation fails, otherwise an empty string.\n */\nexport const validateCommentAndMentions = (\n    comment: string,\n    toUsers: IMentionedList\n): string => {\n    if (comment.length > maxMessageLength) {\n        return `Limit exceeded. You can have a maximum length of ${maxMessageLength} characters.`;\n    }\n    if (toUsers.length > mentionLimit) {\n        return `Limit exceeded. You can tag a maximum of ${mentionLimit} users.`;\n    }\n    return \"\";\n};\n\n/**\n * Removes mentions that no longer exist in the message.\n * @param {string} message - The comment message.\n * @param {IMentionedList} toUsers - The list of mentioned users.\n * @returns {Object} The updated lists of mentioned users.\n */\nexport const filterOutInvalidMentions = (\n    message: string,\n    toUsers: IMentionedList\n) => {\n    const to_users_temp = toUsers.filter((user) =>\n        message.includes(user.display)\n    );\n\n    return {\n        toUsers: uniqBy(to_users_temp, \"id\"),\n    };\n};\n\n/**\n * Replaces mention placeholders with display names in the comment message.\n * @param {IMessageDTO | undefined} comment - The comment object.\n * @param {IUserState} userState - The user state containing user and role maps.\n * @param {\"text\" | \"html\"} profile - The format for the output message, either plain text or HTML.\n * @returns {string | undefined} The formatted message or undefined if the comment is not provided.\n */\nexport const getMessageWithDisplayName = (\n    comment: IMessageDTO | undefined | null,\n    userState: IUserState,\n    profile: \"text\" | \"html\"\n): string | undefined => {\n    if (!comment) return undefined;\n\n    let tempText = sanitizeData(comment.message).replace(/<[^>]*>/g, \"\");\n\n    comment.toUsers?.forEach((user) => {\n        const userPattern = new RegExp(`{{${user}}}`, \"g\");\n        const userData = userState.userMap[user];\n        const displayName = userData\n            ? userData.display || getUserName(userData)\n            : `unknown user`;\n\n        const replacement =\n            profile === \"html\"\n                ? `<b class=\"collab-thread-comment--message\">@${displayName}</b>`\n                : `@${displayName}`;\n        tempText = tempText.replace(userPattern, replacement);\n    });\n\n    return tempText;\n};\n\n/**\n * Sanitizes HTML content to prevent XSS attacks.\n * @param {any} dirty - The unsanitized HTML content.\n * @returns {string} The sanitized HTML content.\n */\nexport const sanitizeData = (dirty: any): string => {\n    return DOMPurify.sanitize(dirty, { USE_PROFILES: { html: true } });\n};\n\n/**\n * Constructs the comment body with mentions replaced by their unique identifiers.\n * @param {ICommentState} state - The state containing the comment and mentions.\n * @returns {Object} The comment body containing the sanitized message and mentioned users.\n */\nexport const getCommentBody = (state: ICommentState): ICommentState => {\n    let finalMessage = sanitizeData(state.message)\n        .replace(/[^\\S\\r\\n]+/g, \" \")\n        .replace(/ *\\n */g, \"\\n\")\n        .replace(/<[^>]*>/g, \"\")\n        .trim();\n\n    const comment = {\n        message: finalMessage,\n        toUsers: [],\n        images: [],\n        createdBy: state.createdBy,\n        author: state.author,\n    };\n\n    const updateMentionToUID = (\n        entity: IMentionItem,\n        result: Array<string>\n    ) => {\n        const displayName = entity.display;\n\n        const escapedDisplayName = escapeRegExp(`@${displayName}`);\n        const regexUser = new RegExp(escapedDisplayName, \"g\");\n        finalMessage = finalMessage.replace(regexUser, `{{${entity.id}}}`);\n        result.push(entity.id);\n    };\n\n    state.toUsers?.forEach((user) => updateMentionToUID(user, comment.toUsers));\n\n    comment.message = finalMessage;\n    return comment;\n};\n\nexport function normalizePath(path: string): string {\n    if (path === \"/\") return path;\n    return path.endsWith(\"/\") ? path.slice(0, -1) : path;\n}\n\nexport function fixSvgXPath(xpath: string | null): string {\n    if (!xpath) return \"\";\n    return xpath.replace(/\\/svg/g, \"/*[name()='svg']\");\n}\n\n/**\n * populate the position of the thread based on edges of the screen.\n * @param position\n * @param options\n * @returns\n */\nexport function adjustPositionToViewport(\n    position: { top: number; left: number },\n    options: {\n        threadWidth?: number;\n        safeMargin?: number;\n        topSafeMargin?: number;\n    } = {}\n): { top: number; left: number } {\n    const { top, left } = position;\n    const viewportWidth = window.innerWidth;\n    const safeMargin = options.safeMargin ?? 16;\n    const topSafeMargin = options.topSafeMargin ?? 42;\n    const threadWidth = options.threadWidth ?? 16;\n\n    let adjustedLeft = left;\n    let adjustedTop = top;\n\n    // Adjust position if too close to right edge\n    if (adjustedLeft + threadWidth > viewportWidth - safeMargin) {\n        adjustedLeft = viewportWidth - safeMargin - threadWidth;\n    }\n\n    // Adjust position if too close to top edge\n    if (adjustedTop - window.scrollY < topSafeMargin) {\n        adjustedTop = window.scrollY + topSafeMargin;\n    }\n\n    return { top: adjustedTop, left: adjustedLeft };\n}\n\nexport function formatDate(dateString: string): string {\n    if (!dateString) return \"\";\n    return dayjs(dateString).format(\"MMM DD, YYYY, hh:mm A\");\n}\n\ninterface PositionCoords {\n    top: number;\n    left: number;\n}\n\ninterface Positions {\n    bottom: PositionCoords;\n    top: PositionCoords;\n    left: PositionCoords;\n    right: PositionCoords;\n}\n\n/**\n * Calculates and updates tooltip position based on available viewport space.\n */\nexport const positionTooltip = (\n    tooltipRef: React.RefObject<HTMLDivElement>,\n    targetRef: React.RefObject<HTMLDivElement>,\n    position: \"top\" | \"bottom\" | \"left\" | \"right\",\n    setActualPosition: (position: \"top\" | \"bottom\" | \"left\" | \"right\") => void\n) => {\n    if (!tooltipRef.current || !targetRef.current) return;\n\n    const targetRect = targetRef.current.getBoundingClientRect();\n    const tooltipRect = tooltipRef.current.getBoundingClientRect();\n    const margin = 8;\n\n    const positions: Positions = {\n        bottom: {\n            top: targetRect.bottom + margin,\n            left: targetRect.left + (targetRect.width - tooltipRect.width) / 2,\n        },\n        top: {\n            top: targetRect.top - tooltipRect.height - margin,\n            left: targetRect.left + (targetRect.width - tooltipRect.width) / 2,\n        },\n        left: {\n            top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,\n            left: targetRect.left - tooltipRect.width - margin,\n        },\n        right: {\n            top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,\n            left: targetRect.right + margin,\n        },\n    };\n\n    let bestPosition = position;\n    let coords = positions[position];\n\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n\n    const wouldBeOutsideViewport = {\n        bottom: coords.top + tooltipRect.height > viewportHeight,\n        top: coords.top < 0,\n        left: coords.left < 0,\n        right: coords.left + tooltipRect.width > viewportWidth,\n    };\n\n    const horizontalOutOfBounds =\n        coords.left < 0 || coords.left + tooltipRect.width > viewportWidth;\n\n    if (wouldBeOutsideViewport[position] || horizontalOutOfBounds) {\n        const positionPriority = [\"bottom\", \"top\", \"right\", \"left\"];\n\n        positionPriority.splice(positionPriority.indexOf(position), 1);\n        positionPriority.push(position);\n\n        for (const pos of positionPriority) {\n            const testCoords = positions[pos as keyof Positions];\n\n            const isVisible =\n                testCoords.top >= 0 &&\n                testCoords.top + tooltipRect.height <= viewportHeight &&\n                testCoords.left >= 0 &&\n                testCoords.left + tooltipRect.width <= viewportWidth;\n\n            if (isVisible) {\n                bestPosition = pos as \"top\" | \"bottom\" | \"left\" | \"right\";\n                coords = testCoords;\n                break;\n            }\n        }\n    }\n\n    if (coords.left < 0) {\n        coords.left = margin;\n    } else if (coords.left + tooltipRect.width > viewportWidth) {\n        coords.left = viewportWidth - tooltipRect.width - margin;\n    }\n\n    if (coords.top < 0) {\n        coords.top = margin;\n    } else if (coords.top + tooltipRect.height > viewportHeight) {\n        coords.top = viewportHeight - tooltipRect.height - margin;\n    }\n\n    setActualPosition(bestPosition);\n\n    Object.assign(tooltipRef.current.style, {\n        top: `${coords.top}px`,\n        left: `${coords.left}px`,\n    });\n};\n"],"mappings":"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","names":[]}

package/dist/legacy/visualBuilder/utils/handleFieldMouseDown.cjs

@@ -60,7 +60,9 @@ function handleFieldKeyDown(e) {
   const fieldType = targetElement.getAttribute(
     import_constants.VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY
   );
-  if (targetElement.tagName === "BUTTON") {
+  if (event.composedPath().some(
+    (element) => element instanceof Element && element.tagName === "BUTTON"
+  )) {
     handleKeyDownOnButton(event);
   }
   if (fieldType === import_types.FieldDataType.NUMBER) {
@@ -73,6 +75,7 @@ function handleKeyDownOnButton(e) {
   if (e.code === "Space" && e.target) {
     e.preventDefault();
     (0, import_insertSpaceAtCursor.insertSpaceAtCursor)(e.target);
+    throttledFieldSync();
   }
 }
 function handleSingleLineFieldKeyDown(e) {

package/dist/legacy/visualBuilder/utils/handleFieldMouseDown.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/utils/handleFieldMouseDown.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { sendFieldEvent } from \"../generators/generateOverlay\";\nimport {\n    ALLOWED_INLINE_EDITABLE_FIELD,\n    VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n    numericInputRegex,\n} from \"./constants\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { insertSpaceAtCursor } from \"./insertSpaceAtCursor\";\n\nexport function handleFieldInput(e: Event): void {\n    const event = e as InputEvent;\n    const targetElement = event.target as HTMLElement;\n    const fieldType = targetElement.getAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n    ) as FieldDataType | null;\n    if (\n        event.type === \"input\" &&\n        ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType as FieldDataType)\n    ) {\n        throttledFieldSync();\n    }\n}\nconst throttledFieldSync = throttle(() => {\n    try {\n        const visualBuilderContainer = document.querySelector(\n            \".visual-builder__container\"\n        ) as HTMLElement;\n        if (!visualBuilderContainer) return;\n        sendFieldEvent({\n            visualBuilderContainer,\n            eventType: VisualBuilderPostMessageEvents.SYNC_FIELD,\n        });\n    } catch (error) {\n        console.error(\"Error in throttledFieldSync\", error);\n    }\n}, 300);\n\nexport function handleFieldKeyDown(e: Event): void {\n    const event = e as KeyboardEvent;\n    const targetElement = event.target as HTMLElement;\n    const fieldType = targetElement.getAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n    ) as FieldDataType | null;\n\n    if (targetElement.tagName === \"BUTTON\") {\n        handleKeyDownOnButton(event);\n    }\n    if (fieldType === FieldDataType.NUMBER) {\n        handleNumericFieldKeyDown(event);\n    } else if (fieldType === FieldDataType.SINGLELINE) {\n        handleSingleLineFieldKeyDown(event);\n    }\n}\n\n// spaces do not work inside a button content-editable\n// this adds a space and moves the cursor ahead, the\n// button press event is also prevented\nfunction handleKeyDownOnButton(e: KeyboardEvent) {\n    if (e.code === \"Space\" && e.target) {\n        e.preventDefault();\n        insertSpaceAtCursor(e.target as HTMLElement);\n    }\n}\n\nfunction handleSingleLineFieldKeyDown(e: KeyboardEvent) {\n    if (e.code === \"Enter\") {\n        e.preventDefault();\n    }\n}\n\nfunction handleNumericFieldKeyDown(event: KeyboardEvent): void {\n    const targetElement = event.target as HTMLElement;\n\n    const allowedKeys = [\n        \"Backspace\",\n        \"Tab\",\n        \"Enter\",\n        \"End\",\n        \"Home\",\n        \"ArrowLeft\",\n        \"ArrowRight\",\n        \"Delete\",\n    ];\n\n    if (\n        event.ctrlKey ||\n        event.metaKey ||\n        event.altKey ||\n        allowedKeys.includes(event.code)\n    ) {\n        // Allow Ctrl, Cmd, Alt, and special keys\n        return;\n    }\n\n    if (event.code.includes(\"Digit\")) {\n        return;\n    }\n\n    const nonNumericAllowedCharacters = [\"-\", \".\", \"e\", \"E\"];\n\n    if (!nonNumericAllowedCharacters.includes(event.key)) {\n        event.preventDefault();\n        return;\n    }\n\n    const selection = {\n        startOffset: window.getSelection()?.getRangeAt(0).startOffset || 0,\n        endOffset: window.getSelection()?.getRangeAt(0).endOffset || 0,\n    };\n\n    const existingInput = targetElement.textContent || \"\";\n    const currentOutputArr = existingInput.split(\"\");\n    currentOutputArr.splice(\n        selection.startOffset,\n        selection.endOffset - selection.startOffset,\n        event.key\n    );\n    const currentInput = currentOutputArr.join(\"\");\n\n    if (!numericInputRegex.test(currentInput)) {\n        event.preventDefault();\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AACzB,6BAA+B;AAC/B,uBAIO;AACP,mBAA8B;AAC9B,yBAA+C;AAC/C,iCAAoC;AAE7B,SAAS,iBAAiB,GAAgB;AAC7C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AACA,MACI,MAAM,SAAS,WACf,+CAA8B,SAAS,SAA0B,GACnE;AACE,uBAAmB;AAAA,EACvB;AACJ;AACA,IAAM,yBAAqB,2BAAS,MAAM;AACtC,MAAI;AACA,UAAM,yBAAyB,SAAS;AAAA,MACpC;AAAA,IACJ;AACA,QAAI,CAAC,uBAAwB;AAC7B,+CAAe;AAAA,MACX;AAAA,MACA,WAAW,kDAA+B;AAAA,IAC9C,CAAC;AAAA,EACL,SAAS,OAAO;AACZ,YAAQ,MAAM,+BAA+B,KAAK;AAAA,EACtD;AACJ,GAAG,GAAG;AAEC,SAAS,mBAAmB,GAAgB;AAC/C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AAEA,MAAI,cAAc,YAAY,UAAU;AACpC,0BAAsB,KAAK;AAAA,EAC/B;AACA,MAAI,cAAc,2BAAc,QAAQ;AACpC,8BAA0B,KAAK;AAAA,EACnC,WAAW,cAAc,2BAAc,YAAY;AAC/C,iCAA6B,KAAK;AAAA,EACtC;AACJ;AAKA,SAAS,sBAAsB,GAAkB;AAC7C,MAAI,EAAE,SAAS,WAAW,EAAE,QAAQ;AAChC,MAAE,eAAe;AACjB,wDAAoB,EAAE,MAAqB;AAAA,EAC/C;AACJ;AAEA,SAAS,6BAA6B,GAAkB;AACpD,MAAI,EAAE,SAAS,SAAS;AACpB,MAAE,eAAe;AAAA,EACrB;AACJ;AAEA,SAAS,0BAA0B,OAA4B;AAxE/D;AAyEI,QAAM,gBAAgB,MAAM;AAE5B,QAAM,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAEA,MACI,MAAM,WACN,MAAM,WACN,MAAM,UACN,YAAY,SAAS,MAAM,IAAI,GACjC;AAEE;AAAA,EACJ;AAEA,MAAI,MAAM,KAAK,SAAS,OAAO,GAAG;AAC9B;AAAA,EACJ;AAEA,QAAM,8BAA8B,CAAC,KAAK,KAAK,KAAK,GAAG;AAEvD,MAAI,CAAC,4BAA4B,SAAS,MAAM,GAAG,GAAG;AAClD,UAAM,eAAe;AACrB;AAAA,EACJ;AAEA,QAAM,YAAY;AAAA,IACd,eAAa,YAAO,aAAa,MAApB,mBAAuB,WAAW,GAAG,gBAAe;AAAA,IACjE,aAAW,YAAO,aAAa,MAApB,mBAAuB,WAAW,GAAG,cAAa;AAAA,EACjE;AAEA,QAAM,gBAAgB,cAAc,eAAe;AACnD,QAAM,mBAAmB,cAAc,MAAM,EAAE;AAC/C,mBAAiB;AAAA,IACb,UAAU;AAAA,IACV,UAAU,YAAY,UAAU;AAAA,IAChC,MAAM;AAAA,EACV;AACA,QAAM,eAAe,iBAAiB,KAAK,EAAE;AAE7C,MAAI,CAAC,mCAAkB,KAAK,YAAY,GAAG;AACvC,UAAM,eAAe;AAAA,EACzB;AACJ;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/utils/handleFieldMouseDown.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { sendFieldEvent } from \"../generators/generateOverlay\";\nimport {\n    ALLOWED_INLINE_EDITABLE_FIELD,\n    VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n    numericInputRegex,\n} from \"./constants\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { insertSpaceAtCursor } from \"./insertSpaceAtCursor\";\n\nexport function handleFieldInput(e: Event): void {\n    const event = e as InputEvent;\n    const targetElement = event.target as HTMLElement;\n    const fieldType = targetElement.getAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n    ) as FieldDataType | null;\n    if (\n        event.type === \"input\" &&\n        ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType as FieldDataType)\n    ) {\n        throttledFieldSync();\n    }\n}\nconst throttledFieldSync = throttle(() => {\n    try {\n        const visualBuilderContainer = document.querySelector(\n            \".visual-builder__container\"\n        ) as HTMLElement;\n        if (!visualBuilderContainer) return;\n        sendFieldEvent({\n            visualBuilderContainer,\n            eventType: VisualBuilderPostMessageEvents.SYNC_FIELD,\n        });\n    } catch (error) {\n        console.error(\"Error in throttledFieldSync\", error);\n    }\n}, 300);\n\nexport function handleFieldKeyDown(e: Event): void {\n    const event = e as KeyboardEvent;\n    const targetElement = event.target as HTMLElement;\n    const fieldType = targetElement.getAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n    ) as FieldDataType | null;\n\n    if (\n        event\n            .composedPath()\n            .some(\n                (element) =>\n                    element instanceof Element && element.tagName === \"BUTTON\"\n            )\n    ) {\n        // custom space handling when a button is involved\n        handleKeyDownOnButton(event);\n    }\n    if (fieldType === FieldDataType.NUMBER) {\n        handleNumericFieldKeyDown(event);\n    } else if (fieldType === FieldDataType.SINGLELINE) {\n        handleSingleLineFieldKeyDown(event);\n    }\n}\n\n// spaces do not work inside a button content-editable\n// this adds a space and moves the cursor ahead, the\n// button press event is also prevented, finally syncs the field\nfunction handleKeyDownOnButton(e: KeyboardEvent) {\n    if (e.code === \"Space\" && e.target) {\n        e.preventDefault();\n        insertSpaceAtCursor(e.target as HTMLElement);\n        throttledFieldSync();\n    }\n}\n\nfunction handleSingleLineFieldKeyDown(e: KeyboardEvent) {\n    if (e.code === \"Enter\") {\n        e.preventDefault();\n    }\n}\n\nfunction handleNumericFieldKeyDown(event: KeyboardEvent): void {\n    const targetElement = event.target as HTMLElement;\n\n    const allowedKeys = [\n        \"Backspace\",\n        \"Tab\",\n        \"Enter\",\n        \"End\",\n        \"Home\",\n        \"ArrowLeft\",\n        \"ArrowRight\",\n        \"Delete\",\n    ];\n\n    if (\n        event.ctrlKey ||\n        event.metaKey ||\n        event.altKey ||\n        allowedKeys.includes(event.code)\n    ) {\n        // Allow Ctrl, Cmd, Alt, and special keys\n        return;\n    }\n\n    if (event.code.includes(\"Digit\")) {\n        return;\n    }\n\n    const nonNumericAllowedCharacters = [\"-\", \".\", \"e\", \"E\"];\n\n    if (!nonNumericAllowedCharacters.includes(event.key)) {\n        event.preventDefault();\n        return;\n    }\n\n    const selection = {\n        startOffset: window.getSelection()?.getRangeAt(0).startOffset || 0,\n        endOffset: window.getSelection()?.getRangeAt(0).endOffset || 0,\n    };\n\n    const existingInput = targetElement.textContent || \"\";\n    const currentOutputArr = existingInput.split(\"\");\n    currentOutputArr.splice(\n        selection.startOffset,\n        selection.endOffset - selection.startOffset,\n        event.key\n    );\n    const currentInput = currentOutputArr.join(\"\");\n\n    if (!numericInputRegex.test(currentInput)) {\n        event.preventDefault();\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AACzB,6BAA+B;AAC/B,uBAIO;AACP,mBAA8B;AAC9B,yBAA+C;AAC/C,iCAAoC;AAE7B,SAAS,iBAAiB,GAAgB;AAC7C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AACA,MACI,MAAM,SAAS,WACf,+CAA8B,SAAS,SAA0B,GACnE;AACE,uBAAmB;AAAA,EACvB;AACJ;AACA,IAAM,yBAAqB,2BAAS,MAAM;AACtC,MAAI;AACA,UAAM,yBAAyB,SAAS;AAAA,MACpC;AAAA,IACJ;AACA,QAAI,CAAC,uBAAwB;AAC7B,+CAAe;AAAA,MACX;AAAA,MACA,WAAW,kDAA+B;AAAA,IAC9C,CAAC;AAAA,EACL,SAAS,OAAO;AACZ,YAAQ,MAAM,+BAA+B,KAAK;AAAA,EACtD;AACJ,GAAG,GAAG;AAEC,SAAS,mBAAmB,GAAgB;AAC/C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AAEA,MACI,MACK,aAAa,EACb;AAAA,IACG,CAAC,YACG,mBAAmB,WAAW,QAAQ,YAAY;AAAA,EAC1D,GACN;AAEE,0BAAsB,KAAK;AAAA,EAC/B;AACA,MAAI,cAAc,2BAAc,QAAQ;AACpC,8BAA0B,KAAK;AAAA,EACnC,WAAW,cAAc,2BAAc,YAAY;AAC/C,iCAA6B,KAAK;AAAA,EACtC;AACJ;AAKA,SAAS,sBAAsB,GAAkB;AAC7C,MAAI,EAAE,SAAS,WAAW,EAAE,QAAQ;AAChC,MAAE,eAAe;AACjB,wDAAoB,EAAE,MAAqB;AAC3C,uBAAmB;AAAA,EACvB;AACJ;AAEA,SAAS,6BAA6B,GAAkB;AACpD,MAAI,EAAE,SAAS,SAAS;AACpB,MAAE,eAAe;AAAA,EACrB;AACJ;AAEA,SAAS,0BAA0B,OAA4B;AAjF/D;AAkFI,QAAM,gBAAgB,MAAM;AAE5B,QAAM,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAEA,MACI,MAAM,WACN,MAAM,WACN,MAAM,UACN,YAAY,SAAS,MAAM,IAAI,GACjC;AAEE;AAAA,EACJ;AAEA,MAAI,MAAM,KAAK,SAAS,OAAO,GAAG;AAC9B;AAAA,EACJ;AAEA,QAAM,8BAA8B,CAAC,KAAK,KAAK,KAAK,GAAG;AAEvD,MAAI,CAAC,4BAA4B,SAAS,MAAM,GAAG,GAAG;AAClD,UAAM,eAAe;AACrB;AAAA,EACJ;AAEA,QAAM,YAAY;AAAA,IACd,eAAa,YAAO,aAAa,MAApB,mBAAuB,WAAW,GAAG,gBAAe;AAAA,IACjE,aAAW,YAAO,aAAa,MAApB,mBAAuB,WAAW,GAAG,cAAa;AAAA,EACjE;AAEA,QAAM,gBAAgB,cAAc,eAAe;AACnD,QAAM,mBAAmB,cAAc,MAAM,EAAE;AAC/C,mBAAiB;AAAA,IACb,UAAU;AAAA,IACV,UAAU,YAAY,UAAU;AAAA,IAChC,MAAM;AAAA,EACV;AACA,QAAM,eAAe,iBAAiB,KAAK,EAAE;AAE7C,MAAI,CAAC,mCAAkB,KAAK,YAAY,GAAG;AACvC,UAAM,eAAe;AAAA,EACzB;AACJ;","names":[]}

package/dist/legacy/visualBuilder/utils/handleFieldMouseDown.js

@@ -41,7 +41,9 @@ function handleFieldKeyDown(e) {
   const fieldType = targetElement.getAttribute(
     VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY
   );
-  if (targetElement.tagName === "BUTTON") {
+  if (event.composedPath().some(
+    (element) => element instanceof Element && element.tagName === "BUTTON"
+  )) {
     handleKeyDownOnButton(event);
   }
   if (fieldType === FieldDataType.NUMBER) {
@@ -54,6 +56,7 @@ function handleKeyDownOnButton(e) {
   if (e.code === "Space" && e.target) {
     e.preventDefault();
     insertSpaceAtCursor(e.target);
+    throttledFieldSync();
   }
 }
 function handleSingleLineFieldKeyDown(e) {

package/dist/legacy/visualBuilder/utils/handleFieldMouseDown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/utils/handleFieldMouseDown.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { sendFieldEvent } from \"../generators/generateOverlay\";\nimport {\n    ALLOWED_INLINE_EDITABLE_FIELD,\n    VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n    numericInputRegex,\n} from \"./constants\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { insertSpaceAtCursor } from \"./insertSpaceAtCursor\";\n\nexport function handleFieldInput(e: Event): void {\n    const event = e as InputEvent;\n    const targetElement = event.target as HTMLElement;\n    const fieldType = targetElement.getAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n    ) as FieldDataType | null;\n    if (\n        event.type === \"input\" &&\n        ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType as FieldDataType)\n    ) {\n        throttledFieldSync();\n    }\n}\nconst throttledFieldSync = throttle(() => {\n    try {\n        const visualBuilderContainer = document.querySelector(\n            \".visual-builder__container\"\n        ) as HTMLElement;\n        if (!visualBuilderContainer) return;\n        sendFieldEvent({\n            visualBuilderContainer,\n            eventType: VisualBuilderPostMessageEvents.SYNC_FIELD,\n        });\n    } catch (error) {\n        console.error(\"Error in throttledFieldSync\", error);\n    }\n}, 300);\n\nexport function handleFieldKeyDown(e: Event): void {\n    const event = e as KeyboardEvent;\n    const targetElement = event.target as HTMLElement;\n    const fieldType = targetElement.getAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n    ) as FieldDataType | null;\n\n    if (targetElement.tagName === \"BUTTON\") {\n        handleKeyDownOnButton(event);\n    }\n    if (fieldType === FieldDataType.NUMBER) {\n        handleNumericFieldKeyDown(event);\n    } else if (fieldType === FieldDataType.SINGLELINE) {\n        handleSingleLineFieldKeyDown(event);\n    }\n}\n\n// spaces do not work inside a button content-editable\n// this adds a space and moves the cursor ahead, the\n// button press event is also prevented\nfunction handleKeyDownOnButton(e: KeyboardEvent) {\n    if (e.code === \"Space\" && e.target) {\n        e.preventDefault();\n        insertSpaceAtCursor(e.target as HTMLElement);\n    }\n}\n\nfunction handleSingleLineFieldKeyDown(e: KeyboardEvent) {\n    if (e.code === \"Enter\") {\n        e.preventDefault();\n    }\n}\n\nfunction handleNumericFieldKeyDown(event: KeyboardEvent): void {\n    const targetElement = event.target as HTMLElement;\n\n    const allowedKeys = [\n        \"Backspace\",\n        \"Tab\",\n        \"Enter\",\n        \"End\",\n        \"Home\",\n        \"ArrowLeft\",\n        \"ArrowRight\",\n        \"Delete\",\n    ];\n\n    if (\n        event.ctrlKey ||\n        event.metaKey ||\n        event.altKey ||\n        allowedKeys.includes(event.code)\n    ) {\n        // Allow Ctrl, Cmd, Alt, and special keys\n        return;\n    }\n\n    if (event.code.includes(\"Digit\")) {\n        return;\n    }\n\n    const nonNumericAllowedCharacters = [\"-\", \".\", \"e\", \"E\"];\n\n    if (!nonNumericAllowedCharacters.includes(event.key)) {\n        event.preventDefault();\n        return;\n    }\n\n    const selection = {\n        startOffset: window.getSelection()?.getRangeAt(0).startOffset || 0,\n        endOffset: window.getSelection()?.getRangeAt(0).endOffset || 0,\n    };\n\n    const existingInput = targetElement.textContent || \"\";\n    const currentOutputArr = existingInput.split(\"\");\n    currentOutputArr.splice(\n        selection.startOffset,\n        selection.endOffset - selection.startOffset,\n        event.key\n    );\n    const currentInput = currentOutputArr.join(\"\");\n\n    if (!numericInputRegex.test(currentInput)) {\n        event.preventDefault();\n    }\n}\n"],"mappings":";;;AAAA,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,qBAAqB;AAC9B,SAAS,sCAAsC;AAC/C,SAAS,2BAA2B;AAE7B,SAAS,iBAAiB,GAAgB;AAC7C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AACA,MACI,MAAM,SAAS,WACf,8BAA8B,SAAS,SAA0B,GACnE;AACE,uBAAmB;AAAA,EACvB;AACJ;AACA,IAAM,qBAAqB,SAAS,MAAM;AACtC,MAAI;AACA,UAAM,yBAAyB,SAAS;AAAA,MACpC;AAAA,IACJ;AACA,QAAI,CAAC,uBAAwB;AAC7B,mBAAe;AAAA,MACX;AAAA,MACA,WAAW,+BAA+B;AAAA,IAC9C,CAAC;AAAA,EACL,SAAS,OAAO;AACZ,YAAQ,MAAM,+BAA+B,KAAK;AAAA,EACtD;AACJ,GAAG,GAAG;AAEC,SAAS,mBAAmB,GAAgB;AAC/C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AAEA,MAAI,cAAc,YAAY,UAAU;AACpC,0BAAsB,KAAK;AAAA,EAC/B;AACA,MAAI,cAAc,cAAc,QAAQ;AACpC,8BAA0B,KAAK;AAAA,EACnC,WAAW,cAAc,cAAc,YAAY;AAC/C,iCAA6B,KAAK;AAAA,EACtC;AACJ;AAKA,SAAS,sBAAsB,GAAkB;AAC7C,MAAI,EAAE,SAAS,WAAW,EAAE,QAAQ;AAChC,MAAE,eAAe;AACjB,wBAAoB,EAAE,MAAqB;AAAA,EAC/C;AACJ;AAEA,SAAS,6BAA6B,GAAkB;AACpD,MAAI,EAAE,SAAS,SAAS;AACpB,MAAE,eAAe;AAAA,EACrB;AACJ;AAEA,SAAS,0BAA0B,OAA4B;AAxE/D;AAyEI,QAAM,gBAAgB,MAAM;AAE5B,QAAM,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAEA,MACI,MAAM,WACN,MAAM,WACN,MAAM,UACN,YAAY,SAAS,MAAM,IAAI,GACjC;AAEE;AAAA,EACJ;AAEA,MAAI,MAAM,KAAK,SAAS,OAAO,GAAG;AAC9B;AAAA,EACJ;AAEA,QAAM,8BAA8B,CAAC,KAAK,KAAK,KAAK,GAAG;AAEvD,MAAI,CAAC,4BAA4B,SAAS,MAAM,GAAG,GAAG;AAClD,UAAM,eAAe;AACrB;AAAA,EACJ;AAEA,QAAM,YAAY;AAAA,IACd,eAAa,YAAO,aAAa,MAApB,mBAAuB,WAAW,GAAG,gBAAe;AAAA,IACjE,aAAW,YAAO,aAAa,MAApB,mBAAuB,WAAW,GAAG,cAAa;AAAA,EACjE;AAEA,QAAM,gBAAgB,cAAc,eAAe;AACnD,QAAM,mBAAmB,cAAc,MAAM,EAAE;AAC/C,mBAAiB;AAAA,IACb,UAAU;AAAA,IACV,UAAU,YAAY,UAAU;AAAA,IAChC,MAAM;AAAA,EACV;AACA,QAAM,eAAe,iBAAiB,KAAK,EAAE;AAE7C,MAAI,CAAC,kBAAkB,KAAK,YAAY,GAAG;AACvC,UAAM,eAAe;AAAA,EACzB;AACJ;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/utils/handleFieldMouseDown.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { sendFieldEvent } from \"../generators/generateOverlay\";\nimport {\n    ALLOWED_INLINE_EDITABLE_FIELD,\n    VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n    numericInputRegex,\n} from \"./constants\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { insertSpaceAtCursor } from \"./insertSpaceAtCursor\";\n\nexport function handleFieldInput(e: Event): void {\n    const event = e as InputEvent;\n    const targetElement = event.target as HTMLElement;\n    const fieldType = targetElement.getAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n    ) as FieldDataType | null;\n    if (\n        event.type === \"input\" &&\n        ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType as FieldDataType)\n    ) {\n        throttledFieldSync();\n    }\n}\nconst throttledFieldSync = throttle(() => {\n    try {\n        const visualBuilderContainer = document.querySelector(\n            \".visual-builder__container\"\n        ) as HTMLElement;\n        if (!visualBuilderContainer) return;\n        sendFieldEvent({\n            visualBuilderContainer,\n            eventType: VisualBuilderPostMessageEvents.SYNC_FIELD,\n        });\n    } catch (error) {\n        console.error(\"Error in throttledFieldSync\", error);\n    }\n}, 300);\n\nexport function handleFieldKeyDown(e: Event): void {\n    const event = e as KeyboardEvent;\n    const targetElement = event.target as HTMLElement;\n    const fieldType = targetElement.getAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n    ) as FieldDataType | null;\n\n    if (\n        event\n            .composedPath()\n            .some(\n                (element) =>\n                    element instanceof Element && element.tagName === \"BUTTON\"\n            )\n    ) {\n        // custom space handling when a button is involved\n        handleKeyDownOnButton(event);\n    }\n    if (fieldType === FieldDataType.NUMBER) {\n        handleNumericFieldKeyDown(event);\n    } else if (fieldType === FieldDataType.SINGLELINE) {\n        handleSingleLineFieldKeyDown(event);\n    }\n}\n\n// spaces do not work inside a button content-editable\n// this adds a space and moves the cursor ahead, the\n// button press event is also prevented, finally syncs the field\nfunction handleKeyDownOnButton(e: KeyboardEvent) {\n    if (e.code === \"Space\" && e.target) {\n        e.preventDefault();\n        insertSpaceAtCursor(e.target as HTMLElement);\n        throttledFieldSync();\n    }\n}\n\nfunction handleSingleLineFieldKeyDown(e: KeyboardEvent) {\n    if (e.code === \"Enter\") {\n        e.preventDefault();\n    }\n}\n\nfunction handleNumericFieldKeyDown(event: KeyboardEvent): void {\n    const targetElement = event.target as HTMLElement;\n\n    const allowedKeys = [\n        \"Backspace\",\n        \"Tab\",\n        \"Enter\",\n        \"End\",\n        \"Home\",\n        \"ArrowLeft\",\n        \"ArrowRight\",\n        \"Delete\",\n    ];\n\n    if (\n        event.ctrlKey ||\n        event.metaKey ||\n        event.altKey ||\n        allowedKeys.includes(event.code)\n    ) {\n        // Allow Ctrl, Cmd, Alt, and special keys\n        return;\n    }\n\n    if (event.code.includes(\"Digit\")) {\n        return;\n    }\n\n    const nonNumericAllowedCharacters = [\"-\", \".\", \"e\", \"E\"];\n\n    if (!nonNumericAllowedCharacters.includes(event.key)) {\n        event.preventDefault();\n        return;\n    }\n\n    const selection = {\n        startOffset: window.getSelection()?.getRangeAt(0).startOffset || 0,\n        endOffset: window.getSelection()?.getRangeAt(0).endOffset || 0,\n    };\n\n    const existingInput = targetElement.textContent || \"\";\n    const currentOutputArr = existingInput.split(\"\");\n    currentOutputArr.splice(\n        selection.startOffset,\n        selection.endOffset - selection.startOffset,\n        event.key\n    );\n    const currentInput = currentOutputArr.join(\"\");\n\n    if (!numericInputRegex.test(currentInput)) {\n        event.preventDefault();\n    }\n}\n"],"mappings":";;;AAAA,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,qBAAqB;AAC9B,SAAS,sCAAsC;AAC/C,SAAS,2BAA2B;AAE7B,SAAS,iBAAiB,GAAgB;AAC7C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AACA,MACI,MAAM,SAAS,WACf,8BAA8B,SAAS,SAA0B,GACnE;AACE,uBAAmB;AAAA,EACvB;AACJ;AACA,IAAM,qBAAqB,SAAS,MAAM;AACtC,MAAI;AACA,UAAM,yBAAyB,SAAS;AAAA,MACpC;AAAA,IACJ;AACA,QAAI,CAAC,uBAAwB;AAC7B,mBAAe;AAAA,MACX;AAAA,MACA,WAAW,+BAA+B;AAAA,IAC9C,CAAC;AAAA,EACL,SAAS,OAAO;AACZ,YAAQ,MAAM,+BAA+B,KAAK;AAAA,EACtD;AACJ,GAAG,GAAG;AAEC,SAAS,mBAAmB,GAAgB;AAC/C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AAEA,MACI,MACK,aAAa,EACb;AAAA,IACG,CAAC,YACG,mBAAmB,WAAW,QAAQ,YAAY;AAAA,EAC1D,GACN;AAEE,0BAAsB,KAAK;AAAA,EAC/B;AACA,MAAI,cAAc,cAAc,QAAQ;AACpC,8BAA0B,KAAK;AAAA,EACnC,WAAW,cAAc,cAAc,YAAY;AAC/C,iCAA6B,KAAK;AAAA,EACtC;AACJ;AAKA,SAAS,sBAAsB,GAAkB;AAC7C,MAAI,EAAE,SAAS,WAAW,EAAE,QAAQ;AAChC,MAAE,eAAe;AACjB,wBAAoB,EAAE,MAAqB;AAC3C,uBAAmB;AAAA,EACvB;AACJ;AAEA,SAAS,6BAA6B,GAAkB;AACpD,MAAI,EAAE,SAAS,SAAS;AACpB,MAAE,eAAe;AAAA,EACrB;AACJ;AAEA,SAAS,0BAA0B,OAA4B;AAjF/D;AAkFI,QAAM,gBAAgB,MAAM;AAE5B,QAAM,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAEA,MACI,MAAM,WACN,MAAM,WACN,MAAM,UACN,YAAY,SAAS,MAAM,IAAI,GACjC;AAEE;AAAA,EACJ;AAEA,MAAI,MAAM,KAAK,SAAS,OAAO,GAAG;AAC9B;AAAA,EACJ;AAEA,QAAM,8BAA8B,CAAC,KAAK,KAAK,KAAK,GAAG;AAEvD,MAAI,CAAC,4BAA4B,SAAS,MAAM,GAAG,GAAG;AAClD,UAAM,eAAe;AACrB;AAAA,EACJ;AAEA,QAAM,YAAY;AAAA,IACd,eAAa,YAAO,aAAa,MAApB,mBAAuB,WAAW,GAAG,gBAAe;AAAA,IACjE,aAAW,YAAO,aAAa,MAApB,mBAAuB,WAAW,GAAG,cAAa;AAAA,EACjE;AAEA,QAAM,gBAAgB,cAAc,eAAe;AACnD,QAAM,mBAAmB,cAAc,MAAM,EAAE;AAC/C,mBAAiB;AAAA,IACb,UAAU;AAAA,IACV,UAAU,YAAY,UAAU;AAAA,IAChC,MAAM;AAAA,EACV;AACA,QAAM,eAAe,iBAAiB,KAAK,EAAE;AAE7C,MAAI,CAAC,kBAAkB,KAAK,YAAY,GAAG;AACvC,UAAM,eAAe;AAAA,EACzB;AACJ;","names":[]}

package/dist/legacy/visualBuilder/utils/updateFocussedState.cjs

@@ -79,10 +79,11 @@ function updateFocussedState({
   if (!visualBuilderContainer || !editableElement || !previousSelectedEditableDOM || !overlayWrapper) {
     return;
   }
-  const previousSelectedElementCslp = previousSelectedEditableDOM == null ? void 0 : previousSelectedEditableDOM.getAttribute("data-cslp");
+  const previousSelectedElementCslp = (editableElement == null ? void 0 : editableElement.getAttribute("data-cslp")) || "";
+  const previousSelectedElementCslpUniqueId = previousSelectedEditableDOM == null ? void 0 : previousSelectedEditableDOM.getAttribute("data-cslp-unique-id");
   const newPreviousSelectedElement = document.querySelector(
-    `[data-cslp="${previousSelectedElementCslp}"]`
-  );
+    `[data-cslp-unique-id="${previousSelectedElementCslpUniqueId}"]`
+  ) || document.querySelector(`[data-cslp="${previousSelectedElementCslp}"]`);
   if (!newPreviousSelectedElement && resizeObserver) {
     (0, import_generateOverlay.hideFocusOverlay)({
       visualBuilderOverlayWrapper: overlayWrapper,
@@ -113,8 +114,7 @@ function updateFocussedState({
     psuedoEditableElement.style.cssText = styleString;
     psuedoEditableElement.style.visibility = "visible";
   }
-  const cslp = (editableElement == null ? void 0 : editableElement.getAttribute("data-cslp")) || "";
-  const fieldMetadata = (0, import_cslp.extractDetailsFromCslp)(cslp);
+  const fieldMetadata = (0, import_cslp.extractDetailsFromCslp)(previousSelectedElementCslp);
   const targetElementDimension = editableElement.getBoundingClientRect();
   if (targetElementDimension.width && targetElementDimension.height) {
     const selectedElement = import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
@@ -153,9 +153,12 @@ function updateFocussedStateOnMutation(focusOverlayWrapper, focusedToolbar, visu
   let selectedElement = import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
   if (!selectedElement) return;
   const selectedElementCslp = selectedElement == null ? void 0 : selectedElement.getAttribute("data-cslp");
-  const newSelectedElement = document.querySelector(
-    `[data-cslp="${selectedElementCslp}"]`
+  const selectedElementCslpUniqueId = selectedElement == null ? void 0 : selectedElement.getAttribute(
+    "data-cslp-unique-id"
   );
+  const newSelectedElement = document.querySelector(
+    `[data-cslp-unique-id="${selectedElementCslpUniqueId}"]`
+  ) || document.querySelector(`[data-cslp="${selectedElementCslp}"]`);
   if (!newSelectedElement && resizeObserver) {
     (0, import_generateOverlay.hideFocusOverlay)({
       visualBuilderOverlayWrapper: focusOverlayWrapper,

package/dist/legacy/visualBuilder/utils/updateFocussedState.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/utils/updateFocussedState.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { getAddInstanceButtons } from \"../generators/generateAddInstanceButtons\";\nimport {\n    addFocusOverlay,\n    hideFocusOverlay,\n} from \"../generators/generateOverlay\";\nimport { hideHoverOutline } from \"../listeners/mouseHover\";\nimport {\n    LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,\n    RIGHT_EDGE_BUFFER,\n    TOOLBAR_EDGE_BUFFER,\n    TOP_EDGE_BUFFER,\n} from \"./constants\";\nimport getChildrenDirection from \"./getChildrenDirection\";\nimport { getPsuedoEditableElementStyles } from \"./getPsuedoEditableStylesElement\";\nimport getStyleOfAnElement from \"./getStyleOfAnElement\";\n\ninterface ToolbarPositionParams {\n    focusedToolbar: HTMLElement | null;\n    selectedElementDimension: DOMRect;\n}\n/**\n * Adjust the position of the field toolbar instead of clearing the innerhtml fo the focused toolbar.\n * By doing this, can avoid the re-rendering of the focus field toolbar.\n */\nfunction positionToolbar({\n    focusedToolbar,\n    selectedElementDimension,\n}: ToolbarPositionParams): void {\n    if (focusedToolbar) {\n        const targetElementRightEdgeOffset =\n            window.scrollX + window.innerWidth - selectedElementDimension.left;\n        const distanceFromTop =\n            selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n\n        // Adjust top position based on the available space\n        const adjustedDistanceFromTop =\n            selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n                ? distanceFromTop +\n                  selectedElementDimension.height +\n                  TOP_EDGE_BUFFER\n                : distanceFromTop;\n\n        const distanceFromLeft =\n            selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n        const adjustedDistanceFromLeft = Math.max(\n            distanceFromLeft,\n            TOOLBAR_EDGE_BUFFER\n        );\n\n        // Handle right-edge overflow\n        if (\n            targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n            (focusedToolbar.style.justifyContent !== \"flex-end\" ||\n                focusedToolbar.style.left !==\n                    `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`)\n        ) {\n            focusedToolbar.style.justifyContent = \"flex-end\";\n            focusedToolbar.style.left = `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`;\n        } else if (\n            focusedToolbar.style.justifyContent !== \"flex-start\" ||\n            focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n        ) {\n            focusedToolbar.style.justifyContent = \"flex-start\"; // Default\n            focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n        }\n\n        // Adjust top position if necessary\n        if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {\n            focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n        }\n    }\n}\n\n/**\n * This function can be used to re-draw/update the focussed state of an element.\n * The focussed state includes the overlay, psuedo-editable, toolbar, and multiple\n * instance add buttons. It is similar to handleBuilderInteraction but it does not\n * create new elements, it just updates the existing ones whenever possible.\n * NOTE: breakdown this function into multiple functions when the need arises\n */\nexport function updateFocussedState({\n    editableElement,\n    visualBuilderContainer,\n    overlayWrapper,\n    focusedToolbar,\n    resizeObserver,\n}: {\n    editableElement: HTMLElement | null;\n    visualBuilderContainer: HTMLDivElement | null;\n    overlayWrapper: HTMLDivElement | null;\n    focusedToolbar: HTMLDivElement | null;\n    resizeObserver: ResizeObserver | null;\n}): void {\n    let previousSelectedEditableDOM =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    if (\n        !visualBuilderContainer ||\n        !editableElement ||\n        !previousSelectedEditableDOM ||\n        !overlayWrapper\n    ) {\n        return;\n    }\n\n    const previousSelectedElementCslp =\n        previousSelectedEditableDOM?.getAttribute(\"data-cslp\");\n    const newPreviousSelectedElement = document.querySelector(\n        `[data-cslp=\"${previousSelectedElementCslp}\"]`\n    );\n    if (!newPreviousSelectedElement && resizeObserver) {\n        hideFocusOverlay({\n            visualBuilderOverlayWrapper: overlayWrapper,\n            focusedToolbar,\n            visualBuilderContainer,\n            resizeObserver,\n            noTrigger: true,\n        });\n        return;\n    }\n    if (newPreviousSelectedElement !== previousSelectedEditableDOM) {\n        previousSelectedEditableDOM = newPreviousSelectedElement as HTMLElement;\n        VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n            previousSelectedEditableDOM;\n    }\n\n    hideHoverOutline(visualBuilderContainer);\n    addFocusOverlay(previousSelectedEditableDOM, overlayWrapper);\n\n    // update psuedo editable element if present\n    const psuedoEditableElement = visualBuilderContainer.querySelector(\n        \".visual-builder__pseudo-editable-element\"\n    ) as HTMLElement;\n    if (psuedoEditableElement) {\n        const styles = getPsuedoEditableElementStyles(editableElement);\n        const styleString = Object.entries(styles).reduce(\n            (acc, [key, value]) => {\n                return `${acc}${key}:${value};`;\n            },\n            \"\"\n        );\n        psuedoEditableElement.style.cssText = styleString;\n        // since we are copying styles from the editableEl\n        // it will now have a visibility of hidden, which we added\n        // when creating the pseudo editable element, so make the psuedo visible\n        psuedoEditableElement.style.visibility = \"visible\";\n    }\n\n    const cslp = editableElement?.getAttribute(\"data-cslp\") || \"\";\n    const fieldMetadata = extractDetailsFromCslp(cslp);\n\n    const targetElementDimension = editableElement.getBoundingClientRect();\n    if (targetElementDimension.width && targetElementDimension.height) {\n        const selectedElement =\n            VisualBuilder.VisualBuilderGlobalState.value\n                .previousSelectedEditableDOM;\n\n        if (!selectedElement) return;\n        // position the focused tool bar\n        positionToolbar({\n            focusedToolbar: focusedToolbar,\n            selectedElementDimension: selectedElement.getBoundingClientRect(),\n        });\n    }\n\n    // re-add multiple instance add buttons\n    const buttons = getAddInstanceButtons(visualBuilderContainer);\n    const parentCslpValue =\n        fieldMetadata.multipleFieldMetadata?.parentDetails?.parentCslpValue;\n    if (\n        buttons &&\n        parentCslpValue &&\n        buttons.length > 1 &&\n        buttons[0] &&\n        buttons[1]\n    ) {\n        const [previousButton, nextButton] = buttons;\n        const direction = getChildrenDirection(\n            editableElement,\n            parentCslpValue\n        );\n        const targetDOMDimension = editableElement.getBoundingClientRect();\n\n        if (direction === \"horizontal\") {\n            const middleHeight =\n                targetDOMDimension.top +\n                (targetDOMDimension.bottom - targetDOMDimension.top) / 2 +\n                window.scrollY;\n            previousButton.style.left = `${targetDOMDimension.left}px`;\n            previousButton.style.top = `${middleHeight}px`;\n\n            nextButton.style.left = `${targetDOMDimension.right}px`;\n            nextButton.style.top = `${middleHeight}px`;\n        } else if (direction === \"vertical\") {\n            const middleWidth =\n                targetDOMDimension.left +\n                (targetDOMDimension.right - targetDOMDimension.left) / 2;\n            previousButton.style.left = `${middleWidth}px`;\n            previousButton.style.top = `${\n                targetDOMDimension.top + window.scrollY\n            }px`;\n\n            nextButton.style.left = `${middleWidth}px`;\n            nextButton.style.top = `${\n                targetDOMDimension.bottom + window.scrollY\n            }px`;\n        }\n    }\n}\n\n/**\n * This function is used to resize/reposition focus overlay and toolbar due to a\n * mutation in the DOM or due to changes in a different field (other than the focussed field).\n */\nexport function updateFocussedStateOnMutation(\n    focusOverlayWrapper: HTMLDivElement | null,\n    focusedToolbar: HTMLDivElement | null,\n    visualBuilderContainer: HTMLDivElement | null,\n    resizeObserver: ResizeObserver | null\n) {\n    if (!focusOverlayWrapper) return;\n\n    let selectedElement =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    if (!selectedElement) return;\n\n    const selectedElementCslp = selectedElement?.getAttribute(\"data-cslp\");\n    const newSelectedElement = document.querySelector(\n        `[data-cslp=\"${selectedElementCslp}\"]`\n    );\n    if (!newSelectedElement && resizeObserver) {\n        hideFocusOverlay({\n            visualBuilderOverlayWrapper: focusOverlayWrapper,\n            focusedToolbar,\n            visualBuilderContainer,\n            resizeObserver,\n            noTrigger: true,\n        });\n        return;\n    }\n\n    if (newSelectedElement !== selectedElement) {\n        selectedElement = newSelectedElement as HTMLElement;\n        VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n            selectedElement;\n    }\n\n    const selectedElementDimension = selectedElement.getBoundingClientRect();\n\n    /**\n     * Update the focus outline if it exists.\n     */\n    const focusOutline = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--outline\"\n    );\n\n    if (focusOutline) {\n        const focusOutlineDimension = focusOutline.getBoundingClientRect();\n        if (!isSameRect(selectedElementDimension, focusOutlineDimension)) {\n            focusOutline.style.top = `${selectedElementDimension.top + window.scrollY}px`;\n            focusOutline.style.left = `${selectedElementDimension.left}px`;\n            focusOutline.style.width = `${selectedElementDimension.width}px`;\n            focusOutline.style.height = `${selectedElementDimension.height}px`;\n        }\n    }\n\n    /**\n     * Update the focus overlays if they exists.\n     */\n\n    const focusedOverlayTop = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--top\"\n    );\n    const focusedOverlayBottom =\n        focusOverlayWrapper.querySelector<HTMLDivElement>(\n            \".visual-builder__overlay--bottom\"\n        );\n    const focusedOverlayLeft =\n        focusOverlayWrapper.querySelector<HTMLDivElement>(\n            \".visual-builder__overlay--left\"\n        );\n    const focusedOverlayRight =\n        focusOverlayWrapper.querySelector<HTMLDivElement>(\n            \".visual-builder__overlay--right\"\n        );\n\n    const distanceFromTop = selectedElementDimension.top + window.scrollY;\n\n    if (focusedOverlayTop) {\n        const dimension = focusedOverlayTop.getBoundingClientRect();\n        if (dimension.height !== distanceFromTop) {\n            focusedOverlayTop.style.height = `calc(${distanceFromTop}px)`;\n        }\n    }\n\n    if (focusedOverlayBottom) {\n        const dimension = focusedOverlayBottom.getBoundingClientRect();\n        if (\n            dimension.top !== selectedElementDimension.bottom ||\n            dimension.height !==\n                window.document.body.scrollHeight -\n                    selectedElementDimension.bottom -\n                    window.scrollY\n        ) {\n            focusedOverlayBottom.style.top = `${\n                selectedElementDimension.bottom + window.scrollY\n            }px`;\n            focusedOverlayBottom.style.height = `${\n                window.document.body.scrollHeight -\n                selectedElementDimension.bottom -\n                window.scrollY\n            }px`;\n        }\n    }\n\n    if (focusedOverlayLeft) {\n        const dimension = focusedOverlayLeft.getBoundingClientRect();\n        if (\n            dimension.top + window.scrollY !== distanceFromTop ||\n            dimension.height !== selectedElementDimension.height ||\n            dimension.width !== selectedElementDimension.left\n        ) {\n            focusedOverlayLeft.style.top = `${distanceFromTop}px`;\n            focusedOverlayLeft.style.height = `${selectedElementDimension.height}px`;\n            focusedOverlayLeft.style.width = `${selectedElementDimension.left}px`;\n        }\n    }\n\n    if (focusedOverlayRight) {\n        const dimension = focusedOverlayRight.getBoundingClientRect();\n        if (\n            dimension.left !== selectedElementDimension.right ||\n            dimension.top + window.scrollY !== distanceFromTop ||\n            dimension.height !== selectedElementDimension.height ||\n            dimension.width !==\n                document.documentElement.clientWidth -\n                    selectedElementDimension.right\n        ) {\n            focusedOverlayRight.style.left = `${selectedElementDimension.right}px`;\n            focusedOverlayRight.style.top = `${distanceFromTop}px`;\n            focusedOverlayRight.style.height = `${selectedElementDimension.height}px`;\n            focusedOverlayRight.style.width = `${\n                document.documentElement.clientWidth -\n                selectedElementDimension.right\n            }px`;\n        }\n    }\n\n    /**\n     * Update the focus toolbar if it exists.\n     */\n\n    if (focusedToolbar) {\n        const targetElementRightEdgeOffset =\n            window.scrollX + window.innerWidth - selectedElementDimension.left;\n        const distanceFromTop =\n            selectedElementDimension.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            selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n                ? distanceFromTop +\n                  selectedElementDimension.height +\n                  TOP_EDGE_BUFFER\n                : distanceFromTop;\n\n        const distanceFromLeft =\n            selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n        const adjustedDistanceFromLeft = Math.max(\n            distanceFromLeft,\n            TOOLBAR_EDGE_BUFFER\n        );\n\n        if (\n            targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n            (focusedToolbar.style.justifyContent !== \"flex-end\" ||\n                focusedToolbar.style.left !==\n                    `${\n                        selectedElementDimension.right +\n                        LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n                    }px`)\n        ) {\n            // Overflow / Cutoff on right edge\n            focusedToolbar.style.justifyContent = \"flex-end\";\n            focusedToolbar.style.left = `${\n                selectedElementDimension.right +\n                LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n            }px`;\n        } else if (\n            focusedToolbar.style.justifyContent !== \"flex-start\" ||\n            focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n        ) {\n            focusedToolbar.style.justifyContent = \"flex-start\"; // default\n            focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n        }\n\n        if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {\n            focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n        }\n    }\n\n    /**\n     * Update the pseudo-editable if it exists.\n     */\n\n    if (visualBuilderContainer) {\n        const psuedoEditableElement = visualBuilderContainer.querySelector(\n            \".visual-builder__pseudo-editable-element\"\n        ) as HTMLElement;\n        const editableElement = selectedElement as HTMLElement;\n        const styles = getPsuedoEditableElementStyles(editableElement);\n        const styleString = Object.entries(styles).reduce(\n            (acc, [key, value]) => {\n                return `${acc}${key}:${value};`;\n            },\n            \"\"\n        );\n        if (\n            psuedoEditableElement &&\n            (psuedoEditableElement.style.cssText !== styleString ||\n                psuedoEditableElement.style.visibility !== \"visible\")\n        ) {\n            psuedoEditableElement.style.cssText = styleString;\n            // since we are copying styles from the editableEl\n            // it will now have a visibility of hidden, which we added\n            // when creating the pseudo editable element, so make the psuedo visible\n            psuedoEditableElement.style.visibility = \"visible\";\n        }\n    }\n}\n\nfunction isSameRect(rect1: DOMRect, rect2: DOMRect) {\n    return (\n        rect1.top === rect2.top &&\n        rect1.left === rect2.left &&\n        rect1.width === rect2.width &&\n        rect1.height === rect2.height\n    );\n}\n"],"mappings":"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","names":["getChildrenDirection","distanceFromTop"]}
+{"version":3,"sources":["../../../../src/visualBuilder/utils/updateFocussedState.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { getAddInstanceButtons } from \"../generators/generateAddInstanceButtons\";\nimport {\n    addFocusOverlay,\n    hideFocusOverlay,\n} from \"../generators/generateOverlay\";\nimport { hideHoverOutline } from \"../listeners/mouseHover\";\nimport {\n    LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,\n    RIGHT_EDGE_BUFFER,\n    TOOLBAR_EDGE_BUFFER,\n    TOP_EDGE_BUFFER,\n} from \"./constants\";\nimport getChildrenDirection from \"./getChildrenDirection\";\nimport { getPsuedoEditableElementStyles } from \"./getPsuedoEditableStylesElement\";\nimport getStyleOfAnElement from \"./getStyleOfAnElement\";\n\ninterface ToolbarPositionParams {\n    focusedToolbar: HTMLElement | null;\n    selectedElementDimension: DOMRect;\n}\n/**\n * Adjust the position of the field toolbar instead of clearing the innerhtml fo the focused toolbar.\n * By doing this, can avoid the re-rendering of the focus field toolbar.\n */\nfunction positionToolbar({\n    focusedToolbar,\n    selectedElementDimension,\n}: ToolbarPositionParams): void {\n    if (focusedToolbar) {\n        const targetElementRightEdgeOffset =\n            window.scrollX + window.innerWidth - selectedElementDimension.left;\n        const distanceFromTop =\n            selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n\n        // Adjust top position based on the available space\n        const adjustedDistanceFromTop =\n            selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n                ? distanceFromTop +\n                  selectedElementDimension.height +\n                  TOP_EDGE_BUFFER\n                : distanceFromTop;\n\n        const distanceFromLeft =\n            selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n        const adjustedDistanceFromLeft = Math.max(\n            distanceFromLeft,\n            TOOLBAR_EDGE_BUFFER\n        );\n\n        // Handle right-edge overflow\n        if (\n            targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n            (focusedToolbar.style.justifyContent !== \"flex-end\" ||\n                focusedToolbar.style.left !==\n                    `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`)\n        ) {\n            focusedToolbar.style.justifyContent = \"flex-end\";\n            focusedToolbar.style.left = `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`;\n        } else if (\n            focusedToolbar.style.justifyContent !== \"flex-start\" ||\n            focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n        ) {\n            focusedToolbar.style.justifyContent = \"flex-start\"; // Default\n            focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n        }\n\n        // Adjust top position if necessary\n        if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {\n            focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n        }\n    }\n}\n\n/**\n * This function can be used to re-draw/update the focussed state of an element.\n * The focussed state includes the overlay, psuedo-editable, toolbar, and multiple\n * instance add buttons. It is similar to handleBuilderInteraction but it does not\n * create new elements, it just updates the existing ones whenever possible.\n * NOTE: breakdown this function into multiple functions when the need arises\n */\nexport function updateFocussedState({\n    editableElement,\n    visualBuilderContainer,\n    overlayWrapper,\n    focusedToolbar,\n    resizeObserver,\n}: {\n    editableElement: HTMLElement | null;\n    visualBuilderContainer: HTMLDivElement | null;\n    overlayWrapper: HTMLDivElement | null;\n    focusedToolbar: HTMLDivElement | null;\n    resizeObserver: ResizeObserver | null;\n}): void {\n    let previousSelectedEditableDOM =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    if (\n        !visualBuilderContainer ||\n        !editableElement ||\n        !previousSelectedEditableDOM ||\n        !overlayWrapper\n    ) {\n        return;\n    }\n\n    // prefer data-cslp-unique-id when available else use data-cslp.\n    // unique ID is added on click when multiple elements with same\n    // data-cslp are found.\n    const previousSelectedElementCslp = editableElement?.getAttribute(\"data-cslp\") || \"\";\n    const previousSelectedElementCslpUniqueId =\n        previousSelectedEditableDOM?.getAttribute(\"data-cslp-unique-id\");\n    const newPreviousSelectedElement =\n        document.querySelector(\n            `[data-cslp-unique-id=\"${previousSelectedElementCslpUniqueId}\"]`\n        ) || document.querySelector(`[data-cslp=\"${previousSelectedElementCslp}\"]`);\n    if (!newPreviousSelectedElement && resizeObserver) {\n        hideFocusOverlay({\n            visualBuilderOverlayWrapper: overlayWrapper,\n            focusedToolbar,\n            visualBuilderContainer,\n            resizeObserver,\n            noTrigger: true,\n        });\n        return;\n    }\n    if (newPreviousSelectedElement !== previousSelectedEditableDOM) {\n        previousSelectedEditableDOM = newPreviousSelectedElement as HTMLElement;\n        VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n            previousSelectedEditableDOM;\n    }\n\n    hideHoverOutline(visualBuilderContainer);\n    addFocusOverlay(previousSelectedEditableDOM, overlayWrapper);\n\n    // update psuedo editable element if present\n    const psuedoEditableElement = visualBuilderContainer.querySelector(\n        \".visual-builder__pseudo-editable-element\"\n    ) as HTMLElement;\n    if (psuedoEditableElement) {\n        const styles = getPsuedoEditableElementStyles(editableElement);\n        const styleString = Object.entries(styles).reduce(\n            (acc, [key, value]) => {\n                return `${acc}${key}:${value};`;\n            },\n            \"\"\n        );\n        psuedoEditableElement.style.cssText = styleString;\n        // since we are copying styles from the editableEl\n        // it will now have a visibility of hidden, which we added\n        // when creating the pseudo editable element, so make the psuedo visible\n        psuedoEditableElement.style.visibility = \"visible\";\n    }\n\n    const fieldMetadata = extractDetailsFromCslp(previousSelectedElementCslp);\n\n    const targetElementDimension = editableElement.getBoundingClientRect();\n    if (targetElementDimension.width && targetElementDimension.height) {\n        const selectedElement =\n            VisualBuilder.VisualBuilderGlobalState.value\n                .previousSelectedEditableDOM;\n\n        if (!selectedElement) return;\n        // position the focused tool bar\n        positionToolbar({\n            focusedToolbar: focusedToolbar,\n            selectedElementDimension: selectedElement.getBoundingClientRect(),\n        });\n    }\n\n    // re-add multiple instance add buttons\n    const buttons = getAddInstanceButtons(visualBuilderContainer);\n    const parentCslpValue =\n        fieldMetadata.multipleFieldMetadata?.parentDetails?.parentCslpValue;\n    if (\n        buttons &&\n        parentCslpValue &&\n        buttons.length > 1 &&\n        buttons[0] &&\n        buttons[1]\n    ) {\n        const [previousButton, nextButton] = buttons;\n        const direction = getChildrenDirection(\n            editableElement,\n            parentCslpValue\n        );\n        const targetDOMDimension = editableElement.getBoundingClientRect();\n\n        if (direction === \"horizontal\") {\n            const middleHeight =\n                targetDOMDimension.top +\n                (targetDOMDimension.bottom - targetDOMDimension.top) / 2 +\n                window.scrollY;\n            previousButton.style.left = `${targetDOMDimension.left}px`;\n            previousButton.style.top = `${middleHeight}px`;\n\n            nextButton.style.left = `${targetDOMDimension.right}px`;\n            nextButton.style.top = `${middleHeight}px`;\n        } else if (direction === \"vertical\") {\n            const middleWidth =\n                targetDOMDimension.left +\n                (targetDOMDimension.right - targetDOMDimension.left) / 2;\n            previousButton.style.left = `${middleWidth}px`;\n            previousButton.style.top = `${\n                targetDOMDimension.top + window.scrollY\n            }px`;\n\n            nextButton.style.left = `${middleWidth}px`;\n            nextButton.style.top = `${\n                targetDOMDimension.bottom + window.scrollY\n            }px`;\n        }\n    }\n}\n\n/**\n * This function is used to resize/reposition focus overlay and toolbar due to a\n * mutation in the DOM or due to changes in a different field (other than the focussed field).\n */\nexport function updateFocussedStateOnMutation(\n    focusOverlayWrapper: HTMLDivElement | null,\n    focusedToolbar: HTMLDivElement | null,\n    visualBuilderContainer: HTMLDivElement | null,\n    resizeObserver: ResizeObserver | null\n) {\n    if (!focusOverlayWrapper) return;\n\n    let selectedElement =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    if (!selectedElement) return;\n\n    const selectedElementCslp = selectedElement?.getAttribute(\"data-cslp\");\n    const selectedElementCslpUniqueId = selectedElement?.getAttribute(\n        \"data-cslp-unique-id\"\n    );\n    const newSelectedElement =\n        document.querySelector(\n            `[data-cslp-unique-id=\"${selectedElementCslpUniqueId}\"]`\n        ) || document.querySelector(`[data-cslp=\"${selectedElementCslp}\"]`);\n    if (!newSelectedElement && resizeObserver) {\n        hideFocusOverlay({\n            visualBuilderOverlayWrapper: focusOverlayWrapper,\n            focusedToolbar,\n            visualBuilderContainer,\n            resizeObserver,\n            noTrigger: true,\n        });\n        return;\n    }\n\n    if (newSelectedElement !== selectedElement) {\n        selectedElement = newSelectedElement as HTMLElement;\n        VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n            selectedElement;\n    }\n\n    const selectedElementDimension = selectedElement.getBoundingClientRect();\n\n    /**\n     * Update the focus outline if it exists.\n     */\n    const focusOutline = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--outline\"\n    );\n\n    if (focusOutline) {\n        const focusOutlineDimension = focusOutline.getBoundingClientRect();\n        if (!isSameRect(selectedElementDimension, focusOutlineDimension)) {\n            focusOutline.style.top = `${selectedElementDimension.top + window.scrollY}px`;\n            focusOutline.style.left = `${selectedElementDimension.left}px`;\n            focusOutline.style.width = `${selectedElementDimension.width}px`;\n            focusOutline.style.height = `${selectedElementDimension.height}px`;\n        }\n    }\n\n    /**\n     * Update the focus overlays if they exists.\n     */\n\n    const focusedOverlayTop = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--top\"\n    );\n    const focusedOverlayBottom =\n        focusOverlayWrapper.querySelector<HTMLDivElement>(\n            \".visual-builder__overlay--bottom\"\n        );\n    const focusedOverlayLeft =\n        focusOverlayWrapper.querySelector<HTMLDivElement>(\n            \".visual-builder__overlay--left\"\n        );\n    const focusedOverlayRight =\n        focusOverlayWrapper.querySelector<HTMLDivElement>(\n            \".visual-builder__overlay--right\"\n        );\n\n    const distanceFromTop = selectedElementDimension.top + window.scrollY;\n\n    if (focusedOverlayTop) {\n        const dimension = focusedOverlayTop.getBoundingClientRect();\n        if (dimension.height !== distanceFromTop) {\n            focusedOverlayTop.style.height = `calc(${distanceFromTop}px)`;\n        }\n    }\n\n    if (focusedOverlayBottom) {\n        const dimension = focusedOverlayBottom.getBoundingClientRect();\n        if (\n            dimension.top !== selectedElementDimension.bottom ||\n            dimension.height !==\n                window.document.body.scrollHeight -\n                    selectedElementDimension.bottom -\n                    window.scrollY\n        ) {\n            focusedOverlayBottom.style.top = `${\n                selectedElementDimension.bottom + window.scrollY\n            }px`;\n            focusedOverlayBottom.style.height = `${\n                window.document.body.scrollHeight -\n                selectedElementDimension.bottom -\n                window.scrollY\n            }px`;\n        }\n    }\n\n    if (focusedOverlayLeft) {\n        const dimension = focusedOverlayLeft.getBoundingClientRect();\n        if (\n            dimension.top + window.scrollY !== distanceFromTop ||\n            dimension.height !== selectedElementDimension.height ||\n            dimension.width !== selectedElementDimension.left\n        ) {\n            focusedOverlayLeft.style.top = `${distanceFromTop}px`;\n            focusedOverlayLeft.style.height = `${selectedElementDimension.height}px`;\n            focusedOverlayLeft.style.width = `${selectedElementDimension.left}px`;\n        }\n    }\n\n    if (focusedOverlayRight) {\n        const dimension = focusedOverlayRight.getBoundingClientRect();\n        if (\n            dimension.left !== selectedElementDimension.right ||\n            dimension.top + window.scrollY !== distanceFromTop ||\n            dimension.height !== selectedElementDimension.height ||\n            dimension.width !==\n                document.documentElement.clientWidth -\n                    selectedElementDimension.right\n        ) {\n            focusedOverlayRight.style.left = `${selectedElementDimension.right}px`;\n            focusedOverlayRight.style.top = `${distanceFromTop}px`;\n            focusedOverlayRight.style.height = `${selectedElementDimension.height}px`;\n            focusedOverlayRight.style.width = `${\n                document.documentElement.clientWidth -\n                selectedElementDimension.right\n            }px`;\n        }\n    }\n\n    /**\n     * Update the focus toolbar if it exists.\n     */\n\n    if (focusedToolbar) {\n        const targetElementRightEdgeOffset =\n            window.scrollX + window.innerWidth - selectedElementDimension.left;\n        const distanceFromTop =\n            selectedElementDimension.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            selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n                ? distanceFromTop +\n                  selectedElementDimension.height +\n                  TOP_EDGE_BUFFER\n                : distanceFromTop;\n\n        const distanceFromLeft =\n            selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n        const adjustedDistanceFromLeft = Math.max(\n            distanceFromLeft,\n            TOOLBAR_EDGE_BUFFER\n        );\n\n        if (\n            targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n            (focusedToolbar.style.justifyContent !== \"flex-end\" ||\n                focusedToolbar.style.left !==\n                    `${\n                        selectedElementDimension.right +\n                        LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n                    }px`)\n        ) {\n            // Overflow / Cutoff on right edge\n            focusedToolbar.style.justifyContent = \"flex-end\";\n            focusedToolbar.style.left = `${\n                selectedElementDimension.right +\n                LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n            }px`;\n        } else if (\n            focusedToolbar.style.justifyContent !== \"flex-start\" ||\n            focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n        ) {\n            focusedToolbar.style.justifyContent = \"flex-start\"; // default\n            focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n        }\n\n        if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {\n            focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n        }\n    }\n\n    /**\n     * Update the pseudo-editable if it exists.\n     */\n\n    if (visualBuilderContainer) {\n        const psuedoEditableElement = visualBuilderContainer.querySelector(\n            \".visual-builder__pseudo-editable-element\"\n        ) as HTMLElement;\n        const editableElement = selectedElement as HTMLElement;\n        const styles = getPsuedoEditableElementStyles(editableElement);\n        const styleString = Object.entries(styles).reduce(\n            (acc, [key, value]) => {\n                return `${acc}${key}:${value};`;\n            },\n            \"\"\n        );\n        if (\n            psuedoEditableElement &&\n            (psuedoEditableElement.style.cssText !== styleString ||\n                psuedoEditableElement.style.visibility !== \"visible\")\n        ) {\n            psuedoEditableElement.style.cssText = styleString;\n            // since we are copying styles from the editableEl\n            // it will now have a visibility of hidden, which we added\n            // when creating the pseudo editable element, so make the psuedo visible\n            psuedoEditableElement.style.visibility = \"visible\";\n        }\n    }\n}\n\nfunction isSameRect(rect1: DOMRect, rect2: DOMRect) {\n    return (\n        rect1.top === rect2.top &&\n        rect1.left === rect2.left &&\n        rect1.width === rect2.width &&\n        rect1.height === rect2.height\n    );\n}\n"],"mappings":"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","names":["getChildrenDirection","distanceFromTop"]}

package/dist/legacy/visualBuilder/utils/updateFocussedState.js

@@ -54,10 +54,11 @@ function updateFocussedState({
   if (!visualBuilderContainer || !editableElement || !previousSelectedEditableDOM || !overlayWrapper) {
     return;
   }
-  const previousSelectedElementCslp = previousSelectedEditableDOM == null ? void 0 : previousSelectedEditableDOM.getAttribute("data-cslp");
+  const previousSelectedElementCslp = (editableElement == null ? void 0 : editableElement.getAttribute("data-cslp")) || "";
+  const previousSelectedElementCslpUniqueId = previousSelectedEditableDOM == null ? void 0 : previousSelectedEditableDOM.getAttribute("data-cslp-unique-id");
   const newPreviousSelectedElement = document.querySelector(
-    `[data-cslp="${previousSelectedElementCslp}"]`
-  );
+    `[data-cslp-unique-id="${previousSelectedElementCslpUniqueId}"]`
+  ) || document.querySelector(`[data-cslp="${previousSelectedElementCslp}"]`);
   if (!newPreviousSelectedElement && resizeObserver) {
     hideFocusOverlay({
       visualBuilderOverlayWrapper: overlayWrapper,
@@ -88,8 +89,7 @@ function updateFocussedState({
     psuedoEditableElement.style.cssText = styleString;
     psuedoEditableElement.style.visibility = "visible";
   }
-  const cslp = (editableElement == null ? void 0 : editableElement.getAttribute("data-cslp")) || "";
-  const fieldMetadata = extractDetailsFromCslp(cslp);
+  const fieldMetadata = extractDetailsFromCslp(previousSelectedElementCslp);
   const targetElementDimension = editableElement.getBoundingClientRect();
   if (targetElementDimension.width && targetElementDimension.height) {
     const selectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
@@ -128,9 +128,12 @@ function updateFocussedStateOnMutation(focusOverlayWrapper, focusedToolbar, visu
   let selectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
   if (!selectedElement) return;
   const selectedElementCslp = selectedElement == null ? void 0 : selectedElement.getAttribute("data-cslp");
-  const newSelectedElement = document.querySelector(
-    `[data-cslp="${selectedElementCslp}"]`
+  const selectedElementCslpUniqueId = selectedElement == null ? void 0 : selectedElement.getAttribute(
+    "data-cslp-unique-id"
   );
+  const newSelectedElement = document.querySelector(
+    `[data-cslp-unique-id="${selectedElementCslpUniqueId}"]`
+  ) || document.querySelector(`[data-cslp="${selectedElementCslp}"]`);
   if (!newSelectedElement && resizeObserver) {
     hideFocusOverlay({
       visualBuilderOverlayWrapper: focusOverlayWrapper,