@flozy/editor 1.3.7 → 1.4.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +11 -7
- package/dist/Editor/Editor.css +29 -17
- package/dist/Editor/Elements/AppHeader/AppHeader.js +48 -13
- package/dist/Editor/Elements/Button/ButtonPopup.js +5 -3
- package/dist/Editor/Elements/Button/EditorButton.js +69 -13
- package/dist/Editor/Elements/ChipText/ChipText.js +7 -2
- package/dist/Editor/Elements/Embed/Image.js +5 -21
- package/dist/Editor/Elements/Embed/Video.js +2 -2
- package/dist/Editor/Elements/Form/Form.js +38 -17
- package/dist/Editor/Elements/Grid/Grid.js +7 -9
- package/dist/Editor/Elements/Grid/GridItem.js +14 -17
- package/dist/Editor/Elements/Grid/GridItemPopup.js +4 -2
- package/dist/Editor/Elements/Grid/GridPopup.js +3 -1
- package/dist/Editor/Elements/Grid/templates/default_grid.js +144 -0
- package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +5 -1
- package/dist/Editor/Toolbar/FormatTools/Autocomplete.js +33 -0
- package/dist/Editor/Toolbar/FormatTools/Text.js +29 -0
- package/dist/Editor/Toolbar/FormatTools/index.js +3 -1
- package/dist/Editor/Toolbar/Toolbar.js +16 -9
- package/dist/Editor/assets/fonts/poppins/OFL.txt +93 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-Black.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-BlackItalic.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-Bold.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-BoldItalic.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-ExtraBold.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-ExtraBoldItalic.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-ExtraLight.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-ExtraLightItalic.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-Italic.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-Light.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-LightItalic.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-Medium.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-MediumItalic.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-Regular.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-SemiBold.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-SemiBoldItalic.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-Thin.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-ThinItalic.ttf +0 -0
- package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +43 -5
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +52 -1
- package/dist/Editor/common/StyleBuilder/embedImageStyle.js +12 -12
- package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +1 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +2 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +107 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +15 -9
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +17 -12
- package/dist/Editor/common/StyleBuilder/formButtonStyle.js +93 -0
- package/dist/Editor/common/StyleBuilder/gridStyle.js +9 -0
- package/dist/Editor/common/StyleBuilder/index.js +2 -2
- package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +2 -2
- package/dist/Editor/font.css +9 -0
- package/dist/Editor/service/formSubmit.js +2 -2
- package/dist/Editor/utils/SlateUtilityFunctions.js +2 -2
- package/dist/Editor/utils/customHooks/useFormat.js +11 -4
- package/dist/Editor/utils/font.js +3 -1
- package/dist/Editor/utils/grid.js +2 -8
- package/package.json +1 -1
@@ -1,3 +1,5 @@
|
|
1
|
+
import { fontOptions } from "../../utils/font";
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
1
3
|
const buttonStyle = [{
|
2
4
|
tab: "General",
|
3
5
|
value: "size",
|
@@ -6,10 +8,23 @@ const buttonStyle = [{
|
|
6
8
|
key: "label",
|
7
9
|
type: "text"
|
8
10
|
}, {
|
9
|
-
label: "
|
11
|
+
label: "Font Size",
|
10
12
|
key: "textSize",
|
11
13
|
type: "text",
|
12
14
|
placeholder: "16px or 1em"
|
15
|
+
}, {
|
16
|
+
label: "Font Family",
|
17
|
+
key: "fontFamily",
|
18
|
+
type: "textOptions",
|
19
|
+
options: fontOptions,
|
20
|
+
renderOption: option => {
|
21
|
+
return /*#__PURE__*/_jsx("span", {
|
22
|
+
style: {
|
23
|
+
fontFamily: option.value
|
24
|
+
},
|
25
|
+
children: option.text
|
26
|
+
});
|
27
|
+
}
|
13
28
|
}, {
|
14
29
|
label: "Text Align",
|
15
30
|
key: "textAlign",
|
@@ -24,6 +39,25 @@ const buttonStyle = [{
|
|
24
39
|
key: "buttonLink",
|
25
40
|
type: "buttonLink"
|
26
41
|
}]
|
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
|
+
}]
|
27
61
|
}, {
|
28
62
|
tab: "Position",
|
29
63
|
value: "position",
|
@@ -73,6 +107,23 @@ const buttonStyle = [{
|
|
73
107
|
key: "borderColor",
|
74
108
|
type: "color"
|
75
109
|
}]
|
110
|
+
}, {
|
111
|
+
tab: "Hover Colors",
|
112
|
+
value: "hoverColors",
|
113
|
+
fields: [{
|
114
|
+
label: "Text",
|
115
|
+
key: "textColorHover",
|
116
|
+
type: "color",
|
117
|
+
needPreview: true
|
118
|
+
}, {
|
119
|
+
label: "Background",
|
120
|
+
key: "bgColorHover",
|
121
|
+
type: "color"
|
122
|
+
}, {
|
123
|
+
label: "Border",
|
124
|
+
key: "borderColorHover",
|
125
|
+
type: "color"
|
126
|
+
}]
|
76
127
|
}, {
|
77
128
|
tab: "Save As Template",
|
78
129
|
value: "saveAsTemplate",
|
@@ -1,4 +1,16 @@
|
|
1
1
|
const embedImageStyle = [{
|
2
|
+
tab: "URL",
|
3
|
+
value: "url",
|
4
|
+
fields: [{
|
5
|
+
label: "URL",
|
6
|
+
key: "url",
|
7
|
+
type: "text"
|
8
|
+
}, {
|
9
|
+
label: "File",
|
10
|
+
key: "url",
|
11
|
+
type: "backgroundImage"
|
12
|
+
}]
|
13
|
+
}, {
|
2
14
|
tab: "Banner Spacing",
|
3
15
|
value: "bannerSpacing",
|
4
16
|
fields: [{
|
@@ -39,18 +51,6 @@ const embedImageStyle = [{
|
|
39
51
|
key: "borderColor",
|
40
52
|
type: "color"
|
41
53
|
}]
|
42
|
-
}, {
|
43
|
-
tab: "URL",
|
44
|
-
value: "url",
|
45
|
-
fields: [{
|
46
|
-
label: "URL",
|
47
|
-
key: "url",
|
48
|
-
type: "text"
|
49
|
-
}, {
|
50
|
-
label: "File",
|
51
|
-
key: "url",
|
52
|
-
type: "backgroundImage"
|
53
|
-
}]
|
54
54
|
}, {
|
55
55
|
tab: "Size",
|
56
56
|
value: "elementSize",
|
@@ -104,7 +104,7 @@ const Alignment = props => {
|
|
104
104
|
row: true,
|
105
105
|
"aria-labelledby": "demo-row-radio-buttons-group-label",
|
106
106
|
name: "flexDirection",
|
107
|
-
value: value?.flexDirection || "
|
107
|
+
value: value?.flexDirection || "column",
|
108
108
|
onChange: handleChange,
|
109
109
|
children: [/*#__PURE__*/_jsx(FormControlLabel, {
|
110
110
|
value: "row",
|
@@ -0,0 +1,107 @@
|
|
1
|
+
import React, { useState } from "react";
|
2
|
+
import { Grid, IconButton, TextField, Tooltip } from "@mui/material";
|
3
|
+
import * as fIcons from "@mui/icons-material";
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
5
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
6
|
+
const MUIIcons = Object.keys(fIcons).reduce((a, b) => {
|
7
|
+
if (b.indexOf("Outlined") > -1) {
|
8
|
+
a.outlined.push(b);
|
9
|
+
} else if (b.indexOf("Rounded") > -1) {
|
10
|
+
a.rounded.push(b);
|
11
|
+
} else if (b.indexOf("Sharp") > -1) {
|
12
|
+
a.sharp.push(b);
|
13
|
+
} else if (b.indexOf("TwoTone") > -1) {
|
14
|
+
a.tt.push(b);
|
15
|
+
} else {
|
16
|
+
a.filled.push(b);
|
17
|
+
}
|
18
|
+
return a;
|
19
|
+
}, {
|
20
|
+
filled: [],
|
21
|
+
outlined: [],
|
22
|
+
rounded: [],
|
23
|
+
tt: [],
|
24
|
+
sharp: []
|
25
|
+
});
|
26
|
+
const Icons = props => {
|
27
|
+
const {
|
28
|
+
value,
|
29
|
+
data,
|
30
|
+
onChange
|
31
|
+
} = props;
|
32
|
+
const {
|
33
|
+
key
|
34
|
+
} = data;
|
35
|
+
const [val, setVal] = useState("");
|
36
|
+
const [list, setList] = useState(MUIIcons.filled.slice(0, 90));
|
37
|
+
const onSelectIcon = ico => () => {
|
38
|
+
onChange({
|
39
|
+
[key]: ico
|
40
|
+
});
|
41
|
+
};
|
42
|
+
const handleChange = e => {
|
43
|
+
const keyVal = e.target.value?.toLowerCase();
|
44
|
+
setVal(keyVal);
|
45
|
+
if (keyVal) {
|
46
|
+
setList(MUIIcons.filled.filter(f => {
|
47
|
+
return f.toLowerCase().indexOf(keyVal) > -1;
|
48
|
+
}).slice(0, 90));
|
49
|
+
} else {
|
50
|
+
setList(MUIIcons.filled.slice(0, 90));
|
51
|
+
}
|
52
|
+
};
|
53
|
+
const SelectedIcon = value ? fIcons[value] : null;
|
54
|
+
return /*#__PURE__*/_jsxs(Grid, {
|
55
|
+
container: true,
|
56
|
+
children: [/*#__PURE__*/_jsx(Grid, {
|
57
|
+
item: true,
|
58
|
+
xs: 12,
|
59
|
+
children: /*#__PURE__*/_jsxs(Grid, {
|
60
|
+
container: true,
|
61
|
+
style: {
|
62
|
+
display: "flex",
|
63
|
+
alignItems: "center",
|
64
|
+
padding: "12px"
|
65
|
+
},
|
66
|
+
children: [/*#__PURE__*/_jsx(Grid, {
|
67
|
+
item: true,
|
68
|
+
xs: 10,
|
69
|
+
children: /*#__PURE__*/_jsx(TextField, {
|
70
|
+
fullWidth: true,
|
71
|
+
size: "small",
|
72
|
+
placeholder: "Search Icons...",
|
73
|
+
value: val,
|
74
|
+
onChange: handleChange
|
75
|
+
})
|
76
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
77
|
+
item: true,
|
78
|
+
xs: 2,
|
79
|
+
style: {
|
80
|
+
paddingLeft: "8px"
|
81
|
+
},
|
82
|
+
children: SelectedIcon && /*#__PURE__*/_jsx(SelectedIcon, {})
|
83
|
+
})]
|
84
|
+
})
|
85
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
86
|
+
item: true,
|
87
|
+
xs: 12,
|
88
|
+
textAlign: "center",
|
89
|
+
style: {
|
90
|
+
maxHeight: "200px",
|
91
|
+
overflowY: "auto"
|
92
|
+
},
|
93
|
+
children: list.map(m => {
|
94
|
+
const Ico = fIcons[m];
|
95
|
+
return /*#__PURE__*/_jsx(Tooltip, {
|
96
|
+
title: m,
|
97
|
+
arrow: true,
|
98
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
99
|
+
onClick: onSelectIcon(m),
|
100
|
+
children: /*#__PURE__*/_jsx(Ico, {})
|
101
|
+
})
|
102
|
+
}, `mui_ico_${m}`);
|
103
|
+
})
|
104
|
+
})]
|
105
|
+
});
|
106
|
+
};
|
107
|
+
export default Icons;
|
@@ -13,6 +13,7 @@ import SaveAsTemplate from "./saveAsTemplate";
|
|
13
13
|
import TextAlign from "./textAlign";
|
14
14
|
import TextOptions from "./textOptions";
|
15
15
|
import SelectBox from "./selectBox";
|
16
|
+
import Icons from "./icons";
|
16
17
|
const FieldMap = {
|
17
18
|
text: Text,
|
18
19
|
bannerSpacing: BannerSpacing,
|
@@ -28,6 +29,7 @@ const FieldMap = {
|
|
28
29
|
saveAsTemplate: SaveAsTemplate,
|
29
30
|
textAlign: TextAlign,
|
30
31
|
textOptions: TextOptions,
|
31
|
-
selectBox: SelectBox
|
32
|
+
selectBox: SelectBox,
|
33
|
+
icons: Icons
|
32
34
|
};
|
33
35
|
export default FieldMap;
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { Button, Grid, Radio, RadioGroup, TextField, FormControl, FormLabel, FormControlLabel, Typography } from "@mui/material";
|
2
|
+
import { Button, Grid, Radio, RadioGroup, TextField, FormControl, FormLabel, FormControlLabel, Typography, Tooltip, IconButton } from "@mui/material";
|
3
|
+
import DeleteIcon from "@mui/icons-material/Delete";
|
3
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
4
5
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
5
6
|
const MenusArray = props => {
|
@@ -60,7 +61,7 @@ const MenusArray = props => {
|
|
60
61
|
variant: "body1",
|
61
62
|
color: "textSecondary",
|
62
63
|
sx: {
|
63
|
-
fontSize:
|
64
|
+
fontSize: "14px"
|
64
65
|
},
|
65
66
|
children: "Menu Variant"
|
66
67
|
})
|
@@ -88,15 +89,18 @@ const MenusArray = props => {
|
|
88
89
|
return /*#__PURE__*/_jsxs(Grid, {
|
89
90
|
item: true,
|
90
91
|
xs: 12,
|
92
|
+
style: {
|
93
|
+
display: "flex",
|
94
|
+
alignItems: "center"
|
95
|
+
},
|
91
96
|
children: [/*#__PURE__*/_jsx(TextField, {
|
92
97
|
name: "text",
|
93
98
|
type: "text",
|
94
99
|
value: m.text,
|
95
100
|
onChange: handleChange(i),
|
96
101
|
size: "small",
|
97
|
-
fullWidth: true,
|
98
102
|
sx: {
|
99
|
-
mb:
|
103
|
+
mb: 0
|
100
104
|
}
|
101
105
|
}), /*#__PURE__*/_jsx(TextField, {
|
102
106
|
name: "url",
|
@@ -105,11 +109,13 @@ const MenusArray = props => {
|
|
105
109
|
onChange: handleChange(i),
|
106
110
|
size: "small",
|
107
111
|
fullWidth: true
|
108
|
-
}), /*#__PURE__*/_jsx(
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
112
|
+
}), /*#__PURE__*/_jsx(Tooltip, {
|
113
|
+
title: "Delete Menu",
|
114
|
+
arrow: true,
|
115
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
116
|
+
onClick: onDelete(i),
|
117
|
+
children: /*#__PURE__*/_jsx(DeleteIcon, {})
|
118
|
+
})
|
113
119
|
})]
|
114
120
|
}, `add-m-${i}`);
|
115
121
|
}), /*#__PURE__*/_jsx(Grid, {
|
@@ -1,19 +1,18 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { Grid, MenuItem, Select } from "@mui/material";
|
2
|
+
import { FormControlLabel, Grid, MenuItem, Select } from "@mui/material";
|
3
3
|
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
4
5
|
const TextOptions = props => {
|
5
6
|
const {
|
7
|
+
value,
|
6
8
|
data,
|
7
|
-
onChange
|
8
|
-
elementProps
|
9
|
+
onChange
|
9
10
|
} = props;
|
10
11
|
const {
|
11
12
|
key,
|
12
|
-
options
|
13
|
+
options,
|
14
|
+
renderOption
|
13
15
|
} = data;
|
14
|
-
const {
|
15
|
-
element: elementType
|
16
|
-
} = elementProps;
|
17
16
|
const handleChange = e => {
|
18
17
|
onChange({
|
19
18
|
[key]: e.target.value
|
@@ -21,25 +20,31 @@ const TextOptions = props => {
|
|
21
20
|
};
|
22
21
|
return /*#__PURE__*/_jsx(Grid, {
|
23
22
|
container: true,
|
24
|
-
children: /*#__PURE__*/
|
23
|
+
children: /*#__PURE__*/_jsxs(Grid, {
|
25
24
|
item: true,
|
26
25
|
xs: 12,
|
27
26
|
style: {
|
28
27
|
padding: "10px"
|
29
28
|
},
|
30
|
-
children: /*#__PURE__*/_jsx(
|
29
|
+
children: [/*#__PURE__*/_jsx("label", {
|
30
|
+
style: {
|
31
|
+
marginBottom: "8px",
|
32
|
+
display: "flex"
|
33
|
+
},
|
34
|
+
children: data?.label
|
35
|
+
}), /*#__PURE__*/_jsx(Select, {
|
31
36
|
onChange: handleChange,
|
32
|
-
value:
|
37
|
+
value: value || options[0]?.value,
|
33
38
|
placeholder: data?.label,
|
34
39
|
fullWidth: true,
|
35
40
|
size: "small",
|
36
41
|
children: options.map(m => {
|
37
42
|
return /*#__PURE__*/_jsx(MenuItem, {
|
38
43
|
value: m.value,
|
39
|
-
children: m.label
|
44
|
+
children: renderOption ? renderOption(m) : m.label || m.text
|
40
45
|
}, `${key}_${m.value}`);
|
41
46
|
})
|
42
|
-
})
|
47
|
+
})]
|
43
48
|
})
|
44
49
|
});
|
45
50
|
};
|
@@ -0,0 +1,93 @@
|
|
1
|
+
import { fontOptions } from "../../utils/font";
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
3
|
+
const formButtonStyle = [{
|
4
|
+
tab: "General",
|
5
|
+
value: "size",
|
6
|
+
fields: [{
|
7
|
+
label: "Button Text",
|
8
|
+
key: "label",
|
9
|
+
type: "text"
|
10
|
+
}, {
|
11
|
+
label: "Font Size",
|
12
|
+
key: "textSize",
|
13
|
+
type: "text",
|
14
|
+
placeholder: "16px or 1em"
|
15
|
+
}, {
|
16
|
+
label: "Font Family",
|
17
|
+
key: "fontFamily",
|
18
|
+
type: "textOptions",
|
19
|
+
options: fontOptions,
|
20
|
+
renderOption: option => {
|
21
|
+
return /*#__PURE__*/_jsx("span", {
|
22
|
+
style: {
|
23
|
+
fontFamily: option.value
|
24
|
+
},
|
25
|
+
children: option.text
|
26
|
+
});
|
27
|
+
}
|
28
|
+
}, {
|
29
|
+
label: "Text Align",
|
30
|
+
key: "textAlign",
|
31
|
+
type: "textAlign",
|
32
|
+
placeholder: "16px or 1em"
|
33
|
+
}]
|
34
|
+
}, {
|
35
|
+
tab: "Position",
|
36
|
+
value: "position",
|
37
|
+
fields: [{
|
38
|
+
label: "Set Postion (Vertical & Horizantal)",
|
39
|
+
key: "alignment",
|
40
|
+
type: "alignment"
|
41
|
+
}]
|
42
|
+
}, {
|
43
|
+
tab: "Margin Spacing",
|
44
|
+
value: "marginSpacing",
|
45
|
+
fields: [{
|
46
|
+
label: "Margin Spacing",
|
47
|
+
key: "marginSpacing",
|
48
|
+
type: "bannerSpacing"
|
49
|
+
}]
|
50
|
+
}, {
|
51
|
+
tab: "Banner Spacing",
|
52
|
+
value: "bannerSpacing",
|
53
|
+
fields: [{
|
54
|
+
label: "Banner Spacing",
|
55
|
+
key: "bannerSpacing",
|
56
|
+
type: "bannerSpacing"
|
57
|
+
}]
|
58
|
+
}, {
|
59
|
+
tab: "Border Radius",
|
60
|
+
value: "borderRadius",
|
61
|
+
fields: [{
|
62
|
+
label: "Border Radius",
|
63
|
+
key: "borderRadius",
|
64
|
+
type: "borderRadius"
|
65
|
+
}]
|
66
|
+
}, {
|
67
|
+
tab: "Colors",
|
68
|
+
value: "colors",
|
69
|
+
fields: [{
|
70
|
+
label: "Text",
|
71
|
+
key: "textColor",
|
72
|
+
type: "color",
|
73
|
+
needPreview: true
|
74
|
+
}, {
|
75
|
+
label: "Background",
|
76
|
+
key: "bgColor",
|
77
|
+
type: "color"
|
78
|
+
}, {
|
79
|
+
label: "Border",
|
80
|
+
key: "borderColor",
|
81
|
+
type: "color"
|
82
|
+
}]
|
83
|
+
}, {
|
84
|
+
tab: "Save As Template",
|
85
|
+
value: "saveAsTemplate",
|
86
|
+
needActions: false,
|
87
|
+
fields: [{
|
88
|
+
label: "Template Image",
|
89
|
+
key: "saveAsTemplate",
|
90
|
+
type: "saveAsTemplate"
|
91
|
+
}]
|
92
|
+
}];
|
93
|
+
export default formButtonStyle;
|
@@ -1,4 +1,13 @@
|
|
1
1
|
const gridStyle = [{
|
2
|
+
tab: "General",
|
3
|
+
value: "general",
|
4
|
+
fields: [{
|
5
|
+
label: "Section ID",
|
6
|
+
key: "id",
|
7
|
+
type: "text",
|
8
|
+
placeholder: "Id should be unique for the page..."
|
9
|
+
}]
|
10
|
+
}, {
|
2
11
|
tab: "Banner Spacing",
|
3
12
|
value: "bannerSpacing",
|
4
13
|
fields: [{
|
@@ -30,7 +30,7 @@ const StyleContent = props => {
|
|
30
30
|
style: {
|
31
31
|
marginTop: "12px"
|
32
32
|
},
|
33
|
-
children: [...fields].map(m => {
|
33
|
+
children: [...fields].map((m, i) => {
|
34
34
|
const FieldComponent = FieldMap[m.type];
|
35
35
|
return FieldComponent ? /*#__PURE__*/_jsx(FieldComponent, {
|
36
36
|
data: m,
|
@@ -39,7 +39,7 @@ const StyleContent = props => {
|
|
39
39
|
elementProps: element,
|
40
40
|
customProps: customProps,
|
41
41
|
handleClose: handleClose
|
42
|
-
}, `ei_stt_tab_${value}_${m.key}`) : null;
|
42
|
+
}, `ei_stt_tab_${value}_${m.key}_${i}`) : null;
|
43
43
|
})
|
44
44
|
})
|
45
45
|
}, value);
|
@@ -7,11 +7,11 @@ const pageSettingsStyle = [{
|
|
7
7
|
type: "color"
|
8
8
|
}, {
|
9
9
|
label: "Background URL",
|
10
|
-
key: "
|
10
|
+
key: "pageBgImage",
|
11
11
|
type: "text"
|
12
12
|
}, {
|
13
13
|
label: "Background Image",
|
14
|
-
key: "
|
14
|
+
key: "pageBgImage",
|
15
15
|
type: "backgroundImage"
|
16
16
|
}, {
|
17
17
|
label: "Background",
|
@@ -1,6 +1,6 @@
|
|
1
|
-
export const formSubmit = async formData => {
|
1
|
+
export const formSubmit = async (formData, props) => {
|
2
2
|
try {
|
3
|
-
const response = await fetch(
|
3
|
+
const response = await fetch(`${props.PAGES_API_HOST}/form/submit`, {
|
4
4
|
method: "POST",
|
5
5
|
headers: {
|
6
6
|
"Content-Type": "application/json"
|
@@ -99,7 +99,7 @@ export const activeMark = (editor, format) => {
|
|
99
99
|
color: "#000000",
|
100
100
|
bgColor: "#FFFFFF",
|
101
101
|
fontSize: "normal",
|
102
|
-
fontFamily: "
|
102
|
+
fontFamily: "PoppinsRegular"
|
103
103
|
};
|
104
104
|
try {
|
105
105
|
const marks = Editor.marks(editor);
|
@@ -166,7 +166,7 @@ export const getMarked = (leaf, children) => {
|
|
166
166
|
});
|
167
167
|
}
|
168
168
|
if (leaf.fontSize) {
|
169
|
-
const size = sizeMap[leaf.fontSize];
|
169
|
+
const size = sizeMap[leaf.fontSize] || leaf.fontSize;
|
170
170
|
children = /*#__PURE__*/_jsx("span", {
|
171
171
|
style: {
|
172
172
|
fontSize: size
|
@@ -1,16 +1,23 @@
|
|
1
|
-
import { useEffect, useState } from
|
2
|
-
import { Editor, Element } from
|
1
|
+
import { useEffect, useState } from "react";
|
2
|
+
import { Editor, Element } from "slate";
|
3
3
|
|
4
4
|
// This hook returns if the node in the current selection matches the format passed to it.
|
5
5
|
const useFormat = (editor, format) => {
|
6
6
|
const [isFormat, setIsFormat] = useState(false);
|
7
|
+
const matchFormat = n => {
|
8
|
+
if (format) {
|
9
|
+
return n.type === format;
|
10
|
+
} else {
|
11
|
+
return true;
|
12
|
+
}
|
13
|
+
};
|
7
14
|
useEffect(() => {
|
8
15
|
if (editor.selection) {
|
9
16
|
// It matches at the editor.selection location by default, so if null handle it seperately.
|
10
17
|
const [node] = Editor.nodes(editor, {
|
11
|
-
match: n => !Editor.isEditor(n) && Element.isElement(n) && n
|
18
|
+
match: n => !Editor.isEditor(n) && Element.isElement(n) && matchFormat(n)
|
12
19
|
});
|
13
|
-
setIsFormat(!!node);
|
20
|
+
setIsFormat(format ? !!node : node);
|
14
21
|
} else {
|
15
22
|
setIsFormat(false);
|
16
23
|
}
|
@@ -5,6 +5,8 @@ export const sizeMap = {
|
|
5
5
|
huge: "40px"
|
6
6
|
};
|
7
7
|
export const fontFamilyMap = {
|
8
|
+
PoppinsRegular: "PoppinsRegular",
|
9
|
+
PoppinsBold: "PoppinsBold",
|
8
10
|
sans: "Helvetica,Arial, sans serif",
|
9
11
|
serif: "Georgia, Times New Roaman,serif",
|
10
12
|
monospace: "Monaco, Courier New,monospace",
|
@@ -29,7 +31,7 @@ export const fontFamilyMap = {
|
|
29
31
|
pinyon: "'Pinyon Script', cursive",
|
30
32
|
muellerhoff: "'Herr Von Muellerhoff', cursive",
|
31
33
|
dawning: "'Dawning of a New Day', cursive",
|
32
|
-
//New Font Added for Type Signature
|
34
|
+
// New Font Added for Type Signature
|
33
35
|
comingsoon: "'Coming Soon', cursive",
|
34
36
|
dancingScript: "'Dancing Script', cursive",
|
35
37
|
engagement: "'Engagement', cursive",
|
@@ -1,13 +1,7 @@
|
|
1
1
|
import { Transforms } from "slate";
|
2
|
-
import
|
2
|
+
import default_grid from "../Elements/Grid/templates/default_grid";
|
3
3
|
export const insertGrid = (editor, item) => {
|
4
|
-
const grid = !item ?
|
5
|
-
type: "grid",
|
6
|
-
grid: "container",
|
7
|
-
children: [{
|
8
|
-
...gridItem()
|
9
|
-
}]
|
10
|
-
} : item;
|
4
|
+
const grid = !item ? JSON.parse(default_grid) : item;
|
11
5
|
const {
|
12
6
|
selection
|
13
7
|
} = editor;
|