@cntrl-site/sdk-nextjs 1.6.10 → 1.6.11-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -24,7 +24,7 @@ const useItemPointerEvents_1 = require("../useItemPointerEvents");
24
24
  const useItemArea_1 = require("../useItemArea");
25
25
  const noop = () => null;
26
26
  const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
27
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
27
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
28
28
  const id = (0, react_1.useId)();
29
29
  const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
30
30
  const layout = (0, useLayoutContext_1.useLayoutContext)();
@@ -33,13 +33,14 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
33
33
  const itemScale = (0, useItemScale_1.useItemScale)(item, sectionId);
34
34
  const interactionCtrl = (0, useItemInteractionCtrl_1.useItemInteractionCtrl)(item.id);
35
35
  const triggers = (0, useItemTriggers_1.useItemTriggers)(interactionCtrl);
36
- const stateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['top', 'left', 'width', 'height', 'scale']);
36
+ const wrapperStateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['top', 'left', 'width', 'height']);
37
+ const innerStateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['scale']);
37
38
  const compoundSettings = layout && item.compoundSettings ? item.compoundSettings[layout] : undefined;
38
39
  const { width, height, top, left } = (0, useItemArea_1.useItemArea)(item, sectionId, {
39
- top: (_c = stateProps === null || stateProps === void 0 ? void 0 : stateProps.styles) === null || _c === void 0 ? void 0 : _c.top,
40
- left: (_d = stateProps === null || stateProps === void 0 ? void 0 : stateProps.styles) === null || _d === void 0 ? void 0 : _d.left,
41
- width: (_e = stateProps === null || stateProps === void 0 ? void 0 : stateProps.styles) === null || _e === void 0 ? void 0 : _e.width,
42
- height: (_f = stateProps === null || stateProps === void 0 ? void 0 : stateProps.styles) === null || _f === void 0 ? void 0 : _f.height
40
+ top: (_c = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _c === void 0 ? void 0 : _c.top,
41
+ left: (_d = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _d === void 0 ? void 0 : _d.left,
42
+ width: (_e = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _e === void 0 ? void 0 : _e.width,
43
+ height: (_f = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _f === void 0 ? void 0 : _f.height
43
44
  });
44
45
  const isInitialRef = (0, react_1.useRef)(true);
45
46
  const sizingAxis = (0, useSizing_1.useSizing)(item);
@@ -49,7 +50,7 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
49
50
  }, []);
50
51
  const transformOrigin = compoundSettings ? ScaleAnchorMap_1.ScaleAnchorMap[compoundSettings.positionAnchor] : 'top left';
51
52
  const isRichText = (0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.RichText);
52
- const scale = (_h = (_g = stateProps === null || stateProps === void 0 ? void 0 : stateProps.styles) === null || _g === void 0 ? void 0 : _g.scale) !== null && _h !== void 0 ? _h : itemScale;
53
+ const scale = (_h = (_g = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _g === void 0 ? void 0 : _g.scale) !== null && _h !== void 0 ? _h : itemScale;
53
54
  const hasClickTriggers = (_j = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getHasTrigger(item.id, 'click')) !== null && _j !== void 0 ? _j : false;
54
55
  if (!item.compoundSettings)
55
56
  return null;
@@ -69,7 +70,7 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
69
70
  ? { height: `${sizingAxis.y === 'manual'
70
71
  ? (0, getCompoundBondaryStyles_1.getCompoundHeight)(compoundSettings, height)
71
72
  : 'unset'}` }
72
- : {})), (compoundSettings ? { transform: `${(0, getCompoundBondaryStyles_1.getCompoundTransform)(compoundSettings)}` } : {})), { transition: (_k = stateProps === null || stateProps === void 0 ? void 0 : stateProps.transition) !== null && _k !== void 0 ? _k : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }) }, triggers, { children: [(0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: Object.assign({}, (scale !== undefined ? { transform: `scale(${scale})` } : {})), children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, transformOrigin: transformOrigin, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
73
+ : {})), (compoundSettings ? { transform: `${(0, getCompoundBondaryStyles_1.getCompoundTransform)(compoundSettings)}` } : {})), { transition: (_k = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _k !== void 0 ? _k : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }) }, triggers, { children: [(0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: Object.assign({ transition: (_l = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _l !== void 0 ? _l : 'none' }, (scale !== undefined ? { transform: `scale(${scale})` } : {})), children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, transformOrigin: transformOrigin, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange, isInCompound: true }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
73
74
  ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, compoundSettings, layoutParams]) => {
74
75
  const sizingAxis = (0, useSizing_1.parseSizing)(layoutParams.sizing);
75
76
  const scaleAnchor = area.scaleAnchor;
@@ -15,7 +15,8 @@ const useCntrlContext_1 = require("../../../provider/useCntrlContext");
15
15
  const useItemAngle_1 = require("../useItemAngle");
16
16
  const useGroupItem_1 = require("./useGroupItem");
17
17
  const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
18
- const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
18
+ const CompoundChild_1 = require("../CompoundItem/CompoundChild");
19
+ const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange, isInCompound }) => {
19
20
  var _a, _b, _c, _d, _e, _f;
20
21
  const id = (0, react_1.useId)();
21
22
  const { items } = item;
@@ -33,7 +34,7 @@ const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
33
34
  (0, react_1.useEffect)(() => {
34
35
  onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
35
36
  }, [isInteractive, onVisibilityChange]);
36
- return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_d = item.link) === null || _d === void 0 ? void 0 : _d.url, target: (_e = item.link) === null || _e === void 0 ? void 0 : _e.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_f = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _f !== void 0 ? _f : 'none' }), children: items && items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, isParentVisible: isInteractive, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
37
+ return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_d = item.link) === null || _d === void 0 ? void 0 : _d.url, target: (_e = item.link) === null || _e === void 0 ? void 0 : _e.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_f = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _f !== void 0 ? _f : 'none' }), children: items && items.map(item => isInCompound ? ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { item: item, sectionId: sectionId, isParentVisible: isInteractive }, item.id)) : ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, isParentVisible: isInteractive, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
37
38
  .group-${item.id} {
38
39
  position: absolute;
39
40
  width: 100%;
@@ -1,15 +1,4 @@
1
1
  "use strict";
2
- var __rest = (this && this.__rest) || function (s, e) {
3
- var t = {};
4
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
5
- t[p] = s[p];
6
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
7
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
8
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
9
- t[p[i]] = s[p[i]];
10
- }
11
- return t;
12
- };
13
2
  Object.defineProperty(exports, "__esModule", { value: true });
14
3
  exports.InteractionsRegistry = void 0;
15
4
  const sdk_1 = require("@cntrl-site/sdk");
@@ -204,22 +193,26 @@ class InteractionsRegistry {
204
193
  }
205
194
  }
206
195
  unpackItems(article) {
207
- var _a;
208
196
  const itemsArr = [];
209
197
  for (const section of article.sections) {
210
- for (const item of section.items) {
211
- const { items } = item, itemWithoutChildren = __rest(item, ["items"]);
212
- itemsArr.push(itemWithoutChildren);
213
- if ((0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.Group) || (0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.Compound)) {
214
- const groupChildren = (_a = item === null || item === void 0 ? void 0 : item.items) !== null && _a !== void 0 ? _a : [];
215
- for (const child of groupChildren) {
216
- itemsArr.push(child);
217
- }
218
- }
219
- }
198
+ const items = this.getNestedItems(section.items);
199
+ itemsArr.push(...items);
220
200
  }
221
201
  return itemsArr;
222
202
  }
203
+ getNestedItems(items) {
204
+ var _a;
205
+ const allItems = [];
206
+ for (const item of items) {
207
+ if ((0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.Group) || (0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.Compound)) {
208
+ const groupChildren = (_a = item === null || item === void 0 ? void 0 : item.items) !== null && _a !== void 0 ? _a : [];
209
+ const nestedItems = this.getNestedItems(groupChildren);
210
+ allItems.push(...nestedItems);
211
+ }
212
+ allItems.push(item);
213
+ }
214
+ return allItems;
215
+ }
223
216
  getDefaultItemStages() {
224
217
  const timestamp = Date.now();
225
218
  const { items, layoutId } = this;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.6.10",
3
+ "version": "1.6.11-alpha.1",
4
4
  "description": "SDK for Next.js",
5
5
  "author": "arsen@momdesign.nyc",
6
6
  "license": "MIT",
@@ -47,13 +47,14 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
47
47
  const itemScale = useItemScale(item, sectionId);
48
48
  const interactionCtrl = useItemInteractionCtrl(item.id);
49
49
  const triggers = useItemTriggers(interactionCtrl);
50
- const stateProps = interactionCtrl?.getState(['top', 'left', 'width', 'height', 'scale']);
50
+ const wrapperStateProps = interactionCtrl?.getState(['top', 'left', 'width', 'height']);
51
+ const innerStateProps = interactionCtrl?.getState(['scale']);
51
52
  const compoundSettings = layout && item.compoundSettings ? item.compoundSettings[layout] : undefined;
52
53
  const { width, height, top, left } = useItemArea(item, sectionId, {
53
- top: stateProps?.styles?.top as number,
54
- left: stateProps?.styles?.left as number,
55
- width: stateProps?.styles?.width as number,
56
- height: stateProps?.styles?.height as number
54
+ top: wrapperStateProps?.styles?.top as number,
55
+ left: wrapperStateProps?.styles?.left as number,
56
+ width: wrapperStateProps?.styles?.width as number,
57
+ height: wrapperStateProps?.styles?.height as number
57
58
  });
58
59
  const isInitialRef = useRef(true);
59
60
  const sizingAxis = useSizing(item);
@@ -65,7 +66,7 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
65
66
 
66
67
  const transformOrigin = compoundSettings ? ScaleAnchorMap[compoundSettings.positionAnchor] : 'top left';
67
68
  const isRichText = isItemType(item, ArticleItemType.RichText);
68
- const scale = stateProps?.styles?.scale ?? itemScale;
69
+ const scale = innerStateProps?.styles?.scale ?? itemScale;
69
70
  const hasClickTriggers = interactionCtrl?.getHasTrigger(item.id, 'click') ?? false;
70
71
  if (!item.compoundSettings) return null;
71
72
  const layoutValues: Record<string, any>[] = [item.area, item.hidden, item.compoundSettings];
@@ -83,41 +84,44 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
83
84
  ...(top !== undefined && compoundSettings ? { top: getCompoundTop(compoundSettings, top) } : {}),
84
85
  ...(left !== undefined && compoundSettings ? { left: getCompoundLeft(compoundSettings, left) } : {}),
85
86
  ...(width !== undefined && compoundSettings
86
- ? { width: `${sizingAxis.x === 'manual'
87
- ? getCompoundWidth(compoundSettings, width, isRichText, exemplary)
87
+ ? { width: `${sizingAxis.x === 'manual'
88
+ ? getCompoundWidth(compoundSettings, width, isRichText, exemplary)
88
89
  : 'max-content'}` }
89
90
  : {}),
90
91
  ...(height !== undefined && compoundSettings
91
- ? { height: `${sizingAxis.y === 'manual'
92
- ? getCompoundHeight(compoundSettings, height)
92
+ ? { height: `${sizingAxis.y === 'manual'
93
+ ? getCompoundHeight(compoundSettings, height)
93
94
  : 'unset'}` }
94
95
  : {}),
95
96
  ...(compoundSettings ? { transform: `${getCompoundTransform(compoundSettings)}` } : {}),
96
- transition: stateProps?.transition ?? 'none',
97
+ transition: wrapperStateProps?.transition ?? 'none',
97
98
  cursor: hasClickTriggers ? 'pointer' : 'unset',
98
99
  pointerEvents: allowPointerEvents ? 'auto' : 'none'
99
100
  }}
100
101
  {...triggers}
101
102
  >
102
- <div className={`item-${item.id}-inner`}
103
+ <div
104
+ className={`item-${item.id}-inner`}
103
105
  style={{
106
+ transition: innerStateProps?.transition ?? 'none',
104
107
  ...(scale !== undefined ? { transform: `scale(${scale})` } : {}),
105
108
  }}
106
109
  >
107
- <RichTextWrapper isRichText={isRichText} transformOrigin={transformOrigin}>
108
- <ItemComponent
109
- item={item}
110
- sectionId={sectionId}
111
- interactionCtrl={interactionCtrl}
112
- onVisibilityChange={handleVisibilityChange}
113
- />
114
- </RichTextWrapper>
110
+ <RichTextWrapper isRichText={isRichText} transformOrigin={transformOrigin}>
111
+ <ItemComponent
112
+ item={item}
113
+ sectionId={sectionId}
114
+ interactionCtrl={interactionCtrl}
115
+ onVisibilityChange={handleVisibilityChange}
116
+ isInCompound
117
+ />
118
+ </RichTextWrapper>
115
119
  </div>
116
120
  <JSXStyle id={id}>{`
117
121
  ${getLayoutStyles(layouts, layoutValues, ([area, hidden, compoundSettings, layoutParams]) => {
118
- const sizingAxis = parseSizing(layoutParams.sizing);
119
- const scaleAnchor = area.scaleAnchor as AreaAnchor;
120
- return (`
122
+ const sizingAxis = parseSizing(layoutParams.sizing);
123
+ const scaleAnchor = area.scaleAnchor as AreaAnchor;
124
+ return (`
121
125
  .item-${item.id}-inner {
122
126
  width: 100%;
123
127
  height: 100%;
@@ -131,15 +135,16 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
131
135
  transition: opacity 0.2s linear 0.1s;
132
136
  display: ${hidden ? 'none' : 'block'};
133
137
  width: ${sizingAxis.x === 'manual'
134
- ? `${getCompoundWidth(compoundSettings, area.width, isRichText)}`
135
- : 'max-content'};
138
+ ? `${getCompoundWidth(compoundSettings, area.width, isRichText)}`
139
+ : 'max-content'};
136
140
  height: ${sizingAxis.y === 'manual' ? `${getCompoundHeight(compoundSettings, area.height)}` : 'unset'};
137
141
  transform: ${getCompoundTransform(compoundSettings)};
138
142
  z-index: ${area.zIndex};
139
143
  }
140
144
  `);
141
- })}
142
- `}</JSXStyle>
145
+ })}
146
+ `}
147
+ </JSXStyle>
143
148
  </div>
144
149
  );
145
150
  };
@@ -8,8 +8,9 @@ import { useCntrlContext } from '../../../provider/useCntrlContext';
8
8
  import { useItemAngle } from '../useItemAngle';
9
9
  import { useGroupItem } from './useGroupItem';
10
10
  import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
11
+ import { CompoundChild } from '../CompoundItem/CompoundChild';
11
12
 
12
- export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
13
+ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange, isInCompound }) => {
13
14
  const id = useId();
14
15
  const { items } = item;
15
16
  const itemAngle = useItemAngle(item, sectionId);
@@ -39,7 +40,14 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
39
40
  transition: stateParams?.transition ?? 'none'
40
41
  }}
41
42
  >
42
- {items && items.map(item => (
43
+ {items && items.map(item => isInCompound ? (
44
+ <CompoundChild
45
+ item={item}
46
+ key={item.id}
47
+ sectionId={sectionId}
48
+ isParentVisible={isInteractive}
49
+ />
50
+ ) : (
43
51
  <Item
44
52
  item={item}
45
53
  key={item.id}
@@ -57,13 +65,13 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
57
65
  box-sizing: border-box;
58
66
  }
59
67
  ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
60
- return (`
68
+ return (`
61
69
  .group-${item.id} {
62
70
  opacity: ${layoutParams.opacity};
63
71
  transform: rotate(${area.angle}deg);
64
72
  }
65
73
  `);
66
- })}
74
+ })}
67
75
  `}</JSXStyle>
68
76
  </>
69
77
  </LinkWrapper>
@@ -43,6 +43,7 @@ export interface ItemProps<I extends ItemAny> {
43
43
  onResize?: (height: number) => void;
44
44
  interactionCtrl?: ReturnType<typeof useItemInteractionCtrl>;
45
45
  onVisibilityChange: (isVisible: boolean) => void;
46
+ isInCompound?: boolean;
46
47
  }
47
48
 
48
49
  export interface ItemWrapperProps {
@@ -107,7 +108,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
107
108
  if (!item) return;
108
109
  if (drag) {
109
110
  setIsDraggingActive(true);
110
- setPosition({
111
+ setPosition({
111
112
  x: (currentX - startX) + lastX,
112
113
  y: (currentY - startY) + lastY
113
114
  });
@@ -183,12 +184,12 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
183
184
  : {}),
184
185
  ...(scale !== undefined ? { transform: `scale(${scale})`, WebkitTransform: `scale(${scale})` } : {}),
185
186
  transition: innerStateProps?.transition ?? 'none',
186
- cursor: isDraggingActive
187
- ? 'grabbing'
188
- : isDraggable
187
+ cursor: isDraggingActive
188
+ ? 'grabbing'
189
+ : isDraggable
189
190
  ? 'grab'
190
- : hasClickTriggers
191
- ? 'pointer'
191
+ : hasClickTriggers
192
+ ? 'pointer'
192
193
  : 'unset',
193
194
  pointerEvents: allowPointerEvents ? 'auto' : 'none',
194
195
  userSelect: isDraggable ? 'none' : 'unset',
@@ -206,20 +206,25 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
206
206
  private unpackItems(article: Article): ItemAny[] {
207
207
  const itemsArr = [];
208
208
  for (const section of article.sections) {
209
- for (const item of section.items) {
210
- const { items, ...itemWithoutChildren } = item;
211
- itemsArr.push(itemWithoutChildren);
212
- if (isItemType(item, ArticleItemType.Group) || isItemType(item, ArticleItemType.Compound)) {
213
- const groupChildren = item?.items ?? [];
214
- for (const child of groupChildren) {
215
- itemsArr.push(child);
216
- }
217
- }
218
- }
209
+ const items = this.getNestedItems(section.items);
210
+ itemsArr.push(...items);
219
211
  }
220
212
  return itemsArr;
221
213
  }
222
214
 
215
+ private getNestedItems(items: ItemAny[]): ItemAny[] {
216
+ const allItems: ItemAny[] = [];
217
+ for (const item of items) {
218
+ if (isItemType(item, ArticleItemType.Group) || isItemType(item, ArticleItemType.Compound)) {
219
+ const groupChildren = item?.items ?? [];
220
+ const nestedItems = this.getNestedItems(groupChildren);
221
+ allItems.push(...nestedItems);
222
+ }
223
+ allItems.push(item);
224
+ }
225
+ return allItems;
226
+ }
227
+
223
228
  private getDefaultItemStages(): ItemStages {
224
229
  const timestamp = Date.now();
225
230
  const { items, layoutId } = this;
@@ -1,5 +0,0 @@
1
- <component name="ProjectCodeStyleConfiguration">
2
- <state>
3
- <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
4
- </state>
5
- </component>
@@ -1,15 +0,0 @@
1
- <component name="InspectionProjectProfileManager">
2
- <profile version="1.0">
3
- <option name="myName" value="Project Default" />
4
- <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
5
- <option name="myValues">
6
- <value>
7
- <list size="1">
8
- <item index="0" class="java.lang.String" itemvalue="jsx" />
9
- </list>
10
- </value>
11
- </option>
12
- <option name="myCustomValuesEnabled" value="true" />
13
- </inspection_tool>
14
- </profile>
15
- </component>