@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.
Files changed (8) hide show
  1. package/dist/Editor/Editor.css +114 -36
  2. package/dist/Editor/Elements/Link/Link.js +39 -32
  3. package/dist/Editor/Elements/Link/LinkButton.js +62 -80
  4. package/dist/Editor/common/ImageSelector/Options/AddLink.js +3 -0
  5. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +4 -1
  6. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +4 -1
  7. package/dist/Editor/utils/embed.js +1 -0
  8. 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:#464646;
834
- background-color: #FFF;
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: #F10C49;
882
+ background: #f10c49;
877
883
  animation: l9 2s infinite;
878
884
  }
879
885
  @keyframes l9 {
880
- 0% {box-shadow:
881
- 0 -16px #F4DD51, calc(16px*0.707) calc(-16px*0.707) #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
882
- 0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
883
- 12.5% {box-shadow:
884
- 0 0 #F4DD51, calc(16px*0.707) calc(-16px*0.707) #E3AAD6,16px 0 #F4DD51, 0 0 #E3AAD6,
885
- 0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
886
- 25% {box-shadow:
887
- 0 0 #F4DD51, 0 0 #E3AAD6,16px 0 #F4DD51, calc(16px*0.707) calc(16px*0.707) #E3AAD6,
888
- 0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
889
- 37.5% {box-shadow:
890
- 0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, calc(16px*0.707) calc(16px*0.707) #E3AAD6,
891
- 0 16px #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
892
- 50% {box-shadow:
893
- 0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
894
- 0 16px #F4DD51, calc(-16px*0.707) calc(16px*0.707) #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
895
- 62.5% {box-shadow:
896
- 0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
897
- 0 0 #F4DD51, calc(-16px*0.707) calc(16px*0.707) #E3AAD6,-16px 0 #F4DD51, 0 0 #E3AAD6}
898
- 75% {box-shadow:
899
- 0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
900
- 0 0 #F4DD51, 0 0 #E3AAD6,-16px 0 #F4DD51, calc(-16px*0.707) calc(-16px*0.707) #E3AAD6}
901
- 87.5% {box-shadow:
902
- 0 -16px #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
903
- 0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, calc(-16px*0.707) calc(-16px*0.707) #E3AAD6}
904
- 100% {box-shadow:
905
- 0 -16px #F4DD51, calc(16px*0.707) calc(-16px*0.707) #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
906
- 0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
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
+ }
package/dist/Editor/Elements/Link/Link.js CHANGED
@@ -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('http') ? refUrl : `//${refUrl}` : 'Link';
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('youtube')) embedUrl = getQueryStrings(embedUrl); //embedUrl.replace(/\/watch\?v=/g, '/embed/')
26
- if (embedUrl.includes('youtu.be')) embedUrl = getQueryStrings(embedUrl); //embedUrl.replace(/youtu.be\//, 'youtube.com/embed/')
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('loom')) embedUrl = embedUrl.replace(/\/share\//, '/embed/');
29
- if (embedUrl.includes('vimeo')) embedUrl = embedUrl.replace(/\/vimeo.com\//, '/player.vimeo.com/video/');
30
- if (embedUrl.includes('dailymotion') && embedUrl.includes('video')) embedUrl = embedUrl.replace(/www.dailymotion.com\//, 'www.dailymotion.com/embed/');
31
- if (embedUrl.includes('dai.ly')) embedUrl = embedUrl.replace(/dai.ly\//, 'www.dailymotion.com/embed/video/');
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
- insertEmbed(editor, {
34
- url: embedUrl
35
- }, 'embed');
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
- }), selected && focused && /*#__PURE__*/_jsxs("div", {
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;
package/dist/Editor/Elements/Link/LinkButton.js CHANGED
@@ -61,98 +61,80 @@ const LinkButton = props => {
61
61
  icon: "link"
62
62
  })
63
63
  })
64
- }), showInput && /*#__PURE__*/_jsx(Dialog, {
64
+ }), showInput && /*#__PURE__*/_jsxs(Dialog, {
65
+ fullWidth: true,
65
66
  open: true,
66
67
  className: `dialogComp`,
67
- children: /*#__PURE__*/_jsxs(Grid, {
68
- item: true,
69
- xs: 12,
70
- sx: {
71
- p: 3
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__*/_jsxs("div", {
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: [/*#__PURE__*/_jsx(Typography, {
84
- variant: "h6",
85
- className: "popupTitle",
86
- color: "primary",
87
- children: "LINK"
88
- }), /*#__PURE__*/_jsx("div", {
89
- style: {
90
- display: "flex"
91
- },
92
- children: /*#__PURE__*/_jsx(IconButton, {
93
- onClick: handleClose,
94
- className: "close-popupbtn",
95
- children: /*#__PURE__*/_jsx(CloseIcon, {})
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(DialogContent, {
104
+ }), /*#__PURE__*/_jsx(Grid, {
105
+ item: true,
106
+ xs: 12,
100
107
  sx: {
101
- p: 0
108
+ ml: 1
102
109
  },
103
- children: /*#__PURE__*/_jsxs(Grid, {
104
- container: true,
105
- spacing: 2,
106
- children: [/*#__PURE__*/_jsx(Grid, {
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
- }), /*#__PURE__*/_jsx(Grid, {
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
  };
package/dist/Editor/common/ImageSelector/Options/AddLink.js CHANGED
@@ -19,6 +19,9 @@ const AddLink = props => {
19
19
  item: true,
20
20
  xs: 12,
21
21
  className: "ims-right",
22
+ style: {
23
+ paddingTop: "8px"
24
+ },
22
25
  children: /*#__PURE__*/_jsx(TextField, {
23
26
  placeholder: `Add ${title} URL`,
24
27
  fullWidth: true,
package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js CHANGED
@@ -13,9 +13,12 @@ const BannerSpacing = props => {
13
13
  onChange,
14
14
  elementProps
15
15
  } = props;
16
- const {
16
+ let {
17
17
  lockSpacing
18
18
  } = elementProps || {};
19
+ if (lockSpacing === undefined) {
20
+ lockSpacing = true;
21
+ }
19
22
  const {
20
23
  key
21
24
  } = data;
package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js CHANGED
@@ -13,10 +13,13 @@ const BorderRadius = props => {
13
13
  onChange,
14
14
  elementProps
15
15
  } = props;
16
- const {
16
+ let {
17
17
  lockRadius,
18
18
  borderColor
19
19
  } = elementProps;
20
+ if (lockRadius === undefined) {
21
+ lockRadius = true;
22
+ }
20
23
  const {
21
24
  key
22
25
  } = data;
package/dist/Editor/utils/embed.js CHANGED
@@ -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
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "1.7.2",
3
+ "version": "1.7.3",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"