@flozy/editor 1.8.3 → 1.8.5
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +11 -9
- package/dist/Editor/Editor.css +15 -12
- package/dist/Editor/Elements/AppHeader/AppHeader.js +5 -11
- package/dist/Editor/Elements/Button/EditorButton.js +4 -10
- package/dist/Editor/Elements/Carousel/Arrows.js +16 -2
- package/dist/Editor/Elements/Carousel/Carousel.js +1 -1
- package/dist/Editor/Elements/Carousel/slick-theme.min.css +1 -0
- package/dist/Editor/Elements/ChipText/ChipText.js +8 -12
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +5 -3
- package/dist/Editor/Elements/Color Picker/Styles.js +3 -17
- package/dist/Editor/Elements/Color Picker/colorWheel.png +0 -0
- package/dist/Editor/Elements/Embed/Embed.css +48 -45
- package/dist/Editor/Elements/Embed/Image.js +8 -14
- package/dist/Editor/Elements/Embed/Video.js +1 -7
- package/dist/Editor/Elements/Form/Form.js +17 -23
- package/dist/Editor/Elements/Form/FormElements/FormText.js +8 -12
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +8 -12
- package/dist/Editor/Elements/Grid/Grid.js +12 -20
- package/dist/Editor/Elements/Grid/GridItem.js +18 -24
- package/dist/Editor/Elements/Grid/templates/carousel_item.js +2 -3
- package/dist/Editor/Elements/Grid/templates/default_grid.js +2 -2
- package/dist/Editor/Elements/SimpleText.js +0 -1
- package/dist/Editor/Elements/Table/Table.js +3 -1
- package/dist/Editor/Elements/TopBanner/TopBanner.js +3 -1
- package/dist/Editor/IframeEditor.js +30 -0
- package/dist/Editor/MiniEditor.js +6 -8
- package/dist/Editor/Styles/EditorStyles.js +13 -3
- package/dist/Editor/Toolbar/Basic/index.js +3 -1
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +30 -13
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +7 -1
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +3 -0
- package/dist/Editor/Toolbar/PopupTool/index.js +4 -2
- package/dist/Editor/common/Icon.js +3 -0
- package/dist/Editor/common/Section/index.js +13 -16
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +13 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/gridSize.js +10 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +18 -4
- package/dist/Editor/common/StyleBuilder/formStyle.js +3 -0
- package/dist/Editor/common/StyleBuilder/gridItemStyle.js +18 -1
- package/dist/Editor/common/StyleBuilder/gridStyle.js +19 -1
- package/dist/Editor/common/StyleBuilder/sectionStyle.js +1 -1
- package/dist/Editor/helper/theme.js +83 -0
- package/dist/Editor/hooks/useWindowMessage.js +35 -0
- package/dist/Editor/hooks/useWindowResize.js +5 -2
- package/dist/Editor/plugins/withLayout.js +42 -27
- package/dist/Editor/utils/SlateUtilityFunctions.js +22 -5
- package/dist/Editor/utils/pageSettings.js +17 -0
- package/dist/index.js +3 -1
- package/package.json +1 -1
- package/dist/Editor/Elements/Color Picker/LogoIcon.js +0 -25
@@ -13,7 +13,7 @@ import { mentionsEvent, commands, indentation, escapeEvent, enterEvent } from ".
|
|
13
13
|
import withCommon from "./hooks/withCommon";
|
14
14
|
import DialogWrapper from "./DialogWrapper";
|
15
15
|
import { serializeToText } from "./utils/serializeToText";
|
16
|
-
import { getPageSettings } from "./utils/pageSettings";
|
16
|
+
import { findPageSettings, getPageSettings } from "./utils/pageSettings";
|
17
17
|
import { getThumbnailImage, invertColor } from "./helper";
|
18
18
|
import PopupTool from "./Toolbar/PopupTool";
|
19
19
|
import "./font.css";
|
@@ -30,6 +30,7 @@ import Section from "./common/Section";
|
|
30
30
|
import "animate.css";
|
31
31
|
import decorators from "./utils/Decorators";
|
32
32
|
import useElement from "./utils/customHooks/useElement";
|
33
|
+
import { getTRBLBreakPoints } from "./helper/theme";
|
33
34
|
import { jsx as _jsx } from "react/jsx-runtime";
|
34
35
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
35
36
|
const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar"];
|
@@ -73,7 +74,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
73
74
|
editor: collaborativeEditor,
|
74
75
|
readOnly,
|
75
76
|
toolbarOptions,
|
76
|
-
otherProps
|
77
|
+
otherProps,
|
78
|
+
isIframe
|
77
79
|
} = props;
|
78
80
|
const editorWrapper = useRef();
|
79
81
|
const mentionsRef = useRef();
|
@@ -336,7 +338,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
336
338
|
footer: footer || "",
|
337
339
|
children: /*#__PURE__*/_jsx(Box, {
|
338
340
|
component: "div",
|
339
|
-
className: `${editorClass || ""}`,
|
341
|
+
className: `${editorClass || ""} ${isIframe ? "iframe-editor" : ""}`,
|
340
342
|
sx: classes.root,
|
341
343
|
style: {
|
342
344
|
...dotBg
|
@@ -360,15 +362,15 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
360
362
|
background: pageColor || "#FFF",
|
361
363
|
color: pageTextColor || "#000000"
|
362
364
|
},
|
363
|
-
children: /*#__PURE__*/_jsxs(
|
365
|
+
children: /*#__PURE__*/_jsxs(Box, {
|
366
|
+
component: "div",
|
364
367
|
ref: editorWrapper,
|
365
368
|
className: `editor-wrapper ${pageWidth === "fixed" ? "fixed" : "full"}`,
|
366
|
-
|
369
|
+
sx: {
|
367
370
|
backgroundColor: "transparent",
|
368
|
-
|
369
|
-
|
370
|
-
|
371
|
-
paddingBottom: `${bannerSpacing?.bottom}px`,
|
371
|
+
padding: {
|
372
|
+
...getTRBLBreakPoints(bannerSpacing)
|
373
|
+
},
|
372
374
|
width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
|
373
375
|
height: viewport.h ? `${viewport.h}px` : `100%`,
|
374
376
|
alignSelf: "center",
|
package/dist/Editor/Editor.css
CHANGED
@@ -169,10 +169,21 @@ blockquote {
|
|
169
169
|
border: 1px solid #2684ff;
|
170
170
|
}
|
171
171
|
|
172
|
+
.grid-container-toolbar-hide button {
|
173
|
+
display: none !important;
|
174
|
+
}
|
175
|
+
|
176
|
+
.no-border-button button,
|
177
|
+
.no-border-button button:hover {
|
178
|
+
border: none
|
179
|
+
}
|
180
|
+
|
172
181
|
.grid-item {
|
173
182
|
padding: 0px;
|
174
|
-
background-color: #fff;
|
175
183
|
position: relative;
|
184
|
+
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
|
185
|
+
-moz-box-sizing: border-box; /* Firefox, other Gecko */
|
186
|
+
box-sizing: border-box; /* Opera/IE 8+ */
|
176
187
|
}
|
177
188
|
|
178
189
|
.accordion-container {
|
@@ -478,14 +489,6 @@ blockquote {
|
|
478
489
|
display: flex;
|
479
490
|
}
|
480
491
|
|
481
|
-
.grid-container > div {
|
482
|
-
flex-direction: column !important;
|
483
|
-
}
|
484
|
-
|
485
|
-
.grid-item {
|
486
|
-
width: 100% !important;
|
487
|
-
}
|
488
|
-
|
489
492
|
.page-builder .editor-wrapper {
|
490
493
|
max-width: 100% !important;
|
491
494
|
margin-top: 0px !important;
|
@@ -871,11 +874,11 @@ blockquote {
|
|
871
874
|
padding-left: 16px;
|
872
875
|
}
|
873
876
|
.cradio-primary .MuiRadio-root {
|
874
|
-
color: #
|
877
|
+
color: #e0e0e0;
|
875
878
|
}
|
876
879
|
.cradio-primary .MuiRadio-root.Mui-checked,
|
877
880
|
.ccheckbox-primary .MuiCheckbox-root.Mui-checked {
|
878
|
-
color: #2563eb
|
881
|
+
color: #2563eb;
|
879
882
|
}
|
880
883
|
|
881
884
|
.spacingSlider .MuiSlider-thumb {
|
@@ -957,7 +960,7 @@ blockquote {
|
|
957
960
|
padding: 8px 0px;
|
958
961
|
}
|
959
962
|
.sidebar-wrpr-eds .MuiTypography-body1 {
|
960
|
-
color: #
|
963
|
+
color: #0f172a;
|
961
964
|
font-size: 14px;
|
962
965
|
}
|
963
966
|
|
@@ -19,6 +19,7 @@ import DeleteIcon from "@mui/icons-material/Delete";
|
|
19
19
|
import AppHeaderPopup from "./AppHeaderPopup";
|
20
20
|
import { Tooltip } from "@mui/material";
|
21
21
|
import { GridSettingsIcon } from "../../common/iconslist";
|
22
|
+
import { getTRBLBreakPoints } from "../../helper/theme";
|
22
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
23
24
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
24
25
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
@@ -48,12 +49,6 @@ function AppHeader(props) {
|
|
48
49
|
titleFontFamily,
|
49
50
|
isLogoRight
|
50
51
|
} = element;
|
51
|
-
const {
|
52
|
-
left,
|
53
|
-
top,
|
54
|
-
right,
|
55
|
-
bottom
|
56
|
-
} = bannerSpacing || {};
|
57
52
|
const {
|
58
53
|
window
|
59
54
|
} = props;
|
@@ -198,14 +193,13 @@ function AppHeader(props) {
|
|
198
193
|
},
|
199
194
|
children: [/*#__PURE__*/_jsx(CssBaseline, {}), /*#__PURE__*/_jsx(AppBar, {
|
200
195
|
component: "nav",
|
201
|
-
|
196
|
+
sx: {
|
202
197
|
...elevateStyle,
|
203
198
|
background: bgColor,
|
204
199
|
boxShadow: "none",
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
paddingBottom: `${bottom}px`,
|
200
|
+
padding: {
|
201
|
+
...getTRBLBreakPoints(bannerSpacing)
|
202
|
+
},
|
209
203
|
zIndex: 999
|
210
204
|
},
|
211
205
|
children: /*#__PURE__*/_jsxs(Toolbar, {
|
@@ -9,6 +9,7 @@ import DeleteIcon from "@mui/icons-material/Delete";
|
|
9
9
|
import ButtonPopup from "./ButtonPopup";
|
10
10
|
import { actionButtonRedirect } from "../../service/actionTrigger";
|
11
11
|
import { WorkflowIcon } from "../../common/iconslist";
|
12
|
+
import { getTRBLBreakPoints } from "../../helper/theme";
|
12
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
13
14
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
14
15
|
const EditorButton = props => {
|
@@ -55,12 +56,6 @@ const EditorButton = props => {
|
|
55
56
|
bottomLeft,
|
56
57
|
bottomRight
|
57
58
|
} = borderRadius || {};
|
58
|
-
const {
|
59
|
-
left,
|
60
|
-
top,
|
61
|
-
right,
|
62
|
-
bottom
|
63
|
-
} = bannerSpacing || {};
|
64
59
|
const BtnIcon = buttonIcon ? fIcons[buttonIcon] : null;
|
65
60
|
const onClick = async e => {
|
66
61
|
if (readOnly) {
|
@@ -167,10 +162,9 @@ const EditorButton = props => {
|
|
167
162
|
borderWidth: borderWidth || "1px",
|
168
163
|
borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
|
169
164
|
borderStyle: borderStyle || "solid",
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
paddingBottom: `${bottom || 8}px`,
|
165
|
+
padding: {
|
166
|
+
...getTRBLBreakPoints(bannerSpacing)
|
167
|
+
},
|
174
168
|
color: `${textColor || "#FFFFFF"}`,
|
175
169
|
fontSize: textSize || "inherit",
|
176
170
|
fontFamily: fontFamily || "PoppinsRegular",
|
@@ -12,9 +12,16 @@ export const PrevArrow = props => {
|
|
12
12
|
className: className,
|
13
13
|
style: {
|
14
14
|
...style,
|
15
|
-
position: "absolute"
|
15
|
+
position: "absolute",
|
16
|
+
left: '5px',
|
17
|
+
zIndex: 3
|
16
18
|
},
|
17
19
|
onClick: onClick,
|
20
|
+
sx: {
|
21
|
+
'&.MuiButtonBase-root': {
|
22
|
+
lineHeight: "0px !important"
|
23
|
+
}
|
24
|
+
},
|
18
25
|
contentEditable: false,
|
19
26
|
children: /*#__PURE__*/_jsx(Icon, {
|
20
27
|
icon: "leftArrow"
|
@@ -31,7 +38,14 @@ export const NextArrow = props => {
|
|
31
38
|
className: className,
|
32
39
|
style: {
|
33
40
|
...style,
|
34
|
-
position: "absolute"
|
41
|
+
position: "absolute",
|
42
|
+
right: '5px',
|
43
|
+
zIndex: 3
|
44
|
+
},
|
45
|
+
sx: {
|
46
|
+
'&.MuiButtonBase-root': {
|
47
|
+
lineHeight: "0px !important"
|
48
|
+
}
|
35
49
|
},
|
36
50
|
onClick: onClick,
|
37
51
|
contentEditable: false,
|
@@ -3,6 +3,8 @@ import { Transforms } from "slate";
|
|
3
3
|
import { useSlateStatic, ReactEditor } from "slate-react";
|
4
4
|
import * as fIcons from "@mui/icons-material";
|
5
5
|
import ChipTextPopup from "./ChipTextPopup";
|
6
|
+
import { getTRBLBreakPoints } from "../../helper/theme";
|
7
|
+
import { Box } from "@mui/material";
|
6
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
9
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
10
|
const ChipText = props => {
|
@@ -24,12 +26,6 @@ const ChipText = props => {
|
|
24
26
|
buttonIcon,
|
25
27
|
textSize
|
26
28
|
} = element;
|
27
|
-
const {
|
28
|
-
left,
|
29
|
-
top,
|
30
|
-
right,
|
31
|
-
bottom
|
32
|
-
} = bannerSpacing || {};
|
33
29
|
const {
|
34
30
|
topLeft,
|
35
31
|
topRight,
|
@@ -74,17 +70,17 @@ const ChipText = props => {
|
|
74
70
|
console.log(err);
|
75
71
|
}
|
76
72
|
};
|
77
|
-
return /*#__PURE__*/_jsxs(
|
73
|
+
return /*#__PURE__*/_jsxs(Box, {
|
74
|
+
component: "button",
|
78
75
|
...attributes,
|
79
76
|
className: "editor-chip-text",
|
80
77
|
contentEditable: false,
|
81
|
-
|
78
|
+
sx: {
|
82
79
|
display: "inline-block",
|
83
80
|
verticalAlign: "middle",
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
paddingBottom: `${bottom}px`,
|
81
|
+
padding: {
|
82
|
+
...getTRBLBreakPoints(bannerSpacing)
|
83
|
+
},
|
88
84
|
border: borderColor ? `1px solid ${borderColor}` : "none",
|
89
85
|
borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
|
90
86
|
background: bgColor || "#CCC",
|
@@ -4,9 +4,9 @@ import { Transforms } from "slate";
|
|
4
4
|
import ColorPickerTool from "react-gcolor-picker";
|
5
5
|
import { IconButton, Tooltip, Box, Popover } from "@mui/material";
|
6
6
|
import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
|
7
|
-
import { logo } from "./LogoIcon";
|
8
7
|
import ColorButtons from "./ColorButtons";
|
9
8
|
import ColorPickerStyles from "./Styles";
|
9
|
+
import colorWheel from "./colorWheel.png";
|
10
10
|
import "./ColorPicker.css";
|
11
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
12
12
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
@@ -50,7 +50,6 @@ const ColorPicker = ({
|
|
50
50
|
setAnchorEl(null);
|
51
51
|
};
|
52
52
|
const activeColor = activeMark(editor, format) || DEFAULT_COLOR[format];
|
53
|
-
const Logo = logo[format](activeColor);
|
54
53
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
55
54
|
children: [/*#__PURE__*/_jsx(Tooltip, {
|
56
55
|
title: title,
|
@@ -58,7 +57,10 @@ const ColorPicker = ({
|
|
58
57
|
children: /*#__PURE__*/_jsx(IconButton, {
|
59
58
|
sx: pickerStyles.colorPickerIcon,
|
60
59
|
onClick: onOpen,
|
61
|
-
children:
|
60
|
+
children: /*#__PURE__*/_jsx("img", {
|
61
|
+
src: colorWheel,
|
62
|
+
alt: "color wheel"
|
63
|
+
})
|
62
64
|
})
|
63
65
|
}), showHex ? /*#__PURE__*/_jsx(Box, {
|
64
66
|
sx: classes.hexStyle,
|
@@ -49,23 +49,9 @@ const ColorPickerStyles = () => ({
|
|
49
49
|
}
|
50
50
|
},
|
51
51
|
colorPickerIcon: {
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
zIndex: 1,
|
56
|
-
"&:before": {
|
57
|
-
content: '" "',
|
58
|
-
position: "absolute",
|
59
|
-
top: "3px",
|
60
|
-
left: "3px",
|
61
|
-
width: "calc(100% - 6px)",
|
62
|
-
height: "calc(100% - 6px)",
|
63
|
-
borderRadius: "50%",
|
64
|
-
background: "#E9F3FE",
|
65
|
-
zIndex: 2
|
66
|
-
},
|
67
|
-
"& svg": {
|
68
|
-
zIndex: 3
|
52
|
+
'& img': {
|
53
|
+
width: '24px',
|
54
|
+
height: '24px'
|
69
55
|
}
|
70
56
|
}
|
71
57
|
});
|
Binary file
|
@@ -1,82 +1,85 @@
|
|
1
1
|
.embed {
|
2
|
-
|
3
|
-
|
4
|
-
|
2
|
+
width: fit-content;
|
3
|
+
position: relative;
|
4
|
+
margin: 0px;
|
5
5
|
}
|
6
6
|
|
7
|
-
.embed img
|
7
|
+
.embed img {
|
8
|
+
width: 100%;
|
9
|
+
height: 100%
|
10
|
+
}
|
8
11
|
.embed iframe {
|
9
|
-
|
10
|
-
|
12
|
+
width: 100%;
|
13
|
+
height: 100%;
|
11
14
|
}
|
12
15
|
|
13
16
|
.embed button.resize {
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
+
position: absolute;
|
18
|
+
bottom: 2px;
|
19
|
+
right: 2px;
|
17
20
|
}
|
18
21
|
|
19
22
|
.image-text-wrapper {
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
23
|
+
padding: 0px;
|
24
|
+
margin: 0px;
|
25
|
+
left: 0px;
|
26
|
+
color: #fff;
|
27
|
+
font-weight: bold;
|
28
|
+
display: flex;
|
29
|
+
bottom: 0;
|
30
|
+
width: 100%;
|
31
|
+
flex-direction: column;
|
29
32
|
}
|
30
33
|
|
31
34
|
.image-text {
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
35
|
+
padding: 12px;
|
36
|
+
background-color: rgba(0, 0, 0, 0.5);
|
37
|
+
margin: 0px;
|
38
|
+
color: #fff;
|
39
|
+
font-weight: bold;
|
37
40
|
}
|
38
41
|
|
39
42
|
.link-embed-wrapper iframe {
|
40
|
-
|
41
|
-
|
43
|
+
width: 100%;
|
44
|
+
height: 100%;
|
42
45
|
}
|
43
46
|
|
44
47
|
.link-embed-wrapper {
|
45
|
-
|
46
|
-
|
48
|
+
width: 100%;
|
49
|
+
height: 100%;
|
47
50
|
}
|
48
51
|
|
49
52
|
.link-embed-wrapper iframe {
|
50
|
-
|
53
|
+
aspect-ratio: 16/9;
|
51
54
|
}
|
52
55
|
|
53
56
|
.link-embed-wrapper .deleteButton {
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
57
|
+
background-color: white;
|
58
|
+
/* box-shadow: 0px 0px 8px #ccc; */
|
59
|
+
padding: 5px;
|
60
|
+
width: 26px;
|
61
|
+
height: 26px;
|
59
62
|
}
|
60
63
|
|
61
64
|
.link-embed-wrapper-container {
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
65
|
+
position: relative;
|
66
|
+
display: flex;
|
67
|
+
width: 100%;
|
68
|
+
height: 100%;
|
66
69
|
}
|
67
70
|
|
68
71
|
.link-embed-wrapper-container .docDeleteContainer {
|
69
|
-
|
72
|
+
display: none;
|
70
73
|
}
|
71
74
|
|
72
75
|
.link-embed-wrapper-hover-container:hover .docDeleteContainer {
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
76
|
+
display: block;
|
77
|
+
position: absolute;
|
78
|
+
top: -16px;
|
79
|
+
right: 0;
|
80
|
+
background-color: white;
|
78
81
|
}
|
79
82
|
|
80
83
|
.link-embed-wrapper-hover-container:hover .link-embed-wrapper {
|
81
|
-
|
82
|
-
}
|
84
|
+
padding-top: 24px;
|
85
|
+
}
|
@@ -7,6 +7,7 @@ import EmbedPopup from "./EmbedPopup";
|
|
7
7
|
import { IconButton, Tooltip, Box } from "@mui/material";
|
8
8
|
import { GridSettingsIcon } from "../../common/iconslist";
|
9
9
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
10
|
+
import { getTRBLBreakPoints } from "../../helper/theme";
|
10
11
|
import Icon from "../../common/Icon";
|
11
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
12
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -29,12 +30,6 @@ const Image = ({
|
|
29
30
|
const {
|
30
31
|
readOnly
|
31
32
|
} = customProps;
|
32
|
-
const {
|
33
|
-
left,
|
34
|
-
top,
|
35
|
-
right,
|
36
|
-
bottom
|
37
|
-
} = bannerSpacing || {};
|
38
33
|
const {
|
39
34
|
topLeft,
|
40
35
|
topRight,
|
@@ -138,19 +133,18 @@ const Image = ({
|
|
138
133
|
draggable: false
|
139
134
|
});
|
140
135
|
};
|
141
|
-
const totalMinus = (parseInt(left) || 0) + (parseInt(right) || 0);
|
142
136
|
const width = resizing ? `${size.width}px` : `${size.widthInPercent}%`;
|
143
|
-
return /*#__PURE__*/_jsxs(
|
137
|
+
return /*#__PURE__*/_jsxs(Box, {
|
144
138
|
...attributes,
|
139
|
+
component: "div",
|
145
140
|
className: "embed has-hover",
|
146
|
-
|
141
|
+
sx: {
|
147
142
|
display: "flex",
|
148
|
-
width: `
|
143
|
+
width: `100%`,
|
149
144
|
maxWidth: "100%",
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
paddingBottom: `${bottom}px`,
|
145
|
+
padding: {
|
146
|
+
...getTRBLBreakPoints(bannerSpacing)
|
147
|
+
},
|
154
148
|
backgroundColor: bgColor,
|
155
149
|
justifyContent: horizantal,
|
156
150
|
alignContent: vertical,
|
@@ -21,7 +21,6 @@ const Video = ({
|
|
21
21
|
const {
|
22
22
|
alt,
|
23
23
|
alignment,
|
24
|
-
bannerSpacing,
|
25
24
|
borderRadius,
|
26
25
|
borderWidth,
|
27
26
|
borderColor,
|
@@ -38,10 +37,6 @@ const Video = ({
|
|
38
37
|
vertical,
|
39
38
|
horizantal
|
40
39
|
} = alignment || {};
|
41
|
-
const {
|
42
|
-
left,
|
43
|
-
right
|
44
|
-
} = bannerSpacing || {};
|
45
40
|
const path = ReactEditor.findPath(editor, element);
|
46
41
|
const [size, onMouseDown, resizing, onLoad] = useResize({
|
47
42
|
parentDOM,
|
@@ -113,7 +108,6 @@ const Video = ({
|
|
113
108
|
at: path
|
114
109
|
});
|
115
110
|
};
|
116
|
-
const totalMinus = parseInt(left || 0) + parseInt(right || 0);
|
117
111
|
const width = resizing ? `${size.width}px` : `${size.widthInPercent || 100}%`;
|
118
112
|
const embedURL = getEmbedURL(element);
|
119
113
|
const VideoContent = () => {
|
@@ -161,7 +155,7 @@ const Video = ({
|
|
161
155
|
className: "embed has-hover video",
|
162
156
|
style: {
|
163
157
|
display: "flex",
|
164
|
-
width: `
|
158
|
+
width: `100%`,
|
165
159
|
justifyContent: horizantal,
|
166
160
|
alignContent: vertical
|
167
161
|
},
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React, { useState, useRef } from "react";
|
2
2
|
import { Transforms } from "slate";
|
3
3
|
import { useSlateStatic, ReactEditor } from "slate-react";
|
4
|
-
import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress } from "@mui/material";
|
4
|
+
import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress, Box } from "@mui/material";
|
5
5
|
import DeleteIcon from "@mui/icons-material/Delete";
|
6
6
|
import BackupIcon from "@mui/icons-material/Backup";
|
7
7
|
import { GridSettingsIcon, GridAddSectionIcon, WorkflowIcon } from "../../common/iconslist";
|
@@ -11,6 +11,7 @@ import { formField } from "../../utils/formfield";
|
|
11
11
|
import { formSubmit } from "../../service/formSubmit";
|
12
12
|
import formButtonStyle from "../../common/StyleBuilder/formButtonStyle";
|
13
13
|
import Workflow from "./Workflow";
|
14
|
+
import { getTRBLBreakPoints } from "../../helper/theme";
|
14
15
|
import { jsx as _jsx } from "react/jsx-runtime";
|
15
16
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
16
17
|
const Form = props => {
|
@@ -39,12 +40,6 @@ const Form = props => {
|
|
39
40
|
fontFamily,
|
40
41
|
textAlign
|
41
42
|
} = element;
|
42
|
-
const {
|
43
|
-
left,
|
44
|
-
top,
|
45
|
-
right,
|
46
|
-
bottom
|
47
|
-
} = bannerSpacing || {};
|
48
43
|
const {
|
49
44
|
topLeft,
|
50
45
|
topRight,
|
@@ -237,20 +232,20 @@ const Form = props => {
|
|
237
232
|
},
|
238
233
|
onMouseOver: onMouseOver,
|
239
234
|
onMouseLeave: onMouseLeave,
|
240
|
-
children: [/*#__PURE__*/_jsxs(
|
235
|
+
children: [/*#__PURE__*/_jsxs(Box, {
|
236
|
+
component: "form",
|
241
237
|
id: `${formName}`,
|
242
238
|
onSubmit: handleSubmit,
|
243
|
-
|
239
|
+
sx: {
|
244
240
|
color: textColor || "#FFF",
|
245
241
|
borderColor: borderColor || "transparent",
|
246
242
|
borderWidth: borderWidth || "1px",
|
247
243
|
borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
|
248
244
|
borderStyle: borderStyle || "solid",
|
249
245
|
background: bgColor || "transparent",
|
250
|
-
|
251
|
-
|
252
|
-
|
253
|
-
paddingBottom: `${bottom}px`,
|
246
|
+
padding: {
|
247
|
+
...getTRBLBreakPoints(bannerSpacing)
|
248
|
+
},
|
254
249
|
position: "relative"
|
255
250
|
},
|
256
251
|
ref: formEle,
|
@@ -279,23 +274,22 @@ const Form = props => {
|
|
279
274
|
justifyContent: btnAlign?.horizantal || "start",
|
280
275
|
alignItems: btnAlign?.vertical || "start"
|
281
276
|
},
|
282
|
-
children: /*#__PURE__*/_jsx(
|
277
|
+
children: /*#__PURE__*/_jsx(Box, {
|
278
|
+
component: "button",
|
283
279
|
onClick: onSubmitClick,
|
284
280
|
disabled: loading,
|
285
|
-
|
281
|
+
sx: {
|
286
282
|
background: buttonProps?.bgColor || "rgb(30, 75, 122)",
|
287
283
|
borderWidth: "1px",
|
288
284
|
borderBlockStyle: "solid",
|
289
285
|
...btnBorderStyle,
|
290
286
|
borderRadius: `${btnR?.topLeft}px ${btnR?.topRight}px ${btnR?.bottomLeft}px ${btnR?.bottomRight}px`,
|
291
|
-
|
292
|
-
|
293
|
-
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
marginTop: `${btnM?.top || 0}px`,
|
298
|
-
marginBottom: `${btnM?.bottom || 0}px`,
|
287
|
+
padding: {
|
288
|
+
...getTRBLBreakPoints(btnSpacing)
|
289
|
+
},
|
290
|
+
margin: {
|
291
|
+
...getTRBLBreakPoints(btnM)
|
292
|
+
},
|
299
293
|
color: `${buttonProps?.textColor || "#FFFFFF"}`,
|
300
294
|
fontSize: buttonProps?.textSize || "inherit",
|
301
295
|
height: "fit-content",
|