@gravity-ui/page-constructor 6.3.2-alpha.0 → 6.3.2-alpha.11

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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,41 @@
+"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 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, isPreviewMode, togglePreviewMode } = (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 canvasStyle = React.useMemo(() => ({
+        transform: isPreviewMode ? 'none' : `scale(${zoom}%)`,
+        height: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
+        width: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
+        maxWidth: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
+    }), [isPreviewMode, zoom]);
+    const onResize = React.useCallback((newHeight) => {
+        setHeight(newHeight + 100);
+    }, [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 && !isPreviewMode ? ((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', { fullscreen: isPreviewMode }), children: (0, jsx_runtime_1.jsx)("div", { className: b('wrapper'), children: (0, jsx_runtime_1.jsxs)("div", { ref: setCanvasRef, className: b('canvas', { hidden: !initialized, fullscreen: isPreviewMode }), style: canvasStyle, children: [(0, jsx_runtime_1.jsx)("iframe", { ref: (instance) => {
+                                    if (instance) {
+                                        setIframeElement(instance);
+                                    }
+                                }, className: b('iframe', { fullscreen: isPreviewMode }), src: url, height: isPreviewMode ? '100%' : `${height}px`, width: isPreviewMode ? '100%' : deviceWidth, frameBorder: "0", title: "Page Constructor Iframe" }), !isPreviewMode && ((0, jsx_runtime_1.jsx)(Overlay_1.default, { className: b('overlay'), canvasElement: canvasRef })), isPreviewMode && ((0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "action", className: b('exit-preview'), onClick: togglePreviewMode, "aria-label": "Exit preview mode", title: "Exit preview mode", size: "l", children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { size: 24, data: icons_1.Xmark }) })), !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

@@ -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 {Xmark} from '@gravity-ui/icons';\nimport {Button, Icon, 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, isPreviewMode, togglePreviewMode} = 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 canvasStyle = React.useMemo(\n        () => ({\n            transform: isPreviewMode ? 'none' : `scale(${zoom}%)`,\n            height: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,\n            width: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,\n            maxWidth: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,\n        }),\n        [isPreviewMode, zoom],\n    );\n\n    const onResize = React.useCallback(\n        (newHeight: number) => {\n            setHeight(newHeight + 100);\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 && !isPreviewMode ? (\n                <div className={b('topbar')}>\n                    <CustomTop />\n                </div>\n            ) : null}\n            <div className={b('content', {fullscreen: isPreviewMode})}>\n                <div className={b('wrapper')}>\n                    <div\n                        ref={setCanvasRef}\n                        className={b('canvas', {hidden: !initialized, fullscreen: isPreviewMode})}\n                        style={canvasStyle}\n                    >\n                        <iframe\n                            ref={(instance) => {\n                                if (instance) {\n                                    setIframeElement(instance);\n                                }\n                            }}\n                            className={b('iframe', {fullscreen: isPreviewMode})}\n                            src={url}\n                            height={isPreviewMode ? '100%' : `${height}px`}\n                            width={isPreviewMode ? '100%' : deviceWidth}\n                            frameBorder=\"0\"\n                            title=\"Page Constructor Iframe\"\n                        />\n                        {!isPreviewMode && (\n                            <Overlay className={b('overlay')} canvasElement={canvasRef} />\n                        )}\n                        {isPreviewMode && (\n                            <Button\n                                view=\"action\"\n                                className={b('exit-preview')}\n                                onClick={togglePreviewMode}\n                                aria-label=\"Exit preview mode\"\n                                title=\"Exit preview mode\"\n                                size=\"l\"\n                            >\n                                <Icon size={24} data={Xmark} />\n                            </Button>\n                        )}\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

@@ -0,0 +1,67 @@
+.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-base-brand) solid;
+  border-radius: 24px;
+  box-sizing: border-box;
+  box-shadow: 4px 4px 8px 0 var(--g-color-sfx-shadow);
+  z-index: 100;
+}
+.pceditor-overlay__border_hover {
+  opacity: 0.5;
+  z-index: 99;
+}
+.pceditor-overlay__line {
+  position: absolute;
+  box-sizing: border-box;
+  border-radius: 24px;
+  z-index: 10;
+}
+.pceditor-overlay__line_position_top {
+  border-top: 5px var(--g-color-base-brand) solid;
+  border-left: 5px var(--g-color-base-brand) solid;
+}
+.pceditor-overlay__line_position_bottom {
+  border-right: 5px var(--g-color-base-brand) solid;
+  border-bottom: 5px var(--g-color-base-brand) solid;
+}
+.pceditor-overlay__line_position_left {
+  border-top: 5px var(--g-color-base-brand) solid;
+  border-left: 5px var(--g-color-base-brand) solid;
+}
+.pceditor-overlay__line_position_right {
+  border-right: 5px var(--g-color-base-brand) solid;
+  border-bottom: 5px var(--g-color-base-brand) solid;
+}
+.pceditor-overlay__actions {
+  pointer-events: auto;
+  position: absolute;
+  bottom: -3px;
+  left: 50%;
+  transform: translate(-50%, 100%);
+  z-index: 1000;
+  display: flex;
+  align-items: flex-start;
+  background: transparent;
+}
+.pceditor-overlay__actions-box_main {
+  display: flex;
+  gap: 2px;
+  align-items: center;
+  padding: 1px 8px 4px;
+  background-color: var(--g-color-base-brand);
+  border-radius: 0px 0px 8px 8px;
+}
+.pceditor-overlay__actions-box_reorder {
+  padding: 3px 4px;
+}
+.pceditor-overlay__reorder-icon {
+  color: var(--g-color-base-brand);
+}

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,100 @@
+"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 lodash_1 = tslib_1.__importDefault(require("lodash"));
+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(selectedBlock && rect ? rect : null);
+    }, [selectedBlock]);
+    // 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 }) => {
+        if (!selectedBlock && path) {
+            setSelectedBlock(path);
+        }
+        else if (selectedBlock && lodash_1.default.isEqual(selectedBlock, path)) {
+            setSelectedBlock(null);
+            setBlockBorders(null);
+        }
+        else {
+            setSelectedBlock(path);
+        }
+    }, [selectedBlock]);
+    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)("div", { className: b('actions-box', { reorder: true }), children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", size: 'm', onClick: handleMoveUp, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { className: b('reorder-icon'), data: icons_1.ChevronUp, size: 18 }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: b('actions-box', { main: true }), children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { 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, { 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)("div", { className: b('actions-box', { reorder: true }), children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", size: 'm', onClick: handleMoveDown, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { className: b('reorder-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

@@ -0,0 +1 @@
+{"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';\nimport _ from 'lodash';\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(\n        'ON_UPDATE_BLOCK_SELECTION',\n        ({rect}) => {\n            setBlockBorders(selectedBlock && rect ? rect : null);\n        },\n        [selectedBlock],\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(\n        'ON_CLICK_BLOCK',\n        ({path}) => {\n            if (!selectedBlock && path) {\n                setSelectedBlock(path);\n            } else if (selectedBlock && _.isEqual(selectedBlock, path)) {\n                setSelectedBlock(null);\n                setBlockBorders(null);\n            } else {\n                setSelectedBlock(path);\n            }\n        },\n        [selectedBlock],\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                        <div className={b('actions-box', {reorder: true})}>\n                            <Button view=\"flat\" size={'m'} onClick={handleMoveUp}>\n                                <Icon className={b('reorder-icon')} data={ChevronUp} size={18} />\n                            </Button>\n                        </div>\n                        <div className={b('actions-box', {main: true})}>\n                            <Button\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                                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                        </div>\n                        <div className={b('actions-box', {reorder: true})}>\n                            <Button view=\"flat\" size={'m'} onClick={handleMoveDown}>\n                                <Icon className={b('reorder-icon')} data={ChevronDown} size={18} />\n                            </Button>\n                        </div>\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

@@ -0,0 +1,15 @@
+.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;
+  margin-right: var(--g-spacing-1);
+}
+.pceditor-source__text {
+  flex: 1;
+}

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

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

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

@@ -0,0 +1,28 @@
+"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: "m", value: url, onUpdate: onUpdateUrl })] }));
+};
+exports.default = Source;
+//# sourceMappingURL=Source.js.map

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

@@ -0,0 +1 @@
+{"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=\"m\"\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

@@ -0,0 +1,86 @@
+.pceditor-source-code {
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.pceditor-source-code__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.pceditor-source-code__title {
+  font-weight: 500;
+  font-size: 13px;
+  line-height: 18px;
+  color: var(--g-color-text-secondary);
+}
+.pceditor-source-code__code {
+  scrollbar-width: thin;
+  scrollbar-color: var(--g-color-scroll-handle) transparent;
+  overflow: auto;
+  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 8px;
+  overflow: auto;
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: 6px;
+  position: relative;
+  flex: 1;
+}
+.pceditor-source-code__code::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: transparent;
+}
+.pceditor-source-code__code::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 4px;
+}
+.pceditor-source-code__code::-webkit-scrollbar-thumb {
+  background: var(--g-color-scroll-handle);
+  border-radius: 4px;
+  transition: background-color 0.2s;
+  opacity: 0;
+}
+.pceditor-source-code__code::-webkit-scrollbar-thumb:hover {
+  background: var(--g-color-scroll-handle-hover);
+  opacity: 1;
+}
+.pceditor-source-code__code::-webkit-scrollbar-thumb:active {
+  background: var(--g-color-scroll-handle-hover);
+  opacity: 1;
+}
+.pceditor-source-code__code::-webkit-scrollbar-corner {
+  background: transparent;
+}
+.pceditor-source-code__code:hover::-webkit-scrollbar-thumb {
+  opacity: 0.7;
+}
+.pceditor-source-code__code:not(:hover)::-webkit-scrollbar-thumb {
+  opacity: 0;
+  transition: opacity 0.5s ease-out;
+}
+.pceditor-source-code__content {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  resize: none;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+.pceditor-source-code__controls {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+}

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

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

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

@@ -0,0 +1,73 @@
+"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 js_yaml_1 = tslib_1.__importDefault(require("js-yaml"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const React = tslib_1.__importStar(require("react"));
+const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
+const utils_1 = require("../../utils/index.js");
+const cn_1 = require("../../utils/cn.js");
+const UpdateModal_1 = require("./UpdateModal/UpdateModal.js");
+const MessageCard_1 = require("../../components/MessageCard/MessageCard.js");
+const messages_1 = require("../../constants/messages.js");
+const b = (0, cn_1.editorCn)('source-code');
+const formatOptions = [
+    { value: 'yaml', content: 'YAML' },
+    { value: 'json', content: 'JSON' },
+];
+const SourceCode = ({ className, showSelectedBlockOnly = false }) => {
+    const { content, setContent, selectedBlock } = (0, useMainEditorStore_1.useMainEditorStore)();
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [format, setFormat] = React.useState('yaml');
+    const handleUpdate = (tempConfig) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let object;
+        try {
+            if (tempConfig.trim().startsWith('{') && tempConfig.trim().endsWith('}')) {
+                object = JSON.parse(tempConfig);
+            }
+            else {
+                object = js_yaml_1.default.load(tempConfig);
+            }
+        }
+        catch {
+            // eslint-disable-next-line no-console
+            console.error('JSON.parse failed');
+            return;
+        }
+        if (showSelectedBlockOnly && selectedBlock) {
+            // Update only the selected block
+            const currentBlockPath = (0, utils_1.generateChildrenPathFromArray)(selectedBlock);
+            const newContent = lodash_1.default.cloneDeep(content);
+            lodash_1.default.set(newContent.blocks, currentBlockPath, object);
+            setContent(newContent);
+        }
+        else if (object) {
+            // Update the entire content
+            setContent(object);
+        }
+        setIsOpen(false);
+    };
+    const textContent = React.useMemo(() => {
+        if (showSelectedBlockOnly && selectedBlock) {
+            const currentBlockPath = (0, utils_1.generateChildrenPathFromArray)(selectedBlock);
+            const currentConfig = lodash_1.default.get(content.blocks, currentBlockPath || '');
+            if (currentConfig) {
+                return format === 'yaml'
+                    ? js_yaml_1.default.dump(currentConfig)
+                    : JSON.stringify(currentConfig, null, 2);
+            }
+            return 'No block selected';
+        }
+        return format === 'yaml' ? js_yaml_1.default.dump(content) : JSON.stringify(content, null, 2);
+    }, [format, content, showSelectedBlockOnly, selectedBlock]);
+    if (!selectedBlock && showSelectedBlockOnly) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: b(null, className), children: (0, jsx_runtime_1.jsx)(MessageCard_1.MessageCard, { title: messages_1.MESSAGES.NO_BLOCK_SELECTED.title, description: messages_1.MESSAGES.NO_BLOCK_SELECTED.description, theme: "info" }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), children: [(0, jsx_runtime_1.jsxs)("div", { className: b('header'), children: [(0, jsx_runtime_1.jsx)(uikit_1.SegmentedRadioGroup, { size: "m", value: format, options: formatOptions, onUpdate: (value) => setFormat(value) }), (0, jsx_runtime_1.jsxs)("div", { className: b('controls'), children: [(0, jsx_runtime_1.jsxs)(uikit_1.Button, { view: "outlined", size: "m", onClick: () => setIsOpen(true), children: [(0, jsx_runtime_1.jsx)(uikit_1.Icon, { size: 14, data: icons_1.Pencil }), "Edit"] }), (0, jsx_runtime_1.jsx)(uikit_1.ClipboardButton, { view: "outlined", size: "m", text: textContent })] })] }), (0, jsx_runtime_1.jsx)("div", { className: b('code'), children: (0, jsx_runtime_1.jsx)("div", { className: b('content'), children: textContent }) }), (0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { onApply: handleUpdate, onClose: () => setIsOpen(false), isOpen: isOpen, initialConfig: textContent })] }));
+};
+exports.default = SourceCode;
+//# sourceMappingURL=SourceCode.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SourceCode.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/SourceCode/SourceCode.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Pencil} from '@gravity-ui/icons';\nimport {Button, ClipboardButton, Icon, SegmentedRadioGroup} from '@gravity-ui/uikit';\nimport yaml from 'js-yaml';\nimport _ from 'lodash';\nimport * as React from 'react';\n\nimport {PageContentWithNavigation} from '../../../models';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {generateChildrenPathFromArray} from '../../utils';\nimport {editorCn} from '../../utils/cn';\nimport {UpdateModal} from './UpdateModal/UpdateModal';\nimport {MessageCard} from '../../components/MessageCard/MessageCard';\nimport {MESSAGES} from '../../constants/messages';\n\nimport './SourceCode.scss';\n\nconst b = editorCn('source-code');\n\ninterface SourceCodeProps {\n    className?: string;\n    showSelectedBlockOnly?: boolean;\n}\n\nconst formatOptions = [\n    {value: 'yaml', content: 'YAML'},\n    {value: 'json', content: 'JSON'},\n];\n\nconst SourceCode = ({className, showSelectedBlockOnly = false}: SourceCodeProps) => {\n    const {content, setContent, selectedBlock} = useMainEditorStore();\n    const [isOpen, setIsOpen] = React.useState(false);\n    const [format, setFormat] = React.useState<'yaml' | 'json'>('yaml');\n\n    const handleUpdate = (tempConfig: string) => {\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        let object: any;\n\n        try {\n            if (tempConfig.trim().startsWith('{') && tempConfig.trim().endsWith('}')) {\n                object = JSON.parse(tempConfig);\n            } else {\n                object = yaml.load(tempConfig);\n            }\n        } catch {\n            // eslint-disable-next-line no-console\n            console.error('JSON.parse failed');\n            return;\n        }\n\n        if (showSelectedBlockOnly && selectedBlock) {\n            // Update only the selected block\n            const currentBlockPath = generateChildrenPathFromArray(selectedBlock);\n            const newContent = _.cloneDeep(content);\n            _.set(newContent.blocks, currentBlockPath, object);\n            setContent(newContent);\n        } else if (object) {\n            // Update the entire content\n            setContent(object as PageContentWithNavigation);\n        }\n\n        setIsOpen(false);\n    };\n\n    const textContent = React.useMemo(() => {\n        if (showSelectedBlockOnly && selectedBlock) {\n            const currentBlockPath = generateChildrenPathFromArray(selectedBlock);\n            const currentConfig = _.get(content.blocks, currentBlockPath || '');\n\n            if (currentConfig) {\n                return format === 'yaml'\n                    ? yaml.dump(currentConfig)\n                    : JSON.stringify(currentConfig, null, 2);\n            }\n\n            return 'No block selected';\n        }\n\n        return format === 'yaml' ? yaml.dump(content) : JSON.stringify(content, null, 2);\n    }, [format, content, showSelectedBlockOnly, selectedBlock]);\n\n    if (!selectedBlock && showSelectedBlockOnly) {\n        return (\n            <div className={b(null, className)}>\n                <MessageCard\n                    title={MESSAGES.NO_BLOCK_SELECTED.title}\n                    description={MESSAGES.NO_BLOCK_SELECTED.description}\n                    theme=\"info\"\n                />\n            </div>\n        );\n    }\n\n    return (\n        <div className={b(null, className)}>\n            <div className={b('header')}>\n                <SegmentedRadioGroup\n                    size=\"m\"\n                    value={format}\n                    options={formatOptions}\n                    onUpdate={(value: string) => setFormat(value as 'yaml' | 'json')}\n                />\n                <div className={b('controls')}>\n                    <Button view=\"outlined\" size=\"m\" onClick={() => setIsOpen(true)}>\n                        <Icon size={14} data={Pencil} />\n                        Edit\n                    </Button>\n                    <ClipboardButton view=\"outlined\" size=\"m\" text={textContent} />\n                </div>\n            </div>\n            <div className={b('code')}>\n                <div className={b('content')}>{textContent}</div>\n            </div>\n            <UpdateModal\n                onApply={handleUpdate}\n                onClose={() => setIsOpen(false)}\n                isOpen={isOpen}\n                initialConfig={textContent}\n            />\n        </div>\n    );\n};\n\nexport default SourceCode;\n"]}

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

@@ -0,0 +1,9 @@
+.pceditor-source-code-update-modal__alert {
+  margin-bottom: 8px;
+}
+.pceditor-source-code-update-modal__textarea textarea.g-text-area__control {
+  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);
+}

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

@@ -0,0 +1,8 @@
+interface UpdateModalProps {
+    initialConfig?: string;
+    onClose(): void;
+    onApply(tempConfig?: string): void;
+    isOpen: boolean;
+}
+export declare const UpdateModal: ({ onClose, onApply, isOpen, initialConfig }: UpdateModalProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/cjs/editor-v2/containers/SourceCode/UpdateModal/UpdateModal.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UpdateModal = void 0;
+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 cn_1 = require("../../../utils/cn.js");
+const b = (0, cn_1.editorCn)('source-code-update-modal');
+const UpdateModal = ({ onClose, onApply, isOpen, initialConfig }) => {
+    const [tempConfig, setTempConfig] = React.useState(initialConfig || '');
+    React.useEffect(() => {
+        if (isOpen && initialConfig) {
+            setTempConfig(initialConfig);
+        }
+    }, [isOpen, initialConfig]);
+    const handleApply = () => {
+        onApply(tempConfig);
+    };
+    return ((0, jsx_runtime_1.jsxs)(uikit_1.Dialog, { onClose: onClose, open: isOpen, size: 'l', className: b(), children: [(0, jsx_runtime_1.jsx)(uikit_1.Dialog.Header, { caption: "New configuration" }), (0, jsx_runtime_1.jsxs)(uikit_1.Dialog.Body, { children: [(0, jsx_runtime_1.jsx)(uikit_1.Alert, { theme: 'info', title: 'You can use YAML or JSON', message: 'The editor will automatically understand which format is needed.', className: b('alert') }), (0, jsx_runtime_1.jsx)(uikit_1.TextArea, { value: tempConfig, onUpdate: setTempConfig, rows: 25, className: b('textarea') })] }), (0, jsx_runtime_1.jsx)(uikit_1.Dialog.Footer, { showError: false, preset: 'default', textButtonApply: 'Apply', textButtonCancel: 'Cancel', onClickButtonApply: handleApply, onClickButtonCancel: onClose })] }));
+};
+exports.UpdateModal = UpdateModal;
+//# sourceMappingURL=UpdateModal.js.map

package/build/cjs/editor-v2/containers/SourceCode/UpdateModal/UpdateModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UpdateModal.js","sourceRoot":"../../../../../../src","sources":["editor-v2/containers/SourceCode/UpdateModal/UpdateModal.tsx"],"names":[],"mappings":";;;;;AAAA,6CAA0D;AAC1D,qDAA+B;AAE/B,6CAA2C;AAI3C,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,0BAA0B,CAAC,CAAC;AASxC,MAAM,WAAW,GAAG,CAAC,EAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAmB,EAAE,EAAE;IACvF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,aAAa,IAAI,EAAE,CAAC,CAAC;IAExE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,MAAM,IAAI,aAAa,EAAE,CAAC;YAC1B,aAAa,CAAC,aAAa,CAAC,CAAC;QACjC,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC;IAE5B,MAAM,WAAW,GAAG,GAAG,EAAE;QACrB,OAAO,CAAC,UAAU,CAAC,CAAC;IACxB,CAAC,CAAC;IACF,OAAO,CACH,wBAAC,cAAM,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,EAAE,aAC7D,uBAAC,cAAM,CAAC,MAAM,IAAC,OAAO,EAAC,mBAAmB,GAAG,EAC7C,wBAAC,cAAM,CAAC,IAAI,eACR,uBAAC,aAAK,IACF,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,0BAA0B,EACjC,OAAO,EAAE,kEAAkE,EAC3E,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,GAChB,EACT,uBAAC,gBAAQ,IACL,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,aAAa,EACvB,IAAI,EAAE,EAAE,EACR,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC,GAC1B,IACQ,EACd,uBAAC,cAAM,CAAC,MAAM,IACV,SAAS,EAAE,KAAK,EAChB,MAAM,EAAE,SAAS,EACjB,eAAe,EAAE,OAAO,EACxB,gBAAgB,EAAE,QAAQ,EAC1B,kBAAkB,EAAE,WAAW,EAC/B,mBAAmB,EAAE,OAAO,GAC9B,IACG,CACZ,CAAC;AACN,CAAC,CAAC;AAvCW,QAAA,WAAW,eAuCtB","sourcesContent":["import {Alert, Dialog, TextArea} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {editorCn} from '../../../utils/cn';\n\nimport './UpdateModal.scss';\n\nconst b = editorCn('source-code-update-modal');\n\ninterface UpdateModalProps {\n    initialConfig?: string;\n    onClose(): void;\n    onApply(tempConfig?: string): void;\n    isOpen: boolean;\n}\n\nexport const UpdateModal = ({onClose, onApply, isOpen, initialConfig}: UpdateModalProps) => {\n    const [tempConfig, setTempConfig] = React.useState(initialConfig || '');\n\n    React.useEffect(() => {\n        if (isOpen && initialConfig) {\n            setTempConfig(initialConfig);\n        }\n    }, [isOpen, initialConfig]);\n\n    const handleApply = () => {\n        onApply(tempConfig);\n    };\n    return (\n        <Dialog onClose={onClose} open={isOpen} size={'l'} className={b()}>\n            <Dialog.Header caption=\"New configuration\" />\n            <Dialog.Body>\n                <Alert\n                    theme={'info'}\n                    title={'You can use YAML or JSON'}\n                    message={'The editor will automatically understand which format is needed.'}\n                    className={b('alert')}\n                ></Alert>\n                <TextArea\n                    value={tempConfig}\n                    onUpdate={setTempConfig}\n                    rows={25}\n                    className={b('textarea')}\n                />\n            </Dialog.Body>\n            <Dialog.Footer\n                showError={false}\n                preset={'default'}\n                textButtonApply={'Apply'}\n                textButtonCancel={'Cancel'}\n                onClickButtonApply={handleApply}\n                onClickButtonCancel={onClose}\n            />\n        </Dialog>\n    );\n};\n"]}

package/build/cjs/editor-v2/containers/Tree/DragContext.css

@@ -0,0 +1,25 @@
+.pceditor-preview {
+  position: absolute;
+  height: auto;
+  background-color: var(--g-color-text-hint);
+  border: 1px dashed var(--g-color-text-primary);
+  border-radius: 4px;
+  padding: 8px;
+  z-index: 1000;
+  pointer-events: none;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+.pceditor-preview-content {
+  display: flex;
+  flex-direction: column;
+}
+.pceditor-preview-type {
+  color: var(--g-color-text-dark-secondary);
+  font-size: 12px;
+}
+.pceditor-preview-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px;
+}

package/build/cjs/editor-v2/containers/Tree/DragContext.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface DragItem {
+    path: number[];
+    type: string;
+    treeTitle?: string;
+}
+export declare const DragContext: React.Context<{
+    draggedItem: DragItem | null;
+    setDraggedItem: React.Dispatch<React.SetStateAction<DragItem | null>>;
+    previewRef: React.RefObject<HTMLDivElement>;
+    showPreview: (rect: DOMRect, item: DragItem) => void;
+    hidePreview: () => void;
+}>;
+export declare const DragContextProvider: React.FC<React.PropsWithChildren<{}>>;