@contentstack/live-preview-utils/dist/modern/visualBuilder/components/CommentIcon.cjs.map

Contentstack provides the Live Preview SDK to establish a communication channel between the various Contentstack SDKs and your website, transmitting live changes to the preview pane.

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