@flozy/editor 1.7.2 → 1.7.3
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/Editor.css +114 -36
- package/dist/Editor/Elements/Link/Link.js +39 -32
- package/dist/Editor/Elements/Link/LinkButton.js +62 -80
- package/dist/Editor/common/ImageSelector/Options/AddLink.js +3 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +4 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +4 -1
- package/dist/Editor/utils/embed.js +1 -0
- package/package.json +1 -1
package/dist/Editor/Editor.css
CHANGED
@@ -136,9 +136,14 @@ blockquote {
|
|
136
136
|
z-index: 1000;
|
137
137
|
}
|
138
138
|
|
139
|
+
.element-toolbar a {
|
140
|
+
margin-right: 4px;
|
141
|
+
}
|
142
|
+
|
139
143
|
.grid-container-toolbar button,
|
140
144
|
.grid-item-toolbar button,
|
141
|
-
.element-toolbar button
|
145
|
+
.element-toolbar button,
|
146
|
+
.element-toolbar a {
|
142
147
|
border-radius: 10px;
|
143
148
|
border: 1px solid rgba(37, 99, 235, 0.32);
|
144
149
|
background: #fff;
|
@@ -148,6 +153,7 @@ blockquote {
|
|
148
153
|
padding: 6px;
|
149
154
|
}
|
150
155
|
.element-toolbar button svg,
|
156
|
+
.element-toolbar a svg,
|
151
157
|
.grid-container-toolbar button svg,
|
152
158
|
.grid-item-toolbar button svg {
|
153
159
|
width: 16px;
|
@@ -156,7 +162,8 @@ blockquote {
|
|
156
162
|
|
157
163
|
.grid-container-toolbar button:hover,
|
158
164
|
.grid-item-toolbar button:hover,
|
159
|
-
.element-toolbar button:hover
|
165
|
+
.element-toolbar button:hover,
|
166
|
+
.element-toolbar a:hover {
|
160
167
|
background-color: #ffffff;
|
161
168
|
color: #2684ff;
|
162
169
|
border: 1px solid #2684ff;
|
@@ -418,7 +425,6 @@ blockquote {
|
|
418
425
|
background: #eee !important;
|
419
426
|
color: #ccc !important;
|
420
427
|
border: 1px solid #ccc !important;
|
421
|
-
|
422
428
|
}
|
423
429
|
|
424
430
|
.MuiButton-root.secondaryBtn {
|
@@ -486,7 +492,7 @@ blockquote {
|
|
486
492
|
}
|
487
493
|
|
488
494
|
.embed {
|
489
|
-
justify-content: center;
|
495
|
+
justify-content: center;
|
490
496
|
}
|
491
497
|
|
492
498
|
.embed img {
|
@@ -830,8 +836,8 @@ blockquote {
|
|
830
836
|
font-weight: 400;
|
831
837
|
width: 200px;
|
832
838
|
cursor: pointer;
|
833
|
-
color
|
834
|
-
background-color: #
|
839
|
+
color: #464646;
|
840
|
+
background-color: #fff;
|
835
841
|
padding: 4px 6px;
|
836
842
|
border-radius: 12px;
|
837
843
|
span {
|
@@ -870,38 +876,110 @@ blockquote {
|
|
870
876
|
|
871
877
|
/* HTML: <div class="loader"></div> */
|
872
878
|
.img-loader-wrapper {
|
873
|
-
width:28px;
|
879
|
+
width: 28px;
|
874
880
|
aspect-ratio: 1;
|
875
881
|
border-radius: 50%;
|
876
|
-
background: #
|
882
|
+
background: #f10c49;
|
877
883
|
animation: l9 2s infinite;
|
878
884
|
}
|
879
885
|
@keyframes l9 {
|
880
|
-
0%
|
881
|
-
|
882
|
-
|
883
|
-
|
884
|
-
|
885
|
-
|
886
|
-
|
887
|
-
|
888
|
-
|
889
|
-
|
890
|
-
|
891
|
-
|
892
|
-
|
893
|
-
|
894
|
-
|
895
|
-
|
896
|
-
|
897
|
-
|
898
|
-
|
899
|
-
|
900
|
-
|
901
|
-
|
902
|
-
|
903
|
-
|
904
|
-
|
905
|
-
|
906
|
-
|
907
|
-
|
886
|
+
0% {
|
887
|
+
box-shadow:
|
888
|
+
0 -16px #f4dd51,
|
889
|
+
calc(16px * 0.707) calc(-16px * 0.707) #e3aad6,
|
890
|
+
0 0 #f4dd51,
|
891
|
+
0 0 #e3aad6,
|
892
|
+
0 0 #f4dd51,
|
893
|
+
0 0 #e3aad6,
|
894
|
+
0 0 #f4dd51,
|
895
|
+
0 0 #e3aad6;
|
896
|
+
}
|
897
|
+
12.5% {
|
898
|
+
box-shadow:
|
899
|
+
0 0 #f4dd51,
|
900
|
+
calc(16px * 0.707) calc(-16px * 0.707) #e3aad6,
|
901
|
+
16px 0 #f4dd51,
|
902
|
+
0 0 #e3aad6,
|
903
|
+
0 0 #f4dd51,
|
904
|
+
0 0 #e3aad6,
|
905
|
+
0 0 #f4dd51,
|
906
|
+
0 0 #e3aad6;
|
907
|
+
}
|
908
|
+
25% {
|
909
|
+
box-shadow:
|
910
|
+
0 0 #f4dd51,
|
911
|
+
0 0 #e3aad6,
|
912
|
+
16px 0 #f4dd51,
|
913
|
+
calc(16px * 0.707) calc(16px * 0.707) #e3aad6,
|
914
|
+
0 0 #f4dd51,
|
915
|
+
0 0 #e3aad6,
|
916
|
+
0 0 #f4dd51,
|
917
|
+
0 0 #e3aad6;
|
918
|
+
}
|
919
|
+
37.5% {
|
920
|
+
box-shadow:
|
921
|
+
0 0 #f4dd51,
|
922
|
+
0 0 #e3aad6,
|
923
|
+
0 0 #f4dd51,
|
924
|
+
calc(16px * 0.707) calc(16px * 0.707) #e3aad6,
|
925
|
+
0 16px #f4dd51,
|
926
|
+
0 0 #e3aad6,
|
927
|
+
0 0 #f4dd51,
|
928
|
+
0 0 #e3aad6;
|
929
|
+
}
|
930
|
+
50% {
|
931
|
+
box-shadow:
|
932
|
+
0 0 #f4dd51,
|
933
|
+
0 0 #e3aad6,
|
934
|
+
0 0 #f4dd51,
|
935
|
+
0 0 #e3aad6,
|
936
|
+
0 16px #f4dd51,
|
937
|
+
calc(-16px * 0.707) calc(16px * 0.707) #e3aad6,
|
938
|
+
0 0 #f4dd51,
|
939
|
+
0 0 #e3aad6;
|
940
|
+
}
|
941
|
+
62.5% {
|
942
|
+
box-shadow:
|
943
|
+
0 0 #f4dd51,
|
944
|
+
0 0 #e3aad6,
|
945
|
+
0 0 #f4dd51,
|
946
|
+
0 0 #e3aad6,
|
947
|
+
0 0 #f4dd51,
|
948
|
+
calc(-16px * 0.707) calc(16px * 0.707) #e3aad6,
|
949
|
+
-16px 0 #f4dd51,
|
950
|
+
0 0 #e3aad6;
|
951
|
+
}
|
952
|
+
75% {
|
953
|
+
box-shadow:
|
954
|
+
0 0 #f4dd51,
|
955
|
+
0 0 #e3aad6,
|
956
|
+
0 0 #f4dd51,
|
957
|
+
0 0 #e3aad6,
|
958
|
+
0 0 #f4dd51,
|
959
|
+
0 0 #e3aad6,
|
960
|
+
-16px 0 #f4dd51,
|
961
|
+
calc(-16px * 0.707) calc(-16px * 0.707) #e3aad6;
|
962
|
+
}
|
963
|
+
87.5% {
|
964
|
+
box-shadow:
|
965
|
+
0 -16px #f4dd51,
|
966
|
+
0 0 #e3aad6,
|
967
|
+
0 0 #f4dd51,
|
968
|
+
0 0 #e3aad6,
|
969
|
+
0 0 #f4dd51,
|
970
|
+
0 0 #e3aad6,
|
971
|
+
0 0 #f4dd51,
|
972
|
+
calc(-16px * 0.707) calc(-16px * 0.707) #e3aad6;
|
973
|
+
}
|
974
|
+
100% {
|
975
|
+
box-shadow:
|
976
|
+
0 -16px #f4dd51,
|
977
|
+
calc(16px * 0.707) calc(-16px * 0.707) #e3aad6,
|
978
|
+
0 0 #f4dd51,
|
979
|
+
0 0 #e3aad6,
|
980
|
+
0 0 #f4dd51,
|
981
|
+
0 0 #e3aad6,
|
982
|
+
0 0 #f4dd51,
|
983
|
+
0 0 #e3aad6;
|
984
|
+
}
|
985
|
+
}
|
@@ -1,11 +1,12 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { useFocused, useSelected, useSlateStatic } from "slate-react";
|
3
|
+
import { IconButton, Tooltip } from "@mui/material";
|
4
|
+
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
|
5
|
+
import LinkOffIcon from "@mui/icons-material/LinkOff";
|
6
|
+
import { insertDefaultEmbed } from "../../utils/embed";
|
7
|
+
import { getQueryStrings } from "../../utils/SlateUtilityFunctions";
|
3
8
|
import { removeLink } from "../../utils/link";
|
4
|
-
import unlink from "../../Toolbar/toolbarIcons/unlink.svg";
|
5
9
|
import "./styles.css";
|
6
|
-
import { GrDocumentUpload } from 'react-icons/gr';
|
7
|
-
import { insertEmbed } from "../../utils/embed";
|
8
|
-
import { getQueryStrings } from "../../utils/SlateUtilityFunctions";
|
9
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
10
11
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
11
12
|
const Link = ({
|
@@ -17,22 +18,45 @@ const Link = ({
|
|
17
18
|
const selected = useSelected();
|
18
19
|
const focused = useFocused();
|
19
20
|
let refUrl = element.href ? element.href : element.url;
|
20
|
-
refUrl = refUrl ? refUrl.includes(
|
21
|
+
refUrl = refUrl ? refUrl.includes("http") ? refUrl : `//${refUrl}` : "Link";
|
21
22
|
let embedUrl = refUrl;
|
22
23
|
|
23
24
|
// const urlMatch = embedUrl.match(regex);
|
24
25
|
// embedUrl = urlMatch && urlMatch.length > 0 ? urlMatch[0] : '';
|
25
|
-
if (embedUrl.includes(
|
26
|
-
if (embedUrl.includes(
|
26
|
+
if (embedUrl.includes("youtube")) embedUrl = getQueryStrings(embedUrl); //embedUrl.replace(/\/watch\?v=/g, '/embed/')
|
27
|
+
if (embedUrl.includes("youtu.be")) embedUrl = getQueryStrings(embedUrl); //embedUrl.replace(/youtu.be\//, 'youtube.com/embed/')
|
27
28
|
// Others
|
28
|
-
if (embedUrl.includes(
|
29
|
-
if (embedUrl.includes(
|
30
|
-
if (embedUrl.includes(
|
31
|
-
if (embedUrl.includes(
|
29
|
+
if (embedUrl.includes("loom")) embedUrl = embedUrl.replace(/\/share\//, "/embed/");
|
30
|
+
if (embedUrl.includes("vimeo")) embedUrl = embedUrl.replace(/\/vimeo.com\//, "/player.vimeo.com/video/");
|
31
|
+
if (embedUrl.includes("dailymotion") && embedUrl.includes("video")) embedUrl = embedUrl.replace(/www.dailymotion.com\//, "www.dailymotion.com/embed/");
|
32
|
+
if (embedUrl.includes("dai.ly")) embedUrl = embedUrl.replace(/dai.ly\//, "www.dailymotion.com/embed/video/");
|
32
33
|
const embedDoc = () => {
|
33
|
-
|
34
|
-
|
35
|
-
|
34
|
+
insertDefaultEmbed(editor, "video", element.href);
|
35
|
+
};
|
36
|
+
const Toolbar = () => {
|
37
|
+
return selected && focused ? /*#__PURE__*/_jsxs("div", {
|
38
|
+
className: "element-toolbar hr",
|
39
|
+
contentEditable: false,
|
40
|
+
style: {
|
41
|
+
width: "150px",
|
42
|
+
top: "100%",
|
43
|
+
left: "0px"
|
44
|
+
},
|
45
|
+
children: [/*#__PURE__*/_jsx(Tooltip, {
|
46
|
+
title: "Open",
|
47
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
48
|
+
href: element.href,
|
49
|
+
target: element.target,
|
50
|
+
children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
|
51
|
+
})
|
52
|
+
}), /*#__PURE__*/_jsx(Tooltip, {
|
53
|
+
title: "Remove",
|
54
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
55
|
+
onClick: () => removeLink(editor),
|
56
|
+
children: /*#__PURE__*/_jsx(LinkOffIcon, {})
|
57
|
+
})
|
58
|
+
})]
|
59
|
+
}) : null;
|
36
60
|
};
|
37
61
|
return /*#__PURE__*/_jsxs("div", {
|
38
62
|
className: "link",
|
@@ -42,24 +66,7 @@ const Link = ({
|
|
42
66
|
...element.attr,
|
43
67
|
target: element.target,
|
44
68
|
children: children
|
45
|
-
}),
|
46
|
-
className: "af-link-popup",
|
47
|
-
contentEditable: false,
|
48
|
-
children: [/*#__PURE__*/_jsx("a", {
|
49
|
-
href: element.href,
|
50
|
-
target: element.target,
|
51
|
-
children: element.href
|
52
|
-
}), /*#__PURE__*/_jsx("button", {
|
53
|
-
onClick: () => embedDoc(editor),
|
54
|
-
children: /*#__PURE__*/_jsx(GrDocumentUpload, {})
|
55
|
-
}), /*#__PURE__*/_jsx("button", {
|
56
|
-
onClick: () => removeLink(editor),
|
57
|
-
children: /*#__PURE__*/_jsx("img", {
|
58
|
-
src: unlink,
|
59
|
-
alt: ""
|
60
|
-
})
|
61
|
-
})]
|
62
|
-
})]
|
69
|
+
}), /*#__PURE__*/_jsx(Toolbar, {})]
|
63
70
|
});
|
64
71
|
};
|
65
72
|
export default Link;
|
@@ -61,98 +61,80 @@ const LinkButton = props => {
|
|
61
61
|
icon: "link"
|
62
62
|
})
|
63
63
|
})
|
64
|
-
}), showInput && /*#__PURE__*/
|
64
|
+
}), showInput && /*#__PURE__*/_jsxs(Dialog, {
|
65
|
+
fullWidth: true,
|
65
66
|
open: true,
|
66
67
|
className: `dialogComp`,
|
67
|
-
children: /*#__PURE__*/
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
},
|
73
|
-
children: [/*#__PURE__*/_jsx(DialogTitle, {
|
74
|
-
sx: {
|
75
|
-
p: 0,
|
76
|
-
pb: 2
|
68
|
+
children: [/*#__PURE__*/_jsx(DialogTitle, {
|
69
|
+
children: /*#__PURE__*/_jsxs("div", {
|
70
|
+
style: {
|
71
|
+
display: "flex",
|
72
|
+
justifyContent: "space-between"
|
77
73
|
},
|
78
|
-
children: /*#__PURE__*/
|
74
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
75
|
+
variant: "h6",
|
76
|
+
className: "popupTitle",
|
77
|
+
color: "primary",
|
78
|
+
children: "LINK"
|
79
|
+
}), /*#__PURE__*/_jsx("div", {
|
79
80
|
style: {
|
80
|
-
display: "flex"
|
81
|
-
justifyContent: "space-between"
|
81
|
+
display: "flex"
|
82
82
|
},
|
83
|
-
children:
|
84
|
-
|
85
|
-
className: "
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
83
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
84
|
+
onClick: handleClose,
|
85
|
+
className: "close-popupbtn",
|
86
|
+
children: /*#__PURE__*/_jsx(CloseIcon, {})
|
87
|
+
})
|
88
|
+
})]
|
89
|
+
})
|
90
|
+
}), /*#__PURE__*/_jsxs(DialogContent, {
|
91
|
+
children: [/*#__PURE__*/_jsx(Grid, {
|
92
|
+
item: true,
|
93
|
+
xs: 12,
|
94
|
+
style: {
|
95
|
+
paddingTop: "12px"
|
96
|
+
},
|
97
|
+
children: /*#__PURE__*/_jsx(TextField, {
|
98
|
+
size: "small",
|
99
|
+
fullWidth: true,
|
100
|
+
value: url,
|
101
|
+
placeholder: "https://google.com",
|
102
|
+
onChange: handleInputChange
|
98
103
|
})
|
99
|
-
}), /*#__PURE__*/_jsx(
|
104
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
105
|
+
item: true,
|
106
|
+
xs: 12,
|
100
107
|
sx: {
|
101
|
-
|
108
|
+
ml: 1
|
102
109
|
},
|
103
|
-
children: /*#__PURE__*/
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
item: true,
|
108
|
-
xs: 12,
|
109
|
-
children: /*#__PURE__*/_jsx(TextField, {
|
110
|
-
size: "small",
|
111
|
-
fullWidth: true,
|
112
|
-
value: url,
|
113
|
-
placeholder: "https://google.com",
|
110
|
+
children: /*#__PURE__*/_jsx(FormControl, {
|
111
|
+
children: /*#__PURE__*/_jsx(FormControlLabel, {
|
112
|
+
control: /*#__PURE__*/_jsx(Checkbox, {
|
113
|
+
checked: showInNewTab,
|
114
114
|
onChange: handleInputChange
|
115
|
+
}),
|
116
|
+
label: /*#__PURE__*/_jsx(Typography, {
|
117
|
+
variant: "body1",
|
118
|
+
color: "primary",
|
119
|
+
sx: {
|
120
|
+
pl: 1
|
121
|
+
},
|
122
|
+
children: "Open in new tab"
|
115
123
|
})
|
116
|
-
})
|
117
|
-
item: true,
|
118
|
-
xs: 12,
|
119
|
-
sx: {
|
120
|
-
ml: 1
|
121
|
-
},
|
122
|
-
children: /*#__PURE__*/_jsx(FormControl, {
|
123
|
-
children: /*#__PURE__*/_jsx(FormControlLabel, {
|
124
|
-
control: /*#__PURE__*/_jsx(Checkbox, {
|
125
|
-
checked: showInNewTab,
|
126
|
-
onChange: handleInputChange
|
127
|
-
}),
|
128
|
-
label: /*#__PURE__*/_jsx(Typography, {
|
129
|
-
variant: "body1",
|
130
|
-
color: "primary",
|
131
|
-
sx: {
|
132
|
-
pl: 1
|
133
|
-
},
|
134
|
-
children: "Open in new tab"
|
135
|
-
})
|
136
|
-
})
|
137
|
-
})
|
138
|
-
})]
|
124
|
+
})
|
139
125
|
})
|
140
|
-
}), /*#__PURE__*/_jsxs(DialogActions, {
|
141
|
-
sx: {
|
142
|
-
p: 0,
|
143
|
-
pt: 2
|
144
|
-
},
|
145
|
-
children: [/*#__PURE__*/_jsx(Button, {
|
146
|
-
onClick: handleClose,
|
147
|
-
className: "secondaryBtn",
|
148
|
-
children: "Cancel"
|
149
|
-
}), /*#__PURE__*/_jsx(Button, {
|
150
|
-
onClick: handleInsertLink,
|
151
|
-
className: "primaryBtn",
|
152
|
-
children: "Add"
|
153
|
-
})]
|
154
126
|
})]
|
155
|
-
})
|
127
|
+
}), /*#__PURE__*/_jsxs(DialogActions, {
|
128
|
+
children: [/*#__PURE__*/_jsx(Button, {
|
129
|
+
onClick: handleClose,
|
130
|
+
className: "secondaryBtn",
|
131
|
+
children: "Cancel"
|
132
|
+
}), /*#__PURE__*/_jsx(Button, {
|
133
|
+
onClick: handleInsertLink,
|
134
|
+
className: "primaryBtn",
|
135
|
+
children: "Add"
|
136
|
+
})]
|
137
|
+
})]
|
156
138
|
})]
|
157
139
|
});
|
158
140
|
};
|
@@ -35,6 +35,7 @@ export const insertEmbed = (editor, embedData, format) => {
|
|
35
35
|
} = embedData;
|
36
36
|
if (!url && images.length === 0) return;
|
37
37
|
const embed = createEmbedNode(format, embedData);
|
38
|
+
console.log(embed);
|
38
39
|
Transforms.insertNodes(editor, embed, {
|
39
40
|
at: editor.selection.anchor.path
|
40
41
|
});
|