@flozy/editor 10.2.1 → 10.2.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 (172) hide show
  1. package/dist/Editor/ChatEditor.js +17 -16
  2. package/dist/Editor/CommonEditor.js +120 -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 +6 -2
  7. package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
  8. package/dist/Editor/Elements/Button/EditorButton.js +25 -9
  9. package/dist/Editor/Elements/Carousel/CarouselItem.js +2 -1
  10. package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
  11. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
  13. package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
  14. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
  15. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +454 -0
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +21 -6
  17. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +5 -2
  18. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +3 -2
  19. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
  20. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
  21. package/dist/Editor/Elements/Embed/Image.js +3 -2
  22. package/dist/Editor/Elements/Embed/Video.js +1 -1
  23. package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
  24. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
  25. package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
  26. package/dist/Editor/Elements/Form/Form.js +181 -168
  27. package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
  28. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +3 -2
  29. package/dist/Editor/Elements/Form/FormField.js +13 -6
  30. package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
  31. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +36 -31
  32. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
  33. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  34. package/dist/Editor/Elements/FreeGrid/helper.js +113 -0
  35. package/dist/Editor/Elements/FreeGrid/styles.js +75 -7
  36. package/dist/Editor/Elements/Grid/Grid.js +14 -2
  37. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  38. package/dist/Editor/Elements/List/CheckList.js +3 -2
  39. package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
  40. package/dist/Editor/Elements/Search/SearchButton.js +9 -8
  41. package/dist/Editor/Elements/Search/SearchList.js +9 -7
  42. package/dist/Editor/Elements/Signature/Signature.css +2 -1
  43. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
  44. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
  45. package/dist/Editor/Elements/SimpleText/index.js +6 -1
  46. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  47. package/dist/Editor/Elements/Table/DragButton.js +0 -1
  48. package/dist/Editor/Elements/Table/Draggable.js +6 -2
  49. package/dist/Editor/Elements/Table/Styles.js +7 -0
  50. package/dist/Editor/Elements/Table/Table.js +3 -3
  51. package/dist/Editor/Elements/Table/TableCell.js +24 -5
  52. package/dist/Editor/Elements/Title/title.js +6 -6
  53. package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
  54. package/dist/Editor/MiniEditor.js +2 -1
  55. package/dist/Editor/Styles/EditorStyles.js +5 -5
  56. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  57. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
  58. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  59. package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
  60. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  61. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
  62. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
  63. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
  64. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
  65. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
  66. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
  67. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
  68. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
  69. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  70. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  71. package/dist/Editor/assets/svg/BackIcon.js +18 -0
  72. package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
  73. package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
  74. package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
  75. package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
  76. package/dist/Editor/common/ColorPickerButton.js +38 -16
  77. package/dist/Editor/common/CustomColorPicker/index.js +130 -0
  78. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  79. package/dist/Editor/common/CustomDialog2/index.js +94 -0
  80. package/dist/Editor/common/CustomDialog2/style.js +67 -0
  81. package/dist/Editor/common/CustomSelect.js +43 -0
  82. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  83. package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
  84. package/dist/Editor/common/Icon.js +31 -1
  85. package/dist/Editor/common/ImageSelector/Styles.js +3 -9
  86. package/dist/Editor/common/LinkSettings/NavComponents.js +34 -8
  87. package/dist/Editor/common/LinkSettings/index.js +84 -68
  88. package/dist/Editor/common/LinkSettings/style.js +245 -30
  89. package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -14
  90. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
  91. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  92. package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
  93. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
  94. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  95. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  96. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  97. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  98. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  99. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  100. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  101. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  102. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  103. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  104. package/dist/Editor/common/RnD/ElementSettings/styles.js +147 -12
  105. package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
  106. package/dist/Editor/common/RnD/OptionsPopup/style.js +121 -19
  107. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
  108. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  109. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  110. package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
  111. package/dist/Editor/common/RnD/Utils/index.js +3 -1
  112. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +48 -54
  113. package/dist/Editor/common/RnD/VirtualElement/helper.js +143 -131
  114. package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
  115. package/dist/Editor/common/RnD/index.js +6 -11
  116. package/dist/Editor/common/Select/index.js +2 -0
  117. package/dist/Editor/common/Shorthands/elements.js +65 -11
  118. package/dist/Editor/common/SnackBar/index.js +43 -0
  119. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  120. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  121. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  122. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  123. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  124. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  125. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  126. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
  127. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
  128. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  129. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
  130. package/dist/Editor/common/Uploader.js +8 -0
  131. package/dist/Editor/common/iconListV2.js +156 -6
  132. package/dist/Editor/common/iconslist.js +24 -0
  133. package/dist/Editor/commonStyle.js +168 -62
  134. package/dist/Editor/helper/index.js +4 -0
  135. package/dist/Editor/helper/textIndeces.js +58 -0
  136. package/dist/Editor/helper/theme.js +203 -2
  137. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  138. package/dist/Editor/hooks/useMouseMove.js +8 -5
  139. package/dist/Editor/hooks/useTable.js +5 -4
  140. package/dist/Editor/hooks/useThemeValues.js +63 -0
  141. package/dist/Editor/plugins/withEmbeds.js +1 -1
  142. package/dist/Editor/plugins/withHTML.js +3 -1
  143. package/dist/Editor/plugins/withTable.js +1 -1
  144. package/dist/Editor/theme/ThemeList.js +50 -173
  145. package/dist/Editor/theme/index.js +149 -0
  146. package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
  147. package/dist/Editor/themeSettings/buttons/index.js +300 -0
  148. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  149. package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
  150. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  151. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  152. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  153. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  154. package/dist/Editor/themeSettings/icons.js +60 -0
  155. package/dist/Editor/themeSettings/index.js +361 -0
  156. package/dist/Editor/themeSettings/style.js +299 -0
  157. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  158. package/dist/Editor/themeSettingsAI/index.js +355 -0
  159. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  160. package/dist/Editor/themeSettingsAI/style.js +332 -0
  161. package/dist/Editor/utils/SlateUtilityFunctions.js +169 -45
  162. package/dist/Editor/utils/accordion.js +14 -4
  163. package/dist/Editor/utils/button.js +1 -17
  164. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  165. package/dist/Editor/utils/draftToSlate.js +3 -2
  166. package/dist/Editor/utils/events.js +50 -6
  167. package/dist/Editor/utils/font.js +40 -37
  168. package/dist/Editor/utils/form.js +4 -4
  169. package/dist/Editor/utils/formfield.js +8 -2
  170. package/dist/Editor/utils/helper.js +109 -19
  171. package/dist/Editor/utils/signature.js +2 -9
  172. package/package.json +4 -4
@@ -9,6 +9,7 @@ const TextSettings = props => {
9
9
  editor,
10
10
  path,
11
11
  theme,
12
+ onClose,
12
13
  customProps
13
14
  } = props;
14
15
  const item_path = path.split("|").map(m => parseInt(m));
@@ -27,7 +28,8 @@ const TextSettings = props => {
27
28
  return /*#__PURE__*/_jsx(TextFormat, {
28
29
  classes: classes,
29
30
  editor: editor,
30
- customProps: customProps
31
+ customProps: customProps,
32
+ closeMainPopup: onClose
31
33
  });
32
34
  };
33
35
  export default TextSettings;
@@ -8,7 +8,8 @@ const VideoSettings = props => {
8
8
  const {
9
9
  editor,
10
10
  path,
11
- customProps
11
+ customProps,
12
+ onClose
12
13
  } = props;
13
14
  const item_path = path?.split("|").map(m => parseInt(m));
14
15
  const element_path = [...item_path, 0];
@@ -28,7 +29,7 @@ const VideoSettings = props => {
28
29
  });
29
30
  };
30
31
  const handleClose = () => {
31
- console.log("close");
32
+ onClose();
32
33
  };
33
34
  return /*#__PURE__*/_jsx(Box, {
34
35
  component: "div",
@@ -1,8 +1,9 @@
1
1
  const useElementSettingsStyle = theme => ({
2
2
  root: {
3
3
  zIndex: 1200,
4
- background: theme?.palette?.editor?.background,
5
- borderRadius: "10px",
4
+ background: theme?.palette?.editor?.miniToolBarBackground,
5
+ border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder}`,
6
+ borderRadius: "20px",
6
7
  overflow: "hidden",
7
8
  boxShadow: "0px 0px 12px 4px #00000014",
8
9
  padding: "10px 16px",
@@ -58,28 +59,34 @@ const useElementSettingsStyle = theme => ({
58
59
  maxHeight: "500px",
59
60
  overflowX: "hidden",
60
61
  overflowY: "auto",
61
- background: theme?.palette?.editor?.background,
62
- paddingLeft: "4px",
62
+ background: theme?.palette?.editor?.miniToolBarBackground,
63
+ paddingLeft: "2px",
64
+ paddingRight: "6px",
65
+ overflow: "hidden",
66
+ "&:hover": {
67
+ overflowY: "auto",
68
+ "&::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb": {
69
+ background: `${theme?.palette?.editor?.brainPopupScroll} !important`
70
+ },
71
+ "&::-webkit-scrollbar-track, ::-webkit-scrollbar-track": {
72
+ visibility: "hidden"
73
+ }
74
+ },
63
75
  "& .MuiTypography-root, .MuiInputBase-root, input": {
64
76
  color: theme?.palette?.editor?.textColor
65
77
  },
66
- "& .MuiInputBase-root, input": {
67
- border: `1px solid ${theme?.palette?.editor?.borderColor}`
68
- },
69
78
  "& .borderInput": {
70
79
  background: theme?.palette?.editor?.background,
71
80
  color: theme?.palette?.editor?.textColor
72
81
  },
73
- "& .MuiCheckbox-root": {
74
- "& svg": {
75
- fill: theme?.palette?.editor?.textColor
76
- }
77
- },
78
82
  "& .fillPath": {
79
83
  fill: theme?.palette?.editor?.textColor
80
84
  },
81
85
  "& .MuiIconButton-root": {
82
86
  color: theme?.palette?.editor?.textColor
87
+ },
88
+ "& .MuiFormHelperText-root": {
89
+ color: theme?.palette?.editor?.textColor
83
90
  }
84
91
  },
85
92
  "& .item-wrapper": {
@@ -104,6 +111,134 @@ const useElementSettingsStyle = theme => ({
104
111
  }
105
112
  }
106
113
  }
114
+ },
115
+ "& .settingsPopUp": {
116
+ background: theme?.palette?.editor?.miniToolBarBackground,
117
+ "& .text-formatter-popup": {
118
+ paddingRight: "10px",
119
+ overflow: "hidden",
120
+ "&:hover": {
121
+ overflow: "auto",
122
+ "&::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb": {
123
+ background: `${theme?.palette?.editor?.brainPopupScroll} !important`
124
+ },
125
+ "&::-webkit-scrollbar-track, ::-webkit-scrollbar-track": {
126
+ visibility: "hidden"
127
+ }
128
+ },
129
+ "& .more-btn-cbs": {
130
+ color: `${theme?.palette?.editor?.closeButtonSvgStroke}`,
131
+ border: `1px solid ${theme?.palette?.editor?.closeButtonSvgStroke}`,
132
+ paddingTop: "10px",
133
+ "& svg": {
134
+ width: "20px",
135
+ height: "24px"
136
+ }
137
+ },
138
+ "& .MuiInputBase-root": {
139
+ height: "36px"
140
+ }
141
+ },
142
+ "& .popUpHeader": {
143
+ fontSize: "16px",
144
+ fontFamily: "'Inter',sans-serif",
145
+ fontWeight: "700",
146
+ fontSize: "16px",
147
+ lineHeight: "25px",
148
+ "& button": {
149
+ background: theme?.palette?.editor?.closeButtonBackground,
150
+ borderRadius: "8px",
151
+ "& svg": {
152
+ fill: theme?.palette?.editor?.closeButtonSvgStroke
153
+ }
154
+ }
155
+ },
156
+ "& .MuiTypography-root": {
157
+ color: `${theme?.palette?.editor?.textColor} !important`
158
+ },
159
+ "& .MuiInputBase-root": {
160
+ background: theme?.palette?.editor?.inputFieldBgColor,
161
+ borderRadius: "8px",
162
+ fontSize: "12px",
163
+ height: "36px",
164
+ border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
165
+ "& fieldset": {
166
+ border: `1px solid transparent !important`,
167
+ background: "transparent",
168
+ borderRadius: "8px"
169
+ // fontSize: "12px",
170
+ },
171
+
172
+ "& input": {
173
+ // border: `1px solid transparent`,
174
+ // background: theme?.palette?.editor?.inputFieldBgColor,
175
+ borderRadius: "8px"
176
+ // fontSize: "12px",
177
+ }
178
+ },
179
+
180
+ "& .editor-dd": {
181
+ "& .MuiOutlinedInput-notchedOutline": {
182
+ border: `1px solid transparent !important`
183
+ }
184
+ },
185
+ "& .MuiAutocomplete-root": {
186
+ "& fieldset": {
187
+ border: `1px solid transparent !important`
188
+ }
189
+ },
190
+ "& .sliderInput": {
191
+ border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
192
+ background: theme?.palette?.editor?.inputFieldBgColor,
193
+ borderRadius: "10px",
194
+ paddingLeft: "10px",
195
+ width: "50px !important"
196
+ },
197
+ "& .selctedBtnIcon": {
198
+ border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
199
+ background: theme?.palette?.editor?.inputFieldBgColor,
200
+ borderRadius: "10px",
201
+ height: "36px",
202
+ "& svg": {
203
+ color: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
204
+ }
205
+ },
206
+ "& .muiIconsListParent": {
207
+ "& svg": {
208
+ color: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
209
+ },
210
+ "&::-webkit-scrollbar-thumb": {
211
+ background: `${theme?.palette?.editor?.brainPopupScroll} !important`
212
+ },
213
+ "&::-webkit-scrollbar-track": {
214
+ visibility: "hidden"
215
+ }
216
+ },
217
+ "& .menu-item-app-header": {
218
+ paddingBottom: "5px",
219
+ "& .text-field1": {
220
+ marginRight: "5px"
221
+ },
222
+ "& .settingsIcon, .deleteIcon": {
223
+ width: "20px",
224
+ height: "20px",
225
+ "& path": {
226
+ stroke: theme?.palette?.editor?.closeButtonSvgStroke
227
+ }
228
+ }
229
+ },
230
+ "& .MuiPaper-root": {
231
+ background: theme?.palette?.editor?.miniToolBarBackground
232
+ },
233
+ "& .iconRadioButton": {
234
+ "& svg": {
235
+ height: "24px",
236
+ width: "24px"
237
+ },
238
+ "& .MuiRadio-root": {
239
+ paddingLeft: "0px"
240
+ }
241
+ }
107
242
  }
108
243
  },
109
244
  dialog: {
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
- import { Box, Paper, Popper, Typography, Tooltip, IconButton } from "@mui/material";
3
- import CloseIcon from "@mui/icons-material/Close";
2
+ import { Box, Paper, Popper, Typography, Tooltip, IconButton, Grid } from "@mui/material";
3
+ import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
4
4
  import useOptionsPopupStyle from "./style";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
6
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -30,7 +30,7 @@ const OptionsPopup = props => {
30
30
  className: "papper-root",
31
31
  children: [/*#__PURE__*/_jsxs(Typography, {
32
32
  variant: "div",
33
- className: "item-wrapper title",
33
+ className: "item-wrapper title sectionOptionTitle",
34
34
  children: [translation(title), /*#__PURE__*/_jsx(Box, {
35
35
  component: "div",
36
36
  children: /*#__PURE__*/_jsx(Tooltip, {
@@ -38,11 +38,14 @@ const OptionsPopup = props => {
38
38
  arrow: true,
39
39
  children: /*#__PURE__*/_jsx(IconButton, {
40
40
  onClick: handleClose,
41
- children: /*#__PURE__*/_jsx(CloseIcon, {})
41
+ children: /*#__PURE__*/_jsx(CloseRoundedIcon, {})
42
42
  })
43
43
  })
44
44
  })]
45
- }), children]
45
+ }), /*#__PURE__*/_jsx(Grid, {
46
+ className: "sectionOptionChild",
47
+ children: children
48
+ })]
46
49
  })
47
50
  }) : null;
48
51
  };
@@ -3,31 +3,139 @@ const useOptionsPopupStyle = ({
3
3
  }) => ({
4
4
  root: {
5
5
  zIndex: 1200,
6
- background: theme?.palette?.editor?.background,
7
- borderRadius: "7px",
6
+ background: theme?.palette?.editor?.miniToolBarBackground,
7
+ border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder}`,
8
+ borderRadius: "20px",
8
9
  overflow: "hidden",
9
- boxShadow: "1px 1px 3px rgba(0,0,0,0.3)",
10
+ boxShadow: "0px 0px 12px 4px #00000014",
10
11
  marginRight: "4px !important",
12
+ padding: "0px 5px",
13
+ fontFamily: "'Inter',sans-serif",
14
+ "& .MuiPaper-root": {
15
+ background: theme?.palette?.editor?.miniToolBarBackground
16
+ },
17
+ "& .sectionOptionTitle": {
18
+ fontSize: "16px",
19
+ fontFamily: "'Inter',sans-serif",
20
+ fontWeight: "700",
21
+ fontSize: "16px",
22
+ lineHeight: "25px",
23
+ background: theme?.palette?.editor?.miniToolBarBackground,
24
+ "& button": {
25
+ background: theme?.palette?.editor?.closeButtonBackground,
26
+ borderRadius: "8px",
27
+ "& svg": {
28
+ fill: theme?.palette?.editor?.closeButtonSvgStroke
29
+ }
30
+ }
31
+ },
32
+ "& .sectionOptionChild": {
33
+ background: theme?.palette?.editor?.miniToolBarBackground,
34
+ "& .MuiBox-root": {
35
+ maxHeight: "unset"
36
+ },
37
+ "& .MuiInputBase-root, fieldset": {
38
+ background: theme?.palette?.editor?.inputFieldBgColor,
39
+ borderRadius: "8px",
40
+ "& fieldset": {
41
+ border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
42
+ background: "transparent",
43
+ borderRadius: "8px"
44
+ },
45
+ "& input": {
46
+ border: `1px solid transparent`,
47
+ background: theme?.palette?.editor?.inputFieldBgColor,
48
+ borderRadius: "8px",
49
+ fontSize: "12px",
50
+ color: theme?.palette?.editor?.textColor
51
+ }
52
+ },
53
+ "& p": {
54
+ color: theme?.palette?.editor?.textColor
55
+ },
56
+ "& .sliderInput": {
57
+ border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
58
+ background: theme?.palette?.editor?.inputFieldBgColor,
59
+ borderRadius: "10px"
60
+ },
61
+ "& .style-settings-wrpr": {
62
+ overflow: "hidden",
63
+ "&:hover": {
64
+ overflowY: "auto",
65
+ "&::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb": {
66
+ background: `${theme?.palette?.editor?.brainPopupScroll} !important`
67
+ },
68
+ "&::-webkit-scrollbar-track, ::-webkit-scrollbar-track": {
69
+ visibility: "hidden"
70
+ }
71
+ }
72
+ },
73
+ "& svg": {
74
+ width: "17.5px",
75
+ height: "17.5px"
76
+ }
77
+ },
78
+ "& .MuiList-root": {
79
+ "& .MuiButtonBase-root": {
80
+ padding: "8px 12px",
81
+ "& .MuiTypography-root": {
82
+ color: `${theme?.palette?.editor?.textColor} !important`,
83
+ fontSize: "14px",
84
+ fontWeight: "500",
85
+ fontFamily: "'Inter',sans-serif"
86
+ },
87
+ "&:hover": {
88
+ background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`,
89
+ "& .MuiTypography-root": {
90
+ color: `${theme?.palette?.editor?.textColor} !important`
91
+ },
92
+ "& .MuiListItemIcon-root": {
93
+ "& .signatureElementIcon, & .newLineElementIcon": {
94
+ "& path": {
95
+ fill: `${theme?.palette?.editor?.textColor}`
96
+ }
97
+ },
98
+ "& .commonSvgStyle, & .commonSvgStyle2": {
99
+ "& path": {
100
+ stroke: `${theme?.palette?.editor?.textColor}`
101
+ }
102
+ },
103
+ "& .colorBoxElementIcon": {
104
+ "& path": {
105
+ stroke: `${theme?.palette?.editor?.textColor}`,
106
+ fill: "none"
107
+ }
108
+ },
109
+ "& .gridElementIcon": {
110
+ "& path": {
111
+ stroke: `${theme?.palette?.editor?.textColor}`,
112
+ fill: `${theme?.palette?.editor?.textColor}`
113
+ }
114
+ }
115
+ }
116
+ }
117
+ }
118
+ },
119
+ "& .sectionMoreOption": {
120
+ "& .MuiButtonBase-root": {
121
+ padding: "12px 12px",
122
+ color: `${theme?.palette?.editor?.textColor} !important`,
123
+ fontSize: "14px",
124
+ fontWeight: "500",
125
+ fontFamily: "'Inter',sans-serif"
126
+ }
127
+ },
11
128
  "& .papper-root": {
12
129
  width: "344px",
13
130
  boxShadow: "none",
14
- border: `1px solid ${theme?.palette?.editor?.borderColor}`,
15
131
  borderRadius: "7px",
16
132
  background: theme?.palette?.editor?.background,
17
133
  "& .MuiTypography-root, .MuiInputBase-root, input": {
18
134
  color: theme?.palette?.editor?.textColor
19
135
  },
20
- "& .MuiInputBase-root, input": {
21
- border: `1px solid ${theme?.palette?.editor?.borderColor}`
22
- },
23
136
  "& .borderInput": {
24
137
  background: theme?.palette?.editor?.background,
25
138
  color: theme?.palette?.editor?.textColor
26
- },
27
- "& .MuiCheckbox-root": {
28
- "& svg": {
29
- fill: theme?.palette?.editor?.textColor
30
- }
31
139
  }
32
140
  },
33
141
  "& .item-list-wrpr": {
@@ -37,13 +145,7 @@ const useOptionsPopupStyle = ({
37
145
  "& .MuiListItemButton-root": {
38
146
  borderRadius: "7px",
39
147
  color: theme?.palette?.editor?.textColor,
40
- "&:hover": {
41
- color: theme?.palette?.editor?.activeColor,
42
- background: "rgba(233, 243, 254, 1)",
43
- "& .MuiTypography-root": {
44
- color: theme?.palette?.editor?.activeColor
45
- }
46
- }
148
+ alignItems: "center"
47
149
  }
48
150
  },
49
151
  "& .item-wrapper": {
@@ -10,23 +10,27 @@ const SwitchViewport = props => {
10
10
  const {
11
11
  breakpoint,
12
12
  onChange,
13
- translation
13
+ translation,
14
+ show
14
15
  } = props;
15
16
  const classes = useSwitchViewport();
16
17
  const {
17
- setActiveBreakPoint
18
+ setSelectedElement
18
19
  } = useEditorContext();
19
20
  useEffect(() => {
20
- console.log(breakpoint);
21
+ // to reset selection on viewport changes - FS-6589
22
+ setSelectedElement({});
21
23
  }, [breakpoint]);
22
24
  return /*#__PURE__*/_jsxs(Box, {
23
25
  sx: classes.root,
26
+ style: {
27
+ display: show ? "block" : "none"
28
+ },
24
29
  children: [/*#__PURE__*/_jsx(Tooltip, {
25
30
  title: translation("Desktop View"),
26
31
  children: /*#__PURE__*/_jsx(IconButton, {
27
32
  className: `${!breakpoint || breakpoint === "lg" ? "active" : ""}`,
28
33
  onClick: () => {
29
- setActiveBreakPoint("");
30
34
  onChange("");
31
35
  },
32
36
  children: /*#__PURE__*/_jsx(PersonalVideoIcon, {})
@@ -36,7 +40,6 @@ const SwitchViewport = props => {
36
40
  children: /*#__PURE__*/_jsx(IconButton, {
37
41
  className: `${breakpoint === "xs" ? "active" : ""}`,
38
42
  onClick: () => {
39
- setActiveBreakPoint("xs");
40
43
  onChange("xs");
41
44
  },
42
45
  children: /*#__PURE__*/_jsx(PhoneIphoneIcon, {})
@@ -0,0 +1,17 @@
1
+ import { Experimental_CssVarsProvider as CssVarsProvider, experimental_extendTheme as extendTheme } from "@mui/material/styles";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ function MainThemeProvider({
4
+ children,
5
+ userSelectedTheme,
6
+ theme = {}
7
+ }) {
8
+ const themeVars = extendTheme(userSelectedTheme?.theme?.cssVars || {});
9
+ return /*#__PURE__*/_jsx(CssVarsProvider, {
10
+ theme: {
11
+ ...themeVars,
12
+ ...theme
13
+ },
14
+ children: children
15
+ });
16
+ }
17
+ export default MainThemeProvider;
@@ -1,6 +1,7 @@
1
1
  import React from "react";
2
- import { useTheme, ThemeProvider, createTheme, useMediaQuery } from "@mui/material";
2
+ import { useTheme, createTheme, useMediaQuery } from "@mui/material";
3
3
  import { isStimulator, STIMULATOR_MOCK } from "../../../hooks/useBreakpoints";
4
+ import MainThemeProvider from "./MainThemeProvider";
4
5
 
5
6
  // Custom breakpoints functions
6
7
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -59,13 +60,15 @@ const extendedTheme = (prevTheme, isPrintMode) => createTheme({
59
60
  } : getBreakPoints(prevTheme)
60
61
  });
61
62
  const ViewportStimulator = ({
62
- children
63
+ children,
64
+ selectedTheme
63
65
  }) => {
64
66
  const theme = useTheme();
65
67
  const isPrintMode = useMediaQuery("print");
66
68
  const viewportTheme = extendedTheme(theme, isPrintMode);
67
- return /*#__PURE__*/_jsx(ThemeProvider, {
69
+ return /*#__PURE__*/_jsx(MainThemeProvider, {
68
70
  theme: viewportTheme,
71
+ userSelectedTheme: selectedTheme,
69
72
  children: children
70
73
  });
71
74
  };
@@ -2,6 +2,7 @@ import { Transforms, Node, Path, Editor } from "slate";
2
2
  import { ReactEditor } from "slate-react";
3
3
  import { getNode, handleNegativeInteger } from "../../../utils/helper";
4
4
  import { handleBoxAlignment } from "../VirtualElement/helper";
5
+ import { convertToGridArea, findMaxYValue } from "../../../Elements/FreeGrid/helper";
5
6
  export const ROW_HEIGHT = 50;
6
7
 
7
8
  // const MARGIN_OF = {
@@ -22,18 +23,27 @@ export function updateRows() {}
22
23
  export function updateCols() {}
23
24
  const handleMoveNode = (editor, path, newPath, {
24
25
  isEmpty
25
- }, autoAlign) => {
26
+ }, autoAlign, moveToNode) => {
26
27
  try {
27
28
  let replaceNode = Node.get(editor, path);
29
+ let heightDiff = 0;
28
30
  if (autoAlign) {
29
- // reset node for auto alignment in mobile
31
+ const y = findMaxYValue(moveToNode?.children);
32
+ const {
33
+ gridArea,
34
+ marginTop
35
+ } = convertToGridArea(y);
30
36
  replaceNode = {
31
37
  ...replaceNode,
32
- gridArea_xs: null,
33
- xs_updatedOn: null,
34
- marginTop_xs: null
38
+ gridArea_xs: gridArea,
39
+ marginTop_xs: marginTop + 12,
40
+ xs_updatedOn: new Date().getTime()
35
41
  };
42
+ const newHeight = y + replaceNode?.height_xs + 12;
43
+ const diffH = newHeight - moveToNode?.height_xs;
44
+ heightDiff = diffH >= 0 ? diffH : 0;
36
45
  }
46
+ let rPath;
37
47
  if (isEmpty) {
38
48
  const toPath = [...newPath, 0];
39
49
  Transforms.insertNodes(editor, [{
@@ -44,7 +54,7 @@ const handleMoveNode = (editor, path, newPath, {
44
54
  Transforms.removeNodes(editor, {
45
55
  at: path
46
56
  });
47
- return toPath;
57
+ rPath = toPath;
48
58
  } else {
49
59
  Transforms.insertNodes(editor, [{
50
60
  ...replaceNode
@@ -54,8 +64,12 @@ const handleMoveNode = (editor, path, newPath, {
54
64
  Transforms.removeNodes(editor, {
55
65
  at: path
56
66
  });
57
- return newPath;
67
+ rPath = newPath;
58
68
  }
69
+ return {
70
+ rPath,
71
+ heightDiff
72
+ };
59
73
  } catch (err) {
60
74
  console.log(err);
61
75
  console.log("Drop Node error");
@@ -210,7 +224,7 @@ export function onDropItem(props, parentClass) {
210
224
  at: moveTo,
211
225
  match: n => n.type === "freegrid"
212
226
  });
213
- const [sectionNode, sectionPath] = sectionData || [];
227
+ const [, sectionPath] = sectionData || [];
214
228
  if (needMove && isInsidePath(from, moveTo)) {
215
229
  reRenderSectionPath = sectionPath;
216
230
  } else {
@@ -229,14 +243,6 @@ export function onDropItem(props, parentClass) {
229
243
  const isBoxHeader = currentNode?.childType === "appHeader" && moveTo?.length > 2;
230
244
  if (isBoxHeader) {
231
245
  // will handle on <BoxHeaderAutoAlignment />
232
- } else if (moveTo?.length === 2 && autoAlign) {
233
- // auto align in mobile
234
- Transforms.setNodes(editor, {
235
- xs_updatedOn: null,
236
- xs_updatedOn: new Date().getTime()
237
- }, {
238
- at: moveTo
239
- });
240
246
  } else if (autoAlign) {
241
247
  Transforms.setNodes(editor, {
242
248
  autoAlign: true,
@@ -245,12 +251,15 @@ export function onDropItem(props, parentClass) {
245
251
  at: moveTo
246
252
  });
247
253
  }
248
- const rPath = handleMoveNode(editor, path, newPath, {
254
+ const {
255
+ rPath,
256
+ heightDiff
257
+ } = handleMoveNode(editor, path, newPath, {
249
258
  isEmpty
250
- }, autoAlign);
259
+ }, autoAlign, toSectionNode) || {};
251
260
  reRenderChildNodes(editor, reRenderSectionPath || moveTo);
252
261
  if (autoAlign && !isBoxHeader) {
253
- handleBoxAlignment(editor, sectionNode, sectionPath);
262
+ handleBoxAlignment(editor, sectionPath, heightDiff);
254
263
  }
255
264
  return {
256
265
  updated_at: rPath
@@ -87,7 +87,9 @@ export function updatePositions(props, closestClass) {
87
87
  newPath = [...newPath, toSectionNode?.children?.length];
88
88
  }
89
89
  newPath = newPath.map(m => parseInt(m));
90
- const rPath = handleMoveNode(editor, path, newPath, {
90
+ const {
91
+ rPath
92
+ } = handleMoveNode(editor, path, newPath, {
91
93
  isEmpty
92
94
  });
93
95
  // to update path index need to re-render items in parent sections