@flozy/editor 1.6.6 → 1.6.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (35) hide show
  1. package/dist/Editor/CommonEditor.js +1 -0
  2. package/dist/Editor/Editor.css +3 -7
  3. package/dist/Editor/Elements/AppHeader/AppHeader.js +10 -3
  4. package/dist/Editor/Elements/AppHeader/AppHeaderButton.js +12 -9
  5. package/dist/Editor/Elements/Carousel/Carousel.js +1 -1
  6. package/dist/Editor/Elements/Color Picker/Styles.js +2 -2
  7. package/dist/Editor/Elements/Form/Form.js +23 -1
  8. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +178 -0
  9. package/dist/Editor/Elements/Form/Workflow/ListWorkflow.js +139 -0
  10. package/dist/Editor/Elements/Form/Workflow/MoreOptions.js +64 -0
  11. package/dist/Editor/Elements/Form/Workflow/Styles.js +207 -0
  12. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +207 -0
  13. package/dist/Editor/Elements/Form/Workflow/constant.js +3 -0
  14. package/dist/Editor/Elements/Form/Workflow/index.js +179 -0
  15. package/dist/Editor/Elements/Grid/GridItem.js +8 -6
  16. package/dist/Editor/Elements/InlineIcon/InlineIcon.js +1 -2
  17. package/dist/Editor/Elements/SimpleText.js +1 -3
  18. package/dist/Editor/Elements/TopBanner/TopBanner.js +2 -2
  19. package/dist/Editor/Elements/TopBanner/TopBannerButton.js +0 -1
  20. package/dist/Editor/Styles/EditorStyles.js +2 -2
  21. package/dist/Editor/Toolbar/Mini/Styles.js +4 -2
  22. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +1 -1
  23. package/dist/Editor/Toolbar/Toolbar.js +2 -1
  24. package/dist/Editor/Toolbar/toolbarGroups.js +2 -1
  25. package/dist/Editor/common/Icon.js +5 -3
  26. package/dist/Editor/common/ImageSelector/ImageSelector.js +1 -1
  27. package/dist/Editor/common/MentionsPopup/Styles.js +6 -3
  28. package/dist/Editor/common/StyleBuilder/gridItemStyle.js +29 -0
  29. package/dist/Editor/common/iconslist.js +67 -1
  30. package/dist/Editor/hooks/useMentions.js +0 -26
  31. package/dist/Editor/utils/embed.js +14 -10
  32. package/dist/Editor/utils/emoji.js +0 -1
  33. package/dist/Editor/utils/form.js +1 -0
  34. package/dist/Editor/utils/insertAppHeader.js +66 -12
  35. package/package.json +2 -1
@@ -0,0 +1,207 @@
1
+ const FormStyles = () => ({
2
+ addButton: {
3
+ display: 'flex',
4
+ justifyContent: 'flex-end'
5
+ },
6
+ infoText: {
7
+ fontSize: '12px',
8
+ fontWeight: '400',
9
+ color: '#94A3B8'
10
+ },
11
+ bodyTextArea: {
12
+ '& textarea': {
13
+ border: 'none',
14
+ width: '96%',
15
+ maxWidth: '96%',
16
+ outline: 'none'
17
+ },
18
+ '& textarea: focus-visible': {
19
+ outline: 'none',
20
+ border: 'none'
21
+ }
22
+ },
23
+ formHeadings: {
24
+ fontSize: '14px',
25
+ fontWeight: 500,
26
+ paddingBottom: '10px',
27
+ paddingTop: '10px'
28
+ },
29
+ flowListCard: {
30
+ border: '1px solid #6F6F6F33',
31
+ borderRadius: '8px',
32
+ padding: '10px'
33
+ },
34
+ listHeading: {
35
+ fontSize: '14px',
36
+ fontWeight: 700
37
+ },
38
+ listSubHeading: {
39
+ fontSize: '12px',
40
+ fontWeight: 500,
41
+ color: '#64748B',
42
+ maxWidth: '380px',
43
+ textTransform: 'capitalize',
44
+ whiteSpace: "nowrap",
45
+ overflow: 'hidden',
46
+ textOverflow: 'ellipsis'
47
+ },
48
+ addBtnTypo: {
49
+ color: '#94A3B8',
50
+ fontWeight: 500,
51
+ fontSize: '12px'
52
+ },
53
+ emptyList: {
54
+ justifyContent: 'center',
55
+ display: 'flex',
56
+ border: '1px solid #6F6F6F33',
57
+ borderRadius: '8px',
58
+ padding: '10px',
59
+ color: '#94A3B8'
60
+ },
61
+ popupTitle: {
62
+ fontWeight: 600,
63
+ fontSize: '16px',
64
+ display: 'flex',
65
+ alignItems: 'center'
66
+ },
67
+ subHeadings: {
68
+ fontWeight: 500,
69
+ fontSize: '14px'
70
+ },
71
+ radioBtn: {
72
+ '& .MuiFormControlLabel-label': {
73
+ fontSize: '14px',
74
+ color: '#64748B'
75
+ }
76
+ },
77
+ dialogTitle: {
78
+ '& MuiDialogTitle-root': {
79
+ padding: '16px 12px'
80
+ }
81
+ },
82
+ closeBtn: {
83
+ background: '#F4F6F9',
84
+ color: '#64748B',
85
+ fontSize: '14px',
86
+ fontWeight: 500,
87
+ padding: '4px 22px',
88
+ textTransform: 'none',
89
+ border: '1px solid #D8DDE1',
90
+ '&:hover': {
91
+ border: '1px solid #64748B'
92
+ }
93
+ },
94
+ variableBtn: {
95
+ background: '#F4F6F9',
96
+ color: '#64748B',
97
+ fontSize: '14px',
98
+ fontWeight: 500,
99
+ padding: '4px 22px',
100
+ textTransform: 'none',
101
+ border: '1px solid #D8DDE1',
102
+ '& svg': {
103
+ '& path': {
104
+ stroke: '#64748B'
105
+ }
106
+ },
107
+ '&:hover': {
108
+ border: '1px solid #64748B'
109
+ }
110
+ },
111
+ saveBtn: {
112
+ background: '#2563EB',
113
+ fontSize: '14px',
114
+ fontWeight: 500,
115
+ padding: '4px 24px',
116
+ textTransform: 'none'
117
+ },
118
+ select: {
119
+ minWidth: '110px',
120
+ '& .MuiOutlinedInput-notchedOutline': {
121
+ borderRadius: '8px',
122
+ border: '1px solid #6F6F6F33',
123
+ boxShadow: '0px 4px 16px 0px #0000000D'
124
+ },
125
+ '&:hover .MuiOutlinedInput-notchedOutline': {
126
+ borderRadius: '8px',
127
+ border: '1px solid #6F6F6F33',
128
+ boxShadow: '0px 4px 16px 0px #0000000D'
129
+ },
130
+ '& .MuiSelect-select': {
131
+ color: '#94A3B8',
132
+ fontSize: '14px'
133
+ }
134
+ },
135
+ selectList: {
136
+ color: '#94A3B8',
137
+ fontSize: '14px'
138
+ },
139
+ toolbarContainer: {
140
+ border: '1px solid #6F6F6F33',
141
+ borderRadius: '10px'
142
+ },
143
+ toolBar: {
144
+ padding: '5px'
145
+ },
146
+ colorButtons: {
147
+ "& .buttonsWrpr": {
148
+ display: "flex",
149
+ justifyContent: "center"
150
+ },
151
+ "& button": {
152
+ width: "16px",
153
+ height: "16px",
154
+ marginRight: "8px"
155
+ }
156
+ },
157
+ colorButtonSingle: {
158
+ "&.active": {
159
+ "&:before": {
160
+ content: '" "',
161
+ position: "absolute",
162
+ top: "-5px",
163
+ left: "-5px",
164
+ width: "calc(100% + 4px)",
165
+ height: "calc(100% + 4px)",
166
+ border: "3px solid blue",
167
+ borderRadius: "50%"
168
+ }
169
+ }
170
+ },
171
+ colorButtonsInner: {
172
+ width: "100%",
173
+ padding: "4px",
174
+ display: "flex",
175
+ justifyContent: "center",
176
+ alignItems: "center",
177
+ flexDirection: "column",
178
+ "& .buttonsWrpr": {
179
+ display: "flex",
180
+ justifyContent: "center",
181
+ alignItems: "center"
182
+ },
183
+ ".more-btn-cbs": {
184
+ display: "none"
185
+ },
186
+ "& button": {
187
+ width: "16px",
188
+ height: "16px",
189
+ margin: "0px 4px",
190
+ border: "1px solid #ccc"
191
+ }
192
+ },
193
+ moreOption: {
194
+ background: '#F4F4F4',
195
+ borderRadius: '8px'
196
+ },
197
+ dialogFooter: {
198
+ '&.MuiDialogActions-root': {
199
+ padding: '8px 24px'
200
+ }
201
+ },
202
+ toolButtons: {
203
+ width: '36px',
204
+ height: '36px'
205
+ }
206
+ });
207
+ export default FormStyles;
@@ -0,0 +1,207 @@
1
+ import { Button, Divider, Grid, IconButton, Menu, MenuItem, TextField, TextareaAutosize, Tooltip } from "@mui/material";
2
+ import React, { useState } from "react";
3
+ import FormStyles from "./Styles";
4
+ import Icon from "../../../common/Icon";
5
+ import { PlusIcon, RestRight } from "../../../common/iconslist";
6
+ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
7
+ import { AllColors } from "../../Color Picker/ColorButtons";
8
+ import PopupToolStyle from "../../../Toolbar/PopupTool/PopupToolStyle";
9
+ import { jsx as _jsx } from "react/jsx-runtime";
10
+ import { jsxs as _jsxs } from "react/jsx-runtime";
11
+ const UserInputs = props => {
12
+ const {
13
+ element,
14
+ type,
15
+ subject,
16
+ handleField,
17
+ handleSelectedVariables,
18
+ handleInputReset
19
+ } = props;
20
+ const variables = element?.children;
21
+ const classes = FormStyles();
22
+ const popupClasses = PopupToolStyle();
23
+ const [activeColor, setActiveColor] = useState(['#000000']);
24
+ //state
25
+ const [anchorEl, setAnchorEl] = useState(null);
26
+ const [colorAnchorEl, setColorAnchorEl] = useState(null);
27
+ const colorPopover = Boolean(colorAnchorEl);
28
+ const handleVariables = event => {
29
+ event.stopPropagation();
30
+ setAnchorEl(event.currentTarget);
31
+ };
32
+ const handleColorPicker = event => {
33
+ event.stopPropagation();
34
+ setColorAnchorEl(event.currentTarget);
35
+ };
36
+ const handleClose = event => {
37
+ event.stopPropagation();
38
+ setAnchorEl(null);
39
+ };
40
+ const handleColorClose = event => {
41
+ event.stopPropagation();
42
+ setColorAnchorEl(null);
43
+ };
44
+ const handleTextColor = color => () => {
45
+ setActiveColor(color);
46
+ setColorAnchorEl(null);
47
+ };
48
+ return /*#__PURE__*/_jsxs(Grid, {
49
+ container: true,
50
+ sx: classes.toolbarContainer,
51
+ children: [/*#__PURE__*/_jsxs(Grid, {
52
+ item: true,
53
+ xs: 12,
54
+ children: [/*#__PURE__*/_jsxs(Grid, {
55
+ container: true,
56
+ sx: classes.toolBar,
57
+ justifyContent: "space-between",
58
+ children: [/*#__PURE__*/_jsx(Grid, {
59
+ item: true,
60
+ children: /*#__PURE__*/_jsxs(Grid, {
61
+ container: true,
62
+ gap: 1,
63
+ children: [/*#__PURE__*/_jsx(Grid, {
64
+ item: true,
65
+ children: /*#__PURE__*/_jsx(Tooltip, {
66
+ arrow: true,
67
+ title: "Bold",
68
+ children: /*#__PURE__*/_jsx(IconButton, {
69
+ sx: classes.toolButtons,
70
+ children: /*#__PURE__*/_jsx(Icon, {
71
+ icon: "bold"
72
+ })
73
+ })
74
+ })
75
+ }), /*#__PURE__*/_jsx(Grid, {
76
+ item: true,
77
+ children: /*#__PURE__*/_jsx(Tooltip, {
78
+ arrow: true,
79
+ title: "Underline",
80
+ children: /*#__PURE__*/_jsx(IconButton, {
81
+ sx: classes.toolButtons,
82
+ children: /*#__PURE__*/_jsx(Icon, {
83
+ icon: "underline"
84
+ })
85
+ })
86
+ })
87
+ }), /*#__PURE__*/_jsx(Grid, {
88
+ item: true,
89
+ children: /*#__PURE__*/_jsx(Tooltip, {
90
+ arrow: true,
91
+ title: "Italic",
92
+ children: /*#__PURE__*/_jsx(IconButton, {
93
+ sx: classes.toolButtons,
94
+ children: /*#__PURE__*/_jsx(Icon, {
95
+ icon: "italic"
96
+ })
97
+ })
98
+ })
99
+ }), /*#__PURE__*/_jsx(Grid, {
100
+ item: true,
101
+ children: /*#__PURE__*/_jsx(Tooltip, {
102
+ arrow: true,
103
+ title: "Link",
104
+ children: /*#__PURE__*/_jsx(IconButton, {
105
+ sx: classes.toolButtons,
106
+ children: /*#__PURE__*/_jsx(Icon, {
107
+ icon: "link"
108
+ })
109
+ })
110
+ })
111
+ }), /*#__PURE__*/_jsxs(Grid, {
112
+ item: true,
113
+ children: [/*#__PURE__*/_jsx(Tooltip, {
114
+ arrow: true,
115
+ title: "Current Color",
116
+ children: /*#__PURE__*/_jsx(IconButton, {
117
+ style: {
118
+ borderRadius: '50px',
119
+ background: activeColor
120
+ }
121
+ })
122
+ }), /*#__PURE__*/_jsx(Tooltip, {
123
+ arrow: true,
124
+ title: "Color Picker",
125
+ children: /*#__PURE__*/_jsx(IconButton, {
126
+ onClick: handleColorPicker,
127
+ children: /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {})
128
+ })
129
+ }), /*#__PURE__*/_jsx(AllColors, {
130
+ classes: popupClasses,
131
+ open: colorPopover,
132
+ activeColor: activeColor,
133
+ anchorEl: colorAnchorEl,
134
+ onClose: handleColorClose,
135
+ onSelect: handleTextColor
136
+ })]
137
+ })]
138
+ })
139
+ }), /*#__PURE__*/_jsx(Grid, {
140
+ item: true,
141
+ children: /*#__PURE__*/_jsxs(Grid, {
142
+ container: true,
143
+ children: [/*#__PURE__*/_jsx(Grid, {
144
+ item: true,
145
+ children: /*#__PURE__*/_jsx(Tooltip, {
146
+ arrow: true,
147
+ title: "Reset",
148
+ children: /*#__PURE__*/_jsx(IconButton, {
149
+ onClick: handleInputReset(type),
150
+ sx: classes.toolButtons,
151
+ children: /*#__PURE__*/_jsx(RestRight, {})
152
+ })
153
+ })
154
+ }), /*#__PURE__*/_jsxs(Grid, {
155
+ item: true,
156
+ children: [/*#__PURE__*/_jsx(Button, {
157
+ sx: classes.variableBtn,
158
+ variant: "outlined",
159
+ size: "small",
160
+ onClick: handleVariables,
161
+ startIcon: /*#__PURE__*/_jsx(PlusIcon, {}),
162
+ children: "Variables"
163
+ }), /*#__PURE__*/_jsx(Menu, {
164
+ id: "basic-menu",
165
+ open: Boolean(anchorEl),
166
+ anchorEl: anchorEl,
167
+ onClose: handleClose,
168
+ anchorOrigin: {
169
+ vertical: 'bottom',
170
+ horizontal: 'right'
171
+ },
172
+ transformOrigin: {
173
+ vertical: 'top',
174
+ horizontal: 'right'
175
+ },
176
+ children: variables?.map((m, i) => /*#__PURE__*/_jsx(MenuItem, {
177
+ sx: {
178
+ color: "#64748B"
179
+ },
180
+ onClick: handleSelectedVariables(m, type),
181
+ children: m.name
182
+ }, `menu_${i}_${m.name}`))
183
+ })]
184
+ })]
185
+ })
186
+ })]
187
+ }), /*#__PURE__*/_jsx(Divider, {})]
188
+ }), /*#__PURE__*/_jsx(Grid, {
189
+ item: true,
190
+ xs: 12,
191
+ children: type === 2 && /*#__PURE__*/_jsx(TextareaAutosize, {
192
+ margin: "none",
193
+ minRows: 6,
194
+ value: subject,
195
+ onChange: handleField,
196
+ className: classes.bodyTextArea,
197
+ style: {
198
+ border: 'none',
199
+ width: "96%",
200
+ padding: '10px',
201
+ outline: "none"
202
+ }
203
+ })
204
+ })]
205
+ });
206
+ };
207
+ export default UserInputs;
@@ -0,0 +1,3 @@
1
+ export const minutes = [30, 35, 40, 45, 50, 55];
2
+ export const hours = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23];
3
+ export const days = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31];
@@ -0,0 +1,179 @@
1
+ import React, { useEffect, useState } from "react";
2
+ import { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton } from "@mui/material";
3
+ import ArrowBackIcon from '@mui/icons-material/ArrowBack';
4
+ import FormStyles from "./Styles";
5
+ import FormWorkflow from "./FormWorkflow";
6
+
7
+ //Constants
8
+ import { minutes, hours, days } from './constant';
9
+ import ListWorkflow from "./ListWorkflow";
10
+ import { PlusIcon } from "../../../common/iconslist";
11
+ import { jsx as _jsx } from "react/jsx-runtime";
12
+ import { jsxs as _jsxs } from "react/jsx-runtime";
13
+ const Workflow = props => {
14
+ const {
15
+ openWorkflow,
16
+ element,
17
+ closeWorkflow,
18
+ onSave
19
+ } = props;
20
+ const {
21
+ workflow
22
+ } = element;
23
+ const classes = FormStyles();
24
+ const [workflowList, setWorkflowList] = useState([]);
25
+ const [formData, setFormData] = useState(false);
26
+ const [schedule, setSchedule] = useState('immediately');
27
+ const [scheduleEvery, setScheduleEvery] = useState('min');
28
+ const currentInstant = scheduleEvery === 'min' ? minutes : scheduleEvery === 'hr' ? hours : scheduleEvery === 'day' ? days : [];
29
+ const [scheduleOn, setScheduleOn] = useState(currentInstant[0]);
30
+ const [subject, setSubject] = useState('');
31
+ const [bodyData, setBodyData] = useState('');
32
+ const [flowEdited, setFlowEdited] = useState({
33
+ isEdited: false,
34
+ listIndex: null
35
+ });
36
+ useEffect(() => {
37
+ setWorkflowList(workflow || []);
38
+ }, [workflow]);
39
+ useEffect(() => {
40
+ setScheduleOn(currentInstant[0]);
41
+ }, [currentInstant]);
42
+ const handleAddFormWorkflow = () => {
43
+ setFormData(true);
44
+ };
45
+ const onFormBack = () => {
46
+ setFormData(false);
47
+ setBodyData('');
48
+ setSubject('');
49
+ setSchedule('immediately');
50
+ };
51
+ const saveFormWorkflow = () => {
52
+ let workflowData = [...workflowList];
53
+ let data = {
54
+ schedule_type: schedule,
55
+ schedule_every: schedule === 'after' ? scheduleEvery : 0,
56
+ schedule_on: schedule === 'after' ? scheduleOn : 0,
57
+ subject_data: subject,
58
+ body_data: bodyData
59
+ };
60
+ if (flowEdited.isEdited) {
61
+ workflowData[flowEdited.listIndex] = data;
62
+ } else {
63
+ workflowData.push(data);
64
+ }
65
+ let saveData = {
66
+ workflow: workflowData
67
+ };
68
+ onSave(saveData);
69
+ setFormData(false);
70
+ setBodyData('');
71
+ setSubject('');
72
+ setSchedule('immediately');
73
+ setFlowEdited({
74
+ isEdited: false,
75
+ listIndex: null
76
+ });
77
+ };
78
+ const handleEditFormWorkflow = index => {
79
+ const result = workflowList.find((flow, indx) => indx === index);
80
+ setBodyData(result.body_data);
81
+ setSubject(result.subject_data);
82
+ setSchedule(result.schedule_type);
83
+ setFormData(true);
84
+ setFlowEdited({
85
+ isEdited: true,
86
+ listIndex: index
87
+ });
88
+ };
89
+ const handleDeleteFormWorkflow = index => {
90
+ const result = workflowList.filter((flow, indx) => indx !== index);
91
+ let saveData = {
92
+ workflow: result
93
+ };
94
+ onSave(saveData);
95
+ setWorkflowList(result);
96
+ };
97
+ const handleSelectedVariables = (data, type) => () => {
98
+ if (type === 1) {
99
+ let newString = subject.concat(` %${data.name}%`);
100
+ setSubject(newString);
101
+ } else if (type === 2) {
102
+ let newString = bodyData.concat(` %${data.name}%`);
103
+ setBodyData(newString);
104
+ }
105
+ };
106
+ const handleInputReset = type => () => {
107
+ if (type === 1) {
108
+ setSubject("");
109
+ } else if (type === 2) {
110
+ setBodyData("");
111
+ }
112
+ };
113
+ return /*#__PURE__*/_jsxs(Dialog, {
114
+ open: openWorkflow,
115
+ onClose: closeWorkflow,
116
+ fullWidth: true,
117
+ children: [/*#__PURE__*/_jsxs(DialogTitle, {
118
+ sx: classes.popupTitle,
119
+ style: {
120
+ padding: formData ? '16px 12px' : '16px 24px',
121
+ justifyContent: !formData ? "space-between" : ""
122
+ },
123
+ children: [formData && /*#__PURE__*/_jsx(IconButton, {
124
+ onClick: onFormBack,
125
+ children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
126
+ }), "Follow-Up Email", !formData && workflowList?.length > 0 && /*#__PURE__*/_jsx(Button, {
127
+ variant: "outlined",
128
+ sx: {
129
+ textTransform: 'none',
130
+ background: '#EBF1F9'
131
+ },
132
+ onClick: handleAddFormWorkflow,
133
+ size: "small",
134
+ startIcon: /*#__PURE__*/_jsx(PlusIcon, {}),
135
+ children: " New Email"
136
+ })]
137
+ }), /*#__PURE__*/_jsxs(DialogContent, {
138
+ dividers: true,
139
+ children: [!formData && workflowList?.length > 0 && /*#__PURE__*/_jsx(ListWorkflow, {
140
+ workflow: workflowList,
141
+ handleEditFormWorkflow: handleEditFormWorkflow,
142
+ handleDeleteFormWorkflow: handleDeleteFormWorkflow
143
+ }), (formData || workflowList?.length === 0) && /*#__PURE__*/_jsx(FormWorkflow, {
144
+ subject: subject,
145
+ schedule: schedule,
146
+ bodyData: bodyData,
147
+ element: element,
148
+ currentInstant: currentInstant,
149
+ scheduleEvery: scheduleEvery,
150
+ scheduleOn: scheduleOn,
151
+ onFormBack: onFormBack,
152
+ setSubject: setSubject,
153
+ setBodyData: setBodyData,
154
+ setSchedule: setSchedule,
155
+ setScheduleEvery: setScheduleEvery,
156
+ setScheduleOn: setScheduleOn,
157
+ handleSelectedVariables: handleSelectedVariables,
158
+ handleInputReset: handleInputReset
159
+ })]
160
+ }), /*#__PURE__*/_jsxs(DialogActions, {
161
+ sx: classes.dialogFooter,
162
+ children: [/*#__PURE__*/_jsx(Button, {
163
+ color: "primary",
164
+ sx: classes.closeBtn,
165
+ variant: "outlined",
166
+ onClick: closeWorkflow,
167
+ size: "small",
168
+ children: "Close"
169
+ }), (formData || workflowList?.length === 0) && /*#__PURE__*/_jsx(Button, {
170
+ sx: classes.saveBtn,
171
+ variant: "contained",
172
+ onClick: saveFormWorkflow,
173
+ size: "small",
174
+ children: "Save"
175
+ })]
176
+ })]
177
+ });
178
+ };
179
+ export default Workflow;
@@ -32,7 +32,8 @@ const GridItem = props => {
32
32
  margin,
33
33
  bgColorHover,
34
34
  borderColorHover,
35
- textColor
35
+ textColor,
36
+ animation
36
37
  } = element;
37
38
  const {
38
39
  left,
@@ -126,6 +127,10 @@ const GridItem = props => {
126
127
  display: "flex",
127
128
  flexDirection: flexDirection || "column",
128
129
  background: bgColor || "transparent",
130
+ borderColor: borderColor || "transparent",
131
+ borderWidth: borderWidth || "1px",
132
+ borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
133
+ borderStyle: borderStyle || "solid",
129
134
  alignItems: horizantal,
130
135
  justifyContent: vertical,
131
136
  width: `${itemWidth}%`,
@@ -159,7 +164,7 @@ const GridItem = props => {
159
164
  children: " "
160
165
  }), /*#__PURE__*/_jsx(GridItemToolbar, {})]
161
166
  }), /*#__PURE__*/_jsx(Box, {
162
- className: "gi-inner-cw",
167
+ className: `gi-inner-cw ${animation || ""}`,
163
168
  component: "div",
164
169
  "data-path": path.join(","),
165
170
  sx: {
@@ -171,10 +176,7 @@ const GridItem = props => {
171
176
  paddingBottom: `${bottom}px`,
172
177
  justifyContent: vertical,
173
178
  height: gridHeight || "100%",
174
- borderColor: borderColor || "transparent",
175
- borderWidth: borderWidth || "1px",
176
- borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
177
- borderStyle: borderStyle || "solid",
179
+ width: "100%",
178
180
  color: textColor || "#000",
179
181
  "&:hover": {
180
182
  borderColor: borderColorHover || borderColor || "transparent"
@@ -13,8 +13,7 @@ const InlineIcon = props => {
13
13
  textColor,
14
14
  bannerSpacing,
15
15
  borderRadius,
16
- borderColor,
17
- icon
16
+ borderColor
18
17
  } = element;
19
18
  const {
20
19
  left,
@@ -37,13 +37,11 @@ const SimpleText = props => {
37
37
  } = props;
38
38
  const {
39
39
  readOnly
40
- } = props;
40
+ } = customProps;
41
41
  const classes = SimpleTextStyle();
42
42
  const editor = useSlateStatic();
43
43
  const selected = useSelected();
44
44
  const path = ReactEditor.findPath(editor, element);
45
- // const parentPath = Path.parent(path);
46
- // const parentNode = Node.get(editor, parentPath);
47
45
  const noContent = Node.string(Node.get(editor, path)).length === 0 && path.length === 1;
48
46
  const emptyEditor = editor.children.length === 1 && path[0] === 0 && path.length === 1 && !selected;
49
47
  return /*#__PURE__*/_jsxs(Box, {
@@ -82,10 +82,10 @@ const TopBanner = props => {
82
82
  src: url,
83
83
  alt: "Top Banner",
84
84
  style: {
85
- width: "90%",
85
+ width: "100%",
86
86
  height: "320px",
87
87
  objectFit: "cover",
88
- borderRadius: "12px",
88
+ borderRadius: "0px",
89
89
  margin: "0px 0px"
90
90
  }
91
91
  }), !readOnly ? /*#__PURE__*/_jsx(TopBannerToolbar, {
@@ -14,7 +14,6 @@ const TopBannerButton = props => {
14
14
  } = props;
15
15
  const [open, setOpen] = useState(false);
16
16
  const onSelectImage = url => {
17
- console.log(url);
18
17
  if (url) {
19
18
  insertTopBanner(editor, {
20
19
  url