@flozy/editor 1.2.8 → 1.3.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +46 -8
- package/dist/Editor/DialogWrapper.js +9 -4
- package/dist/Editor/Editor.css +5 -4
- package/dist/Editor/Elements/AppHeader/AppHeader.js +2 -0
- package/dist/Editor/Elements/Button/ButtonPopup.js +3 -1
- package/dist/Editor/Elements/Button/EditorButton.js +34 -5
- package/dist/Editor/Elements/Carousel/Carousel.js +1 -0
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +9 -4
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +3 -2
- package/dist/Editor/Elements/Color Picker/LogoIcon.js +6 -6
- package/dist/Editor/Elements/Embed/Embed.js +10 -3
- package/dist/Editor/Elements/Equation/EquationButton.js +1 -1
- package/dist/Editor/Elements/ID/Id.js +1 -1
- package/dist/Editor/Elements/ImageText/ImageText.js +29 -2
- package/dist/Editor/Elements/Link/Link.js +1 -1
- package/dist/Editor/Elements/Link/LinkButton.js +11 -4
- package/dist/Editor/Elements/Link/styles.css +1 -1
- package/dist/Editor/Elements/NewLine/NewLineButton.js +8 -6
- package/dist/Editor/Elements/Signature/Signature.css +4 -4
- package/dist/Editor/Elements/Signature/SignaturePopup.js +11 -4
- package/dist/Editor/Elements/Table/Table.js +1 -0
- package/dist/Editor/Elements/Table/TableSelector.js +8 -4
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +2 -1
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +8 -4
- package/dist/Editor/common/StyleBuilder/embedImageStyle.js +0 -8
- package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +11 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +17 -10
- package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +113 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/gridSize.js +0 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
- package/dist/Editor/common/StyleBuilder/index.js +8 -1
- package/dist/Editor/common/Uploader.js +4 -4
- package/dist/Editor/commonStyle.js +11 -0
- package/dist/Editor/plugins/withEmbeds.js +1 -0
- package/dist/Editor/service/actionTrigger.js +16 -0
- package/dist/Editor/utils/button.js +4 -1
- package/package.json +1 -1
@@ -16,6 +16,7 @@ import "./Editor.css";
|
|
16
16
|
import { serialize } from "./utils/serializer";
|
17
17
|
import { getThumbnailImage } from "./helper";
|
18
18
|
import PopupTool from "./Toolbar/PopupTool";
|
19
|
+
import { Button } from "@mui/material";
|
19
20
|
import { jsx as _jsx } from "react/jsx-runtime";
|
20
21
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
21
22
|
const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar"];
|
@@ -51,6 +52,13 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
51
52
|
const [isInteracted, setIsInteracted] = useState(false);
|
52
53
|
const [deboundedValue] = useDebounce(value, 500);
|
53
54
|
const [fullScreen, setFullScreen] = useState(false);
|
55
|
+
const [viewport, setViewport] = useState({
|
56
|
+
w: null,
|
57
|
+
h: null
|
58
|
+
});
|
59
|
+
const {
|
60
|
+
defaultBG
|
61
|
+
} = otherProps || {};
|
54
62
|
const editor = useMemo(() => {
|
55
63
|
if (collaborativeEditor) return collaborativeEditor;
|
56
64
|
return withCommon(createEditor());
|
@@ -134,6 +142,15 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
134
142
|
},
|
135
143
|
toggleFullscreen() {
|
136
144
|
setFullScreen(!fullScreen);
|
145
|
+
},
|
146
|
+
changeViewport({
|
147
|
+
w,
|
148
|
+
h
|
149
|
+
}) {
|
150
|
+
setViewport({
|
151
|
+
w,
|
152
|
+
h
|
153
|
+
});
|
137
154
|
}
|
138
155
|
}));
|
139
156
|
const [htmlAction, setHtmlAction] = useState({
|
@@ -158,8 +175,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
158
175
|
setIsInteracted(true);
|
159
176
|
}
|
160
177
|
};
|
178
|
+
const isReadOnly = readOnly === "readonly";
|
161
179
|
const customProps = {
|
162
|
-
...(otherProps || {})
|
180
|
+
...(otherProps || {}),
|
181
|
+
readOnly: isReadOnly
|
163
182
|
};
|
164
183
|
const renderElement = useCallback(props => {
|
165
184
|
return /*#__PURE__*/_jsx(Element, {
|
@@ -179,6 +198,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
179
198
|
...partialState
|
180
199
|
}));
|
181
200
|
};
|
201
|
+
const handleChangeViewport = (w, h) => () => {
|
202
|
+
setViewport({
|
203
|
+
w,
|
204
|
+
h
|
205
|
+
});
|
206
|
+
};
|
182
207
|
const onKeyDown = useCallback(event => {
|
183
208
|
const isMetaKey = event.metaKey && event.keyCode >= 65 && event.keyCode <= 90;
|
184
209
|
const isCtrlKey = event.ctrlKey || isMetaKey;
|
@@ -198,18 +223,28 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
198
223
|
});
|
199
224
|
}
|
200
225
|
}, [chars, editor, target, mentions, setMentions]);
|
201
|
-
const isReadOnly = readOnly === "readonly";
|
202
226
|
const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
|
203
227
|
return /*#__PURE__*/_jsx(DialogWrapper, {
|
204
228
|
...props,
|
205
229
|
fullScreen: fullScreen,
|
206
|
-
children: /*#__PURE__*/
|
230
|
+
children: /*#__PURE__*/_jsxs("div", {
|
231
|
+
className: "editor-t-wrapper",
|
207
232
|
style: {
|
208
233
|
display: "flex",
|
209
234
|
flexDirection: "column",
|
210
|
-
padding: "0 8px"
|
235
|
+
padding: "0 8px",
|
236
|
+
background: "white",
|
237
|
+
backgroundImage: "radial-gradient(#CCC 2px, transparent 0)",
|
238
|
+
backgroundSize: "40px 40px",
|
239
|
+
backgroundPosition: "-19px -19px"
|
211
240
|
},
|
212
|
-
children: /*#__PURE__*/
|
241
|
+
children: [/*#__PURE__*/_jsx(Button, {
|
242
|
+
onClick: handleChangeViewport(414, 736),
|
243
|
+
children: "414 x 736"
|
244
|
+
}), /*#__PURE__*/_jsx(Button, {
|
245
|
+
onClick: handleChangeViewport(375, 812),
|
246
|
+
children: " 375 x 812"
|
247
|
+
}), /*#__PURE__*/_jsxs(Slate, {
|
213
248
|
editor: editor,
|
214
249
|
initialValue: value,
|
215
250
|
onChange: handleEditorChange,
|
@@ -222,12 +257,15 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
222
257
|
className: "editor-wrapper",
|
223
258
|
style: {
|
224
259
|
border: "1px solid #f3f3f3",
|
225
|
-
background: pageProps?.pageColor || "#FFF",
|
260
|
+
background: pageProps?.pageColor || defaultBG || "#FFF",
|
226
261
|
color: pageProps?.color || "#000",
|
227
262
|
paddingLeft: `${bannerSpacing?.left}px`,
|
228
263
|
paddingRight: `${bannerSpacing?.right}px`,
|
229
264
|
paddingTop: `${bannerSpacing?.top}px`,
|
230
|
-
paddingBottom: `${bannerSpacing?.bottom}px
|
265
|
+
paddingBottom: `${bannerSpacing?.bottom}px`,
|
266
|
+
width: viewport.w ? `${viewport.w}px` : "100%",
|
267
|
+
height: viewport.h ? `${viewport.h}px` : "auto",
|
268
|
+
alignSelf: "center"
|
231
269
|
},
|
232
270
|
children: [/*#__PURE__*/_jsx(PopupTool, {}), /*#__PURE__*/_jsx(Editable, {
|
233
271
|
className: "innert-editor-textbox",
|
@@ -249,7 +287,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
249
287
|
...htmlAction,
|
250
288
|
handleCodeToText: handleCodeToText
|
251
289
|
})]
|
252
|
-
}, id)
|
290
|
+
}, id)]
|
253
291
|
})
|
254
292
|
});
|
255
293
|
});
|
@@ -1,6 +1,8 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { Dialog, DialogTitle, DialogContent, DialogActions, IconButton, Grid } from "@mui/material";
|
3
3
|
import CloseIcon from "@mui/icons-material/Close";
|
4
|
+
// import styled from "@emotion/styled";
|
5
|
+
// import commonStyle from "./commonStyle";
|
4
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
5
7
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
6
8
|
const DialogWrapper = props => {
|
@@ -11,6 +13,7 @@ const DialogWrapper = props => {
|
|
11
13
|
footer
|
12
14
|
} = props;
|
13
15
|
return fullScreen ? /*#__PURE__*/_jsxs(Dialog, {
|
16
|
+
className: `dialogComp`,
|
14
17
|
open: fullScreen,
|
15
18
|
fullScreen: fullScreen,
|
16
19
|
onClose: onClose,
|
@@ -18,8 +21,8 @@ const DialogWrapper = props => {
|
|
18
21
|
children: /*#__PURE__*/_jsx(Grid, {
|
19
22
|
children: /*#__PURE__*/_jsx(Grid, {
|
20
23
|
style: {
|
21
|
-
display:
|
22
|
-
justifyContent:
|
24
|
+
display: "flex",
|
25
|
+
justifyContent: "end"
|
23
26
|
},
|
24
27
|
children: /*#__PURE__*/_jsx(IconButton, {
|
25
28
|
onClick: onClose,
|
@@ -37,7 +40,9 @@ const DialogWrapper = props => {
|
|
37
40
|
DialogWrapper.defaultProps = {
|
38
41
|
fullScreen: false,
|
39
42
|
onClose: () => {},
|
40
|
-
children:
|
41
|
-
footer:
|
43
|
+
children: "",
|
44
|
+
footer: ""
|
42
45
|
};
|
46
|
+
|
47
|
+
// export default styled(commonStyle)(DialogWrapper);
|
43
48
|
export default DialogWrapper;
|
package/dist/Editor/Editor.css
CHANGED
@@ -39,7 +39,8 @@ blockquote{
|
|
39
39
|
min-height: 400px;
|
40
40
|
height: fit-content;
|
41
41
|
max-width: 100%;
|
42
|
-
border: none !important
|
42
|
+
border: none !important;
|
43
|
+
z-index: 1;
|
43
44
|
}
|
44
45
|
|
45
46
|
.editor-wrapper table{
|
@@ -53,7 +54,7 @@ blockquote{
|
|
53
54
|
display: inline;
|
54
55
|
position: relative;
|
55
56
|
}
|
56
|
-
.popup{
|
57
|
+
.af-popup{
|
57
58
|
position: fixed;
|
58
59
|
left: 0;
|
59
60
|
right: 0;
|
@@ -64,8 +65,8 @@ blockquote{
|
|
64
65
|
padding: 20px;
|
65
66
|
border-radius: 6px;
|
66
67
|
/* border: 1px solid lightgray; */
|
67
|
-
height: fit-content;
|
68
|
-
z-index:
|
68
|
+
height: fit-content !important;
|
69
|
+
z-index: 999;
|
69
70
|
width: 300px;
|
70
71
|
|
71
72
|
}
|
@@ -94,6 +94,7 @@ function AppHeader(props) {
|
|
94
94
|
sx: {
|
95
95
|
my: 2
|
96
96
|
},
|
97
|
+
color: "primary",
|
97
98
|
children: appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
|
98
99
|
alt: `${appTitle} Logo`,
|
99
100
|
style: {
|
@@ -146,6 +147,7 @@ function AppHeader(props) {
|
|
146
147
|
}), /*#__PURE__*/_jsxs(Typography, {
|
147
148
|
variant: "h6",
|
148
149
|
component: "div",
|
150
|
+
color: "primary",
|
149
151
|
style: {
|
150
152
|
display: "inline-flex",
|
151
153
|
alignItems: "center"
|
@@ -6,6 +6,7 @@ const ButtonPopup = props => {
|
|
6
6
|
const {
|
7
7
|
element,
|
8
8
|
onSave,
|
9
|
+
customProps,
|
9
10
|
onClose
|
10
11
|
} = props;
|
11
12
|
return /*#__PURE__*/_jsx(StyleBuilder, {
|
@@ -14,7 +15,8 @@ const ButtonPopup = props => {
|
|
14
15
|
element: element,
|
15
16
|
onSave: onSave,
|
16
17
|
onClose: onClose,
|
17
|
-
renderTabs: buttonStyle
|
18
|
+
renderTabs: buttonStyle,
|
19
|
+
customProps: customProps
|
18
20
|
});
|
19
21
|
};
|
20
22
|
export default ButtonPopup;
|
@@ -3,6 +3,7 @@ import { Transforms } from "slate";
|
|
3
3
|
import { ReactEditor, useSlateStatic } from "slate-react";
|
4
4
|
import { Menu, MenuItem } from "@mui/material";
|
5
5
|
import ButtonPopup from "./ButtonPopup";
|
6
|
+
import { actionButtonRedirect } from "../../service/actionTrigger";
|
6
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
9
|
const EditorButton = props => {
|
@@ -12,7 +13,8 @@ const EditorButton = props => {
|
|
12
13
|
customProps
|
13
14
|
} = props;
|
14
15
|
const {
|
15
|
-
readOnly
|
16
|
+
readOnly,
|
17
|
+
metadata
|
16
18
|
} = customProps;
|
17
19
|
const editor = useSlateStatic();
|
18
20
|
const path = ReactEditor.findPath(editor, element);
|
@@ -25,8 +27,13 @@ const EditorButton = props => {
|
|
25
27
|
bannerSpacing,
|
26
28
|
textColor,
|
27
29
|
url,
|
28
|
-
borderColor
|
30
|
+
borderColor,
|
31
|
+
buttonLink
|
29
32
|
} = element;
|
33
|
+
const {
|
34
|
+
linkType,
|
35
|
+
redirectOnURLResult
|
36
|
+
} = buttonLink || {};
|
30
37
|
const {
|
31
38
|
topLeft,
|
32
39
|
topRight,
|
@@ -39,13 +46,34 @@ const EditorButton = props => {
|
|
39
46
|
right,
|
40
47
|
bottom
|
41
48
|
} = bannerSpacing || {};
|
42
|
-
const onClick = e => {
|
43
|
-
|
49
|
+
const onClick = async e => {
|
50
|
+
if (readOnly) {
|
51
|
+
if (metadata?.buttonLink?.handler) {
|
52
|
+
metadata.buttonLink.handler("click");
|
53
|
+
} else if (linkType === "actionTrigger") {
|
54
|
+
if (redirectOnURLResult) {
|
55
|
+
// call api and redirect based on api result
|
56
|
+
const apiResult = await actionButtonRedirect({}, {
|
57
|
+
url: buttonLink?.url
|
58
|
+
});
|
59
|
+
window.open(apiResult, "_blank").focus();
|
60
|
+
} else {
|
61
|
+
const refUrl = buttonLink?.url ? buttonLink?.url.includes("http") ? buttonLink?.url : `//${buttonLink?.url}` : "Link";
|
62
|
+
window.open(refUrl, "_blank").focus();
|
63
|
+
}
|
64
|
+
} else {
|
65
|
+
const refUrl = url ? url.includes("http") ? url : `//${url}` : "Link";
|
66
|
+
window.open(refUrl, "_blank").focus();
|
67
|
+
}
|
68
|
+
} else {
|
69
|
+
setAnchorEl(e.currentTarget);
|
70
|
+
}
|
44
71
|
};
|
45
72
|
const handleClose = () => {
|
46
73
|
setAnchorEl(null);
|
47
74
|
};
|
48
75
|
const onMenuClick = val => () => {
|
76
|
+
console.log(val, url);
|
49
77
|
switch (val) {
|
50
78
|
case "open":
|
51
79
|
const refUrl = url ? url.includes("http") ? url : `//${url}` : "Link";
|
@@ -117,7 +145,8 @@ const EditorButton = props => {
|
|
117
145
|
}), edit && /*#__PURE__*/_jsx(ButtonPopup, {
|
118
146
|
element: element,
|
119
147
|
onSave: onSave,
|
120
|
-
onClose: onClose
|
148
|
+
onClose: onClose,
|
149
|
+
customProps: customProps
|
121
150
|
})]
|
122
151
|
});
|
123
152
|
};
|
@@ -15,6 +15,7 @@
|
|
15
15
|
border-radius: 20px;
|
16
16
|
background-color: #000000;
|
17
17
|
border: 1px solid #eee;
|
18
|
+
flex-shrink: 0;
|
18
19
|
}
|
19
20
|
.color-picker form{
|
20
21
|
display: flex;
|
@@ -24,9 +25,9 @@
|
|
24
25
|
}
|
25
26
|
.color-picker input{
|
26
27
|
width: 65%;
|
27
|
-
height: 30px;
|
28
|
+
height: 30px !important;
|
28
29
|
border:1px solid lightgray;
|
29
|
-
border-radius: 5px;
|
30
|
+
border-radius: 5px !important;
|
30
31
|
padding-left:5px
|
31
32
|
}
|
32
33
|
.color-picker button{
|
@@ -42,7 +43,7 @@
|
|
42
43
|
}
|
43
44
|
.color-picker-dialog .popup {
|
44
45
|
width: 100%;
|
45
|
-
max-width: fit-content;
|
46
|
+
max-width: fit-content !important;
|
46
47
|
}
|
47
48
|
.backdrop {
|
48
49
|
position: fixed;
|
@@ -54,5 +55,9 @@
|
|
54
55
|
z-index: 1;
|
55
56
|
}
|
56
57
|
.colorSaveBtn {
|
57
|
-
border-radius: 6px;
|
58
|
+
border-radius: 6px !important;
|
59
|
+
height: 30px;
|
60
|
+
padding: 0 15px !important;
|
61
|
+
width: 60px !important;
|
62
|
+
flex-shrink: 0;
|
58
63
|
}
|
@@ -7,6 +7,7 @@ import { Transforms } from "slate";
|
|
7
7
|
import usePopup from "../../utils/customHooks/usePopup";
|
8
8
|
import { logo } from "./LogoIcon";
|
9
9
|
import "./ColorPicker.css";
|
10
|
+
import { ButtonBase } from "@mui/material";
|
10
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
11
12
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
12
13
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
@@ -88,7 +89,7 @@ const ColorPicker = ({
|
|
88
89
|
setShowOptions(false);
|
89
90
|
}
|
90
91
|
}), /*#__PURE__*/_jsxs("div", {
|
91
|
-
className: "popup",
|
92
|
+
className: "af-popup",
|
92
93
|
children: [/*#__PURE__*/_jsx("div", {
|
93
94
|
className: "color-options",
|
94
95
|
children: colors.map((color, index) => {
|
@@ -123,7 +124,7 @@ const ColorPicker = ({
|
|
123
124
|
style: {
|
124
125
|
border: validHex === false ? "1px solid red" : "1px solid lightgray"
|
125
126
|
}
|
126
|
-
}), /*#__PURE__*/_jsx(
|
127
|
+
}), /*#__PURE__*/_jsx(ButtonBase, {
|
127
128
|
className: "colorSaveBtn",
|
128
129
|
style: {
|
129
130
|
background: validHex ? "#2563EB" : "#64748B",
|
@@ -3,7 +3,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
export const logo = {
|
4
4
|
color: color => /*#__PURE__*/_jsx("svg", {
|
5
5
|
xmlns: "http://www.w3.org/2000/svg",
|
6
|
-
fill: "#
|
6
|
+
fill: "#64748B",
|
7
7
|
height: "20px",
|
8
8
|
width: "20px",
|
9
9
|
version: "1.1",
|
@@ -12,7 +12,7 @@ export const logo = {
|
|
12
12
|
children: /*#__PURE__*/_jsxs("g", {
|
13
13
|
children: [/*#__PURE__*/_jsx("path", {
|
14
14
|
d: "M29,27H3c-0.6,0-1,0.4-1,1s0.4,1,1,1h26c0.6,0,1-0.4,1-1S29.6,27,29,27z",
|
15
|
-
fill: color || "#
|
15
|
+
fill: color || "#64748B"
|
16
16
|
}), /*#__PURE__*/_jsx("path", {
|
17
17
|
d: "M5,24h4c0.6,0,1-0.4,1-1s-0.4-1-1-1H8.6l1.9-4h11.1l1.9,4H23c-0.6,0-1,0.4-1,1s0.4,1,1,1h4c0.6,0,1-0.4,1-1s-0.4-1-1-1 h-1.4L16.9,3.6C16.7,3.2,16.4,3,16,3s-0.7,0.2-0.9,0.6L6.4,22H5c-0.6,0-1,0.4-1,1S4.4,24,5,24z M16,6.3l4.6,9.7h-9.2L16,6.3z"
|
18
18
|
})]
|
@@ -33,20 +33,20 @@ export const logo = {
|
|
33
33
|
fillRule: "evenodd",
|
34
34
|
clipRule: "evenodd",
|
35
35
|
d: "M37 37C39.2091 37 41 35.2091 41 33C41 31.5272 39.6667 29.5272 37 27C34.3333 29.5272 33 31.5272 33 33C33 35.2091 34.7909 37 37 37Z",
|
36
|
-
fill: "#
|
36
|
+
fill: "#64748B"
|
37
37
|
}), /*#__PURE__*/_jsx("path", {
|
38
38
|
d: "M20.8535 5.50439L24.389 9.03993",
|
39
|
-
stroke: "#
|
39
|
+
stroke: "#64748B",
|
40
40
|
strokeWidth: "4",
|
41
41
|
strokeLinecap: "round"
|
42
42
|
}), /*#__PURE__*/_jsx("path", {
|
43
43
|
d: "M23.6818 8.33281L8.12549 23.8892L19.4392 35.2029L34.9955 19.6465L23.6818 8.33281Z",
|
44
|
-
stroke: "#
|
44
|
+
stroke: "#64748B",
|
45
45
|
strokeWidth: "4",
|
46
46
|
strokeLinejoin: "round"
|
47
47
|
}), /*#__PURE__*/_jsx("path", {
|
48
48
|
d: "M12 20.0732L28.961 25.6496",
|
49
|
-
stroke: "#
|
49
|
+
stroke: "#64748B",
|
50
50
|
strokeWidth: "4",
|
51
51
|
strokeLinecap: "round"
|
52
52
|
}), /*#__PURE__*/_jsx("path", {
|
@@ -9,6 +9,8 @@ import usePopup from "../../utils/customHooks/usePopup";
|
|
9
9
|
import { insertEmbed } from "../../utils/embed";
|
10
10
|
import Uploader from "../../common/Uploader";
|
11
11
|
import "./Embed.css";
|
12
|
+
// import commonStyle from "../../commonStyle";
|
13
|
+
// import styled from "@emotion/styled";
|
12
14
|
import { jsx as _jsx } from "react/jsx-runtime";
|
13
15
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
14
16
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
@@ -19,7 +21,8 @@ const EMBED_LABEL = {
|
|
19
21
|
const Embed = ({
|
20
22
|
editor,
|
21
23
|
format,
|
22
|
-
customProps
|
24
|
+
customProps,
|
25
|
+
className
|
23
26
|
}) => {
|
24
27
|
const urlInputRef = useRef();
|
25
28
|
const [open, setOpen] = useState(false);
|
@@ -68,6 +71,7 @@ const Embed = ({
|
|
68
71
|
[e.target.name]: e.target.value
|
69
72
|
});
|
70
73
|
};
|
74
|
+
const imageURL = formData?.url === "none" || !formData?.url ? "" : formData?.url;
|
71
75
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
72
76
|
children: [/*#__PURE__*/_jsx(IconButton, {
|
73
77
|
className: isBlockActive(editor, format) ? "active" : "",
|
@@ -83,6 +87,7 @@ const Embed = ({
|
|
83
87
|
}), /*#__PURE__*/_jsx(Dialog, {
|
84
88
|
open: open,
|
85
89
|
fullWidth: true,
|
90
|
+
className: `dialogComp`,
|
86
91
|
children: /*#__PURE__*/_jsxs(Grid, {
|
87
92
|
item: true,
|
88
93
|
xs: 12,
|
@@ -100,6 +105,7 @@ const Embed = ({
|
|
100
105
|
children: [/*#__PURE__*/_jsx(Typography, {
|
101
106
|
variant: "h6",
|
102
107
|
className: "popupTitle",
|
108
|
+
color: "primary",
|
103
109
|
children: EMBED_LABEL[format] || "Embed"
|
104
110
|
}), /*#__PURE__*/_jsx(Grid, {
|
105
111
|
style: {
|
@@ -127,7 +133,7 @@ const Embed = ({
|
|
127
133
|
size: "small",
|
128
134
|
fullWidth: true,
|
129
135
|
onChange: handleChange,
|
130
|
-
value:
|
136
|
+
value: imageURL || ""
|
131
137
|
})
|
132
138
|
}), /*#__PURE__*/_jsx(Uploader, {
|
133
139
|
value: formData,
|
@@ -157,4 +163,5 @@ const Embed = ({
|
|
157
163
|
})]
|
158
164
|
});
|
159
165
|
};
|
160
|
-
export default Embed;
|
166
|
+
export default Embed;
|
167
|
+
// export default styled(commonStyle)(Embed);
|
@@ -1,14 +1,41 @@
|
|
1
1
|
import React from "react";
|
2
|
+
import { IconButton } from "@mui/material";
|
3
|
+
import DeleteIcon from "@mui/icons-material/Delete";
|
4
|
+
import { Transforms } from "slate";
|
5
|
+
import { ReactEditor, useSlateStatic } from "slate-react";
|
2
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
3
8
|
const ImageText = props => {
|
4
9
|
const {
|
5
10
|
attributes,
|
11
|
+
element,
|
6
12
|
children
|
7
13
|
} = props;
|
8
|
-
|
14
|
+
const editor = useSlateStatic();
|
15
|
+
const onDelete = () => {
|
16
|
+
const path = ReactEditor.findPath(editor, element);
|
17
|
+
Transforms.removeNodes(editor, {
|
18
|
+
at: [...path]
|
19
|
+
});
|
20
|
+
};
|
21
|
+
return /*#__PURE__*/_jsxs("div", {
|
9
22
|
className: "image-text",
|
10
23
|
...attributes,
|
11
|
-
|
24
|
+
style: {
|
25
|
+
position: "relative"
|
26
|
+
},
|
27
|
+
children: [children, /*#__PURE__*/_jsx("div", {
|
28
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
29
|
+
onClick: onDelete,
|
30
|
+
style: {
|
31
|
+
background: "#FFF",
|
32
|
+
position: "absolute",
|
33
|
+
right: "0px",
|
34
|
+
top: "0px"
|
35
|
+
},
|
36
|
+
children: /*#__PURE__*/_jsx(DeleteIcon, {})
|
37
|
+
})
|
38
|
+
})]
|
12
39
|
});
|
13
40
|
};
|
14
41
|
export default ImageText;
|
@@ -22,7 +22,7 @@ const Link = ({
|
|
22
22
|
target: element.target,
|
23
23
|
children: children
|
24
24
|
}), selected && focused && /*#__PURE__*/_jsxs("div", {
|
25
|
-
className: "link-popup",
|
25
|
+
className: "af-link-popup",
|
26
26
|
contentEditable: false,
|
27
27
|
children: [/*#__PURE__*/_jsx("a", {
|
28
28
|
href: element.href,
|
@@ -1,11 +1,14 @@
|
|
1
1
|
import { useRef, useState } from "react";
|
2
2
|
import { Transforms } from "slate";
|
3
|
-
import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography
|
3
|
+
import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox
|
4
|
+
// styled,
|
5
|
+
} from "@mui/material";
|
6
|
+
// import { styled } from "@mui/material/styles";
|
4
7
|
import CloseIcon from "@mui/icons-material/Close";
|
5
|
-
import { CheckBox } from "@mui/icons-material";
|
6
8
|
import { insertLink } from "../../utils/link";
|
7
9
|
import Icon from "../../common/Icon";
|
8
10
|
import { isBlockActive } from "../../utils/SlateUtilityFunctions";
|
11
|
+
// import styled from "@emotion/styled";
|
9
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
10
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
11
14
|
const LinkButton = props => {
|
@@ -56,6 +59,7 @@ const LinkButton = props => {
|
|
56
59
|
})
|
57
60
|
}), showInput && /*#__PURE__*/_jsx(Dialog, {
|
58
61
|
open: true,
|
62
|
+
className: `dialogComp`,
|
59
63
|
children: /*#__PURE__*/_jsxs(Grid, {
|
60
64
|
item: true,
|
61
65
|
xs: 12,
|
@@ -75,6 +79,7 @@ const LinkButton = props => {
|
|
75
79
|
children: [/*#__PURE__*/_jsx(Typography, {
|
76
80
|
variant: "h6",
|
77
81
|
className: "popupTitle",
|
82
|
+
color: "primary",
|
78
83
|
children: "LINK"
|
79
84
|
}), /*#__PURE__*/_jsx("div", {
|
80
85
|
style: {
|
@@ -112,12 +117,13 @@ const LinkButton = props => {
|
|
112
117
|
},
|
113
118
|
children: /*#__PURE__*/_jsx(FormControl, {
|
114
119
|
children: /*#__PURE__*/_jsx(FormControlLabel, {
|
115
|
-
control: /*#__PURE__*/_jsx(
|
120
|
+
control: /*#__PURE__*/_jsx(Checkbox, {
|
116
121
|
checked: showInNewTab,
|
117
122
|
onChange: handleInputChange
|
118
123
|
}),
|
119
124
|
label: /*#__PURE__*/_jsx(Typography, {
|
120
125
|
variant: "body1",
|
126
|
+
color: "primary",
|
121
127
|
sx: {
|
122
128
|
pl: 1
|
123
129
|
},
|
@@ -146,4 +152,5 @@ const LinkButton = props => {
|
|
146
152
|
})]
|
147
153
|
});
|
148
154
|
};
|
149
|
-
export default LinkButton;
|
155
|
+
export default LinkButton;
|
156
|
+
// export default styled(commonStyle)(LinkButton);
|
@@ -2,9 +2,9 @@ import React from "react";
|
|
2
2
|
import { IconButton } from "@mui/material";
|
3
3
|
import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
|
4
4
|
import { Transforms } from "slate";
|
5
|
-
import { useSlateStatic } from "slate-react";
|
5
|
+
import { ReactEditor, useSlateStatic } from "slate-react";
|
6
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
|
-
const NewLineButton =
|
7
|
+
const NewLineButton = () => {
|
8
8
|
const editor = useSlateStatic();
|
9
9
|
const onAddNewLine = () => {
|
10
10
|
Transforms.insertNodes(editor, [{
|
@@ -13,17 +13,19 @@ const NewLineButton = props => {
|
|
13
13
|
text: ""
|
14
14
|
}]
|
15
15
|
}], {
|
16
|
-
at: [editor.children.length]
|
16
|
+
at: [editor.children.length],
|
17
|
+
select: true
|
17
18
|
});
|
19
|
+
ReactEditor.focus(editor);
|
18
20
|
};
|
19
21
|
return /*#__PURE__*/_jsx(IconButton, {
|
20
22
|
title: "New Line",
|
21
23
|
onClick: onAddNewLine,
|
22
24
|
children: /*#__PURE__*/_jsx(KeyboardReturnIcon, {
|
23
25
|
sx: {
|
24
|
-
fill:
|
25
|
-
width:
|
26
|
-
height:
|
26
|
+
fill: "#64748B",
|
27
|
+
width: "18px",
|
28
|
+
height: "18px"
|
27
29
|
}
|
28
30
|
})
|
29
31
|
});
|
@@ -1,4 +1,4 @@
|
|
1
|
-
.signature-popup .MuiTab-root {
|
1
|
+
.af-signature-popup .MuiTab-root {
|
2
2
|
background: #ffffff;
|
3
3
|
border: 1px solid #d3d3d3 !important;
|
4
4
|
border-radius: 7px;
|
@@ -13,18 +13,18 @@
|
|
13
13
|
color: #0f172a !important;
|
14
14
|
opacity: 0.7;
|
15
15
|
}
|
16
|
-
.signature-popup .MuiTab-root.Mui-selected {
|
16
|
+
.af-signature-popup .MuiTab-root.Mui-selected {
|
17
17
|
background: #ffffff;
|
18
18
|
border: 1px solid #2563eb !important;
|
19
19
|
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08);
|
20
20
|
border-radius: 7px;
|
21
21
|
color: #0f172a !important;
|
22
22
|
}
|
23
|
-
.signature-popup .MuiTabs-indicator {
|
23
|
+
.af-signature-popup .MuiTabs-indicator {
|
24
24
|
display: none;
|
25
25
|
}
|
26
26
|
|
27
|
-
.signature-popup input.signColorPicker {
|
27
|
+
.af-signature-popup input.signColorPicker {
|
28
28
|
margin-bottom: 0px !important;
|
29
29
|
}
|
30
30
|
input[type="color"].signColorPicker {
|
@@ -4,8 +4,10 @@ import CloseIcon from "@mui/icons-material/Close";
|
|
4
4
|
import DatePicker from "react-datepicker";
|
5
5
|
import "react-datepicker/dist/react-datepicker.css";
|
6
6
|
import SignatureOptions from "./SignatureOptions";
|
7
|
-
import
|
7
|
+
import "./Signature.css";
|
8
8
|
import { DrawSignature, PencilIcon, TypeSignature, UploadSignature } from "../../common/EditorIcons";
|
9
|
+
import CommonStyle from "../../commonStyle";
|
10
|
+
import { styled } from "@mui/material/styles";
|
9
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
10
12
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
11
13
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
@@ -14,7 +16,8 @@ const SignaturePopup = props => {
|
|
14
16
|
const {
|
15
17
|
onSave,
|
16
18
|
onClear,
|
17
|
-
customProps
|
19
|
+
customProps,
|
20
|
+
className
|
18
21
|
} = props;
|
19
22
|
const [open, setOpen] = useState(false);
|
20
23
|
const [tab, setTab] = useState(0);
|
@@ -79,6 +82,7 @@ const SignaturePopup = props => {
|
|
79
82
|
children: "Sign Here"
|
80
83
|
})
|
81
84
|
}), /*#__PURE__*/_jsx(Dialog, {
|
85
|
+
className: `${className} dialogComp`,
|
82
86
|
open: open,
|
83
87
|
onClose: handleClose,
|
84
88
|
fullWidth: true,
|
@@ -103,6 +107,7 @@ const SignaturePopup = props => {
|
|
103
107
|
children: [/*#__PURE__*/_jsx(Typography, {
|
104
108
|
variant: "h6",
|
105
109
|
className: "popupTitle",
|
110
|
+
color: "primary",
|
106
111
|
children: "SIGNATURE"
|
107
112
|
}), /*#__PURE__*/_jsx("div", {
|
108
113
|
style: {
|
@@ -119,7 +124,7 @@ const SignaturePopup = props => {
|
|
119
124
|
sx: {
|
120
125
|
p: 0
|
121
126
|
},
|
122
|
-
className: "signature-popup",
|
127
|
+
className: "af-signature-popup",
|
123
128
|
children: [/*#__PURE__*/_jsx("div", {
|
124
129
|
className: "signature-btn-grps",
|
125
130
|
children: /*#__PURE__*/_jsxs(Tabs, {
|
@@ -293,4 +298,6 @@ const SignaturePopup = props => {
|
|
293
298
|
})]
|
294
299
|
});
|
295
300
|
};
|
296
|
-
|
301
|
+
|
302
|
+
// export default SignaturePopup;
|
303
|
+
export default styled(SignaturePopup)(CommonStyle);
|
@@ -5,6 +5,8 @@ import { Transforms } from "slate";
|
|
5
5
|
import { TableUtil } from "../../utils/table.js";
|
6
6
|
import "./TableSelector.css";
|
7
7
|
import CloseIcon from "@mui/icons-material/Close";
|
8
|
+
// import commonStyle from "../../commonStyle";
|
9
|
+
// import styled from "@emotion/styled";
|
8
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
9
11
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
10
12
|
const TableSelector = ({
|
@@ -50,7 +52,7 @@ const TableSelector = ({
|
|
50
52
|
})
|
51
53
|
}), showOptions ? /*#__PURE__*/_jsx(Dialog, {
|
52
54
|
open: showOptions,
|
53
|
-
className:
|
55
|
+
className: `dialogComp tablePopup`,
|
54
56
|
children: /*#__PURE__*/_jsxs(Grid, {
|
55
57
|
item: true,
|
56
58
|
xs: 12,
|
@@ -68,6 +70,7 @@ const TableSelector = ({
|
|
68
70
|
children: [/*#__PURE__*/_jsx(Typography, {
|
69
71
|
variant: "h6",
|
70
72
|
className: "popupTitle",
|
73
|
+
color: "primary",
|
71
74
|
children: "Table"
|
72
75
|
}), /*#__PURE__*/_jsx(Grid, {
|
73
76
|
style: {
|
@@ -103,7 +106,7 @@ const TableSelector = ({
|
|
103
106
|
variant: "body1",
|
104
107
|
color: "textSecondary",
|
105
108
|
sx: {
|
106
|
-
fontSize:
|
109
|
+
fontSize: "14px"
|
107
110
|
},
|
108
111
|
children: "No.of Rows"
|
109
112
|
})
|
@@ -129,7 +132,7 @@ const TableSelector = ({
|
|
129
132
|
variant: "body1",
|
130
133
|
color: "textSecondary",
|
131
134
|
sx: {
|
132
|
-
fontSize:
|
135
|
+
fontSize: "14px"
|
133
136
|
},
|
134
137
|
children: "No.of Columns"
|
135
138
|
})
|
@@ -163,4 +166,5 @@ const TableSelector = ({
|
|
163
166
|
}) : null]
|
164
167
|
});
|
165
168
|
};
|
166
|
-
export default TableSelector;
|
169
|
+
export default TableSelector;
|
170
|
+
// export default styled(commonStyle)(TableSelector);
|
@@ -5,10 +5,14 @@ const buttonStyle = [{
|
|
5
5
|
label: "Button Text",
|
6
6
|
key: "label",
|
7
7
|
type: "text"
|
8
|
-
}
|
9
|
-
|
10
|
-
|
11
|
-
|
8
|
+
}]
|
9
|
+
}, {
|
10
|
+
tab: "Link",
|
11
|
+
value: "link",
|
12
|
+
fields: [{
|
13
|
+
label: "Button Link",
|
14
|
+
key: "buttonLink",
|
15
|
+
type: "buttonLink"
|
12
16
|
}]
|
13
17
|
}, {
|
14
18
|
tab: "Banner Spacing",
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { Grid, Radio, RadioGroup, FormControl, FormLabel, FormControlLabel } from "@mui/material";
|
2
|
+
import { Grid, Radio, RadioGroup, FormControl, FormLabel, FormControlLabel, 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 Alignment = props => {
|
@@ -21,7 +21,6 @@ const Alignment = props => {
|
|
21
21
|
};
|
22
22
|
return /*#__PURE__*/_jsxs(Grid, {
|
23
23
|
container: true,
|
24
|
-
padding: 3,
|
25
24
|
style: {
|
26
25
|
paddingTop: "12px"
|
27
26
|
},
|
@@ -32,7 +31,11 @@ const Alignment = props => {
|
|
32
31
|
children: /*#__PURE__*/_jsxs(FormControl, {
|
33
32
|
children: [/*#__PURE__*/_jsx(FormLabel, {
|
34
33
|
id: "demo-row-radio-buttons-group-label",
|
35
|
-
children:
|
34
|
+
children: /*#__PURE__*/_jsx(Typography, {
|
35
|
+
variant: "body1",
|
36
|
+
color: "primary",
|
37
|
+
children: "Horizantal Position"
|
38
|
+
})
|
36
39
|
}), /*#__PURE__*/_jsxs(RadioGroup, {
|
37
40
|
row: true,
|
38
41
|
"aria-labelledby": "demo-row-radio-buttons-group-label",
|
@@ -60,7 +63,11 @@ const Alignment = props => {
|
|
60
63
|
children: /*#__PURE__*/_jsxs(FormControl, {
|
61
64
|
children: [/*#__PURE__*/_jsx(FormLabel, {
|
62
65
|
id: "demo-row-radio-buttons-group-label",
|
63
|
-
children:
|
66
|
+
children: /*#__PURE__*/_jsx(Typography, {
|
67
|
+
variant: "body1",
|
68
|
+
color: "primary",
|
69
|
+
children: "Vertical Position"
|
70
|
+
})
|
64
71
|
}), /*#__PURE__*/_jsxs(RadioGroup, {
|
65
72
|
row: true,
|
66
73
|
"aria-labelledby": "demo-row-radio-buttons-group-label",
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
|
-
import { Grid, Button } from "@mui/material";
|
2
|
+
import { Grid, Button, Typography } from "@mui/material";
|
3
3
|
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
|
4
4
|
import { convertBase64 } from "../../../utils/helper";
|
5
5
|
import { uploadFile } from "../../../service/fileupload";
|
@@ -43,14 +43,13 @@ const BackgroundImage = props => {
|
|
43
43
|
};
|
44
44
|
return /*#__PURE__*/_jsxs(Grid, {
|
45
45
|
container: true,
|
46
|
-
padding: 3,
|
47
46
|
children: [/*#__PURE__*/_jsxs(Grid, {
|
48
47
|
item: true,
|
49
48
|
xs: 12,
|
50
49
|
style: {
|
51
50
|
display: "flex"
|
52
51
|
},
|
53
|
-
justifyContent: "
|
52
|
+
justifyContent: "space-between",
|
54
53
|
alignItems: "center",
|
55
54
|
children: [/*#__PURE__*/_jsxs(Button, {
|
56
55
|
component: "label",
|
@@ -59,16 +58,24 @@ const BackgroundImage = props => {
|
|
59
58
|
children: ["Upload file", /*#__PURE__*/_jsx("input", {
|
60
59
|
type: "file",
|
61
60
|
style: {
|
62
|
-
opacity: 0
|
61
|
+
opacity: 0,
|
62
|
+
width: "0px"
|
63
63
|
},
|
64
64
|
onChange: handleChange
|
65
65
|
})]
|
66
|
-
}), /*#__PURE__*/
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
66
|
+
}), /*#__PURE__*/_jsxs(Grid, {
|
67
|
+
className: "dflex",
|
68
|
+
children: [/*#__PURE__*/_jsx("input", {
|
69
|
+
type: "checkbox",
|
70
|
+
value: "none",
|
71
|
+
checked: value === "none",
|
72
|
+
onChange: onRemoveBG
|
73
|
+
}), " ", /*#__PURE__*/_jsx(Typography, {
|
74
|
+
variant: "body1",
|
75
|
+
color: "primary",
|
76
|
+
children: "Remove"
|
77
|
+
})]
|
78
|
+
})]
|
72
79
|
}), uploading ? "Uploading..." : "", /*#__PURE__*/_jsx(Grid, {
|
73
80
|
item: true,
|
74
81
|
xs: 12,
|
@@ -0,0 +1,113 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { FormControl, FormLabel, RadioGroup, FormControlLabel, Grid, Radio, TextField, Select, MenuItem } from "@mui/material";
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
5
|
+
const ButtonLink = props => {
|
6
|
+
const {
|
7
|
+
value,
|
8
|
+
data,
|
9
|
+
elementProps,
|
10
|
+
customProps,
|
11
|
+
onChange
|
12
|
+
} = props;
|
13
|
+
const {
|
14
|
+
key
|
15
|
+
} = data;
|
16
|
+
const {
|
17
|
+
metadata
|
18
|
+
} = customProps || {
|
19
|
+
metadata: {}
|
20
|
+
};
|
21
|
+
const {
|
22
|
+
buttonLink
|
23
|
+
} = metadata || {
|
24
|
+
actionTrigger: {}
|
25
|
+
};
|
26
|
+
const {
|
27
|
+
actionTrigger
|
28
|
+
} = buttonLink || {};
|
29
|
+
const {
|
30
|
+
options,
|
31
|
+
onClick
|
32
|
+
} = actionTrigger || {
|
33
|
+
options: []
|
34
|
+
};
|
35
|
+
const optSelected = options.filter(f => f.selected) || [];
|
36
|
+
const handleChange = e => {
|
37
|
+
onChange({
|
38
|
+
[key]: {
|
39
|
+
...value,
|
40
|
+
[e.target.name]: e.target.value,
|
41
|
+
onClick: onClick || {}
|
42
|
+
}
|
43
|
+
});
|
44
|
+
};
|
45
|
+
const onURLChange = e => {
|
46
|
+
onChange({
|
47
|
+
url: e.target.value
|
48
|
+
});
|
49
|
+
};
|
50
|
+
const renderLinkTypeFields = () => {
|
51
|
+
if (value?.linkType === "webAddress") {
|
52
|
+
return /*#__PURE__*/_jsx(Grid, {
|
53
|
+
item: true,
|
54
|
+
xs: 12,
|
55
|
+
children: /*#__PURE__*/_jsx(TextField, {
|
56
|
+
fullWidth: true,
|
57
|
+
size: "small",
|
58
|
+
placeholder: "https://",
|
59
|
+
onChange: onURLChange,
|
60
|
+
value: elementProps?.url
|
61
|
+
})
|
62
|
+
});
|
63
|
+
} else if (value?.linkType === "actionTrigger") {
|
64
|
+
return /*#__PURE__*/_jsx(Grid, {
|
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
|
+
});
|
80
|
+
}
|
81
|
+
};
|
82
|
+
return /*#__PURE__*/_jsxs(Grid, {
|
83
|
+
container: true,
|
84
|
+
padding: 4,
|
85
|
+
spacing: 1,
|
86
|
+
children: [/*#__PURE__*/_jsx(Grid, {
|
87
|
+
item: true,
|
88
|
+
xs: 12,
|
89
|
+
children: /*#__PURE__*/_jsxs(FormControl, {
|
90
|
+
children: [/*#__PURE__*/_jsx(FormLabel, {
|
91
|
+
id: "demo-radio-buttons-group-label",
|
92
|
+
children: "Where do you want to Link?"
|
93
|
+
}), /*#__PURE__*/_jsxs(RadioGroup, {
|
94
|
+
row: true,
|
95
|
+
"aria-labelledby": "demo-radio-buttons-group-label",
|
96
|
+
value: value?.linkType || "",
|
97
|
+
name: "linkType",
|
98
|
+
onChange: handleChange,
|
99
|
+
children: [/*#__PURE__*/_jsx(FormControlLabel, {
|
100
|
+
value: "actionTrigger",
|
101
|
+
control: /*#__PURE__*/_jsx(Radio, {}),
|
102
|
+
label: "Action Trigger"
|
103
|
+
}), /*#__PURE__*/_jsx(FormControlLabel, {
|
104
|
+
value: "webAddress",
|
105
|
+
control: /*#__PURE__*/_jsx(Radio, {}),
|
106
|
+
label: "Web Address"
|
107
|
+
})]
|
108
|
+
})]
|
109
|
+
})
|
110
|
+
}), renderLinkTypeFields()]
|
111
|
+
});
|
112
|
+
};
|
113
|
+
export default ButtonLink;
|
@@ -8,6 +8,7 @@ import GridSize from "./gridSize";
|
|
8
8
|
import ElementSize from "./elementSize";
|
9
9
|
import ImageTexts from "./imageTexts";
|
10
10
|
import MenusArray from "./menusArray";
|
11
|
+
import ButtonLink from "./buttonLink";
|
11
12
|
const FieldMap = {
|
12
13
|
text: Text,
|
13
14
|
bannerSpacing: BannerSpacing,
|
@@ -18,6 +19,7 @@ const FieldMap = {
|
|
18
19
|
gridSize: GridSize,
|
19
20
|
elementSize: ElementSize,
|
20
21
|
imageTexts: ImageTexts,
|
21
|
-
menusArray: MenusArray
|
22
|
+
menusArray: MenusArray,
|
23
|
+
buttonLink: ButtonLink
|
22
24
|
};
|
23
25
|
export default FieldMap;
|
@@ -2,6 +2,8 @@ import React, { useState } from "react";
|
|
2
2
|
import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Tabs, Tab, Grid, IconButton, Typography } from "@mui/material";
|
3
3
|
import FieldMap from "./fieldTypes";
|
4
4
|
import CloseIcon from "@mui/icons-material/Close";
|
5
|
+
import commonStyle from "../../commonStyle";
|
6
|
+
import { styled } from "@mui/material/styles";
|
5
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
7
9
|
const StyleContent = props => {
|
@@ -70,6 +72,7 @@ const StyleBuilder = props => {
|
|
70
72
|
onClose,
|
71
73
|
onDelete,
|
72
74
|
customProps
|
75
|
+
// className,
|
73
76
|
} = props;
|
74
77
|
const [elementProps, setElementProps] = useState(element);
|
75
78
|
const [tab, setTab] = useState(renderTabs[0]?.value);
|
@@ -88,6 +91,7 @@ const StyleBuilder = props => {
|
|
88
91
|
return /*#__PURE__*/_jsx(Dialog, {
|
89
92
|
open: true,
|
90
93
|
fullWidth: true,
|
94
|
+
className: ` dialogComp`,
|
91
95
|
children: /*#__PURE__*/_jsxs(Grid, {
|
92
96
|
item: true,
|
93
97
|
xs: 12,
|
@@ -105,6 +109,7 @@ const StyleBuilder = props => {
|
|
105
109
|
children: [/*#__PURE__*/_jsx(Typography, {
|
106
110
|
variant: "h6",
|
107
111
|
className: "popupTitle",
|
112
|
+
color: "primary",
|
108
113
|
children: title
|
109
114
|
}), /*#__PURE__*/_jsx(Grid, {
|
110
115
|
style: {
|
@@ -155,4 +160,6 @@ const StyleBuilder = props => {
|
|
155
160
|
})
|
156
161
|
});
|
157
162
|
};
|
158
|
-
|
163
|
+
|
164
|
+
// export default StyleBuilder;
|
165
|
+
export default styled(StyleBuilder)(commonStyle);
|
@@ -55,9 +55,9 @@ const Uploader = props => {
|
|
55
55
|
children: [/*#__PURE__*/_jsxs(Button, {
|
56
56
|
component: "label",
|
57
57
|
sx: {
|
58
|
-
display:
|
59
|
-
width:
|
60
|
-
whiteSpace:
|
58
|
+
display: "inline-flex",
|
59
|
+
width: "154px",
|
60
|
+
whiteSpace: "nowrap"
|
61
61
|
},
|
62
62
|
variant: "contained",
|
63
63
|
startIcon: /*#__PURE__*/_jsx(CloudUploadIcon, {}),
|
@@ -73,7 +73,7 @@ const Uploader = props => {
|
|
73
73
|
color: "secondary",
|
74
74
|
onClick: onRemoveBG,
|
75
75
|
children: "Clear"
|
76
|
-
}) :
|
76
|
+
}) : ""]
|
77
77
|
})
|
78
78
|
}), uploading ? "Uploading..." : "", /*#__PURE__*/_jsx(Grid, {
|
79
79
|
item: true,
|
@@ -16,6 +16,7 @@ const withEmbeds = editor => {
|
|
16
16
|
editor.insertBreak = (...args) => {
|
17
17
|
const parentPath = Path.parent(editor.selection.focus.path);
|
18
18
|
const parentNode = Node.get(editor, parentPath);
|
19
|
+
console.log(parentNode, parentPath, args);
|
19
20
|
if (editor.isVoid(parentNode)) {
|
20
21
|
const nextPath = Path.next(parentPath);
|
21
22
|
Transforms.insertNodes(editor, {
|
@@ -0,0 +1,16 @@
|
|
1
|
+
export const actionButtonRedirect = async (formData, props) => {
|
2
|
+
try {
|
3
|
+
const response = await fetch(`${props.url}`, {
|
4
|
+
method: "POST",
|
5
|
+
headers: {
|
6
|
+
"Content-Type": "application/json"
|
7
|
+
},
|
8
|
+
body: JSON.stringify(formData)
|
9
|
+
});
|
10
|
+
const result = await response.json();
|
11
|
+
return result.data;
|
12
|
+
} catch (err) {
|
13
|
+
console.log(err);
|
14
|
+
return err;
|
15
|
+
}
|
16
|
+
};
|