@flozy/editor 1.5.9 → 1.6.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +195 -94
- package/dist/Editor/DialogWrapper.js +3 -0
- package/dist/Editor/Editor.css +211 -50
- package/dist/Editor/Elements/Accordion/Accordion.js +0 -1
- package/dist/Editor/Elements/Accordion/AccordionButton.js +13 -12
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +0 -1
- package/dist/Editor/Elements/AppHeader/AppHeader.js +136 -133
- package/dist/Editor/Elements/AppHeader/AppHeaderPopup.js +4 -2
- package/dist/Editor/Elements/Button/ButtonToolIcon.js +10 -9
- package/dist/Editor/Elements/Button/EditorButton.js +8 -24
- package/dist/Editor/Elements/Carousel/Carousel.js +47 -28
- package/dist/Editor/Elements/Carousel/CarouselButton.js +7 -8
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +133 -0
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +49 -58
- package/dist/Editor/Elements/Color Picker/Styles.js +51 -0
- package/dist/Editor/Elements/Color Picker/defaultColors.js +1 -1
- package/dist/Editor/Elements/Embed/Embed.js +35 -126
- package/dist/Editor/Elements/Embed/Image.js +24 -7
- package/dist/Editor/Elements/Embed/Video.js +21 -6
- package/dist/Editor/Elements/Emoji/EmojiButton.js +73 -0
- package/dist/Editor/Elements/Emoji/EmojiPicker.js +0 -0
- package/dist/Editor/Elements/Form/Form.js +24 -13
- package/dist/Editor/Elements/Form/FormButton.js +11 -9
- package/dist/Editor/Elements/Form/FormElements/FormText.js +4 -2
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +3 -2
- package/dist/Editor/Elements/Form/FormField.js +7 -1
- package/dist/Editor/Elements/Grid/Grid.js +143 -47
- package/dist/Editor/Elements/Grid/GridButton.js +52 -29
- package/dist/Editor/Elements/Grid/GridItem.js +32 -21
- package/dist/Editor/Elements/Grid/Styles.js +11 -0
- package/dist/Editor/Elements/InlineIcon/InlineIcon.js +0 -1
- package/dist/Editor/Elements/List/CheckList.js +57 -0
- package/dist/Editor/Elements/List/CheckListButton.js +24 -0
- package/dist/Editor/Elements/NewLine/NewLineButton.js +14 -14
- package/dist/Editor/Elements/PageSettings/PageSettings.js +4 -2
- package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +17 -62
- package/dist/Editor/Elements/PageSettings/PageSettingsPopup.js +1 -1
- package/dist/Editor/Elements/Signature/Signature.js +9 -3
- package/dist/Editor/Elements/Signature/SignatureButton.js +10 -9
- package/dist/Editor/Elements/Signature/SignaturePopup.js +42 -6
- package/dist/Editor/Elements/SimpleText.js +62 -0
- package/dist/Editor/Elements/Table/Styles.js +66 -0
- package/dist/Editor/Elements/Table/Table.js +33 -16
- package/dist/Editor/Elements/Table/TableCell.js +54 -24
- package/dist/Editor/Elements/Table/TableSelector.js +13 -15
- package/dist/Editor/Elements/Table/table.css +0 -10
- package/dist/Editor/Elements/TopBanner/Styles.js +33 -0
- package/dist/Editor/Elements/TopBanner/TopBanner.js +106 -0
- package/dist/Editor/Elements/TopBanner/TopBannerButton.js +47 -0
- package/dist/Editor/Styles/EditorStyles.js +50 -0
- package/dist/Editor/Toolbar/FormatTools/Autocomplete.js +0 -2
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +8 -3
- package/dist/Editor/Toolbar/FormatTools/FontFamilyDropdown.js +63 -0
- package/dist/Editor/Toolbar/FormatTools/FontSize.js +112 -0
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -3
- package/dist/Editor/Toolbar/FormatTools/index.js +4 -1
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +101 -0
- package/dist/Editor/Toolbar/Mini/Options/Options.js +17 -0
- package/dist/Editor/Toolbar/Mini/Styles.js +30 -0
- package/dist/Editor/Toolbar/PopupTool/AddElements.js +32 -0
- package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +115 -0
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +65 -0
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +160 -6
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +263 -80
- package/dist/Editor/Toolbar/PopupTool/index.js +50 -85
- package/dist/Editor/Toolbar/Toolbar.js +189 -129
- package/dist/Editor/Toolbar/styles.css +136 -18
- package/dist/Editor/Toolbar/toolbarGroups.js +94 -34
- package/dist/Editor/assets/svg/AddElementIcon.js +29 -0
- package/dist/Editor/assets/svg/AddTemplateIcon.js +29 -0
- package/dist/Editor/assets/svg/TextIcon.js +29 -0
- package/dist/Editor/common/Icon.js +54 -5
- package/dist/Editor/common/ImageList.js +75 -0
- package/dist/Editor/common/ImageSelector/ImageSelector.js +117 -0
- package/dist/Editor/common/ImageSelector/Options/AddLink.js +44 -0
- package/dist/Editor/common/ImageSelector/Options/ChooseAssets.js +39 -0
- package/dist/Editor/common/ImageSelector/Options/Upload.js +30 -0
- package/dist/Editor/common/ImageSelector/Styles.js +41 -0
- package/dist/Editor/common/ImageUploader.js +94 -0
- package/dist/Editor/common/MentionsPopup/ElementsListCard.js +66 -0
- package/dist/Editor/common/MentionsPopup/MentionsListCard.js +70 -0
- package/dist/Editor/common/MentionsPopup/Styles.js +68 -0
- package/dist/Editor/common/MentionsPopup/index.js +129 -0
- package/dist/Editor/common/Shorthands/elements.js +191 -0
- package/dist/Editor/common/Shorthands/index.js +7 -0
- package/dist/Editor/common/Shorthands/mentions.js +8 -0
- package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +5 -5
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +1 -1
- package/dist/Editor/common/StyleBuilder/embedImageStyle.js +15 -2
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +8 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +2 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +23 -35
- package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +3 -20
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +95 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +14 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +0 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +3 -2
- package/dist/Editor/common/StyleBuilder/index.js +0 -1
- package/dist/Editor/common/StyleBuilder/tableStyle.js +9 -5
- package/dist/Editor/common/ToolbarIcon.js +43 -0
- package/dist/Editor/common/Uploader.js +35 -61
- package/dist/Editor/common/iconslist.js +46 -1
- package/dist/Editor/helper/index.js +0 -1
- package/dist/Editor/hooks/useDrag.js +2 -2
- package/dist/Editor/hooks/useMentions.js +104 -17
- package/dist/Editor/hooks/useMouseMove.js +53 -0
- package/dist/Editor/hooks/useScroll.js +26 -0
- package/dist/Editor/plugins/withEmbeds.js +12 -0
- package/dist/Editor/service/fileupload.js +2 -2
- package/dist/Editor/utils/SlateUtilityFunctions.js +61 -9
- package/dist/Editor/utils/button.js +2 -1
- package/dist/Editor/utils/carousel.js +5 -2
- package/dist/Editor/utils/carouselItem.js +2 -2
- package/dist/Editor/utils/customHooks/useResize.js +2 -3
- package/dist/Editor/utils/customHooks/useTableResize.js +2 -1
- package/dist/Editor/utils/embed.js +25 -8
- package/dist/Editor/utils/emoji.js +8 -0
- package/dist/Editor/utils/events.js +49 -12
- package/dist/Editor/utils/form.js +3 -9
- package/dist/Editor/utils/formfield.js +2 -1
- package/dist/Editor/utils/grid.js +44 -8
- package/dist/Editor/utils/gridItem.js +4 -3
- package/dist/Editor/utils/insertNewLine.js +12 -0
- package/dist/Editor/utils/mentions.js +14 -10
- package/dist/Editor/utils/pageSettings.js +67 -0
- package/dist/Editor/utils/signature.js +6 -8
- package/dist/Editor/utils/table.js +79 -18
- package/dist/Editor/utils/topBanner.js +58 -0
- package/package.json +6 -2
- package/dist/Editor/common/MentionsPopup.js +0 -56
@@ -11,7 +11,7 @@ const appHeaderStyle = [{
|
|
11
11
|
}, {
|
12
12
|
label: "Title Font Size",
|
13
13
|
key: "logoFontSize",
|
14
|
-
type: "
|
14
|
+
type: "fontSize",
|
15
15
|
placeholder: "16px"
|
16
16
|
}, {
|
17
17
|
label: "Title Font Family",
|
@@ -23,11 +23,11 @@ const appHeaderStyle = [{
|
|
23
23
|
style: {
|
24
24
|
fontFamily: option.value
|
25
25
|
},
|
26
|
-
children:
|
26
|
+
children: "LOGO"
|
27
27
|
});
|
28
28
|
}
|
29
29
|
}, {
|
30
|
-
label: "
|
30
|
+
label: "Logo Image URL",
|
31
31
|
key: "appLogo",
|
32
32
|
type: "text"
|
33
33
|
}, {
|
@@ -46,7 +46,7 @@ const appHeaderStyle = [{
|
|
46
46
|
fields: [{
|
47
47
|
label: "Menu Font Size",
|
48
48
|
key: "fontSize",
|
49
|
-
type: "
|
49
|
+
type: "fontSize",
|
50
50
|
placeholder: "16px"
|
51
51
|
}, {
|
52
52
|
label: "Menu Font Family",
|
@@ -58,7 +58,7 @@ const appHeaderStyle = [{
|
|
58
58
|
style: {
|
59
59
|
fontFamily: option.value
|
60
60
|
},
|
61
|
-
children:
|
61
|
+
children: "Home"
|
62
62
|
});
|
63
63
|
}
|
64
64
|
}]
|
@@ -2,12 +2,25 @@ const embedImageStyle = [{
|
|
2
2
|
tab: "URL",
|
3
3
|
value: "url",
|
4
4
|
fields: [{
|
5
|
+
label: "",
|
6
|
+
key: "url",
|
7
|
+
type: "text",
|
8
|
+
placeholder: "Add Image URL here"
|
9
|
+
}, {
|
5
10
|
label: "File",
|
6
11
|
key: "url",
|
7
12
|
type: "backgroundImage"
|
13
|
+
}]
|
14
|
+
}, {
|
15
|
+
tab: "Image List Settings",
|
16
|
+
value: "imageListSettings",
|
17
|
+
fields: [{
|
18
|
+
label: "Image List Columns",
|
19
|
+
key: "cols",
|
20
|
+
type: "text"
|
8
21
|
}, {
|
9
|
-
label: "",
|
10
|
-
key: "
|
22
|
+
label: "Row Height",
|
23
|
+
key: "rowHeight",
|
11
24
|
type: "text"
|
12
25
|
}]
|
13
26
|
}, {
|
@@ -6,5 +6,13 @@ const embedVideoStyle = [{
|
|
6
6
|
key: "url",
|
7
7
|
type: "text"
|
8
8
|
}]
|
9
|
+
}, {
|
10
|
+
tab: "Position",
|
11
|
+
value: "position",
|
12
|
+
fields: [{
|
13
|
+
label: "Set Postion (Vertical & Horizantal)",
|
14
|
+
key: "alignment",
|
15
|
+
type: "alignment"
|
16
|
+
}]
|
9
17
|
}];
|
10
18
|
export default embedVideoStyle;
|
@@ -21,7 +21,6 @@ const Alignment = props => {
|
|
21
21
|
});
|
22
22
|
};
|
23
23
|
const flexDirection = value?.flexDirection || "row";
|
24
|
-
console.log(flexDirection);
|
25
24
|
return /*#__PURE__*/_jsxs(Grid, {
|
26
25
|
container: true,
|
27
26
|
style: {
|
@@ -127,11 +126,11 @@ const Alignment = props => {
|
|
127
126
|
children: [/*#__PURE__*/_jsx(FormControlLabel, {
|
128
127
|
value: "row",
|
129
128
|
control: /*#__PURE__*/_jsx(Radio, {}),
|
130
|
-
label: /*#__PURE__*/_jsx(
|
129
|
+
label: /*#__PURE__*/_jsx(DirectionColumIcon, {})
|
131
130
|
}), /*#__PURE__*/_jsx(FormControlLabel, {
|
132
131
|
value: "column",
|
133
132
|
control: /*#__PURE__*/_jsx(Radio, {}),
|
134
|
-
label: /*#__PURE__*/_jsx(
|
133
|
+
label: /*#__PURE__*/_jsx(DirectionRowIcon, {})
|
135
134
|
}), /*#__PURE__*/_jsx(FormControlLabel, {
|
136
135
|
value: "row-reverse",
|
137
136
|
control: /*#__PURE__*/_jsx(Radio, {}),
|
@@ -1,9 +1,7 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
2
|
import { Grid, Button, Typography } from "@mui/material";
|
3
|
-
// import CloudUploadIcon from "@mui/icons-material/CloudUpload";
|
4
|
-
import { convertBase64 } from "../../../utils/helper";
|
5
|
-
import { uploadFile } from "../../../service/fileupload";
|
6
3
|
import { UploadBtnIcon } from "../../iconslist";
|
4
|
+
import ImageSelector from "../../ImageSelector/ImageSelector";
|
7
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
8
6
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
9
7
|
const BackgroundImage = props => {
|
@@ -17,38 +15,29 @@ const BackgroundImage = props => {
|
|
17
15
|
key
|
18
16
|
} = data;
|
19
17
|
const [base64, setBase64] = useState(value);
|
20
|
-
const [
|
21
|
-
const handleChange = async e => {
|
22
|
-
const file = e.target.files[0];
|
23
|
-
const strImage = await convertBase64(file);
|
24
|
-
setBase64(strImage);
|
25
|
-
doUpload(strImage);
|
26
|
-
};
|
27
|
-
const doUpload = async strImage => {
|
28
|
-
setUploading(true);
|
29
|
-
const result = await uploadFile({
|
30
|
-
image: strImage
|
31
|
-
}, customProps);
|
32
|
-
setUploading(false);
|
33
|
-
if (result && result?.imageURL) {
|
34
|
-
onChange({
|
35
|
-
[key]: result?.imageURL
|
36
|
-
});
|
37
|
-
}
|
38
|
-
};
|
18
|
+
const [open, setOpen] = useState(false);
|
39
19
|
const onRemoveBG = () => {
|
40
20
|
setBase64(null);
|
41
21
|
onChange({
|
42
22
|
[key]: "none"
|
43
23
|
});
|
44
24
|
};
|
25
|
+
const handleClick = () => {
|
26
|
+
setOpen(true);
|
27
|
+
};
|
28
|
+
const handleClose = () => {
|
29
|
+
setOpen(false);
|
30
|
+
};
|
31
|
+
const onSelectImage = img => {
|
32
|
+
setBase64(img);
|
33
|
+
onChange({
|
34
|
+
[key]: img
|
35
|
+
});
|
36
|
+
handleClose();
|
37
|
+
};
|
45
38
|
return /*#__PURE__*/_jsxs(Grid, {
|
46
39
|
container: true,
|
47
|
-
children: [/*#__PURE__*/_jsx(
|
48
|
-
item: true,
|
49
|
-
xs: 12,
|
50
|
-
children: uploading ? "Uploading..." : ""
|
51
|
-
}), /*#__PURE__*/_jsx(Typography, {
|
40
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
52
41
|
variant: "body1",
|
53
42
|
color: "primary",
|
54
43
|
sx: {
|
@@ -87,14 +76,8 @@ const BackgroundImage = props => {
|
|
87
76
|
style: {
|
88
77
|
background: "none"
|
89
78
|
},
|
90
|
-
|
91
|
-
|
92
|
-
style: {
|
93
|
-
opacity: 0,
|
94
|
-
width: "0px"
|
95
|
-
},
|
96
|
-
onChange: handleChange
|
97
|
-
}), /*#__PURE__*/_jsx(UploadBtnIcon, {}), /*#__PURE__*/_jsx("span", {
|
79
|
+
onClick: handleClick,
|
80
|
+
children: [/*#__PURE__*/_jsx(UploadBtnIcon, {}), /*#__PURE__*/_jsx("span", {
|
98
81
|
style: {
|
99
82
|
paddingLeft: "8px"
|
100
83
|
},
|
@@ -103,6 +86,11 @@ const BackgroundImage = props => {
|
|
103
86
|
})
|
104
87
|
})
|
105
88
|
})
|
89
|
+
}), /*#__PURE__*/_jsx(ImageSelector, {
|
90
|
+
open: open,
|
91
|
+
onClose: handleClose,
|
92
|
+
customProps: customProps,
|
93
|
+
onSelectImage: onSelectImage
|
106
94
|
})]
|
107
95
|
});
|
108
96
|
};
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { FormControl, RadioGroup, FormControlLabel, Grid, Radio, TextField,
|
2
|
+
import { FormControl, RadioGroup, FormControlLabel, Grid, Radio, TextField, Typography } from "@mui/material";
|
3
3
|
import { jsx as _jsx } from "react/jsx-runtime";
|
4
4
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
5
5
|
const ButtonLink = props => {
|
@@ -27,12 +27,10 @@ const ButtonLink = props => {
|
|
27
27
|
actionTrigger
|
28
28
|
} = buttonLink || {};
|
29
29
|
const {
|
30
|
-
options,
|
31
30
|
onClick
|
32
31
|
} = actionTrigger || {
|
33
32
|
options: []
|
34
33
|
};
|
35
|
-
const optSelected = options.filter(f => f.selected) || [];
|
36
34
|
const handleChange = e => {
|
37
35
|
onChange({
|
38
36
|
[key]: {
|
@@ -61,22 +59,7 @@ const ButtonLink = props => {
|
|
61
59
|
})
|
62
60
|
});
|
63
61
|
} else if (value?.linkType === "actionTrigger") {
|
64
|
-
return
|
65
|
-
item: true,
|
66
|
-
xs: 12,
|
67
|
-
children: /*#__PURE__*/_jsx(Select, {
|
68
|
-
name: "actionStep",
|
69
|
-
size: "small",
|
70
|
-
fullWidth: true,
|
71
|
-
value: optSelected[0]?.value || "",
|
72
|
-
children: optSelected.map(m => {
|
73
|
-
return /*#__PURE__*/_jsx(MenuItem, {
|
74
|
-
value: m.value,
|
75
|
-
children: m.label
|
76
|
-
}, `bl_tr_opt_${m.value}`);
|
77
|
-
})
|
78
|
-
})
|
79
|
-
});
|
62
|
+
return null;
|
80
63
|
}
|
81
64
|
};
|
82
65
|
return /*#__PURE__*/_jsxs(Grid, {
|
@@ -110,7 +93,7 @@ const ButtonLink = props => {
|
|
110
93
|
style: {
|
111
94
|
fontSize: "14px"
|
112
95
|
},
|
113
|
-
children: "
|
96
|
+
children: "Next Step"
|
114
97
|
})
|
115
98
|
}), /*#__PURE__*/_jsx(FormControlLabel, {
|
116
99
|
value: "webAddress",
|
@@ -0,0 +1,95 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { TextField, IconButton, Grid, Typography } from "@mui/material";
|
3
|
+
import { sizeMap } from "../../../utils/font.js";
|
4
|
+
import { TextMinusIcon, TextPlusIcon } from "../../../common/iconslist.js";
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
6
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
7
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
8
|
+
const FontSize = props => {
|
9
|
+
const {
|
10
|
+
value,
|
11
|
+
data,
|
12
|
+
onChange
|
13
|
+
} = props;
|
14
|
+
const {
|
15
|
+
key
|
16
|
+
} = data;
|
17
|
+
const handleChange = e => {
|
18
|
+
let inc = parseInt(e.target.value) || 16;
|
19
|
+
inc = inc > 200 ? 200 : inc;
|
20
|
+
onChange({
|
21
|
+
[key]: inc
|
22
|
+
});
|
23
|
+
};
|
24
|
+
const getSizeVal = () => {
|
25
|
+
try {
|
26
|
+
const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
|
27
|
+
return parseInt(size || 16);
|
28
|
+
} catch (err) {
|
29
|
+
return "";
|
30
|
+
}
|
31
|
+
};
|
32
|
+
const combinedOldVal = getSizeVal();
|
33
|
+
const onIncreaseSize = () => {
|
34
|
+
let inc = (combinedOldVal || 0) + 1;
|
35
|
+
inc = inc > 200 ? 200 : inc;
|
36
|
+
onChange({
|
37
|
+
[key]: inc
|
38
|
+
});
|
39
|
+
};
|
40
|
+
const onDecreaseSize = () => {
|
41
|
+
onChange({
|
42
|
+
[key]: combinedOldVal - 1 || 0
|
43
|
+
});
|
44
|
+
};
|
45
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
46
|
+
children: [/*#__PURE__*/_jsx(Grid, {
|
47
|
+
item: true,
|
48
|
+
xs: 12,
|
49
|
+
style: {
|
50
|
+
marginBottom: "5px"
|
51
|
+
},
|
52
|
+
children: /*#__PURE__*/_jsx(Typography, {
|
53
|
+
variant: "body1",
|
54
|
+
color: "primary",
|
55
|
+
sx: {
|
56
|
+
fontSize: "14px",
|
57
|
+
fontWeight: "500"
|
58
|
+
},
|
59
|
+
children: data?.label
|
60
|
+
})
|
61
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
62
|
+
item: true,
|
63
|
+
xs: 12,
|
64
|
+
style: {
|
65
|
+
marginBottom: "16px"
|
66
|
+
},
|
67
|
+
children: /*#__PURE__*/_jsx(TextField, {
|
68
|
+
value: combinedOldVal,
|
69
|
+
onChange: handleChange,
|
70
|
+
size: "small",
|
71
|
+
inputProps: {
|
72
|
+
style: {
|
73
|
+
width: "30px",
|
74
|
+
textAlign: "center"
|
75
|
+
}
|
76
|
+
},
|
77
|
+
InputProps: {
|
78
|
+
endAdornment: /*#__PURE__*/_jsxs("div", {
|
79
|
+
className: "textFontArrows",
|
80
|
+
children: [/*#__PURE__*/_jsx(IconButton, {
|
81
|
+
onClick: onIncreaseSize,
|
82
|
+
size: "small",
|
83
|
+
children: /*#__PURE__*/_jsx(TextPlusIcon, {})
|
84
|
+
}), /*#__PURE__*/_jsx(IconButton, {
|
85
|
+
onClick: onDecreaseSize,
|
86
|
+
size: "small",
|
87
|
+
children: /*#__PURE__*/_jsx(TextMinusIcon, {})
|
88
|
+
})]
|
89
|
+
})
|
90
|
+
}
|
91
|
+
})
|
92
|
+
})]
|
93
|
+
});
|
94
|
+
};
|
95
|
+
export default FontSize;
|
@@ -50,6 +50,11 @@ const Icons = props => {
|
|
50
50
|
setList(MUIIcons.filled.slice(0, 90));
|
51
51
|
}
|
52
52
|
};
|
53
|
+
const onRemoveIcon = () => {
|
54
|
+
onChange({
|
55
|
+
[key]: null
|
56
|
+
});
|
57
|
+
};
|
53
58
|
const SelectedIcon = value ? fIcons[value] : null;
|
54
59
|
return /*#__PURE__*/_jsxs(Grid, {
|
55
60
|
container: true,
|
@@ -80,9 +85,16 @@ const Icons = props => {
|
|
80
85
|
xs: 2,
|
81
86
|
className: "selctedBtnIcon",
|
82
87
|
style: {
|
83
|
-
|
88
|
+
padding: "4px"
|
84
89
|
},
|
85
|
-
children: SelectedIcon
|
90
|
+
children: SelectedIcon ? /*#__PURE__*/_jsx(Tooltip, {
|
91
|
+
title: "Click to Remove",
|
92
|
+
arrow: true,
|
93
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
94
|
+
onClick: onRemoveIcon,
|
95
|
+
children: /*#__PURE__*/_jsx(SelectedIcon, {})
|
96
|
+
})
|
97
|
+
}) : ""
|
86
98
|
})]
|
87
99
|
})
|
88
100
|
}), /*#__PURE__*/_jsx(Grid, {
|
@@ -14,6 +14,7 @@ import TextAlign from "./textAlign";
|
|
14
14
|
import TextOptions from "./textOptions";
|
15
15
|
import SelectBox from "./selectBox";
|
16
16
|
import Icons from "./icons";
|
17
|
+
import FontSize from "./fontSize";
|
17
18
|
const FieldMap = {
|
18
19
|
text: Text,
|
19
20
|
bannerSpacing: BannerSpacing,
|
@@ -30,6 +31,7 @@ const FieldMap = {
|
|
30
31
|
textAlign: TextAlign,
|
31
32
|
textOptions: TextOptions,
|
32
33
|
selectBox: SelectBox,
|
33
|
-
icons: Icons
|
34
|
+
icons: Icons,
|
35
|
+
fontSize: FontSize
|
34
36
|
};
|
35
37
|
export default FieldMap;
|
@@ -7,7 +7,8 @@ const TextOptions = props => {
|
|
7
7
|
const {
|
8
8
|
value,
|
9
9
|
data,
|
10
|
-
onChange
|
10
|
+
onChange,
|
11
|
+
elementProps
|
11
12
|
} = props;
|
12
13
|
const {
|
13
14
|
key,
|
@@ -47,7 +48,7 @@ const TextOptions = props => {
|
|
47
48
|
children: options.map(m => {
|
48
49
|
return /*#__PURE__*/_jsx(MenuItem, {
|
49
50
|
value: m.value,
|
50
|
-
children: renderOption ? renderOption(m) : m.label || m.text
|
51
|
+
children: renderOption ? renderOption(m, elementProps) : m.label || m.text
|
51
52
|
}, `${key}_${m.value}`);
|
52
53
|
})
|
53
54
|
})]
|
@@ -6,7 +6,7 @@ const tableStyle = [{
|
|
6
6
|
key: "table.bgColor",
|
7
7
|
type: "color"
|
8
8
|
}, {
|
9
|
-
label: "Border",
|
9
|
+
label: "Cell Border",
|
10
10
|
key: "table.borderColor",
|
11
11
|
type: "color"
|
12
12
|
}]
|
@@ -14,11 +14,11 @@ const tableStyle = [{
|
|
14
14
|
tab: "Row",
|
15
15
|
value: "rowSettings",
|
16
16
|
fields: [{
|
17
|
-
label: "Background",
|
17
|
+
label: "Row Background",
|
18
18
|
key: "row.bgColor",
|
19
19
|
type: "color"
|
20
20
|
}, {
|
21
|
-
label: "Border",
|
21
|
+
label: "Row Border",
|
22
22
|
key: "row.borderColor",
|
23
23
|
type: "color"
|
24
24
|
}]
|
@@ -26,11 +26,15 @@ const tableStyle = [{
|
|
26
26
|
tab: "Column",
|
27
27
|
value: "columnSettings",
|
28
28
|
fields: [{
|
29
|
-
label: "Background",
|
29
|
+
label: "Entire Column Background",
|
30
|
+
key: "col.entireBgColor",
|
31
|
+
type: "color"
|
32
|
+
}, {
|
33
|
+
label: "Selected Column Background",
|
30
34
|
key: "col.bgColor",
|
31
35
|
type: "color"
|
32
36
|
}, {
|
33
|
-
label: "Border",
|
37
|
+
label: "Selected Cell Border Color",
|
34
38
|
key: "col.borderColor",
|
35
39
|
type: "color"
|
36
40
|
}]
|
@@ -0,0 +1,43 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { Tooltip, IconButton } from "@mui/material";
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
5
|
+
const ToolbarIcon = props => {
|
6
|
+
const {
|
7
|
+
title,
|
8
|
+
className,
|
9
|
+
onClick,
|
10
|
+
icon,
|
11
|
+
style,
|
12
|
+
icoBtnType
|
13
|
+
} = props;
|
14
|
+
const renderIconText = () => {
|
15
|
+
if (icoBtnType === "mini") {
|
16
|
+
return /*#__PURE__*/_jsx("span", {
|
17
|
+
children: title
|
18
|
+
});
|
19
|
+
} else if (icoBtnType === "cmd") {
|
20
|
+
return /*#__PURE__*/_jsx("span", {
|
21
|
+
children: title
|
22
|
+
});
|
23
|
+
}
|
24
|
+
return null;
|
25
|
+
};
|
26
|
+
return /*#__PURE__*/_jsx(Tooltip, {
|
27
|
+
title: title,
|
28
|
+
arrow: true,
|
29
|
+
children: /*#__PURE__*/_jsxs(IconButton, {
|
30
|
+
className: `${className} ${icoBtnType}`,
|
31
|
+
onClick: onClick,
|
32
|
+
style: style,
|
33
|
+
children: [icon, renderIconText()]
|
34
|
+
})
|
35
|
+
});
|
36
|
+
};
|
37
|
+
ToolbarIcon.defaultProps = {
|
38
|
+
title: "",
|
39
|
+
style: {},
|
40
|
+
className: "",
|
41
|
+
onClick: () => {}
|
42
|
+
};
|
43
|
+
export default ToolbarIcon;
|
@@ -1,6 +1,5 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
|
-
import { Grid, Button
|
3
|
-
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
|
2
|
+
import { Grid, Button } from "@mui/material";
|
4
3
|
import { convertBase64 } from "../utils/helper";
|
5
4
|
import { uploadFile } from "../service/fileupload";
|
6
5
|
import { UploadBtnIcon } from "./iconslist";
|
@@ -11,25 +10,27 @@ const Uploader = props => {
|
|
11
10
|
value,
|
12
11
|
data,
|
13
12
|
onUploaded,
|
14
|
-
customProps
|
15
|
-
disableUpload = false
|
13
|
+
customProps
|
16
14
|
} = props;
|
17
15
|
const {
|
18
16
|
key
|
19
17
|
} = data;
|
20
|
-
const [base64, setBase64] = useState(value);
|
18
|
+
const [base64, setBase64] = useState(value?.url);
|
21
19
|
const [uploading, setUploading] = useState(false);
|
22
20
|
const handleChange = async e => {
|
23
|
-
const
|
24
|
-
const strImage = await convertBase64(
|
21
|
+
const uFile = e.target.files[0];
|
22
|
+
const strImage = await convertBase64(uFile);
|
25
23
|
setBase64(strImage);
|
26
|
-
doUpload(strImage);
|
24
|
+
doUpload(strImage, e.target.files[0]);
|
27
25
|
};
|
28
|
-
const doUpload = async strImage => {
|
26
|
+
const doUpload = async (strImage, file) => {
|
29
27
|
setUploading(true);
|
30
|
-
const
|
31
|
-
|
32
|
-
|
28
|
+
const formData = new FormData();
|
29
|
+
// formData.set("image", strImage);
|
30
|
+
formData.set("file", file);
|
31
|
+
formData.set("resource_type", "pages");
|
32
|
+
formData.set("resource_id", customProps?.page_id);
|
33
|
+
const result = await uploadFile(formData, customProps);
|
33
34
|
setUploading(false);
|
34
35
|
if (result && result?.imageURL) {
|
35
36
|
onUploaded({
|
@@ -52,18 +53,10 @@ const Uploader = props => {
|
|
52
53
|
item: true,
|
53
54
|
xs: 12,
|
54
55
|
children: uploading ? "Uploading..." : ""
|
55
|
-
}), /*#__PURE__*/_jsx(Typography, {
|
56
|
-
variant: "body1",
|
57
|
-
color: "primary",
|
58
|
-
sx: {
|
59
|
-
fontSize: "14px",
|
60
|
-
fontWeight: "500",
|
61
|
-
marginBottom: "5px"
|
62
|
-
},
|
63
|
-
children: "Upload Image"
|
64
56
|
}), /*#__PURE__*/_jsx(Grid, {
|
65
57
|
item: true,
|
66
58
|
xs: 12,
|
59
|
+
className: "btn--wrpr",
|
67
60
|
style: {
|
68
61
|
marginTop: "12px",
|
69
62
|
width: "100%",
|
@@ -76,55 +69,36 @@ const Uploader = props => {
|
|
76
69
|
backgroundColor: "rgba(0,0,0,0.5)",
|
77
70
|
borderRadius: "10px"
|
78
71
|
},
|
79
|
-
children: /*#__PURE__*/_jsx(Grid, {
|
72
|
+
children: !uploading ? /*#__PURE__*/_jsx(Grid, {
|
80
73
|
className: "uploadImageSection",
|
81
74
|
children: base64 ? /*#__PURE__*/_jsx(Grid, {
|
82
75
|
className: "removeImageText",
|
83
76
|
onClick: onRemoveBG,
|
84
77
|
children: "REMOVE"
|
85
|
-
}) : /*#__PURE__*/
|
78
|
+
}) : /*#__PURE__*/_jsx(Grid, {
|
86
79
|
className: "uploadImageText",
|
87
|
-
|
88
|
-
|
80
|
+
children: /*#__PURE__*/_jsxs(Button, {
|
81
|
+
component: "label",
|
82
|
+
variant: "contained",
|
89
83
|
style: {
|
90
|
-
|
84
|
+
background: "none"
|
91
85
|
},
|
92
|
-
children: "
|
93
|
-
|
86
|
+
children: [/*#__PURE__*/_jsx("input", {
|
87
|
+
type: "file",
|
88
|
+
style: {
|
89
|
+
opacity: 0,
|
90
|
+
width: "0px"
|
91
|
+
},
|
92
|
+
onChange: handleChange
|
93
|
+
}), /*#__PURE__*/_jsx(UploadBtnIcon, {}), /*#__PURE__*/_jsx("span", {
|
94
|
+
style: {
|
95
|
+
paddingLeft: "8px"
|
96
|
+
},
|
97
|
+
children: "UPLOAD"
|
98
|
+
})]
|
99
|
+
})
|
94
100
|
})
|
95
|
-
})
|
96
|
-
}), /*#__PURE__*/_jsx(Grid, {
|
97
|
-
item: true,
|
98
|
-
xs: 12,
|
99
|
-
sx: {
|
100
|
-
paddingTop: "20px"
|
101
|
-
},
|
102
|
-
children: /*#__PURE__*/_jsxs(Grid, {
|
103
|
-
container: true,
|
104
|
-
justifyContent: "space-between",
|
105
|
-
children: [!disableUpload ? /*#__PURE__*/_jsxs(Button, {
|
106
|
-
component: "label",
|
107
|
-
sx: {
|
108
|
-
display: "inline-flex",
|
109
|
-
width: "154px",
|
110
|
-
whiteSpace: "nowrap"
|
111
|
-
},
|
112
|
-
variant: "contained",
|
113
|
-
startIcon: /*#__PURE__*/_jsx(CloudUploadIcon, {}),
|
114
|
-
children: ["Upload file", /*#__PURE__*/_jsx("input", {
|
115
|
-
type: "file",
|
116
|
-
style: {
|
117
|
-
opacity: 0
|
118
|
-
},
|
119
|
-
onChange: handleChange
|
120
|
-
})]
|
121
|
-
}) : null, base64 ? /*#__PURE__*/_jsx(Button, {
|
122
|
-
variant: "contained",
|
123
|
-
color: "secondary",
|
124
|
-
onClick: onRemoveBG,
|
125
|
-
children: "Clear"
|
126
|
-
}) : ""]
|
127
|
-
})
|
101
|
+
}) : null
|
128
102
|
})]
|
129
103
|
});
|
130
104
|
};
|