@contentstack/live-preview-utils 3.1.2 → 3.1.3

package/dist/legacy/visualBuilder/components/FieldToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/components/FieldToolbar.tsx"],"sourcesContent":["import { CslpData } from \"../../cslp/types/cslp.types\";\nimport getChildrenDirection from \"../utils/getChildrenDirection\";\nimport {\n    ALLOWED_MODAL_EDITABLE_FIELD,\n    ALLOWED_REPLACE_FIELDS,\n    DEFAULT_MULTIPLE_FIELDS,\n} from \"../utils/constants\";\nimport { getFieldType } from \"../utils/getFieldType\";\nimport {\n    handleDeleteInstance,\n    handleMoveInstance,\n} from \"../utils/instanceHandlers\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { FieldDataType, ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport {\n    CaretIcon,\n    DeleteIcon,\n    MoveLeftIcon,\n    MoveRightIcon,\n    ReplaceAssetIcon,\n} from \"./icons\";\nimport { fieldIcons } from \"./icons/fields\";\nimport classNames from \"classnames\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport CommentIcon from \"./CommentIcon\";\nimport React, { useEffect, useState } from \"preact/compat\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport { IReferenceContentTypeSchema } from \"../../cms/types/contentTypeSchema.types\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { FormIcon } from \"./icons\";\nimport { getDOMEditStack } from \"../utils/getCsDataOfElement\";\nimport { VariantIcon } from \"./icons/variant\";\nimport {\n    BASE_VARIANT_STATUS,\n    FieldRevertComponent,\n    getFieldVariantStatus,\n    IVariantStatus,\n    VariantRevertDropdown,\n} from \"./FieldRevert/FieldRevertComponent\";\n\nexport type FieldDetails = Pick<\n    VisualBuilderCslpEventDetails,\n    \"editableElement\" | \"fieldMetadata\"\n>;\n\nconst TOOLTIP_TOP_EDGE_BUFFER = 96;\n\ninterface MultipleFieldToolbarProps {\n    eventDetails: VisualBuilderCslpEventDetails;\n    hideOverlay: () => void;\n    isVariant?: boolean;\n}\n\nfunction handleReplaceAsset(fieldMetadata: CslpData) {\n    // TODO avoid sending whole fieldMetadata\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.OPEN_ASSET_MODAL,\n        {\n            fieldMetadata,\n        }\n    );\n}\n\nfunction handleReplaceReference(fieldMetadata: CslpData) {\n    const isMultipleInstance =\n        fieldMetadata.multipleFieldMetadata.index > -1 &&\n        fieldMetadata.fieldPathWithIndex ===\n            fieldMetadata.multipleFieldMetadata.parentDetails?.parentPath;\n    const entryPath = isMultipleInstance\n        ? fieldMetadata.instance.fieldPathWithIndex\n        : fieldMetadata.fieldPathWithIndex;\n\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.OPEN_REFERENCE_MODAL,\n        {\n            entry_uid: fieldMetadata.entry_uid,\n            content_type_uid: fieldMetadata.content_type_uid,\n            locale: fieldMetadata.locale,\n            fieldPath: fieldMetadata.fieldPath,\n            fieldPathWithIndex: fieldMetadata.fieldPathWithIndex,\n            entryPath,\n        }\n    );\n}\n\nfunction handleEdit(fieldMetadata: CslpData) {\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.OPEN_FIELD_EDIT_MODAL,\n        { fieldMetadata }\n    );\n}\n\nfunction handleFormFieldFocus(eventDetails: VisualBuilderCslpEventDetails) {\n    const { editableElement, fieldMetadata, cslpData } = eventDetails;\n    visualBuilderPostMessage\n        ?.send(VisualBuilderPostMessageEvents.TOGGLE_FORM, {\n            fieldMetadata,\n            cslpData,\n        })\n        .then(() => {\n            visualBuilderPostMessage?.send(\n                VisualBuilderPostMessageEvents.FOCUS_FIELD,\n                {\n                    DOMEditStack: getDOMEditStack(editableElement),\n                }\n            );\n        });\n}\n\nfunction FieldToolbarComponent(\n    props: MultipleFieldToolbarProps\n): JSX.Element | null {\n    const { eventDetails, isVariant: isVariantOrParentOfVariant } = props;\n    const { fieldMetadata, editableElement: targetElement } = eventDetails;\n\n    const parentPath =\n        fieldMetadata?.multipleFieldMetadata?.parentDetails?.parentCslpValue ||\n        \"\";\n    const isVariant = !!fieldMetadata?.variant || isVariantOrParentOfVariant;\n    const direction = getChildrenDirection(targetElement, parentPath);\n    const [fieldSchema, setFieldSchema] = useState<ISchemaFieldMap | null>(\n        null\n    );\n    const [fieldVariantStatus, setFieldVariantStatus] =\n        useState<IVariantStatus>(BASE_VARIANT_STATUS);\n    const [isOpenVariantRevert, setIsOpenVariantRevert] =\n        useState<boolean>(false);\n\n    let isModalEditable = false;\n    let isReplaceAllowed = false;\n    let isMultiple = false;\n    let Icon = null;\n    let fieldType = null;\n    let isWholeMultipleField = false;\n\n    if (fieldSchema) {\n        const { isDisabled } = isFieldDisabled(fieldSchema, {\n            editableElement: targetElement,\n            fieldMetadata,\n        });\n\n        // field is disabled, no actions needed\n        if (isDisabled) {\n            return null;\n        }\n\n        fieldType = getFieldType(fieldSchema);\n        isModalEditable = ALLOWED_MODAL_EDITABLE_FIELD.includes(fieldType);\n        isReplaceAllowed = ALLOWED_REPLACE_FIELDS.includes(fieldType);\n\n        Icon = fieldIcons[fieldType];\n\n        isMultiple = fieldSchema.multiple || false;\n        if (fieldType === FieldDataType.REFERENCE)\n            isMultiple = (fieldSchema as IReferenceContentTypeSchema)\n                .field_metadata.ref_multiple;\n\n        // field is multiple but an instance is not selected\n        // instead the whole field (all instances) is selected.\n        // Currently, when whole featured_blogs is selected in canvas,\n        // the fieldPathWithIndex and instance.fieldPathWithIndex are the same\n        // cannot rely on -1 index, as the non-negative index then refers to the index of\n        // the featured_blogs block in page_components\n        // It is not needed except taxanomy.\n        isWholeMultipleField =\n            isMultiple &&\n            (fieldMetadata.fieldPathWithIndex ===\n                fieldMetadata.instance.fieldPathWithIndex ||\n                fieldMetadata.multipleFieldMetadata?.index === -1);\n\n        // if (\n        //     DEFAULT_MULTIPLE_FIELDS.includes(fieldType) &&\n        //     isWholeMultipleField &&\n        //     !isVariant\n        // ) {\n        //     return null;\n        // }\n    }\n\n    const invertTooltipPosition =\n        targetElement.getBoundingClientRect().top <= TOOLTIP_TOP_EDGE_BUFFER;\n\n    const editButton = Icon ? (\n        <button\n            data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__edit-button\"\n            className={classNames(\n                \"visual-builder__button visual-builder__button--secondary visual-builder__button--edit\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__button--edit\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Edit\"}\n            onClick={(e) => {\n                // TODO the listener for field path is attached to the common parent requiring\n                // propagation to be stopped, should ideally only attach onClick to fieldpath dropdown\n                e.preventDefault();\n                e.stopPropagation();\n                handleEdit(fieldMetadata);\n            }}\n        >\n            <Icon />\n        </button>\n    ) : null;\n\n    const replaceButton = fieldType ? (\n        <button\n            className={classNames(\n                \"visual-builder__replace-button visual-builder__button visual-builder__button--secondary\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Replace\"}\n            data-testid={`visual-builder-replace-${fieldType}`}\n            onClick={(e) => {\n                e.stopPropagation();\n                e.preventDefault();\n                if (fieldType === FieldDataType.REFERENCE) {\n                    handleReplaceReference(fieldMetadata);\n                    return;\n                } else if (fieldType === FieldDataType.FILE) {\n                    handleReplaceAsset(fieldMetadata);\n                    return;\n                }\n            }}\n        >\n            <ReplaceAssetIcon />\n        </button>\n    ) : null;\n\n    const formButton = (\n        <button\n            className={classNames(\n                \"visual-builder__replace-button visual-builder__button visual-builder__button--secondary\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Form\"}\n            data-testid={`visual-builder-form`}\n            onClick={(e) => {\n                handleFormFieldFocus(eventDetails);\n            }}\n        >\n            <FormIcon />\n        </button>\n    );\n\n    const toggleVariantDropdown = () => {\n        setIsOpenVariantRevert(!isOpenVariantRevert);\n    };\n\n    const closeVariantDropdown = () => {\n        setIsOpenVariantRevert(false);\n    };\n\n    const variantButton = (\n        <button\n            className={classNames(\n                \"visual-builder__variant-button visual-builder__button visual-builder__button--secondary\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                visualBuilderStyles()[\"visual-builder__variant-button\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Variant Revert\"}\n            data-testid={`visual-builder-canvas-variant-revert`}\n            onClick={toggleVariantDropdown}\n        >\n            <VariantIcon />\n            <CaretIcon open={isOpenVariantRevert} />\n        </button>\n    );\n\n    const totalElementCount = targetElement?.parentNode?.childElementCount ?? 1;\n    const indexOfElement = fieldMetadata?.multipleFieldMetadata?.index;\n\n    const disableMoveLeft = indexOfElement === 0; // first element\n    const disableMoveRight = indexOfElement === totalElementCount - 1; // last element\n\n    useEffect(() => {\n        async function fetchFieldSchema() {\n            const fieldSchema = await FieldSchemaMap.getFieldSchema(\n                fieldMetadata.content_type_uid,\n                fieldMetadata.fieldPath\n            );\n            if (fieldSchema) {\n                setFieldSchema(fieldSchema);\n            }\n            const variantStatus = await getFieldVariantStatus(fieldMetadata);\n            setFieldVariantStatus(variantStatus ?? BASE_VARIANT_STATUS);\n        }\n        fetchFieldSchema();\n    }, [fieldMetadata]);\n\n    useEffect(() => {\n        const event = visualBuilderPostMessage?.on(\n            VisualBuilderPostMessageEvents.DELETE_INSTANCE,\n            (args: { data: { path: string } }) => {\n                if (\n                    args.data?.path ===\n                    fieldMetadata.instance.fieldPathWithIndex\n                ) {\n                    props.hideOverlay();\n                }\n            }\n        );\n        return () => {\n            event?.unregister();\n        };\n    }, []);\n\n    const multipleFieldToolbarButtonClasses = classNames(\n        \"visual-builder__button visual-builder__button--secondary\",\n        visualBuilderStyles()[\"visual-builder__button\"],\n        visualBuilderStyles()[\"visual-builder__button--secondary\"],\n        visualBuilderStyles()[\"visual-builder__tooltip\"],\n        {\n            \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n            [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                invertTooltipPosition,\n        }\n    );\n\n    return (\n        <div\n            className={classNames(\n                \"visual-builder__field-toolbar-container\",\n                visualBuilderStyles()[\"visual-builder__field-toolbar-container\"]\n            )}\n        >\n            <div\n                className={classNames(\n                    \"visual-builder__focused-toolbar__multiple-field-toolbar\",\n                    visualBuilderStyles()[\n                        \"visual-builder__focused-toolbar__multiple-field-toolbar\"\n                    ]\n                )}\n                data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar\"\n            >\n                <div\n                    className={classNames(\n                        \"visual-builder__focused-toolbar__button-group\",\n                        visualBuilderStyles()[\n                            \"visual-builder__focused-toolbar__button-group\"\n                        ]\n                    )}\n                >\n                    <>\n                        {isVariant ? (\n                            <VariantRevertDropdown\n                                fieldDataName={fieldMetadata.fieldPathWithIndex}\n                                fieldMetadata={fieldMetadata}\n                                variantStatus={fieldVariantStatus}\n                                isOpen={isOpenVariantRevert}\n                                closeDropdown={closeVariantDropdown}\n                                invertTooltipPosition={invertTooltipPosition}\n                                toggleVariantDropdown={toggleVariantDropdown}\n                            />\n                        ) : null}\n                        {isMultiple && !isWholeMultipleField ? (\n                            <>\n                                <button\n                                    data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__move-left-button\"\n                                    className={\n                                        multipleFieldToolbarButtonClasses\n                                    }\n                                    data-tooltip={\n                                        direction === \"vertical\"\n                                            ? \"Move up\"\n                                            : \"Move left\"\n                                    }\n                                    onClick={(e) => {\n                                        e.preventDefault();\n                                        e.stopPropagation();\n                                        handleMoveInstance(\n                                            fieldMetadata,\n                                            \"previous\"\n                                        );\n                                    }}\n                                    disabled={disableMoveLeft}\n                                >\n                                    <MoveLeftIcon\n                                        className={classNames({\n                                            \"visual-builder__rotate--90\":\n                                                direction === \"vertical\",\n                                            [visualBuilderStyles()[\n                                                \"visual-builder__rotate--90\"\n                                            ]]: direction === \"vertical\",\n                                        })}\n                                        disabled={disableMoveLeft}\n                                    />\n                                </button>\n\n                                <button\n                                    data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__move-right-button\"\n                                    className={\n                                        multipleFieldToolbarButtonClasses\n                                    }\n                                    data-tooltip={\n                                        direction === \"vertical\"\n                                            ? \"Move down\"\n                                            : \"Move right\"\n                                    }\n                                    onClick={(e) => {\n                                        e.preventDefault();\n                                        e.stopPropagation();\n                                        handleMoveInstance(\n                                            fieldMetadata,\n                                            \"next\"\n                                        );\n                                    }}\n                                    disabled={disableMoveRight}\n                                >\n                                    <MoveRightIcon\n                                        className={classNames({\n                                            \"visual-builder__rotate--90\":\n                                                direction === \"vertical\",\n                                            [visualBuilderStyles()[\n                                                \"visual-builder__rotate--90\"\n                                            ]]: direction === \"vertical\",\n                                        })}\n                                        disabled={disableMoveRight}\n                                    />\n                                </button>\n\n                                {isModalEditable ? editButton : null}\n                                {formButton}\n                                {isReplaceAllowed ? replaceButton : null}\n\n                                <button\n                                    data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__delete-button\"\n                                    className={\n                                        multipleFieldToolbarButtonClasses\n                                    }\n                                    data-tooltip={\"Delete\"}\n                                    onClick={(e) => {\n                                        e.preventDefault();\n                                        e.stopPropagation();\n                                        handleDeleteInstance(fieldMetadata);\n                                    }}\n                                >\n                                    <DeleteIcon />\n                                </button>\n                            </>\n                        ) : (\n                            <>\n                                {isModalEditable ? editButton : null}\n                                {isReplaceAllowed ? replaceButton : null}\n                                {formButton}\n                                {fieldSchema ? (\n                                    <CommentIcon\n                                        fieldMetadata={fieldMetadata}\n                                        fieldSchema={fieldSchema}\n                                        invertTooltipPosition={\n                                            invertTooltipPosition\n                                        }\n                                    />\n                                ) : null}\n                            </>\n                        )}\n                    </>\n                </div>\n            </div>\n        </div>\n    );\n}\n\nexport default FieldToolbarComponent;\n"],"mappings":"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","names":["_a","fieldSchema"]}
+{"version":3,"sources":["../../../../src/visualBuilder/components/FieldToolbar.tsx"],"sourcesContent":["import { CslpData } from \"../../cslp/types/cslp.types\";\nimport getChildrenDirection from \"../utils/getChildrenDirection\";\nimport {\n    ALLOWED_MODAL_EDITABLE_FIELD,\n    ALLOWED_REPLACE_FIELDS,\n    DEFAULT_MULTIPLE_FIELDS,\n} from \"../utils/constants\";\nimport { getFieldType } from \"../utils/getFieldType\";\nimport {\n    handleDeleteInstance,\n    handleMoveInstance,\n} from \"../utils/instanceHandlers\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { FieldDataType, ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport {\n    CaretIcon,\n    DeleteIcon,\n    MoveLeftIcon,\n    MoveRightIcon,\n    ReplaceAssetIcon,\n} from \"./icons\";\nimport { fieldIcons } from \"./icons/fields\";\nimport classNames from \"classnames\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport CommentIcon from \"./CommentIcon\";\nimport React, { useEffect, useState } from \"preact/compat\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport { IReferenceContentTypeSchema } from \"../../cms/types/contentTypeSchema.types\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { FormIcon } from \"./icons\";\nimport { getDOMEditStack } from \"../utils/getCsDataOfElement\";\nimport { VariantIcon } from \"./icons/variant\";\nimport {\n    BASE_VARIANT_STATUS,\n    FieldRevertComponent,\n    getFieldVariantStatus,\n    IVariantStatus,\n    VariantRevertDropdown,\n} from \"./FieldRevert/FieldRevertComponent\";\nimport { LoadingIcon } from \"./icons/loading\";\n\nexport type FieldDetails = Pick<\n    VisualBuilderCslpEventDetails,\n    \"editableElement\" | \"fieldMetadata\"\n>;\n\nconst TOOLTIP_TOP_EDGE_BUFFER = 96;\n\ninterface MultipleFieldToolbarProps {\n    eventDetails: VisualBuilderCslpEventDetails;\n    hideOverlay: () => void;\n    isVariant?: boolean;\n}\n\nfunction handleReplaceAsset(fieldMetadata: CslpData) {\n    // TODO avoid sending whole fieldMetadata\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.OPEN_ASSET_MODAL,\n        {\n            fieldMetadata,\n        }\n    );\n}\n\nfunction handleReplaceReference(fieldMetadata: CslpData) {\n    const isMultipleInstance =\n        fieldMetadata.multipleFieldMetadata.index > -1 &&\n        fieldMetadata.fieldPathWithIndex ===\n            fieldMetadata.multipleFieldMetadata.parentDetails?.parentPath;\n    const entryPath = isMultipleInstance\n        ? fieldMetadata.instance.fieldPathWithIndex\n        : fieldMetadata.fieldPathWithIndex;\n\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.OPEN_REFERENCE_MODAL,\n        {\n            entry_uid: fieldMetadata.entry_uid,\n            content_type_uid: fieldMetadata.content_type_uid,\n            locale: fieldMetadata.locale,\n            fieldPath: fieldMetadata.fieldPath,\n            fieldPathWithIndex: fieldMetadata.fieldPathWithIndex,\n            entryPath,\n        }\n    );\n}\n\nfunction handleEdit(fieldMetadata: CslpData) {\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.OPEN_FIELD_EDIT_MODAL,\n        { fieldMetadata }\n    );\n}\n\nfunction handleFormFieldFocus(eventDetails: VisualBuilderCslpEventDetails) {\n    const { editableElement } = eventDetails;\n    return visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.FOCUS_FIELD,\n        {\n            DOMEditStack: getDOMEditStack(editableElement),\n            toggleVisibility: true,\n        }\n    );\n}\n\nfunction FieldToolbarComponent(\n    props: MultipleFieldToolbarProps\n): JSX.Element | null {\n    const { eventDetails, isVariant: isVariantOrParentOfVariant } = props;\n    const { fieldMetadata, editableElement: targetElement } = eventDetails;\n    const [isFormLoading, setIsFormLoading] = useState(false);\n\n    const parentPath =\n        fieldMetadata?.multipleFieldMetadata?.parentDetails?.parentCslpValue ||\n        \"\";\n    const isVariant = !!fieldMetadata?.variant || isVariantOrParentOfVariant;\n    const direction = getChildrenDirection(targetElement, parentPath);\n    const [fieldSchema, setFieldSchema] = useState<ISchemaFieldMap | null>(\n        null\n    );\n    const [fieldVariantStatus, setFieldVariantStatus] =\n        useState<IVariantStatus>(BASE_VARIANT_STATUS);\n    const [isOpenVariantRevert, setIsOpenVariantRevert] =\n        useState<boolean>(false);\n\n    let isModalEditable = false;\n    let isReplaceAllowed = false;\n    let isMultiple = false;\n    let Icon = null;\n    let fieldType = null;\n    let isWholeMultipleField = false;\n\n    if (fieldSchema) {\n        const { isDisabled } = isFieldDisabled(fieldSchema, {\n            editableElement: targetElement,\n            fieldMetadata,\n        });\n\n        // field is disabled, no actions needed\n        if (isDisabled) {\n            return null;\n        }\n\n        fieldType = getFieldType(fieldSchema);\n        isModalEditable = ALLOWED_MODAL_EDITABLE_FIELD.includes(fieldType);\n\n        Icon = fieldIcons[fieldType];\n\n        isMultiple = fieldSchema.multiple || false;\n        if (fieldType === FieldDataType.REFERENCE)\n            isMultiple = (fieldSchema as IReferenceContentTypeSchema)\n                .field_metadata.ref_multiple;\n\n        // field is multiple but an instance is not selected\n        // instead the whole field (all instances) is selected.\n        // Currently, when whole featured_blogs is selected in canvas,\n        // the fieldPathWithIndex and instance.fieldPathWithIndex are the same\n        // cannot rely on -1 index, as the non-negative index then refers to the index of\n        // the featured_blogs block in page_components\n        // It is not needed except taxanomy.\n        isWholeMultipleField =\n            isMultiple &&\n            (fieldMetadata.fieldPathWithIndex ===\n                fieldMetadata.instance.fieldPathWithIndex ||\n                fieldMetadata.multipleFieldMetadata?.index === -1);\n\n        isReplaceAllowed = ALLOWED_REPLACE_FIELDS.includes(fieldType) && !isWholeMultipleField;\n        // if (\n        //     DEFAULT_MULTIPLE_FIELDS.includes(fieldType) &&\n        //     isWholeMultipleField &&\n        //     !isVariant\n        // ) {\n        //     return null;\n        // }\n    }\n\n    const invertTooltipPosition =\n        targetElement.getBoundingClientRect().top <= TOOLTIP_TOP_EDGE_BUFFER;\n\n    const editButton = Icon ? (\n        <button\n            data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__edit-button\"\n            className={classNames(\n                \"visual-builder__button visual-builder__button--secondary visual-builder__button--edit\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__button--edit\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Edit\"}\n            onClick={(e) => {\n                // TODO the listener for field path is attached to the common parent requiring\n                // propagation to be stopped, should ideally only attach onClick to fieldpath dropdown\n                e.preventDefault();\n                e.stopPropagation();\n                handleEdit(fieldMetadata);\n            }}\n        >\n            <Icon />\n        </button>\n    ) : null;\n\n    const replaceButton = fieldType ? (\n        <button\n            className={classNames(\n                \"visual-builder__replace-button visual-builder__button visual-builder__button--secondary\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Replace\"}\n            data-testid={`visual-builder-replace-${fieldType}`}\n            onClick={(e) => {\n                e.stopPropagation();\n                e.preventDefault();\n                if (fieldType === FieldDataType.REFERENCE) {\n                    handleReplaceReference(fieldMetadata);\n                    return;\n                } else if (fieldType === FieldDataType.FILE) {\n                    handleReplaceAsset(fieldMetadata);\n                    return;\n                }\n            }}\n        >\n            <ReplaceAssetIcon />\n        </button>\n    ) : null;\n\n    const formButton = (\n        <button\n            className={classNames(\n                \"visual-builder__replace-button visual-builder__button visual-builder__button--secondary\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                },\n                {\n                    [visualBuilderStyles()[\"visual-builder__button--comment-loader\"]]: isFormLoading,\n                    \"visual-builder__button--comment-loader\": isFormLoading\n                }\n            )}\n            data-tooltip={\"Form\"}\n            data-testid={`visual-builder-form`}\n            onClick={async (e) => {\n                e.preventDefault();\n                e.stopPropagation();\n                setIsFormLoading(true);\n                try {\n                    await handleFormFieldFocus(eventDetails);\n                } finally {\n                    setIsFormLoading(false);\n                }\n            }}\n            disabled={isFormLoading}\n        >\n            {isFormLoading ? <LoadingIcon /> : <FormIcon />}\n        </button>\n    );\n\n    const toggleVariantDropdown = () => {\n        setIsOpenVariantRevert(!isOpenVariantRevert);\n    };\n\n    const closeVariantDropdown = () => {\n        setIsOpenVariantRevert(false);\n    };\n\n    const variantButton = (\n        <button\n            className={classNames(\n                \"visual-builder__variant-button visual-builder__button visual-builder__button--secondary\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                visualBuilderStyles()[\"visual-builder__variant-button\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Variant Revert\"}\n            data-testid={`visual-builder-canvas-variant-revert`}\n            onClick={toggleVariantDropdown}\n        >\n            <VariantIcon />\n            <CaretIcon open={isOpenVariantRevert} />\n        </button>\n    );\n\n    const totalElementCount = targetElement?.parentNode?.childElementCount ?? 1;\n    const indexOfElement = fieldMetadata?.multipleFieldMetadata?.index;\n\n    const disableMoveLeft = indexOfElement === 0; // first element\n    const disableMoveRight = indexOfElement === totalElementCount - 1; // last element\n\n    useEffect(() => {\n        async function fetchFieldSchema() {\n            const fieldSchema = await FieldSchemaMap.getFieldSchema(\n                fieldMetadata.content_type_uid,\n                fieldMetadata.fieldPath\n            );\n            if (fieldSchema) {\n                setFieldSchema(fieldSchema);\n            }\n            const variantStatus = await getFieldVariantStatus(fieldMetadata);\n            setFieldVariantStatus(variantStatus ?? BASE_VARIANT_STATUS);\n        }\n        fetchFieldSchema();\n    }, [fieldMetadata]);\n\n    useEffect(() => {\n        const event = visualBuilderPostMessage?.on(\n            VisualBuilderPostMessageEvents.DELETE_INSTANCE,\n            (args: { data: { path: string } }) => {\n                if (\n                    args.data?.path ===\n                    fieldMetadata.instance.fieldPathWithIndex\n                ) {\n                    props.hideOverlay();\n                }\n            }\n        );\n        return () => {\n            event?.unregister();\n        };\n    }, []);\n\n    const multipleFieldToolbarButtonClasses = classNames(\n        \"visual-builder__button visual-builder__button--secondary\",\n        visualBuilderStyles()[\"visual-builder__button\"],\n        visualBuilderStyles()[\"visual-builder__button--secondary\"],\n        visualBuilderStyles()[\"visual-builder__tooltip\"],\n        {\n            \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n            [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                invertTooltipPosition,\n        }\n    );\n\n    return (\n        <div\n            className={classNames(\n                \"visual-builder__field-toolbar-container\",\n                visualBuilderStyles()[\"visual-builder__field-toolbar-container\"]\n            )}\n        >\n            <div\n                className={classNames(\n                    \"visual-builder__focused-toolbar__multiple-field-toolbar\",\n                    visualBuilderStyles()[\n                        \"visual-builder__focused-toolbar__multiple-field-toolbar\"\n                    ]\n                )}\n                data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar\"\n            >\n                <div\n                    className={classNames(\n                        \"visual-builder__focused-toolbar__button-group\",\n                        visualBuilderStyles()[\n                            \"visual-builder__focused-toolbar__button-group\"\n                        ]\n                    )}\n                >\n                    <>\n                        {isVariant ? (\n                            <VariantRevertDropdown\n                                fieldDataName={fieldMetadata.fieldPathWithIndex}\n                                fieldMetadata={fieldMetadata}\n                                variantStatus={fieldVariantStatus}\n                                isOpen={isOpenVariantRevert}\n                                closeDropdown={closeVariantDropdown}\n                                invertTooltipPosition={invertTooltipPosition}\n                                toggleVariantDropdown={toggleVariantDropdown}\n                            />\n                        ) : null}\n                        {isMultiple && !isWholeMultipleField ? (\n                            <>\n                                <button\n                                    data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__move-left-button\"\n                                    className={\n                                        multipleFieldToolbarButtonClasses\n                                    }\n                                    data-tooltip={\n                                        direction === \"vertical\"\n                                            ? \"Move up\"\n                                            : \"Move left\"\n                                    }\n                                    onClick={(e) => {\n                                        e.preventDefault();\n                                        e.stopPropagation();\n                                        handleMoveInstance(\n                                            fieldMetadata,\n                                            \"previous\"\n                                        );\n                                    }}\n                                    disabled={disableMoveLeft}\n                                >\n                                    <MoveLeftIcon\n                                        className={classNames({\n                                            \"visual-builder__rotate--90\":\n                                                direction === \"vertical\",\n                                            [visualBuilderStyles()[\n                                                \"visual-builder__rotate--90\"\n                                            ]]: direction === \"vertical\",\n                                        })}\n                                        disabled={disableMoveLeft}\n                                    />\n                                </button>\n\n                                <button\n                                    data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__move-right-button\"\n                                    className={\n                                        multipleFieldToolbarButtonClasses\n                                    }\n                                    data-tooltip={\n                                        direction === \"vertical\"\n                                            ? \"Move down\"\n                                            : \"Move right\"\n                                    }\n                                    onClick={(e) => {\n                                        e.preventDefault();\n                                        e.stopPropagation();\n                                        handleMoveInstance(\n                                            fieldMetadata,\n                                            \"next\"\n                                        );\n                                    }}\n                                    disabled={disableMoveRight}\n                                >\n                                    <MoveRightIcon\n                                        className={classNames({\n                                            \"visual-builder__rotate--90\":\n                                                direction === \"vertical\",\n                                            [visualBuilderStyles()[\n                                                \"visual-builder__rotate--90\"\n                                            ]]: direction === \"vertical\",\n                                        })}\n                                        disabled={disableMoveRight}\n                                    />\n                                </button>\n\n                                {isModalEditable ? editButton : null}\n                                {formButton}\n                                {isReplaceAllowed ? replaceButton : null}\n\n                                <button\n                                    data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__delete-button\"\n                                    className={\n                                        multipleFieldToolbarButtonClasses\n                                    }\n                                    data-tooltip={\"Delete\"}\n                                    onClick={(e) => {\n                                        e.preventDefault();\n                                        e.stopPropagation();\n                                        handleDeleteInstance(fieldMetadata);\n                                    }}\n                                >\n                                    <DeleteIcon />\n                                </button>\n                            </>\n                        ) : (\n                            <>\n                                {isModalEditable ? editButton : null}\n                                {isReplaceAllowed ? replaceButton : null}\n                                {formButton}\n                                {fieldSchema ? (\n                                    <CommentIcon\n                                        fieldMetadata={fieldMetadata}\n                                        fieldSchema={fieldSchema}\n                                        invertTooltipPosition={\n                                            invertTooltipPosition\n                                        }\n                                    />\n                                ) : null}\n                            </>\n                        )}\n                    </>\n                </div>\n            </div>\n        </div>\n    );\n}\n\nexport default FieldToolbarComponent;\n"],"mappings":"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","names":["fieldSchema","_a"]}

package/dist/legacy/visualBuilder/components/addInstanceButton.cjs

@@ -36,28 +36,56 @@ module.exports = __toCommonJS(addInstanceButton_exports);
 var import_classnames = __toESM(require("classnames"), 1);
 var import_visualBuilder = require("../visualBuilder.style.cjs");
 var import_icons = require("./icons/index.cjs");
+var import_visualBuilderPostMessage = __toESM(require("../utils/visualBuilderPostMessage.cjs"), 1);
+var import_postMessage = require("../utils/types/postMessage.types.cjs");
 var import_jsx_runtime = require("preact/jsx-runtime");
 function AddInstanceButtonComponent(props) {
   const fieldSchema = props.fieldSchema;
-  const disabled = fieldSchema && "max_instance" in fieldSchema && fieldSchema.max_instance ? props.value.length >= fieldSchema.max_instance : false;
+  const fieldMetadata = props.fieldMetadata;
+  const index = props.index;
+  const loading = props.loading;
+  const onClick = async (event) => {
+    var _a;
+    loading.value = true;
+    try {
+      await ((_a = import_visualBuilderPostMessage.default) == null ? void 0 : _a.send(
+        import_postMessage.VisualBuilderPostMessageEvents.ADD_INSTANCE,
+        {
+          fieldMetadata,
+          index
+        }
+      ));
+    } catch (error) {
+      console.error("Visual Builder: Failed to add instance", error);
+    }
+    loading.value = false;
+    props.onClick(event);
+  };
+  const buttonClassName = (0, import_classnames.default)(
+    "visual-builder__add-button",
+    (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__add-button"],
+    {
+      "visual-builder__add-button--with-label": props.label
+    },
+    {
+      [(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__add-button--loading"]]: loading.value
+    },
+    (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__tooltip"]
+  );
+  const maxInstances = fieldSchema && fieldSchema.data_type !== "block" ? fieldSchema.max_instance : void 0;
+  const isMaxInstances = maxInstances ? props.value.length >= maxInstances : false;
+  const disabled = loading.value || isMaxInstances;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "button",
     {
-      className: (0, import_classnames.default)(
-        "visual-builder__add-button",
-        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__add-button"],
-        {
-          "visual-builder__add-button--with-label": props.label
-        },
-        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__tooltip"]
-      ),
+      className: buttonClassName,
       "data-tooltip": "Add section",
       "data-testid": "visual-builder-add-instance-button",
       disabled,
-      title: disabled && fieldSchema && "max_instance" in fieldSchema ? `Max ${fieldSchema.max_instance} instances allowed` : void 0,
+      title: maxInstances && isMaxInstances ? `Max ${maxInstances} instances allowed` : void 0,
       onClick: (e) => {
         const event = e;
-        props.onClick(event);
+        onClick(event);
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.PlusIcon, {}),

package/dist/legacy/visualBuilder/components/addInstanceButton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/components/addInstanceButton.tsx"],"sourcesContent":["import React from \"preact/compat\";\nimport classNames from \"classnames\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { PlusIcon } from \"./icons\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\n\ninterface AddInstanceButtonProps {\n    value: any;\n    onClick: (event: MouseEvent) => void;\n    label?: string | undefined;\n    fieldSchema: ISchemaFieldMap | undefined;\n}\n\nfunction AddInstanceButtonComponent(\n    props: AddInstanceButtonProps\n): JSX.Element {\n    const fieldSchema = props.fieldSchema;\n    const disabled =\n        fieldSchema && \"max_instance\" in fieldSchema && fieldSchema.max_instance\n            ? props.value.length >= fieldSchema.max_instance\n            : false;\n\n    return (\n        <button\n            className={classNames(\n                \"visual-builder__add-button\",\n                visualBuilderStyles()[\"visual-builder__add-button\"],\n                {\n                    \"visual-builder__add-button--with-label\": props.label,\n                },\n                visualBuilderStyles()[\"visual-builder__tooltip\"]\n            )}\n            data-tooltip={\"Add section\"}\n            data-testid=\"visual-builder-add-instance-button\"\n            disabled={disabled}\n            title={\n                disabled && fieldSchema && \"max_instance\" in fieldSchema\n                    ? `Max ${fieldSchema.max_instance} instances allowed`\n                    : undefined\n            }\n            onClick={(e) => {\n                const event = e as unknown as MouseEvent;\n                props.onClick(event);\n            }}\n        >\n            <PlusIcon />\n            {props.label ? (\n                <span\n                    title={props.label}\n                    className={classNames(\n                        \"visual-builder__add-button-label\",\n                        visualBuilderStyles()[\n                            \"visual-builder__add-button-label\"\n                        ]\n                    )}\n                >\n                    {props.label}\n                </span>\n            ) : null}\n        </button>\n    );\n}\n\nexport default AddInstanceButtonComponent;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,wBAAuB;AACvB,2BAAoC;AACpC,mBAAyB;AAoBjB;AAVR,SAAS,2BACL,OACW;AACX,QAAM,cAAc,MAAM;AAC1B,QAAM,WACF,eAAe,kBAAkB,eAAe,YAAY,eACtD,MAAM,MAAM,UAAU,YAAY,eAClC;AAEV,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAW,kBAAAA;AAAA,QACP;AAAA,YACA,0CAAoB,EAAE,4BAA4B;AAAA,QAClD;AAAA,UACI,0CAA0C,MAAM;AAAA,QACpD;AAAA,YACA,0CAAoB,EAAE,yBAAyB;AAAA,MACnD;AAAA,MACA,gBAAc;AAAA,MACd,eAAY;AAAA,MACZ;AAAA,MACA,OACI,YAAY,eAAe,kBAAkB,cACvC,OAAO,YAAY,YAAY,uBAC/B;AAAA,MAEV,SAAS,CAAC,MAAM;AACZ,cAAM,QAAQ;AACd,cAAM,QAAQ,KAAK;AAAA,MACvB;AAAA,MAEA;AAAA,oDAAC,yBAAS;AAAA,QACT,MAAM,QACH;AAAA,UAAC;AAAA;AAAA,YACG,OAAO,MAAM;AAAA,YACb,eAAW,kBAAAA;AAAA,cACP;AAAA,kBACA,0CAAoB,EAChB,kCACJ;AAAA,YACJ;AAAA,YAEC,gBAAM;AAAA;AAAA,QACX,IACA;AAAA;AAAA;AAAA,EACR;AAER;AAEA,IAAO,4BAAQ;","names":["classNames"]}
+{"version":3,"sources":["../../../../src/visualBuilder/components/addInstanceButton.tsx"],"sourcesContent":["import React from \"preact/compat\";\nimport classNames from \"classnames\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { PlusIcon } from \"./icons\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { Signal } from \"@preact/signals\";\n\ninterface AddInstanceButtonProps {\n    value: any;\n    onClick: (event: MouseEvent) => void;\n    label?: string | undefined;\n    fieldSchema: ISchemaFieldMap | undefined;\n    fieldMetadata: CslpData;\n    index: number;\n    loading: Signal<boolean>;\n}\n\nfunction AddInstanceButtonComponent(\n    props: AddInstanceButtonProps\n): JSX.Element {\n    const fieldSchema = props.fieldSchema;\n    const fieldMetadata = props.fieldMetadata;\n    const index = props.index;\n    const loading = props.loading;\n\n    const onClick = async (event: MouseEvent) => {\n        loading.value = true;\n        try {\n            await visualBuilderPostMessage?.send(\n                VisualBuilderPostMessageEvents.ADD_INSTANCE,\n                {\n                    fieldMetadata,\n                    index,\n                }\n            );\n        } catch (error) {\n            console.error(\"Visual Builder: Failed to add instance\", error);\n        }\n        loading.value = false;\n        props.onClick(event);\n    };\n\n    const buttonClassName = classNames(\n        \"visual-builder__add-button\",\n        visualBuilderStyles()[\"visual-builder__add-button\"],\n        {\n            \"visual-builder__add-button--with-label\": props.label,\n        },\n        {\n            [visualBuilderStyles()[\"visual-builder__add-button--loading\"]]:\n                loading.value,\n        },\n        visualBuilderStyles()[\"visual-builder__tooltip\"]\n    );\n\n    const maxInstances =\n        fieldSchema && fieldSchema.data_type !== \"block\"\n            ? fieldSchema.max_instance\n            : undefined;\n    const isMaxInstances = maxInstances\n        ? props.value.length >= maxInstances\n        : false;\n    const disabled = loading.value || isMaxInstances;\n\n    return (\n        <button\n            className={buttonClassName}\n            data-tooltip={\"Add section\"}\n            data-testid=\"visual-builder-add-instance-button\"\n            disabled={disabled}\n            title={\n                maxInstances && isMaxInstances\n                    ? `Max ${maxInstances} instances allowed`\n                    : undefined\n            }\n            onClick={(e) => {\n                const event = e as unknown as MouseEvent;\n                onClick(event);\n            }}\n        >\n            <PlusIcon />\n            {props.label ? (\n                <span\n                    title={props.label}\n                    className={classNames(\n                        \"visual-builder__add-button-label\",\n                        visualBuilderStyles()[\n                            \"visual-builder__add-button-label\"\n                        ]\n                    )}\n                >\n                    {props.label}\n                </span>\n            ) : null}\n        </button>\n    );\n}\n\nexport default AddInstanceButtonComponent;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,wBAAuB;AACvB,2BAAoC;AACpC,mBAAyB;AAGzB,sCAAqC;AACrC,yBAA+C;AA6DvC;AAhDR,SAAS,2BACL,OACW;AACX,QAAM,cAAc,MAAM;AAC1B,QAAM,gBAAgB,MAAM;AAC5B,QAAM,QAAQ,MAAM;AACpB,QAAM,UAAU,MAAM;AAEtB,QAAM,UAAU,OAAO,UAAsB;AA5BjD;AA6BQ,YAAQ,QAAQ;AAChB,QAAI;AACA,cAAM,qCAAAA,YAAA,mBAA0B;AAAA,QAC5B,kDAA+B;AAAA,QAC/B;AAAA,UACI;AAAA,UACA;AAAA,QACJ;AAAA;AAAA,IAER,SAAS,OAAO;AACZ,cAAQ,MAAM,0CAA0C,KAAK;AAAA,IACjE;AACA,YAAQ,QAAQ;AAChB,UAAM,QAAQ,KAAK;AAAA,EACvB;AAEA,QAAM,sBAAkB,kBAAAC;AAAA,IACpB;AAAA,QACA,0CAAoB,EAAE,4BAA4B;AAAA,IAClD;AAAA,MACI,0CAA0C,MAAM;AAAA,IACpD;AAAA,IACA;AAAA,MACI,KAAC,0CAAoB,EAAE,qCAAqC,CAAC,GACzD,QAAQ;AAAA,IAChB;AAAA,QACA,0CAAoB,EAAE,yBAAyB;AAAA,EACnD;AAEA,QAAM,eACF,eAAe,YAAY,cAAc,UACnC,YAAY,eACZ;AACV,QAAM,iBAAiB,eACjB,MAAM,MAAM,UAAU,eACtB;AACN,QAAM,WAAW,QAAQ,SAAS;AAElC,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,MACX,gBAAc;AAAA,MACd,eAAY;AAAA,MACZ;AAAA,MACA,OACI,gBAAgB,iBACV,OAAO,YAAY,uBACnB;AAAA,MAEV,SAAS,CAAC,MAAM;AACZ,cAAM,QAAQ;AACd,gBAAQ,KAAK;AAAA,MACjB;AAAA,MAEA;AAAA,oDAAC,yBAAS;AAAA,QACT,MAAM,QACH;AAAA,UAAC;AAAA;AAAA,YACG,OAAO,MAAM;AAAA,YACb,eAAW,kBAAAA;AAAA,cACP;AAAA,kBACA,0CAAoB,EAChB,kCACJ;AAAA,YACJ;AAAA,YAEC,gBAAM;AAAA;AAAA,QACX,IACA;AAAA;AAAA;AAAA,EACR;AAER;AAEA,IAAO,4BAAQ;","names":["visualBuilderPostMessage","classNames"]}

package/dist/legacy/visualBuilder/components/addInstanceButton.d.cts

@@ -1,4 +1,6 @@
 import { ISchemaFieldMap } from '../utils/types/index.types.cjs';
+import { CslpData } from '../../cslp/types/cslp.types.cjs';
+import { Signal } from '@preact/signals';
 import '../../cms/types/contentTypeSchema.types.cjs';
 
 interface AddInstanceButtonProps {
@@ -6,6 +8,9 @@ interface AddInstanceButtonProps {
     onClick: (event: MouseEvent) => void;
     label?: string | undefined;
     fieldSchema: ISchemaFieldMap | undefined;
+    fieldMetadata: CslpData;
+    index: number;
+    loading: Signal<boolean>;
 }
 declare function AddInstanceButtonComponent(props: AddInstanceButtonProps): JSX.Element;
 

package/dist/legacy/visualBuilder/components/addInstanceButton.d.ts

@@ -1,4 +1,6 @@
 import { ISchemaFieldMap } from '../utils/types/index.types.js';
+import { CslpData } from '../../cslp/types/cslp.types.js';
+import { Signal } from '@preact/signals';
 import '../../cms/types/contentTypeSchema.types.js';
 
 interface AddInstanceButtonProps {
@@ -6,6 +8,9 @@ interface AddInstanceButtonProps {
     onClick: (event: MouseEvent) => void;
     label?: string | undefined;
     fieldSchema: ISchemaFieldMap | undefined;
+    fieldMetadata: CslpData;
+    index: number;
+    loading: Signal<boolean>;
 }
 declare function AddInstanceButtonComponent(props: AddInstanceButtonProps): JSX.Element;
 

package/dist/legacy/visualBuilder/components/addInstanceButton.js

@@ -4,28 +4,56 @@ import "../../chunk-5WRI5ZAA.js";
 import classNames from "classnames";
 import { visualBuilderStyles } from "../visualBuilder.style.js";
 import { PlusIcon } from "./icons/index.js";
+import visualBuilderPostMessage from "../utils/visualBuilderPostMessage.js";
+import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types.js";
 import { jsx, jsxs } from "preact/jsx-runtime";
 function AddInstanceButtonComponent(props) {
   const fieldSchema = props.fieldSchema;
-  const disabled = fieldSchema && "max_instance" in fieldSchema && fieldSchema.max_instance ? props.value.length >= fieldSchema.max_instance : false;
+  const fieldMetadata = props.fieldMetadata;
+  const index = props.index;
+  const loading = props.loading;
+  const onClick = async (event) => {
+    var _a;
+    loading.value = true;
+    try {
+      await ((_a = visualBuilderPostMessage) == null ? void 0 : _a.send(
+        VisualBuilderPostMessageEvents.ADD_INSTANCE,
+        {
+          fieldMetadata,
+          index
+        }
+      ));
+    } catch (error) {
+      console.error("Visual Builder: Failed to add instance", error);
+    }
+    loading.value = false;
+    props.onClick(event);
+  };
+  const buttonClassName = classNames(
+    "visual-builder__add-button",
+    visualBuilderStyles()["visual-builder__add-button"],
+    {
+      "visual-builder__add-button--with-label": props.label
+    },
+    {
+      [visualBuilderStyles()["visual-builder__add-button--loading"]]: loading.value
+    },
+    visualBuilderStyles()["visual-builder__tooltip"]
+  );
+  const maxInstances = fieldSchema && fieldSchema.data_type !== "block" ? fieldSchema.max_instance : void 0;
+  const isMaxInstances = maxInstances ? props.value.length >= maxInstances : false;
+  const disabled = loading.value || isMaxInstances;
   return /* @__PURE__ */ jsxs(
     "button",
     {
-      className: classNames(
-        "visual-builder__add-button",
-        visualBuilderStyles()["visual-builder__add-button"],
-        {
-          "visual-builder__add-button--with-label": props.label
-        },
-        visualBuilderStyles()["visual-builder__tooltip"]
-      ),
+      className: buttonClassName,
       "data-tooltip": "Add section",
       "data-testid": "visual-builder-add-instance-button",
       disabled,
-      title: disabled && fieldSchema && "max_instance" in fieldSchema ? `Max ${fieldSchema.max_instance} instances allowed` : void 0,
+      title: maxInstances && isMaxInstances ? `Max ${maxInstances} instances allowed` : void 0,
       onClick: (e) => {
         const event = e;
-        props.onClick(event);
+        onClick(event);
       },
       children: [
         /* @__PURE__ */ jsx(PlusIcon, {}),

package/dist/legacy/visualBuilder/components/addInstanceButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/components/addInstanceButton.tsx"],"sourcesContent":["import React from \"preact/compat\";\nimport classNames from \"classnames\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { PlusIcon } from \"./icons\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\n\ninterface AddInstanceButtonProps {\n    value: any;\n    onClick: (event: MouseEvent) => void;\n    label?: string | undefined;\n    fieldSchema: ISchemaFieldMap | undefined;\n}\n\nfunction AddInstanceButtonComponent(\n    props: AddInstanceButtonProps\n): JSX.Element {\n    const fieldSchema = props.fieldSchema;\n    const disabled =\n        fieldSchema && \"max_instance\" in fieldSchema && fieldSchema.max_instance\n            ? props.value.length >= fieldSchema.max_instance\n            : false;\n\n    return (\n        <button\n            className={classNames(\n                \"visual-builder__add-button\",\n                visualBuilderStyles()[\"visual-builder__add-button\"],\n                {\n                    \"visual-builder__add-button--with-label\": props.label,\n                },\n                visualBuilderStyles()[\"visual-builder__tooltip\"]\n            )}\n            data-tooltip={\"Add section\"}\n            data-testid=\"visual-builder-add-instance-button\"\n            disabled={disabled}\n            title={\n                disabled && fieldSchema && \"max_instance\" in fieldSchema\n                    ? `Max ${fieldSchema.max_instance} instances allowed`\n                    : undefined\n            }\n            onClick={(e) => {\n                const event = e as unknown as MouseEvent;\n                props.onClick(event);\n            }}\n        >\n            <PlusIcon />\n            {props.label ? (\n                <span\n                    title={props.label}\n                    className={classNames(\n                        \"visual-builder__add-button-label\",\n                        visualBuilderStyles()[\n                            \"visual-builder__add-button-label\"\n                        ]\n                    )}\n                >\n                    {props.label}\n                </span>\n            ) : null}\n        </button>\n    );\n}\n\nexport default AddInstanceButtonComponent;\n"],"mappings":";;;AACA,OAAO,gBAAgB;AACvB,SAAS,2BAA2B;AACpC,SAAS,gBAAgB;AAoBjB,SAsBI,KAtBJ;AAVR,SAAS,2BACL,OACW;AACX,QAAM,cAAc,MAAM;AAC1B,QAAM,WACF,eAAe,kBAAkB,eAAe,YAAY,eACtD,MAAM,MAAM,UAAU,YAAY,eAClC;AAEV,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA,oBAAoB,EAAE,4BAA4B;AAAA,QAClD;AAAA,UACI,0CAA0C,MAAM;AAAA,QACpD;AAAA,QACA,oBAAoB,EAAE,yBAAyB;AAAA,MACnD;AAAA,MACA,gBAAc;AAAA,MACd,eAAY;AAAA,MACZ;AAAA,MACA,OACI,YAAY,eAAe,kBAAkB,cACvC,OAAO,YAAY,YAAY,uBAC/B;AAAA,MAEV,SAAS,CAAC,MAAM;AACZ,cAAM,QAAQ;AACd,cAAM,QAAQ,KAAK;AAAA,MACvB;AAAA,MAEA;AAAA,4BAAC,YAAS;AAAA,QACT,MAAM,QACH;AAAA,UAAC;AAAA;AAAA,YACG,OAAO,MAAM;AAAA,YACb,WAAW;AAAA,cACP;AAAA,cACA,oBAAoB,EAChB,kCACJ;AAAA,YACJ;AAAA,YAEC,gBAAM;AAAA;AAAA,QACX,IACA;AAAA;AAAA;AAAA,EACR;AAER;AAEA,IAAO,4BAAQ;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/components/addInstanceButton.tsx"],"sourcesContent":["import React from \"preact/compat\";\nimport classNames from \"classnames\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { PlusIcon } from \"./icons\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { Signal } from \"@preact/signals\";\n\ninterface AddInstanceButtonProps {\n    value: any;\n    onClick: (event: MouseEvent) => void;\n    label?: string | undefined;\n    fieldSchema: ISchemaFieldMap | undefined;\n    fieldMetadata: CslpData;\n    index: number;\n    loading: Signal<boolean>;\n}\n\nfunction AddInstanceButtonComponent(\n    props: AddInstanceButtonProps\n): JSX.Element {\n    const fieldSchema = props.fieldSchema;\n    const fieldMetadata = props.fieldMetadata;\n    const index = props.index;\n    const loading = props.loading;\n\n    const onClick = async (event: MouseEvent) => {\n        loading.value = true;\n        try {\n            await visualBuilderPostMessage?.send(\n                VisualBuilderPostMessageEvents.ADD_INSTANCE,\n                {\n                    fieldMetadata,\n                    index,\n                }\n            );\n        } catch (error) {\n            console.error(\"Visual Builder: Failed to add instance\", error);\n        }\n        loading.value = false;\n        props.onClick(event);\n    };\n\n    const buttonClassName = classNames(\n        \"visual-builder__add-button\",\n        visualBuilderStyles()[\"visual-builder__add-button\"],\n        {\n            \"visual-builder__add-button--with-label\": props.label,\n        },\n        {\n            [visualBuilderStyles()[\"visual-builder__add-button--loading\"]]:\n                loading.value,\n        },\n        visualBuilderStyles()[\"visual-builder__tooltip\"]\n    );\n\n    const maxInstances =\n        fieldSchema && fieldSchema.data_type !== \"block\"\n            ? fieldSchema.max_instance\n            : undefined;\n    const isMaxInstances = maxInstances\n        ? props.value.length >= maxInstances\n        : false;\n    const disabled = loading.value || isMaxInstances;\n\n    return (\n        <button\n            className={buttonClassName}\n            data-tooltip={\"Add section\"}\n            data-testid=\"visual-builder-add-instance-button\"\n            disabled={disabled}\n            title={\n                maxInstances && isMaxInstances\n                    ? `Max ${maxInstances} instances allowed`\n                    : undefined\n            }\n            onClick={(e) => {\n                const event = e as unknown as MouseEvent;\n                onClick(event);\n            }}\n        >\n            <PlusIcon />\n            {props.label ? (\n                <span\n                    title={props.label}\n                    className={classNames(\n                        \"visual-builder__add-button-label\",\n                        visualBuilderStyles()[\n                            \"visual-builder__add-button-label\"\n                        ]\n                    )}\n                >\n                    {props.label}\n                </span>\n            ) : null}\n        </button>\n    );\n}\n\nexport default AddInstanceButtonComponent;\n"],"mappings":";;;AACA,OAAO,gBAAgB;AACvB,SAAS,2BAA2B;AACpC,SAAS,gBAAgB;AAGzB,OAAO,8BAA8B;AACrC,SAAS,sCAAsC;AA6DvC,SAeI,KAfJ;AAhDR,SAAS,2BACL,OACW;AACX,QAAM,cAAc,MAAM;AAC1B,QAAM,gBAAgB,MAAM;AAC5B,QAAM,QAAQ,MAAM;AACpB,QAAM,UAAU,MAAM;AAEtB,QAAM,UAAU,OAAO,UAAsB;AA5BjD;AA6BQ,YAAQ,QAAQ;AAChB,QAAI;AACA,cAAM,qDAA0B;AAAA,QAC5B,+BAA+B;AAAA,QAC/B;AAAA,UACI;AAAA,UACA;AAAA,QACJ;AAAA;AAAA,IAER,SAAS,OAAO;AACZ,cAAQ,MAAM,0CAA0C,KAAK;AAAA,IACjE;AACA,YAAQ,QAAQ;AAChB,UAAM,QAAQ,KAAK;AAAA,EACvB;AAEA,QAAM,kBAAkB;AAAA,IACpB;AAAA,IACA,oBAAoB,EAAE,4BAA4B;AAAA,IAClD;AAAA,MACI,0CAA0C,MAAM;AAAA,IACpD;AAAA,IACA;AAAA,MACI,CAAC,oBAAoB,EAAE,qCAAqC,CAAC,GACzD,QAAQ;AAAA,IAChB;AAAA,IACA,oBAAoB,EAAE,yBAAyB;AAAA,EACnD;AAEA,QAAM,eACF,eAAe,YAAY,cAAc,UACnC,YAAY,eACZ;AACV,QAAM,iBAAiB,eACjB,MAAM,MAAM,UAAU,eACtB;AACN,QAAM,WAAW,QAAQ,SAAS;AAElC,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,MACX,gBAAc;AAAA,MACd,eAAY;AAAA,MACZ;AAAA,MACA,OACI,gBAAgB,iBACV,OAAO,YAAY,uBACnB;AAAA,MAEV,SAAS,CAAC,MAAM;AACZ,cAAM,QAAQ;AACd,gBAAQ,KAAK;AAAA,MACjB;AAAA,MAEA;AAAA,4BAAC,YAAS;AAAA,QACT,MAAM,QACH;AAAA,UAAC;AAAA;AAAA,YACG,OAAO,MAAM;AAAA,YACb,WAAW;AAAA,cACP;AAAA,cACA,oBAAoB,EAChB,kCACJ;AAAA,YACJ;AAAA,YAEC,gBAAM;AAAA;AAAA,QACX,IACA;AAAA;AAAA;AAAA,EACR;AAER;AAEA,IAAO,4BAAQ;","names":[]}

package/dist/legacy/visualBuilder/generators/generateAddInstanceButtons.cjs

@@ -38,8 +38,11 @@ var import_preact = require("preact");
 var import_addInstanceButton = __toESM(require("../components/addInstanceButton.cjs"), 1);
 var import_jsx_runtime = require("preact/jsx-runtime");
 function generateAddInstanceButton({
-  fieldSchema,
   value,
+  fieldSchema,
+  fieldMetadata,
+  index,
+  loading,
   onClick,
   label
 }) {
@@ -48,10 +51,13 @@ function generateAddInstanceButton({
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_addInstanceButton.default,
       {
+        loading,
+        index,
         value,
         label,
         onClick,
-        fieldSchema
+        fieldSchema,
+        fieldMetadata
       }
     ),
     wrapper

package/dist/legacy/visualBuilder/generators/generateAddInstanceButtons.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/generators/generateAddInstanceButtons.tsx"],"sourcesContent":["import { render } from \"preact\";\nimport AddInstanceButtonComponent from \"../components/addInstanceButton\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\n\n/**\n * Generates a button element, when clicked, triggers the provided callback function.\n * @param onClickCallback - The function to be called when the button is clicked.\n * @returns The generated button element.\n */\nexport function generateAddInstanceButton({\n    fieldSchema,\n    value,\n    onClick,\n    label,\n}: {\n    value: any;\n    onClick: (event: MouseEvent) => void;\n    label?: string | undefined;\n    fieldSchema: ISchemaFieldMap | undefined;\n}): HTMLButtonElement {\n    const wrapper = document.createDocumentFragment();\n\n    render(\n        <AddInstanceButtonComponent\n            value={value}\n            label={label}\n            onClick={onClick}\n            fieldSchema={fieldSchema}\n        />,\n        wrapper\n    );\n\n    const button = wrapper.children[0] as HTMLButtonElement;\n    return button;\n}\n\n/**\n * Returns an array of HTMLButtonElement instances that can be used to add new instances to the visual builder.\n * @param visualBuilderContainer - The HTMLDivElement that contains the visual builder.\n * @param getAllButtons - If true, returns all add instance buttons. If false, returns only the previous and next buttons.\n * @returns An array of HTMLButtonElement instances or null if there are less than 2 buttons.\n */\nexport function getAddInstanceButtons(\n    visualBuilderContainer: HTMLDivElement,\n    getAllButtons = false\n): HTMLButtonElement[] | [HTMLButtonElement, HTMLButtonElement] | null {\n    const buttons = visualBuilderContainer.getElementsByClassName(\n        \"visual-builder__add-button\"\n    );\n\n    if (getAllButtons) {\n        return Array.from(buttons) as HTMLButtonElement[];\n    }\n\n    if (buttons.length < 2) {\n        return null;\n    }\n\n    const previousButton = buttons[0] as HTMLButtonElement;\n    const nextButton = buttons[1] as HTMLButtonElement;\n\n    return [previousButton, nextButton];\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAuB;AACvB,+BAAuC;AAsB/B;AAdD,SAAS,0BAA0B;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAKsB;AAClB,QAAM,UAAU,SAAS,uBAAuB;AAEhD;AAAA,IACI;AAAA,MAAC,yBAAAA;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,SAAS,QAAQ,SAAS,CAAC;AACjC,SAAO;AACX;AAQO,SAAS,sBACZ,wBACA,gBAAgB,OACmD;AACnE,QAAM,UAAU,uBAAuB;AAAA,IACnC;AAAA,EACJ;AAEA,MAAI,eAAe;AACf,WAAO,MAAM,KAAK,OAAO;AAAA,EAC7B;AAEA,MAAI,QAAQ,SAAS,GAAG;AACpB,WAAO;AAAA,EACX;AAEA,QAAM,iBAAiB,QAAQ,CAAC;AAChC,QAAM,aAAa,QAAQ,CAAC;AAE5B,SAAO,CAAC,gBAAgB,UAAU;AACtC;","names":["AddInstanceButtonComponent"]}
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateAddInstanceButtons.tsx"],"sourcesContent":["import React from \"preact/compat\";\nimport { render } from \"preact\";\nimport AddInstanceButtonComponent from \"../components/addInstanceButton\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { Signal } from \"@preact/signals\";\n\n/**\n * Generates a button element, when clicked, sends the add instance message and\n * then calls the provided callback function.\n * @param onClickCallback - The function to be called when the button is clicked.\n * @returns The generated button element.\n */\nexport function generateAddInstanceButton({\n    value,\n    fieldSchema,\n    fieldMetadata,\n    index,\n    loading,\n    onClick,\n    label,\n}: {\n    fieldSchema: ISchemaFieldMap | undefined;\n    value: any;\n    fieldMetadata: CslpData;\n    index: number;\n    loading: Signal<boolean>;\n    onClick: (event: MouseEvent) => void;\n    label?: string | undefined;\n}): HTMLButtonElement {\n    const wrapper = document.createDocumentFragment();\n\n    render(\n        <AddInstanceButtonComponent\n            loading={loading}\n            index={index}\n            value={value}\n            label={label}\n            onClick={onClick}\n            fieldSchema={fieldSchema}\n            fieldMetadata={fieldMetadata}\n        />,\n        wrapper\n    );\n\n    const button = wrapper.children[0] as HTMLButtonElement;\n    return button;\n}\n\n/**\n * Returns an array of HTMLButtonElement instances that can be used to add new instances to the visual builder.\n * @param visualBuilderContainer - The HTMLDivElement that contains the visual builder.\n * @param getAllButtons - If true, returns all add instance buttons. If false, returns only the previous and next buttons.\n * @returns An array of HTMLButtonElement instances or null if there are less than 2 buttons.\n */\nexport function getAddInstanceButtons(\n    visualBuilderContainer: HTMLDivElement,\n    getAllButtons = false\n): HTMLButtonElement[] | [HTMLButtonElement, HTMLButtonElement] | null {\n    const buttons = visualBuilderContainer.getElementsByClassName(\n        \"visual-builder__add-button\"\n    );\n\n    if (getAllButtons) {\n        return Array.from(buttons) as HTMLButtonElement[];\n    }\n\n    if (buttons.length < 2) {\n        return null;\n    }\n\n    const previousButton = buttons[0] as HTMLButtonElement;\n    const nextButton = buttons[1] as HTMLButtonElement;\n\n    return [previousButton, nextButton];\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oBAAuB;AACvB,+BAAuC;AA+B/B;AApBD,SAAS,0BAA0B;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAQsB;AAClB,QAAM,UAAU,SAAS,uBAAuB;AAEhD;AAAA,IACI;AAAA,MAAC,yBAAAA;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,SAAS,QAAQ,SAAS,CAAC;AACjC,SAAO;AACX;AAQO,SAAS,sBACZ,wBACA,gBAAgB,OACmD;AACnE,QAAM,UAAU,uBAAuB;AAAA,IACnC;AAAA,EACJ;AAEA,MAAI,eAAe;AACf,WAAO,MAAM,KAAK,OAAO;AAAA,EAC7B;AAEA,MAAI,QAAQ,SAAS,GAAG;AACpB,WAAO;AAAA,EACX;AAEA,QAAM,iBAAiB,QAAQ,CAAC;AAChC,QAAM,aAAa,QAAQ,CAAC;AAE5B,SAAO,CAAC,gBAAgB,UAAU;AACtC;","names":["AddInstanceButtonComponent"]}

package/dist/legacy/visualBuilder/generators/generateAddInstanceButtons.d.cts

@@ -1,16 +1,22 @@
 import { ISchemaFieldMap } from '../utils/types/index.types.cjs';
+import { CslpData } from '../../cslp/types/cslp.types.cjs';
+import { Signal } from '@preact/signals';
 import '../../cms/types/contentTypeSchema.types.cjs';
 
 /**
- * Generates a button element, when clicked, triggers the provided callback function.
+ * Generates a button element, when clicked, sends the add instance message and
+ * then calls the provided callback function.
  * @param onClickCallback - The function to be called when the button is clicked.
  * @returns The generated button element.
  */
-declare function generateAddInstanceButton({ fieldSchema, value, onClick, label, }: {
+declare function generateAddInstanceButton({ value, fieldSchema, fieldMetadata, index, loading, onClick, label, }: {
+    fieldSchema: ISchemaFieldMap | undefined;
     value: any;
+    fieldMetadata: CslpData;
+    index: number;
+    loading: Signal<boolean>;
     onClick: (event: MouseEvent) => void;
     label?: string | undefined;
-    fieldSchema: ISchemaFieldMap | undefined;
 }): HTMLButtonElement;
 /**
  * Returns an array of HTMLButtonElement instances that can be used to add new instances to the visual builder.

package/dist/legacy/visualBuilder/generators/generateAddInstanceButtons.d.ts

@@ -1,16 +1,22 @@
 import { ISchemaFieldMap } from '../utils/types/index.types.js';
+import { CslpData } from '../../cslp/types/cslp.types.js';
+import { Signal } from '@preact/signals';
 import '../../cms/types/contentTypeSchema.types.js';
 
 /**
- * Generates a button element, when clicked, triggers the provided callback function.
+ * Generates a button element, when clicked, sends the add instance message and
+ * then calls the provided callback function.
  * @param onClickCallback - The function to be called when the button is clicked.
  * @returns The generated button element.
  */
-declare function generateAddInstanceButton({ fieldSchema, value, onClick, label, }: {
+declare function generateAddInstanceButton({ value, fieldSchema, fieldMetadata, index, loading, onClick, label, }: {
+    fieldSchema: ISchemaFieldMap | undefined;
     value: any;
+    fieldMetadata: CslpData;
+    index: number;
+    loading: Signal<boolean>;
     onClick: (event: MouseEvent) => void;
     label?: string | undefined;
-    fieldSchema: ISchemaFieldMap | undefined;
 }): HTMLButtonElement;
 /**
  * Returns an array of HTMLButtonElement instances that can be used to add new instances to the visual builder.

package/dist/legacy/visualBuilder/generators/generateAddInstanceButtons.js

@@ -5,8 +5,11 @@ import { render } from "preact";
 import AddInstanceButtonComponent from "../components/addInstanceButton.js";
 import { jsx } from "preact/jsx-runtime";
 function generateAddInstanceButton({
-  fieldSchema,
   value,
+  fieldSchema,
+  fieldMetadata,
+  index,
+  loading,
   onClick,
   label
 }) {
@@ -15,10 +18,13 @@ function generateAddInstanceButton({
     /* @__PURE__ */ jsx(
       AddInstanceButtonComponent,
       {
+        loading,
+        index,
         value,
         label,
         onClick,
-        fieldSchema
+        fieldSchema,
+        fieldMetadata
       }
     ),
     wrapper

package/dist/legacy/visualBuilder/generators/generateAddInstanceButtons.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/generators/generateAddInstanceButtons.tsx"],"sourcesContent":["import { render } from \"preact\";\nimport AddInstanceButtonComponent from \"../components/addInstanceButton\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\n\n/**\n * Generates a button element, when clicked, triggers the provided callback function.\n * @param onClickCallback - The function to be called when the button is clicked.\n * @returns The generated button element.\n */\nexport function generateAddInstanceButton({\n    fieldSchema,\n    value,\n    onClick,\n    label,\n}: {\n    value: any;\n    onClick: (event: MouseEvent) => void;\n    label?: string | undefined;\n    fieldSchema: ISchemaFieldMap | undefined;\n}): HTMLButtonElement {\n    const wrapper = document.createDocumentFragment();\n\n    render(\n        <AddInstanceButtonComponent\n            value={value}\n            label={label}\n            onClick={onClick}\n            fieldSchema={fieldSchema}\n        />,\n        wrapper\n    );\n\n    const button = wrapper.children[0] as HTMLButtonElement;\n    return button;\n}\n\n/**\n * Returns an array of HTMLButtonElement instances that can be used to add new instances to the visual builder.\n * @param visualBuilderContainer - The HTMLDivElement that contains the visual builder.\n * @param getAllButtons - If true, returns all add instance buttons. If false, returns only the previous and next buttons.\n * @returns An array of HTMLButtonElement instances or null if there are less than 2 buttons.\n */\nexport function getAddInstanceButtons(\n    visualBuilderContainer: HTMLDivElement,\n    getAllButtons = false\n): HTMLButtonElement[] | [HTMLButtonElement, HTMLButtonElement] | null {\n    const buttons = visualBuilderContainer.getElementsByClassName(\n        \"visual-builder__add-button\"\n    );\n\n    if (getAllButtons) {\n        return Array.from(buttons) as HTMLButtonElement[];\n    }\n\n    if (buttons.length < 2) {\n        return null;\n    }\n\n    const previousButton = buttons[0] as HTMLButtonElement;\n    const nextButton = buttons[1] as HTMLButtonElement;\n\n    return [previousButton, nextButton];\n}\n"],"mappings":";;;AAAA,SAAS,cAAc;AACvB,OAAO,gCAAgC;AAsB/B;AAdD,SAAS,0BAA0B;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAKsB;AAClB,QAAM,UAAU,SAAS,uBAAuB;AAEhD;AAAA,IACI;AAAA,MAAC;AAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,SAAS,QAAQ,SAAS,CAAC;AACjC,SAAO;AACX;AAQO,SAAS,sBACZ,wBACA,gBAAgB,OACmD;AACnE,QAAM,UAAU,uBAAuB;AAAA,IACnC;AAAA,EACJ;AAEA,MAAI,eAAe;AACf,WAAO,MAAM,KAAK,OAAO;AAAA,EAC7B;AAEA,MAAI,QAAQ,SAAS,GAAG;AACpB,WAAO;AAAA,EACX;AAEA,QAAM,iBAAiB,QAAQ,CAAC;AAChC,QAAM,aAAa,QAAQ,CAAC;AAE5B,SAAO,CAAC,gBAAgB,UAAU;AACtC;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateAddInstanceButtons.tsx"],"sourcesContent":["import React from \"preact/compat\";\nimport { render } from \"preact\";\nimport AddInstanceButtonComponent from \"../components/addInstanceButton\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { Signal } from \"@preact/signals\";\n\n/**\n * Generates a button element, when clicked, sends the add instance message and\n * then calls the provided callback function.\n * @param onClickCallback - The function to be called when the button is clicked.\n * @returns The generated button element.\n */\nexport function generateAddInstanceButton({\n    value,\n    fieldSchema,\n    fieldMetadata,\n    index,\n    loading,\n    onClick,\n    label,\n}: {\n    fieldSchema: ISchemaFieldMap | undefined;\n    value: any;\n    fieldMetadata: CslpData;\n    index: number;\n    loading: Signal<boolean>;\n    onClick: (event: MouseEvent) => void;\n    label?: string | undefined;\n}): HTMLButtonElement {\n    const wrapper = document.createDocumentFragment();\n\n    render(\n        <AddInstanceButtonComponent\n            loading={loading}\n            index={index}\n            value={value}\n            label={label}\n            onClick={onClick}\n            fieldSchema={fieldSchema}\n            fieldMetadata={fieldMetadata}\n        />,\n        wrapper\n    );\n\n    const button = wrapper.children[0] as HTMLButtonElement;\n    return button;\n}\n\n/**\n * Returns an array of HTMLButtonElement instances that can be used to add new instances to the visual builder.\n * @param visualBuilderContainer - The HTMLDivElement that contains the visual builder.\n * @param getAllButtons - If true, returns all add instance buttons. If false, returns only the previous and next buttons.\n * @returns An array of HTMLButtonElement instances or null if there are less than 2 buttons.\n */\nexport function getAddInstanceButtons(\n    visualBuilderContainer: HTMLDivElement,\n    getAllButtons = false\n): HTMLButtonElement[] | [HTMLButtonElement, HTMLButtonElement] | null {\n    const buttons = visualBuilderContainer.getElementsByClassName(\n        \"visual-builder__add-button\"\n    );\n\n    if (getAllButtons) {\n        return Array.from(buttons) as HTMLButtonElement[];\n    }\n\n    if (buttons.length < 2) {\n        return null;\n    }\n\n    const previousButton = buttons[0] as HTMLButtonElement;\n    const nextButton = buttons[1] as HTMLButtonElement;\n\n    return [previousButton, nextButton];\n}\n"],"mappings":";;;AACA,SAAS,cAAc;AACvB,OAAO,gCAAgC;AA+B/B;AApBD,SAAS,0BAA0B;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAQsB;AAClB,QAAM,UAAU,SAAS,uBAAuB;AAEhD;AAAA,IACI;AAAA,MAAC;AAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,SAAS,QAAQ,SAAS,CAAC;AACjC,SAAO;AACX;AAQO,SAAS,sBACZ,wBACA,gBAAgB,OACmD;AACnE,QAAM,UAAU,uBAAuB;AAAA,IACnC;AAAA,EACJ;AAEA,MAAI,eAAe;AACf,WAAO,MAAM,KAAK,OAAO;AAAA,EAC7B;AAEA,MAAI,QAAQ,SAAS,GAAG;AACpB,WAAO;AAAA,EACX;AAEA,QAAM,iBAAiB,QAAQ,CAAC;AAChC,QAAM,aAAa,QAAQ,CAAC;AAE5B,SAAO,CAAC,gBAAgB,UAAU;AACtC;","names":[]}

package/dist/legacy/visualBuilder/listeners/mouseClick.cjs

@@ -72,6 +72,13 @@ async function handleBuilderInteraction(params) {
   if ((eventTarget == null ? void 0 : eventTarget.getAttribute("data-studio-ui")) === "true") {
     return;
   }
+  if (params.event.altKey) {
+    if (isAnchorElement) {
+      params.event.preventDefault();
+      params.event.stopPropagation();
+    }
+    return;
+  }
   if (isAnchorElement || elementHasCslp && !eventTarget.closest(".visual-builder__empty-block")) {
     params.event.preventDefault();
     params.event.stopPropagation();

package/dist/legacy/visualBuilder/listeners/mouseClick.cjs.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\";\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    // 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 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":["import__","visualBuilderPostMessage"]}
+{"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\";\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 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":["import__","visualBuilderPostMessage"]}

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

@@ -45,6 +45,13 @@ async function handleBuilderInteraction(params) {
   if ((eventTarget == null ? void 0 : eventTarget.getAttribute("data-studio-ui")) === "true") {
     return;
   }
+  if (params.event.altKey) {
+    if (isAnchorElement) {
+      params.event.preventDefault();
+      params.event.stopPropagation();
+    }
+    return;
+  }
   if (isAnchorElement || elementHasCslp && !eventTarget.closest(".visual-builder__empty-block")) {
     params.event.preventDefault();
     params.event.stopPropagation();