@flozy/editor 1.5.8 → 1.6.0

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

@@ -1,8 +1,5 @@
-import React, { useEffect, useMemo, useState } from "react";
-import { Popper, Fade, Paper, IconButton,
-// Drawer,
-Grid, Typography } from "@mui/material";
-// import { Drawer, Popper } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { Popper, Fade, Paper, IconButton, Grid, Typography } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import { Editor, Range } from "slate";
 import { useSlate, useFocused } from "slate-react";
@@ -14,53 +11,51 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const PopupTool = props => {
   const classes = usePopupStyle();
   const [anchorEl, setAnchorEl] = useState(null);
+  const [open, setOpen] = useState(false);
   const editor = useSlate();
   const inFocus = useFocused();
   const {
     selection
   } = editor;
-  const open = Boolean(anchorEl);
+  const [event] = useDrag(anchorEl);
   const id = open ? "popup-edit-tool" : "";
-  const [event] = useDrag();
+  useEffect(() => {
+    if (event === "end" && anchorEl && !open) {
+      setOpen(true);
+    } else if (!anchorEl) {
+      setOpen(false);
+    }
+  }, [event, anchorEl]);
   useEffect(() => {
     if (!selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
       setAnchorEl(null);
     } else {
       const domSelection = window.getSelection();
-      const domRange = domSelection.getRangeAt(0);
+      const domRange = domSelection?.getRangeAt(0);
       const {
         startOffset,
         endOffset
       } = domRange || {};
       if (startOffset !== endOffset) {
         const rect = domRange.getBoundingClientRect();
-        if (event === "end" && !open && anchorEl === null) {
-          setAnchorEl({
-            clientWidth: rect.width,
-            clientHeight: rect.height,
-            getBoundingClientRect: () => rect
-          });
-        }
+        setAnchorEl({
+          clientWidth: rect.width,
+          clientHeight: rect.height,
+          getBoundingClientRect: () => rect
+        });
       }
     }
-  }, [selection, event]);
+  }, [selection]);
   const handleClose = () => {
     setAnchorEl(null);
+    setOpen(false);
   };
-  const toolTextFormat = useMemo(() => {
-    return /*#__PURE__*/_jsx(TextFormat, {
-      editor: editor,
-      classes: classes
-    });
-  }, [open]);
-  return /*#__PURE__*/_jsx(Popper, {
+  return open ? /*#__PURE__*/_jsx(Popper, {
     id: id,
     open: open,
-    disablePortal: false,
     anchorEl: anchorEl,
     transition: true,
     placement: "auto-end",
-    onMouseDown: e => e.preventDefault(),
     sx: classes.popupWrapper,
     className: "tools-drawer",
     children: ({
@@ -96,31 +91,12 @@ const PopupTool = props => {
               children: /*#__PURE__*/_jsx(CloseIcon, {})
             })
           })]
-        }), toolTextFormat]
+        }), /*#__PURE__*/_jsx(TextFormat, {
+          editor: editor,
+          classes: classes
+        })]
       })
     })
-  });
-
-  //   return (
-  //     <Drawer
-  //       // id={id}
-  //       open={open}
-  //       fullWidth
-  //       // disablePortal={false}
-  //       // anchorEl={anchorEl}
-  //       // transition
-  //       // placement="bottom-start"
-  //       // onMouseDown={(e) => e.preventDefault()}
-  //       // sx={classes.popupWrapper}
-  //       anchor="right"
-  //       hideBackdrop
-  //       // handleClose={handleClose}
-  //       className="tools-drawer"
-  //       // variant="persistent"
-  //     >
-  //       <TextFormat editor={editor} classes={classes} onClose={handleClose} />
-  //     </Drawer>
-  //   );
+  }) : null;
 };
-
 export default PopupTool;

package/dist/Editor/Toolbar/Toolbar.js

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from "react";
 import { useSlate } from "slate-react";
 import { isBlockActive, activeMark } from "../utils/SlateUtilityFunctions.js";
 import useFormat from "../utils/customHooks/useFormat.js";
-import defaultToolbarGroups from "./toolbarGroups.js";
-import { BlockButton, MarkButton, Dropdown, TextSize } from "./FormatTools";
+import { toolbarGroups as defaultToolbarGroups } from "./toolbarGroups.js";
+import { BlockButton, MarkButton, Dropdown, TextSize, FontFamilyDropdown, FontSize } from "./FormatTools";
 import ColorPicker from "../Elements/Color Picker/ColorPicker";
 import LinkButton from "../Elements/Link/LinkButton";
 import Embed from "../Elements/Embed/Embed";
@@ -30,7 +30,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const Toolbar = props => {
   const {
     handleCodeToText,
-    customProps
+    customProps,
+    toolbarOptions
   } = props;
   const editor = useSlate();
   const isTable = useFormat(editor, "table");
@@ -47,10 +48,15 @@ const Toolbar = props => {
     setToolbarGroups(filteredGroups);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isTable]);
+  useEffect(() => {
+    if (toolbarOptions?.removeOptions) {
+      setToolbarGroups(defaultToolbarGroups.map(elem => elem?.filter(item => !toolbarOptions?.removeOptions?.includes(item?.format))));
+    }
+  }, [toolbarOptions]);
   return /*#__PURE__*/_jsxs("div", {
-    className: "toolbar",
+    className: `toolbar ${toolbarOptions?.toolbarPosition}`,
     children: [toolbarGroups.map((group, index) => /*#__PURE__*/_jsx("span", {
-      className: "toolbar-grp1",
+      className: `toolbar-grp1 ${toolbarOptions?.toolbarPosition}`,
       children: group.map((element, gi) => {
         switch (element.type) {
           case "block":
@@ -68,6 +74,16 @@ const Toolbar = props => {
               ...element,
               editor: editor
             }, element.id);
+          case "fontfamilydropdown":
+            return /*#__PURE__*/_jsx(FontFamilyDropdown, {
+              ...element,
+              editor: editor
+            }, element.id);
+          case "numberInput":
+            return /*#__PURE__*/_jsx(FontSize, {
+              editor: editor,
+              ...element
+            }, element.id);
           case "fontSize":
             return /*#__PURE__*/_jsx(TextSize, {
               ...element,

package/dist/Editor/Toolbar/styles.css

@@ -1,34 +1,129 @@
-.toolbar {
-    background: #ffffff;
-    margin:4px 0;
-    display:flex;
-    flex-wrap:wrap;
-    align-items:center;
-    padding: 12px 0px;
-    row-gap: 15px;
-    position: -webkit-sticky;
-    position: sticky;
+.toolbar-wrapper {
+    position: absolute;
     top: 0;
+    /* background-color: #ffffff; */
+    overflow: auto;
+    display: flex;
     z-index: 2;
-    margin-bottom: 12px;
-    border-bottom: 2px solid #CCC;
+    width: 100%;
+    padding: 12px 6px;
+}
+
+.editor-wrapper-toolbar-closed .toolbar-wrapper {
+    background-color: unset;
+    width: unset;
+    right: unset;
+}
+
+.toolbar-toggle {
+    display: flex;
+    align-items: center;
+    align-self: center;
+    background-color: #ffffff;
+    border-radius: 6px;
+}
+
+.editor-wrapper-toolbar-closed .toolbar-toggle {
+    border-radius: 8px;
+}
+
+.toolbar-toggle .MuiTypography-body1 {
+    font-size: 0.63rem;
+}
+
+.toolbar-wrapper.top-right,
+.bottom-right {
+    flex-direction: row-reverse;
+    right: 0;
+    left: 0
+}
+
+.top-left,
+.bottom-left {
+    flex-direction: row;
+}
+
+.left-top {
+    flex-direction: column;
+}
+
+.left-bottom {
+    flex-direction: column-reverse;
+}
+
+.top-left-toolbar-wrapper,
+.bottom-left-toolbar-wrapper {
+    left: 0;
+    right: 0;
+}
+
+.left-top-toolbar-wrapper,
+.left-bottom-toolbar-wrapper {
+    left: 0;
+    height: 100%;
+    width: fit-content;
+}
+
+.right-top {
+    flex-direction: column;
 }
-.toolbar-grp1>*{
+
+.right-bottom {
+    flex-direction: column-reverse;
+}
+
+.right-top-toolbar-wrapper,
+.right-bottom-toolbar-wrapper {
+    right: 0;
+    height: 100%;
+    width: fit-content;
+    transition: all 0.5s;
+}
+
+.left-top-toolbar-wrapper,
+.left-bottom-toolbar-wrapper {
+    left: 0;
+    height: 100%;
+    width: fit-content;
+    transition: all 0.5s;
+}
+
+.bottom-left-toolbar-wrapper,
+.bottom-right-toolbar-wrapper {
+    top: unset;
+    bottom: 0;
+}
+.toolbar-wrapper.bottom-right-toolbar-wrapper {
+    right: 0 !important;
+}
+
+.toolbar {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+}
+
+.toolbar-grp1>* {
     /* margin-right: 10px; */
     cursor: pointer;
 }
-.toolbar-grp1{
-    margin:0 2px;
+
+.toolbar-grp1 {
+    margin: 0 2px;
     display: flex;
     align-items: center;
+    row-gap: 12px;
 }
+
 .toolbar .toolbar-grp1:first-child .MuiOutlinedInput-root {
     margin-right: 10px;
 }
+
 .color-picker.popup-wrapper1 button {
     padding: 8px;
 }
-select{
+
+select {
     height: 30px;
     border: none;
     width: 6.9rem;
@@ -38,6 +133,29 @@ select{
     width: 200px !important;
 }
 
-.toolbar .MuiIconButton-root {
+.toolbar .MuiIconButton-root {}
 
+
+::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+    /* background: #E6E9F4; */
+    background: #e6e9f48a;
 }
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+    /* background: #bdc0d2; */
+    background: #bdc0d240;
+    border-radius: 10px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+    /* background: #a1a5bd; */
+    background: #bdc0d240;
+}

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -1,13 +1,13 @@
 import { fontOptions } from "../utils/font";
-const toolbarGroups = [[{
+export const toolbarGroups = [[{
   id: 1,
   format: "fontFamily",
-  type: "dropdown",
+  type: "fontfamilydropdown",
   options: fontOptions
 }, {
   id: 2,
   format: "fontSize",
-  type: "fontSize",
+  type: "numberInput",
   options: [{
     text: "12px",
     value: "12px"
@@ -123,42 +123,53 @@ const toolbarGroups = [[{
   type: "table"
 }], [{
   id: 28,
+  format: "grid",
   type: "grid"
 }, {
   id: 29,
+  format: "newLine",
   type: "newLine"
 }, {
   id: 30,
+  format: "accordion",
   type: "accordion"
 }, {
   id: 31,
+  format: "signature",
   type: "signature"
 }, {
   id: 32,
+  format: "button",
   type: "button"
 }, {
   id: 33,
+  format: "pageSettings",
   type: "page-settings"
 }, {
   id: 34,
+  format: "carousel",
   type: "carousel"
 }, {
   id: 35,
+  format: "chipText",
   type: "chip-text"
-}, {
-  id: 36,
-  type: "drawer"
-}, {
+},
+// {
+//   id: 36,
+//   format: "drawer",
+//   type: "drawer",
+// },
+{
   id: 37,
+  format: "appHeader",
   type: "app-header"
 }, {
   id: 38,
+  format: "form",
   type: "form"
 }
 // {
 //   id: 39,
 //   type: "icon-text",
 // },
-]];
-
-export default toolbarGroups;
+]];

package/dist/Editor/common/Icon.js

@@ -4,9 +4,15 @@ import { BsTypeH1, BsTypeH2, BsTypeH3, BsCameraVideoFill } from "react-icons/bs"
 import { FaSuperscript, FaSubscript } from "react-icons/fa";
 import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutlineDelete, AiFillTag, AiOutlineUpload, AiOutlineArrowsAlt, AiOutlineInsertRowAbove, AiOutlineInsertRowLeft, AiFillHtml5 } from "react-icons/ai";
 import { SiLatex } from "react-icons/si";
-import { BoldIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon } from "./iconslist";
+import { BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon } from "./iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 const iconList = {
+  fontFamily: /*#__PURE__*/_jsx(FontFamilyIcon, {
+    size: 20
+  }),
+  fontSize: /*#__PURE__*/_jsx(FontSizeIcon, {
+    size: 20
+  }),
   // bold: <MdFormatBold size={20} />,
   bold: /*#__PURE__*/_jsx(BoldIcon, {
     size: 20

package/dist/Editor/common/ImageList.js

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { ImageList, ImageListItem, ImageListItemBar, IconButton } from "@mui/material";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function srcset(image, size, rows = 1, cols = 1) {
+  return {
+    src: `${image}?w=${size * cols}&h=${size * rows}&fit=crop&auto=format`,
+    srcSet: `${image}?w=${size * cols}&h=${size * rows}&fit=crop&auto=format&dpr=2 2x`
+  };
+}
+const QuiltedImageList = props => {
+  const {
+    itemData,
+    selected,
+    onSelectChange,
+    readOnly,
+    cols,
+    rowHeight,
+    uploaderComp: UploaderComp
+  } = props;
+  const onImageSelect = (item, status) => () => {
+    onSelectChange(item?.img, status);
+  };
+  return /*#__PURE__*/_jsxs(ImageList, {
+    sx: {
+      width: "100%",
+      height: "100%"
+    },
+    variant: "quilted",
+    cols: cols || 4,
+    rowHeight: rowHeight || 121,
+    children: [UploaderComp ? /*#__PURE__*/_jsx(ImageListItem, {
+      className: "img_upload_btn_list",
+      cols: 2,
+      rows: 2,
+      style: {
+        backgroundColor: "rgba(0, 0, 0, 0.5)"
+      },
+      children: /*#__PURE__*/_jsx(UploaderComp, {})
+    }, `img_upload_btn`) : null, (itemData || []).map(item => {
+      const isSelected = (selected || []).find(f => f.img === item.img);
+      return /*#__PURE__*/_jsxs(ImageListItem, {
+        cols: item.cols || 1,
+        rows: item.rows || 1,
+        children: [/*#__PURE__*/_jsx("img", {
+          ...srcset(item.img, rowHeight || 121, item.rows, item.cols),
+          alt: item.title,
+          loading: "lazy"
+        }), !readOnly ? /*#__PURE__*/_jsx(ImageListItemBar, {
+          sx: {
+            background: "none"
+          },
+          position: "bottom",
+          actionPosition: "left",
+          actionIcon: /*#__PURE__*/_jsx(IconButton, {
+            onClick: onImageSelect(item, !isSelected),
+            children: /*#__PURE__*/_jsx(CheckCircleIcon, {
+              style: {
+                color: isSelected ? "#2563eb" : "#ccc"
+              }
+            })
+          })
+        }) : null]
+      }, item.img);
+    })]
+  });
+};
+export default QuiltedImageList;

package/dist/Editor/common/ImageUploader.js

@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from "react";
+import { Grid } from "@mui/material";
+import Uploader from "./Uploader";
+import StandardImageList from "./ImageList";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ImageUploader = props => {
+  const {
+    value,
+    onUploaded,
+    customProps,
+    disableUpload = false
+  } = props;
+  const {
+    readOnly,
+    services
+  } = customProps;
+  const [newData, setNewData] = useState([]);
+  const [selected, setSelected] = useState([]);
+  const [items, setItems] = useState([]);
+  useEffect(() => {
+    getItems();
+  }, []);
+  const getItems = async () => {
+    if (services) {
+      const result = await services("getAssets", {});
+      setItems(result);
+    }
+  };
+  const onDone = img => {
+    setNewData([{
+      img: img.url
+    }, ...newData]);
+  };
+  const onSelectChange = (img, status) => {
+    const updatedSelected = !status ? [...selected]?.filter(f => f.img !== img) : [...selected, {
+      img
+    }];
+    setSelected(updatedSelected);
+    onUploaded({
+      images: updatedSelected,
+      url: updatedSelected[0]?.img,
+      alt: ""
+    });
+  };
+  const UploaderComp = () => {
+    return /*#__PURE__*/_jsx(Uploader, {
+      value: value,
+      data: {
+        key: "url"
+      },
+      customProps: customProps,
+      onUploaded: onDone,
+      disableUpload: disableUpload
+    });
+  };
+  return /*#__PURE__*/_jsx(Grid, {
+    container: true,
+    sx: {
+      pt: 1
+    },
+    spacing: 1,
+    children: /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/_jsx("div", {
+        style: {
+          height: "400px",
+          overflow: "auto",
+          display: "flex",
+          justifyContent: "center"
+        },
+        children: /*#__PURE__*/_jsx(StandardImageList, {
+          uploaderComp: UploaderComp,
+          itemData: [...newData, ...items],
+          selected: selected,
+          onSelectChange: onSelectChange,
+          readOnly: readOnly
+        })
+      })
+    })
+  });
+};
+export default ImageUploader;

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

@@ -2,7 +2,7 @@ const accordionTitleBtnStyle = [{
   tab: "Colors",
   value: "colors",
   fields: [{
-    label: "Text",
+    label: "Text Color",
     key: "textColor",
     type: "color",
     needPreview: true
@@ -11,11 +11,11 @@ const accordionTitleBtnStyle = [{
     key: "btnBg",
     type: "color"
   }, {
-    label: "Background",
+    label: "Background Color",
     key: "bgColor",
     type: "color"
   }, {
-    label: "Border",
+    label: "Border Color",
     key: "borderColor",
     type: "color"
   }]

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

@@ -18,16 +18,16 @@ const accordionTitleStyle = [{
   tab: "Colors",
   value: "colors",
   fields: [{
-    label: "Text",
+    label: "Text Color",
     key: "textColor",
     type: "color",
     needPreview: true
   }, {
-    label: "Background",
+    label: "Background Color",
     key: "bgColor",
     type: "color"
   }, {
-    label: "Border",
+    label: "Border Color",
     key: "borderColor",
     type: "color"
   }]

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

@@ -11,7 +11,7 @@ const appHeaderStyle = [{
   }, {
     label: "Title Font Size",
     key: "logoFontSize",
-    type: "text",
+    type: "fontSize",
     placeholder: "16px"
   }, {
     label: "Title Font Family",
@@ -23,11 +23,11 @@ const appHeaderStyle = [{
         style: {
           fontFamily: option.value
         },
-        children: option.text
+        children: "LOGO"
       });
     }
   }, {
-    label: "App Logo URL",
+    label: "Logo Image URL",
     key: "appLogo",
     type: "text"
   }, {
@@ -46,7 +46,7 @@ const appHeaderStyle = [{
   fields: [{
     label: "Menu Font Size",
     key: "fontSize",
-    type: "text",
+    type: "fontSize",
     placeholder: "16px"
   }, {
     label: "Menu Font Family",
@@ -58,7 +58,7 @@ const appHeaderStyle = [{
         style: {
           fontFamily: option.value
         },
-        children: option.text
+        children: "Home"
       });
     }
   }]