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

package/BaseEditor/defaultConfig/Toolbar/Navigator/Navigator.js

@@ -1,79 +1,14 @@
 import react, { useCallback, useMemo } from "react";
-import get from "lodash/get.js";
 import { observer } from "mobx-react-lite";
-import { Tooltip, Tree } from "@webiny/admin-ui";
-import { ReactComponent } from "@webiny/icons/visibility_off.svg";
+import { ScrollArea, Tree } from "@webiny/admin-ui";
 import { useActiveElement } from "../../../hooks/useActiveElement.js";
 import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor.js";
 import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
 import { Commands } from "../../../index.js";
-import { InlineSvg } from "../InsertElements/InlineSvg.js";
-import { InfoMessage } from "../../Sidebar/InfoMessage.js";
-import { useStyles } from "../../../hooks/useStyles.js";
-function flattenElements(elements, activeElementId) {
-    const result = [];
-    const asArray = Object.values(elements);
-    for(const key in elements){
-        const node = elements[key];
-        if (node.parent) result.push({
-            id: node.id,
-            label: node.label,
-            parentId: node.parent.id,
-            active: node.id === activeElementId,
-            droppable: asArray.filter((el)=>el.parent?.id === node.id).length > 0,
-            data: {
-                parent: node.parent,
-                icon: node.image ? /*#__PURE__*/ react.createElement(InlineSvg, {
-                    src: node.image,
-                    className: "fill-neutral-strong"
-                }) : /*#__PURE__*/ react.createElement(react.Fragment, null),
-                draggable: node.canDrag
-            }
-        });
-    }
-    return result;
-}
-function getElementNodeData({ components, elements, bindings }) {
-    const getIndex = (elementId, parentId, slot)=>{
-        const elementBindings = bindings[parentId];
-        if (!elementBindings) return -1;
-        const slotValue = get(elementBindings, `inputs.${slot}`);
-        if (!slotValue) return -1;
-        if (slotValue.list) return slotValue.static.indexOf(elementId);
-        return -1;
-    };
-    return Object.values(elements).reduce((acc, element)=>{
-        if ("root" === element.id) return {
-            ...acc,
-            [element.id]: {
-                id: element.id,
-                label: "Root",
-                image: ""
-            }
-        };
-        const component = components[element.component.name] ?? {
-            label: "",
-            image: null,
-            canDrag: false
-        };
-        const parentId = element.parent.id;
-        const slot = element.parent.slot;
-        return {
-            ...acc,
-            [element.id]: {
-                id: element.id,
-                label: component?.label ?? component?.name ?? "",
-                image: component.image,
-                canDrag: component.canDrag,
-                parent: {
-                    id: parentId,
-                    slot,
-                    index: getIndex(element.id, parentId, slot)
-                }
-            }
-        };
-    }, {});
-}
+import { NavigatorEmptyState } from "./NavigatorEmptyState.js";
+import { Placeholder } from "./Placeholder.js";
+import { ElementActions } from "./ElementActions.js";
+import { flattenElements, getElementNodeData } from "./navigatorUtils.js";
 const Navigator = observer(()=>{
     const editor = useDocumentEditor();
     const [activeElement] = useActiveElement();
@@ -133,10 +68,10 @@ const Navigator = observer(()=>{
         }, /*#__PURE__*/ react.createElement(ElementActions, {
             elementId: node.id
         })));
-    if (Object.keys(elementNodes).length <= 1) return /*#__PURE__*/ react.createElement(InfoMessage, {
-        message: "No elements to display."
-    });
-    return /*#__PURE__*/ react.createElement(Tree, {
+    if (Object.keys(elementNodes).length <= 1) return /*#__PURE__*/ react.createElement(NavigatorEmptyState, null);
+    return /*#__PURE__*/ react.createElement(ScrollArea, {
+        className: "h-full pt-xs"
+    }, /*#__PURE__*/ react.createElement(Tree, {
         key: treeKey,
         autoExpandOnDragOver: false,
         insertDroppableFirst: false,
@@ -147,8 +82,8 @@ const Navigator = observer(()=>{
         defaultOpenNodeIds: activeAncestors,
         dropTargetOffset: 5,
         placeholderRender: (node, { depth })=>/*#__PURE__*/ react.createElement(Placeholder, {
-                depth: depth,
-                node: node
+                node: node,
+                depth: depth
             }),
         onDrop: (newTree, { dragSource })=>{
             if (!dragSource || !dragSource.data) return;
@@ -167,42 +102,8 @@ const Navigator = observer(()=>{
             if (dragSource?.parentId === dropTargetId) return true;
             return false;
         }
-    });
-});
-const Placeholder = (props)=>/*#__PURE__*/ react.createElement("div", {
-        className: "bg-primary",
-        style: {
-            height: 2,
-            zIndex: 999,
-            position: "absolute",
-            right: 0,
-            transform: "translateY(-50%)",
-            top: -2,
-            left: 24 * props.depth
-        }
-    });
-const ElementActions = ({ elementId })=>{
-    const { styles, onChange } = useStyles(elementId);
-    const isVisible = "none" !== styles.display;
-    const unhideElement = ()=>{
-        onChange(({ styles })=>{
-            styles.set("display", "flex");
-        });
-    };
-    if (isVisible) return null;
-    return /*#__PURE__*/ react.createElement("div", {
-        className: "flex"
-    }, /*#__PURE__*/ react.createElement(Tooltip, {
-        trigger: /*#__PURE__*/ react.createElement(Tree.Item.Icon, {
-            size: "sm",
-            className: "cursor-pointer",
-            element: /*#__PURE__*/ react.createElement(ReactComponent, null),
-            label: "This element is hidden.",
-            onClick: unhideElement
-        }),
-        content: "This element is hidden. Click to unhide."
     }));
-};
+});
 export { Navigator };
 
 //# sourceMappingURL=Navigator.js.map

package/BaseEditor/defaultConfig/Toolbar/Navigator/Navigator.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/Navigator/Navigator.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/Navigator/Navigator.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from \"react\";\nimport get from \"lodash/get.js\";\nimport { observer } from \"mobx-react-lite\";\nimport { type NodeDto, Tree, type TreeProps, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as VisibilityNone } from \"@webiny/icons/visibility_off.svg\";\nimport type { Document } from \"@webiny/website-builder-sdk\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport type { EditorState } from \"~/editorSdk/Editor.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\nimport { InfoMessage } from \"~/BaseEditor/defaultConfig/Sidebar/InfoMessage.js\";\nimport { useStyles } from \"~/BaseEditor/hooks/useStyles.js\";\n\n// Node type for the Tree component.\ntype ElementNode = NodeDto<{\n    draggable: boolean;\n    icon: React.ReactNode;\n    parent: {\n        id: string;\n        slot: string;\n        index: number;\n    };\n}>;\n\n// Element data extracted from the Document state.\ntype ElementNodeData = {\n    id: string;\n    label: string;\n    image: string;\n    canDrag: boolean;\n    parent: {\n        id: string;\n        slot: string;\n        index: number;\n    };\n};\n\nfunction flattenElements(elements: Record<string, ElementNodeData>, activeElementId?: string) {\n    const result: ElementNode[] = [];\n    const asArray = Object.values(elements);\n\n    for (const key in elements) {\n        const node = elements[key];\n\n        // Skip root element.\n        if (!node.parent) {\n            continue;\n        }\n\n        result.push({\n            id: node.id,\n            label: node.label,\n            parentId: node.parent.id,\n            active: node.id === activeElementId,\n            droppable: asArray.filter(el => el.parent?.id === node.id).length > 0,\n            data: {\n                parent: node.parent,\n                icon: node.image ? (\n                    <InlineSvg src={node.image} className={\"fill-neutral-strong\"} />\n                ) : (\n                    <></>\n                ),\n                draggable: node.canDrag\n            }\n        });\n    }\n\n    return result;\n}\n\ninterface GetElementNodeDataParams {\n    components: EditorState[\"components\"];\n    elements: Document[\"elements\"];\n    bindings: Document[\"bindings\"];\n}\n\nfunction getElementNodeData({\n    components,\n    elements,\n    bindings\n}: GetElementNodeDataParams): Record<string, ElementNodeData> {\n    const getIndex = (elementId: string, parentId: string, slot: string) => {\n        const elementBindings = bindings[parentId];\n        if (!elementBindings) {\n            return -1;\n        }\n\n        const slotValue = get(elementBindings, `inputs.${slot}`);\n        if (!slotValue) {\n            return -1;\n        }\n\n        if (slotValue.list) {\n            return slotValue.static.indexOf(elementId);\n        }\n\n        return -1;\n    };\n\n    return Object.values(elements).reduce((acc, element) => {\n        if (element.id === \"root\") {\n            return {\n                ...acc,\n                [element.id]: {\n                    id: element.id,\n                    label: \"Root\",\n                    image: \"\"\n                }\n            };\n        }\n\n        const component = components[element.component.name] ?? {\n            label: \"\",\n            image: null,\n            canDrag: false\n        };\n\n        const parentId = element.parent!.id;\n        const slot = element.parent!.slot;\n\n        return {\n            ...acc,\n            [element.id]: {\n                id: element.id,\n                label: component?.label ?? component?.name ?? \"\",\n                image: component.image,\n                canDrag: component.canDrag,\n                parent: {\n                    id: parentId,\n                    slot,\n                    index: getIndex(element.id, parentId, slot)\n                }\n            }\n        };\n    }, {});\n}\n\nexport const Navigator = observer(() => {\n    const editor = useDocumentEditor();\n    const [activeElement] = useActiveElement();\n\n    const document = editor.getDocumentState().read();\n    const elements = document.elements;\n    const bindings = document.bindings;\n    const treeKey = document.id;\n\n    const components = useSelectFromEditor(state => {\n        return state.components;\n    });\n\n    const elementNodes = getElementNodeData({ components, elements, bindings });\n\n    const activeAncestors = useMemo(() => {\n        if (!activeElement) {\n            return [];\n        }\n\n        const ancestors: string[] = [activeElement.id];\n        let parent = elementNodes[activeElement.id].parent;\n        while (parent) {\n            ancestors.push(parent.id);\n            parent = elementNodes[parent.id].parent;\n        }\n        return ancestors.reverse();\n    }, [elementNodes, activeElement]);\n\n    const nodes = useMemo(() => {\n        return flattenElements(elementNodes, activeElement?.id).sort((a, b) => {\n            return a.data!.parent.index - b.data!.parent.index;\n        });\n    }, [elementNodes, activeElement]);\n\n    const highlightElement = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n        e.preventDefault();\n        const nodeId = e.currentTarget.getAttribute(\"data-node-id\");\n\n        if (nodeId) {\n            editor.executeCommand(Commands.HighlightElement, { id: nodeId });\n        }\n    }, []);\n\n    const activateElement = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n        e.preventDefault();\n        const nodeId = e.currentTarget.getAttribute(\"data-node-id\");\n\n        if (nodeId) {\n            editor.executeCommand(Commands.SelectElement, { id: nodeId });\n        }\n    }, []);\n\n    const renderer: TreeProps[\"renderer\"] = node => {\n        return (\n            <Tree.Item.Content\n                data-node-id={node.id}\n                onMouseOver={highlightElement}\n                onClick={activateElement}\n            >\n                <Tree.Item.Icon label={node.label} element={node.icon} size={\"sm\"} />\n                {node.label}\n                <div className={\"flex w-full justify-end\"}>\n                    <ElementActions elementId={node.id} />\n                </div>\n            </Tree.Item.Content>\n        );\n    };\n\n    if (Object.keys(elementNodes).length <= 1) {\n        return <InfoMessage message={\"No elements to display.\"} />;\n    }\n\n    return (\n        <Tree\n            key={treeKey}\n            autoExpandOnDragOver={false}\n            insertDroppableFirst={false}\n            nodes={nodes}\n            rootId={\"root\"}\n            renderer={renderer}\n            sort={false}\n            defaultOpenNodeIds={activeAncestors}\n            dropTargetOffset={5}\n            placeholderRender={(node, { depth }) => {\n                return <Placeholder depth={depth} node={node} />;\n            }}\n            onDrop={(newTree, { dragSource }) => {\n                if (!dragSource || !dragSource.data) {\n                    return;\n                }\n\n                const parent = dragSource.data.parent;\n\n                const sameLevelNodes = newTree.filter(n => n.parentId === dragSource.parentId);\n                const newIndex = sameLevelNodes.findIndex(n => n.id === dragSource.id);\n                editor.executeCommand(Commands.MoveElement, {\n                    elementId: dragSource.id,\n                    parentId: parent.id,\n                    slot: parent.slot,\n                    index: newIndex\n                });\n            }}\n            canDrag={node => node.data?.draggable ?? true}\n            canDrop={(_, { dragSource, dropTargetId }) => {\n                // Only allow dropping within the same parent (for now).\n                if (dragSource?.parentId === dropTargetId) {\n                    return true;\n                }\n                return false;\n            }}\n        />\n    );\n});\n\ntype PlaceholderProps = {\n    node: any;\n    depth: number;\n};\n\nconst Placeholder = (props: PlaceholderProps) => (\n    <div\n        className={\"bg-primary\"}\n        style={{\n            height: 2,\n            zIndex: 999,\n            position: \"absolute\",\n            right: 0,\n            transform: \"translateY(-50%)\",\n            top: -2,\n            left: props.depth * 24\n        }}\n    ></div>\n);\n\nconst ElementActions = ({ elementId }: { elementId: string }) => {\n    const { styles, onChange } = useStyles(elementId);\n\n    const isVisible = styles.display !== \"none\";\n\n    const unhideElement = () => {\n        onChange(({ styles }) => {\n            styles.set(\"display\", \"flex\");\n        });\n    };\n\n    if (isVisible) {\n        return null;\n    }\n\n    return (\n        <div className={\"flex\"}>\n            <Tooltip\n                trigger={\n                    <Tree.Item.Icon\n                        size={\"sm\"}\n                        className={\"cursor-pointer\"}\n                        element={<VisibilityNone />}\n                        label={\"This element is hidden.\"}\n                        onClick={unhideElement}\n                    />\n                }\n                content={\"This element is hidden. Click to unhide.\"}\n            />\n        </div>\n    );\n};\n"],"names":["flattenElements","elements","activeElementId","result","asArray","Object","key","node","el","InlineSvg","getElementNodeData","components","bindings","getIndex","elementId","parentId","slot","elementBindings","slotValue","get","acc","element","component","Navigator","observer","editor","useDocumentEditor","activeElement","useActiveElement","document","treeKey","useSelectFromEditor","state","elementNodes","activeAncestors","useMemo","ancestors","parent","nodes","a","b","highlightElement","useCallback","e","nodeId","Commands","activateElement","renderer","Tree","ElementActions","InfoMessage","depth","Placeholder","newTree","dragSource","sameLevelNodes","n","newIndex","_","dropTargetId","props","styles","onChange","useStyles","isVisible","unhideElement","Tooltip","VisibilityNone"],"mappings":";;;;;;;;;;;;AAuCA,SAASA,gBAAgBC,QAAyC,EAAEC,eAAwB;IACxF,MAAMC,SAAwB,EAAE;IAChC,MAAMC,UAAUC,OAAO,MAAM,CAACJ;IAE9B,IAAK,MAAMK,OAAOL,SAAU;QACxB,MAAMM,OAAON,QAAQ,CAACK,IAAI;QAG1B,IAAKC,KAAK,MAAM,EAIhBJ,OAAO,IAAI,CAAC;YACR,IAAII,KAAK,EAAE;YACX,OAAOA,KAAK,KAAK;YACjB,UAAUA,KAAK,MAAM,CAAC,EAAE;YACxB,QAAQA,KAAK,EAAE,KAAKL;YACpB,WAAWE,QAAQ,MAAM,CAACI,CAAAA,KAAMA,GAAG,MAAM,EAAE,OAAOD,KAAK,EAAE,EAAE,MAAM,GAAG;YACpE,MAAM;gBACF,QAAQA,KAAK,MAAM;gBACnB,MAAMA,KAAK,KAAK,GAAG,WAAH,GACZ,oBAACE,WAASA;oBAAC,KAAKF,KAAK,KAAK;oBAAE,WAAW;mCAEvC;gBAEJ,WAAWA,KAAK,OAAO;YAC3B;QACJ;IACJ;IAEA,OAAOJ;AACX;AAQA,SAASO,mBAAmB,EACxBC,UAAU,EACVV,QAAQ,EACRW,QAAQ,EACe;IACvB,MAAMC,WAAW,CAACC,WAAmBC,UAAkBC;QACnD,MAAMC,kBAAkBL,QAAQ,CAACG,SAAS;QAC1C,IAAI,CAACE,iBACD,OAAO;QAGX,MAAMC,YAAYC,IAAIF,iBAAiB,CAAC,OAAO,EAAED,MAAM;QACvD,IAAI,CAACE,WACD,OAAO;QAGX,IAAIA,UAAU,IAAI,EACd,OAAOA,UAAU,MAAM,CAAC,OAAO,CAACJ;QAGpC,OAAO;IACX;IAEA,OAAOT,OAAO,MAAM,CAACJ,UAAU,MAAM,CAAC,CAACmB,KAAKC;QACxC,IAAIA,AAAe,WAAfA,QAAQ,EAAE,EACV,OAAO;YACH,GAAGD,GAAG;YACN,CAACC,QAAQ,EAAE,CAAC,EAAE;gBACV,IAAIA,QAAQ,EAAE;gBACd,OAAO;gBACP,OAAO;YACX;QACJ;QAGJ,MAAMC,YAAYX,UAAU,CAACU,QAAQ,SAAS,CAAC,IAAI,CAAC,IAAI;YACpD,OAAO;YACP,OAAO;YACP,SAAS;QACb;QAEA,MAAMN,WAAWM,QAAQ,MAAM,CAAE,EAAE;QACnC,MAAML,OAAOK,QAAQ,MAAM,CAAE,IAAI;QAEjC,OAAO;YACH,GAAGD,GAAG;YACN,CAACC,QAAQ,EAAE,CAAC,EAAE;gBACV,IAAIA,QAAQ,EAAE;gBACd,OAAOC,WAAW,SAASA,WAAW,QAAQ;gBAC9C,OAAOA,UAAU,KAAK;gBACtB,SAASA,UAAU,OAAO;gBAC1B,QAAQ;oBACJ,IAAIP;oBACJC;oBACA,OAAOH,SAASQ,QAAQ,EAAE,EAAEN,UAAUC;gBAC1C;YACJ;QACJ;IACJ,GAAG,CAAC;AACR;AAEO,MAAMO,YAAYC,SAAS;IAC9B,MAAMC,SAASC;IACf,MAAM,CAACC,cAAc,GAAGC;IAExB,MAAMC,WAAWJ,OAAO,gBAAgB,GAAG,IAAI;IAC/C,MAAMxB,WAAW4B,SAAS,QAAQ;IAClC,MAAMjB,WAAWiB,SAAS,QAAQ;IAClC,MAAMC,UAAUD,SAAS,EAAE;IAE3B,MAAMlB,aAAaoB,oBAAoBC,CAAAA,QAC5BA,MAAM,UAAU;IAG3B,MAAMC,eAAevB,mBAAmB;QAAEC;QAAYV;QAAUW;IAAS;IAEzE,MAAMsB,kBAAkBC,QAAQ;QAC5B,IAAI,CAACR,eACD,OAAO,EAAE;QAGb,MAAMS,YAAsB;YAACT,cAAc,EAAE;SAAC;QAC9C,IAAIU,SAASJ,YAAY,CAACN,cAAc,EAAE,CAAC,CAAC,MAAM;QAClD,MAAOU,OAAQ;YACXD,UAAU,IAAI,CAACC,OAAO,EAAE;YACxBA,SAASJ,YAAY,CAACI,OAAO,EAAE,CAAC,CAAC,MAAM;QAC3C;QACA,OAAOD,UAAU,OAAO;IAC5B,GAAG;QAACH;QAAcN;KAAc;IAEhC,MAAMW,QAAQH,QAAQ,IACXnC,gBAAgBiC,cAAcN,eAAe,IAAI,IAAI,CAAC,CAACY,GAAGC,IACtDD,EAAE,IAAI,CAAE,MAAM,CAAC,KAAK,GAAGC,EAAE,IAAI,CAAE,MAAM,CAAC,KAAK,GAEvD;QAACP;QAAcN;KAAc;IAEhC,MAAMc,mBAAmBC,YAAY,CAACC;QAClCA,EAAE,cAAc;QAChB,MAAMC,SAASD,EAAE,aAAa,CAAC,YAAY,CAAC;QAE5C,IAAIC,QACAnB,OAAO,cAAc,CAACoB,SAAS,gBAAgB,EAAE;YAAE,IAAID;QAAO;IAEtE,GAAG,EAAE;IAEL,MAAME,kBAAkBJ,YAAY,CAACC;QACjCA,EAAE,cAAc;QAChB,MAAMC,SAASD,EAAE,aAAa,CAAC,YAAY,CAAC;QAE5C,IAAIC,QACAnB,OAAO,cAAc,CAACoB,SAAS,aAAa,EAAE;YAAE,IAAID;QAAO;IAEnE,GAAG,EAAE;IAEL,MAAMG,WAAkCxC,CAAAA,OAC7B,WAAP,GACI,oBAACyC,KAAK,IAAI,CAAC,OAAO;YACd,gBAAczC,KAAK,EAAE;YACrB,aAAakC;YACb,SAASK;yBAET,oBAACE,KAAK,IAAI,CAAC,IAAI;YAAC,OAAOzC,KAAK,KAAK;YAAE,SAASA,KAAK,IAAI;YAAE,MAAM;YAC5DA,KAAK,KAAK,gBACX,oBAAC;YAAI,WAAW;yBACZ,oBAAC0C,gBAAcA;YAAC,WAAW1C,KAAK,EAAE;;IAMlD,IAAIF,OAAO,IAAI,CAAC4B,cAAc,MAAM,IAAI,GACpC,OAAO,WAAP,GAAO,oBAACiB,aAAWA;QAAC,SAAS;;IAGjC,OAAO,WAAP,GACI,oBAACF,MAAIA;QACD,KAAKlB;QACL,sBAAsB;QACtB,sBAAsB;QACtB,OAAOQ;QACP,QAAQ;QACR,UAAUS;QACV,MAAM;QACN,oBAAoBb;QACpB,kBAAkB;QAClB,mBAAmB,CAAC3B,MAAM,EAAE4C,KAAK,EAAE,GACxB,WAAP,GAAO,oBAACC,aAAWA;gBAAC,OAAOD;gBAAO,MAAM5C;;QAE5C,QAAQ,CAAC8C,SAAS,EAAEC,UAAU,EAAE;YAC5B,IAAI,CAACA,cAAc,CAACA,WAAW,IAAI,EAC/B;YAGJ,MAAMjB,SAASiB,WAAW,IAAI,CAAC,MAAM;YAErC,MAAMC,iBAAiBF,QAAQ,MAAM,CAACG,CAAAA,IAAKA,EAAE,QAAQ,KAAKF,WAAW,QAAQ;YAC7E,MAAMG,WAAWF,eAAe,SAAS,CAACC,CAAAA,IAAKA,EAAE,EAAE,KAAKF,WAAW,EAAE;YACrE7B,OAAO,cAAc,CAACoB,SAAS,WAAW,EAAE;gBACxC,WAAWS,WAAW,EAAE;gBACxB,UAAUjB,OAAO,EAAE;gBACnB,MAAMA,OAAO,IAAI;gBACjB,OAAOoB;YACX;QACJ;QACA,SAASlD,CAAAA,OAAQA,KAAK,IAAI,EAAE,aAAa;QACzC,SAAS,CAACmD,GAAG,EAAEJ,UAAU,EAAEK,YAAY,EAAE;YAErC,IAAIL,YAAY,aAAaK,cACzB,OAAO;YAEX,OAAO;QACX;;AAGZ;AAOA,MAAMP,cAAc,CAACQ,QAAAA,WAAAA,GACjB,oBAAC;QACG,WAAW;QACX,OAAO;YACH,QAAQ;YACR,QAAQ;YACR,UAAU;YACV,OAAO;YACP,WAAW;YACX,KAAK;YACL,MAAMA,AAAc,KAAdA,MAAM,KAAK;QACrB;;AAIR,MAAMX,iBAAiB,CAAC,EAAEnC,SAAS,EAAyB;IACxD,MAAM,EAAE+C,MAAM,EAAEC,QAAQ,EAAE,GAAGC,UAAUjD;IAEvC,MAAMkD,YAAYH,AAAmB,WAAnBA,OAAO,OAAO;IAEhC,MAAMI,gBAAgB;QAClBH,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,WAAW;QAC1B;IACJ;IAEA,IAAIG,WACA,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACE,SAAOA;QACJ,uBACI,oBAAClB,KAAK,IAAI,CAAC,IAAI;YACX,MAAM;YACN,WAAW;YACX,uBAAS,oBAACmB,gBAAcA;YACxB,OAAO;YACP,SAASF;;QAGjB,SAAS;;AAIzB"}
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/Navigator/Navigator.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/Navigator/Navigator.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { type TreeProps, Tree, ScrollArea } from \"@webiny/admin-ui\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport { NavigatorEmptyState } from \"./NavigatorEmptyState.js\";\nimport { Placeholder } from \"./Placeholder.js\";\nimport { ElementActions } from \"./ElementActions.js\";\nimport { flattenElements, getElementNodeData } from \"./navigatorUtils.js\";\n\nexport const Navigator = observer(() => {\n    const editor = useDocumentEditor();\n    const [activeElement] = useActiveElement();\n\n    const document = editor.getDocumentState().read();\n    const elements = document.elements;\n    const bindings = document.bindings;\n    const treeKey = document.id;\n\n    const components = useSelectFromEditor(state => state.components);\n\n    const elementNodes = getElementNodeData({ components, elements, bindings });\n\n    const activeAncestors = useMemo(() => {\n        if (!activeElement) {\n            return [];\n        }\n        const ancestors: string[] = [activeElement.id];\n        let parent = elementNodes[activeElement.id].parent;\n        while (parent) {\n            ancestors.push(parent.id);\n            parent = elementNodes[parent.id].parent;\n        }\n        return ancestors.reverse();\n    }, [elementNodes, activeElement]);\n\n    const nodes = useMemo(() => {\n        return flattenElements(elementNodes, activeElement?.id).sort((a, b) => {\n            return a.data!.parent.index - b.data!.parent.index;\n        });\n    }, [elementNodes, activeElement]);\n\n    const highlightElement = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n        e.preventDefault();\n        const nodeId = e.currentTarget.getAttribute(\"data-node-id\");\n        if (nodeId) {\n            editor.executeCommand(Commands.HighlightElement, { id: nodeId });\n        }\n    }, []);\n\n    const activateElement = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n        e.preventDefault();\n        const nodeId = e.currentTarget.getAttribute(\"data-node-id\");\n        if (nodeId) {\n            editor.executeCommand(Commands.SelectElement, { id: nodeId });\n        }\n    }, []);\n\n    const renderer: TreeProps[\"renderer\"] = node => (\n        <Tree.Item.Content\n            data-node-id={node.id}\n            onMouseOver={highlightElement}\n            onClick={activateElement}\n        >\n            <Tree.Item.Icon label={node.label} element={node.icon} size={\"sm\"} />\n            {node.label}\n            <div className={\"flex w-full justify-end\"}>\n                <ElementActions elementId={node.id} />\n            </div>\n        </Tree.Item.Content>\n    );\n\n    if (Object.keys(elementNodes).length <= 1) {\n        return <NavigatorEmptyState />;\n    }\n\n    return (\n        <ScrollArea className={\"h-full pt-xs\"}>\n            <Tree\n                key={treeKey}\n                autoExpandOnDragOver={false}\n                insertDroppableFirst={false}\n                nodes={nodes}\n                rootId={\"root\"}\n                renderer={renderer}\n                sort={false}\n                defaultOpenNodeIds={activeAncestors}\n                dropTargetOffset={5}\n                placeholderRender={(node, { depth }) => <Placeholder node={node} depth={depth} />}\n                onDrop={(newTree, { dragSource }) => {\n                    if (!dragSource || !dragSource.data) {\n                        return;\n                    }\n                    const parent = dragSource.data.parent;\n                    const sameLevelNodes = newTree.filter(n => n.parentId === dragSource.parentId);\n                    const newIndex = sameLevelNodes.findIndex(n => n.id === dragSource.id);\n                    editor.executeCommand(Commands.MoveElement, {\n                        elementId: dragSource.id,\n                        parentId: parent.id,\n                        slot: parent.slot,\n                        index: newIndex\n                    });\n                }}\n                canDrag={node => node.data?.draggable ?? true}\n                canDrop={(_, { dragSource, dropTargetId }) => {\n                    if (dragSource?.parentId === dropTargetId) {\n                        return true;\n                    }\n                    return false;\n                }}\n            />\n        </ScrollArea>\n    );\n});\n"],"names":["Navigator","observer","editor","useDocumentEditor","activeElement","useActiveElement","document","elements","bindings","treeKey","components","useSelectFromEditor","state","elementNodes","getElementNodeData","activeAncestors","useMemo","ancestors","parent","nodes","flattenElements","a","b","highlightElement","useCallback","e","nodeId","Commands","activateElement","renderer","node","Tree","ElementActions","Object","NavigatorEmptyState","ScrollArea","depth","Placeholder","newTree","dragSource","sameLevelNodes","n","newIndex","_","dropTargetId"],"mappings":"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"}

package/BaseEditor/defaultConfig/Toolbar/Navigator/NavigatorEmptyState.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const NavigatorEmptyState: () => React.JSX.Element;

package/BaseEditor/defaultConfig/Toolbar/Navigator/NavigatorEmptyState.js

@@ -0,0 +1,20 @@
+import react from "react";
+import { Button, Text, useSegmentedTabs } from "@webiny/admin-ui";
+import { LayoutIllustration } from "./LayoutIllustration.js";
+const NavigatorEmptyState = ()=>{
+    const { setActiveTab } = useSegmentedTabs();
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col items-center gap-md px-md text-center mt-[200px]"
+    }, /*#__PURE__*/ react.createElement(LayoutIllustration, null), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "text-neutral-strong"
+    }, "You do not have any items in your layout. Add your first item in Insert panel."), /*#__PURE__*/ react.createElement(Button, {
+        variant: "secondary",
+        text: "Add item",
+        size: "sm",
+        onClick: ()=>setActiveTab("insert")
+    }));
+};
+export { NavigatorEmptyState };
+
+//# sourceMappingURL=NavigatorEmptyState.js.map

package/BaseEditor/defaultConfig/Toolbar/Navigator/NavigatorEmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/Navigator/NavigatorEmptyState.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/Navigator/NavigatorEmptyState.tsx"],"sourcesContent":["import React from \"react\";\nimport { Text, Button, useSegmentedTabs } from \"@webiny/admin-ui\";\nimport { LayoutIllustration } from \"./LayoutIllustration.js\";\n\nexport const NavigatorEmptyState = () => {\n    const { setActiveTab } = useSegmentedTabs();\n\n    return (\n        <div className={\"flex flex-col items-center gap-md px-md text-center mt-[200px]\"}>\n            <LayoutIllustration />\n            <Text size={\"sm\"} className={\"text-neutral-strong\"}>\n                {\"You do not have any items in your layout. Add your first item in Insert panel.\"}\n            </Text>\n            <Button\n                variant={\"secondary\"}\n                text={\"Add item\"}\n                size={\"sm\"}\n                onClick={() => setActiveTab(\"insert\")}\n            />\n        </div>\n    );\n};\n"],"names":["NavigatorEmptyState","setActiveTab","useSegmentedTabs","LayoutIllustration","Text","Button"],"mappings":";;;AAIO,MAAMA,sBAAsB;IAC/B,MAAM,EAAEC,YAAY,EAAE,GAAGC;IAEzB,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,oBAAkBA,OAAAA,WAAAA,GACnB,oBAACC,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxB,iGAEL,oBAACC,QAAMA;QACH,SAAS;QACT,MAAM;QACN,MAAM;QACN,SAAS,IAAMJ,aAAa;;AAI5C"}

package/BaseEditor/defaultConfig/Toolbar/Navigator/NavigatorTab.js

@@ -1,17 +1,16 @@
 import react from "react";
-import { Icon, Tabs } from "@webiny/admin-ui";
+import { Icon } from "@webiny/admin-ui";
 import { ReactComponent } from "@webiny/icons/account_tree.svg";
-import { ScrollableContainer } from "../../../config/Sidebar/ScrollableContainer.js";
+import { Toolbar } from "../../../config/Toolbar/Toolbar.js";
 import { Navigator } from "./Navigator.js";
-const NavigatorTab = ()=>/*#__PURE__*/ react.createElement(Tabs.Tab, {
-        value: "navigator",
-        trigger: "Navigator",
-        spacing: "sm",
+const NavigatorTab = ()=>/*#__PURE__*/ react.createElement(Toolbar.Tab, {
+        name: "navigator",
+        label: "Navigator",
         icon: /*#__PURE__*/ react.createElement(Icon, {
             icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
             label: "Navigator"
         }),
-        content: /*#__PURE__*/ react.createElement(ScrollableContainer, null, /*#__PURE__*/ react.createElement(Navigator, null))
+        element: /*#__PURE__*/ react.createElement(Navigator, null)
     });
 export { NavigatorTab };
 

package/BaseEditor/defaultConfig/Toolbar/Navigator/NavigatorTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/Navigator/NavigatorTab.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/Navigator/NavigatorTab.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, Tabs } from \"@webiny/admin-ui\";\nimport { ReactComponent as TreeIcon } from \"@webiny/icons/account_tree.svg\";\nimport { ScrollableContainer } from \"~/BaseEditor/config/Sidebar/ScrollableContainer.js\";\nimport { Navigator } from \"./Navigator.js\";\n\nexport const NavigatorTab = () => {\n    return (\n        <Tabs.Tab\n            value=\"navigator\"\n            trigger={\"Navigator\"}\n            spacing={\"sm\"}\n            icon={<Icon icon={<TreeIcon />} label={\"Navigator\"} />}\n            content={\n                <ScrollableContainer>\n                    <Navigator />\n                </ScrollableContainer>\n            }\n        />\n    );\n};\n"],"names":["NavigatorTab","Tabs","Icon","TreeIcon","ScrollableContainer","Navigator"],"mappings":";;;;;AAMO,MAAMA,eAAe,IACjB,WAAP,GACI,oBAACC,KAAK,GAAG;QACL,OAAM;QACN,SAAS;QACT,SAAS;QACT,oBAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,OAAO;;QACvC,uBACI,oBAACC,qBAAmBA,MAAAA,WAAAA,GAChB,oBAACC,WAASA"}
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/Navigator/NavigatorTab.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/Navigator/NavigatorTab.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as TreeIcon } from \"@webiny/icons/account_tree.svg\";\nimport { Toolbar } from \"~/BaseEditor/config/Toolbar/Toolbar.js\";\nimport { Navigator } from \"./Navigator.js\";\n\nexport const NavigatorTab = () => (\n    <Toolbar.Tab\n        name={\"navigator\"}\n        label={\"Navigator\"}\n        icon={<Icon icon={<TreeIcon />} label={\"Navigator\"} />}\n        element={<Navigator />}\n    />\n);\n"],"names":["NavigatorTab","Toolbar","Icon","TreeIcon","Navigator"],"mappings":";;;;;AAMO,MAAMA,eAAe,kBACxB,oBAACC,QAAQ,GAAG;QACR,MAAM;QACN,OAAO;QACP,oBAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,OAAO;;QACvC,uBAAS,oBAACC,WAASA"}

package/BaseEditor/defaultConfig/Toolbar/Navigator/Placeholder.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface PlaceholderProps {
+    node: any;
+    depth: number;
+}
+export declare const Placeholder: ({ depth }: PlaceholderProps) => React.JSX.Element;
+export {};

package/BaseEditor/defaultConfig/Toolbar/Navigator/Placeholder.js

@@ -0,0 +1,16 @@
+import react from "react";
+const Placeholder = ({ depth })=>/*#__PURE__*/ react.createElement("div", {
+        className: "bg-primary",
+        style: {
+            height: 2,
+            zIndex: 999,
+            position: "absolute",
+            right: 0,
+            transform: "translateY(-50%)",
+            top: -2,
+            left: 24 * depth
+        }
+    });
+export { Placeholder };
+
+//# sourceMappingURL=Placeholder.js.map

package/BaseEditor/defaultConfig/Toolbar/Navigator/Placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/Navigator/Placeholder.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/Navigator/Placeholder.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface PlaceholderProps {\n    node: any;\n    depth: number;\n}\n\nexport const Placeholder = ({ depth }: PlaceholderProps) => (\n    <div\n        className={\"bg-primary\"}\n        style={{\n            height: 2,\n            zIndex: 999,\n            position: \"absolute\",\n            right: 0,\n            transform: \"translateY(-50%)\",\n            top: -2,\n            left: depth * 24\n        }}\n    />\n);\n"],"names":["Placeholder","depth"],"mappings":";AAOO,MAAMA,cAAc,CAAC,EAAEC,KAAK,EAAoB,iBACnD,oBAAC;QACG,WAAW;QACX,OAAO;YACH,QAAQ;YACR,QAAQ;YACR,UAAU;YACV,OAAO;YACP,WAAW;YACX,KAAK;YACL,MAAMA,AAAQ,KAARA;QACV"}

package/BaseEditor/defaultConfig/Toolbar/Navigator/navigatorUtils.d.ts

@@ -0,0 +1,32 @@
+import type { NodeDto } from "@webiny/admin-ui";
+import type { Document } from "@webiny/website-builder-sdk";
+import type { EditorState } from "../../../../editorSdk/Editor.js";
+import React from "react";
+export type ElementNode = NodeDto<{
+    draggable: boolean;
+    icon: React.ReactNode;
+    parent: {
+        id: string;
+        slot: string;
+        index: number;
+    };
+}>;
+export type ElementNodeData = {
+    id: string;
+    label: string;
+    image: string;
+    canDrag: boolean;
+    parent: {
+        id: string;
+        slot: string;
+        index: number;
+    };
+};
+export declare function flattenElements(elements: Record<string, ElementNodeData>, activeElementId?: string): ElementNode[];
+interface GetElementNodeDataParams {
+    components: EditorState["components"];
+    elements: Document["elements"];
+    bindings: Document["bindings"];
+}
+export declare function getElementNodeData({ components, elements, bindings }: GetElementNodeDataParams): Record<string, ElementNodeData>;
+export {};

package/BaseEditor/defaultConfig/Toolbar/Navigator/navigatorUtils.js

@@ -0,0 +1,70 @@
+import { InlineSvg } from "../InsertElements/InlineSvg.js";
+import react from "react";
+import get from "lodash/get.js";
+function flattenElements(elements, activeElementId) {
+    const result = [];
+    const asArray = Object.values(elements);
+    for(const key in elements){
+        const node = elements[key];
+        if (node.parent) result.push({
+            id: node.id,
+            label: node.label,
+            parentId: node.parent.id,
+            active: node.id === activeElementId,
+            droppable: asArray.filter((el)=>el.parent?.id === node.id).length > 0,
+            data: {
+                parent: node.parent,
+                icon: node.image ? /*#__PURE__*/ react.createElement(InlineSvg, {
+                    src: node.image,
+                    className: "fill-neutral-strong"
+                }) : /*#__PURE__*/ react.createElement(react.Fragment, null),
+                draggable: node.canDrag
+            }
+        });
+    }
+    return result;
+}
+function getElementNodeData({ components, elements, bindings }) {
+    const getIndex = (elementId, parentId, slot)=>{
+        const elementBindings = bindings[parentId];
+        if (!elementBindings) return -1;
+        const slotValue = get(elementBindings, `inputs.${slot}`);
+        if (!slotValue) return -1;
+        if (slotValue.list) return slotValue.static.indexOf(elementId);
+        return -1;
+    };
+    return Object.values(elements).reduce((acc, element)=>{
+        if ("root" === element.id) return {
+            ...acc,
+            [element.id]: {
+                id: element.id,
+                label: "Root",
+                image: ""
+            }
+        };
+        const component = components[element.component.name] ?? {
+            label: "",
+            image: null,
+            canDrag: false
+        };
+        const parentId = element.parent.id;
+        const slot = element.parent.slot;
+        return {
+            ...acc,
+            [element.id]: {
+                id: element.id,
+                label: component?.label ?? component?.name ?? "",
+                image: component.image,
+                canDrag: component.canDrag,
+                parent: {
+                    id: parentId,
+                    slot,
+                    index: getIndex(element.id, parentId, slot)
+                }
+            }
+        };
+    }, {});
+}
+export { flattenElements, getElementNodeData };
+
+//# sourceMappingURL=navigatorUtils.js.map

package/BaseEditor/defaultConfig/Toolbar/Navigator/navigatorUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/Navigator/navigatorUtils.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/Navigator/navigatorUtils.tsx"],"sourcesContent":["import type { NodeDto } from \"@webiny/admin-ui\";\nimport type { Document } from \"@webiny/website-builder-sdk\";\nimport type { EditorState } from \"~/editorSdk/Editor.js\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\nimport React from \"react\";\nimport get from \"lodash/get.js\";\n\nexport type ElementNode = NodeDto<{\n    draggable: boolean;\n    icon: React.ReactNode;\n    parent: {\n        id: string;\n        slot: string;\n        index: number;\n    };\n}>;\n\nexport type ElementNodeData = {\n    id: string;\n    label: string;\n    image: string;\n    canDrag: boolean;\n    parent: {\n        id: string;\n        slot: string;\n        index: number;\n    };\n};\n\nexport function flattenElements(\n    elements: Record<string, ElementNodeData>,\n    activeElementId?: string\n): ElementNode[] {\n    const result: ElementNode[] = [];\n    const asArray = Object.values(elements);\n\n    for (const key in elements) {\n        const node = elements[key];\n\n        if (!node.parent) {\n            continue;\n        }\n\n        result.push({\n            id: node.id,\n            label: node.label,\n            parentId: node.parent.id,\n            active: node.id === activeElementId,\n            droppable: asArray.filter(el => el.parent?.id === node.id).length > 0,\n            data: {\n                parent: node.parent,\n                icon: node.image ? (\n                    <InlineSvg src={node.image} className={\"fill-neutral-strong\"} />\n                ) : (\n                    <></>\n                ),\n                draggable: node.canDrag\n            }\n        });\n    }\n\n    return result;\n}\n\ninterface GetElementNodeDataParams {\n    components: EditorState[\"components\"];\n    elements: Document[\"elements\"];\n    bindings: Document[\"bindings\"];\n}\n\nexport function getElementNodeData({\n    components,\n    elements,\n    bindings\n}: GetElementNodeDataParams): Record<string, ElementNodeData> {\n    const getIndex = (elementId: string, parentId: string, slot: string) => {\n        const elementBindings = bindings[parentId];\n        if (!elementBindings) {\n            return -1;\n        }\n\n        const slotValue = get(elementBindings, `inputs.${slot}`);\n        if (!slotValue) {\n            return -1;\n        }\n\n        if (slotValue.list) {\n            return slotValue.static.indexOf(elementId);\n        }\n\n        return -1;\n    };\n\n    return Object.values(elements).reduce((acc, element) => {\n        if (element.id === \"root\") {\n            return { ...acc, [element.id]: { id: element.id, label: \"Root\", image: \"\" } };\n        }\n\n        const component = components[element.component.name] ?? {\n            label: \"\",\n            image: null,\n            canDrag: false\n        };\n\n        const parentId = element.parent!.id;\n        const slot = element.parent!.slot;\n\n        return {\n            ...acc,\n            [element.id]: {\n                id: element.id,\n                label: component?.label ?? component?.name ?? \"\",\n                image: component.image,\n                canDrag: component.canDrag,\n                parent: {\n                    id: parentId,\n                    slot,\n                    index: getIndex(element.id, parentId, slot)\n                }\n            }\n        };\n    }, {});\n}\n"],"names":["flattenElements","elements","activeElementId","result","asArray","Object","key","node","el","InlineSvg","getElementNodeData","components","bindings","getIndex","elementId","parentId","slot","elementBindings","slotValue","get","acc","element","component"],"mappings":";;;AA6BO,SAASA,gBACZC,QAAyC,EACzCC,eAAwB;IAExB,MAAMC,SAAwB,EAAE;IAChC,MAAMC,UAAUC,OAAO,MAAM,CAACJ;IAE9B,IAAK,MAAMK,OAAOL,SAAU;QACxB,MAAMM,OAAON,QAAQ,CAACK,IAAI;QAE1B,IAAKC,KAAK,MAAM,EAIhBJ,OAAO,IAAI,CAAC;YACR,IAAII,KAAK,EAAE;YACX,OAAOA,KAAK,KAAK;YACjB,UAAUA,KAAK,MAAM,CAAC,EAAE;YACxB,QAAQA,KAAK,EAAE,KAAKL;YACpB,WAAWE,QAAQ,MAAM,CAACI,CAAAA,KAAMA,GAAG,MAAM,EAAE,OAAOD,KAAK,EAAE,EAAE,MAAM,GAAG;YACpE,MAAM;gBACF,QAAQA,KAAK,MAAM;gBACnB,MAAMA,KAAK,KAAK,GAAG,WAAH,GACZ,oBAACE,WAASA;oBAAC,KAAKF,KAAK,KAAK;oBAAE,WAAW;mCAEvC;gBAEJ,WAAWA,KAAK,OAAO;YAC3B;QACJ;IACJ;IAEA,OAAOJ;AACX;AAQO,SAASO,mBAAmB,EAC/BC,UAAU,EACVV,QAAQ,EACRW,QAAQ,EACe;IACvB,MAAMC,WAAW,CAACC,WAAmBC,UAAkBC;QACnD,MAAMC,kBAAkBL,QAAQ,CAACG,SAAS;QAC1C,IAAI,CAACE,iBACD,OAAO;QAGX,MAAMC,YAAYC,IAAIF,iBAAiB,CAAC,OAAO,EAAED,MAAM;QACvD,IAAI,CAACE,WACD,OAAO;QAGX,IAAIA,UAAU,IAAI,EACd,OAAOA,UAAU,MAAM,CAAC,OAAO,CAACJ;QAGpC,OAAO;IACX;IAEA,OAAOT,OAAO,MAAM,CAACJ,UAAU,MAAM,CAAC,CAACmB,KAAKC;QACxC,IAAIA,AAAe,WAAfA,QAAQ,EAAE,EACV,OAAO;YAAE,GAAGD,GAAG;YAAE,CAACC,QAAQ,EAAE,CAAC,EAAE;gBAAE,IAAIA,QAAQ,EAAE;gBAAE,OAAO;gBAAQ,OAAO;YAAG;QAAE;QAGhF,MAAMC,YAAYX,UAAU,CAACU,QAAQ,SAAS,CAAC,IAAI,CAAC,IAAI;YACpD,OAAO;YACP,OAAO;YACP,SAAS;QACb;QAEA,MAAMN,WAAWM,QAAQ,MAAM,CAAE,EAAE;QACnC,MAAML,OAAOK,QAAQ,MAAM,CAAE,IAAI;QAEjC,OAAO;YACH,GAAGD,GAAG;YACN,CAACC,QAAQ,EAAE,CAAC,EAAE;gBACV,IAAIA,QAAQ,EAAE;gBACd,OAAOC,WAAW,SAASA,WAAW,QAAQ;gBAC9C,OAAOA,UAAU,KAAK;gBACtB,SAASA,UAAU,OAAO;gBAC1B,QAAQ;oBACJ,IAAIP;oBACJC;oBACA,OAAOH,SAASQ,QAAQ,EAAE,EAAEN,UAAUC;gBAC1C;YACJ;QACJ;IACJ,GAAG,CAAC;AACR"}

package/BaseEditor/hooks/useCreateElement.d.ts

@@ -1,5 +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;
+    createElement: (payload: CommandPayload<typeof Commands.CreateElement>) => Promise<void>;
 };

package/BaseEditor/hooks/useCreateElement.js

@@ -3,9 +3,7 @@ import { useDocumentEditor } from "../../DocumentEditor/index.js";
 import { Commands } from "../commands.js";
 function useCreateElement() {
     const editor = useDocumentEditor();
-    const createElement = useCallback((payload)=>{
-        editor.executeCommand(Commands.CreateElement, payload);
-    }, [
+    const createElement = useCallback((payload)=>editor.executeCommand(Commands.CreateElement, payload), [
         editor
     ]);
     return {

package/BaseEditor/hooks/useCreateElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/hooks/useCreateElement.js","sources":["../../../src/BaseEditor/hooks/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"],"names":["useCreateElement","editor","useDocumentEditor","createElement","useCallback","payload","Commands"],"mappings":";;;AAKO,SAASA;IACZ,MAAMC,SAASC;IAEf,MAAMC,gBAAgBC,YAClB,CAACC;QACGJ,OAAO,cAAc,CAACK,SAAS,aAAa,EAAED;IAClD,GACA;QAACJ;KAAO;IAGZ,OAAO;QAAEE;IAAc;AAC3B"}
+{"version":3,"file":"BaseEditor/hooks/useCreateElement.js","sources":["../../../src/BaseEditor/hooks/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            return editor.executeCommand(Commands.CreateElement, payload);\n        },\n        [editor]\n    );\n\n    return { createElement };\n}\n"],"names":["useCreateElement","editor","useDocumentEditor","createElement","useCallback","payload","Commands"],"mappings":";;;AAKO,SAASA;IACZ,MAAMC,SAASC;IAEf,MAAMC,gBAAgBC,YAClB,CAACC,UACUJ,OAAO,cAAc,CAACK,SAAS,aAAa,EAAED,UAEzD;QAACJ;KAAO;IAGZ,OAAO;QAAEE;IAAc;AAC3B"}

package/BaseEditor/metadata/ElementMetadata.js

@@ -18,7 +18,10 @@ class ElementMetadata {
         } else delete this.metadata[id];
     }
     applyToDocument(document) {
-        document.bindings[this.elementId].metadata = this.metadata;
+        if (0 === Object.keys(this.metadata).length) return;
+        const current = document.bindings[this.elementId].metadata;
+        if (current && current !== this.metadata) Object.assign(current, this.metadata);
+        else document.bindings[this.elementId].metadata = this.metadata;
     }
 }
 export { ElementMetadata };

package/BaseEditor/metadata/ElementMetadata.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/metadata/ElementMetadata.js","sources":["../../../src/BaseEditor/metadata/ElementMetadata.ts"],"sourcesContent":["import { matcher } from \"matcher\";\nimport type { Document } from \"@webiny/website-builder-sdk\";\nimport type { IMetadata, Metadata } from \"./IMetadata.js\";\n\nexport class ElementMetadata implements IMetadata {\n    private readonly elementId: string;\n    private readonly metadata: Record<string, any>;\n\n    constructor(elementId: string, metadata: Record<string, any> = {}) {\n        this.elementId = elementId;\n        this.metadata = metadata;\n    }\n\n    get<T = unknown>(id: string): T | undefined {\n        return this.metadata[id];\n    }\n\n    set(id: string, data: Metadata): void {\n        this.metadata[id] = data;\n    }\n\n    unset(id: string): void {\n        // Support wildcard paths using micromatch\n        if (id.includes(\"*\")) {\n            const keys = Object.keys(this.metadata);\n            const matches = matcher(keys, id);\n            for (const key of matches) {\n                delete this.metadata[key];\n            }\n        } else {\n            delete this.metadata[id];\n        }\n    }\n\n    applyToDocument(document: Document) {\n        document.bindings[this.elementId].metadata = this.metadata;\n    }\n}\n"],"names":["ElementMetadata","elementId","metadata","id","data","keys","Object","matches","matcher","key","document"],"mappings":";AAIO,MAAMA;IAIT,YAAYC,SAAiB,EAAEC,WAAgC,CAAC,CAAC,CAAE;QAC/D,IAAI,CAAC,SAAS,GAAGD;QACjB,IAAI,CAAC,QAAQ,GAAGC;IACpB;IAEA,IAAiBC,EAAU,EAAiB;QACxC,OAAO,IAAI,CAAC,QAAQ,CAACA,GAAG;IAC5B;IAEA,IAAIA,EAAU,EAAEC,IAAc,EAAQ;QAClC,IAAI,CAAC,QAAQ,CAACD,GAAG,GAAGC;IACxB;IAEA,MAAMD,EAAU,EAAQ;QAEpB,IAAIA,GAAG,QAAQ,CAAC,MAAM;YAClB,MAAME,OAAOC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ;YACtC,MAAMC,UAAUC,QAAQH,MAAMF;YAC9B,KAAK,MAAMM,OAAOF,QACd,OAAO,IAAI,CAAC,QAAQ,CAACE,IAAI;QAEjC,OACI,OAAO,IAAI,CAAC,QAAQ,CAACN,GAAG;IAEhC;IAEA,gBAAgBO,QAAkB,EAAE;QAChCA,SAAS,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;IAC9D;AACJ"}
+{"version":3,"file":"BaseEditor/metadata/ElementMetadata.js","sources":["../../../src/BaseEditor/metadata/ElementMetadata.ts"],"sourcesContent":["import { matcher } from \"matcher\";\nimport type { Document } from \"@webiny/website-builder-sdk\";\nimport type { IMetadata, Metadata } from \"./IMetadata.js\";\n\nexport class ElementMetadata implements IMetadata {\n    private readonly elementId: string;\n    private readonly metadata: Record<string, any>;\n\n    constructor(elementId: string, metadata: Record<string, any> = {}) {\n        this.elementId = elementId;\n        this.metadata = metadata;\n    }\n\n    get<T = unknown>(id: string): T | undefined {\n        return this.metadata[id];\n    }\n\n    set(id: string, data: Metadata): void {\n        this.metadata[id] = data;\n    }\n\n    unset(id: string): void {\n        // Support wildcard paths using micromatch\n        if (id.includes(\"*\")) {\n            const keys = Object.keys(this.metadata);\n            const matches = matcher(keys, id);\n            for (const key of matches) {\n                delete this.metadata[key];\n            }\n        } else {\n            delete this.metadata[id];\n        }\n    }\n\n    applyToDocument(document: Document) {\n        // Don't write an empty metadata object to the document.\n        if (Object.keys(this.metadata).length === 0) {\n            return;\n        }\n\n        const current = document.bindings[this.elementId].metadata;\n        if (current && current !== this.metadata) {\n            // Merge rather than replace: when multiple inputs on the same\n            // element each hold a stale metadata snapshot (produced by toJS()\n            // in useBindingsForElement), a plain assignment would discard keys\n            // written by earlier onChange callbacks.\n            Object.assign(current, this.metadata);\n        } else {\n            document.bindings[this.elementId].metadata = this.metadata;\n        }\n    }\n}\n"],"names":["ElementMetadata","elementId","metadata","id","data","keys","Object","matches","matcher","key","document","current"],"mappings":";AAIO,MAAMA;IAIT,YAAYC,SAAiB,EAAEC,WAAgC,CAAC,CAAC,CAAE;QAC/D,IAAI,CAAC,SAAS,GAAGD;QACjB,IAAI,CAAC,QAAQ,GAAGC;IACpB;IAEA,IAAiBC,EAAU,EAAiB;QACxC,OAAO,IAAI,CAAC,QAAQ,CAACA,GAAG;IAC5B;IAEA,IAAIA,EAAU,EAAEC,IAAc,EAAQ;QAClC,IAAI,CAAC,QAAQ,CAACD,GAAG,GAAGC;IACxB;IAEA,MAAMD,EAAU,EAAQ;QAEpB,IAAIA,GAAG,QAAQ,CAAC,MAAM;YAClB,MAAME,OAAOC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ;YACtC,MAAMC,UAAUC,QAAQH,MAAMF;YAC9B,KAAK,MAAMM,OAAOF,QACd,OAAO,IAAI,CAAC,QAAQ,CAACE,IAAI;QAEjC,OACI,OAAO,IAAI,CAAC,QAAQ,CAACN,GAAG;IAEhC;IAEA,gBAAgBO,QAAkB,EAAE;QAEhC,IAAIJ,AAAsC,MAAtCA,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,EACjC;QAGJ,MAAMK,UAAUD,SAAS,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ;QAC1D,IAAIC,WAAWA,YAAY,IAAI,CAAC,QAAQ,EAKpCL,OAAO,MAAM,CAACK,SAAS,IAAI,CAAC,QAAQ;aAEpCD,SAAS,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;IAElE;AACJ"}

package/DocumentEditor/DocumentEditor.d.ts

@@ -3,14 +3,23 @@ import type { EditorDocument } from "@webiny/website-builder-sdk";
 import { Editor } from "../editorSdk/Editor.js";
 export declare const DocumentEditorContext: React.Context<Editor<any> | undefined>;
 export declare function useDocumentEditor<TDocument extends EditorDocument>(): Editor<TDocument>;
-interface DocumentEditorProps<TDocument> {
-    document: TDocument;
+interface DocumentEditorBaseProps {
     name: string;
     children?: React.ReactNode;
+}
+interface DocumentEditorWithDocument<TDocument> extends DocumentEditorBaseProps {
+    document: TDocument;
     readOnly: boolean;
+    editor?: never;
+}
+interface DocumentEditorWithEditor extends DocumentEditorBaseProps {
+    editor: Editor<any>;
+    document?: never;
+    readOnly?: never;
 }
-declare function BaseDocumentEditor<TDocument extends EditorDocument>({ document, name, children, readOnly }: DocumentEditorProps<TDocument>): React.JSX.Element;
-export declare const DocumentEditor: typeof BaseDocumentEditor & {
-    displayName: string;
+type DocumentEditorProps<TDocument = any> = DocumentEditorWithDocument<TDocument> | DocumentEditorWithEditor;
+declare function BaseDocumentEditor<TDocument extends EditorDocument>({ name, children, ...props }: DocumentEditorProps<TDocument>): React.JSX.Element;
+export declare const DocumentEditor: typeof BaseDocumentEditor & React.NamedExoticComponent<DocumentEditorProps<import("@webiny/website-builder-sdk").Document>> & {
+    readonly type: typeof BaseDocumentEditor;
 };
 export {};

package/DocumentEditor/DocumentEditor.js

@@ -13,13 +13,17 @@ function useDocumentEditor() {
     if (!context) throw new Error("useDocumentEditor must be used within a <DocumentEditor /> context!");
     return context;
 }
-function BaseDocumentEditor({ document, name, children, readOnly }) {
-    const editor = useMemo(()=>new Editor_js_Editor(document, {
-            isReadOnly: readOnly
-        }), [
-        document,
-        readOnly
+function BaseDocumentEditor({ name, children, ...props }) {
+    const internalEditor = useMemo(()=>{
+        if ("editor" in props && props.editor) return null;
+        return new Editor_js_Editor(props.document, {
+            isReadOnly: props.readOnly
+        });
+    }, [
+        "editor" in props ? props.editor : props.document,
+        "editor" in props ? null : props.readOnly
     ]);
+    const editor = "editor" in props && props.editor ? props.editor : internalEditor;
     return /*#__PURE__*/ react.createElement(DndProvider, {
         backend: HTML5Backend
     }, /*#__PURE__*/ react.createElement(StateInspector, {

package/DocumentEditor/DocumentEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentEditor/DocumentEditor.js","sources":["../../src/DocumentEditor/DocumentEditor.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport type { EditorDocument } from \"@webiny/website-builder-sdk\";\nimport { HTML5Backend } from \"react-dnd-html5-backend\";\nimport { DndProvider } from \"react-dnd\";\nimport { Editor as EditorComponent } from \"~/BaseEditor/components/index.js\";\nimport { Editor } from \"~/editorSdk/Editor.js\";\nimport { observer } from \"mobx-react-lite\";\nimport { StateInspector } from \"./StateInspector.js\";\nimport { CompositionScope } from \"@webiny/react-composition\";\nimport { DialogsProvider } from \"@webiny/app-admin\";\n\nexport const DocumentEditorContext = React.createContext<Editor<any> | undefined>(undefined);\n\nexport function useDocumentEditor<TDocument extends EditorDocument>() {\n    const context = React.useContext(DocumentEditorContext);\n    if (!context) {\n        throw new Error(\"useDocumentEditor must be used within a <DocumentEditor /> context!\");\n    }\n    return context as Editor<TDocument>;\n}\n\ninterface DocumentEditorProps<TDocument> {\n    document: TDocument;\n    name: string;\n    children?: React.ReactNode;\n    // Required for now. When use case with possibly not read-only arises, put it to optional.\n    readOnly: boolean;\n}\n\nfunction BaseDocumentEditor<TDocument extends EditorDocument>({\n    document,\n    name,\n    children,\n    readOnly\n}: DocumentEditorProps<TDocument>) {\n    const editor = useMemo(() => {\n        return new Editor<TDocument>(document, {\n            isReadOnly: readOnly\n        });\n    }, [document, readOnly]);\n\n    return (\n        <DndProvider backend={HTML5Backend}>\n            <StateInspector editor={editor} />\n            <DocumentEditorContext.Provider value={editor as Editor<TDocument>}>\n                <DialogsProvider>\n                    {children ? <>{children}</> : null}\n                    <CompositionScope name={name}>\n                        <EditorComponent />\n                    </CompositionScope>\n                </DialogsProvider>\n            </DocumentEditorContext.Provider>\n        </DndProvider>\n    );\n}\n\nconst WithObserver = observer(BaseDocumentEditor);\n\nexport const DocumentEditor = WithObserver;\n"],"names":["DocumentEditorContext","React","undefined","useDocumentEditor","context","Error","BaseDocumentEditor","document","name","children","readOnly","editor","useMemo","Editor","DndProvider","HTML5Backend","StateInspector","DialogsProvider","CompositionScope","EditorComponent","WithObserver","observer","DocumentEditor"],"mappings":";;;;;;;;;AAWO,MAAMA,wBAAwB,WAAHA,GAAGC,MAAAA,aAAmB,CAA0BC;AAE3E,SAASC;IACZ,MAAMC,UAAUH,MAAAA,UAAgB,CAACD;IACjC,IAAI,CAACI,SACD,MAAM,IAAIC,MAAM;IAEpB,OAAOD;AACX;AAUA,SAASE,mBAAqD,EAC1DC,QAAQ,EACRC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACqB;IAC7B,MAAMC,SAASC,QAAQ,IACZ,IAAIC,iBAAkBN,UAAU;YACnC,YAAYG;QAChB,IACD;QAACH;QAAUG;KAAS;IAEvB,OAAO,WAAP,GACI,oBAACI,aAAWA;QAAC,SAASC;qBAClB,oBAACC,gBAAcA;QAAC,QAAQL;sBACxB,oBAACX,sBAAsB,QAAQ;QAAC,OAAOW;qBACnC,oBAACM,iBAAeA,MACXR,WAAW,WAAXA,GAAW,0CAAGA,YAAe,oBAC9B,oBAACS,kBAAgBA;QAAC,MAAMV;qBACpB,oBAACW,QAAeA;AAMxC;AAEA,MAAMC,eAAeC,SAASf;AAEvB,MAAMgB,iBAAiBF"}
+{"version":3,"file":"DocumentEditor/DocumentEditor.js","sources":["../../src/DocumentEditor/DocumentEditor.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport type { EditorDocument } from \"@webiny/website-builder-sdk\";\nimport { HTML5Backend } from \"react-dnd-html5-backend\";\nimport { DndProvider } from \"react-dnd\";\nimport { Editor as EditorComponent } from \"~/BaseEditor/components/index.js\";\nimport { Editor } from \"~/editorSdk/Editor.js\";\nimport { observer } from \"mobx-react-lite\";\nimport { StateInspector } from \"./StateInspector.js\";\nimport { CompositionScope } from \"@webiny/react-composition\";\nimport { DialogsProvider } from \"@webiny/app-admin\";\n\nexport const DocumentEditorContext = React.createContext<Editor<any> | undefined>(undefined);\n\nexport function useDocumentEditor<TDocument extends EditorDocument>() {\n    const context = React.useContext(DocumentEditorContext);\n    if (!context) {\n        throw new Error(\"useDocumentEditor must be used within a <DocumentEditor /> context!\");\n    }\n    return context as Editor<TDocument>;\n}\n\ninterface DocumentEditorBaseProps {\n    name: string;\n    children?: React.ReactNode;\n}\n\ninterface DocumentEditorWithDocument<TDocument> extends DocumentEditorBaseProps {\n    document: TDocument;\n    readOnly: boolean;\n    editor?: never;\n}\n\ninterface DocumentEditorWithEditor extends DocumentEditorBaseProps {\n    editor: Editor<any>;\n    document?: never;\n    readOnly?: never;\n}\n\ntype DocumentEditorProps<TDocument = any> =\n    | DocumentEditorWithDocument<TDocument>\n    | DocumentEditorWithEditor;\n\nfunction BaseDocumentEditor<TDocument extends EditorDocument>({\n    name,\n    children,\n    ...props\n}: DocumentEditorProps<TDocument>) {\n    const internalEditor = useMemo(() => {\n        if (\"editor\" in props && props.editor) {\n            return null;\n        }\n        return new Editor<TDocument>(props.document!, {\n            isReadOnly: props.readOnly!\n        });\n    }, [\n        \"editor\" in props ? props.editor : props.document,\n        \"editor\" in props ? null : props.readOnly\n    ]);\n\n    const editor = \"editor\" in props && props.editor ? props.editor : internalEditor!;\n\n    return (\n        <DndProvider backend={HTML5Backend}>\n            <StateInspector editor={editor} />\n            <DocumentEditorContext.Provider value={editor as Editor<TDocument>}>\n                <DialogsProvider>\n                    {children ? <>{children}</> : null}\n                    <CompositionScope name={name}>\n                        <EditorComponent />\n                    </CompositionScope>\n                </DialogsProvider>\n            </DocumentEditorContext.Provider>\n        </DndProvider>\n    );\n}\n\nconst WithObserver = observer(BaseDocumentEditor);\n\nexport const DocumentEditor = WithObserver;\n"],"names":["DocumentEditorContext","React","undefined","useDocumentEditor","context","Error","BaseDocumentEditor","name","children","props","internalEditor","useMemo","Editor","editor","DndProvider","HTML5Backend","StateInspector","DialogsProvider","CompositionScope","EditorComponent","WithObserver","observer","DocumentEditor"],"mappings":";;;;;;;;;AAWO,MAAMA,wBAAwB,WAAHA,GAAGC,MAAAA,aAAmB,CAA0BC;AAE3E,SAASC;IACZ,MAAMC,UAAUH,MAAAA,UAAgB,CAACD;IACjC,IAAI,CAACI,SACD,MAAM,IAAIC,MAAM;IAEpB,OAAOD;AACX;AAuBA,SAASE,mBAAqD,EAC1DC,IAAI,EACJC,QAAQ,EACR,GAAGC,OAC0B;IAC7B,MAAMC,iBAAiBC,QAAQ;QAC3B,IAAI,YAAYF,SAASA,MAAM,MAAM,EACjC,OAAO;QAEX,OAAO,IAAIG,iBAAkBH,MAAM,QAAQ,EAAG;YAC1C,YAAYA,MAAM,QAAQ;QAC9B;IACJ,GAAG;QACC,YAAYA,QAAQA,MAAM,MAAM,GAAGA,MAAM,QAAQ;QACjD,YAAYA,QAAQ,OAAOA,MAAM,QAAQ;KAC5C;IAED,MAAMI,SAAS,YAAYJ,SAASA,MAAM,MAAM,GAAGA,MAAM,MAAM,GAAGC;IAElE,OAAO,WAAP,GACI,oBAACI,aAAWA;QAAC,SAASC;qBAClB,oBAACC,gBAAcA;QAAC,QAAQH;sBACxB,oBAACb,sBAAsB,QAAQ;QAAC,OAAOa;qBACnC,oBAACI,iBAAeA,MACXT,WAAW,WAAXA,GAAW,0CAAGA,YAAe,oBAC9B,oBAACU,kBAAgBA;QAAC,MAAMX;qBACpB,oBAACY,QAAeA;AAMxC;AAEA,MAAMC,eAAeC,SAASf;AAEvB,MAAMgB,iBAAiBF"}

package/DocumentEditor/StateInspector.d.ts

@@ -4,7 +4,9 @@ import type { Editor } from "../editorSdk/Editor.js";
 declare function BaseStateInspector<TDocument extends EditorDocument>({ editor }: {
     editor: Editor<TDocument>;
 }): React.JSX.Element;
-export declare const StateInspector: typeof BaseStateInspector & {
-    displayName: string;
+export declare const StateInspector: typeof BaseStateInspector & React.NamedExoticComponent<{
+    editor: Editor<import("@webiny/website-builder-sdk").Document>;
+}> & {
+    readonly type: typeof BaseStateInspector;
 };
 export {};

package/Extension.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export declare const Extension: {
-    (): React.JSX.Element;
-    displayName: string;
-};
+export declare function Extension(): React.JSX.Element;
+export declare namespace Extension {
+    var displayName: string;
+}