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

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

@@ -1,28 +1,27 @@
-import React from "react";
+import react from "react";
 import { CopyButton, Text, Tooltip, useToast } from "@webiny/admin-ui";
 import { usePreviewLink } from "./usePreviewLink.js";
-export const PreviewInNewTab = () => {
-  const link = usePreviewLink();
-  const {
-    showToast
-  } = useToast();
-  const confirmClipboard = () => {
-    showToast({
-      title: "Preview link copied to clipboard!"
+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"
+        })
     });
-  };
-  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"
-    })
-  });
 };
+export { PreviewInNewTab };
 
 //# sourceMappingURL=PreviewInNewTab.js.map

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

@@ -1 +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.js\";\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":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/AddressBar/PreviewInNewTab.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/AddressBar/PreviewInNewTab.tsx"],"sourcesContent":["import React from \"react\";\nimport { CopyButton, Text, Tooltip, useToast } from \"@webiny/admin-ui\";\nimport { usePreviewLink } from \"./usePreviewLink.js\";\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"],"names":["PreviewInNewTab","link","usePreviewLink","showToast","useToast","confirmClipboard","Tooltip","Text","CopyButton"],"mappings":";;;AAIO,MAAMA,kBAAkB;IAC3B,MAAMC,OAAOC;IACb,MAAM,EAAEC,SAAS,EAAE,GAAGC;IAEtB,MAAMC,mBAAmB;QACrBF,UAAU;YACN,OAAO;QACX;IACJ;IAEA,OAAO,WAAP,GACI,oBAACG,SAAOA;QACJ,uBAAS,oBAACC,MAAIA;YAAC,MAAK;WAAK;QACzB,MAAK;QACL,uBACI,oBAACC,YAAUA;YAAC,MAAK;YAAK,OAAOP;YAAM,QAAQI;YAAkB,SAAS;;;AAItF"}

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

@@ -1,25 +1,26 @@
-import React, { useCallback } from "react";
+import react, { useCallback } from "react";
 import { IconButton, Text, Tooltip } from "@webiny/admin-ui";
-import { ReactComponent as RefreshIcon } from "@webiny/icons/refresh.svg";
+import { ReactComponent } from "@webiny/icons/refresh.svg";
 import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
 import { Commands } from "../../../index.js";
-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"
-    })
-  });
+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(ReactComponent, null),
+            size: "md",
+            onClick: refresh,
+            variant: "ghost"
+        })
+    });
 };
+export { RefreshPreview };
 
 //# sourceMappingURL=RefreshPreview.js.map

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

@@ -1 +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/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\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":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/AddressBar/RefreshPreview.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/AddressBar/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/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\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"],"names":["RefreshPreview","editor","useDocumentEditor","refresh","useCallback","Commands","Tooltip","Text","IconButton","RefreshIcon"],"mappings":";;;;;AAMO,MAAMA,iBAAiB;IAC1B,MAAMC,SAASC;IAEf,MAAMC,UAAUC,YAAY;QACxBH,OAAO,cAAc,CAACI,SAAS,cAAc;IACjD,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAACC,SAAOA;QACJ,uBAAS,oBAACC,MAAIA;YAAC,MAAK;WAAK;QACzB,MAAK;QACL,uBACI,oBAACC,YAAUA;YAAC,oBAAM,oBAACC,gBAAWA;YAAK,MAAK;YAAK,SAASN;YAAS,SAAS;;;AAIxF"}

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

@@ -1,31 +1,26 @@
 import { useMemo } from "react";
 import { useIframeUrl } from "../Preview/useIframeUrl.js";
 import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument.js";
-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]);
+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);
+        url.searchParams.forEach((_, key)=>{
+            if (key.startsWith("wb.")) url.searchParams.delete(key);
+        });
+        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
+    ]);
 };
+export { usePreviewLink };
 
 //# sourceMappingURL=usePreviewLink.js.map

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

@@ -1 +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.js\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\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":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/AddressBar/usePreviewLink.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/AddressBar/usePreviewLink.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useIframeUrl } from \"~/BaseEditor/defaultConfig/Content/Preview/useIframeUrl.js\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\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"],"names":["usePreviewLink","iframeUrl","useIframeUrl","id","useSelectFromDocument","document","path","documentType","useMemo","url","URL","_","key","String"],"mappings":";;;AAIO,MAAMA,iBAAiB;IAC1B,MAAMC,YAAYC;IAClB,MAAMC,KAAKC,sBAAsBC,CAAAA,WAAYA,SAAS,EAAE;IACxD,MAAMC,OAAOF,sBAAsBC,CAAAA,WAAYA,SAAS,UAAU,CAAC,IAAI;IACvE,MAAME,eAAeH,sBAAsBC,CAAAA,WAAYA,SAAS,QAAQ,CAAC,YAAY;IAErF,OAAOG,QAAQ;QACX,IAAI,CAACP,WACD,OAAO;QAEX,MAAMQ,MAAM,IAAIC,IAAIT;QAGpBQ,IAAI,YAAY,CAAC,OAAO,CAAC,CAACE,GAAGC;YACzB,IAAIA,IAAI,UAAU,CAAC,QACfH,IAAI,YAAY,CAAC,MAAM,CAACG;QAEhC;QAGAH,IAAI,YAAY,CAAC,GAAG,CAAC,cAAc;QACnCA,IAAI,YAAY,CAAC,GAAG,CAAC,WAAWF;QAChCE,IAAI,YAAY,CAAC,GAAG,CAAC,SAASI,OAAOV;QACrCM,IAAI,YAAY,CAAC,GAAG,CAAC,WAAWH;QAChC,OAAOG,IAAI,QAAQ;IACvB,GAAG;QAACR;KAAU;AAClB"}

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

@@ -1,63 +1,57 @@
-import React, { useCallback } from "react";
+import react, { useCallback } from "react";
 import { breadcrumbs } from "./styles.js";
 import { useActiveElement } from "../../../hooks/useActiveElement.js";
 import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument.js";
 import { $getComponentManifestByElementId } from "../../../../editorSdk/utils/index.js";
 import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
 import { Commands } from "../../../index.js";
-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",
-    "data-affects-preview": "height"
-  }, 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))));
+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",
+        "data-affects-preview": "height"
+    }, 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))));
 };
+export { Breadcrumbs };
 
 //# sourceMappingURL=Breadcrumbs.js.map

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\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":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/Breadcrumbs/Breadcrumbs.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Breadcrumbs/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"],"names":["Breadcrumbs","activeElement","useActiveElement","editor","useDocumentEditor","items","useSelectFromDocument","document","element","component","$getComponentManifestByElementId","highlightElement","useCallback","id","Commands","activateElement","breadcrumbs","label","index"],"mappings":";;;;;;;AAQO,MAAMA,cAAc;IACvB,MAAM,CAACC,cAAc,GAAGC;IACxB,MAAMC,SAASC;IAEf,MAAMC,QAAQC,sBACVC,CAAAA;QACI,IAAI,CAACN,eACD,OAAO,EAAE;QAGb,MAAMI,QAAQ,EAAE;QAChB,IAAIG,UAAUD,SAAS,QAAQ,CAACN,cAAc,EAAE,CAAC;QAEjD,MAAOO,QAAS;YACZ,MAAMC,YAAYC,iCAAiCP,QAAQK,QAAQ,EAAE;YACrE,IAAI,CAACC,WACD;YAGJJ,MAAM,IAAI,CAAC;gBACP,IAAIG,QAAQ,EAAE;gBACd,OAAOC,UAAU,KAAK;YAC1B;YAEA,IAAID,QAAQ,MAAM,EAAE,OAAO,QACvB;YAGJA,UAAUD,SAAS,QAAQ,CAACC,QAAQ,MAAM,CAAE,EAAE,CAAC;QACnD;QAEA,OAAOH,MAAM,OAAO;IACxB,GACA;QAACJ,eAAe;KAAG;IAGvB,MAAMU,mBAAmBC,YAAY,CAACC;QAClCV,OAAO,cAAc,CAACW,SAAS,gBAAgB,EAAE;YAAED;QAAG;IAC1D,GAAG,EAAE;IAEL,MAAME,kBAAkBH,YAAY,CAACC;QACjCV,OAAO,cAAc,CAACW,SAAS,aAAa,EAAE;YAAED;QAAG;IACvD,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAAC;QACG,WAAWG;QACX,aAAW;QACX,sBAAoB;QACpB,wBAAsB;OAErBX,MAAM,GAAG,CAAC,CAAC,EAAEQ,EAAE,EAAEI,KAAK,EAAE,EAAEC,QAAAA,WAAAA,GACvB,oBAAC;YACG,KAAKL;YACL,aAAa,IAAMF,iBAAiBE;YACpC,SAAS,IAAME,gBAAgBF;yBAE/B,oBAAC;YACG,WAAW;YACX,OAAO;gBAAE,mBAAmBK;YAAM;WAEjCD;AAMzB"}

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

@@ -0,0 +1,21 @@
+import __rslib_svgr_url__0__ from "../../../../static/svg/dual-tone-arrow.ceb892b6.svg";
+import * as __rspack_external_react from "react";
+const SvgDualToneArrow = (props)=>/*#__PURE__*/ __rspack_external_react.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 7,
+        height: 28,
+        fill: "none",
+        viewBox: "0 0 7 28",
+        ...props
+    }, /*#__PURE__*/ __rspack_external_react.createElement("path", {
+        fill: "#858585",
+        d: "M1 0H0l6 14-6 14h1l6-14z"
+    }), /*#__PURE__*/ __rspack_external_react.createElement("path", {
+        fill: "#000",
+        d: "M0 28V0l6 14z"
+    }));
+const dual_tone_arrow = __rslib_svgr_url__0__;
+export default dual_tone_arrow;
+export { SvgDualToneArrow as ReactComponent };
+
+//# sourceMappingURL=dual-tone-arrow.js.map

package/BaseEditor/defaultConfig/Content/Breadcrumbs/dual-tone-arrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Content/Breadcrumbs/dual-tone-arrow.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Breadcrumbs/dual-tone-arrow.svg"],"sourcesContent":["import * as React from \"react\";\nconst SvgDualToneArrow = props => <svg xmlns=\"http://www.w3.org/2000/svg\" width={7} height={28} fill=\"none\" viewBox=\"0 0 7 28\" {...props}><path fill=\"#858585\" d=\"M1 0H0l6 14-6 14h1l6-14z\" /><path fill=\"#000\" d=\"M0 28V0l6 14z\" /></svg>;\nexport { SvgDualToneArrow as ReactComponent };\nexport default \"__RSLIB_SVGR_AUTO_PUBLIC_PATH__static/svg/dual-tone-arrow.ceb892b6.svg\";"],"names":["SvgDualToneArrow","props"],"mappings":";;AACA,MAAMA,mBAAmBC,CAAAA,QAAAA,WAAAA,GAAS,sCAAC;QAAI,OAAM;QAA6B,OAAO;QAAG,QAAQ;QAAI,MAAK;QAAO,SAAQ;QAAY,GAAGA,KAAK;qBAAE,sCAAC;QAAK,MAAK;QAAU,GAAE;sBAA6B,sCAAC;QAAK,MAAK;QAAO,GAAE;;AAElN"}

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

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

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

@@ -1,12 +1,70 @@
-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__
+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"
+    },
+    "& li .element:hover": {
+        background: "var(--color-neutral-muted)"
+    },
+    "& li .element:hover:after": {
+        borderLeftColor: "var(--color-neutral-muted) !important"
+    }
 });
+export { breadcrumbs };
 
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["css","breadcrumbs","process","env","NODE_ENV","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__"],"sources":["styles.ts"],"sourcesContent":["import { css } from \"@emotion/css\";\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(--color-neutral-dimmed)\",\n    borderTop: \"1px solid var( --color-neutral-dimmed)\",\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        background: \"var(--color-neutral-muted)\"\n    },\n    \"& li .element:hover:after\": {\n        borderLeftColor: \"var(--color-neutral-muted) !important\"\n    }\n});\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,cAAc;AAElC,OAAO,MAAMC,WAAW,gBAAGD,GAAG,CAAAE,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,QAAA,EAAAC;AAAA,CAiE7B,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/Breadcrumbs/styles.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Breadcrumbs/styles.ts"],"sourcesContent":["import { css } from \"@emotion/css\";\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(--color-neutral-dimmed)\",\n    borderTop: \"1px solid var( --color-neutral-dimmed)\",\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        background: \"var(--color-neutral-muted)\"\n    },\n    \"& li .element:hover:after\": {\n        borderLeftColor: \"var(--color-neutral-muted) !important\"\n    }\n});\n"],"names":["breadcrumbs","css"],"mappings":";AAEO,MAAMA,cAAcC,IAAI;IAC3B,SAAS;IACT,QAAQ;IACR,eAAe;IACf,SAAS;IACT,UAAU;IACV,MAAM;IACN,QAAQ;IACR,OAAO;IACP,QAAQ;IACR,iBAAiB;IACjB,WAAW;IACX,UAAU;IACV,UAAU;IACV,QAAQ;QACJ,QAAQ;QACR,SAAS;QACT,cAAc;YACV,OAAO;YACP,gBAAgB;YAChB,eAAe;YACf,SAAS;YACT,YAAY;YACZ,UAAU;YACV,SAAS;QACb;QACA,qBAAqB;YACjB,SAAS;YACT,SAAS;YACT,OAAO;YACP,QAAQ;YACR,WAAW;YACX,cAAc;YACd,YAAY;YACZ,UAAU;YACV,KAAK;YACL,WAAW;YACX,MAAM;YACN,QAAQ;QACZ;QACA,sBAAsB;YAClB,SAAS;YACT,SAAS;YACT,OAAO;YACP,QAAQ;YACR,WAAW;YACX,cAAc;YACd,YAAY;YACZ,UAAU;YACV,KAAK;YACL,WAAW;YACX,YAAY;YACZ,MAAM;YACN,QAAQ;QACZ;IACJ;IACA,6BAA6B;QAAE,aAAa;IAAO;IAGnD,uBAAuB;QACnB,YAAY;IAChB;IACA,6BAA6B;QACzB,iBAAiB;IACrB;AACJ"}

package/BaseEditor/defaultConfig/Content/ContentPreviewConfig.js

@@ -1,22 +1,21 @@
-import React from "react";
+import react from "react";
 import { EditorConfig } from "../../index.js";
 import { Breadcrumbs } from "./Breadcrumbs/index.js";
 import { DocumentPreview } from "./Preview/DocumentPreview.js";
 import { AddressBar } from "./AddressBar/AddressBar.js";
-export const ContentPreviewConfig = () => {
-  const {
-    Ui
-  } = EditorConfig;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Ui.Content.Element, {
-    name: "addressBar",
-    element: /*#__PURE__*/React.createElement(AddressBar, null)
-  }), /*#__PURE__*/React.createElement(Ui.Content.Element, {
-    name: "iframe",
-    element: /*#__PURE__*/React.createElement(DocumentPreview, null)
-  }), /*#__PURE__*/React.createElement(Ui.Content.Element, {
-    name: "breadcrumbs",
-    element: /*#__PURE__*/React.createElement(Ui.IsNotReadOnly, null, /*#__PURE__*/React.createElement(Breadcrumbs, null))
-  }));
+const ContentPreviewConfig = ()=>{
+    const { Ui } = EditorConfig;
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Ui.Content.Element, {
+        name: "addressBar",
+        element: /*#__PURE__*/ react.createElement(AddressBar, null)
+    }), /*#__PURE__*/ react.createElement(Ui.Content.Element, {
+        name: "iframe",
+        element: /*#__PURE__*/ react.createElement(DocumentPreview, null)
+    }), /*#__PURE__*/ react.createElement(Ui.Content.Element, {
+        name: "breadcrumbs",
+        element: /*#__PURE__*/ react.createElement(Ui.IsNotReadOnly, null, /*#__PURE__*/ react.createElement(Breadcrumbs, null))
+    }));
 };
+export { ContentPreviewConfig };
 
 //# sourceMappingURL=ContentPreviewConfig.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","EditorConfig","Breadcrumbs","DocumentPreview","AddressBar","ContentPreviewConfig","Ui","createElement","Fragment","Content","Element","name","element","IsNotReadOnly"],"sources":["ContentPreviewConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport { EditorConfig } from \"~/BaseEditor/index.js\";\nimport { Breadcrumbs } from \"./Breadcrumbs/index.js\";\nimport { DocumentPreview } from \"./Preview/DocumentPreview.js\";\nimport { AddressBar } from \"./AddressBar/AddressBar.js\";\n\nexport const ContentPreviewConfig = () => {\n    const { Ui } = EditorConfig;\n\n    return (\n        <>\n            <Ui.Content.Element name=\"addressBar\" element={<AddressBar />} />\n            <Ui.Content.Element name=\"iframe\" element={<DocumentPreview />} />\n            <Ui.Content.Element\n                name={\"breadcrumbs\"}\n                element={\n                    <Ui.IsNotReadOnly>\n                        <Breadcrumbs />\n                    </Ui.IsNotReadOnly>\n                }\n            />\n        </>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY;AACrB,SAASC,WAAW;AACpB,SAASC,eAAe;AACxB,SAASC,UAAU;AAEnB,OAAO,MAAMC,oBAAoB,GAAGA,CAAA,KAAM;EACtC,MAAM;IAAEC;EAAG,CAAC,GAAGL,YAAY;EAE3B,oBACID,KAAA,CAAAO,aAAA,CAAAP,KAAA,CAAAQ,QAAA,qBACIR,KAAA,CAAAO,aAAA,CAACD,EAAE,CAACG,OAAO,CAACC,OAAO;IAACC,IAAI,EAAC,YAAY;IAACC,OAAO,eAAEZ,KAAA,CAAAO,aAAA,CAACH,UAAU,MAAE;EAAE,CAAE,CAAC,eACjEJ,KAAA,CAAAO,aAAA,CAACD,EAAE,CAACG,OAAO,CAACC,OAAO;IAACC,IAAI,EAAC,QAAQ;IAACC,OAAO,eAAEZ,KAAA,CAAAO,aAAA,CAACJ,eAAe,MAAE;EAAE,CAAE,CAAC,eAClEH,KAAA,CAAAO,aAAA,CAACD,EAAE,CAACG,OAAO,CAACC,OAAO;IACfC,IAAI,EAAE,aAAc;IACpBC,OAAO,eACHZ,KAAA,CAAAO,aAAA,CAACD,EAAE,CAACO,aAAa,qBACbb,KAAA,CAAAO,aAAA,CAACL,WAAW,MAAE,CACA;EACrB,CACJ,CACH,CAAC;AAEX,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/ContentPreviewConfig.js","sources":["../../../../src/BaseEditor/defaultConfig/Content/ContentPreviewConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport { EditorConfig } from \"~/BaseEditor/index.js\";\nimport { Breadcrumbs } from \"./Breadcrumbs/index.js\";\nimport { DocumentPreview } from \"./Preview/DocumentPreview.js\";\nimport { AddressBar } from \"./AddressBar/AddressBar.js\";\n\nexport const ContentPreviewConfig = () => {\n    const { Ui } = EditorConfig;\n\n    return (\n        <>\n            <Ui.Content.Element name=\"addressBar\" element={<AddressBar />} />\n            <Ui.Content.Element name=\"iframe\" element={<DocumentPreview />} />\n            <Ui.Content.Element\n                name={\"breadcrumbs\"}\n                element={\n                    <Ui.IsNotReadOnly>\n                        <Breadcrumbs />\n                    </Ui.IsNotReadOnly>\n                }\n            />\n        </>\n    );\n};\n"],"names":["ContentPreviewConfig","Ui","EditorConfig","AddressBar","DocumentPreview","Breadcrumbs"],"mappings":";;;;;AAMO,MAAMA,uBAAuB;IAChC,MAAM,EAAEC,EAAE,EAAE,GAAGC;IAEf,OAAO,WAAP,GACI,wDACI,oBAACD,GAAG,OAAO,CAAC,OAAO;QAAC,MAAK;QAAa,uBAAS,oBAACE,YAAUA;sBAC1D,oBAACF,GAAG,OAAO,CAAC,OAAO;QAAC,MAAK;QAAS,uBAAS,oBAACG,iBAAeA;sBAC3D,oBAACH,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,uBACI,oBAACA,GAAG,aAAa,sBACb,oBAACI,aAAWA;;AAMpC"}

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

@@ -1,44 +1,34 @@
 import { useEffect } from "react";
 import { useWebsiteBuilderTheme } from "../../../components/index.js";
-export const ApplyTheme = () => {
-  const {
-    theme
-  } = useWebsiteBuilderTheme();
-  useEffect(() => {
-    if (!theme) {
-      return;
-    }
-    if (theme.css) {
-      const existing = document.querySelector(`style[id="wb-editor-css"]`);
-      const style = document.createElement("style");
-      style.id = "wb-editor-css";
-      style.innerHTML = theme.css;
-      if (existing) {
-        existing.replaceWith(style);
-      } else {
-        document.head.appendChild(style);
-      }
-    }
-    if (theme.fonts) {
-      theme.fonts.forEach(font => {
-        const existing = document.querySelector(`link[href="${font}"]`);
-        if (existing) {
-          return;
+const ApplyTheme = ()=>{
+    const { theme } = useWebsiteBuilderTheme();
+    useEffect(()=>{
+        if (!theme) return;
+        if (theme.css) {
+            const existing = document.querySelector('style[id="wb-editor-css"]');
+            const style = document.createElement("style");
+            style.id = "wb-editor-css";
+            style.innerHTML = theme.css;
+            if (existing) existing.replaceWith(style);
+            else document.head.appendChild(style);
         }
-        const link = document.createElement("link");
-        link.href = font;
-        link.rel = "stylesheet";
-        document.head.appendChild(link);
-      });
-    }
-    return () => {
-      const existing = document.querySelector(`style[id="wb-editor-css"]`);
-      if (existing) {
-        existing.remove();
-      }
-    };
-  }, [theme]);
-  return null;
+        if (theme.fonts) theme.fonts.forEach((font)=>{
+            const existing = document.querySelector(`link[href="${font}"]`);
+            if (existing) return;
+            const link = document.createElement("link");
+            link.href = font;
+            link.rel = "stylesheet";
+            document.head.appendChild(link);
+        });
+        return ()=>{
+            const existing = document.querySelector('style[id="wb-editor-css"]');
+            if (existing) existing.remove();
+        };
+    }, [
+        theme
+    ]);
+    return null;
 };
+export { ApplyTheme };
 
 //# sourceMappingURL=ApplyTheme.js.map