@flozy/editor 1.7.7 → 1.7.9

package/dist/Editor/CommonEditor.js

@@ -25,10 +25,10 @@ import { EditorProvider } from "./hooks/useMouseMove";
 import TopBanner from "./Elements/TopBanner/TopBanner";
 import editorStyles from "./Styles/EditorStyles";
 import DragAndDrop from "./common/DnD";
+import DragHandle from "./common/DnD/DragHandle";
 import Section from "./common/Section";
 import "animate.css";
 import decorators from "./utils/Decorators";
-import useFormat from "./utils/customHooks/useFormat";
 import useElement from "./utils/customHooks/useElement";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -128,7 +128,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     placeHolderColor: invertColor(pageColor || "#FFF")
   });
   const isListItem = useElement(editor, ["list-item", "check-list-item", "accordion-summary"]);
-  console.log(editor.selection);
   useEffect(() => {
     setValue(draftToSlate({
       data: content

package/dist/Editor/Editor.css

@@ -32,11 +32,11 @@ blockquote {
 .editor-wrapper table,
 .editor-wrapperth,
 .editor-wrapper td {
-  border: 1px solid black;
+  border: 1px solid transparent;
 }
 
 .editor-wrapper table {
-  border-collapse: collapse;
+  border-collapse: separate;
 }
 
 .editor-wrapper .editor-wrapperbutton {
@@ -397,6 +397,7 @@ blockquote {
 
 .empty-carousel-wrapper .carousel-item-inner {
   width: 100%;
+  position: relative;
 }
 
 .editor-chip-text {

package/dist/Editor/Elements/Accordion/AccordionDetails.js

@@ -9,8 +9,7 @@ const AccordionDetails = props => {
     className: `accordion-details-container`,
     ...attributes,
     style: {
-      height: "auto",
-      overflow: "hidden"
+      height: "auto"
     },
     children: children
   });

package/dist/Editor/Elements/Attachments/Attachments.js

@@ -0,0 +1,95 @@
+import React from "react";
+import { Box, Card, CardMedia, CardContent, Typography } from "@mui/material";
+import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
+import TextSnippetIcon from "@mui/icons-material/TextSnippet";
+import { formatDate } from "../../utils/helper";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Attachments = props => {
+  const {
+    attributes,
+    element,
+    children
+  } = props;
+  const {
+    url,
+    type,
+    date
+  } = element;
+  const getLastName = url?.split("/").pop();
+  const fileName = `${getLastName}`;
+  return /*#__PURE__*/_jsxs(Box, {
+    component: "div",
+    className: "attachment-wrpr-ev2",
+    ...attributes,
+    contentEditable: false,
+    style: {
+      display: "inline-flex"
+    },
+    children: [/*#__PURE__*/_jsxs(Card, {
+      style: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        width: "100%",
+        padding: "8px",
+        boxShadow: "none",
+        border: "1px solid #eae9e9",
+        backgroundColor: "#F7F7F7"
+      },
+      children: [/*#__PURE__*/_jsx(CardMedia, {
+        sx: {
+          "& svg": {
+            width: 32,
+            height: 32,
+            "&.pdf-i": {
+              fill: "#e5252a"
+            },
+            "&.doc-i": {
+              fill: "#0263d1"
+            }
+          }
+        },
+        children: type === "pdf" ? /*#__PURE__*/_jsx(PictureAsPdfIcon, {
+          className: "pdf-i"
+        }) : /*#__PURE__*/_jsx(TextSnippetIcon, {
+          className: "doc-i"
+        })
+      }), /*#__PURE__*/_jsxs(CardContent, {
+        component: "a",
+        href: url,
+        target: "_blank",
+        style: {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "start",
+          padding: "8px",
+          textDecoration: "none",
+          flexDirection: "column",
+          color: "#0F172A"
+        },
+        children: [/*#__PURE__*/_jsx(Typography, {
+          style: {
+            fontWeight: "bold",
+            color: "#0F172A",
+            fontSize: "14px"
+          },
+          component: "div",
+          children: fileName
+        }), /*#__PURE__*/_jsx(Typography, {
+          style: {
+            fontWeight: "normal",
+            color: "#64748b",
+            fontSize: "11px"
+          },
+          component: "div",
+          children: formatDate(date)
+        })]
+      })]
+    }), /*#__PURE__*/_jsx("span", {
+      contentEditable: false,
+      children: children
+    })]
+  });
+};
+export default Attachments;

package/dist/Editor/Elements/Attachments/AttachmentsButton.js

@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+import { useSlateStatic } from "slate-react";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import Icon from "../../common/Icon";
+import ImageSelector from "../../common/ImageSelector/ImageSelector";
+import { insertAttachments } from "../../utils/attachments";
+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 AttachmentsButton = props => {
+  const editor = useSlateStatic();
+  const {
+    customProps,
+    icoBtnType
+  } = props;
+  const [open, SetOpen] = useState(false);
+  const handleClick = () => {
+    SetOpen(true);
+  };
+  const onSelectImage = url => {
+    insertAttachments(editor, {
+      url
+    });
+    handleClose();
+  };
+  const handleClose = () => {
+    SetOpen(false);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ToolbarIcon, {
+      title: "Doc Upload",
+      onClick: handleClick,
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: "docsUpload"
+      }),
+      icoBtnType: icoBtnType
+    }), /*#__PURE__*/_jsx(ImageSelector, {
+      open: open,
+      onClose: handleClose,
+      customProps: customProps,
+      onSelectImage: onSelectImage,
+      title: "Document"
+    })]
+  });
+};
+export default AttachmentsButton;

package/dist/Editor/Elements/Button/EditorButton.js

@@ -114,20 +114,20 @@ const EditorButton = props => {
           onClick: onMenuClick("edit"),
           children: /*#__PURE__*/_jsx(SettingsIcon, {})
         })
-      }), /*#__PURE__*/_jsxs(Tooltip, {
+      }), /*#__PURE__*/_jsx(Tooltip, {
         title: "Open Link",
         arrow: true,
-        children: [/*#__PURE__*/_jsx(IconButton, {
+        children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onMenuClick("open"),
           children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
-        }), /*#__PURE__*/_jsx(Tooltip, {
-          title: "Delete",
-          arrow: true,
-          children: /*#__PURE__*/_jsx(IconButton, {
-            onClick: onMenuClick("delete"),
-            children: /*#__PURE__*/_jsx(DeleteIcon, {})
-          })
-        })]
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Delete",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onMenuClick("delete"),
+          children: /*#__PURE__*/_jsx(DeleteIcon, {})
+        })
       })]
     }) : null;
   };
@@ -150,15 +150,14 @@ const EditorButton = props => {
     className: "editor-btn-wrapper",
     ...attributes,
     style: {
-      display: "inline",
       textAlign: textAlign || "left"
     },
+    contentEditable: false,
     children: [/*#__PURE__*/_jsx("div", {
       className: "editor-btn-wrapper-inner",
       style: {
         display: "inline"
       },
-      contentEditable: false,
       children: /*#__PURE__*/_jsxs(Box, {
         component: "button",
         sx: {

package/dist/Editor/Elements/Carousel/Carousel.js

@@ -113,8 +113,7 @@ const Carousel = props => {
     className: "sliderBg",
     style: {
       backgroundColor: "transparent",
-      position: "relative",
-      minHeight: "300px"
+      position: "relative"
     },
     contentEditable: edit,
     onMouseOver: onMouseOver,
@@ -130,11 +129,12 @@ const Carousel = props => {
         ...settings,
         children: children.map((m, i) => {
           return /*#__PURE__*/_jsx("div", {
+            className: "item-sc",
             children: m
           }, i);
         })
       })
-    }, `slider_${children.length}`), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
+    }, `slider_${children.length}_${new Date().getTime()}`), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
   });
 };
 export default Carousel;

package/dist/Editor/Elements/Carousel/CarouselItem.js

@@ -1,16 +1,67 @@
 import React from "react";
+import { Node, Transforms } from "slate";
+import { useSlateStatic, ReactEditor } from "slate-react";
+import { Tooltip, IconButton } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const CarouselItem = props => {
   const {
+    element,
     attributes,
-    children
+    children,
+    customProps
   } = props;
+  const {
+    readOnly
+  } = customProps;
+  const editor = useSlateStatic();
+  const onMenuClick = val => () => {
+    switch (val) {
+      case "delete":
+        const path = ReactEditor.findPath(editor, element);
+        const parentSlide = Node.get(editor, [path[0]]);
+        const canDelete = parentSlide?.children?.length > 1;
+        if (canDelete) {
+          Transforms.removeNodes(editor, {
+            at: [...path]
+          });
+        }
+        return;
+      default:
+        return;
+    }
+  };
+  const Toolbar = () => {
+    return !readOnly ? /*#__PURE__*/_jsx("div", {
+      className: "element-toolbar hr",
+      style: {
+        top: "0px",
+        right: "28px"
+      },
+      contentEditable: false,
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        title: "Delete Slide",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onMenuClick("delete"),
+          children: /*#__PURE__*/_jsx(DeleteIcon, {})
+        })
+      })
+    }) : null;
+  };
   return /*#__PURE__*/_jsx("div", {
     ...attributes,
     className: "carousel-item",
-    children: /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsxs("div", {
       className: "carousel-item-inner",
-      children: children
+      style: {
+        minHeight: "50px",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      children: [children, /*#__PURE__*/_jsx(Toolbar, {})]
     })
   });
 };

package/dist/Editor/Elements/Embed/Image.js

@@ -123,7 +123,7 @@ const Image = ({
       onClick: onSettings,
       contentEditable: false,
       children: [/*#__PURE__*/_jsx(Icon, {
-        icon: "video"
+        icon: "image"
       }), "Add Image"]
     }) : /*#__PURE__*/_jsx("img", {
       style: {

package/dist/Editor/Elements/Grid/templates/carousel_item.js

@@ -0,0 +1,60 @@
+const carousel_item = itemNo => ({
+  type: "paragraph",
+  children: [{
+    type: "grid",
+    grid: "container",
+    children: [{
+      type: "grid-item",
+      grid: 12,
+      children: [{
+        type: "alignLeft",
+        children: [{
+          type: "paragraph",
+          children: [{
+            text: `Slide ${itemNo}`,
+            fontSize: "huge",
+            fontFamily: "PoppinsBold"
+          }]
+        }, {
+          type: "paragraph",
+          children: [{
+            fontSize: "16px",
+            fontFamily: "PoppinsRegular",
+            text: ""
+          }]
+        }, {
+          type: "paragraph",
+          children: [{
+            fontSize: "16px",
+            fontFamily: "PoppinsRegular",
+            text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
+          }]
+        }]
+      }],
+      bgColor: "rgba(185, 179, 179, 0)",
+      lockSpacing: true,
+      bannerSpacing: {
+        top: 16,
+        left: 16,
+        right: 16,
+        bottom: 16,
+        undefined: 16
+      },
+      alignment: {
+        horizantal: "center"
+      }
+    }],
+    alignment: {
+      flexDirection: "row"
+    },
+    lockSpacing: true,
+    bannerSpacing: {
+      top: "16",
+      left: "16",
+      right: "16",
+      bottom: "16"
+    },
+    bgColor: "rgb(102, 102, 102)"
+  }]
+});
+export default carousel_item;

package/dist/Editor/Elements/Link/Link.js

@@ -8,6 +8,7 @@ import LinkOffIcon from "@mui/icons-material/LinkOff";
 import { removeLink } from "../../utils/link";
 import LinkPopup from "./LinkPopup";
 import "./styles.css";
+import { absoluteLink } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Link = ({
@@ -25,6 +26,7 @@ const Link = ({
     showInNewTab: true
   });
   const path = ReactEditor.findPath(editor, element);
+  const absLink = absoluteLink(element.href);
   const updateLink = () => {
     Transforms.setNodes(editor, {
       href: linkData?.url,
@@ -43,7 +45,7 @@ const Link = ({
     setLinkData({
       name: Node.string(element),
       url: element?.href || "",
-      showInNewTab: true
+      showInNewTab: element?.showInNewTab
     });
     setShowInput(true);
   };
@@ -71,8 +73,8 @@ const Link = ({
       children: [/*#__PURE__*/_jsx(Tooltip, {
         title: "Open",
         children: /*#__PURE__*/_jsx(IconButton, {
-          href: element.href,
-          target: element.target,
+          href: absLink,
+          target: "_blank",
           children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
@@ -93,7 +95,7 @@ const Link = ({
   return /*#__PURE__*/_jsxs("div", {
     className: "link",
     children: [/*#__PURE__*/_jsx("a", {
-      href: element.href,
+      href: absLink,
       ...attributes,
       ...element.attr,
       target: element.target,

package/dist/Editor/Elements/List/CheckListButton.js

@@ -15,9 +15,9 @@ const CheckListButton = props => {
     children: /*#__PURE__*/_jsx(ToolbarIcon, {
       title: "Check List",
       icon: /*#__PURE__*/_jsx(Icon, {
-        icon: "checkList"
+        icon: "check-list-item"
       }),
-      onClick: handleClick("checkList")
+      onClick: handleClick("check-list-item")
     })
   });
 };

package/dist/Editor/Elements/SimpleText.js

@@ -18,7 +18,7 @@ const SimpleTextStyle = ({
       zIndex: -1,
       left: "0px",
       paddingLeft: "4px",
-      top: 0,
+      top: "-1px",
       bottom: 0,
       margin: "auto",
       pointerEvents: "none",

package/dist/Editor/Elements/Table/TableCell.js

@@ -40,7 +40,8 @@ const TableCell = props => {
   const {
     bgColor,
     borderColor,
-    entireBgColor
+    entireBgColor,
+    entireBorderColor
   } = element;
   const [parentDOM, setParentDOM] = useState(null);
   const editor = useSlateStatic();
@@ -107,7 +108,8 @@ const TableCell = props => {
   const sizeProps = isHeader ? {
     width: size?.width || tableSize?.cellWidth
   } : {};
-  const cellBorderColor = borderColor || rowProps?.borderColor || parentProps?.borderColor;
+  const cellBorderColor = borderColor || rowProps?.borderColor || parentProps?.borderColor || entireBorderColor;
+  console.log(borderColor, entireBorderColor);
   return /*#__PURE__*/_jsxs("td", {
     ...element.attr,
     ...attributes,

package/dist/Editor/Styles/EditorStyles.js

@@ -99,7 +99,7 @@ const editorStyles = ({
             width: "fit-content"
           }
         },
-        "&:before": {
+        "&.hselect:before": {
           display: "block"
         }
       },
@@ -116,7 +116,8 @@ const editorStyles = ({
         height: "calc(100% - 2px)",
         left: 0,
         top: 0,
-        border: "1px solid #2563eb",
+        border: "1px solid transparent",
+        background: "rgba(0,0,0,0.05)",
         pointerEvents: "none",
         display: "none"
       }
@@ -153,6 +154,19 @@ const editorStyles = ({
           height: "20px"
         }
       }
+    },
+    "& .tools-drawer": {
+      zIndex: 1300
+    },
+    "& .section-tw": {
+      "& button": {
+        padding: "2px",
+        borderRadius: "0px",
+        "& svg": {
+          width: "16px",
+          height: "16px"
+        }
+      }
     }
   }
 });

package/dist/Editor/Toolbar/Mini/MiniToolbar.js

@@ -75,9 +75,6 @@ const MiniToolbar = props => {
       sx: popupStyles.popupWrapper,
       className: `tools-drawer ${fullScreen ? "fullscreen" : ""}`,
       fullScreen: fullScreen,
-      style: {
-        zIndex: 1002
-      },
       children: PopupComponent ? /*#__PURE__*/_jsxs(Paper, {
         className: "papper-wrpr",
         style: {

package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js

@@ -1,7 +1,7 @@
 const usePopupStyle = () => ({
   popupWrapper: {
     boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)",
-    zIndex: 1002,
+    zIndex: 1300,
     marginBottom: "12px !important",
     border: "1px solid #E0E0E0",
     borderRadius: "10px",

package/dist/Editor/Toolbar/Toolbar.js

@@ -27,6 +27,7 @@ import InlineIconButton from "../Elements/InlineIcon/InlineIconButton";
 import EmojiButton from "../Elements/Emoji/EmojiButton.js";
 import "./styles.css";
 import TopBannerButton from "../Elements/TopBanner/TopBannerButton.js";
+import AttachmentsButton from "../Elements/Attachments/AttachmentsButton";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const RenderToolbarIcon = props => {
@@ -193,6 +194,12 @@ export const RenderToolbarIcon = props => {
           customProps: customProps,
           icoBtnType: icoBtnType
         }, element.id);
+      case "docsUpload":
+        return /*#__PURE__*/_jsx(AttachmentsButton, {
+          editor: editor,
+          customProps: customProps,
+          icoBtnType: icoBtnType
+        }, element.id);
       default:
         return null;
     }

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -152,6 +152,11 @@ export const toolbarGroups = [[{
   format: "video",
   type: "embed",
   group: "elements"
+}, {
+  id: 46,
+  format: "docsUpload",
+  type: "docsUpload",
+  group: "elements"
 }, {
   id: 44,
   lbT: "embed",

package/dist/Editor/common/ColorPickerButton.js

@@ -47,7 +47,7 @@ const ColorPickerButton = props => {
       onClose: handleClose,
       sx: {
         "& .MuiPaper-root": {
-          overflow: "hidden"
+          overflow: "auto"
         }
       },
       children: /*#__PURE__*/_jsx(Grid, {
@@ -56,10 +56,12 @@ const ColorPickerButton = props => {
         children: /*#__PURE__*/_jsxs(Grid, {
           item: true,
           xs: 12,
-          children: [/*#__PURE__*/_jsx(ColorPickerTool, {
-            gradient: true,
-            value: color,
-            onChange: setColor
+          children: [/*#__PURE__*/_jsx("div", {
+            children: /*#__PURE__*/_jsx(ColorPickerTool, {
+              gradient: true,
+              value: color,
+              onChange: setColor
+            })
           }), /*#__PURE__*/_jsxs("div", {
             style: {
               display: "flex",

package/dist/Editor/common/DnD/DragHandle.js

@@ -7,11 +7,10 @@ import { useEditorContext } from "../../hooks/useMouseMove";
 import { Transforms } from "slate";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const DRAGGABLE_TYPES = ["paragraph"];
+const DRAGGABLE_TYPES = ["paragraph", "headingOne"];
 const DragHandleStyle = () => ({
   root: {
     position: "relative",
-    paddingLeft: "20px",
     "&:hover": {
       "& > .dh-para:first-child": {
         opacity: 1
@@ -73,9 +72,15 @@ const DragHandle = props => {
   } = element;
   useEffect(() => {
     if (moved) {
-      Transforms.removeNodes(editor, {
-        at: path
-      });
+      const upPath = ReactEditor.findPath(editor, element);
+      try {
+        alert(upPath);
+        Transforms.removeNodes(editor, {
+          at: upPath
+        });
+      } catch (err) {
+        console.log(err, upPath);
+      }
     }
   }, [moved]);
   const handleOnDrag = isDragging => {

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

@@ -21,8 +21,8 @@ const DragAndDrop = ({
         active,
         over
       } = e;
-      const fromPath = active.id.split("_")[1].split("|");
-      const toPath = over.id.split("_")[1].split("|");
+      const fromPath = active.id.split("_")[1].split("|").map(m => parseInt(m));
+      const toPath = over.id.split("_")[1].split("|").map(m => parseInt(m));
       const toCloneNode = JSON.stringify(Node.get(editor, fromPath));
       // set moved node delete
       Transforms.setNodes(editor, {

package/dist/Editor/common/Icon.js

@@ -7,7 +7,7 @@ import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutline
 import { SiLatex } from "react-icons/si";
 import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
 import { IoIosImage, IoMdArrowDroprightCircle, IoMdArrowDropdownCircle } from "react-icons/io";
-import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage } from "./iconslist";
+import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload } from "./iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const iconList = {
@@ -182,7 +182,8 @@ const iconList = {
     size: 20
   }),
   appHeader: /*#__PURE__*/_jsx(AppHeader, {}),
-  moreHorizantal: /*#__PURE__*/_jsx(MoreHorizontal, {})
+  moreHorizantal: /*#__PURE__*/_jsx(MoreHorizontal, {}),
+  docsUpload: /*#__PURE__*/_jsx(DocsUpload, {})
 };
 const Icon = props => {
   const {

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

@@ -13,6 +13,12 @@ const IMAGE_SLECTOR_OPTIONS = {
   choose: ChooseAssets,
   addLink: AddLink
 };
+const TAB_SHOW = {
+  Image: ["upload", "choose", "addLink"],
+  Video: ["addLink"],
+  Embed: ["addLink"],
+  Document: ["addLink", "upload"]
+};
 const ImageSelector = props => {
   const classes = ImageSelectorStyles();
   const {
@@ -25,6 +31,7 @@ const ImageSelector = props => {
   const [tabValue, setTabValue] = useState(title === "Image" ? "choose" : "addLink");
   const [image, setImage] = useState(value || "");
   const handleTabChange = (e, newValue) => {
+    setImage("");
     setTabValue(newValue);
   };
   const onUploaded = url => {
@@ -60,7 +67,7 @@ const ImageSelector = props => {
             orientation: "vertical",
             value: tabValue,
             children: [/*#__PURE__*/_jsx(Tab, {
-              className: `${isActive("upload")} ${title !== "Image" ? "hidden" : ""}`,
+              className: `${isActive("upload")} ${TAB_SHOW[title].indexOf("upload") === -1 ? "hidden" : ""}`,
               sx: classes.tab,
               icon: /*#__PURE__*/_jsx(Icon, {
                 icon: "fileUpload"
@@ -69,7 +76,7 @@ const ImageSelector = props => {
               value: "upload",
               label: "Upload Media"
             }), /*#__PURE__*/_jsx(Tab, {
-              className: `${isActive("choose")} ${title !== "Image" ? "hidden" : ""}`,
+              className: `${isActive("choose")} ${TAB_SHOW[title].indexOf("choose") === -1 ? "hidden" : ""}`,
               sx: classes.tab,
               icon: /*#__PURE__*/_jsx(Icon, {
                 icon: "media"
@@ -78,7 +85,7 @@ const ImageSelector = props => {
               value: "choose",
               label: "Choose Media"
             }), /*#__PURE__*/_jsx(Tab, {
-              className: `${isActive("addLink")}`,
+              className: `${isActive("addLink")} ${TAB_SHOW[title].indexOf("addLink") === -1 ? "hidden" : ""}`,
               sx: classes.tab,
               icon: /*#__PURE__*/_jsx(Icon, {
                 icon: "link"
@@ -109,8 +116,9 @@ const ImageSelector = props => {
         sx: classes.closeBtn,
         children: "Cancel"
       }), /*#__PURE__*/_jsx(Button, {
+        disabled: !image,
         onClick: onSave,
-        className: "primaryBtn",
+        className: `primaryBtn ${!image ? "disabled" : ""}`,
         sx: classes.saveBtn,
         children: "Save"
       })]

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

@@ -8,7 +8,8 @@ const Upload = props => {
     value,
     onUploaded,
     customProps,
-    disableUpload = false
+    disableUpload = false,
+    title
   } = props;
   const onDone = img => {
     onUploaded(img);
@@ -28,7 +29,8 @@ const Upload = props => {
       },
       customProps: customProps,
       onUploaded: onDone,
-      disableUpload: disableUpload
+      disableUpload: disableUpload,
+      title: title
     })
   });
 };

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

@@ -1,7 +1,7 @@
 const usePopupStyles = () => ({
   root: {
     position: "absolute",
-    zIndex: 1000,
+    zIndex: 1300,
     background: "white",
     borderRadius: "10px",
     padding: "0px",

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

@@ -119,6 +119,7 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
     disablePortal: false,
     sx: classes.root,
     placement: "bottom-start",
+    className: "cmd-wrapper",
     children: /*#__PURE__*/_jsx(Paper, {
       sx: classes.papper,
       children: chars.map(renderList)

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

@@ -47,8 +47,13 @@ const Section = props => {
     setOpenSettings(true);
   };
   const Toolbar = () => {
-    return !readOnly ? /*#__PURE__*/_jsx("div", {
-      className: "element-toolbar ss hr",
+    return !readOnly ? /*#__PURE__*/_jsx(Box, {
+      component: "div",
+      className: "element-toolbar ss hr section-tw",
+      style: {
+        left: "20px",
+        top: "0px"
+      },
       children: /*#__PURE__*/_jsx(Tooltip, {
         title: "Section Settings",
         children: /*#__PURE__*/_jsx(IconButton, {
@@ -83,15 +88,15 @@ const Section = props => {
   } : {};
   return path.length === 1 ? /*#__PURE__*/_jsxs(Box, {
     component: "section",
-    className: "ed-section-wrapper",
+    className: `ed-section-wrapper ${readOnly ? "" : "hselect"}`,
     style: {
       position: "relative",
       background: sectionBgColor,
       ...sectionBgImage,
       paddingLeft: `${ssleft}px`,
       paddingRight: `${ssright}px`,
-      paddingTop: `${sstop}px`,
-      paddingBottom: `${ssbottom}px`,
+      paddingTop: `${sstop || 2}px`,
+      paddingBottom: `${ssbottom || 2}px`,
       borderRadius: `${ssTopLeft}px ${ssTopRight}px ${ssBottomLeft}px ${ssBottomRight}px`,
       flexDirection: flexDirection || "column",
       alignItems: horizantal,

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

@@ -75,7 +75,7 @@ const ELEMENTS_LIST = [{
   desc: "",
   group: "List",
   icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "checkList"
+    icon: "check-list-item"
   }),
   onInsert: editor => toggleBlock(editor, "check-list-item", false)
 }, {
@@ -101,7 +101,7 @@ const ELEMENTS_LIST = [{
   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")
+  onInsert: editor => insertDefaultEmbed(editor, "video", "")
 }, {
   name: "Emoji",
   group: "Elements",

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

@@ -28,7 +28,7 @@ const buttonStyle = [{
     width: 5,
     placeholder: "16px or 1em"
   }, {
-    label: "Text Align",
+    label: "Alignment",
     key: "textAlign",
     type: "textAlign",
     placeholder: "16px or 1em"
@@ -58,14 +58,6 @@ const buttonStyle = [{
     key: "buttonLink",
     type: "buttonLink"
   }]
-}, {
-  tab: "Position",
-  value: "position",
-  fields: [{
-    label: "Alignment",
-    key: "alignment",
-    type: "alignment"
-  }]
 }, {
   tab: "Banner Spacing",
   value: "bannerSpacing",

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

@@ -10,7 +10,8 @@ const TextAlign = props => {
     onChange
   } = props;
   const {
-    key
+    key,
+    label
   } = data;
   const handleChange = e => {
     onChange({
@@ -30,7 +31,7 @@ const TextAlign = props => {
             fontWeight: 500,
             fontSize: "14px"
           },
-          children: "Text Alignment"
+          children: label || "Text Alignment"
         })
       }), /*#__PURE__*/_jsxs(RadioGroup, {
         row: true,

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

@@ -83,6 +83,9 @@ const StyleBuilder = props => {
     className: ` dialogComp tools-drawer`,
     anchor: "right",
     onClose: onClose,
+    style: {
+      zIndex: "1300"
+    },
     children: /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,

package/dist/Editor/common/Uploader.js

@@ -1,24 +1,28 @@
 import React, { useState } from "react";
-import { Grid, Button } from "@mui/material";
+import { Grid, Button, Typography } from "@mui/material";
 import { convertBase64 } from "../utils/helper";
 import { uploadFile } from "../service/fileupload";
 import Icon from "./Icon";
 import UploadStyles from "../common/ImageSelector/UploadStyles";
 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 Uploader = props => {
   const {
     value,
     onUploaded,
-    customProps
+    customProps,
+    title
   } = props;
   const classes = UploadStyles();
   const [base64, setBase64] = useState(value?.url);
+  const [fileName, setFileName] = useState("");
   const [uploading, setUploading] = useState(false);
   const handleChange = async e => {
     const uFile = e.target.files[0];
     const strImage = await convertBase64(uFile);
     setBase64(strImage);
+    setFileName(uFile?.name);
     doUpload(strImage, e.target.files[0]);
   };
   const doUpload = async (strImage, file) => {
@@ -38,6 +42,44 @@ const Uploader = props => {
     setBase64(null);
     onUploaded("none");
   };
+  const getBackground = () => {
+    switch (title) {
+      case "Document":
+        return {
+          backgroundImage: `url()`
+        };
+      default:
+        return {
+          backgroundImage: base64 ? `url(${base64})` : "none"
+        };
+    }
+  };
+  const renderThumb = () => {
+    switch (title) {
+      case "Document":
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Typography, {
+            style: {
+              padding: "8px",
+              fontSize: "12px",
+              color: "#2563eb",
+              textAlign: "center"
+            },
+            children: fileName
+          }), /*#__PURE__*/_jsx(Grid, {
+            className: "removeImageText",
+            onClick: onRemoveBG,
+            children: "REMOVE"
+          })]
+        });
+      default:
+        return /*#__PURE__*/_jsx(Grid, {
+          className: "removeImageText",
+          onClick: onRemoveBG,
+          children: "REMOVE"
+        });
+    }
+  };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     sx: classes.uploadContainer,
@@ -50,16 +92,12 @@ const Uploader = props => {
       xs: 12,
       className: "btn--wrpr",
       style: {
-        backgroundImage: base64 ? `url(${base64})` : "none"
+        ...getBackground()
       },
       sx: classes.uploadField,
       children: !uploading ? /*#__PURE__*/_jsx(Grid, {
         className: "uploadImageSection",
-        children: base64 ? /*#__PURE__*/_jsx(Grid, {
-          className: "removeImageText",
-          onClick: onRemoveBG,
-          children: "REMOVE"
-        }) : /*#__PURE__*/_jsx(Grid, {
+        children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
           className: "uploadImageText",
           children: /*#__PURE__*/_jsxs(Button, {
             component: "label",
@@ -77,11 +115,11 @@ const Uploader = props => {
               onChange: handleChange
             }), /*#__PURE__*/_jsx(Icon, {
               icon: "fileUpload"
-            }), /*#__PURE__*/_jsx("span", {
+            }), /*#__PURE__*/_jsxs("span", {
               style: {
                 paddingLeft: "8px"
               },
-              children: "upload your image"
+              children: ["upload ", title || "image"]
             })]
           })
         })

package/dist/Editor/common/iconslist.js

@@ -765,32 +765,32 @@ export const DocsUpload = props => /*#__PURE__*/_jsxs("svg", {
   fill: "none",
   children: [/*#__PURE__*/_jsx("path", {
     d: "M6.14453 0.855469V3.14118C6.14453 3.29274 6.20474 3.43808 6.3119 3.54524C6.41906 3.65241 6.56441 3.71261 6.71596 3.71261H9.00167",
-    stroke: "#828282",
-    strokeWidth: "0.7",
+    stroke: "#64748B",
+    strokeWidth: "1",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }), /*#__PURE__*/_jsx("path", {
     d: "M7.85714 11.1412H2.14286C1.83975 11.1412 1.54906 11.0208 1.33474 10.8064C1.12041 10.5921 1 10.3014 1 9.99833V1.99833C1 1.69522 1.12041 1.40453 1.33474 1.1902C1.54906 0.975877 1.83975 0.855469 2.14286 0.855469H6.14286L9 3.71261V9.99833C9 10.3014 8.87959 10.5921 8.66527 10.8064C8.45094 11.0208 8.16025 11.1412 7.85714 11.1412Z",
-    stroke: "#828282",
-    strokeWidth: "0.7",
+    stroke: "#64748B",
+    strokeWidth: "1",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }), /*#__PURE__*/_jsx("path", {
     d: "M3.28516 4.28516H3.85658",
-    stroke: "#828282",
-    strokeWidth: "0.7",
+    stroke: "#64748B",
+    strokeWidth: "1",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }), /*#__PURE__*/_jsx("path", {
     d: "M3.28516 6.57031H6.71373",
-    stroke: "#828282",
-    strokeWidth: "0.7",
+    stroke: "#64748B",
+    strokeWidth: "1",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }), /*#__PURE__*/_jsx("path", {
     d: "M3.28516 8.85547H6.71373",
-    stroke: "#828282",
-    strokeWidth: "0.7",
+    stroke: "#64748B",
+    strokeWidth: "1",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   })]

package/dist/Editor/service/fileupload.js

@@ -3,7 +3,6 @@ export const uploadFile = async (formData, props) => {
     const response = await fetch(`${props.API_HOST}/general/notes/file_upload`, {
       method: "POST",
       headers: {
-        // "Content-Type": "application/json",
         Authorization: `Bearer ${props.token}`
       },
       body: formData

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -33,6 +33,7 @@ import EmbedLink from "../Elements/Embed/link";
 import SimpleText from "../Elements/SimpleText";
 import CheckList from "../Elements/List/CheckList";
 import { isEmptyTextNode } from "../helper";
+import Attachments from "../Elements/Attachments/Attachments";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter"];
 const list_types = ["orderedList", "unorderedList"];
@@ -287,7 +288,8 @@ export const getBlock = props => {
           background: element?.bgColor || "none",
           padding: `${element?.bgColor ? "16px" : "0px"} 8px`,
           borderRadius: `${element?.color ? "0px" : "12px"} 12px 12px ${element?.color ? "0px" : "12px"}`,
-          margin: `${element?.bgColor ? "16px" : "0px"} 0px`
+          margin: `${element?.bgColor ? "16px" : "0px"} 0px`,
+          width: element?.bgColor ? "calc(100% - 16px)" : "100%"
         },
         children: children
       });
@@ -319,7 +321,8 @@ export const getBlock = props => {
           display: "flex",
           alignItems: "flex-end",
           listStylePosition: "inside",
-          flexDirection: "column"
+          flexDirection: "column",
+          textAlign: "right"
         },
         ...attributes,
         ...element.attr,
@@ -470,6 +473,11 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx(EmbedLink, {
         ...props
       });
+    case "docs":
+    case "pdf":
+      return /*#__PURE__*/_jsx(Attachments, {
+        ...props
+      });
     default:
       return /*#__PURE__*/_jsx(SimpleText, {
         ...props,
@@ -478,10 +486,19 @@ export const getBlock = props => {
   }
 };
 export const getQueryStrings = urlString => {
-  const newUrl = new URL(urlString);
-  var youCode = newUrl.searchParams.get("v");
-  if (!youCode) {
-    youCode = newUrl.pathname.replace("/", "");
+  try {
+    if (urlString && urlString?.indexOf("/embed") === -1) {
+      const newUrl = new URL(urlString);
+      var youCode = newUrl.searchParams.get("v");
+      if (!youCode) {
+        youCode = newUrl.pathname.replace("/", "");
+      }
+      return `https://www.youtube.com/embed/${youCode}`;
+    } else {
+      return urlString;
+    }
+  } catch (err) {
+    console.log(err);
+    return urlString;
   }
-  return `https://www.youtube.com/embed/${youCode}`;
 };

package/dist/Editor/utils/attachments.js

@@ -0,0 +1,35 @@
+import { Transforms } from "slate";
+import insertNewLine from "./insertNewLine";
+const createAttachmentsNode = ({
+  type,
+  url
+}) => {
+  return {
+    type: type || "docs",
+    url,
+    date: new Date().getTime(),
+    width: "100%",
+    height: "300px",
+    children: [{
+      text: ""
+    }]
+  };
+};
+export const insertAttachments = (editor, data) => {
+  try {
+    const {
+      url
+    } = data;
+    if (url) {
+      const attachmentsNode = createAttachmentsNode({
+        ...data,
+        type: url?.split(".").pop() === "pdf" ? "pdf" : "docs"
+      });
+      console.log(attachmentsNode);
+      Transforms.insertNodes(editor, [attachmentsNode]);
+      insertNewLine(editor);
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};

package/dist/Editor/utils/button.js

@@ -1,4 +1,5 @@
 import { Transforms } from "slate";
+import insertNewLine from "./insertNewLine";
 export const insertButton = editor => {
   const button = {
     type: "button",
@@ -26,4 +27,5 @@ export const insertButton = editor => {
   };
   Transforms.insertNodes(editor, button);
   Transforms.move(editor);
+  insertNewLine(editor);
 };

package/dist/Editor/utils/carouselItem.js

@@ -1,13 +1,11 @@
 import { Transforms } from "slate";
+import carousel_item from "../Elements/Grid/templates/carousel_item";
 export const carouselItem = (itemNo = "") => {
   return {
     type: "carousel-item",
     image: null,
     children: [{
-      type: "paragraph",
-      children: [{
-        text: `Slide ${itemNo}`
-      }]
+      ...carousel_item(itemNo)
     }]
   };
 };

package/dist/Editor/utils/events.js

@@ -110,7 +110,7 @@ export const escapeEvent = props => {
     const {
       editor
     } = props;
-    const list_types = ["orderedList", "unorderedList", "checkList"];
+    const list_types = ["orderedList", "unorderedList", "check-list-item"];
     const parentPath = Path.ancestors(editor.selection.anchor.path);
     const parentNodes = parentPath.filter(m => m.length).map(m => Node.get(editor, m));
     if (parentNodes.length === 2 && parentNodes[1]?.type === "list-item") {

package/dist/Editor/utils/helper.js

@@ -41,4 +41,15 @@ export const gradientBorder = color => {
       borderColor: color || "transparent"
     };
   }
+};
+export const absoluteLink = url => {
+  try {
+    if (url?.indexOf("://") === -1) {
+      return `//${url}`;
+    }
+    return url;
+  } catch (err) {
+    console.log(err);
+    return url;
+  }
 };

package/dist/Editor/utils/table.js

@@ -219,17 +219,36 @@ export class TableUtil {
         });
 
         // cell bg entire
-        if (cellProps?.entireBgColor) {
+        if (cellProps?.entireBgColor || tableProps?.borderColor) {
           const {
-            rows
+            rows,
+            columns
           } = tableProps;
           for (let r = 0; r < rows; r++) {
-            Transforms.setNodes(this.editor, {
-              ...cellProps,
-              entireBgColor: cellProps?.entireBgColor
-            }, {
-              at: [currentCellPath[0], r, currentCellPath[2]]
-            });
+            for (let c = 0; c < columns; c++) {
+              Transforms.setNodes(this.editor, {
+                entireBgColor: cellProps?.entireBgColor
+              }, {
+                at: [currentCellPath[0], r, currentCellPath[2]]
+              });
+            }
+          }
+        }
+
+        // cell border all
+        if (tableProps?.borderColor) {
+          const {
+            rows,
+            columns
+          } = tableProps;
+          for (let r = 0; r < rows; r++) {
+            for (let c = 0; c < columns; c++) {
+              Transforms.setNodes(this.editor, {
+                entireBorderColor: tableProps?.borderColor
+              }, {
+                at: [currentCellPath[0], r, c]
+              });
+            }
           }
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "1.7.7",
+  "version": "1.7.9",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"