@flozy/editor 1.6.0 → 1.6.2

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

@@ -1,18 +1,18 @@
-import React, { useState } from "react";
-import { Transforms, Path } from "slate";
+import React, { useEffect, useState } from "react";
+import { Transforms, Editor } from "slate";
 import { ReactEditor, useSelected, useSlateStatic } from "slate-react";
 import Slider from "react-slick";
 import "./slick-theme.min.css";
 import "./slick.min.css";
 import { PrevArrow, NextArrow } from "./Arrows";
 import { carouselItem } from "../../utils/carouselItem";
-import { IconButton, Tooltip } from "@mui/material";
+import { IconButton, Tooltip, Box } from "@mui/material";
 import EditIcon from "@mui/icons-material/Edit";
-import AddIcon from "@mui/icons-material/Add";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import DeleteIcon from "@mui/icons-material/Delete";
+import { GridAddSectionIcon } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
 const Empty = ({
   children
 }) => {
@@ -32,8 +32,9 @@ const Carousel = props => {
     readOnly
   } = customProps;
   const editor = useSlateStatic();
-  const selected = useSelected();
+  const [showOptions, setShowOptions] = useState(false);
   const [edit, setEdit] = useState(false);
+  const path = ReactEditor.findPath(editor, element);
   const settings = {
     dots: true,
     infinite: true,
@@ -43,13 +44,15 @@ const Carousel = props => {
     nextArrow: /*#__PURE__*/_jsx(NextArrow, {}),
     prevArrow: /*#__PURE__*/_jsx(PrevArrow, {})
   };
+  useEffect(() => {
+    if (!edit) {
+      ReactEditor.focus(editor);
+      Transforms.select(editor, Editor.end(editor, []));
+    }
+  }, [edit]);
   const onAddSlide = () => {
-    const currentPath = editor.selection?.anchor?.path;
-    const ancestorsPath = Path.ancestors(currentPath, {
-      reverse: true
-    });
-    const insertPath = ancestorsPath[1];
-    if (insertPath) {
+    const insertPath = [path[0], children.length];
+    if (insertPath[0] !== undefined) {
       insertPath[insertPath.length - 1] = element.children.length;
       Transforms.insertNodes(editor, [{
         ...carouselItem()
@@ -67,29 +70,36 @@ const Carousel = props => {
       at: [...path]
     });
   };
+  const onMouseOver = () => {
+    setShowOptions(true);
+  };
+  const onMouseLeave = () => {
+    setShowOptions(false);
+  };
   const ToolBar = () => {
-    return selected ? /*#__PURE__*/_jsxs("div", {
+    return !readOnly && showOptions ? /*#__PURE__*/_jsxs("div", {
       className: "element-toolbar hr",
       contentEditable: false,
       style: {
-        top: "-42px"
+        top: "-32px",
+        left: "0px"
       },
       children: [/*#__PURE__*/_jsx(Tooltip, {
-        title: edit ? "Save" : "Edit",
+        title: edit ? "Save Carousel" : "Edit Carousel",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onEdit,
-          children: /*#__PURE__*/_jsx(EditIcon, {})
+          children: !edit ? /*#__PURE__*/_jsx(EditIcon, {}) : /*#__PURE__*/_jsx(CheckCircleIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
         title: "Add Slide",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onAddSlide,
-          children: /*#__PURE__*/_jsx(AddIcon, {})
+          children: /*#__PURE__*/_jsx(GridAddSectionIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Delete",
+        title: "Delete Carousel",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onDelete,
@@ -102,20 +112,29 @@ const Carousel = props => {
     ...attributes,
     className: "sliderBg",
     style: {
-      padding: "32px",
       backgroundColor: "transparent",
-      position: "relative"
+      position: "relative",
+      minHeight: "300px"
     },
+    contentEditable: edit,
+    onMouseOver: onMouseOver,
+    onMouseLeave: onMouseLeave,
     children: [edit ? /*#__PURE__*/_jsx(Empty, {
       children: children
-    }) : /*#__PURE__*/_createElement(Slider, {
-      ...settings,
-      key: children.length
-    }, children.map((m, i) => {
-      return /*#__PURE__*/_jsx("div", {
-        children: m
-      }, i);
-    })), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
+    }) : /*#__PURE__*/_jsx(Box, {
+      component: "div",
+      style: {
+        padding: "12px"
+      },
+      children: /*#__PURE__*/_jsx(Slider, {
+        ...settings,
+        children: children.map((m, i) => {
+          return /*#__PURE__*/_jsx("div", {
+            children: m
+          }, i);
+        })
+      })
+    }, `slider_${children.length}`), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
   });
 };
 export default Carousel;

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

@@ -1,22 +1,21 @@
 import React from "react";
-import { IconButton, Tooltip } from "@mui/material";
 import { insertCarousel } from "../../utils/carousel";
 import { Carousal } from "../../common/iconslist";
+import ToolbarIcon from "../../common/ToolbarIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
 const CarouselButton = props => {
   const {
-    editor
+    editor,
+    icoBtnType
   } = props;
   const handleClick = () => {
     insertCarousel(editor);
   };
-  return /*#__PURE__*/_jsx(Tooltip, {
+  return /*#__PURE__*/_jsx(ToolbarIcon, {
     title: "Carousel",
-    arrow: true,
-    children: /*#__PURE__*/_jsx(IconButton, {
-      onClick: handleClick,
-      children: /*#__PURE__*/_jsx(Carousal, {})
-    })
+    onClick: handleClick,
+    icon: /*#__PURE__*/_jsx(Carousal, {}),
+    icoBtnType: icoBtnType
   });
 };
 export default CarouselButton;

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

@@ -0,0 +1,133 @@
+import React, { useState } from "react";
+import { Box, IconButton, Popover } from "@mui/material";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import Button from "../../common/Button";
+import { colors } from "./defaultColors";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+let c = [];
+const ColorChunks = (recentColors = []) => [...recentColors, ...colors].reduce((a, b, i) => {
+  if (i % 7 === 0) {
+    a.push(c);
+    c = [];
+  }
+  c.push(b);
+  return a;
+}, []).reverse();
+const SingleColorButton = ({
+  crs,
+  index,
+  handleSelect,
+  classes,
+  handleMore,
+  activeColor
+}) => {
+  return /*#__PURE__*/_jsxs(Box, {
+    style: {
+      width: "100%",
+      display: "flex",
+      alignItems: "center",
+      padding: "8px"
+    },
+    children: [crs.map(m => /*#__PURE__*/_jsx(Button, {
+      onClick: handleSelect(m),
+      style: {
+        background: m
+      },
+      sx: classes.colorButtonSingle,
+      className: `${activeColor === m ? "active" : ""}`
+    }, `color_bs_${m}`)), index === 0 && handleMore ? /*#__PURE__*/_jsx(IconButton, {
+      onClick: handleMore,
+      className: "more-btn-cbs",
+      children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
+    }) : null]
+  }, `ci_bs_row_${index}}`);
+};
+export const AllColors = props => {
+  const {
+    classes,
+    onSelect,
+    activeColor
+  } = props;
+  const all = ColorChunks([]);
+  return /*#__PURE__*/_jsx(Box, {
+    component: "div",
+    sx: classes.allColor,
+    children: /*#__PURE__*/_jsx(Box, {
+      sx: classes.allColorInner,
+      children: /*#__PURE__*/_jsx(Box, {
+        className: "buttonsWrpr",
+        children: all.map((m, i) => {
+          return /*#__PURE__*/_jsx(SingleColorButton, {
+            crs: m,
+            index: i,
+            handleSelect: onSelect,
+            classes: classes,
+            activeColor: activeColor
+          }, `si_btn_row1_${m}_${i}`);
+        })
+      })
+    })
+  });
+};
+const ColorButtons = props => {
+  const {
+    onSelect,
+    classes,
+    activeColor
+  } = props;
+  const [row1, ...restRows] = ColorChunks([]);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const handleMore = e => {
+    setAnchorEl(e.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleSelect = color => () => {
+    onSelect(color);
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    component: "span",
+    sx: classes.colorButtons,
+    children: [/*#__PURE__*/_jsx(Box, {
+      className: "buttonsWrpr first",
+      children: [row1].map((m, i) => {
+        return /*#__PURE__*/_jsx(SingleColorButton, {
+          crs: m,
+          index: i,
+          handleSelect: handleSelect,
+          classes: classes,
+          handleMore: handleMore,
+          activeColor: activeColor
+        }, `si_btn_row1_${m}_${i}`);
+      })
+    }), /*#__PURE__*/_jsx(Popover, {
+      open: open,
+      anchorEl: anchorEl,
+      onClose: handleClose,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      children: /*#__PURE__*/_jsx(Box, {
+        sx: classes.colorButtonsInner,
+        children: restRows.map((m, i) => {
+          return /*#__PURE__*/_jsx(SingleColorButton, {
+            crs: m,
+            index: i,
+            handleSelect: handleSelect,
+            classes: classes,
+            activeColor: activeColor
+          }, `si_btn_${m}_${i}`);
+        })
+      })
+    })]
+  });
+};
+export default ColorButtons;

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

@@ -1,14 +1,16 @@
 import React, { useState } from "react";
 import { ReactEditor } from "slate-react";
-import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
 import { Transforms } from "slate";
+import ColorPickerTool from "react-gcolor-picker";
+import { IconButton, Tooltip, Box, Popover } from "@mui/material";
+import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
 import { logo } from "./LogoIcon";
 import "./ColorPicker.css";
-import ColorPickerTool from "react-gcolor-picker";
-import { Dialog, IconButton, Tooltip } from "@mui/material";
+import ColorButtons from "./ColorButtons";
+import ColorPickerStyles from "./Styles";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_COLOR = {
   color: "#000000",
   bgcolor: "#FFFFFF"
@@ -17,15 +19,18 @@ const ColorPicker = ({
   format,
   editor,
   showHex,
-  title
+  title,
+  classes
 }) => {
   const [selection, setSelection] = useState();
-  const [popup, setPopup] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const pickerStyles = ColorPickerStyles();
   const onOpen = e => {
     e.preventDefault();
+    setAnchorEl(e.currentTarget);
     setSelection(editor.selection);
     selection && ReactEditor.focus(editor);
-    setPopup(true);
   };
   const handleFormSubmit = color => {
     if (!color) return;
@@ -37,27 +42,41 @@ const ColorPicker = ({
     selection && ReactEditor.focus(editor);
     handleClose();
   };
+  const onSelect = color => {
+    handleFormSubmit(color);
+  };
   const handleClose = () => {
-    setPopup(false);
+    setAnchorEl(null);
   };
   const activeColor = activeMark(editor, format) || DEFAULT_COLOR[format];
   const Logo = logo[format](activeColor);
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(Tooltip, {
+    children: [/*#__PURE__*/_jsx(Tooltip, {
       title: title,
       arrow: true,
-      children: [/*#__PURE__*/_jsx(IconButton, {
+      children: /*#__PURE__*/_jsx(IconButton, {
         onClick: onOpen,
         children: Logo
-      }), showHex ? /*#__PURE__*/_jsx("div", {
-        style: {
-          display: "inline-flex"
-        },
-        children: activeColor
-      }) : null]
-    }), /*#__PURE__*/_jsx(Dialog, {
-      open: popup,
+      })
+    }), showHex ? /*#__PURE__*/_jsx(Box, {
+      sx: classes.hexStyle,
+      children: activeColor
+    }) : null, /*#__PURE__*/_jsx(ColorButtons, {
+      classes: pickerStyles,
+      onSelect: onSelect,
+      activeColor: activeColor
+    }), /*#__PURE__*/_jsx(Popover, {
+      open: open,
+      anchorEl: anchorEl,
       onClose: handleClose,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "center"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "center"
+      },
       children: /*#__PURE__*/_jsx(ColorPickerTool, {
         gradient: true,
         value: activeColor,
@@ -67,6 +86,7 @@ const ColorPicker = ({
   });
 };
 ColorPicker.defaultProps = {
-  rounded: false
+  rounded: false,
+  classes: {}
 };
 export default ColorPicker;

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

@@ -0,0 +1,51 @@
+const ColorPickerStyles = () => ({
+  colorButtons: {
+    "& .buttonsWrpr": {
+      display: "flex",
+      justifyCotnent: "center"
+    },
+    "& button": {
+      width: "24px",
+      height: "24px",
+      marginRight: "8px",
+      border: "1px solid #ccc"
+    }
+  },
+  colorButtonSingle: {
+    "&.active": {
+      "&:before": {
+        content: '" "',
+        position: "absolute",
+        top: "-5px",
+        left: "-5px",
+        width: "calc(100% + 4px)",
+        height: "calc(100% + 4px)",
+        border: "3px solid blue",
+        borderRadius: "50%"
+      }
+    }
+  },
+  colorButtonsInner: {
+    width: "100%",
+    padding: "4px",
+    display: "flex",
+    justifyCotnent: "center",
+    alignItems: "center",
+    flexDirection: "column",
+    "& .buttonsWrpr": {
+      display: "flex",
+      justifyCotnent: "center",
+      alignItems: "center"
+    },
+    ".more-btn-cbs": {
+      display: "none"
+    },
+    "& button": {
+      width: "24px",
+      height: "24px",
+      margin: "0px 4px",
+      border: "1px solid #ccc"
+    }
+  }
+});
+export default ColorPickerStyles;

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

@@ -1 +1 @@
-export const colors = ["#000000", "#e60000", "#ff9900", "#ffff00", "#008a00", "#0066cc", "#9933ff", "#ffffff", "#facccc", "#ffebcc", "#ffffcc", "#cce8cc", "#cce0f5", "#ebd6ff", "#bbbbbb", "#f06666", "#ffc266", "#ffff66", "#66b966", "#66a3e0", "#c285ff", "#888888", "#a10000", "#b26b00", "#b2b200", "#006100", "#0047b2", "#6b24b2", "#444444", "#5c0000", "#663d00", "#666600", "#003700", "#002966", "#3d1466"];
+export const colors = ["#000000", "#e60000", "#ff9900", "#ffff00", "#008a00", "#0066cc", "#9933ff", "#ffffff", "#facccc", "#ffebcc", "#ffffcc", "#cce8cc", "#cce0f5", "#ebd6ff", "#bbbbbb", "#f06666", "#ffc266", "#ffff66", "#66b966", "#66a3e0", "#c285ff", "#888888", "#a10000", "#b26b00", "#b2b200", "#006100", "#0047b2", "#6b24b2", "#444444", "#5c0000", "#663d00", "#666600", "#003700", "#002966", "#3d1466", "linear-gradient(90deg, #3F2AB7 12.5%, #0DC9B5 100%)", "linear-gradient(95.19deg, #A831E7 4.17%, #F05339 88.89%)"];

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

@@ -1,49 +1,47 @@
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { Transforms } from "slate";
 import { ReactEditor } from "slate-react";
-import { Grid, Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, IconButton, Typography, Tooltip } from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
 import Icon from "../../common/Icon";
 import { isBlockActive } from "../../utils/SlateUtilityFunctions";
-import usePopup from "../../utils/customHooks/usePopup";
 import { insertEmbed } from "../../utils/embed";
 import "./Embed.css";
-import ImageUploader from "../../common/ImageUploader";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import ImageSelector from "../../common/ImageSelector/ImageSelector";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const EMBED_LABEL = {
   image: "Image",
-  video: "Video or Embed"
+  video: "Video",
+  embed: "Embed"
 };
 const Embed = ({
   editor,
   format,
+  lbT,
   customProps,
-  className
+  icoBtnType
 }) => {
-  const urlInputRef = useRef();
   const [open, setOpen] = useState(false);
-  const [showInput, setShowInput] = usePopup(urlInputRef);
   const [formData, setFormData] = useState({
     url: "",
     alt: "",
     images: []
   });
   const [selection, setSelection] = useState();
-  const handleFormSubmit = () => {
-    if (formData?.url || formData?.images.length > 0) {
+  const handleFormSubmit = fd => {
+    if (fd?.url || fd?.images.length > 0) {
       selection && Transforms.select(editor, selection);
       selection && ReactEditor.focus(editor);
       insertEmbed(editor, {
-        ...formData
+        ...fd
       }, format);
-      setShowInput(false);
       setFormData({
         url: "",
         alt: ""
       });
     }
+    handleClose();
   };
   const onToggle = e => {
     e.preventDefault();
@@ -51,125 +49,34 @@ const Embed = ({
     selection && ReactEditor.focus(editor);
     setOpen(true);
   };
-  const onSave = () => {
-    handleFormSubmit();
-    setOpen(false);
-  };
-  const onClose = () => {
+  const handleClose = () => {
     setOpen(false);
   };
-  const onUploaded = uploadedData => {
-    setFormData({
-      ...formData,
-      ...uploadedData
-    });
-  };
-  const handleChange = e => {
-    setFormData({
+  const onSelectImage = img => {
+    const fd = {
       ...formData,
-      [e.target.name]: e.target.value
+      url: img
+    };
+    setFormData(fd);
+    handleFormSubmit({
+      ...fd
     });
   };
-  const imageURL = formData?.url === "none" || !formData?.url ? "" : formData?.url;
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Tooltip, {
-      title: EMBED_LABEL[format],
-      arrow: true,
-      children: /*#__PURE__*/_jsx(IconButton, {
-        className: isBlockActive(editor, format) ? "active" : "",
-        style: {
-          border: showInput ? "1px solid lightgray" : "",
-          borderBottom: "none"
-        },
-        format: format,
-        onClick: onToggle,
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: format
-        })
-      })
-    }), /*#__PURE__*/_jsx(Dialog, {
+    children: [/*#__PURE__*/_jsx(ToolbarIcon, {
+      className: isBlockActive(editor, format) ? "active" : "",
+      title: EMBED_LABEL[lbT || format],
+      onClick: onToggle,
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: lbT || format
+      }),
+      icoBtnType: icoBtnType
+    }), /*#__PURE__*/_jsx(ImageSelector, {
       open: open,
-      fullWidth: true,
-      className: `dialogComp`,
-      style: {
-        minWidth: `${window.innerWidth - 100}px`
-      },
-      children: /*#__PURE__*/_jsxs(Grid, {
-        item: true,
-        xs: 12,
-        sx: {
-          p: 3
-        },
-        children: [/*#__PURE__*/_jsx(DialogTitle, {
-          sx: {
-            p: 0,
-            pb: 2
-          },
-          children: /*#__PURE__*/_jsxs(Grid, {
-            container: true,
-            justifyContent: "space-between",
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "h6",
-              className: "popupTitle",
-              color: "primary",
-              children: EMBED_LABEL[format] || "Embed"
-            }), /*#__PURE__*/_jsx(Grid, {
-              style: {
-                display: "flex"
-              },
-              children: /*#__PURE__*/_jsx(IconButton, {
-                onClick: onClose,
-                className: "close-popupbtn",
-                children: /*#__PURE__*/_jsx(CloseIcon, {})
-              })
-            })]
-          })
-        }), /*#__PURE__*/_jsx(DialogContent, {
-          sx: {
-            p: 0
-          },
-          children: /*#__PURE__*/_jsxs(Grid, {
-            container: true,
-            children: [/*#__PURE__*/_jsx(Grid, {
-              item: true,
-              xs: 12,
-              style: {
-                paddingTop: "12px"
-              },
-              children: /*#__PURE__*/_jsx(TextField, {
-                name: "url",
-                placeholder: `Add ${format} url here`,
-                size: "small",
-                fullWidth: true,
-                onChange: handleChange,
-                value: imageURL || ""
-              })
-            }), format === "image" ? /*#__PURE__*/_jsx(ImageUploader, {
-              value: formData,
-              data: {
-                key: "url"
-              },
-              customProps: customProps,
-              onUploaded: onUploaded,
-              disableUpload: format === "video"
-            }) : null]
-          })
-        }), /*#__PURE__*/_jsxs(DialogActions, {
-          sx: {
-            p: 0,
-            pt: 2
-          },
-          children: [/*#__PURE__*/_jsx(Button, {
-            onClick: onClose,
-            className: "secondaryBtn",
-            children: "Cancel"
-          }), /*#__PURE__*/_jsx(Button, {
-            onClick: onSave,
-            className: "primaryBtn",
-            children: "Save"
-          })]
-        })]
-      })
+      onClose: handleClose,
+      customProps: customProps,
+      onSelectImage: onSelectImage,
+      title: EMBED_LABEL[lbT || format]
     })]
   });
 };