@gravity-ui/page-constructor 3.8.0 → 3.8.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [3.8.2](https://github.com/gravity-ui/page-constructor/compare/v3.8.1...v3.8.2) (2023-06-23)
+
+
+### Bug Fixes
+
+* quote validation ([#402](https://github.com/gravity-ui/page-constructor/issues/402)) ([3920561](https://github.com/gravity-ui/page-constructor/commit/3920561ebe0bac727826caf690d06d74d7affaef))
+
+## [3.8.1](https://github.com/gravity-ui/page-constructor/compare/v3.8.0...v3.8.1) (2023-06-22)
+
+
+### Bug Fixes
+
+* semantic markup ([#416](https://github.com/gravity-ui/page-constructor/issues/416)) ([1fd532c](https://github.com/gravity-ui/page-constructor/commit/1fd532ca0bcc2e6cd1f030b17be743c27fb2cf73))
+
 ## [3.8.0](https://github.com/gravity-ui/page-constructor/compare/v3.7.0...v3.8.0) (2023-06-22)
 
 

package/build/cjs/blocks/ContentLayout/schema.d.ts

@@ -12,9 +12,7 @@ export declare const ContentLayoutBlock: {
                 required: string[];
                 properties: {
                     src: {
-                        type: string; /**
-                         * @deprecated Use params on top level instead
-                         */
+                        type: string;
                         pattern: string;
                     };
                     alt: {
@@ -143,9 +141,7 @@ export declare const ContentLayoutBlock: {
                     required: string[];
                     properties: {
                         src: {
-                            type: string; /**
-                             * @deprecated Use params on top level instead
-                             */
+                            type: string;
                             pattern: string;
                         };
                         alt: {

package/build/cjs/blocks/Header/Header.css

@@ -76,6 +76,9 @@ unpredictable css rules order in build */
 .pc-header-block__description {
   margin-top: 16px;
   font-weight: normal;
+  font-size: var(--yc-text-caption-2-font-size);
+  line-height: var(--yc-text-caption-2-line-height);
+  margin-block-end: var(--yc-text-body-1-line-height);
 }
 .pc-header-block__description .yfm,
 .pc-header-block__description .yfm * {
@@ -167,6 +170,7 @@ unpredictable css rules order in build */
 .pc-header-block__overtitle {
   font-size: var(--yc-text-body-3-font-size);
   line-height: var(--yc-text-body-3-line-height);
+  margin-block-start: var(--yc-text-body-3-line-height);
   margin-bottom: 8px;
   font-weight: 400;
 }

package/build/cjs/blocks/Header/Header.js

@@ -51,12 +51,12 @@ const HeaderBlock = (props) => {
                                 'vertical-offset': curVerticalOffset,
                             }) },
                             react_1.default.createElement(grid_1.Col, { sizes: titleSizes, className: b('content-inner') },
-                                overtitle && (react_1.default.createElement("h4", { className: b('overtitle') },
+                                overtitle && (react_1.default.createElement("p", { className: b('overtitle') },
                                     react_1.default.createElement(components_1.HTML, null, overtitle))),
                                 react_1.default.createElement("h1", { className: b('title') },
                                     status,
                                     react_1.default.createElement(components_1.HTML, null, title)),
-                                description && (react_1.default.createElement("h5", { className: b('description') },
+                                description && (react_1.default.createElement("p", { className: b('description') },
                                     react_1.default.createElement(YFMWrapper_1.default, { content: description, modifiers: { constructor: true } }))),
                                 buttons && (react_1.default.createElement("div", { className: b('buttons'), "data-qa": "header-buttons" }, buttons &&
                                     buttons.map((button, index) => (react_1.default.createElement(components_1.RouterLink, { href: button.url, key: index },

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

@@ -7,6 +7,6 @@ const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('slider-block-arrow');
 const Arrow = ({ type, handleClick, className, size = 16 }) => (react_1.default.createElement("div", { className: b({ type }, className) },
     react_1.default.createElement("button", { className: b('button'), onClick: () => handleClick && handleClick(type) },
-        react_1.default.createElement("div", { className: b('icon-wrapper') },
+        react_1.default.createElement("span", { className: b('icon-wrapper') },
             react_1.default.createElement(ToggleArrow_1.default, { size: size, type: 'horizontal', iconType: "navigation", className: b('icon') })))));
 exports.default = Arrow;

package/build/cjs/blocks/Slider/Slider.css

@@ -133,8 +133,8 @@ unpredictable css rules order in build */
   display: inline-flex;
   justify-content: center;
 }
-.pc-SliderBlock__dots-list div.pc-SliderBlock__bar,
-.pc-SliderBlock__dots-list div.pc-SliderBlock__dot {
+.pc-SliderBlock__dots-list li.pc-SliderBlock__bar,
+.pc-SliderBlock__dots-list li.pc-SliderBlock__dot {
   margin: calc(12px / 2) 8px;
   top: 0;
 }

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

@@ -124,13 +124,13 @@ const SliderBlock = (props) => {
     const renderBar = () => {
         const barPosition = (DOT_GAP + DOT_WIDTH) * currentIndex;
         const barWidth = DOT_WIDTH + (DOT_GAP + DOT_WIDTH) * (slidesCountByBreakpoint - 1);
-        return (slidesCountByBreakpoint > 1 && (react_1.default.createElement("div", { className: b('bar'), style: {
+        return (slidesCountByBreakpoint > 1 && (react_1.default.createElement("li", { className: b('bar'), style: {
                 left: barPosition,
                 width: barWidth,
             } })));
     };
     const renderDot = (index) => {
-        return (react_1.default.createElement("div", { key: index, className: b('dot', { active: index === currentIndex }), onClick: () => handleDotClick(index) }));
+        return (react_1.default.createElement("li", { key: index, className: b('dot', { active: index === currentIndex }), onClick: () => handleDotClick(index) }));
     };
     const renderNavigation = () => {
         if (childrenCount <= slidesCountByBreakpoint || !dots || childrenCount === 1) {

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

@@ -12,9 +12,9 @@ export interface GetSlidesToShowParams {
 }
 export declare function getSlidesToShowWithDefaults({ contentLength, breakpoints, mobileFullscreen, }: GetSlidesToShowParams): {
     sm: number;
-    md: number;
-    lg: number;
     xl: number;
+    lg: number;
+    md: number;
 };
 export declare function getSliderResponsiveParams(breakpoints: SliderBreakpointParams): {
     breakpoint: number;

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

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSlidesToShowCount = exports.getSlidesCountByBreakpoint = exports.getSliderResponsiveParams = exports.getSlidesToShowWithDefaults = exports.DEFAULT_SLIDE_BREAKPOINTS = void 0;
+const tslib_1 = require("tslib");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const constants_1 = require("../../constants");
 const models_1 = require("./models");
 exports.DEFAULT_SLIDE_BREAKPOINTS = {
@@ -18,7 +20,7 @@ function getSlidesToShowWithDefaults({ contentLength, breakpoints, mobileFullscr
     else {
         result = breakpoints || exports.DEFAULT_SLIDE_BREAKPOINTS;
     }
-    return Object.assign(Object.assign(Object.assign({}, exports.DEFAULT_SLIDE_BREAKPOINTS), result), { sm: !mobileFullscreen && contentLength > 1 ? exports.DEFAULT_SLIDE_BREAKPOINTS.sm : 1 });
+    return Object.assign(Object.assign(Object.assign({}, exports.DEFAULT_SLIDE_BREAKPOINTS), lodash_1.default.pickBy(result, (value) => !isNaN(value))), { sm: !mobileFullscreen && contentLength > 1 ? exports.DEFAULT_SLIDE_BREAKPOINTS.sm : 1 });
 }
 exports.getSlidesToShowWithDefaults = getSlidesToShowWithDefaults;
 function getSliderResponsiveParams(breakpoints) {

package/build/cjs/components/Image/schema.d.ts

@@ -1,4 +1,4 @@
-export declare const urlPattern = "^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$";
+export declare const imageUrlPattern = "^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$";
 export declare const ImageDeviceProps: {
     type: string;
     additionalProperties: boolean;

package/build/cjs/components/Image/schema.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImageProps = exports.ImageObjectProps = exports.ImageDeviceProps = exports.urlPattern = void 0;
+exports.ImageProps = exports.ImageObjectProps = exports.ImageDeviceProps = exports.imageUrlPattern = void 0;
 const utils_1 = require("../../schema/validators/utils");
-exports.urlPattern = '^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$';
+exports.imageUrlPattern = '^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$';
 const ImageBase = {
     alt: {
         type: 'string',
@@ -16,12 +16,12 @@ exports.ImageDeviceProps = {
     type: 'object',
     additionalProperties: false,
     required: ['desktop', 'mobile'],
-    properties: Object.assign(Object.assign({}, ImageBase), { desktop: { type: 'string', pattern: exports.urlPattern }, tablet: {
+    properties: Object.assign(Object.assign({}, ImageBase), { desktop: { type: 'string', pattern: exports.imageUrlPattern }, tablet: {
             type: 'string',
-            pattern: exports.urlPattern,
+            pattern: exports.imageUrlPattern,
         }, mobile: {
             type: 'string',
-            pattern: exports.urlPattern,
+            pattern: exports.imageUrlPattern,
         } }),
 };
 exports.ImageObjectProps = {
@@ -30,14 +30,14 @@ exports.ImageObjectProps = {
     required: ['src'],
     properties: Object.assign(Object.assign({}, ImageBase), { src: {
             type: 'string',
-            pattern: exports.urlPattern,
+            pattern: exports.imageUrlPattern,
         } }),
 };
 exports.ImageProps = {
     oneOf: [
         {
             type: 'string',
-            pattern: exports.urlPattern,
+            pattern: exports.imageUrlPattern,
             optionName: 'url',
         },
         (0, utils_1.filteredItem)(Object.assign(Object.assign({}, exports.ImageObjectProps), { optionName: 'options' })),

package/build/cjs/components/Media/Image/Image.js

@@ -40,7 +40,7 @@ const Image = (props) => {
     };
     const imageBackground = (oneImage) => {
         const imageData = (0, utils_2.getMediaImage)(oneImage);
-        return (react_1.default.createElement(react_spring_1.animated.div, { style: { transform: parallaxInterpolate } },
+        return (react_1.default.createElement(react_spring_1.animated.div, { style: { transform: parallaxInterpolate || 'none' } },
             react_1.default.createElement(BackgroundImage_1.default, Object.assign({}, imageData, { className: imageClass, style: { height } }))));
     };
     const imageOnly = (oneImage) => {

package/build/cjs/components/MetaInfo/MetaInfo.js

@@ -4,5 +4,5 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('meta-info');
-const MetaInfo = ({ items, className }) => (react_1.default.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (react_1.default.createElement("div", { key: metaInfoItem, className: b('item') }, metaInfoItem)))));
+const MetaInfo = ({ items, className }) => (react_1.default.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (react_1.default.createElement("span", { key: metaInfoItem, className: b('item') }, metaInfoItem)))));
 exports.default = MetaInfo;

package/build/cjs/components/YFMWrapper/YFMWrapper.js

@@ -7,6 +7,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
 const snakecase_keys_1 = tslib_1.__importDefault(require("snakecase-keys"));
 const components_1 = require("../../components");
+const blocks_1 = require("../../utils/blocks");
 const yfm = (0, bem_cn_lite_1.default)('yfm');
-const YFMWrapper = ({ content, modifiers, className, itemProp, }) => (react_1.default.createElement(components_1.HTML, { className: yfm(modifiers ? (0, snakecase_keys_1.default)(modifiers) : {}, className), itemProp: itemProp }, content));
+const YFMWrapper = ({ content, modifiers, className, itemProp, }) => (react_1.default.createElement(components_1.HTML, { className: yfm(modifiers ? (0, snakecase_keys_1.default)(modifiers) : {}, className), itemProp: itemProp, block: (0, blocks_1.hasBlockTag)(content) }, content));
 exports.default = YFMWrapper;

package/build/cjs/editor/containers/Form/Form.js

@@ -30,13 +30,13 @@ exports.Form = (0, react_1.memo)(({ content, onChange, activeBlockIndex, onSelec
             break;
         }
         case FormTab.Blocks: {
-            form = (react_1.default.createElement(react_1.Fragment, null, blocks.map((blockData, index) => (react_1.default.createElement(BlockForm_1.BlockForm, { spec: blocksSpec[blockData.type], key: (0, utils_1.getBlockKey)(blockData, index), data: blockData, active: activeBlockIndex === index, onChange: (data) => {
+            form = (react_1.default.createElement(react_1.Fragment, null, blocks.map((blockData, index) => blocksSpec[blockData.type] ? (react_1.default.createElement(BlockForm_1.BlockForm, { spec: blocksSpec[blockData.type], key: (0, utils_1.getBlockKey)(blockData, index), data: blockData, active: activeBlockIndex === index, onChange: (data) => {
                     onChange(Object.assign(Object.assign({}, content), { blocks: [
                             ...blocks.slice(0, index),
                             data,
                             ...blocks.slice(index + 1),
                         ] }));
-                }, onSelect: () => onSelect(index) })))));
+                }, onSelect: () => onSelect(index) })) : null)));
             break;
         }
     }

package/build/cjs/editor/dynamic-forms-custom/parser/index.js

@@ -4,7 +4,6 @@ const tslib_1 = require("tslib");
 /* eslint-disable no-param-reassign */
 /* eslint-disable no-not-accumulator-reassign/no-not-accumulator-reassign */
 const dynamic_forms_1 = require("@gravity-ui/dynamic-forms");
-const models_1 = require("../../../models");
 const detect_1 = require("./detect");
 const views_1 = require("./views");
 class FormSpecParser {
@@ -140,10 +139,10 @@ class FormSpecParser {
     }
     getBlocksSpec() {
         const blocks = this.definitions.children;
-        return Object.values(models_1.BlockType).reduce((result, blockName) => {
+        return Object.entries(blocks).reduce((result, [blockName, blockData]) => {
             result[blockName] = this.parseSchemaProperty({
                 name: blockName,
-                data: Object.assign({}, blocks[blockName]),
+                data: Object.assign({}, blockData),
                 required: true,
             });
             return result;

package/build/cjs/editor/dynamic-forms-custom/parser/types.d.ts

@@ -1,5 +1,4 @@
 import { Spec as DynamicFormSpec, ObjectSpec } from '@gravity-ui/dynamic-forms';
-import { BlockType } from '../../../models';
 import { Schema } from '../../../schema';
 export type OneOfSpec = {
     oneOf: DynamicFormSpec[];
@@ -15,7 +14,7 @@ export interface SpecCustomProps {
 }
 export type Spec = Exclude<DynamicFormSpec, 'ObjectSpec'> | CustomObjectSpec | OneOfSpec;
 export type CustomSpec = Spec & SpecCustomProps;
-export type BlocksSpec = Record<BlockType, CustomSpec>;
+export type BlocksSpec = Record<string, CustomSpec>;
 export type PageSpec = CustomSpec;
 export interface FormSpecs {
     blocks: BlocksSpec;

package/build/cjs/editor/store/utils.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getErrorBoundaryState = exports.addEditorProps = exports.addBlock = exports.getNewBlockIndex = exports.duplicateBlock = exports.changeBlocksOrder = void 0;
+const tslib_1 = require("tslib");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const changeBlocksOrder = (array, oldIndex, newIndex) => {
     const result = [...array];
     const element = result.splice(oldIndex, 1)[0];
@@ -10,7 +12,7 @@ const changeBlocksOrder = (array, oldIndex, newIndex) => {
 exports.changeBlocksOrder = changeBlocksOrder;
 const duplicateBlock = (array, index) => {
     const result = [...array];
-    result.splice(index + 1, 0, result[index]);
+    result.splice(index + 1, 0, lodash_1.default.cloneDeep(result[index]));
     return result;
 };
 exports.duplicateBlock = duplicateBlock;

package/build/cjs/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.js

@@ -9,10 +9,9 @@ const utils_2 = require("../../../../../utils");
 const ContentWrapper_1 = require("../ContentWrapper/ContentWrapper");
 const b = (0, utils_2.block)('navigation-dropdown');
 const TOGGLE_ARROW_SIZE = 12;
-exports.NavigationDropdown = react_1.default.forwardRef((_a, ref) => {
-    var { text, icon, isOpened, className, iconSize } = _a, props = tslib_1.__rest(_a, ["text", "icon", "isOpened", "className", "iconSize"]);
+exports.NavigationDropdown = react_1.default.forwardRef(({ text, icon, isOpened, className, iconSize, onClick }, ref) => {
     const iconData = icon && (0, utils_1.getMediaImage)(icon);
-    return (react_1.default.createElement("span", Object.assign({ ref: ref }, props, { className: b(null, className) }),
+    return (react_1.default.createElement("span", { ref: ref, onClick: onClick, className: b(null, className) },
         react_1.default.createElement(ContentWrapper_1.ContentWrapper, { text: text, icon: iconData, iconSize: iconSize }),
         react_1.default.createElement(components_1.ToggleArrow, { className: b('arrow'), size: TOGGLE_ARROW_SIZE, type: 'vertical', iconType: "navigation", open: isOpened })));
 });

package/build/cjs/navigation/schema.js

@@ -34,7 +34,7 @@ const NavigationItemBaseProps = {
     },
     icon: {
         type: 'string',
-        pattern: schema_1.urlPattern,
+        pattern: schema_1.imageUrlPattern,
     },
     iconSize: {
         type: 'number',

package/build/cjs/schema/constants.d.ts

@@ -135,7 +135,6 @@ export declare const cardSchemas: {
             };
             url: {
                 type: string;
-                pattern: string;
             };
             buttonText: {
                 type: string;

package/build/cjs/schema/validators/common.js

@@ -240,7 +240,7 @@ exports.authorItem = {
         },
         avatar: {
             type: 'string',
-            pattern: schema_1.urlPattern,
+            pattern: schema_1.imageUrlPattern,
         },
         description: {
             type: 'string',

package/build/cjs/sub-blocks/Quote/schema.d.ts

@@ -40,7 +40,6 @@ export declare const Quote: {
             };
             url: {
                 type: string;
-                pattern: string;
             };
             buttonText: {
                 type: string;

package/build/cjs/sub-blocks/Quote/schema.js

@@ -12,12 +12,11 @@ exports.Quote = {
                 contentType: 'text',
             }, image: (0, common_1.withTheme)(schema_1.ImageProps), logo: {
                 type: 'string',
-                pattern: schema_1.urlPattern,
+                pattern: schema_1.imageUrlPattern,
             }, color: {
                 type: 'string',
             }, url: {
                 type: 'string',
-                pattern: schema_1.urlPattern,
             }, buttonText: {
                 type: 'string',
             }, theme: common_1.ThemeProps, author: common_1.authorItem }),

package/build/cjs/utils/blocks.d.ts

@@ -1,6 +1,7 @@
 import { Block, CustomConfig, PCShareSocialNetwork, TextSize } from '../models';
 import { ConstructorBlock } from '../models/constructor';
 export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4" | "h5";
+export declare function hasBlockTag(content: string): boolean;
 export declare function getBlockKey(block: ConstructorBlock, index: number): string;
 export declare const getCustomBlockTypes: ({ blocks, headers }?: CustomConfig) => string[];
 export declare const getCustomItems: ({ blocks, headers, subBlocks }?: CustomConfig) => {

package/build/cjs/utils/blocks.js

@@ -1,7 +1,43 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.getHeaderTag = void 0;
+exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.hasBlockTag = exports.getHeaderTag = void 0;
 const models_1 = require("../models");
+const BLOCK_ELEMENTS = [
+    'div',
+    'p',
+    'h[1-6]',
+    'address',
+    'article',
+    'aside',
+    'blockquote',
+    'canvas',
+    'dd',
+    'dl',
+    'dt',
+    'fieldset',
+    'figcaption',
+    'footer',
+    'header',
+    'hr',
+    'main',
+    'nav',
+    'section',
+    'video',
+    'pre',
+    'figure',
+    'form',
+    'pre',
+    'ol',
+    'ul',
+    'li',
+    'table',
+    'thead',
+    'tbody',
+    'tfoot',
+    'tr',
+    'th',
+    'td',
+];
 function getHeaderTag(size) {
     switch (size) {
         case 'l':
@@ -16,6 +52,12 @@ function getHeaderTag(size) {
     }
 }
 exports.getHeaderTag = getHeaderTag;
+function hasBlockTag(content) {
+    const blockElementRegex = `/<(${BLOCK_ELEMENTS.join('|')})\b[^>]*>/gi`;
+    const blockTags = content.match(blockElementRegex);
+    return Boolean(blockTags);
+}
+exports.hasBlockTag = hasBlockTag;
 function getBlockKey(block, index) {
     return `${block.type}-${index}`;
 }

package/build/esm/blocks/ContentLayout/schema.d.ts

@@ -12,9 +12,7 @@ export declare const ContentLayoutBlock: {
                 required: string[];
                 properties: {
                     src: {
-                        type: string; /**
-                         * @deprecated Use params on top level instead
-                         */
+                        type: string;
                         pattern: string;
                     };
                     alt: {
@@ -143,9 +141,7 @@ export declare const ContentLayoutBlock: {
                     required: string[];
                     properties: {
                         src: {
-                            type: string; /**
-                             * @deprecated Use params on top level instead
-                             */
+                            type: string;
                             pattern: string;
                         };
                         alt: {

package/build/esm/blocks/Header/Header.css

@@ -76,6 +76,9 @@ unpredictable css rules order in build */
 .pc-header-block__description {
   margin-top: 16px;
   font-weight: normal;
+  font-size: var(--yc-text-caption-2-font-size);
+  line-height: var(--yc-text-caption-2-line-height);
+  margin-block-end: var(--yc-text-body-1-line-height);
 }
 .pc-header-block__description .yfm,
 .pc-header-block__description .yfm * {
@@ -167,6 +170,7 @@ unpredictable css rules order in build */
 .pc-header-block__overtitle {
   font-size: var(--yc-text-body-3-font-size);
   line-height: var(--yc-text-body-3-line-height);
+  margin-block-start: var(--yc-text-body-3-line-height);
   margin-bottom: 8px;
   font-weight: 400;
 }

package/build/esm/blocks/Header/Header.js

@@ -48,12 +48,12 @@ export const HeaderBlock = (props) => {
                                 'vertical-offset': curVerticalOffset,
                             }) },
                             React.createElement(Col, { sizes: titleSizes, className: b('content-inner') },
-                                overtitle && (React.createElement("h4", { className: b('overtitle') },
+                                overtitle && (React.createElement("p", { className: b('overtitle') },
                                     React.createElement(HTML, null, overtitle))),
                                 React.createElement("h1", { className: b('title') },
                                     status,
                                     React.createElement(HTML, null, title)),
-                                description && (React.createElement("h5", { className: b('description') },
+                                description && (React.createElement("p", { className: b('description') },
                                     React.createElement(YFMWrapper, { content: description, modifiers: { constructor: true } }))),
                                 buttons && (React.createElement("div", { className: b('buttons'), "data-qa": "header-buttons" }, buttons &&
                                     buttons.map((button, index) => (React.createElement(RouterLink, { href: button.url, key: index },

package/build/esm/blocks/Slider/Arrow/Arrow.js

@@ -5,6 +5,6 @@ import './Arrow.css';
 const b = block('slider-block-arrow');
 const Arrow = ({ type, handleClick, className, size = 16 }) => (React.createElement("div", { className: b({ type }, className) },
     React.createElement("button", { className: b('button'), onClick: () => handleClick && handleClick(type) },
-        React.createElement("div", { className: b('icon-wrapper') },
+        React.createElement("span", { className: b('icon-wrapper') },
             React.createElement(ToggleArrow, { size: size, type: 'horizontal', iconType: "navigation", className: b('icon') })))));
 export default Arrow;

package/build/esm/blocks/Slider/Slider.css

@@ -133,8 +133,8 @@ unpredictable css rules order in build */
   display: inline-flex;
   justify-content: center;
 }
-.pc-SliderBlock__dots-list div.pc-SliderBlock__bar,
-.pc-SliderBlock__dots-list div.pc-SliderBlock__dot {
+.pc-SliderBlock__dots-list li.pc-SliderBlock__bar,
+.pc-SliderBlock__dots-list li.pc-SliderBlock__dot {
   margin: calc(12px / 2) 8px;
   top: 0;
 }

package/build/esm/blocks/Slider/Slider.js

@@ -121,13 +121,13 @@ export const SliderBlock = (props) => {
     const renderBar = () => {
         const barPosition = (DOT_GAP + DOT_WIDTH) * currentIndex;
         const barWidth = DOT_WIDTH + (DOT_GAP + DOT_WIDTH) * (slidesCountByBreakpoint - 1);
-        return (slidesCountByBreakpoint > 1 && (React.createElement("div", { className: b('bar'), style: {
+        return (slidesCountByBreakpoint > 1 && (React.createElement("li", { className: b('bar'), style: {
                 left: barPosition,
                 width: barWidth,
             } })));
     };
     const renderDot = (index) => {
-        return (React.createElement("div", { key: index, className: b('dot', { active: index === currentIndex }), onClick: () => handleDotClick(index) }));
+        return (React.createElement("li", { key: index, className: b('dot', { active: index === currentIndex }), onClick: () => handleDotClick(index) }));
     };
     const renderNavigation = () => {
         if (childrenCount <= slidesCountByBreakpoint || !dots || childrenCount === 1) {

package/build/esm/blocks/Slider/utils.d.ts

@@ -12,9 +12,9 @@ export interface GetSlidesToShowParams {
 }
 export declare function getSlidesToShowWithDefaults({ contentLength, breakpoints, mobileFullscreen, }: GetSlidesToShowParams): {
     sm: number;
-    md: number;
-    lg: number;
     xl: number;
+    lg: number;
+    md: number;
 };
 export declare function getSliderResponsiveParams(breakpoints: SliderBreakpointParams): {
     breakpoint: number;

package/build/esm/blocks/Slider/utils.js

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import { BREAKPOINTS } from '../../constants';
 import { SliderBreakpointNames } from './models';
 export const DEFAULT_SLIDE_BREAKPOINTS = {
@@ -15,7 +16,7 @@ export function getSlidesToShowWithDefaults({ contentLength, breakpoints, mobile
     else {
         result = breakpoints || DEFAULT_SLIDE_BREAKPOINTS;
     }
-    return Object.assign(Object.assign(Object.assign({}, DEFAULT_SLIDE_BREAKPOINTS), result), { sm: !mobileFullscreen && contentLength > 1 ? DEFAULT_SLIDE_BREAKPOINTS.sm : 1 });
+    return Object.assign(Object.assign(Object.assign({}, DEFAULT_SLIDE_BREAKPOINTS), _.pickBy(result, (value) => !isNaN(value))), { sm: !mobileFullscreen && contentLength > 1 ? DEFAULT_SLIDE_BREAKPOINTS.sm : 1 });
 }
 export function getSliderResponsiveParams(breakpoints) {
     return Object.entries(breakpoints).map(([breakpointName, slidesToShow]) => ({

package/build/esm/components/Image/schema.d.ts

@@ -1,4 +1,4 @@
-export declare const urlPattern = "^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$";
+export declare const imageUrlPattern = "^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$";
 export declare const ImageDeviceProps: {
     type: string;
     additionalProperties: boolean;

package/build/esm/components/Image/schema.js

@@ -1,5 +1,5 @@
 import { filteredItem } from '../../schema/validators/utils';
-export const urlPattern = '^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$';
+export const imageUrlPattern = '^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$';
 const ImageBase = {
     alt: {
         type: 'string',
@@ -13,12 +13,12 @@ export const ImageDeviceProps = {
     type: 'object',
     additionalProperties: false,
     required: ['desktop', 'mobile'],
-    properties: Object.assign(Object.assign({}, ImageBase), { desktop: { type: 'string', pattern: urlPattern }, tablet: {
+    properties: Object.assign(Object.assign({}, ImageBase), { desktop: { type: 'string', pattern: imageUrlPattern }, tablet: {
             type: 'string',
-            pattern: urlPattern,
+            pattern: imageUrlPattern,
         }, mobile: {
             type: 'string',
-            pattern: urlPattern,
+            pattern: imageUrlPattern,
         } }),
 };
 export const ImageObjectProps = {
@@ -27,14 +27,14 @@ export const ImageObjectProps = {
     required: ['src'],
     properties: Object.assign(Object.assign({}, ImageBase), { src: {
             type: 'string',
-            pattern: urlPattern,
+            pattern: imageUrlPattern,
         } }),
 };
 export const ImageProps = {
     oneOf: [
         {
             type: 'string',
-            pattern: urlPattern,
+            pattern: imageUrlPattern,
             optionName: 'url',
         },
         filteredItem(Object.assign(Object.assign({}, ImageObjectProps), { optionName: 'options' })),

package/build/esm/components/Media/Image/Image.js

@@ -38,7 +38,7 @@ const Image = (props) => {
     };
     const imageBackground = (oneImage) => {
         const imageData = getMediaImage(oneImage);
-        return (React.createElement(animated.div, { style: { transform: parallaxInterpolate } },
+        return (React.createElement(animated.div, { style: { transform: parallaxInterpolate || 'none' } },
             React.createElement(BackgroundImage, Object.assign({}, imageData, { className: imageClass, style: { height } }))));
     };
     const imageOnly = (oneImage) => {

package/build/esm/components/MetaInfo/MetaInfo.js

@@ -2,5 +2,5 @@ import React from 'react';
 import { block } from '../../utils';
 import './MetaInfo.css';
 const b = block('meta-info');
-const MetaInfo = ({ items, className }) => (React.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (React.createElement("div", { key: metaInfoItem, className: b('item') }, metaInfoItem)))));
+const MetaInfo = ({ items, className }) => (React.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (React.createElement("span", { key: metaInfoItem, className: b('item') }, metaInfoItem)))));
 export default MetaInfo;

package/build/esm/components/YFMWrapper/YFMWrapper.js

@@ -4,6 +4,7 @@ import React from 'react';
 import block from 'bem-cn-lite';
 import toSnakeCase from 'snakecase-keys';
 import { HTML } from '../../components';
+import { hasBlockTag } from '../../utils/blocks';
 const yfm = block('yfm');
-const YFMWrapper = ({ content, modifiers, className, itemProp, }) => (React.createElement(HTML, { className: yfm(modifiers ? toSnakeCase(modifiers) : {}, className), itemProp: itemProp }, content));
+const YFMWrapper = ({ content, modifiers, className, itemProp, }) => (React.createElement(HTML, { className: yfm(modifiers ? toSnakeCase(modifiers) : {}, className), itemProp: itemProp, block: hasBlockTag(content) }, content));
 export default YFMWrapper;

package/build/esm/editor/containers/Form/Form.js

@@ -28,13 +28,13 @@ export const Form = memo(({ content, onChange, activeBlockIndex, onSelect, spec
             break;
         }
         case FormTab.Blocks: {
-            form = (React.createElement(Fragment, null, blocks.map((blockData, index) => (React.createElement(BlockForm, { spec: blocksSpec[blockData.type], key: getBlockKey(blockData, index), data: blockData, active: activeBlockIndex === index, onChange: (data) => {
+            form = (React.createElement(Fragment, null, blocks.map((blockData, index) => blocksSpec[blockData.type] ? (React.createElement(BlockForm, { spec: blocksSpec[blockData.type], key: getBlockKey(blockData, index), data: blockData, active: activeBlockIndex === index, onChange: (data) => {
                     onChange(Object.assign(Object.assign({}, content), { blocks: [
                             ...blocks.slice(0, index),
                             data,
                             ...blocks.slice(index + 1),
                         ] }));
-                }, onSelect: () => onSelect(index) })))));
+                }, onSelect: () => onSelect(index) })) : null)));
             break;
         }
     }

package/build/esm/editor/dynamic-forms-custom/parser/index.js

@@ -2,7 +2,6 @@ import { __rest } from "tslib";
 /* eslint-disable no-param-reassign */
 /* eslint-disable no-not-accumulator-reassign/no-not-accumulator-reassign */
 import { SpecTypes } from '@gravity-ui/dynamic-forms';
-import { BlockType } from '../../../models';
 import { ParserType, detectParserType } from './detect';
 import { getArrayViewSpec, getObjectViewSpec, getOneOfViewSpec, getPrimitiveViewSpec } from './views';
 class FormSpecParser {
@@ -138,10 +137,10 @@ class FormSpecParser {
     }
     getBlocksSpec() {
         const blocks = this.definitions.children;
-        return Object.values(BlockType).reduce((result, blockName) => {
+        return Object.entries(blocks).reduce((result, [blockName, blockData]) => {
             result[blockName] = this.parseSchemaProperty({
                 name: blockName,
-                data: Object.assign({}, blocks[blockName]),
+                data: Object.assign({}, blockData),
                 required: true,
             });
             return result;

package/build/esm/editor/dynamic-forms-custom/parser/types.d.ts

@@ -1,5 +1,4 @@
 import { Spec as DynamicFormSpec, ObjectSpec } from '@gravity-ui/dynamic-forms';
-import { BlockType } from '../../../models';
 import { Schema } from '../../../schema';
 export type OneOfSpec = {
     oneOf: DynamicFormSpec[];
@@ -15,7 +14,7 @@ export interface SpecCustomProps {
 }
 export type Spec = Exclude<DynamicFormSpec, 'ObjectSpec'> | CustomObjectSpec | OneOfSpec;
 export type CustomSpec = Spec & SpecCustomProps;
-export type BlocksSpec = Record<BlockType, CustomSpec>;
+export type BlocksSpec = Record<string, CustomSpec>;
 export type PageSpec = CustomSpec;
 export interface FormSpecs {
     blocks: BlocksSpec;

package/build/esm/editor/store/utils.js

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 export const changeBlocksOrder = (array, oldIndex, newIndex) => {
     const result = [...array];
     const element = result.splice(oldIndex, 1)[0];
@@ -6,7 +7,7 @@ export const changeBlocksOrder = (array, oldIndex, newIndex) => {
 };
 export const duplicateBlock = (array, index) => {
     const result = [...array];
-    result.splice(index + 1, 0, result[index]);
+    result.splice(index + 1, 0, _.cloneDeep(result[index]));
     return result;
 };
 export const getNewBlockIndex = (id, orderedBlocksCount) => {

package/build/esm/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import React from 'react';
 import { ToggleArrow } from '../../../../../components';
 import { getMediaImage } from '../../../../../components/Media/Image/utils';
@@ -7,10 +6,9 @@ import { ContentWrapper } from '../ContentWrapper/ContentWrapper';
 import './NavigationDropdown.css';
 const b = block('navigation-dropdown');
 const TOGGLE_ARROW_SIZE = 12;
-export const NavigationDropdown = React.forwardRef((_a, ref) => {
-    var { text, icon, isOpened, className, iconSize } = _a, props = __rest(_a, ["text", "icon", "isOpened", "className", "iconSize"]);
+export const NavigationDropdown = React.forwardRef(({ text, icon, isOpened, className, iconSize, onClick }, ref) => {
     const iconData = icon && getMediaImage(icon);
-    return (React.createElement("span", Object.assign({ ref: ref }, props, { className: b(null, className) }),
+    return (React.createElement("span", { ref: ref, onClick: onClick, className: b(null, className) },
         React.createElement(ContentWrapper, { text: text, icon: iconData, iconSize: iconSize }),
         React.createElement(ToggleArrow, { className: b('arrow'), size: TOGGLE_ARROW_SIZE, type: 'vertical', iconType: "navigation", open: isOpened })));
 });

package/build/esm/navigation/schema.js

@@ -1,5 +1,5 @@
 import { omit } from 'lodash';
-import { ImageProps, urlPattern } from '../components/Image/schema';
+import { ImageProps, imageUrlPattern } from '../components/Image/schema';
 import { ButtonProps } from '../schema/validators/common';
 import { filteredArray } from '../schema/validators/utils';
 const NavigationItemType = {
@@ -31,7 +31,7 @@ const NavigationItemBaseProps = {
     },
     icon: {
         type: 'string',
-        pattern: urlPattern,
+        pattern: imageUrlPattern,
     },
     iconSize: {
         type: 'number',

package/build/esm/schema/constants.d.ts

@@ -135,7 +135,6 @@ export declare const cardSchemas: {
             };
             url: {
                 type: string;
-                pattern: string;
             };
             buttonText: {
                 type: string;

package/build/esm/schema/validators/common.js

@@ -1,4 +1,4 @@
-import { ImageProps, urlPattern } from '../../components/Image/schema';
+import { ImageProps, imageUrlPattern } from '../../components/Image/schema';
 import { Theme } from '../../models';
 import { AnalyticsEventSchema } from './event';
 import { pixelEvents } from './pixel';
@@ -237,7 +237,7 @@ export const authorItem = {
         },
         avatar: {
             type: 'string',
-            pattern: urlPattern,
+            pattern: imageUrlPattern,
         },
         description: {
             type: 'string',

package/build/esm/sub-blocks/Quote/schema.d.ts

@@ -40,7 +40,6 @@ export declare const Quote: {
             };
             url: {
                 type: string;
-                pattern: string;
             };
             buttonText: {
                 type: string;

package/build/esm/sub-blocks/Quote/schema.js

@@ -1,4 +1,4 @@
-import { ImageProps, urlPattern } from '../../components/Image/schema';
+import { ImageProps, imageUrlPattern } from '../../components/Image/schema';
 import { BaseProps, ThemeProps, authorItem, withTheme } from '../../schema/validators/common';
 export const Quote = {
     quote: {
@@ -9,12 +9,11 @@ export const Quote = {
                 contentType: 'text',
             }, image: withTheme(ImageProps), logo: {
                 type: 'string',
-                pattern: urlPattern,
+                pattern: imageUrlPattern,
             }, color: {
                 type: 'string',
             }, url: {
                 type: 'string',
-                pattern: urlPattern,
             }, buttonText: {
                 type: 'string',
             }, theme: ThemeProps, author: authorItem }),

package/build/esm/utils/blocks.d.ts

@@ -1,6 +1,7 @@
 import { Block, CustomConfig, PCShareSocialNetwork, TextSize } from '../models';
 import { ConstructorBlock } from '../models/constructor';
 export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4" | "h5";
+export declare function hasBlockTag(content: string): boolean;
 export declare function getBlockKey(block: ConstructorBlock, index: number): string;
 export declare const getCustomBlockTypes: ({ blocks, headers }?: CustomConfig) => string[];
 export declare const getCustomItems: ({ blocks, headers, subBlocks }?: CustomConfig) => {

package/build/esm/utils/blocks.js

@@ -1,4 +1,40 @@
 import { PCShareSocialNetwork } from '../models';
+const BLOCK_ELEMENTS = [
+    'div',
+    'p',
+    'h[1-6]',
+    'address',
+    'article',
+    'aside',
+    'blockquote',
+    'canvas',
+    'dd',
+    'dl',
+    'dt',
+    'fieldset',
+    'figcaption',
+    'footer',
+    'header',
+    'hr',
+    'main',
+    'nav',
+    'section',
+    'video',
+    'pre',
+    'figure',
+    'form',
+    'pre',
+    'ol',
+    'ul',
+    'li',
+    'table',
+    'thead',
+    'tbody',
+    'tfoot',
+    'tr',
+    'th',
+    'td',
+];
 export function getHeaderTag(size) {
     switch (size) {
         case 'l':
@@ -12,6 +48,11 @@ export function getHeaderTag(size) {
             return 'h2';
     }
 }
+export function hasBlockTag(content) {
+    const blockElementRegex = `/<(${BLOCK_ELEMENTS.join('|')})\b[^>]*>/gi`;
+    const blockTags = content.match(blockElementRegex);
+    return Boolean(blockTags);
+}
 export function getBlockKey(block, index) {
     return `${block.type}-${index}`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "3.8.0",
+  "version": "3.8.2",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/utils/blocks.d.ts

@@ -1,6 +1,7 @@
 import { Block, CustomConfig, PCShareSocialNetwork, TextSize } from '../models';
 import { ConstructorBlock } from '../models/constructor';
 export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4" | "h5";
+export declare function hasBlockTag(content: string): boolean;
 export declare function getBlockKey(block: ConstructorBlock, index: number): string;
 export declare const getCustomBlockTypes: ({ blocks, headers }?: CustomConfig) => string[];
 export declare const getCustomItems: ({ blocks, headers, subBlocks }?: CustomConfig) => {

package/server/utils/blocks.js

@@ -1,7 +1,43 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.getHeaderTag = void 0;
+exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.hasBlockTag = exports.getHeaderTag = void 0;
 const models_1 = require("../models");
+const BLOCK_ELEMENTS = [
+    'div',
+    'p',
+    'h[1-6]',
+    'address',
+    'article',
+    'aside',
+    'blockquote',
+    'canvas',
+    'dd',
+    'dl',
+    'dt',
+    'fieldset',
+    'figcaption',
+    'footer',
+    'header',
+    'hr',
+    'main',
+    'nav',
+    'section',
+    'video',
+    'pre',
+    'figure',
+    'form',
+    'pre',
+    'ol',
+    'ul',
+    'li',
+    'table',
+    'thead',
+    'tbody',
+    'tfoot',
+    'tr',
+    'th',
+    'td',
+];
 function getHeaderTag(size) {
     switch (size) {
         case 'l':
@@ -16,6 +52,12 @@ function getHeaderTag(size) {
     }
 }
 exports.getHeaderTag = getHeaderTag;
+function hasBlockTag(content) {
+    const blockElementRegex = `/<(${BLOCK_ELEMENTS.join('|')})\b[^>]*>/gi`;
+    const blockTags = content.match(blockElementRegex);
+    return Boolean(blockTags);
+}
+exports.hasBlockTag = hasBlockTag;
 function getBlockKey(block, index) {
     return `${block.type}-${index}`;
 }