@contentstack/live-preview-utils/dist/modern/visualBuilder/hooks/useCollabIndicator.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/hooks/useCollabIndicator.ts"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useState, useRef, useEffect } from \"preact/hooks\";\nimport { IActiveThread } from \"../types/collab.types\";\nimport Config from \"../../configManager/configManager\";\nimport { calculatePopupPosition } from \"../generators/generateThread\";\nimport { handleEmptyThreads } from \"../generators/generateThread\";\nimport { toggleCollabPopup } from \"../generators/generateThread\";\n\ninterface UseCollabPopupProps {\n    newThread?: boolean;\n    thread?: IActiveThread;\n}\n\nexport const useCollabIndicator = ({\n    newThread,\n    thread,\n}: UseCollabPopupProps) => {\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const popupRef = useRef<HTMLDivElement>(null);\n    const config = Config.get();\n\n    const [showPopup, setShowPopup] = useState(newThread || false);\n    const [activeThread, setActiveThread] = useState<IActiveThread>(() => {\n        if (newThread) return { _id: \"new\" };\n        return thread || { _id: \"new\" };\n    });\n\n    const updatePopupPosition = () => {\n        if (buttonRef.current && popupRef.current) {\n            calculatePopupPosition(buttonRef.current, popupRef.current);\n        }\n    };\n\n    useEffect(() => {\n        if (!showPopup) return;\n        updatePopupPosition();\n    }, [showPopup]);\n\n    useEffect(() => {\n        const handleTogglePopup = (event: Event) => {\n            const { threadUid, action } = (event as CustomEvent).detail;\n\n            const thread = document.querySelector(\n                `div[threaduid='${threadUid}']`\n            );\n\n            handleEmptyThreads();\n            const closestDiv = buttonRef.current?.closest(\"div[field-path]\");\n            if (closestDiv) {\n                (closestDiv as HTMLElement).style.zIndex = \"999\";\n            }\n            setShowPopup(false);\n\n            if (\n                action === \"open\" &&\n                thread &&\n                thread.contains(buttonRef.current)\n            ) {\n                setShowPopup(true);\n                const closestDiv =\n                    buttonRef.current?.closest(\"div[field-path]\");\n                thread.scrollIntoView({\n                    behavior: \"smooth\",\n                    block: \"center\",\n                });\n                if (closestDiv) {\n                    (closestDiv as HTMLElement).style.zIndex = \"1000\";\n                }\n\n                if (config?.collab?.isFeedbackMode === true) {\n                    Config.set(\"collab.isFeedbackMode\", false);\n                }\n            }\n        };\n\n        document.addEventListener(\"toggleCollabPopup\", handleTogglePopup);\n\n        return () => {\n            document.removeEventListener(\n                \"toggleCollabPopup\",\n                handleTogglePopup\n            );\n        };\n    }, []);\n\n    const togglePopup = () => {\n        if (!showPopup) {\n            toggleCollabPopup({ threadUid: \"\", action: \"close\" });\n            setShowPopup(true);\n            const closestDiv = buttonRef.current?.closest(\"div[field-path]\");\n            if (closestDiv) {\n                (closestDiv as HTMLElement).style.zIndex = \"1000\";\n            }\n        } else {\n            setShowPopup(false);\n            const closestDiv = buttonRef.current?.closest(\"div[field-path]\");\n            if (!closestDiv?.hasAttribute(\"threaduid\")) closestDiv?.remove();\n\n            if (config?.collab?.isFeedbackMode === false) {\n                Config.set(\"collab.isFeedbackMode\", true);\n            }\n        }\n    };\n\n    return {\n        buttonRef,\n        popupRef,\n        showPopup,\n        setShowPopup,\n        activeThread,\n        setActiveThread,\n        togglePopup,\n    };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA4C;AAE5C,2BAAmB;AACnB,4BAAuC;AACvC,IAAAA,yBAAmC;AACnC,IAAAA,yBAAkC;AAO3B,IAAM,qBAAqB,CAAC;AAAA,EAC/B;AAAA,EACA;AACJ,MAA2B;AACvB,QAAM,gBAAY,qBAA0B,IAAI;AAChD,QAAM,eAAW,qBAAuB,IAAI;AAC5C,QAAM,SAAS,qBAAAC,QAAO,IAAI;AAE1B,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,aAAa,KAAK;AAC7D,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAwB,MAAM;AAClE,QAAI,UAAW,QAAO,EAAE,KAAK,MAAM;AACnC,WAAO,UAAU,EAAE,KAAK,MAAM;AAAA,EAClC,CAAC;AAED,QAAM,sBAAsB,MAAM;AAC9B,QAAI,UAAU,WAAW,SAAS,SAAS;AACvC,wDAAuB,UAAU,SAAS,SAAS,OAAO;AAAA,IAC9D;AAAA,EACJ;AAEA,8BAAU,MAAM;AACZ,QAAI,CAAC,UAAW;AAChB,wBAAoB;AAAA,EACxB,GAAG,CAAC,SAAS,CAAC;AAEd,8BAAU,MAAM;AACZ,UAAM,oBAAoB,CAAC,UAAiB;AACxC,YAAM,EAAE,WAAW,OAAO,IAAK,MAAsB;AAErD,YAAMC,UAAS,SAAS;AAAA,QACpB,kBAAkB,SAAS;AAAA,MAC/B;AAEA,qDAAmB;AACnB,YAAM,aAAa,UAAU,SAAS,QAAQ,iBAAiB;AAC/D,UAAI,YAAY;AACZ,QAAC,WAA2B,MAAM,SAAS;AAAA,MAC/C;AACA,mBAAa,KAAK;AAElB,UACI,WAAW,UACXA,WACAA,QAAO,SAAS,UAAU,OAAO,GACnC;AACE,qBAAa,IAAI;AACjB,cAAMC,cACF,UAAU,SAAS,QAAQ,iBAAiB;AAChD,QAAAD,QAAO,eAAe;AAAA,UAClB,UAAU;AAAA,UACV,OAAO;AAAA,QACX,CAAC;AACD,YAAIC,aAAY;AACZ,UAACA,YAA2B,MAAM,SAAS;AAAA,QAC/C;AAEA,YAAI,QAAQ,QAAQ,mBAAmB,MAAM;AACzC,+BAAAF,QAAO,IAAI,yBAAyB,KAAK;AAAA,QAC7C;AAAA,MACJ;AAAA,IACJ;AAEA,aAAS,iBAAiB,qBAAqB,iBAAiB;AAEhE,WAAO,MAAM;AACT,eAAS;AAAA,QACL;AAAA,QACA;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,MAAM;AACtB,QAAI,CAAC,WAAW;AACZ,oDAAkB,EAAE,WAAW,IAAI,QAAQ,QAAQ,CAAC;AACpD,mBAAa,IAAI;AACjB,YAAM,aAAa,UAAU,SAAS,QAAQ,iBAAiB;AAC/D,UAAI,YAAY;AACZ,QAAC,WAA2B,MAAM,SAAS;AAAA,MAC/C;AAAA,IACJ,OAAO;AACH,mBAAa,KAAK;AAClB,YAAM,aAAa,UAAU,SAAS,QAAQ,iBAAiB;AAC/D,UAAI,CAAC,YAAY,aAAa,WAAW,EAAG,aAAY,OAAO;AAE/D,UAAI,QAAQ,QAAQ,mBAAmB,OAAO;AAC1C,6BAAAA,QAAO,IAAI,yBAAyB,IAAI;AAAA,MAC5C;AAAA,IACJ;AAAA,EACJ;AAEA,SAAO;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AACJ;","names":["import_generateThread","Config","thread","closestDiv"]}