npm - @gravity-ui/page-constructor - Versions diffs - 6.3.2-alpha.2 → 6.3.2-alpha.5 - Mend

@gravity-ui/page-constructor 6.3.2-alpha.2 → 6.3.2-alpha.5

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

package/build/cjs/editor-v2/components/Sidebar/Sidebar.css CHANGED Viewed

@@ -1,16 +1,3 @@
-.g-root {
-  --g-color-base-brand: var(--g-color-private-black-550-solid);
-  --g-color-base-brand-hover: var(--g-color-private-black-600-solid);
-  --g-color-base-selection: var(--g-color-private-black-200);
-  --g-color-base-selection-hover: var(--g-color-private-black-300);
-  --g-color-base-brand: var(--g-color-text-primary);
-  --g-color-base-brand-hover: var(--g-color-text-complementary);
-  --g-color-text-brand-contrast: var(--g-color-text-light-primary);
-  --g-color-line-brand: var(--g-color-text-primary);
-  --g-color-text-brand: var(--g-color-private-brand-700-solid);
-  --g-color-text-brand-heavy: var(--g-color-private-black-700-solid);
-}
 .pceditor-sidebar {
   position: relative;
   height: 100%;
@@ -21,4 +8,7 @@
 .pceditor-sidebar__block {
   width: 100%;
   border-bottom: 1px solid var(--g-color-line-generic);
+  overflow-x: scroll;
+  box-sizing: border-box;
+  flex: 0 0 auto;
 }

package/build/cjs/editor-v2/components/Tabs/Tabs.css CHANGED Viewed

@@ -1,9 +1,11 @@
 .pceditor-tabs {
   overflow: auto;
   width: 100%;
+  display: flex;
+  flex-direction: column;
 }
 .pceditor-tabs__item {
-  color: var(--g-color-private-black-300);
+  color: var(--g-color-text-hint);
   font-weight: 500;
   letter-spacing: 0.5px;
   cursor: pointer;
@@ -18,9 +20,12 @@
   display: inline-flex;
   flex-direction: row;
   padding: 16px 4px;
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  overflow-x: auto;
 }
 .pceditor-tabs__body {
   flex: 1;
-  border-right: 1px solid var(--g-color-line-generic);
+  min-height: 1px;
   overflow-y: auto;
 }

package/build/cjs/editor-v2/containers/BigOverlay/BigOverlay.css CHANGED Viewed

@@ -1,16 +1,3 @@
-.g-root {
-  --g-color-base-brand: var(--g-color-private-black-550-solid);
-  --g-color-base-brand-hover: var(--g-color-private-black-600-solid);
-  --g-color-base-selection: var(--g-color-private-black-200);
-  --g-color-base-selection-hover: var(--g-color-private-black-300);
-  --g-color-base-brand: var(--g-color-text-primary);
-  --g-color-base-brand-hover: var(--g-color-text-complementary);
-  --g-color-text-brand-contrast: var(--g-color-text-light-primary);
-  --g-color-line-brand: var(--g-color-text-primary);
-  --g-color-text-brand: var(--g-color-private-brand-700-solid);
-  --g-color-text-brand-heavy: var(--g-color-private-black-700-solid);
-}
 .pceditor-big-overlay {
   position: absolute;
   left: 0;

package/build/cjs/editor-v2/containers/BigOverlay/BigOverlay.js CHANGED Viewed

@@ -4,7 +4,7 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_1 = require("@gravity-ui/icons");
 const React = tslib_1.__importStar(require("react"));
-const postMessage_1 = require("../../../../common/postMessage.js");
+const postMessage_1 = require("../../../common/postMessage.js");
 const iframeContext_1 = require("../../context/iframeContext/index.js");
 const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
 const cn_1 = require("../../utils/cn.js");

package/build/cjs/editor-v2/containers/BigOverlay/BigOverlay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BigOverlay.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/BigOverlay/BigOverlay.tsx"],"names":[],"mappings":";;;;AAAA,6CAAuC;AACvC,qDAA+B;AAE/B,~~mEAAyE~~;~~AACzE~~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","sourcesContent":["import {Stop} from '@gravity-ui/icons';\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';\n\nimport './BigOverlay.scss';\n\nconst b = editorCn('big-overlay');\n\nconst BigOverlay = ({className}: {className?: string}) => {\n const {zoom, manipulateOverlayMode} = useMainEditorStore();\n const {iframeElement} = React.useContext(IframeContext);\n const [mousePosition, setMousePosition] = React.useState<{x: number; y: number} \| undefined>(\n undefined,\n );\n const [source, setSource] = React.useState<'main' \| 'iframe'>('main');\n\n const onMouseUp = React.useCallback(() => {\n setMousePosition(undefined);\n }, []);\n\n const onIframeMouseEvent = React.useCallback((position: {x: number; y: number}) => {\n setMousePosition(position);\n setSource('iframe');\n }, []);\n\n usePostMessageAPIListener('ON_MOUSE_UP', onMouseUp);\n usePostMessageAPIListener('ON_MOUSE_MOVE', onIframeMouseEvent);\n\n React.useEffect(() => {\n const onEditorMouseEvent = (event: MouseEvent) => {\n setMousePosition({x: event.clientX, y: event.clientY});\n setSource('main');\n };\n\n document.addEventListener('mousemove', onEditorMouseEvent);\n document.addEventListener('mousedown', onEditorMouseEvent);\n\n return () => {\n document.removeEventListener('mousemove', onEditorMouseEvent);\n document.removeEventListener('mousedown', onEditorMouseEvent);\n };\n }, []);\n\n const realPositions = React.useMemo(() => {\n if (mousePosition) {\n const {x, y} = mousePosition;\n const iframeRect = iframeElement?.getClientRects().item(0);\n if (iframeRect) {\n const zoomedX = (x * zoom) / 100;\n const zoomedY = (y * zoom) / 100;\n const newX = source === 'main' ? x : zoomedX + iframeRect.x;\n const newY = source === 'main' ? y : zoomedY + iframeRect.y;\n return {x: newX, y: newY};\n }\n }\n\n return undefined;\n }, [mousePosition, source, iframeElement, zoom]);\n\n return (\n <div className={b(null, className)}>\n {realPositions && manipulateOverlayMode ? (\n <div\n className={b('border')}\n style={{\n top: realPositions.y,\n left: realPositions.x,\n }}\n >\n <Stop height={20} width={20} />\n </div>\n ) : null}\n </div>\n );\n};\n\nexport default BigOverlay;\n"]}
1	+ {"version":3,"file":"BigOverlay.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/BigOverlay/BigOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Stop} from '@gravity-ui/icons';\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';\n\nimport './BigOverlay.scss';\n\nconst b = editorCn('big-overlay');\n\nconst BigOverlay = ({className}: {className?: string}) => {\n const {zoom, manipulateOverlayMode} = useMainEditorStore();\n const {iframeElement} = React.useContext(IframeContext);\n const [mousePosition, setMousePosition] = React.useState<{x: number; y: number} \| undefined>(\n undefined,\n );\n const [source, setSource] = React.useState<'main' \| 'iframe'>('main');\n\n const onMouseUp = React.useCallback(() => {\n setMousePosition(undefined);\n }, []);\n\n const onIframeMouseEvent = React.useCallback((position: {x: number; y: number}) => {\n setMousePosition(position);\n setSource('iframe');\n }, []);\n\n usePostMessageAPIListener('ON_MOUSE_UP', onMouseUp);\n usePostMessageAPIListener('ON_MOUSE_MOVE', onIframeMouseEvent);\n\n React.useEffect(() => {\n const onEditorMouseEvent = (event: MouseEvent) => {\n setMousePosition({x: event.clientX, y: event.clientY});\n setSource('main');\n };\n\n document.addEventListener('mousemove', onEditorMouseEvent);\n document.addEventListener('mousedown', onEditorMouseEvent);\n\n return () => {\n document.removeEventListener('mousemove', onEditorMouseEvent);\n document.removeEventListener('mousedown', onEditorMouseEvent);\n };\n }, []);\n\n const realPositions = React.useMemo(() => {\n if (mousePosition) {\n const {x, y} = mousePosition;\n const iframeRect = iframeElement?.getClientRects().item(0);\n if (iframeRect) {\n const zoomedX = (x * zoom) / 100;\n const zoomedY = (y * zoom) / 100;\n const newX = source === 'main' ? x : zoomedX + iframeRect.x;\n const newY = source === 'main' ? y : zoomedY + iframeRect.y;\n return {x: newX, y: newY};\n }\n }\n\n return undefined;\n }, [mousePosition, source, iframeElement, zoom]);\n\n return (\n <div className={b(null, className)}>\n {realPositions && manipulateOverlayMode ? (\n <div\n className={b('border')}\n style={{\n top: realPositions.y,\n left: realPositions.x,\n }}\n >\n <Stop height={20} width={20} />\n </div>\n ) : null}\n </div>\n );\n};\n\nexport default BigOverlay;\n"]}

package/build/cjs/editor-v2/containers/BlockConfigForm/BlockConfigForm.css ADDED Viewed

@@ -0,0 +1,20 @@
+.pceditor-block-config-form__title {
+  font-family: var(--g-text-subheader-font-family);
+  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;
+  border-bottom: 1px solid var(--g-color-line-generic);
+}
+.pceditor-block-config-form__form {
+  padding: 12px 0;
+}
+.pceditor-block-config-form__empty {
+  padding: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  height: 100%;
+  width: 100%;
+}

package/build/cjs/editor-v2/containers/BlockConfigForm/BlockConfigForm.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+interface BlockConfigFormProps {
+    className?: string;
+}
+declare const BlockConfigForm: ({ className }: BlockConfigFormProps) => import("react/jsx-runtime").JSX.Element;
+export default BlockConfigForm;

package/build/cjs/editor-v2/containers/{BlockConfig/BlockConfig.js → BlockConfigForm/BlockConfigForm.js} RENAMED Viewed

@@ -7,8 +7,8 @@ const DynamicForm_1 = tslib_1.__importDefault(require("../../components/DynamicF
 const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
 const utils_1 = require("../../utils/index.js");
 const cn_1 = require("../../utils/cn.js");
-const b = (0, cn_1.editorCn)('block-config');
-const BlockConfig = ({ className }) => {
+const b = (0, cn_1.editorCn)('block-config-form');
+const BlockConfigForm = ({ className }) => {
     const { selectedBlock, content, blocks, subBlocks, updateField } = (0, useMainEditorStore_1.useMainEditorStore)();
     const currentBlockPath = selectedBlock ? (0, utils_1.generateChildrenPathFromArray)(selectedBlock) : '[]';
     const currentConfig = lodash_1.default.get(content.blocks, currentBlockPath || '');
@@ -24,5 +24,5 @@ const BlockConfig = ({ className }) => {
     }
     return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), children: [(0, jsx_runtime_1.jsx)("div", { className: b('title'), children: currentSchema.schema.name }), (0, jsx_runtime_1.jsx)("div", { className: b('form'), children: (0, jsx_runtime_1.jsx)(DynamicForm_1.default, { contentConfig: currentConfig, blockConfig: currentSchema.schema.inputs, onUpdate: onUpdate }) })] }));
 };
-exports.default = BlockConfig;
-//# sourceMappingURL=BlockConfig.js.map
+exports.default = BlockConfigForm;
+//# sourceMappingURL=BlockConfigForm.js.map

package/build/cjs/editor-v2/containers/BlockConfigForm/BlockConfigForm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"BlockConfigForm.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/BlockConfigForm/BlockConfigForm.tsx"],"names":[],"mappings":";;;;AAAA,4DAAuB;AAGvB,sGAAmE;AACnE,0EAAkE;AAClE,gDAA0D;AAC1D,0CAAwC;AAIxC,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,mBAAmB,CAAC,CAAC;AAMxC,MAAM,eAAe,GAAG,CAAC,EAAC,SAAS,EAAuB,EAAE,EAAE;IAC1D,MAAM,EAAC,aAAa,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAC,GAAG,IAAA,uCAAkB,GAAE,CAAC;IAEtF,MAAM,gBAAgB,GAAG,aAAa,CAAC,CAAC,CAAC,IAAA,qCAA6B,EAAC,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7F,MAAM,aAAa,GAAG,gBAAC,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,gBAAgB,IAAI,EAAE,CAAC,CAAC;IACpE,MAAM,aAAa,GAAG,CAAC,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,EAAC,IAAI,EAAC,EAAE,EAAE,CAAC,IAAI,KAAK,aAAa,EAAE,IAAI,CAAC,CAAC;IAE/F,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,KAAuB,EAAE,EAAE;QACtD,WAAW,CAAC,QAAQ,GAAG,gBAAgB,GAAG,GAAG,GAAG,GAAG,EAAE,KAAK,CAAC,CAAC;IAChE,CAAC,CAAC;IAEF,IAAI,CAAC,aAAa,EAAE,CAAC;QACjB,OAAO,gCAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,uCAA8B,CAAC;IACpE,CAAC;IAED,IAAI,CAAC,aAAa,EAAE,CAAC;QACjB,OAAO,iCAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,gCAAkB,aAAa,CAAC,IAAI,IAAO,CAAC;IACjF,CAAC;IAED,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC9B,gCAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YAAG,aAAa,CAAC,MAAM,CAAC,IAAI,GAAO,EAC7D,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,uBAAC,qBAAW,IACR,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EACxC,QAAQ,EAAE,QAAQ,GACpB,GACA,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC","sourcesContent":["import _ from 'lodash';\n\nimport {DynamicFormValue} from '../../../common/types';\nimport DynamicForm from '../../components/DynamicForm/DynamicForm';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {generateChildrenPathFromArray} from '../../utils';\nimport {editorCn} from '../../utils/cn';\n\nimport './BlockConfigForm.scss';\n\nconst b = editorCn('block-config-form');\n\ninterface BlockConfigFormProps {\n className?: string;\n}\n\nconst BlockConfigForm = ({className}: BlockConfigFormProps) => {\n const {selectedBlock, content, blocks, subBlocks, updateField} = useMainEditorStore();\n\n const currentBlockPath = selectedBlock ? generateChildrenPathFromArray(selectedBlock) : '[]';\n\n const currentConfig = _.get(content.blocks, currentBlockPath || '');\n const currentSchema = [...blocks, ...subBlocks].find(({type}) => type === currentConfig?.type);\n\n const onUpdate = (key: string, value: DynamicFormValue) => {\n updateField('blocks' + currentBlockPath + '.' + key, value);\n };\n\n if (!currentConfig) {\n return <div className={b('empty')}>Select block for start</div>;\n }\n\n if (!currentSchema) {\n return <div className={b('empty')}>Not supported: {currentConfig.type}</div>;\n }\n\n return (\n <div className={b(null, className)}>\n <div className={b('title')}>{currentSchema.schema.name}</div>\n <div className={b('form')}>\n <DynamicForm\n contentConfig={currentConfig}\n blockConfig={currentSchema.schema.inputs}\n onUpdate={onUpdate}\n />\n </div>\n </div>\n );\n};\n\nexport default BlockConfigForm;\n"]}

package/build/cjs/editor-v2/containers/BlocksList/BlocksList.css CHANGED Viewed

@@ -1,16 +1,3 @@
-.g-root {
-  --g-color-base-brand: var(--g-color-private-black-550-solid);
-  --g-color-base-brand-hover: var(--g-color-private-black-600-solid);
-  --g-color-base-selection: var(--g-color-private-black-200);
-  --g-color-base-selection-hover: var(--g-color-private-black-300);
-  --g-color-base-brand: var(--g-color-text-primary);
-  --g-color-base-brand-hover: var(--g-color-text-complementary);
-  --g-color-text-brand-contrast: var(--g-color-text-light-primary);
-  --g-color-line-brand: var(--g-color-text-primary);
-  --g-color-text-brand: var(--g-color-private-brand-700-solid);
-  --g-color-text-brand-heavy: var(--g-color-private-black-700-solid);
-}
 .pceditor-blocks-list {
   padding: 16px 12px;
   display: flex;
@@ -35,14 +22,14 @@
 }
 .pceditor-blocks-list__name {
   justify-self: flex-end;
-  color: var(--g-color-text-dark-secondary);
+  color: var(--g-color-text-secondary);
 }
 .pceditor-blocks-list__title {
-  color: var(--g-color-text-dark-secondary);
+  color: var(--g-color-text-secondary);
   margin-bottom: 10px;
 }
 .pceditor-blocks-list__icon {
-  color: var(--g-color-text-dark-complementary);
+  color: var(--g-color-text-complementary);
 }
 .pceditor-blocks-list__group {
   padding-bottom: 12px;

package/build/cjs/editor-v2/containers/BlocksList/BlocksList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BlocksList.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/BlocksList/BlocksList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Magnifier, SquareBars} from '@gravity-ui/icons';\nimport {Card, Icon, TextInput} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {ItemConfig} from '~~../../../../~~common/types';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\n\nimport './BlocksList.scss';\n\nconst b = editorCn('blocks-list');\n\ninterface BlockGroups {\n [key: string]: ItemConfig[];\n}\n\nconst BlocksList = () => {\n const {blocks, enableInsertMode} = useMainEditorStore();\n const [search, setSearch] = React.useState('');\n\n const onMouseDown = React.useCallback(\n (blockType: string) => {\n enableInsertMode(blockType);\n },\n [enableInsertMode],\n );\n\n const groups = React.useMemo(() => {\n return blocks.reduce<BlockGroups>((acc, currentBlock) => {\n const group = currentBlock.schema.group;\n if (search && currentBlock.type.indexOf(search) === -1) {\n return acc;\n }\n if (group) {\n if (!acc[group]) {\n /* eslint-disable no-param-reassign /\n acc[group] = [];\n }\n acc[group].push(currentBlock);\n } else {\n if (!acc['other']) {\n / eslint-disable no-param-reassign */\n acc['other'] = [];\n }\n acc['other'].push(currentBlock);\n }\n\n return acc;\n }, {} as BlockGroups);\n }, [blocks, search]);\n\n return (\n <div className={b()}>\n <div className={b('search')}>\n <TextInput\n hasClear\n placeholder=\"Search block\"\n onUpdate={setSearch}\n value={search}\n startContent={<Icon className={b('search-icon')} data={Magnifier} />}\n />\n </div>\n {Object.entries(groups).map(([key, groupBlocks]) => (\n <div className={b('group')} key={key}>\n <div className={b('title')}>{key}</div>\n <div className={b('group-items')}>\n {groupBlocks.map(({type, schema: {name, previewImg}}) => (\n <Card\n key={type}\n className={b('card')}\n onMouseDown={() => onMouseDown(type)}\n >\n <div>\n {previewImg ? (\n <img src={previewImg} alt=\"\" />\n ) : (\n <Icon className={b('icon')} size={45} data={SquareBars} />\n )}\n </div>\n <div className={b('name')}>{name}</div>\n </Card>\n ))}\n </div>\n </div>\n ))}\n </div>\n );\n};\n\nexport default BlocksList;\n"]}
1	+ {"version":3,"file":"BlocksList.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/BlocksList/BlocksList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Magnifier, SquareBars} from '@gravity-ui/icons';\nimport {Card, Icon, TextInput} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {ItemConfig} from '../../../common/types';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\n\nimport './BlocksList.scss';\n\nconst b = editorCn('blocks-list');\n\ninterface BlockGroups {\n [key: string]: ItemConfig[];\n}\n\nconst BlocksList = () => {\n const {blocks, enableInsertMode} = useMainEditorStore();\n const [search, setSearch] = React.useState('');\n\n const onMouseDown = React.useCallback(\n (blockType: string) => {\n enableInsertMode(blockType);\n },\n [enableInsertMode],\n );\n\n const groups = React.useMemo(() => {\n return blocks.reduce<BlockGroups>((acc, currentBlock) => {\n const group = currentBlock.schema.group;\n if (search && currentBlock.type.indexOf(search) === -1) {\n return acc;\n }\n if (group) {\n if (!acc[group]) {\n /* eslint-disable no-param-reassign /\n acc[group] = [];\n }\n acc[group].push(currentBlock);\n } else {\n if (!acc['other']) {\n / eslint-disable no-param-reassign */\n acc['other'] = [];\n }\n acc['other'].push(currentBlock);\n }\n\n return acc;\n }, {} as BlockGroups);\n }, [blocks, search]);\n\n return (\n <div className={b()}>\n <div className={b('search')}>\n <TextInput\n hasClear\n placeholder=\"Search block\"\n onUpdate={setSearch}\n value={search}\n startContent={<Icon className={b('search-icon')} data={Magnifier} />}\n />\n </div>\n {Object.entries(groups).map(([key, groupBlocks]) => (\n <div className={b('group')} key={key}>\n <div className={b('title')}>{key}</div>\n <div className={b('group-items')}>\n {groupBlocks.map(({type, schema: {name, previewImg}}) => (\n <Card\n key={type}\n className={b('card')}\n onMouseDown={() => onMouseDown(type)}\n >\n <div>\n {previewImg ? (\n <img src={previewImg} alt=\"\" />\n ) : (\n <Icon className={b('icon')} size={45} data={SquareBars} />\n )}\n </div>\n <div className={b('name')}>{name}</div>\n </Card>\n ))}\n </div>\n </div>\n ))}\n </div>\n );\n};\n\nexport default BlocksList;\n"]}

package/build/cjs/editor-v2/containers/Editor/Editor.css CHANGED Viewed

@@ -1,16 +1,3 @@
-.g-root {
-  --g-color-base-brand: var(--g-color-private-black-550-solid);
-  --g-color-base-brand-hover: var(--g-color-private-black-600-solid);
-  --g-color-base-selection: var(--g-color-private-black-200);
-  --g-color-base-selection-hover: var(--g-color-private-black-300);
-  --g-color-base-brand: var(--g-color-text-primary);
-  --g-color-base-brand-hover: var(--g-color-text-complementary);
-  --g-color-text-brand-contrast: var(--g-color-text-light-primary);
-  --g-color-line-brand: var(--g-color-text-primary);
-  --g-color-text-brand: var(--g-color-private-brand-700-solid);
-  --g-color-text-brand-heavy: var(--g-color-private-black-700-solid);
-}
 .pceditor-editor {
   margin: 0;
   display: flex;

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

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

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

@@ -6,7 +6,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const Panels_1 = require("../../components/Panels/Panels.js");
 const Sidebar_1 = require("../../components/Sidebar/Sidebar.js");
-const StoreViewer_1 = tslib_1.__importDefault(require("../../components/StoreViewer/StoreViewer.js"));
 const BigOverlay_1 = tslib_1.__importDefault(require("../BigOverlay/BigOverlay.js"));
 const MiddleScreen_1 = tslib_1.__importDefault(require("../MiddleScreen/MiddleScreen.js"));
 const editorStore_1 = require("../../context/editorStore/index.js");
@@ -15,11 +14,13 @@ const useEditorTabs_1 = require("../../hooks/useEditorTabs.js");
 const useMainEditorInitialize_1 = tslib_1.__importDefault(require("../../hooks/useMainEditorInitialize.js"));
 const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
 const cn_1 = require("../../utils/cn.js");
+const Source_1 = tslib_1.__importDefault(require("../Source/Source.js"));
+const ViewSwitches_1 = tslib_1.__importDefault(require("../ViewSwitches/ViewSwitches.js"));
 const b = (0, cn_1.editorCn)('editor');
-const EditorView = ({ componentsConfig = {} }) => {
+const EditorView = ({ componentsConfig = {}, initialContent }) => {
     const store = (0, useMainEditorStore_1.useMainEditorStore)();
     const { manipulateOverlayMode, disableMode } = store;
-    (0, useMainEditorInitialize_1.default)();
+    (0, useMainEditorInitialize_1.default)(initialContent);
     // Disable insert mode on any MouseUp event
     // Maybe should be attached to body
     const onMouseUp = React.useCallback((e) => {
@@ -31,7 +32,7 @@ const EditorView = ({ componentsConfig = {} }) => {
     const { left, right } = (0, useEditorTabs_1.useEditorTabs)(componentsConfig);
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    (0, jsx_runtime_1.jsxs)("div", { className: b(), onMouseUp: onMouseUp, children: [(0, jsx_runtime_1.jsx)("div", { className: b('body'), children: (0, jsx_runtime_1.jsx)(Panels_1.Panels, { left: (0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, { tabs: left, top: componentsConfig.leftTop }), right: (0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, { tabs: right, top: componentsConfig.rightTop, defaultTab: "block-config" }), middle: (0, jsx_runtime_1.jsx)(MiddleScreen_1.default, { CustomTop: componentsConfig.middleTop }) }) }), (0, jsx_runtime_1.jsx)(BigOverlay_1.default, { className: b('overlay') }), (0, jsx_runtime_1.jsx)(StoreViewer_1.default, { className: b('debug-store'), store: store })] }));
+    (0, jsx_runtime_1.jsxs)("div", { className: b(), onMouseUp: onMouseUp, children: [(0, jsx_runtime_1.jsx)("div", { className: b('body'), children: (0, jsx_runtime_1.jsx)(Panels_1.Panels, { left: (0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, { tabs: left, top: componentsConfig.leftTop }), right: (0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, { tabs: right, top: [...(componentsConfig.rightTop || []), Source_1.default, ViewSwitches_1.default], defaultTab: "block-config" }), middle: (0, jsx_runtime_1.jsx)(MiddleScreen_1.default, { CustomTop: componentsConfig.middleTop }) }) }), (0, jsx_runtime_1.jsx)(BigOverlay_1.default, { className: b('overlay') })] }));
 };
 const Editor = (props) => {
     return ((0, jsx_runtime_1.jsx)(iframeContext_1.IframeProvider, { initialUrl: props.initialUrl, disableUrlField: props.disableUrlField, children: (0, jsx_runtime_1.jsx)(editorStore_1.MainEditorStoreProvider, { children: (0, jsx_runtime_1.jsx)(EditorView, { ...props }) }) }));

package/build/cjs/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,qDAA+B;AAG/B,8DAAsD;AACtD,iEAAyD;AACzD,~~sGAAmE;AACnE,~~qFAAgE;AAChE,2FAAsE;AACtE,oEAAkE;AAClE,wEAA2D;AAC3D,gEAAwD;AACxD,6GAA0E;AAC1E,0EAAkE;AAClE,0CAAwC;~~AAIxC~~,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,QAAQ,CAAC,CAAC;~~AAoB7B~~,MAAM,UAAU,GAAG,CAAC,EAAC,gBAAgB,GAAG,EAAE,EAAkB,EAAE,EAAE;~~IAC5D~~,MAAM,KAAK,GAAG,IAAA,uCAAkB,GAAE,CAAC;IACnC,MAAM,EAAC,qBAAqB,EAAE,WAAW,EAAC,GAAG,KAAK,CAAC;IAEnD,IAAA,iCAAuB,~~GAAE~~,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,IAAA,6BAAa,EAAC,gBAAgB,CAAC,CAAC;IAEtD,OAAO;IACH,mEAAmE;IACnE,iCAAK,SAAS,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,aACrC,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,uBAAC,eAAM,IACH,IAAI,EAAE,uBAAC,iBAAO,IAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,gBAAgB,CAAC,OAAO,GAAI,EAC5D,KAAK,EACD,uBAAC,iBAAO,IACJ,IAAI,EAAE,KAAK,EACX,GAAG,EAAE,gBAAgB,CAAC,QAAQ,~~EAC9B~~,UAAU,EAAC,cAAc,GAC3B,EAEN,MAAM,EAAE,uBAAC,sBAAY,IAAC,SAAS,EAAE,gBAAgB,CAAC,SAAS,GAAI,GACjE,GACA,EACN,uBAAC,oBAAU,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,GAAI,~~EACvC~~,~~uBAAC,qBAAW,IAAC,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,GAAI,IACxD,~~CACT,CAAC;AACN,CAAC,CAAC;AAEK,MAAM,MAAM,GAAG,CAAC,KAAsB,EAAE,EAAE;IAC7C,OAAO,CACH,uBAAC,8BAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,eAAe,EAAE,KAAK,CAAC,eAAe,YAChF,uBAAC,qCAAuB,cACpB,uBAAC,UAAU,OAAK,KAAK,GAAI,GACH,GACb,CACpB,CAAC;AACN,CAAC,CAAC;AARW,QAAA,MAAM,UAQjB","sourcesContent":["import * as React from 'react';\n\nimport {PageContentWithNavigation} from '../../../models';\nimport {Panels} from '../../components/Panels/Panels';\nimport {Sidebar} from '../../components/Sidebar/Sidebar';\nimport ~~StoreViewer from '../../components/StoreViewer/StoreViewer';\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';\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}\n defaultTab=\"block-config\"\n />\n }\n middle={<MiddleScreen CustomTop={componentsConfig.middleTop} />}\n />\n </div>\n <BigOverlay className={b('overlay')} />\n ~~<StoreViewer className={b('debug-store')} store={store} />\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,qDAA+B;AAG/B,8DAAsD;AACtD,iEAAyD;AACzD,qFAAgE;AAChE,2FAAsE;AACtE,oEAAkE;AAClE,wEAA2D;AAC3D,gEAAwD;AACxD,6GAA0E;AAC1E,0EAAkE;AAClE,0CAAwC;AACxC,yEAAsC;AACtC,2FAAwD;AAIxD,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,QAAQ,CAAC,CAAC;AAqB7B,MAAM,UAAU,GAAG,CAAC,EAAC,gBAAgB,GAAG,EAAE,EAAE,cAAc,EAAkB,EAAE,EAAE;IAC5E,MAAM,KAAK,GAAG,IAAA,uCAAkB,GAAE,CAAC;IACnC,MAAM,EAAC,qBAAqB,EAAE,WAAW,EAAC,GAAG,KAAK,CAAC;IAEnD,IAAA,iCAAuB,EAAC,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,IAAA,6BAAa,EAAC,gBAAgB,CAAC,CAAC;IAEtD,OAAO;IACH,mEAAmE;IACnE,iCAAK,SAAS,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,aACrC,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,uBAAC,eAAM,IACH,IAAI,EAAE,uBAAC,iBAAO,IAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,gBAAgB,CAAC,OAAO,GAAI,EAC5D,KAAK,EACD,uBAAC,iBAAO,IACJ,IAAI,EAAE,KAAK,EACX,GAAG,EAAE,CAAC,GAAG,CAAC,gBAAgB,CAAC,QAAQ,IAAI,EAAE,CAAC,EAAE,gBAAM,EAAE,sBAAY,CAAC,EACjE,UAAU,EAAC,cAAc,GAC3B,EAEN,MAAM,EAAE,uBAAC,sBAAY,IAAC,SAAS,EAAE,gBAAgB,CAAC,SAAS,GAAI,GACjE,GACA,EACN,uBAAC,oBAAU,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,GAAI,IACrC,CACT,CAAC;AACN,CAAC,CAAC;AAEK,MAAM,MAAM,GAAG,CAAC,KAAsB,EAAE,EAAE;IAC7C,OAAO,CACH,uBAAC,8BAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,eAAe,EAAE,KAAK,CAAC,eAAe,YAChF,uBAAC,qCAAuB,cACpB,uBAAC,UAAU,OAAK,KAAK,GAAI,GACH,GACb,CACpB,CAAC;AACN,CAAC,CAAC;AARW,QAAA,MAAM,UAQjB","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/cjs/editor-v2/containers/GlobalConfig/GlobalConfig.css CHANGED Viewed

@@ -1,24 +1,9 @@
-.g-root {
-  --g-color-base-brand: var(--g-color-private-black-550-solid);
-  --g-color-base-brand-hover: var(--g-color-private-black-600-solid);
-  --g-color-base-selection: var(--g-color-private-black-200);
-  --g-color-base-selection-hover: var(--g-color-private-black-300);
-  --g-color-base-brand: var(--g-color-text-primary);
-  --g-color-base-brand-hover: var(--g-color-text-complementary);
-  --g-color-text-brand-contrast: var(--g-color-text-light-primary);
-  --g-color-line-brand: var(--g-color-text-primary);
-  --g-color-text-brand: var(--g-color-private-brand-700-solid);
-  --g-color-text-brand-heavy: var(--g-color-private-black-700-solid);
-}
-.pceditor-global-config {
-  padding: 12px;
-}
 .pceditor-global-config__title {
-  margin-bottom: 16px;
+  padding: 12px;
   margin-top: 8px;
   font-family: var(--g-text-subheader-font-family);
   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);
+  border-bottom: 1px solid var(--g-color-line-generic);
 }

package/build/cjs/editor-v2/containers/GlobalConfig/GlobalConfig.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GlobalConfig.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/GlobalConfig/GlobalConfig.tsx"],"names":[],"mappings":";;;;AACA,sGAAmE;AACnE,0EAAkE;AAClE,0CAAwC;AAIxC,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,eAAe,CAAC,CAAC;AAMpC,MAAM,YAAY,GAAG,CAAC,EAAC,SAAS,EAAoB,EAAE,EAAE;IACpD,MAAM,EAAC,MAAM,EAAE,OAAO,EAAE,WAAW,EAAC,GAAG,IAAA,uCAAkB,GAAE,CAAC;IAE5D,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,KAAuB,EAAE,EAAE;QACtD,WAAW,CAAC,aAAa,GAAG,GAAG,EAAE,KAAK,CAAC,CAAC;IAC5C,CAAC,CAAC;IAEF,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC9B,gCAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,8BAAqB,EAC/C,uBAAC,qBAAW,IACR,aAAa,EAAE,OAAO,CAAC,UAAU,EACjC,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,QAAQ,GACpB,IACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,YAAY,CAAC","sourcesContent":["import {DynamicFormValue} from '~~../../../../~~common/types';\nimport DynamicForm from '../../components/DynamicForm/DynamicForm';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\n\nimport './GlobalConfig.scss';\n\nconst b = editorCn('global-config');\n\nexport interface GlobalConfigProps {\n className?: string;\n}\n\nconst GlobalConfig = ({className}: GlobalConfigProps) => {\n const {global, content, updateField} = useMainEditorStore();\n\n const onUpdate = (key: string, value: DynamicFormValue) => {\n updateField('navigation.' + key, value);\n };\n\n return (\n <div className={b(null, className)}>\n <div className={b('title')}>Global Config</div>\n <DynamicForm\n contentConfig={content.navigation}\n blockConfig={global}\n onUpdate={onUpdate}\n />\n </div>\n );\n};\n\nexport default GlobalConfig;\n"]}
1	+ {"version":3,"file":"GlobalConfig.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/GlobalConfig/GlobalConfig.tsx"],"names":[],"mappings":";;;;AACA,sGAAmE;AACnE,0EAAkE;AAClE,0CAAwC;AAIxC,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,eAAe,CAAC,CAAC;AAMpC,MAAM,YAAY,GAAG,CAAC,EAAC,SAAS,EAAoB,EAAE,EAAE;IACpD,MAAM,EAAC,MAAM,EAAE,OAAO,EAAE,WAAW,EAAC,GAAG,IAAA,uCAAkB,GAAE,CAAC;IAE5D,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,KAAuB,EAAE,EAAE;QACtD,WAAW,CAAC,aAAa,GAAG,GAAG,EAAE,KAAK,CAAC,CAAC;IAC5C,CAAC,CAAC;IAEF,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC9B,gCAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,8BAAqB,EAC/C,uBAAC,qBAAW,IACR,aAAa,EAAE,OAAO,CAAC,UAAU,EACjC,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,QAAQ,GACpB,IACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,YAAY,CAAC","sourcesContent":["import {DynamicFormValue} from '../../../common/types';\nimport DynamicForm from '../../components/DynamicForm/DynamicForm';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\n\nimport './GlobalConfig.scss';\n\nconst b = editorCn('global-config');\n\nexport interface GlobalConfigProps {\n className?: string;\n}\n\nconst GlobalConfig = ({className}: GlobalConfigProps) => {\n const {global, content, updateField} = useMainEditorStore();\n\n const onUpdate = (key: string, value: DynamicFormValue) => {\n updateField('navigation.' + key, value);\n };\n\n return (\n <div className={b(null, className)}>\n <div className={b('title')}>Global Config</div>\n <DynamicForm\n contentConfig={content.navigation}\n blockConfig={global}\n onUpdate={onUpdate}\n />\n </div>\n );\n};\n\nexport default GlobalConfig;\n"]}

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

@@ -1,16 +1,3 @@
-.g-root {
-  --g-color-base-brand: var(--g-color-private-black-550-solid);
-  --g-color-base-brand-hover: var(--g-color-private-black-600-solid);
-  --g-color-base-selection: var(--g-color-private-black-200);
-  --g-color-base-selection-hover: var(--g-color-private-black-300);
-  --g-color-base-brand: var(--g-color-text-primary);
-  --g-color-base-brand-hover: var(--g-color-text-complementary);
-  --g-color-text-brand-contrast: var(--g-color-text-light-primary);
-  --g-color-line-brand: var(--g-color-text-primary);
-  --g-color-text-brand: var(--g-color-private-brand-700-solid);
-  --g-color-text-brand-heavy: var(--g-color-private-black-700-solid);
-}
 .pceditor-middle-screen {
   height: 100%;
   width: 100%;
@@ -23,18 +10,27 @@
 .pceditor-middle-screen__content {
   flex: 1 1 auto;
   overflow-y: auto;
-  background-color: var(--g-color-text-dark-secondary);
+  background-color: var(--g-color-text-secondary);
 }
 .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__iframe {
+  display: block;
+  margin: 0 auto;
 }
 .pceditor-middle-screen__overlay {
   position: absolute;

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

@@ -4,7 +4,7 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const uikit_1 = require("@gravity-ui/uikit");
 const React = tslib_1.__importStar(require("react"));
-const postMessage_1 = require("../../../../common/postMessage.js");
+const postMessage_1 = require("../../../common/postMessage.js");
 const iframeContext_1 = require("../../context/iframeContext/index.js");
 const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
 const cn_1 = require("../../utils/cn.js");
@@ -24,11 +24,12 @@ const MiddleScreen = ({ className, CustomTop }) => {
     (0, postMessage_1.usePostMessageAPIListener)('ON_INIT', ({ height: newHeight }) => {
         onResize(newHeight);
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), children: [CustomTop ? ((0, jsx_runtime_1.jsx)("div", { className: b('topbar'), children: (0, jsx_runtime_1.jsx)(CustomTop, {}) })) : null, (0, jsx_runtime_1.jsx)("div", { className: b('content'), children: (0, jsx_runtime_1.jsx)("div", { className: b('wrapper'), style: { width: deviceWidth }, children: (0, jsx_runtime_1.jsxs)("div", { ref: setCanvasRef, className: b('canvas', { hidden: !initialized }), style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), children: [CustomTop ? ((0, jsx_runtime_1.jsx)("div", { className: b('topbar'), children: (0, jsx_runtime_1.jsx)(CustomTop, {}) })) : null, (0, jsx_runtime_1.jsx)("div", { className: b('content'), children: (0, jsx_runtime_1.jsx)("div", { className: b('wrapper'), children: (0, jsx_runtime_1.jsxs)("div", { ref: setCanvasRef, className: b('canvas', { hidden: !initialized }), style: {
                             transform: `scale(${zoom}%)`,
                             height: `${(100 / zoom) * 100}%`,
-                            width: `${(100 / zoom) * 100}%`,
-                        }, children: [(0, jsx_runtime_1.jsx)("iframe", { ref: (instance) => instance && setIframeElement(instance), className: b('iframe'), src: url, height: `${height}px`, width: "100%", frameBorder: "0", title: "Page Constructor Iframe" }), (0, jsx_runtime_1.jsx)(Overlay_1.default, { className: b('overlay'), canvasElement: canvasRef }), !initialized && ((0, jsx_runtime_1.jsx)("div", { className: b('loading'), children: (0, jsx_runtime_1.jsx)(uikit_1.Loader, { size: 'l' }) }))] }) }) })] }));
+                            width: deviceWidth,
+                            maxWidth: `${(100 / zoom) * 100}%`,
+                        }, children: [(0, jsx_runtime_1.jsx)("iframe", { ref: (instance) => instance && setIframeElement(instance), className: b('iframe'), src: url, height: `${height}px`, width: deviceWidth, frameBorder: "0", title: "Page Constructor Iframe" }), (0, jsx_runtime_1.jsx)(Overlay_1.default, { className: b('overlay'), canvasElement: canvasRef }), !initialized && ((0, jsx_runtime_1.jsx)("div", { className: b('loading'), children: (0, jsx_runtime_1.jsx)(uikit_1.Loader, { size: 'l' }) }))] }) }) })] }));
 };
 exports.default = MiddleScreen;
 //# sourceMappingURL=MiddleScreen.js.map

package/build/cjs/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,6CAAyC;AACzC,qDAA+B;AAE/B,~~mEAAyE~~;~~AACzE~~,wEAA0D;AAC1D,0EAAkE;AAClE,0CAAwC;AACxC,4EAAyC;AAIzC,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,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,IAAA,uCAAkB,GAAE,CAAC;IAC9D,MAAM,EAAC,GAAG,EAAE,gBAAgB,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,6BAAa,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,IAAA,uCAAyB,EAAC,WAAW,EAAE,CAAC,EAAC,MAAM,EAAE,SAAS,EAAC,EAAE,EAAE;QAC3D,QAAQ,CAAC,SAAS,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;IAEH,IAAA,uCAAyB,EAAC,SAAS,EAAE,CAAC,EAAC,MAAM,EAAE,SAAS,EAAC,EAAE,EAAE;QACzD,QAAQ,CAAC,SAAS,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;IAEH,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC7B,SAAS,CAAC,CAAC,CAAC,CACT,gCAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YACvB,uBAAC,SAAS,KAAG,GACX,CACT,CAAC,CAAC,CAAC,IAAI,EACR,gCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,YACxB,gCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,~~EAAE~~,~~KAAK,EAAE,EAAC,KAAK,EAAE,WAAW,EAAC,YACrD,~~iCACI,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,mCACI,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,uBAAC,iBAAO,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,aAAa,EAAE,SAAS,GAAI,EAC7D,CAAC,WAAW,IAAI,CACb,gCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,YACxB,uBAAC,cAAM,IAAC,IAAI,EAAE,GAAG,GAAI,GACnB,CACT,IACC,GACJ,GACJ,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,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":";;;;AAAA,6CAAyC;AACzC,qDAA+B;AAE/B,gEAAsE;AACtE,wEAA0D;AAC1D,0EAAkE;AAClE,0CAAwC;AACxC,4EAAyC;AAIzC,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,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,IAAA,uCAAkB,GAAE,CAAC;IAC9D,MAAM,EAAC,GAAG,EAAE,gBAAgB,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,6BAAa,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,IAAA,uCAAyB,EAAC,WAAW,EAAE,CAAC,EAAC,MAAM,EAAE,SAAS,EAAC,EAAE,EAAE;QAC3D,QAAQ,CAAC,SAAS,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;IAEH,IAAA,uCAAyB,EAAC,SAAS,EAAE,CAAC,EAAC,MAAM,EAAE,SAAS,EAAC,EAAE,EAAE;QACzD,QAAQ,CAAC,SAAS,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;IAEH,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC7B,SAAS,CAAC,CAAC,CAAC,CACT,gCAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YACvB,uBAAC,SAAS,KAAG,GACX,CACT,CAAC,CAAC,CAAC,IAAI,EACR,gCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,YACxB,gCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,YACxB,iCACI,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,WAAW;4BAClB,QAAQ,EAAE,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,GAAG;yBACrC,aAED,mCACI,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,EAAE,WAAW,EAClB,WAAW,EAAC,GAAG,EACf,KAAK,EAAC,yBAAyB,GACjC,EACF,uBAAC,iBAAO,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,aAAa,EAAE,SAAS,GAAI,EAC7D,CAAC,WAAW,IAAI,CACb,gCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,YACxB,uBAAC,cAAM,IAAC,IAAI,EAAE,GAAG,GAAI,GACnB,CACT,IACC,GACJ,GACJ,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,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')}>\n <div\n ref={setCanvasRef}\n className={b('canvas', {hidden: !initialized})}\n style={{\n transform: `scale(${zoom}%)`,\n height: `${(100 / zoom) * 100}%`,\n width: deviceWidth,\n maxWidth: `${(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={deviceWidth}\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"]}

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

@@ -1,16 +1,3 @@
-.g-root {
-  --g-color-base-brand: var(--g-color-private-black-550-solid);
-  --g-color-base-brand-hover: var(--g-color-private-black-600-solid);
-  --g-color-base-selection: var(--g-color-private-black-200);
-  --g-color-base-selection-hover: var(--g-color-private-black-300);
-  --g-color-base-brand: var(--g-color-text-primary);
-  --g-color-base-brand-hover: var(--g-color-text-complementary);
-  --g-color-text-brand-contrast: var(--g-color-text-light-primary);
-  --g-color-line-brand: var(--g-color-text-primary);
-  --g-color-text-brand: var(--g-color-private-brand-700-solid);
-  --g-color-text-brand-heavy: var(--g-color-private-black-700-solid);
-}
 .pceditor-overlay {
   position: absolute;
   left: 0;
@@ -21,40 +8,60 @@
 }
 .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);
+  z-index: 100;
 }
 .pceditor-overlay__border_hover {
   opacity: 0.5;
+  z-index: 99;
 }
 .pceditor-overlay__line {
   position: absolute;
   box-sizing: border-box;
+  border-radius: 24px;
+  z-index: 10;
 }
 .pceditor-overlay__line_position_top {
-  border-top: 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-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-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-right: 5px var(--g-color-base-brand) solid;
+  border-bottom: 5px var(--g-color-base-brand) solid;
 }
 .pceditor-overlay__actions {
   pointer-events: auto;
   position: absolute;
-  bottom: 0;
+  bottom: -3px;
   left: 50%;
   transform: translate(-50%, 100%);
+  z-index: 1000;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   background: transparent;
 }
-.pceditor-overlay__action-button_grip {
-  cursor: grab;
+.pceditor-overlay__actions-box_main {
+  display: flex;
+  gap: 2px;
+  align-items: center;
+  padding: 1px 8px 4px;
+  background-color: var(--g-color-base-brand);
+  border-radius: 0px 0px 8px 8px;
+}
+.pceditor-overlay__actions-box_reorder {
+  padding: 3px 4px;
+}
+.pceditor-overlay__reorder-icon {
+  color: var(--g-color-base-brand);
 }

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

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const React = tslib_1.__importStar(require("react"));
-const postMessage_1 = require("../../../../common/postMessage.js");
+const postMessage_1 = require("../../../common/postMessage.js");
 const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
 const cn_1 = require("../../utils/cn.js");
 const b = (0, cn_1.editorCn)('overlay');
@@ -72,7 +72,7 @@ const Overlay = ({ className, canvasElement }) => {
                     left: blockBorders.left - margin,
                     width: blockBorders.width + margin * 2,
                     height: blockBorders.height + margin * 2,
-                }, children: (0, jsx_runtime_1.jsxs)("div", { className: b('actions'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", size: 'm', onClick: handleMoveUp, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ChevronUp, size: 18 }) }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { pin: 'round-clear', className: b('action-button'), size: 'm', view: 'action', onClick: () => selectedBlock && duplicateBlock(selectedBlock), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Copy, size: 18 }) }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { pin: 'clear-round', className: b('action-button'), size: 'm', view: 'action', onClick: () => selectedBlock && deleteBlock(selectedBlock), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.TrashBin, size: 18 }) }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", size: 'm', onClick: handleMoveDown, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ChevronDown, size: 18 }) })] }) })) : null, hoverBorders ? ((0, jsx_runtime_1.jsx)("div", { className: b('border', { hover: true }), style: {
+                }, children: (0, jsx_runtime_1.jsxs)("div", { className: b('actions'), children: [(0, jsx_runtime_1.jsx)("div", { className: b('actions-box', { reorder: true }), children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", size: 'm', onClick: handleMoveUp, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { className: b('reorder-icon'), data: icons_1.ChevronUp, size: 18 }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: b('actions-box', { main: true }), children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { className: b('action-button'), size: 'm', view: 'action', onClick: () => selectedBlock && duplicateBlock(selectedBlock), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Copy, size: 18 }) }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { className: b('action-button'), size: 'm', view: 'action', onClick: () => selectedBlock && deleteBlock(selectedBlock), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.TrashBin, size: 18 }) })] }), (0, jsx_runtime_1.jsx)("div", { className: b('actions-box', { reorder: true }), children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", size: 'm', onClick: handleMoveDown, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { className: b('reorder-icon'), data: icons_1.ChevronDown, size: 18 }) }) })] }) })) : null, hoverBorders ? ((0, jsx_runtime_1.jsx)("div", { className: b('border', { hover: true }), style: {
                     top: hoverBorders.top - margin,
                     left: hoverBorders.left - margin,
                     width: hoverBorders.width + margin * 2,