@flozy/editor 1.5.9 → 1.6.1

package/dist/Editor/Elements/TopBanner/TopBannerButton.js

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import Icon from "../../common/Icon";
+import { insertTopBanner } from "../../utils/topBanner";
+import ImageSelector from "../../common/ImageSelector/ImageSelector";
+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 TopBannerButton = props => {
+  const {
+    editor,
+    icoBtnType,
+    customProps
+  } = props;
+  const [open, setOpen] = useState(false);
+  const onSelectImage = url => {
+    console.log(url);
+    if (url) {
+      insertTopBanner(editor, {
+        url
+      });
+    }
+    setOpen(false);
+  };
+  const handleClick = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ToolbarIcon, {
+      title: "Top Banner",
+      onClick: handleClick,
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: "topbanner"
+      }),
+      icoBtnType: icoBtnType
+    }), /*#__PURE__*/_jsx(ImageSelector, {
+      open: open,
+      onClose: handleClose,
+      customProps: customProps,
+      onSelectImage: onSelectImage
+    })]
+  });
+};
+export default TopBannerButton;

package/dist/Editor/Styles/EditorStyles.js

@@ -0,0 +1,50 @@
+const editorStyles = ({
+  padHeight
+}) => ({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    position: "relative",
+    padding: "0 8px"
+  },
+  slateWrapper: {
+    height: `${window.innerHeight - padHeight}px`,
+    overflow: "auto",
+    display: "flex",
+    flexDirection: "column",
+    backgroundColor: "#cccccc2b",
+    "& .scroll-area": {
+      display: "flex",
+      justifyContent: "center",
+      // minHeight: "100vh",
+      flex: 1
+    },
+    "& .editor-wrapper": {
+      maxWidth: "90%",
+      height: "100%",
+      backgroundColor: "#FFF",
+      overflow: "visible"
+    },
+    "& .el-toolbar": {
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: "fit-content",
+      "& button": {
+        border: "1px solid rgba(37, 99, 235, 0.32)",
+        borderRadius: "10px",
+        boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
+        background: "#fff",
+        width: "36px",
+        height: "36px",
+        "&.mr": {
+          marginRight: "2px"
+        },
+        "& svg": {
+          stroke: "rgb(100, 116, 139);"
+        }
+      }
+    }
+  }
+});
+export default editorStyles;

package/dist/Editor/Toolbar/FormatTools/Autocomplete.js

@@ -8,10 +8,8 @@ const Autocomplete = ({
   options
 }) => {
   const value = activeMark(editor, format);
-  console.log(options);
   const changeMarkData = (event, format) => {
     event.preventDefault();
-    console.log(event.target.value, format);
     // const value = event.target.value;
     // addMarkData(editor, { format, value });
   };

package/dist/Editor/Toolbar/FormatTools/Dropdown.js

@@ -6,7 +6,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const Dropdown = ({
   editor,
   format,
-  options
+  options,
+  width
 }) => {
   const value = activeMark(editor, format);
   const changeMarkData = (event, format) => {
@@ -23,10 +24,11 @@ const Dropdown = ({
     onChange: e => changeMarkData(e, format),
     style: {
       fontFamily: fontFamilyMap[value],
-      width: "100%",
+      width: width || "100%",
       height: "36px",
       overflow: "hidden",
-      borderRadius: "10px"
+      borderRadius: "10px",
+      fontSize: "14px"
     },
     children: options.map((item, index) => /*#__PURE__*/_jsx(MenuItem, {
       style: {
@@ -37,4 +39,7 @@ const Dropdown = ({
     }, index))
   });
 };
+Dropdown.defaultProps = {
+  icon: null
+};
 export default Dropdown;

package/dist/Editor/Toolbar/FormatTools/FontFamilyDropdown.js

@@ -0,0 +1,63 @@
+import React from "react";
+import { MenuItem, Tooltip, IconButton, Menu } from "@mui/material";
+import { addMarkData } from "../../utils/SlateUtilityFunctions.js";
+import { fontFamilyMap } from "../../utils/font";
+import Icon from "../../common/Icon";
+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 FontFamilyDropdown = ({
+  editor,
+  format,
+  options
+}) => {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = event => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Tooltip, {
+      title: "Font Family",
+      arrow: true,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        "aria-label": "more",
+        id: "long-button",
+        "aria-controls": open ? "long-menu" : undefined,
+        "aria-expanded": open ? "true" : undefined,
+        "aria-haspopup": "true",
+        onClick: handleClick,
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: format
+        })
+      })
+    }), /*#__PURE__*/_jsx(Menu, {
+      id: "long-menu",
+      MenuListProps: {
+        "aria-labelledby": "long-button"
+      },
+      anchorEl: anchorEl,
+      open: open,
+      onClose: handleClose,
+      children: options.map((item, index) => /*#__PURE__*/_jsx(MenuItem, {
+        value: item.value,
+        style: {
+          fontFamily: fontFamilyMap[item.value],
+          fontSize: 15
+        },
+        onClick: () => {
+          addMarkData(editor, {
+            format,
+            value: item.value
+          });
+          handleClose();
+        },
+        children: item.text
+      }, index))
+    })]
+  });
+};
+export default FontFamilyDropdown;

package/dist/Editor/Toolbar/FormatTools/FontSize.js

@@ -0,0 +1,112 @@
+import React, { useEffect, useRef, useState } from "react";
+import Button from "../../common/Button";
+import Icon from "../../common/Icon";
+import { activeMark, addMarkData, isBlockActive } from "../../utils/SlateUtilityFunctions";
+import usePopup from "../../utils/customHooks/usePopup";
+import { sizeMap } from "../../utils/font";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const FontSize = ({
+  editor,
+  format
+}) => {
+  const urlInputRef = useRef();
+  let activeValue = activeMark(editor, format);
+  const [active, setActive] = useState(false);
+  const [fontSize, setFontSize] = useState(16);
+  const [showInput, setShowInput] = usePopup(urlInputRef);
+  useEffect(() => {
+    setFontSize(activeValue === "normal" ? 16 : getSizeVal(activeValue));
+  }, [activeValue]);
+  const getSizeVal = value => {
+    try {
+      const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
+      return parseInt(size);
+    } catch (err) {
+      return "";
+    }
+  };
+  const handleButtonClick = e => {
+    e.preventDefault();
+    if (!active) {
+      let activeValue = activeMark(editor, format);
+      let defaultValue = activeValue ? sizeMap[activeValue] ? getSizeVal(sizeMap[activeValue]) : +activeValue : 16;
+      setFontSize(defaultValue);
+    } else {
+      setFontSize(16);
+    }
+    setShowInput(prev => !prev);
+    setActive(!active);
+  };
+  const onInputChange = e => {
+    if (e.target.value) {
+      setFontSize(e.target.value);
+      addMarkData(editor, {
+        format,
+        value: e.target.value
+      });
+    }
+  };
+  const changeWithButton = value => {
+    setFontSize(value);
+    addMarkData(editor, {
+      format,
+      value: value
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    ref: urlInputRef,
+    className: "popup-wrapper",
+    children: [/*#__PURE__*/_jsx(Button, {
+      className: `${isBlockActive(editor, format) && "btnActive"}`,
+      active: isBlockActive(editor, format),
+      style: {
+        border: showInput ? "1px solid lightgray" : "",
+        borderBottom: "none"
+      },
+      format: format,
+      onClick: handleButtonClick,
+      children: /*#__PURE__*/_jsx(Icon, {
+        className: "fontsize",
+        icon: format
+      })
+    }), showInput && /*#__PURE__*/_jsxs("div", {
+      className: "fontSizeWrapper popup imagePopup",
+      style: {
+        display: "flex",
+        justifyContent: "center",
+        maxWidth: "120px"
+      },
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "controls",
+        onClick: () => {
+          if (activeValue && activeValue > 1) {
+            changeWithButton(+fontSize - 1);
+          }
+        },
+        children: "-"
+      }), /*#__PURE__*/_jsx("input", {
+        value: fontSize,
+        type: "text",
+        style: {
+          border: "unset",
+          outline: "unset",
+          marginBottom: "unset",
+          maxWidth: "36px",
+          overflow: "hidden"
+        },
+        onChange: onInputChange,
+        disabled: !activeValue && activeValue !== 0
+      }), /*#__PURE__*/_jsx("span", {
+        className: "controls",
+        onClick: () => {
+          if (activeValue || activeValue === 0) {
+            changeWithButton(+fontSize + 1);
+          }
+        },
+        children: "+"
+      })]
+    })]
+  });
+};
+export default FontSize;

package/dist/Editor/Toolbar/FormatTools/TextSize.js

@@ -8,7 +8,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const TextSize = ({
   editor,
-  format
+  format,
+  fullWidth
 }) => {
   const value = activeMark(editor, format);
   const onChangeSize = e => {
@@ -49,11 +50,17 @@ const TextSize = ({
       size: "small",
       inputProps: {
         style: {
-          width: "30px",
-          textAlign: "center"
+          width: fullWidth ? "100%" : "30px",
+          textAlign: "center",
+          height: "19px",
+          fontSize: "14px"
         }
       },
+      fullWidth: fullWidth,
       InputProps: {
+        style: {
+          borderRadius: "8px"
+        },
         endAdornment: /*#__PURE__*/_jsxs("div", {
           className: "textFontArrows",
           children: [/*#__PURE__*/_jsx(IconButton, {
@@ -70,4 +77,7 @@ const TextSize = ({
     })
   });
 };
+TextSize.defaultProps = {
+  fullWidth: false
+};
 export default TextSize;

package/dist/Editor/Toolbar/FormatTools/index.js

@@ -4,4 +4,7 @@ import MarkButton from "./MarkButton";
 import Autocomplete from "./Autocomplete";
 import Text from "./Text";
 import TextSize from "./TextSize";
-export { BlockButton, Dropdown, MarkButton, Autocomplete, Text, TextSize };
+import FontFamilyDropdown from "./FontFamilyDropdown";
+import FontSize from "./FontSize";
+import AccordionButton from "../../Elements/Accordion/AccordionButton";
+export { BlockButton, Dropdown, MarkButton, Autocomplete, Text, TextSize, FontFamilyDropdown, FontSize, AccordionButton };

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;