@flozy/editor 1.3.2 → 1.3.4

package/dist/Editor/CommonEditor.js

@@ -58,11 +58,15 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     defaultBG,
     needDotsBG,
-    footer
+    footer,
+    needLayout = true,
+    CHARACTERS = []
   } = otherProps || {};
   const editor = useMemo(() => {
     if (collaborativeEditor) return collaborativeEditor;
-    return withCommon(createEditor());
+    return withCommon(createEditor(), {
+      needLayout
+    });
   }, [collaborativeEditor]);
   const pageSettings = editor?.children?.find(f => f.type === "page-settings");
   const {
@@ -169,7 +173,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     target,
     index
   } = mentions;
-  const chars = CHARACTERS.filter(c => c.toLowerCase().startsWith(search?.toLowerCase())).slice(0, 10);
+  const chars = CHARACTERS.filter(c => c.name.toLowerCase().startsWith(search?.toLowerCase())).slice(0, 10);
   const handleEditorChange = newValue => {
     setValue(newValue);
     if (!isInteracted) {
@@ -285,5 +289,4 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   });
 });
 CommonEditor.displayName = "CommonEditor";
-const CHARACTERS = ["Aayla Secura", "Adi Gallia"];
 export default CommonEditor;

package/dist/Editor/Editor.css

@@ -86,9 +86,9 @@ blockquote{
 
 .grid-container {
     display: flex;
-    border-radius: 12px;
-    background-color: #F3F6F9;
-    border: 1px solid #E5EAF2;
+    border-radius: 0px;
+    background-color: transparent;
+    border: 0px solid #E5EAF2;
     padding: 16px;
     position: relative;
     flex-wrap: wrap;
@@ -438,4 +438,26 @@ blockquote{
 
 .MuiIconButton-root.btnActive {
     background-color: #ccc;
+}
+
+.embed .element-toolbar {
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: auto;
+    width: fit-content;
+    height: fit-content;
+    margin: auto;
+}
+
+.resize-br {
+    position: absolute !important;
+    bottom: 2px;
+    right: 2px;
+}
+.visible-on-hover {
+    display: none !important;
+}
+.has-hover:hover .visible-on-hover {
+    display: flex !important;
 }

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

@@ -106,6 +106,12 @@ const EditorButton = props => {
   const onClose = () => {
     setEdit(false);
   };
+  const borderStyle = borderColor?.indexOf("linear") >= 0 ? {
+    borderImageSource: borderColor,
+    borderImageSlice: 1
+  } : {
+    borderColor: borderColor || "none"
+  };
   return /*#__PURE__*/_jsxs("div", {
     className: "editor-btn-wrapper",
     ...attributes,
@@ -116,7 +122,9 @@ const EditorButton = props => {
         className: "editor-btn",
         style: {
           background: bgColor || "rgb(30, 75, 122)",
-          border: borderColor ? `1px solid ${borderColor}` : "none",
+          borderWidth: "1px",
+          borderBlockStyle: "solid",
+          ...borderStyle,
           borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
           paddingLeft: `${left || 8}px`,
           paddingRight: `${right || 8}px`,

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

@@ -1,6 +1,7 @@
 import React from "react";
 import StyleBuilder from "../../common/StyleBuilder";
 import embedImageStyle from "../../common/StyleBuilder/embedImageStyle";
+import embedVideoStyle from "../../common/StyleBuilder/embedVideoStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 const EmbedPopup = props => {
   const {
@@ -11,12 +12,12 @@ const EmbedPopup = props => {
     format
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
-    title: "Image",
-    type: format === "image" ? "embedImageStyle" : "embedImageStyle",
+    title: format === "image" ? "Image" : "Video",
+    type: format === "image" ? "embedImageStyle" : "embedVideoStyle",
     element: element,
     onSave: onSave,
     onClose: onClose,
-    renderTabs: format === "image" ? embedImageStyle : embedImageStyle,
+    renderTabs: format === "image" ? embedImageStyle : embedVideoStyle,
     customProps: customProps
   });
 };

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

@@ -5,7 +5,10 @@ import AspectRatioIcon from "@mui/icons-material/AspectRatio";
 import useResize from "../../utils/customHooks/useResize";
 import { insertImageText } from "../../utils/imageText";
 import EmbedPopup from "./EmbedPopup";
-import { IconButton } from "@mui/material";
+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 Image = ({
@@ -20,7 +23,8 @@ const Image = ({
     bannerSpacing,
     alignment,
     bgColor,
-    borderColor
+    borderColor,
+    borderRadius
   } = element;
   const {
     readOnly
@@ -31,6 +35,12 @@ const Image = ({
     right,
     bottom
   } = bannerSpacing || {};
+  const {
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight
+  } = borderRadius || {};
   const {
     vertical,
     horizantal
@@ -89,6 +99,11 @@ const Image = ({
   const onClose = () => {
     setOpenSettings(false);
   };
+  const onDelete = () => {
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+  };
   const onAddText = () => {
     Transforms.wrapNodes(editor, {
       type: "image-text-wrapper",
@@ -100,19 +115,34 @@ const Image = ({
     return selected ? /*#__PURE__*/_jsxs("div", {
       className: "element-toolbar",
       contentEditable: false,
-      children: [/*#__PURE__*/_jsx("button", {
-        onClick: onAddText,
-        children: "Add Text"
-      }), /*#__PURE__*/_jsx("button", {
-        onClick: onSettings,
-        children: "Settings"
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: "Add Text",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onAddText,
+          children: /*#__PURE__*/_jsx(AddIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Settings",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onSettings,
+          children: /*#__PURE__*/_jsx(SettingsIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Delete",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onDelete,
+          children: /*#__PURE__*/_jsx(DeleteIcon, {})
+        })
       })]
     }) : null;
   };
   const totalMinus = (parseInt(left) || 0) + (parseInt(right) || 0);
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
-    className: "embed",
+    className: "embed has-hover",
     style: {
       display: "flex",
       width: `calc(100% - ${totalMinus}px)`,
@@ -131,7 +161,8 @@ const Image = ({
       element: element,
       onSave: onSave,
       onClose: onClose,
-      customProps: customProps
+      customProps: customProps,
+      format: "image"
     }) : null, /*#__PURE__*/_jsxs("div", {
       contentEditable: false,
       style: {
@@ -140,6 +171,9 @@ const Image = ({
         height: `${size.height}px`
       },
       children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx("img", {
+        style: {
+          borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`
+        },
         alt: alt,
         src: url,
         onClick: handleImageClick
@@ -149,7 +183,7 @@ const Image = ({
           opacity: 1,
           background: "#FFF"
         },
-        className: "resize",
+        className: "resize-br visible-on-hover",
         children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
       })]
     }), children]

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

@@ -4,13 +4,18 @@ import { Node, Transforms } from "slate";
 import AspectRatioIcon from "@mui/icons-material/AspectRatio";
 import Icon from "../../common/Icon";
 import useResize from "../../utils/customHooks/useResize";
-import { IconButton } from "@mui/material";
+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";
 const Video = ({
   attributes,
   element,
-  children
+  children,
+  customProps
 }) => {
   const {
     url,
@@ -19,13 +24,18 @@ const Video = ({
   const editor = useSlateStatic();
   const selected = useSelected();
   const focused = useFocused();
+  const [openSetttings, setOpenSettings] = useState(false);
   const [parentDOM, setParentDOM] = useState(null);
+  const {
+    readOnly
+  } = customProps;
   const [size, onMouseDown, resizing, onLoad] = useResize({
     parentDOM,
     size: element?.size
   });
   const arr = Array.from(Node.elements(editor));
   const ele = arr.find(([elem]) => element === elem);
+  const path = ReactEditor.findPath(editor, element);
   useEffect(() => {
     if (editor && ele[1] !== undefined) {
       const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
@@ -40,9 +50,53 @@ const Video = ({
       });
     }
   }, [resizing]);
+  const ToolBar = () => {
+    return /*#__PURE__*/_jsxs("div", {
+      className: "element-toolbar visible-on-hover",
+      contentEditable: false,
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: "Settings",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onSettings,
+          children: /*#__PURE__*/_jsx(SettingsIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Delete",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onDelete,
+          children: /*#__PURE__*/_jsx(DeleteIcon, {})
+        })
+      })]
+    });
+  };
+  const onSettings = () => {
+    setOpenSettings(true);
+  };
+  const onSave = data => {
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: path
+    });
+    onClose();
+  };
+  const onClose = () => {
+    setOpenSettings(false);
+  };
+  const onDelete = () => {
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+  };
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
-    className: "embed",
+    className: "embed has-hover",
     style: {
       display: "flex",
       width: "100%",
@@ -50,14 +104,20 @@ const Video = ({
       boxShadow: selected && focused && "0 0 3px 3px lightgray"
     },
     ...element.attr,
-    children: [/*#__PURE__*/_jsxs("div", {
+    children: [openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
+      element: element,
+      onSave: onSave,
+      onClose: onClose,
+      customProps: customProps,
+      format: "video"
+    }) : null, /*#__PURE__*/_jsxs("div", {
       contentEditable: false,
       style: {
         position: "relative",
         width: size.widthInPercent ? `${size.widthInPercent}%` : `${size.width}px`,
         height: `${size.height}px`
       },
-      children: [
+      children: [/*#__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", {
@@ -72,22 +132,21 @@ const Video = ({
         children: /*#__PURE__*/_jsx(Icon, {
           icon: "videoPlayer"
         })
-      }) : /*#__PURE__*/_jsx("video", {
+      }) : /*#__PURE__*/_jsx("iframe", {
+        className: "embedd-iframe",
         style: {
           border: "none",
           width: "100%",
           height: "100%"
         },
         src: url,
-        title: alt,
-        controls: true
-      }), selected && /*#__PURE__*/_jsx(IconButton, {
+        title: alt
+      }), /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {
-          opacity: 1,
           background: "#FFF"
         },
-        className: "resize",
+        className: "resize-br visible-on-hover",
         children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
       })]
     }), children]

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 => {
@@ -90,15 +94,27 @@ const Grid = props => {
     return selected ? /*#__PURE__*/_jsxs("div", {
       className: "grid-container-toolbar",
       contentEditable: false,
-      children: [/*#__PURE__*/_jsx("button", {
-        onClick: onSettings,
-        children: "Settings"
-      }), /*#__PURE__*/_jsx("button", {
-        onClick: onDelete,
-        children: "Delete"
-      }), /*#__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;
   };
@@ -106,14 +122,9 @@ 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: [!readOnly && /*#__PURE__*/_jsx(GridToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
@@ -121,7 +132,18 @@ const Grid = props => {
       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,27 +1,52 @@
 import React, { useState } from "react";
-import { Dialog, DialogContent, DialogTitle, IconButton, Tooltip } from "@mui/material";
+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 GRID_TEMPLATES from "./templates";
 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 {
+    services
+  } = customProps;
   const [open, setOpen] = useState(false);
-  const onButtonClick = () => {
+  const [templates, setTemplates] = useState({
+    loading: false,
+    list: []
+  });
+  const onButtonClick = async () => {
+    setTemplates({
+      ...templates,
+      loading: true
+    });
     setOpen(true);
+    const result = await services("listTemplates", {});
+    setTemplates({
+      ...templates,
+      list: result?.data || []
+    });
   };
-  const handleInsertGrid = () => () => {
-    insertGrid(editor);
-    handleClose();
+  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);
+      handleClose();
+    } catch (err) {
+      console.log(err);
+    }
   };
   const handleClose = () => {
     setOpen(false);
   };
+  const {
+    list
+  } = templates;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Grid",
@@ -40,16 +65,18 @@ const GridButton = props => {
         children: /*#__PURE__*/_jsx(ImageList, {
           variant: "quilted",
           cols: 1,
-          children: GRID_TEMPLATES.map(item => {
-            return /*#__PURE__*/_jsx(ImageListItem, {
+          children: list.map(item => {
+            return /*#__PURE__*/_jsxs(ImageListItem, {
               onClick: handleInsertGrid(item),
-              children: /*#__PURE__*/_jsx("img", {
-                src: item.img,
+              children: [/*#__PURE__*/_jsx("img", {
+                src: item.thumbnail,
                 alt: item.title,
                 width: "auto",
                 height: "250px"
-              })
-            }, item.img);
+              }), /*#__PURE__*/_jsx(ImageListItemBar, {
+                title: item.title
+              })]
+            }, item.thumbnail);
           })
         })
       })]

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

@@ -2,6 +2,9 @@ import React, { useState } from "react";
 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 => {
@@ -42,12 +45,21 @@ const GridItem = props => {
       style: {
         top: "0px"
       },
-      children: [/*#__PURE__*/_jsx("button", {
-        onClick: onSettings,
-        children: "Settings"
-      }), /*#__PURE__*/_jsx("button", {
-        onClick: onDelete,
-        children: "Delete"
+      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;
   };
@@ -82,17 +94,21 @@ const GridItem = props => {
     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, !readOnly && /*#__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;