@flozy/editor 11.1.9 → 11.2.2

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

@@ -1,15 +1,9 @@
 import React, { useState, useEffect, useRef } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { Node, Transforms } from "slate";
-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 { IconButton, Tooltip, Box, useTheme } from "@mui/material";
 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";
@@ -19,19 +13,13 @@ 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,
@@ -44,26 +32,12 @@ 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%",
@@ -77,14 +51,24 @@ const VideoContent = props => {
       icon: "videoPlayer"
     })
   }) : /*#__PURE__*/_jsx(Box, {
-    component: mediaType,
-    ref: mediaType === "iframe" ? iframeRef : undefined,
-    src: embedURL,
-    controls: mediaType === "video",
-    allowFullScreen: mediaType === "iframe",
+    ref: iframeRef,
+    component: "iframe",
     className: "embedd-iframe",
-    sx: commonSx,
-    title: alt
+    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
   });
 };
 const VideoPlaceholder = props => {
@@ -94,104 +78,18 @@ const VideoPlaceholder = props => {
     onSettings,
     classes,
     type,
-    translation,
-    uploadStatus,
-    setUploadStatus,
-    uploadTerminator,
-    uniqueId,
-    editor,
-    path,
-    embedURL
+    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",
-    onClick: !uploadStatus?.isUploading ? onSettings : () => {},
+    onClick: onSettings,
     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: "video"
-      }), TYPE_LABELS[type] || translation("Embed Video or Other")]
-    })
+    children: [/*#__PURE__*/_jsx(Icon, {
+      icon: "video"
+    }), TYPE_LABELS[type] || translation("Embed Video or Other")]
   }) : /*#__PURE__*/_jsxs(Box, {
     sx: {
       color: "#64748B !important",
@@ -222,23 +120,14 @@ const Video = ({
     xsHidden,
     width: oldWidth,
     bannerSpacing,
-    aspectRatio,
-    file,
-    isUploading,
-    uniqueId,
-    fromFreeGrid
+    aspectRatio
   } = element;
   const editor = useSlateStatic();
   const [openSetttings, setOpenSettings] = useState(false);
   const [parentDOM, setParentDOM] = useState(null);
   const {
     readOnly,
-    translation,
-    services,
-    uploadFile,
-    resumeUploadState,
-    uploadTerminator,
-    isUploadInProgress = () => false
+    translation
   } = customProps;
   const {
     vertical,
@@ -259,63 +148,6 @@ const Video = ({
       return element?.size || {};
     }
   };
-  const xhrRef = useRef(null);
-  const [openUploadPopup, setUploadPopupOpen] = useState(false);
-  const [uploadStatus, setUploadStatus] = useState({
-    isUploading: false,
-    uploadPercentage: 0
-  });
-  const onClickUpload = () => {
-    setUploadPopupOpen(true);
-  };
-  const onSelectVideo = async video => {
-    handleClose();
-    let finalURL = null;
-    try {
-      if (video?.isUpload === false) {
-        finalURL = video?.embedURL;
-      } else {
-        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
-          });
-        }
-      }
-      if (finalURL) {
-        const updateObject = {
-          ...element,
-          url: finalURL
-        };
-        onSave(updateObject);
-      } else {
-        return;
-      }
-    } catch (error) {
-      console.log(error);
-    }
-  };
-  const handleClose = () => {
-    setUploadPopupOpen(false);
-  };
   const [size, onMouseDown, resizing, onLoad] = useResize({
     parentDOM,
     size: getSize(),
@@ -329,49 +161,12 @@ 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", {
@@ -399,34 +194,12 @@ const Video = ({
   };
   const onSave = data => {
     try {
-      let updateData = {};
-      if (typeof data === "string") {
-        updateData = {
-          url: data,
-          isUploading: false
-        };
-      } else if (typeof data?.url !== "string") {
-        updateData = {
-          ...data,
-          url: ""
-        };
-        onSelectVideo({
-          file: data?.url?.file,
-          isUpload: true,
-          setUploadStatus,
-          services: customProps?.services
-        });
-      } else {
-        updateData = data;
-      }
+      const updateData = {
+        ...data
+      };
       delete updateData.children;
-      Transforms.select(editor, path);
-      ReactEditor.focus(editor);
       Transforms.setNodes(editor, {
-        ...updateData,
-        isUpload: false,
-        isUploading: false,
-        file: null
+        ...updateData
       }, {
         at: path
       });
@@ -508,19 +281,13 @@ const Video = ({
       children: [!readOnly && url && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(VideoPlaceholder, {
         ...element,
         embedURL: embedURL,
-        onSettings: onClickUpload,
+        onSettings: onSettings,
         videoSX: videoSX,
         url: url,
         readOnly: readOnly,
         resizing: resizing,
         classes: classes,
-        translation: translation,
-        uploadStatus: uploadStatus,
-        setUploadStatus: setUploadStatus,
-        uploadTerminator: uploadTerminator,
-        uniqueId: uniqueId,
-        editor: editor,
-        path: path
+        translation: translation
       }), !readOnly && url ? /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {
@@ -528,18 +295,6 @@ 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,12 +52,6 @@ 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
@@ -141,9 +135,12 @@ const EmbedScriptPopup = props => {
         children: [/*#__PURE__*/_jsx("textarea", {
           value: code,
           onChange: handleChange,
-          onMouseDown: handleMouseDown,
-          onMouseUp: handleMouseUp,
-          className: "embed-textarea"
+          style: {
+            minHeight: "260px",
+            width: "100%",
+            resize: "none",
+            padding: "4px"
+          }
         }), /*#__PURE__*/_jsx(Box, {
           component: "div",
           color: "red",

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

@@ -6,29 +6,13 @@ const Styles = theme => ({
       border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder}`,
       overflow: "hidden"
     },
-    "& .embed-textarea": {
+    "& 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 } from "slate";
+import { Transforms, Node } 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,20 @@ 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"
+      '&:focus-visible': {
+        outline: 'none',
+        border: 'none'
       }
     }
   },
@@ -105,7 +105,7 @@ const FormStyles = theme => ({
     padding: "4px 22px",
     textTransform: "none",
     border: "1px solid #D8DDE1",
-    minWidth: "126px",
+    minWidth: '126px',
     "& svg": {
       "& path": {
         stroke: "#64748B"
@@ -169,19 +169,17 @@ 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%",
-      // },
-      outline: "2px solid #2563EB"
+      "&:before": {
+        content: '" "',
+        position: "absolute",
+        top: "-5px",
+        left: "-5px",
+        width: "calc(100% + 4px)",
+        height: "calc(100% + 4px)",
+        border: "3px solid blue",
+        borderRadius: "50%"
+      }
     }
   },
   colorButtonsInner: {
@@ -251,7 +249,7 @@ const FormStyles = theme => ({
     }
   },
   root: {
-    padding: "10px"
+    padding: '10px'
   }
 });
 export default FormStyles;

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

@@ -1,27 +1,3 @@
 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 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"]
-};
+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];