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

package/build/esm/context/editorContext/store.js

@@ -0,0 +1,36 @@
+import { ActionTypes } from '../../types/actions';
+import { initializeStore } from '../../utils/store';
+export const createEditorStore = initializeStore({
+    manipulateOverlayMode: false,
+    isSelectActive: false,
+    initialized: false,
+}, (set, _get) => ({
+    reducer: (action) => {
+        switch (action.type) {
+            case ActionTypes.EditorReady: {
+                set((state) => (Object.assign(Object.assign({}, state), { initialized: true })));
+                break;
+            }
+            case ActionTypes.ReorderModeEnable: {
+                set((state) => (Object.assign(Object.assign({}, state), { manipulateOverlayMode: 'reorder' })));
+                break;
+            }
+            case ActionTypes.ReorderModeDisable: {
+                set((state) => (Object.assign(Object.assign({}, state), { manipulateOverlayMode: false })));
+                break;
+            }
+            case ActionTypes.InsertModeEnable: {
+                set((state) => (Object.assign(Object.assign({}, state), { manipulateOverlayMode: 'insert' })));
+                break;
+            }
+            case ActionTypes.InsertModeDisable: {
+                set((state) => (Object.assign(Object.assign({}, state), { manipulateOverlayMode: false })));
+                break;
+            }
+            case ActionTypes.SelectBlock: {
+                set((state) => (Object.assign(Object.assign({}, state), { isSelectActive: true })));
+                break;
+            }
+        }
+    },
+}));

package/build/esm/context/messagesContext/hooks/useMessageObserver.d.ts

@@ -0,0 +1,4 @@
+import { DependencyList } from 'react';
+import { Action } from '../../../types/actions';
+export declare const useMessageObserver: <A extends Action>(type: A["type"], callback: (payload: A["payload"]) => void, deps?: DependencyList) => void;
+export default useMessageObserver;

package/build/esm/context/messagesContext/hooks/useMessageObserver.js

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+import { useMessagesStore } from './useMessagesStore';
+export const useMessageObserver = (type, callback, deps = []) => {
+    const { subscribe, unsubscribe } = useMessagesStore();
+    useEffect(() => {
+        subscribe(type, callback);
+        return () => {
+            unsubscribe(type, callback);
+        };
+    }, deps); // eslint-disable-line react-hooks/exhaustive-deps
+};
+export default useMessageObserver;

package/build/esm/context/messagesContext/hooks/useMessageSender.d.ts

@@ -0,0 +1,2 @@
+export declare const useMessageSender: () => (action: import("../../../types/actions").Action, options?: import("../types").SendOptions | undefined) => void;
+export default useMessageSender;

package/build/esm/context/messagesContext/hooks/useMessageSender.js

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+import { PostMessageContext } from '../messagesContext';
+export const useMessageSender = () => {
+    const { sendMessage } = useContext(PostMessageContext);
+    return sendMessage;
+};
+export default useMessageSender;

package/build/esm/context/messagesContext/hooks/useMessagesStore.d.ts

@@ -0,0 +1,2 @@
+export declare const useMessagesStore: () => import("../store").MessagesStore;
+export default useMessagesStore;

package/build/esm/context/messagesContext/hooks/useMessagesStore.js

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { useStore } from 'zustand';
+import { PostMessageContext } from '../messagesContext';
+export const useMessagesStore = () => {
+    const { state } = useContext(PostMessageContext);
+    if (!state) {
+        throw new Error('Missing PostMessageContext');
+    }
+    return useStore(state);
+};
+export default useMessagesStore;

package/build/esm/context/messagesContext/index.d.ts

@@ -0,0 +1,5 @@
+export * from './messagesContext';
+export * from './messagesProvider';
+export * from './hooks/useMessageSender';
+export * from './hooks/useMessageObserver';
+export * from './hooks/useMessagesStore';

package/build/esm/context/messagesContext/index.js

@@ -0,0 +1,5 @@
+export * from './messagesContext';
+export * from './messagesProvider';
+export * from './hooks/useMessageSender';
+export * from './hooks/useMessageObserver';
+export * from './hooks/useMessagesStore';

package/build/esm/context/messagesContext/messagesContext.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Context for sending messages between Editor and App
+ * Same exist in Editor
+ **/
+import React from 'react';
+import { StoreApi } from 'zustand';
+import { Action } from '../../types/actions';
+import { MessagesStore } from './store';
+import { SendOptions } from './types';
+export interface PostMessageContextProps {
+    state?: StoreApi<MessagesStore>;
+    sendMessage: (action: Action, options?: SendOptions) => void;
+}
+export declare const PostMessageContext: React.Context<PostMessageContextProps>;

package/build/esm/context/messagesContext/messagesContext.js

@@ -0,0 +1,8 @@
+/**
+ * Context for sending messages between Editor and App
+ * Same exist in Editor
+ **/
+import React from 'react';
+export const PostMessageContext = React.createContext({
+    sendMessage: () => { },
+});

package/build/esm/context/messagesContext/messagesProvider.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare const PostMessageProvider: ({ children }: PropsWithChildren) => JSX.Element;

package/build/esm/context/messagesContext/messagesProvider.js

@@ -0,0 +1,68 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { useEditorStore } from '../editorContext';
+import { PostMessageContext } from './messagesContext';
+import { createMessagesStore } from './store';
+const DEBUG_MODE = false;
+export const PostMessageProvider = ({ children }) => {
+    const storeRef = useRef();
+    if (!storeRef.current) {
+        storeRef.current = createMessagesStore();
+    }
+    const editorStore = useEditorStore();
+    const sendPostMessage = useCallback((args) => {
+        window.parent.postMessage(args, '*');
+    }, []);
+    const notifySubscribers = useCallback((action, source) => {
+        const meta = { source };
+        const storesWithReducer = [editorStore];
+        const { type, payload } = action;
+        const store = storeRef.current;
+        if (!type) {
+            return;
+        }
+        if (store) {
+            const { subscribers } = store.getState();
+            const foundedSubscribers = subscribers.filter((subscriber) => subscriber.action === type);
+            for (const storeWithReducer of storesWithReducer) {
+                storeWithReducer.reducer(action, meta);
+            }
+            if (foundedSubscribers.length) {
+                for (const subscriber of foundedSubscribers) {
+                    subscriber.handler(payload, meta);
+                }
+            }
+        }
+    }, [editorStore]);
+    useEffect(() => {
+        const onMessage = (e) => {
+            const { action, debug } = e.data;
+            if (action && action.type) {
+                if (debug) {
+                    // eslint-disable-next-line no-console
+                    console.log(`🔵 ➡️ Editor ${action.type}`, action.payload);
+                }
+                notifySubscribers(action, 'editor');
+            }
+        };
+        window.addEventListener('message', onMessage);
+        return () => {
+            window.removeEventListener('message', onMessage);
+        };
+    }, [notifySubscribers]);
+    const sendMessage = useCallback((action, { debug = DEBUG_MODE, direction = 'both' } = {}) => {
+        if (debug) {
+            // eslint-disable-next-line no-console
+            console.log(`🟢 Website ➡️ ${action.type}`, action.payload);
+        }
+        if (direction === 'both' || direction === 'editor') {
+            sendPostMessage({ action, debug });
+        }
+        if (direction === 'both' || direction === 'pc') {
+            notifySubscribers(action, 'pc');
+        }
+    }, [notifySubscribers, sendPostMessage]);
+    return (React.createElement(PostMessageContext.Provider, { value: {
+            state: storeRef.current,
+            sendMessage: sendMessage,
+        } }, children));
+};

package/build/esm/context/messagesContext/store.d.ts

@@ -0,0 +1,25 @@
+import { Subscriber } from '../../types';
+import { SubscriptionFunc } from './types';
+export interface MessagesState {
+    subscribers: Subscriber[];
+}
+export interface MessagesMethods {
+    subscribe: SubscriptionFunc;
+    unsubscribe: SubscriptionFunc;
+}
+export type MessagesStore = MessagesState & MessagesMethods;
+export declare const createMessagesStore: (overrideInitialState?: Partial<MessagesState> | undefined) => import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<MessagesState & MessagesMethods>, "setState"> & {
+    setState<A extends string | {
+        type: string;
+    }>(partial: (MessagesState & MessagesMethods) | Partial<MessagesState & MessagesMethods> | ((state: MessagesState & MessagesMethods) => (MessagesState & MessagesMethods) | Partial<MessagesState & MessagesMethods>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<MessagesState & MessagesMethods, MessagesState & MessagesMethods>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => void | Promise<void>;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: MessagesState & MessagesMethods) => void) => () => void;
+        onFinishHydration: (fn: (state: MessagesState & MessagesMethods) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<MessagesState & MessagesMethods, MessagesState & MessagesMethods>>;
+    };
+}>;

package/build/esm/context/messagesContext/store.js

@@ -0,0 +1,14 @@
+import { initializeStore } from '../../utils/store';
+export const createMessagesStore = initializeStore({
+    subscribers: [],
+}, (set, _get) => ({
+    subscribe: (type, payloadCallback) => {
+        set((state) => (Object.assign(Object.assign({}, state), { subscribers: [...state.subscribers, { action: type, handler: payloadCallback }] })));
+        return () => {
+            set((state) => (Object.assign(Object.assign({}, state), { subscribers: state.subscribers.filter(({ handler, action }) => payloadCallback !== handler || type !== action) })));
+        };
+    },
+    unsubscribe: (type, payloadCallback) => {
+        set((state) => (Object.assign(Object.assign({}, state), { subscribers: state.subscribers.filter(({ handler, action }) => payloadCallback !== handler || type !== action) })));
+    },
+}));

package/build/esm/context/messagesContext/types.d.ts

@@ -0,0 +1,14 @@
+import { Action } from '../../types/actions';
+export interface SendOptions {
+    direction?: MetaSource | 'both';
+    debug?: boolean;
+}
+export interface PostMessageArgs {
+    action: Action;
+    debug: boolean;
+}
+export type SubscriptionFunc = <A extends Action>(type: A['type'], payloadCallback: (payload: A['payload'], meta: Meta) => void) => void;
+export type MetaSource = 'pc' | 'editor';
+export interface Meta {
+    source: MetaSource;
+}

package/build/esm/context/messagesContext/types.js

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

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 { blockDataMap } from '../constructor-items';
+import { EditorContext, useEditorStore } from '../context/editorContext';
+import { useMessageObserver, useMessageSender } from '../context/messagesContext';
+import { defaultComponentsConfigurationSchema } from '../schema';
+import { ActionTypes } from '../types/actions';
+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',