pds-dev-kit-web-test 2.5.377 → 2.5.379

package/dist/src/sub/DynamicLayout/CompositionEditor/CompositionEditor.js

@@ -1,1132 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable @typescript-eslint/no-unused-vars */
-var publ_echo_1 = require("publ-echo");
-var group_1 = require("publ-echo/dist/lib/GridLayoutEditor/group");
-var renderHelpers_1 = require("publ-echo/dist/lib/GridLayoutEditor/utils/renderHelpers");
-var react_1 = __importStar(require("react"));
-var ErrorBoundary_1 = require("../../DynamicLayout/components/Section/ErrorBoundary");
-var gleStyles_1 = require("../../DynamicLayout/gleStyles");
-var styled_components_1 = __importDefault(require("styled-components"));
-require("../components/Section");
-var ComponentBlockMatcher_1 = __importDefault(require("../CompositionRenderer/ComponentBlockMatcher"));
-var CompositionBackground_1 = __importDefault(require("../CompositionRenderer/CompositionBackground"));
-var dynamicLayoutContext_1 = require("../dynamicLayoutContext");
-require("../sections/CustomSection/components/ComponentBlock/componentBlocks/components/S_HiddenCover");
-var clsx_1 = require("../sections/CustomSection/newUtils/clsx");
-var group_2 = require("../sections/CustomSection/newUtils/group");
-var util_1 = require("../sections/CustomSection/util");
-var parseSectionPadding_1 = __importDefault(require("../sections/CustomSection/util/layoutPropParsers/parseSectionPadding"));
-var parseCompositionPlacement_1 = __importDefault(require("../sections/CustomSection/util/parseCompositionPlacement"));
-var Responsive = (0, publ_echo_1.WidthProvider)(publ_echo_1.ResponsiveGridEditor);
-var CompositionEditor = (0, react_1.forwardRef)(function CompositionEditorCanvas(props, ref) {
-    var _a, _b, _c, _d;
-    var _e = props.editorProps, device = _e.device, shortcutKeyMode = _e.shortcutKeyMode, compositionActionHandler = _e.compositionActionHandler;
-    // const GLE_MIN_WIDTH_DESKTOP_PX = `${GRID_CELL_MIN * cols}px`;
-    // const GLE_MIN_WIDTH_MOBILE_PX = `${GRID_CELL_MIN * rows}px`;
-    var editingSectionId = props.compositionData.id;
-    var mode = 'EDIT';
-    var _f = props.compositionData, componentBlocks = _f.componentBlocks, jsonProperties = _f.jsonProperties;
-    var sectionPedigree = jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.pedigree;
-    var _g = (0, react_1.useState)(sectionPedigree), pedigreeState = _g[0], setPedigreeState = _g[1];
-    (0, react_1.useEffect)(function () {
-        setPedigreeState(sectionPedigree);
-    }, [sectionPedigree]);
-    var _h = jsonProperties, _j = _h.data, CB_PLACEMENT_PROP_COMPOSITION = _j.CB_PLACEMENT_PROP_COMPOSITION, CB_LAYOUT_PROP_PADDING = _j.CB_LAYOUT_PROP_PADDING, zOrders = _h.zOrders;
-    var _k = (0, react_1.useState)(null), selectedBlockId = _k[0], setSelectedBlockId = _k[1];
-    var gleRef = (0, react_1.useRef)(null);
-    var _l = (0, react_1.useState)(50), rowHeight = _l[0], setRowHeight = _l[1];
-    var _m = (0, react_1.useState)(16), baseFontSize = _m[0], setBaseFontSize = _m[1];
-    var isMobile = device === 'MOBILE';
-    var isEditMode = mode === 'EDIT';
-    var layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
-    var colsDesktop = CB_PLACEMENT_PROP_COMPOSITION.CB_PLACEMENT_PROP_COMPOSITION_SPEC_COLUMNS;
-    var colsMobile = (_a = CB_PLACEMENT_PROP_COMPOSITION['CB_PLACEMENT_PROP_COMPOSITION_SPEC_COLUMNS:MOBILE']) !== null && _a !== void 0 ? _a : colsDesktop;
-    var rowsDesktop = CB_PLACEMENT_PROP_COMPOSITION.CB_PLACEMENT_PROP_COMPOSITION_SPEC_ROWS;
-    var rowsMobile = (_b = CB_PLACEMENT_PROP_COMPOSITION['CB_PLACEMENT_PROP_COMPOSITION_SPEC_ROWS:MOBILE']) !== null && _b !== void 0 ? _b : rowsDesktop;
-    var rows = isMobile ? rowsMobile : rowsDesktop;
-    var cols = isMobile ? colsMobile : colsDesktop;
-    var canvasWidth = 50 * cols;
-    var _o = (0, react_1.useState)(function () {
-        var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : [], zOrders), lg = _a.lg, sm = _a.sm;
-        return {
-            lg: lg,
-            sm: sm
-        };
-    }), layouts = _o[0], setLayouts = _o[1];
-    var _p = (0, react_1.useState)('ROOT'), editingGroupBlock = _p[0], setEditingGroupBlock = _p[1];
-    var _q = (0, react_1.useState)([]), bulkBlockIds = _q[0], setBulkBlockIds = _q[1];
-    (0, react_1.useEffect)(function () {
-        if (editingGroupBlock) {
-            var found = (0, group_1.findBlockByBlockId)(sectionPedigree, editingGroupBlock);
-            if (!found) {
-                setEditingGroupBlock('ROOT');
-                return;
-            }
-            if (found.type === 'GROUP_BLOCK' && found.children.length === 0) {
-                setEditingGroupBlock('ROOT');
-                return;
-            }
-        }
-    }, [editingGroupBlock, sectionPedigree]);
-    var newblock = bulkBlockIds.length > 0
-        ? (0, group_1.addBulkToTarget)(pedigreeState, editingGroupBlock, bulkBlockIds)
-        : pedigreeState;
-    (0, react_1.useImperativeHandle)(ref, function () {
-        return {
-            selectCB: function (blockId) {
-                setSelectedBlockId(blockId);
-            },
-            selectCBInBulk: function (blockIds) {
-                setBulkBlockIds(blockIds);
-            },
-            selectGroup: function (groupBlockId) {
-                setBulkBlockIds([]);
-                setSelectedBlockId(groupBlockId);
-            }
-        };
-    }, [componentBlocks]);
-    (0, react_1.useLayoutEffect)(function () {
-        var parsedLayouts = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : [], zOrders);
-        setLayouts(function (prev) {
-            var _a;
-            var _b;
-            var group = (0, group_2.getGroupCB)(prev[layoutByDevice]);
-            var groupedCBIds = (_b = group === null || group === void 0 ? void 0 : group.childrenIds) !== null && _b !== void 0 ? _b : [];
-            var filteredLayout = (0, group_2.filterItemsById)(parsedLayouts[layoutByDevice], groupedCBIds);
-            if (group === null || group === void 0 ? void 0 : group.groupLayouts) {
-                var groupCbs = parsedLayouts[layoutByDevice].filter(function (each) {
-                    return groupedCBIds.includes(each.i);
-                });
-                if (groupCbs.length > 0) {
-                    var newGroupLayout = (0, group_2.getGroupForMultiple)(groupCbs);
-                    filteredLayout.push(newGroupLayout);
-                }
-            }
-            return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = filteredLayout, _a));
-        });
-    }, [componentBlocks, group_2.getGroupCB, layoutByDevice, zOrders]);
-    (0, react_1.useEffect)(function () {
-        if (editingSectionId !== props.compositionData.id) {
-            setSelectedBlockId(null);
-            setBulkBlockIds([]);
-            setEditingGroupBlock('ROOT');
-        }
-    }, [editingSectionId]);
-    var workDir = (_c = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _c !== void 0 ? _c : '/ROOT';
-    (0, react_1.useEffect)(function () {
-        compositionActionHandler &&
-            compositionActionHandler({
-                type: '@COMPOSITION/WORKDIR_CHANGED',
-                payload: {
-                    workDir: workDir
-                }
-            });
-    }, [workDir]);
-    // NOTE: 추후에 event를 외부에서 전달받게하거나, 아예 상태를 끌어올리거나 해야합니다.
-    (0, react_1.useLayoutEffect)(function () {
-        var _a, _b, _c, _d, _e, _f;
-        if (props.compositionData.id !== editingSectionId) {
-            return;
-        }
-        if (!shortcutKeyMode) {
-            return;
-        }
-        if (shortcutKeyMode === 'SELECT_ALL') {
-            makeAllInOneGroup();
-            return;
-        }
-        // esc
-        if (shortcutKeyMode === 'MANUAL_BULK_BREAK') {
-            if (selectedBlockId &&
-                editingGroupBlock !== selectedBlockId &&
-                editingGroupBlock !== 'ROOT') {
-                setSelectedBlockId(null);
-                compositionActionHandler &&
-                    compositionActionHandler({
-                        type: '@COMPOSITION/BLOCK_CLICKED',
-                        payload: {
-                            block: {
-                                blockId: editingGroupBlock,
-                                type: 'GROUP_BLOCK',
-                                workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
-                                childrenBlockIds: (_b = (0, group_1.findDirectChildrenBlockIds)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : [],
-                                childrenCBIds: (_c = (0, group_1.findDirectChildrenCbIds)(newblock, editingGroupBlock)) !== null && _c !== void 0 ? _c : []
-                            }
-                        }
-                    });
-                return;
-            }
-            if (bulkBlockIds.length > 0) {
-                setBulkBlockIds([]);
-                setSelectedBlockId(null);
-                compositionActionHandler &&
-                    compositionActionHandler({
-                        type: '@COMPOSITION/BLOCK_CLICKED',
-                        payload: {
-                            block: {
-                                blockId: editingGroupBlock,
-                                type: 'GROUP_BLOCK',
-                                workDir: (_d = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _d !== void 0 ? _d : 'NOT-FOUND',
-                                childrenBlockIds: (_e = (0, group_1.findDirectChildrenBlockIds)(newblock, editingGroupBlock)) !== null && _e !== void 0 ? _e : [],
-                                childrenCBIds: (_f = (0, group_1.findDirectChildrenCbIds)(newblock, editingGroupBlock)) !== null && _f !== void 0 ? _f : []
-                            }
-                        }
-                    });
-                return;
-            }
-            if (editingGroupBlock !== 'ROOT') {
-                setEditingGroupBlock('ROOT');
-                setSelectedBlockId(null);
-                compositionActionHandler &&
-                    compositionActionHandler({
-                        type: '@COMPOSITION/BULK_DISMISSED',
-                        payload: {
-                            message: 'MANUAL_BULK_BREAK_OR_ESC',
-                            editingGroupBlock: 'ROOT'
-                        }
-                    });
-                return;
-            }
-            if (editingGroupBlock === 'ROOT') {
-                setSelectedBlockId(null);
-                compositionActionHandler &&
-                    compositionActionHandler({
-                        type: '@COMPOSITION/BULK_DISMISSED',
-                        payload: {
-                            message: 'MANUAL_BULK_BREAK_OR_ESC',
-                            editingGroupBlock: 'ROOT'
-                        }
-                    });
-            }
-        }
-    }, [shortcutKeyMode, setSelectedBlockId]);
-    (0, react_1.useLayoutEffect)(function () {
-        var _a;
-        if (props.compositionData.id !== editingSectionId) {
-            return;
-        }
-        if (shortcutKeyMode === 'MANUAL_COLLISION_SELECT') {
-            if (!selectedBlockId || selectedBlockId === 'BULK') {
-                return;
-            }
-            var selectedCBId = selectedBlockId ? (0, group_1.formatBlockIdToCbId)(selectedBlockId) : undefined;
-            if (!selectedCBId) {
-                return;
-            }
-            var bulks_1 = getCollisionGroupIds(selectedCBId);
-            if (selectedBlockId) {
-                bulks_1.push(selectedBlockId);
-            }
-            setBulkBlockIds(function (prev) {
-                var set = new Set(__spreadArray(__spreadArray([], prev, true), bulks_1, true));
-                return Array.from(set);
-            });
-            setSelectedBlockId(null);
-            var newBulkCBIds = bulks_1
-                .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
-                .filter(function (each) { return each !== null; });
-            var childrenCBIds = [];
-            if (newBulkCBIds.length === 0) {
-                var oneCB = (0, group_1.findOneComponentBlock)(newblock, bulks_1[0]);
-                childrenCBIds = oneCB ? [oneCB] : [];
-            }
-            else {
-                childrenCBIds = newBulkCBIds;
-            }
-            var groupDisabled = getWorkDirDirectChildrenLength() === __spreadArray(__spreadArray([], bulkBlockIds, true), bulks_1, true).length;
-            compositionActionHandler &&
-                compositionActionHandler({
-                    type: '@COMPOSITION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            type: 'BULK',
-                            blockId: 'BULK',
-                            childrenBlockIds: bulks_1,
-                            workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
-                            childrenCBIds: childrenCBIds,
-                            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-                        }
-                    }
-                });
-            return;
-        }
-    }, [
-        selectedBlockId,
-        shortcutKeyMode,
-        compositionActionHandler,
-        bulkBlockIds,
-        setSelectedBlockId
-    ]);
-    var makeAllInOneGroup = function () {
-        var _a, _b, _c, _d, _e;
-        var allRootChildIds = (0, group_1.findDirectChildrenBlockIds)(pedigreeState, editingGroupBlock);
-        if (allRootChildIds.length === 1) {
-            var block = (0, group_1.findBlockByBlockId)(newblock, allRootChildIds[0]);
-            if (!block) {
-                return;
-            }
-            setSelectedBlockId(block.blockId);
-            setBulkBlockIds([]);
-            if (block.type === 'COMPONENT_BLOCK') {
-                compositionActionHandler &&
-                    compositionActionHandler({
-                        type: '@COMPOSITION/BLOCK_CLICKED',
-                        payload: {
-                            block: {
-                                blockId: block.blockId,
-                                type: block.type,
-                                cbId: block.componentBlockId,
-                                workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
-                            }
-                        }
-                    });
-                return;
-            }
-            if (block.type === 'GROUP_BLOCK') {
-                compositionActionHandler &&
-                    compositionActionHandler({
-                        type: '@COMPOSITION/BLOCK_CLICKED',
-                        payload: {
-                            block: {
-                                blockId: block.blockId,
-                                type: 'GROUP_BLOCK',
-                                workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : 'NOT-FOUND',
-                                childrenBlockIds: (_c = (0, group_1.findDirectChildrenBlockIds)(newblock, block.blockId)) !== null && _c !== void 0 ? _c : [],
-                                childrenCBIds: (_d = (0, group_1.findDirectChildrenCbIds)(newblock, block.blockId)) !== null && _d !== void 0 ? _d : []
-                            }
-                        }
-                    });
-            }
-            return;
-        }
-        setBulkBlockIds(allRootChildIds);
-        var newBulkCBIds = allRootChildIds
-            .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
-            .filter(function (each) { return each !== null; });
-        var childrenCBIds = [];
-        if (newBulkCBIds.length === 0) {
-            var oneCB = (0, group_1.findOneComponentBlock)(newblock, allRootChildIds[0]);
-            childrenCBIds = oneCB ? [oneCB] : [];
-        }
-        else {
-            childrenCBIds = newBulkCBIds;
-        }
-        var groupDisabled = getWorkDirDirectChildrenLength() === allRootChildIds.length;
-        compositionActionHandler &&
-            compositionActionHandler({
-                type: '@COMPOSITION/BLOCK_CLICKED',
-                payload: {
-                    block: {
-                        type: 'BULK',
-                        blockId: 'BULK',
-                        childrenBlockIds: allRootChildIds,
-                        workDir: (_e = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _e !== void 0 ? _e : 'NOT-FOUND',
-                        childrenCBIds: childrenCBIds,
-                        groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-                    }
-                }
-            });
-    };
-    var getCollisionGroupIds = function (cdId1) {
-        var layoutItem = (0, renderHelpers_1.getLayoutItem)(layouts[layoutByDevice], cdId1.toString());
-        if (!layoutItem) {
-            return [];
-        }
-        var allCollisions = (0, renderHelpers_1.getAllCollisions)(layouts[layoutByDevice], layoutItem);
-        var allCollisionsCbIds = allCollisions.map(function (each) { return Number(each.i); });
-        var workDirChildrenBlockIds = (0, group_1.findDirectChildrenBlockIds)(newblock, editingGroupBlock);
-        var collisions = workDirChildrenBlockIds.filter(function (each) {
-            var cbId = (0, group_1.formatBlockIdToCbId)(each);
-            var allCollisions = (0, group_1.findAllChildrenCbIds)(newblock, each);
-            if (cbId !== null && allCollisionsCbIds.includes(cbId)) {
-                return true;
-            }
-            var hasCollision = allCollisions.some(function (each) { return allCollisionsCbIds.includes(each); });
-            return hasCollision;
-        });
-        return __spreadArray(__spreadArray([], collisions, true), [(0, group_1.formatCbIdToBlockId)(cdId1)], false);
-    };
-    var _r = (0, parseCompositionPlacement_1.default)({
-        isMobile: isMobile,
-        compositionProps: CB_PLACEMENT_PROP_COMPOSITION
-    }), minHeight = _r.minHeight, maxWidth = _r.maxWidth, maxHeight = _r.maxHeight, minWidth = _r.minWidth;
-    var customSectionStyles = {
-        minHeight: "".concat(minHeight, "px"),
-        maxHeight: "".concat(maxHeight, "px"),
-        width: "".concat(canvasWidth, "px"),
-        maxWidth: maxWidth ? "".concat(maxWidth, "px") : '100%',
-        minWidth: "".concat(Math.max(canvasWidth, minWidth !== null && minWidth !== void 0 ? minWidth : 0), "px")
-    };
-    var breakpoint = device === 'MOBILE' ? 'sm' : 'lg';
-    var onClickCB = function (id) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        var blockId = (0, group_1.formatCbIdToBlockId)(id);
-        if (!isEditMode) {
-            return;
-        }
-        var added = (function () {
-            if (selectedBlockId === editingGroupBlock) {
-                return [blockId];
-            }
-            if (selectedBlockId === 'BULK') {
-                return [blockId];
-            }
-            return selectedBlockId ? [selectedBlockId, blockId] : [blockId];
-        })();
-        if (shortcutKeyMode === 'BULK_SELECT') {
-            setBulkBlockIds(function (prev) {
-                var set = new Set(__spreadArray(__spreadArray([], prev, true), added, true));
-                return Array.from(set);
-            });
-            setSelectedBlockId(null);
-            var newBulkBlockIds = Array.from(new Set(__spreadArray(__spreadArray([], bulkBlockIds, true), added, true)));
-            var newBulkCBIds = newBulkBlockIds
-                .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
-                .filter(function (each) { return each !== null; });
-            var childrenCBIds = [];
-            if (newBulkCBIds.length === 0) {
-                var oneCB = (0, group_1.findOneComponentBlock)(newblock, newBulkBlockIds[0]);
-                childrenCBIds = oneCB ? [oneCB] : [];
-            }
-            else {
-                childrenCBIds = newBulkCBIds;
-            }
-            var groupDisabled = getWorkDirDirectChildrenLength() === __spreadArray(__spreadArray([], bulkBlockIds, true), added, true).length;
-            compositionActionHandler &&
-                compositionActionHandler({
-                    type: '@COMPOSITION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            type: 'BULK',
-                            blockId: 'BULK',
-                            childrenBlockIds: newBulkBlockIds,
-                            childrenCBIds: childrenCBIds,
-                            workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
-                            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-                        }
-                    }
-                });
-            return;
-        }
-        if (shortcutKeyMode === 'COLLISION_SELECT') {
-            var bulks = getCollisionGroupIds(id);
-            var newBulksSet = new Set(__spreadArray(__spreadArray(__spreadArray([], bulkBlockIds, true), added, true), bulks, true));
-            var newBulks = Array.from(newBulksSet);
-            if (newBulks.length === 1) {
-                var blockId_1 = newBulks[0];
-                setSelectedBlockId(blockId_1);
-                setBulkBlockIds([]);
-                compositionActionHandler &&
-                    compositionActionHandler({
-                        type: '@COMPOSITION/BLOCK_CLICKED',
-                        payload: {
-                            block: {
-                                type: 'COMPONENT_BLOCK',
-                                blockId: blockId_1,
-                                cbId: id,
-                                workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : 'NOT-FOUND'
-                            }
-                        }
-                    });
-                return;
-            }
-            setBulkBlockIds(newBulks);
-            setSelectedBlockId(null);
-            var newBulkCBIds = newBulks
-                .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
-                .filter(function (each) { return each !== null; });
-            var childrenCBIds = [];
-            if (newBulkCBIds.length === 0) {
-                var oneCB = (0, group_1.findOneComponentBlock)(newblock, bulks[0]);
-                childrenCBIds = oneCB ? [oneCB] : [];
-            }
-            else {
-                childrenCBIds = newBulkCBIds;
-            }
-            var groupDisabled = getWorkDirDirectChildrenLength() === newBulks.length;
-            compositionActionHandler &&
-                compositionActionHandler({
-                    type: '@COMPOSITION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            type: 'BULK',
-                            blockId: 'BULK',
-                            childrenBlockIds: newBulks,
-                            workDir: (_c = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _c !== void 0 ? _c : 'NOT-FOUND',
-                            childrenCBIds: childrenCBIds,
-                            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-                        }
-                    }
-                });
-            return;
-        }
-        var blockType = blockId.startsWith('GB_') ? 'GROUP_BLOCK' : 'COMPONENT_BLOCK';
-        setSelectedBlockId(blockId);
-        setBulkBlockIds([]);
-        if (blockType === 'COMPONENT_BLOCK') {
-            compositionActionHandler &&
-                compositionActionHandler({
-                    type: '@COMPOSITION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            blockId: blockId,
-                            type: blockType,
-                            cbId: id,
-                            workDir: (_d = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _d !== void 0 ? _d : 'NOT-FOUND'
-                        }
-                    }
-                });
-            return;
-        }
-        if (blockType === 'GROUP_BLOCK') {
-            compositionActionHandler &&
-                compositionActionHandler({
-                    type: '@COMPOSITION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            blockId: blockId,
-                            type: 'GROUP_BLOCK',
-                            workDir: (_e = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _e !== void 0 ? _e : 'NOT-FOUND',
-                            childrenBlockIds: (_f = (0, group_1.findDirectChildrenBlockIds)(newblock, blockId)) !== null && _f !== void 0 ? _f : [],
-                            childrenCBIds: (_g = (0, group_1.findDirectChildrenCbIds)(newblock, blockId)) !== null && _g !== void 0 ? _g : []
-                        }
-                    }
-                });
-        }
-    };
-    var onContextMenuCB = function (id, e) {
-        var _a;
-        var blockId = (0, group_1.formatCbIdToBlockId)(id);
-        if (!isEditMode) {
-            return;
-        }
-        if (selectedBlockId === 'BULK' && blockId !== selectedBlockId) {
-            setBulkBlockIds([]);
-        }
-        // if (!['COLLISION_SELECT', 'BULK_SELECT'].includes(shortcutKeyMode ?? '')) {
-        //   if (blockId !== selectedBlockId) {
-        //     setBulkBlockIds([]);
-        //   }
-        // }
-        setSelectedBlockId(blockId);
-        if (compositionActionHandler) {
-            compositionActionHandler({
-                type: '@COMPOSITION/CB_RIGHT_CLICKED',
-                payload: {
-                    e: e,
-                    block: {
-                        blockId: blockId,
-                        cbId: id,
-                        type: 'COMPONENT_BLOCK',
-                        workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
-                    }
-                }
-            });
-        }
-    };
-    var onLayoutChange = function (props) {
-        if (!isEditMode) {
-            return;
-        }
-        if (compositionActionHandler) {
-            compositionActionHandler({
-                type: '@COMPOSITION/PLACEMENT_CHANGED',
-                payload: props
-            });
-        }
-        setLayouts(props.layouts);
-    };
-    var onDragStart = function (props) {
-        compositionActionHandler &&
-            compositionActionHandler({
-                type: '@COMPOSITION/CB_DRAG_START',
-                payload: __assign({}, props)
-            });
-    };
-    var onDragStop = function (props) {
-        var _a, _b, _c;
-        if (!isEditMode || !props.item) {
-            return;
-        }
-        var item = props.item, prev = props.prev;
-        var isShiftOn = shortcutKeyMode === 'BULK_SELECT' || shortcutKeyMode === 'COLLISION_SELECT';
-        if (isLayoutPlacementSame(item, prev) && isShiftOn) {
-            setTimeout(function () {
-                onClickCB(Number(item.i));
-            }, 0);
-            return;
-        }
-        // NOTE 미사용시 삭제
-        // if (item.i === 'BULK' && props.compositionData.item.groupLayouts) {
-        //   setSelectedBlockId('BULK');
-        //   const outerBasedChildrenPositions = props.compositionData.item.groupLayouts.map((cb) => ({
-        //     ...cb,
-        //     x: item.x + cb.x,
-        //     y: item.y + cb.y
-        //   }));
-        //   compositionActionHandler &&
-        //     compositionActionHandler({
-        //       type: '@COMPOSITION/BULK_DRAG_STOP',
-        //       payload: {
-        //         updatedBlocks: props.compositionData.
-        //         ...props,
-        //         outerBasedChildrenPositions,
-        //         workDir: getBlockWorkDirPath(newblock, editingGroupBlock) ?? 'NOT-FOUND'
-        //       }
-        //     });
-        //   return;
-        // }
-        var numberId = Number((_a = props.item) === null || _a === void 0 ? void 0 : _a.i);
-        var blockId = (0, group_1.formatCbIdToBlockId)(numberId);
-        var isIdNumber = !Number.isNaN(numberId);
-        if (blockId) {
-            if ((0, group_2.getGroupCB)(layouts[layoutByDevice])) {
-                setTimeout(function () {
-                    setBulkBlockIds([]);
-                }, 100);
-            }
-            setSelectedBlockId(blockId);
-        }
-        if (isLayoutPlacementSame(item, prev)) {
-            // 확인 필요.. 그룹과 벌크
-            compositionActionHandler &&
-                compositionActionHandler({
-                    type: '@COMPOSITION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            blockId: blockId,
-                            cbId: numberId,
-                            type: 'COMPONENT_BLOCK',
-                            workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : 'NOT-FOUND'
-                        }
-                    }
-                });
-            return;
-        }
-        if (compositionActionHandler && isIdNumber) {
-            compositionActionHandler({
-                type: '@COMPOSITION/CB_DRAG_STOP',
-                payload: __assign(__assign({}, props), { blockId: blockId, workDir: (_c = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _c !== void 0 ? _c : 'NOT-FOUND' })
-            });
-        }
-    };
-    var onResizeStop = function (props) {
-        var _a;
-        var prev = props.prev, item = props.item;
-        if (!isEditMode || !item) {
-            return;
-        }
-        var numberId = Number(item.i);
-        var isIdNumber = !Number.isNaN(numberId);
-        if (isLayoutPlacementSame(item, prev)) {
-            return;
-        }
-        if (isIdNumber) {
-            var blockId = (0, group_1.formatCbIdToBlockId)(numberId);
-            setSelectedBlockId(blockId);
-        }
-        if (compositionActionHandler && isIdNumber) {
-            compositionActionHandler({
-                type: '@COMPOSITION/CB_RESIZE_STOP',
-                payload: __assign(__assign({}, props), { blockId: (0, group_1.formatCbIdToBlockId)(numberId), workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND' })
-            });
-        }
-    };
-    var onAutoFitContent = function (props) {
-        var _a;
-        var prev = props.prev, item = props.item;
-        if (!isEditMode || !item) {
-            return;
-        }
-        var numberId = Number(item.i);
-        var isIdNumber = !Number.isNaN(numberId);
-        if (isLayoutPlacementSame(item, prev)) {
-            return;
-        }
-        if (isIdNumber) {
-            var blockId = (0, group_1.formatCbIdToBlockId)(numberId);
-            setSelectedBlockId(blockId);
-        }
-        if (compositionActionHandler && isIdNumber) {
-            compositionActionHandler({
-                type: '@COMPOSITION/CB_AUTO_FIT_CONTENT',
-                payload: __assign(__assign({}, props), { details: { hadPaddingChanged: props.hasPaddingChanged }, blockId: (0, group_1.formatCbIdToBlockId)(numberId), workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND' })
-            });
-        }
-    };
-    var onClickSection = function (e) {
-        if (!isEditMode) {
-            return;
-        }
-        if (editingGroupBlock !== 'ROOT') {
-            onClickGroup(e, editingGroupBlock);
-            return;
-        }
-        setBulkBlockIds([]);
-        setSelectedBlockId(null);
-        compositionActionHandler &&
-            compositionActionHandler({
-                type: '@COMPOSITION/COMPOSITION_CLICKED',
-                payload: {
-                    compositionId: props.compositionData.id
-                }
-            });
-    };
-    var onContextGroup = function (e, blockId, isEditingGroup) {
-        var _a, _b, _c;
-        setSelectedBlockId(blockId);
-        var block = (0, group_1.findBlockByBlockId)(newblock, blockId);
-        if ((block === null || block === void 0 ? void 0 : block.type) === 'COMPONENT_BLOCK') {
-            return;
-        }
-        compositionActionHandler &&
-            compositionActionHandler({
-                type: '@COMPOSITION/GROUP_RIGHT_CLICKED',
-                payload: {
-                    block: {
-                        blockId: blockId,
-                        type: 'GROUP_BLOCK',
-                        workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
-                        childrenBlockIds: (_b = (0, group_1.findDirectChildrenBlockIds)(newblock, blockId)) !== null && _b !== void 0 ? _b : [],
-                        childrenCBIds: (_c = (0, group_1.findDirectChildrenCbIds)(newblock, blockId)) !== null && _c !== void 0 ? _c : []
-                    },
-                    e: e,
-                    isEditingGroup: isEditingGroup
-                }
-            });
-    };
-    var onContextSection = function (e) {
-        if (editingGroupBlock !== 'ROOT') {
-            e.preventDefault();
-            return;
-        }
-        if (!isEditMode) {
-            return;
-        }
-        if ((0, group_2.getGroupCB)(layouts[layoutByDevice])) {
-            setBulkBlockIds([]);
-        }
-        setSelectedBlockId(null);
-        compositionActionHandler &&
-            compositionActionHandler({
-                type: '@COMPOSITION/COMPOSITION_RIGHT_CLICKED',
-                payload: {
-                    compositionId: props.compositionData.id,
-                    e: e
-                }
-            });
-    };
-    var onWidthChange = function (width) {
-        // const responsiveFontMode =
-        //   // NOTE: local환경에서 CB_CONTENT_PROP_COMPOSITION이 없는 경우가 있음.
-        //   !!CB_CONTENT_PROP_COMPOSITION?.CB_CONTENT_PROP_COMPOSITION_SPEC_VARIABLEROOTFONTSIZE;
-        var responsiveFontMode = true;
-        if (device === 'MOBILE') {
-            // const cellWidth = width / rows;
-            var cellWidth_1 = 50;
-            setRowHeight(cellWidth_1 * 0.56);
-            baseFontSize !== 16 && setBaseFontSize(width * 0.0133);
-            responsiveFontMode ? setBaseFontSize(width * 0.0421) : setBaseFontSize(16);
-            return;
-        }
-        // const cellWidth = width / cols;
-        var cellWidth = 50;
-        setRowHeight(cellWidth * 0.56);
-        responsiveFontMode ? setBaseFontSize(width * 0.0133) : setBaseFontSize(16);
-    };
-    var padding = (0, parseSectionPadding_1.default)(CB_LAYOUT_PROP_PADDING, device);
-    var breakpoints = device === 'DESKTOP' ? { lg: 100, sm: 0 } : { lg: 1200, sm: 480 };
-    var innerRef = (0, react_1.useRef)(null);
-    var clickOneCBInBulk = function (id) {
-        var _a, _b;
-        var blockId = (0, group_1.formatCbIdToBlockId)(id);
-        if (shortcutKeyMode === 'COLLISION_SELECT') {
-            return;
-        }
-        if (shortcutKeyMode === 'BULK_SELECT') {
-            if (bulkBlockIds.length <= 2) {
-                var oneLastBlockId = bulkBlockIds.filter(function (each) { return each !== blockId; })[0];
-                setBulkBlockIds([]);
-                if (!oneLastBlockId) {
-                    return;
-                }
-                var cbId = (0, group_1.formatBlockIdToCbId)(oneLastBlockId);
-                if (!cbId) {
-                    return;
-                }
-                setSelectedBlockId(oneLastBlockId);
-                compositionActionHandler &&
-                    compositionActionHandler({
-                        type: '@COMPOSITION/BLOCK_CLICKED',
-                        payload: {
-                            block: {
-                                blockId: oneLastBlockId,
-                                cbId: cbId,
-                                type: 'COMPONENT_BLOCK',
-                                workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
-                            }
-                        }
-                    });
-                return;
-            }
-            var filtered = bulkBlockIds.filter(function (each) { return each !== blockId; });
-            setBulkBlockIds(filtered);
-            var groupDisabled = getWorkDirDirectChildrenLength() === filtered.length;
-            var newBulkCBIds = filtered
-                .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
-                .filter(function (each) { return each !== null; });
-            compositionActionHandler &&
-                compositionActionHandler({
-                    type: '@COMPOSITION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            type: 'BULK',
-                            blockId: 'BULK',
-                            childrenBlockIds: filtered,
-                            workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : 'NOT-FOUND',
-                            childrenCBIds: newBulkCBIds,
-                            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-                        }
-                    }
-                });
-        }
-    };
-    var showSectionHiddenCover = (function () {
-        if (mode === 'EDIT') {
-            var visibilityKey = device === 'DESKTOP'
-                ? 'CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP'
-                : 'CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB';
-            // const isSectionVisible = jsonProperties?.CB_CONTENT_PROP_VISIBILITY[visibilityKey];
-            // 가시성 상태를 반전하여 숨겨진 커버를 표시할지 결정
-            // const shouldShowHiddenCover = !isSectionVisible;
-            // return shouldShowHiddenCover;
-        }
-        return false;
-    })();
-    var onDoubleClickGroup = function (e, id) {
-        e.stopPropagation();
-        if (id === 'BULK') {
-            return;
-        }
-        setEditingGroupBlock(id);
-    };
-    var onDoubleClickOutsideGroup = function () {
-        setEditingGroupBlock('ROOT');
-        setSelectedBlockId(null);
-    };
-    var onClickGroup = function (e, id) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        e.stopPropagation();
-        if (id === 'BULK') {
-            return;
-        }
-        if (editingGroupBlock === id && shortcutKeyMode === 'BULK_SELECT') {
-            return;
-        }
-        if (bulkBlockIds.includes(id) && shortcutKeyMode === 'BULK_SELECT') {
-            if (bulkBlockIds.length <= 2) {
-                var oneLastBlockId = bulkBlockIds.filter(function (each) { return each !== id; })[0];
-                setBulkBlockIds([]);
-                setSelectedBlockId(oneLastBlockId);
-                compositionActionHandler &&
-                    compositionActionHandler({
-                        type: '@COMPOSITION/BLOCK_CLICKED',
-                        payload: {
-                            block: {
-                                blockId: oneLastBlockId,
-                                type: 'GROUP_BLOCK',
-                                workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
-                                childrenBlockIds: (_b = (0, group_1.findDirectChildrenBlockIds)(newblock, oneLastBlockId)) !== null && _b !== void 0 ? _b : [],
-                                childrenCBIds: (_c = (0, group_1.findDirectChildrenCbIds)(newblock, oneLastBlockId)) !== null && _c !== void 0 ? _c : []
-                            }
-                        }
-                    });
-                return;
-            }
-            var newBulkBlockIds_1 = bulkBlockIds.filter(function (each) { return each !== id; });
-            var newBulkCBIds_1 = newBulkBlockIds_1
-                .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
-                .filter(function (each) { return each !== null; });
-            var childrenCBIds_1 = [];
-            if (newBulkCBIds_1.length === 0) {
-                var oneCB = (0, group_1.findOneComponentBlock)(newblock, newBulkBlockIds_1[0]);
-                childrenCBIds_1 = oneCB ? [oneCB] : [];
-            }
-            else {
-                childrenCBIds_1 = newBulkCBIds_1;
-            }
-            setBulkBlockIds(newBulkBlockIds_1);
-            var groupDisabled = getWorkDirDirectChildrenLength() === newBulkBlockIds_1.length;
-            compositionActionHandler &&
-                compositionActionHandler({
-                    type: '@COMPOSITION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            blockId: 'BULK',
-                            type: 'BULK',
-                            childrenBlockIds: newBulkBlockIds_1,
-                            childrenCBIds: childrenCBIds_1,
-                            workDir: (_d = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _d !== void 0 ? _d : 'NOT-FOUND',
-                            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-                        }
-                    }
-                });
-            return;
-        }
-        if (shortcutKeyMode === 'BULK_SELECT') {
-            var added = (function () {
-                if (selectedBlockId === editingGroupBlock) {
-                    return [id];
-                }
-                return selectedBlockId ? [selectedBlockId, id] : [id];
-            })();
-            if (bulkBlockIds.length === 0 && added.length === 1) {
-                setSelectedBlockId(id);
-                setBulkBlockIds([]);
-                compositionActionHandler &&
-                    compositionActionHandler({
-                        type: '@COMPOSITION/BLOCK_CLICKED',
-                        payload: {
-                            block: {
-                                blockId: id,
-                                type: 'GROUP_BLOCK',
-                                workDir: (_e = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _e !== void 0 ? _e : 'NOT-FOUND',
-                                childrenBlockIds: (_f = (0, group_1.findDirectChildrenBlockIds)(newblock, id)) !== null && _f !== void 0 ? _f : [],
-                                childrenCBIds: (_g = (0, group_1.findDirectChildrenCbIds)(newblock, id)) !== null && _g !== void 0 ? _g : []
-                            }
-                        }
-                    });
-                return;
-            }
-            var newBulkBlockIds_2 = Array.from(new Set(__spreadArray(__spreadArray([], bulkBlockIds, true), added, true)));
-            var newBulkCBIds_2 = newBulkBlockIds_2
-                .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
-                .filter(function (each) { return each !== null; });
-            setBulkBlockIds(newBulkBlockIds_2);
-            setSelectedBlockId(null);
-            var childrenCBIds_2 = [];
-            if (newBulkCBIds_2.length === 0) {
-                var oneCB = (0, group_1.findOneComponentBlock)(newblock, newBulkBlockIds_2[0]);
-                childrenCBIds_2 = oneCB ? [oneCB] : [];
-            }
-            else {
-                childrenCBIds_2 = newBulkCBIds_2;
-            }
-            var groupDisabled = getWorkDirDirectChildrenLength() === newBulkBlockIds_2.length;
-            compositionActionHandler &&
-                compositionActionHandler({
-                    type: '@COMPOSITION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            blockId: 'BULK',
-                            type: 'BULK',
-                            childrenBlockIds: newBulkBlockIds_2,
-                            childrenCBIds: childrenCBIds_2,
-                            workDir: (_h = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _h !== void 0 ? _h : 'NOT-FOUND',
-                            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-                        }
-                    }
-                });
-            return;
-        }
-        setBulkBlockIds([]);
-        setSelectedBlockId(id);
-        var newBulkBlockIds = (0, group_1.findDirectChildrenBlockIds)(newblock, id);
-        var newBulkCBIds = newBulkBlockIds
-            .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
-            .filter(function (each) { return each !== null; });
-        var childrenCBIds = [];
-        if (newBulkCBIds.length === 0) {
-            var oneCB = (0, group_1.findOneComponentBlock)(newblock, newBulkBlockIds[0]);
-            childrenCBIds = oneCB ? [oneCB] : [];
-        }
-        else {
-            childrenCBIds = newBulkCBIds;
-        }
-        compositionActionHandler &&
-            compositionActionHandler({
-                type: '@COMPOSITION/BLOCK_CLICKED',
-                payload: {
-                    block: {
-                        blockId: id,
-                        type: 'GROUP_BLOCK',
-                        workDir: (_j = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _j !== void 0 ? _j : 'NOT-FOUND',
-                        childrenBlockIds: newBulkBlockIds,
-                        childrenCBIds: childrenCBIds
-                    }
-                }
-            });
-    };
-    var onBulkDragStop = function (_a) {
-        var _b;
-        var updatedItems = _a.updatedItems, item = _a.item;
-        if ((item === null || item === void 0 ? void 0 : item.i) === 'BULK') {
-            compositionActionHandler &&
-                compositionActionHandler({
-                    type: '@COMPOSITION/BULK_DRAG_STOP',
-                    payload: {
-                        updatedBlocks: updatedItems.map(function (i) { return ({
-                            cbId: Number(i.id),
-                            blockId: (0, group_1.formatCbIdToBlockId)(Number(i.id)),
-                            x: i.x,
-                            y: i.y
-                        }); })
-                    }
-                });
-            return;
-        }
-        if (item) {
-            compositionActionHandler &&
-                compositionActionHandler({
-                    type: '@COMPOSITION/GROUP_DRAG_STOP',
-                    payload: {
-                        workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, item.i)) !== null && _b !== void 0 ? _b : 'NOT-FOUND',
-                        updatedBlocks: updatedItems.map(function (i) { return ({
-                            cbId: Number(i.id),
-                            blockId: (0, group_1.formatCbIdToBlockId)(Number(i.id)),
-                            x: i.x,
-                            y: i.y
-                        }); })
-                    }
-                });
-        }
-    };
-    (0, react_1.useLayoutEffect)(function () {
-        if (innerRef.current) {
-            innerRef.current.setAttribute('data-section-id', props.compositionData.id.toString());
-        }
-    }, []);
-    function getWorkDirDirectChildrenLength() {
-        var ids = (0, group_1.findDirectChildrenBlockIds)(newblock, editingGroupBlock).filter(function (each) { return each !== 'BULK'; });
-        return ids.length + bulkBlockIds.length;
-    }
-    var editableCBIDs = (0, group_1.findDirectChildrenCbIds)(newblock, editingGroupBlock);
-    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
-                device: device
-                // mode,
-                // isPreview,
-                // navigationHandler,
-                // sectionActionHandler,
-                // editingSectionId,
-                // programmedSectionComponents,
-                // shortcutKeyMode,
-                // zoomScale,
-                // queryData
-            } }, { children: (0, jsx_runtime_1.jsx)(gleStyles_1.S_gleStyles, __assign({ isBulkMode: shortcutKeyMode === 'BULK_SELECT' }, { children: (0, jsx_runtime_1.jsx)(S_COMPOSITIONWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection, onContextMenu: function (e) {
-                        e.stopPropagation();
-                        e.preventDefault();
-                        onContextSection(e);
-                    } }, { children: (0, jsx_runtime_1.jsx)(CompositionBackground_1.default, __assign({}, props.compositionData, { isMobile: isMobile, overrideStyles: {
-                            minHeight: customSectionStyles.minHeight,
-                            paddingTop: padding.top,
-                            paddingBottom: padding.bottom,
-                            paddingRight: padding.right,
-                            paddingLeft: padding.left
-                        } }, { children: (0, jsx_runtime_1.jsx)(Responsive, __assign({ sectionId: props.compositionData.id.toString(), innerRef: innerRef, className: (0, clsx_1.clsx)({
-                                'selected-grid-layout': editingSectionId === props.compositionData.id
-                            }), allowOverlap: true, layouts: layouts, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: breakpoints, breakpoint: breakpoint, cols: { lg: colsDesktop, sm: colsMobile }, rowHeight: rowHeight, margin: [10, 10], style: {
-                                width: customSectionStyles.width,
-                                maxWidth: customSectionStyles.maxWidth,
-                                // minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
-                                fontSize: "".concat(baseFontSize, "px")
-                            }, onLayoutChange: onLayoutChange, onDragStart: onDragStart, onDragStop: onDragStop, onResizeStop: onResizeStop, onDragStopForGroup: onBulkDragStop, onFitToContent: onAutoFitContent, onWidthChange: onWidthChange, minNbRow: rows, isDraggable: isEditMode, isResizable: isEditMode, zoom: props.editorProps.zoomScale, 
-                            // GROUP
-                            selectedGroupBlock: (_d = selectedBlockId === null || selectedBlockId === void 0 ? void 0 : selectedBlockId.toString()) !== null && _d !== void 0 ? _d : 'ROOT', editingGroupBlock: editingGroupBlock, blockStructure: newblock, bulkIds: bulkBlockIds, onDoubleClickGroup: onDoubleClickGroup, onClickGroup: onClickGroup, onDoubleClickOutsideGroup: onDoubleClickOutsideGroup, onContextGroup: onContextGroup }, { children: layouts[layoutByDevice].map(function (each, index) {
-                                var matchedCB = componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.find(function (cb) { return cb.id.toString() === each.i; });
-                                var isInBulk = bulkBlockIds.includes((0, group_1.formatCbIdToBlockId)(Number(each.i)));
-                                if (!matchedCB) {
-                                    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-                                }
-                                return ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, clsx_1.clsx)({
-                                        'react-grid-item-selected': selectedBlockId === (0, group_1.formatCbIdToBlockId)(matchedCB.id)
-                                    }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, clsx_1.clsx)({
-                                            'grid-item-child': true
-                                        }), style: {
-                                            width: '100%',
-                                            height: '100%'
-                                        }, onClick: function (e) {
-                                            e.stopPropagation();
-                                            if (isInBulk) {
-                                                clickOneCBInBulk(matchedCB.id);
-                                                return;
-                                            }
-                                            if (editingGroupBlock !== 'ROOT') {
-                                                if (!editableCBIDs.includes(matchedCB.id)) {
-                                                    e.preventDefault();
-                                                    return;
-                                                }
-                                            }
-                                            onClickCB(matchedCB.id);
-                                        }, onContextMenu: function (e) {
-                                            e.stopPropagation();
-                                            e.preventDefault();
-                                            onContextMenuCB(matchedCB.id, e);
-                                        } }, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { cbProps: matchedCB, device: device, rowHeight: rowHeight, index: index }) }) })) }), each.i));
-                            }) })) })) })) })) })) }));
-});
-function isLayoutPlacementSame(current, prev) {
-    if (!prev) {
-        return false;
-    }
-    return (prev.w === current.w &&
-        prev.h === current.h &&
-        prev.x === current.x &&
-        prev.y === current.y &&
-        prev.z === current.z &&
-        prev.i === current.i);
-}
-var S_COMPOSITIONWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-exports.default = react_1.default.memo(CompositionEditor);
-var templateObject_1;