@contentstack/live-preview-utils/dist/modern/timeline/compare/compare.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/timeline/compare/compare.ts"],"sourcesContent":["import timelinePostMessage from \"../timelinePostMessage/timelinePostMessage\";\nimport { timelinePostMessageEvents } from \"../timelinePostMessage/timelinePostMessage.constant\";\nimport { compareGlobalStyles } from \"./compare.style\";\n\nconst voidElements = new Set([\n    \"area\",\n    \"base\",\n    \"br\",\n    \"col\",\n    \"embed\",\n    \"hr\",\n    \"img\",\n    \"input\",\n    \"keygen\",\n    \"link\",\n    \"meta\",\n    \"param\",\n    \"source\",\n    \"track\",\n    \"wbr\",\n    \"video\"\n]);\n\nconst LEAF_CSLP_SELECTOR = \"[data-cslp]:not(:has([data-cslp]))\";\nconst DIFF_WRAPPER = \"cs-compare\";\n\nfunction registerCompareElement() {\n    class Compare extends HTMLSpanElement {\n        constructor() {\n            super();\n        }\n    }\n\n    if (!customElements.get(DIFF_WRAPPER)) {\n        customElements.define(DIFF_WRAPPER, Compare, {\n            extends: \"span\",\n        });\n    }\n}\n\n\n\nexport function handleWebCompare() {\n    // Check if window and document are available\n    if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n        // Server-side, don't execute client-specific logic\n        return;\n    }\n    compareGlobalStyles();\n    registerCompareElement();\n\n    timelinePostMessage?.on(\n        timelinePostMessageEvents.SEND_CURRENT_BASE_ROUTE,\n        async () => {\n            return { url: window.location.href.split(\"?\")[0] };\n        }\n    );\n\n    timelinePostMessage?.on(\n        timelinePostMessageEvents.SEND_CSLP_DATA,\n        async () => {\n            const elements = Array.from(\n                document.querySelectorAll(LEAF_CSLP_SELECTOR)\n            );\n            const map: Record<string, string> = {};\n            for (const element of elements) {\n                const cslp = element.getAttribute(\"data-cslp\")!;\n                if (\n                    element.hasAttributes() &&\n                    voidElements.has(element.tagName.toLowerCase())\n                ) {\n                    let attributes = \"\";\n                    for (const attr of element.attributes) {\n                        attributes += `${attr.name} -> ${attr.value}\\n`;\n                    }\n                    map[cslp] = attributes;\n                } else {\n                    map[cslp] = element.innerHTML;\n                }\n            }\n            return map;\n        }\n    );\n    const mergeColors = (className = \".cs-compare--added\") => {\n        const elements = Array.from(document.querySelectorAll(className));\n        for (let i = 1; i < elements.length; i++) {\n            const prev = elements[i - 1];\n            const next = elements[i];\n            if (prev.nextElementSibling === next)\n                prev.appendChild(prev.nextSibling!);\n        }\n    };\n\n    timelinePostMessage?.on<{\n        diff: Record<string, string>;\n        type: \"base\" | \"compare\";\n    }>(timelinePostMessageEvents.DIFF_VALUE, async (event) => {\n        const { diff, type } = event.data;\n        const operation = type === \"base\" ? \"removed\" : \"added\";\n        const elements = Array.from(\n            document.querySelectorAll(LEAF_CSLP_SELECTOR)\n        );\n        for (const element of elements) {\n            const path = element.getAttribute(\"data-cslp\")!;\n            if (!diff[path]) continue;\n\n            if (voidElements.has(element.tagName.toLowerCase())) {\n                element.classList.add(`cs-compare__void--${operation}`);\n            } else {\n                element.innerHTML = diff[path];\n            }\n        };\n\n        mergeColors(`.cs-compare--${operation}`);\n    });\n\n\n    timelinePostMessage?.on(timelinePostMessageEvents.REMOVE_DIFF, async () => {\n        // unwrap the cs-compare tags\n        const elements = Array.from(document.querySelectorAll(\"cs-compare\"));\n        for (const element of elements) {\n            const parent = element.parentElement!;\n            while (element.firstChild) {\n                parent.insertBefore(element.firstChild, element);\n            }\n            parent.removeChild(element);\n        }\n        // remove classes cs-compare__void--added and cs-compare__void--removed\n        const voidElements = Array.from(\n            document.querySelectorAll(\n                \".cs-compare__void--added, .cs-compare__void--removed\"\n            )\n        );\n        for (const element of voidElements) {\n            element.classList.remove(\"cs-compare__void--added\");\n            element.classList.remove(\"cs-compare__void--removed\");\n        }\n    });\n}\n"],"mappings":"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","names":["import_timelinePostMessage","timelinePostMessage","voidElements"]}