@flozy/editor 1.6.0 → 1.6.2

package/dist/Editor/common/ImageList.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+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";
@@ -12,15 +12,18 @@ function srcset(image, size, rows = 1, cols = 1) {
 const QuiltedImageList = props => {
   const {
     itemData,
-    selected,
     onSelectChange,
     readOnly,
     cols,
     rowHeight,
     uploaderComp: UploaderComp
   } = props;
-  const onImageSelect = (item, status) => () => {
-    onSelectChange(item?.img, status);
+  const [selected, setSelected] = useState([]);
+  const onImageSelect = item => () => {
+    setSelected([{
+      img: item.img
+    }]);
+    onSelectChange(item.img);
   };
   return /*#__PURE__*/_jsxs(ImageList, {
     sx: {
@@ -30,6 +33,9 @@ const QuiltedImageList = props => {
     variant: "quilted",
     cols: cols || 4,
     rowHeight: rowHeight || 121,
+    style: {
+      marginTop: "0px"
+    },
     children: [UploaderComp ? /*#__PURE__*/_jsx(ImageListItem, {
       className: "img_upload_btn_list",
       cols: 2,

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;

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

@@ -0,0 +1,41 @@
+const ImageSelectorStyles = () => ({
+  root: {},
+  tabs: {
+    "& button": {
+      fontSize: "14px",
+      textTransform: "capitalize",
+      padding: "12px",
+      alignItems: "start",
+      justifyContent: "start",
+      minHeight: "auto",
+      "&.hidden": {
+        display: "none"
+      },
+      "&.active": {
+        backgroundColor: "#FFF"
+      },
+      "&:hover": {
+        backgroundColor: "#ECECEC"
+      },
+      "& svg": {
+        marginRight: "8px",
+        width: "16px",
+        height: "16px"
+      }
+    },
+    "& .MuiTabs-indicator": {
+      left: 0
+    }
+  },
+  tab: {},
+  imsRightWrpr: {
+    height: "300px",
+    overflow: "auto",
+    backgroundColor: "#fff",
+    padding: "8px",
+    "& .MuiFormHelperText-root": {
+      marginLeft: "0px"
+    }
+  }
+});
+export default ImageSelectorStyles;

package/dist/Editor/common/ImageUploader.js

@@ -3,6 +3,7 @@ import { Grid } from "@mui/material";
 import Uploader from "./Uploader";
 import StandardImageList from "./ImageList";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const ImageUploader = props => {
   const {
     value,
@@ -27,9 +28,14 @@ const ImageUploader = props => {
     }
   };
   const onDone = img => {
-    setNewData([{
+    const imgs = Array.isArray(img) ? img.map(m => {
+      return {
+        img: m
+      };
+    }) : [{
       img: img.url
-    }, ...newData]);
+    }];
+    setNewData([...imgs, ...newData]);
   };
   const onSelectChange = (img, status) => {
     const updatedSelected = !status ? [...selected]?.filter(f => f.img !== img) : [...selected, {
@@ -53,15 +59,19 @@ const ImageUploader = props => {
       disableUpload: disableUpload
     });
   };
-  return /*#__PURE__*/_jsx(Grid, {
+  return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     sx: {
       pt: 1
     },
     spacing: 1,
-    children: /*#__PURE__*/_jsx(Grid, {
+    children: [/*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 3,
+      children: /*#__PURE__*/_jsx(UploaderComp, {})
+    }), /*#__PURE__*/_jsx(Grid, {
       item: true,
-      xs: 12,
+      xs: 9,
       children: /*#__PURE__*/_jsx("div", {
         style: {
           height: "400px",
@@ -69,15 +79,16 @@ const ImageUploader = props => {
           display: "flex",
           justifyContent: "center"
         },
-        children: /*#__PURE__*/_jsx(StandardImageList, {
-          uploaderComp: UploaderComp,
+        children: /*#__PURE__*/_jsx(StandardImageList
+        // uploaderComp={UploaderComp}
+        , {
           itemData: [...newData, ...items],
           selected: selected,
           onSelectChange: onSelectChange,
           readOnly: readOnly
         })
       })
-    })
+    })]
   });
 };
 export default ImageUploader;

package/dist/Editor/common/MentionsPopup/ElementsListCard.js

@@ -0,0 +1,66 @@
+import React from "react";
+import Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import CardMedia from "@mui/material/CardMedia";
+import Typography from "@mui/material/Typography";
+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 ElementListCard = props => {
+  const {
+    classes,
+    data
+  } = props;
+  const {
+    name,
+    desc,
+    icon
+  } = data;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs(Card, {
+      sx: {
+        display: "flex",
+        width: "324px",
+        justifyContent: "start",
+        alignItems: "center",
+        background: "transparent",
+        boxShadow: "none"
+      },
+      children: [/*#__PURE__*/_jsx(CardMedia, {
+        component: "div",
+        sx: classes.cardMedia,
+        alt: name,
+        children: icon
+      }), /*#__PURE__*/_jsx(Box, {
+        sx: {
+          display: "flex",
+          flexDirection: "column"
+        },
+        children: /*#__PURE__*/_jsxs(CardContent, {
+          sx: {
+            flex: "1 0 auto",
+            padding: "8px !important"
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            component: "div",
+            variant: "h6",
+            style: {
+              fontSize: "14px"
+            },
+            children: name
+          }), /*#__PURE__*/_jsx(Typography, {
+            variant: "subtitle1",
+            color: "text.secondary",
+            component: "div",
+            style: {
+              fontSize: "12px"
+            },
+            children: desc
+          })]
+        })
+      })]
+    })
+  });
+};
+export default ElementListCard;

package/dist/Editor/common/MentionsPopup/MentionsListCard.js

@@ -0,0 +1,70 @@
+import React from "react";
+import Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import CardMedia from "@mui/material/CardMedia";
+import Typography from "@mui/material/Typography";
+import { Avatar } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const MentionsListCard = props => {
+  const {
+    data
+  } = props;
+  const {
+    name,
+    email
+  } = data;
+  return /*#__PURE__*/_jsxs(Card, {
+    sx: {
+      display: "flex",
+      width: "324px",
+      justifyContent: "start",
+      alignItems: "center",
+      background: "transparent",
+      boxShadow: "none"
+    },
+    children: [/*#__PURE__*/_jsx(CardMedia, {
+      component: "div",
+      sx: {
+        width: 46,
+        height: 46,
+        margin: "8px",
+        borderRadius: "4px",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      alt: name,
+      children: /*#__PURE__*/_jsx(Avatar, {})
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: "flex",
+        flexDirection: "column"
+      },
+      children: /*#__PURE__*/_jsxs(CardContent, {
+        sx: {
+          flex: "1 0 auto",
+          padding: "8px !important"
+        },
+        children: [/*#__PURE__*/_jsx(Typography, {
+          component: "div",
+          variant: "h6",
+          style: {
+            fontSize: "14px"
+          },
+          children: name
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "subtitle1",
+          color: "text.secondary",
+          component: "div",
+          style: {
+            fontSize: "12px"
+          },
+          children: email
+        })]
+      })
+    })]
+  });
+};
+export default MentionsListCard;

package/dist/Editor/common/MentionsPopup/Styles.js

@@ -0,0 +1,68 @@
+const usePopupStyles = () => ({
+  root: {
+    position: "absolute",
+    zIndex: 1000,
+    background: "white",
+    borderRadius: "0px",
+    padding: "0px",
+    boxShadow: "0 4px 10px rgba(0,0,0,.2)"
+  },
+  papper: {
+    boxShadow: "none",
+    width: "300px",
+    height: "300px",
+    overflow: "auto",
+    padding: "8px",
+    margin: "0px"
+  },
+  groupHeader: {
+    padding: "10px 8px",
+    marginBottom: "10px",
+    fontSize: "14px",
+    fontWeight: "bold",
+    borderBottom: "1px solid #DCE4EC"
+  },
+  listItem: {
+    padding: "4px",
+    cursor: "pointer",
+    background: "transparent",
+    "&.active": {
+      background: "rgba(55, 53, 47, 0.08)"
+    },
+    "&:hover": {
+      background: "rgba(55, 53, 47, 0.08)"
+    },
+    "&.renderComp": {
+      padding: "0px",
+      "& button.cmd": {
+        // to invalidate click event of toolbar icon
+        // will trigger by forard ref
+        pointerEvents: "none",
+        width: "100%",
+        padding: "4px",
+        borderRadius: "0px",
+        justifyContent: "start",
+        "& svg": {
+          margin: "8px",
+          width: "24px",
+          height: "24px"
+        },
+        span: {
+          padding: "8px",
+          fontSize: "14px",
+          fontWeight: "500",
+          color: "rgba(0, 0, 0, 0.87)"
+        }
+      }
+    }
+  },
+  cardMedia: {
+    width: 24,
+    height: 24,
+    margin: "8px",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});
+export default usePopupStyles;