@gravity-ui/page-constructor 8.4.2 → 8.5.0-alpha.1

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 * as React from 'react';\n\nimport {ChevronDown, ChevronUp, Copy, TrashBin} from '@gravity-ui/icons';\nimport {Button, Icon} from '@gravity-ui/uikit';\nimport _ from 'lodash';\n\nimport {usePostMessageAPIListener} from '../../../common/postMessage';\nimport {SerializableRect} from '../../../common/types/rect';\nimport {getCursorPositionOverElement} from '../../../utils/editor';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\n\nimport './Overlay.scss';\n\nconst b = editorCn('overlay');\n\ntype InsertPosition = 'top' | 'bottom' | 'left' | 'right';\n\ninterface OverlayProps {\n    className?: string;\n    canvasElement?: HTMLDivElement | null;\n}\n\nconst findRectByPath = (\n    rectMap: Array<{path: number[]; rect: SerializableRect}>,\n    path: number[] | null,\n): SerializableRect | null => {\n    if (!path) return null;\n    return rectMap.find((entry) => _.isEqual(entry.path, path))?.rect ?? null;\n};\n\nconst Overlay = ({className, canvasElement}: OverlayProps) => {\n    const {\n        rectMap,\n        setRectMap,\n        selectedBlock,\n        setSelectedBlock,\n        deleteBlock,\n        duplicateBlock,\n        manipulateOverlayMode,\n        preInsertBlockType,\n        preReorderBlockPath,\n        insertBlock,\n        reorderBlock,\n        disableMode,\n    } = useMainEditorStore();\n\n    const [hoveredPath, setHoveredPath] = React.useState<number[] | null>(null);\n    const [insertPosition, setInsertPosition] = React.useState<InsertPosition | null>(null);\n\n    usePostMessageAPIListener(\n        'ON_UPDATE_RECT_MAP',\n        ({rects}) => {\n            setRectMap(rects);\n        },\n        [setRectMap],\n    );\n\n    const selectedRect = React.useMemo(\n        () => findRectByPath(rectMap, selectedBlock),\n        [rectMap, selectedBlock],\n    );\n    const hoveredRect = React.useMemo(\n        () => findRectByPath(rectMap, hoveredPath),\n        [rectMap, hoveredPath],\n    );\n\n    // Auto-scroll to selected block when it changes\n    React.useEffect(() => {\n        if (selectedRect && canvasElement) {\n            const canvasHeight = canvasElement.clientHeight;\n            const scrollPosition = selectedRect.top - canvasHeight / 2 + selectedRect.height / 2;\n            canvasElement.scrollTo({\n                top: Math.max(0, scrollPosition),\n                behavior: 'smooth',\n            });\n        }\n        // Intentionally depends on selectedBlock identity (path), not rect value, to avoid scroll jitter on rect updates.\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [selectedBlock, canvasElement]);\n\n    const handleClick = React.useCallback(\n        (path: number[]) => {\n            if (selectedBlock && _.isEqual(selectedBlock, path)) {\n                setSelectedBlock(null);\n            } else {\n                setSelectedBlock(path);\n            }\n        },\n        [selectedBlock, setSelectedBlock],\n    );\n\n    const handleMouseEnter = React.useCallback((path: number[]) => {\n        setHoveredPath(path);\n    }, []);\n\n    const handleMouseLeave = React.useCallback((path: number[]) => {\n        setHoveredPath((current) => (_.isEqual(current, path) ? null : current));\n    }, []);\n\n    const handleMouseMove = React.useCallback(\n        (e: React.MouseEvent) => {\n            if (!manipulateOverlayMode) {\n                return;\n            }\n\n            const domRect = e.currentTarget.getBoundingClientRect();\n            const position = getCursorPositionOverElement(domRect, e);\n            setInsertPosition(position as InsertPosition);\n        },\n        [manipulateOverlayMode],\n    );\n\n    const handleKeyDown = React.useCallback(\n        (e: React.KeyboardEvent, path: number[]) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n                e.stopPropagation();\n                handleClick(path);\n            }\n        },\n        [handleClick],\n    );\n\n    const handleMouseUp = React.useCallback(\n        (path: number[]) => {\n            if (!manipulateOverlayMode) return;\n\n            const position = insertPosition;\n            const prepend = position === 'left' || position === 'top';\n\n            if (manipulateOverlayMode === 'insert' && preInsertBlockType) {\n                insertBlock(path, preInsertBlockType, prepend ? 'prepend' : 'append');\n            } else if (manipulateOverlayMode === 'reorder' && preReorderBlockPath) {\n                reorderBlock(preReorderBlockPath, path, prepend ? 'prepend' : 'append');\n            }\n\n            disableMode();\n            setInsertPosition(null);\n        },\n        [\n            manipulateOverlayMode,\n            preInsertBlockType,\n            preReorderBlockPath,\n            insertBlock,\n            reorderBlock,\n            disableMode,\n            insertPosition,\n        ],\n    );\n\n    const handleMoveUp = () => {\n        if (!selectedBlock) return;\n        const destination = [...selectedBlock];\n        const newLastDestination = destination[destination.length - 1] - 1;\n\n        if (newLastDestination < 0) {\n            return;\n        }\n\n        destination[destination.length - 1] = newLastDestination;\n        reorderBlock(selectedBlock, destination, 'prepend');\n    };\n\n    const handleMoveDown = () => {\n        if (!selectedBlock) return;\n        const destination = [...selectedBlock];\n        const newLastDestination = destination[destination.length - 1] + 1;\n\n        destination[destination.length - 1] = newLastDestination;\n        reorderBlock(selectedBlock, destination, 'append');\n    };\n\n    const showHoverBorder =\n        hoveredRect && (!selectedBlock || !_.isEqual(hoveredPath, selectedBlock));\n\n    return (\n        <div className={b(null, className)}>\n            {rectMap.map(({path, rect, dropZone}) => {\n                const key = path.join('.');\n                return (\n                    <div\n                        key={key}\n                        role={dropZone ? 'presentation' : 'button'}\n                        tabIndex={dropZone ? -1 : 0}\n                        className={b('hit')}\n                        style={{\n                            top: rect.top,\n                            left: rect.left,\n                            width: rect.width,\n                            height: rect.height,\n                            zIndex: 10 * (path.length + (dropZone ? 0 : 1)),\n                        }}\n                        onClick={\n                            dropZone\n                                ? undefined\n                                : (e) => {\n                                      e.stopPropagation();\n                                      handleClick(path);\n                                  }\n                        }\n                        onKeyDown={dropZone ? undefined : (e) => handleKeyDown(e, path)}\n                        onMouseEnter={() => handleMouseEnter(path)}\n                        onMouseLeave={() => handleMouseLeave(path)}\n                        onMouseMove={(e) => handleMouseMove(e)}\n                        onMouseUp={() => handleMouseUp(path)}\n                    />\n                );\n            })}\n            {selectedRect ? (\n                <div\n                    className={b('border')}\n                    style={{\n                        top: selectedRect.top,\n                        left: selectedRect.left,\n                        width: selectedRect.width,\n                        height: selectedRect.height,\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            {showHoverBorder ? (\n                <div\n                    className={b('border', {hover: true})}\n                    style={{\n                        top: hoveredRect.top,\n                        left: hoveredRect.left,\n                        width: hoveredRect.width,\n                        height: hoveredRect.height,\n                    }}\n                />\n            ) : null}\n            {manipulateOverlayMode && hoveredRect && insertPosition ? (\n                <div\n                    className={b('line', {position: insertPosition})}\n                    style={{\n                        top: hoveredRect.top,\n                        left: hoveredRect.left,\n                        width: hoveredRect.width,\n                        height: hoveredRect.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 React = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+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,qDAA+B;AAE/B,6CAAmD;AACnD,6CAA0D;AAE1D,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 * as React from 'react';\n\nimport {ArrowRotateRight} from '@gravity-ui/icons';\nimport {Button, Icon, TextInput} from '@gravity-ui/uikit';\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,88 @@
+.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;
+}
+.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__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 8px;
+  overflow: auto;
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: 6px;
+  position: relative;
+  flex: 1;
+}
+.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 React = tslib_1.__importStar(require("react"));
+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 MessageCard_1 = require("../../components/MessageCard/MessageCard.js");
+const messages_1 = require("../../constants/messages.js");
+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 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 * as React from 'react';\n\nimport {Pencil} from '@gravity-ui/icons';\nimport {Button, ClipboardButton, Icon, SegmentedRadioGroup} from '@gravity-ui/uikit';\nimport yaml from 'js-yaml';\nimport _ from 'lodash';\n\nimport {PageContent} from '../../../models';\nimport {MessageCard} from '../../components/MessageCard/MessageCard';\nimport {MESSAGES} from '../../constants/messages';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {generateChildrenPathFromArray} from '../../utils';\nimport {editorCn} from '../../utils/cn';\n\nimport {UpdateModal} from './UpdateModal/UpdateModal';\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 PageContent);\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 React = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+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,qDAA+B;AAE/B,6CAA0D;AAE1D,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 * as React from 'react';\n\nimport {Alert, Dialog, TextArea} from '@gravity-ui/uikit';\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/Tree.css

@@ -0,0 +1,18 @@
+.pceditor-tree {
+  padding: 12px;
+  position: relative;
+}
+.pceditor-tree__head {
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.pceditor-tree__list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.pceditor-tree__dnd-overlay {
+  opacity: 1;
+}

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

@@ -0,0 +1,5 @@
+import type { ClassNameProps } from "../../../models/index.js";
+interface TreeProps extends ClassNameProps {
+}
+declare const Tree: ({ className }: TreeProps) => import("react/jsx-runtime").JSX.Element;
+export default Tree;

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

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable no-negated-condition */
+const React = tslib_1.__importStar(require("react"));
+const utilities_1 = require("@dnd-kit/dom/utilities");
+const helpers_1 = require("@dnd-kit/helpers");
+const react_1 = require("@dnd-kit/react");
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const hooks_1 = require("../../hooks/index.js");
+const utils_1 = require("../../utils/index.js");
+const cn_1 = require("../../utils/cn.js");
+const TreeItem_1 = require("./TreeItem.js");
+const TreeItemOverlay_1 = require("./TreeItemOverlay.js");
+const blocksBridge_1 = require("./utils/blocksBridge.js");
+const common_1 = require("./utils/common.js");
+const treeDragGuards_1 = require("./utils/treeDragGuards.js");
+const b = (0, cn_1.editorCn)('tree');
+const INDENTATION = 24;
+const Tree = ({ className }) => {
+    const { content, setContent, selectedBlock, setSelectedBlock, resetBlocks, duplicateBlock, deleteBlock, } = (0, hooks_1.useMainEditorStore)();
+    const [flattenedItems, setFlattenedItems] = React.useState(() => (0, common_1.flattenTree)((0, blocksBridge_1.blocksToTreeItems)(content.blocks)));
+    const initialDepth = React.useRef(0);
+    const sourceChildren = React.useRef([]);
+    React.useEffect(() => {
+        setFlattenedItems((0, common_1.flattenTree)((0, blocksBridge_1.blocksToTreeItems)(content.blocks)));
+    }, [content.blocks]);
+    const selectedBlockPathStr = React.useMemo(() => (0, utils_1.generateChildrenPathFromArray)(selectedBlock || []), [selectedBlock]);
+    const handleDragStart = React.useCallback((event) => {
+        const { source } = event.operation;
+        if (!source) {
+            return;
+        }
+        const row = flattenedItems.find(({ id }) => id === source.id);
+        if (!row) {
+            return;
+        }
+        initialDepth.current = row.depth;
+        setFlattenedItems((flatItems) => {
+            sourceChildren.current = [];
+            const descendants = (0, common_1.getDescendants)(flatItems, source.id);
+            return flatItems.filter((item) => {
+                if (descendants.has(item.id)) {
+                    sourceChildren.current = [...sourceChildren.current, item];
+                    return false;
+                }
+                return true;
+            });
+        });
+    }, [flattenedItems]);
+    const handleDragOver = React.useCallback((event, manager) => {
+        event.preventDefault();
+        const { source, target } = event.operation;
+        if (source && target && source.id !== target.id) {
+            setFlattenedItems((flat) => {
+                const offsetLeft = manager.dragOperation.transform.x;
+                const dragDepth = (0, common_1.getDragDepth)(offsetLeft, INDENTATION);
+                const projectedDepth = initialDepth.current + dragDepth;
+                const { depth, parentId } = (0, treeDragGuards_1.sanitizeProjectionForChildrenCapability)(flat, target.id, projectedDepth);
+                const sortedItems = (0, helpers_1.move)(flat, event);
+                return sortedItems.map((item) => item.id === source.id ? { ...item, depth, parentId } : item);
+            });
+        }
+    }, []);
+    const handleDragMove = React.useCallback((event, manager) => {
+        if (event.defaultPrevented) {
+            return;
+        }
+        const { source, target } = event.operation;
+        if (source && target) {
+            const keyboard = (0, utilities_1.isKeyboardEvent)(event.operation.activatorEvent);
+            const currentDepth = source.data?.depth ?? 0;
+            let keyboardDepth;
+            if (keyboard) {
+                const isHorizontal = event.by?.x !== 0 && event.by?.y === 0;
+                if (isHorizontal) {
+                    event.preventDefault();
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    keyboardDepth = currentDepth + Math.sign(event.by.x);
+                }
+            }
+            const offsetLeft = manager.dragOperation.transform.x;
+            const dragDepth = (0, common_1.getDragDepth)(offsetLeft, INDENTATION);
+            const projectedDepth = keyboardDepth ?? initialDepth.current + dragDepth;
+            const { depth, parentId } = (0, treeDragGuards_1.sanitizeProjectionForChildrenCapability)(flattenedItems, source.id, projectedDepth);
+            if (keyboard) {
+                if (currentDepth !== depth) {
+                    const offset = INDENTATION * (depth - currentDepth);
+                    manager.actions.move({
+                        by: { x: offset, y: 0 },
+                        propagate: false,
+                    });
+                }
+            }
+            if (source.data?.depth !== depth || source.data?.parentId !== parentId) {
+                setFlattenedItems((flat) => flat.map((item) => item.id === source.id ? { ...item, depth, parentId } : item));
+            }
+        }
+    }, [flattenedItems]);
+    const handleDragEnd = React.useCallback((event) => {
+        if (event.canceled) {
+            setFlattenedItems((0, common_1.flattenTree)((0, blocksBridge_1.blocksToTreeItems)(content.blocks)));
+            return;
+        }
+        const merged = [...flattenedItems, ...sourceChildren.current];
+        const updatedTree = (0, common_1.buildTree)(merged);
+        const nextFlat = (0, common_1.flattenTree)(updatedTree);
+        const newBlocks = (0, blocksBridge_1.treeItemsToBlocks)(updatedTree);
+        setFlattenedItems(nextFlat);
+        setContent({ ...content, blocks: newBlocks });
+        const draggedId = event.operation.source?.id;
+        const pathToDragged = draggedId !== null ? (0, blocksBridge_1.idToBlockPath)(nextFlat, String(draggedId)) : [];
+        setSelectedBlock(pathToDragged.length ? pathToDragged : null);
+    }, [setContent, setSelectedBlock, content, flattenedItems]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), children: [(0, jsx_runtime_1.jsx)("div", { className: b('head'), children: (0, jsx_runtime_1.jsxs)(uikit_1.Button, { view: "outlined-danger", onClick: () => resetBlocks(), children: [(0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.TrashBin }), "Clear all"] }) }), (0, jsx_runtime_1.jsxs)(react_1.DragDropProvider, { onDragStart: handleDragStart, onDragOver: handleDragOver, onDragMove: handleDragMove, onDragEnd: handleDragEnd, children: [(0, jsx_runtime_1.jsx)("div", { className: b('list'), children: flattenedItems.map((row, index) => {
+                            const path = (0, blocksBridge_1.idToBlockPath)(flattenedItems, row.id);
+                            const pathKey = (0, utils_1.generateChildrenPathFromArray)(path);
+                            const blockType = (0, blocksBridge_1.getBlockTypeLabel)(row.block);
+                            return ((0, jsx_runtime_1.jsx)(TreeItem_1.TreeItem, { item: row, sortableIndex: index, indentLeft: row.depth * INDENTATION, path: path, selected: selectedBlockPathStr === pathKey, type: blockType, treeTitle: (0, utils_1.getItemTitle)(row.block), onCopy: duplicateBlock, onDelete: deleteBlock, onSelect: setSelectedBlock }, row.id));
+                        }) }), (0, jsx_runtime_1.jsx)(react_1.DragOverlay, { className: b('dnd-overlay'), dropAnimation: null, children: (source) => {
+                            if (!source) {
+                                return null;
+                            }
+                            const sourceId = String(source.id);
+                            const rowNow = flattenedItems.find(({ id }) => String(id) === sourceId);
+                            const overlayBlock = rowNow?.block;
+                            if (!overlayBlock) {
+                                return null;
+                            }
+                            const indentLeft = (rowNow?.depth ?? 0) * INDENTATION;
+                            return ((0, jsx_runtime_1.jsx)(TreeItemOverlay_1.TreeItemOverlay, { block: overlayBlock, count: sourceChildren.current.length, indentLeft: indentLeft }));
+                        } })] })] }));
+};
+exports.default = Tree;
+//# sourceMappingURL=Tree.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tree.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/Tree/Tree.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-negated-condition */\nimport * as React from 'react';\n\nimport type {DragDropEvents} from '@dnd-kit/abstract';\nimport type {DragDropManager, Draggable, Droppable} from '@dnd-kit/dom';\nimport {isKeyboardEvent} from '@dnd-kit/dom/utilities';\nimport {move} from '@dnd-kit/helpers';\nimport {DragDropProvider, DragOverlay} from '@dnd-kit/react';\nimport {TrashBin} from '@gravity-ui/icons';\nimport {Button, Icon} from '@gravity-ui/uikit';\nimport _ from 'lodash';\n\nimport type {ClassNameProps} from '../../../models';\nimport {useMainEditorStore} from '../../hooks';\nimport {generateChildrenPathFromArray, getItemTitle} from '../../utils';\nimport {editorCn} from '../../utils/cn';\n\nimport {TreeItem} from './TreeItem';\nimport {TreeItemOverlay} from './TreeItemOverlay';\nimport type {FlattenedTreeItem} from './types';\nimport {\n    blocksToTreeItems,\n    getBlockTypeLabel,\n    idToBlockPath,\n    treeItemsToBlocks,\n} from './utils/blocksBridge';\nimport {buildTree, flattenTree, getDescendants, getDragDepth} from './utils/common';\nimport {sanitizeProjectionForChildrenCapability} from './utils/treeDragGuards';\n\nimport './Tree.scss';\n\ntype TreeDnd = DragDropEvents<Draggable, Droppable, DragDropManager>;\ntype TreeDragStartEvent = Parameters<TreeDnd['dragstart']>[0];\ntype TreeDragOverEvent = Parameters<TreeDnd['dragover']>[0];\ntype TreeDragMoveEvent = Parameters<TreeDnd['dragmove']>[0];\ntype TreeDragEndEvent = Parameters<TreeDnd['dragend']>[0];\n\nconst b = editorCn('tree');\n\nconst INDENTATION = 24;\n\ninterface TreeProps extends ClassNameProps {}\n\nconst Tree = ({className}: TreeProps) => {\n    const {\n        content,\n        setContent,\n        selectedBlock,\n        setSelectedBlock,\n        resetBlocks,\n        duplicateBlock,\n        deleteBlock,\n    } = useMainEditorStore();\n\n    const [flattenedItems, setFlattenedItems] = React.useState(() =>\n        flattenTree(blocksToTreeItems(content.blocks)),\n    );\n\n    const initialDepth = React.useRef(0);\n    const sourceChildren = React.useRef<FlattenedTreeItem[]>([]);\n\n    React.useEffect(() => {\n        setFlattenedItems(flattenTree(blocksToTreeItems(content.blocks)));\n    }, [content.blocks]);\n\n    const selectedBlockPathStr = React.useMemo(\n        () => generateChildrenPathFromArray(selectedBlock || []),\n        [selectedBlock],\n    );\n\n    const handleDragStart = React.useCallback(\n        (event: TreeDragStartEvent) => {\n            const {source} = event.operation;\n            if (!source) {\n                return;\n            }\n\n            const row = flattenedItems.find(({id}) => id === source.id);\n            if (!row) {\n                return;\n            }\n\n            initialDepth.current = row.depth;\n\n            setFlattenedItems((flatItems) => {\n                sourceChildren.current = [];\n                const descendants = getDescendants(flatItems, source.id);\n                return flatItems.filter((item) => {\n                    if (descendants.has(item.id)) {\n                        sourceChildren.current = [...sourceChildren.current, item];\n                        return false;\n                    }\n                    return true;\n                });\n            });\n        },\n        [flattenedItems],\n    );\n\n    const handleDragOver = React.useCallback(\n        (event: TreeDragOverEvent, manager: DragDropManager) => {\n            event.preventDefault();\n            const {source, target} = event.operation;\n\n            if (source && target && source.id !== target.id) {\n                setFlattenedItems((flat) => {\n                    const offsetLeft = manager.dragOperation.transform.x;\n                    const dragDepth = getDragDepth(offsetLeft, INDENTATION);\n                    const projectedDepth = initialDepth.current + dragDepth;\n\n                    const {depth, parentId} = sanitizeProjectionForChildrenCapability(\n                        flat,\n                        target.id,\n                        projectedDepth,\n                    );\n\n                    const sortedItems = move(flat, event);\n                    return sortedItems.map((item) =>\n                        item.id === source.id ? {...item, depth, parentId} : item,\n                    );\n                });\n            }\n        },\n        [],\n    );\n\n    const handleDragMove = React.useCallback(\n        (event: TreeDragMoveEvent, manager: DragDropManager) => {\n            if (event.defaultPrevented) {\n                return;\n            }\n\n            const {source, target} = event.operation;\n\n            if (source && target) {\n                const keyboard = isKeyboardEvent(event.operation.activatorEvent);\n                const currentDepth = source.data?.depth ?? 0;\n                let keyboardDepth: number | undefined;\n\n                if (keyboard) {\n                    const isHorizontal = event.by?.x !== 0 && event.by?.y === 0;\n\n                    if (isHorizontal) {\n                        event.preventDefault();\n                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n                        keyboardDepth = currentDepth + Math.sign(event.by!.x);\n                    }\n                }\n\n                const offsetLeft = manager.dragOperation.transform.x;\n                const dragDepth = getDragDepth(offsetLeft, INDENTATION);\n\n                const projectedDepth = keyboardDepth ?? initialDepth.current + dragDepth;\n\n                const {depth, parentId} = sanitizeProjectionForChildrenCapability(\n                    flattenedItems,\n                    source.id,\n                    projectedDepth,\n                );\n\n                if (keyboard) {\n                    if (currentDepth !== depth) {\n                        const offset = INDENTATION * (depth - currentDepth);\n\n                        manager.actions.move({\n                            by: {x: offset, y: 0},\n                            propagate: false,\n                        });\n                    }\n                }\n\n                if (source.data?.depth !== depth || source.data?.parentId !== parentId) {\n                    setFlattenedItems((flat) =>\n                        flat.map((item) =>\n                            item.id === source.id ? {...item, depth, parentId} : item,\n                        ),\n                    );\n                }\n            }\n        },\n        [flattenedItems],\n    );\n\n    const handleDragEnd = React.useCallback(\n        (event: TreeDragEndEvent) => {\n            if (event.canceled) {\n                setFlattenedItems(flattenTree(blocksToTreeItems(content.blocks)));\n                return;\n            }\n\n            const merged = [...flattenedItems, ...sourceChildren.current];\n\n            const updatedTree = buildTree(merged);\n            const nextFlat = flattenTree(updatedTree);\n            const newBlocks = treeItemsToBlocks(updatedTree);\n\n            setFlattenedItems(nextFlat);\n            setContent({...content, blocks: newBlocks});\n\n            const draggedId = event.operation.source?.id;\n            const pathToDragged =\n                draggedId !== null ? idToBlockPath(nextFlat, String(draggedId)) : [];\n            setSelectedBlock(pathToDragged.length ? pathToDragged : null);\n        },\n        [setContent, setSelectedBlock, content, flattenedItems],\n    );\n\n    return (\n        <div className={b(null, className)}>\n            <div className={b('head')}>\n                <Button view=\"outlined-danger\" onClick={() => resetBlocks()}>\n                    <Icon data={TrashBin} />\n                    Clear all\n                </Button>\n            </div>\n            <DragDropProvider\n                onDragStart={handleDragStart}\n                onDragOver={handleDragOver}\n                onDragMove={handleDragMove}\n                onDragEnd={handleDragEnd}\n            >\n                <div className={b('list')}>\n                    {flattenedItems.map((row, index) => {\n                        const path = idToBlockPath(flattenedItems, row.id);\n                        const pathKey = generateChildrenPathFromArray(path);\n                        const blockType = getBlockTypeLabel(row.block);\n\n                        return (\n                            <TreeItem\n                                key={row.id}\n                                item={row}\n                                sortableIndex={index}\n                                indentLeft={row.depth * INDENTATION}\n                                path={path}\n                                selected={selectedBlockPathStr === pathKey}\n                                type={blockType}\n                                treeTitle={getItemTitle(row.block)}\n                                onCopy={duplicateBlock}\n                                onDelete={deleteBlock}\n                                onSelect={setSelectedBlock}\n                            />\n                        );\n                    })}\n                </div>\n                <DragOverlay className={b('dnd-overlay')} dropAnimation={null}>\n                    {(source) => {\n                        if (!source) {\n                            return null;\n                        }\n                        const sourceId = String(source.id);\n                        const rowNow = flattenedItems.find(({id}) => String(id) === sourceId);\n                        const overlayBlock = rowNow?.block;\n                        if (!overlayBlock) {\n                            return null;\n                        }\n                        const indentLeft = (rowNow?.depth ?? 0) * INDENTATION;\n                        return (\n                            <TreeItemOverlay\n                                block={overlayBlock}\n                                count={sourceChildren.current.length}\n                                indentLeft={indentLeft}\n                            />\n                        );\n                    }}\n                </DragOverlay>\n            </DragDropProvider>\n        </div>\n    );\n};\n\nexport default Tree;\n"]}

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

@@ -0,0 +1,80 @@
+.pceditor-tree-item {
+  padding: 8px;
+  margin-bottom: 0;
+  cursor: pointer;
+}
+.pceditor-tree-item_selected.g-card:not(.pceditor-tree-item_drag-over.g-card) {
+  border: 1.5px var(--g-color-line-brand) solid;
+}
+.pceditor-tree-item_dragging.g-card {
+  opacity: 0.85;
+}
+.pceditor-tree-item_drag-over.g-card {
+  outline: 1.5px dashed var(--g-color-line-brand);
+  outline-offset: -1px;
+}
+.pceditor-tree-item_overlay.g-card {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-width: 220px;
+  max-width: min(100vw - 32px, 420px);
+  cursor: grabbing;
+  background-color: var(--g-color-base-background);
+  opacity: 1;
+  box-shadow: 0 4px 12px var(--g-color-private-black-150);
+}
+.pceditor-tree-item__main {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  min-height: 20px;
+}
+.pceditor-tree-item__main:hover .pceditor-tree-item__buttons {
+  display: flex;
+}
+.pceditor-tree-item__text {
+  flex: 1 1 auto;
+  min-width: 1px;
+}
+.pceditor-tree-item__buttons {
+  flex: 0 0 auto;
+  flex-direction: row;
+  gap: 4px;
+  display: none;
+}
+.pceditor-tree-item__type {
+  color: var(--g-color-text-secondary);
+}
+.pceditor-tree-item__title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+  display: inherit;
+}
+.pceditor-tree-item__title * {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+  display: inherit;
+}
+.pceditor-tree-item__badge {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  height: 22px;
+  padding: 0 6px;
+  border-radius: 50%;
+  background-color: var(--g-color-base-brand);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--g-color-text-brand-contrast);
+}