@webiny/app-website-builder 6.0.0 → 6.1.0-beta.0

package/BaseEditor/defaultConfig/Content/Preview/Overlays/ElementOverlay.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","cn","useDocumentEditor","$highlightElement","$selectElement","Draggable","useIsDragging","useElementComponentManifest","useStyles","ElementOverlay","memo","previewBox","elementId","isSelected","isHighlighted","editor","componentManifest","id","onClick","event","stopPropagation","setHighlighted","unsetHighlighted","dnd","pointerEvents","componentName","label","name","boxState","createElement","type","item","canDrag","isDragging","dragRef","onMouseEnter","onMouseLeave","style","position","zIndex","depth","top","left","width","height","opacity","className","AllMarginStripes","displayName","borderWidth","styles","marginTop","marginBottom","marginLeft","marginRight","Fragment","MarginStripes","backgroundImage","backgroundSize"],"sources":["ElementOverlay.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { cn } from \"@webiny/admin-ui\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport type { Box } from \"../Box.js\";\nimport { $highlightElement, $selectElement } from \"~/editorSdk/utils/index.js\";\nimport { Draggable } from \"~/BaseEditor/components/Draggable.js\";\nimport { useIsDragging } from \"~/BaseEditor/defaultConfig/Content/Preview/useIsDragging.js\";\nimport { useElementComponentManifest } from \"~/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.js\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\n\ninterface ElementOverlayProps {\n    elementId: string;\n    isSelected: boolean;\n    isHighlighted: boolean;\n    previewBox: Box;\n    editorBox: Box;\n}\n\nexport const ElementOverlay = React.memo(\n    ({ previewBox, elementId, isSelected, isHighlighted }: ElementOverlayProps) => {\n        const editor = useDocumentEditor();\n        const componentManifest = useElementComponentManifest(previewBox.id);\n\n        const onClick = useCallback((event: React.MouseEvent) => {\n            event.stopPropagation();\n            $selectElement(editor, elementId);\n        }, []);\n\n        const setHighlighted = useCallback((event: React.MouseEvent) => {\n            event.stopPropagation();\n            $highlightElement(editor, elementId);\n        }, []);\n\n        const unsetHighlighted = useCallback((event: React.MouseEvent) => {\n            event.stopPropagation();\n            $highlightElement(editor, null);\n        }, []);\n\n        const dnd = useIsDragging();\n\n        if (!componentManifest) {\n            return null;\n        }\n\n        const pointerEvents = \"auto\";\n        const componentName = componentManifest.label ?? componentManifest.name;\n        const boxState = isSelected ? \"active\" : isHighlighted && !dnd ? \"hover\" : null;\n\n        return (\n            <Draggable\n                type=\"ELEMENT\"\n                item={{ id: elementId, componentName: componentManifest.name }}\n                canDrag={componentManifest.canDrag !== false}\n            >\n                {({ isDragging, dragRef }) =>\n                    dragRef(\n                        <div\n                            data-element-id={elementId}\n                            onMouseEnter={setHighlighted}\n                            onMouseLeave={unsetHighlighted}\n                            style={{\n                                position: \"absolute\",\n                                pointerEvents,\n                                zIndex: 100 + previewBox.depth,\n                                top: previewBox.top,\n                                left: previewBox.left,\n                                width: previewBox.width,\n                                height: previewBox.height,\n                                opacity: isDragging ? 0.7 : 1\n                            }}\n                        >\n                            <div\n                                className={cn(\n                                    \"absolute box-border text-right top-0 left-0 w-full h-full\",\n                                    \"data-[state=hover]:border-md data-[state=hover]:border-success-default\",\n                                    \"data-[state=active]:border-md data-[state=active]:border-accent-default\"\n                                )}\n                                onClick={onClick}\n                                data-state={boxState}\n                                data-element-id={elementId}\n                                data-role={\"element-overlay\"}\n                                data-depth={previewBox.depth}\n                            >\n                                {isSelected ? (\n                                    <AllMarginStripes\n                                        elementId={elementId}\n                                        previewBox={previewBox}\n                                    />\n                                ) : null}\n                            </div>\n                            <div\n                                data-role={\"opacity-overlay\"}\n                                className={\"pointer-events-none absolute top-0 left-0 bg-white\"}\n                                style={{\n                                    zIndex: 100 + previewBox.depth,\n                                    width: previewBox.width,\n                                    height: previewBox.height,\n                                    opacity: isDragging ? 0.7 : 0\n                                }}\n                            ></div>\n                            <div\n                                data-role={\"element-overlay-label\"}\n                                data-label-for={previewBox.id}\n                                data-state={isDragging ? \"dragging\" : boxState}\n                                onClick={onClick}\n                                className={cn(\n                                    \"absolute text-sm text-neutral-light p-xs opacity-0 pointer-events-auto\",\n                                    \"data-[state=hover]:bg-success data-[state=hover]:opacity-100\",\n                                    \"data-[state=active]:bg-primary data-[state=active]:opacity-100\",\n                                    \"data-[state=dragging]:opacity-30\"\n                                )}\n                                style={{ top: -24 }}\n                            >\n                                {componentName}\n                            </div>\n                        </div>\n                    )\n                }\n            </Draggable>\n        );\n    }\n);\n\nElementOverlay.displayName = \"ElementOverlay\";\n\ninterface AllMarginStripesProps {\n    elementId: string;\n    previewBox: Box;\n}\n\nconst borderWidth = \"var(--border-width-md)\";\n\nconst AllMarginStripes = ({ elementId, previewBox }: AllMarginStripesProps) => {\n    const { styles } = useStyles(elementId);\n    const { marginTop = 0, marginBottom = 0, marginLeft = 0, marginRight = 0 } = styles;\n\n    return (\n        <>\n            {marginTop ? (\n                <MarginStripes\n                    top={`calc(0px - ${marginTop} - ${borderWidth})`}\n                    left={`calc(0px - ${borderWidth})`}\n                    height={marginTop}\n                    width={`${previewBox.width}px`}\n                />\n            ) : null}\n            {marginRight ? (\n                <MarginStripes\n                    top={`calc(0px - ${borderWidth})`}\n                    left={`calc(${previewBox.width}px - ${borderWidth})`}\n                    height={`${previewBox.height}px`}\n                    width={marginRight}\n                />\n            ) : null}\n            {marginBottom ? (\n                <MarginStripes\n                    top={`calc(${previewBox.height}px - ${borderWidth})`}\n                    left={`calc(0px - ${borderWidth})`}\n                    height={marginBottom}\n                    width={`${previewBox.width}px`}\n                />\n            ) : null}\n            {marginLeft ? (\n                <MarginStripes\n                    top={`calc(0px - ${borderWidth})`}\n                    left={`calc(0px - ${marginLeft} - ${borderWidth})`}\n                    height={`${previewBox.height}px`}\n                    width={marginLeft}\n                />\n            ) : null}\n        </>\n    );\n};\n\ninterface MarginStripesProps {\n    top: string;\n    left: string;\n    height: string;\n    width: string;\n}\n\nconst MarginStripes = ({ top, left, height, width }: MarginStripesProps) => {\n    return (\n        <div\n            data-role={\"element-margin\"}\n            style={{\n                pointerEvents: \"none\",\n                position: \"absolute\",\n                top,\n                left,\n                height,\n                width,\n                backgroundImage:\n                    \"linear-gradient(135deg, #ecebff 18.75%, #ffffff 18.75%, #ffffff 50%, #ecebff 50%, #ecebff 68.75%, #ffffff 68.75%, #ffffff 100%)\",\n                backgroundSize: \"4.49px 4.49px\"\n            }}\n        ></div>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","cn","useDocumentEditor","$highlightElement","$selectElement","Draggable","useIsDragging","useStyles","useElementOverlay","ElementOverlay","memo","editor","elementId","isSelected","isHighlighted","componentManifest","box","previewBox","onClick","event","stopPropagation","setHighlighted","unsetHighlighted","relatedTarget","closest","dnd","pointerEvents","componentName","label","name","boxState","createElement","type","item","id","canDrag","isDragging","dragRef","onMouseEnter","onMouseLeave","style","position","zIndex","depth","top","left","width","height","opacity","className","AllMarginStripes","displayName","borderWidth","styles","marginTop","marginBottom","marginLeft","marginRight","Fragment","MarginStripes","backgroundImage","backgroundSize"],"sources":["ElementOverlay.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { cn } from \"@webiny/admin-ui\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport type { Box } from \"../Box.js\";\nimport { $highlightElement, $selectElement } from \"~/editorSdk/utils/index.js\";\nimport { Draggable } from \"~/BaseEditor/components/Draggable.js\";\nimport { useIsDragging } from \"~/BaseEditor/defaultConfig/Content/Preview/useIsDragging.js\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { useElementOverlay } from \"./ElementOverlayProvider.js\";\n\nexport const ElementOverlay = React.memo(() => {\n    const editor = useDocumentEditor();\n    const {\n        elementId,\n        isSelected,\n        isHighlighted,\n        componentManifest,\n        box: previewBox\n    } = useElementOverlay();\n\n    const onClick = useCallback((event: React.MouseEvent) => {\n        event.stopPropagation();\n        $selectElement(editor, elementId);\n    }, []);\n\n    const setHighlighted = useCallback((event: React.MouseEvent) => {\n        event.stopPropagation();\n        $highlightElement(editor, elementId);\n    }, []);\n\n    const unsetHighlighted = useCallback((event: React.MouseEvent) => {\n        const relatedTarget = event.relatedTarget as Element;\n        if (\n            relatedTarget &&\n            typeof relatedTarget.closest === \"function\" &&\n            relatedTarget.closest('[data-role=\"element-overlay\"]')\n        ) {\n            return;\n        }\n        event.stopPropagation();\n        $highlightElement(editor, null);\n    }, []);\n\n    const dnd = useIsDragging();\n\n    if (!componentManifest) {\n        return null;\n    }\n\n    const pointerEvents = \"auto\";\n    const componentName = componentManifest.label ?? componentManifest.name;\n    const boxState = isSelected ? \"active\" : isHighlighted && !dnd ? \"hover\" : null;\n\n    return (\n        <Draggable\n            type=\"ELEMENT\"\n            item={{ id: elementId, componentName: componentManifest.name }}\n            canDrag={componentManifest.canDrag !== false}\n        >\n            {({ isDragging, dragRef }) =>\n                dragRef(\n                    <div\n                        data-element-id={elementId}\n                        onMouseEnter={setHighlighted}\n                        onMouseLeave={unsetHighlighted}\n                        style={{\n                            position: \"absolute\",\n                            pointerEvents,\n                            zIndex: 100 + previewBox.depth,\n                            top: previewBox.top,\n                            left: previewBox.left,\n                            width: previewBox.width,\n                            height: previewBox.height,\n                            opacity: isDragging ? 0.7 : 1\n                        }}\n                    >\n                        <div\n                            className={cn(\n                                \"absolute box-border text-right top-0 left-0 w-full h-full\",\n                                \"data-[state=hover]:border-md data-[state=hover]:border-success-default\",\n                                \"data-[state=active]:border-md data-[state=active]:border-accent-default\"\n                            )}\n                            onClick={onClick}\n                            data-state={boxState}\n                            data-element-id={elementId}\n                            data-role={\"element-overlay\"}\n                            data-depth={previewBox.depth}\n                        >\n                            {isSelected ? (\n                                <AllMarginStripes elementId={elementId} previewBox={previewBox} />\n                            ) : null}\n                        </div>\n                        <div\n                            data-role={\"opacity-overlay\"}\n                            className={\"pointer-events-none absolute top-0 left-0 bg-white\"}\n                            style={{\n                                zIndex: 100 + previewBox.depth,\n                                width: previewBox.width,\n                                height: previewBox.height,\n                                opacity: isDragging ? 0.7 : 0\n                            }}\n                        ></div>\n                        <div\n                            data-role={\"element-overlay-label\"}\n                            data-label-for={previewBox.id}\n                            data-state={isDragging ? \"dragging\" : boxState}\n                            onClick={onClick}\n                            className={cn(\n                                \"absolute text-sm text-neutral-light p-xs opacity-0 pointer-events-auto\",\n                                \"data-[state=hover]:bg-success data-[state=hover]:opacity-100\",\n                                \"data-[state=active]:bg-primary data-[state=active]:opacity-100\",\n                                \"data-[state=dragging]:opacity-30\"\n                            )}\n                            style={{ top: -24 }}\n                        >\n                            {componentName}\n                        </div>\n                    </div>\n                )\n            }\n        </Draggable>\n    );\n});\n\nElementOverlay.displayName = \"ElementOverlay\";\n\ninterface AllMarginStripesProps {\n    elementId: string;\n    previewBox: Box;\n}\n\nconst borderWidth = \"var(--border-width-md)\";\n\nconst AllMarginStripes = ({ elementId, previewBox }: AllMarginStripesProps) => {\n    const { styles } = useStyles(elementId);\n    const { marginTop = 0, marginBottom = 0, marginLeft = 0, marginRight = 0 } = styles;\n\n    return (\n        <>\n            {marginTop ? (\n                <MarginStripes\n                    top={`calc(0px - ${marginTop} - ${borderWidth})`}\n                    left={`calc(0px - ${borderWidth})`}\n                    height={marginTop}\n                    width={`${previewBox.width}px`}\n                />\n            ) : null}\n            {marginRight ? (\n                <MarginStripes\n                    top={`calc(0px - ${borderWidth})`}\n                    left={`calc(${previewBox.width}px - ${borderWidth})`}\n                    height={`${previewBox.height}px`}\n                    width={marginRight}\n                />\n            ) : null}\n            {marginBottom ? (\n                <MarginStripes\n                    top={`calc(${previewBox.height}px - ${borderWidth})`}\n                    left={`calc(0px - ${borderWidth})`}\n                    height={marginBottom}\n                    width={`${previewBox.width}px`}\n                />\n            ) : null}\n            {marginLeft ? (\n                <MarginStripes\n                    top={`calc(0px - ${borderWidth})`}\n                    left={`calc(0px - ${marginLeft} - ${borderWidth})`}\n                    height={`${previewBox.height}px`}\n                    width={marginLeft}\n                />\n            ) : null}\n        </>\n    );\n};\n\ninterface MarginStripesProps {\n    top: string;\n    left: string;\n    height: string;\n    width: string;\n}\n\nconst MarginStripes = ({ top, left, height, width }: MarginStripesProps) => {\n    return (\n        <div\n            data-role={\"element-margin\"}\n            style={{\n                pointerEvents: \"none\",\n                position: \"absolute\",\n                top,\n                left,\n                height,\n                width,\n                backgroundImage:\n                    \"linear-gradient(135deg, #ecebff 18.75%, #ffffff 18.75%, #ffffff 50%, #ecebff 50%, #ecebff 68.75%, #ffffff 68.75%, #ffffff 100%)\",\n                backgroundSize: \"4.49px 4.49px\"\n            }}\n        ></div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,EAAE,QAAQ,kBAAkB;AACrC,SAASC,iBAAiB;AAE1B,SAASC,iBAAiB,EAAEC,cAAc;AAC1C,SAASC,SAAS;AAClB,SAASC,aAAa;AACtB,SAASC,SAAS;AAClB,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,cAAc,gBAAGV,KAAK,CAACW,IAAI,CAAC,MAAM;EAC3C,MAAMC,MAAM,GAAGT,iBAAiB,CAAC,CAAC;EAClC,MAAM;IACFU,SAAS;IACTC,UAAU;IACVC,aAAa;IACbC,iBAAiB;IACjBC,GAAG,EAAEC;EACT,CAAC,GAAGT,iBAAiB,CAAC,CAAC;EAEvB,MAAMU,OAAO,GAAGlB,WAAW,CAAEmB,KAAuB,IAAK;IACrDA,KAAK,CAACC,eAAe,CAAC,CAAC;IACvBhB,cAAc,CAACO,MAAM,EAAEC,SAAS,CAAC;EACrC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMS,cAAc,GAAGrB,WAAW,CAAEmB,KAAuB,IAAK;IAC5DA,KAAK,CAACC,eAAe,CAAC,CAAC;IACvBjB,iBAAiB,CAACQ,MAAM,EAAEC,SAAS,CAAC;EACxC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMU,gBAAgB,GAAGtB,WAAW,CAAEmB,KAAuB,IAAK;IAC9D,MAAMI,aAAa,GAAGJ,KAAK,CAACI,aAAwB;IACpD,IACIA,aAAa,IACb,OAAOA,aAAa,CAACC,OAAO,KAAK,UAAU,IAC3CD,aAAa,CAACC,OAAO,CAAC,+BAA+B,CAAC,EACxD;MACE;IACJ;IACAL,KAAK,CAACC,eAAe,CAAC,CAAC;IACvBjB,iBAAiB,CAACQ,MAAM,EAAE,IAAI,CAAC;EACnC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMc,GAAG,GAAGnB,aAAa,CAAC,CAAC;EAE3B,IAAI,CAACS,iBAAiB,EAAE;IACpB,OAAO,IAAI;EACf;EAEA,MAAMW,aAAa,GAAG,MAAM;EAC5B,MAAMC,aAAa,GAAGZ,iBAAiB,CAACa,KAAK,IAAIb,iBAAiB,CAACc,IAAI;EACvE,MAAMC,QAAQ,GAAGjB,UAAU,GAAG,QAAQ,GAAGC,aAAa,IAAI,CAACW,GAAG,GAAG,OAAO,GAAG,IAAI;EAE/E,oBACI1B,KAAA,CAAAgC,aAAA,CAAC1B,SAAS;IACN2B,IAAI,EAAC,SAAS;IACdC,IAAI,EAAE;MAAEC,EAAE,EAAEtB,SAAS;MAAEe,aAAa,EAAEZ,iBAAiB,CAACc;IAAK,CAAE;IAC/DM,OAAO,EAAEpB,iBAAiB,CAACoB,OAAO,KAAK;EAAM,GAE5C,CAAC;IAAEC,UAAU;IAAEC;EAAQ,CAAC,KACrBA,OAAO,cACHtC,KAAA,CAAAgC,aAAA;IACI,mBAAiBnB,SAAU;IAC3B0B,YAAY,EAAEjB,cAAe;IAC7BkB,YAAY,EAAEjB,gBAAiB;IAC/BkB,KAAK,EAAE;MACHC,QAAQ,EAAE,UAAU;MACpBf,aAAa;MACbgB,MAAM,EAAE,GAAG,GAAGzB,UAAU,CAAC0B,KAAK;MAC9BC,GAAG,EAAE3B,UAAU,CAAC2B,GAAG;MACnBC,IAAI,EAAE5B,UAAU,CAAC4B,IAAI;MACrBC,KAAK,EAAE7B,UAAU,CAAC6B,KAAK;MACvBC,MAAM,EAAE9B,UAAU,CAAC8B,MAAM;MACzBC,OAAO,EAAEZ,UAAU,GAAG,GAAG,GAAG;IAChC;EAAE,gBAEFrC,KAAA,CAAAgC,aAAA;IACIkB,SAAS,EAAEhD,EAAE,CACT,2DAA2D,EAC3D,wEAAwE,EACxE,yEACJ,CAAE;IACFiB,OAAO,EAAEA,OAAQ;IACjB,cAAYY,QAAS;IACrB,mBAAiBlB,SAAU;IAC3B,aAAW,iBAAkB;IAC7B,cAAYK,UAAU,CAAC0B;EAAM,GAE5B9B,UAAU,gBACPd,KAAA,CAAAgC,aAAA,CAACmB,gBAAgB;IAACtC,SAAS,EAAEA,SAAU;IAACK,UAAU,EAAEA;EAAW,CAAE,CAAC,GAClE,IACH,CAAC,eACNlB,KAAA,CAAAgC,aAAA;IACI,aAAW,iBAAkB;IAC7BkB,SAAS,EAAE,oDAAqD;IAChET,KAAK,EAAE;MACHE,MAAM,EAAE,GAAG,GAAGzB,UAAU,CAAC0B,KAAK;MAC9BG,KAAK,EAAE7B,UAAU,CAAC6B,KAAK;MACvBC,MAAM,EAAE9B,UAAU,CAAC8B,MAAM;MACzBC,OAAO,EAAEZ,UAAU,GAAG,GAAG,GAAG;IAChC;EAAE,CACA,CAAC,eACPrC,KAAA,CAAAgC,aAAA;IACI,aAAW,uBAAwB;IACnC,kBAAgBd,UAAU,CAACiB,EAAG;IAC9B,cAAYE,UAAU,GAAG,UAAU,GAAGN,QAAS;IAC/CZ,OAAO,EAAEA,OAAQ;IACjB+B,SAAS,EAAEhD,EAAE,CACT,wEAAwE,EACxE,8DAA8D,EAC9D,gEAAgE,EAChE,kCACJ,CAAE;IACFuC,KAAK,EAAE;MAAEI,GAAG,EAAE,CAAC;IAAG;EAAE,GAEnBjB,aACA,CACJ,CACT,CAEG,CAAC;AAEpB,CAAC,CAAC;AAEFlB,cAAc,CAAC0C,WAAW,GAAG,gBAAgB;AAO7C,MAAMC,WAAW,GAAG,wBAAwB;AAE5C,MAAMF,gBAAgB,GAAGA,CAAC;EAAEtC,SAAS;EAAEK;AAAkC,CAAC,KAAK;EAC3E,MAAM;IAAEoC;EAAO,CAAC,GAAG9C,SAAS,CAACK,SAAS,CAAC;EACvC,MAAM;IAAE0C,SAAS,GAAG,CAAC;IAAEC,YAAY,GAAG,CAAC;IAAEC,UAAU,GAAG,CAAC;IAAEC,WAAW,GAAG;EAAE,CAAC,GAAGJ,MAAM;EAEnF,oBACItD,KAAA,CAAAgC,aAAA,CAAAhC,KAAA,CAAA2D,QAAA,QACKJ,SAAS,gBACNvD,KAAA,CAAAgC,aAAA,CAAC4B,aAAa;IACVf,GAAG,EAAE,cAAcU,SAAS,MAAMF,WAAW,GAAI;IACjDP,IAAI,EAAE,cAAcO,WAAW,GAAI;IACnCL,MAAM,EAAEO,SAAU;IAClBR,KAAK,EAAE,GAAG7B,UAAU,CAAC6B,KAAK;EAAK,CAClC,CAAC,GACF,IAAI,EACPW,WAAW,gBACR1D,KAAA,CAAAgC,aAAA,CAAC4B,aAAa;IACVf,GAAG,EAAE,cAAcQ,WAAW,GAAI;IAClCP,IAAI,EAAE,QAAQ5B,UAAU,CAAC6B,KAAK,QAAQM,WAAW,GAAI;IACrDL,MAAM,EAAE,GAAG9B,UAAU,CAAC8B,MAAM,IAAK;IACjCD,KAAK,EAAEW;EAAY,CACtB,CAAC,GACF,IAAI,EACPF,YAAY,gBACTxD,KAAA,CAAAgC,aAAA,CAAC4B,aAAa;IACVf,GAAG,EAAE,QAAQ3B,UAAU,CAAC8B,MAAM,QAAQK,WAAW,GAAI;IACrDP,IAAI,EAAE,cAAcO,WAAW,GAAI;IACnCL,MAAM,EAAEQ,YAAa;IACrBT,KAAK,EAAE,GAAG7B,UAAU,CAAC6B,KAAK;EAAK,CAClC,CAAC,GACF,IAAI,EACPU,UAAU,gBACPzD,KAAA,CAAAgC,aAAA,CAAC4B,aAAa;IACVf,GAAG,EAAE,cAAcQ,WAAW,GAAI;IAClCP,IAAI,EAAE,cAAcW,UAAU,MAAMJ,WAAW,GAAI;IACnDL,MAAM,EAAE,GAAG9B,UAAU,CAAC8B,MAAM,IAAK;IACjCD,KAAK,EAAEU;EAAW,CACrB,CAAC,GACF,IACN,CAAC;AAEX,CAAC;AASD,MAAMG,aAAa,GAAGA,CAAC;EAAEf,GAAG;EAAEC,IAAI;EAAEE,MAAM;EAAED;AAA0B,CAAC,KAAK;EACxE,oBACI/C,KAAA,CAAAgC,aAAA;IACI,aAAW,gBAAiB;IAC5BS,KAAK,EAAE;MACHd,aAAa,EAAE,MAAM;MACrBe,QAAQ,EAAE,UAAU;MACpBG,GAAG;MACHC,IAAI;MACJE,MAAM;MACND,KAAK;MACLc,eAAe,EACX,iIAAiI;MACrIC,cAAc,EAAE;IACpB;EAAE,CACA,CAAC;AAEf,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/Overlays/ElementOverlayProvider.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import type { ComponentManifest } from "@webiny/website-builder-sdk";
+import type { Box } from "../Box.js";
+interface ElementOverlayContext {
+    elementId: string;
+    isSelected: boolean;
+    isHighlighted: boolean;
+    box: Box;
+    componentManifest: ComponentManifest;
+}
+export type ElementOverlayProviderProps = Pick<ElementOverlayContext, "elementId" | "isSelected" | "isHighlighted" | "box"> & {
+    children: React.ReactNode;
+};
+export declare const ElementOverlayProvider: (props: ElementOverlayProviderProps) => React.JSX.Element | null;
+export declare const useElementOverlay: () => ElementOverlayContext;
+export {};

package/BaseEditor/defaultConfig/Content/Preview/Overlays/ElementOverlayProvider.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { createGenericContext } from "@webiny/app";
+import { useElementComponentManifest } from "../useElementComponentManifest.js";
+const context = createGenericContext("ElementOverlayProvider");
+export const ElementOverlayProvider = props => {
+  const {
+    children
+  } = props;
+  const componentManifest = useElementComponentManifest(props.elementId);
+  if (!componentManifest) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(context.Provider, Object.assign({}, props, {
+    componentManifest: componentManifest
+  }), children);
+};
+export const useElementOverlay = context.useHook;
+
+//# sourceMappingURL=ElementOverlayProvider.js.map

package/BaseEditor/defaultConfig/Content/Preview/Overlays/ElementOverlayProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","createGenericContext","useElementComponentManifest","context","ElementOverlayProvider","props","children","componentManifest","elementId","createElement","Provider","Object","assign","useElementOverlay","useHook"],"sources":["ElementOverlayProvider.tsx"],"sourcesContent":["import React from \"react\";\nimport { createGenericContext } from \"@webiny/app\";\nimport type { ComponentManifest } from \"@webiny/website-builder-sdk\";\nimport { useElementComponentManifest } from \"~/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.js\";\nimport type { Box } from \"../Box.js\";\n\ninterface ElementOverlayContext {\n    elementId: string;\n    isSelected: boolean;\n    isHighlighted: boolean;\n    box: Box;\n    componentManifest: ComponentManifest;\n}\n\nexport type ElementOverlayProviderProps = Pick<\n    ElementOverlayContext,\n    \"elementId\" | \"isSelected\" | \"isHighlighted\" | \"box\"\n> & {\n    children: React.ReactNode;\n};\n\nconst context = createGenericContext<ElementOverlayContext>(\"ElementOverlayProvider\");\n\nexport const ElementOverlayProvider = (props: ElementOverlayProviderProps) => {\n    const { children } = props;\n    const componentManifest = useElementComponentManifest(props.elementId);\n\n    if (!componentManifest) {\n        return null;\n    }\n\n    return (\n        <context.Provider {...props} componentManifest={componentManifest}>\n            {children}\n        </context.Provider>\n    );\n};\nexport const useElementOverlay = context.useHook;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,oBAAoB,QAAQ,aAAa;AAElD,SAASC,2BAA2B;AAkBpC,MAAMC,OAAO,GAAGF,oBAAoB,CAAwB,wBAAwB,CAAC;AAErF,OAAO,MAAMG,sBAAsB,GAAIC,KAAkC,IAAK;EAC1E,MAAM;IAAEC;EAAS,CAAC,GAAGD,KAAK;EAC1B,MAAME,iBAAiB,GAAGL,2BAA2B,CAACG,KAAK,CAACG,SAAS,CAAC;EAEtE,IAAI,CAACD,iBAAiB,EAAE;IACpB,OAAO,IAAI;EACf;EAEA,oBACIP,KAAA,CAAAS,aAAA,CAACN,OAAO,CAACO,QAAQ,EAAAC,MAAA,CAAAC,MAAA,KAAKP,KAAK;IAAEE,iBAAiB,EAAEA;EAAkB,IAC7DD,QACa,CAAC;AAE3B,CAAC;AACD,OAAO,MAAMO,iBAAiB,GAAGV,OAAO,CAACW,OAAO","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/Overlays/ElementOverlays.js

@@ -1,6 +1,6 @@
 import _styled from "@emotion/styled/base";
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-import React, { Fragment, useCallback, useRef } from "react";
+import React, { useCallback, useRef } from "react";
 import { observer } from "mobx-react-lite";
 import { useDrop } from "react-dnd";
 import { ComponentManifestToAstConverter } from "@webiny/website-builder-sdk";
@@ -14,7 +14,8 @@ import { ElementDropLines } from "./ElementDropLines.js";
 import { DropBox } from "./DropBox.js";
 import { useDropZoneManager } from "../DropZoneManagerProvider.js";
 import { mergeRefs } from "../mergeRefs.js";
-import { Commands } from "../../../../index.js";
+import { Commands, EditorConfig } from "../../../../index.js";
+import { ElementOverlayProvider } from "./ElementOverlayProvider.js";
 const OverlayContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "e1avjb810"
 } : {
@@ -25,7 +26,7 @@ const OverlayContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "p
   styles: "overflow:hidden;position:absolute;z-index:20"
 } : {
   name: "1bhccdb",
-  styles: "overflow:hidden;position:absolute;z-index:20/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkVsZW1lbnRPdmVybGF5cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUJ5QiIsImZpbGUiOiJFbGVtZW50T3ZlcmxheXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IEZyYWdtZW50LCB1c2VDYWxsYmFjaywgdXNlUmVmIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBvYnNlcnZlciB9IGZyb20gXCJtb2J4LXJlYWN0LWxpdGVcIjtcbmltcG9ydCB7IHVzZURyb3AgfSBmcm9tIFwicmVhY3QtZG5kXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHR5cGUgeyBTbG90SW5wdXQgfSBmcm9tIFwiQHdlYmlueS93ZWJzaXRlLWJ1aWxkZXItc2RrXCI7XG5pbXBvcnQgeyBDb21wb25lbnRNYW5pZmVzdFRvQXN0Q29udmVydGVyIH0gZnJvbSBcIkB3ZWJpbnkvd2Vic2l0ZS1idWlsZGVyLXNka1wiO1xuaW1wb3J0IHsgZmluZE1hdGNoaW5nQXN0Tm9kZSB9IGZyb20gXCJAd2ViaW55L3dlYnNpdGUtYnVpbGRlci1zZGtcIjtcblxuaW1wb3J0IHsgdXNlUHJldmlld0RhdGEgfSBmcm9tIFwifi9CYXNlRWRpdG9yL2hvb2tzL3VzZVByZXZpZXdEYXRhLmpzXCI7XG5pbXBvcnQgeyB1c2VTZWxlY3RGcm9tRWRpdG9yIH0gZnJvbSBcIn4vQmFzZUVkaXRvci9ob29rcy91c2VTZWxlY3RGcm9tRWRpdG9yLmpzXCI7XG5pbXBvcnQgeyBFbGVtZW50T3ZlcmxheSB9IGZyb20gXCIuL0VsZW1lbnRPdmVybGF5LmpzXCI7XG5pbXBvcnQgeyB1c2VJc0RyYWdnaW5nIH0gZnJvbSBcIi4uL3VzZUlzRHJhZ2dpbmcuanNcIjtcbmltcG9ydCB0eXBlIHsgQm94IH0gZnJvbSBcIi4uL0JveC5qc1wiO1xuaW1wb3J0IHR5cGUgeyBEcm9wRXZlbnQgfSBmcm9tIFwiLi4vdXNlUHJveGltaXR5RHJvcHpvbmUuanNcIjtcbmltcG9ydCB7IHVzZURvY3VtZW50RWRpdG9yIH0gZnJvbSBcIn4vRG9jdW1lbnRFZGl0b3IvaW5kZXguanNcIjtcbmltcG9ydCB7IEVsZW1lbnREcm9wTGluZXMgfSBmcm9tIFwiLi9FbGVtZW50RHJvcExpbmVzLmpzXCI7XG5pbXBvcnQgeyBEcm9wQm94IH0gZnJvbSBcIi4vRHJvcEJveC5qc1wiO1xuaW1wb3J0IHsgdXNlRHJvcFpvbmVNYW5hZ2VyIH0gZnJvbSBcIi4uL0Ryb3Bab25lTWFuYWdlclByb3ZpZGVyLmpzXCI7XG5pbXBvcnQgeyBtZXJnZVJlZnMgfSBmcm9tIFwiLi4vbWVyZ2VSZWZzLmpzXCI7XG5pbXBvcnQgeyBDb21tYW5kcyB9IGZyb20gXCJ+L0Jhc2VFZGl0b3IvaW5kZXguanNcIjtcbmltcG9ydCB0eXBlIHsgRWRpdG9yIH0gZnJvbSBcIn4vZWRpdG9yU2RrL0VkaXRvci5qc1wiO1xuXG5jb25zdCBPdmVybGF5Q29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBvdmVyZmxvdzogXCJoaWRkZW5cIixcbiAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgIHpJbmRleDogMjBcbn0pO1xuXG5jb25zdCBmaWx0ZXJFbGVtZW50cyA9IChib3g6IEJveCkgPT4ge1xuICAgIHJldHVybiBib3gudHlwZSA9PT0gXCJlbGVtZW50XCIgJiYgYm94LmlkICE9PSBcInJvb3RcIjtcbn07XG5cbmNvbnN0IGZpbHRlclNsb3RzID0gKGJveDogQm94KSA9PiB7XG4gICAgcmV0dXJuIGJveC50eXBlID09PSBcImVsZW1lbnQtc2xvdFwiO1xufTtcblxuZXhwb3J0IGNvbnN0IEVsZW1lbnRPdmVybGF5cyA9IG9ic2VydmVyKCgpID0+IHtcbiAgICBjb25zdCBkcm9wem9uZU1hbmFnZXIgPSB1c2VEcm9wWm9uZU1hbmFnZXIoKTtcbiAgICBjb25zdCBlZGl0b3IgPSB1c2VEb2N1bWVudEVkaXRvcigpO1xuICAgIGNvbnN0IHsgYm94ZXMgfSA9IHVzZVByZXZpZXdEYXRhKCk7XG4gICAgY29uc3QgaXNEcmFnZ2luZyA9IHVzZUlzRHJhZ2dpbmcoKTtcbiAgICBjb25zdCB7IHNlbGVjdGVkRWxlbWVudCwgaGlnaGxpZ2h0ZWRFbGVtZW50IH0gPSB1c2VTZWxlY3RGcm9tRWRpdG9yKHN0YXRlID0+IHtcbiAgICAgICAgcmV0dXJuIHtcbiAgICAgICAgICAgIHNlbGVjdGVkRWxlbWVudDogc3RhdGUuc2VsZWN0ZWRFbGVtZW50LFxuICAgICAgICAgICAgaGlnaGxpZ2h0ZWRFbGVtZW50OiBzdGF0ZS5oaWdobGlnaHRlZEVsZW1lbnRcbiAgICAgICAgfTtcbiAgICB9KTtcblxuICAgIGNvbnN0IGRyb3BSZWYgPSB1c2VSZWY8SFRNTEVsZW1lbnQgfCBudWxsPihudWxsKTtcblxuICAgIGNvbnN0IFssIGRyb3BdID0gdXNlRHJvcCgoKSA9PiAoe1xuICAgICAgICBhY2NlcHQ6IFwiRUxFTUVOVFwiLFxuICAgICAgICBkcm9wOiAoaXRlbTogYW55KSA9PiB7XG4gICAgICAgICAgICBjb25zdCB0YXJnZXQgPSBkcm9wem9uZU1hbmFnZXIuZ2V0TGFzdE1hdGNoZWRQb3NpdGlvbigpO1xuICAgICAgICAgICAgaWYgKHRhcmdldCkge1xuICAgICAgICAgICAgICAgIG9uRHJvcCh7IGl0ZW0sIHRhcmdldCB9KTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH0pKTtcblxuICAgIGRyb3AoZHJvcFJlZik7XG5cbiAgICBjb25zdCBjYW5Ecm9wQ29tcG9uZW50SW50b1RhcmdldCA9IChcbiAgICAgICAgZWRpdG9yOiBFZGl0b3IsXG4gICAgICAgIGNvbXBvbmVudE5hbWU6IHN0cmluZyxcbiAgICAgICAgdGFyZ2V0OiBEcm9wRXZlbnRbXCJ0YXJnZXRcIl1cbiAgICApID0+IHtcbiAgICAgICAgLy8gRGV0ZXJtaW5lIGNvbXBvbmVudCBtYW5pZmVzdCBmcm9tIGRyb3AgdGFyZ2V0LlxuICAgICAgICBjb25zdCBkb2N1bWVudCA9IGVkaXRvci5nZXREb2N1bWVudFN0YXRlKCkucmVhZCgpO1xuICAgICAgICBjb25zdCB7IGNvbXBvbmVudCB9ID0gZG9jdW1lbnQuZWxlbWVudHNbdGFyZ2V0LnBhcmVudElkXTtcbiAgICAgICAgY29uc3QgY29tcG9uZW50TWFuaWZlc3QgPSBlZGl0b3IuZ2V0RWRpdG9yU3RhdGUoKS5yZWFkKCkuY29tcG9uZW50c1tjb21wb25lbnQubmFtZV07XG5cbiAgICAgICAgLy8gRmluZCB0YXJnZXQgaW5wdXQgdXNpbmcgQVNULlxuICAgICAgICBjb25zdCBpbnB1dHNBc3QgPSBDb21wb25lbnRNYW5pZmVzdFRvQXN0Q29udmVydGVyLmNvbnZlcnQoY29tcG9uZW50TWFuaWZlc3QuaW5wdXRzID8/IFtdKTtcbiAgICAgICAgY29uc3QgdGFyZ2V0SW5wdXROb2RlID0gZmluZE1hdGNoaW5nQXN0Tm9kZSh0YXJnZXQuc2xvdCwgaW5wdXRzQXN0KTtcblxuICAgICAgICBsZXQgY2FuQWNjZXB0Q29tcG9uZW50ID0gdGFyZ2V0SW5wdXROb2RlICE9PSB1bmRlZmluZWQ7XG4gICAgICAgIGlmICh0YXJnZXRJbnB1dE5vZGUpIHtcbiAgICAgICAgICAgIGNvbnN0IHNsb3RJbnB1dCA9IHRhcmdldElucHV0Tm9kZS5pbnB1dCBhcyBTbG90SW5wdXQ7XG4gICAgICAgICAgICBjb25zdCB3aGl0ZWxpc3RlZENvbXBvbmVudHMgPSBzbG90SW5wdXQuY29tcG9uZW50cztcbiAgICAgICAgICAgIGlmICh3aGl0ZWxpc3RlZENvbXBvbmVudHMgJiYgd2hpdGVsaXN0ZWRDb21wb25lbnRzLmxlbmd0aCA+IDApIHtcbiAgICAgICAgICAgICAgICBjYW5BY2NlcHRDb21wb25lbnQgPSB3aGl0ZWxpc3RlZENvbXBvbmVudHMuaW5jbHVkZXMoY29tcG9uZW50TmFtZSk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICAgICAgcmV0dXJuIGNhbkFjY2VwdENvbXBvbmVudDtcbiAgICB9O1xuXG4gICAgY29uc3Qgb25Ecm9wID0gdXNlQ2FsbGJhY2soXG4gICAgICAgICh7IGl0ZW0sIHRhcmdldCB9OiBEcm9wRXZlbnQpID0+IHtcbiAgICAgICAgICAgIGlmICghY2FuRHJvcENvbXBvbmVudEludG9UYXJnZXQoZWRpdG9yLCBpdGVtLmNvbXBvbmVudE5hbWUsIHRhcmdldCkpIHtcbiAgICAgICAgICAgICAgICByZXR1cm47XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgIGlmIChpdGVtLmlkKSB7XG4gICAgICAgICAgICAgICAgLy8gV2UncmUgbW92aW5nIGFuIGV4aXN0aW5nIGVsZW1lbnQuXG4gICAgICAgICAgICAgICAgZWRpdG9yLmV4ZWN1dGVDb21tYW5kKENvbW1hbmRzLk1vdmVFbGVtZW50LCB7XG4gICAgICAgICAgICAgICAgICAgIGVsZW1lbnRJZDogaXRlbS5pZCxcbiAgICAgICAgICAgICAgICAgICAgcGFyZW50SWQ6IHRhcmdldC5wYXJlbnRJZCxcbiAgICAgICAgICAgICAgICAgICAgc2xvdDogdGFyZ2V0LnNsb3QsXG4gICAgICAgICAgICAgICAgICAgIGluZGV4OiB0YXJnZXQuaW5kZXhcbiAgICAgICAgICAgICAgICB9KTtcbiAgICAgICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICAgICAgLy8gV2UncmUgY3JlYXRpbmcgYSBuZXcgZWxlbWVudC5cbiAgICAgICAgICAgICAgICBlZGl0b3IuZXhlY3V0ZUNvbW1hbmQoQ29tbWFuZHMuQ3JlYXRlRWxlbWVudCwge1xuICAgICAgICAgICAgICAgICAgICBjb21wb25lbnROYW1lOiBpdGVtLmNvbXBvbmVudE5hbWUsXG4gICAgICAgICAgICAgICAgICAgIHBhcmVudElkOiB0YXJnZXQucGFyZW50SWQsXG4gICAgICAgICAgICAgICAgICAgIHNsb3Q6IHRhcmdldC5zbG90LFxuICAgICAgICAgICAgICAgICAgICBpbmRleDogdGFyZ2V0LmluZGV4XG4gICAgICAgICAgICAgICAgfSk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH0sXG4gICAgICAgIFtlZGl0b3JdXG4gICAgKTtcblxuICAgIGNvbnN0IHZpZXdwb3J0Q29udGFpbmVyOiBSZWFjdC5DU1NQcm9wZXJ0aWVzID0ge1xuICAgICAgICBkaXNwbGF5OiBcImJsb2NrXCIsXG4gICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgIHRvcDogMCxcbiAgICAgICAgbGVmdDogMCxcbiAgICAgICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgICAgICBoZWlnaHQ6IFwiMTAwJVwiLFxuICAgICAgICBwb2ludGVyRXZlbnRzOiBpc0RyYWdnaW5nID8gXCJhdXRvXCIgOiBcIm5vbmVcIlxuICAgIH07XG5cbiAgICBjb25zdCBzbG90cyA9IGJveGVzLnByZXZpZXcuZmlsdGVyKGZpbHRlclNsb3RzKTtcblxuICAgIHJldHVybiAoXG4gICAgICAgIDxPdmVybGF5Q29udGFpbmVyIHJlZj17bWVyZ2VSZWZzKGRyb3BSZWYpfSBzdHlsZT17dmlld3BvcnRDb250YWluZXJ9PlxuICAgICAgICAgICAge2JveGVzLnByZXZpZXcuZmlsdGVyKGZpbHRlckVsZW1lbnRzKS5tYXAoYm94ID0+IChcbiAgICAgICAgICAgICAgICA8RnJhZ21lbnQga2V5PXtib3guaWR9PlxuICAgICAgICAgICAgICAgICAgICA8RWxlbWVudE92ZXJsYXlcbiAgICAgICAgICAgICAgICAgICAgICAgIGVsZW1lbnRJZD17Ym94LmlkfVxuICAgICAgICAgICAgICAgICAgICAgICAgaXNTZWxlY3RlZD17c2VsZWN0ZWRFbGVtZW50ID09PSBib3guaWR9XG4gICAgICAgICAgICAgICAgICAgICAgICBpc0hpZ2hsaWdodGVkPXtoaWdobGlnaHRlZEVsZW1lbnQgPT09IGJveC5pZH1cbiAgICAgICAgICAgICAgICAgICAgICAgIHByZXZpZXdCb3g9e2JveH1cbiAgICAgICAgICAgICAgICAgICAgICAgIGVkaXRvckJveD17Ym94ZXMuZWRpdG9yLmdldChib3guaWQpIX1cbiAgICAgICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgICAgICAgPEVsZW1lbnREcm9wTGluZXNcbiAgICAgICAgICAgICAgICAgICAgICAgIGlzRmlyc3Q9e2JveC5wYXJlbnRJbmRleCA9PT0gMH1cbiAgICAgICAgICAgICAgICAgICAgICAgIHByZXZpZXdCb3g9e2JveH1cbiAgICAgICAgICAgICAgICAgICAgICAgIGVkaXRvckJveD17Ym94ZXMuZWRpdG9yLmdldChib3guaWQpIX1cbiAgICAgICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgICA8L0ZyYWdtZW50PlxuICAgICAgICAgICAgKSl9XG4gICAgICAgICAgICB7c2xvdHMubWFwKHNsb3QgPT4gKFxuICAgICAgICAgICAgICAgIDxEcm9wQm94IGtleT17c2xvdC5pZH0gYm94PXtzbG90fSBvbkRyb3A9e29uRHJvcH0gLz5cbiAgICAgICAgICAgICkpfVxuICAgICAgICA8L092ZXJsYXlDb250YWluZXI+XG4gICAgKTtcbn0pO1xuIl19 */",
+  styles: "overflow:hidden;position:absolute;z-index:20/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkVsZW1lbnRPdmVybGF5cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0J5QiIsImZpbGUiOiJFbGVtZW50T3ZlcmxheXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IHVzZUNhbGxiYWNrLCB1c2VSZWYgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IG9ic2VydmVyIH0gZnJvbSBcIm1vYngtcmVhY3QtbGl0ZVwiO1xuaW1wb3J0IHsgdXNlRHJvcCB9IGZyb20gXCJyZWFjdC1kbmRcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgdHlwZSB7IFNsb3RJbnB1dCB9IGZyb20gXCJAd2ViaW55L3dlYnNpdGUtYnVpbGRlci1zZGtcIjtcbmltcG9ydCB7IENvbXBvbmVudE1hbmlmZXN0VG9Bc3RDb252ZXJ0ZXIgfSBmcm9tIFwiQHdlYmlueS93ZWJzaXRlLWJ1aWxkZXItc2RrXCI7XG5pbXBvcnQgeyBmaW5kTWF0Y2hpbmdBc3ROb2RlIH0gZnJvbSBcIkB3ZWJpbnkvd2Vic2l0ZS1idWlsZGVyLXNka1wiO1xuXG5pbXBvcnQgeyB1c2VQcmV2aWV3RGF0YSB9IGZyb20gXCJ+L0Jhc2VFZGl0b3IvaG9va3MvdXNlUHJldmlld0RhdGEuanNcIjtcbmltcG9ydCB7IHVzZVNlbGVjdEZyb21FZGl0b3IgfSBmcm9tIFwifi9CYXNlRWRpdG9yL2hvb2tzL3VzZVNlbGVjdEZyb21FZGl0b3IuanNcIjtcbmltcG9ydCB7IEVsZW1lbnRPdmVybGF5IH0gZnJvbSBcIi4vRWxlbWVudE92ZXJsYXkuanNcIjtcbmltcG9ydCB7IHVzZUlzRHJhZ2dpbmcgfSBmcm9tIFwiLi4vdXNlSXNEcmFnZ2luZy5qc1wiO1xuaW1wb3J0IHR5cGUgeyBCb3ggfSBmcm9tIFwiLi4vQm94LmpzXCI7XG5pbXBvcnQgdHlwZSB7IERyb3BFdmVudCB9IGZyb20gXCIuLi91c2VQcm94aW1pdHlEcm9wem9uZS5qc1wiO1xuaW1wb3J0IHsgdXNlRG9jdW1lbnRFZGl0b3IgfSBmcm9tIFwifi9Eb2N1bWVudEVkaXRvci9pbmRleC5qc1wiO1xuaW1wb3J0IHsgRWxlbWVudERyb3BMaW5lcyB9IGZyb20gXCIuL0VsZW1lbnREcm9wTGluZXMuanNcIjtcbmltcG9ydCB7IERyb3BCb3ggfSBmcm9tIFwiLi9Ecm9wQm94LmpzXCI7XG5pbXBvcnQgeyB1c2VEcm9wWm9uZU1hbmFnZXIgfSBmcm9tIFwiLi4vRHJvcFpvbmVNYW5hZ2VyUHJvdmlkZXIuanNcIjtcbmltcG9ydCB7IG1lcmdlUmVmcyB9IGZyb20gXCIuLi9tZXJnZVJlZnMuanNcIjtcbmltcG9ydCB7IENvbW1hbmRzLCBFZGl0b3JDb25maWcgfSBmcm9tIFwifi9CYXNlRWRpdG9yL2luZGV4LmpzXCI7XG5pbXBvcnQgdHlwZSB7IEVkaXRvciB9IGZyb20gXCJ+L2VkaXRvclNkay9FZGl0b3IuanNcIjtcbmltcG9ydCB7IEVsZW1lbnRPdmVybGF5UHJvdmlkZXIgfSBmcm9tIFwifi9CYXNlRWRpdG9yL2RlZmF1bHRDb25maWcvQ29udGVudC9QcmV2aWV3L092ZXJsYXlzL0VsZW1lbnRPdmVybGF5UHJvdmlkZXIuanNcIjtcblxuY29uc3QgT3ZlcmxheUNvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiKSh7XG4gICAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICB6SW5kZXg6IDIwXG59KTtcblxuY29uc3QgZmlsdGVyRWxlbWVudHMgPSAoYm94OiBCb3gpID0+IHtcbiAgICByZXR1cm4gYm94LnR5cGUgPT09IFwiZWxlbWVudFwiICYmIGJveC5pZCAhPT0gXCJyb290XCI7XG59O1xuXG5jb25zdCBmaWx0ZXJTbG90cyA9IChib3g6IEJveCkgPT4ge1xuICAgIHJldHVybiBib3gudHlwZSA9PT0gXCJlbGVtZW50LXNsb3RcIjtcbn07XG5cbmV4cG9ydCBjb25zdCBFbGVtZW50T3ZlcmxheXMgPSBvYnNlcnZlcigoKSA9PiB7XG4gICAgY29uc3QgZHJvcHpvbmVNYW5hZ2VyID0gdXNlRHJvcFpvbmVNYW5hZ2VyKCk7XG4gICAgY29uc3QgZWRpdG9yID0gdXNlRG9jdW1lbnRFZGl0b3IoKTtcbiAgICBjb25zdCB7IGJveGVzIH0gPSB1c2VQcmV2aWV3RGF0YSgpO1xuICAgIGNvbnN0IGlzRHJhZ2dpbmcgPSB1c2VJc0RyYWdnaW5nKCk7XG4gICAgY29uc3QgeyBzZWxlY3RlZEVsZW1lbnQsIGhpZ2hsaWdodGVkRWxlbWVudCB9ID0gdXNlU2VsZWN0RnJvbUVkaXRvcihzdGF0ZSA9PiB7XG4gICAgICAgIHJldHVybiB7XG4gICAgICAgICAgICBzZWxlY3RlZEVsZW1lbnQ6IHN0YXRlLnNlbGVjdGVkRWxlbWVudCxcbiAgICAgICAgICAgIGhpZ2hsaWdodGVkRWxlbWVudDogc3RhdGUuaGlnaGxpZ2h0ZWRFbGVtZW50XG4gICAgICAgIH07XG4gICAgfSk7XG5cbiAgICBjb25zdCBkcm9wUmVmID0gdXNlUmVmPEhUTUxFbGVtZW50IHwgbnVsbD4obnVsbCk7XG5cbiAgICBjb25zdCBbLCBkcm9wXSA9IHVzZURyb3AoKCkgPT4gKHtcbiAgICAgICAgYWNjZXB0OiBcIkVMRU1FTlRcIixcbiAgICAgICAgZHJvcDogKGl0ZW06IGFueSkgPT4ge1xuICAgICAgICAgICAgY29uc3QgdGFyZ2V0ID0gZHJvcHpvbmVNYW5hZ2VyLmdldExhc3RNYXRjaGVkUG9zaXRpb24oKTtcbiAgICAgICAgICAgIGlmICh0YXJnZXQpIHtcbiAgICAgICAgICAgICAgICBvbkRyb3AoeyBpdGVtLCB0YXJnZXQgfSk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICB9KSk7XG5cbiAgICBkcm9wKGRyb3BSZWYpO1xuXG4gICAgY29uc3QgY2FuRHJvcENvbXBvbmVudEludG9UYXJnZXQgPSAoXG4gICAgICAgIGVkaXRvcjogRWRpdG9yLFxuICAgICAgICBjb21wb25lbnROYW1lOiBzdHJpbmcsXG4gICAgICAgIHRhcmdldDogRHJvcEV2ZW50W1widGFyZ2V0XCJdXG4gICAgKSA9PiB7XG4gICAgICAgIC8vIERldGVybWluZSBjb21wb25lbnQgbWFuaWZlc3QgZnJvbSBkcm9wIHRhcmdldC5cbiAgICAgICAgY29uc3QgZG9jdW1lbnQgPSBlZGl0b3IuZ2V0RG9jdW1lbnRTdGF0ZSgpLnJlYWQoKTtcbiAgICAgICAgY29uc3QgeyBjb21wb25lbnQgfSA9IGRvY3VtZW50LmVsZW1lbnRzW3RhcmdldC5wYXJlbnRJZF07XG4gICAgICAgIGNvbnN0IGNvbXBvbmVudE1hbmlmZXN0ID0gZWRpdG9yLmdldEVkaXRvclN0YXRlKCkucmVhZCgpLmNvbXBvbmVudHNbY29tcG9uZW50Lm5hbWVdO1xuXG4gICAgICAgIC8vIEZpbmQgdGFyZ2V0IGlucHV0IHVzaW5nIEFTVC5cbiAgICAgICAgY29uc3QgaW5wdXRzQXN0ID0gQ29tcG9uZW50TWFuaWZlc3RUb0FzdENvbnZlcnRlci5jb252ZXJ0KGNvbXBvbmVudE1hbmlmZXN0LmlucHV0cyA/PyBbXSk7XG4gICAgICAgIGNvbnN0IHRhcmdldElucHV0Tm9kZSA9IGZpbmRNYXRjaGluZ0FzdE5vZGUodGFyZ2V0LnNsb3QsIGlucHV0c0FzdCk7XG5cbiAgICAgICAgbGV0IGNhbkFjY2VwdENvbXBvbmVudCA9IHRhcmdldElucHV0Tm9kZSAhPT0gdW5kZWZpbmVkO1xuICAgICAgICBpZiAodGFyZ2V0SW5wdXROb2RlKSB7XG4gICAgICAgICAgICBjb25zdCBzbG90SW5wdXQgPSB0YXJnZXRJbnB1dE5vZGUuaW5wdXQgYXMgU2xvdElucHV0O1xuICAgICAgICAgICAgY29uc3Qgd2hpdGVsaXN0ZWRDb21wb25lbnRzID0gc2xvdElucHV0LmNvbXBvbmVudHM7XG4gICAgICAgICAgICBpZiAod2hpdGVsaXN0ZWRDb21wb25lbnRzICYmIHdoaXRlbGlzdGVkQ29tcG9uZW50cy5sZW5ndGggPiAwKSB7XG4gICAgICAgICAgICAgICAgY2FuQWNjZXB0Q29tcG9uZW50ID0gd2hpdGVsaXN0ZWRDb21wb25lbnRzLmluY2x1ZGVzKGNvbXBvbmVudE5hbWUpO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICAgIHJldHVybiBjYW5BY2NlcHRDb21wb25lbnQ7XG4gICAgfTtcblxuICAgIGNvbnN0IG9uRHJvcCA9IHVzZUNhbGxiYWNrKFxuICAgICAgICAoeyBpdGVtLCB0YXJnZXQgfTogRHJvcEV2ZW50KSA9PiB7XG4gICAgICAgICAgICBpZiAoIWNhbkRyb3BDb21wb25lbnRJbnRvVGFyZ2V0KGVkaXRvciwgaXRlbS5jb21wb25lbnROYW1lLCB0YXJnZXQpKSB7XG4gICAgICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICBpZiAoaXRlbS5pZCkge1xuICAgICAgICAgICAgICAgIC8vIFdlJ3JlIG1vdmluZyBhbiBleGlzdGluZyBlbGVtZW50LlxuICAgICAgICAgICAgICAgIGVkaXRvci5leGVjdXRlQ29tbWFuZChDb21tYW5kcy5Nb3ZlRWxlbWVudCwge1xuICAgICAgICAgICAgICAgICAgICBlbGVtZW50SWQ6IGl0ZW0uaWQsXG4gICAgICAgICAgICAgICAgICAgIHBhcmVudElkOiB0YXJnZXQucGFyZW50SWQsXG4gICAgICAgICAgICAgICAgICAgIHNsb3Q6IHRhcmdldC5zbG90LFxuICAgICAgICAgICAgICAgICAgICBpbmRleDogdGFyZ2V0LmluZGV4XG4gICAgICAgICAgICAgICAgfSk7XG4gICAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgICAgIC8vIFdlJ3JlIGNyZWF0aW5nIGEgbmV3IGVsZW1lbnQuXG4gICAgICAgICAgICAgICAgZWRpdG9yLmV4ZWN1dGVDb21tYW5kKENvbW1hbmRzLkNyZWF0ZUVsZW1lbnQsIHtcbiAgICAgICAgICAgICAgICAgICAgY29tcG9uZW50TmFtZTogaXRlbS5jb21wb25lbnROYW1lLFxuICAgICAgICAgICAgICAgICAgICBwYXJlbnRJZDogdGFyZ2V0LnBhcmVudElkLFxuICAgICAgICAgICAgICAgICAgICBzbG90OiB0YXJnZXQuc2xvdCxcbiAgICAgICAgICAgICAgICAgICAgaW5kZXg6IHRhcmdldC5pbmRleFxuICAgICAgICAgICAgICAgIH0pO1xuICAgICAgICAgICAgfVxuICAgICAgICB9LFxuICAgICAgICBbZWRpdG9yXVxuICAgICk7XG5cbiAgICBjb25zdCB2aWV3cG9ydENvbnRhaW5lcjogUmVhY3QuQ1NTUHJvcGVydGllcyA9IHtcbiAgICAgICAgZGlzcGxheTogXCJibG9ja1wiLFxuICAgICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgICB0b3A6IDAsXG4gICAgICAgIGxlZnQ6IDAsXG4gICAgICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICAgICAgaGVpZ2h0OiBcIjEwMCVcIixcbiAgICAgICAgcG9pbnRlckV2ZW50czogaXNEcmFnZ2luZyA/IFwiYXV0b1wiIDogXCJub25lXCJcbiAgICB9O1xuXG4gICAgY29uc3Qgc2xvdHMgPSBib3hlcy5wcmV2aWV3LmZpbHRlcihmaWx0ZXJTbG90cyk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8T3ZlcmxheUNvbnRhaW5lciByZWY9e21lcmdlUmVmcyhkcm9wUmVmKX0gc3R5bGU9e3ZpZXdwb3J0Q29udGFpbmVyfT5cbiAgICAgICAgICAgIHtib3hlcy5wcmV2aWV3LmZpbHRlcihmaWx0ZXJFbGVtZW50cykubWFwKGJveCA9PiAoXG4gICAgICAgICAgICAgICAgPEVsZW1lbnRPdmVybGF5UHJvdmlkZXJcbiAgICAgICAgICAgICAgICAgICAga2V5PXtib3guaWR9XG4gICAgICAgICAgICAgICAgICAgIGVsZW1lbnRJZD17Ym94LmlkfVxuICAgICAgICAgICAgICAgICAgICBpc1NlbGVjdGVkPXtzZWxlY3RlZEVsZW1lbnQgPT09IGJveC5pZH1cbiAgICAgICAgICAgICAgICAgICAgaXNIaWdobGlnaHRlZD17aGlnaGxpZ2h0ZWRFbGVtZW50ID09PSBib3guaWR9XG4gICAgICAgICAgICAgICAgICAgIGJveD17Ym94fVxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgPEVsZW1lbnRPdmVybGF5IC8+XG4gICAgICAgICAgICAgICAgICAgIDxFbGVtZW50RHJvcExpbmVzXG4gICAgICAgICAgICAgICAgICAgICAgICBpc0ZpcnN0PXtib3gucGFyZW50SW5kZXggPT09IDB9XG4gICAgICAgICAgICAgICAgICAgICAgICBwcmV2aWV3Qm94PXtib3h9XG4gICAgICAgICAgICAgICAgICAgICAgICBlZGl0b3JCb3g9e2JveGVzLmVkaXRvci5nZXQoYm94LmlkKSF9XG4gICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgICAgIDxFZGl0b3JDb25maWcuRWxlbWVudE92ZXJsYXkuRWxlbWVudHMgLz5cbiAgICAgICAgICAgICAgICA8L0VsZW1lbnRPdmVybGF5UHJvdmlkZXI+XG4gICAgICAgICAgICApKX1cbiAgICAgICAgICAgIHtzbG90cy5tYXAoc2xvdCA9PiAoXG4gICAgICAgICAgICAgICAgPERyb3BCb3gga2V5PXtzbG90LmlkfSBib3g9e3Nsb3R9IG9uRHJvcD17b25Ecm9wfSAvPlxuICAgICAgICAgICAgKSl9XG4gICAgICAgIDwvT3ZlcmxheUNvbnRhaW5lcj5cbiAgICApO1xufSk7XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 const filterElements = box => {
@@ -123,19 +124,17 @@ export const ElementOverlays = observer(() => {
   return /*#__PURE__*/React.createElement(OverlayContainer, {
     ref: mergeRefs(dropRef),
     style: viewportContainer
-  }, boxes.preview.filter(filterElements).map(box => /*#__PURE__*/React.createElement(Fragment, {
-    key: box.id
-  }, /*#__PURE__*/React.createElement(ElementOverlay, {
+  }, boxes.preview.filter(filterElements).map(box => /*#__PURE__*/React.createElement(ElementOverlayProvider, {
+    key: box.id,
     elementId: box.id,
     isSelected: selectedElement === box.id,
     isHighlighted: highlightedElement === box.id,
-    previewBox: box,
-    editorBox: boxes.editor.get(box.id)
-  }), /*#__PURE__*/React.createElement(ElementDropLines, {
+    box: box
+  }, /*#__PURE__*/React.createElement(ElementOverlay, null), /*#__PURE__*/React.createElement(ElementDropLines, {
     isFirst: box.parentIndex === 0,
     previewBox: box,
     editorBox: boxes.editor.get(box.id)
-  }))), slots.map(slot => /*#__PURE__*/React.createElement(DropBox, {
+  }), /*#__PURE__*/React.createElement(EditorConfig.ElementOverlay.Elements, null))), slots.map(slot => /*#__PURE__*/React.createElement(DropBox, {
     key: slot.id,
     box: slot,
     onDrop: onDrop

package/BaseEditor/defaultConfig/Content/Preview/Overlays/ElementOverlays.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Fragment","useCallback","useRef","observer","useDrop","ComponentManifestToAstConverter","findMatchingAstNode","usePreviewData","useSelectFromEditor","ElementOverlay","useIsDragging","useDocumentEditor","ElementDropLines","DropBox","useDropZoneManager","mergeRefs","Commands","OverlayContainer","_styled","process","env","NODE_ENV","target","label","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","filterElements","box","type","id","filterSlots","ElementOverlays","dropzoneManager","editor","boxes","isDragging","selectedElement","highlightedElement","state","dropRef","drop","accept","item","getLastMatchedPosition","onDrop","canDropComponentIntoTarget","componentName","document","getDocumentState","read","component","elements","parentId","componentManifest","getEditorState","components","inputsAst","convert","inputs","targetInputNode","slot","canAcceptComponent","undefined","slotInput","input","whitelistedComponents","length","includes","executeCommand","MoveElement","elementId","index","CreateElement","viewportContainer","display","position","top","left","width","height","pointerEvents","slots","preview","filter","createElement","ref","style","map","key","isSelected","isHighlighted","previewBox","editorBox","get","isFirst","parentIndex"],"sources":["ElementOverlays.tsx"],"sourcesContent":["import React, { Fragment, useCallback, useRef } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useDrop } from \"react-dnd\";\nimport styled from \"@emotion/styled\";\n\nimport type { SlotInput } from \"@webiny/website-builder-sdk\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { findMatchingAstNode } from \"@webiny/website-builder-sdk\";\n\nimport { usePreviewData } from \"~/BaseEditor/hooks/usePreviewData.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { ElementOverlay } from \"./ElementOverlay.js\";\nimport { useIsDragging } from \"../useIsDragging.js\";\nimport type { Box } from \"../Box.js\";\nimport type { DropEvent } from \"../useProximityDropzone.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { ElementDropLines } from \"./ElementDropLines.js\";\nimport { DropBox } from \"./DropBox.js\";\nimport { useDropZoneManager } from \"../DropZoneManagerProvider.js\";\nimport { mergeRefs } from \"../mergeRefs.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport type { Editor } from \"~/editorSdk/Editor.js\";\n\nconst OverlayContainer = styled(\"div\")({\n    overflow: \"hidden\",\n    position: \"absolute\",\n    zIndex: 20\n});\n\nconst filterElements = (box: Box) => {\n    return box.type === \"element\" && box.id !== \"root\";\n};\n\nconst filterSlots = (box: Box) => {\n    return box.type === \"element-slot\";\n};\n\nexport const ElementOverlays = observer(() => {\n    const dropzoneManager = useDropZoneManager();\n    const editor = useDocumentEditor();\n    const { boxes } = usePreviewData();\n    const isDragging = useIsDragging();\n    const { selectedElement, highlightedElement } = useSelectFromEditor(state => {\n        return {\n            selectedElement: state.selectedElement,\n            highlightedElement: state.highlightedElement\n        };\n    });\n\n    const dropRef = useRef<HTMLElement | null>(null);\n\n    const [, drop] = useDrop(() => ({\n        accept: \"ELEMENT\",\n        drop: (item: any) => {\n            const target = dropzoneManager.getLastMatchedPosition();\n            if (target) {\n                onDrop({ item, target });\n            }\n        }\n    }));\n\n    drop(dropRef);\n\n    const canDropComponentIntoTarget = (\n        editor: Editor,\n        componentName: string,\n        target: DropEvent[\"target\"]\n    ) => {\n        // Determine component manifest from drop target.\n        const document = editor.getDocumentState().read();\n        const { component } = document.elements[target.parentId];\n        const componentManifest = editor.getEditorState().read().components[component.name];\n\n        // Find target input using AST.\n        const inputsAst = ComponentManifestToAstConverter.convert(componentManifest.inputs ?? []);\n        const targetInputNode = findMatchingAstNode(target.slot, inputsAst);\n\n        let canAcceptComponent = targetInputNode !== undefined;\n        if (targetInputNode) {\n            const slotInput = targetInputNode.input as SlotInput;\n            const whitelistedComponents = slotInput.components;\n            if (whitelistedComponents && whitelistedComponents.length > 0) {\n                canAcceptComponent = whitelistedComponents.includes(componentName);\n            }\n        }\n        return canAcceptComponent;\n    };\n\n    const onDrop = useCallback(\n        ({ item, target }: DropEvent) => {\n            if (!canDropComponentIntoTarget(editor, item.componentName, target)) {\n                return;\n            }\n\n            if (item.id) {\n                // We're moving an existing element.\n                editor.executeCommand(Commands.MoveElement, {\n                    elementId: item.id,\n                    parentId: target.parentId,\n                    slot: target.slot,\n                    index: target.index\n                });\n            } else {\n                // We're creating a new element.\n                editor.executeCommand(Commands.CreateElement, {\n                    componentName: item.componentName,\n                    parentId: target.parentId,\n                    slot: target.slot,\n                    index: target.index\n                });\n            }\n        },\n        [editor]\n    );\n\n    const viewportContainer: React.CSSProperties = {\n        display: \"block\",\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        width: \"100%\",\n        height: \"100%\",\n        pointerEvents: isDragging ? \"auto\" : \"none\"\n    };\n\n    const slots = boxes.preview.filter(filterSlots);\n\n    return (\n        <OverlayContainer ref={mergeRefs(dropRef)} style={viewportContainer}>\n            {boxes.preview.filter(filterElements).map(box => (\n                <Fragment key={box.id}>\n                    <ElementOverlay\n                        elementId={box.id}\n                        isSelected={selectedElement === box.id}\n                        isHighlighted={highlightedElement === box.id}\n                        previewBox={box}\n                        editorBox={boxes.editor.get(box.id)!}\n                    />\n                    <ElementDropLines\n                        isFirst={box.parentIndex === 0}\n                        previewBox={box}\n                        editorBox={boxes.editor.get(box.id)!}\n                    />\n                </Fragment>\n            ))}\n            {slots.map(slot => (\n                <DropBox key={slot.id} box={slot} onDrop={onDrop} />\n            ))}\n        </OverlayContainer>\n    );\n});\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAC5D,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,OAAO,QAAQ,WAAW;AAInC,SAASC,+BAA+B,QAAQ,6BAA6B;AAC7E,SAASC,mBAAmB,QAAQ,6BAA6B;AAEjE,SAASC,cAAc;AACvB,SAASC,mBAAmB;AAC5B,SAASC,cAAc;AACvB,SAASC,aAAa;AAGtB,SAASC,iBAAiB;AAC1B,SAASC,gBAAgB;AACzB,SAASC,OAAO;AAChB,SAASC,kBAAkB;AAC3B,SAASC,SAAS;AAClB,SAASC,QAAQ;AAGjB,MAAMC,gBAAgB,gBAAGC,OAAA,CAAO,KAAK,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,QAAA,EAAAC;AAAA,CAIrC,CAAC;AAEF,MAAMC,cAAc,GAAIC,GAAQ,IAAK;EACjC,OAAOA,GAAG,CAACC,IAAI,KAAK,SAAS,IAAID,GAAG,CAACE,EAAE,KAAK,MAAM;AACtD,CAAC;AAED,MAAMC,WAAW,GAAIH,GAAQ,IAAK;EAC9B,OAAOA,GAAG,CAACC,IAAI,KAAK,cAAc;AACtC,CAAC;AAED,OAAO,MAAMG,eAAe,GAAG9B,QAAQ,CAAC,MAAM;EAC1C,MAAM+B,eAAe,GAAGpB,kBAAkB,CAAC,CAAC;EAC5C,MAAMqB,MAAM,GAAGxB,iBAAiB,CAAC,CAAC;EAClC,MAAM;IAAEyB;EAAM,CAAC,GAAG7B,cAAc,CAAC,CAAC;EAClC,MAAM8B,UAAU,GAAG3B,aAAa,CAAC,CAAC;EAClC,MAAM;IAAE4B,eAAe;IAAEC;EAAmB,CAAC,GAAG/B,mBAAmB,CAACgC,KAAK,IAAI;IACzE,OAAO;MACHF,eAAe,EAAEE,KAAK,CAACF,eAAe;MACtCC,kBAAkB,EAAEC,KAAK,CAACD;IAC9B,CAAC;EACL,CAAC,CAAC;EAEF,MAAME,OAAO,GAAGvC,MAAM,CAAqB,IAAI,CAAC;EAEhD,MAAM,GAAGwC,IAAI,CAAC,GAAGtC,OAAO,CAAC,OAAO;IAC5BuC,MAAM,EAAE,SAAS;IACjBD,IAAI,EAAGE,IAAS,IAAK;MACjB,MAAMtB,MAAM,GAAGY,eAAe,CAACW,sBAAsB,CAAC,CAAC;MACvD,IAAIvB,MAAM,EAAE;QACRwB,MAAM,CAAC;UAAEF,IAAI;UAAEtB;QAAO,CAAC,CAAC;MAC5B;IACJ;EACJ,CAAC,CAAC,CAAC;EAEHoB,IAAI,CAACD,OAAO,CAAC;EAEb,MAAMM,0BAA0B,GAAGA,CAC/BZ,MAAc,EACda,aAAqB,EACrB1B,MAA2B,KAC1B;IACD;IACA,MAAM2B,QAAQ,GAAGd,MAAM,CAACe,gBAAgB,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC;IACjD,MAAM;MAAEC;IAAU,CAAC,GAAGH,QAAQ,CAACI,QAAQ,CAAC/B,MAAM,CAACgC,QAAQ,CAAC;IACxD,MAAMC,iBAAiB,GAAGpB,MAAM,CAACqB,cAAc,CAAC,CAAC,CAACL,IAAI,CAAC,CAAC,CAACM,UAAU,CAACL,SAAS,CAAC5B,IAAI,CAAC;;IAEnF;IACA,MAAMkC,SAAS,GAAGrD,+BAA+B,CAACsD,OAAO,CAACJ,iBAAiB,CAACK,MAAM,IAAI,EAAE,CAAC;IACzF,MAAMC,eAAe,GAAGvD,mBAAmB,CAACgB,MAAM,CAACwC,IAAI,EAAEJ,SAAS,CAAC;IAEnE,IAAIK,kBAAkB,GAAGF,eAAe,KAAKG,SAAS;IACtD,IAAIH,eAAe,EAAE;MACjB,MAAMI,SAAS,GAAGJ,eAAe,CAACK,KAAkB;MACpD,MAAMC,qBAAqB,GAAGF,SAAS,CAACR,UAAU;MAClD,IAAIU,qBAAqB,IAAIA,qBAAqB,CAACC,MAAM,GAAG,CAAC,EAAE;QAC3DL,kBAAkB,GAAGI,qBAAqB,CAACE,QAAQ,CAACrB,aAAa,CAAC;MACtE;IACJ;IACA,OAAOe,kBAAkB;EAC7B,CAAC;EAED,MAAMjB,MAAM,GAAG7C,WAAW,CACtB,CAAC;IAAE2C,IAAI;IAAEtB;EAAkB,CAAC,KAAK;IAC7B,IAAI,CAACyB,0BAA0B,CAACZ,MAAM,EAAES,IAAI,CAACI,aAAa,EAAE1B,MAAM,CAAC,EAAE;MACjE;IACJ;IAEA,IAAIsB,IAAI,CAACb,EAAE,EAAE;MACT;MACAI,MAAM,CAACmC,cAAc,CAACtD,QAAQ,CAACuD,WAAW,EAAE;QACxCC,SAAS,EAAE5B,IAAI,CAACb,EAAE;QAClBuB,QAAQ,EAAEhC,MAAM,CAACgC,QAAQ;QACzBQ,IAAI,EAAExC,MAAM,CAACwC,IAAI;QACjBW,KAAK,EAAEnD,MAAM,CAACmD;MAClB,CAAC,CAAC;IACN,CAAC,MAAM;MACH;MACAtC,MAAM,CAACmC,cAAc,CAACtD,QAAQ,CAAC0D,aAAa,EAAE;QAC1C1B,aAAa,EAAEJ,IAAI,CAACI,aAAa;QACjCM,QAAQ,EAAEhC,MAAM,CAACgC,QAAQ;QACzBQ,IAAI,EAAExC,MAAM,CAACwC,IAAI;QACjBW,KAAK,EAAEnD,MAAM,CAACmD;MAClB,CAAC,CAAC;IACN;EACJ,CAAC,EACD,CAACtC,MAAM,CACX,CAAC;EAED,MAAMwC,iBAAsC,GAAG;IAC3CC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,aAAa,EAAE7C,UAAU,GAAG,MAAM,GAAG;EACzC,CAAC;EAED,MAAM8C,KAAK,GAAG/C,KAAK,CAACgD,OAAO,CAACC,MAAM,CAACrD,WAAW,CAAC;EAE/C,oBACIjC,KAAA,CAAAuF,aAAA,CAACrE,gBAAgB;IAACsE,GAAG,EAAExE,SAAS,CAAC0B,OAAO,CAAE;IAAC+C,KAAK,EAAEb;EAAkB,GAC/DvC,KAAK,CAACgD,OAAO,CAACC,MAAM,CAACzD,cAAc,CAAC,CAAC6D,GAAG,CAAC5D,GAAG,iBACzC9B,KAAA,CAAAuF,aAAA,CAACtF,QAAQ;IAAC0F,GAAG,EAAE7D,GAAG,CAACE;EAAG,gBAClBhC,KAAA,CAAAuF,aAAA,CAAC7E,cAAc;IACX+D,SAAS,EAAE3C,GAAG,CAACE,EAAG;IAClB4D,UAAU,EAAErD,eAAe,KAAKT,GAAG,CAACE,EAAG;IACvC6D,aAAa,EAAErD,kBAAkB,KAAKV,GAAG,CAACE,EAAG;IAC7C8D,UAAU,EAAEhE,GAAI;IAChBiE,SAAS,EAAE1D,KAAK,CAACD,MAAM,CAAC4D,GAAG,CAAClE,GAAG,CAACE,EAAE;EAAG,CACxC,CAAC,eACFhC,KAAA,CAAAuF,aAAA,CAAC1E,gBAAgB;IACboF,OAAO,EAAEnE,GAAG,CAACoE,WAAW,KAAK,CAAE;IAC/BJ,UAAU,EAAEhE,GAAI;IAChBiE,SAAS,EAAE1D,KAAK,CAACD,MAAM,CAAC4D,GAAG,CAAClE,GAAG,CAACE,EAAE;EAAG,CACxC,CACK,CACb,CAAC,EACDoD,KAAK,CAACM,GAAG,CAAC3B,IAAI,iBACX/D,KAAA,CAAAuF,aAAA,CAACzE,OAAO;IAAC6E,GAAG,EAAE5B,IAAI,CAAC/B,EAAG;IAACF,GAAG,EAAEiC,IAAK;IAAChB,MAAM,EAAEA;EAAO,CAAE,CACtD,CACa,CAAC;AAE3B,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useRef","observer","useDrop","ComponentManifestToAstConverter","findMatchingAstNode","usePreviewData","useSelectFromEditor","ElementOverlay","useIsDragging","useDocumentEditor","ElementDropLines","DropBox","useDropZoneManager","mergeRefs","Commands","EditorConfig","ElementOverlayProvider","OverlayContainer","_styled","process","env","NODE_ENV","target","label","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","filterElements","box","type","id","filterSlots","ElementOverlays","dropzoneManager","editor","boxes","isDragging","selectedElement","highlightedElement","state","dropRef","drop","accept","item","getLastMatchedPosition","onDrop","canDropComponentIntoTarget","componentName","document","getDocumentState","read","component","elements","parentId","componentManifest","getEditorState","components","inputsAst","convert","inputs","targetInputNode","slot","canAcceptComponent","undefined","slotInput","input","whitelistedComponents","length","includes","executeCommand","MoveElement","elementId","index","CreateElement","viewportContainer","display","position","top","left","width","height","pointerEvents","slots","preview","filter","createElement","ref","style","map","key","isSelected","isHighlighted","isFirst","parentIndex","previewBox","editorBox","get","Elements"],"sources":["ElementOverlays.tsx"],"sourcesContent":["import React, { useCallback, useRef } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useDrop } from \"react-dnd\";\nimport styled from \"@emotion/styled\";\n\nimport type { SlotInput } from \"@webiny/website-builder-sdk\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { findMatchingAstNode } from \"@webiny/website-builder-sdk\";\n\nimport { usePreviewData } from \"~/BaseEditor/hooks/usePreviewData.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { ElementOverlay } from \"./ElementOverlay.js\";\nimport { useIsDragging } from \"../useIsDragging.js\";\nimport type { Box } from \"../Box.js\";\nimport type { DropEvent } from \"../useProximityDropzone.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { ElementDropLines } from \"./ElementDropLines.js\";\nimport { DropBox } from \"./DropBox.js\";\nimport { useDropZoneManager } from \"../DropZoneManagerProvider.js\";\nimport { mergeRefs } from \"../mergeRefs.js\";\nimport { Commands, EditorConfig } from \"~/BaseEditor/index.js\";\nimport type { Editor } from \"~/editorSdk/Editor.js\";\nimport { ElementOverlayProvider } from \"~/BaseEditor/defaultConfig/Content/Preview/Overlays/ElementOverlayProvider.js\";\n\nconst OverlayContainer = styled(\"div\")({\n    overflow: \"hidden\",\n    position: \"absolute\",\n    zIndex: 20\n});\n\nconst filterElements = (box: Box) => {\n    return box.type === \"element\" && box.id !== \"root\";\n};\n\nconst filterSlots = (box: Box) => {\n    return box.type === \"element-slot\";\n};\n\nexport const ElementOverlays = observer(() => {\n    const dropzoneManager = useDropZoneManager();\n    const editor = useDocumentEditor();\n    const { boxes } = usePreviewData();\n    const isDragging = useIsDragging();\n    const { selectedElement, highlightedElement } = useSelectFromEditor(state => {\n        return {\n            selectedElement: state.selectedElement,\n            highlightedElement: state.highlightedElement\n        };\n    });\n\n    const dropRef = useRef<HTMLElement | null>(null);\n\n    const [, drop] = useDrop(() => ({\n        accept: \"ELEMENT\",\n        drop: (item: any) => {\n            const target = dropzoneManager.getLastMatchedPosition();\n            if (target) {\n                onDrop({ item, target });\n            }\n        }\n    }));\n\n    drop(dropRef);\n\n    const canDropComponentIntoTarget = (\n        editor: Editor,\n        componentName: string,\n        target: DropEvent[\"target\"]\n    ) => {\n        // Determine component manifest from drop target.\n        const document = editor.getDocumentState().read();\n        const { component } = document.elements[target.parentId];\n        const componentManifest = editor.getEditorState().read().components[component.name];\n\n        // Find target input using AST.\n        const inputsAst = ComponentManifestToAstConverter.convert(componentManifest.inputs ?? []);\n        const targetInputNode = findMatchingAstNode(target.slot, inputsAst);\n\n        let canAcceptComponent = targetInputNode !== undefined;\n        if (targetInputNode) {\n            const slotInput = targetInputNode.input as SlotInput;\n            const whitelistedComponents = slotInput.components;\n            if (whitelistedComponents && whitelistedComponents.length > 0) {\n                canAcceptComponent = whitelistedComponents.includes(componentName);\n            }\n        }\n        return canAcceptComponent;\n    };\n\n    const onDrop = useCallback(\n        ({ item, target }: DropEvent) => {\n            if (!canDropComponentIntoTarget(editor, item.componentName, target)) {\n                return;\n            }\n\n            if (item.id) {\n                // We're moving an existing element.\n                editor.executeCommand(Commands.MoveElement, {\n                    elementId: item.id,\n                    parentId: target.parentId,\n                    slot: target.slot,\n                    index: target.index\n                });\n            } else {\n                // We're creating a new element.\n                editor.executeCommand(Commands.CreateElement, {\n                    componentName: item.componentName,\n                    parentId: target.parentId,\n                    slot: target.slot,\n                    index: target.index\n                });\n            }\n        },\n        [editor]\n    );\n\n    const viewportContainer: React.CSSProperties = {\n        display: \"block\",\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        width: \"100%\",\n        height: \"100%\",\n        pointerEvents: isDragging ? \"auto\" : \"none\"\n    };\n\n    const slots = boxes.preview.filter(filterSlots);\n\n    return (\n        <OverlayContainer ref={mergeRefs(dropRef)} style={viewportContainer}>\n            {boxes.preview.filter(filterElements).map(box => (\n                <ElementOverlayProvider\n                    key={box.id}\n                    elementId={box.id}\n                    isSelected={selectedElement === box.id}\n                    isHighlighted={highlightedElement === box.id}\n                    box={box}\n                >\n                    <ElementOverlay />\n                    <ElementDropLines\n                        isFirst={box.parentIndex === 0}\n                        previewBox={box}\n                        editorBox={boxes.editor.get(box.id)!}\n                    />\n                    <EditorConfig.ElementOverlay.Elements />\n                </ElementOverlayProvider>\n            ))}\n            {slots.map(slot => (\n                <DropBox key={slot.id} box={slot} onDrop={onDrop} />\n            ))}\n        </OverlayContainer>\n    );\n});\n"],"mappings":"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","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/Preview.js

@@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { ViewportManager } from "@webiny/website-builder-sdk";
 import { mouseTracker } from "@webiny/website-builder-sdk";
 import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
-import { AddressBar } from "./AddressBar.js";
 import { Iframe } from "./Iframe.js";
 import { DropZoneManager } from "./DropZoneManager.js";
 import { DropZoneManagerProvider } from "./DropZoneManagerProvider.js";
@@ -71,9 +70,9 @@ export const Preview = () => {
   const onConnected = useCallback(messenger => {
     previewEvents.onConnected(messenger);
   }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropZoneManagerProvider, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ApplyTheme, null), /*#__PURE__*/React.createElement(DropZoneManagerProvider, {
     dropzoneManager: dropzoneManager
-  }, /*#__PURE__*/React.createElement(ApplyTheme, null), /*#__PURE__*/React.createElement(AddressBar, null), /*#__PURE__*/React.createElement(AwaitIframeUrl, null, ({
+  }, /*#__PURE__*/React.createElement(AwaitIframeUrl, null, ({
     url
   }) => /*#__PURE__*/React.createElement(Iframe, {
     url: url,

package/BaseEditor/defaultConfig/Content/Preview/Preview.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useMemo","useState","ViewportManager","mouseTracker","useDocumentEditor","AddressBar","Iframe","DropZoneManager","DropZoneManagerProvider","KeyboardShortcuts","Commands","useSelectFromEditor","AwaitIframeUrl","PreviewEvents","ApplyTheme","Preview","editor","iframeTimestamp","setIframeTimestamp","Date","now","loadingPreview","state","viewportManager","previewEvents","dropzoneManager","updateEditor","offRefreshPreview","registerCommandHandler","RefreshPreview","boxes","preview","start","stop","destroy","setMousePositionFromDrag","e","setPosition","clientX","clientY","window","addEventListener","removeEventListener","onConnected","messenger","createElement","Fragment","url","timestamp","showLoading"],"sources":["Preview.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type { Messenger } from \"@webiny/website-builder-sdk\";\nimport { ViewportManager } from \"@webiny/website-builder-sdk\";\nimport { mouseTracker } from \"@webiny/website-builder-sdk\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { AddressBar } from \"./AddressBar.js\";\nimport { Iframe } from \"./Iframe.js\";\nimport { DropZoneManager } from \"./DropZoneManager.js\";\nimport { DropZoneManagerProvider } from \"./DropZoneManagerProvider.js\";\nimport { KeyboardShortcuts } from \"./KeyboardShortcuts.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { AwaitIframeUrl } from \"~/BaseEditor/defaultConfig/Content/Preview/AwaitIframeUrl.js\";\nimport { PreviewEvents } from \"~/BaseEditor/defaultConfig/Content/Preview/PreviewEvents.js\";\nimport { ApplyTheme } from \"./ApplyTheme.js\";\n\nexport const Preview = () => {\n    const editor = useDocumentEditor();\n    const [iframeTimestamp, setIframeTimestamp] = useState(Date.now());\n\n    const loadingPreview = useSelectFromEditor(state => state.loadingPreview);\n\n    const viewportManager = useMemo(() => {\n        return new ViewportManager();\n    }, []);\n\n    const previewEvents = useMemo(() => {\n        return new PreviewEvents(editor);\n    }, []);\n\n    const dropzoneManager = useMemo(() => {\n        return new DropZoneManager(mouseTracker);\n    }, [mouseTracker]);\n\n    useEffect(() => {\n        // On first mount, show loading.\n        editor.updateEditor(state => {\n            state.loadingPreview = true;\n        });\n\n        const offRefreshPreview = editor.registerCommandHandler(Commands.RefreshPreview, () => {\n            setIframeTimestamp(Date.now());\n\n            editor.updateEditor(state => {\n                // Unset boxes to remove old overlays.\n                state.loadingPreview = true;\n                state.boxes = {\n                    preview: {},\n                    editor: {}\n                };\n            });\n        });\n\n        return () => {\n            offRefreshPreview();\n        };\n    }, []);\n\n    // Start various trackers\n    useEffect(() => {\n        mouseTracker.start();\n        dropzoneManager.start();\n\n        return () => {\n            dropzoneManager.stop();\n            mouseTracker.stop();\n            viewportManager.destroy();\n            previewEvents.destroy();\n        };\n    }, [dropzoneManager, mouseTracker]);\n\n    // Update mouse position while dragging\n    useEffect(() => {\n        const setMousePositionFromDrag = (e: DragEvent) => {\n            mouseTracker.setPosition(e.clientX, e.clientY);\n        };\n\n        window.addEventListener(\"dragover\", setMousePositionFromDrag);\n\n        return () => {\n            window.removeEventListener(\"dragover\", setMousePositionFromDrag);\n        };\n    }, []);\n\n    const onConnected = useCallback((messenger: Messenger) => {\n        previewEvents.onConnected(messenger);\n    }, []);\n\n    return (\n        <>\n            <DropZoneManagerProvider dropzoneManager={dropzoneManager}>\n                <ApplyTheme />\n                <AddressBar />\n                <AwaitIframeUrl>\n                    {({ url }) => (\n                        <Iframe\n                            url={url}\n                            timestamp={iframeTimestamp}\n                            viewportManager={viewportManager}\n                            onConnected={onConnected}\n                            showLoading={loadingPreview}\n                        />\n                    )}\n                </AwaitIframeUrl>\n            </DropZoneManagerProvider>\n            <KeyboardShortcuts />\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useEffect","useMemo","useState","ViewportManager","mouseTracker","useDocumentEditor","Iframe","DropZoneManager","DropZoneManagerProvider","KeyboardShortcuts","Commands","useSelectFromEditor","AwaitIframeUrl","PreviewEvents","ApplyTheme","Preview","editor","iframeTimestamp","setIframeTimestamp","Date","now","loadingPreview","state","viewportManager","previewEvents","dropzoneManager","updateEditor","offRefreshPreview","registerCommandHandler","RefreshPreview","boxes","preview","start","stop","destroy","setMousePositionFromDrag","e","setPosition","clientX","clientY","window","addEventListener","removeEventListener","onConnected","messenger","createElement","Fragment","url","timestamp","showLoading"],"sources":["Preview.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type { Messenger } from \"@webiny/website-builder-sdk\";\nimport { ViewportManager } from \"@webiny/website-builder-sdk\";\nimport { mouseTracker } from \"@webiny/website-builder-sdk\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Iframe } from \"./Iframe.js\";\nimport { DropZoneManager } from \"./DropZoneManager.js\";\nimport { DropZoneManagerProvider } from \"./DropZoneManagerProvider.js\";\nimport { KeyboardShortcuts } from \"./KeyboardShortcuts.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { AwaitIframeUrl } from \"~/BaseEditor/defaultConfig/Content/Preview/AwaitIframeUrl.js\";\nimport { PreviewEvents } from \"~/BaseEditor/defaultConfig/Content/Preview/PreviewEvents.js\";\nimport { ApplyTheme } from \"./ApplyTheme.js\";\n\nexport const Preview = () => {\n    const editor = useDocumentEditor();\n    const [iframeTimestamp, setIframeTimestamp] = useState(Date.now());\n\n    const loadingPreview = useSelectFromEditor(state => state.loadingPreview);\n\n    const viewportManager = useMemo(() => {\n        return new ViewportManager();\n    }, []);\n\n    const previewEvents = useMemo(() => {\n        return new PreviewEvents(editor);\n    }, []);\n\n    const dropzoneManager = useMemo(() => {\n        return new DropZoneManager(mouseTracker);\n    }, [mouseTracker]);\n\n    useEffect(() => {\n        // On first mount, show loading.\n        editor.updateEditor(state => {\n            state.loadingPreview = true;\n        });\n\n        const offRefreshPreview = editor.registerCommandHandler(Commands.RefreshPreview, () => {\n            setIframeTimestamp(Date.now());\n\n            editor.updateEditor(state => {\n                // Unset boxes to remove old overlays.\n                state.loadingPreview = true;\n                state.boxes = {\n                    preview: {},\n                    editor: {}\n                };\n            });\n        });\n\n        return () => {\n            offRefreshPreview();\n        };\n    }, []);\n\n    // Start various trackers\n    useEffect(() => {\n        mouseTracker.start();\n        dropzoneManager.start();\n\n        return () => {\n            dropzoneManager.stop();\n            mouseTracker.stop();\n            viewportManager.destroy();\n            previewEvents.destroy();\n        };\n    }, [dropzoneManager, mouseTracker]);\n\n    // Update mouse position while dragging\n    useEffect(() => {\n        const setMousePositionFromDrag = (e: DragEvent) => {\n            mouseTracker.setPosition(e.clientX, e.clientY);\n        };\n\n        window.addEventListener(\"dragover\", setMousePositionFromDrag);\n\n        return () => {\n            window.removeEventListener(\"dragover\", setMousePositionFromDrag);\n        };\n    }, []);\n\n    const onConnected = useCallback((messenger: Messenger) => {\n        previewEvents.onConnected(messenger);\n    }, []);\n\n    return (\n        <>\n            <ApplyTheme />\n            <DropZoneManagerProvider dropzoneManager={dropzoneManager}>\n                <AwaitIframeUrl>\n                    {({ url }) => (\n                        <Iframe\n                            url={url}\n                            timestamp={iframeTimestamp}\n                            viewportManager={viewportManager}\n                            onConnected={onConnected}\n                            showLoading={loadingPreview}\n                        />\n                    )}\n                </AwaitIframeUrl>\n            </DropZoneManagerProvider>\n            <KeyboardShortcuts />\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/PreviewContainer.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface PreviewContainerProps {
+    children: React.ReactNode;
+}
+export declare const PreviewContainer: ({ children }: PreviewContainerProps) => React.JSX.Element;
+export {};

package/BaseEditor/defaultConfig/Content/Preview/PreviewContainer.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor.js";
+export const PreviewContainer = ({
+  children
+}) => {
+  const uiHeight = useSelectFromEditor(state => state.uiReservedSpace.height);
+  return /*#__PURE__*/React.createElement("div", {
+    id: "preview-container",
+    style: {
+      height: `calc(100vh - ${uiHeight}px)`
+    },
+    className: "fill-grid relative flex flex-col items-center w-full overflow-auto"
+  }, children);
+};
+
+//# sourceMappingURL=PreviewContainer.js.map

package/BaseEditor/defaultConfig/Content/Preview/PreviewContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useSelectFromEditor","PreviewContainer","children","uiHeight","state","uiReservedSpace","height","createElement","id","style","className"],"sources":["PreviewContainer.tsx"],"sourcesContent":["import React from \"react\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\n\ninterface PreviewContainerProps {\n    children: React.ReactNode;\n}\n\nexport const PreviewContainer = ({ children }: PreviewContainerProps) => {\n    const uiHeight = useSelectFromEditor(state => state.uiReservedSpace.height);\n\n    return (\n        <div\n            id={\"preview-container\"}\n            style={{ height: `calc(100vh - ${uiHeight}px)` }}\n            className={\"fill-grid relative flex flex-col items-center w-full overflow-auto\"}\n        >\n            {children}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB;AAM5B,OAAO,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC;AAAgC,CAAC,KAAK;EACrE,MAAMC,QAAQ,GAAGH,mBAAmB,CAACI,KAAK,IAAIA,KAAK,CAACC,eAAe,CAACC,MAAM,CAAC;EAE3E,oBACIP,KAAA,CAAAQ,aAAA;IACIC,EAAE,EAAE,mBAAoB;IACxBC,KAAK,EAAE;MAAEH,MAAM,EAAE,gBAAgBH,QAAQ;IAAM,CAAE;IACjDO,SAAS,EAAE;EAAqE,GAE/ER,QACA,CAAC;AAEd,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/PreviewEvents.js

@@ -1,7 +1,14 @@
-import { mouseTracker } from "@webiny/website-builder-sdk";
+import { functionConverter, mouseTracker } from "@webiny/website-builder-sdk";
 import defaultImage from "@webiny/icons/extension.svg";
 import { Commands } from "../../../index.js";
 import { $createElement } from "../../../../editorSdk/utils/index.js";
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+function deserializeHandlers(value) {
+  if (Array.isArray(value)) {
+    return value.map(s => functionConverter.deserialize(s));
+  }
+  return functionConverter.deserialize(value);
+}
 export class PreviewEvents {
   editorEventsRegistered = false;
   listeners = [];
@@ -43,6 +50,13 @@ export class PreviewEvents {
     // Element preview
     this.editor.registerCommandHandler(Commands.PreviewPatchElement, payload => {
       this.getMessenger().send(`element.patch.${payload.elementId}`, payload.patch);
+    }),
+    // Forward arbitrary messages to the preview iframe.
+    this.editor.registerCommandHandler(Commands.SendPreviewMessage, ({
+      type,
+      payload
+    }) => {
+      this.getMessenger().send(type, payload);
     }));
   }
   subscribeToIframe(messenger) {
@@ -97,6 +111,7 @@ export class PreviewEvents {
       const iframeBox = this.getIframeBox();
       this.editor.updateEditor(state => {
         state.viewport = {
+          ...state.viewport,
           ...viewport,
           top: iframeBox.top,
           left: iframeBox.left
@@ -108,6 +123,26 @@ export class PreviewEvents {
       });
     });
     messenger.on("preview.component.register", component => {
+      // Deserialize constraint check functions once on arrival.
+      try {
+        if (component.constraints) {
+          component.constraints = component.constraints.map(c => typeof c === "string" ? functionConverter.deserialize(c) : c);
+        }
+        if (component.descendantConstraints) {
+          component.descendantConstraints = component.descendantConstraints.map(c => typeof c === "string" ? functionConverter.deserialize(c) : c);
+        }
+        if (component.canDelete && typeof component.canDelete === "string") {
+          component.canDelete = functionConverter.deserialize(component.canDelete);
+        }
+        if (component.onChange) {
+          component.onChange = deserializeHandlers(component.onChange);
+        }
+        if (component.onDescendantChange) {
+          component.onDescendantChange = deserializeHandlers(component.onDescendantChange);
+        }
+      } catch (e) {
+        console.log(`Couldn't deserialize ${component.name} component callbacks:`, e.message);
+      }
       this.editor.updateEditor(state => {
         if (!state.components) {
           state.components = {};

package/BaseEditor/defaultConfig/Content/Preview/PreviewEvents.js.map

@@ -1 +1 @@
-{"version":3,"names":["mouseTracker","defaultImage","Commands","$createElement","PreviewEvents","editorEventsRegistered","listeners","constructor","editor","onConnected","messenger","dispose","registerEditorEvents","subscribeToIframe","setTimeout","updateEditor","state","loadingPreview","selectedElement","destroy","forEach","unsubscribe","push","onDocumentStateChange","event","reason","getMessenger","send","diff","registerCommandHandler","PreviewPatchElement","payload","elementId","patch","getDocumentState","toJson","on","theme","executeCommand","SetTheme","fragments","document","read","Object","keys","elements","length","fragment","index","type","componentName","parentId","slot","bindings","inputs","name","component","boxes","viewport","iframeBox","getIframeBox","top","left","preview","mapCoordinatesToEditorSpace","components","image","tags","group","componentGroups","id","x","y","globalX","globalY","setPosition","previewContainer","getElementById","previewBody","width","height","containerRect","getBoundingClientRect","bodyRect","newBoxes","key","box"],"sources":["PreviewEvents.ts"],"sourcesContent":["import type { Messenger } from \"@webiny/website-builder-sdk\";\nimport {\n    type BoxesData,\n    type ComponentManifest,\n    type EditorViewportInfo,\n    mouseTracker,\n    type PreviewViewportData,\n    type SerializedComponentGroup\n} from \"@webiny/website-builder-sdk\";\nimport defaultImage from \"@webiny/icons/extension.svg\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport type { Editor } from \"~/editorSdk/Editor.js\";\nimport { $createElement } from \"~/editorSdk/utils/index.js\";\n\ntype FragmentConfig =\n    | {\n          type: \"fixed\";\n          name: string;\n          element: React.ReactNode;\n      }\n    | { type: \"component\"; component: string; inputs: Record<string, any> };\n\nexport class PreviewEvents {\n    private editor: Editor;\n    private editorEventsRegistered = false;\n    private messenger: Messenger | undefined;\n    private listeners: Array<() => void> = [];\n\n    constructor(editor: Editor) {\n        this.editor = editor;\n    }\n\n    onConnected(messenger: Messenger) {\n        // Dispose of the old messenger.\n        this.messenger?.dispose();\n\n        this.messenger = messenger;\n\n        this.registerEditorEvents();\n\n        this.subscribeToIframe(messenger);\n\n        setTimeout(() => {\n            this.editor.updateEditor(state => {\n                state.loadingPreview = false;\n                state.selectedElement = null;\n            });\n        }, 100);\n    }\n\n    destroy() {\n        this.listeners.forEach(unsubscribe => {\n            unsubscribe();\n        });\n    }\n\n    private registerEditorEvents() {\n        if (this.editorEventsRegistered) {\n            return;\n        }\n\n        this.editorEventsRegistered = true;\n\n        this.listeners.push(\n            // Propagate changes\n            this.editor.onDocumentStateChange(event => {\n                if (event.reason === \"update\") {\n                    this.getMessenger().send(\"document.patch\", event.diff);\n                } else {\n                    this.getMessenger().send(\"document.set\", event.state);\n                }\n            }),\n\n            // Element preview\n            this.editor.registerCommandHandler(Commands.PreviewPatchElement, payload => {\n                this.getMessenger().send(`element.patch.${payload.elementId}`, payload.patch);\n            })\n        );\n    }\n\n    private subscribeToIframe(messenger: Messenger) {\n        // When `onConnected` is executed, we need to send new data to the live preview.\n        messenger.send(\"document.set\", this.editor.getDocumentState().toJson());\n\n        messenger.on(\"preview.theme\", ({ theme }) => {\n            this.editor.executeCommand(Commands.SetTheme, { theme });\n        });\n\n        messenger.on(\"document.fragments\", payload => {\n            const fragments: FragmentConfig[] = payload.fragments;\n            this.editor.updateEditor(state => {\n                state.fragments = fragments;\n            });\n\n            const document = this.editor.getDocumentState().read();\n\n            if (Object.keys(document.elements).length === 1) {\n                // We only have the default \"root\" element, create fragment elements.\n                fragments.forEach((fragment, index) => {\n                    if (fragment.type === \"fixed\") {\n                        $createElement(this.editor, {\n                            componentName: \"Webiny/Fragment\",\n                            parentId: \"root\",\n                            slot: \"children\",\n                            index,\n                            bindings: {\n                                inputs: {\n                                    name: fragment.name\n                                }\n                            }\n                        });\n                        return;\n                    }\n\n                    $createElement(this.editor, {\n                        componentName: fragment.component,\n                        parentId: \"root\",\n                        slot: \"children\",\n                        index,\n                        bindings: {\n                            inputs: fragment.inputs\n                        }\n                    });\n                });\n            }\n        });\n\n        messenger.on(\"preview.viewport\", ({ boxes, viewport }: PreviewViewportData) => {\n            const iframeBox = this.getIframeBox();\n\n            this.editor.updateEditor(state => {\n                state.viewport = {\n                    ...viewport,\n                    top: iframeBox.top,\n                    left: iframeBox.left\n                };\n\n                state.boxes = {\n                    preview: boxes,\n                    editor: this.mapCoordinatesToEditorSpace(state.viewport, boxes)\n                };\n            });\n        });\n\n        messenger.on(\"preview.component.register\", (component: ComponentManifest) => {\n            this.editor.updateEditor(state => {\n                if (!state.components) {\n                    state.components = {};\n                }\n                state.components[component.name] = {\n                    ...component,\n                    image: component.image ?? defaultImage,\n                    tags: component.tags ?? []\n                };\n            });\n        });\n\n        messenger.on(\"preview.componentGroup.register\", (group: SerializedComponentGroup) => {\n            this.editor.updateEditor(state => {\n                if (!state.componentGroups) {\n                    state.componentGroups = {};\n                }\n                state.componentGroups[group.name] = group;\n            });\n        });\n\n        messenger.on(\"preview.element.click\", ({ id }) => {\n            this.editor.updateEditor(state => {\n                state.selectedElement = id;\n            });\n        });\n\n        messenger.on(\"preview.mouse.move\", ({ x, y }) => {\n            const iframeBox = this.getIframeBox();\n            const globalX = x + iframeBox.left;\n            const globalY = y + iframeBox.top;\n\n            mouseTracker.setPosition(globalX, globalY);\n        });\n    }\n\n    private getIframeBox() {\n        const previewContainer = document.getElementById(\"preview-container\");\n        const previewBody = document.getElementById(\"preview-body\");\n\n        if (!previewContainer || !previewBody) {\n            return {\n                top: 0,\n                left: 0,\n                width: 0,\n                height: 0\n            };\n        }\n\n        /**\n         * We need to use the `preview-container` to get the exact position from the top (we MUST ignore scroll position).\n         * However, for everything else we use the actual `preview-body`,\n         */\n        const containerRect = previewContainer.getBoundingClientRect();\n        const bodyRect = previewBody.getBoundingClientRect();\n\n        return {\n            top: containerRect.top,\n            left: bodyRect.left,\n            width: bodyRect.width,\n            height: bodyRect.height\n        };\n    }\n\n    private mapCoordinatesToEditorSpace(\n        viewport: EditorViewportInfo,\n        boxes: PreviewViewportData[\"boxes\"]\n    ) {\n        const newBoxes: BoxesData = {};\n\n        for (const key in boxes) {\n            const box = boxes[key];\n            newBoxes[key] = {\n                ...box,\n                top: box.top + viewport.top,\n                left: box.left + viewport.left\n            };\n        }\n\n        return newBoxes;\n    }\n\n    private getMessenger(): Messenger {\n        return this.messenger!;\n    }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["functionConverter","mouseTracker","defaultImage","Commands","$createElement","deserializeHandlers","value","Array","isArray","map","s","deserialize","PreviewEvents","editorEventsRegistered","listeners","constructor","editor","onConnected","messenger","dispose","registerEditorEvents","subscribeToIframe","setTimeout","updateEditor","state","loadingPreview","selectedElement","destroy","forEach","unsubscribe","push","onDocumentStateChange","event","reason","getMessenger","send","diff","registerCommandHandler","PreviewPatchElement","payload","elementId","patch","SendPreviewMessage","type","getDocumentState","toJson","on","theme","executeCommand","SetTheme","fragments","document","read","Object","keys","elements","length","fragment","index","componentName","parentId","slot","bindings","inputs","name","component","boxes","viewport","iframeBox","getIframeBox","top","left","preview","mapCoordinatesToEditorSpace","constraints","c","descendantConstraints","canDelete","onChange","onDescendantChange","e","console","log","message","components","image","tags","group","componentGroups","id","x","y","globalX","globalY","setPosition","previewContainer","getElementById","previewBody","width","height","containerRect","getBoundingClientRect","bodyRect","newBoxes","key","box"],"sources":["PreviewEvents.ts"],"sourcesContent":["import type { Messenger } from \"@webiny/website-builder-sdk\";\nimport {\n    type BoxesData,\n    type ComponentManifest,\n    type EditorViewportInfo,\n    functionConverter,\n    mouseTracker,\n    type PreviewViewportData,\n    type SerializedComponentGroup\n} from \"@webiny/website-builder-sdk\";\nimport defaultImage from \"@webiny/icons/extension.svg\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport type { Editor } from \"~/editorSdk/Editor.js\";\nimport { $createElement } from \"~/editorSdk/utils/index.js\";\n\ntype FragmentConfig =\n    | {\n          type: \"fixed\";\n          name: string;\n          element: React.ReactNode;\n      }\n    | { type: \"component\"; component: string; inputs: Record<string, any> };\n\n// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type\nfunction deserializeHandlers(value: string | string[]): Function | Function[] {\n    if (Array.isArray(value)) {\n        return value.map(s => functionConverter.deserialize(s));\n    }\n    return functionConverter.deserialize(value);\n}\n\nexport class PreviewEvents {\n    private editor: Editor;\n    private editorEventsRegistered = false;\n    private messenger: Messenger | undefined;\n    private listeners: Array<() => void> = [];\n\n    constructor(editor: Editor) {\n        this.editor = editor;\n    }\n\n    onConnected(messenger: Messenger) {\n        // Dispose of the old messenger.\n        this.messenger?.dispose();\n\n        this.messenger = messenger;\n\n        this.registerEditorEvents();\n\n        this.subscribeToIframe(messenger);\n\n        setTimeout(() => {\n            this.editor.updateEditor(state => {\n                state.loadingPreview = false;\n                state.selectedElement = null;\n            });\n        }, 100);\n    }\n\n    destroy() {\n        this.listeners.forEach(unsubscribe => {\n            unsubscribe();\n        });\n    }\n\n    private registerEditorEvents() {\n        if (this.editorEventsRegistered) {\n            return;\n        }\n\n        this.editorEventsRegistered = true;\n\n        this.listeners.push(\n            // Propagate changes\n            this.editor.onDocumentStateChange(event => {\n                if (event.reason === \"update\") {\n                    this.getMessenger().send(\"document.patch\", event.diff);\n                } else {\n                    this.getMessenger().send(\"document.set\", event.state);\n                }\n            }),\n\n            // Element preview\n            this.editor.registerCommandHandler(Commands.PreviewPatchElement, payload => {\n                this.getMessenger().send(`element.patch.${payload.elementId}`, payload.patch);\n            }),\n\n            // Forward arbitrary messages to the preview iframe.\n            this.editor.registerCommandHandler(Commands.SendPreviewMessage, ({ type, payload }) => {\n                this.getMessenger().send(type, payload);\n            })\n        );\n    }\n\n    private subscribeToIframe(messenger: Messenger) {\n        // When `onConnected` is executed, we need to send new data to the live preview.\n        messenger.send(\"document.set\", this.editor.getDocumentState().toJson());\n\n        messenger.on(\"preview.theme\", ({ theme }) => {\n            this.editor.executeCommand(Commands.SetTheme, { theme });\n        });\n\n        messenger.on(\"document.fragments\", payload => {\n            const fragments: FragmentConfig[] = payload.fragments;\n            this.editor.updateEditor(state => {\n                state.fragments = fragments;\n            });\n\n            const document = this.editor.getDocumentState().read();\n\n            if (Object.keys(document.elements).length === 1) {\n                // We only have the default \"root\" element, create fragment elements.\n                fragments.forEach((fragment, index) => {\n                    if (fragment.type === \"fixed\") {\n                        $createElement(this.editor, {\n                            componentName: \"Webiny/Fragment\",\n                            parentId: \"root\",\n                            slot: \"children\",\n                            index,\n                            bindings: {\n                                inputs: {\n                                    name: fragment.name\n                                }\n                            }\n                        });\n                        return;\n                    }\n\n                    $createElement(this.editor, {\n                        componentName: fragment.component,\n                        parentId: \"root\",\n                        slot: \"children\",\n                        index,\n                        bindings: {\n                            inputs: fragment.inputs\n                        }\n                    });\n                });\n            }\n        });\n\n        messenger.on(\"preview.viewport\", ({ boxes, viewport }: PreviewViewportData) => {\n            const iframeBox = this.getIframeBox();\n\n            this.editor.updateEditor(state => {\n                state.viewport = {\n                    ...state.viewport,\n                    ...viewport,\n                    top: iframeBox.top,\n                    left: iframeBox.left\n                };\n\n                state.boxes = {\n                    preview: boxes,\n                    editor: this.mapCoordinatesToEditorSpace(state.viewport, boxes)\n                };\n            });\n        });\n\n        messenger.on(\"preview.component.register\", (component: ComponentManifest) => {\n            // Deserialize constraint check functions once on arrival.\n            try {\n                if (component.constraints) {\n                    component.constraints = (component.constraints as any[]).map(c =>\n                        typeof c === \"string\" ? functionConverter.deserialize(c) : c\n                    );\n                }\n                if (component.descendantConstraints) {\n                    component.descendantConstraints = (\n                        component.descendantConstraints as any[]\n                    ).map(c => (typeof c === \"string\" ? functionConverter.deserialize(c) : c));\n                }\n                if (component.canDelete && typeof component.canDelete === \"string\") {\n                    component.canDelete = functionConverter.deserialize(component.canDelete);\n                }\n                if (component.onChange) {\n                    component.onChange = deserializeHandlers(component.onChange as any) as any;\n                }\n                if (component.onDescendantChange) {\n                    component.onDescendantChange = deserializeHandlers(\n                        component.onDescendantChange as any\n                    ) as any;\n                }\n            } catch (e) {\n                console.log(\n                    `Couldn't deserialize ${component.name} component callbacks:`,\n                    e.message\n                );\n            }\n\n            this.editor.updateEditor(state => {\n                if (!state.components) {\n                    state.components = {};\n                }\n                state.components[component.name] = {\n                    ...component,\n                    image: component.image ?? defaultImage,\n                    tags: component.tags ?? []\n                };\n            });\n        });\n\n        messenger.on(\"preview.componentGroup.register\", (group: SerializedComponentGroup) => {\n            this.editor.updateEditor(state => {\n                if (!state.componentGroups) {\n                    state.componentGroups = {};\n                }\n                state.componentGroups[group.name] = group;\n            });\n        });\n\n        messenger.on(\"preview.element.click\", ({ id }) => {\n            this.editor.updateEditor(state => {\n                state.selectedElement = id;\n            });\n        });\n\n        messenger.on(\"preview.mouse.move\", ({ x, y }) => {\n            const iframeBox = this.getIframeBox();\n            const globalX = x + iframeBox.left;\n            const globalY = y + iframeBox.top;\n\n            mouseTracker.setPosition(globalX, globalY);\n        });\n    }\n\n    private getIframeBox() {\n        const previewContainer = document.getElementById(\"preview-container\");\n        const previewBody = document.getElementById(\"preview-body\");\n\n        if (!previewContainer || !previewBody) {\n            return {\n                top: 0,\n                left: 0,\n                width: 0,\n                height: 0\n            };\n        }\n\n        /**\n         * We need to use the `preview-container` to get the exact position from the top (we MUST ignore scroll position).\n         * However, for everything else we use the actual `preview-body`,\n         */\n        const containerRect = previewContainer.getBoundingClientRect();\n        const bodyRect = previewBody.getBoundingClientRect();\n\n        return {\n            top: containerRect.top,\n            left: bodyRect.left,\n            width: bodyRect.width,\n            height: bodyRect.height\n        };\n    }\n\n    private mapCoordinatesToEditorSpace(\n        viewport: EditorViewportInfo,\n        boxes: PreviewViewportData[\"boxes\"]\n    ) {\n        const newBoxes: BoxesData = {};\n\n        for (const key in boxes) {\n            const box = boxes[key];\n            newBoxes[key] = {\n                ...box,\n                top: box.top + viewport.top,\n                left: box.left + viewport.left\n            };\n        }\n\n        return newBoxes;\n    }\n\n    private getMessenger(): Messenger {\n        return this.messenger!;\n    }\n}\n"],"mappings":"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","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.d.ts

@@ -1 +1 @@
-export declare const useElementComponentManifest: (elementId: string) => import("@webiny/website-builder-sdk/types").ComponentManifest | undefined;
+export declare const useElementComponentManifest: (elementId: string) => import("@webiny/website-builder-sdk/types").ComponentManifest;

package/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.js

@@ -1,11 +1,12 @@
-import { useMemo } from "react";
 import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
-import { $getComponentManifestByElementId } from "../../../../editorSdk/utils/index.js";
+import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor.js";
 export const useElementComponentManifest = elementId => {
   const editor = useDocumentEditor();
-  return useMemo(() => {
-    return $getComponentManifestByElementId(editor, elementId ?? "");
-  }, [elementId]);
+  const document = editor.getDocumentState().read();
+  const componentName = document.elements[elementId]?.component.name;
+  return useSelectFromEditor(state => {
+    return state.components[componentName];
+  }, [componentName]);
 };
 
 //# sourceMappingURL=useElementComponentManifest.js.map

package/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","useDocumentEditor","$getComponentManifestByElementId","useElementComponentManifest","elementId","editor"],"sources":["useElementComponentManifest.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { $getComponentManifestByElementId } from \"~/editorSdk/utils/index.js\";\n\nexport const useElementComponentManifest = (elementId: string) => {\n    const editor = useDocumentEditor();\n\n    return useMemo(() => {\n        return $getComponentManifestByElementId(editor, elementId ?? \"\");\n    }, [elementId]);\n};\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,iBAAiB;AAC1B,SAASC,gCAAgC;AAEzC,OAAO,MAAMC,2BAA2B,GAAIC,SAAiB,IAAK;EAC9D,MAAMC,MAAM,GAAGJ,iBAAiB,CAAC,CAAC;EAElC,OAAOD,OAAO,CAAC,MAAM;IACjB,OAAOE,gCAAgC,CAACG,MAAM,EAAED,SAAS,IAAI,EAAE,CAAC;EACpE,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;AACnB,CAAC","ignoreList":[]}
+{"version":3,"names":["useDocumentEditor","useSelectFromEditor","useElementComponentManifest","elementId","editor","document","getDocumentState","read","componentName","elements","component","name","state","components"],"sources":["useElementComponentManifest.ts"],"sourcesContent":["import { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\n\nexport const useElementComponentManifest = (elementId: string) => {\n    const editor = useDocumentEditor();\n    const document = editor.getDocumentState().read();\n    const componentName = document.elements[elementId]?.component.name;\n\n    return useSelectFromEditor(\n        state => {\n            return state.components[componentName];\n        },\n        [componentName]\n    );\n};\n"],"mappings":"AAAA,SAASA,iBAAiB;AAC1B,SAASC,mBAAmB;AAE5B,OAAO,MAAMC,2BAA2B,GAAIC,SAAiB,IAAK;EAC9D,MAAMC,MAAM,GAAGJ,iBAAiB,CAAC,CAAC;EAClC,MAAMK,QAAQ,GAAGD,MAAM,CAACE,gBAAgB,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC;EACjD,MAAMC,aAAa,GAAGH,QAAQ,CAACI,QAAQ,CAACN,SAAS,CAAC,EAAEO,SAAS,CAACC,IAAI;EAElE,OAAOV,mBAAmB,CACtBW,KAAK,IAAI;IACL,OAAOA,KAAK,CAACC,UAAU,CAACL,aAAa,CAAC;EAC1C,CAAC,EACD,CAACA,aAAa,CAClB,CAAC;AACL,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/useIframeUrl.js

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { useTenantContext } from "@webiny/app-admin";
 import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument.js";
-import { usePreviewDomain } from "./usePreviewDomain.js";
+import { usePreviewDomain } from "../usePreviewDomain.js";
 export const useIframeUrl = () => {
   const {
     tenant

package/BaseEditor/defaultConfig/Content/Preview/useIframeUrl.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","useTenantContext","useSelectFromDocument","usePreviewDomain","useIframeUrl","tenant","previewDomain","id","document","documentType","metadata","path","properties","newUrl","URL","addSearchParamsFromDocument","toString","url","searchParams","set","pathname","window","location","origin"],"sources":["useIframeUrl.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useTenantContext } from \"@webiny/app-admin\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { usePreviewDomain } from \"./usePreviewDomain.js\";\n\nexport const useIframeUrl = () => {\n    const { tenant } = useTenantContext();\n    const { previewDomain } = usePreviewDomain();\n\n    const id = useSelectFromDocument(document => document.id);\n    const documentType = useSelectFromDocument(document => document.metadata.documentType);\n    const path = useSelectFromDocument(document => document.properties.path);\n\n    return useMemo(() => {\n        if (!previewDomain) {\n            return null;\n        }\n        const newUrl = new URL(`${previewDomain}${path}`);\n        addSearchParamsFromDocument(tenant!, newUrl, id, documentType);\n        return newUrl.toString();\n    }, [previewDomain, id, path, documentType]);\n};\n\nfunction addSearchParamsFromDocument(tenant: string, url: URL, id: string, documentType: string) {\n    const searchParams = url.searchParams;\n    searchParams.set(\"wb.editing\", \"true\");\n    searchParams.set(\"wb.type\", documentType);\n    searchParams.set(\"wb.id\", id);\n    searchParams.set(\"wb.path\", url.pathname);\n    searchParams.set(\"wb.referrer\", window.location.origin);\n    searchParams.set(\"wb.tenant\", tenant);\n}\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,gBAAgB,QAAQ,mBAAmB;AACpD,SAASC,qBAAqB;AAC9B,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,YAAY,GAAGA,CAAA,KAAM;EAC9B,MAAM;IAAEC;EAAO,CAAC,GAAGJ,gBAAgB,CAAC,CAAC;EACrC,MAAM;IAAEK;EAAc,CAAC,GAAGH,gBAAgB,CAAC,CAAC;EAE5C,MAAMI,EAAE,GAAGL,qBAAqB,CAACM,QAAQ,IAAIA,QAAQ,CAACD,EAAE,CAAC;EACzD,MAAME,YAAY,GAAGP,qBAAqB,CAACM,QAAQ,IAAIA,QAAQ,CAACE,QAAQ,CAACD,YAAY,CAAC;EACtF,MAAME,IAAI,GAAGT,qBAAqB,CAACM,QAAQ,IAAIA,QAAQ,CAACI,UAAU,CAACD,IAAI,CAAC;EAExE,OAAOX,OAAO,CAAC,MAAM;IACjB,IAAI,CAACM,aAAa,EAAE;MAChB,OAAO,IAAI;IACf;IACA,MAAMO,MAAM,GAAG,IAAIC,GAAG,CAAC,GAAGR,aAAa,GAAGK,IAAI,EAAE,CAAC;IACjDI,2BAA2B,CAACV,MAAM,EAAGQ,MAAM,EAAEN,EAAE,EAAEE,YAAY,CAAC;IAC9D,OAAOI,MAAM,CAACG,QAAQ,CAAC,CAAC;EAC5B,CAAC,EAAE,CAACV,aAAa,EAAEC,EAAE,EAAEI,IAAI,EAAEF,YAAY,CAAC,CAAC;AAC/C,CAAC;AAED,SAASM,2BAA2BA,CAACV,MAAc,EAAEY,GAAQ,EAAEV,EAAU,EAAEE,YAAoB,EAAE;EAC7F,MAAMS,YAAY,GAAGD,GAAG,CAACC,YAAY;EACrCA,YAAY,CAACC,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC;EACtCD,YAAY,CAACC,GAAG,CAAC,SAAS,EAAEV,YAAY,CAAC;EACzCS,YAAY,CAACC,GAAG,CAAC,OAAO,EAAEZ,EAAE,CAAC;EAC7BW,YAAY,CAACC,GAAG,CAAC,SAAS,EAAEF,GAAG,CAACG,QAAQ,CAAC;EACzCF,YAAY,CAACC,GAAG,CAAC,aAAa,EAAEE,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC;EACvDL,YAAY,CAACC,GAAG,CAAC,WAAW,EAAEd,MAAM,CAAC;AACzC","ignoreList":[]}
+{"version":3,"names":["useMemo","useTenantContext","useSelectFromDocument","usePreviewDomain","useIframeUrl","tenant","previewDomain","id","document","documentType","metadata","path","properties","newUrl","URL","addSearchParamsFromDocument","toString","url","searchParams","set","pathname","window","location","origin"],"sources":["useIframeUrl.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useTenantContext } from \"@webiny/app-admin\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { usePreviewDomain } from \"../usePreviewDomain.js\";\n\nexport const useIframeUrl = () => {\n    const { tenant } = useTenantContext();\n    const { previewDomain } = usePreviewDomain();\n\n    const id = useSelectFromDocument(document => document.id);\n    const documentType = useSelectFromDocument(document => document.metadata.documentType);\n    const path = useSelectFromDocument(document => document.properties.path);\n\n    return useMemo(() => {\n        if (!previewDomain) {\n            return null;\n        }\n        const newUrl = new URL(`${previewDomain}${path}`);\n        addSearchParamsFromDocument(tenant!, newUrl, id, documentType);\n        return newUrl.toString();\n    }, [previewDomain, id, path, documentType]);\n};\n\nfunction addSearchParamsFromDocument(tenant: string, url: URL, id: string, documentType: string) {\n    const searchParams = url.searchParams;\n    searchParams.set(\"wb.editing\", \"true\");\n    searchParams.set(\"wb.type\", documentType);\n    searchParams.set(\"wb.id\", id);\n    searchParams.set(\"wb.path\", url.pathname);\n    searchParams.set(\"wb.referrer\", window.location.origin);\n    searchParams.set(\"wb.tenant\", tenant);\n}\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,gBAAgB,QAAQ,mBAAmB;AACpD,SAASC,qBAAqB;AAC9B,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,YAAY,GAAGA,CAAA,KAAM;EAC9B,MAAM;IAAEC;EAAO,CAAC,GAAGJ,gBAAgB,CAAC,CAAC;EACrC,MAAM;IAAEK;EAAc,CAAC,GAAGH,gBAAgB,CAAC,CAAC;EAE5C,MAAMI,EAAE,GAAGL,qBAAqB,CAACM,QAAQ,IAAIA,QAAQ,CAACD,EAAE,CAAC;EACzD,MAAME,YAAY,GAAGP,qBAAqB,CAACM,QAAQ,IAAIA,QAAQ,CAACE,QAAQ,CAACD,YAAY,CAAC;EACtF,MAAME,IAAI,GAAGT,qBAAqB,CAACM,QAAQ,IAAIA,QAAQ,CAACI,UAAU,CAACD,IAAI,CAAC;EAExE,OAAOX,OAAO,CAAC,MAAM;IACjB,IAAI,CAACM,aAAa,EAAE;MAChB,OAAO,IAAI;IACf;IACA,MAAMO,MAAM,GAAG,IAAIC,GAAG,CAAC,GAAGR,aAAa,GAAGK,IAAI,EAAE,CAAC;IACjDI,2BAA2B,CAACV,MAAM,EAAGQ,MAAM,EAAEN,EAAE,EAAEE,YAAY,CAAC;IAC9D,OAAOI,MAAM,CAACG,QAAQ,CAAC,CAAC;EAC5B,CAAC,EAAE,CAACV,aAAa,EAAEC,EAAE,EAAEI,IAAI,EAAEF,YAAY,CAAC,CAAC;AAC/C,CAAC;AAED,SAASM,2BAA2BA,CAACV,MAAc,EAAEY,GAAQ,EAAEV,EAAU,EAAEE,YAAoB,EAAE;EAC7F,MAAMS,YAAY,GAAGD,GAAG,CAACC,YAAY;EACrCA,YAAY,CAACC,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC;EACtCD,YAAY,CAACC,GAAG,CAAC,SAAS,EAAEV,YAAY,CAAC;EACzCS,YAAY,CAACC,GAAG,CAAC,OAAO,EAAEZ,EAAE,CAAC;EAC7BW,YAAY,CAACC,GAAG,CAAC,SAAS,EAAEF,GAAG,CAACG,QAAQ,CAAC;EACzCF,YAAY,CAACC,GAAG,CAAC,aAAa,EAAEE,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC;EACvDL,YAAY,CAACC,GAAG,CAAC,WAAW,EAAEd,MAAM,CAAC;AACzC","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/useProximityDropzone.d.ts

@@ -14,8 +14,9 @@ export interface DropEvent {
 interface UseProximityDropzoneParams {
     id: string;
     box: Box;
+    canAccept?: () => boolean;
 }
-export declare function useProximityDropzone({ id, box }: UseProximityDropzoneParams): {
+export declare function useProximityDropzone({ id, box, canAccept }: UseProximityDropzoneParams): {
     proximity: DropZoneProximity | null;
 };
 export {};