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

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

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

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

@@ -0,0 +1,13 @@
+import React, { useContext } from 'react';
+import useEditorBlockMouseEvents from '../../../containers/PageConstructor/components/ConstructorBlock/hooks/useEditorBlockMouseEvents';
+import { BlockIdContext } from '../../../context/blockIdContext';
+import { block } from '../../../utils';
+import './ItemWrap.css';
+const b = block('item-wrap');
+const ItemWrap = (props) => {
+    const { children, index } = props;
+    const parentBlockId = useContext(BlockIdContext);
+    const adminBlockMouseEvents = useEditorBlockMouseEvents([parentBlockId, index]);
+    return (React.createElement("div", Object.assign({ className: b() }, adminBlockMouseEvents), children));
+};
+export default ItemWrap;

package/build/esm/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/esm/constructor-items.js

@@ -1,8 +1,40 @@
 import { BannerBlock, CardLayoutBlock, CompaniesBlock, ContentLayoutBlock, ExtendedFeaturesBlock, FilterBlock, FormBlock, HeaderBlock, HeaderSliderBlock, IconsBlock, InfoBlock, MapBlock, MediaBlock, PromoFeaturesBlock, QuestionsBlock, ShareBlock, SliderBlock, TableBlock, TabsBlock, } from './blocks';
+import BannerBlockConfig from './blocks/Banner';
+import CardLayoutBlockConfig from './blocks/CardLayout';
+import CompaniesBlockConfig from './blocks/Companies';
+import ContentLayoutBlockConfig from './blocks/ContentLayout';
+import ExtendedFeaturesBlockConfig from './blocks/ExtendedFeatures';
+import FilterBlockConfig from './blocks/FilterBlock';
+import FormBlockConfig from './blocks/Form';
+import HeaderBlockConfig from './blocks/Header';
+import HeaderSliderBlockConfig from './blocks/HeaderSlider';
+import IconsBlockConfig from './blocks/Icons';
+import InfoBlockConfig from './blocks/Info';
+import MapBlockConfig from './blocks/Map';
+import MediaBlockConfig from './blocks/Media';
+import PromoFeaturesBlockConfig from './blocks/PromoFeaturesBlock';
+import QuestionsBlockConfig from './blocks/Questions';
+import ShareBlockConfig from './blocks/Share';
+import SliderBlockConfig from './blocks/Slider';
+import TableBlockConfig from './blocks/Table';
+import TabsBlockConfig from './blocks/Tabs';
+import TestEditorBlockConfig from './blocks/TestEditorBlock';
+import TestEditorBlock from './blocks/TestEditorBlock/TestEditorBlock';
 import { BlockType, NavigationItemType, SubBlockType } from './models';
 import { GithubButton, NavigationButton, NavigationDropdown, NavigationLink, } from './navigation/components/NavigationItem';
 import SocialIcon from './navigation/components/SocialIcon/SocialIcon';
 import { BackgroundCard, BannerCard, BasicCard, Content, Divider, ImageCard, LayoutItem, MediaCard, PriceCard, PriceDetailed, Quote, } from './sub-blocks';
+import BackgroundCardConfig from './sub-blocks/BackgroundCard';
+import BannerCardConfig from './sub-blocks/BannerCard';
+import BasicCardConfig from './sub-blocks/BasicCard';
+import ContentConfig from './sub-blocks/Content';
+import DividerConfig from './sub-blocks/Divider';
+import ImageCardConfig from './sub-blocks/ImageCard';
+import LayoutItemConfig from './sub-blocks/LayoutItem/form';
+import MediaCardConfig from './sub-blocks/MediaCard';
+import PriceCardConfig from './sub-blocks/PriceCard';
+import PriceDetailedConfig from './sub-blocks/PriceDetailed';
+import QuoteConfig from './sub-blocks/Quote';
 export const blockMap = {
     [BlockType.SliderBlock]: SliderBlock,
     [BlockType.ExtendedFeaturesBlock]: ExtendedFeaturesBlock,
@@ -23,6 +55,7 @@ export const blockMap = {
     [BlockType.MapBlock]: MapBlock,
     [BlockType.FilterBlock]: FilterBlock,
     [BlockType.FormBlock]: FormBlock,
+    [BlockType.TestEditorBlock]: TestEditorBlock,
 };
 export const subBlockMap = {
     [SubBlockType.Divider]: Divider,
@@ -44,3 +77,36 @@ export const navItemMap = {
     [NavigationItemType.Link]: NavigationLink,
     [NavigationItemType.GithubButton]: GithubButton,
 };
+export const blockDataMap = {
+    [BlockType.ExtendedFeaturesBlock]: ExtendedFeaturesBlockConfig,
+    [BlockType.PromoFeaturesBlock]: PromoFeaturesBlockConfig,
+    [BlockType.QuestionsBlock]: QuestionsBlockConfig,
+    [BlockType.BannerBlock]: BannerBlockConfig,
+    [BlockType.CompaniesBlock]: CompaniesBlockConfig,
+    [BlockType.MediaBlock]: MediaBlockConfig,
+    [BlockType.InfoBlock]: InfoBlockConfig,
+    [BlockType.TableBlock]: TableBlockConfig,
+    [BlockType.TabsBlock]: TabsBlockConfig,
+    [BlockType.HeaderBlock]: HeaderBlockConfig,
+    [BlockType.IconsBlock]: IconsBlockConfig,
+    [BlockType.HeaderSliderBlock]: HeaderSliderBlockConfig,
+    [BlockType.CardLayoutBlock]: CardLayoutBlockConfig,
+    [BlockType.ContentLayoutBlock]: ContentLayoutBlockConfig,
+    [BlockType.ShareBlock]: ShareBlockConfig,
+    [BlockType.MapBlock]: MapBlockConfig,
+    [BlockType.FilterBlock]: FilterBlockConfig,
+    [BlockType.FormBlock]: FormBlockConfig,
+    [BlockType.TestEditorBlock]: TestEditorBlockConfig,
+    [BlockType.SliderBlock]: SliderBlockConfig,
+    [SubBlockType.Divider]: DividerConfig,
+    [SubBlockType.PriceDetailed]: PriceDetailedConfig,
+    [SubBlockType.MediaCard]: MediaCardConfig,
+    [SubBlockType.BannerCard]: BannerCardConfig,
+    [SubBlockType.LayoutItem]: LayoutItemConfig,
+    [SubBlockType.BackgroundCard]: BackgroundCardConfig,
+    [SubBlockType.BasicCard]: BasicCardConfig,
+    [SubBlockType.Content]: ContentConfig,
+    [SubBlockType.Quote]: QuoteConfig,
+    [SubBlockType.PriceCard]: PriceCardConfig,
+    [SubBlockType.ImageCard]: ImageCardConfig,
+};

package/build/esm/containers/PageConstructor/PageConstructor.js

@@ -1,23 +1,28 @@
 import { __rest } from "tslib";
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import '@diplodoc/transform/dist/js/yfm';
+import { ThemeProvider } from '@gravity-ui/uikit';
 import BackgroundMedia from '../../components/BackgroundMedia/BackgroundMedia';
 import RootCn from '../../components/RootCn';
 import { blockMap, navItemMap, subBlockMap } from '../../constructor-items';
 import { AnimateContext } from '../../context/animateContext';
+import { useEditorStore } from '../../context/editorContext';
 import { InnerContext } from '../../context/innerContext';
 import { useTheme } from '../../context/theme';
-import { Grid } from '../../grid';
-import { BlockType, BlockTypes, HeaderBlockTypes, NavigationItemTypes, SubBlockTypes, } from '../../models';
+import useEditorInitialize from '../../hooks/useEditorInitialize';
+import { BlockTypes, HeaderBlockTypes, NavigationItemTypes, SubBlockTypes, } from '../../models';
 import Layout from '../../navigation/containers/Layout/Layout';
-import { block as cnBlock, getCustomItems, getCustomTypes, getHeaderBlock, getOrderedBlocks, getThemedValue, } from '../../utils';
-import { ConstructorBlocks } from './components/ConstructorBlocks';
-import { ConstructorHeader } from './components/ConstructorItem';
+import { block as cnBlock, getCustomItems, getCustomTypes, getThemedValue } from '../../utils';
+import { ConstructorBlocks } from './components';
 import { ConstructorRow } from './components/ConstructorRow';
 import './PageConstructor.css';
 const b = cnBlock('page-constructor');
 export const Constructor = (props) => {
     const { content: { blocks = [], background } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
+    const [content, setContent] = useState({ blocks, background });
+    const theme = useTheme();
+    const { initialized } = useEditorStore();
+    useEditorInitialize({ content, setContent });
     const { context } = useMemo(() => ({
         context: {
             blockTypes: [...BlockTypes, ...getCustomTypes(['blocks', 'headers'], custom)],
@@ -36,22 +41,20 @@ export const Constructor = (props) => {
             },
         },
     }), [custom, shouldRenderBlock]);
-    const theme = useTheme();
-    const header = getHeaderBlock(blocks, context.headerBlockTypes);
-    const restBlocks = getOrderedBlocks(blocks, context.headerBlockTypes);
-    const themedBackground = getThemedValue(background, theme);
+    const restBlocks = content.blocks;
+    const themedBackground = getThemedValue(content.background, theme);
     return (React.createElement(InnerContext.Provider, { value: context },
-        React.createElement(RootCn, { className: b() },
+        React.createElement(RootCn, { className: b('', { ['with-editor']: initialized }) },
             React.createElement("div", { className: b('wrapper') },
                 themedBackground && (React.createElement(BackgroundMedia, Object.assign({}, themedBackground, { className: b('background') }))),
                 React.createElement(Layout, { navigation: navigation },
                     renderMenu && renderMenu(),
-                    header && (React.createElement(ConstructorHeader, { data: header, blockKey: BlockType.HeaderBlock })),
-                    React.createElement(Grid, null, restBlocks && (React.createElement(ConstructorRow, null,
-                        React.createElement(ConstructorBlocks, { items: restBlocks })))))))));
+                    restBlocks && (React.createElement(ConstructorRow, null,
+                        React.createElement(ConstructorBlocks, { items: restBlocks }))))))));
 };
 export const PageConstructor = (props) => {
     const { content: { animated = true } = {} } = props, rest = __rest(props, ["content"]);
-    return (React.createElement(AnimateContext.Provider, { value: { animated } },
-        React.createElement(Constructor, Object.assign({ content: props.content }, rest))));
+    return (React.createElement(ThemeProvider, null,
+        React.createElement(AnimateContext.Provider, { value: { animated } },
+            React.createElement(Constructor, Object.assign({ content: props.content }, rest)))));
 };

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

@@ -1,11 +1,13 @@
 import React, { Fragment } from 'react';
 import { DEFAULT_THEME } from '../../components/constants';
 import { AnalyticsContext } from '../../context/analyticsContext';
+import { EditorProvider } from '../../context/editorContext';
 import { DEFAULT_FORMS_CONTEXT_VALUE, FormsContext, } from '../../context/formsContext/FormsContext';
 import { ImageContext } from '../../context/imageContext';
 import { LocaleContext } from '../../context/localeContext';
 import { LocationContext } from '../../context/locationContext';
 import { MapsContext, initialMapValue } from '../../context/mapsContext/mapsContext';
+import { PostMessageProvider } from '../../context/messagesContext';
 import { MobileContext } from '../../context/mobileContext';
 import { ProjectSettingsContext, } from '../../context/projectSettingsContext';
 import { SSRContext } from '../../context/ssrContext';
@@ -24,6 +26,8 @@ export const PageConstructorProvider = (props) => {
         React.createElement(AnalyticsContext.Provider, { value: analytics }),
         React.createElement(FormsContext.Provider, { value: forms }),
         React.createElement(SSRContext.Provider, { value: { isServer: ssrConfig === null || ssrConfig === void 0 ? void 0 : ssrConfig.isServer } }),
+        React.createElement(EditorProvider, null),
+        React.createElement(PostMessageProvider, null),
     ].reduceRight((prev, provider) => React.cloneElement(provider, {}, prev), children);
     /* eslint-enable react/jsx-key */
     return React.createElement(Fragment, null, context);

package/build/esm/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/esm/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.js

@@ -3,11 +3,14 @@ import pick from 'lodash/pick';
 import BlockBase from '../../../../components/BlockBase/BlockBase';
 import { BlockDecoration } from '../../../../customization/BlockDecoration';
 import { block } from '../../../../utils';
+import useEditorBlockMouseEvents from './hooks/useEditorBlockMouseEvents';
 import './ConstructorBlock.css';
 const b = block('constructor-block');
 export const ConstructorBlock = ({ index = 0, data, children, }) => {
+    const adminBlockMouseEvents = useEditorBlockMouseEvents([index]);
     const { type } = data;
     const blockBaseProps = useMemo(() => pick(data, ['anchor', 'visible', 'resetPaddings', 'indent']), [data]);
-    return (React.createElement(BlockDecoration, Object.assign({ type: type, index: index }, blockBaseProps),
-        React.createElement(BlockBase, Object.assign({ className: b({ type }) }, blockBaseProps), children)));
+    return (React.createElement("div", Object.assign({}, adminBlockMouseEvents),
+        React.createElement(BlockDecoration, Object.assign({ type: type, index: index }, blockBaseProps),
+            React.createElement(BlockBase, Object.assign({ className: b({ type }) }, blockBaseProps), children))));
 };

package/build/esm/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/esm/containers/PageConstructor/components/ConstructorBlock/hooks/useEditorBlockMouseEvents.js

@@ -0,0 +1,107 @@
+import { useCallback, useContext } from 'react';
+import { EditorContext, useEditorStore } from '../../../../../context/editorContext';
+import { useMessageSender } from '../../../../../context/messagesContext/hooks/useMessageSender';
+import { ActionTypes } from '../../../../../types/actions';
+import { getCursorPositionOverElement } from '../../../../../utils/editor';
+const useEditorBlockMouseEvents = (arrayIndex) => {
+    const sendMessage = useMessageSender();
+    const { manipulateOverlayMode } = useEditorStore();
+    const { setActiveElement } = useContext(EditorContext);
+    const onMouseUp = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (manipulateOverlayMode) {
+            const rect = event.currentTarget.getClientRects().item(0);
+            if (rect) {
+                const position = 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: ActionTypes.InsertBlock,
+                        payload: {
+                            path: newArrayIndex,
+                        },
+                    });
+                }
+                else if (manipulateOverlayMode === 'reorder') {
+                    sendMessage({
+                        type: ActionTypes.ReorderBlocks,
+                        payload: {
+                            path: newArrayIndex,
+                        },
+                    });
+                }
+            }
+        }
+    }, [arrayIndex, manipulateOverlayMode, sendMessage]);
+    const onMouseMove = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (manipulateOverlayMode) {
+            const rect = event.currentTarget.getClientRects().item(0);
+            if (rect) {
+                const cursorPosition = getCursorPositionOverElement(rect, event);
+                sendMessage({
+                    type: ActionTypes.OverlayModeOnMove,
+                    payload: {
+                        block: { rect, cursorPosition },
+                        cursor: {
+                            x: event.clientX,
+                            y: event.clientY,
+                        },
+                    },
+                });
+            }
+        }
+    }, [manipulateOverlayMode, sendMessage]);
+    const onMouseLeave = useCallback((e) => {
+        e.preventDefault();
+        if (manipulateOverlayMode) {
+            const rect = e.currentTarget.getClientRects().item(0);
+            if (rect) {
+                sendMessage({
+                    type: ActionTypes.OverlayModeOnMove,
+                    payload: {
+                        cursor: {
+                            x: e.clientX,
+                            y: e.clientY,
+                        },
+                    },
+                });
+            }
+        }
+        else {
+        }
+    }, [manipulateOverlayMode, sendMessage]);
+    const onClick = useCallback((e) => {
+        e.stopPropagation();
+        if (!manipulateOverlayMode) {
+            const element = e.currentTarget;
+            const rect = element.getClientRects().item(0);
+            if (rect) {
+                setActiveElement(element);
+                sendMessage({
+                    type: ActionTypes.SelectBlock,
+                    payload: {
+                        path: arrayIndex,
+                        rect: rect,
+                    },
+                });
+            }
+        }
+    }, [arrayIndex, manipulateOverlayMode, sendMessage, setActiveElement]);
+    return {
+        onClick,
+        onMouseMove,
+        onMouseUp,
+        onMouseLeave,
+    };
+};
+export default useEditorBlockMouseEvents;

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

@@ -7,8 +7,9 @@ import { ConstructorBlock } from '../ConstructorBlock/ConstructorBlock';
 import { ConstructorItem } from '../ConstructorItem';
 import { ConstructorLoadable } from '../ConstructorLoadable';
 export const ConstructorBlocks = ({ items }) => {
-    const { blockTypes, loadables, itemMap, shouldRenderBlock } = useContext(InnerContext);
-    const renderer = (parentId = '', item, index) => {
+    const { blockTypes, subBlockTypes, loadables, itemMap, shouldRenderBlock } = useContext(InnerContext);
+    const allBlocks = [...blockTypes, ...subBlockTypes];
+    const renderer = (parentId = '', withoutConstructorBlockWrapper = false, item, index) => {
         if (!itemMap[item.type]) {
             return parentId ? null : (React.createElement(BlockDecoration, { type: item.type, index: index }, null));
         }
@@ -29,14 +30,14 @@ export 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.createElement(ConstructorItem, { data: item, key: blockId, blockKey: blockId }, children));
+            itemElement = (React.createElement(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.createElement(ConstructorBlock, { data: item, key: blockId, index: index }, itemElement)) : (itemElement);
     };
-    return React.createElement(Fragment, null, items.map(renderer.bind(null, '')));
+    return React.createElement(Fragment, null, items.map(renderer.bind(null, '', false)));
 };

package/build/esm/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/esm/containers/PageConstructor/components/ConstructorItem/ConstructorItem.js

@@ -7,7 +7,7 @@ export const ConstructorItem = ({ data, blockKey, children }) => {
     const { itemMap } = useContext(InnerContext);
     const { type } = data, rest = __rest(data, ["type"]);
     const Component = itemMap[type];
-    return (React.createElement(BlockIdContext.Provider, { value: blockKey },
+    return (React.createElement(BlockIdContext.Provider, { value: blockKey, key: blockKey },
         React.createElement(Component, Object.assign({}, rest), children)));
 };
 export const ConstructorHeader = ({ data, blockKey, }) => (React.createElement(BlockDecoration, { type: data.type },

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

@@ -8,6 +8,6 @@ export const ConstructorLoadable = (props) => {
     const { type } = block;
     const { fetch, component: ChildComponent } = config;
     const Component = itemMap[type];
-    return (React.createElement(BlockIdContext.Provider, { value: blockKey, key: blockKey },
+    return (React.createElement(BlockIdContext.Provider, { value: Number(blockKey), key: blockKey },
         React.createElement(Loadable, { key: blockKey, block: block, blockKey: blockKey, Component: Component, ChildComponent: ChildComponent, fetch: fetch, serviceId: serviceId, params: params })));
 };

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

@@ -1,7 +1,5 @@
 import React from 'react';
-import { Col, Row } from '../../../../grid';
 import { block } from '../../../../utils';
 import './ConstructorRow.css';
 const b = block('constructor-row');
-export const ConstructorRow = ({ children }) => children ? (React.createElement(Row, { className: b() },
-    React.createElement(Col, null, children))) : null;
+export const ConstructorRow = ({ children }) => children ? React.createElement("div", { className: b() }, children) : null;

package/build/esm/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/esm/context/blockIdContext/blockIdContext.js

@@ -1,2 +1,2 @@
 import React from 'react';
-export const BlockIdContext = React.createContext('');
+export const BlockIdContext = React.createContext(NaN);

package/build/esm/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/esm/context/editorContext/editorContext.js

@@ -0,0 +1,6 @@
+/**
+ * Context for managing internal Editor states
+ * Same exist in Editor
+ **/
+import React from 'react';
+export const EditorContext = React.createContext({ setActiveElement: () => { } });

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

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

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

@@ -0,0 +1,15 @@
+import React, { useRef, useState } from 'react';
+import { EditorContext } from './editorContext';
+import { createEditorStore } from './store';
+export const EditorProvider = ({ children }) => {
+    const storeRef = useRef();
+    const [activeElement, setActiveElement] = useState();
+    if (!storeRef.current) {
+        storeRef.current = createEditorStore();
+    }
+    return (React.createElement(EditorContext.Provider, { value: {
+            state: storeRef.current,
+            activeElement: activeElement,
+            setActiveElement: setActiveElement,
+        } }, children));
+};

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

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

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

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { useStore } from 'zustand';
+import { EditorContext } from '../editorContext';
+export const useEditorStore = () => {
+    const { state } = useContext(EditorContext);
+    if (!state) {
+        throw new Error('Missing EditorContext');
+    }
+    return useStore(state);
+};
+export default useEditorStore;

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

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

package/build/esm/context/editorContext/index.js

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

package/build/esm/context/editorContext/store.d.ts

@@ -0,0 +1,24 @@
+import { WithStoreReducer } from '../../types';
+export interface EditorState {
+    manipulateOverlayMode: 'insert' | 'reorder' | false;
+    isSelectActive: boolean;
+    initialized: boolean;
+}
+export interface EditorMethods extends WithStoreReducer {
+}
+export type EditorStore = EditorState & EditorMethods;
+export declare const createEditorStore: (overrideInitialState?: Partial<EditorState> | undefined) => import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<EditorState & EditorMethods>, "setState"> & {
+    setState<A extends string | {
+        type: string;
+    }>(partial: (EditorState & EditorMethods) | Partial<EditorState & EditorMethods> | ((state: EditorState & EditorMethods) => (EditorState & EditorMethods) | Partial<EditorState & EditorMethods>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<EditorState & EditorMethods, EditorState & EditorMethods>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => void | Promise<void>;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: EditorState & EditorMethods) => void) => () => void;
+        onFinishHydration: (fn: (state: EditorState & EditorMethods) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<EditorState & EditorMethods, EditorState & EditorMethods>>;
+    };
+}>;