@flozy/editor 1.8.3 → 1.8.5

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

@@ -1,4 +1,6 @@
 import React from "react";
+import { getTRBLBreakPoints } from "../../../helper/theme";
+import { Box } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 const FormText = props => {
   const {
@@ -16,12 +18,6 @@ const FormText = props => {
     lockSpacing,
     ...rest
   } = fieldProps;
-  const {
-    left,
-    top,
-    right,
-    bottom
-  } = bannerSpacing || {};
   const {
     topLeft,
     topRight,
@@ -37,16 +33,16 @@ const FormText = props => {
       display: "flex"
     },
     contentEditable: false,
-    children: /*#__PURE__*/_jsx("input", {
+    children: /*#__PURE__*/_jsx(Box, {
+      component: "input",
       ...rest,
       onChange: onChange,
-      style: {
+      sx: {
         width: "100%",
         border: `1px solid ${borderColor || "#FFF"}`,
-        paddingLeft: `${left || 8}px`,
-        paddingRight: `${right || 8}px`,
-        paddingTop: `${top || 8}px`,
-        paddingBottom: `${bottom || 8}px`,
+        padding: {
+          ...getTRBLBreakPoints(bannerSpacing)
+        },
         height: height || "auto",
         borderColor: borderColor || "transparent",
         borderWidth: borderWidth || "1px",

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

@@ -1,4 +1,6 @@
 import React from "react";
+import { Box } from "@mui/material";
+import { getTRBLBreakPoints } from "../../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 const FormTextArea = props => {
   const {
@@ -15,12 +17,6 @@ const FormTextArea = props => {
     bgColor,
     ...rest
   } = fieldProps;
-  const {
-    left,
-    top,
-    right,
-    bottom
-  } = bannerSpacing || {};
   const {
     topLeft,
     topRight,
@@ -36,16 +32,16 @@ const FormTextArea = props => {
       display: "flex"
     },
     contentEditable: false,
-    children: /*#__PURE__*/_jsx("textarea", {
+    children: /*#__PURE__*/_jsx(Box, {
+      component: "textarea",
       ...rest,
       onChange: onChange,
-      style: {
+      sx: {
         width: "100%",
         border: `1px solid ${borderColor || "#FFF"}`,
-        paddingLeft: `${left || 8}px`,
-        paddingRight: `${right || 8}px`,
-        paddingTop: `${top || 8}px`,
-        paddingBottom: `${bottom || 8}px`,
+        padding: {
+          ...getTRBLBreakPoints(bannerSpacing)
+        },
         height: height || "150px",
         borderColor: borderColor || "transparent",
         borderWidth: borderWidth || "1px",

package/dist/Editor/Elements/Grid/Grid.js

@@ -12,6 +12,7 @@ import GridPopup from "./GridPopup";
 import SectionPopup from "./SectionPopup";
 import { gridItem } from "../../utils/gridItem";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -42,14 +43,8 @@ const Grid = props => {
     borderColor,
     borderStyle,
     borderRadius,
-    gridSize
+    flexWrap
   } = element;
-  const {
-    left,
-    top,
-    right,
-    bottom
-  } = bannerSpacing || {};
   const {
     vertical,
     horizantal,
@@ -267,11 +262,7 @@ const Grid = props => {
       borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
       borderStyle: borderStyle || "solid"
     },
-    "data-path": path.join(",")
-    // sx={{
-    //   width: `${((gridSize || 12) / 12) * 100}%`,
-    // }}
-    ,
+    "data-path": path.join(","),
     children: [fgColor && /*#__PURE__*/_jsx("div", {
       style: {
         position: "absolute",
@@ -305,19 +296,20 @@ const Grid = props => {
       onDelete: onDelete,
       customProps: customProps
     }) : null, /*#__PURE__*/_jsx(GridContainer, {
-      item: true,
-      xs: 12,
+      container: true,
       className: "grid-c-wrpr",
-      style: {
+      sx: {
         display: "flex",
-        paddingLeft: `${left}px`,
-        paddingRight: `${right}px`,
-        paddingTop: `${top}px`,
-        paddingBottom: `${bottom}px`,
+        padding: {
+          ...getTRBLBreakPoints(bannerSpacing)
+        },
         alignItems: vertical || "start",
         justifyContent: horizantal || "start",
         flexDirection: flexDirection || "row",
-        width: "100%"
+        width: "100%",
+        flexWrap: {
+          ...getBreakPointsValue(flexWrap || "wrap")
+        }
       },
       "data-path": path.join(","),
       children: children

package/dist/Editor/Elements/Grid/GridItem.js

@@ -6,6 +6,7 @@ import GridItemPopup from "./GridItemPopup";
 import { IconButton, Tooltip, Box, Grid as Item } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridItem = props => {
@@ -24,7 +25,6 @@ const GridItem = props => {
     bannerSpacing,
     bgColor,
     alignment,
-    gridHeight,
     borderRadius,
     borderStyle,
     borderWidth,
@@ -33,14 +33,9 @@ const GridItem = props => {
     bgColorHover,
     borderColorHover,
     textColor,
-    animation
+    animation,
+    cellGHeight
   } = element;
-  const {
-    left,
-    top,
-    right,
-    bottom
-  } = bannerSpacing || {};
   const {
     vertical,
     horizantal,
@@ -53,7 +48,6 @@ const GridItem = props => {
     bottomRight
   } = borderRadius || {};
   const editor = useSlateStatic();
-  const itemWidth = (grid || 6) / 12 * 100;
   const path = ReactEditor.findPath(editor, element);
   const {
     hoverPath
@@ -104,11 +98,16 @@ const GridItem = props => {
   };
   return /*#__PURE__*/_jsxs(Item, {
     item: true,
-    xs: grid,
     component: "div",
-    className: `grid-item xs-${grid} element-root gi-top-wrpr content-editable`,
+    className: `grid-item element-root gi-top-wrpr content-editable`,
     ...attributes,
     sx: {
+      width: {
+        ...getBreakPointsValue(grid, null, "overrideGridSize", true)
+      },
+      height: {
+        ...getBreakPointsValue(cellGHeight || "auto")
+      },
       display: "flex",
       flexDirection: flexDirection || "column",
       background: bgColor || "transparent",
@@ -118,15 +117,12 @@ const GridItem = props => {
       borderStyle: borderStyle || "solid",
       alignItems: horizantal,
       justifyContent: vertical,
-      width: `${itemWidth}%`,
-      marginLeft: `${margin?.left || 0}px`,
-      marginRight: `${margin?.right || 0}px`,
-      marginTop: `${margin?.top || 0}px`,
-      marginBottom: `${margin?.bottom || 0}px`,
+      margin: {
+        ...getTRBLBreakPoints(margin)
+      },
       "&:hover": {
         background: `${bgColorHover || bgColor || "transparent"}`
-      },
-      height: "100%"
+      }
     },
     "data-path": path.join(","),
     style: {
@@ -159,13 +155,11 @@ const GridItem = props => {
       sx: {
         display: "flex",
         flexDirection: flexDirection || "column",
-        paddingLeft: `${left}px`,
-        paddingRight: `${right}px`,
-        paddingTop: `${top}px`,
-        paddingBottom: `${bottom}px`,
-        justifyContent: vertical,
-        height: gridHeight || "100%",
+        padding: {
+          ...getTRBLBreakPoints(bannerSpacing)
+        },
         width: "100%",
+        height: "100%",
         color: textColor || "#000",
         "&:hover": {
           borderColor: borderColorHover || borderColor || "transparent"

package/dist/Editor/Elements/Grid/templates/carousel_item.js

@@ -31,7 +31,6 @@ const carousel_item = itemNo => ({
           }]
         }]
       }],
-      bgColor: "#ECF4FF",
       lockSpacing: true,
       borderRadius: {
         topLeft: 8,
@@ -50,6 +49,7 @@ const carousel_item = itemNo => ({
         horizontal: "center"
       }
     }],
+    bgColor: "#ECF4FF",
     alignment: {
       flexDirection: "row"
     },
@@ -59,8 +59,7 @@ const carousel_item = itemNo => ({
       left: "16",
       right: "16",
       bottom: "16"
-    },
-    bgColor: "transparent"
+    }
   }]
 });
 export default carousel_item;

package/dist/Editor/Elements/Grid/templates/default_grid.js

@@ -3,7 +3,7 @@ const default_grid = [{
   grid: "container",
   children: [{
     type: "grid-item",
-    grid: 12,
+    grid: 6,
     children: [{
       type: "alignLeft",
       children: [{
@@ -63,7 +63,7 @@ const default_grid = [{
     }
   }, {
     type: "grid-item",
-    grid: 12,
+    grid: 6,
     children: [{
       type: "alignLeft",
       children: [{

package/dist/Editor/Elements/SimpleText.js

@@ -18,7 +18,6 @@ const SimpleTextStyle = ({
       position: "absolute",
       zIndex: -1,
       left: "0px",
-      paddingLeft: "4px",
       top: "-1px",
       bottom: 0,
       margin: "auto",

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

@@ -176,7 +176,9 @@ const Table = props => {
     style: {
       minWidth: "100%",
       maxWidth: "100%",
-      position: "relative"
+      position: "relative",
+      overflowX: "auto",
+      overflowY: "hidden"
     },
     children: [/*#__PURE__*/_jsx(TableComp, {
       sx: classes.table,

package/dist/Editor/Elements/TopBanner/TopBanner.js

@@ -92,8 +92,10 @@ const TopBanner = props => {
       ...props,
       classes: classes
     }) : null, /*#__PURE__*/_jsx("span", {
+      className: "hidden-children",
       style: {
-        display: "none"
+        display: "none",
+        height: "0px"
       },
       children: children
     })]

package/dist/Editor/IframeEditor.js

@@ -0,0 +1,30 @@
+import React from "react";
+import CommonEditor from "./CommonEditor";
+import useWindowMessage from "./hooks/useWindowMessage";
+import { jsx as _jsx } from "react/jsx-runtime";
+const IframeEditor = () => {
+  const [message, sendMessage] = useWindowMessage({
+    type: "editorProps"
+  });
+  const onSave = (a, b) => {
+    sendMessage({
+      type: "Editor:onSave",
+      payload: {
+        a,
+        b
+      }
+    });
+  };
+  if (message?.id && message?.content_status) {
+    return /*#__PURE__*/_jsx(CommonEditor, {
+      ...message,
+      isIframe: true,
+      onSave: onSave
+    });
+  } else {
+    return /*#__PURE__*/_jsx("div", {
+      children: "Waiting to receive data"
+    });
+  }
+};
+export default IframeEditor;

package/dist/Editor/MiniEditor.js

@@ -10,20 +10,16 @@ import withCommon from "./hooks/withCommon";
 import "./Editor.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const initialValue = [{
-  type: "paragraph",
-  children: [{
-    text: ""
-  }]
-}];
 const MiniEditor = props => {
   const {
     id,
-    // content,
+    content,
+    handleEditorChange,
     // onSave,
     // editor: collaborativeEditor,
     readOnly,
     miniEditorPlaceholder,
+    className,
     otherProps
   } = props;
   const {
@@ -103,10 +99,12 @@ const MiniEditor = props => {
   }, []);
   return /*#__PURE__*/_jsxs(Slate, {
     editor: editor,
-    initialValue: initialValue,
+    initialValue: content,
+    onChange: handleEditorChange,
     children: [/*#__PURE__*/_jsx(BasicToolbar, {
       ...props
     }), /*#__PURE__*/_jsx(Editable, {
+      className: className || "mini-editor-cls",
       renderElement: renderElement,
       renderLeaf: renderLeaf,
       onKeyDown: onKeyDown

package/dist/Editor/Styles/EditorStyles.js

@@ -7,7 +7,15 @@ const editorStyles = ({
     position: "relative",
     padding: "0px",
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    "*": {
+      boxSizing: "border-box"
+    },
+    "&.iframe-editor": {
+      "& .mini-tool-wrpr-ei": {
+        display: "none"
+      }
+    }
   },
   slateWrapper: {
     paddingTop: "0px",
@@ -33,7 +41,6 @@ const editorStyles = ({
     "& .editor-wrapper": {
       maxWidth: "100%",
       height: "100%",
-      backgroundColor: "#FFF",
       overflow: "visible",
       "& .section-wrapper-fluid": {
         "& .grid-container": {
@@ -109,7 +116,7 @@ const editorStyles = ({
           display: "none"
         }
       },
-      "&:before": {
+      "&.needHover:before": {
         content: '" "',
         position: "absolute",
         width: "calc(100% - 2px)",
@@ -168,6 +175,9 @@ const editorStyles = ({
         }
       }
     },
+    "& .carousel-item": {
+      padding: "12px 32px"
+    },
     "& .slick-arrow": {
       borderRadius: "50%",
       backgroundColor: "#F8FAFF",

package/dist/Editor/Toolbar/Basic/index.js

@@ -59,6 +59,8 @@ const BasicToolbar = props => {
   });
 };
 BasicToolbar.defaultProps = {
-  variableOptions: []
+  otherProps: {
+    variableOptions: []
+  }
 };
 export default BasicToolbar;

package/dist/Editor/Toolbar/FormatTools/TextSize.js

@@ -3,6 +3,9 @@ import { TextField, IconButton } from "@mui/material";
 import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
 import { sizeMap } from "../../utils/font.js";
 import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist.js";
+import { getBreakPointsValue } from "../../helper/theme.js";
+import useWindowResize from "../../hooks/useWindowResize.js";
+import { BREAKPOINTS_DEVICES } from "../../helper/theme.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -11,15 +14,35 @@ const TextSize = ({
   format,
   fullWidth
 }) => {
-  const value = activeMark(editor, format);
-  const onChangeSize = e => {
-    let inc = parseInt(e.target.value) || 8;
-    inc = inc > 200 ? 200 : inc;
+  const [size] = useWindowResize();
+  const val = activeMark(editor, format);
+  const value = getBreakPointsValue(val, size?.device);
+  const updateMarkData = newVal => {
+    let upData = {
+      ...getBreakPointsValue(val),
+      [size?.device]: `${newVal}px`
+    };
+
+    // if desktop update to all other devices
+    // to avoid default normal size
+    if (size?.device === "lg") {
+      upData = BREAKPOINTS_DEVICES.reduce((a, b) => {
+        a[b] = `${newVal}px`;
+        return a;
+      }, {});
+    }
     addMarkData(editor, {
       format,
-      value: `${inc || 8}px`
+      value: {
+        ...upData
+      }
     });
   };
+  const onChangeSize = e => {
+    let inc = parseInt(e.target.value) || 8;
+    inc = inc > 200 ? 200 : inc;
+    updateMarkData(inc || 8);
+  };
   const getSizeVal = () => {
     try {
       const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
@@ -32,17 +55,11 @@ const TextSize = ({
   const onIncreaseSize = () => {
     let inc = (combinedOldVal || 0) + 1;
     inc = inc > 200 ? 200 : inc;
-    addMarkData(editor, {
-      format,
-      value: `${inc}px`
-    });
+    updateMarkData(inc);
   };
   const onDecreaseSize = () => {
     const newVal = combinedOldVal - 1 < 0 ? 0 : combinedOldVal - 1;
-    addMarkData(editor, {
-      format,
-      value: `${newVal}px`
-    });
+    updateMarkData(newVal);
   };
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(TextField, {

package/dist/Editor/Toolbar/Mini/MiniToolbar.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useSlate } from "slate-react";
 import { Box, Dialog, IconButton, Paper, Popper, Tooltip } from "@mui/material";
 import MENU_OPTIONS from "./Options/Options";
@@ -37,6 +37,11 @@ const MiniToolbar = props => {
   const PopupComponent = POPUP_TYPES[popper] || null;
   const open = Boolean(PopupComponent);
   const DialogComp = !fullScreen ? Popper : Dialog;
+  useEffect(() => {
+    if (popper) {
+      setPopper(null);
+    }
+  }, [editor.selection]);
   const handleClick = type => e => {
     setPopper(type);
     setAnchorEl(e.currentTarget);
@@ -51,6 +56,7 @@ const MiniToolbar = props => {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Box, {
       component: "div",
+      className: "mini-tool-wrpr-ei",
       sx: classes.root,
       children: MENU_OPTIONS.map(({
         type,

package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js

@@ -10,6 +10,9 @@ const usePopupStyle = () => ({
       "& .papper-wrpr": {
         boxShadow: "none"
       }
+    },
+    "&.xs": {
+      transform: "none !important"
     }
   },
   textFormatWrapper: {

package/dist/Editor/Toolbar/PopupTool/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Popper, Fade, Paper } from "@mui/material";
+import { Popper, Fade, Paper, Popover } from "@mui/material";
 import { Editor, Range } from "slate";
 import { useSlate, useFocused } from "slate-react";
 import TextFormat from "./TextFormat";
@@ -7,6 +7,7 @@ import usePopupStyle from "./PopupToolStyle";
 import useDrag from "../../hooks/useDrag";
 import PopperHeader from "./PopperHeader";
 import { TableUtil } from "../../utils/table";
+import useWindowResize from "../../hooks/useWindowResize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PopupTool = props => {
@@ -21,6 +22,7 @@ const PopupTool = props => {
   const [event] = useDrag(anchorEl);
   const id = open ? "popup-edit-tool" : "";
   const table = new TableUtil(editor);
+  const [size] = useWindowResize();
   useEffect(() => {
     if (event === "end" && anchorEl && !open) {
       // for table cell selection
@@ -66,7 +68,7 @@ const PopupTool = props => {
     transition: true,
     placement: "auto-end",
     sx: classes.popupWrapper,
-    className: "tools-drawer",
+    className: `tools-drawer ${size?.device}`,
     children: ({
       TransitionProps
     }) => /*#__PURE__*/_jsx(Fade, {

package/dist/Editor/common/Icon.js

@@ -185,6 +185,9 @@ const iconList = {
   moreHorizantal: /*#__PURE__*/_jsx(MoreHorizontal, {}),
   docsUpload: /*#__PURE__*/_jsx(DocsUpload, {}),
   colorbox: /*#__PURE__*/_jsx(BsFillMenuButtonWideFill, {
+    style: {
+      fill: "#64748B"
+    },
     size: 20
   }),
   leftArrow: /*#__PURE__*/_jsx(LeftArrow, {}),

package/dist/Editor/common/Section/index.js

@@ -4,6 +4,7 @@ import { ReactEditor, useSlateStatic } from "slate-react";
 import { Box, IconButton, Tooltip } from "@mui/material";
 import TuneIcon from "@mui/icons-material/Tune";
 import SectionPopup from "../../Elements/Grid/SectionPopup";
+import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Section = props => {
@@ -25,12 +26,6 @@ const Section = props => {
     sectionGridSize,
     sectionAlignment
   } = element;
-  const {
-    left: ssleft,
-    top: sstop,
-    right: ssright,
-    bottom: ssbottom
-  } = sectionBannerSpacing || {};
   const {
     topLeft: ssTopLeft,
     topRight: ssTopRight,
@@ -49,9 +44,9 @@ const Section = props => {
   const Toolbar = () => {
     return !readOnly ? /*#__PURE__*/_jsx(Box, {
       component: "div",
-      className: "element-toolbar ss hr section-tw",
+      className: "element-toolbar no-border-button ss hr section-tw",
       style: {
-        left: "20px",
+        left: "-28px",
         top: "0px"
       },
       children: /*#__PURE__*/_jsx(Tooltip, {
@@ -83,20 +78,19 @@ const Section = props => {
       at: path
     });
   };
+  const needHover = element?.children?.find(f => f.type === "grid") ? "needHover" : "";
   const sectionBgImage = sectionBackgroundImage && sectionBackgroundImage !== "none" ? {
     backgroundImage: `url(${sectionBackgroundImage})`
   } : {};
   return path.length === 1 ? /*#__PURE__*/_jsxs(Box, {
     component: "section",
-    className: `ed-section-wrapper ${readOnly ? "" : "hselect"}`,
-    style: {
-      position: "relative",
+    className: `ed-section-wrapper ${readOnly ? "" : "hselect"} ${needHover}`,
+    sx: {
       background: sectionBgColor,
       ...sectionBgImage,
-      paddingLeft: `${ssleft}px`,
-      paddingRight: `${ssright}px`,
-      paddingTop: `${sstop || 2}px`,
-      paddingBottom: `${ssbottom || 2}px`,
+      padding: {
+        ...getTRBLBreakPoints(sectionBannerSpacing)
+      },
       borderRadius: `${ssTopLeft}px ${ssTopRight}px ${ssBottomLeft}px ${ssBottomRight}px`,
       flexDirection: flexDirection || "column",
       alignItems: horizantal,
@@ -105,7 +99,10 @@ const Section = props => {
     children: [/*#__PURE__*/_jsxs(Box, {
       className: "ed-section-inner",
       sx: {
-        width: `${(sectionGridSize || 8) / 12 * 100}%`
+        position: "relative",
+        width: {
+          ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
+        }
       },
       children: [children, /*#__PURE__*/_jsx(Toolbar, {})]
     }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {