@flozy/editor 11.2.3 → 11.2.4

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

@@ -1,9 +1,15 @@
 import React, { useState, useEffect, useRef } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { Node, Transforms } from "slate";
-import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
+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 Grid from "@mui/material/Grid";
+import CircularProgress from "@mui/material/CircularProgress";
 import DeleteIcon from "@mui/icons-material/Delete";
 import AspectRatioIcon from "@mui/icons-material/AspectRatio";
+import HighlightOffRoundedIcon from "@mui/icons-material/HighlightOffRounded";
 import Icon from "../../common/Icon";
 import useResize from "../../utils/customHooks/useResize";
 import EmbedPopup from "./EmbedPopup";
@@ -13,13 +19,19 @@ import { getEmbedURL } from "../../helper";
 import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import useCommonStyle from "../../commonStyle";
+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";
 const TYPE_LABELS = {
   calendly: "Embed Calendly or Other",
   video: "Embed Video or Other",
   image: "Embed Image or Other"
 };
+const detectUrlType = url => {
+  if (typeof url !== "string") return "iframe";
+  return /\.(mp4|webm|ogg|mov|avi|mkv|flv|wmv)$/i.test(url.trim()) ? "video" : "iframe";
+};
 const VideoContent = props => {
   const {
     resizing,
@@ -32,12 +44,26 @@ const VideoContent = props => {
     videoSX
   } = props;
   const iframeRef = useRef(null);
+  const mediaType = detectUrlType(embedURL);
   useEffect(() => {
     if (iframeRef.current) {
       iframeRef.current.src = "about:blank"; // reloading the iframe
       iframeRef.current.src = embedURL;
     }
   }, [embedURL, iframeRef.current]);
+  const commonSx = {
+    border: "none",
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    maxWidth: "100%",
+    left: 0,
+    ...(gradientBorder(borderColor) || {}),
+    borderWidth: borderWidth || "1px",
+    borderStyle: borderStyle || "solid",
+    background: bgColor || "transparent",
+    ...videoSX
+  };
   return resizing ? /*#__PURE__*/_jsx("div", {
     style: {
       width: "100%",
@@ -51,24 +77,14 @@ const VideoContent = props => {
       icon: "videoPlayer"
     })
   }) : /*#__PURE__*/_jsx(Box, {
-    ref: iframeRef,
-    component: "iframe",
+    component: mediaType,
+    ref: mediaType === "iframe" ? iframeRef : undefined,
+    src: embedURL,
+    controls: mediaType === "video",
+    allowFullScreen: mediaType === "iframe",
     className: "embedd-iframe",
-    sx: {
-      border: "none",
-      position: "absolute",
-      width: "100%",
-      height: "100%",
-      maxWidth: "100%",
-      left: "0px",
-      ...(gradientBorder(borderColor) || {}),
-      borderWidth: borderWidth || "1px",
-      borderStyle: borderStyle || "solid",
-      background: bgColor || "transparent",
-      ...videoSX
-    },
-    title: alt,
-    allowFullScreen: true
+    sx: commonSx,
+    title: alt
   });
 };
 const VideoPlaceholder = props => {
@@ -78,18 +94,104 @@ const VideoPlaceholder = props => {
     onSettings,
     classes,
     type,
-    translation
+    translation,
+    uploadStatus,
+    setUploadStatus,
+    uploadTerminator,
+    uniqueId,
+    editor,
+    path
+    // embedURL, // Unused in VideoPlaceholder component
   } = 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",
-    onClick: onSettings,
+    onClick: !uploadStatus?.isUploading ? onSettings : () => {},
     sx: {
       ...classes.emptyThumbBtn
     },
-    children: [/*#__PURE__*/_jsx(Icon, {
-      icon: "video"
-    }), TYPE_LABELS[type] || translation("Embed Video or Other")]
+    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: "video"
+      }), TYPE_LABELS[type] || translation("Embed Video or Other")]
+    })
   }) : /*#__PURE__*/_jsxs(Box, {
     sx: {
       color: "#64748B !important",
@@ -120,14 +222,23 @@ const Video = ({
     xsHidden,
     width: oldWidth,
     bannerSpacing,
-    aspectRatio
+    aspectRatio,
+    file,
+    isUploading,
+    uniqueId,
+    fromFreeGrid
   } = element;
   const editor = useSlateStatic();
   const [openSetttings, setOpenSettings] = useState(false);
   const [parentDOM, setParentDOM] = useState(null);
   const {
     readOnly,
-    translation
+    translation,
+    services,
+    uploadFile,
+    resumeUploadState,
+    uploadTerminator,
+    isUploadInProgress = () => false
   } = customProps;
   const {
     vertical,
@@ -148,6 +259,59 @@ const Video = ({
       return element?.size || {};
     }
   };
+  const xhrRef = useRef(null);
+  const trackingProcessedRef = useRef(false);
+  const [openUploadPopup, setUploadPopupOpen] = useState(false);
+  const [uploadStatus, setUploadStatus] = useState({
+    isUploading: false,
+    uploadPercentage: 0
+  });
+  const onClickUpload = () => {
+    setUploadPopupOpen(true);
+  };
+  const onSelectVideo = async video => {
+    handleClose();
+    try {
+      // Check if this is a recent upload (has source "recent") or manual URL entry (isUpload === false)
+      if (video?.isUpload === false || video?.source === "recent") {
+        // Pass the full video object to preserve source information
+        onSave(video, false); // Manual URL entry or recent upload, not upload completion
+        return;
+      } else {
+        // Reset tracking flag for new upload
+        trackingProcessedRef.current = false;
+        const id = !uniqueId ? crypto?.randomUUID() : uniqueId;
+        const result = await services("uploadFile", video?.file);
+        const uploadUrl = result?.data?.[0];
+        const fileEntry = {
+          ...video,
+          xhrRef,
+          presidnedURL: uploadUrl,
+          status: "uploading"
+        };
+        uploadFile(id, fileEntry, setUploadStatus, onSave, "video");
+        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 handleClose = () => {
+    setUploadPopupOpen(false);
+  };
   const [size, onMouseDown, resizing, onLoad] = useResize({
     parentDOM,
     size: getSize(),
@@ -161,12 +325,49 @@ const Video = ({
   });
   const arr = Array.from(Node.elements(editor));
   const ele = arr.find(([elem]) => element === elem);
+  const noUploadTracks = () => {
+    setUploadStatus({
+      isUploading: false,
+      uploadPercentage: 0,
+      fileName: null,
+      fileSize: null
+    });
+  };
+  useEffect(() => {
+    const isUploading = isUploadInProgress(uniqueId);
+    if (fromFreeGrid) {
+      if (isUploading) {
+        resumeUploadState(uniqueId, setUploadStatus, onSave, noUploadTracks, "image");
+      } else {
+        if (!isUploading && file) {
+          onSelectVideo({
+            file: file
+          });
+        }
+      }
+    }
+    return () => {
+      // Transforms.setNodes(editor, { isUploading: false }, { at: path });
+    };
+  }, [uniqueId, isUploading, file]);
   useEffect(() => {
     if (editor && ele && ele[1] !== undefined) {
       const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
       setParentDOM(dom);
       onLoad(element?.size || {});
     }
+    if (!fromFreeGrid) {
+      if (uniqueId && isUploading) {
+        resumeUploadState(uniqueId, setUploadStatus, onSave, noUploadTracks, "video");
+      } else if (file && isUploading) {
+        onSelectVideo({
+          file: file
+        });
+      }
+    }
+    return () => {
+      // xhrRef?.current?.abort();
+    };
   }, []);
   const ToolBar = () => {
     return /*#__PURE__*/_jsxs("div", {
@@ -192,15 +393,116 @@ const Video = ({
   const onSettings = () => {
     setOpenSettings(true);
   };
-  const onSave = data => {
+  const onSave = async (data, isUploadCompletion = false) => {
+    // Determine if this is from recent uploads or choose assets - check both object and string data
+    const isFromRecentUploads = typeof data === 'object' && data?.source === "recent" || typeof data === 'string' && data.includes('recent');
+
+    // Only track if this is NOT an upload completion AND we haven't processed tracking yet
+    // Upload completions will be tracked by the uploadFile function in main app
+    // Also skip tracking if the source is "recent" (selected from recent uploads or choose assets)
+    if (data && !isUploadCompletion && !trackingProcessedRef.current && !isFromRecentUploads) {
+      // Mark tracking as processed
+      trackingProcessedRef.current = true;
+      try {
+        // Import utility functions
+        const {
+          getVideoMimeTypeFromExtension,
+          extractFileInfoFromUrl
+        } = await import("../../utils/attachments");
+
+        // Extract URL from data (could be string or object)
+        const urlToTrack = typeof data === 'string' ? data : data?.embedURL || data?.url;
+        if (urlToTrack) {
+          // Extract filename and extension from URL
+          const {
+            filename,
+            extension
+          } = extractFileInfoFromUrl(urlToTrack);
+          const mimeType = getVideoMimeTypeFromExtension(extension);
+          const trackingData = {
+            file_url: urlToTrack,
+            name: filename || 'Untitled Video',
+            mime_type: mimeType,
+            resource_type: "flozy_editor",
+            resource_id: customProps?.page_id,
+            agency_id: customProps?.agency_id,
+            uploaded_by: customProps?.user_id,
+            category: "video",
+            status: 1,
+            created_on: new Date().toISOString()
+          };
+
+          // Try main app service first, fallback to direct implementation
+          if (customProps.services && typeof customProps.services === 'function') {
+            try {
+              // const result = await customProps.services('trackEditorUploads', {
+              await customProps.services('trackEditorUploads', {
+                fileData: trackingData,
+                category: 'video'
+              });
+            } catch (error) {
+              console.warn('Main app service failed, falling back to direct tracking:', error);
+            }
+          }
+        }
+      } catch (error) {
+        console.error("Failed to track video URL:", error);
+      }
+    } else {}
+
+    // Data insertion logic - ALWAYS execute regardless of tracking
     try {
-      const updateData = {
-        ...data
-      };
+      let updateData = {};
+
+      // Handle different data types more robustly
+      if (typeof data === "string") {
+        // String URL - could be from recent uploads or manual entry
+        updateData = {
+          url: data,
+          isUploading: false
+        };
+      } else if (data && typeof data === "object") {
+        // Object data - check if it has the expected structure
+        if (data.embedURL || data.url) {
+          // This is from recent uploads or other sources with proper structure
+          updateData = {
+            url: data.embedURL || data.url,
+            isUploading: false,
+            source: data.source // Preserve source information
+          };
+        } else if (typeof data?.url !== "string") {
+          // This is a file upload object
+          updateData = {
+            ...data,
+            url: ""
+          };
+          onSelectVideo({
+            file: data?.url?.file,
+            isUpload: true,
+            setUploadStatus,
+            services: customProps?.services
+          });
+        } else {
+          // Fallback for other object structures
+          updateData = data;
+        }
+      } else {
+        // Fallback
+        updateData = {
+          url: "",
+          isUploading: false
+        };
+      }
       delete updateData.children;
-      Transforms.setNodes(editor, {
-        ...updateData
-      }, {
+      Transforms.select(editor, path);
+      ReactEditor.focus(editor);
+      const finalUpdateData = {
+        ...updateData,
+        isUpload: false,
+        isUploading: false,
+        file: null
+      };
+      Transforms.setNodes(editor, finalUpdateData, {
         at: path
       });
       onClose();
@@ -281,13 +583,19 @@ const Video = ({
       children: [!readOnly && url && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(VideoPlaceholder, {
         ...element,
         embedURL: embedURL,
-        onSettings: onSettings,
+        onSettings: onClickUpload,
         videoSX: videoSX,
         url: url,
         readOnly: readOnly,
         resizing: resizing,
         classes: classes,
-        translation: translation
+        translation: translation,
+        uploadStatus: uploadStatus,
+        setUploadStatus: setUploadStatus,
+        uploadTerminator: uploadTerminator,
+        uniqueId: uniqueId,
+        editor: editor,
+        path: path
       }), !readOnly && url ? /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {
@@ -295,6 +603,18 @@ const Video = ({
         },
         className: "resize-br visible-on-hover",
         children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
+      }) : null, openUploadPopup ? /*#__PURE__*/_jsx(ImageSelector, {
+        open: true,
+        Add: true,
+        commentMore: true,
+        actions: true,
+        title: "Video",
+        onClose: handleClose,
+        customProps: customProps,
+        onSelectImage: onSelectVideo,
+        setUploadPopupOpen: setUploadPopupOpen,
+        setUploadStatus: setUploadStatus,
+        xhrRef: xhrRef
       }) : null]
     }), children]
   });

package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js

@@ -52,6 +52,12 @@ const EmbedScriptPopup = props => {
   const handleChange = e => {
     setCode(e.target.value);
   };
+  const handleMouseDown = e => {
+    e.stopPropagation();
+  };
+  const handleMouseUp = e => {
+    e.stopPropagation();
+  };
   const onSubmit = async () => {
     updateApiStatus({
       loading: true
@@ -135,12 +141,9 @@ const EmbedScriptPopup = props => {
         children: [/*#__PURE__*/_jsx("textarea", {
           value: code,
           onChange: handleChange,
-          style: {
-            minHeight: "260px",
-            width: "100%",
-            resize: "none",
-            padding: "4px"
-          }
+          onMouseDown: handleMouseDown,
+          onMouseUp: handleMouseUp,
+          className: "embed-textarea"
         }), /*#__PURE__*/_jsx(Box, {
           component: "div",
           color: "red",

package/dist/Editor/Elements/EmbedScript/styles.js

@@ -6,13 +6,29 @@ const Styles = theme => ({
       border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder}`,
       overflow: "hidden"
     },
-    "& textarea": {
+    "& .embed-textarea": {
       backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
       border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
       borderRadius: "12px",
       padding: "10px !important",
       color: theme?.palette?.editor?.textColor,
       boxShadow: "0px 4px 18px 0px #00000014",
+      minHeight: "260px",
+      width: "100%",
+      resize: "none",
+      userSelect: "text !important",
+      WebkitUserSelect: "text !important",
+      MozUserSelect: "text !important",
+      msUserSelect: "text !important",
+      pointerEvents: "auto !important",
+      "&::selection": {
+        background: "rgba(37, 99, 235, 0.2) !important",
+        color: "inherit !important"
+      },
+      "&::-moz-selection": {
+        background: "rgba(37, 99, 235, 0.2) !important",
+        color: "inherit !important"
+      },
       "&:focus": {
         border: `1px solid #2563EB`,
         boxShadow: "0px 4px 18px 0px #2563EB1F",

package/dist/Editor/Elements/Form/FormField.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Transforms, Node } from "slate";
+import { Transforms } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { IconButton, Tooltip, Grid, useTheme } from "@mui/material";
 import FormElements from "./FormElements";

package/dist/Editor/Elements/Form/Workflow/Styles.js

@@ -9,20 +9,21 @@ const FormStyles = theme => ({
     color: "#94A3B8"
   },
   bodyTextArea: {
-    '& .mini-editor-cls': {
-      padding: '12px',
-      '&:focus-visible': {
-        outline: 'none',
-        border: 'none'
+    "& .mini-editor-cls": {
+      padding: "12px",
+      "&:focus-visible": {
+        outline: "none",
+        border: "none"
       }
     },
     "& .editorWorkflow": {
-      minHeight: '130px',
-      padding: '12px',
+      minHeight: "130px",
+      padding: "12px",
       paddingBottom: 0,
-      '&:focus-visible': {
-        outline: 'none',
-        border: 'none'
+      color: theme?.palette?.editor?.textColor,
+      "&:focus-visible": {
+        outline: "none",
+        border: "none"
       }
     }
   },
@@ -105,7 +106,7 @@ const FormStyles = theme => ({
     padding: "4px 22px",
     textTransform: "none",
     border: "1px solid #D8DDE1",
-    minWidth: '126px',
+    minWidth: "126px",
     "& svg": {
       "& path": {
         stroke: "#64748B"
@@ -169,17 +170,19 @@ const FormStyles = theme => ({
     }
   },
   colorButtonSingle: {
+    border: "1.5px solid #DCE4EC !important",
     "&.active": {
-      "&:before": {
-        content: '" "',
-        position: "absolute",
-        top: "-5px",
-        left: "-5px",
-        width: "calc(100% + 4px)",
-        height: "calc(100% + 4px)",
-        border: "3px solid blue",
-        borderRadius: "50%"
-      }
+      // "&:before": {
+      //   content: '" "',
+      //   position: "absolute",
+      //   top: "-5px",
+      //   left: "-5px",
+      //   width: "calc(100% + 4px)",
+      //   height: "calc(100% + 4px)",
+      //   border: "3px solid blue",
+      //   borderRadius: "50%",
+      // },
+      outline: "2px solid #2563EB"
     }
   },
   colorButtonsInner: {
@@ -249,7 +252,7 @@ const FormStyles = theme => ({
     }
   },
   root: {
-    padding: '10px'
+    padding: "10px"
   }
 });
 export default FormStyles;

package/dist/Editor/Elements/Form/Workflow/constant.js

@@ -1,3 +1,27 @@
 export const minutes = [30, 35, 40, 45, 50, 55];
 export const hours = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23];
-export const days = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31];
+export const days = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31];
+export const allowedFormat = {
+  Document: ".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.rtf",
+  Image: "image/*",
+  Video: ".mp4,.webm,.ogg,.mov,.avi,.mkv",
+  Embed: "*"
+};
+export const maxSizeMap = {
+  Image: 25 * 1024 * 1024,
+  // Test -> 5 * 1024 * 1024 -> 5MB
+  Video: 1024 * 1024 * 1024,
+  Document: 25 * 1024 * 1024,
+  Embed: Infinity
+};
+export const allowedTypes = {
+  Document: ["application/pdf", "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "application/vnd.ms-powerpoint", "application/vnd.openxmlformats-officedocument.presentationml.presentation", "text/plain", "application/rtf"],
+  Image: ["image/jpeg", "image/png", "image/gif", "image/webp", "image/svg+xml"],
+  Video: ["video/mp4", "video/webm", "video/ogg", "video/quicktime", "video/x-msvideo", "video/x-matroska"],
+  Embed: ["*"]
+};
+export const extensionMap = {
+  Video: ["mp4", "webm", "ogg", "mov", "avi", "mkv"],
+  Image: ["jpg", "jpeg", "png", "gif", "webp", "svg"],
+  Document: ["pdf", "doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt", "rtf"]
+};