@flozy/editor 2.1.0 → 2.1.2
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +35 -5
- package/dist/Editor/Elements/Button/EditorButton.js +2 -1
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +21 -7
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +18 -10
- package/dist/Editor/Elements/Color Picker/colorPicker.svg +14 -0
- package/dist/Editor/Elements/Embed/Image.js +13 -2
- package/dist/Editor/Elements/Form/Form.js +1 -1
- package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +20 -5
- package/dist/Editor/Elements/Form/Workflow/ListWorkflow.js +132 -129
- package/dist/Editor/Elements/Form/Workflow/Styles.js +16 -10
- package/dist/Editor/Elements/Form/Workflow/UserInputs.js +21 -180
- package/dist/Editor/Elements/Form/Workflow/index.js +25 -6
- package/dist/Editor/Elements/Grid/Grid.js +13 -6
- package/dist/Editor/Elements/{SimpleText.js → SimpleText/index.js} +5 -43
- package/dist/Editor/Elements/SimpleText/style.js +40 -0
- package/dist/Editor/Elements/Table/TableCell.js +1 -1
- package/dist/Editor/Elements/Variables/Style.js +29 -4
- package/dist/Editor/Elements/Variables/VariableButton.js +4 -4
- package/dist/Editor/Styles/EditorStyles.js +18 -0
- package/dist/Editor/Toolbar/Basic/index.js +54 -25
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/CustomSelectTool.js +46 -0
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +41 -0
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectAlignment.js +72 -0
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectList.js +92 -0
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +172 -0
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +124 -0
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +73 -0
- package/dist/Editor/Toolbar/PopupTool/index.js +34 -33
- package/dist/Editor/assets/svg/DownArrowIcon.js +16 -0
- package/dist/Editor/assets/svg/PaintIcon.js +15 -0
- package/dist/Editor/assets/svg/TextToolIcon.js +32 -0
- package/dist/Editor/common/Section/index.js +1 -43
- package/dist/Editor/common/Section/styles.js +44 -0
- package/dist/Editor/common/StyleBuilder/embedImageStyle.js +10 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +3 -1
- package/dist/Editor/common/StyleBuilder/gridStyle.js +7 -5
- package/dist/Editor/common/StyleBuilder/index.js +8 -0
- package/dist/Editor/helper/deserialize/index.js +10 -6
- package/dist/Editor/plugins/withEmbeds.js +0 -1
- package/dist/Editor/plugins/withHTML.js +36 -4
- package/dist/Editor/service/formSubmit.js +2 -1
- package/dist/Editor/utils/button.js +3 -1
- package/dist/Editor/utils/formfield.js +2 -0
- package/dist/Editor/utils/helper.js +40 -1
- package/package.json +1 -1
@@ -9,17 +9,20 @@ const FormStyles = theme => ({
|
|
9
9
|
color: "#94A3B8"
|
10
10
|
},
|
11
11
|
bodyTextArea: {
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
resize: "none"
|
12
|
+
'& .mini-editor-cls': {
|
13
|
+
padding: '12px',
|
14
|
+
'&:focus-visible': {
|
15
|
+
outline: 'none',
|
16
|
+
border: 'none'
|
17
|
+
}
|
19
18
|
},
|
20
|
-
"&
|
21
|
-
|
22
|
-
|
19
|
+
"& .editorWorkflow": {
|
20
|
+
minHeight: '130px',
|
21
|
+
padding: '12px',
|
22
|
+
'&:focus-visible': {
|
23
|
+
outline: 'none',
|
24
|
+
border: 'none'
|
25
|
+
}
|
23
26
|
}
|
24
27
|
},
|
25
28
|
formHeadings: {
|
@@ -242,6 +245,9 @@ const FormStyles = theme => ({
|
|
242
245
|
backgroundColor: theme?.palette?.editor?.background,
|
243
246
|
color: theme?.palette?.editor?.textColor
|
244
247
|
}
|
248
|
+
},
|
249
|
+
root: {
|
250
|
+
padding: '10px'
|
245
251
|
}
|
246
252
|
});
|
247
253
|
export default FormStyles;
|
@@ -1,204 +1,45 @@
|
|
1
|
-
import {
|
2
|
-
import React, {
|
1
|
+
import { Grid } from "@mui/material";
|
2
|
+
import React, { useRef } from "react";
|
3
3
|
import FormStyles from "./Styles";
|
4
|
-
import Icon from "../../../common/Icon";
|
5
|
-
import { 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
4
|
import { useEditorContext } from "../../../hooks/useMouseMove";
|
5
|
+
import { MiniEditor } from "../../../..";
|
10
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
11
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
12
7
|
const UserInputs = props => {
|
13
8
|
const {
|
14
9
|
element,
|
15
10
|
type,
|
16
11
|
subject,
|
17
12
|
handleField,
|
18
|
-
|
19
|
-
handleInputReset
|
13
|
+
onSave
|
20
14
|
} = props;
|
15
|
+
const editorRef = useRef();
|
21
16
|
const variables = element?.children;
|
22
17
|
const {
|
23
18
|
theme
|
24
19
|
} = useEditorContext();
|
25
20
|
const classes = FormStyles(theme);
|
26
|
-
|
27
|
-
const [activeColor, setActiveColor] = useState(["#000000"]);
|
28
|
-
//state
|
29
|
-
const [anchorEl, setAnchorEl] = useState(null);
|
30
|
-
const [colorAnchorEl, setColorAnchorEl] = useState(null);
|
31
|
-
const colorPopover = Boolean(colorAnchorEl);
|
32
|
-
const handleVariables = event => {
|
33
|
-
event.stopPropagation();
|
34
|
-
setAnchorEl(event.currentTarget);
|
35
|
-
};
|
36
|
-
const handleColorPicker = event => {
|
37
|
-
event.stopPropagation();
|
38
|
-
setColorAnchorEl(event.currentTarget);
|
39
|
-
};
|
40
|
-
const handleClose = event => {
|
41
|
-
event.stopPropagation();
|
42
|
-
setAnchorEl(null);
|
43
|
-
};
|
44
|
-
const handleColorClose = event => {
|
45
|
-
event.stopPropagation();
|
46
|
-
setColorAnchorEl(null);
|
47
|
-
};
|
48
|
-
const handleTextColor = color => () => {
|
49
|
-
setActiveColor(color);
|
50
|
-
setColorAnchorEl(null);
|
51
|
-
};
|
52
|
-
return /*#__PURE__*/_jsxs(Grid, {
|
21
|
+
return /*#__PURE__*/_jsx(Grid, {
|
53
22
|
container: true,
|
54
23
|
sx: classes.toolbarContainer,
|
55
|
-
children:
|
56
|
-
item: true,
|
57
|
-
xs: 12,
|
58
|
-
children: [/*#__PURE__*/_jsxs(Grid, {
|
59
|
-
container: true,
|
60
|
-
sx: classes.toolBar,
|
61
|
-
justifyContent: "space-between",
|
62
|
-
children: [/*#__PURE__*/_jsx(Grid, {
|
63
|
-
item: true,
|
64
|
-
children: /*#__PURE__*/_jsxs(Grid, {
|
65
|
-
container: true,
|
66
|
-
gap: 1,
|
67
|
-
children: [/*#__PURE__*/_jsx(Grid, {
|
68
|
-
item: true,
|
69
|
-
children: /*#__PURE__*/_jsx(Tooltip, {
|
70
|
-
arrow: true,
|
71
|
-
title: "Bold",
|
72
|
-
children: /*#__PURE__*/_jsx(IconButton, {
|
73
|
-
sx: classes.toolButtons,
|
74
|
-
children: /*#__PURE__*/_jsx(Icon, {
|
75
|
-
icon: "bold"
|
76
|
-
})
|
77
|
-
})
|
78
|
-
})
|
79
|
-
}), /*#__PURE__*/_jsx(Grid, {
|
80
|
-
item: true,
|
81
|
-
children: /*#__PURE__*/_jsx(Tooltip, {
|
82
|
-
arrow: true,
|
83
|
-
title: "Underline",
|
84
|
-
children: /*#__PURE__*/_jsx(IconButton, {
|
85
|
-
sx: classes.toolButtons,
|
86
|
-
children: /*#__PURE__*/_jsx(Icon, {
|
87
|
-
icon: "underline"
|
88
|
-
})
|
89
|
-
})
|
90
|
-
})
|
91
|
-
}), /*#__PURE__*/_jsx(Grid, {
|
92
|
-
item: true,
|
93
|
-
children: /*#__PURE__*/_jsx(Tooltip, {
|
94
|
-
arrow: true,
|
95
|
-
title: "Italic",
|
96
|
-
children: /*#__PURE__*/_jsx(IconButton, {
|
97
|
-
sx: classes.toolButtons,
|
98
|
-
children: /*#__PURE__*/_jsx(Icon, {
|
99
|
-
icon: "italic"
|
100
|
-
})
|
101
|
-
})
|
102
|
-
})
|
103
|
-
}), /*#__PURE__*/_jsx(Grid, {
|
104
|
-
item: true,
|
105
|
-
children: /*#__PURE__*/_jsx(Tooltip, {
|
106
|
-
arrow: true,
|
107
|
-
title: "Link",
|
108
|
-
children: /*#__PURE__*/_jsx(IconButton, {
|
109
|
-
sx: classes.toolButtons,
|
110
|
-
children: /*#__PURE__*/_jsx(Icon, {
|
111
|
-
icon: "link"
|
112
|
-
})
|
113
|
-
})
|
114
|
-
})
|
115
|
-
}), /*#__PURE__*/_jsxs(Grid, {
|
116
|
-
item: true,
|
117
|
-
children: [/*#__PURE__*/_jsx(Tooltip, {
|
118
|
-
arrow: true,
|
119
|
-
title: "Current Color",
|
120
|
-
children: /*#__PURE__*/_jsx(IconButton, {
|
121
|
-
style: {
|
122
|
-
borderRadius: "50px",
|
123
|
-
background: activeColor
|
124
|
-
}
|
125
|
-
})
|
126
|
-
}), /*#__PURE__*/_jsx(Tooltip, {
|
127
|
-
arrow: true,
|
128
|
-
title: "Color Picker",
|
129
|
-
children: /*#__PURE__*/_jsx(IconButton, {
|
130
|
-
onClick: handleColorPicker,
|
131
|
-
children: /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {})
|
132
|
-
})
|
133
|
-
}), /*#__PURE__*/_jsx(AllColors, {
|
134
|
-
classes: popupClasses,
|
135
|
-
open: colorPopover,
|
136
|
-
activeColor: activeColor,
|
137
|
-
anchorEl: colorAnchorEl,
|
138
|
-
onClose: handleColorClose,
|
139
|
-
onSelect: handleTextColor
|
140
|
-
})]
|
141
|
-
})]
|
142
|
-
})
|
143
|
-
}), /*#__PURE__*/_jsx(Grid, {
|
144
|
-
item: true,
|
145
|
-
children: /*#__PURE__*/_jsxs(Grid, {
|
146
|
-
container: true,
|
147
|
-
alignItems: "center",
|
148
|
-
children: [/*#__PURE__*/_jsx(Grid, {
|
149
|
-
item: true,
|
150
|
-
children: /*#__PURE__*/_jsx(Tooltip, {
|
151
|
-
arrow: true,
|
152
|
-
title: "Reset",
|
153
|
-
children: /*#__PURE__*/_jsx(IconButton, {
|
154
|
-
onClick: handleInputReset(type),
|
155
|
-
sx: classes.toolButtons,
|
156
|
-
children: /*#__PURE__*/_jsx(RestRight, {})
|
157
|
-
})
|
158
|
-
})
|
159
|
-
}), /*#__PURE__*/_jsxs(Grid, {
|
160
|
-
item: true,
|
161
|
-
children: [/*#__PURE__*/_jsx(Button, {
|
162
|
-
sx: classes.variableBtn,
|
163
|
-
onClick: handleVariables,
|
164
|
-
endIcon: /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {}),
|
165
|
-
children: "Variables"
|
166
|
-
}), /*#__PURE__*/_jsx(Menu, {
|
167
|
-
id: "basic-menu",
|
168
|
-
open: Boolean(anchorEl),
|
169
|
-
anchorEl: anchorEl,
|
170
|
-
onClose: handleClose,
|
171
|
-
anchorOrigin: {
|
172
|
-
vertical: "bottom",
|
173
|
-
horizontal: "right"
|
174
|
-
},
|
175
|
-
transformOrigin: {
|
176
|
-
vertical: "top",
|
177
|
-
horizontal: "right"
|
178
|
-
},
|
179
|
-
children: variables?.map((m, i) => /*#__PURE__*/_jsx(MenuItem, {
|
180
|
-
sx: {
|
181
|
-
color: "#64748B"
|
182
|
-
},
|
183
|
-
onClick: handleSelectedVariables(m, type),
|
184
|
-
children: m.name
|
185
|
-
}, `menu_${i}_${m.name}`))
|
186
|
-
})]
|
187
|
-
})]
|
188
|
-
})
|
189
|
-
})]
|
190
|
-
}), /*#__PURE__*/_jsx(Divider, {})]
|
191
|
-
}), /*#__PURE__*/_jsx(Grid, {
|
24
|
+
children: /*#__PURE__*/_jsx(Grid, {
|
192
25
|
item: true,
|
193
26
|
xs: 12,
|
194
27
|
sx: classes.bodyTextArea,
|
195
|
-
children: type === 2 && /*#__PURE__*/_jsx(
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
28
|
+
children: type === 2 && /*#__PURE__*/_jsx(MiniEditor, {
|
29
|
+
editorRef: editorRef,
|
30
|
+
classes: classes,
|
31
|
+
className: 'editorWorkflow',
|
32
|
+
handleEditorChange: handleField,
|
33
|
+
id: 1,
|
34
|
+
content: subject,
|
35
|
+
onSave: onSave,
|
36
|
+
miniEditorPlaceholder: `Hey {{ field_name }} \n\nThanks for attending the event called {{ Event Name }} at {{ Event Time }} on {{ Event Time }}.`,
|
37
|
+
otherProps: {
|
38
|
+
variableOptions: variables,
|
39
|
+
fontStyleOptions: ['underline']
|
40
|
+
}
|
200
41
|
})
|
201
|
-
})
|
42
|
+
})
|
202
43
|
});
|
203
44
|
};
|
204
45
|
export default UserInputs;
|
@@ -32,7 +32,12 @@ const Workflow = props => {
|
|
32
32
|
const currentInstant = scheduleEvery === "minutes" ? minutes : scheduleEvery === "hours" ? hours : scheduleEvery === "days" ? days : [];
|
33
33
|
const [scheduleOn, setScheduleOn] = useState(currentInstant[0]);
|
34
34
|
const [subject, setSubject] = useState("Welcome to Flozy!");
|
35
|
-
const [bodyData, setBodyData] = useState(
|
35
|
+
const [bodyData, setBodyData] = useState([{
|
36
|
+
type: "paragraph",
|
37
|
+
children: [{
|
38
|
+
text: "Write Something"
|
39
|
+
}]
|
40
|
+
}]);
|
36
41
|
const [flowEdited, setFlowEdited] = useState({
|
37
42
|
isEdited: false,
|
38
43
|
listIndex: null
|
@@ -48,18 +53,27 @@ const Workflow = props => {
|
|
48
53
|
};
|
49
54
|
const onFormBack = () => {
|
50
55
|
setFormData(false);
|
51
|
-
setBodyData(
|
56
|
+
setBodyData([{
|
57
|
+
type: "paragraph",
|
58
|
+
children: [{
|
59
|
+
text: ""
|
60
|
+
}]
|
61
|
+
}]);
|
52
62
|
setSubject("");
|
53
63
|
setSchedule("immediately");
|
54
64
|
};
|
55
65
|
const saveFormWorkflow = () => {
|
56
66
|
let workflowData = [...workflowList];
|
67
|
+
let subjectHtml = document?.getElementsByTagName('textarea')[0]?.innerHTML;
|
68
|
+
let bodyHtml = document?.getElementsByClassName('editorWorkflow')[0]?.innerHTML;
|
57
69
|
let data = {
|
58
70
|
schedule_type: schedule,
|
59
71
|
schedule_every: schedule === "after" ? scheduleEvery : 0,
|
60
72
|
schedule_on: schedule === "after" ? scheduleOn : 0,
|
61
73
|
subject_data: subject,
|
62
|
-
body_data: bodyData
|
74
|
+
body_data: bodyData,
|
75
|
+
subject_html: subjectHtml,
|
76
|
+
body_html: bodyHtml
|
63
77
|
};
|
64
78
|
if (flowEdited.isEdited) {
|
65
79
|
workflowData[flowEdited.listIndex] = data;
|
@@ -71,7 +85,12 @@ const Workflow = props => {
|
|
71
85
|
};
|
72
86
|
onSave(saveData);
|
73
87
|
setFormData(false);
|
74
|
-
setBodyData(
|
88
|
+
setBodyData([{
|
89
|
+
type: "paragraph",
|
90
|
+
children: [{
|
91
|
+
text: ""
|
92
|
+
}]
|
93
|
+
}]);
|
75
94
|
setSubject("");
|
76
95
|
setSchedule("immediately");
|
77
96
|
setFlowEdited({
|
@@ -100,10 +119,10 @@ const Workflow = props => {
|
|
100
119
|
};
|
101
120
|
const handleSelectedVariables = (data, type) => () => {
|
102
121
|
if (type === 1) {
|
103
|
-
let newString = subject.concat(`
|
122
|
+
let newString = subject.concat(` {{${data.name}}}`);
|
104
123
|
setSubject(newString);
|
105
124
|
} else if (type === 2) {
|
106
|
-
let newString = bodyData.concat(`
|
125
|
+
let newString = bodyData.concat(` {{${data.name}}}`);
|
107
126
|
setBodyData(newString);
|
108
127
|
}
|
109
128
|
};
|
@@ -6,13 +6,15 @@ import { IconButton, Tooltip, Grid as GridContainer } from "@mui/material";
|
|
6
6
|
import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
|
7
7
|
import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
|
8
8
|
import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
|
9
|
+
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
|
9
10
|
import { insertGrid } from "../../utils/grid";
|
10
|
-
import { GridAddGridIcon,
|
11
|
+
import { GridAddGridIcon, GridSettingsIcon } from "../../common/iconslist";
|
11
12
|
import GridPopup from "./GridPopup";
|
12
13
|
import SectionPopup from "./SectionPopup";
|
13
14
|
import { gridItem } from "../../utils/gridItem";
|
14
15
|
import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
|
15
16
|
import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
|
17
|
+
import useWindowResize from "../../hooks/useWindowResize";
|
16
18
|
import { jsx as _jsx } from "react/jsx-runtime";
|
17
19
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
18
20
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -58,6 +60,7 @@ const Grid = props => {
|
|
58
60
|
} = useEditorContext();
|
59
61
|
const selected = hoverPath === path.join(",");
|
60
62
|
const [showTool] = useEditorSelection(editor);
|
63
|
+
const [size] = useWindowResize();
|
61
64
|
const onAddGridItem = () => {
|
62
65
|
const currentPath = editor.selection?.anchor?.path;
|
63
66
|
const ancestorsPath = Path.ancestors(currentPath, {
|
@@ -223,11 +226,11 @@ const Grid = props => {
|
|
223
226
|
children: /*#__PURE__*/_jsx(GridAddGridIcon, {})
|
224
227
|
})
|
225
228
|
}), /*#__PURE__*/_jsx(Tooltip, {
|
226
|
-
title: "
|
229
|
+
title: "Duplicate",
|
227
230
|
arrow: true,
|
228
231
|
children: /*#__PURE__*/_jsx(IconButton, {
|
229
232
|
onClick: onAddSection(),
|
230
|
-
children: /*#__PURE__*/_jsx(
|
233
|
+
children: /*#__PURE__*/_jsx(ContentCopyIcon, {})
|
231
234
|
})
|
232
235
|
}), path.length === 2 ? /*#__PURE__*/_jsxs(_Fragment, {
|
233
236
|
children: [/*#__PURE__*/_jsx(Tooltip, {
|
@@ -254,6 +257,12 @@ const Grid = props => {
|
|
254
257
|
const bgImage = backgroundImage && backgroundImage !== "none" ? {
|
255
258
|
backgroundImage: `url(${backgroundImage})`
|
256
259
|
} : {};
|
260
|
+
const {
|
261
|
+
topLeft,
|
262
|
+
topRight,
|
263
|
+
bottomLeft,
|
264
|
+
bottomRight
|
265
|
+
} = getBreakPointsValue(borderRadius, size?.device) || {};
|
257
266
|
return /*#__PURE__*/_jsxs(GridContainer, {
|
258
267
|
container: true,
|
259
268
|
className: `grid-container ${grid} has-hover element-root`,
|
@@ -269,9 +278,7 @@ const Grid = props => {
|
|
269
278
|
...bgImage,
|
270
279
|
borderColor: borderColor || "transparent",
|
271
280
|
borderWidth: borderWidth || "1px",
|
272
|
-
borderRadius: {
|
273
|
-
...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
|
274
|
-
},
|
281
|
+
borderRadius: `${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px`,
|
275
282
|
borderStyle: borderStyle || "solid",
|
276
283
|
height: "auto"
|
277
284
|
},
|
@@ -1,50 +1,12 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { useSlateStatic, useSelected, ReactEditor } from "slate-react";
|
3
3
|
import { Box } from "@mui/material";
|
4
|
-
import { getPageSettings } from "
|
5
|
-
import {
|
6
|
-
import {
|
7
|
-
import
|
4
|
+
import { getPageSettings } from "../../utils/pageSettings";
|
5
|
+
import { isTextSelected } from "../../utils/helper";
|
6
|
+
import { useEditorContext } from "../../hooks/useMouseMove";
|
7
|
+
import SimpleTextStyle from "./style";
|
8
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
9
9
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
10
|
-
const SimpleTextStyle = ({
|
11
|
-
pageColor
|
12
|
-
}) => ({
|
13
|
-
root: {
|
14
|
-
position: "relative",
|
15
|
-
padding: "0px",
|
16
|
-
"& .placeholder-simple-text": {
|
17
|
-
color: invertColor(pageColor),
|
18
|
-
background: "transparent",
|
19
|
-
position: "absolute",
|
20
|
-
zIndex: -1,
|
21
|
-
left: "0px",
|
22
|
-
top: "0px",
|
23
|
-
bottom: 0,
|
24
|
-
margin: "auto",
|
25
|
-
pointerEvents: "none",
|
26
|
-
height: "18px",
|
27
|
-
overflow: "hidden",
|
28
|
-
fontSize: "14px",
|
29
|
-
"& .bg-pad-sl": {
|
30
|
-
padding: "2px 4px 2px 4px",
|
31
|
-
background: "transparent",
|
32
|
-
color: invertColor(pageColor)
|
33
|
-
}
|
34
|
-
}
|
35
|
-
},
|
36
|
-
section: {
|
37
|
-
display: "flex",
|
38
|
-
width: "100%",
|
39
|
-
backgroundSize: "cover",
|
40
|
-
justifyContent: "center",
|
41
|
-
alignItems: "center",
|
42
|
-
"& .simple-text": {
|
43
|
-
width: "80%",
|
44
|
-
maxWidth: "1440px"
|
45
|
-
}
|
46
|
-
}
|
47
|
-
});
|
48
10
|
const SimpleText = props => {
|
49
11
|
const {
|
50
12
|
theme
|
@@ -68,7 +30,7 @@ const SimpleText = props => {
|
|
68
30
|
pageColor
|
69
31
|
} = pageSt?.pageProps || {};
|
70
32
|
const classes = SimpleTextStyle({
|
71
|
-
pageColor: pageColor || theme?.palette?.editor?.background ||
|
33
|
+
pageColor: pageColor || theme?.palette?.editor?.background || "#FFFFFF"
|
72
34
|
});
|
73
35
|
const selected = useSelected();
|
74
36
|
const path = ReactEditor.findPath(editor, element);
|
@@ -0,0 +1,40 @@
|
|
1
|
+
import { invertColor } from "../../helper";
|
2
|
+
const SimpleTextStyle = ({
|
3
|
+
pageColor
|
4
|
+
}) => ({
|
5
|
+
root: {
|
6
|
+
position: "relative",
|
7
|
+
padding: "0px",
|
8
|
+
"& .placeholder-simple-text": {
|
9
|
+
color: invertColor(pageColor),
|
10
|
+
background: "transparent",
|
11
|
+
position: "absolute",
|
12
|
+
zIndex: -1,
|
13
|
+
left: "0px",
|
14
|
+
top: "0px",
|
15
|
+
bottom: 0,
|
16
|
+
margin: "auto",
|
17
|
+
pointerEvents: "none",
|
18
|
+
height: "18px",
|
19
|
+
overflow: "hidden",
|
20
|
+
fontSize: "14px",
|
21
|
+
"& .bg-pad-sl": {
|
22
|
+
padding: "2px 4px 2px 4px",
|
23
|
+
background: "transparent",
|
24
|
+
color: invertColor(pageColor)
|
25
|
+
}
|
26
|
+
}
|
27
|
+
},
|
28
|
+
section: {
|
29
|
+
display: "flex",
|
30
|
+
width: "100%",
|
31
|
+
backgroundSize: "cover",
|
32
|
+
justifyContent: "center",
|
33
|
+
alignItems: "center",
|
34
|
+
"& .simple-text": {
|
35
|
+
width: "80%",
|
36
|
+
maxWidth: "1440px"
|
37
|
+
}
|
38
|
+
}
|
39
|
+
});
|
40
|
+
export default SimpleTextStyle;
|
@@ -124,7 +124,7 @@ const TableCell = props => {
|
|
124
124
|
children: [children, isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {
|
125
125
|
classes: classes,
|
126
126
|
onMouseDown: onMouseDown,
|
127
|
-
height:
|
127
|
+
height: tableDOM.getBoundingClientRect()?.height
|
128
128
|
}) : null, hasSelected ? /*#__PURE__*/_jsx("div", {
|
129
129
|
className: "selection-area-tc",
|
130
130
|
contentEditable: false
|
@@ -3,10 +3,35 @@ const VariableStyles = () => ({
|
|
3
3
|
color: "#2563EB",
|
4
4
|
background: "#EEEEEE"
|
5
5
|
},
|
6
|
-
variableSelectBtn: {
|
7
|
-
|
8
|
-
|
9
|
-
|
6
|
+
// variableSelectBtn: {
|
7
|
+
// height: "31px",
|
8
|
+
// borderRadius: "10px",
|
9
|
+
// marginLeft: "8px"
|
10
|
+
// }
|
11
|
+
variableBtn: {
|
12
|
+
background: "#F4F6F9",
|
13
|
+
color: "#64748B",
|
14
|
+
fontSize: "14px",
|
15
|
+
fontWeight: 500,
|
16
|
+
padding: "4px 22px",
|
17
|
+
textTransform: "none",
|
18
|
+
border: "1px solid #D8DDE1",
|
19
|
+
height: "36px",
|
20
|
+
paddingLeft: '8px',
|
21
|
+
paddingRight: '18px',
|
22
|
+
"& svg": {
|
23
|
+
width: '20px',
|
24
|
+
height: '20px',
|
25
|
+
"& path": {
|
26
|
+
stroke: "#64748B"
|
27
|
+
}
|
28
|
+
},
|
29
|
+
"&:hover": {
|
30
|
+
border: "1px solid #64748B"
|
31
|
+
},
|
32
|
+
'& .MuiSelect-select.MuiInputBase-input.MuiOutlinedInput-input': {
|
33
|
+
paddingRight: '5px'
|
34
|
+
}
|
10
35
|
}
|
11
36
|
});
|
12
37
|
export default VariableStyles;
|
@@ -3,6 +3,7 @@ import { useSlateStatic } from "slate-react";
|
|
3
3
|
import { MenuItem, Select } from "@mui/material";
|
4
4
|
import { insertVariables } from "../../utils/variables";
|
5
5
|
import VariableStyles from "./Style";
|
6
|
+
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
|
6
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
9
|
const VariableButton = props => {
|
@@ -21,13 +22,12 @@ const VariableButton = props => {
|
|
21
22
|
id: "variable-selection-mini",
|
22
23
|
displayEmpty: true,
|
23
24
|
value: '',
|
24
|
-
sx: classes.
|
25
|
+
sx: classes.variableBtn,
|
25
26
|
onChange: updateVariable,
|
27
|
+
IconComponent: () => /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {}),
|
26
28
|
children: [/*#__PURE__*/_jsx(MenuItem, {
|
27
29
|
value: "",
|
28
|
-
children:
|
29
|
-
children: "Variables"
|
30
|
-
})
|
30
|
+
children: "Variables"
|
31
31
|
}), (options || []).map((item, index) => /*#__PURE__*/_jsx(MenuItem, {
|
32
32
|
value: item.key,
|
33
33
|
children: item.label
|
@@ -16,6 +16,13 @@ const editorStyles = ({
|
|
16
16
|
"& .mini-tool-wrpr-ei": {
|
17
17
|
display: "none"
|
18
18
|
}
|
19
|
+
},
|
20
|
+
"& .mobileMiniTextWrapper": {
|
21
|
+
boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
|
22
|
+
position: "fixed",
|
23
|
+
bottom: 0,
|
24
|
+
left: 0,
|
25
|
+
width: "100%"
|
19
26
|
}
|
20
27
|
},
|
21
28
|
slateWrapper: {
|
@@ -226,6 +233,17 @@ const editorStyles = ({
|
|
226
233
|
fillOpacity: 0
|
227
234
|
}
|
228
235
|
}
|
236
|
+
},
|
237
|
+
"&.hideScroll": {
|
238
|
+
"&::-webkit-scrollbar-track": {
|
239
|
+
background: "none !important"
|
240
|
+
},
|
241
|
+
"&::-webkit-scrollbar-thumb": {
|
242
|
+
background: "none !important"
|
243
|
+
},
|
244
|
+
"&::-webkit-scrollbar-thumb:hover": {
|
245
|
+
background: "none !important"
|
246
|
+
}
|
229
247
|
}
|
230
248
|
},
|
231
249
|
fullScreenWrapper: {
|