@flozy/editor 1.8.2 → 1.8.3

package/dist/Editor/CommonEditor.js

@@ -114,6 +114,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     bannerSpacing,
     pageBgImage,
     pageColor,
+    color: pageTextColor,
     pageWidth
   } = pageSt?.pageProps || {
     bannerSpacing: {
@@ -356,7 +357,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                   children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
                     className: "scroll-area",
                     style: {
-                      backgroundColor: pageColor || "#FFF"
+                      background: pageColor || "#FFF",
+                      color: pageTextColor || "#000000"
                     },
                     children: /*#__PURE__*/_jsxs("div", {
                       ref: editorWrapper,

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

@@ -3,6 +3,7 @@ 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 Icon from "../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Attachments = props => {
@@ -52,6 +53,8 @@ const Attachments = props => {
         },
         children: type === "pdf" ? /*#__PURE__*/_jsx(PictureAsPdfIcon, {
           className: "pdf-i"
+        }) : type === "xls" ? /*#__PURE__*/_jsx(Icon, {
+          icon: "excelIcon"
         }) : /*#__PURE__*/_jsx(TextSnippetIcon, {
           className: "doc-i"
         })

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

@@ -1,7 +1,6 @@
 import React from "react";
 import { IconButton } from "@mui/material";
-import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
-import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+import Icon from "../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const PrevArrow = props => {
   const {
@@ -17,7 +16,9 @@ export const PrevArrow = props => {
     },
     onClick: onClick,
     contentEditable: false,
-    children: /*#__PURE__*/_jsx(ArrowBackIosIcon, {})
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: "leftArrow"
+    })
   });
 };
 export const NextArrow = props => {
@@ -34,6 +35,8 @@ export const NextArrow = props => {
     },
     onClick: onClick,
     contentEditable: false,
-    children: /*#__PURE__*/_jsx(ArrowForwardIosIcon, {})
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: "rightArrow"
+    })
   });
 };

package/dist/Editor/Elements/Carousel/slick-theme.min.css

@@ -91,8 +91,8 @@
 .slick-dots li {
   position: relative;
   display: inline-block;
-  width: 20px;
-  height: 20px;
+  width: 10px;
+  height: 10px;
   margin: 0 5px;
   padding: 0;
   cursor: pointer;
@@ -103,8 +103,8 @@
   font-size: 0;
   line-height: 0;
   display: block;
-  width: 20px;
-  height: 20px;
+  width: 10px;
+  height: 10px;
   padding: 5px;
   cursor: pointer;
   color: transparent;
@@ -120,24 +120,7 @@
 .slick-dots li button:hover:before {
   opacity: 1;
 }
-.slick-dots li button:before {
-  font-size: 6px;
-  line-height: 20px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 20px;
-  height: 20px;
-  content: "•";
-  text-align: center;
-  opacity: 0.25;
-  color: #000;
-}
-.slick-dots li.slick-active button:before {
-  opacity: 0.75;
-  color: #000;
-}
 
 .slick-dots li.slick-active {
-  background-color: rgba(0,0,0,0.75);
+  background-color: #2563EB;
 }

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

@@ -31,8 +31,14 @@ const carousel_item = itemNo => ({
           }]
         }]
       }],
-      bgColor: "rgba(185, 179, 179, 0)",
+      bgColor: "#ECF4FF",
       lockSpacing: true,
+      borderRadius: {
+        topLeft: 8,
+        topRight: 8,
+        bottomRight: 8,
+        bottomLeft: 8
+      },
       bannerSpacing: {
         top: 16,
         left: 16,
@@ -41,7 +47,7 @@ const carousel_item = itemNo => ({
         undefined: 16
       },
       alignment: {
-        horizantal: "center"
+        horizontal: "center"
       }
     }],
     alignment: {
@@ -54,7 +60,7 @@ const carousel_item = itemNo => ({
       right: "16",
       bottom: "16"
     },
-    bgColor: "#ECF4FF"
+    bgColor: "transparent"
   }]
 });
 export default carousel_item;

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

@@ -2,8 +2,8 @@ import React from "react";
 import { ReactEditor, useReadOnly, useSlateStatic } from "slate-react";
 import { Transforms } from "slate";
 import { Checkbox, FormControlLabel } from "@mui/material";
-import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
-import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import Icon from "../../common/Icon";
+import CheckListStyle from "./CheckListStyles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const CheckList = ({
@@ -14,6 +14,7 @@ const CheckList = ({
 }) => {
   const editor = useSlateStatic();
   const readOnly = useReadOnly();
+  const classes = CheckListStyle();
   const {
     checked
   } = element;
@@ -38,8 +39,13 @@ const CheckList = ({
       className: "checkbox-edit",
       children: [/*#__PURE__*/_jsx(FormControlLabel, {
         control: /*#__PURE__*/_jsx(Checkbox, {
-          icon: /*#__PURE__*/_jsx(CheckCircleOutlineIcon, {}),
-          checkedIcon: /*#__PURE__*/_jsx(CheckCircleIcon, {}),
+          icon: /*#__PURE__*/_jsx(Icon, {
+            icon: "checkListButton"
+          }),
+          checkedIcon: /*#__PURE__*/_jsx(Icon, {
+            icon: "checkListButtonActive"
+          }),
+          sx: classes.checkBoxHover,
           checked: checked,
           onChange: handleCheck
         })

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

@@ -0,0 +1,12 @@
+const CheckListStyle = () => ({
+  checkBoxHover: {
+    "&:hover": {
+      "& svg": {
+        "& rect": {
+          stroke: "#2563EB"
+        }
+      }
+    }
+  }
+});
+export default CheckListStyle;

package/dist/Editor/Elements/Variables/Style.js

@@ -0,0 +1,12 @@
+const VariableStyles = () => ({
+  variablesItem: {
+    color: "#2563EB",
+    background: "#EEEEEE"
+  },
+  variableSelectBtn: {
+    height: "31px",
+    borderRadius: "10px",
+    marginLeft: "8px"
+  }
+});
+export default VariableStyles;

package/dist/Editor/Elements/Variables/Variable.js

@@ -0,0 +1,27 @@
+import React from "react";
+import VariableStyles from "./Style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Variables = props => {
+  const classes = VariableStyles();
+  const {
+    attributes,
+    element,
+    children
+  } = props;
+  const {
+    name
+  } = element;
+  return /*#__PURE__*/_jsxs("span", {
+    ...attributes,
+    contentEditable: false,
+    children: [/*#__PURE__*/_jsx("span", {
+      className: `variables-item`,
+      style: classes.variablesItem,
+      children: `{{${name}}}`
+    }), /*#__PURE__*/_jsx("span", {
+      children: children
+    })]
+  });
+};
+export default Variables;

package/dist/Editor/Elements/Variables/VariableButton.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { useSlateStatic } from "slate-react";
+import { MenuItem, Select } from "@mui/material";
+import { insertVariables } from "../../utils/variables";
+import VariableStyles from "./Style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const VariableButton = props => {
+  const classes = VariableStyles();
+  const editor = useSlateStatic();
+  const {
+    options
+  } = props;
+  const updateVariable = e => {
+    insertVariables(editor, {
+      name: e.target.value
+    });
+  };
+  return /*#__PURE__*/_jsxs(Select, {
+    labelId: "variable-selection",
+    id: "variable-selection-mini",
+    displayEmpty: true,
+    value: '',
+    sx: classes.variableSelectBtn,
+    onChange: updateVariable,
+    children: [/*#__PURE__*/_jsx(MenuItem, {
+      value: "",
+      children: /*#__PURE__*/_jsx("em", {
+        children: "Variables"
+      })
+    }), (options || []).map((item, index) => /*#__PURE__*/_jsx(MenuItem, {
+      value: item.key,
+      children: item.label
+    }, `mini-edit-sele-${index}`))]
+  });
+};
+VariableButton.defaultProps = {
+  options: []
+};
+export default VariableButton;

package/dist/Editor/MiniEditor.js

@@ -24,7 +24,6 @@ const MiniEditor = props => {
     // editor: collaborativeEditor,
     readOnly,
     miniEditorPlaceholder,
-    toolbars,
     otherProps
   } = props;
   const {
@@ -106,7 +105,7 @@ const MiniEditor = props => {
     editor: editor,
     initialValue: initialValue,
     children: [/*#__PURE__*/_jsx(BasicToolbar, {
-      toolbars: toolbars || []
+      ...props
     }), /*#__PURE__*/_jsx(Editable, {
       renderElement: renderElement,
       renderLeaf: renderLeaf,

package/dist/Editor/Styles/EditorStyles.js

@@ -170,12 +170,9 @@ const editorStyles = ({
     },
     "& .slick-arrow": {
       borderRadius: "50%",
-      backgroundColor: "#FFF",
+      backgroundColor: "#F8FAFF",
       textAlign: "center",
-      "& svg": {
-        width: "16px",
-        height: "16px"
-      }
+      border: "1px solid #CFD8F5"
     }
   }
 });

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

@@ -7,14 +7,20 @@ 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 VariableButton from "../../Elements/Variables/VariableButton";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const allTools = toolbarGroups.flat();
-const BasicToolbar = ({
-  toolbars
-}) => {
+const BasicToolbar = props => {
   const editor = useSlateStatic();
 
+  // props
+  const {
+    otherProps: {
+      variableOptions
+    }
+  } = props;
+
   // state
   const [activeColor, setActiveColor] = useState("#000000");
   const fontStyle = allTools.filter(f => f.basic);
@@ -38,8 +44,7 @@ const BasicToolbar = ({
       active: isBlockActive(editor, link.format),
       editor: editor
     }, link.id), /*#__PURE__*/_jsx(Tooltip, {
-      arrow: true,
-      title: "Current Color",
+      title: "Font Color",
       children: /*#__PURE__*/_jsx(ColorPickerButton, {
         value: activeColor || "#0000",
         onSave: color => {
@@ -47,7 +52,13 @@ const BasicToolbar = ({
         },
         defaultColors: colors
       })
+    }), variableOptions && variableOptions.length > 0 && /*#__PURE__*/_jsx(VariableButton, {
+      placeholder: "Variables",
+      options: variableOptions
     })]
   });
 };
+BasicToolbar.defaultProps = {
+  variableOptions: []
+};
 export default BasicToolbar;

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, DocsUpload } from "./iconslist";
+import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon } from "./iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const iconList = {
@@ -186,7 +186,12 @@ const iconList = {
   docsUpload: /*#__PURE__*/_jsx(DocsUpload, {}),
   colorbox: /*#__PURE__*/_jsx(BsFillMenuButtonWideFill, {
     size: 20
-  })
+  }),
+  leftArrow: /*#__PURE__*/_jsx(LeftArrow, {}),
+  rightArrow: /*#__PURE__*/_jsx(RightArrow, {}),
+  checkListButton: /*#__PURE__*/_jsx(CheckListButton, {}),
+  checkListButtonActive: /*#__PURE__*/_jsx(CheckListButtonActive, {}),
+  excelIcon: /*#__PURE__*/_jsx(ExcelIcon, {})
 };
 const Icon = props => {
   const {

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

@@ -74,7 +74,7 @@ const ImageSelector = props => {
               }),
               iconPosition: "start",
               value: "upload",
-              label: "Upload Media"
+              label: `Upload ${title}`
             }), /*#__PURE__*/_jsx(Tab, {
               className: `${isActive("choose")} ${TAB_SHOW[title].indexOf("choose") === -1 ? "hidden" : ""}`,
               sx: classes.tab,
@@ -83,7 +83,7 @@ const ImageSelector = props => {
               }),
               iconPosition: "start",
               value: "choose",
-              label: "Choose Media"
+              label: `Choose ${title}`
             }), /*#__PURE__*/_jsx(Tab, {
               className: `${isActive("addLink")} ${TAB_SHOW[title].indexOf("addLink") === -1 ? "hidden" : ""}`,
               sx: classes.tab,

package/dist/Editor/common/iconslist.js

@@ -1545,4 +1545,96 @@ export const WorkflowIcon = () => {
       fill: "#f3b814"
     })]
   });
-};
+};
+export const LeftArrow = () => /*#__PURE__*/_jsx("svg", {
+  width: "9",
+  height: "12",
+  viewBox: "0 0 9 14",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M7.10104 12.8839L1.23438 7.00052L7.10104 1.11719",
+    stroke: "#2563EB",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })
+});
+export const RightArrow = () => /*#__PURE__*/_jsx("svg", {
+  width: "9",
+  height: "12",
+  viewBox: "0 0 9 14",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M1.89896 12.8839L7.76562 7.00052L1.89896 1.11719",
+    stroke: "#2563EB",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })
+});
+export const CheckListButton = () => /*#__PURE__*/_jsx("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: /*#__PURE__*/_jsx("rect", {
+    x: "0.5",
+    y: "0.5",
+    width: "23",
+    height: "23",
+    rx: "11.5",
+    fill: "#F4F6F9",
+    stroke: "#E0E0E0"
+  })
+});
+export const CheckListButtonActive = () => /*#__PURE__*/_jsxs("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/*#__PURE__*/_jsx("rect", {
+    x: "0.5",
+    y: "0.5",
+    width: "23",
+    height: "23",
+    rx: "11.5",
+    fill: "#2563EB"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M7.0625 12.0896L10.6849 15.7105L17.9267 8.46875",
+    stroke: "white",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })]
+});
+export const ExcelIcon = () => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0,0,256,256",
+  width: "30px",
+  height: "30px",
+  children: /*#__PURE__*/_jsx("g", {
+    fill: "#22622c",
+    fillRule: "nonzero",
+    stroke: "none",
+    strokeWidth: "1",
+    strokeLinecap: "butt",
+    strokeLinejoin: "miter",
+    strokeMiterlimit: "10",
+    strokeDasharray: "",
+    strokeDashoffset: "0",
+    fontFamily: "none",
+    fontWeight: "none",
+    fontSize: "none",
+    textAnchor: "none",
+    children: /*#__PURE__*/_jsx("g", {
+      transform: "scale(8.53333,8.53333)",
+      children: /*#__PURE__*/_jsx("path", {
+        d: "M15,3c-0.13457,0.00082 -0.26871,0.01521 -0.40039,0.04297l-0.00195,-0.00195l-9.96875,1.99414l-0.00195,0.00195c-0.94311,0.17905 -1.62599,1.00293 -1.62695,1.96289v16c0.00021,0.9613 0.68429,1.78648 1.62891,1.96484l9.96875,1.99414c0.13238,0.02723 0.26719,0.04097 0.40234,0.04102c1.10457,0 2,-0.89543 2,-2v-20c0,-1.10457 -0.89543,-2 -2,-2zM19,5v3h2v2h-2v2h2v2h-2v2h2v2h-2v2h2v2h-2v3h6c1.105,0 2,-0.895 2,-2v-16c0,-1.105 -0.895,-2 -2,-2zM23,8h1c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1h-1zM6.18555,10h2.40234l1.24414,2.99023c0.101,0.244 0.18177,0.52666 0.25977,0.84766h0.0332c0.045,-0.193 0.13353,-0.48609 0.26953,-0.87109l1.39063,-2.9668h2.1875l-2.61328,4.95508l2.69141,5.04297h-2.33398l-1.50391,-3.25781c-0.057,-0.115 -0.12369,-0.34697 -0.17969,-0.66797h-0.02148c-0.034,0.154 -0.10113,0.38631 -0.20313,0.69531l-1.51367,3.23242h-2.3457l2.7832,-5.00586zM23,12h1c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1h-1zM23,16h1c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1h-1zM23,20h1c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1h-1z"
+      })
+    })
+  })
+});

package/dist/Editor/plugins/withLinks.js

@@ -1,5 +1,5 @@
 import { Transforms, Element, Node } from "slate";
-const INLINE_ELLEMENTS = ["link", "chip-text", "drawer", "icon-text"];
+const INLINE_ELLEMENTS = ["link", "chip-text", "drawer", "icon-text", "variables"];
 const withLinks = editor => {
   const {
     isInline,

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -34,6 +34,7 @@ import SimpleText from "../Elements/SimpleText";
 import CheckList from "../Elements/List/CheckList";
 import { isEmptyTextNode } from "../helper";
 import Attachments from "../Elements/Attachments/Attachments";
+import Variables from "../Elements/Variables/Variable";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter"];
 const list_types = ["orderedList", "unorderedList"];
@@ -475,9 +476,14 @@ export const getBlock = props => {
       });
     case "docs":
     case "pdf":
+    case "xls":
       return /*#__PURE__*/_jsx(Attachments, {
         ...props
       });
+    case "variables":
+      return /*#__PURE__*/_jsx(Variables, {
+        ...props
+      });
     default:
       return /*#__PURE__*/_jsx(SimpleText, {
         ...props,

package/dist/Editor/utils/attachments.js

@@ -20,10 +20,11 @@ export const insertAttachments = (editor, data) => {
     const {
       url
     } = data;
+    const docType = url?.split(".").pop();
     if (url) {
       const attachmentsNode = createAttachmentsNode({
         ...data,
-        type: url?.split(".").pop() === "pdf" ? "pdf" : "docs"
+        type: docType?.includes("pdf") ? "pdf" : docType?.includes("doc") || docType?.includes("page") ? "docs" : docType?.includes("xls") || docType?.includes("numbers") ? "xls" : "docs"
       });
       Transforms.insertNodes(editor, [attachmentsNode]);
       insertNewLine(editor);

package/dist/Editor/utils/variables.js

@@ -0,0 +1,45 @@
+import { Editor, Path, Range, Transforms } from "slate";
+export const variablesTextNode = (data, text) => ({
+  type: "variables",
+  ...(data || {
+    name: ""
+  }),
+  children: [{
+    text
+  }]
+});
+export const insertVariables = (editor, data) => {
+  try {
+    const {
+      selection
+    } = editor;
+    const variableText = variablesTextNode(data, " ");
+    if (!!selection) {
+      const [parent, parentPath] = Editor.parent(editor, selection.focus.path);
+      if (editor.isVoid(parent)) {
+        Transforms.insertNodes(editor, {
+          type: "paragraph",
+          children: [variableText]
+        }, {
+          at: Path.next(parentPath),
+          select: true
+        });
+      } else if (Range.isCollapsed(selection)) {
+        Transforms.insertNodes(editor, variableText, {
+          select: true
+        });
+      } else {
+        Transforms.wrapNodes(editor, variableText, {
+          split: true
+        });
+      }
+    } else {
+      Transforms.insertNodes(editor, {
+        type: "paragraph",
+        children: [variableText]
+      });
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};

package/package.json

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