@webiny/app-website-builder 6.0.0-alpha.0

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

@@ -0,0 +1 @@
+{"version":3,"names":["useSelectFromEditor","functionConverter","getComponentFilter","group","name","cmp","filter","deserialize","useComponentGroups","state","groups","Object","values","componentGroups","components","item","hideFromToolbar","map","items"],"sources":["useComponentGroups.ts"],"sourcesContent":["import { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor\";\nimport { ComponentManifest, SerializedComponentGroup } from \"~/sdk/types\";\nimport { functionConverter } from \"~/sdk\";\n\ntype WithItems<T> = T & { items: ComponentManifest[] };\n\nconst getComponentFilter = (\n    group: SerializedComponentGroup\n): ((cmp: ComponentManifest) => boolean) => {\n    if (group.name === \"custom\") {\n        return cmp => !cmp.group;\n    }\n\n    if (group.filter) {\n        return functionConverter.deserialize(group.filter!);\n    }\n\n    return cmp => cmp.group === group.name;\n};\n\nexport const useComponentGroups = () => {\n    return useSelectFromEditor<WithItems<SerializedComponentGroup>[]>(state => {\n        const groups = Object.values(state.componentGroups);\n        const components = Object.values(state.components).filter(item => !item.hideFromToolbar);\n\n        return groups.map(group => {\n            const filter = getComponentFilter(group);\n\n            return {\n                ...group,\n                items: components.filter(filter)\n            };\n        });\n    });\n};\n"],"mappings":"AAAA,SAASA,mBAAmB;AAE5B,SAASC,iBAAiB;AAI1B,MAAMC,kBAAkB,GACpBC,KAA+B,IACS;EACxC,IAAIA,KAAK,CAACC,IAAI,KAAK,QAAQ,EAAE;IACzB,OAAOC,GAAG,IAAI,CAACA,GAAG,CAACF,KAAK;EAC5B;EAEA,IAAIA,KAAK,CAACG,MAAM,EAAE;IACd,OAAOL,iBAAiB,CAACM,WAAW,CAACJ,KAAK,CAACG,MAAO,CAAC;EACvD;EAEA,OAAOD,GAAG,IAAIA,GAAG,CAACF,KAAK,KAAKA,KAAK,CAACC,IAAI;AAC1C,CAAC;AAED,OAAO,MAAMI,kBAAkB,GAAGA,CAAA,KAAM;EACpC,OAAOR,mBAAmB,CAAwCS,KAAK,IAAI;IACvE,MAAMC,MAAM,GAAGC,MAAM,CAACC,MAAM,CAACH,KAAK,CAACI,eAAe,CAAC;IACnD,MAAMC,UAAU,GAAGH,MAAM,CAACC,MAAM,CAACH,KAAK,CAACK,UAAU,CAAC,CAACR,MAAM,CAACS,IAAI,IAAI,CAACA,IAAI,CAACC,eAAe,CAAC;IAExF,OAAON,MAAM,CAACO,GAAG,CAACd,KAAK,IAAI;MACvB,MAAMG,MAAM,GAAGJ,kBAAkB,CAACC,KAAK,CAAC;MAExC,OAAO;QACH,GAAGA,KAAK;QACRe,KAAK,EAAEJ,UAAU,CAACR,MAAM,CAACA,MAAM;MACnC,CAAC;IACL,CAAC,CAAC;EACN,CAAC,CAAC;AACN,CAAC","ignoreList":[]}

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

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const Navigator: (() => React.JSX.Element) & {
+    displayName: string;
+};

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

@@ -0,0 +1,260 @@
+import React, { useMemo, useCallback } from "react";
+import get from "lodash/get";
+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
+      }
+    });
+  }
+  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 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 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."
+  }));
+};
+
+//# sourceMappingURL=Navigator.js.map

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

@@ -0,0 +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 \"~/sdk\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor\";\nimport { 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                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":[]}

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

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

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

@@ -0,0 +1,19 @@
+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))
+  });
+};
+
+//# sourceMappingURL=NavigatorTab.js.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,3 @@
+
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":[""],"mappings":"","ignoreList":[]}

package/BaseEditor/hooks/Boxes.d.ts

@@ -0,0 +1,15 @@
+import { BoxData } from "../../sdk/types";
+import { Box } from "../defaultConfig/Content/Preview/Box";
+export declare class Boxes {
+    private readonly boxes;
+    constructor(initial: Record<string, BoxData>);
+    get(id: string): Box | undefined;
+    filter(predicate: (box: Box) => boolean): Boxes;
+    map<T>(transform: (box: Box, meta: {
+        index: number;
+        isFirst: boolean;
+        isLast: boolean;
+    }) => T): T[];
+    entries(): IterableIterator<[string, Box]>;
+    toObject(): Record<string, BoxData>;
+}

package/BaseEditor/hooks/Boxes.js

@@ -0,0 +1,47 @@
+import { Box } from "../defaultConfig/Content/Preview/Box";
+export class Boxes {
+  constructor(initial) {
+    this.boxes = new Map(Object.entries(initial).map(([id, box]) => {
+      return [id, new Box(id, box)];
+    }));
+  }
+  get(id) {
+    return this.boxes.get(id);
+  }
+  filter(predicate) {
+    const result = {};
+    for (const [id, box] of this.boxes) {
+      if (predicate(box)) {
+        result[id] = box.toObject();
+      }
+    }
+    return new Boxes(result);
+  }
+  map(transform) {
+    const result = [];
+    const entries = Array.from(this.boxes.entries());
+    for (let index = 0; index < entries.length; index++) {
+      const [, box] = entries[index];
+      const isFirst = index === 0;
+      const isLast = index === entries.length - 1;
+      result.push(transform(box, {
+        index,
+        isFirst,
+        isLast
+      }));
+    }
+    return result;
+  }
+  entries() {
+    return this.boxes.entries();
+  }
+  toObject() {
+    const obj = {};
+    for (const [id, box] of this.boxes) {
+      obj[id] = box.toObject();
+    }
+    return obj;
+  }
+}
+
+//# sourceMappingURL=Boxes.js.map

package/BaseEditor/hooks/Boxes.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Box","Boxes","constructor","initial","boxes","Map","Object","entries","map","id","box","get","filter","predicate","result","toObject","transform","Array","from","index","length","isFirst","isLast","push","obj"],"sources":["Boxes.ts"],"sourcesContent":["import { BoxData } from \"~/sdk/types\";\nimport { Box } from \"~/BaseEditor/defaultConfig/Content/Preview/Box\";\n\nexport class Boxes {\n    private readonly boxes: Map<string, Box>;\n\n    constructor(initial: Record<string, BoxData>) {\n        this.boxes = new Map(\n            Object.entries(initial).map(([id, box]) => {\n                return [id, new Box(id, box)];\n            })\n        );\n    }\n\n    get(id: string): Box | undefined {\n        return this.boxes.get(id);\n    }\n\n    filter(predicate: (box: Box) => boolean): Boxes {\n        const result: Record<string, BoxData> = {};\n        for (const [id, box] of this.boxes) {\n            if (predicate(box)) {\n                result[id] = box.toObject();\n            }\n        }\n        return new Boxes(result);\n    }\n\n    map<T>(\n        transform: (box: Box, meta: { index: number; isFirst: boolean; isLast: boolean }) => T\n    ): T[] {\n        const result: T[] = [];\n        const entries = Array.from(this.boxes.entries());\n\n        for (let index = 0; index < entries.length; index++) {\n            const [, box] = entries[index];\n            const isFirst = index === 0;\n            const isLast = index === entries.length - 1;\n            result.push(transform(box, { index, isFirst, isLast }));\n        }\n\n        return result;\n    }\n\n    entries() {\n        return this.boxes.entries();\n    }\n\n    toObject(): Record<string, BoxData> {\n        const obj: Record<string, BoxData> = {};\n        for (const [id, box] of this.boxes) {\n            obj[id] = box.toObject();\n        }\n        return obj;\n    }\n}\n"],"mappings":"AACA,SAASA,GAAG;AAEZ,OAAO,MAAMC,KAAK,CAAC;EAGfC,WAAWA,CAACC,OAAgC,EAAE;IAC1C,IAAI,CAACC,KAAK,GAAG,IAAIC,GAAG,CAChBC,MAAM,CAACC,OAAO,CAACJ,OAAO,CAAC,CAACK,GAAG,CAAC,CAAC,CAACC,EAAE,EAAEC,GAAG,CAAC,KAAK;MACvC,OAAO,CAACD,EAAE,EAAE,IAAIT,GAAG,CAACS,EAAE,EAAEC,GAAG,CAAC,CAAC;IACjC,CAAC,CACL,CAAC;EACL;EAEAC,GAAGA,CAACF,EAAU,EAAmB;IAC7B,OAAO,IAAI,CAACL,KAAK,CAACO,GAAG,CAACF,EAAE,CAAC;EAC7B;EAEAG,MAAMA,CAACC,SAAgC,EAAS;IAC5C,MAAMC,MAA+B,GAAG,CAAC,CAAC;IAC1C,KAAK,MAAM,CAACL,EAAE,EAAEC,GAAG,CAAC,IAAI,IAAI,CAACN,KAAK,EAAE;MAChC,IAAIS,SAAS,CAACH,GAAG,CAAC,EAAE;QAChBI,MAAM,CAACL,EAAE,CAAC,GAAGC,GAAG,CAACK,QAAQ,CAAC,CAAC;MAC/B;IACJ;IACA,OAAO,IAAId,KAAK,CAACa,MAAM,CAAC;EAC5B;EAEAN,GAAGA,CACCQ,SAAsF,EACnF;IACH,MAAMF,MAAW,GAAG,EAAE;IACtB,MAAMP,OAAO,GAAGU,KAAK,CAACC,IAAI,CAAC,IAAI,CAACd,KAAK,CAACG,OAAO,CAAC,CAAC,CAAC;IAEhD,KAAK,IAAIY,KAAK,GAAG,CAAC,EAAEA,KAAK,GAAGZ,OAAO,CAACa,MAAM,EAAED,KAAK,EAAE,EAAE;MACjD,MAAM,GAAGT,GAAG,CAAC,GAAGH,OAAO,CAACY,KAAK,CAAC;MAC9B,MAAME,OAAO,GAAGF,KAAK,KAAK,CAAC;MAC3B,MAAMG,MAAM,GAAGH,KAAK,KAAKZ,OAAO,CAACa,MAAM,GAAG,CAAC;MAC3CN,MAAM,CAACS,IAAI,CAACP,SAAS,CAACN,GAAG,EAAE;QAAES,KAAK;QAAEE,OAAO;QAAEC;MAAO,CAAC,CAAC,CAAC;IAC3D;IAEA,OAAOR,MAAM;EACjB;EAEAP,OAAOA,CAAA,EAAG;IACN,OAAO,IAAI,CAACH,KAAK,CAACG,OAAO,CAAC,CAAC;EAC/B;EAEAQ,QAAQA,CAAA,EAA4B;IAChC,MAAMS,GAA4B,GAAG,CAAC,CAAC;IACvC,KAAK,MAAM,CAACf,EAAE,EAAEC,GAAG,CAAC,IAAI,IAAI,CAACN,KAAK,EAAE;MAChCoB,GAAG,CAACf,EAAE,CAAC,GAAGC,GAAG,CAACK,QAAQ,CAAC,CAAC;IAC5B;IACA,OAAOS,GAAG;EACd;AACJ","ignoreList":[]}

package/BaseEditor/hooks/useActiveElement.d.ts

@@ -0,0 +1,2 @@
+import { DocumentElement } from "../../sdk/types";
+export declare const useActiveElement: () => readonly [DocumentElement | null, (id: string | null) => void];

package/BaseEditor/hooks/useActiveElement.js

@@ -0,0 +1,32 @@
+import { autorun, toJS } from "mobx";
+import { useCallback, useEffect, useState } from "react";
+import { useDocumentEditor } from "../../DocumentEditor";
+import { Commands } from "../commands";
+import deepEqual from "deep-equal";
+export const useActiveElement = () => {
+  const [activeElement, setActiveElement] = useState(null);
+  const editor = useDocumentEditor();
+  useEffect(() => {
+    return autorun(() => {
+      const editorState = editor.getEditorState().read();
+      const documentState = editor.getDocumentState().read();
+      const activeElementId = editorState.selectedElement;
+      if (activeElementId) {
+        const newElement = toJS(documentState.elements[activeElementId]);
+        if (!deepEqual(newElement, activeElement)) {
+          setActiveElement(newElement);
+        }
+      } else {
+        setActiveElement(null);
+      }
+    });
+  }, [activeElement]);
+  const setActiveElementId = useCallback(id => {
+    editor.executeCommand(Commands.SelectElement, {
+      id
+    });
+  }, [editor]);
+  return [activeElement, setActiveElementId];
+};
+
+//# sourceMappingURL=useActiveElement.js.map

package/BaseEditor/hooks/useActiveElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["autorun","toJS","useCallback","useEffect","useState","useDocumentEditor","Commands","deepEqual","useActiveElement","activeElement","setActiveElement","editor","editorState","getEditorState","read","documentState","getDocumentState","activeElementId","selectedElement","newElement","elements","setActiveElementId","id","executeCommand","SelectElement"],"sources":["useActiveElement.ts"],"sourcesContent":["import { autorun, toJS } from \"mobx\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { DocumentElement } from \"~/sdk/types\";\nimport { Commands } from \"../commands\";\nimport deepEqual from \"deep-equal\";\n\nexport const useActiveElement = () => {\n    const [activeElement, setActiveElement] = useState<DocumentElement | null>(null);\n    const editor = useDocumentEditor();\n\n    useEffect(() => {\n        return autorun(() => {\n            const editorState = editor.getEditorState().read();\n            const documentState = editor.getDocumentState().read();\n\n            const activeElementId = editorState.selectedElement;\n\n            if (activeElementId) {\n                const newElement = toJS(documentState.elements[activeElementId]);\n                if (!deepEqual(newElement, activeElement)) {\n                    setActiveElement(newElement);\n                }\n            } else {\n                setActiveElement(null);\n            }\n        });\n    }, [activeElement]);\n\n    const setActiveElementId = useCallback(\n        (id: string | null) => {\n            editor.executeCommand(Commands.SelectElement, { id });\n        },\n        [editor]\n    );\n\n    return [activeElement, setActiveElementId] as const;\n};\n"],"mappings":"AAAA,SAASA,OAAO,EAAEC,IAAI,QAAQ,MAAM;AACpC,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AACxD,SAASC,iBAAiB;AAE1B,SAASC,QAAQ;AACjB,OAAOC,SAAS,MAAM,YAAY;AAElC,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EAClC,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGN,QAAQ,CAAyB,IAAI,CAAC;EAChF,MAAMO,MAAM,GAAGN,iBAAiB,CAAC,CAAC;EAElCF,SAAS,CAAC,MAAM;IACZ,OAAOH,OAAO,CAAC,MAAM;MACjB,MAAMY,WAAW,GAAGD,MAAM,CAACE,cAAc,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC;MAClD,MAAMC,aAAa,GAAGJ,MAAM,CAACK,gBAAgB,CAAC,CAAC,CAACF,IAAI,CAAC,CAAC;MAEtD,MAAMG,eAAe,GAAGL,WAAW,CAACM,eAAe;MAEnD,IAAID,eAAe,EAAE;QACjB,MAAME,UAAU,GAAGlB,IAAI,CAACc,aAAa,CAACK,QAAQ,CAACH,eAAe,CAAC,CAAC;QAChE,IAAI,CAACV,SAAS,CAACY,UAAU,EAAEV,aAAa,CAAC,EAAE;UACvCC,gBAAgB,CAACS,UAAU,CAAC;QAChC;MACJ,CAAC,MAAM;QACHT,gBAAgB,CAAC,IAAI,CAAC;MAC1B;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,CAACD,aAAa,CAAC,CAAC;EAEnB,MAAMY,kBAAkB,GAAGnB,WAAW,CACjCoB,EAAiB,IAAK;IACnBX,MAAM,CAACY,cAAc,CAACjB,QAAQ,CAACkB,aAAa,EAAE;MAAEF;IAAG,CAAC,CAAC;EACzD,CAAC,EACD,CAACX,MAAM,CACX,CAAC;EAED,OAAO,CAACF,aAAa,EAAEY,kBAAkB,CAAC;AAC9C,CAAC","ignoreList":[]}

package/BaseEditor/hooks/useBreakpoint.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { Breakpoint } from "../../sdk/types";
+export type EditorBreakpoint = Breakpoint & {
+    title: string;
+    description: string;
+    icon: React.ReactNode;
+};
+export declare const useBreakpoint: () => {
+    isBaseBreakpoint: boolean;
+    breakpoint: EditorBreakpoint;
+    breakpoints: EditorBreakpoint[];
+    setBreakpoint: (mode: string) => void;
+};

package/BaseEditor/hooks/useBreakpoint.js

@@ -0,0 +1,51 @@
+import React, { useCallback, useMemo } from "react";
+import { useDocumentEditor } from "../../DocumentEditor";
+import { useSelectFromEditor } from "./useSelectFromEditor";
+import { ReactComponent as LaptopIcon } from "@webiny/icons/laptop_mac.svg";
+import { ReactComponent as TabletIcon } from "@webiny/icons/tablet_mac.svg";
+import { ReactComponent as MobileIcon } from "@webiny/icons/phone_iphone.svg";
+import { BASE_BREAKPOINT } from "../../constants";
+const BREAKPOINTS = [{
+  name: "desktop",
+  title: "Desktop",
+  description: `Desktop styles apply at all breakpoints, unless they're edited at a smaller breakpoint. Start your styling here.`,
+  icon: /*#__PURE__*/React.createElement(LaptopIcon, null),
+  minWidth: 0,
+  maxWidth: 4000
+}, {
+  name: "tablet",
+  title: "Tablet",
+  description: `Styles added here will apply at 991px and down, unless they're edited at a smaller breakpoint.`,
+  icon: /*#__PURE__*/React.createElement(TabletIcon, null),
+  minWidth: 0,
+  maxWidth: 991
+}, {
+  name: "mobile",
+  title: "Mobile",
+  description: `Styles added here will apply at 767px and down.`,
+  icon: /*#__PURE__*/React.createElement(MobileIcon, null),
+  minWidth: 0,
+  maxWidth: 767
+}];
+export const useBreakpoint = () => {
+  const editor = useDocumentEditor();
+  const activeBreakpoint = useSelectFromEditor(state => {
+    return state.breakpoint || BREAKPOINTS[0].name;
+  });
+  const breakpoint = useMemo(() => {
+    return BREAKPOINTS.find(bp => bp.name === activeBreakpoint);
+  }, [activeBreakpoint]);
+  const setBreakpoint = useCallback(mode => {
+    editor.updateEditor(state => {
+      state.breakpoint = mode;
+    });
+  }, [editor]);
+  return {
+    isBaseBreakpoint: breakpoint.name === BASE_BREAKPOINT,
+    breakpoint,
+    breakpoints: BREAKPOINTS,
+    setBreakpoint
+  };
+};
+
+//# sourceMappingURL=useBreakpoint.js.map

package/BaseEditor/hooks/useBreakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useMemo","useDocumentEditor","useSelectFromEditor","ReactComponent","LaptopIcon","TabletIcon","MobileIcon","BASE_BREAKPOINT","BREAKPOINTS","name","title","description","icon","createElement","minWidth","maxWidth","useBreakpoint","editor","activeBreakpoint","state","breakpoint","find","bp","setBreakpoint","mode","updateEditor","isBaseBreakpoint","breakpoints"],"sources":["useBreakpoint.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor\";\nimport { Breakpoint } from \"~/sdk/types\";\nimport { ReactComponent as LaptopIcon } from \"@webiny/icons/laptop_mac.svg\";\nimport { ReactComponent as TabletIcon } from \"@webiny/icons/tablet_mac.svg\";\nimport { ReactComponent as MobileIcon } from \"@webiny/icons/phone_iphone.svg\";\nimport { BASE_BREAKPOINT } from \"~/constants\";\n\nexport type EditorBreakpoint = Breakpoint & {\n    title: string;\n    description: string;\n    icon: React.ReactNode;\n};\n\nconst BREAKPOINTS: EditorBreakpoint[] = [\n    {\n        name: \"desktop\",\n        title: \"Desktop\",\n        description: `Desktop styles apply at all breakpoints, unless they're edited at a smaller breakpoint. Start your styling here.`,\n        icon: <LaptopIcon />,\n        minWidth: 0,\n        maxWidth: 4000\n    },\n    {\n        name: \"tablet\",\n        title: \"Tablet\",\n        description: `Styles added here will apply at 991px and down, unless they're edited at a smaller breakpoint.`,\n        icon: <TabletIcon />,\n        minWidth: 0,\n        maxWidth: 991\n    },\n    {\n        name: \"mobile\",\n        title: \"Mobile\",\n        description: `Styles added here will apply at 767px and down.`,\n        icon: <MobileIcon />,\n        minWidth: 0,\n        maxWidth: 767\n    }\n];\n\nexport const useBreakpoint = () => {\n    const editor = useDocumentEditor();\n    const activeBreakpoint = useSelectFromEditor<string>(state => {\n        return state.breakpoint || BREAKPOINTS[0].name;\n    });\n\n    const breakpoint = useMemo(() => {\n        return BREAKPOINTS.find(bp => bp.name === activeBreakpoint)!;\n    }, [activeBreakpoint]);\n\n    const setBreakpoint = useCallback(\n        (mode: string) => {\n            editor.updateEditor(state => {\n                state.breakpoint = mode;\n            });\n        },\n        [editor]\n    );\n\n    return {\n        isBaseBreakpoint: breakpoint.name === BASE_BREAKPOINT,\n        breakpoint,\n        breakpoints: BREAKPOINTS,\n        setBreakpoint\n    };\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnD,SAASC,iBAAiB;AAC1B,SAASC,mBAAmB;AAE5B,SAASC,cAAc,IAAIC,UAAU,QAAQ,8BAA8B;AAC3E,SAASD,cAAc,IAAIE,UAAU,QAAQ,8BAA8B;AAC3E,SAASF,cAAc,IAAIG,UAAU,QAAQ,gCAAgC;AAC7E,SAASC,eAAe;AAQxB,MAAMC,WAA+B,GAAG,CACpC;EACIC,IAAI,EAAE,SAAS;EACfC,KAAK,EAAE,SAAS;EAChBC,WAAW,EAAE,kHAAkH;EAC/HC,IAAI,eAAEd,KAAA,CAAAe,aAAA,CAACT,UAAU,MAAE,CAAC;EACpBU,QAAQ,EAAE,CAAC;EACXC,QAAQ,EAAE;AACd,CAAC,EACD;EACIN,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAE,QAAQ;EACfC,WAAW,EAAE,gGAAgG;EAC7GC,IAAI,eAAEd,KAAA,CAAAe,aAAA,CAACR,UAAU,MAAE,CAAC;EACpBS,QAAQ,EAAE,CAAC;EACXC,QAAQ,EAAE;AACd,CAAC,EACD;EACIN,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAE,QAAQ;EACfC,WAAW,EAAE,iDAAiD;EAC9DC,IAAI,eAAEd,KAAA,CAAAe,aAAA,CAACP,UAAU,MAAE,CAAC;EACpBQ,QAAQ,EAAE,CAAC;EACXC,QAAQ,EAAE;AACd,CAAC,CACJ;AAED,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAM;EAC/B,MAAMC,MAAM,GAAGhB,iBAAiB,CAAC,CAAC;EAClC,MAAMiB,gBAAgB,GAAGhB,mBAAmB,CAASiB,KAAK,IAAI;IAC1D,OAAOA,KAAK,CAACC,UAAU,IAAIZ,WAAW,CAAC,CAAC,CAAC,CAACC,IAAI;EAClD,CAAC,CAAC;EAEF,MAAMW,UAAU,GAAGpB,OAAO,CAAC,MAAM;IAC7B,OAAOQ,WAAW,CAACa,IAAI,CAACC,EAAE,IAAIA,EAAE,CAACb,IAAI,KAAKS,gBAAgB,CAAC;EAC/D,CAAC,EAAE,CAACA,gBAAgB,CAAC,CAAC;EAEtB,MAAMK,aAAa,GAAGxB,WAAW,CAC5ByB,IAAY,IAAK;IACdP,MAAM,CAACQ,YAAY,CAACN,KAAK,IAAI;MACzBA,KAAK,CAACC,UAAU,GAAGI,IAAI;IAC3B,CAAC,CAAC;EACN,CAAC,EACD,CAACP,MAAM,CACX,CAAC;EAED,OAAO;IACHS,gBAAgB,EAAEN,UAAU,CAACX,IAAI,KAAKF,eAAe;IACrDa,UAAU;IACVO,WAAW,EAAEnB,WAAW;IACxBe;EACJ,CAAC;AACL,CAAC","ignoreList":[]}

package/BaseEditor/hooks/useComponent.d.ts

@@ -0,0 +1 @@
+export declare const useComponent: (name: string) => import("../../sdk").ComponentManifest;

package/BaseEditor/hooks/useComponent.js

@@ -0,0 +1,8 @@
+import { useCallback } from "react";
+import { useSelectFromEditor } from "./useSelectFromEditor";
+export const useComponent = name => {
+  const selector = useCallback(state => state.components[name], [name]);
+  return useSelectFromEditor(selector, [name]);
+};
+
+//# sourceMappingURL=useComponent.js.map

package/BaseEditor/hooks/useComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useSelectFromEditor","useComponent","name","selector","state","components"],"sources":["useComponent.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor\";\nimport { EditorState } from \"~/editorSdk/Editor\";\n\nexport const useComponent = (name: string) => {\n    const selector = useCallback((state: EditorState) => state.components[name], [name]);\n\n    return useSelectFromEditor(selector, [name]);\n};\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SAASC,mBAAmB;AAG5B,OAAO,MAAMC,YAAY,GAAIC,IAAY,IAAK;EAC1C,MAAMC,QAAQ,GAAGJ,WAAW,CAAEK,KAAkB,IAAKA,KAAK,CAACC,UAAU,CAACH,IAAI,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEpF,OAAOF,mBAAmB,CAACG,QAAQ,EAAE,CAACD,IAAI,CAAC,CAAC;AAChD,CAAC","ignoreList":[]}

package/BaseEditor/hooks/useElementInputsAst.d.ts

@@ -0,0 +1 @@
+export declare const useElementInputsAst: (elementId?: string) => import("../../sdk/ComponentManifestToAstConverter").InputAstNode[];

package/BaseEditor/hooks/useElementInputsAst.js

@@ -0,0 +1,14 @@
+import { useMemo } from "react";
+import { useElementComponentManifest } from "../defaultConfig/Content/Preview/useElementComponentManifest";
+import { ComponentManifestToAstConverter } from "../../sdk/ComponentManifestToAstConverter";
+export const useElementInputsAst = elementId => {
+  const componentManifest = useElementComponentManifest(elementId ?? "");
+  return useMemo(() => {
+    if (componentManifest) {
+      return ComponentManifestToAstConverter.convert(componentManifest.inputs ?? []);
+    }
+    return [];
+  }, [componentManifest?.inputs]);
+};
+
+//# sourceMappingURL=useElementInputsAst.js.map

package/BaseEditor/hooks/useElementInputsAst.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","useElementComponentManifest","ComponentManifestToAstConverter","useElementInputsAst","elementId","componentManifest","convert","inputs"],"sources":["useElementInputsAst.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useElementComponentManifest } from \"~/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest\";\nimport { ComponentManifestToAstConverter } from \"~/sdk/ComponentManifestToAstConverter\";\n\nexport const useElementInputsAst = (elementId?: string) => {\n    const componentManifest = useElementComponentManifest(elementId ?? \"\");\n\n    return useMemo(() => {\n        if (componentManifest) {\n            return ComponentManifestToAstConverter.convert(componentManifest.inputs ?? []);\n        }\n        return [];\n    }, [componentManifest?.inputs]);\n};\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,2BAA2B;AACpC,SAASC,+BAA+B;AAExC,OAAO,MAAMC,mBAAmB,GAAIC,SAAkB,IAAK;EACvD,MAAMC,iBAAiB,GAAGJ,2BAA2B,CAACG,SAAS,IAAI,EAAE,CAAC;EAEtE,OAAOJ,OAAO,CAAC,MAAM;IACjB,IAAIK,iBAAiB,EAAE;MACnB,OAAOH,+BAA+B,CAACI,OAAO,CAACD,iBAAiB,CAACE,MAAM,IAAI,EAAE,CAAC;IAClF;IACA,OAAO,EAAE;EACb,CAAC,EAAE,CAACF,iBAAiB,EAAEE,MAAM,CAAC,CAAC;AACnC,CAAC","ignoreList":[]}

package/BaseEditor/hooks/useInputValue.d.ts

@@ -0,0 +1 @@
+export * from "../defaultConfig/Sidebar/ElementSettings/useInputValue";

package/BaseEditor/hooks/useInputValue.js

@@ -0,0 +1,3 @@
+export * from "../defaultConfig/Sidebar/ElementSettings/useInputValue";
+
+//# sourceMappingURL=useInputValue.js.map

package/BaseEditor/hooks/useInputValue.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["useInputValue.ts"],"sourcesContent":["export * from \"../defaultConfig/Sidebar/ElementSettings/useInputValue\"\n"],"mappings":"AAAA","ignoreList":[]}

package/BaseEditor/hooks/useKeyHandler.d.ts

@@ -0,0 +1,8 @@
+import { SyntheticEvent } from "react";
+type AddKeyHandlerType = (key: string, handler: (e: SyntheticEvent<HTMLElement>) => void) => void;
+type RemoveKeyHandlerType = (key: string) => void;
+export declare function useKeyHandler(): {
+    addKeyHandler: AddKeyHandlerType;
+    removeKeyHandler: RemoveKeyHandlerType;
+};
+export {};