@flozy/editor 11.0.3 → 11.0.4

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

@@ -1,13 +1,14 @@
 import React, { useState } from "react";
 import { ReactEditor } from "slate-react";
-import ColorPickerTool from "react-gcolor-picker";
-import { IconButton, Tooltip, Box, Popover } from "@mui/material";
+import { IconButton, Tooltip, Box, Popover, useTheme } from "@mui/material";
 import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
 import ColorButtons from "./ColorButtons";
 import ColorPickerStyles from "./Styles";
 import colorWheel from "./colorWheel.png";
 import "./ColorPicker.css";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import CustomColorPicker from "../../common/CustomColorPicker";
+import { getSelectedElementColor } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -25,7 +26,8 @@ const ColorPicker = props => {
     classes,
     forMiniTool,
     openColorTool,
-    closeColorTool
+    closeColorTool,
+    type
   } = props;
   const {
     theme
@@ -34,6 +36,7 @@ const ColorPicker = props => {
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
   const pickerStyles = ColorPickerStyles(theme);
+  const muiTheme = useTheme();
   const onOpen = e => {
     e.preventDefault();
     setAnchorEl(e.currentTarget);
@@ -58,7 +61,7 @@ const ColorPicker = props => {
     setAnchorEl(null);
     setSelection(null);
   };
-  const activeColor = activeMark(editor, format) || DEFAULT_COLOR[format];
+  const activeColor = type === "textColor" ? getSelectedElementColor(editor, format, muiTheme) : activeMark(editor, format) || DEFAULT_COLOR[format];
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [forMiniTool ? null : /*#__PURE__*/_jsx(Tooltip, {
       title: title,
@@ -96,10 +99,10 @@ const ColorPicker = props => {
         horizontal: "top"
       },
       sx: classes.colorPickerPopup,
-      children: /*#__PURE__*/_jsx(ColorPickerTool, {
+      children: /*#__PURE__*/_jsx(CustomColorPicker, {
         gradient: true,
-        value: activeColor,
-        onChange: handleFormSubmit
+        onChange: handleFormSubmit,
+        color: activeColor
       })
     })]
   });

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

@@ -20,24 +20,26 @@ const ColorPickerStyles = theme => ({
       background: `${theme?.palette?.editor?.miniToolBarBackground}`,
       border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
       borderRadius: "7px !important",
-      padding: "0px 5px",
-      '@media only screen and (max-width: 600px)': {
+      padding: "0px 10px",
+      "@media only screen and (max-width: 600px)": {
         marginTop: "-40px"
       }
     }
   },
   colorButtonSingle: {
+    border: "1.5px solid #DCE4EC !important",
     "&.active": {
-      "&:before": {
-        content: '" "',
-        position: "absolute",
-        top: "-4px",
-        left: "-4px",
-        width: "calc(100% + 8px)",
-        height: "calc(100% + 8px)",
-        border: "2px solid #2563EB",
-        borderRadius: "50%"
-      }
+      // "&:before": {
+      //   content: '" "',
+      //   position: "absolute",
+      //   top: "-4px",
+      //   left: "-4px",
+      //   width: "calc(100% + 8px)",
+      //   height: "calc(100% + 8px)",
+      //   border: "2px solid #2563EB",
+      //   borderRadius: "50%",
+      // },
+      outline: "2px solid #2563EB"
     }
   },
   colorButtonsInner: {
@@ -59,7 +61,7 @@ const ColorPickerStyles = theme => ({
       width: "24px",
       height: "24px",
       margin: "0px 4px",
-      border: "unset"
+      border: "1.5px solid #DCE4EC"
     }
   },
   colorPickerIcon: {

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

@@ -1,5 +1,4 @@
-import React, { useState } from "react";
-import { Transforms } from "slate";
+import React, { useRef, useState } from "react";
 import { ReactEditor } from "slate-react";
 import Icon from "../../common/Icon";
 import { isBlockActive } from "../../utils/SlateUtilityFunctions";
@@ -22,55 +21,45 @@ const Embed = ({
   customProps,
   icoBtnType
 }) => {
-  const [open, setOpen] = useState(false);
-  const [formData, setFormData] = useState({
-    url: "",
-    alt: "",
-    images: []
-  });
+  const [openSetttings, setUploadPopupOpen] = useState(false);
   const [selection, setSelection] = useState();
   const {
     translation
   } = customProps;
-  const handleFormSubmit = fd => {
-    if (fd?.url || fd?.images.length > 0) {
-      selection && Transforms.select(editor, selection);
-      selection && ReactEditor.focus(editor);
-      insertEmbed(editor, {
-        ...fd
-      }, format);
-      setFormData({
-        url: "",
-        alt: ""
-      });
-    }
-    handleClose();
-  };
+  const [uploadStatus, setUploadStatus] = useState({
+    isUploading: false,
+    uploadPercentage: 0,
+    fileName: null,
+    fileSize: null
+  });
+  const xhrRef = useRef(null);
   const onToggle = e => {
     e.preventDefault();
     setSelection(editor.selection);
     selection && ReactEditor.focus(editor);
-    setOpen(true);
+    setUploadPopupOpen(true);
   };
   const handleClose = () => {
-    setOpen(false);
+    setUploadPopupOpen(false);
   };
-  const onSelectImage = img => {
-    const fd = {
-      ...formData,
-      url: img
-    };
-    setFormData(fd);
-    let extProps = {};
-    if (format === "video") {
-      extProps = {
-        aspectRatio: "16 / 9"
-      };
+  const onSelectImage = async img => {
+    if (img?.isUpload === false) {
+      insertEmbed(editor, {
+        url: img.embedURL,
+        isUploading: false,
+        isUpload: false
+      }, format);
+    } else {
+      insertEmbed(editor, {
+        url: "",
+        file: img.file,
+        isUploading: true,
+        isUpload: true,
+        fileName: img.file?.name,
+        fileSize: img.file?.size,
+        mimeType: img.file?.type
+      }, format);
     }
-    handleFormSubmit({
-      ...fd,
-      ...extProps
-    });
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(ToolbarIcon, {
@@ -82,13 +71,17 @@ const Embed = ({
       }),
       icoBtnType: icoBtnType
     }), /*#__PURE__*/_jsx(ImageSelector, {
-      open: open,
+      open: openSetttings,
       onClose: handleClose,
       customProps: customProps,
       onSelectImage: onSelectImage,
-      title: EMBED_LABEL[lbT || format]
+      title: EMBED_LABEL[lbT || format],
+      setUploadStatus: setUploadStatus,
+      uploadStatus: uploadStatus,
+      xhrRef: xhrRef,
+      setUploadPopupOpen: setUploadPopupOpen,
+      fromEmbed: true
     })]
   });
 };
-export default Embed;
-// export default styled(commonStyle)(Embed);
+export default Embed;

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

@@ -1,10 +1,17 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { Node, Transforms, Editor } from "slate";
 import AspectRatioIcon from "@mui/icons-material/AspectRatio";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import Box from "@mui/material/Box";
+import useTheme from "@mui/material/styles/useTheme";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import Grid from "@mui/material/Grid";
+import CircularProgress from "@mui/material/CircularProgress";
+import HighlightOffRoundedIcon from "@mui/icons-material/HighlightOffRounded";
 import useResize from "../../utils/customHooks/useResize";
 import EmbedPopup from "./EmbedPopup";
-import { IconButton, Tooltip, Box, useTheme, useMediaQuery } from "@mui/material";
 import { LinkIcon } from "../../common/iconslist";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
@@ -16,8 +23,11 @@ import { handleLinkType } from "../../utils/helper";
 import { wrapThemeBreakpoints } from "../FreeGrid/breakpointConstants";
 import useCommonStyle from "../../commonStyle";
 import SettingsIcon from "../../assets/svg/SettingsIcon";
+import ImageSelector from "../../common/ImageSelector/ImageSelector";
+import { buildUpdateData } from "../../service/fileupload";
 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 ToolBar = ({
   isEmpty,
   onSettings,
@@ -67,27 +77,105 @@ const ImageContent = props => {
     objectFit,
     webAddress,
     readOnly,
-    setOpenSettings,
     handleImageClick,
     onTouchEnd,
     path,
     theme,
     classes,
-    translation
+    translation,
+    setUploadPopupOpen,
+    uploadStatus,
+    setUploadStatus,
+    uniqueId,
+    uploadTerminator,
+    editor
   } = props;
-  return !url ? !readOnly ? /*#__PURE__*/_jsxs(Box, {
+  const cancelUpload = e => {
+    e.stopPropagation();
+    uploadTerminator(uniqueId, setUploadStatus);
+    Transforms.setNodes(editor, {
+      isUpload: false,
+      isUploading: false,
+      file: null
+    }, {
+      at: path
+    });
+  };
+  return !url ? !readOnly ? /*#__PURE__*/_jsx(Box, {
     component: "button",
     className: "element-empty-btn",
     contentEditable: false,
     onClick: () => {
-      setOpenSettings(true);
+      if (!uploadStatus?.isUploading) setUploadPopupOpen(true);
     },
     sx: {
       ...classes.emptyThumbBtn
     },
-    children: [/*#__PURE__*/_jsx(Icon, {
-      icon: "image"
-    }), translation("Add Image")]
+    children: uploadStatus?.isUploading ? /*#__PURE__*/_jsxs(Grid, {
+      container: true,
+      direction: "row",
+      sx: {
+        justifyContent: "space-between",
+        alignItems: "center"
+      },
+      children: [/*#__PURE__*/_jsx(Grid, {
+        children: /*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          direction: "row",
+          sx: {
+            justifyContent: "space-between",
+            alignItems: "center",
+            gap: 1
+          },
+          children: [/*#__PURE__*/_jsx(Grid, {
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: "image"
+            })
+          }), /*#__PURE__*/_jsx(Grid, {
+            children: /*#__PURE__*/_jsxs(Box, {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "flex-start",
+              justifyContent: "space-between",
+              children: [/*#__PURE__*/_jsx(Box, {
+                className: "truncateText",
+                children: uploadStatus?.fileName
+              }), /*#__PURE__*/_jsxs(Box, {
+                display: "flex",
+                alignItems: "center",
+                gap: 1,
+                marginTop: 1,
+                children: [/*#__PURE__*/_jsx(Box, {
+                  children: uploadStatus?.fileSize
+                }), /*#__PURE__*/_jsx(CircularProgress, {
+                  variant: "determinate",
+                  value: uploadStatus?.uploadPercentage ?? 0,
+                  className: "circularProgress-cls",
+                  size: 15,
+                  thickness: 8
+                }), /*#__PURE__*/_jsx(Box, {
+                  children: `${uploadStatus?.uploadPercentage?.toFixed(0) ?? 0}%`
+                })]
+              })]
+            })
+          })]
+        })
+      }), /*#__PURE__*/_jsx(Grid, {
+        children: /*#__PURE__*/_jsx(HighlightOffRoundedIcon, {
+          className: "uploadCancel",
+          sx: {
+            cursor: "pointer"
+          },
+          onClick: e => {
+            cancelUpload(e);
+          }
+        })
+      })]
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: "image"
+      }), translation("Add Image")]
+    })
   }) : /*#__PURE__*/_jsxs(Box, {
     sx: {
       color: "#64748B !important",
@@ -143,11 +231,20 @@ const Image = props => {
     webAddress,
     isNewTab,
     linkType,
-    framePos
+    framePos,
+    file,
+    isUploading,
+    uniqueId,
+    fromFreeGrid
   } = element;
   const {
     readOnly,
-    translation
+    translation,
+    services,
+    uploadFile,
+    resumeUploadState,
+    uploadTerminator,
+    isUploadInProgress = () => false
   } = customProps;
   const {
     vertical,
@@ -162,6 +259,12 @@ const Image = props => {
   const path = ReactEditor.findPath(editor, element);
   const [openNav, setOpenNav] = useState(false);
   const isEmpty = !url && !readOnly;
+  const [openUploadPopup, setUploadPopupOpen] = useState(false);
+  const [uploadStatus, setUploadStatus] = useState({
+    isUploading: false,
+    uploadPercentage: 0
+  });
+  const xhrRef = useRef(null);
   const getSize = () => {
     if (element?.size === undefined) {
       return {
@@ -217,32 +320,120 @@ const Image = props => {
       console.log(err);
     }
   };
+  const noUploadTracks = () => {
+    setUploadStatus({
+      isUploading: false,
+      uploadPercentage: 0,
+      fileName: null,
+      fileSize: null
+    });
+    Transforms.setNodes(editor, {
+      isUploading: false
+    }, {
+      at: path
+    });
+  };
+  useEffect(() => {
+    const isUploading = isUploadInProgress(uniqueId);
+    if (fromFreeGrid) {
+      if (isUploading) {
+        resumeUploadState(uniqueId, setUploadStatus, onSave, noUploadTracks, "image");
+      } else {
+        if (!isUploading) {
+          handleImageUpload({
+            file: file
+          });
+        }
+      }
+    }
+  }, [uniqueId, isUploading, file]);
   useEffect(() => {
     if (editor && ele && ele[1] !== undefined) {
       const dom = ReactEditor.toDOMNode(editor, element);
       setParentDOM(dom);
       onLoad(getSize());
     }
+    if (uniqueId && isUploading) {
+      resumeUploadState(uniqueId, setUploadStatus, onSave, noUploadTracks, "image");
+    } else if (file && isUploading) {
+      handleImageUpload({
+        file: file
+      });
+    }
   }, []);
   const onSettings = () => {
     setOpenSettings(true);
   };
   const onSave = data => {
     try {
-      const updateData = {
-        ...data
-      };
-      delete updateData.children;
-      Transforms.setNodes(editor, {
-        ...updateData
-      }, {
-        at: path
-      });
-      onClose();
+      if (!data?.url?.file) {
+        const updateData = buildUpdateData(data, url);
+        delete updateData.children;
+        Transforms.select(editor, path);
+        ReactEditor.focus(editor);
+        Transforms.setNodes(editor, {
+          ...updateData,
+          isUpload: false,
+          isUploading: false,
+          file: null
+        }, {
+          at: path
+        });
+        onClose();
+      } else {
+        handleImageUpload({
+          file: data?.url?.file,
+          isUpload: true,
+          setUploadStatus,
+          services: services
+        });
+        onClose();
+        onSave("");
+      }
     } catch (err) {
       console.log(err);
     }
   };
+  const handleImageUpload = async uploadProp => {
+    try {
+      if (uploadProp?.isUpload === false) {
+        onSave(uploadProp?.embedURL);
+      } else {
+        const isAlreadyUploading = isUploadInProgress(uniqueId);
+        let result = {};
+        if (uploadProp?.file && !isAlreadyUploading) {
+          result = await services("uploadFile", uploadProp?.file);
+        }
+        const uploadUrl = result?.data?.[0];
+        if (uploadUrl) {
+          const id = !uniqueId ? crypto?.randomUUID() : uniqueId;
+          const fileEntry = {
+            ...uploadProp,
+            xhrRef,
+            presidnedURL: uploadUrl,
+            status: "uploading"
+          };
+          uploadFile(id, fileEntry, setUploadStatus, onSave, "image");
+          if (!fromFreeGrid) {
+            Transforms.setNodes(editor, {
+              uniqueId: id,
+              isUploading: true
+            }, {
+              at: path
+            });
+          } else {
+            Transforms.setNodes(editor, {
+              isUploading: true
+            }, {
+              at: path
+            });
+          }
+        }
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
   const onClose = () => {
     setOpenSettings(false);
   };
@@ -324,7 +515,16 @@ const Image = props => {
         path: path,
         theme: theme,
         classes: classes,
-        translation: translation
+        translation: translation,
+        setUploadPopupOpen: setUploadPopupOpen,
+        openUploadPopup: openUploadPopup,
+        uploadStatus: uploadStatus,
+        setUploadStatus: setUploadStatus,
+        xhrRef: xhrRef,
+        onClose: onClose,
+        uniqueId: uniqueId,
+        uploadTerminator: uploadTerminator,
+        editor: editor
       }), url && frames[frame] ? /*#__PURE__*/_jsx(Box, {
         component: "div",
         className: "image-frame",
@@ -372,7 +572,20 @@ const Image = props => {
       navValue: webAddress,
       openInNewTab: isNewTab,
       customProps: customProps
-    }) : null]
+    }) : null, openUploadPopup && /*#__PURE__*/_jsx(ImageSelector, {
+      open: true,
+      title: "Image",
+      onClose: () => setUploadPopupOpen(false),
+      customProps: customProps,
+      onSelectImage: img => {
+        handleImageUpload(img);
+        setUploadPopupOpen(false);
+      },
+      openUploadPopup: openUploadPopup,
+      setUploadPopupOpen: setUploadPopupOpen,
+      setUploadStatus: setUploadStatus,
+      xhrRef: xhrRef
+    })]
   });
 };
 export default Image;