@gravity-ui/page-constructor 5.14.3 → 5.14.4-alpha.0

package/build/cjs/components/editor/ChildrenWrap/ChildrenWrap.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const useEditorBlockMouseEvents_1 = tslib_1.__importDefault(require("../../../containers/PageConstructor/components/ConstructorBlock/hooks/useEditorBlockMouseEvents"));
+const blockIdContext_1 = require("../../../context/blockIdContext");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('children-wrap');
+const ChildrenWrap = (props) => {
+    const { children } = props;
+    const parentBlockId = (0, react_1.useContext)(blockIdContext_1.BlockIdContext);
+    const { onMouseUp, onMouseMove } = (0, useEditorBlockMouseEvents_1.default)([parentBlockId, 0]);
+    return (react_1.default.createElement("div", { className: b(), onMouseMove: onMouseMove, onMouseUp: onMouseUp }, children));
+};
+exports.default = ChildrenWrap;

package/build/cjs/components/editor/ItemWrap/ItemWrap.css

@@ -0,0 +1,9 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-item-wrap {
+  height: 100%;
+}
+
+.pc-page-constructor_with-editor .pc-item-wrap {
+  cursor: pointer;
+}

package/build/cjs/components/editor/ItemWrap/ItemWrap.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+export interface ItemWrapProps extends PropsWithChildren {
+    index: number;
+}
+declare const ItemWrap: (props: ItemWrapProps) => JSX.Element;
+export default ItemWrap;

package/build/cjs/components/editor/ItemWrap/ItemWrap.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const useEditorBlockMouseEvents_1 = tslib_1.__importDefault(require("../../../containers/PageConstructor/components/ConstructorBlock/hooks/useEditorBlockMouseEvents"));
+const blockIdContext_1 = require("../../../context/blockIdContext");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('item-wrap');
+const ItemWrap = (props) => {
+    const { children, index } = props;
+    const parentBlockId = (0, react_1.useContext)(blockIdContext_1.BlockIdContext);
+    const adminBlockMouseEvents = (0, useEditorBlockMouseEvents_1.default)([parentBlockId, index]);
+    return (react_1.default.createElement("div", Object.assign({ className: b() }, adminBlockMouseEvents), children));
+};
+exports.default = ItemWrap;

package/build/cjs/constructor-items.d.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+import { ConfigInput } from './types/dynamic-form';
 export declare const blockMap: {
     "slider-block": (props: import("./models").WithChildren<import("./blocks/Slider/Slider").SliderProps>) => JSX.Element;
     "extended-features-block": ({ title, description, items, colSizes, animated, }: import("./models").ExtendedFeaturesProps) => JSX.Element;
@@ -12,12 +14,13 @@ export declare const blockMap: {
     "header-block": (props: import("./models").WithChildren<import("./models").HeaderBlockProps & import("./models").ClassNameProps>) => JSX.Element;
     "icons-block": ({ title, description, size, colSizes, items }: import("./models").IconsBlockProps) => JSX.Element;
     "header-slider-block": ({ items, arrows, ...props }: import("./models").HeaderSliderBlockProps) => JSX.Element;
-    "card-layout-block": import("react").FC<import("./blocks/CardLayout/CardLayout").CardLayoutBlockProps>;
+    "card-layout-block": React.FC<import("./blocks/CardLayout/CardLayout").CardLayoutBlockProps>;
     "content-layout-block": (props: import("./models").ContentLayoutBlockProps) => JSX.Element;
     "share-block": ({ items, title }: import("./models").ShareBlockProps) => JSX.Element;
     "map-block": ({ map, border, disableShadow, ...props }: import("./models").MapBlockProps) => JSX.Element;
-    "filter-block": import("react").FC<import("./models").FilterBlockProps>;
-    "form-block": import("react").FC<import("./models").FormBlockProps>;
+    "filter-block": React.FC<import("./models").FilterBlockProps>;
+    "form-block": React.FC<import("./models").FormBlockProps>;
+    "test-editor-block": (props: import("./blocks/TestEditorBlock/TestEditorBlock").TestEditorBlockProps) => JSX.Element;
 };
 export declare const subBlockMap: {
     divider: ({ size, border }: import("./models").DividerProps) => JSX.Element;
@@ -33,9 +36,18 @@ export declare const subBlockMap: {
     "image-card": (props: import("./models").ImageCardProps) => JSX.Element;
 };
 export declare const navItemMap: {
-    button: import("react").FC<Pick<import("./navigation/models").NavigationItemProps, "className"> & import("./models").ButtonProps>;
-    social: import("react").FC<import("./navigation/components/SocialIcon/SocialIcon").NavigationSocialItemOwnProps>;
+    button: React.FC<Pick<import("./navigation/models").NavigationItemProps, "className"> & import("./models").ButtonProps>;
+    social: React.FC<import("./navigation/components/SocialIcon/SocialIcon").NavigationSocialItemOwnProps>;
     dropdown: ({ text, icon, className, iconSize, hidePopup, items, isActive, ...props }: import("./navigation/models").NavigationItemProps & import("./models").NavigationDropdownItem) => JSX.Element;
-    link: import("react").FC<import("./navigation/models").NavigationItemProps & import("./models").NavigationLinkItem>;
+    link: React.FC<import("./navigation/models").NavigationItemProps & import("./models").NavigationLinkItem>;
     "github-button": ({ text, url, className, label, size, icon, urlTitle, }: import("./navigation/models").NavigationItemProps & import("./models").NavigationGithubButton) => JSX.Element;
 };
+export interface BlockData {
+    component: React.ComponentType<any>;
+    schema: {
+        name: string;
+        inputs: ConfigInput[];
+        default?: object;
+    };
+}
+export declare const blockDataMap: Record<string, BlockData>;

package/build/cjs/constructor-items.js

@@ -1,12 +1,44 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.navItemMap = exports.subBlockMap = exports.blockMap = void 0;
+exports.blockDataMap = exports.navItemMap = exports.subBlockMap = exports.blockMap = void 0;
 const tslib_1 = require("tslib");
 const blocks_1 = require("./blocks");
+const Banner_1 = tslib_1.__importDefault(require("./blocks/Banner"));
+const CardLayout_1 = tslib_1.__importDefault(require("./blocks/CardLayout"));
+const Companies_1 = tslib_1.__importDefault(require("./blocks/Companies"));
+const ContentLayout_1 = tslib_1.__importDefault(require("./blocks/ContentLayout"));
+const ExtendedFeatures_1 = tslib_1.__importDefault(require("./blocks/ExtendedFeatures"));
+const FilterBlock_1 = tslib_1.__importDefault(require("./blocks/FilterBlock"));
+const Form_1 = tslib_1.__importDefault(require("./blocks/Form"));
+const Header_1 = tslib_1.__importDefault(require("./blocks/Header"));
+const HeaderSlider_1 = tslib_1.__importDefault(require("./blocks/HeaderSlider"));
+const Icons_1 = tslib_1.__importDefault(require("./blocks/Icons"));
+const Info_1 = tslib_1.__importDefault(require("./blocks/Info"));
+const Map_1 = tslib_1.__importDefault(require("./blocks/Map"));
+const Media_1 = tslib_1.__importDefault(require("./blocks/Media"));
+const PromoFeaturesBlock_1 = tslib_1.__importDefault(require("./blocks/PromoFeaturesBlock"));
+const Questions_1 = tslib_1.__importDefault(require("./blocks/Questions"));
+const Share_1 = tslib_1.__importDefault(require("./blocks/Share"));
+const Slider_1 = tslib_1.__importDefault(require("./blocks/Slider"));
+const Table_1 = tslib_1.__importDefault(require("./blocks/Table"));
+const Tabs_1 = tslib_1.__importDefault(require("./blocks/Tabs"));
+const TestEditorBlock_1 = tslib_1.__importDefault(require("./blocks/TestEditorBlock"));
+const TestEditorBlock_2 = tslib_1.__importDefault(require("./blocks/TestEditorBlock/TestEditorBlock"));
 const models_1 = require("./models");
 const NavigationItem_1 = require("./navigation/components/NavigationItem");
 const SocialIcon_1 = tslib_1.__importDefault(require("./navigation/components/SocialIcon/SocialIcon"));
 const sub_blocks_1 = require("./sub-blocks");
+const BackgroundCard_1 = tslib_1.__importDefault(require("./sub-blocks/BackgroundCard"));
+const BannerCard_1 = tslib_1.__importDefault(require("./sub-blocks/BannerCard"));
+const BasicCard_1 = tslib_1.__importDefault(require("./sub-blocks/BasicCard"));
+const Content_1 = tslib_1.__importDefault(require("./sub-blocks/Content"));
+const Divider_1 = tslib_1.__importDefault(require("./sub-blocks/Divider"));
+const ImageCard_1 = tslib_1.__importDefault(require("./sub-blocks/ImageCard"));
+const form_1 = tslib_1.__importDefault(require("./sub-blocks/LayoutItem/form"));
+const MediaCard_1 = tslib_1.__importDefault(require("./sub-blocks/MediaCard"));
+const PriceCard_1 = tslib_1.__importDefault(require("./sub-blocks/PriceCard"));
+const PriceDetailed_1 = tslib_1.__importDefault(require("./sub-blocks/PriceDetailed"));
+const Quote_1 = tslib_1.__importDefault(require("./sub-blocks/Quote"));
 exports.blockMap = {
     [models_1.BlockType.SliderBlock]: blocks_1.SliderBlock,
     [models_1.BlockType.ExtendedFeaturesBlock]: blocks_1.ExtendedFeaturesBlock,
@@ -27,6 +59,7 @@ exports.blockMap = {
     [models_1.BlockType.MapBlock]: blocks_1.MapBlock,
     [models_1.BlockType.FilterBlock]: blocks_1.FilterBlock,
     [models_1.BlockType.FormBlock]: blocks_1.FormBlock,
+    [models_1.BlockType.TestEditorBlock]: TestEditorBlock_2.default,
 };
 exports.subBlockMap = {
     [models_1.SubBlockType.Divider]: sub_blocks_1.Divider,
@@ -48,3 +81,36 @@ exports.navItemMap = {
     [models_1.NavigationItemType.Link]: NavigationItem_1.NavigationLink,
     [models_1.NavigationItemType.GithubButton]: NavigationItem_1.GithubButton,
 };
+exports.blockDataMap = {
+    [models_1.BlockType.ExtendedFeaturesBlock]: ExtendedFeatures_1.default,
+    [models_1.BlockType.PromoFeaturesBlock]: PromoFeaturesBlock_1.default,
+    [models_1.BlockType.QuestionsBlock]: Questions_1.default,
+    [models_1.BlockType.BannerBlock]: Banner_1.default,
+    [models_1.BlockType.CompaniesBlock]: Companies_1.default,
+    [models_1.BlockType.MediaBlock]: Media_1.default,
+    [models_1.BlockType.InfoBlock]: Info_1.default,
+    [models_1.BlockType.TableBlock]: Table_1.default,
+    [models_1.BlockType.TabsBlock]: Tabs_1.default,
+    [models_1.BlockType.HeaderBlock]: Header_1.default,
+    [models_1.BlockType.IconsBlock]: Icons_1.default,
+    [models_1.BlockType.HeaderSliderBlock]: HeaderSlider_1.default,
+    [models_1.BlockType.CardLayoutBlock]: CardLayout_1.default,
+    [models_1.BlockType.ContentLayoutBlock]: ContentLayout_1.default,
+    [models_1.BlockType.ShareBlock]: Share_1.default,
+    [models_1.BlockType.MapBlock]: Map_1.default,
+    [models_1.BlockType.FilterBlock]: FilterBlock_1.default,
+    [models_1.BlockType.FormBlock]: Form_1.default,
+    [models_1.BlockType.TestEditorBlock]: TestEditorBlock_1.default,
+    [models_1.BlockType.SliderBlock]: Slider_1.default,
+    [models_1.SubBlockType.Divider]: Divider_1.default,
+    [models_1.SubBlockType.PriceDetailed]: PriceDetailed_1.default,
+    [models_1.SubBlockType.MediaCard]: MediaCard_1.default,
+    [models_1.SubBlockType.BannerCard]: BannerCard_1.default,
+    [models_1.SubBlockType.LayoutItem]: form_1.default,
+    [models_1.SubBlockType.BackgroundCard]: BackgroundCard_1.default,
+    [models_1.SubBlockType.BasicCard]: BasicCard_1.default,
+    [models_1.SubBlockType.Content]: Content_1.default,
+    [models_1.SubBlockType.Quote]: Quote_1.default,
+    [models_1.SubBlockType.PriceCard]: PriceCard_1.default,
+    [models_1.SubBlockType.ImageCard]: ImageCard_1.default,
+};

package/build/cjs/containers/PageConstructor/PageConstructor.js

@@ -4,22 +4,27 @@ exports.PageConstructor = exports.Constructor = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 require("@diplodoc/transform/dist/js/yfm");
+const uikit_1 = require("@gravity-ui/uikit");
 const BackgroundMedia_1 = tslib_1.__importDefault(require("../../components/BackgroundMedia/BackgroundMedia"));
 const RootCn_1 = tslib_1.__importDefault(require("../../components/RootCn"));
 const constructor_items_1 = require("../../constructor-items");
 const animateContext_1 = require("../../context/animateContext");
+const editorContext_1 = require("../../context/editorContext");
 const innerContext_1 = require("../../context/innerContext");
 const theme_1 = require("../../context/theme");
-const grid_1 = require("../../grid");
+const useEditorInitialize_1 = tslib_1.__importDefault(require("../../hooks/useEditorInitialize"));
 const models_1 = require("../../models");
 const Layout_1 = tslib_1.__importDefault(require("../../navigation/containers/Layout/Layout"));
 const utils_1 = require("../../utils");
-const ConstructorBlocks_1 = require("./components/ConstructorBlocks");
-const ConstructorItem_1 = require("./components/ConstructorItem");
+const components_1 = require("./components");
 const ConstructorRow_1 = require("./components/ConstructorRow");
 const b = (0, utils_1.block)('page-constructor');
 const Constructor = (props) => {
     const { content: { blocks = [], background } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
+    const [content, setContent] = (0, react_1.useState)({ blocks, background });
+    const theme = (0, theme_1.useTheme)();
+    const { initialized } = (0, editorContext_1.useEditorStore)();
+    (0, useEditorInitialize_1.default)({ content, setContent });
     const { context } = (0, react_1.useMemo)(() => ({
         context: {
             blockTypes: [...models_1.BlockTypes, ...(0, utils_1.getCustomTypes)(['blocks', 'headers'], custom)],
@@ -38,24 +43,22 @@ const Constructor = (props) => {
             },
         },
     }), [custom, shouldRenderBlock]);
-    const theme = (0, theme_1.useTheme)();
-    const header = (0, utils_1.getHeaderBlock)(blocks, context.headerBlockTypes);
-    const restBlocks = (0, utils_1.getOrderedBlocks)(blocks, context.headerBlockTypes);
-    const themedBackground = (0, utils_1.getThemedValue)(background, theme);
+    const restBlocks = content.blocks;
+    const themedBackground = (0, utils_1.getThemedValue)(content.background, theme);
     return (react_1.default.createElement(innerContext_1.InnerContext.Provider, { value: context },
-        react_1.default.createElement(RootCn_1.default, { className: b() },
+        react_1.default.createElement(RootCn_1.default, { className: b('', { ['with-editor']: initialized }) },
             react_1.default.createElement("div", { className: b('wrapper') },
                 themedBackground && (react_1.default.createElement(BackgroundMedia_1.default, Object.assign({}, themedBackground, { className: b('background') }))),
                 react_1.default.createElement(Layout_1.default, { navigation: navigation },
                     renderMenu && renderMenu(),
-                    header && (react_1.default.createElement(ConstructorItem_1.ConstructorHeader, { data: header, blockKey: models_1.BlockType.HeaderBlock })),
-                    react_1.default.createElement(grid_1.Grid, null, restBlocks && (react_1.default.createElement(ConstructorRow_1.ConstructorRow, null,
-                        react_1.default.createElement(ConstructorBlocks_1.ConstructorBlocks, { items: restBlocks })))))))));
+                    restBlocks && (react_1.default.createElement(ConstructorRow_1.ConstructorRow, null,
+                        react_1.default.createElement(components_1.ConstructorBlocks, { items: restBlocks }))))))));
 };
 exports.Constructor = Constructor;
 const PageConstructor = (props) => {
     const { content: { animated = true } = {} } = props, rest = tslib_1.__rest(props, ["content"]);
-    return (react_1.default.createElement(animateContext_1.AnimateContext.Provider, { value: { animated } },
-        react_1.default.createElement(exports.Constructor, Object.assign({ content: props.content }, rest))));
+    return (react_1.default.createElement(uikit_1.ThemeProvider, null,
+        react_1.default.createElement(animateContext_1.AnimateContext.Provider, { value: { animated } },
+            react_1.default.createElement(exports.Constructor, Object.assign({ content: props.content }, rest)))));
 };
 exports.PageConstructor = PageConstructor;

package/build/cjs/containers/PageConstructor/Provider.js

@@ -5,11 +5,13 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const constants_1 = require("../../components/constants");
 const analyticsContext_1 = require("../../context/analyticsContext");
+const editorContext_1 = require("../../context/editorContext");
 const FormsContext_1 = require("../../context/formsContext/FormsContext");
 const imageContext_1 = require("../../context/imageContext");
 const localeContext_1 = require("../../context/localeContext");
 const locationContext_1 = require("../../context/locationContext");
 const mapsContext_1 = require("../../context/mapsContext/mapsContext");
+const messagesContext_1 = require("../../context/messagesContext");
 const mobileContext_1 = require("../../context/mobileContext");
 const projectSettingsContext_1 = require("../../context/projectSettingsContext");
 const ssrContext_1 = require("../../context/ssrContext");
@@ -28,6 +30,8 @@ const PageConstructorProvider = (props) => {
         react_1.default.createElement(analyticsContext_1.AnalyticsContext.Provider, { value: analytics }),
         react_1.default.createElement(FormsContext_1.FormsContext.Provider, { value: forms }),
         react_1.default.createElement(ssrContext_1.SSRContext.Provider, { value: { isServer: ssrConfig === null || ssrConfig === void 0 ? void 0 : ssrConfig.isServer } }),
+        react_1.default.createElement(editorContext_1.EditorProvider, null),
+        react_1.default.createElement(messagesContext_1.PostMessageProvider, null),
     ].reduceRight((prev, provider) => react_1.default.cloneElement(provider, {}, prev), children);
     /* eslint-enable react/jsx-key */
     return react_1.default.createElement(react_1.Fragment, null, context);

package/build/cjs/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.css

@@ -1,22 +1,22 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-constructor-block.pc-constructor-block.pc-constructor-block.pc-constructor-block_indentTop_0 {
-  margin-top: 0;
+  padding-top: 0;
 }
 .pc-constructor-block.pc-constructor-block.pc-constructor-block.pc-constructor-block_indentTop_xs {
-  margin-top: 16px;
+  padding-top: 16px;
 }
 .pc-constructor-block.pc-constructor-block.pc-constructor-block.pc-constructor-block_indentTop_s {
-  margin-top: 24px;
+  padding-top: 24px;
 }
 .pc-constructor-block.pc-constructor-block.pc-constructor-block.pc-constructor-block_indentTop_m {
-  margin-top: 32px;
+  padding-top: 32px;
 }
 .pc-constructor-block.pc-constructor-block.pc-constructor-block.pc-constructor-block_indentTop_l {
-  margin-top: 48px;
+  padding-top: 48px;
 }
 .pc-constructor-block.pc-constructor-block.pc-constructor-block.pc-constructor-block_indentTop_xl {
-  margin-top: 64px;
+  padding-top: 64px;
 }
 .pc-constructor-block.pc-constructor-block.pc-constructor-block.pc-constructor-block_indentBottom_0 {
   padding-bottom: 0;
@@ -35,4 +35,8 @@ unpredictable css rules order in build */
 }
 .pc-constructor-block.pc-constructor-block.pc-constructor-block.pc-constructor-block_indentBottom_xl {
   padding-bottom: 64px;
+}
+
+.pc-page-constructor_with-editor .pc-constructor-block {
+  cursor: pointer;
 }

package/build/cjs/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.js

@@ -7,11 +7,14 @@ const pick_1 = tslib_1.__importDefault(require("lodash/pick"));
 const BlockBase_1 = tslib_1.__importDefault(require("../../../../components/BlockBase/BlockBase"));
 const BlockDecoration_1 = require("../../../../customization/BlockDecoration");
 const utils_1 = require("../../../../utils");
+const useEditorBlockMouseEvents_1 = tslib_1.__importDefault(require("./hooks/useEditorBlockMouseEvents"));
 const b = (0, utils_1.block)('constructor-block');
 const ConstructorBlock = ({ index = 0, data, children, }) => {
+    const adminBlockMouseEvents = (0, useEditorBlockMouseEvents_1.default)([index]);
     const { type } = data;
     const blockBaseProps = (0, react_1.useMemo)(() => (0, pick_1.default)(data, ['anchor', 'visible', 'resetPaddings', 'indent']), [data]);
-    return (react_1.default.createElement(BlockDecoration_1.BlockDecoration, Object.assign({ type: type, index: index }, blockBaseProps),
-        react_1.default.createElement(BlockBase_1.default, Object.assign({ className: b({ type }) }, blockBaseProps), children)));
+    return (react_1.default.createElement("div", Object.assign({}, adminBlockMouseEvents),
+        react_1.default.createElement(BlockDecoration_1.BlockDecoration, Object.assign({ type: type, index: index }, blockBaseProps),
+            react_1.default.createElement(BlockBase_1.default, Object.assign({ className: b({ type }) }, blockBaseProps), children))));
 };
 exports.ConstructorBlock = ConstructorBlock;

package/build/cjs/containers/PageConstructor/components/ConstructorBlock/hooks/useEditorBlockMouseEvents.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const useEditorBlockMouseEvents: (arrayIndex: number[]) => {
+    onClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onMouseMove: (event: React.MouseEvent) => void;
+    onMouseUp: (event: React.MouseEvent) => void;
+    onMouseLeave: (e: React.MouseEvent) => void;
+};
+export default useEditorBlockMouseEvents;

package/build/cjs/containers/PageConstructor/components/ConstructorBlock/hooks/useEditorBlockMouseEvents.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const editorContext_1 = require("../../../../../context/editorContext");
+const useMessageSender_1 = require("../../../../../context/messagesContext/hooks/useMessageSender");
+const actions_1 = require("../../../../../types/actions");
+const editor_1 = require("../../../../../utils/editor");
+const useEditorBlockMouseEvents = (arrayIndex) => {
+    const sendMessage = (0, useMessageSender_1.useMessageSender)();
+    const { manipulateOverlayMode } = (0, editorContext_1.useEditorStore)();
+    const { setActiveElement } = (0, react_1.useContext)(editorContext_1.EditorContext);
+    const onMouseUp = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (manipulateOverlayMode) {
+            const rect = event.currentTarget.getClientRects().item(0);
+            if (rect) {
+                const position = (0, editor_1.getCursorPositionOverElement)(rect, event);
+                let newLastIndex = arrayIndex[arrayIndex.length - 1];
+                if (position === 'right' || position === 'bottom') {
+                    newLastIndex += 1;
+                }
+                const newArrayIndex = [
+                    ...arrayIndex.slice(0, arrayIndex.length - 1),
+                    newLastIndex,
+                ];
+                if (manipulateOverlayMode === 'insert') {
+                    sendMessage({
+                        type: actions_1.ActionTypes.InsertBlock,
+                        payload: {
+                            path: newArrayIndex,
+                        },
+                    });
+                }
+                else if (manipulateOverlayMode === 'reorder') {
+                    sendMessage({
+                        type: actions_1.ActionTypes.ReorderBlocks,
+                        payload: {
+                            path: newArrayIndex,
+                        },
+                    });
+                }
+            }
+        }
+    }, [arrayIndex, manipulateOverlayMode, sendMessage]);
+    const onMouseMove = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (manipulateOverlayMode) {
+            const rect = event.currentTarget.getClientRects().item(0);
+            if (rect) {
+                const cursorPosition = (0, editor_1.getCursorPositionOverElement)(rect, event);
+                sendMessage({
+                    type: actions_1.ActionTypes.OverlayModeOnMove,
+                    payload: {
+                        block: { rect, cursorPosition },
+                        cursor: {
+                            x: event.clientX,
+                            y: event.clientY,
+                        },
+                    },
+                });
+            }
+        }
+    }, [manipulateOverlayMode, sendMessage]);
+    const onMouseLeave = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        if (manipulateOverlayMode) {
+            const rect = e.currentTarget.getClientRects().item(0);
+            if (rect) {
+                sendMessage({
+                    type: actions_1.ActionTypes.OverlayModeOnMove,
+                    payload: {
+                        cursor: {
+                            x: e.clientX,
+                            y: e.clientY,
+                        },
+                    },
+                });
+            }
+        }
+        else {
+        }
+    }, [manipulateOverlayMode, sendMessage]);
+    const onClick = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        if (!manipulateOverlayMode) {
+            const element = e.currentTarget;
+            const rect = element.getClientRects().item(0);
+            if (rect) {
+                setActiveElement(element);
+                sendMessage({
+                    type: actions_1.ActionTypes.SelectBlock,
+                    payload: {
+                        path: arrayIndex,
+                        rect: rect,
+                    },
+                });
+            }
+        }
+    }, [arrayIndex, manipulateOverlayMode, sendMessage, setActiveElement]);
+    return {
+        onClick,
+        onMouseMove,
+        onMouseUp,
+        onMouseLeave,
+    };
+};
+exports.default = useEditorBlockMouseEvents;

package/build/cjs/containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.js

@@ -11,8 +11,9 @@ const ConstructorBlock_1 = require("../ConstructorBlock/ConstructorBlock");
 const ConstructorItem_1 = require("../ConstructorItem");
 const ConstructorLoadable_1 = require("../ConstructorLoadable");
 const ConstructorBlocks = ({ items }) => {
-    const { blockTypes, loadables, itemMap, shouldRenderBlock } = (0, react_1.useContext)(innerContext_1.InnerContext);
-    const renderer = (parentId = '', item, index) => {
+    const { blockTypes, subBlockTypes, loadables, itemMap, shouldRenderBlock } = (0, react_1.useContext)(innerContext_1.InnerContext);
+    const allBlocks = [...blockTypes, ...subBlockTypes];
+    const renderer = (parentId = '', withoutConstructorBlockWrapper = false, item, index) => {
         if (!itemMap[item.type]) {
             return parentId ? null : (react_1.default.createElement(BlockDecoration_1.BlockDecoration, { type: item.type, index: index }, null));
         }
@@ -33,15 +34,15 @@ const ConstructorBlocks = ({ items }) => {
         else {
             let children;
             if ('children' in item && item.children) {
-                children = item.children.map(renderer.bind(null, blockId));
+                children = item.children.map(renderer.bind(null, blockId, true));
             }
-            itemElement = (react_1.default.createElement(ConstructorItem_1.ConstructorItem, { data: item, key: blockId, blockKey: blockId }, children));
+            itemElement = (react_1.default.createElement(ConstructorItem_1.ConstructorItem, { data: item, key: blockId, blockKey: index }, children));
         }
-        return blockTypes.includes(item.type) ? (
+        return allBlocks.includes(item.type) && !withoutConstructorBlockWrapper ? (
         //TODO: replace ConstructorBlock (and delete it) with BlockBase when all
         // components relying on constructor inner structure like Slider or blog-constructor will be refactored
         react_1.default.createElement(ConstructorBlock_1.ConstructorBlock, { data: item, key: blockId, index: index }, itemElement)) : (itemElement);
     };
-    return react_1.default.createElement(react_1.Fragment, null, items.map(renderer.bind(null, '')));
+    return react_1.default.createElement(react_1.Fragment, null, items.map(renderer.bind(null, '', false)));
 };
 exports.ConstructorBlocks = ConstructorBlocks;

package/build/cjs/containers/PageConstructor/components/ConstructorItem/ConstructorItem.d.ts

@@ -1,7 +1,7 @@
 import { ConstructorBlock, WithChildren } from '../../../../models';
 export interface ConstructorItemProps {
     data: ConstructorBlock;
-    blockKey: string;
+    blockKey: number;
 }
 export declare const ConstructorItem: ({ data, blockKey, children }: WithChildren<ConstructorItemProps>) => JSX.Element;
 export declare const ConstructorHeader: ({ data, blockKey, }: Pick<ConstructorItemProps, 'data' | 'blockKey'>) => JSX.Element;

package/build/cjs/containers/PageConstructor/components/ConstructorItem/ConstructorItem.js

@@ -10,7 +10,7 @@ const ConstructorItem = ({ data, blockKey, children }) => {
     const { itemMap } = (0, react_1.useContext)(innerContext_1.InnerContext);
     const { type } = data, rest = tslib_1.__rest(data, ["type"]);
     const Component = itemMap[type];
-    return (react_1.default.createElement(blockIdContext_1.BlockIdContext.Provider, { value: blockKey },
+    return (react_1.default.createElement(blockIdContext_1.BlockIdContext.Provider, { value: blockKey, key: blockKey },
         react_1.default.createElement(Component, Object.assign({}, rest), children)));
 };
 exports.ConstructorItem = ConstructorItem;

package/build/cjs/containers/PageConstructor/components/ConstructorLoadable/ConstructorLoadable.js

@@ -12,7 +12,7 @@ const ConstructorLoadable = (props) => {
     const { type } = block;
     const { fetch, component: ChildComponent } = config;
     const Component = itemMap[type];
-    return (react_1.default.createElement(blockIdContext_1.BlockIdContext.Provider, { value: blockKey, key: blockKey },
+    return (react_1.default.createElement(blockIdContext_1.BlockIdContext.Provider, { value: Number(blockKey), key: blockKey },
         react_1.default.createElement(Loadable_1.default, { key: blockKey, block: block, blockKey: blockKey, Component: Component, ChildComponent: ChildComponent, fetch: fetch, serviceId: serviceId, params: params })));
 };
 exports.ConstructorLoadable = ConstructorLoadable;

package/build/cjs/containers/PageConstructor/components/ConstructorRow/ConstructorRow.js

@@ -3,9 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConstructorRow = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const grid_1 = require("../../../../grid");
 const utils_1 = require("../../../../utils");
 const b = (0, utils_1.block)('constructor-row');
-const ConstructorRow = ({ children }) => children ? (react_1.default.createElement(grid_1.Row, { className: b() },
-    react_1.default.createElement(grid_1.Col, null, children))) : null;
+const ConstructorRow = ({ children }) => children ? react_1.default.createElement("div", { className: b() }, children) : null;
 exports.ConstructorRow = ConstructorRow;

package/build/cjs/context/blockIdContext/blockIdContext.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export type BlockIdContextProp = string;
-export declare const BlockIdContext: React.Context<string>;
+export type BlockIdContextProp = number;
+export declare const BlockIdContext: React.Context<number>;

package/build/cjs/context/blockIdContext/blockIdContext.js

@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BlockIdContext = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-exports.BlockIdContext = react_1.default.createContext('');
+exports.BlockIdContext = react_1.default.createContext(NaN);

package/build/cjs/context/editorContext/editorContext.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Context for managing internal Editor states
+ * Same exist in Editor
+ **/
+import React from 'react';
+import { StoreApi } from 'zustand';
+import { EditorStore } from './store';
+export interface EditorContextProps {
+    state?: StoreApi<EditorStore>;
+    activeElement?: HTMLElement;
+    setActiveElement: (element: HTMLElement) => void;
+}
+export declare const EditorContext: React.Context<EditorContextProps>;

package/build/cjs/context/editorContext/editorContext.js

@@ -0,0 +1,10 @@
+"use strict";
+/**
+ * Context for managing internal Editor states
+ * Same exist in Editor
+ **/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorContext = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+exports.EditorContext = react_1.default.createContext({ setActiveElement: () => { } });

package/build/cjs/context/editorContext/editorProvider.d.ts

@@ -0,0 +1,2 @@
+import React, { PropsWithChildren } from 'react';
+export declare const EditorProvider: React.FC<PropsWithChildren>;

package/build/cjs/context/editorContext/editorProvider.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorProvider = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const editorContext_1 = require("./editorContext");
+const store_1 = require("./store");
+const EditorProvider = ({ children }) => {
+    const storeRef = (0, react_1.useRef)();
+    const [activeElement, setActiveElement] = (0, react_1.useState)();
+    if (!storeRef.current) {
+        storeRef.current = (0, store_1.createEditorStore)();
+    }
+    return (react_1.default.createElement(editorContext_1.EditorContext.Provider, { value: {
+            state: storeRef.current,
+            activeElement: activeElement,
+            setActiveElement: setActiveElement,
+        } }, children));
+};
+exports.EditorProvider = EditorProvider;

package/build/cjs/context/editorContext/hooks/useEditorStore.d.ts

@@ -0,0 +1,2 @@
+export declare const useEditorStore: () => import("..").EditorStore;
+export default useEditorStore;

package/build/cjs/context/editorContext/hooks/useEditorStore.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEditorStore = void 0;
+const react_1 = require("react");
+const zustand_1 = require("zustand");
+const editorContext_1 = require("../editorContext");
+const useEditorStore = () => {
+    const { state } = (0, react_1.useContext)(editorContext_1.EditorContext);
+    if (!state) {
+        throw new Error('Missing EditorContext');
+    }
+    return (0, zustand_1.useStore)(state);
+};
+exports.useEditorStore = useEditorStore;
+exports.default = exports.useEditorStore;

package/build/cjs/context/editorContext/index.d.ts

@@ -0,0 +1,4 @@
+export * from './editorContext';
+export * from './editorProvider';
+export * from './hooks/useEditorStore';
+export * from './store';