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

package/components/ConnectToEditor.js

@@ -1,25 +1,23 @@
 "use client";
-
-import React, { useEffect, useState } from "react";
+import react, { useEffect, useState } from "react";
 import { contentSdk } from "@webiny/website-builder-sdk";
 import { DocumentStoreProvider } from "./DocumentStoreProvider.js";
 import { ElementRenderer } from "./ElementRenderer.js";
-export const ConnectToEditor = props => {
-  const [data, setData] = useState(null);
-  useEffect(() => {
-    contentSdk.getPage(props.document.properties.path).then(document => {
-      setData(document);
-    });
-  }, []);
-  if (!data) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(DocumentStoreProvider, {
-    id: data.properties.id,
-    document: data
-  }, /*#__PURE__*/React.createElement(ElementRenderer, {
-    id: "root"
-  }));
+const ConnectToEditor = (props)=>{
+    const [data, setData] = useState(null);
+    useEffect(()=>{
+        contentSdk.getPage(props.document.properties.path).then((document)=>{
+            setData(document);
+        });
+    }, []);
+    if (!data) return null;
+    return /*#__PURE__*/ react.createElement(DocumentStoreProvider, {
+        id: data.properties.id,
+        document: data
+    }, /*#__PURE__*/ react.createElement(ElementRenderer, {
+        id: "root"
+    }));
 };
+export { ConnectToEditor };
 
 //# sourceMappingURL=ConnectToEditor.js.map

package/components/ConnectToEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","contentSdk","DocumentStoreProvider","ElementRenderer","ConnectToEditor","props","data","setData","getPage","document","properties","path","then","createElement","id"],"sources":["ConnectToEditor.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useState } from \"react\";\nimport { contentSdk, type Component, type Document } from \"@webiny/website-builder-sdk\";\nimport { DocumentStoreProvider } from \"~/components/DocumentStoreProvider.js\";\nimport { ElementRenderer } from \"~/components/ElementRenderer.js\";\n\ninterface ConnectToEditorProps {\n    document: Document;\n    components: Component[];\n}\n\nexport const ConnectToEditor = (props: ConnectToEditorProps) => {\n    const [data, setData] = useState<Document | null>(null);\n\n    useEffect(() => {\n        contentSdk.getPage(props.document.properties.path).then(document => {\n            setData(document);\n        });\n    }, []);\n\n    if (!data) {\n        return null;\n    }\n\n    return (\n        <DocumentStoreProvider id={data.properties.id} document={data}>\n            <ElementRenderer id={\"root\"} />\n        </DocumentStoreProvider>\n    );\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,UAAU,QAAuC,6BAA6B;AACvF,SAASC,qBAAqB;AAC9B,SAASC,eAAe;AAOxB,OAAO,MAAMC,eAAe,GAAIC,KAA2B,IAAK;EAC5D,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGP,QAAQ,CAAkB,IAAI,CAAC;EAEvDD,SAAS,CAAC,MAAM;IACZE,UAAU,CAACO,OAAO,CAACH,KAAK,CAACI,QAAQ,CAACC,UAAU,CAACC,IAAI,CAAC,CAACC,IAAI,CAACH,QAAQ,IAAI;MAChEF,OAAO,CAACE,QAAQ,CAAC;IACrB,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,IAAI,CAACH,IAAI,EAAE;IACP,OAAO,IAAI;EACf;EAEA,oBACIR,KAAA,CAAAe,aAAA,CAACX,qBAAqB;IAACY,EAAE,EAAER,IAAI,CAACI,UAAU,CAACI,EAAG;IAACL,QAAQ,EAAEH;EAAK,gBAC1DR,KAAA,CAAAe,aAAA,CAACV,eAAe;IAACW,EAAE,EAAE;EAAO,CAAE,CACX,CAAC;AAEhC,CAAC","ignoreList":[]}
+{"version":3,"file":"components/ConnectToEditor.js","sources":["../../src/components/ConnectToEditor.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useState } from \"react\";\nimport { contentSdk, type Component, type Document } from \"@webiny/website-builder-sdk\";\nimport { DocumentStoreProvider } from \"~/components/DocumentStoreProvider.js\";\nimport { ElementRenderer } from \"~/components/ElementRenderer.js\";\n\ninterface ConnectToEditorProps {\n    document: Document;\n    components: Component[];\n}\n\nexport const ConnectToEditor = (props: ConnectToEditorProps) => {\n    const [data, setData] = useState<Document | null>(null);\n\n    useEffect(() => {\n        contentSdk.getPage(props.document.properties.path).then(document => {\n            setData(document);\n        });\n    }, []);\n\n    if (!data) {\n        return null;\n    }\n\n    return (\n        <DocumentStoreProvider id={data.properties.id} document={data}>\n            <ElementRenderer id={\"root\"} />\n        </DocumentStoreProvider>\n    );\n};\n"],"names":["ConnectToEditor","props","data","setData","useState","useEffect","contentSdk","document","DocumentStoreProvider","ElementRenderer"],"mappings":";;;;;AAWO,MAAMA,kBAAkB,CAACC;IAC5B,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAA0B;IAElDC,UAAU;QACNC,WAAW,OAAO,CAACL,MAAM,QAAQ,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAACM,CAAAA;YACpDJ,QAAQI;QACZ;IACJ,GAAG,EAAE;IAEL,IAAI,CAACL,MACD,OAAO;IAGX,OAAO,WAAP,GACI,oBAACM,uBAAqBA;QAAC,IAAIN,KAAK,UAAU,CAAC,EAAE;QAAE,UAAUA;qBACrD,oBAACO,iBAAeA;QAAC,IAAI;;AAGjC"}

package/components/DocumentFragment.js

@@ -1,11 +1,9 @@
 "use client";
-
-import React from "react";
-export function DocumentFragment(props) {
-  if (props.children) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
-  }
-  return null;
+import react from "react";
+function DocumentFragment(props) {
+    if (props.children) return /*#__PURE__*/ react.createElement(react.Fragment, null, props.children);
+    return null;
 }
+export { DocumentFragment };
 
 //# sourceMappingURL=DocumentFragment.js.map

package/components/DocumentFragment.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","DocumentFragment","props","children","createElement","Fragment"],"sources":["DocumentFragment.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\n\nexport type DocumentFragmentProps =\n    | {\n          name: string;\n          children: React.ReactNode;\n          component?: never;\n          inputs?: never;\n      }\n    | {\n          component: string;\n          inputs?: Record<string, any>;\n          name?: never;\n          children?: never;\n      };\n\nexport function DocumentFragment(props: DocumentFragmentProps) {\n    if (props.children) {\n        return <>{props.children}</>;\n    }\n\n    return null;\n}\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AAgBzB,OAAO,SAASC,gBAAgBA,CAACC,KAA4B,EAAE;EAC3D,IAAIA,KAAK,CAACC,QAAQ,EAAE;IAChB,oBAAOH,KAAA,CAAAI,aAAA,CAAAJ,KAAA,CAAAK,QAAA,QAAGH,KAAK,CAACC,QAAW,CAAC;EAChC;EAEA,OAAO,IAAI;AACf","ignoreList":[]}
+{"version":3,"file":"components/DocumentFragment.js","sources":["../../src/components/DocumentFragment.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\n\nexport type DocumentFragmentProps =\n    | {\n          name: string;\n          children: React.ReactNode;\n          component?: never;\n          inputs?: never;\n      }\n    | {\n          component: string;\n          inputs?: Record<string, any>;\n          name?: never;\n          children?: never;\n      };\n\nexport function DocumentFragment(props: DocumentFragmentProps) {\n    if (props.children) {\n        return <>{props.children}</>;\n    }\n\n    return null;\n}\n"],"names":["DocumentFragment","props"],"mappings":";;AAiBO,SAASA,iBAAiBC,KAA4B;IACzD,IAAIA,MAAM,QAAQ,EACd,OAAO,WAAP,GAAO,0CAAGA,MAAM,QAAQ;IAG5B,OAAO;AACX"}

package/components/DocumentRenderer.js

@@ -1,56 +1,47 @@
-import React from "react";
+import react from "react";
 import { contentSdk } from "@webiny/website-builder-sdk";
 import { ElementRenderer } from "./ElementRenderer.js";
 import { DocumentStoreProvider } from "./DocumentStoreProvider.js";
 import { ConnectToEditor } from "./ConnectToEditor.js";
 import { editorComponents } from "../editorComponents/index.js";
 import { FragmentsProvider } from "./FragmentsProvider.js";
-export const DocumentRenderer = ({
-  document,
-  components,
-  children
-}) => {
-  const allComponents = [...editorComponents, ...components];
-  allComponents.forEach(blueprint => contentSdk.registerComponent(blueprint));
-  const fragments = [];
-  React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child)).forEach(child => {
-    const props = child.props;
-    // Case 1:
-    if (props.name && props.children) {
-      fragments.push({
-        type: "fixed",
-        name: props.name,
-        element: /*#__PURE__*/React.createElement(React.Fragment, null, props.children)
-      });
-    }
-
-    // Case 2:
-    if (props.component) {
-      fragments.push({
-        type: "component",
-        component: props.component,
-        inputs: props.inputs ?? {}
-      });
-    }
-  });
-  if (!document) {
-    return /*#__PURE__*/React.createElement("div", {
-      "data-role": "document-renderer"
+const DocumentRenderer = ({ document, components, children })=>{
+    const allComponents = [
+        ...editorComponents,
+        ...components
+    ];
+    allComponents.forEach((blueprint)=>contentSdk.registerComponent(blueprint));
+    const fragments = [];
+    react.Children.toArray(children).filter((child)=>/*#__PURE__*/ react.isValidElement(child)).forEach((child)=>{
+        const props = child.props;
+        if (props.name && props.children) fragments.push({
+            type: "fixed",
+            name: props.name,
+            element: /*#__PURE__*/ react.createElement(react.Fragment, null, props.children)
+        });
+        if (props.component) fragments.push({
+            type: "component",
+            component: props.component,
+            inputs: props.inputs ?? {}
+        });
+    });
+    if (!document) return /*#__PURE__*/ react.createElement("div", {
+        "data-role": "document-renderer"
     }, children);
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    "data-role": "document-renderer"
-  }, /*#__PURE__*/React.createElement(FragmentsProvider, {
-    fragments: fragments ?? {}
-  }, contentSdk.isEditing() ? /*#__PURE__*/React.createElement(ConnectToEditor, {
-    document: document,
-    components: components
-  }) : /*#__PURE__*/React.createElement(DocumentStoreProvider, {
-    id: document.properties.id,
-    document: document
-  }, /*#__PURE__*/React.createElement(ElementRenderer, {
-    id: "root"
-  }))));
+    return /*#__PURE__*/ react.createElement("div", {
+        "data-role": "document-renderer"
+    }, /*#__PURE__*/ react.createElement(FragmentsProvider, {
+        fragments: fragments ?? {}
+    }, contentSdk.isEditing() ? /*#__PURE__*/ react.createElement(ConnectToEditor, {
+        document: document,
+        components: components
+    }) : /*#__PURE__*/ react.createElement(DocumentStoreProvider, {
+        id: document.properties.id,
+        document: document
+    }, /*#__PURE__*/ react.createElement(ElementRenderer, {
+        id: "root"
+    }))));
 };
+export { DocumentRenderer };
 
 //# sourceMappingURL=DocumentRenderer.js.map

package/components/DocumentRenderer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","contentSdk","ElementRenderer","DocumentStoreProvider","ConnectToEditor","editorComponents","FragmentsProvider","DocumentRenderer","document","components","children","allComponents","forEach","blueprint","registerComponent","fragments","Children","toArray","filter","child","isValidElement","props","name","push","type","element","createElement","Fragment","component","inputs","isEditing","id","properties"],"sources":["DocumentRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { type Component, contentSdk, type Document } from \"@webiny/website-builder-sdk\";\nimport { ElementRenderer } from \"./ElementRenderer.js\";\nimport { DocumentStoreProvider } from \"./DocumentStoreProvider.js\";\nimport { ConnectToEditor } from \"./ConnectToEditor.js\";\nimport { editorComponents } from \"../editorComponents/index.js\";\nimport type { DocumentFragments } from \"./FragmentsProvider.js\";\nimport { FragmentsProvider } from \"./FragmentsProvider.js\";\nimport type { DocumentFragmentProps } from \"~/components/DocumentFragment.js\";\n\ninterface DocumentRendererProps {\n    document: Document | null;\n    components: Component[];\n    children?: React.ReactNode | React.ReactNode[];\n}\n\nexport const DocumentRenderer = ({ document, components, children }: DocumentRendererProps) => {\n    const allComponents = [...editorComponents, ...components];\n    allComponents.forEach(blueprint => contentSdk.registerComponent(blueprint));\n    const fragments: DocumentFragments = [];\n\n    React.Children.toArray(children)\n        .filter(child => React.isValidElement(child))\n        .forEach(child => {\n            const props = child.props as DocumentFragmentProps;\n            // Case 1:\n            if (props.name && props.children) {\n                fragments.push({\n                    type: \"fixed\",\n                    name: props.name,\n                    element: <>{props.children}</>\n                });\n            }\n\n            // Case 2:\n            if (props.component) {\n                fragments.push({\n                    type: \"component\",\n                    component: props.component,\n                    inputs: props.inputs ?? {}\n                });\n            }\n        });\n\n    if (!document) {\n        return <div data-role={\"document-renderer\"}>{children}</div>;\n    }\n\n    return (\n        <div data-role={\"document-renderer\"}>\n            <FragmentsProvider fragments={fragments ?? {}}>\n                {contentSdk.isEditing() ? (\n                    <ConnectToEditor document={document} components={components} />\n                ) : (\n                    <DocumentStoreProvider id={document.properties.id} document={document}>\n                        <ElementRenderer id={\"root\"} />\n                    </DocumentStoreProvider>\n                )}\n            </FragmentsProvider>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAyBC,UAAU,QAAuB,6BAA6B;AACvF,SAASC,eAAe;AACxB,SAASC,qBAAqB;AAC9B,SAASC,eAAe;AACxB,SAASC,gBAAgB;AAEzB,SAASC,iBAAiB;AAS1B,OAAO,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,UAAU;EAAEC;AAAgC,CAAC,KAAK;EAC3F,MAAMC,aAAa,GAAG,CAAC,GAAGN,gBAAgB,EAAE,GAAGI,UAAU,CAAC;EAC1DE,aAAa,CAACC,OAAO,CAACC,SAAS,IAAIZ,UAAU,CAACa,iBAAiB,CAACD,SAAS,CAAC,CAAC;EAC3E,MAAME,SAA4B,GAAG,EAAE;EAEvCf,KAAK,CAACgB,QAAQ,CAACC,OAAO,CAACP,QAAQ,CAAC,CAC3BQ,MAAM,CAACC,KAAK,iBAAInB,KAAK,CAACoB,cAAc,CAACD,KAAK,CAAC,CAAC,CAC5CP,OAAO,CAACO,KAAK,IAAI;IACd,MAAME,KAAK,GAAGF,KAAK,CAACE,KAA8B;IAClD;IACA,IAAIA,KAAK,CAACC,IAAI,IAAID,KAAK,CAACX,QAAQ,EAAE;MAC9BK,SAAS,CAACQ,IAAI,CAAC;QACXC,IAAI,EAAE,OAAO;QACbF,IAAI,EAAED,KAAK,CAACC,IAAI;QAChBG,OAAO,eAAEzB,KAAA,CAAA0B,aAAA,CAAA1B,KAAA,CAAA2B,QAAA,QAAGN,KAAK,CAACX,QAAW;MACjC,CAAC,CAAC;IACN;;IAEA;IACA,IAAIW,KAAK,CAACO,SAAS,EAAE;MACjBb,SAAS,CAACQ,IAAI,CAAC;QACXC,IAAI,EAAE,WAAW;QACjBI,SAAS,EAAEP,KAAK,CAACO,SAAS;QAC1BC,MAAM,EAAER,KAAK,CAACQ,MAAM,IAAI,CAAC;MAC7B,CAAC,CAAC;IACN;EACJ,CAAC,CAAC;EAEN,IAAI,CAACrB,QAAQ,EAAE;IACX,oBAAOR,KAAA,CAAA0B,aAAA;MAAK,aAAW;IAAoB,GAAEhB,QAAc,CAAC;EAChE;EAEA,oBACIV,KAAA,CAAA0B,aAAA;IAAK,aAAW;EAAoB,gBAChC1B,KAAA,CAAA0B,aAAA,CAACpB,iBAAiB;IAACS,SAAS,EAAEA,SAAS,IAAI,CAAC;EAAE,GACzCd,UAAU,CAAC6B,SAAS,CAAC,CAAC,gBACnB9B,KAAA,CAAA0B,aAAA,CAACtB,eAAe;IAACI,QAAQ,EAAEA,QAAS;IAACC,UAAU,EAAEA;EAAW,CAAE,CAAC,gBAE/DT,KAAA,CAAA0B,aAAA,CAACvB,qBAAqB;IAAC4B,EAAE,EAAEvB,QAAQ,CAACwB,UAAU,CAACD,EAAG;IAACvB,QAAQ,EAAEA;EAAS,gBAClER,KAAA,CAAA0B,aAAA,CAACxB,eAAe;IAAC6B,EAAE,EAAE;EAAO,CAAE,CACX,CAEZ,CAClB,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"file":"components/DocumentRenderer.js","sources":["../../src/components/DocumentRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { type Component, contentSdk, type Document } from \"@webiny/website-builder-sdk\";\nimport { ElementRenderer } from \"./ElementRenderer.js\";\nimport { DocumentStoreProvider } from \"./DocumentStoreProvider.js\";\nimport { ConnectToEditor } from \"./ConnectToEditor.js\";\nimport { editorComponents } from \"../editorComponents/index.js\";\nimport type { DocumentFragments } from \"./FragmentsProvider.js\";\nimport { FragmentsProvider } from \"./FragmentsProvider.js\";\nimport type { DocumentFragmentProps } from \"~/components/DocumentFragment.js\";\n\ninterface DocumentRendererProps {\n    document: Document | null;\n    components: Component[];\n    children?: React.ReactNode | React.ReactNode[];\n}\n\nexport const DocumentRenderer = ({ document, components, children }: DocumentRendererProps) => {\n    const allComponents = [...editorComponents, ...components];\n    allComponents.forEach(blueprint => contentSdk.registerComponent(blueprint));\n    const fragments: DocumentFragments = [];\n\n    React.Children.toArray(children)\n        .filter(child => React.isValidElement(child))\n        .forEach(child => {\n            const props = child.props as DocumentFragmentProps;\n            // Case 1:\n            if (props.name && props.children) {\n                fragments.push({\n                    type: \"fixed\",\n                    name: props.name,\n                    element: <>{props.children}</>\n                });\n            }\n\n            // Case 2:\n            if (props.component) {\n                fragments.push({\n                    type: \"component\",\n                    component: props.component,\n                    inputs: props.inputs ?? {}\n                });\n            }\n        });\n\n    if (!document) {\n        return <div data-role={\"document-renderer\"}>{children}</div>;\n    }\n\n    return (\n        <div data-role={\"document-renderer\"}>\n            <FragmentsProvider fragments={fragments ?? {}}>\n                {contentSdk.isEditing() ? (\n                    <ConnectToEditor document={document} components={components} />\n                ) : (\n                    <DocumentStoreProvider id={document.properties.id} document={document}>\n                        <ElementRenderer id={\"root\"} />\n                    </DocumentStoreProvider>\n                )}\n            </FragmentsProvider>\n        </div>\n    );\n};\n"],"names":["DocumentRenderer","document","components","children","allComponents","editorComponents","blueprint","contentSdk","fragments","React","child","props","FragmentsProvider","ConnectToEditor","DocumentStoreProvider","ElementRenderer"],"mappings":";;;;;;;AAgBO,MAAMA,mBAAmB,CAAC,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,QAAQ,EAAyB;IACtF,MAAMC,gBAAgB;WAAIC;WAAqBH;KAAW;IAC1DE,cAAc,OAAO,CAACE,CAAAA,YAAaC,WAAW,iBAAiB,CAACD;IAChE,MAAME,YAA+B,EAAE;IAEvCC,MAAAA,QAAAA,CAAAA,OAAsB,CAACN,UAClB,MAAM,CAACO,CAAAA,QAAAA,WAAAA,GAASD,MAAAA,cAAoB,CAACC,QACrC,OAAO,CAACA,CAAAA;QACL,MAAMC,QAAQD,MAAM,KAAK;QAEzB,IAAIC,MAAM,IAAI,IAAIA,MAAM,QAAQ,EAC5BH,UAAU,IAAI,CAAC;YACX,MAAM;YACN,MAAMG,MAAM,IAAI;YAChB,SAAS,WAAT,GAAS,0CAAGA,MAAM,QAAQ;QAC9B;QAIJ,IAAIA,MAAM,SAAS,EACfH,UAAU,IAAI,CAAC;YACX,MAAM;YACN,WAAWG,MAAM,SAAS;YAC1B,QAAQA,MAAM,MAAM,IAAI,CAAC;QAC7B;IAER;IAEJ,IAAI,CAACV,UACD,OAAO,WAAP,GAAO,oBAAC;QAAI,aAAW;OAAsBE;IAGjD,OAAO,WAAP,GACI,oBAAC;QAAI,aAAW;qBACZ,oBAACS,mBAAiBA;QAAC,WAAWJ,aAAa,CAAC;OACvCD,WAAW,SAAS,KAAK,WAAL,GACjB,oBAACM,iBAAeA;QAAC,UAAUZ;QAAU,YAAYC;uBAEjD,oBAACY,uBAAqBA;QAAC,IAAIb,SAAS,UAAU,CAAC,EAAE;QAAE,UAAUA;qBACzD,oBAACc,iBAAeA;QAAC,IAAI;;AAM7C"}

package/components/DocumentStoreProvider.js

@@ -1,27 +1,21 @@
 "use client";
-
-import React, { useContext, useMemo } from "react";
+import react, { useContext, useMemo } from "react";
 import { documentStoreManager } from "@webiny/website-builder-sdk";
-const DocumentStoreContext = /*#__PURE__*/React.createContext(undefined);
-export const DocumentStoreProvider = ({
-  id,
-  document,
-  children
-}) => {
-  const store = useMemo(() => documentStoreManager.getStore(id), [id]);
-  if (document) {
-    store.setDocument(document);
-  }
-  return /*#__PURE__*/React.createElement(DocumentStoreContext.Provider, {
-    value: store
-  }, children);
+const DocumentStoreContext = /*#__PURE__*/ react.createContext(void 0);
+const DocumentStoreProvider = ({ id, document, children })=>{
+    const store = useMemo(()=>documentStoreManager.getStore(id), [
+        id
+    ]);
+    if (document) store.setDocument(document);
+    return /*#__PURE__*/ react.createElement(DocumentStoreContext.Provider, {
+        value: store
+    }, children);
 };
-export const useDocumentStore = () => {
-  const store = useContext(DocumentStoreContext);
-  if (!store) {
-    throw new Error("useDocumentStore must be used within a DocumentStoreProvider");
-  }
-  return store;
+const useDocumentStore = ()=>{
+    const store = useContext(DocumentStoreContext);
+    if (!store) throw new Error("useDocumentStore must be used within a DocumentStoreProvider");
+    return store;
 };
+export { DocumentStoreProvider, useDocumentStore };
 
 //# sourceMappingURL=DocumentStoreProvider.js.map

package/components/DocumentStoreProvider.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useContext","useMemo","documentStoreManager","DocumentStoreContext","createContext","undefined","DocumentStoreProvider","id","document","children","store","getStore","setDocument","createElement","Provider","value","useDocumentStore","Error"],"sources":["DocumentStoreProvider.tsx"],"sourcesContent":["\"use client\";\nimport React, { useContext, useMemo } from \"react\";\nimport type { DocumentStore } from \"@webiny/website-builder-sdk\";\nimport { type Document, documentStoreManager } from \"@webiny/website-builder-sdk\";\n\nconst DocumentStoreContext = React.createContext<DocumentStore | undefined>(undefined);\n\nexport const DocumentStoreProvider = ({\n    id,\n    document,\n    children\n}: {\n    id: string;\n    document?: Document;\n    children: React.ReactNode;\n}) => {\n    const store = useMemo(() => documentStoreManager.getStore(id), [id]);\n\n    if (document) {\n        store.setDocument(document);\n    }\n\n    return <DocumentStoreContext.Provider value={store}>{children}</DocumentStoreContext.Provider>;\n};\n\nexport const useDocumentStore = (): DocumentStore => {\n    const store = useContext(DocumentStoreContext);\n    if (!store) {\n        throw new Error(\"useDocumentStore must be used within a DocumentStoreProvider\");\n    }\n    return store;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAElD,SAAwBC,oBAAoB,QAAQ,6BAA6B;AAEjF,MAAMC,oBAAoB,gBAAGJ,KAAK,CAACK,aAAa,CAA4BC,SAAS,CAAC;AAEtF,OAAO,MAAMC,qBAAqB,GAAGA,CAAC;EAClCC,EAAE;EACFC,QAAQ;EACRC;AAKJ,CAAC,KAAK;EACF,MAAMC,KAAK,GAAGT,OAAO,CAAC,MAAMC,oBAAoB,CAACS,QAAQ,CAACJ,EAAE,CAAC,EAAE,CAACA,EAAE,CAAC,CAAC;EAEpE,IAAIC,QAAQ,EAAE;IACVE,KAAK,CAACE,WAAW,CAACJ,QAAQ,CAAC;EAC/B;EAEA,oBAAOT,KAAA,CAAAc,aAAA,CAACV,oBAAoB,CAACW,QAAQ;IAACC,KAAK,EAAEL;EAAM,GAAED,QAAwC,CAAC;AAClG,CAAC;AAED,OAAO,MAAMO,gBAAgB,GAAGA,CAAA,KAAqB;EACjD,MAAMN,KAAK,GAAGV,UAAU,CAACG,oBAAoB,CAAC;EAC9C,IAAI,CAACO,KAAK,EAAE;IACR,MAAM,IAAIO,KAAK,CAAC,8DAA8D,CAAC;EACnF;EACA,OAAOP,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"file":"components/DocumentStoreProvider.js","sources":["../../src/components/DocumentStoreProvider.tsx"],"sourcesContent":["\"use client\";\nimport React, { useContext, useMemo } from \"react\";\nimport type { DocumentStore } from \"@webiny/website-builder-sdk\";\nimport { type Document, documentStoreManager } from \"@webiny/website-builder-sdk\";\n\nconst DocumentStoreContext = React.createContext<DocumentStore | undefined>(undefined);\n\nexport const DocumentStoreProvider = ({\n    id,\n    document,\n    children\n}: {\n    id: string;\n    document?: Document;\n    children: React.ReactNode;\n}) => {\n    const store = useMemo(() => documentStoreManager.getStore(id), [id]);\n\n    if (document) {\n        store.setDocument(document);\n    }\n\n    return <DocumentStoreContext.Provider value={store}>{children}</DocumentStoreContext.Provider>;\n};\n\nexport const useDocumentStore = (): DocumentStore => {\n    const store = useContext(DocumentStoreContext);\n    if (!store) {\n        throw new Error(\"useDocumentStore must be used within a DocumentStoreProvider\");\n    }\n    return store;\n};\n"],"names":["DocumentStoreContext","React","undefined","DocumentStoreProvider","id","document","children","store","useMemo","documentStoreManager","useDocumentStore","useContext","Error"],"mappings":";;;AAKA,MAAMA,uBAAuB,WAAHA,GAAGC,MAAAA,aAAmB,CAA4BC;AAErE,MAAMC,wBAAwB,CAAC,EAClCC,EAAE,EACFC,QAAQ,EACRC,QAAQ,EAKX;IACG,MAAMC,QAAQC,QAAQ,IAAMC,qBAAqB,QAAQ,CAACL,KAAK;QAACA;KAAG;IAEnE,IAAIC,UACAE,MAAM,WAAW,CAACF;IAGtB,OAAO,WAAP,GAAO,oBAACL,qBAAqB,QAAQ;QAAC,OAAOO;OAAQD;AACzD;AAEO,MAAMI,mBAAmB;IAC5B,MAAMH,QAAQI,WAAWX;IACzB,IAAI,CAACO,OACD,MAAM,IAAIK,MAAM;IAEpB,OAAOL;AACX"}

package/components/EditingElementRenderer/EditingElementRenderer.js

@@ -1,6 +1,5 @@
 "use client";
-
-import React, { useEffect, useMemo } from "react";
+import react, { useEffect, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { EditingElementRendererPresenter } from "./EditingElementRenderer.presenter.js";
 import { LiveElementRenderer } from "../LiveElementRenderer.js";
@@ -8,40 +7,37 @@ import { useElementSlotDepth } from "../ElementSlotDepthProvider.js";
 import { useElementIndex } from "../ElementIndexProvider.js";
 import { useDocumentStore } from "../DocumentStoreProvider.js";
 const styles = {
-  display: "contents"
+    display: "contents"
 };
-export const EditingElementRenderer = observer(props => {
-  const documentStore = useDocumentStore();
-  const depth = useElementSlotDepth();
-  const index = useElementIndex();
-  const presenter = useMemo(() => {
-    return new EditingElementRendererPresenter(documentStore);
-  }, [props.element?.id]);
-  useEffect(() => {
-    if (!props.element) {
-      return;
-    }
-    presenter.init(props.element);
-  }, [props.element?.id]);
-  useEffect(() => {
-    return () => {
-      presenter.dispose();
-    };
-  }, []);
-  const element = presenter.vm.element;
-  if (!element || !element.id) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    style: styles,
-    "data-element-id": element.id,
-    "data-depth": depth,
-    "data-parent-index": index,
-    "data-parent-id": element.parent?.id,
-    "data-parent-slot": element.parent?.slot
-  }, /*#__PURE__*/React.createElement(LiveElementRenderer, {
-    element: element
-  }));
+const EditingElementRenderer = observer((props)=>{
+    const documentStore = useDocumentStore();
+    const depth = useElementSlotDepth();
+    const index = useElementIndex();
+    const presenter = useMemo(()=>new EditingElementRendererPresenter(documentStore), [
+        props.element?.id
+    ]);
+    useEffect(()=>{
+        if (!props.element) return;
+        presenter.init(props.element);
+    }, [
+        props.element?.id
+    ]);
+    useEffect(()=>()=>{
+            presenter.dispose();
+        }, []);
+    const element = presenter.vm.element;
+    if (!element || !element.id) return null;
+    return /*#__PURE__*/ react.createElement("div", {
+        style: styles,
+        "data-element-id": element.id,
+        "data-depth": depth,
+        "data-parent-index": index,
+        "data-parent-id": element.parent?.id,
+        "data-parent-slot": element.parent?.slot
+    }, /*#__PURE__*/ react.createElement(LiveElementRenderer, {
+        element: element
+    }));
 });
+export { EditingElementRenderer };
 
 //# sourceMappingURL=EditingElementRenderer.js.map

package/components/EditingElementRenderer/EditingElementRenderer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useMemo","observer","EditingElementRendererPresenter","LiveElementRenderer","useElementSlotDepth","useElementIndex","useDocumentStore","styles","display","EditingElementRenderer","props","documentStore","depth","index","presenter","element","id","init","dispose","vm","createElement","style","parent","slot"],"sources":["EditingElementRenderer.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { type DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { EditingElementRendererPresenter } from \"./EditingElementRenderer.presenter.js\";\nimport { LiveElementRenderer } from \"../LiveElementRenderer.js\";\nimport { useElementSlotDepth } from \"../ElementSlotDepthProvider.js\";\nimport { useElementIndex } from \"../ElementIndexProvider.js\";\nimport { useDocumentStore } from \"../DocumentStoreProvider.js\";\n\ninterface PreviewElementRendererProps {\n    element: DocumentElement;\n}\n\nconst styles = { display: \"contents\" };\n\nexport const EditingElementRenderer = observer((props: PreviewElementRendererProps) => {\n    const documentStore = useDocumentStore();\n    const depth = useElementSlotDepth();\n    const index = useElementIndex();\n\n    const presenter = useMemo(() => {\n        return new EditingElementRendererPresenter(documentStore);\n    }, [props.element?.id]);\n\n    useEffect(() => {\n        if (!props.element) {\n            return;\n        }\n        presenter.init(props.element);\n    }, [props.element?.id]);\n\n    useEffect(() => {\n        return () => {\n            presenter.dispose();\n        };\n    }, []);\n\n    const element = presenter.vm.element;\n\n    if (!element || !element.id) {\n        return null;\n    }\n\n    return (\n        <div\n            style={styles}\n            data-element-id={element.id}\n            data-depth={depth}\n            data-parent-index={index}\n            data-parent-id={element.parent?.id}\n            data-parent-slot={element.parent?.slot}\n        >\n            <LiveElementRenderer element={element} />\n        </div>\n    );\n});\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,IAAIC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AACjD,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,+BAA+B;AACxC,SAASC,mBAAmB;AAC5B,SAASC,mBAAmB;AAC5B,SAASC,eAAe;AACxB,SAASC,gBAAgB;AAMzB,MAAMC,MAAM,GAAG;EAAEC,OAAO,EAAE;AAAW,CAAC;AAEtC,OAAO,MAAMC,sBAAsB,GAAGR,QAAQ,CAAES,KAAkC,IAAK;EACnF,MAAMC,aAAa,GAAGL,gBAAgB,CAAC,CAAC;EACxC,MAAMM,KAAK,GAAGR,mBAAmB,CAAC,CAAC;EACnC,MAAMS,KAAK,GAAGR,eAAe,CAAC,CAAC;EAE/B,MAAMS,SAAS,GAAGd,OAAO,CAAC,MAAM;IAC5B,OAAO,IAAIE,+BAA+B,CAACS,aAAa,CAAC;EAC7D,CAAC,EAAE,CAACD,KAAK,CAACK,OAAO,EAAEC,EAAE,CAAC,CAAC;EAEvBjB,SAAS,CAAC,MAAM;IACZ,IAAI,CAACW,KAAK,CAACK,OAAO,EAAE;MAChB;IACJ;IACAD,SAAS,CAACG,IAAI,CAACP,KAAK,CAACK,OAAO,CAAC;EACjC,CAAC,EAAE,CAACL,KAAK,CAACK,OAAO,EAAEC,EAAE,CAAC,CAAC;EAEvBjB,SAAS,CAAC,MAAM;IACZ,OAAO,MAAM;MACTe,SAAS,CAACI,OAAO,CAAC,CAAC;IACvB,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMH,OAAO,GAAGD,SAAS,CAACK,EAAE,CAACJ,OAAO;EAEpC,IAAI,CAACA,OAAO,IAAI,CAACA,OAAO,CAACC,EAAE,EAAE;IACzB,OAAO,IAAI;EACf;EAEA,oBACIlB,KAAA,CAAAsB,aAAA;IACIC,KAAK,EAAEd,MAAO;IACd,mBAAiBQ,OAAO,CAACC,EAAG;IAC5B,cAAYJ,KAAM;IAClB,qBAAmBC,KAAM;IACzB,kBAAgBE,OAAO,CAACO,MAAM,EAAEN,EAAG;IACnC,oBAAkBD,OAAO,CAACO,MAAM,EAAEC;EAAK,gBAEvCzB,KAAA,CAAAsB,aAAA,CAACjB,mBAAmB;IAACY,OAAO,EAAEA;EAAQ,CAAE,CACvC,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"components/EditingElementRenderer/EditingElementRenderer.js","sources":["../../../src/components/EditingElementRenderer/EditingElementRenderer.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { type DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { EditingElementRendererPresenter } from \"./EditingElementRenderer.presenter.js\";\nimport { LiveElementRenderer } from \"../LiveElementRenderer.js\";\nimport { useElementSlotDepth } from \"../ElementSlotDepthProvider.js\";\nimport { useElementIndex } from \"../ElementIndexProvider.js\";\nimport { useDocumentStore } from \"../DocumentStoreProvider.js\";\n\ninterface PreviewElementRendererProps {\n    element: DocumentElement;\n}\n\nconst styles = { display: \"contents\" };\n\nexport const EditingElementRenderer = observer((props: PreviewElementRendererProps) => {\n    const documentStore = useDocumentStore();\n    const depth = useElementSlotDepth();\n    const index = useElementIndex();\n\n    const presenter = useMemo(() => {\n        return new EditingElementRendererPresenter(documentStore);\n    }, [props.element?.id]);\n\n    useEffect(() => {\n        if (!props.element) {\n            return;\n        }\n        presenter.init(props.element);\n    }, [props.element?.id]);\n\n    useEffect(() => {\n        return () => {\n            presenter.dispose();\n        };\n    }, []);\n\n    const element = presenter.vm.element;\n\n    if (!element || !element.id) {\n        return null;\n    }\n\n    return (\n        <div\n            style={styles}\n            data-element-id={element.id}\n            data-depth={depth}\n            data-parent-index={index}\n            data-parent-id={element.parent?.id}\n            data-parent-slot={element.parent?.slot}\n        >\n            <LiveElementRenderer element={element} />\n        </div>\n    );\n});\n"],"names":["styles","EditingElementRenderer","observer","props","documentStore","useDocumentStore","depth","useElementSlotDepth","index","useElementIndex","presenter","useMemo","EditingElementRendererPresenter","useEffect","element","LiveElementRenderer"],"mappings":";;;;;;;;AAcA,MAAMA,SAAS;IAAE,SAAS;AAAW;AAE9B,MAAMC,yBAAyBC,SAAS,CAACC;IAC5C,MAAMC,gBAAgBC;IACtB,MAAMC,QAAQC;IACd,MAAMC,QAAQC;IAEd,MAAMC,YAAYC,QAAQ,IACf,IAAIC,gCAAgCR,gBAC5C;QAACD,MAAM,OAAO,EAAE;KAAG;IAEtBU,UAAU;QACN,IAAI,CAACV,MAAM,OAAO,EACd;QAEJO,UAAU,IAAI,CAACP,MAAM,OAAO;IAChC,GAAG;QAACA,MAAM,OAAO,EAAE;KAAG;IAEtBU,UAAU,IACC;YACHH,UAAU,OAAO;QACrB,GACD,EAAE;IAEL,MAAMI,UAAUJ,UAAU,EAAE,CAAC,OAAO;IAEpC,IAAI,CAACI,WAAW,CAACA,QAAQ,EAAE,EACvB,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QACG,OAAOd;QACP,mBAAiBc,QAAQ,EAAE;QAC3B,cAAYR;QACZ,qBAAmBE;QACnB,kBAAgBM,QAAQ,MAAM,EAAE;QAChC,oBAAkBA,QAAQ,MAAM,EAAE;qBAElC,oBAACC,qBAAmBA;QAAC,SAASD;;AAG1C"}

package/components/EditingElementRenderer/EditingElementRenderer.presenter.js

@@ -1,43 +1,37 @@
 "use client";
-
 import { makeAutoObservable, observable, toJS } from "mobx";
 import { contentSdk, jsonPatch } from "@webiny/website-builder-sdk";
-export class EditingElementRendererPresenter {
-  listeners = [];
-  constructor(documentStore) {
-    this.documentStore = documentStore;
-    this.element = observable({});
-    this.editingSdk = contentSdk.getEditingSdk();
-    makeAutoObservable(this);
-  }
-  get vm() {
-    return {
-      element: toJS(this.element)
-    };
-  }
-  init(element) {
-    this.element = element;
-    this.setupPreview();
-  }
-  dispose() {
-    this.listeners.forEach(fn => fn());
-  }
-  setupPreview() {
-    const element = this.element;
-    if (!element) {
-      return;
+class EditingElementRendererPresenter {
+    constructor(documentStore){
+        this.listeners = [];
+        this.documentStore = documentStore;
+        this.element = observable({});
+        this.editingSdk = contentSdk.getEditingSdk();
+        makeAutoObservable(this);
+    }
+    get vm() {
+        return {
+            element: toJS(this.element)
+        };
+    }
+    init(element) {
+        this.element = element;
+        this.setupPreview();
+    }
+    dispose() {
+        this.listeners.forEach((fn)=>fn());
     }
-    const {
-      id
-    } = element;
-    if (this.editingSdk) {
-      this.listeners.push(this.editingSdk.messenger.on(`element.patch.${id}`, patch => {
-        this.documentStore.updateDocument(document => {
-          jsonPatch.applyPatch(document.bindings[id], patch, false, true);
-        });
-      }));
+    setupPreview() {
+        const element = this.element;
+        if (!element) return;
+        const { id } = element;
+        if (this.editingSdk) this.listeners.push(this.editingSdk.messenger.on(`element.patch.${id}`, (patch)=>{
+            this.documentStore.updateDocument((document)=>{
+                jsonPatch.applyPatch(document.bindings[id], patch, false, true);
+            });
+        }));
     }
-  }
 }
+export { EditingElementRendererPresenter };
 
 //# sourceMappingURL=EditingElementRenderer.presenter.js.map

package/components/EditingElementRenderer/EditingElementRenderer.presenter.js.map

@@ -1 +1 @@
-{"version":3,"names":["makeAutoObservable","observable","toJS","contentSdk","jsonPatch","EditingElementRendererPresenter","listeners","constructor","documentStore","element","editingSdk","getEditingSdk","vm","init","setupPreview","dispose","forEach","fn","id","push","messenger","on","patch","updateDocument","document","applyPatch","bindings"],"sources":["EditingElementRenderer.presenter.ts"],"sourcesContent":["\"use client\";\nimport { makeAutoObservable, observable, toJS } from \"mobx\";\nimport type { DocumentStore } from \"@webiny/website-builder-sdk\";\nimport {\n    contentSdk,\n    jsonPatch,\n    type EditingSdk,\n    type DocumentElement\n} from \"@webiny/website-builder-sdk\";\n\nexport class EditingElementRendererPresenter {\n    private element: DocumentElement;\n    private listeners: Array<() => void> = [];\n    private documentStore: DocumentStore;\n    private readonly editingSdk: EditingSdk | undefined;\n\n    constructor(documentStore: DocumentStore) {\n        this.documentStore = documentStore;\n        this.element = observable({}) as DocumentElement;\n        this.editingSdk = contentSdk.getEditingSdk();\n        makeAutoObservable(this);\n    }\n\n    get vm() {\n        return {\n            element: toJS(this.element)\n        };\n    }\n\n    init(element: DocumentElement) {\n        this.element = element;\n        this.setupPreview();\n    }\n\n    dispose() {\n        this.listeners.forEach(fn => fn());\n    }\n\n    private setupPreview() {\n        const element = this.element;\n\n        if (!element) {\n            return;\n        }\n\n        const { id } = element;\n\n        if (this.editingSdk) {\n            this.listeners.push(\n                this.editingSdk.messenger.on(`element.patch.${id}`, patch => {\n                    this.documentStore.updateDocument(document => {\n                        jsonPatch.applyPatch(document.bindings[id], patch, false, true);\n                    });\n                })\n            );\n        }\n    }\n}\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,kBAAkB,EAAEC,UAAU,EAAEC,IAAI,QAAQ,MAAM;AAE3D,SACIC,UAAU,EACVC,SAAS,QAGN,6BAA6B;AAEpC,OAAO,MAAMC,+BAA+B,CAAC;EAEjCC,SAAS,GAAsB,EAAE;EAIzCC,WAAWA,CAACC,aAA4B,EAAE;IACtC,IAAI,CAACA,aAAa,GAAGA,aAAa;IAClC,IAAI,CAACC,OAAO,GAAGR,UAAU,CAAC,CAAC,CAAC,CAAoB;IAChD,IAAI,CAACS,UAAU,GAAGP,UAAU,CAACQ,aAAa,CAAC,CAAC;IAC5CX,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEA,IAAIY,EAAEA,CAAA,EAAG;IACL,OAAO;MACHH,OAAO,EAAEP,IAAI,CAAC,IAAI,CAACO,OAAO;IAC9B,CAAC;EACL;EAEAI,IAAIA,CAACJ,OAAwB,EAAE;IAC3B,IAAI,CAACA,OAAO,GAAGA,OAAO;IACtB,IAAI,CAACK,YAAY,CAAC,CAAC;EACvB;EAEAC,OAAOA,CAAA,EAAG;IACN,IAAI,CAACT,SAAS,CAACU,OAAO,CAACC,EAAE,IAAIA,EAAE,CAAC,CAAC,CAAC;EACtC;EAEQH,YAAYA,CAAA,EAAG;IACnB,MAAML,OAAO,GAAG,IAAI,CAACA,OAAO;IAE5B,IAAI,CAACA,OAAO,EAAE;MACV;IACJ;IAEA,MAAM;MAAES;IAAG,CAAC,GAAGT,OAAO;IAEtB,IAAI,IAAI,CAACC,UAAU,EAAE;MACjB,IAAI,CAACJ,SAAS,CAACa,IAAI,CACf,IAAI,CAACT,UAAU,CAACU,SAAS,CAACC,EAAE,CAAC,iBAAiBH,EAAE,EAAE,EAAEI,KAAK,IAAI;QACzD,IAAI,CAACd,aAAa,CAACe,cAAc,CAACC,QAAQ,IAAI;UAC1CpB,SAAS,CAACqB,UAAU,CAACD,QAAQ,CAACE,QAAQ,CAACR,EAAE,CAAC,EAAEI,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC;QACnE,CAAC,CAAC;MACN,CAAC,CACL,CAAC;IACL;EACJ;AACJ","ignoreList":[]}
+{"version":3,"file":"components/EditingElementRenderer/EditingElementRenderer.presenter.js","sources":["../../../src/components/EditingElementRenderer/EditingElementRenderer.presenter.ts"],"sourcesContent":["\"use client\";\nimport { makeAutoObservable, observable, toJS } from \"mobx\";\nimport type { DocumentStore } from \"@webiny/website-builder-sdk\";\nimport {\n    contentSdk,\n    jsonPatch,\n    type EditingSdk,\n    type DocumentElement\n} from \"@webiny/website-builder-sdk\";\n\nexport class EditingElementRendererPresenter {\n    private element: DocumentElement;\n    private listeners: Array<() => void> = [];\n    private documentStore: DocumentStore;\n    private readonly editingSdk: EditingSdk | undefined;\n\n    constructor(documentStore: DocumentStore) {\n        this.documentStore = documentStore;\n        this.element = observable({}) as DocumentElement;\n        this.editingSdk = contentSdk.getEditingSdk();\n        makeAutoObservable(this);\n    }\n\n    get vm() {\n        return {\n            element: toJS(this.element)\n        };\n    }\n\n    init(element: DocumentElement) {\n        this.element = element;\n        this.setupPreview();\n    }\n\n    dispose() {\n        this.listeners.forEach(fn => fn());\n    }\n\n    private setupPreview() {\n        const element = this.element;\n\n        if (!element) {\n            return;\n        }\n\n        const { id } = element;\n\n        if (this.editingSdk) {\n            this.listeners.push(\n                this.editingSdk.messenger.on(`element.patch.${id}`, patch => {\n                    this.documentStore.updateDocument(document => {\n                        jsonPatch.applyPatch(document.bindings[id], patch, false, true);\n                    });\n                })\n            );\n        }\n    }\n}\n"],"names":["EditingElementRendererPresenter","documentStore","observable","contentSdk","makeAutoObservable","toJS","element","fn","id","patch","document","jsonPatch"],"mappings":";;;AAUO,MAAMA;IAMT,YAAYC,aAA4B,CAAE;aAJlC,SAAS,GAAsB,EAAE;QAKrC,IAAI,CAAC,aAAa,GAAGA;QACrB,IAAI,CAAC,OAAO,GAAGC,WAAW,CAAC;QAC3B,IAAI,CAAC,UAAU,GAAGC,WAAW,aAAa;QAC1CC,mBAAmB,IAAI;IAC3B;IAEA,IAAI,KAAK;QACL,OAAO;YACH,SAASC,KAAK,IAAI,CAAC,OAAO;QAC9B;IACJ;IAEA,KAAKC,OAAwB,EAAE;QAC3B,IAAI,CAAC,OAAO,GAAGA;QACf,IAAI,CAAC,YAAY;IACrB;IAEA,UAAU;QACN,IAAI,CAAC,SAAS,CAAC,OAAO,CAACC,CAAAA,KAAMA;IACjC;IAEQ,eAAe;QACnB,MAAMD,UAAU,IAAI,CAAC,OAAO;QAE5B,IAAI,CAACA,SACD;QAGJ,MAAM,EAAEE,EAAE,EAAE,GAAGF;QAEf,IAAI,IAAI,CAAC,UAAU,EACf,IAAI,CAAC,SAAS,CAAC,IAAI,CACf,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,cAAc,EAAEE,IAAI,EAAEC,CAAAA;YAChD,IAAI,CAAC,aAAa,CAAC,cAAc,CAACC,CAAAA;gBAC9BC,UAAU,UAAU,CAACD,SAAS,QAAQ,CAACF,GAAG,EAAEC,OAAO,OAAO;YAC9D;QACJ;IAGZ;AACJ"}

package/components/EditingElementRenderer/index.js

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

package/components/ElementIndexProvider.js

@@ -1,18 +1,13 @@
 "use client";
-
-import React from "react";
-const ElementIndexContext = /*#__PURE__*/React.createContext(0);
-export const ElementIndexProvider = ({
-  children,
-  index
-}) => {
-  return /*#__PURE__*/React.createElement(ElementIndexContext.Provider, {
-    value: index
-  }, children);
-};
-export const useElementIndex = () => {
-  const context = React.useContext(ElementIndexContext);
-  return context ?? 0;
+import react from "react";
+const ElementIndexContext = /*#__PURE__*/ react.createContext(0);
+const ElementIndexProvider = ({ children, index })=>/*#__PURE__*/ react.createElement(ElementIndexContext.Provider, {
+        value: index
+    }, children);
+const useElementIndex = ()=>{
+    const context = react.useContext(ElementIndexContext);
+    return context ?? 0;
 };
+export { ElementIndexProvider, useElementIndex };
 
 //# sourceMappingURL=ElementIndexProvider.js.map

package/components/ElementIndexProvider.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ElementIndexContext","createContext","ElementIndexProvider","children","index","createElement","Provider","value","useElementIndex","context","useContext"],"sources":["ElementIndexProvider.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\n\nconst ElementIndexContext = React.createContext<number>(0);\n\ninterface ElementIndexProviderProps {\n    index: number;\n    children: React.ReactNode;\n}\n\nexport const ElementIndexProvider = ({ children, index }: ElementIndexProviderProps) => {\n    return <ElementIndexContext.Provider value={index}>{children}</ElementIndexContext.Provider>;\n};\n\nexport const useElementIndex = () => {\n    const context = React.useContext(ElementIndexContext);\n\n    return context ?? 0;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,mBAAmB,gBAAGD,KAAK,CAACE,aAAa,CAAS,CAAC,CAAC;AAO1D,OAAO,MAAMC,oBAAoB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAiC,CAAC,KAAK;EACpF,oBAAOL,KAAA,CAAAM,aAAA,CAACL,mBAAmB,CAACM,QAAQ;IAACC,KAAK,EAAEH;EAAM,GAAED,QAAuC,CAAC;AAChG,CAAC;AAED,OAAO,MAAMK,eAAe,GAAGA,CAAA,KAAM;EACjC,MAAMC,OAAO,GAAGV,KAAK,CAACW,UAAU,CAACV,mBAAmB,CAAC;EAErD,OAAOS,OAAO,IAAI,CAAC;AACvB,CAAC","ignoreList":[]}
+{"version":3,"file":"components/ElementIndexProvider.js","sources":["../../src/components/ElementIndexProvider.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\n\nconst ElementIndexContext = React.createContext<number>(0);\n\ninterface ElementIndexProviderProps {\n    index: number;\n    children: React.ReactNode;\n}\n\nexport const ElementIndexProvider = ({ children, index }: ElementIndexProviderProps) => {\n    return <ElementIndexContext.Provider value={index}>{children}</ElementIndexContext.Provider>;\n};\n\nexport const useElementIndex = () => {\n    const context = React.useContext(ElementIndexContext);\n\n    return context ?? 0;\n};\n"],"names":["ElementIndexContext","React","ElementIndexProvider","children","index","useElementIndex","context"],"mappings":";;AAGA,MAAMA,sBAAsB,WAAHA,GAAGC,MAAAA,aAAmB,CAAS;AAOjD,MAAMC,uBAAuB,CAAC,EAAEC,QAAQ,EAAEC,KAAK,EAA6B,GACxE,WAAP,GAAO,oBAACJ,oBAAoB,QAAQ;QAAC,OAAOI;OAAQD;AAGjD,MAAME,kBAAkB;IAC3B,MAAMC,UAAUL,MAAAA,UAAgB,CAACD;IAEjC,OAAOM,WAAW;AACtB"}

package/components/ElementRenderer.js

@@ -1,27 +1,22 @@
 "use client";
-
-import React from "react";
+import react from "react";
 import { observer } from "mobx-react-lite";
 import { environment } from "@webiny/website-builder-sdk";
 import { EditingElementRenderer } from "./EditingElementRenderer/EditingElementRenderer.js";
 import { LiveElementRenderer } from "./LiveElementRenderer.js";
 import { useDocumentStore } from "./DocumentStoreProvider.js";
-export const ElementRenderer = observer(props => {
-  const documentStore = useDocumentStore();
-  const isEditing = environment.isEditing();
-  const element = documentStore.getElement(props.id);
-  if (!element) {
-    return null;
-  }
-  if (isEditing) {
-    return /*#__PURE__*/React.createElement(EditingElementRenderer, {
-      element: element
+const ElementRenderer = observer((props)=>{
+    const documentStore = useDocumentStore();
+    const isEditing = environment.isEditing();
+    const element = documentStore.getElement(props.id);
+    if (!element) return null;
+    if (isEditing) return /*#__PURE__*/ react.createElement(EditingElementRenderer, {
+        element: element
     });
-  } else {
-    return /*#__PURE__*/React.createElement(LiveElementRenderer, {
-      element: element
+    return /*#__PURE__*/ react.createElement(LiveElementRenderer, {
+        element: element
     });
-  }
 });
+export { ElementRenderer };
 
 //# sourceMappingURL=ElementRenderer.js.map

package/components/ElementRenderer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","observer","environment","EditingElementRenderer","LiveElementRenderer","useDocumentStore","ElementRenderer","props","documentStore","isEditing","element","getElement","id","createElement"],"sources":["ElementRenderer.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { environment } from \"@webiny/website-builder-sdk\";\nimport { EditingElementRenderer } from \"./EditingElementRenderer/EditingElementRenderer.js\";\nimport { LiveElementRenderer } from \"./LiveElementRenderer.js\";\nimport { useDocumentStore } from \"./DocumentStoreProvider.js\";\n\ninterface ElementRendererProps {\n    id: string;\n}\n\nexport const ElementRenderer = observer((props: ElementRendererProps) => {\n    const documentStore = useDocumentStore();\n    const isEditing = environment.isEditing();\n    const element = documentStore.getElement(props.id);\n\n    if (!element) {\n        return null;\n    }\n\n    if (isEditing) {\n        return <EditingElementRenderer element={element} />;\n    } else {\n        return <LiveElementRenderer element={element} />;\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,sBAAsB;AAC/B,SAASC,mBAAmB;AAC5B,SAASC,gBAAgB;AAMzB,OAAO,MAAMC,eAAe,GAAGL,QAAQ,CAAEM,KAA2B,IAAK;EACrE,MAAMC,aAAa,GAAGH,gBAAgB,CAAC,CAAC;EACxC,MAAMI,SAAS,GAAGP,WAAW,CAACO,SAAS,CAAC,CAAC;EACzC,MAAMC,OAAO,GAAGF,aAAa,CAACG,UAAU,CAACJ,KAAK,CAACK,EAAE,CAAC;EAElD,IAAI,CAACF,OAAO,EAAE;IACV,OAAO,IAAI;EACf;EAEA,IAAID,SAAS,EAAE;IACX,oBAAOT,KAAA,CAAAa,aAAA,CAACV,sBAAsB;MAACO,OAAO,EAAEA;IAAQ,CAAE,CAAC;EACvD,CAAC,MAAM;IACH,oBAAOV,KAAA,CAAAa,aAAA,CAACT,mBAAmB;MAACM,OAAO,EAAEA;IAAQ,CAAE,CAAC;EACpD;AACJ,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"components/ElementRenderer.js","sources":["../../src/components/ElementRenderer.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { environment } from \"@webiny/website-builder-sdk\";\nimport { EditingElementRenderer } from \"./EditingElementRenderer/EditingElementRenderer.js\";\nimport { LiveElementRenderer } from \"./LiveElementRenderer.js\";\nimport { useDocumentStore } from \"./DocumentStoreProvider.js\";\n\ninterface ElementRendererProps {\n    id: string;\n}\n\nexport const ElementRenderer = observer((props: ElementRendererProps) => {\n    const documentStore = useDocumentStore();\n    const isEditing = environment.isEditing();\n    const element = documentStore.getElement(props.id);\n\n    if (!element) {\n        return null;\n    }\n\n    if (isEditing) {\n        return <EditingElementRenderer element={element} />;\n    } else {\n        return <LiveElementRenderer element={element} />;\n    }\n});\n"],"names":["ElementRenderer","observer","props","documentStore","useDocumentStore","isEditing","environment","element","EditingElementRenderer","LiveElementRenderer"],"mappings":";;;;;;;AAYO,MAAMA,kBAAkBC,SAAS,CAACC;IACrC,MAAMC,gBAAgBC;IACtB,MAAMC,YAAYC,YAAY,SAAS;IACvC,MAAMC,UAAUJ,cAAc,UAAU,CAACD,MAAM,EAAE;IAEjD,IAAI,CAACK,SACD,OAAO;IAGX,IAAIF,WACA,OAAO,WAAP,GAAO,oBAACG,wBAAsBA;QAAC,SAASD;;IAExC,OAAO,WAAP,GAAO,oBAACE,qBAAmBA;QAAC,SAASF;;AAE7C"}

package/components/ElementSlot.js

@@ -1,16 +1,13 @@
 "use client";
-
-import React from "react";
+import react from "react";
 import { environment } from "@webiny/website-builder-sdk";
 import { LiveElementSlot } from "./LiveElementSlot.js";
 import { PreviewElementSlot } from "./PreviewElementSlot.js";
-export const ElementSlot = props => {
-  const isEditing = environment.isEditing();
-  if (isEditing) {
-    return /*#__PURE__*/React.createElement(PreviewElementSlot, props);
-  } else {
-    return /*#__PURE__*/React.createElement(LiveElementSlot, props);
-  }
+const ElementSlot = (props)=>{
+    const isEditing = environment.isEditing();
+    if (isEditing) return /*#__PURE__*/ react.createElement(PreviewElementSlot, props);
+    return /*#__PURE__*/ react.createElement(LiveElementSlot, props);
 };
+export { ElementSlot };
 
 //# sourceMappingURL=ElementSlot.js.map

package/components/ElementSlot.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","environment","LiveElementSlot","PreviewElementSlot","ElementSlot","props","isEditing","createElement"],"sources":["ElementSlot.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { environment } from \"@webiny/website-builder-sdk\";\nimport { LiveElementSlot } from \"./LiveElementSlot.js\";\nimport { PreviewElementSlot } from \"./PreviewElementSlot.js\";\n\nexport interface ElementSlotProps {\n    // Element that contains this slot.\n    parentId: string;\n    // Path to the array of elements within the element's data structure.\n    slot: string;\n    // IDs of the elements to render.\n    elements: string[];\n}\n\nexport const ElementSlot = (props: ElementSlotProps) => {\n    const isEditing = environment.isEditing();\n\n    if (isEditing) {\n        return <PreviewElementSlot {...props} />;\n    } else {\n        return <LiveElementSlot {...props} />;\n    }\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,eAAe;AACxB,SAASC,kBAAkB;AAW3B,OAAO,MAAMC,WAAW,GAAIC,KAAuB,IAAK;EACpD,MAAMC,SAAS,GAAGL,WAAW,CAACK,SAAS,CAAC,CAAC;EAEzC,IAAIA,SAAS,EAAE;IACX,oBAAON,KAAA,CAAAO,aAAA,CAACJ,kBAAkB,EAAKE,KAAQ,CAAC;EAC5C,CAAC,MAAM;IACH,oBAAOL,KAAA,CAAAO,aAAA,CAACL,eAAe,EAAKG,KAAQ,CAAC;EACzC;AACJ,CAAC","ignoreList":[]}
+{"version":3,"file":"components/ElementSlot.js","sources":["../../src/components/ElementSlot.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { environment } from \"@webiny/website-builder-sdk\";\nimport { LiveElementSlot } from \"./LiveElementSlot.js\";\nimport { PreviewElementSlot } from \"./PreviewElementSlot.js\";\n\nexport interface ElementSlotProps {\n    // Element that contains this slot.\n    parentId: string;\n    // Path to the array of elements within the element's data structure.\n    slot: string;\n    // IDs of the elements to render.\n    elements: string[];\n}\n\nexport const ElementSlot = (props: ElementSlotProps) => {\n    const isEditing = environment.isEditing();\n\n    if (isEditing) {\n        return <PreviewElementSlot {...props} />;\n    } else {\n        return <LiveElementSlot {...props} />;\n    }\n};\n"],"names":["ElementSlot","props","isEditing","environment","PreviewElementSlot","LiveElementSlot"],"mappings":";;;;;AAeO,MAAMA,cAAc,CAACC;IACxB,MAAMC,YAAYC,YAAY,SAAS;IAEvC,IAAID,WACA,OAAO,WAAP,GAAO,oBAACE,oBAAuBH;IAE/B,OAAO,WAAP,GAAO,oBAACI,iBAAoBJ;AAEpC"}