@flozy/editor 1.7.5 → 1.7.6
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +30 -12
- package/dist/Editor/DialogWrapper.js +2 -10
- package/dist/Editor/Editor.css +105 -0
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -4
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +9 -6
- package/dist/Editor/Elements/Color Picker/LogoIcon.js +15 -49
- package/dist/Editor/Elements/Color Picker/Styles.js +25 -4
- package/dist/Editor/Elements/Color Picker/defaultColors.js +1 -1
- package/dist/Editor/Elements/Embed/Image.js +25 -31
- package/dist/Editor/Elements/Embed/Video.js +49 -40
- package/dist/Editor/Elements/Form/Workflow/Styles.js +3 -2
- package/dist/Editor/Elements/Grid/Grid.js +67 -114
- package/dist/Editor/Elements/Grid/GridItem.js +9 -23
- package/dist/Editor/Elements/Grid/templates/default_grid.js +0 -23
- package/dist/Editor/Elements/Link/Link.js +58 -20
- package/dist/Editor/Elements/Link/LinkButton.js +37 -97
- package/dist/Editor/Elements/Link/LinkPopup.js +106 -0
- package/dist/Editor/Elements/List/CheckList.js +28 -22
- package/dist/Editor/Elements/Signature/SignatureOptions/TypeSignature.js +11 -5
- package/dist/Editor/Elements/Signature/SignaturePopup.js +15 -4
- package/dist/Editor/Elements/SimpleText.js +30 -26
- package/dist/Editor/MiniEditor.js +4 -6
- package/dist/Editor/Styles/EditorStyles.js +72 -1
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +2 -1
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +5 -1
- package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +3 -1
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +4 -0
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +96 -19
- package/dist/Editor/Toolbar/toolbarGroups.js +1 -1
- package/dist/Editor/common/Section/index.js +118 -0
- package/dist/Editor/common/Shorthands/elements.js +1 -1
- package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +5 -1
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +44 -51
- package/dist/Editor/common/StyleBuilder/embedImageStyle.js +2 -24
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -3
- package/dist/Editor/common/StyleBuilder/fieldStyle.js +0 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +52 -62
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +2 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +100 -74
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +41 -10
- package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +3 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +27 -77
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -5
- package/dist/Editor/common/StyleBuilder/fieldTypes/gridSize.js +19 -15
- package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +2 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +2 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/radiusStyle.js +67 -8
- package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +2 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +21 -32
- package/dist/Editor/common/StyleBuilder/fieldTypes/textAlign.js +37 -41
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +26 -24
- package/dist/Editor/common/StyleBuilder/formStyle.js +0 -6
- package/dist/Editor/common/StyleBuilder/gridItemStyle.js +38 -54
- package/dist/Editor/common/StyleBuilder/gridStyle.js +20 -26
- package/dist/Editor/common/StyleBuilder/index.js +14 -58
- package/dist/Editor/common/StyleBuilder/sectionStyle.js +16 -0
- package/dist/Editor/helper/index.js +63 -1
- package/dist/Editor/utils/Decorators/index.js +5 -0
- package/dist/Editor/utils/Decorators/link.js +26 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +36 -8
- package/dist/Editor/utils/accordion.js +17 -4
- package/dist/Editor/utils/button.js +15 -1
- package/dist/Editor/utils/customHooks/useElement.js +28 -0
- package/dist/Editor/utils/embed.js +1 -7
- package/dist/Editor/utils/events.js +92 -43
- package/dist/Editor/utils/gridItem.js +1 -1
- package/dist/Editor/utils/link.js +10 -9
- package/package.json +1 -1
@@ -43,6 +43,7 @@ const MiniToolbar = props => {
|
|
43
43
|
};
|
44
44
|
const onClose = () => {
|
45
45
|
setPopper(null);
|
46
|
+
setFullScreen(false);
|
46
47
|
};
|
47
48
|
const toggleFullscreen = () => {
|
48
49
|
setFullScreen(!fullScreen);
|
@@ -57,6 +58,7 @@ const MiniToolbar = props => {
|
|
57
58
|
icon: Icon
|
58
59
|
}) => {
|
59
60
|
return /*#__PURE__*/_jsx(Tooltip, {
|
61
|
+
arrow: true,
|
60
62
|
title: label,
|
61
63
|
children: /*#__PURE__*/_jsx(IconButton, {
|
62
64
|
className: type === popper ? "active" : "",
|
@@ -92,7 +94,9 @@ const MiniToolbar = props => {
|
|
92
94
|
classes: popupStyles,
|
93
95
|
editor: editor,
|
94
96
|
customProps: customProps,
|
95
|
-
fullScreen: fullScreen
|
97
|
+
fullScreen: fullScreen,
|
98
|
+
setPopper: setPopper,
|
99
|
+
onClose: onClose
|
96
100
|
})]
|
97
101
|
}) : null
|
98
102
|
})]
|
@@ -46,7 +46,8 @@ const AddTemplates = props => {
|
|
46
46
|
classes,
|
47
47
|
editor,
|
48
48
|
fullScreen,
|
49
|
-
customProps
|
49
|
+
customProps,
|
50
|
+
onClose
|
50
51
|
} = props;
|
51
52
|
const {
|
52
53
|
services
|
@@ -83,6 +84,7 @@ const AddTemplates = props => {
|
|
83
84
|
const onSelectTemplate = card => () => {
|
84
85
|
try {
|
85
86
|
editor.insertNode(JSON.parse(card.content));
|
87
|
+
onClose();
|
86
88
|
} catch (err) {
|
87
89
|
console.log(err);
|
88
90
|
}
|
@@ -1,15 +1,18 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
2
|
import { Button, ButtonGroup, Grid, Typography } from "@mui/material";
|
3
|
+
import FormatColorResetIcon from "@mui/icons-material/FormatColorReset";
|
3
4
|
import WidthFullIcon from "@mui/icons-material/WidthFull";
|
4
5
|
import WidthNormalIcon from "@mui/icons-material/WidthNormal";
|
5
6
|
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
|
7
|
+
import FormatClearIcon from "@mui/icons-material/FormatClear";
|
6
8
|
import { Dropdown, MarkButton, TextSize, BlockButton, AccordionButton } from "../FormatTools";
|
7
9
|
import { toolbarGroups } from "../toolbarGroups";
|
8
10
|
import ColorPicker from "../../Elements/Color Picker/ColorPicker";
|
9
|
-
import { activeMark, isBlockActive, toggleBlock, getBlockActive, upateBlockActive } from "../../utils/SlateUtilityFunctions";
|
11
|
+
import { activeMark, isBlockActive, toggleBlock, getBlockActive, upateBlockActive, addMarkData } from "../../utils/SlateUtilityFunctions";
|
10
12
|
import LinkButton from "../../Elements/Link/LinkButton";
|
11
13
|
import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
|
12
14
|
import { AllColors } from "../../Elements/Color Picker/ColorButtons";
|
15
|
+
import { fontFamilyMap } from "../../utils/font";
|
13
16
|
import { jsx as _jsx } from "react/jsx-runtime";
|
14
17
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
15
18
|
const allTools = toolbarGroups.flat();
|
@@ -83,17 +86,46 @@ const TextFormat = props => {
|
|
83
86
|
const onClosePicker = () => {
|
84
87
|
setAnchorEl(null);
|
85
88
|
};
|
89
|
+
const handleDefault = ({
|
90
|
+
format,
|
91
|
+
val
|
92
|
+
}) => () => {
|
93
|
+
const value = val ? val : "inherit";
|
94
|
+
addMarkData(editor, {
|
95
|
+
format,
|
96
|
+
value
|
97
|
+
});
|
98
|
+
};
|
86
99
|
return /*#__PURE__*/_jsxs(Grid, {
|
87
100
|
container: true,
|
88
101
|
sx: classes.textFormatWrapper,
|
89
102
|
children: [/*#__PURE__*/_jsxs(Grid, {
|
90
103
|
item: true,
|
91
104
|
xs: 12,
|
92
|
-
children: [/*#__PURE__*/
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
children:
|
105
|
+
children: [/*#__PURE__*/_jsxs(Grid, {
|
106
|
+
container: true,
|
107
|
+
justifyContent: "space-between",
|
108
|
+
alignItems: "center",
|
109
|
+
children: [/*#__PURE__*/_jsx(Grid, {
|
110
|
+
item: true,
|
111
|
+
children: /*#__PURE__*/_jsx(Typography, {
|
112
|
+
variant: "body1",
|
113
|
+
color: "primary",
|
114
|
+
sx: classes.typoLabel,
|
115
|
+
children: "Font Family"
|
116
|
+
})
|
117
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
118
|
+
item: true,
|
119
|
+
children: /*#__PURE__*/_jsx(Button, {
|
120
|
+
sx: classes.defaultBtn,
|
121
|
+
startIcon: /*#__PURE__*/_jsx(FormatClearIcon, {}),
|
122
|
+
onClick: handleDefault({
|
123
|
+
format: "fontFamily",
|
124
|
+
val: Object.values(fontFamilyMap)[0]
|
125
|
+
}),
|
126
|
+
children: "Default"
|
127
|
+
})
|
128
|
+
})]
|
97
129
|
}), /*#__PURE__*/_jsx(Grid, {
|
98
130
|
item: true,
|
99
131
|
xs: 12,
|
@@ -148,11 +180,29 @@ const TextFormat = props => {
|
|
148
180
|
item: true,
|
149
181
|
xs: 12,
|
150
182
|
sx: classes.textFormatField,
|
151
|
-
children: [/*#__PURE__*/
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
children:
|
183
|
+
children: [/*#__PURE__*/_jsxs(Grid, {
|
184
|
+
container: true,
|
185
|
+
justifyContent: "space-between",
|
186
|
+
alignItems: "center",
|
187
|
+
children: [/*#__PURE__*/_jsx(Grid, {
|
188
|
+
item: true,
|
189
|
+
children: /*#__PURE__*/_jsx(Typography, {
|
190
|
+
variant: "body1",
|
191
|
+
color: "primary",
|
192
|
+
sx: classes.typoLabel,
|
193
|
+
children: "Text Color"
|
194
|
+
})
|
195
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
196
|
+
item: true,
|
197
|
+
children: /*#__PURE__*/_jsx(Button, {
|
198
|
+
sx: classes.defaultBtn,
|
199
|
+
startIcon: /*#__PURE__*/_jsx(FormatColorResetIcon, {}),
|
200
|
+
onClick: handleDefault({
|
201
|
+
format: "color"
|
202
|
+
}),
|
203
|
+
children: "Default"
|
204
|
+
})
|
205
|
+
})]
|
156
206
|
}), /*#__PURE__*/_jsx(Grid, {
|
157
207
|
sx: classes.textFormatColorWrpr,
|
158
208
|
children: /*#__PURE__*/_jsx(ColorPicker, {
|
@@ -160,18 +210,42 @@ const TextFormat = props => {
|
|
160
210
|
activeMark: activeMark,
|
161
211
|
editor: editor,
|
162
212
|
showHex: false,
|
163
|
-
rounded: true
|
213
|
+
rounded: true,
|
214
|
+
title: "Text Color",
|
215
|
+
id: "11_cc",
|
216
|
+
classes: classes
|
164
217
|
}, "11_cc")
|
165
218
|
})]
|
166
219
|
}), /*#__PURE__*/_jsxs(Grid, {
|
167
220
|
item: true,
|
168
221
|
xs: 12,
|
169
222
|
sx: classes.textFormatField,
|
170
|
-
children: [/*#__PURE__*/
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
children:
|
223
|
+
children: [/*#__PURE__*/_jsxs(Grid, {
|
224
|
+
container: true,
|
225
|
+
justifyContent: "space-between",
|
226
|
+
alignItems: "center",
|
227
|
+
children: [/*#__PURE__*/_jsx(Grid, {
|
228
|
+
item: true,
|
229
|
+
children: /*#__PURE__*/_jsx(Typography, {
|
230
|
+
variant: "body1",
|
231
|
+
color: "primary",
|
232
|
+
sx: classes.typoLabel,
|
233
|
+
children: "Text Background Color"
|
234
|
+
})
|
235
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
236
|
+
item: true,
|
237
|
+
children: /*#__PURE__*/_jsx(Grid, {
|
238
|
+
item: true,
|
239
|
+
children: /*#__PURE__*/_jsx(Button, {
|
240
|
+
sx: classes.defaultBtn,
|
241
|
+
startIcon: /*#__PURE__*/_jsx(FormatColorResetIcon, {}),
|
242
|
+
onClick: handleDefault({
|
243
|
+
format: "bgColor"
|
244
|
+
}),
|
245
|
+
children: "Default"
|
246
|
+
})
|
247
|
+
})
|
248
|
+
})]
|
175
249
|
}), /*#__PURE__*/_jsx(Grid, {
|
176
250
|
item: true,
|
177
251
|
xs: 12,
|
@@ -182,7 +256,9 @@ const TextFormat = props => {
|
|
182
256
|
editor: editor,
|
183
257
|
showHex: false,
|
184
258
|
rounded: true,
|
185
|
-
|
259
|
+
title: "Text Background Color",
|
260
|
+
classes: classes,
|
261
|
+
id: "12_cc"
|
186
262
|
}, "12_cc")
|
187
263
|
})]
|
188
264
|
}), /*#__PURE__*/_jsxs(Grid, {
|
@@ -332,7 +408,8 @@ const TextFormat = props => {
|
|
332
408
|
anchorEl: anchorEl,
|
333
409
|
onClose: onClosePicker,
|
334
410
|
classes: classes,
|
335
|
-
onSelect: onSelectColor
|
411
|
+
onSelect: onSelectColor,
|
412
|
+
id: "all_1"
|
336
413
|
})]
|
337
414
|
});
|
338
415
|
};
|
@@ -0,0 +1,118 @@
|
|
1
|
+
import React, { useState } from "react";
|
2
|
+
import { Transforms } from "slate";
|
3
|
+
import { ReactEditor, useSlateStatic } from "slate-react";
|
4
|
+
import { Box, IconButton, Tooltip } from "@mui/material";
|
5
|
+
import TuneIcon from "@mui/icons-material/Tune";
|
6
|
+
import SectionPopup from "../../Elements/Grid/SectionPopup";
|
7
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
8
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
9
|
+
const Section = props => {
|
10
|
+
const {
|
11
|
+
children,
|
12
|
+
element,
|
13
|
+
customProps
|
14
|
+
} = props;
|
15
|
+
const {
|
16
|
+
readOnly
|
17
|
+
} = customProps;
|
18
|
+
const editor = useSlateStatic();
|
19
|
+
const [openSetttings, setOpenSettings] = useState(false);
|
20
|
+
const {
|
21
|
+
sectionBgColor,
|
22
|
+
sectionBackgroundImage,
|
23
|
+
sectionBannerSpacing,
|
24
|
+
sectionBorderRadius,
|
25
|
+
sectionGridSize,
|
26
|
+
sectionAlignment
|
27
|
+
} = element;
|
28
|
+
const {
|
29
|
+
left: ssleft,
|
30
|
+
top: sstop,
|
31
|
+
right: ssright,
|
32
|
+
bottom: ssbottom
|
33
|
+
} = sectionBannerSpacing || {};
|
34
|
+
const {
|
35
|
+
topLeft: ssTopLeft,
|
36
|
+
topRight: ssTopRight,
|
37
|
+
bottomLeft: ssBottomLeft,
|
38
|
+
bottomRight: ssBottomRight
|
39
|
+
} = sectionBorderRadius || {};
|
40
|
+
const {
|
41
|
+
vertical,
|
42
|
+
horizantal,
|
43
|
+
flexDirection
|
44
|
+
} = sectionAlignment || {};
|
45
|
+
const path = ReactEditor.findPath(editor, element);
|
46
|
+
const onSettings = () => {
|
47
|
+
setOpenSettings(true);
|
48
|
+
};
|
49
|
+
const Toolbar = () => {
|
50
|
+
return !readOnly ? /*#__PURE__*/_jsx("div", {
|
51
|
+
className: "element-toolbar ss hr",
|
52
|
+
children: /*#__PURE__*/_jsx(Tooltip, {
|
53
|
+
title: "Section Settings",
|
54
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
55
|
+
onClick: onSettings,
|
56
|
+
children: /*#__PURE__*/_jsx(TuneIcon, {})
|
57
|
+
})
|
58
|
+
})
|
59
|
+
}) : null;
|
60
|
+
};
|
61
|
+
const onSave = data => {
|
62
|
+
const updateData = {
|
63
|
+
...data
|
64
|
+
};
|
65
|
+
delete updateData.children;
|
66
|
+
Transforms.setNodes(editor, {
|
67
|
+
...updateData
|
68
|
+
}, {
|
69
|
+
at: path
|
70
|
+
});
|
71
|
+
onClose();
|
72
|
+
};
|
73
|
+
const onClose = () => {
|
74
|
+
setOpenSettings(false);
|
75
|
+
};
|
76
|
+
const onDelete = () => {
|
77
|
+
Transforms.removeNodes(editor, {
|
78
|
+
at: path
|
79
|
+
});
|
80
|
+
};
|
81
|
+
const sectionBgImage = sectionBackgroundImage && sectionBackgroundImage !== "none" ? {
|
82
|
+
backgroundImage: `url(${sectionBackgroundImage})`
|
83
|
+
} : {};
|
84
|
+
return path.length === 1 ? /*#__PURE__*/_jsxs(Box, {
|
85
|
+
component: "section",
|
86
|
+
className: "ed-section-wrapper",
|
87
|
+
style: {
|
88
|
+
position: "relative",
|
89
|
+
background: sectionBgColor,
|
90
|
+
...sectionBgImage,
|
91
|
+
paddingLeft: `${ssleft}px`,
|
92
|
+
paddingRight: `${ssright}px`,
|
93
|
+
paddingTop: `${sstop}px`,
|
94
|
+
paddingBottom: `${ssbottom}px`,
|
95
|
+
borderRadius: `${ssTopLeft}px ${ssTopRight}px ${ssBottomLeft}px ${ssBottomRight}px`,
|
96
|
+
flexDirection: flexDirection || "column",
|
97
|
+
alignItems: horizantal,
|
98
|
+
justifyContent: vertical
|
99
|
+
},
|
100
|
+
children: [/*#__PURE__*/_jsxs(Box, {
|
101
|
+
className: "ed-section-inner",
|
102
|
+
sx: {
|
103
|
+
width: `${(sectionGridSize || 8) / 12 * 100}%`
|
104
|
+
},
|
105
|
+
children: [children, /*#__PURE__*/_jsx(Toolbar, {})]
|
106
|
+
}), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
|
107
|
+
element: {
|
108
|
+
...element,
|
109
|
+
sectionGridSize: sectionGridSize || 8
|
110
|
+
},
|
111
|
+
onSave: onSave,
|
112
|
+
onClose: onClose,
|
113
|
+
onDelete: onDelete,
|
114
|
+
customProps: customProps
|
115
|
+
}) : null]
|
116
|
+
}) : children;
|
117
|
+
};
|
118
|
+
export default Section;
|
@@ -12,12 +12,14 @@ const appHeaderStyle = [{
|
|
12
12
|
label: "Title Font Size",
|
13
13
|
key: "logoFontSize",
|
14
14
|
type: "fontSize",
|
15
|
+
width: 5,
|
15
16
|
placeholder: "16px"
|
16
17
|
}, {
|
17
18
|
label: "Title Font Family",
|
18
19
|
key: "titleFontFamily",
|
19
20
|
type: "textOptions",
|
20
21
|
options: fontOptions,
|
22
|
+
width: 7,
|
21
23
|
renderOption: option => {
|
22
24
|
return /*#__PURE__*/_jsx("span", {
|
23
25
|
style: {
|
@@ -47,11 +49,13 @@ const appHeaderStyle = [{
|
|
47
49
|
label: "Menu Font Size",
|
48
50
|
key: "fontSize",
|
49
51
|
type: "fontSize",
|
50
|
-
placeholder: "16px"
|
52
|
+
placeholder: "16px",
|
53
|
+
width: 5
|
51
54
|
}, {
|
52
55
|
label: "Menu Font Family",
|
53
56
|
key: "fontFamily",
|
54
57
|
type: "textOptions",
|
58
|
+
width: 7,
|
55
59
|
options: fontOptions,
|
56
60
|
renderOption: option => {
|
57
61
|
return /*#__PURE__*/_jsx("span", {
|
@@ -7,16 +7,12 @@ const buttonStyle = [{
|
|
7
7
|
label: "Button Text",
|
8
8
|
key: "label",
|
9
9
|
type: "text"
|
10
|
-
}, {
|
11
|
-
label: "Font Size",
|
12
|
-
key: "textSize",
|
13
|
-
type: "fontSize",
|
14
|
-
placeholder: "16px or 1em"
|
15
10
|
}, {
|
16
11
|
label: "Font Family",
|
17
12
|
key: "fontFamily",
|
18
13
|
type: "textOptions",
|
19
14
|
options: fontOptions,
|
15
|
+
width: 7,
|
20
16
|
renderOption: option => {
|
21
17
|
return /*#__PURE__*/_jsx("span", {
|
22
18
|
style: {
|
@@ -25,12 +21,35 @@ const buttonStyle = [{
|
|
25
21
|
children: option.text
|
26
22
|
});
|
27
23
|
}
|
24
|
+
}, {
|
25
|
+
label: "Font Size",
|
26
|
+
key: "textSize",
|
27
|
+
type: "fontSize",
|
28
|
+
width: 5,
|
29
|
+
placeholder: "16px or 1em"
|
28
30
|
}, {
|
29
31
|
label: "Text Align",
|
30
32
|
key: "textAlign",
|
31
33
|
type: "textAlign",
|
32
34
|
placeholder: "16px or 1em"
|
33
35
|
}]
|
36
|
+
}, {
|
37
|
+
tab: "Colors",
|
38
|
+
value: "colors",
|
39
|
+
fields: [{
|
40
|
+
label: "Text Color",
|
41
|
+
key: "textColor",
|
42
|
+
type: "color",
|
43
|
+
needPreview: true
|
44
|
+
}, {
|
45
|
+
label: "Button Color",
|
46
|
+
key: "bgColor",
|
47
|
+
type: "color"
|
48
|
+
}, {
|
49
|
+
label: "Border Color",
|
50
|
+
key: "borderColor",
|
51
|
+
type: "color"
|
52
|
+
}]
|
34
53
|
}, {
|
35
54
|
tab: "Link",
|
36
55
|
value: "link",
|
@@ -39,41 +58,14 @@ const buttonStyle = [{
|
|
39
58
|
key: "buttonLink",
|
40
59
|
type: "buttonLink"
|
41
60
|
}]
|
42
|
-
}, {
|
43
|
-
tab: "Icon",
|
44
|
-
value: "icon",
|
45
|
-
fields: [{
|
46
|
-
label: "Icon Position",
|
47
|
-
key: "iconPosition",
|
48
|
-
type: "textOptions",
|
49
|
-
options: [{
|
50
|
-
value: "start",
|
51
|
-
label: "Start"
|
52
|
-
}, {
|
53
|
-
value: "end",
|
54
|
-
label: "End"
|
55
|
-
}]
|
56
|
-
}, {
|
57
|
-
label: "Button Icons",
|
58
|
-
key: "buttonIcon",
|
59
|
-
type: "icons"
|
60
|
-
}]
|
61
61
|
}, {
|
62
62
|
tab: "Position",
|
63
63
|
value: "position",
|
64
64
|
fields: [{
|
65
|
-
label: "
|
65
|
+
label: "Alignment",
|
66
66
|
key: "alignment",
|
67
67
|
type: "alignment"
|
68
68
|
}]
|
69
|
-
}, {
|
70
|
-
tab: "Margin Spacing",
|
71
|
-
value: "marginSpacing",
|
72
|
-
fields: [{
|
73
|
-
label: "Margin Spacing",
|
74
|
-
key: "marginSpacing",
|
75
|
-
type: "bannerSpacing"
|
76
|
-
}]
|
77
69
|
}, {
|
78
70
|
tab: "Banner Spacing",
|
79
71
|
value: "bannerSpacing",
|
@@ -93,11 +85,13 @@ const buttonStyle = [{
|
|
93
85
|
label: "Border Width",
|
94
86
|
key: "borderWidth",
|
95
87
|
type: "text",
|
96
|
-
placeholder: "1px"
|
88
|
+
placeholder: "1px",
|
89
|
+
width: 6
|
97
90
|
}, {
|
98
91
|
label: "Border Style",
|
99
92
|
key: "borderStyle",
|
100
93
|
type: "textOptions",
|
94
|
+
width: 6,
|
101
95
|
options: [{
|
102
96
|
text: "Solid",
|
103
97
|
value: "solid"
|
@@ -110,29 +104,28 @@ const buttonStyle = [{
|
|
110
104
|
}],
|
111
105
|
renderOption: option => {
|
112
106
|
return /*#__PURE__*/_jsx("span", {
|
113
|
-
style: {
|
114
|
-
fontFamily: option.value
|
115
|
-
},
|
116
107
|
children: option.text
|
117
108
|
});
|
118
109
|
}
|
119
110
|
}]
|
120
111
|
}, {
|
121
|
-
tab: "
|
122
|
-
value: "
|
112
|
+
tab: "Icon",
|
113
|
+
value: "icon",
|
123
114
|
fields: [{
|
124
|
-
label: "
|
125
|
-
key: "
|
126
|
-
type: "
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
115
|
+
label: "Icon Position",
|
116
|
+
key: "iconPosition",
|
117
|
+
type: "textOptions",
|
118
|
+
options: [{
|
119
|
+
value: "start",
|
120
|
+
label: "Start"
|
121
|
+
}, {
|
122
|
+
value: "end",
|
123
|
+
label: "End"
|
124
|
+
}]
|
132
125
|
}, {
|
133
|
-
label: "
|
134
|
-
key: "
|
135
|
-
type: "
|
126
|
+
label: "Button Icons",
|
127
|
+
key: "buttonIcon",
|
128
|
+
type: "icons"
|
136
129
|
}]
|
137
130
|
}, {
|
138
131
|
tab: "Hover Colors",
|
@@ -143,7 +136,7 @@ const buttonStyle = [{
|
|
143
136
|
type: "color",
|
144
137
|
needPreview: true
|
145
138
|
}, {
|
146
|
-
label: "Hover
|
139
|
+
label: "Hover Button Color",
|
147
140
|
key: "bgColorHover",
|
148
141
|
type: "color"
|
149
142
|
}, {
|
@@ -2,7 +2,7 @@ const embedImageStyle = [{
|
|
2
2
|
tab: "URL",
|
3
3
|
value: "url",
|
4
4
|
fields: [{
|
5
|
-
label: "",
|
5
|
+
label: "Image URL",
|
6
6
|
key: "url",
|
7
7
|
type: "text",
|
8
8
|
placeholder: "Add Image URL here"
|
@@ -11,24 +11,7 @@ const embedImageStyle = [{
|
|
11
11
|
key: "url",
|
12
12
|
type: "backgroundImage"
|
13
13
|
}]
|
14
|
-
},
|
15
|
-
// {
|
16
|
-
// tab: "Image List Settings",
|
17
|
-
// value: "imageListSettings",
|
18
|
-
// fields: [
|
19
|
-
// {
|
20
|
-
// label: "Image List Columns",
|
21
|
-
// key: "cols",
|
22
|
-
// type: "text",
|
23
|
-
// },
|
24
|
-
// {
|
25
|
-
// label: "Row Height",
|
26
|
-
// key: "rowHeight",
|
27
|
-
// type: "text",
|
28
|
-
// },
|
29
|
-
// ],
|
30
|
-
// },
|
31
|
-
{
|
14
|
+
}, {
|
32
15
|
tab: "Banner Spacing",
|
33
16
|
value: "bannerSpacing",
|
34
17
|
fields: [{
|
@@ -56,11 +39,6 @@ const embedImageStyle = [{
|
|
56
39
|
tab: "Colors",
|
57
40
|
value: "colors",
|
58
41
|
fields: [{
|
59
|
-
label: "Text Color",
|
60
|
-
key: "textColor",
|
61
|
-
type: "color",
|
62
|
-
needPreview: true
|
63
|
-
}, {
|
64
42
|
label: "Background Color",
|
65
43
|
key: "bgColor",
|
66
44
|
type: "color"
|