@webiny/app-website-builder 0.0.0-unstable.e53eceafb5 → 0.0.0-unstable.eb196ccd2f

package/BaseEditor/config/Elements.d.ts

@@ -3,8 +3,17 @@ import type { ElementConfig } from "./Element";
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            "pb-editor-ui-elements": React.HTMLProps<HTMLDivElement>;
-            "pb-editor-ui-element": React.HTMLProps<HTMLDivElement>;
+            "wb-editor-ui-elements": {
+                class?: string;
+                "data-scope"?: string;
+                "data-group"?: string;
+                [key: string]: any;
+            };
+            "wb-editor-ui-element": {
+                class?: string;
+                "data-name"?: string;
+                [key: string]: any;
+            };
         }
     }
 }

package/BaseEditor/config/Elements.js

@@ -19,12 +19,14 @@ export const Elements = ({
   const groupElements = useMemo(() => {
     return elements.filter(byGroup(group)).filter(byScope(scope));
   }, [elements, group, scope]);
-  return /*#__PURE__*/React.createElement("pb-editor-ui-elements", {
+  return /*#__PURE__*/React.createElement("wb-editor-ui-elements", {
     "data-scope": scope,
-    "data-group": group
-  }, transform(groupElements).map(element => /*#__PURE__*/React.createElement("pb-editor-ui-element", {
+    "data-group": group,
+    class: "wby-contents"
+  }, transform(groupElements).map(element => /*#__PURE__*/React.createElement("wb-editor-ui-element", {
     key: element.name,
-    "data-name": element.name
+    "data-name": element.name,
+    class: "wby-contents"
   }, element.element)));
 };
 

package/BaseEditor/config/Elements.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","useEditorConfig","passthrough","byGroup","group","item","byScope","scope","defaultTransform","elements","Elements","transform","groupElements","filter","createElement","map","element","key","name"],"sources":["Elements.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { useEditorConfig } from \"./EditorConfig\";\nimport type { ElementConfig } from \"./Element\";\n\ndeclare global {\n    // eslint-disable-next-line\n    namespace JSX {\n        interface IntrinsicElements {\n            \"pb-editor-ui-elements\": React.HTMLProps<HTMLDivElement>;\n            \"pb-editor-ui-element\": React.HTMLProps<HTMLDivElement>;\n        }\n    }\n}\n\nexport interface ElementsProps {\n    group?: string;\n    scope?: string;\n    transform?: (elements: ElementConfig[]) => ElementConfig[];\n}\n\nconst passthrough = () => true;\n\nconst byGroup = (group?: string) => {\n    return group ? (item: ElementConfig) => item.group === group : passthrough;\n};\nconst byScope = (scope?: string) => {\n    return scope ? (item: ElementConfig) => item.scope === scope : passthrough;\n};\n\nconst defaultTransform = (elements: ElementConfig[]) => elements;\n\nexport const Elements = ({ group, scope, transform = defaultTransform }: ElementsProps) => {\n    const { elements } = useEditorConfig();\n\n    const groupElements = useMemo(() => {\n        return elements.filter(byGroup(group)).filter(byScope(scope));\n    }, [elements, group, scope]);\n\n    return (\n        <pb-editor-ui-elements data-scope={scope} data-group={group}>\n            {transform(groupElements).map(element => (\n                <pb-editor-ui-element key={element.name} data-name={element.name}>\n                    {element.element}\n                </pb-editor-ui-element>\n            ))}\n        </pb-editor-ui-elements>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe;AAmBxB,MAAMC,WAAW,GAAGA,CAAA,KAAM,IAAI;AAE9B,MAAMC,OAAO,GAAIC,KAAc,IAAK;EAChC,OAAOA,KAAK,GAAIC,IAAmB,IAAKA,IAAI,CAACD,KAAK,KAAKA,KAAK,GAAGF,WAAW;AAC9E,CAAC;AACD,MAAMI,OAAO,GAAIC,KAAc,IAAK;EAChC,OAAOA,KAAK,GAAIF,IAAmB,IAAKA,IAAI,CAACE,KAAK,KAAKA,KAAK,GAAGL,WAAW;AAC9E,CAAC;AAED,MAAMM,gBAAgB,GAAIC,QAAyB,IAAKA,QAAQ;AAEhE,OAAO,MAAMC,QAAQ,GAAGA,CAAC;EAAEN,KAAK;EAAEG,KAAK;EAAEI,SAAS,GAAGH;AAAgC,CAAC,KAAK;EACvF,MAAM;IAAEC;EAAS,CAAC,GAAGR,eAAe,CAAC,CAAC;EAEtC,MAAMW,aAAa,GAAGZ,OAAO,CAAC,MAAM;IAChC,OAAOS,QAAQ,CAACI,MAAM,CAACV,OAAO,CAACC,KAAK,CAAC,CAAC,CAACS,MAAM,CAACP,OAAO,CAACC,KAAK,CAAC,CAAC;EACjE,CAAC,EAAE,CAACE,QAAQ,EAAEL,KAAK,EAAEG,KAAK,CAAC,CAAC;EAE5B,oBACIR,KAAA,CAAAe,aAAA;IAAuB,cAAYP,KAAM;IAAC,cAAYH;EAAM,GACvDO,SAAS,CAACC,aAAa,CAAC,CAACG,GAAG,CAACC,OAAO,iBACjCjB,KAAA,CAAAe,aAAA;IAAsBG,GAAG,EAAED,OAAO,CAACE,IAAK;IAAC,aAAWF,OAAO,CAACE;EAAK,GAC5DF,OAAO,CAACA,OACS,CACzB,CACkB,CAAC;AAEhC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useMemo","useEditorConfig","passthrough","byGroup","group","item","byScope","scope","defaultTransform","elements","Elements","transform","groupElements","filter","createElement","class","map","element","key","name"],"sources":["Elements.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { useEditorConfig } from \"./EditorConfig\";\nimport type { ElementConfig } from \"./Element\";\n\ndeclare global {\n    // eslint-disable-next-line\n    namespace JSX {\n        interface IntrinsicElements {\n            \"wb-editor-ui-elements\": {\n                class?: string;\n                \"data-scope\"?: string;\n                \"data-group\"?: string;\n                [key: string]: any;\n            };\n            \"wb-editor-ui-element\": {\n                class?: string;\n                \"data-name\"?: string;\n                [key: string]: any;\n            };\n        }\n    }\n}\n\nexport interface ElementsProps {\n    group?: string;\n    scope?: string;\n    transform?: (elements: ElementConfig[]) => ElementConfig[];\n}\n\nconst passthrough = () => true;\n\nconst byGroup = (group?: string) => {\n    return group ? (item: ElementConfig) => item.group === group : passthrough;\n};\nconst byScope = (scope?: string) => {\n    return scope ? (item: ElementConfig) => item.scope === scope : passthrough;\n};\n\nconst defaultTransform = (elements: ElementConfig[]) => elements;\n\nexport const Elements = ({ group, scope, transform = defaultTransform }: ElementsProps) => {\n    const { elements } = useEditorConfig();\n\n    const groupElements = useMemo(() => {\n        return elements.filter(byGroup(group)).filter(byScope(scope));\n    }, [elements, group, scope]);\n\n    return (\n        <wb-editor-ui-elements data-scope={scope} data-group={group} class={\"wby-contents\"}>\n            {transform(groupElements).map(element => (\n                <wb-editor-ui-element\n                    key={element.name}\n                    data-name={element.name}\n                    class={\"wby-contents\"}\n                >\n                    {element.element}\n                </wb-editor-ui-element>\n            ))}\n        </wb-editor-ui-elements>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe;AA4BxB,MAAMC,WAAW,GAAGA,CAAA,KAAM,IAAI;AAE9B,MAAMC,OAAO,GAAIC,KAAc,IAAK;EAChC,OAAOA,KAAK,GAAIC,IAAmB,IAAKA,IAAI,CAACD,KAAK,KAAKA,KAAK,GAAGF,WAAW;AAC9E,CAAC;AACD,MAAMI,OAAO,GAAIC,KAAc,IAAK;EAChC,OAAOA,KAAK,GAAIF,IAAmB,IAAKA,IAAI,CAACE,KAAK,KAAKA,KAAK,GAAGL,WAAW;AAC9E,CAAC;AAED,MAAMM,gBAAgB,GAAIC,QAAyB,IAAKA,QAAQ;AAEhE,OAAO,MAAMC,QAAQ,GAAGA,CAAC;EAAEN,KAAK;EAAEG,KAAK;EAAEI,SAAS,GAAGH;AAAgC,CAAC,KAAK;EACvF,MAAM;IAAEC;EAAS,CAAC,GAAGR,eAAe,CAAC,CAAC;EAEtC,MAAMW,aAAa,GAAGZ,OAAO,CAAC,MAAM;IAChC,OAAOS,QAAQ,CAACI,MAAM,CAACV,OAAO,CAACC,KAAK,CAAC,CAAC,CAACS,MAAM,CAACP,OAAO,CAACC,KAAK,CAAC,CAAC;EACjE,CAAC,EAAE,CAACE,QAAQ,EAAEL,KAAK,EAAEG,KAAK,CAAC,CAAC;EAE5B,oBACIR,KAAA,CAAAe,aAAA;IAAuB,cAAYP,KAAM;IAAC,cAAYH,KAAM;IAACW,KAAK,EAAE;EAAe,GAC9EJ,SAAS,CAACC,aAAa,CAAC,CAACI,GAAG,CAACC,OAAO,iBACjClB,KAAA,CAAAe,aAAA;IACII,GAAG,EAAED,OAAO,CAACE,IAAK;IAClB,aAAWF,OAAO,CAACE,IAAK;IACxBJ,KAAK,EAAE;EAAe,GAErBE,OAAO,CAACA,OACS,CACzB,CACkB,CAAC;AAEhC,CAAC","ignoreList":[]}

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

@@ -17,7 +17,7 @@ export const AddressBar = () => {
       return;
     }
     setAddressBarUrl(`${previewDomain}${path}`);
-  }, [previewDomain]);
+  }, [path, previewDomain]);
   return /*#__PURE__*/React.createElement("div", {
     className: "wby-w-full wby-h-[49px] wby-flex wby-flex-row wby-p-sm wby-bg-neutral-base wby-border-solid wby-border-b-sm wby-border-neutral-dimmed"
   }, /*#__PURE__*/React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","BreakpointSelector","PreviewInNewTab","OpenInNewTab","RefreshPreview","useSelectFromDocument","PreviewDomain","usePreviewDomain","AddressBar","path","document","properties","previewDomain","addressBarUrl","setAddressBarUrl","createElement","className"],"sources":["AddressBar.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { BreakpointSelector } from \"./BreakpointSelector\";\nimport { PreviewInNewTab } from \"./AddressBar/PreviewInNewTab\";\nimport { OpenInNewTab } from \"./AddressBar/OpenInNewTab\";\nimport { RefreshPreview } from \"./AddressBar/RefreshPreview\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\nimport { PreviewDomain } from \"./AddressBar/PreviewDomain\";\nimport { usePreviewDomain } from \"./usePreviewDomain\";\n\nexport const AddressBar = () => {\n    const path = useSelectFromDocument(document => document.properties.path);\n\n    const { previewDomain } = usePreviewDomain();\n    const [addressBarUrl, setAddressBarUrl] = useState<string>(\"\");\n\n    useEffect(() => {\n        if (!previewDomain) {\n            return;\n        }\n\n        setAddressBarUrl(`${previewDomain}${path}`);\n    }, [previewDomain]);\n\n    return (\n        <div className=\"wby-w-full wby-h-[49px] wby-flex wby-flex-row wby-p-sm wby-bg-neutral-base wby-border-solid wby-border-b-sm wby-border-neutral-dimmed\">\n            <div className={\"wby-relative wby-flex-auto wby-mr-sm\"}>\n                <div\n                    className={\n                        \"wby-w-full wby-absolute wby-top-[-1px] wby-py-[6px] wby-pl-xl wby-border-sm wby-text-md wby-peer wby-cursor-not-allowed wby-rounded-md wby-border-neutral-subtle wby-text-neutral-muted wby-bg-neutral-disabled wby-text-neutral-disabled\"\n                    }\n                >\n                    <PreviewDomain />\n                    {addressBarUrl}\n                </div>\n                <div className={\"wby-absolute wby-right-0 wby-top-0\"}>\n                    <RefreshPreview />\n                    <PreviewInNewTab />\n                    <OpenInNewTab />\n                </div>\n            </div>\n            <div className={\"wby-flex-none\"}>\n                <BreakpointSelector />\n            </div>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,kBAAkB;AAC3B,SAASC,eAAe;AACxB,SAASC,YAAY;AACrB,SAASC,cAAc;AACvB,SAASC,qBAAqB;AAC9B,SAASC,aAAa;AACtB,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,UAAU,GAAGA,CAAA,KAAM;EAC5B,MAAMC,IAAI,GAAGJ,qBAAqB,CAACK,QAAQ,IAAIA,QAAQ,CAACC,UAAU,CAACF,IAAI,CAAC;EAExE,MAAM;IAAEG;EAAc,CAAC,GAAGL,gBAAgB,CAAC,CAAC;EAC5C,MAAM,CAACM,aAAa,EAAEC,gBAAgB,CAAC,GAAGd,QAAQ,CAAS,EAAE,CAAC;EAE9DD,SAAS,CAAC,MAAM;IACZ,IAAI,CAACa,aAAa,EAAE;MAChB;IACJ;IAEAE,gBAAgB,CAAC,GAAGF,aAAa,GAAGH,IAAI,EAAE,CAAC;EAC/C,CAAC,EAAE,CAACG,aAAa,CAAC,CAAC;EAEnB,oBACId,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAC;EAAuI,gBAClJlB,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAE;EAAuC,gBACnDlB,KAAA,CAAAiB,aAAA;IACIC,SAAS,EACL;EACH,gBAEDlB,KAAA,CAAAiB,aAAA,CAACT,aAAa,MAAE,CAAC,EAChBO,aACA,CAAC,eACNf,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAE;EAAqC,gBACjDlB,KAAA,CAAAiB,aAAA,CAACX,cAAc,MAAE,CAAC,eAClBN,KAAA,CAAAiB,aAAA,CAACb,eAAe,MAAE,CAAC,eACnBJ,KAAA,CAAAiB,aAAA,CAACZ,YAAY,MAAE,CACd,CACJ,CAAC,eACNL,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAE;EAAgB,gBAC5BlB,KAAA,CAAAiB,aAAA,CAACd,kBAAkB,MAAE,CACpB,CACJ,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useState","BreakpointSelector","PreviewInNewTab","OpenInNewTab","RefreshPreview","useSelectFromDocument","PreviewDomain","usePreviewDomain","AddressBar","path","document","properties","previewDomain","addressBarUrl","setAddressBarUrl","createElement","className"],"sources":["AddressBar.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { BreakpointSelector } from \"./BreakpointSelector\";\nimport { PreviewInNewTab } from \"./AddressBar/PreviewInNewTab\";\nimport { OpenInNewTab } from \"./AddressBar/OpenInNewTab\";\nimport { RefreshPreview } from \"./AddressBar/RefreshPreview\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\nimport { PreviewDomain } from \"./AddressBar/PreviewDomain\";\nimport { usePreviewDomain } from \"./usePreviewDomain\";\n\nexport const AddressBar = () => {\n    const path = useSelectFromDocument(document => document.properties.path);\n\n    const { previewDomain } = usePreviewDomain();\n    const [addressBarUrl, setAddressBarUrl] = useState<string>(\"\");\n\n    useEffect(() => {\n        if (!previewDomain) {\n            return;\n        }\n\n        setAddressBarUrl(`${previewDomain}${path}`);\n    }, [path, previewDomain]);\n\n    return (\n        <div className=\"wby-w-full wby-h-[49px] wby-flex wby-flex-row wby-p-sm wby-bg-neutral-base wby-border-solid wby-border-b-sm wby-border-neutral-dimmed\">\n            <div className={\"wby-relative wby-flex-auto wby-mr-sm\"}>\n                <div\n                    className={\n                        \"wby-w-full wby-absolute wby-top-[-1px] wby-py-[6px] wby-pl-xl wby-border-sm wby-text-md wby-peer wby-cursor-not-allowed wby-rounded-md wby-border-neutral-subtle wby-text-neutral-muted wby-bg-neutral-disabled wby-text-neutral-disabled\"\n                    }\n                >\n                    <PreviewDomain />\n                    {addressBarUrl}\n                </div>\n                <div className={\"wby-absolute wby-right-0 wby-top-0\"}>\n                    <RefreshPreview />\n                    <PreviewInNewTab />\n                    <OpenInNewTab />\n                </div>\n            </div>\n            <div className={\"wby-flex-none\"}>\n                <BreakpointSelector />\n            </div>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,kBAAkB;AAC3B,SAASC,eAAe;AACxB,SAASC,YAAY;AACrB,SAASC,cAAc;AACvB,SAASC,qBAAqB;AAC9B,SAASC,aAAa;AACtB,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,UAAU,GAAGA,CAAA,KAAM;EAC5B,MAAMC,IAAI,GAAGJ,qBAAqB,CAACK,QAAQ,IAAIA,QAAQ,CAACC,UAAU,CAACF,IAAI,CAAC;EAExE,MAAM;IAAEG;EAAc,CAAC,GAAGL,gBAAgB,CAAC,CAAC;EAC5C,MAAM,CAACM,aAAa,EAAEC,gBAAgB,CAAC,GAAGd,QAAQ,CAAS,EAAE,CAAC;EAE9DD,SAAS,CAAC,MAAM;IACZ,IAAI,CAACa,aAAa,EAAE;MAChB;IACJ;IAEAE,gBAAgB,CAAC,GAAGF,aAAa,GAAGH,IAAI,EAAE,CAAC;EAC/C,CAAC,EAAE,CAACA,IAAI,EAAEG,aAAa,CAAC,CAAC;EAEzB,oBACId,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAC;EAAuI,gBAClJlB,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAE;EAAuC,gBACnDlB,KAAA,CAAAiB,aAAA;IACIC,SAAS,EACL;EACH,gBAEDlB,KAAA,CAAAiB,aAAA,CAACT,aAAa,MAAE,CAAC,EAChBO,aACA,CAAC,eACNf,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAE;EAAqC,gBACjDlB,KAAA,CAAAiB,aAAA,CAACX,cAAc,MAAE,CAAC,eAClBN,KAAA,CAAAiB,aAAA,CAACb,eAAe,MAAE,CAAC,eACnBJ,KAAA,CAAAiB,aAAA,CAACZ,YAAY,MAAE,CACd,CACJ,CAAC,eACNL,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAE;EAAgB,gBAC5BlB,KAAA,CAAAiB,aAAA,CAACd,kBAAkB,MAAE,CACpB,CACJ,CAAC;AAEd,CAAC","ignoreList":[]}

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

@@ -0,0 +1 @@
+export declare const ApplyTheme: () => null;

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

@@ -0,0 +1,51 @@
+import { useEffect } from "react";
+import { useWebsiteBuilderTheme } from "../../../components";
+export const ApplyTheme = () => {
+  const {
+    theme
+  } = useWebsiteBuilderTheme();
+  useEffect(() => {
+    if (!theme) {
+      return;
+    }
+    if (theme.css) {
+      const existing = document.querySelector(`style[id="wb-editor-css"]`);
+      const style = document.createElement("style");
+      style.id = "wb-editor-css";
+      style.innerHTML = theme.css;
+      if (existing) {
+        existing.replaceWith(style);
+      } else {
+        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}"]`);
+        if (existing) {
+          return;
+        }
+        const link = document.createElement("link");
+        link.href = font;
+        link.rel = "stylesheet";
+        document.head.appendChild(link);
+      });
+    }
+  }, [theme]);
+  return null;
+};
+
+//# sourceMappingURL=ApplyTheme.js.map

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

@@ -0,0 +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":[]}

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

@@ -14,7 +14,7 @@ import { Commands } from "../../..";
 import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor";
 import { AwaitIframeUrl } from "./AwaitIframeUrl";
 import { PreviewEvents } from "./PreviewEvents";
-import { LoadThemeStylesheet } from "./LoadThemeStylesheet";
+import { ApplyTheme } from "./ApplyTheme";
 export const Preview = () => {
   const editor = useDocumentEditor();
   const [iframeTimestamp, setIframeTimestamp] = useState(Date.now());
@@ -100,7 +100,7 @@ export const Preview = () => {
   }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropZoneManagerProvider, {
     dropzoneManager: dropzoneManager
-  }, /*#__PURE__*/React.createElement(LoadThemeStylesheet, null), /*#__PURE__*/React.createElement(AddressBar, null), /*#__PURE__*/React.createElement(AwaitIframeUrl, null, ({
+  }, /*#__PURE__*/React.createElement(ApplyTheme, null), /*#__PURE__*/React.createElement(AddressBar, null), /*#__PURE__*/React.createElement(AwaitIframeUrl, null, ({
     url
   }) => /*#__PURE__*/React.createElement(Iframe, {
     url: url,

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useMemo","useState","useDocumentEditor","AddressBar","Iframe","HoverManager","DropZoneManager","DropZoneManagerProvider","Boxes","ScrollTracker","KeyboardShortcuts","ViewportManager","mouseTracker","Commands","useSelectFromEditor","AwaitIframeUrl","PreviewEvents","LoadThemeStylesheet","Preview","editor","iframeTimestamp","setIframeTimestamp","Date","now","loadingPreview","state","scrollTracker","window","e","source","target","dataset","role","hoverManager","editorState","getEditorState","read","boxes","filter","box","id","viewportManager","previewEvents","dropzoneManager","updateEditor","offRefreshPreview","registerCommandHandler","RefreshPreview","preview","start","stop","destroy","setMousePositionFromDrag","setPosition","clientX","clientY","addEventListener","offHoverChange","onHoverChange","highlightedElement","removeEventListener","onConnected","messenger","createElement","Fragment","url","timestamp","showLoading"],"sources":["Preview.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type { Messenger } from \"@webiny/website-builder-sdk\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { AddressBar } from \"./AddressBar\";\nimport { Iframe } from \"./Iframe\";\nimport { HoverManager } from \"./HoverManager\";\nimport { DropZoneManager } from \"./DropZoneManager\";\nimport { DropZoneManagerProvider } from \"./DropZoneManagerProvider\";\nimport { Boxes } from \"~/BaseEditor/hooks/Boxes\";\nimport { ScrollTracker } from \"~/BaseEditor/defaultConfig/Content/Preview/ScrollTracker\";\nimport { KeyboardShortcuts } from \"./KeyboardShortcuts\";\nimport { ViewportManager } from \"@webiny/website-builder-sdk\";\nimport { mouseTracker } from \"@webiny/website-builder-sdk\";\nimport { Commands } from \"~/BaseEditor\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor\";\nimport { AwaitIframeUrl } from \"~/BaseEditor/defaultConfig/Content/Preview/AwaitIframeUrl\";\nimport { PreviewEvents } from \"~/BaseEditor/defaultConfig/Content/Preview/PreviewEvents\";\nimport { LoadThemeStylesheet } from \"./LoadThemeStylesheet\";\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 scrollTracker = useMemo(() => {\n        return new ScrollTracker(window, e => {\n            const source = e.target as HTMLDivElement | null;\n\n            if (!source) {\n                return false;\n            }\n\n            return source.dataset.role === \"element-overlay\";\n        });\n    }, []);\n\n    const hoverManager = useMemo(() => {\n        return new HoverManager(mouseTracker, () => {\n            const editorState = editor.getEditorState().read();\n            return new Boxes(editorState.boxes.editor).filter(box => box.id !== \"root\");\n        });\n    }, [mouseTracker]);\n\n    const viewportManager = useMemo(() => {\n        return new ViewportManager();\n    }, []);\n\n    const previewEvents = useMemo(() => {\n        return new PreviewEvents(editor, scrollTracker);\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        scrollTracker.start();\n        mouseTracker.start();\n        dropzoneManager.start();\n\n        return () => {\n            dropzoneManager.stop();\n            mouseTracker.stop();\n            scrollTracker.destroy();\n            viewportManager.destroy();\n            hoverManager.destroy();\n            previewEvents.destroy();\n        };\n    }, [dropzoneManager, scrollTracker, 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        const offHoverChange = hoverManager.onHoverChange(id => {\n            editor.updateEditor(state => {\n                state.highlightedElement = id;\n            });\n        });\n\n        return () => {\n            window.removeEventListener(\"dragover\", setMousePositionFromDrag);\n            offHoverChange();\n        };\n    }, []);\n\n    const onConnected = useCallback((messenger: Messenger) => {\n        previewEvents.onConnected(messenger);\n    }, []);\n\n    return (\n        <>\n            <DropZoneManagerProvider dropzoneManager={dropzoneManager}>\n                <LoadThemeStylesheet />\n                <AddressBar />\n                <AwaitIframeUrl>\n                    {({ url }) => (\n                        <Iframe\n                            url={url}\n                            timestamp={iframeTimestamp}\n                            viewportManager={viewportManager}\n                            onConnected={onConnected}\n                            showLoading={loadingPreview}\n                        />\n                    )}\n                </AwaitIframeUrl>\n            </DropZoneManagerProvider>\n            <KeyboardShortcuts />\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useEffect","useMemo","useState","useDocumentEditor","AddressBar","Iframe","HoverManager","DropZoneManager","DropZoneManagerProvider","Boxes","ScrollTracker","KeyboardShortcuts","ViewportManager","mouseTracker","Commands","useSelectFromEditor","AwaitIframeUrl","PreviewEvents","ApplyTheme","Preview","editor","iframeTimestamp","setIframeTimestamp","Date","now","loadingPreview","state","scrollTracker","window","e","source","target","dataset","role","hoverManager","editorState","getEditorState","read","boxes","filter","box","id","viewportManager","previewEvents","dropzoneManager","updateEditor","offRefreshPreview","registerCommandHandler","RefreshPreview","preview","start","stop","destroy","setMousePositionFromDrag","setPosition","clientX","clientY","addEventListener","offHoverChange","onHoverChange","highlightedElement","removeEventListener","onConnected","messenger","createElement","Fragment","url","timestamp","showLoading"],"sources":["Preview.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type { Messenger } from \"@webiny/website-builder-sdk\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { AddressBar } from \"./AddressBar\";\nimport { Iframe } from \"./Iframe\";\nimport { HoverManager } from \"./HoverManager\";\nimport { DropZoneManager } from \"./DropZoneManager\";\nimport { DropZoneManagerProvider } from \"./DropZoneManagerProvider\";\nimport { Boxes } from \"~/BaseEditor/hooks/Boxes\";\nimport { ScrollTracker } from \"~/BaseEditor/defaultConfig/Content/Preview/ScrollTracker\";\nimport { KeyboardShortcuts } from \"./KeyboardShortcuts\";\nimport { ViewportManager } from \"@webiny/website-builder-sdk\";\nimport { mouseTracker } from \"@webiny/website-builder-sdk\";\nimport { Commands } from \"~/BaseEditor\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor\";\nimport { AwaitIframeUrl } from \"~/BaseEditor/defaultConfig/Content/Preview/AwaitIframeUrl\";\nimport { PreviewEvents } from \"~/BaseEditor/defaultConfig/Content/Preview/PreviewEvents\";\nimport { ApplyTheme } from \"./ApplyTheme\";\n\nexport const Preview = () => {\n    const editor = useDocumentEditor();\n    const [iframeTimestamp, setIframeTimestamp] = useState(Date.now());\n\n    const loadingPreview = useSelectFromEditor(state => state.loadingPreview);\n\n    const scrollTracker = useMemo(() => {\n        return new ScrollTracker(window, e => {\n            const source = e.target as HTMLDivElement | null;\n\n            if (!source) {\n                return false;\n            }\n\n            return source.dataset.role === \"element-overlay\";\n        });\n    }, []);\n\n    const hoverManager = useMemo(() => {\n        return new HoverManager(mouseTracker, () => {\n            const editorState = editor.getEditorState().read();\n            return new Boxes(editorState.boxes.editor).filter(box => box.id !== \"root\");\n        });\n    }, [mouseTracker]);\n\n    const viewportManager = useMemo(() => {\n        return new ViewportManager();\n    }, []);\n\n    const previewEvents = useMemo(() => {\n        return new PreviewEvents(editor, scrollTracker);\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        scrollTracker.start();\n        mouseTracker.start();\n        dropzoneManager.start();\n\n        return () => {\n            dropzoneManager.stop();\n            mouseTracker.stop();\n            scrollTracker.destroy();\n            viewportManager.destroy();\n            hoverManager.destroy();\n            previewEvents.destroy();\n        };\n    }, [dropzoneManager, scrollTracker, 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        const offHoverChange = hoverManager.onHoverChange(id => {\n            editor.updateEditor(state => {\n                state.highlightedElement = id;\n            });\n        });\n\n        return () => {\n            window.removeEventListener(\"dragover\", setMousePositionFromDrag);\n            offHoverChange();\n        };\n    }, []);\n\n    const onConnected = useCallback((messenger: Messenger) => {\n        previewEvents.onConnected(messenger);\n    }, []);\n\n    return (\n        <>\n            <DropZoneManagerProvider dropzoneManager={dropzoneManager}>\n                <ApplyTheme />\n                <AddressBar />\n                <AwaitIframeUrl>\n                    {({ url }) => (\n                        <Iframe\n                            url={url}\n                            timestamp={iframeTimestamp}\n                            viewportManager={viewportManager}\n                            onConnected={onConnected}\n                            showLoading={loadingPreview}\n                        />\n                    )}\n                </AwaitIframeUrl>\n            </DropZoneManagerProvider>\n            <KeyboardShortcuts />\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -18,6 +18,7 @@ export class PreviewEvents {
     setTimeout(() => {
       this.editor.updateEditor(state => {
         state.loadingPreview = false;
+        state.selectedElement = null;
       });
     }, 100);
   }

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

@@ -1 +1 @@
-{"version":3,"names":["mouseTracker","defaultImage","Commands","$createElement","PreviewEvents","editorEventsRegistered","listeners","constructor","editor","scrollTracker","onConnected","messenger","dispose","registerEditorEvents","subscribeToIframe","setTimeout","updateEditor","state","loadingPreview","destroy","forEach","unsubscribe","push","onDocumentStateChange","event","reason","getMessenger","send","diff","onScrollStart","showOverlays","onScroll","deltaX","deltaY","onScrollEnd","registerCommandHandler","PreviewPatchElement","payload","elementId","patch","getDocumentState","toJson","on","theme","executeCommand","SetTheme","fragments","document","read","Object","keys","elements","length","index","fragment","componentName","parentId","slot","bindings","inputs","name","boxes","viewport","iframeBox","getIframeBox","top","left","preview","mapCoordinatesToEditorSpace","component","components","image","tags","group","componentGroups","id","selectedElement","x","y","globalX","globalY","setPosition","iframe","getElementById","width","height","iframeRect","getBoundingClientRect","newBoxes","key","box"],"sources":["PreviewEvents.ts"],"sourcesContent":["import type { Editor } from \"~/editorSdk/Editor\";\nimport type { Messenger } from \"@webiny/website-builder-sdk\";\nimport {\n    type BoxesData,\n    type ComponentManifest,\n    type EditorViewportInfo,\n    mouseTracker,\n    type PreviewViewportData,\n    type SerializedComponentGroup\n} from \"@webiny/website-builder-sdk\";\nimport defaultImage from \"@webiny/icons/extension.svg\";\nimport { Commands } from \"~/BaseEditor\";\nimport { $createElement } from \"~/editorSdk/utils\";\nimport type { ScrollTracker } from \"./ScrollTracker\";\n\nexport class PreviewEvents {\n    private editor: Editor;\n    private editorEventsRegistered = false;\n    private messenger: Messenger | undefined;\n    private scrollTracker: ScrollTracker;\n    private listeners: Array<() => void> = [];\n\n    constructor(editor: Editor, scrollTracker: ScrollTracker) {\n        this.scrollTracker = scrollTracker;\n        this.editor = editor;\n    }\n\n    onConnected(messenger: Messenger) {\n        // Dispose of the old messenger.\n        this.messenger?.dispose();\n\n        this.messenger = messenger;\n\n        this.registerEditorEvents();\n\n        this.subscribeToIframe(messenger);\n\n        setTimeout(() => {\n            this.editor.updateEditor(state => {\n                state.loadingPreview = false;\n            });\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            // Scroll start\n            this.scrollTracker.onScrollStart(() => {\n                this.editor.updateEditor(state => {\n                    state.showOverlays = false;\n                });\n            }),\n\n            // Scrolling\n            this.scrollTracker.onScroll(event => {\n                this.getMessenger().send(\"preview.scroll\", {\n                    deltaX: event.deltaX,\n                    deltaY: event.deltaY\n                });\n            }),\n\n            // Scroll end\n            this.scrollTracker.onScrollEnd(() => {\n                this.editor.updateEditor(state => {\n                    state.showOverlays = true;\n                });\n            }),\n\n            // Element preview\n            this.editor.registerCommandHandler(Commands.PreviewPatchElement, payload => {\n                this.getMessenger().send(`element.patch.${payload.elementId}`, payload.patch);\n            })\n        );\n    }\n\n    private subscribeToIframe(messenger: Messenger) {\n        // When `onConnected` is executed, we need to send new data to the live preview.\n        messenger.send(\"document.set\", this.editor.getDocumentState().toJson());\n\n        messenger.on(\"preview.theme\", ({ theme }) => {\n            this.editor.executeCommand(Commands.SetTheme, { theme });\n        });\n\n        messenger.on(\"document.fragments\", payload => {\n            const fragments: string[] = payload.fragments;\n            this.editor.updateEditor(state => {\n                state.fragments = fragments;\n            });\n\n            const document = this.editor.getDocumentState().read();\n\n            if (Object.keys(document.elements).length === 1) {\n                // We only have the default \"root\" element, create fragment elements.\n                let index = 0;\n                fragments.forEach(fragment => {\n                    $createElement(this.editor, {\n                        componentName: \"Webiny/Fragment\",\n                        parentId: \"root\",\n                        slot: \"children\",\n                        index,\n                        bindings: {\n                            inputs: {\n                                name: fragment\n                            }\n                        }\n                    });\n                    index++;\n                });\n            }\n        });\n\n        messenger.on(\"preview.viewport\", ({ boxes, viewport }: PreviewViewportData) => {\n            const iframeBox = this.getIframeBox();\n\n            this.editor.updateEditor(state => {\n                state.viewport = {\n                    ...viewport,\n                    top: iframeBox.top,\n                    left: iframeBox.left\n                };\n\n                state.boxes = {\n                    preview: boxes,\n                    editor: this.mapCoordinatesToEditorSpace(state.viewport, boxes)\n                };\n            });\n        });\n\n        messenger.on(\"preview.component.register\", (component: ComponentManifest) => {\n            this.editor.updateEditor(state => {\n                if (!state.components) {\n                    state.components = {};\n                }\n                state.components[component.name] = {\n                    ...component,\n                    image: component.image ?? defaultImage,\n                    tags: component.tags ?? []\n                };\n            });\n        });\n\n        messenger.on(\"preview.componentGroup.register\", (group: SerializedComponentGroup) => {\n            this.editor.updateEditor(state => {\n                if (!state.componentGroups) {\n                    state.componentGroups = {};\n                }\n                state.componentGroups[group.name] = group;\n            });\n        });\n\n        messenger.on(\"preview.element.click\", ({ id }) => {\n            this.editor.updateEditor(state => {\n                state.selectedElement = id;\n            });\n        });\n\n        messenger.on(\"preview.mouse.move\", ({ x, y }) => {\n            const iframeBox = this.getIframeBox();\n            const globalX = x + iframeBox.left;\n            const globalY = y + iframeBox.top;\n\n            mouseTracker.setPosition(globalX, globalY);\n        });\n    }\n\n    private getIframeBox() {\n        const iframe = document.getElementById(\"preview-iframe\");\n        if (!iframe) {\n            return {\n                top: 0,\n                left: 0,\n                width: 0,\n                height: 0\n            };\n        }\n\n        const iframeRect = iframe.getBoundingClientRect();\n\n        return {\n            top: iframeRect.top,\n            left: iframeRect.left,\n            width: iframeRect.width,\n            height: iframeRect.height\n        };\n    }\n\n    private mapCoordinatesToEditorSpace(\n        viewport: EditorViewportInfo,\n        boxes: PreviewViewportData[\"boxes\"]\n    ) {\n        const newBoxes: BoxesData = {};\n\n        for (const key in boxes) {\n            const box = boxes[key];\n            newBoxes[key] = {\n                ...box,\n                top: box.top + viewport.top,\n                left: box.left + viewport.left\n            };\n        }\n\n        return newBoxes;\n    }\n\n    private getMessenger(): Messenger {\n        return this.messenger!;\n    }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["mouseTracker","defaultImage","Commands","$createElement","PreviewEvents","editorEventsRegistered","listeners","constructor","editor","scrollTracker","onConnected","messenger","dispose","registerEditorEvents","subscribeToIframe","setTimeout","updateEditor","state","loadingPreview","selectedElement","destroy","forEach","unsubscribe","push","onDocumentStateChange","event","reason","getMessenger","send","diff","onScrollStart","showOverlays","onScroll","deltaX","deltaY","onScrollEnd","registerCommandHandler","PreviewPatchElement","payload","elementId","patch","getDocumentState","toJson","on","theme","executeCommand","SetTheme","fragments","document","read","Object","keys","elements","length","index","fragment","componentName","parentId","slot","bindings","inputs","name","boxes","viewport","iframeBox","getIframeBox","top","left","preview","mapCoordinatesToEditorSpace","component","components","image","tags","group","componentGroups","id","x","y","globalX","globalY","setPosition","iframe","getElementById","width","height","iframeRect","getBoundingClientRect","newBoxes","key","box"],"sources":["PreviewEvents.ts"],"sourcesContent":["import type { Editor } from \"~/editorSdk/Editor\";\nimport type { Messenger } from \"@webiny/website-builder-sdk\";\nimport {\n    type BoxesData,\n    type ComponentManifest,\n    type EditorViewportInfo,\n    mouseTracker,\n    type PreviewViewportData,\n    type SerializedComponentGroup\n} from \"@webiny/website-builder-sdk\";\nimport defaultImage from \"@webiny/icons/extension.svg\";\nimport { Commands } from \"~/BaseEditor\";\nimport { $createElement } from \"~/editorSdk/utils\";\nimport type { ScrollTracker } from \"./ScrollTracker\";\n\nexport class PreviewEvents {\n    private editor: Editor;\n    private editorEventsRegistered = false;\n    private messenger: Messenger | undefined;\n    private scrollTracker: ScrollTracker;\n    private listeners: Array<() => void> = [];\n\n    constructor(editor: Editor, scrollTracker: ScrollTracker) {\n        this.scrollTracker = scrollTracker;\n        this.editor = editor;\n    }\n\n    onConnected(messenger: Messenger) {\n        // Dispose of the old messenger.\n        this.messenger?.dispose();\n\n        this.messenger = messenger;\n\n        this.registerEditorEvents();\n\n        this.subscribeToIframe(messenger);\n\n        setTimeout(() => {\n            this.editor.updateEditor(state => {\n                state.loadingPreview = false;\n                state.selectedElement = null;\n            });\n        }, 100);\n    }\n\n    destroy() {\n        this.listeners.forEach(unsubscribe => {\n            unsubscribe();\n        });\n    }\n\n    private registerEditorEvents() {\n        if (this.editorEventsRegistered) {\n            return;\n        }\n\n        this.editorEventsRegistered = true;\n\n        this.listeners.push(\n            // Propagate changes\n            this.editor.onDocumentStateChange(event => {\n                if (event.reason === \"update\") {\n                    this.getMessenger().send(\"document.patch\", event.diff);\n                } else {\n                    this.getMessenger().send(\"document.set\", event.state);\n                }\n            }),\n            // Scroll start\n            this.scrollTracker.onScrollStart(() => {\n                this.editor.updateEditor(state => {\n                    state.showOverlays = false;\n                });\n            }),\n\n            // Scrolling\n            this.scrollTracker.onScroll(event => {\n                this.getMessenger().send(\"preview.scroll\", {\n                    deltaX: event.deltaX,\n                    deltaY: event.deltaY\n                });\n            }),\n\n            // Scroll end\n            this.scrollTracker.onScrollEnd(() => {\n                this.editor.updateEditor(state => {\n                    state.showOverlays = true;\n                });\n            }),\n\n            // Element preview\n            this.editor.registerCommandHandler(Commands.PreviewPatchElement, payload => {\n                this.getMessenger().send(`element.patch.${payload.elementId}`, payload.patch);\n            })\n        );\n    }\n\n    private subscribeToIframe(messenger: Messenger) {\n        // When `onConnected` is executed, we need to send new data to the live preview.\n        messenger.send(\"document.set\", this.editor.getDocumentState().toJson());\n\n        messenger.on(\"preview.theme\", ({ theme }) => {\n            this.editor.executeCommand(Commands.SetTheme, { theme });\n        });\n\n        messenger.on(\"document.fragments\", payload => {\n            const fragments: string[] = payload.fragments;\n            this.editor.updateEditor(state => {\n                state.fragments = fragments;\n            });\n\n            const document = this.editor.getDocumentState().read();\n\n            if (Object.keys(document.elements).length === 1) {\n                // We only have the default \"root\" element, create fragment elements.\n                let index = 0;\n                fragments.forEach(fragment => {\n                    $createElement(this.editor, {\n                        componentName: \"Webiny/Fragment\",\n                        parentId: \"root\",\n                        slot: \"children\",\n                        index,\n                        bindings: {\n                            inputs: {\n                                name: fragment\n                            }\n                        }\n                    });\n                    index++;\n                });\n            }\n        });\n\n        messenger.on(\"preview.viewport\", ({ boxes, viewport }: PreviewViewportData) => {\n            const iframeBox = this.getIframeBox();\n\n            this.editor.updateEditor(state => {\n                state.viewport = {\n                    ...viewport,\n                    top: iframeBox.top,\n                    left: iframeBox.left\n                };\n\n                state.boxes = {\n                    preview: boxes,\n                    editor: this.mapCoordinatesToEditorSpace(state.viewport, boxes)\n                };\n            });\n        });\n\n        messenger.on(\"preview.component.register\", (component: ComponentManifest) => {\n            this.editor.updateEditor(state => {\n                if (!state.components) {\n                    state.components = {};\n                }\n                state.components[component.name] = {\n                    ...component,\n                    image: component.image ?? defaultImage,\n                    tags: component.tags ?? []\n                };\n            });\n        });\n\n        messenger.on(\"preview.componentGroup.register\", (group: SerializedComponentGroup) => {\n            this.editor.updateEditor(state => {\n                if (!state.componentGroups) {\n                    state.componentGroups = {};\n                }\n                state.componentGroups[group.name] = group;\n            });\n        });\n\n        messenger.on(\"preview.element.click\", ({ id }) => {\n            this.editor.updateEditor(state => {\n                state.selectedElement = id;\n            });\n        });\n\n        messenger.on(\"preview.mouse.move\", ({ x, y }) => {\n            const iframeBox = this.getIframeBox();\n            const globalX = x + iframeBox.left;\n            const globalY = y + iframeBox.top;\n\n            mouseTracker.setPosition(globalX, globalY);\n        });\n    }\n\n    private getIframeBox() {\n        const iframe = document.getElementById(\"preview-iframe\");\n        if (!iframe) {\n            return {\n                top: 0,\n                left: 0,\n                width: 0,\n                height: 0\n            };\n        }\n\n        const iframeRect = iframe.getBoundingClientRect();\n\n        return {\n            top: iframeRect.top,\n            left: iframeRect.left,\n            width: iframeRect.width,\n            height: iframeRect.height\n        };\n    }\n\n    private mapCoordinatesToEditorSpace(\n        viewport: EditorViewportInfo,\n        boxes: PreviewViewportData[\"boxes\"]\n    ) {\n        const newBoxes: BoxesData = {};\n\n        for (const key in boxes) {\n            const box = boxes[key];\n            newBoxes[key] = {\n                ...box,\n                top: box.top + viewport.top,\n                left: box.left + viewport.left\n            };\n        }\n\n        return newBoxes;\n    }\n\n    private getMessenger(): Messenger {\n        return this.messenger!;\n    }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,7 +1,11 @@
 import { useMemo } from "react";
+import { useTenancy } from "@webiny/app-tenancy";
 import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument";
 import { usePreviewDomain } from "./usePreviewDomain";
 export const useIframeUrl = () => {
+  const {
+    tenant
+  } = useTenancy();
   const {
     previewDomain
   } = usePreviewDomain();
@@ -13,17 +17,18 @@ export const useIframeUrl = () => {
       return null;
     }
     const newUrl = new URL(`${previewDomain}${path}`);
-    addSearchParamsFromDocument(newUrl, id, documentType);
+    addSearchParamsFromDocument(tenant, newUrl, id, documentType);
     return newUrl.toString();
   }, [previewDomain, id, path, documentType]);
 };
-function addSearchParamsFromDocument(url, id, documentType) {
+function addSearchParamsFromDocument(tenant, url, id, documentType) {
   const searchParams = url.searchParams;
   searchParams.set("wb.editing", "true");
   searchParams.set("wb.type", documentType);
   searchParams.set("wb.id", id);
   searchParams.set("wb.path", url.pathname);
   searchParams.set("wb.referrer", window.location.origin);
+  searchParams.set("wb.tenant", tenant);
 }
 
 //# sourceMappingURL=useIframeUrl.js.map

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

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