@flozy/editor 2.0.4 → 2.0.6
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/Elements/AppHeader/AppHeader.js +30 -35
- package/dist/Editor/Elements/AppHeader/AppHeaderPopup.js +2 -0
- package/dist/Editor/Elements/Embed/Frames/LiteFrame.js +77 -0
- package/dist/Editor/Elements/Embed/Frames/index.js +2 -0
- package/dist/Editor/Elements/Grid/Grid.js +2 -1
- package/dist/Editor/Elements/Grid/GridItem.js +1 -0
- package/dist/Editor/MiniEditor.js +34 -3
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/ImageSelector/ImageSelector.js +11 -4
- package/dist/Editor/common/ImageSelector/Styles.js +8 -3
- package/dist/Editor/common/Section/index.js +31 -2
- package/dist/Editor/common/StyleBuilder/embedImageStyle.js +4 -1
- package/dist/Editor/common/iconslist.js +2 -0
- package/dist/Editor/utils/embed.js +2 -1
- package/package.json +1 -1
@@ -15,9 +15,8 @@ import MenuIcon from "@mui/icons-material/Menu";
|
|
15
15
|
import Toolbar from "@mui/material/Toolbar";
|
16
16
|
import Typography from "@mui/material/Typography";
|
17
17
|
import Button from "@mui/material/Button";
|
18
|
-
import DeleteIcon from "@mui/icons-material/Delete";
|
19
|
-
import AppHeaderPopup from "./AppHeaderPopup";
|
20
18
|
import { Tooltip } from "@mui/material";
|
19
|
+
import AppHeaderPopup from "./AppHeaderPopup";
|
21
20
|
import { GridSettingsIcon } from "../../common/iconslist";
|
22
21
|
import { getTRBLBreakPoints } from "../../helper/theme";
|
23
22
|
import { jsx as _jsx } from "react/jsx-runtime";
|
@@ -33,6 +32,9 @@ function AppHeader(props) {
|
|
33
32
|
customProps,
|
34
33
|
children
|
35
34
|
} = props;
|
35
|
+
const {
|
36
|
+
readOnly
|
37
|
+
} = customProps;
|
36
38
|
const {
|
37
39
|
appTitle,
|
38
40
|
appLogo,
|
@@ -60,37 +62,29 @@ function AppHeader(props) {
|
|
60
62
|
setMobileOpen(prevState => !prevState);
|
61
63
|
};
|
62
64
|
const onSettings = e => {
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
className: "element-toolbar",
|
69
|
-
contentEditable: false,
|
70
|
-
style: {
|
71
|
-
top: "0px",
|
72
|
-
right: "0px",
|
73
|
-
zIndex: 1000
|
74
|
-
},
|
75
|
-
children: [/*#__PURE__*/_jsx(Tooltip, {
|
76
|
-
title: "App Header Settings",
|
77
|
-
arrow: true,
|
78
|
-
children: /*#__PURE__*/_jsx(IconButton, {
|
79
|
-
size: "small",
|
80
|
-
onClick: onSettings,
|
81
|
-
children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
|
82
|
-
})
|
83
|
-
}), /*#__PURE__*/_jsx(Tooltip, {
|
84
|
-
title: "Delete App Header",
|
85
|
-
arrow: true,
|
86
|
-
children: /*#__PURE__*/_jsx(IconButton, {
|
87
|
-
size: "small",
|
88
|
-
onClick: onDelete,
|
89
|
-
children: /*#__PURE__*/_jsx(DeleteIcon, {})
|
90
|
-
})
|
91
|
-
})]
|
92
|
-
}) : null;
|
65
|
+
if (!readOnly) {
|
66
|
+
e.stopPropagation();
|
67
|
+
e.preventDefault();
|
68
|
+
setOpenSettings(true);
|
69
|
+
}
|
93
70
|
};
|
71
|
+
|
72
|
+
// const ToolBar = () => {
|
73
|
+
// return customProps?.readOnly !== true ? (
|
74
|
+
// <div
|
75
|
+
// className="element-toolbar"
|
76
|
+
// contentEditable={false}
|
77
|
+
// style={{ top: "0px", right: "0px", zIndex: 1000 }}
|
78
|
+
// >
|
79
|
+
// <Tooltip title="App Header Settings" arrow>
|
80
|
+
// <IconButton size="small" onClick={onSettings}>
|
81
|
+
// <GridSettingsIcon />
|
82
|
+
// </IconButton>
|
83
|
+
// </Tooltip>
|
84
|
+
// </div>
|
85
|
+
// ) : null;
|
86
|
+
// };
|
87
|
+
|
94
88
|
const onSave = data => {
|
95
89
|
const updateData = {
|
96
90
|
...data
|
@@ -111,7 +105,7 @@ function AppHeader(props) {
|
|
111
105
|
setOpenSettings(false);
|
112
106
|
};
|
113
107
|
const handleFocus = e => {
|
114
|
-
if (!
|
108
|
+
if (!readOnly) {
|
115
109
|
e.preventDefault();
|
116
110
|
try {
|
117
111
|
const [[, gridItemPath]] = Editor.nodes(editor, {
|
@@ -202,6 +196,7 @@ function AppHeader(props) {
|
|
202
196
|
},
|
203
197
|
zIndex: 999
|
204
198
|
},
|
199
|
+
onClick: onSettings,
|
205
200
|
children: /*#__PURE__*/_jsxs(Toolbar, {
|
206
201
|
style: {
|
207
202
|
flexDirection: isLogoRight ? "row-reverse" : "row",
|
@@ -244,7 +239,6 @@ function AppHeader(props) {
|
|
244
239
|
}
|
245
240
|
},
|
246
241
|
className: "app-logo",
|
247
|
-
onClick: onSettings,
|
248
242
|
children: [appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
|
249
243
|
alt: `${appTitle} Logo`,
|
250
244
|
style: {
|
@@ -326,7 +320,7 @@ function AppHeader(props) {
|
|
326
320
|
},
|
327
321
|
children: drawer
|
328
322
|
})
|
329
|
-
})
|
323
|
+
})]
|
330
324
|
}), /*#__PURE__*/_jsx("div", {
|
331
325
|
contentEditable: false,
|
332
326
|
style: {
|
@@ -338,6 +332,7 @@ function AppHeader(props) {
|
|
338
332
|
element: element,
|
339
333
|
onSave: onSave,
|
340
334
|
onClose: onClose,
|
335
|
+
onDelete: onDelete,
|
341
336
|
customProps: customProps
|
342
337
|
}) : null]
|
343
338
|
});
|
@@ -7,6 +7,7 @@ const AppHeaderPopup = props => {
|
|
7
7
|
element,
|
8
8
|
onSave,
|
9
9
|
onClose,
|
10
|
+
onDelete,
|
10
11
|
customProps
|
11
12
|
} = props;
|
12
13
|
return /*#__PURE__*/_jsx(StyleBuilder, {
|
@@ -15,6 +16,7 @@ const AppHeaderPopup = props => {
|
|
15
16
|
element: element,
|
16
17
|
onSave: onSave,
|
17
18
|
onClose: onClose,
|
19
|
+
onDelete: onDelete,
|
18
20
|
renderTabs: appHeaderStyle,
|
19
21
|
customProps: customProps
|
20
22
|
});
|
@@ -0,0 +1,77 @@
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
3
|
+
const DarkFrame = ({
|
4
|
+
href,
|
5
|
+
id
|
6
|
+
}) => {
|
7
|
+
return /*#__PURE__*/_jsxs("svg", {
|
8
|
+
xmlns: "http://www.w3.org/2000/svg",
|
9
|
+
width: "314",
|
10
|
+
height: "541",
|
11
|
+
viewBox: "0 0 314 541",
|
12
|
+
fill: "none",
|
13
|
+
children: [/*#__PURE__*/_jsx("g", {
|
14
|
+
filter: "url(#filter0_d_15055_295724)",
|
15
|
+
children: /*#__PURE__*/_jsx("rect", {
|
16
|
+
x: "7",
|
17
|
+
y: "7",
|
18
|
+
width: "290",
|
19
|
+
height: "517",
|
20
|
+
rx: "20",
|
21
|
+
stroke: "white",
|
22
|
+
strokeWidth: "14",
|
23
|
+
shapeRendering: "crispEdges",
|
24
|
+
fill: `url(#imageSource_${id})`
|
25
|
+
})
|
26
|
+
}), /*#__PURE__*/_jsxs("defs", {
|
27
|
+
children: [/*#__PURE__*/_jsx("pattern", {
|
28
|
+
id: `imageSource_${id}`,
|
29
|
+
patternUnits: "userSpaceOnUse",
|
30
|
+
width: "290",
|
31
|
+
height: "517",
|
32
|
+
children: /*#__PURE__*/_jsx("image", {
|
33
|
+
x: "0",
|
34
|
+
y: "0",
|
35
|
+
height: "100%",
|
36
|
+
href: href
|
37
|
+
})
|
38
|
+
}), /*#__PURE__*/_jsxs("filter", {
|
39
|
+
id: "filter0_d_15055_295724",
|
40
|
+
x: "0",
|
41
|
+
y: "0",
|
42
|
+
width: "314",
|
43
|
+
height: "541",
|
44
|
+
filterUnits: "userSpaceOnUse",
|
45
|
+
colorInterpolationFilters: "sRGB",
|
46
|
+
children: [/*#__PURE__*/_jsx("feFlood", {
|
47
|
+
floodOpacity: "0",
|
48
|
+
result: "BackgroundImageFix"
|
49
|
+
}), /*#__PURE__*/_jsx("feColorMatrix", {
|
50
|
+
in: "SourceAlpha",
|
51
|
+
type: "matrix",
|
52
|
+
values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
|
53
|
+
result: "hardAlpha"
|
54
|
+
}), /*#__PURE__*/_jsx("feOffset", {
|
55
|
+
dx: "10",
|
56
|
+
dy: "10"
|
57
|
+
}), /*#__PURE__*/_jsx("feComposite", {
|
58
|
+
in2: "hardAlpha",
|
59
|
+
operator: "out"
|
60
|
+
}), /*#__PURE__*/_jsx("feColorMatrix", {
|
61
|
+
type: "matrix",
|
62
|
+
values: "0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
|
63
|
+
}), /*#__PURE__*/_jsx("feBlend", {
|
64
|
+
mode: "normal",
|
65
|
+
in2: "BackgroundImageFix",
|
66
|
+
result: "effect1_dropShadow_15055_295724"
|
67
|
+
}), /*#__PURE__*/_jsx("feBlend", {
|
68
|
+
mode: "normal",
|
69
|
+
in: "SourceGraphic",
|
70
|
+
in2: "effect1_dropShadow_15055_295724",
|
71
|
+
result: "shape"
|
72
|
+
})]
|
73
|
+
})]
|
74
|
+
})]
|
75
|
+
});
|
76
|
+
};
|
77
|
+
export default DarkFrame;
|
@@ -4,10 +4,12 @@ import DarkFrame from "./DarkFrame";
|
|
4
4
|
import RoundedDark from "./RoundedDark";
|
5
5
|
import RoundedLight from "./RoundedLight";
|
6
6
|
import RoundedLightB2 from "./RoundedLightB2";
|
7
|
+
import LiteFrame from "./LiteFrame";
|
7
8
|
const frames = {
|
8
9
|
InstaFrame: InstaFrame,
|
9
10
|
InstaFrameDark: InstaFrameDark,
|
10
11
|
DarkFrame: DarkFrame,
|
12
|
+
LiteFrame: LiteFrame,
|
11
13
|
RoundedDark: RoundedDark,
|
12
14
|
RoundedLight: RoundedLight,
|
13
15
|
RoundedLightB2: RoundedLightB2
|
@@ -272,7 +272,8 @@ const Grid = props => {
|
|
272
272
|
borderRadius: {
|
273
273
|
...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
|
274
274
|
},
|
275
|
-
borderStyle: borderStyle || "solid"
|
275
|
+
borderStyle: borderStyle || "solid",
|
276
|
+
height: "auto"
|
276
277
|
},
|
277
278
|
"data-path": path.join(","),
|
278
279
|
children: [fgColor && /*#__PURE__*/_jsx("div", {
|
@@ -51,6 +51,7 @@ const GridItem = props => {
|
|
51
51
|
const selected = hoverPath === path.join(",");
|
52
52
|
const [showTool] = useEditorSelection(editor);
|
53
53
|
const isEmpty = !readOnly && isEmptyNode(editor, element?.children, path) ? "empty" : "";
|
54
|
+
console.log(cellGHeight);
|
54
55
|
const GridItemToolbar = () => {
|
55
56
|
return selected && !showTool ? /*#__PURE__*/_jsx("div", {
|
56
57
|
contentEditable: false,
|
@@ -1,12 +1,14 @@
|
|
1
|
-
import React, { useCallback, useRef, useState } from "react";
|
1
|
+
import React, { useCallback, useRef, useState, useEffect } from "react";
|
2
2
|
import { createEditor } from "slate";
|
3
3
|
import { Slate, Editable } from "slate-react";
|
4
|
+
import { useDebounce } from "use-debounce";
|
4
5
|
import { getBlock, getMarked } from "./utils/SlateUtilityFunctions";
|
5
6
|
import { commands, mentionsEvent } from "./utils/events";
|
6
7
|
import useMentions from "./hooks/useMentions";
|
7
8
|
import Shorthands from "./common/Shorthands";
|
8
9
|
import BasicToolbar from "./Toolbar/Basic";
|
9
10
|
import withCommon from "./hooks/withCommon";
|
11
|
+
import { serializeToText } from "./utils/serializeToText";
|
10
12
|
import "./Editor.css";
|
11
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
12
14
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -20,7 +22,8 @@ const MiniEditor = props => {
|
|
20
22
|
readOnly,
|
21
23
|
miniEditorPlaceholder,
|
22
24
|
className,
|
23
|
-
otherProps
|
25
|
+
otherProps,
|
26
|
+
onSave
|
24
27
|
} = props;
|
25
28
|
const {
|
26
29
|
CHARACTERS = []
|
@@ -30,6 +33,9 @@ const MiniEditor = props => {
|
|
30
33
|
const [editor] = useState(() => withCommon(createEditor(), {
|
31
34
|
needLayout: false
|
32
35
|
}));
|
36
|
+
const [isInteracted, setIsInteracted] = useState(false);
|
37
|
+
const [value, setValue] = useState(content);
|
38
|
+
const [deboundedValue] = useDebounce(value, 500);
|
33
39
|
const isReadOnly = readOnly === "readonly";
|
34
40
|
const customProps = {
|
35
41
|
...(otherProps || {}),
|
@@ -50,6 +56,24 @@ const MiniEditor = props => {
|
|
50
56
|
...mentions,
|
51
57
|
CHARACTERS
|
52
58
|
}) : [];
|
59
|
+
useEffect(() => {
|
60
|
+
if (onSave && isInteracted) {
|
61
|
+
const {
|
62
|
+
value: strVal,
|
63
|
+
...restVal
|
64
|
+
} = getOnSaveData(deboundedValue);
|
65
|
+
onSave(strVal, restVal);
|
66
|
+
}
|
67
|
+
}, [deboundedValue]);
|
68
|
+
const getOnSaveData = val => {
|
69
|
+
const text = serializeToText(val);
|
70
|
+
const title = val?.find(f => f.type === "title");
|
71
|
+
return {
|
72
|
+
value: JSON.stringify(val),
|
73
|
+
text: text,
|
74
|
+
title: serializeToText(title?.children) || "Untitled"
|
75
|
+
};
|
76
|
+
};
|
53
77
|
const Leaf = ({
|
54
78
|
attributes,
|
55
79
|
children,
|
@@ -97,10 +121,17 @@ const MiniEditor = props => {
|
|
97
121
|
customProps: customProps
|
98
122
|
});
|
99
123
|
}, []);
|
124
|
+
const onChange = newVal => {
|
125
|
+
if (!isInteracted) {
|
126
|
+
setIsInteracted(true);
|
127
|
+
}
|
128
|
+
handleEditorChange(newVal);
|
129
|
+
setValue(newVal);
|
130
|
+
};
|
100
131
|
return /*#__PURE__*/_jsxs(Slate, {
|
101
132
|
editor: editor,
|
102
133
|
initialValue: content,
|
103
|
-
onChange:
|
134
|
+
onChange: onChange,
|
104
135
|
children: [/*#__PURE__*/_jsx(BasicToolbar, {
|
105
136
|
...props
|
106
137
|
}), /*#__PURE__*/_jsx(Editable, {
|
@@ -59,13 +59,17 @@ const ImageSelector = props => {
|
|
59
59
|
}), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(DialogContent, {
|
60
60
|
children: /*#__PURE__*/_jsxs(Grid, {
|
61
61
|
container: true,
|
62
|
-
children: [/*#__PURE__*/_jsx(Grid, {
|
62
|
+
children: [TAB_SHOW[title].length > 1 && /*#__PURE__*/_jsx(Grid, {
|
63
63
|
item: true,
|
64
|
-
xs:
|
64
|
+
xs: 12,
|
65
|
+
sx: {
|
66
|
+
display: "flex",
|
67
|
+
justifyContent: "space-evenly"
|
68
|
+
},
|
65
69
|
children: /*#__PURE__*/_jsxs(Tabs, {
|
66
70
|
sx: classes.tabs,
|
67
71
|
onChange: handleTabChange,
|
68
|
-
orientation: "
|
72
|
+
orientation: "horizontal",
|
69
73
|
value: tabValue,
|
70
74
|
children: [/*#__PURE__*/_jsx(Tab, {
|
71
75
|
className: `${isActive("upload")} ${TAB_SHOW[title].indexOf("upload") === -1 ? "hidden" : ""}`,
|
@@ -88,6 +92,9 @@ const ImageSelector = props => {
|
|
88
92
|
}), /*#__PURE__*/_jsx(Tab, {
|
89
93
|
className: `${isActive("addLink")} ${TAB_SHOW[title].indexOf("addLink") === -1 ? "hidden" : ""}`,
|
90
94
|
sx: classes.tab,
|
95
|
+
style: {
|
96
|
+
marginRight: 0
|
97
|
+
},
|
91
98
|
icon: /*#__PURE__*/_jsx(Icon, {
|
92
99
|
icon: "link"
|
93
100
|
}),
|
@@ -98,7 +105,7 @@ const ImageSelector = props => {
|
|
98
105
|
})
|
99
106
|
}), /*#__PURE__*/_jsx(Grid, {
|
100
107
|
item: true,
|
101
|
-
xs:
|
108
|
+
xs: 12,
|
102
109
|
sx: classes.imsRightWrpr,
|
103
110
|
children: /*#__PURE__*/_jsx(Comp, {
|
104
111
|
...props,
|
@@ -6,8 +6,8 @@ const ImageSelectorStyles = theme => ({
|
|
6
6
|
fontWeight: "500",
|
7
7
|
textTransform: "capitalize",
|
8
8
|
minHeight: "40px",
|
9
|
-
padding: "10px",
|
10
|
-
marginRight: "
|
9
|
+
padding: "10px 30px",
|
10
|
+
marginRight: "14px",
|
11
11
|
borderRadius: "7px",
|
12
12
|
marginBottom: "12px",
|
13
13
|
color: theme?.palette?.editor?.textColor,
|
@@ -26,7 +26,12 @@ const ImageSelectorStyles = theme => ({
|
|
26
26
|
"&:hover": {
|
27
27
|
backgroundColor: theme?.palette?.editor?.background,
|
28
28
|
color: theme?.palette?.editor?.activeColor,
|
29
|
-
border: `1px solid ${theme?.palette?.editor?.activeColor}
|
29
|
+
border: `1px solid ${theme?.palette?.editor?.activeColor}`,
|
30
|
+
"& svg": {
|
31
|
+
"& path": {
|
32
|
+
stroke: theme?.palette?.editor?.activeColor
|
33
|
+
}
|
34
|
+
}
|
30
35
|
},
|
31
36
|
"& svg": {
|
32
37
|
marginRight: "8px",
|
@@ -14,12 +14,41 @@ const SectionStyle = () => ({
|
|
14
14
|
"&:hover": {
|
15
15
|
"& .dh-para": {
|
16
16
|
opacity: 1
|
17
|
+
},
|
18
|
+
"& .sectionIcon": {
|
19
|
+
opacity: 1
|
17
20
|
}
|
18
21
|
},
|
19
22
|
"& .element-toolbar": {
|
20
23
|
"&:hover": {
|
21
24
|
display: "block"
|
22
25
|
}
|
26
|
+
},
|
27
|
+
"& .sectionIcon": {
|
28
|
+
opacity: 0,
|
29
|
+
padding: "0px",
|
30
|
+
background: "transparent",
|
31
|
+
border: "none",
|
32
|
+
width: "20px",
|
33
|
+
height: "20px",
|
34
|
+
"& button": {
|
35
|
+
boxShadow: "none",
|
36
|
+
background: "transparent",
|
37
|
+
width: "20px",
|
38
|
+
height: "20px"
|
39
|
+
},
|
40
|
+
"& svg": {
|
41
|
+
fill: "#ccc",
|
42
|
+
width: "20px",
|
43
|
+
marginTop: '-5px'
|
44
|
+
},
|
45
|
+
"&:hover": {
|
46
|
+
opacity: 1,
|
47
|
+
background: "#eee"
|
48
|
+
},
|
49
|
+
"&.active": {
|
50
|
+
opacity: 1
|
51
|
+
}
|
23
52
|
}
|
24
53
|
}
|
25
54
|
});
|
@@ -56,10 +85,10 @@ const Section = props => {
|
|
56
85
|
const Toolbar = () => {
|
57
86
|
return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
|
58
87
|
component: "div",
|
59
|
-
className:
|
88
|
+
className: `element-toolbar no-border-button hr section-tw sectionIcon`,
|
60
89
|
style: {
|
61
90
|
left: "-28px",
|
62
|
-
top: "
|
91
|
+
top: "3px"
|
63
92
|
},
|
64
93
|
children: /*#__PURE__*/_jsx(Tooltip, {
|
65
94
|
title: "Section Settings",
|
@@ -25,7 +25,10 @@ const embedImageStyle = [{
|
|
25
25
|
label: "Instagram Dark Frame"
|
26
26
|
}, {
|
27
27
|
value: "DarkFrame",
|
28
|
-
label: "Dark Frame"
|
28
|
+
label: "Portrait Dark Frame"
|
29
|
+
}, {
|
30
|
+
value: "LiteFrame",
|
31
|
+
label: "Portrait Lite Frame"
|
29
32
|
}, {
|
30
33
|
value: "RoundedDark",
|
31
34
|
label: "Rounded Dark Frame"
|
@@ -1183,6 +1183,7 @@ export const TextPlusIcon = props => /*#__PURE__*/_jsx("svg", {
|
|
1183
1183
|
fill: "none",
|
1184
1184
|
children: /*#__PURE__*/_jsx("path", {
|
1185
1185
|
d: "M1.08203 3.43359L3.51526 1.00036L5.94849 3.43359",
|
1186
|
+
stroke: "#64748B",
|
1186
1187
|
strokeLinecap: "round"
|
1187
1188
|
})
|
1188
1189
|
});
|
@@ -1194,6 +1195,7 @@ export const TextMinusIcon = props => /*#__PURE__*/_jsx("svg", {
|
|
1194
1195
|
fill: "none",
|
1195
1196
|
children: /*#__PURE__*/_jsx("path", {
|
1196
1197
|
d: "M1 0.805664L3.43323 3.2389L5.86646 0.805664",
|
1198
|
+
stroke: "#64748B",
|
1197
1199
|
strokeLinecap: "round"
|
1198
1200
|
})
|
1199
1201
|
});
|