@flozy/editor 10.2.9 → 10.3.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.
Files changed (162) hide show
  1. package/dist/Editor/ChatEditor.js +16 -17
  2. package/dist/Editor/CommonEditor.js +14 -128
  3. package/dist/Editor/DialogWrapper.js +25 -31
  4. package/dist/Editor/Editor.css +8 -46
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +3 -11
  6. package/dist/Editor/Elements/Accordion/Accordion.js +7 -30
  7. package/dist/Editor/Elements/Accordion/AccordionSummary.js +23 -1
  8. package/dist/Editor/Elements/AppHeader/AppHeader.js +5 -10
  9. package/dist/Editor/Elements/Button/EditorButton.js +9 -27
  10. package/dist/Editor/Elements/Carousel/CarouselItem.js +1 -2
  11. package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -61
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  13. package/dist/Editor/Elements/Color Picker/ColorPicker.js +7 -10
  14. package/dist/Editor/Elements/Color Picker/Styles.js +13 -15
  15. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +2 -4
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +28 -30
  17. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +7 -9
  18. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +1 -0
  19. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +4 -8
  20. package/dist/Editor/Elements/Embed/Video.js +1 -1
  21. package/dist/Editor/Elements/Form/Form.js +3 -1
  22. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +1 -0
  23. package/dist/Editor/Elements/Form/FormField.js +2 -3
  24. package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
  25. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +30 -31
  26. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
  27. package/dist/Editor/Elements/FreeGrid/Options/More.js +7 -7
  28. package/dist/Editor/Elements/FreeGrid/styles.js +0 -14
  29. package/dist/Editor/Elements/Grid/Grid.js +2 -14
  30. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  31. package/dist/Editor/Elements/Signature/Signature.css +1 -2
  32. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +5 -18
  33. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +3 -16
  34. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  35. package/dist/Editor/Elements/Table/DragButton.js +1 -0
  36. package/dist/Editor/Elements/Table/Draggable.js +2 -6
  37. package/dist/Editor/Elements/Table/Styles.js +0 -7
  38. package/dist/Editor/Elements/Table/Table.js +3 -3
  39. package/dist/Editor/Elements/Table/TableCell.js +5 -24
  40. package/dist/Editor/Elements/Title/title.js +6 -6
  41. package/dist/Editor/Elements/Variables/VariableButton.js +1 -10
  42. package/dist/Editor/MiniEditor.js +1 -2
  43. package/dist/Editor/Styles/EditorStyles.js +5 -5
  44. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  45. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  46. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  47. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -10
  48. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  49. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +2 -4
  50. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
  51. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
  52. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -7
  53. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
  54. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -72
  55. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +10 -58
  56. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  57. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  58. package/dist/Editor/common/ColorPickerButton.js +16 -41
  59. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  60. package/dist/Editor/common/FontLoader/FontLoader.js +0 -3
  61. package/dist/Editor/common/Icon.js +0 -28
  62. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  63. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  64. package/dist/Editor/common/LinkSettings/NavComponents.js +65 -45
  65. package/dist/Editor/common/LinkSettings/index.js +26 -13
  66. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  67. package/dist/Editor/common/LinkSettings/style.js +244 -164
  68. package/dist/Editor/common/RnD/ElementOptions/Actions.js +5 -4
  69. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -2
  70. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +3 -4
  71. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  72. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  73. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  74. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  75. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
  76. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
  77. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  78. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
  79. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
  80. package/dist/Editor/common/RnD/ElementSettings/styles.js +1 -0
  81. package/dist/Editor/common/RnD/OptionsPopup/style.js +1 -0
  82. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +2 -11
  83. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  84. package/dist/Editor/common/RnD/Utils/gridDropItem.js +19 -28
  85. package/dist/Editor/common/RnD/Utils/index.js +1 -3
  86. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +58 -42
  87. package/dist/Editor/common/RnD/VirtualElement/helper.js +131 -321
  88. package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -16
  89. package/dist/Editor/common/RnD/index.js +11 -25
  90. package/dist/Editor/common/Select/index.js +7 -44
  91. package/dist/Editor/common/Select/styles.js +2 -30
  92. package/dist/Editor/common/Shorthands/elements.js +0 -54
  93. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  94. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +9 -12
  95. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  96. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -4
  97. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  98. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  99. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  100. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
  101. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
  102. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
  103. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
  104. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  105. package/dist/Editor/common/SwipeableDrawer/style.js +12 -14
  106. package/dist/Editor/common/Uploader.js +0 -16
  107. package/dist/Editor/common/iconListV2.js +0 -76
  108. package/dist/Editor/common/iconslist.js +0 -21
  109. package/dist/Editor/commonStyle.js +61 -116
  110. package/dist/Editor/helper/index.js +0 -4
  111. package/dist/Editor/helper/theme.js +2 -203
  112. package/dist/Editor/hooks/useMouseMove.js +3 -9
  113. package/dist/Editor/hooks/useTable.js +4 -5
  114. package/dist/Editor/plugins/withEmbeds.js +1 -1
  115. package/dist/Editor/plugins/withHTML.js +1 -3
  116. package/dist/Editor/plugins/withTable.js +1 -1
  117. package/dist/Editor/theme/ThemeList.js +173 -50
  118. package/dist/Editor/utils/SlateUtilityFunctions.js +36 -158
  119. package/dist/Editor/utils/accordion.js +4 -14
  120. package/dist/Editor/utils/button.js +17 -1
  121. package/dist/Editor/utils/customHooks/useTableResize.js +9 -49
  122. package/dist/Editor/utils/draftToSlate.js +2 -3
  123. package/dist/Editor/utils/events.js +6 -50
  124. package/dist/Editor/utils/font.js +37 -40
  125. package/dist/Editor/utils/helper.js +30 -143
  126. package/dist/Editor/utils/insertAppHeader.js +1 -1
  127. package/dist/Editor/utils/signature.js +9 -2
  128. package/package.json +4 -4
  129. package/dist/Editor/Elements/FreeGrid/helper.js +0 -113
  130. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
  131. package/dist/Editor/assets/svg/BackIcon.js +0 -18
  132. package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
  133. package/dist/Editor/common/Checkbox/index.js +0 -46
  134. package/dist/Editor/common/Checkbox/styles.js +0 -45
  135. package/dist/Editor/common/CustomColorPicker/index.js +0 -130
  136. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  137. package/dist/Editor/common/CustomDialog2/index.js +0 -94
  138. package/dist/Editor/common/CustomDialog2/style.js +0 -67
  139. package/dist/Editor/common/CustomSelect.js +0 -43
  140. package/dist/Editor/common/RadioGroup/index.js +0 -48
  141. package/dist/Editor/common/RadioGroup/styles.js +0 -29
  142. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  143. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +0 -115
  144. package/dist/Editor/helper/textIndeces.js +0 -58
  145. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  146. package/dist/Editor/hooks/useThemeValues.js +0 -63
  147. package/dist/Editor/theme/index.js +0 -149
  148. package/dist/Editor/themeSettings/ActiveTheme.js +0 -82
  149. package/dist/Editor/themeSettings/buttons/index.js +0 -300
  150. package/dist/Editor/themeSettings/buttons/style.js +0 -23
  151. package/dist/Editor/themeSettings/colorTheme/index.js +0 -310
  152. package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
  153. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  154. package/dist/Editor/themeSettings/fonts/index.js +0 -240
  155. package/dist/Editor/themeSettings/fonts/style.js +0 -62
  156. package/dist/Editor/themeSettings/icons.js +0 -60
  157. package/dist/Editor/themeSettings/index.js +0 -380
  158. package/dist/Editor/themeSettings/style.js +0 -299
  159. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  160. package/dist/Editor/themeSettingsAI/index.js +0 -355
  161. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
  162. package/dist/Editor/themeSettingsAI/style.js +0 -332
@@ -1,8 +1,5 @@
1
1
  import { ROW_HEIGHT, calculateGridArea } from "../Utils/gridDropItem";
2
2
  import { Transforms, Editor } from "slate";
3
- import { getElementOffset } from "./VirtualTextElement";
4
- import { getNode } from "../../../utils/helper";
5
- import { findMaxYValue } from "../../../Elements/FreeGrid/helper";
6
3
  const isBulletOrTickIcon = (width, itemStartRow, startRow) => {
7
4
  return width <= 40 && itemStartRow === startRow;
8
5
  };
@@ -42,83 +39,106 @@ export const getGridArea = gridArea => {
42
39
  const getBoxToAutoAlign = (editor, sectionPath) => {
43
40
  const [boxData] = Editor.nodes(editor, {
44
41
  at: sectionPath,
45
- match: node => ["freegridBox", "freegrid"].includes(node.type) && node.autoAlign
42
+ match: node => node.type === "freegridBox" && node.autoAlign
46
43
  });
47
44
  return boxData || [];
48
45
  };
46
+ const handleGridItems = (gridItems, lastRow) => {
47
+ // to find the previously occupied rows
48
+ gridItems.forEach(item => {
49
+ const {
50
+ gridArea_xs: gridArea,
51
+ marginTop_xs,
52
+ height_xs,
53
+ type
54
+ } = item;
55
+ if (type === "paragraph") {
56
+ // non-freegridItem,
57
+ // some "paragraph" node is defaulty coming inside in box's children
58
+ return;
59
+ }
60
+ const [startRow] = getGridArea(gridArea);
61
+ const marginTop = marginTop_xs ? Number(marginTop_xs) : 0;
62
+ const fullHeight = Number(height_xs) + marginTop;
63
+ const endRow = startRow + Math.floor(fullHeight / ROW_HEIGHT) + 1;
64
+ lastRow = Math.max(endRow, lastRow);
65
+ });
66
+ return {
67
+ lastRow
68
+ };
69
+ };
70
+ const handleNonGridItems = (nonGridItems, lastRow, editor, boxPath) => {
71
+ let containerHeight = (lastRow - 1) * ROW_HEIGHT;
72
+ let newlyAddedHeight = 0;
49
73
 
50
- // const handleGridItems = (gridItems, lastRow) => {
51
- // // to find the previously occupied rows
52
- // gridItems.forEach((item) => {
53
- // const { gridArea_xs: gridArea, marginTop_xs, height_xs, type } = item;
54
-
55
- // if (type === "paragraph") {
56
- // // non-freegridItem,
57
- // // some "paragraph" node is defaulty coming inside in box's children
58
- // return;
59
- // }
60
-
61
- // const [startRow] = getGridArea(gridArea);
62
- // const marginTop = marginTop_xs ? Number(marginTop_xs) : 0;
63
- // const fullHeight = Number(height_xs) + marginTop;
64
-
65
- // const endRow = startRow + Math.floor(fullHeight / ROW_HEIGHT) + 1;
66
-
67
- // lastRow = Math.max(endRow, lastRow);
68
- // });
69
-
70
- // return { lastRow };
71
- // };
72
-
73
- // const handleNonGridItems = (nonGridItems, lastRow, editor, boxPath) => {
74
- // let containerHeight = (lastRow - 1) * ROW_HEIGHT;
75
-
76
- // let newlyAddedHeight = 0;
77
-
78
- // //place it on the next rows that are available
79
- // nonGridItems.forEach((item, index) => {
80
- // const { height_xs, type, itemIndex } = item;
81
-
82
- // if (type === "paragraph") {
83
- // // non-freegridItem
84
- // return;
85
- // }
86
-
87
- // const startRow = lastRow || 1;
88
-
89
- // const DEFAULT_NEW_ELEMENT_MARGIN_TOP = 12;
90
- // let fullHeight = height_xs + DEFAULT_NEW_ELEMENT_MARGIN_TOP;
91
-
92
- // const endRow = startRow + Math.floor(fullHeight / ROW_HEIGHT) + 1;
93
-
94
- // const newGridArea = `${startRow} / 1 / ${startRow + 1} / 2`;
95
-
96
- // const currentElementPath = [...boxPath, itemIndex];
97
-
98
- // Transforms.setNodes(
99
- // editor,
100
- // {
101
- // gridArea_xs: newGridArea,
102
- // marginTop_xs: 12,
103
- // left_xs: 12,
104
- // xs_updatedOn: new Date().getTime(),
105
- // },
106
- // { at: currentElementPath }
107
- // );
108
-
109
- // lastRow = Math.max(endRow, lastRow);
110
-
111
- // containerHeight += fullHeight;
112
- // newlyAddedHeight += fullHeight;
113
- // });
114
-
115
- // return {
116
- // lastRow,
117
- // containerHeight,
118
- // newlyAddedHeight,
119
- // };
120
- // };
121
-
74
+ //place it on the next rows that are available
75
+ nonGridItems.forEach((item, index) => {
76
+ const {
77
+ height_xs,
78
+ type,
79
+ itemIndex
80
+ } = item;
81
+ if (type === "paragraph") {
82
+ // non-freegridItem
83
+ return;
84
+ }
85
+ const startRow = lastRow || 1;
86
+ const DEFAULT_NEW_ELEMENT_MARGIN_TOP = 12;
87
+ let fullHeight = height_xs + DEFAULT_NEW_ELEMENT_MARGIN_TOP;
88
+ const endRow = startRow + Math.floor(fullHeight / ROW_HEIGHT) + 1;
89
+ const newGridArea = `${startRow} / 1 / ${startRow + 1} / 2`;
90
+ const currentElementPath = [...boxPath, itemIndex];
91
+ Transforms.setNodes(editor, {
92
+ gridArea_xs: newGridArea,
93
+ marginTop_xs: 12,
94
+ left_xs: 12,
95
+ xs_updatedOn: new Date().getTime()
96
+ }, {
97
+ at: currentElementPath
98
+ });
99
+ lastRow = Math.max(endRow, lastRow);
100
+ containerHeight += fullHeight;
101
+ newlyAddedHeight += fullHeight;
102
+ });
103
+ return {
104
+ lastRow,
105
+ containerHeight,
106
+ newlyAddedHeight
107
+ };
108
+ };
109
+ const alignNewElementInContainer = (editor, boxPath, containerItems) => {
110
+ let lastRow = 1;
111
+ const gridItems = [];
112
+ const nonGridItems = [];
113
+ containerItems.forEach((item, index) => {
114
+ if (item?.gridArea_xs) {
115
+ gridItems.push({
116
+ ...item,
117
+ itemIndex: index
118
+ });
119
+ } else {
120
+ nonGridItems.push({
121
+ ...item,
122
+ itemIndex: index
123
+ });
124
+ }
125
+ });
126
+ const {
127
+ lastRow: lastRowOccupied
128
+ } = handleGridItems(gridItems, lastRow);
129
+ lastRow = lastRowOccupied;
130
+ const {
131
+ lastRow: lastRowTaken,
132
+ containerHeight,
133
+ newlyAddedHeight
134
+ } = handleNonGridItems(nonGridItems, lastRow, editor, boxPath);
135
+ lastRow = lastRowTaken;
136
+ return {
137
+ lastRow,
138
+ containerHeight,
139
+ newlyAddedHeight
140
+ };
141
+ };
122
142
  const getAncestorFreeGridContainers = (editor, path) => {
123
143
  const containers = [...Editor.nodes(editor, {
124
144
  at: path,
@@ -131,37 +151,6 @@ const getAncestorFreeGridContainers = (editor, path) => {
131
151
  })].filter(([node, nodePath]) => nodePath.length <= path.length);
132
152
  return containers;
133
153
  };
134
- export const handleTextAlignment = (editor, textNode, heightDiff, updateBreakpoint) => {
135
- const [textEle, textPath] = textNode;
136
- let containers = getAncestorFreeGridContainers(editor, textPath);
137
- for (let i = containers.length - 1; i >= 0; i--) {
138
- const container = containers[i];
139
- const childContainer = containers[i + 1];
140
- if (!heightDiff) {
141
- break;
142
- }
143
-
144
- // get the data of elements to align inside container
145
- const alignElements = alignElementsInsideContainer(container, childContainer || textNode, heightDiff, updateBreakpoint);
146
- if (!childContainer) {
147
- const {
148
- height
149
- } = getNodeValues(textEle, updateBreakpoint);
150
- const appendBp = updateBreakpoint === "lg" ? "" : "_xs";
151
-
152
- // update the height of the current text element, before updating the container
153
- Transforms.setNodes(editor, {
154
- [`height${appendBp}`]: height + heightDiff
155
- }, {
156
- at: textPath
157
- });
158
- }
159
- const containerHeightDiff = updateContainer(editor, alignElements, container, updateBreakpoint, heightDiff);
160
-
161
- // if container height incresed/decresed, need to auto align the parent container based on height differed
162
- heightDiff = containerHeightDiff;
163
- }
164
- };
165
154
  export const handleContainers = (editor, boxPath, extraHeight) => {
166
155
  const containers = getAncestorFreeGridContainers(editor, boxPath);
167
156
  let lastChildStartRow;
@@ -224,7 +213,6 @@ export const moveOverlappedItems = (editor, moveRows, containerItems, containerP
224
213
  return;
225
214
  }
226
215
  if (gridItem.type === "paragraph") {
227
- // some empty paragraph node is inserted default'ly inside box, to avoid that
228
216
  return;
229
217
  }
230
218
  const {
@@ -247,195 +235,7 @@ export const moveOverlappedItems = (editor, moveRows, containerItems, containerP
247
235
  }
248
236
  });
249
237
  };
250
- export const causeOverlap = (container, currElementPath, updateBreakpoint, newTopPosition, firstNextElement) => {
251
- const [containerNode, containerPath] = container;
252
- let isOverlapped = false;
253
- containerNode.children.forEach((item, index) => {
254
- if (item.type === "paragraph") {
255
- return;
256
- }
257
- const currPath = [...containerPath, index];
258
- if (currPath.toString() === currElementPath.toString()) {
259
- return;
260
- }
261
- const {
262
- top,
263
- bottom
264
- } = getElementOffset(item, updateBreakpoint);
265
- if (firstNextElement === top) {
266
- return;
267
- }
268
- if (newTopPosition > top && newTopPosition <= bottom) {
269
- isOverlapped = true;
270
- }
271
- });
272
- return isOverlapped;
273
- };
274
- export const alignElementsInsideContainer = (container, currentElement, heightDiff, updateBreakpoint) => {
275
- const [containerNode, containerPath] = container;
276
- const [currentElementNode, currElementPath] = currentElement || [];
277
- const {
278
- bottom: currElementBottom
279
- } = getElementOffset(currentElementNode, updateBreakpoint);
280
- const newCurrElementBottom = currElementBottom + heightDiff;
281
- const bufferSpace = 12;
282
- const nextElements = []; // Elements after the current element
283
- let firstNextElement = 0; // first element position which is after the current element
284
-
285
- const alignElements = {};
286
-
287
- // find the elements present after the current element
288
- containerNode.children.forEach((item, index) => {
289
- if (item.type === "paragraph") {
290
- return;
291
- }
292
- const currPath = [...containerPath, index];
293
- const {
294
- top: itemTop
295
- } = getElementOffset(item, updateBreakpoint);
296
- if (currPath.toString() === currElementPath.toString()) {
297
- return;
298
- }
299
- const bufferPosition = 15;
300
- if (itemTop + bufferPosition >= currElementBottom) {
301
- const element = {
302
- path: currPath,
303
- node: item
304
- };
305
- nextElements.push(element);
306
- firstNextElement = firstNextElement > 0 ? Math.min(firstNextElement, itemTop) : itemTop;
307
- }
308
- });
309
-
310
- // check whether the new height is overlapping the next element
311
- const isOverlapped = firstNextElement && newCurrElementBottom >= firstNextElement;
312
- let moveElements = isOverlapped || heightDiff < 0; // if heightDiff is negative, move elements up
313
-
314
- if (heightDiff < 0) {
315
- // does flex elements cause overlap
316
- const isCausingOverlap = causeOverlap(container, currElementPath, updateBreakpoint, firstNextElement + heightDiff, firstNextElement);
317
- moveElements = !isCausingOverlap;
318
- }
319
- if (moveElements) {
320
- const topPos = newCurrElementBottom - firstNextElement + bufferSpace; // position the element after the current element
321
- alignElements.topPos = heightDiff < 0 ? heightDiff : topPos;
322
- alignElements.nextElements = nextElements;
323
- alignElements.moveElements = moveElements;
324
- }
325
- return alignElements;
326
- };
327
- export const updateContainer = (editor, alignElements, container, updateBreakpoint, heightDiff) => {
328
- const [containerNode, containerPath] = container;
329
- const {
330
- moveElements,
331
- topPos,
332
- nextElements
333
- } = alignElements || {};
334
- const appendBp = updateBreakpoint === "lg" ? "" : "_xs";
335
-
336
- // update the aligned data inside container
337
- if (moveElements && topPos !== 0) {
338
- nextElements.forEach(ele => {
339
- const {
340
- path,
341
- node
342
- } = ele;
343
- const {
344
- top
345
- } = getElementOffset(node, updateBreakpoint);
346
- const y = top + topPos;
347
-
348
- // Calculate grid position
349
- const row = Math.floor(y / ROW_HEIGHT) + 1;
350
-
351
- // to calculate difference inside the grid
352
- const marginTop = Math.abs((row - 1) * ROW_HEIGHT - y);
353
-
354
- // Update grid area
355
- const gridArea = `${row} / 1 / ${row + 1} / 2`;
356
- Transforms.setNodes(editor, {
357
- [`gridArea${appendBp}`]: gridArea,
358
- [`marginTop${appendBp}`]: marginTop
359
- }, {
360
- at: path
361
- });
362
- });
363
- }
364
-
365
- // update the new height of the container
366
- const newContainerNode = getNode(editor, containerPath);
367
- const newHeight = findMaxYValue(newContainerNode?.children, updateBreakpoint) + 12;
368
- const {
369
- height: containerOldHeight
370
- } = getNodeValues(containerNode, updateBreakpoint);
371
- let currHeightDiff = newHeight - containerOldHeight;
372
- const noUpdate = currHeightDiff < 0 && heightDiff > 0; // if current text height is increased, but container height is getting reduced, we don't want to reduce the height of the container
373
- if (noUpdate) {
374
- currHeightDiff = 0;
375
- } else {
376
- Transforms.setNodes(editor, {
377
- [`height${appendBp}`]: newHeight + 12
378
- }, {
379
- at: containerPath
380
- });
381
- }
382
- return currHeightDiff;
383
- };
384
- export const handleContainersAlignment = (editor, containers, heightDiff, bufferSpace = 0) => {
385
- for (let i = containers.length - 1; i >= 0; i--) {
386
- const container = containers[i];
387
- const childContainer = containers[i + 1];
388
- const [containerNode, containerPath] = container;
389
- const [childContainerNode, childContainerPath] = childContainer || [];
390
- if (childContainer) {
391
- const {
392
- bottom
393
- } = getElementOffset(childContainerNode);
394
- containerNode.children.forEach((item, index) => {
395
- const currPath = [...containerPath, index];
396
- if (currPath.toString() === childContainerPath.toString()) {
397
- return;
398
- }
399
- if (item.type === "paragraph") {
400
- return;
401
- }
402
- const {
403
- top: itemTop
404
- } = getElementOffset(item);
405
- if (itemTop >= bottom) {
406
- const {
407
- gridArea_xs,
408
- marginTop_xs
409
- } = item;
410
- const [startRow] = getGridArea(gridArea_xs);
411
- const y = (startRow - 1) * ROW_HEIGHT + marginTop_xs + heightDiff;
412
-
413
- // Calculate grid position
414
- const row = Math.floor(y / ROW_HEIGHT) + 1;
415
-
416
- // to calculate difference inside the grid
417
- const marginTop = Math.abs((row - 1) * ROW_HEIGHT - y);
418
-
419
- // Update grid area
420
- const gridArea = `${row} / 1 / ${row + 1} / 2`;
421
- Transforms.setNodes(editor, {
422
- gridArea_xs: gridArea,
423
- marginTop_xs: marginTop + bufferSpace
424
- }, {
425
- at: currPath
426
- });
427
- }
428
- });
429
- }
430
- Transforms.setNodes(editor, {
431
- height_xs: containerNode?.height_xs + heightDiff + bufferSpace,
432
- xs_updatedOn: new Date().getTime()
433
- }, {
434
- at: containerPath
435
- });
436
- }
437
- };
438
- export const handleBoxAlignment = (editor, sectionPath, heightDiff) => {
238
+ export const handleBoxAlignment = (editor, sectionNode, sectionPath) => {
439
239
  const [boxNode, boxPath] = getBoxToAutoAlign(editor, sectionPath);
440
240
  Transforms.setNodes(editor, {
441
241
  autoAlign: false
@@ -445,11 +245,39 @@ export const handleBoxAlignment = (editor, sectionPath, heightDiff) => {
445
245
  if (!boxNode) {
446
246
  return;
447
247
  }
448
- if (heightDiff <= 0) {
449
- return;
248
+ const containerItems = boxNode?.children || [];
249
+ const {
250
+ containerHeight
251
+ } = alignNewElementInContainer(editor, boxPath, containerItems);
252
+ const bufferHeight = 12;
253
+ const newHeight = containerHeight + bufferHeight;
254
+ const {
255
+ height_xs
256
+ } = boxNode;
257
+ const oldHeight = Number(height_xs);
258
+ const extraHeight = newHeight - oldHeight;
259
+ if (extraHeight > 0) {
260
+ const containerData = handleContainers(editor, boxPath, extraHeight);
261
+ containerData.forEach(container => {
262
+ const {
263
+ moveRows,
264
+ containerNode,
265
+ containerPath,
266
+ newHeight,
267
+ childIndex,
268
+ lastChildStartRow
269
+ } = container;
270
+ if (moveRows) {
271
+ moveOverlappedItems(editor, moveRows, containerNode?.children, containerPath, childIndex, lastChildStartRow);
272
+ }
273
+ Transforms.setNodes(editor, {
274
+ height_xs: newHeight,
275
+ xs_updatedOn: new Date().getTime()
276
+ }, {
277
+ at: containerPath
278
+ });
279
+ });
450
280
  }
451
- let containers = getAncestorFreeGridContainers(editor, boxPath);
452
- handleContainersAlignment(editor, containers, heightDiff, 12);
453
281
  };
454
282
  export const getMarginTop = y => {
455
283
  const calcMargin = y % ROW_HEIGHT;
@@ -467,7 +295,7 @@ export const calculateProps = (curPath, dom, domClass, allData, parentDom, isBox
467
295
  const itemsData = [];
468
296
  const items = dom.querySelectorAll(domClass);
469
297
  const nextItemPathLength = curPath?.split("|").length + 2;
470
- // let sectionHeight = 12;
298
+ let sectionHeight = 12;
471
299
  for (let i = 0; i < items.length; i++) {
472
300
  const itemRect = items[i]?.getBoundingClientRect();
473
301
  if (items[i]?.classList.contains("type_box")) {
@@ -487,10 +315,9 @@ export const calculateProps = (curPath, dom, domClass, allData, parentDom, isBox
487
315
  gridArea: calculateGridArea(y)
488
316
  }
489
317
  });
490
- // sectionHeight += itemRect?.height;
318
+ sectionHeight += itemRect?.height;
491
319
  }
492
320
  }
493
-
494
321
  if (dom?.classList.contains("type_box") && parentDom) {
495
322
  const parentDomRect = parentDom?.getBoundingClientRect();
496
323
  const isAppHeader = isBoxHeader || dom?.classList.contains("appHeaderBox");
@@ -552,21 +379,4 @@ export const sortElements = (items, container) => {
552
379
  }
553
380
  }
554
381
  });
555
- };
556
- const nodeKeys = ["height", "width", "gridArea", "marginTop", "left"];
557
- export const getNodeValues = (node, breakpoint = "xs") => {
558
- // defaulty return xs breakpoint values, if breakpoint is not given
559
- const appendBp = breakpoint === "lg" ? "" : "_xs";
560
- const nodeVals = nodeKeys.reduce((a, b) => {
561
- const key = b + appendBp;
562
- a[b] = node[key];
563
- if (b === "height" && !a[b]) {
564
- a[b] = node.height;
565
- }
566
- return a;
567
- }, {});
568
- return {
569
- ...node,
570
- ...nodeVals
571
- };
572
382
  };
@@ -18,14 +18,6 @@ const useVirtualElementStyles = () => ({
18
18
  "& .editor-blocker": {
19
19
  display: "none"
20
20
  },
21
- "& .fgi_type_text": {
22
- "& .edt-headings": {
23
- margin: "0px"
24
- },
25
- "& .edt-paragraphs": {
26
- margin: "0px"
27
- }
28
- },
29
21
  "& .freegrid-item": {
30
22
  position: "relative !important",
31
23
  top: "0 !important",
@@ -105,14 +97,6 @@ export const useAutoAlignStyles = () => ({
105
97
  "&.type_text": {
106
98
  height: "auto !important"
107
99
  },
108
- "& .fgi_type_text": {
109
- "& .edt-headings": {
110
- margin: "0px"
111
- },
112
- "& .edt-paragraphs": {
113
- margin: "0px"
114
- }
115
- },
116
100
  // start - default signature classes on free-grid
117
101
  "& .fgi_type_signature": {
118
102
  height: "100%",
@@ -12,7 +12,7 @@ import GuideLines from "./GuideLines";
12
12
  import ShadowElement from "./ShadowElement";
13
13
  import BoundaryLine from "./GuideLines/BoundaryLine";
14
14
  import ContextMenu from "./ContextMenu";
15
- // import VirtualElement from "./VirtualElement";
15
+ import VirtualElement from "./VirtualElement";
16
16
  import { ItemTypes } from "./ElementSettings/settingsConstants";
17
17
  import { selectText } from "../../utils/helper";
18
18
  import { removeSign } from "./ElementSettings/OtherSettings";
@@ -20,7 +20,7 @@ import useDragging from "../../hooks/useDragging";
20
20
  import { dragOverOn } from "../../helper/RnD/focusNode";
21
21
  import { focusSelection, clearSelection, clearSelectionOnly } from "../../helper";
22
22
  // import { reRenderChildNodes } from "./Utils/gridDropItem";
23
- import VirtualTextElement, { updateTextHeight } from "./VirtualElement/VirtualTextElement";
23
+ import VirtualTextElement from "./VirtualElement/VirtualTextElement";
24
24
  import useAutoScroll from "../../hooks/useAutoScroll";
25
25
  import ForceAutoAlignment from "./VirtualElement/ForceAutoAlignment";
26
26
  import BoxHeaderAutoAlignment from "./VirtualElement/BoxHeaderAutoAlignment";
@@ -131,7 +131,6 @@ const RnD = props => {
131
131
  const {
132
132
  translation
133
133
  } = customProps;
134
- const timerId = useRef(0);
135
134
  useEffect(() => {
136
135
  if (ITEM_TYPES.includes(type)) {
137
136
  if (enable === 1) {
@@ -141,24 +140,6 @@ const RnD = props => {
141
140
  setAbsPosition({});
142
141
  }
143
142
  }
144
- const textElement = getCurrentEle()?.querySelector(".fgi_type_text");
145
- if (breakpoint && textElement && childType === "text" && !enable) {
146
- timerId.current = setTimeout(() => {
147
- const {
148
- clientHeight
149
- } = textElement;
150
- const {
151
- height
152
- } = delta || {};
153
- const heightDiff = Math.abs(clientHeight - height);
154
- if (clientHeight && height && heightDiff >= 5) {
155
- updateTextHeight(editor, path, clientHeight, breakpoint);
156
- const parentSectionPath = path.slice(0, 2);
157
- reRenderChildNodes(editor, parentSectionPath);
158
- }
159
- }, 200);
160
- }
161
- return () => clearTimeout(timerId.current);
162
143
  }, [enable]);
163
144
  const getCurrentEle = () => {
164
145
  return positionRef.current?.resizableElement?.current;
@@ -518,9 +499,7 @@ const RnD = props => {
518
499
  ref
519
500
  }, ".freegrid-container-parent");
520
501
  const formatParentPath = parentPath?.split("|")?.map(m => parseInt(m));
521
- if (formatParentPath) {
522
- reRenderChildNodes(editor, formatParentPath);
523
- }
502
+ reRenderChildNodes(editor, formatParentPath);
524
503
  };
525
504
  const onCloseSettings = () => {
526
505
  setSelectedElement({
@@ -702,7 +681,14 @@ const RnD = props => {
702
681
  handleClose: handleClose,
703
682
  theme: theme,
704
683
  translation: translation
705
- }), childType === "text" && breakpoint === "lg" && !readOnly && enable ? /*#__PURE__*/_jsx(VirtualTextElement, {
684
+ }), type === "parent" && breakpoint === "lg" && !readOnly ? /*#__PURE__*/_jsx(VirtualElement, {
685
+ updated_at: updated_at,
686
+ path: str_path,
687
+ editor: editor,
688
+ sectionElement: sectionElement,
689
+ sectionCls: `.freegrid-section_${path.join("_")}`,
690
+ dataSets: dataSets
691
+ }) : null, childType === "text" && breakpoint === "lg" && !readOnly && enable ? /*#__PURE__*/_jsx(VirtualTextElement, {
706
692
  editor: editor,
707
693
  dataSets: dataSets,
708
694
  getCurrentEle: getCurrentEle,
@@ -1,59 +1,22 @@
1
- import { Select as Core, MenuItem, Typography } from "@mui/material";
1
+ import { Select as Core } from "@mui/material";
2
2
  import SelectStyles from "./styles";
3
3
  import { useEditorContext } from "../../hooks/useMouseMove";
4
- import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
4
+ import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
- import { Fragment as _Fragment } from "react/jsx-runtime";
7
- import { jsxs as _jsxs } from "react/jsx-runtime";
8
6
  function Select(props) {
9
7
  const {
10
8
  children,
11
- value,
12
- onChange,
13
- options,
14
- label,
15
- labelProps,
16
- showDefault,
17
- translation,
18
9
  ...rest
19
10
  } = props;
20
11
  const {
21
12
  theme
22
13
  } = useEditorContext();
23
14
  const classes = SelectStyles(theme);
24
- const menuOptions = showDefault ? [{
25
- label: "None",
26
- value: ""
27
- }, ...(options || [])] : options;
28
- return /*#__PURE__*/_jsxs(_Fragment, {
29
- children: [label ? /*#__PURE__*/_jsx(Typography, {
30
- variant: "body2",
31
- sx: {
32
- paddingBottom: "4px"
33
- },
34
- ...(labelProps || {}),
35
- children: label
36
- }) : null, /*#__PURE__*/_jsx(Core, {
37
- size: "small",
38
- fullWidth: true,
39
- defaultValue: "",
40
- value: value || "",
41
- onChange: onChange,
42
- sx: classes.select,
43
- MenuProps: classes.MenuProps,
44
- IconComponent: KeyboardArrowDownRoundedIcon,
45
- displayEmpty: true,
46
- ...rest,
47
- children: menuOptions?.map((option, i) => {
48
- return /*#__PURE__*/_jsx(MenuItem, {
49
- value: option.value,
50
- children: /*#__PURE__*/_jsx(Typography, {
51
- variant: "body2",
52
- children: translation(option.label)
53
- })
54
- }, i);
55
- })
56
- })]
15
+ return /*#__PURE__*/_jsx(Core, {
16
+ MenuProps: classes.MenuProps,
17
+ IconComponent: KeyboardArrowDownRoundedIcon,
18
+ ...rest,
19
+ children: children
57
20
  });
58
21
  }
59
22
  export default Select;