@flozy/editor 3.1.9 → 3.2.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/Editor.css +5 -0
- package/dist/Editor/Elements/Embed/Image.js +23 -20
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +15 -0
- package/dist/Editor/common/StyleBuilder/embedImageStyle.js +10 -13
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +0 -2
- package/package.json +1 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderWidth.js +0 -75
package/dist/Editor/Editor.css
CHANGED
@@ -54,8 +54,8 @@ const Image = ({
|
|
54
54
|
const [parentDOM, setParentDOM] = useState(null);
|
55
55
|
const [openSetttings, setOpenSettings] = useState(false);
|
56
56
|
const path = ReactEditor.findPath(editor, element);
|
57
|
-
const [showTool] = useEditorSelection(editor);
|
58
57
|
const [openNav, setOpenNav] = useState(false);
|
58
|
+
const isEmpty = !url && !readOnly;
|
59
59
|
const getSize = () => {
|
60
60
|
if (element?.size === undefined) {
|
61
61
|
return {
|
@@ -83,6 +83,22 @@ const Image = ({
|
|
83
83
|
selectedPath
|
84
84
|
} = useEditorContext();
|
85
85
|
const selected = hoverPath === path.join(",") || selectedPath === path?.join(",");
|
86
|
+
const {
|
87
|
+
onClick,
|
88
|
+
onTouchEnd
|
89
|
+
} = handleLinkType(webAddress, linkType, readOnly, isNewTab);
|
90
|
+
const handleImageClick = () => {
|
91
|
+
Transforms.select(editor, {
|
92
|
+
anchor: Editor.start(editor, path),
|
93
|
+
focus: Editor.end(editor, path)
|
94
|
+
});
|
95
|
+
if (onClick) {
|
96
|
+
onClick();
|
97
|
+
}
|
98
|
+
if (onTouchEnd) {
|
99
|
+
onTouchEnd();
|
100
|
+
}
|
101
|
+
};
|
86
102
|
useEffect(() => {
|
87
103
|
if (editor && ele && ele[1] !== undefined) {
|
88
104
|
const dom = ReactEditor.toDOMNode(editor, element);
|
@@ -117,7 +133,7 @@ const Image = ({
|
|
117
133
|
onSave(data);
|
118
134
|
};
|
119
135
|
const ToolBar = () => {
|
120
|
-
return /*#__PURE__*/_jsxs("div", {
|
136
|
+
return !isEmpty ? /*#__PURE__*/_jsxs("div", {
|
121
137
|
className: "element-toolbar visible-on-hover",
|
122
138
|
contentEditable: false,
|
123
139
|
style: {
|
@@ -141,29 +157,16 @@ const Image = ({
|
|
141
157
|
children: /*#__PURE__*/_jsx(LinkIcon, {})
|
142
158
|
})
|
143
159
|
})]
|
144
|
-
});
|
160
|
+
}) : null;
|
145
161
|
};
|
146
162
|
const ImageContent = () => {
|
147
|
-
const {
|
148
|
-
onClick,
|
149
|
-
onTouchEnd
|
150
|
-
} = handleLinkType(webAddress, linkType, readOnly, isNewTab);
|
151
|
-
const handleImageClick = () => {
|
152
|
-
Transforms.select(editor, {
|
153
|
-
anchor: Editor.start(editor, path),
|
154
|
-
focus: Editor.end(editor, path)
|
155
|
-
});
|
156
|
-
if (onClick) {
|
157
|
-
onClick();
|
158
|
-
}
|
159
|
-
if (onTouchEnd) {
|
160
|
-
onTouchEnd();
|
161
|
-
}
|
162
|
-
};
|
163
163
|
return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
|
164
164
|
component: "button",
|
165
165
|
className: "element-empty-btn",
|
166
166
|
contentEditable: false,
|
167
|
+
onClick: () => {
|
168
|
+
setOpenSettings(true);
|
169
|
+
},
|
167
170
|
children: [/*#__PURE__*/_jsx(Icon, {
|
168
171
|
icon: "image"
|
169
172
|
}), "Add Image"]
|
@@ -180,7 +183,7 @@ const Image = ({
|
|
180
183
|
opacity: frame ? 0 : 1,
|
181
184
|
cursor: webAddress ? "pointer" : "",
|
182
185
|
border: `1px solid ${borderColor}`,
|
183
|
-
borderWidth: borderWidth?.
|
186
|
+
borderWidth: borderWidth?.includes('px') ? borderWidth : `${borderWidth}px`
|
184
187
|
},
|
185
188
|
alt: alt,
|
186
189
|
src: url,
|
@@ -51,6 +51,12 @@ const usePopupStyle = theme => ({
|
|
51
51
|
"& button": {
|
52
52
|
color: theme?.palette?.editor?.textColor
|
53
53
|
}
|
54
|
+
},
|
55
|
+
"@media only screen and (max-width: 599px)": {
|
56
|
+
padding: "10px",
|
57
|
+
background: "unset",
|
58
|
+
boxShadow: "unset",
|
59
|
+
border: "none"
|
54
60
|
}
|
55
61
|
},
|
56
62
|
textFormatWrapper: {
|
@@ -70,6 +76,9 @@ const usePopupStyle = theme => ({
|
|
70
76
|
"& .ele-item-single": {
|
71
77
|
paddingLeft: "4px",
|
72
78
|
paddingTop: "4px"
|
79
|
+
},
|
80
|
+
"@media only screen and (max-width: 599px)": {
|
81
|
+
width: '330px'
|
73
82
|
}
|
74
83
|
},
|
75
84
|
"&.templates": {
|
@@ -78,6 +87,9 @@ const usePopupStyle = theme => ({
|
|
78
87
|
"&.fullscreen": {
|
79
88
|
width: "100%",
|
80
89
|
maxHeight: "fit-content"
|
90
|
+
},
|
91
|
+
"@media only screen and (max-width: 599px)": {
|
92
|
+
width: '330px'
|
81
93
|
}
|
82
94
|
},
|
83
95
|
"& .headerContainer": {},
|
@@ -130,6 +142,9 @@ const usePopupStyle = theme => ({
|
|
130
142
|
color: theme?.palette?.editor?.activeColor
|
131
143
|
}
|
132
144
|
}
|
145
|
+
},
|
146
|
+
"@media only screen and (max-width: 599px)": {
|
147
|
+
width: '330px'
|
133
148
|
}
|
134
149
|
},
|
135
150
|
textFormatLabel: {
|
@@ -62,20 +62,21 @@ const embedImageStyle = [{
|
|
62
62
|
type: "bannerSpacing"
|
63
63
|
}]
|
64
64
|
}, {
|
65
|
-
tab: "Border
|
66
|
-
value: "
|
65
|
+
tab: "Border",
|
66
|
+
value: "border",
|
67
67
|
fields: [{
|
68
|
+
label: "Border Color",
|
69
|
+
key: "borderColor",
|
70
|
+
type: "color"
|
71
|
+
}, {
|
68
72
|
label: "Border Radius",
|
69
73
|
key: "borderRadius",
|
70
74
|
type: "borderRadius"
|
71
|
-
}
|
72
|
-
|
73
|
-
tab: "Border width",
|
74
|
-
value: "borderWidth",
|
75
|
-
fields: [{
|
76
|
-
label: "Border width",
|
75
|
+
}, {
|
76
|
+
label: "Border Width",
|
77
77
|
key: "borderWidth",
|
78
|
-
type: "
|
78
|
+
type: "text",
|
79
|
+
placeholder: "1px"
|
79
80
|
}]
|
80
81
|
}, {
|
81
82
|
tab: "Position",
|
@@ -102,10 +103,6 @@ const embedImageStyle = [{
|
|
102
103
|
label: "Background Color",
|
103
104
|
key: "bgColor",
|
104
105
|
type: "color"
|
105
|
-
}, {
|
106
|
-
label: "Border Color",
|
107
|
-
key: "borderColor",
|
108
|
-
type: "color"
|
109
106
|
}, {
|
110
107
|
label: "Box Shadow",
|
111
108
|
key: "boxShadow",
|
@@ -15,12 +15,10 @@ 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";
|
19
18
|
const FieldMap = {
|
20
19
|
text: Text,
|
21
20
|
bannerSpacing: BannerSpacing,
|
22
21
|
borderRadius: BorderRadius,
|
23
|
-
borderWidth: borderWidth,
|
24
22
|
color: Color,
|
25
23
|
alignment: Alignment,
|
26
24
|
backgroundImage: BackgroundImage,
|
package/package.json
CHANGED
@@ -1,75 +0,0 @@
|
|
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;
|