@flozy/editor 1.3.1 → 1.3.3

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

@@ -3,6 +3,10 @@ import { Transforms, Path } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import { gridItem } from "../../utils/gridItem";
 import GridPopup from "./GridPopup";
+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 { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Grid = props => {
@@ -12,6 +16,9 @@ const Grid = props => {
     element,
     customProps
   } = props;
+  const {
+    readOnly
+  } = customProps;
   const [openSetttings, setOpenSettings] = useState(false);
   const {
     grid,
@@ -76,16 +83,38 @@ const Grid = props => {
   const onClose = () => {
     setOpenSettings(false);
   };
+  const onDelete = () => {
+    if (path) {
+      Transforms.removeNodes(editor, {
+        at: path
+      });
+    }
+  };
   const GridToolBar = () => {
     return selected ? /*#__PURE__*/_jsxs("div", {
       className: "grid-container-toolbar",
       contentEditable: false,
-      children: [/*#__PURE__*/_jsx("button", {
-        onClick: onSettings,
-        children: "Settings"
-      }), /*#__PURE__*/_jsx("button", {
-        onClick: onAddGridItem,
-        children: "+ Add Item"
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: "Grid Settings",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onSettings,
+          children: /*#__PURE__*/_jsx(SettingsIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Add Grid Item",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onAddGridItem,
+          children: /*#__PURE__*/_jsx(AddIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Delete Grid",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onDelete,
+          children: /*#__PURE__*/_jsx(DeleteIcon, {})
+        })
       })]
     }) : null;
   };
@@ -93,22 +122,28 @@ const Grid = props => {
     className: `grid-container ${grid}`,
     ...attributes,
     style: {
-      paddingLeft: `${left}px`,
-      paddingRight: `${right}px`,
-      paddingTop: `${top}px`,
-      paddingBottom: `${bottom}px`,
-      backgroundColor: bgColor,
-      justifyContent: horizantal,
+      background: bgColor,
       alignContent: vertical,
-      backgroundImage: backgroundImage ? `url(${backgroundImage})` : "none",
+      backgroundImage: backgroundImage && backgroundImage !== "none" ? `url(${backgroundImage})` : "none",
       border: `1px solid ${borderColor}`
     },
-    children: [/*#__PURE__*/_jsx(GridToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
+    children: [!readOnly && /*#__PURE__*/_jsx(GridToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
       element: element,
       onSave: onSave,
       onClose: onClose,
       customProps: customProps
-    }) : null, children]
+    }) : null, /*#__PURE__*/_jsx("div", {
+      style: {
+        display: "flex",
+        paddingLeft: `${left}px`,
+        paddingRight: `${right}px`,
+        paddingTop: `${top}px`,
+        paddingBottom: `${bottom}px`,
+        justifyContent: horizantal,
+        width: "100%"
+      },
+      children: children
+    })]
   });
 };
 export default Grid;

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

@@ -1,19 +1,83 @@
-import React from "react";
-import { IconButton } from "@mui/material";
+import React, { useState } from "react";
+import { Dialog, DialogContent, DialogTitle, IconButton, ImageListItemBar, Tooltip } from "@mui/material";
 import { insertGrid } from "../../utils/grid";
 import { GridIcon } from "../../common/iconslist";
+import { ImageList, ImageListItem } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const GridButton = props => {
   const {
-    editor
+    editor,
+    customProps
   } = props;
-  const handleInsertGrid = () => {
-    insertGrid(editor);
+  const {
+    services
+  } = customProps;
+  const [open, setOpen] = useState(false);
+  const [templates, setTemplates] = useState({
+    loading: false,
+    list: []
+  });
+  const onButtonClick = async () => {
+    setTemplates({
+      ...templates,
+      loading: true
+    });
+    setOpen(true);
+    const result = await services("listTemplates", {});
+    console.log(result);
+    setTemplates({
+      ...templates,
+      list: result?.data || []
+    });
+  };
+  const handleInsertGrid = item => () => {
+    insertGrid(editor, {
+      ...item.content
+    });
+    handleClose();
   };
-  return /*#__PURE__*/_jsx(IconButton, {
-    onClick: handleInsertGrid,
-    title: "Layout",
-    children: /*#__PURE__*/_jsx(GridIcon, {})
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const {
+    list
+  } = templates;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Tooltip, {
+      title: "Grid",
+      arrow: true,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        onClick: onButtonClick,
+        children: /*#__PURE__*/_jsx(GridIcon, {})
+      })
+    }), /*#__PURE__*/_jsxs(Dialog, {
+      open: open,
+      onClose: handleClose,
+      fullWidth: true,
+      children: [/*#__PURE__*/_jsx(DialogTitle, {
+        children: "Templates"
+      }), /*#__PURE__*/_jsx(DialogContent, {
+        children: /*#__PURE__*/_jsx(ImageList, {
+          variant: "quilted",
+          cols: 1,
+          children: list.map(item => {
+            return /*#__PURE__*/_jsxs(ImageListItem, {
+              onClick: handleInsertGrid(item),
+              children: [/*#__PURE__*/_jsx("img", {
+                src: item.thumbnail,
+                alt: item.title,
+                width: "auto",
+                height: "250px"
+              }), /*#__PURE__*/_jsx(ImageListItemBar, {
+                title: item.title
+              })]
+            }, item.thumbnail);
+          })
+        })
+      })]
+    })]
   });
 };
 export default GridButton;

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

@@ -1,15 +1,22 @@
 import React, { useState } from "react";
-import { Transforms, Element } from "slate";
+import { Transforms } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import GridItemPopup from "./GridItemPopup";
+import { IconButton, Tooltip } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import SettingsIcon from "@mui/icons-material/Settings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridItem = props => {
   const {
     attributes,
     children,
-    element
+    element,
+    customProps
   } = props;
+  const {
+    readOnly
+  } = customProps;
   const [openSetttings, setOpenSettings] = useState(false);
   const {
     grid,
@@ -31,24 +38,6 @@ const GridItem = props => {
   const selected = useSelected();
   const itemWidth = (grid || 6) / 12 * 100;
   const path = ReactEditor.findPath(editor, element);
-  const onItemSizeDecrease = () => {
-    Transforms.setNodes(editor, {
-      grid: grid <= 1 ? 1 : grid - 1
-    }, {
-      match: node => {
-        return Element.matches(node, element);
-      }
-    });
-  };
-  const onItemSizeIncrease = () => {
-    Transforms.setNodes(editor, {
-      grid: grid >= 12 ? 12 : grid + 1
-    }, {
-      match: node => {
-        return Element.matches(node, element);
-      }
-    });
-  };
   const GridItemToolbar = () => {
     return selected ? /*#__PURE__*/_jsxs("div", {
       contentEditable: false,
@@ -56,15 +45,21 @@ const GridItem = props => {
       style: {
         top: "0px"
       },
-      children: [/*#__PURE__*/_jsx("button", {
-        onClick: onSettings,
-        children: "Settings"
-      }), /*#__PURE__*/_jsx("button", {
-        onClick: onItemSizeDecrease,
-        children: "-"
-      }), /*#__PURE__*/_jsx("button", {
-        onClick: onItemSizeIncrease,
-        children: "+"
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: "Grid Settings",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          size: "small",
+          onClick: onSettings,
+          children: /*#__PURE__*/_jsx(SettingsIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Delete Grid",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onDelete,
+          children: /*#__PURE__*/_jsx(DeleteIcon, {})
+        })
       })]
     }) : null;
   };
@@ -86,23 +81,34 @@ const GridItem = props => {
   const onClose = () => {
     setOpenSettings(false);
   };
+  const onDelete = () => {
+    if (path) {
+      Transforms.removeNodes(editor, {
+        at: path
+      });
+    }
+  };
   return /*#__PURE__*/_jsxs("div", {
     className: `grid-item xs-${grid}`,
     ...attributes,
     style: {
       display: "flex",
       flexDirection: "column",
-      paddingLeft: `${left}px`,
-      paddingRight: `${right}px`,
-      paddingTop: `${top}px`,
-      paddingBottom: `${bottom}px`,
       backgroundColor: bgColor,
       alignItems: horizantal,
       alignContent: vertical,
       width: `${itemWidth}%`,
       margin: "0px"
     },
-    children: [children, /*#__PURE__*/_jsx(GridItemToolbar, {}), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {
+    children: [/*#__PURE__*/_jsx("div", {
+      style: {
+        paddingLeft: `${left}px`,
+        paddingRight: `${right}px`,
+        paddingTop: `${top}px`,
+        paddingBottom: `${bottom}px`
+      },
+      children: children
+    }), !readOnly && /*#__PURE__*/_jsx(GridItemToolbar, {}), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {
       element: element,
       onSave: onSave,
       onClose: onClose

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

@@ -0,0 +1,56 @@
+const image_banner_text = {
+  type: "grid",
+  grid: "container",
+  backgroundImage: "https://t4.ftcdn.net/jpg/05/06/47/83/360_F_506478399_l0jgZ5ZWj80o8XYdEJtYfQhVYMU56qDJ.jpg",
+  children: [{
+    type: "grid-item",
+    grid: 6,
+    children: [{
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        text: "About Us",
+        fontSize: "huge",
+        color: "#ffffff"
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        fontSize: "medium",
+        text: "",
+        color: "#ffffff"
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        fontSize: "medium",
+        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.",
+        color: "#ffffff"
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }],
+    bgColor: "rgba(255, 255, 255, 0)"
+  }],
+  alignment: {
+    horizantal: "center"
+  }
+};
+export default image_banner_text;

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

@@ -0,0 +1,17 @@
+import image_banner_text from "./image_banner_text";
+import right_image_left_text from "./right_image_left_text";
+import white_LTRI from "./white_LTRI";
+const GRID_TEMPLATES = [{
+  title: "Image Banner with Text",
+  img: require("./full_grid.png"),
+  content: image_banner_text
+}, {
+  title: "Right Image and Left Text",
+  img: require("./full_grid.png"),
+  content: right_image_left_text
+}, {
+  title: "White - Right Image and Left Text",
+  img: require("./full_grid.png"),
+  content: white_LTRI
+}];
+export default GRID_TEMPLATES;

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

@@ -0,0 +1,81 @@
+const right_image_left_text = {
+  type: "grid",
+  grid: "container",
+  backgroundImage: "https://t4.ftcdn.net/jpg/05/06/47/83/360_F_506478399_l0jgZ5ZWj80o8XYdEJtYfQhVYMU56qDJ.jpg",
+  children: [{
+    type: "grid-item",
+    grid: 6,
+    children: [{
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        text: "About Us",
+        fontSize: "huge",
+        color: "#ffffff"
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        fontSize: "medium",
+        text: "",
+        color: "#ffffff"
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        fontSize: "medium",
+        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.",
+        color: "#ffffff"
+      }]
+    }],
+    bgColor: "rgba(255, 255, 255, 0)",
+    alignment: {
+      vertical: "center"
+    }
+  }, {
+    type: "grid-item",
+    grid: 6,
+    children: [{
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }, {
+      type: "image",
+      alt: "",
+      url: "https://www.boardeffect.com/wp-content/uploads/2020/01/Sample-Letter-to-Remove-a-Board-Member.jpg",
+      children: [{
+        text: ""
+      }],
+      size: {
+        width: 769.0000000000003,
+        height: 471,
+        widthInPercent: 100.26075619295962
+      }
+    }, {
+      type: "paragraph",
+      children: [{
+        text: ""
+      }],
+      size: {
+        height: 300,
+        widthInPercent: 100
+      }
+    }],
+    bgColor: "rgba(255, 255, 255, 0)"
+  }],
+  alignment: {
+    horizantal: "center",
+    vertical: "center"
+  }
+};
+export default right_image_left_text;

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

@@ -0,0 +1,116 @@
+const white_LTRI = {
+  type: "grid",
+  grid: "container",
+  children: [{
+    type: "grid-item",
+    grid: 6,
+    children: [{
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        text: "",
+        fontSize: "huge",
+        color: "#000000"
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        fontSize: "huge",
+        color: "#000000",
+        text: ""
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        fontSize: "huge",
+        color: "#000000",
+        text: "Solution for Your"
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        fontSize: "huge",
+        color: "#000000",
+        text: "Digital Success",
+        bold: true
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        fontSize: "huge",
+        color: "#000000",
+        bold: true,
+        text: ""
+      }]
+    }, {
+      type: "button",
+      children: [{
+        text: ""
+      }],
+      buttonLink: {
+        linkType: "webAddress"
+      },
+      label: "Book a Demo",
+      textColor: "rgba(255, 255, 255, 1)",
+      bgColor: "rgba(37, 99, 235, 1)",
+      lockSpacing: false,
+      bannerSpacing: {
+        top: "12",
+        left: "24",
+        right: "24",
+        bottom: "12"
+      }
+    }],
+    bgColor: "rgba(255, 255, 255, 0)",
+    alignment: {
+      vertical: "center"
+    }
+  }, {
+    type: "grid-item",
+    grid: 6,
+    children: [{
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }, {
+      type: "image",
+      alt: "",
+      url: "https://sweetp-user-uploads.s3.eu-west-2.amazonaws.com/stage%20/%201704194091991_notes",
+      children: [{
+        text: ""
+      }],
+      size: {
+        width: 769.0000000000003,
+        height: 471,
+        widthInPercent: 100.26075619295962
+      }
+    }, {
+      type: "paragraph",
+      children: [{
+        text: ""
+      }],
+      size: {
+        height: 471,
+        widthInPercent: 100.26075619295962,
+        width: 769.0000000000003
+      }
+    }],
+    bgColor: "rgba(255, 255, 255, 0)"
+  }],
+  alignment: {
+    horizantal: "center",
+    vertical: "center"
+  },
+  bgColor: "rgba(254, 254, 255, 1)"
+};
+export default white_LTRI;

package/dist/Editor/Elements/Link/LinkButton.js

@@ -1,6 +1,6 @@
 import { useRef, useState } from "react";
 import { Transforms } from "slate";
-import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox
+import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox, Tooltip
 // styled,
 } from "@mui/material";
 // import { styled } from "@mui/material/styles";
@@ -49,13 +49,17 @@ const LinkButton = props => {
   return /*#__PURE__*/_jsxs("div", {
     ref: linkInputRef,
     className: "popup-wrapper1",
-    children: [/*#__PURE__*/_jsx(IconButton, {
-      className: showInput ? "clicked" : "",
-      active: isBlockActive(editor, "link") ? "active" : "",
-      format: "link",
-      onClick: toggleLink,
-      children: /*#__PURE__*/_jsx(Icon, {
-        icon: "link"
+    children: [/*#__PURE__*/_jsx(Tooltip, {
+      title: "Link",
+      arrow: true,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        className: showInput ? "clicked" : "",
+        active: isBlockActive(editor, "link") ? "active" : "",
+        format: "link",
+        onClick: toggleLink,
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "link"
+        })
       })
     }), showInput && /*#__PURE__*/_jsx(Dialog, {
       open: true,

package/dist/Editor/Elements/Mentions/Mentions.js

@@ -28,9 +28,9 @@ const Mentions = ({
   return /*#__PURE__*/_jsxs("span", {
     ...attributes,
     contentEditable: false,
-    "data-cy": `mention-${element.character.replace(" ", "-")}`,
+    "data-cy": `mention-${element.character.name.replace(" ", "-")}`,
     style: style,
-    children: ["@", element.character, children]
+    children: ["@", element.character.name, children]
   });
 };
 export default Mentions;

package/dist/Editor/Elements/NewLine/NewLineButton.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { IconButton } from "@mui/material";
+import { IconButton, Tooltip } from "@mui/material";
 import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
@@ -18,15 +18,18 @@ const NewLineButton = () => {
     });
     ReactEditor.focus(editor);
   };
-  return /*#__PURE__*/_jsx(IconButton, {
+  return /*#__PURE__*/_jsx(Tooltip, {
     title: "New Line",
-    onClick: onAddNewLine,
-    children: /*#__PURE__*/_jsx(KeyboardReturnIcon, {
-      sx: {
-        fill: "#64748B",
-        width: "18px",
-        height: "18px"
-      }
+    arrow: true,
+    children: /*#__PURE__*/_jsx(IconButton, {
+      onClick: onAddNewLine,
+      children: /*#__PURE__*/_jsx(KeyboardReturnIcon, {
+        sx: {
+          fill: "#64748B",
+          width: "18px",
+          height: "18px"
+        }
+      })
     })
   });
 };