@gravity-ui/page-constructor 3.0.0-alpha.5 → 4.0.0-beta.0

package/build/cjs/components/VideoBlock/VideoBlock.js

@@ -39,7 +39,7 @@ function getHeight(width) {
 }
 exports.getHeight = getHeight;
 const VideoBlock = (props) => {
-    const { stream, record, attributes, className, id, previewImg, playButton, height, fullScreen } = props;
+    const { stream, record, attributes, className, id, previewImg, playButton, height, fullscreen } = props;
     const src = getVideoSrc(stream, record);
     const ref = (0, react_1.useRef)(null);
     const iframeRef = (0, react_1.useRef)();
@@ -82,14 +82,14 @@ const VideoBlock = (props) => {
             ref.current.appendChild(iframe);
             iframeRef.current = iframe;
         }
-    }, [stream, record, norender, src, fullId, attributes, iframeRef, fullScreen]);
+    }, [stream, record, norender, src, fullId, attributes, iframeRef, fullscreen]);
     (0, react_1.useEffect)(() => {
         setHidePreview(false);
     }, [src, setHidePreview]);
     if (norender) {
         return null;
     }
-    return (react_1.default.createElement("div", { className: b(null, className), ref: ref, style: { height: currentHeight } }, previewImg && !hidePreview && !fullScreen && (react_1.default.createElement("div", { className: b('preview'), onClick: onPreviewClick },
+    return (react_1.default.createElement("div", { className: b(null, className), ref: ref, style: { height: currentHeight } }, previewImg && !hidePreview && !fullscreen && (react_1.default.createElement("div", { className: b('preview'), onClick: onPreviewClick },
         react_1.default.createElement(Image_1.default, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper') }),
         playButton || (react_1.default.createElement("button", { className: b('button') },
             react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayVideo, size: 24 })))))));

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

@@ -33,6 +33,6 @@ export { default as Author } from './Author/Author';
 export { default as RouterLink } from './RouterLink/RouterLink';
 export { default as HTML } from './HTML/HTML';
 export { default as MetaInfo } from './MetaInfo/MetaInfo';
-export { default as FullScreenMedia } from './FullscreenMedia/FullScreenMedia';
+export { default as FullscreenMedia } from './FullscreenMedia/FullscreenMedia';
 export type { RouterLinkProps } from './RouterLink/RouterLink';
 export type { ImageBaseProps } from './ImageBase/ImageBase';

package/build/cjs/components/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FullScreenMedia = exports.MetaInfo = exports.HTML = exports.RouterLink = exports.Author = exports.OverflowScroller = exports.Control = exports.YandexForm = exports.YFMWrapper = exports.VideoBlock = exports.UnpublishedLabel = exports.ToggleArrow = exports.Title = exports.Table = exports.ReactPlayer = exports.OutsideClick = exports.Media = exports.Links = exports.Link = exports.ImageBase = exports.Image = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.CardBase = exports.Button = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.AnimateBlock = exports.Anchor = void 0;
+exports.FullscreenMedia = exports.MetaInfo = exports.HTML = exports.RouterLink = exports.Author = exports.OverflowScroller = exports.Control = exports.YandexForm = exports.YFMWrapper = exports.VideoBlock = exports.UnpublishedLabel = exports.ToggleArrow = exports.Title = exports.Table = exports.ReactPlayer = exports.OutsideClick = exports.Media = exports.Links = exports.Link = exports.ImageBase = exports.Image = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.CardBase = exports.Button = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.AnimateBlock = exports.Anchor = void 0;
 var Anchor_1 = require("./Anchor/Anchor");
 Object.defineProperty(exports, "Anchor", { enumerable: true, get: function () { return __importDefault(Anchor_1).default; } });
 var AnimateBlock_1 = require("./AnimateBlock/AnimateBlock");
@@ -74,5 +74,5 @@ var HTML_1 = require("./HTML/HTML");
 Object.defineProperty(exports, "HTML", { enumerable: true, get: function () { return __importDefault(HTML_1).default; } });
 var MetaInfo_1 = require("./MetaInfo/MetaInfo");
 Object.defineProperty(exports, "MetaInfo", { enumerable: true, get: function () { return __importDefault(MetaInfo_1).default; } });
-var FullScreenMedia_1 = require("./FullscreenMedia/FullScreenMedia");
-Object.defineProperty(exports, "FullScreenMedia", { enumerable: true, get: function () { return __importDefault(FullScreenMedia_1).default; } });
+var FullscreenMedia_1 = require("./FullscreenMedia/FullscreenMedia");
+Object.defineProperty(exports, "FullscreenMedia", { enumerable: true, get: function () { return __importDefault(FullscreenMedia_1).default; } });

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

@@ -23,7 +23,7 @@ export declare const subBlockMap: {
     "price-detailed": (props: import("./models").PriceDetailedProps) => JSX.Element;
     "media-card": ({ border, ...mediaProps }: import("./models").MediaCardProps) => JSX.Element;
     "banner-card": (props: import("./models").BannerCardProps) => JSX.Element;
-    "layout-item": ({ content: { links, ...content }, metaInfo, media, border, fullScreen, className, }: import("./models").LayoutItemProps) => JSX.Element;
+    "layout-item": ({ content: { links, ...content }, metaInfo, media, border, fullscreen, className, }: import("./models").LayoutItemProps) => JSX.Element;
     "background-card": (props: import("./models").BackgroundCardProps) => JSX.Element;
     "basic-card": (props: import("./models").BasicCardProps) => JSX.Element;
     content: (props: import("./models").ContentBlockProps & import("./models").ClassNameProps) => JSX.Element;

package/build/cjs/containers/Loadable/Loadable.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { Block, CustomItem, FetchLoadableData, LoadableData, LoadableProps } from '../../models';
+import { ConstructorItem, CustomItem, FetchLoadableData, LoadableData, LoadableProps } from '../../models';
 export interface LoadableState {
     loading: boolean;
     error: boolean;
@@ -8,7 +8,7 @@ export interface LoadableState {
 export interface LoadableComponentsProps extends Omit<PropsWithChildren<LoadableProps>, 'source'> {
     Component: CustomItem;
     ChildComponent: CustomItem;
-    block: Block;
+    block: ConstructorItem;
     blockKey: string;
     fetch: FetchLoadableData;
 }

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

@@ -27,12 +27,14 @@ const Constructor = (props) => {
             itemMap: Object.assign(Object.assign(Object.assign({}, constructor_items_1.blockMap), constructor_items_1.subBlockMap), (0, utils_1.getCustomItems)(custom)),
             loadables: custom === null || custom === void 0 ? void 0 : custom.loadable,
             shouldRenderBlock,
+            customization: {
+                decorators: custom === null || custom === void 0 ? void 0 : custom.decorators,
+            },
         },
     }), [custom, shouldRenderBlock]);
     const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
-    const isHeaderBlock = (block) => context.headerBlockTypes.includes(block.type);
-    const header = blocks === null || blocks === void 0 ? void 0 : blocks.find(isHeaderBlock);
-    const restBlocks = blocks === null || blocks === void 0 ? void 0 : blocks.filter((block) => !isHeaderBlock(block));
+    const header = (0, utils_1.getHeaderBlock)(blocks, context.headerBlockTypes);
+    const restBlocks = (0, utils_1.getOrderedBlocks)(blocks, context.headerBlockTypes);
     const themedBackground = (0, utils_1.getThemedValue)(background, theme);
     return (react_1.default.createElement(innerContext_1.InnerContext.Provider, { value: context },
         react_1.default.createElement("div", { className: b() },

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

@@ -4,6 +4,7 @@ exports.ConstructorBlocks = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const blockIdContext_1 = require("../../../../context/blockIdContext");
 const innerContext_1 = require("../../../../context/innerContext");
 const utils_1 = require("../../../../utils");
 const ConstructorBlock_1 = require("../ConstructorBlock/ConstructorBlock");
@@ -34,9 +35,9 @@ const ConstructorBlocks = ({ items }) => {
             if ('children' in item && item.children) {
                 children = item.children.map(renderer.bind(null, blockId));
             }
-            itemElement = (react_1.default.createElement(ConstructorItem_1.ConstructorItem, { data: item, key: blockId, blockKey: blockId }, children));
+            itemElement = (react_1.default.createElement(ConstructorItem_1.ConstructorItem, { data: item, blockKey: blockId }, children));
         }
-        return blockTypes.includes(item.type) ? (react_1.default.createElement(ConstructorBlock_1.ConstructorBlock, { data: item, key: blockId }, itemElement)) : (itemElement);
+        return (react_1.default.createElement(blockIdContext_1.BlockIdContext.Provider, { value: blockId, key: blockId }, blockTypes.includes(item.type) ? (react_1.default.createElement(ConstructorBlock_1.ConstructorBlock, { data: item }, itemElement)) : (itemElement)));
     };
     return react_1.default.createElement(react_1.Fragment, null, items.map(renderer.bind(null, '')));
 };

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

@@ -3,5 +3,5 @@ export interface ConstructorItemProps {
     data: ConstructorItemType;
     blockKey: string;
 }
-export declare const ConstructorItem: ({ data, blockKey, children }: WithChildren<ConstructorItemProps>) => JSX.Element;
+export declare const ConstructorItem: ({ data, children }: WithChildren<ConstructorItemProps>) => JSX.Element;
 export declare const ConstructorHeader: ({ data, blockKey, }: Pick<ConstructorItemProps, 'data' | 'blockKey'>) => JSX.Element;

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

@@ -3,15 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConstructorHeader = exports.ConstructorItem = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const blockIdContext_1 = require("../../../../context/blockIdContext");
 const innerContext_1 = require("../../../../context/innerContext");
-const ConstructorItem = ({ data, blockKey, children }) => {
+const BlockDecoration_1 = require("../../../../customization/BlockDecoration");
+const ConstructorItem = ({ data, children }) => {
     const { itemMap } = (0, react_1.useContext)(innerContext_1.InnerContext);
     const { type } = data, rest = tslib_1.__rest(data, ["type"]);
     const Component = itemMap[type];
-    return (react_1.default.createElement(blockIdContext_1.BlockIdContext.Provider, { value: blockKey },
-        react_1.default.createElement(Component, Object.assign({}, rest), children)));
+    return react_1.default.createElement(Component, Object.assign({}, rest), children);
 };
 exports.ConstructorItem = ConstructorItem;
-const ConstructorHeader = ({ data, blockKey, }) => (react_1.default.createElement(exports.ConstructorItem, { data: data, key: data.type, blockKey: blockKey }));
+const ConstructorHeader = ({ data, blockKey, }) => (react_1.default.createElement(BlockDecoration_1.BlockDecoration, { id: data.type },
+    react_1.default.createElement(exports.ConstructorItem, { data: data, key: data.type, blockKey: blockKey })));
 exports.ConstructorHeader = ConstructorHeader;

package/build/cjs/context/innerContext/InnerContext.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ItemMap } from '../../containers/PageConstructor/PageConstructor';
-import { LoadableConfig, ShouldRenderBlock } from '../../models';
+import { CustomConfig, LoadableConfig, ShouldRenderBlock } from '../../models';
 export interface InnerContextType {
     blockTypes: string[];
     subBlockTypes: string[];
@@ -8,5 +8,6 @@ export interface InnerContextType {
     itemMap: ItemMap;
     loadables?: LoadableConfig;
     shouldRenderBlock?: ShouldRenderBlock;
+    customization?: Pick<CustomConfig, 'decorators'>;
 }
 export declare const InnerContext: React.Context<InnerContextType>;

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

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+import { BlockDecorationProps } from '../models';
+export declare const BlockDecoration: (props: PropsWithChildren<BlockDecorationProps>) => JSX.Element;

package/build/cjs/customization/BlockDecoration.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlockDecoration = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const blockIdContext_1 = require("../context/blockIdContext");
+const innerContext_1 = require("../context/innerContext");
+const utils_1 = require("../utils");
+const BlockDecoration = (props) => {
+    var _a, _b;
+    const blockContenxtId = (0, utils_1.getBlockIndexFromId)((0, react_1.useContext)(blockIdContext_1.BlockIdContext));
+    const { headerBlockTypes } = (0, react_1.useContext)(innerContext_1.InnerContext);
+    const blockId = props.id || blockContenxtId;
+    const isHeader = Boolean(props.id && headerBlockTypes.includes(props.id));
+    const block = react_1.default.createElement(react_1.Fragment, null, props.children);
+    const blockDecorators = (_b = (_a = (0, react_1.useContext)(innerContext_1.InnerContext).customization) === null || _a === void 0 ? void 0 : _a.decorators) === null || _b === void 0 ? void 0 : _b.block;
+    if (!blockDecorators) {
+        return block;
+    }
+    return blockDecorators.reduce((children, decorator) => (react_1.default.createElement(react_1.Fragment, null, decorator({ children, id: blockId, isHeader }))), block);
+};
+exports.BlockDecoration = BlockDecoration;

package/build/cjs/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/cjs/editor/Components/AddBlock/AddBlock.d.ts

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

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const constructor_items_1 = require("../../../constructor-items");
+const utils_1 = require("../../../utils");
+const data_1 = tslib_1.__importDefault(require("../../data"));
+const b = (0, utils_1.block)('add-block');
+const sortedBlockNames = Object.keys(constructor_items_1.blockMap).sort();
+const AddBlock = ({ onAdd }) => {
+    const [isOpened, setIsOpened] = (0, react_1.useState)(false);
+    const [search, setSearch] = (0, react_1.useState)('');
+    const ref = (0, react_1.useRef)(null);
+    const blocks = (0, react_1.useMemo)(() => sortedBlockNames.filter((blockName) => data_1.default[blockName].meta.title
+        .toLocaleLowerCase()
+        .startsWith(search.toLocaleLowerCase())), [search]);
+    return (react_1.default.createElement("div", { className: b(), ref: ref },
+        react_1.default.createElement("button", { className: b('button'), onClick: () => {
+                setIsOpened(!isOpened);
+                setSearch('');
+            } },
+            react_1.default.createElement(icons_1.Plus, { className: b('icon') })),
+        isOpened && (react_1.default.createElement(uikit_1.Popup, { anchorRef: ref, open: isOpened, className: b('popup'), placement: "top", offset: [0, 24], onOutsideClick: () => setIsOpened(false) },
+            react_1.default.createElement("div", { className: b('search') },
+                react_1.default.createElement(uikit_1.TextInput, { placeholder: "search", type: "text", value: search, size: "l", onUpdate: (value) => setSearch(value) })),
+            react_1.default.createElement("div", { className: b('blocks') }, blocks.map((blockName) => {
+                var _a;
+                const blockData = data_1.default[blockName];
+                const Preview = blockData === null || blockData === void 0 ? void 0 : blockData.preview;
+                return (react_1.default.createElement("div", { key: blockName, className: b('block'), onClick: () => {
+                        onAdd(blockData === null || blockData === void 0 ? void 0 : blockData.template);
+                        setIsOpened(false);
+                    } },
+                    react_1.default.createElement("div", { className: b('preview') },
+                        react_1.default.createElement(Preview, null)),
+                    react_1.default.createElement("div", { className: b('info') },
+                        react_1.default.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_1.default.createElement("p", { className: b('description') }, blockData.meta.description)))));
+            }))))));
+};
+exports.default = AddBlock;

package/build/cjs/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/cjs/editor/Components/EditBlock/EditBlock.d.ts

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

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('edit-block');
+const EditBlock = ({ id, isHeader, activeBlockId, onDelete, onSelect, onCopy, onOrderChange, children, orderedBlocksCount, }) => {
+    const ref = (0, react_1.useRef)(null);
+    const controlsActive = activeBlockId === id;
+    (0, react_1.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_1.default.createElement("div", { className: b(), onClick: () => {
+            onSelect(id);
+        }, ref: ref },
+        react_1.default.createElement("div", { className: b('controls', { active: controlsActive, isHeader }) }, controlsActive && (react_1.default.createElement("div", { className: b('controls-content'), onClick: (e) => e.stopPropagation() },
+            typeof id === 'number' && (react_1.default.createElement(react_1.Fragment, null,
+                id > 0 && (react_1.default.createElement("div", { className: b('control'), onClick: () => onOrderChange(id, id - 1) },
+                    react_1.default.createElement(icons_1.ChevronUp, null))),
+                id < orderedBlocksCount - 1 && (react_1.default.createElement("div", { className: b('control'), onClick: () => onOrderChange(id, id + 1) },
+                    react_1.default.createElement(icons_1.ChevronDown, null))),
+                react_1.default.createElement("div", { className: b('control'), onClick: () => onCopy(id) },
+                    react_1.default.createElement(icons_1.Copy, null)))),
+            react_1.default.createElement("div", { className: b('control'), onClick: () => onDelete(id) },
+                react_1.default.createElement(icons_1.TrashBin, null))))),
+        children));
+};
+exports.default = react_1.default.memo(EditBlock);

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

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

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Editor = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const AddBlock_1 = tslib_1.__importDefault(require("../Components/AddBlock/AddBlock"));
+const EditBlock_1 = tslib_1.__importDefault(require("../Components/EditBlock/EditBlock"));
+const store_1 = require("../store");
+const utils_1 = require("../utils");
+const Editor = (_a) => {
+    var { children } = _a, rest = tslib_1.__rest(_a, ["children"]);
+    const { content, onAdd, editControlsProps } = (0, store_1.useEditorState)(rest);
+    const constructorProps = (0, react_1.useMemo)(() => {
+        const editControlsDecorator = (props) => (react_1.default.createElement(EditBlock_1.default, Object.assign({}, props, editControlsProps)));
+        return {
+            content,
+            custom: (0, utils_1.addCustomDecorator)(editControlsDecorator, rest.custom),
+        };
+    }, [editControlsProps, content, rest.custom]);
+    return (react_1.default.createElement("div", null,
+        children(constructorProps),
+        react_1.default.createElement(AddBlock_1.default, { onAdd: onAdd })));
+};
+exports.Editor = Editor;

package/build/cjs/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/cjs/editor/data/index.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const models_1 = require("../../models");
+const utils_1 = require("../utils");
+const default_preview_1 = tslib_1.__importDefault(require("./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 default_preview_1.default;
+    }
+};
+const EditorBlocksData = Object.values(models_1.BlockType).reduce((previewData, blockType) => {
+    const template = getBlockTemplate(blockType);
+    const preview = getBlockPreview(blockType);
+    template.meta = template.meta || {};
+    template.meta.title = template.meta.title || (0, utils_1.formatBlockName)(blockType);
+    /* eslint-disable no-param-reassign */
+    previewData[blockType] = Object.assign(Object.assign({}, template), { preview });
+    return previewData;
+}, {});
+exports.default = EditorBlocksData;

package/build/cjs/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/cjs/editor/data/previews/default-preview.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const svg_1 = require("../../../utils/svg");
+const DefaultPreview = (props) => (react_1.default.createElement("svg", Object.assign({ width: "150", height: "76", viewBox: "0 0 150 76", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, svg_1.a11yHiddenSvgProps, props),
+    react_1.default.createElement("rect", { x: "1", y: "1", width: "148", height: "74", rx: "8", fill: "white" }),
+    react_1.default.createElement("rect", { x: "14.7674", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "#E7E7E7" }),
+    react_1.default.createElement("rect", { x: "43.1628", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "white" }),
+    react_1.default.createElement("rect", { x: "14.7674", y: "31.9767", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "#E7E7E7" }),
+    react_1.default.createElement("rect", { x: "14.7675", y: "37.1395", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "#E7E7E7" }),
+    react_1.default.createElement("rect", { x: "14.7675", y: "42.3023", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "#E7E7E7" }),
+    react_1.default.createElement("rect", { x: "14.7674", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "#E7E7E7" }),
+    react_1.default.createElement("rect", { x: "33.6977", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "white" }),
+    react_1.default.createElement("rect", { x: "52.6279", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "white" }),
+    react_1.default.createElement("rect", { x: "78.4418", y: "9.60464", width: "56.7907", height: "56.7907", rx: "5.16279", fill: "#A967FF" }),
+    react_1.default.createElement("rect", { x: "0.5", y: "0.5", width: "149", height: "75", rx: "8.5", stroke: "black", strokeOpacity: "0.1" })));
+exports.default = DefaultPreview;

package/build/cjs/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/cjs/editor/data/previews/header-block.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const svg_1 = require("../../../utils/svg");
+const Header = (props) => (react_1.default.createElement("svg", Object.assign({ width: "150", height: "76", viewBox: "0 0 150 76", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, svg_1.a11yHiddenSvgProps, props),
+    react_1.default.createElement("rect", { x: "1", y: "1", width: "148", height: "74", rx: "8", fill: "white" }),
+    react_1.default.createElement("rect", { x: "4.44174", y: "9.60464", width: "141.116", height: "56.7907", rx: "5.16279", fill: "#A967FF" }),
+    react_1.default.createElement("rect", { x: "14.7674", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "white" }),
+    react_1.default.createElement("rect", { x: "43.1628", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "#A967FF" }),
+    react_1.default.createElement("rect", { x: "14.7674", y: "31.9767", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "white" }),
+    react_1.default.createElement("rect", { x: "14.7674", y: "37.1395", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "white" }),
+    react_1.default.createElement("rect", { x: "14.7674", y: "42.3023", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "white" }),
+    react_1.default.createElement("rect", { x: "14.7674", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "white" }),
+    react_1.default.createElement("rect", { x: "33.6976", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "#A967FF" }),
+    react_1.default.createElement("rect", { x: "52.6279", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "#A967FF" }),
+    react_1.default.createElement("rect", { x: "78.4418", y: "9.60464", width: "56.7907", height: "56.7907", rx: "5.16279", fill: "#A967FF" }),
+    react_1.default.createElement("rect", { x: "0.5", y: "0.5", width: "149", height: "75", rx: "8.5", stroke: "black", strokeOpacity: "0.1" })));
+exports.default = Header;

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

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

package/build/cjs/editor/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Editor = void 0;
+const tslib_1 = require("tslib");
+var Editor_1 = require("./Containers/Editor");
+Object.defineProperty(exports, "Editor", { enumerable: true, get: function () { return Editor_1.Editor; } });
+tslib_1.__exportStar(require("./types"), exports);

package/build/cjs/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/cjs/editor/store/index.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEditorState = void 0;
+const react_1 = require("react");
+const models_1 = require("../../models");
+const utils_1 = require("../../utils");
+const reducer_1 = require("./reducer");
+const utils_2 = require("./utils");
+function useEditorState({ content: intialContent, custom }) {
+    const headerBlockTypes = (0, react_1.useMemo)(() => [...models_1.HeaderBlockTypes, ...(0, utils_1.getCustomHeaderTypes)(custom)], [custom]);
+    const reducer = (0, react_1.useMemo)(() => (0, reducer_1.getReducer)(headerBlockTypes), [headerBlockTypes]);
+    const [{ activeBlockId, content, orderedBlocksCount }, dispatch] = (0, react_1.useReducer)(reducer, {
+        activeBlockId: 0,
+        orderedBlocksCount: (0, utils_1.getOrderedBlocks)(intialContent.blocks, headerBlockTypes).length,
+        content: (0, utils_2.addEditorProps)(intialContent),
+    });
+    return (0, react_1.useMemo)(() => {
+        return {
+            content,
+            editControlsProps: {
+                activeBlockId,
+                orderedBlocksCount,
+                onDelete: (id) => dispatch({ type: reducer_1.DELETE_BLOCK, payload: id }),
+                onSelect: (id) => dispatch({ type: reducer_1.SELECT_BLOCK, payload: id }),
+                onCopy: (index) => dispatch({ type: reducer_1.COPY_BLOCK, payload: index }),
+                onOrderChange: (oldIndex, newIndex) => dispatch({ type: reducer_1.ORDER_BLOCK, payload: { oldIndex, newIndex } }),
+            },
+            onAdd: (block) => dispatch({ type: reducer_1.ADD_BLOCK, payload: block }),
+        };
+    }, [content, activeBlockId, orderedBlocksCount]);
+}
+exports.useEditorState = useEditorState;