@flozy/editor 10.4.0 → 10.4.2

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 (190) hide show
  1. package/dist/Editor/ChatEditor.js +17 -16
  2. package/dist/Editor/CommonEditor.js +134 -18
  3. package/dist/Editor/DialogWrapper.js +31 -25
  4. package/dist/Editor/Editor.css +46 -8
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +11 -3
  6. package/dist/Editor/Elements/Accordion/Accordion.js +46 -9
  7. package/dist/Editor/Elements/Accordion/AccordionSummary.js +1 -23
  8. package/dist/Editor/Elements/AppHeader/AppHeader.js +10 -5
  9. package/dist/Editor/Elements/Button/EditorButton.js +27 -9
  10. package/dist/Editor/Elements/Carousel/CarouselItem.js +2 -1
  11. package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  13. package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
  14. package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
  15. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +454 -0
  17. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +23 -8
  18. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +5 -2
  19. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +3 -2
  20. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
  21. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
  22. package/dist/Editor/Elements/Embed/Image.js +3 -2
  23. package/dist/Editor/Elements/Embed/Video.js +1 -1
  24. package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
  25. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
  26. package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
  27. package/dist/Editor/Elements/Form/Form.js +184 -171
  28. package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
  29. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -2
  30. package/dist/Editor/Elements/Form/FormField.js +13 -6
  31. package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
  32. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +40 -32
  33. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
  34. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -0
  35. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  36. package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
  37. package/dist/Editor/Elements/FreeGrid/styles.js +75 -7
  38. package/dist/Editor/Elements/Grid/Grid.js +14 -2
  39. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  40. package/dist/Editor/Elements/List/CheckList.js +3 -2
  41. package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
  42. package/dist/Editor/Elements/Search/SearchButton.js +9 -8
  43. package/dist/Editor/Elements/Search/SearchList.js +9 -7
  44. package/dist/Editor/Elements/Signature/Signature.css +2 -1
  45. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
  46. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
  47. package/dist/Editor/Elements/SimpleText/index.js +6 -1
  48. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  49. package/dist/Editor/Elements/Table/DragButton.js +0 -1
  50. package/dist/Editor/Elements/Table/Draggable.js +6 -2
  51. package/dist/Editor/Elements/Table/Styles.js +7 -0
  52. package/dist/Editor/Elements/Table/Table.js +3 -3
  53. package/dist/Editor/Elements/Table/TableCell.js +31 -8
  54. package/dist/Editor/Elements/Title/title.js +6 -6
  55. package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
  56. package/dist/Editor/MiniEditor.js +2 -1
  57. package/dist/Editor/Styles/EditorStyles.js +5 -5
  58. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  59. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
  60. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  61. package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
  62. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  63. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
  64. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
  65. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
  66. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
  67. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
  68. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
  69. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
  70. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
  71. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  72. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  73. package/dist/Editor/assets/svg/BackIcon.js +18 -0
  74. package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
  75. package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
  76. package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
  77. package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
  78. package/dist/Editor/common/Checkbox/index.js +46 -0
  79. package/dist/Editor/common/Checkbox/styles.js +45 -0
  80. package/dist/Editor/common/ColorPickerButton.js +41 -16
  81. package/dist/Editor/common/CustomColorPicker/index.js +130 -0
  82. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  83. package/dist/Editor/common/CustomDialog2/index.js +94 -0
  84. package/dist/Editor/common/CustomDialog2/style.js +67 -0
  85. package/dist/Editor/common/CustomSelect.js +43 -0
  86. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  87. package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
  88. package/dist/Editor/common/Icon.js +31 -1
  89. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  90. package/dist/Editor/common/ImageSelector/Styles.js +3 -9
  91. package/dist/Editor/common/LinkSettings/NavComponents.js +61 -56
  92. package/dist/Editor/common/LinkSettings/index.js +82 -81
  93. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  94. package/dist/Editor/common/LinkSettings/style.js +209 -74
  95. package/dist/Editor/common/MentionsPopup/index.js +4 -1
  96. package/dist/Editor/common/RadioGroup/index.js +48 -0
  97. package/dist/Editor/common/RadioGroup/styles.js +29 -0
  98. package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -15
  99. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
  100. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  101. package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
  102. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
  103. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  104. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  105. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  106. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  107. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  108. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  109. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  110. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  111. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  112. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  113. package/dist/Editor/common/RnD/ElementSettings/styles.js +146 -12
  114. package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
  115. package/dist/Editor/common/RnD/OptionsPopup/style.js +120 -19
  116. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
  117. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  118. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  119. package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
  120. package/dist/Editor/common/RnD/Utils/index.js +3 -1
  121. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +42 -58
  122. package/dist/Editor/common/RnD/VirtualElement/helper.js +323 -132
  123. package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
  124. package/dist/Editor/common/RnD/index.js +68 -39
  125. package/dist/Editor/common/Select/index.js +44 -5
  126. package/dist/Editor/common/Select/styles.js +30 -2
  127. package/dist/Editor/common/Shorthands/elements.js +65 -11
  128. package/dist/Editor/common/SnackBar/index.js +43 -0
  129. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  130. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
  131. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  132. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
  133. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  134. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  135. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  136. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  137. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  138. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
  139. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  140. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  141. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
  142. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
  143. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  144. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
  145. package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
  146. package/dist/Editor/common/Uploader.js +16 -0
  147. package/dist/Editor/common/iconListV2.js +177 -6
  148. package/dist/Editor/common/iconslist.js +24 -0
  149. package/dist/Editor/commonStyle.js +186 -62
  150. package/dist/Editor/helper/index.js +5 -1
  151. package/dist/Editor/helper/textIndeces.js +58 -0
  152. package/dist/Editor/helper/theme.js +203 -2
  153. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  154. package/dist/Editor/hooks/useMouseMove.js +8 -5
  155. package/dist/Editor/hooks/useTable.js +5 -4
  156. package/dist/Editor/hooks/useThemeValues.js +63 -0
  157. package/dist/Editor/plugins/withEmbeds.js +1 -1
  158. package/dist/Editor/plugins/withHTML.js +3 -1
  159. package/dist/Editor/plugins/withTable.js +1 -1
  160. package/dist/Editor/theme/ThemeList.js +50 -173
  161. package/dist/Editor/theme/index.js +149 -0
  162. package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
  163. package/dist/Editor/themeSettings/buttons/index.js +300 -0
  164. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  165. package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
  166. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  167. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  168. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  169. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  170. package/dist/Editor/themeSettings/icons.js +60 -0
  171. package/dist/Editor/themeSettings/index.js +380 -0
  172. package/dist/Editor/themeSettings/style.js +299 -0
  173. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  174. package/dist/Editor/themeSettingsAI/index.js +355 -0
  175. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  176. package/dist/Editor/themeSettingsAI/style.js +332 -0
  177. package/dist/Editor/utils/SlateUtilityFunctions.js +172 -46
  178. package/dist/Editor/utils/accordion.js +14 -4
  179. package/dist/Editor/utils/button.js +1 -17
  180. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  181. package/dist/Editor/utils/draftToSlate.js +3 -2
  182. package/dist/Editor/utils/events.js +50 -6
  183. package/dist/Editor/utils/font.js +40 -37
  184. package/dist/Editor/utils/form.js +4 -4
  185. package/dist/Editor/utils/formfield.js +9 -2
  186. package/dist/Editor/utils/helper.js +210 -26
  187. package/dist/Editor/utils/insertAppHeader.js +1 -1
  188. package/dist/Editor/utils/signature.js +2 -9
  189. package/dist/Editor/utils/updateFormName.js +22 -0
  190. package/package.json +4 -4
@@ -1,5 +1,9 @@
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";
3
7
  const isBulletOrTickIcon = (width, itemStartRow, startRow) => {
4
8
  return width <= 40 && itemStartRow === startRow;
5
9
  };
@@ -39,106 +43,83 @@ export const getGridArea = gridArea => {
39
43
  const getBoxToAutoAlign = (editor, sectionPath) => {
40
44
  const [boxData] = Editor.nodes(editor, {
41
45
  at: sectionPath,
42
- match: node => node.type === "freegridBox" && node.autoAlign
46
+ match: node => ["freegridBox", "freegrid"].includes(node.type) && node.autoAlign
43
47
  });
44
48
  return boxData || [];
45
49
  };
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;
73
50
 
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
- };
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
+
142
123
  const getAncestorFreeGridContainers = (editor, path) => {
143
124
  const containers = [...Editor.nodes(editor, {
144
125
  at: path,
@@ -151,6 +132,37 @@ const getAncestorFreeGridContainers = (editor, path) => {
151
132
  })].filter(([node, nodePath]) => nodePath.length <= path.length);
152
133
  return containers;
153
134
  };
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
+ };
154
166
  export const handleContainers = (editor, boxPath, extraHeight) => {
155
167
  const containers = getAncestorFreeGridContainers(editor, boxPath);
156
168
  let lastChildStartRow;
@@ -212,7 +224,7 @@ export const moveOverlappedItems = (editor, moveRows, containerItems, containerP
212
224
  if (isChildEle) {
213
225
  return;
214
226
  }
215
- if (gridItem.type === "paragraph") {
227
+ if (!RND_ITEMS.includes(gridItem.type)) {
216
228
  return;
217
229
  }
218
230
  const {
@@ -235,7 +247,196 @@ export const moveOverlappedItems = (editor, moveRows, containerItems, containerP
235
247
  }
236
248
  });
237
249
  };
238
- export const handleBoxAlignment = (editor, sectionNode, sectionPath) => {
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) => {
239
440
  const [boxNode, boxPath] = getBoxToAutoAlign(editor, sectionPath);
240
441
  Transforms.setNodes(editor, {
241
442
  autoAlign: false
@@ -245,39 +446,11 @@ export const handleBoxAlignment = (editor, sectionNode, sectionPath) => {
245
446
  if (!boxNode) {
246
447
  return;
247
448
  }
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
- });
449
+ if (heightDiff <= 0) {
450
+ return;
280
451
  }
452
+ let containers = getAncestorFreeGridContainers(editor, boxPath);
453
+ handleContainersAlignment(editor, containers, heightDiff, 12);
281
454
  };
282
455
  export const getMarginTop = y => {
283
456
  const calcMargin = y % ROW_HEIGHT;
@@ -295,7 +468,7 @@ export const calculateProps = (curPath, dom, domClass, allData, parentDom, isBox
295
468
  const itemsData = [];
296
469
  const items = dom.querySelectorAll(domClass);
297
470
  const nextItemPathLength = curPath?.split("|").length + 2;
298
- let sectionHeight = 12;
471
+ // let sectionHeight = 12;
299
472
  for (let i = 0; i < items.length; i++) {
300
473
  const itemRect = items[i]?.getBoundingClientRect();
301
474
  if (items[i]?.classList.contains("type_box")) {
@@ -315,9 +488,10 @@ export const calculateProps = (curPath, dom, domClass, allData, parentDom, isBox
315
488
  gridArea: calculateGridArea(y)
316
489
  }
317
490
  });
318
- sectionHeight += itemRect?.height;
491
+ // sectionHeight += itemRect?.height;
319
492
  }
320
493
  }
494
+
321
495
  if (dom?.classList.contains("type_box") && parentDom) {
322
496
  const parentDomRect = parentDom?.getBoundingClientRect();
323
497
  const isAppHeader = isBoxHeader || dom?.classList.contains("appHeaderBox");
@@ -379,4 +553,21 @@ export const sortElements = (items, container) => {
379
553
  }
380
554
  }
381
555
  });
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
+ };
382
573
  };
@@ -18,6 +18,14 @@ 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
+ },
21
29
  "& .freegrid-item": {
22
30
  position: "relative !important",
23
31
  top: "0 !important",
@@ -97,6 +105,14 @@ export const useAutoAlignStyles = () => ({
97
105
  "&.type_text": {
98
106
  height: "auto !important"
99
107
  },
108
+ "& .fgi_type_text": {
109
+ "& .edt-headings": {
110
+ margin: "0px"
111
+ },
112
+ "& .edt-paragraphs": {
113
+ margin: "0px"
114
+ }
115
+ },
100
116
  // start - default signature classes on free-grid
101
117
  "& .fgi_type_signature": {
102
118
  height: "100%",