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

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

@@ -1,51 +0,0 @@
-.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/cjs/editor-v2/containers/Editor/Editor.d.ts

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import { PageContentWithNavigation } from "../../../models/index.js";
-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/cjs/editor-v2/containers/Editor/Editor.js

@@ -1,40 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Editor = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const React = tslib_1.__importStar(require("react"));
-const Panels_1 = require("../../components/Panels/Panels.js");
-const Sidebar_1 = require("../../components/Sidebar/Sidebar.js");
-const StoreViewer_1 = tslib_1.__importDefault(require("../../components/StoreViewer/StoreViewer.js"));
-const BigOverlay_1 = tslib_1.__importDefault(require("../BigOverlay/BigOverlay.js"));
-const MiddleScreen_1 = tslib_1.__importDefault(require("../MiddleScreen/MiddleScreen.js"));
-const editorStore_1 = require("../../context/editorStore/index.js");
-const iframeContext_1 = require("../../context/iframeContext/index.js");
-const useEditorTabs_1 = require("../../hooks/useEditorTabs.js");
-const useMainEditorInitialize_1 = tslib_1.__importDefault(require("../../hooks/useMainEditorInitialize.js"));
-const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
-const cn_1 = require("../../utils/cn.js");
-const b = (0, cn_1.editorCn)('editor');
-const EditorView = ({ componentsConfig = {} }) => {
-    const store = (0, useMainEditorStore_1.useMainEditorStore)();
-    const { manipulateOverlayMode, disableMode } = store;
-    (0, useMainEditorInitialize_1.default)();
-    // 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 } = (0, useEditorTabs_1.useEditorTabs)(componentsConfig);
-    return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    (0, jsx_runtime_1.jsxs)("div", { className: b(), onMouseUp: onMouseUp, children: [(0, jsx_runtime_1.jsx)("div", { className: b('body'), children: (0, jsx_runtime_1.jsx)(Panels_1.Panels, { left: (0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, { tabs: left, top: componentsConfig.leftTop }), right: (0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, { tabs: right, top: componentsConfig.rightTop, defaultTab: "block-config" }), middle: (0, jsx_runtime_1.jsx)(MiddleScreen_1.default, { CustomTop: componentsConfig.middleTop }) }) }), (0, jsx_runtime_1.jsx)(BigOverlay_1.default, { className: b('overlay') }), (0, jsx_runtime_1.jsx)(StoreViewer_1.default, { className: b('debug-store'), store: store })] }));
-};
-const Editor = (props) => {
-    return ((0, jsx_runtime_1.jsx)(iframeContext_1.IframeProvider, { initialUrl: props.initialUrl, disableUrlField: props.disableUrlField, children: (0, jsx_runtime_1.jsx)(editorStore_1.MainEditorStoreProvider, { children: (0, jsx_runtime_1.jsx)(EditorView, { ...props }) }) }));
-};
-exports.Editor = Editor;
-//# sourceMappingURL=Editor.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Editor.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/Editor/Editor.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAG/B,8DAAsD;AACtD,iEAAyD;AACzD,sGAAmE;AACnE,qFAAgE;AAChE,2FAAsE;AACtE,oEAAkE;AAClE,wEAA2D;AAC3D,gEAAwD;AACxD,6GAA0E;AAC1E,0EAAkE;AAClE,0CAAwC;AAIxC,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,QAAQ,CAAC,CAAC;AAoB7B,MAAM,UAAU,GAAG,CAAC,EAAC,gBAAgB,GAAG,EAAE,EAAkB,EAAE,EAAE;IAC5D,MAAM,KAAK,GAAG,IAAA,uCAAkB,GAAE,CAAC;IACnC,MAAM,EAAC,qBAAqB,EAAE,WAAW,EAAC,GAAG,KAAK,CAAC;IAEnD,IAAA,iCAAuB,GAAE,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,IAAA,6BAAa,EAAC,gBAAgB,CAAC,CAAC;IAEtD,OAAO;IACH,mEAAmE;IACnE,iCAAK,SAAS,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,aACrC,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,uBAAC,eAAM,IACH,IAAI,EAAE,uBAAC,iBAAO,IAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,gBAAgB,CAAC,OAAO,GAAI,EAC5D,KAAK,EACD,uBAAC,iBAAO,IACJ,IAAI,EAAE,KAAK,EACX,GAAG,EAAE,gBAAgB,CAAC,QAAQ,EAC9B,UAAU,EAAC,cAAc,GAC3B,EAEN,MAAM,EAAE,uBAAC,sBAAY,IAAC,SAAS,EAAE,gBAAgB,CAAC,SAAS,GAAI,GACjE,GACA,EACN,uBAAC,oBAAU,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,GAAI,EACvC,uBAAC,qBAAW,IAAC,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,GAAI,IACxD,CACT,CAAC;AACN,CAAC,CAAC;AAEK,MAAM,MAAM,GAAG,CAAC,KAAsB,EAAE,EAAE;IAC7C,OAAO,CACH,uBAAC,8BAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,eAAe,EAAE,KAAK,CAAC,eAAe,YAChF,uBAAC,qCAAuB,cACpB,uBAAC,UAAU,OAAK,KAAK,GAAI,GACH,GACb,CACpB,CAAC;AACN,CAAC,CAAC;AARW,QAAA,MAAM,UAQjB","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/cjs/editor-v2/containers/GlobalConfig/GlobalConfig.css

@@ -1,24 +0,0 @@
-.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/cjs/editor-v2/containers/GlobalConfig/GlobalConfig.d.ts

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

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

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const DynamicForm_1 = tslib_1.__importDefault(require("../../components/DynamicForm/DynamicForm.js"));
-const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
-const cn_1 = require("../../utils/cn.js");
-const b = (0, cn_1.editorCn)('global-config');
-const GlobalConfig = ({ className }) => {
-    const { global, content, updateField } = (0, useMainEditorStore_1.useMainEditorStore)();
-    const onUpdate = (key, value) => {
-        updateField('navigation.' + key, value);
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), children: [(0, jsx_runtime_1.jsx)("div", { className: b('title'), children: "Global Config" }), (0, jsx_runtime_1.jsx)(DynamicForm_1.default, { contentConfig: content.navigation, blockConfig: global, onUpdate: onUpdate })] }));
-};
-exports.default = GlobalConfig;
-//# sourceMappingURL=GlobalConfig.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"GlobalConfig.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/GlobalConfig/GlobalConfig.tsx"],"names":[],"mappings":";;;;AACA,sGAAmE;AACnE,0EAAkE;AAClE,0CAAwC;AAIxC,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,eAAe,CAAC,CAAC;AAMpC,MAAM,YAAY,GAAG,CAAC,EAAC,SAAS,EAAoB,EAAE,EAAE;IACpD,MAAM,EAAC,MAAM,EAAE,OAAO,EAAE,WAAW,EAAC,GAAG,IAAA,uCAAkB,GAAE,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,iCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC9B,gCAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,8BAAqB,EAC/C,uBAAC,qBAAW,IACR,aAAa,EAAE,OAAO,CAAC,UAAU,EACjC,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,QAAQ,GACpB,IACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,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/cjs/editor-v2/containers/MiddleScreen/MiddleScreen.css

@@ -1,62 +0,0 @@
-.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/cjs/editor-v2/containers/MiddleScreen/MiddleScreen.d.ts

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

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

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const uikit_1 = require("@gravity-ui/uikit");
-const React = tslib_1.__importStar(require("react"));
-const postMessage_1 = require("../../../../common/postMessage.js");
-const iframeContext_1 = require("../../context/iframeContext/index.js");
-const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
-const cn_1 = require("../../utils/cn.js");
-const Overlay_1 = tslib_1.__importDefault(require("../Overlay/Overlay.js"));
-const b = (0, cn_1.editorCn)('middle-screen');
-const MiddleScreen = ({ className, CustomTop }) => {
-    const { zoom, initialized, deviceWidth } = (0, useMainEditorStore_1.useMainEditorStore)();
-    const { url, setIframeElement } = React.useContext(iframeContext_1.IframeContext);
-    const [canvasRef, setCanvasRef] = React.useState(null);
-    const [height, setHeight] = React.useState(0);
-    const onResize = React.useCallback((newHeight) => {
-        setHeight(newHeight + 500);
-    }, [setHeight]);
-    (0, postMessage_1.usePostMessageAPIListener)('ON_RESIZE', ({ height: newHeight }) => {
-        onResize(newHeight);
-    });
-    (0, postMessage_1.usePostMessageAPIListener)('ON_INIT', ({ height: newHeight }) => {
-        onResize(newHeight);
-    });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), children: [CustomTop ? ((0, jsx_runtime_1.jsx)("div", { className: b('topbar'), children: (0, jsx_runtime_1.jsx)(CustomTop, {}) })) : null, (0, jsx_runtime_1.jsx)("div", { className: b('content'), children: (0, jsx_runtime_1.jsx)("div", { className: b('wrapper'), style: { width: deviceWidth }, children: (0, jsx_runtime_1.jsxs)("div", { ref: setCanvasRef, className: b('canvas', { hidden: !initialized }), style: {
-                            transform: `scale(${zoom}%)`,
-                            height: `${(100 / zoom) * 100}%`,
-                            width: `${(100 / zoom) * 100}%`,
-                        }, children: [(0, jsx_runtime_1.jsx)("iframe", { ref: (instance) => instance && setIframeElement(instance), className: b('iframe'), src: url, height: `${height}px`, width: "100%", frameBorder: "0", title: "Page Constructor Iframe" }), (0, jsx_runtime_1.jsx)(Overlay_1.default, { className: b('overlay'), canvasElement: canvasRef }), !initialized && ((0, jsx_runtime_1.jsx)("div", { className: b('loading'), children: (0, jsx_runtime_1.jsx)(uikit_1.Loader, { size: 'l' }) }))] }) }) })] }));
-};
-exports.default = MiddleScreen;
-//# sourceMappingURL=MiddleScreen.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"MiddleScreen.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/MiddleScreen/MiddleScreen.tsx"],"names":[],"mappings":";;;;AAAA,6CAAyC;AACzC,qDAA+B;AAE/B,mEAAyE;AACzE,wEAA0D;AAC1D,0EAAkE;AAClE,0CAAwC;AACxC,4EAAyC;AAIzC,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,eAAe,CAAC,CAAC;AAOpC,MAAM,YAAY,GAAG,CAAC,EAAC,SAAS,EAAE,SAAS,EAAoB,EAAE,EAAE;IAC/D,MAAM,EAAC,IAAI,EAAE,WAAW,EAAE,WAAW,EAAC,GAAG,IAAA,uCAAkB,GAAE,CAAC;IAC9D,MAAM,EAAC,GAAG,EAAE,gBAAgB,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,6BAAa,CAAC,CAAC;IAChE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAwB,IAAI,CAAC,CAAC;IAC9E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE9C,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAC9B,CAAC,SAAiB,EAAE,EAAE;QAClB,SAAS,CAAC,SAAS,GAAG,GAAG,CAAC,CAAC;IAC/B,CAAC,EACD,CAAC,SAAS,CAAC,CACd,CAAC;IAEF,IAAA,uCAAyB,EAAC,WAAW,EAAE,CAAC,EAAC,MAAM,EAAE,SAAS,EAAC,EAAE,EAAE;QAC3D,QAAQ,CAAC,SAAS,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;IAEH,IAAA,uCAAyB,EAAC,SAAS,EAAE,CAAC,EAAC,MAAM,EAAE,SAAS,EAAC,EAAE,EAAE;QACzD,QAAQ,CAAC,SAAS,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;IAEH,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC7B,SAAS,CAAC,CAAC,CAAC,CACT,gCAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YACvB,uBAAC,SAAS,KAAG,GACX,CACT,CAAC,CAAC,CAAC,IAAI,EACR,gCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,YACxB,gCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,WAAW,EAAC,YACrD,iCACI,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,MAAM,EAAE,CAAC,WAAW,EAAC,CAAC,EAC9C,KAAK,EAAE;4BACH,SAAS,EAAE,SAAS,IAAI,IAAI;4BAC5B,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,GAAG;4BAChC,KAAK,EAAE,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,GAAG;yBAClC,aAED,mCACI,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,IAAI,gBAAgB,CAAC,QAAQ,CAAC,EACzD,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,GAAG,MAAM,IAAI,EACrB,KAAK,EAAC,MAAM,EACZ,WAAW,EAAC,GAAG,EACf,KAAK,EAAC,yBAAyB,GACjC,EACF,uBAAC,iBAAO,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,aAAa,EAAE,SAAS,GAAI,EAC7D,CAAC,WAAW,IAAI,CACb,gCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,YACxB,uBAAC,cAAM,IAAC,IAAI,EAAE,GAAG,GAAI,GACnB,CACT,IACC,GACJ,GACJ,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,YAAY,CAAC","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/cjs/editor-v2/containers/Overlay/Overlay.css

@@ -1,60 +0,0 @@
-.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/cjs/editor-v2/containers/Overlay/Overlay.d.ts

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

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

@@ -1,90 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_1 = require("@gravity-ui/icons");
-const uikit_1 = require("@gravity-ui/uikit");
-const React = tslib_1.__importStar(require("react"));
-const postMessage_1 = require("../../../../common/postMessage.js");
-const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
-const cn_1 = require("../../utils/cn.js");
-const b = (0, cn_1.editorCn)('overlay');
-const Overlay = ({ className, canvasElement }) => {
-    const { height, selectedBlock, setSelectedBlock, deleteBlock, duplicateBlock, manipulateOverlayMode, reorderBlock, } = (0, useMainEditorStore_1.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
-    (0, postMessage_1.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;
-    (0, postMessage_1.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,
-            });
-        }
-    });
-    (0, postMessage_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), style: { height: `${height}px` }, children: [blockBorders ? ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsxs)("div", { className: b('actions'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", size: 'm', onClick: handleMoveUp, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ChevronUp, size: 18 }) }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { pin: 'round-clear', className: b('action-button'), size: 'm', view: 'action', onClick: () => selectedBlock && duplicateBlock(selectedBlock), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Copy, size: 18 }) }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { pin: 'clear-round', className: b('action-button'), size: 'm', view: 'action', onClick: () => selectedBlock && deleteBlock(selectedBlock), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.TrashBin, size: 18 }) }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", size: 'm', onClick: handleMoveDown, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ChevronDown, size: 18 }) })] }) })) : null, hoverBorders ? ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)("div", { className: b('line', {
-                    position: insertLineBox.position,
-                }), style: {
-                    top: hoverBorders.top,
-                    left: hoverBorders.left,
-                    width: hoverBorders.width,
-                    height: hoverBorders.height,
-                } })) : null] }));
-};
-exports.default = Overlay;
-//# sourceMappingURL=Overlay.js.map

package/build/cjs/editor-v2/containers/Overlay/Overlay.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Overlay.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/Overlay/Overlay.tsx"],"names":[],"mappings":"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","sourcesContent":["import {ChevronDown, ChevronUp, Copy, TrashBin} from '@gravity-ui/icons';\nimport {Button, Icon} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {usePostMessageAPIListener} from '../../../../common/postMessage';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\n\nimport './Overlay.scss';\n\nconst b = editorCn('overlay');\n\ninterface OverlayProps {\n    className?: string;\n    canvasElement?: HTMLDivElement | null;\n}\ninterface InsertLineProps {\n    top: number;\n    left: number;\n    height: number;\n    width: number;\n    position: string;\n}\n\nconst Overlay = ({className, canvasElement}: OverlayProps) => {\n    const {\n        height,\n        selectedBlock,\n        setSelectedBlock,\n        deleteBlock,\n        duplicateBlock,\n        manipulateOverlayMode,\n        reorderBlock,\n    } = useMainEditorStore();\n    const [insertLineBox, setInsertLineBox] = React.useState<InsertLineProps | undefined>(\n        undefined,\n    );\n    const [hoverBorders, setHoverBorders] = React.useState<DOMRect | null>(null);\n    const [blockBorders, setBlockBorders] = React.useState<DOMRect | null>(null);\n\n    // Listen for updates to the selected block's position\n    usePostMessageAPIListener('ON_UPDATE_BLOCK_SELECTION', ({rect}) => {\n        setBlockBorders(rect || null);\n    });\n\n    // Update blockBorders when selectedBlock changes\n    React.useEffect(() => {\n        if (!selectedBlock) {\n            setBlockBorders(null);\n        }\n    }, [selectedBlock]);\n\n    // Auto scroll to the selected block when blockBorders changes\n    React.useEffect(() => {\n        if (blockBorders && canvasElement) {\n            // Calculate the scroll position to center the block in the viewport\n            const canvasHeight = canvasElement.clientHeight;\n            const scrollPosition = blockBorders.top - canvasHeight / 2 + blockBorders.height / 2;\n\n            // Scroll the canvas element to the calculated position with smooth behavior\n            canvasElement.scrollTo({\n                top: Math.max(0, scrollPosition),\n                behavior: 'smooth',\n            });\n        }\n    }, [blockBorders, canvasElement]);\n\n    const margin = 0;\n\n    usePostMessageAPIListener('ON_HOVER_BLOCK', ({rect, position}) => {\n        setHoverBorders(rect || null);\n        if (rect && position) {\n            setInsertLineBox({\n                left: rect.x,\n                top: rect.y,\n                height: rect.height,\n                width: rect.width,\n                position: position,\n            });\n        }\n    });\n\n    usePostMessageAPIListener('ON_CLICK_BLOCK', ({path}) => {\n        setSelectedBlock(path);\n    });\n\n    const handleMoveUp = () => {\n        if (!selectedBlock) return;\n        const destination = [...selectedBlock];\n        destination[destination.length - 1] = destination[destination.length - 1] - 1;\n        reorderBlock(selectedBlock, destination, 'prepend');\n    };\n\n    const handleMoveDown = () => {\n        if (!selectedBlock) return;\n        const destination = [...selectedBlock];\n        destination[destination.length - 1] = destination[destination.length - 1] + 1;\n        reorderBlock(selectedBlock, destination, 'append');\n    };\n\n    return (\n        <div className={b(null, className)} style={{height: `${height}px`}}>\n            {blockBorders ? (\n                <div\n                    className={b('border')}\n                    style={{\n                        top: blockBorders.top - margin,\n                        left: blockBorders.left - margin,\n                        width: blockBorders.width + margin * 2,\n                        height: blockBorders.height + margin * 2,\n                    }}\n                >\n                    <div className={b('actions')}>\n                        <Button view=\"flat\" size={'m'} onClick={handleMoveUp}>\n                            <Icon data={ChevronUp} size={18} />\n                        </Button>\n                        <Button\n                            pin={'round-clear'}\n                            className={b('action-button')}\n                            size={'m'}\n                            view={'action'}\n                            onClick={() => selectedBlock && duplicateBlock(selectedBlock)}\n                        >\n                            <Icon data={Copy} size={18} />\n                        </Button>\n                        <Button\n                            pin={'clear-round'}\n                            className={b('action-button')}\n                            size={'m'}\n                            view={'action'}\n                            onClick={() => selectedBlock && deleteBlock(selectedBlock)}\n                        >\n                            <Icon data={TrashBin} size={18} />\n                        </Button>\n                        <Button view=\"flat\" size={'m'} onClick={handleMoveDown}>\n                            <Icon data={ChevronDown} size={18} />\n                        </Button>\n                    </div>\n                </div>\n            ) : null}\n            {hoverBorders ? (\n                <div\n                    className={b('border', {hover: true})}\n                    style={{\n                        top: hoverBorders.top - margin,\n                        left: hoverBorders.left - margin,\n                        width: hoverBorders.width + margin * 2,\n                        height: hoverBorders.height + margin * 2,\n                    }}\n                ></div>\n            ) : null}\n            {manipulateOverlayMode && hoverBorders && insertLineBox ? (\n                <div\n                    className={b('line', {\n                        position: insertLineBox.position,\n                    })}\n                    style={{\n                        top: hoverBorders.top,\n                        left: hoverBorders.left,\n                        width: hoverBorders.width,\n                        height: hoverBorders.height,\n                    }}\n                />\n            ) : null}\n        </div>\n    );\n};\n\nexport default Overlay;\n"]}

package/build/cjs/editor-v2/containers/Source/Source.css

@@ -1,27 +0,0 @@
-.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-source {
-  width: 100%;
-  display: inline-flex;
-  box-sizing: border-box;
-  align-items: center;
-  flex-direction: row;
-  padding: 16px 12px;
-}
-.pceditor-source__icon {
-  flex: 0 0 auto;
-}
-.pceditor-source__text {
-  flex: 1;
-}

package/build/cjs/editor-v2/containers/Source/Source.d.ts

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

package/build/cjs/editor-v2/containers/Source/Source.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_1 = require("@gravity-ui/icons");
-const uikit_1 = require("@gravity-ui/uikit");
-const React = tslib_1.__importStar(require("react"));
-const iframeContext_1 = require("../../context/iframeContext/index.js");
-const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
-const cn_1 = require("../../utils/cn.js");
-const b = (0, cn_1.editorCn)('source');
-const Source = () => {
-    const { resetInitialize } = (0, useMainEditorStore_1.useMainEditorStore)();
-    const { disableUrlField, url, setUrl } = React.useContext(iframeContext_1.IframeContext);
-    const onUpdateUrl = React.useCallback((value) => {
-        setUrl(value);
-        resetInitialize();
-    }, [resetInitialize, setUrl]);
-    const reloadIframe = () => {
-        setUrl('');
-        setTimeout(() => {
-            setUrl(url);
-        }, 0);
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: b(), children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { className: b('icon'), view: "flat", size: "m", onClick: reloadIframe, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ArrowRotateRight, size: 18 }) }), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, { disabled: disableUrlField, className: b('text'), size: "s", value: url, onUpdate: onUpdateUrl })] }));
-};
-exports.default = Source;
-//# sourceMappingURL=Source.js.map

package/build/cjs/editor-v2/containers/Source/Source.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Source.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/Source/Source.tsx"],"names":[],"mappings":";;;;AAAA,6CAAmD;AACnD,6CAA0D;AAC1D,qDAA+B;AAE/B,wEAA0D;AAC1D,0EAAkE;AAClE,0CAAwC;AAIxC,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,QAAQ,CAAC,CAAC;AAE7B,MAAM,MAAM,GAAG,GAAG,EAAE;IAChB,MAAM,EAAC,eAAe,EAAC,GAAG,IAAA,uCAAkB,GAAE,CAAC;IAC/C,MAAM,EAAC,eAAe,EAAE,GAAG,EAAE,MAAM,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,6BAAa,CAAC,CAAC;IAEvE,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,KAAa,EAAE,EAAE;QACd,MAAM,CAAC,KAAK,CAAC,CAAC;QACd,eAAe,EAAE,CAAC;IACtB,CAAC,EACD,CAAC,eAAe,EAAE,MAAM,CAAC,CAC5B,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACtB,MAAM,CAAC,EAAE,CAAC,CAAC;QACX,UAAU,CAAC,GAAG,EAAE;YACZ,MAAM,CAAC,GAAG,CAAC,CAAC;QAChB,CAAC,EAAE,CAAC,CAAC,CAAC;IACV,CAAC,CAAC;IAEF,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,EAAE,aACf,uBAAC,cAAM,IAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,GAAG,EAAC,OAAO,EAAE,YAAY,YACpE,uBAAC,YAAI,IAAC,IAAI,EAAE,wBAAgB,EAAE,IAAI,EAAE,EAAE,GAAI,GACrC,EACT,uBAAC,iBAAS,IACN,QAAQ,EAAE,eAAe,EACzB,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EACpB,IAAI,EAAC,GAAG,EACR,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,WAAW,GACvB,IACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,MAAM,CAAC","sourcesContent":["import {ArrowRotateRight} from '@gravity-ui/icons';\nimport {Button, Icon, TextInput} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {IframeContext} from '../../context/iframeContext';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\n\nimport './Source.scss';\n\nconst b = editorCn('source');\n\nconst Source = () => {\n    const {resetInitialize} = useMainEditorStore();\n    const {disableUrlField, url, setUrl} = React.useContext(IframeContext);\n\n    const onUpdateUrl = React.useCallback(\n        (value: string) => {\n            setUrl(value);\n            resetInitialize();\n        },\n        [resetInitialize, setUrl],\n    );\n\n    const reloadIframe = () => {\n        setUrl('');\n        setTimeout(() => {\n            setUrl(url);\n        }, 0);\n    };\n\n    return (\n        <div className={b()}>\n            <Button className={b('icon')} view=\"flat\" size=\"m\" onClick={reloadIframe}>\n                <Icon data={ArrowRotateRight} size={18} />\n            </Button>\n            <TextInput\n                disabled={disableUrlField}\n                className={b('text')}\n                size=\"s\"\n                value={url}\n                onUpdate={onUpdateUrl}\n            />\n        </div>\n    );\n};\n\nexport default Source;\n"]}

package/build/cjs/editor-v2/containers/SourceCode/SourceCode.css

@@ -1,50 +0,0 @@
-.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-source-code {
-  height: 100%;
-  padding: 16px 12px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-.pceditor-source-code__title {
-  font-weight: 500;
-  font-size: 13px;
-  line-height: 18px;
-  color: var(--g-color-private-black-300);
-}
-.pceditor-source-code__code {
-  white-space: pre;
-  font-family: var(--g-text-code-font-family);
-  font-weight: var(--g-text-code-font-weight);
-  font-size: var(--g-text-code-inline-1-font-size);
-  line-height: var(--g-text-code-inline-1-line-height);
-  padding: 6px 2px 8px;
-  overflow: auto;
-  border: 1px solid var(--g-color-line-generic);
-  border-radius: 6px;
-  position: relative;
-}
-.pceditor-source-code__code:hover .pceditor-source-code__controls {
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-}
-.pceditor-source-code__controls {
-  display: none;
-  position: absolute;
-  top: 10px;
-  right: 10px;
-}

package/build/cjs/editor-v2/containers/SourceCode/SourceCode.d.ts

@@ -1,6 +0,0 @@
-interface SourceCodeProps {
-    className?: string;
-    format: 'yaml' | 'json';
-}
-declare const SourceCode: ({ className, format }: SourceCodeProps) => import("react/jsx-runtime").JSX.Element;
-export default SourceCode;