@gravity-ui/page-constructor 8.5.0-alpha.2 → 8.6.0

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

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,14 +0,0 @@
-import type { FlattenedTreeItem } from "./types.js";
-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;