npm - @gravity-ui/page-constructor - Versions diffs - 6.3.2-alpha.7 → 6.3.2-alpha.9 - Mend

@gravity-ui/page-constructor 6.3.2-alpha.7 → 6.3.2-alpha.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (393) hide show

package/build/esm/editor-v2/containers/MiddleScreen/MiddleScreen.css CHANGED Viewed

@@ -29,14 +29,51 @@
   justify-content: center;
   align-items: flex-start;
   overflow: hidden;
+  position: relative;
 }
 .pceditor-middle-screen__canvas {
+  scrollbar-width: thin;
+  scrollbar-color: var(--g-color-scroll-handle) transparent;
+  overflow: auto;
+  background-color: var(--g-color-base-background);
   transform-origin: center top;
-  overflow-y: scroll;
-  position: relative;
+  position: absolute;
   height: 100%;
   max-width: 100%;
 }
+.pceditor-middle-screen__canvas::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: transparent;
+}
+.pceditor-middle-screen__canvas::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 4px;
+}
+.pceditor-middle-screen__canvas::-webkit-scrollbar-thumb {
+  background: var(--g-color-scroll-handle);
+  border-radius: 4px;
+  transition: background-color 0.2s;
+  opacity: 0;
+}
+.pceditor-middle-screen__canvas::-webkit-scrollbar-thumb:hover {
+  background: var(--g-color-scroll-handle-hover);
+  opacity: 1;
+}
+.pceditor-middle-screen__canvas::-webkit-scrollbar-thumb:active {
+  background: var(--g-color-scroll-handle-hover);
+  opacity: 1;
+}
+.pceditor-middle-screen__canvas::-webkit-scrollbar-corner {
+  background: transparent;
+}
+.pceditor-middle-screen__canvas:hover::-webkit-scrollbar-thumb {
+  opacity: 0.7;
+}
+.pceditor-middle-screen__canvas:not(:hover)::-webkit-scrollbar-thumb {
+  opacity: 0;
+  transition: opacity 0.5s ease-out;
+}
 .pceditor-middle-screen__canvas_fullscreen {
   overflow: hidden;
   width: 100%;

package/build/esm/editor-v2/containers/MiddleScreen/MiddleScreen.js CHANGED Viewed

@@ -17,11 +17,11 @@ const MiddleScreen = ({ className, CustomTop }) => {
     const canvasStyle = React.useMemo(() => ({
         transform: isPreviewMode ? 'none' : `scale(${zoom}%)`,
         height: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
-        width: isPreviewMode ? '100%' : deviceWidth,
+        width: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
         maxWidth: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
-    }), [isPreviewMode, zoom, deviceWidth]);
+    }), [isPreviewMode, zoom]);
     const onResize = React.useCallback((newHeight) => {
-        setHeight(newHeight + 500);
+        setHeight(newHeight + 100);
     }, [setHeight]);
     usePostMessageAPIListener('ON_RESIZE', ({ height: newHeight }) => {
         onResize(newHeight);
@@ -29,7 +29,11 @@ const MiddleScreen = ({ className, CustomTop }) => {
     usePostMessageAPIListener('ON_INIT', ({ height: newHeight }) => {
         onResize(newHeight);
     });
-    return (_jsxs("div", { className: b(null, className), children: [CustomTop && !isPreviewMode ? (_jsx("div", { className: b('topbar'), children: _jsx(CustomTop, {}) })) : null, _jsx("div", { className: b('content', { fullscreen: isPreviewMode }), children: _jsx("div", { className: b('wrapper'), children: _jsxs("div", { ref: setCanvasRef, className: b('canvas', { hidden: !initialized, fullscreen: isPreviewMode }), style: canvasStyle, children: [_jsx("iframe", { ref: (instance) => instance && setIframeElement(instance), className: b('iframe', { fullscreen: isPreviewMode }), src: url, height: isPreviewMode ? '100%' : `${height}px`, width: isPreviewMode ? '100%' : deviceWidth, frameBorder: "0", title: "Page Constructor Iframe" }), !isPreviewMode && (_jsx(Overlay, { className: b('overlay'), canvasElement: canvasRef })), isPreviewMode && (_jsx(Button, { view: "action", className: b('exit-preview'), onClick: togglePreviewMode, "aria-label": "Exit preview mode", title: "Exit preview mode", size: "l", children: _jsx(Icon, { size: 24, data: Xmark }) })), !initialized && (_jsx("div", { className: b('loading'), children: _jsx(Loader, { size: 'l' }) }))] }) }) })] }));
+    return (_jsxs("div", { className: b(null, className), children: [CustomTop && !isPreviewMode ? (_jsx("div", { className: b('topbar'), children: _jsx(CustomTop, {}) })) : null, _jsx("div", { className: b('content', { fullscreen: isPreviewMode }), children: _jsx("div", { className: b('wrapper'), children: _jsxs("div", { ref: setCanvasRef, className: b('canvas', { hidden: !initialized, fullscreen: isPreviewMode }), style: canvasStyle, children: [_jsx("iframe", { ref: (instance) => {
+                                    if (instance) {
+                                        setIframeElement(instance);
+                                    }
+                                }, className: b('iframe', { fullscreen: isPreviewMode }), src: url, height: isPreviewMode ? '100%' : `${height}px`, width: isPreviewMode ? '100%' : deviceWidth, frameBorder: "0", title: "Page Constructor Iframe" }), !isPreviewMode && (_jsx(Overlay, { className: b('overlay'), canvasElement: canvasRef })), isPreviewMode && (_jsx(Button, { view: "action", className: b('exit-preview'), onClick: togglePreviewMode, "aria-label": "Exit preview mode", title: "Exit preview mode", size: "l", children: _jsx(Icon, { size: 24, data: Xmark }) })), !initialized && (_jsx("div", { className: b('loading'), children: _jsx(Loader, { size: 'l' }) }))] }) }) })] }));
 };
 export default MiddleScreen;
 //# sourceMappingURL=MiddleScreen.js.map

package/build/esm/editor-v2/containers/MiddleScreen/MiddleScreen.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MiddleScreen.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/MiddleScreen/MiddleScreen.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAC,MAAM,mBAAmB,CAAC;AACvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,yBAAyB,EAAC,uCAAoC;AACtE,OAAO,EAAC,aAAa,EAAC,6CAAoC;AAC1D,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAClE,OAAO,EAAC,QAAQ,EAAC,0BAAuB;AACxC,OAAO,OAAO,8BAA2B;AAEzC,OAAO,oBAAoB,CAAC;AAE5B,MAAM,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAOpC,MAAM,YAAY,GAAG,CAAC,EAAC,SAAS,EAAE,SAAS,EAAoB,EAAE,EAAE;IAC/D,MAAM,EAAC,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,iBAAiB,EAAC,GAAG,kBAAkB,EAAE,CAAC;IAChG,MAAM,EAAC,GAAG,EAAE,gBAAgB,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IAChE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAwB,IAAI,CAAC,CAAC;IAC9E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE9C,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAC7B,GAAG,EAAE,CAAC,CAAC;QACH,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IAAI,IAAI;QACrD,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,GAAG;QACzD,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,~~WAAW~~;~~QAC3C~~,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,GAAG;KAC9D,CAAC,EACF,CAAC,aAAa,EAAE,IAAI,~~EAAE,WAAW,~~CAAC,~~CACrC~~,CAAC;IAEF,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAC9B,CAAC,SAAiB,EAAE,EAAE;QAClB,SAAS,CAAC,SAAS,GAAG,GAAG,CAAC,CAAC;IAC/B,CAAC,EACD,CAAC,SAAS,CAAC,CACd,CAAC;IAEF,yBAAyB,CAAC,WAAW,EAAE,CAAC,EAAC,MAAM,EAAE,SAAS,EAAC,EAAE,EAAE;QAC3D,QAAQ,CAAC,SAAS,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;IAEH,yBAAyB,CAAC,SAAS,EAAE,CAAC,EAAC,MAAM,EAAE,SAAS,EAAC,EAAE,EAAE;QACzD,QAAQ,CAAC,SAAS,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;IAEH,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC7B,SAAS,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAC3B,cAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YACvB,KAAC,SAAS,KAAG,GACX,CACT,CAAC,CAAC,CAAC,IAAI,EACR,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,UAAU,EAAE,aAAa,EAAC,CAAC,YACrD,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,YACxB,eACI,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,MAAM,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,aAAa,EAAC,CAAC,EACzE,KAAK,EAAE,WAAW,aAElB,iBACI,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,~~CAAC~~,QAAQ,~~IAAI~~,gBAAgB,CAAC,QAAQ,CAAC,~~EACzD~~,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,UAAU,EAAE,aAAa,EAAC,CAAC,EACnD,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,EAC9C,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,EAC3C,WAAW,EAAC,GAAG,EACf,KAAK,EAAC,yBAAyB,GACjC,EACD,CAAC,aAAa,IAAI,CACf,KAAC,OAAO,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,aAAa,EAAE,SAAS,GAAI,CACjE,EACA,aAAa,IAAI,CACd,KAAC,MAAM,IACH,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,EAC5B,OAAO,EAAE,iBAAiB,gBACf,mBAAmB,EAC9B,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,GAAG,YAER,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,GAAI,GAC1B,CACZ,EACA,CAAC,WAAW,IAAI,CACb,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,YACxB,KAAC,MAAM,IAAC,IAAI,EAAE,GAAG,GAAI,GACnB,CACT,IACC,GACJ,GACJ,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {Xmark} from '@gravity-ui/icons';\nimport {Button, Icon, Loader} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {usePostMessageAPIListener} from '../../../common/postMessage';\nimport {IframeContext} from '../../context/iframeContext';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\nimport Overlay from '../Overlay/Overlay';\n\nimport './MiddleScreen.scss';\n\nconst b = editorCn('middle-screen');\n\ninterface MiddleScreenProps {\n className?: string;\n CustomTop?: React.ElementType;\n}\n\nconst MiddleScreen = ({className, CustomTop}: MiddleScreenProps) => {\n const {zoom, initialized, deviceWidth, isPreviewMode, togglePreviewMode} = useMainEditorStore();\n const {url, setIframeElement} = React.useContext(IframeContext);\n const [canvasRef, setCanvasRef] = React.useState<HTMLDivElement \| null>(null);\n const [height, setHeight] = React.useState(0);\n\n const canvasStyle = React.useMemo(\n () => ({\n transform: isPreviewMode ? 'none' : `scale(${zoom}%)`,\n height: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,\n width: isPreviewMode ? '100%' : ~~deviceWidth,\~~n maxWidth: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,\n }),\n [isPreviewMode, zoom~~, deviceWidth~~],\n );\n\n const onResize = React.useCallback(\n (newHeight: number) => {\n setHeight(newHeight + ~~500~~);\n },\n [setHeight],\n );\n\n usePostMessageAPIListener('ON_RESIZE', ({height: newHeight}) => {\n onResize(newHeight);\n });\n\n usePostMessageAPIListener('ON_INIT', ({height: newHeight}) => {\n onResize(newHeight);\n });\n\n return (\n <div className={b(null, className)}>\n {CustomTop && !isPreviewMode ? (\n <div className={b('topbar')}>\n <CustomTop />\n </div>\n ) : null}\n <div className={b('content', {fullscreen: isPreviewMode})}>\n <div className={b('wrapper')}>\n <div\n ref={setCanvasRef}\n className={b('canvas', {hidden: !initialized, fullscreen: isPreviewMode})}\n style={canvasStyle}\n >\n <iframe\n ref={(instance) => instance && setIframeElement(instance)}\n className={b('iframe', {fullscreen: isPreviewMode})}\n src={url}\n height={isPreviewMode ? '100%' : `${height}px`}\n width={isPreviewMode ? '100%' : deviceWidth}\n frameBorder=\"0\"\n title=\"Page Constructor Iframe\"\n />\n {!isPreviewMode && (\n <Overlay className={b('overlay')} canvasElement={canvasRef} />\n )}\n {isPreviewMode && (\n <Button\n view=\"action\"\n className={b('exit-preview')}\n onClick={togglePreviewMode}\n aria-label=\"Exit preview mode\"\n title=\"Exit preview mode\"\n size=\"l\"\n >\n <Icon size={24} data={Xmark} />\n </Button>\n )}\n {!initialized && (\n <div className={b('loading')}>\n <Loader size={'l'} />\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport default MiddleScreen;\n"]}
1	+ {"version":3,"file":"MiddleScreen.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/MiddleScreen/MiddleScreen.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAC,MAAM,mBAAmB,CAAC;AACvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,yBAAyB,EAAC,uCAAoC;AACtE,OAAO,EAAC,aAAa,EAAC,6CAAoC;AAC1D,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAClE,OAAO,EAAC,QAAQ,EAAC,0BAAuB;AACxC,OAAO,OAAO,8BAA2B;AAEzC,OAAO,oBAAoB,CAAC;AAE5B,MAAM,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAOpC,MAAM,YAAY,GAAG,CAAC,EAAC,SAAS,EAAE,SAAS,EAAoB,EAAE,EAAE;IAC/D,MAAM,EAAC,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,iBAAiB,EAAC,GAAG,kBAAkB,EAAE,CAAC;IAChG,MAAM,EAAC,GAAG,EAAE,gBAAgB,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IAChE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAwB,IAAI,CAAC,CAAC;IAC9E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE9C,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAC7B,GAAG,EAAE,CAAC,CAAC;QACH,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IAAI,IAAI;QACrD,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,GAAG;QACzD,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,GAAG;QACxD,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,GAAG;KAC9D,CAAC,EACF,CAAC,aAAa,EAAE,IAAI,CAAC,CACxB,CAAC;IAEF,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAC9B,CAAC,SAAiB,EAAE,EAAE;QAClB,SAAS,CAAC,SAAS,GAAG,GAAG,CAAC,CAAC;IAC/B,CAAC,EACD,CAAC,SAAS,CAAC,CACd,CAAC;IAEF,yBAAyB,CAAC,WAAW,EAAE,CAAC,EAAC,MAAM,EAAE,SAAS,EAAC,EAAE,EAAE;QAC3D,QAAQ,CAAC,SAAS,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;IAEH,yBAAyB,CAAC,SAAS,EAAE,CAAC,EAAC,MAAM,EAAE,SAAS,EAAC,EAAE,EAAE;QACzD,QAAQ,CAAC,SAAS,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;IAEH,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC7B,SAAS,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAC3B,cAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YACvB,KAAC,SAAS,KAAG,GACX,CACT,CAAC,CAAC,CAAC,IAAI,EACR,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,UAAU,EAAE,aAAa,EAAC,CAAC,YACrD,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,YACxB,eACI,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,MAAM,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,aAAa,EAAC,CAAC,EACzE,KAAK,EAAE,WAAW,aAElB,iBACI,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE;oCACd,IAAI,QAAQ,EAAE,CAAC;wCACX,gBAAgB,CAAC,QAAQ,CAAC,CAAC;oCAC/B,CAAC;gCACL,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,UAAU,EAAE,aAAa,EAAC,CAAC,EACnD,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,EAC9C,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,EAC3C,WAAW,EAAC,GAAG,EACf,KAAK,EAAC,yBAAyB,GACjC,EACD,CAAC,aAAa,IAAI,CACf,KAAC,OAAO,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,aAAa,EAAE,SAAS,GAAI,CACjE,EACA,aAAa,IAAI,CACd,KAAC,MAAM,IACH,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,EAC5B,OAAO,EAAE,iBAAiB,gBACf,mBAAmB,EAC9B,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,GAAG,YAER,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,GAAI,GAC1B,CACZ,EACA,CAAC,WAAW,IAAI,CACb,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,YACxB,KAAC,MAAM,IAAC,IAAI,EAAE,GAAG,GAAI,GACnB,CACT,IACC,GACJ,GACJ,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {Xmark} from '@gravity-ui/icons';\nimport {Button, Icon, Loader} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {usePostMessageAPIListener} from '../../../common/postMessage';\nimport {IframeContext} from '../../context/iframeContext';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\nimport Overlay from '../Overlay/Overlay';\n\nimport './MiddleScreen.scss';\n\nconst b = editorCn('middle-screen');\n\ninterface MiddleScreenProps {\n className?: string;\n CustomTop?: React.ElementType;\n}\n\nconst MiddleScreen = ({className, CustomTop}: MiddleScreenProps) => {\n const {zoom, initialized, deviceWidth, isPreviewMode, togglePreviewMode} = useMainEditorStore();\n const {url, setIframeElement} = React.useContext(IframeContext);\n const [canvasRef, setCanvasRef] = React.useState<HTMLDivElement \| null>(null);\n const [height, setHeight] = React.useState(0);\n\n const canvasStyle = React.useMemo(\n () => ({\n transform: isPreviewMode ? 'none' : `scale(${zoom}%)`,\n height: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,\n width: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,\n maxWidth: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,\n }),\n [isPreviewMode, zoom],\n );\n\n const onResize = React.useCallback(\n (newHeight: number) => {\n setHeight(newHeight + 100);\n },\n [setHeight],\n );\n\n usePostMessageAPIListener('ON_RESIZE', ({height: newHeight}) => {\n onResize(newHeight);\n });\n\n usePostMessageAPIListener('ON_INIT', ({height: newHeight}) => {\n onResize(newHeight);\n });\n\n return (\n <div className={b(null, className)}>\n {CustomTop && !isPreviewMode ? (\n <div className={b('topbar')}>\n <CustomTop />\n </div>\n ) : null}\n <div className={b('content', {fullscreen: isPreviewMode})}>\n <div className={b('wrapper')}>\n <div\n ref={setCanvasRef}\n className={b('canvas', {hidden: !initialized, fullscreen: isPreviewMode})}\n style={canvasStyle}\n >\n <iframe\n ref={(instance) => {\n if (instance) {\n setIframeElement(instance);\n }\n }}\n className={b('iframe', {fullscreen: isPreviewMode})}\n src={url}\n height={isPreviewMode ? '100%' : `${height}px`}\n width={isPreviewMode ? '100%' : deviceWidth}\n frameBorder=\"0\"\n title=\"Page Constructor Iframe\"\n />\n {!isPreviewMode && (\n <Overlay className={b('overlay')} canvasElement={canvasRef} />\n )}\n {isPreviewMode && (\n <Button\n view=\"action\"\n className={b('exit-preview')}\n onClick={togglePreviewMode}\n aria-label=\"Exit preview mode\"\n title=\"Exit preview mode\"\n size=\"l\"\n >\n <Icon size={24} data={Xmark} />\n </Button>\n )}\n {!initialized && (\n <div className={b('loading')}>\n <Loader size={'l'} />\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport default MiddleScreen;\n"]}

package/build/esm/editor-v2/containers/Overlay/Overlay.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronUp, Copy, TrashBin } from '@gravity-ui/icons';
 import { Button, Icon } from '@gravity-ui/uikit';
 import * as React from 'react';
+import _ from 'lodash';
 import { usePostMessageAPIListener } from "../../../common/postMessage.js";
 import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
 import { editorCn } from "../../utils/cn.js";
@@ -14,8 +15,8 @@ const Overlay = ({ className, canvasElement }) => {
     const [blockBorders, setBlockBorders] = React.useState(null);
     // Listen for updates to the selected block's position
     usePostMessageAPIListener('ON_UPDATE_BLOCK_SELECTION', ({ rect }) => {
-        setBlockBorders(rect || null);
-    });
+        setBlockBorders(selectedBlock && rect ? rect : null);
+    }, [selectedBlock]);
     // Update blockBorders when selectedBlock changes
     React.useEffect(() => {
         if (!selectedBlock) {
@@ -49,8 +50,17 @@ const Overlay = ({ className, canvasElement }) => {
         }
     });
     usePostMessageAPIListener('ON_CLICK_BLOCK', ({ path }) => {
-        setSelectedBlock(path);
-    });
+        if (!selectedBlock && path) {
+            setSelectedBlock(path);
+        }
+        else if (selectedBlock && _.isEqual(selectedBlock, path)) {
+            setSelectedBlock(null);
+            setBlockBorders(null);
+        }
+        else {
+            setSelectedBlock(path);
+        }
+    }, [selectedBlock]);
     const handleMoveUp = () => {
         if (!selectedBlock)
             return;

package/build/esm/editor-v2/containers/Overlay/Overlay.js.map CHANGED Viewed

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

package/build/esm/editor-v2/containers/Source/Source.css CHANGED Viewed

@@ -8,6 +8,7 @@
 }
 .pceditor-source__icon {
   flex: 0 0 auto;
+  margin-right: var(--g-spacing-1);
 }
 .pceditor-source__text {
   flex: 1;

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

@@ -20,7 +20,7 @@ const Source = () => {
             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: "s", value: url, onUpdate: onUpdateUrl })] }));
+    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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Source.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/Source/Source.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,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 {ArrowRotateRight} from '@gravity-ui/icons';\nimport {Button, Icon, TextInput} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {IframeContext} from '../../context/iframeContext';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\n\nimport './Source.scss';\n\nconst b = editorCn('source');\n\nconst Source = () => {\n const {resetInitialize} = useMainEditorStore();\n const {disableUrlField, url, setUrl} = React.useContext(IframeContext);\n\n const onUpdateUrl = React.useCallback(\n (value: string) => {\n setUrl(value);\n resetInitialize();\n },\n [resetInitialize, setUrl],\n );\n\n const reloadIframe = () => {\n setUrl('');\n setTimeout(() => {\n setUrl(url);\n }, 0);\n };\n\n return (\n <div className={b()}>\n <Button className={b('icon')} view=\"flat\" size=\"m\" onClick={reloadIframe}>\n <Icon data={ArrowRotateRight} size={18} />\n </Button>\n <TextInput\n disabled={disableUrlField}\n className={b('text')}\n size=\"s\"\n value={url}\n onUpdate={onUpdateUrl}\n />\n </div>\n );\n};\n\nexport default Source;\n"]}
1	+ {"version":3,"file":"Source.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/Source/Source.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,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 {ArrowRotateRight} from '@gravity-ui/icons';\nimport {Button, Icon, TextInput} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {IframeContext} from '../../context/iframeContext';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\n\nimport './Source.scss';\n\nconst b = editorCn('source');\n\nconst Source = () => {\n const {resetInitialize} = useMainEditorStore();\n const {disableUrlField, url, setUrl} = React.useContext(IframeContext);\n\n const onUpdateUrl = React.useCallback(\n (value: string) => {\n setUrl(value);\n resetInitialize();\n },\n [resetInitialize, setUrl],\n );\n\n const reloadIframe = () => {\n setUrl('');\n setTimeout(() => {\n setUrl(url);\n }, 0);\n };\n\n return (\n <div className={b()}>\n <Button className={b('icon')} view=\"flat\" size=\"m\" onClick={reloadIframe}>\n <Icon data={ArrowRotateRight} size={18} />\n </Button>\n <TextInput\n disabled={disableUrlField}\n className={b('text')}\n size=\"m\"\n value={url}\n onUpdate={onUpdateUrl}\n />\n </div>\n );\n};\n\nexport default Source;\n"]}

package/build/esm/editor-v2/containers/SourceCode/SourceCode.css CHANGED Viewed

@@ -1,11 +1,15 @@
 .pceditor-source-code {
   height: 100%;
-  padding: 16px 12px;
   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;
@@ -13,25 +17,70 @@
   color: var(--g-color-text-secondary);
 }
 .pceditor-source-code__code {
+  scrollbar-width: thin;
+  scrollbar-color: var(--g-color-scroll-handle) transparent;
+  overflow: auto;
   white-space: pre;
   font-family: var(--g-text-code-font-family);
   font-weight: var(--g-text-code-font-weight);
   font-size: var(--g-text-code-inline-1-font-size);
   line-height: var(--g-text-code-inline-1-line-height);
-  padding: 6px 2px 8px;
+  padding: 6px 8px;
   overflow: auto;
   border: 1px solid var(--g-color-line-generic);
   border-radius: 6px;
   position: relative;
+  flex: 1;
+}
+.pceditor-source-code__code::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: transparent;
+}
+.pceditor-source-code__code::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 4px;
+}
+.pceditor-source-code__code::-webkit-scrollbar-thumb {
+  background: var(--g-color-scroll-handle);
+  border-radius: 4px;
+  transition: background-color 0.2s;
+  opacity: 0;
+}
+.pceditor-source-code__code::-webkit-scrollbar-thumb:hover {
+  background: var(--g-color-scroll-handle-hover);
+  opacity: 1;
+}
+.pceditor-source-code__code::-webkit-scrollbar-thumb:active {
+  background: var(--g-color-scroll-handle-hover);
+  opacity: 1;
 }
-.pceditor-source-code__code:hover .pceditor-source-code__controls {
+.pceditor-source-code__code::-webkit-scrollbar-corner {
+  background: transparent;
+}
+.pceditor-source-code__code:hover::-webkit-scrollbar-thumb {
+  opacity: 0.7;
+}
+.pceditor-source-code__code:not(:hover)::-webkit-scrollbar-thumb {
+  opacity: 0;
+  transition: opacity 0.5s ease-out;
+}
+.pceditor-source-code__content {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  resize: none;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+.pceditor-source-code__controls {
   display: flex;
   flex-direction: row;
   gap: 8px;
-}
-.pceditor-source-code__controls {
-  display: none;
-  position: absolute;
-  top: 10px;
-  right: 10px;
+  align-items: center;
 }

package/build/esm/editor-v2/containers/SourceCode/SourceCode.d.ts CHANGED Viewed

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

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

@@ -1,18 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDownToSquare } from '@gravity-ui/icons';
-import { Button, ClipboardButton, Icon } from '@gravity-ui/uikit';
+import { Pencil } from '@gravity-ui/icons';
+import { Button, ClipboardButton, Icon, SegmentedRadioGroup } from '@gravity-ui/uikit';
 import yaml from 'js-yaml';
 import _ from 'lodash';
 import * as React from 'react';
 import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
 import { generateChildrenPathFromArray } from "../../utils/index.js";
 import { editorCn } from "../../utils/cn.js";
-import './SourceCode.css';
 import { UpdateModal } from "./UpdateModal/UpdateModal.js";
+import { MessageCard } from "../../components/MessageCard/MessageCard.js";
+import { MESSAGES } from "../../constants/messages.js";
+import './SourceCode.css';
 const b = editorCn('source-code');
-const SourceCode = ({ className, format, showSelectedBlockOnly = false }) => {
+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;
@@ -55,7 +62,10 @@ const SourceCode = ({ className, format, showSelectedBlockOnly = false }) => {
         }
         return format === 'yaml' ? yaml.dump(content) : JSON.stringify(content, null, 2);
     }, [format, content, showSelectedBlockOnly, selectedBlock]);
-    return (_jsxs("div", { className: b(null, className), children: [_jsx("div", { className: b('title'), children: format }), _jsxs("div", { className: b('code'), children: [_jsx("div", { className: b('content'), children: textContent }), _jsxs("div", { className: b('controls'), children: [_jsx(ClipboardButton, { view: "flat", size: "xs", text: textContent }), _jsx(Button, { view: "flat", size: "xs", onClick: () => setIsOpen(true), children: _jsx(Icon, { size: 14, data: ArrowDownToSquare }) })] })] }), _jsx(UpdateModal, { onApply: handleUpdate, onClose: () => setIsOpen(false), isOpen: isOpen })] }));
+    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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SourceCode.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/SourceCode/SourceCode.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,~~iBAAiB~~,EAAC,MAAM,mBAAmB,CAAC;~~AACpD~~,OAAO,EAAC,MAAM,EAAE,eAAe,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;~~AAChE~~,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,CAAC,MAAM,QAAQ,CAAC;AACvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAClE,OAAO,EAAC,6BAA6B,EAAC,6BAAoB;AAC1D,OAAO,EAAC,QAAQ,EAAC,0BAAuB;~~AAExC~~,OAAO,~~kBAAkB~~,~~CAAC~~;~~AAC1B~~,OAAO,EAAC,WAAW,EAAC,~~qCAAkC~~;~~AAEtD~~,MAAM,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;~~AAQlC~~,MAAM,~~UAAU~~,GAAG,~~CAAC~~,EAAC,~~SAAS~~,EAAE,MAAM,EAAE,qBAAqB,GAAG,KAAK,EAAkB,EAAE,EAAE;~~IACvF~~,MAAM,EAAC,OAAO,EAAE,UAAU,EAAE,aAAa,EAAC,GAAG,kBAAkB,EAAE,CAAC;IAClE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;~~IAElD~~,MAAM,YAAY,GAAG,CAAC,UAAkB,EAAE,EAAE;QACxC,8DAA8D;QAC9D,IAAI,MAAW,CAAC;QAEhB,IAAI,CAAC;YACD,IAAI,UAAU,CAAC,IAAI,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,UAAU,CAAC,IAAI,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;gBACvE,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;YACpC,CAAC;iBAAM,CAAC;gBACJ,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACnC,CAAC;QACL,CAAC;QAAC,MAAM,CAAC;YACL,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO;QACX,CAAC;QAED,IAAI,qBAAqB,IAAI,aAAa,EAAE,CAAC;YACzC,iCAAiC;YACjC,MAAM,gBAAgB,GAAG,6BAA6B,CAAC,aAAa,CAAC,CAAC;YACtE,MAAM,UAAU,GAAG,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;YACxC,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,EAAE,gBAAgB,EAAE,MAAM,CAAC,CAAC;YACnD,UAAU,CAAC,UAAU,CAAC,CAAC;QAC3B,CAAC;aAAM,IAAI,MAAM,EAAE,CAAC;YAChB,4BAA4B;YAC5B,UAAU,CAAC,MAAmC,CAAC,CAAC;QACpD,CAAC;QAED,SAAS,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,qBAAqB,IAAI,aAAa,EAAE,CAAC;YACzC,MAAM,gBAAgB,GAAG,6BAA6B,CAAC,aAAa,CAAC,CAAC;YACtE,MAAM,aAAa,GAAG,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,gBAAgB,IAAI,EAAE,CAAC,CAAC;YAEpE,IAAI,aAAa,EAAE,CAAC;gBAChB,OAAO,MAAM,KAAK,MAAM;oBACpB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;oBAC1B,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;YACjD,CAAC;YAED,OAAO,mBAAmB,CAAC;QAC/B,CAAC;QAED,OAAO,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACrF,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,qBAAqB,EAAE,aAAa,CAAC,CAAC,CAAC;IAE5D,OAAO,CACH,~~eAAK~~,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,~~aAC9B~~,~~cAAK~~,~~SAAS~~,EAAE,~~CAAC~~,CAAC,~~OAAO~~,CAAC,~~YAAG~~,~~MAAM~~,~~GAAO~~,~~EAC1C~~,~~eAAK~~,~~SAAS~~,~~EAAE~~,CAAC,~~CAAC~~,MAAM,CAAC,~~aACrB~~,~~cAAK~~,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,~~YAAG~~,~~WAAW,GAAO,EACjD,~~eAAK,SAAS,EAAE,CAAC,CAAC,~~UAAU~~,CAAC,~~aACzB~~,KAAC,~~eAAe~~,~~IAAC~~,IAAI,EAAC,MAAM,~~EAAC~~,~~IAAI~~,~~EAAC~~,~~IAAI~~,~~EAAC~~,~~IAAI~~,EAAE,~~WAAW~~,~~GAAI~~,~~EAC5D~~,~~KAAC~~,MAAM,IAAC,IAAI,EAAC,~~MAAM~~,EAAC,IAAI,EAAC,~~IAAI~~,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,~~YACxD~~,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,~~iBAAiB~~,GAAI,~~GACtC~~,~~IACP~~,IACJ,EACN,KAAC,WAAW,~~IAAC~~,OAAO,EAAE,YAAY,~~EAAE~~,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,~~EAAE~~,MAAM,EAAE,MAAM,~~GAAI~~,~~IACrF~~,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import {~~ArrowDownToSquare~~} from '@gravity-ui/icons';\nimport {Button, ClipboardButton, Icon} from '@gravity-ui/uikit';\nimport yaml from 'js-yaml';\nimport _ from 'lodash';\nimport * as React from 'react';\n\nimport {PageContentWithNavigation} from '../../../models';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {generateChildrenPathFromArray} from '../../utils';\nimport {editorCn} from '../../utils/cn';\n\nimport './~~SourceCode.scss~~';\nimport {~~UpdateModal~~} from '~~./UpdateModal~~/~~UpdateModal~~';\n\nconst b = editorCn('source-code');\n\ninterface SourceCodeProps {\n className?: string;\n ~~format~~: 'yaml' \| '~~json~~';\n ~~showSelectedBlockOnly?:~~ ~~boolean~~;\n}\n\nconst SourceCode = ({className, ~~format,~~ showSelectedBlockOnly = false}: SourceCodeProps) => {\n const {content, setContent, selectedBlock} = useMainEditorStore();\n const [isOpen, setIsOpen] = React.useState(false);\n\n const handleUpdate = (tempConfig: string) => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let object: any;\n\n try {\n if (tempConfig.trim().startsWith('{') && tempConfig.trim().endsWith('}')) {\n object = JSON.parse(tempConfig);\n } else {\n object = yaml.load(tempConfig);\n }\n } catch {\n // eslint-disable-next-line no-console\n console.error('JSON.parse failed');\n return;\n }\n\n if (showSelectedBlockOnly && selectedBlock) {\n // Update only the selected block\n const currentBlockPath = generateChildrenPathFromArray(selectedBlock);\n const newContent = _.cloneDeep(content);\n _.set(newContent.blocks, currentBlockPath, object);\n setContent(newContent);\n } else if (object) {\n // Update the entire content\n setContent(object as PageContentWithNavigation);\n }\n\n setIsOpen(false);\n };\n\n const textContent = React.useMemo(() => {\n if (showSelectedBlockOnly && selectedBlock) {\n const currentBlockPath = generateChildrenPathFromArray(selectedBlock);\n const currentConfig = _.get(content.blocks, currentBlockPath \|\| '');\n\n if (currentConfig) {\n return format === 'yaml'\n ? yaml.dump(currentConfig)\n : JSON.stringify(currentConfig, null, 2);\n }\n\n return 'No block selected';\n }\n\n return format === 'yaml' ? yaml.dump(content) : JSON.stringify(content, null, 2);\n }, [format, content, showSelectedBlockOnly, selectedBlock]);\n\n return (\n <div className={b(null, className)}>\n <~~div className~~={~~b('~~title')}>{~~format~~}</div>\n <div className={b(~~'code'~~)}>\n <div className={b('~~content~~')}>{~~textContent~~}~~</div>\~~n <div className={b('controls')}>\n <~~ClipboardButton view=\"flat\" size=\"xs\" text={textContent} />\n <~~Button view=\"~~flat~~\" size=\"xs\" onClick={() => setIsOpen(true)}>\n <Icon size={14} data={~~ArrowDownToSquare~~} />\n </Button>\n </div>\n </div>\n <UpdateModal onApply={handleUpdate} onClose={() => setIsOpen(false)} isOpen={isOpen} />\n </div>\n );\n};\n\nexport default SourceCode;\n"]}
1	+ {"version":3,"file":"SourceCode.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/SourceCode/SourceCode.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Pencil} from '@gravity-ui/icons';\nimport {Button, ClipboardButton, Icon, SegmentedRadioGroup} from '@gravity-ui/uikit';\nimport yaml from 'js-yaml';\nimport _ from 'lodash';\nimport * as React from 'react';\n\nimport {PageContentWithNavigation} from '../../../models';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {generateChildrenPathFromArray} from '../../utils';\nimport {editorCn} from '../../utils/cn';\nimport {UpdateModal} from './UpdateModal/UpdateModal';\nimport {MessageCard} from '../../components/MessageCard/MessageCard';\nimport {MESSAGES} from '../../constants/messages';\n\nimport './SourceCode.scss';\n\nconst b = editorCn('source-code');\n\ninterface SourceCodeProps {\n className?: string;\n showSelectedBlockOnly?: boolean;\n}\n\nconst formatOptions = [\n {value: 'yaml', content: 'YAML'},\n {value: 'json', content: 'JSON'},\n];\n\nconst SourceCode = ({className, showSelectedBlockOnly = false}: SourceCodeProps) => {\n const {content, setContent, selectedBlock} = useMainEditorStore();\n const [isOpen, setIsOpen] = React.useState(false);\n const [format, setFormat] = React.useState<'yaml' \| 'json'>('yaml');\n\n const handleUpdate = (tempConfig: string) => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let object: any;\n\n try {\n if (tempConfig.trim().startsWith('{') && tempConfig.trim().endsWith('}')) {\n object = JSON.parse(tempConfig);\n } else {\n object = yaml.load(tempConfig);\n }\n } catch {\n // eslint-disable-next-line no-console\n console.error('JSON.parse failed');\n return;\n }\n\n if (showSelectedBlockOnly && selectedBlock) {\n // Update only the selected block\n const currentBlockPath = generateChildrenPathFromArray(selectedBlock);\n const newContent = _.cloneDeep(content);\n _.set(newContent.blocks, currentBlockPath, object);\n setContent(newContent);\n } else if (object) {\n // Update the entire content\n setContent(object as PageContentWithNavigation);\n }\n\n setIsOpen(false);\n };\n\n const textContent = React.useMemo(() => {\n if (showSelectedBlockOnly && selectedBlock) {\n const currentBlockPath = generateChildrenPathFromArray(selectedBlock);\n const currentConfig = _.get(content.blocks, currentBlockPath \|\| '');\n\n if (currentConfig) {\n return format === 'yaml'\n ? yaml.dump(currentConfig)\n : JSON.stringify(currentConfig, null, 2);\n }\n\n return 'No block selected';\n }\n\n return format === 'yaml' ? yaml.dump(content) : JSON.stringify(content, null, 2);\n }, [format, content, showSelectedBlockOnly, selectedBlock]);\n\n if (!selectedBlock && showSelectedBlockOnly) {\n return (\n <div className={b(null, className)}>\n <MessageCard\n title={MESSAGES.NO_BLOCK_SELECTED.title}\n description={MESSAGES.NO_BLOCK_SELECTED.description}\n theme=\"info\"\n />\n </div>\n );\n }\n\n return (\n <div className={b(null, className)}>\n <div className={b('header')}>\n <SegmentedRadioGroup\n size=\"m\"\n value={format}\n options={formatOptions}\n onUpdate={(value: string) => setFormat(value as 'yaml' \| 'json')}\n />\n <div className={b('controls')}>\n <Button view=\"outlined\" size=\"m\" onClick={() => setIsOpen(true)}>\n <Icon size={14} data={Pencil} />\n Edit\n </Button>\n <ClipboardButton view=\"outlined\" size=\"m\" text={textContent} />\n </div>\n </div>\n <div className={b('code')}>\n <div className={b('content')}>{textContent}</div>\n </div>\n <UpdateModal\n onApply={handleUpdate}\n onClose={() => setIsOpen(false)}\n isOpen={isOpen}\n initialConfig={textContent}\n />\n </div>\n );\n};\n\nexport default SourceCode;\n"]}

package/build/esm/editor-v2/containers/SourceCode/UpdateModal/UpdateModal.css CHANGED Viewed

@@ -1,3 +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 CHANGED Viewed

@@ -1,8 +1,9 @@
 import './UpdateModal.css';
 interface UpdateModalProps {
+    initialConfig?: string;
     onClose(): void;
     onApply(tempConfig?: string): void;
     isOpen: boolean;
 }
-export declare const UpdateModal: ({ onClose, onApply, isOpen }: UpdateModalProps) => import("react/jsx-runtime").JSX.Element;
+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 CHANGED Viewed

@@ -4,11 +4,16 @@ import * as React from 'react';
 import { editorCn } from "../../../utils/cn.js";
 import './UpdateModal.css';
 const b = editorCn('source-code-update-modal');
-export const UpdateModal = ({ onClose, onApply, isOpen }) => {
-    const [tempConfig, setTempConfig] = React.useState('');
+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 })] }), _jsx(Dialog.Footer, { showError: false, preset: 'default', textButtonApply: 'Apply', textButtonCancel: 'Cancel', onClickButtonApply: handleApply, onClickButtonCancel: onClose })] }));
+    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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UpdateModal.js","sourceRoot":"../../../../../../src","sources":["editor-v2/containers/SourceCode/UpdateModal/UpdateModal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,QAAQ,EAAC,6BAA0B;AAE3C,OAAO,mBAAmB,CAAC;AAE3B,MAAM,CAAC,GAAG,QAAQ,CAAC,0BAA0B,CAAC,CAAC;~~AAQ~~/C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAmB,EAAE,EAAE;~~IACxE~~,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;~~IACvD~~,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,~~IAAC~~,KAAK,EAAE,UAAU,~~EAAE~~,QAAQ,EAAE,aAAa,~~EAAE~~,IAAI,EAAE,EAAE,~~GAAI~~,~~IACxD~~,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 {Alert, Dialog, TextArea} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {editorCn} from '../../../utils/cn';\n\nimport './UpdateModal.scss';\n\nconst b = editorCn('source-code-update-modal');\n\ninterface UpdateModalProps {\n onClose(): void;\n onApply(tempConfig?: string): void;\n isOpen: boolean;\n}\n\nexport const UpdateModal = ({onClose, onApply, isOpen}: UpdateModalProps) => {\n const [tempConfig, setTempConfig] = React.useState('');\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 value={tempConfig} onUpdate={setTempConfig} rows={25} />\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"]}
1	+ {"version":3,"file":"UpdateModal.js","sourceRoot":"../../../../../../src","sources":["editor-v2/containers/SourceCode/UpdateModal/UpdateModal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,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 {Alert, Dialog, TextArea} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {editorCn} from '../../../utils/cn';\n\nimport './UpdateModal.scss';\n\nconst b = editorCn('source-code-update-modal');\n\ninterface UpdateModalProps {\n initialConfig?: string;\n onClose(): void;\n onApply(tempConfig?: string): void;\n isOpen: boolean;\n}\n\nexport const UpdateModal = ({onClose, onApply, isOpen, initialConfig}: UpdateModalProps) => {\n const [tempConfig, setTempConfig] = React.useState(initialConfig \|\| '');\n\n React.useEffect(() => {\n if (isOpen && initialConfig) {\n setTempConfig(initialConfig);\n }\n }, [isOpen, initialConfig]);\n\n const handleApply = () => {\n onApply(tempConfig);\n };\n return (\n <Dialog onClose={onClose} open={isOpen} size={'l'} className={b()}>\n <Dialog.Header caption=\"New configuration\" />\n <Dialog.Body>\n <Alert\n theme={'info'}\n title={'You can use YAML or JSON'}\n message={'The editor will automatically understand which format is needed.'}\n className={b('alert')}\n ></Alert>\n <TextArea\n value={tempConfig}\n onUpdate={setTempConfig}\n rows={25}\n className={b('textarea')}\n />\n </Dialog.Body>\n <Dialog.Footer\n showError={false}\n preset={'default'}\n textButtonApply={'Apply'}\n textButtonCancel={'Cancel'}\n onClickButtonApply={handleApply}\n onClickButtonCancel={onClose}\n />\n </Dialog>\n );\n};\n"]}

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

@@ -1,3 +1,6 @@
+import { ClassNameProps } from "../../../models/index.js";
 import './Tree.css';
-declare const Tree: () => import("react/jsx-runtime").JSX.Element;
+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 CHANGED Viewed

@@ -22,13 +22,12 @@ const generateTree = (items) => {
         };
     });
 };
-// Main Tree component with context provider
-const Tree = () => {
+const Tree = ({ className }) => {
     const { content, resetBlocks, selectedBlock, duplicateBlock, deleteBlock, setSelectedBlock, reorderBlock, } = useMainEditorStore();
     const selectedBlockPath = React.useMemo(() => {
         return generateChildrenPathFromArray(selectedBlock || []);
     }, [selectedBlock]);
-    return (_jsx(DragContextProvider, { children: _jsxs("div", { className: b(), children: [_jsx("div", { className: b('head'), children: _jsxs(Button, { view: "outlined-danger", onClick: () => resetBlocks(), children: [_jsx(Icon, { data: TrashBin }), "Clear all"] }) }), _jsx(TreeContent, { reorderBlock: reorderBlock, onCopy: duplicateBlock, onDelete: deleteBlock, onSelect: setSelectedBlock, blockTree: generateTree(content.blocks), selectedBlockPath: selectedBlockPath })] }) }));
+    return (_jsx(DragContextProvider, { children: _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"] }) }), _jsx(TreeContent, { reorderBlock: reorderBlock, onCopy: duplicateBlock, onDelete: deleteBlock, onSelect: setSelectedBlock, blockTree: generateTree(content.blocks), selectedBlockPath: selectedBlockPath })] }) }));
 };
 export default Tree;
 //# sourceMappingURL=Tree.js.map

package/build/esm/editor-v2/containers/Tree/Tree.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tree.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/Tree/Tree.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,QAAQ,EAAC,0BAAuB;AACxC,OAAO,EAAC,mBAAmB,EAAC,yBAAsB;AAClD,OAAO,EAAC,WAAW,EAAW,yBAAsB;AAEpD,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAClE,OAAO,EAAC,MAAM,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,6BAA6B,EAAE,YAAY,EAAC,6BAAoB;~~AAExE~~,OAAO,YAAY,CAAC;AAEpB,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;AAE3B,MAAM,YAAY,GAAG,CAAC,KAAiB,EAAc,EAAE;IACnD,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACtB,IAAI,QAAQ,CAAC;QAEb,IAAI,UAAU,IAAI,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC;YAC9C,QAAQ,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC3C,CAAC;QAED,OAAO;YACH,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ;YACR,SAAS,EAAE,YAAY,CAAC,IAAI,CAAC;SAChC,CAAC;IACN,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;~~AAEF~~,~~4CAA4C;AAC5C,~~MAAM,IAAI,GAAG,~~GAAG~~,EAAE;~~IACd~~,MAAM,EACF,OAAO,EACP,WAAW,EACX,aAAa,EACb,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,YAAY,GACf,GAAG,kBAAkB,EAAE,CAAC;IAEzB,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACzC,OAAO,6BAA6B,CAAC,aAAa,IAAI,EAAE,CAAC,CAAC;IAC9D,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACH,KAAC,mBAAmB,cAChB,eAAK,SAAS,EAAE,CAAC,EAAE,~~aACf~~,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,MAAC,MAAM,IAAC,IAAI,EAAC,iBAAiB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE,aACvD,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,GAAI,iBAEnB,GACP,EACN,KAAC,WAAW,IACR,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,WAAW,EACrB,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,EAAE,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,EACvC,iBAAiB,EAAE,iBAAiB,GACtC,IACA,GACY,CACzB,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {editorCn} from '../../utils/cn';\nimport {DragContextProvider} from './DragContext';\nimport {TreeContent, TreeItem} from './TreeContent';\n\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {Button, Icon} from '@gravity-ui/uikit';\nimport {TrashBin} from '@gravity-ui/icons';\nimport {generateChildrenPathFromArray, getItemTitle} from '../../utils';\n\nimport './Tree.scss';\n\nconst b = editorCn('tree');\n\nconst generateTree = (items: TreeItem[]): TreeItem[] => {\n return items.map((item) => {\n let children;\n\n if ('children' in item && item.children?.length) {\n children = generateTree(item.children);\n }\n\n return {\n type: item.type,\n children,\n treeTitle: getItemTitle(item),\n };\n });\n};\n\~~n//~~ ~~Main~~ ~~Tree~~ ~~component~~ ~~with context provider~~\nconst Tree = () => {\n const {\n content,\n resetBlocks,\n selectedBlock,\n duplicateBlock,\n deleteBlock,\n setSelectedBlock,\n reorderBlock,\n } = useMainEditorStore();\n\n const selectedBlockPath = React.useMemo(() => {\n return generateChildrenPathFromArray(selectedBlock \|\| []);\n }, [selectedBlock]);\n\n return (\n <DragContextProvider>\n <div className={b()}>\n <div className={b('head')}>\n <Button view=\"outlined-danger\" onClick={() => resetBlocks()}>\n <Icon data={TrashBin} />\n Clear all\n </Button>\n </div>\n <TreeContent\n reorderBlock={reorderBlock}\n onCopy={duplicateBlock}\n onDelete={deleteBlock}\n onSelect={setSelectedBlock}\n blockTree={generateTree(content.blocks)}\n selectedBlockPath={selectedBlockPath}\n />\n </div>\n </DragContextProvider>\n );\n};\n\nexport default Tree;\n"]}
1	+ {"version":3,"file":"Tree.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/Tree/Tree.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,QAAQ,EAAC,0BAAuB;AACxC,OAAO,EAAC,mBAAmB,EAAC,yBAAsB;AAClD,OAAO,EAAC,WAAW,EAAW,yBAAsB;AAEpD,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAClE,OAAO,EAAC,MAAM,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,6BAA6B,EAAE,YAAY,EAAC,6BAAoB;AAGxE,OAAO,YAAY,CAAC;AAEpB,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;AAE3B,MAAM,YAAY,GAAG,CAAC,KAAiB,EAAc,EAAE;IACnD,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACtB,IAAI,QAAQ,CAAC;QAEb,IAAI,UAAU,IAAI,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC;YAC9C,QAAQ,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC3C,CAAC;QAED,OAAO;YACH,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ;YACR,SAAS,EAAE,YAAY,CAAC,IAAI,CAAC;SAChC,CAAC;IACN,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAIF,MAAM,IAAI,GAAG,CAAC,EAAC,SAAS,EAAY,EAAE,EAAE;IACpC,MAAM,EACF,OAAO,EACP,WAAW,EACX,aAAa,EACb,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,YAAY,GACf,GAAG,kBAAkB,EAAE,CAAC;IAEzB,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACzC,OAAO,6BAA6B,CAAC,aAAa,IAAI,EAAE,CAAC,CAAC;IAC9D,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACH,KAAC,mBAAmB,cAChB,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC9B,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,MAAC,MAAM,IAAC,IAAI,EAAC,iBAAiB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE,aACvD,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,GAAI,iBAEnB,GACP,EACN,KAAC,WAAW,IACR,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,WAAW,EACrB,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,EAAE,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,EACvC,iBAAiB,EAAE,iBAAiB,GACtC,IACA,GACY,CACzB,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {editorCn} from '../../utils/cn';\nimport {DragContextProvider} from './DragContext';\nimport {TreeContent, TreeItem} from './TreeContent';\n\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {Button, Icon} from '@gravity-ui/uikit';\nimport {TrashBin} from '@gravity-ui/icons';\nimport {generateChildrenPathFromArray, getItemTitle} from '../../utils';\nimport {ClassNameProps} from '../../../models';\n\nimport './Tree.scss';\n\nconst b = editorCn('tree');\n\nconst generateTree = (items: TreeItem[]): TreeItem[] => {\n return items.map((item) => {\n let children;\n\n if ('children' in item && item.children?.length) {\n children = generateTree(item.children);\n }\n\n return {\n type: item.type,\n children,\n treeTitle: getItemTitle(item),\n };\n });\n};\n\ninterface TreeProps extends ClassNameProps {}\n\nconst Tree = ({className}: TreeProps) => {\n const {\n content,\n resetBlocks,\n selectedBlock,\n duplicateBlock,\n deleteBlock,\n setSelectedBlock,\n reorderBlock,\n } = useMainEditorStore();\n\n const selectedBlockPath = React.useMemo(() => {\n return generateChildrenPathFromArray(selectedBlock \|\| []);\n }, [selectedBlock]);\n\n return (\n <DragContextProvider>\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 <TreeContent\n reorderBlock={reorderBlock}\n onCopy={duplicateBlock}\n onDelete={deleteBlock}\n onSelect={setSelectedBlock}\n blockTree={generateTree(content.blocks)}\n selectedBlockPath={selectedBlockPath}\n />\n </div>\n </DragContextProvider>\n );\n};\n\nexport default Tree;\n"]}

package/build/esm/editor-v2/hooks/useEditorTabs.d.ts CHANGED Viewed

@@ -1,14 +1,20 @@
-import { TabsItemProps } from "../components/Tabs/Tabs.js";
+import { TabItemProps } from "../components/Tabs/Tabs.js";
 export declare const useEditorTabs: ({ leftTabs, rightTabs, }: {
-    leftTabs?: TabsItemProps[];
-    rightTabs?: TabsItemProps[];
+    leftTabs?: TabItemProps[];
+    rightTabs?: TabItemProps[];
 }) => {
-    left: (TabsItemProps | {
+    left: (TabItemProps | {
+        id: string;
+        title: string;
+        component: () => import("react/jsx-runtime").JSX.Element;
+        withPadding?: undefined;
+    } | {
         id: string;
         title: string;
         component: ({ className }: import("../containers/GlobalConfig/GlobalConfig.js").GlobalConfigProps) => import("react/jsx-runtime").JSX.Element;
+        withPadding: boolean;
     })[];
-    right: (TabsItemProps | {
+    right: (TabItemProps | {
         id: string;
         title: string;
         component: () => import("react/jsx-runtime").JSX.Element;