@webiny/app-website-builder 6.3.0-beta.4 → 6.4.0-beta.0

package/BaseEditor/config/TopBar/TopBar.js

@@ -1,49 +1,43 @@
-import React from "react";
-import { makeDecoratable } from "@webiny/app-admin";
-import { OptionsMenuItem, OptionsMenuLink } from "@webiny/app-admin";
-import { Element as BaseElement } from "../Element.js";
-import { Elements as BaseElements } from "../Elements.js";
+import react from "react";
+import { OptionsMenuItem, OptionsMenuLink, makeDecoratable } from "@webiny/app-admin";
+import { Element } from "../Element.js";
+import { Elements } from "../Elements.js";
 import { Divider } from "./Divider.js";
 import { Layout } from "./Layout.js";
 import { createGetId } from "../createGetId.js";
 const SCOPE = "topBar";
-const BaseTopBar = () => {
-  return /*#__PURE__*/React.createElement(Layout, null);
-};
+const BaseTopBar = ()=>/*#__PURE__*/ react.createElement(Layout, null);
 const getElementId = createGetId(SCOPE)();
-const Element = makeDecoratable("TopBarElement", props => {
-  return /*#__PURE__*/React.createElement(BaseElement, Object.assign({}, props, {
-    scope: SCOPE,
-    id: getElementId(props.name),
-    before: props.before ? getElementId(props.before) : undefined,
-    after: props.after ? getElementId(props.after) : undefined
-  }));
-});
-const Action = makeDecoratable("TopBarAction", props => {
-  return /*#__PURE__*/React.createElement(Element, Object.assign({}, props, {
-    group: "actions"
-  }));
-});
-const BaseDropdownAction = makeDecoratable("TopBarDropdownAction", props => {
-  return /*#__PURE__*/React.createElement(Element, Object.assign({}, props, {
-    group: "dropdownActions"
-  }));
-});
-const Elements = makeDecoratable("TopBarElements", props => {
-  return /*#__PURE__*/React.createElement(BaseElements, Object.assign({}, props, {
-    scope: SCOPE
-  }));
-});
-export const TopBar = Object.assign(BaseTopBar, {
-  Element,
-  Elements,
-  Layout,
-  Divider,
-  Action,
-  DropdownAction: Object.assign(BaseDropdownAction, {
-    MenuItem: OptionsMenuItem,
-    MenuLink: OptionsMenuLink
-  })
+const TopBar_Element = makeDecoratable("TopBarElement", (props)=>/*#__PURE__*/ react.createElement(Element, {
+        ...props,
+        scope: SCOPE,
+        id: getElementId(props.name),
+        before: props.before ? getElementId(props.before) : void 0,
+        after: props.after ? getElementId(props.after) : void 0
+    }));
+const Action = makeDecoratable("TopBarAction", (props)=>/*#__PURE__*/ react.createElement(TopBar_Element, {
+        ...props,
+        group: "actions"
+    }));
+const BaseDropdownAction = makeDecoratable("TopBarDropdownAction", (props)=>/*#__PURE__*/ react.createElement(TopBar_Element, {
+        ...props,
+        group: "dropdownActions"
+    }));
+const TopBar_Elements = makeDecoratable("TopBarElements", (props)=>/*#__PURE__*/ react.createElement(Elements, {
+        ...props,
+        scope: SCOPE
+    }));
+const TopBar = Object.assign(BaseTopBar, {
+    Element: TopBar_Element,
+    Elements: TopBar_Elements,
+    Layout: Layout,
+    Divider: Divider,
+    Action: Action,
+    DropdownAction: Object.assign(BaseDropdownAction, {
+        MenuItem: OptionsMenuItem,
+        MenuLink: OptionsMenuLink
+    })
 });
+export { TopBar };
 
 //# sourceMappingURL=TopBar.js.map

package/BaseEditor/config/TopBar/TopBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","OptionsMenuItem","OptionsMenuLink","Element","BaseElement","Elements","BaseElements","Divider","Layout","createGetId","SCOPE","BaseTopBar","createElement","getElementId","props","Object","assign","scope","id","name","before","undefined","after","Action","group","BaseDropdownAction","TopBar","DropdownAction","MenuItem","MenuLink"],"sources":["TopBar.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport { OptionsMenuItem, OptionsMenuLink } from \"@webiny/app-admin\";\nimport type { ElementProps as BaseElementProps } from \"../Element.js\";\nimport { Element as BaseElement } from \"../Element.js\";\nimport type { ElementsProps as BaseElementsProps } from \"../Elements.js\";\nimport { Elements as BaseElements } from \"../Elements.js\";\nimport { Divider } from \"./Divider.js\";\nimport { Layout } from \"./Layout.js\";\nimport { createGetId } from \"../createGetId.js\";\n\nconst SCOPE = \"topBar\";\n\nconst BaseTopBar = () => {\n    return <Layout />;\n};\n\nconst getElementId = createGetId(SCOPE)();\n\nexport type ElementProps = Omit<BaseElementProps, \"scope\" | \"id\">;\n\nconst Element = makeDecoratable(\"TopBarElement\", (props: ElementProps) => {\n    return (\n        <BaseElement\n            {...props}\n            scope={SCOPE}\n            id={getElementId(props.name)}\n            before={props.before ? getElementId(props.before) : undefined}\n            after={props.after ? getElementId(props.after) : undefined}\n        />\n    );\n});\n\nexport type ActionProps = Omit<ElementProps, \"group\">;\n\nconst Action = makeDecoratable(\"TopBarAction\", (props: ActionProps) => {\n    return <Element {...props} group={\"actions\"} />;\n});\n\nexport type DropdownActionProps = Omit<ElementProps, \"group\">;\n\nconst BaseDropdownAction = makeDecoratable(\"TopBarDropdownAction\", (props: DropdownActionProps) => {\n    return <Element {...props} group={\"dropdownActions\"} />;\n});\n\nexport type ElementsProps = Omit<BaseElementsProps, \"scope\">;\n\nconst Elements = makeDecoratable(\"TopBarElements\", (props: ElementsProps) => {\n    return <BaseElements {...props} scope={SCOPE} />;\n});\n\nexport const TopBar = Object.assign(BaseTopBar, {\n    Element,\n    Elements,\n    Layout,\n    Divider,\n    Action,\n    DropdownAction: Object.assign(BaseDropdownAction, {\n        MenuItem: OptionsMenuItem,\n        MenuLink: OptionsMenuLink\n    })\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,mBAAmB;AACnD,SAASC,eAAe,EAAEC,eAAe,QAAQ,mBAAmB;AAEpE,SAASC,OAAO,IAAIC,WAAW;AAE/B,SAASC,QAAQ,IAAIC,YAAY;AACjC,SAASC,OAAO;AAChB,SAASC,MAAM;AACf,SAASC,WAAW;AAEpB,MAAMC,KAAK,GAAG,QAAQ;AAEtB,MAAMC,UAAU,GAAGA,CAAA,KAAM;EACrB,oBAAOZ,KAAA,CAAAa,aAAA,CAACJ,MAAM,MAAE,CAAC;AACrB,CAAC;AAED,MAAMK,YAAY,GAAGJ,WAAW,CAACC,KAAK,CAAC,CAAC,CAAC;AAIzC,MAAMP,OAAO,GAAGH,eAAe,CAAC,eAAe,EAAGc,KAAmB,IAAK;EACtE,oBACIf,KAAA,CAAAa,aAAA,CAACR,WAAW,EAAAW,MAAA,CAAAC,MAAA,KACJF,KAAK;IACTG,KAAK,EAAEP,KAAM;IACbQ,EAAE,EAAEL,YAAY,CAACC,KAAK,CAACK,IAAI,CAAE;IAC7BC,MAAM,EAAEN,KAAK,CAACM,MAAM,GAAGP,YAAY,CAACC,KAAK,CAACM,MAAM,CAAC,GAAGC,SAAU;IAC9DC,KAAK,EAAER,KAAK,CAACQ,KAAK,GAAGT,YAAY,CAACC,KAAK,CAACQ,KAAK,CAAC,GAAGD;EAAU,EAC9D,CAAC;AAEV,CAAC,CAAC;AAIF,MAAME,MAAM,GAAGvB,eAAe,CAAC,cAAc,EAAGc,KAAkB,IAAK;EACnE,oBAAOf,KAAA,CAAAa,aAAA,CAACT,OAAO,EAAAY,MAAA,CAAAC,MAAA,KAAKF,KAAK;IAAEU,KAAK,EAAE;EAAU,EAAE,CAAC;AACnD,CAAC,CAAC;AAIF,MAAMC,kBAAkB,GAAGzB,eAAe,CAAC,sBAAsB,EAAGc,KAA0B,IAAK;EAC/F,oBAAOf,KAAA,CAAAa,aAAA,CAACT,OAAO,EAAAY,MAAA,CAAAC,MAAA,KAAKF,KAAK;IAAEU,KAAK,EAAE;EAAkB,EAAE,CAAC;AAC3D,CAAC,CAAC;AAIF,MAAMnB,QAAQ,GAAGL,eAAe,CAAC,gBAAgB,EAAGc,KAAoB,IAAK;EACzE,oBAAOf,KAAA,CAAAa,aAAA,CAACN,YAAY,EAAAS,MAAA,CAAAC,MAAA,KAAKF,KAAK;IAAEG,KAAK,EAAEP;EAAM,EAAE,CAAC;AACpD,CAAC,CAAC;AAEF,OAAO,MAAMgB,MAAM,GAAGX,MAAM,CAACC,MAAM,CAACL,UAAU,EAAE;EAC5CR,OAAO;EACPE,QAAQ;EACRG,MAAM;EACND,OAAO;EACPgB,MAAM;EACNI,cAAc,EAAEZ,MAAM,CAACC,MAAM,CAACS,kBAAkB,EAAE;IAC9CG,QAAQ,EAAE3B,eAAe;IACzB4B,QAAQ,EAAE3B;EACd,CAAC;AACL,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/config/TopBar/TopBar.js","sources":["../../../../src/BaseEditor/config/TopBar/TopBar.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport { OptionsMenuItem, OptionsMenuLink } from \"@webiny/app-admin\";\nimport type { ElementProps as BaseElementProps } from \"../Element.js\";\nimport { Element as BaseElement } from \"../Element.js\";\nimport type { ElementsProps as BaseElementsProps } from \"../Elements.js\";\nimport { Elements as BaseElements } from \"../Elements.js\";\nimport { Divider } from \"./Divider.js\";\nimport { Layout } from \"./Layout.js\";\nimport { createGetId } from \"../createGetId.js\";\n\nconst SCOPE = \"topBar\";\n\nconst BaseTopBar = () => {\n    return <Layout />;\n};\n\nconst getElementId = createGetId(SCOPE)();\n\nexport type ElementProps = Omit<BaseElementProps, \"scope\" | \"id\">;\n\nconst Element = makeDecoratable(\"TopBarElement\", (props: ElementProps) => {\n    return (\n        <BaseElement\n            {...props}\n            scope={SCOPE}\n            id={getElementId(props.name)}\n            before={props.before ? getElementId(props.before) : undefined}\n            after={props.after ? getElementId(props.after) : undefined}\n        />\n    );\n});\n\nexport type ActionProps = Omit<ElementProps, \"group\">;\n\nconst Action = makeDecoratable(\"TopBarAction\", (props: ActionProps) => {\n    return <Element {...props} group={\"actions\"} />;\n});\n\nexport type DropdownActionProps = Omit<ElementProps, \"group\">;\n\nconst BaseDropdownAction = makeDecoratable(\"TopBarDropdownAction\", (props: DropdownActionProps) => {\n    return <Element {...props} group={\"dropdownActions\"} />;\n});\n\nexport type ElementsProps = Omit<BaseElementsProps, \"scope\">;\n\nconst Elements = makeDecoratable(\"TopBarElements\", (props: ElementsProps) => {\n    return <BaseElements {...props} scope={SCOPE} />;\n});\n\nexport const TopBar = Object.assign(BaseTopBar, {\n    Element,\n    Elements,\n    Layout,\n    Divider,\n    Action,\n    DropdownAction: Object.assign(BaseDropdownAction, {\n        MenuItem: OptionsMenuItem,\n        MenuLink: OptionsMenuLink\n    })\n});\n"],"names":["SCOPE","BaseTopBar","Layout","getElementId","createGetId","Element","makeDecoratable","props","BaseElement","undefined","Action","BaseDropdownAction","Elements","BaseElements","TopBar","Object","Divider","OptionsMenuItem","OptionsMenuLink"],"mappings":";;;;;;;AAWA,MAAMA,QAAQ;AAEd,MAAMC,aAAa,IACR,WAAP,GAAO,oBAACC,QAAMA;AAGlB,MAAMC,eAAeC,YAAYJ;AAIjC,MAAMK,iBAAUC,gBAAgB,iBAAiB,CAACC,QACvC,WAAP,GACI,oBAACC,SAAWA;QACP,GAAGD,KAAK;QACT,OAAOP;QACP,IAAIG,aAAaI,MAAM,IAAI;QAC3B,QAAQA,MAAM,MAAM,GAAGJ,aAAaI,MAAM,MAAM,IAAIE;QACpD,OAAOF,MAAM,KAAK,GAAGJ,aAAaI,MAAM,KAAK,IAAIE;;AAO7D,MAAMC,SAASJ,gBAAgB,gBAAgB,CAACC,QACrC,WAAP,GAAO,oBAACF,gBAAOA;QAAE,GAAGE,KAAK;QAAE,OAAO;;AAKtC,MAAMI,qBAAqBL,gBAAgB,wBAAwB,CAACC,QACzD,WAAP,GAAO,oBAACF,gBAAOA;QAAE,GAAGE,KAAK;QAAE,OAAO;;AAKtC,MAAMK,kBAAWN,gBAAgB,kBAAkB,CAACC,QACzC,WAAP,GAAO,oBAACM,UAAYA;QAAE,GAAGN,KAAK;QAAE,OAAOP;;AAGpC,MAAMc,SAASC,OAAO,MAAM,CAACd,YAAY;IAC5CI,SAAAA;IACAO,UAAAA;IACAV,QAAMA;IACNc,SAAOA;IACPN,QAAAA;IACA,gBAAgBK,OAAO,MAAM,CAACJ,oBAAoB;QAC9C,UAAUM;QACV,UAAUC;IACd;AACJ"}

package/BaseEditor/config/createGetId.js

@@ -1,5 +1,8 @@
-export const createGetId = scope => prefix => name => {
-  return [scope, prefix, name].filter(Boolean).join(":");
-};
+const createGetId = (scope)=>(prefix)=>(name)=>[
+                scope,
+                prefix,
+                name
+            ].filter(Boolean).join(":");
+export { createGetId };
 
 //# sourceMappingURL=createGetId.js.map

package/BaseEditor/config/createGetId.js.map

@@ -1 +1 @@
-{"version":3,"names":["createGetId","scope","prefix","name","filter","Boolean","join"],"sources":["createGetId.ts"],"sourcesContent":["export const createGetId = (scope: string) => (prefix?: string) => (name: string) => {\n    return [scope, prefix, name].filter(Boolean).join(\":\");\n};\n"],"mappings":"AAAA,OAAO,MAAMA,WAAW,GAAIC,KAAa,IAAMC,MAAe,IAAMC,IAAY,IAAK;EACjF,OAAO,CAACF,KAAK,EAAEC,MAAM,EAAEC,IAAI,CAAC,CAACC,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;AAC1D,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/config/createGetId.js","sources":["../../../src/BaseEditor/config/createGetId.ts"],"sourcesContent":["export const createGetId = (scope: string) => (prefix?: string) => (name: string) => {\n    return [scope, prefix, name].filter(Boolean).join(\":\");\n};\n"],"names":["createGetId","scope","prefix","name","Boolean"],"mappings":"AAAO,MAAMA,cAAc,CAACC,QAAkB,CAACC,SAAoB,CAACC,OACzD;gBAACF;gBAAOC;gBAAQC;aAAK,CAAC,MAAM,CAACC,SAAS,IAAI,CAAC"}

package/BaseEditor/config/index.js

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

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import react, { useEffect, useState } from "react";
 import { BreakpointSelector } from "./BreakpointSelector.js";
 import { PreviewInNewTab } from "./PreviewInNewTab.js";
 import { OpenInNewTab } from "./OpenInNewTab.js";
@@ -6,30 +6,30 @@ import { RefreshPreview } from "./RefreshPreview.js";
 import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument.js";
 import { PreviewDomain } from "./PreviewDomain.js";
 import { usePreviewDomain } from "../usePreviewDomain.js";
-export const AddressBar = () => {
-  const path = useSelectFromDocument(document => document.properties.path);
-  const {
-    previewDomain
-  } = usePreviewDomain();
-  const [addressBarUrl, setAddressBarUrl] = useState("");
-  useEffect(() => {
-    if (!previewDomain) {
-      return;
-    }
-    setAddressBarUrl(`${previewDomain}${path}`);
-  }, [path, previewDomain]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "w-full h-[49px] flex flex-row p-sm bg-neutral-base border-solid border-b-sm border-neutral-dimmed gap-sm",
-    "data-affects-preview": "height"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "relative flex-auto"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "w-full absolute -top-px py-xs-plus pl-xl border-sm text-md peer cursor-not-allowed rounded-md border-neutral-subtle text-neutral-muted bg-neutral-disabled text-neutral-disabled"
-  }, /*#__PURE__*/React.createElement(PreviewDomain, null), addressBarUrl), /*#__PURE__*/React.createElement("div", {
-    className: "absolute right-0 top-0"
-  }, /*#__PURE__*/React.createElement(RefreshPreview, null), /*#__PURE__*/React.createElement(PreviewInNewTab, null), /*#__PURE__*/React.createElement(OpenInNewTab, null))), /*#__PURE__*/React.createElement("div", {
-    className: "flex-none"
-  }, /*#__PURE__*/React.createElement(BreakpointSelector, null)));
+const AddressBar = ()=>{
+    const path = useSelectFromDocument((document)=>document.properties.path);
+    const { previewDomain } = usePreviewDomain();
+    const [addressBarUrl, setAddressBarUrl] = useState("");
+    useEffect(()=>{
+        if (!previewDomain) return;
+        setAddressBarUrl(`${previewDomain}${path}`);
+    }, [
+        path,
+        previewDomain
+    ]);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "w-full h-[49px] flex flex-row p-sm bg-neutral-base border-solid border-b-sm border-neutral-dimmed gap-sm",
+        "data-affects-preview": "height"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "relative flex-auto"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "w-full absolute -top-px py-xs-plus pl-xl border-sm text-md peer cursor-not-allowed rounded-md border-neutral-subtle text-neutral-muted bg-neutral-disabled text-neutral-disabled"
+    }, /*#__PURE__*/ react.createElement(PreviewDomain, null), addressBarUrl), /*#__PURE__*/ react.createElement("div", {
+        className: "absolute right-0 top-0"
+    }, /*#__PURE__*/ react.createElement(RefreshPreview, null), /*#__PURE__*/ react.createElement(PreviewInNewTab, null), /*#__PURE__*/ react.createElement(OpenInNewTab, null))), /*#__PURE__*/ react.createElement("div", {
+        className: "flex-none"
+    }, /*#__PURE__*/ react.createElement(BreakpointSelector, null)));
 };
+export { AddressBar };
 
 //# sourceMappingURL=AddressBar.js.map

package/BaseEditor/defaultConfig/Content/AddressBar/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.js\";\nimport { PreviewInNewTab } from \"./PreviewInNewTab.js\";\nimport { OpenInNewTab } from \"./OpenInNewTab.js\";\nimport { RefreshPreview } from \"./RefreshPreview.js\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { PreviewDomain } from \"./PreviewDomain.js\";\nimport { usePreviewDomain } from \"../usePreviewDomain.js\";\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\n            className=\"w-full h-[49px] flex flex-row p-sm bg-neutral-base border-solid border-b-sm border-neutral-dimmed gap-sm\"\n            data-affects-preview={\"height\"}\n        >\n            <div className={\"relative flex-auto\"}>\n                <div\n                    className={\n                        \"w-full absolute -top-px py-xs-plus pl-xl border-sm text-md peer cursor-not-allowed rounded-md border-neutral-subtle text-neutral-muted bg-neutral-disabled text-neutral-disabled\"\n                    }\n                >\n                    <PreviewDomain />\n                    {addressBarUrl}\n                </div>\n                <div className={\"absolute right-0 top-0\"}>\n                    <RefreshPreview />\n                    <PreviewInNewTab />\n                    <OpenInNewTab />\n                </div>\n            </div>\n            <div className={\"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;IACIC,SAAS,EAAC,0GAA0G;IACpH,wBAAsB;EAAS,gBAE/BlB,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAE;EAAqB,gBACjClB,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;EAAyB,gBACrClB,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;EAAY,gBACxBlB,KAAA,CAAAiB,aAAA,CAACd,kBAAkB,MAAE,CACpB,CACJ,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/AddressBar/AddressBar.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/AddressBar/AddressBar.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { BreakpointSelector } from \"./BreakpointSelector.js\";\nimport { PreviewInNewTab } from \"./PreviewInNewTab.js\";\nimport { OpenInNewTab } from \"./OpenInNewTab.js\";\nimport { RefreshPreview } from \"./RefreshPreview.js\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { PreviewDomain } from \"./PreviewDomain.js\";\nimport { usePreviewDomain } from \"../usePreviewDomain.js\";\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\n            className=\"w-full h-[49px] flex flex-row p-sm bg-neutral-base border-solid border-b-sm border-neutral-dimmed gap-sm\"\n            data-affects-preview={\"height\"}\n        >\n            <div className={\"relative flex-auto\"}>\n                <div\n                    className={\n                        \"w-full absolute -top-px py-xs-plus pl-xl border-sm text-md peer cursor-not-allowed rounded-md border-neutral-subtle text-neutral-muted bg-neutral-disabled text-neutral-disabled\"\n                    }\n                >\n                    <PreviewDomain />\n                    {addressBarUrl}\n                </div>\n                <div className={\"absolute right-0 top-0\"}>\n                    <RefreshPreview />\n                    <PreviewInNewTab />\n                    <OpenInNewTab />\n                </div>\n            </div>\n            <div className={\"flex-none\"}>\n                <BreakpointSelector />\n            </div>\n        </div>\n    );\n};\n"],"names":["AddressBar","path","useSelectFromDocument","document","previewDomain","usePreviewDomain","addressBarUrl","setAddressBarUrl","useState","useEffect","PreviewDomain","RefreshPreview","PreviewInNewTab","OpenInNewTab","BreakpointSelector"],"mappings":";;;;;;;;AASO,MAAMA,aAAa;IACtB,MAAMC,OAAOC,sBAAsBC,CAAAA,WAAYA,SAAS,UAAU,CAAC,IAAI;IAEvE,MAAM,EAAEC,aAAa,EAAE,GAAGC;IAC1B,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,SAAiB;IAE3DC,UAAU;QACN,IAAI,CAACL,eACD;QAGJG,iBAAiB,GAAGH,gBAAgBH,MAAM;IAC9C,GAAG;QAACA;QAAMG;KAAc;IAExB,OAAO,WAAP,GACI,oBAAC;QACG,WAAU;QACV,wBAAsB;qBAEtB,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QACG,WACI;qBAGJ,oBAACM,eAAaA,OACbJ,gBAAAA,WAAAA,GAEL,oBAAC;QAAI,WAAW;qBACZ,oBAACK,gBAAcA,OAAAA,WAAAA,GACf,oBAACC,iBAAeA,OAAAA,WAAAA,GAChB,oBAACC,cAAYA,SAAAA,WAAAA,GAGrB,oBAAC;QAAI,WAAW;qBACZ,oBAACC,oBAAkBA;AAInC"}

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

@@ -1,38 +1,33 @@
-import React from "react";
-import classNames from "classnames";
-import { IconButton, Tooltip, Text, Heading } from "@webiny/admin-ui";
+import react from "react";
+import classnames from "classnames";
+import { Heading, IconButton, Text, Tooltip } from "@webiny/admin-ui";
 import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
 import { InlineSvg } from "../../Toolbar/InsertElements/InlineSvg.js";
-export const BreakpointSelector = () => {
-  const {
-    breakpoint,
-    breakpoints,
-    setBreakpoint
-  } = useBreakpoint();
-  return /*#__PURE__*/React.createElement("div", {
-    className: "align-right bg-neutral-light rounded-md"
-  }, breakpoints.map(bp => {
-    return /*#__PURE__*/React.createElement(Tooltip, {
-      key: bp.name,
-      content: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Heading, {
-        level: 5
-      }, bp.title), /*#__PURE__*/React.createElement(Text, {
-        size: "md"
-      }, bp.description)),
-      side: "bottom",
-      className: classNames("action-wrapper", {
-        active: bp === breakpoint
-      }),
-      trigger: /*#__PURE__*/React.createElement(IconButton, {
-        size: "md",
-        icon: /*#__PURE__*/React.createElement(InlineSvg, {
-          src: bp.icon
-        }),
-        variant: breakpoint.name === bp.name ? "tertiary" : "ghost",
-        onClick: () => setBreakpoint(bp.name)
-      })
-    });
-  }));
+const BreakpointSelector = ()=>{
+    const { breakpoint, breakpoints, setBreakpoint } = useBreakpoint();
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "align-right bg-neutral-light rounded-md"
+    }, breakpoints.map((bp)=>/*#__PURE__*/ react.createElement(Tooltip, {
+            key: bp.name,
+            content: /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Heading, {
+                level: 5
+            }, bp.title), /*#__PURE__*/ react.createElement(Text, {
+                size: "md"
+            }, bp.description)),
+            side: "bottom",
+            className: classnames("action-wrapper", {
+                active: bp === breakpoint
+            }),
+            trigger: /*#__PURE__*/ react.createElement(IconButton, {
+                size: "md",
+                icon: /*#__PURE__*/ react.createElement(InlineSvg, {
+                    src: bp.icon
+                }),
+                variant: breakpoint.name === bp.name ? "tertiary" : "ghost",
+                onClick: ()=>setBreakpoint(bp.name)
+            })
+        })));
 };
+export { BreakpointSelector };
 
 //# sourceMappingURL=BreakpointSelector.js.map

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

@@ -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.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":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/AddressBar/BreakpointSelector.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/AddressBar/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"],"names":["BreakpointSelector","breakpoint","breakpoints","setBreakpoint","useBreakpoint","bp","Tooltip","Heading","Text","classNames","IconButton","InlineSvg"],"mappings":";;;;;AAMO,MAAMA,qBAAqB;IAC9B,MAAM,EAAEC,UAAU,EAAEC,WAAW,EAAEC,aAAa,EAAE,GAAGC;IAEnD,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXF,YAAY,GAAG,CAACG,CAAAA,KACN,WAAP,GACI,oBAACC,SAAOA;YACJ,KAAKD,GAAG,IAAI;YACZ,uBACI,oBAAC,2BACG,oBAACE,SAAOA;gBAAC,OAAO;eAAIF,GAAG,KAAK,iBAC5B,oBAACG,MAAIA;gBAAC,MAAK;eAAMH,GAAG,WAAW;YAGvC,MAAK;YACL,WAAWI,WAAW,kBAAkB;gBACpC,QAAQJ,OAAOJ;YACnB;YACA,uBACI,oBAACS,YAAUA;gBACP,MAAM;gBACN,oBAAM,oBAACC,WAASA;oBAAC,KAAKN,GAAG,IAAI;;gBAC7B,SAASJ,WAAW,IAAI,KAAKI,GAAG,IAAI,GAAG,aAAa;gBACpD,SAAS,IAAMF,cAAcE,GAAG,IAAI;;;AAQpE"}

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

@@ -1,23 +1,24 @@
-import React from "react";
+import react from "react";
 import { IconButton, Text, Tooltip } from "@webiny/admin-ui";
-import { ReactComponent as NewTabIcon } from "@webiny/icons/open_in_new.svg";
+import { ReactComponent } from "@webiny/icons/open_in_new.svg";
 import { usePreviewLink } from "./usePreviewLink.js";
-export const OpenInNewTab = () => {
-  const link = usePreviewLink();
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    content: /*#__PURE__*/React.createElement(Text, {
-      size: "md"
-    }, "Preview page in a new tab"),
-    side: "bottom",
-    trigger: /*#__PURE__*/React.createElement(IconButton, {
-      icon: /*#__PURE__*/React.createElement(NewTabIcon, null),
-      size: "md",
-      onClick: () => {
-        window.open(link, "_blank");
-      },
-      variant: "ghost"
-    })
-  });
+const OpenInNewTab = ()=>{
+    const link = usePreviewLink();
+    return /*#__PURE__*/ react.createElement(Tooltip, {
+        content: /*#__PURE__*/ react.createElement(Text, {
+            size: "md"
+        }, "Preview page in a new tab"),
+        side: "bottom",
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            size: "md",
+            onClick: ()=>{
+                window.open(link, "_blank");
+            },
+            variant: "ghost"
+        })
+    });
 };
+export { OpenInNewTab };
 
 //# sourceMappingURL=OpenInNewTab.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","IconButton","Text","Tooltip","ReactComponent","NewTabIcon","usePreviewLink","OpenInNewTab","link","createElement","content","size","side","trigger","icon","onClick","window","open","variant"],"sources":["OpenInNewTab.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconButton, Text, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as NewTabIcon } from \"@webiny/icons/open_in_new.svg\";\nimport { usePreviewLink } from \"./usePreviewLink.js\";\n\nexport const OpenInNewTab = () => {\n    const link = usePreviewLink();\n\n    return (\n        <Tooltip\n            content={<Text size=\"md\">Preview page in a new tab</Text>}\n            side=\"bottom\"\n            trigger={\n                <IconButton\n                    icon={<NewTabIcon />}\n                    size=\"md\"\n                    onClick={() => {\n                        window.open(link, \"_blank\");\n                    }}\n                    variant={\"ghost\"}\n                />\n            }\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,EAAEC,OAAO,QAAQ,kBAAkB;AAC5D,SAASC,cAAc,IAAIC,UAAU,QAAQ,+BAA+B;AAC5E,SAASC,cAAc;AAEvB,OAAO,MAAMC,YAAY,GAAGA,CAAA,KAAM;EAC9B,MAAMC,IAAI,GAAGF,cAAc,CAAC,CAAC;EAE7B,oBACIN,KAAA,CAAAS,aAAA,CAACN,OAAO;IACJO,OAAO,eAAEV,KAAA,CAAAS,aAAA,CAACP,IAAI;MAACS,IAAI,EAAC;IAAI,GAAC,2BAA+B,CAAE;IAC1DC,IAAI,EAAC,QAAQ;IACbC,OAAO,eACHb,KAAA,CAAAS,aAAA,CAACR,UAAU;MACPa,IAAI,eAAEd,KAAA,CAAAS,aAAA,CAACJ,UAAU,MAAE,CAAE;MACrBM,IAAI,EAAC,IAAI;MACTI,OAAO,EAAEA,CAAA,KAAM;QACXC,MAAM,CAACC,IAAI,CAACT,IAAI,EAAE,QAAQ,CAAC;MAC/B,CAAE;MACFU,OAAO,EAAE;IAAQ,CACpB;EACJ,CACJ,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/AddressBar/OpenInNewTab.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/AddressBar/OpenInNewTab.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconButton, Text, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as NewTabIcon } from \"@webiny/icons/open_in_new.svg\";\nimport { usePreviewLink } from \"./usePreviewLink.js\";\n\nexport const OpenInNewTab = () => {\n    const link = usePreviewLink();\n\n    return (\n        <Tooltip\n            content={<Text size=\"md\">Preview page in a new tab</Text>}\n            side=\"bottom\"\n            trigger={\n                <IconButton\n                    icon={<NewTabIcon />}\n                    size=\"md\"\n                    onClick={() => {\n                        window.open(link, \"_blank\");\n                    }}\n                    variant={\"ghost\"}\n                />\n            }\n        />\n    );\n};\n"],"names":["OpenInNewTab","link","usePreviewLink","Tooltip","Text","IconButton","NewTabIcon","window"],"mappings":";;;;AAKO,MAAMA,eAAe;IACxB,MAAMC,OAAOC;IAEb,OAAO,WAAP,GACI,oBAACC,SAAOA;QACJ,uBAAS,oBAACC,MAAIA;YAAC,MAAK;WAAK;QACzB,MAAK;QACL,uBACI,oBAACC,YAAUA;YACP,oBAAM,oBAACC,gBAAUA;YACjB,MAAK;YACL,SAAS;gBACLC,OAAO,IAAI,CAACN,MAAM;YACtB;YACA,SAAS;;;AAK7B"}

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

@@ -1,86 +1,81 @@
-import React, { useCallback, useEffect, useState } from "react";
-import { ReactComponent as GlobeIcon } from "@webiny/icons/language.svg";
-import { Button, DropdownMenu, IconButton, Separator, Input, cn } from "@webiny/admin-ui";
+import react, { useCallback, useEffect, useState } from "react";
+import { ReactComponent } from "@webiny/icons/language.svg";
+import { Button, DropdownMenu, IconButton, Input, Separator, cn } from "@webiny/admin-ui";
 import { usePreviewDomain } from "../usePreviewDomain.js";
 import { Bind, Form } from "@webiny/form";
 import { validation } from "@webiny/validation";
 import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
 import { Commands } from "../../../index.js";
-export const PreviewDomain = () => {
-  const editor = useDocumentEditor();
-  const [isOpen, setIsOpen] = useState(false);
-  const {
-    previewDomain,
-    isOverridden,
-    unsetPreviewDomain,
-    setPreviewDomain
-  } = usePreviewDomain();
-  const commitValue = useCallback(data => {
-    const value = data.previewDomain;
-    if (value.length > 0) {
-      setPreviewDomain(value);
-    } else {
-      unsetPreviewDomain();
-    }
-    setIsOpen(false);
-  }, []);
-  const resetDomain = useCallback(() => {
-    unsetPreviewDomain();
-    setIsOpen(false);
-  }, []);
-  useEffect(() => {
-    if (!previewDomain) {
-      return;
-    }
-    editor.executeCommand(Commands.RefreshPreview);
-  }, [previewDomain]);
-  const classNames = cn("absolute left-0 top-0", isOverridden ? "fill-accent-default" : "fill-neutral-disabled");
-  return /*#__PURE__*/React.createElement(DropdownMenu, {
-    open: isOpen,
-    align: "center",
-    side: "bottom",
-    className: "shadow-lg",
-    onOpenChange: setIsOpen,
-    trigger: /*#__PURE__*/React.createElement(IconButton, {
-      icon: /*#__PURE__*/React.createElement(GlobeIcon, null),
-      size: "md",
-      onClick: () => {},
-      variant: "ghost",
-      className: classNames
-    })
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "p-sm text-sm",
-    style: {
-      width: 300
-    }
-  }, /*#__PURE__*/React.createElement(Form, {
-    data: {
-      previewDomain
-    },
-    onSubmit: commitValue
-  }, form => /*#__PURE__*/React.createElement(Bind, {
-    name: "previewDomain",
-    validators: [validation.create("url")]
-  }, /*#__PURE__*/React.createElement(Input, {
-    autoFocus: true,
-    label: "Preview Domain",
-    description: /*#__PURE__*/React.createElement(React.Fragment, null, "Set a custom preview domain for your session.", /*#__PURE__*/React.createElement("br", null), "This doesn't affect other users."),
-    size: "md",
-    onBlur: () => form.submit(),
-    onEnter: () => form.submit(),
-    note: `Hit "Enter" or click outside the menu to apply.`
-  }))), isOverridden ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Separator, {
-    variant: "dimmed",
-    margin: "lg"
-  }), /*#__PURE__*/React.createElement(Button, {
-    variant: "primary",
-    onClick: resetDomain,
-    text: "Reset Domain",
-    size: "sm"
-  }), /*#__PURE__*/React.createElement(Separator, {
-    variant: "dimmed",
-    margin: "lg"
-  }), "Resetting will revert to using the default preview domain.") : null));
+const PreviewDomain = ()=>{
+    const editor = useDocumentEditor();
+    const [isOpen, setIsOpen] = useState(false);
+    const { previewDomain, isOverridden, unsetPreviewDomain, setPreviewDomain } = usePreviewDomain();
+    const commitValue = useCallback((data)=>{
+        const value = data.previewDomain;
+        if (value.length > 0) setPreviewDomain(value);
+        else unsetPreviewDomain();
+        setIsOpen(false);
+    }, []);
+    const resetDomain = useCallback(()=>{
+        unsetPreviewDomain();
+        setIsOpen(false);
+    }, []);
+    useEffect(()=>{
+        if (!previewDomain) return;
+        editor.executeCommand(Commands.RefreshPreview);
+    }, [
+        previewDomain
+    ]);
+    const classNames = cn("absolute left-0 top-0", isOverridden ? "fill-accent-default" : "fill-neutral-disabled");
+    return /*#__PURE__*/ react.createElement(DropdownMenu, {
+        open: isOpen,
+        align: "center",
+        side: "bottom",
+        className: "shadow-lg",
+        onOpenChange: setIsOpen,
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            size: "md",
+            onClick: ()=>{},
+            variant: "ghost",
+            className: classNames
+        })
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "p-sm text-sm",
+        style: {
+            width: 300
+        }
+    }, /*#__PURE__*/ react.createElement(Form, {
+        data: {
+            previewDomain
+        },
+        onSubmit: commitValue
+    }, (form)=>/*#__PURE__*/ react.createElement(Bind, {
+            name: "previewDomain",
+            validators: [
+                validation.create("url")
+            ]
+        }, /*#__PURE__*/ react.createElement(Input, {
+            autoFocus: true,
+            label: "Preview Domain",
+            description: /*#__PURE__*/ react.createElement(react.Fragment, null, "Set a custom preview domain for your session.", /*#__PURE__*/ react.createElement("br", null), "This doesn't affect other users."),
+            size: "md",
+            onBlur: ()=>form.submit(),
+            onEnter: ()=>form.submit(),
+            note: 'Hit "Enter" or click outside the menu to apply.'
+        }))), isOverridden ? /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Separator, {
+        variant: "dimmed",
+        margin: "lg"
+    }), /*#__PURE__*/ react.createElement(Button, {
+        variant: "primary",
+        onClick: resetDomain,
+        text: "Reset Domain",
+        size: "sm"
+    }), /*#__PURE__*/ react.createElement(Separator, {
+        variant: "dimmed",
+        margin: "lg"
+    }), "Resetting will revert to using the default preview domain.") : null));
 };
+export { PreviewDomain };
 
 //# sourceMappingURL=PreviewDomain.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useState","ReactComponent","GlobeIcon","Button","DropdownMenu","IconButton","Separator","Input","cn","usePreviewDomain","Bind","Form","validation","useDocumentEditor","Commands","PreviewDomain","editor","isOpen","setIsOpen","previewDomain","isOverridden","unsetPreviewDomain","setPreviewDomain","commitValue","data","value","length","resetDomain","executeCommand","RefreshPreview","classNames","createElement","open","align","side","className","onOpenChange","trigger","icon","size","onClick","variant","style","width","onSubmit","form","name","validators","create","autoFocus","label","description","Fragment","onBlur","submit","onEnter","note","margin","text"],"sources":["PreviewDomain.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { ReactComponent as GlobeIcon } from \"@webiny/icons/language.svg\";\nimport { Button, DropdownMenu, IconButton, Separator, Input, cn } from \"@webiny/admin-ui\";\nimport { usePreviewDomain } from \"../usePreviewDomain.js\";\nimport type { GenericFormData } from \"@webiny/form\";\nimport { Bind, Form } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\n\nexport const PreviewDomain = () => {\n    const editor = useDocumentEditor();\n    const [isOpen, setIsOpen] = useState(false);\n\n    const { previewDomain, isOverridden, unsetPreviewDomain, setPreviewDomain } =\n        usePreviewDomain();\n\n    const commitValue = useCallback((data: GenericFormData) => {\n        const value = data.previewDomain;\n        if (value.length > 0) {\n            setPreviewDomain(value);\n        } else {\n            unsetPreviewDomain();\n        }\n        setIsOpen(false);\n    }, []);\n\n    const resetDomain = useCallback(() => {\n        unsetPreviewDomain();\n        setIsOpen(false);\n    }, []);\n\n    useEffect(() => {\n        if (!previewDomain) {\n            return;\n        }\n\n        editor.executeCommand(Commands.RefreshPreview);\n    }, [previewDomain]);\n\n    const classNames = cn(\n        \"absolute left-0 top-0\",\n        isOverridden ? \"fill-accent-default\" : \"fill-neutral-disabled\"\n    );\n\n    return (\n        <DropdownMenu\n            open={isOpen}\n            align=\"center\"\n            side=\"bottom\"\n            className={\"shadow-lg\"}\n            onOpenChange={setIsOpen}\n            trigger={\n                <IconButton\n                    icon={<GlobeIcon />}\n                    size=\"md\"\n                    onClick={() => {}}\n                    variant={\"ghost\"}\n                    className={classNames}\n                />\n            }\n        >\n            <div className={\"p-sm text-sm\"} style={{ width: 300 }}>\n                <Form data={{ previewDomain }} onSubmit={commitValue}>\n                    {form => (\n                        <Bind name={\"previewDomain\"} validators={[validation.create(\"url\")]}>\n                            <Input\n                                autoFocus={true}\n                                label={\"Preview Domain\"}\n                                description={\n                                    <>\n                                        Set a custom preview domain for your session.\n                                        <br />\n                                        This doesn&apos;t affect other users.\n                                    </>\n                                }\n                                size={\"md\"}\n                                onBlur={() => form.submit()}\n                                onEnter={() => form.submit()}\n                                note={`Hit \"Enter\" or click outside the menu to apply.`}\n                            />\n                        </Bind>\n                    )}\n                </Form>\n                {isOverridden ? (\n                    <>\n                        <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                        <Button\n                            variant={\"primary\"}\n                            onClick={resetDomain}\n                            text={\"Reset Domain\"}\n                            size={\"sm\"}\n                        />\n                        <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                        Resetting will revert to using the default preview domain.\n                    </>\n                ) : null}\n            </div>\n        </DropdownMenu>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC/D,SAASC,cAAc,IAAIC,SAAS,QAAQ,4BAA4B;AACxE,SAASC,MAAM,EAAEC,YAAY,EAAEC,UAAU,EAAEC,SAAS,EAAEC,KAAK,EAAEC,EAAE,QAAQ,kBAAkB;AACzF,SAASC,gBAAgB;AAEzB,SAASC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AACzC,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,iBAAiB;AAC1B,SAASC,QAAQ;AAEjB,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAM;EAC/B,MAAMC,MAAM,GAAGH,iBAAiB,CAAC,CAAC;EAClC,MAAM,CAACI,MAAM,EAAEC,SAAS,CAAC,GAAGlB,QAAQ,CAAC,KAAK,CAAC;EAE3C,MAAM;IAAEmB,aAAa;IAAEC,YAAY;IAAEC,kBAAkB;IAAEC;EAAiB,CAAC,GACvEb,gBAAgB,CAAC,CAAC;EAEtB,MAAMc,WAAW,GAAGzB,WAAW,CAAE0B,IAAqB,IAAK;IACvD,MAAMC,KAAK,GAAGD,IAAI,CAACL,aAAa;IAChC,IAAIM,KAAK,CAACC,MAAM,GAAG,CAAC,EAAE;MAClBJ,gBAAgB,CAACG,KAAK,CAAC;IAC3B,CAAC,MAAM;MACHJ,kBAAkB,CAAC,CAAC;IACxB;IACAH,SAAS,CAAC,KAAK,CAAC;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMS,WAAW,GAAG7B,WAAW,CAAC,MAAM;IAClCuB,kBAAkB,CAAC,CAAC;IACpBH,SAAS,CAAC,KAAK,CAAC;EACpB,CAAC,EAAE,EAAE,CAAC;EAENnB,SAAS,CAAC,MAAM;IACZ,IAAI,CAACoB,aAAa,EAAE;MAChB;IACJ;IAEAH,MAAM,CAACY,cAAc,CAACd,QAAQ,CAACe,cAAc,CAAC;EAClD,CAAC,EAAE,CAACV,aAAa,CAAC,CAAC;EAEnB,MAAMW,UAAU,GAAGtB,EAAE,CACjB,uBAAuB,EACvBY,YAAY,GAAG,qBAAqB,GAAG,uBAC3C,CAAC;EAED,oBACIvB,KAAA,CAAAkC,aAAA,CAAC3B,YAAY;IACT4B,IAAI,EAAEf,MAAO;IACbgB,KAAK,EAAC,QAAQ;IACdC,IAAI,EAAC,QAAQ;IACbC,SAAS,EAAE,WAAY;IACvBC,YAAY,EAAElB,SAAU;IACxBmB,OAAO,eACHxC,KAAA,CAAAkC,aAAA,CAAC1B,UAAU;MACPiC,IAAI,eAAEzC,KAAA,CAAAkC,aAAA,CAAC7B,SAAS,MAAE,CAAE;MACpBqC,IAAI,EAAC,IAAI;MACTC,OAAO,EAAEA,CAAA,KAAM,CAAC,CAAE;MAClBC,OAAO,EAAE,OAAQ;MACjBN,SAAS,EAAEL;IAAW,CACzB;EACJ,gBAEDjC,KAAA,CAAAkC,aAAA;IAAKI,SAAS,EAAE,cAAe;IAACO,KAAK,EAAE;MAAEC,KAAK,EAAE;IAAI;EAAE,gBAClD9C,KAAA,CAAAkC,aAAA,CAACpB,IAAI;IAACa,IAAI,EAAE;MAAEL;IAAc,CAAE;IAACyB,QAAQ,EAAErB;EAAY,GAChDsB,IAAI,iBACDhD,KAAA,CAAAkC,aAAA,CAACrB,IAAI;IAACoC,IAAI,EAAE,eAAgB;IAACC,UAAU,EAAE,CAACnC,UAAU,CAACoC,MAAM,CAAC,KAAK,CAAC;EAAE,gBAChEnD,KAAA,CAAAkC,aAAA,CAACxB,KAAK;IACF0C,SAAS,EAAE,IAAK;IAChBC,KAAK,EAAE,gBAAiB;IACxBC,WAAW,eACPtD,KAAA,CAAAkC,aAAA,CAAAlC,KAAA,CAAAuD,QAAA,QAAE,+CAEE,eAAAvD,KAAA,CAAAkC,aAAA,WAAK,CAAC,oCAER,CACL;IACDQ,IAAI,EAAE,IAAK;IACXc,MAAM,EAAEA,CAAA,KAAMR,IAAI,CAACS,MAAM,CAAC,CAAE;IAC5BC,OAAO,EAAEA,CAAA,KAAMV,IAAI,CAACS,MAAM,CAAC,CAAE;IAC7BE,IAAI,EAAE;EAAkD,CAC3D,CACC,CAER,CAAC,EACNpC,YAAY,gBACTvB,KAAA,CAAAkC,aAAA,CAAAlC,KAAA,CAAAuD,QAAA,qBACIvD,KAAA,CAAAkC,aAAA,CAACzB,SAAS;IAACmC,OAAO,EAAE,QAAS;IAACgB,MAAM,EAAE;EAAK,CAAE,CAAC,eAC9C5D,KAAA,CAAAkC,aAAA,CAAC5B,MAAM;IACHsC,OAAO,EAAE,SAAU;IACnBD,OAAO,EAAEb,WAAY;IACrB+B,IAAI,EAAE,cAAe;IACrBnB,IAAI,EAAE;EAAK,CACd,CAAC,eACF1C,KAAA,CAAAkC,aAAA,CAACzB,SAAS;IAACmC,OAAO,EAAE,QAAS;IAACgB,MAAM,EAAE;EAAK,CAAE,CAAC,8DAEhD,CAAC,GACH,IACH,CACK,CAAC;AAEvB,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/AddressBar/PreviewDomain.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/AddressBar/PreviewDomain.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { ReactComponent as GlobeIcon } from \"@webiny/icons/language.svg\";\nimport { Button, DropdownMenu, IconButton, Separator, Input, cn } from \"@webiny/admin-ui\";\nimport { usePreviewDomain } from \"../usePreviewDomain.js\";\nimport type { GenericFormData } from \"@webiny/form\";\nimport { Bind, Form } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\n\nexport const PreviewDomain = () => {\n    const editor = useDocumentEditor();\n    const [isOpen, setIsOpen] = useState(false);\n\n    const { previewDomain, isOverridden, unsetPreviewDomain, setPreviewDomain } =\n        usePreviewDomain();\n\n    const commitValue = useCallback((data: GenericFormData) => {\n        const value = data.previewDomain;\n        if (value.length > 0) {\n            setPreviewDomain(value);\n        } else {\n            unsetPreviewDomain();\n        }\n        setIsOpen(false);\n    }, []);\n\n    const resetDomain = useCallback(() => {\n        unsetPreviewDomain();\n        setIsOpen(false);\n    }, []);\n\n    useEffect(() => {\n        if (!previewDomain) {\n            return;\n        }\n\n        editor.executeCommand(Commands.RefreshPreview);\n    }, [previewDomain]);\n\n    const classNames = cn(\n        \"absolute left-0 top-0\",\n        isOverridden ? \"fill-accent-default\" : \"fill-neutral-disabled\"\n    );\n\n    return (\n        <DropdownMenu\n            open={isOpen}\n            align=\"center\"\n            side=\"bottom\"\n            className={\"shadow-lg\"}\n            onOpenChange={setIsOpen}\n            trigger={\n                <IconButton\n                    icon={<GlobeIcon />}\n                    size=\"md\"\n                    onClick={() => {}}\n                    variant={\"ghost\"}\n                    className={classNames}\n                />\n            }\n        >\n            <div className={\"p-sm text-sm\"} style={{ width: 300 }}>\n                <Form data={{ previewDomain }} onSubmit={commitValue}>\n                    {form => (\n                        <Bind name={\"previewDomain\"} validators={[validation.create(\"url\")]}>\n                            <Input\n                                autoFocus={true}\n                                label={\"Preview Domain\"}\n                                description={\n                                    <>\n                                        Set a custom preview domain for your session.\n                                        <br />\n                                        This doesn&apos;t affect other users.\n                                    </>\n                                }\n                                size={\"md\"}\n                                onBlur={() => form.submit()}\n                                onEnter={() => form.submit()}\n                                note={`Hit \"Enter\" or click outside the menu to apply.`}\n                            />\n                        </Bind>\n                    )}\n                </Form>\n                {isOverridden ? (\n                    <>\n                        <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                        <Button\n                            variant={\"primary\"}\n                            onClick={resetDomain}\n                            text={\"Reset Domain\"}\n                            size={\"sm\"}\n                        />\n                        <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                        Resetting will revert to using the default preview domain.\n                    </>\n                ) : null}\n            </div>\n        </DropdownMenu>\n    );\n};\n"],"names":["PreviewDomain","editor","useDocumentEditor","isOpen","setIsOpen","useState","previewDomain","isOverridden","unsetPreviewDomain","setPreviewDomain","usePreviewDomain","commitValue","useCallback","data","value","resetDomain","useEffect","Commands","classNames","cn","DropdownMenu","IconButton","GlobeIcon","Form","form","Bind","validation","Input","Separator","Button"],"mappings":";;;;;;;;AAUO,MAAMA,gBAAgB;IACzB,MAAMC,SAASC;IACf,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAAS;IAErC,MAAM,EAAEC,aAAa,EAAEC,YAAY,EAAEC,kBAAkB,EAAEC,gBAAgB,EAAE,GACvEC;IAEJ,MAAMC,cAAcC,YAAY,CAACC;QAC7B,MAAMC,QAAQD,KAAK,aAAa;QAChC,IAAIC,MAAM,MAAM,GAAG,GACfL,iBAAiBK;aAEjBN;QAEJJ,UAAU;IACd,GAAG,EAAE;IAEL,MAAMW,cAAcH,YAAY;QAC5BJ;QACAJ,UAAU;IACd,GAAG,EAAE;IAELY,UAAU;QACN,IAAI,CAACV,eACD;QAGJL,OAAO,cAAc,CAACgB,SAAS,cAAc;IACjD,GAAG;QAACX;KAAc;IAElB,MAAMY,aAAaC,GACf,yBACAZ,eAAe,wBAAwB;IAG3C,OAAO,WAAP,GACI,oBAACa,cAAYA;QACT,MAAMjB;QACN,OAAM;QACN,MAAK;QACL,WAAW;QACX,cAAcC;QACd,uBACI,oBAACiB,YAAUA;YACP,oBAAM,oBAACC,gBAASA;YAChB,MAAK;YACL,SAAS,KAAO;YAChB,SAAS;YACT,WAAWJ;;qBAInB,oBAAC;QAAI,WAAW;QAAgB,OAAO;YAAE,OAAO;QAAI;qBAChD,oBAACK,MAAIA;QAAC,MAAM;YAAEjB;QAAc;QAAG,UAAUK;OACpCa,CAAAA,OAAAA,WAAAA,GACG,oBAACC,MAAIA;YAAC,MAAM;YAAiB,YAAY;gBAACC,WAAW,MAAM,CAAC;aAAO;yBAC/D,oBAACC,OAAKA;YACF,WAAW;YACX,OAAO;YACP,2BACI,0CAAE,+DAEE,oBAAC,aAAK;YAId,MAAM;YACN,QAAQ,IAAMH,KAAK,MAAM;YACzB,SAAS,IAAMA,KAAK,MAAM;YAC1B,MAAM;cAKrBjB,eAAe,WAAfA,GACG,wDACI,oBAACqB,WAASA;QAAC,SAAS;QAAU,QAAQ;sBACtC,oBAACC,QAAMA;QACH,SAAS;QACT,SAASd;QACT,MAAM;QACN,MAAM;sBAEV,oBAACa,WAASA;QAAC,SAAS;QAAU,QAAQ;QAAQ,gEAGlD;AAIpB"}