@flozy/editor 1.7.8 → 1.8.0

package/dist/Editor/CommonEditor.js

@@ -346,11 +346,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
           onChange: handleEditorChange,
           children: [/*#__PURE__*/_jsx(DragAndDrop, {
             children: /*#__PURE__*/_jsx(Overlay, {
-              children: /*#__PURE__*/_jsxs(Box, {
+              children: /*#__PURE__*/_jsx(Box, {
                 className: `${hasTopBanner() ? "has-topbanner" : ""}`,
                 sx: classes.slateWrapper,
                 id: "slate-wrapper-scroll-container",
-                children: [/*#__PURE__*/_jsxs(Box, {
+                children: /*#__PURE__*/_jsxs(Box, {
                   component: "div",
                   className: "max-content",
                   children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
@@ -397,15 +397,16 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                   }), !readOnly ? /*#__PURE__*/_jsx(MiniToolbar, {
                     customProps: customProps,
                     toolbarOptions: toolbarOptions
-                  }) : null]
-                }), readOnly && /*#__PURE__*/_jsx(Typography, {
-                  sx: {
-                    color: "rgb(100, 116, 139)",
-                    fontSize: "13px"
-                  },
-                  align: "center",
-                  children: footer
-                })]
+                  }) : null, footer && /*#__PURE__*/_jsx(Typography, {
+                    sx: {
+                      color: "rgb(100, 116, 139)",
+                      fontSize: "13px",
+                      paddingBottom: "12px"
+                    },
+                    align: "center",
+                    children: footer
+                  })]
+                })
               })
             })
           }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {

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 {

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 = `${decodeURI(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/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,
@@ -135,7 +134,7 @@ const Carousel = props => {
           }, 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,5 +1,5 @@
 import React from "react";
-import { Transforms } from "slate";
+import { Node, Transforms } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { Tooltip, IconButton } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
@@ -16,13 +16,17 @@ const CarouselItem = props => {
     readOnly
   } = customProps;
   const editor = useSlateStatic();
-  const path = ReactEditor.findPath(editor, element);
   const onMenuClick = val => () => {
     switch (val) {
       case "delete":
-        Transforms.removeNodes(editor, {
-          at: [...path]
-        });
+        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;
@@ -32,8 +36,10 @@ const CarouselItem = props => {
     return !readOnly ? /*#__PURE__*/_jsx("div", {
       className: "element-toolbar hr",
       style: {
-        top: "0px"
+        top: "0px",
+        right: "28px"
       },
+      contentEditable: false,
       children: /*#__PURE__*/_jsx(Tooltip, {
         title: "Delete Slide",
         arrow: true,
@@ -50,7 +56,10 @@ const CarouselItem = props => {
     children: /*#__PURE__*/_jsxs("div", {
       className: "carousel-item-inner",
       style: {
-        minHeight: "50px"
+        minHeight: "50px",
+        display: "block",
+        justifyContent: "center",
+        alignItems: "center"
       },
       children: [children, /*#__PURE__*/_jsx(Toolbar, {})]
     })

package/dist/Editor/Elements/Color Picker/Styles.js

@@ -19,8 +19,8 @@ const ColorPickerStyles = () => ({
         position: "absolute",
         top: "-4px",
         left: "-4px",
-        width: "calc(100% + 4px)",
-        height: "calc(100% + 4px)",
+        width: "calc(100% + 8px)",
+        height: "calc(100% + 8px)",
         border: "2px solid #2563EB",
         borderRadius: "50%"
       }

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,
@@ -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/SimpleText.js

@@ -3,6 +3,7 @@ import { useSlateStatic, useSelected, ReactEditor } from "slate-react";
 import { Box } from "@mui/material";
 import { getPageSettings } from "../utils/pageSettings";
 import { invertColor } from "../helper";
+import { isTextSelected } from "../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SimpleTextStyle = ({
@@ -68,8 +69,9 @@ const SimpleText = props => {
   });
   const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);
-  const showPlaceHolder = !readOnly && path.length === 1 && isEmpty && selected;
+  const showPlaceHolder = !readOnly && path.length === 1 && isEmpty;
   const isEmptyEditor = !readOnly && isEmpty && editor.children.length === 1 && !selected;
+  const opacity = !isTextSelected(editor?.selection);
   return /*#__PURE__*/_jsxs(Box, {
     ...element.attr,
     ...attributes,
@@ -77,7 +79,7 @@ const SimpleText = props => {
     sx: classes.root,
     children: [children, /*#__PURE__*/_jsx("span", {
       className: "placeholder-simple-text",
-      children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? "Type / to browse elements" : ""
+      children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? "Type / to browse elements" : "" : ""
     })]
   });
 };

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,7 @@ 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;
   return /*#__PURE__*/_jsxs("td", {
     ...element.attr,
     ...attributes,

package/dist/Editor/MiniEditor.js

@@ -1,12 +1,15 @@
 import React, { useCallback, useRef, useState } from "react";
 import { createEditor } from "slate";
-import { Slate, Editable, withReact } from "slate-react";
+import { Slate, Editable } from "slate-react";
 import { getBlock, getMarked } from "./utils/SlateUtilityFunctions";
 import { commands, mentionsEvent } from "./utils/events";
 import useMentions from "./hooks/useMentions";
 import Shorthands from "./common/Shorthands";
-// import withCommon from "./hooks/withCommon";
+import BasicToolbar from "./Toolbar/Basic";
+import withCommon from "./hooks/withCommon";
+import "./Editor.css";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const initialValue = [{
   type: "paragraph",
   children: [{
@@ -21,6 +24,7 @@ const MiniEditor = props => {
     // editor: collaborativeEditor,
     readOnly,
     miniEditorPlaceholder,
+    toolbars,
     otherProps
   } = props;
   const {
@@ -28,13 +32,9 @@ const MiniEditor = props => {
     // needLayout = true,
   } = otherProps || {};
   const mentionsRef = useRef();
-  const [editor] = useState(() => withReact(createEditor()));
-
-  // const editor = useMemo(() => {
-  //     if (collaborativeEditor) return collaborativeEditor;
-  //     return withCommon(createEditor(), { needLayout });
-  // }, [collaborativeEditor]);
-
+  const [editor] = useState(() => withCommon(createEditor(), {
+    needLayout: false
+  }));
   const isReadOnly = readOnly === "readonly";
   const customProps = {
     ...(otherProps || {}),
@@ -102,14 +102,16 @@ const MiniEditor = props => {
       customProps: customProps
     });
   }, []);
-  return /*#__PURE__*/_jsx(Slate, {
+  return /*#__PURE__*/_jsxs(Slate, {
     editor: editor,
     initialValue: initialValue,
-    children: /*#__PURE__*/_jsx(Editable, {
+    children: [/*#__PURE__*/_jsx(BasicToolbar, {
+      toolbars: toolbars || []
+    }), /*#__PURE__*/_jsx(Editable, {
       renderElement: renderElement,
       renderLeaf: renderLeaf,
       onKeyDown: onKeyDown
-    })
+    })]
   });
 };
 MiniEditor.displayName = "MiniEditor";

package/dist/Editor/Toolbar/Basic/index.js

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import { useSlateStatic } from "slate-react";
+import { Box, Tooltip } from "@mui/material";
+import { toolbarGroups } from "../toolbarGroups";
+import { MarkButton } from "../FormatTools";
+import LinkButton from "../../Elements/Link/LinkButton";
+import { addMarkData, isBlockActive } from "../../utils/SlateUtilityFunctions";
+import ColorPickerButton from "../../common/ColorPickerButton";
+import { colors } from "../../Elements/Color Picker/defaultColors";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const allTools = toolbarGroups.flat();
+const BasicToolbar = ({
+  toolbars
+}) => {
+  const editor = useSlateStatic();
+
+  // state
+  const [activeColor, setActiveColor] = useState("#000000");
+  const fontStyle = allTools.filter(f => f.basic);
+  const link = allTools.find(f => f.format?.indexOf("link") >= 0);
+  const handleTextColor = color => {
+    setActiveColor(color);
+    addMarkData(editor, {
+      format: 'color',
+      value: color
+    });
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    component: 'div',
+    className: "basic-toolbar",
+    children: [fontStyle?.map((m, i) => {
+      return /*#__PURE__*/_jsx(MarkButton, {
+        editor: editor,
+        ...m
+      }, `pptool_mark_${i}_${m.id}`);
+    }), /*#__PURE__*/_jsx(LinkButton, {
+      active: isBlockActive(editor, link.format),
+      editor: editor
+    }, link.id), /*#__PURE__*/_jsx(Tooltip, {
+      arrow: true,
+      title: "Current Color",
+      children: /*#__PURE__*/_jsx(ColorPickerButton, {
+        value: activeColor || "#0000",
+        onSave: color => {
+          handleTextColor(color);
+        },
+        defaultColors: colors
+      })
+    })]
+  });
+};
+export default BasicToolbar;

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

@@ -45,12 +45,14 @@ export const toolbarGroups = [[{
   id: 3,
   format: "bold",
   type: "mark",
-  title: "Bold"
+  title: "Bold",
+  basic: true
 }, {
   id: 4,
   format: "italic",
   type: "mark",
-  title: "Italic"
+  title: "Italic",
+  basic: true
 }, {
   id: 5,
   format: "underline",
@@ -152,6 +154,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

@@ -1,14 +1,15 @@
 import React, { useState } from "react";
 import { Grid, Button, Popover } from "@mui/material";
-// import ColorPicker from "react-best-gradient-color-picker";
 import ColorPickerTool from "react-gcolor-picker";
+import { colors } from "../Elements/Color Picker/defaultColors";
 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 ColorPickerButton = props => {
   const {
     value,
-    onSave
+    onSave,
+    defaultColors = []
   } = props;
   const [anchorEl, setAnchorEl] = useState(null);
   const [color, setColor] = useState(value);
@@ -47,7 +48,7 @@ const ColorPickerButton = props => {
       onClose: handleClose,
       sx: {
         "& .MuiPaper-root": {
-          overflow: "hidden"
+          overflow: "auto"
         }
       },
       children: /*#__PURE__*/_jsx(Grid, {
@@ -56,10 +57,13 @@ 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,
+              defaultColors: defaultColors || []
+            })
           }), /*#__PURE__*/_jsxs("div", {
             style: {
               display: "flex",
@@ -81,4 +85,7 @@ const ColorPickerButton = props => {
     })]
   });
 };
+ColorPickerButton.defaultProps = {
+  defaultColors: [...colors]
+};
 export default ColorPickerButton;

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/Shorthands/elements.js

@@ -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/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/helper/index.js

@@ -76,8 +76,11 @@ export function getEmbedURL(element) {
 }
 export const isEmptyTextNode = element => {
   try {
-    const showPlaceholder = element?.children?.filter(f => HIDE_PLACHOLDERS.indexOf(f.type) > -1).length === 0;
-    return Node.string(element)?.length === 0 && showPlaceholder;
+    if (element) {
+      const showPlaceholder = element?.children?.filter(f => HIDE_PLACHOLDERS.indexOf(f.type) > -1).length === 0;
+      return Node.string(element)?.length === 0 && showPlaceholder;
+    }
+    return false;
   } catch (err) {
     console.log(err);
     return false;

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"];
@@ -472,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,
@@ -481,7 +487,7 @@ export const getBlock = props => {
 };
 export const getQueryStrings = urlString => {
   try {
-    if (urlString) {
+    if (urlString && urlString?.indexOf("/embed") === -1) {
       const newUrl = new URL(urlString);
       var youCode = newUrl.searchParams.get("v");
       if (!youCode) {

package/dist/Editor/utils/attachments.js

@@ -0,0 +1,34 @@
+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"
+      });
+      Transforms.insertNodes(editor, [attachmentsNode]);
+      insertNewLine(editor);
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};

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/helper.js

@@ -41,4 +41,34 @@ 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;
+  }
+};
+export const isTextSelected = selection => {
+  try {
+    const {
+      anchor,
+      focus
+    } = selection || {};
+    if (anchor && focus) {
+      if (JSON.stringify(anchor?.path) !== JSON.stringify(focus?.path)) {
+        return true;
+      }
+      return false;
+    } else {
+      return false;
+    }
+  } catch (err) {
+    console.log(err);
+    return false;
+  }
 };

package/dist/Editor/utils/serializeToHTML.js

@@ -1,5 +1,22 @@
-import { Node } from "slate";
+import { renderToString } from "react-dom/server";
+import { getBlock } from "./SlateUtilityFunctions";
 const serializeToHTML = nodes => {
-  return nodes.map(n => Node.string(n)).join("\n");
+  try {
+    const htmlString = nodes.map(n => {
+      if (n) {
+        const props = {
+          element: n,
+          children: n?.children
+        };
+        const reactString = renderToString(getBlock(props));
+        return reactString;
+      } else {
+        return "";
+      }
+    });
+    console.log(htmlString);
+  } catch (err) {
+    console.log(err);
+  }
 };
 export default serializeToHTML;

package/dist/Editor/utils/table.js

@@ -219,19 +219,36 @@ export class TableUtil {
         });
 
         // cell bg entire
-        if (cellProps?.entireBgColor) {
+        if (cellProps?.entireBgColor || tableProps?.borderColor || rowProps?.borderColor) {
           const {
             rows
           } = tableProps;
           for (let r = 0; r < rows; r++) {
             Transforms.setNodes(this.editor, {
-              ...cellProps,
               entireBgColor: cellProps?.entireBgColor
             }, {
               at: [currentCellPath[0], r, currentCellPath[2]]
             });
           }
         }
+
+        // cell border all
+        if (tableProps?.borderColor || rowProps?.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,
+                rowBorder: rowProps?.borderColor
+              }, {
+                at: [currentCellPath[0], r, c]
+              });
+            }
+          }
+        }
       }
     } catch (err) {
       console.log(err);

package/package.json

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