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

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

@@ -2,7 +2,8 @@ import { useEffect, useState } from "react";
 import { useDropZoneManager } from "./DropZoneManagerProvider.js";
 export function useProximityDropzone({
   id,
-  box
+  box,
+  canAccept
 }) {
   const dropzoneManager = useDropZoneManager();
   const [proximity, setProximity] = useState(null);
@@ -10,6 +11,7 @@ export function useProximityDropzone({
     dropzoneManager.register({
       id,
       box,
+      canAccept,
       onProximityChange: proximity => {
         setProximity(proximity);
       }
@@ -17,7 +19,7 @@ export function useProximityDropzone({
     return () => {
       dropzoneManager.unregister(id);
     };
-  }, [id, box]);
+  }, [id, box, canAccept]);
   return {
     proximity
   };

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

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useState","useDropZoneManager","useProximityDropzone","id","box","dropzoneManager","proximity","setProximity","register","onProximityChange","unregister"],"sources":["useProximityDropzone.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useDropZoneManager } from \"./DropZoneManagerProvider.js\";\nimport type { Box } from \"./Box.js\";\nimport type { DropZoneProximity } from \"~/BaseEditor/defaultConfig/Content/Preview/DropZoneManager.js\";\n\nexport interface DropEvent {\n    item: { id?: string; componentName: string };\n    target: { parentId: string; slot: string; index: number };\n}\n\ninterface UseProximityDropzoneParams {\n    id: string;\n    box: Box;\n}\n\nexport function useProximityDropzone({ id, box }: UseProximityDropzoneParams) {\n    const dropzoneManager = useDropZoneManager();\n    const [proximity, setProximity] = useState<DropZoneProximity | null>(null);\n\n    useEffect(() => {\n        dropzoneManager.register({\n            id,\n            box,\n            onProximityChange: proximity => {\n                setProximity(proximity);\n            }\n        });\n\n        return () => {\n            dropzoneManager.unregister(id);\n        };\n    }, [id, box]);\n\n    return { proximity };\n}\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,kBAAkB;AAc3B,OAAO,SAASC,oBAAoBA,CAAC;EAAEC,EAAE;EAAEC;AAAgC,CAAC,EAAE;EAC1E,MAAMC,eAAe,GAAGJ,kBAAkB,CAAC,CAAC;EAC5C,MAAM,CAACK,SAAS,EAAEC,YAAY,CAAC,GAAGP,QAAQ,CAA2B,IAAI,CAAC;EAE1ED,SAAS,CAAC,MAAM;IACZM,eAAe,CAACG,QAAQ,CAAC;MACrBL,EAAE;MACFC,GAAG;MACHK,iBAAiB,EAAEH,SAAS,IAAI;QAC5BC,YAAY,CAACD,SAAS,CAAC;MAC3B;IACJ,CAAC,CAAC;IAEF,OAAO,MAAM;MACTD,eAAe,CAACK,UAAU,CAACP,EAAE,CAAC;IAClC,CAAC;EACL,CAAC,EAAE,CAACA,EAAE,EAAEC,GAAG,CAAC,CAAC;EAEb,OAAO;IAAEE;EAAU,CAAC;AACxB","ignoreList":[]}
+{"version":3,"names":["useEffect","useState","useDropZoneManager","useProximityDropzone","id","box","canAccept","dropzoneManager","proximity","setProximity","register","onProximityChange","unregister"],"sources":["useProximityDropzone.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useDropZoneManager } from \"./DropZoneManagerProvider.js\";\nimport type { Box } from \"./Box.js\";\nimport type { DropZoneProximity } from \"~/BaseEditor/defaultConfig/Content/Preview/DropZoneManager.js\";\n\nexport interface DropEvent {\n    item: { id?: string; componentName: string };\n    target: { parentId: string; slot: string; index: number };\n}\n\ninterface UseProximityDropzoneParams {\n    id: string;\n    box: Box;\n    canAccept?: () => boolean;\n}\n\nexport function useProximityDropzone({ id, box, canAccept }: UseProximityDropzoneParams) {\n    const dropzoneManager = useDropZoneManager();\n    const [proximity, setProximity] = useState<DropZoneProximity | null>(null);\n\n    useEffect(() => {\n        dropzoneManager.register({\n            id,\n            box,\n            canAccept,\n            onProximityChange: proximity => {\n                setProximity(proximity);\n            }\n        });\n\n        return () => {\n            dropzoneManager.unregister(id);\n        };\n    }, [id, box, canAccept]);\n\n    return { proximity };\n}\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,kBAAkB;AAe3B,OAAO,SAASC,oBAAoBA,CAAC;EAAEC,EAAE;EAAEC,GAAG;EAAEC;AAAsC,CAAC,EAAE;EACrF,MAAMC,eAAe,GAAGL,kBAAkB,CAAC,CAAC;EAC5C,MAAM,CAACM,SAAS,EAAEC,YAAY,CAAC,GAAGR,QAAQ,CAA2B,IAAI,CAAC;EAE1ED,SAAS,CAAC,MAAM;IACZO,eAAe,CAACG,QAAQ,CAAC;MACrBN,EAAE;MACFC,GAAG;MACHC,SAAS;MACTK,iBAAiB,EAAEH,SAAS,IAAI;QAC5BC,YAAY,CAACD,SAAS,CAAC;MAC3B;IACJ,CAAC,CAAC;IAEF,OAAO,MAAM;MACTD,eAAe,CAACK,UAAU,CAACR,EAAE,CAAC;IAClC,CAAC;EACL,CAAC,EAAE,CAACA,EAAE,EAAEC,GAAG,EAAEC,SAAS,CAAC,CAAC;EAExB,OAAO;IAAEE;EAAU,CAAC;AACxB","ignoreList":[]}

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

@@ -1,7 +1,7 @@
 import type { ViewportManager } from "@webiny/website-builder-sdk";
 /**
- * Calculate the real width of the preview container, taking into account the current display mode
- * and actual container size. If the display mode width is larger than the available space, return the
+ * Calculate the real width of the preview container, taking into account reserved UI space, breakpoint,
+ * and viewport width. If the display mode width is larger than the available space, return the
  * width of the available space.
  */
-export declare const useResponsiveContainer: (viewportManager: ViewportManager) => string;
+export declare const useResponsiveContainer: (viewportManager: ViewportManager) => number;

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

@@ -1,26 +1,31 @@
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
+import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor.js";
+import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
+
 /**
- * Calculate the real width of the preview container, taking into account the current display mode
- * and actual container size. If the display mode width is larger than the available space, return the
+ * Calculate the real width of the preview container, taking into account reserved UI space, breakpoint,
+ * and viewport width. If the display mode width is larger than the available space, return the
  * width of the available space.
  */
 export const useResponsiveContainer = viewportManager => {
   const [containerWidth, setContainerWidth] = useState(0);
+  const editor = useDocumentEditor();
+  const uiWidth = useSelectFromEditor(state => state.uiReservedSpace.width);
+  const {
+    breakpoint
+  } = useBreakpoint();
+  const updateContainerWidth = useCallback(() => {
+    const uiWidth = editor.getEditorState().read().uiReservedSpace.width;
+    setContainerWidth(document.body.clientWidth - uiWidth);
+  }, [editor]);
   useEffect(() => {
-    const updateContainerWidth = () => {
-      const width = document.body.clientWidth - 600;
-      setContainerWidth(width);
-    };
     updateContainerWidth();
+  }, [breakpoint.name, uiWidth]);
+  useEffect(() => {
     return viewportManager.onViewportChangeEnd(updateContainerWidth);
   }, []);
-  const {
-    breakpoint
-  } = useBreakpoint();
-  return useMemo(() => {
-    return Math.min(containerWidth, breakpoint.maxWidth) + "px";
-  }, [breakpoint.name, containerWidth]);
+  return Math.min(containerWidth, breakpoint.maxWidth);
 };
 
 //# sourceMappingURL=useResponsiveContainer.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useMemo","useState","useBreakpoint","useResponsiveContainer","viewportManager","containerWidth","setContainerWidth","updateContainerWidth","width","document","body","clientWidth","onViewportChangeEnd","breakpoint","Math","min","maxWidth","name"],"sources":["useResponsiveContainer.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport type { ViewportManager } from \"@webiny/website-builder-sdk\";\n\n/**\n * Calculate the real width of the preview container, taking into account the current display mode\n * and actual container size. If the display mode width is larger than the available space, return the\n * width of the available space.\n */\nexport const useResponsiveContainer = (viewportManager: ViewportManager) => {\n    const [containerWidth, setContainerWidth] = useState(0);\n\n    useEffect(() => {\n        const updateContainerWidth = () => {\n            const width = document.body.clientWidth - 600;\n            setContainerWidth(width);\n        };\n\n        updateContainerWidth();\n\n        return viewportManager.onViewportChangeEnd(updateContainerWidth);\n    }, []);\n\n    const { breakpoint } = useBreakpoint();\n\n    return useMemo(() => {\n        return Math.min(containerWidth, breakpoint.maxWidth) + \"px\";\n    }, [breakpoint.name, containerWidth]);\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,aAAa;AAGtB;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,sBAAsB,GAAIC,eAAgC,IAAK;EACxE,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGL,QAAQ,CAAC,CAAC,CAAC;EAEvDF,SAAS,CAAC,MAAM;IACZ,MAAMQ,oBAAoB,GAAGA,CAAA,KAAM;MAC/B,MAAMC,KAAK,GAAGC,QAAQ,CAACC,IAAI,CAACC,WAAW,GAAG,GAAG;MAC7CL,iBAAiB,CAACE,KAAK,CAAC;IAC5B,CAAC;IAEDD,oBAAoB,CAAC,CAAC;IAEtB,OAAOH,eAAe,CAACQ,mBAAmB,CAACL,oBAAoB,CAAC;EACpE,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM;IAAEM;EAAW,CAAC,GAAGX,aAAa,CAAC,CAAC;EAEtC,OAAOF,OAAO,CAAC,MAAM;IACjB,OAAOc,IAAI,CAACC,GAAG,CAACV,cAAc,EAAEQ,UAAU,CAACG,QAAQ,CAAC,GAAG,IAAI;EAC/D,CAAC,EAAE,CAACH,UAAU,CAACI,IAAI,EAAEZ,cAAc,CAAC,CAAC;AACzC,CAAC","ignoreList":[]}
+{"version":3,"names":["useCallback","useEffect","useState","useBreakpoint","useSelectFromEditor","useDocumentEditor","useResponsiveContainer","viewportManager","containerWidth","setContainerWidth","editor","uiWidth","state","uiReservedSpace","width","breakpoint","updateContainerWidth","getEditorState","read","document","body","clientWidth","name","onViewportChangeEnd","Math","min","maxWidth"],"sources":["useResponsiveContainer.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport type { ViewportManager } from \"@webiny/website-builder-sdk\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\n\n/**\n * Calculate the real width of the preview container, taking into account reserved UI space, breakpoint,\n * and viewport width. If the display mode width is larger than the available space, return the\n * width of the available space.\n */\nexport const useResponsiveContainer = (viewportManager: ViewportManager) => {\n    const [containerWidth, setContainerWidth] = useState(0);\n    const editor = useDocumentEditor();\n    const uiWidth = useSelectFromEditor(state => state.uiReservedSpace.width);\n    const { breakpoint } = useBreakpoint();\n\n    const updateContainerWidth = useCallback(() => {\n        const uiWidth = editor.getEditorState().read().uiReservedSpace.width;\n        setContainerWidth(document.body.clientWidth - uiWidth);\n    }, [editor]);\n\n    useEffect(() => {\n        updateContainerWidth();\n    }, [breakpoint.name, uiWidth]);\n\n    useEffect(() => {\n        return viewportManager.onViewportChangeEnd(updateContainerWidth);\n    }, []);\n\n    return Math.min(containerWidth, breakpoint.maxWidth);\n};\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AACxD,SAASC,aAAa;AAEtB,SAASC,mBAAmB;AAC5B,SAASC,iBAAiB;;AAE1B;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,sBAAsB,GAAIC,eAAgC,IAAK;EACxE,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGP,QAAQ,CAAC,CAAC,CAAC;EACvD,MAAMQ,MAAM,GAAGL,iBAAiB,CAAC,CAAC;EAClC,MAAMM,OAAO,GAAGP,mBAAmB,CAACQ,KAAK,IAAIA,KAAK,CAACC,eAAe,CAACC,KAAK,CAAC;EACzE,MAAM;IAAEC;EAAW,CAAC,GAAGZ,aAAa,CAAC,CAAC;EAEtC,MAAMa,oBAAoB,GAAGhB,WAAW,CAAC,MAAM;IAC3C,MAAMW,OAAO,GAAGD,MAAM,CAACO,cAAc,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC,CAACL,eAAe,CAACC,KAAK;IACpEL,iBAAiB,CAACU,QAAQ,CAACC,IAAI,CAACC,WAAW,GAAGV,OAAO,CAAC;EAC1D,CAAC,EAAE,CAACD,MAAM,CAAC,CAAC;EAEZT,SAAS,CAAC,MAAM;IACZe,oBAAoB,CAAC,CAAC;EAC1B,CAAC,EAAE,CAACD,UAAU,CAACO,IAAI,EAAEX,OAAO,CAAC,CAAC;EAE9BV,SAAS,CAAC,MAAM;IACZ,OAAOM,eAAe,CAACgB,mBAAmB,CAACP,oBAAoB,CAAC;EACpE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOQ,IAAI,CAACC,GAAG,CAACjB,cAAc,EAAEO,UAAU,CAACW,QAAQ,CAAC;AACxD,CAAC","ignoreList":[]}

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

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
-import { useGetWebsiteBuilderSettings } from "../../../../features/index.js";
+import { useGetWebsiteBuilderSettings } from "../../../features/index.js";
 import { useSubscribeToLocalStorage } from "./useSubscribeToLocalStorage.js";
 const CUSTOM_PREVIEW_DOMAIN = "webiny_wb_custom_preview_domain";
 

package/BaseEditor/defaultConfig/DefaultEditorConfig.js

@@ -1,6 +1,5 @@
 import React from "react";
 import { ReactComponent as TouchIcon } from "@webiny/icons/touch_app.svg";
-import { Breadcrumbs } from "./Content/Breadcrumbs/index.js";
 import { EditorConfig } from "../config/index.js";
 import { InfoMessage } from "./Sidebar/InfoMessage.js";
 import { StyleSettingsGroup } from "./Sidebar/StyleSettings/StyleSettingsGroup.js";
@@ -11,7 +10,7 @@ import { NavigatorTab } from "./Toolbar/Navigator/NavigatorTab.js";
 import { CommandHandlers } from "../commandHandlers/index.js";
 import { ElementSettings } from "./Sidebar/ElementSettings/ElementSettings.js";
 import { ElementInputRenderers } from "./ElementInputRenderers.js";
-import { DocumentPreview } from "./Content/Preview/DocumentPreview.js";
+import { ContentPreviewConfig } from "./Content/ContentPreviewConfig.js";
 const {
   Ui
 } = EditorConfig;
@@ -22,13 +21,7 @@ const ClickToActivate = () => {
   }));
 };
 export const DefaultEditorConfig = /*#__PURE__*/React.memo(() => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorConfig, null, /*#__PURE__*/React.createElement(CommandHandlers, null), /*#__PURE__*/React.createElement(ElementInputRenderers, null), /*#__PURE__*/React.createElement(Ui.Content.Element, {
-    name: "breadcrumbs",
-    element: /*#__PURE__*/React.createElement(Breadcrumbs, null)
-  }), /*#__PURE__*/React.createElement(Ui.Content.Element, {
-    name: "preview",
-    element: /*#__PURE__*/React.createElement(DocumentPreview, null)
-  }), /*#__PURE__*/React.createElement(Ui.Toolbar.Element, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommandHandlers, null), /*#__PURE__*/React.createElement(EditorConfig, null, /*#__PURE__*/React.createElement(ElementInputRenderers, null), /*#__PURE__*/React.createElement(ContentPreviewConfig, null), /*#__PURE__*/React.createElement(Ui.Toolbar.Element, {
     name: "insertElements",
     group: "tabs",
     element: /*#__PURE__*/React.createElement(InsertElementsTab, null)

package/BaseEditor/defaultConfig/DefaultEditorConfig.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","TouchIcon","Breadcrumbs","EditorConfig","InfoMessage","StyleSettingsGroup","StyleProperties","ElementSettingsGroup","InsertElementsTab","NavigatorTab","CommandHandlers","ElementSettings","ElementInputRenderers","DocumentPreview","Ui","ClickToActivate","createElement","NoActiveElement","icon","message","DefaultEditorConfig","memo","Fragment","Content","Element","name","element","Toolbar","group","Sidebar","Group","OnActiveElement","displayName"],"sources":["DefaultEditorConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as TouchIcon } from \"@webiny/icons/touch_app.svg\";\nimport { Breadcrumbs } from \"./Content/Breadcrumbs/index.js\";\nimport { EditorConfig } from \"~/BaseEditor/config/index.js\";\nimport { InfoMessage } from \"./Sidebar/InfoMessage.js\";\nimport { StyleSettingsGroup } from \"./Sidebar/StyleSettings/StyleSettingsGroup.js\";\nimport { StyleProperties } from \"./Sidebar/StyleSettings/StyleProperties.js\";\nimport { ElementSettingsGroup } from \"./Sidebar/ElementSettings/ElementSettingsGroup.js\";\nimport { InsertElementsTab } from \"./Toolbar/InsertElements/InsertElementsTab.js\";\nimport { NavigatorTab } from \"./Toolbar/Navigator/NavigatorTab.js\";\nimport { CommandHandlers } from \"~/BaseEditor/commandHandlers/index.js\";\nimport { ElementSettings } from \"./Sidebar/ElementSettings/ElementSettings.js\";\nimport { ElementInputRenderers } from \"./ElementInputRenderers.js\";\nimport { DocumentPreview } from \"./Content/Preview/DocumentPreview.js\";\n\nconst { Ui } = EditorConfig;\n\nconst ClickToActivate = () => {\n    return (\n        <Ui.NoActiveElement>\n            <InfoMessage\n                icon={<TouchIcon />}\n                message={\"Select an element on the canvas to activate this panel.\"}\n            />\n        </Ui.NoActiveElement>\n    );\n};\n\nexport const DefaultEditorConfig = React.memo(() => {\n    return (\n        <>\n            <EditorConfig>\n                <CommandHandlers />\n                <ElementInputRenderers />\n                <Ui.Content.Element name={\"breadcrumbs\"} element={<Breadcrumbs />} />\n                <Ui.Content.Element name={\"preview\"} element={<DocumentPreview />} />\n                <Ui.Toolbar.Element\n                    name={\"insertElements\"}\n                    group={\"tabs\"}\n                    element={<InsertElementsTab />}\n                />\n                <Ui.Toolbar.Element name={\"navigator\"} group={\"tabs\"} element={<NavigatorTab />} />\n                {/* Sidebar Groups */}\n                <Ui.Sidebar.Group name={\"element\"} element={<ElementSettingsGroup />} />\n                <Ui.Sidebar.Group name={\"style\"} element={<StyleSettingsGroup />} />\n                {/* Style Settings Tab */}\n                <Ui.Sidebar.Element\n                    name={\"styleSettings\"}\n                    group={\"style\"}\n                    element={\n                        <Ui.OnActiveElement>\n                            <StyleProperties />\n                        </Ui.OnActiveElement>\n                    }\n                />\n                <Ui.Sidebar.Element\n                    name={\"styleInactive\"}\n                    group={\"style\"}\n                    element={<ClickToActivate />}\n                />\n                {/* Element Settings Tab */}\n                <Ui.Sidebar.Element\n                    name={\"elementInactive\"}\n                    group={\"element\"}\n                    element={<ClickToActivate />}\n                />\n                {/* This element renders element properties. */}\n                <Ui.Sidebar.Element\n                    name={\"elementSettings\"}\n                    group={\"element\"}\n                    element={\n                        <Ui.OnActiveElement>\n                            <ElementSettings />\n                        </Ui.OnActiveElement>\n                    }\n                />\n                {/*<Ui.Sidebar.Element\n                    name={\"stateEditor\"}\n                    group={\"element\"}\n                    element={<DocumentStateEditor />}\n                />*/}\n            </EditorConfig>\n        </>\n    );\n});\n\nDefaultEditorConfig.displayName = \"DefaultEditorConfig\";\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","ReactComponent","TouchIcon","EditorConfig","InfoMessage","StyleSettingsGroup","StyleProperties","ElementSettingsGroup","InsertElementsTab","NavigatorTab","CommandHandlers","ElementSettings","ElementInputRenderers","ContentPreviewConfig","Ui","ClickToActivate","createElement","NoActiveElement","icon","message","DefaultEditorConfig","memo","Fragment","Toolbar","Element","name","group","element","Sidebar","Group","OnActiveElement","displayName"],"sources":["DefaultEditorConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as TouchIcon } from \"@webiny/icons/touch_app.svg\";\nimport { EditorConfig } from \"~/BaseEditor/config/index.js\";\nimport { InfoMessage } from \"./Sidebar/InfoMessage.js\";\nimport { StyleSettingsGroup } from \"./Sidebar/StyleSettings/StyleSettingsGroup.js\";\nimport { StyleProperties } from \"./Sidebar/StyleSettings/StyleProperties.js\";\nimport { ElementSettingsGroup } from \"./Sidebar/ElementSettings/ElementSettingsGroup.js\";\nimport { InsertElementsTab } from \"./Toolbar/InsertElements/InsertElementsTab.js\";\nimport { NavigatorTab } from \"./Toolbar/Navigator/NavigatorTab.js\";\nimport { CommandHandlers } from \"~/BaseEditor/commandHandlers/index.js\";\nimport { ElementSettings } from \"./Sidebar/ElementSettings/ElementSettings.js\";\nimport { ElementInputRenderers } from \"./ElementInputRenderers.js\";\nimport { ContentPreviewConfig } from \"./Content/ContentPreviewConfig.js\";\n\nconst { Ui } = EditorConfig;\n\nconst ClickToActivate = () => {\n    return (\n        <Ui.NoActiveElement>\n            <InfoMessage\n                icon={<TouchIcon />}\n                message={\"Select an element on the canvas to activate this panel.\"}\n            />\n        </Ui.NoActiveElement>\n    );\n};\n\nexport const DefaultEditorConfig = React.memo(() => {\n    return (\n        <>\n            <CommandHandlers />\n            <EditorConfig>\n                <ElementInputRenderers />\n                <ContentPreviewConfig />\n                <Ui.Toolbar.Element\n                    name={\"insertElements\"}\n                    group={\"tabs\"}\n                    element={<InsertElementsTab />}\n                />\n                <Ui.Toolbar.Element name={\"navigator\"} group={\"tabs\"} element={<NavigatorTab />} />\n                {/* Sidebar Groups */}\n                <Ui.Sidebar.Group name={\"element\"} element={<ElementSettingsGroup />} />\n                <Ui.Sidebar.Group name={\"style\"} element={<StyleSettingsGroup />} />\n                {/* Style Settings Tab */}\n                <Ui.Sidebar.Element\n                    name={\"styleSettings\"}\n                    group={\"style\"}\n                    element={\n                        <Ui.OnActiveElement>\n                            <StyleProperties />\n                        </Ui.OnActiveElement>\n                    }\n                />\n                <Ui.Sidebar.Element\n                    name={\"styleInactive\"}\n                    group={\"style\"}\n                    element={<ClickToActivate />}\n                />\n                {/* Element Settings Tab */}\n                <Ui.Sidebar.Element\n                    name={\"elementInactive\"}\n                    group={\"element\"}\n                    element={<ClickToActivate />}\n                />\n                {/* This element renders element properties. */}\n                <Ui.Sidebar.Element\n                    name={\"elementSettings\"}\n                    group={\"element\"}\n                    element={\n                        <Ui.OnActiveElement>\n                            <ElementSettings />\n                        </Ui.OnActiveElement>\n                    }\n                />\n                {/*<Ui.Sidebar.Element\n                    name={\"stateEditor\"}\n                    group={\"element\"}\n                    element={<DocumentStateEditor />}\n                />*/}\n            </EditorConfig>\n        </>\n    );\n});\n\nDefaultEditorConfig.displayName = \"DefaultEditorConfig\";\n"],"mappings":"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","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementInputs.d.ts

@@ -3,5 +3,23 @@ import type { DocumentElement } from "@webiny/website-builder-sdk";
 interface ElementInputsProps {
     element: DocumentElement;
 }
-export declare const ElementInputs: ({ element }: ElementInputsProps) => React.JSX.Element | null;
+export declare const ElementInputs: (({ element }: ElementInputsProps) => React.JSX.Element | null) & {
+    original: ({ element }: ElementInputsProps) => React.JSX.Element | null;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ element }: ElementInputsProps) => React.JSX.Element | null) & {
+        original: ({ element }: ElementInputsProps) => React.JSX.Element | null;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<(({ element }: ElementInputsProps) => React.JSX.Element | null) & {
+        original: ({ element }: ElementInputsProps) => React.JSX.Element | null;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
 export {};

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementInputs.js

@@ -1,11 +1,12 @@
 import React, { useMemo } from "react";
 import { Grid } from "@webiny/admin-ui";
+import { makeDecoratable } from "@webiny/app-admin";
 import { useComponent } from "../../../hooks/useComponent.js";
 import { InputRenderer } from "./InputRenderer.js";
 import { ComponentManifestToAstConverter } from "@webiny/website-builder-sdk";
 import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument.js";
 import { InfoMessage } from "../InfoMessage.js";
-export const ElementInputs = ({
+export const ElementInputs = makeDecoratable("ElementInputs", ({
   element
 }) => {
   const component = useComponent(element.component.name);
@@ -33,7 +34,7 @@ export const ElementInputs = ({
     ast: inputsAst,
     bindings: bindings.inputs
   }));
-};
+});
 
 // interface ElementInputProps {
 //     element: DocumentElement;

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementInputs.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","Grid","useComponent","InputRenderer","ComponentManifestToAstConverter","useSelectFromDocument","InfoMessage","ElementInputs","element","component","name","bindings","document","id","inputs","inputsAst","convert","hasEditableInputs","filter","input","type","length","createElement","message","key","ast"],"sources":["ElementInputs.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { useComponent } from \"~/BaseEditor/hooks/useComponent.js\";\nimport { InputRenderer } from \"./InputRenderer.js\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { InfoMessage } from \"~/BaseEditor/defaultConfig/Sidebar/InfoMessage.js\";\n\ninterface ElementInputsProps {\n    element: DocumentElement;\n}\n\nexport const ElementInputs = ({ element }: ElementInputsProps) => {\n    const component = useComponent(element.component.name);\n\n    const bindings = useSelectFromDocument(\n        document => {\n            return document.bindings[element.id] ?? { inputs: {} };\n        },\n        [element.id]\n    );\n\n    const inputsAst = useMemo(() => {\n        return ComponentManifestToAstConverter.convert(component.inputs ?? []);\n    }, [component.name, element.id]);\n\n    const hasEditableInputs = useMemo(() => {\n        return inputsAst.filter(input => input.type !== \"slot\").length > 0;\n    }, [inputsAst]);\n\n    if (!element) {\n        return null;\n    }\n\n    if (!hasEditableInputs) {\n        return <InfoMessage message={\"This element has no inputs.\"} />;\n    }\n\n    return (\n        <Grid>\n            {/*<Grid.Column key={\"repeat\"} span={12}>*/}\n            {/*    <Select*/}\n            {/*        label={\"Repeat for each\"}*/}\n            {/*        placeholder={\"Select binding\"}*/}\n            {/*        options={arrayOptions}*/}\n            {/*        value={repeat.value ?? \"\"}*/}\n            {/*        onChange={value => repeat.onChange(value === \"\" ? undefined : value)}*/}\n            {/*    />*/}\n            {/*</Grid.Column>*/}\n            <InputRenderer key={element.id} ast={inputsAst} bindings={bindings.inputs} />\n        </Grid>\n    );\n};\n\n// interface ElementInputProps {\n//     element: DocumentElement;\n//     input: ComponentInput;\n// }\n//\n// const ElementInput = ({ element, input }: ElementInputProps) => {\n//     const Renderer = useInputRenderer(input.renderer || \"__unknown__\");\n//\n//     const { value, onChange, onPreviewChange, setBindingType } = useInputValue(element, input);\n//\n//     /*   return (\n//         <Renderer\n//             value={value.static}\n//             input={input}\n//             onChange={onChange}\n//             onPreviewChange={onPreviewChange}\n//         />\n//     );*/\n//     if (value.expression) {\n//         return (\n//             <WithBindingToggle type={\"expression\"} setBindingType={setBindingType}>\n//                 <ExpressionRenderer\n//                     element={element}\n//                     value={value.expression}\n//                     onChange={onChange}\n//                     input={input}\n//                 />\n//             </WithBindingToggle>\n//         );\n//     }\n//\n//     return (\n//         <WithBindingToggle type={\"static\"} setBindingType={setBindingType}>\n//             <Renderer\n//                 value={value.static}\n//                 input={input}\n//                 onChange={onChange}\n//                 onPreviewChange={onPreviewChange}\n//             />\n//         </WithBindingToggle>\n//     );\n// };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,IAAI,QAAQ,kBAAkB;AAEvC,SAASC,YAAY;AACrB,SAASC,aAAa;AACtB,SAASC,+BAA+B,QAAQ,6BAA6B;AAC7E,SAASC,qBAAqB;AAC9B,SAASC,WAAW;AAMpB,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEC;AAA4B,CAAC,KAAK;EAC9D,MAAMC,SAAS,GAAGP,YAAY,CAACM,OAAO,CAACC,SAAS,CAACC,IAAI,CAAC;EAEtD,MAAMC,QAAQ,GAAGN,qBAAqB,CAClCO,QAAQ,IAAI;IACR,OAAOA,QAAQ,CAACD,QAAQ,CAACH,OAAO,CAACK,EAAE,CAAC,IAAI;MAAEC,MAAM,EAAE,CAAC;IAAE,CAAC;EAC1D,CAAC,EACD,CAACN,OAAO,CAACK,EAAE,CACf,CAAC;EAED,MAAME,SAAS,GAAGf,OAAO,CAAC,MAAM;IAC5B,OAAOI,+BAA+B,CAACY,OAAO,CAACP,SAAS,CAACK,MAAM,IAAI,EAAE,CAAC;EAC1E,CAAC,EAAE,CAACL,SAAS,CAACC,IAAI,EAAEF,OAAO,CAACK,EAAE,CAAC,CAAC;EAEhC,MAAMI,iBAAiB,GAAGjB,OAAO,CAAC,MAAM;IACpC,OAAOe,SAAS,CAACG,MAAM,CAACC,KAAK,IAAIA,KAAK,CAACC,IAAI,KAAK,MAAM,CAAC,CAACC,MAAM,GAAG,CAAC;EACtE,CAAC,EAAE,CAACN,SAAS,CAAC,CAAC;EAEf,IAAI,CAACP,OAAO,EAAE;IACV,OAAO,IAAI;EACf;EAEA,IAAI,CAACS,iBAAiB,EAAE;IACpB,oBAAOlB,KAAA,CAAAuB,aAAA,CAAChB,WAAW;MAACiB,OAAO,EAAE;IAA8B,CAAE,CAAC;EAClE;EAEA,oBACIxB,KAAA,CAAAuB,aAAA,CAACrB,IAAI,qBAUDF,KAAA,CAAAuB,aAAA,CAACnB,aAAa;IAACqB,GAAG,EAAEhB,OAAO,CAACK,EAAG;IAACY,GAAG,EAAEV,SAAU;IAACJ,QAAQ,EAAEA,QAAQ,CAACG;EAAO,CAAE,CAC1E,CAAC;AAEf,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}
+{"version":3,"names":["React","useMemo","Grid","makeDecoratable","useComponent","InputRenderer","ComponentManifestToAstConverter","useSelectFromDocument","InfoMessage","ElementInputs","element","component","name","bindings","document","id","inputs","inputsAst","convert","hasEditableInputs","filter","input","type","length","createElement","message","key","ast"],"sources":["ElementInputs.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { useComponent } from \"~/BaseEditor/hooks/useComponent.js\";\nimport { InputRenderer } from \"./InputRenderer.js\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { InfoMessage } from \"~/BaseEditor/defaultConfig/Sidebar/InfoMessage.js\";\n\ninterface ElementInputsProps {\n    element: DocumentElement;\n}\n\nexport const ElementInputs = makeDecoratable(\"ElementInputs\", ({ element }: ElementInputsProps) => {\n    const component = useComponent(element.component.name);\n\n    const bindings = useSelectFromDocument(\n        document => {\n            return document.bindings[element.id] ?? { inputs: {} };\n        },\n        [element.id]\n    );\n\n    const inputsAst = useMemo(() => {\n        return ComponentManifestToAstConverter.convert(component.inputs ?? []);\n    }, [component.name, element.id]);\n\n    const hasEditableInputs = useMemo(() => {\n        return inputsAst.filter(input => input.type !== \"slot\").length > 0;\n    }, [inputsAst]);\n\n    if (!element) {\n        return null;\n    }\n\n    if (!hasEditableInputs) {\n        return <InfoMessage message={\"This element has no inputs.\"} />;\n    }\n\n    return (\n        <Grid>\n            {/*<Grid.Column key={\"repeat\"} span={12}>*/}\n            {/*    <Select*/}\n            {/*        label={\"Repeat for each\"}*/}\n            {/*        placeholder={\"Select binding\"}*/}\n            {/*        options={arrayOptions}*/}\n            {/*        value={repeat.value ?? \"\"}*/}\n            {/*        onChange={value => repeat.onChange(value === \"\" ? undefined : value)}*/}\n            {/*    />*/}\n            {/*</Grid.Column>*/}\n            <InputRenderer key={element.id} ast={inputsAst} bindings={bindings.inputs} />\n        </Grid>\n    );\n});\n\n// interface ElementInputProps {\n//     element: DocumentElement;\n//     input: ComponentInput;\n// }\n//\n// const ElementInput = ({ element, input }: ElementInputProps) => {\n//     const Renderer = useInputRenderer(input.renderer || \"__unknown__\");\n//\n//     const { value, onChange, onPreviewChange, setBindingType } = useInputValue(element, input);\n//\n//     /*   return (\n//         <Renderer\n//             value={value.static}\n//             input={input}\n//             onChange={onChange}\n//             onPreviewChange={onPreviewChange}\n//         />\n//     );*/\n//     if (value.expression) {\n//         return (\n//             <WithBindingToggle type={\"expression\"} setBindingType={setBindingType}>\n//                 <ExpressionRenderer\n//                     element={element}\n//                     value={value.expression}\n//                     onChange={onChange}\n//                     input={input}\n//                 />\n//             </WithBindingToggle>\n//         );\n//     }\n//\n//     return (\n//         <WithBindingToggle type={\"static\"} setBindingType={setBindingType}>\n//             <Renderer\n//                 value={value.static}\n//                 input={input}\n//                 onChange={onChange}\n//                 onPreviewChange={onPreviewChange}\n//             />\n//         </WithBindingToggle>\n//     );\n// };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,SAASC,YAAY;AACrB,SAASC,aAAa;AACtB,SAASC,+BAA+B,QAAQ,6BAA6B;AAC7E,SAASC,qBAAqB;AAC9B,SAASC,WAAW;AAMpB,OAAO,MAAMC,aAAa,GAAGN,eAAe,CAAC,eAAe,EAAE,CAAC;EAAEO;AAA4B,CAAC,KAAK;EAC/F,MAAMC,SAAS,GAAGP,YAAY,CAACM,OAAO,CAACC,SAAS,CAACC,IAAI,CAAC;EAEtD,MAAMC,QAAQ,GAAGN,qBAAqB,CAClCO,QAAQ,IAAI;IACR,OAAOA,QAAQ,CAACD,QAAQ,CAACH,OAAO,CAACK,EAAE,CAAC,IAAI;MAAEC,MAAM,EAAE,CAAC;IAAE,CAAC;EAC1D,CAAC,EACD,CAACN,OAAO,CAACK,EAAE,CACf,CAAC;EAED,MAAME,SAAS,GAAGhB,OAAO,CAAC,MAAM;IAC5B,OAAOK,+BAA+B,CAACY,OAAO,CAACP,SAAS,CAACK,MAAM,IAAI,EAAE,CAAC;EAC1E,CAAC,EAAE,CAACL,SAAS,CAACC,IAAI,EAAEF,OAAO,CAACK,EAAE,CAAC,CAAC;EAEhC,MAAMI,iBAAiB,GAAGlB,OAAO,CAAC,MAAM;IACpC,OAAOgB,SAAS,CAACG,MAAM,CAACC,KAAK,IAAIA,KAAK,CAACC,IAAI,KAAK,MAAM,CAAC,CAACC,MAAM,GAAG,CAAC;EACtE,CAAC,EAAE,CAACN,SAAS,CAAC,CAAC;EAEf,IAAI,CAACP,OAAO,EAAE;IACV,OAAO,IAAI;EACf;EAEA,IAAI,CAACS,iBAAiB,EAAE;IACpB,oBAAOnB,KAAA,CAAAwB,aAAA,CAAChB,WAAW;MAACiB,OAAO,EAAE;IAA8B,CAAE,CAAC;EAClE;EAEA,oBACIzB,KAAA,CAAAwB,aAAA,CAACtB,IAAI,qBAUDF,KAAA,CAAAwB,aAAA,CAACnB,aAAa;IAACqB,GAAG,EAAEhB,OAAO,CAACK,EAAG;IAACY,GAAG,EAAEV,SAAU;IAACJ,QAAQ,EAAEA,QAAQ,CAACG;EAAO,CAAE,CAC1E,CAAC;AAEf,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useBindingsForElement.d.ts

@@ -10,6 +10,17 @@ export declare const useBindingsForElement: (elementId: string) => {
             filter?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Filter | undefined> | undefined;
             mask?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Mask<string | number> | undefined> | undefined;
             fill?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Fill | undefined> | undefined;
+            height?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Height<string | number> | undefined> | undefined;
+            left?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Left<string | number> | undefined> | undefined;
+            top?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Top<string | number> | undefined> | undefined;
+            width?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Width<string | number> | undefined> | undefined;
+            position?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Position | undefined> | undefined;
+            content?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Content | undefined> | undefined;
+            translate?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Translate<string | number> | undefined> | undefined;
+            color?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Color | undefined> | undefined;
+            display?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Display | undefined> | undefined;
+            flexDirection?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FlexDirection | undefined> | undefined;
+            overflowY?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OverflowY | undefined> | undefined;
             accentColor?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.AccentColor | undefined> | undefined;
             alignContent?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.AlignContent | undefined> | undefined;
             alignItems?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.AlignItems | undefined> | undefined;
@@ -91,7 +102,6 @@ export declare const useBindingsForElement: (elementId: string) => {
             caretShape?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.CaretShape | undefined> | undefined;
             clear?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Clear | undefined> | undefined;
             clipRule?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ClipRule | undefined> | undefined;
-            color?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Color | undefined> | undefined;
             colorAdjust?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PrintColorAdjust | undefined> | undefined;
             colorInterpolationFilters?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ColorInterpolationFilters | undefined> | undefined;
             colorScheme?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ColorScheme | undefined> | undefined;
@@ -110,7 +120,6 @@ export declare const useBindingsForElement: (elementId: string) => {
             containIntrinsicWidth?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ContainIntrinsicWidth<string | number> | undefined> | undefined;
             containerName?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ContainerName | undefined> | undefined;
             containerType?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ContainerType | undefined> | undefined;
-            content?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Content | undefined> | undefined;
             contentVisibility?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ContentVisibility | undefined> | undefined;
             counterIncrement?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.CounterIncrement | undefined> | undefined;
             counterReset?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.CounterReset | undefined> | undefined;
@@ -120,14 +129,12 @@ export declare const useBindingsForElement: (elementId: string) => {
             cy?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Cy<string | number> | undefined> | undefined;
             d?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.D | undefined> | undefined;
             direction?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Direction | undefined> | undefined;
-            display?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Display | undefined> | undefined;
             dominantBaseline?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.DominantBaseline | undefined> | undefined;
             emptyCells?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.EmptyCells | undefined> | undefined;
             fieldSizing?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FieldSizing | undefined> | undefined;
             fillOpacity?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FillOpacity | undefined> | undefined;
             fillRule?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FillRule | undefined> | undefined;
             flexBasis?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FlexBasis<string | number> | undefined> | undefined;
-            flexDirection?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FlexDirection | undefined> | undefined;
             flexGrow?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FlexGrow | undefined> | undefined;
             flexShrink?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FlexShrink | undefined> | undefined;
             flexWrap?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FlexWrap | undefined> | undefined;
@@ -171,7 +178,6 @@ export declare const useBindingsForElement: (elementId: string) => {
             gridTemplateColumns?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.GridTemplateColumns<string | number> | undefined> | undefined;
             gridTemplateRows?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.GridTemplateRows<string | number> | undefined> | undefined;
             hangingPunctuation?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.HangingPunctuation | undefined> | undefined;
-            height?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Height<string | number> | undefined> | undefined;
             hyphenateCharacter?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.HyphenateCharacter | undefined> | undefined;
             hyphenateLimitChars?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.HyphenateLimitChars | undefined> | undefined;
             hyphens?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Hyphens | undefined> | undefined;
@@ -191,7 +197,6 @@ export declare const useBindingsForElement: (elementId: string) => {
             justifyItems?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.JustifyItems | undefined> | undefined;
             justifySelf?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.JustifySelf | undefined> | undefined;
             justifyTracks?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.JustifyTracks | undefined> | undefined;
-            left?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Left<string | number> | undefined> | undefined;
             letterSpacing?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.LetterSpacing<string | number> | undefined> | undefined;
             lightingColor?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.LightingColor | undefined> | undefined;
             lineBreak?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.LineBreak | undefined> | undefined;
@@ -265,7 +270,6 @@ export declare const useBindingsForElement: (elementId: string) => {
             overflowInline?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OverflowInline | undefined> | undefined;
             overflowWrap?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OverflowWrap | undefined> | undefined;
             overflowX?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OverflowX | undefined> | undefined;
-            overflowY?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OverflowY | undefined> | undefined;
             overlay?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Overlay | undefined> | undefined;
             overscrollBehaviorBlock?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OverscrollBehaviorBlock | undefined> | undefined;
             overscrollBehaviorInline?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OverscrollBehaviorInline | undefined> | undefined;
@@ -284,7 +288,6 @@ export declare const useBindingsForElement: (elementId: string) => {
             perspective?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Perspective<string | number> | undefined> | undefined;
             perspectiveOrigin?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PerspectiveOrigin<string | number> | undefined> | undefined;
             pointerEvents?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PointerEvents | undefined> | undefined;
-            position?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Position | undefined> | undefined;
             positionAnchor?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PositionAnchor | undefined> | undefined;
             positionArea?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PositionArea | undefined> | undefined;
             positionTryFallbacks?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PositionTryFallbacks | undefined> | undefined;
@@ -380,7 +383,6 @@ export declare const useBindingsForElement: (elementId: string) => {
             textWrapMode?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TextWrapMode | undefined> | undefined;
             textWrapStyle?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TextWrapStyle | undefined> | undefined;
             timelineScope?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TimelineScope | undefined> | undefined;
-            top?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Top<string | number> | undefined> | undefined;
             touchAction?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TouchAction | undefined> | undefined;
             transformBox?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TransformBox | undefined> | undefined;
             transformOrigin?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TransformOrigin<string | number> | undefined> | undefined;
@@ -390,7 +392,6 @@ export declare const useBindingsForElement: (elementId: string) => {
             transitionDuration?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TransitionDuration<string & {}> | undefined> | undefined;
             transitionProperty?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TransitionProperty | undefined> | undefined;
             transitionTimingFunction?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TransitionTimingFunction | undefined> | undefined;
-            translate?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Translate<string | number> | undefined> | undefined;
             unicodeBidi?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.UnicodeBidi | undefined> | undefined;
             userSelect?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.UserSelect | undefined> | undefined;
             vectorEffect?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.VectorEffect | undefined> | undefined;
@@ -404,7 +405,6 @@ export declare const useBindingsForElement: (elementId: string) => {
             whiteSpace?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.WhiteSpace | undefined> | undefined;
             whiteSpaceCollapse?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.WhiteSpaceCollapse | undefined> | undefined;
             widows?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Widows | undefined> | undefined;
-            width?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Width<string | number> | undefined> | undefined;
             willChange?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.WillChange | undefined> | undefined;
             wordBreak?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.WordBreak | undefined> | undefined;
             wordSpacing?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.WordSpacing<string | number> | undefined> | undefined;

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputValue.js

@@ -3,13 +3,11 @@ import set from "lodash/set.js";
 import { generateAlphaNumericLowerCaseId } from "@webiny/utils/generateId.js";
 import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
 import { Commands } from "../../../index.js";
-import { functionConverter } from "@webiny/website-builder-sdk";
+import { functionConverter, InputsBindingsProcessor, StylesBindingsProcessor, createElement } from "@webiny/website-builder-sdk";
+import { executeOnChange, applyAncestorUpdates } from "../../../../editorSdk/utils/executeOnChange.js";
 import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
 import { useBindingsForElement } from "./useBindingsForElement.js";
 import { useElementInputsAst } from "../../../hooks/useElementInputsAst.js";
-import { InputsBindingsProcessor } from "@webiny/website-builder-sdk";
-import { StylesBindingsProcessor } from "@webiny/website-builder-sdk";
-import { createElement } from "@webiny/website-builder-sdk";
 import { BreakpointElementMetadata, ElementMetadata, InputMetadata } from "../../../metadata/index.js";
 import { useElementFactory } from "./useElementFactory.js";
 export class InputValueObject {
@@ -108,12 +106,25 @@ export const useInputValue = (elementId, node) => {
         breakpoint: breakpoint.name
       });
     }
+
+    // Run manifest.onChange + onDescendantChange on ancestors
+    const ancestorUpdates = executeOnChange({
+      editor,
+      elementId,
+      deepInputs: devFriendlyInputs,
+      action: "update",
+      breakpointNames,
+      baseBreakpoint: breakpoint.name,
+      elementFactory,
+      deepStyles: devFriendlyStyles
+    });
     editor.updateDocument(document => {
       const inputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name);
       const styles = stylesProcessor.createUpdate(devFriendlyStyles, breakpoint.name);
       inputs.applyToDocument(document);
       styles.applyToDocument(document);
       inputMetadata.applyToDocument(document);
+      applyAncestorUpdates(document, ancestorUpdates, breakpointNames, breakpoint.name, elementFactory);
     });
 
     // Clear local value

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputValue.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useMemo","useState","set","generateAlphaNumericLowerCaseId","useDocumentEditor","Commands","functionConverter","useBreakpoint","useBindingsForElement","useElementInputsAst","InputsBindingsProcessor","StylesBindingsProcessor","createElement","BreakpointElementMetadata","ElementMetadata","InputMetadata","useElementFactory","InputValueObject","constructor","value","get","unset","undefined","convertBracketPathToDotPath","path","replace","withTimeout","cb","args","setTimeout","useInputValue","elementId","node","breakpoint","breakpoints","editor","inputsAst","elementFactory","breakpointNames","map","bp","name","rawBindings","resolvedBindings","inheritanceMap","stylesProcessor","inputsProcessor","inputs","inputMetadata","elementMetadata","metadata","input","responsive","valueId","id","localState","setLocalValue","onChange","deepInputs","toDeepInputs","valueObject","updaterInput","valuePath","devFriendlyInputs","structuredClone","devFriendlyStyles","toDeepStyles","styles","callback","deserialize","publicApi","params","updateDocument","document","createUpdate","applyToDocument","onPreviewChange","static","updatedInputs","patch","createJsonPatch","executeCommand","PreviewPatchElement","setBindingType","type","state","bindings","valueBinding","expression","onReset"],"sources":["useInputValue.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\nimport set from \"lodash/set.js\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils/generateId.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport type { ValueBinding, CreateElementParams } from \"@webiny/website-builder-sdk\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport type { InputAstNode } from \"@webiny/website-builder-sdk\";\nimport { functionConverter } from \"@webiny/website-builder-sdk\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { useBindingsForElement } from \"./useBindingsForElement.js\";\nimport { useElementInputsAst } from \"~/BaseEditor/hooks/useElementInputsAst.js\";\nimport { InputsBindingsProcessor } from \"@webiny/website-builder-sdk\";\nimport { StylesBindingsProcessor } from \"@webiny/website-builder-sdk\";\nimport { createElement } from \"@webiny/website-builder-sdk\";\nimport {\n    BreakpointElementMetadata,\n    ElementMetadata,\n    InputMetadata,\n    type IMetadata\n} from \"~/BaseEditor/metadata/index.js\";\nimport { useElementFactory } from \"./useElementFactory.js\";\n\nexport type OnChangeParams = {\n    value: InputValueObject;\n    metadata: IMetadata;\n};\n\nexport type InputBindingOnChange = (cb: (params: OnChangeParams) => void) => void;\n\nexport class InputValueObject {\n    private value: any;\n\n    constructor(value: any) {\n        this.value = value;\n    }\n\n    set(value: any) {\n        this.value = value;\n    }\n\n    get() {\n        return this.value;\n    }\n\n    unset() {\n        this.value = undefined;\n    }\n}\n\nfunction convertBracketPathToDotPath(path: string): string {\n    return path.replace(/\\/(\\d+)\\//g, \".$1\");\n}\n\n/**\n * This makes UI interaction smoother (input blur in particular).\n */\nconst withTimeout = <T extends (...args: any[]) => unknown>(cb: T): T => {\n    return ((...args: Parameters<T>) => {\n        setTimeout(() => {\n            cb(...args);\n        }, 0);\n    }) as unknown as T;\n};\n\nexport const useInputValue = (elementId: string, node: InputAstNode) => {\n    const { breakpoint, breakpoints } = useBreakpoint();\n    const editor = useDocumentEditor();\n    const inputsAst = useElementInputsAst(elementId);\n    const elementFactory = useElementFactory();\n\n    const breakpointNames = useMemo(() => breakpoints.map(bp => bp.name), []);\n\n    // These bindings already include per-breakpoint overrides.\n    const { rawBindings, resolvedBindings, inheritanceMap } = useBindingsForElement(elementId);\n\n    const stylesProcessor = useMemo(() => {\n        return new StylesBindingsProcessor(elementId ?? \"\", breakpointNames, rawBindings);\n    }, [elementId, rawBindings]);\n\n    const inputsProcessor = useMemo(() => {\n        return new InputsBindingsProcessor(\n            elementId ?? \"\",\n            inputsAst,\n            breakpointNames,\n            rawBindings,\n            elementFactory\n        );\n    }, [elementId, rawBindings]);\n\n    // This value is the final calculated breakpoint value.\n    const value = resolvedBindings.inputs[node.path];\n\n    const inputMetadata = useMemo((): IMetadata => {\n        let elementMetadata: IMetadata = new ElementMetadata(elementId, rawBindings.metadata);\n\n        if (node.input.responsive) {\n            elementMetadata = new BreakpointElementMetadata(\n                breakpointNames,\n                breakpoint.name,\n                elementMetadata\n            );\n        }\n\n        const valueId = value?.id ?? generateAlphaNumericLowerCaseId();\n\n        return new InputMetadata(valueId, elementMetadata);\n    }, [elementId, breakpoint.name, rawBindings]);\n\n    const [localState, setLocalValue] = useState<ValueBinding>();\n\n    const onChange = useCallback(\n        withTimeout((cb: (params: OnChangeParams) => void) => {\n            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n\n            const valueObject = new InputValueObject(value);\n\n            const updaterInput = {\n                value: valueObject,\n                metadata: inputMetadata\n            };\n\n            // Change the input value (and metadata).\n            cb(updaterInput);\n\n            const valuePath = convertBracketPathToDotPath(node.path);\n            const devFriendlyInputs = set(\n                structuredClone(deepInputs),\n                valuePath,\n                valueObject.get()\n            );\n\n            const devFriendlyStyles = stylesProcessor.toDeepStyles(rawBindings.styles ?? {});\n\n            // Process input's `onChange`.\n            if (node.input.onChange) {\n                const callback = functionConverter.deserialize(\n                    // TODO: we know it's a string, but on the frontend it's a function. Fix types.\n                    node.input.onChange! as any as string\n                );\n\n                // Run onChange callback.\n                const publicApi = {\n                    inputs: devFriendlyInputs,\n                    styles: devFriendlyStyles,\n                    createElement: (params: CreateElementParams) => {\n                        return createElement(params);\n                    }\n                };\n\n                // Run input's `onChange` callback.\n                callback(publicApi, {\n                    breakpoint: breakpoint.name\n                });\n            }\n\n            editor.updateDocument(document => {\n                const inputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name);\n                const styles = stylesProcessor.createUpdate(devFriendlyStyles, breakpoint.name);\n\n                inputs.applyToDocument(document);\n                styles.applyToDocument(document);\n\n                inputMetadata.applyToDocument(document);\n            });\n\n            // Clear local value\n            setLocalValue(undefined);\n        }),\n        [elementId, resolvedBindings, breakpoint]\n    );\n\n    /**\n     * In preview, we do not update the editor document. Instead, we create a patch and send it to the preview app.\n     */\n    const onPreviewChange = useCallback(\n        (cb: (params: OnChangeParams) => void) => {\n            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n\n            const valueObject = new InputValueObject(localState ?? value);\n\n            const updaterInput = {\n                value: valueObject,\n                metadata: inputMetadata\n            };\n\n            // Change the input value (and metadata).\n            cb(updaterInput);\n\n            const valuePath = convertBracketPathToDotPath(node.path);\n            const devFriendlyInputs = set(\n                structuredClone(deepInputs),\n                valuePath,\n                valueObject.get()\n            );\n\n            setLocalValue({ static: valueObject.get() });\n\n            const updatedInputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name);\n            const patch = updatedInputs.createJsonPatch(rawBindings);\n\n            editor.executeCommand(Commands.PreviewPatchElement, { elementId, patch });\n        },\n        [elementId, rawBindings, localState]\n    );\n\n    const setBindingType = useCallback(\n        (type: \"static\" | \"expression\") => {\n            editor.updateDocument(state => {\n                const bindings = state.bindings[elementId];\n                const valueBinding = bindings.inputs![node.path];\n\n                if (type === \"static\") {\n                    // Switching to static bindings means we have to remove the expression binding.\n                    delete valueBinding.expression;\n                } else {\n                    valueBinding.expression = \"$noop\";\n                }\n\n                state.bindings[elementId] = {\n                    ...bindings,\n                    inputs: {\n                        ...bindings.inputs,\n                        [node.path]: valueBinding\n                    }\n                };\n            });\n        },\n        [elementId]\n    );\n\n    const onReset = useCallback(() => {\n        onChange(({ value, metadata }) => {\n            value.unset();\n            metadata.unset();\n        });\n    }, [onChange]);\n\n    return {\n        value: localState ?? value,\n        metadata: inputMetadata,\n        inheritanceMap: inheritanceMap.inputs[node.path],\n        onReset,\n        onChange,\n        onPreviewChange,\n        setBindingType\n    };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useCallback","useMemo","useState","set","generateAlphaNumericLowerCaseId","useDocumentEditor","Commands","functionConverter","InputsBindingsProcessor","StylesBindingsProcessor","createElement","executeOnChange","applyAncestorUpdates","useBreakpoint","useBindingsForElement","useElementInputsAst","BreakpointElementMetadata","ElementMetadata","InputMetadata","useElementFactory","InputValueObject","constructor","value","get","unset","undefined","convertBracketPathToDotPath","path","replace","withTimeout","cb","args","setTimeout","useInputValue","elementId","node","breakpoint","breakpoints","editor","inputsAst","elementFactory","breakpointNames","map","bp","name","rawBindings","resolvedBindings","inheritanceMap","stylesProcessor","inputsProcessor","inputs","inputMetadata","elementMetadata","metadata","input","responsive","valueId","id","localState","setLocalValue","onChange","deepInputs","toDeepInputs","valueObject","updaterInput","valuePath","devFriendlyInputs","structuredClone","devFriendlyStyles","toDeepStyles","styles","callback","deserialize","publicApi","params","ancestorUpdates","action","baseBreakpoint","deepStyles","updateDocument","document","createUpdate","applyToDocument","onPreviewChange","static","updatedInputs","patch","createJsonPatch","executeCommand","PreviewPatchElement","setBindingType","type","state","bindings","valueBinding","expression","onReset"],"sources":["useInputValue.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\nimport set from \"lodash/set.js\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils/generateId.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport type { ValueBinding, CreateElementParams } from \"@webiny/website-builder-sdk\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport type { InputAstNode } from \"@webiny/website-builder-sdk\";\nimport {\n    functionConverter,\n    InputsBindingsProcessor,\n    StylesBindingsProcessor,\n    createElement\n} from \"@webiny/website-builder-sdk\";\nimport { executeOnChange, applyAncestorUpdates } from \"~/editorSdk/utils/executeOnChange.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { useBindingsForElement } from \"./useBindingsForElement.js\";\nimport { useElementInputsAst } from \"~/BaseEditor/hooks/useElementInputsAst.js\";\nimport {\n    BreakpointElementMetadata,\n    ElementMetadata,\n    InputMetadata,\n    type IMetadata\n} from \"~/BaseEditor/metadata/index.js\";\nimport { useElementFactory } from \"./useElementFactory.js\";\n\nexport type OnChangeParams = {\n    value: InputValueObject;\n    metadata: IMetadata;\n};\n\nexport type InputBindingOnChange = (cb: (params: OnChangeParams) => void) => void;\n\nexport class InputValueObject {\n    private value: any;\n\n    constructor(value: any) {\n        this.value = value;\n    }\n\n    set(value: any) {\n        this.value = value;\n    }\n\n    get() {\n        return this.value;\n    }\n\n    unset() {\n        this.value = undefined;\n    }\n}\n\nfunction convertBracketPathToDotPath(path: string): string {\n    return path.replace(/\\/(\\d+)\\//g, \".$1\");\n}\n\n/**\n * This makes UI interaction smoother (input blur in particular).\n */\nconst withTimeout = <T extends (...args: any[]) => unknown>(cb: T): T => {\n    return ((...args: Parameters<T>) => {\n        setTimeout(() => {\n            cb(...args);\n        }, 0);\n    }) as unknown as T;\n};\n\nexport const useInputValue = (elementId: string, node: InputAstNode) => {\n    const { breakpoint, breakpoints } = useBreakpoint();\n    const editor = useDocumentEditor();\n    const inputsAst = useElementInputsAst(elementId);\n    const elementFactory = useElementFactory();\n\n    const breakpointNames = useMemo(() => breakpoints.map(bp => bp.name), []);\n\n    // These bindings already include per-breakpoint overrides.\n    const { rawBindings, resolvedBindings, inheritanceMap } = useBindingsForElement(elementId);\n\n    const stylesProcessor = useMemo(() => {\n        return new StylesBindingsProcessor(elementId ?? \"\", breakpointNames, rawBindings);\n    }, [elementId, rawBindings]);\n\n    const inputsProcessor = useMemo(() => {\n        return new InputsBindingsProcessor(\n            elementId ?? \"\",\n            inputsAst,\n            breakpointNames,\n            rawBindings,\n            elementFactory\n        );\n    }, [elementId, rawBindings]);\n\n    // This value is the final calculated breakpoint value.\n    const value = resolvedBindings.inputs[node.path];\n\n    const inputMetadata = useMemo((): IMetadata => {\n        let elementMetadata: IMetadata = new ElementMetadata(elementId, rawBindings.metadata);\n\n        if (node.input.responsive) {\n            elementMetadata = new BreakpointElementMetadata(\n                breakpointNames,\n                breakpoint.name,\n                elementMetadata\n            );\n        }\n\n        const valueId = value?.id ?? generateAlphaNumericLowerCaseId();\n\n        return new InputMetadata(valueId, elementMetadata);\n    }, [elementId, breakpoint.name, rawBindings]);\n\n    const [localState, setLocalValue] = useState<ValueBinding>();\n\n    const onChange = useCallback(\n        withTimeout((cb: (params: OnChangeParams) => void) => {\n            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n\n            const valueObject = new InputValueObject(value);\n\n            const updaterInput = {\n                value: valueObject,\n                metadata: inputMetadata\n            };\n\n            // Change the input value (and metadata).\n            cb(updaterInput);\n\n            const valuePath = convertBracketPathToDotPath(node.path);\n            const devFriendlyInputs = set(\n                structuredClone(deepInputs),\n                valuePath,\n                valueObject.get()\n            );\n\n            const devFriendlyStyles = stylesProcessor.toDeepStyles(rawBindings.styles ?? {});\n\n            // Process input's `onChange`.\n            if (node.input.onChange) {\n                const callback = functionConverter.deserialize(\n                    // TODO: we know it's a string, but on the frontend it's a function. Fix types.\n                    node.input.onChange! as any as string\n                );\n\n                // Run onChange callback.\n                const publicApi = {\n                    inputs: devFriendlyInputs,\n                    styles: devFriendlyStyles,\n                    createElement: (params: CreateElementParams) => {\n                        return createElement(params);\n                    }\n                };\n\n                // Run input's `onChange` callback.\n                callback(publicApi, {\n                    breakpoint: breakpoint.name\n                });\n            }\n\n            // Run manifest.onChange + onDescendantChange on ancestors\n            const ancestorUpdates = executeOnChange({\n                editor,\n                elementId,\n                deepInputs: devFriendlyInputs,\n                action: \"update\",\n                breakpointNames,\n                baseBreakpoint: breakpoint.name,\n                elementFactory,\n                deepStyles: devFriendlyStyles\n            });\n\n            editor.updateDocument(document => {\n                const inputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name);\n                const styles = stylesProcessor.createUpdate(devFriendlyStyles, breakpoint.name);\n\n                inputs.applyToDocument(document);\n                styles.applyToDocument(document);\n\n                inputMetadata.applyToDocument(document);\n\n                applyAncestorUpdates(\n                    document,\n                    ancestorUpdates,\n                    breakpointNames,\n                    breakpoint.name,\n                    elementFactory\n                );\n            });\n\n            // Clear local value\n            setLocalValue(undefined);\n        }),\n        [elementId, resolvedBindings, breakpoint]\n    );\n\n    /**\n     * In preview, we do not update the editor document. Instead, we create a patch and send it to the preview app.\n     */\n    const onPreviewChange = useCallback(\n        (cb: (params: OnChangeParams) => void) => {\n            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n\n            const valueObject = new InputValueObject(localState ?? value);\n\n            const updaterInput = {\n                value: valueObject,\n                metadata: inputMetadata\n            };\n\n            // Change the input value (and metadata).\n            cb(updaterInput);\n\n            const valuePath = convertBracketPathToDotPath(node.path);\n            const devFriendlyInputs = set(\n                structuredClone(deepInputs),\n                valuePath,\n                valueObject.get()\n            );\n\n            setLocalValue({ static: valueObject.get() });\n\n            const updatedInputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name);\n            const patch = updatedInputs.createJsonPatch(rawBindings);\n\n            editor.executeCommand(Commands.PreviewPatchElement, { elementId, patch });\n        },\n        [elementId, rawBindings, localState]\n    );\n\n    const setBindingType = useCallback(\n        (type: \"static\" | \"expression\") => {\n            editor.updateDocument(state => {\n                const bindings = state.bindings[elementId];\n                const valueBinding = bindings.inputs![node.path];\n\n                if (type === \"static\") {\n                    // Switching to static bindings means we have to remove the expression binding.\n                    delete valueBinding.expression;\n                } else {\n                    valueBinding.expression = \"$noop\";\n                }\n\n                state.bindings[elementId] = {\n                    ...bindings,\n                    inputs: {\n                        ...bindings.inputs,\n                        [node.path]: valueBinding\n                    }\n                };\n            });\n        },\n        [elementId]\n    );\n\n    const onReset = useCallback(() => {\n        onChange(({ value, metadata }) => {\n            value.unset();\n            metadata.unset();\n        });\n    }, [onChange]);\n\n    return {\n        value: localState ?? value,\n        metadata: inputMetadata,\n        inheritanceMap: inheritanceMap.inputs[node.path],\n        onReset,\n        onChange,\n        onPreviewChange,\n        setBindingType\n    };\n};\n"],"mappings":"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","ignoreList":[]}

package/BaseEditor/defaultConfig/Toolbar/InsertElements/useComponentGroups.js

@@ -1,6 +1,6 @@
 import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor.js";
 import { functionConverter } from "@webiny/website-builder-sdk";
-import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument.js";
+import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
 const getComponentFilter = group => {
   if (group.name === "custom") {
     return cmp => !cmp.group;
@@ -11,8 +11,9 @@ const getComponentFilter = group => {
   return cmp => cmp.group === group.name;
 };
 export const useComponentGroups = () => {
-  const document = useSelectFromDocument(document => document);
+  const editor = useDocumentEditor();
   return useSelectFromEditor(state => {
+    const document = editor.getDocumentState().read();
     const groups = Object.values(state.componentGroups);
     const components = Object.values(state.components).filter(item => !item.hideFromToolbar);
     return groups.map(group => {

package/BaseEditor/defaultConfig/Toolbar/InsertElements/useComponentGroups.js.map

@@ -1 +1 @@
-{"version":3,"names":["useSelectFromEditor","functionConverter","useSelectFromDocument","getComponentFilter","group","name","cmp","filter","deserialize","useComponentGroups","document","state","groups","Object","values","componentGroups","components","item","hideFromToolbar","map","items","component"],"sources":["useComponentGroups.ts"],"sourcesContent":["import { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport type {\n    ComponentGroupFilterContext,\n    ComponentManifest,\n    SerializedComponentGroup\n} from \"@webiny/website-builder-sdk\";\nimport { functionConverter } from \"@webiny/website-builder-sdk\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\n\ntype WithItems<T> = T & { items: ComponentManifest[] };\n\nconst getComponentFilter = (\n    group: SerializedComponentGroup\n): ((cmp: ComponentManifest, context: ComponentGroupFilterContext) => boolean) => {\n    if (group.name === \"custom\") {\n        return cmp => !cmp.group;\n    }\n\n    if (group.filter) {\n        return functionConverter.deserialize(group.filter!);\n    }\n\n    return cmp => cmp.group === group.name;\n};\n\nexport const useComponentGroups = () => {\n    const document = useSelectFromDocument(document => document);\n\n    return useSelectFromEditor<WithItems<SerializedComponentGroup>[]>(state => {\n        const groups = Object.values(state.componentGroups);\n        const components = Object.values(state.components).filter(item => !item.hideFromToolbar);\n\n        return groups.map(group => {\n            const filter = getComponentFilter(group);\n\n            return {\n                ...group,\n                items: components.filter(component => {\n                    return filter(component, { document });\n                })\n            };\n        });\n    });\n};\n"],"mappings":"AAAA,SAASA,mBAAmB;AAM5B,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,qBAAqB;AAI9B,MAAMC,kBAAkB,GACpBC,KAA+B,IAC+C;EAC9E,IAAIA,KAAK,CAACC,IAAI,KAAK,QAAQ,EAAE;IACzB,OAAOC,GAAG,IAAI,CAACA,GAAG,CAACF,KAAK;EAC5B;EAEA,IAAIA,KAAK,CAACG,MAAM,EAAE;IACd,OAAON,iBAAiB,CAACO,WAAW,CAACJ,KAAK,CAACG,MAAO,CAAC;EACvD;EAEA,OAAOD,GAAG,IAAIA,GAAG,CAACF,KAAK,KAAKA,KAAK,CAACC,IAAI;AAC1C,CAAC;AAED,OAAO,MAAMI,kBAAkB,GAAGA,CAAA,KAAM;EACpC,MAAMC,QAAQ,GAAGR,qBAAqB,CAACQ,QAAQ,IAAIA,QAAQ,CAAC;EAE5D,OAAOV,mBAAmB,CAAwCW,KAAK,IAAI;IACvE,MAAMC,MAAM,GAAGC,MAAM,CAACC,MAAM,CAACH,KAAK,CAACI,eAAe,CAAC;IACnD,MAAMC,UAAU,GAAGH,MAAM,CAACC,MAAM,CAACH,KAAK,CAACK,UAAU,CAAC,CAACT,MAAM,CAACU,IAAI,IAAI,CAACA,IAAI,CAACC,eAAe,CAAC;IAExF,OAAON,MAAM,CAACO,GAAG,CAACf,KAAK,IAAI;MACvB,MAAMG,MAAM,GAAGJ,kBAAkB,CAACC,KAAK,CAAC;MAExC,OAAO;QACH,GAAGA,KAAK;QACRgB,KAAK,EAAEJ,UAAU,CAACT,MAAM,CAACc,SAAS,IAAI;UAClC,OAAOd,MAAM,CAACc,SAAS,EAAE;YAAEX;UAAS,CAAC,CAAC;QAC1C,CAAC;MACL,CAAC;IACL,CAAC,CAAC;EACN,CAAC,CAAC;AACN,CAAC","ignoreList":[]}
+{"version":3,"names":["useSelectFromEditor","functionConverter","useDocumentEditor","getComponentFilter","group","name","cmp","filter","deserialize","useComponentGroups","editor","state","document","getDocumentState","read","groups","Object","values","componentGroups","components","item","hideFromToolbar","map","items","component"],"sources":["useComponentGroups.ts"],"sourcesContent":["import { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport type {\n    ComponentGroupFilterContext,\n    ComponentManifest,\n    SerializedComponentGroup\n} from \"@webiny/website-builder-sdk\";\nimport { functionConverter } from \"@webiny/website-builder-sdk\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\n\ntype WithItems<T> = T & { items: ComponentManifest[] };\n\nconst getComponentFilter = (\n    group: SerializedComponentGroup\n): ((cmp: ComponentManifest, context: ComponentGroupFilterContext) => boolean) => {\n    if (group.name === \"custom\") {\n        return cmp => !cmp.group;\n    }\n\n    if (group.filter) {\n        return functionConverter.deserialize(group.filter!);\n    }\n\n    return cmp => cmp.group === group.name;\n};\n\nexport const useComponentGroups = () => {\n    const editor = useDocumentEditor();\n\n    return useSelectFromEditor<WithItems<SerializedComponentGroup>[]>(state => {\n        const document = editor.getDocumentState().read();\n        const groups = Object.values(state.componentGroups);\n        const components = Object.values(state.components).filter(item => !item.hideFromToolbar);\n\n        return groups.map(group => {\n            const filter = getComponentFilter(group);\n\n            return {\n                ...group,\n                items: components.filter(component => {\n                    return filter(component, { document });\n                })\n            };\n        });\n    });\n};\n"],"mappings":"AAAA,SAASA,mBAAmB;AAM5B,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,iBAAiB;AAI1B,MAAMC,kBAAkB,GACpBC,KAA+B,IAC+C;EAC9E,IAAIA,KAAK,CAACC,IAAI,KAAK,QAAQ,EAAE;IACzB,OAAOC,GAAG,IAAI,CAACA,GAAG,CAACF,KAAK;EAC5B;EAEA,IAAIA,KAAK,CAACG,MAAM,EAAE;IACd,OAAON,iBAAiB,CAACO,WAAW,CAACJ,KAAK,CAACG,MAAO,CAAC;EACvD;EAEA,OAAOD,GAAG,IAAIA,GAAG,CAACF,KAAK,KAAKA,KAAK,CAACC,IAAI;AAC1C,CAAC;AAED,OAAO,MAAMI,kBAAkB,GAAGA,CAAA,KAAM;EACpC,MAAMC,MAAM,GAAGR,iBAAiB,CAAC,CAAC;EAElC,OAAOF,mBAAmB,CAAwCW,KAAK,IAAI;IACvE,MAAMC,QAAQ,GAAGF,MAAM,CAACG,gBAAgB,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC;IACjD,MAAMC,MAAM,GAAGC,MAAM,CAACC,MAAM,CAACN,KAAK,CAACO,eAAe,CAAC;IACnD,MAAMC,UAAU,GAAGH,MAAM,CAACC,MAAM,CAACN,KAAK,CAACQ,UAAU,CAAC,CAACZ,MAAM,CAACa,IAAI,IAAI,CAACA,IAAI,CAACC,eAAe,CAAC;IAExF,OAAON,MAAM,CAACO,GAAG,CAAClB,KAAK,IAAI;MACvB,MAAMG,MAAM,GAAGJ,kBAAkB,CAACC,KAAK,CAAC;MAExC,OAAO;QACH,GAAGA,KAAK;QACRmB,KAAK,EAAEJ,UAAU,CAACZ,MAAM,CAACiB,SAAS,IAAI;UAClC,OAAOjB,MAAM,CAACiB,SAAS,EAAE;YAAEZ;UAAS,CAAC,CAAC;QAC1C,CAAC;MACL,CAAC;IACL,CAAC,CAAC;EACN,CAAC,CAAC;AACN,CAAC","ignoreList":[]}

package/BaseEditor/hooks/useCreateElement.d.ts

@@ -0,0 +1,5 @@
+import { Commands } from "../../BaseEditor/commands.js";
+import type { CommandPayload } from "../../editorSdk/createCommand.js";
+export declare function useCreateElement(): {
+    createElement: (payload: CommandPayload<typeof Commands.CreateElement>) => void;
+};

package/BaseEditor/hooks/useCreateElement.js

@@ -0,0 +1,14 @@
+import { useCallback } from "react";
+import { useDocumentEditor } from "../../DocumentEditor/index.js";
+import { Commands } from "../commands.js";
+export function useCreateElement() {
+  const editor = useDocumentEditor();
+  const createElement = useCallback(payload => {
+    editor.executeCommand(Commands.CreateElement, payload);
+  }, [editor]);
+  return {
+    createElement
+  };
+}
+
+//# sourceMappingURL=useCreateElement.js.map

package/BaseEditor/hooks/useCreateElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useDocumentEditor","Commands","useCreateElement","editor","createElement","payload","executeCommand","CreateElement"],"sources":["useCreateElement.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/commands.js\";\nimport type { CommandPayload } from \"~/editorSdk/createCommand.js\";\n\nexport function useCreateElement() {\n    const editor = useDocumentEditor();\n\n    const createElement = useCallback(\n        (payload: CommandPayload<typeof Commands.CreateElement>) => {\n            editor.executeCommand(Commands.CreateElement, payload);\n        },\n        [editor]\n    );\n\n    return { createElement };\n}\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SAASC,iBAAiB;AAC1B,SAASC,QAAQ;AAGjB,OAAO,SAASC,gBAAgBA,CAAA,EAAG;EAC/B,MAAMC,MAAM,GAAGH,iBAAiB,CAAC,CAAC;EAElC,MAAMI,aAAa,GAAGL,WAAW,CAC5BM,OAAsD,IAAK;IACxDF,MAAM,CAACG,cAAc,CAACL,QAAQ,CAACM,aAAa,EAAEF,OAAO,CAAC;EAC1D,CAAC,EACD,CAACF,MAAM,CACX,CAAC;EAED,OAAO;IAAEC;EAAc,CAAC;AAC5B","ignoreList":[]}

package/BaseEditor/hooks/useDeleteElement.d.ts

@@ -0,0 +1,3 @@
+export declare function useDeleteElement(): {
+    deleteElement: (id: string) => void;
+};