@flozy/editor 10.3.9 → 10.4.1

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 (166) 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 +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 +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 +3 -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/FreeGridItem.js +1 -0
  28. package/dist/Editor/Elements/FreeGrid/Options/More.js +7 -7
  29. package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
  30. package/dist/Editor/Elements/FreeGrid/styles.js +14 -0
  31. package/dist/Editor/Elements/Grid/Grid.js +14 -2
  32. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  33. package/dist/Editor/Elements/Signature/Signature.css +2 -1
  34. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
  35. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
  36. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  37. package/dist/Editor/Elements/Table/DragButton.js +0 -1
  38. package/dist/Editor/Elements/Table/Draggable.js +6 -2
  39. package/dist/Editor/Elements/Table/Styles.js +7 -0
  40. package/dist/Editor/Elements/Table/Table.js +3 -3
  41. package/dist/Editor/Elements/Table/TableCell.js +24 -5
  42. package/dist/Editor/Elements/Title/title.js +6 -6
  43. package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
  44. package/dist/Editor/MiniEditor.js +2 -1
  45. package/dist/Editor/Styles/EditorStyles.js +5 -5
  46. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  47. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
  48. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  49. package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
  50. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  51. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
  52. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
  53. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
  54. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
  55. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
  56. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
  57. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +58 -10
  58. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
  59. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  60. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  61. package/dist/Editor/assets/svg/BackIcon.js +18 -0
  62. package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
  63. package/dist/Editor/common/Checkbox/index.js +46 -0
  64. package/dist/Editor/common/Checkbox/styles.js +45 -0
  65. package/dist/Editor/common/ColorPickerButton.js +41 -16
  66. package/dist/Editor/common/CustomColorPicker/index.js +130 -0
  67. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  68. package/dist/Editor/common/CustomDialog2/index.js +94 -0
  69. package/dist/Editor/common/CustomDialog2/style.js +67 -0
  70. package/dist/Editor/common/CustomSelect.js +43 -0
  71. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  72. package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
  73. package/dist/Editor/common/Icon.js +28 -0
  74. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  75. package/dist/Editor/common/ImageSelector/Styles.js +3 -9
  76. package/dist/Editor/common/LinkSettings/NavComponents.js +45 -66
  77. package/dist/Editor/common/LinkSettings/index.js +14 -28
  78. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  79. package/dist/Editor/common/LinkSettings/style.js +164 -244
  80. package/dist/Editor/common/MentionsPopup/index.js +4 -1
  81. package/dist/Editor/common/RadioGroup/index.js +48 -0
  82. package/dist/Editor/common/RadioGroup/styles.js +29 -0
  83. package/dist/Editor/common/RnD/ElementOptions/Actions.js +4 -5
  84. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +2 -1
  85. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  86. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  87. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  88. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  89. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  90. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  91. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  92. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  93. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  94. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  95. package/dist/Editor/common/RnD/ElementSettings/styles.js +0 -1
  96. package/dist/Editor/common/RnD/OptionsPopup/style.js +0 -1
  97. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +11 -2
  98. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  99. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  100. package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
  101. package/dist/Editor/common/RnD/Utils/index.js +3 -1
  102. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +42 -58
  103. package/dist/Editor/common/RnD/VirtualElement/helper.js +323 -132
  104. package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
  105. package/dist/Editor/common/RnD/index.js +68 -39
  106. package/dist/Editor/common/Select/index.js +44 -7
  107. package/dist/Editor/common/Select/styles.js +31 -2
  108. package/dist/Editor/common/Shorthands/elements.js +54 -0
  109. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  110. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
  111. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  112. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
  113. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  114. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  115. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  116. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  117. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  118. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
  119. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  120. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  121. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  122. package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
  123. package/dist/Editor/common/Uploader.js +16 -0
  124. package/dist/Editor/common/iconListV2.js +76 -0
  125. package/dist/Editor/common/iconslist.js +21 -0
  126. package/dist/Editor/commonStyle.js +116 -61
  127. package/dist/Editor/helper/index.js +5 -1
  128. package/dist/Editor/helper/textIndeces.js +58 -0
  129. package/dist/Editor/helper/theme.js +203 -2
  130. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  131. package/dist/Editor/hooks/useMouseMove.js +9 -3
  132. package/dist/Editor/hooks/useTable.js +5 -4
  133. package/dist/Editor/hooks/useThemeValues.js +63 -0
  134. package/dist/Editor/plugins/withEmbeds.js +1 -1
  135. package/dist/Editor/plugins/withHTML.js +3 -1
  136. package/dist/Editor/plugins/withTable.js +1 -1
  137. package/dist/Editor/theme/ThemeList.js +50 -173
  138. package/dist/Editor/theme/index.js +149 -0
  139. package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
  140. package/dist/Editor/themeSettings/buttons/index.js +300 -0
  141. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  142. package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
  143. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  144. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  145. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  146. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  147. package/dist/Editor/themeSettings/icons.js +60 -0
  148. package/dist/Editor/themeSettings/index.js +380 -0
  149. package/dist/Editor/themeSettings/style.js +299 -0
  150. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  151. package/dist/Editor/themeSettingsAI/index.js +355 -0
  152. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  153. package/dist/Editor/themeSettingsAI/style.js +332 -0
  154. package/dist/Editor/utils/SlateUtilityFunctions.js +161 -37
  155. package/dist/Editor/utils/accordion.js +14 -4
  156. package/dist/Editor/utils/button.js +1 -17
  157. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  158. package/dist/Editor/utils/draftToSlate.js +3 -2
  159. package/dist/Editor/utils/events.js +50 -6
  160. package/dist/Editor/utils/font.js +40 -37
  161. package/dist/Editor/utils/formfield.js +1 -0
  162. package/dist/Editor/utils/helper.js +210 -26
  163. package/dist/Editor/utils/insertAppHeader.js +1 -1
  164. package/dist/Editor/utils/signature.js +2 -9
  165. package/dist/Editor/utils/updateFormName.js +22 -0
  166. package/package.json +4 -4
@@ -33,7 +33,8 @@ const MultiSelectWithPopover = props => {
33
33
  onChange,
34
34
  onUpdate,
35
35
  property,
36
- wrapColumn = false
36
+ wrapColumn = false,
37
+ translation
37
38
  } = props;
38
39
  const [anchorEl, setAnchorEl] = useState(null);
39
40
  const [anchorElOption, setAnchorElOption] = useState(null);
@@ -170,11 +171,11 @@ const MultiSelectWithPopover = props => {
170
171
  variant: "filled",
171
172
  sx: {
172
173
  backgroundColor: option?.color,
173
- color: '#0F172A',
174
+ color: "#0F172A",
174
175
  "& .MuiChip-deleteIcon": {
175
176
  flexShrink: 0,
176
177
  "& path": {
177
- stroke: '#0F172A !important'
178
+ stroke: "#0F172A !important"
178
179
  }
179
180
  },
180
181
  "&:hover": {
@@ -221,9 +222,9 @@ const MultiSelectWithPopover = props => {
221
222
  maxHeight: "250px",
222
223
  overflowY: "auto",
223
224
  overflowX: "hidden",
224
- pr: '12px',
225
- pl: '12px',
226
- marginTop: '12px',
225
+ pr: "12px",
226
+ pl: "12px",
227
+ marginTop: "12px",
227
228
  ...customScrollStyles
228
229
  }
229
230
  },
@@ -281,11 +282,11 @@ const MultiSelectWithPopover = props => {
281
282
  "& .MuiSvgIcon-root": {
282
283
  fontSize: 20
283
284
  },
284
- '& rect': {
285
+ "& rect": {
285
286
  fill: theme?.palette?.editor?.closeButtonSvgStroke
286
287
  },
287
- '&:hover': {
288
- backgroundColor: 'transparent'
288
+ "&:hover": {
289
+ backgroundColor: "transparent"
289
290
  }
290
291
  },
291
292
  children: /*#__PURE__*/_jsx(Icon, {
@@ -296,9 +297,9 @@ const MultiSelectWithPopover = props => {
296
297
  },
297
298
  sx: {
298
299
  backgroundColor: "transparent",
299
- fontFamily: 'Inter',
300
+ fontFamily: "Inter",
300
301
  fontWeight: 400,
301
- fontSize: '12px'
302
+ fontSize: "12px"
302
303
  },
303
304
  placeholder: "Create new one..."
304
305
  }),
@@ -314,11 +315,11 @@ const MultiSelectWithPopover = props => {
314
315
  deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
315
316
  sx: {
316
317
  backgroundColor: option?.color,
317
- color: '#0F172A',
318
+ color: "#0F172A",
318
319
  "& .MuiChip-deleteIcon": {
319
320
  flexShrink: 0,
320
321
  "& path": {
321
- stroke: '#0F172A !important'
322
+ stroke: "#0F172A !important"
322
323
  }
323
324
  },
324
325
  "&:hover": {
@@ -328,13 +329,13 @@ const MultiSelectWithPopover = props => {
328
329
  }, index))
329
330
  }), /*#__PURE__*/_jsx(Divider, {
330
331
  sx: {
331
- mt: '12px',
332
+ mt: "12px",
332
333
  borderBottom: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
333
334
  boxShadow: theme?.palette?.editor?.dividerDropShadow
334
335
  }
335
336
  }), /*#__PURE__*/_jsx(Box, {
336
337
  sx: {
337
- pl: '4px'
338
+ pl: "4px"
338
339
  },
339
340
  children: /*#__PURE__*/_jsxs(List, {
340
341
  sx: {
@@ -345,11 +346,11 @@ const MultiSelectWithPopover = props => {
345
346
  children: [/*#__PURE__*/_jsx(Typography, {
346
347
  sx: {
347
348
  mb: 1,
348
- pl: '8px',
349
+ pl: "8px",
349
350
  color: theme?.palette?.editor?.secondaryTextColor,
350
- fontFamily: 'Inter',
351
+ fontFamily: "Inter",
351
352
  fontWeight: 400,
352
- fontSize: '12px'
353
+ fontSize: "12px"
353
354
  },
354
355
  children: "Choose an option or create one"
355
356
  }), filteredOptions?.map((option, index) => /*#__PURE__*/_jsx(ListItem, {
@@ -362,19 +363,19 @@ const MultiSelectWithPopover = props => {
362
363
  sx: {
363
364
  paddingTop: "4px",
364
365
  paddingBottom: "4px",
365
- justifyContent: 'space-between',
366
- '&:hover': {
367
- '& path': {
366
+ justifyContent: "space-between",
367
+ "&:hover": {
368
+ "& path": {
368
369
  stroke: theme?.palette?.editor?.activeColor
369
370
  },
370
- borderRadius: '12px'
371
+ borderRadius: "12px"
371
372
  }
372
373
  },
373
374
  children: [/*#__PURE__*/_jsx(Chip, {
374
375
  label: option?.value,
375
376
  sx: {
376
377
  backgroundColor: option?.color,
377
- color: '#0F172A',
378
+ color: "#0F172A",
378
379
  fontWeight: 500,
379
380
  fontSize: "12px",
380
381
  fontFamily: "Inter",
@@ -388,11 +389,11 @@ const MultiSelectWithPopover = props => {
388
389
  }), /*#__PURE__*/_jsx(IconButton, {
389
390
  size: "small",
390
391
  sx: {
391
- '& path': {
392
+ "& path": {
392
393
  stroke: theme?.palette?.editor?.closeButtonSvgStroke
393
394
  },
394
- '&:hover': {
395
- backgroundColor: 'transparent'
395
+ "&:hover": {
396
+ backgroundColor: "transparent"
396
397
  }
397
398
  },
398
399
  onClick: e => handleEditOption(e, index),
@@ -421,7 +422,7 @@ const MultiSelectWithPopover = props => {
421
422
  label: `${inputValue}`,
422
423
  sx: {
423
424
  backgroundColor: chipColor,
424
- color: '#0F172A',
425
+ color: "#0F172A",
425
426
  fontWeight: 500,
426
427
  fontSize: "12px",
427
428
  fontFamily: "Inter",
@@ -442,7 +443,8 @@ const MultiSelectWithPopover = props => {
442
443
  anchorEl: anchorElOption,
443
444
  mode: mode,
444
445
  onClose: onClose,
445
- onEvent: onEditOption
446
+ onEvent: onEditOption,
447
+ translation: translation
446
448
  }) : null, showSnackBar ? /*#__PURE__*/_jsx(SnackbarAlert, {
447
449
  message: "Option already selected!",
448
450
  setShowSnackBar: setShowSnackBar
@@ -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";
@@ -160,7 +159,8 @@ const Form = props => {
160
159
  [pair[0]]: pair[1],
161
160
  placeholder: placeholder,
162
161
  form_name: formName,
163
- tagName: tagName
162
+ tagName: tagName,
163
+ uid: fieldData?.uid
164
164
  });
165
165
  }
166
166
  let params = {
@@ -207,7 +207,7 @@ const Form = props => {
207
207
  }, {
208
208
  at: path
209
209
  });
210
- // adding form field style to the current form node
210
+ // adding form field style to the current form node
211
211
  const currentNode = Node.get(editor, path);
212
212
  if (currentNode) {
213
213
  currentNode.children.forEach((item, index) => {
@@ -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",
@@ -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,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
  };