@flozy/editor 4.2.2 → 4.2.3

Sign up to get free protection for your applications and to get access to all the features.
@@ -47,14 +47,7 @@ const ToolBar = ({
47
47
  })]
48
48
  }) : null;
49
49
  };
50
- const ImageContent = ({
51
- readOnly,
52
- setOpenSettings,
53
- element,
54
- handleImageClick,
55
- onTouchEnd,
56
- path
57
- }) => {
50
+ const ImageContent = props => {
58
51
  const {
59
52
  alt,
60
53
  url,
@@ -64,8 +57,13 @@ const ImageContent = ({
64
57
  boxShadow,
65
58
  frame = null,
66
59
  objectFit,
67
- webAddress
68
- } = element;
60
+ webAddress,
61
+ readOnly,
62
+ setOpenSettings,
63
+ handleImageClick,
64
+ onTouchEnd,
65
+ path
66
+ } = props;
69
67
  const theme = useTheme();
70
68
  return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
71
69
  component: "button",
@@ -278,9 +276,9 @@ const Image = ({
278
276
  onSettings: onSettings,
279
277
  setOpenNav: setOpenNav
280
278
  }), /*#__PURE__*/_jsx(ImageContent, {
279
+ ...element,
281
280
  readOnly: readOnly,
282
281
  setOpenSettings: setOpenSettings,
283
- element: element,
284
282
  handleImageClick: handleImageClick,
285
283
  onTouchEnd: onTouchEnd,
286
284
  path: path
@@ -1,4 +1,4 @@
1
- import React, { useState, useEffect } from "react";
1
+ import React, { useState, useEffect, useCallback } from "react";
2
2
  import { useSlateStatic, ReactEditor } from "slate-react";
3
3
  import { Node, Transforms } from "slate";
4
4
  import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
@@ -13,6 +13,66 @@ import { getEmbedURL } from "../../helper";
13
13
  import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
14
14
  import { jsx as _jsx } from "react/jsx-runtime";
15
15
  import { jsxs as _jsxs } from "react/jsx-runtime";
16
+ const VideoContent = props => {
17
+ const {
18
+ resizing,
19
+ borderColor,
20
+ borderWidth,
21
+ borderStyle,
22
+ bgColor,
23
+ embedURL,
24
+ alt,
25
+ videoSX
26
+ } = props;
27
+ return resizing ? /*#__PURE__*/_jsx("div", {
28
+ style: {
29
+ width: "100%",
30
+ height: "100%",
31
+ border: "2px dashed black",
32
+ display: "flex",
33
+ justifyContent: "center",
34
+ alignItems: "center"
35
+ },
36
+ children: /*#__PURE__*/_jsx(Icon, {
37
+ icon: "videoPlayer"
38
+ })
39
+ }) : /*#__PURE__*/_jsx(Box, {
40
+ component: "iframe",
41
+ className: "embedd-iframe",
42
+ sx: {
43
+ border: "none",
44
+ position: "absolute",
45
+ width: "100%",
46
+ height: "100%",
47
+ maxWidth: "100%",
48
+ left: "0px",
49
+ ...(gradientBorder(borderColor) || {}),
50
+ borderWidth: borderWidth || "1px",
51
+ borderStyle: borderStyle || "solid",
52
+ background: bgColor || "transparent",
53
+ ...videoSX
54
+ },
55
+ src: embedURL,
56
+ title: alt
57
+ });
58
+ };
59
+ const VideoPlaceholder = props => {
60
+ const {
61
+ url,
62
+ readOnly,
63
+ onSettings
64
+ } = props;
65
+ return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
66
+ component: "button",
67
+ className: "element-empty-btn",
68
+ onClick: onSettings,
69
+ children: [/*#__PURE__*/_jsx(Icon, {
70
+ icon: "video"
71
+ }), "Embed Video or Other"]
72
+ }) : /*#__PURE__*/_jsx(VideoContent, {
73
+ ...props
74
+ });
75
+ };
16
76
  const Video = ({
17
77
  attributes,
18
78
  element,
@@ -21,17 +81,12 @@ const Video = ({
21
81
  }) => {
22
82
  const theme = useTheme();
23
83
  const {
24
- alt,
25
84
  alignment,
26
85
  borderRadius,
27
- borderWidth,
28
- borderColor,
29
- borderStyle,
30
86
  url,
31
87
  xsHidden,
32
88
  width: oldWidth,
33
- bannerSpacing,
34
- bgColor
89
+ bannerSpacing
35
90
  } = element;
36
91
  const editor = useSlateStatic();
37
92
  const [openSetttings, setOpenSettings] = useState(false);
@@ -121,7 +176,7 @@ const Video = ({
121
176
  at: path
122
177
  });
123
178
  };
124
- const getWidth = () => {
179
+ const getWidth = useCallback(() => {
125
180
  if (resizing) {
126
181
  return {
127
182
  width: `${size.width}px`,
@@ -139,7 +194,7 @@ const Video = ({
139
194
  }, theme)
140
195
  };
141
196
  }
142
- };
197
+ }, [size]);
143
198
  const embedURL = getEmbedURL(element);
144
199
  const videoSX = groupByBreakpoint({
145
200
  borderRadius: {
@@ -149,49 +204,6 @@ const Video = ({
149
204
  ...getTRBLBreakPoints(bannerSpacing)
150
205
  }
151
206
  }, theme);
152
- const VideoContent = () => {
153
- return resizing ? /*#__PURE__*/_jsx("div", {
154
- style: {
155
- width: "100%",
156
- height: "100%",
157
- border: "2px dashed black",
158
- display: "flex",
159
- justifyContent: "center",
160
- alignItems: "center"
161
- },
162
- children: /*#__PURE__*/_jsx(Icon, {
163
- icon: "videoPlayer"
164
- })
165
- }) : /*#__PURE__*/_jsx(Box, {
166
- component: "iframe",
167
- className: "embedd-iframe",
168
- sx: {
169
- border: "none",
170
- position: "absolute",
171
- width: "100%",
172
- height: "100%",
173
- maxWidth: "100%",
174
- left: "0px",
175
- ...(gradientBorder(borderColor) || {}),
176
- borderWidth: borderWidth || "1px",
177
- borderStyle: borderStyle || "solid",
178
- background: bgColor || "transparent",
179
- ...videoSX
180
- },
181
- src: embedURL,
182
- title: alt
183
- });
184
- };
185
- const VideoPlaceholder = () => {
186
- return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
187
- component: "button",
188
- className: "element-empty-btn",
189
- onClick: onSettings,
190
- children: [/*#__PURE__*/_jsx(Icon, {
191
- icon: "video"
192
- }), "Embed Video or Other"]
193
- }) : /*#__PURE__*/_jsx(VideoContent, {});
194
- };
195
207
  return /*#__PURE__*/_jsxs(Box, {
196
208
  ...attributes,
197
209
  className: "embed has-hover video dpath",
@@ -224,7 +236,12 @@ const Video = ({
224
236
  ...getWidth(),
225
237
  maxWidth: "100%"
226
238
  },
227
- children: [!readOnly && url && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(VideoPlaceholder, {}), !readOnly && url ? /*#__PURE__*/_jsx(IconButton, {
239
+ children: [!readOnly && url && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(VideoPlaceholder, {
240
+ ...element,
241
+ embedURL: embedURL,
242
+ onSettings: onSettings,
243
+ videoSX: videoSX
244
+ }), !readOnly && url ? /*#__PURE__*/_jsx(IconButton, {
228
245
  onPointerDown: onMouseDown,
229
246
  style: {
230
247
  background: "#FFF"
@@ -23,7 +23,7 @@ const TableRow = props => {
23
23
  return /*#__PURE__*/_jsx("tr", {
24
24
  ...attributes,
25
25
  style: {
26
- backgroundColor: bgColor,
26
+ background: bgColor,
27
27
  border: rowBorderColor ? `1px solid ${rowBorderColor}` : ""
28
28
  },
29
29
  children: children
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "4.2.2",
3
+ "version": "4.2.3",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"