@gravity-ui/page-constructor 2.19.0 → 2.20.1

package/build/esm/editor/Components/AddBlock/AddBlock.css

@@ -0,0 +1,82 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-add-block {
+  position: fixed;
+  bottom: 32px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 110;
+}
+.pc-add-block__button {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: transform 0.2s;
+  width: 76px;
+  height: 40px;
+  color: var(--yc-color-text-inverted-primary);
+  background-color: var(--yc-color-promo-base-neon);
+  border-radius: 8px;
+}
+.pc-add-block__button:hover {
+  transform: scale(1.05);
+}
+.pc-add-block__icon {
+  width: 16px;
+  height: 16px;
+}
+
+.pc-add-block__popup {
+  min-width: 420px;
+  border-radius: var(--pc-border-radius);
+  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.06), 0px 4px 24px rgba(0, 0, 0, 0.06);
+}
+.pc-add-block__popup .pc-add-block__search {
+  padding: 20px 20px 0;
+}
+.pc-add-block__popup .pc-add-block__blocks {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  height: 296px;
+  max-height: 296px;
+  overflow-y: auto;
+}
+.pc-add-block__popup .pc-add-block__block {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: transform 0.2s;
+  margin-top: 20px;
+  justify-content: flex-start;
+  cursor: pointer;
+}
+.pc-add-block__popup .pc-add-block__block:hover {
+  transform: scale(1.05);
+}
+.pc-add-block__popup .pc-add-block__block:first-child {
+  margin-top: 0;
+}
+.pc-add-block__popup .pc-add-block__preview {
+  width: 148px;
+  height: 74px;
+  border-radius: var(--pc-border-radius);
+  margin-right: 16px;
+}
+.pc-add-block__popup .pc-add-block__title {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+}
+.pc-add-block__popup .pc-add-block__title,
+.pc-add-block__popup .pc-add-block__description {
+  margin: 0;
+}

package/build/esm/editor/Components/AddBlock/AddBlock.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { Block } from '../../../models';
+import './AddBlock.css';
+export interface AddBlockProps {
+    onAdd: (data: Block) => void;
+}
+declare const AddBlock: ({ onAdd }: PropsWithChildren<AddBlockProps>) => JSX.Element;
+export default AddBlock;

package/build/esm/editor/Components/AddBlock/AddBlock.js

@@ -0,0 +1,41 @@
+import React, { useMemo, useRef, useState } from 'react';
+import { Plus } from '@gravity-ui/icons';
+import { Popup, TextInput } from '@gravity-ui/uikit';
+import { blockMap } from '../../../constructor-items';
+import { block } from '../../../utils';
+import EditorBlocksData from '../../data';
+import './AddBlock.css';
+const b = block('add-block');
+const sortedBlockNames = Object.keys(blockMap).sort();
+const AddBlock = ({ onAdd }) => {
+    const [isOpened, setIsOpened] = useState(false);
+    const [search, setSearch] = useState('');
+    const ref = useRef(null);
+    const blocks = useMemo(() => sortedBlockNames.filter((blockName) => EditorBlocksData[blockName].meta.title
+        .toLocaleLowerCase()
+        .startsWith(search.toLocaleLowerCase())), [search]);
+    return (React.createElement("div", { className: b(), ref: ref },
+        React.createElement("button", { className: b('button'), onClick: () => {
+                setIsOpened(!isOpened);
+                setSearch('');
+            } },
+            React.createElement(Plus, { className: b('icon') })),
+        isOpened && (React.createElement(Popup, { anchorRef: ref, open: isOpened, className: b('popup'), placement: "top", offset: [0, 24], onOutsideClick: () => setIsOpened(false) },
+            React.createElement("div", { className: b('search') },
+                React.createElement(TextInput, { placeholder: "search", type: "text", value: search, size: "l", onUpdate: (value) => setSearch(value) })),
+            React.createElement("div", { className: b('blocks') }, blocks.map((blockName) => {
+                var _a;
+                const blockData = EditorBlocksData[blockName];
+                const Preview = blockData === null || blockData === void 0 ? void 0 : blockData.preview;
+                return (React.createElement("div", { key: blockName, className: b('block'), onClick: () => {
+                        onAdd(blockData === null || blockData === void 0 ? void 0 : blockData.template);
+                        setIsOpened(false);
+                    } },
+                    React.createElement("div", { className: b('preview') },
+                        React.createElement(Preview, null)),
+                    React.createElement("div", { className: b('info') },
+                        React.createElement("h4", { className: b('title') }, blockData.meta.title),
+                        ((_a = blockData === null || blockData === void 0 ? void 0 : blockData.meta) === null || _a === void 0 ? void 0 : _a.description) && (React.createElement("p", { className: b('description') }, blockData.meta.description)))));
+            }))))));
+};
+export default AddBlock;

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

@@ -0,0 +1,47 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-edit-block {
+  cursor: pointer;
+  position: relative;
+}
+.pc-edit-block__controls {
+  position: absolute;
+  width: calc(100% + 40px);
+  height: calc(100% + 40px);
+  top: -20px;
+  left: -20px;
+  border-radius: 8px;
+  z-index: 100;
+}
+.pc-edit-block__controls_isHeader {
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.pc-edit-block__controls_active {
+  border: 4px solid var(--yc-color-promo-base-neon);
+}
+.pc-edit-block__controls-content {
+  display: flex;
+  position: absolute;
+  bottom: -44px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.pc-edit-block__control {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: transform 0.2s;
+  width: 24px;
+  height: 24px;
+  border-radius: calc(8px / 2);
+  background-color: var(--yc-color-promo-highlight-neon);
+}
+.pc-edit-block__control:hover {
+  transform: scale(1.1);
+}
+.pc-edit-block__control:not(:first-child) {
+  margin-left: 12px;
+}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { EditBlockProps } from '../../../editor/types';
+import './EditBlock.css';
+declare const _default: React.MemoExoticComponent<({ id, isHeader, activeBlockId, onDelete, onSelect, onCopy, onOrderChange, children, orderedBlocksCount, }: EditBlockProps) => JSX.Element>;
+export default _default;

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

@@ -0,0 +1,30 @@
+import React, { Fragment, useEffect, useRef } from 'react';
+import { ChevronDown, ChevronUp, Copy, TrashBin } from '@gravity-ui/icons';
+import { block } from '../../../utils';
+import './EditBlock.css';
+const b = block('edit-block');
+const EditBlock = ({ id, isHeader, activeBlockId, onDelete, onSelect, onCopy, onOrderChange, children, orderedBlocksCount, }) => {
+    const ref = useRef(null);
+    const controlsActive = activeBlockId === id;
+    useEffect(() => {
+        var _a;
+        if (controlsActive && ref.current) {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+    }, [controlsActive]);
+    return (React.createElement("div", { className: b(), onClick: () => {
+            onSelect(id);
+        }, ref: ref },
+        React.createElement("div", { className: b('controls', { active: controlsActive, isHeader }) }, controlsActive && (React.createElement("div", { className: b('controls-content'), onClick: (e) => e.stopPropagation() },
+            typeof id === 'number' && (React.createElement(Fragment, null,
+                id > 0 && (React.createElement("div", { className: b('control'), onClick: () => onOrderChange(id, id - 1) },
+                    React.createElement(ChevronUp, null))),
+                id < orderedBlocksCount - 1 && (React.createElement("div", { className: b('control'), onClick: () => onOrderChange(id, id + 1) },
+                    React.createElement(ChevronDown, null))),
+                React.createElement("div", { className: b('control'), onClick: () => onCopy(id) },
+                    React.createElement(Copy, null)))),
+            React.createElement("div", { className: b('control'), onClick: () => onDelete(id) },
+                React.createElement(TrashBin, null))))),
+        children));
+};
+export default React.memo(EditBlock);

package/build/esm/editor/Containers/Editor.d.ts

@@ -0,0 +1,2 @@
+import { EditorProps } from '../types';
+export declare const Editor: ({ children, ...rest }: EditorProps) => JSX.Element;

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

@@ -0,0 +1,20 @@
+import { __rest } from "tslib";
+import React, { useMemo } from 'react';
+import AddBlock from '../Components/AddBlock/AddBlock';
+import EditBlock from '../Components/EditBlock/EditBlock';
+import { useEditorState } from '../store';
+import { addCustomDecorator } from '../utils';
+export const Editor = (_a) => {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    const { content, onAdd, editControlsProps } = useEditorState(rest);
+    const constructorProps = useMemo(() => {
+        const editControlsDecorator = (props) => (React.createElement(EditBlock, Object.assign({}, props, editControlsProps)));
+        return {
+            content,
+            custom: addCustomDecorator(editControlsDecorator, rest.custom),
+        };
+    }, [editControlsProps, content, rest.custom]);
+    return (React.createElement("div", null,
+        children(constructorProps),
+        React.createElement(AddBlock, { onAdd: onAdd })));
+};

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { Block, BlockType } from '../../models';
+export type PreviewComponent = React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+export interface EdiorBlockData {
+    template: Block;
+    preview: PreviewComponent;
+    meta: {
+        title: string;
+        description?: string;
+    };
+}
+declare const EditorBlocksData: Record<BlockType, EdiorBlockData>;
+export default EditorBlocksData;

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

@@ -0,0 +1,24 @@
+import { BlockType } from '../../models';
+import { formatBlockName } from '../utils';
+import DefaultPreview from './previews/default-preview';
+const getBlockTemplate = (blockType) => require(`./templates/${blockType}.json`);
+const getBlockPreview = (blockType) => {
+    try {
+        return require(`./previews/${blockType}.tsx`).default;
+    }
+    catch (err) {
+        /*eslint-disable no-console */
+        console.warn(`Preview image for ${blockType} not found`);
+        return DefaultPreview;
+    }
+};
+const EditorBlocksData = Object.values(BlockType).reduce((previewData, blockType) => {
+    const template = getBlockTemplate(blockType);
+    const preview = getBlockPreview(blockType);
+    template.meta = template.meta || {};
+    template.meta.title = template.meta.title || formatBlockName(blockType);
+    /* eslint-disable no-param-reassign */
+    previewData[blockType] = Object.assign(Object.assign({}, template), { preview });
+    return previewData;
+}, {});
+export default EditorBlocksData;

package/build/esm/editor/data/previews/default-preview.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const DefaultPreview: React.FC<React.SVGProps<SVGSVGElement>>;
+export default DefaultPreview;

package/build/esm/editor/data/previews/default-preview.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { a11yHiddenSvgProps } from '../../../utils/svg';
+const DefaultPreview = (props) => (React.createElement("svg", Object.assign({ width: "150", height: "76", viewBox: "0 0 150 76", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, a11yHiddenSvgProps, props),
+    React.createElement("rect", { x: "1", y: "1", width: "148", height: "74", rx: "8", fill: "white" }),
+    React.createElement("rect", { x: "14.7674", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "#E7E7E7" }),
+    React.createElement("rect", { x: "43.1628", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "white" }),
+    React.createElement("rect", { x: "14.7674", y: "31.9767", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "#E7E7E7" }),
+    React.createElement("rect", { x: "14.7675", y: "37.1395", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "#E7E7E7" }),
+    React.createElement("rect", { x: "14.7675", y: "42.3023", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "#E7E7E7" }),
+    React.createElement("rect", { x: "14.7674", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "#E7E7E7" }),
+    React.createElement("rect", { x: "33.6977", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "white" }),
+    React.createElement("rect", { x: "52.6279", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "white" }),
+    React.createElement("rect", { x: "78.4418", y: "9.60464", width: "56.7907", height: "56.7907", rx: "5.16279", fill: "#A967FF" }),
+    React.createElement("rect", { x: "0.5", y: "0.5", width: "149", height: "75", rx: "8.5", stroke: "black", strokeOpacity: "0.1" })));
+export default DefaultPreview;

package/build/esm/editor/data/previews/header-block.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Header: React.FC<React.SVGProps<SVGSVGElement>>;
+export default Header;

package/build/esm/editor/data/previews/header-block.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { a11yHiddenSvgProps } from '../../../utils/svg';
+const Header = (props) => (React.createElement("svg", Object.assign({ width: "150", height: "76", viewBox: "0 0 150 76", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, a11yHiddenSvgProps, props),
+    React.createElement("rect", { x: "1", y: "1", width: "148", height: "74", rx: "8", fill: "white" }),
+    React.createElement("rect", { x: "4.44174", y: "9.60464", width: "141.116", height: "56.7907", rx: "5.16279", fill: "#A967FF" }),
+    React.createElement("rect", { x: "14.7674", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "white" }),
+    React.createElement("rect", { x: "43.1628", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "#A967FF" }),
+    React.createElement("rect", { x: "14.7674", y: "31.9767", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "white" }),
+    React.createElement("rect", { x: "14.7674", y: "37.1395", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "white" }),
+    React.createElement("rect", { x: "14.7674", y: "42.3023", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "white" }),
+    React.createElement("rect", { x: "14.7674", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "white" }),
+    React.createElement("rect", { x: "33.6976", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "#A967FF" }),
+    React.createElement("rect", { x: "52.6279", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "#A967FF" }),
+    React.createElement("rect", { x: "78.4418", y: "9.60464", width: "56.7907", height: "56.7907", rx: "5.16279", fill: "#A967FF" }),
+    React.createElement("rect", { x: "0.5", y: "0.5", width: "149", height: "75", rx: "8.5", stroke: "black", strokeOpacity: "0.1" })));
+export default Header;

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

@@ -0,0 +1,2 @@
+export { Editor } from './Containers/Editor';
+export * from './types';

package/build/esm/editor/index.js

@@ -0,0 +1,2 @@
+export { Editor } from './Containers/Editor';
+export * from './types';

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

@@ -0,0 +1,15 @@
+import { Block } from '../../models';
+import { EditorProps } from '../types';
+export type EditorBlockId = number | string;
+export declare function useEditorState({ content: intialContent, custom }: Omit<EditorProps, 'children'>): {
+    content: import("../../models").PageContent;
+    editControlsProps: {
+        activeBlockId: import("./reducer").EditorBlockId;
+        orderedBlocksCount: number;
+        onDelete: (id: EditorBlockId) => void;
+        onSelect: (id: EditorBlockId) => void;
+        onCopy: (index: number) => void;
+        onOrderChange: (oldIndex: number, newIndex: number) => void;
+    };
+    onAdd: (block: Block) => void;
+};

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

@@ -0,0 +1,28 @@
+import { useMemo, useReducer } from 'react';
+import { HeaderBlockTypes } from '../../models';
+import { getCustomHeaderTypes, getOrderedBlocks } from '../../utils';
+import { ADD_BLOCK, COPY_BLOCK, DELETE_BLOCK, ORDER_BLOCK, SELECT_BLOCK, getReducer, } from './reducer';
+import { addEditorProps } from './utils';
+export function useEditorState({ content: intialContent, custom }) {
+    const headerBlockTypes = useMemo(() => [...HeaderBlockTypes, ...getCustomHeaderTypes(custom)], [custom]);
+    const reducer = useMemo(() => getReducer(headerBlockTypes), [headerBlockTypes]);
+    const [{ activeBlockId, content, orderedBlocksCount }, dispatch] = useReducer(reducer, {
+        activeBlockId: 0,
+        orderedBlocksCount: getOrderedBlocks(intialContent.blocks, headerBlockTypes).length,
+        content: addEditorProps(intialContent),
+    });
+    return useMemo(() => {
+        return {
+            content,
+            editControlsProps: {
+                activeBlockId,
+                orderedBlocksCount,
+                onDelete: (id) => dispatch({ type: DELETE_BLOCK, payload: id }),
+                onSelect: (id) => dispatch({ type: SELECT_BLOCK, payload: id }),
+                onCopy: (index) => dispatch({ type: COPY_BLOCK, payload: index }),
+                onOrderChange: (oldIndex, newIndex) => dispatch({ type: ORDER_BLOCK, payload: { oldIndex, newIndex } }),
+            },
+            onAdd: (block) => dispatch({ type: ADD_BLOCK, payload: block }),
+        };
+    }, [content, activeBlockId, orderedBlocksCount]);
+}

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

@@ -0,0 +1,41 @@
+import { Block, CustomConfig, PageContent } from '../../models';
+export type EditorBlockId = number | string;
+interface EditorState {
+    content: PageContent;
+    activeBlockId: EditorBlockId;
+    orderedBlocksCount: number;
+    custom?: CustomConfig;
+}
+interface OrderBlockParams {
+    oldIndex: number;
+    newIndex: number;
+}
+export declare const SELECT_BLOCK = "SELECT_BLOCK";
+export declare const DELETE_BLOCK = "DELETE_BLOCK";
+export declare const COPY_BLOCK = "COPY_BLOCK";
+export declare const ADD_BLOCK = "ADD_BLOCK";
+export declare const SET_REGION = "SET_REGION";
+export declare const ORDER_BLOCK = "ORDER_BLOCK";
+interface SelectBlock {
+    type: typeof SELECT_BLOCK;
+    payload: EditorBlockId;
+}
+interface DeleteBlock {
+    type: typeof DELETE_BLOCK;
+    payload: EditorBlockId;
+}
+interface CopyBlock {
+    type: typeof COPY_BLOCK;
+    payload: number;
+}
+interface AddBlock {
+    type: typeof ADD_BLOCK;
+    payload: Block;
+}
+interface OrderBlock {
+    type: typeof ORDER_BLOCK;
+    payload: OrderBlockParams;
+}
+export type EditorAction = SelectBlock | DeleteBlock | CopyBlock | AddBlock | OrderBlock;
+export declare const getReducer: (headerBlockTypes: string[]) => (state: EditorState, action: EditorAction) => EditorState;
+export {};

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

@@ -0,0 +1,55 @@
+import { getHeaderBlock, getOrderedBlocks } from '../../utils';
+import { addBlock, changeBlocksOrder, duplicateBlock, getNewBlockIndex } from './utils';
+// actions
+export const SELECT_BLOCK = 'SELECT_BLOCK';
+export const DELETE_BLOCK = 'DELETE_BLOCK';
+export const COPY_BLOCK = 'COPY_BLOCK';
+export const ADD_BLOCK = 'ADD_BLOCK';
+export const SET_REGION = 'SET_REGION';
+export const ORDER_BLOCK = 'ORDER_BLOCK';
+// reducer
+export const getReducer = (headerBlockTypes) => (state, action) => {
+    const { content } = state;
+    const header = getHeaderBlock(content.blocks, headerBlockTypes);
+    const orderedBlocks = getOrderedBlocks(content.blocks, headerBlockTypes);
+    const withHeader = (blocks) => [header, ...blocks].filter(Boolean);
+    const getNewState = (blocks, activeBlockId) => (Object.assign(Object.assign({}, state), { content: Object.assign(Object.assign({}, content), { blocks }), activeBlockId, orderedBlocksCount: orderedBlocks.length }));
+    switch (action.type) {
+        case SELECT_BLOCK:
+            return getNewState(content.blocks, action.payload);
+        case DELETE_BLOCK: {
+            const blockId = action.payload;
+            return getNewState(typeof blockId === 'string'
+                ? content.blocks.filter(({ type }) => type !== blockId)
+                : withHeader(orderedBlocks.filter((_block, index) => index !== blockId)), -1);
+        }
+        case COPY_BLOCK: {
+            const index = action.payload;
+            return getNewState(withHeader(duplicateBlock(orderedBlocks, index)), index + 1);
+        }
+        case ADD_BLOCK: {
+            let blocks;
+            let activeBlockId;
+            const block = action.payload;
+            if (headerBlockTypes.includes(block.type)) {
+                blocks = header ? blocks : [block, ...orderedBlocks];
+                activeBlockId = block.type;
+            }
+            else {
+                const newBlockIndex = getNewBlockIndex(state.activeBlockId, orderedBlocks.length);
+                blocks = withHeader(addBlock(orderedBlocks, block, newBlockIndex));
+                activeBlockId = newBlockIndex;
+            }
+            if (blocks) {
+                return getNewState(blocks, activeBlockId);
+            }
+            return state;
+        }
+        case ORDER_BLOCK: {
+            const { oldIndex, newIndex } = action.payload;
+            return getNewState(withHeader(changeBlocksOrder(orderedBlocks, oldIndex, newIndex)), newIndex);
+        }
+        default:
+            return state;
+    }
+};

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

@@ -0,0 +1,13 @@
+import { Block, PageContent } from '../../models';
+import { EditorBlockId } from './reducer';
+export declare const changeBlocksOrder: (array: Block[], oldIndex: number, newIndex: number) => Block[];
+export declare const duplicateBlock: (array: Block[], index: number) => Block[];
+export declare const getNewBlockIndex: (id: EditorBlockId, orderedBlocksCount: number) => number;
+export declare const addBlock: (array: Block[], block: Block, index: number) => Block[];
+export declare const addEditorProps: (content: PageContent) => {
+    animated: boolean;
+    blocks: Block[];
+    menu?: import("../../models").Menu | undefined;
+    background?: import("../../models").ThemedMediaProps | undefined;
+    footnotes?: string[] | undefined;
+};

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

@@ -0,0 +1,26 @@
+export const changeBlocksOrder = (array, oldIndex, newIndex) => {
+    const result = [...array];
+    const element = result.splice(oldIndex, 1)[0];
+    result.splice(newIndex, 0, element);
+    return result;
+};
+export const duplicateBlock = (array, index) => {
+    const result = [...array];
+    result.splice(index + 1, 0, result[index]);
+    return result;
+};
+export const getNewBlockIndex = (id, orderedBlocksCount) => {
+    if (id === -1) {
+        return orderedBlocksCount;
+    }
+    // id === 'string' - header block
+    return typeof id === 'string' ? 0 : id + 1;
+};
+export const addBlock = (array, block, index) => {
+    const result = [...array];
+    result.splice(index, 0, block);
+    return result;
+};
+export const addEditorProps = (content) => {
+    return Object.assign(Object.assign({}, content), { animated: false });
+};

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { PageConstructorProps } from '../../containers/PageConstructor';
+import { BlockDecoratorProps, PageData } from '../../models';
+export type EditorBlockId = number | string;
+export interface EditorProps extends Required<Pick<PageConstructorProps, 'content'>>, Partial<Omit<PageConstructorProps, 'content'>> {
+    children: (props: Partial<PageConstructorProps>) => React.ReactNode;
+    onChange?: (data: PageData) => void;
+}
+export interface EditBlockEditorProps {
+    activeBlockId: EditorBlockId;
+    orderedBlocksCount: number;
+    onSelect: (index: EditorBlockId) => void;
+    onDelete: (index: EditorBlockId) => void;
+    onCopy: (index: number) => void;
+    onOrderChange: (index: number, newIndex: number) => void;
+}
+export type EditBlockProps = EditBlockEditorProps & BlockDecoratorProps;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,11 @@
+import { BlockDecorator, CustomConfig } from '../../models';
+export declare const formatBlockName: (name: string) => string;
+export declare const addCustomDecorator: (decorator: BlockDecorator, custom?: CustomConfig) => {
+    decorators: {
+        block: ((props: import("../../models").BlockDecoratorProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>)[];
+    };
+    blocks?: import("../../models").CustomItems | undefined;
+    subBlocks?: import("../../models").CustomItems | undefined;
+    headers?: import("../../models").CustomItems | undefined;
+    loadable?: import("../../models").LoadableConfig | undefined;
+};

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

@@ -0,0 +1,6 @@
+import _ from 'lodash';
+export const formatBlockName = (name) => _.capitalize(name).replace(/(block|-)/g, ' ');
+export const addCustomDecorator = (decorator, custom = {}) => {
+    const decorators = custom.decorators || {};
+    return Object.assign(Object.assign({}, custom), { decorators: Object.assign(Object.assign({}, decorators), { block: [...(decorators.block || []), decorator] }) });
+};

package/build/esm/models/constructor-items/blocks.d.ts

@@ -8,8 +8,6 @@ export declare enum BlockType {
     PromoFeaturesBlock = "promo-features-block",
     ExtendedFeaturesBlock = "extended-features-block",
     SliderBlock = "slider-block",
-    CalculatorBlock = "calculator-block",
-    ServiceDemoBlock = "service-demo-block",
     QuestionsBlock = "questions-block",
     BannerBlock = "banner-block",
     CompaniesBlock = "companies-block",
@@ -52,7 +50,6 @@ export interface LoadableProps {
 export interface LoadableChildren {
     loadable?: LoadableProps;
 }
-export type ServiceDemoProps = Animatable;
 export declare enum SliderBreakpointNames {
     Sm = "sm",
     Md = "md",
@@ -114,7 +111,6 @@ export interface HeaderBlockProps {
     breadcrumbs?: HeaderBreadCrumbsProps;
     status?: JSX.Element;
 }
-export type CalculatorProps = Animatable;
 export interface SimpleBlockProps extends Animatable, Childable {
     title: TitleBaseProps;
     description: string;
@@ -317,15 +313,9 @@ export interface ShareBlockProps {
 export type HeaderBlockModel = {
     type: BlockType.HeaderBlock;
 } & HeaderBlockProps;
-export type CalculatorBlockModel = {
-    type: BlockType.CalculatorBlock;
-} & CalculatorProps;
 export type SliderBlockModel = {
     type: BlockType.SliderBlock;
 } & SliderProps;
-export type ServiceDemoBlockModel = {
-    type: BlockType.ServiceDemoBlock;
-} & ServiceDemoProps;
 export type ExtendedFeaturesBlockModel = {
     type: BlockType.ExtendedFeaturesBlock;
 } & ExtendedFeaturesProps;
@@ -386,6 +376,6 @@ export type ContentLayoutBlockModel = {
 export type ShareBLockModel = {
     type: BlockType.ShareBlock;
 } & ShareBlockProps;
-type BlockModels = SliderBlockModel | ServiceDemoBlockModel | ExtendedFeaturesBlockModel | PromoFeaturesBlockModel | QuestionsBlockModel | CalculatorBlockModel | BannerBlockModel | CompaniesBlockModel | MediaBlockModel | MapBlockModel | InfoBlockModel | SecurityBlockModel | TableBlockModel | TabsBlockModel | SimpleBlockModel | LinkTableBlockModel | HeaderBlockModel | PreviewBlockModel | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel | ContentLayoutBlockModel | ShareBLockModel | FilterBlockModel;
+type BlockModels = SliderBlockModel | ExtendedFeaturesBlockModel | PromoFeaturesBlockModel | QuestionsBlockModel | BannerBlockModel | CompaniesBlockModel | MediaBlockModel | MapBlockModel | InfoBlockModel | SecurityBlockModel | TableBlockModel | TabsBlockModel | SimpleBlockModel | LinkTableBlockModel | HeaderBlockModel | PreviewBlockModel | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel | ContentLayoutBlockModel | ShareBLockModel | FilterBlockModel;
 export type Block = BlockModels & BlockBaseProps;
 export {};

package/build/esm/models/constructor-items/blocks.js

@@ -3,8 +3,6 @@ export var BlockType;
     BlockType["PromoFeaturesBlock"] = "promo-features-block";
     BlockType["ExtendedFeaturesBlock"] = "extended-features-block";
     BlockType["SliderBlock"] = "slider-block";
-    BlockType["CalculatorBlock"] = "calculator-block";
-    BlockType["ServiceDemoBlock"] = "service-demo-block";
     BlockType["QuestionsBlock"] = "questions-block";
     BlockType["BannerBlock"] = "banner-block";
     BlockType["CompaniesBlock"] = "companies-block";

package/build/esm/models/constructor-items/common.d.ts

@@ -99,6 +99,7 @@ export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, P
     style?: CSSProperties;
     imageClassName?: string;
     hide?: boolean;
+    qa?: string;
 }
 export interface MediaVideoProps extends AnalyticsEventsBase {
     src: string[];