@flozy/editor 1.8.3 → 1.8.5

package/dist/Editor/CommonEditor.js

@@ -13,7 +13,7 @@ import { mentionsEvent, commands, indentation, escapeEvent, enterEvent } from ".
 import withCommon from "./hooks/withCommon";
 import DialogWrapper from "./DialogWrapper";
 import { serializeToText } from "./utils/serializeToText";
-import { getPageSettings } from "./utils/pageSettings";
+import { findPageSettings, getPageSettings } from "./utils/pageSettings";
 import { getThumbnailImage, invertColor } from "./helper";
 import PopupTool from "./Toolbar/PopupTool";
 import "./font.css";
@@ -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();
@@ -336,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
@@ -360,15 +362,15 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                       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/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

@@ -12,9 +12,16 @@ export const PrevArrow = props => {
     className: className,
     style: {
       ...style,
-      position: "absolute"
+      position: "absolute",
+      left: '5px',
+      zIndex: 3
     },
     onClick: onClick,
+    sx: {
+      '&.MuiButtonBase-root': {
+        lineHeight: "0px !important"
+      }
+    },
     contentEditable: false,
     children: /*#__PURE__*/_jsx(Icon, {
       icon: "leftArrow"
@@ -31,7 +38,14 @@ export const NextArrow = props => {
     className: className,
     style: {
       ...style,
-      position: "absolute"
+      position: "absolute",
+      right: '5px',
+      zIndex: 3
+    },
+    sx: {
+      '&.MuiButtonBase-root': {
+        lineHeight: "0px !important"
+      }
     },
     onClick: onClick,
     contentEditable: false,

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

@@ -11,6 +11,7 @@
   font-family: slick;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  content: none;
 }
 .slick-loading .slick-list {
   background: #fff;

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
     },

package/dist/Editor/Elements/Form/Form.js

@@ -1,7 +1,7 @@
 import React, { useState, useRef } from "react";
 import { Transforms } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
-import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress } from "@mui/material";
+import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress, Box } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import BackupIcon from "@mui/icons-material/Backup";
 import { GridSettingsIcon, GridAddSectionIcon, WorkflowIcon } from "../../common/iconslist";
@@ -11,6 +11,7 @@ import { formField } from "../../utils/formfield";
 import { formSubmit } from "../../service/formSubmit";
 import formButtonStyle from "../../common/StyleBuilder/formButtonStyle";
 import Workflow from "./Workflow";
+import { getTRBLBreakPoints } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Form = props => {
@@ -39,12 +40,6 @@ const Form = props => {
     fontFamily,
     textAlign
   } = element;
-  const {
-    left,
-    top,
-    right,
-    bottom
-  } = bannerSpacing || {};
   const {
     topLeft,
     topRight,
@@ -237,20 +232,20 @@ const Form = props => {
     },
     onMouseOver: onMouseOver,
     onMouseLeave: onMouseLeave,
-    children: [/*#__PURE__*/_jsxs("form", {
+    children: [/*#__PURE__*/_jsxs(Box, {
+      component: "form",
       id: `${formName}`,
       onSubmit: handleSubmit,
-      style: {
+      sx: {
         color: textColor || "#FFF",
         borderColor: borderColor || "transparent",
         borderWidth: borderWidth || "1px",
         borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
         borderStyle: borderStyle || "solid",
         background: bgColor || "transparent",
-        paddingLeft: `${left}px`,
-        paddingRight: `${right}px`,
-        paddingTop: `${top}px`,
-        paddingBottom: `${bottom}px`,
+        padding: {
+          ...getTRBLBreakPoints(bannerSpacing)
+        },
         position: "relative"
       },
       ref: formEle,
@@ -279,23 +274,22 @@ const Form = props => {
               justifyContent: btnAlign?.horizantal || "start",
               alignItems: btnAlign?.vertical || "start"
             },
-            children: /*#__PURE__*/_jsx("button", {
+            children: /*#__PURE__*/_jsx(Box, {
+              component: "button",
               onClick: onSubmitClick,
               disabled: loading,
-              style: {
+              sx: {
                 background: buttonProps?.bgColor || "rgb(30, 75, 122)",
                 borderWidth: "1px",
                 borderBlockStyle: "solid",
                 ...btnBorderStyle,
                 borderRadius: `${btnR?.topLeft}px ${btnR?.topRight}px ${btnR?.bottomLeft}px ${btnR?.bottomRight}px`,
-                paddingLeft: `${btnSpacing?.left || 8}px`,
-                paddingRight: `${btnSpacing?.right || 8}px`,
-                paddingTop: `${btnSpacing?.top || 8}px`,
-                paddingBottom: `${btnSpacing?.bottom || 8}px`,
-                marginLeft: `${btnM?.left || 0}px`,
-                marginRight: `${btnM?.right || 0}px`,
-                marginTop: `${btnM?.top || 0}px`,
-                marginBottom: `${btnM?.bottom || 0}px`,
+                padding: {
+                  ...getTRBLBreakPoints(btnSpacing)
+                },
+                margin: {
+                  ...getTRBLBreakPoints(btnM)
+                },
                 color: `${buttonProps?.textColor || "#FFFFFF"}`,
                 fontSize: buttonProps?.textSize || "inherit",
                 height: "fit-content",