@flozy/editor 10.4.2 → 10.4.4

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 (165) hide show
  1. package/dist/Editor/ChatEditor.js +16 -17
  2. package/dist/Editor/CommonEditor.js +16 -131
  3. package/dist/Editor/DialogWrapper.js +25 -31
  4. package/dist/Editor/Editor.css +8 -46
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +3 -11
  6. package/dist/Editor/Elements/Accordion/Accordion.js +9 -46
  7. package/dist/Editor/Elements/Accordion/AccordionSummary.js +23 -1
  8. package/dist/Editor/Elements/AppHeader/AppHeader.js +5 -10
  9. package/dist/Editor/Elements/Button/EditorButton.js +9 -27
  10. package/dist/Editor/Elements/Carousel/CarouselItem.js +1 -2
  11. package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -61
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  13. package/dist/Editor/Elements/Color Picker/ColorPicker.js +7 -10
  14. package/dist/Editor/Elements/Color Picker/Styles.js +13 -15
  15. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +26 -26
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +5 -5
  17. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +1 -0
  18. package/dist/Editor/Elements/Embed/Video.js +1 -1
  19. package/dist/Editor/Elements/Form/Form.js +3 -3
  20. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +1 -0
  21. package/dist/Editor/Elements/Form/FormField.js +2 -3
  22. package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
  23. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +31 -35
  24. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
  25. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +0 -1
  26. package/dist/Editor/Elements/FreeGrid/Options/More.js +7 -7
  27. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +1 -1
  28. package/dist/Editor/Elements/FreeGrid/styles.js +0 -14
  29. package/dist/Editor/Elements/Grid/Grid.js +2 -14
  30. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  31. package/dist/Editor/Elements/Signature/Signature.css +1 -2
  32. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +5 -18
  33. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +3 -16
  34. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  35. package/dist/Editor/Elements/Table/DragButton.js +1 -0
  36. package/dist/Editor/Elements/Table/Draggable.js +2 -6
  37. package/dist/Editor/Elements/Table/Styles.js +0 -7
  38. package/dist/Editor/Elements/Table/Table.js +3 -3
  39. package/dist/Editor/Elements/Table/TableCell.js +5 -24
  40. package/dist/Editor/Elements/Title/title.js +6 -6
  41. package/dist/Editor/Elements/Variables/VariableButton.js +1 -10
  42. package/dist/Editor/MiniEditor.js +1 -2
  43. package/dist/Editor/Styles/EditorStyles.js +5 -5
  44. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  45. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  46. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  47. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -10
  48. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  49. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +2 -4
  50. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
  51. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
  52. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -7
  53. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
  54. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -72
  55. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +10 -58
  56. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  57. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  58. package/dist/Editor/common/ColorPickerButton.js +16 -41
  59. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  60. package/dist/Editor/common/FontLoader/FontLoader.js +0 -3
  61. package/dist/Editor/common/Icon.js +0 -28
  62. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  63. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  64. package/dist/Editor/common/LinkSettings/NavComponents.js +65 -45
  65. package/dist/Editor/common/LinkSettings/index.js +28 -14
  66. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  67. package/dist/Editor/common/LinkSettings/style.js +244 -164
  68. package/dist/Editor/common/MentionsPopup/index.js +1 -4
  69. package/dist/Editor/common/RnD/ElementOptions/Actions.js +5 -4
  70. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -2
  71. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +3 -4
  72. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  73. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  74. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  75. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  76. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
  77. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
  78. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  79. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
  80. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
  81. package/dist/Editor/common/RnD/ElementSettings/styles.js +1 -0
  82. package/dist/Editor/common/RnD/OptionsPopup/style.js +1 -0
  83. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +2 -11
  84. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  85. package/dist/Editor/common/RnD/Utils/gridDropItem.js +19 -28
  86. package/dist/Editor/common/RnD/Utils/index.js +1 -3
  87. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +58 -42
  88. package/dist/Editor/common/RnD/VirtualElement/helper.js +132 -323
  89. package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -16
  90. package/dist/Editor/common/RnD/index.js +39 -68
  91. package/dist/Editor/common/Select/index.js +7 -44
  92. package/dist/Editor/common/Select/styles.js +2 -30
  93. package/dist/Editor/common/Shorthands/elements.js +0 -54
  94. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  95. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +9 -12
  96. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  97. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -4
  98. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  99. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  100. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  101. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
  102. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
  103. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
  104. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
  105. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  106. package/dist/Editor/common/SwipeableDrawer/style.js +12 -14
  107. package/dist/Editor/common/Uploader.js +0 -16
  108. package/dist/Editor/common/iconListV2.js +0 -76
  109. package/dist/Editor/common/iconslist.js +0 -21
  110. package/dist/Editor/commonStyle.js +61 -116
  111. package/dist/Editor/helper/index.js +1 -5
  112. package/dist/Editor/helper/theme.js +2 -203
  113. package/dist/Editor/hooks/useMouseMove.js +3 -9
  114. package/dist/Editor/hooks/useTable.js +4 -5
  115. package/dist/Editor/plugins/withEmbeds.js +1 -1
  116. package/dist/Editor/plugins/withHTML.js +1 -3
  117. package/dist/Editor/plugins/withTable.js +1 -1
  118. package/dist/Editor/theme/ThemeList.js +173 -50
  119. package/dist/Editor/utils/SlateUtilityFunctions.js +37 -161
  120. package/dist/Editor/utils/accordion.js +4 -14
  121. package/dist/Editor/utils/button.js +17 -1
  122. package/dist/Editor/utils/customHooks/useTableResize.js +9 -49
  123. package/dist/Editor/utils/draftToSlate.js +2 -3
  124. package/dist/Editor/utils/events.js +6 -50
  125. package/dist/Editor/utils/font.js +37 -40
  126. package/dist/Editor/utils/formfield.js +0 -1
  127. package/dist/Editor/utils/helper.js +26 -210
  128. package/dist/Editor/utils/insertAppHeader.js +1 -1
  129. package/dist/Editor/utils/signature.js +9 -2
  130. package/package.json +4 -4
  131. package/dist/Editor/Elements/FreeGrid/helper.js +0 -115
  132. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
  133. package/dist/Editor/assets/svg/BackIcon.js +0 -18
  134. package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
  135. package/dist/Editor/common/Checkbox/index.js +0 -46
  136. package/dist/Editor/common/Checkbox/styles.js +0 -45
  137. package/dist/Editor/common/CustomColorPicker/index.js +0 -130
  138. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  139. package/dist/Editor/common/CustomDialog2/index.js +0 -94
  140. package/dist/Editor/common/CustomDialog2/style.js +0 -67
  141. package/dist/Editor/common/CustomSelect.js +0 -43
  142. package/dist/Editor/common/RadioGroup/index.js +0 -48
  143. package/dist/Editor/common/RadioGroup/styles.js +0 -29
  144. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  145. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +0 -115
  146. package/dist/Editor/helper/textIndeces.js +0 -58
  147. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  148. package/dist/Editor/hooks/useThemeValues.js +0 -63
  149. package/dist/Editor/theme/index.js +0 -149
  150. package/dist/Editor/themeSettings/ActiveTheme.js +0 -82
  151. package/dist/Editor/themeSettings/buttons/index.js +0 -300
  152. package/dist/Editor/themeSettings/buttons/style.js +0 -23
  153. package/dist/Editor/themeSettings/colorTheme/index.js +0 -310
  154. package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
  155. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  156. package/dist/Editor/themeSettings/fonts/index.js +0 -240
  157. package/dist/Editor/themeSettings/fonts/style.js +0 -62
  158. package/dist/Editor/themeSettings/icons.js +0 -60
  159. package/dist/Editor/themeSettings/index.js +0 -380
  160. package/dist/Editor/themeSettings/style.js +0 -299
  161. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  162. package/dist/Editor/themeSettingsAI/index.js +0 -355
  163. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
  164. package/dist/Editor/themeSettingsAI/style.js +0 -332
  165. package/dist/Editor/utils/updateFormName.js +0 -22
@@ -171,11 +171,11 @@ const MultiSelectWithPopover = props => {
171
171
  variant: "filled",
172
172
  sx: {
173
173
  backgroundColor: option?.color,
174
- color: "#0F172A",
174
+ color: '#0F172A',
175
175
  "& .MuiChip-deleteIcon": {
176
176
  flexShrink: 0,
177
177
  "& path": {
178
- stroke: "#0F172A !important"
178
+ stroke: '#0F172A !important'
179
179
  }
180
180
  },
181
181
  "&:hover": {
@@ -222,9 +222,9 @@ const MultiSelectWithPopover = props => {
222
222
  maxHeight: "250px",
223
223
  overflowY: "auto",
224
224
  overflowX: "hidden",
225
- pr: "12px",
226
- pl: "12px",
227
- marginTop: "12px",
225
+ pr: '12px',
226
+ pl: '12px',
227
+ marginTop: '12px',
228
228
  ...customScrollStyles
229
229
  }
230
230
  },
@@ -282,11 +282,11 @@ const MultiSelectWithPopover = props => {
282
282
  "& .MuiSvgIcon-root": {
283
283
  fontSize: 20
284
284
  },
285
- "& rect": {
285
+ '& rect': {
286
286
  fill: theme?.palette?.editor?.closeButtonSvgStroke
287
287
  },
288
- "&:hover": {
289
- backgroundColor: "transparent"
288
+ '&:hover': {
289
+ backgroundColor: 'transparent'
290
290
  }
291
291
  },
292
292
  children: /*#__PURE__*/_jsx(Icon, {
@@ -297,9 +297,9 @@ const MultiSelectWithPopover = props => {
297
297
  },
298
298
  sx: {
299
299
  backgroundColor: "transparent",
300
- fontFamily: "Inter",
300
+ fontFamily: 'Inter',
301
301
  fontWeight: 400,
302
- fontSize: "12px"
302
+ fontSize: '12px'
303
303
  },
304
304
  placeholder: "Create new one..."
305
305
  }),
@@ -315,11 +315,11 @@ const MultiSelectWithPopover = props => {
315
315
  deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
316
316
  sx: {
317
317
  backgroundColor: option?.color,
318
- color: "#0F172A",
318
+ color: '#0F172A',
319
319
  "& .MuiChip-deleteIcon": {
320
320
  flexShrink: 0,
321
321
  "& path": {
322
- stroke: "#0F172A !important"
322
+ stroke: '#0F172A !important'
323
323
  }
324
324
  },
325
325
  "&:hover": {
@@ -329,13 +329,13 @@ const MultiSelectWithPopover = props => {
329
329
  }, index))
330
330
  }), /*#__PURE__*/_jsx(Divider, {
331
331
  sx: {
332
- mt: "12px",
332
+ mt: '12px',
333
333
  borderBottom: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
334
334
  boxShadow: theme?.palette?.editor?.dividerDropShadow
335
335
  }
336
336
  }), /*#__PURE__*/_jsx(Box, {
337
337
  sx: {
338
- pl: "4px"
338
+ pl: '4px'
339
339
  },
340
340
  children: /*#__PURE__*/_jsxs(List, {
341
341
  sx: {
@@ -346,11 +346,11 @@ const MultiSelectWithPopover = props => {
346
346
  children: [/*#__PURE__*/_jsx(Typography, {
347
347
  sx: {
348
348
  mb: 1,
349
- pl: "8px",
349
+ pl: '8px',
350
350
  color: theme?.palette?.editor?.secondaryTextColor,
351
- fontFamily: "Inter",
351
+ fontFamily: 'Inter',
352
352
  fontWeight: 400,
353
- fontSize: "12px"
353
+ fontSize: '12px'
354
354
  },
355
355
  children: "Choose an option or create one"
356
356
  }), filteredOptions?.map((option, index) => /*#__PURE__*/_jsx(ListItem, {
@@ -363,19 +363,19 @@ const MultiSelectWithPopover = props => {
363
363
  sx: {
364
364
  paddingTop: "4px",
365
365
  paddingBottom: "4px",
366
- justifyContent: "space-between",
367
- "&:hover": {
368
- "& path": {
366
+ justifyContent: 'space-between',
367
+ '&:hover': {
368
+ '& path': {
369
369
  stroke: theme?.palette?.editor?.activeColor
370
370
  },
371
- borderRadius: "12px"
371
+ borderRadius: '12px'
372
372
  }
373
373
  },
374
374
  children: [/*#__PURE__*/_jsx(Chip, {
375
375
  label: option?.value,
376
376
  sx: {
377
377
  backgroundColor: option?.color,
378
- color: "#0F172A",
378
+ color: '#0F172A',
379
379
  fontWeight: 500,
380
380
  fontSize: "12px",
381
381
  fontFamily: "Inter",
@@ -389,11 +389,11 @@ const MultiSelectWithPopover = props => {
389
389
  }), /*#__PURE__*/_jsx(IconButton, {
390
390
  size: "small",
391
391
  sx: {
392
- "& path": {
392
+ '& path': {
393
393
  stroke: theme?.palette?.editor?.closeButtonSvgStroke
394
394
  },
395
- "&:hover": {
396
- backgroundColor: "transparent"
395
+ '&:hover': {
396
+ backgroundColor: 'transparent'
397
397
  }
398
398
  },
399
399
  onClick: e => handleEditOption(e, index),
@@ -422,7 +422,7 @@ const MultiSelectWithPopover = props => {
422
422
  label: `${inputValue}`,
423
423
  sx: {
424
424
  backgroundColor: chipColor,
425
- color: "#0F172A",
425
+ color: '#0F172A',
426
426
  fontWeight: 500,
427
427
  fontSize: "12px",
428
428
  fontFamily: "Inter",
@@ -34,11 +34,11 @@ const MultiSelectType = props => {
34
34
  };
35
35
  const handleUpdate = data => {
36
36
  const updateData = {
37
- label: "Multi Select",
38
- visible: true,
39
- key: property,
40
- type: "multi-select",
41
- options: data
37
+ "label": "Multi Select",
38
+ "visible": true,
39
+ "key": property,
40
+ "type": "multi-select",
41
+ "options": data
42
42
  };
43
43
  onUpdateProperty(updateData);
44
44
  };
@@ -60,6 +60,7 @@ const AddOptions = props => {
60
60
  };
61
61
  const onBlur = () => {
62
62
  setValue("");
63
+ setAddBox(false);
63
64
  setError("");
64
65
  };
65
66
  return edit?.type === "select" || edit?.type === "multi-select" ? /*#__PURE__*/_jsxs(Box, {
@@ -89,7 +89,7 @@ const VideoPlaceholder = props => {
89
89
  },
90
90
  children: [/*#__PURE__*/_jsx(Icon, {
91
91
  icon: "video"
92
- }), translation(TYPE_LABELS[type] || "Embed Video or Other")]
92
+ }), TYPE_LABELS[type] || translation("Embed Video or Other")]
93
93
  }) : /*#__PURE__*/_jsxs(Box, {
94
94
  sx: {
95
95
  color: "#64748B !important",
@@ -4,6 +4,7 @@ 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";
7
8
  import { GridSettingsIcon, GridAddSectionIcon, WorkflowIcon } from "../../common/iconslist";
8
9
  import FormPopup from "./FormPopup";
9
10
  import ButtonPopup from "../Button/ButtonPopup";
@@ -159,8 +160,7 @@ const Form = props => {
159
160
  [pair[0]]: pair[1],
160
161
  placeholder: placeholder,
161
162
  form_name: formName,
162
- tagName: tagName,
163
- uid: fieldData?.uid
163
+ tagName: tagName
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,6 +35,7 @@ const FormTextArea = props => {
35
35
  onChange: onChange,
36
36
  sx: {
37
37
  width: "100%",
38
+ borderWidth: "1px",
38
39
  borderBlockStyle: "solid",
39
40
  padding: {
40
41
  ...getTRBLBreakPoints(bannerSpacing)
@@ -1,5 +1,5 @@
1
1
  import React, { useState } from "react";
2
- import { Transforms } from "slate";
2
+ import { Transforms, Node } 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,7 +9,6 @@ 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";
13
12
  import { jsx as _jsx } from "react/jsx-runtime";
14
13
  import { jsxs as _jsxs } from "react/jsx-runtime";
15
14
  const FormField = props => {
@@ -36,7 +35,7 @@ const FormField = props => {
36
35
  const formPath = path.slice(0, path.length - 1);
37
36
  const {
38
37
  metadatamapping
39
- } = getNode(editor, formPath) || {};
38
+ } = Node?.get(editor, formPath) || {};
40
39
  const updatedElement = {
41
40
  ...element,
42
41
  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,19 +169,17 @@ const FormStyles = theme => ({
169
169
  }
170
170
  },
171
171
  colorButtonSingle: {
172
- border: "1.5px solid #DCE4EC !important",
173
172
  "&.active": {
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"
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
+ }
185
183
  }
186
184
  },
187
185
  colorButtonsInner: {
@@ -251,7 +249,7 @@ const FormStyles = theme => ({
251
249
  }
252
250
  },
253
251
  root: {
254
- padding: "10px"
252
+ padding: '10px'
255
253
  }
256
254
  });
257
255
  export default FormStyles;
@@ -22,8 +22,6 @@ 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";
27
25
  import { jsx as _jsx } from "react/jsx-runtime";
28
26
  import { jsxs as _jsxs } from "react/jsx-runtime";
29
27
  const MAX_DEVICE_WIDTH = {
@@ -142,10 +140,8 @@ const FreeGrid = props => {
142
140
  });
143
141
  break;
144
142
  case "duplicateSection":
145
- const currentNode = Node.get(editor, cur_root_path);
146
- const updatedFormNameNode = updateFormName(currentNode);
147
143
  Transforms.insertNodes(editor, [{
148
- ...JSON.parse(JSON.stringify(updatedFormNameNode))
144
+ ...JSON.parse(JSON.stringify(Node.get(editor, cur_root_path)))
149
145
  }], {
150
146
  at: next_path
151
147
  });
@@ -184,10 +180,6 @@ const FreeGrid = props => {
184
180
  const handleAddElementClick = type => () => {
185
181
  const isEmpty = isEmptySection();
186
182
  const insertAt = isEmpty ? [...path, 0] : [...path, childrenCountRef.current];
187
- const {
188
- xsVal,
189
- sectionHeightXs
190
- } = getNewElementXsValues(type, element?.children);
191
183
  switch (type) {
192
184
  case "addText":
193
185
  Transforms.insertNodes(editor, [{
@@ -204,8 +196,7 @@ const FreeGrid = props => {
204
196
  marginTop: 0,
205
197
  top: 0,
206
198
  width: 170,
207
- height: 30,
208
- ...(xsVal || {})
199
+ height: 30
209
200
  }], {
210
201
  at: [...insertAt]
211
202
  });
@@ -223,6 +214,20 @@ const FreeGrid = props => {
223
214
  linkType: "webAddress"
224
215
  },
225
216
  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
+ },
226
231
  textAlign: "center",
227
232
  label: "Get Started"
228
233
  }],
@@ -231,8 +236,7 @@ const FreeGrid = props => {
231
236
  marginTop: 0,
232
237
  top: 0,
233
238
  width: 143,
234
- height: 50,
235
- ...(xsVal || {})
239
+ height: 50
236
240
  }], {
237
241
  at: [...insertAt]
238
242
  });
@@ -258,9 +262,8 @@ const FreeGrid = props => {
258
262
  top: 0,
259
263
  width: 217,
260
264
  height: 173,
261
- // width_xs: 217,
262
- // height_xs: 173,
263
- ...(xsVal || {})
265
+ width_xs: 217,
266
+ height_xs: 173
264
267
  }], {
265
268
  at: [...insertAt]
266
269
  });
@@ -283,8 +286,7 @@ const FreeGrid = props => {
283
286
  marginTop: 0,
284
287
  top: 0,
285
288
  width: 170,
286
- height: 80,
287
- ...(xsVal || {})
289
+ height: 80
288
290
  }], {
289
291
  at: [...insertAt]
290
292
  });
@@ -297,8 +299,7 @@ const FreeGrid = props => {
297
299
  images: []
298
300
  }), {
299
301
  height: 370,
300
- width: 650,
301
- ...(xsVal || {})
302
+ width: 650
302
303
  })
303
304
  }], {
304
305
  at: [...insertAt]
@@ -310,8 +311,7 @@ const FreeGrid = props => {
310
311
  ...DEFAULT_TABLE_NODE()
311
312
  }, {
312
313
  height: 150,
313
- width: 400,
314
- ...(xsVal || {})
314
+ width: 400
315
315
  })
316
316
  }], {
317
317
  at: [...insertAt]
@@ -335,8 +335,7 @@ const FreeGrid = props => {
335
335
  marginTop: 0,
336
336
  top: 0,
337
337
  width: 400,
338
- height: 300,
339
- ...(xsVal || {})
338
+ height: 300
340
339
  }], {
341
340
  at: [...insertAt]
342
341
  });
@@ -348,9 +347,7 @@ const FreeGrid = props => {
348
347
  children: [{
349
348
  text: ""
350
349
  }]
351
- }, {
352
- ...(xsVal || {})
353
- }, "freegridBox")
350
+ }, {}, "freegridBox")
354
351
  }], {
355
352
  at: [...insertAt]
356
353
  });
@@ -361,8 +358,7 @@ const FreeGrid = props => {
361
358
  ...FORM_NODE()
362
359
  }, {
363
360
  height: 92,
364
- width: 400,
365
- ...(xsVal || {})
361
+ width: 400
366
362
  })
367
363
  }], {
368
364
  at: [...insertAt]
@@ -376,8 +372,7 @@ const FreeGrid = props => {
376
372
  })
377
373
  }, {
378
374
  height: 60,
379
- width: 400,
380
- ...(xsVal || {})
375
+ width: 400
381
376
  })
382
377
  }], {
383
378
  at: [...insertAt]
@@ -398,18 +393,19 @@ const FreeGrid = props => {
398
393
  marginTop: 0,
399
394
  top: 0,
400
395
  width: 170,
401
- height: 30,
402
- ...(xsVal || {})
396
+ height: 30
403
397
  }], {
404
398
  at: [...insertAt]
405
399
  });
406
400
  break;
407
401
  default:
408
402
  }
409
- if (xsVal) {
403
+ if (breakpoint === "lg") {
410
404
  setSelectedElement({});
405
+
406
+ // auto align in mobile
411
407
  Transforms.setNodes(editor, {
412
- height_xs: sectionHeightXs,
408
+ xs_updatedOn: null,
413
409
  updated_at: new Date().getTime()
414
410
  }, {
415
411
  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, groupByBreakpoint } from "../../helper/theme";
11
+ import { getBreakPointsValue } 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,11 +160,6 @@ 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);
168
163
  return /*#__PURE__*/_jsx(RnD, {
169
164
  id: `freegrid_box_item_${path.join("|")}_${updated_at}_${breakpoint}`,
170
165
  className: `freegrid-item path-${path.length} breakpoint-${breakpoint} freegrid-box_${path.join("_")}`,
@@ -231,7 +226,9 @@ const FreeGridBox = props => {
231
226
  "--rows": `repeat(${repeatTimes}, ${ROW_HEIGHT}px)`
232
227
  },
233
228
  sx: {
234
- ...boxSp,
229
+ borderRadius: {
230
+ ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
231
+ },
235
232
  background: sectionBgColor,
236
233
  backgroundImage: sectionBackgroundImage ? `url('${sectionBackgroundImage}')` : "",
237
234
  borderColor: borderColor || "transparent",
@@ -320,7 +320,6 @@ const FreeGridItem = props => {
320
320
  breakpoint: breakpoint,
321
321
  customProps: customProps,
322
322
  translation: translation,
323
- xsHidden: xsHidden,
324
323
  children: /*#__PURE__*/_jsxs(Box, {
325
324
  component: "div",
326
325
  ...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
- translation,
9
- breakpoint
8
+ breakpoint,
9
+ translation
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"
22
26
  }), breakpoint === "xs" ? /*#__PURE__*/_jsx(ListItemButton, {
23
27
  className: "item-wrapper",
24
28
  onClick: handleClick("forceAutoAlignment"),
25
29
  children: "Force Auto Alignment"
26
- }) : null, /*#__PURE__*/_jsx(ListItemButton, {
27
- className: "item-wrapper",
28
- onClick: handleClick("deleteSection"),
29
- children: "Delete Section"
30
- })]
30
+ }) : null]
31
31
  })
32
32
  });
33
33
  };
@@ -3,7 +3,7 @@ const textOptions = ["edit", "settings", "link", "saveAsTemplate", "close"];
3
3
  const buttonOptions = ["settings", "link", "saveAsTemplate", "close"];
4
4
  const imageOptions = ["settings", "link", "imageFrame", "saveAsTemplate", "close"];
5
5
  const videoOptions = ["settings", "saveAsTemplate", "close"];
6
- const boxOptions = ["settings", "link", "saveAsTemplate", "close"];
6
+ const boxOptions = ["settings", "saveAsTemplate", "close"];
7
7
  const appHeaderOptions = ["settings", "saveAsTemplate", "close"];
8
8
  const tableOptions = ["drag", "edit", "settings", "saveAsTemplate", "close"];
9
9
  const embedScriptOptions = ["embedScript", "saveAsTemplate", "close"];
@@ -247,9 +247,6 @@ const useFreeGridStyles = ({
247
247
  },
248
248
  "& > .simple-text": {
249
249
  display: "none"
250
- },
251
- "& > .edt-paragraphs": {
252
- display: "none"
253
250
  }
254
251
  },
255
252
  "& .fgi_type_form": {
@@ -353,17 +350,6 @@ const useFreeGridStyles = ({
353
350
  "& .fgi_type_text": {
354
351
  "& .edt-headings": {
355
352
  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"
367
353
  }
368
354
  },
369
355
  /** 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, Editor, Element } from "slate";
3
+ import { Transforms, Path, Node } 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,19 +206,7 @@ const Grid = props => {
206
206
  };
207
207
  const onAddSection = () => () => {
208
208
  try {
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
- }
209
+ const duplicateGrid = JSON.parse(JSON.stringify(element));
222
210
  insertGrid(editor, duplicateGrid, [path[0] + 1, 0]);
223
211
  } catch (err) {
224
212
  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,
295
+ background: bgColor || "transparent",
296
296
  borderColor: getBorderColor(),
297
297
  borderWidth: borderWidth || "1px",
298
298
  borderStyle: borderStyle || "solid",
@@ -46,12 +46,11 @@
46
46
 
47
47
  .upload-input-wrapper {
48
48
  width: 100%;
49
- height: 100%;
50
49
  position: relative;
51
50
  }
52
51
  .upload-input-wrapper input {
53
52
  width: 100%;
54
- height: 100%;
53
+ height: 100px;
55
54
  opacity: 0;
56
55
  z-index: 1;
57
56
  position: relative;