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

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { ArrowRotateRight } from '@gravity-ui/icons';
+import { Button, Icon, TextInput } from '@gravity-ui/uikit';
+import { IframeContext } from "../../context/iframeContext/index.js";
+import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
+import { editorCn } from "../../utils/cn.js";
+import './Source.css';
+const b = editorCn('source');
+const Source = () => {
+    const { resetInitialize } = useMainEditorStore();
+    const { disableUrlField, url, setUrl } = React.useContext(IframeContext);
+    const onUpdateUrl = React.useCallback((value) => {
+        setUrl(value);
+        resetInitialize();
+    }, [resetInitialize, setUrl]);
+    const reloadIframe = () => {
+        setUrl('');
+        setTimeout(() => {
+            setUrl(url);
+        }, 0);
+    };
+    return (_jsxs("div", { className: b(), children: [_jsx(Button, { className: b('icon'), view: "flat", size: "m", onClick: reloadIframe, children: _jsx(Icon, { data: ArrowRotateRight, size: 18 }) }), _jsx(TextInput, { disabled: disableUrlField, className: b('text'), size: "m", value: url, onUpdate: onUpdateUrl })] }));
+};
+export default Source;
+//# sourceMappingURL=Source.js.map

package/build/esm/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,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAC,aAAa,EAAC,6CAAoC;AAC1D,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAClE,OAAO,EAAC,QAAQ,EAAC,0BAAuB;AAExC,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;AAE7B,MAAM,MAAM,GAAG,GAAG,EAAE;IAChB,MAAM,EAAC,eAAe,EAAC,GAAG,kBAAkB,EAAE,CAAC;IAC/C,MAAM,EAAC,eAAe,EAAE,GAAG,EAAE,MAAM,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,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,eAAK,SAAS,EAAE,CAAC,EAAE,aACf,KAAC,MAAM,IAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,GAAG,EAAC,OAAO,EAAE,YAAY,YACpE,KAAC,IAAI,IAAC,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,EAAE,GAAI,GACrC,EACT,KAAC,SAAS,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,eAAe,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/esm/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/esm/editor-v2/containers/SourceCode/SourceCode.d.ts

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

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

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Pencil } from '@gravity-ui/icons';
+import { Button, ClipboardButton, Icon, SegmentedRadioGroup } from '@gravity-ui/uikit';
+import yaml from 'js-yaml';
+import _ from 'lodash';
+import { MessageCard } from "../../components/MessageCard/MessageCard.js";
+import { MESSAGES } from "../../constants/messages.js";
+import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
+import { generateChildrenPathFromArray } from "../../utils/index.js";
+import { editorCn } from "../../utils/cn.js";
+import { UpdateModal } from "./UpdateModal/UpdateModal.js";
+import './SourceCode.css';
+const b = editorCn('source-code');
+const formatOptions = [
+    { value: 'yaml', content: 'YAML' },
+    { value: 'json', content: 'JSON' },
+];
+const SourceCode = ({ className, showSelectedBlockOnly = false }) => {
+    const { content, setContent, selectedBlock } = 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 = yaml.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 = generateChildrenPathFromArray(selectedBlock);
+            const newContent = _.cloneDeep(content);
+            _.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 = generateChildrenPathFromArray(selectedBlock);
+            const currentConfig = _.get(content.blocks, currentBlockPath || '');
+            if (currentConfig) {
+                return format === 'yaml'
+                    ? yaml.dump(currentConfig)
+                    : JSON.stringify(currentConfig, null, 2);
+            }
+            return 'No block selected';
+        }
+        return format === 'yaml' ? yaml.dump(content) : JSON.stringify(content, null, 2);
+    }, [format, content, showSelectedBlockOnly, selectedBlock]);
+    if (!selectedBlock && showSelectedBlockOnly) {
+        return (_jsx("div", { className: b(null, className), children: _jsx(MessageCard, { title: MESSAGES.NO_BLOCK_SELECTED.title, description: MESSAGES.NO_BLOCK_SELECTED.description, theme: "info" }) }));
+    }
+    return (_jsxs("div", { className: b(null, className), children: [_jsxs("div", { className: b('header'), children: [_jsx(SegmentedRadioGroup, { size: "m", value: format, options: formatOptions, onUpdate: (value) => setFormat(value) }), _jsxs("div", { className: b('controls'), children: [_jsxs(Button, { view: "outlined", size: "m", onClick: () => setIsOpen(true), children: [_jsx(Icon, { size: 14, data: Pencil }), "Edit"] }), _jsx(ClipboardButton, { view: "outlined", size: "m", text: textContent })] })] }), _jsx("div", { className: b('code'), children: _jsx("div", { className: b('content'), children: textContent }) }), _jsx(UpdateModal, { onApply: handleUpdate, onClose: () => setIsOpen(false), isOpen: isOpen, initialConfig: textContent })] }));
+};
+export default SourceCode;
+//# sourceMappingURL=SourceCode.js.map

package/build/esm/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/esm/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/esm/editor-v2/containers/SourceCode/UpdateModal/UpdateModal.d.ts

@@ -0,0 +1,9 @@
+import './UpdateModal.css';
+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/esm/editor-v2/containers/SourceCode/UpdateModal/UpdateModal.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Alert, Dialog, TextArea } from '@gravity-ui/uikit';
+import { editorCn } from "../../../utils/cn.js";
+import './UpdateModal.css';
+const b = editorCn('source-code-update-modal');
+export 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 (_jsxs(Dialog, { onClose: onClose, open: isOpen, size: 'l', className: b(), children: [_jsx(Dialog.Header, { caption: "New configuration" }), _jsxs(Dialog.Body, { children: [_jsx(Alert, { theme: 'info', title: 'You can use YAML or JSON', message: 'The editor will automatically understand which format is needed.', className: b('alert') }), _jsx(TextArea, { value: tempConfig, onUpdate: setTempConfig, rows: 25, className: b('textarea') })] }), _jsx(Dialog.Footer, { showError: false, preset: 'default', textButtonApply: 'Apply', textButtonCancel: 'Cancel', onClickButtonApply: handleApply, onClickButtonCancel: onClose })] }));
+};
+//# sourceMappingURL=UpdateModal.js.map

package/build/esm/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,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAC,QAAQ,EAAC,6BAA0B;AAE3C,OAAO,mBAAmB,CAAC;AAE3B,MAAM,CAAC,GAAG,QAAQ,CAAC,0BAA0B,CAAC,CAAC;AAS/C,MAAM,CAAC,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,MAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,EAAE,aAC7D,KAAC,MAAM,CAAC,MAAM,IAAC,OAAO,EAAC,mBAAmB,GAAG,EAC7C,MAAC,MAAM,CAAC,IAAI,eACR,KAAC,KAAK,IACF,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,0BAA0B,EACjC,OAAO,EAAE,kEAAkE,EAC3E,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,GAChB,EACT,KAAC,QAAQ,IACL,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,aAAa,EACvB,IAAI,EAAE,EAAE,EACR,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC,GAC1B,IACQ,EACd,KAAC,MAAM,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","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/esm/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/esm/editor-v2/containers/Tree/Tree.d.ts

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

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

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable no-negated-condition */
+import * as React from 'react';
+import { isKeyboardEvent } from '@dnd-kit/dom/utilities';
+import { move } from '@dnd-kit/helpers';
+import { DragDropProvider, DragOverlay } from '@dnd-kit/react';
+import { TrashBin } from '@gravity-ui/icons';
+import { Button, Icon } from '@gravity-ui/uikit';
+import { useMainEditorStore } from "../../hooks/index.js";
+import { generateChildrenPathFromArray, getItemTitle } from "../../utils/index.js";
+import { editorCn } from "../../utils/cn.js";
+import { TreeItem } from "./TreeItem.js";
+import { TreeItemOverlay } from "./TreeItemOverlay.js";
+import { blocksToTreeItems, getBlockTypeLabel, idToBlockPath, treeItemsToBlocks, } from "./utils/blocksBridge.js";
+import { buildTree, flattenTree, getDescendants, getDragDepth } from "./utils/common.js";
+import { sanitizeProjectionForChildrenCapability } from "./utils/treeDragGuards.js";
+import './Tree.css';
+const b = editorCn('tree');
+const INDENTATION = 24;
+const Tree = ({ className }) => {
+    const { content, setContent, selectedBlock, setSelectedBlock, resetBlocks, duplicateBlock, deleteBlock, } = useMainEditorStore();
+    const [flattenedItems, setFlattenedItems] = React.useState(() => flattenTree(blocksToTreeItems(content.blocks)));
+    const initialDepth = React.useRef(0);
+    const sourceChildren = React.useRef([]);
+    React.useEffect(() => {
+        setFlattenedItems(flattenTree(blocksToTreeItems(content.blocks)));
+    }, [content.blocks]);
+    const selectedBlockPathStr = React.useMemo(() => 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 = 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 = getDragDepth(offsetLeft, INDENTATION);
+                const projectedDepth = initialDepth.current + dragDepth;
+                const { depth, parentId } = sanitizeProjectionForChildrenCapability(flat, target.id, projectedDepth);
+                const sortedItems = 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 = 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 = getDragDepth(offsetLeft, INDENTATION);
+            const projectedDepth = keyboardDepth ?? initialDepth.current + dragDepth;
+            const { depth, parentId } = 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(flattenTree(blocksToTreeItems(content.blocks)));
+            return;
+        }
+        const merged = [...flattenedItems, ...sourceChildren.current];
+        const updatedTree = buildTree(merged);
+        const nextFlat = flattenTree(updatedTree);
+        const newBlocks = treeItemsToBlocks(updatedTree);
+        setFlattenedItems(nextFlat);
+        setContent({ ...content, blocks: newBlocks });
+        const draggedId = event.operation.source?.id;
+        const pathToDragged = draggedId !== null ? idToBlockPath(nextFlat, String(draggedId)) : [];
+        setSelectedBlock(pathToDragged.length ? pathToDragged : null);
+    }, [setContent, setSelectedBlock, content, flattenedItems]);
+    return (_jsxs("div", { className: b(null, className), children: [_jsx("div", { className: b('head'), children: _jsxs(Button, { view: "outlined-danger", onClick: () => resetBlocks(), children: [_jsx(Icon, { data: TrashBin }), "Clear all"] }) }), _jsxs(DragDropProvider, { onDragStart: handleDragStart, onDragOver: handleDragOver, onDragMove: handleDragMove, onDragEnd: handleDragEnd, children: [_jsx("div", { className: b('list'), children: flattenedItems.map((row, index) => {
+                            const path = idToBlockPath(flattenedItems, row.id);
+                            const pathKey = generateChildrenPathFromArray(path);
+                            const blockType = getBlockTypeLabel(row.block);
+                            return (_jsx(TreeItem, { item: row, sortableIndex: index, indentLeft: row.depth * INDENTATION, path: path, selected: selectedBlockPathStr === pathKey, type: blockType, treeTitle: getItemTitle(row.block), onCopy: duplicateBlock, onDelete: deleteBlock, onSelect: setSelectedBlock }, row.id));
+                        }) }), _jsx(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 (_jsx(TreeItemOverlay, { block: overlayBlock, count: sourceChildren.current.length, indentLeft: indentLeft }));
+                        } })] })] }));
+};
+export default Tree;
+//# sourceMappingURL=Tree.js.map

package/build/esm/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/esm/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);
+}

package/build/esm/editor-v2/containers/Tree/TreeItem.d.ts

@@ -0,0 +1,15 @@
+import type { FlattenedTreeItem } from "./types.js";
+import './TreeItem.css';
+export interface TreeItemProps {
+    item: FlattenedTreeItem;
+    sortableIndex: number;
+    indentLeft: number;
+    selected: boolean;
+    type: string;
+    treeTitle?: string;
+    path: number[];
+    onCopy(path: number[]): void;
+    onDelete(path: number[]): void;
+    onSelect(path: number[]): void;
+}
+export declare function TreeItem({ item, sortableIndex, indentLeft, selected, type, treeTitle, path, onCopy, onDelete, onSelect, }: TreeItemProps): import("react/jsx-runtime").JSX.Element;

package/build/esm/editor-v2/containers/Tree/TreeItem.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useSortable } from '@dnd-kit/react/sortable';
+import { Copy, TrashBin } from '@gravity-ui/icons';
+import { Button, Card, Icon } from '@gravity-ui/uikit';
+import { HTML } from "../../../components/index.js";
+import { editorCn } from "../../utils/cn.js";
+import './TreeItem.css';
+const b = editorCn('tree-item');
+const sortableConfig = {
+    alignment: {
+        x: 'start',
+        y: 'center',
+    },
+    transition: null,
+};
+export function TreeItem({ item, sortableIndex, indentLeft, selected, type, treeTitle, path, onCopy, onDelete, onSelect, }) {
+    const { depth, parentId, id } = item;
+    const { ref, isDragSource, isDropTarget } = useSortable({
+        ...sortableConfig,
+        id,
+        index: sortableIndex,
+        data: {
+            depth,
+            parentId,
+        },
+    });
+    const [mouseDownPos, setMouseDownPos] = React.useState(null);
+    const itemRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+        if (selected && itemRef.current) {
+            itemRef.current.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+            });
+        }
+    }, [selected]);
+    const setNodeRef = React.useCallback((node) => {
+        ref(node);
+        itemRef.current =
+            node;
+    }, [ref]);
+    const handleMouseDown = React.useCallback((e) => {
+        setMouseDownPos({ x: e.clientX, y: e.clientY });
+    }, []);
+    const handleMouseUp = React.useCallback((e) => {
+        if (mouseDownPos) {
+            const dx = Math.abs(e.clientX - mouseDownPos.x);
+            const dy = Math.abs(e.clientY - mouseDownPos.y);
+            if (dx < 5 && dy < 5) {
+                e.stopPropagation();
+                onSelect(path);
+            }
+        }
+        setMouseDownPos(null);
+    }, [mouseDownPos, onSelect, path]);
+    return (_jsx(Card, { ref: setNodeRef, className: b({
+            selected,
+            dragging: isDragSource,
+            'drag-over': isDropTarget,
+        }), style: { marginLeft: indentLeft }, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, children: _jsxs("div", { className: b('main'), children: [_jsxs("div", { className: b('text'), children: [_jsx("div", { className: b('type'), children: type }), _jsx(HTML, { className: b('title'), children: treeTitle })] }), _jsxs("div", { className: b('buttons'), children: [_jsx(Button, { view: "flat", size: "xs", onClick: () => onCopy(path), children: _jsx(Icon, { size: 12, data: Copy }) }), _jsx(Button, { view: "flat", size: "xs", onClick: () => onDelete(path), children: _jsx(Icon, { size: 12, data: TrashBin }) })] })] }) }));
+}
+//# sourceMappingURL=TreeItem.js.map