@flozy/editor 3.1.6 → 3.1.7
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/Elements/Button/EditorButton.js +13 -17
- package/dist/Editor/Elements/Embed/EmbedPopup.js +1 -1
- package/dist/Editor/Elements/Embed/Image.js +5 -3
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/common/Shorthands/elements.js +9 -0
- package/dist/Editor/common/StyleBuilder/embedImageStyle.js +8 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderWidth.js +75 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +2 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +4 -0
- package/package.json +1 -1
@@ -83,10 +83,6 @@ const EditorButton = props => {
|
|
83
83
|
case "webAddress":
|
84
84
|
const refUrl = url ? url.includes("http") ? url : `//${url}` : "Link";
|
85
85
|
props.component = "a";
|
86
|
-
props.tabIndex = 1;
|
87
|
-
props.onClick = () => {
|
88
|
-
return false;
|
89
|
-
};
|
90
86
|
if (refUrl !== "Link") {
|
91
87
|
props.href = refUrl;
|
92
88
|
}
|
@@ -105,10 +101,6 @@ const EditorButton = props => {
|
|
105
101
|
break;
|
106
102
|
case "page":
|
107
103
|
props.component = "a";
|
108
|
-
props.tabIndex = 1;
|
109
|
-
props.onClick = () => {
|
110
|
-
return false;
|
111
|
-
};
|
112
104
|
const [page, section] = url.split("#");
|
113
105
|
props.href = page === "home" ? `#${section}` : `/${url}`;
|
114
106
|
if (openInNewTab) {
|
@@ -117,18 +109,10 @@ const EditorButton = props => {
|
|
117
109
|
break;
|
118
110
|
case "email":
|
119
111
|
props.component = "a";
|
120
|
-
props.tabIndex = 1;
|
121
|
-
props.onClick = () => {
|
122
|
-
return false;
|
123
|
-
};
|
124
112
|
props.href = `mailto:${url}`;
|
125
113
|
break;
|
126
114
|
case "phone":
|
127
115
|
props.component = "a";
|
128
|
-
props.tabIndex = 1;
|
129
|
-
props.onClick = () => {
|
130
|
-
return false;
|
131
|
-
};
|
132
116
|
props.href = `tel:${url}`;
|
133
117
|
break;
|
134
118
|
case "scrollTopOrBottom":
|
@@ -149,6 +133,18 @@ const EditorButton = props => {
|
|
149
133
|
default:
|
150
134
|
return {};
|
151
135
|
}
|
136
|
+
|
137
|
+
// for iphone fix
|
138
|
+
if (props.component === "a") {
|
139
|
+
props.onTouchEnd = e => {
|
140
|
+
e.preventDefault();
|
141
|
+
e.stopPropagation();
|
142
|
+
window.open(props.href, props.target);
|
143
|
+
};
|
144
|
+
props.onClick = () => {
|
145
|
+
return false;
|
146
|
+
};
|
147
|
+
}
|
152
148
|
return props;
|
153
149
|
};
|
154
150
|
const buttonProps = handleLinkType(readOnly, openInNewTab);
|
@@ -234,7 +230,7 @@ const EditorButton = props => {
|
|
234
230
|
className: "editor-btn-wrapper-inner",
|
235
231
|
sx: {
|
236
232
|
display: {
|
237
|
-
lg: "inline",
|
233
|
+
lg: "inline-block",
|
238
234
|
xs: xsHidden ? "none" : "inline-block"
|
239
235
|
},
|
240
236
|
"& .element-toolbar": {
|
@@ -13,7 +13,7 @@ const EmbedPopup = props => {
|
|
13
13
|
onDelete
|
14
14
|
} = props;
|
15
15
|
return /*#__PURE__*/_jsx(StyleBuilder, {
|
16
|
-
title: format === "image" ? "Image" : "Embed",
|
16
|
+
title: format === "image" ? "Image" : format === "video" ? "video" : format === "calendly" ? "calendly" : "Embed",
|
17
17
|
type: format === "image" ? "embedImageStyle" : "embedVideoStyle",
|
18
18
|
element: element,
|
19
19
|
onSave: onSave,
|
@@ -27,6 +27,7 @@ const Image = ({
|
|
27
27
|
bgColor,
|
28
28
|
borderColor,
|
29
29
|
borderRadius,
|
30
|
+
borderWidth,
|
30
31
|
boxShadow,
|
31
32
|
width: oldWidth,
|
32
33
|
xsHidden,
|
@@ -165,7 +166,9 @@ const Image = ({
|
|
165
166
|
boxShadow: boxShadow || "none",
|
166
167
|
height: objectFit ? "100%" : "auto",
|
167
168
|
opacity: frame ? 0 : 1,
|
168
|
-
cursor: webAddress ? "pointer" : ""
|
169
|
+
cursor: webAddress ? "pointer" : "",
|
170
|
+
border: `1px solid ${borderColor}`,
|
171
|
+
borderWidth: borderWidth['borderWidth']
|
169
172
|
},
|
170
173
|
alt: alt,
|
171
174
|
src: url,
|
@@ -207,8 +210,7 @@ const Image = ({
|
|
207
210
|
},
|
208
211
|
backgroundColor: bgColor,
|
209
212
|
justifyContent: horizantal,
|
210
|
-
alignContent: vertical
|
211
|
-
border: `1px solid ${borderColor}`
|
213
|
+
alignContent: vertical
|
212
214
|
},
|
213
215
|
...element.attr,
|
214
216
|
"data-path": path.join(","),
|
@@ -114,6 +114,15 @@ const ELEMENTS_LIST = [{
|
|
114
114
|
icon: "embed"
|
115
115
|
}),
|
116
116
|
onInsert: editor => insertDefaultEmbed(editor, "video", "")
|
117
|
+
}, {
|
118
|
+
name: "Calendly",
|
119
|
+
desc: "",
|
120
|
+
group: "Media",
|
121
|
+
type: "embed",
|
122
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
123
|
+
icon: "embed"
|
124
|
+
}),
|
125
|
+
onInsert: editor => insertDefaultEmbed(editor, "calendly", "")
|
117
126
|
}, {
|
118
127
|
name: "Emoji",
|
119
128
|
group: "Elements",
|
@@ -66,6 +66,14 @@ const embedImageStyle = [{
|
|
66
66
|
key: "borderRadius",
|
67
67
|
type: "borderRadius"
|
68
68
|
}]
|
69
|
+
}, {
|
70
|
+
tab: "Border width",
|
71
|
+
value: "borderWidth",
|
72
|
+
fields: [{
|
73
|
+
label: "Border width",
|
74
|
+
key: "borderWidth",
|
75
|
+
type: "borderWidth"
|
76
|
+
}]
|
69
77
|
}, {
|
70
78
|
tab: "Position",
|
71
79
|
value: "position",
|
@@ -0,0 +1,75 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { Grid, IconButton, InputAdornment, TextField, Typography } from "@mui/material";
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
5
|
+
const borderWidth = props => {
|
6
|
+
const {
|
7
|
+
value,
|
8
|
+
data,
|
9
|
+
onChange
|
10
|
+
} = props;
|
11
|
+
const {
|
12
|
+
key
|
13
|
+
} = data;
|
14
|
+
const widthType = "px";
|
15
|
+
const wkey = "borderWidth";
|
16
|
+
const handleChange = e => {
|
17
|
+
onChange({
|
18
|
+
[key]: {
|
19
|
+
...(value || {}),
|
20
|
+
[e.target.name]: isNaN(e.target.value) ? "" : parseInt(e.target.value)
|
21
|
+
}
|
22
|
+
});
|
23
|
+
};
|
24
|
+
const onSizeType = cData => () => {
|
25
|
+
onChange({
|
26
|
+
[key]: {
|
27
|
+
...(value || {}),
|
28
|
+
...cData
|
29
|
+
}
|
30
|
+
});
|
31
|
+
};
|
32
|
+
return /*#__PURE__*/_jsxs(Grid, {
|
33
|
+
item: true,
|
34
|
+
xs: 12,
|
35
|
+
style: {
|
36
|
+
marginBottom: "12px"
|
37
|
+
},
|
38
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
39
|
+
variant: "body1",
|
40
|
+
color: "primary",
|
41
|
+
sx: {
|
42
|
+
fontSize: "14px",
|
43
|
+
fontWeight: "500",
|
44
|
+
marginBottom: "5px"
|
45
|
+
},
|
46
|
+
children: "Border Width"
|
47
|
+
}), /*#__PURE__*/_jsx(TextField, {
|
48
|
+
fullWidth: true,
|
49
|
+
name: wkey,
|
50
|
+
size: "small",
|
51
|
+
value: value ? value[wkey] : "1",
|
52
|
+
placeholder: "Border Width",
|
53
|
+
onChange: handleChange,
|
54
|
+
InputProps: {
|
55
|
+
endAdornment: /*#__PURE__*/_jsx(InputAdornment, {
|
56
|
+
position: "end",
|
57
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
58
|
+
className: widthType === "px" ? "active" : "",
|
59
|
+
size: "small",
|
60
|
+
onClick: onSizeType({
|
61
|
+
widthType: "px",
|
62
|
+
widthInPercent: null,
|
63
|
+
width: isNaN(value?.borderWidth) ? 1 : value?.borderWidth || 1
|
64
|
+
}),
|
65
|
+
children: /*#__PURE__*/_jsx(Typography, {
|
66
|
+
variant: "body2",
|
67
|
+
children: "PX"
|
68
|
+
})
|
69
|
+
})
|
70
|
+
})
|
71
|
+
}
|
72
|
+
})]
|
73
|
+
});
|
74
|
+
};
|
75
|
+
export default borderWidth;
|
@@ -15,10 +15,12 @@ import TextOptions from "./textOptions";
|
|
15
15
|
import SelectBox from "./selectBox";
|
16
16
|
import Icons from "./icons";
|
17
17
|
import FontSize from "./fontSize";
|
18
|
+
import borderWidth from "./borderWidth";
|
18
19
|
const FieldMap = {
|
19
20
|
text: Text,
|
20
21
|
bannerSpacing: BannerSpacing,
|
21
22
|
borderRadius: BorderRadius,
|
23
|
+
borderWidth: borderWidth,
|
22
24
|
color: Color,
|
23
25
|
alignment: Alignment,
|
24
26
|
backgroundImage: BackgroundImage,
|
@@ -386,6 +386,10 @@ export const getBlock = props => {
|
|
386
386
|
return /*#__PURE__*/_jsx(Video, {
|
387
387
|
...props
|
388
388
|
});
|
389
|
+
case "calendly":
|
390
|
+
return /*#__PURE__*/_jsx(Video, {
|
391
|
+
...props
|
392
|
+
});
|
389
393
|
case "equation":
|
390
394
|
return /*#__PURE__*/_jsx(Equation, {
|
391
395
|
...props
|