npm - @gravity-ui/page-constructor - Versions diffs - 6.3.2-alpha.3 → 6.3.2-alpha.6 - Mend

@gravity-ui/page-constructor 6.3.2-alpha.3 → 6.3.2-alpha.6

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 (402) hide show

package/build/esm/editor-v2/components/DynamicForm/Fields/AnyOf/AnyOf.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AnyOf.js","sourceRoot":"../../../../../../../src","sources":["editor-v2/components/DynamicForm/Fields/AnyOf/AnyOf.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Card, SegmentedRadioGroup, Select} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {AnyOfInput, DynamicFormValue} from '../../../../../common/types';\nimport {editorCn} from '../../../../utils/cn';\nimport DynamicForm from '../../DynamicForm';\nimport FieldBase from '../../FieldBase/FieldBase';\n\nimport './AnyOf.scss';\n\nconst b = editorCn('anyof-dynamic-field');\n\ninterface AnyOfDynamicFieldProps {\n contentConfig: DynamicFormValue;\n onUpdate: (key: string, value: DynamicFormValue) => void;\n inputConfig: AnyOfInput;\n className?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst getAnyOfContentConfig = (contentConfig: any, name: string) => {\n if (name) {\n return contentConfig ? contentConfig[name] : {};\n }\n return contentConfig;\n};\n\nconst AnyOfDynamicField = ({\n contentConfig,\n onUpdate,\n className,\n inputConfig,\n}: AnyOfDynamicFieldProps) => {\n const defaultValue = inputConfig.options[0].value;\n\n const [anyOfMetaValue, setAnyOfMetaValue] = React.useState(defaultValue);\n\n const anyOfContentConfig = getAnyOfContentConfig(contentConfig, inputConfig.name);\n const anyOfChosenOption = React.useMemo(\n () =>\n inputConfig.options.find(\n ({value: foundAnyOfValue}) => foundAnyOfValue === anyOfMetaValue,\n ),\n [inputConfig.options, anyOfMetaValue],\n );\n\n const onUpdateAnyOf = React.useCallback((value: string) => {\n setAnyOfMetaValue(value);\n }, []);\n\n return (\n <FieldBase\n title={inputConfig.title}\n className={b(null, className)}\n onRefresh={(value) => onUpdate('', value)}\n expandable\n >\n <Card>\n {inputConfig.options.length < 4 ? (\n <SegmentedRadioGroup\n className={b('radio')}\n options={inputConfig.options.map((option) => ({\n content: option.title,\n value: option.value,\n }))}\n value={anyOfMetaValue}\n onUpdate={onUpdateAnyOf}\n />\n ) : (\n <Select\n options={inputConfig.options.map((option) => ({\n content: option.title,\n value: option.value,\n }))}\n value={anyOfMetaValue ? [anyOfMetaValue] : []}\n onUpdate={([selectValue]) => onUpdateAnyOf(selectValue)}\n className={b('select')}\n />\n )}\n {anyOfChosenOption && (\n <DynamicForm\n blockConfig={anyOfChosenOption.properties}\n contentConfig={anyOfContentConfig}\n onUpdate={onUpdate}\n />\n )}\n </Card>\n </FieldBase>\n );\n};\n\nexport default AnyOfDynamicField;\n"]}

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

@@ -3,14 +3,14 @@
   font-weight: var(--g-text-subheader-font-weight);
   font-size: var(--g-text-subheader-3-font-size);
   line-height: var(--g-text-subheader-3-line-height);
-  padding: 12px 16px;
+  padding: 12px;
   border-bottom: 1px solid var(--g-color-line-generic);
 }
 .pceditor-block-config-form__form {
   padding: 12px 0;
 }
 .pceditor-block-config-form__empty {
-  padding: 12px 16px;
+  padding: 12px;
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -9,6 +9,7 @@ interface SidebarTabComponent {
 interface EditorViewProps {
     onUpdate?: (pageContent: PageContentWithNavigation) => void;
     initialUrl: string;
+    initialContent?: PageContentWithNavigation;
     disableUrlField?: boolean;
     componentsConfig?: {
         middleTop?: React.ElementType;

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

@@ -14,10 +14,10 @@ import Source from "../Source/Source.js";
 import ViewSwitches from "../ViewSwitches/ViewSwitches.js";
 import './Editor.css';
 const b = editorCn('editor');
-const EditorView = ({ componentsConfig = {} }) => {
+const EditorView = ({ componentsConfig = {}, initialContent }) => {
     const store = useMainEditorStore();
     const { manipulateOverlayMode, disableMode } = store;
-    useMainEditorInitialize();
+    useMainEditorInitialize(initialContent);
     // Disable insert mode on any MouseUp event
     // Maybe should be attached to body
     const onMouseUp = React.useCallback((e) => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Editor.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/Editor/Editor.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,MAAM,EAAC,0CAAuC;AACtD,OAAO,EAAC,OAAO,EAAC,4CAAyC;AACzD,OAAO,UAAU,oCAA+C;AAChE,OAAO,YAAY,wCAAmD;AACtE,OAAO,EAAC,uBAAuB,EAAC,2CAAkC;AAClE,OAAO,EAAC,cAAc,EAAC,6CAAoC;AAC3D,OAAO,EAAC,aAAa,EAAC,qCAAkC;AACxD,OAAO,uBAAuB,+CAA4C;AAC1E,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAClE,OAAO,EAAC,QAAQ,EAAC,0BAAuB;AACxC,OAAO,MAAM,4BAAyB;AACtC,OAAO,YAAY,wCAAqC;AAExD,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;~~AAoB7B~~,MAAM,UAAU,GAAG,CAAC,EAAC,gBAAgB,GAAG,EAAE,EAAkB,EAAE,EAAE;~~IAC5D~~,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAC;IACnC,MAAM,EAAC,qBAAqB,EAAE,WAAW,EAAC,GAAG,KAAK,CAAC;IAEnD,uBAAuB,~~EAAE~~,CAAC;~~IAE1B~~,2CAA2C;IAC3C,mCAAmC;IACnC,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAC/B,CAAC,CAAmB,EAAE,EAAE;QACpB,IAAI,qBAAqB,EAAE,CAAC;YACxB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,WAAW,EAAE,CAAC;QAClB,CAAC;IACL,CAAC,EACD,CAAC,WAAW,EAAE,qBAAqB,CAAC,CACvC,CAAC;IACF,MAAM,EAAC,IAAI,EAAE,KAAK,EAAC,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAEtD,OAAO;IACH,mEAAmE;IACnE,eAAK,SAAS,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,aACrC,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,KAAC,MAAM,IACH,IAAI,EAAE,KAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,gBAAgB,CAAC,OAAO,GAAI,EAC5D,KAAK,EACD,KAAC,OAAO,IACJ,IAAI,EAAE,KAAK,EACX,GAAG,EAAE,CAAC,GAAG,CAAC,gBAAgB,CAAC,QAAQ,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,YAAY,CAAC,EACjE,UAAU,EAAC,cAAc,GAC3B,EAEN,MAAM,EAAE,KAAC,YAAY,IAAC,SAAS,EAAE,gBAAgB,CAAC,SAAS,GAAI,GACjE,GACA,EACN,KAAC,UAAU,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,GAAI,IACrC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAsB,EAAE,EAAE;IAC7C,OAAO,CACH,KAAC,cAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,eAAe,EAAE,KAAK,CAAC,eAAe,YAChF,KAAC,uBAAuB,cACpB,KAAC,UAAU,OAAK,KAAK,GAAI,GACH,GACb,CACpB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {PageContentWithNavigation} from '../../../models';\nimport {Panels} from '../../components/Panels/Panels';\nimport {Sidebar} from '../../components/Sidebar/Sidebar';\nimport BigOverlay from '../../containers/BigOverlay/BigOverlay';\nimport MiddleScreen from '../../containers/MiddleScreen/MiddleScreen';\nimport {MainEditorStoreProvider} from '../../context/editorStore';\nimport {IframeProvider} from '../../context/iframeContext';\nimport {useEditorTabs} from '../../hooks/useEditorTabs';\nimport useMainEditorInitialize from '../../hooks/useMainEditorInitialize';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\nimport Source from '../Source/Source';\nimport ViewSwitches from '../ViewSwitches/ViewSwitches';\n\nimport './Editor.scss';\n\nconst b = editorCn('editor');\n\ninterface SidebarTabComponent {\n id: string;\n title: string;\n component: React.ElementType;\n}\ninterface EditorViewProps {\n onUpdate?: (pageContent: PageContentWithNavigation) => void;\n initialUrl: string;\n disableUrlField?: boolean;\n componentsConfig?: {\n middleTop?: React.ElementType;\n leftTop?: React.ElementType[];\n rightTop?: React.ElementType[];\n leftTabs?: SidebarTabComponent[];\n rightTabs?: SidebarTabComponent[];\n };\n}\n\nconst EditorView = ({componentsConfig = {}}: EditorViewProps) => {\n const store = useMainEditorStore();\n const {manipulateOverlayMode, disableMode} = store;\n\n useMainEditorInitialize();\n\n // Disable insert mode on any MouseUp event\n // Maybe should be attached to body\n const onMouseUp = React.useCallback(\n (e: React.MouseEvent) => {\n if (manipulateOverlayMode) {\n e.preventDefault();\n disableMode();\n }\n },\n [disableMode, manipulateOverlayMode],\n );\n const {left, right} = useEditorTabs(componentsConfig);\n\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div className={b()} onMouseUp={onMouseUp}>\n <div className={b('body')}>\n <Panels\n left={<Sidebar tabs={left} top={componentsConfig.leftTop} />}\n right={\n <Sidebar\n tabs={right}\n top={[...(componentsConfig.rightTop \|\| []), Source, ViewSwitches]}\n defaultTab=\"block-config\"\n />\n }\n middle={<MiddleScreen CustomTop={componentsConfig.middleTop} />}\n />\n </div>\n <BigOverlay className={b('overlay')} />\n </div>\n );\n};\n\nexport const Editor = (props: EditorViewProps) => {\n return (\n <IframeProvider initialUrl={props.initialUrl} disableUrlField={props.disableUrlField}>\n <MainEditorStoreProvider>\n <EditorView {...props} />\n </MainEditorStoreProvider>\n </IframeProvider>\n );\n};\n"]}
1	+ {"version":3,"file":"Editor.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/Editor/Editor.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,MAAM,EAAC,0CAAuC;AACtD,OAAO,EAAC,OAAO,EAAC,4CAAyC;AACzD,OAAO,UAAU,oCAA+C;AAChE,OAAO,YAAY,wCAAmD;AACtE,OAAO,EAAC,uBAAuB,EAAC,2CAAkC;AAClE,OAAO,EAAC,cAAc,EAAC,6CAAoC;AAC3D,OAAO,EAAC,aAAa,EAAC,qCAAkC;AACxD,OAAO,uBAAuB,+CAA4C;AAC1E,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAClE,OAAO,EAAC,QAAQ,EAAC,0BAAuB;AACxC,OAAO,MAAM,4BAAyB;AACtC,OAAO,YAAY,wCAAqC;AAExD,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;AAqB7B,MAAM,UAAU,GAAG,CAAC,EAAC,gBAAgB,GAAG,EAAE,EAAE,cAAc,EAAkB,EAAE,EAAE;IAC5E,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAC;IACnC,MAAM,EAAC,qBAAqB,EAAE,WAAW,EAAC,GAAG,KAAK,CAAC;IAEnD,uBAAuB,CAAC,cAAc,CAAC,CAAC;IAExC,2CAA2C;IAC3C,mCAAmC;IACnC,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAC/B,CAAC,CAAmB,EAAE,EAAE;QACpB,IAAI,qBAAqB,EAAE,CAAC;YACxB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,WAAW,EAAE,CAAC;QAClB,CAAC;IACL,CAAC,EACD,CAAC,WAAW,EAAE,qBAAqB,CAAC,CACvC,CAAC;IACF,MAAM,EAAC,IAAI,EAAE,KAAK,EAAC,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAEtD,OAAO;IACH,mEAAmE;IACnE,eAAK,SAAS,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,aACrC,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,KAAC,MAAM,IACH,IAAI,EAAE,KAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,gBAAgB,CAAC,OAAO,GAAI,EAC5D,KAAK,EACD,KAAC,OAAO,IACJ,IAAI,EAAE,KAAK,EACX,GAAG,EAAE,CAAC,GAAG,CAAC,gBAAgB,CAAC,QAAQ,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,YAAY,CAAC,EACjE,UAAU,EAAC,cAAc,GAC3B,EAEN,MAAM,EAAE,KAAC,YAAY,IAAC,SAAS,EAAE,gBAAgB,CAAC,SAAS,GAAI,GACjE,GACA,EACN,KAAC,UAAU,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,GAAI,IACrC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAsB,EAAE,EAAE;IAC7C,OAAO,CACH,KAAC,cAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,eAAe,EAAE,KAAK,CAAC,eAAe,YAChF,KAAC,uBAAuB,cACpB,KAAC,UAAU,OAAK,KAAK,GAAI,GACH,GACb,CACpB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {PageContentWithNavigation} from '../../../models';\nimport {Panels} from '../../components/Panels/Panels';\nimport {Sidebar} from '../../components/Sidebar/Sidebar';\nimport BigOverlay from '../../containers/BigOverlay/BigOverlay';\nimport MiddleScreen from '../../containers/MiddleScreen/MiddleScreen';\nimport {MainEditorStoreProvider} from '../../context/editorStore';\nimport {IframeProvider} from '../../context/iframeContext';\nimport {useEditorTabs} from '../../hooks/useEditorTabs';\nimport useMainEditorInitialize from '../../hooks/useMainEditorInitialize';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\nimport Source from '../Source/Source';\nimport ViewSwitches from '../ViewSwitches/ViewSwitches';\n\nimport './Editor.scss';\n\nconst b = editorCn('editor');\n\ninterface SidebarTabComponent {\n id: string;\n title: string;\n component: React.ElementType;\n}\ninterface EditorViewProps {\n onUpdate?: (pageContent: PageContentWithNavigation) => void;\n initialUrl: string;\n initialContent?: PageContentWithNavigation;\n disableUrlField?: boolean;\n componentsConfig?: {\n middleTop?: React.ElementType;\n leftTop?: React.ElementType[];\n rightTop?: React.ElementType[];\n leftTabs?: SidebarTabComponent[];\n rightTabs?: SidebarTabComponent[];\n };\n}\n\nconst EditorView = ({componentsConfig = {}, initialContent}: EditorViewProps) => {\n const store = useMainEditorStore();\n const {manipulateOverlayMode, disableMode} = store;\n\n useMainEditorInitialize(initialContent);\n\n // Disable insert mode on any MouseUp event\n // Maybe should be attached to body\n const onMouseUp = React.useCallback(\n (e: React.MouseEvent) => {\n if (manipulateOverlayMode) {\n e.preventDefault();\n disableMode();\n }\n },\n [disableMode, manipulateOverlayMode],\n );\n const {left, right} = useEditorTabs(componentsConfig);\n\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div className={b()} onMouseUp={onMouseUp}>\n <div className={b('body')}>\n <Panels\n left={<Sidebar tabs={left} top={componentsConfig.leftTop} />}\n right={\n <Sidebar\n tabs={right}\n top={[...(componentsConfig.rightTop \|\| []), Source, ViewSwitches]}\n defaultTab=\"block-config\"\n />\n }\n middle={<MiddleScreen CustomTop={componentsConfig.middleTop} />}\n />\n </div>\n <BigOverlay className={b('overlay')} />\n </div>\n );\n};\n\nexport const Editor = (props: EditorViewProps) => {\n return (\n <IframeProvider initialUrl={props.initialUrl} disableUrlField={props.disableUrlField}>\n <MainEditorStoreProvider>\n <EditorView {...props} />\n </MainEditorStoreProvider>\n </IframeProvider>\n );\n};\n"]}

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

@@ -12,16 +12,55 @@
   overflow-y: auto;
   background-color: var(--g-color-text-secondary);
 }
+.pceditor-middle-screen__content_fullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1000;
+  background-color: #000;
+}
 .pceditor-middle-screen__wrapper {
   width: 100%;
   height: 100%;
   margin: auto;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  overflow: hidden;
 }
 .pceditor-middle-screen__canvas {
-  transform-origin: left top;
+  transform-origin: center top;
   overflow-y: scroll;
   position: relative;
   height: 100%;
+  max-width: 100%;
+}
+.pceditor-middle-screen__canvas_fullscreen {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+}
+.pceditor-middle-screen__iframe {
+  display: block;
+  margin: 0 auto;
+}
+.pceditor-middle-screen__iframe_fullscreen {
+  width: 100%;
+  height: 100%;
+}
+.pceditor-middle-screen__exit-preview {
+  position: fixed;
+  opacity: 0.5;
+  top: 16px;
+  right: 16px;
+  z-index: 1001;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .pceditor-middle-screen__overlay {
   position: absolute;

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Loader } from '@gravity-ui/uikit';
+import { Xmark } from '@gravity-ui/icons';
+import { Button, Icon, Loader } from '@gravity-ui/uikit';
 import * as React from 'react';
 import { usePostMessageAPIListener } from "../../../common/postMessage.js";
 import { IframeContext } from "../../context/iframeContext/index.js";
@@ -9,10 +10,16 @@ import Overlay from "../Overlay/Overlay.js";
 import './MiddleScreen.css';
 const b = editorCn('middle-screen');
 const MiddleScreen = ({ className, CustomTop }) => {
-    const { zoom, initialized, deviceWidth } = useMainEditorStore();
+    const { zoom, initialized, deviceWidth, isPreviewMode, togglePreviewMode } = useMainEditorStore();
     const { url, setIframeElement } = React.useContext(IframeContext);
     const [canvasRef, setCanvasRef] = React.useState(null);
     const [height, setHeight] = React.useState(0);
+    const canvasStyle = React.useMemo(() => ({
+        transform: isPreviewMode ? 'none' : `scale(${zoom}%)`,
+        height: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
+        width: isPreviewMode ? '100%' : deviceWidth,
+        maxWidth: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
+    }), [isPreviewMode, zoom, deviceWidth]);
     const onResize = React.useCallback((newHeight) => {
         setHeight(newHeight + 500);
     }, [setHeight]);
@@ -22,11 +29,7 @@ const MiddleScreen = ({ className, CustomTop }) => {
     usePostMessageAPIListener('ON_INIT', ({ height: newHeight }) => {
         onResize(newHeight);
     });
-    return (_jsxs("div", { className: b(null, className), children: [CustomTop ? (_jsx("div", { className: b('topbar'), children: _jsx(CustomTop, {}) })) : null, _jsx("div", { className: b('content'), children: _jsx("div", { className: b('wrapper'), style: { width: deviceWidth }, children: _jsxs("div", { ref: setCanvasRef, className: b('canvas', { hidden: !initialized }), style: {
-                            transform: `scale(${zoom}%)`,
-                            height: `${(100 / zoom) * 100}%`,
-                            width: `${(100 / zoom) * 100}%`,
-                        }, children: [_jsx("iframe", { ref: (instance) => instance && setIframeElement(instance), className: b('iframe'), src: url, height: `${height}px`, width: "100%", frameBorder: "0", title: "Page Constructor Iframe" }), _jsx(Overlay, { className: b('overlay'), canvasElement: canvasRef }), !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) => 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,MAAM,EAAC,MAAM,mBAAmB,CAAC;~~AACzC~~,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,EAAC,GAAG,kBAAkB,EAAE,CAAC;~~IAC9D~~,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,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,CAAC,CAAC,CAAC,~~CACT~~,cAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YACvB,KAAC,SAAS,KAAG,GACX,CACT,CAAC,CAAC,CAAC,IAAI,EACR,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,~~YACxB~~,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,~~EAAE~~,~~KAAK,EAAE,EAAC,KAAK,EAAE,WAAW,EAAC,YACrD,~~eACI,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,MAAM,EAAE,CAAC,WAAW,~~EAAC,CAAC,EAC9C,KAAK,~~EAAE~~;4BACH~~,~~SAAS~~,EAAE,~~SAAS~~,~~IAAI~~,~~IAAI;4BAC5B,MAAM,EAAE,GAAG,~~CAAC,~~GAAG~~,~~GAAG,IAAI,CAAC,GAAG,GAAG,GAAG;4BAChC,~~KAAK,EAAE,~~GAAG~~,~~CAAC~~,~~GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,GAAG;yBAClC,aAED,~~iBACI,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,IAAI,gBAAgB,CAAC,QAAQ,CAAC,EACzD,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,~~EACtB~~,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,GAAG,MAAM,IAAI,~~EACrB~~,KAAK,~~EAAC~~,MAAM,~~EACZ~~,WAAW,EAAC,GAAG,EACf,KAAK,EAAC,yBAAyB,GACjC,~~EACF~~,KAAC,OAAO,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,aAAa,EAAE,SAAS,GAAI,~~EAC7D~~,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 {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} = 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 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 ? (\n <div className={b('topbar')}>\n <CustomTop />\n </div>\n ) : null}\n <div className={b('content')}>\n <div className={b('wrapper')} ~~style={{width: deviceWidth}}~~>\n <div\n ref={setCanvasRef}\n className={b('canvas', {hidden: !initialized})}\n style={~~{\n transform: `scale(${zoom~~}~~%)`,\n height: `${(100 / zoom) * 100}%`,\n width: `${(100 / zoom) * 100}%`,\n }}~~\n >\n <iframe\n ref={(instance) => instance && setIframeElement(instance)}\n className={b('iframe')}\n src={url}\n height={`${height}px`}\n width~~=\"~~100~~%\"~~\n frameBorder=\"0\"\n title=\"Page Constructor Iframe\"\n />\n <Overlay className={b('overlay')} canvasElement={canvasRef} />\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":"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","sourcesContent":["import {Xmark} from '@gravity-ui/icons';\nimport {Button, Icon, Loader} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {usePostMessageAPIListener} from '../../../common/postMessage';\nimport {IframeContext} from '../../context/iframeContext';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\nimport Overlay from '../Overlay/Overlay';\n\nimport './MiddleScreen.scss';\n\nconst b = editorCn('middle-screen');\n\ninterface MiddleScreenProps {\n className?: string;\n CustomTop?: React.ElementType;\n}\n\nconst MiddleScreen = ({className, CustomTop}: MiddleScreenProps) => {\n const {zoom, initialized, deviceWidth, isPreviewMode, togglePreviewMode} = useMainEditorStore();\n const {url, setIframeElement} = React.useContext(IframeContext);\n const [canvasRef, setCanvasRef] = React.useState<HTMLDivElement \| null>(null);\n const [height, setHeight] = React.useState(0);\n\n const canvasStyle = React.useMemo(\n () => ({\n transform: isPreviewMode ? 'none' : `scale(${zoom}%)`,\n height: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,\n width: isPreviewMode ? '100%' : 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"]}

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

@@ -8,7 +8,7 @@
 }
 .pceditor-overlay__border {
   position: absolute;
-  border: 3px var(--g-color-line-brand) solid;
+  border: 3px var(--g-color-base-brand) solid;
   border-radius: 24px;
   box-sizing: border-box;
   box-shadow: 4px 4px 8px 0 var(--g-color-sfx-shadow);
@@ -25,20 +25,20 @@
   z-index: 10;
 }
 .pceditor-overlay__line_position_top {
-  border-top: 5px var(--g-color-line-brand) solid;
-  border-left: 5px var(--g-color-line-brand) solid;
+  border-top: 5px var(--g-color-base-brand) solid;
+  border-left: 5px var(--g-color-base-brand) solid;
 }
 .pceditor-overlay__line_position_bottom {
-  border-right: 5px var(--g-color-line-brand) solid;
-  border-bottom: 5px var(--g-color-line-brand) solid;
+  border-right: 5px var(--g-color-base-brand) solid;
+  border-bottom: 5px var(--g-color-base-brand) solid;
 }
 .pceditor-overlay__line_position_left {
-  border-top: 5px var(--g-color-line-brand) solid;
-  border-left: 5px var(--g-color-line-brand) solid;
+  border-top: 5px var(--g-color-base-brand) solid;
+  border-left: 5px var(--g-color-base-brand) solid;
 }
 .pceditor-overlay__line_position_right {
-  border-right: 5px var(--g-color-line-brand) solid;
-  border-bottom: 5px var(--g-color-line-brand) solid;
+  border-right: 5px var(--g-color-base-brand) solid;
+  border-bottom: 5px var(--g-color-base-brand) solid;
 }
 .pceditor-overlay__actions {
   pointer-events: auto;
@@ -61,4 +61,7 @@
 }
 .pceditor-overlay__actions-box_reorder {
   padding: 3px 4px;
+}
+.pceditor-overlay__reorder-icon {
+  color: var(--g-color-base-brand);
 }

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

@@ -70,7 +70,7 @@ const Overlay = ({ className, canvasElement }) => {
                     left: blockBorders.left - margin,
                     width: blockBorders.width + margin * 2,
                     height: blockBorders.height + margin * 2,
-                }, children: _jsxs("div", { className: b('actions'), children: [_jsx("div", { className: b('actions-box', { reorder: true }), children: _jsx(Button, { view: "flat", size: 'm', onClick: handleMoveUp, children: _jsx(Icon, { data: ChevronUp, size: 18 }) }) }), _jsxs("div", { className: b('actions-box', { main: true }), children: [_jsx(Button, { className: b('action-button'), size: 'm', view: 'action', onClick: () => selectedBlock && duplicateBlock(selectedBlock), children: _jsx(Icon, { data: Copy, size: 18 }) }), _jsx(Button, { className: b('action-button'), size: 'm', view: 'action', onClick: () => selectedBlock && deleteBlock(selectedBlock), children: _jsx(Icon, { data: TrashBin, size: 18 }) })] }), _jsx("div", { className: b('actions-box', { reorder: true }), children: _jsx(Button, { view: "flat", size: 'm', onClick: handleMoveDown, children: _jsx(Icon, { data: ChevronDown, size: 18 }) }) })] }) })) : null, hoverBorders ? (_jsx("div", { className: b('border', { hover: true }), style: {
+                }, children: _jsxs("div", { className: b('actions'), children: [_jsx("div", { className: b('actions-box', { reorder: true }), children: _jsx(Button, { view: "flat", size: 'm', onClick: handleMoveUp, children: _jsx(Icon, { className: b('reorder-icon'), data: ChevronUp, size: 18 }) }) }), _jsxs("div", { className: b('actions-box', { main: true }), children: [_jsx(Button, { className: b('action-button'), size: 'm', view: 'action', onClick: () => selectedBlock && duplicateBlock(selectedBlock), children: _jsx(Icon, { data: Copy, size: 18 }) }), _jsx(Button, { className: b('action-button'), size: 'm', view: 'action', onClick: () => selectedBlock && deleteBlock(selectedBlock), children: _jsx(Icon, { data: TrashBin, size: 18 }) })] }), _jsx("div", { className: b('actions-box', { reorder: true }), children: _jsx(Button, { view: "flat", size: 'm', onClick: handleMoveDown, children: _jsx(Icon, { className: b('reorder-icon'), data: ChevronDown, size: 18 }) }) })] }) })) : null, hoverBorders ? (_jsx("div", { className: b('border', { hover: true }), style: {
                     top: hoverBorders.top - margin,
                     left: hoverBorders.left - margin,
                     width: hoverBorders.width + margin * 2,

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 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 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';\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"]}

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

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

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

@@ -2,16 +2,19 @@ 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 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";
 const b = editorCn('source-code');
-const SourceCode = ({ className, format }) => {
-    const { content, setContent } = useMainEditorStore();
+const SourceCode = ({ className, format, showSelectedBlockOnly = false }) => {
+    const { content, setContent, selectedBlock } = useMainEditorStore();
     const [isOpen, setIsOpen] = React.useState(false);
     const handleUpdate = (tempConfig) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let object;
         try {
             if (tempConfig.trim().startsWith('{') && tempConfig.trim().endsWith('}')) {
@@ -24,15 +27,34 @@ const SourceCode = ({ className, format }) => {
         catch {
             // eslint-disable-next-line no-console
             console.error('JSON.parse failed');
+            return;
         }
-        if (object) {
+        if (showSelectedBlockOnly && selectedBlock) {
+            // Update only the selected block
+            const currentBlockPath = generateChildrenPathFromArray(selectedBlock);
+            const newContent = _.cloneDeep(content);
+            _.set(newContent.blocks, currentBlockPath, object);
+            setContent(newContent);
+        }
+        else if (object) {
+            // Update the entire content
             setContent(object);
         }
         setIsOpen(false);
     };
     const textContent = React.useMemo(() => {
+        if (showSelectedBlockOnly && selectedBlock) {
+            const currentBlockPath = generateChildrenPathFromArray(selectedBlock);
+            const currentConfig = _.get(content.blocks, currentBlockPath || '');
+            if (currentConfig) {
+                return format === 'yaml'
+                    ? yaml.dump(currentConfig)
+                    : JSON.stringify(currentConfig, null, 2);
+            }
+            return 'No block selected';
+        }
         return format === 'yaml' ? yaml.dump(content) : JSON.stringify(content, null, 2);
-    }, [format, content]);
+    }, [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 })] }));
 };
 export default SourceCode;

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,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAClE,OAAO,EAAC,QAAQ,EAAC,0BAAuB;AAExC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAC,WAAW,EAAC,qCAAkC;AAEtD,MAAM,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;~~AAOlC~~,MAAM,UAAU,GAAG,CAAC,EAAC,SAAS,EAAE,MAAM,EAAkB,EAAE,EAAE;~~IACxD~~,MAAM,EAAC,OAAO,EAAE,UAAU,EAAC,GAAG,kBAAkB,EAAE,CAAC;~~IACnD~~,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,YAAY,GAAG,CAAC,UAAkB,EAAE,EAAE;QACxC,IAAI,~~MAA6C~~,CAAC;~~QAElD~~,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,~~CAA8B~~,CAAC;~~YAChE~~,CAAC;QACL,CAAC;QAAC,MAAM,CAAC;YACL,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;~~QACvC~~,CAAC;QAED,IAAI,MAAM,EAAE,CAAC;~~YACT~~,UAAU,CAAC,MAAM,CAAC,CAAC;~~QACvB~~,CAAC;QAED,SAAS,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACnC,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,CAAC,CAAC,CAAC;~~IAEtB~~,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 * as React from 'react';\n\nimport {PageContentWithNavigation} from '../../../models';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\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}\n\nconst SourceCode = ({className, format}: SourceCodeProps) => {\n const {content, setContent} = useMainEditorStore();\n const [isOpen, setIsOpen] = React.useState(false);\n\n const handleUpdate = (tempConfig: string) => {\n let object: ~~PageContentWithNavigation \| undefined~~;\n\n try {\n if (tempConfig.trim().startsWith('{') && tempConfig.trim().endsWith('}')) {\n object = JSON.parse(tempConfig);\n } else {\n object = yaml.load(tempConfig) ~~as PageContentWithNavigation~~;\n }\n } catch {\n // eslint-disable-next-line no-console\n console.error('JSON.parse failed');\n }\n\n if (object) {\n setContent(object);\n }\n\n setIsOpen(false);\n };\n\n const textContent = React.useMemo(() => {\n return format === 'yaml' ? yaml.dump(content) : JSON.stringify(content, null, 2);\n }, [format, content]);\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 {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"]}

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { Display, Minus, Plus, Smartphone } from '@gravity-ui/icons';
+import { Display, Eye, Minus, Plus, Smartphone } from '@gravity-ui/icons';
 import { Button, Icon, SegmentedRadioGroup, Select } from '@gravity-ui/uikit';
 import { ZOOM_STEPS } from "../../constants.js";
 import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
@@ -31,7 +31,7 @@ const DEVICE_OPTIONS = [
     },
 ];
 const ViewSwitches = () => {
-    const { zoom, setZoom, decreaseZoom, increaseZoom, deviceWidth, setDeviceWidth } = useMainEditorStore();
+    const { zoom, setZoom, decreaseZoom, increaseZoom, deviceWidth, setDeviceWidth, togglePreviewMode, } = useMainEditorStore();
     // Memoize zoom options to prevent unnecessary recalculations
     const zoomOptions = React.useMemo(() => ZOOM_STEPS.map((step) => ({
         value: String(step),
@@ -46,7 +46,7 @@ const ViewSwitches = () => {
             setZoom(newZoom);
         }
     }, [setZoom]);
-    return (_jsxs("div", { className: b(), role: "toolbar", "aria-label": "View controls", children: [_jsx(SegmentedRadioGroup, { value: deviceWidth, onUpdate: setDeviceWidth, "aria-label": "Device viewport selector", children: DEVICE_OPTIONS.map(({ value, label, ariaLabel }) => (_jsx(SegmentedRadioGroup.Option, { value: value, "aria-label": ariaLabel, children: label }, value))) }), _jsxs("div", { className: b('zoom'), role: "group", "aria-label": "Zoom controls", children: [_jsx(Button, { view: "flat", onClick: decreaseZoom, "aria-label": "Decrease zoom", disabled: zoom <= Math.min(...ZOOM_STEPS), children: _jsx(Icon, { data: Minus }) }), _jsx(Select, { className: b('zoom-select'), multiple: false, value: currentZoomValue, options: zoomOptions, onUpdate: handleZoomUpdate, "aria-label": "Select zoom level", width: "max" }), _jsx(Button, { view: "flat", onClick: increaseZoom, "aria-label": "Increase zoom", disabled: zoom >= Math.max(...ZOOM_STEPS), children: _jsx(Icon, { data: Plus }) })] })] }));
+    return (_jsxs("div", { className: b(), role: "toolbar", "aria-label": "View controls", children: [_jsx(SegmentedRadioGroup, { value: deviceWidth, onUpdate: setDeviceWidth, "aria-label": "Device viewport selector", children: DEVICE_OPTIONS.map(({ value, label, ariaLabel }) => (_jsx(SegmentedRadioGroup.Option, { value: value, "aria-label": ariaLabel, children: label }, value))) }), _jsx(Button, { view: "flat", onClick: togglePreviewMode, "aria-label": "Switch to preview mode", title: "Switch to preview mode", children: _jsx(Icon, { data: Eye }) }), _jsxs("div", { className: b('zoom'), role: "group", "aria-label": "Zoom controls", children: [_jsx(Button, { view: "flat", onClick: decreaseZoom, "aria-label": "Decrease zoom", disabled: zoom <= Math.min(...ZOOM_STEPS), children: _jsx(Icon, { data: Minus }) }), _jsx(Select, { className: b('zoom-select'), multiple: false, value: currentZoomValue, options: zoomOptions, onUpdate: handleZoomUpdate, "aria-label": "Select zoom level", width: "max" }), _jsx(Button, { view: "flat", onClick: increaseZoom, "aria-label": "Increase zoom", disabled: zoom >= Math.max(...ZOOM_STEPS), children: _jsx(Icon, { data: Plus }) })] })] }));
 };
 export default React.memo(ViewSwitches);
 //# sourceMappingURL=ViewSwitches.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ViewSwitches.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/ViewSwitches/ViewSwitches.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;~~AACnE~~,OAAO,EAAC,MAAM,EAAE,IAAI,EAAE,mBAAmB,EAAE,MAAM,EAAC,MAAM,mBAAmB,CAAC;AAE5E,OAAO,EAAC,UAAU,EAAC,2BAAwB;AAC3C,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAClE,OAAO,EAAC,QAAQ,EAAC,0BAAuB;AAExC,OAAO,oBAAoB,CAAC;AAE5B,MAAM,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAcpC;;;;;GAKG;AACH,MAAM,cAAc,GAAmB;IACnC;QACI,KAAK,EAAE,KAAC,IAAI,IAAC,IAAI,EAAE,OAAO,GAAI;QAC9B,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,cAAc;KAC5B;IACD;QACI,KAAK,EAAE,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,GAAI;QACjC,KAAK,EAAE,OAAO;QACd,SAAS,EAAE,aAAa;KAC3B;IACD;QACI,KAAK,EAAE,KAAC,IAAI,IAAC,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,GAAI;QAC5C,KAAK,EAAE,OAAO;QACd,SAAS,EAAE,aAAa;KAC3B;CACJ,CAAC;AAEF,MAAM,YAAY,GAAa,GAAG,EAAE;IAChC,MAAM,~~EAAC~~,IAAI,~~EAAE~~,OAAO,~~EAAE~~,YAAY,~~EAAE~~,YAAY,~~EAAE~~,WAAW,~~EAAE~~,cAAc,~~EAAC~~,~~GAC1E~~,kBAAkB,EAAE,CAAC;IAEzB,6DAA6D;IAC7D,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAC7B,GAAG,EAAE,CACD,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACtB,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC;QACnB,OAAO,EAAE,GAAG,IAAI,GAAG;KACtB,CAAC,CAAC,EACP,EAAE,CACL,CAAC;IAEF,kDAAkD;IAClD,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAErE,0CAA0C;IAC1C,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CACtC,CAAC,KAAwB,EAAE,EAAE;QACzB,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QAChE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;YAClD,OAAO,CAAC,OAAO,CAAC,CAAC;QACrB,CAAC;IACL,CAAC,EACD,CAAC,OAAO,CAAC,CACZ,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,EAAE,EAAE,IAAI,EAAC,SAAS,gBAAY,eAAe,aAC1D,KAAC,mBAAmB,IAChB,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,cAAc,gBACb,0BAA0B,YAEpC,cAAc,CAAC,GAAG,CAAC,CAAC,EAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,EAAE,EAAE,CAAC,CAC/C,KAAC,mBAAmB,CAAC,MAAM,IAAa,KAAK,EAAE,KAAK,gBAAc,SAAS,YACtE,KAAK,IADuB,KAAK,CAET,CAChC,CAAC,GACgB,EAEtB,eAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAC,OAAO,gBAAY,eAAe,aAC9D,KAAC,MAAM,IACH,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,YAAY,gBACV,eAAe,EAC1B,QAAQ,EAAE,IAAI,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,UAAU,CAAC,YAEzC,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,GAAI,GAChB,EAET,KAAC,MAAM,IACH,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,EAC3B,QAAQ,EAAE,KAAK,EACf,KAAK,EAAE,gBAAgB,EACvB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,gBAAgB,gBACf,mBAAmB,EAC9B,KAAK,EAAC,KAAK,GACb,EAEF,KAAC,MAAM,IACH,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,YAAY,gBACV,eAAe,EAC1B,QAAQ,EAAE,IAAI,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,UAAU,CAAC,YAEzC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,GACf,IACP,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport {Display, Minus, Plus, Smartphone} from '@gravity-ui/icons';\nimport {Button, Icon, SegmentedRadioGroup, Select} from '@gravity-ui/uikit';\n\nimport {ZOOM_STEPS} from '../../constants';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\n\nimport './ViewSwitches.scss';\n\nconst b = editorCn('view-switches');\n\n/*\n Device option type definition\n /\ninterface DeviceOption {\n /* React node to display as the option label /\n label: React.ReactNode;\n /* Device width value (e.g., '100%', '768px') /\n value: string;\n /* Descriptive name for accessibility /\n ariaLabel: string;\n}\n\n/\n Available device viewport options\n * - Desktop: 100% width\n * - Tablet: 768px width\n * - Mobile: 576px width\n */\nconst DEVICE_OPTIONS: DeviceOption[] = [\n {\n label: <Icon data={Display} />,\n value: '100%',\n ariaLabel: 'Desktop view',\n },\n {\n label: <Icon data={Smartphone} />,\n value: '768px',\n ariaLabel: 'Tablet view',\n },\n {\n label: <Icon width={14} data={Smartphone} />,\n value: '576px',\n ariaLabel: 'Mobile view',\n },\n];\n\nconst ViewSwitches: React.FC = () => {\n const {zoom, setZoom, decreaseZoom, increaseZoom, deviceWidth, setDeviceWidth} ~~=\n~~ useMainEditorStore();\n\n // Memoize zoom options to prevent unnecessary recalculations\n const zoomOptions = React.useMemo(\n () =>\n ZOOM_STEPS.map((step) => ({\n value: String(step),\n content: `${step}%`,\n })),\n [],\n );\n\n // Memoize current zoom value for Select component\n const currentZoomValue = React.useMemo(() => [String(zoom)], [zoom]);\n\n // Create stable callback for zoom updates\n const handleZoomUpdate = React.useCallback(\n (value: string \| string[]) => {\n const newZoom = Number(Array.isArray(value) ? value[0] : value);\n if (!isNaN(newZoom) && ZOOM_STEPS.includes(newZoom)) {\n setZoom(newZoom);\n }\n },\n [setZoom],\n );\n\n return (\n <div className={b()} role=\"toolbar\" aria-label=\"View controls\">\n <SegmentedRadioGroup\n value={deviceWidth}\n onUpdate={setDeviceWidth}\n aria-label=\"Device viewport selector\"\n >\n {DEVICE_OPTIONS.map(({value, label, ariaLabel}) => (\n <SegmentedRadioGroup.Option key={value} value={value} aria-label={ariaLabel}>\n {label}\n </SegmentedRadioGroup.Option>\n ))}\n </SegmentedRadioGroup>\n\n <div className={b('zoom')} role=\"group\" aria-label=\"Zoom controls\">\n <Button\n view=\"flat\"\n onClick={decreaseZoom}\n aria-label=\"Decrease zoom\"\n disabled={zoom <= Math.min(...ZOOM_STEPS)}\n >\n <Icon data={Minus} />\n </Button>\n\n <Select\n className={b('zoom-select')}\n multiple={false}\n value={currentZoomValue}\n options={zoomOptions}\n onUpdate={handleZoomUpdate}\n aria-label=\"Select zoom level\"\n width=\"max\"\n />\n\n <Button\n view=\"flat\"\n onClick={increaseZoom}\n aria-label=\"Increase zoom\"\n disabled={zoom >= Math.max(...ZOOM_STEPS)}\n >\n <Icon data={Plus} />\n </Button>\n </div>\n </div>\n );\n};\n\nexport default React.memo(ViewSwitches);\n"]}
1	+ {"version":3,"file":"ViewSwitches.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/ViewSwitches/ViewSwitches.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Display, Eye, Minus, Plus, Smartphone} from '@gravity-ui/icons';\nimport {Button, Icon, SegmentedRadioGroup, Select} from '@gravity-ui/uikit';\n\nimport {ZOOM_STEPS} from '../../constants';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\n\nimport './ViewSwitches.scss';\n\nconst b = editorCn('view-switches');\n\n/*\n Device option type definition\n /\ninterface DeviceOption {\n /* React node to display as the option label /\n label: React.ReactNode;\n /* Device width value (e.g., '100%', '768px') /\n value: string;\n /* Descriptive name for accessibility /\n ariaLabel: string;\n}\n\n/\n Available device viewport options\n * - Desktop: 100% width\n * - Tablet: 768px width\n * - Mobile: 576px width\n */\nconst DEVICE_OPTIONS: DeviceOption[] = [\n {\n label: <Icon data={Display} />,\n value: '100%',\n ariaLabel: 'Desktop view',\n },\n {\n label: <Icon data={Smartphone} />,\n value: '768px',\n ariaLabel: 'Tablet view',\n },\n {\n label: <Icon width={14} data={Smartphone} />,\n value: '576px',\n ariaLabel: 'Mobile view',\n },\n];\n\nconst ViewSwitches: React.FC = () => {\n const {\n zoom,\n setZoom,\n decreaseZoom,\n increaseZoom,\n deviceWidth,\n setDeviceWidth,\n togglePreviewMode,\n } = useMainEditorStore();\n\n // Memoize zoom options to prevent unnecessary recalculations\n const zoomOptions = React.useMemo(\n () =>\n ZOOM_STEPS.map((step) => ({\n value: String(step),\n content: `${step}%`,\n })),\n [],\n );\n\n // Memoize current zoom value for Select component\n const currentZoomValue = React.useMemo(() => [String(zoom)], [zoom]);\n\n // Create stable callback for zoom updates\n const handleZoomUpdate = React.useCallback(\n (value: string \| string[]) => {\n const newZoom = Number(Array.isArray(value) ? value[0] : value);\n if (!isNaN(newZoom) && ZOOM_STEPS.includes(newZoom)) {\n setZoom(newZoom);\n }\n },\n [setZoom],\n );\n\n return (\n <div className={b()} role=\"toolbar\" aria-label=\"View controls\">\n <SegmentedRadioGroup\n value={deviceWidth}\n onUpdate={setDeviceWidth}\n aria-label=\"Device viewport selector\"\n >\n {DEVICE_OPTIONS.map(({value, label, ariaLabel}) => (\n <SegmentedRadioGroup.Option key={value} value={value} aria-label={ariaLabel}>\n {label}\n </SegmentedRadioGroup.Option>\n ))}\n </SegmentedRadioGroup>\n\n <Button\n view=\"flat\"\n onClick={togglePreviewMode}\n aria-label=\"Switch to preview mode\"\n title=\"Switch to preview mode\"\n >\n <Icon data={Eye} />\n </Button>\n\n <div className={b('zoom')} role=\"group\" aria-label=\"Zoom controls\">\n <Button\n view=\"flat\"\n onClick={decreaseZoom}\n aria-label=\"Decrease zoom\"\n disabled={zoom <= Math.min(...ZOOM_STEPS)}\n >\n <Icon data={Minus} />\n </Button>\n\n <Select\n className={b('zoom-select')}\n multiple={false}\n value={currentZoomValue}\n options={zoomOptions}\n onUpdate={handleZoomUpdate}\n aria-label=\"Select zoom level\"\n width=\"max\"\n />\n\n <Button\n view=\"flat\"\n onClick={increaseZoom}\n aria-label=\"Increase zoom\"\n disabled={zoom >= Math.max(...ZOOM_STEPS)}\n >\n <Icon data={Plus} />\n </Button>\n </div>\n </div>\n );\n};\n\nexport default React.memo(ViewSwitches);\n"]}

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

@@ -55,12 +55,12 @@ export const useEditorTabs = ({ leftTabs, rightTabs, }) => {
                         {
                             id: 'source-code-yaml',
                             title: 'YAML',
-                            component: () => _jsx(SourceCode, { format: "yaml" }),
+                            component: () => (_jsx(SourceCode, { format: "yaml", showSelectedBlockOnly: true })),
                         },
                         {
                             id: 'source-code-json',
                             title: 'JSON',
-                            component: () => _jsx(SourceCode, { format: "json" }),
+                            component: () => (_jsx(SourceCode, { format: "json", showSelectedBlockOnly: true })),
                         },
                     ] })),
             },

package/build/esm/editor-v2/hooks/useEditorTabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useEditorTabs.js","sourceRoot":"../../../../src","sources":["editor-v2/hooks/useEditorTabs.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,IAAqB,mCAAgC;AAC5D,OAAO,eAAe,yDAAsD;AAC5E,OAAO,UAAU,+CAA4C;AAC7D,OAAO,YAAY,mDAAgD;AACnE,OAAO,UAAU,+CAA4C;AAC7D,OAAO,IAAI,oCAA2B;AAEtC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC1B,QAAQ,EACR,SAAS,GAIZ,EAAE,EAAE;IACD,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CACtB,GAAG,EAAE,CAAC,CAAC;QACH,IAAI,EAAE;YACF;gBACI,EAAE,EAAE,MAAM;gBACV,KAAK,EAAE,MAAM;gBACb,SAAS,EAAE,GAAG,EAAE,CAAC,CACb,KAAC,IAAI,IACD,KAAK,EAAE;wBACH;4BACI,EAAE,EAAE,aAAa;4BACjB,KAAK,EAAE,QAAQ;4BACf,SAAS,EAAE,UAAU;yBACxB;wBACD;4BACI,EAAE,EAAE,QAAQ;4BACZ,KAAK,EAAE,QAAQ;4BACf,SAAS,EAAE,IAAI;yBAClB;wBACD;4BACI,EAAE,EAAE,kBAAkB;4BACtB,KAAK,EAAE,MAAM;4BACb,SAAS,EAAE,GAAG,EAAE,CAAC,KAAC,UAAU,IAAC,MAAM,EAAC,MAAM,GAAG;yBAChD;wBACD;4BACI,EAAE,EAAE,kBAAkB;4BACtB,KAAK,EAAE,MAAM;4BACb,SAAS,EAAE,GAAG,EAAE,CAAC,KAAC,UAAU,IAAC,MAAM,EAAC,MAAM,GAAG;yBAChD;qBACJ,GACH,CACL;aACJ;YACD;gBACI,EAAE,EAAE,YAAY;gBAChB,KAAK,EAAE,YAAY;gBACnB,SAAS,EAAE,YAAY;aAC1B;YACD,GAAG,CAAC,QAAQ,IAAI,EAAE,CAAC;SACtB;QACD,KAAK,EAAE;YACH;gBACI,EAAE,EAAE,MAAM;gBACV,KAAK,EAAE,MAAM;gBACb,SAAS,EAAE,GAAG,EAAE,CAAC,CACb,KAAC,IAAI,IACD,KAAK,EAAE;wBACH;4BACI,EAAE,EAAE,cAAc;4BAClB,KAAK,EAAE,QAAQ;4BACf,SAAS,EAAE,eAAe;yBAC7B;wBACD;4BACI,EAAE,EAAE,kBAAkB;4BACtB,KAAK,EAAE,MAAM;4BACb,SAAS,EAAE,GAAG,EAAE,CAAC,KAAC,UAAU,IAAC,MAAM,EAAC,MAAM,~~GAAG~~;~~yBAChD~~;wBACD;4BACI,EAAE,EAAE,kBAAkB;4BACtB,KAAK,EAAE,MAAM;4BACb,SAAS,EAAE,GAAG,EAAE,CAAC,KAAC,UAAU,IAAC,MAAM,EAAC,MAAM,~~GAAG~~;~~yBAChD~~;qBACJ,GACH,CACL;aACJ;YACD,GAAG,CAAC,SAAS,IAAI,EAAE,CAAC;SACvB;KACJ,CAAC,EACF,CAAC,QAAQ,EAAE,SAAS,CAAC,CACxB,CAAC;IAEF,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport Tabs, {TabsItemProps} from '../components/Tabs/Tabs';\nimport BlockConfigForm from '../containers/BlockConfigForm/BlockConfigForm';\nimport BlocksList from '../containers/BlocksList/BlocksList';\nimport GlobalConfig from '../containers/GlobalConfig/GlobalConfig';\nimport SourceCode from '../containers/SourceCode/SourceCode';\nimport Tree from '../containers/Tree';\n\nexport const useEditorTabs = ({\n leftTabs,\n rightTabs,\n}: {\n leftTabs?: TabsItemProps[];\n rightTabs?: TabsItemProps[];\n}) => {\n const tabs = React.useMemo(\n () => ({\n left: [\n {\n id: 'page',\n title: 'PAGE',\n component: () => (\n <Tabs\n items={[\n {\n id: 'blocks-list',\n title: 'BLOCKS',\n component: BlocksList,\n },\n {\n id: 'layers',\n title: 'LAYERS',\n component: Tree,\n },\n {\n id: 'source-code-yaml',\n title: 'YAML',\n component: () => <SourceCode format=\"yaml\" />,\n },\n {\n id: 'source-code-json',\n title: 'JSON',\n component: () => <SourceCode format=\"json\" />,\n },\n ]}\n />\n ),\n },\n {\n id: 'navigation',\n title: 'NAVIGATION',\n component: GlobalConfig,\n },\n ...(leftTabs \|\| []),\n ],\n right: [\n {\n id: 'edit',\n title: 'EDIT',\n component: () => (\n <Tabs\n items={[\n {\n id: 'block-config',\n title: 'INPUTS',\n component: BlockConfigForm,\n },\n {\n id: 'source-code-yaml',\n title: 'YAML',\n component: () => <SourceCode format=\"yaml\" ~~/>,\~~n },\n {\n id: 'source-code-json',\n title: 'JSON',\n component: () => <SourceCode format=\"json\" ~~/>,\~~n },\n ]}\n />\n ),\n },\n ...(rightTabs \|\| []),\n ],\n }),\n [leftTabs, rightTabs],\n );\n\n return tabs;\n};\n"]}
1	+ {"version":3,"file":"useEditorTabs.js","sourceRoot":"../../../../src","sources":["editor-v2/hooks/useEditorTabs.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,IAAqB,mCAAgC;AAC5D,OAAO,eAAe,yDAAsD;AAC5E,OAAO,UAAU,+CAA4C;AAC7D,OAAO,YAAY,mDAAgD;AACnE,OAAO,UAAU,+CAA4C;AAC7D,OAAO,IAAI,oCAA2B;AAEtC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC1B,QAAQ,EACR,SAAS,GAIZ,EAAE,EAAE;IACD,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CACtB,GAAG,EAAE,CAAC,CAAC;QACH,IAAI,EAAE;YACF;gBACI,EAAE,EAAE,MAAM;gBACV,KAAK,EAAE,MAAM;gBACb,SAAS,EAAE,GAAG,EAAE,CAAC,CACb,KAAC,IAAI,IACD,KAAK,EAAE;wBACH;4BACI,EAAE,EAAE,aAAa;4BACjB,KAAK,EAAE,QAAQ;4BACf,SAAS,EAAE,UAAU;yBACxB;wBACD;4BACI,EAAE,EAAE,QAAQ;4BACZ,KAAK,EAAE,QAAQ;4BACf,SAAS,EAAE,IAAI;yBAClB;wBACD;4BACI,EAAE,EAAE,kBAAkB;4BACtB,KAAK,EAAE,MAAM;4BACb,SAAS,EAAE,GAAG,EAAE,CAAC,KAAC,UAAU,IAAC,MAAM,EAAC,MAAM,GAAG;yBAChD;wBACD;4BACI,EAAE,EAAE,kBAAkB;4BACtB,KAAK,EAAE,MAAM;4BACb,SAAS,EAAE,GAAG,EAAE,CAAC,KAAC,UAAU,IAAC,MAAM,EAAC,MAAM,GAAG;yBAChD;qBACJ,GACH,CACL;aACJ;YACD;gBACI,EAAE,EAAE,YAAY;gBAChB,KAAK,EAAE,YAAY;gBACnB,SAAS,EAAE,YAAY;aAC1B;YACD,GAAG,CAAC,QAAQ,IAAI,EAAE,CAAC;SACtB;QACD,KAAK,EAAE;YACH;gBACI,EAAE,EAAE,MAAM;gBACV,KAAK,EAAE,MAAM;gBACb,SAAS,EAAE,GAAG,EAAE,CAAC,CACb,KAAC,IAAI,IACD,KAAK,EAAE;wBACH;4BACI,EAAE,EAAE,cAAc;4BAClB,KAAK,EAAE,QAAQ;4BACf,SAAS,EAAE,eAAe;yBAC7B;wBACD;4BACI,EAAE,EAAE,kBAAkB;4BACtB,KAAK,EAAE,MAAM;4BACb,SAAS,EAAE,GAAG,EAAE,CAAC,CACb,KAAC,UAAU,IAAC,MAAM,EAAC,MAAM,EAAC,qBAAqB,EAAE,IAAI,GAAI,CAC5D;yBACJ;wBACD;4BACI,EAAE,EAAE,kBAAkB;4BACtB,KAAK,EAAE,MAAM;4BACb,SAAS,EAAE,GAAG,EAAE,CAAC,CACb,KAAC,UAAU,IAAC,MAAM,EAAC,MAAM,EAAC,qBAAqB,EAAE,IAAI,GAAI,CAC5D;yBACJ;qBACJ,GACH,CACL;aACJ;YACD,GAAG,CAAC,SAAS,IAAI,EAAE,CAAC;SACvB;KACJ,CAAC,EACF,CAAC,QAAQ,EAAE,SAAS,CAAC,CACxB,CAAC;IAEF,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport Tabs, {TabsItemProps} from '../components/Tabs/Tabs';\nimport BlockConfigForm from '../containers/BlockConfigForm/BlockConfigForm';\nimport BlocksList from '../containers/BlocksList/BlocksList';\nimport GlobalConfig from '../containers/GlobalConfig/GlobalConfig';\nimport SourceCode from '../containers/SourceCode/SourceCode';\nimport Tree from '../containers/Tree';\n\nexport const useEditorTabs = ({\n leftTabs,\n rightTabs,\n}: {\n leftTabs?: TabsItemProps[];\n rightTabs?: TabsItemProps[];\n}) => {\n const tabs = React.useMemo(\n () => ({\n left: [\n {\n id: 'page',\n title: 'PAGE',\n component: () => (\n <Tabs\n items={[\n {\n id: 'blocks-list',\n title: 'BLOCKS',\n component: BlocksList,\n },\n {\n id: 'layers',\n title: 'LAYERS',\n component: Tree,\n },\n {\n id: 'source-code-yaml',\n title: 'YAML',\n component: () => <SourceCode format=\"yaml\" />,\n },\n {\n id: 'source-code-json',\n title: 'JSON',\n component: () => <SourceCode format=\"json\" />,\n },\n ]}\n />\n ),\n },\n {\n id: 'navigation',\n title: 'NAVIGATION',\n component: GlobalConfig,\n },\n ...(leftTabs \|\| []),\n ],\n right: [\n {\n id: 'edit',\n title: 'EDIT',\n component: () => (\n <Tabs\n items={[\n {\n id: 'block-config',\n title: 'INPUTS',\n component: BlockConfigForm,\n },\n {\n id: 'source-code-yaml',\n title: 'YAML',\n component: () => (\n <SourceCode format=\"yaml\" showSelectedBlockOnly={true} />\n ),\n },\n {\n id: 'source-code-json',\n title: 'JSON',\n component: () => (\n <SourceCode format=\"json\" showSelectedBlockOnly={true} />\n ),\n },\n ]}\n />\n ),\n },\n ...(rightTabs \|\| []),\n ],\n }),\n [leftTabs, rightTabs],\n );\n\n return tabs;\n};\n"]}

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

@@ -1,2 +1,3 @@
-declare const useMainEditorInitialize: () => void;
+import { PageContentWithNavigation } from "../../models/index.js";
+declare const useMainEditorInitialize: (initialContent?: PageContentWithNavigation) => void;
 export default useMainEditorInitialize;

package/build/esm/editor-v2/hooks/useMainEditorInitialize.js CHANGED Viewed

@@ -1,14 +1,23 @@
+import * as React from 'react';
 import { usePostMessageAPIListener } from "../../common/postMessage.js";
 import { useMainEditorStore } from "./useMainEditorStore.js";
 import { usePostMessageEvents } from "./usePostMessageEvents.js";
-const useMainEditorInitialize = () => {
+const useMainEditorInitialize = (initialContent) => {
     const { requestPostMessage } = usePostMessageEvents();
     const { initialize, setConfig, setContent, manipulateOverlayMode, disableMode, insertBlock, reorderBlock, preInsertBlockType, preReorderBlockPath, } = useMainEditorStore();
     usePostMessageAPIListener('ON_INIT', () => {
         initialize();
         requestPostMessage('GET_SUPPORTED_BLOCKS', {});
-        requestPostMessage('GET_INITIAL_CONTENT', {});
+        if (!initialContent) {
+            requestPostMessage('GET_INITIAL_CONTENT', {});
+        }
     }, [requestPostMessage]);
+    React.useEffect(() => {
+        if (initialContent) {
+            setContent(initialContent);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initialContent]);
     usePostMessageAPIListener('ON_INITIAL_CONTENT', (data) => {
         setContent(data);
     });