@gravity-ui/page-constructor 6.3.1 → 6.3.2-alpha.2

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import _ from 'lodash';
+import DynamicForm from "../../components/DynamicForm/DynamicForm.js";
+import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
+import { generateChildrenPathFromArray } from "../../utils/index.js";
+import { editorCn } from "../../utils/cn.js";
+import './BlockConfig.css';
+const b = editorCn('block-config');
+const BlockConfig = ({ className }) => {
+    const { selectedBlock, content, blocks, subBlocks, updateField } = useMainEditorStore();
+    const currentBlockPath = selectedBlock ? generateChildrenPathFromArray(selectedBlock) : '[]';
+    const currentConfig = _.get(content.blocks, currentBlockPath || '');
+    const currentSchema = [...blocks, ...subBlocks].find(({ type }) => type === currentConfig?.type);
+    const onUpdate = (key, value) => {
+        updateField('blocks' + currentBlockPath + '.' + key, value);
+    };
+    if (!currentConfig) {
+        return _jsx("div", { className: b('empty'), children: "Select block for start" });
+    }
+    if (!currentSchema) {
+        return _jsxs("div", { className: b('empty'), children: ["Not supported: ", currentConfig.type] });
+    }
+    return (_jsxs("div", { className: b(null, className), children: [_jsx("div", { className: b('title'), children: currentSchema.schema.name }), _jsx("div", { className: b('form'), children: _jsx(DynamicForm, { contentConfig: currentConfig, blockConfig: currentSchema.schema.inputs, onUpdate: onUpdate }) })] }));
+};
+export default BlockConfig;
+//# sourceMappingURL=BlockConfig.js.map

package/build/esm/editor-v2/containers/BlockConfig/BlockConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockConfig.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/BlockConfig/BlockConfig.tsx"],"names":[],"mappings":";AAAA,OAAO,CAAC,MAAM,QAAQ,CAAC;AAGvB,OAAO,WAAW,oDAAiD;AACnE,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAClE,OAAO,EAAC,6BAA6B,EAAC,6BAAoB;AAC1D,OAAO,EAAC,QAAQ,EAAC,0BAAuB;AAExC,OAAO,mBAAmB,CAAC;AAE3B,MAAM,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;AAMnC,MAAM,WAAW,GAAG,CAAC,EAAC,SAAS,EAAmB,EAAE,EAAE;IAClD,MAAM,EAAC,aAAa,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAC,GAAG,kBAAkB,EAAE,CAAC;IAEtF,MAAM,gBAAgB,GAAG,aAAa,CAAC,CAAC,CAAC,6BAA6B,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7F,MAAM,aAAa,GAAG,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,gBAAgB,IAAI,EAAE,CAAC,CAAC;IACpE,MAAM,aAAa,GAAG,CAAC,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,EAAC,IAAI,EAAC,EAAE,EAAE,CAAC,IAAI,KAAK,aAAa,EAAE,IAAI,CAAC,CAAC;IAE/F,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,KAAuB,EAAE,EAAE;QACtD,WAAW,CAAC,QAAQ,GAAG,gBAAgB,GAAG,GAAG,GAAG,GAAG,EAAE,KAAK,CAAC,CAAC;IAChE,CAAC,CAAC;IAEF,IAAI,CAAC,aAAa,EAAE,CAAC;QACjB,OAAO,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,uCAA8B,CAAC;IACpE,CAAC;IAED,IAAI,CAAC,aAAa,EAAE,CAAC;QACjB,OAAO,eAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,gCAAkB,aAAa,CAAC,IAAI,IAAO,CAAC;IACjF,CAAC;IAED,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC9B,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YAAG,aAAa,CAAC,MAAM,CAAC,IAAI,GAAO,EAC7D,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,KAAC,WAAW,IACR,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EACxC,QAAQ,EAAE,QAAQ,GACpB,GACA,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import _ from 'lodash';\n\nimport {DynamicFormValue} from '../../../../common/types';\nimport DynamicForm from '../../components/DynamicForm/DynamicForm';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {generateChildrenPathFromArray} from '../../utils';\nimport {editorCn} from '../../utils/cn';\n\nimport './BlockConfig.scss';\n\nconst b = editorCn('block-config');\n\ninterface BlockConfigProps {\n    className?: string;\n}\n\nconst BlockConfig = ({className}: BlockConfigProps) => {\n    const {selectedBlock, content, blocks, subBlocks, updateField} = useMainEditorStore();\n\n    const currentBlockPath = selectedBlock ? generateChildrenPathFromArray(selectedBlock) : '[]';\n\n    const currentConfig = _.get(content.blocks, currentBlockPath || '');\n    const currentSchema = [...blocks, ...subBlocks].find(({type}) => type === currentConfig?.type);\n\n    const onUpdate = (key: string, value: DynamicFormValue) => {\n        updateField('blocks' + currentBlockPath + '.' + key, value);\n    };\n\n    if (!currentConfig) {\n        return <div className={b('empty')}>Select block for start</div>;\n    }\n\n    if (!currentSchema) {\n        return <div className={b('empty')}>Not supported: {currentConfig.type}</div>;\n    }\n\n    return (\n        <div className={b(null, className)}>\n            <div className={b('title')}>{currentSchema.schema.name}</div>\n            <div className={b('form')}>\n                <DynamicForm\n                    contentConfig={currentConfig}\n                    blockConfig={currentSchema.schema.inputs}\n                    onUpdate={onUpdate}\n                />\n            </div>\n        </div>\n    );\n};\n\nexport default BlockConfig;\n"]}

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

@@ -0,0 +1,65 @@
+.g-root {
+  --g-color-base-brand: var(--g-color-private-black-550-solid);
+  --g-color-base-brand-hover: var(--g-color-private-black-600-solid);
+  --g-color-base-selection: var(--g-color-private-black-200);
+  --g-color-base-selection-hover: var(--g-color-private-black-300);
+  --g-color-base-brand: var(--g-color-text-primary);
+  --g-color-base-brand-hover: var(--g-color-text-complementary);
+  --g-color-text-brand-contrast: var(--g-color-text-light-primary);
+  --g-color-line-brand: var(--g-color-text-primary);
+  --g-color-text-brand: var(--g-color-private-brand-700-solid);
+  --g-color-text-brand-heavy: var(--g-color-private-black-700-solid);
+}
+
+.pceditor-blocks-list {
+  padding: 16px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.pceditor-blocks-list__card {
+  padding: 8px;
+  cursor: grab;
+  user-select: none;
+  margin-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  text-align: center;
+  gap: 4px;
+}
+.pceditor-blocks-list__card:active {
+  background-color: var(--g-color-base-generic-hover);
+  cursor: grabbing;
+}
+.pceditor-blocks-list__name {
+  justify-self: flex-end;
+  color: var(--g-color-text-dark-secondary);
+}
+.pceditor-blocks-list__title {
+  color: var(--g-color-text-dark-secondary);
+  margin-bottom: 10px;
+}
+.pceditor-blocks-list__icon {
+  color: var(--g-color-text-dark-complementary);
+}
+.pceditor-blocks-list__group {
+  padding-bottom: 12px;
+  margin-top: 12px;
+  border-bottom: 1px solid var(--g-color-line-generic);
+}
+.pceditor-blocks-list__group:first-child {
+  margin-top: 0;
+}
+.pceditor-blocks-list__group:last-child {
+  border-bottom: none;
+}
+.pceditor-blocks-list__group-items {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+.pceditor-blocks-list__search-icon {
+  margin-left: 8px;
+}

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

@@ -0,0 +1,3 @@
+import './BlocksList.css';
+declare const BlocksList: () => import("react/jsx-runtime").JSX.Element;
+export default BlocksList;

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Magnifier, SquareBars } from '@gravity-ui/icons';
+import { Card, Icon, TextInput } from '@gravity-ui/uikit';
+import * as React from 'react';
+import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
+import { editorCn } from "../../utils/cn.js";
+import './BlocksList.css';
+const b = editorCn('blocks-list');
+const BlocksList = () => {
+    const { blocks, enableInsertMode } = useMainEditorStore();
+    const [search, setSearch] = React.useState('');
+    const onMouseDown = React.useCallback((blockType) => {
+        enableInsertMode(blockType);
+    }, [enableInsertMode]);
+    const groups = React.useMemo(() => {
+        return blocks.reduce((acc, currentBlock) => {
+            const group = currentBlock.schema.group;
+            if (search && currentBlock.type.indexOf(search) === -1) {
+                return acc;
+            }
+            if (group) {
+                if (!acc[group]) {
+                    /* eslint-disable no-param-reassign */
+                    acc[group] = [];
+                }
+                acc[group].push(currentBlock);
+            }
+            else {
+                if (!acc['other']) {
+                    /* eslint-disable no-param-reassign */
+                    acc['other'] = [];
+                }
+                acc['other'].push(currentBlock);
+            }
+            return acc;
+        }, {});
+    }, [blocks, search]);
+    return (_jsxs("div", { className: b(), children: [_jsx("div", { className: b('search'), children: _jsx(TextInput, { hasClear: true, placeholder: "Search block", onUpdate: setSearch, value: search, startContent: _jsx(Icon, { className: b('search-icon'), data: Magnifier }) }) }), Object.entries(groups).map(([key, groupBlocks]) => (_jsxs("div", { className: b('group'), children: [_jsx("div", { className: b('title'), children: key }), _jsx("div", { className: b('group-items'), children: groupBlocks.map(({ type, schema: { name, previewImg } }) => (_jsxs(Card, { className: b('card'), onMouseDown: () => onMouseDown(type), children: [_jsx("div", { children: previewImg ? (_jsx("img", { src: previewImg, alt: "" })) : (_jsx(Icon, { className: b('icon'), size: 45, data: SquareBars })) }), _jsx("div", { className: b('name'), children: name })] }, type))) })] }, key)))] }));
+};
+export default BlocksList;
+//# sourceMappingURL=BlocksList.js.map

package/build/esm/editor-v2/containers/BlocksList/BlocksList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlocksList.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/BlocksList/BlocksList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Magnifier, SquareBars} from '@gravity-ui/icons';\nimport {Card, Icon, TextInput} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {ItemConfig} from '../../../../common/types';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\n\nimport './BlocksList.scss';\n\nconst b = editorCn('blocks-list');\n\ninterface BlockGroups {\n    [key: string]: ItemConfig[];\n}\n\nconst BlocksList = () => {\n    const {blocks, enableInsertMode} = useMainEditorStore();\n    const [search, setSearch] = React.useState('');\n\n    const onMouseDown = React.useCallback(\n        (blockType: string) => {\n            enableInsertMode(blockType);\n        },\n        [enableInsertMode],\n    );\n\n    const groups = React.useMemo(() => {\n        return blocks.reduce<BlockGroups>((acc, currentBlock) => {\n            const group = currentBlock.schema.group;\n            if (search && currentBlock.type.indexOf(search) === -1) {\n                return acc;\n            }\n            if (group) {\n                if (!acc[group]) {\n                    /* eslint-disable no-param-reassign */\n                    acc[group] = [];\n                }\n                acc[group].push(currentBlock);\n            } else {\n                if (!acc['other']) {\n                    /* eslint-disable no-param-reassign */\n                    acc['other'] = [];\n                }\n                acc['other'].push(currentBlock);\n            }\n\n            return acc;\n        }, {} as BlockGroups);\n    }, [blocks, search]);\n\n    return (\n        <div className={b()}>\n            <div className={b('search')}>\n                <TextInput\n                    hasClear\n                    placeholder=\"Search block\"\n                    onUpdate={setSearch}\n                    value={search}\n                    startContent={<Icon className={b('search-icon')} data={Magnifier} />}\n                />\n            </div>\n            {Object.entries(groups).map(([key, groupBlocks]) => (\n                <div className={b('group')} key={key}>\n                    <div className={b('title')}>{key}</div>\n                    <div className={b('group-items')}>\n                        {groupBlocks.map(({type, schema: {name, previewImg}}) => (\n                            <Card\n                                key={type}\n                                className={b('card')}\n                                onMouseDown={() => onMouseDown(type)}\n                            >\n                                <div>\n                                    {previewImg ? (\n                                        <img src={previewImg} alt=\"\" />\n                                    ) : (\n                                        <Icon className={b('icon')} size={45} data={SquareBars} />\n                                    )}\n                                </div>\n                                <div className={b('name')}>{name}</div>\n                            </Card>\n                        ))}\n                    </div>\n                </div>\n            ))}\n        </div>\n    );\n};\n\nexport default BlocksList;\n"]}

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

@@ -0,0 +1,51 @@
+.g-root {
+  --g-color-base-brand: var(--g-color-private-black-550-solid);
+  --g-color-base-brand-hover: var(--g-color-private-black-600-solid);
+  --g-color-base-selection: var(--g-color-private-black-200);
+  --g-color-base-selection-hover: var(--g-color-private-black-300);
+  --g-color-base-brand: var(--g-color-text-primary);
+  --g-color-base-brand-hover: var(--g-color-text-complementary);
+  --g-color-text-brand-contrast: var(--g-color-text-light-primary);
+  --g-color-line-brand: var(--g-color-text-primary);
+  --g-color-text-brand: var(--g-color-private-brand-700-solid);
+  --g-color-text-brand-heavy: var(--g-color-private-black-700-solid);
+}
+
+.pceditor-editor {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+.pceditor-editor__header {
+  height: 0px;
+  width: 100%;
+  border-bottom: 1px solid var(--g-color-line-generic);
+}
+.pceditor-editor__body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  width: 100%;
+  max-height: calc(100% - 0px);
+}
+.pceditor-editor__canvas {
+  flex: 1;
+}
+.pceditor-editor__overlay {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  z-index: 100;
+}
+.pceditor-editor__debug-store {
+  position: fixed;
+  right: 8px;
+  bottom: 8px;
+  z-index: 1000;
+}

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { PageContentWithNavigation } from "../../../models/index.js";
+import './Editor.css';
+interface SidebarTabComponent {
+    id: string;
+    title: string;
+    component: React.ElementType;
+}
+interface EditorViewProps {
+    onUpdate?: (pageContent: PageContentWithNavigation) => void;
+    initialUrl: string;
+    disableUrlField?: boolean;
+    componentsConfig?: {
+        middleTop?: React.ElementType;
+        leftTop?: React.ElementType[];
+        rightTop?: React.ElementType[];
+        leftTabs?: SidebarTabComponent[];
+        rightTabs?: SidebarTabComponent[];
+    };
+}
+export declare const Editor: (props: EditorViewProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Panels } from "../../components/Panels/Panels.js";
+import { Sidebar } from "../../components/Sidebar/Sidebar.js";
+import StoreViewer from "../../components/StoreViewer/StoreViewer.js";
+import BigOverlay from "../BigOverlay/BigOverlay.js";
+import MiddleScreen from "../MiddleScreen/MiddleScreen.js";
+import { MainEditorStoreProvider } from "../../context/editorStore/index.js";
+import { IframeProvider } from "../../context/iframeContext/index.js";
+import { useEditorTabs } from "../../hooks/useEditorTabs.js";
+import useMainEditorInitialize from "../../hooks/useMainEditorInitialize.js";
+import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
+import { editorCn } from "../../utils/cn.js";
+import './Editor.css';
+const b = editorCn('editor');
+const EditorView = ({ componentsConfig = {} }) => {
+    const store = useMainEditorStore();
+    const { manipulateOverlayMode, disableMode } = store;
+    useMainEditorInitialize();
+    // Disable insert mode on any MouseUp event
+    // Maybe should be attached to body
+    const onMouseUp = React.useCallback((e) => {
+        if (manipulateOverlayMode) {
+            e.preventDefault();
+            disableMode();
+        }
+    }, [disableMode, manipulateOverlayMode]);
+    const { left, right } = useEditorTabs(componentsConfig);
+    return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    _jsxs("div", { className: b(), onMouseUp: onMouseUp, children: [_jsx("div", { className: b('body'), children: _jsx(Panels, { left: _jsx(Sidebar, { tabs: left, top: componentsConfig.leftTop }), right: _jsx(Sidebar, { tabs: right, top: componentsConfig.rightTop, defaultTab: "block-config" }), middle: _jsx(MiddleScreen, { CustomTop: componentsConfig.middleTop }) }) }), _jsx(BigOverlay, { className: b('overlay') }), _jsx(StoreViewer, { className: b('debug-store'), store: store })] }));
+};
+export const Editor = (props) => {
+    return (_jsx(IframeProvider, { initialUrl: props.initialUrl, disableUrlField: props.disableUrlField, children: _jsx(MainEditorStoreProvider, { children: _jsx(EditorView, { ...props }) }) }));
+};
+//# sourceMappingURL=Editor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Editor.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/Editor/Editor.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,MAAM,EAAC,0CAAuC;AACtD,OAAO,EAAC,OAAO,EAAC,4CAAyC;AACzD,OAAO,WAAW,oDAAiD;AACnE,OAAO,UAAU,oCAA+C;AAChE,OAAO,YAAY,wCAAmD;AACtE,OAAO,EAAC,uBAAuB,EAAC,2CAAkC;AAClE,OAAO,EAAC,cAAc,EAAC,6CAAoC;AAC3D,OAAO,EAAC,aAAa,EAAC,qCAAkC;AACxD,OAAO,uBAAuB,+CAA4C;AAC1E,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAClE,OAAO,EAAC,QAAQ,EAAC,0BAAuB;AAExC,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;AAoB7B,MAAM,UAAU,GAAG,CAAC,EAAC,gBAAgB,GAAG,EAAE,EAAkB,EAAE,EAAE;IAC5D,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAC;IACnC,MAAM,EAAC,qBAAqB,EAAE,WAAW,EAAC,GAAG,KAAK,CAAC;IAEnD,uBAAuB,EAAE,CAAC;IAE1B,2CAA2C;IAC3C,mCAAmC;IACnC,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAC/B,CAAC,CAAmB,EAAE,EAAE;QACpB,IAAI,qBAAqB,EAAE,CAAC;YACxB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,WAAW,EAAE,CAAC;QAClB,CAAC;IACL,CAAC,EACD,CAAC,WAAW,EAAE,qBAAqB,CAAC,CACvC,CAAC;IACF,MAAM,EAAC,IAAI,EAAE,KAAK,EAAC,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAEtD,OAAO;IACH,mEAAmE;IACnE,eAAK,SAAS,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,aACrC,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,KAAC,MAAM,IACH,IAAI,EAAE,KAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,gBAAgB,CAAC,OAAO,GAAI,EAC5D,KAAK,EACD,KAAC,OAAO,IACJ,IAAI,EAAE,KAAK,EACX,GAAG,EAAE,gBAAgB,CAAC,QAAQ,EAC9B,UAAU,EAAC,cAAc,GAC3B,EAEN,MAAM,EAAE,KAAC,YAAY,IAAC,SAAS,EAAE,gBAAgB,CAAC,SAAS,GAAI,GACjE,GACA,EACN,KAAC,UAAU,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,GAAI,EACvC,KAAC,WAAW,IAAC,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,GAAI,IACxD,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAsB,EAAE,EAAE;IAC7C,OAAO,CACH,KAAC,cAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,eAAe,EAAE,KAAK,CAAC,eAAe,YAChF,KAAC,uBAAuB,cACpB,KAAC,UAAU,OAAK,KAAK,GAAI,GACH,GACb,CACpB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {PageContentWithNavigation} from '../../../models';\nimport {Panels} from '../../components/Panels/Panels';\nimport {Sidebar} from '../../components/Sidebar/Sidebar';\nimport StoreViewer from '../../components/StoreViewer/StoreViewer';\nimport BigOverlay from '../../containers/BigOverlay/BigOverlay';\nimport MiddleScreen from '../../containers/MiddleScreen/MiddleScreen';\nimport {MainEditorStoreProvider} from '../../context/editorStore';\nimport {IframeProvider} from '../../context/iframeContext';\nimport {useEditorTabs} from '../../hooks/useEditorTabs';\nimport useMainEditorInitialize from '../../hooks/useMainEditorInitialize';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\n\nimport './Editor.scss';\n\nconst b = editorCn('editor');\n\ninterface SidebarTabComponent {\n    id: string;\n    title: string;\n    component: React.ElementType;\n}\ninterface EditorViewProps {\n    onUpdate?: (pageContent: PageContentWithNavigation) => void;\n    initialUrl: string;\n    disableUrlField?: boolean;\n    componentsConfig?: {\n        middleTop?: React.ElementType;\n        leftTop?: React.ElementType[];\n        rightTop?: React.ElementType[];\n        leftTabs?: SidebarTabComponent[];\n        rightTabs?: SidebarTabComponent[];\n    };\n}\n\nconst EditorView = ({componentsConfig = {}}: EditorViewProps) => {\n    const store = useMainEditorStore();\n    const {manipulateOverlayMode, disableMode} = store;\n\n    useMainEditorInitialize();\n\n    // Disable insert mode on any MouseUp event\n    // Maybe should be attached to body\n    const onMouseUp = React.useCallback(\n        (e: React.MouseEvent) => {\n            if (manipulateOverlayMode) {\n                e.preventDefault();\n                disableMode();\n            }\n        },\n        [disableMode, manipulateOverlayMode],\n    );\n    const {left, right} = useEditorTabs(componentsConfig);\n\n    return (\n        // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n        <div className={b()} onMouseUp={onMouseUp}>\n            <div className={b('body')}>\n                <Panels\n                    left={<Sidebar tabs={left} top={componentsConfig.leftTop} />}\n                    right={\n                        <Sidebar\n                            tabs={right}\n                            top={componentsConfig.rightTop}\n                            defaultTab=\"block-config\"\n                        />\n                    }\n                    middle={<MiddleScreen CustomTop={componentsConfig.middleTop} />}\n                />\n            </div>\n            <BigOverlay className={b('overlay')} />\n            <StoreViewer className={b('debug-store')} store={store} />\n        </div>\n    );\n};\n\nexport const Editor = (props: EditorViewProps) => {\n    return (\n        <IframeProvider initialUrl={props.initialUrl} disableUrlField={props.disableUrlField}>\n            <MainEditorStoreProvider>\n                <EditorView {...props} />\n            </MainEditorStoreProvider>\n        </IframeProvider>\n    );\n};\n"]}

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

@@ -0,0 +1,24 @@
+.g-root {
+  --g-color-base-brand: var(--g-color-private-black-550-solid);
+  --g-color-base-brand-hover: var(--g-color-private-black-600-solid);
+  --g-color-base-selection: var(--g-color-private-black-200);
+  --g-color-base-selection-hover: var(--g-color-private-black-300);
+  --g-color-base-brand: var(--g-color-text-primary);
+  --g-color-base-brand-hover: var(--g-color-text-complementary);
+  --g-color-text-brand-contrast: var(--g-color-text-light-primary);
+  --g-color-line-brand: var(--g-color-text-primary);
+  --g-color-text-brand: var(--g-color-private-brand-700-solid);
+  --g-color-text-brand-heavy: var(--g-color-private-black-700-solid);
+}
+
+.pceditor-global-config {
+  padding: 12px;
+}
+.pceditor-global-config__title {
+  margin-bottom: 16px;
+  margin-top: 8px;
+  font-family: var(--g-text-subheader-font-family);
+  font-weight: var(--g-text-subheader-font-weight);
+  font-size: var(--g-text-subheader-3-font-size);
+  line-height: var(--g-text-subheader-3-line-height);
+}

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

@@ -0,0 +1,6 @@
+import './GlobalConfig.css';
+export interface GlobalConfigProps {
+    className?: string;
+}
+declare const GlobalConfig: ({ className }: GlobalConfigProps) => import("react/jsx-runtime").JSX.Element;
+export default GlobalConfig;

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import DynamicForm from "../../components/DynamicForm/DynamicForm.js";
+import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
+import { editorCn } from "../../utils/cn.js";
+import './GlobalConfig.css';
+const b = editorCn('global-config');
+const GlobalConfig = ({ className }) => {
+    const { global, content, updateField } = useMainEditorStore();
+    const onUpdate = (key, value) => {
+        updateField('navigation.' + key, value);
+    };
+    return (_jsxs("div", { className: b(null, className), children: [_jsx("div", { className: b('title'), children: "Global Config" }), _jsx(DynamicForm, { contentConfig: content.navigation, blockConfig: global, onUpdate: onUpdate })] }));
+};
+export default GlobalConfig;
+//# sourceMappingURL=GlobalConfig.js.map

package/build/esm/editor-v2/containers/GlobalConfig/GlobalConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalConfig.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/GlobalConfig/GlobalConfig.tsx"],"names":[],"mappings":";AACA,OAAO,WAAW,oDAAiD;AACnE,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAClE,OAAO,EAAC,QAAQ,EAAC,0BAAuB;AAExC,OAAO,oBAAoB,CAAC;AAE5B,MAAM,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAMpC,MAAM,YAAY,GAAG,CAAC,EAAC,SAAS,EAAoB,EAAE,EAAE;IACpD,MAAM,EAAC,MAAM,EAAE,OAAO,EAAE,WAAW,EAAC,GAAG,kBAAkB,EAAE,CAAC;IAE5D,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,KAAuB,EAAE,EAAE;QACtD,WAAW,CAAC,aAAa,GAAG,GAAG,EAAE,KAAK,CAAC,CAAC;IAC5C,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC9B,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,8BAAqB,EAC/C,KAAC,WAAW,IACR,aAAa,EAAE,OAAO,CAAC,UAAU,EACjC,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,QAAQ,GACpB,IACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {DynamicFormValue} from '../../../../common/types';\nimport DynamicForm from '../../components/DynamicForm/DynamicForm';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\n\nimport './GlobalConfig.scss';\n\nconst b = editorCn('global-config');\n\nexport interface GlobalConfigProps {\n    className?: string;\n}\n\nconst GlobalConfig = ({className}: GlobalConfigProps) => {\n    const {global, content, updateField} = useMainEditorStore();\n\n    const onUpdate = (key: string, value: DynamicFormValue) => {\n        updateField('navigation.' + key, value);\n    };\n\n    return (\n        <div className={b(null, className)}>\n            <div className={b('title')}>Global Config</div>\n            <DynamicForm\n                contentConfig={content.navigation}\n                blockConfig={global}\n                onUpdate={onUpdate}\n            />\n        </div>\n    );\n};\n\nexport default GlobalConfig;\n"]}

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

@@ -0,0 +1,62 @@
+.g-root {
+  --g-color-base-brand: var(--g-color-private-black-550-solid);
+  --g-color-base-brand-hover: var(--g-color-private-black-600-solid);
+  --g-color-base-selection: var(--g-color-private-black-200);
+  --g-color-base-selection-hover: var(--g-color-private-black-300);
+  --g-color-base-brand: var(--g-color-text-primary);
+  --g-color-base-brand-hover: var(--g-color-text-complementary);
+  --g-color-text-brand-contrast: var(--g-color-text-light-primary);
+  --g-color-line-brand: var(--g-color-text-primary);
+  --g-color-text-brand: var(--g-color-private-brand-700-solid);
+  --g-color-text-brand-heavy: var(--g-color-private-black-700-solid);
+}
+
+.pceditor-middle-screen {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.pceditor-middle-screen__topbar {
+  flex: 0 0 auto;
+}
+.pceditor-middle-screen__content {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  background-color: var(--g-color-text-dark-secondary);
+}
+.pceditor-middle-screen__wrapper {
+  width: 100%;
+  height: 100%;
+  margin: auto;
+}
+.pceditor-middle-screen__canvas {
+  transform-origin: left top;
+  overflow-y: scroll;
+  position: relative;
+  height: 100%;
+}
+.pceditor-middle-screen__overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.pceditor-middle-screen__border {
+  position: absolute;
+  border: 3px var(--g-color-line-brand) solid;
+  border-radius: 10px;
+}
+.pceditor-middle-screen__loading {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--g-color-base-background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import './MiddleScreen.css';
+interface MiddleScreenProps {
+    className?: string;
+    CustomTop?: React.ElementType;
+}
+declare const MiddleScreen: ({ className, CustomTop }: MiddleScreenProps) => import("react/jsx-runtime").JSX.Element;
+export default MiddleScreen;

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Loader } from '@gravity-ui/uikit';
+import * as React from 'react';
+import { usePostMessageAPIListener } from "../../../../common/postMessage.js";
+import { IframeContext } from "../../context/iframeContext/index.js";
+import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
+import { editorCn } from "../../utils/cn.js";
+import Overlay from "../Overlay/Overlay.js";
+import './MiddleScreen.css';
+const b = editorCn('middle-screen');
+const MiddleScreen = ({ className, CustomTop }) => {
+    const { zoom, initialized, deviceWidth } = useMainEditorStore();
+    const { url, setIframeElement } = React.useContext(IframeContext);
+    const [canvasRef, setCanvasRef] = React.useState(null);
+    const [height, setHeight] = React.useState(0);
+    const onResize = React.useCallback((newHeight) => {
+        setHeight(newHeight + 500);
+    }, [setHeight]);
+    usePostMessageAPIListener('ON_RESIZE', ({ height: newHeight }) => {
+        onResize(newHeight);
+    });
+    usePostMessageAPIListener('ON_INIT', ({ height: newHeight }) => {
+        onResize(newHeight);
+    });
+    return (_jsxs("div", { className: b(null, className), children: [CustomTop ? (_jsx("div", { className: b('topbar'), children: _jsx(CustomTop, {}) })) : null, _jsx("div", { className: b('content'), children: _jsx("div", { className: b('wrapper'), style: { width: deviceWidth }, children: _jsxs("div", { ref: setCanvasRef, className: b('canvas', { hidden: !initialized }), style: {
+                            transform: `scale(${zoom}%)`,
+                            height: `${(100 / zoom) * 100}%`,
+                            width: `${(100 / zoom) * 100}%`,
+                        }, children: [_jsx("iframe", { ref: (instance) => instance && setIframeElement(instance), className: b('iframe'), src: url, height: `${height}px`, width: "100%", frameBorder: "0", title: "Page Constructor Iframe" }), _jsx(Overlay, { className: b('overlay'), canvasElement: canvasRef }), !initialized && (_jsx("div", { className: b('loading'), children: _jsx(Loader, { size: 'l' }) }))] }) }) })] }));
+};
+export default MiddleScreen;
+//# sourceMappingURL=MiddleScreen.js.map

package/build/esm/editor-v2/containers/MiddleScreen/MiddleScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiddleScreen.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/MiddleScreen/MiddleScreen.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Loader} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {usePostMessageAPIListener} from '../../../../common/postMessage';\nimport {IframeContext} from '../../context/iframeContext';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\nimport Overlay from '../Overlay/Overlay';\n\nimport './MiddleScreen.scss';\n\nconst b = editorCn('middle-screen');\n\ninterface MiddleScreenProps {\n    className?: string;\n    CustomTop?: React.ElementType;\n}\n\nconst MiddleScreen = ({className, CustomTop}: MiddleScreenProps) => {\n    const {zoom, initialized, deviceWidth} = useMainEditorStore();\n    const {url, setIframeElement} = React.useContext(IframeContext);\n    const [canvasRef, setCanvasRef] = React.useState<HTMLDivElement | null>(null);\n    const [height, setHeight] = React.useState(0);\n\n    const onResize = React.useCallback(\n        (newHeight: number) => {\n            setHeight(newHeight + 500);\n        },\n        [setHeight],\n    );\n\n    usePostMessageAPIListener('ON_RESIZE', ({height: newHeight}) => {\n        onResize(newHeight);\n    });\n\n    usePostMessageAPIListener('ON_INIT', ({height: newHeight}) => {\n        onResize(newHeight);\n    });\n\n    return (\n        <div className={b(null, className)}>\n            {CustomTop ? (\n                <div className={b('topbar')}>\n                    <CustomTop />\n                </div>\n            ) : null}\n            <div className={b('content')}>\n                <div className={b('wrapper')} style={{width: deviceWidth}}>\n                    <div\n                        ref={setCanvasRef}\n                        className={b('canvas', {hidden: !initialized})}\n                        style={{\n                            transform: `scale(${zoom}%)`,\n                            height: `${(100 / zoom) * 100}%`,\n                            width: `${(100 / zoom) * 100}%`,\n                        }}\n                    >\n                        <iframe\n                            ref={(instance) => instance && setIframeElement(instance)}\n                            className={b('iframe')}\n                            src={url}\n                            height={`${height}px`}\n                            width=\"100%\"\n                            frameBorder=\"0\"\n                            title=\"Page Constructor Iframe\"\n                        />\n                        <Overlay className={b('overlay')} canvasElement={canvasRef} />\n                        {!initialized && (\n                            <div className={b('loading')}>\n                                <Loader size={'l'} />\n                            </div>\n                        )}\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default MiddleScreen;\n"]}

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

@@ -0,0 +1,60 @@
+.g-root {
+  --g-color-base-brand: var(--g-color-private-black-550-solid);
+  --g-color-base-brand-hover: var(--g-color-private-black-600-solid);
+  --g-color-base-selection: var(--g-color-private-black-200);
+  --g-color-base-selection-hover: var(--g-color-private-black-300);
+  --g-color-base-brand: var(--g-color-text-primary);
+  --g-color-base-brand-hover: var(--g-color-text-complementary);
+  --g-color-text-brand-contrast: var(--g-color-text-light-primary);
+  --g-color-line-brand: var(--g-color-text-primary);
+  --g-color-text-brand: var(--g-color-private-brand-700-solid);
+  --g-color-text-brand-heavy: var(--g-color-private-black-700-solid);
+}
+
+.pceditor-overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.pceditor-overlay__border {
+  position: absolute;
+  border: 3px var(--g-color-line-brand) solid;
+  border-radius: 24px;
+  box-sizing: border-box;
+  box-shadow: 4px 4px 8px 0 var(--g-color-sfx-shadow);
+}
+.pceditor-overlay__border_hover {
+  opacity: 0.5;
+}
+.pceditor-overlay__line {
+  position: absolute;
+  box-sizing: border-box;
+}
+.pceditor-overlay__line_position_top {
+  border-top: 5px var(--g-color-line-brand) solid;
+}
+.pceditor-overlay__line_position_bottom {
+  border-bottom: 5px var(--g-color-line-brand) solid;
+}
+.pceditor-overlay__line_position_left {
+  border-left: 5px var(--g-color-line-brand) solid;
+}
+.pceditor-overlay__line_position_right {
+  border-right: 5px var(--g-color-line-brand) solid;
+}
+.pceditor-overlay__actions {
+  pointer-events: auto;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 100%);
+  display: flex;
+  align-items: center;
+  background: transparent;
+}
+.pceditor-overlay__action-button_grip {
+  cursor: grab;
+}

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

@@ -0,0 +1,7 @@
+import './Overlay.css';
+interface OverlayProps {
+    className?: string;
+    canvasElement?: HTMLDivElement | null;
+}
+declare const Overlay: ({ className, canvasElement }: OverlayProps) => import("react/jsx-runtime").JSX.Element;
+export default Overlay;

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

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp, Copy, TrashBin } from '@gravity-ui/icons';
+import { Button, Icon } from '@gravity-ui/uikit';
+import * as React from 'react';
+import { usePostMessageAPIListener } from "../../../../common/postMessage.js";
+import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
+import { editorCn } from "../../utils/cn.js";
+import './Overlay.css';
+const b = editorCn('overlay');
+const Overlay = ({ className, canvasElement }) => {
+    const { height, selectedBlock, setSelectedBlock, deleteBlock, duplicateBlock, manipulateOverlayMode, reorderBlock, } = useMainEditorStore();
+    const [insertLineBox, setInsertLineBox] = React.useState(undefined);
+    const [hoverBorders, setHoverBorders] = React.useState(null);
+    const [blockBorders, setBlockBorders] = React.useState(null);
+    // Listen for updates to the selected block's position
+    usePostMessageAPIListener('ON_UPDATE_BLOCK_SELECTION', ({ rect }) => {
+        setBlockBorders(rect || null);
+    });
+    // Update blockBorders when selectedBlock changes
+    React.useEffect(() => {
+        if (!selectedBlock) {
+            setBlockBorders(null);
+        }
+    }, [selectedBlock]);
+    // Auto scroll to the selected block when blockBorders changes
+    React.useEffect(() => {
+        if (blockBorders && canvasElement) {
+            // Calculate the scroll position to center the block in the viewport
+            const canvasHeight = canvasElement.clientHeight;
+            const scrollPosition = blockBorders.top - canvasHeight / 2 + blockBorders.height / 2;
+            // Scroll the canvas element to the calculated position with smooth behavior
+            canvasElement.scrollTo({
+                top: Math.max(0, scrollPosition),
+                behavior: 'smooth',
+            });
+        }
+    }, [blockBorders, canvasElement]);
+    const margin = 0;
+    usePostMessageAPIListener('ON_HOVER_BLOCK', ({ rect, position }) => {
+        setHoverBorders(rect || null);
+        if (rect && position) {
+            setInsertLineBox({
+                left: rect.x,
+                top: rect.y,
+                height: rect.height,
+                width: rect.width,
+                position: position,
+            });
+        }
+    });
+    usePostMessageAPIListener('ON_CLICK_BLOCK', ({ path }) => {
+        setSelectedBlock(path);
+    });
+    const handleMoveUp = () => {
+        if (!selectedBlock)
+            return;
+        const destination = [...selectedBlock];
+        destination[destination.length - 1] = destination[destination.length - 1] - 1;
+        reorderBlock(selectedBlock, destination, 'prepend');
+    };
+    const handleMoveDown = () => {
+        if (!selectedBlock)
+            return;
+        const destination = [...selectedBlock];
+        destination[destination.length - 1] = destination[destination.length - 1] + 1;
+        reorderBlock(selectedBlock, destination, 'append');
+    };
+    return (_jsxs("div", { className: b(null, className), style: { height: `${height}px` }, children: [blockBorders ? (_jsx("div", { className: b('border'), style: {
+                    top: blockBorders.top - margin,
+                    left: blockBorders.left - margin,
+                    width: blockBorders.width + margin * 2,
+                    height: blockBorders.height + margin * 2,
+                }, children: _jsxs("div", { className: b('actions'), children: [_jsx(Button, { view: "flat", size: 'm', onClick: handleMoveUp, children: _jsx(Icon, { data: ChevronUp, size: 18 }) }), _jsx(Button, { pin: 'round-clear', className: b('action-button'), size: 'm', view: 'action', onClick: () => selectedBlock && duplicateBlock(selectedBlock), children: _jsx(Icon, { data: Copy, size: 18 }) }), _jsx(Button, { pin: 'clear-round', className: b('action-button'), size: 'm', view: 'action', onClick: () => selectedBlock && deleteBlock(selectedBlock), children: _jsx(Icon, { data: TrashBin, size: 18 }) }), _jsx(Button, { view: "flat", size: 'm', onClick: handleMoveDown, children: _jsx(Icon, { data: ChevronDown, size: 18 }) })] }) })) : null, hoverBorders ? (_jsx("div", { className: b('border', { hover: true }), style: {
+                    top: hoverBorders.top - margin,
+                    left: hoverBorders.left - margin,
+                    width: hoverBorders.width + margin * 2,
+                    height: hoverBorders.height + margin * 2,
+                } })) : null, manipulateOverlayMode && hoverBorders && insertLineBox ? (_jsx("div", { className: b('line', {
+                    position: insertLineBox.position,
+                }), style: {
+                    top: hoverBorders.top,
+                    left: hoverBorders.left,
+                    width: hoverBorders.width,
+                    height: hoverBorders.height,
+                } })) : null] }));
+};
+export default Overlay;
+//# sourceMappingURL=Overlay.js.map