@gravity-ui/page-constructor 3.7.0 → 3.8.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [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)
+
+
+### Features
+
+* add yfm transoform for editor demo ([#420](https://github.com/gravity-ui/page-constructor/issues/420)) ([1c1a2aa](https://github.com/gravity-ui/page-constructor/commit/1c1a2aa134a3c4d18e01537c1ca874720f23649d))
+* update dynamic forms and fix form render performance ([#418](https://github.com/gravity-ui/page-constructor/issues/418)) ([eb9437d](https://github.com/gravity-ui/page-constructor/commit/eb9437df0d38a9a3433e85d111c45b3a49dbd9aa))
+
 ## [3.7.0](https://github.com/gravity-ui/page-constructor/compare/v3.6.2...v3.7.0) (2023-06-21)
 
 

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/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/components/BlockForm/BlockForm.js

@@ -10,24 +10,19 @@ const config_1 = require("../../dynamic-forms-custom/config");
 const usePreviousValue_1 = tslib_1.__importDefault(require("../../hooks/usePreviousValue"));
 exports.BlockForm = (0, react_1.memo)((_a) => {
     var _b = _a.data, { type } = _b, content = tslib_1.__rest(_b, ["type"]), { onChange, onSelect, active, spec: specRaw } = _a;
-    // get initial values only at first render, then the form manages data
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const initialValues = (0, react_1.useMemo)(() => ({ content }), []);
+    const initialValues = (0, react_1.useMemo)(() => ({ content }), [content]);
     const prevContent = (0, usePreviousValue_1.default)(content);
     const spec = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, specRaw), { viewSpec: Object.assign(Object.assign({}, specRaw.viewSpec), { layoutOpen: active }) })), [specRaw, active]);
-    return (react_1.default.createElement(react_final_form_1.Form, { initialValues: initialValues, onSubmit: lodash_1.default.noop }, () => (react_1.default.createElement("div", { onClick: () => {
-            if (!active) {
-                onSelect();
-            }
-        } },
+    if (!active) {
+        return (react_1.default.createElement(dynamic_forms_1.SimpleVerticalAccordeon, { open: false, name: type, title: spec.viewSpec.layoutTitle || type, onOpenChange: onSelect }, 1));
+    }
+    return (react_1.default.createElement(react_final_form_1.Form, { initialValues: initialValues, onSubmit: lodash_1.default.noop }, () => (react_1.default.createElement("div", null,
         react_1.default.createElement(react_final_form_1.FormSpy, { onChange: ({ values }) => {
                 // fix for FormSpy onChange called twice without content changes
                 if (!lodash_1.default.isEqual(values.content, prevContent)) {
                     onChange(Object.assign({ type }, values.content));
                 }
             }, subscription: { values: true } }),
-        react_1.default.createElement(dynamic_forms_1.DynamicField, { name: "content", 
-            // there is no way other way to manage with form open/close state now
-            key: String(active), spec: spec, config: config_1.dynamicConfig })))));
+        react_1.default.createElement(dynamic_forms_1.DynamicField, { name: "content", spec: spec, config: config_1.dynamicConfig, withoutInsertFFDebounce: true })))));
 });
 exports.BlockForm.displayName = 'BlockForm';

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

@@ -10,7 +10,7 @@ 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"]);
+    var { text, icon, isOpened, className, iconSize, type: _ } = _a, props = tslib_1.__rest(_a, ["text", "icon", "isOpened", "className", "iconSize", "type"]);
     const iconData = icon && (0, utils_1.getMediaImage)(icon);
     return (react_1.default.createElement("span", Object.assign({ ref: ref }, props, { className: b(null, className) }),
         react_1.default.createElement(ContentWrapper_1.ContentWrapper, { text: text, icon: iconData, iconSize: iconSize }),

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/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/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/components/BlockForm/BlockForm.js

@@ -1,30 +1,25 @@
 import { __rest } from "tslib";
 import React, { memo, useMemo } from 'react';
-import { DynamicField } from '@gravity-ui/dynamic-forms';
+import { DynamicField, SimpleVerticalAccordeon } from '@gravity-ui/dynamic-forms';
 import _ from 'lodash';
 import { Form as FinalForm, FormSpy } from 'react-final-form';
 import { dynamicConfig } from '../../dynamic-forms-custom/config';
 import usePreviousValue from '../../hooks/usePreviousValue';
 export const BlockForm = memo((_a) => {
     var _b = _a.data, { type } = _b, content = __rest(_b, ["type"]), { onChange, onSelect, active, spec: specRaw } = _a;
-    // get initial values only at first render, then the form manages data
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const initialValues = useMemo(() => ({ content }), []);
+    const initialValues = useMemo(() => ({ content }), [content]);
     const prevContent = usePreviousValue(content);
     const spec = useMemo(() => (Object.assign(Object.assign({}, specRaw), { viewSpec: Object.assign(Object.assign({}, specRaw.viewSpec), { layoutOpen: active }) })), [specRaw, active]);
-    return (React.createElement(FinalForm, { initialValues: initialValues, onSubmit: _.noop }, () => (React.createElement("div", { onClick: () => {
-            if (!active) {
-                onSelect();
-            }
-        } },
+    if (!active) {
+        return (React.createElement(SimpleVerticalAccordeon, { open: false, name: type, title: spec.viewSpec.layoutTitle || type, onOpenChange: onSelect }, 1));
+    }
+    return (React.createElement(FinalForm, { initialValues: initialValues, onSubmit: _.noop }, () => (React.createElement("div", null,
         React.createElement(FormSpy, { onChange: ({ values }) => {
                 // fix for FormSpy onChange called twice without content changes
                 if (!_.isEqual(values.content, prevContent)) {
                     onChange(Object.assign({ type }, values.content));
                 }
             }, subscription: { values: true } }),
-        React.createElement(DynamicField, { name: "content", 
-            // there is no way other way to manage with form open/close state now
-            key: String(active), spec: spec, config: dynamicConfig })))));
+        React.createElement(DynamicField, { name: "content", spec: spec, config: dynamicConfig, withoutInsertFFDebounce: true })))));
 });
 BlockForm.displayName = 'BlockForm';

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

@@ -8,7 +8,7 @@ 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"]);
+    var { text, icon, isOpened, className, iconSize, type: _ } = _a, props = __rest(_a, ["text", "icon", "isOpened", "className", "iconSize", "type"]);
     const iconData = icon && getMediaImage(icon);
     return (React.createElement("span", Object.assign({ ref: ref }, props, { className: b(null, className) }),
         React.createElement(ContentWrapper, { text: text, icon: iconData, iconSize: iconSize }),

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.7.0",
+  "version": "3.8.1",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -77,7 +77,7 @@
     "test:watch": "jest --watchAll"
   },
   "dependencies": {
-    "@gravity-ui/dynamic-forms": "1.7.1",
+    "@gravity-ui/dynamic-forms": "^1.9.2",
     "@gravity-ui/i18n": "^1.0.0",
     "bem-cn-lite": "^4.0.0",
     "final-form": "^4.20.9",
@@ -89,7 +89,7 @@
     "react-spring": "^9.3.0",
     "react-transition-group": "^4.4.2",
     "react-waypoint": "^10.1.0",
-    "sanitize-html": "^2.6.1",
+    "sanitize-html": "2.6.1",
     "snakecase-keys": "^5.1.0",
     "typograf": "^6.14.0",
     "uuid": "^9.0.0"
@@ -125,7 +125,7 @@
     "@types/react-dom": "^18.0.10",
     "@types/react-slick": "^0.23.7",
     "@types/react-transition-group": "^4.4.4",
-    "@types/sanitize-html": "^2.6.0",
+    "@types/sanitize-html": "2.6.1",
     "@types/uuid": "^9.0.0",
     "es5-ext": "0.10.53",
     "eslint": "^8.34.0",
@@ -137,6 +137,7 @@
     "gulp-replace": "^1.1.3",
     "gulp-typescript": "^6.0.0-alpha.1",
     "html-loader": "^1.3.2",
+    "htmlparser2": "^6.1.0",
     "husky": "^7.0.4",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",

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}`;
 }