npm - @webiny/app-website-builder - Versions diffs - 6.4.0-beta.3 → 6.4.0-beta.5 - Mend

@webiny/app-website-builder 6.4.0-beta.3 → 6.4.0-beta.5

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 (200) hide show

package/BaseEditor/defaultConfig/Content/AddressBar/PreviewDomain.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseEditor/defaultConfig/Content/AddressBar/PreviewDomain.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/AddressBar/PreviewDomain.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { ReactComponent as GlobeIcon } from \"@webiny/icons/language.svg\";\nimport { Button, DropdownMenu, IconButton, Separator, Input, cn } from \"@webiny/admin-ui\";\nimport { usePreviewDomain } from \"../usePreviewDomain.js\";\nimport type { GenericFormData } from \"@webiny/form\";\nimport { Bind, Form } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\n\nexport const PreviewDomain = () => {\n const editor = useDocumentEditor();\n const [isOpen, setIsOpen] = useState(false);\n\n const { previewDomain, isOverridden, unsetPreviewDomain, setPreviewDomain } =\n usePreviewDomain();\n\n const commitValue = useCallback((data: GenericFormData) => {\n const value = data.previewDomain;\n if (value.length > 0) {\n setPreviewDomain(value);\n } else {\n unsetPreviewDomain();\n }\n setIsOpen(false);\n }, []);\n\n const resetDomain = useCallback(() => {\n unsetPreviewDomain();\n setIsOpen(false);\n }, []);\n\n useEffect(() => {\n if (!previewDomain) {\n return;\n }\n\n editor.executeCommand(Commands.RefreshPreview);\n }, [previewDomain]);\n\n const classNames = cn(\~~n \~~"absolute left-0 top-0\"~~,\n~~ isOverridden ? \"fill-accent-default\" : \"~~fill-neutral-disabled~~\"\n );\n\n return (\n <DropdownMenu\n open={isOpen}\n align=\"center\"\n side=\"bottom\"\n className={\"shadow-lg\"}\n onOpenChange={setIsOpen}\n trigger={\n <IconButton\n icon={<GlobeIcon />}\n size=\"md\"\n onClick={() => {}}\n variant={\"ghost\"}\n className={classNames}\n />\n }\n >\n <div className={\"p-sm text-sm\"} style={{ width: 300 }}>\n <Form data={{ previewDomain }} onSubmit={commitValue}>\n {form => (\n <Bind name={\"previewDomain\"} validators={[validation.create(\"url\")]}>\n <Input\n autoFocus={true}\n label={\"Preview Domain\"}\n description={\n <>\n Set a custom preview domain for your session.\n <br />\n This doesn't affect other users.\n </>\n }\n size={\"md\"}\n onBlur={() => form.submit()}\n onEnter={() => form.submit()}\n note={`Hit \"Enter\" or click outside the menu to apply.`}\n />\n </Bind>\n )}\n </Form>\n {isOverridden ? (\n <>\n <Separator variant={\"dimmed\"} margin={\"lg\"} />\n <Button\n variant={\"primary\"}\n onClick={resetDomain}\n text={\"Reset Domain\"}\n size={\"sm\"}\n />\n <Separator variant={\"dimmed\"} margin={\"lg\"} />\n Resetting will revert to using the default preview domain.\n </>\n ) : null}\n </div>\n </DropdownMenu>\n );\n};\n"],"names":["PreviewDomain","editor","useDocumentEditor","isOpen","setIsOpen","useState","previewDomain","isOverridden","unsetPreviewDomain","setPreviewDomain","usePreviewDomain","commitValue","useCallback","data","value","resetDomain","useEffect","Commands","classNames","cn","DropdownMenu","IconButton","GlobeIcon","Form","form","Bind","validation","Input","Separator","Button"],"mappings":";;;;;;;;AAUO,MAAMA,gBAAgB;IACzB,MAAMC,SAASC;IACf,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAAS;IAErC,MAAM,EAAEC,aAAa,EAAEC,YAAY,EAAEC,kBAAkB,EAAEC,gBAAgB,EAAE,GACvEC;IAEJ,MAAMC,cAAcC,YAAY,CAACC;QAC7B,MAAMC,QAAQD,KAAK,aAAa;QAChC,IAAIC,MAAM,MAAM,GAAG,GACfL,iBAAiBK;aAEjBN;QAEJJ,UAAU;IACd,GAAG,EAAE;IAEL,MAAMW,cAAcH,YAAY;QAC5BJ;QACAJ,UAAU;IACd,GAAG,EAAE;IAELY,UAAU;QACN,IAAI,CAACV,eACD;QAGJL,OAAO,cAAc,CAACgB,SAAS,cAAc;IACjD,GAAG;QAACX;KAAc;IAElB,MAAMY,aAAaC,~~GACf~~,~~yBACAZ~~,eAAe,wBAAwB;~~IAG3C~~,OAAO,WAAP,GACI,oBAACa,cAAYA;QACT,MAAMjB;QACN,OAAM;QACN,MAAK;QACL,WAAW;QACX,cAAcC;QACd,uBACI,oBAACiB,YAAUA;YACP,oBAAM,oBAACC,gBAASA;YAChB,MAAK;YACL,SAAS,KAAO;YAChB,SAAS;YACT,WAAWJ;;qBAInB,oBAAC;QAAI,WAAW;QAAgB,OAAO;YAAE,OAAO;QAAI;qBAChD,oBAACK,MAAIA;QAAC,MAAM;YAAEjB;QAAc;QAAG,UAAUK;OACpCa,CAAAA,OAAAA,WAAAA,GACG,oBAACC,MAAIA;YAAC,MAAM;YAAiB,YAAY;gBAACC,WAAW,MAAM,CAAC;aAAO;yBAC/D,oBAACC,OAAKA;YACF,WAAW;YACX,OAAO;YACP,2BACI,0CAAE,+DAEE,oBAAC,aAAK;YAId,MAAM;YACN,QAAQ,IAAMH,KAAK,MAAM;YACzB,SAAS,IAAMA,KAAK,MAAM;YAC1B,MAAM;cAKrBjB,eAAe,WAAfA,GACG,wDACI,oBAACqB,WAASA;QAAC,SAAS;QAAU,QAAQ;sBACtC,oBAACC,QAAMA;QACH,SAAS;QACT,SAASd;QACT,MAAM;QACN,MAAM;sBAEV,oBAACa,WAASA;QAAC,SAAS;QAAU,QAAQ;QAAQ,gEAGlD;AAIpB"}
1	+ {"version":3,"file":"BaseEditor/defaultConfig/Content/AddressBar/PreviewDomain.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/AddressBar/PreviewDomain.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { ReactComponent as GlobeIcon } from \"@webiny/icons/language.svg\";\nimport { Button, DropdownMenu, IconButton, Separator, Input, cn } from \"@webiny/admin-ui\";\nimport { usePreviewDomain } from \"../usePreviewDomain.js\";\nimport type { GenericFormData } from \"@webiny/form\";\nimport { Bind, Form } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\n\nexport const PreviewDomain = () => {\n const editor = useDocumentEditor();\n const [isOpen, setIsOpen] = useState(false);\n\n const { previewDomain, isOverridden, unsetPreviewDomain, setPreviewDomain } =\n usePreviewDomain();\n\n const commitValue = useCallback((data: GenericFormData) => {\n const value = data.previewDomain;\n if (value.length > 0) {\n setPreviewDomain(value);\n } else {\n unsetPreviewDomain();\n }\n setIsOpen(false);\n }, []);\n\n const resetDomain = useCallback(() => {\n unsetPreviewDomain();\n setIsOpen(false);\n }, []);\n\n useEffect(() => {\n if (!previewDomain) {\n return;\n }\n\n editor.executeCommand(Commands.RefreshPreview);\n }, [previewDomain]);\n\n const classNames = cn(\"absolute left-0 top-0\", isOverridden ? \"fill-accent-default\" : \"\");\n\n return (\n <DropdownMenu\n open={isOpen}\n align=\"center\"\n side=\"bottom\"\n className={\"shadow-lg\"}\n onOpenChange={setIsOpen}\n trigger={\n <IconButton\n icon={<GlobeIcon />}\n size=\"md\"\n onClick={() => {}}\n variant={\"ghost\"}\n className={classNames}\n />\n }\n >\n <div className={\"p-sm text-sm\"} style={{ width: 300 }}>\n <Form data={{ previewDomain }} onSubmit={commitValue}>\n {form => (\n <Bind name={\"previewDomain\"} validators={[validation.create(\"url\")]}>\n <Input\n autoFocus={true}\n label={\"Preview Domain\"}\n description={\n <>\n Set a custom preview domain for your session.\n <br />\n This doesn't affect other users.\n </>\n }\n size={\"md\"}\n onBlur={() => form.submit()}\n onEnter={() => form.submit()}\n note={`Hit \"Enter\" or click outside the menu to apply.`}\n />\n </Bind>\n )}\n </Form>\n {isOverridden ? (\n <>\n <Separator variant={\"dimmed\"} margin={\"lg\"} />\n <Button\n variant={\"primary\"}\n onClick={resetDomain}\n text={\"Reset Domain\"}\n size={\"sm\"}\n />\n <Separator variant={\"dimmed\"} margin={\"lg\"} />\n Resetting will revert to using the default preview domain.\n </>\n ) : null}\n </div>\n </DropdownMenu>\n );\n};\n"],"names":["PreviewDomain","editor","useDocumentEditor","isOpen","setIsOpen","useState","previewDomain","isOverridden","unsetPreviewDomain","setPreviewDomain","usePreviewDomain","commitValue","useCallback","data","value","resetDomain","useEffect","Commands","classNames","cn","DropdownMenu","IconButton","GlobeIcon","Form","form","Bind","validation","Input","Separator","Button"],"mappings":";;;;;;;;AAUO,MAAMA,gBAAgB;IACzB,MAAMC,SAASC;IACf,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAAS;IAErC,MAAM,EAAEC,aAAa,EAAEC,YAAY,EAAEC,kBAAkB,EAAEC,gBAAgB,EAAE,GACvEC;IAEJ,MAAMC,cAAcC,YAAY,CAACC;QAC7B,MAAMC,QAAQD,KAAK,aAAa;QAChC,IAAIC,MAAM,MAAM,GAAG,GACfL,iBAAiBK;aAEjBN;QAEJJ,UAAU;IACd,GAAG,EAAE;IAEL,MAAMW,cAAcH,YAAY;QAC5BJ;QACAJ,UAAU;IACd,GAAG,EAAE;IAELY,UAAU;QACN,IAAI,CAACV,eACD;QAGJL,OAAO,cAAc,CAACgB,SAAS,cAAc;IACjD,GAAG;QAACX;KAAc;IAElB,MAAMY,aAAaC,GAAG,yBAAyBZ,eAAe,wBAAwB;IAEtF,OAAO,WAAP,GACI,oBAACa,cAAYA;QACT,MAAMjB;QACN,OAAM;QACN,MAAK;QACL,WAAW;QACX,cAAcC;QACd,uBACI,oBAACiB,YAAUA;YACP,oBAAM,oBAACC,gBAASA;YAChB,MAAK;YACL,SAAS,KAAO;YAChB,SAAS;YACT,WAAWJ;;qBAInB,oBAAC;QAAI,WAAW;QAAgB,OAAO;YAAE,OAAO;QAAI;qBAChD,oBAACK,MAAIA;QAAC,MAAM;YAAEjB;QAAc;QAAG,UAAUK;OACpCa,CAAAA,OAAAA,WAAAA,GACG,oBAACC,MAAIA;YAAC,MAAM;YAAiB,YAAY;gBAACC,WAAW,MAAM,CAAC;aAAO;yBAC/D,oBAACC,OAAKA;YACF,WAAW;YACX,OAAO;YACP,2BACI,0CAAE,+DAEE,oBAAC,aAAK;YAId,MAAM;YACN,QAAQ,IAAMH,KAAK,MAAM;YACzB,SAAS,IAAMA,KAAK,MAAM;YAC1B,MAAM;cAKrBjB,eAAe,WAAfA,GACG,wDACI,oBAACqB,WAASA;QAAC,SAAS;QAAU,QAAQ;sBACtC,oBAACC,QAAMA;QACH,SAAS;QACT,SAASd;QACT,MAAM;QACN,MAAM;sBAEV,oBAACa,WAASA;QAAC,SAAS;QAAU,QAAQ;QAAQ,gEAGlD;AAIpB"}

package/BaseEditor/defaultConfig/Content/Breadcrumbs/styles.js CHANGED Viewed

@@ -5,9 +5,9 @@ const breadcrumbs = css({
     flexDirection: "row",
     padding: 0,
     position: "absolute",
-    left: 300,
+    left: "var(--wb-spacing-toolbar)",
     bottom: 0,
-    width: "calc(100% - 600px)",
+    width: "calc(100% - calc(var(--wb-spacing-sidebar) * 2))",
     height: "31px",
     backgroundColor: "var(--color-neutral-dimmed)",
     borderTop: "1px solid var( --color-neutral-dimmed)",

package/BaseEditor/defaultConfig/Content/Breadcrumbs/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseEditor/defaultConfig/Content/Breadcrumbs/styles.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Breadcrumbs/styles.ts"],"sourcesContent":["import { css } from \"@emotion/css\";\n\nexport const breadcrumbs = css({\n display: \"flex\",\n zIndex: 100,\n flexDirection: \"row\",\n padding: 0,\n position: \"absolute\",\n left: ~~300~~,\n bottom: 0,\n width: \"calc(100% - ~~600px~~)\",\n height: \"31px\",\n backgroundColor: \"var(--color-neutral-dimmed)\",\n borderTop: \"1px solid var( --color-neutral-dimmed)\",\n fontSize: \"12px\",\n overflow: \"hidden\",\n \"> li\": {\n cursor: \"pointer\",\n display: \"flex\",\n \"& .element\": {\n color: \"var(--text-neutral-strong)\",\n textDecoration: \"none\",\n textTransform: \"capitalize\",\n padding: \"5px 0 5px 30px\",\n background: \"hsla(300, 2%, calc(92% - var(--element-count) * 1%), 1)\",\n position: \"relative\",\n display: \"block\"\n },\n \"& .element::after\": {\n content: '\" \"',\n display: \"block\",\n width: \"0\",\n height: \"0\",\n borderTop: \"50px solid transparent\",\n borderBottom: \"50px solid transparent\",\n borderLeft: \"20px solid hsla(300, 2%, calc(92% - var(--element-count) * 1%), 1) \",\n position: \"absolute\",\n top: \"50%\",\n marginTop: \"-50px\",\n left: \"100%\",\n zIndex: 2\n },\n \"& .element::before\": {\n content: '\" \"',\n display: \"block\",\n width: \"0\",\n height: \"0\",\n borderTop: \"50px solid transparent\",\n borderBottom: \"50px solid transparent\",\n borderLeft: \"20px solid hsla(0, 0%, 100%, 1)\",\n position: \"absolute\",\n top: \"50%\",\n marginTop: \"-50px\",\n marginLeft: \"1px\",\n left: \"100%\",\n zIndex: 1\n }\n },\n \"& li:first-child .element\": { paddingLeft: \"10px\" },\n\n // Handle active state\n \"& li .element:hover\": {\n background: \"var(--color-neutral-muted)\"\n },\n \"& li .element:hover:after\": {\n borderLeftColor: \"var(--color-neutral-muted) !important\"\n }\n});\n"],"names":["breadcrumbs","css"],"mappings":";AAEO,MAAMA,cAAcC,IAAI;IAC3B,SAAS;IACT,QAAQ;IACR,eAAe;IACf,SAAS;IACT,UAAU;IACV,MAAM;IACN,QAAQ;IACR,OAAO;IACP,QAAQ;IACR,iBAAiB;IACjB,WAAW;IACX,UAAU;IACV,UAAU;IACV,QAAQ;QACJ,QAAQ;QACR,SAAS;QACT,cAAc;YACV,OAAO;YACP,gBAAgB;YAChB,eAAe;YACf,SAAS;YACT,YAAY;YACZ,UAAU;YACV,SAAS;QACb;QACA,qBAAqB;YACjB,SAAS;YACT,SAAS;YACT,OAAO;YACP,QAAQ;YACR,WAAW;YACX,cAAc;YACd,YAAY;YACZ,UAAU;YACV,KAAK;YACL,WAAW;YACX,MAAM;YACN,QAAQ;QACZ;QACA,sBAAsB;YAClB,SAAS;YACT,SAAS;YACT,OAAO;YACP,QAAQ;YACR,WAAW;YACX,cAAc;YACd,YAAY;YACZ,UAAU;YACV,KAAK;YACL,WAAW;YACX,YAAY;YACZ,MAAM;YACN,QAAQ;QACZ;IACJ;IACA,6BAA6B;QAAE,aAAa;IAAO;IAGnD,uBAAuB;QACnB,YAAY;IAChB;IACA,6BAA6B;QACzB,iBAAiB;IACrB;AACJ"}
1	+ {"version":3,"file":"BaseEditor/defaultConfig/Content/Breadcrumbs/styles.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Breadcrumbs/styles.ts"],"sourcesContent":["import { css } from \"@emotion/css\";\n\nexport const breadcrumbs = css({\n display: \"flex\",\n zIndex: 100,\n flexDirection: \"row\",\n padding: 0,\n position: \"absolute\",\n left: \"var(--wb-spacing-toolbar)\",\n bottom: 0,\n width: \"calc(100% - calc(var(--wb-spacing-sidebar) * 2))\",\n height: \"31px\",\n backgroundColor: \"var(--color-neutral-dimmed)\",\n borderTop: \"1px solid var( --color-neutral-dimmed)\",\n fontSize: \"12px\",\n overflow: \"hidden\",\n \"> li\": {\n cursor: \"pointer\",\n display: \"flex\",\n \"& .element\": {\n color: \"var(--text-neutral-strong)\",\n textDecoration: \"none\",\n textTransform: \"capitalize\",\n padding: \"5px 0 5px 30px\",\n background: \"hsla(300, 2%, calc(92% - var(--element-count) * 1%), 1)\",\n position: \"relative\",\n display: \"block\"\n },\n \"& .element::after\": {\n content: '\" \"',\n display: \"block\",\n width: \"0\",\n height: \"0\",\n borderTop: \"50px solid transparent\",\n borderBottom: \"50px solid transparent\",\n borderLeft: \"20px solid hsla(300, 2%, calc(92% - var(--element-count) * 1%), 1) \",\n position: \"absolute\",\n top: \"50%\",\n marginTop: \"-50px\",\n left: \"100%\",\n zIndex: 2\n },\n \"& .element::before\": {\n content: '\" \"',\n display: \"block\",\n width: \"0\",\n height: \"0\",\n borderTop: \"50px solid transparent\",\n borderBottom: \"50px solid transparent\",\n borderLeft: \"20px solid hsla(0, 0%, 100%, 1)\",\n position: \"absolute\",\n top: \"50%\",\n marginTop: \"-50px\",\n marginLeft: \"1px\",\n left: \"100%\",\n zIndex: 1\n }\n },\n \"& li:first-child .element\": { paddingLeft: \"10px\" },\n\n // Handle active state\n \"& li .element:hover\": {\n background: \"var(--color-neutral-muted)\"\n },\n \"& li .element:hover:after\": {\n borderLeftColor: \"var(--color-neutral-muted) !important\"\n }\n});\n"],"names":["breadcrumbs","css"],"mappings":";AAEO,MAAMA,cAAcC,IAAI;IAC3B,SAAS;IACT,QAAQ;IACR,eAAe;IACf,SAAS;IACT,UAAU;IACV,MAAM;IACN,QAAQ;IACR,OAAO;IACP,QAAQ;IACR,iBAAiB;IACjB,WAAW;IACX,UAAU;IACV,UAAU;IACV,QAAQ;QACJ,QAAQ;QACR,SAAS;QACT,cAAc;YACV,OAAO;YACP,gBAAgB;YAChB,eAAe;YACf,SAAS;YACT,YAAY;YACZ,UAAU;YACV,SAAS;QACb;QACA,qBAAqB;YACjB,SAAS;YACT,SAAS;YACT,OAAO;YACP,QAAQ;YACR,WAAW;YACX,cAAc;YACd,YAAY;YACZ,UAAU;YACV,KAAK;YACL,WAAW;YACX,MAAM;YACN,QAAQ;QACZ;QACA,sBAAsB;YAClB,SAAS;YACT,SAAS;YACT,OAAO;YACP,QAAQ;YACR,WAAW;YACX,cAAc;YACd,YAAY;YACZ,UAAU;YACV,KAAK;YACL,WAAW;YACX,YAAY;YACZ,MAAM;YACN,QAAQ;QACZ;IACJ;IACA,6BAA6B;QAAE,aAAa;IAAO;IAGnD,uBAAuB;QACnB,YAAY;IAChB;IACA,6BAA6B;QACzB,iBAAiB;IACrB;AACJ"}

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

@@ -3,9 +3,14 @@ import { EditorConfig } from "../../index.js";
 import { Breadcrumbs } from "./Breadcrumbs/index.js";
 import { DocumentPreview } from "./Preview/DocumentPreview.js";
 import { AddressBar } from "./AddressBar/AddressBar.js";
+import { BreakpointSelector } from "./AddressBar/BreakpointSelector.js";
 const ContentPreviewConfig = ()=>{
     const { Ui } = EditorConfig;
-    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Ui.Content.Element, {
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Ui.TopBar.Element, {
+        name: "breakpointSelector",
+        group: "center",
+        element: /*#__PURE__*/ react.createElement(BreakpointSelector, null)
+    }), /*#__PURE__*/ react.createElement(Ui.Content.Element, {
         name: "addressBar",
         element: /*#__PURE__*/ react.createElement(AddressBar, null)
     }), /*#__PURE__*/ react.createElement(Ui.Content.Element, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseEditor/defaultConfig/Content/ContentPreviewConfig.js","sources":["../../../../src/BaseEditor/defaultConfig/Content/ContentPreviewConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport { EditorConfig } from \"~/BaseEditor/index.js\";\nimport { Breadcrumbs } from \"./Breadcrumbs/index.js\";\nimport { DocumentPreview } from \"./Preview/DocumentPreview.js\";\nimport { AddressBar } from \"./AddressBar/AddressBar.js\";\n\nexport const ContentPreviewConfig = () => {\n const { Ui } = EditorConfig;\n\n return (\n <>\n <Ui.Content.Element name=\"addressBar\" element={<AddressBar />} />\n <Ui.Content.Element name=\"iframe\" element={<DocumentPreview />} />\n <Ui.Content.Element\n name={\"breadcrumbs\"}\n element={\n <Ui.IsNotReadOnly>\n <Breadcrumbs />\n </Ui.IsNotReadOnly>\n }\n />\n </>\n );\n};\n"],"names":["ContentPreviewConfig","Ui","EditorConfig","AddressBar","DocumentPreview","Breadcrumbs"],"mappings":"~~;;;;;AAMO~~,MAAMA,uBAAuB;IAChC,MAAM,EAAEC,EAAE,EAAE,GAAGC;IAEf,OAAO,WAAP,GACI,wDACI,oBAACD,GAAG,OAAO,CAAC,OAAO;QAAC,MAAK;QAAa,uBAAS,~~oBAACE~~,YAAUA;sBAC1D,~~oBAACF~~,GAAG,OAAO,CAAC,OAAO;QAAC,MAAK;QAAS,uBAAS,~~oBAACG~~,iBAAeA;sBAC3D,~~oBAACH~~,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,uBACI,oBAACA,GAAG,aAAa,sBACb,~~oBAACI~~,aAAWA;;AAMpC"}
1	+ {"version":3,"file":"BaseEditor/defaultConfig/Content/ContentPreviewConfig.js","sources":["../../../../src/BaseEditor/defaultConfig/Content/ContentPreviewConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport { EditorConfig } from \"~/BaseEditor/index.js\";\nimport { Breadcrumbs } from \"./Breadcrumbs/index.js\";\nimport { DocumentPreview } from \"./Preview/DocumentPreview.js\";\nimport { AddressBar } from \"./AddressBar/AddressBar.js\";\nimport { BreakpointSelector } from \"./AddressBar/BreakpointSelector.js\";\n\nexport const ContentPreviewConfig = () => {\n const { Ui } = EditorConfig;\n\n return (\n <>\n <Ui.TopBar.Element\n name={\"breakpointSelector\"}\n group={\"center\"}\n element={<BreakpointSelector />}\n />\n <Ui.Content.Element name=\"addressBar\" element={<AddressBar />} />\n <Ui.Content.Element name=\"iframe\" element={<DocumentPreview />} />\n <Ui.Content.Element\n name={\"breadcrumbs\"}\n element={\n <Ui.IsNotReadOnly>\n <Breadcrumbs />\n </Ui.IsNotReadOnly>\n }\n />\n </>\n );\n};\n"],"names":["ContentPreviewConfig","Ui","EditorConfig","BreakpointSelector","AddressBar","DocumentPreview","Breadcrumbs"],"mappings":";;;;;;AAOO,MAAMA,uBAAuB;IAChC,MAAM,EAAEC,EAAE,EAAE,GAAGC;IAEf,OAAO,WAAP,GACI,wDACI,oBAACD,GAAG,MAAM,CAAC,OAAO;QACd,MAAM;QACN,OAAO;QACP,uBAAS,oBAACE,oBAAkBA;sBAEhC,oBAACF,GAAG,OAAO,CAAC,OAAO;QAAC,MAAK;QAAa,uBAAS,oBAACG,YAAUA;sBAC1D,oBAACH,GAAG,OAAO,CAAC,OAAO;QAAC,MAAK;QAAS,uBAAS,oBAACI,iBAAeA;sBAC3D,oBAACJ,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,uBACI,oBAACA,GAAG,aAAa,sBACb,oBAACK,aAAWA;;AAMpC"}

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

@@ -1,5 +1,6 @@
 import type { Box } from "./Box.js";
 type DropPosition = number | null;
+type MatchChangeCallback = (hasMatch: boolean) => void;
 export interface DropZoneProximity {
     box: Box;
     position: DropPosition;
@@ -17,12 +18,14 @@ export declare class DropZoneManager {
     private currentPosition;
     private animationFrame;
     private currentBox;
+    private matchCallbacks;
     constructor(mouse: {
         x: number;
         y: number;
     });
     register(entry: DropzoneEntry): void;
     unregister(id: string): void;
+    subscribeToMatchChange(cb: MatchChangeCallback): () => void;
     start(): void;
     stop(): void;
     getLastMatchedPosition(): {

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

@@ -6,6 +6,7 @@ class DropZoneManager {
         this.currentPosition = null;
         this.animationFrame = null;
         this.currentBox = null;
+        this.matchCallbacks = new Set();
     }
     register(entry) {
         if ("root" === entry.id) return;
@@ -14,6 +15,10 @@ class DropZoneManager {
     unregister(id) {
         this.zones.delete(id);
     }
+    subscribeToMatchChange(cb) {
+        this.matchCallbacks.add(cb);
+        return ()=>this.matchCallbacks.delete(cb);
+    }
     start() {
         const runDropzoneLoop = ()=>{
             this.tick();
@@ -93,6 +98,7 @@ class DropZoneManager {
             this.currentTargetId = matchedId;
             this.currentPosition = matchedPosition;
             this.currentBox = matchedBox;
+            this.matchCallbacks.forEach((cb)=>cb(null !== matchedId));
             for (const [id, entry] of this.zones){
                 const isTarget = id === matchedId;
                 entry.onProximityChange(isTarget ? {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/DropZoneManager.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Preview/DropZoneManager.ts"],"sourcesContent":["import type { Box } from \"./Box.js\";\n\ntype DropPosition = number \| null;\n\nexport interface DropZoneProximity {\n box: Box;\n position: DropPosition;\n}\n\ninterface DropzoneEntry {\n id: string;\n box: Box;\n canAccept?: () => boolean;\n onProximityChange: (proximity: DropZoneProximity \| null) => void;\n}\n\nexport class DropZoneManager {\n private zones = new Map<string, DropzoneEntry>();\n private currentTargetId: string \| null = null;\n private currentPosition: DropPosition = null;\n private animationFrame: number \| null = null;\n private currentBox: Box \| null = null;\n\n constructor(private mouse: { x: number; y: number }) {}\n\n register(entry: DropzoneEntry) {\n if (entry.id === \"root\") {\n return;\n }\n\n this.zones.set(entry.id, entry);\n }\n\n unregister(id: string) {\n this.zones.delete(id);\n }\n\n start() {\n const runDropzoneLoop = () => {\n this.tick();\n this.animationFrame = requestAnimationFrame(runDropzoneLoop);\n };\n this.animationFrame = requestAnimationFrame(runDropzoneLoop);\n }\n\n stop() {\n if (this.animationFrame) {\n cancelAnimationFrame(this.animationFrame);\n }\n }\n\n getLastMatchedPosition() {\n if (!this.currentBox) {\n return null;\n }\n\n return {\n parentId: this.currentBox.parentId,\n slot: this.currentBox.parentSlot,\n index: this.currentBox.parentIndex + (this.currentPosition ?? 0)\n };\n }\n\n tick() {\n const scrollYOffset = this.getScrollOffset();\n const threshold = 10;\n const mouseX = this.mouse.x;\n const mouseY = this.mouse.y + scrollYOffset;\n\n let matchedId: string \| null = null;\n let matchedPosition: DropPosition = null;\n let matchedBox: Box \| null = null;\n\n // Collect all candidate matches with their canAccept callback.\n const candidates: { id: string; box: Box; position: number; canAccept?: () => boolean }[] =\n [];\n\n for (const [id, { box, canAccept }] of this.zones) {\n const isWithinX = mouseX >= box.left && mouseX <= box.right;\n\n if (!isWithinX) {\n continue;\n }\n\n if (Math.abs(mouseY - box.top) <= threshold) {\n candidates.push({ id, box, position: 0, canAccept });\n }\n\n if (Math.abs(mouseY - box.bottom) <= threshold) {\n candidates.push({ id, box, position: 1, canAccept });\n }\n }\n\n if (candidates.length > 0) {\n // Filter to only eligible candidates.\n const eligible = candidates.filter(c => !c.canAccept \|\| c.canAccept());\n\n if (eligible.length > 0) {\n const uniqueDepths = [...new Set(eligible.map(c => c.box.depth))].sort(\n (a, b) => b - a\n );\n\n if (uniqueDepths.length === 1) {\n const winner = eligible[0];\n matchedId = winner.id;\n matchedPosition = winner.position;\n matchedBox = winner.box;\n } else {\n // Use X position to select depth band among eligible candidates only.\n let rangeLeft = Infinity;\n let rangeRight = -Infinity;\n for (const c of eligible) {\n rangeLeft = Math.min(rangeLeft, c.box.left);\n rangeRight = Math.max(rangeRight, c.box.right);\n }\n\n const centerX = (rangeLeft + rangeRight) / 2;\n const halfWidth = (rangeRight - rangeLeft) / 2;\n\n // 0 at center, 1 at edges.\n const distFromCenter =\n halfWidth > 0 ? Math.abs(mouseX - centerX) / halfWidth : 0;\n\n // Map distance to depth index: center → 0 (deepest), edges → last (shallowest).\n const depthIndex = Math.min(\n Math.floor(distFromCenter * uniqueDepths.length),\n uniqueDepths.length - 1\n );\n\n const winner = eligible.find(c => c.box.depth === uniqueDepths[depthIndex]);\n if (winner) {\n matchedId = winner.id;\n matchedPosition = winner.position;\n matchedBox = winner.box;\n }\n }\n }\n }\n\n if (matchedId !== this.currentTargetId \|\| matchedPosition !== this.currentPosition) {\n this.currentTargetId = matchedId;\n this.currentPosition = matchedPosition;\n this.currentBox = matchedBox;\n\n for (const [id, entry] of this.zones) {\n const isTarget = id === matchedId;\n entry.onProximityChange(\n isTarget ? { box: matchedBox!, position: matchedPosition } : null\n );\n }\n }\n }\n\n private getScrollOffset() {\n const container = document.getElementById(\"preview-container\");\n if (!container) {\n return 0;\n }\n\n return container.scrollTop;\n }\n}\n"],"names":["DropZoneManager","mouse","Map","entry","id","runDropzoneLoop","requestAnimationFrame","cancelAnimationFrame","scrollYOffset","threshold","mouseX","mouseY","matchedId","matchedPosition","matchedBox","candidates","box","canAccept","isWithinX","Math","eligible","c","uniqueDepths","~~Set","~~a","b","winner","rangeLeft","Infinity","rangeRight","centerX","halfWidth","distFromCenter","depthIndex","isTarget","container","document"],"mappings":"~~AAgBO~~,MAAMA;~~IAOT~~,YAAoBC,KAA+B,CAAE;aAAjCA,KAAK,GAALA;~~aANZ~~,KAAK,GAAG,IAAIC;aACZ,eAAe,GAAkB;aACjC,eAAe,GAAiB;aAChC,cAAc,GAAkB;aAChC,UAAU,GAAe;~~IAEqB~~;IAEtD,SAASC,KAAoB,EAAE;QAC3B,IAAIA,AAAa,WAAbA,MAAM,EAAE,EACR;QAGJ,IAAI,CAAC,KAAK,CAAC,GAAG,CAACA,MAAM,EAAE,EAAEA;IAC7B;IAEA,WAAWC,EAAU,EAAE;QACnB,IAAI,CAAC,KAAK,CAAC,MAAM,CAACA;IACtB;IAEA,QAAQ;QACJ,MAAMC,kBAAkB;YACpB,IAAI,CAAC,IAAI;YACT,IAAI,CAAC,cAAc,GAAGC,sBAAsBD;QAChD;QACA,IAAI,CAAC,cAAc,GAAGC,sBAAsBD;IAChD;IAEA,OAAO;QACH,IAAI,IAAI,CAAC,cAAc,EACnBE,qBAAqB,IAAI,CAAC,cAAc;IAEhD;IAEA,yBAAyB;QACrB,IAAI,CAAC,IAAI,CAAC,UAAU,EAChB,OAAO;QAGX,OAAO;YACH,UAAU,IAAI,CAAC,UAAU,CAAC,QAAQ;YAClC,MAAM,IAAI,CAAC,UAAU,CAAC,UAAU;YAChC,OAAO,IAAI,CAAC,UAAU,CAAC,WAAW,GAAI,KAAI,CAAC,eAAe,IAAI;QAClE;IACJ;IAEA,OAAO;QACH,MAAMC,gBAAgB,IAAI,CAAC,eAAe;QAC1C,MAAMC,YAAY;QAClB,MAAMC,SAAS,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3B,MAAMC,SAAS,IAAI,CAAC,KAAK,CAAC,CAAC,GAAGH;QAE9B,IAAII,YAA2B;QAC/B,IAAIC,kBAAgC;QACpC,IAAIC,aAAyB;QAG7B,MAAMC,aACF,EAAE;QAEN,KAAK,MAAM,~~CAACX~~,IAAI,~~EAAEY~~,GAAG,EAAEC,SAAS,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,CAAE;YAC/C,MAAMC,YAAYR,UAAUM,IAAI,IAAI,IAAIN,UAAUM,IAAI,KAAK;YAE3D,IAAKE;gBAIL,IAAIC,KAAK,GAAG,CAACR,SAASK,IAAI,GAAG,KAAKP,WAC9BM,WAAW,IAAI,CAAC;~~oBAAEX~~;~~oBAAIY~~;oBAAK,UAAU;oBAAGC;gBAAU;gBAGtD,IAAIE,KAAK,GAAG,CAACR,SAASK,IAAI,MAAM,KAAKP,WACjCM,WAAW,IAAI,CAAC;~~oBAAEX~~;~~oBAAIY~~;oBAAK,UAAU;oBAAGC;gBAAU;;QAE1D;QAEA,IAAIF,WAAW,MAAM,GAAG,GAAG;YAEvB,MAAMK,WAAWL,WAAW,MAAM,CAACM,CAAAA,IAAK,CAACA,EAAE,SAAS,IAAIA,EAAE,SAAS;YAEnE,IAAID,SAAS,MAAM,GAAG,GAAG;gBACrB,MAAME,eAAe;uBAAI,~~IAAIC~~,~~IAAIH~~,SAAS,GAAG,CAACC,CAAAA,IAAKA,EAAE,GAAG,CAAC,KAAK;iBAAG,CAAC,IAAI,CAClE,~~CAACG~~,GAAGC,IAAMA,IAAID;gBAGlB,~~IAAIF~~,AAAwB,MAAxBA,aAAa,MAAM,EAAQ;oBAC3B,~~MAAMI~~,~~SAASN~~,QAAQ,CAAC,EAAE;oBAC1BR,~~YAAYc~~,OAAO,EAAE;~~oBACrBb~~,~~kBAAkBa~~,OAAO,QAAQ;~~oBACjCZ~~,~~aAAaY~~,OAAO,GAAG;gBAC3B,OAAO;oBAEH,IAAIC,YAAYC;oBAChB,IAAIC,aAAa,CAACD;oBAClB,KAAK,~~MAAMP~~,KAAKD,SAAU;~~wBACtBO~~,~~YAAYR~~,KAAK,GAAG,~~CAACQ~~,~~WAAWN~~,EAAE,GAAG,CAAC,IAAI;~~wBAC1CQ~~,~~aAAaV~~,KAAK,GAAG,~~CAACU~~,~~YAAYR~~,EAAE,GAAG,CAAC,KAAK;oBACjD;oBAEA,~~MAAMS~~,UAAWH,AAAAA,CAAAA,YAAYE,UAAS,IAAK;oBAC3C,MAAME,YAAaF,AAAAA,CAAAA,aAAaF,SAAQ,IAAK;oBAG7C,MAAMK,iBACFD,YAAY,~~IAAIZ~~,KAAK,GAAG,CAACT,~~SAASoB~~,WAAWC,YAAY;oBAG7D,MAAME,~~aAAad~~,KAAK,GAAG,CACvBA,KAAK,KAAK,~~CAACa~~,~~iBAAiBV~~,aAAa,MAAM,GAC/CA,aAAa,MAAM,GAAG;oBAG1B,~~MAAMI~~,~~SAASN~~,SAAS,IAAI,CAACC,CAAAA,IAAKA,EAAE,GAAG,CAAC,KAAK,KAAKC,YAAY,~~CAACW~~,WAAW;oBAC1E,IAAIP,QAAQ;~~wBACRd~~,~~YAAYc~~,OAAO,EAAE;~~wBACrBb~~,~~kBAAkBa~~,OAAO,QAAQ;~~wBACjCZ~~,~~aAAaY~~,OAAO,GAAG;oBAC3B;gBACJ;YACJ;QACJ;QAEA,~~IAAId~~,cAAc,IAAI,CAAC,eAAe,IAAIC,oBAAoB,IAAI,CAAC,eAAe,EAAE;YAChF,IAAI,CAAC,eAAe,GAAGD;YACvB,IAAI,CAAC,eAAe,GAAGC;YACvB,IAAI,CAAC,UAAU,GAAGC;YAElB,KAAK,MAAM,~~CAACV~~,IAAID,MAAM,IAAI,IAAI,CAAC,KAAK,CAAE;gBAClC,MAAM+B,WAAW9B,~~OAAOQ~~;~~gBACxBT~~,MAAM,iBAAiB,CACnB+B,WAAW;oBAAE,~~KAAKpB~~;oBAAa,UAAUD;gBAAgB,IAAI;YAErE;QACJ;IACJ;IAEQ,kBAAkB;QACtB,~~MAAMsB~~,YAAYC,SAAS,cAAc,CAAC;QAC1C,IAAI,CAACD,WACD,OAAO;QAGX,OAAOA,UAAU,SAAS;IAC9B;AACJ"}
1	+ {"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/DropZoneManager.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Preview/DropZoneManager.ts"],"sourcesContent":["import type { Box } from \"./Box.js\";\n\ntype DropPosition = number \| null;\ntype MatchChangeCallback = (hasMatch: boolean) => void;\n\nexport interface DropZoneProximity {\n box: Box;\n position: DropPosition;\n}\n\ninterface DropzoneEntry {\n id: string;\n box: Box;\n canAccept?: () => boolean;\n onProximityChange: (proximity: DropZoneProximity \| null) => void;\n}\n\nexport class DropZoneManager {\n private zones = new Map<string, DropzoneEntry>();\n private currentTargetId: string \| null = null;\n private currentPosition: DropPosition = null;\n private animationFrame: number \| null = null;\n private currentBox: Box \| null = null;\n private matchCallbacks = new Set<MatchChangeCallback>();\n\n constructor(private mouse: { x: number; y: number }) {}\n\n register(entry: DropzoneEntry) {\n if (entry.id === \"root\") {\n return;\n }\n\n this.zones.set(entry.id, entry);\n }\n\n unregister(id: string) {\n this.zones.delete(id);\n }\n\n subscribeToMatchChange(cb: MatchChangeCallback): () => void {\n this.matchCallbacks.add(cb);\n return () => this.matchCallbacks.delete(cb);\n }\n\n start() {\n const runDropzoneLoop = () => {\n this.tick();\n this.animationFrame = requestAnimationFrame(runDropzoneLoop);\n };\n this.animationFrame = requestAnimationFrame(runDropzoneLoop);\n }\n\n stop() {\n if (this.animationFrame) {\n cancelAnimationFrame(this.animationFrame);\n }\n }\n\n getLastMatchedPosition() {\n if (!this.currentBox) {\n return null;\n }\n\n return {\n parentId: this.currentBox.parentId,\n slot: this.currentBox.parentSlot,\n index: this.currentBox.parentIndex + (this.currentPosition ?? 0)\n };\n }\n\n tick() {\n const scrollYOffset = this.getScrollOffset();\n const threshold = 10;\n const mouseX = this.mouse.x;\n const mouseY = this.mouse.y + scrollYOffset;\n\n let matchedId: string \| null = null;\n let matchedPosition: DropPosition = null;\n let matchedBox: Box \| null = null;\n\n // Collect all candidate matches with their canAccept callback.\n const candidates: { id: string; box: Box; position: number; canAccept?: () => boolean }[] =\n [];\n\n for (const [id, { box, canAccept }] of this.zones) {\n const isWithinX = mouseX >= box.left && mouseX <= box.right;\n\n if (!isWithinX) {\n continue;\n }\n\n if (Math.abs(mouseY - box.top) <= threshold) {\n candidates.push({ id, box, position: 0, canAccept });\n }\n\n if (Math.abs(mouseY - box.bottom) <= threshold) {\n candidates.push({ id, box, position: 1, canAccept });\n }\n }\n\n if (candidates.length > 0) {\n // Filter to only eligible candidates.\n const eligible = candidates.filter(c => !c.canAccept \|\| c.canAccept());\n\n if (eligible.length > 0) {\n const uniqueDepths = [...new Set(eligible.map(c => c.box.depth))].sort(\n (a, b) => b - a\n );\n\n if (uniqueDepths.length === 1) {\n const winner = eligible[0];\n matchedId = winner.id;\n matchedPosition = winner.position;\n matchedBox = winner.box;\n } else {\n // Use X position to select depth band among eligible candidates only.\n let rangeLeft = Infinity;\n let rangeRight = -Infinity;\n for (const c of eligible) {\n rangeLeft = Math.min(rangeLeft, c.box.left);\n rangeRight = Math.max(rangeRight, c.box.right);\n }\n\n const centerX = (rangeLeft + rangeRight) / 2;\n const halfWidth = (rangeRight - rangeLeft) / 2;\n\n // 0 at center, 1 at edges.\n const distFromCenter =\n halfWidth > 0 ? Math.abs(mouseX - centerX) / halfWidth : 0;\n\n // Map distance to depth index: center → 0 (deepest), edges → last (shallowest).\n const depthIndex = Math.min(\n Math.floor(distFromCenter * uniqueDepths.length),\n uniqueDepths.length - 1\n );\n\n const winner = eligible.find(c => c.box.depth === uniqueDepths[depthIndex]);\n if (winner) {\n matchedId = winner.id;\n matchedPosition = winner.position;\n matchedBox = winner.box;\n }\n }\n }\n }\n\n if (matchedId !== this.currentTargetId \|\| matchedPosition !== this.currentPosition) {\n this.currentTargetId = matchedId;\n this.currentPosition = matchedPosition;\n this.currentBox = matchedBox;\n\n this.matchCallbacks.forEach(cb => cb(matchedId !== null));\n\n for (const [id, entry] of this.zones) {\n const isTarget = id === matchedId;\n entry.onProximityChange(\n isTarget ? { box: matchedBox!, position: matchedPosition } : null\n );\n }\n }\n }\n\n private getScrollOffset() {\n const container = document.getElementById(\"preview-container\");\n if (!container) {\n return 0;\n }\n\n return container.scrollTop;\n }\n}\n"],"names":["DropZoneManager","mouse","Map","Set","entry","id","cb","runDropzoneLoop","requestAnimationFrame","cancelAnimationFrame","scrollYOffset","threshold","mouseX","mouseY","matchedId","matchedPosition","matchedBox","candidates","box","canAccept","isWithinX","Math","eligible","c","uniqueDepths","a","b","winner","rangeLeft","Infinity","rangeRight","centerX","halfWidth","distFromCenter","depthIndex","isTarget","container","document"],"mappings":"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"}

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

@@ -46,7 +46,7 @@ const Iframe = observer(({ url, timestamp, ...props })=>{
     }) : null, /*#__PURE__*/ react.createElement("div", {
         id: "preview-body",
         ref: previewBodyRef,
-        className: "outline outline-neutral-dimmed shadow-sm transition-[width,min-height] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] ",
+        className: "transition-[width,min-height] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]",
         style: {
             position: "relative",
             width: `${previewWidth}px`,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/Iframe.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Preview/Iframe.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\nimport type { Messenger } from \"@webiny/website-builder-sdk\";\nimport { cn, OverlayLoader } from \"@webiny/admin-ui\";\nimport type { ViewportManager } from \"@webiny/website-builder-sdk\";\nimport { observer } from \"mobx-react-lite\";\nimport { ElementOverlays } from \"./Overlays/ElementOverlays.js\";\nimport { ConnectEditorToPreview } from \"~/DocumentEditor/ConnectEditorToPreview.js\";\nimport { useResponsiveContainer } from \"~/BaseEditor/defaultConfig/Content/Preview/useResponsiveContainer.js\";\nimport { usePreviewData } from \"~/BaseEditor/hooks/usePreviewData.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { PreviewContainer } from \"./PreviewContainer.js\";\n\ninterface IframeProps {\n url: string;\n timestamp: number;\n showLoading: boolean;\n viewportManager: ViewportManager;\n onConnected: (messenger: Messenger) => void;\n}\n\nexport const Iframe = observer(({ url, timestamp, ...props }: IframeProps) => {\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const previewBodyRef = useRef<HTMLDivElement>(null);\n const previewWidth = useResponsiveContainer(props.viewportManager);\n const { viewport } = usePreviewData();\n const editor = useSelectFromEditor(state => ({\n isReadOnly: state.isReadOnly,\n reservedHeight: state.uiReservedSpace.height\n }));\n\n const isReadOnly = editor.isReadOnly;\n\n // When preview width changes, we need to force calculation of the iframe scrollHeight\n // by reducing the height of its parent div to the current viewport height.\n // Otherwise, the iframe grows to fill the parent div, and will not report the correct content height.\n useEffect(() => {\n if (previewBodyRef.current) {\n const minHeight = `calc(100vh - ${editor.reservedHeight}px)`;\n previewBodyRef.current.style.minHeight = minHeight;\n }\n }, [previewWidth]);\n\n const iframeUrl = useMemo(() => {\n const localUrl = new URL(url);\n localUrl.searchParams.set(\"wb.ts\", timestamp.toString());\n return localUrl.toString();\n }, [url, timestamp]);\n\n return (\n <PreviewContainer key={iframeUrl}>\n <ConnectEditorToPreview iframeRef={iframeRef} onConnected={props.onConnected} />\n {props.showLoading ? (\n <OverlayLoader\n size=\"lg\"\n variant=\"accent\"\n text=\"Loading preview...\"\n className={\"bg-neutral-base\"}\n />\n ) : null}\n {/* Content wrapper - sized by iframe content */}\n <div\n id={\"preview-body\"}\n ref={previewBodyRef}\n className={\n \"~~outline outline-neutral-dimmed shadow-sm~~ transition-[width,min-height] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] \"\n }\n style={{\n position: \"relative\",\n width: `${previewWidth}px`,\n minHeight: `${viewport.scrollHeight}px`\n }}\n >\n {!isReadOnly ? <ElementOverlays /> : null}\n <iframe\n scrolling=\"no\"\n id={\"preview-iframe\"}\n className={cn(\n \"absolute block top-0 left-0 w-full w-h-full bg-white border-none min-h-[inherit]\",\n isReadOnly ? \"pointer-events-auto\" : \"pointer-events-none\"\n )}\n src={iframeUrl}\n ref={iframeRef}\n sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\"\n />\n </div>\n </PreviewContainer>\n );\n});\n\nIframe.displayName = \"Iframe\";\n"],"names":["Iframe","observer","url","timestamp","props","iframeRef","useRef","previewBodyRef","previewWidth","useResponsiveContainer","viewport","usePreviewData","editor","useSelectFromEditor","state","isReadOnly","useEffect","minHeight","iframeUrl","useMemo","localUrl","URL","PreviewContainer","ConnectEditorToPreview","OverlayLoader","ElementOverlays","cn"],"mappings":";;;;;;;;;AAoBO,MAAMA,SAASC,SAAS,CAAC,EAAEC,GAAG,EAAEC,SAAS,EAAE,GAAGC,OAAoB;IACrE,MAAMC,YAAYC,OAA0B;IAC5C,MAAMC,iBAAiBD,OAAuB;IAC9C,MAAME,eAAeC,uBAAuBL,MAAM,eAAe;IACjE,MAAM,EAAEM,QAAQ,EAAE,GAAGC;IACrB,MAAMC,SAASC,oBAAoBC,CAAAA,QAAU;YACzC,YAAYA,MAAM,UAAU;YAC5B,gBAAgBA,MAAM,eAAe,CAAC,MAAM;QAChD;IAEA,MAAMC,aAAaH,OAAO,UAAU;IAKpCI,UAAU;QACN,IAAIT,eAAe,OAAO,EAAE;YACxB,MAAMU,YAAY,CAAC,aAAa,EAAEL,OAAO,cAAc,CAAC,GAAG,CAAC;YAC5DL,eAAe,OAAO,CAAC,KAAK,CAAC,SAAS,GAAGU;QAC7C;IACJ,GAAG;QAACT;KAAa;IAEjB,MAAMU,YAAYC,QAAQ;QACtB,MAAMC,WAAW,IAAIC,IAAInB;QACzBkB,SAAS,YAAY,CAAC,GAAG,CAAC,SAASjB,UAAU,QAAQ;QACrD,OAAOiB,SAAS,QAAQ;IAC5B,GAAG;QAAClB;QAAKC;KAAU;IAEnB,OAAO,WAAP,GACI,oBAACmB,kBAAgBA;QAAC,KAAKJ;qBACnB,oBAACK,wBAAsBA;QAAC,WAAWlB;QAAW,aAAaD,MAAM,WAAW;QAC3EA,MAAM,WAAW,GAAG,WAAH,GACd,oBAACoB,eAAaA;QACV,MAAK;QACL,SAAQ;QACR,MAAK;QACL,WAAW;SAEf,oBAEJ,oBAAC;QACG,IAAI;QACJ,KAAKjB;QACL,WACI;QAEJ,OAAO;YACH,UAAU;YACV,OAAO,GAAGC,aAAa,EAAE,CAAC;YAC1B,WAAW,GAAGE,SAAS,YAAY,CAAC,EAAE,CAAC;QAC3C;OAEC,AAACK,aAAmC,OAAtB,WAAbA,GAAa,oBAACU,iBAAeA,OAAM,cACrC,oBAAC;QACG,WAAU;QACV,IAAI;QACJ,WAAWC,GACP,oFACAX,aAAa,wBAAwB;QAEzC,KAAKG;QACL,KAAKb;QACL,SAAQ;;AAK5B;AAEAL,OAAO,WAAW,GAAG"}
1	+ {"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/Iframe.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Preview/Iframe.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\nimport type { Messenger } from \"@webiny/website-builder-sdk\";\nimport { cn, OverlayLoader } from \"@webiny/admin-ui\";\nimport type { ViewportManager } from \"@webiny/website-builder-sdk\";\nimport { observer } from \"mobx-react-lite\";\nimport { ElementOverlays } from \"./Overlays/ElementOverlays.js\";\nimport { ConnectEditorToPreview } from \"~/DocumentEditor/ConnectEditorToPreview.js\";\nimport { useResponsiveContainer } from \"~/BaseEditor/defaultConfig/Content/Preview/useResponsiveContainer.js\";\nimport { usePreviewData } from \"~/BaseEditor/hooks/usePreviewData.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { PreviewContainer } from \"./PreviewContainer.js\";\n\ninterface IframeProps {\n url: string;\n timestamp: number;\n showLoading: boolean;\n viewportManager: ViewportManager;\n onConnected: (messenger: Messenger) => void;\n}\n\nexport const Iframe = observer(({ url, timestamp, ...props }: IframeProps) => {\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const previewBodyRef = useRef<HTMLDivElement>(null);\n const previewWidth = useResponsiveContainer(props.viewportManager);\n const { viewport } = usePreviewData();\n const editor = useSelectFromEditor(state => ({\n isReadOnly: state.isReadOnly,\n reservedHeight: state.uiReservedSpace.height\n }));\n\n const isReadOnly = editor.isReadOnly;\n\n // When preview width changes, we need to force calculation of the iframe scrollHeight\n // by reducing the height of its parent div to the current viewport height.\n // Otherwise, the iframe grows to fill the parent div, and will not report the correct content height.\n useEffect(() => {\n if (previewBodyRef.current) {\n const minHeight = `calc(100vh - ${editor.reservedHeight}px)`;\n previewBodyRef.current.style.minHeight = minHeight;\n }\n }, [previewWidth]);\n\n const iframeUrl = useMemo(() => {\n const localUrl = new URL(url);\n localUrl.searchParams.set(\"wb.ts\", timestamp.toString());\n return localUrl.toString();\n }, [url, timestamp]);\n\n return (\n <PreviewContainer key={iframeUrl}>\n <ConnectEditorToPreview iframeRef={iframeRef} onConnected={props.onConnected} />\n {props.showLoading ? (\n <OverlayLoader\n size=\"lg\"\n variant=\"accent\"\n text=\"Loading preview...\"\n className={\"bg-neutral-base\"}\n />\n ) : null}\n {/* Content wrapper - sized by iframe content */}\n <div\n id={\"preview-body\"}\n ref={previewBodyRef}\n className={\n \"transition-[width,min-height] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]\"\n }\n style={{\n position: \"relative\",\n width: `${previewWidth}px`,\n minHeight: `${viewport.scrollHeight}px`\n }}\n >\n {!isReadOnly ? <ElementOverlays /> : null}\n <iframe\n scrolling=\"no\"\n id={\"preview-iframe\"}\n className={cn(\n \"absolute block top-0 left-0 w-full w-h-full bg-white border-none min-h-[inherit]\",\n isReadOnly ? \"pointer-events-auto\" : \"pointer-events-none\"\n )}\n src={iframeUrl}\n ref={iframeRef}\n sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\"\n />\n </div>\n </PreviewContainer>\n );\n});\n\nIframe.displayName = \"Iframe\";\n"],"names":["Iframe","observer","url","timestamp","props","iframeRef","useRef","previewBodyRef","previewWidth","useResponsiveContainer","viewport","usePreviewData","editor","useSelectFromEditor","state","isReadOnly","useEffect","minHeight","iframeUrl","useMemo","localUrl","URL","PreviewContainer","ConnectEditorToPreview","OverlayLoader","ElementOverlays","cn"],"mappings":";;;;;;;;;AAoBO,MAAMA,SAASC,SAAS,CAAC,EAAEC,GAAG,EAAEC,SAAS,EAAE,GAAGC,OAAoB;IACrE,MAAMC,YAAYC,OAA0B;IAC5C,MAAMC,iBAAiBD,OAAuB;IAC9C,MAAME,eAAeC,uBAAuBL,MAAM,eAAe;IACjE,MAAM,EAAEM,QAAQ,EAAE,GAAGC;IACrB,MAAMC,SAASC,oBAAoBC,CAAAA,QAAU;YACzC,YAAYA,MAAM,UAAU;YAC5B,gBAAgBA,MAAM,eAAe,CAAC,MAAM;QAChD;IAEA,MAAMC,aAAaH,OAAO,UAAU;IAKpCI,UAAU;QACN,IAAIT,eAAe,OAAO,EAAE;YACxB,MAAMU,YAAY,CAAC,aAAa,EAAEL,OAAO,cAAc,CAAC,GAAG,CAAC;YAC5DL,eAAe,OAAO,CAAC,KAAK,CAAC,SAAS,GAAGU;QAC7C;IACJ,GAAG;QAACT;KAAa;IAEjB,MAAMU,YAAYC,QAAQ;QACtB,MAAMC,WAAW,IAAIC,IAAInB;QACzBkB,SAAS,YAAY,CAAC,GAAG,CAAC,SAASjB,UAAU,QAAQ;QACrD,OAAOiB,SAAS,QAAQ;IAC5B,GAAG;QAAClB;QAAKC;KAAU;IAEnB,OAAO,WAAP,GACI,oBAACmB,kBAAgBA;QAAC,KAAKJ;qBACnB,oBAACK,wBAAsBA;QAAC,WAAWlB;QAAW,aAAaD,MAAM,WAAW;QAC3EA,MAAM,WAAW,GAAG,WAAH,GACd,oBAACoB,eAAaA;QACV,MAAK;QACL,SAAQ;QACR,MAAK;QACL,WAAW;SAEf,oBAEJ,oBAAC;QACG,IAAI;QACJ,KAAKjB;QACL,WACI;QAEJ,OAAO;YACH,UAAU;YACV,OAAO,GAAGC,aAAa,EAAE,CAAC;YAC1B,WAAW,GAAGE,SAAS,YAAY,CAAC,EAAE,CAAC;QAC3C;OAEC,AAACK,aAAmC,OAAtB,WAAbA,GAAa,oBAACU,iBAAeA,OAAM,cACrC,oBAAC;QACG,WAAU;QACV,IAAI;QACJ,WAAWC,GACP,oFACAX,aAAa,wBAAwB;QAEzC,KAAKG;QACL,KAAKb;QACL,SAAQ;;AAK5B;AAEAL,OAAO,WAAW,GAAG"}

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

@@ -1,5 +1,6 @@
 import react, { useCallback } from "react";
-import { cn } from "@webiny/admin-ui";
+import { Icon, cn } from "@webiny/admin-ui";
+import { InlineSvg } from "../../../Toolbar/InsertElements/InlineSvg.js";
 import { useDocumentEditor } from "../../../../../DocumentEditor/index.js";
 import { $highlightElement, $selectElement } from "../../../../../editorSdk/utils/index.js";
 import { Draggable } from "../../../../components/Draggable.js";
@@ -73,11 +74,14 @@ const ElementOverlay = /*#__PURE__*/ react.memo(()=>{
             "data-label-for": previewBox.id,
             "data-state": isDragging ? "dragging" : boxState,
             onClick: onClick,
-            className: cn("absolute text-sm text-neutral-light p-xs opacity-0 pointer-events-auto", "data-[state=hover]:bg-success data-[state=hover]:opacity-100", "data-[state=active]:bg-primary data-[state=active]:opacity-100", "data-[state=dragging]:opacity-30"),
-            style: {
-                top: -24
-            }
-        }, componentName))));
+            className: "absolute flex items-center gap-xxs px-xs py-[1px] text-[11px] text-neutral-light leading-md opacity-0 pointer-events-auto rounded-t-sm data-[state=hover]:bg-success data-[state=hover]:opacity-100 data-[state=active]:bg-primary data-[state=active]:opacity-100 data-[state=dragging]:opacity-30 top-[-18px] right-none fill-white"
+        }, componentManifest.image && /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(InlineSvg, {
+                src: componentManifest.image
+            }),
+            label: componentName,
+            className: "size-[14px]"
+        }), componentName))));
 });
 ElementOverlay.displayName = "ElementOverlay";
 const borderWidth = "var(--border-width-md)";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/Overlays/ElementOverlay.js","sources":["../../../../../../src/BaseEditor/defaultConfig/Content/Preview/Overlays/ElementOverlay.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { cn } from \"@webiny/admin-ui\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport type { Box } from \"../Box.js\";\nimport { $highlightElement, $selectElement } from \"~/editorSdk/utils/index.js\";\nimport { Draggable } from \"~/BaseEditor/components/Draggable.js\";\nimport { useIsDragging } from \"~/BaseEditor/defaultConfig/Content/Preview/useIsDragging.js\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { useElementOverlay } from \"./ElementOverlayProvider.js\";\n\nexport const ElementOverlay = React.memo(() => {\n const editor = useDocumentEditor();\n const {\n elementId,\n isSelected,\n isHighlighted,\n componentManifest,\n box: previewBox\n } = useElementOverlay();\n\n const onClick = useCallback((event: React.MouseEvent) => {\n event.stopPropagation();\n $selectElement(editor, elementId);\n }, []);\n\n const setHighlighted = useCallback((event: React.MouseEvent) => {\n event.stopPropagation();\n $highlightElement(editor, elementId);\n }, []);\n\n const unsetHighlighted = useCallback((event: React.MouseEvent) => {\n const relatedTarget = event.relatedTarget as Element;\n if (\n relatedTarget &&\n typeof relatedTarget.closest === \"function\" &&\n relatedTarget.closest('[data-role=\"element-overlay\"]')\n ) {\n return;\n }\n event.stopPropagation();\n $highlightElement(editor, null);\n }, []);\n\n const dnd = useIsDragging();\n\n if (!componentManifest) {\n return null;\n }\n\n const pointerEvents = \"auto\";\n const componentName = componentManifest.label ?? componentManifest.name;\n const boxState = isSelected ? \"active\" : isHighlighted && !dnd ? \"hover\" : null;\n\n return (\n <Draggable\n type=\"ELEMENT\"\n item={{ id: elementId, componentName: componentManifest.name }}\n canDrag={componentManifest.canDrag !== false}\n >\n {({ isDragging, dragRef }) =>\n dragRef(\n <div\n data-element-id={elementId}\n onMouseEnter={setHighlighted}\n onMouseLeave={unsetHighlighted}\n style={{\n position: \"absolute\",\n pointerEvents,\n zIndex: 100 + previewBox.depth,\n top: previewBox.top,\n left: previewBox.left,\n width: previewBox.width,\n height: previewBox.height,\n opacity: isDragging ? 0.7 : 1\n }}\n >\n <div\n className={cn(\n \"absolute box-border text-right top-0 left-0 w-full h-full\",\n \"data-[state=hover]:border-md data-[state=hover]:border-success-default\",\n \"data-[state=active]:border-md data-[state=active]:border-accent-default\"\n )}\n onClick={onClick}\n data-state={boxState}\n data-element-id={elementId}\n data-role={\"element-overlay\"}\n data-depth={previewBox.depth}\n >\n {isSelected ? (\n <AllMarginStripes elementId={elementId} previewBox={previewBox} />\n ) : null}\n </div>\n <div\n data-role={\"opacity-overlay\"}\n className={\"pointer-events-none absolute top-0 left-0 bg-white\"}\n style={{\n zIndex: 100 + previewBox.depth,\n width: previewBox.width,\n height: previewBox.height,\n opacity: isDragging ? 0.7 : 0\n }}\n ></div>\n <div\n data-role={\"element-overlay-label\"}\n data-label-for={previewBox.id}\n data-state={isDragging ? \"dragging\" : boxState}\n onClick={onClick}\n className={cn(\n \"absolute text-sm text-neutral-light p-xs opacity-0 pointer-events-auto\",\n \"data-[state=hover]:bg-success data-[state=hover]:opacity-100\",\n \"data-[state=active]:bg-primary data-[state=active]:opacity-100\",\n \"data-[state=dragging]:opacity-30\"\n )}\n style={{ top: -24 }}\n >\n {componentName}\n </div>\n </div>\n )\n }\n </Draggable>\n );\n});\n\nElementOverlay.displayName = \"ElementOverlay\";\n\ninterface AllMarginStripesProps {\n elementId: string;\n previewBox: Box;\n}\n\nconst borderWidth = \"var(--border-width-md)\";\n\nconst AllMarginStripes = ({ elementId, previewBox }: AllMarginStripesProps) => {\n const { styles } = useStyles(elementId);\n const { marginTop = 0, marginBottom = 0, marginLeft = 0, marginRight = 0 } = styles;\n\n return (\n <>\n {marginTop ? (\n <MarginStripes\n top={`calc(0px - ${marginTop} - ${borderWidth})`}\n left={`calc(0px - ${borderWidth})`}\n height={marginTop}\n width={`${previewBox.width}px`}\n />\n ) : null}\n {marginRight ? (\n <MarginStripes\n top={`calc(0px - ${borderWidth})`}\n left={`calc(${previewBox.width}px - ${borderWidth})`}\n height={`${previewBox.height}px`}\n width={marginRight}\n />\n ) : null}\n {marginBottom ? (\n <MarginStripes\n top={`calc(${previewBox.height}px - ${borderWidth})`}\n left={`calc(0px - ${borderWidth})`}\n height={marginBottom}\n width={`${previewBox.width}px`}\n />\n ) : null}\n {marginLeft ? (\n <MarginStripes\n top={`calc(0px - ${borderWidth})`}\n left={`calc(0px - ${marginLeft} - ${borderWidth})`}\n height={`${previewBox.height}px`}\n width={marginLeft}\n />\n ) : null}\n </>\n );\n};\n\ninterface MarginStripesProps {\n top: string;\n left: string;\n height: string;\n width: string;\n}\n\nconst MarginStripes = ({ top, left, height, width }: MarginStripesProps) => {\n return (\n <div\n data-role={\"element-margin\"}\n style={{\n pointerEvents: \"none\",\n position: \"absolute\",\n top,\n left,\n height,\n width,\n backgroundImage:\n \"linear-gradient(135deg, #ecebff 18.75%, #ffffff 18.75%, #ffffff 50%, #ecebff 50%, #ecebff 68.75%, #ffffff 68.75%, #ffffff 100%)\",\n backgroundSize: \"4.49px 4.49px\"\n }}\n ></div>\n );\n};\n"],"names":["ElementOverlay","React","editor","useDocumentEditor","elementId","isSelected","isHighlighted","componentManifest","previewBox","useElementOverlay","onClick","useCallback","event","$selectElement","setHighlighted","$highlightElement","unsetHighlighted","relatedTarget","dnd","useIsDragging","pointerEvents","componentName","boxState","Draggable","isDragging","dragRef","cn","AllMarginStripes","borderWidth","styles","useStyles","marginTop","marginBottom","marginLeft","marginRight","MarginStripes","top","left","height","width"],"mappings":"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"}
1	+ {"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/Overlays/ElementOverlay.js","sources":["../../../../../../src/BaseEditor/defaultConfig/Content/Preview/Overlays/ElementOverlay.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { cn, Icon } from \"@webiny/admin-ui\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport type { Box } from \"../Box.js\";\nimport { $highlightElement, $selectElement } from \"~/editorSdk/utils/index.js\";\nimport { Draggable } from \"~/BaseEditor/components/Draggable.js\";\nimport { useIsDragging } from \"~/BaseEditor/defaultConfig/Content/Preview/useIsDragging.js\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { useElementOverlay } from \"./ElementOverlayProvider.js\";\n\nexport const ElementOverlay = React.memo(() => {\n const editor = useDocumentEditor();\n const {\n elementId,\n isSelected,\n isHighlighted,\n componentManifest,\n box: previewBox\n } = useElementOverlay();\n\n const onClick = useCallback((event: React.MouseEvent) => {\n event.stopPropagation();\n $selectElement(editor, elementId);\n }, []);\n\n const setHighlighted = useCallback((event: React.MouseEvent) => {\n event.stopPropagation();\n $highlightElement(editor, elementId);\n }, []);\n\n const unsetHighlighted = useCallback((event: React.MouseEvent) => {\n const relatedTarget = event.relatedTarget as Element;\n if (\n relatedTarget &&\n typeof relatedTarget.closest === \"function\" &&\n relatedTarget.closest('[data-role=\"element-overlay\"]')\n ) {\n return;\n }\n event.stopPropagation();\n $highlightElement(editor, null);\n }, []);\n\n const dnd = useIsDragging();\n\n if (!componentManifest) {\n return null;\n }\n\n const pointerEvents = \"auto\";\n const componentName = componentManifest.label ?? componentManifest.name;\n const boxState = isSelected ? \"active\" : isHighlighted && !dnd ? \"hover\" : null;\n\n return (\n <Draggable\n type=\"ELEMENT\"\n item={{ id: elementId, componentName: componentManifest.name }}\n canDrag={componentManifest.canDrag !== false}\n >\n {({ isDragging, dragRef }) =>\n dragRef(\n <div\n data-element-id={elementId}\n onMouseEnter={setHighlighted}\n onMouseLeave={unsetHighlighted}\n style={{\n position: \"absolute\",\n pointerEvents,\n zIndex: 100 + previewBox.depth,\n top: previewBox.top,\n left: previewBox.left,\n width: previewBox.width,\n height: previewBox.height,\n opacity: isDragging ? 0.7 : 1\n }}\n >\n <div\n className={cn(\n \"absolute box-border text-right top-0 left-0 w-full h-full\",\n \"data-[state=hover]:border-md data-[state=hover]:border-success-default\",\n \"data-[state=active]:border-md data-[state=active]:border-accent-default\"\n )}\n onClick={onClick}\n data-state={boxState}\n data-element-id={elementId}\n data-role={\"element-overlay\"}\n data-depth={previewBox.depth}\n >\n {isSelected ? (\n <AllMarginStripes elementId={elementId} previewBox={previewBox} />\n ) : null}\n </div>\n <div\n data-role={\"opacity-overlay\"}\n className={\"pointer-events-none absolute top-0 left-0 bg-white\"}\n style={{\n zIndex: 100 + previewBox.depth,\n width: previewBox.width,\n height: previewBox.height,\n opacity: isDragging ? 0.7 : 0\n }}\n ></div>\n <div\n data-role={\"element-overlay-label\"}\n data-label-for={previewBox.id}\n data-state={isDragging ? \"dragging\" : boxState}\n onClick={onClick}\n className={\n \"absolute flex items-center gap-xxs px-xs py-[1px] text-[11px] text-neutral-light leading-md opacity-0 pointer-events-auto rounded-t-sm data-[state=hover]:bg-success data-[state=hover]:opacity-100 data-[state=active]:bg-primary data-[state=active]:opacity-100 data-[state=dragging]:opacity-30 top-[-18px] right-none fill-white\"\n }\n >\n {componentManifest.image && (\n <Icon\n icon={<InlineSvg src={componentManifest.image} />}\n label={componentName}\n className={\"size-[14px]\"}\n />\n )}\n {componentName}\n </div>\n </div>\n )\n }\n </Draggable>\n );\n});\n\nElementOverlay.displayName = \"ElementOverlay\";\n\ninterface AllMarginStripesProps {\n elementId: string;\n previewBox: Box;\n}\n\nconst borderWidth = \"var(--border-width-md)\";\n\nconst AllMarginStripes = ({ elementId, previewBox }: AllMarginStripesProps) => {\n const { styles } = useStyles(elementId);\n const { marginTop = 0, marginBottom = 0, marginLeft = 0, marginRight = 0 } = styles;\n\n return (\n <>\n {marginTop ? (\n <MarginStripes\n top={`calc(0px - ${marginTop} - ${borderWidth})`}\n left={`calc(0px - ${borderWidth})`}\n height={marginTop}\n width={`${previewBox.width}px`}\n />\n ) : null}\n {marginRight ? (\n <MarginStripes\n top={`calc(0px - ${borderWidth})`}\n left={`calc(${previewBox.width}px - ${borderWidth})`}\n height={`${previewBox.height}px`}\n width={marginRight}\n />\n ) : null}\n {marginBottom ? (\n <MarginStripes\n top={`calc(${previewBox.height}px - ${borderWidth})`}\n left={`calc(0px - ${borderWidth})`}\n height={marginBottom}\n width={`${previewBox.width}px`}\n />\n ) : null}\n {marginLeft ? (\n <MarginStripes\n top={`calc(0px - ${borderWidth})`}\n left={`calc(0px - ${marginLeft} - ${borderWidth})`}\n height={`${previewBox.height}px`}\n width={marginLeft}\n />\n ) : null}\n </>\n );\n};\n\ninterface MarginStripesProps {\n top: string;\n left: string;\n height: string;\n width: string;\n}\n\nconst MarginStripes = ({ top, left, height, width }: MarginStripesProps) => {\n return (\n <div\n data-role={\"element-margin\"}\n style={{\n pointerEvents: \"none\",\n position: \"absolute\",\n top,\n left,\n height,\n width,\n backgroundImage:\n \"linear-gradient(135deg, #ecebff 18.75%, #ffffff 18.75%, #ffffff 50%, #ecebff 50%, #ecebff 68.75%, #ffffff 68.75%, #ffffff 100%)\",\n backgroundSize: \"4.49px 4.49px\"\n }}\n ></div>\n );\n};\n"],"names":["ElementOverlay","React","editor","useDocumentEditor","elementId","isSelected","isHighlighted","componentManifest","previewBox","useElementOverlay","onClick","useCallback","event","$selectElement","setHighlighted","$highlightElement","unsetHighlighted","relatedTarget","dnd","useIsDragging","pointerEvents","componentName","boxState","Draggable","isDragging","dragRef","cn","AllMarginStripes","Icon","InlineSvg","borderWidth","styles","useStyles","marginTop","marginBottom","marginLeft","marginRight","MarginStripes","top","left","height","width"],"mappings":";;;;;;;;;AAWO,MAAMA,iBAAiB,WAAHA,GAAGC,MAAAA,IAAU,CAAC;IACrC,MAAMC,SAASC;IACf,MAAM,EACFC,SAAS,EACTC,UAAU,EACVC,aAAa,EACbC,iBAAiB,EACjB,KAAKC,UAAU,EAClB,GAAGC;IAEJ,MAAMC,UAAUC,YAAY,CAACC;QACzBA,MAAM,eAAe;QACrBC,eAAeX,QAAQE;IAC3B,GAAG,EAAE;IAEL,MAAMU,iBAAiBH,YAAY,CAACC;QAChCA,MAAM,eAAe;QACrBG,kBAAkBb,QAAQE;IAC9B,GAAG,EAAE;IAEL,MAAMY,mBAAmBL,YAAY,CAACC;QAClC,MAAMK,gBAAgBL,MAAM,aAAa;QACzC,IACIK,iBACA,AAAiC,cAAjC,OAAOA,cAAc,OAAO,IAC5BA,cAAc,OAAO,CAAC,kCAEtB;QAEJL,MAAM,eAAe;QACrBG,kBAAkBb,QAAQ;IAC9B,GAAG,EAAE;IAEL,MAAMgB,MAAMC;IAEZ,IAAI,CAACZ,mBACD,OAAO;IAGX,MAAMa,gBAAgB;IACtB,MAAMC,gBAAgBd,kBAAkB,KAAK,IAAIA,kBAAkB,IAAI;IACvE,MAAMe,WAAWjB,aAAa,WAAWC,iBAAiB,CAACY,MAAM,UAAU;IAE3E,OAAO,WAAP,GACI,oBAACK,WAASA;QACN,MAAK;QACL,MAAM;YAAE,IAAInB;YAAW,eAAeG,kBAAkB,IAAI;QAAC;QAC7D,SAASA,AAA8B,UAA9BA,kBAAkB,OAAO;OAEjC,CAAC,EAAEiB,UAAU,EAAEC,OAAO,EAAE,GACrBA,QAAQ,WAARA,GACI,oBAAC;YACG,mBAAiBrB;YACjB,cAAcU;YACd,cAAcE;YACd,OAAO;gBACH,UAAU;gBACVI;gBACA,QAAQ,MAAMZ,WAAW,KAAK;gBAC9B,KAAKA,WAAW,GAAG;gBACnB,MAAMA,WAAW,IAAI;gBACrB,OAAOA,WAAW,KAAK;gBACvB,QAAQA,WAAW,MAAM;gBACzB,SAASgB,aAAa,MAAM;YAChC;yBAEA,oBAAC;YACG,WAAWE,GACP,6DACA,0EACA;YAEJ,SAAShB;YACT,cAAYY;YACZ,mBAAiBlB;YACjB,aAAW;YACX,cAAYI,WAAW,KAAK;WAE3BH,aAAa,WAAbA,GACG,oBAACsB,kBAAgBA;YAAC,WAAWvB;YAAW,YAAYI;aACpD,qBAER,oBAAC;YACG,aAAW;YACX,WAAW;YACX,OAAO;gBACH,QAAQ,MAAMA,WAAW,KAAK;gBAC9B,OAAOA,WAAW,KAAK;gBACvB,QAAQA,WAAW,MAAM;gBACzB,SAASgB,aAAa,MAAM;YAChC;0BAEJ,oBAAC;YACG,aAAW;YACX,kBAAgBhB,WAAW,EAAE;YAC7B,cAAYgB,aAAa,aAAaF;YACtC,SAASZ;YACT,WACI;WAGHH,kBAAkB,KAAK,IAAI,WAAJ,GACpB,oBAACqB,MAAIA;YACD,oBAAM,oBAACC,WAASA;gBAAC,KAAKtB,kBAAkB,KAAK;;YAC7C,OAAOc;YACP,WAAW;YAGlBA;AAO7B;AAEArB,eAAe,WAAW,GAAG;AAO7B,MAAM8B,cAAc;AAEpB,MAAMH,mBAAmB,CAAC,EAAEvB,SAAS,EAAEI,UAAU,EAAyB;IACtE,MAAM,EAAEuB,MAAM,EAAE,GAAGC,UAAU5B;IAC7B,MAAM,EAAE6B,YAAY,CAAC,EAAEC,eAAe,CAAC,EAAEC,aAAa,CAAC,EAAEC,cAAc,CAAC,EAAE,GAAGL;IAE7E,OAAO,WAAP,GACI,0CACKE,YAAY,WAAZA,GACG,oBAACI,eAAaA;QACV,KAAK,CAAC,WAAW,EAAEJ,UAAU,GAAG,EAAEH,YAAY,CAAC,CAAC;QAChD,MAAM,CAAC,WAAW,EAAEA,YAAY,CAAC,CAAC;QAClC,QAAQG;QACR,OAAO,GAAGzB,WAAW,KAAK,CAAC,EAAE,CAAC;SAElC,MACH4B,cAAc,WAAdA,GACG,oBAACC,eAAaA;QACV,KAAK,CAAC,WAAW,EAAEP,YAAY,CAAC,CAAC;QACjC,MAAM,CAAC,KAAK,EAAEtB,WAAW,KAAK,CAAC,KAAK,EAAEsB,YAAY,CAAC,CAAC;QACpD,QAAQ,GAAGtB,WAAW,MAAM,CAAC,EAAE,CAAC;QAChC,OAAO4B;SAEX,MACHF,eAAe,WAAfA,GACG,oBAACG,eAAaA;QACV,KAAK,CAAC,KAAK,EAAE7B,WAAW,MAAM,CAAC,KAAK,EAAEsB,YAAY,CAAC,CAAC;QACpD,MAAM,CAAC,WAAW,EAAEA,YAAY,CAAC,CAAC;QAClC,QAAQI;QACR,OAAO,GAAG1B,WAAW,KAAK,CAAC,EAAE,CAAC;SAElC,MACH2B,aAAa,WAAbA,GACG,oBAACE,eAAaA;QACV,KAAK,CAAC,WAAW,EAAEP,YAAY,CAAC,CAAC;QACjC,MAAM,CAAC,WAAW,EAAEK,WAAW,GAAG,EAAEL,YAAY,CAAC,CAAC;QAClD,QAAQ,GAAGtB,WAAW,MAAM,CAAC,EAAE,CAAC;QAChC,OAAO2B;SAEX;AAGhB;AASA,MAAME,gBAAgB,CAAC,EAAEC,GAAG,EAAEC,IAAI,EAAEC,MAAM,EAAEC,KAAK,EAAsB,GAC5D,WAAP,GACI,oBAAC;QACG,aAAW;QACX,OAAO;YACH,eAAe;YACf,UAAU;YACVH;YACAC;YACAC;YACAC;YACA,iBACI;YACJ,gBAAgB;QACpB"}

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

@@ -10,6 +10,7 @@ import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor.js";
 import { AwaitIframeUrl } from "./AwaitIframeUrl.js";
 import { PreviewEvents } from "./PreviewEvents.js";
 import { ApplyTheme } from "./ApplyTheme.js";
+import DragPreview from "../../../components/DragPreview/index.js";
 const Preview = ()=>{
     const editor = useDocumentEditor();
     const [iframeTimestamp, setIframeTimestamp] = useState(Date.now());
@@ -70,7 +71,7 @@ const Preview = ()=>{
             viewportManager: viewportManager,
             onConnected: onConnected,
             showLoading: loadingPreview
-        }))), /*#__PURE__*/ react.createElement(KeyboardShortcuts, null));
+        })), /*#__PURE__*/ react.createElement(DragPreview, null)), /*#__PURE__*/ react.createElement(KeyboardShortcuts, null));
 };
 export { Preview };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/Preview.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Preview/Preview.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type { Messenger } from \"@webiny/website-builder-sdk\";\nimport { ViewportManager } from \"@webiny/website-builder-sdk\";\nimport { mouseTracker } from \"@webiny/website-builder-sdk\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Iframe } from \"./Iframe.js\";\nimport { DropZoneManager } from \"./DropZoneManager.js\";\nimport { DropZoneManagerProvider } from \"./DropZoneManagerProvider.js\";\nimport { KeyboardShortcuts } from \"./KeyboardShortcuts.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { AwaitIframeUrl } from \"~/BaseEditor/defaultConfig/Content/Preview/AwaitIframeUrl.js\";\nimport { PreviewEvents } from \"~/BaseEditor/defaultConfig/Content/Preview/PreviewEvents.js\";\nimport { ApplyTheme } from \"./ApplyTheme.js\";\n\nexport const Preview = () => {\n const editor = useDocumentEditor();\n const [iframeTimestamp, setIframeTimestamp] = useState(Date.now());\n\n const loadingPreview = useSelectFromEditor(state => state.loadingPreview);\n\n const viewportManager = useMemo(() => {\n return new ViewportManager();\n }, []);\n\n const previewEvents = useMemo(() => {\n return new PreviewEvents(editor);\n }, []);\n\n const dropzoneManager = useMemo(() => {\n return new DropZoneManager(mouseTracker);\n }, [mouseTracker]);\n\n useEffect(() => {\n // On first mount, show loading.\n editor.updateEditor(state => {\n state.loadingPreview = true;\n });\n\n const offRefreshPreview = editor.registerCommandHandler(Commands.RefreshPreview, () => {\n setIframeTimestamp(Date.now());\n\n editor.updateEditor(state => {\n // Unset boxes to remove old overlays.\n state.loadingPreview = true;\n state.boxes = {\n preview: {},\n editor: {}\n };\n });\n });\n\n return () => {\n offRefreshPreview();\n };\n }, []);\n\n // Start various trackers\n useEffect(() => {\n mouseTracker.start();\n dropzoneManager.start();\n\n return () => {\n dropzoneManager.stop();\n mouseTracker.stop();\n viewportManager.destroy();\n previewEvents.destroy();\n };\n }, [dropzoneManager, mouseTracker]);\n\n // Update mouse position while dragging\n useEffect(() => {\n const setMousePositionFromDrag = (e: DragEvent) => {\n mouseTracker.setPosition(e.clientX, e.clientY);\n };\n\n window.addEventListener(\"dragover\", setMousePositionFromDrag);\n\n return () => {\n window.removeEventListener(\"dragover\", setMousePositionFromDrag);\n };\n }, []);\n\n const onConnected = useCallback((messenger: Messenger) => {\n previewEvents.onConnected(messenger);\n }, []);\n\n return (\n <>\n <ApplyTheme />\n <DropZoneManagerProvider dropzoneManager={dropzoneManager}>\n <AwaitIframeUrl>\n {({ url }) => (\n <Iframe\n url={url}\n timestamp={iframeTimestamp}\n viewportManager={viewportManager}\n onConnected={onConnected}\n showLoading={loadingPreview}\n />\n )}\n </AwaitIframeUrl>\n </DropZoneManagerProvider>\n <KeyboardShortcuts />\n </>\n );\n};\n"],"names":["Preview","editor","useDocumentEditor","iframeTimestamp","setIframeTimestamp","useState","Date","loadingPreview","useSelectFromEditor","state","viewportManager","useMemo","ViewportManager","previewEvents","PreviewEvents","dropzoneManager","DropZoneManager","mouseTracker","useEffect","offRefreshPreview","Commands","setMousePositionFromDrag","e","window","onConnected","useCallback","messenger","ApplyTheme","DropZoneManagerProvider","AwaitIframeUrl","url","Iframe","KeyboardShortcuts"],"mappings":"~~;;;;;;;;;;;;AAeO~~,MAAMA,UAAU;IACnB,MAAMC,SAASC;IACf,MAAM,CAACC,iBAAiBC,mBAAmB,GAAGC,SAASC,KAAK,GAAG;IAE/D,MAAMC,iBAAiBC,oBAAoBC,CAAAA,QAASA,MAAM,cAAc;IAExE,MAAMC,kBAAkBC,QAAQ,IACrB,IAAIC,mBACZ,EAAE;IAEL,MAAMC,gBAAgBF,QAAQ,IACnB,IAAIG,cAAcb,SAC1B,EAAE;IAEL,MAAMc,kBAAkBJ,QAAQ,IACrB,IAAIK,gBAAgBC,eAC5B;QAACA;KAAa;IAEjBC,UAAU;QAENjB,OAAO,YAAY,CAACQ,CAAAA;YAChBA,MAAM,cAAc,GAAG;QAC3B;QAEA,MAAMU,oBAAoBlB,OAAO,sBAAsB,CAACmB,SAAS,cAAc,EAAE;YAC7EhB,mBAAmBE,KAAK,GAAG;YAE3BL,OAAO,YAAY,CAACQ,CAAAA;gBAEhBA,MAAM,cAAc,GAAG;gBACvBA,MAAM,KAAK,GAAG;oBACV,SAAS,CAAC;oBACV,QAAQ,CAAC;gBACb;YACJ;QACJ;QAEA,OAAO;YACHU;QACJ;IACJ,GAAG,EAAE;IAGLD,UAAU;QACND,aAAa,KAAK;QAClBF,gBAAgB,KAAK;QAErB,OAAO;YACHA,gBAAgB,IAAI;YACpBE,aAAa,IAAI;YACjBP,gBAAgB,OAAO;YACvBG,cAAc,OAAO;QACzB;IACJ,GAAG;QAACE;QAAiBE;KAAa;IAGlCC,UAAU;QACN,MAAMG,2BAA2B,CAACC;YAC9BL,aAAa,WAAW,CAACK,EAAE,OAAO,EAAEA,EAAE,OAAO;QACjD;QAEAC,OAAO,gBAAgB,CAAC,YAAYF;QAEpC,OAAO;YACHE,OAAO,mBAAmB,CAAC,YAAYF;QAC3C;IACJ,GAAG,EAAE;IAEL,MAAMG,cAAcC,YAAY,CAACC;QAC7Bb,cAAc,WAAW,CAACa;IAC9B,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,wDACI,oBAACC,YAAUA,OAAAA,WAAAA,GACX,oBAACC,yBAAuBA;QAAC,iBAAiBb;qBACtC,oBAACc,gBAAcA,MACV,CAAC,EAAEC,GAAG,EAAE,iBACL,oBAACC,QAAMA;YACH,KAAKD;YACL,WAAW3B;YACX,iBAAiBO;YACjB,aAAac;YACb,aAAajB;~~4BAK7B~~,oBAACyB,mBAAiBA;AAG9B"}
1	+ {"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/Preview.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Preview/Preview.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type { Messenger } from \"@webiny/website-builder-sdk\";\nimport { ViewportManager } from \"@webiny/website-builder-sdk\";\nimport { mouseTracker } from \"@webiny/website-builder-sdk\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Iframe } from \"./Iframe.js\";\nimport { DropZoneManager } from \"./DropZoneManager.js\";\nimport { DropZoneManagerProvider } from \"./DropZoneManagerProvider.js\";\nimport { KeyboardShortcuts } from \"./KeyboardShortcuts.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { AwaitIframeUrl } from \"~/BaseEditor/defaultConfig/Content/Preview/AwaitIframeUrl.js\";\nimport { PreviewEvents } from \"~/BaseEditor/defaultConfig/Content/Preview/PreviewEvents.js\";\nimport { ApplyTheme } from \"./ApplyTheme.js\";\nimport DragPreview from \"~/BaseEditor/components/DragPreview/index.js\";\n\nexport const Preview = () => {\n const editor = useDocumentEditor();\n const [iframeTimestamp, setIframeTimestamp] = useState(Date.now());\n\n const loadingPreview = useSelectFromEditor(state => state.loadingPreview);\n\n const viewportManager = useMemo(() => {\n return new ViewportManager();\n }, []);\n\n const previewEvents = useMemo(() => {\n return new PreviewEvents(editor);\n }, []);\n\n const dropzoneManager = useMemo(() => {\n return new DropZoneManager(mouseTracker);\n }, [mouseTracker]);\n\n useEffect(() => {\n // On first mount, show loading.\n editor.updateEditor(state => {\n state.loadingPreview = true;\n });\n\n const offRefreshPreview = editor.registerCommandHandler(Commands.RefreshPreview, () => {\n setIframeTimestamp(Date.now());\n\n editor.updateEditor(state => {\n // Unset boxes to remove old overlays.\n state.loadingPreview = true;\n state.boxes = {\n preview: {},\n editor: {}\n };\n });\n });\n\n return () => {\n offRefreshPreview();\n };\n }, []);\n\n // Start various trackers\n useEffect(() => {\n mouseTracker.start();\n dropzoneManager.start();\n\n return () => {\n dropzoneManager.stop();\n mouseTracker.stop();\n viewportManager.destroy();\n previewEvents.destroy();\n };\n }, [dropzoneManager, mouseTracker]);\n\n // Update mouse position while dragging\n useEffect(() => {\n const setMousePositionFromDrag = (e: DragEvent) => {\n mouseTracker.setPosition(e.clientX, e.clientY);\n };\n\n window.addEventListener(\"dragover\", setMousePositionFromDrag);\n\n return () => {\n window.removeEventListener(\"dragover\", setMousePositionFromDrag);\n };\n }, []);\n\n const onConnected = useCallback((messenger: Messenger) => {\n previewEvents.onConnected(messenger);\n }, []);\n\n return (\n <>\n <ApplyTheme />\n <DropZoneManagerProvider dropzoneManager={dropzoneManager}>\n <AwaitIframeUrl>\n {({ url }) => (\n <Iframe\n url={url}\n timestamp={iframeTimestamp}\n viewportManager={viewportManager}\n onConnected={onConnected}\n showLoading={loadingPreview}\n />\n )}\n </AwaitIframeUrl>\n <DragPreview />\n </DropZoneManagerProvider>\n <KeyboardShortcuts />\n </>\n );\n};\n"],"names":["Preview","editor","useDocumentEditor","iframeTimestamp","setIframeTimestamp","useState","Date","loadingPreview","useSelectFromEditor","state","viewportManager","useMemo","ViewportManager","previewEvents","PreviewEvents","dropzoneManager","DropZoneManager","mouseTracker","useEffect","offRefreshPreview","Commands","setMousePositionFromDrag","e","window","onConnected","useCallback","messenger","ApplyTheme","DropZoneManagerProvider","AwaitIframeUrl","url","Iframe","DragPreview","KeyboardShortcuts"],"mappings":";;;;;;;;;;;;;AAgBO,MAAMA,UAAU;IACnB,MAAMC,SAASC;IACf,MAAM,CAACC,iBAAiBC,mBAAmB,GAAGC,SAASC,KAAK,GAAG;IAE/D,MAAMC,iBAAiBC,oBAAoBC,CAAAA,QAASA,MAAM,cAAc;IAExE,MAAMC,kBAAkBC,QAAQ,IACrB,IAAIC,mBACZ,EAAE;IAEL,MAAMC,gBAAgBF,QAAQ,IACnB,IAAIG,cAAcb,SAC1B,EAAE;IAEL,MAAMc,kBAAkBJ,QAAQ,IACrB,IAAIK,gBAAgBC,eAC5B;QAACA;KAAa;IAEjBC,UAAU;QAENjB,OAAO,YAAY,CAACQ,CAAAA;YAChBA,MAAM,cAAc,GAAG;QAC3B;QAEA,MAAMU,oBAAoBlB,OAAO,sBAAsB,CAACmB,SAAS,cAAc,EAAE;YAC7EhB,mBAAmBE,KAAK,GAAG;YAE3BL,OAAO,YAAY,CAACQ,CAAAA;gBAEhBA,MAAM,cAAc,GAAG;gBACvBA,MAAM,KAAK,GAAG;oBACV,SAAS,CAAC;oBACV,QAAQ,CAAC;gBACb;YACJ;QACJ;QAEA,OAAO;YACHU;QACJ;IACJ,GAAG,EAAE;IAGLD,UAAU;QACND,aAAa,KAAK;QAClBF,gBAAgB,KAAK;QAErB,OAAO;YACHA,gBAAgB,IAAI;YACpBE,aAAa,IAAI;YACjBP,gBAAgB,OAAO;YACvBG,cAAc,OAAO;QACzB;IACJ,GAAG;QAACE;QAAiBE;KAAa;IAGlCC,UAAU;QACN,MAAMG,2BAA2B,CAACC;YAC9BL,aAAa,WAAW,CAACK,EAAE,OAAO,EAAEA,EAAE,OAAO;QACjD;QAEAC,OAAO,gBAAgB,CAAC,YAAYF;QAEpC,OAAO;YACHE,OAAO,mBAAmB,CAAC,YAAYF;QAC3C;IACJ,GAAG,EAAE;IAEL,MAAMG,cAAcC,YAAY,CAACC;QAC7Bb,cAAc,WAAW,CAACa;IAC9B,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,wDACI,oBAACC,YAAUA,OAAAA,WAAAA,GACX,oBAACC,yBAAuBA;QAAC,iBAAiBb;qBACtC,oBAACc,gBAAcA,MACV,CAAC,EAAEC,GAAG,EAAE,iBACL,oBAACC,QAAMA;YACH,KAAKD;YACL,WAAW3B;YACX,iBAAiBO;YACjB,aAAac;YACb,aAAajB;2BAIzB,oBAACyB,aAAWA,QAAAA,WAAAA,GAEhB,oBAACC,mBAAiBA;AAG9B"}

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

@@ -1,14 +1,24 @@
 import react from "react";
 import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor.js";
+import { useIsDragging } from "./useIsDragging.js";
 const PreviewContainer = ({ children })=>{
     const uiHeight = useSelectFromEditor((state)=>state.uiReservedSpace.height);
+    const isDragging = useIsDragging();
     return /*#__PURE__*/ react.createElement("div", {
         id: "preview-container",
         style: {
             height: `calc(100vh - ${uiHeight}px)`
         },
-        className: "fill-grid relative flex flex-col items-center w-full overflow-auto"
-    }, children);
+        className: "bg-neutral-subtle relative flex flex-col items-center w-full overflow-auto p-[24px]"
+    }, isDragging && /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", {
+        className: "absolute z-50 pointer-events-none animate-fade-in top-0 left-0 right-0 h-2 bg-[#f9d8ce]"
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "absolute z-50 pointer-events-none animate-fade-in bottom-0 left-0 right-0 h-2 bg-[#f9d8ce]"
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "absolute z-50 pointer-events-none animate-fade-in top-0 left-0 bottom-0 w-2 bg-[#f9d8ce]"
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "absolute z-50 pointer-events-none animate-fade-in top-0 right-0 bottom-0 w-2 bg-[#f9d8ce]"
+    })), children);
 };
 export { PreviewContainer };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/PreviewContainer.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Preview/PreviewContainer.tsx"],"sourcesContent":["import React from \"react\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\n\ninterface PreviewContainerProps {\n children: React.ReactNode;\n}\n\nexport const PreviewContainer = ({ children }: PreviewContainerProps) => {\n const uiHeight = useSelectFromEditor(state => state.uiReservedSpace.height);\n\n return (\n <div\n id={\"preview-container\"}\n style={{ height: `calc(100vh - ${uiHeight}px)` }}\n className={\"~~fill~~-~~grid~~ relative flex flex-col items-center w-full overflow-auto\"}\n >\n {children}\n </div>\n );\n};\n"],"names":["PreviewContainer","children","uiHeight","useSelectFromEditor","state"],"mappings":"~~;;AAOO~~,MAAMA,mBAAmB,CAAC,EAAEC,QAAQ,EAAyB;IAChE,MAAMC,WAAWC,oBAAoBC,CAAAA,QAASA,MAAM,eAAe,CAAC,MAAM;~~IAE1E~~,OAAO,WAAP,GACI,oBAAC;QACG,IAAI;QACJ,OAAO;YAAE,QAAQ,CAAC,aAAa,~~EAAEF~~,SAAS,GAAG,CAAC;QAAC;QAC/C,~~WAAW~~;~~OAEVD~~;AAGb"}
1	+ {"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/PreviewContainer.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Preview/PreviewContainer.tsx"],"sourcesContent":["import React from \"react\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { useIsDragging } from \"./useIsDragging.js\";\n\ninterface PreviewContainerProps {\n children: React.ReactNode;\n}\n\nexport const PreviewContainer = ({ children }: PreviewContainerProps) => {\n const uiHeight = useSelectFromEditor(state => state.uiReservedSpace.height);\n const isDragging = useIsDragging();\n\n return (\n <div\n id={\"preview-container\"}\n style={{ height: `calc(100vh - ${uiHeight}px)` }}\n className={\n \"bg-neutral-subtle relative flex flex-col items-center w-full overflow-auto p-[24px]\"\n }\n >\n {isDragging && (\n <>\n <div\n className={\n \"absolute z-50 pointer-events-none animate-fade-in top-0 left-0 right-0 h-2 bg-[#f9d8ce]\"\n }\n />\n <div\n className={\n \"absolute z-50 pointer-events-none animate-fade-in bottom-0 left-0 right-0 h-2 bg-[#f9d8ce]\"\n }\n />\n <div\n className={\n \"absolute z-50 pointer-events-none animate-fade-in top-0 left-0 bottom-0 w-2 bg-[#f9d8ce]\"\n }\n />\n <div\n className={\n \"absolute z-50 pointer-events-none animate-fade-in top-0 right-0 bottom-0 w-2 bg-[#f9d8ce]\"\n }\n />\n </>\n )}\n {children}\n </div>\n );\n};\n"],"names":["PreviewContainer","children","uiHeight","useSelectFromEditor","state","isDragging","useIsDragging"],"mappings":";;;AAQO,MAAMA,mBAAmB,CAAC,EAAEC,QAAQ,EAAyB;IAChE,MAAMC,WAAWC,oBAAoBC,CAAAA,QAASA,MAAM,eAAe,CAAC,MAAM;IAC1E,MAAMC,aAAaC;IAEnB,OAAO,WAAP,GACI,oBAAC;QACG,IAAI;QACJ,OAAO;YAAE,QAAQ,CAAC,aAAa,EAAEJ,SAAS,GAAG,CAAC;QAAC;QAC/C,WACI;OAGHG,cAAc,WAAdA,GACG,wDACI,oBAAC;QACG,WACI;sBAGR,oBAAC;QACG,WACI;sBAGR,oBAAC;QACG,WACI;sBAGR,oBAAC;QACG,WACI;SAKfJ;AAGb"}

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

@@ -154,10 +154,9 @@ class PreviewEvents {
             width: 0,
             height: 0
         };
-        const containerRect = previewContainer.getBoundingClientRect();
         const bodyRect = previewBody.getBoundingClientRect();
         return {
-            top: containerRect.top,
+            top: bodyRect.top + previewContainer.scrollTop,
             left: bodyRect.left,
             width: bodyRect.width,
             height: bodyRect.height

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

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

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

@@ -9,7 +9,7 @@ const useResponsiveContainer = (viewportManager)=>{
     const { breakpoint } = useBreakpoint();
     const updateContainerWidth = useCallback(()=>{
         const uiWidth = editor.getEditorState().read().uiReservedSpace.width;
-        setContainerWidth(document.body.clientWidth - uiWidth);
+        setContainerWidth(document.body.clientWidth - uiWidth - 48);
     }, [
         editor
     ]);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/useResponsiveContainer.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Preview/useResponsiveContainer.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport type { ViewportManager } from \"@webiny/website-builder-sdk\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\n\n/*\n Calculate the real width of the preview container, taking into account reserved UI space, breakpoint,\n * and viewport width. 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 const editor = useDocumentEditor();\n const uiWidth = useSelectFromEditor(state => state.uiReservedSpace.width);\n const { breakpoint } = useBreakpoint();\n\n const updateContainerWidth = useCallback(() => {\n const uiWidth = editor.getEditorState().read().uiReservedSpace.width;\n setContainerWidth(document.body.clientWidth - uiWidth);\n }, [editor]);\n\n useEffect(() => {\n updateContainerWidth();\n }, [breakpoint.name, uiWidth]);\n\n useEffect(() => {\n return viewportManager.onViewportChangeEnd(updateContainerWidth);\n }, []);\n\n return Math.min(containerWidth, breakpoint.maxWidth);\n};\n"],"names":["useResponsiveContainer","viewportManager","containerWidth","setContainerWidth","useState","editor","useDocumentEditor","uiWidth","useSelectFromEditor","state","breakpoint","useBreakpoint","updateContainerWidth","useCallback","document","useEffect","Math"],"mappings":";;;;AAWO,MAAMA,yBAAyB,CAACC;IACnC,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGC,SAAS;IACrD,MAAMC,SAASC;IACf,MAAMC,UAAUC,oBAAoBC,CAAAA,QAASA,MAAM,eAAe,CAAC,KAAK;IACxE,MAAM,EAAEC,UAAU,EAAE,GAAGC;IAEvB,MAAMC,uBAAuBC,YAAY;QACrC,MAAMN,UAAUF,OAAO,cAAc,GAAG,IAAI,GAAG,eAAe,CAAC,KAAK;~~QACpEF~~,kBAAkBW,SAAS,IAAI,CAAC,WAAW,GAAGP;~~IAClD~~,GAAG;QAACF;KAAO;IAEXU,UAAU;QACNH;IACJ,GAAG;QAACF,WAAW,IAAI;QAAEH;KAAQ;IAE7BQ,UAAU,IACCd,gBAAgB,mBAAmB,CAACW,uBAC5C,EAAE;IAEL,OAAOI,KAAK,GAAG,CAACd,gBAAgBQ,WAAW,QAAQ;AACvD"}
1	+ {"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/useResponsiveContainer.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Preview/useResponsiveContainer.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport type { ViewportManager } from \"@webiny/website-builder-sdk\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\n\n/*\n Calculate the real width of the preview container, taking into account reserved UI space, breakpoint,\n * and viewport width. 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 const editor = useDocumentEditor();\n const uiWidth = useSelectFromEditor(state => state.uiReservedSpace.width);\n const { breakpoint } = useBreakpoint();\n\n const updateContainerWidth = useCallback(() => {\n const uiWidth = editor.getEditorState().read().uiReservedSpace.width;\n // Subtract horizontal padding (2 × 24 px from p-6 on PreviewContainer) so preview-body\n // fits inside the padded container without overflowing the flex layout.\n setContainerWidth(document.body.clientWidth - uiWidth - 48);\n }, [editor]);\n\n useEffect(() => {\n updateContainerWidth();\n }, [breakpoint.name, uiWidth]);\n\n useEffect(() => {\n return viewportManager.onViewportChangeEnd(updateContainerWidth);\n }, []);\n\n return Math.min(containerWidth, breakpoint.maxWidth);\n};\n"],"names":["useResponsiveContainer","viewportManager","containerWidth","setContainerWidth","useState","editor","useDocumentEditor","uiWidth","useSelectFromEditor","state","breakpoint","useBreakpoint","updateContainerWidth","useCallback","document","useEffect","Math"],"mappings":";;;;AAWO,MAAMA,yBAAyB,CAACC;IACnC,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGC,SAAS;IACrD,MAAMC,SAASC;IACf,MAAMC,UAAUC,oBAAoBC,CAAAA,QAASA,MAAM,eAAe,CAAC,KAAK;IACxE,MAAM,EAAEC,UAAU,EAAE,GAAGC;IAEvB,MAAMC,uBAAuBC,YAAY;QACrC,MAAMN,UAAUF,OAAO,cAAc,GAAG,IAAI,GAAG,eAAe,CAAC,KAAK;QAGpEF,kBAAkBW,SAAS,IAAI,CAAC,WAAW,GAAGP,UAAU;IAC5D,GAAG;QAACF;KAAO;IAEXU,UAAU;QACNH;IACJ,GAAG;QAACF,WAAW,IAAI;QAAEH;KAAQ;IAE7BQ,UAAU,IACCd,gBAAgB,mBAAmB,CAACW,uBAC5C,EAAE;IAEL,OAAOI,KAAK,GAAG,CAACd,gBAAgBQ,WAAW,QAAQ;AACvD"}

package/BaseEditor/defaultConfig/DefaultEditorConfig.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import react from "react";
-import { ReactComponent } from "@webiny/icons/touch_app.svg";
 import { EditorConfig } from "../config/index.js";
-import { InfoMessage } from "./Sidebar/InfoMessage.js";
+import { SidebarEmptyState } from "./Sidebar/SidebarEmptyState.js";
 import { StyleSettingsGroup } from "./Sidebar/StyleSettings/StyleSettingsGroup.js";
 import { StyleProperties } from "./Sidebar/StyleSettings/StyleProperties.js";
 import { ElementSettingsGroup } from "./Sidebar/ElementSettings/ElementSettingsGroup.js";
@@ -12,9 +11,8 @@ import { ElementSettings } from "./Sidebar/ElementSettings/ElementSettings.js";
 import { ElementInputRenderers } from "./ElementInputRenderers.js";
 import { ContentPreviewConfig } from "./Content/ContentPreviewConfig.js";
 const { Ui: Ui } = EditorConfig;
-const ClickToActivate = ()=>/*#__PURE__*/ react.createElement(Ui.NoActiveElement, null, /*#__PURE__*/ react.createElement(InfoMessage, {
-        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
-        message: "Select an element on the canvas to activate this panel."
+const ClickToActivate = ()=>/*#__PURE__*/ react.createElement(Ui.NoActiveElement, null, /*#__PURE__*/ react.createElement(SidebarEmptyState, {
+        message: "Select an element in the canvas to edit properties."
     }));
 const DefaultEditorConfig = /*#__PURE__*/ react.memo(()=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(CommandHandlers, null), /*#__PURE__*/ react.createElement(EditorConfig, null, /*#__PURE__*/ react.createElement(ElementInputRenderers, null), /*#__PURE__*/ react.createElement(ContentPreviewConfig, null), /*#__PURE__*/ react.createElement(Ui.Toolbar.Element, {
         name: "insertElements",