@flozy/editor 1.3.3 → 1.3.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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;
|