@flozy/editor 2.1.6 → 2.1.8
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/Elements/AppHeader/AppHeader.js +4 -3
- package/dist/Editor/Elements/Embed/Frames/DarkFrame.js +4 -3
- package/dist/Editor/Elements/Embed/Frames/ImageFrame.js +25 -22
- package/dist/Editor/Elements/Embed/Frames/InstaFrame.js +4 -3
- package/dist/Editor/Elements/Embed/Frames/InstaFrameDark.js +4 -3
- package/dist/Editor/Elements/Embed/Frames/LiteFrame.js +4 -3
- package/dist/Editor/Elements/Embed/Frames/RoundedDark.js +4 -3
- package/dist/Editor/Elements/Embed/Frames/RoundedLight.js +4 -3
- package/dist/Editor/Elements/Embed/Frames/RoundedLightB2.js +4 -3
- package/dist/Editor/Elements/Embed/Frames/Slider.js +4 -2
- package/dist/Editor/Elements/Embed/Image.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +3 -2
- package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +5 -0
- package/dist/Editor/hooks/useDragDom.js +8 -5
- package/package.json +1 -1
@@ -47,7 +47,8 @@ function AppHeader(props) {
|
|
47
47
|
fontFamily,
|
48
48
|
logoFontSize,
|
49
49
|
titleFontFamily,
|
50
|
-
isLogoRight
|
50
|
+
isLogoRight,
|
51
|
+
logoHeight = 40
|
51
52
|
} = element;
|
52
53
|
const {
|
53
54
|
window
|
@@ -137,7 +138,7 @@ function AppHeader(props) {
|
|
137
138
|
children: appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
|
138
139
|
alt: `${appTitle} Logo`,
|
139
140
|
style: {
|
140
|
-
height:
|
141
|
+
height: `${parseInt(logoHeight) || 40}px`,
|
141
142
|
width: "auto"
|
142
143
|
},
|
143
144
|
src: appLogo
|
@@ -240,7 +241,7 @@ function AppHeader(props) {
|
|
240
241
|
children: [appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
|
241
242
|
alt: `${appTitle} Logo`,
|
242
243
|
style: {
|
243
|
-
height:
|
244
|
+
height: `${parseInt(logoHeight) || 40}px`,
|
244
245
|
width: "auto"
|
245
246
|
},
|
246
247
|
src: appLogo
|
@@ -7,7 +7,8 @@ const DarkFrame = /*#__PURE__*/forwardRef((props, ref) => {
|
|
7
7
|
id,
|
8
8
|
imagePos,
|
9
9
|
handleClick,
|
10
|
-
imageRef
|
10
|
+
imageRef,
|
11
|
+
defaultScale
|
11
12
|
} = props;
|
12
13
|
const {
|
13
14
|
calX,
|
@@ -16,7 +17,7 @@ const DarkFrame = /*#__PURE__*/forwardRef((props, ref) => {
|
|
16
17
|
} = imagePos || {
|
17
18
|
calX: 0,
|
18
19
|
calY: 0,
|
19
|
-
scale:
|
20
|
+
scale: defaultScale
|
20
21
|
};
|
21
22
|
return /*#__PURE__*/_jsxs("svg", {
|
22
23
|
xmlns: "http://www.w3.org/2000/svg",
|
@@ -52,7 +53,7 @@ const DarkFrame = /*#__PURE__*/forwardRef((props, ref) => {
|
|
52
53
|
children: /*#__PURE__*/_jsx("image", {
|
53
54
|
x: calX,
|
54
55
|
y: calY,
|
55
|
-
height: `${scale ||
|
56
|
+
height: `${scale || defaultScale}%`,
|
56
57
|
href: href
|
57
58
|
})
|
58
59
|
}), /*#__PURE__*/_jsxs("filter", {
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { useEffect, useRef, useState } from "react";
|
2
2
|
import useDragDom from "../../../hooks/useDragDom";
|
3
|
-
import {
|
3
|
+
import { IconButton, Popper } from "@mui/material";
|
4
4
|
import Box from "@mui/material/Box";
|
5
5
|
import ContinuousSlider from "./Slider";
|
6
6
|
import frames from ".";
|
@@ -14,14 +14,16 @@ const ImageFrame = props => {
|
|
14
14
|
frame,
|
15
15
|
id,
|
16
16
|
framePos,
|
17
|
-
onChange
|
17
|
+
onChange,
|
18
|
+
readOnly
|
18
19
|
} = props;
|
19
20
|
const svgRef = useRef();
|
20
21
|
const [dom, setDOM] = useState(null);
|
21
22
|
const [anchorEl, setAnchorEl] = useState(null);
|
22
23
|
const imageRef = useRef(null);
|
23
24
|
const [event, delta, clear] = useDragDom({
|
24
|
-
refDom: imageRef?.current
|
25
|
+
refDom: imageRef?.current,
|
26
|
+
readOnly
|
25
27
|
});
|
26
28
|
const {
|
27
29
|
x,
|
@@ -48,12 +50,12 @@ const ImageFrame = props => {
|
|
48
50
|
} = useEditorContext();
|
49
51
|
const open = selectedPath === id && Boolean(anchorEl);
|
50
52
|
useEffect(() => {
|
51
|
-
if (imageRef?.current) {
|
53
|
+
if (imageRef?.current && !readOnly) {
|
52
54
|
setDOM(dom);
|
53
55
|
}
|
54
56
|
}, [imageRef]);
|
55
57
|
useEffect(() => {
|
56
|
-
if (event === "end") {
|
58
|
+
if (event === "end" && !readOnly) {
|
57
59
|
onChange({
|
58
60
|
framePos: {
|
59
61
|
x: calX,
|
@@ -65,26 +67,25 @@ const ImageFrame = props => {
|
|
65
67
|
}
|
66
68
|
}, [event]);
|
67
69
|
const handleClick = () => {
|
68
|
-
|
69
|
-
|
70
|
+
if (!readOnly) {
|
71
|
+
setSelectedPath(id);
|
72
|
+
setAnchorEl(svgRef?.current);
|
73
|
+
}
|
70
74
|
};
|
71
75
|
const onClose = () => {
|
72
76
|
setAnchorEl(null);
|
73
77
|
};
|
74
78
|
const onScaleChange = newVal => {
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
console.log(iRef);
|
85
|
-
// setImageRef(iRef);
|
79
|
+
if (!readOnly) {
|
80
|
+
onChange({
|
81
|
+
framePos: {
|
82
|
+
x: calX,
|
83
|
+
y: calY,
|
84
|
+
scale: newVal
|
85
|
+
}
|
86
|
+
});
|
87
|
+
}
|
86
88
|
};
|
87
|
-
|
88
89
|
const handleClose = () => {
|
89
90
|
setAnchorEl(null);
|
90
91
|
setSelectedPath(null);
|
@@ -93,14 +94,14 @@ const ImageFrame = props => {
|
|
93
94
|
children: [/*#__PURE__*/_jsx(SVGFrame, {
|
94
95
|
ref: svgRef,
|
95
96
|
...props,
|
96
|
-
onImageRef: onImageRef,
|
97
97
|
handleClick: handleClick,
|
98
98
|
imagePos: {
|
99
99
|
calX,
|
100
100
|
calY,
|
101
101
|
scale
|
102
102
|
},
|
103
|
-
imageRef: imageRef
|
103
|
+
imageRef: imageRef,
|
104
|
+
defaultScale: 100
|
104
105
|
}), /*#__PURE__*/_jsx(Popper, {
|
105
106
|
id: id,
|
106
107
|
open: open,
|
@@ -124,7 +125,9 @@ const ImageFrame = props => {
|
|
124
125
|
},
|
125
126
|
children: [/*#__PURE__*/_jsx(ContinuousSlider, {
|
126
127
|
val: scale,
|
127
|
-
onChange: onScaleChange
|
128
|
+
onChange: onScaleChange,
|
129
|
+
min: 50,
|
130
|
+
max: 200
|
128
131
|
}), /*#__PURE__*/_jsx(IconButton, {
|
129
132
|
onClick: handleClose,
|
130
133
|
sx: {
|
@@ -7,7 +7,8 @@ const InstaFrame = /*#__PURE__*/forwardRef((props, ref) => {
|
|
7
7
|
id,
|
8
8
|
imagePos,
|
9
9
|
handleClick,
|
10
|
-
imageRef
|
10
|
+
imageRef,
|
11
|
+
defaultScale
|
11
12
|
} = props;
|
12
13
|
const {
|
13
14
|
calX,
|
@@ -16,7 +17,7 @@ const InstaFrame = /*#__PURE__*/forwardRef((props, ref) => {
|
|
16
17
|
} = imagePos || {
|
17
18
|
calX: 0,
|
18
19
|
calY: 0,
|
19
|
-
scale:
|
20
|
+
scale: defaultScale
|
20
21
|
};
|
21
22
|
return /*#__PURE__*/_jsxs("svg", {
|
22
23
|
xmlns: "http://www.w3.org/2000/svg",
|
@@ -109,7 +110,7 @@ const InstaFrame = /*#__PURE__*/forwardRef((props, ref) => {
|
|
109
110
|
children: /*#__PURE__*/_jsx("image", {
|
110
111
|
x: calX,
|
111
112
|
y: calY,
|
112
|
-
height: `${scale ||
|
113
|
+
height: `${scale || defaultScale}%`,
|
113
114
|
href: href
|
114
115
|
})
|
115
116
|
})
|
@@ -7,7 +7,8 @@ const InstaFrame = /*#__PURE__*/forwardRef((props, ref) => {
|
|
7
7
|
id,
|
8
8
|
imagePos,
|
9
9
|
handleClick,
|
10
|
-
imageRef
|
10
|
+
imageRef,
|
11
|
+
defaultScale
|
11
12
|
} = props;
|
12
13
|
const {
|
13
14
|
calX,
|
@@ -16,7 +17,7 @@ const InstaFrame = /*#__PURE__*/forwardRef((props, ref) => {
|
|
16
17
|
} = imagePos || {
|
17
18
|
calX: 0,
|
18
19
|
calY: 0,
|
19
|
-
scale:
|
20
|
+
scale: defaultScale
|
20
21
|
};
|
21
22
|
return /*#__PURE__*/_jsxs("svg", {
|
22
23
|
xmlns: "http://www.w3.org/2000/svg",
|
@@ -108,7 +109,7 @@ const InstaFrame = /*#__PURE__*/forwardRef((props, ref) => {
|
|
108
109
|
children: /*#__PURE__*/_jsx("image", {
|
109
110
|
x: calX,
|
110
111
|
y: calY,
|
111
|
-
height: `${scale ||
|
112
|
+
height: `${scale || defaultScale}%`,
|
112
113
|
href: href
|
113
114
|
})
|
114
115
|
})
|
@@ -7,7 +7,8 @@ const DarkFrame = /*#__PURE__*/forwardRef((props, ref) => {
|
|
7
7
|
id,
|
8
8
|
imagePos,
|
9
9
|
handleClick,
|
10
|
-
imageRef
|
10
|
+
imageRef,
|
11
|
+
defaultScale
|
11
12
|
} = props;
|
12
13
|
const {
|
13
14
|
calX,
|
@@ -16,7 +17,7 @@ const DarkFrame = /*#__PURE__*/forwardRef((props, ref) => {
|
|
16
17
|
} = imagePos || {
|
17
18
|
calX: 0,
|
18
19
|
calY: 0,
|
19
|
-
scale:
|
20
|
+
scale: defaultScale
|
20
21
|
};
|
21
22
|
return /*#__PURE__*/_jsxs("svg", {
|
22
23
|
xmlns: "http://www.w3.org/2000/svg",
|
@@ -55,7 +56,7 @@ const DarkFrame = /*#__PURE__*/forwardRef((props, ref) => {
|
|
55
56
|
children: /*#__PURE__*/_jsx("image", {
|
56
57
|
x: calX,
|
57
58
|
y: calY,
|
58
|
-
height: `${scale ||
|
59
|
+
height: `${scale || defaultScale}%`,
|
59
60
|
href: href
|
60
61
|
})
|
61
62
|
}), /*#__PURE__*/_jsxs("filter", {
|
@@ -7,7 +7,8 @@ const RoundedDark = /*#__PURE__*/forwardRef((props, ref) => {
|
|
7
7
|
id,
|
8
8
|
imagePos,
|
9
9
|
handleClick,
|
10
|
-
imageRef
|
10
|
+
imageRef,
|
11
|
+
defaultScale
|
11
12
|
} = props;
|
12
13
|
const {
|
13
14
|
calX,
|
@@ -16,7 +17,7 @@ const RoundedDark = /*#__PURE__*/forwardRef((props, ref) => {
|
|
16
17
|
} = imagePos || {
|
17
18
|
calX: 0,
|
18
19
|
calY: 0,
|
19
|
-
scale:
|
20
|
+
scale: defaultScale
|
20
21
|
};
|
21
22
|
return /*#__PURE__*/_jsxs("svg", {
|
22
23
|
xmlns: "http://www.w3.org/2000/svg",
|
@@ -53,7 +54,7 @@ const RoundedDark = /*#__PURE__*/forwardRef((props, ref) => {
|
|
53
54
|
children: /*#__PURE__*/_jsx("image", {
|
54
55
|
x: calX,
|
55
56
|
y: calY,
|
56
|
-
height: `${scale ||
|
57
|
+
height: `${scale || defaultScale}%`,
|
57
58
|
href: href
|
58
59
|
})
|
59
60
|
}), /*#__PURE__*/_jsxs("filter", {
|
@@ -7,7 +7,8 @@ const RoundedLight = /*#__PURE__*/forwardRef((props, ref) => {
|
|
7
7
|
id,
|
8
8
|
imagePos,
|
9
9
|
handleClick,
|
10
|
-
imageRef
|
10
|
+
imageRef,
|
11
|
+
defaultScale
|
11
12
|
} = props;
|
12
13
|
const {
|
13
14
|
calX,
|
@@ -16,7 +17,7 @@ const RoundedLight = /*#__PURE__*/forwardRef((props, ref) => {
|
|
16
17
|
} = imagePos || {
|
17
18
|
calX: 0,
|
18
19
|
calY: 0,
|
19
|
-
scale:
|
20
|
+
scale: defaultScale
|
20
21
|
};
|
21
22
|
return /*#__PURE__*/_jsxs("svg", {
|
22
23
|
xmlns: "http://www.w3.org/2000/svg",
|
@@ -49,7 +50,7 @@ const RoundedLight = /*#__PURE__*/forwardRef((props, ref) => {
|
|
49
50
|
children: /*#__PURE__*/_jsx("image", {
|
50
51
|
x: calX,
|
51
52
|
y: calY,
|
52
|
-
height: `${scale ||
|
53
|
+
height: `${scale || defaultScale}%`,
|
53
54
|
href: href
|
54
55
|
})
|
55
56
|
})
|
@@ -7,7 +7,8 @@ const RoundedLightB2 = /*#__PURE__*/forwardRef((props, ref) => {
|
|
7
7
|
id,
|
8
8
|
imagePos,
|
9
9
|
handleClick,
|
10
|
-
imageRef
|
10
|
+
imageRef,
|
11
|
+
defaultScale
|
11
12
|
} = props;
|
12
13
|
const {
|
13
14
|
calX,
|
@@ -16,7 +17,7 @@ const RoundedLightB2 = /*#__PURE__*/forwardRef((props, ref) => {
|
|
16
17
|
} = imagePos || {
|
17
18
|
calX: 0,
|
18
19
|
calY: 0,
|
19
|
-
scale:
|
20
|
+
scale: defaultScale
|
20
21
|
};
|
21
22
|
return /*#__PURE__*/_jsxs("svg", {
|
22
23
|
xmlns: "http://www.w3.org/2000/svg",
|
@@ -49,7 +50,7 @@ const RoundedLightB2 = /*#__PURE__*/forwardRef((props, ref) => {
|
|
49
50
|
children: /*#__PURE__*/_jsx("image", {
|
50
51
|
x: calX,
|
51
52
|
y: calY,
|
52
|
-
height: `${scale ||
|
53
|
+
height: `${scale || defaultScale}%`,
|
53
54
|
href: href
|
54
55
|
})
|
55
56
|
})
|
@@ -7,6 +7,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
7
|
const ContinuousSlider = props => {
|
8
8
|
const {
|
9
9
|
val,
|
10
|
+
min,
|
11
|
+
max,
|
10
12
|
onChange
|
11
13
|
} = props;
|
12
14
|
const [value, setValue] = useState(val || 100);
|
@@ -28,9 +30,9 @@ const ContinuousSlider = props => {
|
|
28
30
|
"aria-label": "Volume",
|
29
31
|
value: value,
|
30
32
|
onChange: handleChange,
|
31
|
-
min:
|
33
|
+
min: min,
|
32
34
|
step: 1,
|
33
|
-
max:
|
35
|
+
max: max
|
34
36
|
}), /*#__PURE__*/_jsx(Typography, {
|
35
37
|
variant: "div",
|
36
38
|
children: "+"
|
@@ -237,7 +237,8 @@ const Image = ({
|
|
237
237
|
framePos: framePos,
|
238
238
|
href: url,
|
239
239
|
id: path.join(","),
|
240
|
-
onChange: onPosChange
|
240
|
+
onChange: onPosChange,
|
241
|
+
readOnly: readOnly
|
241
242
|
})
|
242
243
|
}) : null, selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
|
243
244
|
onPointerDown: onMouseDown,
|
@@ -41,6 +41,7 @@ const MiniTextFormat = props => {
|
|
41
41
|
container: true,
|
42
42
|
sx: classes.miniTextFormatWrapper,
|
43
43
|
alignItems: "center",
|
44
|
+
id: "mini-text-editor-wrapper",
|
44
45
|
children: /*#__PURE__*/_jsx(Grid, {
|
45
46
|
item: true,
|
46
47
|
xs: 12,
|
@@ -86,7 +87,7 @@ const MiniTextFormat = props => {
|
|
86
87
|
active: isBlockActive(editor, link.format),
|
87
88
|
editor: editor
|
88
89
|
}, link.id), /*#__PURE__*/_jsx(Button, {
|
89
|
-
onClick: e => setAnchorEl(
|
90
|
+
onClick: e => setAnchorEl(document.getElementById("mini-text-editor-wrapper")),
|
90
91
|
className: "textSettingsIcon",
|
91
92
|
children: /*#__PURE__*/_jsx(TextToolIcon, {})
|
92
93
|
}), /*#__PURE__*/_jsx(Popper, {
|
@@ -94,7 +95,7 @@ const MiniTextFormat = props => {
|
|
94
95
|
open: open,
|
95
96
|
anchorEl: anchorEl,
|
96
97
|
transition: true,
|
97
|
-
placement: "
|
98
|
+
placement: "bottom-end",
|
98
99
|
sx: classes.popupWrapper,
|
99
100
|
className: `tools-drawer ${size?.device}`,
|
100
101
|
children: ({
|
@@ -5,7 +5,8 @@ const ePos = {
|
|
5
5
|
};
|
6
6
|
const useDragDom = props => {
|
7
7
|
const {
|
8
|
-
refDom
|
8
|
+
refDom,
|
9
|
+
readOnly
|
9
10
|
} = props || {};
|
10
11
|
const [event, setEvent] = useState("");
|
11
12
|
const [delta, setDelta] = useState({
|
@@ -13,10 +14,12 @@ const useDragDom = props => {
|
|
13
14
|
y: 0
|
14
15
|
});
|
15
16
|
useEffect(() => {
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
17
|
+
if (!readOnly) {
|
18
|
+
addListener();
|
19
|
+
return () => {
|
20
|
+
removeListener();
|
21
|
+
};
|
22
|
+
}
|
20
23
|
}, [refDom]);
|
21
24
|
const onMouseDown = e => {
|
22
25
|
ePos.x = e.x;
|