@flozy/editor 10.2.5 → 10.2.7

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 (187) hide show
  1. package/dist/Editor/ChatEditor.js +17 -16
  2. package/dist/Editor/CommonEditor.js +131 -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 +30 -7
  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 +181 -170
  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 +36 -31
  33. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
  34. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  35. package/dist/Editor/Elements/FreeGrid/helper.js +113 -0
  36. package/dist/Editor/Elements/FreeGrid/styles.js +75 -7
  37. package/dist/Editor/Elements/Grid/Grid.js +14 -2
  38. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  39. package/dist/Editor/Elements/List/CheckList.js +3 -2
  40. package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
  41. package/dist/Editor/Elements/Search/SearchButton.js +9 -8
  42. package/dist/Editor/Elements/Search/SearchList.js +9 -7
  43. package/dist/Editor/Elements/Signature/Signature.css +2 -1
  44. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
  45. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
  46. package/dist/Editor/Elements/SimpleText/index.js +6 -1
  47. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  48. package/dist/Editor/Elements/Table/DragButton.js +0 -1
  49. package/dist/Editor/Elements/Table/Draggable.js +6 -2
  50. package/dist/Editor/Elements/Table/Styles.js +7 -0
  51. package/dist/Editor/Elements/Table/Table.js +3 -3
  52. package/dist/Editor/Elements/Table/TableCell.js +31 -8
  53. package/dist/Editor/Elements/Title/title.js +6 -6
  54. package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
  55. package/dist/Editor/MiniEditor.js +2 -1
  56. package/dist/Editor/Styles/EditorStyles.js +5 -5
  57. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  58. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
  59. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  60. package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
  61. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  62. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
  63. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
  64. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
  65. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
  66. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
  67. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
  68. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
  69. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
  70. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  71. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  72. package/dist/Editor/assets/svg/BackIcon.js +18 -0
  73. package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
  74. package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
  75. package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
  76. package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
  77. package/dist/Editor/common/Checkbox/index.js +46 -0
  78. package/dist/Editor/common/Checkbox/styles.js +45 -0
  79. package/dist/Editor/common/ColorPickerButton.js +41 -16
  80. package/dist/Editor/common/CustomColorPicker/index.js +130 -0
  81. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  82. package/dist/Editor/common/CustomDialog2/index.js +94 -0
  83. package/dist/Editor/common/CustomDialog2/style.js +67 -0
  84. package/dist/Editor/common/CustomSelect.js +43 -0
  85. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  86. package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
  87. package/dist/Editor/common/Icon.js +31 -1
  88. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  89. package/dist/Editor/common/ImageSelector/Styles.js +3 -9
  90. package/dist/Editor/common/LinkSettings/NavComponents.js +61 -55
  91. package/dist/Editor/common/LinkSettings/index.js +82 -79
  92. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  93. package/dist/Editor/common/LinkSettings/style.js +209 -74
  94. package/dist/Editor/common/RadioGroup/index.js +48 -0
  95. package/dist/Editor/common/RadioGroup/styles.js +29 -0
  96. package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -15
  97. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
  98. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  99. package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
  100. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
  101. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  102. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  103. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  104. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  105. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  106. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  107. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  108. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  109. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  110. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  111. package/dist/Editor/common/RnD/ElementSettings/styles.js +146 -12
  112. package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
  113. package/dist/Editor/common/RnD/OptionsPopup/style.js +120 -19
  114. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
  115. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  116. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  117. package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
  118. package/dist/Editor/common/RnD/Utils/index.js +3 -1
  119. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +48 -54
  120. package/dist/Editor/common/RnD/VirtualElement/helper.js +143 -131
  121. package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
  122. package/dist/Editor/common/RnD/index.js +6 -11
  123. package/dist/Editor/common/Select/index.js +44 -5
  124. package/dist/Editor/common/Select/styles.js +30 -2
  125. package/dist/Editor/common/Shorthands/elements.js +65 -11
  126. package/dist/Editor/common/SnackBar/index.js +43 -0
  127. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  128. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
  129. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  130. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
  131. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  132. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  133. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  134. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  135. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  136. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
  137. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  138. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  139. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
  140. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
  141. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  142. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
  143. package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
  144. package/dist/Editor/common/Uploader.js +16 -0
  145. package/dist/Editor/common/iconListV2.js +177 -6
  146. package/dist/Editor/common/iconslist.js +24 -0
  147. package/dist/Editor/commonStyle.js +186 -62
  148. package/dist/Editor/helper/index.js +4 -0
  149. package/dist/Editor/helper/textIndeces.js +58 -0
  150. package/dist/Editor/helper/theme.js +203 -2
  151. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  152. package/dist/Editor/hooks/useMouseMove.js +8 -5
  153. package/dist/Editor/hooks/useTable.js +5 -4
  154. package/dist/Editor/hooks/useThemeValues.js +63 -0
  155. package/dist/Editor/plugins/withEmbeds.js +1 -1
  156. package/dist/Editor/plugins/withHTML.js +3 -1
  157. package/dist/Editor/plugins/withTable.js +1 -1
  158. package/dist/Editor/theme/ThemeList.js +50 -173
  159. package/dist/Editor/theme/index.js +149 -0
  160. package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
  161. package/dist/Editor/themeSettings/buttons/index.js +300 -0
  162. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  163. package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
  164. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  165. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  166. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  167. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  168. package/dist/Editor/themeSettings/icons.js +60 -0
  169. package/dist/Editor/themeSettings/index.js +367 -0
  170. package/dist/Editor/themeSettings/style.js +299 -0
  171. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  172. package/dist/Editor/themeSettingsAI/index.js +355 -0
  173. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  174. package/dist/Editor/themeSettingsAI/style.js +332 -0
  175. package/dist/Editor/utils/SlateUtilityFunctions.js +169 -45
  176. package/dist/Editor/utils/accordion.js +14 -4
  177. package/dist/Editor/utils/button.js +1 -17
  178. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  179. package/dist/Editor/utils/draftToSlate.js +3 -2
  180. package/dist/Editor/utils/events.js +50 -6
  181. package/dist/Editor/utils/font.js +40 -37
  182. package/dist/Editor/utils/form.js +4 -4
  183. package/dist/Editor/utils/formfield.js +8 -2
  184. package/dist/Editor/utils/helper.js +134 -26
  185. package/dist/Editor/utils/insertAppHeader.js +1 -1
  186. package/dist/Editor/utils/signature.js +2 -9
  187. 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,7 @@ 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";
25
26
  import { jsx as _jsx } from "react/jsx-runtime";
26
27
  import { jsxs as _jsxs } from "react/jsx-runtime";
27
28
  const MAX_DEVICE_WIDTH = {
@@ -35,11 +36,15 @@ export const useFreeGrid = () => {
35
36
  return useContext(FreeGridContext);
36
37
  };
37
38
  const FreeGrid = props => {
39
+ const {
40
+ theme: appTheme
41
+ } = useEditorContext();
38
42
  const theme = useTheme();
39
43
  const breakpoint = useBreakpoints(theme);
40
44
  const classes = useFreeGridStyles({
41
45
  theme,
42
- MAX_DEVICE_WIDTH: MAX_DEVICE_WIDTH[breakpoint]
46
+ MAX_DEVICE_WIDTH: MAX_DEVICE_WIDTH[breakpoint],
47
+ appTheme
43
48
  });
44
49
  const editor = useSlateStatic();
45
50
  const {
@@ -176,6 +181,10 @@ const FreeGrid = props => {
176
181
  const handleAddElementClick = type => () => {
177
182
  const isEmpty = isEmptySection();
178
183
  const insertAt = isEmpty ? [...path, 0] : [...path, childrenCountRef.current];
184
+ const {
185
+ xsVal,
186
+ sectionHeightXs
187
+ } = getNewElementXsValues(type, element?.children);
179
188
  switch (type) {
180
189
  case "addText":
181
190
  Transforms.insertNodes(editor, [{
@@ -192,7 +201,8 @@ const FreeGrid = props => {
192
201
  marginTop: 0,
193
202
  top: 0,
194
203
  width: 170,
195
- height: 30
204
+ height: 30,
205
+ ...(xsVal || {})
196
206
  }], {
197
207
  at: [...insertAt]
198
208
  });
@@ -210,20 +220,6 @@ const FreeGrid = props => {
210
220
  linkType: "webAddress"
211
221
  },
212
222
  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
223
  textAlign: "center",
228
224
  label: "Get Started"
229
225
  }],
@@ -232,7 +228,8 @@ const FreeGrid = props => {
232
228
  marginTop: 0,
233
229
  top: 0,
234
230
  width: 143,
235
- height: 50
231
+ height: 50,
232
+ ...(xsVal || {})
236
233
  }], {
237
234
  at: [...insertAt]
238
235
  });
@@ -258,8 +255,9 @@ const FreeGrid = props => {
258
255
  top: 0,
259
256
  width: 217,
260
257
  height: 173,
261
- width_xs: 217,
262
- height_xs: 173
258
+ // width_xs: 217,
259
+ // height_xs: 173,
260
+ ...(xsVal || {})
263
261
  }], {
264
262
  at: [...insertAt]
265
263
  });
@@ -282,7 +280,8 @@ const FreeGrid = props => {
282
280
  marginTop: 0,
283
281
  top: 0,
284
282
  width: 170,
285
- height: 80
283
+ height: 80,
284
+ ...(xsVal || {})
286
285
  }], {
287
286
  at: [...insertAt]
288
287
  });
@@ -295,7 +294,8 @@ const FreeGrid = props => {
295
294
  images: []
296
295
  }), {
297
296
  height: 370,
298
- width: 650
297
+ width: 650,
298
+ ...(xsVal || {})
299
299
  })
300
300
  }], {
301
301
  at: [...insertAt]
@@ -307,7 +307,8 @@ const FreeGrid = props => {
307
307
  ...DEFAULT_TABLE_NODE()
308
308
  }, {
309
309
  height: 150,
310
- width: 400
310
+ width: 400,
311
+ ...(xsVal || {})
311
312
  })
312
313
  }], {
313
314
  at: [...insertAt]
@@ -331,7 +332,8 @@ const FreeGrid = props => {
331
332
  marginTop: 0,
332
333
  top: 0,
333
334
  width: 400,
334
- height: 300
335
+ height: 300,
336
+ ...(xsVal || {})
335
337
  }], {
336
338
  at: [...insertAt]
337
339
  });
@@ -343,7 +345,9 @@ const FreeGrid = props => {
343
345
  children: [{
344
346
  text: ""
345
347
  }]
346
- }, {}, "freegridBox")
348
+ }, {
349
+ ...(xsVal || {})
350
+ }, "freegridBox")
347
351
  }], {
348
352
  at: [...insertAt]
349
353
  });
@@ -354,7 +358,8 @@ const FreeGrid = props => {
354
358
  ...FORM_NODE()
355
359
  }, {
356
360
  height: 92,
357
- width: 400
361
+ width: 400,
362
+ ...(xsVal || {})
358
363
  })
359
364
  }], {
360
365
  at: [...insertAt]
@@ -368,7 +373,8 @@ const FreeGrid = props => {
368
373
  })
369
374
  }, {
370
375
  height: 60,
371
- width: 400
376
+ width: 400,
377
+ ...(xsVal || {})
372
378
  })
373
379
  }], {
374
380
  at: [...insertAt]
@@ -389,19 +395,18 @@ const FreeGrid = props => {
389
395
  marginTop: 0,
390
396
  top: 0,
391
397
  width: 170,
392
- height: 30
398
+ height: 30,
399
+ ...(xsVal || {})
393
400
  }], {
394
401
  at: [...insertAt]
395
402
  });
396
403
  break;
397
404
  default:
398
405
  }
399
- if (breakpoint === "lg") {
406
+ if (xsVal) {
400
407
  setSelectedElement({});
401
-
402
- // auto align in mobile
403
408
  Transforms.setNodes(editor, {
404
- xs_updatedOn: null,
409
+ height_xs: sectionHeightXs,
405
410
  updated_at: new Date().getTime()
406
411
  }, {
407
412
  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",
@@ -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,113 @@
1
+ import { ROW_HEIGHT } from "../../common/RnD/Utils/gridDropItem";
2
+ import { getElementOffset } from "../../common/RnD/VirtualElement/VirtualTextElement";
3
+ export const ELEMENT_CASE = {
4
+ ADD_TEXT: "addText",
5
+ ADD_BUTTON: "addButton",
6
+ ADD_SIGNATURE: "addSignature",
7
+ ADD_IMAGE: "addImage",
8
+ ADD_VIDEO: "addVideo",
9
+ ADD_TABLE: "addTable",
10
+ ADD_CODE: "addCode",
11
+ ADD_BOX: "addBox",
12
+ ADD_FORM: "addForm",
13
+ ADD_APP_HEADER: "addAppHeader",
14
+ ADD_DIVIDER: "addDivider"
15
+ };
16
+ const commonXsValues = {
17
+ top_xs: 0,
18
+ marginTop_xs: 12,
19
+ left_xs: 24,
20
+ width_xs: 272,
21
+ xs_updatedOn: new Date().getTime()
22
+ };
23
+ const elementXsValues = {
24
+ [ELEMENT_CASE.ADD_TEXT]: {
25
+ ...commonXsValues,
26
+ height_xs: 50
27
+ },
28
+ [ELEMENT_CASE.ADD_BUTTON]: {
29
+ ...commonXsValues,
30
+ height_xs: 50
31
+ },
32
+ [ELEMENT_CASE.ADD_SIGNATURE]: {
33
+ ...commonXsValues,
34
+ height_xs: 173
35
+ },
36
+ [ELEMENT_CASE.ADD_IMAGE]: {
37
+ ...commonXsValues,
38
+ height_xs: 80
39
+ },
40
+ [ELEMENT_CASE.ADD_VIDEO]: {
41
+ ...commonXsValues,
42
+ height_xs: 300
43
+ },
44
+ [ELEMENT_CASE.ADD_TABLE]: {
45
+ ...commonXsValues,
46
+ height_xs: 165
47
+ },
48
+ [ELEMENT_CASE.ADD_CODE]: {
49
+ ...commonXsValues,
50
+ height: 300
51
+ },
52
+ [ELEMENT_CASE.ADD_BOX]: {
53
+ ...commonXsValues,
54
+ height_xs: 300
55
+ },
56
+ [ELEMENT_CASE.ADD_FORM]: {
57
+ ...commonXsValues,
58
+ height_xs: 80
59
+ },
60
+ [ELEMENT_CASE.ADD_APP_HEADER]: {
61
+ ...commonXsValues,
62
+ height_xs: 80
63
+ },
64
+ [ELEMENT_CASE.ADD_DIVIDER]: {
65
+ ...commonXsValues,
66
+ height_xs: 24
67
+ }
68
+ };
69
+ export const findMaxYValue = sectionItems => {
70
+ let maxY = 0;
71
+ sectionItems.forEach(item => {
72
+ if (item?.type && item?.type !== "paragraph") {
73
+ const {
74
+ bottom
75
+ } = getElementOffset(item);
76
+ maxY = Math.max(maxY, bottom);
77
+ }
78
+ });
79
+ return maxY;
80
+ };
81
+ export const convertToGridArea = y => {
82
+ // Calculate grid position
83
+ const row = Math.floor(y / ROW_HEIGHT) + 1;
84
+
85
+ // to calculate difference inside the grid
86
+ const marginTop = Math.abs((row - 1) * ROW_HEIGHT - y);
87
+
88
+ // Update grid area
89
+ const gridArea = `${row} / 1 / ${row + 1} / 2`;
90
+ return {
91
+ gridArea,
92
+ marginTop
93
+ };
94
+ };
95
+ export const getNewElementXsValues = (type, sectionItems) => {
96
+ const values = elementXsValues[type] || {};
97
+ const y = sectionItems?.length ? findMaxYValue(sectionItems) : 0;
98
+ const {
99
+ gridArea,
100
+ marginTop
101
+ } = convertToGridArea(y);
102
+ const BUFFER_MARGIN_TOP = 12;
103
+ const xsVal = {
104
+ ...values,
105
+ gridArea_xs: gridArea,
106
+ marginTop_xs: marginTop + BUFFER_MARGIN_TOP
107
+ };
108
+ const sectionHeightXs = y + values?.height_xs + BUFFER_MARGIN_TOP + 12;
109
+ return {
110
+ xsVal,
111
+ sectionHeightXs
112
+ };
113
+ };