@flozy/editor 1.8.2 → 1.8.4

package/dist/Editor/CommonEditor.js

@@ -30,6 +30,7 @@ import Section from "./common/Section";
 import "animate.css";
 import decorators from "./utils/Decorators";
 import useElement from "./utils/customHooks/useElement";
+import { getTRBLBreakPoints } from "./helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar"];
@@ -73,7 +74,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     editor: collaborativeEditor,
     readOnly,
     toolbarOptions,
-    otherProps
+    otherProps,
+    isIframe
   } = props;
   const editorWrapper = useRef();
   const mentionsRef = useRef();
@@ -114,6 +116,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     bannerSpacing,
     pageBgImage,
     pageColor,
+    color: pageTextColor,
     pageWidth
   } = pageSt?.pageProps || {
     bannerSpacing: {
@@ -335,7 +338,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       footer: footer || "",
       children: /*#__PURE__*/_jsx(Box, {
         component: "div",
-        className: `${editorClass || ""}`,
+        className: `${editorClass || ""} ${isIframe ? "iframe-editor" : ""}`,
         sx: classes.root,
         style: {
           ...dotBg
@@ -356,17 +359,18 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                   children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
                     className: "scroll-area",
                     style: {
-                      backgroundColor: pageColor || "#FFF"
+                      background: pageColor || "#FFF",
+                      color: pageTextColor || "#000000"
                     },
-                    children: /*#__PURE__*/_jsxs("div", {
+                    children: /*#__PURE__*/_jsxs(Box, {
+                      component: "div",
                       ref: editorWrapper,
                       className: `editor-wrapper ${pageWidth === "fixed" ? "fixed" : "full"}`,
-                      style: {
+                      sx: {
                         backgroundColor: "transparent",
-                        paddingLeft: `${bannerSpacing?.left || 0}px`,
-                        paddingRight: `${bannerSpacing?.right || 0}px`,
-                        paddingTop: `${bannerSpacing?.top}px`,
-                        paddingBottom: `${bannerSpacing?.bottom}px`,
+                        padding: {
+                          ...getTRBLBreakPoints(bannerSpacing)
+                        },
                         width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
                         height: viewport.h ? `${viewport.h}px` : `100%`,
                         alignSelf: "center",

package/dist/Editor/Editor.css

@@ -169,10 +169,21 @@ blockquote {
   border: 1px solid #2684ff;
 }
 
+.grid-container-toolbar-hide button {
+  display: none !important;
+}
+
+.no-border-button button,
+.no-border-button button:hover {
+  border: none
+}
+
 .grid-item {
   padding: 0px;
-  background-color: #fff;
   position: relative;
+  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+  -moz-box-sizing: border-box; /* Firefox, other Gecko */
+  box-sizing: border-box; /* Opera/IE 8+ */
 }
 
 .accordion-container {
@@ -478,14 +489,6 @@ blockquote {
     display: flex;
   }
 
-  .grid-container > div {
-    flex-direction: column !important;
-  }
-
-  .grid-item {
-    width: 100% !important;
-  }
-
   .page-builder .editor-wrapper {
     max-width: 100% !important;
     margin-top: 0px !important;
@@ -871,11 +874,11 @@ blockquote {
   padding-left: 16px;
 }
 .cradio-primary .MuiRadio-root {
-  color: #E0E0E0;
+  color: #e0e0e0;
 }
 .cradio-primary .MuiRadio-root.Mui-checked,
 .ccheckbox-primary .MuiCheckbox-root.Mui-checked {
-  color: #2563eb
+  color: #2563eb;
 }
 
 .spacingSlider .MuiSlider-thumb {
@@ -957,7 +960,7 @@ blockquote {
   padding: 8px 0px;
 }
 .sidebar-wrpr-eds .MuiTypography-body1 {
-  color: #0F172A;
+  color: #0f172a;
   font-size: 14px;
 }
 

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -19,6 +19,7 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import AppHeaderPopup from "./AppHeaderPopup";
 import { Tooltip } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
+import { getTRBLBreakPoints } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -48,12 +49,6 @@ function AppHeader(props) {
     titleFontFamily,
     isLogoRight
   } = element;
-  const {
-    left,
-    top,
-    right,
-    bottom
-  } = bannerSpacing || {};
   const {
     window
   } = props;
@@ -198,14 +193,13 @@ function AppHeader(props) {
         },
         children: [/*#__PURE__*/_jsx(CssBaseline, {}), /*#__PURE__*/_jsx(AppBar, {
           component: "nav",
-          style: {
+          sx: {
             ...elevateStyle,
             background: bgColor,
             boxShadow: "none",
-            paddingLeft: `${left}px`,
-            paddingRight: `${right}px`,
-            paddingTop: `${top}px`,
-            paddingBottom: `${bottom}px`,
+            padding: {
+              ...getTRBLBreakPoints(bannerSpacing)
+            },
             zIndex: 999
           },
           children: /*#__PURE__*/_jsxs(Toolbar, {

package/dist/Editor/Elements/Attachments/Attachments.js

@@ -3,6 +3,7 @@ import { Box, Card, CardMedia, CardContent, Typography } from "@mui/material";
 import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
 import TextSnippetIcon from "@mui/icons-material/TextSnippet";
 import { formatDate } from "../../utils/helper";
+import Icon from "../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Attachments = props => {
@@ -52,6 +53,8 @@ const Attachments = props => {
         },
         children: type === "pdf" ? /*#__PURE__*/_jsx(PictureAsPdfIcon, {
           className: "pdf-i"
+        }) : type === "xls" ? /*#__PURE__*/_jsx(Icon, {
+          icon: "excelIcon"
         }) : /*#__PURE__*/_jsx(TextSnippetIcon, {
           className: "doc-i"
         })

package/dist/Editor/Elements/Button/EditorButton.js

@@ -9,6 +9,7 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import ButtonPopup from "./ButtonPopup";
 import { actionButtonRedirect } from "../../service/actionTrigger";
 import { WorkflowIcon } from "../../common/iconslist";
+import { getTRBLBreakPoints } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditorButton = props => {
@@ -55,12 +56,6 @@ const EditorButton = props => {
     bottomLeft,
     bottomRight
   } = borderRadius || {};
-  const {
-    left,
-    top,
-    right,
-    bottom
-  } = bannerSpacing || {};
   const BtnIcon = buttonIcon ? fIcons[buttonIcon] : null;
   const onClick = async e => {
     if (readOnly) {
@@ -167,10 +162,9 @@ const EditorButton = props => {
           borderWidth: borderWidth || "1px",
           borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
           borderStyle: borderStyle || "solid",
-          paddingLeft: `${left || 8}px`,
-          paddingRight: `${right || 8}px`,
-          paddingTop: `${top || 8}px`,
-          paddingBottom: `${bottom || 8}px`,
+          padding: {
+            ...getTRBLBreakPoints(bannerSpacing)
+          },
           color: `${textColor || "#FFFFFF"}`,
           fontSize: textSize || "inherit",
           fontFamily: fontFamily || "PoppinsRegular",

package/dist/Editor/Elements/Carousel/Arrows.js

@@ -1,7 +1,6 @@
 import React from "react";
 import { IconButton } from "@mui/material";
-import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
-import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+import Icon from "../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const PrevArrow = props => {
   const {
@@ -13,11 +12,15 @@ export const PrevArrow = props => {
     className: className,
     style: {
       ...style,
-      position: "absolute"
+      position: "absolute",
+      left: '5px',
+      zIndex: 3
     },
     onClick: onClick,
     contentEditable: false,
-    children: /*#__PURE__*/_jsx(ArrowBackIosIcon, {})
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: "leftArrow"
+    })
   });
 };
 export const NextArrow = props => {
@@ -30,10 +33,14 @@ export const NextArrow = props => {
     className: className,
     style: {
       ...style,
-      position: "absolute"
+      position: "absolute",
+      right: '5px',
+      zIndex: 3
     },
     onClick: onClick,
     contentEditable: false,
-    children: /*#__PURE__*/_jsx(ArrowForwardIosIcon, {})
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: "rightArrow"
+    })
   });
 };

package/dist/Editor/Elements/Carousel/Carousel.js

@@ -137,7 +137,7 @@ const Carousel = props => {
         ...settings,
         children: children.map((m, i) => {
           return /*#__PURE__*/_jsx("div", {
-            className: "item-sc",
+            className: `item-sc grid-container-toolbar-hide`,
             children: m
           }, i);
         })

package/dist/Editor/Elements/Carousel/slick-theme.min.css

@@ -91,8 +91,8 @@
 .slick-dots li {
   position: relative;
   display: inline-block;
-  width: 20px;
-  height: 20px;
+  width: 10px;
+  height: 10px;
   margin: 0 5px;
   padding: 0;
   cursor: pointer;
@@ -103,8 +103,8 @@
   font-size: 0;
   line-height: 0;
   display: block;
-  width: 20px;
-  height: 20px;
+  width: 10px;
+  height: 10px;
   padding: 5px;
   cursor: pointer;
   color: transparent;
@@ -120,24 +120,7 @@
 .slick-dots li button:hover:before {
   opacity: 1;
 }
-.slick-dots li button:before {
-  font-size: 6px;
-  line-height: 20px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 20px;
-  height: 20px;
-  content: "•";
-  text-align: center;
-  opacity: 0.25;
-  color: #000;
-}
-.slick-dots li.slick-active button:before {
-  opacity: 0.75;
-  color: #000;
-}
 
 .slick-dots li.slick-active {
-  background-color: rgba(0,0,0,0.75);
+  background-color: #2563EB;
 }

package/dist/Editor/Elements/ChipText/ChipText.js

@@ -3,6 +3,8 @@ import { Transforms } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import * as fIcons from "@mui/icons-material";
 import ChipTextPopup from "./ChipTextPopup";
+import { getTRBLBreakPoints } from "../../helper/theme";
+import { Box } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ChipText = props => {
@@ -24,12 +26,6 @@ const ChipText = props => {
     buttonIcon,
     textSize
   } = element;
-  const {
-    left,
-    top,
-    right,
-    bottom
-  } = bannerSpacing || {};
   const {
     topLeft,
     topRight,
@@ -74,17 +70,17 @@ const ChipText = props => {
       console.log(err);
     }
   };
-  return /*#__PURE__*/_jsxs("button", {
+  return /*#__PURE__*/_jsxs(Box, {
+    component: "button",
     ...attributes,
     className: "editor-chip-text",
     contentEditable: false,
-    style: {
+    sx: {
       display: "inline-block",
       verticalAlign: "middle",
-      paddingLeft: `${left}px`,
-      paddingRight: `${right}px`,
-      paddingTop: `${top}px`,
-      paddingBottom: `${bottom}px`,
+      padding: {
+        ...getTRBLBreakPoints(bannerSpacing)
+      },
       border: borderColor ? `1px solid ${borderColor}` : "none",
       borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
       background: bgColor || "#CCC",

package/dist/Editor/Elements/Color Picker/ColorPicker.js

@@ -4,9 +4,9 @@ import { Transforms } from "slate";
 import ColorPickerTool from "react-gcolor-picker";
 import { IconButton, Tooltip, Box, Popover } from "@mui/material";
 import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
-import { logo } from "./LogoIcon";
 import ColorButtons from "./ColorButtons";
 import ColorPickerStyles from "./Styles";
+import colorWheel from "./colorWheel.png";
 import "./ColorPicker.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -50,7 +50,6 @@ const ColorPicker = ({
     setAnchorEl(null);
   };
   const activeColor = activeMark(editor, format) || DEFAULT_COLOR[format];
-  const Logo = logo[format](activeColor);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: title,
@@ -58,7 +57,10 @@ const ColorPicker = ({
       children: /*#__PURE__*/_jsx(IconButton, {
         sx: pickerStyles.colorPickerIcon,
         onClick: onOpen,
-        children: Logo
+        children: /*#__PURE__*/_jsx("img", {
+          src: colorWheel,
+          alt: "color wheel"
+        })
       })
     }), showHex ? /*#__PURE__*/_jsx(Box, {
       sx: classes.hexStyle,

package/dist/Editor/Elements/Color Picker/Styles.js

@@ -49,23 +49,9 @@ const ColorPickerStyles = () => ({
     }
   },
   colorPickerIcon: {
-    background: "linear-gradient(324.06deg, #7025EB 12.92%, #30C8E9 25.48%, #2967F0 38.81%, #DE1E1E 52.54%, #EECE28 68.51%, #64EA61 86.62%)",
-    position: "relative",
-    padding: "9px",
-    zIndex: 1,
-    "&:before": {
-      content: '" "',
-      position: "absolute",
-      top: "3px",
-      left: "3px",
-      width: "calc(100% - 6px)",
-      height: "calc(100% - 6px)",
-      borderRadius: "50%",
-      background: "#E9F3FE",
-      zIndex: 2
-    },
-    "& svg": {
-      zIndex: 3
+    '& img': {
+      width: '24px',
+      height: '24px'
     }
   }
 });

package/dist/Editor/Elements/Embed/Embed.css

@@ -1,82 +1,85 @@
 .embed {
-    width: fit-content;
-    position: relative;
-    margin: 0px;
+  width: fit-content;
+  position: relative;
+  margin: 0px;
 }
 
-.embed img,
+.embed img {
+  width: 100%;
+  height: 100%
+}
 .embed iframe {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .embed button.resize {
-    position: absolute;
-    bottom: 2px;
-    right: 2px;
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
 }
 
 .image-text-wrapper {
-    padding: 0px;
-    margin: 0px;
-    left: 0px;
-    color: #fff;
-    font-weight: bold;
-    display: flex;
-    bottom: 0;
-    width: 100%;
-    flex-direction: column;
+  padding: 0px;
+  margin: 0px;
+  left: 0px;
+  color: #fff;
+  font-weight: bold;
+  display: flex;
+  bottom: 0;
+  width: 100%;
+  flex-direction: column;
 }
 
 .image-text {
-    padding: 12px;
-    background-color: rgba(0, 0, 0, 0.5);
-    margin: 0px;
-    color: #FFF;
-    font-weight: bold;
+  padding: 12px;
+  background-color: rgba(0, 0, 0, 0.5);
+  margin: 0px;
+  color: #fff;
+  font-weight: bold;
 }
 
 .link-embed-wrapper iframe {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .link-embed-wrapper {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .link-embed-wrapper iframe {
-    aspect-ratio: 16/9;
+  aspect-ratio: 16/9;
 }
 
 .link-embed-wrapper .deleteButton {
-    background-color: white;
-    /* box-shadow: 0px 0px 8px #ccc; */
-    padding: 5px;
-    width: 26px;
-    height: 26px;
+  background-color: white;
+  /* box-shadow: 0px 0px 8px #ccc; */
+  padding: 5px;
+  width: 26px;
+  height: 26px;
 }
 
 .link-embed-wrapper-container {
-    position: relative;
-    display: flex;
-    width: 100%;
-    height: 100%;
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
 }
 
 .link-embed-wrapper-container .docDeleteContainer {
-    display: none;
+  display: none;
 }
 
 .link-embed-wrapper-hover-container:hover .docDeleteContainer {
-    display: block;
-    position: absolute;
-    top: -16px;
-    right: 0;
-    background-color: white;
+  display: block;
+  position: absolute;
+  top: -16px;
+  right: 0;
+  background-color: white;
 }
 
 .link-embed-wrapper-hover-container:hover .link-embed-wrapper {
-    padding-top: 24px;
-}
+  padding-top: 24px;
+}

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

@@ -7,6 +7,7 @@ import EmbedPopup from "./EmbedPopup";
 import { IconButton, Tooltip, Box } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import { getTRBLBreakPoints } from "../../helper/theme";
 import Icon from "../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -29,12 +30,6 @@ const Image = ({
   const {
     readOnly
   } = customProps;
-  const {
-    left,
-    top,
-    right,
-    bottom
-  } = bannerSpacing || {};
   const {
     topLeft,
     topRight,
@@ -138,19 +133,18 @@ const Image = ({
       draggable: false
     });
   };
-  const totalMinus = (parseInt(left) || 0) + (parseInt(right) || 0);
   const width = resizing ? `${size.width}px` : `${size.widthInPercent}%`;
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxs(Box, {
     ...attributes,
+    component: "div",
     className: "embed has-hover",
-    style: {
+    sx: {
       display: "flex",
-      width: `calc(100% - ${totalMinus}px)`,
+      width: `100%`,
       maxWidth: "100%",
-      paddingLeft: `${left}px`,
-      paddingRight: `${right}px`,
-      paddingTop: `${top}px`,
-      paddingBottom: `${bottom}px`,
+      padding: {
+        ...getTRBLBreakPoints(bannerSpacing)
+      },
       backgroundColor: bgColor,
       justifyContent: horizantal,
       alignContent: vertical,

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

@@ -21,7 +21,6 @@ const Video = ({
   const {
     alt,
     alignment,
-    bannerSpacing,
     borderRadius,
     borderWidth,
     borderColor,
@@ -38,10 +37,6 @@ const Video = ({
     vertical,
     horizantal
   } = alignment || {};
-  const {
-    left,
-    right
-  } = bannerSpacing || {};
   const path = ReactEditor.findPath(editor, element);
   const [size, onMouseDown, resizing, onLoad] = useResize({
     parentDOM,
@@ -113,7 +108,6 @@ const Video = ({
       at: path
     });
   };
-  const totalMinus = parseInt(left || 0) + parseInt(right || 0);
   const width = resizing ? `${size.width}px` : `${size.widthInPercent || 100}%`;
   const embedURL = getEmbedURL(element);
   const VideoContent = () => {
@@ -161,7 +155,7 @@ const Video = ({
     className: "embed has-hover video",
     style: {
       display: "flex",
-      width: `calc(100% - ${totalMinus}px)`,
+      width: `100%`,
       justifyContent: horizantal,
       alignContent: vertical
     },