@flozy/editor 10.4.0 → 10.4.2

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 (190) hide show
  1. package/dist/Editor/ChatEditor.js +17 -16
  2. package/dist/Editor/CommonEditor.js +134 -18
  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 +454 -0
  17. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +23 -8
  18. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +5 -2
  19. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +3 -2
  20. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
  21. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
  22. package/dist/Editor/Elements/Embed/Image.js +3 -2
  23. package/dist/Editor/Elements/Embed/Video.js +1 -1
  24. package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
  25. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
  26. package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
  27. package/dist/Editor/Elements/Form/Form.js +184 -171
  28. package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
  29. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -2
  30. package/dist/Editor/Elements/Form/FormField.js +13 -6
  31. package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
  32. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +40 -32
  33. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
  34. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -0
  35. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  36. package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
  37. package/dist/Editor/Elements/FreeGrid/styles.js +75 -7
  38. package/dist/Editor/Elements/Grid/Grid.js +14 -2
  39. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  40. package/dist/Editor/Elements/List/CheckList.js +3 -2
  41. package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
  42. package/dist/Editor/Elements/Search/SearchButton.js +9 -8
  43. package/dist/Editor/Elements/Search/SearchList.js +9 -7
  44. package/dist/Editor/Elements/Signature/Signature.css +2 -1
  45. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
  46. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
  47. package/dist/Editor/Elements/SimpleText/index.js +6 -1
  48. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  49. package/dist/Editor/Elements/Table/DragButton.js +0 -1
  50. package/dist/Editor/Elements/Table/Draggable.js +6 -2
  51. package/dist/Editor/Elements/Table/Styles.js +7 -0
  52. package/dist/Editor/Elements/Table/Table.js +3 -3
  53. package/dist/Editor/Elements/Table/TableCell.js +31 -8
  54. package/dist/Editor/Elements/Title/title.js +6 -6
  55. package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
  56. package/dist/Editor/MiniEditor.js +2 -1
  57. package/dist/Editor/Styles/EditorStyles.js +5 -5
  58. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  59. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
  60. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  61. package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
  62. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  63. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
  64. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
  65. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
  66. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
  67. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
  68. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
  69. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
  70. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
  71. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  72. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  73. package/dist/Editor/assets/svg/BackIcon.js +18 -0
  74. package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
  75. package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
  76. package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
  77. package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
  78. package/dist/Editor/common/Checkbox/index.js +46 -0
  79. package/dist/Editor/common/Checkbox/styles.js +45 -0
  80. package/dist/Editor/common/ColorPickerButton.js +41 -16
  81. package/dist/Editor/common/CustomColorPicker/index.js +130 -0
  82. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  83. package/dist/Editor/common/CustomDialog2/index.js +94 -0
  84. package/dist/Editor/common/CustomDialog2/style.js +67 -0
  85. package/dist/Editor/common/CustomSelect.js +43 -0
  86. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  87. package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
  88. package/dist/Editor/common/Icon.js +31 -1
  89. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  90. package/dist/Editor/common/ImageSelector/Styles.js +3 -9
  91. package/dist/Editor/common/LinkSettings/NavComponents.js +61 -56
  92. package/dist/Editor/common/LinkSettings/index.js +82 -81
  93. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  94. package/dist/Editor/common/LinkSettings/style.js +209 -74
  95. package/dist/Editor/common/MentionsPopup/index.js +4 -1
  96. package/dist/Editor/common/RadioGroup/index.js +48 -0
  97. package/dist/Editor/common/RadioGroup/styles.js +29 -0
  98. package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -15
  99. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
  100. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  101. package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
  102. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
  103. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  104. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  105. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  106. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  107. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  108. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  109. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  110. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  111. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  112. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  113. package/dist/Editor/common/RnD/ElementSettings/styles.js +146 -12
  114. package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
  115. package/dist/Editor/common/RnD/OptionsPopup/style.js +120 -19
  116. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
  117. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  118. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  119. package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
  120. package/dist/Editor/common/RnD/Utils/index.js +3 -1
  121. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +42 -58
  122. package/dist/Editor/common/RnD/VirtualElement/helper.js +323 -132
  123. package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
  124. package/dist/Editor/common/RnD/index.js +68 -39
  125. package/dist/Editor/common/Select/index.js +44 -5
  126. package/dist/Editor/common/Select/styles.js +30 -2
  127. package/dist/Editor/common/Shorthands/elements.js +65 -11
  128. package/dist/Editor/common/SnackBar/index.js +43 -0
  129. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  130. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
  131. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  132. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
  133. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  134. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  135. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  136. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  137. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  138. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
  139. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  140. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  141. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
  142. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
  143. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  144. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
  145. package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
  146. package/dist/Editor/common/Uploader.js +16 -0
  147. package/dist/Editor/common/iconListV2.js +177 -6
  148. package/dist/Editor/common/iconslist.js +24 -0
  149. package/dist/Editor/commonStyle.js +186 -62
  150. package/dist/Editor/helper/index.js +5 -1
  151. package/dist/Editor/helper/textIndeces.js +58 -0
  152. package/dist/Editor/helper/theme.js +203 -2
  153. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  154. package/dist/Editor/hooks/useMouseMove.js +8 -5
  155. package/dist/Editor/hooks/useTable.js +5 -4
  156. package/dist/Editor/hooks/useThemeValues.js +63 -0
  157. package/dist/Editor/plugins/withEmbeds.js +1 -1
  158. package/dist/Editor/plugins/withHTML.js +3 -1
  159. package/dist/Editor/plugins/withTable.js +1 -1
  160. package/dist/Editor/theme/ThemeList.js +50 -173
  161. package/dist/Editor/theme/index.js +149 -0
  162. package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
  163. package/dist/Editor/themeSettings/buttons/index.js +300 -0
  164. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  165. package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
  166. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  167. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  168. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  169. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  170. package/dist/Editor/themeSettings/icons.js +60 -0
  171. package/dist/Editor/themeSettings/index.js +380 -0
  172. package/dist/Editor/themeSettings/style.js +299 -0
  173. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  174. package/dist/Editor/themeSettingsAI/index.js +355 -0
  175. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  176. package/dist/Editor/themeSettingsAI/style.js +332 -0
  177. package/dist/Editor/utils/SlateUtilityFunctions.js +172 -46
  178. package/dist/Editor/utils/accordion.js +14 -4
  179. package/dist/Editor/utils/button.js +1 -17
  180. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  181. package/dist/Editor/utils/draftToSlate.js +3 -2
  182. package/dist/Editor/utils/events.js +50 -6
  183. package/dist/Editor/utils/font.js +40 -37
  184. package/dist/Editor/utils/form.js +4 -4
  185. package/dist/Editor/utils/formfield.js +9 -2
  186. package/dist/Editor/utils/helper.js +210 -26
  187. package/dist/Editor/utils/insertAppHeader.js +1 -1
  188. package/dist/Editor/utils/signature.js +2 -9
  189. package/dist/Editor/utils/updateFormName.js +22 -0
  190. package/package.json +4 -4
@@ -3,31 +3,138 @@ 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
+ fontFamily: "'Inter',sans-serif",
19
+ fontWeight: "700",
20
+ fontSize: "16px",
21
+ lineHeight: "25px",
22
+ background: theme?.palette?.editor?.miniToolBarBackground,
23
+ "& button": {
24
+ background: theme?.palette?.editor?.closeButtonBackground,
25
+ borderRadius: "8px",
26
+ "& svg": {
27
+ fill: theme?.palette?.editor?.closeButtonSvgStroke
28
+ }
29
+ }
30
+ },
31
+ "& .sectionOptionChild": {
32
+ background: theme?.palette?.editor?.miniToolBarBackground,
33
+ "& .MuiBox-root": {
34
+ maxHeight: "unset"
35
+ },
36
+ "& .MuiInputBase-root, fieldset": {
37
+ background: theme?.palette?.editor?.inputFieldBgColor,
38
+ borderRadius: "8px",
39
+ "& fieldset": {
40
+ border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
41
+ background: "transparent",
42
+ borderRadius: "8px"
43
+ },
44
+ "& input": {
45
+ border: `1px solid transparent`,
46
+ background: theme?.palette?.editor?.inputFieldBgColor,
47
+ borderRadius: "8px",
48
+ fontSize: "12px",
49
+ color: theme?.palette?.editor?.textColor
50
+ }
51
+ },
52
+ "& p": {
53
+ color: theme?.palette?.editor?.textColor
54
+ },
55
+ "& .sliderInput": {
56
+ border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
57
+ background: theme?.palette?.editor?.inputFieldBgColor,
58
+ borderRadius: "10px"
59
+ },
60
+ "& .style-settings-wrpr": {
61
+ overflow: "hidden",
62
+ "&:hover": {
63
+ overflowY: "auto",
64
+ "&::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb": {
65
+ background: `${theme?.palette?.editor?.brainPopupScroll} !important`
66
+ },
67
+ "&::-webkit-scrollbar-track, ::-webkit-scrollbar-track": {
68
+ visibility: "hidden"
69
+ }
70
+ }
71
+ },
72
+ "& svg": {
73
+ width: "17.5px",
74
+ height: "17.5px"
75
+ }
76
+ },
77
+ "& .MuiList-root": {
78
+ "& .MuiButtonBase-root": {
79
+ padding: "8px 12px",
80
+ "& .MuiTypography-root": {
81
+ color: `${theme?.palette?.editor?.textColor} !important`,
82
+ fontSize: "14px",
83
+ fontWeight: "500",
84
+ fontFamily: "'Inter',sans-serif"
85
+ },
86
+ "&:hover": {
87
+ background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`,
88
+ "& .MuiTypography-root": {
89
+ color: `${theme?.palette?.editor?.textColor} !important`
90
+ },
91
+ "& .MuiListItemIcon-root": {
92
+ "& .signatureElementIcon, & .newLineElementIcon": {
93
+ "& path": {
94
+ fill: `${theme?.palette?.editor?.textColor}`
95
+ }
96
+ },
97
+ "& .commonSvgStyle, & .commonSvgStyle2": {
98
+ "& path": {
99
+ stroke: `${theme?.palette?.editor?.textColor}`
100
+ }
101
+ },
102
+ "& .colorBoxElementIcon": {
103
+ "& path": {
104
+ stroke: `${theme?.palette?.editor?.textColor}`,
105
+ fill: "none"
106
+ }
107
+ },
108
+ "& .gridElementIcon": {
109
+ "& path": {
110
+ stroke: `${theme?.palette?.editor?.textColor}`,
111
+ fill: `${theme?.palette?.editor?.textColor}`
112
+ }
113
+ }
114
+ }
115
+ }
116
+ }
117
+ },
118
+ "& .sectionMoreOption": {
119
+ "& .MuiButtonBase-root": {
120
+ padding: "12px 12px",
121
+ color: `${theme?.palette?.editor?.textColor} !important`,
122
+ fontSize: "14px",
123
+ fontWeight: "500",
124
+ fontFamily: "'Inter',sans-serif"
125
+ }
126
+ },
11
127
  "& .papper-root": {
12
128
  width: "344px",
13
129
  boxShadow: "none",
14
- border: `1px solid ${theme?.palette?.editor?.borderColor}`,
15
130
  borderRadius: "7px",
16
131
  background: theme?.palette?.editor?.background,
17
132
  "& .MuiTypography-root, .MuiInputBase-root, input": {
18
133
  color: theme?.palette?.editor?.textColor
19
134
  },
20
- "& .MuiInputBase-root, input": {
21
- border: `1px solid ${theme?.palette?.editor?.borderColor}`
22
- },
23
135
  "& .borderInput": {
24
136
  background: theme?.palette?.editor?.background,
25
137
  color: theme?.palette?.editor?.textColor
26
- },
27
- "& .MuiCheckbox-root": {
28
- "& svg": {
29
- fill: theme?.palette?.editor?.textColor
30
- }
31
138
  }
32
139
  },
33
140
  "& .item-list-wrpr": {
@@ -37,13 +144,7 @@ const useOptionsPopupStyle = ({
37
144
  "& .MuiListItemButton-root": {
38
145
  borderRadius: "7px",
39
146
  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
- }
147
+ alignItems: "center"
47
148
  }
48
149
  },
49
150
  "& .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
@@ -1,69 +1,45 @@
1
1
  import { useEffect, useRef } from "react";
2
- import { Path, Transforms } from "slate";
3
2
  import { getNode } from "../../../utils/helper";
4
3
  import { ROW_HEIGHT } from "../Utils/gridDropItem";
5
- import { findFirstRowOverlap, getGridArea, handleContainers, moveOverlappedItems } from "./helper";
4
+ import { getGridArea, getNodeValues, handleTextAlignment } from "./helper";
6
5
  import { Box } from "@mui/material";
7
6
  import { jsx as _jsx } from "react/jsx-runtime";
8
- const updateTextHeight = (editor, path, height) => {
9
- if (!height) {
7
+ export const getElementOffset = (element, breakpoint) => {
8
+ const {
9
+ height,
10
+ gridArea,
11
+ marginTop
12
+ } = getNodeValues(element, breakpoint);
13
+ const [startRow] = getGridArea(gridArea);
14
+ const top = (startRow - 1) * ROW_HEIGHT + marginTop;
15
+ const bottom = top + height;
16
+ return {
17
+ top,
18
+ bottom
19
+ };
20
+ };
21
+ export const updateTextHeight = (editor, path, currHeight, updateBreakpoint) => {
22
+ if (!currHeight) {
10
23
  return;
11
24
  }
12
- const parentPath = Path.parent(path);
13
- const currentNode = getNode(editor, parentPath);
14
- const gridItems = currentNode?.children || [];
15
- const isNewlyAddedElement = gridItems.some(gridItem => !gridItem.gridArea_xs && gridItem.type !== "paragraph");
16
- if (isNewlyAddedElement) {
25
+ const textItem = getNode(editor, path);
26
+ if (!textItem) {
17
27
  return;
18
28
  }
19
- const textItemIndex = path[parentPath.length];
20
- const textItem = gridItems.find((_, index) => textItemIndex === index);
21
29
  const {
22
- marginTop_xs: marginTop,
23
- gridArea_xs: gridArea,
24
- height_xs
25
- } = textItem;
26
- const oldHeight = height_xs + marginTop;
27
- const newHeight = height + marginTop;
28
- const extraHeight = newHeight - oldHeight;
29
- let containerExtraHeight = extraHeight;
30
- if (extraHeight > 0) {
31
- const [startRow] = getGridArea(gridArea);
32
- const newRows = Math.floor(newHeight / ROW_HEIGHT) + 1;
33
- const endRow = startRow + newRows;
34
- const firstOverlappedRow = findFirstRowOverlap(gridItems, startRow, endRow, textItemIndex);
35
- if (firstOverlappedRow) {
36
- const moveRows = endRow - firstOverlappedRow;
37
- moveOverlappedItems(editor, moveRows, gridItems, parentPath, textItemIndex, startRow);
38
- containerExtraHeight += moveRows * ROW_HEIGHT;
39
- }
40
-
41
- // handle containers (box and section)
42
- const containerData = handleContainers(editor, parentPath, containerExtraHeight);
43
- containerData.forEach(container => {
44
- const {
45
- moveRows,
46
- containerNode,
47
- containerPath,
48
- newHeight,
49
- childIndex,
50
- lastChildStartRow
51
- } = container;
52
- if (moveRows) {
53
- moveOverlappedItems(editor, moveRows, containerNode?.children, containerPath, childIndex, lastChildStartRow);
54
- }
55
- Transforms.setNodes(editor, {
56
- height_xs: newHeight,
57
- xs_updatedOn: new Date().getTime()
58
- }, {
59
- at: containerPath
60
- });
61
- });
62
- Transforms.setNodes(editor, {
63
- height_xs: height
64
- }, {
65
- at: path
66
- });
30
+ height,
31
+ gridArea,
32
+ type
33
+ } = getNodeValues(textItem, updateBreakpoint);
34
+ if (!gridArea && type !== "paragraph") {
35
+ return;
36
+ }
37
+ const oldHeight = height;
38
+ const newHeight = currHeight;
39
+ const heightDiff = newHeight - oldHeight;
40
+ if (heightDiff !== 0) {
41
+ const textNode = [textItem, path];
42
+ handleTextAlignment(editor, textNode, heightDiff, updateBreakpoint);
67
43
  }
68
44
  };
69
45
  function VirtualTextElement(props) {
@@ -83,9 +59,9 @@ function VirtualTextElement(props) {
83
59
  height
84
60
  } = entry.contentRect;
85
61
  const currentText = currElement?.innerText;
86
- const prevText = prevTextRef.current;
62
+ const prevText = prevTextRef?.current;
87
63
  if (currentText && currentText !== prevText) {
88
- updateTextHeight(editor, path, height);
64
+ updateTextHeight(editor, path, height, "xs");
89
65
  }
90
66
  prevTextRef.current = currentText;
91
67
  }
@@ -122,6 +98,14 @@ function VirtualTextElement(props) {
122
98
  },
123
99
  "& .editor-blocker": {
124
100
  display: "none"
101
+ },
102
+ "& .fgi_type_text": {
103
+ "& .edt-headings": {
104
+ margin: "0px"
105
+ },
106
+ "& .edt-paragraphs": {
107
+ margin: "0px"
108
+ }
125
109
  }
126
110
  },
127
111
  dangerouslySetInnerHTML: {