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

package/build/esm/editor-v2/components/Sidebar/Sidebar.js

@@ -0,0 +1,64 @@
+import React, { useMemo, useState } from 'react';
+import { Code, FolderTree, Gear, Rectangles4, Square } from '@gravity-ui/icons';
+import { Button, Icon, Label } from '@gravity-ui/uikit';
+import { block } from '../../../utils';
+import BlockConfig from '../BlockConfig/BlockConfig';
+import BlocksList from '../BlocksList/BlocksList';
+import GlobalConfig from '../GlobalConfig/GlobalConfig';
+import SourceCode from '../SourceCode/SourceCode';
+import Tree from '../Tree/Tree';
+import './Sidebar.css';
+const b = block('sidebar');
+export const Sidebar = ({ className, position, startMenu }) => {
+    const [currentTab, setCurrentTab] = useState(startMenu || 'blocks-list');
+    const defaultTabs = useMemo(() => [
+        {
+            id: 'blocks-list',
+            name: 'Блоки',
+            icon: Rectangles4,
+            component: BlocksList,
+            position: 'left',
+        },
+        {
+            id: 'global-config',
+            name: 'Глобальная конфигурация',
+            icon: Gear,
+            component: GlobalConfig,
+            position: 'left',
+        },
+        {
+            id: 'tree',
+            name: 'Дерево',
+            icon: FolderTree,
+            component: Tree,
+            position: 'left',
+        },
+        {
+            id: 'block-config',
+            name: 'Конфигурация блока',
+            icon: Square,
+            component: BlockConfig,
+            position: 'right',
+        },
+        {
+            id: 'source-code',
+            name: 'Исходный код',
+            icon: Code,
+            component: SourceCode,
+            position: 'both',
+        },
+    ], []);
+    const filteredTabs = defaultTabs.filter(({ position: tabPosition }) => tabPosition === 'both' || tabPosition === position);
+    const TabComponent = useMemo(() => {
+        const findTab = defaultTabs.find(({ id }) => id === currentTab);
+        return findTab === null || findTab === void 0 ? void 0 : findTab.component;
+    }, [currentTab, defaultTabs]);
+    return (React.createElement("div", { className: `${b(null, className)} ${b('', { position })}` },
+        React.createElement("div", { className: b('buttons-wrapper') },
+            React.createElement("div", { className: b('buttons') }, filteredTabs.map(({ id, icon, name }) => (React.createElement("div", { className: b('button-wrapper'), key: id },
+                React.createElement(Button, { view: currentTab === id ? 'action' : 'flat', size: "m", onClick: () => setCurrentTab(id) },
+                    React.createElement(Icon, { data: icon, size: 18 })),
+                React.createElement("div", { className: b('label-wrapper') },
+                    React.createElement(Label, { theme: 'normal', size: 'm' }, name))))))),
+        React.createElement("div", { className: b('body') }, TabComponent && React.createElement(TabComponent, null))));
+};

package/build/esm/editor-v2/components/Source/Source.css

@@ -0,0 +1,21 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+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);
+}
+
+.pc-source {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 8px;
+  gap: 8px;
+}
+.pc-source__text {
+  flex: 1;
+}

package/build/esm/editor-v2/components/Source/Source.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ClassNameProps } from '../../../models';
+import './Source.css';
+interface SourceProps extends ClassNameProps {
+}
+declare const Source: React.FC<SourceProps>;
+export default Source;

package/build/esm/editor-v2/components/Source/Source.js

@@ -0,0 +1,28 @@
+import React, { useCallback, useContext } from 'react';
+import { ArrowRotateRight } from '@gravity-ui/icons';
+import { Button, Icon, TextInput } from '@gravity-ui/uikit';
+import { block } from '../../../utils';
+import { useEditorStore } from '../../context/editorContext';
+import { IframeContext, useIframeStore } from '../../context/iframeContext';
+import './Source.css';
+const b = block('source');
+const Source = ({ className }) => {
+    const { url, setUrl } = useIframeStore();
+    const { resetInitialize } = useEditorStore();
+    const { disableUrlField } = useContext(IframeContext);
+    const onUpdateUrl = useCallback((value) => {
+        setUrl(value);
+        resetInitialize();
+    }, [resetInitialize, setUrl]);
+    const reloadIframe = () => {
+        setUrl('');
+        setTimeout(() => {
+            setUrl(url);
+        }, 0);
+    };
+    return (React.createElement("div", { className: b(null, className) },
+        React.createElement(Button, { view: "flat", size: "m", onClick: reloadIframe },
+            React.createElement(Icon, { data: ArrowRotateRight, size: 18 })),
+        React.createElement(TextInput, { disabled: disableUrlField, className: b('text'), size: "s", value: url, onUpdate: onUpdateUrl })));
+};
+export default Source;

package/build/esm/editor-v2/components/SourceCode/SourceCode.css

@@ -0,0 +1,32 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+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);
+}
+
+.pc-source-code {
+  padding: 10px;
+  white-space: pre;
+  font-family: var(--g-font-family-monospace);
+  font-size: var(--g-text-code-inline-1-font-size);
+  line-height: var(--g-text-code-inline-1-line-height);
+  font-weight: var(--g-text-code-font-weight);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.pc-source-code__code {
+  user-select: all;
+}
+.pc-source-code__textarea textarea {
+  font-family: var(--g-font-family-monospace);
+  font-size: var(--g-text-code-inline-1-font-size);
+  line-height: var(--g-text-code-inline-1-line-height);
+  font-weight: var(--g-text-code-font-weight);
+}

package/build/esm/editor-v2/components/SourceCode/SourceCode.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ClassNameProps } from '../../../models';
+import './SourceCode.css';
+interface SourceCodeProps extends ClassNameProps {
+}
+declare const SourceCode: React.FC<SourceCodeProps>;
+export default SourceCode;

package/build/esm/editor-v2/components/SourceCode/SourceCode.js

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { Button, Dialog, TextArea } from '@gravity-ui/uikit';
+import { block } from '../../../utils';
+import { useContentConfigStore } from '../../context/contentConfig/hooks/useContentConfigStore';
+import './SourceCode.css';
+const b = block('source-code');
+const SourceCode = ({ className }) => {
+    const { config, setConfig } = useContentConfigStore();
+    const [isOpen, setIsOpen] = useState(false);
+    const [tempConfig, setTempConfig] = useState('');
+    const onUpdate = () => {
+        let object;
+        try {
+            object = JSON.parse(tempConfig);
+        }
+        catch (_a) {
+            // eslint-disable-next-line no-console
+            console.error('JSON.parse failed');
+        }
+        setConfig(object);
+        setIsOpen(false);
+    };
+    return (React.createElement("div", { className: b(null, className) },
+        React.createElement(Button, { onClick: () => setIsOpen(true) }, "Update"),
+        React.createElement("div", { className: b('code') }, JSON.stringify(config, null, 2)),
+        React.createElement(Dialog, { onClose: () => setIsOpen(false), open: isOpen, size: 'l' },
+            React.createElement(Dialog.Header, { caption: "New configuration" }),
+            React.createElement(Dialog.Body, null,
+                React.createElement(TextArea, { className: b('textarea'), value: tempConfig, onUpdate: setTempConfig, rows: 30 })),
+            React.createElement(Dialog.Footer, { showError: false, listenKeyEnter: true, preset: 'default', textButtonApply: 'Apply', textButtonCancel: 'Cancel', onClickButtonApply: onUpdate, onClickButtonCancel: () => setIsOpen(false) }))));
+};
+export default SourceCode;

package/build/esm/editor-v2/components/TopBar/TopBar.css

@@ -0,0 +1,34 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+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);
+}
+
+.pc-topbar {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  width: 100%;
+  height: 40px;
+  border-bottom: 1px solid var(--g-color-line-generic);
+}
+.pc-topbar__switches {
+  display: flex;
+  align-items: center;
+  width: auto;
+  height: 100%;
+  padding: 0 12px;
+  gap: 12px;
+  border-right: 1px solid var(--g-color-line-generic);
+}
+.pc-topbar__source {
+  flex: 1;
+  width: 100%;
+  box-sizing: border-box;
+}

package/build/esm/editor-v2/components/TopBar/TopBar.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ClassNameProps } from '../../../models';
+import './TopBar.css';
+interface TopBarProps extends ClassNameProps {
+}
+declare const TopBar: React.FC<TopBarProps>;
+export default TopBar;

package/build/esm/editor-v2/components/TopBar/TopBar.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { block } from '../../../utils';
+import Source from '../Source/Source';
+import ViewSwitches from '../ViewSwitches/ViewSwitches';
+import './TopBar.css';
+const b = block('topbar');
+const TopBar = ({ className }) => {
+    return (React.createElement("div", { className: b(null, className) },
+        React.createElement("div", { className: b('switches') },
+            React.createElement(ViewSwitches, null)),
+        React.createElement(Source, { className: b('source') })));
+};
+export default TopBar;

package/build/esm/editor-v2/components/Tree/Tree.css

@@ -0,0 +1,148 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+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);
+}
+
+.pc-tree {
+  padding: 12px;
+}
+.pc-tree__item {
+  padding: 8px;
+  margin-bottom: 8px;
+}
+.pc-tree__item:last-child {
+  margin-bottom: 0;
+}
+.pc-tree__item_deep_1 {
+  position: relative;
+  margin-left: 16px;
+  width: calc(100% - 16px);
+}
+.pc-tree__item_deep_1:before {
+  content: "";
+  position: absolute;
+  right: calc(100% + 12px);
+  height: 100%;
+  width: 2px;
+  background-color: var(--g-color-line-generic-accent);
+  top: 0;
+}
+.pc-tree__item_deep_2 {
+  position: relative;
+  margin-left: 32px;
+  width: calc(100% - 32px);
+}
+.pc-tree__item_deep_2:before {
+  content: "";
+  position: absolute;
+  right: calc(100% + 12px);
+  height: 100%;
+  width: 2px;
+  background-color: var(--g-color-line-generic-accent);
+  top: 0;
+}
+.pc-tree__item_deep_3 {
+  position: relative;
+  margin-left: 48px;
+  width: calc(100% - 48px);
+}
+.pc-tree__item_deep_3:before {
+  content: "";
+  position: absolute;
+  right: calc(100% + 12px);
+  height: 100%;
+  width: 2px;
+  background-color: var(--g-color-line-generic-accent);
+  top: 0;
+}
+.pc-tree__item_deep_4 {
+  position: relative;
+  margin-left: 64px;
+  width: calc(100% - 64px);
+}
+.pc-tree__item_deep_4:before {
+  content: "";
+  position: absolute;
+  right: calc(100% + 12px);
+  height: 100%;
+  width: 2px;
+  background-color: var(--g-color-line-generic-accent);
+  top: 0;
+}
+.pc-tree__item_deep_5 {
+  position: relative;
+  margin-left: 80px;
+  width: calc(100% - 80px);
+}
+.pc-tree__item_deep_5:before {
+  content: "";
+  position: absolute;
+  right: calc(100% + 12px);
+  height: 100%;
+  width: 2px;
+  background-color: var(--g-color-line-generic-accent);
+  top: 0;
+}
+.pc-tree__item_deep_6 {
+  position: relative;
+  margin-left: 96px;
+  width: calc(100% - 96px);
+}
+.pc-tree__item_deep_6:before {
+  content: "";
+  position: absolute;
+  right: calc(100% + 12px);
+  height: 100%;
+  width: 2px;
+  background-color: var(--g-color-line-generic-accent);
+  top: 0;
+}
+.pc-tree__item_deep_7 {
+  position: relative;
+  margin-left: 112px;
+  width: calc(100% - 112px);
+}
+.pc-tree__item_deep_7:before {
+  content: "";
+  position: absolute;
+  right: calc(100% + 12px);
+  height: 100%;
+  width: 2px;
+  background-color: var(--g-color-line-generic-accent);
+  top: 0;
+}
+.pc-tree__item_deep_8 {
+  position: relative;
+  margin-left: 128px;
+  width: calc(100% - 128px);
+}
+.pc-tree__item_deep_8:before {
+  content: "";
+  position: absolute;
+  right: calc(100% + 12px);
+  height: 100%;
+  width: 2px;
+  background-color: var(--g-color-line-generic-accent);
+  top: 0;
+}
+.pc-tree__item_deep_9 {
+  position: relative;
+  margin-left: 144px;
+  width: calc(100% - 144px);
+}
+.pc-tree__item_deep_9:before {
+  content: "";
+  position: absolute;
+  right: calc(100% + 12px);
+  height: 100%;
+  width: 2px;
+  background-color: var(--g-color-line-generic-accent);
+  top: 0;
+}

package/build/esm/editor-v2/components/Tree/Tree.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { ItemConfig } from '../../../common/types';
+import './Tree.css';
+export interface TreeProps {
+    blocks: ItemConfig[];
+}
+declare const Tree: (_p: PropsWithChildren<TreeProps>) => JSX.Element;
+export default Tree;

package/build/esm/editor-v2/components/Tree/Tree.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Card } from '@gravity-ui/uikit';
+import { block } from '../../../utils';
+import { useContentConfigStore } from '../../context/contentConfig';
+import './Tree.css';
+const b = block('tree');
+const generateTree = (items) => {
+    return items.map((item) => {
+        var _a;
+        let children;
+        if ('children' in item && ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length)) {
+            children = generateTree(item.children);
+        }
+        return {
+            type: item.type,
+            children,
+        };
+    });
+};
+const Tree = (_p) => {
+    const { config } = useContentConfigStore();
+    const blockTree = generateTree(config.blocks);
+    const renderTree = (items, deepLevel = 0) => {
+        return items.map(({ type, children }, index) => (React.createElement(React.Fragment, { key: index },
+            React.createElement(Card, { className: b('item', { deep: deepLevel }) }, type),
+            children && renderTree(children, deepLevel + 1))));
+    };
+    return React.createElement("div", { className: b() }, renderTree(blockTree));
+};
+export default Tree;

package/build/esm/editor-v2/components/ViewSwitches/ViewSwitches.css

@@ -0,0 +1,16 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+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);
+}
+
+.pc-view-switches {
+  display: inline-flex;
+  gap: 12px;
+}

package/build/esm/editor-v2/components/ViewSwitches/ViewSwitches.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { RadioButtonOption } from '@gravity-ui/uikit';
+import { ClassNameProps } from '../../../models';
+import './ViewSwitches.css';
+interface ViewSwitchesProps extends ClassNameProps {
+}
+export declare const options2: RadioButtonOption[];
+declare const ViewSwitches: React.FC<ViewSwitchesProps>;
+export default ViewSwitches;

package/build/esm/editor-v2/components/ViewSwitches/ViewSwitches.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Display, Eye, Smartphone, Square, SquareDashedText } from '@gravity-ui/icons';
+import { Icon, RadioButton } from '@gravity-ui/uikit';
+import { block } from '../../../utils';
+import './ViewSwitches.css';
+const b = block('view-switches');
+const options1 = [
+    { value: 'edit-mode', content: React.createElement(Icon, { data: SquareDashedText }) },
+    { value: 'preview-mode', content: React.createElement(Icon, { data: Eye }) },
+];
+export const options2 = [
+    { value: 'desktop-mode', content: React.createElement(Icon, { data: Display }) },
+    { value: 'tablet-mode', content: React.createElement(Icon, { data: Square }) },
+    { value: 'phone-mode', content: React.createElement(Icon, { data: Smartphone }) },
+];
+// TODO: To be done
+const ViewSwitches = ({ className }) => {
+    return (React.createElement("div", { className: b(null, className) },
+        React.createElement(RadioButton, { className: b('switch'), name: "group1", defaultValue: options1[0].value, options: options1, size: "m", disabled: true }),
+        React.createElement(RadioButton, { className: b('switch'), name: "group2", defaultValue: options2[0].value, options: options2, size: "m", disabled: true })));
+};
+export default ViewSwitches;

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

@@ -0,0 +1,54 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+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);
+}
+
+.pc-editor {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+.pc-editor__header {
+  height: 0px;
+  width: 100%;
+  border-bottom: 1px solid var(--g-color-line-generic);
+}
+.pc-editor__body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  width: 100%;
+  max-height: calc(100% - 0px);
+}
+.pc-editor__canvas {
+  flex: 1;
+}
+.pc-editor__draggable {
+  width: 12px;
+  height: 100%;
+  cursor: col-resize;
+  background-color: var(--g-color-line-generic);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--g-color-base-background);
+}
+.pc-editor__overlay {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  z-index: 100;
+}

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>;