@flozy/editor 1.5.9 → 1.6.1

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,13 +1,15 @@
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { ReactEditor } from "slate-react";
-import Button from "../../common/Button";
-import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
 import { Transforms } from "slate";
-import usePopup from "../../utils/customHooks/usePopup";
+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 ColorButtons from "./ColorButtons";
+import ColorPickerStyles from "./Styles";
 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 DEFAULT_COLOR = {
   color: "#000000",
@@ -18,15 +20,17 @@ const ColorPicker = ({
   editor,
   showHex,
   title,
-  rounded
+  classes
 }) => {
   const [selection, setSelection] = useState();
-  const colorPickerRef = useRef(null);
-  const [showOptions, setShowOptions] = usePopup(colorPickerRef);
-  const toggleOption = e => {
+  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);
-    setShowOptions(prev => !prev);
   };
   const handleFormSubmit = color => {
     if (!color) return;
@@ -35,57 +39,43 @@ const ColorPicker = ({
       format,
       value: color
     });
-    setShowOptions(false);
     selection && ReactEditor.focus(editor);
+    handleClose();
   };
-  const activeColor = showOptions ? DEFAULT_COLOR[format] : activeMark(editor, format);
-  return /*#__PURE__*/_jsxs("div", {
-    className: "",
-    ref: colorPickerRef,
-    style: {
-      display: "flex",
-      alignItems: "center",
-      position: "relative",
-      padding: rounded ? "6px" : "0px"
-    },
-    children: [rounded ? /*#__PURE__*/_jsx(Button, {
-      style: {
-        color: activeColor,
-        opacity: "1",
-        width: "24px",
-        height: "24px",
-        backgroundColor: activeColor,
-        border: "1px solid #ccc",
-        marginRight: "12px"
-      },
-      className: showOptions ? "clicked" : "",
-      onClick: toggleOption,
-      title: title
-    }) : /*#__PURE__*/_jsx(Button, {
-      style: {
-        color: activeColor,
-        opacity: "1"
-      },
-      className: showOptions ? "clicked" : "",
-      onClick: toggleOption,
+  const onSelect = color => {
+    handleFormSubmit(color);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const activeColor = activeMark(editor, format) || DEFAULT_COLOR[format];
+  const Logo = logo[format](activeColor);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Tooltip, {
       title: title,
-      children: logo[format](activeColor)
-    }), showHex ? /*#__PURE__*/_jsx("div", {
-      style: {
-        display: "flex"
-      },
+      arrow: true,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        onClick: onOpen,
+        children: Logo
+      })
+    }), showHex ? /*#__PURE__*/_jsx(Box, {
+      sx: classes.hexStyle,
       children: activeColor
-    }) : null, showOptions && /*#__PURE__*/_jsx("div", {
-      style: {
-        position: "fixed",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        margin: "auto",
-        zIndex: 100,
-        width: "300px",
-        height: "300px"
+    }) : 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,
@@ -96,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,50 +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 Uploader from "../../common/Uploader";
 import "./Embed.css";
-// import commonStyle from "../../commonStyle";
-// import styled from "@emotion/styled";
+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: ""
+    alt: "",
+    images: []
   });
   const [selection, setSelection] = useState();
-  const handleFormSubmit = () => {
-    if (formData?.url) {
+  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();
@@ -52,122 +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`,
-      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: [format === "image" ? /*#__PURE__*/_jsx(Uploader, {
-              value: formData,
-              data: {
-                key: "url"
-              },
-              customProps: customProps,
-              onUploaded: onUploaded,
-              disableUpload: format === "video"
-            }) : null, /*#__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 || ""
-              })
-            })]
-          })
-        }), /*#__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]
     })]
   });
 };

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

@@ -1,11 +1,13 @@
 import React, { useEffect, useState } from "react";
-import { useSlateStatic, useSelected, ReactEditor } from "slate-react";
+import { useSlateStatic, ReactEditor } from "slate-react";
 import { Node, Transforms, Editor } from "slate";
 import AspectRatioIcon from "@mui/icons-material/AspectRatio";
 import useResize from "../../utils/customHooks/useResize";
 import EmbedPopup from "./EmbedPopup";
 import { IconButton, Tooltip } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
+import QuiltedImageList from "../../common/ImageList";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Image = ({
@@ -17,11 +19,14 @@ const Image = ({
   const {
     url,
     alt,
+    images = [],
     bannerSpacing,
     alignment,
     bgColor,
     borderColor,
-    borderRadius
+    borderRadius,
+    cols,
+    rowHeight
   } = element;
   const {
     readOnly
@@ -43,7 +48,7 @@ const Image = ({
     horizantal
   } = alignment || {};
   const editor = useSlateStatic();
-  const selected = useSelected();
+  // const selected = useSelected();
   const [parentDOM, setParentDOM] = useState(null);
   const [openSetttings, setOpenSettings] = useState(false);
   const [size, onMouseDown, resizing, onLoad] = useResize({
@@ -53,8 +58,12 @@ const Image = ({
   const arr = Array.from(Node.elements(editor));
   const ele = arr.find(([elem]) => element === elem);
   const path = ReactEditor.findPath(editor, element);
+  const {
+    hoverPath
+  } = useEditorContext();
+  const selected = hoverPath === path.join(",");
   useEffect(() => {
-    if (editor && ele[1] !== undefined) {
+    if (editor && ele && ele[1] !== undefined) {
       const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
       setParentDOM(dom);
       onLoad(element?.size || {});
@@ -125,6 +134,7 @@ const Image = ({
     }) : null;
   };
   const totalMinus = (parseInt(left) || 0) + (parseInt(right) || 0);
+  const width = resizing ? `${size.width}px` : `${size.widthInPercent}%`;
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
     className: "embed has-hover",
@@ -142,6 +152,7 @@ const Image = ({
       border: `1px solid ${borderColor}`
     },
     ...element.attr,
+    "data-path": path.join(","),
     children: [openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
       element: element,
       onSave: onSave,
@@ -153,16 +164,22 @@ const Image = ({
       contentEditable: false,
       style: {
         position: "relative",
-        width: size.widthInPercent ? `${size.widthInPercent}%` : `${size.width}px`,
+        width: `${width}`,
         height: `${size.height}px`
       },
-      children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx("img", {
+      children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), images?.length > 1 ? /*#__PURE__*/_jsx(QuiltedImageList, {
+        itemData: images || [],
+        readOnly: true,
+        rowHeight: rowHeight,
+        cols: cols
+      }) : /*#__PURE__*/_jsx("img", {
         style: {
           borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`
         },
         alt: alt,
         src: url,
-        onClick: handleImageClick
+        onClick: handleImageClick,
+        "data-path": path.join(",")
       }), selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {