@flozy/editor 1.5.9 → 1.6.1

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -1,13 +1,14 @@
 import { fontOptions } from "../utils/font";
-const toolbarGroups = [[{
+import FormatBoldIcon from "@mui/icons-material/FormatBold";
+export const toolbarGroups = [[{
   id: 1,
   format: "fontFamily",
-  type: "dropdown",
+  type: "fontfamilydropdown",
   options: fontOptions
 }, {
   id: 2,
   format: "fontSize",
-  type: "fontSize",
+  type: "numberInput",
   options: [{
     text: "12px",
     value: "12px"
@@ -21,6 +22,25 @@ const toolbarGroups = [[{
     text: "48px",
     value: "48px"
   }]
+}, {
+  id: 40,
+  format: "fontWeight",
+  type: "dropdown",
+  options: [{
+    text: "Normal",
+    value: "normal"
+  }, {
+    text: "Bold",
+    value: "bold"
+  }, {
+    text: "Bolder",
+    value: "bolder"
+  }, {
+    text: "Lighter",
+    value: "lighter"
+  }],
+  icon: FormatBoldIcon,
+  width: "100px"
 }], [{
   id: 3,
   format: "bold",
@@ -65,32 +85,44 @@ const toolbarGroups = [[{
   id: 11,
   format: "headingOne",
   type: "block",
-  title: "H1"
+  title: "H1",
+  group: "typography"
 }, {
   id: 12,
   format: "headingTwo",
   type: "block",
-  title: "H2"
+  title: "H2",
+  group: "typography"
 }, {
   id: 13,
   format: "headingThree",
   type: "block",
-  title: "H3"
+  title: "H3",
+  group: "typography"
 }, {
   id: 14,
   format: "blockquote",
   type: "block",
-  title: "Block Quote"
+  title: "Block Quote",
+  group: "typography"
 }], [{
   id: 15,
   format: "orderedList",
   type: "block",
-  title: "Ordered List"
+  title: "Ordered List",
+  group: "list"
 }, {
   id: 16,
   format: "unorderedList",
   type: "block",
-  title: "Un-ordered List"
+  title: "Un-ordered List",
+  group: "list"
+}, {
+  id: 43,
+  format: "checkList",
+  type: "block",
+  title: "Check List",
+  group: "list"
 }], [{
   id: 17,
   format: "alignLeft",
@@ -113,52 +145,80 @@ const toolbarGroups = [[{
 }, {
   id: 21,
   format: "image",
-  type: "embed"
+  type: "embed",
+  group: "elements"
 }, {
   id: 22,
   format: "video",
-  type: "embed"
+  type: "embed",
+  group: "elements"
 }, {
-  id: 23,
-  type: "table"
+  id: 44,
+  lbT: "embed",
+  format: "video",
+  type: "embed",
+  group: "elements"
+}, {
+  id: 45,
+  format: "topbanner",
+  type: "topbanner",
+  group: "elements"
+}, {
+  id: 42,
+  type: "table",
+  group: "elements"
 }], [{
   id: 28,
-  type: "grid"
+  format: "grid",
+  type: "grid",
+  group: "elements"
+}, {
+  id: 41,
+  format: "emoji",
+  type: "emoji",
+  group: "elements"
 }, {
   id: 29,
-  type: "newLine"
+  format: "newLine",
+  type: "newLine",
+  group: "elements"
 }, {
   id: 30,
-  type: "accordion"
+  format: "accordion",
+  type: "accordion",
+  group: "list",
+  component: "AccordionButton"
 }, {
   id: 31,
-  type: "signature"
+  format: "signature",
+  type: "signature",
+  group: "elements"
 }, {
   id: 32,
-  type: "button"
-}, {
-  id: 33,
-  type: "page-settings"
+  format: "button",
+  type: "button",
+  group: "elements"
 }, {
   id: 34,
-  type: "carousel"
+  format: "carousel",
+  type: "carousel",
+  group: "elements"
 }, {
   id: 35,
+  format: "chipText",
   type: "chip-text"
-}, {
-  id: 36,
-  type: "drawer"
 }, {
   id: 37,
+  format: "appHeader",
   type: "app-header"
 }, {
   id: 38,
-  type: "form"
-}
-// {
-//   id: 39,
-//   type: "icon-text",
-// },
-]];
-
-export default toolbarGroups;
+  format: "form",
+  type: "form",
+  group: "elements"
+}, {
+  id: 33,
+  format: "pageSettings",
+  type: "page-settings",
+  group: "elements"
+}]];

package/dist/Editor/assets/svg/AddElementIcon.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const AddElementIcon = () => {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "17",
+    height: "16",
+    viewBox: "0 0 17 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("rect", {
+      x: "1.25",
+      y: "0.75",
+      width: "14.5",
+      height: "14.5",
+      rx: "7.25",
+      strokeWidth: "1.5"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M8.50024 4.66748L8.50024 11.3341",
+      strokeWidth: "1.5",
+      strokeLinecap: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M5.16687 8.03613H11.8335",
+      strokeWidth: "1.5",
+      strokeLinecap: "round"
+    })]
+  });
+};
+export default AddElementIcon;

package/dist/Editor/assets/svg/AddTemplateIcon.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const AddElementIcon = () => {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "17",
+    height: "16",
+    viewBox: "0 0 17 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M9.17334 1.94688L13.1067 3.69354C14.24 4.19354 14.24 5.02021 13.1067 5.52021L9.17334 7.26688C8.72667 7.46688 7.99334 7.46688 7.54667 7.26688L3.61334 5.52021C2.48 5.02021 2.48 4.19354 3.61334 3.69354L7.54667 1.94688C7.99334 1.74687 8.72667 1.74687 9.17334 1.94688Z",
+      strokeWidth: "1.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M2.5 7.3335C2.5 7.8935 2.92 8.54016 3.43333 8.76683L7.96 10.7802C8.30667 10.9335 8.7 10.9335 9.04 10.7802L13.5667 8.76683C14.08 8.54016 14.5 7.8935 14.5 7.3335",
+      strokeWidth: "1.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M2.5 10.6665C2.5 11.2865 2.86667 11.8465 3.43333 12.0998L7.96 14.1132C8.30667 14.2665 8.7 14.2665 9.04 14.1132L13.5667 12.0998C14.1333 11.8465 14.5 11.2865 14.5 10.6665",
+      strokeWidth: "1.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+};
+export default AddElementIcon;

package/dist/Editor/assets/svg/TextIcon.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const TextIcon = () => {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "15",
+    height: "14",
+    viewBox: "0 0 15 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M2.0575 4.18274V3.12107C2.0575 2.45024 2.59999 1.91357 3.265 1.91357H11.735C12.4058 1.91357 12.9425 2.45607 12.9425 3.12107V4.18274",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M7.5 12.0866V2.39746",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M5.20166 12.0864H9.79833",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+};
+export default TextIcon;

package/dist/Editor/common/Icon.js

@@ -1,12 +1,21 @@
 import React from "react";
-import { MdFormatQuote, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdFormatListNumbered, MdFormatListBulleted, MdAdd, MdArrowForward } from "react-icons/md";
-import { BsTypeH1, BsTypeH2, BsTypeH3, BsCameraVideoFill } from "react-icons/bs";
-import { FaSuperscript, FaSubscript } from "react-icons/fa";
+import { MdFormatQuote, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdFormatListNumbered, MdFormatListBulleted, MdAdd, MdArrowForward, MdEmojiEmotions, MdOutlinePermMedia, MdOutlineFileUpload } from "react-icons/md";
+import { BsTypeH1, BsTypeH2, BsTypeH3, BsCameraVideoFill, BsArrowBarRight, BsArrowBarLeft } from "react-icons/bs";
+import { FaSuperscript, FaSubscript, FaLink } from "react-icons/fa";
+import { FcAddRow, FcAddColumn } from "react-icons/fc";
 import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutlineDelete, AiFillTag, AiOutlineUpload, AiOutlineArrowsAlt, AiOutlineInsertRowAbove, AiOutlineInsertRowLeft, AiFillHtml5 } from "react-icons/ai";
 import { SiLatex } from "react-icons/si";
-import { BoldIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon } from "./iconslist";
+import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
+import { IoIosImage, IoIosLink } from "react-icons/io";
+import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon } from "./iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 const iconList = {
+  fontFamily: /*#__PURE__*/_jsx(FontFamilyIcon, {
+    size: 20
+  }),
+  fontSize: /*#__PURE__*/_jsx(FontSizeIcon, {
+    size: 20
+  }),
   // bold: <MdFormatBold size={20} />,
   bold: /*#__PURE__*/_jsx(BoldIcon, {
     size: 20
@@ -68,7 +77,7 @@ const iconList = {
     fill: "#64748B"
   }),
   // link: <MdInsertLink size={20} />,
-  link: /*#__PURE__*/_jsx(LinkIcon, {
+  link: /*#__PURE__*/_jsx(IoIosLink, {
     size: 20
   }),
   // image: <MdImage size={20} />,
@@ -124,6 +133,46 @@ const iconList = {
   }),
   pen: /*#__PURE__*/_jsx(AiFillEdit, {
     size: 20
+  }),
+  emoji: /*#__PURE__*/_jsx(MdEmojiEmotions, {
+    size: 20
+  }),
+  grid: /*#__PURE__*/_jsx(GridIcon, {}),
+  accordion: /*#__PURE__*/_jsx(AccordionIcon, {}),
+  signature: /*#__PURE__*/_jsx(SignatureIcon, {}),
+  button: /*#__PURE__*/_jsx(ButtonIcon, {}),
+  carousel: /*#__PURE__*/_jsx(Carousal, {}),
+  form: /*#__PURE__*/_jsx(FormIcon, {}),
+  tableCellResizeLeft: /*#__PURE__*/_jsx(BsArrowBarRight, {
+    size: 20
+  }),
+  tableCellResizeRight: /*#__PURE__*/_jsx(BsArrowBarLeft, {
+    size: 20
+  }),
+  deleteColumn: /*#__PURE__*/_jsx(RiDeleteColumn, {
+    size: 20
+  }),
+  addColumn: /*#__PURE__*/_jsx(FcAddColumn, {
+    size: 20
+  }),
+  deleteRow: /*#__PURE__*/_jsx(RiDeleteRow, {
+    size: 20
+  }),
+  addRow: /*#__PURE__*/_jsx(FcAddRow, {
+    size: 20
+  }),
+  checkList: /*#__PURE__*/_jsx(CheckboxIcon, {
+    size: 20
+  }),
+  embed: /*#__PURE__*/_jsx(LinkIcon, {}),
+  topbanner: /*#__PURE__*/_jsx(IoIosImage, {
+    size: 20
+  }),
+  fileUpload: /*#__PURE__*/_jsx(MdOutlineFileUpload, {
+    size: 20
+  }),
+  media: /*#__PURE__*/_jsx(MdOutlinePermMedia, {
+    size: 20
   })
 };
 const Icon = props => {

package/dist/Editor/common/ImageList.js

@@ -0,0 +1,75 @@
+import React, { useState } from "react";
+import { ImageList, ImageListItem, ImageListItemBar, IconButton } from "@mui/material";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function srcset(image, size, rows = 1, cols = 1) {
+  return {
+    src: `${image}?w=${size * cols}&h=${size * rows}&fit=crop&auto=format`,
+    srcSet: `${image}?w=${size * cols}&h=${size * rows}&fit=crop&auto=format&dpr=2 2x`
+  };
+}
+const QuiltedImageList = props => {
+  const {
+    itemData,
+    onSelectChange,
+    readOnly,
+    cols,
+    rowHeight,
+    uploaderComp: UploaderComp
+  } = props;
+  const [selected, setSelected] = useState([]);
+  const onImageSelect = item => () => {
+    setSelected([{
+      img: item.img
+    }]);
+    onSelectChange(item.img);
+  };
+  return /*#__PURE__*/_jsxs(ImageList, {
+    sx: {
+      width: "100%",
+      height: "100%"
+    },
+    variant: "quilted",
+    cols: cols || 4,
+    rowHeight: rowHeight || 121,
+    style: {
+      marginTop: "0px"
+    },
+    children: [UploaderComp ? /*#__PURE__*/_jsx(ImageListItem, {
+      className: "img_upload_btn_list",
+      cols: 2,
+      rows: 2,
+      style: {
+        backgroundColor: "rgba(0, 0, 0, 0.5)"
+      },
+      children: /*#__PURE__*/_jsx(UploaderComp, {})
+    }, `img_upload_btn`) : null, (itemData || []).map(item => {
+      const isSelected = (selected || []).find(f => f.img === item.img);
+      return /*#__PURE__*/_jsxs(ImageListItem, {
+        cols: item.cols || 1,
+        rows: item.rows || 1,
+        children: [/*#__PURE__*/_jsx("img", {
+          ...srcset(item.img, rowHeight || 121, item.rows, item.cols),
+          alt: item.title,
+          loading: "lazy"
+        }), !readOnly ? /*#__PURE__*/_jsx(ImageListItemBar, {
+          sx: {
+            background: "none"
+          },
+          position: "bottom",
+          actionPosition: "left",
+          actionIcon: /*#__PURE__*/_jsx(IconButton, {
+            onClick: onImageSelect(item, !isSelected),
+            children: /*#__PURE__*/_jsx(CheckCircleIcon, {
+              style: {
+                color: isSelected ? "#2563eb" : "#ccc"
+              }
+            })
+          })
+        }) : null]
+      }, item.img);
+    })]
+  });
+};
+export default QuiltedImageList;

package/dist/Editor/common/ImageSelector/ImageSelector.js

@@ -0,0 +1,117 @@
+import React, { useEffect, useState } from "react";
+import { Button, Grid, Tab, Tabs, Dialog, DialogContent, DialogActions, DialogTitle } from "@mui/material";
+import Upload from "./Options/Upload";
+import ChooseAssets from "./Options/ChooseAssets";
+import AddLink from "./Options/AddLink";
+import Icon from "../Icon";
+import ImageSelectorStyles from "./Styles";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const IMAGE_SLECTOR_OPTIONS = {
+  upload: Upload,
+  choose: ChooseAssets,
+  addLink: AddLink
+};
+const ImageSelector = props => {
+  const classes = ImageSelectorStyles();
+  const {
+    value,
+    onClose,
+    open,
+    onSelectImage,
+    title
+  } = props;
+  const [tabValue, setTabValue] = useState(title === "Image" ? "choose" : "addLink");
+  const [image, setImage] = useState(value || "");
+  const handleTabChange = (e, newValue) => {
+    setTabValue(newValue);
+  };
+  const onUploaded = url => {
+    setImage(url);
+  };
+  const onSave = () => {
+    onSelectImage(image);
+  };
+  const isActive = val => tabValue === val ? "active" : "";
+  const Comp = IMAGE_SLECTOR_OPTIONS[tabValue] || /*#__PURE__*/_jsx(_Fragment, {});
+  return open ? /*#__PURE__*/_jsxs(Dialog, {
+    open: open,
+    onClose: onClose,
+    fullWidth: true,
+    children: [/*#__PURE__*/_jsxs(DialogTitle, {
+      children: ["Add ", title]
+    }), /*#__PURE__*/_jsx(DialogContent, {
+      style: {
+        background: "#F0F5FA",
+        padding: "0px"
+      },
+      children: /*#__PURE__*/_jsxs(Grid, {
+        container: true,
+        spacing: 0,
+        style: {
+          width: "100%",
+          padding: "8px"
+        },
+        children: [/*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 4,
+          children: /*#__PURE__*/_jsxs(Tabs, {
+            sx: classes.tabs,
+            onChange: handleTabChange,
+            orientation: "vertical",
+            value: tabValue,
+            children: [/*#__PURE__*/_jsx(Tab, {
+              className: `${isActive("addLink")}`,
+              sx: classes.tab,
+              icon: /*#__PURE__*/_jsx(Icon, {
+                icon: "link"
+              }),
+              iconPosition: "start",
+              value: "addLink",
+              label: `Add ${title} Link`
+            }), /*#__PURE__*/_jsx(Tab, {
+              className: `${isActive("upload")} ${title !== "Image" ? "hidden" : ""}`,
+              sx: classes.tab,
+              icon: /*#__PURE__*/_jsx(Icon, {
+                icon: "fileUpload"
+              }),
+              iconPosition: "start",
+              value: "upload",
+              label: "Upload Media"
+            }), /*#__PURE__*/_jsx(Tab, {
+              className: `${isActive("choose")} ${title !== "Image" ? "hidden" : ""}`,
+              sx: classes.tab,
+              icon: /*#__PURE__*/_jsx(Icon, {
+                icon: "media"
+              }),
+              iconPosition: "start",
+              value: "choose",
+              label: "Choose Media"
+            })]
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 8,
+          sx: classes.imsRightWrpr,
+          children: /*#__PURE__*/_jsx(Comp, {
+            ...props,
+            onUploaded: onUploaded
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsxs(DialogActions, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: onClose,
+        children: "Cancel"
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: onSave,
+        children: "Save"
+      })]
+    })]
+  }) : null;
+};
+ImageSelector.defaultProps = {
+  title: "Image"
+};
+export default ImageSelector;

package/dist/Editor/common/ImageSelector/Options/AddLink.js

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import { Grid, IconButton, TextField, Tooltip } from "@mui/material";
+import CheckIcon from "@mui/icons-material/Check";
+import { jsx as _jsx } from "react/jsx-runtime";
+const AddLink = props => {
+  const {
+    onUploaded,
+    title
+  } = props;
+  const [url, setUrl] = useState("");
+  const handleChange = e => {
+    setUrl(e.target.value);
+  };
+  const handleSave = () => {
+    onUploaded(url);
+  };
+  return /*#__PURE__*/_jsx(Grid, {
+    item: true,
+    xs: 12,
+    className: "ims-right",
+    children: /*#__PURE__*/_jsx(TextField, {
+      placeholder: `Add ${title} URL`,
+      fullWidth: true,
+      size: "small",
+      value: url,
+      onChange: handleChange,
+      helperText: "Click Check Icon and Save...",
+      InputProps: {
+        endAdornment: /*#__PURE__*/_jsx(Tooltip, {
+          title: `Add ${Image} URL`,
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: handleSave,
+            children: /*#__PURE__*/_jsx(CheckIcon, {})
+          })
+        })
+      }
+    })
+  });
+};
+AddLink.defaultProps = {
+  title: "Image"
+};
+export default AddLink;

package/dist/Editor/common/ImageSelector/Options/ChooseAssets.js

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from "react";
+import { Grid } from "@mui/material";
+import StandardImageList from "../../ImageList";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ChooseAssets = props => {
+  const {
+    onUploaded,
+    customProps
+  } = props;
+  const {
+    readOnly,
+    services
+  } = customProps;
+  const [items, setItems] = useState([]);
+  useEffect(() => {
+    getItems();
+  }, []);
+  const getItems = async () => {
+    if (services) {
+      const result = await services("getAssets", {});
+      setItems(result);
+    }
+  };
+  const onSelectChange = img => {
+    onUploaded(img);
+  };
+  return /*#__PURE__*/_jsx(Grid, {
+    item: true,
+    xs: 12,
+    className: "ims-right",
+    children: /*#__PURE__*/_jsx(StandardImageList, {
+      itemData: [...items],
+      selected: [],
+      onSelectChange: onSelectChange,
+      readOnly: readOnly
+    })
+  });
+};
+export default ChooseAssets;

package/dist/Editor/common/ImageSelector/Options/Upload.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { Grid } from "@mui/material";
+import Uploader from "../../Uploader";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Upload = props => {
+  const {
+    value,
+    onUploaded,
+    customProps,
+    disableUpload = false
+  } = props;
+  const onDone = img => {
+    onUploaded(img);
+  };
+  return /*#__PURE__*/_jsx(Grid, {
+    item: true,
+    xs: 12,
+    className: "ims-right",
+    children: /*#__PURE__*/_jsx(Uploader, {
+      value: value,
+      data: {
+        key: "url"
+      },
+      customProps: customProps,
+      onUploaded: onDone,
+      disableUpload: disableUpload
+    })
+  });
+};
+export default Upload;