@gravity-ui/page-constructor 3.9.2 → 3.10.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [3.10.0](https://github.com/gravity-ui/page-constructor/compare/v3.9.2...v3.10.0) (2023-07-04)
+
+
+### Features
+
+* add not found block dummy and refactor ([#435](https://github.com/gravity-ui/page-constructor/issues/435)) ([610df6a](https://github.com/gravity-ui/page-constructor/commit/610df6a65a307d357a3e2f39d401972ed595974a))
+
+
+### Bug Fixes
+
+* fix extention extraction for image isCompressible util ([#401](https://github.com/gravity-ui/page-constructor/issues/401)) ([5eea616](https://github.com/gravity-ui/page-constructor/commit/5eea6162854f507e7402dd943ebb8b111dcac53d))
+
 ## [3.9.2](https://github.com/gravity-ui/page-constructor/compare/v3.9.1...v3.9.2) (2023-06-28)
 
 

package/build/cjs/components/BlockBase/BlockBase.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { BlockBaseProps, BlockDecorationProps, ClassNameProps } from '../../models';
-export type BlockBaseFullProps = BlockBaseProps & BlockDecorationProps & ClassNameProps & PropsWithChildren;
+import { BlockBaseProps, ClassNameProps } from '../../models';
+export type BlockBaseFullProps = BlockBaseProps & ClassNameProps & PropsWithChildren;
 declare const BlockBase: (props: BlockBaseFullProps) => JSX.Element;
 export default BlockBase;

package/build/cjs/components/BlockBase/BlockBase.js

@@ -2,16 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const BlockDecoration_1 = require("../../customization/BlockDecoration");
 const grid_1 = require("../../grid");
 const utils_1 = require("../../utils");
 const Anchor_1 = tslib_1.__importDefault(require("../Anchor/Anchor"));
 const b = (0, utils_1.block)('block-base');
 const BlockBase = (props) => {
-    const { anchor, visible, children, className, resetPaddings, qa, type, index } = props;
+    const { anchor, visible, children, className, resetPaddings, qa } = props;
     return (react_1.default.createElement(grid_1.Col, { className: b({ ['reset-paddings']: resetPaddings }, className), visible: visible, reset: true, dataQa: qa },
-        react_1.default.createElement(BlockDecoration_1.BlockDecoration, { type: type, index: index },
-            anchor && react_1.default.createElement(Anchor_1.default, { id: anchor.url, className: b('anchor') }),
-            children)));
+        anchor && react_1.default.createElement(Anchor_1.default, { id: anchor.url, className: b('anchor') }),
+        children));
 };
 exports.default = BlockBase;

package/build/cjs/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { BlockBaseFullProps } from '../../../../components/BlockBase/BlockBase';
-import { Block, WithChildren } from '../../../../models';
-interface ConstructorBlockProps extends Pick<BlockBaseFullProps, 'index'> {
+import { Block, BlockDecorationProps, WithChildren } from '../../../../models';
+interface ConstructorBlockProps extends Pick<BlockDecorationProps, 'index'> {
     data: Block;
 }
 export declare const ConstructorBlock: React.FC<WithChildren<ConstructorBlockProps>>;

package/build/cjs/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.js

@@ -2,12 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConstructorBlock = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const BlockBase_1 = tslib_1.__importDefault(require("../../../../components/BlockBase/BlockBase"));
+const BlockDecoration_1 = require("../../../../customization/BlockDecoration");
 const utils_1 = require("../../../../utils");
 const b = (0, utils_1.block)('constructor-block');
 const ConstructorBlock = ({ index = 0, data, children, }) => {
-    const { anchor, visible, type } = data;
-    return (react_1.default.createElement(BlockBase_1.default, { type: type, index: index, className: b({ type }), anchor: anchor, visible: visible, resetPaddings: data.resetPaddings }, children));
+    const { type } = data;
+    const blockBaseProps = (0, react_1.useMemo)(() => lodash_1.default.pick(data, ['anchor', 'visible', 'resetPaddings']), [data]);
+    return (react_1.default.createElement(BlockDecoration_1.BlockDecoration, Object.assign({ type: type, index: index }, blockBaseProps),
+        react_1.default.createElement(BlockBase_1.default, Object.assign({ className: b({ type }) }, blockBaseProps), children)));
 };
 exports.ConstructorBlock = ConstructorBlock;

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

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const innerContext_1 = require("../../../../context/innerContext");
+const BlockDecoration_1 = require("../../../../customization/BlockDecoration");
 const utils_1 = require("../../../../utils");
 const ConstructorBlock_1 = require("../ConstructorBlock/ConstructorBlock");
 const ConstructorItem_1 = require("../ConstructorItem");
@@ -13,7 +14,7 @@ const ConstructorBlocks = ({ items }) => {
     const { blockTypes, loadables, itemMap, shouldRenderBlock } = (0, react_1.useContext)(innerContext_1.InnerContext);
     const renderer = (parentId = '', item, index) => {
         if (!itemMap[item.type]) {
-            return null;
+            return parentId ? null : (react_1.default.createElement(BlockDecoration_1.BlockDecoration, { type: item.type, index: index }, null));
         }
         let itemElement;
         const key = (0, utils_1.getBlockKey)(item, index);

package/build/cjs/customization/BlockDecoration.js

@@ -7,11 +7,10 @@ const innerContext_1 = require("../context/innerContext");
 const BlockDecoration = (_a) => {
     var _b, _c;
     var { children: blockChildren } = _a, rest = tslib_1.__rest(_a, ["children"]);
-    const block = react_1.default.createElement(react_1.Fragment, null, blockChildren);
     const blockDecorators = (_c = (_b = (0, react_1.useContext)(innerContext_1.InnerContext).customization) === null || _b === void 0 ? void 0 : _b.decorators) === null || _c === void 0 ? void 0 : _c.block;
-    if (!blockDecorators) {
-        return block;
-    }
-    return blockDecorators.reduce((children, decorator) => react_1.default.createElement(react_1.Fragment, null, decorator(Object.assign({ children }, rest))), block);
+    const content = blockDecorators
+        ? blockDecorators.reduce((children, decorator) => decorator(Object.assign({ children }, rest)), blockChildren)
+        : blockChildren;
+    return react_1.default.createElement(react_1.Fragment, null, content);
 };
 exports.BlockDecoration = BlockDecoration;

package/build/cjs/editor/components/EditBlock/EditBlock.css

@@ -3,15 +3,22 @@ unpredictable css rules order in build */
 .pc-edit-block {
   cursor: pointer;
   position: relative;
+  z-index: 10;
+}
+.pc-edit-block_active {
+  z-index: 11;
+}
+.pc-edit-block_active .pc-edit-block__controls {
+  border: 4px solid var(--yc-color-promo-base-neon);
 }
 .pc-edit-block__controls {
   position: absolute;
-  width: calc(100% + 40px);
-  height: calc(100% + 40px);
-  top: -20px;
-  left: -20px;
+  width: calc(100% + 96px);
+  height: calc(100% + 48px);
+  top: -48px;
+  left: -48px;
   border-radius: var(--pc-border-radius);
-  z-index: 100;
+  z-index: 10;
 }
 .pc-edit-block__controls_isHeader {
   width: 100%;
@@ -19,8 +26,9 @@ unpredictable css rules order in build */
   top: 0;
   left: 0;
 }
-.pc-edit-block__controls_active {
-  border: 4px solid var(--yc-color-promo-base-neon);
+.pc-edit-block__controls_reset-paddings {
+  top: 0;
+  height: 100%;
 }
 .pc-edit-block__controls-content {
   display: flex;

package/build/cjs/editor/components/EditBlock/EditBlock.d.ts

@@ -9,5 +9,5 @@ export declare enum EditBlockControls {
 export type EditBlockActions = {
     [key in EditBlockControls]?: () => void;
 };
-declare const _default: React.MemoExoticComponent<({ actions, isActive, onSelect, isHeader, children }: EditBlockProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ actions, isActive, onSelect, isHeader, children, resetPaddings, }: EditBlockProps) => JSX.Element>;
 export default _default;

package/build/cjs/editor/components/EditBlock/EditBlock.js

@@ -25,7 +25,7 @@ const editBlockControlsIcons = {
     [EditBlockControls.Copy]: icons_1.Copy,
     [EditBlockControls.Delete]: icons_1.TrashBin,
 };
-const EditBlock = ({ actions, isActive, onSelect, isHeader, children }) => {
+const EditBlock = ({ actions, isActive, onSelect, isHeader, children, resetPaddings, }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (isActive && ref.current) {
@@ -33,8 +33,12 @@ const EditBlock = ({ actions, isActive, onSelect, isHeader, children }) => {
             ref.current.scrollIntoView({ block: 'center' });
         }
     }, [isActive]);
-    return (react_1.default.createElement("div", { className: b(), onClick: onSelect, ref: ref },
-        react_1.default.createElement("div", { className: b('controls', { active: isActive, isHeader }) }, isActive && (react_1.default.createElement("div", { className: b('controls-content'), onClick: (e) => e.stopPropagation() }, actionsOrder.map((action) => {
+    return (react_1.default.createElement("div", { className: b({ active: isActive }), onClick: onSelect, ref: ref },
+        react_1.default.createElement("div", { className: b('controls', {
+                active: isActive,
+                isHeader,
+                'reset-paddings': resetPaddings,
+            }) }, isActive && (react_1.default.createElement("div", { className: b('controls-content'), onClick: (e) => e.stopPropagation() }, actionsOrder.map((action) => {
             const Icon = editBlockControlsIcons[action];
             return actions[action] ? (react_1.default.createElement("div", { key: action, className: b('control'), onClick: actions[action] },
                 react_1.default.createElement(Icon, null))) : null;

package/build/cjs/editor/components/NotFoundBlock/NotFoundBlock.css

@@ -0,0 +1,21 @@
+.pc-not-found-block {
+  box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
+}
+
+.pc-not-found-block:hover {
+  box-shadow: 0px 4px 24px var(--yc-color-sfx-shadow), 0px 2px 8px var(--yc-color-sfx-shadow);
+  cursor: pointer;
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-not-found-block {
+  font-size: var(--yc-text-display-1-font-size);
+  line-height: var(--yc-text-display-1-line-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  background-color: var(--yc-color-promo-highlight-silver);
+  border-radius: var(--pc-border-radius);
+}

package/build/cjs/editor/components/NotFoundBlock/NotFoundBlock.d.ts

@@ -0,0 +1,2 @@
+import { BlockDecorationProps } from '../../../models';
+export declare const NotFoundBlock: ({ type, children }: BlockDecorationProps) => JSX.Element;

package/build/cjs/editor/components/NotFoundBlock/NotFoundBlock.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotFoundBlock = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const components_1 = require("../../../components");
+const utils_1 = require("../../../utils");
+const i18n_1 = tslib_1.__importDefault(require("./i18n"));
+const b = (0, utils_1.block)('not-found-block');
+const NotFoundBlock = ({ type, children }) => children ? (react_1.default.createElement(react_1.Fragment, null, children)) : (react_1.default.createElement(components_1.BlockBase, null,
+    react_1.default.createElement("div", { className: b() }, (0, i18n_1.default)('message', { type }))));
+exports.NotFoundBlock = NotFoundBlock;

package/build/cjs/editor/components/NotFoundBlock/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "message": "{{type}} not found"
+}

package/build/cjs/editor/components/NotFoundBlock/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/build/cjs/editor/components/NotFoundBlock/i18n/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const registerKeyset_1 = require("../../../../utils/registerKeyset");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+const COMPONENT = 'NotFoundBlock';
+exports.default = (0, registerKeyset_1.registerKeyset)({ en: en_json_1.default, ru: ru_json_1.default }, COMPONENT);

package/build/cjs/editor/components/NotFoundBlock/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "message": "{{type}} не найден"
+}

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

@@ -7,6 +7,7 @@ const AddBlock_1 = tslib_1.__importDefault(require("../../components/AddBlock/Ad
 const EditBlock_1 = tslib_1.__importDefault(require("../../components/EditBlock/EditBlock"));
 const ErrorBoundary_1 = require("../../components/ErrorBoundary/ErrorBoundary");
 const Layout_1 = tslib_1.__importDefault(require("../../components/Layout/Layout"));
+const NotFoundBlock_1 = require("../../components/NotFoundBlock/NotFoundBlock");
 const useFormSpec_1 = tslib_1.__importDefault(require("../../hooks/useFormSpec"));
 const store_1 = require("../../store");
 const types_1 = require("../../types");
@@ -20,6 +21,7 @@ const Editor = (_a) => {
     const outgoingProps = (0, react_1.useMemo)(() => {
         const custom = isEditingMode
             ? (0, utils_1.addCustomDecorator)([
+                (props) => react_1.default.createElement(NotFoundBlock_1.NotFoundBlock, Object.assign({}, props)),
                 (props) => (react_1.default.createElement(EditBlock_1.default, Object.assign({}, injectEditBlockProps(props)))),
                 // need errorBoundaryState flag to reset error on content update
                 (props) => (react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, Object.assign({}, props, { key: `${(0, utils_1.getBlockId)(props)}-${errorBoundaryState}` }))),

package/build/cjs/editor/data/templates/banner-block.json

@@ -3,7 +3,7 @@
     "theme": "light",
     "type": "banner-block",
     "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-    "subtitle": "<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> ",
+    "subtitle": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
     "image": {
       "light": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_light.png",
       "dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_dark.png"

package/build/cjs/editor/data/templates/questions-block.json

@@ -2,8 +2,8 @@
   "template": {
     "type": "questions-block",
     "title": "Lorem ipsum",
-    "text": "<p>Dolor sit amet, consectetur adipiscing elit <a href=\"https://example.com\">sed do eiusmod</a> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> ",
-    "additionalInfo": "<p>Dolor sit amet <a href=\"https://example.com\">consectetur adipiscing</a>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.</p> ",
+    "text": "Dolor sit amet, consectetur adipiscing elit [sed do eiusmod](https://example.com) tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    "additionalInfo": "Dolor sit **amet** [sed do eiusmod](https://example.com) 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.",
     "links": [
       {
         "url": "/security",
@@ -22,7 +22,7 @@
     "items": [
       {
         "title": "Lorem ipsum dolor sit amet 0",
-        "text": "<p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
+        "text": "Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
         "link": {
           "url": "#",
           "text": "Documentation",
@@ -32,7 +32,7 @@
       },
       {
         "title": "Ut enim ad minim veniam, quis nostrud exercitation ullamco? 1",
-        "text": "<p>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.</p> ",
+        "text": "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.",
         "link": {
           "url": "#",
           "text": "Documentation",
@@ -42,7 +42,7 @@
       },
       {
         "title": "Lorem ipsum dolor sit amet 2",
-        "text": "<p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
+        "text": "Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
         "link": {
           "url": "#",
           "text": "Documentation",
@@ -52,7 +52,7 @@
       },
       {
         "title": "Ut enim ad minim veniam, quis nostrud exercitation ullamco? 3",
-        "text": "<p>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.</p> ",
+        "text": "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.",
         "link": {
           "url": "#",
           "text": "Documentation",
@@ -62,7 +62,7 @@
       },
       {
         "title": "Lorem ipsum dolor sit amet 4",
-        "text": "<p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
+        "text": "Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
         "link": {
           "url": "#",
           "text": "Documentation",
@@ -72,7 +72,7 @@
       },
       {
         "title": "Ut enim ad minim veniam, quis nostrud exercitation ullamco? 5",
-        "text": "<p>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.</p> ",
+        "text": "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.",
         "link": {
           "url": "#",
           "text": "Documentation",
@@ -82,7 +82,7 @@
       },
       {
         "title": "Lorem ipsum dolor sit amet 6",
-        "text": "<p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
+        "text": "Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
         "link": {
           "url": "#",
           "text": "Documentation",
@@ -92,7 +92,7 @@
       },
       {
         "title": "Ut enim ad minim veniam, quis nostrud exercitation ullamco? 7",
-        "text": "<p>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.</p> ",
+        "text": "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.",
         "link": {
           "url": "#",
           "text": "Documentation",

package/build/cjs/editor/store/index.d.ts

@@ -6,7 +6,7 @@ export declare function useEditorState({ content: intialContent, custom }: Omit<
     content: PageContent;
     errorBoundaryState: number;
     viewMode: ViewModeItem;
-    injectEditBlockProps: ({ type, index: relativeIndex, children, }: BlockDecorationProps) => EditBlockProps;
+    injectEditBlockProps: ({ type, index: relativeIndex, children, ...rest }: BlockDecorationProps) => EditBlockProps;
     onAdd: (block: Block) => void;
     onSelect: (index: number) => void;
     onContentUpdate: (newContent: PageContent) => void;

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useEditorState = void 0;
+const tslib_1 = require("tslib");
 const react_1 = require("react");
 const models_1 = require("../../models");
 const utils_1 = require("../../utils");
@@ -36,7 +37,8 @@ function useEditorState({ content: intialContent, custom }) {
         const onSelect = (index) => dispatch({ type: reducer_1.SELECT_BLOCK, payload: index });
         const onContentUpdate = (newContent) => dispatch({ type: reducer_1.UPDATE_CONTENT, payload: newContent });
         const onViewModeUpdate = (newViewMode) => dispatch({ type: reducer_1.UPDATE_VIEW_MODE, payload: newViewMode });
-        const injectEditBlockProps = ({ type, index: relativeIndex = 0, children, }) => {
+        const injectEditBlockProps = (_a) => {
+            var { type, index: relativeIndex = 0, children } = _a, rest = tslib_1.__rest(_a, ["type", "index", "children"]);
             const orderedBlocksStartIndex = contentHasHeader ? 1 : 0;
             const isHeader = checkIsHeader(type);
             const index = isHeader ? 0 : relativeIndex + orderedBlocksStartIndex;
@@ -59,13 +61,10 @@ function useEditorState({ content: intialContent, custom }) {
                     });
                 }
             }
-            return {
-                children,
+            return Object.assign({ children,
                 isHeader,
                 isActive,
-                actions,
-                onSelect: () => onSelect(index),
-            };
+                actions, onSelect: () => onSelect(index) }, rest);
         };
         return {
             activeBlockIndex,

package/build/cjs/models/customization.d.ts

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
-import { BlockType } from './constructor-items';
-export interface BlockDecorationProps extends PropsWithChildren {
+import { BlockBaseProps, BlockType } from './constructor-items';
+export interface BlockDecorationProps extends PropsWithChildren, BlockBaseProps {
     type: BlockType;
     index?: number;
 }

package/build/cjs/utils/imageCompress.js

@@ -7,5 +7,5 @@ var AvailableForCompressExtension;
     AvailableForCompressExtension["JPG"] = "jpg";
     AvailableForCompressExtension["JPEG"] = "jpeg";
 })(AvailableForCompressExtension = exports.AvailableForCompressExtension || (exports.AvailableForCompressExtension = {}));
-const isCompressible = (fileName) => Object.keys(AvailableForCompressExtension).some((ext) => fileName.endsWith(`.${ext}`));
+const isCompressible = (fileName) => Object.values(AvailableForCompressExtension).some((ext) => fileName.toLowerCase().endsWith(`.${ext}`));
 exports.isCompressible = isCompressible;

package/build/esm/components/BlockBase/BlockBase.d.ts

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
-import { BlockBaseProps, BlockDecorationProps, ClassNameProps } from '../../models';
+import { BlockBaseProps, ClassNameProps } from '../../models';
 import './BlockBase.css';
-export type BlockBaseFullProps = BlockBaseProps & BlockDecorationProps & ClassNameProps & PropsWithChildren;
+export type BlockBaseFullProps = BlockBaseProps & ClassNameProps & PropsWithChildren;
 declare const BlockBase: (props: BlockBaseFullProps) => JSX.Element;
 export default BlockBase;

package/build/esm/components/BlockBase/BlockBase.js

@@ -1,15 +1,13 @@
 import React from 'react';
-import { BlockDecoration } from '../../customization/BlockDecoration';
 import { Col } from '../../grid';
 import { block } from '../../utils';
 import Anchor from '../Anchor/Anchor';
 import './BlockBase.css';
 const b = block('block-base');
 const BlockBase = (props) => {
-    const { anchor, visible, children, className, resetPaddings, qa, type, index } = props;
+    const { anchor, visible, children, className, resetPaddings, qa } = props;
     return (React.createElement(Col, { className: b({ ['reset-paddings']: resetPaddings }, className), visible: visible, reset: true, dataQa: qa },
-        React.createElement(BlockDecoration, { type: type, index: index },
-            anchor && React.createElement(Anchor, { id: anchor.url, className: b('anchor') }),
-            children)));
+        anchor && React.createElement(Anchor, { id: anchor.url, className: b('anchor') }),
+        children));
 };
 export default BlockBase;

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import { BlockBaseFullProps } from '../../../../components/BlockBase/BlockBase';
-import { Block, WithChildren } from '../../../../models';
-interface ConstructorBlockProps extends Pick<BlockBaseFullProps, 'index'> {
+import { Block, BlockDecorationProps, WithChildren } from '../../../../models';
+interface ConstructorBlockProps extends Pick<BlockDecorationProps, 'index'> {
     data: Block;
 }
 export declare const ConstructorBlock: React.FC<WithChildren<ConstructorBlockProps>>;

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

@@ -1,8 +1,12 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import _ from 'lodash';
 import BlockBase from '../../../../components/BlockBase/BlockBase';
+import { BlockDecoration } from '../../../../customization/BlockDecoration';
 import { block } from '../../../../utils';
 const b = block('constructor-block');
 export const ConstructorBlock = ({ index = 0, data, children, }) => {
-    const { anchor, visible, type } = data;
-    return (React.createElement(BlockBase, { type: type, index: index, className: b({ type }), anchor: anchor, visible: visible, resetPaddings: data.resetPaddings }, children));
+    const { type } = data;
+    const blockBaseProps = useMemo(() => _.pick(data, ['anchor', 'visible', 'resetPaddings']), [data]);
+    return (React.createElement(BlockDecoration, Object.assign({ type: type, index: index }, blockBaseProps),
+        React.createElement(BlockBase, Object.assign({ className: b({ type }) }, blockBaseProps), children)));
 };

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

@@ -1,6 +1,7 @@
 import React, { Fragment, useContext } from 'react';
 import _ from 'lodash';
 import { InnerContext } from '../../../../context/innerContext';
+import { BlockDecoration } from '../../../../customization/BlockDecoration';
 import { getBlockKey } from '../../../../utils';
 import { ConstructorBlock } from '../ConstructorBlock/ConstructorBlock';
 import { ConstructorItem } from '../ConstructorItem';
@@ -9,7 +10,7 @@ export const ConstructorBlocks = ({ items }) => {
     const { blockTypes, loadables, itemMap, shouldRenderBlock } = useContext(InnerContext);
     const renderer = (parentId = '', item, index) => {
         if (!itemMap[item.type]) {
-            return null;
+            return parentId ? null : (React.createElement(BlockDecoration, { type: item.type, index: index }, null));
         }
         let itemElement;
         const key = getBlockKey(item, index);

package/build/esm/customization/BlockDecoration.js

@@ -4,10 +4,9 @@ import { InnerContext } from '../context/innerContext';
 export const BlockDecoration = (_a) => {
     var _b, _c;
     var { children: blockChildren } = _a, rest = __rest(_a, ["children"]);
-    const block = React.createElement(Fragment, null, blockChildren);
     const blockDecorators = (_c = (_b = useContext(InnerContext).customization) === null || _b === void 0 ? void 0 : _b.decorators) === null || _c === void 0 ? void 0 : _c.block;
-    if (!blockDecorators) {
-        return block;
-    }
-    return blockDecorators.reduce((children, decorator) => React.createElement(Fragment, null, decorator(Object.assign({ children }, rest))), block);
+    const content = blockDecorators
+        ? blockDecorators.reduce((children, decorator) => decorator(Object.assign({ children }, rest)), blockChildren)
+        : blockChildren;
+    return React.createElement(Fragment, null, content);
 };

package/build/esm/editor/components/EditBlock/EditBlock.css

@@ -3,15 +3,22 @@ unpredictable css rules order in build */
 .pc-edit-block {
   cursor: pointer;
   position: relative;
+  z-index: 10;
+}
+.pc-edit-block_active {
+  z-index: 11;
+}
+.pc-edit-block_active .pc-edit-block__controls {
+  border: 4px solid var(--yc-color-promo-base-neon);
 }
 .pc-edit-block__controls {
   position: absolute;
-  width: calc(100% + 40px);
-  height: calc(100% + 40px);
-  top: -20px;
-  left: -20px;
+  width: calc(100% + 96px);
+  height: calc(100% + 48px);
+  top: -48px;
+  left: -48px;
   border-radius: var(--pc-border-radius);
-  z-index: 100;
+  z-index: 10;
 }
 .pc-edit-block__controls_isHeader {
   width: 100%;
@@ -19,8 +26,9 @@ unpredictable css rules order in build */
   top: 0;
   left: 0;
 }
-.pc-edit-block__controls_active {
-  border: 4px solid var(--yc-color-promo-base-neon);
+.pc-edit-block__controls_reset-paddings {
+  top: 0;
+  height: 100%;
 }
 .pc-edit-block__controls-content {
   display: flex;

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

@@ -10,5 +10,5 @@ export declare enum EditBlockControls {
 export type EditBlockActions = {
     [key in EditBlockControls]?: () => void;
 };
-declare const _default: React.MemoExoticComponent<({ actions, isActive, onSelect, isHeader, children }: EditBlockProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ actions, isActive, onSelect, isHeader, children, resetPaddings, }: EditBlockProps) => JSX.Element>;
 export default _default;

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

@@ -22,7 +22,7 @@ const editBlockControlsIcons = {
     [EditBlockControls.Copy]: CopyIcon,
     [EditBlockControls.Delete]: TrashBin,
 };
-const EditBlock = ({ actions, isActive, onSelect, isHeader, children }) => {
+const EditBlock = ({ actions, isActive, onSelect, isHeader, children, resetPaddings, }) => {
     const ref = useRef(null);
     useEffect(() => {
         if (isActive && ref.current) {
@@ -30,8 +30,12 @@ const EditBlock = ({ actions, isActive, onSelect, isHeader, children }) => {
             ref.current.scrollIntoView({ block: 'center' });
         }
     }, [isActive]);
-    return (React.createElement("div", { className: b(), onClick: onSelect, ref: ref },
-        React.createElement("div", { className: b('controls', { active: isActive, isHeader }) }, isActive && (React.createElement("div", { className: b('controls-content'), onClick: (e) => e.stopPropagation() }, actionsOrder.map((action) => {
+    return (React.createElement("div", { className: b({ active: isActive }), onClick: onSelect, ref: ref },
+        React.createElement("div", { className: b('controls', {
+                active: isActive,
+                isHeader,
+                'reset-paddings': resetPaddings,
+            }) }, isActive && (React.createElement("div", { className: b('controls-content'), onClick: (e) => e.stopPropagation() }, actionsOrder.map((action) => {
             const Icon = editBlockControlsIcons[action];
             return actions[action] ? (React.createElement("div", { key: action, className: b('control'), onClick: actions[action] },
                 React.createElement(Icon, null))) : null;

package/build/esm/editor/components/NotFoundBlock/NotFoundBlock.css

@@ -0,0 +1,21 @@
+.pc-not-found-block {
+  box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
+}
+
+.pc-not-found-block:hover {
+  box-shadow: 0px 4px 24px var(--yc-color-sfx-shadow), 0px 2px 8px var(--yc-color-sfx-shadow);
+  cursor: pointer;
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-not-found-block {
+  font-size: var(--yc-text-display-1-font-size);
+  line-height: var(--yc-text-display-1-line-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  background-color: var(--yc-color-promo-highlight-silver);
+  border-radius: var(--pc-border-radius);
+}

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

@@ -0,0 +1,3 @@
+import { BlockDecorationProps } from '../../../models';
+import './NotFoundBlock.css';
+export declare const NotFoundBlock: ({ type, children }: BlockDecorationProps) => JSX.Element;

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

@@ -0,0 +1,8 @@
+import React, { Fragment } from 'react';
+import { BlockBase } from '../../../components';
+import { block } from '../../../utils';
+import i18n from './i18n';
+import './NotFoundBlock.css';
+const b = block('not-found-block');
+export const NotFoundBlock = ({ type, children }) => children ? (React.createElement(Fragment, null, children)) : (React.createElement(BlockBase, null,
+    React.createElement("div", { className: b() }, i18n('message', { type }))));

package/build/esm/editor/components/NotFoundBlock/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "message": "{{type}} not found"
+}

package/build/esm/editor/components/NotFoundBlock/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/build/esm/editor/components/NotFoundBlock/i18n/index.js

@@ -0,0 +1,5 @@
+import { registerKeyset } from '../../../../utils/registerKeyset';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'NotFoundBlock';
+export default registerKeyset({ en, ru }, COMPONENT);

package/build/esm/editor/components/NotFoundBlock/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "message": "{{type}} не найден"
+}

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

@@ -4,6 +4,7 @@ import AddBlock from '../../components/AddBlock/AddBlock';
 import EditBlock from '../../components/EditBlock/EditBlock';
 import { ErrorBoundary } from '../../components/ErrorBoundary/ErrorBoundary';
 import Layout from '../../components/Layout/Layout';
+import { NotFoundBlock } from '../../components/NotFoundBlock/NotFoundBlock';
 import useFormSpec from '../../hooks/useFormSpec';
 import { useEditorState } from '../../store';
 import { ViewModeItem } from '../../types';
@@ -17,6 +18,7 @@ export const Editor = (_a) => {
     const outgoingProps = useMemo(() => {
         const custom = isEditingMode
             ? addCustomDecorator([
+                (props) => React.createElement(NotFoundBlock, Object.assign({}, props)),
                 (props) => (React.createElement(EditBlock, Object.assign({}, injectEditBlockProps(props)))),
                 // need errorBoundaryState flag to reset error on content update
                 (props) => (React.createElement(ErrorBoundary, Object.assign({}, props, { key: `${getBlockId(props)}-${errorBoundaryState}` }))),

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

@@ -3,7 +3,7 @@
     "theme": "light",
     "type": "banner-block",
     "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-    "subtitle": "<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> ",
+    "subtitle": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
     "image": {
       "light": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_light.png",
       "dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_dark.png"

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

@@ -2,8 +2,8 @@
   "template": {
     "type": "questions-block",
     "title": "Lorem ipsum",
-    "text": "<p>Dolor sit amet, consectetur adipiscing elit <a href=\"https://example.com\">sed do eiusmod</a> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> ",
-    "additionalInfo": "<p>Dolor sit amet <a href=\"https://example.com\">consectetur adipiscing</a>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.</p> ",
+    "text": "Dolor sit amet, consectetur adipiscing elit [sed do eiusmod](https://example.com) tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    "additionalInfo": "Dolor sit **amet** [sed do eiusmod](https://example.com) 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.",
     "links": [
       {
         "url": "/security",
@@ -22,7 +22,7 @@
     "items": [
       {
         "title": "Lorem ipsum dolor sit amet 0",
-        "text": "<p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
+        "text": "Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
         "link": {
           "url": "#",
           "text": "Documentation",
@@ -32,7 +32,7 @@
       },
       {
         "title": "Ut enim ad minim veniam, quis nostrud exercitation ullamco? 1",
-        "text": "<p>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.</p> ",
+        "text": "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.",
         "link": {
           "url": "#",
           "text": "Documentation",
@@ -42,7 +42,7 @@
       },
       {
         "title": "Lorem ipsum dolor sit amet 2",
-        "text": "<p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
+        "text": "Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
         "link": {
           "url": "#",
           "text": "Documentation",
@@ -52,7 +52,7 @@
       },
       {
         "title": "Ut enim ad minim veniam, quis nostrud exercitation ullamco? 3",
-        "text": "<p>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.</p> ",
+        "text": "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.",
         "link": {
           "url": "#",
           "text": "Documentation",
@@ -62,7 +62,7 @@
       },
       {
         "title": "Lorem ipsum dolor sit amet 4",
-        "text": "<p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
+        "text": "Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
         "link": {
           "url": "#",
           "text": "Documentation",
@@ -72,7 +72,7 @@
       },
       {
         "title": "Ut enim ad minim veniam, quis nostrud exercitation ullamco? 5",
-        "text": "<p>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.</p> ",
+        "text": "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.",
         "link": {
           "url": "#",
           "text": "Documentation",
@@ -82,7 +82,7 @@
       },
       {
         "title": "Lorem ipsum dolor sit amet 6",
-        "text": "<p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
+        "text": "Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
         "link": {
           "url": "#",
           "text": "Documentation",
@@ -92,7 +92,7 @@
       },
       {
         "title": "Ut enim ad minim veniam, quis nostrud exercitation ullamco? 7",
-        "text": "<p>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.</p> ",
+        "text": "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.",
         "link": {
           "url": "#",
           "text": "Documentation",

package/build/esm/editor/store/index.d.ts

@@ -6,7 +6,7 @@ export declare function useEditorState({ content: intialContent, custom }: Omit<
     content: PageContent;
     errorBoundaryState: number;
     viewMode: ViewModeItem;
-    injectEditBlockProps: ({ type, index: relativeIndex, children, }: BlockDecorationProps) => EditBlockProps;
+    injectEditBlockProps: ({ type, index: relativeIndex, children, ...rest }: BlockDecorationProps) => EditBlockProps;
     onAdd: (block: Block) => void;
     onSelect: (index: number) => void;
     onContentUpdate: (newContent: PageContent) => void;

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

@@ -1,3 +1,4 @@
+import { __rest } from "tslib";
 import { useMemo, useReducer } from 'react';
 import { HeaderBlockTypes } from '../../models';
 import { getCustomHeaderTypes, getHeaderBlock } from '../../utils';
@@ -33,7 +34,8 @@ export function useEditorState({ content: intialContent, custom }) {
         const onSelect = (index) => dispatch({ type: SELECT_BLOCK, payload: index });
         const onContentUpdate = (newContent) => dispatch({ type: UPDATE_CONTENT, payload: newContent });
         const onViewModeUpdate = (newViewMode) => dispatch({ type: UPDATE_VIEW_MODE, payload: newViewMode });
-        const injectEditBlockProps = ({ type, index: relativeIndex = 0, children, }) => {
+        const injectEditBlockProps = (_a) => {
+            var { type, index: relativeIndex = 0, children } = _a, rest = __rest(_a, ["type", "index", "children"]);
             const orderedBlocksStartIndex = contentHasHeader ? 1 : 0;
             const isHeader = checkIsHeader(type);
             const index = isHeader ? 0 : relativeIndex + orderedBlocksStartIndex;
@@ -56,13 +58,10 @@ export function useEditorState({ content: intialContent, custom }) {
                     });
                 }
             }
-            return {
-                children,
+            return Object.assign({ children,
                 isHeader,
                 isActive,
-                actions,
-                onSelect: () => onSelect(index),
-            };
+                actions, onSelect: () => onSelect(index) }, rest);
         };
         return {
             activeBlockIndex,

package/build/esm/models/customization.d.ts

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
-import { BlockType } from './constructor-items';
-export interface BlockDecorationProps extends PropsWithChildren {
+import { BlockBaseProps, BlockType } from './constructor-items';
+export interface BlockDecorationProps extends PropsWithChildren, BlockBaseProps {
     type: BlockType;
     index?: number;
 }

package/build/esm/utils/imageCompress.js

@@ -4,4 +4,4 @@ export var AvailableForCompressExtension;
     AvailableForCompressExtension["JPG"] = "jpg";
     AvailableForCompressExtension["JPEG"] = "jpeg";
 })(AvailableForCompressExtension || (AvailableForCompressExtension = {}));
-export const isCompressible = (fileName) => Object.keys(AvailableForCompressExtension).some((ext) => fileName.endsWith(`.${ext}`));
+export const isCompressible = (fileName) => Object.values(AvailableForCompressExtension).some((ext) => fileName.toLowerCase().endsWith(`.${ext}`));

package/package.json

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

package/server/models/customization.d.ts

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
-import { BlockType } from './constructor-items';
-export interface BlockDecorationProps extends PropsWithChildren {
+import { BlockBaseProps, BlockType } from './constructor-items';
+export interface BlockDecorationProps extends PropsWithChildren, BlockBaseProps {
     type: BlockType;
     index?: number;
 }