@flozy/editor 10.1.4 → 10.1.6

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 (172) hide show
  1. package/dist/Editor/ChatEditor.js +17 -16
  2. package/dist/Editor/CommonEditor.js +120 -16
  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 +6 -2
  7. package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
  8. package/dist/Editor/Elements/Button/EditorButton.js +25 -9
  9. package/dist/Editor/Elements/Carousel/CarouselItem.js +2 -1
  10. package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
  11. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
  13. package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
  14. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
  15. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +454 -0
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +21 -6
  17. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +5 -1
  18. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +3 -2
  19. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
  20. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
  21. package/dist/Editor/Elements/Embed/Image.js +3 -2
  22. package/dist/Editor/Elements/Embed/Video.js +1 -1
  23. package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
  24. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
  25. package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
  26. package/dist/Editor/Elements/Form/Form.js +181 -168
  27. package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
  28. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +3 -2
  29. package/dist/Editor/Elements/Form/FormField.js +13 -6
  30. package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
  31. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +36 -31
  32. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
  33. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  34. package/dist/Editor/Elements/FreeGrid/helper.js +113 -0
  35. package/dist/Editor/Elements/FreeGrid/styles.js +67 -7
  36. package/dist/Editor/Elements/Grid/Grid.js +14 -2
  37. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  38. package/dist/Editor/Elements/List/CheckList.js +4 -1
  39. package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
  40. package/dist/Editor/Elements/Search/SearchButton.js +9 -8
  41. package/dist/Editor/Elements/Search/SearchList.js +9 -7
  42. package/dist/Editor/Elements/Signature/Signature.css +2 -1
  43. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
  44. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
  45. package/dist/Editor/Elements/SimpleText/index.js +6 -1
  46. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  47. package/dist/Editor/Elements/Table/DragButton.js +0 -1
  48. package/dist/Editor/Elements/Table/Draggable.js +6 -2
  49. package/dist/Editor/Elements/Table/Styles.js +7 -0
  50. package/dist/Editor/Elements/Table/Table.js +3 -3
  51. package/dist/Editor/Elements/Table/TableCell.js +24 -5
  52. package/dist/Editor/Elements/Title/title.js +6 -6
  53. package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
  54. package/dist/Editor/MiniEditor.js +2 -1
  55. package/dist/Editor/Styles/EditorStyles.js +5 -5
  56. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  57. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
  58. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  59. package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
  60. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  61. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
  62. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
  63. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
  64. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
  65. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
  66. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
  67. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
  68. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
  69. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  70. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  71. package/dist/Editor/assets/svg/BackIcon.js +18 -0
  72. package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
  73. package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
  74. package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
  75. package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
  76. package/dist/Editor/common/ColorPickerButton.js +39 -17
  77. package/dist/Editor/common/CustomColorPicker/index.js +130 -0
  78. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  79. package/dist/Editor/common/CustomDialog2/index.js +94 -0
  80. package/dist/Editor/common/CustomDialog2/style.js +67 -0
  81. package/dist/Editor/common/CustomSelect.js +43 -0
  82. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  83. package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
  84. package/dist/Editor/common/Icon.js +31 -1
  85. package/dist/Editor/common/ImageSelector/Styles.js +3 -9
  86. package/dist/Editor/common/LinkSettings/NavComponents.js +34 -8
  87. package/dist/Editor/common/LinkSettings/index.js +84 -68
  88. package/dist/Editor/common/LinkSettings/style.js +245 -30
  89. package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -14
  90. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
  91. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  92. package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
  93. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
  94. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  95. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  96. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  97. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  98. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  99. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  100. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  101. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  102. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  103. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  104. package/dist/Editor/common/RnD/ElementSettings/styles.js +147 -12
  105. package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
  106. package/dist/Editor/common/RnD/OptionsPopup/style.js +121 -19
  107. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
  108. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  109. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  110. package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
  111. package/dist/Editor/common/RnD/Utils/index.js +3 -1
  112. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +48 -57
  113. package/dist/Editor/common/RnD/VirtualElement/helper.js +143 -131
  114. package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
  115. package/dist/Editor/common/RnD/index.js +5 -10
  116. package/dist/Editor/common/Select/index.js +2 -0
  117. package/dist/Editor/common/Shorthands/elements.js +54 -0
  118. package/dist/Editor/common/SnackBar/index.js +43 -0
  119. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  120. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  121. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  122. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  123. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  124. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  125. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  126. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
  127. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
  128. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  129. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
  130. package/dist/Editor/common/Uploader.js +8 -0
  131. package/dist/Editor/common/iconListV2.js +156 -6
  132. package/dist/Editor/common/iconslist.js +24 -0
  133. package/dist/Editor/commonStyle.js +168 -62
  134. package/dist/Editor/helper/index.js +4 -0
  135. package/dist/Editor/helper/textIndeces.js +58 -0
  136. package/dist/Editor/helper/theme.js +203 -2
  137. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  138. package/dist/Editor/hooks/useMouseMove.js +8 -5
  139. package/dist/Editor/hooks/useTable.js +5 -4
  140. package/dist/Editor/hooks/useThemeValues.js +63 -0
  141. package/dist/Editor/plugins/withEmbeds.js +1 -1
  142. package/dist/Editor/plugins/withHTML.js +3 -1
  143. package/dist/Editor/plugins/withTable.js +1 -1
  144. package/dist/Editor/theme/ThemeList.js +50 -173
  145. package/dist/Editor/theme/index.js +149 -0
  146. package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
  147. package/dist/Editor/themeSettings/buttons/index.js +300 -0
  148. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  149. package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
  150. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  151. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  152. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  153. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  154. package/dist/Editor/themeSettings/icons.js +60 -0
  155. package/dist/Editor/themeSettings/index.js +361 -0
  156. package/dist/Editor/themeSettings/style.js +299 -0
  157. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  158. package/dist/Editor/themeSettingsAI/index.js +355 -0
  159. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  160. package/dist/Editor/themeSettingsAI/style.js +332 -0
  161. package/dist/Editor/utils/SlateUtilityFunctions.js +166 -43
  162. package/dist/Editor/utils/accordion.js +14 -4
  163. package/dist/Editor/utils/button.js +1 -17
  164. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  165. package/dist/Editor/utils/draftToSlate.js +3 -2
  166. package/dist/Editor/utils/events.js +50 -6
  167. package/dist/Editor/utils/font.js +40 -37
  168. package/dist/Editor/utils/form.js +4 -4
  169. package/dist/Editor/utils/formfield.js +8 -2
  170. package/dist/Editor/utils/helper.js +109 -19
  171. package/dist/Editor/utils/signature.js +2 -9
  172. package/package.json +4 -4
@@ -1,71 +1,57 @@
1
1
  import { useEffect, useRef } from "react";
2
- import { Path, Transforms } from "slate";
3
2
  import { getNode } from "../../../utils/helper";
4
3
  import { ROW_HEIGHT } from "../Utils/gridDropItem";
5
- import { findFirstRowOverlap, getGridArea, handleContainers, moveOverlappedItems } from "./helper";
4
+ import { getGridArea, handleTextAlignment } from "./helper";
6
5
  import { Box } from "@mui/material";
7
6
  import { jsx as _jsx } from "react/jsx-runtime";
7
+ export const getElementOffset = element => {
8
+ const {
9
+ marginTop_xs: marginTop,
10
+ gridArea_xs: gridArea,
11
+ height_xs: height
12
+ } = element;
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
+ };
8
21
  const updateTextHeight = (editor, path, height) => {
9
22
  if (!height) {
10
23
  return;
11
24
  }
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) {
25
+ const textItem = getNode(editor, path);
26
+ if (!textItem) {
17
27
  return;
18
28
  }
19
- const textItemIndex = path[parentPath.length];
20
- const textItem = gridItems.find((_, index) => textItemIndex === index);
21
29
  const {
22
- marginTop_xs: marginTop,
23
- gridArea_xs: gridArea,
24
- height_xs
30
+ height_xs,
31
+ gridArea_xs,
32
+ type
25
33
  } = 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
- });
34
+ if (!gridArea_xs && type !== "paragraph") {
35
+ return;
67
36
  }
37
+ const oldHeight = height_xs;
38
+ const newHeight = height;
39
+ const heightDiff = newHeight - oldHeight;
40
+ if (heightDiff !== 0) {
41
+ const textNode = [textItem, path];
42
+ handleTextAlignment(editor, textNode, heightDiff);
43
+ }
44
+ // else if (heightDiff < 0) {
45
+ // Transforms.setNodes(
46
+ // editor,
47
+ // {
48
+ // height_xs: newHeight,
49
+ // },
50
+ // { at: path }
51
+ // );
52
+ // }
68
53
  };
54
+
69
55
  function VirtualTextElement(props) {
70
56
  const {
71
57
  dataSets,
@@ -75,7 +61,6 @@ function VirtualTextElement(props) {
75
61
  } = props;
76
62
  const currElement = getCurrentEle();
77
63
  const textRef = useRef(null);
78
- const prevTextRef = useRef(currElement?.innerText);
79
64
  useEffect(() => {
80
65
  const observer = new ResizeObserver(([entry]) => {
81
66
  if (entry) {
@@ -83,11 +68,9 @@ function VirtualTextElement(props) {
83
68
  height
84
69
  } = entry.contentRect;
85
70
  const currentText = currElement?.innerText;
86
- const prevText = prevTextRef.current;
87
- if (currentText && currentText !== prevText) {
71
+ if (currentText && height) {
88
72
  updateTextHeight(editor, path, height);
89
73
  }
90
- prevTextRef.current = currentText;
91
74
  }
92
75
  });
93
76
  const elementRef = textRef?.current;
@@ -122,6 +105,14 @@ function VirtualTextElement(props) {
122
105
  },
123
106
  "& .editor-blocker": {
124
107
  display: "none"
108
+ },
109
+ "& .fgi_type_text": {
110
+ "& .edt-headings": {
111
+ margin: "0px"
112
+ },
113
+ "& .edt-paragraphs": {
114
+ margin: "0px"
115
+ }
125
116
  }
126
117
  },
127
118
  dangerouslySetInnerHTML: {
@@ -1,5 +1,6 @@
1
1
  import { ROW_HEIGHT, calculateGridArea } from "../Utils/gridDropItem";
2
2
  import { Transforms, Editor } from "slate";
3
+ import { getElementOffset } from "./VirtualTextElement";
3
4
  const isBulletOrTickIcon = (width, itemStartRow, startRow) => {
4
5
  return width <= 40 && itemStartRow === startRow;
5
6
  };
@@ -39,106 +40,83 @@ export const getGridArea = gridArea => {
39
40
  const getBoxToAutoAlign = (editor, sectionPath) => {
40
41
  const [boxData] = Editor.nodes(editor, {
41
42
  at: sectionPath,
42
- match: node => node.type === "freegridBox" && node.autoAlign
43
+ match: node => ["freegridBox", "freegrid"].includes(node.type) && node.autoAlign
43
44
  });
44
45
  return boxData || [];
45
46
  };
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
47
 
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
- };
48
+ // const handleGridItems = (gridItems, lastRow) => {
49
+ // // to find the previously occupied rows
50
+ // gridItems.forEach((item) => {
51
+ // const { gridArea_xs: gridArea, marginTop_xs, height_xs, type } = item;
52
+
53
+ // if (type === "paragraph") {
54
+ // // non-freegridItem,
55
+ // // some "paragraph" node is defaulty coming inside in box's children
56
+ // return;
57
+ // }
58
+
59
+ // const [startRow] = getGridArea(gridArea);
60
+ // const marginTop = marginTop_xs ? Number(marginTop_xs) : 0;
61
+ // const fullHeight = Number(height_xs) + marginTop;
62
+
63
+ // const endRow = startRow + Math.floor(fullHeight / ROW_HEIGHT) + 1;
64
+
65
+ // lastRow = Math.max(endRow, lastRow);
66
+ // });
67
+
68
+ // return { lastRow };
69
+ // };
70
+
71
+ // const handleNonGridItems = (nonGridItems, lastRow, editor, boxPath) => {
72
+ // let containerHeight = (lastRow - 1) * ROW_HEIGHT;
73
+
74
+ // let newlyAddedHeight = 0;
75
+
76
+ // //place it on the next rows that are available
77
+ // nonGridItems.forEach((item, index) => {
78
+ // const { height_xs, type, itemIndex } = item;
79
+
80
+ // if (type === "paragraph") {
81
+ // // non-freegridItem
82
+ // return;
83
+ // }
84
+
85
+ // const startRow = lastRow || 1;
86
+
87
+ // const DEFAULT_NEW_ELEMENT_MARGIN_TOP = 12;
88
+ // let fullHeight = height_xs + DEFAULT_NEW_ELEMENT_MARGIN_TOP;
89
+
90
+ // const endRow = startRow + Math.floor(fullHeight / ROW_HEIGHT) + 1;
91
+
92
+ // const newGridArea = `${startRow} / 1 / ${startRow + 1} / 2`;
93
+
94
+ // const currentElementPath = [...boxPath, itemIndex];
95
+
96
+ // Transforms.setNodes(
97
+ // editor,
98
+ // {
99
+ // gridArea_xs: newGridArea,
100
+ // marginTop_xs: 12,
101
+ // left_xs: 12,
102
+ // xs_updatedOn: new Date().getTime(),
103
+ // },
104
+ // { at: currentElementPath }
105
+ // );
106
+
107
+ // lastRow = Math.max(endRow, lastRow);
108
+
109
+ // containerHeight += fullHeight;
110
+ // newlyAddedHeight += fullHeight;
111
+ // });
112
+
113
+ // return {
114
+ // lastRow,
115
+ // containerHeight,
116
+ // newlyAddedHeight,
117
+ // };
118
+ // };
119
+
142
120
  const getAncestorFreeGridContainers = (editor, path) => {
143
121
  const containers = [...Editor.nodes(editor, {
144
122
  at: path,
@@ -151,6 +129,12 @@ const getAncestorFreeGridContainers = (editor, path) => {
151
129
  })].filter(([node, nodePath]) => nodePath.length <= path.length);
152
130
  return containers;
153
131
  };
132
+ export const handleTextAlignment = (editor, textNode, heightDiff) => {
133
+ const [, textPath] = textNode;
134
+ let containers = getAncestorFreeGridContainers(editor, textPath);
135
+ containers = [...containers, textNode];
136
+ handleContainersAlignment(editor, containers, heightDiff, 0);
137
+ };
154
138
  export const handleContainers = (editor, boxPath, extraHeight) => {
155
139
  const containers = getAncestorFreeGridContainers(editor, boxPath);
156
140
  let lastChildStartRow;
@@ -213,6 +197,7 @@ export const moveOverlappedItems = (editor, moveRows, containerItems, containerP
213
197
  return;
214
198
  }
215
199
  if (gridItem.type === "paragraph") {
200
+ // some empty paragraph node is inserted default'ly inside box, to avoid that
216
201
  return;
217
202
  }
218
203
  const {
@@ -235,7 +220,61 @@ export const moveOverlappedItems = (editor, moveRows, containerItems, containerP
235
220
  }
236
221
  });
237
222
  };
238
- export const handleBoxAlignment = (editor, sectionNode, sectionPath) => {
223
+ export const handleContainersAlignment = (editor, containers, heightDiff, bufferSpace = 0) => {
224
+ for (let i = containers.length - 1; i >= 0; i--) {
225
+ const container = containers[i];
226
+ const childContainer = containers[i + 1];
227
+ const [containerNode, containerPath] = container;
228
+ const [childContainerNode, childContainerPath] = childContainer || [];
229
+ if (childContainer) {
230
+ const {
231
+ bottom
232
+ } = getElementOffset(childContainerNode);
233
+ containerNode.children.forEach((item, index) => {
234
+ const currPath = [...containerPath, index];
235
+ if (currPath.toString() === childContainerPath.toString()) {
236
+ return;
237
+ }
238
+ if (item.type === "paragraph") {
239
+ return;
240
+ }
241
+ const {
242
+ top: itemTop
243
+ } = getElementOffset(item);
244
+ if (itemTop >= bottom) {
245
+ const {
246
+ gridArea_xs,
247
+ marginTop_xs
248
+ } = item;
249
+ const [startRow] = getGridArea(gridArea_xs);
250
+ const y = (startRow - 1) * ROW_HEIGHT + marginTop_xs + heightDiff;
251
+
252
+ // Calculate grid position
253
+ const row = Math.floor(y / ROW_HEIGHT) + 1;
254
+
255
+ // to calculate difference inside the grid
256
+ const marginTop = Math.abs((row - 1) * ROW_HEIGHT - y);
257
+
258
+ // Update grid area
259
+ const gridArea = `${row} / 1 / ${row + 1} / 2`;
260
+ Transforms.setNodes(editor, {
261
+ gridArea_xs: gridArea,
262
+ marginTop_xs: marginTop + bufferSpace
263
+ }, {
264
+ at: currPath
265
+ });
266
+ }
267
+ });
268
+ }
269
+ Transforms.setNodes(editor, {
270
+ height_xs: containerNode?.height_xs + heightDiff + bufferSpace,
271
+ xs_updatedOn: new Date().getTime()
272
+ }, {
273
+ at: containerPath
274
+ });
275
+ }
276
+ };
277
+ export const handleBoxAlignment = (editor, sectionPath, heightDiff) => {
239
278
  const [boxNode, boxPath] = getBoxToAutoAlign(editor, sectionPath);
240
279
  Transforms.setNodes(editor, {
241
280
  autoAlign: false
@@ -245,39 +284,11 @@ export const handleBoxAlignment = (editor, sectionNode, sectionPath) => {
245
284
  if (!boxNode) {
246
285
  return;
247
286
  }
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
- });
287
+ if (heightDiff <= 0) {
288
+ return;
280
289
  }
290
+ let containers = getAncestorFreeGridContainers(editor, boxPath);
291
+ handleContainersAlignment(editor, containers, heightDiff, 12);
281
292
  };
282
293
  export const getMarginTop = y => {
283
294
  const calcMargin = y % ROW_HEIGHT;
@@ -295,7 +306,7 @@ export const calculateProps = (curPath, dom, domClass, allData, parentDom, isBox
295
306
  const itemsData = [];
296
307
  const items = dom.querySelectorAll(domClass);
297
308
  const nextItemPathLength = curPath?.split("|").length + 2;
298
- let sectionHeight = 12;
309
+ // let sectionHeight = 12;
299
310
  for (let i = 0; i < items.length; i++) {
300
311
  const itemRect = items[i]?.getBoundingClientRect();
301
312
  if (items[i]?.classList.contains("type_box")) {
@@ -315,9 +326,10 @@ export const calculateProps = (curPath, dom, domClass, allData, parentDom, isBox
315
326
  gridArea: calculateGridArea(y)
316
327
  }
317
328
  });
318
- sectionHeight += itemRect?.height;
329
+ // sectionHeight += itemRect?.height;
319
330
  }
320
331
  }
332
+
321
333
  if (dom?.classList.contains("type_box") && parentDom) {
322
334
  const parentDomRect = parentDom?.getBoundingClientRect();
323
335
  const isAppHeader = isBoxHeader || dom?.classList.contains("appHeaderBox");
@@ -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%",
@@ -12,7 +12,7 @@ import GuideLines from "./GuideLines";
12
12
  import ShadowElement from "./ShadowElement";
13
13
  import BoundaryLine from "./GuideLines/BoundaryLine";
14
14
  import ContextMenu from "./ContextMenu";
15
- import VirtualElement from "./VirtualElement";
15
+ // import VirtualElement from "./VirtualElement";
16
16
  import { ItemTypes } from "./ElementSettings/settingsConstants";
17
17
  import { selectText } from "../../utils/helper";
18
18
  import { removeSign } from "./ElementSettings/OtherSettings";
@@ -499,7 +499,9 @@ const RnD = props => {
499
499
  ref
500
500
  }, ".freegrid-container-parent");
501
501
  const formatParentPath = parentPath?.split("|")?.map(m => parseInt(m));
502
- reRenderChildNodes(editor, formatParentPath);
502
+ if (formatParentPath) {
503
+ reRenderChildNodes(editor, formatParentPath);
504
+ }
503
505
  };
504
506
  const onCloseSettings = () => {
505
507
  setSelectedElement({
@@ -681,14 +683,7 @@ const RnD = props => {
681
683
  handleClose: handleClose,
682
684
  theme: theme,
683
685
  translation: translation
684
- }), type === "parent" && breakpoint === "lg" && !readOnly ? /*#__PURE__*/_jsx(VirtualElement, {
685
- updated_at: updated_at,
686
- path: str_path,
687
- editor: editor,
688
- sectionElement: sectionElement,
689
- sectionCls: `.freegrid-section_${path.join("_")}`,
690
- dataSets: dataSets
691
- }) : null, childType === "text" && breakpoint === "lg" && !readOnly && enable ? /*#__PURE__*/_jsx(VirtualTextElement, {
686
+ }), childType === "text" && breakpoint === "lg" && !readOnly && enable ? /*#__PURE__*/_jsx(VirtualTextElement, {
692
687
  editor: editor,
693
688
  dataSets: dataSets,
694
689
  getCurrentEle: getCurrentEle,
@@ -1,6 +1,7 @@
1
1
  import { Select as Core } from "@mui/material";
2
2
  import SelectStyles from "./styles";
3
3
  import { useEditorContext } from "../../hooks/useMouseMove";
4
+ import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
4
5
  import { jsx as _jsx } from "react/jsx-runtime";
5
6
  function Select(props) {
6
7
  const {
@@ -13,6 +14,7 @@ function Select(props) {
13
14
  const classes = SelectStyles(theme);
14
15
  return /*#__PURE__*/_jsx(Core, {
15
16
  MenuProps: classes.MenuProps,
17
+ IconComponent: KeyboardArrowDownRoundedIcon,
16
18
  ...rest,
17
19
  children: children
18
20
  });
@@ -44,6 +44,60 @@ const ELEMENTS_LIST = [{
44
44
  icon: "headingThree"
45
45
  }),
46
46
  onInsert: editor => toggleBlock(editor, "headingThree", false)
47
+ }, {
48
+ name: "Heading 4",
49
+ desc: "",
50
+ group: "Text",
51
+ type: "headingFour",
52
+ icon: /*#__PURE__*/_jsx(Icon, {
53
+ icon: "headingFour"
54
+ }),
55
+ onInsert: editor => toggleBlock(editor, "headingFour", false)
56
+ }, {
57
+ name: "Heading 5",
58
+ desc: "",
59
+ group: "Text",
60
+ type: "headingFive",
61
+ icon: /*#__PURE__*/_jsx(Icon, {
62
+ icon: "headingFive"
63
+ }),
64
+ onInsert: editor => toggleBlock(editor, "headingFive", false)
65
+ }, {
66
+ name: "Heading 6",
67
+ desc: "",
68
+ group: "Text",
69
+ type: "headingSix",
70
+ icon: /*#__PURE__*/_jsx(Icon, {
71
+ icon: "headingSix"
72
+ }),
73
+ onInsert: editor => toggleBlock(editor, "headingSix", false)
74
+ }, {
75
+ name: "Paragraph 1",
76
+ desc: "",
77
+ group: "Text",
78
+ type: "paragraphOne",
79
+ icon: /*#__PURE__*/_jsx(Icon, {
80
+ icon: "paragraphOne"
81
+ }),
82
+ onInsert: editor => toggleBlock(editor, "paragraphOne", false)
83
+ }, {
84
+ name: "Paragraph 2",
85
+ desc: "",
86
+ group: "Text",
87
+ type: "paragraphTwo",
88
+ icon: /*#__PURE__*/_jsx(Icon, {
89
+ icon: "paragraphTwo"
90
+ }),
91
+ onInsert: editor => toggleBlock(editor, "paragraphTwo", false)
92
+ }, {
93
+ name: "Paragraph 3",
94
+ desc: "",
95
+ group: "Text",
96
+ type: "paragraphThree",
97
+ icon: /*#__PURE__*/_jsx(Icon, {
98
+ icon: "paragraphThree"
99
+ }),
100
+ onInsert: editor => toggleBlock(editor, "paragraphThree", false)
47
101
  }, {
48
102
  name: "Quote",
49
103
  desc: "",
@@ -0,0 +1,43 @@
1
+ import Snackbar from "@mui/material/Snackbar";
2
+ import Alert from "@mui/material/Alert";
3
+ import { useState } from "react";
4
+ import { useEditorContext } from "../../hooks/useMouseMove";
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ const SnackbarAlert = ({
7
+ message,
8
+ setShowSnackBar,
9
+ severity = "info"
10
+ }) => {
11
+ const [open, setOpen] = useState(!!message);
12
+ const {
13
+ theme
14
+ } = useEditorContext();
15
+ return /*#__PURE__*/_jsx(Snackbar, {
16
+ open: open,
17
+ autoHideDuration: 3000,
18
+ onClose: () => {
19
+ setOpen(false);
20
+ setShowSnackBar(false);
21
+ },
22
+ anchorOrigin: {
23
+ vertical: "top",
24
+ horizontal: "right"
25
+ },
26
+ children: /*#__PURE__*/_jsx(Alert, {
27
+ severity: severity,
28
+ onClose: () => {
29
+ setOpen(false);
30
+ setShowSnackBar(false);
31
+ },
32
+ sx: {
33
+ background: theme?.palette?.primary?.gradientBtn,
34
+ color: "#FFFFFF",
35
+ "& .MuiAlert-icon": {
36
+ color: "#FFFFFF"
37
+ }
38
+ },
39
+ children: message
40
+ })
41
+ });
42
+ };
43
+ export default SnackbarAlert;
@@ -21,7 +21,8 @@ const buttonStyle = [{
21
21
  },
22
22
  children: option.text
23
23
  });
24
- }
24
+ },
25
+ themeEnabled: true
25
26
  }, {
26
27
  label: "Font Size",
27
28
  key: "textSize",
@@ -45,7 +46,8 @@ const buttonStyle = [{
45
46
  }, {
46
47
  label: "Button Color",
47
48
  key: "bgColor",
48
- type: "color"
49
+ type: "color",
50
+ themeEnabled: true
49
51
  }, {
50
52
  label: "Border Color",
51
53
  key: "borderColor",