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

@webiny/app-website-builder 6.0.0-alpha.4 → 6.0.0-rc.0

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

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

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useWebsiteBuilderTheme } from "../../../components";
+import { useWebsiteBuilderTheme } from "../../../components/index.js";
 export const ApplyTheme = () => {
   const {
     theme
@@ -19,19 +19,6 @@ export const ApplyTheme = () => {
         document.head.appendChild(style);
       }
     }
-    if (theme.cssVariables) {
-      const existing = document.querySelector(`style[id="wb-editor-css-variables"]`);
-      const style = document.createElement("style");
-      style.id = "wb-editor-css-variables";
-      style.innerHTML = `:root {
-                ${Object.entries(theme.cssVariables).map(([key, value]) => `${key}: ${value}`).join("\n")}
-            `;
-      if (existing) {
-        existing.replaceWith(style);
-      } else {
-        document.head.appendChild(style);
-      }
-    }
     if (theme.fonts) {
       theme.fonts.forEach(font => {
         const existing = document.querySelector(`link[href="${font}"]`);
@@ -44,6 +31,12 @@ export const ApplyTheme = () => {
         document.head.appendChild(link);
       });
     }
+    return () => {
+      const existing = document.querySelector(`style[id="wb-editor-css"]`);
+      if (existing) {
+        existing.remove();
+      }
+    };
   }, [theme]);
   return null;
 };

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

	@@ -1 +1 @@
1	- {"version":3,"names":["useEffect","useWebsiteBuilderTheme","ApplyTheme","theme","css","existing","document","querySelector","style","createElement","id","innerHTML","replaceWith","head","appendChild","~~cssVariables","Object","entries","map","key","value","join","~~fonts","forEach","font","link","href","rel"],"sources":["ApplyTheme.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useWebsiteBuilderTheme } from \"~/BaseEditor/components\";\n\nexport const ApplyTheme = () => {\n const { theme } = useWebsiteBuilderTheme();\n\n useEffect(() => {\n if (!theme) {\n return;\n }\n\n if (theme.css) {\n const existing = document.querySelector(`style[id=\"wb-editor-css\"]`);\n\n const style = document.createElement(\"style\");\n style.id = \"wb-editor-css\";\n style.innerHTML = theme.css;\n\n if (existing) {\n existing.replaceWith(style);\n } else {\n document.head.appendChild(style);\n }\n }\n\n if (theme.~~cssVariables~~) {\n const existing = document.querySelector(`~~style~~[id=\"~~wb-editor-css-variables~~\"]`);\n\n const ~~style~~ = document.createElement(\"~~style~~\");\n ~~style~~.id = ~~\"wb-editor-css-variables\"~~;\n ~~style~~.~~innerHTML~~ = ~~`:root {~~\~~n ${Object.entries(theme.cssVariables)\n .map(([key, value]) => `${key}: ${value}`)\n .join(\~~"~~\\n~~\"~~)}\n `;\n\n if (existing) {\n existing.replaceWith(style)~~;\n ~~} else {\n~~ document.head.appendChild(~~style~~);\n }\n }\n\n if (~~theme.fonts~~) ~~{\n theme.fonts.forEach(font~~ => {\n const existing = document.querySelector(`~~link~~[~~href~~=\"~~${font}~~\"]`);\n if (existing) {\n ~~return;\n~~ ~~}\n\n const link = document~~.~~createElement~~(~~\"link\"~~);\n ~~link.href = font;\n link.rel = \"stylesheet\";\n document.head.appendChild(link);\n~~ }~~);\~~n }\n }, [theme]);\n\n return null;\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,sBAAsB;AAE/B,OAAO,MAAMC,UAAU,GAAGA,CAAA,KAAM;EAC5B,MAAM;IAAEC;EAAM,CAAC,GAAGF,sBAAsB,CAAC,CAAC;EAE1CD,SAAS,CAAC,MAAM;IACZ,IAAI,CAACG,KAAK,EAAE;MACR;IACJ;IAEA,IAAIA,KAAK,CAACC,GAAG,EAAE;MACX,MAAMC,QAAQ,GAAGC,QAAQ,CAACC,aAAa,CAAC,2BAA2B,CAAC;MAEpE,MAAMC,KAAK,GAAGF,QAAQ,CAACG,aAAa,CAAC,OAAO,CAAC;MAC7CD,KAAK,CAACE,EAAE,GAAG,eAAe;MAC1BF,KAAK,CAACG,SAAS,GAAGR,KAAK,CAACC,GAAG;MAE3B,IAAIC,QAAQ,EAAE;QACVA,QAAQ,CAACO,WAAW,CAACJ,KAAK,CAAC;MAC/B,CAAC,MAAM;QACHF,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACN,KAAK,CAAC;MACpC;IACJ;IAEA,IAAIL,KAAK,CAACY,~~YAAY,EAAE;MACpB,MAAMV,QAAQ,GAAGC,QAAQ,CAACC,aAAa,CAAC,qCAAqC,CAAC;MAE9E,MAAMC,~~KAAK,~~GAAGF,QAAQ,CAACG,aAAa,CAAC,OAAO,CAAC;MAC7CD,KAAK,CAACE,~~EAAE~~,GAAG,yBAAyB~~;~~MACpCF~~,KAAK,~~CAACG,SAAS,GAAG;AAC9B,kBAAkBK,MAAM,CAACC,OAAO,CAACd,KAAK,~~CAACY,~~YAAY,CAAC,CAC/BG,GAAG,CAAC,CAAC,CAACC,GAAG,EAAEC,~~KAAK,~~CAAC,KAAK,GAAGD,GAAG,KAAKC,KAAK,EAAE,CAAC,CACzCC,IAAI,CAAC,IAAI,CAAC;AAC/B,aAAa;MAED,IAAIhB,QAAQ,EAAE;QACVA,QAAQ,CAACO,WAAW,CAACJ,KAAK,CAAC;MAC/B,CAAC,MAAM;QACHF,QAAQ,CAACO,IAAI,~~CAACC,~~WAAW,CAACN,KAAK,CAAC;MACpC;IACJ;IAEA,IAAIL,KAAK,CAACmB,KAAK,EAAE;MACbnB,KAAK,CAACmB,KAAK,CAACC,~~OAAO,CAACC,IAAI,IAAI;QACxB,~~MAAMnB~~,QAAQ,GAAGC,QAAQ,CAACC,aAAa,CAAC,~~cAAciB~~,IAAI,IAAI,CAAC;QAC/D,~~IAAInB~~,QAAQ,EAAE;UACV;QACJ;QAEA,~~MAAMoB~~,IAAI,~~GAAGnB~~,QAAQ,CAACG,aAAa,CAAC,MAAM,CAAC;~~QAC3CgB~~,IAAI,CAACC,IAAI,GAAGF,IAAI;QAChBC,IAAI,CAACE,GAAG,GAAG,YAAY;~~QACvBrB~~,QAAQ,CAACO,IAAI,CAACC,WAAW,~~CAACW~~,IAAI,CAAC;MACnC,CAAC,CAAC;IACN;~~EACJ~~,CAAC,EAAE,~~CAACtB~~,KAAK,CAAC,CAAC;EAEX,OAAO,IAAI;AACf,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["useEffect","useWebsiteBuilderTheme","ApplyTheme","theme","css","existing","document","querySelector","style","createElement","id","innerHTML","replaceWith","head","appendChild","fonts","forEach","font","link","href","rel","remove"],"sources":["ApplyTheme.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useWebsiteBuilderTheme } from \"~/BaseEditor/components/index.js\";\n\nexport const ApplyTheme = () => {\n const { theme } = useWebsiteBuilderTheme();\n\n useEffect(() => {\n if (!theme) {\n return;\n }\n\n if (theme.css) {\n const existing = document.querySelector(`style[id=\"wb-editor-css\"]`);\n\n const style = document.createElement(\"style\");\n style.id = \"wb-editor-css\";\n style.innerHTML = theme.css;\n\n if (existing) {\n existing.replaceWith(style);\n } else {\n document.head.appendChild(style);\n }\n }\n\n if (theme.fonts) {\n theme.fonts.forEach(font => {\n const existing = document.querySelector(`link[href=\"${font}\"]`);\n if (existing) {\n return;\n }\n\n const link = document.createElement(\"link\");\n link.href = font;\n link.rel = \"stylesheet\";\n document.head.appendChild(link);\n });\n }\n\n return () => {\n const existing = document.querySelector(`style[id=\"wb-editor-css\"]`);\n if (existing) {\n existing.remove();\n }\n };\n }, [theme]);\n\n return null;\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,sBAAsB;AAE/B,OAAO,MAAMC,UAAU,GAAGA,CAAA,KAAM;EAC5B,MAAM;IAAEC;EAAM,CAAC,GAAGF,sBAAsB,CAAC,CAAC;EAE1CD,SAAS,CAAC,MAAM;IACZ,IAAI,CAACG,KAAK,EAAE;MACR;IACJ;IAEA,IAAIA,KAAK,CAACC,GAAG,EAAE;MACX,MAAMC,QAAQ,GAAGC,QAAQ,CAACC,aAAa,CAAC,2BAA2B,CAAC;MAEpE,MAAMC,KAAK,GAAGF,QAAQ,CAACG,aAAa,CAAC,OAAO,CAAC;MAC7CD,KAAK,CAACE,EAAE,GAAG,eAAe;MAC1BF,KAAK,CAACG,SAAS,GAAGR,KAAK,CAACC,GAAG;MAE3B,IAAIC,QAAQ,EAAE;QACVA,QAAQ,CAACO,WAAW,CAACJ,KAAK,CAAC;MAC/B,CAAC,MAAM;QACHF,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACN,KAAK,CAAC;MACpC;IACJ;IAEA,IAAIL,KAAK,CAACY,KAAK,EAAE;MACbZ,KAAK,CAACY,KAAK,CAACC,OAAO,CAACC,IAAI,IAAI;QACxB,MAAMZ,QAAQ,GAAGC,QAAQ,CAACC,aAAa,CAAC,cAAcU,IAAI,IAAI,CAAC;QAC/D,IAAIZ,QAAQ,EAAE;UACV;QACJ;QAEA,MAAMa,IAAI,GAAGZ,QAAQ,CAACG,aAAa,CAAC,MAAM,CAAC;QAC3CS,IAAI,CAACC,IAAI,GAAGF,IAAI;QAChBC,IAAI,CAACE,GAAG,GAAG,YAAY;QACvBd,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACI,IAAI,CAAC;MACnC,CAAC,CAAC;IACN;IAEA,OAAO,MAAM;MACT,MAAMb,QAAQ,GAAGC,QAAQ,CAACC,aAAa,CAAC,2BAA2B,CAAC;MACpE,IAAIF,QAAQ,EAAE;QACVA,QAAQ,CAACgB,MAAM,CAAC,CAAC;MACrB;IACJ,CAAC;EACL,CAAC,EAAE,CAAClB,KAAK,CAAC,CAAC;EAEX,OAAO,IAAI;AACf,CAAC","ignoreList":[]}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { useIframeUrl } from "./useIframeUrl";
+import { useIframeUrl } from "./useIframeUrl.js";
 export const AwaitIframeUrl = ({
   children
 }) => {

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

	@@ -1 +1 @@
1	- {"version":3,"names":["React","useIframeUrl","AwaitIframeUrl","children","url","createElement","Fragment"],"sources":["AwaitIframeUrl.tsx"],"sourcesContent":["import React from \"react\";\nimport { useIframeUrl } from \"~/BaseEditor/defaultConfig/Content/Preview/useIframeUrl\";\n\ninterface AwaitIframeUrlProps {\n children: (params: { url: string }) => React.ReactNode;\n}\n\nexport const AwaitIframeUrl = ({ children }: AwaitIframeUrlProps) => {\n const url = useIframeUrl();\n\n return url ? <>{children({ url })}</> : null;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY;AAMrB,OAAO,MAAMC,cAAc,GAAGA,CAAC;EAAEC;AAA8B,CAAC,KAAK;EACjE,MAAMC,GAAG,GAAGH,YAAY,CAAC,CAAC;EAE1B,OAAOG,GAAG,gBAAGJ,KAAA,CAAAK,aAAA,CAAAL,KAAA,CAAAM,QAAA,QAAGH,QAAQ,CAAC;IAAEC;EAAI,CAAC,CAAI,CAAC,GAAG,IAAI;AAChD,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["React","useIframeUrl","AwaitIframeUrl","children","url","createElement","Fragment"],"sources":["AwaitIframeUrl.tsx"],"sourcesContent":["import React from \"react\";\nimport { useIframeUrl } from \"~/BaseEditor/defaultConfig/Content/Preview/useIframeUrl.js\";\n\ninterface AwaitIframeUrlProps {\n children: (params: { url: string }) => React.ReactNode;\n}\n\nexport const AwaitIframeUrl = ({ children }: AwaitIframeUrlProps) => {\n const url = useIframeUrl();\n\n return url ? <>{children({ url })}</> : null;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY;AAMrB,OAAO,MAAMC,cAAc,GAAGA,CAAC;EAAEC;AAA8B,CAAC,KAAK;EACjE,MAAMC,GAAG,GAAGH,YAAY,CAAC,CAAC;EAE1B,OAAOG,GAAG,gBAAGJ,KAAA,CAAAK,aAAA,CAAAL,KAAA,CAAAM,QAAA,QAAGH,QAAQ,CAAC;IAAEC;EAAI,CAAC,CAAI,CAAC,GAAG,IAAI;AAChD,CAAC","ignoreList":[]}

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

@@ -1,8 +1,8 @@
 import React from "react";
 import classNames from "classnames";
 import { IconButton, Tooltip, Text, Heading } from "@webiny/admin-ui";
-import { useBreakpoint } from "../../../hooks/useBreakpoint";
-import { InlineSvg } from "../../Toolbar/InsertElements/InlineSvg";
+import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
+import { InlineSvg } from "../../Toolbar/InsertElements/InlineSvg.js";
 export const BreakpointSelector = () => {
   const {
     breakpoint,
@@ -10,7 +10,7 @@ export const BreakpointSelector = () => {
     setBreakpoint
   } = useBreakpoint();
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-align-right wby-bg-neutral-light wby-rounded-md"
+    className: "align-right bg-neutral-light rounded-md"
   }, breakpoints.map(bp => {
     return /*#__PURE__*/React.createElement(Tooltip, {
       key: bp.name,

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

	@@ -1 +1 @@
1	- {"version":3,"names":["React","classNames","IconButton","Tooltip","Text","Heading","useBreakpoint","InlineSvg","BreakpointSelector","breakpoint","breakpoints","setBreakpoint","createElement","className","map","bp","key","name","content","level","title","size","description","side","active","trigger","icon","src","variant","onClick"],"sources":["BreakpointSelector.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport { IconButton, Tooltip, Text, Heading } from \"@webiny/admin-ui\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg\";\n\nexport const BreakpointSelector = () => {\n const { breakpoint, breakpoints, setBreakpoint } = useBreakpoint();\n\n return (\n <div className={\"~~wby-~~align-right ~~wby-~~bg-neutral-light ~~wby-~~rounded-md\"}>\n {breakpoints.map(bp => {\n return (\n <Tooltip\n key={bp.name}\n content={\n <div>\n <Heading level={5}>{bp.title}</Heading>\n <Text size=\"md\">{bp.description}</Text>\n </div>\n }\n side=\"bottom\"\n className={classNames(\"action-wrapper\", {\n active: bp === breakpoint\n })}\n trigger={\n <IconButton\n size={\"md\"}\n icon={<InlineSvg src={bp.icon} />}\n variant={breakpoint.name === bp.name ? \"tertiary\" : \"ghost\"}\n onClick={() => setBreakpoint(bp.name)}\n />\n }\n />\n );\n })}\n </div>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,UAAU,EAAEC,OAAO,EAAEC,IAAI,EAAEC,OAAO,QAAQ,kBAAkB;AACrE,SAASC,aAAa;AACtB,SAASC,SAAS;AAElB,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACpC,MAAM;IAAEC,UAAU;IAAEC,WAAW;IAAEC;EAAc,CAAC,GAAGL,aAAa,CAAC,CAAC;EAElE,oBACIN,KAAA,CAAAY,aAAA;IAAKC,SAAS,EAAE;~~EAAsD~~,~~GACjEH~~,WAAW,CAACI,GAAG,CAACC,EAAE,IAAI;IACnB,oBACIf,KAAA,CAAAY,aAAA,CAACT,OAAO;MACJa,GAAG,EAAED,EAAE,CAACE,IAAK;MACbC,OAAO,eACHlB,KAAA,CAAAY,aAAA,2BACIZ,KAAA,CAAAY,aAAA,CAACP,OAAO;QAACc,KAAK,EAAE;MAAE,GAAEJ,EAAE,CAACK,KAAe,CAAC,eACvCpB,KAAA,CAAAY,aAAA,CAACR,IAAI;QAACiB,IAAI,EAAC;MAAI,GAAEN,EAAE,CAACO,WAAkB,CACrC,CACR;MACDC,IAAI,EAAC,QAAQ;MACbV,SAAS,EAAEZ,UAAU,CAAC,gBAAgB,EAAE;QACpCuB,MAAM,EAAET,EAAE,KAAKN;MACnB,CAAC,CAAE;MACHgB,OAAO,eACHzB,KAAA,CAAAY,aAAA,CAACV,UAAU;QACPmB,IAAI,EAAE,IAAK;QACXK,IAAI,eAAE1B,KAAA,CAAAY,aAAA,CAACL,SAAS;UAACoB,GAAG,EAAEZ,EAAE,CAACW;QAAK,CAAE,CAAE;QAClCE,OAAO,EAAEnB,UAAU,CAACQ,IAAI,KAAKF,EAAE,CAACE,IAAI,GAAG,UAAU,GAAG,OAAQ;QAC5DY,OAAO,EAAEA,CAAA,KAAMlB,aAAa,CAACI,EAAE,CAACE,IAAI;MAAE,CACzC;IACJ,CACJ,CAAC;EAEV,CAAC,CACA,CAAC;AAEd,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["React","classNames","IconButton","Tooltip","Text","Heading","useBreakpoint","InlineSvg","BreakpointSelector","breakpoint","breakpoints","setBreakpoint","createElement","className","map","bp","key","name","content","level","title","size","description","side","active","trigger","icon","src","variant","onClick"],"sources":["BreakpointSelector.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport { IconButton, Tooltip, Text, Heading } from \"@webiny/admin-ui\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\n\nexport const BreakpointSelector = () => {\n const { breakpoint, breakpoints, setBreakpoint } = useBreakpoint();\n\n return (\n <div className={\"align-right bg-neutral-light rounded-md\"}>\n {breakpoints.map(bp => {\n return (\n <Tooltip\n key={bp.name}\n content={\n <div>\n <Heading level={5}>{bp.title}</Heading>\n <Text size=\"md\">{bp.description}</Text>\n </div>\n }\n side=\"bottom\"\n className={classNames(\"action-wrapper\", {\n active: bp === breakpoint\n })}\n trigger={\n <IconButton\n size={\"md\"}\n icon={<InlineSvg src={bp.icon} />}\n variant={breakpoint.name === bp.name ? \"tertiary\" : \"ghost\"}\n onClick={() => setBreakpoint(bp.name)}\n />\n }\n />\n );\n })}\n </div>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,UAAU,EAAEC,OAAO,EAAEC,IAAI,EAAEC,OAAO,QAAQ,kBAAkB;AACrE,SAASC,aAAa;AACtB,SAASC,SAAS;AAElB,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACpC,MAAM;IAAEC,UAAU;IAAEC,WAAW;IAAEC;EAAc,CAAC,GAAGL,aAAa,CAAC,CAAC;EAElE,oBACIN,KAAA,CAAAY,aAAA;IAAKC,SAAS,EAAE;EAA0C,GACrDH,WAAW,CAACI,GAAG,CAACC,EAAE,IAAI;IACnB,oBACIf,KAAA,CAAAY,aAAA,CAACT,OAAO;MACJa,GAAG,EAAED,EAAE,CAACE,IAAK;MACbC,OAAO,eACHlB,KAAA,CAAAY,aAAA,2BACIZ,KAAA,CAAAY,aAAA,CAACP,OAAO;QAACc,KAAK,EAAE;MAAE,GAAEJ,EAAE,CAACK,KAAe,CAAC,eACvCpB,KAAA,CAAAY,aAAA,CAACR,IAAI;QAACiB,IAAI,EAAC;MAAI,GAAEN,EAAE,CAACO,WAAkB,CACrC,CACR;MACDC,IAAI,EAAC,QAAQ;MACbV,SAAS,EAAEZ,UAAU,CAAC,gBAAgB,EAAE;QACpCuB,MAAM,EAAET,EAAE,KAAKN;MACnB,CAAC,CAAE;MACHgB,OAAO,eACHzB,KAAA,CAAAY,aAAA,CAACV,UAAU;QACPmB,IAAI,EAAE,IAAK;QACXK,IAAI,eAAE1B,KAAA,CAAAY,aAAA,CAACL,SAAS;UAACoB,GAAG,EAAEZ,EAAE,CAACW;QAAK,CAAE,CAAE;QAClCE,OAAO,EAAEnB,UAAU,CAACQ,IAAI,KAAKF,EAAE,CAACE,IAAI,GAAG,UAAU,GAAG,OAAQ;QAC5DY,OAAO,EAAEA,CAAA,KAAMlB,aAAa,CAACI,EAAE,CAACE,IAAI;MAAE,CACzC;IACJ,CACJ,CAAC;EAEV,CAAC,CACA,CAAC;AAEd,CAAC","ignoreList":[]}

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument";
-import { Preview } from "./Preview";
+import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument.js";
+import { Preview } from "./Preview.js";
 export const DocumentPreview = () => {
   const {
     id

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

	@@ -1 +1 @@
1	- {"version":3,"names":["React","useSelectFromDocument","Preview","DocumentPreview","id","document","createElement","key"],"sources":["DocumentPreview.tsx"],"sourcesContent":["import React from \"react\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\nimport { Preview } from \"./Preview\";\n\nexport const DocumentPreview = () => {\n const { id } = useSelectFromDocument(document => {\n return { id: document.id };\n });\n\n return <Preview key={id} />;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,qBAAqB;AAC9B,SAASC,OAAO;AAEhB,OAAO,MAAMC,eAAe,GAAGA,CAAA,KAAM;EACjC,MAAM;IAAEC;EAAG,CAAC,GAAGH,qBAAqB,CAACI,QAAQ,IAAI;IAC7C,OAAO;MAAED,EAAE,EAAEC,QAAQ,CAACD;IAAG,CAAC;EAC9B,CAAC,CAAC;EAEF,oBAAOJ,KAAA,CAAAM,aAAA,CAACJ,OAAO;IAACK,GAAG,EAAEH;EAAG,CAAE,CAAC;AAC/B,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["React","useSelectFromDocument","Preview","DocumentPreview","id","document","createElement","key"],"sources":["DocumentPreview.tsx"],"sourcesContent":["import React from \"react\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { Preview } from \"./Preview.js\";\n\nexport const DocumentPreview = () => {\n const { id } = useSelectFromDocument(document => {\n return { id: document.id };\n });\n\n return <Preview key={id} />;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,qBAAqB;AAC9B,SAASC,OAAO;AAEhB,OAAO,MAAMC,eAAe,GAAGA,CAAA,KAAM;EACjC,MAAM;IAAEC;EAAG,CAAC,GAAGH,qBAAqB,CAACI,QAAQ,IAAI;IAC7C,OAAO;MAAED,EAAE,EAAEC,QAAQ,CAACD;IAAG,CAAC;EAC9B,CAAC,CAAC;EAEF,oBAAOJ,KAAA,CAAAM,aAAA,CAACJ,OAAO;IAACK,GAAG,EAAEH;EAAG,CAAE,CAAC;AAC/B,CAAC","ignoreList":[]}

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

@@ -1,4 +1,4 @@
-import type { Box } from "./Box";
+import type { Box } from "./Box.js";
 type DropPosition = number | null;
 export interface DropZoneProximity {
     box: Box;
@@ -30,5 +30,6 @@ export declare class DropZoneManager {
         index: number;
     } | null;
     tick(): void;
+    private getScrollOffset;
 }
 export {};

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

@@ -39,9 +39,10 @@ export class DropZoneManager {
     };
   }
   tick() {
+    const scrollYOffset = this.getScrollOffset();
     const threshold = 10;
     const mouseX = this.mouse.x;
-    const mouseY = this.mouse.y;
+    const mouseY = this.mouse.y + scrollYOffset;
     let matchedId = null;
     let matchedPosition = null;
     let matchedBox = null;
@@ -78,6 +79,13 @@ export class DropZoneManager {
       }
     }
   }
+  getScrollOffset() {
+    const container = document.getElementById("preview-container");
+    if (!container) {
+      return 0;
+    }
+    return container.scrollTop;
+  }
 }
 //# sourceMappingURL=DropZoneManager.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"names":["DropZoneManager","zones","Map","currentTargetId","currentPosition","animationFrame","currentBox","constructor","mouse","register","entry","id","set","unregister","delete","start","runDropzoneLoop","tick","requestAnimationFrame","stop","cancelAnimationFrame","getLastMatchedPosition","parentId","slot","parentSlot","index","parentIndex","threshold","mouseX","x","mouseY","y","matchedId","matchedPosition","matchedBox","box","isWithinX","left","right","top","bottom","isTarget","onProximityChange","position"],"sources":["DropZoneManager.ts"],"sourcesContent":["import type { Box } from \"./Box\";\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 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 threshold = 10;\n const mouseX = this.mouse.x;\n const mouseY = this.mouse.y;\n\n let matchedId: string \| null = null;\n let matchedPosition: DropPosition = null;\n let matchedBox: Box \| null = null;\n\n for (const [id, { box }] of this.zones) {\n const isWithinX = mouseX >= box.left && mouseX <= box.right;\n\n if (!isWithinX) {\n continue;\n }\n\n if (mouseY >= box.top - threshold && mouseY <= box.top + threshold) {\n matchedId = id;\n matchedPosition = 0; // before\n matchedBox = box;\n break;\n }\n\n if (mouseY >= box.bottom - threshold && mouseY <= box.bottom + threshold) {\n matchedId = id;\n matchedPosition = 1; // after\n matchedBox = box;\n break;\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"],"mappings":"AAeA,OAAO,MAAMA,eAAe,CAAC;EACjBC,KAAK,GAAG,IAAIC,GAAG,CAAwB,CAAC;EACxCC,eAAe,GAAkB,IAAI;EACrCC,eAAe,GAAiB,IAAI;EACpCC,cAAc,GAAkB,IAAI;EACpCC,UAAU,GAAe,IAAI;EAErCC,WAAWA,CAASC,KAA+B,EAAE;IAAA,KAAjCA,KAA+B,GAA/BA,KAA+B;EAAG;EAEtDC,QAAQA,CAACC,KAAoB,EAAE;IAC3B,IAAIA,KAAK,CAACC,EAAE,KAAK,MAAM,EAAE;MACrB;IACJ;IAEA,IAAI,CAACV,KAAK,CAACW,GAAG,CAACF,KAAK,CAACC,EAAE,EAAED,KAAK,CAAC;EACnC;EAEAG,UAAUA,CAACF,EAAU,EAAE;IACnB,IAAI,CAACV,KAAK,CAACa,MAAM,CAACH,EAAE,CAAC;EACzB;EAEAI,KAAKA,CAAA,EAAG;IACJ,MAAMC,eAAe,GAAGA,CAAA,KAAM;MAC1B,IAAI,CAACC,IAAI,CAAC,CAAC;MACX,IAAI,CAACZ,cAAc,GAAGa,qBAAqB,CAACF,eAAe,CAAC;IAChE,CAAC;IACD,IAAI,CAACX,cAAc,GAAGa,qBAAqB,CAACF,eAAe,CAAC;EAChE;EAEAG,IAAIA,CAAA,EAAG;IACH,IAAI,IAAI,CAACd,cAAc,EAAE;MACrBe,oBAAoB,CAAC,IAAI,CAACf,cAAc,CAAC;IAC7C;EACJ;EAEAgB,sBAAsBA,CAAA,EAAG;IACrB,IAAI,CAAC,IAAI,CAACf,UAAU,EAAE;MAClB,OAAO,IAAI;IACf;IAEA,OAAO;MACHgB,QAAQ,EAAE,IAAI,CAAChB,UAAU,CAACgB,QAAQ;MAClCC,IAAI,EAAE,IAAI,CAACjB,UAAU,CAACkB,UAAU;MAChCC,KAAK,EAAE,IAAI,CAACnB,UAAU,CAACoB,WAAW,IAAI,IAAI,CAACtB,eAAe,IAAI,CAAC;IACnE,CAAC;EACL;EAEAa,IAAIA,CAAA,EAAG;IACH,MAAMU,SAAS,GAAG,EAAE;IACpB,MAAMC,MAAM,GAAG,IAAI,~~CAACpB~~,KAAK,~~CAACqB~~,CAAC;IAC3B,MAAMC,MAAM,GAAG,IAAI,~~CAACtB~~,KAAK,~~CAACuB~~,CAAC;~~IAE3B~~,~~IAAIC~~,SAAwB,GAAG,IAAI;IACnC,IAAIC,eAA6B,GAAG,IAAI;IACxC,IAAIC,UAAsB,GAAG,IAAI;IAEjC,KAAK,MAAM,~~CAACvB~~,EAAE,EAAE;~~MAAEwB~~;IAAI,CAAC,CAAC,IAAI,IAAI,~~CAAClC~~,KAAK,EAAE;MACpC,~~MAAMmC~~,SAAS,GAAGR,MAAM,IAAIO,GAAG,CAACE,IAAI,IAAIT,MAAM,IAAIO,GAAG,CAACG,KAAK;MAE3D,IAAI,CAACF,SAAS,EAAE;QACZ;MACJ;MAEA,IAAIN,MAAM,IAAIK,GAAG,CAACI,GAAG,GAAGZ,SAAS,IAAIG,MAAM,IAAIK,GAAG,CAACI,GAAG,GAAGZ,SAAS,EAAE;QAChEK,SAAS,~~GAAGrB~~,EAAE;~~QACdsB~~,eAAe,GAAG,CAAC,CAAC,CAAC;QACrBC,UAAU,GAAGC,GAAG;QAChB;MACJ;MAEA,IAAIL,MAAM,IAAIK,GAAG,CAACK,MAAM,GAAGb,SAAS,IAAIG,MAAM,IAAIK,GAAG,CAACK,MAAM,GAAGb,SAAS,EAAE;QACtEK,SAAS,~~GAAGrB~~,EAAE;~~QACdsB~~,eAAe,GAAG,CAAC,CAAC,CAAC;QACrBC,UAAU,GAAGC,GAAG;QAChB;MACJ;IACJ;IAEA,IAAIH,SAAS,KAAK,IAAI,~~CAAC7B~~,eAAe,~~IAAI8B~~,eAAe,KAAK,IAAI,~~CAAC7B~~,eAAe,EAAE;MAChF,IAAI,CAACD,eAAe,~~GAAG6B~~,SAAS;MAChC,IAAI,~~CAAC5B~~,eAAe,~~GAAG6B~~,eAAe;MACtC,IAAI,~~CAAC3B~~,UAAU,~~GAAG4B~~,UAAU;MAE5B,KAAK,MAAM,~~CAACvB~~,EAAE,EAAED,KAAK,CAAC,IAAI,IAAI,CAACT,KAAK,EAAE;QAClC,~~MAAMwC~~,QAAQ,~~GAAG9B~~,EAAE,~~KAAKqB~~,SAAS;~~QACjCtB~~,KAAK,~~CAACgC~~,iBAAiB,CACnBD,QAAQ,GAAG;UAAEN,GAAG,EAAED,UAAW;UAAES,QAAQ,EAAEV;QAAgB,CAAC,GAAG,IACjE,CAAC;MACL;IACJ;EACJ;AACJ","ignoreList":[]}
1	+ {"version":3,"names":["DropZoneManager","zones","Map","currentTargetId","currentPosition","animationFrame","currentBox","constructor","mouse","register","entry","id","set","unregister","delete","start","runDropzoneLoop","tick","requestAnimationFrame","stop","cancelAnimationFrame","getLastMatchedPosition","parentId","slot","parentSlot","index","parentIndex","scrollYOffset","getScrollOffset","threshold","mouseX","x","mouseY","y","matchedId","matchedPosition","matchedBox","box","isWithinX","left","right","top","bottom","isTarget","onProximityChange","position","container","document","getElementById","scrollTop"],"sources":["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 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 for (const [id, { box }] of this.zones) {\n const isWithinX = mouseX >= box.left && mouseX <= box.right;\n\n if (!isWithinX) {\n continue;\n }\n\n if (mouseY >= box.top - threshold && mouseY <= box.top + threshold) {\n matchedId = id;\n matchedPosition = 0; // before\n matchedBox = box;\n break;\n }\n\n if (mouseY >= box.bottom - threshold && mouseY <= box.bottom + threshold) {\n matchedId = id;\n matchedPosition = 1; // after\n matchedBox = box;\n break;\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"],"mappings":"AAeA,OAAO,MAAMA,eAAe,CAAC;EACjBC,KAAK,GAAG,IAAIC,GAAG,CAAwB,CAAC;EACxCC,eAAe,GAAkB,IAAI;EACrCC,eAAe,GAAiB,IAAI;EACpCC,cAAc,GAAkB,IAAI;EACpCC,UAAU,GAAe,IAAI;EAErCC,WAAWA,CAASC,KAA+B,EAAE;IAAA,KAAjCA,KAA+B,GAA/BA,KAA+B;EAAG;EAEtDC,QAAQA,CAACC,KAAoB,EAAE;IAC3B,IAAIA,KAAK,CAACC,EAAE,KAAK,MAAM,EAAE;MACrB;IACJ;IAEA,IAAI,CAACV,KAAK,CAACW,GAAG,CAACF,KAAK,CAACC,EAAE,EAAED,KAAK,CAAC;EACnC;EAEAG,UAAUA,CAACF,EAAU,EAAE;IACnB,IAAI,CAACV,KAAK,CAACa,MAAM,CAACH,EAAE,CAAC;EACzB;EAEAI,KAAKA,CAAA,EAAG;IACJ,MAAMC,eAAe,GAAGA,CAAA,KAAM;MAC1B,IAAI,CAACC,IAAI,CAAC,CAAC;MACX,IAAI,CAACZ,cAAc,GAAGa,qBAAqB,CAACF,eAAe,CAAC;IAChE,CAAC;IACD,IAAI,CAACX,cAAc,GAAGa,qBAAqB,CAACF,eAAe,CAAC;EAChE;EAEAG,IAAIA,CAAA,EAAG;IACH,IAAI,IAAI,CAACd,cAAc,EAAE;MACrBe,oBAAoB,CAAC,IAAI,CAACf,cAAc,CAAC;IAC7C;EACJ;EAEAgB,sBAAsBA,CAAA,EAAG;IACrB,IAAI,CAAC,IAAI,CAACf,UAAU,EAAE;MAClB,OAAO,IAAI;IACf;IAEA,OAAO;MACHgB,QAAQ,EAAE,IAAI,CAAChB,UAAU,CAACgB,QAAQ;MAClCC,IAAI,EAAE,IAAI,CAACjB,UAAU,CAACkB,UAAU;MAChCC,KAAK,EAAE,IAAI,CAACnB,UAAU,CAACoB,WAAW,IAAI,IAAI,CAACtB,eAAe,IAAI,CAAC;IACnE,CAAC;EACL;EAEAa,IAAIA,CAAA,EAAG;IACH,MAAMU,aAAa,GAAG,IAAI,CAACC,eAAe,CAAC,CAAC;IAC5C,MAAMC,SAAS,GAAG,EAAE;IACpB,MAAMC,MAAM,GAAG,IAAI,CAACtB,KAAK,CAACuB,CAAC;IAC3B,MAAMC,MAAM,GAAG,IAAI,CAACxB,KAAK,CAACyB,CAAC,GAAGN,aAAa;IAE3C,IAAIO,SAAwB,GAAG,IAAI;IACnC,IAAIC,eAA6B,GAAG,IAAI;IACxC,IAAIC,UAAsB,GAAG,IAAI;IAEjC,KAAK,MAAM,CAACzB,EAAE,EAAE;MAAE0B;IAAI,CAAC,CAAC,IAAI,IAAI,CAACpC,KAAK,EAAE;MACpC,MAAMqC,SAAS,GAAGR,MAAM,IAAIO,GAAG,CAACE,IAAI,IAAIT,MAAM,IAAIO,GAAG,CAACG,KAAK;MAE3D,IAAI,CAACF,SAAS,EAAE;QACZ;MACJ;MAEA,IAAIN,MAAM,IAAIK,GAAG,CAACI,GAAG,GAAGZ,SAAS,IAAIG,MAAM,IAAIK,GAAG,CAACI,GAAG,GAAGZ,SAAS,EAAE;QAChEK,SAAS,GAAGvB,EAAE;QACdwB,eAAe,GAAG,CAAC,CAAC,CAAC;QACrBC,UAAU,GAAGC,GAAG;QAChB;MACJ;MAEA,IAAIL,MAAM,IAAIK,GAAG,CAACK,MAAM,GAAGb,SAAS,IAAIG,MAAM,IAAIK,GAAG,CAACK,MAAM,GAAGb,SAAS,EAAE;QACtEK,SAAS,GAAGvB,EAAE;QACdwB,eAAe,GAAG,CAAC,CAAC,CAAC;QACrBC,UAAU,GAAGC,GAAG;QAChB;MACJ;IACJ;IAEA,IAAIH,SAAS,KAAK,IAAI,CAAC/B,eAAe,IAAIgC,eAAe,KAAK,IAAI,CAAC/B,eAAe,EAAE;MAChF,IAAI,CAACD,eAAe,GAAG+B,SAAS;MAChC,IAAI,CAAC9B,eAAe,GAAG+B,eAAe;MACtC,IAAI,CAAC7B,UAAU,GAAG8B,UAAU;MAE5B,KAAK,MAAM,CAACzB,EAAE,EAAED,KAAK,CAAC,IAAI,IAAI,CAACT,KAAK,EAAE;QAClC,MAAM0C,QAAQ,GAAGhC,EAAE,KAAKuB,SAAS;QACjCxB,KAAK,CAACkC,iBAAiB,CACnBD,QAAQ,GAAG;UAAEN,GAAG,EAAED,UAAW;UAAES,QAAQ,EAAEV;QAAgB,CAAC,GAAG,IACjE,CAAC;MACL;IACJ;EACJ;EAEQP,eAAeA,CAAA,EAAG;IACtB,MAAMkB,SAAS,GAAGC,QAAQ,CAACC,cAAc,CAAC,mBAAmB,CAAC;IAC9D,IAAI,CAACF,SAAS,EAAE;MACZ,OAAO,CAAC;IACZ;IAEA,OAAOA,SAAS,CAACG,SAAS;EAC9B;AACJ","ignoreList":[]}

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

@@ -1,11 +1,10 @@
-/// <reference types="react" />
-import type { DropZoneManager } from "./DropZoneManager";
+import type { DropZoneManager } from "./DropZoneManager.js";
 export declare const DropZoneManagerProvider: {
     ({ children, ...props }: {
         dropzoneManager: DropZoneManager;
     } & {
-        children: import("react").ReactNode;
-    }): import("react").JSX.Element;
+        children: React.ReactNode;
+    }): React.JSX.Element;
     displayName: string;
 };
 export declare const useDropZoneManager: () => DropZoneManager;

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

	@@ -1 +1 @@
1	- {"version":3,"names":["createGenericContext","DropZoneManagerContext","DropZoneManagerProvider","Provider","useDropZoneManager","dropzoneManager","useHook"],"sources":["DropZoneManagerProvider.tsx"],"sourcesContent":["import { createGenericContext } from \"@webiny/app-admin\";\nimport type { DropZoneManager } from \"./DropZoneManager\";\n\nconst DropZoneManagerContext = createGenericContext<{ dropzoneManager: DropZoneManager }>(\n \"DropzoneManager\"\n);\n\nexport const DropZoneManagerProvider = DropZoneManagerContext.Provider;\n\nexport const useDropZoneManager = () => {\n const { dropzoneManager } = DropZoneManagerContext.useHook();\n\n return dropzoneManager;\n};\n"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,mBAAmB;AAGxD,MAAMC,sBAAsB,GAAGD,oBAAoB,CAC/C,iBACJ,CAAC;AAED,OAAO,MAAME,uBAAuB,GAAGD,sBAAsB,CAACE,QAAQ;AAEtE,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACpC,MAAM;IAAEC;EAAgB,CAAC,GAAGJ,sBAAsB,CAACK,OAAO,CAAC,CAAC;EAE5D,OAAOD,eAAe;AAC1B,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["createGenericContext","DropZoneManagerContext","DropZoneManagerProvider","Provider","useDropZoneManager","dropzoneManager","useHook"],"sources":["DropZoneManagerProvider.tsx"],"sourcesContent":["import { createGenericContext } from \"@webiny/app-admin\";\nimport type { DropZoneManager } from \"./DropZoneManager.js\";\n\nconst DropZoneManagerContext = createGenericContext<{ dropzoneManager: DropZoneManager }>(\n \"DropzoneManager\"\n);\n\nexport const DropZoneManagerProvider = DropZoneManagerContext.Provider;\n\nexport const useDropZoneManager = () => {\n const { dropzoneManager } = DropZoneManagerContext.useHook();\n\n return dropzoneManager;\n};\n"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,mBAAmB;AAGxD,MAAMC,sBAAsB,GAAGD,oBAAoB,CAC/C,iBACJ,CAAC;AAED,OAAO,MAAME,uBAAuB,GAAGD,sBAAsB,CAACE,QAAQ;AAEtE,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACpC,MAAM;IAAEC;EAAgB,CAAC,GAAGJ,sBAAsB,CAACK,OAAO,CAAC,CAAC;EAE5D,OAAOD,eAAe;AAC1B,CAAC","ignoreList":[]}

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

@@ -1,25 +1,33 @@
 import React, { useMemo, useRef } from "react";
-import { ElementOverlays } from "./Overlays/ElementOverlays";
-import { ConnectEditorToPreview } from "../../../../DocumentEditor/ConnectEditorToPreview";
-import { useResponsiveContainer } from "./useResponsiveContainer";
 import { OverlayLoader } from "@webiny/admin-ui";
 import { observer } from "mobx-react-lite";
+import { ElementOverlays } from "./Overlays/ElementOverlays.js";
+import { ConnectEditorToPreview } from "../../../../DocumentEditor/ConnectEditorToPreview.js";
+import { useResponsiveContainer } from "./useResponsiveContainer.js";
+import { usePreviewData } from "../../../hooks/usePreviewData.js";
 export const Iframe = observer(({
   url,
   timestamp,
   ...props
 }) => {
   const iframeRef = useRef(null);
-  const previewWidth = useResponsiveContainer(props.viewportManager);
+  const previewSize = useResponsiveContainer(props.viewportManager);
+  const {
+    viewport
+  } = usePreviewData();
   const iframeUrl = useMemo(() => {
     const localUrl = new URL(url);
     localUrl.searchParams.set("wb.ts", timestamp.toString());
     return localUrl.toString();
   }, [url, timestamp]);
   return /*#__PURE__*/React.createElement("div", {
-    key: iframeUrl,
-    className: "wby-relative wby-flex wby-flex-col wby-items-center",
-    "data-role": "responsive-container"
+    id: "preview-container",
+    key: iframeUrl
+    /* Height = viewport height - top bar - address bar - breadcrumbs. */,
+    style: {
+      height: "calc(100vh - 43px - 50px - 31px)"
+    },
+    className: "relative flex flex-col items-center w-full overflow-auto"
   }, /*#__PURE__*/React.createElement(ConnectEditorToPreview, {
     iframeRef: iframeRef,
     onConnected: props.onConnected
@@ -27,15 +35,18 @@ export const Iframe = observer(({
     size: "lg",
     variant: "accent",
     text: "Loading preview...",
-    className: "wby-bg-neutral-base"
+    className: "bg-neutral-base"
   }) : null, /*#__PURE__*/React.createElement("div", {
-    className: "wby-min-h-[calc(100vh-43px-50px-31px)] wby-max-h-[calc(100vh-43px-50px)] wby-box-border  wby-overflow-hidden",
+    id: "preview-body",
     style: {
-      width: previewWidth
+      position: "relative",
+      width: previewSize,
+      minHeight: `${viewport.scrollHeight}px`
     }
   }, /*#__PURE__*/React.createElement(ElementOverlays, null), /*#__PURE__*/React.createElement("iframe", {
+    scrolling: "no",
     id: "preview-iframe",
-    className: "wby-w-full wby-bg-white wby-border-none wby-overflow-scroll wby-min-h-[inherit] wby-pointer-events-none",
+    className: "absolute block top-0 left-0 w-full w-h-full bg-white border-none min-h-[inherit] pointer-events-none",
     src: iframeUrl,
     ref: iframeRef,
     sandbox: "allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"

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

	@@ -1 +1 @@
1	- {"version":3,"names":["React","useMemo","useRef","ElementOverlays","ConnectEditorToPreview","useResponsiveContainer","~~OverlayLoader~~","~~observer","~~Iframe","url","timestamp","props","iframeRef","~~previewWidth~~","viewportManager","iframeUrl","localUrl","URL","searchParams","set","toString","createElement","key","className","onConnected","showLoading","size","variant","text","~~style~~","width","id","src","ref","sandbox","displayName"],"sources":["Iframe.tsx"],"sourcesContent":["import React, { useMemo, useRef } from \"react\";\nimport { ~~ElementOverlays~~ } from \"~~./Overlays~~/~~ElementOverlays~~\";\nimport { ~~ConnectEditorToPreview~~ } from \"~~~/DocumentEditor~~/~~ConnectEditorToPreview~~\";\nimport type { ~~Messenger~~ } from \"@webiny/website-builder-sdk\";\nimport { ~~useResponsiveContainer~~ } from \"~~~/BaseEditor~~/~~defaultConfig/Content/Preview/useResponsiveContainer~~\";\nimport { ~~OverlayLoader~~ } from \"~~@webiny~~/~~admin-ui~~\";\nimport ~~type~~ { ~~ViewportManager~~ } from \"~~@webiny~~/~~website-builder-sdk~~\";\nimport { ~~observer~~ } from \"~~mobx-react-lite~~\";\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 ~~previewWidth~~ = useResponsiveContainer(props.viewportManager);\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 <div\n key={iframeUrl}\n ~~className~~={\"~~wby~~-~~relative~~ ~~wby~~-~~flex~~ ~~wby~~-~~flex-col~~ ~~wby-items-center~~\"}\n ~~data-role~~={\"~~responsive~~-~~container~~\"}\n >\n <ConnectEditorToPreview iframeRef={iframeRef} onConnected={props.onConnected} />\n {props.showLoading ? (\n <OverlayLoader\n size=\"lg\"\n variant=\"accent\"\n text=\"Loading preview...\"\n className={\"~~wby-~~bg-neutral-base\"}\n />\n ) : null}\n {/* ~~Height~~ = ~~viewport height~~ - ~~top~~ ~~bar~~ - ~~address~~ ~~bar - breadcrumbs.~~ */}\n <div\n ~~className=\~~"~~wby~~-~~min-h-[calc(100vh-43px-50px-31px)] wby-max-h-[calc(100vh-43px-50px)] wby-box-border wby-overflow-hidden~~\"\n style={{ width: ~~previewWidth~~ }}\n >\n <ElementOverlays />\n <iframe\n id={\"preview-iframe\"}\n className={\n \"~~wby~~-w-full ~~wby~~-bg-white ~~wby-~~border-none ~~wby-overflow-scroll wby-~~min-h-[inherit] ~~wby-~~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 </div>\n );\n});\n\nIframe.displayName = \"Iframe\";\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,MAAM,QAAQ,OAAO;~~AAC9C~~,SAASC,eAAe;AACxB,SAASC,sBAAsB;~~AAE~~/B,SAASC,sBAAsB;AAC/B,SAASC,~~aAAa,QAAQ,kBAAkB~~;~~AAEhD~~,~~SAASC,QAAQ,QAAQ,iBAAiB;AAU1C,~~OAAO,MAAMC,MAAM,~~GAAGD~~,QAAQ,CAAC,CAAC;~~EAAEE~~,GAAG;EAAEC,SAAS;EAAE,GAAGC;AAAmB,CAAC,KAAK;EAC1E,MAAMC,SAAS,~~GAAGV~~,MAAM,CAAoB,IAAI,CAAC;EACjD,~~MAAMW~~,~~YAAY~~,~~GAAGR~~,sBAAsB,~~CAACM~~,KAAK,CAACG,eAAe,CAAC;~~EAElE~~,~~MAAMC~~,SAAS,~~GAAGd~~,OAAO,CAAC,MAAM;IAC5B,~~MAAMe~~,QAAQ,GAAG,IAAIC,GAAG,~~CAACR~~,GAAG,CAAC;~~IAC7BO~~,QAAQ,CAACE,YAAY,CAACC,GAAG,CAAC,OAAO,~~EAAET~~,SAAS,~~CAACU~~,QAAQ,CAAC,CAAC,CAAC;IACxD,OAAOJ,QAAQ,CAACI,QAAQ,CAAC,CAAC;EAC9B,CAAC,EAAE,~~CAACX~~,GAAG,EAAEC,SAAS,CAAC,CAAC;EAEpB,~~oBACIV~~,KAAA,~~CAAAqB~~,aAAA;IACIC,GAAG,~~EAAEP~~,~~SAAU~~;~~IACfQ~~,~~SAAS~~,EAAE,~~qDAAsD~~;~~IACjE~~,~~aAAW~~;~~EAAuB~~,~~gBAElCvB~~,KAAA,~~CAAAqB~~,aAAA,CAACjB,sBAAsB;~~IAACQ~~,SAAS,EAAEA,SAAU;~~IAACY~~,WAAW,~~EAAEb~~,KAAK,~~CAACa~~;EAAY,CAAE,CAAC,EAC/Eb,KAAK,~~CAACc~~,WAAW,~~gBACdzB~~,KAAA,~~CAAAqB~~,aAAA,~~CAACf~~,aAAa;~~IACVoB~~,IAAI,EAAC,IAAI;IACTC,OAAO,EAAC,QAAQ;IAChBC,IAAI,EAAC,oBAAoB;IACzBL,SAAS,EAAE;~~EAAsB~~,~~CACpC~~,CAAC,GACF,IAAI,~~eAERvB~~,KAAA,~~CAAAqB~~,aAAA;~~IACIE~~,~~SAAS~~,~~EAAC~~,~~8GAA8G~~;~~IACxHM~~,KAAK,EAAE;~~MAAEC~~,KAAK,~~EAAEjB~~;~~IAAa~~;EAAE,~~gBAE/Bb~~,KAAA,~~CAAAqB~~,aAAA,CAAClB,eAAe,MAAE,CAAC,~~eACnBH~~,KAAA,~~CAAAqB~~,aAAA;~~IACIU~~,EAAE,EAAE,gBAAiB;~~IACrBR~~,SAAS,EACL,~~yGACH~~;~~IACDS~~,GAAG,~~EAAEjB~~,SAAU;~~IACfkB~~,GAAG,~~EAAErB~~,SAAU;~~IACfsB~~,OAAO,EAAC;EAA0F,CACrG,CACA,CACJ,CAAC;AAEd,CAAC,CAAC;~~AAEF1B~~,MAAM,~~CAAC2B~~,WAAW,GAAG,QAAQ","ignoreList":[]}
1	+ {"version":3,"names":["React","useMemo","useRef","OverlayLoader","observer","ElementOverlays","ConnectEditorToPreview","useResponsiveContainer","usePreviewData","Iframe","url","timestamp","props","iframeRef","previewSize","viewportManager","viewport","iframeUrl","localUrl","URL","searchParams","set","toString","createElement","id","key","style","height","className","onConnected","showLoading","size","variant","text","position","width","minHeight","scrollHeight","scrolling","src","ref","sandbox","displayName"],"sources":["Iframe.tsx"],"sourcesContent":["import React, { useMemo, useRef } from \"react\";\nimport type { Messenger } from \"@webiny/website-builder-sdk\";\nimport { 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\";\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 previewSize = useResponsiveContainer(props.viewportManager);\n const { viewport } = usePreviewData();\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 <div\n id={\"preview-container\"}\n key={iframeUrl}\n /* Height = viewport height - top bar - address bar - breadcrumbs. /\n style={{\n height: \"calc(100vh - 43px - 50px - 31px)\"\n }}\n className={\"relative flex flex-col items-center w-full overflow-auto\"}\n >\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 style={{\n position: \"relative\",\n width: previewSize,\n minHeight: `${viewport.scrollHeight}px`\n }}\n >\n <ElementOverlays />\n <iframe\n scrolling=\"no\"\n id={\"preview-iframe\"}\n className={\n \"absolute block top-0 left-0 w-full w-h-full bg-white border-none min-h-[inherit] 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 </div>\n );\n});\n\nIframe.displayName = \"Iframe\";\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAE9C,SAASC,aAAa,QAAQ,kBAAkB;AAEhD,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,eAAe;AACxB,SAASC,sBAAsB;AAC/B,SAASC,sBAAsB;AAC/B,SAASC,cAAc;AAUvB,OAAO,MAAMC,MAAM,GAAGL,QAAQ,CAAC,CAAC;EAAEM,GAAG;EAAEC,SAAS;EAAE,GAAGC;AAAmB,CAAC,KAAK;EAC1E,MAAMC,SAAS,GAAGX,MAAM,CAAoB,IAAI,CAAC;EACjD,MAAMY,WAAW,GAAGP,sBAAsB,CAACK,KAAK,CAACG,eAAe,CAAC;EACjE,MAAM;IAAEC;EAAS,CAAC,GAAGR,cAAc,CAAC,CAAC;EAErC,MAAMS,SAAS,GAAGhB,OAAO,CAAC,MAAM;IAC5B,MAAMiB,QAAQ,GAAG,IAAIC,GAAG,CAACT,GAAG,CAAC;IAC7BQ,QAAQ,CAACE,YAAY,CAACC,GAAG,CAAC,OAAO,EAAEV,SAAS,CAACW,QAAQ,CAAC,CAAC,CAAC;IACxD,OAAOJ,QAAQ,CAACI,QAAQ,CAAC,CAAC;EAC9B,CAAC,EAAE,CAACZ,GAAG,EAAEC,SAAS,CAAC,CAAC;EAEpB,oBACIX,KAAA,CAAAuB,aAAA;IACIC,EAAE,EAAE,mBAAoB;IACxBC,GAAG,EAAER;IACL;IACAS,KAAK,EAAE;MACHC,MAAM,EAAE;IACZ,CAAE;IACFC,SAAS,EAAE;EAA2D,gBAEtE5B,KAAA,CAAAuB,aAAA,CAACjB,sBAAsB;IAACO,SAAS,EAAEA,SAAU;IAACgB,WAAW,EAAEjB,KAAK,CAACiB;EAAY,CAAE,CAAC,EAC/EjB,KAAK,CAACkB,WAAW,gBACd9B,KAAA,CAAAuB,aAAA,CAACpB,aAAa;IACV4B,IAAI,EAAC,IAAI;IACTC,OAAO,EAAC,QAAQ;IAChBC,IAAI,EAAC,oBAAoB;IACzBL,SAAS,EAAE;EAAkB,CAChC,CAAC,GACF,IAAI,eAER5B,KAAA,CAAAuB,aAAA;IACIC,EAAE,EAAE,cAAe;IACnBE,KAAK,EAAE;MACHQ,QAAQ,EAAE,UAAU;MACpBC,KAAK,EAAErB,WAAW;MAClBsB,SAAS,EAAE,GAAGpB,QAAQ,CAACqB,YAAY;IACvC;EAAE,gBAEFrC,KAAA,CAAAuB,aAAA,CAAClB,eAAe,MAAE,CAAC,eACnBL,KAAA,CAAAuB,aAAA;IACIe,SAAS,EAAC,IAAI;IACdd,EAAE,EAAE,gBAAiB;IACrBI,SAAS,EACL,sGACH;IACDW,GAAG,EAAEtB,SAAU;IACfuB,GAAG,EAAE3B,SAAU;IACf4B,OAAO,EAAC;EAA0F,CACrG,CACA,CACJ,CAAC;AAEd,CAAC,CAAC;AAEFhC,MAAM,CAACiC,WAAW,GAAG,QAAQ","ignoreList":[]}

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

@@ -1,8 +1,8 @@
 import { useCallback, useEffect } from "react";
-import { useDocumentEditor } from "../../../../DocumentEditor";
-import { useKeyHandler } from "../../../hooks/useKeyHandler";
-import { $getActiveElementId, $getComponentManifestByElementId } from "../../../../editorSdk/utils";
-import { Commands } from "../../..";
+import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
+import { useKeyHandler } from "../../../hooks/useKeyHandler.js";
+import { $getActiveElementId, $getComponentManifestByElementId } from "../../../../editorSdk/utils/index.js";
+import { Commands } from "../../../index.js";
 export const KeyboardShortcuts = () => {
   const editor = useDocumentEditor();
   const {

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

	@@ -1 +1 @@
1	- {"version":3,"names":["useCallback","useEffect","useDocumentEditor","useKeyHandler","$getActiveElementId","$getComponentManifestByElementId","Commands","KeyboardShortcuts","editor","addKeyHandler","removeKeyHandler","deleteActiveElement","activeElementId","manifest","canDelete","executeCommand","DeselectElement","DeleteElement","id","deactivateElement","e","preventDefault","undo","redo"],"sources":["KeyboardShortcuts.tsx"],"sourcesContent":["import { useCallback, useEffect } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { useKeyHandler } from \"~/BaseEditor/hooks/useKeyHandler\";\nimport { $getActiveElementId, $getComponentManifestByElementId } from \"~/editorSdk/utils\";\nimport { Commands } from \"~/BaseEditor\";\n\nexport const KeyboardShortcuts = () => {\n const editor = useDocumentEditor();\n const { addKeyHandler, removeKeyHandler } = useKeyHandler();\n\n const deleteActiveElement = useCallback(() => {\n const activeElementId = $getActiveElementId(editor);\n if (activeElementId) {\n const manifest = $getComponentManifestByElementId(editor, activeElementId);\n if (!manifest) {\n return;\n }\n\n if (manifest.canDelete !== false) {\n editor.executeCommand(Commands.DeselectElement);\n editor.executeCommand(Commands.DeleteElement, { id: activeElementId });\n }\n }\n }, []);\n\n const deactivateElement = useCallback(() => {\n editor.executeCommand(Commands.DeselectElement);\n }, []);\n\n useEffect(() => {\n addKeyHandler(\"Escape\", e => {\n e.preventDefault();\n deactivateElement();\n });\n\n addKeyHandler(\"Backspace\", e => {\n e.preventDefault();\n deleteActiveElement();\n });\n\n addKeyHandler(\"Delete\", e => {\n e.preventDefault();\n deleteActiveElement();\n });\n\n addKeyHandler(\"mod+z\", e => {\n e.preventDefault();\n editor.undo();\n });\n\n addKeyHandler(\"mod+shift+z\", e => {\n e.preventDefault();\n editor.redo();\n });\n\n return () => {\n removeKeyHandler(\"Escape\");\n removeKeyHandler(\"Backspace\");\n removeKeyHandler(\"Delete\");\n removeKeyHandler(\"mod+z\");\n removeKeyHandler(\"mod+shift+z\");\n };\n }, []);\n\n return null;\n};\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,QAAQ,OAAO;AAC9C,SAASC,iBAAiB;AAC1B,SAASC,aAAa;AACtB,SAASC,mBAAmB,EAAEC,gCAAgC;AAC9D,SAASC,QAAQ;AAEjB,OAAO,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EACnC,MAAMC,MAAM,GAAGN,iBAAiB,CAAC,CAAC;EAClC,MAAM;IAAEO,aAAa;IAAEC;EAAiB,CAAC,GAAGP,aAAa,CAAC,CAAC;EAE3D,MAAMQ,mBAAmB,GAAGX,WAAW,CAAC,MAAM;IAC1C,MAAMY,eAAe,GAAGR,mBAAmB,CAACI,MAAM,CAAC;IACnD,IAAII,eAAe,EAAE;MACjB,MAAMC,QAAQ,GAAGR,gCAAgC,CAACG,MAAM,EAAEI,eAAe,CAAC;MAC1E,IAAI,CAACC,QAAQ,EAAE;QACX;MACJ;MAEA,IAAIA,QAAQ,CAACC,SAAS,KAAK,KAAK,EAAE;QAC9BN,MAAM,CAACO,cAAc,CAACT,QAAQ,CAACU,eAAe,CAAC;QAC/CR,MAAM,CAACO,cAAc,CAACT,QAAQ,CAACW,aAAa,EAAE;UAAEC,EAAE,EAAEN;QAAgB,CAAC,CAAC;MAC1E;IACJ;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMO,iBAAiB,GAAGnB,WAAW,CAAC,MAAM;IACxCQ,MAAM,CAACO,cAAc,CAACT,QAAQ,CAACU,eAAe,CAAC;EACnD,CAAC,EAAE,EAAE,CAAC;EAENf,SAAS,CAAC,MAAM;IACZQ,aAAa,CAAC,QAAQ,EAAEW,CAAC,IAAI;MACzBA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBF,iBAAiB,CAAC,CAAC;IACvB,CAAC,CAAC;IAEFV,aAAa,CAAC,WAAW,EAAEW,CAAC,IAAI;MAC5BA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBV,mBAAmB,CAAC,CAAC;IACzB,CAAC,CAAC;IAEFF,aAAa,CAAC,QAAQ,EAAEW,CAAC,IAAI;MACzBA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBV,mBAAmB,CAAC,CAAC;IACzB,CAAC,CAAC;IAEFF,aAAa,CAAC,OAAO,EAAEW,CAAC,IAAI;MACxBA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBb,MAAM,CAACc,IAAI,CAAC,CAAC;IACjB,CAAC,CAAC;IAEFb,aAAa,CAAC,aAAa,EAAEW,CAAC,IAAI;MAC9BA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBb,MAAM,CAACe,IAAI,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,MAAM;MACTb,gBAAgB,CAAC,QAAQ,CAAC;MAC1BA,gBAAgB,CAAC,WAAW,CAAC;MAC7BA,gBAAgB,CAAC,QAAQ,CAAC;MAC1BA,gBAAgB,CAAC,OAAO,CAAC;MACzBA,gBAAgB,CAAC,aAAa,CAAC;IACnC,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAI;AACf,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["useCallback","useEffect","useDocumentEditor","useKeyHandler","$getActiveElementId","$getComponentManifestByElementId","Commands","KeyboardShortcuts","editor","addKeyHandler","removeKeyHandler","deleteActiveElement","activeElementId","manifest","canDelete","executeCommand","DeselectElement","DeleteElement","id","deactivateElement","e","preventDefault","undo","redo"],"sources":["KeyboardShortcuts.tsx"],"sourcesContent":["import { useCallback, useEffect } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { useKeyHandler } from \"~/BaseEditor/hooks/useKeyHandler.js\";\nimport { $getActiveElementId, $getComponentManifestByElementId } from \"~/editorSdk/utils/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\n\nexport const KeyboardShortcuts = () => {\n const editor = useDocumentEditor();\n const { addKeyHandler, removeKeyHandler } = useKeyHandler();\n\n const deleteActiveElement = useCallback(() => {\n const activeElementId = $getActiveElementId(editor);\n if (activeElementId) {\n const manifest = $getComponentManifestByElementId(editor, activeElementId);\n if (!manifest) {\n return;\n }\n\n if (manifest.canDelete !== false) {\n editor.executeCommand(Commands.DeselectElement);\n editor.executeCommand(Commands.DeleteElement, { id: activeElementId });\n }\n }\n }, []);\n\n const deactivateElement = useCallback(() => {\n editor.executeCommand(Commands.DeselectElement);\n }, []);\n\n useEffect(() => {\n addKeyHandler(\"Escape\", e => {\n e.preventDefault();\n deactivateElement();\n });\n\n addKeyHandler(\"Backspace\", e => {\n e.preventDefault();\n deleteActiveElement();\n });\n\n addKeyHandler(\"Delete\", e => {\n e.preventDefault();\n deleteActiveElement();\n });\n\n addKeyHandler(\"mod+z\", e => {\n e.preventDefault();\n editor.undo();\n });\n\n addKeyHandler(\"mod+shift+z\", e => {\n e.preventDefault();\n editor.redo();\n });\n\n return () => {\n removeKeyHandler(\"Escape\");\n removeKeyHandler(\"Backspace\");\n removeKeyHandler(\"Delete\");\n removeKeyHandler(\"mod+z\");\n removeKeyHandler(\"mod+shift+z\");\n };\n }, []);\n\n return null;\n};\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,QAAQ,OAAO;AAC9C,SAASC,iBAAiB;AAC1B,SAASC,aAAa;AACtB,SAASC,mBAAmB,EAAEC,gCAAgC;AAC9D,SAASC,QAAQ;AAEjB,OAAO,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EACnC,MAAMC,MAAM,GAAGN,iBAAiB,CAAC,CAAC;EAClC,MAAM;IAAEO,aAAa;IAAEC;EAAiB,CAAC,GAAGP,aAAa,CAAC,CAAC;EAE3D,MAAMQ,mBAAmB,GAAGX,WAAW,CAAC,MAAM;IAC1C,MAAMY,eAAe,GAAGR,mBAAmB,CAACI,MAAM,CAAC;IACnD,IAAII,eAAe,EAAE;MACjB,MAAMC,QAAQ,GAAGR,gCAAgC,CAACG,MAAM,EAAEI,eAAe,CAAC;MAC1E,IAAI,CAACC,QAAQ,EAAE;QACX;MACJ;MAEA,IAAIA,QAAQ,CAACC,SAAS,KAAK,KAAK,EAAE;QAC9BN,MAAM,CAACO,cAAc,CAACT,QAAQ,CAACU,eAAe,CAAC;QAC/CR,MAAM,CAACO,cAAc,CAACT,QAAQ,CAACW,aAAa,EAAE;UAAEC,EAAE,EAAEN;QAAgB,CAAC,CAAC;MAC1E;IACJ;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMO,iBAAiB,GAAGnB,WAAW,CAAC,MAAM;IACxCQ,MAAM,CAACO,cAAc,CAACT,QAAQ,CAACU,eAAe,CAAC;EACnD,CAAC,EAAE,EAAE,CAAC;EAENf,SAAS,CAAC,MAAM;IACZQ,aAAa,CAAC,QAAQ,EAAEW,CAAC,IAAI;MACzBA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBF,iBAAiB,CAAC,CAAC;IACvB,CAAC,CAAC;IAEFV,aAAa,CAAC,WAAW,EAAEW,CAAC,IAAI;MAC5BA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBV,mBAAmB,CAAC,CAAC;IACzB,CAAC,CAAC;IAEFF,aAAa,CAAC,QAAQ,EAAEW,CAAC,IAAI;MACzBA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBV,mBAAmB,CAAC,CAAC;IACzB,CAAC,CAAC;IAEFF,aAAa,CAAC,OAAO,EAAEW,CAAC,IAAI;MACxBA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBb,MAAM,CAACc,IAAI,CAAC,CAAC;IACjB,CAAC,CAAC;IAEFb,aAAa,CAAC,aAAa,EAAEW,CAAC,IAAI;MAC9BA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBb,MAAM,CAACe,IAAI,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,MAAM;MACTb,gBAAgB,CAAC,QAAQ,CAAC;MAC1BA,gBAAgB,CAAC,WAAW,CAAC;MAC7BA,gBAAgB,CAAC,QAAQ,CAAC;MAC1BA,gBAAgB,CAAC,OAAO,CAAC;MACzBA,gBAAgB,CAAC,aAAa,CAAC;IACnC,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAI;AACf,CAAC","ignoreList":[]}

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

@@ -9,7 +9,7 @@ export const MouseStatus = () => {
     return mouseTracker.subscribe(setPosition);
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-absolute wby-bottom-0 wby-left-0 wby-p-md"
+    className: "absolute bottom-0 left-0 p-md"
   }, position.x, ":", position.y);
 };

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

	@@ -1 +1 @@
1	- {"version":3,"names":["React","useEffect","useState","mouseTracker","MouseStatus","position","setPosition","x","y","subscribe","createElement","className"],"sources":["MouseStatus.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { mouseTracker } from \"@webiny/website-builder-sdk\";\n\nexport const MouseStatus = () => {\n const [position, setPosition] = useState({ x: 0, y: 0 });\n\n useEffect(() => {\n return mouseTracker.subscribe(setPosition);\n }, []);\n\n return (\n <div className={\"~~wby-~~absolute ~~wby-~~bottom-0 ~~wby-~~left-0 ~~wby-~~p-md\"}>\n {position.x}:{position.y}\n </div>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,YAAY,QAAQ,6BAA6B;AAE1D,OAAO,MAAMC,WAAW,GAAGA,CAAA,KAAM;EAC7B,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGJ,QAAQ,CAAC;IAAEK,CAAC,EAAE,CAAC;IAAEC,CAAC,EAAE;EAAE,CAAC,CAAC;EAExDP,SAAS,CAAC,MAAM;IACZ,OAAOE,YAAY,CAACM,SAAS,CAACH,WAAW,CAAC;EAC9C,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIN,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAE;~~EAAgD~~,~~GAC3DN~~,QAAQ,CAACE,CAAC,EAAC,GAAC,EAACF,QAAQ,CAACG,CACtB,CAAC;AAEd,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["React","useEffect","useState","mouseTracker","MouseStatus","position","setPosition","x","y","subscribe","createElement","className"],"sources":["MouseStatus.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { mouseTracker } from \"@webiny/website-builder-sdk\";\n\nexport const MouseStatus = () => {\n const [position, setPosition] = useState({ x: 0, y: 0 });\n\n useEffect(() => {\n return mouseTracker.subscribe(setPosition);\n }, []);\n\n return (\n <div className={\"absolute bottom-0 left-0 p-md\"}>\n {position.x}:{position.y}\n </div>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,YAAY,QAAQ,6BAA6B;AAE1D,OAAO,MAAMC,WAAW,GAAGA,CAAA,KAAM;EAC7B,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGJ,QAAQ,CAAC;IAAEK,CAAC,EAAE,CAAC;IAAEC,CAAC,EAAE;EAAE,CAAC,CAAC;EAExDP,SAAS,CAAC,MAAM;IACZ,OAAOE,YAAY,CAACM,SAAS,CAACH,WAAW,CAAC;EAC9C,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIN,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAE;EAAgC,GAC3CN,QAAQ,CAACE,CAAC,EAAC,GAAC,EAACF,QAAQ,CAACG,CACtB,CAAC;AAEd,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/Overlays/DropBox.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from "react";
-import type { Box } from "../Box";
-import type { DropEvent } from "../useProximityDropzone";
+import type { Box } from "../../../../../BaseEditor/defaultConfig/Content/Preview/Box.js";
+import type { DropEvent } from "../../../../../BaseEditor/defaultConfig/Content/Preview/useProximityDropzone.js";
 interface DropBoxProps {
     box: Box;
     onDrop: (event: DropEvent) => void;

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

@@ -1,20 +1,25 @@
 import React from "react";
 import { useDrop } from "react-dnd";
+import deepEqual from "deep-equal";
 import { cn, Icon } from "@webiny/admin-ui";
 import { ReactComponent as InsertIcon } from "@webiny/icons/add_circle.svg";
 import { ReactComponent as BlockIcon } from "@webiny/icons/block.svg";
-import { useIsDragging } from "../useIsDragging";
-import deepEqual from "deep-equal";
+import { useIsDragging } from "../useIsDragging.js";
 export const DropBox = /*#__PURE__*/React.memo(({
   box,
   onDrop
 }) => {
   const isDragging = useIsDragging();
   const [{
-    isOver
+    isOver,
+    item
   }, dropRef] = useDrop(() => ({
     accept: "ELEMENT",
     drop: item => {
+      // Prevent dropping the element into itself!
+      if (item?.id === box.parentId) {
+        return;
+      }
       onDrop({
         item,
         target: {
@@ -29,11 +34,11 @@ export const DropBox = /*#__PURE__*/React.memo(({
       isOver: monitor.isOver()
     })
   }));
-  const canAccept = isDragging;
-  const disabled = "wby-border-neutral-muted wby-fill-neutral-disabled";
-  const enabled = "wby-border-success-default wby-fill-success";
-  const mouseOver = "wby-border-accent-default wby-fill-accent-default";
-  const classes = cn("wby-flex wby-absolute wby-items-center wby-justify-center wby-border-sm wby-border-dashed", canAccept && isOver && mouseOver, canAccept && !isOver && enabled, !canAccept && disabled);
+  const canAccept = isDragging && item?.id !== box.parentId;
+  const disabled = "border-neutral-muted fill-neutral-disabled";
+  const enabled = "border-success-default fill-success";
+  const mouseOver = "border-accent-default fill-accent-default";
+  const classes = cn("flex absolute items-center justify-center border-sm border-dashed", canAccept && isOver && mouseOver, canAccept && !isOver && enabled, !canAccept && disabled);
   return dropRef(/*#__PURE__*/React.createElement("div", {
     "data-role": "element-slot",
     "data-slot-id": box.id,
@@ -44,7 +49,8 @@ export const DropBox = /*#__PURE__*/React.memo(({
       top: box.top,
       left: box.left,
       width: box.width,
-      height: box.height
+      height: box.height,
+      pointerEvents: canAccept ? "auto" : "none"
     }
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: isDragging && !canAccept ? /*#__PURE__*/React.createElement(BlockIcon, null) : /*#__PURE__*/React.createElement(InsertIcon, null),

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

	@@ -1 +1 @@
1	- {"version":3,"names":["React","useDrop","cn","Icon","ReactComponent","InsertIcon","BlockIcon","useIsDragging","~~deepEqual","~~DropBox","memo","box","onDrop","isDragging","isOver","dropRef","accept","drop","~~item~~","~~target~~","~~parentId~~","index","slot","parentSlot","collect","monitor","getItem","canAccept","disabled","enabled","mouseOver","classes","createElement","~~id","~~depth","className","style","zIndex","top","left","width","height","icon","label","prev","next","displayName"],"sources":["DropBox.tsx"],"sourcesContent":["import React from \"react\";\nimport { useDrop } from \"react-dnd\";\nimport { cn, Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as InsertIcon } from \"@webiny/icons/add_circle.svg\";\nimport { ReactComponent as BlockIcon } from \"@webiny/icons/block.svg\";\nimport type { Box } from \"~/BaseEditor/defaultConfig/Content/Preview/Box\";\nimport type { DropEvent } from \"~/BaseEditor/defaultConfig/Content/Preview/useProximityDropzone\";\nimport { useIsDragging } from \"~/BaseEditor/defaultConfig/Content/Preview/useIsDragging\";\~~nimport deepEqual from \"deep-equal\";\~~n\ninterface DropBoxProps {\n box: Box;\n onDrop: (event: DropEvent) => void;\n}\n\nexport const DropBox = React.memo(\n ({ box, onDrop }: DropBoxProps) => {\n const isDragging = useIsDragging();\n\n const [{ isOver }, dropRef] = useDrop<\n any,\n unknown,\n { item: { name: string }; isOver: boolean }\n >(() => ({\n accept: \"ELEMENT\",\n drop: item => {\n onDrop({\n item,\n target: { parentId: box.parentId, index: 0, slot: box.parentSlot }\n });\n },\n collect: monitor => ({\n item: monitor.getItem(),\n isOver: monitor.isOver()\n })\n }));\n\n const canAccept = isDragging;\n const disabled = \"~~wby-~~border-neutral-muted ~~wby-~~fill-neutral-disabled\";\n const enabled = \"~~wby-~~border-success-default ~~wby-~~fill-success\";\n const mouseOver = \"~~wby-~~border-accent-default ~~wby-~~fill-accent-default\";\n\n const classes = cn(\n \"~~wby-~~flex ~~wby-~~absolute ~~wby-~~items-center ~~wby-~~justify-center ~~wby-~~border-sm ~~wby-~~border-dashed\",\n canAccept && isOver && mouseOver,\n canAccept && !isOver && enabled,\n !canAccept && disabled\n );\n\n return dropRef(\n <div\n data-role={\"element-slot\"}\n data-slot-id={box.id}\n data-depth={box.depth}\n className={classes}\n style={{\n zIndex: 100 + box.depth,\n top: box.top,\n left: box.left,\n width: box.width,\n height: box.height\n }}\n >\n <Icon\n icon={isDragging && !canAccept ? <BlockIcon /> : <InsertIcon />}\n label={\"Add Element\"}\n />\n </div>\n );\n },\n (prev, next) => deepEqual(prev, next)\n);\n\nDropBox.displayName = \"DropBox\";\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO,QAAQ,WAAW;AACnC,SAASC,EAAE,EAAEC,IAAI,QAAQ,kBAAkB;AAC3C,SAASC,cAAc,IAAIC,UAAU,QAAQ,8BAA8B;AAC3E,SAASD,cAAc,IAAIE,SAAS,QAAQ,yBAAyB;AAGrE,SAASC,aAAa;~~AACtB~~,~~OAAOC,SAAS,MAAM,YAAY;AAOlC,~~OAAO,MAAMC,OAAO,gBAAGT,KAAK,CAACU,IAAI,CAC7B,CAAC;EAAEC,GAAG;EAAEC;AAAqB,CAAC,KAAK;EAC/B,MAAMC,UAAU,~~GAAGN~~,aAAa,CAAC,CAAC;EAElC,MAAM,CAAC;~~IAAEO~~;~~EAAO~~,CAAC,EAAEC,OAAO,CAAC,~~GAAGd~~,OAAO,~~CAInC~~,OAAO;~~IACLe~~,MAAM,EAAE,SAAS;IACjBC,IAAI,~~EAAEC~~,IAAI,IAAI;~~MACVN~~,MAAM,CAAC;~~QACHM~~,IAAI;~~QACJC~~,MAAM,EAAE;~~UAAEC~~,QAAQ,EAAET,GAAG,CAACS,QAAQ;~~UAAEC~~,KAAK,EAAE,CAAC;UAAEC,IAAI,~~EAAEX~~,GAAG,~~CAACY~~;QAAW;MACrE,CAAC,CAAC;IACN,CAAC;IACDC,OAAO,EAAEC,OAAO,KAAK;~~MACjBP~~,IAAI,~~EAAEO~~,OAAO,CAACC,OAAO,CAAC,CAAC;~~MACvBZ~~,MAAM,~~EAAEW~~,OAAO,~~CAACX~~,MAAM,CAAC;IAC3B,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,~~MAAMa~~,SAAS,~~GAAGd~~,UAAU;~~EAC5B~~,~~MAAMe~~,QAAQ,GAAG,~~oDAAoD~~;~~EACrE~~,MAAMC,OAAO,GAAG,~~6CAA6C~~;~~EAC7D~~,MAAMC,SAAS,GAAG,~~mDAAmD~~;~~EAErE~~,MAAMC,OAAO,GAAG7B,EAAE,CACd,~~2FAA2F~~,~~EAC3FyB~~,SAAS,~~IAAIb~~,MAAM,~~IAAIgB~~,SAAS,EAChCH,SAAS,IAAI,~~CAACb~~,MAAM,~~IAAIe~~,OAAO,EAC/B,CAACF,SAAS,IAAIC,QAClB,CAAC;EAED,OAAOb,OAAO,~~cACVf~~,KAAA,~~CAAAgC~~,aAAA;IACI,aAAW,cAAe;IAC1B,~~gBAAcrB~~,GAAG,~~CAACsB~~,EAAG;IACrB,~~cAAYtB~~,GAAG,CAACuB,KAAM;IACtBC,SAAS,~~EAAEJ~~,OAAQ;~~IACnBK~~,KAAK,EAAE;MACHC,MAAM,EAAE,GAAG,GAAG1B,GAAG,CAACuB,KAAK;MACvBI,GAAG,EAAE3B,GAAG,CAAC2B,GAAG;MACZC,IAAI,EAAE5B,GAAG,CAAC4B,IAAI;MACdC,KAAK,EAAE7B,GAAG,CAAC6B,KAAK;MAChBC,MAAM,EAAE9B,GAAG,CAAC8B;~~IAChB~~;EAAE,~~gBAEFzC~~,KAAA,~~CAAAgC~~,aAAA,CAAC7B,IAAI;IACDuC,IAAI,~~EAAE7B~~,UAAU,IAAI,~~CAACc~~,SAAS,~~gBAAG3B~~,KAAA,~~CAAAgC~~,aAAA,CAAC1B,SAAS,MAAE,CAAC,~~gBAAGN~~,KAAA,~~CAAAgC~~,aAAA,CAAC3B,UAAU,MAAE,CAAE;IAChEsC,KAAK,EAAE;EAAc,CACxB,CACA,CACT,CAAC;AACL,CAAC,EACD,CAACC,IAAI,EAAEC,IAAI,~~KAAKrC~~,SAAS,~~CAACoC~~,IAAI,EAAEC,IAAI,CACxC,CAAC;~~AAEDpC~~,OAAO,~~CAACqC~~,WAAW,GAAG,SAAS","ignoreList":[]}
1	+ {"version":3,"names":["React","useDrop","deepEqual","cn","Icon","ReactComponent","InsertIcon","BlockIcon","useIsDragging","DropBox","memo","box","onDrop","isDragging","isOver","item","dropRef","accept","drop","id","parentId","target","index","slot","parentSlot","collect","monitor","getItem","canAccept","disabled","enabled","mouseOver","classes","createElement","depth","className","style","zIndex","top","left","width","height","pointerEvents","icon","label","prev","next","displayName"],"sources":["DropBox.tsx"],"sourcesContent":["import React from \"react\";\nimport { useDrop } from \"react-dnd\";\nimport deepEqual from \"deep-equal\";\nimport { cn, Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as InsertIcon } from \"@webiny/icons/add_circle.svg\";\nimport { ReactComponent as BlockIcon } from \"@webiny/icons/block.svg\";\nimport type { Box } from \"~/BaseEditor/defaultConfig/Content/Preview/Box.js\";\nimport type { DropEvent } from \"~/BaseEditor/defaultConfig/Content/Preview/useProximityDropzone.js\";\nimport { useIsDragging } from \"~/BaseEditor/defaultConfig/Content/Preview/useIsDragging.js\";\n\ninterface DropBoxProps {\n box: Box;\n onDrop: (event: DropEvent) => void;\n}\n\nexport const DropBox = React.memo(\n ({ box, onDrop }: DropBoxProps) => {\n const isDragging = useIsDragging();\n\n const [{ isOver, item }, dropRef] = useDrop<\n any,\n unknown,\n { item: { name: string; id?: string }; isOver: boolean }\n >(() => ({\n accept: \"ELEMENT\",\n drop: item => {\n // Prevent dropping the element into itself!\n if (item?.id === box.parentId) {\n return;\n }\n\n onDrop({\n item,\n target: { parentId: box.parentId, index: 0, slot: box.parentSlot }\n });\n },\n collect: monitor => ({\n item: monitor.getItem(),\n isOver: monitor.isOver()\n })\n }));\n\n const canAccept = isDragging && item?.id !== box.parentId;\n const disabled = \"border-neutral-muted fill-neutral-disabled\";\n const enabled = \"border-success-default fill-success\";\n const mouseOver = \"border-accent-default fill-accent-default\";\n\n const classes = cn(\n \"flex absolute items-center justify-center border-sm border-dashed\",\n canAccept && isOver && mouseOver,\n canAccept && !isOver && enabled,\n !canAccept && disabled\n );\n\n return dropRef(\n <div\n data-role={\"element-slot\"}\n data-slot-id={box.id}\n data-depth={box.depth}\n className={classes}\n style={{\n zIndex: 100 + box.depth,\n top: box.top,\n left: box.left,\n width: box.width,\n height: box.height,\n pointerEvents: canAccept ? \"auto\" : \"none\"\n }}\n >\n <Icon\n icon={isDragging && !canAccept ? <BlockIcon /> : <InsertIcon />}\n label={\"Add Element\"}\n />\n </div>\n );\n },\n (prev, next) => deepEqual(prev, next)\n);\n\nDropBox.displayName = \"DropBox\";\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO,QAAQ,WAAW;AACnC,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,EAAE,EAAEC,IAAI,QAAQ,kBAAkB;AAC3C,SAASC,cAAc,IAAIC,UAAU,QAAQ,8BAA8B;AAC3E,SAASD,cAAc,IAAIE,SAAS,QAAQ,yBAAyB;AAGrE,SAASC,aAAa;AAOtB,OAAO,MAAMC,OAAO,gBAAGT,KAAK,CAACU,IAAI,CAC7B,CAAC;EAAEC,GAAG;EAAEC;AAAqB,CAAC,KAAK;EAC/B,MAAMC,UAAU,GAAGL,aAAa,CAAC,CAAC;EAElC,MAAM,CAAC;IAAEM,MAAM;IAAEC;EAAK,CAAC,EAAEC,OAAO,CAAC,GAAGf,OAAO,CAIzC,OAAO;IACLgB,MAAM,EAAE,SAAS;IACjBC,IAAI,EAAEH,IAAI,IAAI;MACV;MACA,IAAIA,IAAI,EAAEI,EAAE,KAAKR,GAAG,CAACS,QAAQ,EAAE;QAC3B;MACJ;MAEAR,MAAM,CAAC;QACHG,IAAI;QACJM,MAAM,EAAE;UAAED,QAAQ,EAAET,GAAG,CAACS,QAAQ;UAAEE,KAAK,EAAE,CAAC;UAAEC,IAAI,EAAEZ,GAAG,CAACa;QAAW;MACrE,CAAC,CAAC;IACN,CAAC;IACDC,OAAO,EAAEC,OAAO,KAAK;MACjBX,IAAI,EAAEW,OAAO,CAACC,OAAO,CAAC,CAAC;MACvBb,MAAM,EAAEY,OAAO,CAACZ,MAAM,CAAC;IAC3B,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,MAAMc,SAAS,GAAGf,UAAU,IAAIE,IAAI,EAAEI,EAAE,KAAKR,GAAG,CAACS,QAAQ;EACzD,MAAMS,QAAQ,GAAG,4CAA4C;EAC7D,MAAMC,OAAO,GAAG,qCAAqC;EACrD,MAAMC,SAAS,GAAG,2CAA2C;EAE7D,MAAMC,OAAO,GAAG7B,EAAE,CACd,mEAAmE,EACnEyB,SAAS,IAAId,MAAM,IAAIiB,SAAS,EAChCH,SAAS,IAAI,CAACd,MAAM,IAAIgB,OAAO,EAC/B,CAACF,SAAS,IAAIC,QAClB,CAAC;EAED,OAAOb,OAAO,cACVhB,KAAA,CAAAiC,aAAA;IACI,aAAW,cAAe;IAC1B,gBAActB,GAAG,CAACQ,EAAG;IACrB,cAAYR,GAAG,CAACuB,KAAM;IACtBC,SAAS,EAAEH,OAAQ;IACnBI,KAAK,EAAE;MACHC,MAAM,EAAE,GAAG,GAAG1B,GAAG,CAACuB,KAAK;MACvBI,GAAG,EAAE3B,GAAG,CAAC2B,GAAG;MACZC,IAAI,EAAE5B,GAAG,CAAC4B,IAAI;MACdC,KAAK,EAAE7B,GAAG,CAAC6B,KAAK;MAChBC,MAAM,EAAE9B,GAAG,CAAC8B,MAAM;MAClBC,aAAa,EAAEd,SAAS,GAAG,MAAM,GAAG;IACxC;EAAE,gBAEF5B,KAAA,CAAAiC,aAAA,CAAC7B,IAAI;IACDuC,IAAI,EAAE9B,UAAU,IAAI,CAACe,SAAS,gBAAG5B,KAAA,CAAAiC,aAAA,CAAC1B,SAAS,MAAE,CAAC,gBAAGP,KAAA,CAAAiC,aAAA,CAAC3B,UAAU,MAAE,CAAE;IAChEsC,KAAK,EAAE;EAAc,CACxB,CACA,CACT,CAAC;AACL,CAAC,EACD,CAACC,IAAI,EAAEC,IAAI,KAAK5C,SAAS,CAAC2C,IAAI,EAAEC,IAAI,CACxC,CAAC;AAEDrC,OAAO,CAACsC,WAAW,GAAG,SAAS","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/Overlays/DropLine.d.ts CHANGED Viewed

@@ -2,8 +2,10 @@ import React from "react";
 interface DropLineProps {
     label: string;
     top: number;
+    left: number;
+    width: number;
     visible: boolean;
     dimmed: boolean;
 }
-export declare function DropLine({ label, top, visible, dimmed }: DropLineProps): React.JSX.Element;
+export declare function DropLine({ label, top, width, left, visible, dimmed }: DropLineProps): React.JSX.Element;
 export {};

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

@@ -2,22 +2,26 @@ import React from "react";
 export function DropLine({
   label,
   top,
+  width,
+  left,
   visible,
   dimmed
 }) {
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-absolute wby-bg-primary-default wby-left-0 wby-right-0 wby-w-full",
+    className: "absolute bg-primary left-0 right-0 w-full",
     style: {
       display: "flex",
       justifyContent: "center",
       top,
+      left,
+      width,
       height: 4,
-      zIndex: 10,
+      zIndex: 1000,
       visibility: visible ? "visible" : "hidden",
       opacity: dimmed ? 0.5 : 1
     }
   }, /*#__PURE__*/React.createElement("span", {
-    className: "wby-absolute wby-bg-primary-default wby-text-neutral-light",
+    className: "absolute bg-primary text-neutral-light",
     style: {
       top: -10,
       padding: "2px 8px"

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

	@@ -1 +1 @@
1	- {"version":3,"names":["React","DropLine","label","top","visible","dimmed","createElement","className","style","display","justifyContent","height","zIndex","visibility","opacity","padding"],"sources":["DropLine.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface DropLineProps {\n label: string;\n top: number;\n visible: boolean;\n dimmed: boolean;\n}\n\nexport function DropLine({ label, top, visible, dimmed }: DropLineProps) {\n return (\n <div\n className={\"~~wby-~~absolute ~~wby-~~bg-primary~~-default~~ ~~wby-~~left-0 ~~wby-~~right-0 ~~wby-~~w-full\"}\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n top,\n height: 4,\n zIndex: 10,\n visibility: visible ? \"visible\" : \"hidden\",\n opacity: dimmed ? 0.5 : 1\n }}\n >\n <span\n className={\"~~wby-~~absolute ~~wby-~~bg-primary~~-default~~ ~~wby-~~text-neutral-light\"}\n style={{ top: -10, padding: \"2px 8px\" }}\n >\n {label}\n </span>\n </div>\n );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;~~AASzB~~,OAAO,SAASC,QAAQA,CAAC;EAAEC,KAAK;EAAEC,GAAG;EAAEC,OAAO;EAAEC;AAAsB,CAAC,EAAE;~~EACrE~~,~~oBACIL~~,KAAA,~~CAAAM~~,aAAA;IACIC,SAAS,EAAE,~~uEAAwE~~;~~IACnFC~~,KAAK,EAAE;MACHC,OAAO,EAAE,MAAM;MACfC,cAAc,EAAE,QAAQ;~~MACxBP~~,GAAG;~~MACHQ~~,MAAM,EAAE,CAAC;MACTC,MAAM,EAAE,~~EAAE~~;~~MACVC~~,UAAU,EAAET,OAAO,GAAG,SAAS,GAAG,QAAQ;MAC1CU,OAAO,EAAET,MAAM,GAAG,GAAG,GAAG;IAC5B;EAAE,~~gBAEFL~~,KAAA,~~CAAAM~~,aAAA;IACIC,SAAS,EAAE,~~4DAA6D~~;~~IACxEC~~,KAAK,EAAE;~~MAAEL~~,GAAG,EAAE,CAAC,EAAE;~~MAAEY~~,OAAO,EAAE;IAAU;EAAE,~~GAEvCb~~,KACC,CACL,CAAC;AAEd","ignoreList":[]}
1	+ {"version":3,"names":["React","DropLine","label","top","width","left","visible","dimmed","createElement","className","style","display","justifyContent","height","zIndex","visibility","opacity","padding"],"sources":["DropLine.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface DropLineProps {\n label: string;\n top: number;\n left: number;\n width: number;\n visible: boolean;\n dimmed: boolean;\n}\n\nexport function DropLine({ label, top, width, left, visible, dimmed }: DropLineProps) {\n return (\n <div\n className={\"absolute bg-primary left-0 right-0 w-full\"}\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n top,\n left,\n width,\n height: 4,\n zIndex: 1000,\n visibility: visible ? \"visible\" : \"hidden\",\n opacity: dimmed ? 0.5 : 1\n }}\n >\n <span\n className={\"absolute bg-primary text-neutral-light\"}\n style={{ top: -10, padding: \"2px 8px\" }}\n >\n {label}\n </span>\n </div>\n );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAWzB,OAAO,SAASC,QAAQA,CAAC;EAAEC,KAAK;EAAEC,GAAG;EAAEC,KAAK;EAAEC,IAAI;EAAEC,OAAO;EAAEC;AAAsB,CAAC,EAAE;EAClF,oBACIP,KAAA,CAAAQ,aAAA;IACIC,SAAS,EAAE,2CAA4C;IACvDC,KAAK,EAAE;MACHC,OAAO,EAAE,MAAM;MACfC,cAAc,EAAE,QAAQ;MACxBT,GAAG;MACHE,IAAI;MACJD,KAAK;MACLS,MAAM,EAAE,CAAC;MACTC,MAAM,EAAE,IAAI;MACZC,UAAU,EAAET,OAAO,GAAG,SAAS,GAAG,QAAQ;MAC1CU,OAAO,EAAET,MAAM,GAAG,GAAG,GAAG;IAC5B;EAAE,gBAEFP,KAAA,CAAAQ,aAAA;IACIC,SAAS,EAAE,wCAAyC;IACpDC,KAAK,EAAE;MAAEP,GAAG,EAAE,CAAC,EAAE;MAAEc,OAAO,EAAE;IAAU;EAAE,GAEvCf,KACC,CACL,CAAC;AAEd","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/Overlays/ElementDropLines.d.ts CHANGED Viewed

@@ -1,10 +1,9 @@
 import React from "react";
-import type { Box } from "../Box";
+import type { Box } from "../Box.js";
 interface ElementDropZonesProps {
     editorBox: Box;
     previewBox: Box;
     isFirst: boolean;
-    isHighlighted: boolean;
 }
 export declare const ElementDropLines: ({ editorBox, previewBox, isFirst }: ElementDropZonesProps) => React.JSX.Element | null;
 export {};

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

@@ -1,9 +1,9 @@
 import React, { useMemo } from "react";
 import { useDragLayer } from "react-dnd";
-import { DropLine } from "./DropLine";
-import { useIsDragging } from "../useIsDragging";
-import { useProximityDropzone } from "../useProximityDropzone";
-import { useElementComponentManifest } from "../useElementComponentManifest";
+import { DropLine } from "./DropLine.js";
+import { useIsDragging } from "../useIsDragging.js";
+import { useProximityDropzone } from "../useProximityDropzone.js";
+import { useElementComponentManifest } from "../useElementComponentManifest.js";
 import { ComponentManifestToAstConverter } from "@webiny/website-builder-sdk";
 import { findMatchingAstNode } from "@webiny/website-builder-sdk";
 export const ElementDropLines = ({
@@ -33,7 +33,7 @@ export const ElementDropLines = ({
   }, [proximity?.box.parentSlot]);
   // Figure out if we are allowed to drop the current item into the dropzone.
-  let canAcceptComponent = true;
+  let canAcceptComponent = !!targetInputNode;
   if (draggingItem && targetInputNode && targetInputNode.type === "slot") {
     const slotInput = targetInputNode.input;
     const whitelistedComponents = slotInput.components;
@@ -43,12 +43,16 @@ export const ElementDropLines = ({
   }
   return anyElementDragged ? /*#__PURE__*/React.createElement(React.Fragment, null, !isDragging && isFirst && /*#__PURE__*/React.createElement(DropLine, {
     label: elementLabel,
-    top: 0,
+    top: previewBox.top,
+    left: previewBox.left,
+    width: previewBox.width,
     visible: hoverBefore && canAcceptComponent,
     dimmed: false
   }), !isDragging && /*#__PURE__*/React.createElement(DropLine, {
     label: elementLabel,
-    top: previewBox?.height - 2,
+    top: previewBox.bottom - 2,
+    left: previewBox.left,
+    width: previewBox.width,
     visible: hoverAfter && canAcceptComponent,
     dimmed: false
   })) : null;