@webiny/app-website-builder 0.0.0-unstable.eb196ccd2f → 0.0.0-unstable.eb81deee7e

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

@@ -1,260 +1,109 @@
-import React, { useMemo, useCallback } from "react";
-import get from "lodash/get";
+import react, { useCallback, useMemo } from "react";
 import { observer } from "mobx-react-lite";
-import { Tree, Tooltip } from "@webiny/admin-ui";
-import { ReactComponent as VisibilityNone } from "@webiny/icons/visibility_off.svg";
-import { useActiveElement } from "../../../hooks/useActiveElement";
-import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor";
-import { useDocumentEditor } from "../../../../DocumentEditor";
-import { Commands } from "../../..";
-import { InlineSvg } from "../InsertElements/InlineSvg";
-import { InfoMessage } from "../../Sidebar/InfoMessage";
-import { useStyles } from "../../../hooks/useStyles";
-
-// Node type for the Tree component.
-
-// Element data extracted from the Document state.
-
-function flattenElements(elements, activeElementId) {
-  const result = [];
-  const asArray = Object.values(elements);
-  for (const key in elements) {
-    const node = elements[key];
-
-    // Skip root element.
-    if (!node.parent) {
-      continue;
-    }
-    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: "wby-fill-neutral-strong"
-        }) : /*#__PURE__*/React.createElement(React.Fragment, null),
-        draggable: node.canDrag
-      }
+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 { 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();
+    const document = editor.getDocumentState().read();
+    const elements = document.elements;
+    const bindings = document.bindings;
+    const treeKey = document.id;
+    const components = useSelectFromEditor((state)=>state.components);
+    const elementNodes = getElementNodeData({
+        components,
+        elements,
+        bindings
     });
-  }
-  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 (element.id === "root") {
-      return {
-        ...acc,
-        [element.id]: {
-          id: element.id,
-          label: "Root",
-          image: ""
+    const activeAncestors = useMemo(()=>{
+        if (!activeElement) return [];
+        const ancestors = [
+            activeElement.id
+        ];
+        let parent = elementNodes[activeElement.id].parent;
+        while(parent){
+            ancestors.push(parent.id);
+            parent = elementNodes[parent.id].parent;
         }
-      };
-    }
-    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)
+        return ancestors.reverse();
+    }, [
+        elementNodes,
+        activeElement
+    ]);
+    const nodes = useMemo(()=>flattenElements(elementNodes, activeElement?.id).sort((a, b)=>a.data.parent.index - b.data.parent.index), [
+        elementNodes,
+        activeElement
+    ]);
+    const highlightElement = useCallback((e)=>{
+        e.preventDefault();
+        const nodeId = e.currentTarget.getAttribute("data-node-id");
+        if (nodeId) editor.executeCommand(Commands.HighlightElement, {
+            id: nodeId
+        });
+    }, []);
+    const activateElement = useCallback((e)=>{
+        e.preventDefault();
+        const nodeId = e.currentTarget.getAttribute("data-node-id");
+        if (nodeId) editor.executeCommand(Commands.SelectElement, {
+            id: nodeId
+        });
+    }, []);
+    const renderer = (node)=>/*#__PURE__*/ react.createElement(Tree.Item.Content, {
+            "data-node-id": node.id,
+            onMouseOver: highlightElement,
+            onClick: activateElement
+        }, /*#__PURE__*/ react.createElement(Tree.Item.Icon, {
+            label: node.label,
+            element: node.icon,
+            size: "sm"
+        }), node.label, /*#__PURE__*/ react.createElement("div", {
+            className: "flex w-full justify-end"
+        }, /*#__PURE__*/ react.createElement(ElementActions, {
+            elementId: node.id
+        })));
+    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,
+        nodes: nodes,
+        rootId: "root",
+        renderer: renderer,
+        sort: false,
+        defaultOpenNodeIds: activeAncestors,
+        dropTargetOffset: 5,
+        placeholderRender: (node, { depth })=>/*#__PURE__*/ react.createElement(Placeholder, {
+                node: node,
+                depth: depth
+            }),
+        onDrop: (newTree, { dragSource })=>{
+            if (!dragSource || !dragSource.data) return;
+            const parent = dragSource.data.parent;
+            const sameLevelNodes = newTree.filter((n)=>n.parentId === dragSource.parentId);
+            const newIndex = sameLevelNodes.findIndex((n)=>n.id === dragSource.id);
+            editor.executeCommand(Commands.MoveElement, {
+                elementId: dragSource.id,
+                parentId: parent.id,
+                slot: parent.slot,
+                index: newIndex
+            });
+        },
+        canDrag: (node)=>node.data?.draggable ?? true,
+        canDrop: (_, { dragSource, dropTargetId })=>{
+            if (dragSource?.parentId === dropTargetId) return true;
+            return false;
         }
-      }
-    };
-  }, {});
-}
-export const Navigator = observer(() => {
-  const editor = useDocumentEditor();
-  const [activeElement] = useActiveElement();
-  const document = editor.getDocumentState().read();
-  const elements = document.elements;
-  const bindings = document.bindings;
-  const treeKey = document.id;
-  const components = useSelectFromEditor(state => {
-    return state.components;
-  });
-  const elementNodes = getElementNodeData({
-    components,
-    elements,
-    bindings
-  });
-  const activeAncestors = useMemo(() => {
-    if (!activeElement) {
-      return [];
-    }
-    const ancestors = [activeElement.id];
-    let parent = elementNodes[activeElement.id].parent;
-    while (parent) {
-      ancestors.push(parent.id);
-      parent = elementNodes[parent.id].parent;
-    }
-    return ancestors.reverse();
-  }, [elementNodes, activeElement]);
-  const nodes = useMemo(() => {
-    return flattenElements(elementNodes, activeElement?.id).sort((a, b) => {
-      return a.data.parent.index - b.data.parent.index;
-    });
-  }, [elementNodes, activeElement]);
-  const highlightElement = useCallback(e => {
-    e.preventDefault();
-    const nodeId = e.currentTarget.getAttribute("data-node-id");
-    if (nodeId) {
-      editor.executeCommand(Commands.HighlightElement, {
-        id: nodeId
-      });
-    }
-  }, []);
-  const activateElement = useCallback(e => {
-    e.preventDefault();
-    const nodeId = e.currentTarget.getAttribute("data-node-id");
-    if (nodeId) {
-      editor.executeCommand(Commands.SelectElement, {
-        id: nodeId
-      });
-    }
-  }, []);
-  const renderer = node => {
-    return /*#__PURE__*/React.createElement(Tree.Item.Content, {
-      "data-node-id": node.id,
-      onMouseOver: highlightElement,
-      onClick: activateElement
-    }, /*#__PURE__*/React.createElement(Tree.Item.Icon, {
-      label: node.label,
-      element: node.icon,
-      size: "sm"
-    }), node.label, /*#__PURE__*/React.createElement("div", {
-      className: "wby-flex wby-w-full wby-justify-end"
-    }, /*#__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, {
-    key: treeKey,
-    autoExpandOnDragOver: false,
-    insertDroppableFirst: false,
-    nodes: nodes,
-    rootId: "root",
-    renderer: renderer,
-    sort: false,
-    defaultOpenNodeIds: activeAncestors,
-    dropTargetOffset: 5,
-    placeholderRender: (node, {
-      depth
-    }) => {
-      return /*#__PURE__*/React.createElement(Placeholder, {
-        depth: depth,
-        node: node
-      });
-    },
-    onDrop: (newTree, {
-      dragSource
-    }) => {
-      if (!dragSource || !dragSource.data) {
-        return;
-      }
-      const parent = dragSource.data.parent;
-      const sameLevelNodes = newTree.filter(n => n.parentId === dragSource.parentId);
-      const newIndex = sameLevelNodes.findIndex(n => n.id === dragSource.id);
-      editor.executeCommand(Commands.MoveElement, {
-        elementId: dragSource.id,
-        parentId: parent.id,
-        slot: parent.slot,
-        index: newIndex
-      });
-    },
-    canDrag: node => node.data?.draggable ?? true,
-    canDrop: (_, {
-      dragSource,
-      dropTargetId
-    }) => {
-      // Only allow dropping within the same parent (for now).
-      if (dragSource?.parentId === dropTargetId) {
-        return true;
-      }
-      return false;
-    }
-  });
+    }));
 });
-const Placeholder = props => /*#__PURE__*/React.createElement("div", {
-  className: "wby-bg-primary-default",
-  style: {
-    height: 2,
-    zIndex: 999,
-    position: "absolute",
-    right: 0,
-    transform: "translateY(-50%)",
-    top: -2,
-    left: props.depth * 24
-  }
-});
-const ElementActions = ({
-  elementId
-}) => {
-  const {
-    styles,
-    onChange
-  } = useStyles(elementId);
-  const isVisible = styles.display !== "none";
-  const unhideElement = () => {
-    onChange(({
-      styles
-    }) => {
-      styles.set("display", "flex");
-    });
-  };
-  if (isVisible) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex"
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    trigger: /*#__PURE__*/React.createElement(Tree.Item.Icon, {
-      size: "sm",
-      className: "wby-cursor-pointer",
-      element: /*#__PURE__*/React.createElement(VisibilityNone, 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,"names":["React","useMemo","useCallback","get","observer","Tree","Tooltip","ReactComponent","VisibilityNone","useActiveElement","useSelectFromEditor","useDocumentEditor","Commands","InlineSvg","InfoMessage","useStyles","flattenElements","elements","activeElementId","result","asArray","Object","values","key","node","parent","push","id","label","parentId","active","droppable","filter","el","length","data","icon","image","createElement","src","className","Fragment","draggable","canDrag","getElementNodeData","components","bindings","getIndex","elementId","slot","elementBindings","slotValue","list","static","indexOf","reduce","acc","element","component","name","index","Navigator","editor","activeElement","document","getDocumentState","read","treeKey","state","elementNodes","activeAncestors","ancestors","reverse","nodes","sort","a","b","highlightElement","e","preventDefault","nodeId","currentTarget","getAttribute","executeCommand","HighlightElement","activateElement","SelectElement","renderer","Item","Content","onMouseOver","onClick","Icon","size","ElementActions","keys","message","autoExpandOnDragOver","insertDroppableFirst","rootId","defaultOpenNodeIds","dropTargetOffset","placeholderRender","depth","Placeholder","onDrop","newTree","dragSource","sameLevelNodes","n","newIndex","findIndex","MoveElement","canDrop","_","dropTargetId","props","style","height","zIndex","position","right","transform","top","left","styles","onChange","isVisible","display","unhideElement","set","trigger","content"],"sources":["Navigator.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from \"react\";\nimport get from \"lodash/get\";\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\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor\";\nimport type { EditorState } from \"~/editorSdk/Editor\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { Commands } from \"~/BaseEditor\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg\";\nimport { InfoMessage } from \"~/BaseEditor/defaultConfig/Sidebar/InfoMessage\";\nimport { useStyles } from \"~/BaseEditor/hooks/useStyles\";\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={\"wby-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={\"wby-flex wby-w-full wby-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={\"wby-bg-primary-default\"}\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={\"wby-flex\"}>\n            <Tooltip\n                trigger={\n                    <Tree.Item.Icon\n                        size={\"sm\"}\n                        className={\"wby-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"],"mappings":"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","ignoreList":[]}
+{"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":";;;;;;;;;;;AAYO,MAAMA,YAAYC,SAAS;IAC9B,MAAMC,SAASC;IACf,MAAM,CAACC,cAAc,GAAGC;IAExB,MAAMC,WAAWJ,OAAO,gBAAgB,GAAG,IAAI;IAC/C,MAAMK,WAAWD,SAAS,QAAQ;IAClC,MAAME,WAAWF,SAAS,QAAQ;IAClC,MAAMG,UAAUH,SAAS,EAAE;IAE3B,MAAMI,aAAaC,oBAAoBC,CAAAA,QAASA,MAAM,UAAU;IAEhE,MAAMC,eAAeC,mBAAmB;QAAEJ;QAAYH;QAAUC;IAAS;IAEzE,MAAMO,kBAAkBC,QAAQ;QAC5B,IAAI,CAACZ,eACD,OAAO,EAAE;QAEb,MAAMa,YAAsB;YAACb,cAAc,EAAE;SAAC;QAC9C,IAAIc,SAASL,YAAY,CAACT,cAAc,EAAE,CAAC,CAAC,MAAM;QAClD,MAAOc,OAAQ;YACXD,UAAU,IAAI,CAACC,OAAO,EAAE;YACxBA,SAASL,YAAY,CAACK,OAAO,EAAE,CAAC,CAAC,MAAM;QAC3C;QACA,OAAOD,UAAU,OAAO;IAC5B,GAAG;QAACJ;QAAcT;KAAc;IAEhC,MAAMe,QAAQH,QAAQ,IACXI,gBAAgBP,cAAcT,eAAe,IAAI,IAAI,CAAC,CAACiB,GAAGC,IACtDD,EAAE,IAAI,CAAE,MAAM,CAAC,KAAK,GAAGC,EAAE,IAAI,CAAE,MAAM,CAAC,KAAK,GAEvD;QAACT;QAAcT;KAAc;IAEhC,MAAMmB,mBAAmBC,YAAY,CAACC;QAClCA,EAAE,cAAc;QAChB,MAAMC,SAASD,EAAE,aAAa,CAAC,YAAY,CAAC;QAC5C,IAAIC,QACAxB,OAAO,cAAc,CAACyB,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;QAC5C,IAAIC,QACAxB,OAAO,cAAc,CAACyB,SAAS,aAAa,EAAE;YAAE,IAAID;QAAO;IAEnE,GAAG,EAAE;IAEL,MAAMG,WAAkCC,CAAAA,OAAAA,WAAAA,GACpC,oBAACC,KAAK,IAAI,CAAC,OAAO;YACd,gBAAcD,KAAK,EAAE;YACrB,aAAaP;YACb,SAASK;yBAET,oBAACG,KAAK,IAAI,CAAC,IAAI;YAAC,OAAOD,KAAK,KAAK;YAAE,SAASA,KAAK,IAAI;YAAE,MAAM;YAC5DA,KAAK,KAAK,gBACX,oBAAC;YAAI,WAAW;yBACZ,oBAACE,gBAAcA;YAAC,WAAWF,KAAK,EAAE;;IAK9C,IAAIG,OAAO,IAAI,CAACpB,cAAc,MAAM,IAAI,GACpC,OAAO,WAAP,GAAO,oBAACqB,qBAAmBA;IAG/B,OAAO,WAAP,GACI,oBAACC,YAAUA;QAAC,WAAW;qBACnB,oBAACJ,MAAIA;QACD,KAAKtB;QACL,sBAAsB;QACtB,sBAAsB;QACtB,OAAOU;QACP,QAAQ;QACR,UAAUU;QACV,MAAM;QACN,oBAAoBd;QACpB,kBAAkB;QAClB,mBAAmB,CAACe,MAAM,EAAEM,KAAK,EAAE,iBAAK,oBAACC,aAAWA;gBAAC,MAAMP;gBAAM,OAAOM;;QACxE,QAAQ,CAACE,SAAS,EAAEC,UAAU,EAAE;YAC5B,IAAI,CAACA,cAAc,CAACA,WAAW,IAAI,EAC/B;YAEJ,MAAMrB,SAASqB,WAAW,IAAI,CAAC,MAAM;YACrC,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;YACrErC,OAAO,cAAc,CAACyB,SAAS,WAAW,EAAE;gBACxC,WAAWY,WAAW,EAAE;gBACxB,UAAUrB,OAAO,EAAE;gBACnB,MAAMA,OAAO,IAAI;gBACjB,OAAOwB;YACX;QACJ;QACA,SAASZ,CAAAA,OAAQA,KAAK,IAAI,EAAE,aAAa;QACzC,SAAS,CAACa,GAAG,EAAEJ,UAAU,EAAEK,YAAY,EAAE;YACrC,IAAIL,YAAY,aAAaK,cACzB,OAAO;YAEX,OAAO;QACX;;AAIhB"}

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,19 +1,17 @@
-import React from "react";
-import { Icon, Tabs } from "@webiny/admin-ui";
-import { ReactComponent as TreeIcon } from "@webiny/icons/account_tree.svg";
-import { ScrollableContainer } from "../../../config/Sidebar/ScrollableContainer";
-import { Navigator } from "./Navigator";
-export const NavigatorTab = () => {
-  return /*#__PURE__*/React.createElement(Tabs.Tab, {
-    value: "navigator",
-    trigger: "Navigator",
-    spacing: "sm",
-    icon: /*#__PURE__*/React.createElement(Icon, {
-      icon: /*#__PURE__*/React.createElement(TreeIcon, null),
-      label: "Navigator"
-    }),
-    content: /*#__PURE__*/React.createElement(ScrollableContainer, null, /*#__PURE__*/React.createElement(Navigator, null))
-  });
-};
+import react from "react";
+import { Icon } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/account_tree.svg";
+import { Toolbar } from "../../../config/Toolbar/Toolbar.js";
+import { Navigator } from "./Navigator.js";
+const NavigatorTab = ()=>/*#__PURE__*/ react.createElement(Toolbar.Tab, {
+        name: "navigator",
+        label: "Navigator",
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Navigator"
+        }),
+        element: /*#__PURE__*/ react.createElement(Navigator, null)
+    });
+export { NavigatorTab };
 
 //# sourceMappingURL=NavigatorTab.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","Icon","Tabs","ReactComponent","TreeIcon","ScrollableContainer","Navigator","NavigatorTab","createElement","Tab","value","trigger","spacing","icon","label","content"],"sources":["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\";\nimport { Navigator } from \"./Navigator\";\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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAQ,kBAAkB;AAC7C,SAASC,cAAc,IAAIC,QAAQ,QAAQ,gCAAgC;AAC3E,SAASC,mBAAmB;AAC5B,SAASC,SAAS;AAElB,OAAO,MAAMC,YAAY,GAAGA,CAAA,KAAM;EAC9B,oBACIP,KAAA,CAAAQ,aAAA,CAACN,IAAI,CAACO,GAAG;IACLC,KAAK,EAAC,WAAW;IACjBC,OAAO,EAAE,WAAY;IACrBC,OAAO,EAAE,IAAK;IACdC,IAAI,eAAEb,KAAA,CAAAQ,aAAA,CAACP,IAAI;MAACY,IAAI,eAAEb,KAAA,CAAAQ,aAAA,CAACJ,QAAQ,MAAE,CAAE;MAACU,KAAK,EAAE;IAAY,CAAE,CAAE;IACvDC,OAAO,eACHf,KAAA,CAAAQ,aAAA,CAACH,mBAAmB,qBAChBL,KAAA,CAAAQ,aAAA,CAACF,SAAS,MAAE,CACK;EACxB,CACJ,CAAC;AAEV,CAAC","ignoreList":[]}
+{"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/index.d.ts

@@ -0,0 +1,2 @@
+export { Navigator } from "./Navigator.js";
+export { NavigatorTab } from "./NavigatorTab.js";

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

@@ -1,3 +1,2 @@
-
-
-//# sourceMappingURL=index.js.map
+export { Navigator } from "./Navigator.js";
+export { NavigatorTab } from "./NavigatorTab.js";

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