@gravity-ui/page-constructor 3.2.0 → 3.4.0

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

@@ -1,28 +1,79 @@
 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 { getCustomHeaderTypes, getHeaderBlock } from '../../utils';
+import { EditBlockControls } from '../components/EditBlock/EditBlock';
+import { ViewModeItem } from '../types';
+import { ADD_BLOCK, COPY_BLOCK, DELETE_BLOCK, ORDER_BLOCK, SELECT_BLOCK, UPDATE_CONTENT, UPDATE_VIEW_MODE, reducer, } 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,
+    const [{ activeBlockIndex, content, errorBoundaryState, viewMode }, dispatch] = useReducer(reducer, {
+        activeBlockIndex: 0,
+        errorBoundaryState: 0,
         content: addEditorProps(intialContent),
+        viewMode: ViewModeItem.Edititng,
     });
     return useMemo(() => {
+        const headerBlockTypes = [...HeaderBlockTypes, ...getCustomHeaderTypes(custom)];
+        const contentHasHeader = Boolean(getHeaderBlock(content.blocks, headerBlockTypes));
+        const checkIsHeader = (type) => headerBlockTypes.includes(type);
+        const onAdd = (block) => {
+            const isHeader = checkIsHeader(block.type);
+            if (contentHasHeader && isHeader) {
+                //TODO: add warning that it should be only one header block
+                return;
+            }
+            // eslint-disable-next-line no-nested-ternary
+            const index = isHeader
+                ? 0
+                : activeBlockIndex === -1
+                    ? content.blocks.length
+                    : activeBlockIndex + 1;
+            dispatch({ type: ADD_BLOCK, payload: { block, index } });
+        };
+        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 orderedBlocksStartIndex = contentHasHeader ? 1 : 0;
+            const isHeader = checkIsHeader(type);
+            const index = isHeader ? 0 : relativeIndex + orderedBlocksStartIndex;
+            const isActive = activeBlockIndex === index;
+            const actions = {
+                [EditBlockControls.Delete]: () => dispatch({ type: DELETE_BLOCK, payload: index }),
+            };
+            if (!isHeader) {
+                actions[EditBlockControls.Copy] = () => dispatch({ type: COPY_BLOCK, payload: index });
+                if (index > orderedBlocksStartIndex) {
+                    actions[EditBlockControls.Up] = () => dispatch({
+                        type: ORDER_BLOCK,
+                        payload: { oldIndex: index, newIndex: index - 1 },
+                    });
+                }
+                if (index < content.blocks.length - 1) {
+                    actions[EditBlockControls.Down] = () => dispatch({
+                        type: ORDER_BLOCK,
+                        payload: { oldIndex: index, newIndex: index + 1 },
+                    });
+                }
+            }
+            return {
+                children,
+                isHeader,
+                isActive,
+                actions,
+                onSelect: () => onSelect(index),
+            };
+        };
         return {
+            activeBlockIndex,
             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 }),
+            errorBoundaryState,
+            viewMode,
+            injectEditBlockProps,
+            onAdd,
+            onSelect,
+            onContentUpdate,
+            onViewModeUpdate,
         };
-    }, [content, activeBlockId, orderedBlocksCount]);
+    }, [content, activeBlockIndex, errorBoundaryState, custom, viewMode]);
 }

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

@@ -1,28 +1,35 @@
-import { Block, CustomConfig, PageContent } from '../../models';
+import { Block, PageContent } from '../../models';
+import { ViewModeItem } from '../types';
 export type EditorBlockId = number | string;
 interface EditorState {
     content: PageContent;
-    activeBlockId: EditorBlockId;
-    orderedBlocksCount: number;
-    custom?: CustomConfig;
+    activeBlockIndex: number;
+    errorBoundaryState: number;
+    viewMode: ViewModeItem;
 }
 interface OrderBlockParams {
     oldIndex: number;
     newIndex: number;
 }
+interface AddBlockParams {
+    block: Block;
+    index: 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";
+export declare const UPDATE_CONTENT = "UPDATE_CONTENT";
+export declare const UPDATE_VIEW_MODE = "UPDATE_VIEW_MODE";
 interface SelectBlock {
     type: typeof SELECT_BLOCK;
-    payload: EditorBlockId;
+    payload: number;
 }
 interface DeleteBlock {
     type: typeof DELETE_BLOCK;
-    payload: EditorBlockId;
+    payload: number;
 }
 interface CopyBlock {
     type: typeof COPY_BLOCK;
@@ -30,12 +37,20 @@ interface CopyBlock {
 }
 interface AddBlock {
     type: typeof ADD_BLOCK;
-    payload: Block;
+    payload: AddBlockParams;
 }
 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;
+interface UpdateContent {
+    type: typeof UPDATE_CONTENT;
+    payload: PageContent;
+}
+interface UpdateViewMode {
+    type: typeof UPDATE_VIEW_MODE;
+    payload: ViewModeItem;
+}
+export type EditorAction = SelectBlock | DeleteBlock | CopyBlock | AddBlock | OrderBlock | UpdateContent | UpdateViewMode;
+export declare const reducer: (state: EditorState, action: EditorAction) => EditorState;
 export {};

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

@@ -1,5 +1,4 @@
-import { getHeaderBlock, getOrderedBlocks } from '../../utils';
-import { addBlock, changeBlocksOrder, duplicateBlock, getNewBlockIndex } from './utils';
+import { addBlock, changeBlocksOrder, duplicateBlock, getErrorBoundaryState } from './utils';
 // actions
 export const SELECT_BLOCK = 'SELECT_BLOCK';
 export const DELETE_BLOCK = 'DELETE_BLOCK';
@@ -7,48 +6,35 @@ export const COPY_BLOCK = 'COPY_BLOCK';
 export const ADD_BLOCK = 'ADD_BLOCK';
 export const SET_REGION = 'SET_REGION';
 export const ORDER_BLOCK = 'ORDER_BLOCK';
+export const UPDATE_CONTENT = 'UPDATE_CONTENT';
+export const UPDATE_VIEW_MODE = 'UPDATE_VIEW_MODE';
 // reducer
-export const getReducer = (headerBlockTypes) => (state, action) => {
+export const reducer = (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 }));
+    const getNewState = (blocks, activeBlockIndex) => (Object.assign(Object.assign({}, state), { content: Object.assign(Object.assign({}, content), { blocks }), activeBlockIndex }));
     switch (action.type) {
+        case UPDATE_CONTENT:
+            return Object.assign(Object.assign({}, state), { content: action.payload, errorBoundaryState: getErrorBoundaryState(state.errorBoundaryState) });
         case SELECT_BLOCK:
-            return getNewState(content.blocks, action.payload);
+            return Object.assign(Object.assign({}, state), { activeBlockIndex: 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);
+            return getNewState(content.blocks.filter((_block, index) => index !== blockId), -1);
         }
         case COPY_BLOCK: {
             const index = action.payload;
-            return getNewState(withHeader(duplicateBlock(orderedBlocks, index)), index + 1);
+            return getNewState(duplicateBlock(content.blocks, 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;
+            const { block, index } = action.payload;
+            return getNewState(addBlock(content.blocks, block, index), index);
         }
         case ORDER_BLOCK: {
             const { oldIndex, newIndex } = action.payload;
-            return getNewState(withHeader(changeBlocksOrder(orderedBlocks, oldIndex, newIndex)), newIndex);
+            return getNewState(changeBlocksOrder(content.blocks, oldIndex, newIndex), newIndex);
         }
+        case UPDATE_VIEW_MODE:
+            return Object.assign(Object.assign({}, state), { viewMode: action.payload });
         default:
             return state;
     }

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

@@ -10,3 +10,4 @@ export declare const addEditorProps: (content: PageContent) => {
     menu?: import("../../models").Menu | undefined;
     background?: import("../../models").ThemedMediaProps | undefined;
 };
+export declare const getErrorBoundaryState: (prevState: number) => number;

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

@@ -24,3 +24,4 @@ export const addBlock = (array, block, index) => {
 export const addEditorProps = (content) => {
     return Object.assign(Object.assign({}, content), { animated: false });
 };
+export const getErrorBoundaryState = (prevState) => prevState === Number.MAX_SAFE_INTEGER ? 0 : prevState + 1;

package/build/esm/editor/styles/root.css

@@ -0,0 +1,5 @@
+:root {
+  --editor-header-height: 48px;
+  --editor-divider-width: 12px;
+  --editor-left-column-width: calc(400px + var(--editor-divider-width));
+}

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

@@ -1,17 +1,23 @@
 /// <reference types="react" />
 import { PageConstructorProps } from '../../containers/PageConstructor';
-import { BlockDecoratorProps, PageData } from '../../models';
+import { BlockDecorationProps, PageContent } from '../../models';
+import { SchemaCustomConfig } from '../../schema';
+import { EditBlockActions } from '../components/EditBlock/EditBlock';
 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;
+    onChange?: (data: PageContent) => void;
+    customSchema?: SchemaCustomConfig;
 }
 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;
+    isActive?: boolean;
+    onSelect: () => void;
+    actions: EditBlockActions;
+}
+export interface EditBlockProps extends EditBlockEditorProps, BlockDecorationProps {
+    isHeader?: boolean;
+}
+export declare enum ViewModeItem {
+    Edititng = "editing",
+    View = "view"
 }
-export type EditBlockProps = EditBlockEditorProps & BlockDecoratorProps;

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

@@ -1 +1,5 @@
-export {};
+export var ViewModeItem;
+(function (ViewModeItem) {
+    ViewModeItem["Edititng"] = "editing";
+    ViewModeItem["View"] = "view";
+})(ViewModeItem || (ViewModeItem = {}));

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

@@ -1,11 +1,12 @@
-import { BlockDecorator, CustomConfig } from '../../models';
+import { BlockDecorationProps, BlockDecorator, CustomConfig } from '../../models';
 export declare const formatBlockName: (name: string) => string;
-export declare const addCustomDecorator: (decorator: BlockDecorator, custom?: CustomConfig) => {
+export declare const addCustomDecorator: (decorators: BlockDecorator[], custom?: CustomConfig) => {
     decorators: {
-        block: ((props: import("../../models").BlockDecoratorProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>)[];
+        block: ((props: BlockDecorationProps) => 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;
 };
+export declare const getBlockId: ({ index, type }: BlockDecorationProps) => string;

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

@@ -1,6 +1,7 @@
 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] }) });
+export const addCustomDecorator = (decorators, custom = {}) => {
+    const customDecorators = custom.decorators || {};
+    return Object.assign(Object.assign({}, custom), { decorators: Object.assign(Object.assign({}, customDecorators), { block: [...(customDecorators.block || []), ...decorators] }) });
 };
+export const getBlockId = ({ index, type }) => `${type}${index === undefined ? '' : `-${index}`}`;

package/build/esm/grid/Col/Col.d.ts

@@ -7,4 +7,4 @@ export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivE
     dataQa?: string;
     children?: React.ReactNode;
 }
-export declare const Col: React.ForwardRefExoticComponent<Pick<WithChildren<GridColumnProps>, "style" | "children" | "className" | "reset" | "visible" | "sizes" | "offsets" | "orders" | "hidden" | "alignSelf" | "justifyContent" | "dataQa"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Col: React.ForwardRefExoticComponent<Pick<WithChildren<GridColumnProps>, "style" | "children" | "className" | "visible" | "reset" | "sizes" | "offsets" | "orders" | "hidden" | "alignSelf" | "justifyContent" | "dataQa"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -30,6 +30,7 @@ export interface Childable {
     children?: SubBlock[];
 }
 export interface BlockBaseProps {
+    type: BlockType;
     index?: number;
     anchor?: AnchorProps;
     visible?: GridColumnSize;
@@ -244,14 +245,18 @@ export interface IconsBlockProps {
         src: string;
     }[];
 }
-export interface ContentLayoutBlockProps {
-    properties?: {
-        size?: ContentSize;
-        background?: BackgroundImageProps;
-        centered?: boolean;
-        theme?: ContentTheme;
-        textWidth?: ContentTextSize;
-    };
+interface ContentLayoutBlockParams {
+    size?: ContentSize;
+    background?: BackgroundImageProps;
+    centered?: boolean;
+    theme?: ContentTheme;
+    textWidth?: ContentTextSize;
+}
+export interface ContentLayoutBlockProps extends ContentLayoutBlockParams {
+    /**
+     * @deprecated Use params on top level instead
+     */
+    properties?: ContentLayoutBlockParams;
     textContent: ContentBlockProps;
     fileContent?: FileLinkProps[];
 }

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

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { Animatable, Block, BlockDecoratorProps, ConstructorItem, ThemedMediaProps, WithChildren } from './';
+import { Animatable, Block, BlockDecorationProps, ConstructorItem, ThemedMediaProps, WithChildren } from './';
 export interface PageData {
     content: PageContent;
 }
@@ -41,7 +41,7 @@ export interface CustomConfig {
     headers?: CustomItems;
     loadable?: LoadableConfig;
     decorators?: {
-        block?: ((props: BlockDecoratorProps) => React.ReactElement)[];
+        block?: ((props: BlockDecorationProps) => React.ReactElement)[];
     };
 }
 export {};

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

@@ -1,9 +1,4 @@
 import { PropsWithChildren } from 'react';
-export interface BlockDecorationProps extends PropsWithChildren {
-    id: string | number;
-}
-export interface BlockDecoratorProps extends PropsWithChildren {
-    id: string | number;
-    isHeader?: boolean;
-}
-export type BlockDecorator = (props: BlockDecoratorProps) => React.ReactElement;
+import { BlockBaseProps } from './constructor-items';
+export type BlockDecorationProps = Pick<BlockBaseProps, 'index' | 'type'> & PropsWithChildren;
+export type BlockDecorator = (props: BlockDecorationProps) => React.ReactElement;

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

@@ -14,6 +14,7 @@ export declare const LogoProps: {
             } | {
                 type: string;
                 pattern: string;
+                optionName: string;
             })[];
         };
         text: {