@flozy/editor 1.3.3 → 1.3.5
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +3 -2
- package/dist/Editor/Editor.css +358 -316
- package/dist/Editor/Elements/Accordion/Accordion.js +31 -9
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +17 -5
- package/dist/Editor/Elements/AppHeader/AppHeader.js +2 -1
- package/dist/Editor/Elements/Button/EditorButton.js +8 -2
- package/dist/Editor/Elements/Carousel/Carousel.js +38 -18
- package/dist/Editor/Elements/Embed/Video.js +3 -4
- package/dist/Editor/Elements/Grid/Grid.js +10 -3
- package/dist/Editor/Elements/Grid/GridButton.js +29 -7
- package/dist/Editor/Elements/Grid/GridItem.js +11 -4
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +14 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +28 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +13 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +4 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/textAlign.js +60 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +2 -1
- package/dist/Editor/utils/grid.js +0 -1
- package/package.json +1 -1
@@ -5,7 +5,8 @@ import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
|
|
5
5
|
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
|
6
6
|
import SettingsIcon from "@mui/icons-material/Settings";
|
7
7
|
import AccordionBtnPopup from "./AccordionBtnPopup";
|
8
|
-
import { IconButton } from "@mui/material";
|
8
|
+
import { IconButton, Tooltip } from "@mui/material";
|
9
|
+
import DeleteIcon from "@mui/icons-material/Delete";
|
9
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
10
11
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
11
12
|
const Accordion = props => {
|
@@ -15,6 +16,9 @@ const Accordion = props => {
|
|
15
16
|
element,
|
16
17
|
customProps
|
17
18
|
} = props;
|
19
|
+
const {
|
20
|
+
readOnly
|
21
|
+
} = customProps;
|
18
22
|
const [toggle, setToggle] = useState(false);
|
19
23
|
const [openSetttings, setOpenSettings] = useState(false);
|
20
24
|
const editor = useSlateStatic();
|
@@ -29,24 +33,42 @@ const Accordion = props => {
|
|
29
33
|
setToggle(!toggle);
|
30
34
|
};
|
31
35
|
const ToolBar = () => {
|
32
|
-
return selected ? /*#__PURE__*/
|
33
|
-
className: "
|
36
|
+
return selected ? /*#__PURE__*/_jsxs("div", {
|
37
|
+
className: "element-toolbar hr",
|
34
38
|
contentEditable: false,
|
35
39
|
style: {
|
40
|
+
top: "-42px",
|
36
41
|
left: "0px",
|
37
42
|
display: "flex",
|
38
43
|
width: "fit-content"
|
39
44
|
},
|
40
|
-
children: /*#__PURE__*/_jsx(
|
41
|
-
|
42
|
-
|
43
|
-
children: /*#__PURE__*/_jsx(
|
44
|
-
|
45
|
+
children: [/*#__PURE__*/_jsx(Tooltip, {
|
46
|
+
title: "Settings",
|
47
|
+
arrow: true,
|
48
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
49
|
+
size: "small",
|
50
|
+
onClick: onSettings,
|
51
|
+
children: /*#__PURE__*/_jsx(SettingsIcon, {})
|
52
|
+
})
|
53
|
+
}), /*#__PURE__*/_jsx(Tooltip, {
|
54
|
+
title: "Delete",
|
55
|
+
arrow: true,
|
56
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
57
|
+
size: "small",
|
58
|
+
onClick: onDelete,
|
59
|
+
children: /*#__PURE__*/_jsx(DeleteIcon, {})
|
60
|
+
})
|
61
|
+
})]
|
45
62
|
}) : null;
|
46
63
|
};
|
47
64
|
const onSettings = () => {
|
48
65
|
setOpenSettings(true);
|
49
66
|
};
|
67
|
+
const onDelete = () => {
|
68
|
+
Transforms.removeNodes(editor, {
|
69
|
+
at: path
|
70
|
+
});
|
71
|
+
};
|
50
72
|
const onSave = data => {
|
51
73
|
const updateData = {
|
52
74
|
...data
|
@@ -89,7 +111,7 @@ const Accordion = props => {
|
|
89
111
|
display: toggle ? "block" : "none"
|
90
112
|
},
|
91
113
|
children: children[1]
|
92
|
-
}), /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionBtnPopup, {
|
114
|
+
}), !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionBtnPopup, {
|
93
115
|
element: element,
|
94
116
|
onSave: onSave,
|
95
117
|
onClose: onClose,
|
@@ -2,6 +2,8 @@ import React, { useState } from "react";
|
|
2
2
|
import { Transforms } from "slate";
|
3
3
|
import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
|
4
4
|
import AccordionTitlePopup from "./AccordionTitlePopup";
|
5
|
+
import { IconButton, Tooltip } from "@mui/material";
|
6
|
+
import SettingsIcon from "@mui/icons-material/Settings";
|
5
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
7
9
|
const AccordionSummary = props => {
|
@@ -11,6 +13,9 @@ const AccordionSummary = props => {
|
|
11
13
|
element,
|
12
14
|
customProps
|
13
15
|
} = props;
|
16
|
+
const {
|
17
|
+
readOnly
|
18
|
+
} = customProps;
|
14
19
|
const [openSetttings, setOpenSettings] = useState(false);
|
15
20
|
const editor = useSlateStatic();
|
16
21
|
const selected = useSelected();
|
@@ -22,11 +27,18 @@ const AccordionSummary = props => {
|
|
22
27
|
} = element;
|
23
28
|
const ToolBar = () => {
|
24
29
|
return selected ? /*#__PURE__*/_jsx("div", {
|
25
|
-
className: "
|
30
|
+
className: "element-toolbar hr",
|
26
31
|
contentEditable: false,
|
27
|
-
|
28
|
-
|
29
|
-
|
32
|
+
style: {
|
33
|
+
top: "-42px"
|
34
|
+
},
|
35
|
+
children: /*#__PURE__*/_jsx(Tooltip, {
|
36
|
+
title: "Settings",
|
37
|
+
arrow: true,
|
38
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
39
|
+
onClick: onSettings,
|
40
|
+
children: /*#__PURE__*/_jsx(SettingsIcon, {})
|
41
|
+
})
|
30
42
|
})
|
31
43
|
}) : null;
|
32
44
|
};
|
@@ -58,7 +70,7 @@ const AccordionSummary = props => {
|
|
58
70
|
border: `1px solid ${borderColor}`,
|
59
71
|
color: textColor
|
60
72
|
},
|
61
|
-
children: [children, /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionTitlePopup, {
|
73
|
+
children: [children, !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionTitlePopup, {
|
62
74
|
element: element,
|
63
75
|
onSave: onSave,
|
64
76
|
onClose: onClose,
|
@@ -129,7 +129,8 @@ function AppHeader(props) {
|
|
129
129
|
component: "nav",
|
130
130
|
style: {
|
131
131
|
position: "relative",
|
132
|
-
background: bgColor
|
132
|
+
background: bgColor,
|
133
|
+
boxShadow: "none"
|
133
134
|
},
|
134
135
|
children: /*#__PURE__*/_jsxs(Toolbar, {
|
135
136
|
children: [/*#__PURE__*/_jsx(IconButton, {
|
@@ -28,7 +28,9 @@ const EditorButton = props => {
|
|
28
28
|
textColor,
|
29
29
|
url,
|
30
30
|
borderColor,
|
31
|
-
buttonLink
|
31
|
+
buttonLink,
|
32
|
+
textSize,
|
33
|
+
textAlign
|
32
34
|
} = element;
|
33
35
|
const {
|
34
36
|
linkType,
|
@@ -117,6 +119,9 @@ const EditorButton = props => {
|
|
117
119
|
...attributes,
|
118
120
|
children: [/*#__PURE__*/_jsx("div", {
|
119
121
|
className: "editor-btn-wrapper-inner",
|
122
|
+
style: {
|
123
|
+
textAlign: textAlign || "left"
|
124
|
+
},
|
120
125
|
children: /*#__PURE__*/_jsx("button", {
|
121
126
|
contentEditable: false,
|
122
127
|
className: "editor-btn",
|
@@ -130,7 +135,8 @@ const EditorButton = props => {
|
|
130
135
|
paddingRight: `${right || 8}px`,
|
131
136
|
paddingTop: `${top || 8}px`,
|
132
137
|
paddingBottom: `${bottom || 8}px`,
|
133
|
-
color: `${textColor || "#FFFFFF"}
|
138
|
+
color: `${textColor || "#FFFFFF"}`,
|
139
|
+
fontSize: textSize || "inherit"
|
134
140
|
},
|
135
141
|
onClick: onClick,
|
136
142
|
children: label || "My Button"
|
@@ -6,8 +6,13 @@ import "./slick-theme.min.css";
|
|
6
6
|
import "./slick.min.css";
|
7
7
|
import { PrevArrow, NextArrow } from "./Arrows";
|
8
8
|
import { carouselItem } from "../../utils/carouselItem";
|
9
|
+
import { IconButton, Tooltip } from "@mui/material";
|
10
|
+
import EditIcon from "@mui/icons-material/Edit";
|
11
|
+
import AddIcon from "@mui/icons-material/Add";
|
12
|
+
import DeleteIcon from "@mui/icons-material/Delete";
|
9
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
10
14
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
15
|
+
import { createElement as _createElement } from "react";
|
11
16
|
const Empty = ({
|
12
17
|
children
|
13
18
|
}) => {
|
@@ -29,7 +34,6 @@ const Carousel = props => {
|
|
29
34
|
const editor = useSlateStatic();
|
30
35
|
const selected = useSelected();
|
31
36
|
const [edit, setEdit] = useState(false);
|
32
|
-
const [reload, setReload] = useState(new Date().getTime());
|
33
37
|
const settings = {
|
34
38
|
dots: true,
|
35
39
|
infinite: true,
|
@@ -56,9 +60,6 @@ const Carousel = props => {
|
|
56
60
|
};
|
57
61
|
const onEdit = () => {
|
58
62
|
setEdit(!edit);
|
59
|
-
if (edit) {
|
60
|
-
setReload(new Date().getTime());
|
61
|
-
}
|
62
63
|
};
|
63
64
|
const onDelete = () => {
|
64
65
|
const path = ReactEditor.findPath(editor, element);
|
@@ -68,17 +69,32 @@ const Carousel = props => {
|
|
68
69
|
};
|
69
70
|
const ToolBar = () => {
|
70
71
|
return selected ? /*#__PURE__*/_jsxs("div", {
|
71
|
-
className: "
|
72
|
+
className: "element-toolbar hr",
|
72
73
|
contentEditable: false,
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
74
|
+
style: {
|
75
|
+
top: "-42px"
|
76
|
+
},
|
77
|
+
children: [/*#__PURE__*/_jsx(Tooltip, {
|
78
|
+
title: edit ? "Save" : "Edit",
|
79
|
+
arrow: true,
|
80
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
81
|
+
onClick: onEdit,
|
82
|
+
children: /*#__PURE__*/_jsx(EditIcon, {})
|
83
|
+
})
|
84
|
+
}), /*#__PURE__*/_jsx(Tooltip, {
|
85
|
+
title: "Add Slide",
|
86
|
+
arrow: true,
|
87
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
88
|
+
onClick: onAddSlide,
|
89
|
+
children: /*#__PURE__*/_jsx(AddIcon, {})
|
90
|
+
})
|
91
|
+
}), /*#__PURE__*/_jsx(Tooltip, {
|
92
|
+
title: "Delete",
|
93
|
+
arrow: true,
|
94
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
95
|
+
onClick: onDelete,
|
96
|
+
children: /*#__PURE__*/_jsx(DeleteIcon, {})
|
97
|
+
})
|
82
98
|
})]
|
83
99
|
}) : null;
|
84
100
|
};
|
@@ -87,15 +103,19 @@ const Carousel = props => {
|
|
87
103
|
className: "sliderBg",
|
88
104
|
style: {
|
89
105
|
padding: "32px",
|
90
|
-
backgroundColor: "
|
106
|
+
backgroundColor: "transparent",
|
91
107
|
position: "relative"
|
92
108
|
},
|
93
109
|
children: [edit ? /*#__PURE__*/_jsx(Empty, {
|
94
110
|
children: children
|
95
|
-
}) : /*#__PURE__*/
|
111
|
+
}) : /*#__PURE__*/_createElement(Slider, {
|
96
112
|
...settings,
|
97
|
-
|
98
|
-
},
|
113
|
+
key: children.length
|
114
|
+
}, children.map((m, i) => {
|
115
|
+
return /*#__PURE__*/_jsx("div", {
|
116
|
+
children: m
|
117
|
+
}, i);
|
118
|
+
})), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
|
99
119
|
});
|
100
120
|
};
|
101
121
|
export default Carousel;
|
@@ -7,7 +7,6 @@ import useResize from "../../utils/customHooks/useResize";
|
|
7
7
|
import { IconButton, Tooltip } from "@mui/material";
|
8
8
|
import DeleteIcon from "@mui/icons-material/Delete";
|
9
9
|
import SettingsIcon from "@mui/icons-material/Settings";
|
10
|
-
import AddIcon from "@mui/icons-material/Add";
|
11
10
|
import EmbedPopup from "./EmbedPopup";
|
12
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
13
12
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -117,7 +116,7 @@ const Video = ({
|
|
117
116
|
width: size.widthInPercent ? `${size.widthInPercent}%` : `${size.width}px`,
|
118
117
|
height: `${size.height}px`
|
119
118
|
},
|
120
|
-
children: [/*#__PURE__*/_jsx(ToolBar, {}),
|
119
|
+
children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}),
|
121
120
|
// The iframe reloads on each re-render and hence it stutters and the document doesn't detect mouse-up event leading to unwanted behaviour
|
122
121
|
// So during resize replace the iframe with a simple div
|
123
122
|
resizing ? /*#__PURE__*/_jsx("div", {
|
@@ -141,14 +140,14 @@ const Video = ({
|
|
141
140
|
},
|
142
141
|
src: url,
|
143
142
|
title: alt
|
144
|
-
}), /*#__PURE__*/_jsx(IconButton, {
|
143
|
+
}), !readOnly ? /*#__PURE__*/_jsx(IconButton, {
|
145
144
|
onPointerDown: onMouseDown,
|
146
145
|
style: {
|
147
146
|
background: "#FFF"
|
148
147
|
},
|
149
148
|
className: "resize-br visible-on-hover",
|
150
149
|
children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
|
151
|
-
})]
|
150
|
+
}) : null]
|
152
151
|
}), children]
|
153
152
|
});
|
154
153
|
};
|
@@ -36,7 +36,8 @@ const Grid = props => {
|
|
36
36
|
} = bannerSpacing || {};
|
37
37
|
const {
|
38
38
|
vertical,
|
39
|
-
horizantal
|
39
|
+
horizantal,
|
40
|
+
flexDirection
|
40
41
|
} = alignment || {};
|
41
42
|
const editor = useSlateStatic();
|
42
43
|
const selected = useSelected();
|
@@ -119,7 +120,7 @@ const Grid = props => {
|
|
119
120
|
}) : null;
|
120
121
|
};
|
121
122
|
return /*#__PURE__*/_jsxs("div", {
|
122
|
-
className: `grid-container ${grid}`,
|
123
|
+
className: `grid-container ${grid} element-root`,
|
123
124
|
...attributes,
|
124
125
|
style: {
|
125
126
|
background: bgColor,
|
@@ -127,7 +128,11 @@ const Grid = props => {
|
|
127
128
|
backgroundImage: backgroundImage && backgroundImage !== "none" ? `url(${backgroundImage})` : "none",
|
128
129
|
border: `1px solid ${borderColor}`
|
129
130
|
},
|
130
|
-
children: [!readOnly && /*#__PURE__*/_jsx(
|
131
|
+
children: [!readOnly && /*#__PURE__*/_jsx("div", {
|
132
|
+
className: `element-selector ${selected ? "selected" : ""}`,
|
133
|
+
contentEditable: false,
|
134
|
+
children: /*#__PURE__*/_jsx(GridToolBar, {})
|
135
|
+
}), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
|
131
136
|
element: element,
|
132
137
|
onSave: onSave,
|
133
138
|
onClose: onClose,
|
@@ -139,7 +144,9 @@ const Grid = props => {
|
|
139
144
|
paddingRight: `${right}px`,
|
140
145
|
paddingTop: `${top}px`,
|
141
146
|
paddingBottom: `${bottom}px`,
|
147
|
+
alignItems: horizantal,
|
142
148
|
justifyContent: horizantal,
|
149
|
+
flexDirection: flexDirection,
|
143
150
|
width: "100%"
|
144
151
|
},
|
145
152
|
children: children
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
|
-
import { Dialog, DialogContent, DialogTitle, IconButton, ImageListItemBar, Tooltip } from "@mui/material";
|
2
|
+
import { Button, Dialog, DialogContent, DialogTitle, Grid, IconButton, ImageListItemBar, Tooltip } from "@mui/material";
|
3
3
|
import { insertGrid } from "../../utils/grid";
|
4
4
|
import { GridIcon } from "../../common/iconslist";
|
5
5
|
import { ImageList, ImageListItem } from "@mui/material";
|
@@ -26,17 +26,24 @@ const GridButton = props => {
|
|
26
26
|
});
|
27
27
|
setOpen(true);
|
28
28
|
const result = await services("listTemplates", {});
|
29
|
-
console.log(result);
|
30
29
|
setTemplates({
|
31
30
|
...templates,
|
32
31
|
list: result?.data || []
|
33
32
|
});
|
34
33
|
};
|
35
34
|
const handleInsertGrid = item => () => {
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
35
|
+
try {
|
36
|
+
if (item) {
|
37
|
+
let template_content = item ? JSON.parse(item.content) : null;
|
38
|
+
template_content = Array.isArray(template_content) ? template_content : [template_content];
|
39
|
+
insertGrid(editor, template_content);
|
40
|
+
} else {
|
41
|
+
insertGrid(editor);
|
42
|
+
}
|
43
|
+
handleClose();
|
44
|
+
} catch (err) {
|
45
|
+
console.log(err);
|
46
|
+
}
|
40
47
|
};
|
41
48
|
const handleClose = () => {
|
42
49
|
setOpen(false);
|
@@ -57,7 +64,22 @@ const GridButton = props => {
|
|
57
64
|
onClose: handleClose,
|
58
65
|
fullWidth: true,
|
59
66
|
children: [/*#__PURE__*/_jsx(DialogTitle, {
|
60
|
-
children:
|
67
|
+
children: /*#__PURE__*/_jsxs(Grid, {
|
68
|
+
container: true,
|
69
|
+
children: [/*#__PURE__*/_jsx(Grid, {
|
70
|
+
item: true,
|
71
|
+
xs: 6,
|
72
|
+
children: "Templates"
|
73
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
74
|
+
item: true,
|
75
|
+
xs: 6,
|
76
|
+
textAlign: "right",
|
77
|
+
children: /*#__PURE__*/_jsx(Button, {
|
78
|
+
onClick: handleInsertGrid(null),
|
79
|
+
children: "Insert Default Template"
|
80
|
+
})
|
81
|
+
})]
|
82
|
+
})
|
61
83
|
}), /*#__PURE__*/_jsx(DialogContent, {
|
62
84
|
children: /*#__PURE__*/_jsx(ImageList, {
|
63
85
|
variant: "quilted",
|
@@ -89,26 +89,33 @@ const GridItem = props => {
|
|
89
89
|
}
|
90
90
|
};
|
91
91
|
return /*#__PURE__*/_jsxs("div", {
|
92
|
-
className: `grid-item xs-${grid}`,
|
92
|
+
className: `grid-item xs-${grid} element-root`,
|
93
93
|
...attributes,
|
94
94
|
style: {
|
95
95
|
display: "flex",
|
96
96
|
flexDirection: "column",
|
97
97
|
backgroundColor: bgColor,
|
98
98
|
alignItems: horizantal,
|
99
|
-
|
99
|
+
justifyContent: vertical,
|
100
100
|
width: `${itemWidth}%`,
|
101
101
|
margin: "0px"
|
102
102
|
},
|
103
|
-
children: [/*#__PURE__*/_jsx("div", {
|
103
|
+
children: [!readOnly && /*#__PURE__*/_jsx("div", {
|
104
|
+
className: `element-selector ${selected ? "selected" : ""}`,
|
105
|
+
contentEditable: false,
|
106
|
+
children: /*#__PURE__*/_jsx(GridItemToolbar, {})
|
107
|
+
}), /*#__PURE__*/_jsx("div", {
|
104
108
|
style: {
|
109
|
+
display: "flex",
|
110
|
+
flexDirection: "column",
|
111
|
+
width: "100%",
|
105
112
|
paddingLeft: `${left}px`,
|
106
113
|
paddingRight: `${right}px`,
|
107
114
|
paddingTop: `${top}px`,
|
108
115
|
paddingBottom: `${bottom}px`
|
109
116
|
},
|
110
117
|
children: children
|
111
|
-
}),
|
118
|
+
}), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {
|
112
119
|
element: element,
|
113
120
|
onSave: onSave,
|
114
121
|
onClose: onClose
|
@@ -6,6 +6,20 @@ const buttonStyle = [{
|
|
6
6
|
key: "label",
|
7
7
|
type: "text"
|
8
8
|
}]
|
9
|
+
}, {
|
10
|
+
tab: "Size & Alignment",
|
11
|
+
value: "size",
|
12
|
+
fields: [{
|
13
|
+
label: "Text Size",
|
14
|
+
key: "textSize",
|
15
|
+
type: "text",
|
16
|
+
placeholder: "16px or 1em"
|
17
|
+
}, {
|
18
|
+
label: "Text Align",
|
19
|
+
key: "textAlign",
|
20
|
+
type: "textAlign",
|
21
|
+
placeholder: "16px or 1em"
|
22
|
+
}]
|
9
23
|
}, {
|
10
24
|
tab: "Link",
|
11
25
|
value: "link",
|
@@ -89,6 +89,34 @@ const Alignment = props => {
|
|
89
89
|
})]
|
90
90
|
})]
|
91
91
|
})
|
92
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
93
|
+
item: true,
|
94
|
+
xs: 12,
|
95
|
+
children: /*#__PURE__*/_jsxs(FormControl, {
|
96
|
+
children: [/*#__PURE__*/_jsx(FormLabel, {
|
97
|
+
id: "demo-row-radio-buttons-group-label",
|
98
|
+
children: /*#__PURE__*/_jsx(Typography, {
|
99
|
+
variant: "body1",
|
100
|
+
color: "primary",
|
101
|
+
children: "Flex Direction"
|
102
|
+
})
|
103
|
+
}), /*#__PURE__*/_jsxs(RadioGroup, {
|
104
|
+
row: true,
|
105
|
+
"aria-labelledby": "demo-row-radio-buttons-group-label",
|
106
|
+
name: "flexDirection",
|
107
|
+
value: value?.flexDirection || "row",
|
108
|
+
onChange: handleChange,
|
109
|
+
children: [/*#__PURE__*/_jsx(FormControlLabel, {
|
110
|
+
value: "row",
|
111
|
+
control: /*#__PURE__*/_jsx(Radio, {}),
|
112
|
+
label: "Row"
|
113
|
+
}), /*#__PURE__*/_jsx(FormControlLabel, {
|
114
|
+
value: "column",
|
115
|
+
control: /*#__PURE__*/_jsx(Radio, {}),
|
116
|
+
label: "Column"
|
117
|
+
})]
|
118
|
+
})]
|
119
|
+
})
|
92
120
|
})]
|
93
121
|
});
|
94
122
|
};
|
@@ -10,6 +10,7 @@ import ImageTexts from "./imageTexts";
|
|
10
10
|
import MenusArray from "./menusArray";
|
11
11
|
import ButtonLink from "./buttonLink";
|
12
12
|
import SaveAsTemplate from "./saveAsTemplate";
|
13
|
+
import TextAlign from "./textAlign";
|
13
14
|
const FieldMap = {
|
14
15
|
text: Text,
|
15
16
|
bannerSpacing: BannerSpacing,
|
@@ -22,6 +23,7 @@ const FieldMap = {
|
|
22
23
|
imageTexts: ImageTexts,
|
23
24
|
menusArray: MenusArray,
|
24
25
|
buttonLink: ButtonLink,
|
25
|
-
saveAsTemplate: SaveAsTemplate
|
26
|
+
saveAsTemplate: SaveAsTemplate,
|
27
|
+
textAlign: TextAlign
|
26
28
|
};
|
27
29
|
export default FieldMap;
|
@@ -22,7 +22,8 @@ const SaveAsTemplate = props => {
|
|
22
22
|
const [template, setTemplate] = useState({
|
23
23
|
type: "Element",
|
24
24
|
category: "",
|
25
|
-
img_aws: null
|
25
|
+
img_aws: null,
|
26
|
+
title: ""
|
26
27
|
});
|
27
28
|
const [base64, setBase64] = useState(value);
|
28
29
|
const [uploading, setUploading] = useState(false);
|
@@ -74,6 +75,16 @@ const SaveAsTemplate = props => {
|
|
74
75
|
container: true,
|
75
76
|
spacing: 2,
|
76
77
|
children: [/*#__PURE__*/_jsx(Grid, {
|
78
|
+
itemx: true,
|
79
|
+
xs: 12,
|
80
|
+
children: /*#__PURE__*/_jsx(TextField, {
|
81
|
+
name: "title",
|
82
|
+
value: template?.title,
|
83
|
+
onChange: onChange,
|
84
|
+
placeholder: "Template Title",
|
85
|
+
fullWidth: true
|
86
|
+
})
|
87
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
77
88
|
item: true,
|
78
89
|
xs: 12,
|
79
90
|
children: /*#__PURE__*/_jsxs(Select, {
|
@@ -94,7 +105,7 @@ const SaveAsTemplate = props => {
|
|
94
105
|
})
|
95
106
|
}), /*#__PURE__*/_jsx(Grid, {
|
96
107
|
item: true,
|
97
|
-
xs:
|
108
|
+
xs: 12,
|
98
109
|
children: /*#__PURE__*/_jsx(TextField, {
|
99
110
|
fullWidth: true,
|
100
111
|
name: "category",
|
@@ -9,7 +9,8 @@ const Text = props => {
|
|
9
9
|
onChange
|
10
10
|
} = props;
|
11
11
|
const {
|
12
|
-
key
|
12
|
+
key,
|
13
|
+
placeholder
|
13
14
|
} = data;
|
14
15
|
const handleChange = e => {
|
15
16
|
onChange({
|
@@ -29,7 +30,7 @@ const Text = props => {
|
|
29
30
|
variant: "body1",
|
30
31
|
color: "textSecondary",
|
31
32
|
sx: {
|
32
|
-
fontSize:
|
33
|
+
fontSize: "14px"
|
33
34
|
},
|
34
35
|
children: data?.label
|
35
36
|
})
|
@@ -38,6 +39,7 @@ const Text = props => {
|
|
38
39
|
xs: 12,
|
39
40
|
children: /*#__PURE__*/_jsx(TextField, {
|
40
41
|
name: key,
|
42
|
+
placeholder: placeholder || "",
|
41
43
|
type: "text",
|
42
44
|
value: value,
|
43
45
|
onChange: handleChange,
|
@@ -0,0 +1,60 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { Grid, Radio, RadioGroup, FormControl, FormLabel, FormControlLabel, Typography } from "@mui/material";
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
5
|
+
const TextAlign = props => {
|
6
|
+
const {
|
7
|
+
value,
|
8
|
+
data,
|
9
|
+
onChange
|
10
|
+
} = props;
|
11
|
+
const {
|
12
|
+
key
|
13
|
+
} = data;
|
14
|
+
const handleChange = e => {
|
15
|
+
onChange({
|
16
|
+
[key]: e.target.value
|
17
|
+
});
|
18
|
+
};
|
19
|
+
return /*#__PURE__*/_jsx(Grid, {
|
20
|
+
container: true,
|
21
|
+
style: {
|
22
|
+
paddingTop: "12px"
|
23
|
+
},
|
24
|
+
spacing: 1,
|
25
|
+
children: /*#__PURE__*/_jsx(Grid, {
|
26
|
+
item: true,
|
27
|
+
xs: 12,
|
28
|
+
children: /*#__PURE__*/_jsxs(FormControl, {
|
29
|
+
children: [/*#__PURE__*/_jsx(FormLabel, {
|
30
|
+
id: "demo-row-radio-buttons-group-label",
|
31
|
+
children: /*#__PURE__*/_jsx(Typography, {
|
32
|
+
variant: "body1",
|
33
|
+
color: "primary",
|
34
|
+
children: "Text Alignment"
|
35
|
+
})
|
36
|
+
}), /*#__PURE__*/_jsxs(RadioGroup, {
|
37
|
+
row: true,
|
38
|
+
"aria-labelledby": "demo-row-radio-buttons-group-label",
|
39
|
+
name: "textAlign",
|
40
|
+
value: value || "left",
|
41
|
+
onChange: handleChange,
|
42
|
+
children: [/*#__PURE__*/_jsx(FormControlLabel, {
|
43
|
+
value: "left",
|
44
|
+
control: /*#__PURE__*/_jsx(Radio, {}),
|
45
|
+
label: "Left"
|
46
|
+
}), /*#__PURE__*/_jsx(FormControlLabel, {
|
47
|
+
value: "center",
|
48
|
+
control: /*#__PURE__*/_jsx(Radio, {}),
|
49
|
+
label: "Center"
|
50
|
+
}), /*#__PURE__*/_jsx(FormControlLabel, {
|
51
|
+
value: "right",
|
52
|
+
control: /*#__PURE__*/_jsx(Radio, {}),
|
53
|
+
label: "Right"
|
54
|
+
})]
|
55
|
+
})]
|
56
|
+
})
|
57
|
+
})
|
58
|
+
});
|
59
|
+
};
|
60
|
+
export default TextAlign;
|