@contentstack/live-preview-utils/dist/modern/visualBuilder/components/VisualBuilder.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/VisualBuilder.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { hideOverlay } from \"../generators/generateOverlay\";\nimport {\n    visualBuilderStyles,\n    VisualBuilderGlobalStyles,\n} from \"../visualBuilder.style\";\nimport React from \"preact/compat\";\nimport { isOpenInBuilder , isOpenInPreviewShare} from \"../../utils\";\n\ninterface VisualBuilderProps {\n    visualBuilderContainer: HTMLDivElement | null;\n    resizeObserver: ResizeObserver;\n}\n\nfunction VisualBuilderComponent(props: VisualBuilderProps): JSX.Element | null {\n    const isInBuilder = isOpenInBuilder();\n    const isInPreviewShare = isOpenInPreviewShare();\n\n    if (!isInBuilder && !isInPreviewShare) {\n        return null;\n    }\n\n    return (\n        <>\n            {/* For some reason, goober's glob and createGlobalStyle were not working in this case. */}\n            {/* glob also does not work when called in visualBuilder's constructor */}\n            <style\n                dangerouslySetInnerHTML={{\n                    __html: VisualBuilderGlobalStyles,\n                }}\n            />\n            <div\n                className={classNames(\n                    visualBuilderStyles()[\"visual-builder__cursor\"],\n                    \"visual-builder__cursor\"\n                )}\n                data-testid=\"visual-builder__cursor\"\n            ></div>\n            <div\n                className={classNames(\n                    visualBuilderStyles()[\"visual-builder__overlay__wrapper\"],\n                    \"visual-builder__overlay__wrapper\"\n                )}\n                data-testid=\"visual-builder__overlay__wrapper\"\n                onClick={(event) => {\n                    const targetElement = event.currentTarget as HTMLDivElement;\n\n                    const focusedToolbar = document.querySelector(\n                        \".visual-builder__focused-toolbar\"\n                    ) as HTMLDivElement;\n\n                    hideOverlay({\n                        visualBuilderContainer: props.visualBuilderContainer,\n                        visualBuilderOverlayWrapper: targetElement,\n                        focusedToolbar: focusedToolbar,\n                        resizeObserver: props.resizeObserver,\n                    });\n                }}\n            >\n                <div\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--top\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                    data-testid=\"visual-builder__overlay--top\"\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--left\"\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--left\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--right\"\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--right\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--bottom\"\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--bottom\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--outline\"\n                    className={classNames(\n                        \"visual-builder__overlay--outline\",\n                        visualBuilderStyles()[\n                            \"visual-builder__overlay--outline\"\n                        ]\n                    )}\n                ></div>\n            </div>\n\n            <div\n                className={classNames(\n                    \"visual-builder__hover-outline visual-builder__hover-outline--unclickable\",\n                    visualBuilderStyles()[\"visual-builder__hover-outline\"],\n                    visualBuilderStyles()[\n                        \"visual-builder__hover-outline--unclickable\"\n                    ]\n                )}\n                data-testid=\"visual-builder__hover-outline\"\n            ></div>\n            <div\n                className={classNames(\n                    \"visual-builder__focused-toolbar\",\n                    visualBuilderStyles()[\"visual-builder__focused-toolbar\"]\n                )}\n                data-testid=\"visual-builder__focused-toolbar\"\n            ></div>\n        </>\n    );\n}\n\nexport default VisualBuilderComponent;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AACvB,6BAA4B;AAC5B,2BAGO;AAEP,mBAAsD;AAgB9C;AATR,SAAS,uBAAuB,OAA+C;AAC3E,QAAM,kBAAc,8BAAgB;AACpC,QAAM,uBAAmB,mCAAqB;AAE9C,MAAI,CAAC,eAAe,CAAC,kBAAkB;AACnC,WAAO;AAAA,EACX;AAEA,SACI,4EAGI;AAAA;AAAA,MAAC;AAAA;AAAA,QACG,yBAAyB;AAAA,UACrB,QAAQ;AAAA,QACZ;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAA;AAAA,cACP,0CAAoB,EAAE,wBAAwB;AAAA,UAC9C;AAAA,QACJ;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAA;AAAA,cACP,0CAAoB,EAAE,kCAAkC;AAAA,UACxD;AAAA,QACJ;AAAA,QACA,eAAY;AAAA,QACZ,SAAS,CAAC,UAAU;AAChB,gBAAM,gBAAgB,MAAM;AAE5B,gBAAM,iBAAiB,SAAS;AAAA,YAC5B;AAAA,UACJ;AAEA,kDAAY;AAAA,YACR,wBAAwB,MAAM;AAAA,YAC9B,6BAA6B;AAAA,YAC7B;AAAA,YACA,gBAAgB,MAAM;AAAA,UAC1B,CAAC;AAAA,QACL;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACG,eAAW,kBAAAA;AAAA,gBACP;AAAA,oBACA,0CAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA,cACA,eAAY;AAAA;AAAA,UACf;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,eAAW,kBAAAA;AAAA,gBACP;AAAA,oBACA,0CAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,eAAW,kBAAAA;AAAA,gBACP;AAAA,oBACA,0CAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,eAAW,kBAAAA;AAAA,gBACP;AAAA,oBACA,0CAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,eAAW,kBAAAA;AAAA,gBACP;AAAA,oBACA,0CAAoB,EAChB,kCACJ;AAAA,cACJ;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACL;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAA;AAAA,UACP;AAAA,cACA,0CAAoB,EAAE,+BAA+B;AAAA,cACrD,0CAAoB,EAChB,4CACJ;AAAA,QACJ;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAA;AAAA,UACP;AAAA,cACA,0CAAoB,EAAE,iCAAiC;AAAA,QAC3D;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,KACL;AAER;AAEA,IAAO,wBAAQ;","names":["classNames"]}