@flozy/editor 1.6.0 → 1.6.2

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

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+import { useSlate } from "slate-react";
+import { Box, Dialog, IconButton, Paper, Popper, Tooltip } from "@mui/material";
+import MENU_OPTIONS from "./Options/Options";
+import TextFormat from "../PopupTool/TextFormat";
+import AddElements from "../PopupTool/AddElements";
+import AddTemplates from "../PopupTool/AddTemplates";
+import miniToolbarStyles from "./Styles";
+import usePopupStyle from "../PopupTool/PopupToolStyle";
+import PopperHeader from "../PopupTool/PopperHeader";
+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 POPUP_TYPES = {
+  textFormat: TextFormat,
+  addElement: AddElements,
+  addTemplate: AddTemplates
+};
+const FULLSCREEN_POPUP = {
+  addTemplate: true
+};
+const POPUP_TITLE = {
+  textFormat: "Text Settings",
+  addElement: "Add Elements",
+  addTemplate: "Templates"
+};
+const MiniToolbar = props => {
+  const {
+    customProps
+  } = props;
+  const classes = miniToolbarStyles();
+  const popupStyles = usePopupStyle();
+  const editor = useSlate();
+  const [popper, setPopper] = useState(null);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [fullScreen, setFullScreen] = useState(false);
+  const PopupComponent = POPUP_TYPES[popper] || null;
+  const open = Boolean(PopupComponent);
+  const DialogComp = !fullScreen ? Popper : Dialog;
+  const handleClick = type => e => {
+    setPopper(type);
+    setAnchorEl(e.currentTarget);
+  };
+  const onClose = () => {
+    setPopper(null);
+  };
+  const toggleFullscreen = () => {
+    setFullScreen(!fullScreen);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Box, {
+      component: "div",
+      sx: classes.root,
+      children: MENU_OPTIONS.map(({
+        type,
+        label,
+        icon: Icon
+      }) => {
+        return /*#__PURE__*/_jsx(Tooltip, {
+          title: label,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            className: type === popper ? "active" : "",
+            onClick: handleClick(type),
+            children: /*#__PURE__*/_jsx(Icon, {})
+          })
+        }, `mini_tool_btn_${type}`);
+      })
+    }), /*#__PURE__*/_jsx(DialogComp, {
+      open: open,
+      onClose: onClose,
+      anchorEl: anchorEl,
+      placement: "top",
+      sx: popupStyles.popupWrapper,
+      className: `tools-drawer ${fullScreen ? "fullscreen" : ""}`,
+      fullScreen: fullScreen,
+      style: {
+        zIndex: 1002
+      },
+      children: PopupComponent ? /*#__PURE__*/_jsxs(Paper, {
+        className: "papper-wrpr",
+        style: {
+          borderRadius: "10px"
+        },
+        children: [/*#__PURE__*/_jsx(PopperHeader, {
+          title: POPUP_TITLE[popper],
+          classes: popupStyles,
+          onClose: onClose,
+          needFullscreen: FULLSCREEN_POPUP[popper],
+          fullScreen: fullScreen,
+          toggleFullscreen: toggleFullscreen
+        }), /*#__PURE__*/_jsx(PopupComponent, {
+          classes: popupStyles,
+          editor: editor,
+          customProps: customProps,
+          fullScreen: fullScreen
+        })]
+      }) : null
+    })]
+  });
+};
+export default MiniToolbar;

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

@@ -0,0 +1,17 @@
+import TextIcon from "../../../assets/svg/TextIcon";
+import AddElementIcon from "../../../assets/svg/AddElementIcon";
+import AddTemplateIcon from "../../../assets/svg/AddTemplateIcon";
+const MENU_OPTIONS = [{
+  type: "textFormat",
+  icon: TextIcon,
+  label: "Text Style"
+}, {
+  type: "addElement",
+  icon: AddElementIcon,
+  label: "Add Element"
+}, {
+  type: "addTemplate",
+  icon: AddTemplateIcon,
+  label: "Add Template"
+}];
+export default MENU_OPTIONS;

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

@@ -0,0 +1,30 @@
+const miniToolbarStyles = () => ({
+  root: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    position: "absolute",
+    bottom: "-12px",
+    left: 0,
+    right: 0,
+    margin: "auto",
+    border: "1px solid #D8DDE1",
+    borderRadius: "22px",
+    width: "200px",
+    height: "37px",
+    zIndex: 1000,
+    background: "#FFF",
+    "& button": {
+      "& svg": {
+        stroke: "#64748B"
+      },
+      "&.active": {
+        "& svg": {
+          stroke: "#2563EB"
+        }
+      }
+    }
+  }
+});
+export default miniToolbarStyles;

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { Grid } from "@mui/material";
+import { toolbarGroups } from "../toolbarGroups";
+import { RenderToolbarIcon } from "../Toolbar";
+import { jsx as _jsx } from "react/jsx-runtime";
+const allTools = toolbarGroups.flat();
+const elements = allTools.filter(f => f?.group === "elements");
+const AddElements = props => {
+  const {
+    classes,
+    editor,
+    customProps
+  } = props;
+  return /*#__PURE__*/_jsx(Grid, {
+    container: true,
+    sx: classes.textFormatWrapper,
+    spacing: 2,
+    children: elements.map(m => {
+      return /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 6,
+        children: /*#__PURE__*/_jsx(RenderToolbarIcon, {
+          editor: editor,
+          element: m,
+          customProps: customProps,
+          icoBtnType: "mini"
+        })
+      }, `ri_mi_${m.id}`);
+    })
+  });
+};
+export default AddElements;

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

@@ -0,0 +1,115 @@
+import React, { useEffect, useState } from "react";
+import { Grid, Tabs, Tab, Card, CardMedia, CardContent, Box } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Categories = props => {
+  const {
+    value,
+    handleChange,
+    data
+  } = props;
+  return /*#__PURE__*/_jsx(Tabs, {
+    value: value || data[0],
+    onChange: handleChange,
+    variant: "scrollable",
+    scrollButtons: "auto",
+    "aria-label": "Categories",
+    style: {
+      width: "100%"
+    },
+    children: data.map(m => /*#__PURE__*/_jsx(Tab, {
+      value: m,
+      label: m
+    }, m))
+  });
+};
+const AddTemplates = props => {
+  const {
+    classes,
+    editor,
+    fullScreen,
+    customProps
+  } = props;
+  const {
+    services
+  } = customProps;
+  const [categories, setCategories] = useState([]);
+  const [category, setCategory] = useState("");
+  const [templates, setTemplates] = useState([]);
+  const [filteredTemplates, setFilteredTemplates] = useState([]);
+  useEffect(() => {
+    getTemplatesList();
+  }, []);
+  const getTemplatesList = async () => {
+    const result = await services("listTemplates", {});
+    const tempList = result?.data?.filter(f => f.type === "Template");
+    const lic = tempList?.reduce((a, b) => {
+      if (a.indexOf(b.category) < 0) {
+        a.push(b.category);
+      }
+      return a;
+    }, []);
+    const ft = tempList?.filter(f => f.category === lic[0]);
+    setTemplates(tempList);
+    setCategories(lic);
+    setCategory(lic[0]);
+    setFilteredTemplates(ft);
+  };
+  const handleChange = (event, newValue) => {
+    setCategory(newValue);
+    setFilteredTemplates(templates.filter(f => f.category === newValue));
+  };
+  const onSelectTemplate = card => () => {
+    try {
+      editor.insertNode(JSON.parse(card.content));
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    container: true,
+    className: `templates ${fullScreen ? "fullscreen" : ""}`,
+    sx: classes.textFormatWrapper,
+    spacing: 0,
+    children: [/*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/_jsx(Categories, {
+        value: category,
+        data: categories,
+        handleChange: handleChange
+      })
+    }), /*#__PURE__*/_jsx(Grid, {
+      container: true,
+      spacing: 1,
+      className: `${fullScreen ? "fullscreen" : ""}`,
+      sx: classes.templateCardsWrpr,
+      children: filteredTemplates.map(m => {
+        return /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 4,
+          children: /*#__PURE__*/_jsxs(Card, {
+            sx: classes.templateCard,
+            onClick: onSelectTemplate(m),
+            children: [/*#__PURE__*/_jsx(Box, {
+              sx: classes.templateCardMediaWrpr,
+              children: /*#__PURE__*/_jsx(CardMedia, {
+                className: `template-card-media ${fullScreen ? "fullscreen" : ""}`,
+                component: "div",
+                image: m?.thumbnail,
+                alt: m?.title,
+                sx: classes.templateCardMedia
+              })
+            }), /*#__PURE__*/_jsx(CardContent, {
+              style: {
+                height: "30px"
+              },
+              children: m?.title
+            })]
+          })
+        }, `template_${m.id}`);
+      })
+    })]
+  });
+};
+export default AddTemplates;

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

@@ -0,0 +1,65 @@
+import React from "react";
+import { Grid, Typography, IconButton, Tooltip } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import OpenInFullIcon from "@mui/icons-material/OpenInFull";
+import CloseFullscreenIcon from "@mui/icons-material/CloseFullscreen";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const PopperHeader = props => {
+  const {
+    title,
+    classes,
+    onClose,
+    needFullscreen,
+    fullScreen,
+    toggleFullscreen
+  } = props;
+  return /*#__PURE__*/_jsx(Grid, {
+    container: true,
+    padding: 2,
+    children: /*#__PURE__*/_jsxs(Grid, {
+      item: true,
+      xs: 12,
+      style: {
+        display: "flex",
+        borderBottom: "1px solid #DCE4EC"
+      },
+      justifyContent: "space-between",
+      alignItems: "center",
+      className: "textSettingHeader",
+      children: [/*#__PURE__*/_jsx(Typography, {
+        color: "primary",
+        sx: {
+          fontSize: "16px",
+          fontWeight: "700",
+          color: "#000"
+        },
+        children: title
+      }), /*#__PURE__*/_jsxs(Grid, {
+        sx: classes.textFormatLabel,
+        justifyContent: "end",
+        children: [needFullscreen ? /*#__PURE__*/_jsx(Tooltip, {
+          title: "Toggle Fullscreen",
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            style: {
+              marginRight: "8px"
+            },
+            className: "close-popupbtn",
+            onClick: toggleFullscreen,
+            children: fullScreen ? /*#__PURE__*/_jsx(CloseFullscreenIcon, {}) : /*#__PURE__*/_jsx(OpenInFullIcon, {})
+          })
+        }) : null, /*#__PURE__*/_jsx(Tooltip, {
+          title: "Close",
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            className: "close-popupbtn",
+            onClick: onClose,
+            children: /*#__PURE__*/_jsx(CloseIcon, {})
+          })
+        })]
+      })]
+    })
+  });
+};
+export default PopperHeader;

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

@@ -1,14 +1,29 @@
 const usePopupStyle = () => ({
   popupWrapper: {
     boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)",
-    zIndex: 999
+    zIndex: 1002,
+    marginBottom: "12px !important",
+    border: "1px solid #E0E0E0",
+    borderRadius: "10px",
+    "&.fullscreen": {
+      marginBottom: "0px !important",
+      "& .papper-wrpr": {
+        boxShadow: "none"
+      }
+    }
   },
   textFormatWrapper: {
     padding: "0px 16px 16px 16px",
-    width: "350px",
-    maxheight: "300px",
+    width: "370px",
+    // 30% of window height
+    maxHeight: `${window.innerHeight * 0.45}px`,
     overflow: "auto",
-    // marginBottom: "12px",
+    "&.templates": {
+      width: "500px",
+      "&.fullscreen": {
+        width: "100%"
+      }
+    },
     "& .textSettingHeader": {
       borderBottom: "1px solid #DCE4EC",
       padding: "8px 0px 5px",
@@ -19,6 +34,35 @@ const usePopupStyle = () => ({
     },
     "& .MuiOutlinedInput-root": {
       boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
+    },
+    "& .mini": {
+      borderRadius: "0px",
+      width: "100%",
+      justifyContent: "start",
+      "& svg": {
+        width: "24px",
+        height: "24px",
+        marginRight: "8px"
+      },
+      "& span": {
+        fontSize: "14px",
+        color: "#64748B"
+      }
+    },
+    // for command list style
+    "& .cmd": {
+      borderRadius: "0px",
+      width: "100%",
+      justifyContent: "start",
+      "& svg": {
+        width: "24px",
+        height: "24px",
+        marginRight: "8px"
+      },
+      "& span": {
+        fontSize: "14px",
+        color: "#64748B"
+      }
     }
   },
   textFormatLabel: {
@@ -38,12 +82,122 @@ const usePopupStyle = () => ({
     alignItems: "center",
     marginBottom: "8px",
     border: "1px solid #ECECEC",
-    padding: "0px 8px",
     borderRadius: "8px",
     boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
   },
-  textFormatCG: {
+  textFormatColorWrpr: {
+    display: "flex",
+    alignItems: "center",
     marginBottom: "8px"
+  },
+  textFormatCG: {},
+  evenSpace: {
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    "& button": {
+      marginRight: "8px",
+      marginBottom: "8px"
+    },
+    "&.typo-icons": {
+      "& button": {
+        width: "36px",
+        height: "36px"
+      }
+    },
+    "&.text-decorations-wrpr": {
+      "& button": {
+        // width: "140px",
+      }
+    }
+  },
+  typoLabel: {
+    fontSize: "14px",
+    marginBottom: "5px",
+    paddingLeft: "5px",
+    fontWeight: 500
+  },
+  templateCard: {
+    borderRadius: "10px",
+    boxShadow: "none",
+    cursor: "pointer"
+  },
+  templateCardMedia: {
+    width: "100%",
+    height: "210px",
+    backgroundPosition: "left top",
+    backgroundSize: "100% auto",
+    borderRadius: "10px",
+    boxShadow: "0px 1px 3px 3px rgba(0,0,0,0.12)",
+    "&.fullscreen": {
+      height: "280px"
+    }
+  },
+  templateCardMediaWrpr: {
+    padding: "8px",
+    border: "1px solid rgba(0, 0, 0, 0.1)",
+    borderRadius: "10px",
+    background: "#FEFEFE",
+    overflow: "hidden",
+    "&:hover": {
+      border: "1px solid #2563EB"
+    }
+  },
+  templateCardsWrpr: {
+    height: "100%",
+    overflow: "auto",
+    margin: "12px 0px",
+    paddingRight: "8px",
+    "&.fullscreen": {
+      height: `${window.innerHeight - 300}px`
+    }
+  },
+  pageWidthBtn: {
+    color: "#64748B",
+    marginTop: "8px",
+    textTransform: "capitalize",
+    "&.active": {
+      background: "rgba(45,66,91,0.1)"
+    }
+  },
+  btnGroup: {
+    backgroundColor: "#fff",
+    "& button": {
+      marginRight: "0px",
+      color: "#64748B",
+      border: "1px solid #ECECEC",
+      textTransform: "capitalize",
+      "&.active": {
+        backgroundColor: "#ECECEC"
+      },
+      "&.no-hover": {
+        border: "1px solid #ECECEC"
+      }
+    }
+  },
+  allColor: {},
+  allColorInner: {
+    "& .buttonsWrpr": {
+      paddingLeft: "8px",
+      "& button": {
+        border: "1px solid #ccc",
+        margin: "4px",
+        width: "24px",
+        height: "24px",
+        "&.active": {
+          "&:before": {
+            content: '" "',
+            position: "absolute",
+            top: "-5px",
+            left: "-5px",
+            width: "calc(100% + 4px)",
+            height: "calc(100% + 4px)",
+            border: "3px solid blue",
+            borderRadius: "50%"
+          }
+        }
+      }
+    }
   }
 });
 export default usePopupStyle;