@flozy/editor 10.0.3 → 10.0.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 (179) hide show
  1. package/dist/Editor/ChatEditor.js +14 -7
  2. package/dist/Editor/CommonEditor.js +30 -13
  3. package/dist/Editor/Editor.css +1 -1
  4. package/dist/Editor/Elements/AI/AIInput.js +5 -3
  5. package/dist/Editor/Elements/AI/CustomSelect.js +9 -5
  6. package/dist/Editor/Elements/AI/PopoverAIInput.js +4 -2
  7. package/dist/Editor/Elements/Accordion/Accordion.js +4 -3
  8. package/dist/Editor/Elements/Accordion/AccordionBtnPopup.js +4 -1
  9. package/dist/Editor/Elements/Accordion/AccordionButton.js +6 -2
  10. package/dist/Editor/Elements/Accordion/AccordionTitlePopup.js +4 -1
  11. package/dist/Editor/Elements/AppHeader/AppHeaderButton.js +6 -2
  12. package/dist/Editor/Elements/AppHeader/AppHeaderPopup.js +4 -1
  13. package/dist/Editor/Elements/Attachments/AttachmentsButton.js +4 -1
  14. package/dist/Editor/Elements/Button/ButtonPopup.js +4 -1
  15. package/dist/Editor/Elements/Button/ButtonToolIcon.js +6 -2
  16. package/dist/Editor/Elements/Button/EditorButton.js +6 -5
  17. package/dist/Editor/Elements/Carousel/Carousel.js +5 -4
  18. package/dist/Editor/Elements/Carousel/CarouselButton.js +6 -2
  19. package/dist/Editor/Elements/Carousel/CarouselItem.js +3 -2
  20. package/dist/Editor/Elements/ChipText/ChipTextPopup.js +4 -1
  21. package/dist/Editor/Elements/CodeToText/CodeToText.js +5 -4
  22. package/dist/Editor/Elements/CodeToText/HtmlContextMenu.js +6 -2
  23. package/dist/Editor/Elements/Colorbox/ColorboxButton.js +6 -2
  24. package/dist/Editor/Elements/DataView/DataView.js +5 -2
  25. package/dist/Editor/Elements/DataView/DataViewButton.js +6 -2
  26. package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/ChooseSort.js +13 -12
  27. package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/index.js +7 -4
  28. package/dist/Editor/Elements/DataView/Layouts/FilterSort/index.js +7 -5
  29. package/dist/Editor/Elements/DataView/Layouts/FilterView.js +9 -7
  30. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +3 -2
  31. package/dist/Editor/Elements/DataView/Layouts/Options/AddProperty.js +5 -3
  32. package/dist/Editor/Elements/DataView/Layouts/Options/AllProperties.js +6 -5
  33. package/dist/Editor/Elements/DataView/Layouts/Options/ChangeProperty.js +5 -3
  34. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +7 -6
  35. package/dist/Editor/Elements/DataView/Layouts/Options/EditProperty.js +15 -12
  36. package/dist/Editor/Elements/DataView/Layouts/Options/FilterProperty.js +3 -2
  37. package/dist/Editor/Elements/DataView/Layouts/Options/PropertyList.js +3 -2
  38. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +12 -6
  39. package/dist/Editor/Elements/DataView/Layouts/TableView.js +6 -4
  40. package/dist/Editor/Elements/DataView/Layouts/index.js +3 -1
  41. package/dist/Editor/Elements/DataView/Providers/DataViewProvider.js +5 -2
  42. package/dist/Editor/Elements/Divider/Divider.js +5 -3
  43. package/dist/Editor/Elements/Divider/DividerButton.js +6 -2
  44. package/dist/Editor/Elements/Divider/DividerPopup.js +3 -2
  45. package/dist/Editor/Elements/Embed/Embed.js +4 -1
  46. package/dist/Editor/Elements/Embed/EmbedPopup.js +4 -1
  47. package/dist/Editor/Elements/Embed/Image.js +16 -11
  48. package/dist/Editor/Elements/Embed/Video.js +10 -7
  49. package/dist/Editor/Elements/EmbedScript/Code.js +7 -4
  50. package/dist/Editor/Elements/EmbedScript/EmbedScript.js +6 -2
  51. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +8 -5
  52. package/dist/Editor/Elements/Emoji/EmojiButton.js +6 -2
  53. package/dist/Editor/Elements/Form/FieldPopup.js +4 -1
  54. package/dist/Editor/Elements/Form/Form.js +12 -9
  55. package/dist/Editor/Elements/Form/FormButton.js +6 -2
  56. package/dist/Editor/Elements/Form/FormPopup.js +3 -2
  57. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +18 -12
  58. package/dist/Editor/Elements/Form/Workflow/ListWorkflow.js +13 -8
  59. package/dist/Editor/Elements/Form/Workflow/MoreOptions.js +3 -2
  60. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +4 -2
  61. package/dist/Editor/Elements/Form/Workflow/index.js +15 -9
  62. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +168 -97
  63. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +31 -6
  64. package/dist/Editor/Elements/FreeGrid/FreeGridButton.js +6 -2
  65. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +54 -6
  66. package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +3 -2
  67. package/dist/Editor/Elements/FreeGrid/Options/More.js +10 -4
  68. package/dist/Editor/Elements/Grid/Grid.js +13 -10
  69. package/dist/Editor/Elements/Grid/GridButton.js +9 -5
  70. package/dist/Editor/Elements/Grid/GridItem.js +13 -7
  71. package/dist/Editor/Elements/Grid/GridItemPopup.js +4 -1
  72. package/dist/Editor/Elements/Grid/GridPopup.js +4 -1
  73. package/dist/Editor/Elements/Grid/SectionPopup.js +4 -1
  74. package/dist/Editor/Elements/Link/Link.js +8 -5
  75. package/dist/Editor/Elements/Link/LinkButton.js +4 -1
  76. package/dist/Editor/Elements/List/CheckList.js +14 -9
  77. package/dist/Editor/Elements/NewLine/NewLineButton.js +6 -2
  78. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +4 -1
  79. package/dist/Editor/Elements/PageSettings/PageSettingsPopup.js +4 -1
  80. package/dist/Editor/Elements/Search/SearchButton.js +6 -3
  81. package/dist/Editor/Elements/Search/SearchList.js +7 -3
  82. package/dist/Editor/Elements/Signature/SignatureButton.js +6 -2
  83. package/dist/Editor/Elements/Signature/SignatureOptions/TypeSignature.js +6 -2
  84. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +4 -1
  85. package/dist/Editor/Elements/Signature/SignaturePopup.js +17 -16
  86. package/dist/Editor/Elements/SimpleText/index.js +5 -4
  87. package/dist/Editor/Elements/Table/DragButton.js +4 -2
  88. package/dist/Editor/Elements/Table/Table.js +21 -9
  89. package/dist/Editor/Elements/Table/TablePopup.js +4 -1
  90. package/dist/Editor/Elements/Table/TableSelector.js +10 -6
  91. package/dist/Editor/Elements/Table/TableTool.js +8 -4
  92. package/dist/Editor/Elements/TopBanner/TopBannerButton.js +4 -1
  93. package/dist/Editor/MiniEditor.js +9 -3
  94. package/dist/Editor/Toolbar/Basic/index.js +2 -1
  95. package/dist/Editor/Toolbar/FormatTools/BlockButton.js +6 -2
  96. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +6 -2
  97. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +17 -5
  98. package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +10 -5
  99. package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js +10 -4
  100. package/dist/Editor/Toolbar/PopupTool/FullViewCard.js +10 -4
  101. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +6 -2
  102. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectAlignment.js +42 -35
  103. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectList.js +58 -51
  104. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectSuperSubscript.js +29 -22
  105. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +87 -73
  106. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +14 -7
  107. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +8 -4
  108. package/dist/Editor/Toolbar/PopupTool/TemplateCard.js +11 -5
  109. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +32 -27
  110. package/dist/Editor/Toolbar/PopupTool/index.js +17 -1
  111. package/dist/Editor/Toolbar/Toolbar.js +20 -10
  112. package/dist/Editor/common/CustomDialog/index.js +8 -10
  113. package/dist/Editor/common/ImageSelector/ImageSelector.js +10 -8
  114. package/dist/Editor/common/ImageSelector/Options/AddLink.js +6 -4
  115. package/dist/Editor/common/LinkSettings/NavComponents.js +14 -10
  116. package/dist/Editor/common/LinkSettings/index.js +20 -14
  117. package/dist/Editor/common/LinkSettings/navOptions.js +1 -1
  118. package/dist/Editor/common/MentionsPopup/index.js +6 -2
  119. package/dist/Editor/common/RnD/ContextMenu/CMenus.js +46 -22
  120. package/dist/Editor/common/RnD/ContextMenu/index.js +3 -2
  121. package/dist/Editor/common/RnD/ElementOptions/index.js +7 -2
  122. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/SaveAsTemplate.js +8 -3
  123. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +5 -2
  124. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +3 -2
  125. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +4 -2
  126. package/dist/Editor/common/RnD/OptionsPopup/index.js +4 -3
  127. package/dist/Editor/common/RnD/ShadowElement.js +2 -1
  128. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +4 -3
  129. package/dist/Editor/common/RnD/Utils/gridDropItem.js +74 -9
  130. package/dist/Editor/common/RnD/Utils/index.js +3 -0
  131. package/dist/Editor/common/RnD/VirtualElement/BoxHeaderAutoAlignment.js +43 -0
  132. package/dist/Editor/common/RnD/VirtualElement/ForceAutoAlignment.js +44 -0
  133. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +134 -0
  134. package/dist/Editor/common/RnD/VirtualElement/helper.js +382 -0
  135. package/dist/Editor/common/RnD/VirtualElement/index.js +187 -103
  136. package/dist/Editor/common/RnD/VirtualElement/styles.js +157 -7
  137. package/dist/Editor/common/RnD/VirtualElement/updateAutoProps.js +5 -3
  138. package/dist/Editor/common/RnD/index.js +76 -8
  139. package/dist/Editor/common/Section/index.js +7 -4
  140. package/dist/Editor/common/Shorthands/elements.js +18 -3
  141. package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +4 -4
  142. package/dist/Editor/common/StyleBuilder/boxStyle.js +2 -2
  143. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -2
  144. package/dist/Editor/common/StyleBuilder/dividerStyles.js +2 -2
  145. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +6 -6
  146. package/dist/Editor/common/StyleBuilder/fieldStyle.js +2 -2
  147. package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +13 -9
  148. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +6 -3
  149. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +7 -3
  150. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -3
  151. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +6 -3
  152. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +11 -5
  153. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +9 -5
  154. package/dist/Editor/common/StyleBuilder/fieldTypes/elementSize.js +10 -6
  155. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +6 -2
  156. package/dist/Editor/common/StyleBuilder/fieldTypes/gridSize.js +6 -2
  157. package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +5 -2
  158. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +9 -6
  159. package/dist/Editor/common/StyleBuilder/fieldTypes/metaDataMapping.js +8 -2
  160. package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +12 -11
  161. package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +6 -2
  162. package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +8 -4
  163. package/dist/Editor/common/StyleBuilder/fieldTypes/textAlign.js +6 -2
  164. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +6 -5
  165. package/dist/Editor/common/StyleBuilder/formStyle.js +7 -7
  166. package/dist/Editor/common/StyleBuilder/gridItemStyle.js +6 -6
  167. package/dist/Editor/common/StyleBuilder/gridStyle.js +5 -5
  168. package/dist/Editor/common/StyleBuilder/index.js +8 -5
  169. package/dist/Editor/common/Uploader.js +8 -5
  170. package/dist/Editor/helper/index.js +27 -3
  171. package/dist/Editor/hooks/useAutoScroll.js +38 -0
  172. package/dist/Editor/plugins/withHTML.js +7 -6
  173. package/dist/Editor/plugins/withLayout.js +3 -2
  174. package/dist/Editor/plugins/withLinks.js +9 -0
  175. package/dist/Editor/utils/SlateUtilityFunctions.js +20 -11
  176. package/dist/Editor/utils/brains.js +1 -2
  177. package/dist/Editor/utils/freegrid.js +3 -4
  178. package/dist/Editor/utils/helper.js +2 -2
  179. package/package.json +1 -1
@@ -2,16 +2,20 @@ import React from "react";
2
2
  import { Grid, Typography } from "@mui/material";
3
3
  import FormStyles from "./Styles";
4
4
  import MoreOptions from "./MoreOptions";
5
- import { jsxs as _jsxs } from "react/jsx-runtime";
6
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
+ import { jsxs as _jsxs } from "react/jsx-runtime";
7
7
  const ListWorkflow = props => {
8
8
  const {
9
9
  workflow,
10
10
  handleEditFormWorkflow,
11
- handleDeleteFormWorkflow
11
+ handleDeleteFormWorkflow,
12
+ customProps
12
13
  } = props;
13
14
  const classes = FormStyles();
14
15
  const optionsList = ["Edit", "Delete"];
16
+ const {
17
+ translation
18
+ } = customProps;
15
19
  const onMenuClick = (selectedMenu, selectedFlow) => () => {
16
20
  if (selectedMenu === "Edit") {
17
21
  handleEditFormWorkflow(selectedFlow);
@@ -32,12 +36,12 @@ const ListWorkflow = props => {
32
36
  children: [/*#__PURE__*/_jsx(Grid, {
33
37
  item: true,
34
38
  sx: classes.emailIndexCard,
35
- children: /*#__PURE__*/_jsxs(Typography, {
39
+ children: /*#__PURE__*/_jsx(Typography, {
36
40
  sx: {
37
41
  fontSize: "12px",
38
42
  fontWeight: 600
39
43
  },
40
- children: ["Email ", index + 1]
44
+ children: `${translation("Email")} ${index + 1}`
41
45
  })
42
46
  }), /*#__PURE__*/_jsx(Grid, {
43
47
  item: true,
@@ -63,7 +67,7 @@ const ListWorkflow = props => {
63
67
  item: true,
64
68
  children: /*#__PURE__*/_jsx(Typography, {
65
69
  sx: classes.listHeading,
66
- children: "Subject:"
70
+ children: translation("subjectTextColon")
67
71
  })
68
72
  }), /*#__PURE__*/_jsx(Grid, {
69
73
  item: true,
@@ -86,7 +90,7 @@ const ListWorkflow = props => {
86
90
  item: true,
87
91
  children: /*#__PURE__*/_jsx(Typography, {
88
92
  sx: classes.listHeading,
89
- children: "Body:"
93
+ children: translation("bodyTextColon")
90
94
  })
91
95
  }), /*#__PURE__*/_jsx(Grid, {
92
96
  item: true,
@@ -109,7 +113,7 @@ const ListWorkflow = props => {
109
113
  item: true,
110
114
  children: /*#__PURE__*/_jsx(Typography, {
111
115
  sx: classes.listHeading,
112
- children: "Scheduled:"
116
+ children: translation("sheduleText")
113
117
  })
114
118
  }), /*#__PURE__*/_jsx(Grid, {
115
119
  item: true,
@@ -146,7 +150,8 @@ const ListWorkflow = props => {
146
150
  classes: classes,
147
151
  menus: optionsList,
148
152
  selectedFlow: index,
149
- onMenuClick: onMenuClick
153
+ onMenuClick: onMenuClick,
154
+ translation: translation
150
155
  })
151
156
  })]
152
157
  })
@@ -9,7 +9,8 @@ function MoreOptions(props) {
9
9
  classes,
10
10
  menus,
11
11
  onMenuClick,
12
- selectedFlow
12
+ selectedFlow,
13
+ translation
13
14
  } = props;
14
15
 
15
16
  //state
@@ -52,7 +53,7 @@ function MoreOptions(props) {
52
53
  paddingRight: "100px"
53
54
  },
54
55
  onClick: onMenuClick(m, selectedFlow),
55
- children: m
56
+ children: translation(m)
56
57
  }, `menu_${i}_${m}`))
57
58
  })]
58
59
  });
@@ -10,7 +10,8 @@ const UserInputs = props => {
10
10
  type,
11
11
  subject,
12
12
  handleField,
13
- onSave
13
+ onSave,
14
+ translation
14
15
  } = props;
15
16
  const editorRef = useRef();
16
17
  const variables = element?.children;
@@ -39,7 +40,8 @@ const UserInputs = props => {
39
40
  fontStyleOptions: ['underline'],
40
41
  hideLink: true,
41
42
  hideTextColor: true
42
- }
43
+ },
44
+ translation: translation
43
45
  })
44
46
  })
45
47
  });
@@ -17,8 +17,12 @@ const Workflow = props => {
17
17
  element: propElement,
18
18
  closeWorkflow,
19
19
  onSave,
20
- customWorkflowElement = null
20
+ customWorkflowElement = null,
21
+ customProps
21
22
  } = props;
23
+ const {
24
+ translation
25
+ } = customProps;
22
26
  // replacing element for forms in DND
23
27
  const element = customWorkflowElement ? customWorkflowElement : propElement;
24
28
  const {
@@ -34,11 +38,11 @@ const Workflow = props => {
34
38
  const [scheduleEvery, setScheduleEvery] = useState("minutes");
35
39
  const currentInstant = scheduleEvery === "minutes" ? minutes : scheduleEvery === "hours" ? hours : scheduleEvery === "days" ? days : [];
36
40
  const [scheduleOn, setScheduleOn] = useState(currentInstant[0]);
37
- const [subject, setSubject] = useState("Welcome to Flozy!");
41
+ const [subject, setSubject] = useState(translation("welcomFlozt"));
38
42
  const [bodyData, setBodyData] = useState([{
39
43
  type: "paragraph",
40
44
  children: [{
41
- text: "Write Something"
45
+ text: translation("writeSometing")
42
46
  }]
43
47
  }]);
44
48
  const [flowEdited, setFlowEdited] = useState({
@@ -156,7 +160,7 @@ const Workflow = props => {
156
160
  children: [formData && /*#__PURE__*/_jsx(IconButton, {
157
161
  onClick: onFormBack,
158
162
  children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
159
- }), "Follow-Up Email", !formData && workflowList?.length > 0 && /*#__PURE__*/_jsxs(Button, {
163
+ }), translation("flowUpEmail"), !formData && workflowList?.length > 0 && /*#__PURE__*/_jsxs(Button, {
160
164
  variant: "outlined",
161
165
  sx: {
162
166
  textTransform: "none",
@@ -166,13 +170,14 @@ const Workflow = props => {
166
170
  onClick: handleAddFormWorkflow,
167
171
  size: "small",
168
172
  startIcon: /*#__PURE__*/_jsx(PlusIcon, {}),
169
- children: [" ", "New Email"]
173
+ children: [" ", translation("newEmail")]
170
174
  })]
171
175
  }), /*#__PURE__*/_jsxs(DialogContent, {
172
176
  children: [!formData && workflowList?.length > 0 && /*#__PURE__*/_jsx(ListWorkflow, {
173
177
  workflow: workflowList,
174
178
  handleEditFormWorkflow: handleEditFormWorkflow,
175
- handleDeleteFormWorkflow: handleDeleteFormWorkflow
179
+ handleDeleteFormWorkflow: handleDeleteFormWorkflow,
180
+ customProps: customProps
176
181
  }), (formData || workflowList?.length === 0) && /*#__PURE__*/_jsx(FormWorkflow, {
177
182
  subject: subject,
178
183
  schedule: schedule,
@@ -189,7 +194,8 @@ const Workflow = props => {
189
194
  setScheduleOn: setScheduleOn,
190
195
  handleSelectedVariables: handleSelectedVariables,
191
196
  handleInputReset: handleInputReset,
192
- classes: classes
197
+ classes: classes,
198
+ customProps: customProps
193
199
  })]
194
200
  }), /*#__PURE__*/_jsxs(DialogActions, {
195
201
  sx: classes.dialogFooter,
@@ -198,13 +204,13 @@ const Workflow = props => {
198
204
  sx: classes.closeBtn,
199
205
  onClick: closeWorkflow,
200
206
  size: "small",
201
- children: "Close"
207
+ children: translation("Close")
202
208
  }), (formData || workflowList?.length === 0) && /*#__PURE__*/_jsx(Button, {
203
209
  className: "primaryBtn",
204
210
  sx: classes.saveBtn,
205
211
  onClick: saveFormWorkflow,
206
212
  size: "small",
207
- children: "Save"
213
+ children: translation("Save")
208
214
  })]
209
215
  })]
210
216
  });
@@ -1,4 +1,4 @@
1
- import React from "react";
1
+ import React, { createContext, useContext, useEffect, useRef, useState } from "react";
2
2
  import { Path, Transforms, Node } from "slate";
3
3
  import { ReactEditor, useSlateStatic } from "slate-react";
4
4
  import { Box, useTheme } from "@mui/material";
@@ -27,6 +27,12 @@ const MAX_DEVICE_WIDTH = {
27
27
  lg: 980,
28
28
  xs: 320
29
29
  };
30
+
31
+ // Create a Context
32
+ export const FreeGridContext = /*#__PURE__*/createContext(null);
33
+ export const useFreeGrid = () => {
34
+ return useContext(FreeGridContext);
35
+ };
30
36
  const FreeGrid = props => {
31
37
  const theme = useTheme();
32
38
  const breakpoint = useBreakpoints(theme);
@@ -43,12 +49,14 @@ const FreeGrid = props => {
43
49
  } = props;
44
50
  const {
45
51
  sectionName,
46
- sectionBorderRadius
52
+ sectionBorderRadius,
53
+ height_xs
47
54
  } = element;
48
55
  const {
49
56
  readOnly,
50
57
  customSX,
51
- hideTools
58
+ hideTools,
59
+ translation
52
60
  } = customProps;
53
61
  const {
54
62
  updated_at,
@@ -63,11 +71,15 @@ const FreeGrid = props => {
63
71
  const {
64
72
  setSelectedElement
65
73
  } = useEditorContext();
74
+ const [autoAlign, setAutoAlign] = useState(false);
75
+ const count = useRef(2);
76
+ const childrenCountRef = useRef(element?.children?.length);
77
+ const [isInteracting, setIsInteracting] = useState(false);
66
78
  const onChange = data => {
67
79
  const append = breakpoint === "lg" ? "" : `_${breakpoint}`;
68
80
  const updateData = {
69
81
  ...data,
70
- [`height${append}`]: height + data.height
82
+ [`height${append}`]: data.height
71
83
  };
72
84
  if (append !== "") {
73
85
  delete updateData.height;
@@ -129,6 +141,10 @@ const FreeGrid = props => {
129
141
  setSelectedElement
130
142
  });
131
143
  break;
144
+ case "forceAutoAlignment":
145
+ setAutoAlign(true);
146
+ setSelectedElement({});
147
+ break;
132
148
  case "deleteSection":
133
149
  if (Node.has(editor, cur_root_path)) {
134
150
  Transforms.removeNodes(editor, {
@@ -150,9 +166,12 @@ const FreeGrid = props => {
150
166
  console.log(err);
151
167
  }
152
168
  };
169
+ useEffect(() => {
170
+ childrenCountRef.current = element?.children?.length;
171
+ }, [element?.children?.length]);
153
172
  const handleAddElementClick = type => () => {
154
173
  const isEmpty = isEmptySection();
155
- const insertAt = isEmpty ? [...path, 0] : [...path, element?.children?.length];
174
+ const insertAt = isEmpty ? [...path, 0] : [...path, childrenCountRef.current];
156
175
  switch (type) {
157
176
  case "addText":
158
177
  Transforms.insertNodes(editor, [{
@@ -373,6 +392,19 @@ const FreeGrid = props => {
373
392
  break;
374
393
  default:
375
394
  }
395
+ if (breakpoint === "lg") {
396
+ setSelectedElement({});
397
+
398
+ // auto align in mobile
399
+ Transforms.setNodes(editor, {
400
+ xs_updatedOn: null,
401
+ updated_at: new Date().getTime()
402
+ }, {
403
+ at: path
404
+ });
405
+ }
406
+ count.current = count.current + 1;
407
+
376
408
  // focus on newly added element
377
409
  focusOnNewItem(editor, insertAt, {
378
410
  setSelectedElement
@@ -444,106 +476,145 @@ const FreeGrid = props => {
444
476
  }
445
477
  }, theme);
446
478
  const sectionTypeOptions = (itemOptions?.section || []).filter(f => (hideTools || []).indexOf(f) === -1);
447
- return /*#__PURE__*/_jsx(RnD, {
448
- id: `freegrid_container_${path.join("|")}_${updated_at}_${breakpoint}`,
449
- className: `
479
+
480
+ // const id = useMemo(() => {
481
+ // let eleId = `freegrid_container_${path.join("|")}_${breakpoint}`;
482
+
483
+ // if (autoAlign) {
484
+ // eleId += `_${updated_at}`; // re-render component on force auto align
485
+ // }
486
+
487
+ // return eleId;
488
+ // }, [autoAlign, updated_at, breakpoint, path]);
489
+
490
+ return /*#__PURE__*/_jsx(FreeGridContext.Provider, {
491
+ value: {
492
+ isInteracting,
493
+ setIsInteracting
494
+ },
495
+ children: /*#__PURE__*/_jsx(RnD, {
496
+ id: `freegrid_container_${path.join("|")}_${updated_at}_${breakpoint}`,
497
+ className: `
450
498
  freegrid-section breakpoint-${breakpoint}
451
499
  freegrid-section_${path.join("_")}
452
500
  `,
453
- editor: editor,
454
- path: path,
455
- disableDragging: true,
456
- style: {
457
- position: "relative",
458
- "--height": `${height}px`
459
- },
460
- defaultStyle: {
461
- width: "100%",
462
- height: height ? `${height}px` : "auto"
463
- },
464
- enableResizing: {
465
- bottom: true,
466
- top: false,
467
- left: false,
468
- right: false,
469
- topLeft: false,
470
- topRight: false,
471
- bottomLeft: false,
472
- bottomRight: false
473
- },
474
- actions: sectionTypeOptions,
475
- type: "parent",
476
- optionsProps: {
477
- placement: "right",
478
- sx: {
479
- ...classes.sectionPopper,
480
- ...(customSX?.sectionPopper || {})
481
- }
482
- },
483
- settingsProps: {
484
- settings: "freeGrid",
485
- customProps
486
- },
487
- onChange: onChange,
488
- handleActionClick: handleActionClick,
489
- actionsMap: {
490
- addElement: {
491
- Component: AddElement,
492
- placement: "left",
493
- title: "Add Element",
494
- props: {
495
- handleClick: handleAddElementClick,
496
- hideTools: hideTools || []
497
- }
501
+ editor: editor,
502
+ path: path,
503
+ disableDragging: true,
504
+ style: {
505
+ position: "relative",
506
+ "--height": `${height}px`
498
507
  },
499
- more: {
500
- Component: More,
501
- placement: "left",
502
- title: "More Options",
503
- props: {
504
- handleClick: handleMoreClick
505
- }
508
+ dataSets: {
509
+ "data-height-xs": height_xs
506
510
  },
507
- settings: {
508
- Component: SectionSettings,
509
- placement: "left",
510
- title: "Section Settings",
511
- props: {
512
- editor,
513
- path,
514
- classes,
515
- customProps
511
+ defaultStyle: {
512
+ width: "100%",
513
+ height: height ? `${height}px` : "auto"
514
+ },
515
+ enableResizing: {
516
+ bottom: true,
517
+ top: false,
518
+ left: false,
519
+ right: false,
520
+ topLeft: false,
521
+ topRight: false,
522
+ bottomLeft: false,
523
+ bottomRight: false
524
+ },
525
+ actions: sectionTypeOptions,
526
+ type: "parent",
527
+ optionsProps: {
528
+ placement: "right",
529
+ sx: {
530
+ ...classes.sectionPopper,
531
+ ...(customSX?.sectionPopper || {})
516
532
  }
517
- }
518
- },
519
- readOnly: readOnly,
520
- updated_at: updated_at,
521
- breakpoint: breakpoint,
522
- handleContextMenuClick: handleContextMenuClick,
523
- children: /*#__PURE__*/_jsxs(Box, {
524
- ...attributes,
525
- id: sectionName,
526
- "data-event": "rnd-click",
527
- className: "freegrid-container freegrid-container-parent",
528
- sx: {
529
- ...classes.root,
530
- ...freegridSX,
531
- background: sectionBgColor || "rgba(255,255,255,1)",
532
- backgroundImage: sectionBackgroundImage ? `url('${sectionBackgroundImage}')` : "",
533
- backgroundSize: "cover"
534
533
  },
535
- "data-path": path.join("|"),
536
- "data-dragoverid": path.join("|"),
537
- "data-dragovertype": "parent",
538
- style: {
539
- "--cols": `100%`,
540
- "--rows": `repeat(${repeatTimes}, ${ROW_HEIGHT}px)`
534
+ settingsProps: {
535
+ settings: "freeGrid",
536
+ customProps
537
+ },
538
+ onChange: onChange,
539
+ handleActionClick: handleActionClick,
540
+ actionsMap: {
541
+ addElement: {
542
+ Component: AddElement,
543
+ placement: "left",
544
+ title: "Add Element",
545
+ props: {
546
+ handleClick: handleAddElementClick,
547
+ hideTools: hideTools || [],
548
+ translation: {
549
+ translation
550
+ },
551
+ customProps: {
552
+ customProps
553
+ }
554
+ }
555
+ },
556
+ more: {
557
+ Component: More,
558
+ placement: "left",
559
+ title: "More Options",
560
+ props: {
561
+ handleClick: handleMoreClick,
562
+ breakpoint,
563
+ translation: {
564
+ translation
565
+ },
566
+ customProps: {
567
+ customProps
568
+ }
569
+ }
570
+ },
571
+ settings: {
572
+ Component: SectionSettings,
573
+ placement: "left",
574
+ title: "Section Settings",
575
+ props: {
576
+ editor,
577
+ path,
578
+ classes,
579
+ customProps,
580
+ translation
581
+ }
582
+ }
541
583
  },
542
- children: [children, !readOnly ? /*#__PURE__*/_jsx("span", {
543
- placeholder: `Section (${sectionName || "Welcome"})`,
544
- className: "freegrid-section-infos",
545
- contentEditable: false
546
- }) : null]
584
+ readOnly: readOnly,
585
+ updated_at: updated_at,
586
+ breakpoint: breakpoint,
587
+ handleContextMenuClick: handleContextMenuClick,
588
+ sectionElement: element,
589
+ autoAlign: autoAlign,
590
+ setAutoAlign: setAutoAlign,
591
+ translation: translation,
592
+ customProps: customProps,
593
+ children: /*#__PURE__*/_jsxs(Box, {
594
+ ...attributes,
595
+ id: sectionName,
596
+ "data-event": "rnd-click",
597
+ className: "freegrid-container freegrid-container-parent",
598
+ sx: {
599
+ ...classes.root,
600
+ ...freegridSX,
601
+ background: sectionBgColor || "rgba(255,255,255,1)",
602
+ backgroundImage: sectionBackgroundImage ? `url('${sectionBackgroundImage}')` : "",
603
+ backgroundSize: "cover"
604
+ },
605
+ "data-path": path.join("|"),
606
+ "data-dragoverid": path.join("|"),
607
+ "data-dragovertype": "parent",
608
+ style: {
609
+ "--cols": `100%`,
610
+ "--rows": `repeat(${repeatTimes}, ${ROW_HEIGHT}px)`
611
+ },
612
+ children: [children, !readOnly ? /*#__PURE__*/_jsx("span", {
613
+ placeholder: `${translation("Section")} (${sectionName || "Welcome"})`,
614
+ className: "freegrid-section-infos",
615
+ contentEditable: false
616
+ }) : null]
617
+ })
547
618
  })
548
619
  });
549
620
  };
@@ -1,4 +1,4 @@
1
- import React from "react";
1
+ import React, { useMemo } from "react";
2
2
  import { Transforms, Node, Path } from "slate";
3
3
  import { useSlateStatic } from "slate-react";
4
4
  import { ReactEditor } from "slate-react";
@@ -26,7 +26,8 @@ const FreeGridBox = props => {
26
26
  const path = ReactEditor.findPath(editor, element);
27
27
  const {
28
28
  readOnly,
29
- hideTools
29
+ hideTools,
30
+ translation
30
31
  } = customProps;
31
32
  const {
32
33
  updated_at,
@@ -36,7 +37,12 @@ const FreeGridBox = props => {
36
37
  sectionBorderRadius,
37
38
  borderWidth,
38
39
  borderColor,
39
- borderStyle
40
+ borderStyle,
41
+ height_xs,
42
+ marginTop_xs,
43
+ gridArea_xs,
44
+ width_xs,
45
+ left_xs
40
46
  } = element;
41
47
  // get values based on breakpoint size
42
48
  const {
@@ -50,7 +56,8 @@ const FreeGridBox = props => {
50
56
  const {
51
57
  setSelectedElement
52
58
  } = useEditorContext();
53
- const arrangeIndex = zIndex === undefined ? path[path.length - 1] : zIndex;
59
+ let arrangeIndex = zIndex === undefined ? path[path.length - 1] : zIndex;
60
+ arrangeIndex = Math.max(1, arrangeIndex);
54
61
  const onChangeSettings = () => {};
55
62
  const onChange = data => {
56
63
  let updateData = {
@@ -150,9 +157,12 @@ const FreeGridBox = props => {
150
157
  };
151
158
  const repeatTimes = Math.floor(height / ROW_HEIGHT);
152
159
  const sectionTypeOptions = (itemOptions?.box || []).filter(f => (hideTools || []).indexOf(f) === -1);
160
+ const isBoxHeader = useMemo(() => {
161
+ return element?.children?.some(c => c.childType === "appHeader" && !c.xs_updatedOn);
162
+ }, [element]);
153
163
  return /*#__PURE__*/_jsx(RnD, {
154
164
  id: `freegrid_box_item_${path.join("|")}_${updated_at}_${breakpoint}`,
155
- className: `freegrid-item path-${path.length} breakpoint-${breakpoint}`,
165
+ className: `freegrid-item path-${path.length} breakpoint-${breakpoint} freegrid-box_${path.join("_")}`,
156
166
  editor: editor,
157
167
  path: path,
158
168
  actions: sectionTypeOptions,
@@ -167,12 +177,23 @@ const FreeGridBox = props => {
167
177
  "--gridArea": `${gridArea}`,
168
178
  "--width": `${width}px`,
169
179
  "--height": `${height}px`,
170
- "--zIndex": 100 + arrangeIndex
180
+ "--zIndex": 100 + arrangeIndex,
181
+ "--height_xs": height_xs ? `${height_xs}px` : "auto",
182
+ "--marginTop_xs": marginTop_xs ? `${marginTop_xs}px` : "24px"
183
+ // "--gridArea_xs": gridArea_xs ? gridArea_xs : "unset",
171
184
  },
185
+
172
186
  defaultStyle: {
173
187
  height: `${height}px`,
174
188
  width: `${width}px`
175
189
  },
190
+ dataSets: {
191
+ "data-grid-area-xs": gridArea_xs,
192
+ "data-margin-top-xs": marginTop_xs,
193
+ "data-height-xs": height_xs,
194
+ "data-width-xs": width_xs,
195
+ "data-left-xs": left_xs
196
+ },
176
197
  gridArea: gridArea,
177
198
  onChange: onChange,
178
199
  delta: {
@@ -188,6 +209,10 @@ const FreeGridBox = props => {
188
209
  left: left || 0
189
210
  },
190
211
  type: "parent-container",
212
+ breakpoint: breakpoint,
213
+ isBoxHeader: isBoxHeader,
214
+ customProps: customProps,
215
+ translation: translation,
191
216
  children: /*#__PURE__*/_jsx(Box, {
192
217
  component: "div",
193
218
  ...attributes,
@@ -6,13 +6,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
6
6
  const FreeGridButton = props => {
7
7
  const {
8
8
  editor,
9
- icoBtnType
9
+ icoBtnType,
10
+ customProps
10
11
  } = props;
12
+ const {
13
+ translation
14
+ } = customProps;
11
15
  const onButtonClick = () => {
12
16
  insertFreeGrid(editor);
13
17
  };
14
18
  return /*#__PURE__*/_jsx(ToolbarIcon, {
15
- title: "Free Grid",
19
+ title: translation("Free Grid"),
16
20
  onClick: onButtonClick,
17
21
  icon: /*#__PURE__*/_jsx(Icon, {
18
22
  icon: "freegrid"