@flozy/editor 10.3.1 → 10.3.3

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 (163) 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 +30 -28
  17. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +9 -7
  18. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +0 -1
  19. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
  20. package/dist/Editor/Elements/Embed/Video.js +1 -1
  21. package/dist/Editor/Elements/Form/Form.js +1 -3
  22. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +0 -1
  23. package/dist/Editor/Elements/Form/FormField.js +3 -2
  24. package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
  25. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +35 -31
  26. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
  27. package/dist/Editor/Elements/FreeGrid/Options/More.js +7 -7
  28. package/dist/Editor/Elements/FreeGrid/helper.js +113 -0
  29. package/dist/Editor/Elements/FreeGrid/styles.js +14 -0
  30. package/dist/Editor/Elements/Grid/Grid.js +14 -2
  31. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  32. package/dist/Editor/Elements/Signature/Signature.css +2 -1
  33. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
  34. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
  35. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  36. package/dist/Editor/Elements/Table/DragButton.js +0 -1
  37. package/dist/Editor/Elements/Table/Draggable.js +6 -2
  38. package/dist/Editor/Elements/Table/Styles.js +7 -0
  39. package/dist/Editor/Elements/Table/Table.js +3 -3
  40. package/dist/Editor/Elements/Table/TableCell.js +24 -5
  41. package/dist/Editor/Elements/Title/title.js +6 -6
  42. package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
  43. package/dist/Editor/MiniEditor.js +2 -1
  44. package/dist/Editor/Styles/EditorStyles.js +5 -5
  45. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  46. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
  47. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  48. package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
  49. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  50. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
  51. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
  52. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
  53. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
  54. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
  55. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
  56. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +58 -10
  57. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
  58. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  59. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  60. package/dist/Editor/assets/svg/BackIcon.js +18 -0
  61. package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
  62. package/dist/Editor/common/Checkbox/index.js +46 -0
  63. package/dist/Editor/common/Checkbox/styles.js +45 -0
  64. package/dist/Editor/common/ColorPickerButton.js +41 -16
  65. package/dist/Editor/common/CustomColorPicker/index.js +130 -0
  66. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  67. package/dist/Editor/common/CustomDialog2/index.js +94 -0
  68. package/dist/Editor/common/CustomDialog2/style.js +67 -0
  69. package/dist/Editor/common/CustomSelect.js +43 -0
  70. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  71. package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
  72. package/dist/Editor/common/Icon.js +28 -0
  73. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  74. package/dist/Editor/common/ImageSelector/Styles.js +3 -9
  75. package/dist/Editor/common/LinkSettings/NavComponents.js +45 -65
  76. package/dist/Editor/common/LinkSettings/index.js +13 -26
  77. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  78. package/dist/Editor/common/LinkSettings/style.js +164 -244
  79. package/dist/Editor/common/RadioGroup/index.js +48 -0
  80. package/dist/Editor/common/RadioGroup/styles.js +29 -0
  81. package/dist/Editor/common/RnD/ElementOptions/Actions.js +4 -5
  82. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +2 -1
  83. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  84. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  85. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  86. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  87. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  88. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  89. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  90. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  91. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  92. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  93. package/dist/Editor/common/RnD/ElementSettings/styles.js +0 -1
  94. package/dist/Editor/common/RnD/OptionsPopup/style.js +0 -1
  95. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +11 -2
  96. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  97. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  98. package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
  99. package/dist/Editor/common/RnD/Utils/index.js +3 -1
  100. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +42 -58
  101. package/dist/Editor/common/RnD/VirtualElement/helper.js +321 -131
  102. package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
  103. package/dist/Editor/common/RnD/index.js +25 -11
  104. package/dist/Editor/common/Select/index.js +44 -7
  105. package/dist/Editor/common/Select/styles.js +30 -2
  106. package/dist/Editor/common/Shorthands/elements.js +54 -0
  107. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  108. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
  109. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  110. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
  111. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  112. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  113. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  114. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  115. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  116. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
  117. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  118. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  119. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  120. package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
  121. package/dist/Editor/common/Uploader.js +16 -0
  122. package/dist/Editor/common/iconListV2.js +76 -0
  123. package/dist/Editor/common/iconslist.js +21 -0
  124. package/dist/Editor/commonStyle.js +116 -61
  125. package/dist/Editor/helper/index.js +4 -0
  126. package/dist/Editor/helper/textIndeces.js +58 -0
  127. package/dist/Editor/helper/theme.js +203 -2
  128. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  129. package/dist/Editor/hooks/useMouseMove.js +9 -3
  130. package/dist/Editor/hooks/useTable.js +5 -4
  131. package/dist/Editor/hooks/useThemeValues.js +63 -0
  132. package/dist/Editor/plugins/withEmbeds.js +1 -1
  133. package/dist/Editor/plugins/withHTML.js +3 -1
  134. package/dist/Editor/plugins/withTable.js +1 -1
  135. package/dist/Editor/theme/ThemeList.js +50 -173
  136. package/dist/Editor/theme/index.js +149 -0
  137. package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
  138. package/dist/Editor/themeSettings/buttons/index.js +300 -0
  139. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  140. package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
  141. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  142. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  143. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  144. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  145. package/dist/Editor/themeSettings/icons.js +60 -0
  146. package/dist/Editor/themeSettings/index.js +380 -0
  147. package/dist/Editor/themeSettings/style.js +299 -0
  148. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  149. package/dist/Editor/themeSettingsAI/index.js +355 -0
  150. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  151. package/dist/Editor/themeSettingsAI/style.js +332 -0
  152. package/dist/Editor/utils/SlateUtilityFunctions.js +161 -37
  153. package/dist/Editor/utils/accordion.js +14 -4
  154. package/dist/Editor/utils/button.js +1 -17
  155. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  156. package/dist/Editor/utils/draftToSlate.js +3 -2
  157. package/dist/Editor/utils/events.js +50 -6
  158. package/dist/Editor/utils/font.js +40 -37
  159. package/dist/Editor/utils/helper.js +197 -30
  160. package/dist/Editor/utils/insertAppHeader.js +1 -1
  161. package/dist/Editor/utils/signature.js +2 -9
  162. package/dist/Editor/utils/updateFormName.js +22 -0
  163. package/package.json +4 -4
@@ -10,7 +10,8 @@ const MultiSelectType = props => {
10
10
  options,
11
11
  label = "",
12
12
  readOnly,
13
- settings
13
+ settings,
14
+ translation
14
15
  } = props;
15
16
  const {
16
17
  onChange,
@@ -33,11 +34,11 @@ const MultiSelectType = props => {
33
34
  };
34
35
  const handleUpdate = data => {
35
36
  const updateData = {
36
- "label": "Multi Select",
37
- "visible": true,
38
- "key": property,
39
- "type": "multi-select",
40
- "options": data
37
+ label: "Multi Select",
38
+ visible: true,
39
+ key: property,
40
+ type: "multi-select",
41
+ options: data
41
42
  };
42
43
  onUpdateProperty(updateData);
43
44
  };
@@ -51,7 +52,8 @@ const MultiSelectType = props => {
51
52
  placeholder: label,
52
53
  disabled: readOnly,
53
54
  property: property,
54
- wrapColumn: wrapColumn
55
+ wrapColumn: wrapColumn,
56
+ translation: translation
55
57
  });
56
58
  };
57
59
  export default MultiSelectType;
@@ -60,7 +60,6 @@ const AddOptions = props => {
60
60
  };
61
61
  const onBlur = () => {
62
62
  setValue("");
63
- setAddBox(false);
64
63
  setError("");
65
64
  };
66
65
  return edit?.type === "select" || edit?.type === "multi-select" ? /*#__PURE__*/_jsxs(Box, {
@@ -11,7 +11,8 @@ const RenderRow = props => {
11
11
  properties,
12
12
  onSelect,
13
13
  selected,
14
- readOnly
14
+ readOnly,
15
+ translation
15
16
  } = props;
16
17
  const showProperties = properties?.filter(f => f.visible);
17
18
  return showProperties?.map((property, i) => {
@@ -22,7 +23,8 @@ const RenderRow = props => {
22
23
  property: property,
23
24
  onSelect: onSelect,
24
25
  selected: selected,
25
- readOnly: readOnly
26
+ readOnly: readOnly,
27
+ translation: translation
26
28
  }, `${property.key}_${i}`);
27
29
  });
28
30
  };
@@ -33,7 +35,8 @@ const ViewData = props => {
33
35
  customProps
34
36
  } = props;
35
37
  const {
36
- readOnly
38
+ readOnly,
39
+ translation
37
40
  } = customProps || {};
38
41
  const {
39
42
  properties,
@@ -67,7 +70,8 @@ const ViewData = props => {
67
70
  properties: properties,
68
71
  onSelect: onSelect,
69
72
  selected: selectedRows?.includes(row?.id),
70
- readOnly: readOnly
73
+ readOnly: readOnly,
74
+ translation: translation
71
75
  }), /*#__PURE__*/_jsx("td", {}), /*#__PURE__*/_jsx("td", {})]
72
76
  }, i);
73
77
  }), /*#__PURE__*/_jsx("tr", {
@@ -89,7 +89,7 @@ const VideoPlaceholder = props => {
89
89
  },
90
90
  children: [/*#__PURE__*/_jsx(Icon, {
91
91
  icon: "video"
92
- }), TYPE_LABELS[type] || translation("Embed Video or Other")]
92
+ }), translation(TYPE_LABELS[type] || "Embed Video or Other")]
93
93
  }) : /*#__PURE__*/_jsxs(Box, {
94
94
  sx: {
95
95
  color: "#64748B !important",
@@ -4,7 +4,6 @@ import { Node } from "slate";
4
4
  import { useSlateStatic, ReactEditor } from "slate-react";
5
5
  import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress, Box, Typography, useTheme } from "@mui/material";
6
6
  import DeleteIcon from "@mui/icons-material/Delete";
7
- import BackupIcon from "@mui/icons-material/Backup";
8
7
  import { GridSettingsIcon, GridAddSectionIcon, WorkflowIcon } from "../../common/iconslist";
9
8
  import FormPopup from "./FormPopup";
10
9
  import ButtonPopup from "../Button/ButtonPopup";
@@ -207,7 +206,7 @@ const Form = props => {
207
206
  }, {
208
207
  at: path
209
208
  });
210
- // adding form field style to the current form node
209
+ // adding form field style to the current form node
211
210
  const currentNode = Node.get(editor, path);
212
211
  if (currentNode) {
213
212
  currentNode.children.forEach((item, index) => {
@@ -415,7 +414,6 @@ const Form = props => {
415
414
  lineHeight: 1.43,
416
415
  ...formSX
417
416
  },
418
- ref: formEle,
419
417
  children: [/*#__PURE__*/_jsx(Grid, {
420
418
  className: "form-grid",
421
419
  item: true,
@@ -35,7 +35,6 @@ const FormTextArea = props => {
35
35
  onChange: onChange,
36
36
  sx: {
37
37
  width: "100%",
38
- borderWidth: "1px",
39
38
  borderBlockStyle: "solid",
40
39
  padding: {
41
40
  ...getTRBLBreakPoints(bannerSpacing)
@@ -1,5 +1,5 @@
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
5
  import FormElements from "./FormElements";
@@ -9,6 +9,7 @@ import { DeleteIcon } from "../../assets/svg/AIIcons";
9
9
  import { SettingsIcon } from "../../assets/svg/TableIcons";
10
10
  import { useEditorContext } from "../../hooks/useMouseMove";
11
11
  import useCommonStyle from "../../commonStyle";
12
+ import { getNode } from "../../utils/helper";
12
13
  import { jsx as _jsx } from "react/jsx-runtime";
13
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
14
15
  const FormField = props => {
@@ -35,7 +36,7 @@ const FormField = props => {
35
36
  const formPath = path.slice(0, path.length - 1);
36
37
  const {
37
38
  metadatamapping
38
- } = Node?.get(editor, formPath) || {};
39
+ } = getNode(editor, formPath) || {};
39
40
  const updatedElement = {
40
41
  ...element,
41
42
  metadatamapping
@@ -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 = {
@@ -140,8 +142,10 @@ const FreeGrid = props => {
140
142
  });
141
143
  break;
142
144
  case "duplicateSection":
145
+ const currentNode = Node.get(editor, cur_root_path);
146
+ const updatedFormNameNode = updateFormName(currentNode);
143
147
  Transforms.insertNodes(editor, [{
144
- ...JSON.parse(JSON.stringify(Node.get(editor, cur_root_path)))
148
+ ...JSON.parse(JSON.stringify(updatedFormNameNode))
145
149
  }], {
146
150
  at: next_path
147
151
  });
@@ -180,6 +184,10 @@ const FreeGrid = props => {
180
184
  const handleAddElementClick = type => () => {
181
185
  const isEmpty = isEmptySection();
182
186
  const insertAt = isEmpty ? [...path, 0] : [...path, childrenCountRef.current];
187
+ const {
188
+ xsVal,
189
+ sectionHeightXs
190
+ } = getNewElementXsValues(type, element?.children);
183
191
  switch (type) {
184
192
  case "addText":
185
193
  Transforms.insertNodes(editor, [{
@@ -196,7 +204,8 @@ const FreeGrid = props => {
196
204
  marginTop: 0,
197
205
  top: 0,
198
206
  width: 170,
199
- height: 30
207
+ height: 30,
208
+ ...(xsVal || {})
200
209
  }], {
201
210
  at: [...insertAt]
202
211
  });
@@ -214,20 +223,6 @@ const FreeGrid = props => {
214
223
  linkType: "webAddress"
215
224
  },
216
225
  iconPosition: "start",
217
- bgColor: "#2563EB",
218
- textColor: "#FFF",
219
- borderRadius: {
220
- topLeft: 30,
221
- topRight: 30,
222
- bottomLeft: 30,
223
- bottomRight: 30
224
- },
225
- bannerSpacing: {
226
- left: 12,
227
- top: 12,
228
- right: 12,
229
- bottom: 12
230
- },
231
226
  textAlign: "center",
232
227
  label: "Get Started"
233
228
  }],
@@ -236,7 +231,8 @@ const FreeGrid = props => {
236
231
  marginTop: 0,
237
232
  top: 0,
238
233
  width: 143,
239
- height: 50
234
+ height: 50,
235
+ ...(xsVal || {})
240
236
  }], {
241
237
  at: [...insertAt]
242
238
  });
@@ -262,8 +258,9 @@ const FreeGrid = props => {
262
258
  top: 0,
263
259
  width: 217,
264
260
  height: 173,
265
- width_xs: 217,
266
- height_xs: 173
261
+ // width_xs: 217,
262
+ // height_xs: 173,
263
+ ...(xsVal || {})
267
264
  }], {
268
265
  at: [...insertAt]
269
266
  });
@@ -286,7 +283,8 @@ const FreeGrid = props => {
286
283
  marginTop: 0,
287
284
  top: 0,
288
285
  width: 170,
289
- height: 80
286
+ height: 80,
287
+ ...(xsVal || {})
290
288
  }], {
291
289
  at: [...insertAt]
292
290
  });
@@ -299,7 +297,8 @@ const FreeGrid = props => {
299
297
  images: []
300
298
  }), {
301
299
  height: 370,
302
- width: 650
300
+ width: 650,
301
+ ...(xsVal || {})
303
302
  })
304
303
  }], {
305
304
  at: [...insertAt]
@@ -311,7 +310,8 @@ const FreeGrid = props => {
311
310
  ...DEFAULT_TABLE_NODE()
312
311
  }, {
313
312
  height: 150,
314
- width: 400
313
+ width: 400,
314
+ ...(xsVal || {})
315
315
  })
316
316
  }], {
317
317
  at: [...insertAt]
@@ -335,7 +335,8 @@ const FreeGrid = props => {
335
335
  marginTop: 0,
336
336
  top: 0,
337
337
  width: 400,
338
- height: 300
338
+ height: 300,
339
+ ...(xsVal || {})
339
340
  }], {
340
341
  at: [...insertAt]
341
342
  });
@@ -347,7 +348,9 @@ const FreeGrid = props => {
347
348
  children: [{
348
349
  text: ""
349
350
  }]
350
- }, {}, "freegridBox")
351
+ }, {
352
+ ...(xsVal || {})
353
+ }, "freegridBox")
351
354
  }], {
352
355
  at: [...insertAt]
353
356
  });
@@ -358,7 +361,8 @@ const FreeGrid = props => {
358
361
  ...FORM_NODE()
359
362
  }, {
360
363
  height: 92,
361
- width: 400
364
+ width: 400,
365
+ ...(xsVal || {})
362
366
  })
363
367
  }], {
364
368
  at: [...insertAt]
@@ -372,7 +376,8 @@ const FreeGrid = props => {
372
376
  })
373
377
  }, {
374
378
  height: 60,
375
- width: 400
379
+ width: 400,
380
+ ...(xsVal || {})
376
381
  })
377
382
  }], {
378
383
  at: [...insertAt]
@@ -393,19 +398,18 @@ const FreeGrid = props => {
393
398
  marginTop: 0,
394
399
  top: 0,
395
400
  width: 170,
396
- height: 30
401
+ height: 30,
402
+ ...(xsVal || {})
397
403
  }], {
398
404
  at: [...insertAt]
399
405
  });
400
406
  break;
401
407
  default:
402
408
  }
403
- if (breakpoint === "lg") {
409
+ if (xsVal) {
404
410
  setSelectedElement({});
405
-
406
- // auto align in mobile
407
411
  Transforms.setNodes(editor, {
408
- xs_updatedOn: null,
412
+ height_xs: sectionHeightXs,
409
413
  updated_at: new Date().getTime()
410
414
  }, {
411
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",
@@ -5,8 +5,8 @@ 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, {
@@ -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, breakpoint) => {
70
+ let maxY = 0;
71
+ sectionItems.forEach(item => {
72
+ if (item?.type && item?.type !== "paragraph") {
73
+ const {
74
+ bottom
75
+ } = getElementOffset(item, breakpoint === "lg" ? "lg" : "xs");
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
+ };
@@ -247,6 +247,9 @@ const useFreeGridStyles = ({
247
247
  },
248
248
  "& > .simple-text": {
249
249
  display: "none"
250
+ },
251
+ "& > .edt-paragraphs": {
252
+ display: "none"
250
253
  }
251
254
  },
252
255
  "& .fgi_type_form": {
@@ -350,6 +353,17 @@ const useFreeGridStyles = ({
350
353
  "& .fgi_type_text": {
351
354
  "& .edt-headings": {
352
355
  margin: "0px"
356
+ },
357
+ "& .edt-paragraphs": {
358
+ margin: "0px"
359
+ }
360
+ },
361
+ "& .fgi_type_table": {
362
+ "& .edt-headings": {
363
+ margin: "0px"
364
+ },
365
+ "& .edt-paragraphs": {
366
+ margin: "0px"
353
367
  }
354
368
  },
355
369
  /** element toolbar hide */
@@ -1,6 +1,6 @@
1
1
  /* eslint-disable no-unused-vars */
2
2
  import React, { useState } from "react";
3
- import { Transforms, Path, Node } from "slate";
3
+ import { Transforms, Path, Node, Editor, Element } from "slate";
4
4
  import { useSlateStatic, ReactEditor } from "slate-react";
5
5
  import { IconButton, Tooltip, Grid as GridContainer, useTheme } from "@mui/material";
6
6
  import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
@@ -206,7 +206,19 @@ const Grid = props => {
206
206
  };
207
207
  const onAddSection = () => () => {
208
208
  try {
209
- const duplicateGrid = JSON.parse(JSON.stringify(element));
209
+ let duplicateGrid = JSON.parse(JSON.stringify(element));
210
+ const carousel = Editor.above(editor, {
211
+ at: path,
212
+ match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "carousel-item"
213
+ });
214
+ if (carousel) {
215
+ const [carouselNode, carouselItemPath] = carousel || [];
216
+ const duplicatecCarousel = JSON.parse(JSON.stringify(carouselNode));
217
+ Transforms.insertNodes(editor, duplicatecCarousel, {
218
+ at: Path.next(carouselItemPath)
219
+ });
220
+ return;
221
+ }
210
222
  insertGrid(editor, duplicateGrid, [path[0] + 1, 0]);
211
223
  } catch (err) {
212
224
  console.log(err);
@@ -292,7 +292,7 @@ const GridItem = props => {
292
292
  ...getBRProps,
293
293
  display: "flex",
294
294
  flexDirection: flexDirection || "column",
295
- background: bgColor || "transparent",
295
+ background: bgColor,
296
296
  borderColor: getBorderColor(),
297
297
  borderWidth: borderWidth || "1px",
298
298
  borderStyle: borderStyle || "solid",
@@ -46,11 +46,12 @@
46
46
 
47
47
  .upload-input-wrapper {
48
48
  width: 100%;
49
+ height: 100%;
49
50
  position: relative;
50
51
  }
51
52
  .upload-input-wrapper input {
52
53
  width: 100%;
53
- height: 100px;
54
+ height: 100%;
54
55
  opacity: 0;
55
56
  z-index: 1;
56
57
  position: relative;