@webiny/app-website-builder 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

package/BaseEditor/commandHandlers/CloneElement.d.ts

@@ -0,0 +1 @@
+export declare const CloneElement: () => null;

package/BaseEditor/commandHandlers/CloneElement.js

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+import { useDocumentEditor } from "../../DocumentEditor/index.js";
+import { Commands } from "../index.js";
+import { $cloneElement } from "../../editorSdk/utils/index.js";
+const CloneElement = ()=>{
+    const editor = useDocumentEditor();
+    useEffect(()=>editor.registerCommandHandler(Commands.CloneElement, (payload)=>{
+            const newId = $cloneElement(editor, payload.id);
+            if (newId) editor.executeCommand(Commands.SelectElement, {
+                id: newId
+            });
+        }), []);
+    return null;
+};
+export { CloneElement };
+
+//# sourceMappingURL=CloneElement.js.map

package/BaseEditor/commandHandlers/CloneElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/commandHandlers/CloneElement.js","sources":["../../../src/BaseEditor/commandHandlers/CloneElement.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport { $cloneElement } from \"~/editorSdk/utils/index.js\";\n\nexport const CloneElement = () => {\n    const editor = useDocumentEditor();\n\n    useEffect(() => {\n        return editor.registerCommandHandler(Commands.CloneElement, payload => {\n            const newId = $cloneElement(editor, payload.id);\n            if (newId) {\n                editor.executeCommand(Commands.SelectElement, { id: newId });\n            }\n        });\n    }, []);\n\n    return null;\n};\n"],"names":["CloneElement","editor","useDocumentEditor","useEffect","Commands","payload","newId","$cloneElement"],"mappings":";;;;AAKO,MAAMA,eAAe;IACxB,MAAMC,SAASC;IAEfC,UAAU,IACCF,OAAO,sBAAsB,CAACG,SAAS,YAAY,EAAEC,CAAAA;YACxD,MAAMC,QAAQC,cAAcN,QAAQI,QAAQ,EAAE;YAC9C,IAAIC,OACAL,OAAO,cAAc,CAACG,SAAS,aAAa,EAAE;gBAAE,IAAIE;YAAM;QAElE,IACD,EAAE;IAEL,OAAO;AACX"}

package/BaseEditor/commandHandlers/index.js

@@ -1,11 +1,12 @@
 import react from "react";
+import { CloneElement } from "./CloneElement.js";
 import { CreateElement } from "./CreateElement.js";
 import { DeleteElement } from "./DeleteElement.js";
 import { MoveElement } from "./MoveElement.js";
 import { DeselectElement } from "./DeselectElement.js";
 import { SelectElement } from "./SelectElement.js";
 import { HighlightElement } from "./HighlightElement.js";
-const CommandHandlers = /*#__PURE__*/ react.memo(()=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(CreateElement, null), /*#__PURE__*/ react.createElement(DeleteElement, null), /*#__PURE__*/ react.createElement(MoveElement, null), /*#__PURE__*/ react.createElement(DeselectElement, null), /*#__PURE__*/ react.createElement(SelectElement, null), /*#__PURE__*/ react.createElement(HighlightElement, null)));
+const CommandHandlers = /*#__PURE__*/ react.memo(()=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(CloneElement, null), /*#__PURE__*/ react.createElement(CreateElement, null), /*#__PURE__*/ react.createElement(DeleteElement, null), /*#__PURE__*/ react.createElement(MoveElement, null), /*#__PURE__*/ react.createElement(DeselectElement, null), /*#__PURE__*/ react.createElement(SelectElement, null), /*#__PURE__*/ react.createElement(HighlightElement, null)));
 CommandHandlers.displayName = "CommandHandlers";
 export { CommandHandlers };
 

package/BaseEditor/commandHandlers/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/commandHandlers/index.js","sources":["../../../src/BaseEditor/commandHandlers/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { CreateElement } from \"./CreateElement.js\";\nimport { DeleteElement } from \"./DeleteElement.js\";\nimport { MoveElement } from \"./MoveElement.js\";\nimport { DeselectElement } from \"./DeselectElement.js\";\nimport { SelectElement } from \"./SelectElement.js\";\nimport { HighlightElement } from \"./HighlightElement.js\";\n\nexport const CommandHandlers = React.memo(() => {\n    return (\n        <>\n            <CreateElement />\n            <DeleteElement />\n            <MoveElement />\n            <DeselectElement />\n            <SelectElement />\n            <HighlightElement />\n        </>\n    );\n});\n\nCommandHandlers.displayName = \"CommandHandlers\";\n"],"names":["CommandHandlers","React","CreateElement","DeleteElement","MoveElement","DeselectElement","SelectElement","HighlightElement"],"mappings":";;;;;;;AAQO,MAAMA,kBAAkB,WAAHA,GAAGC,MAAAA,IAAU,CAAC,IAC/B,WAAP,GACI,wDACI,oBAACC,eAAaA,OAAAA,WAAAA,GACd,oBAACC,eAAaA,OAAAA,WAAAA,GACd,oBAACC,aAAWA,OAAAA,WAAAA,GACZ,oBAACC,iBAAeA,OAAAA,WAAAA,GAChB,oBAACC,eAAaA,OAAAA,WAAAA,GACd,oBAACC,kBAAgBA;AAK7BP,gBAAgB,WAAW,GAAG"}
+{"version":3,"file":"BaseEditor/commandHandlers/index.js","sources":["../../../src/BaseEditor/commandHandlers/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { CloneElement } from \"./CloneElement.js\";\nimport { CreateElement } from \"./CreateElement.js\";\nimport { DeleteElement } from \"./DeleteElement.js\";\nimport { MoveElement } from \"./MoveElement.js\";\nimport { DeselectElement } from \"./DeselectElement.js\";\nimport { SelectElement } from \"./SelectElement.js\";\nimport { HighlightElement } from \"./HighlightElement.js\";\n\nexport const CommandHandlers = React.memo(() => {\n    return (\n        <>\n            <CloneElement />\n            <CreateElement />\n            <DeleteElement />\n            <MoveElement />\n            <DeselectElement />\n            <SelectElement />\n            <HighlightElement />\n        </>\n    );\n});\n\nCommandHandlers.displayName = \"CommandHandlers\";\n"],"names":["CommandHandlers","React","CloneElement","CreateElement","DeleteElement","MoveElement","DeselectElement","SelectElement","HighlightElement"],"mappings":";;;;;;;;AASO,MAAMA,kBAAkB,WAAHA,GAAGC,MAAAA,IAAU,CAAC,IAC/B,WAAP,GACI,wDACI,oBAACC,cAAYA,OAAAA,WAAAA,GACb,oBAACC,eAAaA,OAAAA,WAAAA,GACd,oBAACC,eAAaA,OAAAA,WAAAA,GACd,oBAACC,aAAWA,OAAAA,WAAAA,GACZ,oBAACC,iBAAeA,OAAAA,WAAAA,GAChB,oBAACC,eAAaA,OAAAA,WAAAA,GACd,oBAACC,kBAAgBA;AAK7BR,gBAAgB,WAAW,GAAG"}

package/BaseEditor/commands.d.ts

@@ -1,6 +1,9 @@
 import type { ElementFactoryCreateElementParams } from "@webiny/website-builder-sdk";
 import type { WebsiteBuilderTheme } from "@webiny/website-builder-sdk/types/WebsiteBuilderTheme.js";
 export declare const Commands: {
+    CloneElement: import("~/editorSdk/createCommand.js").Command<{
+        id: string;
+    }>;
     CreateElement: import("~/editorSdk/createCommand.js").Command<{
         componentName: string;
         parentId: string;

package/BaseEditor/commands.js

@@ -1,6 +1,7 @@
 import { createCommand } from "../editorSdk/createCommand.js";
 const CreateElement = createCommand("CREATE_ELEMENT");
 const MoveElement = createCommand("MOVE_ELEMENT");
+const CloneElement = createCommand("CLONE_ELEMENT");
 const DeleteElement = createCommand("DELETE_ELEMENT");
 const SelectElement = createCommand("SELECT_ELEMENT");
 const HighlightElement = createCommand("HIGHLIGHT_ELEMENT");
@@ -10,6 +11,7 @@ const RefreshPreview = createCommand("REFRESH_PREVIEW");
 const PreviewPatchElement = createCommand("PREVIEW_PATCH_ELEMENT");
 const SendPreviewMessage = createCommand("SEND_PREVIEW_MESSAGE");
 const Commands = {
+    CloneElement: CloneElement,
     CreateElement: CreateElement,
     DeleteElement: DeleteElement,
     MoveElement: MoveElement,

package/BaseEditor/commands.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/commands.js","sources":["../../src/BaseEditor/commands.ts"],"sourcesContent":["import { createCommand } from \"~/editorSdk/createCommand.js\";\nimport type { ElementFactoryCreateElementParams } from \"@webiny/website-builder-sdk\";\nimport type { WebsiteBuilderTheme } from \"@webiny/website-builder-sdk/types/WebsiteBuilderTheme.js\";\n\nconst CreateElement = createCommand<{\n    // Name of the component to use.\n    componentName: string;\n    // Parent element for the new element.\n    parentId: string;\n    // Parent element slot (e.g., `children`, `heroBanner`, `tabsList.0.content`).\n    slot: string;\n    // Index within the slot. Omit to append at the end.\n    index?: number;\n    // Bindings\n    bindings?: ElementFactoryCreateElementParams[\"bindings\"];\n}>(\"CREATE_ELEMENT\");\n\nconst MoveElement = createCommand<{\n    // ID of the element to move.\n    elementId: string;\n    // Parent element for the new element.\n    parentId: string;\n    // Parent element slot (e.g., `children`, `heroBanner`, `tabsList.0.content`).\n    slot: string;\n    // Index within the slot.\n    index: number;\n}>(\"MOVE_ELEMENT\");\n\nconst DeleteElement = createCommand<{\n    id: string;\n}>(\"DELETE_ELEMENT\");\n\nconst SelectElement = createCommand<{ id: string }>(\"SELECT_ELEMENT\");\n\nconst HighlightElement = createCommand<{ id: string }>(\"HIGHLIGHT_ELEMENT\");\n\nconst SetTheme = createCommand<{ theme: WebsiteBuilderTheme }>(\"SET_THEME\");\n\nconst DeselectElement = createCommand<never>(\"DESELECT_ELEMENT\");\n\nconst RefreshPreview = createCommand<never>(\"REFRESH_PREVIEW\");\n\nconst PreviewPatchElement = createCommand<{ elementId: string; patch: any[] }>(\n    \"PREVIEW_PATCH_ELEMENT\"\n);\n\nconst SendPreviewMessage = createCommand<{ type: string; payload?: any }>(\"SEND_PREVIEW_MESSAGE\");\n\nexport const Commands = {\n    CreateElement,\n    DeleteElement,\n    MoveElement,\n    SelectElement,\n    DeselectElement,\n    HighlightElement,\n    RefreshPreview,\n    PreviewPatchElement,\n    SendPreviewMessage,\n    SetTheme\n};\n"],"names":["CreateElement","createCommand","MoveElement","DeleteElement","SelectElement","HighlightElement","SetTheme","DeselectElement","RefreshPreview","PreviewPatchElement","SendPreviewMessage","Commands"],"mappings":";AAIA,MAAMA,gBAAgBC,cAWnB;AAEH,MAAMC,cAAcD,cASjB;AAEH,MAAME,gBAAgBF,cAEnB;AAEH,MAAMG,gBAAgBH,cAA8B;AAEpD,MAAMI,mBAAmBJ,cAA8B;AAEvD,MAAMK,WAAWL,cAA8C;AAE/D,MAAMM,kBAAkBN,cAAqB;AAE7C,MAAMO,iBAAiBP,cAAqB;AAE5C,MAAMQ,sBAAsBR,cACxB;AAGJ,MAAMS,qBAAqBT,cAA+C;AAEnE,MAAMU,WAAW;IACpBX,eAAAA;IACAG,eAAAA;IACAD,aAAAA;IACAE,eAAAA;IACAG,iBAAAA;IACAF,kBAAAA;IACAG,gBAAAA;IACAC,qBAAAA;IACAC,oBAAAA;IACAJ,UAAAA;AACJ"}
+{"version":3,"file":"BaseEditor/commands.js","sources":["../../src/BaseEditor/commands.ts"],"sourcesContent":["import { createCommand } from \"~/editorSdk/createCommand.js\";\nimport type { ElementFactoryCreateElementParams } from \"@webiny/website-builder-sdk\";\nimport type { WebsiteBuilderTheme } from \"@webiny/website-builder-sdk/types/WebsiteBuilderTheme.js\";\n\nconst CreateElement = createCommand<{\n    // Name of the component to use.\n    componentName: string;\n    // Parent element for the new element.\n    parentId: string;\n    // Parent element slot (e.g., `children`, `heroBanner`, `tabsList.0.content`).\n    slot: string;\n    // Index within the slot. Omit to append at the end.\n    index?: number;\n    // Bindings\n    bindings?: ElementFactoryCreateElementParams[\"bindings\"];\n}>(\"CREATE_ELEMENT\");\n\nconst MoveElement = createCommand<{\n    // ID of the element to move.\n    elementId: string;\n    // Parent element for the new element.\n    parentId: string;\n    // Parent element slot (e.g., `children`, `heroBanner`, `tabsList.0.content`).\n    slot: string;\n    // Index within the slot.\n    index: number;\n}>(\"MOVE_ELEMENT\");\n\nconst CloneElement = createCommand<{ id: string }>(\"CLONE_ELEMENT\");\n\nconst DeleteElement = createCommand<{\n    id: string;\n}>(\"DELETE_ELEMENT\");\n\nconst SelectElement = createCommand<{ id: string }>(\"SELECT_ELEMENT\");\n\nconst HighlightElement = createCommand<{ id: string }>(\"HIGHLIGHT_ELEMENT\");\n\nconst SetTheme = createCommand<{ theme: WebsiteBuilderTheme }>(\"SET_THEME\");\n\nconst DeselectElement = createCommand<never>(\"DESELECT_ELEMENT\");\n\nconst RefreshPreview = createCommand<never>(\"REFRESH_PREVIEW\");\n\nconst PreviewPatchElement = createCommand<{ elementId: string; patch: any[] }>(\n    \"PREVIEW_PATCH_ELEMENT\"\n);\n\nconst SendPreviewMessage = createCommand<{ type: string; payload?: any }>(\"SEND_PREVIEW_MESSAGE\");\n\nexport const Commands = {\n    CloneElement,\n    CreateElement,\n    DeleteElement,\n    MoveElement,\n    SelectElement,\n    DeselectElement,\n    HighlightElement,\n    RefreshPreview,\n    PreviewPatchElement,\n    SendPreviewMessage,\n    SetTheme\n};\n"],"names":["CreateElement","createCommand","MoveElement","CloneElement","DeleteElement","SelectElement","HighlightElement","SetTheme","DeselectElement","RefreshPreview","PreviewPatchElement","SendPreviewMessage","Commands"],"mappings":";AAIA,MAAMA,gBAAgBC,cAWnB;AAEH,MAAMC,cAAcD,cASjB;AAEH,MAAME,eAAeF,cAA8B;AAEnD,MAAMG,gBAAgBH,cAEnB;AAEH,MAAMI,gBAAgBJ,cAA8B;AAEpD,MAAMK,mBAAmBL,cAA8B;AAEvD,MAAMM,WAAWN,cAA8C;AAE/D,MAAMO,kBAAkBP,cAAqB;AAE7C,MAAMQ,iBAAiBR,cAAqB;AAE5C,MAAMS,sBAAsBT,cACxB;AAGJ,MAAMU,qBAAqBV,cAA+C;AAEnE,MAAMW,WAAW;IACpBT,cAAAA;IACAH,eAAAA;IACAI,eAAAA;IACAF,aAAAA;IACAG,eAAAA;IACAG,iBAAAA;IACAF,kBAAAA;IACAG,gBAAAA;IACAC,qBAAAA;IACAC,oBAAAA;IACAJ,UAAAA;AACJ"}

package/BaseEditor/components/DragPreview/DragCursorWrapper.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface DragCursorWrapperProps {
+    componentName: string;
+    isOverSlot: boolean;
+}
+export declare const DragCursorWrapper: ({ componentName, isOverSlot }: DragCursorWrapperProps) => React.JSX.Element;
+export {};

package/BaseEditor/components/DragPreview/DragCursorWrapper.js

@@ -0,0 +1,17 @@
+import react from "react";
+import { DragCursor } from "@webiny/admin-ui";
+import { useComponent } from "../../hooks/useComponent.js";
+import { InlineSvg } from "../../defaultConfig/Toolbar/InsertElements/InlineSvg.js";
+const DragCursorWrapper = ({ componentName, isOverSlot })=>{
+    const component = useComponent(componentName);
+    return /*#__PURE__*/ react.createElement(DragCursor, {
+        label: component?.label ?? componentName,
+        icon: component?.image ? /*#__PURE__*/ react.createElement(InlineSvg, {
+            src: component.image
+        }) : void 0,
+        isOverSlot: isOverSlot
+    });
+};
+export { DragCursorWrapper };
+
+//# sourceMappingURL=DragCursorWrapper.js.map

package/BaseEditor/components/DragPreview/DragCursorWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/components/DragPreview/DragCursorWrapper.js","sources":["../../../../src/BaseEditor/components/DragPreview/DragCursorWrapper.tsx"],"sourcesContent":["import React from \"react\";\nimport { DragCursor } from \"@webiny/admin-ui\";\nimport { useComponent } from \"~/BaseEditor/hooks/useComponent.js\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\n\ninterface DragCursorWrapperProps {\n    componentName: string;\n    isOverSlot: boolean;\n}\n\nexport const DragCursorWrapper = ({ componentName, isOverSlot }: DragCursorWrapperProps) => {\n    const component = useComponent(componentName);\n\n    return (\n        <DragCursor\n            label={component?.label ?? componentName}\n            icon={component?.image ? <InlineSvg src={component.image} /> : undefined}\n            isOverSlot={isOverSlot}\n        />\n    );\n};\n"],"names":["DragCursorWrapper","componentName","isOverSlot","component","useComponent","DragCursor","InlineSvg","undefined"],"mappings":";;;;AAUO,MAAMA,oBAAoB,CAAC,EAAEC,aAAa,EAAEC,UAAU,EAA0B;IACnF,MAAMC,YAAYC,aAAaH;IAE/B,OAAO,WAAP,GACI,oBAACI,YAAUA;QACP,OAAOF,WAAW,SAASF;QAC3B,MAAME,WAAW,QAAQ,WAAR,GAAQ,oBAACG,WAASA;YAAC,KAAKH,UAAU,KAAK;aAAOI;QAC/D,YAAYL;;AAGxB"}

package/BaseEditor/components/DragPreview/DragPreview.js

@@ -0,0 +1,37 @@
+import react, { useEffect, useState } from "react";
+import { useDragLayer } from "react-dnd";
+import { useDropZoneManager } from "../../defaultConfig/Content/Preview/DropZoneManagerProvider.js";
+import { resetDragPosition, setDragPreviewRef, setupDragPosition } from "./useDragPosition.js";
+import { DragCursorWrapper } from "./DragCursorWrapper.js";
+const DragPreview = ()=>{
+    const [isOverSlot, setIsOverSlot] = useState(false);
+    const dropZoneManager = useDropZoneManager();
+    const { isDragging, item } = useDragLayer((monitor)=>{
+        setupDragPosition(monitor);
+        return {
+            isDragging: monitor.isDragging(),
+            item: monitor.getItem()
+        };
+    });
+    useEffect(()=>dropZoneManager.subscribeToMatchChange(setIsOverSlot), [
+        dropZoneManager
+    ]);
+    useEffect(()=>()=>{
+            resetDragPosition();
+        }, []);
+    if (!isDragging) return null;
+    if (item && item.dragInNavigator) return null;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "fixed pointer-events-none left-0 top-0 w-full h-full z-[1001]"
+    }, /*#__PURE__*/ react.createElement("div", {
+        ref: setDragPreviewRef,
+        className: "absolute"
+    }, /*#__PURE__*/ react.createElement(DragCursorWrapper, {
+        componentName: item?.componentName,
+        isOverSlot: isOverSlot
+    })));
+};
+const DragPreview_DragPreview = DragPreview;
+export default DragPreview_DragPreview;
+
+//# sourceMappingURL=DragPreview.js.map

package/BaseEditor/components/DragPreview/DragPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/components/DragPreview/DragPreview.js","sources":["../../../../src/BaseEditor/components/DragPreview/DragPreview.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport type { DragLayerMonitor } from \"react-dnd\";\nimport { useDragLayer } from \"react-dnd\";\nimport { useDropZoneManager } from \"~/BaseEditor/defaultConfig/Content/Preview/DropZoneManagerProvider.js\";\nimport { setupDragPosition, setDragPreviewRef, resetDragPosition } from \"./useDragPosition.js\";\nimport { DragCursorWrapper } from \"./DragCursorWrapper.js\";\n\nconst DragPreview = () => {\n    const [isOverSlot, setIsOverSlot] = useState(false);\n    const dropZoneManager = useDropZoneManager();\n\n    const { isDragging, item } = useDragLayer((monitor: DragLayerMonitor) => {\n        setupDragPosition(monitor);\n\n        return {\n            isDragging: monitor.isDragging(),\n            item: monitor.getItem()\n        };\n    });\n\n    useEffect(() => {\n        return dropZoneManager.subscribeToMatchChange(setIsOverSlot);\n    }, [dropZoneManager]);\n\n    useEffect(() => {\n        return () => {\n            resetDragPosition();\n        };\n    }, []);\n\n    if (!isDragging) {\n        return null;\n    }\n\n    if (item && item.dragInNavigator) {\n        return null;\n    }\n\n    return (\n        <div className=\"fixed pointer-events-none left-0 top-0 w-full h-full z-[1001]\">\n            <div ref={setDragPreviewRef} className=\"absolute\">\n                <DragCursorWrapper componentName={item?.componentName} isOverSlot={isOverSlot} />\n            </div>\n        </div>\n    );\n};\n\nexport default DragPreview;\n"],"names":["DragPreview","isOverSlot","setIsOverSlot","useState","dropZoneManager","useDropZoneManager","isDragging","item","useDragLayer","monitor","setupDragPosition","useEffect","resetDragPosition","setDragPreviewRef","DragCursorWrapper"],"mappings":";;;;;AAOA,MAAMA,cAAc;IAChB,MAAM,CAACC,YAAYC,cAAc,GAAGC,SAAS;IAC7C,MAAMC,kBAAkBC;IAExB,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAE,GAAGC,aAAa,CAACC;QACvCC,kBAAkBD;QAElB,OAAO;YACH,YAAYA,QAAQ,UAAU;YAC9B,MAAMA,QAAQ,OAAO;QACzB;IACJ;IAEAE,UAAU,IACCP,gBAAgB,sBAAsB,CAACF,gBAC/C;QAACE;KAAgB;IAEpBO,UAAU,IACC;YACHC;QACJ,GACD,EAAE;IAEL,IAAI,CAACN,YACD,OAAO;IAGX,IAAIC,QAAQA,KAAK,eAAe,EAC5B,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAAC;QAAI,KAAKM;QAAmB,WAAU;qBACnC,oBAACC,mBAAiBA;QAAC,eAAeP,MAAM;QAAe,YAAYN;;AAInF;AAEA,gCAAeD"}

package/BaseEditor/components/DragPreview/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./DragPreview.js";

package/BaseEditor/components/DragPreview/index.js

@@ -0,0 +1 @@
+export { default } from "./DragPreview.js";

package/BaseEditor/components/DragPreview/useDragPosition.d.ts

@@ -0,0 +1,4 @@
+import type { DragLayerMonitor } from "react-dnd";
+export declare function setupDragPosition(monitor: DragLayerMonitor): void;
+export declare function setDragPreviewRef(el: HTMLDivElement | null): void;
+export declare function resetDragPosition(): void;

package/BaseEditor/components/DragPreview/useDragPosition.js

@@ -0,0 +1,26 @@
+let subscribedToOffsetChange = false;
+let dragPreviewRef = null;
+const onOffsetChange = (monitor)=>()=>{
+        if (!dragPreviewRef) return;
+        const offset = monitor.getClientOffset();
+        if (!offset) return;
+        const transform = `translate(${offset.x + 8}px, ${offset.y + 8}px)`;
+        dragPreviewRef.style["transform"] = transform;
+        dragPreviewRef.style["-webkit-transform"] = transform;
+    };
+function setupDragPosition(monitor) {
+    if (!subscribedToOffsetChange) {
+        monitor.subscribeToOffsetChange(onOffsetChange(monitor));
+        subscribedToOffsetChange = true;
+    }
+}
+function setDragPreviewRef(el) {
+    dragPreviewRef = el;
+}
+function resetDragPosition() {
+    subscribedToOffsetChange = false;
+    dragPreviewRef = null;
+}
+export { resetDragPosition, setDragPreviewRef, setupDragPosition };
+
+//# sourceMappingURL=useDragPosition.js.map

package/BaseEditor/components/DragPreview/useDragPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/components/DragPreview/useDragPosition.js","sources":["../../../../src/BaseEditor/components/DragPreview/useDragPosition.ts"],"sourcesContent":["import type { DragLayerMonitor } from \"react-dnd\";\n\nlet subscribedToOffsetChange = false;\nlet dragPreviewRef: HTMLDivElement | null = null;\n\nconst onOffsetChange = (monitor: DragLayerMonitor) => () => {\n    if (!dragPreviewRef) {\n        return;\n    }\n\n    const offset = monitor.getClientOffset();\n    if (!offset) {\n        return;\n    }\n\n    const transform = `translate(${offset.x + 8}px, ${offset.y + 8}px)`;\n    dragPreviewRef.style[\"transform\"] = transform;\n    // @ts-expect-error\n    dragPreviewRef.style[\"-webkit-transform\"] = transform;\n};\n\nexport function setupDragPosition(monitor: DragLayerMonitor) {\n    if (!subscribedToOffsetChange) {\n        // @ts-expect-error\n        monitor.subscribeToOffsetChange(onOffsetChange(monitor));\n        subscribedToOffsetChange = true;\n    }\n}\n\nexport function setDragPreviewRef(el: HTMLDivElement | null) {\n    dragPreviewRef = el;\n}\n\nexport function resetDragPosition() {\n    subscribedToOffsetChange = false;\n    dragPreviewRef = null;\n}\n"],"names":["subscribedToOffsetChange","dragPreviewRef","onOffsetChange","monitor","offset","transform","setupDragPosition","setDragPreviewRef","el","resetDragPosition"],"mappings":"AAEA,IAAIA,2BAA2B;AAC/B,IAAIC,iBAAwC;AAE5C,MAAMC,iBAAiB,CAACC,UAA8B;QAClD,IAAI,CAACF,gBACD;QAGJ,MAAMG,SAASD,QAAQ,eAAe;QACtC,IAAI,CAACC,QACD;QAGJ,MAAMC,YAAY,CAAC,UAAU,EAAED,OAAO,CAAC,GAAG,EAAE,IAAI,EAAEA,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC;QACnEH,eAAe,KAAK,CAAC,YAAY,GAAGI;QAEpCJ,eAAe,KAAK,CAAC,oBAAoB,GAAGI;IAChD;AAEO,SAASC,kBAAkBH,OAAyB;IACvD,IAAI,CAACH,0BAA0B;QAE3BG,QAAQ,uBAAuB,CAACD,eAAeC;QAC/CH,2BAA2B;IAC/B;AACJ;AAEO,SAASO,kBAAkBC,EAAyB;IACvDP,iBAAiBO;AACrB;AAEO,SAASC;IACZT,2BAA2B;IAC3BC,iBAAiB;AACrB"}

package/BaseEditor/components/Draggable.d.ts

@@ -9,5 +9,5 @@ interface DraggableProps<T> {
         dragRef: ConnectDragSource;
     }) => React.ReactNode;
 }
-export declare const Draggable: React.MemoExoticComponent<(<T = any>({ type, item, canDrag, children }: DraggableProps<T>) => React.JSX.Element)>;
+export declare const Draggable: React.MemoExoticComponent<<T = any>({ type, item, canDrag, children }: DraggableProps<T>) => React.JSX.Element>;
 export {};

package/BaseEditor/components/Editor.js

@@ -2,7 +2,6 @@ import react, { useEffect, useState } from "react";
 import classnames from "classnames";
 import { allNodes } from "@webiny/lexical-nodes";
 import { useLexicalContext } from "@webiny/app-admin/presentation/lexicalContext/useLexicalContext.js";
-import DragPreview from "./DragPreview.js";
 import { EditorConfig, EditorWithConfig } from "../config/index.js";
 import { useDocumentEditor } from "../../DocumentEditor/index.js";
 import { Commands } from "../index.js";
@@ -22,7 +21,7 @@ const Editor = ()=>{
         theme: theme
     }, /*#__PURE__*/ react.createElement("div", {
         className: classnames("w-full")
-    }, /*#__PURE__*/ react.createElement(EditorWithConfig, null, /*#__PURE__*/ react.createElement(EditorConfig.Ui.Layout, null)), /*#__PURE__*/ react.createElement(DragPreview, null)));
+    }, /*#__PURE__*/ react.createElement(EditorWithConfig, null, /*#__PURE__*/ react.createElement(EditorConfig.Ui.Layout, null))));
 };
 export { Editor };
 

package/BaseEditor/components/Editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/components/Editor.js","sources":["../../../src/BaseEditor/components/Editor.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport classSet from \"classnames\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport type { WebsiteBuilderTheme } from \"@webiny/website-builder-sdk\";\nimport { useLexicalContext } from \"@webiny/app-admin/presentation/lexicalContext/useLexicalContext.js\";\nimport DragPreview from \"./DragPreview.js\";\nimport { EditorConfig, EditorWithConfig } from \"../config/index.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport { ThemeProvider } from \"~/BaseEditor/components/ThemeProvider.js\";\n\nexport const Editor = () => {\n    const { lexicalContext } = useLexicalContext();\n    const editor = useDocumentEditor();\n    const [theme, setTheme] = useState<WebsiteBuilderTheme | undefined>(undefined);\n\n    useEffect(() => {\n        editor.registerCommandHandler(Commands.SetTheme, ({ theme }) => {\n            setTheme(theme);\n            lexicalContext.setTheme(theme);\n            lexicalContext.setNodes(allNodes);\n        });\n    }, []);\n\n    return (\n        <ThemeProvider theme={theme}>\n            <div className={classSet(\"w-full\")}>\n                <EditorWithConfig>\n                    <EditorConfig.Ui.Layout />\n                </EditorWithConfig>\n                <DragPreview />\n            </div>\n        </ThemeProvider>\n    );\n};\n"],"names":["Editor","lexicalContext","useLexicalContext","editor","useDocumentEditor","theme","setTheme","useState","undefined","useEffect","Commands","allNodes","ThemeProvider","classSet","EditorWithConfig","EditorConfig","DragPreview"],"mappings":";;;;;;;;;AAWO,MAAMA,SAAS;IAClB,MAAM,EAAEC,cAAc,EAAE,GAAGC;IAC3B,MAAMC,SAASC;IACf,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAA0CC;IAEpEC,UAAU;QACNN,OAAO,sBAAsB,CAACO,SAAS,QAAQ,EAAE,CAAC,EAAEL,KAAK,EAAE;YACvDC,SAASD;YACTJ,eAAe,QAAQ,CAACI;YACxBJ,eAAe,QAAQ,CAACU;QAC5B;IACJ,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAACC,eAAaA;QAAC,OAAOP;qBAClB,oBAAC;QAAI,WAAWQ,WAAS;qBACrB,oBAACC,kBAAgBA,MAAAA,WAAAA,GACb,oBAACC,aAAa,EAAE,CAAC,MAAM,wBAE3B,oBAACC,aAAWA;AAI5B"}
+{"version":3,"file":"BaseEditor/components/Editor.js","sources":["../../../src/BaseEditor/components/Editor.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport classSet from \"classnames\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport type { WebsiteBuilderTheme } from \"@webiny/website-builder-sdk\";\nimport { useLexicalContext } from \"@webiny/app-admin/presentation/lexicalContext/useLexicalContext.js\";\nimport { EditorConfig, EditorWithConfig } from \"../config/index.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport { ThemeProvider } from \"~/BaseEditor/components/ThemeProvider.js\";\n\nexport const Editor = () => {\n    const { lexicalContext } = useLexicalContext();\n    const editor = useDocumentEditor();\n    const [theme, setTheme] = useState<WebsiteBuilderTheme | undefined>(undefined);\n\n    useEffect(() => {\n        editor.registerCommandHandler(Commands.SetTheme, ({ theme }) => {\n            setTheme(theme);\n            lexicalContext.setTheme(theme);\n            lexicalContext.setNodes(allNodes);\n        });\n    }, []);\n\n    return (\n        <ThemeProvider theme={theme}>\n            <div className={classSet(\"w-full\")}>\n                <EditorWithConfig>\n                    <EditorConfig.Ui.Layout />\n                </EditorWithConfig>\n            </div>\n        </ThemeProvider>\n    );\n};\n"],"names":["Editor","lexicalContext","useLexicalContext","editor","useDocumentEditor","theme","setTheme","useState","undefined","useEffect","Commands","allNodes","ThemeProvider","classSet","EditorWithConfig","EditorConfig"],"mappings":";;;;;;;;AAUO,MAAMA,SAAS;IAClB,MAAM,EAAEC,cAAc,EAAE,GAAGC;IAC3B,MAAMC,SAASC;IACf,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAA0CC;IAEpEC,UAAU;QACNN,OAAO,sBAAsB,CAACO,SAAS,QAAQ,EAAE,CAAC,EAAEL,KAAK,EAAE;YACvDC,SAASD;YACTJ,eAAe,QAAQ,CAACI;YACxBJ,eAAe,QAAQ,CAACU;QAC5B;IACJ,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAACC,eAAaA;QAAC,OAAOP;qBAClB,oBAAC;QAAI,WAAWQ,WAAS;qBACrB,oBAACC,kBAAgBA,MAAAA,WAAAA,GACb,oBAACC,aAAa,EAAE,CAAC,MAAM;AAK3C"}

package/BaseEditor/config/Content/Content.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { Layout } from "./Layout.js";
 import type { ElementProps as BaseElementProps } from "../Element.js";
 export type ElementProps = Omit<BaseElementProps, "scope" | "group" | "id">;
 export declare const Content: (() => React.JSX.Element) & {
@@ -20,7 +21,7 @@ export declare const Content: (() => React.JSX.Element) & {
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 } & {
-    Layout: ({ children }: import("./Layout.js").LayoutProps) => React.ReactNode;
+    Layout: typeof Layout;
     Element: ((props: ElementProps) => React.JSX.Element) & {
         original: (props: ElementProps) => React.JSX.Element;
         originalName: string;

package/BaseEditor/config/EditorConfig.d.ts

@@ -1,5 +1,11 @@
 import type { ElementConfig } from "./Element.js";
+import { Elements } from "./Elements.js";
+import { OnActiveElement } from "./OnActiveElement.js";
+import { NoActiveElement } from "./NoActiveElement.js";
+import { ElementProperties } from "./ElementProperty.js";
 import type { ElementInputConfig } from "./ElementInput.js";
+import { IsNotReadOnly } from "../../BaseEditor/config/IsNotReadOnly.js";
+import { IsReadOnly } from "../../BaseEditor/config/IsReadOnly.js";
 export interface EditorConfig {
     elements: ElementConfig[];
     inputRenderers: ElementInputConfig[];
@@ -28,7 +34,7 @@ export declare const EditorConfigComponents: {
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
-        Elements: ({ group, scope, transform, render }: import("./Elements.js").ElementsProps) => import("react").JSX.Element;
+        Elements: typeof Elements;
         Layout: (() => import("react").JSX.Element) & {
             original: () => import("react").JSX.Element;
             originalName: string;
@@ -67,7 +73,7 @@ export declare const EditorConfigComponents: {
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         } & {
-            Layout: ({ children }: import("./Content/Layout.js").LayoutProps) => import("react").ReactNode;
+            Layout: typeof import("./Content/Layout.js").Layout;
             Element: ((props: import("./Content/Content.js").ElementProps) => import("react").JSX.Element) & {
                 original: (props: import("./Content/Content.js").ElementProps) => import("react").JSX.Element;
                 originalName: string;
@@ -245,7 +251,7 @@ export declare const EditorConfigComponents: {
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         } & {
-            Layout: () => import("react").JSX.Element;
+            Layout: typeof import("./Toolbar/Layout.js").Layout;
             Element: ((props: import("./Toolbar/Toolbar.js").ElementProps) => import("react").JSX.Element) & {
                 original: (props: import("./Toolbar/Toolbar.js").ElementProps) => import("react").JSX.Element;
                 originalName: string;
@@ -284,6 +290,7 @@ export declare const EditorConfigComponents: {
                     displayName: string;
                 }>) => (props: unknown) => React.JSX.Element;
             };
+            Tab: typeof import("./Toolbar/Tab.js").Tab;
         };
         Sidebar: (() => import("react").JSX.Element) & {
             original: () => import("react").JSX.Element;
@@ -380,14 +387,14 @@ export declare const EditorConfigComponents: {
                     displayName: string;
                 }>) => (props: unknown) => React.JSX.Element;
             } & {
-                Tab: ({ name, label, disabled, element, visible, noPadding }: import("./Sidebar/Tab.js").TabProps) => import("react").JSX.Element;
+                Tab: typeof import("./Sidebar/Tab.js").Tab;
             };
-            ScrollableContainer: ({ children }: any) => import("react").JSX.Element;
+            ScrollableContainer: typeof import("./Sidebar/ScrollableContainer.js").ScrollableContainer;
         };
-        IsReadOnly: ({ children }: import("~/BaseEditor/config/IsReadOnly.js").IsNotReadOnlyProps) => import("react").JSX.Element | null;
-        IsNotReadOnly: ({ children }: import("~/BaseEditor/config/IsNotReadOnly.js").IsNotReadOnlyProps) => import("react").JSX.Element | null;
-        OnActiveElement: ({ children }: import("./OnActiveElement.js").OnActiveElementProps) => import("react").JSX.Element | null;
-        NoActiveElement: ({ children }: import("./NoActiveElement.js").NoActiveElementProps) => import("react").JSX.Element | null;
+        IsReadOnly: typeof IsReadOnly;
+        IsNotReadOnly: typeof IsNotReadOnly;
+        OnActiveElement: typeof OnActiveElement;
+        NoActiveElement: typeof NoActiveElement;
     };
     ElementInput: {
         Renderer: (props: import("./ElementInput.js").RendererProps) => import("react").JSX.Element;
@@ -420,7 +427,7 @@ export declare const EditorConfigComponents: {
     /**
      * Render element properties for the given group.
      */
-    ElementProperties: (props: import("./ElementProperty.js").ElementPropertiesProps) => import("react").JSX.Element;
+    ElementProperties: typeof ElementProperties;
     /**
      * Define an element action.
      */
@@ -443,7 +450,7 @@ export declare const EditorConfigComponents: {
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     } & {
-        IconButton: ({ label, icon, disabled, onClick }: import("./IconButton.js").IconButtonProps) => import("react").JSX.Element;
+        IconButton: typeof import("./IconButton.js").IconButton;
     };
     /**
      * Render all element actions.
@@ -505,7 +512,7 @@ export declare const EditorConfig: (({ priority, children }: import("@webiny/rea
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
-        Elements: ({ group, scope, transform, render }: import("./Elements.js").ElementsProps) => import("react").JSX.Element;
+        Elements: typeof Elements;
         Layout: (() => import("react").JSX.Element) & {
             original: () => import("react").JSX.Element;
             originalName: string;
@@ -544,7 +551,7 @@ export declare const EditorConfig: (({ priority, children }: import("@webiny/rea
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         } & {
-            Layout: ({ children }: import("./Content/Layout.js").LayoutProps) => import("react").ReactNode;
+            Layout: typeof import("./Content/Layout.js").Layout;
             Element: ((props: import("./Content/Content.js").ElementProps) => import("react").JSX.Element) & {
                 original: (props: import("./Content/Content.js").ElementProps) => import("react").JSX.Element;
                 originalName: string;
@@ -722,7 +729,7 @@ export declare const EditorConfig: (({ priority, children }: import("@webiny/rea
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         } & {
-            Layout: () => import("react").JSX.Element;
+            Layout: typeof import("./Toolbar/Layout.js").Layout;
             Element: ((props: import("./Toolbar/Toolbar.js").ElementProps) => import("react").JSX.Element) & {
                 original: (props: import("./Toolbar/Toolbar.js").ElementProps) => import("react").JSX.Element;
                 originalName: string;
@@ -761,6 +768,7 @@ export declare const EditorConfig: (({ priority, children }: import("@webiny/rea
                     displayName: string;
                 }>) => (props: unknown) => React.JSX.Element;
             };
+            Tab: typeof import("./Toolbar/Tab.js").Tab;
         };
         Sidebar: (() => import("react").JSX.Element) & {
             original: () => import("react").JSX.Element;
@@ -857,14 +865,14 @@ export declare const EditorConfig: (({ priority, children }: import("@webiny/rea
                     displayName: string;
                 }>) => (props: unknown) => React.JSX.Element;
             } & {
-                Tab: ({ name, label, disabled, element, visible, noPadding }: import("./Sidebar/Tab.js").TabProps) => import("react").JSX.Element;
+                Tab: typeof import("./Sidebar/Tab.js").Tab;
             };
-            ScrollableContainer: ({ children }: any) => import("react").JSX.Element;
+            ScrollableContainer: typeof import("./Sidebar/ScrollableContainer.js").ScrollableContainer;
         };
-        IsReadOnly: ({ children }: import("~/BaseEditor/config/IsReadOnly.js").IsNotReadOnlyProps) => import("react").JSX.Element | null;
-        IsNotReadOnly: ({ children }: import("~/BaseEditor/config/IsNotReadOnly.js").IsNotReadOnlyProps) => import("react").JSX.Element | null;
-        OnActiveElement: ({ children }: import("./OnActiveElement.js").OnActiveElementProps) => import("react").JSX.Element | null;
-        NoActiveElement: ({ children }: import("./NoActiveElement.js").NoActiveElementProps) => import("react").JSX.Element | null;
+        IsReadOnly: typeof IsReadOnly;
+        IsNotReadOnly: typeof IsNotReadOnly;
+        OnActiveElement: typeof OnActiveElement;
+        NoActiveElement: typeof NoActiveElement;
     };
     ElementInput: {
         Renderer: (props: import("./ElementInput.js").RendererProps) => import("react").JSX.Element;
@@ -897,7 +905,7 @@ export declare const EditorConfig: (({ priority, children }: import("@webiny/rea
     /**
      * Render element properties for the given group.
      */
-    ElementProperties: (props: import("./ElementProperty.js").ElementPropertiesProps) => import("react").JSX.Element;
+    ElementProperties: typeof ElementProperties;
     /**
      * Define an element action.
      */
@@ -920,7 +928,7 @@ export declare const EditorConfig: (({ priority, children }: import("@webiny/rea
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     } & {
-        IconButton: ({ label, icon, disabled, onClick }: import("./IconButton.js").IconButtonProps) => import("react").JSX.Element;
+        IconButton: typeof import("./IconButton.js").IconButton;
     };
     /**
      * Render all element actions.

package/BaseEditor/config/ElementAction.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import type { ElementProps } from "./Element.js";
+import { IconButton } from "./IconButton.js";
 export type ElementActionProps = Omit<ElementProps, "scope" | "group" | "id">;
 export declare const ElementActions: (() => React.JSX.Element) & {
     original: () => React.JSX.Element;
@@ -39,5 +40,5 @@ export declare const ElementAction: ((props: ElementActionProps) => React.JSX.El
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 } & {
-    IconButton: ({ label, icon, disabled, onClick }: import("./IconButton.js").IconButtonProps) => React.JSX.Element;
+    IconButton: typeof IconButton;
 };

package/BaseEditor/config/ElementInput.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ComponentInput } from "@webiny/website-builder-sdk";
+import type { ComponentInput, DocumentElement, DocumentElementBindings, InputAstNode } from "@webiny/website-builder-sdk";
 import type { InputBindingOnChange } from "../defaultConfig/Sidebar/ElementSettings/useInputValue.js";
 import type { IMetadata } from "../../BaseEditor/metadata/index.js";
 export interface ElementInputRendererProps {
@@ -9,15 +9,20 @@ export interface ElementInputRendererProps {
     onChange: InputBindingOnChange;
     onPreviewChange: InputBindingOnChange;
     input: ComponentInput;
+    node?: InputAstNode;
+    element?: DocumentElement;
+    bindings?: DocumentElementBindings["inputs"];
 }
 export interface RendererProps {
     name: string;
     component: React.ComponentType<any>;
 }
+declare const Renderer: (props: RendererProps) => React.JSX.Element;
 export interface ElementInputConfig {
     name: string;
     component: React.ComponentType<ElementInputRendererProps>;
 }
 export declare const ElementInput: {
-    Renderer: (props: RendererProps) => React.JSX.Element;
+    Renderer: typeof Renderer;
 };
+export {};

package/BaseEditor/config/ElementInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/config/ElementInput.js","sources":["../../../src/BaseEditor/config/ElementInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { Property, useIdGenerator } from \"@webiny/react-properties\";\nimport type { ComponentInput } from \"@webiny/website-builder-sdk\";\nimport type { InputBindingOnChange } from \"../defaultConfig/Sidebar/ElementSettings/useInputValue.js\";\nimport type { IMetadata } from \"~/BaseEditor/metadata/index.js\";\n\nexport interface ElementInputRendererProps {\n    label: React.ReactNode;\n    metadata: IMetadata;\n    value: any;\n    onChange: InputBindingOnChange;\n    onPreviewChange: InputBindingOnChange;\n    input: ComponentInput;\n}\n\nexport interface RendererProps {\n    name: string;\n    component: React.ComponentType<any>;\n}\n\nconst Renderer = (props: RendererProps) => {\n    const getId = useIdGenerator(\"inputRenderer\");\n    const { name, component } = props;\n\n    return (\n        <Property id={getId(name)} name={\"inputRenderers\"} array={true}>\n            <Property id={getId(name, \"name\")} name={\"name\"} value={name} />\n            <Property id={getId(name, \"component\")} name={\"component\"} value={component} />\n        </Property>\n    );\n};\n\nexport interface ElementInputConfig {\n    name: string;\n    component: React.ComponentType<ElementInputRendererProps>;\n}\n\nexport const ElementInput = {\n    Renderer\n};\n"],"names":["Renderer","props","getId","useIdGenerator","name","component","Property","ElementInput"],"mappings":";;AAoBA,MAAMA,WAAW,CAACC;IACd,MAAMC,QAAQC,eAAe;IAC7B,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAGJ;IAE5B,OAAO,WAAP,GACI,oBAACK,UAAQA;QAAC,IAAIJ,MAAME;QAAO,MAAM;QAAkB,OAAO;qBACtD,oBAACE,UAAQA;QAAC,IAAIJ,MAAME,MAAM;QAAS,MAAM;QAAQ,OAAOA;sBACxD,oBAACE,UAAQA;QAAC,IAAIJ,MAAME,MAAM;QAAc,MAAM;QAAa,OAAOC;;AAG9E;AAOO,MAAME,eAAe;IACxBP,UAAAA;AACJ"}
+{"version":3,"file":"BaseEditor/config/ElementInput.js","sources":["../../../src/BaseEditor/config/ElementInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { Property, useIdGenerator } from \"@webiny/react-properties\";\nimport type {\n    ComponentInput,\n    DocumentElement,\n    DocumentElementBindings,\n    InputAstNode\n} from \"@webiny/website-builder-sdk\";\nimport type { InputBindingOnChange } from \"../defaultConfig/Sidebar/ElementSettings/useInputValue.js\";\nimport type { IMetadata } from \"~/BaseEditor/metadata/index.js\";\n\nexport interface ElementInputRendererProps {\n    label: React.ReactNode;\n    metadata: IMetadata;\n    value: any;\n    onChange: InputBindingOnChange;\n    onPreviewChange: InputBindingOnChange;\n    input: ComponentInput;\n    // The full AST node, owning element and element bindings - provided by `InputField` and used by\n    // renderers that recurse into child inputs (e.g. the object field renderer). Optional so other\n    // call sites that synthesize renderer props (e.g. the Lexical expanded-editor dialog) needn't.\n    node?: InputAstNode;\n    element?: DocumentElement;\n    bindings?: DocumentElementBindings[\"inputs\"];\n}\n\nexport interface RendererProps {\n    name: string;\n    component: React.ComponentType<any>;\n}\n\nconst Renderer = (props: RendererProps) => {\n    const getId = useIdGenerator(\"inputRenderer\");\n    const { name, component } = props;\n\n    return (\n        <Property id={getId(name)} name={\"inputRenderers\"} array={true}>\n            <Property id={getId(name, \"name\")} name={\"name\"} value={name} />\n            <Property id={getId(name, \"component\")} name={\"component\"} value={component} />\n        </Property>\n    );\n};\n\nexport interface ElementInputConfig {\n    name: string;\n    component: React.ComponentType<ElementInputRendererProps>;\n}\n\nexport const ElementInput = {\n    Renderer\n};\n"],"names":["Renderer","props","getId","useIdGenerator","name","component","Property","ElementInput"],"mappings":";;AA+BA,MAAMA,WAAW,CAACC;IACd,MAAMC,QAAQC,eAAe;IAC7B,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAGJ;IAE5B,OAAO,WAAP,GACI,oBAACK,UAAQA;QAAC,IAAIJ,MAAME;QAAO,MAAM;QAAkB,OAAO;qBACtD,oBAACE,UAAQA;QAAC,IAAIJ,MAAME,MAAM;QAAS,MAAM;QAAQ,OAAOA;sBACxD,oBAACE,UAAQA;QAAC,IAAIJ,MAAME,MAAM;QAAc,MAAM;QAAa,OAAOC;;AAG9E;AAOO,MAAME,eAAe;IACxBP,UAAAA;AACJ"}

package/BaseEditor/config/ElementOverlay.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
 import { type ElementProps as BaseElementProps } from "./Element.js";
 export type ElementProps = Pick<BaseElementProps, "name" | "element">;
+declare const Element: ({ name, element }: ElementProps) => React.JSX.Element;
+declare const Elements: () => React.JSX.Element;
 export interface ElementOverlayContainerProps {
     position: {
         top?: number;
@@ -10,9 +12,11 @@ export interface ElementOverlayContainerProps {
     };
     children: React.ReactNode;
 }
+declare const Container: ({ position, children }: ElementOverlayContainerProps) => React.JSX.Element;
 export declare const ElementOverlay: {
-    Element: (({ name, element }: ElementProps) => React.JSX.Element) & {
-        Container: ({ position, children }: ElementOverlayContainerProps) => React.JSX.Element;
+    Element: typeof Element & {
+        Container: typeof Container;
     };
-    Elements: () => React.JSX.Element;
+    Elements: typeof Elements;
 };
+export {};

package/BaseEditor/config/Layout.js

@@ -24,7 +24,7 @@ const Layout = makeDecoratable("EditorLayout", ()=>{
         };
     }, []);
     return /*#__PURE__*/ react.createElement(EditorLayoutContainer, null, /*#__PURE__*/ react.createElement(EditorConfig.Ui.TopBar, null), /*#__PURE__*/ react.createElement("div", {
-        className: "flex flex-row border-solid border-t-1 border-neutral-dimmed"
+        className: "flex flex-row"
     }, /*#__PURE__*/ react.createElement(IsNotReadOnly, null, /*#__PURE__*/ react.createElement(EditorConfig.Ui.Toolbar, null)), /*#__PURE__*/ react.createElement("div", {
         className: "flex-auto"
     }, /*#__PURE__*/ react.createElement(EditorConfig.Ui.Content, null)), /*#__PURE__*/ react.createElement(IsNotReadOnly, null, /*#__PURE__*/ react.createElement(EditorConfig.Ui.Sidebar, null))), /*#__PURE__*/ react.createElement(EditorConfig.Ui.Elements, {

package/BaseEditor/config/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/config/Layout.js","sources":["../../../src/BaseEditor/config/Layout.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { EditorConfig } from \"./EditorConfig.js\";\nimport styled from \"@emotion/styled\";\nimport { IsNotReadOnly } from \"~/BaseEditor/config/IsNotReadOnly.js\";\nimport { useReservedUISpace } from \"~/BaseEditor/hooks/useReservedUISpace.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\n\nconst EditorLayoutContainer = styled.div`\n    height: 100%;\n    overflow: hidden;\n`;\n\nexport const Layout = makeDecoratable(\"EditorLayout\", () => {\n    const editor = useDocumentEditor();\n\n    useReservedUISpace(dimensions => {\n        editor.updateEditor(state => {\n            state.uiReservedSpace = dimensions;\n        });\n    });\n\n    useEffect(() => {\n        const currentOverflow = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n        return () => {\n            document.body.style.overflow = currentOverflow;\n        };\n    }, []);\n\n    return (\n        <EditorLayoutContainer>\n            <EditorConfig.Ui.TopBar />\n            <div className={\"flex flex-row border-solid border-t-1 border-neutral-dimmed\"}>\n                <IsNotReadOnly>\n                    <EditorConfig.Ui.Toolbar />\n                </IsNotReadOnly>\n                <div className={\"flex-auto\"}>\n                    <EditorConfig.Ui.Content />\n                </div>\n                <IsNotReadOnly>\n                    <EditorConfig.Ui.Sidebar />\n                </IsNotReadOnly>\n            </div>\n            <EditorConfig.Ui.Elements group={\"overlays\"} />\n        </EditorLayoutContainer>\n    );\n});\n"],"names":["EditorLayoutContainer","styled","Layout","makeDecoratable","editor","useDocumentEditor","useReservedUISpace","dimensions","state","useEffect","currentOverflow","document","EditorConfig","IsNotReadOnly"],"mappings":";;;;;;;AAQA,MAAMA,wBAAwBC,OAAO,GAAG,CAAC;;;AAGzC,CAAC;AAEM,MAAMC,SAASC,gBAAgB,gBAAgB;IAClD,MAAMC,SAASC;IAEfC,mBAAmBC,CAAAA;QACfH,OAAO,YAAY,CAACI,CAAAA;YAChBA,MAAM,eAAe,GAAGD;QAC5B;IACJ;IAEAE,UAAU;QACN,MAAMC,kBAAkBC,SAAS,IAAI,CAAC,KAAK,CAAC,QAAQ;QACpDA,SAAS,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG;QAC/B,OAAO;YACHA,SAAS,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAGD;QACnC;IACJ,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAACV,uBAAqBA,MAAAA,WAAAA,GAClB,oBAACY,aAAa,EAAE,CAAC,MAAM,uBACvB,oBAAC;QAAI,WAAW;qBACZ,oBAACC,eAAaA,MAAAA,WAAAA,GACV,oBAACD,aAAa,EAAE,CAAC,OAAO,wBAE5B,oBAAC;QAAI,WAAW;qBACZ,oBAACA,aAAa,EAAE,CAAC,OAAO,wBAE5B,oBAACC,eAAaA,MAAAA,WAAAA,GACV,oBAACD,aAAa,EAAE,CAAC,OAAO,yBAGhC,oBAACA,aAAa,EAAE,CAAC,QAAQ;QAAC,OAAO;;AAG7C"}
+{"version":3,"file":"BaseEditor/config/Layout.js","sources":["../../../src/BaseEditor/config/Layout.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { EditorConfig } from \"./EditorConfig.js\";\nimport styled from \"@emotion/styled\";\nimport { IsNotReadOnly } from \"~/BaseEditor/config/IsNotReadOnly.js\";\nimport { useReservedUISpace } from \"~/BaseEditor/hooks/useReservedUISpace.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\n\nconst EditorLayoutContainer = styled.div`\n    height: 100%;\n    overflow: hidden;\n`;\n\nexport const Layout = makeDecoratable(\"EditorLayout\", () => {\n    const editor = useDocumentEditor();\n\n    useReservedUISpace(dimensions => {\n        editor.updateEditor(state => {\n            state.uiReservedSpace = dimensions;\n        });\n    });\n\n    useEffect(() => {\n        const currentOverflow = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n        return () => {\n            document.body.style.overflow = currentOverflow;\n        };\n    }, []);\n\n    return (\n        <EditorLayoutContainer>\n            <EditorConfig.Ui.TopBar />\n            <div className={\"flex flex-row\"}>\n                <IsNotReadOnly>\n                    <EditorConfig.Ui.Toolbar />\n                </IsNotReadOnly>\n                <div className={\"flex-auto\"}>\n                    <EditorConfig.Ui.Content />\n                </div>\n                <IsNotReadOnly>\n                    <EditorConfig.Ui.Sidebar />\n                </IsNotReadOnly>\n            </div>\n            <EditorConfig.Ui.Elements group={\"overlays\"} />\n        </EditorLayoutContainer>\n    );\n});\n"],"names":["EditorLayoutContainer","styled","Layout","makeDecoratable","editor","useDocumentEditor","useReservedUISpace","dimensions","state","useEffect","currentOverflow","document","EditorConfig","IsNotReadOnly"],"mappings":";;;;;;;AAQA,MAAMA,wBAAwBC,OAAO,GAAG,CAAC;;;AAGzC,CAAC;AAEM,MAAMC,SAASC,gBAAgB,gBAAgB;IAClD,MAAMC,SAASC;IAEfC,mBAAmBC,CAAAA;QACfH,OAAO,YAAY,CAACI,CAAAA;YAChBA,MAAM,eAAe,GAAGD;QAC5B;IACJ;IAEAE,UAAU;QACN,MAAMC,kBAAkBC,SAAS,IAAI,CAAC,KAAK,CAAC,QAAQ;QACpDA,SAAS,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG;QAC/B,OAAO;YACHA,SAAS,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAGD;QACnC;IACJ,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAACV,uBAAqBA,MAAAA,WAAAA,GAClB,oBAACY,aAAa,EAAE,CAAC,MAAM,uBACvB,oBAAC;QAAI,WAAW;qBACZ,oBAACC,eAAaA,MAAAA,WAAAA,GACV,oBAACD,aAAa,EAAE,CAAC,OAAO,wBAE5B,oBAAC;QAAI,WAAW;qBACZ,oBAACA,aAAa,EAAE,CAAC,OAAO,wBAE5B,oBAACC,eAAaA,MAAAA,WAAAA,GACV,oBAACD,aAAa,EAAE,CAAC,OAAO,yBAGhC,oBAACA,aAAa,EAAE,CAAC,QAAQ;QAAC,OAAO;;AAG7C"}

package/BaseEditor/config/Sidebar/Layout.js

@@ -1,23 +1,17 @@
 import react from "react";
 import { makeDecoratable } from "@webiny/app-admin";
-import { Tabs } from "@webiny/admin-ui";
+import { SegmentedControl } from "@webiny/admin-ui";
 import { Sidebar } from "./Sidebar.js";
 const Layout = makeDecoratable("SidebarLayout", ()=>/*#__PURE__*/ react.createElement("div", {
         "data-role": "editor-sidebar",
         "data-affects-preview": "width",
-        className: "bg-neutral-base border-l-sm border-l-neutral-dimmed"
-    }, /*#__PURE__*/ react.createElement(Tabs, {
-        size: "md",
-        spacing: "md",
-        separator: true,
-        defaultValue: "element",
-        tabs: [
-            /*#__PURE__*/ react.createElement(Sidebar.Elements, {
-                group: "groups",
-                key: "groups"
-            })
-        ]
-    })));
+        className: "bg-neutral-base border-l-sm border-l-neutral-dimmed h-full flex flex-col p-sm"
+    }, /*#__PURE__*/ react.createElement(SegmentedControl.Tabs, {
+        className: "flex-1 flex flex-col min-h-0",
+        variant: "dimmed"
+    }, /*#__PURE__*/ react.createElement(Sidebar.Elements, {
+        group: "groups"
+    }))));
 export { Layout };
 
 //# sourceMappingURL=Layout.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/config/Sidebar/Layout.js","sources":["../../../../src/BaseEditor/config/Sidebar/Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport { Tabs } from \"@webiny/admin-ui\";\nimport { Sidebar } from \"./Sidebar.js\";\n\nexport const Layout = makeDecoratable(\"SidebarLayout\", () => {\n    return (\n        <div\n            data-role=\"editor-sidebar\"\n            data-affects-preview={\"width\"}\n            className={\"bg-neutral-base border-l-sm border-l-neutral-dimmed\"}\n        >\n            <Tabs\n                size=\"md\"\n                spacing={\"md\"}\n                separator={true}\n                defaultValue={\"element\"}\n                tabs={[<Sidebar.Elements group=\"groups\" key={\"groups\"} />]}\n            />\n        </div>\n    );\n});\n"],"names":["Layout","makeDecoratable","Tabs","Sidebar"],"mappings":";;;;AAKO,MAAMA,SAASC,gBAAgB,iBAAiB,IAC5C,WAAP,GACI,oBAAC;QACG,aAAU;QACV,wBAAsB;QACtB,WAAW;qBAEX,oBAACC,MAAIA;QACD,MAAK;QACL,SAAS;QACT,WAAW;QACX,cAAc;QACd,MAAM;0BAAC,oBAACC,QAAQ,QAAQ;gBAAC,OAAM;gBAAS,KAAK;;SAAa"}
+{"version":3,"file":"BaseEditor/config/Sidebar/Layout.js","sources":["../../../../src/BaseEditor/config/Sidebar/Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport { SegmentedControl } from \"@webiny/admin-ui\";\nimport { Sidebar } from \"./Sidebar.js\";\n\nexport const Layout = makeDecoratable(\"SidebarLayout\", () => {\n    return (\n        <div\n            data-role=\"editor-sidebar\"\n            data-affects-preview={\"width\"}\n            className={\n                \"bg-neutral-base border-l-sm border-l-neutral-dimmed h-full flex flex-col p-sm\"\n            }\n        >\n            <SegmentedControl.Tabs className={\"flex-1 flex flex-col min-h-0\"} variant={\"dimmed\"}>\n                <Sidebar.Elements group={\"groups\"} />\n            </SegmentedControl.Tabs>\n        </div>\n    );\n});\n"],"names":["Layout","makeDecoratable","SegmentedControl","Sidebar"],"mappings":";;;;AAKO,MAAMA,SAASC,gBAAgB,iBAAiB,IAC5C,WAAP,GACI,oBAAC;QACG,aAAU;QACV,wBAAsB;QACtB,WACI;qBAGJ,oBAACC,iBAAiB,IAAI;QAAC,WAAW;QAAgC,SAAS;qBACvE,oBAACC,QAAQ,QAAQ;QAAC,OAAO"}