@flozy/editor 1.8.2 → 1.8.4
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +13 -9
- package/dist/Editor/Editor.css +15 -12
- package/dist/Editor/Elements/AppHeader/AppHeader.js +5 -11
- package/dist/Editor/Elements/Attachments/Attachments.js +3 -0
- package/dist/Editor/Elements/Button/EditorButton.js +4 -10
- package/dist/Editor/Elements/Carousel/Arrows.js +13 -6
- package/dist/Editor/Elements/Carousel/Carousel.js +1 -1
- package/dist/Editor/Elements/Carousel/slick-theme.min.css +5 -22
- 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 +8 -20
- package/dist/Editor/Elements/Grid/GridItem.js +13 -23
- package/dist/Editor/Elements/Grid/templates/carousel_item.js +9 -4
- package/dist/Editor/Elements/Grid/templates/default_grid.js +2 -2
- package/dist/Editor/Elements/List/CheckList.js +10 -4
- package/dist/Editor/Elements/List/CheckListStyles.js +12 -0
- 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/Elements/Variables/Style.js +12 -0
- package/dist/Editor/Elements/Variables/Variable.js +27 -0
- package/dist/Editor/Elements/Variables/VariableButton.js +40 -0
- package/dist/Editor/IframeEditor.js +36 -0
- package/dist/Editor/MiniEditor.js +7 -10
- package/dist/Editor/Styles/EditorStyles.js +15 -7
- package/dist/Editor/Toolbar/Basic/index.js +18 -5
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +30 -13
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +7 -1
- package/dist/Editor/common/Icon.js +10 -2
- package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
- 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/formStyle.js +3 -0
- package/dist/Editor/common/StyleBuilder/sectionStyle.js +1 -1
- package/dist/Editor/common/iconslist.js +93 -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/plugins/withLinks.js +1 -1
- package/dist/Editor/utils/SlateUtilityFunctions.js +28 -5
- package/dist/Editor/utils/attachments.js +2 -1
- package/dist/Editor/utils/variables.js +45 -0
- package/dist/index.js +3 -1
- package/package.json +1 -1
- package/dist/Editor/Elements/Color Picker/LogoIcon.js +0 -25
@@ -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();
|
@@ -114,6 +116,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
114
116
|
bannerSpacing,
|
115
117
|
pageBgImage,
|
116
118
|
pageColor,
|
119
|
+
color: pageTextColor,
|
117
120
|
pageWidth
|
118
121
|
} = pageSt?.pageProps || {
|
119
122
|
bannerSpacing: {
|
@@ -335,7 +338,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
335
338
|
footer: footer || "",
|
336
339
|
children: /*#__PURE__*/_jsx(Box, {
|
337
340
|
component: "div",
|
338
|
-
className: `${editorClass || ""}`,
|
341
|
+
className: `${editorClass || ""} ${isIframe ? "iframe-editor" : ""}`,
|
339
342
|
sx: classes.root,
|
340
343
|
style: {
|
341
344
|
...dotBg
|
@@ -356,17 +359,18 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
356
359
|
children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
|
357
360
|
className: "scroll-area",
|
358
361
|
style: {
|
359
|
-
|
362
|
+
background: pageColor || "#FFF",
|
363
|
+
color: pageTextColor || "#000000"
|
360
364
|
},
|
361
|
-
children: /*#__PURE__*/_jsxs(
|
365
|
+
children: /*#__PURE__*/_jsxs(Box, {
|
366
|
+
component: "div",
|
362
367
|
ref: editorWrapper,
|
363
368
|
className: `editor-wrapper ${pageWidth === "fixed" ? "fixed" : "full"}`,
|
364
|
-
|
369
|
+
sx: {
|
365
370
|
backgroundColor: "transparent",
|
366
|
-
|
367
|
-
|
368
|
-
|
369
|
-
paddingBottom: `${bannerSpacing?.bottom}px`,
|
371
|
+
padding: {
|
372
|
+
...getTRBLBreakPoints(bannerSpacing)
|
373
|
+
},
|
370
374
|
width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
|
371
375
|
height: viewport.h ? `${viewport.h}px` : `100%`,
|
372
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, {
|
@@ -3,6 +3,7 @@ import { Box, Card, CardMedia, CardContent, Typography } from "@mui/material";
|
|
3
3
|
import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
|
4
4
|
import TextSnippetIcon from "@mui/icons-material/TextSnippet";
|
5
5
|
import { formatDate } from "../../utils/helper";
|
6
|
+
import Icon from "../../common/Icon";
|
6
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
9
|
const Attachments = props => {
|
@@ -52,6 +53,8 @@ const Attachments = props => {
|
|
52
53
|
},
|
53
54
|
children: type === "pdf" ? /*#__PURE__*/_jsx(PictureAsPdfIcon, {
|
54
55
|
className: "pdf-i"
|
56
|
+
}) : type === "xls" ? /*#__PURE__*/_jsx(Icon, {
|
57
|
+
icon: "excelIcon"
|
55
58
|
}) : /*#__PURE__*/_jsx(TextSnippetIcon, {
|
56
59
|
className: "doc-i"
|
57
60
|
})
|
@@ -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",
|
@@ -1,7 +1,6 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { IconButton } from "@mui/material";
|
3
|
-
import
|
4
|
-
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
|
3
|
+
import Icon from "../../common/Icon";
|
5
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
5
|
export const PrevArrow = props => {
|
7
6
|
const {
|
@@ -13,11 +12,15 @@ export const PrevArrow = props => {
|
|
13
12
|
className: className,
|
14
13
|
style: {
|
15
14
|
...style,
|
16
|
-
position: "absolute"
|
15
|
+
position: "absolute",
|
16
|
+
left: '5px',
|
17
|
+
zIndex: 3
|
17
18
|
},
|
18
19
|
onClick: onClick,
|
19
20
|
contentEditable: false,
|
20
|
-
children: /*#__PURE__*/_jsx(
|
21
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
22
|
+
icon: "leftArrow"
|
23
|
+
})
|
21
24
|
});
|
22
25
|
};
|
23
26
|
export const NextArrow = props => {
|
@@ -30,10 +33,14 @@ export const NextArrow = props => {
|
|
30
33
|
className: className,
|
31
34
|
style: {
|
32
35
|
...style,
|
33
|
-
position: "absolute"
|
36
|
+
position: "absolute",
|
37
|
+
right: '5px',
|
38
|
+
zIndex: 3
|
34
39
|
},
|
35
40
|
onClick: onClick,
|
36
41
|
contentEditable: false,
|
37
|
-
children: /*#__PURE__*/_jsx(
|
42
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
43
|
+
icon: "rightArrow"
|
44
|
+
})
|
38
45
|
});
|
39
46
|
};
|
@@ -91,8 +91,8 @@
|
|
91
91
|
.slick-dots li {
|
92
92
|
position: relative;
|
93
93
|
display: inline-block;
|
94
|
-
width:
|
95
|
-
height:
|
94
|
+
width: 10px;
|
95
|
+
height: 10px;
|
96
96
|
margin: 0 5px;
|
97
97
|
padding: 0;
|
98
98
|
cursor: pointer;
|
@@ -103,8 +103,8 @@
|
|
103
103
|
font-size: 0;
|
104
104
|
line-height: 0;
|
105
105
|
display: block;
|
106
|
-
width:
|
107
|
-
height:
|
106
|
+
width: 10px;
|
107
|
+
height: 10px;
|
108
108
|
padding: 5px;
|
109
109
|
cursor: pointer;
|
110
110
|
color: transparent;
|
@@ -120,24 +120,7 @@
|
|
120
120
|
.slick-dots li button:hover:before {
|
121
121
|
opacity: 1;
|
122
122
|
}
|
123
|
-
.slick-dots li button:before {
|
124
|
-
font-size: 6px;
|
125
|
-
line-height: 20px;
|
126
|
-
position: absolute;
|
127
|
-
top: 0;
|
128
|
-
left: 0;
|
129
|
-
width: 20px;
|
130
|
-
height: 20px;
|
131
|
-
content: "•";
|
132
|
-
text-align: center;
|
133
|
-
opacity: 0.25;
|
134
|
-
color: #000;
|
135
|
-
}
|
136
|
-
.slick-dots li.slick-active button:before {
|
137
|
-
opacity: 0.75;
|
138
|
-
color: #000;
|
139
|
-
}
|
140
123
|
|
141
124
|
.slick-dots li.slick-active {
|
142
|
-
background-color:
|
125
|
+
background-color: #2563EB;
|
143
126
|
}
|
@@ -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
|
},
|