@flozy/editor 10.4.0 → 10.4.2

package/dist/Editor/common/LinkSettings/index.js

@@ -4,8 +4,8 @@ import DialogTitle from "@mui/material/DialogTitle";
 import DialogContent from "@mui/material/DialogContent";
 import DialogActions from "@mui/material/DialogActions";
 import IconButton from "@mui/material/IconButton";
-import CloseIcon from "@mui/icons-material/Close";
-import { Box, FormControl, FormControlLabel, Grid, MenuItem, Radio, RadioGroup, Typography } from "@mui/material";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { Box, FormControl, Grid, Typography, useMediaQuery } from "@mui/material";
 import { useState } from "react";
 import LinkSettingsStyles from "./style";
 import { getNavOptions } from "./navOptions";
@@ -13,6 +13,7 @@ import { ScrollTopBottom, SelectPage, TextInput, Trigger } from "./NavComponents
 import SwipeableDrawer from "../SwipeableDrawer";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import Select from "../Select";
+import RadioGroup from "../RadioGroup";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -43,10 +44,10 @@ export default function LinkSettings(props) {
     allowTrigger
   } = props;
   const {
-    isMobile,
     tagName,
     translation
   } = customProps;
+  const isMobile = useMediaQuery("(max-width: 899px)");
   const navOptions = getNavOptions(customProps.hideTools, tagName, allowTrigger);
   const classes = LinkSettingsStyles(theme);
   const [nav, setNav] = useState(getNav(navType, navOptions));
@@ -64,67 +65,61 @@ export default function LinkSettings(props) {
     });
   };
   if (isMobile) {
-    return /*#__PURE__*/_jsxs(SwipeableDrawer, {
+    return /*#__PURE__*/_jsx(SwipeableDrawer, {
       open: true,
       onClose: handleClose,
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "subtitle1",
-        gutterBottom: true,
-        sx: {
-          fontWeight: 600
-        },
-        children: translation("dialogueTitle")
-      }), /*#__PURE__*/_jsx(Select, {
-        size: "small",
-        fullWidth: true,
-        value: nav?.value,
-        onChange: e => {
-          const {
-            value
-          } = e.target;
-          const selected = getNav(value, navOptions);
-          setNav(selected);
-          setNavValue("");
-        },
-        displayEmpty: true,
-        MenuProps: {
-          sx: classes.customSelect,
-          disablePortal: true
-        },
-        children: navOptions.map((navOption, i) => {
-          return /*#__PURE__*/_jsx(MenuItem, {
-            value: navOption.value,
-            children: /*#__PURE__*/_jsx(Typography, {
-              variant: "body2",
-              children: translation(navOption.label)
-            })
-          }, i);
-        })
-      }), /*#__PURE__*/_jsx(Box, {
-        sx: {
-          paddingTop: "14px"
-        },
-        children: NavSettings && /*#__PURE__*/_jsx(NavSettings, {
-          placeholder: translation(nav?.placeholder),
-          nav: nav,
-          onChange: onChange,
-          value: navValue,
-          openInNewTab: openInNewTab,
-          onNewTabChange: () => setOpenInNewTab(prev => !prev),
-          services: customProps.services,
-          classes: classes,
-          translation: translation
-        })
-      }), /*#__PURE__*/_jsx(Box, {
-        component: "div",
-        sx: classes.mobileActionBtns,
-        children: /*#__PURE__*/_jsx(ActionsButtons, {
-          classes: classes,
-          onCancel: handleClose,
-          onSave: onSubmit,
-          translation: translation
-        })
-      })]
+      children: /*#__PURE__*/_jsxs(Grid, {
+        sx: classes.swipeableDrawerContainer,
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "subtitle1",
+          gutterBottom: true,
+          sx: {
+            fontWeight: 600
+          },
+          className: "link-settings-title",
+          children: translation("dialogueTitle")
+        }), /*#__PURE__*/_jsx(Select, {
+          options: navOptions,
+          value: nav?.value,
+          onChange: e => {
+            const {
+              value
+            } = e.target;
+            const selected = getNav(value, navOptions);
+            setNav(selected);
+            setNavValue("");
+          },
+          displayEmpty: true,
+          translation: translation,
+          MenuProps: {
+            sx: classes.customSelect
+          }
+        }), /*#__PURE__*/_jsx(Box, {
+          sx: {
+            paddingTop: "14px"
+          },
+          children: NavSettings && /*#__PURE__*/_jsx(NavSettings, {
+            placeholder: translation(nav?.placeholder),
+            nav: nav,
+            onChange: onChange,
+            value: navValue,
+            openInNewTab: openInNewTab,
+            onNewTabChange: () => setOpenInNewTab(prev => !prev),
+            services: customProps.services,
+            classes: classes,
+            translation: translation
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          component: "div",
+          sx: classes.mobileActionBtns,
+          children: /*#__PURE__*/_jsx(ActionsButtons, {
+            classes: classes,
+            onCancel: handleClose,
+            onSave: onSubmit,
+            translation: translation
+          })
+        })]
+      })
     });
   } else {
     return /*#__PURE__*/_jsxs(Dialog, {
@@ -133,16 +128,25 @@ export default function LinkSettings(props) {
       sx: classes.dialogContainer,
       fullWidth: true,
       maxWidth: "sm",
-      disablePortal: true,
-      children: [/*#__PURE__*/_jsx(DialogTitle, {
-        children: translation("dialogueTitle")
-      }), /*#__PURE__*/_jsx(IconButton, {
-        "aria-label": "close",
-        onClick: handleClose,
-        sx: classes.closeIcon,
-        children: /*#__PURE__*/_jsx(CloseIcon, {})
+      children: [/*#__PURE__*/_jsxs(Grid, {
+        container: true,
+        direction: "row",
+        sx: {
+          justifyContent: "space-between",
+          alignItems: "center"
+        },
+        className: "dialog-title",
+        children: [/*#__PURE__*/_jsx(DialogTitle, {
+          children: translation("dialogueTitle")
+        }), /*#__PURE__*/_jsx(IconButton, {
+          "aria-label": "close",
+          onClick: handleClose,
+          sx: classes.closeIcon,
+          children: /*#__PURE__*/_jsx(CloseRoundedIcon, {})
+        })]
       }), /*#__PURE__*/_jsx(DialogContent, {
         dividers: true,
+        className: "link-settings-content",
         children: /*#__PURE__*/_jsxs(Grid, {
           container: true,
           spacing: 2,
@@ -150,20 +154,17 @@ export default function LinkSettings(props) {
             item: true,
             xs: 6,
             sx: classes.gridDivider,
+            className: "radioBtnGrp",
             children: /*#__PURE__*/_jsx(FormControl, {
+              sx: classes.customRadioBtn,
               children: /*#__PURE__*/_jsx(RadioGroup, {
+                options: navOptions,
                 value: nav?.value,
-                children: navOptions?.map((navOption, i) => {
-                  return /*#__PURE__*/_jsx(FormControlLabel, {
-                    value: navOption.value,
-                    control: /*#__PURE__*/_jsx(Radio, {}),
-                    label: translation(navOption.label),
-                    onChange: () => {
-                      setNav(navOption);
-                      setNavValue("");
-                    }
-                  }, i);
-                })
+                onChange: navOption => {
+                  setNav(navOption);
+                  setNavValue("");
+                },
+                translation: translation
               })
             })
           }), /*#__PURE__*/_jsx(Grid, {

package/dist/Editor/common/LinkSettings/navOptions.js

@@ -26,11 +26,11 @@ export const getNavOptions = (hideTools = [], tagName = "", allowTrigger) => {
   }, {
     label: "Email",
     value: "email",
-    placeholder: "email"
+    placeholder: "mail@example.com"
   }, {
     label: "Phone number",
     value: "phone",
-    placeholder: "phone"
+    placeholder: "+1 (702) 123-4567"
   }];
   navOptions = navOptions.filter(n => !hideTools.includes(n.value));
   if (!allowTrigger) {

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

@@ -1,87 +1,222 @@
-const ButtonNavSettingsStyles = theme => ({
-  dialogContainer: {
-    "& .MuiDialogContent-root": {
-      padding: "0px 20px"
+const ButtonNavSettingsStyles = theme => {
+  const {
+    editor,
+    grey
+  } = theme?.palette || {};
+  const {
+    borderColor,
+    background,
+    textColor,
+    activeColor,
+    miniToolBarBackground
+  } = editor || {};
+  const commonContainerStyle = {
+    backgroundColor: miniToolBarBackground,
+    "& .MuiTypography-root": {
+      color: textColor
     },
-    "& .MuiDialogActions-root": {
-      padding: "10px"
-    },
-    "& .MuiTypography-h6": {
+    "& .link-settings-title": {
+      fontSize: "18px",
+      padding: "12px 0px",
       fontWeight: 600,
-      fontSize: "16px",
-      paddingRight: "20px"
+      color: theme?.palette?.editor?.textColor,
+      borderRadius: "8px",
+      marginTop: "2px",
+      "& li": {
+        padding: "6px 16px",
+        margin: "5px !important",
+        borderRadius: "4px !important"
+      },
+      "& .MuiList-root": {
+        padding: "0px"
+      },
+      "& .MuiTypography-root": {
+        fontSize: "12px !important",
+        fontWeight: 500,
+        fontFamily: "'Inter',sans-serif"
+      },
+      "& .Mui-selected": {
+        background: theme?.palette?.editor?.menuOptionSelectedOption,
+        color: theme?.palette?.editor?.textColor
+      }
+    },
+    "& .MuiInputBase-root, fieldset": {
+      background: theme?.palette?.editor?.inputFieldBgColor,
+      borderRadius: "8px",
+      // border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`,
+      "& fieldset": {
+        // border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
+        background: "transparent",
+        borderRadius: "8px"
+      },
+      "& input": {
+        border: `1px solid transparent`,
+        background: theme?.palette?.editor?.inputFieldBgColor,
+        borderRadius: "8px",
+        color: theme?.palette?.editor?.textColor
+      }
     },
-    "& .MuiGrid-container": {
-      marginTop: "0px"
+    "& .MuiSvgIcon-root": {
+      color: textColor
     },
-    "& .MuiGrid-item": {
-      padding: "14px"
+    "& .MuiFormLabel-root": {
+      color: textColor,
+      backgroundColor: background
     },
-    "& .MuiPaper-root": {
-      backgroundColor: theme?.palette?.editor?.background,
+    "& .Mui-checked": {
+      "& .MuiSvgIcon-root": {
+        color: `${activeColor} !important`
+      }
+    },
+    "& .dialog-title": {
       "& .MuiTypography-root": {
-        color: theme?.palette?.editor?.textColor
+        fontSize: "18px",
+        padding: "12px",
+        fontWeight: 600
+      }
+    },
+    "& .link-settings-content": {
+      margin: "0px 10px",
+      borderTop: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
+      borderBottom: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
+      overflow: "hidden !important",
+      "& .MuiInputBase-root, fieldset": {
+        background: theme?.palette?.editor?.inputFieldBgColor,
+        borderRadius: "8px",
+        border: "unset",
+        "& fieldset": {
+          border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
+          background: "transparent",
+          borderRadius: "8px"
+        },
+        "& input": {
+          border: `1px solid transparent`,
+          background: theme?.palette?.editor?.inputFieldBgColor,
+          borderRadius: "8px",
+          color: theme?.palette?.editor?.textColor
+        }
+      }
+    },
+    "& .trigger-text": {
+      fontSize: "14px !important",
+      fontWeight: 400,
+      fontFamily: "'Inter',sans-serif",
+      color: theme?.palette?.editor?.textColor
+    }
+  };
+  return {
+    dialogContainer: {
+      "& .MuiDialogContent-root": {
+        margin: "0px 20px",
+        padding: "0px 4px",
+        borderTop: `1px solid ${borderColor}`,
+        borderBottom: `1px solid ${borderColor}`
       },
-      "& .MuiInputBase-root": {
-        border: `1px solid ${theme?.palette?.editor?.textColor}`,
-        color: theme?.palette?.editor?.textColor
+      "& .MuiDialogActions-root": {
+        padding: "10px"
       },
-      "& .MuiSvgIcon-root": {
-        color: theme?.palette?.editor?.textColor
+      "& .MuiTypography-h6": {
+        fontWeight: 600,
+        fontSize: "20px",
+        paddingRight: "20px"
       },
-      "& .MuiFormLabel-root": {
+      "& .MuiGrid-container": {
+        marginTop: "0px"
+      },
+      "& .MuiGrid-item": {
+        padding: "14px"
+      },
+      "& .MuiPaper-root": {
+        padding: "10px !important",
+        borderRadius: "20px !important",
+        backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
+        border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
+        ...commonContainerStyle
+      }
+    },
+    swipeableDrawerContainer: commonContainerStyle,
+    customSelect: {
+      zIndex: "1302 !important",
+      "& .MuiPopover-paper": {
+        background: theme?.palette?.editor?.textWeightPopUpBackground,
         color: theme?.palette?.editor?.textColor,
-        backgroundColor: theme?.palette?.editor?.background
+        borderRadius: "8px",
+        marginTop: "2px",
+        "& li": {
+          padding: "6px 16px",
+          margin: "5px !important",
+          borderRadius: "4px !important"
+        },
+        "& .MuiList-root": {
+          padding: "0px"
+        },
+        "& .MuiTypography-root": {
+          fontSize: "12px !important",
+          fontWeight: 500,
+          fontFamily: "'Inter',sans-serif"
+        },
+        "& .Mui-selected": {
+          background: theme?.palette?.editor?.menuOptionSelectedOption,
+          color: theme?.palette?.editor?.textColor
+        }
       }
+    },
+    saveBtn: {
+      color: "#fff !important",
+      background: "#2563EB !important",
+      fontSize: "14px !important",
+      fontWeight: "700 !important",
+      padding: "8px 24px !important",
+      textTransform: "none !important",
+      borderRadius: "8px !important",
+      fontFamily: "'Inter',sans-serif !important",
+      "&:hover": {
+        color: "#fff !important",
+        background: "#2563EB !important"
+      }
+    },
+    closeBtn: {
+      backgroundColor: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
+      color: `${theme?.palette?.editor?.customDialogueCloseBtnColor} !important`,
+      fontSize: "14px !important",
+      fontWeight: "700 !important",
+      padding: "8px 22px !important",
+      textTransform: "none !important",
+      border: `1px solid ${theme?.palette?.editor?.customDialogueCloseBtnBorder} !important`,
+      borderRadius: "8px !important",
+      fontFamily: "'Inter',sans-serif !important",
+      "&:hover": {
+        border: `1px solid ${theme?.palette?.editor?.customDialogueCloseBtnBorder} !important`,
+        backgroundColor: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
+        color: `${theme?.palette?.editor?.customDialogueCloseBtnColor} !important`
+      }
+    },
+    closeIcon: {
+      background: theme?.palette?.editor?.closeButtonBackground,
+      borderRadius: "8px",
+      padding: "2px",
+      marginRight: "8px",
+      "& svg": {
+        fill: theme?.palette?.editor?.closeButtonSvgStroke
+      }
+    },
+    gridDivider: {
+      borderRight: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
+      "& .MuiTypography-root": {
+        color: "#64748B !important",
+        fontFamily: "'Inter',sans-serif",
+        fontWeight: 500,
+        fontSize: "16px"
+      }
+    },
+    mobileActionBtns: {
+      display: "flex",
+      justifyContent: "flex-end",
+      gap: "8px",
+      paddingTop: "14px",
+      marginTop: "14px",
+      borderTop: `1px solid ${grey[300]}`
     }
-  },
-  customSelect: {
-    zIndex: "1302 !important",
-    "& .MuiPopover-paper": {
-      background: theme?.palette?.editor?.miniToolBarBackground,
-      color: theme?.palette?.editor?.textColor
-    }
-  },
-  saveBtn: {
-    color: "#fff",
-    background: "#2563EB",
-    fontSize: "14px",
-    fontWeight: 500,
-    padding: "4px 24px",
-    textTransform: "none",
-    "&:hover": {
-      color: "#fff",
-      background: "#2563EB"
-    }
-  },
-  closeBtn: {
-    backgroundColor: "#F4F6F9",
-    color: "#64748B",
-    fontSize: "14px",
-    fontWeight: 500,
-    padding: "4px 22px",
-    textTransform: "none",
-    border: "1px solid #D8DDE1",
-    "&:hover": {
-      border: "1px solid #64748B"
-    }
-  },
-  closeIcon: {
-    position: "absolute",
-    right: 8,
-    top: 8,
-    color: theme?.palette?.grey[500]
-  },
-  gridDivider: {
-    borderRight: "1px solid rgba(0, 0, 0, 0.12)"
-  },
-  mobileActionBtns: {
-    display: "flex",
-    justifyContent: "flex-end",
-    gap: "8px",
-    paddingTop: "14px",
-    marginTop: "14px",
-    borderTop: `1px solid ${theme?.palette?.grey[300]}`
-  }
-});
+  };
+};
 export default ButtonNavSettingsStyles;

package/dist/Editor/common/MentionsPopup/index.js

@@ -146,7 +146,10 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
           setOpenAI("fromElements");
         }
         insertMention(editor, char, type);
-        Transforms.insertText(editor, " "); //Added to insert space after inserting mention node
+        if (mentions === "mentions") {
+          Transforms.insertText(editor, " "); //Added to insert space after inserting mention node
+        }
+
         setMentions({
           ...mentions,
           target: null

package/dist/Editor/common/RadioGroup/index.js

@@ -0,0 +1,48 @@
+import { RadioGroup as Core, Radio, FormControl, FormControlLabel, IconButton, Typography } from "@mui/material";
+import RadioGroupStyles from "./styles";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import { CheckedRadioIcon } from "../iconListV2";
+import { jsx as _jsx } from "react/jsx-runtime";
+function RadioGroup(props) {
+  const {
+    value,
+    options,
+    onChange,
+    label,
+    labelProps,
+    radioProps,
+    translation,
+    ...rest
+  } = props;
+  const {
+    theme
+  } = useEditorContext();
+  const classes = RadioGroupStyles(theme);
+  return /*#__PURE__*/_jsx(FormControl, {
+    children: /*#__PURE__*/_jsx(Core, {
+      value: value,
+      sx: classes.customRadioGroup,
+      ...rest,
+      children: options?.map((option, i) => {
+        return /*#__PURE__*/_jsx(FormControlLabel, {
+          value: option.value,
+          control: /*#__PURE__*/_jsx(Radio, {
+            checkedIcon: /*#__PURE__*/_jsx(CheckedRadioIcon, {}),
+            icon: /*#__PURE__*/_jsx(IconButton, {
+              className: "unCheckedIcon"
+            }),
+            ...(radioProps || {})
+          }),
+          label: /*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            sx: classes.label,
+            ...(labelProps || {}),
+            children: translation(option.label)
+          }),
+          onChange: () => onChange(option)
+        }, i);
+      })
+    })
+  });
+}
+export default RadioGroup;

package/dist/Editor/common/RadioGroup/styles.js

@@ -0,0 +1,29 @@
+const SelectStyles = (theme = {}) => {
+  const {
+    buttonBorder3,
+    checkedIconBg,
+    tv_text,
+    inputFieldBgColor
+  } = theme?.palette?.editor || {};
+  return {
+    customRadioGroup: {
+      gap: "4px",
+      "& button": {
+        border: `1px solid ${buttonBorder3}`
+      },
+      "& .unCheckedIcon": {
+        background: checkedIconBg,
+        width: "17px",
+        height: "17px",
+        padding: "0px"
+      },
+      "& .radio-icon-path": {
+        fill: inputFieldBgColor
+      }
+    },
+    label: {
+      color: `${tv_text} !important`
+    }
+  };
+};
+export default SelectStyles;