@flozy/editor 11.0.8 → 11.0.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.
Files changed (4) hide show
  1. package/dist/Editor/Editor.css +1 -1
  2. package/dist/Editor/Elements/Embed/Image.js +13 -7
  3. package/dist/Editor/Elements/Embed/Video.js +40 -25
  4. package/package.json +1 -1
package/dist/Editor/Editor.css CHANGED
@@ -1403,7 +1403,7 @@ code.markcode {
1403
1403
 
1404
1404
  .truncateText {
1405
1405
  display: inline-block;
1406
- width: 380px;
1406
+ width: 100%;
1407
1407
  white-space: nowrap;
1408
1408
  overflow: hidden;
1409
1409
  text-overflow: ellipsis;
package/dist/Editor/Elements/Embed/Image.js CHANGED
@@ -114,29 +114,35 @@ const ImageContent = props => {
114
114
  children: uploadStatus?.isUploading ? /*#__PURE__*/_jsxs(Grid, {
115
115
  container: true,
116
116
  direction: "row",
117
- sx: {
118
- justifyContent: "space-between",
119
- alignItems: "center"
117
+ style: {
118
+ display: "flex",
119
+ justifyContent: "space-between"
120
120
  },
121
121
  children: [/*#__PURE__*/_jsx(Grid, {
122
+ style: {
123
+ width: "80%"
124
+ },
122
125
  children: /*#__PURE__*/_jsxs(Grid, {
123
126
  container: true,
124
127
  direction: "row",
125
128
  sx: {
126
- justifyContent: "space-between",
127
- alignItems: "center",
128
- gap: 1
129
+ justifyContent: "flex-start",
130
+ alignItems: "center"
131
+ // gap: 1,
129
132
  },
130
133
  children: [/*#__PURE__*/_jsx(Grid, {
131
134
  children: /*#__PURE__*/_jsx(Icon, {
132
135
  icon: "image"
133
136
  })
134
137
  }), /*#__PURE__*/_jsx(Grid, {
138
+ style: {
139
+ width: "80%"
140
+ },
135
141
  children: /*#__PURE__*/_jsxs(Box, {
136
142
  display: "flex",
137
143
  flexDirection: "column",
138
144
  alignItems: "flex-start",
139
- justifyContent: "space-between",
145
+ justifyContent: "flex-start",
140
146
  children: [/*#__PURE__*/_jsx(Box, {
141
147
  className: "truncateText",
142
148
  children: uploadStatus?.fileName
package/dist/Editor/Elements/Embed/Video.js CHANGED
@@ -28,6 +28,10 @@ const TYPE_LABELS = {
28
28
  video: "Embed Video or Other",
29
29
  image: "Embed Image or Other"
30
30
  };
31
+ const detectUrlType = url => {
32
+ if (typeof url !== "string") return "iframe";
33
+ return /\.(mp4|webm|ogg|mov|avi|mkv|flv|wmv)$/i.test(url.trim()) ? "video" : "iframe";
34
+ };
31
35
  const VideoContent = props => {
32
36
  const {
33
37
  resizing,
@@ -40,12 +44,26 @@ const VideoContent = props => {
40
44
  videoSX
41
45
  } = props;
42
46
  const iframeRef = useRef(null);
47
+ const mediaType = detectUrlType(embedURL);
43
48
  useEffect(() => {
44
49
  if (iframeRef.current) {
45
50
  iframeRef.current.src = "about:blank"; // reloading the iframe
46
51
  iframeRef.current.src = embedURL;
47
52
  }
48
53
  }, [embedURL, iframeRef.current]);
54
+ const commonSx = {
55
+ border: "none",
56
+ position: "absolute",
57
+ width: "100%",
58
+ height: "100%",
59
+ maxWidth: "100%",
60
+ left: 0,
61
+ ...(gradientBorder(borderColor) || {}),
62
+ borderWidth: borderWidth || "1px",
63
+ borderStyle: borderStyle || "solid",
64
+ background: bgColor || "transparent",
65
+ ...videoSX
66
+ };
49
67
  return resizing ? /*#__PURE__*/_jsx("div", {
50
68
  style: {
51
69
  width: "100%",
@@ -59,24 +77,14 @@ const VideoContent = props => {
59
77
  icon: "videoPlayer"
60
78
  })
61
79
  }) : /*#__PURE__*/_jsx(Box, {
62
- ref: iframeRef,
63
- component: "iframe",
80
+ component: mediaType,
81
+ ref: mediaType === "iframe" ? iframeRef : undefined,
82
+ src: embedURL,
83
+ controls: mediaType === "video",
84
+ allowFullScreen: mediaType === "iframe",
64
85
  className: "embedd-iframe",
65
- sx: {
66
- border: "none",
67
- position: "absolute",
68
- width: "100%",
69
- height: "100%",
70
- maxWidth: "100%",
71
- left: "0px",
72
- ...(gradientBorder(borderColor) || {}),
73
- borderWidth: borderWidth || "1px",
74
- borderStyle: borderStyle || "solid",
75
- background: bgColor || "transparent",
76
- ...videoSX
77
- },
78
- title: alt,
79
- allowFullScreen: true
86
+ sx: commonSx,
87
+ title: alt
80
88
  });
81
89
  };
82
90
  const VideoPlaceholder = props => {
@@ -92,7 +100,8 @@ const VideoPlaceholder = props => {
92
100
  uploadTerminator,
93
101
  uniqueId,
94
102
  editor,
95
- path
103
+ path,
104
+ embedURL
96
105
  } = props;
97
106
  const cancelUpload = e => {
98
107
  e.stopPropagation();
@@ -115,29 +124,35 @@ const VideoPlaceholder = props => {
115
124
  children: uploadStatus?.isUploading ? /*#__PURE__*/_jsxs(Grid, {
116
125
  container: true,
117
126
  direction: "row",
118
- sx: {
119
- justifyContent: "space-between",
120
- alignItems: "center"
127
+ style: {
128
+ display: "flex",
129
+ justifyContent: "space-between"
121
130
  },
122
131
  children: [/*#__PURE__*/_jsx(Grid, {
132
+ style: {
133
+ width: "80%"
134
+ },
123
135
  children: /*#__PURE__*/_jsxs(Grid, {
124
136
  container: true,
125
137
  direction: "row",
126
138
  sx: {
127
- justifyContent: "space-between",
128
- alignItems: "center",
129
- gap: 1
139
+ justifyContent: "flex-start",
140
+ alignItems: "center"
141
+ // gap: 1,
130
142
  },
131
143
  children: [/*#__PURE__*/_jsx(Grid, {
132
144
  children: /*#__PURE__*/_jsx(Icon, {
133
145
  icon: "image"
134
146
  })
135
147
  }), /*#__PURE__*/_jsx(Grid, {
148
+ style: {
149
+ width: "80%"
150
+ },
136
151
  children: /*#__PURE__*/_jsxs(Box, {
137
152
  display: "flex",
138
153
  flexDirection: "column",
139
154
  alignItems: "flex-start",
140
- justifyContent: "space-between",
155
+ justifyContent: "flex-start",
141
156
  children: [/*#__PURE__*/_jsx(Box, {
142
157
  className: "truncateText",
143
158
  children: uploadStatus?.fileName
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "11.0.8",
3
+ "version": "11.0.9",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"