@flozy/editor 10.3.8 → 10.4.0

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 (189) hide show
  1. package/dist/Editor/ChatEditor.js +16 -17
  2. package/dist/Editor/CommonEditor.js +18 -134
  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/MultiSelectType.js +8 -23
  17. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +2 -5
  18. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +2 -3
  19. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +0 -11
  20. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +4 -8
  21. package/dist/Editor/Elements/Embed/Image.js +2 -3
  22. package/dist/Editor/Elements/Embed/Video.js +1 -1
  23. package/dist/Editor/Elements/EmbedScript/Code.js +2 -14
  24. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +28 -57
  25. package/dist/Editor/Elements/Form/Form.js +171 -184
  26. package/dist/Editor/Elements/Form/FormElements/FormText.js +6 -23
  27. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -2
  28. package/dist/Editor/Elements/Form/FormField.js +6 -13
  29. package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
  30. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +32 -40
  31. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
  32. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +0 -1
  33. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  34. package/dist/Editor/Elements/FreeGrid/styles.js +7 -75
  35. package/dist/Editor/Elements/Grid/Grid.js +2 -14
  36. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  37. package/dist/Editor/Elements/List/CheckList.js +2 -3
  38. package/dist/Editor/Elements/Search/SearchAttachment.js +9 -40
  39. package/dist/Editor/Elements/Search/SearchButton.js +8 -9
  40. package/dist/Editor/Elements/Search/SearchList.js +7 -9
  41. package/dist/Editor/Elements/Signature/Signature.css +1 -2
  42. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +5 -18
  43. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +3 -16
  44. package/dist/Editor/Elements/SimpleText/index.js +1 -6
  45. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  46. package/dist/Editor/Elements/Table/DragButton.js +1 -0
  47. package/dist/Editor/Elements/Table/Draggable.js +2 -6
  48. package/dist/Editor/Elements/Table/Styles.js +0 -7
  49. package/dist/Editor/Elements/Table/Table.js +3 -3
  50. package/dist/Editor/Elements/Table/TableCell.js +8 -31
  51. package/dist/Editor/Elements/Title/title.js +6 -6
  52. package/dist/Editor/Elements/Variables/VariableButton.js +1 -10
  53. package/dist/Editor/MiniEditor.js +1 -2
  54. package/dist/Editor/Styles/EditorStyles.js +5 -5
  55. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  56. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  57. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  58. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -10
  59. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  60. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +2 -4
  61. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
  62. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
  63. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -7
  64. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
  65. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -72
  66. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +27 -100
  67. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  68. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  69. package/dist/Editor/assets/svg/SettingsIcon.js +0 -1
  70. package/dist/Editor/common/ColorPickerButton.js +16 -41
  71. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  72. package/dist/Editor/common/FontLoader/FontLoader.js +0 -3
  73. package/dist/Editor/common/Icon.js +1 -31
  74. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  75. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  76. package/dist/Editor/common/LinkSettings/NavComponents.js +56 -61
  77. package/dist/Editor/common/LinkSettings/index.js +81 -82
  78. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  79. package/dist/Editor/common/LinkSettings/style.js +74 -209
  80. package/dist/Editor/common/RnD/ElementOptions/Actions.js +15 -13
  81. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +0 -1
  82. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  83. package/dist/Editor/common/RnD/ElementOptions/styles.js +1 -28
  84. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +5 -6
  85. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +3 -4
  86. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  87. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  88. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  89. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  90. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
  91. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
  92. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  93. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
  94. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
  95. package/dist/Editor/common/RnD/ElementSettings/styles.js +12 -146
  96. package/dist/Editor/common/RnD/OptionsPopup/index.js +5 -8
  97. package/dist/Editor/common/RnD/OptionsPopup/style.js +19 -120
  98. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +5 -8
  99. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  100. package/dist/Editor/common/RnD/Utils/gridDropItem.js +19 -28
  101. package/dist/Editor/common/RnD/Utils/index.js +1 -3
  102. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +58 -42
  103. package/dist/Editor/common/RnD/VirtualElement/helper.js +132 -323
  104. package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -16
  105. package/dist/Editor/common/RnD/index.js +39 -68
  106. package/dist/Editor/common/Select/index.js +5 -44
  107. package/dist/Editor/common/Select/styles.js +2 -30
  108. package/dist/Editor/common/Shorthands/elements.js +11 -65
  109. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  110. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +9 -12
  111. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  112. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -4
  113. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  114. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  115. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  116. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
  117. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
  118. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
  119. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
  120. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +6 -7
  121. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +6 -13
  122. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  123. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +7 -5
  124. package/dist/Editor/common/SwipeableDrawer/style.js +12 -14
  125. package/dist/Editor/common/Uploader.js +0 -16
  126. package/dist/Editor/common/iconListV2.js +6 -177
  127. package/dist/Editor/common/iconslist.js +0 -24
  128. package/dist/Editor/commonStyle.js +62 -186
  129. package/dist/Editor/helper/index.js +1 -5
  130. package/dist/Editor/helper/theme.js +2 -203
  131. package/dist/Editor/hooks/useMouseMove.js +5 -8
  132. package/dist/Editor/hooks/useTable.js +4 -5
  133. package/dist/Editor/plugins/withEmbeds.js +1 -1
  134. package/dist/Editor/plugins/withHTML.js +1 -3
  135. package/dist/Editor/plugins/withTable.js +1 -1
  136. package/dist/Editor/theme/ThemeList.js +173 -50
  137. package/dist/Editor/utils/SlateUtilityFunctions.js +46 -172
  138. package/dist/Editor/utils/accordion.js +4 -14
  139. package/dist/Editor/utils/button.js +17 -1
  140. package/dist/Editor/utils/customHooks/useTableResize.js +9 -49
  141. package/dist/Editor/utils/draftToSlate.js +2 -3
  142. package/dist/Editor/utils/events.js +6 -50
  143. package/dist/Editor/utils/font.js +37 -40
  144. package/dist/Editor/utils/form.js +4 -4
  145. package/dist/Editor/utils/formfield.js +2 -9
  146. package/dist/Editor/utils/helper.js +26 -188
  147. package/dist/Editor/utils/insertAppHeader.js +1 -1
  148. package/dist/Editor/utils/signature.js +9 -2
  149. package/package.json +4 -4
  150. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +0 -454
  151. package/dist/Editor/Elements/EmbedScript/styles.js +0 -89
  152. package/dist/Editor/Elements/FreeGrid/helper.js +0 -115
  153. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
  154. package/dist/Editor/assets/svg/BackIcon.js +0 -18
  155. package/dist/Editor/assets/svg/ClearAllRounded.js +0 -31
  156. package/dist/Editor/assets/svg/ResetIconNew.js +0 -23
  157. package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
  158. package/dist/Editor/common/Checkbox/index.js +0 -46
  159. package/dist/Editor/common/Checkbox/styles.js +0 -45
  160. package/dist/Editor/common/CustomColorPicker/index.js +0 -130
  161. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  162. package/dist/Editor/common/CustomDialog2/index.js +0 -94
  163. package/dist/Editor/common/CustomDialog2/style.js +0 -67
  164. package/dist/Editor/common/CustomSelect.js +0 -43
  165. package/dist/Editor/common/RadioGroup/index.js +0 -48
  166. package/dist/Editor/common/RadioGroup/styles.js +0 -29
  167. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  168. package/dist/Editor/common/SnackBar/index.js +0 -43
  169. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +0 -115
  170. package/dist/Editor/helper/textIndeces.js +0 -58
  171. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  172. package/dist/Editor/hooks/useThemeValues.js +0 -63
  173. package/dist/Editor/theme/index.js +0 -149
  174. package/dist/Editor/themeSettings/ActiveTheme.js +0 -82
  175. package/dist/Editor/themeSettings/buttons/index.js +0 -300
  176. package/dist/Editor/themeSettings/buttons/style.js +0 -23
  177. package/dist/Editor/themeSettings/colorTheme/index.js +0 -310
  178. package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
  179. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  180. package/dist/Editor/themeSettings/fonts/index.js +0 -240
  181. package/dist/Editor/themeSettings/fonts/style.js +0 -62
  182. package/dist/Editor/themeSettings/icons.js +0 -60
  183. package/dist/Editor/themeSettings/index.js +0 -380
  184. package/dist/Editor/themeSettings/style.js +0 -299
  185. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  186. package/dist/Editor/themeSettingsAI/index.js +0 -355
  187. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
  188. package/dist/Editor/themeSettingsAI/style.js +0 -332
  189. package/dist/Editor/utils/updateFormName.js +0 -22
@@ -1,45 +1,69 @@
1
1
  import { useEffect, useRef } from "react";
2
+ import { Path, Transforms } from "slate";
2
3
  import { getNode } from "../../../utils/helper";
3
4
  import { ROW_HEIGHT } from "../Utils/gridDropItem";
4
- import { getGridArea, getNodeValues, handleTextAlignment } from "./helper";
5
+ import { findFirstRowOverlap, getGridArea, handleContainers, moveOverlappedItems } from "./helper";
5
6
  import { Box } from "@mui/material";
6
7
  import { jsx as _jsx } from "react/jsx-runtime";
7
- export const getElementOffset = (element, breakpoint) => {
8
- const {
9
- height,
10
- gridArea,
11
- marginTop
12
- } = getNodeValues(element, breakpoint);
13
- const [startRow] = getGridArea(gridArea);
14
- const top = (startRow - 1) * ROW_HEIGHT + marginTop;
15
- const bottom = top + height;
16
- return {
17
- top,
18
- bottom
19
- };
20
- };
21
- export const updateTextHeight = (editor, path, currHeight, updateBreakpoint) => {
22
- if (!currHeight) {
8
+ const updateTextHeight = (editor, path, height) => {
9
+ if (!height) {
23
10
  return;
24
11
  }
25
- const textItem = getNode(editor, path);
26
- if (!textItem) {
12
+ const parentPath = Path.parent(path);
13
+ const currentNode = getNode(editor, parentPath);
14
+ const gridItems = currentNode?.children || [];
15
+ const isNewlyAddedElement = gridItems.some(gridItem => !gridItem.gridArea_xs && gridItem.type !== "paragraph");
16
+ if (isNewlyAddedElement) {
27
17
  return;
28
18
  }
19
+ const textItemIndex = path[parentPath.length];
20
+ const textItem = gridItems.find((_, index) => textItemIndex === index);
29
21
  const {
30
- height,
31
- gridArea,
32
- type
33
- } = getNodeValues(textItem, updateBreakpoint);
34
- if (!gridArea && type !== "paragraph") {
35
- return;
36
- }
37
- const oldHeight = height;
38
- const newHeight = currHeight;
39
- const heightDiff = newHeight - oldHeight;
40
- if (heightDiff !== 0) {
41
- const textNode = [textItem, path];
42
- handleTextAlignment(editor, textNode, heightDiff, updateBreakpoint);
22
+ marginTop_xs: marginTop,
23
+ gridArea_xs: gridArea,
24
+ height_xs
25
+ } = textItem;
26
+ const oldHeight = height_xs + marginTop;
27
+ const newHeight = height + marginTop;
28
+ const extraHeight = newHeight - oldHeight;
29
+ let containerExtraHeight = extraHeight;
30
+ if (extraHeight > 0) {
31
+ const [startRow] = getGridArea(gridArea);
32
+ const newRows = Math.floor(newHeight / ROW_HEIGHT) + 1;
33
+ const endRow = startRow + newRows;
34
+ const firstOverlappedRow = findFirstRowOverlap(gridItems, startRow, endRow, textItemIndex);
35
+ if (firstOverlappedRow) {
36
+ const moveRows = endRow - firstOverlappedRow;
37
+ moveOverlappedItems(editor, moveRows, gridItems, parentPath, textItemIndex, startRow);
38
+ containerExtraHeight += moveRows * ROW_HEIGHT;
39
+ }
40
+
41
+ // handle containers (box and section)
42
+ const containerData = handleContainers(editor, parentPath, containerExtraHeight);
43
+ containerData.forEach(container => {
44
+ const {
45
+ moveRows,
46
+ containerNode,
47
+ containerPath,
48
+ newHeight,
49
+ childIndex,
50
+ lastChildStartRow
51
+ } = container;
52
+ if (moveRows) {
53
+ moveOverlappedItems(editor, moveRows, containerNode?.children, containerPath, childIndex, lastChildStartRow);
54
+ }
55
+ Transforms.setNodes(editor, {
56
+ height_xs: newHeight,
57
+ xs_updatedOn: new Date().getTime()
58
+ }, {
59
+ at: containerPath
60
+ });
61
+ });
62
+ Transforms.setNodes(editor, {
63
+ height_xs: height
64
+ }, {
65
+ at: path
66
+ });
43
67
  }
44
68
  };
45
69
  function VirtualTextElement(props) {
@@ -59,9 +83,9 @@ function VirtualTextElement(props) {
59
83
  height
60
84
  } = entry.contentRect;
61
85
  const currentText = currElement?.innerText;
62
- const prevText = prevTextRef?.current;
86
+ const prevText = prevTextRef.current;
63
87
  if (currentText && currentText !== prevText) {
64
- updateTextHeight(editor, path, height, "xs");
88
+ updateTextHeight(editor, path, height);
65
89
  }
66
90
  prevTextRef.current = currentText;
67
91
  }
@@ -98,14 +122,6 @@ function VirtualTextElement(props) {
98
122
  },
99
123
  "& .editor-blocker": {
100
124
  display: "none"
101
- },
102
- "& .fgi_type_text": {
103
- "& .edt-headings": {
104
- margin: "0px"
105
- },
106
- "& .edt-paragraphs": {
107
- margin: "0px"
108
- }
109
125
  }
110
126
  },
111
127
  dangerouslySetInnerHTML: {
@@ -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%",