@flozy/editor 10.4.0 → 10.4.2

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

@@ -1,14 +1,23 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { Grid, TextField, InputAdornment, Typography, Tooltip } from "@mui/material";
 import ColorPickerButton from "../../ColorPickerButton";
+import { getVariableValue } from "../../../helper/theme";
+import { useButtonStyle } from "../../../hooks/useThemeValues";
+
+// const MAP_STYLE_PROPS = {
+//   bgColor: "background-color",
+//   textColor: "color",
+// };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Color = props => {
   const {
-    value,
+    value: val,
     data,
     onChange,
     classes,
+    elementProps,
+    handleClose,
     customProps
   } = props;
   const {
@@ -20,7 +29,22 @@ const Color = props => {
     translation
   } = customProps;
   const [recentColors, setRecentColors] = useState({});
-  const getLable = label === 'Text' ? translation("selectTextColor") : label === 'Background' ? translation("selectBgColor") : translation(label);
+  const {
+    buttonStyle
+  } = useButtonStyle(val, key, elementProps);
+  const newValue = buttonStyle?.color;
+  const {
+    value,
+    inputValue
+  } = useMemo(() => {
+    const isVariable = newValue && newValue.startsWith("var");
+    const inputValue = isVariable ? getVariableValue(newValue) : newValue;
+    return {
+      value: newValue,
+      inputValue: inputValue
+    };
+  }, [buttonStyle?.color]);
+  const getLable = label === "Text" ? translation("selectTextColor") : label === "Background" ? translation("selectBgColor") : translation(label);
   useEffect(() => {
     const storedColors = JSON.parse(localStorage.getItem("recentColors"));
     if (storedColors) {
@@ -58,11 +82,11 @@ const Color = props => {
         fontSize: "14px",
         fontWeight: 500,
         marginBottom: "5px",
-        display: 'flex',
-        alignItems: 'center',
-        '& svg': {
-          width: '20px',
-          height: '20px'
+        display: "flex",
+        alignItems: "center",
+        "& svg": {
+          width: "20px",
+          height: "20px"
         }
       },
       children: [translation(label), data?.infoIcon ? /*#__PURE__*/_jsx(Tooltip, {
@@ -70,14 +94,14 @@ const Color = props => {
         title: translation("noteText"),
         children: /*#__PURE__*/_jsx("span", {
           style: {
-            display: 'inline-block'
+            display: "inline-block"
           },
           children: data?.infoIcon
         })
       }) : null]
     }), /*#__PURE__*/_jsx(TextField, {
       fullWidth: true,
-      value: value,
+      value: inputValue,
       placeholder: getLable || `${label} ${translation("color code")}`,
       InputLabelProps: {
         shrink: true
@@ -90,6 +114,8 @@ const Color = props => {
             value: value,
             onSave: onSave,
             recentColors: recentColors[key],
+            handleClose: handleClose,
+            disableEditTheme: customProps?.disableEditTheme,
             hideGradient: hideGradient
           })
         })

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/lineSpacing.js

@@ -53,9 +53,9 @@ const LineSpacing = props => {
         defaultValue: value || 1.43,
         "aria-label": "Default",
         valueLabelDisplay: "auto",
-        min: 0.5,
-        max: 3.0,
-        step: 0.1,
+        min: 0.50,
+        max: 3.00,
+        step: 0.01,
         name: "lineHeight",
         onChange: handleChange
       }), /*#__PURE__*/_jsx(Box, {
@@ -65,15 +65,16 @@ const LineSpacing = props => {
           color: theme?.palette?.editor?.textColor
         },
         name: "lineHeight",
-        value: pro_value,
+        value: pro_value || 1.43,
         className: "sliderInput",
         onChange: handleChange,
         type: "number",
         placeholder: "0",
-        disabled: true,
-        defaultValue: pro_value || 1.43
+        disabled: true
+        // defaultValue={pro_value || 1.43}
       })]
     })]
   });
 };
+
 export default LineSpacing;

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

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import { Button, Grid, Radio, RadioGroup, TextField, FormControl, FormLabel, FormControlLabel, Typography, Tooltip, IconButton } from "@mui/material";
-import DeleteIcon from "@mui/icons-material/Delete";
-import Settings from "@mui/icons-material/Settings";
 import LinkSettings from "../../LinkSettings";
 import { getLinkType } from "../../../utils/helper";
+import SettingsIcon from "../../../assets/svg/SettingsIcon";
+import { DeleteIcon } from "../../../assets/svg/AIIcons";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const MenusArray = props => {
@@ -126,6 +126,7 @@ const MenusArray = props => {
           display: "flex",
           alignItems: "center"
         },
+        className: "menu-item-app-header",
         children: [/*#__PURE__*/_jsx(TextField, {
           name: "text",
           type: "text",
@@ -134,7 +135,8 @@ const MenusArray = props => {
           size: "small",
           sx: {
             mb: 0
-          }
+          },
+          className: "text-field1"
         }), /*#__PURE__*/_jsx(TextField, {
           name: "url",
           type: "text",
@@ -142,7 +144,8 @@ const MenusArray = props => {
           onChange: handleChange(i),
           size: "small",
           fullWidth: true,
-          disabled: true
+          disabled: true,
+          className: "text-field1"
         }), /*#__PURE__*/_jsx(Tooltip, {
           title: translation("Link Settings"),
           arrow: true,
@@ -151,14 +154,18 @@ const MenusArray = props => {
               menu: m,
               index: i
             }),
-            children: /*#__PURE__*/_jsx(Settings, {})
+            children: /*#__PURE__*/_jsx(SettingsIcon, {
+              className: "settingsIcon"
+            })
           })
         }), /*#__PURE__*/_jsx(Tooltip, {
           title: translation("Delete Menu"),
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onDelete(i),
-            children: /*#__PURE__*/_jsx(DeleteIcon, {})
+            children: /*#__PURE__*/_jsx(DeleteIcon, {
+              className: "deleteIcon"
+            })
           })
         })]
       }, `add-m-${i}`);

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/StyleBuilder/pageSettingsStyle.js

@@ -25,13 +25,11 @@ const pageSettingsStyle = [{
     label: "Padding",
     key: "bannerSpacing",
     type: "bannerSpacing"
-  }
-  // {
-  //   label: "Line Spacing",
-  //   key: "lineHeight",
-  //   type: "lineSpacing",
-  // },
-  ]
+  }, {
+    label: "Line Spacing",
+    key: "lineHeight",
+    type: "lineSpacing"
+  }]
 }, {
   tab: "Max Width",
   value: "maxWidth",

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"