@flozy/editor 4.2.2 → 4.2.3

package/dist/Editor/Elements/Embed/Image.js

@@ -47,14 +47,7 @@ const ToolBar = ({
     })]
   }) : null;
 };
-const ImageContent = ({
-  readOnly,
-  setOpenSettings,
-  element,
-  handleImageClick,
-  onTouchEnd,
-  path
-}) => {
+const ImageContent = props => {
   const {
     alt,
     url,
@@ -64,8 +57,13 @@ const ImageContent = ({
     boxShadow,
     frame = null,
     objectFit,
-    webAddress
-  } = element;
+    webAddress,
+    readOnly,
+    setOpenSettings,
+    handleImageClick,
+    onTouchEnd,
+    path
+  } = props;
   const theme = useTheme();
   return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
     component: "button",
@@ -278,9 +276,9 @@ const Image = ({
         onSettings: onSettings,
         setOpenNav: setOpenNav
       }), /*#__PURE__*/_jsx(ImageContent, {
+        ...element,
         readOnly: readOnly,
         setOpenSettings: setOpenSettings,
-        element: element,
         handleImageClick: handleImageClick,
         onTouchEnd: onTouchEnd,
         path: path

package/dist/Editor/Elements/Embed/Video.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { Node, Transforms } from "slate";
 import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
@@ -13,6 +13,66 @@ import { getEmbedURL } from "../../helper";
 import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const VideoContent = props => {
+  const {
+    resizing,
+    borderColor,
+    borderWidth,
+    borderStyle,
+    bgColor,
+    embedURL,
+    alt,
+    videoSX
+  } = props;
+  return resizing ? /*#__PURE__*/_jsx("div", {
+    style: {
+      width: "100%",
+      height: "100%",
+      border: "2px dashed black",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: "videoPlayer"
+    })
+  }) : /*#__PURE__*/_jsx(Box, {
+    component: "iframe",
+    className: "embedd-iframe",
+    sx: {
+      border: "none",
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      maxWidth: "100%",
+      left: "0px",
+      ...(gradientBorder(borderColor) || {}),
+      borderWidth: borderWidth || "1px",
+      borderStyle: borderStyle || "solid",
+      background: bgColor || "transparent",
+      ...videoSX
+    },
+    src: embedURL,
+    title: alt
+  });
+};
+const VideoPlaceholder = props => {
+  const {
+    url,
+    readOnly,
+    onSettings
+  } = props;
+  return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
+    component: "button",
+    className: "element-empty-btn",
+    onClick: onSettings,
+    children: [/*#__PURE__*/_jsx(Icon, {
+      icon: "video"
+    }), "Embed Video or Other"]
+  }) : /*#__PURE__*/_jsx(VideoContent, {
+    ...props
+  });
+};
 const Video = ({
   attributes,
   element,
@@ -21,17 +81,12 @@ const Video = ({
 }) => {
   const theme = useTheme();
   const {
-    alt,
     alignment,
     borderRadius,
-    borderWidth,
-    borderColor,
-    borderStyle,
     url,
     xsHidden,
     width: oldWidth,
-    bannerSpacing,
-    bgColor
+    bannerSpacing
   } = element;
   const editor = useSlateStatic();
   const [openSetttings, setOpenSettings] = useState(false);
@@ -121,7 +176,7 @@ const Video = ({
       at: path
     });
   };
-  const getWidth = () => {
+  const getWidth = useCallback(() => {
     if (resizing) {
       return {
         width: `${size.width}px`,
@@ -139,7 +194,7 @@ const Video = ({
         }, theme)
       };
     }
-  };
+  }, [size]);
   const embedURL = getEmbedURL(element);
   const videoSX = groupByBreakpoint({
     borderRadius: {
@@ -149,49 +204,6 @@ const Video = ({
       ...getTRBLBreakPoints(bannerSpacing)
     }
   }, theme);
-  const VideoContent = () => {
-    return resizing ? /*#__PURE__*/_jsx("div", {
-      style: {
-        width: "100%",
-        height: "100%",
-        border: "2px dashed black",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center"
-      },
-      children: /*#__PURE__*/_jsx(Icon, {
-        icon: "videoPlayer"
-      })
-    }) : /*#__PURE__*/_jsx(Box, {
-      component: "iframe",
-      className: "embedd-iframe",
-      sx: {
-        border: "none",
-        position: "absolute",
-        width: "100%",
-        height: "100%",
-        maxWidth: "100%",
-        left: "0px",
-        ...(gradientBorder(borderColor) || {}),
-        borderWidth: borderWidth || "1px",
-        borderStyle: borderStyle || "solid",
-        background: bgColor || "transparent",
-        ...videoSX
-      },
-      src: embedURL,
-      title: alt
-    });
-  };
-  const VideoPlaceholder = () => {
-    return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
-      component: "button",
-      className: "element-empty-btn",
-      onClick: onSettings,
-      children: [/*#__PURE__*/_jsx(Icon, {
-        icon: "video"
-      }), "Embed Video or Other"]
-    }) : /*#__PURE__*/_jsx(VideoContent, {});
-  };
   return /*#__PURE__*/_jsxs(Box, {
     ...attributes,
     className: "embed has-hover video dpath",
@@ -224,7 +236,12 @@ const Video = ({
         ...getWidth(),
         maxWidth: "100%"
       },
-      children: [!readOnly && url && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(VideoPlaceholder, {}), !readOnly && url ? /*#__PURE__*/_jsx(IconButton, {
+      children: [!readOnly && url && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(VideoPlaceholder, {
+        ...element,
+        embedURL: embedURL,
+        onSettings: onSettings,
+        videoSX: videoSX
+      }), !readOnly && url ? /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {
           background: "#FFF"

package/dist/Editor/Elements/Table/TableRow.js

@@ -23,7 +23,7 @@ const TableRow = props => {
   return /*#__PURE__*/_jsx("tr", {
     ...attributes,
     style: {
-      backgroundColor: bgColor,
+      background: bgColor,
       border: rowBorderColor ? `1px solid ${rowBorderColor}` : ""
     },
     children: children

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"