@flozy/editor 10.4.1 → 10.4.3

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 (167) hide show
  1. package/dist/Editor/ChatEditor.js +16 -17
  2. package/dist/Editor/CommonEditor.js +16 -131
  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 +9 -46
  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 -3
  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 +31 -35
  26. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
  27. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +0 -1
  28. package/dist/Editor/Elements/FreeGrid/Options/More.js +7 -7
  29. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +1 -1
  30. package/dist/Editor/Elements/FreeGrid/styles.js +0 -14
  31. package/dist/Editor/Elements/Grid/Grid.js +2 -14
  32. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  33. package/dist/Editor/Elements/Signature/Signature.css +1 -2
  34. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +5 -18
  35. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +3 -16
  36. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  37. package/dist/Editor/Elements/Table/DragButton.js +1 -0
  38. package/dist/Editor/Elements/Table/Draggable.js +2 -6
  39. package/dist/Editor/Elements/Table/Styles.js +0 -7
  40. package/dist/Editor/Elements/Table/Table.js +3 -3
  41. package/dist/Editor/Elements/Table/TableCell.js +5 -24
  42. package/dist/Editor/Elements/Title/title.js +6 -6
  43. package/dist/Editor/Elements/Variables/VariableButton.js +1 -10
  44. package/dist/Editor/MiniEditor.js +1 -2
  45. package/dist/Editor/Styles/EditorStyles.js +5 -5
  46. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  47. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  48. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  49. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -10
  50. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  51. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +2 -4
  52. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
  53. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
  54. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -7
  55. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
  56. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -72
  57. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +10 -58
  58. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  59. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  60. package/dist/Editor/common/ColorPickerButton.js +16 -41
  61. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  62. package/dist/Editor/common/FontLoader/FontLoader.js +0 -3
  63. package/dist/Editor/common/Icon.js +0 -28
  64. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  65. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  66. package/dist/Editor/common/LinkSettings/NavComponents.js +66 -45
  67. package/dist/Editor/common/LinkSettings/index.js +28 -14
  68. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  69. package/dist/Editor/common/LinkSettings/style.js +244 -164
  70. package/dist/Editor/common/MentionsPopup/index.js +1 -4
  71. package/dist/Editor/common/RnD/ElementOptions/Actions.js +5 -4
  72. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -2
  73. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +3 -4
  74. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  75. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  76. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  77. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  78. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
  79. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
  80. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  81. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
  82. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
  83. package/dist/Editor/common/RnD/ElementSettings/styles.js +1 -0
  84. package/dist/Editor/common/RnD/OptionsPopup/style.js +1 -0
  85. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +2 -11
  86. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  87. package/dist/Editor/common/RnD/Utils/gridDropItem.js +19 -28
  88. package/dist/Editor/common/RnD/Utils/index.js +1 -3
  89. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +58 -42
  90. package/dist/Editor/common/RnD/VirtualElement/helper.js +132 -323
  91. package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -16
  92. package/dist/Editor/common/RnD/index.js +39 -68
  93. package/dist/Editor/common/Select/index.js +7 -44
  94. package/dist/Editor/common/Select/styles.js +2 -31
  95. package/dist/Editor/common/Shorthands/elements.js +0 -54
  96. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  97. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +9 -12
  98. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  99. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -4
  100. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  101. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  102. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  103. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
  104. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
  105. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
  106. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
  107. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  108. package/dist/Editor/common/SwipeableDrawer/style.js +12 -14
  109. package/dist/Editor/common/Uploader.js +0 -16
  110. package/dist/Editor/common/iconListV2.js +0 -76
  111. package/dist/Editor/common/iconslist.js +0 -21
  112. package/dist/Editor/commonStyle.js +61 -116
  113. package/dist/Editor/helper/index.js +1 -5
  114. package/dist/Editor/helper/theme.js +2 -203
  115. package/dist/Editor/hooks/useMouseMove.js +3 -9
  116. package/dist/Editor/hooks/useTable.js +4 -5
  117. package/dist/Editor/plugins/withEmbeds.js +1 -1
  118. package/dist/Editor/plugins/withHTML.js +1 -3
  119. package/dist/Editor/plugins/withTable.js +1 -1
  120. package/dist/Editor/theme/ThemeList.js +173 -50
  121. package/dist/Editor/utils/SlateUtilityFunctions.js +37 -161
  122. package/dist/Editor/utils/accordion.js +4 -14
  123. package/dist/Editor/utils/button.js +17 -1
  124. package/dist/Editor/utils/customHooks/useTableResize.js +9 -49
  125. package/dist/Editor/utils/draftToSlate.js +2 -3
  126. package/dist/Editor/utils/events.js +6 -50
  127. package/dist/Editor/utils/font.js +37 -40
  128. package/dist/Editor/utils/formfield.js +0 -1
  129. package/dist/Editor/utils/helper.js +26 -210
  130. package/dist/Editor/utils/insertAppHeader.js +1 -1
  131. package/dist/Editor/utils/signature.js +9 -2
  132. package/package.json +4 -4
  133. package/dist/Editor/Elements/FreeGrid/helper.js +0 -115
  134. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
  135. package/dist/Editor/assets/svg/BackIcon.js +0 -18
  136. package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
  137. package/dist/Editor/common/Checkbox/index.js +0 -46
  138. package/dist/Editor/common/Checkbox/styles.js +0 -45
  139. package/dist/Editor/common/CustomColorPicker/index.js +0 -130
  140. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  141. package/dist/Editor/common/CustomDialog2/index.js +0 -94
  142. package/dist/Editor/common/CustomDialog2/style.js +0 -67
  143. package/dist/Editor/common/CustomSelect.js +0 -43
  144. package/dist/Editor/common/RadioGroup/index.js +0 -48
  145. package/dist/Editor/common/RadioGroup/styles.js +0 -29
  146. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  147. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +0 -115
  148. package/dist/Editor/helper/textIndeces.js +0 -58
  149. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  150. package/dist/Editor/hooks/useThemeValues.js +0 -63
  151. package/dist/Editor/theme/index.js +0 -149
  152. package/dist/Editor/themeSettings/ActiveTheme.js +0 -82
  153. package/dist/Editor/themeSettings/buttons/index.js +0 -300
  154. package/dist/Editor/themeSettings/buttons/style.js +0 -23
  155. package/dist/Editor/themeSettings/colorTheme/index.js +0 -310
  156. package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
  157. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  158. package/dist/Editor/themeSettings/fonts/index.js +0 -240
  159. package/dist/Editor/themeSettings/fonts/style.js +0 -62
  160. package/dist/Editor/themeSettings/icons.js +0 -60
  161. package/dist/Editor/themeSettings/index.js +0 -380
  162. package/dist/Editor/themeSettings/style.js +0 -299
  163. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  164. package/dist/Editor/themeSettingsAI/index.js +0 -355
  165. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
  166. package/dist/Editor/themeSettingsAI/style.js +0 -332
  167. package/dist/Editor/utils/updateFormName.js +0 -22
@@ -1,9 +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
- import { RND_ITEMS } from "../../../helper";
7
3
  const isBulletOrTickIcon = (width, itemStartRow, startRow) => {
8
4
  return width <= 40 && itemStartRow === startRow;
9
5
  };
@@ -43,83 +39,106 @@ export const getGridArea = gridArea => {
43
39
  const getBoxToAutoAlign = (editor, sectionPath) => {
44
40
  const [boxData] = Editor.nodes(editor, {
45
41
  at: sectionPath,
46
- match: node => ["freegridBox", "freegrid"].includes(node.type) && node.autoAlign
42
+ match: node => node.type === "freegridBox" && node.autoAlign
47
43
  });
48
44
  return boxData || [];
49
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;
50
73
 
51
- // const handleGridItems = (gridItems, lastRow) => {
52
- // // to find the previously occupied rows
53
- // gridItems.forEach((item) => {
54
- // const { gridArea_xs: gridArea, marginTop_xs, height_xs, type } = item;
55
-
56
- // if (type === "paragraph") {
57
- // // non-freegridItem,
58
- // // some "paragraph" node is defaulty coming inside in box's children
59
- // return;
60
- // }
61
-
62
- // const [startRow] = getGridArea(gridArea);
63
- // const marginTop = marginTop_xs ? Number(marginTop_xs) : 0;
64
- // const fullHeight = Number(height_xs) + marginTop;
65
-
66
- // const endRow = startRow + Math.floor(fullHeight / ROW_HEIGHT) + 1;
67
-
68
- // lastRow = Math.max(endRow, lastRow);
69
- // });
70
-
71
- // return { lastRow };
72
- // };
73
-
74
- // const handleNonGridItems = (nonGridItems, lastRow, editor, boxPath) => {
75
- // let containerHeight = (lastRow - 1) * ROW_HEIGHT;
76
-
77
- // let newlyAddedHeight = 0;
78
-
79
- // //place it on the next rows that are available
80
- // nonGridItems.forEach((item, index) => {
81
- // const { height_xs, type, itemIndex } = item;
82
-
83
- // if (type === "paragraph") {
84
- // // non-freegridItem
85
- // return;
86
- // }
87
-
88
- // const startRow = lastRow || 1;
89
-
90
- // const DEFAULT_NEW_ELEMENT_MARGIN_TOP = 12;
91
- // let fullHeight = height_xs + DEFAULT_NEW_ELEMENT_MARGIN_TOP;
92
-
93
- // const endRow = startRow + Math.floor(fullHeight / ROW_HEIGHT) + 1;
94
-
95
- // const newGridArea = `${startRow} / 1 / ${startRow + 1} / 2`;
96
-
97
- // const currentElementPath = [...boxPath, itemIndex];
98
-
99
- // Transforms.setNodes(
100
- // editor,
101
- // {
102
- // gridArea_xs: newGridArea,
103
- // marginTop_xs: 12,
104
- // left_xs: 12,
105
- // xs_updatedOn: new Date().getTime(),
106
- // },
107
- // { at: currentElementPath }
108
- // );
109
-
110
- // lastRow = Math.max(endRow, lastRow);
111
-
112
- // containerHeight += fullHeight;
113
- // newlyAddedHeight += fullHeight;
114
- // });
115
-
116
- // return {
117
- // lastRow,
118
- // containerHeight,
119
- // newlyAddedHeight,
120
- // };
121
- // };
122
-
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
+ };
123
142
  const getAncestorFreeGridContainers = (editor, path) => {
124
143
  const containers = [...Editor.nodes(editor, {
125
144
  at: path,
@@ -132,37 +151,6 @@ const getAncestorFreeGridContainers = (editor, path) => {
132
151
  })].filter(([node, nodePath]) => nodePath.length <= path.length);
133
152
  return containers;
134
153
  };
135
- export const handleTextAlignment = (editor, textNode, heightDiff, updateBreakpoint) => {
136
- const [textEle, textPath] = textNode;
137
- let containers = getAncestorFreeGridContainers(editor, textPath);
138
- for (let i = containers.length - 1; i >= 0; i--) {
139
- const container = containers[i];
140
- const childContainer = containers[i + 1];
141
- if (!heightDiff) {
142
- break;
143
- }
144
-
145
- // get the data of elements to align inside container
146
- const alignElements = alignElementsInsideContainer(container, childContainer || textNode, heightDiff, updateBreakpoint);
147
- if (!childContainer) {
148
- const {
149
- height
150
- } = getNodeValues(textEle, updateBreakpoint);
151
- const appendBp = updateBreakpoint === "lg" ? "" : "_xs";
152
-
153
- // update the height of the current text element, before updating the container
154
- Transforms.setNodes(editor, {
155
- [`height${appendBp}`]: height + heightDiff
156
- }, {
157
- at: textPath
158
- });
159
- }
160
- const containerHeightDiff = updateContainer(editor, alignElements, container, updateBreakpoint, heightDiff);
161
-
162
- // if container height incresed/decresed, need to auto align the parent container based on height differed
163
- heightDiff = containerHeightDiff;
164
- }
165
- };
166
154
  export const handleContainers = (editor, boxPath, extraHeight) => {
167
155
  const containers = getAncestorFreeGridContainers(editor, boxPath);
168
156
  let lastChildStartRow;
@@ -224,7 +212,7 @@ export const moveOverlappedItems = (editor, moveRows, containerItems, containerP
224
212
  if (isChildEle) {
225
213
  return;
226
214
  }
227
- if (!RND_ITEMS.includes(gridItem.type)) {
215
+ if (gridItem.type === "paragraph") {
228
216
  return;
229
217
  }
230
218
  const {
@@ -247,196 +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 (!RND_ITEMS.includes(item.type)) {
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 (!RND_ITEMS.includes(item.type)) {
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
- currHeightDiff += 12;
382
- }
383
- return currHeightDiff;
384
- };
385
- export const handleContainersAlignment = (editor, containers, heightDiff, bufferSpace = 0) => {
386
- for (let i = containers.length - 1; i >= 0; i--) {
387
- const container = containers[i];
388
- const childContainer = containers[i + 1];
389
- const [containerNode, containerPath] = container;
390
- const [childContainerNode, childContainerPath] = childContainer || [];
391
- if (childContainer) {
392
- const {
393
- bottom
394
- } = getElementOffset(childContainerNode);
395
- containerNode.children.forEach((item, index) => {
396
- const currPath = [...containerPath, index];
397
- if (currPath.toString() === childContainerPath.toString()) {
398
- return;
399
- }
400
- if (!RND_ITEMS.includes(item.type)) {
401
- return;
402
- }
403
- const {
404
- top: itemTop
405
- } = getElementOffset(item);
406
- if (itemTop >= bottom) {
407
- const {
408
- gridArea_xs,
409
- marginTop_xs
410
- } = item;
411
- const [startRow] = getGridArea(gridArea_xs);
412
- const y = (startRow - 1) * ROW_HEIGHT + marginTop_xs + heightDiff;
413
-
414
- // Calculate grid position
415
- const row = Math.floor(y / ROW_HEIGHT) + 1;
416
-
417
- // to calculate difference inside the grid
418
- const marginTop = Math.abs((row - 1) * ROW_HEIGHT - y);
419
-
420
- // Update grid area
421
- const gridArea = `${row} / 1 / ${row + 1} / 2`;
422
- Transforms.setNodes(editor, {
423
- gridArea_xs: gridArea,
424
- marginTop_xs: marginTop + bufferSpace
425
- }, {
426
- at: currPath
427
- });
428
- }
429
- });
430
- }
431
- Transforms.setNodes(editor, {
432
- height_xs: containerNode?.height_xs + heightDiff + bufferSpace,
433
- xs_updatedOn: new Date().getTime()
434
- }, {
435
- at: containerPath
436
- });
437
- }
438
- };
439
- export const handleBoxAlignment = (editor, sectionPath, heightDiff) => {
238
+ export const handleBoxAlignment = (editor, sectionNode, sectionPath) => {
440
239
  const [boxNode, boxPath] = getBoxToAutoAlign(editor, sectionPath);
441
240
  Transforms.setNodes(editor, {
442
241
  autoAlign: false
@@ -446,11 +245,39 @@ export const handleBoxAlignment = (editor, sectionPath, heightDiff) => {
446
245
  if (!boxNode) {
447
246
  return;
448
247
  }
449
- if (heightDiff <= 0) {
450
- 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
+ });
451
280
  }
452
- let containers = getAncestorFreeGridContainers(editor, boxPath);
453
- handleContainersAlignment(editor, containers, heightDiff, 12);
454
281
  };
455
282
  export const getMarginTop = y => {
456
283
  const calcMargin = y % ROW_HEIGHT;
@@ -468,7 +295,7 @@ export const calculateProps = (curPath, dom, domClass, allData, parentDom, isBox
468
295
  const itemsData = [];
469
296
  const items = dom.querySelectorAll(domClass);
470
297
  const nextItemPathLength = curPath?.split("|").length + 2;
471
- // let sectionHeight = 12;
298
+ let sectionHeight = 12;
472
299
  for (let i = 0; i < items.length; i++) {
473
300
  const itemRect = items[i]?.getBoundingClientRect();
474
301
  if (items[i]?.classList.contains("type_box")) {
@@ -488,10 +315,9 @@ export const calculateProps = (curPath, dom, domClass, allData, parentDom, isBox
488
315
  gridArea: calculateGridArea(y)
489
316
  }
490
317
  });
491
- // sectionHeight += itemRect?.height;
318
+ sectionHeight += itemRect?.height;
492
319
  }
493
320
  }
494
-
495
321
  if (dom?.classList.contains("type_box") && parentDom) {
496
322
  const parentDomRect = parentDom?.getBoundingClientRect();
497
323
  const isAppHeader = isBoxHeader || dom?.classList.contains("appHeaderBox");
@@ -553,21 +379,4 @@ export const sortElements = (items, container) => {
553
379
  }
554
380
  }
555
381
  });
556
- };
557
- const nodeKeys = ["height", "width", "gridArea", "marginTop", "left"];
558
- export const getNodeValues = (node, breakpoint = "xs") => {
559
- // defaulty return xs breakpoint values, if breakpoint is not given
560
- const appendBp = breakpoint === "lg" ? "" : "_xs";
561
- const nodeVals = nodeKeys.reduce((a, b) => {
562
- const key = b + appendBp;
563
- a[b] = node[key];
564
- if (b === "height" && !a[b]) {
565
- a[b] = node.height;
566
- }
567
- return a;
568
- }, {});
569
- return {
570
- ...node,
571
- ...nodeVals
572
- };
573
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%",