@gravity-ui/page-constructor 5.14.4-alpha.2 → 5.14.4-alpha.3

package/build/cjs/blocks/Media/index.d.ts

@@ -2,12 +2,36 @@ declare const MediaBlockConfig: {
     component: (props: import("../..").MediaBlockProps) => JSX.Element;
     schema: {
         name: string;
+        group: string;
         inputs: import("../../editor-v2").ConfigInput[];
         default: {
-            type: string;
             title: string;
-            additionalInfo: string;
             description: string;
+            additionalInfo: string;
+            links: {
+                url: string;
+                text: string;
+                theme: string;
+                arrow: boolean;
+            }[];
+            buttons: {
+                text: string;
+                theme: string;
+                url: string;
+            }[];
+            list: ({
+                title: string;
+                text: string;
+            } | {
+                text: string;
+                title?: undefined;
+            } | {
+                title: string;
+                text?: undefined;
+            })[];
+            media: {
+                image: string;
+            };
         };
     };
 };

package/build/cjs/blocks/Media/index.js

@@ -8,12 +8,47 @@ const MediaBlockConfig = {
     component: Media_1.default,
     schema: {
         name: 'Media Block',
+        group: 'block',
         inputs: (0, form_generator_1.generateFromAJV)(schema_1.MediaBlock['media-block']),
         default: {
-            type: 'media-block',
-            title: 'Media Block',
-            additionalInfo: 'Additional info',
-            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            title: 'Lorem ipsum dolor sit',
+            description: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+            additionalInfo: 'Duis aute irure dolor in reprehenderit n voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+            links: [
+                {
+                    url: '#',
+                    text: 'Learn more',
+                    theme: 'normal',
+                    arrow: true,
+                },
+            ],
+            buttons: [
+                {
+                    text: 'Button',
+                    theme: 'action',
+                    url: 'https://example.com',
+                },
+                {
+                    text: 'Button',
+                    theme: 'outlined',
+                    url: '#',
+                },
+            ],
+            list: [
+                {
+                    title: 'Lorem ipsum',
+                    text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                },
+                {
+                    text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                },
+                {
+                    title: 'Lorem ipsum ipsum',
+                },
+            ],
+            media: {
+                image: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/main/new/media-01-01.jpg',
+            },
         },
     },
 };

package/build/cjs/blocks/PromoFeaturesBlock/index.d.ts

@@ -2,10 +2,20 @@ declare const PromoFeaturesBlockConfig: {
     component: (props: import("../..").PromoFeaturesProps) => JSX.Element;
     schema: {
         name: string;
+        group: string;
         inputs: import("../../editor-v2").ConfigInput[];
         default: {
             title: string;
-            items: {}[];
+            theme: string;
+            items: ({
+                title: string;
+                text: string;
+                theme?: undefined;
+            } | {
+                title: string;
+                text: string;
+                theme: string;
+            })[];
         };
     };
 };

package/build/cjs/blocks/PromoFeaturesBlock/index.js

@@ -8,10 +8,40 @@ const PromoFeaturesBlockConfig = {
     component: PromoFeaturesBlock_1.default,
     schema: {
         name: 'Promo Features Block',
+        group: 'block',
         inputs: (0, form_generator_1.generateFromAJV)(schema_1.PromoFeaturesBlock['promo-features-block']),
         default: {
             title: 'Promo Features Block',
-            items: [{}],
+            theme: 'default',
+            items: [
+                {
+                    title: 'Lorem ipsum dolor sit amet',
+                    text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                },
+                {
+                    title: 'Lorem ipsum dolor sit amet',
+                    text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                },
+                {
+                    title: 'Lorem ipsum dolor sit amet',
+                    text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                },
+                {
+                    title: 'Lorem ipsum dolor sit amet',
+                    text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                    theme: 'accent',
+                },
+                {
+                    title: 'Lorem ipsum dolor sit amet',
+                    text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                    theme: 'accent-light',
+                },
+                {
+                    title: 'Lorem ipsum dolor sit amet',
+                    text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                    theme: 'primary',
+                },
+            ],
         },
     },
 };

package/build/cjs/blocks/Questions/index.d.ts

@@ -2,6 +2,7 @@ declare const QuestionsBlockConfig: {
     component: (props: import("../..").QuestionsProps) => JSX.Element;
     schema: {
         name: string;
+        group: string;
         inputs: import("../../editor-v2").ConfigInput[];
         default: {
             type: string;

package/build/cjs/blocks/Questions/index.js

@@ -8,6 +8,7 @@ const QuestionsBlockConfig = {
     component: Questions_1.default,
     schema: {
         name: 'Questions Block',
+        group: 'block',
         inputs: (0, form_generator_1.generateFromAJV)(schema_1.QuestionsBlock['questions-block']),
         default: {
             type: 'questions-block',

package/build/cjs/blocks/Share/index.d.ts

@@ -2,6 +2,7 @@ declare const ShareBlockConfig: {
     component: ({ items, title }: import("../..").ShareBlockProps) => JSX.Element;
     schema: {
         name: string;
+        group: string;
         inputs: import("../../editor-v2").ConfigInput[];
         default: {
             items: string[];

package/build/cjs/blocks/Share/index.js

@@ -8,6 +8,7 @@ const ShareBlockConfig = {
     component: Share_1.default,
     schema: {
         name: 'Share Block',
+        group: 'block',
         inputs: (0, form_generator_1.generateFromAJV)(schema_1.ShareBlock['share-block']),
         default: {
             items: ['vk', 'telegram', 'facebook'],

package/build/cjs/blocks/Slider/index.d.ts

@@ -2,7 +2,26 @@ declare const SliderBlockConfig: {
     component: (props: import("../..").WithChildren<import("./Slider").SliderProps>) => JSX.Element;
     schema: {
         name: string;
+        group: string;
         inputs: import("../../editor-v2").ConfigInput[];
+        default: {
+            dots: boolean;
+            type: string;
+            title: string;
+            description: string;
+            slidesToShow: number;
+            arrows: boolean;
+            children: {
+                type: string;
+                text: string;
+                url: string;
+                author: {
+                    firstName: string;
+                    secondName: string;
+                    description: string;
+                };
+            }[];
+        };
     };
 };
 export default SliderBlockConfig;

package/build/cjs/blocks/Slider/index.js

@@ -8,7 +8,38 @@ const SliderBlockConfig = {
     component: Slider_1.default,
     schema: {
         name: 'Slider Block',
+        group: 'card-containers',
         inputs: (0, form_generator_1.generateFromAJV)(schema_1.SliderBlock['slider-block']),
+        default: {
+            dots: true,
+            type: 'slider-block',
+            title: 'Slider Block with Quote Cards',
+            description: 'You can insert any card inside block',
+            slidesToShow: 1,
+            arrows: true,
+            children: [
+                {
+                    type: 'quote',
+                    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+                    url: 'https://example.com',
+                    author: {
+                        firstName: 'Lorem',
+                        secondName: 'ipsum',
+                        description: 'Lorem ipsum',
+                    },
+                },
+                {
+                    type: 'quote',
+                    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+                    url: 'https://example.com',
+                    author: {
+                        firstName: 'Lorem',
+                        secondName: 'ipsum',
+                        description: 'Lorem ipsum',
+                    },
+                },
+            ],
+        },
     },
 };
 exports.default = SliderBlockConfig;

package/build/cjs/blocks/Table/index.d.ts

@@ -2,7 +2,17 @@ declare const TableBlockConfig: {
     component: (props: import("../..").TableBlockProps) => JSX.Element;
     schema: {
         name: string;
+        group: string;
         inputs: import("../../editor-v2").ConfigInput[];
+        default: {
+            type: string;
+            title: string;
+            table: {
+                content: string[][];
+                legend: string[];
+                justify: string[];
+            };
+        };
     };
 };
 export default TableBlockConfig;

package/build/cjs/blocks/Table/index.js

@@ -8,7 +8,24 @@ const TableBlockConfig = {
     component: Table_1.default,
     schema: {
         name: 'Table Block',
+        group: 'block',
         inputs: (0, form_generator_1.generateFromAJV)(schema_1.TableBlock['table-block']),
+        default: {
+            type: 'table-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'],
+            },
+        },
     },
 };
 exports.default = TableBlockConfig;

package/build/cjs/blocks/Tabs/index.d.ts

@@ -2,6 +2,7 @@ declare const TabsBlockConfig: {
     component: ({ items, title, description, animated, tabsColSizes, centered, direction, contentSize, }: import("../..").TabsBlockProps) => JSX.Element;
     schema: {
         name: string;
+        group: string;
         inputs: import("../../editor-v2").ConfigInput[];
         default: {
             title: string;

package/build/cjs/blocks/Tabs/index.js

@@ -8,6 +8,7 @@ const TabsBlockConfig = {
     component: Tabs_1.default,
     schema: {
         name: 'Tabs Block',
+        group: 'block',
         inputs: (0, form_generator_1.generateFromAJV)(schema_1.TabsBlock['tabs-block']),
         default: {
             title: 'Tabs Block',

package/build/cjs/common/types/forms.d.ts

@@ -1,6 +1,7 @@
 export interface BlockConfig {
     name: string;
     inputs: Array<ConfigInput>;
+    group?: string;
     default?: object;
 }
 export interface TextInput {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ConfigInput } from './common/types';
+import { BlockConfig } from './common/types';
 /**
  * @deprecated use blockDataMap
  **/
@@ -50,10 +50,6 @@ export declare const navItemMap: {
 };
 export interface BlockData {
     component: React.ComponentType<any>;
-    schema: {
-        name: string;
-        inputs: ConfigInput[];
-        default?: object;
-    };
+    schema: BlockConfig;
 }
 export declare const blockDataMap: Record<string, BlockData>;

package/build/cjs/constructor-items.js

@@ -34,7 +34,7 @@ const BasicCard_1 = tslib_1.__importDefault(require("./sub-blocks/BasicCard"));
 const Content_1 = tslib_1.__importDefault(require("./sub-blocks/Content"));
 const Divider_1 = tslib_1.__importDefault(require("./sub-blocks/Divider"));
 const ImageCard_1 = tslib_1.__importDefault(require("./sub-blocks/ImageCard"));
-const form_1 = tslib_1.__importDefault(require("./sub-blocks/LayoutItem/form"));
+const LayoutItem_1 = tslib_1.__importDefault(require("./sub-blocks/LayoutItem"));
 const MediaCard_1 = tslib_1.__importDefault(require("./sub-blocks/MediaCard"));
 const PriceCard_1 = tslib_1.__importDefault(require("./sub-blocks/PriceCard"));
 const PriceDetailed_1 = tslib_1.__importDefault(require("./sub-blocks/PriceDetailed"));
@@ -112,7 +112,7 @@ exports.blockDataMap = {
     [models_1.SubBlockType.PriceDetailed]: PriceDetailed_1.default,
     [models_1.SubBlockType.MediaCard]: MediaCard_1.default,
     [models_1.SubBlockType.BannerCard]: BannerCard_1.default,
-    [models_1.SubBlockType.LayoutItem]: form_1.default,
+    [models_1.SubBlockType.LayoutItem]: LayoutItem_1.default,
     [models_1.SubBlockType.BackgroundCard]: BackgroundCard_1.default,
     [models_1.SubBlockType.BasicCard]: BasicCard_1.default,
     [models_1.SubBlockType.Content]: Content_1.default,

package/build/cjs/editor-v2/components/BlocksList/BlocksList.css

@@ -18,21 +18,47 @@ body {
 }
 .pc-blocks-list__card {
   padding: 8px;
-  cursor: pointer;
+  cursor: grab;
   user-select: none;
   margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
 }
 .pc-blocks-list__card:last-child {
   margin-bottom: 0;
 }
 .pc-blocks-list__card:active {
   background-color: var(--g-color-base-generic-hover);
+  cursor: grabbing;
+}
+.pc-blocks-list__name {
+  flex: 1;
 }
 .pc-blocks-list__title {
   font-size: var(--g-text-subheader-3-font-size);
   line-height: var(--g-text-subheader-3-line-height);
   font-weight: var(--g-text-subheader-font-weight);
   margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.pc-blocks-list__subtitle {
+  font-size: var(--g-text-subheader-2-font-size);
+  line-height: var(--g-text-subheader-2-line-height);
+  font-weight: var(--g-text-subheader-font-weight);
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.pc-blocks-list__group {
+  margin-bottom: 16px;
+}
+.pc-blocks-list__group:last-child {
+  margin-bottom: 0;
 }
 .pc-blocks-list__section {
   margin-bottom: 20px;

package/build/cjs/editor-v2/components/BlocksList/BlocksList.js

@@ -2,21 +2,53 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const types_1 = require("../../../common/types");
 const utils_1 = require("../../../utils");
 const contentConfig_1 = require("../../context/contentConfig");
+const editorContext_1 = require("../../context/editorContext");
 const messagesContext_1 = require("../../context/messagesContext");
 const b = (0, utils_1.block)('blocks-list');
 const BlocksList = (_p) => {
-    const { blocks } = (0, contentConfig_1.useContentConfigStore)();
+    const { blocks, insertBlock } = (0, contentConfig_1.useContentConfigStore)();
+    const { selectedBlock } = (0, editorContext_1.useEditorStore)();
     const sendMessage = (0, messagesContext_1.useMessageSender)();
     const onMouseDown = (0, react_1.useCallback)((blockType) => {
         sendMessage({ type: types_1.ActionTypes.InsertModeEnable, payload: { blockType } });
     }, [sendMessage]);
+    const onAddClick = (0, react_1.useCallback)((type) => {
+        const path = selectedBlock ? selectedBlock.path : [0];
+        return insertBlock(path, type);
+    }, [insertBlock, selectedBlock]);
+    const groups = blocks.reduce((acc, currentBlock) => {
+        const group = currentBlock.schema.group;
+        if (group) {
+            if (!acc[group]) {
+                /* eslint-disable no-param-reassign */
+                acc[group] = [];
+            }
+            acc[group].push(currentBlock);
+        }
+        else {
+            if (!acc['other']) {
+                /* eslint-disable no-param-reassign */
+                acc['other'] = [];
+            }
+            acc['other'].push(currentBlock);
+        }
+        return acc;
+    }, {});
     return (react_1.default.createElement("div", { className: b() },
         react_1.default.createElement("div", { className: b('section') },
             react_1.default.createElement("div", { className: b('title') }, "Blocks"),
-            blocks.map(({ type, schema: { name } }) => (react_1.default.createElement(uikit_1.Card, { key: type, className: b('card'), onMouseDown: () => onMouseDown(type) }, name))))));
+            Object.entries(groups).map(([key, groupBlocks]) => (react_1.default.createElement("div", { className: b('group'), key: key },
+                react_1.default.createElement("div", { className: b('subtitle') }, lodash_1.default.capitalize(key)),
+                react_1.default.createElement("div", null, groupBlocks.map(({ type, schema: { name } }) => (react_1.default.createElement(uikit_1.Card, { key: type, className: b('card'), onMouseDown: () => onMouseDown(type) },
+                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.Grip }),
+                    react_1.default.createElement("div", { className: b('name') }, name),
+                    react_1.default.createElement(uikit_1.Button, { onClick: () => onAddClick(type) },
+                        react_1.default.createElement(uikit_1.Icon, { data: icons_1.Plus }))))))))))));
 };
 exports.default = BlocksList;

package/build/cjs/editor-v2/components/Panels/Panels.css

@@ -0,0 +1,36 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+body {
+  --pc-editor-header-height: 48px;
+  --pc-editor-code-header-height: 36px;
+  --pc-editor-divider-width: 12px;
+  --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
+  --pc-editor-base-color: var(--g-color-base-brand);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
+}
+
+.pc-panels__button-wrap {
+  --pc-editor-panels-button-gap: 8px;
+  position: absolute;
+  z-index: 1000;
+}
+.pc-panels__button-wrap_left {
+  bottom: var(--pc-editor-panels-button-gap);
+  left: calc(100% + var(--pc-editor-panels-button-gap));
+}
+.pc-panels__button-wrap_right {
+  bottom: var(--pc-editor-panels-button-gap);
+  right: calc(100% + var(--pc-editor-panels-button-gap));
+}
+.pc-panels__draggable {
+  position: relative;
+  width: 12px;
+  height: 100%;
+  cursor: col-resize;
+  background-color: var(--g-color-line-generic);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--g-color-base-background);
+}

package/build/cjs/editor-v2/components/Panels/Panels.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+interface PanelsProps {
+    left: ReactElement;
+    middle: ReactElement;
+    right: ReactElement;
+}
+export declare const Panels: (props: PanelsProps) => JSX.Element;
+export {};

package/build/cjs/editor-v2/components/Panels/Panels.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Panels = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const react_resizable_panels_1 = require("react-resizable-panels");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('panels');
+const Panels = (props) => {
+    var _a, _b;
+    const { left, right, middle } = props;
+    const leftPanel = (0, react_1.useRef)(null);
+    const rightPanel = (0, react_1.useRef)(null);
+    const expandPanel = (reference) => {
+        const panel = reference.current;
+        if (panel) {
+            panel.expand();
+        }
+    };
+    const isCollapsed = {
+        left: ((_a = leftPanel.current) === null || _a === void 0 ? void 0 : _a.isCollapsed()) || false,
+        right: ((_b = rightPanel.current) === null || _b === void 0 ? void 0 : _b.isCollapsed()) || false,
+    };
+    return (react_1.default.createElement(react_resizable_panels_1.PanelGroup, { className: b('panel'), autoSaveId: "page-constructor-editor", direction: "horizontal" },
+        react_1.default.createElement(react_resizable_panels_1.Panel, { ref: leftPanel, collapsible: true, defaultSize: 25, minSize: 15 }, left),
+        react_1.default.createElement(react_resizable_panels_1.PanelResizeHandle, { className: b('draggable') },
+            react_1.default.createElement(icons_1.Grip, { className: b('grip') }),
+            isCollapsed.left && (react_1.default.createElement("div", { className: b('button-wrap', { left: true }) },
+                react_1.default.createElement(uikit_1.Button, { className: b('button'), view: "action", onClick: () => expandPanel(leftPanel) },
+                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.ArrowRightFromLine }))))),
+        react_1.default.createElement(react_resizable_panels_1.Panel, { minSize: 20 }, middle),
+        react_1.default.createElement(react_resizable_panels_1.PanelResizeHandle, { className: b('draggable') },
+            react_1.default.createElement(icons_1.Grip, { className: b('grip') }),
+            isCollapsed.right && (react_1.default.createElement("div", { className: b('button-wrap', { right: true }) },
+                react_1.default.createElement(uikit_1.Button, { className: b('button'), view: "action", onClick: () => expandPanel(rightPanel) },
+                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.ArrowLeftFromLine }))))),
+        react_1.default.createElement(react_resizable_panels_1.Panel, { ref: rightPanel, collapsible: true, minSize: 15, defaultSize: 25 }, right)));
+};
+exports.Panels = Panels;

package/build/cjs/editor-v2/components/Tree/Tree.css

@@ -13,6 +13,17 @@ body {
 .pc-tree {
   padding: 12px;
 }
+.pc-tree__head {
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.pc-tree__title {
+  font-size: var(--g-text-subheader-3-font-size);
+  line-height: var(--g-text-subheader-3-line-height);
+  font-weight: var(--g-text-subheader-font-weight);
+}
 .pc-tree__item {
   padding: 8px;
   margin-bottom: 8px;

package/build/cjs/editor-v2/components/Tree/Tree.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../../utils");
 const contentConfig_1 = require("../../context/contentConfig");
@@ -20,13 +21,20 @@ const generateTree = (items) => {
     });
 };
 const Tree = (_p) => {
-    const { config } = (0, contentConfig_1.useContentConfigStore)();
+    const { config, resetBlocks } = (0, contentConfig_1.useContentConfigStore)();
     const blockTree = generateTree(config.blocks);
     const renderTree = (items, deepLevel = 0) => {
         return items.map(({ type, children }, index) => (react_1.default.createElement(react_1.default.Fragment, { key: index },
             react_1.default.createElement(uikit_1.Card, { className: b('item', { deep: deepLevel }) }, type),
             children && renderTree(children, deepLevel + 1))));
     };
-    return react_1.default.createElement("div", { className: b() }, renderTree(blockTree));
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement("div", { className: b('head') },
+            react_1.default.createElement("div", { className: b('title') }, "Tree"),
+            react_1.default.createElement("div", { className: b('actions') },
+                react_1.default.createElement(uikit_1.Button, { view: "outlined-danger", onClick: () => resetBlocks() },
+                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.TrashBin }),
+                    "Clear all"))),
+        react_1.default.createElement("div", { className: b('cards') }, renderTree(blockTree))));
 };
 exports.default = Tree;

package/build/cjs/editor-v2/containers/Editor/Editor.css

@@ -36,16 +36,6 @@ body {
 .pc-editor__canvas {
   flex: 1;
 }
-.pc-editor__draggable {
-  width: 12px;
-  height: 100%;
-  cursor: col-resize;
-  background-color: var(--g-color-line-generic);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--g-color-base-background);
-}
 .pc-editor__overlay {
   position: absolute;
   height: 100%;