@flozy/editor 1.6.0 → 1.6.1

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;

package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js

@@ -1,10 +1,7 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { Grid, Button, Typography } from "@mui/material";
-// import CloudUploadIcon from "@mui/icons-material/CloudUpload";
-import { convertBase64 } from "../../../utils/helper";
-import { uploadFile } from "../../../service/fileupload";
 import { UploadBtnIcon } from "../../iconslist";
-import QuiltedImageList from "../../ImageList";
+import ImageSelector from "../../ImageSelector/ImageSelector";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BackgroundImage = props => {
@@ -12,71 +9,35 @@ const BackgroundImage = props => {
     value,
     data,
     customProps,
-    elementProps,
     onChange
   } = props;
-  const {
-    services
-  } = customProps;
   const {
     key
   } = data;
-  const {
-    images
-  } = elementProps;
   const [base64, setBase64] = useState(value);
-  const [uploading, setUploading] = useState(false);
-  const [items, setItems] = useState([]);
-  useEffect(() => {
-    getItems();
-  }, []);
-  const getItems = async () => {
-    if (services) {
-      let result = await services("getAssets", {});
-      setItems(result);
-    }
-  };
-  const handleChange = async e => {
-    const file = e.target.files[0];
-    const strImage = await convertBase64(file);
-    setBase64(strImage);
-    doUpload(strImage);
-  };
-  const doUpload = async strImage => {
-    setUploading(true);
-    const result = await uploadFile({
-      image: strImage
-    }, customProps);
-    setUploading(false);
-    if (result && result?.imageURL) {
-      onChange({
-        [key]: result?.imageURL
-      });
-    }
-  };
+  const [open, setOpen] = useState(false);
   const onRemoveBG = () => {
     setBase64(null);
     onChange({
       [key]: "none"
     });
   };
-  const onSelectChange = (img, status) => {
-    const uImages = !status ? [...images]?.filter(f => f.img !== img) : [...images, {
-      img
-    }];
+  const handleClick = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const onSelectImage = img => {
+    setBase64(img);
     onChange({
-      images: uImages,
-      url: uImages.length === 1 ? uImages[0].img : "",
-      alt: ""
+      [key]: img
     });
+    handleClose();
   };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
-    children: [/*#__PURE__*/_jsx(Grid, {
-      item: true,
-      xs: 12,
-      children: uploading ? "Uploading..." : ""
-    }), /*#__PURE__*/_jsx(Typography, {
+    children: [/*#__PURE__*/_jsx(Typography, {
       variant: "body1",
       color: "primary",
       sx: {
@@ -115,14 +76,8 @@ const BackgroundImage = props => {
             style: {
               background: "none"
             },
-            children: [/*#__PURE__*/_jsx("input", {
-              type: "file",
-              style: {
-                opacity: 0,
-                width: "0px"
-              },
-              onChange: handleChange
-            }), /*#__PURE__*/_jsx(UploadBtnIcon, {}), /*#__PURE__*/_jsx("span", {
+            onClick: handleClick,
+            children: [/*#__PURE__*/_jsx(UploadBtnIcon, {}), /*#__PURE__*/_jsx("span", {
               style: {
                 paddingLeft: "8px"
               },
@@ -131,18 +86,11 @@ const BackgroundImage = props => {
           })
         })
       })
-    }), /*#__PURE__*/_jsx(Grid, {
-      item: true,
-      xs: 12,
-      style: {
-        marginBottom: "12px"
-      },
-      children: /*#__PURE__*/_jsx(QuiltedImageList, {
-        itemData: [...items],
-        cols: 2,
-        selected: images,
-        onSelectChange: onSelectChange
-      })
+    }), /*#__PURE__*/_jsx(ImageSelector, {
+      open: open,
+      onClose: handleClose,
+      customProps: customProps,
+      onSelectImage: onSelectImage
     })]
   });
 };

package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { FormControl, RadioGroup, FormControlLabel, Grid, Radio, TextField, Select, MenuItem, Typography } from "@mui/material";
+import { FormControl, RadioGroup, FormControlLabel, Grid, Radio, TextField, Typography } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ButtonLink = props => {
@@ -27,12 +27,10 @@ const ButtonLink = props => {
     actionTrigger
   } = buttonLink || {};
   const {
-    options,
     onClick
   } = actionTrigger || {
     options: []
   };
-  const optSelected = options.filter(f => f.selected) || [];
   const handleChange = e => {
     onChange({
       [key]: {
@@ -61,22 +59,7 @@ const ButtonLink = props => {
         })
       });
     } else if (value?.linkType === "actionTrigger") {
-      return /*#__PURE__*/_jsx(Grid, {
-        item: true,
-        xs: 12,
-        children: /*#__PURE__*/_jsx(Select, {
-          name: "actionStep",
-          size: "small",
-          fullWidth: true,
-          value: optSelected[0]?.value || "",
-          children: optSelected.map(m => {
-            return /*#__PURE__*/_jsx(MenuItem, {
-              value: m.value,
-              children: m.label
-            }, `bl_tr_opt_${m.value}`);
-          })
-        })
-      });
+      return null;
     }
   };
   return /*#__PURE__*/_jsxs(Grid, {
@@ -110,7 +93,7 @@ const ButtonLink = props => {
               style: {
                 fontSize: "14px"
               },
-              children: "Action Trigger"
+              children: "Next Step"
             })
           }), /*#__PURE__*/_jsx(FormControlLabel, {
             value: "webAddress",

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

@@ -123,7 +123,6 @@ const StyleBuilder = props => {
   };
   return /*#__PURE__*/_jsx(Drawer, {
     open: true,
-    fullWidth: true,
     className: ` dialogComp tools-drawer`,
     anchor: "right",
     hideBackdrop: true,

package/dist/Editor/common/StyleBuilder/tableStyle.js

@@ -6,7 +6,7 @@ const tableStyle = [{
     key: "table.bgColor",
     type: "color"
   }, {
-    label: "Border",
+    label: "Cell Border",
     key: "table.borderColor",
     type: "color"
   }]
@@ -14,11 +14,11 @@ const tableStyle = [{
   tab: "Row",
   value: "rowSettings",
   fields: [{
-    label: "Background",
+    label: "Row Background",
     key: "row.bgColor",
     type: "color"
   }, {
-    label: "Border",
+    label: "Row Border",
     key: "row.borderColor",
     type: "color"
   }]
@@ -26,11 +26,15 @@ const tableStyle = [{
   tab: "Column",
   value: "columnSettings",
   fields: [{
-    label: "Background",
+    label: "Entire Column Background",
+    key: "col.entireBgColor",
+    type: "color"
+  }, {
+    label: "Selected Column Background",
     key: "col.bgColor",
     type: "color"
   }, {
-    label: "Border",
+    label: "Selected Cell Border Color",
     key: "col.borderColor",
     type: "color"
   }]

package/dist/Editor/common/ToolbarIcon.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { Tooltip, IconButton } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ToolbarIcon = props => {
+  const {
+    title,
+    className,
+    onClick,
+    icon,
+    style,
+    icoBtnType
+  } = props;
+  const renderIconText = () => {
+    if (icoBtnType === "mini") {
+      return /*#__PURE__*/_jsx("span", {
+        children: title
+      });
+    } else if (icoBtnType === "cmd") {
+      return /*#__PURE__*/_jsx("span", {
+        children: title
+      });
+    }
+    return null;
+  };
+  return /*#__PURE__*/_jsx(Tooltip, {
+    title: title,
+    arrow: true,
+    children: /*#__PURE__*/_jsxs(IconButton, {
+      className: `${className} ${icoBtnType}`,
+      onClick: onClick,
+      style: style,
+      children: [icon, renderIconText()]
+    })
+  });
+};
+ToolbarIcon.defaultProps = {
+  title: "",
+  style: {},
+  className: "",
+  onClick: () => {}
+};
+export default ToolbarIcon;

package/dist/Editor/common/Uploader.js

@@ -18,16 +18,19 @@ const Uploader = props => {
   const [base64, setBase64] = useState(value?.url);
   const [uploading, setUploading] = useState(false);
   const handleChange = async e => {
-    const file = e.target.files[0];
-    const strImage = await convertBase64(file);
+    const uFile = e.target.files[0];
+    const strImage = await convertBase64(uFile);
     setBase64(strImage);
-    doUpload(strImage);
+    doUpload(strImage, e.target.files[0]);
   };
-  const doUpload = async strImage => {
+  const doUpload = async (strImage, file) => {
     setUploading(true);
-    const result = await uploadFile({
-      image: strImage
-    }, customProps);
+    const formData = new FormData();
+    // formData.set("image", strImage);
+    formData.set("file", file);
+    formData.set("resource_type", "pages");
+    formData.set("resource_id", customProps?.page_id);
+    const result = await uploadFile(formData, customProps);
     setUploading(false);
     if (result && result?.imageURL) {
       onUploaded({