pds-dev-kit-web-test 2.5.317 → 2.5.319

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

@@ -0,0 +1,1115 @@
+"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");
+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"));
+var Section_1 = require("../components/Section");
+var ComponentBlockMatcher_1 = __importDefault(require("../CompositionRenderer/ComponentBlockMatcher"));
+var S_HiddenCover_1 = 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 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, _e, _f;
+    var _g = props.editorProps, device = _g.device, shortcutKeyMode = _g.shortcutKeyMode, compositionActionHandler = _g.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 _h = props.compositionData, componentBlocks = _h.componentBlocks, jsonProperties = _h.jsonProperties;
+    var sectionPedigree = jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.pedigree;
+    var _j = (0, react_1.useState)(sectionPedigree), pedigreeState = _j[0], setPedigreeState = _j[1];
+    (0, react_1.useEffect)(function () {
+        setPedigreeState(sectionPedigree);
+    }, [sectionPedigree]);
+    var _k = jsonProperties, _l = _k.data, CB_PLACEMENT_PROP_SECTION = _l.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _l.CB_LAYOUT_PROP_PADDING, CB_CONTENT_PROP_SECTION = _l.CB_CONTENT_PROP_SECTION, zOrders = _k.zOrders;
+    var _m = (0, react_1.useState)(null), selectedBlockId = _m[0], setSelectedBlockId = _m[1];
+    var gleRef = (0, react_1.useRef)(null);
+    var _o = (0, react_1.useState)(50), rowHeight = _o[0], setRowHeight = _o[1];
+    var _p = (0, react_1.useState)(16), baseFontSize = _p[0], setBaseFontSize = _p[1];
+    var isMobile = device === 'MOBILE';
+    var isEditMode = mode === 'EDIT';
+    var layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
+    var colsDesktop = (_a = CB_PLACEMENT_PROP_SECTION.CB_PLACEMENT_PROP_SECTION_SPEC_COLS) !== null && _a !== void 0 ? _a : 24;
+    var colsMobile = (_b = CB_PLACEMENT_PROP_SECTION['CB_PLACEMENT_PROP_SECTION_SPEC_COLS:MOBILE']) !== null && _b !== void 0 ? _b : 8;
+    var rowsDesktop = (_c = CB_PLACEMENT_PROP_SECTION.CB_PLACEMENT_PROP_SECTION_SPEC_ROWS) !== null && _c !== void 0 ? _c : 26;
+    var rowsMobile = (_d = CB_PLACEMENT_PROP_SECTION['CB_PLACEMENT_PROP_SECTION_SPEC_ROWS:MOBILE']) !== null && _d !== void 0 ? _d : 26;
+    var rows = isMobile ? rowsMobile : rowsDesktop;
+    var cols = isMobile ? colsMobile : colsDesktop;
+    var canvasWidth = 50 * cols;
+    var _q = (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 = _q[0], setLayouts = _q[1];
+    var _r = (0, react_1.useState)('ROOT'), editingGroupBlock = _r[0], setEditingGroupBlock = _r[1];
+    var _s = (0, react_1.useState)([]), bulkBlockIds = _s[0], setBulkBlockIds = _s[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 = (_e = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _e !== void 0 ? _e : '/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 _t = (0, util_1.parseCustomSectionPlacement)({
+        isMobile: isMobile,
+        customSectionProps: CB_PLACEMENT_PROP_SECTION
+    }), minHeight = _t.minHeight, isFullWidth = _t.isFullWidth;
+    var customSectionStyles = {
+        minHeight: "".concat(minHeight, "vh"),
+        width: "".concat(canvasWidth, "px"),
+        maxWidth: isFullWidth ? '' : "".concat(canvasWidth, "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/SECTION_RIGHT_CLICKED',
+                payload: {
+                    sectionId: props.compositionData.id,
+                    e: e
+                }
+            });
+    };
+    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/SECTION_RIGHT_CLICKED',
+                payload: {
+                    sectionId: props.compositionData.id,
+                    e: e
+                }
+            });
+    };
+    var onWidthChange = function (width) {
+        var responsiveFontMode = 
+        // NOTE: local환경에서 CB_CONTENT_PROP_SECTION이 없는 경우가 있음.
+        !!(CB_CONTENT_PROP_SECTION === null || CB_CONTENT_PROP_SECTION === void 0 ? void 0 : CB_CONTENT_PROP_SECTION.CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE);
+        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';
+            var isSectionVisible = jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.data.CB_CONTENT_PROP_VISIBILITY[visibilityKey];
+            // 가시성 상태를 반전하여 숨겨진 커버를 표시할지 결정
+            var 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.jsxs)(gleStyles_1.S_gleStyles, __assign({ isBulkMode: shortcutKeyMode === 'BULK_SELECT' }, { children: [showSectionHiddenCover && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_SectionWrapper, __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)(Section_1.CustomSection, __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: (_f = selectedBlockId === null || selectedBlockId === void 0 ? void 0 : selectedBlockId.toString()) !== null && _f !== void 0 ? _f : '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_SectionWrapper = 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;