@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,6 +1,7 @@
1
1
  import React from "react";
2
2
  import { Box } from "@mui/material";
3
- import { getTRBLBreakPoints, getBreakPointsValue } from "../../../helper/theme";
3
+ import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../../helper/theme";
4
+ import { useTheme } from "@emotion/react";
4
5
  import { jsx as _jsx } from "react/jsx-runtime";
5
6
  const FormText = props => {
6
7
  const {
@@ -19,11 +20,26 @@ const FormText = props => {
19
20
  textSize,
20
21
  fontFamily,
21
22
  fontWeight,
23
+ marginSpacing,
22
24
  ...rest
23
25
  } = fieldProps;
24
26
  const onChange = e => {
25
27
  e.preventDefault();
26
28
  };
29
+ const theme = useTheme();
30
+ const buttonSX = {
31
+ ...groupByBreakpoint({
32
+ borderRadius: {
33
+ ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
34
+ },
35
+ padding: {
36
+ ...getTRBLBreakPoints(bannerSpacing)
37
+ },
38
+ margin: {
39
+ ...getTRBLBreakPoints(marginSpacing)
40
+ }
41
+ }, theme)
42
+ };
27
43
  return /*#__PURE__*/_jsx("div", {
28
44
  style: {
29
45
  width: "100%",
@@ -40,16 +56,17 @@ const FormText = props => {
40
56
  padding: {
41
57
  ...getTRBLBreakPoints(bannerSpacing)
42
58
  },
43
- height: height || "auto",
44
- borderColor: borderColor || "transparent",
59
+ height: height && `${height} !important`,
60
+ borderColor: borderColor && `${borderColor} !important`,
45
61
  borderWidth: borderWidth || "1px",
46
62
  borderRadius: {
47
63
  ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
48
64
  },
65
+ ...buttonSX,
49
66
  borderStyle: borderStyle || "solid",
50
- color: textColor || "#000",
51
- background: bgColor || "transparent",
52
- fontSize: textSize || "inherit",
67
+ color: textColor && `${textColor} !important`,
68
+ background: bgColor && `${bgColor} !important`,
69
+ fontSize: textSize && `${textSize} !important`,
53
70
  fontFamily: fontFamily || "PoppinsRegular",
54
71
  fontWeight: `${fontWeight} !important` || "400 !important"
55
72
  }
@@ -35,12 +35,12 @@ const FormTextArea = props => {
35
35
  onChange: onChange,
36
36
  sx: {
37
37
  width: "100%",
38
- border: `1px solid ${borderColor || "#FFF"}`,
38
+ borderBlockStyle: "solid",
39
39
  padding: {
40
40
  ...getTRBLBreakPoints(bannerSpacing)
41
41
  },
42
42
  height: height || "150px",
43
- borderColor: `${borderColor || "transparent"} !important`,
43
+ borderColor: borderColor && `${borderColor} !important`,
44
44
  borderWidth: borderWidth || "1px",
45
45
  borderRadius: {
46
46
  ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
@@ -1,12 +1,15 @@
1
1
  import React, { useState } from "react";
2
- import { Transforms, Node } from "slate";
2
+ import { Transforms } from "slate";
3
3
  import { useSlateStatic, ReactEditor } from "slate-react";
4
4
  import { IconButton, Tooltip, Grid, useTheme } from "@mui/material";
5
- import DeleteIcon from "@mui/icons-material/Delete";
6
- import SettingsIcon from "@mui/icons-material/Settings";
7
5
  import FormElements from "./FormElements";
8
6
  import FieldPopup from "./FieldPopup";
9
7
  import { getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
8
+ import { DeleteIcon } from "../../assets/svg/AIIcons";
9
+ import { SettingsIcon } from "../../assets/svg/TableIcons";
10
+ import { useEditorContext } from "../../hooks/useMouseMove";
11
+ import useCommonStyle from "../../commonStyle";
12
+ import { getNode } from "../../utils/helper";
10
13
  import { jsx as _jsx } from "react/jsx-runtime";
11
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
12
15
  const FormField = props => {
@@ -33,11 +36,15 @@ const FormField = props => {
33
36
  const formPath = path.slice(0, path.length - 1);
34
37
  const {
35
38
  metadatamapping
36
- } = Node?.get(editor, formPath) || {};
39
+ } = getNode(editor, formPath) || {};
37
40
  const updatedElement = {
38
41
  ...element,
39
42
  metadatamapping
40
43
  };
44
+ const {
45
+ theme: appTheme
46
+ } = useEditorContext();
47
+ const classes = useCommonStyle(appTheme);
41
48
  const [openSetttings, setOpenSettings] = useState(false);
42
49
  const onSettings = () => {
43
50
  setOpenSettings(true);
@@ -77,7 +84,6 @@ const FormField = props => {
77
84
  top: "24px",
78
85
  bottom: 0,
79
86
  margin: "auto",
80
- height: "42px",
81
87
  zIndex: 101
82
88
  },
83
89
  children: [/*#__PURE__*/_jsx(Tooltip, {
@@ -110,7 +116,8 @@ const FormField = props => {
110
116
  className: "form-field",
111
117
  sx: {
112
118
  position: "relative",
113
- ...fieldSX
119
+ ...fieldSX,
120
+ ...classes?.fieldBtnSettings
114
121
  },
115
122
  children: [!readOnly && /*#__PURE__*/_jsx(FieldToolbar, {}), /*#__PURE__*/_jsx(FormElement, {
116
123
  fieldProps: elementProps
@@ -9,20 +9,20 @@ const FormStyles = theme => ({
9
9
  color: "#94A3B8"
10
10
  },
11
11
  bodyTextArea: {
12
- '& .mini-editor-cls': {
13
- padding: '12px',
14
- '&:focus-visible': {
15
- outline: 'none',
16
- border: 'none'
12
+ "& .mini-editor-cls": {
13
+ padding: "12px",
14
+ "&:focus-visible": {
15
+ outline: "none",
16
+ border: "none"
17
17
  }
18
18
  },
19
19
  "& .editorWorkflow": {
20
- minHeight: '130px',
21
- padding: '12px',
20
+ minHeight: "130px",
21
+ padding: "12px",
22
22
  paddingBottom: 0,
23
- '&:focus-visible': {
24
- outline: 'none',
25
- border: 'none'
23
+ "&:focus-visible": {
24
+ outline: "none",
25
+ border: "none"
26
26
  }
27
27
  }
28
28
  },
@@ -105,7 +105,7 @@ const FormStyles = theme => ({
105
105
  padding: "4px 22px",
106
106
  textTransform: "none",
107
107
  border: "1px solid #D8DDE1",
108
- minWidth: '126px',
108
+ minWidth: "126px",
109
109
  "& svg": {
110
110
  "& path": {
111
111
  stroke: "#64748B"
@@ -169,17 +169,19 @@ const FormStyles = theme => ({
169
169
  }
170
170
  },
171
171
  colorButtonSingle: {
172
+ border: "1.5px solid #DCE4EC !important",
172
173
  "&.active": {
173
- "&:before": {
174
- content: '" "',
175
- position: "absolute",
176
- top: "-5px",
177
- left: "-5px",
178
- width: "calc(100% + 4px)",
179
- height: "calc(100% + 4px)",
180
- border: "3px solid blue",
181
- borderRadius: "50%"
182
- }
174
+ // "&:before": {
175
+ // content: '" "',
176
+ // position: "absolute",
177
+ // top: "-5px",
178
+ // left: "-5px",
179
+ // width: "calc(100% + 4px)",
180
+ // height: "calc(100% + 4px)",
181
+ // border: "3px solid blue",
182
+ // borderRadius: "50%",
183
+ // },
184
+ outline: "2px solid #2563EB"
183
185
  }
184
186
  },
185
187
  colorButtonsInner: {
@@ -249,7 +251,7 @@ const FormStyles = theme => ({
249
251
  }
250
252
  },
251
253
  root: {
252
- padding: '10px'
254
+ padding: "10px"
253
255
  }
254
256
  });
255
257
  export default FormStyles;
@@ -22,6 +22,8 @@ import { DEFAULT_TABLE_NODE } from "../../utils/table";
22
22
  import itemOptions from "./Options/sectionItemOptions";
23
23
  import { getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
24
24
  import { useDebouncedCallback } from "use-debounce";
25
+ import { getNewElementXsValues } from "./helper";
26
+ import updateFormName from "../../utils/updateFormName";
25
27
  import { jsx as _jsx } from "react/jsx-runtime";
26
28
  import { jsxs as _jsxs } from "react/jsx-runtime";
27
29
  const MAX_DEVICE_WIDTH = {
@@ -35,11 +37,15 @@ export const useFreeGrid = () => {
35
37
  return useContext(FreeGridContext);
36
38
  };
37
39
  const FreeGrid = props => {
40
+ const {
41
+ theme: appTheme
42
+ } = useEditorContext();
38
43
  const theme = useTheme();
39
44
  const breakpoint = useBreakpoints(theme);
40
45
  const classes = useFreeGridStyles({
41
46
  theme,
42
- MAX_DEVICE_WIDTH: MAX_DEVICE_WIDTH[breakpoint]
47
+ MAX_DEVICE_WIDTH: MAX_DEVICE_WIDTH[breakpoint],
48
+ appTheme
43
49
  });
44
50
  const editor = useSlateStatic();
45
51
  const {
@@ -136,8 +142,10 @@ const FreeGrid = props => {
136
142
  });
137
143
  break;
138
144
  case "duplicateSection":
145
+ const currentNode = Node.get(editor, cur_root_path);
146
+ const updatedFormNameNode = updateFormName(currentNode);
139
147
  Transforms.insertNodes(editor, [{
140
- ...JSON.parse(JSON.stringify(Node.get(editor, cur_root_path)))
148
+ ...JSON.parse(JSON.stringify(updatedFormNameNode))
141
149
  }], {
142
150
  at: next_path
143
151
  });
@@ -176,6 +184,10 @@ const FreeGrid = props => {
176
184
  const handleAddElementClick = type => () => {
177
185
  const isEmpty = isEmptySection();
178
186
  const insertAt = isEmpty ? [...path, 0] : [...path, childrenCountRef.current];
187
+ const {
188
+ xsVal,
189
+ sectionHeightXs
190
+ } = getNewElementXsValues(type, element?.children);
179
191
  switch (type) {
180
192
  case "addText":
181
193
  Transforms.insertNodes(editor, [{
@@ -192,7 +204,8 @@ const FreeGrid = props => {
192
204
  marginTop: 0,
193
205
  top: 0,
194
206
  width: 170,
195
- height: 30
207
+ height: 30,
208
+ ...(xsVal || {})
196
209
  }], {
197
210
  at: [...insertAt]
198
211
  });
@@ -210,20 +223,6 @@ const FreeGrid = props => {
210
223
  linkType: "webAddress"
211
224
  },
212
225
  iconPosition: "start",
213
- bgColor: "#2563EB",
214
- textColor: "#FFF",
215
- borderRadius: {
216
- topLeft: 30,
217
- topRight: 30,
218
- bottomLeft: 30,
219
- bottomRight: 30
220
- },
221
- bannerSpacing: {
222
- left: 12,
223
- top: 12,
224
- right: 12,
225
- bottom: 12
226
- },
227
226
  textAlign: "center",
228
227
  label: "Get Started"
229
228
  }],
@@ -232,7 +231,8 @@ const FreeGrid = props => {
232
231
  marginTop: 0,
233
232
  top: 0,
234
233
  width: 143,
235
- height: 50
234
+ height: 50,
235
+ ...(xsVal || {})
236
236
  }], {
237
237
  at: [...insertAt]
238
238
  });
@@ -258,8 +258,9 @@ const FreeGrid = props => {
258
258
  top: 0,
259
259
  width: 217,
260
260
  height: 173,
261
- width_xs: 217,
262
- height_xs: 173
261
+ // width_xs: 217,
262
+ // height_xs: 173,
263
+ ...(xsVal || {})
263
264
  }], {
264
265
  at: [...insertAt]
265
266
  });
@@ -282,7 +283,8 @@ const FreeGrid = props => {
282
283
  marginTop: 0,
283
284
  top: 0,
284
285
  width: 170,
285
- height: 80
286
+ height: 80,
287
+ ...(xsVal || {})
286
288
  }], {
287
289
  at: [...insertAt]
288
290
  });
@@ -295,7 +297,8 @@ const FreeGrid = props => {
295
297
  images: []
296
298
  }), {
297
299
  height: 370,
298
- width: 650
300
+ width: 650,
301
+ ...(xsVal || {})
299
302
  })
300
303
  }], {
301
304
  at: [...insertAt]
@@ -307,7 +310,8 @@ const FreeGrid = props => {
307
310
  ...DEFAULT_TABLE_NODE()
308
311
  }, {
309
312
  height: 150,
310
- width: 400
313
+ width: 400,
314
+ ...(xsVal || {})
311
315
  })
312
316
  }], {
313
317
  at: [...insertAt]
@@ -331,7 +335,8 @@ const FreeGrid = props => {
331
335
  marginTop: 0,
332
336
  top: 0,
333
337
  width: 400,
334
- height: 300
338
+ height: 300,
339
+ ...(xsVal || {})
335
340
  }], {
336
341
  at: [...insertAt]
337
342
  });
@@ -343,7 +348,9 @@ const FreeGrid = props => {
343
348
  children: [{
344
349
  text: ""
345
350
  }]
346
- }, {}, "freegridBox")
351
+ }, {
352
+ ...(xsVal || {})
353
+ }, "freegridBox")
347
354
  }], {
348
355
  at: [...insertAt]
349
356
  });
@@ -354,7 +361,8 @@ const FreeGrid = props => {
354
361
  ...FORM_NODE()
355
362
  }, {
356
363
  height: 92,
357
- width: 400
364
+ width: 400,
365
+ ...(xsVal || {})
358
366
  })
359
367
  }], {
360
368
  at: [...insertAt]
@@ -368,7 +376,8 @@ const FreeGrid = props => {
368
376
  })
369
377
  }, {
370
378
  height: 60,
371
- width: 400
379
+ width: 400,
380
+ ...(xsVal || {})
372
381
  })
373
382
  }], {
374
383
  at: [...insertAt]
@@ -389,19 +398,18 @@ const FreeGrid = props => {
389
398
  marginTop: 0,
390
399
  top: 0,
391
400
  width: 170,
392
- height: 30
401
+ height: 30,
402
+ ...(xsVal || {})
393
403
  }], {
394
404
  at: [...insertAt]
395
405
  });
396
406
  break;
397
407
  default:
398
408
  }
399
- if (breakpoint === "lg") {
409
+ if (xsVal) {
400
410
  setSelectedElement({});
401
-
402
- // auto align in mobile
403
411
  Transforms.setNodes(editor, {
404
- xs_updatedOn: null,
412
+ height_xs: sectionHeightXs,
405
413
  updated_at: new Date().getTime()
406
414
  }, {
407
415
  at: path
@@ -8,7 +8,7 @@ import { onDropItem, ROW_HEIGHT } from "../../common/RnD/Utils/gridDropItem";
8
8
  import useBreakpoints from "../../hooks/useBreakpoints";
9
9
  import { breakpointValues, formatBreakpointValues } from "./breakpointConstants";
10
10
  import { useEditorContext } from "../../hooks/useMouseMove";
11
- import { getBreakPointsValue } from "../../helper/theme";
11
+ import { getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
12
12
  import focusOnNewItem from "../../helper/RnD/focusOnNewItem";
13
13
  import { bringItemToFB } from "../../helper";
14
14
  import itemOptions from "./Options/sectionItemOptions";
@@ -160,6 +160,11 @@ const FreeGridBox = props => {
160
160
  const isBoxHeader = useMemo(() => {
161
161
  return element?.children?.some(c => c.childType === "appHeader" && !c.xs_updatedOn);
162
162
  }, [element]);
163
+ const boxSp = groupByBreakpoint({
164
+ borderRadius: {
165
+ ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
166
+ }
167
+ }, theme);
163
168
  return /*#__PURE__*/_jsx(RnD, {
164
169
  id: `freegrid_box_item_${path.join("|")}_${updated_at}_${breakpoint}`,
165
170
  className: `freegrid-item path-${path.length} breakpoint-${breakpoint} freegrid-box_${path.join("_")}`,
@@ -226,9 +231,7 @@ const FreeGridBox = props => {
226
231
  "--rows": `repeat(${repeatTimes}, ${ROW_HEIGHT}px)`
227
232
  },
228
233
  sx: {
229
- borderRadius: {
230
- ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
231
- },
234
+ ...boxSp,
232
235
  background: sectionBgColor,
233
236
  backgroundImage: sectionBackgroundImage ? `url('${sectionBackgroundImage}')` : "",
234
237
  borderColor: borderColor || "transparent",
@@ -320,6 +320,7 @@ const FreeGridItem = props => {
320
320
  breakpoint: breakpoint,
321
321
  customProps: customProps,
322
322
  translation: translation,
323
+ xsHidden: xsHidden,
323
324
  children: /*#__PURE__*/_jsxs(Box, {
324
325
  component: "div",
325
326
  ...attributes,
@@ -5,12 +5,12 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
5
5
  const More = props => {
6
6
  const {
7
7
  handleClick,
8
- breakpoint,
9
- translation
8
+ translation,
9
+ breakpoint
10
10
  } = props;
11
11
  return /*#__PURE__*/_jsx(Box, {
12
12
  children: /*#__PURE__*/_jsxs(List, {
13
- className: "item-list-wrpr",
13
+ className: "item-list-wrpr sectionMoreOption",
14
14
  children: [/*#__PURE__*/_jsx(ListItemButton, {
15
15
  className: "item-wrapper",
16
16
  onClick: handleClick("addSection"),
@@ -19,15 +19,15 @@ const More = props => {
19
19
  className: "item-wrapper",
20
20
  onClick: handleClick("duplicateSection"),
21
21
  children: translation?.translation("Duplicate Section")
22
- }), /*#__PURE__*/_jsx(ListItemButton, {
23
- className: "item-wrapper",
24
- onClick: handleClick("deleteSection"),
25
- children: "Delete Section"
26
22
  }), breakpoint === "xs" ? /*#__PURE__*/_jsx(ListItemButton, {
27
23
  className: "item-wrapper",
28
24
  onClick: handleClick("forceAutoAlignment"),
29
25
  children: "Force Auto Alignment"
30
- }) : null]
26
+ }) : null, /*#__PURE__*/_jsx(ListItemButton, {
27
+ className: "item-wrapper",
28
+ onClick: handleClick("deleteSection"),
29
+ children: "Delete Section"
30
+ })]
31
31
  })
32
32
  });
33
33
  };
@@ -0,0 +1,115 @@
1
+ import { ROW_HEIGHT } from "../../common/RnD/Utils/gridDropItem";
2
+ import { getElementOffset } from "../../common/RnD/VirtualElement/VirtualTextElement";
3
+ import { RND_ITEMS } from "../../helper";
4
+ export const ELEMENT_CASE = {
5
+ ADD_TEXT: "addText",
6
+ ADD_BUTTON: "addButton",
7
+ ADD_SIGNATURE: "addSignature",
8
+ ADD_IMAGE: "addImage",
9
+ ADD_VIDEO: "addVideo",
10
+ ADD_TABLE: "addTable",
11
+ ADD_CODE: "addCode",
12
+ ADD_BOX: "addBox",
13
+ ADD_FORM: "addForm",
14
+ ADD_APP_HEADER: "addAppHeader",
15
+ ADD_DIVIDER: "addDivider"
16
+ };
17
+ const commonXsValues = {
18
+ top_xs: 0,
19
+ marginTop_xs: 12,
20
+ left_xs: 24,
21
+ width_xs: 272,
22
+ xs_updatedOn: new Date().getTime()
23
+ };
24
+ const elementXsValues = {
25
+ [ELEMENT_CASE.ADD_TEXT]: {
26
+ ...commonXsValues,
27
+ height_xs: 50
28
+ },
29
+ [ELEMENT_CASE.ADD_BUTTON]: {
30
+ ...commonXsValues,
31
+ height_xs: 50
32
+ },
33
+ [ELEMENT_CASE.ADD_SIGNATURE]: {
34
+ ...commonXsValues,
35
+ height_xs: 173
36
+ },
37
+ [ELEMENT_CASE.ADD_IMAGE]: {
38
+ ...commonXsValues,
39
+ height_xs: 80
40
+ },
41
+ [ELEMENT_CASE.ADD_VIDEO]: {
42
+ ...commonXsValues,
43
+ height_xs: 300
44
+ },
45
+ [ELEMENT_CASE.ADD_TABLE]: {
46
+ ...commonXsValues,
47
+ height_xs: 165
48
+ },
49
+ [ELEMENT_CASE.ADD_CODE]: {
50
+ ...commonXsValues,
51
+ height: 300
52
+ },
53
+ [ELEMENT_CASE.ADD_BOX]: {
54
+ ...commonXsValues,
55
+ height_xs: 300
56
+ },
57
+ [ELEMENT_CASE.ADD_FORM]: {
58
+ ...commonXsValues,
59
+ height_xs: 80
60
+ },
61
+ [ELEMENT_CASE.ADD_APP_HEADER]: {
62
+ ...commonXsValues,
63
+ height_xs: 80
64
+ },
65
+ [ELEMENT_CASE.ADD_DIVIDER]: {
66
+ ...commonXsValues,
67
+ height_xs: 24
68
+ }
69
+ };
70
+ export const findMaxYValue = (sectionItems, breakpoint) => {
71
+ let maxY = 0;
72
+ sectionItems.forEach(item => {
73
+ const isHidden = breakpoint === "xs" && item.children.some(c => c.xsHidden);
74
+ if (item?.type && RND_ITEMS.includes(item.type) && !isHidden) {
75
+ const {
76
+ bottom
77
+ } = getElementOffset(item, breakpoint === "lg" ? "lg" : "xs");
78
+ maxY = Math.max(maxY, bottom);
79
+ }
80
+ });
81
+ return maxY;
82
+ };
83
+ export const convertToGridArea = y => {
84
+ // Calculate grid position
85
+ const row = Math.floor(y / ROW_HEIGHT) + 1;
86
+
87
+ // to calculate difference inside the grid
88
+ const marginTop = Math.abs((row - 1) * ROW_HEIGHT - y);
89
+
90
+ // Update grid area
91
+ const gridArea = `${row} / 1 / ${row + 1} / 2`;
92
+ return {
93
+ gridArea,
94
+ marginTop
95
+ };
96
+ };
97
+ export const getNewElementXsValues = (type, sectionItems) => {
98
+ const values = elementXsValues[type] || {};
99
+ const y = sectionItems?.length ? findMaxYValue(sectionItems) : 0;
100
+ const {
101
+ gridArea,
102
+ marginTop
103
+ } = convertToGridArea(y);
104
+ const BUFFER_MARGIN_TOP = 12;
105
+ const xsVal = {
106
+ ...values,
107
+ gridArea_xs: gridArea,
108
+ marginTop_xs: marginTop + BUFFER_MARGIN_TOP
109
+ };
110
+ const sectionHeightXs = y + values?.height_xs + BUFFER_MARGIN_TOP + 12;
111
+ return {
112
+ xsVal,
113
+ sectionHeightXs
114
+ };
115
+ };