@gravity-ui/page-constructor 5.14.3 → 5.14.4-alpha.1

package/build/esm/editor-v2/icons/Tablet.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import { a11yHiddenSvgProps } from '../../utils/svg';
+export const Tablet = (props) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "12", height: "14", viewBox: "0 0 12 14", fill: "none" }, a11yHiddenSvgProps, props),
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.5 3L10.5 11C10.5 11.8284 9.82843 12.5 9 12.5L3 12.5C2.17157 12.5 1.5 11.8284 1.5 11L1.5 3C1.5 2.17157 2.17157 1.5 3 1.5L9 1.5C9.82843 1.5 10.5 2.17157 10.5 3ZM9 -1.31134e-07C10.6569 -5.87108e-08 12 1.34315 12 3L12 11C12 12.6569 10.6569 14 9 14L3 14C1.34315 14 4.00426e-07 12.6569 4.72849e-07 11L8.2254e-07 3C8.94964e-07 1.34315 1.34315 -4.65826e-07 3 -3.93403e-07L9 -1.31134e-07ZM3.75 9.5C3.33579 9.5 3 9.83579 3 10.25C3 10.6642 3.33579 11 3.75 11L8.25 11C8.66421 11 9 10.6642 9 10.25C9 9.83579 8.66421 9.5 8.25 9.5L3.75 9.5Z", fill: "currentColor", fillOpacity: "0.85" })));

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

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

package/build/esm/editor-v2/index.js

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

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

@@ -0,0 +1,9 @@
+body {
+  --pc-editor-header-height: 48px;
+  --pc-editor-code-header-height: 36px;
+  --pc-editor-divider-width: 12px;
+  --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
+  --pc-editor-base-color: var(--g-color-base-brand);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
+}

package/build/esm/editor-v2/utils/code.d.ts

@@ -0,0 +1,6 @@
+export declare function parseCode(code: string): {
+    blocks: import("../../models").ConstructorBlock[];
+    menu?: import("../../models").Menu | undefined;
+    background?: import("../../models").ThemedMediaProps | undefined;
+    animated?: boolean | undefined;
+};

package/build/esm/editor-v2/utils/code.js

@@ -0,0 +1,6 @@
+import yaml from 'js-yaml';
+export function parseCode(code) {
+    var _a;
+    const pageContent = yaml.load(code);
+    return Object.assign(Object.assign({}, pageContent), { blocks: (_a = pageContent.blocks) === null || _a === void 0 ? void 0 : _a.filter(Boolean) });
+}

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

@@ -0,0 +1,17 @@
+import { ConstructorBlock } from '../../models';
+export declare function insert<T>(arr: Array<T>, index: number, newItem: T): T[];
+export declare function removeFromArray<T>(array: Array<T>, index: number): T[];
+export declare function swapArrayItems<T>(array: Array<T>, firstIndex: number, secondIndex: number): T[];
+export declare function reorderArrayItems<T>(array: Array<T>, index: number, destination: number): T[];
+export declare function duplicateArrayItem<T>(array: Array<T>, index: number): T[];
+export declare function insertByPath<T extends object>(object: T, path: string, value: any): T;
+export declare function splitPathAndIndex(path: string): {
+    path: string;
+    index: number;
+} | undefined;
+export declare function generateChildrenPathFromArray(indexes: number[]): string;
+export declare function modifyObjectByPath(blocks: ConstructorBlock[], arrayPath: number[], modifyCallback: (parentBlocks: ConstructorBlock[], index: number) => ConstructorBlock[]): ConstructorBlock[];
+export declare function isItemsNeighbours(arrayA: number[], arrayB: number[]): boolean;
+export declare function getDestinationShiftBeforeReorder(arrayInit: number[], arrayDest: number[]): number[];
+export declare function prepareShift(arrayInit: number[], arrayDest: number[]): number[];
+export declare const getUrlOrigin: (url: string) => string | undefined;

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

@@ -0,0 +1,134 @@
+import _ from 'lodash';
+export function insert(arr, index, newItem) {
+    return [...arr.slice(0, index), newItem, ...arr.slice(index)];
+}
+export function removeFromArray(array, index) {
+    return [...array.slice(0, index), ...array.slice(index + 1)];
+}
+export function swapArrayItems(array, firstIndex, secondIndex) {
+    const results = array.slice();
+    const firstItem = array[firstIndex];
+    results[firstIndex] = array[secondIndex];
+    results[secondIndex] = firstItem;
+    return results;
+}
+export function reorderArrayItems(array, index, destination) {
+    const min = Math.min(index, destination);
+    const max = Math.max(index, destination);
+    const firstOperationRemove = index < destination;
+    const result = [];
+    result.push(...array.slice(0, min));
+    if (!firstOperationRemove) {
+        result.push(array[index]);
+    }
+    result.push(...array.slice(firstOperationRemove ? min + 1 : min, max));
+    if (firstOperationRemove) {
+        result.push(array[index]);
+    }
+    result.push(...array.slice(firstOperationRemove ? max : max + 1, array.length));
+    return result;
+}
+export function duplicateArrayItem(array, index) {
+    const duplicatedItem = _.cloneDeep(array[index]);
+    return [...array.slice(0, index), duplicatedItem, ...array.slice(index)];
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function insertByPath(object, path, value) {
+    if (!path) {
+        return value;
+    }
+    return _.setWith(_.clone(object), path, value, _.clone);
+}
+/*
+ *  path: string;
+ *  Example:
+ *  1. blocks[0] => {path: blocks, index: 0}
+ *  2. blocks[2].children[10] => {path: blocks[2].children, index: 10}
+ **/
+export function splitPathAndIndex(path) {
+    // Match blocks[3], blocks[0].children[12], blocks[0], blocks[999999]
+    const bracketsRegExp = /(.*)\[(\d+)]$/g;
+    const regexpMatches = [...path.matchAll(bracketsRegExp)];
+    if (regexpMatches.length) {
+        return {
+            // blocks, blocks[0].children
+            path: regexpMatches[0][1],
+            // 3, 12, 0, 9999
+            index: Number(regexpMatches[0][2]),
+        };
+    }
+    // eslint-disable-next-line no-console
+    console.error('Non correct path for splitting');
+    return undefined;
+}
+/*
+ * [0, 4, 3] => [0].children[4].children[3]
+ * */
+export function generateChildrenPathFromArray(indexes) {
+    if (!indexes.length) {
+        return '';
+    }
+    let resultPath = `[${indexes[0]}]`;
+    if (indexes.length > 1) {
+        for (let i = 1; i < indexes.length; i++) {
+            resultPath += `.children[${indexes[i]}]`;
+        }
+    }
+    return resultPath;
+}
+export function modifyObjectByPath(blocks, arrayPath, modifyCallback) {
+    // [1]
+    // [4].children[3]
+    const insertPath = generateChildrenPathFromArray(arrayPath);
+    // path: ''                 index: 1
+    // path: '[4].children'     index: 3
+    const splitPath = splitPathAndIndex(insertPath);
+    if (splitPath) {
+        const { path: parentPath, index } = splitPath;
+        // Get Array that lies on path
+        const parentArray = parentPath ? _.get(blocks, parentPath) : blocks;
+        const value = Array.isArray(parentArray) ? parentArray : [];
+        // Modify Array
+        const newModifiedArray = modifyCallback(value, index);
+        // Return it back
+        return insertByPath(blocks, parentPath, newModifiedArray);
+    }
+    return blocks;
+}
+export function isItemsNeighbours(arrayA, arrayB) {
+    if (arrayA.length !== arrayB.length) {
+        return false;
+    }
+    for (let i = 0; i < arrayA.length - 1; i++) {
+        if (arrayA[i] !== arrayB[i]) {
+            return false;
+        }
+    }
+    return true;
+}
+export function getDestinationShiftBeforeReorder(arrayInit, arrayDest) {
+    if (arrayInit.length === arrayDest.length || arrayInit.length > arrayDest.length) {
+        return arrayDest;
+    }
+    for (let i = 0; i < arrayInit.length; i++) {
+        if (arrayInit[i] < arrayDest[i]) {
+            return prepareShift(arrayInit, arrayDest);
+        }
+    }
+    return arrayDest;
+}
+export function prepareShift(arrayInit, arrayDest) {
+    if (arrayInit.length === arrayDest.length || arrayInit.length > arrayDest.length) {
+        return arrayDest;
+    }
+    return arrayDest.map((pathIndex, index) => index === arrayInit.length - 1 ? pathIndex - 1 : pathIndex);
+}
+export const getUrlOrigin = (url) => {
+    try {
+        const urlObject = new URL(url);
+        return urlObject.origin;
+    }
+    catch (_a) {
+        return undefined;
+    }
+};

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

@@ -0,0 +1,14 @@
+import { StoreApi } from 'zustand';
+export declare function initializeStore<State, Methods>(initialState: State, methods: (set: StoreApi<State & Methods>['setState'], get: StoreApi<State & Methods>['getState']) => Methods): (overrideInitialState?: Partial<State>) => import("zustand").UseBoundStore<Omit<Omit<StoreApi<State & Methods>, "subscribe"> & {
+    subscribe: {
+        (listener: (selectedState: State & Methods, previousSelectedState: State & Methods) => void): () => void;
+        <U>(selector: (state: State & Methods) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
+            equalityFn?: ((a: U, b: U) => boolean) | undefined;
+            fireImmediately?: boolean | undefined;
+        } | undefined): () => void;
+    };
+}, "setState"> & {
+    setState<A extends string | {
+        type: string;
+    }>(partial: (State & Methods) | Partial<State & Methods> | ((state: State & Methods) => (State & Methods) | Partial<State & Methods>), replace?: boolean | undefined, action?: A | undefined): void;
+}>;

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

@@ -0,0 +1,5 @@
+import { create } from 'zustand';
+import { devtools, subscribeWithSelector } from 'zustand/middleware';
+export function initializeStore(initialState, methods) {
+    return (overrideInitialState) => create(subscribeWithSelector(devtools((set, get) => (Object.assign(Object.assign(Object.assign({}, initialState), overrideInitialState), methods(set, get))))));
+}

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

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

package/build/esm/grid/Grid/Grid.css

@@ -2,15 +2,11 @@
 .pc-Grid .container {
   max-width: calc(1232px + 8px * 2 + 40px * 2);
 }
-.pc-Grid .row {
-  margin-right: 0;
-  margin-left: 0;
-}
 .pc-Grid .pc-Grid .container-fluid,
 .pc-Grid .pc-Grid .container {
   padding: 0;
 }
-.pc-Grid .row .row {
+.pc-Grid .row {
   margin: 0 -8px;
 }
 .pc-Grid_debug .container,
@@ -81,7 +77,7 @@
   .pc-Grid .col-12 {
     padding: 0 8px;
   }
-  .pc-Grid .row .row {
+  .pc-Grid .row {
     margin: 0 -8px;
   }
 }

package/build/esm/hooks/useAnalytics.js

@@ -8,7 +8,7 @@ export const useAnalytics = (name = '', target) => {
     const defaultEvent = useMemo(() => name
         ? {
             name,
-            context,
+            context: String(context),
             type: PredefinedEventTypes.Default,
             target: target,
         }

package/build/esm/hooks/useEditorInitialize.d.ts

@@ -0,0 +1,7 @@
+import { PageContent } from '../models';
+interface UseEditorInitializeProps {
+    content: PageContent;
+    setContent: (content: PageContent) => void;
+}
+declare const useEditorInitialize: ({ setContent, content }: UseEditorInitializeProps) => void;
+export default useEditorInitialize;

package/build/esm/hooks/useEditorInitialize.js

@@ -0,0 +1,87 @@
+import { useCallback, useContext, useEffect } from 'react';
+import _ from 'lodash';
+import { ActionTypes } from '../common/types';
+import { blockDataMap } from '../constructor-items';
+import { EditorContext, useEditorStore } from '../context/editorContext';
+import { useMessageObserver, useMessageSender } from '../context/messagesContext';
+import { defaultComponentsConfigurationSchema } from '../schema';
+import { generateFromAJV } from '../utils/form-generator';
+const useEditorInitialize = ({ setContent, content }) => {
+    const { manipulateOverlayMode, isSelectActive } = useEditorStore();
+    const sendMessage = useMessageSender();
+    const { activeElement } = useContext(EditorContext);
+    const onResize = useCallback(() => {
+        const height = document.documentElement.getBoundingClientRect().height;
+        sendMessage({
+            type: ActionTypes.SetHeight,
+            payload: { height },
+        });
+        if (isSelectActive && activeElement) {
+            const rect = activeElement.getClientRects().item(0);
+            if (rect) {
+                sendMessage({
+                    type: ActionTypes.UpdateSelectedBlockRect,
+                    payload: {
+                        rect: rect,
+                    },
+                });
+            }
+        }
+    }, [activeElement, isSelectActive, sendMessage]);
+    useMessageObserver(ActionTypes.UpdateConfigs, ({ content: newContent }) => {
+        setContent(newContent);
+    });
+    useEffect(() => {
+        onResize();
+    }, [content, onResize]);
+    // Fires only once
+    useEffect(() => {
+        const height = document.documentElement.getBoundingClientRect().height;
+        sendMessage({
+            type: ActionTypes.IframeReady,
+            payload: { height },
+        }, { direction: 'editor' });
+        sendMessage({
+            type: ActionTypes.BlocksConfigs,
+            payload: {
+                blocks: Object.entries(blockDataMap).reduce((acc, [key, value]) => {
+                    acc.push({ type: key, schema: value.schema });
+                    return acc;
+                }, []),
+                subBlocks: [],
+                global: generateFromAJV(defaultComponentsConfigurationSchema),
+            },
+        });
+    }, [sendMessage]);
+    useEffect(() => {
+        const onMouseUp = (e) => {
+            if (manipulateOverlayMode === 'insert') {
+                e.preventDefault();
+                sendMessage({ type: ActionTypes.InsertModeDisable, payload: undefined });
+            }
+            if (manipulateOverlayMode === 'reorder') {
+                e.preventDefault();
+                sendMessage({ type: ActionTypes.ReorderModeDisable, payload: undefined });
+            }
+        };
+        const onMouseMove = (event) => {
+            if (manipulateOverlayMode) {
+                sendMessage({
+                    type: ActionTypes.OverlayModeOnMove,
+                    payload: { cursor: { x: event.clientX, y: event.clientY } },
+                });
+            }
+        };
+        const throttleOnMouseMove = _.throttle(onMouseMove, 1);
+        const throttleOnMouseUp = _.throttle(onMouseUp, 1);
+        document.addEventListener('mousemove', throttleOnMouseMove);
+        document.addEventListener('mouseup', throttleOnMouseUp);
+        window.addEventListener('resize', onResize);
+        return () => {
+            document.removeEventListener('mousemove', throttleOnMouseMove);
+            document.removeEventListener('mouseup', throttleOnMouseUp);
+            window.removeEventListener('resize', onResize);
+        };
+    }, [activeElement, manipulateOverlayMode, onResize, sendMessage]);
+};
+export default useEditorInitialize;

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

@@ -24,7 +24,8 @@ export declare enum BlockType {
     ShareBlock = "share-block",
     MapBlock = "map-block",
     FilterBlock = "filter-block",
-    FormBlock = "form-block"
+    FormBlock = "form-block",
+    TestEditorBlock = "test-editor-block"
 }
 export declare const BlockTypes: BlockType[];
 export declare const HeaderBlockTypes: BlockType[];

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

@@ -19,6 +19,7 @@ export var BlockType;
     BlockType["MapBlock"] = "map-block";
     BlockType["FilterBlock"] = "filter-block";
     BlockType["FormBlock"] = "form-block";
+    BlockType["TestEditorBlock"] = "test-editor-block";
 })(BlockType || (BlockType = {}));
 export const BlockTypes = Object.values(BlockType);
 export const HeaderBlockTypes = [BlockType.HeaderBlock, BlockType.HeaderSliderBlock];

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

@@ -117,7 +117,7 @@ export interface BannerCardProps {
     disableCompress?: boolean;
     color?: ThemeSupporting<string>;
     theme?: TextTheme;
-    button: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
+    button?: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
     mediaView?: MediaView;
 }
 export interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {

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

@@ -23,7 +23,10 @@ const NavigationItem = (_a) => {
             ? componentProperties
             : Object.assign(Object.assign({}, componentProperties), { menuLayout });
     }, [data, props, type, menuLayout]);
-    return (React.createElement(BlockIdContext.Provider, { value: ANALYTICS_ID },
+    return (
+    // TODO: fix any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    React.createElement(BlockIdContext.Provider, { value: ANALYTICS_ID },
         React.createElement("li", { className: b({ 'menu-layout': menuLayout }, className) },
             React.createElement(Component, Object.assign({}, componentProps, { className: b('content', { type }) })))));
 };

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

@@ -8,6 +8,9 @@ const ANALYTICS_ID = 'navigation';
 export const NavigationButton = (props) => {
     const { url, target, className } = props;
     const classes = b(null, className);
-    return (React.createElement(BlockIdContext.Provider, { value: ANALYTICS_ID }, target ? (React.createElement(Button, Object.assign({ className: classes }, props, { url: url }))) : (React.createElement(RouterLink, { href: url },
+    return (
+    // TODO: fix any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    React.createElement(BlockIdContext.Provider, { value: ANALYTICS_ID }, target ? (React.createElement(Button, Object.assign({ className: classes }, props, { url: url }))) : (React.createElement(RouterLink, { href: url },
         React.createElement(Button, Object.assign({}, props, { className: classes, url: url }))))));
 };

package/build/esm/navigation/containers/Layout/Layout.css

@@ -1,7 +1,6 @@
 .pc-layout {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
 }
 .pc-layout__content {
   display: flex;

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

@@ -119,7 +119,7 @@ export declare const cardSchemas: {
                 };
             } | undefined;
             controlPosition: {
-                type: string; /** @deprecated */
+                type: string;
                 enum: string[];
             };
             border: {

package/build/esm/schema/constants.js

@@ -1,6 +1,7 @@
+import { TestEditorBlockSchema } from '../blocks/TestEditorBlock';
 import { BannerBlock, BannerCard, CardLayoutBlock, CompaniesBlock, ContentLayoutBlock, ExtendedFeaturesBlock, FilterBlock, FormBlock, HeaderBlock, HeaderSliderBlock, IconsBlock, InfoBlock, MapBlock, MediaBlock, PromoFeaturesBlock, QuestionsBlock, ShareBlock, SliderBlock, TableBlock, TabsBlock, } from './validators/blocks';
 import { BackgroundCard, BasicCard, Divider, ImageCard, MediaCardBlock, PriceCardBlock, PriceDetailedBlock, Quote, } from './validators/sub-blocks';
-export const blockSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, Divider), ExtendedFeaturesBlock), PromoFeaturesBlock), SliderBlock), QuestionsBlock), HeaderBlock), BannerBlock), CompaniesBlock), MediaBlock), MapBlock), InfoBlock), TableBlock), TabsBlock), HeaderSliderBlock), IconsBlock), CardLayoutBlock), ContentLayoutBlock), ShareBlock), FilterBlock), FormBlock);
+export const blockSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, Divider), ExtendedFeaturesBlock), PromoFeaturesBlock), SliderBlock), QuestionsBlock), HeaderBlock), BannerBlock), CompaniesBlock), MediaBlock), MapBlock), InfoBlock), TableBlock), TabsBlock), HeaderSliderBlock), IconsBlock), CardLayoutBlock), ContentLayoutBlock), ShareBlock), FilterBlock), FormBlock), TestEditorBlockSchema);
 export const cardSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, MediaCardBlock), BannerCard), PriceDetailedBlock), BackgroundCard), Quote), BasicCard), PriceCardBlock), ImageCard);
 export const constructorBlockSchemaNames = [
     'divider',