@gravity-ui/page-constructor 6.3.1 → 6.3.2-alpha.0

package/build/esm/containers/PageConstructor/PageConstructor.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import '@diplodoc/transform/dist/js/yfm.js';
+import '@diplodoc/transform/dist/js/yfm';
 import { blockMap, navItemMap, subBlockMap } from "../../constructor-items.js";
 import { CustomConfig, CustomItems, NavigationData, PageContent, ShouldRenderBlock } from "../../models/index.js";
 import './PageConstructor.css';

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import '@diplodoc/transform/dist/js/yfm.js';
+import '@diplodoc/transform/dist/js/yfm';
+import { ThemeProvider } from '@gravity-ui/uikit';
 import BackgroundMedia from "../../components/BackgroundMedia/BackgroundMedia.js";
 import BrandFooter from "../../components/BrandFooter/BrandFooter.js";
 import RootCn from "../../components/RootCn/index.js";
@@ -9,17 +10,26 @@ import { AnimateContext } from "../../context/animateContext/index.js";
 import { InnerContext } from "../../context/innerContext/index.js";
 import { ProjectSettingsContext } from "../../context/projectSettingsContext/index.js";
 import { useTheme } from "../../context/theme/index.js";
-import { Grid } from "../../grid/index.js";
-import { BlockType, BlockTypes, HeaderBlockTypes, NavigationItemTypes, SubBlockTypes, } from "../../models/index.js";
+import { usePCEditorInitializeEvents } from "../../hooks/usePCEditorInitializeEvents.js";
+import { usePCEditorStore } from "../../hooks/usePCEditorStore.js";
+import { BlockTypes, HeaderBlockTypes, NavigationItemTypes, SubBlockTypes, } from "../../models/index.js";
 import Layout from "../../navigation/containers/Layout/Layout.js";
-import { block as cnBlock, getCustomItems, getCustomTypes, getHeaderBlock, getOrderedBlocks, getThemedValue, } from "../../utils/index.js";
-import { ConstructorBlocks } from "./components/ConstructorBlocks/index.js";
-import { ConstructorHeader } from "./components/ConstructorItem/index.js";
+import { block as cnBlock, getCustomItems, getCustomTypes, getThemedValue } from "../../utils/index.js";
+import { ConstructorBlocks } from "./components/index.js";
 import { ConstructorRow } from "./components/ConstructorRow/index.js";
 import './PageConstructor.css';
 const b = cnBlock('page-constructor');
 export const Constructor = (props) => {
     const { content: { blocks = [], background } = {}, renderMenu, shouldRenderBlock, navigation, custom, isBranded, microdata, } = props;
+    const [content, setContent] = React.useState({
+        blocks,
+        background,
+        navigation,
+    });
+    const theme = useTheme();
+    const store = usePCEditorStore();
+    const { initialized } = store;
+    usePCEditorInitializeEvents({ initialContent: { blocks, background, navigation }, setContent });
     const { context } = React.useMemo(() => ({
         context: {
             blockTypes: [...BlockTypes, ...getCustomTypes(['blocks', 'headers'], custom)],
@@ -46,15 +56,13 @@ export const Constructor = (props) => {
             microdata,
         },
     }), [custom, shouldRenderBlock, microdata]);
-    const theme = useTheme();
-    const header = getHeaderBlock(blocks, context.headerBlockTypes);
-    const restBlocks = getOrderedBlocks(blocks, context.headerBlockTypes);
-    const themedBackground = getThemedValue(background, theme);
-    return (_jsx(InnerContext.Provider, { value: context, children: _jsx(RootCn, { className: b(), children: _jsxs("div", { className: b('wrapper'), children: [themedBackground && (_jsx(BackgroundMedia, { ...themedBackground, className: b('background') })), _jsxs(Layout, { navigation: navigation, children: [renderMenu && renderMenu(), header && (_jsx(ConstructorHeader, { data: header, blockKey: BlockType.HeaderBlock })), _jsx(Grid, { children: restBlocks && (_jsx(ConstructorRow, { children: _jsx(ConstructorBlocks, { items: restBlocks }) })) })] }), isBranded && _jsx(BrandFooter, {})] }) }) }));
+    const restBlocks = content.blocks;
+    const themedBackground = getThemedValue(content.background, theme);
+    return (_jsx(InnerContext.Provider, { value: context, children: _jsx(RootCn, { className: b('', { ['with-editor']: initialized }), children: _jsxs("div", { className: b('wrapper'), children: [themedBackground && (_jsx(BackgroundMedia, { ...themedBackground, className: b('background') })), _jsxs(Layout, { navigation: content.navigation, children: [renderMenu && renderMenu(), restBlocks && (_jsx(ConstructorRow, { children: _jsx(ConstructorBlocks, { items: restBlocks }) }))] }), isBranded && _jsx(BrandFooter, {})] }) }) }));
 };
 export const PageConstructor = (props) => {
     const { isAnimationEnabled = true } = React.useContext(ProjectSettingsContext);
     const { content: { animated = isAnimationEnabled } = {}, ...rest } = props;
-    return (_jsx(AnimateContext.Provider, { value: { animated }, children: _jsx(Constructor, { content: props.content, ...rest }) }));
+    return (_jsx(ThemeProvider, { children: _jsx(AnimateContext.Provider, { value: { animated }, children: _jsx(Constructor, { content: props.content, ...rest }) }) }));
 };
 //# sourceMappingURL=PageConstructor.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PageConstructor.js","sourceRoot":"../../../../src","sources":["containers/PageConstructor/PageConstructor.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,oCAAoC,CAAC;AAE5C,OAAO,eAAe,4DAAyD;AAC/E,OAAO,WAAW,oDAAiD;AACnE,OAAO,MAAM,yCAAgC;AAC7C,OAAO,EAAC,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAC,mCAAgC;AAC1E,OAAO,EAAC,cAAc,EAAC,8CAAqC;AAC5D,OAAO,EAAC,YAAY,EAAC,4CAAmC;AACxD,OAAO,EAAC,sBAAsB,EAAC,sDAA6C;AAC5E,OAAO,EAAC,QAAQ,EAAC,qCAA4B;AAC7C,OAAO,EAAC,IAAI,EAAC,4BAAmB;AAChC,OAAO,EACH,SAAS,EACT,UAAU,EAGV,gBAAgB,EAEhB,mBAAmB,EAGnB,aAAa,GAChB,8BAAqB;AACtB,OAAO,MAAM,qDAAkD;AAC/D,OAAO,EACH,KAAK,IAAI,OAAO,EAChB,cAAc,EACd,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,cAAc,GACjB,6BAAoB;AAErB,OAAO,EAAC,iBAAiB,EAAC,gDAAuC;AACjE,OAAO,EAAC,iBAAiB,EAAC,8CAAqC;AAC/D,OAAO,EAAC,cAAc,EAAC,6CAAoC;AAE3D,OAAO,uBAAuB,CAAC;AAE/B,MAAM,CAAC,GAAG,OAAO,CAAC,kBAAkB,CAAC,CAAC;AAkBtC,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAA2B,EAAE,EAAE;IACvD,MAAM,EACF,OAAO,EAAE,EAAC,MAAM,GAAG,EAAE,EAAE,UAAU,EAAC,GAAG,EAAE,EACvC,UAAU,EACV,iBAAiB,EACjB,UAAU,EACV,MAAM,EACN,SAAS,EACT,SAAS,GACZ,GAAG,KAAK,CAAC;IAEV,MAAM,EAAC,OAAO,EAAC,GAAG,KAAK,CAAC,OAAO,CAC3B,GAAG,EAAE,CAAC,CAAC;QACH,OAAO,EAAE;YACL,UAAU,EAAE,CAAC,GAAG,UAAU,EAAE,GAAG,cAAc,CAAC,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;YAC7E,aAAa,EAAE,CAAC,GAAG,aAAa,EAAE,GAAG,cAAc,CAAC,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,CAAC;YAC3E,gBAAgB,EAAE,CAAC,GAAG,gBAAgB,EAAE,GAAG,cAAc,CAAC,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;YAC/E,oBAAoB,EAAE;gBAClB,GAAG,mBAAmB;gBACtB,GAAG,cAAc,CAAC,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;aAC5C;YACD,OAAO,EAAE;gBACL,GAAG,QAAQ;gBACX,GAAG,WAAW;gBACd,GAAG,cAAc,CAAC,CAAC,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,EAAE,MAAM,CAAC;aAChE;YACD,UAAU,EAAE;gBACR,GAAG,UAAU;gBACb,GAAG,cAAc,CAAC,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;aAC5C;YACD,SAAS,EAAE,MAAM,EAAE,QAAQ;YAC3B,iBAAiB;YACjB,aAAa,EAAE;gBACX,UAAU,EAAE,MAAM,EAAE,UAAU;aACjC;YACD,SAAS;SACZ;KACJ,CAAC,EACF,CAAC,MAAM,EAAE,iBAAiB,EAAE,SAAS,CAAC,CACzC,CAAC;IAEF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,MAAM,GAAG,cAAc,CAAC,MAAM,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAChE,MAAM,UAAU,GAAG,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACtE,MAAM,gBAAgB,GAAG,cAAc,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;IAE3D,OAAO,CACH,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YACjC,KAAC,MAAM,IAAC,SAAS,EAAE,CAAC,EAAE,YAClB,eAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,aACvB,gBAAgB,IAAI,CACjB,KAAC,eAAe,OAAK,gBAAgB,EAAE,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,GAAI,CACxE,EACD,MAAC,MAAM,IAAC,UAAU,EAAE,UAAU,aACzB,UAAU,IAAI,UAAU,EAAE,EAC1B,MAAM,IAAI,CACP,KAAC,iBAAiB,IAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,CAAC,WAAW,GAAI,CACvE,EACD,KAAC,IAAI,cACA,UAAU,IAAI,CACX,KAAC,cAAc,cACX,KAAC,iBAAiB,IAAC,KAAK,EAAE,UAAU,GAAI,GAC3B,CACpB,GACE,IACF,EACR,SAAS,IAAI,KAAC,WAAW,KAAG,IAC3B,GACD,GACW,CAC3B,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAE,EAAE;IAC3D,MAAM,EAAC,kBAAkB,GAAG,IAAI,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC;IAC7E,MAAM,EAAC,OAAO,EAAE,EAAC,QAAQ,GAAG,kBAAkB,EAAC,GAAG,EAAE,EAAE,GAAG,IAAI,EAAC,GAAG,KAAK,CAAC;IAEvE,OAAO,CACH,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAC,YACtC,KAAC,WAAW,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO,KAAM,IAAI,GAAI,GAC3B,CAC7B,CAAC;AACN,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport '@diplodoc/transform/dist/js/yfm.js';\n\nimport BackgroundMedia from '../../components/BackgroundMedia/BackgroundMedia';\nimport BrandFooter from '../../components/BrandFooter/BrandFooter';\nimport RootCn from '../../components/RootCn';\nimport {blockMap, navItemMap, subBlockMap} from '../../constructor-items';\nimport {AnimateContext} from '../../context/animateContext';\nimport {InnerContext} from '../../context/innerContext';\nimport {ProjectSettingsContext} from '../../context/projectSettingsContext';\nimport {useTheme} from '../../context/theme';\nimport {Grid} from '../../grid';\nimport {\n    BlockType,\n    BlockTypes,\n    CustomConfig,\n    CustomItems,\n    HeaderBlockTypes,\n    NavigationData,\n    NavigationItemTypes,\n    PageContent,\n    ShouldRenderBlock,\n    SubBlockTypes,\n} from '../../models';\nimport Layout from '../../navigation/containers/Layout/Layout';\nimport {\n    block as cnBlock,\n    getCustomItems,\n    getCustomTypes,\n    getHeaderBlock,\n    getOrderedBlocks,\n    getThemedValue,\n} from '../../utils';\n\nimport {ConstructorBlocks} from './components/ConstructorBlocks';\nimport {ConstructorHeader} from './components/ConstructorItem';\nimport {ConstructorRow} from './components/ConstructorRow';\n\nimport './PageConstructor.scss';\n\nconst b = cnBlock('page-constructor');\n\nexport type ItemMap = typeof blockMap & typeof subBlockMap & CustomItems;\n\nexport type NavItemMap = typeof navItemMap & CustomItems;\n\nexport interface PageConstructorProps {\n    content?: PageContent;\n    shouldRenderBlock?: ShouldRenderBlock;\n    custom?: CustomConfig;\n    renderMenu?: () => React.ReactNode;\n    navigation?: NavigationData;\n    isBranded?: boolean;\n    microdata?: {\n        contentUpdatedDate?: string;\n    };\n}\n\nexport const Constructor = (props: PageConstructorProps) => {\n    const {\n        content: {blocks = [], background} = {},\n        renderMenu,\n        shouldRenderBlock,\n        navigation,\n        custom,\n        isBranded,\n        microdata,\n    } = props;\n\n    const {context} = React.useMemo(\n        () => ({\n            context: {\n                blockTypes: [...BlockTypes, ...getCustomTypes(['blocks', 'headers'], custom)],\n                subBlockTypes: [...SubBlockTypes, ...getCustomTypes(['subBlocks'], custom)],\n                headerBlockTypes: [...HeaderBlockTypes, ...getCustomTypes(['headers'], custom)],\n                navigationBlockTypes: [\n                    ...NavigationItemTypes,\n                    ...getCustomTypes(['navigation'], custom),\n                ],\n                itemMap: {\n                    ...blockMap,\n                    ...subBlockMap,\n                    ...getCustomItems(['blocks', 'headers', 'subBlocks'], custom),\n                },\n                navItemMap: {\n                    ...navItemMap,\n                    ...getCustomItems(['navigation'], custom),\n                },\n                loadables: custom?.loadable,\n                shouldRenderBlock,\n                customization: {\n                    decorators: custom?.decorators,\n                },\n                microdata,\n            },\n        }),\n        [custom, shouldRenderBlock, microdata],\n    );\n\n    const theme = useTheme();\n\n    const header = getHeaderBlock(blocks, context.headerBlockTypes);\n    const restBlocks = getOrderedBlocks(blocks, context.headerBlockTypes);\n    const themedBackground = getThemedValue(background, theme);\n\n    return (\n        <InnerContext.Provider value={context}>\n            <RootCn className={b()}>\n                <div className={b('wrapper')}>\n                    {themedBackground && (\n                        <BackgroundMedia {...themedBackground} className={b('background')} />\n                    )}\n                    <Layout navigation={navigation}>\n                        {renderMenu && renderMenu()}\n                        {header && (\n                            <ConstructorHeader data={header} blockKey={BlockType.HeaderBlock} />\n                        )}\n                        <Grid>\n                            {restBlocks && (\n                                <ConstructorRow>\n                                    <ConstructorBlocks items={restBlocks} />\n                                </ConstructorRow>\n                            )}\n                        </Grid>\n                    </Layout>\n                    {isBranded && <BrandFooter />}\n                </div>\n            </RootCn>\n        </InnerContext.Provider>\n    );\n};\n\nexport const PageConstructor = (props: PageConstructorProps) => {\n    const {isAnimationEnabled = true} = React.useContext(ProjectSettingsContext);\n    const {content: {animated = isAnimationEnabled} = {}, ...rest} = props;\n\n    return (\n        <AnimateContext.Provider value={{animated}}>\n            <Constructor content={props.content} {...rest} />\n        </AnimateContext.Provider>\n    );\n};\n"]}
+{"version":3,"file":"PageConstructor.js","sourceRoot":"../../../../src","sources":["containers/PageConstructor/PageConstructor.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport '@diplodoc/transform/dist/js/yfm';\nimport {ThemeProvider} from '@gravity-ui/uikit';\n\nimport BackgroundMedia from '../../components/BackgroundMedia/BackgroundMedia';\nimport BrandFooter from '../../components/BrandFooter/BrandFooter';\nimport RootCn from '../../components/RootCn';\nimport {blockMap, navItemMap, subBlockMap} from '../../constructor-items';\nimport {AnimateContext} from '../../context/animateContext';\nimport {InnerContext} from '../../context/innerContext';\nimport {ProjectSettingsContext} from '../../context/projectSettingsContext';\nimport {useTheme} from '../../context/theme';\nimport {usePCEditorInitializeEvents} from '../../hooks/usePCEditorInitializeEvents';\nimport {usePCEditorStore} from '../../hooks/usePCEditorStore';\nimport {\n    BlockTypes,\n    CustomConfig,\n    CustomItems,\n    HeaderBlockTypes,\n    NavigationData,\n    NavigationItemTypes,\n    PageContent,\n    PageContentWithNavigation,\n    ShouldRenderBlock,\n    SubBlockTypes,\n} from '../../models';\nimport Layout from '../../navigation/containers/Layout/Layout';\nimport {block as cnBlock, getCustomItems, getCustomTypes, getThemedValue} from '../../utils';\n\nimport {ConstructorBlocks} from './components';\nimport {ConstructorRow} from './components/ConstructorRow';\n\nimport './PageConstructor.scss';\n\nconst b = cnBlock('page-constructor');\n\nexport type ItemMap = typeof blockMap & typeof subBlockMap & CustomItems;\n\nexport type NavItemMap = typeof navItemMap & CustomItems;\n\nexport interface PageConstructorProps {\n    content?: PageContent;\n    shouldRenderBlock?: ShouldRenderBlock;\n    custom?: CustomConfig;\n    renderMenu?: () => React.ReactNode;\n    navigation?: NavigationData;\n    isBranded?: boolean;\n    microdata?: {\n        contentUpdatedDate?: string;\n    };\n}\n\nexport const Constructor = (props: PageConstructorProps) => {\n    const {\n        content: {blocks = [], background} = {},\n        renderMenu,\n        shouldRenderBlock,\n        navigation,\n        custom,\n        isBranded,\n        microdata,\n    } = props;\n\n    const [content, setContent] = React.useState<PageContentWithNavigation>({\n        blocks,\n        background,\n        navigation,\n    });\n\n    const theme = useTheme();\n\n    const store = usePCEditorStore();\n    const {initialized} = store;\n\n    usePCEditorInitializeEvents({initialContent: {blocks, background, navigation}, setContent});\n\n    const {context} = React.useMemo(\n        () => ({\n            context: {\n                blockTypes: [...BlockTypes, ...getCustomTypes(['blocks', 'headers'], custom)],\n                subBlockTypes: [...SubBlockTypes, ...getCustomTypes(['subBlocks'], custom)],\n                headerBlockTypes: [...HeaderBlockTypes, ...getCustomTypes(['headers'], custom)],\n                navigationBlockTypes: [\n                    ...NavigationItemTypes,\n                    ...getCustomTypes(['navigation'], custom),\n                ],\n                itemMap: {\n                    ...blockMap,\n                    ...subBlockMap,\n                    ...getCustomItems(['blocks', 'headers', 'subBlocks'], custom),\n                },\n                navItemMap: {\n                    ...navItemMap,\n                    ...getCustomItems(['navigation'], custom),\n                },\n                loadables: custom?.loadable,\n                shouldRenderBlock,\n                customization: {\n                    decorators: custom?.decorators,\n                },\n                microdata,\n            },\n        }),\n        [custom, shouldRenderBlock, microdata],\n    );\n\n    const restBlocks = content.blocks;\n    const themedBackground = getThemedValue(content.background, theme);\n\n    return (\n        <InnerContext.Provider value={context}>\n            <RootCn className={b('', {['with-editor']: initialized})}>\n                <div className={b('wrapper')}>\n                    {themedBackground && (\n                        <BackgroundMedia {...themedBackground} className={b('background')} />\n                    )}\n                    <Layout navigation={content.navigation}>\n                        {renderMenu && renderMenu()}\n                        {restBlocks && (\n                            <ConstructorRow>\n                                <ConstructorBlocks items={restBlocks} />\n                            </ConstructorRow>\n                        )}\n                    </Layout>\n                    {isBranded && <BrandFooter />}\n                </div>\n            </RootCn>\n        </InnerContext.Provider>\n    );\n};\n\nexport const PageConstructor = (props: PageConstructorProps) => {\n    const {isAnimationEnabled = true} = React.useContext(ProjectSettingsContext);\n    const {content: {animated = isAnimationEnabled} = {}, ...rest} = props;\n\n    return (\n        <ThemeProvider>\n            <AnimateContext.Provider value={{animated}}>\n                <Constructor content={props.content} {...rest} />\n            </AnimateContext.Provider>\n        </ThemeProvider>\n    );\n};\n"]}

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

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { DEFAULT_THEME } from "../../components/constants.js";
 import { AnalyticsContext } from "../../context/analyticsContext/index.js";
+import { PCEditorStoreProvider } from "../../context/editorStoreContext/index.js";
 import { DEFAULT_FORMS_CONTEXT_VALUE, FormsContext, } from "../../context/formsContext/FormsContext.js";
 import { ImageContext } from "../../context/imageContext/index.js";
 import { LocaleContext } from "../../context/localeContext/index.js";
@@ -25,6 +26,7 @@ export const PageConstructorProvider = (props) => {
         _jsx(AnalyticsContext.Provider, { value: analytics }),
         _jsx(FormsContext.Provider, { value: forms }),
         _jsx(SSRContext.Provider, { value: { isServer: ssrConfig?.isServer } }),
+        _jsx(PCEditorStoreProvider, {}),
     ].reduceRight((prev, provider) => React.cloneElement(provider, {}, prev), children);
     /* eslint-enable react/jsx-key */
     return _jsx(React.Fragment, { children: context });

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

@@ -1 +1 @@
-{"version":3,"file":"Provider.js","sourceRoot":"../../../../src","sources":["containers/PageConstructor/Provider.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,aAAa,EAAC,sCAAmC;AACzD,OAAO,EAAC,gBAAgB,EAAwB,gDAAuC;AACvF,OAAO,EACH,2BAA2B,EAC3B,YAAY,GAEf,mDAAgD;AACjD,OAAO,EAAC,YAAY,EAAoB,4CAAmC;AAC3E,OAAO,EAAC,aAAa,EAAqB,6CAAoC;AAC9E,OAAO,EAAC,eAAe,EAAuB,+CAAsC;AACpF,OAAO,EAAC,WAAW,EAAmB,eAAe,EAAC,iDAA8C;AACpG,OAAO,EAAC,aAAa,EAAC,6CAAoC;AAC1D,OAAO,EACH,sBAAsB,GAEzB,sDAA6C;AAC9C,OAAO,EAAC,UAAU,EAAkB,0CAAiC;AACrE,OAAO,EAAC,YAAY,EAAC,qCAA4B;AAgBjD,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACnC,KAA4D,EAC9D,EAAE;IACA,MAAM,EACF,QAAQ,EACR,WAAW,GAAG,eAAe,EAC7B,MAAM,GAAG,EAAE,EACX,QAAQ,GAAG,EAAE,EACb,SAAS,GAAG,EAAE,EACd,SAAS,GAAG,EAAE,EACd,eAAe,GAAG,EAAE,EACpB,KAAK,GAAG,aAAa,EACrB,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,KAAK,GAAG,2BAA2B,GACtC,GAAG,KAAK,CAAC;IAEV,kCAAkC;IAClC,MAAM,OAAO,GAAG;QACZ,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAC,KAAK,EAAC,GAAI;QACzC,KAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe,GAAI;QAC3D,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,GAAI;QACzC,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAI;QACvC,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,GAAI;QAC7C,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,CAAC,QAAQ,CAAC,GAAI;QACpD,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,GAAI;QAC5C,KAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,GAAI;QAC/C,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAI;QACvC,KAAC,UAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAC,GAAI;KAClE,CAAC,WAAW,CAAC,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,QAAQ,CAAC,CAAC;IACpF,iCAAiC;IAEjC,OAAO,KAAC,KAAK,CAAC,QAAQ,cAAE,OAAO,GAAkB,CAAC;AACtD,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {DEFAULT_THEME} from '../../components/constants';\nimport {AnalyticsContext, AnalyticsContextProps} from '../../context/analyticsContext';\nimport {\n    DEFAULT_FORMS_CONTEXT_VALUE,\n    FormsContext,\n    FormsContextProps,\n} from '../../context/formsContext/FormsContext';\nimport {ImageContext, ImageContextProps} from '../../context/imageContext';\nimport {LocaleContext, LocaleContextProps} from '../../context/localeContext';\nimport {LocationContext, LocationContextProps} from '../../context/locationContext';\nimport {MapsContext, MapsContextType, initialMapValue} from '../../context/mapsContext/mapsContext';\nimport {MobileContext} from '../../context/mobileContext';\nimport {\n    ProjectSettingsContext,\n    ProjectSettingsContextProps,\n} from '../../context/projectSettingsContext';\nimport {SSRContext, SSRContextProps} from '../../context/ssrContext';\nimport {ThemeContext} from '../../context/theme';\nimport {Theme} from '../../models';\n\nexport interface PageConstructorProviderProps {\n    isMobile?: boolean;\n    locale?: LocaleContextProps;\n    location?: LocationContextProps;\n    ssrConfig?: SSRContextProps;\n    theme?: Theme;\n    mapsContext?: MapsContextType;\n    projectSettings?: ProjectSettingsContextProps;\n    analytics?: AnalyticsContextProps;\n    forms?: FormsContextProps;\n    image?: ImageContextProps;\n}\n\nexport const PageConstructorProvider = (\n    props: React.PropsWithChildren<PageConstructorProviderProps>,\n) => {\n    const {\n        isMobile,\n        mapsContext = initialMapValue,\n        locale = {},\n        location = {},\n        analytics = {},\n        ssrConfig = {},\n        projectSettings = {},\n        theme = DEFAULT_THEME,\n        children,\n        image = {},\n        forms = DEFAULT_FORMS_CONTEXT_VALUE,\n    } = props;\n\n    /* eslint-disable react/jsx-key */\n    const context = [\n        <ThemeContext.Provider value={{theme}} />,\n        <ProjectSettingsContext.Provider value={projectSettings} />,\n        <LocaleContext.Provider value={locale} />,\n        <ImageContext.Provider value={image} />,\n        <LocationContext.Provider value={location} />,\n        <MobileContext.Provider value={Boolean(isMobile)} />,\n        <MapsContext.Provider value={mapsContext} />,\n        <AnalyticsContext.Provider value={analytics} />,\n        <FormsContext.Provider value={forms} />,\n        <SSRContext.Provider value={{isServer: ssrConfig?.isServer}} />,\n    ].reduceRight((prev, provider) => React.cloneElement(provider, {}, prev), children);\n    /* eslint-enable react/jsx-key */\n\n    return <React.Fragment>{context}</React.Fragment>;\n};\n"]}
+{"version":3,"file":"Provider.js","sourceRoot":"../../../../src","sources":["containers/PageConstructor/Provider.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,aAAa,EAAC,sCAAmC;AACzD,OAAO,EAAC,gBAAgB,EAAwB,gDAAuC;AACvF,OAAO,EAAC,qBAAqB,EAAC,kDAAyC;AACvE,OAAO,EACH,2BAA2B,EAC3B,YAAY,GAEf,mDAAgD;AACjD,OAAO,EAAC,YAAY,EAAoB,4CAAmC;AAC3E,OAAO,EAAC,aAAa,EAAqB,6CAAoC;AAC9E,OAAO,EAAC,eAAe,EAAuB,+CAAsC;AACpF,OAAO,EAAC,WAAW,EAAmB,eAAe,EAAC,iDAA8C;AACpG,OAAO,EAAC,aAAa,EAAC,6CAAoC;AAC1D,OAAO,EACH,sBAAsB,GAEzB,sDAA6C;AAC9C,OAAO,EAAC,UAAU,EAAkB,0CAAiC;AACrE,OAAO,EAAC,YAAY,EAAC,qCAA4B;AAgBjD,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACnC,KAA4D,EAC9D,EAAE;IACA,MAAM,EACF,QAAQ,EACR,WAAW,GAAG,eAAe,EAC7B,MAAM,GAAG,EAAE,EACX,QAAQ,GAAG,EAAE,EACb,SAAS,GAAG,EAAE,EACd,SAAS,GAAG,EAAE,EACd,eAAe,GAAG,EAAE,EACpB,KAAK,GAAG,aAAa,EACrB,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,KAAK,GAAG,2BAA2B,GACtC,GAAG,KAAK,CAAC;IAEV,kCAAkC;IAClC,MAAM,OAAO,GAAG;QACZ,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAC,KAAK,EAAC,GAAI;QACzC,KAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe,GAAI;QAC3D,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,GAAI;QACzC,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAI;QACvC,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,GAAI;QAC7C,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,CAAC,QAAQ,CAAC,GAAI;QACpD,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,GAAI;QAC5C,KAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,GAAI;QAC/C,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAI;QACvC,KAAC,UAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAC,GAAI;QAC/D,KAAC,qBAAqB,KAAG;KAC5B,CAAC,WAAW,CAAC,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,QAAQ,CAAC,CAAC;IACpF,iCAAiC;IAEjC,OAAO,KAAC,KAAK,CAAC,QAAQ,cAAE,OAAO,GAAkB,CAAC;AACtD,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {DEFAULT_THEME} from '../../components/constants';\nimport {AnalyticsContext, AnalyticsContextProps} from '../../context/analyticsContext';\nimport {PCEditorStoreProvider} from '../../context/editorStoreContext';\nimport {\n    DEFAULT_FORMS_CONTEXT_VALUE,\n    FormsContext,\n    FormsContextProps,\n} from '../../context/formsContext/FormsContext';\nimport {ImageContext, ImageContextProps} from '../../context/imageContext';\nimport {LocaleContext, LocaleContextProps} from '../../context/localeContext';\nimport {LocationContext, LocationContextProps} from '../../context/locationContext';\nimport {MapsContext, MapsContextType, initialMapValue} from '../../context/mapsContext/mapsContext';\nimport {MobileContext} from '../../context/mobileContext';\nimport {\n    ProjectSettingsContext,\n    ProjectSettingsContextProps,\n} from '../../context/projectSettingsContext';\nimport {SSRContext, SSRContextProps} from '../../context/ssrContext';\nimport {ThemeContext} from '../../context/theme';\nimport {Theme} from '../../models';\n\nexport interface PageConstructorProviderProps {\n    isMobile?: boolean;\n    locale?: LocaleContextProps;\n    location?: LocationContextProps;\n    ssrConfig?: SSRContextProps;\n    theme?: Theme;\n    mapsContext?: MapsContextType;\n    projectSettings?: ProjectSettingsContextProps;\n    analytics?: AnalyticsContextProps;\n    forms?: FormsContextProps;\n    image?: ImageContextProps;\n}\n\nexport const PageConstructorProvider = (\n    props: React.PropsWithChildren<PageConstructorProviderProps>,\n) => {\n    const {\n        isMobile,\n        mapsContext = initialMapValue,\n        locale = {},\n        location = {},\n        analytics = {},\n        ssrConfig = {},\n        projectSettings = {},\n        theme = DEFAULT_THEME,\n        children,\n        image = {},\n        forms = DEFAULT_FORMS_CONTEXT_VALUE,\n    } = props;\n\n    /* eslint-disable react/jsx-key */\n    const context = [\n        <ThemeContext.Provider value={{theme}} />,\n        <ProjectSettingsContext.Provider value={projectSettings} />,\n        <LocaleContext.Provider value={locale} />,\n        <ImageContext.Provider value={image} />,\n        <LocationContext.Provider value={location} />,\n        <MobileContext.Provider value={Boolean(isMobile)} />,\n        <MapsContext.Provider value={mapsContext} />,\n        <AnalyticsContext.Provider value={analytics} />,\n        <FormsContext.Provider value={forms} />,\n        <SSRContext.Provider value={{isServer: ssrConfig?.isServer}} />,\n        <PCEditorStoreProvider />,\n    ].reduceRight((prev, provider) => React.cloneElement(provider, {}, prev), children);\n    /* eslint-enable react/jsx-key */\n\n    return <React.Fragment>{context}</React.Fragment>;\n};\n"]}

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,12 +3,14 @@ import * as React from 'react';
 import pick from "lodash/pick.js";
 import BlockBase from "../../../../components/BlockBase/BlockBase.js";
 import { BlockDecoration } from "../../../../customization/BlockDecoration.js";
+import { usePCEditorItemWrap } from "../../../../hooks/usePCEditorItemWrap.js";
 import { block } from "../../../../utils/index.js";
 import './ConstructorBlock.css';
 const b = block('constructor-block');
 export const ConstructorBlock = ({ index = 0, data, children, }) => {
+    const { blockRef, adminBlockMouseEvents } = usePCEditorItemWrap(index);
     const { type } = data;
     const blockBaseProps = React.useMemo(() => pick(data, ['anchor', 'visible', 'resetPaddings', 'indent']), [data]);
-    return (_jsx(BlockDecoration, { type: type, index: index, ...blockBaseProps, children: _jsx(BlockBase, { className: b({ type }), ...blockBaseProps, children: children }) }));
+    return (_jsx("div", { ref: blockRef, ...adminBlockMouseEvents, children: _jsx(BlockDecoration, { type: type, index: index, ...blockBaseProps, children: _jsx(BlockBase, { className: b({ type }), ...blockBaseProps, children: children }) }) }));
 };
 //# sourceMappingURL=ConstructorBlock.js.map

package/build/esm/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConstructorBlock.js","sourceRoot":"../../../../../../src","sources":["containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,IAAI,uBAAoB;AAE/B,OAAO,SAAS,sDAAmD;AACnE,OAAO,EAAC,eAAe,EAAC,qDAAkD;AAE1E,OAAO,EAAC,KAAK,EAAC,mCAA0B;AAExC,OAAO,wBAAwB,CAAC;AAMhC,MAAM,CAAC,GAAG,KAAK,CAAC,mBAAmB,CAAC,CAAC;AAErC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC7B,KAAK,GAAG,CAAC,EACT,IAAI,EACJ,QAAQ,GACqC,EAAE,EAAE;IACjD,MAAM,EAAC,IAAI,EAAC,GAAG,IAAI,CAAC;IACpB,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAChC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,CAAC,CAAC,EAClE,CAAC,IAAI,CAAC,CACT,CAAC;IAEF,OAAO,CACH,KAAC,eAAe,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,KAAM,cAAc,YACzD,KAAC,SAAS,IAAC,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAC,CAAC,KAAM,cAAc,YAC9C,QAAQ,GACD,GACE,CACrB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport pick from 'lodash/pick';\n\nimport BlockBase from '../../../../components/BlockBase/BlockBase';\nimport {BlockDecoration} from '../../../../customization/BlockDecoration';\nimport {BlockDecorationProps, ConstructorBlock as ConstructorBlockType} from '../../../../models';\nimport {block} from '../../../../utils';\n\nimport './ConstructorBlock.scss';\n\ninterface ConstructorBlockProps extends Pick<BlockDecorationProps, 'index'> {\n    data: ConstructorBlockType;\n}\n\nconst b = block('constructor-block');\n\nexport const ConstructorBlock = ({\n    index = 0,\n    data,\n    children,\n}: React.PropsWithChildren<ConstructorBlockProps>) => {\n    const {type} = data;\n    const blockBaseProps = React.useMemo(\n        () => pick(data, ['anchor', 'visible', 'resetPaddings', 'indent']),\n        [data],\n    );\n\n    return (\n        <BlockDecoration type={type} index={index} {...blockBaseProps}>\n            <BlockBase className={b({type})} {...blockBaseProps}>\n                {children}\n            </BlockBase>\n        </BlockDecoration>\n    );\n};\n"]}
+{"version":3,"file":"ConstructorBlock.js","sourceRoot":"../../../../../../src","sources":["containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,IAAI,uBAAoB;AAE/B,OAAO,SAAS,sDAAmD;AACnE,OAAO,EAAC,eAAe,EAAC,qDAAkD;AAC1E,OAAO,EAAC,mBAAmB,EAAC,iDAA8C;AAE1E,OAAO,EAAC,KAAK,EAAC,mCAA0B;AAExC,OAAO,wBAAwB,CAAC;AAMhC,MAAM,CAAC,GAAG,KAAK,CAAC,mBAAmB,CAAC,CAAC;AAErC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC7B,KAAK,GAAG,CAAC,EACT,IAAI,EACJ,QAAQ,GACqC,EAAE,EAAE;IACjD,MAAM,EAAC,QAAQ,EAAE,qBAAqB,EAAC,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAErE,MAAM,EAAC,IAAI,EAAC,GAAG,IAAI,CAAC;IACpB,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAChC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,CAAC,CAAC,EAClE,CAAC,IAAI,CAAC,CACT,CAAC;IAEF,OAAO,CACH,cAAK,GAAG,EAAE,QAAQ,KAAM,qBAAqB,YACzC,KAAC,eAAe,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,KAAM,cAAc,YACzD,KAAC,SAAS,IAAC,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAC,CAAC,KAAM,cAAc,YAC9C,QAAQ,GACD,GACE,GAChB,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport pick from 'lodash/pick';\n\nimport BlockBase from '../../../../components/BlockBase/BlockBase';\nimport {BlockDecoration} from '../../../../customization/BlockDecoration';\nimport {usePCEditorItemWrap} from '../../../../hooks/usePCEditorItemWrap';\nimport {BlockDecorationProps, ConstructorBlock as ConstructorBlockType} from '../../../../models';\nimport {block} from '../../../../utils';\n\nimport './ConstructorBlock.scss';\n\ninterface ConstructorBlockProps extends Pick<BlockDecorationProps, 'index'> {\n    data: ConstructorBlockType;\n}\n\nconst b = block('constructor-block');\n\nexport const ConstructorBlock = ({\n    index = 0,\n    data,\n    children,\n}: React.PropsWithChildren<ConstructorBlockProps>) => {\n    const {blockRef, adminBlockMouseEvents} = usePCEditorItemWrap(index);\n\n    const {type} = data;\n    const blockBaseProps = React.useMemo(\n        () => pick(data, ['anchor', 'visible', 'resetPaddings', 'indent']),\n        [data],\n    );\n\n    return (\n        <div ref={blockRef} {...adminBlockMouseEvents}>\n            <BlockDecoration type={type} index={index} {...blockBaseProps}>\n                <BlockBase className={b({type})} {...blockBaseProps}>\n                    {children}\n                </BlockBase>\n            </BlockDecoration>\n        </div>\n    );\n};\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ConstructorBlocks.js","sourceRoot":"../../../../../../src","sources":["containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport get from 'lodash/get';\n\nimport {InnerContext} from '../../../../context/innerContext';\nimport {BlockDecoration} from '../../../../customization/BlockDecoration';\nimport {\n    BlockType,\n    ConstructorBlock as ConstructorBlockType,\n    LoadableProps,\n    SubBlock,\n} from '../../../../models';\nimport {getBlockKey} from '../../../../utils';\nimport {ConstructorBlock} from '../ConstructorBlock/ConstructorBlock';\nimport {ConstructorItem} from '../ConstructorItem';\nimport {ConstructorLoadable} from '../ConstructorLoadable';\n\nexport interface ConstructorBlocksProps {\n    items: ConstructorBlockType[];\n}\n\nexport const ConstructorBlocks: React.FC<ConstructorBlocksProps> = ({items}) => {\n    const {blockTypes, loadables, itemMap, shouldRenderBlock} = React.useContext(InnerContext);\n\n    const renderer = (\n        parentId = '',\n        item: ConstructorBlockType,\n        index: number,\n    ): React.ReactElement | null => {\n        if (!itemMap[item.type]) {\n            return parentId ? null : (\n                <BlockDecoration type={item.type as BlockType} index={index}>\n                    {null}\n                </BlockDecoration>\n            );\n        }\n\n        let itemElement;\n        const key = getBlockKey(item, index);\n        const blockId = parentId ? `${parentId}_${key}` : key;\n        if (shouldRenderBlock && !shouldRenderBlock(item, blockId)) {\n            return null;\n        }\n\n        if ('loadable' in item && item.loadable) {\n            const {source, serviceId, params} = item.loadable as LoadableProps;\n            const config = get(loadables, source);\n\n            if (!config) {\n                return null;\n            }\n\n            itemElement = (\n                <ConstructorLoadable\n                    block={item}\n                    key={blockId}\n                    blockKey={blockId}\n                    config={config}\n                    serviceId={serviceId}\n                    params={params}\n                />\n            );\n        } else {\n            let children;\n            if ('children' in item && item.children) {\n                children = (item.children as SubBlock[]).map(renderer.bind(null, blockId));\n            }\n\n            itemElement = (\n                <ConstructorItem data={item} key={blockId} blockKey={blockId}>\n                    {children}\n                </ConstructorItem>\n            );\n        }\n\n        return blockTypes.includes(item.type) ? (\n            //TODO: replace ConstructorBlock (and delete it) with BlockBase when all\n            // components relying on constructor inner structure like Slider or blog-constructor will be refactored\n            <ConstructorBlock data={item} key={blockId} index={index}>\n                {itemElement}\n            </ConstructorBlock>\n        ) : (\n            itemElement\n        );\n    };\n\n    return <React.Fragment>{items.map(renderer.bind(null, ''))}</React.Fragment>;\n};\n"]}
+{"version":3,"file":"ConstructorBlocks.js","sourceRoot":"../../../../../../src","sources":["containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport get from 'lodash/get';\n\nimport {InnerContext} from '../../../../context/innerContext';\nimport {BlockDecoration} from '../../../../customization/BlockDecoration';\nimport {\n    BlockType,\n    ConstructorBlock as ConstructorBlockType,\n    LoadableProps,\n    SubBlock,\n} from '../../../../models';\nimport {getBlockKey} from '../../../../utils';\nimport {ConstructorBlock} from '../ConstructorBlock/ConstructorBlock';\nimport {ConstructorItem} from '../ConstructorItem';\nimport {ConstructorLoadable} from '../ConstructorLoadable';\n\nexport interface ConstructorBlocksProps {\n    items: ConstructorBlockType[];\n}\n\nexport const ConstructorBlocks: React.FC<ConstructorBlocksProps> = ({items}) => {\n    const {blockTypes, subBlockTypes, loadables, itemMap, shouldRenderBlock} =\n        React.useContext(InnerContext);\n\n    const allBlocks = [...blockTypes, ...subBlockTypes];\n\n    const renderer = (\n        parentId = '',\n        withoutConstructorBlockWrapper = false,\n        item: ConstructorBlockType,\n        index: number,\n    ): React.ReactElement | null => {\n        if (!itemMap[item.type]) {\n            return parentId ? null : (\n                <BlockDecoration type={item.type as BlockType} index={index}>\n                    {null}\n                </BlockDecoration>\n            );\n        }\n\n        let itemElement;\n        const key = getBlockKey(item, index);\n        const blockId = parentId ? `${parentId}_${key}` : key;\n        if (shouldRenderBlock && !shouldRenderBlock(item, blockId)) {\n            return null;\n        }\n\n        if ('loadable' in item && item.loadable) {\n            const {source, serviceId, params} = item.loadable as LoadableProps;\n            const config = get(loadables, source);\n\n            if (!config) {\n                return null;\n            }\n\n            itemElement = (\n                <ConstructorLoadable\n                    block={item}\n                    key={blockId}\n                    blockKey={blockId}\n                    config={config}\n                    serviceId={serviceId}\n                    params={params}\n                />\n            );\n        } else {\n            let children;\n            if ('children' in item && item.children) {\n                children = (item.children as SubBlock[]).map(renderer.bind(null, blockId, true));\n            }\n\n            itemElement = (\n                <ConstructorItem data={item} key={blockId} blockKey={index}>\n                    {children}\n                </ConstructorItem>\n            );\n        }\n\n        return allBlocks.includes(item.type) && !withoutConstructorBlockWrapper ? (\n            //TODO: replace ConstructorBlock (and delete it) with BlockBase when all\n            // components relying on constructor inner structure like Slider or blog-constructor will be refactored\n            <ConstructorBlock data={item} key={blockId} index={index}>\n                {itemElement}\n            </ConstructorBlock>\n        ) : (\n            itemElement\n        );\n    };\n\n    return <React.Fragment>{items.map(renderer.bind(null, '', false))}</React.Fragment>;\n};\n"]}

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ConstructorBlock } from "../../../../models/index.js";
 export interface ConstructorItemProps {
     data: ConstructorBlock;
-    blockKey: string;
+    blockKey: number;
 }
 export declare const ConstructorItem: ({ data, blockKey, children, }: React.PropsWithChildren<ConstructorItemProps>) => import("react/jsx-runtime").JSX.Element;
 export declare const ConstructorHeader: ({ data, blockKey, }: Pick<ConstructorItemProps, "data" | "blockKey">) => import("react/jsx-runtime").JSX.Element;

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

@@ -5,9 +5,10 @@ import { InnerContext } from "../../../../context/innerContext/index.js";
 import { BlockDecoration } from "../../../../customization/BlockDecoration.js";
 export const ConstructorItem = ({ data, blockKey, children, }) => {
     const { itemMap } = React.useContext(InnerContext);
+    const parentId = React.useContext(BlockIdContext);
     const { type, ...rest } = data;
     const Component = itemMap[type];
-    return (_jsx(BlockIdContext.Provider, { value: blockKey, children: _jsx(Component, { ...rest, children: children }) }));
+    return (_jsx(BlockIdContext.Provider, { value: [...parentId, blockKey], children: _jsx(Component, { ...rest, children: children }) }, blockKey));
 };
 export const ConstructorHeader = ({ data, blockKey, }) => (_jsx(BlockDecoration, { type: data.type, children: _jsx(ConstructorItem, { data: data, blockKey: blockKey }, data.type) }));
 //# sourceMappingURL=ConstructorItem.js.map

package/build/esm/containers/PageConstructor/components/ConstructorItem/ConstructorItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConstructorItem.js","sourceRoot":"../../../../../../src","sources":["containers/PageConstructor/components/ConstructorItem/ConstructorItem.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,oDAA2C;AAClE,OAAO,EAAC,YAAY,EAAC,kDAAyC;AAC9D,OAAO,EAAC,eAAe,EAAC,qDAAkD;AAQ1E,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC5B,IAAI,EACJ,QAAQ,EACR,QAAQ,GACoC,EAAE,EAAE;IAChD,MAAM,EAAC,OAAO,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IACjD,MAAM,EAAC,IAAI,EAAE,GAAG,IAAI,EAAC,GAAG,IAAI,CAAC;IAE7B,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAE7B,CAAC;IAEF,OAAO,CACH,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YACpC,KAAC,SAAS,OAAK,IAAI,YAAG,QAAQ,GAAa,GACrB,CAC7B,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAC9B,IAAI,EACJ,QAAQ,GACsC,EAAE,EAAE,CAAC,CACnD,KAAC,eAAe,IAAC,IAAI,EAAE,IAAI,CAAC,IAAiB,YACzC,KAAC,eAAe,IAAC,IAAI,EAAE,IAAI,EAAkB,QAAQ,EAAE,QAAQ,IAA7B,IAAI,CAAC,IAAI,CAAwB,GACrD,CACrB,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {BlockIdContext} from '../../../../context/blockIdContext';\nimport {InnerContext} from '../../../../context/innerContext';\nimport {BlockDecoration} from '../../../../customization/BlockDecoration';\nimport {BlockType, ConstructorBlock} from '../../../../models';\n\nexport interface ConstructorItemProps {\n    data: ConstructorBlock;\n    blockKey: string;\n}\n\nexport const ConstructorItem = ({\n    data,\n    blockKey,\n    children,\n}: React.PropsWithChildren<ConstructorItemProps>) => {\n    const {itemMap} = React.useContext(InnerContext);\n    const {type, ...rest} = data;\n\n    const Component = itemMap[type] as React.ComponentType<\n        React.ComponentProps<(typeof itemMap)[typeof type]>\n    >;\n\n    return (\n        <BlockIdContext.Provider value={blockKey}>\n            <Component {...rest}>{children}</Component>\n        </BlockIdContext.Provider>\n    );\n};\n\nexport const ConstructorHeader = ({\n    data,\n    blockKey,\n}: Pick<ConstructorItemProps, 'data' | 'blockKey'>) => (\n    <BlockDecoration type={data.type as BlockType}>\n        <ConstructorItem data={data} key={data.type} blockKey={blockKey} />\n    </BlockDecoration>\n);\n"]}
+{"version":3,"file":"ConstructorItem.js","sourceRoot":"../../../../../../src","sources":["containers/PageConstructor/components/ConstructorItem/ConstructorItem.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,oDAA2C;AAClE,OAAO,EAAC,YAAY,EAAC,kDAAyC;AAC9D,OAAO,EAAC,eAAe,EAAC,qDAAkD;AAQ1E,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC5B,IAAI,EACJ,QAAQ,EACR,QAAQ,GACoC,EAAE,EAAE;IAChD,MAAM,EAAC,OAAO,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IACjD,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC;IAClD,MAAM,EAAC,IAAI,EAAE,GAAG,IAAI,EAAC,GAAG,IAAI,CAAC;IAE7B,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAE7B,CAAC;IAEF,OAAO,CACH,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,CAAC,GAAG,QAAQ,EAAE,QAAQ,CAAC,YACnD,KAAC,SAAS,OAAK,IAAI,YAAG,QAAQ,GAAa,IADe,QAAQ,CAE5C,CAC7B,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAC9B,IAAI,EACJ,QAAQ,GACsC,EAAE,EAAE,CAAC,CACnD,KAAC,eAAe,IAAC,IAAI,EAAE,IAAI,CAAC,IAAiB,YACzC,KAAC,eAAe,IAAC,IAAI,EAAE,IAAI,EAAkB,QAAQ,EAAE,QAAQ,IAA7B,IAAI,CAAC,IAAI,CAAwB,GACrD,CACrB,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {BlockIdContext} from '../../../../context/blockIdContext';\nimport {InnerContext} from '../../../../context/innerContext';\nimport {BlockDecoration} from '../../../../customization/BlockDecoration';\nimport {BlockType, ConstructorBlock} from '../../../../models';\n\nexport interface ConstructorItemProps {\n    data: ConstructorBlock;\n    blockKey: number;\n}\n\nexport const ConstructorItem = ({\n    data,\n    blockKey,\n    children,\n}: React.PropsWithChildren<ConstructorItemProps>) => {\n    const {itemMap} = React.useContext(InnerContext);\n    const parentId = React.useContext(BlockIdContext);\n    const {type, ...rest} = data;\n\n    const Component = itemMap[type] as React.ComponentType<\n        React.ComponentProps<(typeof itemMap)[typeof type]>\n    >;\n\n    return (\n        <BlockIdContext.Provider value={[...parentId, blockKey]} key={blockKey}>\n            <Component {...rest}>{children}</Component>\n        </BlockIdContext.Provider>\n    );\n};\n\nexport const ConstructorHeader = ({\n    data,\n    blockKey,\n}: Pick<ConstructorItemProps, 'data' | 'blockKey'>) => (\n    <BlockDecoration type={data.type as BlockType}>\n        <ConstructorItem data={data} key={data.type} blockKey={blockKey} />\n    </BlockDecoration>\n);\n"]}

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

@@ -9,6 +9,7 @@ export const ConstructorLoadable = (props) => {
     const { type } = block;
     const { fetch, component: ChildComponent } = config;
     const Component = itemMap[type];
-    return (_jsx(BlockIdContext.Provider, { value: blockKey, children: _jsx(Loadable, { block: block, blockKey: blockKey, Component: Component, ChildComponent: ChildComponent, fetch: fetch, serviceId: serviceId, params: params }, blockKey) }, blockKey));
+    const parentId = React.useContext(BlockIdContext);
+    return (_jsx(BlockIdContext.Provider, { value: [...parentId, Number(blockKey)], children: _jsx(Loadable, { block: block, blockKey: blockKey, Component: Component, ChildComponent: ChildComponent, fetch: fetch, serviceId: serviceId, params: params }, blockKey) }, blockKey));
 };
 //# sourceMappingURL=ConstructorLoadable.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ConstructorLoadable.js","sourceRoot":"../../../../../../src","sources":["containers/PageConstructor/components/ConstructorLoadable/ConstructorLoadable.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,oDAA2C;AAClE,OAAO,EAAC,YAAY,EAAC,kDAAyC;AAE9D,OAAO,QAAmC,sCAAmC;AAO7E,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAA+B,EAAE,EAAE;IACnE,MAAM,EAAC,OAAO,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IACjD,MAAM,EAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAC,GAAG,KAAK,CAAC;IAC3D,MAAM,EAAC,IAAI,EAAC,GAAG,KAAK,CAAC;IACrB,MAAM,EAAC,KAAK,EAAE,SAAS,EAAE,cAAc,EAAC,GAAG,MAAM,CAAC;IAClD,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAE7B,CAAC;IAEF,OAAO,CACH,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YACpC,KAAC,QAAQ,IAEL,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,IAPT,QAAQ,CAQf,IAVyC,QAAQ,CAW7B,CAC7B,CAAC;AACN,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {BlockIdContext} from '../../../../context/blockIdContext';\nimport {InnerContext} from '../../../../context/innerContext';\nimport {LoadableConfigItem} from '../../../../models';\nimport Loadable, {LoadableComponentsProps} from '../../../Loadable/Loadable';\n\ninterface ConstructorLoadableProps\n    extends Omit<LoadableComponentsProps, 'Component' | 'ChildComponent' | 'fetch'> {\n    config: LoadableConfigItem;\n}\n\nexport const ConstructorLoadable = (props: ConstructorLoadableProps) => {\n    const {itemMap} = React.useContext(InnerContext);\n    const {block, blockKey, config, serviceId, params} = props;\n    const {type} = block;\n    const {fetch, component: ChildComponent} = config;\n    const Component = itemMap[type] as React.Component<\n        React.ComponentProps<(typeof itemMap)[typeof type]>\n    >;\n\n    return (\n        <BlockIdContext.Provider value={blockKey} key={blockKey}>\n            <Loadable\n                key={blockKey}\n                block={block}\n                blockKey={blockKey}\n                Component={Component}\n                ChildComponent={ChildComponent}\n                fetch={fetch}\n                serviceId={serviceId}\n                params={params}\n            />\n        </BlockIdContext.Provider>\n    );\n};\n"]}
+{"version":3,"file":"ConstructorLoadable.js","sourceRoot":"../../../../../../src","sources":["containers/PageConstructor/components/ConstructorLoadable/ConstructorLoadable.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,oDAA2C;AAClE,OAAO,EAAC,YAAY,EAAC,kDAAyC;AAE9D,OAAO,QAAmC,sCAAmC;AAO7E,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAA+B,EAAE,EAAE;IACnE,MAAM,EAAC,OAAO,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IACjD,MAAM,EAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAC,GAAG,KAAK,CAAC;IAC3D,MAAM,EAAC,IAAI,EAAC,GAAG,KAAK,CAAC;IACrB,MAAM,EAAC,KAAK,EAAE,SAAS,EAAE,cAAc,EAAC,GAAG,MAAM,CAAC;IAClD,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAE7B,CAAC;IACF,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC;IAElD,OAAO,CACH,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,CAAC,GAAG,QAAQ,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,YAC3D,KAAC,QAAQ,IAEL,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,IAPT,QAAQ,CAQf,IAVgE,QAAQ,CAWpD,CAC7B,CAAC;AACN,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {BlockIdContext} from '../../../../context/blockIdContext';\nimport {InnerContext} from '../../../../context/innerContext';\nimport {LoadableConfigItem} from '../../../../models';\nimport Loadable, {LoadableComponentsProps} from '../../../Loadable/Loadable';\n\ninterface ConstructorLoadableProps\n    extends Omit<LoadableComponentsProps, 'Component' | 'ChildComponent' | 'fetch'> {\n    config: LoadableConfigItem;\n}\n\nexport const ConstructorLoadable = (props: ConstructorLoadableProps) => {\n    const {itemMap} = React.useContext(InnerContext);\n    const {block, blockKey, config, serviceId, params} = props;\n    const {type} = block;\n    const {fetch, component: ChildComponent} = config;\n    const Component = itemMap[type] as React.Component<\n        React.ComponentProps<(typeof itemMap)[typeof type]>\n    >;\n    const parentId = React.useContext(BlockIdContext);\n\n    return (\n        <BlockIdContext.Provider value={[...parentId, Number(blockKey)]} key={blockKey}>\n            <Loadable\n                key={blockKey}\n                block={block}\n                blockKey={blockKey}\n                Component={Component}\n                ChildComponent={ChildComponent}\n                fetch={fetch}\n                serviceId={serviceId}\n                params={params}\n            />\n        </BlockIdContext.Provider>\n    );\n};\n"]}

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

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Col, Row } from "../../../../grid/index.js";
 import { block } from "../../../../utils/index.js";
 import './ConstructorRow.css';
 const b = block('constructor-row');
-export const ConstructorRow = ({ children }) => children ? (_jsx(Row, { className: b(), children: _jsx(Col, { children: children }) })) : null;
+export const ConstructorRow = ({ children }) => children ? _jsx("div", { className: b(), children: children }) : null;
 //# sourceMappingURL=ConstructorRow.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ConstructorRow.js","sourceRoot":"../../../../../../src","sources":["containers/PageConstructor/components/ConstructorRow/ConstructorRow.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,GAAG,EAAE,GAAG,EAAC,kCAAyB;AAC1C,OAAO,EAAC,KAAK,EAAC,mCAA0B;AAExC,OAAO,sBAAsB,CAAC;AAE9B,MAAM,CAAC,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAC,QAAQ,EAA8B,EAAE,EAAE,CACtE,QAAQ,CAAC,CAAC,CAAC,CACP,KAAC,GAAG,IAAC,SAAS,EAAE,CAAC,EAAE,YACf,KAAC,GAAG,cAAE,QAAQ,GAAO,GACnB,CACT,CAAC,CAAC,CAAC,IAAI,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {Col, Row} from '../../../../grid';\nimport {block} from '../../../../utils';\n\nimport './ConstructorRow.scss';\n\nconst b = block('constructor-row');\n\nexport const ConstructorRow = ({children}: React.PropsWithChildren<{}>) =>\n    children ? (\n        <Row className={b()}>\n            <Col>{children}</Col>\n        </Row>\n    ) : null;\n"]}
+{"version":3,"file":"ConstructorRow.js","sourceRoot":"../../../../../../src","sources":["containers/PageConstructor/components/ConstructorRow/ConstructorRow.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,KAAK,EAAC,mCAA0B;AAExC,OAAO,sBAAsB,CAAC;AAE9B,MAAM,CAAC,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAC,QAAQ,EAA8B,EAAE,EAAE,CACtE,QAAQ,CAAC,CAAC,CAAC,cAAK,SAAS,EAAE,CAAC,EAAE,YAAG,QAAQ,GAAO,CAAC,CAAC,CAAC,IAAI,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {block} from '../../../../utils';\n\nimport './ConstructorRow.scss';\n\nconst b = block('constructor-row');\n\nexport const ConstructorRow = ({children}: React.PropsWithChildren<{}>) =>\n    children ? <div className={b()}>{children}</div> : null;\n"]}

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

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

package/build/esm/context/blockIdContext/blockIdContext.js

@@ -1,3 +1,3 @@
 import * as React from 'react';
-export const BlockIdContext = React.createContext('');
+export const BlockIdContext = React.createContext([]);
 //# sourceMappingURL=blockIdContext.js.map

package/build/esm/context/blockIdContext/blockIdContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"blockIdContext.js","sourceRoot":"../../../../src","sources":["context/blockIdContext/blockIdContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,aAAa,CAAqB,EAAE,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nexport type BlockIdContextProp = string;\n\nexport const BlockIdContext = React.createContext<BlockIdContextProp>('');\n"]}
+{"version":3,"file":"blockIdContext.js","sourceRoot":"../../../../src","sources":["context/blockIdContext/blockIdContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,aAAa,CAAqB,EAAE,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nexport type BlockIdContextProp = number[];\n\nexport const BlockIdContext = React.createContext<BlockIdContextProp>([]);\n"]}

package/build/esm/context/editorStoreContext/PCEditorStoreContext.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { StoreApi } from 'zustand';
+import { EditorState } from "../../../common/store.js";
+export interface PCEditorStoreContextProps {
+    state: StoreApi<EditorState>;
+}
+export declare const PCEditorStoreContext: React.Context<PCEditorStoreContextProps>;

package/build/esm/context/editorStoreContext/PCEditorStoreContext.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createPCEditorStore } from "../../../common/store.js";
+export const PCEditorStoreContext = React.createContext({
+    state: createPCEditorStore(),
+});
+//# sourceMappingURL=PCEditorStoreContext.js.map

package/build/esm/context/editorStoreContext/PCEditorStoreContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PCEditorStoreContext.js","sourceRoot":"../../../../src","sources":["context/editorStoreContext/PCEditorStoreContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAc,mBAAmB,EAAC,iCAA8B;AAMvE,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,CAAC,aAAa,CAA4B;IAC/E,KAAK,EAAE,mBAAmB,EAAE;CAC/B,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {StoreApi} from 'zustand';\n\nimport {EditorState, createPCEditorStore} from '../../../common/store';\n\nexport interface PCEditorStoreContextProps {\n    state: StoreApi<EditorState>;\n}\n\nexport const PCEditorStoreContext = React.createContext<PCEditorStoreContextProps>({\n    state: createPCEditorStore(),\n});\n"]}

package/build/esm/context/editorStoreContext/PCEditorStoreProvider.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+interface PCEditorStoreProviderProps extends React.PropsWithChildren {
+}
+export declare const PCEditorStoreProvider: ({ children }: PCEditorStoreProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/esm/context/editorStoreContext/PCEditorStoreProvider.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { createPCEditorStore } from "../../../common/store.js";
+import { PCEditorStoreContext } from "./PCEditorStoreContext.js";
+export const PCEditorStoreProvider = ({ children }) => {
+    const storeRef = React.useRef();
+    const syncStore = React.useCallback((message) => {
+        if (storeRef.current && message.state) {
+            storeRef.current.setState(message.state);
+        }
+    }, []);
+    React.useEffect(() => {
+        const onMessage = (e) => {
+            const message = e.data;
+            syncStore(message);
+        };
+        window.addEventListener('message', onMessage);
+        return () => {
+            window.removeEventListener('message', onMessage);
+        };
+    }, [syncStore]);
+    if (!storeRef.current) {
+        storeRef.current = createPCEditorStore();
+    }
+    return (_jsx(PCEditorStoreContext.Provider, { value: {
+            state: storeRef.current,
+        }, children: children }));
+};
+//# sourceMappingURL=PCEditorStoreProvider.js.map

package/build/esm/context/editorStoreContext/PCEditorStoreProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PCEditorStoreProvider.js","sourceRoot":"../../../../src","sources":["context/editorStoreContext/PCEditorStoreProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAc,mBAAmB,EAAC,iCAA8B;AAGvE,OAAO,EAAC,oBAAoB,EAAC,kCAA+B;AAI5D,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EAAC,QAAQ,EAA6B,EAAE,EAAE;IAC5E,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,EAAyB,CAAC;IAEvD,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,OAAyB,EAAE,EAAE;QAC9D,IAAI,QAAQ,CAAC,OAAO,IAAI,OAAO,CAAC,KAAK,EAAE,CAAC;YACpC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAC7C,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,MAAM,SAAS,GAAG,CAAC,CAAe,EAAE,EAAE;YAClC,MAAM,OAAO,GAAG,CAAC,CAAC,IAAwB,CAAC;YAC3C,SAAS,CAAC,OAAO,CAAC,CAAC;QACvB,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAE9C,OAAO,GAAG,EAAE;YACR,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACrD,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;QACpB,QAAQ,CAAC,OAAO,GAAG,mBAAmB,EAAE,CAAC;IAC7C,CAAC;IAED,OAAO,CACH,KAAC,oBAAoB,CAAC,QAAQ,IAC1B,KAAK,EAAE;YACH,KAAK,EAAE,QAAQ,CAAC,OAAO;SAC1B,YAEA,QAAQ,GACmB,CACnC,CAAC;AACN,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {StoreApi} from 'zustand';\n\nimport {EditorState, createPCEditorStore} from '../../../common/store';\nimport {StoreSyncMessage} from '../../../common/types';\n\nimport {PCEditorStoreContext} from './PCEditorStoreContext';\n\ninterface PCEditorStoreProviderProps extends React.PropsWithChildren {}\n\nexport const PCEditorStoreProvider = ({children}: PCEditorStoreProviderProps) => {\n    const storeRef = React.useRef<StoreApi<EditorState>>();\n\n    const syncStore = React.useCallback((message: StoreSyncMessage) => {\n        if (storeRef.current && message.state) {\n            storeRef.current.setState(message.state);\n        }\n    }, []);\n\n    React.useEffect(() => {\n        const onMessage = (e: MessageEvent) => {\n            const message = e.data as StoreSyncMessage;\n            syncStore(message);\n        };\n\n        window.addEventListener('message', onMessage);\n\n        return () => {\n            window.removeEventListener('message', onMessage);\n        };\n    }, [syncStore]);\n\n    if (!storeRef.current) {\n        storeRef.current = createPCEditorStore();\n    }\n\n    return (\n        <PCEditorStoreContext.Provider\n            value={{\n                state: storeRef.current,\n            }}\n        >\n            {children}\n        </PCEditorStoreContext.Provider>\n    );\n};\n"]}

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

@@ -0,0 +1,2 @@
+export * from "./PCEditorStoreContext.js";
+export * from "./PCEditorStoreProvider.js";

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

@@ -0,0 +1,3 @@
+export * from "./PCEditorStoreContext.js";
+export * from "./PCEditorStoreProvider.js";
+//# sourceMappingURL=index.js.map

package/build/esm/context/editorStoreContext/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["context/editorStoreContext/index.ts"],"names":[],"mappings":"AAAA,0CAAuC;AACvC,2CAAwC","sourcesContent":["export * from './PCEditorStoreContext';\nexport * from './PCEditorStoreProvider';\n"]}

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { PageContent } from "../../../models/index.js";
 import { CodeEditorMessageProps } from "../../utils/validation.js";
 import './CodeEditor.css';
@@ -10,5 +9,5 @@ interface CodeEditorProps {
     onChange: (content: PageContent) => void;
     message?: CodeEditorMessageProps;
 }
-export declare const CodeEditor: React.MemoExoticComponent<({ onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, code }: CodeEditorProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const CodeEditor: ({ onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, code, }: CodeEditorProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -11,8 +11,7 @@ import { parseCode } from "../../utils/code.js";
 import { options } from "./constants.js";
 import './CodeEditor.css';
 const b = block('code-editor');
-const ON_CHANGE_DEBOUNCE_TIMEOUT = 300;
-export const CodeEditor = React.memo(({ onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, code }) => {
+export const CodeEditor = ({ onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, code, }) => {
     const [message, setMessage] = React.useState(() => validator(code));
     const { theme = Theme.Light } = React.useContext(EditorContext);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -20,8 +19,7 @@ export const CodeEditor = React.memo(({ onChange, validator, fullscreenModeOn, o
         const validationResult = validator(newCode);
         setMessage(validationResult);
         onChange(parseCode(newCode));
-    }, ON_CHANGE_DEBOUNCE_TIMEOUT), [onChange, validator]);
-    return (_jsxs("div", { className: b({ fullscreen: fullscreenModeOn }), children: [_jsx("div", { className: b('header'), children: _jsx(Button, { view: "flat-secondary", onClick: () => onFullscreenModeOnUpdate(!fullscreenModeOn), children: _jsx(Icon, { data: fullscreenModeOn ? ChevronsCollapseUpRight : ChevronsExpandUpRight, size: 16 }) }) }), _jsx("div", { className: b('code'), children: _jsx(MonacoEditor, { defaultValue: code, value: code, language: "yaml", options: options, onChange: onChangeWithValidation, theme: theme === Theme.Dark ? 'vs-dark' : 'vs' }, String(fullscreenModeOn)) }), _jsx("div", { className: b('footer'), children: message && (_jsx("div", { className: b('message-container'), children: _jsx("div", { className: b('message', { status: message.status }), children: message.text }) })) })] }));
-});
-CodeEditor.displayName = 'CodeEditor';
+    }, 200), [onChange, validator]);
+    return (_jsxs("div", { className: b({ fullscreen: fullscreenModeOn }), children: [_jsx("div", { className: b('header'), children: _jsx(Button, { view: "flat-secondary", onClick: () => onFullscreenModeOnUpdate(!fullscreenModeOn), children: _jsx(Icon, { data: fullscreenModeOn ? ChevronsCollapseUpRight : ChevronsExpandUpRight, size: 16 }) }) }), _jsx("div", { className: b('code'), children: _jsx(MonacoEditor, { value: code, language: "yaml", options: options, onChange: onChangeWithValidation, theme: theme === Theme.Dark ? 'vs-dark' : 'vs' }, String(fullscreenModeOn)) }), _jsx("div", { className: b('footer'), children: message && (_jsx("div", { className: b('message-container'), children: _jsx("div", { className: b('message', { status: message.status }), children: message.text }) })) })] }));
+};
 //# sourceMappingURL=CodeEditor.js.map

package/build/esm/editor/components/CodeEditor/CodeEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.js","sourceRoot":"../../../../../src","sources":["editor/components/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,uBAAuB,EAAE,qBAAqB,EAAC,MAAM,mBAAmB,CAAC;AACjF,OAAO,EAAC,MAAM,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAC/C,OAAO,QAAQ,2BAAwB;AACvC,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAE/C,OAAO,EAAc,KAAK,EAAC,iCAAwB;AACnD,OAAO,EAAC,KAAK,EAAC,gCAAuB;AACrC,OAAO,EAAC,aAAa,EAAC,yBAAsB;AAC5C,OAAO,EAAC,SAAS,EAAC,4BAAyB;AAG3C,OAAO,EAAC,OAAO,EAAC,uBAAoB;AAEpC,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC;AAE/B,MAAM,0BAA0B,GAAG,GAAG,CAAC;AAWvC,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAChC,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,IAAI,EAAkB,EAAE,EAAE;IACzF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;IACpE,MAAM,EAAC,KAAK,GAAG,KAAK,CAAC,KAAK,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IAE9D,uDAAuD;IACvD,MAAM,sBAAsB,GAAG,KAAK,CAAC,WAAW,CAC5C,QAAQ,CAAC,CAAC,OAAe,EAAE,EAAE;QACzB,MAAM,gBAAgB,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;QAE5C,UAAU,CAAC,gBAAgB,CAAC,CAAC;QAC7B,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;IACjC,CAAC,EAAE,0BAA0B,CAAC,EAC9B,CAAC,QAAQ,EAAE,SAAS,CAAC,CACxB,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,EAAC,UAAU,EAAE,gBAAgB,EAAC,CAAC,aAC7C,cAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YACvB,KAAC,MAAM,IACH,IAAI,EAAC,gBAAgB,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,CAAC,gBAAgB,CAAC,YAE1D,KAAC,IAAI,IACD,IAAI,EACA,gBAAgB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,qBAAqB,EAEtE,IAAI,EAAE,EAAE,GACV,GACG,GACP,EACN,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,KAAC,YAAY,IAET,YAAY,EAAE,IAAI,EAClB,KAAK,EAAE,IAAI,EACX,QAAQ,EAAC,MAAM,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,sBAAsB,EAChC,KAAK,EAAE,KAAK,KAAK,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,IANzC,MAAM,CAAC,gBAAgB,CAAC,CAO/B,GACA,EACN,cAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YACtB,OAAO,IAAI,CACR,cAAK,SAAS,EAAE,CAAC,CAAC,mBAAmB,CAAC,YAClC,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,MAAM,EAAE,OAAO,CAAC,MAAM,EAAC,CAAC,YACjD,OAAO,CAAC,IAAI,GACX,GACJ,CACT,GACC,IACJ,CACT,CAAC;AACN,CAAC,CACJ,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {ChevronsCollapseUpRight, ChevronsExpandUpRight} from '@gravity-ui/icons';\nimport {Button, Icon} from '@gravity-ui/uikit';\nimport debounce from 'lodash/debounce';\nimport MonacoEditor from 'react-monaco-editor';\n\nimport {PageContent, Theme} from '../../../models';\nimport {block} from '../../../utils';\nimport {EditorContext} from '../../context';\nimport {parseCode} from '../../utils/code';\nimport {CodeEditorMessageProps} from '../../utils/validation';\n\nimport {options} from './constants';\n\nimport './CodeEditor.scss';\n\nconst b = block('code-editor');\n\nconst ON_CHANGE_DEBOUNCE_TIMEOUT = 300;\n\ninterface CodeEditorProps {\n    code: string;\n    fullscreenModeOn: boolean;\n    validator: (code: string) => CodeEditorMessageProps;\n    onFullscreenModeOnUpdate: (fullscreenModeOn: boolean) => void;\n    onChange: (content: PageContent) => void;\n    message?: CodeEditorMessageProps;\n}\n\nexport const CodeEditor = React.memo(\n    ({onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, code}: CodeEditorProps) => {\n        const [message, setMessage] = React.useState(() => validator(code));\n        const {theme = Theme.Light} = React.useContext(EditorContext);\n\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        const onChangeWithValidation = React.useCallback(\n            debounce((newCode: string) => {\n                const validationResult = validator(newCode);\n\n                setMessage(validationResult);\n                onChange(parseCode(newCode));\n            }, ON_CHANGE_DEBOUNCE_TIMEOUT),\n            [onChange, validator],\n        );\n\n        return (\n            <div className={b({fullscreen: fullscreenModeOn})}>\n                <div className={b('header')}>\n                    <Button\n                        view=\"flat-secondary\"\n                        onClick={() => onFullscreenModeOnUpdate(!fullscreenModeOn)}\n                    >\n                        <Icon\n                            data={\n                                fullscreenModeOn ? ChevronsCollapseUpRight : ChevronsExpandUpRight\n                            }\n                            size={16}\n                        />\n                    </Button>\n                </div>\n                <div className={b('code')}>\n                    <MonacoEditor\n                        key={String(fullscreenModeOn)}\n                        defaultValue={code}\n                        value={code}\n                        language=\"yaml\"\n                        options={options}\n                        onChange={onChangeWithValidation}\n                        theme={theme === Theme.Dark ? 'vs-dark' : 'vs'}\n                    />\n                </div>\n                <div className={b('footer')}>\n                    {message && (\n                        <div className={b('message-container')}>\n                            <div className={b('message', {status: message.status})}>\n                                {message.text}\n                            </div>\n                        </div>\n                    )}\n                </div>\n            </div>\n        );\n    },\n);\n\nCodeEditor.displayName = 'CodeEditor';\n"]}
+{"version":3,"file":"CodeEditor.js","sourceRoot":"../../../../../src","sources":["editor/components/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,uBAAuB,EAAE,qBAAqB,EAAC,MAAM,mBAAmB,CAAC;AACjF,OAAO,EAAC,MAAM,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAC/C,OAAO,QAAQ,2BAAwB;AACvC,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAE/C,OAAO,EAAc,KAAK,EAAC,iCAAwB;AACnD,OAAO,EAAC,KAAK,EAAC,gCAAuB;AACrC,OAAO,EAAC,aAAa,EAAC,yBAAsB;AAC5C,OAAO,EAAC,SAAS,EAAC,4BAAyB;AAG3C,OAAO,EAAC,OAAO,EAAC,uBAAoB;AAEpC,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC;AAW/B,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,wBAAwB,EACxB,IAAI,GACU,EAAE,EAAE;IAClB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;IACpE,MAAM,EAAC,KAAK,GAAG,KAAK,CAAC,KAAK,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IAE9D,uDAAuD;IACvD,MAAM,sBAAsB,GAAG,KAAK,CAAC,WAAW,CAC5C,QAAQ,CAAC,CAAC,OAAe,EAAE,EAAE;QACzB,MAAM,gBAAgB,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;QAE5C,UAAU,CAAC,gBAAgB,CAAC,CAAC;QAC7B,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;IACjC,CAAC,EAAE,GAAG,CAAC,EACP,CAAC,QAAQ,EAAE,SAAS,CAAC,CACxB,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,EAAC,UAAU,EAAE,gBAAgB,EAAC,CAAC,aAC7C,cAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YACvB,KAAC,MAAM,IACH,IAAI,EAAC,gBAAgB,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,CAAC,gBAAgB,CAAC,YAE1D,KAAC,IAAI,IACD,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,qBAAqB,EACxE,IAAI,EAAE,EAAE,GACV,GACG,GACP,EACN,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,KAAC,YAAY,IAET,KAAK,EAAE,IAAI,EACX,QAAQ,EAAC,MAAM,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,sBAAsB,EAChC,KAAK,EAAE,KAAK,KAAK,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,IALzC,MAAM,CAAC,gBAAgB,CAAC,CAM/B,GACA,EACN,cAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YACtB,OAAO,IAAI,CACR,cAAK,SAAS,EAAE,CAAC,CAAC,mBAAmB,CAAC,YAClC,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,MAAM,EAAE,OAAO,CAAC,MAAM,EAAC,CAAC,YAAG,OAAO,CAAC,IAAI,GAAO,GAC1E,CACT,GACC,IACJ,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport {ChevronsCollapseUpRight, ChevronsExpandUpRight} from '@gravity-ui/icons';\nimport {Button, Icon} from '@gravity-ui/uikit';\nimport debounce from 'lodash/debounce';\nimport MonacoEditor from 'react-monaco-editor';\n\nimport {PageContent, Theme} from '../../../models';\nimport {block} from '../../../utils';\nimport {EditorContext} from '../../context';\nimport {parseCode} from '../../utils/code';\nimport {CodeEditorMessageProps} from '../../utils/validation';\n\nimport {options} from './constants';\n\nimport './CodeEditor.scss';\n\nconst b = block('code-editor');\n\ninterface CodeEditorProps {\n    code: string;\n    fullscreenModeOn: boolean;\n    validator: (code: string) => CodeEditorMessageProps;\n    onFullscreenModeOnUpdate: (fullscreenModeOn: boolean) => void;\n    onChange: (content: PageContent) => void;\n    message?: CodeEditorMessageProps;\n}\n\nexport const CodeEditor = ({\n    onChange,\n    validator,\n    fullscreenModeOn,\n    onFullscreenModeOnUpdate,\n    code,\n}: CodeEditorProps) => {\n    const [message, setMessage] = React.useState(() => validator(code));\n    const {theme = Theme.Light} = React.useContext(EditorContext);\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    const onChangeWithValidation = React.useCallback(\n        debounce((newCode: string) => {\n            const validationResult = validator(newCode);\n\n            setMessage(validationResult);\n            onChange(parseCode(newCode));\n        }, 200),\n        [onChange, validator],\n    );\n\n    return (\n        <div className={b({fullscreen: fullscreenModeOn})}>\n            <div className={b('header')}>\n                <Button\n                    view=\"flat-secondary\"\n                    onClick={() => onFullscreenModeOnUpdate(!fullscreenModeOn)}\n                >\n                    <Icon\n                        data={fullscreenModeOn ? ChevronsCollapseUpRight : ChevronsExpandUpRight}\n                        size={16}\n                    />\n                </Button>\n            </div>\n            <div className={b('code')}>\n                <MonacoEditor\n                    key={String(fullscreenModeOn)}\n                    value={code}\n                    language=\"yaml\"\n                    options={options}\n                    onChange={onChangeWithValidation}\n                    theme={theme === Theme.Dark ? 'vs-dark' : 'vs'}\n                />\n            </div>\n            <div className={b('footer')}>\n                {message && (\n                    <div className={b('message-container')}>\n                        <div className={b('message', {status: message.status})}>{message.text}</div>\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n};\n"]}

package/build/esm/editor/data/templates/test-editor-block.json

@@ -0,0 +1,18 @@
+{
+  "template": {
+    "type": "test-editor-block",
+    "title": "Lorem ipsum dolor sit amet",
+    "table": {
+      "content": [
+        ["Lorem", "ipsum 1", "dolor 2", "sit 3"],
+        ["Lorem 1", "0", "0", "0"],
+        ["Lorem 2", "0", "0", "1"],
+        ["Lorem 3", "0", "0", "1"],
+        ["Lorem 4", "0", "1", "1"],
+        ["Lorem 5", "1", "1", "1"]
+      ],
+      "legend": ["ipsum 1", "ipsum 2"],
+      "justify": ["start", "center", "center", "center"]
+    }
+  }
+}