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

package/BaseEditor/config/TopBar/TopBar.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { makeDecoratable } from "@webiny/app-admin";
+import { Element as BaseElement } from "../Element";
+import { Elements as BaseElements } from "../Elements";
+import { Divider } from "./Divider";
+import { Layout } from "./Layout";
+import { createGetId } from "../createGetId";
+import { MenuItem } from "./MenuItem";
+const SCOPE = "topBar";
+const BaseTopBar = () => {
+  return /*#__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
+  })
+});
+
+//# sourceMappingURL=TopBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","makeDecoratable","Element","BaseElement","Elements","BaseElements","Divider","Layout","createGetId","MenuItem","SCOPE","BaseTopBar","createElement","getElementId","props","Object","assign","scope","id","name","before","undefined","after","Action","group","BaseDropdownAction","TopBar","DropdownAction"],"sources":["TopBar.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { ElementProps as BaseElementProps } from \"../Element\";\nimport { Element as BaseElement } from \"../Element\";\nimport type { ElementsProps as BaseElementsProps } from \"../Elements\";\nimport { Elements as BaseElements } from \"../Elements\";\nimport { Divider } from \"./Divider\";\nimport { Layout } from \"./Layout\";\nimport { createGetId } from \"../createGetId\";\nimport { MenuItem } from \"./MenuItem\";\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, { MenuItem })\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,SAASC,OAAO,IAAIC,WAAW;AAE/B,SAASC,QAAQ,IAAIC,YAAY;AACjC,SAASC,OAAO;AAChB,SAASC,MAAM;AACf,SAASC,WAAW;AACpB,SAASC,QAAQ;AAEjB,MAAMC,KAAK,GAAG,QAAQ;AAEtB,MAAMC,UAAU,GAAGA,CAAA,KAAM;EACrB,oBAAOX,KAAA,CAAAY,aAAA,CAACL,MAAM,MAAE,CAAC;AACrB,CAAC;AAED,MAAMM,YAAY,GAAGL,WAAW,CAACE,KAAK,CAAC,CAAC,CAAC;AAIzC,MAAMR,OAAO,GAAGD,eAAe,CAAC,eAAe,EAAGa,KAAmB,IAAK;EACtE,oBACId,KAAA,CAAAY,aAAA,CAACT,WAAW,EAAAY,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,GAAGtB,eAAe,CAAC,cAAc,EAAGa,KAAkB,IAAK;EACnE,oBAAOd,KAAA,CAAAY,aAAA,CAACV,OAAO,EAAAa,MAAA,CAAAC,MAAA,KAAKF,KAAK;IAAEU,KAAK,EAAE;EAAU,EAAE,CAAC;AACnD,CAAC,CAAC;AAIF,MAAMC,kBAAkB,GAAGxB,eAAe,CAAC,sBAAsB,EAAGa,KAA0B,IAAK;EAC/F,oBAAOd,KAAA,CAAAY,aAAA,CAACV,OAAO,EAAAa,MAAA,CAAAC,MAAA,KAAKF,KAAK;IAAEU,KAAK,EAAE;EAAkB,EAAE,CAAC;AAC3D,CAAC,CAAC;AAIF,MAAMpB,QAAQ,GAAGH,eAAe,CAAC,gBAAgB,EAAGa,KAAoB,IAAK;EACzE,oBAAOd,KAAA,CAAAY,aAAA,CAACP,YAAY,EAAAU,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;EAC5CT,OAAO;EACPE,QAAQ;EACRG,MAAM;EACND,OAAO;EACPiB,MAAM;EACNI,cAAc,EAAEZ,MAAM,CAACC,MAAM,CAACS,kBAAkB,EAAE;IAAEhB;EAAS,CAAC;AAClE,CAAC,CAAC","ignoreList":[]}

package/BaseEditor/config/createGetId.d.ts

@@ -0,0 +1 @@
+export declare const createGetId: (scope: string) => (prefix?: string) => (name: string) => string;

package/BaseEditor/config/createGetId.js

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

package/BaseEditor/config/createGetId.js.map

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

package/BaseEditor/config/index.d.ts

@@ -0,0 +1 @@
+export * from "./EditorConfig";

package/BaseEditor/config/index.js

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

package/BaseEditor/config/index.js.map

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

package/BaseEditor/defaultConfig/Content/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const Breadcrumbs: () => React.JSX.Element;

package/BaseEditor/defaultConfig/Content/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,62 @@
+import React, { useCallback } from "react";
+import { breadcrumbs } from "./styles";
+import { useActiveElement } from "../../../hooks/useActiveElement";
+import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument";
+import { $getComponentManifestByElementId } from "../../../../editorSdk/utils";
+import { useDocumentEditor } from "../../../../DocumentEditor";
+import { Commands } from "../../..";
+export const Breadcrumbs = () => {
+  const [activeElement] = useActiveElement();
+  const editor = useDocumentEditor();
+  const items = useSelectFromDocument(document => {
+    if (!activeElement) {
+      return [];
+    }
+    const items = [];
+    let element = document.elements[activeElement.id];
+    while (element) {
+      const component = $getComponentManifestByElementId(editor, element.id);
+      if (!component) {
+        continue;
+      }
+      items.push({
+        id: element.id,
+        label: component.label
+      });
+      if (element.parent?.id === "root") {
+        break;
+      }
+      element = document.elements[element.parent.id];
+    }
+    return items.reverse();
+  }, [activeElement?.id]);
+  const highlightElement = useCallback(id => {
+    editor.executeCommand(Commands.HighlightElement, {
+      id
+    });
+  }, []);
+  const activateElement = useCallback(id => {
+    editor.executeCommand(Commands.SelectElement, {
+      id
+    });
+  }, []);
+  return /*#__PURE__*/React.createElement("ul", {
+    className: breadcrumbs,
+    "data-role": "content-breadcrumbs",
+    "data-hover-manager": "ignore"
+  }, items.map(({
+    id,
+    label
+  }, index) => /*#__PURE__*/React.createElement("li", {
+    key: id,
+    onMouseOver: () => highlightElement(id),
+    onClick: () => activateElement(id)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "element",
+    style: {
+      "--element-count": index
+    }
+  }, label))));
+};
+
+//# sourceMappingURL=Breadcrumbs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","breadcrumbs","useActiveElement","useSelectFromDocument","$getComponentManifestByElementId","useDocumentEditor","Commands","Breadcrumbs","activeElement","editor","items","document","element","elements","id","component","push","label","parent","reverse","highlightElement","executeCommand","HighlightElement","activateElement","SelectElement","createElement","className","map","index","key","onMouseOver","onClick","style"],"sources":["Breadcrumbs.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { breadcrumbs } from \"./styles\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\nimport { $getComponentManifestByElementId } from \"~/editorSdk/utils\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { Commands } from \"~/BaseEditor\";\n\nexport const Breadcrumbs = () => {\n    const [activeElement] = useActiveElement();\n    const editor = useDocumentEditor();\n\n    const items = useSelectFromDocument(\n        document => {\n            if (!activeElement) {\n                return [];\n            }\n\n            const items = [];\n            let element = document.elements[activeElement.id];\n\n            while (element) {\n                const component = $getComponentManifestByElementId(editor, element.id)!;\n                if (!component) {\n                    continue;\n                }\n\n                items.push({\n                    id: element.id,\n                    label: component.label\n                });\n\n                if (element.parent?.id === \"root\") {\n                    break;\n                }\n\n                element = document.elements[element.parent!.id];\n            }\n\n            return items.reverse();\n        },\n        [activeElement?.id]\n    );\n\n    const highlightElement = useCallback((id: string) => {\n        editor.executeCommand(Commands.HighlightElement, { id });\n    }, []);\n\n    const activateElement = useCallback((id: string) => {\n        editor.executeCommand(Commands.SelectElement, { id });\n    }, []);\n\n    return (\n        <ul className={breadcrumbs} data-role={\"content-breadcrumbs\"} data-hover-manager={\"ignore\"}>\n            {items.map(({ id, label }, index) => (\n                <li\n                    key={id}\n                    onMouseOver={() => highlightElement(id)}\n                    onClick={() => activateElement(id)}\n                >\n                    <span\n                        className={\"element\"}\n                        style={{ \"--element-count\": index } as React.CSSProperties}\n                    >\n                        {label}\n                    </span>\n                </li>\n            ))}\n        </ul>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,WAAW;AACpB,SAASC,gBAAgB;AACzB,SAASC,qBAAqB;AAC9B,SAASC,gCAAgC;AACzC,SAASC,iBAAiB;AAC1B,SAASC,QAAQ;AAEjB,OAAO,MAAMC,WAAW,GAAGA,CAAA,KAAM;EAC7B,MAAM,CAACC,aAAa,CAAC,GAAGN,gBAAgB,CAAC,CAAC;EAC1C,MAAMO,MAAM,GAAGJ,iBAAiB,CAAC,CAAC;EAElC,MAAMK,KAAK,GAAGP,qBAAqB,CAC/BQ,QAAQ,IAAI;IACR,IAAI,CAACH,aAAa,EAAE;MAChB,OAAO,EAAE;IACb;IAEA,MAAME,KAAK,GAAG,EAAE;IAChB,IAAIE,OAAO,GAAGD,QAAQ,CAACE,QAAQ,CAACL,aAAa,CAACM,EAAE,CAAC;IAEjD,OAAOF,OAAO,EAAE;MACZ,MAAMG,SAAS,GAAGX,gCAAgC,CAACK,MAAM,EAAEG,OAAO,CAACE,EAAE,CAAE;MACvE,IAAI,CAACC,SAAS,EAAE;QACZ;MACJ;MAEAL,KAAK,CAACM,IAAI,CAAC;QACPF,EAAE,EAAEF,OAAO,CAACE,EAAE;QACdG,KAAK,EAAEF,SAAS,CAACE;MACrB,CAAC,CAAC;MAEF,IAAIL,OAAO,CAACM,MAAM,EAAEJ,EAAE,KAAK,MAAM,EAAE;QAC/B;MACJ;MAEAF,OAAO,GAAGD,QAAQ,CAACE,QAAQ,CAACD,OAAO,CAACM,MAAM,CAAEJ,EAAE,CAAC;IACnD;IAEA,OAAOJ,KAAK,CAACS,OAAO,CAAC,CAAC;EAC1B,CAAC,EACD,CAACX,aAAa,EAAEM,EAAE,CACtB,CAAC;EAED,MAAMM,gBAAgB,GAAGpB,WAAW,CAAEc,EAAU,IAAK;IACjDL,MAAM,CAACY,cAAc,CAACf,QAAQ,CAACgB,gBAAgB,EAAE;MAAER;IAAG,CAAC,CAAC;EAC5D,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMS,eAAe,GAAGvB,WAAW,CAAEc,EAAU,IAAK;IAChDL,MAAM,CAACY,cAAc,CAACf,QAAQ,CAACkB,aAAa,EAAE;MAAEV;IAAG,CAAC,CAAC;EACzD,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIf,KAAA,CAAA0B,aAAA;IAAIC,SAAS,EAAEzB,WAAY;IAAC,aAAW,qBAAsB;IAAC,sBAAoB;EAAS,GACtFS,KAAK,CAACiB,GAAG,CAAC,CAAC;IAAEb,EAAE;IAAEG;EAAM,CAAC,EAAEW,KAAK,kBAC5B7B,KAAA,CAAA0B,aAAA;IACII,GAAG,EAAEf,EAAG;IACRgB,WAAW,EAAEA,CAAA,KAAMV,gBAAgB,CAACN,EAAE,CAAE;IACxCiB,OAAO,EAAEA,CAAA,KAAMR,eAAe,CAACT,EAAE;EAAE,gBAEnCf,KAAA,CAAA0B,aAAA;IACIC,SAAS,EAAE,SAAU;IACrBM,KAAK,EAAE;MAAE,iBAAiB,EAAEJ;IAAM;EAAyB,GAE1DX,KACC,CACN,CACP,CACD,CAAC;AAEb,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Breadcrumbs/dual-tone-arrow.svg

@@ -0,0 +1,4 @@
+<svg width="7" height="28" viewBox="0 0 7 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 0H0L6 14L0 28H1L7 14L1 0Z" fill="#858585"/>
+<path d="M0 28V0L6 14L0 28Z" fill="black"/>
+</svg>

package/BaseEditor/defaultConfig/Content/Breadcrumbs/index.d.ts

@@ -0,0 +1 @@
+export * from "./Breadcrumbs";

package/BaseEditor/defaultConfig/Content/Breadcrumbs/index.js

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

package/BaseEditor/defaultConfig/Content/Breadcrumbs/index.js.map

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

package/BaseEditor/defaultConfig/Content/Breadcrumbs/styles.d.ts

@@ -0,0 +1 @@
+export declare const breadcrumbs: string;

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

@@ -0,0 +1,72 @@
+import { css } from "emotion";
+export const breadcrumbs = css({
+  display: "flex",
+  zIndex: 100,
+  flexDirection: "row",
+  padding: 0,
+  position: "absolute",
+  left: 300,
+  bottom: 0,
+  width: "calc(100% - 600px)",
+  height: "31px",
+  backgroundColor: "var(--mdc-theme-surface)",
+  borderTop: "1px solid var(--mdc-theme-background)",
+  fontSize: "12px",
+  overflow: "hidden",
+  "> li": {
+    cursor: "pointer",
+    display: "flex",
+    "& .element": {
+      color: "var(--text-neutral-strong)",
+      textDecoration: "none",
+      textTransform: "capitalize",
+      padding: "5px 0 5px 30px",
+      background: "hsla(300, 2%, calc(92% - var(--element-count) * 1%), 1)",
+      position: "relative",
+      display: "block"
+    },
+    "& .element::after": {
+      content: '" "',
+      display: "block",
+      width: "0",
+      height: "0",
+      borderTop: "50px solid transparent",
+      borderBottom: "50px solid transparent",
+      borderLeft: "20px solid hsla(300, 2%, calc(92% - var(--element-count) * 1%), 1)   ",
+      position: "absolute",
+      top: "50%",
+      marginTop: "-50px",
+      left: "100%",
+      zIndex: 2
+    },
+    "& .element::before": {
+      content: '" "',
+      display: "block",
+      width: "0",
+      height: "0",
+      borderTop: "50px solid transparent",
+      borderBottom: "50px solid transparent",
+      borderLeft: "20px solid hsla(0, 0%, 100%, 1)",
+      position: "absolute",
+      top: "50%",
+      marginTop: "-50px",
+      marginLeft: "1px",
+      left: "100%",
+      zIndex: 1
+    }
+  },
+  "& li:first-child .element": {
+    paddingLeft: "10px"
+  },
+  // Handle active state
+  "& li .element:hover": {
+    color: "var(--mdc-theme-surface)",
+    background: "var(--mdc-theme-secondary)"
+  },
+  "& li .element:hover:after": {
+    color: "var(--mdc-theme-surface)",
+    borderLeftColor: "var(--mdc-theme-secondary) !important"
+  }
+});
+
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["css","breadcrumbs","display","zIndex","flexDirection","padding","position","left","bottom","width","height","backgroundColor","borderTop","fontSize","overflow","cursor","color","textDecoration","textTransform","background","content","borderBottom","borderLeft","top","marginTop","marginLeft","paddingLeft","borderLeftColor"],"sources":["styles.ts"],"sourcesContent":["import { css } from \"emotion\";\n\nexport const breadcrumbs = css({\n    display: \"flex\",\n    zIndex: 100,\n    flexDirection: \"row\",\n    padding: 0,\n    position: \"absolute\",\n    left: 300,\n    bottom: 0,\n    width: \"calc(100% - 600px)\",\n    height: \"31px\",\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    borderTop: \"1px solid var(--mdc-theme-background)\",\n    fontSize: \"12px\",\n    overflow: \"hidden\",\n    \"> li\": {\n        cursor: \"pointer\",\n        display: \"flex\",\n        \"& .element\": {\n            color: \"var(--text-neutral-strong)\",\n            textDecoration: \"none\",\n            textTransform: \"capitalize\",\n            padding: \"5px 0 5px 30px\",\n            background: \"hsla(300, 2%, calc(92% - var(--element-count) * 1%), 1)\",\n            position: \"relative\",\n            display: \"block\"\n        },\n        \"& .element::after\": {\n            content: '\" \"',\n            display: \"block\",\n            width: \"0\",\n            height: \"0\",\n            borderTop: \"50px solid transparent\",\n            borderBottom: \"50px solid transparent\",\n            borderLeft: \"20px solid hsla(300, 2%, calc(92% - var(--element-count) * 1%), 1)   \",\n            position: \"absolute\",\n            top: \"50%\",\n            marginTop: \"-50px\",\n            left: \"100%\",\n            zIndex: 2\n        },\n        \"& .element::before\": {\n            content: '\" \"',\n            display: \"block\",\n            width: \"0\",\n            height: \"0\",\n            borderTop: \"50px solid transparent\",\n            borderBottom: \"50px solid transparent\",\n            borderLeft: \"20px solid hsla(0, 0%, 100%, 1)\",\n            position: \"absolute\",\n            top: \"50%\",\n            marginTop: \"-50px\",\n            marginLeft: \"1px\",\n            left: \"100%\",\n            zIndex: 1\n        }\n    },\n    \"& li:first-child .element\": { paddingLeft: \"10px\" },\n\n    // Handle active state\n    \"& li .element:hover\": {\n        color: \"var(--mdc-theme-surface)\",\n        background: \"var(--mdc-theme-secondary)\"\n    },\n    \"& li .element:hover:after\": {\n        color: \"var(--mdc-theme-surface)\",\n        borderLeftColor: \"var(--mdc-theme-secondary) !important\"\n    }\n});\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,SAAS;AAE7B,OAAO,MAAMC,WAAW,GAAGD,GAAG,CAAC;EAC3BE,OAAO,EAAE,MAAM;EACfC,MAAM,EAAE,GAAG;EACXC,aAAa,EAAE,KAAK;EACpBC,OAAO,EAAE,CAAC;EACVC,QAAQ,EAAE,UAAU;EACpBC,IAAI,EAAE,GAAG;EACTC,MAAM,EAAE,CAAC;EACTC,KAAK,EAAE,oBAAoB;EAC3BC,MAAM,EAAE,MAAM;EACdC,eAAe,EAAE,0BAA0B;EAC3CC,SAAS,EAAE,uCAAuC;EAClDC,QAAQ,EAAE,MAAM;EAChBC,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE;IACJC,MAAM,EAAE,SAAS;IACjBb,OAAO,EAAE,MAAM;IACf,YAAY,EAAE;MACVc,KAAK,EAAE,4BAA4B;MACnCC,cAAc,EAAE,MAAM;MACtBC,aAAa,EAAE,YAAY;MAC3Bb,OAAO,EAAE,gBAAgB;MACzBc,UAAU,EAAE,yDAAyD;MACrEb,QAAQ,EAAE,UAAU;MACpBJ,OAAO,EAAE;IACb,CAAC;IACD,mBAAmB,EAAE;MACjBkB,OAAO,EAAE,KAAK;MACdlB,OAAO,EAAE,OAAO;MAChBO,KAAK,EAAE,GAAG;MACVC,MAAM,EAAE,GAAG;MACXE,SAAS,EAAE,wBAAwB;MACnCS,YAAY,EAAE,wBAAwB;MACtCC,UAAU,EAAE,uEAAuE;MACnFhB,QAAQ,EAAE,UAAU;MACpBiB,GAAG,EAAE,KAAK;MACVC,SAAS,EAAE,OAAO;MAClBjB,IAAI,EAAE,MAAM;MACZJ,MAAM,EAAE;IACZ,CAAC;IACD,oBAAoB,EAAE;MAClBiB,OAAO,EAAE,KAAK;MACdlB,OAAO,EAAE,OAAO;MAChBO,KAAK,EAAE,GAAG;MACVC,MAAM,EAAE,GAAG;MACXE,SAAS,EAAE,wBAAwB;MACnCS,YAAY,EAAE,wBAAwB;MACtCC,UAAU,EAAE,iCAAiC;MAC7ChB,QAAQ,EAAE,UAAU;MACpBiB,GAAG,EAAE,KAAK;MACVC,SAAS,EAAE,OAAO;MAClBC,UAAU,EAAE,KAAK;MACjBlB,IAAI,EAAE,MAAM;MACZJ,MAAM,EAAE;IACZ;EACJ,CAAC;EACD,2BAA2B,EAAE;IAAEuB,WAAW,EAAE;EAAO,CAAC;EAEpD;EACA,qBAAqB,EAAE;IACnBV,KAAK,EAAE,0BAA0B;IACjCG,UAAU,EAAE;EAChB,CAAC;EACD,2BAA2B,EAAE;IACzBH,KAAK,EAAE,0BAA0B;IACjCW,eAAe,EAAE;EACrB;AACJ,CAAC,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/AddressBar/OpenInNewTab.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const OpenInNewTab: () => React.JSX.Element;

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { IconButton, Text, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent as NewTabIcon } from "@webiny/icons/open_in_new.svg";
+import { usePreviewLink } from "./usePreviewLink";
+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"
+    })
+  });
+};
+
+//# sourceMappingURL=OpenInNewTab.js.map

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

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

package/BaseEditor/defaultConfig/Content/Preview/AddressBar/PreviewDomain.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const PreviewDomain: () => React.JSX.Element;

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

@@ -0,0 +1,86 @@
+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 { usePreviewDomain } from "../usePreviewDomain";
+import { Bind, Form } from "@webiny/form";
+import { validation } from "@webiny/validation";
+import { useDocumentEditor } from "../../../../../DocumentEditor";
+import { Commands } from "../../../..";
+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("wby-absolute wby-left-0 wby-top-0", isOverridden ? "wby-fill-accent-default" : "wby-fill-neutral-disabled");
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
+    open: isOpen,
+    align: "center",
+    side: "bottom",
+    className: "wby-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: "wby-p-sm wby-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));
+};
+
+//# sourceMappingURL=PreviewDomain.js.map

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

@@ -0,0 +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\";\nimport type { GenericFormData } from \"@webiny/form\";\nimport { Bind, Form } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { Commands } from \"~/BaseEditor\";\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        \"wby-absolute wby-left-0 wby-top-0\",\n        isOverridden ? \"wby-fill-accent-default\" : \"wby-fill-neutral-disabled\"\n    );\n\n    return (\n        <DropdownMenu\n            open={isOpen}\n            align=\"center\"\n            side=\"bottom\"\n            className={\"wby-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={\"wby-p-sm wby-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":"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","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/AddressBar/PreviewInNewTab.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const PreviewInNewTab: () => React.JSX.Element;

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { CopyButton, Text, Tooltip, useToast } from "@webiny/admin-ui";
+import { usePreviewLink } from "./usePreviewLink";
+export const PreviewInNewTab = () => {
+  const link = usePreviewLink();
+  const {
+    showToast
+  } = useToast();
+  const confirmClipboard = () => {
+    showToast({
+      title: "Preview link copied to clipboard!"
+    });
+  };
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: /*#__PURE__*/React.createElement(Text, {
+      size: "md"
+    }, "Copy preview link"),
+    side: "bottom",
+    trigger: /*#__PURE__*/React.createElement(CopyButton, {
+      size: "md",
+      value: link,
+      onCopy: confirmClipboard,
+      variant: "ghost"
+    })
+  });
+};
+
+//# sourceMappingURL=PreviewInNewTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","CopyButton","Text","Tooltip","useToast","usePreviewLink","PreviewInNewTab","link","showToast","confirmClipboard","title","createElement","content","size","side","trigger","value","onCopy","variant"],"sources":["PreviewInNewTab.tsx"],"sourcesContent":["import React from \"react\";\nimport { CopyButton, Text, Tooltip, useToast } from \"@webiny/admin-ui\";\nimport { usePreviewLink } from \"./usePreviewLink\";\n\nexport const PreviewInNewTab = () => {\n    const link = usePreviewLink();\n    const { showToast } = useToast();\n\n    const confirmClipboard = () => {\n        showToast({\n            title: \"Preview link copied to clipboard!\"\n        });\n    };\n\n    return (\n        <Tooltip\n            content={<Text size=\"md\">Copy preview link</Text>}\n            side=\"bottom\"\n            trigger={\n                <CopyButton size=\"md\" value={link} onCopy={confirmClipboard} variant={\"ghost\"} />\n            }\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,kBAAkB;AACtE,SAASC,cAAc;AAEvB,OAAO,MAAMC,eAAe,GAAGA,CAAA,KAAM;EACjC,MAAMC,IAAI,GAAGF,cAAc,CAAC,CAAC;EAC7B,MAAM;IAAEG;EAAU,CAAC,GAAGJ,QAAQ,CAAC,CAAC;EAEhC,MAAMK,gBAAgB,GAAGA,CAAA,KAAM;IAC3BD,SAAS,CAAC;MACNE,KAAK,EAAE;IACX,CAAC,CAAC;EACN,CAAC;EAED,oBACIV,KAAA,CAAAW,aAAA,CAACR,OAAO;IACJS,OAAO,eAAEZ,KAAA,CAAAW,aAAA,CAACT,IAAI;MAACW,IAAI,EAAC;IAAI,GAAC,mBAAuB,CAAE;IAClDC,IAAI,EAAC,QAAQ;IACbC,OAAO,eACHf,KAAA,CAAAW,aAAA,CAACV,UAAU;MAACY,IAAI,EAAC,IAAI;MAACG,KAAK,EAAET,IAAK;MAACU,MAAM,EAAER,gBAAiB;MAACS,OAAO,EAAE;IAAQ,CAAE;EACnF,CACJ,CAAC;AAEV,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/AddressBar/RefreshPreview.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const RefreshPreview: () => React.JSX.Element;

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

@@ -0,0 +1,25 @@
+import React, { useCallback } from "react";
+import { IconButton, Text, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent as RefreshIcon } from "@webiny/icons/refresh.svg";
+import { useDocumentEditor } from "../../../../../DocumentEditor";
+import { Commands } from "../../../..";
+export const RefreshPreview = () => {
+  const editor = useDocumentEditor();
+  const refresh = useCallback(() => {
+    editor.executeCommand(Commands.RefreshPreview);
+  }, []);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: /*#__PURE__*/React.createElement(Text, {
+      size: "md"
+    }, "Refresh preview"),
+    side: "bottom",
+    trigger: /*#__PURE__*/React.createElement(IconButton, {
+      icon: /*#__PURE__*/React.createElement(RefreshIcon, null),
+      size: "md",
+      onClick: refresh,
+      variant: "ghost"
+    })
+  });
+};
+
+//# sourceMappingURL=RefreshPreview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","IconButton","Text","Tooltip","ReactComponent","RefreshIcon","useDocumentEditor","Commands","RefreshPreview","editor","refresh","executeCommand","createElement","content","size","side","trigger","icon","onClick","variant"],"sources":["RefreshPreview.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { IconButton, Text, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as RefreshIcon } from \"@webiny/icons/refresh.svg\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { Commands } from \"~/BaseEditor\";\n\nexport const RefreshPreview = () => {\n    const editor = useDocumentEditor();\n\n    const refresh = useCallback(() => {\n        editor.executeCommand(Commands.RefreshPreview);\n    }, []);\n\n    return (\n        <Tooltip\n            content={<Text size=\"md\">Refresh preview</Text>}\n            side=\"bottom\"\n            trigger={\n                <IconButton icon={<RefreshIcon />} size=\"md\" onClick={refresh} variant={\"ghost\"} />\n            }\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,UAAU,EAAEC,IAAI,EAAEC,OAAO,QAAQ,kBAAkB;AAC5D,SAASC,cAAc,IAAIC,WAAW,QAAQ,2BAA2B;AACzE,SAASC,iBAAiB;AAC1B,SAASC,QAAQ;AAEjB,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAM;EAChC,MAAMC,MAAM,GAAGH,iBAAiB,CAAC,CAAC;EAElC,MAAMI,OAAO,GAAGV,WAAW,CAAC,MAAM;IAC9BS,MAAM,CAACE,cAAc,CAACJ,QAAQ,CAACC,cAAc,CAAC;EAClD,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIT,KAAA,CAAAa,aAAA,CAACT,OAAO;IACJU,OAAO,eAAEd,KAAA,CAAAa,aAAA,CAACV,IAAI;MAACY,IAAI,EAAC;IAAI,GAAC,iBAAqB,CAAE;IAChDC,IAAI,EAAC,QAAQ;IACbC,OAAO,eACHjB,KAAA,CAAAa,aAAA,CAACX,UAAU;MAACgB,IAAI,eAAElB,KAAA,CAAAa,aAAA,CAACP,WAAW,MAAE,CAAE;MAACS,IAAI,EAAC,IAAI;MAACI,OAAO,EAAER,OAAQ;MAACS,OAAO,EAAE;IAAQ,CAAE;EACrF,CACJ,CAAC;AAEV,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/AddressBar/usePreviewLink.d.ts

@@ -0,0 +1 @@
+export declare const usePreviewLink: () => string;

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

@@ -0,0 +1,31 @@
+import { useMemo } from "react";
+import { useIframeUrl } from "../useIframeUrl";
+import { useSelectFromDocument } from "../../../../hooks/useSelectFromDocument";
+export const usePreviewLink = () => {
+  const iframeUrl = useIframeUrl();
+  const id = useSelectFromDocument(document => document.id);
+  const path = useSelectFromDocument(document => document.properties.path);
+  const documentType = useSelectFromDocument(document => document.metadata.documentType);
+  return useMemo(() => {
+    if (!iframeUrl) {
+      return "";
+    }
+    const url = new URL(iframeUrl);
+
+    // Remove all `wb.` params
+    url.searchParams.forEach((_, key) => {
+      if (key.startsWith("wb.")) {
+        url.searchParams.delete(key);
+      }
+    });
+
+    // Add preview params
+    url.searchParams.set("wb.preview", "true");
+    url.searchParams.set("wb.type", documentType);
+    url.searchParams.set("wb.id", String(id));
+    url.searchParams.set("wb.path", path);
+    return url.toString();
+  }, [iframeUrl]);
+};
+
+//# sourceMappingURL=usePreviewLink.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","useIframeUrl","useSelectFromDocument","usePreviewLink","iframeUrl","id","document","path","properties","documentType","metadata","url","URL","searchParams","forEach","_","key","startsWith","delete","set","String","toString"],"sources":["usePreviewLink.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useIframeUrl } from \"~/BaseEditor/defaultConfig/Content/Preview/useIframeUrl\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\n\nexport const usePreviewLink = () => {\n    const iframeUrl = useIframeUrl();\n    const id = useSelectFromDocument(document => document.id);\n    const path = useSelectFromDocument(document => document.properties.path);\n    const documentType = useSelectFromDocument(document => document.metadata.documentType);\n\n    return useMemo(() => {\n        if (!iframeUrl) {\n            return \"\";\n        }\n        const url = new URL(iframeUrl);\n\n        // Remove all `wb.` params\n        url.searchParams.forEach((_, key) => {\n            if (key.startsWith(\"wb.\")) {\n                url.searchParams.delete(key);\n            }\n        });\n\n        // Add preview params\n        url.searchParams.set(\"wb.preview\", \"true\");\n        url.searchParams.set(\"wb.type\", documentType);\n        url.searchParams.set(\"wb.id\", String(id));\n        url.searchParams.set(\"wb.path\", path);\n        return url.toString();\n    }, [iframeUrl]);\n};\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,YAAY;AACrB,SAASC,qBAAqB;AAE9B,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAM;EAChC,MAAMC,SAAS,GAAGH,YAAY,CAAC,CAAC;EAChC,MAAMI,EAAE,GAAGH,qBAAqB,CAACI,QAAQ,IAAIA,QAAQ,CAACD,EAAE,CAAC;EACzD,MAAME,IAAI,GAAGL,qBAAqB,CAACI,QAAQ,IAAIA,QAAQ,CAACE,UAAU,CAACD,IAAI,CAAC;EACxE,MAAME,YAAY,GAAGP,qBAAqB,CAACI,QAAQ,IAAIA,QAAQ,CAACI,QAAQ,CAACD,YAAY,CAAC;EAEtF,OAAOT,OAAO,CAAC,MAAM;IACjB,IAAI,CAACI,SAAS,EAAE;MACZ,OAAO,EAAE;IACb;IACA,MAAMO,GAAG,GAAG,IAAIC,GAAG,CAACR,SAAS,CAAC;;IAE9B;IACAO,GAAG,CAACE,YAAY,CAACC,OAAO,CAAC,CAACC,CAAC,EAAEC,GAAG,KAAK;MACjC,IAAIA,GAAG,CAACC,UAAU,CAAC,KAAK,CAAC,EAAE;QACvBN,GAAG,CAACE,YAAY,CAACK,MAAM,CAACF,GAAG,CAAC;MAChC;IACJ,CAAC,CAAC;;IAEF;IACAL,GAAG,CAACE,YAAY,CAACM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC;IAC1CR,GAAG,CAACE,YAAY,CAACM,GAAG,CAAC,SAAS,EAAEV,YAAY,CAAC;IAC7CE,GAAG,CAACE,YAAY,CAACM,GAAG,CAAC,OAAO,EAAEC,MAAM,CAACf,EAAE,CAAC,CAAC;IACzCM,GAAG,CAACE,YAAY,CAACM,GAAG,CAAC,SAAS,EAAEZ,IAAI,CAAC;IACrC,OAAOI,GAAG,CAACU,QAAQ,CAAC,CAAC;EACzB,CAAC,EAAE,CAACjB,SAAS,CAAC,CAAC;AACnB,CAAC","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const AddressBar: () => React.JSX.Element;

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

@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from "react";
+import { BreakpointSelector } from "./BreakpointSelector";
+import { PreviewInNewTab } from "./AddressBar/PreviewInNewTab";
+import { OpenInNewTab } from "./AddressBar/OpenInNewTab";
+import { RefreshPreview } from "./AddressBar/RefreshPreview";
+import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument";
+import { PreviewDomain } from "./AddressBar/PreviewDomain";
+import { usePreviewDomain } from "./usePreviewDomain";
+export const AddressBar = () => {
+  const path = useSelectFromDocument(document => document.properties.path);
+  const {
+    previewDomain
+  } = usePreviewDomain();
+  const [addressBarUrl, setAddressBarUrl] = useState("");
+  useEffect(() => {
+    if (!previewDomain) {
+      return;
+    }
+    setAddressBarUrl(`${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", {
+    className: "wby-relative wby-flex-auto wby-mr-sm"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "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"
+  }, /*#__PURE__*/React.createElement(PreviewDomain, null), addressBarUrl), /*#__PURE__*/React.createElement("div", {
+    className: "wby-absolute wby-right-0 wby-top-0"
+  }, /*#__PURE__*/React.createElement(RefreshPreview, null), /*#__PURE__*/React.createElement(PreviewInNewTab, null), /*#__PURE__*/React.createElement(OpenInNewTab, null))), /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex-none"
+  }, /*#__PURE__*/React.createElement(BreakpointSelector, null)));
+};
+
+//# sourceMappingURL=AddressBar.js.map

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

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

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

@@ -0,0 +1,8 @@
+import React from "react";
+interface AwaitIframeUrlProps {
+    children: (params: {
+        url: string;
+    }) => React.ReactNode;
+}
+export declare const AwaitIframeUrl: ({ children }: AwaitIframeUrlProps) => React.JSX.Element | null;
+export {};

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { useIframeUrl } from "./useIframeUrl";
+export const AwaitIframeUrl = ({
+  children
+}) => {
+  const url = useIframeUrl();
+  return url ? /*#__PURE__*/React.createElement(React.Fragment, null, children({
+    url
+  })) : null;
+};
+
+//# sourceMappingURL=AwaitIframeUrl.js.map

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

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