@webiny/app-website-builder 6.0.0 → 6.1.0-beta.1

package/BaseEditor/config/ElementOverlay.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { type ElementProps as BaseElementProps } from "./Element.js";
+export type ElementProps = Pick<BaseElementProps, "name" | "element">;
+export interface ElementOverlayContainerProps {
+    position: {
+        top?: number;
+        left?: number;
+        bottom?: number;
+        right?: number;
+    };
+    children: React.ReactNode;
+}
+export declare const ElementOverlay: {
+    Element: (({ name, element }: ElementProps) => React.JSX.Element) & {
+        Container: ({ position, children }: ElementOverlayContainerProps) => React.JSX.Element;
+    };
+    Elements: () => React.JSX.Element;
+};

package/BaseEditor/config/ElementOverlay.js

@@ -0,0 +1,49 @@
+import React from "react";
+import { Element as BaseElement } from "./Element.js";
+import { Elements as BaseElements } from "./Elements.js";
+import { useElementOverlay } from "../hooks/useElementOverlay.js";
+const Element = ({
+  name,
+  element
+}) => {
+  return /*#__PURE__*/React.createElement(BaseElement, {
+    name: name,
+    element: element,
+    scope: "elementOverlay"
+  });
+};
+const Elements = () => {
+  return /*#__PURE__*/React.createElement(BaseElements, {
+    scope: "elementOverlay"
+  });
+};
+const empty = undefined;
+const Container = ({
+  position,
+  children
+}) => {
+  const {
+    box
+  } = useElementOverlay();
+  const top = position.top !== empty ? box.top + position.top : empty;
+  const left = position.left !== empty ? box.left + position.left : empty;
+  const bottom = position.bottom !== empty ? box.top + box.height - position.bottom : empty;
+  const right = position.right !== empty ? box.left + box.width - position.right : empty;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-role": "element-overlay",
+    className: "absolute pointer-events-auto",
+    style: {
+      top: top ?? bottom,
+      left: left ?? right,
+      zIndex: 100 + box.depth + 100
+    }
+  }, children);
+};
+export const ElementOverlay = {
+  Element: Object.assign(Element, {
+    Container
+  }),
+  Elements
+};
+
+//# sourceMappingURL=ElementOverlay.js.map

package/BaseEditor/config/ElementOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Element","BaseElement","Elements","BaseElements","useElementOverlay","name","element","createElement","scope","empty","undefined","Container","position","children","box","top","left","bottom","height","right","width","className","style","zIndex","depth","ElementOverlay","Object","assign"],"sources":["ElementOverlay.tsx"],"sourcesContent":["import React from \"react\";\nimport { Element as BaseElement, type ElementProps as BaseElementProps } from \"./Element.js\";\nimport { Elements as BaseElements } from \"./Elements.js\";\nimport { useElementOverlay } from \"~/BaseEditor/hooks/useElementOverlay.js\";\n\nexport type ElementProps = Pick<BaseElementProps, \"name\" | \"element\">;\n\nconst Element = ({ name, element }: ElementProps) => {\n    return <BaseElement name={name} element={element} scope={\"elementOverlay\"} />;\n};\n\nconst Elements = () => {\n    return <BaseElements scope={\"elementOverlay\"} />;\n};\n\nexport interface ElementOverlayContainerProps {\n    position: {\n        top?: number;\n        left?: number;\n        bottom?: number;\n        right?: number;\n    };\n    children: React.ReactNode;\n}\n\nconst empty = undefined;\n\nconst Container = ({ position, children }: ElementOverlayContainerProps) => {\n    const { box } = useElementOverlay();\n\n    const top = position.top !== empty ? box.top + position.top : empty;\n    const left = position.left !== empty ? box.left + position.left : empty;\n    const bottom = position.bottom !== empty ? box.top + box.height - position.bottom : empty;\n    const right = position.right !== empty ? box.left + box.width - position.right : empty;\n\n    return (\n        <div\n            data-role={\"element-overlay\"}\n            className={\"absolute pointer-events-auto\"}\n            style={{ top: top ?? bottom, left: left ?? right, zIndex: 100 + box.depth + 100 }}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport const ElementOverlay = {\n    Element: Object.assign(Element, { Container }),\n    Elements\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO,IAAIC,WAAW;AAC/B,SAASC,QAAQ,IAAIC,YAAY;AACjC,SAASC,iBAAiB;AAI1B,MAAMJ,OAAO,GAAGA,CAAC;EAAEK,IAAI;EAAEC;AAAsB,CAAC,KAAK;EACjD,oBAAOP,KAAA,CAAAQ,aAAA,CAACN,WAAW;IAACI,IAAI,EAAEA,IAAK;IAACC,OAAO,EAAEA,OAAQ;IAACE,KAAK,EAAE;EAAiB,CAAE,CAAC;AACjF,CAAC;AAED,MAAMN,QAAQ,GAAGA,CAAA,KAAM;EACnB,oBAAOH,KAAA,CAAAQ,aAAA,CAACJ,YAAY;IAACK,KAAK,EAAE;EAAiB,CAAE,CAAC;AACpD,CAAC;AAYD,MAAMC,KAAK,GAAGC,SAAS;AAEvB,MAAMC,SAAS,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAuC,CAAC,KAAK;EACxE,MAAM;IAAEC;EAAI,CAAC,GAAGV,iBAAiB,CAAC,CAAC;EAEnC,MAAMW,GAAG,GAAGH,QAAQ,CAACG,GAAG,KAAKN,KAAK,GAAGK,GAAG,CAACC,GAAG,GAAGH,QAAQ,CAACG,GAAG,GAAGN,KAAK;EACnE,MAAMO,IAAI,GAAGJ,QAAQ,CAACI,IAAI,KAAKP,KAAK,GAAGK,GAAG,CAACE,IAAI,GAAGJ,QAAQ,CAACI,IAAI,GAAGP,KAAK;EACvE,MAAMQ,MAAM,GAAGL,QAAQ,CAACK,MAAM,KAAKR,KAAK,GAAGK,GAAG,CAACC,GAAG,GAAGD,GAAG,CAACI,MAAM,GAAGN,QAAQ,CAACK,MAAM,GAAGR,KAAK;EACzF,MAAMU,KAAK,GAAGP,QAAQ,CAACO,KAAK,KAAKV,KAAK,GAAGK,GAAG,CAACE,IAAI,GAAGF,GAAG,CAACM,KAAK,GAAGR,QAAQ,CAACO,KAAK,GAAGV,KAAK;EAEtF,oBACIV,KAAA,CAAAQ,aAAA;IACI,aAAW,iBAAkB;IAC7Bc,SAAS,EAAE,8BAA+B;IAC1CC,KAAK,EAAE;MAAEP,GAAG,EAAEA,GAAG,IAAIE,MAAM;MAAED,IAAI,EAAEA,IAAI,IAAIG,KAAK;MAAEI,MAAM,EAAE,GAAG,GAAGT,GAAG,CAACU,KAAK,GAAG;IAAI;EAAE,GAEjFX,QACA,CAAC;AAEd,CAAC;AAED,OAAO,MAAMY,cAAc,GAAG;EAC1BzB,OAAO,EAAE0B,MAAM,CAACC,MAAM,CAAC3B,OAAO,EAAE;IAAEW;EAAU,CAAC,CAAC;EAC9CT;AACJ,CAAC","ignoreList":[]}

package/BaseEditor/config/IconButton.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 export interface IconButtonProps {
-    icon: JSX.Element;
+    icon: React.JSX.Element;
     label: string;
     disabled?: boolean;
     onClick?: () => void;

package/BaseEditor/config/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","IconButton","BaseIconButton","Tooltip","label","icon","disabled","onClick","createElement","placement","content"],"sources":["IconButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconButton as BaseIconButton } from \"@webiny/ui/Button/index.js\";\nimport { Tooltip } from \"@webiny/ui/Tooltip/index.js\";\n\nexport interface IconButtonProps {\n    icon: JSX.Element;\n    label: string;\n    disabled?: boolean;\n    onClick?: () => void;\n}\n\nexport const IconButton = ({ label, icon, disabled = false, onClick }: IconButtonProps) => {\n    return (\n        <Tooltip placement={\"bottom\"} content={label}>\n            <BaseIconButton icon={icon} onClick={onClick} disabled={disabled} />\n        </Tooltip>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,IAAIC,cAAc,QAAQ,4BAA4B;AACzE,SAASC,OAAO,QAAQ,6BAA6B;AASrD,OAAO,MAAMF,UAAU,GAAGA,CAAC;EAAEG,KAAK;EAAEC,IAAI;EAAEC,QAAQ,GAAG,KAAK;EAAEC;AAAyB,CAAC,KAAK;EACvF,oBACIP,KAAA,CAAAQ,aAAA,CAACL,OAAO;IAACM,SAAS,EAAE,QAAS;IAACC,OAAO,EAAEN;EAAM,gBACzCJ,KAAA,CAAAQ,aAAA,CAACN,cAAc;IAACG,IAAI,EAAEA,IAAK;IAACE,OAAO,EAAEA,OAAQ;IAACD,QAAQ,EAAEA;EAAS,CAAE,CAC9D,CAAC;AAElB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","IconButton","BaseIconButton","Tooltip","label","icon","disabled","onClick","createElement","placement","content"],"sources":["IconButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconButton as BaseIconButton } from \"@webiny/ui/Button/index.js\";\nimport { Tooltip } from \"@webiny/ui/Tooltip/index.js\";\n\nexport interface IconButtonProps {\n    icon: React.JSX.Element;\n    label: string;\n    disabled?: boolean;\n    onClick?: () => void;\n}\n\nexport const IconButton = ({ label, icon, disabled = false, onClick }: IconButtonProps) => {\n    return (\n        <Tooltip placement={\"bottom\"} content={label}>\n            <BaseIconButton icon={icon} onClick={onClick} disabled={disabled} />\n        </Tooltip>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,IAAIC,cAAc,QAAQ,4BAA4B;AACzE,SAASC,OAAO,QAAQ,6BAA6B;AASrD,OAAO,MAAMF,UAAU,GAAGA,CAAC;EAAEG,KAAK;EAAEC,IAAI;EAAEC,QAAQ,GAAG,KAAK;EAAEC;AAAyB,CAAC,KAAK;EACvF,oBACIP,KAAA,CAAAQ,aAAA,CAACL,OAAO;IAACM,SAAS,EAAE,QAAS;IAACC,OAAO,EAAEN;EAAM,gBACzCJ,KAAA,CAAAQ,aAAA,CAACN,cAAc;IAACG,IAAI,EAAEA,IAAK;IAACE,OAAO,EAAEA,OAAQ;IAACD,QAAQ,EAAEA;EAAS,CAAE,CAC9D,CAAC;AAElB,CAAC","ignoreList":[]}

package/BaseEditor/config/IsNotReadOnly.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export interface IsNotReadOnlyProps {
+    children: React.ReactNode;
+}
+export declare const IsNotReadOnly: ({ children }: IsNotReadOnlyProps) => React.JSX.Element | null;

package/BaseEditor/config/IsNotReadOnly.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { useSelectFromEditor } from "../hooks/useSelectFromEditor.js";
+export const IsNotReadOnly = ({
+  children
+}) => {
+  const isEditorReadOnly = useSelectFromEditor(state => state.isReadOnly);
+  if (isEditorReadOnly) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+
+//# sourceMappingURL=IsNotReadOnly.js.map

package/BaseEditor/config/IsNotReadOnly.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useSelectFromEditor","IsNotReadOnly","children","isEditorReadOnly","state","isReadOnly","createElement","Fragment"],"sources":["IsNotReadOnly.tsx"],"sourcesContent":["import React from \"react\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\n\nexport interface IsNotReadOnlyProps {\n    children: React.ReactNode;\n}\n\nexport const IsNotReadOnly = ({ children }: IsNotReadOnlyProps) => {\n    const isEditorReadOnly = useSelectFromEditor(state => state.isReadOnly);\n\n    if (isEditorReadOnly) {\n        return null;\n    }\n\n    return <>{children}</>;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB;AAM5B,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEC;AAA6B,CAAC,KAAK;EAC/D,MAAMC,gBAAgB,GAAGH,mBAAmB,CAACI,KAAK,IAAIA,KAAK,CAACC,UAAU,CAAC;EAEvE,IAAIF,gBAAgB,EAAE;IAClB,OAAO,IAAI;EACf;EAEA,oBAAOJ,KAAA,CAAAO,aAAA,CAAAP,KAAA,CAAAQ,QAAA,QAAGL,QAAW,CAAC;AAC1B,CAAC","ignoreList":[]}

package/BaseEditor/config/IsReadOnly.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export interface IsNotReadOnlyProps {
+    children: React.ReactNode;
+}
+export declare const IsReadOnly: ({ children }: IsNotReadOnlyProps) => React.JSX.Element | null;

package/BaseEditor/config/IsReadOnly.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { useSelectFromEditor } from "../hooks/useSelectFromEditor.js";
+export const IsReadOnly = ({
+  children
+}) => {
+  const isEditorReadOnly = useSelectFromEditor(state => state.isReadOnly);
+  if (isEditorReadOnly) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+
+//# sourceMappingURL=IsReadOnly.js.map

package/BaseEditor/config/IsReadOnly.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useSelectFromEditor","IsReadOnly","children","isEditorReadOnly","state","isReadOnly","createElement","Fragment"],"sources":["IsReadOnly.tsx"],"sourcesContent":["import React from \"react\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\n\nexport interface IsNotReadOnlyProps {\n    children: React.ReactNode;\n}\n\nexport const IsReadOnly = ({ children }: IsNotReadOnlyProps) => {\n    const isEditorReadOnly = useSelectFromEditor(state => state.isReadOnly);\n\n    if (isEditorReadOnly) {\n        return null;\n    }\n\n    return <>{children}</>;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB;AAM5B,OAAO,MAAMC,UAAU,GAAGA,CAAC;EAAEC;AAA6B,CAAC,KAAK;EAC5D,MAAMC,gBAAgB,GAAGH,mBAAmB,CAACI,KAAK,IAAIA,KAAK,CAACC,UAAU,CAAC;EAEvE,IAAIF,gBAAgB,EAAE;IAClB,OAAO,IAAI;EACf;EAEA,oBAAOJ,KAAA,CAAAO,aAAA,CAAAP,KAAA,CAAAQ,QAAA,QAAGL,QAAW,CAAC;AAC1B,CAAC","ignoreList":[]}

package/BaseEditor/config/Layout.js

@@ -3,6 +3,9 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import React, { useEffect } from "react";
 import { makeDecoratable } from "@webiny/react-composition";
 import { EditorConfig } from "./EditorConfig.js";
+import { IsNotReadOnly } from "./IsNotReadOnly.js";
+import { useReservedUISpace } from "../hooks/useReservedUISpace.js";
+import { useDocumentEditor } from "../../DocumentEditor/index.js";
 const EditorLayoutContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "e17ht31x0"
 } : {
@@ -13,10 +16,16 @@ const EditorLayoutContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV =
   styles: "height:100%;overflow:hidden"
 } : {
   name: "3ytxc3",
-  styles: "height:100%;overflow:hidden/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxheW91dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS3dDIiwiZmlsZSI6IkxheW91dC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgdXNlRWZmZWN0IH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBtYWtlRGVjb3JhdGFibGUgfSBmcm9tIFwiQHdlYmlueS9yZWFjdC1jb21wb3NpdGlvblwiO1xuaW1wb3J0IHsgRWRpdG9yQ29uZmlnIH0gZnJvbSBcIi4vRWRpdG9yQ29uZmlnLmpzXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuY29uc3QgRWRpdG9yTGF5b3V0Q29udGFpbmVyID0gc3R5bGVkLmRpdmBcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcbmA7XG5cbmV4cG9ydCBjb25zdCBMYXlvdXQgPSBtYWtlRGVjb3JhdGFibGUoXCJFZGl0b3JMYXlvdXRcIiwgKCkgPT4ge1xuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICAgIGNvbnN0IGN1cnJlbnRPdmVyZmxvdyA9IGRvY3VtZW50LmJvZHkuc3R5bGUub3ZlcmZsb3c7XG4gICAgICAgIGRvY3VtZW50LmJvZHkuc3R5bGUub3ZlcmZsb3cgPSBcImhpZGRlblwiO1xuICAgICAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgICAgICAgZG9jdW1lbnQuYm9keS5zdHlsZS5vdmVyZmxvdyA9IGN1cnJlbnRPdmVyZmxvdztcbiAgICAgICAgfTtcbiAgICB9LCBbXSk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8RWRpdG9yTGF5b3V0Q29udGFpbmVyPlxuICAgICAgICAgICAgPEVkaXRvckNvbmZpZy5VaS5Ub3BCYXIgLz5cbiAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPXtcImZsZXggZmxleC1yb3dcIn0+XG4gICAgICAgICAgICAgICAgPEVkaXRvckNvbmZpZy5VaS5Ub29sYmFyIC8+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9e1wiZmxleC1hdXRvXCJ9PlxuICAgICAgICAgICAgICAgICAgICA8RWRpdG9yQ29uZmlnLlVpLkNvbnRlbnQgLz5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICA8RWRpdG9yQ29uZmlnLlVpLlNpZGViYXIgLz5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPEVkaXRvckNvbmZpZy5VaS5FbGVtZW50cyBncm91cD17XCJvdmVybGF5c1wifSAvPlxuICAgICAgICA8L0VkaXRvckxheW91dENvbnRhaW5lcj5cbiAgICApO1xufSk7XG4iXX0= */",
+  styles: "height:100%;overflow:hidden/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxheW91dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUXdDIiwiZmlsZSI6IkxheW91dC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgdXNlRWZmZWN0IH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBtYWtlRGVjb3JhdGFibGUgfSBmcm9tIFwiQHdlYmlueS9yZWFjdC1jb21wb3NpdGlvblwiO1xuaW1wb3J0IHsgRWRpdG9yQ29uZmlnIH0gZnJvbSBcIi4vRWRpdG9yQ29uZmlnLmpzXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IElzTm90UmVhZE9ubHkgfSBmcm9tIFwifi9CYXNlRWRpdG9yL2NvbmZpZy9Jc05vdFJlYWRPbmx5LmpzXCI7XG5pbXBvcnQgeyB1c2VSZXNlcnZlZFVJU3BhY2UgfSBmcm9tIFwifi9CYXNlRWRpdG9yL2hvb2tzL3VzZVJlc2VydmVkVUlTcGFjZS5qc1wiO1xuaW1wb3J0IHsgdXNlRG9jdW1lbnRFZGl0b3IgfSBmcm9tIFwifi9Eb2N1bWVudEVkaXRvci9pbmRleC5qc1wiO1xuXG5jb25zdCBFZGl0b3JMYXlvdXRDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICAgIGhlaWdodDogMTAwJTtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuYDtcblxuZXhwb3J0IGNvbnN0IExheW91dCA9IG1ha2VEZWNvcmF0YWJsZShcIkVkaXRvckxheW91dFwiLCAoKSA9PiB7XG4gICAgY29uc3QgZWRpdG9yID0gdXNlRG9jdW1lbnRFZGl0b3IoKTtcblxuICAgIHVzZVJlc2VydmVkVUlTcGFjZShkaW1lbnNpb25zID0+IHtcbiAgICAgICAgZWRpdG9yLnVwZGF0ZUVkaXRvcihzdGF0ZSA9PiB7XG4gICAgICAgICAgICBzdGF0ZS51aVJlc2VydmVkU3BhY2UgPSBkaW1lbnNpb25zO1xuICAgICAgICB9KTtcbiAgICB9KTtcblxuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICAgIGNvbnN0IGN1cnJlbnRPdmVyZmxvdyA9IGRvY3VtZW50LmJvZHkuc3R5bGUub3ZlcmZsb3c7XG4gICAgICAgIGRvY3VtZW50LmJvZHkuc3R5bGUub3ZlcmZsb3cgPSBcImhpZGRlblwiO1xuICAgICAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgICAgICAgZG9jdW1lbnQuYm9keS5zdHlsZS5vdmVyZmxvdyA9IGN1cnJlbnRPdmVyZmxvdztcbiAgICAgICAgfTtcbiAgICB9LCBbXSk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8RWRpdG9yTGF5b3V0Q29udGFpbmVyPlxuICAgICAgICAgICAgPEVkaXRvckNvbmZpZy5VaS5Ub3BCYXIgLz5cbiAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPXtcImZsZXggZmxleC1yb3cgYm9yZGVyLXNvbGlkIGJvcmRlci10LTEgYm9yZGVyLW5ldXRyYWwtZGltbWVkXCJ9PlxuICAgICAgICAgICAgICAgIDxJc05vdFJlYWRPbmx5PlxuICAgICAgICAgICAgICAgICAgICA8RWRpdG9yQ29uZmlnLlVpLlRvb2xiYXIgLz5cbiAgICAgICAgICAgICAgICA8L0lzTm90UmVhZE9ubHk+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9e1wiZmxleC1hdXRvXCJ9PlxuICAgICAgICAgICAgICAgICAgICA8RWRpdG9yQ29uZmlnLlVpLkNvbnRlbnQgLz5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICA8SXNOb3RSZWFkT25seT5cbiAgICAgICAgICAgICAgICAgICAgPEVkaXRvckNvbmZpZy5VaS5TaWRlYmFyIC8+XG4gICAgICAgICAgICAgICAgPC9Jc05vdFJlYWRPbmx5PlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8RWRpdG9yQ29uZmlnLlVpLkVsZW1lbnRzIGdyb3VwPXtcIm92ZXJsYXlzXCJ9IC8+XG4gICAgICAgIDwvRWRpdG9yTGF5b3V0Q29udGFpbmVyPlxuICAgICk7XG59KTtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 export const Layout = makeDecoratable("EditorLayout", () => {
+  const editor = useDocumentEditor();
+  useReservedUISpace(dimensions => {
+    editor.updateEditor(state => {
+      state.uiReservedSpace = dimensions;
+    });
+  });
   useEffect(() => {
     const currentOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -25,10 +34,10 @@ export const Layout = makeDecoratable("EditorLayout", () => {
     };
   }, []);
   return /*#__PURE__*/React.createElement(EditorLayoutContainer, null, /*#__PURE__*/React.createElement(EditorConfig.Ui.TopBar, null), /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-row"
-  }, /*#__PURE__*/React.createElement(EditorConfig.Ui.Toolbar, null), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-row border-solid border-t-1 border-neutral-dimmed"
+  }, /*#__PURE__*/React.createElement(IsNotReadOnly, null, /*#__PURE__*/React.createElement(EditorConfig.Ui.Toolbar, null)), /*#__PURE__*/React.createElement("div", {
     className: "flex-auto"
-  }, /*#__PURE__*/React.createElement(EditorConfig.Ui.Content, null)), /*#__PURE__*/React.createElement(EditorConfig.Ui.Sidebar, null)), /*#__PURE__*/React.createElement(EditorConfig.Ui.Elements, {
+  }, /*#__PURE__*/React.createElement(EditorConfig.Ui.Content, null)), /*#__PURE__*/React.createElement(IsNotReadOnly, null, /*#__PURE__*/React.createElement(EditorConfig.Ui.Sidebar, null))), /*#__PURE__*/React.createElement(EditorConfig.Ui.Elements, {
     group: "overlays"
   }));
 });

package/BaseEditor/config/Layout.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","makeDecoratable","EditorConfig","EditorLayoutContainer","_styled","process","env","NODE_ENV","target","label","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","Layout","currentOverflow","document","body","style","overflow","createElement","Ui","TopBar","className","Toolbar","Content","Sidebar","Elements","group"],"sources":["Layout.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { EditorConfig } from \"./EditorConfig.js\";\nimport styled from \"@emotion/styled\";\n\nconst EditorLayoutContainer = styled.div`\n    height: 100%;\n    overflow: hidden;\n`;\n\nexport const Layout = makeDecoratable(\"EditorLayout\", () => {\n    useEffect(() => {\n        const currentOverflow = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n        return () => {\n            document.body.style.overflow = currentOverflow;\n        };\n    }, []);\n\n    return (\n        <EditorLayoutContainer>\n            <EditorConfig.Ui.TopBar />\n            <div className={\"flex flex-row\"}>\n                <EditorConfig.Ui.Toolbar />\n                <div className={\"flex-auto\"}>\n                    <EditorConfig.Ui.Content />\n                </div>\n                <EditorConfig.Ui.Sidebar />\n            </div>\n            <EditorConfig.Ui.Elements group={\"overlays\"} />\n        </EditorLayoutContainer>\n    );\n});\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,YAAY;AAGrB,MAAMC,qBAAqB,gBAAAC,OAAA,QAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,QAAA,EAAAC;AAAA,EAG1B;AAED,OAAO,MAAMC,MAAM,GAAGb,eAAe,CAAC,cAAc,EAAE,MAAM;EACxDD,SAAS,CAAC,MAAM;IACZ,MAAMe,eAAe,GAAGC,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,QAAQ;IACpDH,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,QAAQ,GAAG,QAAQ;IACvC,OAAO,MAAM;MACTH,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,QAAQ,GAAGJ,eAAe;IAClD,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIhB,KAAA,CAAAqB,aAAA,CAACjB,qBAAqB,qBAClBJ,KAAA,CAAAqB,aAAA,CAAClB,YAAY,CAACmB,EAAE,CAACC,MAAM,MAAE,CAAC,eAC1BvB,KAAA,CAAAqB,aAAA;IAAKG,SAAS,EAAE;EAAgB,gBAC5BxB,KAAA,CAAAqB,aAAA,CAAClB,YAAY,CAACmB,EAAE,CAACG,OAAO,MAAE,CAAC,eAC3BzB,KAAA,CAAAqB,aAAA;IAAKG,SAAS,EAAE;EAAY,gBACxBxB,KAAA,CAAAqB,aAAA,CAAClB,YAAY,CAACmB,EAAE,CAACI,OAAO,MAAE,CACzB,CAAC,eACN1B,KAAA,CAAAqB,aAAA,CAAClB,YAAY,CAACmB,EAAE,CAACK,OAAO,MAAE,CACzB,CAAC,eACN3B,KAAA,CAAAqB,aAAA,CAAClB,YAAY,CAACmB,EAAE,CAACM,QAAQ;IAACC,KAAK,EAAE;EAAW,CAAE,CAC3B,CAAC;AAEhC,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useEffect","makeDecoratable","EditorConfig","IsNotReadOnly","useReservedUISpace","useDocumentEditor","EditorLayoutContainer","_styled","process","env","NODE_ENV","target","label","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","Layout","editor","dimensions","updateEditor","state","uiReservedSpace","currentOverflow","document","body","style","overflow","createElement","Ui","TopBar","className","Toolbar","Content","Sidebar","Elements","group"],"sources":["Layout.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { EditorConfig } from \"./EditorConfig.js\";\nimport styled from \"@emotion/styled\";\nimport { IsNotReadOnly } from \"~/BaseEditor/config/IsNotReadOnly.js\";\nimport { useReservedUISpace } from \"~/BaseEditor/hooks/useReservedUISpace.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\n\nconst EditorLayoutContainer = styled.div`\n    height: 100%;\n    overflow: hidden;\n`;\n\nexport const Layout = makeDecoratable(\"EditorLayout\", () => {\n    const editor = useDocumentEditor();\n\n    useReservedUISpace(dimensions => {\n        editor.updateEditor(state => {\n            state.uiReservedSpace = dimensions;\n        });\n    });\n\n    useEffect(() => {\n        const currentOverflow = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n        return () => {\n            document.body.style.overflow = currentOverflow;\n        };\n    }, []);\n\n    return (\n        <EditorLayoutContainer>\n            <EditorConfig.Ui.TopBar />\n            <div className={\"flex flex-row border-solid border-t-1 border-neutral-dimmed\"}>\n                <IsNotReadOnly>\n                    <EditorConfig.Ui.Toolbar />\n                </IsNotReadOnly>\n                <div className={\"flex-auto\"}>\n                    <EditorConfig.Ui.Content />\n                </div>\n                <IsNotReadOnly>\n                    <EditorConfig.Ui.Sidebar />\n                </IsNotReadOnly>\n            </div>\n            <EditorConfig.Ui.Elements group={\"overlays\"} />\n        </EditorLayoutContainer>\n    );\n});\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,YAAY;AAErB,SAASC,aAAa;AACtB,SAASC,kBAAkB;AAC3B,SAASC,iBAAiB;AAE1B,MAAMC,qBAAqB,gBAAAC,OAAA,QAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,QAAA,EAAAC;AAAA,EAG1B;AAED,OAAO,MAAMC,MAAM,GAAGhB,eAAe,CAAC,cAAc,EAAE,MAAM;EACxD,MAAMiB,MAAM,GAAGb,iBAAiB,CAAC,CAAC;EAElCD,kBAAkB,CAACe,UAAU,IAAI;IAC7BD,MAAM,CAACE,YAAY,CAACC,KAAK,IAAI;MACzBA,KAAK,CAACC,eAAe,GAAGH,UAAU;IACtC,CAAC,CAAC;EACN,CAAC,CAAC;EAEFnB,SAAS,CAAC,MAAM;IACZ,MAAMuB,eAAe,GAAGC,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,QAAQ;IACpDH,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,QAAQ,GAAG,QAAQ;IACvC,OAAO,MAAM;MACTH,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,QAAQ,GAAGJ,eAAe;IAClD,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIxB,KAAA,CAAA6B,aAAA,CAACtB,qBAAqB,qBAClBP,KAAA,CAAA6B,aAAA,CAAC1B,YAAY,CAAC2B,EAAE,CAACC,MAAM,MAAE,CAAC,eAC1B/B,KAAA,CAAA6B,aAAA;IAAKG,SAAS,EAAE;EAA8D,gBAC1EhC,KAAA,CAAA6B,aAAA,CAACzB,aAAa,qBACVJ,KAAA,CAAA6B,aAAA,CAAC1B,YAAY,CAAC2B,EAAE,CAACG,OAAO,MAAE,CACf,CAAC,eAChBjC,KAAA,CAAA6B,aAAA;IAAKG,SAAS,EAAE;EAAY,gBACxBhC,KAAA,CAAA6B,aAAA,CAAC1B,YAAY,CAAC2B,EAAE,CAACI,OAAO,MAAE,CACzB,CAAC,eACNlC,KAAA,CAAA6B,aAAA,CAACzB,aAAa,qBACVJ,KAAA,CAAA6B,aAAA,CAAC1B,YAAY,CAAC2B,EAAE,CAACK,OAAO,MAAE,CACf,CACd,CAAC,eACNnC,KAAA,CAAA6B,aAAA,CAAC1B,YAAY,CAAC2B,EAAE,CAACM,QAAQ;IAACC,KAAK,EAAE;EAAW,CAAE,CAC3B,CAAC;AAEhC,CAAC,CAAC","ignoreList":[]}

package/BaseEditor/config/Sidebar/Layout.js

@@ -4,6 +4,8 @@ import { Tabs } from "@webiny/admin-ui";
 import { Sidebar } from "./Sidebar.js";
 export const Layout = makeDecoratable("SidebarLayout", () => {
   return /*#__PURE__*/React.createElement("div", {
+    "data-role": "editor-sidebar",
+    "data-affects-preview": "width",
     className: "bg-neutral-base border-l-sm border-l-neutral-dimmed"
   }, /*#__PURE__*/React.createElement(Tabs, {
     size: "md",

package/BaseEditor/config/Sidebar/Layout.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","Tabs","Sidebar","Layout","createElement","className","size","spacing","separator","defaultValue","tabs","Elements","group","key"],"sources":["Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport { Tabs } from \"@webiny/admin-ui\";\nimport { Sidebar } from \"./Sidebar.js\";\n\nexport const Layout = makeDecoratable(\"SidebarLayout\", () => {\n    return (\n        <div className={\"bg-neutral-base border-l-sm border-l-neutral-dimmed\"}>\n            <Tabs\n                size=\"md\"\n                spacing={\"md\"}\n                separator={true}\n                defaultValue={\"element\"}\n                tabs={[<Sidebar.Elements group=\"groups\" key={\"groups\"} />]}\n            />\n        </div>\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,mBAAmB;AACnD,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,OAAO;AAEhB,OAAO,MAAMC,MAAM,GAAGH,eAAe,CAAC,eAAe,EAAE,MAAM;EACzD,oBACID,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAE;EAAsD,gBAClEN,KAAA,CAAAK,aAAA,CAACH,IAAI;IACDK,IAAI,EAAC,IAAI;IACTC,OAAO,EAAE,IAAK;IACdC,SAAS,EAAE,IAAK;IAChBC,YAAY,EAAE,SAAU;IACxBC,IAAI,EAAE,cAACX,KAAA,CAAAK,aAAA,CAACF,OAAO,CAACS,QAAQ;MAACC,KAAK,EAAC,QAAQ;MAACC,GAAG,EAAE;IAAS,CAAE,CAAC;EAAE,CAC9D,CACA,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","makeDecoratable","Tabs","Sidebar","Layout","createElement","className","size","spacing","separator","defaultValue","tabs","Elements","group","key"],"sources":["Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport { Tabs } from \"@webiny/admin-ui\";\nimport { Sidebar } from \"./Sidebar.js\";\n\nexport const Layout = makeDecoratable(\"SidebarLayout\", () => {\n    return (\n        <div\n            data-role=\"editor-sidebar\"\n            data-affects-preview={\"width\"}\n            className={\"bg-neutral-base border-l-sm border-l-neutral-dimmed\"}\n        >\n            <Tabs\n                size=\"md\"\n                spacing={\"md\"}\n                separator={true}\n                defaultValue={\"element\"}\n                tabs={[<Sidebar.Elements group=\"groups\" key={\"groups\"} />]}\n            />\n        </div>\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,mBAAmB;AACnD,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,OAAO;AAEhB,OAAO,MAAMC,MAAM,GAAGH,eAAe,CAAC,eAAe,EAAE,MAAM;EACzD,oBACID,KAAA,CAAAK,aAAA;IACI,aAAU,gBAAgB;IAC1B,wBAAsB,OAAQ;IAC9BC,SAAS,EAAE;EAAsD,gBAEjEN,KAAA,CAAAK,aAAA,CAACH,IAAI;IACDK,IAAI,EAAC,IAAI;IACTC,OAAO,EAAE,IAAK;IACdC,SAAS,EAAE,IAAK;IAChBC,YAAY,EAAE,SAAU;IACxBC,IAAI,EAAE,cAACX,KAAA,CAAAK,aAAA,CAACF,OAAO,CAACS,QAAQ;MAACC,KAAK,EAAC,QAAQ;MAACC,GAAG,EAAE;IAAS,CAAE,CAAC;EAAE,CAC9D,CACA,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}

package/BaseEditor/config/Sidebar/Tab.d.ts

@@ -7,7 +7,7 @@ export interface TabProps {
     name: string;
     label: string;
     noPadding?: boolean;
-    element: JSX.Element;
+    element: React.JSX.Element;
     disabled?: boolean;
     visible?: boolean;
 }

package/BaseEditor/config/Sidebar/Tab.js

@@ -12,7 +12,7 @@ export const TabContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV ===
   styles: "display:flex;position:relative;flex-direction:column;height:calc(100vh - 44px - 49px);overflow-y:auto;&::-webkit-scrollbar{width:1px;}&::-webkit-scrollbar-track{box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3);}&::-webkit-scrollbar-thumb{background-color:darkgrey;outline:1px solid slategrey;}"
 } : {
   name: "k20ukt",
-  styles: "display:flex;position:relative;flex-direction:column;height:calc(100vh - 44px - 49px);overflow-y:auto;&::-webkit-scrollbar{width:1px;}&::-webkit-scrollbar-track{box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3);}&::-webkit-scrollbar-thumb{background-color:darkgrey;outline:1px solid slategrey;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhYi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSTRCIiwiZmlsZSI6IlRhYi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IFRhYnMgfSBmcm9tIFwiQHdlYmlueS9hZG1pbi11aVwiO1xuXG5leHBvcnQgY29uc3QgVGFiQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICAgIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG4gICAgaGVpZ2h0OiBcImNhbGMoMTAwdmggLSA0NHB4IC0gNDlweClcIiwgLy8gU3VidHJhY3QgdG9wLWJhciBhbmQgdGFiLWhlYWRlciBoZWlnaHRcbiAgICBvdmVyZmxvd1k6IFwiYXV0b1wiLFxuICAgIC8vIFN0eWxlIHNjcm9sbGJhclxuICAgIFwiJjo6LXdlYmtpdC1zY3JvbGxiYXJcIjoge1xuICAgICAgICB3aWR0aDogMVxuICAgIH0sXG4gICAgXCImOjotd2Via2l0LXNjcm9sbGJhci10cmFja1wiOiB7XG4gICAgICAgIGJveFNoYWRvdzogXCJpbnNldCAwIDAgNnB4IHJnYmEoMCwgMCwgMCwgMC4zKVwiXG4gICAgfSxcbiAgICBcIiY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iXCI6IHtcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcImRhcmtncmV5XCIsXG4gICAgICAgIG91dGxpbmU6IFwiMXB4IHNvbGlkIHNsYXRlZ3JleVwiXG4gICAgfVxufSk7XG5cbmV4cG9ydCBpbnRlcmZhY2UgVGFiUHJvcHMge1xuICAgIG5hbWU6IHN0cmluZztcbiAgICBsYWJlbDogc3RyaW5nO1xuICAgIG5vUGFkZGluZz86IGJvb2xlYW47XG4gICAgZWxlbWVudDogSlNYLkVsZW1lbnQ7XG4gICAgZGlzYWJsZWQ/OiBib29sZWFuO1xuICAgIHZpc2libGU/OiBib29sZWFuO1xufVxuXG5leHBvcnQgY29uc3QgVGFiID0gKHsgbmFtZSwgbGFiZWwsIGRpc2FibGVkLCBlbGVtZW50LCB2aXNpYmxlLCBub1BhZGRpbmcgfTogVGFiUHJvcHMpID0+IHtcbiAgICByZXR1cm4gKFxuICAgICAgICA8VGFicy5UYWJcbiAgICAgICAgICAgIGNsYXNzTmFtZT17bm9QYWRkaW5nID8gXCJwLTBcIiA6IHVuZGVmaW5lZH1cbiAgICAgICAgICAgIHZhbHVlPXtuYW1lfVxuICAgICAgICAgICAgdHJpZ2dlcj17bGFiZWx9XG4gICAgICAgICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgICAgICB2aXNpYmxlPXt2aXNpYmxlfVxuICAgICAgICAgICAgY29udGVudD17PFRhYkNvbnRhaW5lcj57ZWxlbWVudH08L1RhYkNvbnRhaW5lcj59XG4gICAgICAgIC8+XG4gICAgKTtcbn07XG4iXX0= */",
+  styles: "display:flex;position:relative;flex-direction:column;height:calc(100vh - 44px - 49px);overflow-y:auto;&::-webkit-scrollbar{width:1px;}&::-webkit-scrollbar-track{box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3);}&::-webkit-scrollbar-thumb{background-color:darkgrey;outline:1px solid slategrey;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhYi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSTRCIiwiZmlsZSI6IlRhYi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IFRhYnMgfSBmcm9tIFwiQHdlYmlueS9hZG1pbi11aVwiO1xuXG5leHBvcnQgY29uc3QgVGFiQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICAgIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG4gICAgaGVpZ2h0OiBcImNhbGMoMTAwdmggLSA0NHB4IC0gNDlweClcIiwgLy8gU3VidHJhY3QgdG9wLWJhciBhbmQgdGFiLWhlYWRlciBoZWlnaHRcbiAgICBvdmVyZmxvd1k6IFwiYXV0b1wiLFxuICAgIC8vIFN0eWxlIHNjcm9sbGJhclxuICAgIFwiJjo6LXdlYmtpdC1zY3JvbGxiYXJcIjoge1xuICAgICAgICB3aWR0aDogMVxuICAgIH0sXG4gICAgXCImOjotd2Via2l0LXNjcm9sbGJhci10cmFja1wiOiB7XG4gICAgICAgIGJveFNoYWRvdzogXCJpbnNldCAwIDAgNnB4IHJnYmEoMCwgMCwgMCwgMC4zKVwiXG4gICAgfSxcbiAgICBcIiY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iXCI6IHtcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcImRhcmtncmV5XCIsXG4gICAgICAgIG91dGxpbmU6IFwiMXB4IHNvbGlkIHNsYXRlZ3JleVwiXG4gICAgfVxufSk7XG5cbmV4cG9ydCBpbnRlcmZhY2UgVGFiUHJvcHMge1xuICAgIG5hbWU6IHN0cmluZztcbiAgICBsYWJlbDogc3RyaW5nO1xuICAgIG5vUGFkZGluZz86IGJvb2xlYW47XG4gICAgZWxlbWVudDogUmVhY3QuSlNYLkVsZW1lbnQ7XG4gICAgZGlzYWJsZWQ/OiBib29sZWFuO1xuICAgIHZpc2libGU/OiBib29sZWFuO1xufVxuXG5leHBvcnQgY29uc3QgVGFiID0gKHsgbmFtZSwgbGFiZWwsIGRpc2FibGVkLCBlbGVtZW50LCB2aXNpYmxlLCBub1BhZGRpbmcgfTogVGFiUHJvcHMpID0+IHtcbiAgICByZXR1cm4gKFxuICAgICAgICA8VGFicy5UYWJcbiAgICAgICAgICAgIGNsYXNzTmFtZT17bm9QYWRkaW5nID8gXCJwLTBcIiA6IHVuZGVmaW5lZH1cbiAgICAgICAgICAgIHZhbHVlPXtuYW1lfVxuICAgICAgICAgICAgdHJpZ2dlcj17bGFiZWx9XG4gICAgICAgICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgICAgICB2aXNpYmxlPXt2aXNpYmxlfVxuICAgICAgICAgICAgY29udGVudD17PFRhYkNvbnRhaW5lcj57ZWxlbWVudH08L1RhYkNvbnRhaW5lcj59XG4gICAgICAgIC8+XG4gICAgKTtcbn07XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 export const Tab = ({

package/BaseEditor/config/Sidebar/Tab.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Tabs","TabContainer","_styled","process","env","NODE_ENV","target","label","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","Tab","disabled","element","visible","noPadding","createElement","className","undefined","value","trigger","content"],"sources":["Tab.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Tabs } from \"@webiny/admin-ui\";\n\nexport const TabContainer = styled(\"div\")({\n    display: \"flex\",\n    position: \"relative\",\n    flexDirection: \"column\",\n    height: \"calc(100vh - 44px - 49px)\", // Subtract top-bar and tab-header height\n    overflowY: \"auto\",\n    // Style scrollbar\n    \"&::-webkit-scrollbar\": {\n        width: 1\n    },\n    \"&::-webkit-scrollbar-track\": {\n        boxShadow: \"inset 0 0 6px rgba(0, 0, 0, 0.3)\"\n    },\n    \"&::-webkit-scrollbar-thumb\": {\n        backgroundColor: \"darkgrey\",\n        outline: \"1px solid slategrey\"\n    }\n});\n\nexport interface TabProps {\n    name: string;\n    label: string;\n    noPadding?: boolean;\n    element: JSX.Element;\n    disabled?: boolean;\n    visible?: boolean;\n}\n\nexport const Tab = ({ name, label, disabled, element, visible, noPadding }: TabProps) => {\n    return (\n        <Tabs.Tab\n            className={noPadding ? \"p-0\" : undefined}\n            value={name}\n            trigger={label}\n            disabled={disabled}\n            visible={visible}\n            content={<TabContainer>{element}</TabContainer>}\n        />\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,IAAI,QAAQ,kBAAkB;AAEvC,OAAO,MAAMC,YAAY,gBAAGC,OAAA,CAAO,KAAK,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,QAAA,EAAAC;AAAA,CAiBxC,CAAC;AAWF,OAAO,MAAMC,GAAG,GAAGA,CAAC;EAAEJ,IAAI;EAAED,KAAK;EAAEM,QAAQ;EAAEC,OAAO;EAAEC,OAAO;EAAEC;AAAoB,CAAC,KAAK;EACrF,oBACIjB,KAAA,CAAAkB,aAAA,CAACjB,IAAI,CAACY,GAAG;IACLM,SAAS,EAAEF,SAAS,GAAG,KAAK,GAAGG,SAAU;IACzCC,KAAK,EAAEZ,IAAK;IACZa,OAAO,EAAEd,KAAM;IACfM,QAAQ,EAAEA,QAAS;IACnBE,OAAO,EAAEA,OAAQ;IACjBO,OAAO,eAAEvB,KAAA,CAAAkB,aAAA,CAAChB,YAAY,QAAEa,OAAsB;EAAE,CACnD,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Tabs","TabContainer","_styled","process","env","NODE_ENV","target","label","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","Tab","disabled","element","visible","noPadding","createElement","className","undefined","value","trigger","content"],"sources":["Tab.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Tabs } from \"@webiny/admin-ui\";\n\nexport const TabContainer = styled(\"div\")({\n    display: \"flex\",\n    position: \"relative\",\n    flexDirection: \"column\",\n    height: \"calc(100vh - 44px - 49px)\", // Subtract top-bar and tab-header height\n    overflowY: \"auto\",\n    // Style scrollbar\n    \"&::-webkit-scrollbar\": {\n        width: 1\n    },\n    \"&::-webkit-scrollbar-track\": {\n        boxShadow: \"inset 0 0 6px rgba(0, 0, 0, 0.3)\"\n    },\n    \"&::-webkit-scrollbar-thumb\": {\n        backgroundColor: \"darkgrey\",\n        outline: \"1px solid slategrey\"\n    }\n});\n\nexport interface TabProps {\n    name: string;\n    label: string;\n    noPadding?: boolean;\n    element: React.JSX.Element;\n    disabled?: boolean;\n    visible?: boolean;\n}\n\nexport const Tab = ({ name, label, disabled, element, visible, noPadding }: TabProps) => {\n    return (\n        <Tabs.Tab\n            className={noPadding ? \"p-0\" : undefined}\n            value={name}\n            trigger={label}\n            disabled={disabled}\n            visible={visible}\n            content={<TabContainer>{element}</TabContainer>}\n        />\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,IAAI,QAAQ,kBAAkB;AAEvC,OAAO,MAAMC,YAAY,gBAAGC,OAAA,CAAO,KAAK,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,QAAA,EAAAC;AAAA,CAiBxC,CAAC;AAWF,OAAO,MAAMC,GAAG,GAAGA,CAAC;EAAEJ,IAAI;EAAED,KAAK;EAAEM,QAAQ;EAAEC,OAAO;EAAEC,OAAO;EAAEC;AAAoB,CAAC,KAAK;EACrF,oBACIjB,KAAA,CAAAkB,aAAA,CAACjB,IAAI,CAACY,GAAG;IACLM,SAAS,EAAEF,SAAS,GAAG,KAAK,GAAGG,SAAU;IACzCC,KAAK,EAAEZ,IAAK;IACZa,OAAO,EAAEd,KAAM;IACfM,QAAQ,EAAEA,QAAS;IACnBE,OAAO,EAAEA,OAAQ;IACjBO,OAAO,eAAEvB,KAAA,CAAAkB,aAAA,CAAChB,YAAY,QAAEa,OAAsB;EAAE,CACnD,CAAC;AAEV,CAAC","ignoreList":[]}

package/BaseEditor/config/Toolbar/Layout.js

@@ -3,7 +3,7 @@ import { Toolbar } from "./Toolbar.js";
 import { Tabs } from "@webiny/admin-ui/Tabs/index.js";
 export const Layout = () => {
   return /*#__PURE__*/React.createElement("div", {
-    "data-role": "toolbar-layout",
+    "data-role": "editor-toolbar",
     className: "bg-neutral-base border-r-sm border-r-neutral-dimmed w-[300px] h-full"
   }, /*#__PURE__*/React.createElement(Tabs, {
     size: "md",

package/BaseEditor/config/Toolbar/Layout.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Toolbar","Tabs","Layout","createElement","className","size","spacing","defaultValue","tabs","Elements","key","group","separator"],"sources":["Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport { Toolbar } from \"./Toolbar.js\";\nimport { Tabs } from \"@webiny/admin-ui/Tabs/index.js\";\n\nexport const Layout = () => {\n    return (\n        <div\n            data-role={\"toolbar-layout\"}\n            className={\"bg-neutral-base border-r-sm border-r-neutral-dimmed w-[300px] h-full\"}\n        >\n            <Tabs\n                size=\"md\"\n                spacing={\"md\"}\n                defaultValue={\"insert\"}\n                tabs={[<Toolbar.Elements key=\"tabs\" group={\"tabs\"} />]}\n                separator={true}\n            />\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO;AAChB,SAASC,IAAI,QAAQ,gCAAgC;AAErD,OAAO,MAAMC,MAAM,GAAGA,CAAA,KAAM;EACxB,oBACIH,KAAA,CAAAI,aAAA;IACI,aAAW,gBAAiB;IAC5BC,SAAS,EAAE;EAAuE,gBAElFL,KAAA,CAAAI,aAAA,CAACF,IAAI;IACDI,IAAI,EAAC,IAAI;IACTC,OAAO,EAAE,IAAK;IACdC,YAAY,EAAE,QAAS;IACvBC,IAAI,EAAE,cAACT,KAAA,CAAAI,aAAA,CAACH,OAAO,CAACS,QAAQ;MAACC,GAAG,EAAC,MAAM;MAACC,KAAK,EAAE;IAAO,CAAE,CAAC,CAAE;IACvDC,SAAS,EAAE;EAAK,CACnB,CACA,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Toolbar","Tabs","Layout","createElement","className","size","spacing","defaultValue","tabs","Elements","key","group","separator"],"sources":["Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport { Toolbar } from \"./Toolbar.js\";\nimport { Tabs } from \"@webiny/admin-ui/Tabs/index.js\";\n\nexport const Layout = () => {\n    return (\n        <div\n            data-role={\"editor-toolbar\"}\n            className={\"bg-neutral-base border-r-sm border-r-neutral-dimmed w-[300px] h-full\"}\n        >\n            <Tabs\n                size=\"md\"\n                spacing={\"md\"}\n                defaultValue={\"insert\"}\n                tabs={[<Toolbar.Elements key=\"tabs\" group={\"tabs\"} />]}\n                separator={true}\n            />\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO;AAChB,SAASC,IAAI,QAAQ,gCAAgC;AAErD,OAAO,MAAMC,MAAM,GAAGA,CAAA,KAAM;EACxB,oBACIH,KAAA,CAAAI,aAAA;IACI,aAAW,gBAAiB;IAC5BC,SAAS,EAAE;EAAuE,gBAElFL,KAAA,CAAAI,aAAA,CAACF,IAAI;IACDI,IAAI,EAAC,IAAI;IACTC,OAAO,EAAE,IAAK;IACdC,YAAY,EAAE,QAAS;IACvBC,IAAI,EAAE,cAACT,KAAA,CAAAI,aAAA,CAACH,OAAO,CAACS,QAAQ;MAACC,GAAG,EAAC,MAAM;MAACC,KAAK,EAAE;IAAO,CAAE,CAAC,CAAE;IACvDC,SAAS,EAAE;EAAK,CACnB,CACA,CAAC;AAEd,CAAC","ignoreList":[]}

package/BaseEditor/config/Toolbar/Toolbar.js

@@ -7,7 +7,8 @@ import { createGetId } from "../createGetId.js";
 const SCOPE = "toolbar";
 const BaseToolbar = makeDecoratable("ToolbarLayout", () => {
   return /*#__PURE__*/React.createElement("div", {
-    className: "w-[300px] flex-none"
+    className: "w-[300px] flex-none",
+    "data-affects-preview": "width"
   }, /*#__PURE__*/React.createElement(Layout, null));
 });
 const getElementId = createGetId(SCOPE)();

package/BaseEditor/config/Toolbar/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","Element","BaseElement","Layout","Elements","BaseElements","createGetId","SCOPE","BaseToolbar","createElement","className","getElementId","BaseToolbarElement","props","Object","assign","scope","id","name","before","undefined","after","Toolbar"],"sources":["Toolbar.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { ElementProps as BaseElementProps } from \"../Element.js\";\nimport { Element as BaseElement } from \"../Element.js\";\nimport { Layout } from \"./Layout.js\";\nimport type { ElementsProps as BaseElementsProps } from \"../Elements.js\";\nimport { Elements as BaseElements } from \"../Elements.js\";\nimport { createGetId } from \"../createGetId.js\";\n\nconst SCOPE = \"toolbar\";\n\nconst BaseToolbar = makeDecoratable(\"ToolbarLayout\", () => {\n    return (\n        <div className={\"w-[300px] flex-none\"}>\n            <Layout />\n        </div>\n    );\n});\n\nconst getElementId = createGetId(SCOPE)();\n\nexport type ElementProps = Omit<BaseElementProps, \"scope\" | \"id\">;\n\nconst BaseToolbarElement = makeDecoratable(\"ToolbarElement\", (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 ElementsProps = Omit<BaseElementsProps, \"scope\">;\n\nconst Elements = makeDecoratable(\"ToolbarElements\", (props: ElementsProps) => {\n    return <BaseElements {...props} scope={SCOPE} />;\n});\n\nexport const Toolbar = Object.assign(BaseToolbar, {\n    Layout,\n    Element: BaseToolbarElement,\n    Elements\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,SAASC,OAAO,IAAIC,WAAW;AAC/B,SAASC,MAAM;AAEf,SAASC,QAAQ,IAAIC,YAAY;AACjC,SAASC,WAAW;AAEpB,MAAMC,KAAK,GAAG,SAAS;AAEvB,MAAMC,WAAW,GAAGR,eAAe,CAAC,eAAe,EAAE,MAAM;EACvD,oBACID,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAE;EAAsB,gBAClCX,KAAA,CAAAU,aAAA,CAACN,MAAM,MAAE,CACR,CAAC;AAEd,CAAC,CAAC;AAEF,MAAMQ,YAAY,GAAGL,WAAW,CAACC,KAAK,CAAC,CAAC,CAAC;AAIzC,MAAMK,kBAAkB,GAAGZ,eAAe,CAAC,gBAAgB,EAAGa,KAAmB,IAAK;EAClF,oBACId,KAAA,CAAAU,aAAA,CAACP,WAAW,EAAAY,MAAA,CAAAC,MAAA,KACJF,KAAK;IACTG,KAAK,EAAET,KAAM;IACbU,EAAE,EAAEN,YAAY,CAACE,KAAK,CAACK,IAAI,CAAE;IAC7BC,MAAM,EAAEN,KAAK,CAACM,MAAM,GAAGR,YAAY,CAACE,KAAK,CAACM,MAAM,CAAC,GAAGC,SAAU;IAC9DC,KAAK,EAAER,KAAK,CAACQ,KAAK,GAAGV,YAAY,CAACE,KAAK,CAACQ,KAAK,CAAC,GAAGD;EAAU,EAC9D,CAAC;AAEV,CAAC,CAAC;AAIF,MAAMhB,QAAQ,GAAGJ,eAAe,CAAC,iBAAiB,EAAGa,KAAoB,IAAK;EAC1E,oBAAOd,KAAA,CAAAU,aAAA,CAACJ,YAAY,EAAAS,MAAA,CAAAC,MAAA,KAAKF,KAAK;IAAEG,KAAK,EAAET;EAAM,EAAE,CAAC;AACpD,CAAC,CAAC;AAEF,OAAO,MAAMe,OAAO,GAAGR,MAAM,CAACC,MAAM,CAACP,WAAW,EAAE;EAC9CL,MAAM;EACNF,OAAO,EAAEW,kBAAkB;EAC3BR;AACJ,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","makeDecoratable","Element","BaseElement","Layout","Elements","BaseElements","createGetId","SCOPE","BaseToolbar","createElement","className","getElementId","BaseToolbarElement","props","Object","assign","scope","id","name","before","undefined","after","Toolbar"],"sources":["Toolbar.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { ElementProps as BaseElementProps } from \"../Element.js\";\nimport { Element as BaseElement } from \"../Element.js\";\nimport { Layout } from \"./Layout.js\";\nimport type { ElementsProps as BaseElementsProps } from \"../Elements.js\";\nimport { Elements as BaseElements } from \"../Elements.js\";\nimport { createGetId } from \"../createGetId.js\";\n\nconst SCOPE = \"toolbar\";\n\nconst BaseToolbar = makeDecoratable(\"ToolbarLayout\", () => {\n    return (\n        <div className={\"w-[300px] flex-none\"} data-affects-preview={\"width\"}>\n            <Layout />\n        </div>\n    );\n});\n\nconst getElementId = createGetId(SCOPE)();\n\nexport type ElementProps = Omit<BaseElementProps, \"scope\" | \"id\">;\n\nconst BaseToolbarElement = makeDecoratable(\"ToolbarElement\", (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 ElementsProps = Omit<BaseElementsProps, \"scope\">;\n\nconst Elements = makeDecoratable(\"ToolbarElements\", (props: ElementsProps) => {\n    return <BaseElements {...props} scope={SCOPE} />;\n});\n\nexport const Toolbar = Object.assign(BaseToolbar, {\n    Layout,\n    Element: BaseToolbarElement,\n    Elements\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,SAASC,OAAO,IAAIC,WAAW;AAC/B,SAASC,MAAM;AAEf,SAASC,QAAQ,IAAIC,YAAY;AACjC,SAASC,WAAW;AAEpB,MAAMC,KAAK,GAAG,SAAS;AAEvB,MAAMC,WAAW,GAAGR,eAAe,CAAC,eAAe,EAAE,MAAM;EACvD,oBACID,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAE,qBAAsB;IAAC,wBAAsB;EAAQ,gBACjEX,KAAA,CAAAU,aAAA,CAACN,MAAM,MAAE,CACR,CAAC;AAEd,CAAC,CAAC;AAEF,MAAMQ,YAAY,GAAGL,WAAW,CAACC,KAAK,CAAC,CAAC,CAAC;AAIzC,MAAMK,kBAAkB,GAAGZ,eAAe,CAAC,gBAAgB,EAAGa,KAAmB,IAAK;EAClF,oBACId,KAAA,CAAAU,aAAA,CAACP,WAAW,EAAAY,MAAA,CAAAC,MAAA,KACJF,KAAK;IACTG,KAAK,EAAET,KAAM;IACbU,EAAE,EAAEN,YAAY,CAACE,KAAK,CAACK,IAAI,CAAE;IAC7BC,MAAM,EAAEN,KAAK,CAACM,MAAM,GAAGR,YAAY,CAACE,KAAK,CAACM,MAAM,CAAC,GAAGC,SAAU;IAC9DC,KAAK,EAAER,KAAK,CAACQ,KAAK,GAAGV,YAAY,CAACE,KAAK,CAACQ,KAAK,CAAC,GAAGD;EAAU,EAC9D,CAAC;AAEV,CAAC,CAAC;AAIF,MAAMhB,QAAQ,GAAGJ,eAAe,CAAC,iBAAiB,EAAGa,KAAoB,IAAK;EAC1E,oBAAOd,KAAA,CAAAU,aAAA,CAACJ,YAAY,EAAAS,MAAA,CAAAC,MAAA,KAAKF,KAAK;IAAEG,KAAK,EAAET;EAAM,EAAE,CAAC;AACpD,CAAC,CAAC;AAEF,OAAO,MAAMe,OAAO,GAAGR,MAAM,CAACC,MAAM,CAACP,WAAW,EAAE;EAC9CL,MAAM;EACNF,OAAO,EAAEW,kBAAkB;EAC3BR;AACJ,CAAC,CAAC","ignoreList":[]}

package/BaseEditor/config/TopBar/Layout.js

@@ -5,6 +5,7 @@ import { TopBar } from "./TopBar.js";
 export const Layout = makeDecoratable("TopBarLayout", () => {
   return /*#__PURE__*/React.createElement(HeaderBar, {
     "data-role": "top-bar-layout",
+    "data-affects-preview": "height",
     start: /*#__PURE__*/React.createElement(TopBar.Elements, {
       group: "left"
     }),

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

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","HeaderBar","TopBar","Layout","createElement","start","Elements","group","middle","end","className"],"sources":["Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport { HeaderBar } from \"@webiny/admin-ui\";\nimport { TopBar } from \"./TopBar.js\";\n\nexport const Layout = makeDecoratable(\"TopBarLayout\", () => {\n    return (\n        <HeaderBar\n            data-role={\"top-bar-layout\"}\n            start={<TopBar.Elements group={\"left\"} />}\n            middle={<TopBar.Elements group={\"center\"} />}\n            end={\n                <div className={\"flex gap-x-sm\"}>\n                    <TopBar.Elements group={\"actions\"} />\n                </div>\n            }\n        />\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,mBAAmB;AACnD,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,MAAM;AAEf,OAAO,MAAMC,MAAM,GAAGH,eAAe,CAAC,cAAc,EAAE,MAAM;EACxD,oBACID,KAAA,CAAAK,aAAA,CAACH,SAAS;IACN,aAAW,gBAAiB;IAC5BI,KAAK,eAAEN,KAAA,CAAAK,aAAA,CAACF,MAAM,CAACI,QAAQ;MAACC,KAAK,EAAE;IAAO,CAAE,CAAE;IAC1CC,MAAM,eAAET,KAAA,CAAAK,aAAA,CAACF,MAAM,CAACI,QAAQ;MAACC,KAAK,EAAE;IAAS,CAAE,CAAE;IAC7CE,GAAG,eACCV,KAAA,CAAAK,aAAA;MAAKM,SAAS,EAAE;IAAgB,gBAC5BX,KAAA,CAAAK,aAAA,CAACF,MAAM,CAACI,QAAQ;MAACC,KAAK,EAAE;IAAU,CAAE,CACnC;EACR,CACJ,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","makeDecoratable","HeaderBar","TopBar","Layout","createElement","start","Elements","group","middle","end","className"],"sources":["Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport { HeaderBar } from \"@webiny/admin-ui\";\nimport { TopBar } from \"./TopBar.js\";\n\nexport const Layout = makeDecoratable(\"TopBarLayout\", () => {\n    return (\n        <HeaderBar\n            data-role={\"top-bar-layout\"}\n            data-affects-preview={\"height\"}\n            start={<TopBar.Elements group={\"left\"} />}\n            middle={<TopBar.Elements group={\"center\"} />}\n            end={\n                <div className={\"flex gap-x-sm\"}>\n                    <TopBar.Elements group={\"actions\"} />\n                </div>\n            }\n        />\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,mBAAmB;AACnD,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,MAAM;AAEf,OAAO,MAAMC,MAAM,GAAGH,eAAe,CAAC,cAAc,EAAE,MAAM;EACxD,oBACID,KAAA,CAAAK,aAAA,CAACH,SAAS;IACN,aAAW,gBAAiB;IAC5B,wBAAsB,QAAS;IAC/BI,KAAK,eAAEN,KAAA,CAAAK,aAAA,CAACF,MAAM,CAACI,QAAQ;MAACC,KAAK,EAAE;IAAO,CAAE,CAAE;IAC1CC,MAAM,eAAET,KAAA,CAAAK,aAAA,CAACF,MAAM,CAACI,QAAQ;MAACC,KAAK,EAAE;IAAS,CAAE,CAAE;IAC7CE,GAAG,eACCV,KAAA,CAAAK,aAAA;MAAKM,SAAS,EAAE;IAAgB,gBAC5BX,KAAA,CAAAK,aAAA,CAACF,MAAM,CAACI,QAAQ;MAACC,KAAK,EAAE;IAAU,CAAE,CACnC;EACR,CACJ,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}

package/BaseEditor/config/TopBar/MenuItem.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 export interface MenuItemProps {
     label: string;
     onClick: () => void;
-    icon: JSX.Element;
+    icon: React.JSX.Element;
     "data-testid"?: string;
     disabled?: boolean;
 }

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

@@ -1 +1 @@
-{"version":3,"names":["React","ListItemGraphic","Icon","MenuItem","UiMenuItem","props","createElement","onClick","disabled","Boolean","icon","label"],"sources":["MenuItem.tsx"],"sourcesContent":["import React from \"react\";\nimport { ListItemGraphic } from \"@webiny/ui/List/index.js\";\nimport { Icon } from \"@webiny/ui/Icon/index.js\";\nimport { MenuItem as UiMenuItem } from \"@webiny/ui/Menu/index.js\";\n\nexport interface MenuItemProps {\n    label: string;\n    onClick: () => void;\n    icon: JSX.Element;\n    \"data-testid\"?: string;\n    disabled?: boolean;\n}\n\nexport const MenuItem = (props: MenuItemProps) => {\n    return (\n        <UiMenuItem\n            onClick={props.onClick}\n            disabled={Boolean(props.disabled)}\n            data-testid={props[\"data-testid\"]}\n        >\n            <ListItemGraphic>\n                <Icon icon={props.icon} />\n            </ListItemGraphic>\n            {props.label}\n        </UiMenuItem>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,QAAQ,IAAIC,UAAU,QAAQ,0BAA0B;AAUjE,OAAO,MAAMD,QAAQ,GAAIE,KAAoB,IAAK;EAC9C,oBACIL,KAAA,CAAAM,aAAA,CAACF,UAAU;IACPG,OAAO,EAAEF,KAAK,CAACE,OAAQ;IACvBC,QAAQ,EAAEC,OAAO,CAACJ,KAAK,CAACG,QAAQ,CAAE;IAClC,eAAaH,KAAK,CAAC,aAAa;EAAE,gBAElCL,KAAA,CAAAM,aAAA,CAACL,eAAe,qBACZD,KAAA,CAAAM,aAAA,CAACJ,IAAI;IAACQ,IAAI,EAAEL,KAAK,CAACK;EAAK,CAAE,CACZ,CAAC,EACjBL,KAAK,CAACM,KACC,CAAC;AAErB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","ListItemGraphic","Icon","MenuItem","UiMenuItem","props","createElement","onClick","disabled","Boolean","icon","label"],"sources":["MenuItem.tsx"],"sourcesContent":["import React from \"react\";\nimport { ListItemGraphic } from \"@webiny/ui/List/index.js\";\nimport { Icon } from \"@webiny/ui/Icon/index.js\";\nimport { MenuItem as UiMenuItem } from \"@webiny/ui/Menu/index.js\";\n\nexport interface MenuItemProps {\n    label: string;\n    onClick: () => void;\n    icon: React.JSX.Element;\n    \"data-testid\"?: string;\n    disabled?: boolean;\n}\n\nexport const MenuItem = (props: MenuItemProps) => {\n    return (\n        <UiMenuItem\n            onClick={props.onClick}\n            disabled={Boolean(props.disabled)}\n            data-testid={props[\"data-testid\"]}\n        >\n            <ListItemGraphic>\n                <Icon icon={props.icon} />\n            </ListItemGraphic>\n            {props.label}\n        </UiMenuItem>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,QAAQ,IAAIC,UAAU,QAAQ,0BAA0B;AAUjE,OAAO,MAAMD,QAAQ,GAAIE,KAAoB,IAAK;EAC9C,oBACIL,KAAA,CAAAM,aAAA,CAACF,UAAU;IACPG,OAAO,EAAEF,KAAK,CAACE,OAAQ;IACvBC,QAAQ,EAAEC,OAAO,CAACJ,KAAK,CAACG,QAAQ,CAAE;IAClC,eAAaH,KAAK,CAAC,aAAa;EAAE,gBAElCL,KAAA,CAAAM,aAAA,CAACL,eAAe,qBACZD,KAAA,CAAAM,aAAA,CAACJ,IAAI;IAACQ,IAAI,EAAEL,KAAK,CAACK;EAAK,CAAE,CACZ,CAAC,EACjBL,KAAK,CAACM,KACC,CAAC;AAErB,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/{Preview → AddressBar}/AddressBar.js

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react";
 import { BreakpointSelector } from "./BreakpointSelector.js";
-import { PreviewInNewTab } from "./AddressBar/PreviewInNewTab.js";
-import { OpenInNewTab } from "./AddressBar/OpenInNewTab.js";
-import { RefreshPreview } from "./AddressBar/RefreshPreview.js";
+import { PreviewInNewTab } from "./PreviewInNewTab.js";
+import { OpenInNewTab } from "./OpenInNewTab.js";
+import { RefreshPreview } from "./RefreshPreview.js";
 import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument.js";
-import { PreviewDomain } from "./AddressBar/PreviewDomain.js";
-import { usePreviewDomain } from "./usePreviewDomain.js";
+import { PreviewDomain } from "./PreviewDomain.js";
+import { usePreviewDomain } from "../usePreviewDomain.js";
 export const AddressBar = () => {
   const path = useSelectFromDocument(document => document.properties.path);
   const {
@@ -19,7 +19,8 @@ export const AddressBar = () => {
     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"
+    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", {

package/BaseEditor/defaultConfig/Content/AddressBar/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.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":[]}

package/BaseEditor/defaultConfig/Content/{Preview/AddressBar → AddressBar}/PreviewDomain.js

@@ -4,8 +4,8 @@ import { Button, DropdownMenu, IconButton, Separator, Input, cn } from "@webiny/
 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";
+import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
+import { Commands } from "../../../index.js";
 export const PreviewDomain = () => {
   const editor = useDocumentEditor();
   const [isOpen, setIsOpen] = useState(false);

package/BaseEditor/defaultConfig/Content/{Preview/AddressBar → AddressBar}/RefreshPreview.js

@@ -1,8 +1,8 @@
 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/index.js";
-import { Commands } from "../../../../index.js";
+import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
+import { Commands } from "../../../index.js";
 export const RefreshPreview = () => {
   const editor = useDocumentEditor();
   const refresh = useCallback(() => {

package/BaseEditor/defaultConfig/Content/{Preview/AddressBar → AddressBar}/usePreviewLink.js

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
-import { useIframeUrl } from "../useIframeUrl.js";
-import { useSelectFromDocument } from "../../../../hooks/useSelectFromDocument.js";
+import { useIframeUrl } from "../Preview/useIframeUrl.js";
+import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument.js";
 export const usePreviewLink = () => {
   const iframeUrl = useIframeUrl();
   const id = useSelectFromDocument(document => document.id);

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

@@ -43,7 +43,8 @@ export const Breadcrumbs = () => {
   return /*#__PURE__*/React.createElement("ul", {
     className: breadcrumbs,
     "data-role": "content-breadcrumbs",
-    "data-hover-manager": "ignore"
+    "data-hover-manager": "ignore",
+    "data-affects-preview": "height"
   }, items.map(({
     id,
     label

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

@@ -1 +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.js\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { $getComponentManifestByElementId } from \"~/editorSdk/utils/index.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\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":[]}
+{"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.js\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { $getComponentManifestByElementId } from \"~/editorSdk/utils/index.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\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\n            className={breadcrumbs}\n            data-role={\"content-breadcrumbs\"}\n            data-hover-manager={\"ignore\"}\n            data-affects-preview={\"height\"}\n        >\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;IACIC,SAAS,EAAEzB,WAAY;IACvB,aAAW,qBAAsB;IACjC,sBAAoB,QAAS;IAC7B,wBAAsB;EAAS,GAE9BS,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/styles.js

@@ -1,70 +1,12 @@
-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(--color-neutral-dimmed)",
-  borderTop: "1px solid var( --color-neutral-dimmed)",
-  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": {
-    background: "var(--color-neutral-muted)"
-  },
-  "& li .element:hover:after": {
-    borderLeftColor: "var(--color-neutral-muted) !important"
-  }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import { css } from "@emotion/css";
+export const breadcrumbs = /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+  name: "8m3j7n",
+  styles: "display:flex;z-index:100;flex-direction:row;padding:0;position:absolute;left:300px;bottom:0;width:calc(100% - 600px);height:31px;background-color:var(--color-neutral-dimmed);border-top:1px solid var( --color-neutral-dimmed);font-size:12px;overflow:hidden;> li{cursor:pointer;display:flex;& .element{color:var(--text-neutral-strong);text-decoration:none;text-transform: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;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:20px solid hsla(300, 2%, calc(92% - var(--element-count) * 1%), 1)   ;position:absolute;top:50%;margin-top:-50px;left:100%;z-index:2;}& .element::before{content:\" \";display:block;width:0;height:0;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:20px solid hsla(0, 0%, 100%, 1);position:absolute;top:50%;margin-top:-50px;margin-left:1px;left:100%;z-index:1;}}& li:first-child .element{padding-left:10px;}& li .element:hover{background:var(--color-neutral-muted);}& li .element:hover:after{border-left-color:var(--color-neutral-muted) !important;}"
+} : {
+  name: "1ko0d81-breadcrumbs",
+  styles: "display:flex;z-index:100;flex-direction:row;padding:0;position:absolute;left:300px;bottom:0;width:calc(100% - 600px);height:31px;background-color:var(--color-neutral-dimmed);border-top:1px solid var( --color-neutral-dimmed);font-size:12px;overflow:hidden;> li{cursor:pointer;display:flex;& .element{color:var(--text-neutral-strong);text-decoration:none;text-transform: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;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:20px solid hsla(300, 2%, calc(92% - var(--element-count) * 1%), 1)   ;position:absolute;top:50%;margin-top:-50px;left:100%;z-index:2;}& .element::before{content:\" \";display:block;width:0;height:0;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:20px solid hsla(0, 0%, 100%, 1);position:absolute;top:50%;margin-top:-50px;margin-left:1px;left:100%;z-index:1;}}& li:first-child .element{padding-left:10px;}& li .element:hover{background:var(--color-neutral-muted);}& li .element:hover:after{border-left-color:var(--color-neutral-muted) !important;};label:breadcrumbs;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFMkIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL2Nzc1wiO1xuXG5leHBvcnQgY29uc3QgYnJlYWRjcnVtYnMgPSBjc3Moe1xuICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgIHpJbmRleDogMTAwLFxuICAgIGZsZXhEaXJlY3Rpb246IFwicm93XCIsXG4gICAgcGFkZGluZzogMCxcbiAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgIGxlZnQ6IDMwMCxcbiAgICBib3R0b206IDAsXG4gICAgd2lkdGg6IFwiY2FsYygxMDAlIC0gNjAwcHgpXCIsXG4gICAgaGVpZ2h0OiBcIjMxcHhcIixcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IFwidmFyKC0tY29sb3ItbmV1dHJhbC1kaW1tZWQpXCIsXG4gICAgYm9yZGVyVG9wOiBcIjFweCBzb2xpZCB2YXIoIC0tY29sb3ItbmV1dHJhbC1kaW1tZWQpXCIsXG4gICAgZm9udFNpemU6IFwiMTJweFwiLFxuICAgIG92ZXJmbG93OiBcImhpZGRlblwiLFxuICAgIFwiPiBsaVwiOiB7XG4gICAgICAgIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gICAgICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgICAgICBcIiYgLmVsZW1lbnRcIjoge1xuICAgICAgICAgICAgY29sb3I6IFwidmFyKC0tdGV4dC1uZXV0cmFsLXN0cm9uZylcIixcbiAgICAgICAgICAgIHRleHREZWNvcmF0aW9uOiBcIm5vbmVcIixcbiAgICAgICAgICAgIHRleHRUcmFuc2Zvcm06IFwiY2FwaXRhbGl6ZVwiLFxuICAgICAgICAgICAgcGFkZGluZzogXCI1cHggMCA1cHggMzBweFwiLFxuICAgICAgICAgICAgYmFja2dyb3VuZDogXCJoc2xhKDMwMCwgMiUsIGNhbGMoOTIlIC0gdmFyKC0tZWxlbWVudC1jb3VudCkgKiAxJSksIDEpXCIsXG4gICAgICAgICAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICAgICAgICAgICAgZGlzcGxheTogXCJibG9ja1wiXG4gICAgICAgIH0sXG4gICAgICAgIFwiJiAuZWxlbWVudDo6YWZ0ZXJcIjoge1xuICAgICAgICAgICAgY29udGVudDogJ1wiIFwiJyxcbiAgICAgICAgICAgIGRpc3BsYXk6IFwiYmxvY2tcIixcbiAgICAgICAgICAgIHdpZHRoOiBcIjBcIixcbiAgICAgICAgICAgIGhlaWdodDogXCIwXCIsXG4gICAgICAgICAgICBib3JkZXJUb3A6IFwiNTBweCBzb2xpZCB0cmFuc3BhcmVudFwiLFxuICAgICAgICAgICAgYm9yZGVyQm90dG9tOiBcIjUwcHggc29saWQgdHJhbnNwYXJlbnRcIixcbiAgICAgICAgICAgIGJvcmRlckxlZnQ6IFwiMjBweCBzb2xpZCBoc2xhKDMwMCwgMiUsIGNhbGMoOTIlIC0gdmFyKC0tZWxlbWVudC1jb3VudCkgKiAxJSksIDEpICAgXCIsXG4gICAgICAgICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgICAgICAgdG9wOiBcIjUwJVwiLFxuICAgICAgICAgICAgbWFyZ2luVG9wOiBcIi01MHB4XCIsXG4gICAgICAgICAgICBsZWZ0OiBcIjEwMCVcIixcbiAgICAgICAgICAgIHpJbmRleDogMlxuICAgICAgICB9LFxuICAgICAgICBcIiYgLmVsZW1lbnQ6OmJlZm9yZVwiOiB7XG4gICAgICAgICAgICBjb250ZW50OiAnXCIgXCInLFxuICAgICAgICAgICAgZGlzcGxheTogXCJibG9ja1wiLFxuICAgICAgICAgICAgd2lkdGg6IFwiMFwiLFxuICAgICAgICAgICAgaGVpZ2h0OiBcIjBcIixcbiAgICAgICAgICAgIGJvcmRlclRvcDogXCI1MHB4IHNvbGlkIHRyYW5zcGFyZW50XCIsXG4gICAgICAgICAgICBib3JkZXJCb3R0b206IFwiNTBweCBzb2xpZCB0cmFuc3BhcmVudFwiLFxuICAgICAgICAgICAgYm9yZGVyTGVmdDogXCIyMHB4IHNvbGlkIGhzbGEoMCwgMCUsIDEwMCUsIDEpXCIsXG4gICAgICAgICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgICAgICAgdG9wOiBcIjUwJVwiLFxuICAgICAgICAgICAgbWFyZ2luVG9wOiBcIi01MHB4XCIsXG4gICAgICAgICAgICBtYXJnaW5MZWZ0OiBcIjFweFwiLFxuICAgICAgICAgICAgbGVmdDogXCIxMDAlXCIsXG4gICAgICAgICAgICB6SW5kZXg6IDFcbiAgICAgICAgfVxuICAgIH0sXG4gICAgXCImIGxpOmZpcnN0LWNoaWxkIC5lbGVtZW50XCI6IHsgcGFkZGluZ0xlZnQ6IFwiMTBweFwiIH0sXG5cbiAgICAvLyBIYW5kbGUgYWN0aXZlIHN0YXRlXG4gICAgXCImIGxpIC5lbGVtZW50OmhvdmVyXCI6IHtcbiAgICAgICAgYmFja2dyb3VuZDogXCJ2YXIoLS1jb2xvci1uZXV0cmFsLW11dGVkKVwiXG4gICAgfSxcbiAgICBcIiYgbGkgLmVsZW1lbnQ6aG92ZXI6YWZ0ZXJcIjoge1xuICAgICAgICBib3JkZXJMZWZ0Q29sb3I6IFwidmFyKC0tY29sb3ItbmV1dHJhbC1tdXRlZCkgIWltcG9ydGFudFwiXG4gICAgfVxufSk7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 
 //# sourceMappingURL=styles.js.map