@flozy/editor 1.6.9 → 1.7.1

package/dist/Editor/CommonEditor.js

@@ -26,6 +26,7 @@ import { EditorProvider } from "./hooks/useMouseMove";
 import TopBanner from "./Elements/TopBanner/TopBanner";
 import editorStyles from "./Styles/EditorStyles";
 import "animate.css";
+import Section from "./Elements/Section";
 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"];

package/dist/Editor/Editor.css

@@ -122,8 +122,6 @@ blockquote {
 .grid-container-toolbar {
   right: -32px;
   top: 0;
-  bottom: 0;
-  margin: auto;
   height: fit-content;
 }
 

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

@@ -157,6 +157,7 @@ const Image = ({
       onDelete: onDelete
     }) : null, /*#__PURE__*/_jsxs("div", {
       contentEditable: false,
+      className: "embed-image-wrpr",
       style: {
         position: "relative",
         width: `${width}`,

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

@@ -8,6 +8,7 @@ import { IconButton, Tooltip } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import EmbedPopup from "./EmbedPopup";
 import { GridSettingsIcon } from "../../common/iconslist";
+import { gradientBorder } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Video = ({
@@ -20,7 +21,11 @@ const Video = ({
     url,
     alt,
     alignment,
-    bannerSpacing
+    bannerSpacing,
+    borderRadius,
+    borderWidth,
+    borderColor,
+    borderStyle
   } = element;
   const editor = useSlateStatic();
   const selected = useSelected();
@@ -52,6 +57,12 @@ const Video = ({
   });
   const arr = Array.from(Node.elements(editor));
   const ele = arr.find(([elem]) => element === elem);
+  const {
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight
+  } = borderRadius || {};
   useEffect(() => {
     if (editor && ele[1] !== undefined) {
       const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
@@ -107,7 +118,7 @@ const Video = ({
   const width = resizing ? `${size.width}px` : `${size.widthInPercent || 100}%`;
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
-    className: "embed has-hover",
+    className: "embed has-hover video",
     style: {
       display: "flex",
       width: `calc(100% - ${totalMinus}px)`,
@@ -152,7 +163,11 @@ const Video = ({
           position: "absolute",
           width: "100%",
           height: "100%",
-          left: "0px"
+          left: "0px",
+          ...(gradientBorder(borderColor) || {}),
+          borderWidth: borderWidth || "1px",
+          borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+          borderStyle: borderStyle || "solid"
         },
         src: url,
         title: alt

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

@@ -155,6 +155,11 @@ const FormWorkflow = props => {
           "& textarea": {
             fontSize: '16px',
             fontWeight: 500
+          },
+          "& textarea:focus-visible": {
+            outline: "none",
+            borderRadius: "none",
+            border: "none"
           }
         }
       })]

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

@@ -3,8 +3,8 @@ import { IconButton, Menu, MenuItem, Tooltip } from "@mui/material";
 import { MoreHorizontal } from "../../../common/iconslist";
 import Icon from "../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function MoreOptions(props) {
   const {
     classes,
@@ -27,15 +27,12 @@ function MoreOptions(props) {
     children: [/*#__PURE__*/_jsx(Tooltip, {
       arrow: true,
       title: "More Options",
-      children: /*#__PURE__*/_jsxs(IconButton, {
+      children: /*#__PURE__*/_jsx(IconButton, {
         sx: classes.moreOption,
         onClick: handleClick,
-        children: [/*#__PURE__*/_jsx(Icon, {
+        children: /*#__PURE__*/_jsx(Icon, {
           icon: "moreHorizantal"
-        }), /*#__PURE__*/_jsx(MoreHorizontal, {
-          width: "24px",
-          height: "24px"
-        })]
+        })
       })
     }), /*#__PURE__*/_jsx(Menu, {
       id: "basic-menu",

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

@@ -1,147 +1,154 @@
 const FormStyles = () => ({
   addButton: {
-    display: 'flex',
-    justifyContent: 'flex-end'
+    display: "flex",
+    justifyContent: "flex-end"
   },
   infoText: {
-    fontSize: '12px',
-    fontWeight: '400',
-    color: '#94A3B8'
+    fontSize: "12px",
+    fontWeight: "400",
+    color: "#94A3B8"
   },
   bodyTextArea: {
-    '& textarea': {
-      border: 'none',
-      width: '96%',
-      maxWidth: '96%',
-      outline: 'none'
+    "& textarea": {
+      border: "none",
+      width: "100%",
+      maxWidth: "100%",
+      outline: "none"
     },
-    '& textarea: focus-visible': {
-      outline: 'none',
-      border: 'none'
+    "& textarea:focus-visible": {
+      outline: "none",
+      border: "none"
     }
   },
   formHeadings: {
-    fontSize: '14px',
+    fontSize: "14px",
     fontWeight: 500,
-    paddingBottom: '10px',
-    paddingTop: '10px'
+    paddingBottom: "10px",
+    paddingTop: "10px"
   },
   flowListCard: {
-    border: '1px solid #6F6F6F33',
-    borderRadius: '8px',
-    padding: '10px'
+    border: "1px solid #6F6F6F33",
+    borderRadius: "8px",
+    padding: "10px"
   },
   listHeading: {
-    fontSize: '14px',
+    fontSize: "14px",
     fontWeight: 700
   },
   listSubHeading: {
-    fontSize: '12px',
+    fontSize: "12px",
     fontWeight: 500,
-    color: '#64748B',
-    maxWidth: '380px',
-    textTransform: 'capitalize',
+    color: "#64748B",
+    maxWidth: "380px",
+    textTransform: "capitalize",
     whiteSpace: "nowrap",
-    overflow: 'hidden',
-    textOverflow: 'ellipsis'
+    overflow: "hidden",
+    textOverflow: "ellipsis"
   },
   addBtnTypo: {
-    color: '#94A3B8',
+    color: "#94A3B8",
     fontWeight: 500,
-    fontSize: '12px'
+    fontSize: "12px"
   },
   emptyList: {
-    justifyContent: 'center',
-    display: 'flex',
-    border: '1px solid #6F6F6F33',
-    borderRadius: '8px',
-    padding: '10px',
-    color: '#94A3B8'
+    justifyContent: "center",
+    display: "flex",
+    border: "1px solid #6F6F6F33",
+    borderRadius: "8px",
+    padding: "10px",
+    color: "#94A3B8"
   },
   popupTitle: {
     fontWeight: 600,
-    fontSize: '16px',
-    display: 'flex',
-    alignItems: 'center'
+    fontSize: "16px",
+    display: "flex",
+    alignItems: "center"
   },
   subHeadings: {
     fontWeight: 500,
-    fontSize: '14px'
+    fontSize: "14px"
   },
   radioBtn: {
-    '& .MuiFormControlLabel-label': {
-      fontSize: '14px',
-      color: '#64748B'
+    "& .MuiFormControlLabel-label": {
+      fontSize: "14px",
+      color: "#64748B"
     }
   },
   dialogTitle: {
-    '& MuiDialogTitle-root': {
-      padding: '16px 12px'
+    "& MuiDialogTitle-root": {
+      padding: "16px 12px"
     }
   },
   closeBtn: {
-    background: '#F4F6F9',
-    color: '#64748B',
-    fontSize: '14px',
+    background: "#F4F6F9",
+    color: "#64748B",
+    fontSize: "14px",
     fontWeight: 500,
-    padding: '4px 22px',
-    textTransform: 'none',
-    border: '1px solid #D8DDE1',
-    '&:hover': {
-      border: '1px solid #64748B'
+    padding: "4px 22px",
+    textTransform: "none",
+    border: "1px solid #D8DDE1",
+    "&:hover": {
+      border: "1px solid #64748B"
     }
   },
   variableBtn: {
-    background: '#F4F6F9',
-    color: '#64748B',
-    fontSize: '14px',
+    background: "#F4F6F9",
+    color: "#64748B",
+    fontSize: "14px",
     fontWeight: 500,
-    padding: '4px 22px',
-    textTransform: 'none',
-    border: '1px solid #D8DDE1',
-    '& svg': {
-      '& path': {
-        stroke: '#64748B'
+    padding: "4px 22px",
+    textTransform: "none",
+    border: "1px solid #D8DDE1",
+    "& svg": {
+      "& path": {
+        stroke: "#64748B"
       }
     },
-    '&:hover': {
-      border: '1px solid #64748B'
+    "&:hover": {
+      border: "1px solid #64748B"
     }
   },
   saveBtn: {
-    background: '#2563EB',
-    fontSize: '14px',
+    background: "#2563EB",
+    fontSize: "14px",
     fontWeight: 500,
-    padding: '4px 24px',
-    textTransform: 'none'
+    padding: "4px 24px",
+    textTransform: "none",
+    "& .MuiButton-containedSizeSmall": {
+      borderRadius: "5px"
+    },
+    "& .MuiButton-containedPrimary": {
+      background: "#2563EB",
+      borderRadius: "5px"
+    }
   },
   select: {
-    minWidth: '110px',
-    '& .MuiOutlinedInput-notchedOutline': {
-      borderRadius: '8px',
-      border: '1px solid #6F6F6F33',
-      boxShadow: '0px 4px 16px 0px #0000000D'
+    minWidth: "110px",
+    "& .MuiOutlinedInput-notchedOutline": {
+      borderRadius: "8px",
+      border: "1px solid #6F6F6F33",
+      boxShadow: "0px 4px 16px 0px #0000000D"
     },
-    '&:hover .MuiOutlinedInput-notchedOutline': {
-      borderRadius: '8px',
-      border: '1px solid #6F6F6F33',
-      boxShadow: '0px 4px 16px 0px #0000000D'
+    "&:hover .MuiOutlinedInput-notchedOutline": {
+      borderRadius: "8px",
+      border: "1px solid #6F6F6F33",
+      boxShadow: "0px 4px 16px 0px #0000000D"
     },
-    '& .MuiSelect-select': {
-      color: '#94A3B8',
-      fontSize: '14px'
+    "& .MuiSelect-select": {
+      color: "#94A3B8",
+      fontSize: "14px"
     }
   },
   selectList: {
-    color: '#94A3B8',
-    fontSize: '14px'
+    color: "#94A3B8",
+    fontSize: "14px"
   },
   toolbarContainer: {
-    border: '1px solid #6F6F6F33',
-    borderRadius: '10px'
+    border: "1px solid #6F6F6F33",
+    borderRadius: "10px"
   },
   toolBar: {
-    padding: '5px'
+    padding: "5px"
   },
   colorButtons: {
     "& .buttonsWrpr": {
@@ -191,17 +198,17 @@ const FormStyles = () => ({
     }
   },
   moreOption: {
-    background: '#F4F4F4',
-    borderRadius: '8px'
+    background: "#F4F4F4",
+    borderRadius: "8px"
   },
   dialogFooter: {
-    '&.MuiDialogActions-root': {
-      padding: '8px 24px'
+    "&.MuiDialogActions-root": {
+      padding: "8px 24px"
     }
   },
   toolButtons: {
-    width: '36px',
-    height: '36px'
+    width: "36px",
+    height: "36px"
   }
 });
 export default FormStyles;

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

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import FormStyles from "./Styles";
 import Icon from "../../../common/Icon";
 import { PlusIcon, RestRight } from "../../../common/iconslist";
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { AllColors } from "../../Color Picker/ColorButtons";
 import PopupToolStyle from "../../../Toolbar/PopupTool/PopupToolStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -20,7 +20,7 @@ const UserInputs = props => {
   const variables = element?.children;
   const classes = FormStyles();
   const popupClasses = PopupToolStyle();
-  const [activeColor, setActiveColor] = useState(['#000000']);
+  const [activeColor, setActiveColor] = useState(["#000000"]);
   //state
   const [anchorEl, setAnchorEl] = useState(null);
   const [colorAnchorEl, setColorAnchorEl] = useState(null);
@@ -115,7 +115,7 @@ const UserInputs = props => {
                 title: "Current Color",
                 children: /*#__PURE__*/_jsx(IconButton, {
                   style: {
-                    borderRadius: '50px',
+                    borderRadius: "50px",
                     background: activeColor
                   }
                 })
@@ -140,6 +140,7 @@ const UserInputs = props => {
           item: true,
           children: /*#__PURE__*/_jsxs(Grid, {
             container: true,
+            alignItems: "center",
             children: [/*#__PURE__*/_jsx(Grid, {
               item: true,
               children: /*#__PURE__*/_jsx(Tooltip, {
@@ -166,12 +167,12 @@ const UserInputs = props => {
                 anchorEl: anchorEl,
                 onClose: handleClose,
                 anchorOrigin: {
-                  vertical: 'bottom',
-                  horizontal: 'right'
+                  vertical: "bottom",
+                  horizontal: "right"
                 },
                 transformOrigin: {
-                  vertical: 'top',
-                  horizontal: 'right'
+                  vertical: "top",
+                  horizontal: "right"
                 },
                 children: variables?.map((m, i) => /*#__PURE__*/_jsx(MenuItem, {
                   sx: {
@@ -188,18 +189,12 @@ const UserInputs = props => {
     }), /*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
+      sx: classes.bodyTextArea,
       children: type === 2 && /*#__PURE__*/_jsx(TextareaAutosize, {
         margin: "none",
         minRows: 6,
         value: subject,
-        onChange: handleField,
-        className: classes.bodyTextArea,
-        style: {
-          border: 'none',
-          width: "96%",
-          padding: '10px',
-          outline: "none"
-        }
+        onChange: handleField
       })
     })]
   });

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

@@ -127,7 +127,8 @@ const Workflow = props => {
         variant: "outlined",
         sx: {
           textTransform: 'none',
-          background: '#EBF1F9'
+          background: '#EBF1F9',
+          padding: '7px 15px'
         },
         onClick: handleAddFormWorkflow,
         size: "small",

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

@@ -2,18 +2,24 @@
 import React, { useState, useEffect } from "react";
 import { Transforms, Path, Node } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
-import { gridItem } from "../../utils/gridItem";
-import GridPopup from "./GridPopup";
 import { IconButton, Tooltip, Grid as GridContainer } from "@mui/material";
-import { insertGrid } from "../../utils/grid";
-import { GridAddGridIcon, GridAddSectionIcon, GridSettingsIcon } from "../../common/iconslist";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
+import TuneIcon from "@mui/icons-material/Tune";
+import { insertGrid } from "../../utils/grid";
+import { GridAddGridIcon, GridAddSectionIcon, GridSettingsIcon } from "../../common/iconslist";
+import GridPopup from "./GridPopup";
+import SectionPopup from "./SectionPopup";
+import { gridItem } from "../../utils/gridItem";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const GridSettingsPoupComp = {
+  section: SectionPopup,
+  grid: GridPopup
+};
 const Grid = props => {
   const {
     attributes,
@@ -36,7 +42,12 @@ const Grid = props => {
     borderWidth,
     borderColor,
     borderStyle,
-    borderRadius
+    borderRadius,
+    sectionBgColor,
+    sectionBackgroundImage,
+    sectionBannerSpacing,
+    sectionBorderRadius,
+    gridSize
   } = element;
   const {
     left,
@@ -44,6 +55,12 @@ const Grid = props => {
     right,
     bottom
   } = bannerSpacing || {};
+  const {
+    left: ssleft,
+    top: sstop,
+    right: ssright,
+    bottom: ssbottom
+  } = sectionBannerSpacing || {};
   const {
     vertical,
     horizantal,
@@ -55,10 +72,14 @@ const Grid = props => {
     bottomLeft,
     bottomRight
   } = borderRadius || {};
+  const {
+    topLeft: ssTopLeft,
+    topRight: ssTopRight,
+    bottomLeft: ssBottomLeft,
+    bottomRight: ssBottomRight
+  } = sectionBorderRadius || {};
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
-  const arr = Array.from(Node.elements(editor));
-  const ele = arr.find(([elem]) => element === elem);
   const {
     hoverPath
   } = useEditorContext();
@@ -87,8 +108,11 @@ const Grid = props => {
       });
     }
   };
+  const onSectionSettings = () => {
+    setOpenSettings("section");
+  };
   const onSettings = () => {
-    setOpenSettings(true);
+    setOpenSettings("grid");
   };
   const onSave = data => {
     const updateData = {
@@ -173,6 +197,7 @@ const Grid = props => {
       console.log(err);
     }
   };
+  const PoupComp = GridSettingsPoupComp[openSetttings];
   const NewLineButtons = () => {
     return !readOnly && selected && path.length === 2 ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("div", {
@@ -203,6 +228,13 @@ const Grid = props => {
       className: "grid-container-toolbar",
       contentEditable: false,
       children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: "Section Settings",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onSectionSettings,
+          children: /*#__PURE__*/_jsx(TuneIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
         title: "Grid Settings",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
@@ -248,34 +280,44 @@ const Grid = props => {
   const bgImage = backgroundImage && backgroundImage !== "none" ? {
     backgroundImage: `url(${backgroundImage})`
   } : {};
+  const sectionBgImage = sectionBackgroundImage && sectionBackgroundImage !== "none" ? {
+    backgroundImage: `url(${sectionBackgroundImage})`
+  } : {};
   return /*#__PURE__*/_jsx("section", {
     className: "section-wrapper-fluid",
     style: {
       display: "flex",
       width: "100%",
-      background: bgColor,
-      ...bgImage,
+      background: sectionBgColor,
+      ...sectionBgImage,
       backgroundSize: "cover",
       justifyContent: "center",
-      alignItems: "center"
+      alignItems: "center",
+      paddingLeft: `${ssleft}px`,
+      paddingRight: `${ssright}px`,
+      paddingTop: `${sstop}px`,
+      paddingBottom: `${ssbottom}px`,
+      borderRadius: `${ssTopLeft}px ${ssTopRight}px ${ssBottomLeft}px ${ssBottomRight}px`
     },
+    "data-path": path.join(","),
     children: /*#__PURE__*/_jsxs(GridContainer, {
       container: true,
       className: `grid-container ${grid} has-hover element-root`,
       ...attributes,
       ...sectionId,
       style: {
-        // background: bgColor,
+        background: bgColor,
         alignContent: vertical,
-        // ...bgImage,
+        ...bgImage,
         borderColor: borderColor || "transparent",
         borderWidth: borderWidth || "1px",
         borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
-        borderStyle: borderStyle || "solid",
-        maxWidth: "1440px",
-        width: "80%"
+        borderStyle: borderStyle || "solid"
       },
       "data-path": path.join(","),
+      sx: {
+        width: `${(gridSize || 8) / 12 * 100}%`
+      },
       children: [fgColor && /*#__PURE__*/_jsx("div", {
         style: {
           position: "absolute",
@@ -302,7 +344,7 @@ const Grid = props => {
           className: "element-selector-dots br",
           children: " "
         }), /*#__PURE__*/_jsx(GridToolBar, {})]
-      }), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
+      }), openSetttings ? /*#__PURE__*/_jsx(PoupComp, {
         element: element,
         onSave: onSave,
         onClose: onClose,

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

@@ -0,0 +1,24 @@
+import React from "react";
+import StyleBuilder from "../../common/StyleBuilder";
+import sectionStyle from "../../common/StyleBuilder/sectionStyle";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SectionPopup = props => {
+  const {
+    element,
+    onSave,
+    onClose,
+    onDelete,
+    customProps
+  } = props;
+  return /*#__PURE__*/_jsx(StyleBuilder, {
+    title: "Section",
+    type: "sectionStyle",
+    element: element,
+    onSave: onSave,
+    onClose: onClose,
+    renderTabs: sectionStyle,
+    customProps: customProps,
+    onDelete: onDelete
+  });
+};
+export default SectionPopup;

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

@@ -1,11 +1,11 @@
-const default_grid = {
+const default_grid = [{
   type: "grid",
   grid: "container",
   children: [{
     type: "grid-item",
     grid: 12,
     children: [{
-      type: "alignCenter",
+      type: "alignLeft",
       children: [{
         type: "paragraph",
         children: [{
@@ -13,6 +13,59 @@ const default_grid = {
           fontSize: "huge",
           fontFamily: "PoppinsBold"
         }]
+      }, {
+        type: "paragraph",
+        children: [{
+          fontSize: "16px",
+          fontFamily: "PoppinsRegular",
+          text: ""
+        }]
+      }, {
+        type: "paragraph",
+        children: [{
+          fontSize: "16px",
+          fontFamily: "PoppinsRegular",
+          text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
+        }]
+      }, {
+        type: "paragraph",
+        children: [{
+          fontSize: "16px",
+          fontFamily: "PoppinsRegular",
+          text: ""
+        }]
+      }, {
+        type: "paragraph",
+        children: [{
+          type: "image",
+          url: "https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png",
+          images: [],
+          children: [{
+            text: " "
+          }],
+          size: {
+            width: 362.59375,
+            height: 207,
+            widthInPercent: 56.780034254954735
+          },
+          alignment: {
+            horizantal: "center"
+          }
+        }]
+      }, {
+        type: "paragraph",
+        children: [{
+          fontSize: "16px",
+          fontFamily: "PoppinsRegular",
+          text: ""
+        }]
+      }, {
+        type: "paragraph",
+        children: [{
+          fontSize: "16px",
+          fontFamily: "PoppinsRegular",
+          text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
+        }]
       }]
     }],
     bgColor: "rgba(255, 255, 255, 0)",
@@ -30,12 +83,35 @@ const default_grid = {
     type: "grid-item",
     grid: 12,
     children: [{
-      type: "alignCenter",
+      type: "alignLeft",
       children: [{
         type: "paragraph",
         children: [{
           text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
         }]
+      }, {
+        type: "paragraph",
+        children: [{
+          text: ""
+        }]
+      }, {
+        type: "paragraph",
+        children: [{
+          type: "image",
+          url: "https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png",
+          images: [],
+          children: [{
+            text: " "
+          }],
+          size: {
+            width: 570.1953125,
+            height: 450,
+            widthInPercent: 89.06583684178412
+          },
+          alignment: {
+            horizantal: "center"
+          }
+        }]
       }]
     }],
     bgColor: "rgba(255, 255, 255, 0)",
@@ -46,92 +122,9 @@ const default_grid = {
       right: "16",
       bottom: "16"
     }
-  }, {
-    type: "grid-item",
-    grid: 12,
-    children: [{
-      type: "paragraph",
-      children: [{
-        text: ""
-      }]
-    }, {
-      type: "paragraph",
-      children: [{
-        text: ""
-      }]
-    }, {
-      type: "button",
-      children: [{
-        text: "     "
-      }],
-      buttonLink: {
-        linkType: "webAddress"
-      },
-      label: "Gettings Started",
-      bgColor: "rgba(192,192,192, 1)",
-      textColor: "rgba(0,0,0,1)",
-      lockSpacing: true,
-      bannerSpacing: {
-        top: "16",
-        left: "16",
-        right: "16",
-        bottom: "16"
-      },
-      lockRadius: true,
-      borderRadius: {
-        topLeft: "12",
-        topRight: "12",
-        bottomLeft: "12",
-        bottomRight: "12"
-      },
-      bgColorHover: "rgba(0, 0, 0, 1)",
-      textColorHover: "rgba(255, 255, 255, 1)",
-      borderColor: "rgba(175, 51, 242, 0)"
-    }, {
-      type: "button",
-      children: [{
-        text: ""
-      }],
-      buttonLink: {
-        linkType: "webAddress"
-      },
-      label: "Learn More",
-      bgColor: "rgba(192,192,192, 1)",
-      textColor: "rgba(0,0,0,1)",
-      lockSpacing: false,
-      bannerSpacing: {
-        top: "16",
-        left: "32",
-        right: "32",
-        bottom: "16"
-      },
-      lockRadius: true,
-      borderRadius: {
-        topLeft: "12",
-        topRight: "12",
-        bottomLeft: "12",
-        bottomRight: "12"
-      },
-      borderColor: "rgba(175, 51, 242, 0)",
-      bgColorHover: "rgba(0,0,0,1)",
-      textColorHover: "rgba(255,255,255, 1)"
-    }],
-    bgColor: "rgba(255, 255, 255, 0)",
-    alignment: {
-      flexDirection: "row",
-      vertical: "center",
-      horizantal: "center"
-    },
-    lockSpacing: true,
-    bannerSpacing: {
-      top: "16",
-      left: "16",
-      right: "16",
-      bottom: "16"
-    }
   }],
   alignment: {
-    flexDirection: "column"
+    flexDirection: "row"
   },
   lockSpacing: true,
   bannerSpacing: {
@@ -140,5 +133,5 @@ const default_grid = {
     right: "16",
     bottom: "16"
   }
-};
+}];
 export default JSON.stringify(default_grid);

package/dist/Editor/Elements/Section.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { Box } from "@mui/material";
+import { ReactEditor, useSlateStatic } from "slate-react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SectionStyle = () => ({
+  root: {
+    position: "relative",
+    padding: "0px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    "&.root-1": {
+      "& .section-inner-ed.root-1": {
+        width: "80%",
+        maxWidth: "1440px"
+      }
+    }
+  }
+});
+const Section = props => {
+  const {
+    element
+  } = props;
+  const editor = useSlateStatic();
+  const path = ReactEditor.findPath(editor, element);
+  console.log(path);
+  const classes = SectionStyle();
+  const {
+    children
+  } = props;
+  return /*#__PURE__*/_jsx(Box, {
+    component: "div",
+    className: `root-${path.length}`,
+    sx: classes.root,
+    children: /*#__PURE__*/_jsx("div", {
+      className: `section-inner-ed root-${path.length}`,
+      children: children
+    })
+  });
+};
+export default Section;

package/dist/Editor/Styles/EditorStyles.js

@@ -33,7 +33,12 @@ const editorStyles = ({
       maxWidth: "100%",
       height: "100%",
       backgroundColor: "#FFF",
-      overflow: "visible"
+      overflow: "visible",
+      "& .section-wrapper-fluid": {
+        "& .grid-container": {
+          maxWidth: "1440px"
+        }
+      }
     },
     "& .el-toolbar": {
       position: "absolute",

package/dist/Editor/common/StyleBuilder/embedVideoStyle.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 const embedVideoStyle = [{
   tab: "URL",
   value: "url",
@@ -14,5 +15,44 @@ const embedVideoStyle = [{
     key: "alignment",
     type: "alignment"
   }]
+}, {
+  tab: "Border",
+  value: "border",
+  fields: [{
+    label: "Border Color",
+    key: "borderColor",
+    type: "color"
+  }, {
+    label: "Border",
+    key: "borderRadius",
+    type: "borderRadius"
+  }, {
+    label: "Border Width",
+    key: "borderWidth",
+    type: "text",
+    placeholder: "1px"
+  }, {
+    label: "Border Style",
+    key: "borderStyle",
+    type: "textOptions",
+    options: [{
+      text: "Solid",
+      value: "solid"
+    }, {
+      text: "Dotted",
+      value: "dotted"
+    }, {
+      text: "Dashed",
+      value: "dashed"
+    }],
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontFamily: option.value
+        },
+        children: option.text
+      });
+    }
+  }]
 }];
 export default embedVideoStyle;

package/dist/Editor/common/StyleBuilder/gridStyle.js

@@ -8,6 +8,14 @@ const gridStyle = [{
     type: "text",
     placeholder: "Id should be unique for the page..."
   }]
+}, {
+  tab: "Size",
+  value: "gridSize",
+  fields: [{
+    label: "Grid Size",
+    key: "gridSize",
+    type: "gridSize"
+  }]
 }, {
   tab: "Colors",
   value: "colors",

package/dist/Editor/common/StyleBuilder/sectionStyle.js

@@ -0,0 +1,38 @@
+const gridStyle = [{
+  tab: "Colors",
+  value: "sectionColors",
+  fields: [{
+    label: "Background Color",
+    key: "sectionBgColor",
+    type: "color"
+  }]
+}, {
+  tab: "Background",
+  value: "sectionBackgroundImage",
+  fields: [{
+    label: "Background Image URL",
+    key: "sectionBackgroundImage",
+    type: "text"
+  }, {
+    label: "Background Image",
+    key: "sectionBackgroundImage",
+    type: "backgroundImage"
+  }]
+}, {
+  tab: "Padding",
+  value: "sectionBannerSpacing",
+  fields: [{
+    label: "Padding",
+    key: "sectionBannerSpacing",
+    type: "bannerSpacing"
+  }]
+}, {
+  tab: "Border",
+  value: "sectionBorderRadius",
+  fields: [{
+    label: "Border",
+    key: "sectionBorderRadius",
+    type: "borderRadius"
+  }]
+}];
+export default gridStyle;

package/dist/Editor/plugins/withTable.js

@@ -1,4 +1,4 @@
-import { Editor, Range, Point, Element, Transforms } from "slate";
+import { Editor, Range, Point, Element, Transforms, Node } from "slate";
 const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item"];
 const withTable = editor => {
   const {
@@ -38,6 +38,25 @@ const withTable = editor => {
         return;
       }
     }
+    if (selection) {
+      try {
+        const [selectedNode] = Editor.nodes(editor, {
+          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "paragraph"
+        });
+        if (selectedNode && selectedNode[1]) {
+          const [nodeEle, nodePath] = selectedNode;
+          const dataText = Node.string(nodeEle);
+          // remove first node if no text and has other nodes in index 1 or more
+          if (editor.children.length > 1 && nodePath[0] === 0 && nodePath.length === 1 && dataText?.length === 0) {
+            Transforms.removeNodes(editor, {
+              at: nodePath
+            });
+          }
+        }
+      } catch (err) {
+        console.log(err);
+      }
+    }
     deleteBackward(unit);
   };
   editor.deleteForward = unit => {

package/dist/Editor/utils/grid.js

@@ -28,7 +28,8 @@ export const insertPlainGrid = count => {
       left: "16",
       right: "16",
       bottom: "16"
-    }
+    },
+    gridSize: 8
   };
 };
 export const insertGrid = (editor, item, path) => {

package/dist/Editor/utils/helper.js

@@ -29,4 +29,15 @@ export const convertBase64 = file => {
       resolve("");
     }
   });
+};
+export const gradientBorder = color => {
+  if (color?.indexOf("linear") > -1) {
+    return {
+      borderImage: `${color} 30`
+    };
+  } else {
+    return {
+      borderColor: color || "transparent"
+    };
+  }
 };

package/package.json

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