@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.
- package/dist/Editor/ChatEditor.js +14 -7
- package/dist/Editor/CommonEditor.js +30 -13
- package/dist/Editor/Editor.css +1 -1
- package/dist/Editor/Elements/AI/AIInput.js +5 -3
- package/dist/Editor/Elements/AI/CustomSelect.js +9 -5
- package/dist/Editor/Elements/AI/PopoverAIInput.js +4 -2
- package/dist/Editor/Elements/Accordion/Accordion.js +4 -3
- package/dist/Editor/Elements/Accordion/AccordionBtnPopup.js +4 -1
- package/dist/Editor/Elements/Accordion/AccordionButton.js +6 -2
- package/dist/Editor/Elements/Accordion/AccordionTitlePopup.js +4 -1
- package/dist/Editor/Elements/AppHeader/AppHeaderButton.js +6 -2
- package/dist/Editor/Elements/AppHeader/AppHeaderPopup.js +4 -1
- package/dist/Editor/Elements/Attachments/AttachmentsButton.js +4 -1
- package/dist/Editor/Elements/Button/ButtonPopup.js +4 -1
- package/dist/Editor/Elements/Button/ButtonToolIcon.js +6 -2
- package/dist/Editor/Elements/Button/EditorButton.js +6 -5
- package/dist/Editor/Elements/Carousel/Carousel.js +5 -4
- package/dist/Editor/Elements/Carousel/CarouselButton.js +6 -2
- package/dist/Editor/Elements/Carousel/CarouselItem.js +3 -2
- package/dist/Editor/Elements/ChipText/ChipTextPopup.js +4 -1
- package/dist/Editor/Elements/CodeToText/CodeToText.js +5 -4
- package/dist/Editor/Elements/CodeToText/HtmlContextMenu.js +6 -2
- package/dist/Editor/Elements/Colorbox/ColorboxButton.js +6 -2
- package/dist/Editor/Elements/DataView/DataView.js +5 -2
- package/dist/Editor/Elements/DataView/DataViewButton.js +6 -2
- package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/ChooseSort.js +13 -12
- package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/index.js +7 -4
- package/dist/Editor/Elements/DataView/Layouts/FilterSort/index.js +7 -5
- package/dist/Editor/Elements/DataView/Layouts/FilterView.js +9 -7
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +3 -2
- package/dist/Editor/Elements/DataView/Layouts/Options/AddProperty.js +5 -3
- package/dist/Editor/Elements/DataView/Layouts/Options/AllProperties.js +6 -5
- package/dist/Editor/Elements/DataView/Layouts/Options/ChangeProperty.js +5 -3
- package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +7 -6
- package/dist/Editor/Elements/DataView/Layouts/Options/EditProperty.js +15 -12
- package/dist/Editor/Elements/DataView/Layouts/Options/FilterProperty.js +3 -2
- package/dist/Editor/Elements/DataView/Layouts/Options/PropertyList.js +3 -2
- package/dist/Editor/Elements/DataView/Layouts/Options/index.js +12 -6
- package/dist/Editor/Elements/DataView/Layouts/TableView.js +6 -4
- package/dist/Editor/Elements/DataView/Layouts/index.js +3 -1
- package/dist/Editor/Elements/DataView/Providers/DataViewProvider.js +5 -2
- package/dist/Editor/Elements/Divider/Divider.js +5 -3
- package/dist/Editor/Elements/Divider/DividerButton.js +6 -2
- package/dist/Editor/Elements/Divider/DividerPopup.js +3 -2
- package/dist/Editor/Elements/Embed/Embed.js +4 -1
- package/dist/Editor/Elements/Embed/EmbedPopup.js +4 -1
- package/dist/Editor/Elements/Embed/Image.js +16 -11
- package/dist/Editor/Elements/Embed/Video.js +10 -7
- package/dist/Editor/Elements/EmbedScript/Code.js +7 -4
- package/dist/Editor/Elements/EmbedScript/EmbedScript.js +6 -2
- package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +8 -5
- package/dist/Editor/Elements/Emoji/EmojiButton.js +6 -2
- package/dist/Editor/Elements/Form/FieldPopup.js +4 -1
- package/dist/Editor/Elements/Form/Form.js +12 -9
- package/dist/Editor/Elements/Form/FormButton.js +6 -2
- package/dist/Editor/Elements/Form/FormPopup.js +3 -2
- package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +18 -12
- package/dist/Editor/Elements/Form/Workflow/ListWorkflow.js +13 -8
- package/dist/Editor/Elements/Form/Workflow/MoreOptions.js +3 -2
- package/dist/Editor/Elements/Form/Workflow/UserInputs.js +4 -2
- package/dist/Editor/Elements/Form/Workflow/index.js +15 -9
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +168 -97
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +31 -6
- package/dist/Editor/Elements/FreeGrid/FreeGridButton.js +6 -2
- package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +54 -6
- package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +3 -2
- package/dist/Editor/Elements/FreeGrid/Options/More.js +10 -4
- package/dist/Editor/Elements/Grid/Grid.js +13 -10
- package/dist/Editor/Elements/Grid/GridButton.js +9 -5
- package/dist/Editor/Elements/Grid/GridItem.js +13 -7
- package/dist/Editor/Elements/Grid/GridItemPopup.js +4 -1
- package/dist/Editor/Elements/Grid/GridPopup.js +4 -1
- package/dist/Editor/Elements/Grid/SectionPopup.js +4 -1
- package/dist/Editor/Elements/Link/Link.js +8 -5
- package/dist/Editor/Elements/Link/LinkButton.js +4 -1
- package/dist/Editor/Elements/List/CheckList.js +14 -9
- package/dist/Editor/Elements/NewLine/NewLineButton.js +6 -2
- package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +4 -1
- package/dist/Editor/Elements/PageSettings/PageSettingsPopup.js +4 -1
- package/dist/Editor/Elements/Search/SearchButton.js +6 -3
- package/dist/Editor/Elements/Search/SearchList.js +7 -3
- package/dist/Editor/Elements/Signature/SignatureButton.js +6 -2
- package/dist/Editor/Elements/Signature/SignatureOptions/TypeSignature.js +6 -2
- package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +4 -1
- package/dist/Editor/Elements/Signature/SignaturePopup.js +17 -16
- package/dist/Editor/Elements/SimpleText/index.js +5 -4
- package/dist/Editor/Elements/Table/DragButton.js +4 -2
- package/dist/Editor/Elements/Table/Table.js +21 -9
- package/dist/Editor/Elements/Table/TablePopup.js +4 -1
- package/dist/Editor/Elements/Table/TableSelector.js +10 -6
- package/dist/Editor/Elements/Table/TableTool.js +8 -4
- package/dist/Editor/Elements/TopBanner/TopBannerButton.js +4 -1
- package/dist/Editor/MiniEditor.js +9 -3
- package/dist/Editor/Toolbar/Basic/index.js +2 -1
- package/dist/Editor/Toolbar/FormatTools/BlockButton.js +6 -2
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +6 -2
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +17 -5
- package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +10 -5
- package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js +10 -4
- package/dist/Editor/Toolbar/PopupTool/FullViewCard.js +10 -4
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +6 -2
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectAlignment.js +42 -35
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectList.js +58 -51
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectSuperSubscript.js +29 -22
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +87 -73
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +14 -7
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +8 -4
- package/dist/Editor/Toolbar/PopupTool/TemplateCard.js +11 -5
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +32 -27
- package/dist/Editor/Toolbar/PopupTool/index.js +17 -1
- package/dist/Editor/Toolbar/Toolbar.js +20 -10
- package/dist/Editor/common/CustomDialog/index.js +8 -10
- package/dist/Editor/common/ImageSelector/ImageSelector.js +10 -8
- package/dist/Editor/common/ImageSelector/Options/AddLink.js +6 -4
- package/dist/Editor/common/LinkSettings/NavComponents.js +14 -10
- package/dist/Editor/common/LinkSettings/index.js +20 -14
- package/dist/Editor/common/LinkSettings/navOptions.js +1 -1
- package/dist/Editor/common/MentionsPopup/index.js +6 -2
- package/dist/Editor/common/RnD/ContextMenu/CMenus.js +46 -22
- package/dist/Editor/common/RnD/ContextMenu/index.js +3 -2
- package/dist/Editor/common/RnD/ElementOptions/index.js +7 -2
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/SaveAsTemplate.js +8 -3
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +5 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +4 -2
- package/dist/Editor/common/RnD/OptionsPopup/index.js +4 -3
- package/dist/Editor/common/RnD/ShadowElement.js +2 -1
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +4 -3
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +74 -9
- package/dist/Editor/common/RnD/Utils/index.js +3 -0
- package/dist/Editor/common/RnD/VirtualElement/BoxHeaderAutoAlignment.js +43 -0
- package/dist/Editor/common/RnD/VirtualElement/ForceAutoAlignment.js +44 -0
- package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +134 -0
- package/dist/Editor/common/RnD/VirtualElement/helper.js +382 -0
- package/dist/Editor/common/RnD/VirtualElement/index.js +187 -103
- package/dist/Editor/common/RnD/VirtualElement/styles.js +157 -7
- package/dist/Editor/common/RnD/VirtualElement/updateAutoProps.js +5 -3
- package/dist/Editor/common/RnD/index.js +76 -8
- package/dist/Editor/common/Section/index.js +7 -4
- package/dist/Editor/common/Shorthands/elements.js +18 -3
- package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +4 -4
- package/dist/Editor/common/StyleBuilder/boxStyle.js +2 -2
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -2
- package/dist/Editor/common/StyleBuilder/dividerStyles.js +2 -2
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +6 -6
- package/dist/Editor/common/StyleBuilder/fieldStyle.js +2 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +13 -9
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +6 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +7 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +6 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +11 -5
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +9 -5
- package/dist/Editor/common/StyleBuilder/fieldTypes/elementSize.js +10 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +6 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/gridSize.js +6 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +5 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +9 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/metaDataMapping.js +8 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +12 -11
- package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +6 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +8 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/textAlign.js +6 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +6 -5
- package/dist/Editor/common/StyleBuilder/formStyle.js +7 -7
- package/dist/Editor/common/StyleBuilder/gridItemStyle.js +6 -6
- package/dist/Editor/common/StyleBuilder/gridStyle.js +5 -5
- package/dist/Editor/common/StyleBuilder/index.js +8 -5
- package/dist/Editor/common/Uploader.js +8 -5
- package/dist/Editor/helper/index.js +27 -3
- package/dist/Editor/hooks/useAutoScroll.js +38 -0
- package/dist/Editor/plugins/withHTML.js +7 -6
- package/dist/Editor/plugins/withLayout.js +3 -2
- package/dist/Editor/plugins/withLinks.js +9 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +20 -11
- package/dist/Editor/utils/brains.js +1 -2
- package/dist/Editor/utils/freegrid.js +3 -4
- package/dist/Editor/utils/helper.js +2 -2
- 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__*/
|
39
|
+
children: /*#__PURE__*/_jsx(Typography, {
|
36
40
|
sx: {
|
37
41
|
fontSize: "12px",
|
38
42
|
fontWeight: 600
|
39
43
|
},
|
40
|
-
children:
|
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: "
|
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: "
|
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: "
|
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("
|
41
|
+
const [subject, setSubject] = useState(translation("welcomFlozt"));
|
38
42
|
const [bodyData, setBodyData] = useState([{
|
39
43
|
type: "paragraph",
|
40
44
|
children: [{
|
41
|
-
text: "
|
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
|
-
}), "
|
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: [" ", "
|
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}`]:
|
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,
|
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
|
-
|
448
|
-
|
449
|
-
|
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
|
-
|
454
|
-
|
455
|
-
|
456
|
-
|
457
|
-
|
458
|
-
|
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
|
-
|
500
|
-
|
501
|
-
placement: "left",
|
502
|
-
title: "More Options",
|
503
|
-
props: {
|
504
|
-
handleClick: handleMoreClick
|
505
|
-
}
|
508
|
+
dataSets: {
|
509
|
+
"data-height-xs": height_xs
|
506
510
|
},
|
507
|
-
|
508
|
-
|
509
|
-
|
510
|
-
|
511
|
-
|
512
|
-
|
513
|
-
|
514
|
-
|
515
|
-
|
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
|
-
|
536
|
-
|
537
|
-
|
538
|
-
|
539
|
-
|
540
|
-
|
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
|
-
|
543
|
-
|
544
|
-
|
545
|
-
|
546
|
-
|
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
|
-
|
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"
|