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

package/build/esm/editor-v2/containers/Editor/Editor.d.ts

@@ -0,0 +1,10 @@
+import { PageContent } from '../../../models';
+import './Editor.css';
+interface EditorViewProps {
+    content: PageContent;
+    onUpdate?: (pageContent: PageContent) => void;
+    initialUrl: string;
+    disableUrlField?: boolean;
+}
+export declare const Editor: (props: EditorViewProps) => JSX.Element;
+export {};

package/build/esm/editor-v2/containers/Editor/Editor.js

@@ -0,0 +1,62 @@
+import React, { useCallback } from 'react';
+import { Grip } from '@gravity-ui/icons';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+import { ActionTypes } from '../../../common/types';
+import { block } from '../../../utils';
+import BigOverlay from '../../components/BigOverlay/BigOverlay';
+import MiddleScreen from '../../components/MiddleScreen/MiddleScreen';
+import { Sidebar } from '../../components/Sidebar/Sidebar';
+import { ContentConfigProvider } from '../../context/contentConfig';
+import { EditorProvider, useEditorStore } from '../../context/editorContext';
+import { IframeProvider } from '../../context/iframeContext';
+import { PostMessageProvider } from '../../context/messagesContext';
+import { useMessageSender } from '../../context/messagesContext/hooks/useMessageSender';
+import useAdminInitialize from './hooks/useAdminInitialize';
+import './Editor.css';
+const b = block('editor');
+const EditorView = (_props) => {
+    const { manipulateOverlayMode } = useEditorStore();
+    const sendMessage = useMessageSender();
+    useAdminInitialize();
+    // Disable insert mode on any MouseUp event
+    // Maybe should be attached to body
+    const onMouseUp = useCallback((e) => {
+        if (manipulateOverlayMode === 'insert') {
+            e.preventDefault();
+            sendMessage({ type: ActionTypes.InsertModeDisable, payload: undefined });
+        }
+        if (manipulateOverlayMode === 'reorder') {
+            e.preventDefault();
+            sendMessage({ type: ActionTypes.ReorderModeDisable, payload: undefined });
+        }
+    }, [manipulateOverlayMode, sendMessage]);
+    const onMouseMove = useCallback((e) => {
+        if (manipulateOverlayMode) {
+            sendMessage({
+                type: ActionTypes.OverlayModeOnMove,
+                payload: { cursor: { x: e.clientX, y: e.clientY } },
+            });
+        }
+    }, [manipulateOverlayMode, sendMessage]);
+    return (React.createElement("div", { className: b(), onMouseUp: onMouseUp, onMouseMove: onMouseMove },
+        React.createElement("div", { className: b('body') },
+            React.createElement(PanelGroup, { className: b('panel'), autoSaveId: "page-constructor-editor", direction: "horizontal" },
+                React.createElement(Panel, { collapsible: true, defaultSize: 25, minSize: 15 },
+                    React.createElement(Sidebar, { position: 'left' })),
+                React.createElement(PanelResizeHandle, { className: b('draggable') },
+                    React.createElement(Grip, { className: b('grip') })),
+                React.createElement(Panel, { minSize: 20 },
+                    React.createElement(MiddleScreen, null)),
+                React.createElement(PanelResizeHandle, { className: b('draggable') },
+                    React.createElement(Grip, { className: b('grip') })),
+                React.createElement(Panel, { collapsible: true, minSize: 15, defaultSize: 25 },
+                    React.createElement(Sidebar, { position: 'right', startMenu: "block-config" })))),
+        React.createElement(BigOverlay, { className: b('overlay') })));
+};
+export const Editor = (props) => {
+    return (React.createElement(EditorProvider, null,
+        React.createElement(IframeProvider, { initialUrl: props.initialUrl, disableUrlField: props.disableUrlField },
+            React.createElement(ContentConfigProvider, { onUpdate: props.onUpdate, content: props.content },
+                React.createElement(PostMessageProvider, null,
+                    React.createElement(EditorView, Object.assign({}, props)))))));
+};

package/build/esm/editor-v2/containers/Editor/hooks/useAdminInitialize.d.ts

@@ -0,0 +1,2 @@
+declare const useAdminInitialize: () => void;
+export default useAdminInitialize;

package/build/esm/editor-v2/containers/Editor/hooks/useAdminInitialize.js

@@ -0,0 +1,23 @@
+import { useContext, useEffect } from 'react';
+import { ActionTypes } from '../../../../common/types';
+import { ContentConfigContext, useContentConfigStore } from '../../../context/contentConfig';
+import { useEditorStore } from '../../../context/editorContext';
+import { useMessageObserver, useMessageSender } from '../../../context/messagesContext';
+const useAdminInitialize = () => {
+    const { state: contentConfigState } = useContext(ContentConfigContext);
+    const { config } = useContentConfigStore();
+    const { initialized } = useEditorStore();
+    const sendMessage = useMessageSender();
+    useMessageObserver(ActionTypes.IframeReady, () => {
+        if (sendMessage && !initialized) {
+            sendMessage({ type: ActionTypes.EditorReady, payload: undefined });
+            sendMessage({ type: ActionTypes.UpdateConfigs, payload: { content: config } }, { direction: 'pc' });
+        }
+    }, [sendMessage]);
+    // Update configs for both instances on any changes
+    useEffect(() => contentConfigState &&
+        contentConfigState.subscribe((state) => {
+            sendMessage({ type: ActionTypes.UpdateConfigs, payload: { content: state.config } });
+        }), [sendMessage, contentConfigState]);
+};
+export default useAdminInitialize;

package/build/esm/editor-v2/context/contentConfig/contentConfigContext.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Context for managing PC configuration (aka Yaml Configs)
+ **/
+import React from 'react';
+import { StoreApi } from 'zustand';
+import { ContentConfigStore } from './store';
+export interface ContentConfigContextProps {
+    state?: StoreApi<ContentConfigStore>;
+}
+export declare const ContentConfigContext: React.Context<ContentConfigContextProps>;

package/build/esm/editor-v2/context/contentConfig/contentConfigContext.js

@@ -0,0 +1,5 @@
+/**
+ * Context for managing PC configuration (aka Yaml Configs)
+ **/
+import React from 'react';
+export const ContentConfigContext = React.createContext({});

package/build/esm/editor-v2/context/contentConfig/contentConfigProvider.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { PageContent } from '../../../models';
+interface ContentConfigProviderProps extends PropsWithChildren {
+    content: PageContent;
+    onUpdate?: (pageContent: PageContent) => void;
+}
+export declare const ContentConfigProvider: ({ content, onUpdate, children, }: ContentConfigProviderProps) => JSX.Element;
+export {};

package/build/esm/editor-v2/context/contentConfig/contentConfigProvider.js

@@ -0,0 +1,14 @@
+import React, { useRef } from 'react';
+import { ContentConfigContext } from './contentConfigContext';
+import { createContentConfigStore } from './store';
+export const ContentConfigProvider = ({ content, onUpdate, children, }) => {
+    var _a;
+    const storeRef = useRef();
+    if (!storeRef.current) {
+        storeRef.current = createContentConfigStore({ config: content });
+        if (onUpdate) {
+            (_a = storeRef.current) === null || _a === void 0 ? void 0 : _a.subscribe((state) => onUpdate(state.config));
+        }
+    }
+    return (React.createElement(ContentConfigContext.Provider, { value: { state: storeRef.current } }, children));
+};

package/build/esm/editor-v2/context/contentConfig/hooks/useContentConfigStore.d.ts

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

package/build/esm/editor-v2/context/contentConfig/hooks/useContentConfigStore.js

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

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

@@ -0,0 +1,4 @@
+export * from './contentConfigContext';
+export * from './contentConfigProvider';
+export * from './hooks/useContentConfigStore';
+export * from './store';

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

@@ -0,0 +1,4 @@
+export * from './contentConfigContext';
+export * from './contentConfigProvider';
+export * from './hooks/useContentConfigStore';
+export * from './store';

package/build/esm/editor-v2/context/contentConfig/store.d.ts

@@ -0,0 +1,35 @@
+import { ConfigInput, ItemConfig, WithStoreReducer } from '../../../common/types';
+import { PageContent } from '../../../models';
+import { DynamicFormValue } from '../../components/DynamicForm/DynamicForm';
+export interface ContentConfigState {
+    config: PageContent;
+    blocks: Array<ItemConfig>;
+    subBlocks: Array<ItemConfig>;
+    global: Array<ConfigInput>;
+    preInsertBlockType: string | null;
+    preReorderBlockPath: number[] | null;
+}
+export interface ContentConfigMethods extends WithStoreReducer {
+    setConfig: (config: PageContent) => void;
+    setBlocks: (blocks: ItemConfig[]) => void;
+    setSubBlocks: (subBlocks: ItemConfig[]) => void;
+    insertBlock: (position: number[], blockType: string) => void;
+    deleteBlock: (path: number[]) => void;
+    duplicateBlock: (path: number[]) => void;
+    reorderBlock: (path: number[], destination: number[]) => void;
+    updateField: (path: string, value: DynamicFormValue) => void;
+}
+export type ContentConfigStore = ContentConfigState & ContentConfigMethods;
+export declare const createContentConfigStore: (overrideInitialState?: Partial<ContentConfigState> | undefined) => import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<ContentConfigState & ContentConfigMethods>, "subscribe"> & {
+    subscribe: {
+        (listener: (selectedState: ContentConfigState & ContentConfigMethods, previousSelectedState: ContentConfigState & ContentConfigMethods) => void): () => void;
+        <U>(selector: (state: ContentConfigState & ContentConfigMethods) => 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: (ContentConfigState & ContentConfigMethods) | Partial<ContentConfigState & ContentConfigMethods> | ((state: ContentConfigState & ContentConfigMethods) => (ContentConfigState & ContentConfigMethods) | Partial<ContentConfigState & ContentConfigMethods>), replace?: boolean | undefined, action?: A | undefined): void;
+}>;

package/build/esm/editor-v2/context/contentConfig/store.js

@@ -0,0 +1,102 @@
+import _ from 'lodash';
+import { ActionTypes } from '../../../common/types';
+import { duplicateArrayItem, generateChildrenPathFromArray, getDestinationShiftBeforeReorder, insert, isItemsNeighbours, modifyObjectByPath, removeFromArray, reorderArrayItems, } from '../../utils';
+import { initializeStore } from '../../utils/store';
+export const createContentConfigStore = initializeStore({
+    config: { blocks: [] },
+    blocks: [],
+    subBlocks: [],
+    global: [],
+    preInsertBlockType: null,
+    preReorderBlockPath: null,
+}, (set, get) => ({
+    setConfig: (config) => set((state) => (Object.assign(Object.assign({}, state), { config }))),
+    setBlocks: (blocks) => set((state) => (Object.assign(Object.assign({}, state), { blocks }))),
+    setSubBlocks: (subBlocks) => set((state) => (Object.assign(Object.assign({}, state), { subBlocks }))),
+    insertBlock: (arrayPath, blockType) => {
+        const blocksConfig = get().config.blocks;
+        const blocksData = get().blocks;
+        const foundBlock = blocksData.find(({ type }) => type === blockType);
+        const defaultValue = foundBlock && foundBlock.schema.default
+            ? Object.assign(Object.assign({}, foundBlock.schema.default), { type: blockType }) : { type: blockType };
+        const newBlocksConfig = modifyObjectByPath(blocksConfig, arrayPath, (parentBlocks, index) => insert(parentBlocks, index, defaultValue));
+        set((state) => (Object.assign(Object.assign({}, state), { config: Object.assign(Object.assign({}, state.config), { blocks: newBlocksConfig }) })));
+    },
+    deleteBlock: (arrayPath) => {
+        const blocksConfig = get().config.blocks;
+        const newBlocksConfig = modifyObjectByPath(blocksConfig, arrayPath, removeFromArray);
+        set((state) => (Object.assign(Object.assign({}, state), { config: Object.assign(Object.assign({}, state.config), { blocks: newBlocksConfig }) })));
+    },
+    duplicateBlock: (arrayPath) => {
+        const blocksConfig = get().config.blocks;
+        const newBlocksConfig = modifyObjectByPath(blocksConfig, arrayPath, duplicateArrayItem);
+        set((state) => (Object.assign(Object.assign({}, state), { config: Object.assign(Object.assign({}, state.config), { blocks: newBlocksConfig }) })));
+    },
+    updateField: (path, value) => {
+        set((state) => {
+            const newConfig = _.set(state.config, path, value);
+            return Object.assign(Object.assign({}, state), { config: newConfig });
+        });
+    },
+    reorderBlock: (arrayPath, destination) => {
+        let newBlocksConfig;
+        const blocksConfig = get().config.blocks;
+        // Copy
+        const copiedBlock = _.get(blocksConfig, generateChildrenPathFromArray(arrayPath));
+        if (isItemsNeighbours(arrayPath, destination)) {
+            newBlocksConfig = modifyObjectByPath(blocksConfig, arrayPath, (parentBlocks) => {
+                return reorderArrayItems(parentBlocks, arrayPath[arrayPath.length - 1], destination[destination.length - 1]);
+            });
+        }
+        else {
+            const arrayDest = getDestinationShiftBeforeReorder(arrayPath, destination);
+            // Delete
+            const blocksConfigWithoutBlock = modifyObjectByPath(blocksConfig, arrayPath, removeFromArray);
+            // Paste
+            newBlocksConfig = modifyObjectByPath(blocksConfigWithoutBlock, arrayDest, (parentBlocks, index) => insert(parentBlocks, index, copiedBlock));
+        }
+        set((state) => (Object.assign(Object.assign({}, state), { config: Object.assign(Object.assign({}, state.config), { blocks: newBlocksConfig }) })));
+    },
+    reducer: function (action) {
+        switch (action.type) {
+            // Insert Actions
+            case ActionTypes.InsertModeEnable: {
+                set((state) => (Object.assign(Object.assign({}, state), { preInsertBlockType: action.payload.blockType })));
+                break;
+            }
+            case ActionTypes.InsertModeDisable: {
+                set((state) => (Object.assign(Object.assign({}, state), { preInsertBlockType: null })));
+                break;
+            }
+            case ActionTypes.InsertBlock: {
+                const { preInsertBlockType } = get();
+                if (preInsertBlockType) {
+                    const { path } = action.payload;
+                    this.insertBlock(path, preInsertBlockType);
+                }
+                break;
+            }
+            // Reorder Actions
+            case ActionTypes.ReorderModeEnable: {
+                set((state) => (Object.assign(Object.assign({}, state), { preReorderBlockPath: action.payload.path })));
+                break;
+            }
+            case ActionTypes.ReorderModeDisable: {
+                set((state) => (Object.assign(Object.assign({}, state), { preReorderBlockPath: null })));
+                break;
+            }
+            case ActionTypes.ReorderBlocks: {
+                const { preReorderBlockPath } = get();
+                if (preReorderBlockPath) {
+                    const { path: destinationPath } = action.payload;
+                    this.reorderBlock(preReorderBlockPath, destinationPath);
+                }
+                break;
+            }
+            case ActionTypes.BlocksConfigs: {
+                set((state) => (Object.assign(Object.assign({}, state), { blocks: action.payload.blocks, subBlocks: action.payload.subBlocks, global: action.payload.global })));
+                break;
+            }
+        }
+    },
+}));

package/build/esm/editor-v2/context/editorContext/editorContext.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Context for managing internal Editor states
+ * Same exist in PC
+ **/
+import React from 'react';
+import { StoreApi } from 'zustand';
+import { EditorStore } from './store';
+export interface EditorContextProps {
+    state?: StoreApi<EditorStore>;
+}
+export declare const EditorContext: React.Context<EditorContextProps>;

package/build/esm/editor-v2/context/editorContext/editorContext.js

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

package/build/esm/editor-v2/context/editorContext/editorProvider.d.ts

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

package/build/esm/editor-v2/context/editorContext/editorProvider.js

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

package/build/esm/editor-v2/context/editorContext/hooks/useEditorStore.d.ts

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

package/build/esm/editor-v2/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/editor-v2/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/editor-v2/context/editorContext/index.js

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

package/build/esm/editor-v2/context/editorContext/store.d.ts

@@ -0,0 +1,26 @@
+import { WithStoreReducer } from '../../../common/types';
+export interface EditorState {
+    manipulateOverlayMode: 'insert' | 'reorder' | false;
+    selectedBlock?: {
+        path: number[];
+        rect: DOMRect;
+    };
+    initialized: boolean;
+}
+export interface EditorMethods extends WithStoreReducer {
+    resetInitialize: () => void;
+}
+export type EditorStore = EditorState & EditorMethods;
+export declare const createEditorStore: (overrideInitialState?: Partial<EditorState> | undefined) => import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<EditorState & EditorMethods>, "subscribe"> & {
+    subscribe: {
+        (listener: (selectedState: EditorState & EditorMethods, previousSelectedState: EditorState & EditorMethods) => void): () => void;
+        <U>(selector: (state: EditorState & EditorMethods) => 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: (EditorState & EditorMethods) | Partial<EditorState & EditorMethods> | ((state: EditorState & EditorMethods) => (EditorState & EditorMethods) | Partial<EditorState & EditorMethods>), replace?: boolean | undefined, action?: A | undefined): void;
+}>;

package/build/esm/editor-v2/context/editorContext/store.js

@@ -0,0 +1,52 @@
+import { ActionTypes } from '../../../common/types';
+import { initializeStore } from '../../utils/store';
+export const createEditorStore = initializeStore({
+    manipulateOverlayMode: false,
+    initialized: false,
+}, (set, get) => ({
+    resetInitialize: () => {
+        set((state) => (Object.assign(Object.assign({}, state), { initialized: false })));
+    },
+    reducer: (action) => {
+        switch (action.type) {
+            case ActionTypes.IframeReady: {
+                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), { selectedBlock: {
+                        path: action.payload.path,
+                        rect: action.payload.rect,
+                    } })));
+                break;
+            }
+            case ActionTypes.UpdateSelectedBlockRect: {
+                const { selectedBlock } = get();
+                if (selectedBlock) {
+                    set((state) => (Object.assign(Object.assign({}, state), { selectedBlock: Object.assign(Object.assign({}, selectedBlock), { rect: action.payload.rect }) })));
+                }
+                break;
+            }
+            case ActionTypes.ReorderBlocks: {
+                set((state) => (Object.assign(Object.assign({}, state), { selectedBlock: undefined })));
+                break;
+            }
+        }
+    },
+}));

package/build/esm/editor-v2/context/iframeContext/hooks/useIframeStore.d.ts

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

package/build/esm/editor-v2/context/iframeContext/hooks/useIframeStore.js

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

package/build/esm/editor-v2/context/iframeContext/iframeContext.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Context for iframe window
+ **/
+import React from 'react';
+import { StoreApi } from 'zustand';
+import { IframeStore } from './store';
+export interface IframeContextProps {
+    state?: StoreApi<IframeStore>;
+    iframeElement?: HTMLIFrameElement;
+    setIframeElement: (element: HTMLIFrameElement) => void;
+    disableUrlField?: boolean;
+}
+export declare const IframeContext: React.Context<IframeContextProps>;

package/build/esm/editor-v2/context/iframeContext/iframeContext.js

@@ -0,0 +1,5 @@
+/**
+ * Context for iframe window
+ **/
+import React from 'react';
+export const IframeContext = React.createContext({ setIframeElement: () => { } });

package/build/esm/editor-v2/context/iframeContext/iframeProvider.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+interface IframeProviderProps extends PropsWithChildren {
+    initialUrl?: string;
+    disableUrlField?: boolean;
+}
+export declare const IframeProvider: (props: IframeProviderProps) => JSX.Element;
+export {};

package/build/esm/editor-v2/context/iframeContext/iframeProvider.js

@@ -0,0 +1,18 @@
+import React, { useRef, useState } from 'react';
+import { IframeContext } from './iframeContext';
+import { createIframeStore } from './store';
+export const IframeProvider = (props) => {
+    const { children, initialUrl, disableUrlField } = props;
+    const storeRef = useRef();
+    const [iframeElement, setIframeElement] = useState();
+    const setIframeElementFunc = (element) => setIframeElement(element);
+    if (!storeRef.current) {
+        storeRef.current = createIframeStore({ url: initialUrl });
+    }
+    return (React.createElement(IframeContext.Provider, { value: {
+            state: storeRef.current,
+            iframeElement,
+            setIframeElement: setIframeElementFunc,
+            disableUrlField,
+        } }, children));
+};

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

@@ -0,0 +1,4 @@
+export * from './iframeContext';
+export * from './iframeProvider';
+export * from './hooks/useIframeStore';
+export * from './store';

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

@@ -0,0 +1,4 @@
+export * from './iframeContext';
+export * from './iframeProvider';
+export * from './hooks/useIframeStore';
+export * from './store';

package/build/esm/editor-v2/context/iframeContext/store.d.ts

@@ -0,0 +1,26 @@
+import { WithStoreReducer } from '../../../common/types';
+export interface IframeState {
+    url: string;
+    height?: number;
+    zoom: number;
+}
+export interface IframeMethods extends WithStoreReducer {
+    setUrl: (url: string) => void;
+    setZoom: (zoom: number) => void;
+    increaseZoom: () => void;
+    decreaseZoom: () => void;
+}
+export type IframeStore = IframeState & IframeMethods;
+export declare const createIframeStore: (overrideInitialState?: Partial<IframeState> | undefined) => import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<IframeState & IframeMethods>, "subscribe"> & {
+    subscribe: {
+        (listener: (selectedState: IframeState & IframeMethods, previousSelectedState: IframeState & IframeMethods) => void): () => void;
+        <U>(selector: (state: IframeState & IframeMethods) => 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: (IframeState & IframeMethods) | Partial<IframeState & IframeMethods> | ((state: IframeState & IframeMethods) => (IframeState & IframeMethods) | Partial<IframeState & IframeMethods>), replace?: boolean | undefined, action?: A | undefined): void;
+}>;

package/build/esm/editor-v2/context/iframeContext/store.js

@@ -0,0 +1,42 @@
+import { ActionTypes } from '../../../common/types';
+import { ZOOM_STEPS } from '../../constants';
+import { initializeStore } from '../../utils/store';
+export const createIframeStore = initializeStore({
+    url: '',
+    height: 400,
+    zoom: 100,
+}, (set, get) => ({
+    setZoom: function (zoom) {
+        if (zoom > 0) {
+            set((state) => (Object.assign(Object.assign({}, state), { zoom })));
+        }
+    },
+    increaseZoom: function () {
+        const currentZoom = get().zoom;
+        for (const step of ZOOM_STEPS) {
+            if (currentZoom < step) {
+                get().setZoom(step);
+                break;
+            }
+        }
+    },
+    decreaseZoom: function () {
+        const currentZoom = get().zoom;
+        const reverseSteps = ZOOM_STEPS.slice().reverse();
+        for (const step of reverseSteps) {
+            if (currentZoom > step) {
+                get().setZoom(step);
+                break;
+            }
+        }
+    },
+    setUrl: (url) => set((state) => (Object.assign(Object.assign({}, state), { url }))),
+    reducer: (action) => {
+        switch (action.type) {
+            case ActionTypes.SetHeight: {
+                set((state) => (Object.assign(Object.assign({}, state), { height: action.payload.height + 200 })));
+                break;
+            }
+        }
+    },
+}));

package/build/esm/editor-v2/context/messagesContext/hooks/useMessageObserver.d.ts

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

package/build/esm/editor-v2/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/editor-v2/context/messagesContext/hooks/useMessageSender.d.ts

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