@flozy/editor 11.2.2 → 11.2.4

package/dist/Editor/common/ImageSelector/Options/RecentUploads.js

@@ -0,0 +1,483 @@
+import React, { useEffect, useState, useCallback, useRef, useMemo } from "react";
+import { Box, Grid, Typography, CircularProgress, ImageListItem, ImageListItemBar, IconButton } from "@mui/material";
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import { useEditorContext } from "../../../hooks/useMouseMove";
+
+// Memoized RecentItem component to prevent unnecessary re-renders
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const RecentItem = /*#__PURE__*/React.memo(({
+  item,
+  iconRef,
+  onSelect,
+  theme
+}) => {
+  // Simple lazy loading image component
+  const LazyImage = /*#__PURE__*/React.memo(({
+    src,
+    alt,
+    ...props
+  }) => {
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [isInView, setIsInView] = useState(false);
+    const imgRef = useRef();
+    useEffect(() => {
+      const observer = new IntersectionObserver(([entry]) => {
+        if (entry.isIntersecting) {
+          setIsInView(true);
+          observer.disconnect();
+        }
+      }, {
+        threshold: 0.1
+      });
+      if (imgRef.current) {
+        observer.observe(imgRef.current);
+      }
+      return () => observer.disconnect();
+    }, []);
+    const {
+      sx,
+      ...restProps
+    } = props;
+    return /*#__PURE__*/_jsxs(Box, {
+      ref: imgRef,
+      ...restProps,
+      sx: {
+        ...sx,
+        position: 'relative',
+        overflow: 'hidden'
+      },
+      children: [isInView && /*#__PURE__*/_jsx(Box, {
+        component: "img",
+        src: src,
+        alt: alt,
+        onLoad: () => setIsLoaded(true),
+        sx: {
+          width: '100%',
+          height: '100%',
+          objectFit: sx?.objectFit || 'cover',
+          borderRadius: sx?.borderRadius || 0,
+          opacity: isLoaded ? 1 : 0,
+          transition: 'opacity 0.3s ease-in-out',
+          willChange: 'opacity'
+        }
+      }), !isLoaded && isInView && /*#__PURE__*/_jsx(Box, {
+        sx: {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: 'grey.100',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          borderRadius: sx?.borderRadius || 0
+        },
+        children: /*#__PURE__*/_jsx(CircularProgress, {
+          size: 24
+        })
+      })]
+    });
+  }, (prevProps, nextProps) => {
+    // Only re-render if src changes
+    return prevProps.src === nextProps.src && prevProps.alt === nextProps.alt;
+  });
+  LazyImage.displayName = 'LazyImage';
+  return /*#__PURE__*/_jsx(Grid, {
+    item: true,
+    xs: 4,
+    sx: {
+      cursor: "pointer",
+      "&:hover": {
+        opacity: 0.8
+      }
+    },
+    children: /*#__PURE__*/_jsxs(ImageListItem, {
+      sx: {
+        padding: "2px",
+        overflow: "hidden"
+      },
+      children: [(item.type === "image" || item.category === "IMAGE") && /*#__PURE__*/_jsx(LazyImage, {
+        src: item.file_url || item.url,
+        alt: item.name,
+        sx: {
+          width: "100%",
+          height: 145,
+          objectFit: "cover",
+          borderRadius: 1
+        }
+      }), (item.type === "video" || item.category === "VIDEO") && /*#__PURE__*/_jsx(Box, {
+        component: "video",
+        src: item.file_url || item.url,
+        sx: {
+          width: "100%",
+          height: 145,
+          borderRadius: 1,
+          objectFit: "cover"
+        }
+      }), (item.type === "document" || item.category === "DOCUMENT") && /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          p: 2,
+          border: 1,
+          borderColor: theme?.palette?.editor?.uploadFileBorder || "#F3F3F3",
+          borderRadius: 1,
+          textAlign: "center",
+          height: 145,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: theme?.palette?.editor?.uploadFileBg || "#F3F3F3"
+        },
+        children: [/*#__PURE__*/_jsx(Typography, {
+          sx: {
+            fontSize: "24px",
+            mb: 1,
+            color: theme?.palette?.editor?.textColor || "#000000"
+          },
+          children: "\uD83D\uDCC4"
+        }), /*#__PURE__*/_jsx(Typography, {
+          sx: {
+            fontSize: "12px",
+            fontWeight: 500,
+            color: theme?.palette?.editor?.textColor || "#000000",
+            textAlign: "center",
+            wordBreak: "break-word",
+            lineHeight: 1.2,
+            maxHeight: "60px",
+            overflow: "hidden",
+            display: "-webkit-box",
+            WebkitLineClamp: 3,
+            WebkitBoxOrient: "vertical"
+          },
+          children: item.name || 'Untitled Document'
+        })]
+      }), /*#__PURE__*/_jsx(ImageListItemBar, {
+        sx: {
+          background: "none",
+          "& .MuiImageListItemBar-actionIcon": {
+            position: "absolute",
+            top: 8,
+            right: 8,
+            zIndex: 1
+          }
+        },
+        position: "top",
+        actionPosition: "right",
+        actionIcon: /*#__PURE__*/_jsx(IconButton, {
+          onClick: e => {
+            e.stopPropagation();
+            onSelect(item);
+          },
+          sx: {
+            transition: 'none',
+            '&:hover': {
+              backgroundColor: 'transparent'
+            }
+          },
+          children: /*#__PURE__*/_jsx(CheckCircleIcon, {
+            ref: iconRef,
+            sx: {
+              color: "#ccc",
+              transition: 'color 0.15s ease-in-out',
+              willChange: 'color'
+            }
+          })
+        })
+      })]
+    })
+  });
+}, (prevProps, nextProps) => {
+  // Strict comparison function for React.memo
+  // Return true if props are equal (don't re-render), false if different (re-render)
+  // Note: iconRef is ignored as it's stable and doesn't cause re-renders
+
+  // Compare item properties - use strict equality for object reference first
+  if (prevProps.item !== nextProps.item) {
+    // If item reference changed, check if properties are the same
+    if (prevProps.item.id !== nextProps.item.id || prevProps.item.file_url !== nextProps.item.file_url || prevProps.item.url !== nextProps.item.url || prevProps.item.name !== nextProps.item.name || prevProps.item.type !== nextProps.item.type || prevProps.item.category !== nextProps.item.category) {
+      return false; // Re-render needed
+    }
+  }
+
+  // Compare other props (iconRef is ignored as it's stable)
+  return prevProps.onSelect === nextProps.onSelect && prevProps.theme === nextProps.theme;
+});
+RecentItem.displayName = 'RecentItem';
+const RecentUploads = ({
+  onUploaded,
+  customProps,
+  title
+}) => {
+  const {
+    theme
+  } = useEditorContext();
+  // Memoize theme to prevent unnecessary re-renders if theme object reference changes
+  const stableTheme = useMemo(() => theme, [theme]);
+  const [recent, setRecent] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [selectedUrl, setSelectedUrl] = useState(null);
+  const [pagination, setPagination] = useState({
+    total: 0,
+    limit: 20,
+    offset: 0
+  });
+  const observerRef = useRef();
+  const loadMoreRef = useRef();
+
+  // Use ref to track selected URL without causing re-renders for comparison
+  const selectedUrlRef = useRef(null);
+
+  // Ref map to track icon refs for each item URL - allows imperative updates without re-renders
+  const iconRefsMap = useRef(new Map());
+
+  // Memoize onUploaded callback to ensure it doesn't change
+  const stableOnUploaded = useCallback((url, source) => {
+    onUploaded(url, source);
+  }, [onUploaded]);
+
+  // Category mapping
+  const categoryMap = {
+    'image': 'IMAGE',
+    'video': 'VIDEO',
+    'document': 'DOCUMENT'
+  };
+  const fetchRecent = useCallback(async (offset = 0, append = false) => {
+    try {
+      const category = categoryMap[title] || title.toLowerCase();
+
+      // Try main app service first, fallback to direct implementation
+      let res;
+      if (customProps.services && typeof customProps.services === 'function') {
+        try {
+          res = await customProps.services('getRecentUploads', {
+            category,
+            limit: pagination.limit,
+            offset
+          });
+        } catch (error) {
+          console.warn('Main app service failed, falling back to direct API call:', error);
+        }
+      }
+
+      // Handle validation errors from getRecentUploads
+      if (res && res.error) {
+        console.warn("Recent uploads validation error:", res.error);
+        if (!append) {
+          setRecent([]);
+          setPagination({
+            total: 0,
+            limit: 20,
+            offset: 0
+          });
+        }
+      } else if (res) {
+        // Handle both direct data array and nested data structure
+        const dataArray = res.data?.data || res.data || [];
+        const paginationData = res.data?.pagination || res.pagination || {
+          total: res.data?.total || res.total || 0,
+          limit: 20,
+          offset: 0,
+          hasMore: res.data?.hasMore || false
+        };
+        console.log("RecentUploads - Processing response:", {
+          res,
+          dataArray,
+          paginationData,
+          dataArrayLength: dataArray.length
+        });
+        if (append) {
+          setRecent(prev => [...prev, ...dataArray]);
+        } else {
+          setRecent(dataArray);
+        }
+        setPagination(paginationData);
+      }
+    } catch (err) {
+      console.error("Failed to fetch recent uploads", err);
+      if (!append) {
+        setRecent([]);
+        setPagination({
+          total: 0,
+          limit: 20,
+          offset: 0
+        });
+      }
+    }
+  }, [customProps, title, pagination.limit, categoryMap]);
+  const loadMore = useCallback(() => {
+    const hasMore = recent.length < pagination.total;
+    if (!loadingMore && hasMore) {
+      setLoadingMore(true);
+      fetchRecent(pagination.offset + pagination.limit, true).finally(() => {
+        setLoadingMore(false);
+      });
+    }
+  }, [loadingMore, recent.length, pagination.total, pagination.offset, pagination.limit, fetchRecent]);
+  useEffect(() => {
+    setLoading(true);
+    fetchRecent(0, false).finally(() => {
+      setLoading(false);
+    });
+  }, [customProps, title]);
+
+  // Intersection observer for infinite scroll
+  useEffect(() => {
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+    }
+    const hasMore = recent.length < pagination.total;
+    observerRef.current = new IntersectionObserver(entries => {
+      if (entries[0].isIntersecting && hasMore && !loadingMore) {
+        loadMore();
+      }
+    }, {
+      threshold: 0.1
+    });
+    if (loadMoreRef.current) {
+      observerRef.current.observe(loadMoreRef.current);
+    }
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [recent.length, pagination.total, loadingMore, loadMore]);
+  const hasMoreContent = recent.length < pagination.total && !loadingMore;
+
+  // Memoize recent array reference - only recreate if length or item IDs change
+  // This ensures stableRecent only changes when items actually change
+  const recentKey = useMemo(() => {
+    return recent.length > 0 ? `${recent.length}-${recent.map(item => item.id).join('-')}` : 'empty';
+  }, [recent]);
+
+  // Stable recent array - only changes when items actually change
+  const stableRecent = useMemo(() => recent, [recentKey]);
+  const handleItemSelect = useCallback(item => {
+    const imgUrl = item.file_url || item.url;
+    const prevSelectedUrl = selectedUrlRef.current;
+
+    // Update previously selected icon to gray (if any)
+    if (prevSelectedUrl && prevSelectedUrl !== imgUrl) {
+      const prevIconRef = iconRefsMap.current.get(prevSelectedUrl);
+      if (prevIconRef?.current) {
+        prevIconRef.current.style.color = "#ccc";
+      }
+    }
+
+    // Update newly selected icon to blue
+    const newIconRef = iconRefsMap.current.get(imgUrl);
+    if (newIconRef?.current) {
+      newIconRef.current.style.color = "#2563eb";
+    }
+
+    // Update ref immediately
+    selectedUrlRef.current = imgUrl;
+
+    // Update state only for external tracking (doesn't cause re-renders of items)
+    setSelectedUrl(imgUrl);
+
+    // Immediately call onUploaded to enable the Save button
+    // Pass "recent" as the source to indicate this is from recent uploads
+    stableOnUploaded(imgUrl, "recent");
+  }, [stableOnUploaded]);
+
+  // Initialize icon refs when items change
+  useEffect(() => {
+    stableRecent.forEach(item => {
+      const imgUrl = item.file_url || item.url;
+      if (!iconRefsMap.current.has(imgUrl)) {
+        iconRefsMap.current.set(imgUrl, /*#__PURE__*/React.createRef());
+      }
+    });
+  }, [stableRecent]);
+
+  // Update icon colors when selection changes (without re-rendering components)
+  useEffect(() => {
+    iconRefsMap.current.forEach((iconRef, imgUrl) => {
+      if (iconRef?.current) {
+        iconRef.current.style.color = selectedUrl === imgUrl ? "#2563eb" : "#ccc";
+      }
+    });
+  }, [selectedUrl]);
+  if (loading) return /*#__PURE__*/_jsx(Box, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'center',
+      mt: 2
+    },
+    children: /*#__PURE__*/_jsx(CircularProgress, {
+      size: 24,
+      sx: {
+        color: stableTheme?.palette?.editor?.activeColor || "#2563EB"
+      }
+    })
+  });
+  console.log("RecentUploads - Rendering state:", {
+    recent,
+    recentLength: recent.length,
+    pagination,
+    title,
+    selectedUrl
+  });
+  if (!recent.length) return /*#__PURE__*/_jsxs(Typography, {
+    sx: {
+      textAlign: "center",
+      mt: 2,
+      color: stableTheme?.palette?.editor?.textColor || "#000000",
+      fontSize: "14px",
+      fontWeight: 500
+    },
+    children: ["No recent ", title.toLowerCase(), " found."]
+  });
+  return /*#__PURE__*/_jsxs(Box, {
+    children: [/*#__PURE__*/_jsx(Grid, {
+      container: true,
+      spacing: 2,
+      sx: {
+        mt: 1
+      },
+      children: stableRecent.map(item => {
+        const imgUrl = item.file_url || item.url;
+        // Get or create ref (should already exist from useEffect, but fallback for safety)
+        if (!iconRefsMap.current.has(imgUrl)) {
+          iconRefsMap.current.set(imgUrl, /*#__PURE__*/React.createRef());
+        }
+        return /*#__PURE__*/_jsx(RecentItem, {
+          item: item,
+          iconRef: iconRefsMap.current.get(imgUrl),
+          onSelect: handleItemSelect,
+          theme: stableTheme
+        }, item.id);
+      })
+    }), hasMoreContent && /*#__PURE__*/_jsx(Box, {
+      ref: loadMoreRef,
+      sx: {
+        display: 'flex',
+        justifyContent: 'center',
+        mt: 2,
+        minHeight: 50
+      },
+      children: loadingMore && /*#__PURE__*/_jsx(CircularProgress, {
+        size: 24,
+        sx: {
+          color: stableTheme?.palette?.editor?.activeColor || "#2563EB"
+        }
+      })
+    })]
+  });
+};
+
+// Memoize RecentUploads with custom comparison to prevent unnecessary re-renders
+export default /*#__PURE__*/React.memo(RecentUploads, (prevProps, nextProps) => {
+  // Only re-render if these props actually change
+  const propsEqual = prevProps.onUploaded === nextProps.onUploaded && prevProps.title === nextProps.title;
+
+  // Deep compare customProps.services since that's what we actually use
+  const customPropsEqual = prevProps.customProps === nextProps.customProps || prevProps.customProps?.services === nextProps.customProps?.services && prevProps.customProps?.translation === nextProps.customProps?.translation;
+
+  // Return true if props are equal (don't re-render), false if different (re-render)
+  return propsEqual && customPropsEqual;
+});

package/dist/Editor/common/ImageSelector/Options/Upload.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { Grid } from "@mui/material";
+import UploaderWithProgress from "../../UploaderWithProgress";
 import Uploader from "../../Uploader";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Upload = props => {
@@ -9,11 +10,31 @@ const Upload = props => {
     onUploaded,
     customProps,
     disableUpload = false,
-    title
+    title,
+    setS3UploadProp,
+    s3UploadProp,
+    disableProgress,
+    setUniqueId,
+    uniqueId
   } = props;
   const onDone = img => {
     onUploaded(img);
   };
+  const commonProps = {
+    classes,
+    value,
+    data: {
+      key: "url"
+    },
+    customProps,
+    onUploaded: onDone,
+    disableUpload,
+    title,
+    setS3UploadProp,
+    s3UploadProp,
+    setUniqueId,
+    uniqueId
+  };
   return /*#__PURE__*/_jsx(Grid, {
     item: true,
     xs: 12,
@@ -22,16 +43,10 @@ const Upload = props => {
       height: '100%'
     },
     className: "ims-right",
-    children: /*#__PURE__*/_jsx(Uploader, {
-      classes: classes,
-      value: value,
-      data: {
-        key: "url"
-      },
-      customProps: customProps,
-      onUploaded: onDone,
-      disableUpload: disableUpload,
-      title: title
+    children: disableProgress ? /*#__PURE__*/_jsx(Uploader, {
+      ...commonProps
+    }) : /*#__PURE__*/_jsx(UploaderWithProgress, {
+      ...commonProps
     })
   });
 };

package/dist/Editor/common/ImageSelector/Styles.js

@@ -76,7 +76,7 @@ const ImageSelectorStyles = theme => ({
       background: theme?.palette?.editor?.deviderBgColor,
       "@media only screen and (min-width: 899px)": {
         margin: "0px 24px",
-        width: 'calc(100% - 48px)'
+        width: "calc(100% - 48px)"
       }
     },
     "& .primaryBtn": {
@@ -104,12 +104,6 @@ const ImageSelectorStyles = theme => ({
       marginRight: "8px !important"
     },
     "& .MuiGrid-root": {
-      "&::-webkit-scrollbar-thumb": {
-        background: `none !important`
-      },
-      "&::-webkit-scrollbar-track": {
-        visibility: "hidden"
-      },
       "&::-webkit-scrollbar-thumb": {
         background: `${theme?.palette?.editor?.brainPopupScroll} !important`
       },
@@ -118,10 +112,10 @@ const ImageSelectorStyles = theme => ({
       }
     },
     "& .MuiImageList-root": {
-      margin: '0px'
+      margin: "0px"
     },
     "& .MuiDialogContent-root": {
-      padding: '20px 24px 5px 24px'
+      padding: "20px 24px 5px 24px"
     }
   },
   titleTypo: {

package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js

@@ -68,7 +68,8 @@ const Settings = props => {
             editor: editor,
             path: path,
             customProps: customProps,
-            theme: theme
+            theme: theme,
+            onClose: onClose
           }) : null
         })]
       })

package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js

@@ -8,7 +8,8 @@ const AppHeaderSettings = props => {
   const {
     editor,
     path,
-    customProps
+    customProps,
+    onClose
   } = props;
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path, 0];
@@ -27,7 +28,7 @@ const AppHeaderSettings = props => {
     });
   };
   const handleClose = () => {
-    console.log("close");
+    onClose();
   };
   return /*#__PURE__*/_jsx(Box, {
     component: "div",

package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js

@@ -8,7 +8,8 @@ const BoxSettings = props => {
   const {
     editor,
     path,
-    customProps
+    customProps,
+    onClose
   } = props;
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path];
@@ -27,7 +28,7 @@ const BoxSettings = props => {
     });
   };
   const handleClose = () => {
-    console.log("close");
+    onClose();
   };
   return /*#__PURE__*/_jsx(Box, {
     component: "div",

package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js

@@ -8,7 +8,8 @@ const ButtonSettings = props => {
   const {
     editor,
     path,
-    customProps
+    customProps,
+    onClose
   } = props;
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path, 0];
@@ -28,7 +29,7 @@ const ButtonSettings = props => {
     });
   };
   const handleClose = () => {
-    console.log("close");
+    onClose();
   };
   return /*#__PURE__*/_jsx(Box, {
     component: "div",

package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js

@@ -8,7 +8,8 @@ const CodeSettings = props => {
   const {
     editor,
     path,
-    customProps
+    customProps,
+    onClose
   } = props;
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path, 0];
@@ -27,7 +28,7 @@ const CodeSettings = props => {
     });
   };
   const handleClose = () => {
-    console.log("close");
+    onClose();
   };
   return /*#__PURE__*/_jsx(Box, {
     component: "div",

package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js

@@ -12,7 +12,8 @@ const FormSettings = props => {
   const {
     editor,
     path,
-    customProps
+    customProps,
+    onClose
   } = props;
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path];
@@ -56,7 +57,7 @@ const FormSettings = props => {
     }
   };
   const handleClose = () => {
-    console.log("close");
+    onClose();
   };
   const muiTheme = createTheme({
     components: {