@flozy/editor 1.3.4 → 1.3.5

package/dist/Editor/Elements/Accordion/Accordion.js

@@ -5,7 +5,8 @@ import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import SettingsIcon from "@mui/icons-material/Settings";
 import AccordionBtnPopup from "./AccordionBtnPopup";
-import { IconButton } from "@mui/material";
+import { IconButton, Tooltip } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Accordion = props => {
@@ -15,6 +16,9 @@ const Accordion = props => {
     element,
     customProps
   } = props;
+  const {
+    readOnly
+  } = customProps;
   const [toggle, setToggle] = useState(false);
   const [openSetttings, setOpenSettings] = useState(false);
   const editor = useSlateStatic();
@@ -29,24 +33,42 @@ const Accordion = props => {
     setToggle(!toggle);
   };
   const ToolBar = () => {
-    return selected ? /*#__PURE__*/_jsx("div", {
-      className: "grid-container-toolbar",
+    return selected ? /*#__PURE__*/_jsxs("div", {
+      className: "element-toolbar hr",
       contentEditable: false,
       style: {
+        top: "-42px",
         left: "0px",
         display: "flex",
         width: "fit-content"
       },
-      children: /*#__PURE__*/_jsx(IconButton, {
-        size: "small",
-        onClick: onSettings,
-        children: /*#__PURE__*/_jsx(SettingsIcon, {})
-      })
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: "Settings",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          size: "small",
+          onClick: onSettings,
+          children: /*#__PURE__*/_jsx(SettingsIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Delete",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          size: "small",
+          onClick: onDelete,
+          children: /*#__PURE__*/_jsx(DeleteIcon, {})
+        })
+      })]
     }) : null;
   };
   const onSettings = () => {
     setOpenSettings(true);
   };
+  const onDelete = () => {
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+  };
   const onSave = data => {
     const updateData = {
       ...data
@@ -89,7 +111,7 @@ const Accordion = props => {
         display: toggle ? "block" : "none"
       },
       children: children[1]
-    }), /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionBtnPopup, {
+    }), !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionBtnPopup, {
       element: element,
       onSave: onSave,
       onClose: onClose,

package/dist/Editor/Elements/Accordion/AccordionSummary.js

@@ -2,6 +2,8 @@ import React, { useState } from "react";
 import { Transforms } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import AccordionTitlePopup from "./AccordionTitlePopup";
+import { IconButton, Tooltip } from "@mui/material";
+import SettingsIcon from "@mui/icons-material/Settings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const AccordionSummary = props => {
@@ -11,6 +13,9 @@ const AccordionSummary = props => {
     element,
     customProps
   } = props;
+  const {
+    readOnly
+  } = customProps;
   const [openSetttings, setOpenSettings] = useState(false);
   const editor = useSlateStatic();
   const selected = useSelected();
@@ -22,11 +27,18 @@ const AccordionSummary = props => {
   } = element;
   const ToolBar = () => {
     return selected ? /*#__PURE__*/_jsx("div", {
-      className: "grid-container-toolbar",
+      className: "element-toolbar hr",
       contentEditable: false,
-      children: /*#__PURE__*/_jsx("button", {
-        onClick: onSettings,
-        children: "Settings"
+      style: {
+        top: "-42px"
+      },
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        title: "Settings",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onSettings,
+          children: /*#__PURE__*/_jsx(SettingsIcon, {})
+        })
       })
     }) : null;
   };
@@ -58,7 +70,7 @@ const AccordionSummary = props => {
       border: `1px solid ${borderColor}`,
       color: textColor
     },
-    children: [children, /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionTitlePopup, {
+    children: [children, !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionTitlePopup, {
       element: element,
       onSave: onSave,
       onClose: onClose,

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

@@ -129,7 +129,8 @@ function AppHeader(props) {
       component: "nav",
       style: {
         position: "relative",
-        background: bgColor
+        background: bgColor,
+        boxShadow: "none"
       },
       children: /*#__PURE__*/_jsxs(Toolbar, {
         children: [/*#__PURE__*/_jsx(IconButton, {

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

@@ -28,7 +28,9 @@ const EditorButton = props => {
     textColor,
     url,
     borderColor,
-    buttonLink
+    buttonLink,
+    textSize,
+    textAlign
   } = element;
   const {
     linkType,
@@ -117,6 +119,9 @@ const EditorButton = props => {
     ...attributes,
     children: [/*#__PURE__*/_jsx("div", {
       className: "editor-btn-wrapper-inner",
+      style: {
+        textAlign: textAlign || "left"
+      },
       children: /*#__PURE__*/_jsx("button", {
         contentEditable: false,
         className: "editor-btn",
@@ -130,7 +135,8 @@ const EditorButton = props => {
           paddingRight: `${right || 8}px`,
           paddingTop: `${top || 8}px`,
           paddingBottom: `${bottom || 8}px`,
-          color: `${textColor || "#FFFFFF"}`
+          color: `${textColor || "#FFFFFF"}`,
+          fontSize: textSize || "inherit"
         },
         onClick: onClick,
         children: label || "My Button"

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

@@ -6,8 +6,13 @@ import "./slick-theme.min.css";
 import "./slick.min.css";
 import { PrevArrow, NextArrow } from "./Arrows";
 import { carouselItem } from "../../utils/carouselItem";
+import { IconButton, Tooltip } from "@mui/material";
+import EditIcon from "@mui/icons-material/Edit";
+import AddIcon from "@mui/icons-material/Add";
+import DeleteIcon from "@mui/icons-material/Delete";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 const Empty = ({
   children
 }) => {
@@ -29,7 +34,6 @@ const Carousel = props => {
   const editor = useSlateStatic();
   const selected = useSelected();
   const [edit, setEdit] = useState(false);
-  const [reload, setReload] = useState(new Date().getTime());
   const settings = {
     dots: true,
     infinite: true,
@@ -56,9 +60,6 @@ const Carousel = props => {
   };
   const onEdit = () => {
     setEdit(!edit);
-    if (edit) {
-      setReload(new Date().getTime());
-    }
   };
   const onDelete = () => {
     const path = ReactEditor.findPath(editor, element);
@@ -68,17 +69,32 @@ const Carousel = props => {
   };
   const ToolBar = () => {
     return selected ? /*#__PURE__*/_jsxs("div", {
-      className: "grid-container-toolbar",
+      className: "element-toolbar hr",
       contentEditable: false,
-      children: [/*#__PURE__*/_jsx("button", {
-        onClick: onEdit,
-        children: edit ? "Save" : "Edit"
-      }), /*#__PURE__*/_jsx("button", {
-        onClick: onAddSlide,
-        children: "Add Slide"
-      }), /*#__PURE__*/_jsx("button", {
-        onClick: onDelete,
-        children: "Delete"
+      style: {
+        top: "-42px"
+      },
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: edit ? "Save" : "Edit",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onEdit,
+          children: /*#__PURE__*/_jsx(EditIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Add Slide",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onAddSlide,
+          children: /*#__PURE__*/_jsx(AddIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Delete",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onDelete,
+          children: /*#__PURE__*/_jsx(DeleteIcon, {})
+        })
       })]
     }) : null;
   };
@@ -87,15 +103,19 @@ const Carousel = props => {
     className: "sliderBg",
     style: {
       padding: "32px",
-      backgroundColor: "#CCC",
+      backgroundColor: "transparent",
       position: "relative"
     },
     children: [edit ? /*#__PURE__*/_jsx(Empty, {
       children: children
-    }) : /*#__PURE__*/_jsx(Slider, {
+    }) : /*#__PURE__*/_createElement(Slider, {
       ...settings,
-      children: children
-    }, reload), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
+      key: children.length
+    }, children.map((m, i) => {
+      return /*#__PURE__*/_jsx("div", {
+        children: m
+      }, i);
+    })), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
   });
 };
 export default Carousel;

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

@@ -7,7 +7,6 @@ import useResize from "../../utils/customHooks/useResize";
 import { IconButton, Tooltip } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import SettingsIcon from "@mui/icons-material/Settings";
-import AddIcon from "@mui/icons-material/Add";
 import EmbedPopup from "./EmbedPopup";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -117,7 +116,7 @@ const Video = ({
         width: size.widthInPercent ? `${size.widthInPercent}%` : `${size.width}px`,
         height: `${size.height}px`
       },
-      children: [/*#__PURE__*/_jsx(ToolBar, {}),
+      children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}),
       // The iframe reloads on each re-render and hence it stutters and the document doesn't detect mouse-up event leading to unwanted behaviour
       // So during resize replace the iframe with a simple div
       resizing ? /*#__PURE__*/_jsx("div", {
@@ -141,14 +140,14 @@ const Video = ({
         },
         src: url,
         title: alt
-      }), /*#__PURE__*/_jsx(IconButton, {
+      }), !readOnly ? /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {
           background: "#FFF"
         },
         className: "resize-br visible-on-hover",
         children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
-      })]
+      }) : null]
     }), children]
   });
 };

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

@@ -36,7 +36,8 @@ const Grid = props => {
   } = bannerSpacing || {};
   const {
     vertical,
-    horizantal
+    horizantal,
+    flexDirection
   } = alignment || {};
   const editor = useSlateStatic();
   const selected = useSelected();
@@ -119,7 +120,7 @@ const Grid = props => {
     }) : null;
   };
   return /*#__PURE__*/_jsxs("div", {
-    className: `grid-container ${grid}`,
+    className: `grid-container ${grid} element-root`,
     ...attributes,
     style: {
       background: bgColor,
@@ -127,7 +128,11 @@ const Grid = props => {
       backgroundImage: backgroundImage && backgroundImage !== "none" ? `url(${backgroundImage})` : "none",
       border: `1px solid ${borderColor}`
     },
-    children: [!readOnly && /*#__PURE__*/_jsx(GridToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
+    children: [!readOnly && /*#__PURE__*/_jsx("div", {
+      className: `element-selector ${selected ? "selected" : ""}`,
+      contentEditable: false,
+      children: /*#__PURE__*/_jsx(GridToolBar, {})
+    }), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
       element: element,
       onSave: onSave,
       onClose: onClose,
@@ -139,7 +144,9 @@ const Grid = props => {
         paddingRight: `${right}px`,
         paddingTop: `${top}px`,
         paddingBottom: `${bottom}px`,
+        alignItems: horizantal,
         justifyContent: horizantal,
+        flexDirection: flexDirection,
         width: "100%"
       },
       children: children

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Dialog, DialogContent, DialogTitle, IconButton, ImageListItemBar, Tooltip } from "@mui/material";
+import { Button, Dialog, DialogContent, DialogTitle, Grid, IconButton, ImageListItemBar, Tooltip } from "@mui/material";
 import { insertGrid } from "../../utils/grid";
 import { GridIcon } from "../../common/iconslist";
 import { ImageList, ImageListItem } from "@mui/material";
@@ -33,9 +33,13 @@ const GridButton = props => {
   };
   const handleInsertGrid = item => () => {
     try {
-      let template_content = item ? JSON.parse(item.content) : null;
-      template_content = Array.isArray(template_content) ? template_content : [template_content];
-      insertGrid(editor, template_content);
+      if (item) {
+        let template_content = item ? JSON.parse(item.content) : null;
+        template_content = Array.isArray(template_content) ? template_content : [template_content];
+        insertGrid(editor, template_content);
+      } else {
+        insertGrid(editor);
+      }
       handleClose();
     } catch (err) {
       console.log(err);
@@ -60,7 +64,22 @@ const GridButton = props => {
       onClose: handleClose,
       fullWidth: true,
       children: [/*#__PURE__*/_jsx(DialogTitle, {
-        children: "Templates"
+        children: /*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          children: [/*#__PURE__*/_jsx(Grid, {
+            item: true,
+            xs: 6,
+            children: "Templates"
+          }), /*#__PURE__*/_jsx(Grid, {
+            item: true,
+            xs: 6,
+            textAlign: "right",
+            children: /*#__PURE__*/_jsx(Button, {
+              onClick: handleInsertGrid(null),
+              children: "Insert Default Template"
+            })
+          })]
+        })
       }), /*#__PURE__*/_jsx(DialogContent, {
         children: /*#__PURE__*/_jsx(ImageList, {
           variant: "quilted",

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

@@ -89,26 +89,33 @@ const GridItem = props => {
     }
   };
   return /*#__PURE__*/_jsxs("div", {
-    className: `grid-item xs-${grid}`,
+    className: `grid-item xs-${grid} element-root`,
     ...attributes,
     style: {
       display: "flex",
       flexDirection: "column",
       backgroundColor: bgColor,
       alignItems: horizantal,
-      alignContent: vertical,
+      justifyContent: vertical,
       width: `${itemWidth}%`,
       margin: "0px"
     },
-    children: [/*#__PURE__*/_jsx("div", {
+    children: [!readOnly && /*#__PURE__*/_jsx("div", {
+      className: `element-selector ${selected ? "selected" : ""}`,
+      contentEditable: false,
+      children: /*#__PURE__*/_jsx(GridItemToolbar, {})
+    }), /*#__PURE__*/_jsx("div", {
       style: {
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
         paddingLeft: `${left}px`,
         paddingRight: `${right}px`,
         paddingTop: `${top}px`,
         paddingBottom: `${bottom}px`
       },
       children: children
-    }), !readOnly && /*#__PURE__*/_jsx(GridItemToolbar, {}), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {
+    }), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {
       element: element,
       onSave: onSave,
       onClose: onClose

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

@@ -6,6 +6,20 @@ const buttonStyle = [{
     key: "label",
     type: "text"
   }]
+}, {
+  tab: "Size & Alignment",
+  value: "size",
+  fields: [{
+    label: "Text Size",
+    key: "textSize",
+    type: "text",
+    placeholder: "16px or 1em"
+  }, {
+    label: "Text Align",
+    key: "textAlign",
+    type: "textAlign",
+    placeholder: "16px or 1em"
+  }]
 }, {
   tab: "Link",
   value: "link",

package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js

@@ -89,6 +89,34 @@ const Alignment = props => {
           })]
         })]
       })
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/_jsxs(FormControl, {
+        children: [/*#__PURE__*/_jsx(FormLabel, {
+          id: "demo-row-radio-buttons-group-label",
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            color: "primary",
+            children: "Flex Direction"
+          })
+        }), /*#__PURE__*/_jsxs(RadioGroup, {
+          row: true,
+          "aria-labelledby": "demo-row-radio-buttons-group-label",
+          name: "flexDirection",
+          value: value?.flexDirection || "row",
+          onChange: handleChange,
+          children: [/*#__PURE__*/_jsx(FormControlLabel, {
+            value: "row",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Row"
+          }), /*#__PURE__*/_jsx(FormControlLabel, {
+            value: "column",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Column"
+          })]
+        })]
+      })
     })]
   });
 };

package/dist/Editor/common/StyleBuilder/fieldTypes/index.js

@@ -10,6 +10,7 @@ import ImageTexts from "./imageTexts";
 import MenusArray from "./menusArray";
 import ButtonLink from "./buttonLink";
 import SaveAsTemplate from "./saveAsTemplate";
+import TextAlign from "./textAlign";
 const FieldMap = {
   text: Text,
   bannerSpacing: BannerSpacing,
@@ -22,6 +23,7 @@ const FieldMap = {
   imageTexts: ImageTexts,
   menusArray: MenusArray,
   buttonLink: ButtonLink,
-  saveAsTemplate: SaveAsTemplate
+  saveAsTemplate: SaveAsTemplate,
+  textAlign: TextAlign
 };
 export default FieldMap;

package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js

@@ -81,7 +81,8 @@ const SaveAsTemplate = props => {
         name: "title",
         value: template?.title,
         onChange: onChange,
-        placeholder: "Template Title"
+        placeholder: "Template Title",
+        fullWidth: true
       })
     }), /*#__PURE__*/_jsx(Grid, {
       item: true,
@@ -104,7 +105,7 @@ const SaveAsTemplate = props => {
       })
     }), /*#__PURE__*/_jsx(Grid, {
       item: true,
-      xs: 212,
+      xs: 12,
       children: /*#__PURE__*/_jsx(TextField, {
         fullWidth: true,
         name: "category",

package/dist/Editor/common/StyleBuilder/fieldTypes/text.js

@@ -9,7 +9,8 @@ const Text = props => {
     onChange
   } = props;
   const {
-    key
+    key,
+    placeholder
   } = data;
   const handleChange = e => {
     onChange({
@@ -29,7 +30,7 @@ const Text = props => {
         variant: "body1",
         color: "textSecondary",
         sx: {
-          fontSize: '14px'
+          fontSize: "14px"
         },
         children: data?.label
       })
@@ -38,6 +39,7 @@ const Text = props => {
       xs: 12,
       children: /*#__PURE__*/_jsx(TextField, {
         name: key,
+        placeholder: placeholder || "",
         type: "text",
         value: value,
         onChange: handleChange,

package/dist/Editor/common/StyleBuilder/fieldTypes/textAlign.js

@@ -0,0 +1,60 @@
+import React from "react";
+import { Grid, Radio, RadioGroup, FormControl, FormLabel, FormControlLabel, Typography } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const TextAlign = props => {
+  const {
+    value,
+    data,
+    onChange
+  } = props;
+  const {
+    key
+  } = data;
+  const handleChange = e => {
+    onChange({
+      [key]: e.target.value
+    });
+  };
+  return /*#__PURE__*/_jsx(Grid, {
+    container: true,
+    style: {
+      paddingTop: "12px"
+    },
+    spacing: 1,
+    children: /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/_jsxs(FormControl, {
+        children: [/*#__PURE__*/_jsx(FormLabel, {
+          id: "demo-row-radio-buttons-group-label",
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            color: "primary",
+            children: "Text Alignment"
+          })
+        }), /*#__PURE__*/_jsxs(RadioGroup, {
+          row: true,
+          "aria-labelledby": "demo-row-radio-buttons-group-label",
+          name: "textAlign",
+          value: value || "left",
+          onChange: handleChange,
+          children: [/*#__PURE__*/_jsx(FormControlLabel, {
+            value: "left",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Left"
+          }), /*#__PURE__*/_jsx(FormControlLabel, {
+            value: "center",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Center"
+          }), /*#__PURE__*/_jsx(FormControlLabel, {
+            value: "right",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Right"
+          })]
+        })]
+      })
+    })
+  });
+};
+export default TextAlign;

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -229,7 +229,8 @@ export const getBlock = props => {
           display: "flex",
           alignItems: "center",
           listStylePosition: "inside",
-          flexDirection: "column"
+          flexDirection: "column",
+          textAlign: "center"
         },
         ...attributes,
         ...element.attr,

package/dist/Editor/utils/grid.js

@@ -4,7 +4,6 @@ export const insertGrid = (editor, item) => {
   const grid = !item ? {
     type: "grid",
     grid: "container",
-    backgroundImage: "https://t4.ftcdn.net/jpg/05/06/47/83/360_F_506478399_l0jgZ5ZWj80o8XYdEJtYfQhVYMU56qDJ.jpg",
     children: [{
       ...gridItem()
     }]

package/package.json

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