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

package/build/esm/containers/PageConstructor/PageConstructor.js

@@ -1,23 +1,28 @@
 import { __rest } from "tslib";
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import '@diplodoc/transform/dist/js/yfm';
+import { ThemeProvider } from '@gravity-ui/uikit';
 import BackgroundMedia from '../../components/BackgroundMedia/BackgroundMedia';
 import RootCn from '../../components/RootCn';
 import { blockMap, navItemMap, subBlockMap } from '../../constructor-items';
 import { AnimateContext } from '../../context/animateContext';
+import { useEditorStore } from '../../context/editorContext';
 import { InnerContext } from '../../context/innerContext';
 import { useTheme } from '../../context/theme';
-import { Grid } from '../../grid';
-import { BlockType, BlockTypes, HeaderBlockTypes, NavigationItemTypes, SubBlockTypes, } from '../../models';
+import useEditorInitialize from '../../hooks/useEditorInitialize';
+import { BlockTypes, HeaderBlockTypes, NavigationItemTypes, SubBlockTypes, } from '../../models';
 import Layout from '../../navigation/containers/Layout/Layout';
-import { block as cnBlock, getCustomItems, getCustomTypes, getHeaderBlock, getOrderedBlocks, getThemedValue, } from '../../utils';
-import { ConstructorBlocks } from './components/ConstructorBlocks';
-import { ConstructorHeader } from './components/ConstructorItem';
+import { block as cnBlock, getCustomItems, getCustomTypes, getThemedValue } from '../../utils';
+import { ConstructorBlocks } from './components';
 import { ConstructorRow } from './components/ConstructorRow';
 import './PageConstructor.css';
 const b = cnBlock('page-constructor');
 export const Constructor = (props) => {
     const { content: { blocks = [], background } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
+    const [content, setContent] = useState({ blocks, background });
+    const theme = useTheme();
+    const { initialized } = useEditorStore();
+    useEditorInitialize({ content, setContent });
     const { context } = useMemo(() => ({
         context: {
             blockTypes: [...BlockTypes, ...getCustomTypes(['blocks', 'headers'], custom)],
@@ -36,22 +41,20 @@ export const Constructor = (props) => {
             },
         },
     }), [custom, shouldRenderBlock]);
-    const theme = useTheme();
-    const header = getHeaderBlock(blocks, context.headerBlockTypes);
-    const restBlocks = getOrderedBlocks(blocks, context.headerBlockTypes);
-    const themedBackground = getThemedValue(background, theme);
+    const restBlocks = content.blocks;
+    const themedBackground = getThemedValue(content.background, theme);
     return (React.createElement(InnerContext.Provider, { value: context },
-        React.createElement(RootCn, { className: b() },
+        React.createElement(RootCn, { className: b('', { ['with-editor']: initialized }) },
             React.createElement("div", { className: b('wrapper') },
                 themedBackground && (React.createElement(BackgroundMedia, Object.assign({}, themedBackground, { className: b('background') }))),
                 React.createElement(Layout, { navigation: navigation },
                     renderMenu && renderMenu(),
-                    header && (React.createElement(ConstructorHeader, { data: header, blockKey: BlockType.HeaderBlock })),
-                    React.createElement(Grid, null, restBlocks && (React.createElement(ConstructorRow, null,
-                        React.createElement(ConstructorBlocks, { items: restBlocks })))))))));
+                    restBlocks && (React.createElement(ConstructorRow, null,
+                        React.createElement(ConstructorBlocks, { items: restBlocks }))))))));
 };
 export const PageConstructor = (props) => {
     const { content: { animated = true } = {} } = props, rest = __rest(props, ["content"]);
-    return (React.createElement(AnimateContext.Provider, { value: { animated } },
-        React.createElement(Constructor, Object.assign({ content: props.content }, rest))));
+    return (React.createElement(ThemeProvider, null,
+        React.createElement(AnimateContext.Provider, { value: { animated } },
+            React.createElement(Constructor, Object.assign({ content: props.content }, rest)))));
 };

package/build/esm/containers/PageConstructor/Provider.js

@@ -1,11 +1,13 @@
 import React, { Fragment } from 'react';
 import { DEFAULT_THEME } from '../../components/constants';
 import { AnalyticsContext } from '../../context/analyticsContext';
+import { EditorProvider } from '../../context/editorContext';
 import { DEFAULT_FORMS_CONTEXT_VALUE, FormsContext, } from '../../context/formsContext/FormsContext';
 import { ImageContext } from '../../context/imageContext';
 import { LocaleContext } from '../../context/localeContext';
 import { LocationContext } from '../../context/locationContext';
 import { MapsContext, initialMapValue } from '../../context/mapsContext/mapsContext';
+import { PostMessageProvider } from '../../context/messagesContext';
 import { MobileContext } from '../../context/mobileContext';
 import { ProjectSettingsContext, } from '../../context/projectSettingsContext';
 import { SSRContext } from '../../context/ssrContext';
@@ -24,6 +26,8 @@ export const PageConstructorProvider = (props) => {
         React.createElement(AnalyticsContext.Provider, { value: analytics }),
         React.createElement(FormsContext.Provider, { value: forms }),
         React.createElement(SSRContext.Provider, { value: { isServer: ssrConfig === null || ssrConfig === void 0 ? void 0 : ssrConfig.isServer } }),
+        React.createElement(EditorProvider, null),
+        React.createElement(PostMessageProvider, null),
     ].reduceRight((prev, provider) => React.cloneElement(provider, {}, prev), children);
     /* eslint-enable react/jsx-key */
     return React.createElement(Fragment, null, context);

package/build/esm/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.css

@@ -1,22 +1,22 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-constructor-block.pc-constructor-block.pc-constructor-block.pc-constructor-block_indentTop_0 {
-  margin-top: 0;
+  padding-top: 0;
 }
 .pc-constructor-block.pc-constructor-block.pc-constructor-block.pc-constructor-block_indentTop_xs {
-  margin-top: 16px;
+  padding-top: 16px;
 }
 .pc-constructor-block.pc-constructor-block.pc-constructor-block.pc-constructor-block_indentTop_s {
-  margin-top: 24px;
+  padding-top: 24px;
 }
 .pc-constructor-block.pc-constructor-block.pc-constructor-block.pc-constructor-block_indentTop_m {
-  margin-top: 32px;
+  padding-top: 32px;
 }
 .pc-constructor-block.pc-constructor-block.pc-constructor-block.pc-constructor-block_indentTop_l {
-  margin-top: 48px;
+  padding-top: 48px;
 }
 .pc-constructor-block.pc-constructor-block.pc-constructor-block.pc-constructor-block_indentTop_xl {
-  margin-top: 64px;
+  padding-top: 64px;
 }
 .pc-constructor-block.pc-constructor-block.pc-constructor-block.pc-constructor-block_indentBottom_0 {
   padding-bottom: 0;
@@ -35,4 +35,8 @@ unpredictable css rules order in build */
 }
 .pc-constructor-block.pc-constructor-block.pc-constructor-block.pc-constructor-block_indentBottom_xl {
   padding-bottom: 64px;
+}
+
+.pc-page-constructor_with-editor .pc-constructor-block {
+  cursor: pointer;
 }

package/build/esm/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.js

@@ -3,11 +3,14 @@ import pick from 'lodash/pick';
 import BlockBase from '../../../../components/BlockBase/BlockBase';
 import { BlockDecoration } from '../../../../customization/BlockDecoration';
 import { block } from '../../../../utils';
+import useEditorBlockMouseEvents from './hooks/useEditorBlockMouseEvents';
 import './ConstructorBlock.css';
 const b = block('constructor-block');
 export const ConstructorBlock = ({ index = 0, data, children, }) => {
+    const adminBlockMouseEvents = useEditorBlockMouseEvents([index]);
     const { type } = data;
     const blockBaseProps = useMemo(() => pick(data, ['anchor', 'visible', 'resetPaddings', 'indent']), [data]);
-    return (React.createElement(BlockDecoration, Object.assign({ type: type, index: index }, blockBaseProps),
-        React.createElement(BlockBase, Object.assign({ className: b({ type }) }, blockBaseProps), children)));
+    return (React.createElement("div", Object.assign({}, adminBlockMouseEvents),
+        React.createElement(BlockDecoration, Object.assign({ type: type, index: index }, blockBaseProps),
+            React.createElement(BlockBase, Object.assign({ className: b({ type }) }, blockBaseProps), children))));
 };

package/build/esm/containers/PageConstructor/components/ConstructorBlock/hooks/useEditorBlockMouseEvents.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const useEditorBlockMouseEvents: (arrayIndex: number[]) => {
+    onClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onMouseMove: (event: React.MouseEvent) => void;
+    onMouseUp: (event: React.MouseEvent) => void;
+    onMouseLeave: (e: React.MouseEvent) => void;
+};
+export default useEditorBlockMouseEvents;

package/build/esm/containers/PageConstructor/components/ConstructorBlock/hooks/useEditorBlockMouseEvents.js

@@ -0,0 +1,107 @@
+import { useCallback, useContext } from 'react';
+import { ActionTypes } from '../../../../../common/types/actions';
+import { EditorContext, useEditorStore } from '../../../../../context/editorContext';
+import { useMessageSender } from '../../../../../context/messagesContext/hooks/useMessageSender';
+import { getCursorPositionOverElement } from '../../../../../utils/editor';
+const useEditorBlockMouseEvents = (arrayIndex) => {
+    const sendMessage = useMessageSender();
+    const { manipulateOverlayMode } = useEditorStore();
+    const { setActiveElement } = useContext(EditorContext);
+    const onMouseUp = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (manipulateOverlayMode) {
+            const rect = event.currentTarget.getClientRects().item(0);
+            if (rect) {
+                const position = getCursorPositionOverElement(rect, event);
+                let newLastIndex = arrayIndex[arrayIndex.length - 1];
+                if (position === 'right' || position === 'bottom') {
+                    newLastIndex += 1;
+                }
+                const newArrayIndex = [
+                    ...arrayIndex.slice(0, arrayIndex.length - 1),
+                    newLastIndex,
+                ];
+                if (manipulateOverlayMode === 'insert') {
+                    sendMessage({
+                        type: ActionTypes.InsertBlock,
+                        payload: {
+                            path: newArrayIndex,
+                        },
+                    });
+                }
+                else if (manipulateOverlayMode === 'reorder') {
+                    sendMessage({
+                        type: ActionTypes.ReorderBlocks,
+                        payload: {
+                            path: newArrayIndex,
+                        },
+                    });
+                }
+            }
+        }
+    }, [arrayIndex, manipulateOverlayMode, sendMessage]);
+    const onMouseMove = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (manipulateOverlayMode) {
+            const rect = event.currentTarget.getClientRects().item(0);
+            if (rect) {
+                const cursorPosition = getCursorPositionOverElement(rect, event);
+                sendMessage({
+                    type: ActionTypes.OverlayModeOnMove,
+                    payload: {
+                        block: { rect, cursorPosition },
+                        cursor: {
+                            x: event.clientX,
+                            y: event.clientY,
+                        },
+                    },
+                });
+            }
+        }
+    }, [manipulateOverlayMode, sendMessage]);
+    const onMouseLeave = useCallback((e) => {
+        e.preventDefault();
+        if (manipulateOverlayMode) {
+            const rect = e.currentTarget.getClientRects().item(0);
+            if (rect) {
+                sendMessage({
+                    type: ActionTypes.OverlayModeOnMove,
+                    payload: {
+                        cursor: {
+                            x: e.clientX,
+                            y: e.clientY,
+                        },
+                    },
+                });
+            }
+        }
+        else {
+        }
+    }, [manipulateOverlayMode, sendMessage]);
+    const onClick = useCallback((e) => {
+        e.stopPropagation();
+        if (!manipulateOverlayMode) {
+            const element = e.currentTarget;
+            const rect = element.getClientRects().item(0);
+            if (rect) {
+                setActiveElement(element);
+                sendMessage({
+                    type: ActionTypes.SelectBlock,
+                    payload: {
+                        path: arrayIndex,
+                        rect: rect,
+                    },
+                });
+            }
+        }
+    }, [arrayIndex, manipulateOverlayMode, sendMessage, setActiveElement]);
+    return {
+        onClick,
+        onMouseMove,
+        onMouseUp,
+        onMouseLeave,
+    };
+};
+export default useEditorBlockMouseEvents;

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

@@ -7,8 +7,9 @@ import { ConstructorBlock } from '../ConstructorBlock/ConstructorBlock';
 import { ConstructorItem } from '../ConstructorItem';
 import { ConstructorLoadable } from '../ConstructorLoadable';
 export const ConstructorBlocks = ({ items }) => {
-    const { blockTypes, loadables, itemMap, shouldRenderBlock } = useContext(InnerContext);
-    const renderer = (parentId = '', item, index) => {
+    const { blockTypes, subBlockTypes, loadables, itemMap, shouldRenderBlock } = useContext(InnerContext);
+    const allBlocks = [...blockTypes, ...subBlockTypes];
+    const renderer = (parentId = '', withoutConstructorBlockWrapper = false, item, index) => {
         if (!itemMap[item.type]) {
             return parentId ? null : (React.createElement(BlockDecoration, { type: item.type, index: index }, null));
         }
@@ -29,14 +30,14 @@ export const ConstructorBlocks = ({ items }) => {
         else {
             let children;
             if ('children' in item && item.children) {
-                children = item.children.map(renderer.bind(null, blockId));
+                children = item.children.map(renderer.bind(null, blockId, true));
             }
-            itemElement = (React.createElement(ConstructorItem, { data: item, key: blockId, blockKey: blockId }, children));
+            itemElement = (React.createElement(ConstructorItem, { data: item, key: blockId, blockKey: index }, children));
         }
-        return blockTypes.includes(item.type) ? (
+        return allBlocks.includes(item.type) && !withoutConstructorBlockWrapper ? (
         //TODO: replace ConstructorBlock (and delete it) with BlockBase when all
         // components relying on constructor inner structure like Slider or blog-constructor will be refactored
         React.createElement(ConstructorBlock, { data: item, key: blockId, index: index }, itemElement)) : (itemElement);
     };
-    return React.createElement(Fragment, null, items.map(renderer.bind(null, '')));
+    return React.createElement(Fragment, null, items.map(renderer.bind(null, '', false)));
 };

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

@@ -1,7 +1,7 @@
 import { ConstructorBlock, WithChildren } from '../../../../models';
 export interface ConstructorItemProps {
     data: ConstructorBlock;
-    blockKey: string;
+    blockKey: number;
 }
 export declare const ConstructorItem: ({ data, blockKey, children }: WithChildren<ConstructorItemProps>) => JSX.Element;
 export declare const ConstructorHeader: ({ data, blockKey, }: Pick<ConstructorItemProps, 'data' | 'blockKey'>) => JSX.Element;

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

@@ -7,7 +7,7 @@ export const ConstructorItem = ({ data, blockKey, children }) => {
     const { itemMap } = useContext(InnerContext);
     const { type } = data, rest = __rest(data, ["type"]);
     const Component = itemMap[type];
-    return (React.createElement(BlockIdContext.Provider, { value: blockKey },
+    return (React.createElement(BlockIdContext.Provider, { value: blockKey, key: blockKey },
         React.createElement(Component, Object.assign({}, rest), children)));
 };
 export const ConstructorHeader = ({ data, blockKey, }) => (React.createElement(BlockDecoration, { type: data.type },

package/build/esm/containers/PageConstructor/components/ConstructorLoadable/ConstructorLoadable.js

@@ -8,6 +8,6 @@ export const ConstructorLoadable = (props) => {
     const { type } = block;
     const { fetch, component: ChildComponent } = config;
     const Component = itemMap[type];
-    return (React.createElement(BlockIdContext.Provider, { value: blockKey, key: blockKey },
+    return (React.createElement(BlockIdContext.Provider, { value: Number(blockKey), key: blockKey },
         React.createElement(Loadable, { key: blockKey, block: block, blockKey: blockKey, Component: Component, ChildComponent: ChildComponent, fetch: fetch, serviceId: serviceId, params: params })));
 };

package/build/esm/containers/PageConstructor/components/ConstructorRow/ConstructorRow.js

@@ -1,7 +1,5 @@
 import React from 'react';
-import { Col, Row } from '../../../../grid';
 import { block } from '../../../../utils';
 import './ConstructorRow.css';
 const b = block('constructor-row');
-export const ConstructorRow = ({ children }) => children ? (React.createElement(Row, { className: b() },
-    React.createElement(Col, null, children))) : null;
+export const ConstructorRow = ({ children }) => children ? React.createElement("div", { className: b() }, children) : null;

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

@@ -1,3 +1,3 @@
 import React from 'react';
-export type BlockIdContextProp = string;
-export declare const BlockIdContext: React.Context<string>;
+export type BlockIdContextProp = number;
+export declare const BlockIdContext: React.Context<number>;

package/build/esm/context/blockIdContext/blockIdContext.js

@@ -1,2 +1,2 @@
 import React from 'react';
-export const BlockIdContext = React.createContext('');
+export const BlockIdContext = React.createContext(NaN);

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

@@ -0,0 +1,13 @@
+/**
+ * Context for managing internal Editor states
+ * Same exist in Editor
+ **/
+import React from 'react';
+import { StoreApi } from 'zustand';
+import { EditorStore } from './store';
+export interface EditorContextProps {
+    state?: StoreApi<EditorStore>;
+    activeElement?: HTMLElement;
+    setActiveElement: (element: HTMLElement) => void;
+}
+export declare const EditorContext: React.Context<EditorContextProps>;

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

@@ -0,0 +1,6 @@
+/**
+ * Context for managing internal Editor states
+ * Same exist in Editor
+ **/
+import React from 'react';
+export const EditorContext = React.createContext({ setActiveElement: () => { } });

package/build/esm/context/editorContext/editorProvider.d.ts

@@ -0,0 +1,2 @@
+import React, { PropsWithChildren } from 'react';
+export declare const EditorProvider: React.FC<PropsWithChildren>;

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

@@ -0,0 +1,15 @@
+import React, { useRef, useState } from 'react';
+import { EditorContext } from './editorContext';
+import { createEditorStore } from './store';
+export const EditorProvider = ({ children }) => {
+    const storeRef = useRef();
+    const [activeElement, setActiveElement] = useState();
+    if (!storeRef.current) {
+        storeRef.current = createEditorStore();
+    }
+    return (React.createElement(EditorContext.Provider, { value: {
+            state: storeRef.current,
+            activeElement: activeElement,
+            setActiveElement: setActiveElement,
+        } }, children));
+};

package/build/esm/context/editorContext/hooks/useEditorStore.d.ts

@@ -0,0 +1,2 @@
+export declare const useEditorStore: () => import("..").EditorStore;
+export default useEditorStore;

package/build/esm/context/editorContext/hooks/useEditorStore.js

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

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

@@ -0,0 +1,4 @@
+export * from './editorContext';
+export * from './editorProvider';
+export * from './hooks/useEditorStore';
+export * from './store';

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

@@ -0,0 +1,4 @@
+export * from './editorContext';
+export * from './editorProvider';
+export * from './hooks/useEditorStore';
+export * from './store';

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

@@ -0,0 +1,24 @@
+import { WithStoreReducer } from '../../common/types';
+export interface EditorState {
+    manipulateOverlayMode: 'insert' | 'reorder' | false;
+    isSelectActive: boolean;
+    initialized: boolean;
+}
+export interface EditorMethods extends WithStoreReducer {
+}
+export type EditorStore = EditorState & EditorMethods;
+export declare const createEditorStore: (overrideInitialState?: Partial<EditorState> | undefined) => import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<EditorState & EditorMethods>, "setState"> & {
+    setState<A extends string | {
+        type: string;
+    }>(partial: (EditorState & EditorMethods) | Partial<EditorState & EditorMethods> | ((state: EditorState & EditorMethods) => (EditorState & EditorMethods) | Partial<EditorState & EditorMethods>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<EditorState & EditorMethods, EditorState & EditorMethods>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => void | Promise<void>;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: EditorState & EditorMethods) => void) => () => void;
+        onFinishHydration: (fn: (state: EditorState & EditorMethods) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<EditorState & EditorMethods, EditorState & EditorMethods>>;
+    };
+}>;

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

@@ -0,0 +1,36 @@
+import { ActionTypes } from '../../common/types';
+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 '../../../common/types';
+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("../../../editor-v2").Action, options?: import("../../../editor-v2").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,13 @@
+/**
+ * Context for sending messages between Editor and App
+ * Same exist in Editor
+ **/
+import React from 'react';
+import { StoreApi } from 'zustand';
+import { Action, SendOptions } from '../../common/types';
+import { MessagesStore } from './store';
+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,22 @@
+import React, { useRef } from 'react';
+import { usePostMessage } from '../../common/hooks/usePostMessage';
+import { useEditorStore } from '../editorContext';
+import { PostMessageContext } from './messagesContext';
+import { createMessagesStore } from './store';
+export const PostMessageProvider = ({ children }) => {
+    var _a;
+    const storeRef = useRef();
+    if (!storeRef.current) {
+        storeRef.current = createMessagesStore();
+    }
+    const editorStore = useEditorStore();
+    const storesWithReducer = [editorStore];
+    const { sendMessage } = usePostMessage({
+        subscribers: (_a = storeRef.current) === null || _a === void 0 ? void 0 : _a.getState().subscribers,
+        storesWithReducer,
+    });
+    return (React.createElement(PostMessageContext.Provider, { value: {
+            state: storeRef.current,
+            sendMessage: sendMessage,
+        } }, children));
+};

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

@@ -0,0 +1,24 @@
+import { Subscriber, SubscriptionFunc } from '../../common/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>>;
+    };
+}>;