@flozy/editor 10.3.9 → 10.4.1

package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js

@@ -0,0 +1,115 @@
+import React, { useState } from "react";
+import { Grid, Button, Typography } from "@mui/material";
+import ImageSelector from "../../ImageSelector/ImageSelector";
+import UploadStyles from "../../ImageSelector/UploadStyles";
+import Icon from "../../Icon";
+import { useEditorContext } from "../../../hooks/useMouseMove";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const EmbedUpload = props => {
+  const {
+    value,
+    data,
+    customProps,
+    onChange
+  } = props;
+  const {
+    translation
+  } = customProps;
+  const {
+    key
+  } = data;
+  const [base64, setBase64] = useState(value);
+  const [open, setOpen] = useState(false);
+  const {
+    theme
+  } = useEditorContext();
+  const classes = UploadStyles(theme);
+  const onRemoveBG = () => {
+    setBase64(null);
+    onChange({
+      [key]: "none"
+    });
+  };
+  const handleClick = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const onSelectImage = img => {
+    setBase64(img);
+    onChange({
+      [key]: img
+    });
+    handleClose();
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    item: true,
+    xs: 12,
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "body1",
+      color: "primary",
+      sx: {
+        fontSize: "14px",
+        fontWeight: "500",
+        marginBottom: "8px"
+      },
+      children: translation("Upload Video")
+    }), /*#__PURE__*/_jsx(Grid, {
+      container: true,
+      sx: classes.uploadContainer,
+      children: /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        sx: classes.uploadField,
+        children: /*#__PURE__*/_jsx(Grid, {
+          className: "uploadImageSection",
+          children: base64 ? /*#__PURE__*/_jsxs(Grid, {
+            justifyItems: "center",
+            alignItems: "center",
+            children: [/*#__PURE__*/_jsx(Typography, {
+              style: {
+                padding: "8px",
+                fontSize: "8px",
+                color: theme?.palette?.editor?.textColor,
+                textAlign: "center"
+              },
+              children: base64
+            }), /*#__PURE__*/_jsx(Grid, {
+              className: "removeImageText",
+              onClick: onRemoveBG,
+              children: translation("REMOVE")
+            })]
+          }) : /*#__PURE__*/_jsx(Grid, {
+            className: "uploadImageText",
+            children: /*#__PURE__*/_jsxs(Button, {
+              component: "label",
+              variant: "text",
+              style: {
+                background: "none"
+              },
+              onClick: handleClick,
+              sx: classes.uploadIcon,
+              children: [/*#__PURE__*/_jsx(Icon, {
+                icon: "fileUpload"
+              }), /*#__PURE__*/_jsx("span", {
+                style: {
+                  paddingLeft: "8px"
+                },
+                children: translation("Upload a Video")
+              })]
+            })
+          })
+        })
+      })
+    }), /*#__PURE__*/_jsx(ImageSelector, {
+      open: open,
+      title: "Video",
+      onClose: handleClose,
+      customProps: customProps,
+      onSelectImage: onSelectImage
+    })]
+  });
+};
+export default EmbedUpload;

package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js

@@ -1,23 +1,30 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { TextField, IconButton, Grid, Typography } from "@mui/material";
 import { sizeMap } from "../../../utils/font.js";
 import { TextMinusIcon, TextPlusIcon } from "../../../common/iconslist.js";
+import { getElementStyle } from "../../../helper/theme.js";
+import { useSlateStatic } from "slate-react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const FontSize = props => {
   const {
-    value,
+    value: val,
     data,
     onChange,
+    elementProps,
     customProps
   } = props;
-  const {
-    translation
-  } = customProps;
   const {
     key,
     width
   } = data;
+  const editor = useSlateStatic();
+  const value = useMemo(() => {
+    return val || getElementStyle(editor, elementProps, "font-size");
+  }, [editor, val]);
+  const {
+    translation
+  } = customProps;
   const handleChange = e => {
     let inc = parseInt(e.target.value) || 16;
     inc = inc > 200 ? 200 : inc;
@@ -28,7 +35,9 @@ const FontSize = props => {
   const getSizeVal = () => {
     try {
       const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
-      return parseInt(size || 16);
+      const defaultSize = 16;
+      const val = parseInt(size || defaultSize);
+      return isNaN(val) ? defaultSize : val;
     } catch (err) {
       return "";
     }
@@ -77,7 +86,7 @@ const FontSize = props => {
         size: "small",
         inputProps: {
           style: {
-            // textAlign: "center", 
+            // textAlign: "center",
             padding: "11px"
           }
         },

package/dist/Editor/common/StyleBuilder/fieldTypes/index.js

@@ -19,6 +19,7 @@ import SelectSwitch from "./selectSwitch";
 import CardsMapping from "./card";
 import MetaDataMapping from "./metaDataMapping";
 import LineSpacing from "./lineSpacing";
+import EmbedUpload from "./embedUpload";
 const FieldMap = {
   text: Text,
   bannerSpacing: BannerSpacing,
@@ -40,6 +41,7 @@ const FieldMap = {
   selectSwitch: SelectSwitch,
   card: CardsMapping,
   metadatamapping: MetaDataMapping,
-  lineSpacing: LineSpacing
+  lineSpacing: LineSpacing,
+  embedUpload: EmbedUpload
 };
 export default FieldMap;

package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js

@@ -1,13 +1,13 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { FormControl, Grid, ListItemIcon, ListSubheader, MenuItem, Select, Typography } from "@mui/material";
-import { getBreakPointsValue } from "../../../helper/theme";
+import { getBreakPointsValue, getElementStyle } from "../../../helper/theme";
 import useWindowResize from "../../../hooks/useWindowResize";
 import { useEditorContext } from "../../../hooks/useMouseMove";
 import FontFamilyAutocomplete from "../../../Toolbar/FormatTools/FontFamilyAutocomplete";
 import { useSlate } from "slate-react";
 import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
 
-// hideMetaDataOptions -- pass true to hide metadata option in select field 
+// hideMetaDataOptions -- pass true to hide metadata option in select field
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -31,14 +31,22 @@ const TextOptions = props => {
     renderOption,
     width,
     webFont = false,
-    hideMetaDataOptions = false
+    hideMetaDataOptions = false,
+    themeEnabled
   } = data;
   const {
     fontFamilies
   } = useEditorContext();
-  const editor = useSlate();
   const [size] = useWindowResize();
-  const value = isBreakpoint ? getBreakPointsValue(val, size?.device) : val;
+  const editor = useSlate();
+  const value = useMemo(() => {
+    const userValue = isBreakpoint ? getBreakPointsValue(val, size?.device) : val;
+    if (themeEnabled) {
+      // editor takes a little amount of time to update the new style in element, in that case userValue will be returned
+      return getElementStyle(editor, elementProps, key) || userValue;
+    }
+    return userValue;
+  }, [editor, isBreakpoint, val, size?.device]);
   const metaDataMappingOptions = metaMappings?.boards || [];
   const updatedOption = !hideMetaDataOptions && elementProps?.metadatamapping ? [...options, ...metaDataMappingOptions] : webFont ? fontFamilies?.options : options;
   const handleChange = (e, d) => {
@@ -117,7 +125,7 @@ const TextOptions = props => {
           editor: editor,
           format: key,
           options: fontFamilies.options,
-          width: '100%',
+          width: "100%",
           onChange: onChange,
           val: value,
           webFont: true

package/dist/Editor/common/SwipeableDrawer/style.js

@@ -6,20 +6,22 @@ const Styles = theme => ({
     "& .MuiDrawer-paper": {
       borderTopLeftRadius: 8,
       borderTopRightRadius: 8,
-      backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
-      "& .MuiInputBase-root": {
-        border: `1px solid ${theme?.palette?.editor?.textColor}`,
-        color: theme?.palette?.editor?.textColor
-      },
-      "& .MuiSvgIcon-root": {
-        color: theme?.palette?.editor?.textColor
-      },
-      "& .MuiFormLabel-root": {
-        color: theme?.palette?.editor?.textColor,
-        backgroundColor: theme?.palette?.editor?.background
-      }
+      backgroundColor: theme?.palette?.editor?.miniToolBarBackground
+
+      // "& .MuiInputBase-root": {
+      //   border: `1px solid ${theme?.palette?.editor?.textColor}`,
+      //   color: theme?.palette?.editor?.textColor,
+      // },
+      // "& .MuiSvgIcon-root": {
+      //   color: theme?.palette?.editor?.textColor,
+      // },
+      // "& .MuiFormLabel-root": {
+      //   color: theme?.palette?.editor?.textColor,
+      //   backgroundColor: theme?.palette?.editor?.background,
+      // },
     }
   },
+
   childContainer: {
     padding: "20px",
     "&.emojiDrawer": {

package/dist/Editor/common/Uploader.js

@@ -4,6 +4,7 @@ import { convertBase64 } from "../utils/helper";
 import { uploadFile } from "../service/fileupload";
 import Icon from "./Icon";
 import UploadStyles from "../common/ImageSelector/UploadStyles";
+import { useEditorContext } from "../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -18,6 +19,15 @@ const Uploader = props => {
   const [base64, setBase64] = useState(value?.url);
   const [fileName, setFileName] = useState("");
   const [uploading, setUploading] = useState(false);
+  const {
+    theme
+  } = useEditorContext();
+  const allowedFormat = {
+    "Document": ".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.rtf",
+    "Image": "image/*",
+    "Video": "video/*",
+    "Embed": "*"
+  };
   const handleChange = async e => {
     const uFile = e.target.files[0];
     const strImage = await convertBase64(uFile);
@@ -59,6 +69,7 @@ const Uploader = props => {
   const renderThumb = () => {
     switch (title) {
       case "Document":
+      case "Video":
         return /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx(Typography, {
             style: {
@@ -102,6 +113,10 @@ const Uploader = props => {
           className: "uploadImageSection",
           children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
             className: "uploadImageText",
+            sx: {
+              background: `${theme?.palette?.editor?.inputFieldBgColor}`,
+              border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+            },
             children: /*#__PURE__*/_jsxs(Button, {
               component: "label",
               variant: "text",
@@ -112,6 +127,7 @@ const Uploader = props => {
               sx: classes.uploadIcon,
               children: [/*#__PURE__*/_jsx("input", {
                 type: "file",
+                accept: allowedFormat[title],
                 style: {
                   opacity: 0,
                   width: "0px"

package/dist/Editor/common/iconListV2.js

@@ -962,6 +962,41 @@ export function DragIcon() {
     })]
   });
 }
+export function ResizeIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("rect", {
+      width: "16",
+      height: "16",
+      rx: "8",
+      fill: "#F8FAFC"
+    }), /*#__PURE__*/_jsx("rect", {
+      x: "0.5",
+      y: "0.5",
+      width: "15",
+      height: "15",
+      rx: "7.5",
+      stroke: "#2563EB",
+      strokeOpacity: "0.32"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M5.76758 6.44141L3.99981 8.20917L5.76758 9.97694",
+      stroke: "#94A3B8",
+      strokeWidth: "0.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M10.2324 6.44141L12.0002 8.20917L10.2324 9.97694",
+      stroke: "#94A3B8",
+      strokeWidth: "0.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}
 export function LeftAlignTextFormat() {
   return /*#__PURE__*/_jsxs("svg", {
     width: "19",
@@ -1323,6 +1358,27 @@ export function CheckedBoxCheckIcon() {
     })
   });
 }
+export function CheckedRadioIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "17",
+    height: "17",
+    viewBox: "0 0 17 17",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M16.5 8.42148C16.5 12.792 12.9227 16.343 8.5 16.343C4.07734 16.343 0.5 12.792 0.5 8.42148C0.5 4.05093 4.07734 0.5 8.5 0.5C12.9227 0.5 16.5 4.05093 16.5 8.42148Z",
+      fill: "#DEE8FC",
+      stroke: "#2563EB",
+      className: "radio-icon-path"
+    }), /*#__PURE__*/_jsx("ellipse", {
+      cx: "8.5",
+      cy: "8.42079",
+      rx: "3.5",
+      ry: "3.46767",
+      fill: "#2563EB"
+    })]
+  });
+}
 export function SectionSettingIcon() {
   return /*#__PURE__*/_jsxs("svg", {
     width: "13",
@@ -1467,6 +1523,26 @@ export function PenIcon() {
     })]
   });
 }
+export function ResetIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("circle", {
+      cx: "11.646",
+      cy: "11.6452",
+      r: "11.5",
+      transform: "rotate(-89.2717 11.646 11.6452)",
+      fill: "#2563EB",
+      fillOpacity: "0.16"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M18.2814 11.8168V11.8168C18.2813 11.8313 18.2987 11.8387 18.3091 11.8287L19.2379 10.9273C19.6367 10.5404 20.247 10.5482 20.6358 10.9451C21.0245 11.342 21.0168 11.9495 20.6181 12.3364L17.9434 14.9012C17.5478 15.2806 16.9205 15.2708 16.5369 14.8792L13.9636 12.2519C13.7692 12.0534 13.674 11.7974 13.677 11.5622C13.6802 11.3075 13.7819 11.054 13.981 10.8801C14.3797 10.4932 14.9901 10.501 15.3788 10.8979L16.2708 11.8085C16.286 11.824 16.3124 11.8135 16.3126 11.7917V11.7917C16.351 8.77391 13.9017 6.27324 10.8698 6.2347C7.83784 6.19615 5.32577 8.63374 5.28741 11.6516C5.24904 14.6694 7.69833 17.1701 10.7303 17.2086C11.2815 17.2156 11.7092 17.6522 11.7022 18.2009C11.6952 18.7496 11.2566 19.1752 10.7054 19.1682C6.5709 19.1157 3.2663 15.7418 3.31861 11.6265C3.37093 7.51133 6.76023 4.22251 10.8947 4.27507C15.0095 4.32738 18.3338 7.70154 18.2814 11.8168Z",
+      fill: "#2563EB"
+    })]
+  });
+}
 export function SaveTemplIcon() {
   return /*#__PURE__*/_jsxs("svg", {
     width: "18",

package/dist/Editor/common/iconslist.js

@@ -1677,6 +1677,27 @@ export const CloseIcon = props => /*#__PURE__*/_jsxs("svg", {
     strokeLinejoin: "round"
   })]
 });
+export const CloseIcon2 = props => /*#__PURE__*/_jsxs("svg", {
+  width: "10",
+  height: "10",
+  viewBox: "0 0 10 10",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  ...(props || {}),
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M9.12476 0.875L0.875176 9.12458",
+    stroke: "#8F9CAE",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M0.875183 0.875L9.12476 9.12458",
+    stroke: "#8F9CAE",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })]
+});
 export const SearchIcon = () => /*#__PURE__*/_jsxs("svg", {
   width: "18",
   height: "18",