@flozy/editor 1.7.8 → 1.7.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Editor/Editor.css +2 -2
- package/dist/Editor/Elements/Attachments/Attachments.js +95 -0
- package/dist/Editor/Elements/Attachments/AttachmentsButton.js +46 -0
- package/dist/Editor/Elements/Carousel/Carousel.js +2 -3
- package/dist/Editor/Elements/Carousel/CarouselItem.js +16 -7
- package/dist/Editor/Elements/Color Picker/Styles.js +2 -2
- package/dist/Editor/Elements/Embed/Image.js +1 -1
- package/dist/Editor/Elements/Grid/templates/carousel_item.js +60 -0
- package/dist/Editor/Elements/Link/Link.js +5 -3
- package/dist/Editor/Elements/Table/TableCell.js +4 -2
- package/dist/Editor/Toolbar/Toolbar.js +7 -0
- package/dist/Editor/Toolbar/toolbarGroups.js +5 -0
- package/dist/Editor/common/ColorPickerButton.js +7 -5
- package/dist/Editor/common/Icon.js +3 -2
- package/dist/Editor/common/ImageSelector/ImageSelector.js +12 -4
- package/dist/Editor/common/ImageSelector/Options/Upload.js +4 -2
- package/dist/Editor/common/Shorthands/elements.js +1 -1
- package/dist/Editor/common/Uploader.js +48 -10
- package/dist/Editor/common/iconslist.js +10 -10
- package/dist/Editor/service/fileupload.js +0 -1
- package/dist/Editor/utils/SlateUtilityFunctions.js +7 -1
- package/dist/Editor/utils/attachments.js +35 -0
- package/dist/Editor/utils/carouselItem.js +2 -4
- package/dist/Editor/utils/helper.js +11 -0
- package/dist/Editor/utils/table.js +27 -8
- package/package.json +1 -1
package/dist/Editor/Editor.css
CHANGED
|
@@ -32,11 +32,11 @@ blockquote {
|
|
|
32
32
|
.editor-wrapper table,
|
|
33
33
|
.editor-wrapperth,
|
|
34
34
|
.editor-wrapper td {
|
|
35
|
-
border: 1px solid
|
|
35
|
+
border: 1px solid transparent;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
.editor-wrapper table {
|
|
39
|
-
border-collapse:
|
|
39
|
+
border-collapse: separate;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
.editor-wrapper .editor-wrapperbutton {
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Box, Card, CardMedia, CardContent, Typography } from "@mui/material";
|
|
3
|
+
import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
|
|
4
|
+
import TextSnippetIcon from "@mui/icons-material/TextSnippet";
|
|
5
|
+
import { formatDate } from "../../utils/helper";
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
+
const Attachments = props => {
|
|
9
|
+
const {
|
|
10
|
+
attributes,
|
|
11
|
+
element,
|
|
12
|
+
children
|
|
13
|
+
} = props;
|
|
14
|
+
const {
|
|
15
|
+
url,
|
|
16
|
+
type,
|
|
17
|
+
date
|
|
18
|
+
} = element;
|
|
19
|
+
const getLastName = url?.split("/").pop();
|
|
20
|
+
const fileName = `${getLastName}`;
|
|
21
|
+
return /*#__PURE__*/_jsxs(Box, {
|
|
22
|
+
component: "div",
|
|
23
|
+
className: "attachment-wrpr-ev2",
|
|
24
|
+
...attributes,
|
|
25
|
+
contentEditable: false,
|
|
26
|
+
style: {
|
|
27
|
+
display: "inline-flex"
|
|
28
|
+
},
|
|
29
|
+
children: [/*#__PURE__*/_jsxs(Card, {
|
|
30
|
+
style: {
|
|
31
|
+
display: "flex",
|
|
32
|
+
justifyContent: "center",
|
|
33
|
+
alignItems: "center",
|
|
34
|
+
width: "100%",
|
|
35
|
+
padding: "8px",
|
|
36
|
+
boxShadow: "none",
|
|
37
|
+
border: "1px solid #eae9e9",
|
|
38
|
+
backgroundColor: "#F7F7F7"
|
|
39
|
+
},
|
|
40
|
+
children: [/*#__PURE__*/_jsx(CardMedia, {
|
|
41
|
+
sx: {
|
|
42
|
+
"& svg": {
|
|
43
|
+
width: 32,
|
|
44
|
+
height: 32,
|
|
45
|
+
"&.pdf-i": {
|
|
46
|
+
fill: "#e5252a"
|
|
47
|
+
},
|
|
48
|
+
"&.doc-i": {
|
|
49
|
+
fill: "#0263d1"
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
children: type === "pdf" ? /*#__PURE__*/_jsx(PictureAsPdfIcon, {
|
|
54
|
+
className: "pdf-i"
|
|
55
|
+
}) : /*#__PURE__*/_jsx(TextSnippetIcon, {
|
|
56
|
+
className: "doc-i"
|
|
57
|
+
})
|
|
58
|
+
}), /*#__PURE__*/_jsxs(CardContent, {
|
|
59
|
+
component: "a",
|
|
60
|
+
href: url,
|
|
61
|
+
target: "_blank",
|
|
62
|
+
style: {
|
|
63
|
+
display: "flex",
|
|
64
|
+
justifyContent: "center",
|
|
65
|
+
alignItems: "start",
|
|
66
|
+
padding: "8px",
|
|
67
|
+
textDecoration: "none",
|
|
68
|
+
flexDirection: "column",
|
|
69
|
+
color: "#0F172A"
|
|
70
|
+
},
|
|
71
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
|
72
|
+
style: {
|
|
73
|
+
fontWeight: "bold",
|
|
74
|
+
color: "#0F172A",
|
|
75
|
+
fontSize: "14px"
|
|
76
|
+
},
|
|
77
|
+
component: "div",
|
|
78
|
+
children: fileName
|
|
79
|
+
}), /*#__PURE__*/_jsx(Typography, {
|
|
80
|
+
style: {
|
|
81
|
+
fontWeight: "normal",
|
|
82
|
+
color: "#64748b",
|
|
83
|
+
fontSize: "11px"
|
|
84
|
+
},
|
|
85
|
+
component: "div",
|
|
86
|
+
children: formatDate(date)
|
|
87
|
+
})]
|
|
88
|
+
})]
|
|
89
|
+
}), /*#__PURE__*/_jsx("span", {
|
|
90
|
+
contentEditable: false,
|
|
91
|
+
children: children
|
|
92
|
+
})]
|
|
93
|
+
});
|
|
94
|
+
};
|
|
95
|
+
export default Attachments;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import { useSlateStatic } from "slate-react";
|
|
3
|
+
import ToolbarIcon from "../../common/ToolbarIcon";
|
|
4
|
+
import Icon from "../../common/Icon";
|
|
5
|
+
import ImageSelector from "../../common/ImageSelector/ImageSelector";
|
|
6
|
+
import { insertAttachments } from "../../utils/attachments";
|
|
7
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
9
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
|
+
const AttachmentsButton = props => {
|
|
11
|
+
const editor = useSlateStatic();
|
|
12
|
+
const {
|
|
13
|
+
customProps,
|
|
14
|
+
icoBtnType
|
|
15
|
+
} = props;
|
|
16
|
+
const [open, SetOpen] = useState(false);
|
|
17
|
+
const handleClick = () => {
|
|
18
|
+
SetOpen(true);
|
|
19
|
+
};
|
|
20
|
+
const onSelectImage = url => {
|
|
21
|
+
insertAttachments(editor, {
|
|
22
|
+
url
|
|
23
|
+
});
|
|
24
|
+
handleClose();
|
|
25
|
+
};
|
|
26
|
+
const handleClose = () => {
|
|
27
|
+
SetOpen(false);
|
|
28
|
+
};
|
|
29
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
30
|
+
children: [/*#__PURE__*/_jsx(ToolbarIcon, {
|
|
31
|
+
title: "Doc Upload",
|
|
32
|
+
onClick: handleClick,
|
|
33
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
|
34
|
+
icon: "docsUpload"
|
|
35
|
+
}),
|
|
36
|
+
icoBtnType: icoBtnType
|
|
37
|
+
}), /*#__PURE__*/_jsx(ImageSelector, {
|
|
38
|
+
open: open,
|
|
39
|
+
onClose: handleClose,
|
|
40
|
+
customProps: customProps,
|
|
41
|
+
onSelectImage: onSelectImage,
|
|
42
|
+
title: "Document"
|
|
43
|
+
})]
|
|
44
|
+
});
|
|
45
|
+
};
|
|
46
|
+
export default AttachmentsButton;
|
|
@@ -113,8 +113,7 @@ const Carousel = props => {
|
|
|
113
113
|
className: "sliderBg",
|
|
114
114
|
style: {
|
|
115
115
|
backgroundColor: "transparent",
|
|
116
|
-
position: "relative"
|
|
117
|
-
minHeight: "300px"
|
|
116
|
+
position: "relative"
|
|
118
117
|
},
|
|
119
118
|
contentEditable: edit,
|
|
120
119
|
onMouseOver: onMouseOver,
|
|
@@ -135,7 +134,7 @@ const Carousel = props => {
|
|
|
135
134
|
}, i);
|
|
136
135
|
})
|
|
137
136
|
})
|
|
138
|
-
}, `slider_${children.length}`), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
|
|
137
|
+
}, `slider_${children.length}_${new Date().getTime()}`), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
|
|
139
138
|
});
|
|
140
139
|
};
|
|
141
140
|
export default Carousel;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { Transforms } from "slate";
|
|
2
|
+
import { Node, Transforms } from "slate";
|
|
3
3
|
import { useSlateStatic, ReactEditor } from "slate-react";
|
|
4
4
|
import { Tooltip, IconButton } from "@mui/material";
|
|
5
5
|
import DeleteIcon from "@mui/icons-material/Delete";
|
|
@@ -16,13 +16,17 @@ const CarouselItem = props => {
|
|
|
16
16
|
readOnly
|
|
17
17
|
} = customProps;
|
|
18
18
|
const editor = useSlateStatic();
|
|
19
|
-
const path = ReactEditor.findPath(editor, element);
|
|
20
19
|
const onMenuClick = val => () => {
|
|
21
20
|
switch (val) {
|
|
22
21
|
case "delete":
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
const path = ReactEditor.findPath(editor, element);
|
|
23
|
+
const parentSlide = Node.get(editor, [path[0]]);
|
|
24
|
+
const canDelete = parentSlide?.children?.length > 1;
|
|
25
|
+
if (canDelete) {
|
|
26
|
+
Transforms.removeNodes(editor, {
|
|
27
|
+
at: [...path]
|
|
28
|
+
});
|
|
29
|
+
}
|
|
26
30
|
return;
|
|
27
31
|
default:
|
|
28
32
|
return;
|
|
@@ -32,8 +36,10 @@ const CarouselItem = props => {
|
|
|
32
36
|
return !readOnly ? /*#__PURE__*/_jsx("div", {
|
|
33
37
|
className: "element-toolbar hr",
|
|
34
38
|
style: {
|
|
35
|
-
top: "0px"
|
|
39
|
+
top: "0px",
|
|
40
|
+
right: "28px"
|
|
36
41
|
},
|
|
42
|
+
contentEditable: false,
|
|
37
43
|
children: /*#__PURE__*/_jsx(Tooltip, {
|
|
38
44
|
title: "Delete Slide",
|
|
39
45
|
arrow: true,
|
|
@@ -50,7 +56,10 @@ const CarouselItem = props => {
|
|
|
50
56
|
children: /*#__PURE__*/_jsxs("div", {
|
|
51
57
|
className: "carousel-item-inner",
|
|
52
58
|
style: {
|
|
53
|
-
minHeight: "50px"
|
|
59
|
+
minHeight: "50px",
|
|
60
|
+
display: "flex",
|
|
61
|
+
justifyContent: "center",
|
|
62
|
+
alignItems: "center"
|
|
54
63
|
},
|
|
55
64
|
children: [children, /*#__PURE__*/_jsx(Toolbar, {})]
|
|
56
65
|
})
|
|
@@ -19,8 +19,8 @@ const ColorPickerStyles = () => ({
|
|
|
19
19
|
position: "absolute",
|
|
20
20
|
top: "-4px",
|
|
21
21
|
left: "-4px",
|
|
22
|
-
width: "calc(100% +
|
|
23
|
-
height: "calc(100% +
|
|
22
|
+
width: "calc(100% + 8px)",
|
|
23
|
+
height: "calc(100% + 8px)",
|
|
24
24
|
border: "2px solid #2563EB",
|
|
25
25
|
borderRadius: "50%"
|
|
26
26
|
}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
const carousel_item = itemNo => ({
|
|
2
|
+
type: "paragraph",
|
|
3
|
+
children: [{
|
|
4
|
+
type: "grid",
|
|
5
|
+
grid: "container",
|
|
6
|
+
children: [{
|
|
7
|
+
type: "grid-item",
|
|
8
|
+
grid: 12,
|
|
9
|
+
children: [{
|
|
10
|
+
type: "alignLeft",
|
|
11
|
+
children: [{
|
|
12
|
+
type: "paragraph",
|
|
13
|
+
children: [{
|
|
14
|
+
text: `Slide ${itemNo}`,
|
|
15
|
+
fontSize: "huge",
|
|
16
|
+
fontFamily: "PoppinsBold"
|
|
17
|
+
}]
|
|
18
|
+
}, {
|
|
19
|
+
type: "paragraph",
|
|
20
|
+
children: [{
|
|
21
|
+
fontSize: "16px",
|
|
22
|
+
fontFamily: "PoppinsRegular",
|
|
23
|
+
text: ""
|
|
24
|
+
}]
|
|
25
|
+
}, {
|
|
26
|
+
type: "paragraph",
|
|
27
|
+
children: [{
|
|
28
|
+
fontSize: "16px",
|
|
29
|
+
fontFamily: "PoppinsRegular",
|
|
30
|
+
text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
|
|
31
|
+
}]
|
|
32
|
+
}]
|
|
33
|
+
}],
|
|
34
|
+
bgColor: "rgba(185, 179, 179, 0)",
|
|
35
|
+
lockSpacing: true,
|
|
36
|
+
bannerSpacing: {
|
|
37
|
+
top: 16,
|
|
38
|
+
left: 16,
|
|
39
|
+
right: 16,
|
|
40
|
+
bottom: 16,
|
|
41
|
+
undefined: 16
|
|
42
|
+
},
|
|
43
|
+
alignment: {
|
|
44
|
+
horizantal: "center"
|
|
45
|
+
}
|
|
46
|
+
}],
|
|
47
|
+
alignment: {
|
|
48
|
+
flexDirection: "row"
|
|
49
|
+
},
|
|
50
|
+
lockSpacing: true,
|
|
51
|
+
bannerSpacing: {
|
|
52
|
+
top: "16",
|
|
53
|
+
left: "16",
|
|
54
|
+
right: "16",
|
|
55
|
+
bottom: "16"
|
|
56
|
+
},
|
|
57
|
+
bgColor: "rgb(102, 102, 102)"
|
|
58
|
+
}]
|
|
59
|
+
});
|
|
60
|
+
export default carousel_item;
|
|
@@ -8,6 +8,7 @@ import LinkOffIcon from "@mui/icons-material/LinkOff";
|
|
|
8
8
|
import { removeLink } from "../../utils/link";
|
|
9
9
|
import LinkPopup from "./LinkPopup";
|
|
10
10
|
import "./styles.css";
|
|
11
|
+
import { absoluteLink } from "../../utils/helper";
|
|
11
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
14
|
const Link = ({
|
|
@@ -25,6 +26,7 @@ const Link = ({
|
|
|
25
26
|
showInNewTab: true
|
|
26
27
|
});
|
|
27
28
|
const path = ReactEditor.findPath(editor, element);
|
|
29
|
+
const absLink = absoluteLink(element.href);
|
|
28
30
|
const updateLink = () => {
|
|
29
31
|
Transforms.setNodes(editor, {
|
|
30
32
|
href: linkData?.url,
|
|
@@ -71,8 +73,8 @@ const Link = ({
|
|
|
71
73
|
children: [/*#__PURE__*/_jsx(Tooltip, {
|
|
72
74
|
title: "Open",
|
|
73
75
|
children: /*#__PURE__*/_jsx(IconButton, {
|
|
74
|
-
href:
|
|
75
|
-
target:
|
|
76
|
+
href: absLink,
|
|
77
|
+
target: "_blank",
|
|
76
78
|
children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
|
|
77
79
|
})
|
|
78
80
|
}), /*#__PURE__*/_jsx(Tooltip, {
|
|
@@ -93,7 +95,7 @@ const Link = ({
|
|
|
93
95
|
return /*#__PURE__*/_jsxs("div", {
|
|
94
96
|
className: "link",
|
|
95
97
|
children: [/*#__PURE__*/_jsx("a", {
|
|
96
|
-
href:
|
|
98
|
+
href: absLink,
|
|
97
99
|
...attributes,
|
|
98
100
|
...element.attr,
|
|
99
101
|
target: element.target,
|
|
@@ -40,7 +40,8 @@ const TableCell = props => {
|
|
|
40
40
|
const {
|
|
41
41
|
bgColor,
|
|
42
42
|
borderColor,
|
|
43
|
-
entireBgColor
|
|
43
|
+
entireBgColor,
|
|
44
|
+
entireBorderColor
|
|
44
45
|
} = element;
|
|
45
46
|
const [parentDOM, setParentDOM] = useState(null);
|
|
46
47
|
const editor = useSlateStatic();
|
|
@@ -107,7 +108,8 @@ const TableCell = props => {
|
|
|
107
108
|
const sizeProps = isHeader ? {
|
|
108
109
|
width: size?.width || tableSize?.cellWidth
|
|
109
110
|
} : {};
|
|
110
|
-
const cellBorderColor = borderColor || rowProps?.borderColor || parentProps?.borderColor;
|
|
111
|
+
const cellBorderColor = borderColor || rowProps?.borderColor || parentProps?.borderColor || entireBorderColor;
|
|
112
|
+
console.log(borderColor, entireBorderColor);
|
|
111
113
|
return /*#__PURE__*/_jsxs("td", {
|
|
112
114
|
...element.attr,
|
|
113
115
|
...attributes,
|
|
@@ -27,6 +27,7 @@ import InlineIconButton from "../Elements/InlineIcon/InlineIconButton";
|
|
|
27
27
|
import EmojiButton from "../Elements/Emoji/EmojiButton.js";
|
|
28
28
|
import "./styles.css";
|
|
29
29
|
import TopBannerButton from "../Elements/TopBanner/TopBannerButton.js";
|
|
30
|
+
import AttachmentsButton from "../Elements/Attachments/AttachmentsButton";
|
|
30
31
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
31
32
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
32
33
|
export const RenderToolbarIcon = props => {
|
|
@@ -193,6 +194,12 @@ export const RenderToolbarIcon = props => {
|
|
|
193
194
|
customProps: customProps,
|
|
194
195
|
icoBtnType: icoBtnType
|
|
195
196
|
}, element.id);
|
|
197
|
+
case "docsUpload":
|
|
198
|
+
return /*#__PURE__*/_jsx(AttachmentsButton, {
|
|
199
|
+
editor: editor,
|
|
200
|
+
customProps: customProps,
|
|
201
|
+
icoBtnType: icoBtnType
|
|
202
|
+
}, element.id);
|
|
196
203
|
default:
|
|
197
204
|
return null;
|
|
198
205
|
}
|
|
@@ -47,7 +47,7 @@ const ColorPickerButton = props => {
|
|
|
47
47
|
onClose: handleClose,
|
|
48
48
|
sx: {
|
|
49
49
|
"& .MuiPaper-root": {
|
|
50
|
-
overflow: "
|
|
50
|
+
overflow: "auto"
|
|
51
51
|
}
|
|
52
52
|
},
|
|
53
53
|
children: /*#__PURE__*/_jsx(Grid, {
|
|
@@ -56,10 +56,12 @@ const ColorPickerButton = props => {
|
|
|
56
56
|
children: /*#__PURE__*/_jsxs(Grid, {
|
|
57
57
|
item: true,
|
|
58
58
|
xs: 12,
|
|
59
|
-
children: [/*#__PURE__*/_jsx(
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
59
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
60
|
+
children: /*#__PURE__*/_jsx(ColorPickerTool, {
|
|
61
|
+
gradient: true,
|
|
62
|
+
value: color,
|
|
63
|
+
onChange: setColor
|
|
64
|
+
})
|
|
63
65
|
}), /*#__PURE__*/_jsxs("div", {
|
|
64
66
|
style: {
|
|
65
67
|
display: "flex",
|
|
@@ -7,7 +7,7 @@ import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutline
|
|
|
7
7
|
import { SiLatex } from "react-icons/si";
|
|
8
8
|
import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
|
|
9
9
|
import { IoIosImage, IoMdArrowDroprightCircle, IoMdArrowDropdownCircle } from "react-icons/io";
|
|
10
|
-
import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage } from "./iconslist";
|
|
10
|
+
import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload } from "./iconslist";
|
|
11
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
12
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
const iconList = {
|
|
@@ -182,7 +182,8 @@ const iconList = {
|
|
|
182
182
|
size: 20
|
|
183
183
|
}),
|
|
184
184
|
appHeader: /*#__PURE__*/_jsx(AppHeader, {}),
|
|
185
|
-
moreHorizantal: /*#__PURE__*/_jsx(MoreHorizontal, {})
|
|
185
|
+
moreHorizantal: /*#__PURE__*/_jsx(MoreHorizontal, {}),
|
|
186
|
+
docsUpload: /*#__PURE__*/_jsx(DocsUpload, {})
|
|
186
187
|
};
|
|
187
188
|
const Icon = props => {
|
|
188
189
|
const {
|
|
@@ -13,6 +13,12 @@ const IMAGE_SLECTOR_OPTIONS = {
|
|
|
13
13
|
choose: ChooseAssets,
|
|
14
14
|
addLink: AddLink
|
|
15
15
|
};
|
|
16
|
+
const TAB_SHOW = {
|
|
17
|
+
Image: ["upload", "choose", "addLink"],
|
|
18
|
+
Video: ["addLink"],
|
|
19
|
+
Embed: ["addLink"],
|
|
20
|
+
Document: ["addLink", "upload"]
|
|
21
|
+
};
|
|
16
22
|
const ImageSelector = props => {
|
|
17
23
|
const classes = ImageSelectorStyles();
|
|
18
24
|
const {
|
|
@@ -25,6 +31,7 @@ const ImageSelector = props => {
|
|
|
25
31
|
const [tabValue, setTabValue] = useState(title === "Image" ? "choose" : "addLink");
|
|
26
32
|
const [image, setImage] = useState(value || "");
|
|
27
33
|
const handleTabChange = (e, newValue) => {
|
|
34
|
+
setImage("");
|
|
28
35
|
setTabValue(newValue);
|
|
29
36
|
};
|
|
30
37
|
const onUploaded = url => {
|
|
@@ -60,7 +67,7 @@ const ImageSelector = props => {
|
|
|
60
67
|
orientation: "vertical",
|
|
61
68
|
value: tabValue,
|
|
62
69
|
children: [/*#__PURE__*/_jsx(Tab, {
|
|
63
|
-
className: `${isActive("upload")} ${title
|
|
70
|
+
className: `${isActive("upload")} ${TAB_SHOW[title].indexOf("upload") === -1 ? "hidden" : ""}`,
|
|
64
71
|
sx: classes.tab,
|
|
65
72
|
icon: /*#__PURE__*/_jsx(Icon, {
|
|
66
73
|
icon: "fileUpload"
|
|
@@ -69,7 +76,7 @@ const ImageSelector = props => {
|
|
|
69
76
|
value: "upload",
|
|
70
77
|
label: "Upload Media"
|
|
71
78
|
}), /*#__PURE__*/_jsx(Tab, {
|
|
72
|
-
className: `${isActive("choose")} ${title
|
|
79
|
+
className: `${isActive("choose")} ${TAB_SHOW[title].indexOf("choose") === -1 ? "hidden" : ""}`,
|
|
73
80
|
sx: classes.tab,
|
|
74
81
|
icon: /*#__PURE__*/_jsx(Icon, {
|
|
75
82
|
icon: "media"
|
|
@@ -78,7 +85,7 @@ const ImageSelector = props => {
|
|
|
78
85
|
value: "choose",
|
|
79
86
|
label: "Choose Media"
|
|
80
87
|
}), /*#__PURE__*/_jsx(Tab, {
|
|
81
|
-
className: `${isActive("addLink")}`,
|
|
88
|
+
className: `${isActive("addLink")} ${TAB_SHOW[title].indexOf("addLink") === -1 ? "hidden" : ""}`,
|
|
82
89
|
sx: classes.tab,
|
|
83
90
|
icon: /*#__PURE__*/_jsx(Icon, {
|
|
84
91
|
icon: "link"
|
|
@@ -109,8 +116,9 @@ const ImageSelector = props => {
|
|
|
109
116
|
sx: classes.closeBtn,
|
|
110
117
|
children: "Cancel"
|
|
111
118
|
}), /*#__PURE__*/_jsx(Button, {
|
|
119
|
+
disabled: !image,
|
|
112
120
|
onClick: onSave,
|
|
113
|
-
className:
|
|
121
|
+
className: `primaryBtn ${!image ? "disabled" : ""}`,
|
|
114
122
|
sx: classes.saveBtn,
|
|
115
123
|
children: "Save"
|
|
116
124
|
})]
|
|
@@ -8,7 +8,8 @@ const Upload = props => {
|
|
|
8
8
|
value,
|
|
9
9
|
onUploaded,
|
|
10
10
|
customProps,
|
|
11
|
-
disableUpload = false
|
|
11
|
+
disableUpload = false,
|
|
12
|
+
title
|
|
12
13
|
} = props;
|
|
13
14
|
const onDone = img => {
|
|
14
15
|
onUploaded(img);
|
|
@@ -28,7 +29,8 @@ const Upload = props => {
|
|
|
28
29
|
},
|
|
29
30
|
customProps: customProps,
|
|
30
31
|
onUploaded: onDone,
|
|
31
|
-
disableUpload: disableUpload
|
|
32
|
+
disableUpload: disableUpload,
|
|
33
|
+
title: title
|
|
32
34
|
})
|
|
33
35
|
});
|
|
34
36
|
};
|
|
@@ -101,7 +101,7 @@ const ELEMENTS_LIST = [{
|
|
|
101
101
|
icon: /*#__PURE__*/_jsx(Icon, {
|
|
102
102
|
icon: "embed"
|
|
103
103
|
}),
|
|
104
|
-
onInsert: editor => insertDefaultEmbed(editor, "video", "
|
|
104
|
+
onInsert: editor => insertDefaultEmbed(editor, "video", "")
|
|
105
105
|
}, {
|
|
106
106
|
name: "Emoji",
|
|
107
107
|
group: "Elements",
|
|
@@ -1,24 +1,28 @@
|
|
|
1
1
|
import React, { useState } from "react";
|
|
2
|
-
import { Grid, Button } from "@mui/material";
|
|
2
|
+
import { Grid, Button, Typography } from "@mui/material";
|
|
3
3
|
import { convertBase64 } from "../utils/helper";
|
|
4
4
|
import { uploadFile } from "../service/fileupload";
|
|
5
5
|
import Icon from "./Icon";
|
|
6
6
|
import UploadStyles from "../common/ImageSelector/UploadStyles";
|
|
7
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
8
9
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
10
|
const Uploader = props => {
|
|
10
11
|
const {
|
|
11
12
|
value,
|
|
12
13
|
onUploaded,
|
|
13
|
-
customProps
|
|
14
|
+
customProps,
|
|
15
|
+
title
|
|
14
16
|
} = props;
|
|
15
17
|
const classes = UploadStyles();
|
|
16
18
|
const [base64, setBase64] = useState(value?.url);
|
|
19
|
+
const [fileName, setFileName] = useState("");
|
|
17
20
|
const [uploading, setUploading] = useState(false);
|
|
18
21
|
const handleChange = async e => {
|
|
19
22
|
const uFile = e.target.files[0];
|
|
20
23
|
const strImage = await convertBase64(uFile);
|
|
21
24
|
setBase64(strImage);
|
|
25
|
+
setFileName(uFile?.name);
|
|
22
26
|
doUpload(strImage, e.target.files[0]);
|
|
23
27
|
};
|
|
24
28
|
const doUpload = async (strImage, file) => {
|
|
@@ -38,6 +42,44 @@ const Uploader = props => {
|
|
|
38
42
|
setBase64(null);
|
|
39
43
|
onUploaded("none");
|
|
40
44
|
};
|
|
45
|
+
const getBackground = () => {
|
|
46
|
+
switch (title) {
|
|
47
|
+
case "Document":
|
|
48
|
+
return {
|
|
49
|
+
backgroundImage: `url()`
|
|
50
|
+
};
|
|
51
|
+
default:
|
|
52
|
+
return {
|
|
53
|
+
backgroundImage: base64 ? `url(${base64})` : "none"
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
const renderThumb = () => {
|
|
58
|
+
switch (title) {
|
|
59
|
+
case "Document":
|
|
60
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
61
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
|
62
|
+
style: {
|
|
63
|
+
padding: "8px",
|
|
64
|
+
fontSize: "12px",
|
|
65
|
+
color: "#2563eb",
|
|
66
|
+
textAlign: "center"
|
|
67
|
+
},
|
|
68
|
+
children: fileName
|
|
69
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
|
70
|
+
className: "removeImageText",
|
|
71
|
+
onClick: onRemoveBG,
|
|
72
|
+
children: "REMOVE"
|
|
73
|
+
})]
|
|
74
|
+
});
|
|
75
|
+
default:
|
|
76
|
+
return /*#__PURE__*/_jsx(Grid, {
|
|
77
|
+
className: "removeImageText",
|
|
78
|
+
onClick: onRemoveBG,
|
|
79
|
+
children: "REMOVE"
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
};
|
|
41
83
|
return /*#__PURE__*/_jsxs(Grid, {
|
|
42
84
|
container: true,
|
|
43
85
|
sx: classes.uploadContainer,
|
|
@@ -50,16 +92,12 @@ const Uploader = props => {
|
|
|
50
92
|
xs: 12,
|
|
51
93
|
className: "btn--wrpr",
|
|
52
94
|
style: {
|
|
53
|
-
|
|
95
|
+
...getBackground()
|
|
54
96
|
},
|
|
55
97
|
sx: classes.uploadField,
|
|
56
98
|
children: !uploading ? /*#__PURE__*/_jsx(Grid, {
|
|
57
99
|
className: "uploadImageSection",
|
|
58
|
-
children: base64 ? /*#__PURE__*/_jsx(Grid, {
|
|
59
|
-
className: "removeImageText",
|
|
60
|
-
onClick: onRemoveBG,
|
|
61
|
-
children: "REMOVE"
|
|
62
|
-
}) : /*#__PURE__*/_jsx(Grid, {
|
|
100
|
+
children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
|
|
63
101
|
className: "uploadImageText",
|
|
64
102
|
children: /*#__PURE__*/_jsxs(Button, {
|
|
65
103
|
component: "label",
|
|
@@ -77,11 +115,11 @@ const Uploader = props => {
|
|
|
77
115
|
onChange: handleChange
|
|
78
116
|
}), /*#__PURE__*/_jsx(Icon, {
|
|
79
117
|
icon: "fileUpload"
|
|
80
|
-
}), /*#__PURE__*/
|
|
118
|
+
}), /*#__PURE__*/_jsxs("span", {
|
|
81
119
|
style: {
|
|
82
120
|
paddingLeft: "8px"
|
|
83
121
|
},
|
|
84
|
-
children: "upload
|
|
122
|
+
children: ["upload ", title || "image"]
|
|
85
123
|
})]
|
|
86
124
|
})
|
|
87
125
|
})
|
|
@@ -765,32 +765,32 @@ export const DocsUpload = props => /*#__PURE__*/_jsxs("svg", {
|
|
|
765
765
|
fill: "none",
|
|
766
766
|
children: [/*#__PURE__*/_jsx("path", {
|
|
767
767
|
d: "M6.14453 0.855469V3.14118C6.14453 3.29274 6.20474 3.43808 6.3119 3.54524C6.41906 3.65241 6.56441 3.71261 6.71596 3.71261H9.00167",
|
|
768
|
-
stroke: "#
|
|
769
|
-
strokeWidth: "
|
|
768
|
+
stroke: "#64748B",
|
|
769
|
+
strokeWidth: "1",
|
|
770
770
|
strokeLinecap: "round",
|
|
771
771
|
strokeLinejoin: "round"
|
|
772
772
|
}), /*#__PURE__*/_jsx("path", {
|
|
773
773
|
d: "M7.85714 11.1412H2.14286C1.83975 11.1412 1.54906 11.0208 1.33474 10.8064C1.12041 10.5921 1 10.3014 1 9.99833V1.99833C1 1.69522 1.12041 1.40453 1.33474 1.1902C1.54906 0.975877 1.83975 0.855469 2.14286 0.855469H6.14286L9 3.71261V9.99833C9 10.3014 8.87959 10.5921 8.66527 10.8064C8.45094 11.0208 8.16025 11.1412 7.85714 11.1412Z",
|
|
774
|
-
stroke: "#
|
|
775
|
-
strokeWidth: "
|
|
774
|
+
stroke: "#64748B",
|
|
775
|
+
strokeWidth: "1",
|
|
776
776
|
strokeLinecap: "round",
|
|
777
777
|
strokeLinejoin: "round"
|
|
778
778
|
}), /*#__PURE__*/_jsx("path", {
|
|
779
779
|
d: "M3.28516 4.28516H3.85658",
|
|
780
|
-
stroke: "#
|
|
781
|
-
strokeWidth: "
|
|
780
|
+
stroke: "#64748B",
|
|
781
|
+
strokeWidth: "1",
|
|
782
782
|
strokeLinecap: "round",
|
|
783
783
|
strokeLinejoin: "round"
|
|
784
784
|
}), /*#__PURE__*/_jsx("path", {
|
|
785
785
|
d: "M3.28516 6.57031H6.71373",
|
|
786
|
-
stroke: "#
|
|
787
|
-
strokeWidth: "
|
|
786
|
+
stroke: "#64748B",
|
|
787
|
+
strokeWidth: "1",
|
|
788
788
|
strokeLinecap: "round",
|
|
789
789
|
strokeLinejoin: "round"
|
|
790
790
|
}), /*#__PURE__*/_jsx("path", {
|
|
791
791
|
d: "M3.28516 8.85547H6.71373",
|
|
792
|
-
stroke: "#
|
|
793
|
-
strokeWidth: "
|
|
792
|
+
stroke: "#64748B",
|
|
793
|
+
strokeWidth: "1",
|
|
794
794
|
strokeLinecap: "round",
|
|
795
795
|
strokeLinejoin: "round"
|
|
796
796
|
})]
|
|
@@ -33,6 +33,7 @@ import EmbedLink from "../Elements/Embed/link";
|
|
|
33
33
|
import SimpleText from "../Elements/SimpleText";
|
|
34
34
|
import CheckList from "../Elements/List/CheckList";
|
|
35
35
|
import { isEmptyTextNode } from "../helper";
|
|
36
|
+
import Attachments from "../Elements/Attachments/Attachments";
|
|
36
37
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
37
38
|
const alignment = ["alignLeft", "alignRight", "alignCenter"];
|
|
38
39
|
const list_types = ["orderedList", "unorderedList"];
|
|
@@ -472,6 +473,11 @@ export const getBlock = props => {
|
|
|
472
473
|
return /*#__PURE__*/_jsx(EmbedLink, {
|
|
473
474
|
...props
|
|
474
475
|
});
|
|
476
|
+
case "docs":
|
|
477
|
+
case "pdf":
|
|
478
|
+
return /*#__PURE__*/_jsx(Attachments, {
|
|
479
|
+
...props
|
|
480
|
+
});
|
|
475
481
|
default:
|
|
476
482
|
return /*#__PURE__*/_jsx(SimpleText, {
|
|
477
483
|
...props,
|
|
@@ -481,7 +487,7 @@ export const getBlock = props => {
|
|
|
481
487
|
};
|
|
482
488
|
export const getQueryStrings = urlString => {
|
|
483
489
|
try {
|
|
484
|
-
if (urlString) {
|
|
490
|
+
if (urlString && urlString?.indexOf("/embed") === -1) {
|
|
485
491
|
const newUrl = new URL(urlString);
|
|
486
492
|
var youCode = newUrl.searchParams.get("v");
|
|
487
493
|
if (!youCode) {
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { Transforms } from "slate";
|
|
2
|
+
import insertNewLine from "./insertNewLine";
|
|
3
|
+
const createAttachmentsNode = ({
|
|
4
|
+
type,
|
|
5
|
+
url
|
|
6
|
+
}) => {
|
|
7
|
+
return {
|
|
8
|
+
type: type || "docs",
|
|
9
|
+
url,
|
|
10
|
+
date: new Date().getTime(),
|
|
11
|
+
width: "100%",
|
|
12
|
+
height: "300px",
|
|
13
|
+
children: [{
|
|
14
|
+
text: ""
|
|
15
|
+
}]
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
export const insertAttachments = (editor, data) => {
|
|
19
|
+
try {
|
|
20
|
+
const {
|
|
21
|
+
url
|
|
22
|
+
} = data;
|
|
23
|
+
if (url) {
|
|
24
|
+
const attachmentsNode = createAttachmentsNode({
|
|
25
|
+
...data,
|
|
26
|
+
type: url?.split(".").pop() === "pdf" ? "pdf" : "docs"
|
|
27
|
+
});
|
|
28
|
+
console.log(attachmentsNode);
|
|
29
|
+
Transforms.insertNodes(editor, [attachmentsNode]);
|
|
30
|
+
insertNewLine(editor);
|
|
31
|
+
}
|
|
32
|
+
} catch (err) {
|
|
33
|
+
console.log(err);
|
|
34
|
+
}
|
|
35
|
+
};
|
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
import { Transforms } from "slate";
|
|
2
|
+
import carousel_item from "../Elements/Grid/templates/carousel_item";
|
|
2
3
|
export const carouselItem = (itemNo = "") => {
|
|
3
4
|
return {
|
|
4
5
|
type: "carousel-item",
|
|
5
6
|
image: null,
|
|
6
7
|
children: [{
|
|
7
|
-
|
|
8
|
-
children: [{
|
|
9
|
-
text: `Slide ${itemNo}`
|
|
10
|
-
}]
|
|
8
|
+
...carousel_item(itemNo)
|
|
11
9
|
}]
|
|
12
10
|
};
|
|
13
11
|
};
|
|
@@ -41,4 +41,15 @@ export const gradientBorder = color => {
|
|
|
41
41
|
borderColor: color || "transparent"
|
|
42
42
|
};
|
|
43
43
|
}
|
|
44
|
+
};
|
|
45
|
+
export const absoluteLink = url => {
|
|
46
|
+
try {
|
|
47
|
+
if (url?.indexOf("://") === -1) {
|
|
48
|
+
return `//${url}`;
|
|
49
|
+
}
|
|
50
|
+
return url;
|
|
51
|
+
} catch (err) {
|
|
52
|
+
console.log(err);
|
|
53
|
+
return url;
|
|
54
|
+
}
|
|
44
55
|
};
|
|
@@ -219,17 +219,36 @@ export class TableUtil {
|
|
|
219
219
|
});
|
|
220
220
|
|
|
221
221
|
// cell bg entire
|
|
222
|
-
if (cellProps?.entireBgColor) {
|
|
222
|
+
if (cellProps?.entireBgColor || tableProps?.borderColor) {
|
|
223
223
|
const {
|
|
224
|
-
rows
|
|
224
|
+
rows,
|
|
225
|
+
columns
|
|
225
226
|
} = tableProps;
|
|
226
227
|
for (let r = 0; r < rows; r++) {
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
228
|
+
for (let c = 0; c < columns; c++) {
|
|
229
|
+
Transforms.setNodes(this.editor, {
|
|
230
|
+
entireBgColor: cellProps?.entireBgColor
|
|
231
|
+
}, {
|
|
232
|
+
at: [currentCellPath[0], r, currentCellPath[2]]
|
|
233
|
+
});
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
// cell border all
|
|
239
|
+
if (tableProps?.borderColor) {
|
|
240
|
+
const {
|
|
241
|
+
rows,
|
|
242
|
+
columns
|
|
243
|
+
} = tableProps;
|
|
244
|
+
for (let r = 0; r < rows; r++) {
|
|
245
|
+
for (let c = 0; c < columns; c++) {
|
|
246
|
+
Transforms.setNodes(this.editor, {
|
|
247
|
+
entireBorderColor: tableProps?.borderColor
|
|
248
|
+
}, {
|
|
249
|
+
at: [currentCellPath[0], r, c]
|
|
250
|
+
});
|
|
251
|
+
}
|
|
233
252
|
}
|
|
234
253
|
}
|
|
235
254
|
}
|