npm - @webiny/app-website-builder - Versions diffs - 6.0.0-alpha.5 → 6.0.0-rc.1 - Mend

@webiny/app-website-builder 6.0.0-alpha.5 → 6.0.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1174) hide show

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

	@@ -1 +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, useState } from \"react\";\nimport { cn } from \"@webiny/admin-ui\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport type { Box } from \"../Box\";\nimport { $highlightElement, $selectElement } from \"~/editorSdk/utils\";\nimport { Draggable } from \"~/BaseEditor/components/Draggable\";\nimport { useIsDragging } from \"~/BaseEditor/defaultConfig/Content/Preview/useIsDragging\";\nimport { useElementComponentManifest } from \"~/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles\";\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 \"wby-absolute wby-box-border wby-text-right wby-top-0 wby-left-0 wby-w-full wby-h-full\",\n \"data-[state=hover]:wby-border-md data-[state=hover]:wby-border-success-default\",\n \"data-[state=active]:wby-border-md data-[state=active]:wby-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={\n \"wby-pointer-events-none wby-absolute wby-top-0 wby-left-0 wby-bg-white\"\n }\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 \"wby-absolute wby-text-sm wby-text-neutral-light wby-p-xs wby-opacity-0 wby-pointer-events-auto\",\n \"data-[state=hover]:wby-bg-success-default data-[state=hover]:wby-opacity-100\",\n \"data-[state=active]:wby-bg-primary-default data-[state=active]:wby-opacity-100\",\n \"data-[state=dragging]:wby-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":[]}
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":"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,2BAA2B;AACpC,SAASC,SAAS;AAUlB,OAAO,MAAMC,cAAc,gBAAGV,KAAK,CAACW,IAAI,CACpC,CAAC;EAAEC,UAAU;EAAEC,SAAS;EAAEC,UAAU;EAAEC;AAAmC,CAAC,KAAK;EAC3E,MAAMC,MAAM,GAAGb,iBAAiB,CAAC,CAAC;EAClC,MAAMc,iBAAiB,GAAGT,2BAA2B,CAACI,UAAU,CAACM,EAAE,CAAC;EAEpE,MAAMC,OAAO,GAAGlB,WAAW,CAAEmB,KAAuB,IAAK;IACrDA,KAAK,CAACC,eAAe,CAAC,CAAC;IACvBhB,cAAc,CAACW,MAAM,EAAEH,SAAS,CAAC;EACrC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMS,cAAc,GAAGrB,WAAW,CAAEmB,KAAuB,IAAK;IAC5DA,KAAK,CAACC,eAAe,CAAC,CAAC;IACvBjB,iBAAiB,CAACY,MAAM,EAAEH,SAAS,CAAC;EACxC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMU,gBAAgB,GAAGtB,WAAW,CAAEmB,KAAuB,IAAK;IAC9DA,KAAK,CAACC,eAAe,CAAC,CAAC;IACvBjB,iBAAiB,CAACY,MAAM,EAAE,IAAI,CAAC;EACnC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMQ,GAAG,GAAGjB,aAAa,CAAC,CAAC;EAE3B,IAAI,CAACU,iBAAiB,EAAE;IACpB,OAAO,IAAI;EACf;EAEA,MAAMQ,aAAa,GAAG,MAAM;EAC5B,MAAMC,aAAa,GAAGT,iBAAiB,CAACU,KAAK,IAAIV,iBAAiB,CAACW,IAAI;EACvE,MAAMC,QAAQ,GAAGf,UAAU,GAAG,QAAQ,GAAGC,aAAa,IAAI,CAACS,GAAG,GAAG,OAAO,GAAG,IAAI;EAE/E,oBACIxB,KAAA,CAAA8B,aAAA,CAACxB,SAAS;IACNyB,IAAI,EAAC,SAAS;IACdC,IAAI,EAAE;MAAEd,EAAE,EAAEL,SAAS;MAAEa,aAAa,EAAET,iBAAiB,CAACW;IAAK,CAAE;IAC/DK,OAAO,EAAEhB,iBAAiB,CAACgB,OAAO,KAAK;EAAM,GAE5C,CAAC;IAAEC,UAAU;IAAEC;EAAQ,CAAC,KACrBA,OAAO,cACHnC,KAAA,CAAA8B,aAAA;IACI,mBAAiBjB,SAAU;IAC3BuB,YAAY,EAAEd,cAAe;IAC7Be,YAAY,EAAEd,gBAAiB;IAC/Be,KAAK,EAAE;MACHC,QAAQ,EAAE,UAAU;MACpBd,aAAa;MACbe,MAAM,EAAE,GAAG,GAAG5B,UAAU,CAAC6B,KAAK;MAC9BC,GAAG,EAAE9B,UAAU,CAAC8B,GAAG;MACnBC,IAAI,EAAE/B,UAAU,CAAC+B,IAAI;MACrBC,KAAK,EAAEhC,UAAU,CAACgC,KAAK;MACvBC,MAAM,EAAEjC,UAAU,CAACiC,MAAM;MACzBC,OAAO,EAAEZ,UAAU,GAAG,GAAG,GAAG;IAChC;EAAE,gBAEFlC,KAAA,CAAA8B,aAAA;IACIiB,SAAS,EAAE7C,EAAE,CACT,2DAA2D,EAC3D,wEAAwE,EACxE,yEACJ,CAAE;IACFiB,OAAO,EAAEA,OAAQ;IACjB,cAAYU,QAAS;IACrB,mBAAiBhB,SAAU;IAC3B,aAAW,iBAAkB;IAC7B,cAAYD,UAAU,CAAC6B;EAAM,GAE5B3B,UAAU,gBACPd,KAAA,CAAA8B,aAAA,CAACkB,gBAAgB;IACbnC,SAAS,EAAEA,SAAU;IACrBD,UAAU,EAAEA;EAAW,CAC1B,CAAC,GACF,IACH,CAAC,eACNZ,KAAA,CAAA8B,aAAA;IACI,aAAW,iBAAkB;IAC7BiB,SAAS,EAAE,oDAAqD;IAChET,KAAK,EAAE;MACHE,MAAM,EAAE,GAAG,GAAG5B,UAAU,CAAC6B,KAAK;MAC9BG,KAAK,EAAEhC,UAAU,CAACgC,KAAK;MACvBC,MAAM,EAAEjC,UAAU,CAACiC,MAAM;MACzBC,OAAO,EAAEZ,UAAU,GAAG,GAAG,GAAG;IAChC;EAAE,CACA,CAAC,eACPlC,KAAA,CAAA8B,aAAA;IACI,aAAW,uBAAwB;IACnC,kBAAgBlB,UAAU,CAACM,EAAG;IAC9B,cAAYgB,UAAU,GAAG,UAAU,GAAGL,QAAS;IAC/CV,OAAO,EAAEA,OAAQ;IACjB4B,SAAS,EAAE7C,EAAE,CACT,wEAAwE,EACxE,8DAA8D,EAC9D,gEAAgE,EAChE,kCACJ,CAAE;IACFoC,KAAK,EAAE;MAAEI,GAAG,EAAE,CAAC;IAAG;EAAE,GAEnBhB,aACA,CACJ,CACT,CAEG,CAAC;AAEpB,CACJ,CAAC;AAEDhB,cAAc,CAACuC,WAAW,GAAG,gBAAgB;AAO7C,MAAMC,WAAW,GAAG,wBAAwB;AAE5C,MAAMF,gBAAgB,GAAGA,CAAC;EAAEnC,SAAS;EAAED;AAAkC,CAAC,KAAK;EAC3E,MAAM;IAAEuC;EAAO,CAAC,GAAG1C,SAAS,CAACI,SAAS,CAAC;EACvC,MAAM;IAAEuC,SAAS,GAAG,CAAC;IAAEC,YAAY,GAAG,CAAC;IAAEC,UAAU,GAAG,CAAC;IAAEC,WAAW,GAAG;EAAE,CAAC,GAAGJ,MAAM;EAEnF,oBACInD,KAAA,CAAA8B,aAAA,CAAA9B,KAAA,CAAAwD,QAAA,QACKJ,SAAS,gBACNpD,KAAA,CAAA8B,aAAA,CAAC2B,aAAa;IACVf,GAAG,EAAE,cAAcU,SAAS,MAAMF,WAAW,GAAI;IACjDP,IAAI,EAAE,cAAcO,WAAW,GAAI;IACnCL,MAAM,EAAEO,SAAU;IAClBR,KAAK,EAAE,GAAGhC,UAAU,CAACgC,KAAK;EAAK,CAClC,CAAC,GACF,IAAI,EACPW,WAAW,gBACRvD,KAAA,CAAA8B,aAAA,CAAC2B,aAAa;IACVf,GAAG,EAAE,cAAcQ,WAAW,GAAI;IAClCP,IAAI,EAAE,QAAQ/B,UAAU,CAACgC,KAAK,QAAQM,WAAW,GAAI;IACrDL,MAAM,EAAE,GAAGjC,UAAU,CAACiC,MAAM,IAAK;IACjCD,KAAK,EAAEW;EAAY,CACtB,CAAC,GACF,IAAI,EACPF,YAAY,gBACTrD,KAAA,CAAA8B,aAAA,CAAC2B,aAAa;IACVf,GAAG,EAAE,QAAQ9B,UAAU,CAACiC,MAAM,QAAQK,WAAW,GAAI;IACrDP,IAAI,EAAE,cAAcO,WAAW,GAAI;IACnCL,MAAM,EAAEQ,YAAa;IACrBT,KAAK,EAAE,GAAGhC,UAAU,CAACgC,KAAK;EAAK,CAClC,CAAC,GACF,IAAI,EACPU,UAAU,gBACPtD,KAAA,CAAA8B,aAAA,CAAC2B,aAAa;IACVf,GAAG,EAAE,cAAcQ,WAAW,GAAI;IAClCP,IAAI,EAAE,cAAcW,UAAU,MAAMJ,WAAW,GAAI;IACnDL,MAAM,EAAE,GAAGjC,UAAU,CAACiC,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,oBACI5C,KAAA,CAAA8B,aAAA;IACI,aAAW,gBAAiB;IAC5BQ,KAAK,EAAE;MACHb,aAAa,EAAE,MAAM;MACrBc,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/ElementOverlays.js CHANGED Viewed

@@ -3,18 +3,18 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import React, { Fragment, useCallback, useRef } from "react";
 import { observer } from "mobx-react-lite";
 import { useDrop } from "react-dnd";
-import { usePreviewData } from "../../../../hooks/usePreviewData";
-import { useSelectFromEditor } from "../../../../hooks/useSelectFromEditor";
-import { ElementOverlay } from "./ElementOverlay";
-import { useIsDragging } from "../useIsDragging";
-import { useDocumentEditor } from "../../../../../DocumentEditor";
-import { ElementDropLines } from "./ElementDropLines";
-import { DropBox } from "./DropBox";
-import { useDropZoneManager } from "../DropZoneManagerProvider";
-import { mergeRefs } from "../mergeRefs";
-import { Commands } from "../../../..";
 import { ComponentManifestToAstConverter } from "@webiny/website-builder-sdk";
 import { findMatchingAstNode } from "@webiny/website-builder-sdk";
+import { usePreviewData } from "../../../../hooks/usePreviewData.js";
+import { useSelectFromEditor } from "../../../../hooks/useSelectFromEditor.js";
+import { ElementOverlay } from "./ElementOverlay.js";
+import { useIsDragging } from "../useIsDragging.js";
+import { useDocumentEditor } from "../../../../../DocumentEditor/index.js";
+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";
 const OverlayContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "e1avjb810"
 } : {
@@ -25,8 +25,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",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkVsZW1lbnRPdmVybGF5cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0J5QiIsImZpbGUiOiJFbGVtZW50T3ZlcmxheXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IEZyYWdtZW50LCB1c2VDYWxsYmFjaywgdXNlUmVmIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBvYnNlcnZlciB9IGZyb20gXCJtb2J4LXJlYWN0LWxpdGVcIjtcbmltcG9ydCB7IHVzZURyb3AgfSBmcm9tIFwicmVhY3QtZG5kXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdXNlUHJldmlld0RhdGEgfSBmcm9tIFwifi9CYXNlRWRpdG9yL2hvb2tzL3VzZVByZXZpZXdEYXRhXCI7XG5pbXBvcnQgeyB1c2VTZWxlY3RGcm9tRWRpdG9yIH0gZnJvbSBcIn4vQmFzZUVkaXRvci9ob29rcy91c2VTZWxlY3RGcm9tRWRpdG9yXCI7XG5pbXBvcnQgeyBFbGVtZW50T3ZlcmxheSB9IGZyb20gXCIuL0VsZW1lbnRPdmVybGF5XCI7XG5pbXBvcnQgdHlwZSB7IFNsb3RJbnB1dCB9IGZyb20gXCJAd2ViaW55L3dlYnNpdGUtYnVpbGRlci1zZGtcIjtcbmltcG9ydCB7IHVzZUlzRHJhZ2dpbmcgfSBmcm9tIFwiLi4vdXNlSXNEcmFnZ2luZ1wiO1xuaW1wb3J0IHR5cGUgeyBCb3ggfSBmcm9tIFwiLi4vQm94XCI7XG5pbXBvcnQgdHlwZSB7IERyb3BFdmVudCB9IGZyb20gXCIuLi91c2VQcm94aW1pdHlEcm9wem9uZVwiO1xuaW1wb3J0IHsgdXNlRG9jdW1lbnRFZGl0b3IgfSBmcm9tIFwifi9Eb2N1bWVudEVkaXRvclwiO1xuaW1wb3J0IHsgRWxlbWVudERyb3BMaW5lcyB9IGZyb20gXCIuL0VsZW1lbnREcm9wTGluZXNcIjtcbmltcG9ydCB7IERyb3BCb3ggfSBmcm9tIFwiLi9Ecm9wQm94XCI7XG5pbXBvcnQgeyB1c2VEcm9wWm9uZU1hbmFnZXIgfSBmcm9tIFwiLi4vRHJvcFpvbmVNYW5hZ2VyUHJvdmlkZXJcIjtcbmltcG9ydCB7IG1lcmdlUmVmcyB9IGZyb20gXCIuLi9tZXJnZVJlZnNcIjtcbmltcG9ydCB7IENvbW1hbmRzIH0gZnJvbSBcIn4vQmFzZUVkaXRvclwiO1xuaW1wb3J0IHR5cGUgeyBFZGl0b3IgfSBmcm9tIFwifi9lZGl0b3JTZGsvRWRpdG9yXCI7XG5pbXBvcnQgeyBDb21wb25lbnRNYW5pZmVzdFRvQXN0Q29udmVydGVyIH0gZnJvbSBcIkB3ZWJpbnkvd2Vic2l0ZS1idWlsZGVyLXNka1wiO1xuaW1wb3J0IHsgZmluZE1hdGNoaW5nQXN0Tm9kZSB9IGZyb20gXCJAd2ViaW55L3dlYnNpdGUtYnVpbGRlci1zZGtcIjtcblxuY29uc3QgT3ZlcmxheUNvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiKSh7XG4gICAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICB6SW5kZXg6IDIwXG59KTtcblxuY29uc3QgZmlsdGVyRWxlbWVudHMgPSAoYm94OiBCb3gpID0+IHtcbiAgICByZXR1cm4gYm94LnR5cGUgPT09IFwiZWxlbWVudFwiICYmIGJveC5pZCAhPT0gXCJyb290XCI7XG59O1xuXG5jb25zdCBmaWx0ZXJTbG90cyA9IChib3g6IEJveCkgPT4ge1xuICAgIHJldHVybiBib3gudHlwZSA9PT0gXCJlbGVtZW50LXNsb3RcIjtcbn07XG5cbmV4cG9ydCBjb25zdCBFbGVtZW50T3ZlcmxheXMgPSBvYnNlcnZlcigoKSA9PiB7XG4gICAgY29uc3QgZHJvcHpvbmVNYW5hZ2VyID0gdXNlRHJvcFpvbmVNYW5hZ2VyKCk7XG4gICAgY29uc3QgZWRpdG9yID0gdXNlRG9jdW1lbnRFZGl0b3IoKTtcbiAgICBjb25zdCB7IGJveGVzIH0gPSB1c2VQcmV2aWV3RGF0YSgpO1xuICAgIGNvbnN0IGlzRHJhZ2dpbmcgPSB1c2VJc0RyYWdnaW5nKCk7XG4gICAgY29uc3QgeyBzZWxlY3RlZEVsZW1lbnQsIGhpZ2hsaWdodGVkRWxlbWVudCB9ID0gdXNlU2VsZWN0RnJvbUVkaXRvcihzdGF0ZSA9PiB7XG4gICAgICAgIHJldHVybiB7XG4gICAgICAgICAgICBzZWxlY3RlZEVsZW1lbnQ6IHN0YXRlLnNlbGVjdGVkRWxlbWVudCxcbiAgICAgICAgICAgIGhpZ2hsaWdodGVkRWxlbWVudDogc3RhdGUuaGlnaGxpZ2h0ZWRFbGVtZW50XG4gICAgICAgIH07XG4gICAgfSk7XG5cbiAgICBjb25zdCBkcm9wUmVmID0gdXNlUmVmPEhUTUxFbGVtZW50IHwgbnVsbD4obnVsbCk7XG5cbiAgICBjb25zdCBbLCBkcm9wXSA9IHVzZURyb3AoKCkgPT4gKHtcbiAgICAgICAgYWNjZXB0OiBcIkVMRU1FTlRcIixcbiAgICAgICAgZHJvcDogKGl0ZW06IGFueSkgPT4ge1xuICAgICAgICAgICAgY29uc3QgdGFyZ2V0ID0gZHJvcHpvbmVNYW5hZ2VyLmdldExhc3RNYXRjaGVkUG9zaXRpb24oKTtcbiAgICAgICAgICAgIGlmICh0YXJnZXQpIHtcbiAgICAgICAgICAgICAgICBvbkRyb3AoeyBpdGVtLCB0YXJnZXQgfSk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICB9KSk7XG5cbiAgICBkcm9wKGRyb3BSZWYpO1xuXG4gICAgY29uc3QgY2FuRHJvcENvbXBvbmVudEludG9UYXJnZXQgPSAoXG4gICAgICAgIGVkaXRvcjogRWRpdG9yLFxuICAgICAgICBjb21wb25lbnROYW1lOiBzdHJpbmcsXG4gICAgICAgIHRhcmdldDogRHJvcEV2ZW50W1widGFyZ2V0XCJdXG4gICAgKSA9PiB7XG4gICAgICAgIC8vIERldGVybWluZSBjb21wb25lbnQgbWFuaWZlc3QgZnJvbSBkcm9wIHRhcmdldC5cbiAgICAgICAgY29uc3QgZG9jdW1lbnQgPSBlZGl0b3IuZ2V0RG9jdW1lbnRTdGF0ZSgpLnJlYWQoKTtcbiAgICAgICAgY29uc3QgeyBjb21wb25lbnQgfSA9IGRvY3VtZW50LmVsZW1lbnRzW3RhcmdldC5wYXJlbnRJZF07XG4gICAgICAgIGNvbnN0IGNvbXBvbmVudE1hbmlmZXN0ID0gZWRpdG9yLmdldEVkaXRvclN0YXRlKCkucmVhZCgpLmNvbXBvbmVudHNbY29tcG9uZW50Lm5hbWVdO1xuXG4gICAgICAgIC8vIEZpbmQgdGFyZ2V0IGlucHV0IHVzaW5nIEFTVC5cbiAgICAgICAgY29uc3QgaW5wdXRzQXN0ID0gQ29tcG9uZW50TWFuaWZlc3RUb0FzdENvbnZlcnRlci5jb252ZXJ0KGNvbXBvbmVudE1hbmlmZXN0LmlucHV0cyA/PyBbXSk7XG4gICAgICAgIGNvbnN0IHRhcmdldElucHV0Tm9kZSA9IGZpbmRNYXRjaGluZ0FzdE5vZGUodGFyZ2V0LnNsb3QsIGlucHV0c0FzdCk7XG5cbiAgICAgICAgbGV0IGNhbkFjY2VwdENvbXBvbmVudCA9IHRhcmdldElucHV0Tm9kZSAhPT0gdW5kZWZpbmVkO1xuICAgICAgICBpZiAodGFyZ2V0SW5wdXROb2RlKSB7XG4gICAgICAgICAgICBjb25zdCBzbG90SW5wdXQgPSB0YXJnZXRJbnB1dE5vZGUuaW5wdXQgYXMgU2xvdElucHV0O1xuICAgICAgICAgICAgY29uc3Qgd2hpdGVsaXN0ZWRDb21wb25lbnRzID0gc2xvdElucHV0LmNvbXBvbmVudHM7XG4gICAgICAgICAgICBpZiAod2hpdGVsaXN0ZWRDb21wb25lbnRzICYmIHdoaXRlbGlzdGVkQ29tcG9uZW50cy5sZW5ndGggPiAwKSB7XG4gICAgICAgICAgICAgICAgY2FuQWNjZXB0Q29tcG9uZW50ID0gd2hpdGVsaXN0ZWRDb21wb25lbnRzLmluY2x1ZGVzKGNvbXBvbmVudE5hbWUpO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICAgIHJldHVybiBjYW5BY2NlcHRDb21wb25lbnQ7XG4gICAgfTtcblxuICAgIGNvbnN0IG9uRHJvcCA9IHVzZUNhbGxiYWNrKFxuICAgICAgICAoeyBpdGVtLCB0YXJnZXQgfTogRHJvcEV2ZW50KSA9PiB7XG4gICAgICAgICAgICBpZiAoIWNhbkRyb3BDb21wb25lbnRJbnRvVGFyZ2V0KGVkaXRvciwgaXRlbS5jb21wb25lbnROYW1lLCB0YXJnZXQpKSB7XG4gICAgICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICBpZiAoaXRlbS5pZCkge1xuICAgICAgICAgICAgICAgIC8vIFdlJ3JlIG1vdmluZyBhbiBleGlzdGluZyBlbGVtZW50LlxuICAgICAgICAgICAgICAgIGVkaXRvci5leGVjdXRlQ29tbWFuZChDb21tYW5kcy5Nb3ZlRWxlbWVudCwge1xuICAgICAgICAgICAgICAgICAgICBlbGVtZW50SWQ6IGl0ZW0uaWQsXG4gICAgICAgICAgICAgICAgICAgIHBhcmVudElkOiB0YXJnZXQucGFyZW50SWQsXG4gICAgICAgICAgICAgICAgICAgIHNsb3Q6IHRhcmdldC5zbG90LFxuICAgICAgICAgICAgICAgICAgICBpbmRleDogdGFyZ2V0LmluZGV4XG4gICAgICAgICAgICAgICAgfSk7XG4gICAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgICAgIC8vIFdlJ3JlIGNyZWF0aW5nIGEgbmV3IGVsZW1lbnQuXG4gICAgICAgICAgICAgICAgZWRpdG9yLmV4ZWN1dGVDb21tYW5kKENvbW1hbmRzLkNyZWF0ZUVsZW1lbnQsIHtcbiAgICAgICAgICAgICAgICAgICAgY29tcG9uZW50TmFtZTogaXRlbS5jb21wb25lbnROYW1lLFxuICAgICAgICAgICAgICAgICAgICBwYXJlbnRJZDogdGFyZ2V0LnBhcmVudElkLFxuICAgICAgICAgICAgICAgICAgICBzbG90OiB0YXJnZXQuc2xvdCxcbiAgICAgICAgICAgICAgICAgICAgaW5kZXg6IHRhcmdldC5pbmRleFxuICAgICAgICAgICAgICAgIH0pO1xuICAgICAgICAgICAgfVxuICAgICAgICB9LFxuICAgICAgICBbZWRpdG9yXVxuICAgICk7XG5cbiAgICBjb25zdCB2aWV3cG9ydENvbnRhaW5lcjogUmVhY3QuQ1NTUHJvcGVydGllcyA9IHtcbiAgICAgICAgZGlzcGxheTogXCJibG9ja1wiLFxuICAgICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgICB0b3A6IDAsXG4gICAgICAgIGxlZnQ6IDAsXG4gICAgICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICAgICAgaGVpZ2h0OiBcIjEwMCVcIixcbiAgICAgICAgcG9pbnRlckV2ZW50czogaXNEcmFnZ2luZyA/IFwiYXV0b1wiIDogXCJub25lXCJcbiAgICB9O1xuXG4gICAgY29uc3Qgc2xvdHMgPSBib3hlcy5wcmV2aWV3LmZpbHRlcihmaWx0ZXJTbG90cyk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8T3ZlcmxheUNvbnRhaW5lciByZWY9e21lcmdlUmVmcyhkcm9wUmVmKX0gc3R5bGU9e3ZpZXdwb3J0Q29udGFpbmVyfT5cbiAgICAgICAgICAgIHtib3hlcy5wcmV2aWV3LmZpbHRlcihmaWx0ZXJFbGVtZW50cykubWFwKGJveCA9PiAoXG4gICAgICAgICAgICAgICAgPEZyYWdtZW50IGtleT17Ym94LmlkfT5cbiAgICAgICAgICAgICAgICAgICAgPEVsZW1lbnRPdmVybGF5XG4gICAgICAgICAgICAgICAgICAgICAgICBlbGVtZW50SWQ9e2JveC5pZH1cbiAgICAgICAgICAgICAgICAgICAgICAgIGlzU2VsZWN0ZWQ9e3NlbGVjdGVkRWxlbWVudCA9PT0gYm94LmlkfVxuICAgICAgICAgICAgICAgICAgICAgICAgaXNIaWdobGlnaHRlZD17aGlnaGxpZ2h0ZWRFbGVtZW50ID09PSBib3guaWR9XG4gICAgICAgICAgICAgICAgICAgICAgICBwcmV2aWV3Qm94PXtib3h9XG4gICAgICAgICAgICAgICAgICAgICAgICBlZGl0b3JCb3g9e2JveGVzLmVkaXRvci5nZXQoYm94LmlkKSF9XG4gICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgICAgIDxFbGVtZW50RHJvcExpbmVzXG4gICAgICAgICAgICAgICAgICAgICAgICBpc0ZpcnN0PXtib3gucGFyZW50SW5kZXggPT09IDB9XG4gICAgICAgICAgICAgICAgICAgICAgICBwcmV2aWV3Qm94PXtib3h9XG4gICAgICAgICAgICAgICAgICAgICAgICBlZGl0b3JCb3g9e2JveGVzLmVkaXRvci5nZXQoYm94LmlkKSF9XG4gICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgPC9GcmFnbWVudD5cbiAgICAgICAgICAgICkpfVxuICAgICAgICAgICAge3Nsb3RzLm1hcChzbG90ID0+IChcbiAgICAgICAgICAgICAgICA8RHJvcEJveCBrZXk9e3Nsb3QuaWR9IGJveD17c2xvdH0gb25Ecm9wPXtvbkRyb3B9IC8+XG4gICAgICAgICAgICApKX1cbiAgICAgICAgPC9PdmVybGF5Q29udGFpbmVyPlxuICAgICk7XG59KTtcbiJdfQ== */",
+  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 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 const filterElements = box => {

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

	@@ -1 +1 @@
1	- {"version":3,"names":["React","Fragment","useCallback","useRef","observer","useDrop","usePreviewData","useSelectFromEditor","ElementOverlay","useIsDragging","useDocumentEditor","ElementDropLines","DropBox","useDropZoneManager","mergeRefs","Commands","ComponentManifestToAstConverter","findMatchingAstNode","OverlayContainer","_styled","process","env","NODE_ENV","target","label","name","styles","map","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","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 { usePreviewData } from \"~/BaseEditor/hooks/usePreviewData\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor\";\nimport { ElementOverlay } from \"./ElementOverlay\";\nimport type { SlotInput } from \"@webiny/website-builder-sdk\";\nimport { useIsDragging } from \"../useIsDragging\";\nimport type { Box } from \"../Box\";\nimport type { DropEvent } from \"../useProximityDropzone\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { ElementDropLines } from \"./ElementDropLines\";\nimport { DropBox } from \"./DropBox\";\nimport { useDropZoneManager } from \"../DropZoneManagerProvider\";\nimport { mergeRefs } from \"../mergeRefs\";\nimport { Commands } from \"~/BaseEditor\";\nimport type { Editor } from \"~/editorSdk/Editor\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { findMatchingAstNode } from \"@webiny/website-builder-sdk\";\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":"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","ignoreList":[]}
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":"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","ignoreList":[]}

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

@@ -1,17 +1,17 @@
 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";
-import { AddressBar } from "./AddressBar";
-import { Iframe } from "./Iframe";
-import { DropZoneManager } from "./DropZoneManager";
-import { DropZoneManagerProvider } from "./DropZoneManagerProvider";
-import { KeyboardShortcuts } from "./KeyboardShortcuts";
-import { Commands } from "../../..";
-import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor";
-import { AwaitIframeUrl } from "./AwaitIframeUrl";
-import { PreviewEvents } from "./PreviewEvents";
-import { ApplyTheme } from "./ApplyTheme";
+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";
+import { KeyboardShortcuts } from "./KeyboardShortcuts.js";
+import { Commands } from "../../../index.js";
+import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor.js";
+import { AwaitIframeUrl } from "./AwaitIframeUrl.js";
+import { PreviewEvents } from "./PreviewEvents.js";
+import { ApplyTheme } from "./ApplyTheme.js";
 export const Preview = () => {
   const editor = useDocumentEditor();
   const [iframeTimestamp, setIframeTimestamp] = useState(Date.now());

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

	@@ -1 +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\";\nimport { AddressBar } from \"./AddressBar\";\nimport { Iframe } from \"./Iframe\";\nimport { DropZoneManager } from \"./DropZoneManager\";\nimport { DropZoneManagerProvider } from \"./DropZoneManagerProvider\";\nimport { KeyboardShortcuts } from \"./KeyboardShortcuts\";\nimport { Commands } from \"~/BaseEditor\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor\";\nimport { AwaitIframeUrl } from \"~/BaseEditor/defaultConfig/Content/Preview/AwaitIframeUrl\";\nimport { PreviewEvents } from \"~/BaseEditor/defaultConfig/Content/Preview/PreviewEvents\";\nimport { ApplyTheme } from \"./ApplyTheme\";\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":[]}
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":[]}

package/BaseEditor/defaultConfig/Content/Preview/PreviewEvents.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import type { Editor } from "../../../../editorSdk/Editor";
 import type { Messenger } from "@webiny/website-builder-sdk";
+import type { Editor } from "../../../../editorSdk/Editor.js";
 export declare class PreviewEvents {
     private editor;
     private editorEventsRegistered;

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

@@ -1,7 +1,7 @@
 import { mouseTracker } from "@webiny/website-builder-sdk";
 import defaultImage from "@webiny/icons/extension.svg";
-import { Commands } from "../../..";
-import { $createElement } from "../../../../editorSdk/utils";
+import { Commands } from "../../../index.js";
+import { $createElement } from "../../../../editorSdk/utils/index.js";
 export class PreviewEvents {
   editorEventsRegistered = false;
   listeners = [];
@@ -63,20 +63,30 @@ export class PreviewEvents {
       const document = this.editor.getDocumentState().read();
       if (Object.keys(document.elements).length === 1) {
         // We only have the default "root" element, create fragment elements.
-        let index = 0;
-        fragments.forEach(fragment => {
+        fragments.forEach((fragment, index) => {
+          if (fragment.type === "fixed") {
+            $createElement(this.editor, {
+              componentName: "Webiny/Fragment",
+              parentId: "root",
+              slot: "children",
+              index,
+              bindings: {
+                inputs: {
+                  name: fragment.name
+                }
+              }
+            });
+            return;
+          }
           $createElement(this.editor, {
-            componentName: "Webiny/Fragment",
+            componentName: fragment.component,
             parentId: "root",
             slot: "children",
             index,
             bindings: {
-              inputs: {
-                name: fragment
-              }
+              inputs: fragment.inputs
             }
           });
-          index++;
         });
       }
     });

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

	@@ -1 +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","index","fragment","componentName","parentId","slot","bindings","inputs","name","boxes","viewport","iframeBox","getIframeBox","top","left","preview","mapCoordinatesToEditorSpace","component","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 { Editor } from \"~/editorSdk/Editor\";\nimport 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\";\nimport { $createElement } from \"~/editorSdk/utils\";\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: string[] = 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 let index = 0;\n fragments.forEach(fragment => {\n $createElement(this.editor, {\n componentName: \"Webiny/Fragment\",\n parentId: \"root\",\n slot: \"children\",\n index,\n bindings: {\n inputs: {\n name: fragment\n }\n }\n });\n index++;\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":[]}
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":[]}

package/BaseEditor/defaultConfig/Content/Preview/index.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export * from "./Preview";
1	+ export * from "./Preview.js";

package/BaseEditor/defaultConfig/Content/Preview/index.js CHANGED Viewed

@@ -1,3 +1,3 @@
-export * from "./Preview";
+export * from "./Preview.js";
 //# sourceMappingURL=index.js.map

package/BaseEditor/defaultConfig/Content/Preview/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Preview\";\n"],"mappings":"AAAA","ignoreList":[]}
1	+ {"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Preview.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/mergeRefs.d.ts CHANGED Viewed

	@@ -1,2 +1 @@
1	- /// <reference types="react" />
2 1	export declare function mergeRefs<T = any>(...refs: (React.Ref<T> \| undefined)[]): React.RefCallback<T>;

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

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

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

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
-import { useDocumentEditor } from "../../../../DocumentEditor";
-import { $getComponentManifestByElementId } from "../../../../editorSdk/utils";
+import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
+import { $getComponentManifestByElementId } from "../../../../editorSdk/utils/index.js";
 export const useElementComponentManifest = elementId => {
   const editor = useDocumentEditor();
   return useMemo(() => {

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

	@@ -1 +1 @@
1	- {"version":3,"names":["useMemo","useDocumentEditor","$getComponentManifestByElementId","useElementComponentManifest","elementId","editor"],"sources":["useElementComponentManifest.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { $getComponentManifestByElementId } from \"~/editorSdk/utils\";\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":[]}
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":[]}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"names":["useMemo","~~useTenancy~~","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 { ~~useTenancy~~ } from \"@webiny/app-~~tenancy~~\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\nimport { usePreviewDomain } from \"./usePreviewDomain\";\n\nexport const useIframeUrl = () => {\n const { tenant } = ~~useTenancy~~();\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,~~UAAU~~,QAAQ,~~qBAAqB~~;~~AAChD~~,SAASC,qBAAqB;AAC9B,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,YAAY,GAAGA,CAAA,KAAM;EAC9B,MAAM;IAAEC;EAAO,CAAC,GAAGJ,~~UAAU~~,CAAC,CAAC;~~EAC/B~~,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":[]}
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":[]}

package/BaseEditor/defaultConfig/Content/Preview/usePreviewDomain.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
-import { useGetWebsiteBuilderSettings } from "../../../../features";
-import { useSubscribeToLocalStorage } from "./useSubscribeToLocalStorage";
+import { useGetWebsiteBuilderSettings } from "../../../../features/index.js";
+import { useSubscribeToLocalStorage } from "./useSubscribeToLocalStorage.js";
 const CUSTOM_PREVIEW_DOMAIN = "webiny_wb_custom_preview_domain";
 /**

package/BaseEditor/defaultConfig/Content/Preview/usePreviewDomain.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["useCallback","useEffect","useState","useGetWebsiteBuilderSettings","useSubscribeToLocalStorage","CUSTOM_PREVIEW_DOMAIN","usePreviewDomain","previewDomain","setDomainFromSettings","customDomain","setCustomDomain","window","localStorage","getItem","newValue","setPreviewDomain","domain","unset","set","unsetPreviewDomain","getSettings","then","settings","isOverridden"],"sources":["usePreviewDomain.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { useGetWebsiteBuilderSettings } from \"~/features\";\nimport { useSubscribeToLocalStorage } from \"./useSubscribeToLocalStorage\";\n\nconst CUSTOM_PREVIEW_DOMAIN = \"webiny_wb_custom_preview_domain\";\n\n/*\n This hook loads preview domain from settings, and also takes into account the override\n * via localstorage, which is a developers-only feature.\n */\nexport const usePreviewDomain = () => {\n const [previewDomain, setDomainFromSettings] = useState<string>(\"\");\n\n const [customDomain, setCustomDomain] = useState(() =>\n window.localStorage.getItem(CUSTOM_PREVIEW_DOMAIN)\n );\n\n const localStorage = useSubscribeToLocalStorage(CUSTOM_PREVIEW_DOMAIN, newValue => {\n setCustomDomain(newValue);\n });\n\n const setPreviewDomain = useCallback(\n (domain: string) => {\n if (domain === previewDomain) {\n localStorage.unset();\n } else {\n localStorage.set(domain);\n }\n },\n [previewDomain]\n );\n\n const unsetPreviewDomain = useCallback(() => {\n localStorage.unset();\n }, []);\n\n const { getSettings } = useGetWebsiteBuilderSettings();\n\n useEffect(() => {\n getSettings().then(settings => {\n setDomainFromSettings(settings.previewDomain ?? \"http://localhost:3000\");\n });\n }, []);\n\n return {\n previewDomain: customDomain ?? previewDomain,\n setPreviewDomain,\n unsetPreviewDomain,\n isOverridden: customDomain && customDomain !== previewDomain\n };\n};\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AACxD,SAASC,4BAA4B;AACrC,SAASC,0BAA0B;AAEnC,MAAMC,qBAAqB,GAAG,iCAAiC;;AAE/D;AACA;AACA;AACA;AACA,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EAClC,MAAM,CAACC,aAAa,EAAEC,qBAAqB,CAAC,GAAGN,QAAQ,CAAS,EAAE,CAAC;EAEnE,MAAM,CAACO,YAAY,EAAEC,eAAe,CAAC,GAAGR,QAAQ,CAAC,MAC7CS,MAAM,CAACC,YAAY,CAACC,OAAO,CAACR,qBAAqB,CACrD,CAAC;EAED,MAAMO,YAAY,GAAGR,0BAA0B,CAACC,qBAAqB,EAAES,QAAQ,IAAI;IAC/EJ,eAAe,CAACI,QAAQ,CAAC;EAC7B,CAAC,CAAC;EAEF,MAAMC,gBAAgB,GAAGf,WAAW,CAC/BgB,MAAc,IAAK;IAChB,IAAIA,MAAM,KAAKT,aAAa,EAAE;MAC1BK,YAAY,CAACK,KAAK,CAAC,CAAC;IACxB,CAAC,MAAM;MACHL,YAAY,CAACM,GAAG,CAACF,MAAM,CAAC;IAC5B;EACJ,CAAC,EACD,CAACT,aAAa,CAClB,CAAC;EAED,MAAMY,kBAAkB,GAAGnB,WAAW,CAAC,MAAM;IACzCY,YAAY,CAACK,KAAK,CAAC,CAAC;EACxB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM;IAAEG;EAAY,CAAC,GAAGjB,4BAA4B,CAAC,CAAC;EAEtDF,SAAS,CAAC,MAAM;IACZmB,WAAW,CAAC,CAAC,CAACC,IAAI,CAACC,QAAQ,IAAI;MAC3Bd,qBAAqB,CAACc,QAAQ,CAACf,aAAa,IAAI,uBAAuB,CAAC;IAC5E,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACHA,aAAa,EAAEE,YAAY,IAAIF,aAAa;IAC5CQ,gBAAgB;IAChBI,kBAAkB;IAClBI,YAAY,EAAEd,YAAY,IAAIA,YAAY,KAAKF;EACnD,CAAC;AACL,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["useCallback","useEffect","useState","useGetWebsiteBuilderSettings","useSubscribeToLocalStorage","CUSTOM_PREVIEW_DOMAIN","usePreviewDomain","previewDomain","setDomainFromSettings","customDomain","setCustomDomain","window","localStorage","getItem","newValue","setPreviewDomain","domain","unset","set","unsetPreviewDomain","getSettings","then","settings","isOverridden"],"sources":["usePreviewDomain.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { useGetWebsiteBuilderSettings } from \"~/features/index.js\";\nimport { useSubscribeToLocalStorage } from \"./useSubscribeToLocalStorage.js\";\n\nconst CUSTOM_PREVIEW_DOMAIN = \"webiny_wb_custom_preview_domain\";\n\n/*\n This hook loads preview domain from settings, and also takes into account the override\n * via localstorage, which is a developers-only feature.\n */\nexport const usePreviewDomain = () => {\n const [previewDomain, setDomainFromSettings] = useState<string>(\"\");\n\n const [customDomain, setCustomDomain] = useState(() =>\n window.localStorage.getItem(CUSTOM_PREVIEW_DOMAIN)\n );\n\n const localStorage = useSubscribeToLocalStorage(CUSTOM_PREVIEW_DOMAIN, newValue => {\n setCustomDomain(newValue);\n });\n\n const setPreviewDomain = useCallback(\n (domain: string) => {\n if (domain === previewDomain) {\n localStorage.unset();\n } else {\n localStorage.set(domain);\n }\n },\n [previewDomain]\n );\n\n const unsetPreviewDomain = useCallback(() => {\n localStorage.unset();\n }, []);\n\n const { getSettings } = useGetWebsiteBuilderSettings();\n\n useEffect(() => {\n getSettings().then(settings => {\n setDomainFromSettings(settings.previewDomain ?? \"http://localhost:3000\");\n });\n }, []);\n\n return {\n previewDomain: customDomain ?? previewDomain,\n setPreviewDomain,\n unsetPreviewDomain,\n isOverridden: customDomain && customDomain !== previewDomain\n };\n};\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AACxD,SAASC,4BAA4B;AACrC,SAASC,0BAA0B;AAEnC,MAAMC,qBAAqB,GAAG,iCAAiC;;AAE/D;AACA;AACA;AACA;AACA,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EAClC,MAAM,CAACC,aAAa,EAAEC,qBAAqB,CAAC,GAAGN,QAAQ,CAAS,EAAE,CAAC;EAEnE,MAAM,CAACO,YAAY,EAAEC,eAAe,CAAC,GAAGR,QAAQ,CAAC,MAC7CS,MAAM,CAACC,YAAY,CAACC,OAAO,CAACR,qBAAqB,CACrD,CAAC;EAED,MAAMO,YAAY,GAAGR,0BAA0B,CAACC,qBAAqB,EAAES,QAAQ,IAAI;IAC/EJ,eAAe,CAACI,QAAQ,CAAC;EAC7B,CAAC,CAAC;EAEF,MAAMC,gBAAgB,GAAGf,WAAW,CAC/BgB,MAAc,IAAK;IAChB,IAAIA,MAAM,KAAKT,aAAa,EAAE;MAC1BK,YAAY,CAACK,KAAK,CAAC,CAAC;IACxB,CAAC,MAAM;MACHL,YAAY,CAACM,GAAG,CAACF,MAAM,CAAC;IAC5B;EACJ,CAAC,EACD,CAACT,aAAa,CAClB,CAAC;EAED,MAAMY,kBAAkB,GAAGnB,WAAW,CAAC,MAAM;IACzCY,YAAY,CAACK,KAAK,CAAC,CAAC;EACxB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM;IAAEG;EAAY,CAAC,GAAGjB,4BAA4B,CAAC,CAAC;EAEtDF,SAAS,CAAC,MAAM;IACZmB,WAAW,CAAC,CAAC,CAACC,IAAI,CAACC,QAAQ,IAAI;MAC3Bd,qBAAqB,CAACc,QAAQ,CAACf,aAAa,IAAI,uBAAuB,CAAC;IAC5E,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACHA,aAAa,EAAEE,YAAY,IAAIF,aAAa;IAC5CQ,gBAAgB;IAChBI,kBAAkB;IAClBI,YAAY,EAAEd,YAAY,IAAIA,YAAY,KAAKF;EACnD,CAAC;AACL,CAAC","ignoreList":[]}

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

@@ -1,5 +1,5 @@
-import type { Box } from "./Box";
-import type { DropZoneProximity } from "./DropZoneManager";
+import type { Box } from "./Box.js";
+import type { DropZoneProximity } from "../../../../BaseEditor/defaultConfig/Content/Preview/DropZoneManager.js";
 export interface DropEvent {
     item: {
         id?: string;

package/BaseEditor/defaultConfig/Content/Preview/useProximityDropzone.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useDropZoneManager } from "./DropZoneManagerProvider";
+import { useDropZoneManager } from "./DropZoneManagerProvider.js";
 export function useProximityDropzone({
   id,
   box

package/BaseEditor/defaultConfig/Content/Preview/useProximityDropzone.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["useEffect","useState","useDropZoneManager","useProximityDropzone","id","box","dropzoneManager","proximity","setProximity","register","onProximityChange","unregister"],"sources":["useProximityDropzone.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useDropZoneManager } from \"./DropZoneManagerProvider\";\nimport type { Box } from \"./Box\";\nimport type { DropZoneProximity } from \"~/BaseEditor/defaultConfig/Content/Preview/DropZoneManager\";\n\nexport interface DropEvent {\n item: { id?: string; componentName: string };\n target: { parentId: string; slot: string; index: number };\n}\n\ninterface UseProximityDropzoneParams {\n id: string;\n box: Box;\n}\n\nexport function useProximityDropzone({ id, box }: UseProximityDropzoneParams) {\n const dropzoneManager = useDropZoneManager();\n const [proximity, setProximity] = useState<DropZoneProximity \| null>(null);\n\n useEffect(() => {\n dropzoneManager.register({\n id,\n box,\n onProximityChange: (proximity) => {\n setProximity(proximity);\n }\n });\n\n return () => {\n dropzoneManager.unregister(id);\n };\n }, [id, box]);\n\n return { proximity };\n}\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,kBAAkB;AAc3B,OAAO,SAASC,oBAAoBA,CAAC;EAAEC,EAAE;EAAEC;AAAgC,CAAC,EAAE;EAC1E,MAAMC,eAAe,GAAGJ,kBAAkB,CAAC,CAAC;EAC5C,MAAM,CAACK,SAAS,EAAEC,YAAY,CAAC,GAAGP,QAAQ,CAA2B,IAAI,CAAC;EAE1ED,SAAS,CAAC,MAAM;IACZM,eAAe,CAACG,QAAQ,CAAC;MACrBL,EAAE;MACFC,GAAG;MACHK,iBAAiB,~~EAAGH~~,SAAS,~~IAAK~~;~~QAC9BC~~,YAAY,CAACD,SAAS,CAAC;MAC3B;IACJ,CAAC,CAAC;IAEF,OAAO,MAAM;MACTD,eAAe,CAACK,UAAU,CAACP,EAAE,CAAC;IAClC,CAAC;EACL,CAAC,EAAE,CAACA,EAAE,EAAEC,GAAG,CAAC,CAAC;EAEb,OAAO;IAAEE;EAAU,CAAC;AACxB","ignoreList":[]}
1	+ {"version":3,"names":["useEffect","useState","useDropZoneManager","useProximityDropzone","id","box","dropzoneManager","proximity","setProximity","register","onProximityChange","unregister"],"sources":["useProximityDropzone.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useDropZoneManager } from \"./DropZoneManagerProvider.js\";\nimport type { Box } from \"./Box.js\";\nimport type { DropZoneProximity } from \"~/BaseEditor/defaultConfig/Content/Preview/DropZoneManager.js\";\n\nexport interface DropEvent {\n item: { id?: string; componentName: string };\n target: { parentId: string; slot: string; index: number };\n}\n\ninterface UseProximityDropzoneParams {\n id: string;\n box: Box;\n}\n\nexport function useProximityDropzone({ id, box }: UseProximityDropzoneParams) {\n const dropzoneManager = useDropZoneManager();\n const [proximity, setProximity] = useState<DropZoneProximity \| null>(null);\n\n useEffect(() => {\n dropzoneManager.register({\n id,\n box,\n onProximityChange: proximity => {\n setProximity(proximity);\n }\n });\n\n return () => {\n dropzoneManager.unregister(id);\n };\n }, [id, box]);\n\n return { proximity };\n}\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,kBAAkB;AAc3B,OAAO,SAASC,oBAAoBA,CAAC;EAAEC,EAAE;EAAEC;AAAgC,CAAC,EAAE;EAC1E,MAAMC,eAAe,GAAGJ,kBAAkB,CAAC,CAAC;EAC5C,MAAM,CAACK,SAAS,EAAEC,YAAY,CAAC,GAAGP,QAAQ,CAA2B,IAAI,CAAC;EAE1ED,SAAS,CAAC,MAAM;IACZM,eAAe,CAACG,QAAQ,CAAC;MACrBL,EAAE;MACFC,GAAG;MACHK,iBAAiB,EAAEH,SAAS,IAAI;QAC5BC,YAAY,CAACD,SAAS,CAAC;MAC3B;IACJ,CAAC,CAAC;IAEF,OAAO,MAAM;MACTD,eAAe,CAACK,UAAU,CAACP,EAAE,CAAC;IAClC,CAAC;EACL,CAAC,EAAE,CAACA,EAAE,EAAEC,GAAG,CAAC,CAAC;EAEb,OAAO;IAAEE;EAAU,CAAC;AACxB","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/useResponsiveContainer.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
-import { useBreakpoint } from "../../../hooks/useBreakpoint";
+import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
 /**
  * Calculate the real width of the preview container, taking into account the current display mode
  * and actual container size. If the display mode width is larger than the available space, return the

package/BaseEditor/defaultConfig/Content/Preview/useResponsiveContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["useEffect","useMemo","useState","useBreakpoint","useResponsiveContainer","viewportManager","containerWidth","setContainerWidth","updateContainerWidth","width","document","body","clientWidth","onViewportChangeEnd","breakpoint","Math","min","maxWidth","name"],"sources":["useResponsiveContainer.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\nimport type { ViewportManager } from \"@webiny/website-builder-sdk\";\n\n/*\n Calculate the real width of the preview container, taking into account the current display mode\n * and actual container size. If the display mode width is larger than the available space, return the\n * width of the available space.\n */\nexport const useResponsiveContainer = (viewportManager: ViewportManager) => {\n const [containerWidth, setContainerWidth] = useState(0);\n\n useEffect(() => {\n const updateContainerWidth = () => {\n const width = document.body.clientWidth - 600;\n setContainerWidth(width);\n };\n\n updateContainerWidth();\n\n return viewportManager.onViewportChangeEnd(updateContainerWidth);\n }, []);\n\n const { breakpoint } = useBreakpoint();\n\n return useMemo(() => {\n return Math.min(containerWidth, breakpoint.maxWidth) + \"px\";\n }, [breakpoint.name, containerWidth]);\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,aAAa;AAGtB;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,sBAAsB,GAAIC,eAAgC,IAAK;EACxE,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGL,QAAQ,CAAC,CAAC,CAAC;EAEvDF,SAAS,CAAC,MAAM;IACZ,MAAMQ,oBAAoB,GAAGA,CAAA,KAAM;MAC/B,MAAMC,KAAK,GAAGC,QAAQ,CAACC,IAAI,CAACC,WAAW,GAAG,GAAG;MAC7CL,iBAAiB,CAACE,KAAK,CAAC;IAC5B,CAAC;IAEDD,oBAAoB,CAAC,CAAC;IAEtB,OAAOH,eAAe,CAACQ,mBAAmB,CAACL,oBAAoB,CAAC;EACpE,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM;IAAEM;EAAW,CAAC,GAAGX,aAAa,CAAC,CAAC;EAEtC,OAAOF,OAAO,CAAC,MAAM;IACjB,OAAOc,IAAI,CAACC,GAAG,CAACV,cAAc,EAAEQ,UAAU,CAACG,QAAQ,CAAC,GAAG,IAAI;EAC/D,CAAC,EAAE,CAACH,UAAU,CAACI,IAAI,EAAEZ,cAAc,CAAC,CAAC;AACzC,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["useEffect","useMemo","useState","useBreakpoint","useResponsiveContainer","viewportManager","containerWidth","setContainerWidth","updateContainerWidth","width","document","body","clientWidth","onViewportChangeEnd","breakpoint","Math","min","maxWidth","name"],"sources":["useResponsiveContainer.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport type { ViewportManager } from \"@webiny/website-builder-sdk\";\n\n/*\n Calculate the real width of the preview container, taking into account the current display mode\n * and actual container size. If the display mode width is larger than the available space, return the\n * width of the available space.\n */\nexport const useResponsiveContainer = (viewportManager: ViewportManager) => {\n const [containerWidth, setContainerWidth] = useState(0);\n\n useEffect(() => {\n const updateContainerWidth = () => {\n const width = document.body.clientWidth - 600;\n setContainerWidth(width);\n };\n\n updateContainerWidth();\n\n return viewportManager.onViewportChangeEnd(updateContainerWidth);\n }, []);\n\n const { breakpoint } = useBreakpoint();\n\n return useMemo(() => {\n return Math.min(containerWidth, breakpoint.maxWidth) + \"px\";\n }, [breakpoint.name, containerWidth]);\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,aAAa;AAGtB;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,sBAAsB,GAAIC,eAAgC,IAAK;EACxE,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGL,QAAQ,CAAC,CAAC,CAAC;EAEvDF,SAAS,CAAC,MAAM;IACZ,MAAMQ,oBAAoB,GAAGA,CAAA,KAAM;MAC/B,MAAMC,KAAK,GAAGC,QAAQ,CAACC,IAAI,CAACC,WAAW,GAAG,GAAG;MAC7CL,iBAAiB,CAACE,KAAK,CAAC;IAC5B,CAAC;IAEDD,oBAAoB,CAAC,CAAC;IAEtB,OAAOH,eAAe,CAACQ,mBAAmB,CAACL,oBAAoB,CAAC;EACpE,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM;IAAEM;EAAW,CAAC,GAAGX,aAAa,CAAC,CAAC;EAEtC,OAAOF,OAAO,CAAC,MAAM;IACjB,OAAOc,IAAI,CAACC,GAAG,CAACV,cAAc,EAAEQ,UAAU,CAACG,QAAQ,CAAC,GAAG,IAAI;EAC/D,CAAC,EAAE,CAACH,UAAU,CAACI,IAAI,EAAEZ,cAAc,CAAC,CAAC;AACzC,CAAC","ignoreList":[]}