@flozy/editor 2.0.9 → 2.1.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +19 -2
- package/dist/Editor/Elements/Button/EditorButton.js +2 -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 +11 -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 +9 -3
- 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 +11 -0
- package/dist/Editor/Toolbar/Basic/index.js +54 -25
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat.js +419 -0
- package/dist/Editor/Toolbar/PopupTool/index.js +2 -1
- package/dist/Editor/common/Section/index.js +1 -43
- package/dist/Editor/common/Section/styles.js +44 -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 +1 -10
- package/dist/Editor/plugins/withHTML.js +36 -4
- 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
@@ -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
|
};
|
@@ -13,6 +13,7 @@ import SectionPopup from "./SectionPopup";
|
|
13
13
|
import { gridItem } from "../../utils/gridItem";
|
14
14
|
import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
|
15
15
|
import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
|
16
|
+
import useWindowResize from "../../hooks/useWindowResize";
|
16
17
|
import { jsx as _jsx } from "react/jsx-runtime";
|
17
18
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
18
19
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -58,6 +59,7 @@ const Grid = props => {
|
|
58
59
|
} = useEditorContext();
|
59
60
|
const selected = hoverPath === path.join(",");
|
60
61
|
const [showTool] = useEditorSelection(editor);
|
62
|
+
const [size] = useWindowResize();
|
61
63
|
const onAddGridItem = () => {
|
62
64
|
const currentPath = editor.selection?.anchor?.path;
|
63
65
|
const ancestorsPath = Path.ancestors(currentPath, {
|
@@ -254,6 +256,12 @@ const Grid = props => {
|
|
254
256
|
const bgImage = backgroundImage && backgroundImage !== "none" ? {
|
255
257
|
backgroundImage: `url(${backgroundImage})`
|
256
258
|
} : {};
|
259
|
+
const {
|
260
|
+
topLeft,
|
261
|
+
topRight,
|
262
|
+
bottomLeft,
|
263
|
+
bottomRight
|
264
|
+
} = getBreakPointsValue(borderRadius, size?.device) || {};
|
257
265
|
return /*#__PURE__*/_jsxs(GridContainer, {
|
258
266
|
container: true,
|
259
267
|
className: `grid-container ${grid} has-hover element-root`,
|
@@ -269,9 +277,7 @@ const Grid = props => {
|
|
269
277
|
...bgImage,
|
270
278
|
borderColor: borderColor || "transparent",
|
271
279
|
borderWidth: borderWidth || "1px",
|
272
|
-
borderRadius: {
|
273
|
-
...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
|
274
|
-
},
|
280
|
+
borderRadius: `${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px`,
|
275
281
|
borderStyle: borderStyle || "solid",
|
276
282
|
height: "auto"
|
277
283
|
},
|
@@ -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
|
@@ -226,6 +226,17 @@ const editorStyles = ({
|
|
226
226
|
fillOpacity: 0
|
227
227
|
}
|
228
228
|
}
|
229
|
+
},
|
230
|
+
"&.hideScroll": {
|
231
|
+
"&::-webkit-scrollbar-track": {
|
232
|
+
background: "none !important"
|
233
|
+
},
|
234
|
+
"&::-webkit-scrollbar-thumb": {
|
235
|
+
background: "none !important"
|
236
|
+
},
|
237
|
+
"&::-webkit-scrollbar-thumb:hover": {
|
238
|
+
background: "none !important"
|
239
|
+
}
|
229
240
|
}
|
230
241
|
},
|
231
242
|
fullScreenWrapper: {
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
2
|
import { useSlateStatic } from "slate-react";
|
3
|
-
import { Box, Tooltip } from "@mui/material";
|
3
|
+
import { Box, Divider, Grid, Tooltip } from "@mui/material";
|
4
4
|
import { toolbarGroups } from "../toolbarGroups";
|
5
5
|
import { MarkButton } from "../FormatTools";
|
6
6
|
import LinkButton from "../../Elements/Link/LinkButton";
|
@@ -17,13 +17,14 @@ const BasicToolbar = props => {
|
|
17
17
|
// props
|
18
18
|
const {
|
19
19
|
otherProps: {
|
20
|
-
variableOptions
|
20
|
+
variableOptions,
|
21
|
+
fontStyleOptions
|
21
22
|
}
|
22
23
|
} = props;
|
23
24
|
|
24
25
|
// state
|
25
26
|
const [activeColor, setActiveColor] = useState("#000000");
|
26
|
-
const fontStyle = allTools.filter(f => f.basic);
|
27
|
+
const fontStyle = allTools.filter(f => f.basic || fontStyleOptions?.includes(f.format));
|
27
28
|
const link = allTools.find(f => f.format?.indexOf("link") >= 0);
|
28
29
|
const handleTextColor = color => {
|
29
30
|
setActiveColor(color);
|
@@ -35,32 +36,60 @@ const BasicToolbar = props => {
|
|
35
36
|
return /*#__PURE__*/_jsxs(Box, {
|
36
37
|
component: 'div',
|
37
38
|
className: "basic-toolbar",
|
38
|
-
children: [
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
},
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
39
|
+
children: [/*#__PURE__*/_jsxs(Grid, {
|
40
|
+
container: true,
|
41
|
+
sx: {
|
42
|
+
padding: '10px'
|
43
|
+
},
|
44
|
+
alignItems: 'center',
|
45
|
+
justifyContent: 'space-between',
|
46
|
+
children: [/*#__PURE__*/_jsx(Grid, {
|
47
|
+
item: true,
|
48
|
+
children: /*#__PURE__*/_jsxs(Grid, {
|
49
|
+
container: true,
|
50
|
+
alignItems: 'center',
|
51
|
+
children: [/*#__PURE__*/_jsx(Grid, {
|
52
|
+
item: true,
|
53
|
+
children: fontStyle?.map((m, i) => {
|
54
|
+
return /*#__PURE__*/_jsx(MarkButton, {
|
55
|
+
editor: editor,
|
56
|
+
...m
|
57
|
+
}, `pptool_mark_${i}_${m.id}`);
|
58
|
+
})
|
59
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
60
|
+
item: true,
|
61
|
+
children: /*#__PURE__*/_jsx(LinkButton, {
|
62
|
+
active: isBlockActive(editor, link.format),
|
63
|
+
editor: editor
|
64
|
+
}, link.id)
|
65
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
66
|
+
item: true,
|
67
|
+
children: /*#__PURE__*/_jsx(Tooltip, {
|
68
|
+
title: "Font Color",
|
69
|
+
children: /*#__PURE__*/_jsx(ColorPickerButton, {
|
70
|
+
value: activeColor || "#0000",
|
71
|
+
onSave: color => {
|
72
|
+
handleTextColor(color);
|
73
|
+
},
|
74
|
+
defaultColors: colors
|
75
|
+
})
|
76
|
+
})
|
77
|
+
})]
|
78
|
+
})
|
79
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
80
|
+
item: true,
|
81
|
+
children: variableOptions && variableOptions.length > 0 && /*#__PURE__*/_jsx(VariableButton, {
|
82
|
+
placeholder: "Variables",
|
83
|
+
options: variableOptions
|
84
|
+
})
|
85
|
+
})]
|
86
|
+
}), /*#__PURE__*/_jsx(Divider, {})]
|
59
87
|
});
|
60
88
|
};
|
61
89
|
BasicToolbar.defaultProps = {
|
62
90
|
otherProps: {
|
63
|
-
variableOptions: []
|
91
|
+
variableOptions: [],
|
92
|
+
fontStyleOptions: []
|
64
93
|
}
|
65
94
|
};
|
66
95
|
export default BasicToolbar;
|