@flozy/editor 11.1.0 → 11.1.1

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

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

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

@@ -1,17 +1,10 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, 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";
@@ -23,11 +16,8 @@ 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,
@@ -83,106 +73,21 @@ const ImageContent = props => {
     path,
     theme,
     classes,
-    translation,
-    setUploadPopupOpen,
-    uploadStatus,
-    setUploadStatus,
-    uniqueId,
-    uploadTerminator,
-    editor
+    translation
   } = props;
-  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, {
+  return !url ? !readOnly ? /*#__PURE__*/_jsxs(Box, {
     component: "button",
     className: "element-empty-btn",
     contentEditable: false,
     onClick: () => {
-      if (!uploadStatus?.isUploading) setUploadPopupOpen(true);
+      setOpenSettings(true);
     },
     sx: {
       ...classes.emptyThumbBtn
     },
-    children: uploadStatus?.isUploading ? /*#__PURE__*/_jsxs(Grid, {
-      container: true,
-      direction: "row",
-      style: {
-        display: "flex",
-        justifyContent: "space-between"
-      },
-      children: [/*#__PURE__*/_jsx(Grid, {
-        style: {
-          width: "80%"
-        },
-        children: /*#__PURE__*/_jsxs(Grid, {
-          container: true,
-          direction: "row",
-          sx: {
-            justifyContent: "flex-start",
-            alignItems: "center"
-            // gap: 1,
-          },
-          children: [/*#__PURE__*/_jsx(Grid, {
-            children: /*#__PURE__*/_jsx(Icon, {
-              icon: "image"
-            })
-          }), /*#__PURE__*/_jsx(Grid, {
-            style: {
-              width: "80%"
-            },
-            children: /*#__PURE__*/_jsxs(Box, {
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "flex-start",
-              justifyContent: "flex-start",
-              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")]
-    })
+    children: [/*#__PURE__*/_jsx(Icon, {
+      icon: "image"
+    }), translation("Add Image")]
   }) : /*#__PURE__*/_jsxs(Box, {
     sx: {
       color: "#64748B !important",
@@ -238,20 +143,11 @@ const Image = props => {
     webAddress,
     isNewTab,
     linkType,
-    framePos,
-    file,
-    isUploading,
-    uniqueId,
-    fromFreeGrid
+    framePos
   } = element;
   const {
     readOnly,
-    translation,
-    services,
-    uploadFile,
-    resumeUploadState,
-    uploadTerminator,
-    isUploadInProgress = () => false
+    translation
   } = customProps;
   const {
     vertical,
@@ -266,12 +162,6 @@ 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 {
@@ -327,120 +217,32 @@ 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 {
-      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("");
-      }
+      const updateData = {
+        ...data
+      };
+      delete updateData.children;
+      Transforms.setNodes(editor, {
+        ...updateData
+      }, {
+        at: path
+      });
+      onClose();
     } 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);
   };
@@ -522,16 +324,7 @@ const Image = props => {
         path: path,
         theme: theme,
         classes: classes,
-        translation: translation,
-        setUploadPopupOpen: setUploadPopupOpen,
-        openUploadPopup: openUploadPopup,
-        uploadStatus: uploadStatus,
-        setUploadStatus: setUploadStatus,
-        xhrRef: xhrRef,
-        onClose: onClose,
-        uniqueId: uniqueId,
-        uploadTerminator: uploadTerminator,
-        editor: editor
+        translation: translation
       }), url && frames[frame] ? /*#__PURE__*/_jsx(Box, {
         component: "div",
         className: "image-frame",
@@ -579,20 +372,7 @@ const Image = props => {
       navValue: webAddress,
       openInNewTab: isNewTab,
       customProps: customProps
-    }) : 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
-    })]
+    }) : null]
   });
 };
 export default Image;