@flozy/editor 1.5.9 → 1.6.1

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

@@ -0,0 +1,94 @@
+import React, { useEffect, useState } from "react";
+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,
+    onUploaded,
+    customProps,
+    disableUpload = false
+  } = props;
+  const {
+    readOnly,
+    services
+  } = customProps;
+  const [newData, setNewData] = useState([]);
+  const [selected, setSelected] = useState([]);
+  const [items, setItems] = useState([]);
+  useEffect(() => {
+    getItems();
+  }, []);
+  const getItems = async () => {
+    if (services) {
+      const result = await services("getAssets", {});
+      setItems(result);
+    }
+  };
+  const onDone = img => {
+    const imgs = Array.isArray(img) ? img.map(m => {
+      return {
+        img: m
+      };
+    }) : [{
+      img: img.url
+    }];
+    setNewData([...imgs, ...newData]);
+  };
+  const onSelectChange = (img, status) => {
+    const updatedSelected = !status ? [...selected]?.filter(f => f.img !== img) : [...selected, {
+      img
+    }];
+    setSelected(updatedSelected);
+    onUploaded({
+      images: updatedSelected,
+      url: updatedSelected[0]?.img,
+      alt: ""
+    });
+  };
+  const UploaderComp = () => {
+    return /*#__PURE__*/_jsx(Uploader, {
+      value: value,
+      data: {
+        key: "url"
+      },
+      customProps: customProps,
+      onUploaded: onDone,
+      disableUpload: disableUpload
+    });
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    container: true,
+    sx: {
+      pt: 1
+    },
+    spacing: 1,
+    children: [/*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 3,
+      children: /*#__PURE__*/_jsx(UploaderComp, {})
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 9,
+      children: /*#__PURE__*/_jsx("div", {
+        style: {
+          height: "400px",
+          overflow: "auto",
+          display: "flex",
+          justifyContent: "center"
+        },
+        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;

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

@@ -0,0 +1,129 @@
+import React, { useEffect, useState, useRef, forwardRef, useImperativeHandle } from "react";
+import { Transforms } from "slate";
+import { ReactEditor, useSlateStatic } from "slate-react";
+import { insertMention } from "../../utils/mentions";
+import ElementListCard from "./ElementsListCard";
+import MentionsListCard from "./MentionsListCard";
+import { Typography, Popper, Box, Paper } from "@mui/material";
+import usePopupStyle from "./Styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const POPUP_LIST_TYPES = {
+  mentions: MentionsListCard,
+  elements: ElementListCard
+};
+const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
+  const classes = usePopupStyle();
+  const papperRef = useRef(null);
+  const buttonRef = useRef(null);
+  const editor = useSlateStatic();
+  const {
+    index,
+    target,
+    chars,
+    mentions,
+    setMentions,
+    type
+  } = props;
+  const ListElement = POPUP_LIST_TYPES[type] || null;
+  const [anchorEl, setAnchorEl] = useState(null);
+  let open = Boolean(anchorEl);
+  let prevGroup = "";
+  useEffect(() => {
+    if (target && chars.length > 0) {
+      const domRange = ReactEditor.toDOMRange(editor, target);
+      const rect = domRange.getBoundingClientRect();
+      setAnchorEl({
+        clientWidth: rect.width,
+        clientHeight: rect.height,
+        getBoundingClientRect: () => rect
+      });
+    }
+  }, [chars.length, editor, index, target]);
+  useEffect(() => {
+    if (papperRef && papperRef?.current) {
+      papperRef.current.scrollIntoView(false, {
+        block: "center"
+      });
+    }
+  }, [index]);
+  useImperativeHandle(ref, () => ({
+    handleOnSelect: char => {
+      handleInsertMention(char);
+    }
+  }));
+  const renderGroupHeader = char => {
+    if (prevGroup !== char.group && char.group) {
+      prevGroup = char.group;
+      return /*#__PURE__*/_jsx(Typography, {
+        sx: classes.groupHeader,
+        component: "div",
+        variant: "h6",
+        children: prevGroup
+      });
+    } else {
+      return null;
+    }
+  };
+  const renderList = (char, i) => {
+    return /*#__PURE__*/_jsxs(Box, {
+      component: "div",
+      sx: classes.renderComp,
+      children: [renderGroupHeader(char), /*#__PURE__*/_jsx(Box, {
+        id: `cmd-li-ind-${index}}`,
+        component: "div",
+        onClick: handleClick(char, i),
+        className: `${i === index ? "active" : " "} ${char.renderComponent ? "renderComp" : ""}`,
+        sx: classes.listItem,
+        ref: i === index ? papperRef : null,
+        children: char.renderComponent ? char.renderComponent({
+          ref: index === i ? buttonRef : null,
+          selectionTarget: target
+        }) : ListElement ? /*#__PURE__*/_jsx(ListElement, {
+          classes: classes,
+          data: char,
+          header: prevGroup
+        }) : char.name
+      })]
+    }, `${char.name}_${i}`);
+  };
+  const handleClick = (char, i) => e => {
+    setMentions({
+      ...mentions,
+      index: i
+    });
+    // TBD
+    setTimeout(() => {
+      handleInsertMention(char, e);
+    }, 0);
+  };
+  const handleInsertMention = (char, e) => {
+    if (!char.renderComponent) {
+      Transforms.select(editor, target);
+      insertMention(editor, char, type);
+      setMentions({
+        ...mentions,
+        target: null
+      });
+    } else if (buttonRef && buttonRef?.current) {
+      if (e) {
+        e.preventDefault();
+      }
+      // trigger click of the ToolbarIcon button
+      buttonRef?.current?.triggerClick(target);
+    }
+  };
+  return target && chars.length > 0 ? /*#__PURE__*/_jsx(Popper, {
+    open: open,
+    anchorEl: anchorEl,
+    disablePortal: false,
+    sx: classes.root,
+    placement: "bottom-start",
+    children: /*#__PURE__*/_jsx(Paper, {
+      sx: classes.papper,
+      children: chars.map(renderList)
+    })
+  }) : null;
+});
+MentionsPopup.displayName = "MentionsPopup";
+export default MentionsPopup;

package/dist/Editor/common/Shorthands/elements.js

@@ -0,0 +1,191 @@
+import { insertAccordion } from "../../utils/accordion";
+import { insertButton } from "../../utils/button";
+import { insertCarousel } from "../../utils/carousel";
+import { insertDefaultEmbed } from "../../utils/embed";
+import { insertForm } from "../../utils/form";
+import { insertGrid } from "../../utils/grid";
+import { insertSignature } from "../../utils/signature";
+import { toggleBlock } from "../../utils/SlateUtilityFunctions";
+import { TableUtil } from "../../utils/table";
+import Icon from "../Icon";
+import EmojiButton from "../../Elements/Emoji/EmojiButton";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ELEMENTS_LIST = [{
+  name: "Heading 1",
+  desc: "",
+  group: "Text",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "headingOne"
+  }),
+  onInsert: editor => toggleBlock(editor, "headingOne", false)
+}, {
+  name: "Heading 2",
+  desc: "",
+  group: "Text",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "headingTwo"
+  }),
+  onInsert: editor => toggleBlock(editor, "headingTwo", false)
+}, {
+  name: "Heading 3",
+  desc: "",
+  group: "Text",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "headingThree"
+  }),
+  onInsert: editor => toggleBlock(editor, "headingThree", false)
+}, {
+  name: "Quote",
+  desc: "",
+  group: "Text",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "blockquote"
+  }),
+  onInsert: editor => toggleBlock(editor, "blockquote", false, {
+    color: "rgb(47, 94, 188)"
+  })
+}, {
+  name: "Colorbox",
+  desc: "",
+  group: "Text",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "blockquote"
+  }),
+  onInsert: editor => toggleBlock(editor, "blockquote", false, {
+    bgColor: "rgb(227, 236, 255)"
+  })
+}, {
+  name: "Ordered List",
+  desc: "",
+  group: "List",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "orderedList"
+  }),
+  onInsert: editor => toggleBlock(editor, "orderedList", false)
+}, {
+  name: "Un-Ordered List",
+  desc: "",
+  group: "List",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "unorderedList"
+  }),
+  onInsert: editor => toggleBlock(editor, "unorderedList", false)
+}, {
+  name: "Check List",
+  desc: "",
+  group: "List",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "checkList"
+  }),
+  onInsert: editor => toggleBlock(editor, "checkList", false)
+}, {
+  name: "Image",
+  desc: "",
+  group: "Media",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "image"
+  }),
+  onInsert: editor => insertDefaultEmbed(editor, "image")
+}, {
+  name: "Video",
+  desc: "",
+  group: "Media",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "video"
+  }),
+  onInsert: editor => insertDefaultEmbed(editor, "video")
+}, {
+  name: "Embed",
+  desc: "",
+  group: "Media",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "embed"
+  }),
+  onInsert: editor => insertDefaultEmbed(editor, "video", "https://calendly.com/agenciflow/1-1-agency-scale-clone?hide_event_type_details=1&month=2024-03")
+}, {
+  name: "Emoji",
+  group: "Elements",
+  desc: "",
+  renderComponent: rest => /*#__PURE__*/_jsx(EmojiButton, {
+    ...rest,
+    icoBtnType: "cmd"
+  })
+}, {
+  name: "Table",
+  group: "Elements",
+  desc: "",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "table"
+  }),
+  onInsert: editor => {
+    const table = new TableUtil(editor);
+    table.insertTable(3, 3);
+  }
+}, {
+  name: "Grid",
+  group: "Elements",
+  desc: "",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "grid"
+  }),
+  onInsert: editor => {
+    insertGrid(editor);
+  }
+}, {
+  name: "Accordion",
+  group: "Elements",
+  desc: "",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "accordion"
+  }),
+  onInsert: editor => {
+    insertAccordion(editor);
+  }
+}, {
+  name: "Button",
+  group: "Elements",
+  desc: "",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "button"
+  }),
+  onInsert: editor => {
+    insertButton(editor);
+  }
+}, {
+  name: "Signature",
+  group: "Elements",
+  desc: "",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "signature"
+  }),
+  onInsert: editor => {
+    insertSignature(editor);
+  }
+}, {
+  name: "Carousel",
+  group: "Elements",
+  desc: "",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "carousel"
+  }),
+  onInsert: editor => {
+    insertCarousel(editor);
+  }
+}, {
+  name: "Form",
+  group: "Elements",
+  desc: "",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "form"
+  }),
+  onInsert: editor => {
+    insertForm(editor);
+  }
+}];
+const elements = props => {
+  const {
+    search
+  } = props;
+  return ELEMENTS_LIST.filter(c => c.name.toLowerCase().includes(search?.toLowerCase()));
+};
+export default elements;

package/dist/Editor/common/Shorthands/index.js

@@ -0,0 +1,7 @@
+import mentions from "./mentions";
+import elements from "./elements";
+const Shorthands = {
+  mentions: mentions,
+  elements: elements
+};
+export default Shorthands;

package/dist/Editor/common/Shorthands/mentions.js

@@ -0,0 +1,8 @@
+const mentions = props => {
+  const {
+    CHARACTERS,
+    search
+  } = props;
+  return CHARACTERS.filter(c => c.name.toLowerCase().startsWith(search?.toLowerCase())).slice(0, 10);
+};
+export default mentions;