@flozy/editor 4.0.1 → 4.0.2

package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js

@@ -1,11 +1,12 @@
 const usePopupStyle = theme => ({
   popupWrapper: {
-    boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)",
+    boxShadow: "1px 2px 15px 0px #2563EB40",
     zIndex: 1300,
     marginBottom: "12px !important",
-    border: "1px solid #E0E0E0",
+    border: "1px solid #D8DDE1",
     borderRadius: "10px",
     maxWidth: "100%",
+    // maxHeight: "40px",
     "&.fullscreen": {
       marginBottom: "0px !important",
       "& .papper-wrpr": {
@@ -19,7 +20,7 @@ const usePopupStyle = theme => ({
       backgroundColor: theme?.palette?.editor?.background
     },
     "&.textSettings": {
-      '@media only screen and (max-width: 600px)': {
+      "@media only screen and (max-width: 600px)": {
         margin: "4px !important",
         marginBottom: "54px !important"
       }
@@ -61,8 +62,9 @@ const usePopupStyle = theme => ({
   },
   textFormatWrapper: {
     padding: "0px 16px 16px 16px",
-    width: "370px",
+    width: "323px",
     maxWidth: "100%",
+    overflowX: "hidden !important",
     // 30% of window height
     maxHeight: `${window.innerHeight * 0.45}px`,
     overflow: "auto",
@@ -78,7 +80,7 @@ const usePopupStyle = theme => ({
         paddingTop: "4px"
       },
       "@media only screen and (max-width: 599px)": {
-        width: '330px'
+        width: "330px"
       }
     },
     "&.templates": {
@@ -89,7 +91,7 @@ const usePopupStyle = theme => ({
         maxHeight: "fit-content"
       },
       "@media only screen and (max-width: 599px)": {
-        width: '330px'
+        width: "330px"
       }
     },
     "& .headerContainer": {},
@@ -108,14 +110,19 @@ const usePopupStyle = theme => ({
       borderRadius: "0px",
       width: "100%",
       justifyContent: "start",
+      borderRadius: "10px !important",
+      transition: "background-color 0.3s ease",
+      "&:hover": {
+        backgroundColor: "#E9F3FE"
+      },
       "& svg": {
         width: "24px",
-        height: "24px",
+        height: "19px",
         marginRight: "8px"
       },
       "& span": {
         fontSize: "14px",
-        color: "#64748B"
+        color: "#0F172A"
       }
     },
     // for command list style
@@ -144,7 +151,7 @@ const usePopupStyle = theme => ({
       }
     },
     "@media only screen and (max-width: 599px)": {
-      width: '330px'
+      width: "330px"
     }
   },
   textFormatLabel: {
@@ -155,17 +162,26 @@ const usePopupStyle = theme => ({
     lineHeight: "25px",
     marginTop: "12px",
     marginBottom: "8px",
-    '& .searchContainer': {
+    "& .searchContainer": {
       position: "absolute",
       right: 0,
       zIndex: 3
     },
-    '& .MuiFormControl-root.MuiTextField-root input': {
-      padding: '8px 35px 6px 12px'
+    "& .MuiFormControl-root.MuiTextField-root input": {
+      padding: "8px 35px 6px 12px"
     }
   },
   textFormatField: {
-    marginBottom: "16px"
+    marginBottom: "16px",
+    marginTop: "10px"
+  },
+  textFormatField1: {
+    marginBottom: "16px",
+    marginTop: "10px"
+  },
+  textFormatField2: {
+    // marginBottom: "16px",
+    marginTop: "10px"
   },
   textFormatFieldBorder: {
     display: "flex",
@@ -175,6 +191,9 @@ const usePopupStyle = theme => ({
     borderRadius: "8px",
     boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
   },
+  dividerGrid: {
+    margin: "5px 0px 10px 0px"
+  },
   textFormatColorWrpr: {
     display: "flex",
     alignItems: "center",
@@ -191,7 +210,7 @@ const usePopupStyle = theme => ({
     },
     "&.typo-icons": {
       "& button": {
-        width: "36px",
+        width: "31px",
         height: "36px"
       }
     },
@@ -205,6 +224,13 @@ const usePopupStyle = theme => ({
     fontSize: "14px",
     marginBottom: "5px",
     paddingLeft: "5px",
+    fontWeight: 500,
+    color: "#000000"
+  },
+  typoLabel2: {
+    fontSize: "14px",
+    marginBottom: "5px",
+    paddingLeft: "10px",
     fontWeight: 500
   },
   templateCard: {
@@ -297,6 +323,29 @@ const usePopupStyle = theme => ({
       }
     }
   },
+  btnGroup2: {
+    backgroundColor: theme?.palette?.editor?.background,
+    "& button": {
+      backgroundColor: theme?.palette?.editor?.background,
+      marginRight: "0px",
+      color: theme?.palette?.editor?.textColor,
+      borderColor: theme?.palette?.editor?.borderColor,
+      textTransform: "capitalize",
+      marginBottom: "0px",
+      "&:hover": {
+        color: theme?.palette?.editor?.borderColor,
+        background: theme?.palette?.editor?.background
+      },
+      "&.active": {
+        background: theme?.palette?.editor?.background,
+        color: theme?.palette?.editor?.activeColor
+      },
+      "&.no-hover": {
+        border: `1px solid ${theme?.palette?.editor?.borderColor}`,
+        padding: "0px 5px !important"
+      }
+    }
+  },
   allColor: {
     "& .buttonsWrpr": {
       "& button": {
@@ -326,9 +375,28 @@ const usePopupStyle = theme => ({
       }
     }
   },
+  defaultBtn1: {
+    color: "#2563EB !important",
+    textTransform: "none",
+    textDecorationLine: "underline",
+    textUnderlineOffset: "2px",
+    padding: "0px 10px"
+  },
+  defaultBtn2: {
+    color: "#A2B0B9 !important",
+    textTransform: "none",
+    textDecorationLine: "underline",
+    textUnderlineOffset: "2px",
+    padding: "0px 10px"
+  },
   defaultBtn: {
-    color: "#0F172A",
-    textTransform: "none"
+    color: "#2563EB !important",
+    textTransform: "none",
+    textDecoration: "underline",
+    "&.Mui-disabled": {
+      color: "#A0AEC0 !important",
+      textDecoration: "none"
+    }
   },
   templateCardBtnGrp: {
     display: "none",
@@ -383,6 +451,7 @@ const usePopupStyle = theme => ({
     color: theme?.palette?.editor?.textColor
   },
   colorPickerPopup: {
+    margin: "30px",
     "& .MuiPaper-root": {
       overflow: "auto",
       backgroundColor: theme?.palette?.editor?.background
@@ -413,15 +482,17 @@ const usePopupStyle = theme => ({
   colorPopper: {
     "& .MuiPaper-root": {
       backgroundColor: theme?.palette?.editor?.background,
-      '@media only screen and (max-width: 600px)': {
+      padding: "4px 14px",
+      "@media only screen and (max-width: 600px)": {
         marginTop: "-40px"
       }
     }
   },
   fullViewCardMedia: {
+    margin: "5px 0px",
     width: "100%",
     backgroundPosition: "left top",
-    backgroundSize: "100% auto",
+    backgroundSize: "100%, auto",
     zIndex: 1,
     position: "relative",
     "&.fullscreen": {
@@ -436,9 +507,10 @@ const usePopupStyle = theme => ({
     }
   },
   buttonCardMedia: {
+    margin: "5px 0px",
     width: "100%",
-    height: "48px",
-    backgroundPosition: "left top",
+    height: "40px",
+    backgroundPosition: "center",
     backgroundSize: "contain",
     zIndex: 1,
     position: "relative",
@@ -447,26 +519,25 @@ const usePopupStyle = theme => ({
     }
   },
   buttonCardMediaWrpr: {
+    padding: '5px',
     position: "relative",
     margin: "8px",
     marginBottom: "0px",
-    "&:hover": {
-      "& .template-card-action": {
-        display: "flex"
+    '& .img-wrapper': {
+      "&:hover": {
+        padding: '0px 2px 0px 2px',
+        backgroundColor: '#E9F3FE',
+        border: '1px solid #2563EB40',
+        borderRadius: '5px',
+        height: "100%",
+        margin: "0px"
+        // "& .template-card-action": {
+        //   display: "flex",
+        // },
       }
-    },
-    "& .img-loader-wrapper": {
-      position: "absolute",
-      width: "12px",
-      height: "12px",
-      left: 0,
-      right: 0,
-      top: 0,
-      bottom: 0,
-      margin: "auto",
-      zIndex: 0
     }
   },
+
   paperOverrides: {
     "&.MuiPaper-root": {
       background: "transparent",
@@ -475,7 +546,7 @@ const usePopupStyle = theme => ({
   },
   miniTextFormatWrapper: {
     maxWidth: "100%",
-    padding: "4px 8px",
+    padding: "2px 8px",
     overflowX: "auto",
     "& .customSelectTool": {
       padding: "0px 8px",
@@ -524,30 +595,38 @@ const usePopupStyle = theme => ({
   },
   customSelectPopoverWrapper: {
     "& .MuiPopover-paper": {
-      maxHeight: '140px',
-      background: theme?.palette?.editor?.background,
+      maxHeight: 'fit-content',
+      // minWidth: "130px",
+      border: "1px solid #E4E8EB",
+      // background: theme?.palette?.editor?.background,
+      overflowY: 'hidden',
+      padding: "6px 12px 6px 0px",
       '@media only screen and (max-width: 600px)': {
         marginTop: "-40px"
       }
     },
     "& .customSelectOptionLabel": {
       color: theme?.palette?.editor?.textColor || "black",
-      margin: "0px",
+      margin: "0px 6px 0px 6px",
       width: "100%",
       justifyContent: "start",
       paddingRight: "20px",
       fontSize: "14px",
       lineHeight: "1.75 !important",
       fontWeight: 400,
-      background: theme?.palette?.editor?.background || "#fff",
+      // background: theme?.palette?.editor?.background || "#fff",
+      overflowY: "hidden",
       "&:hover": {
-        background: `${theme?.palette?.action?.selected} !important`
-      },
-      "&.selected": {
-        color: `${theme?.palette?.primary?.main} !important`,
-        background: `${theme?.palette?.action?.selected} !important`
+        background: `#E9F3FE !important`,
+        color: `#2563EB !important`
       }
+
+      // "&.selected": {
+      //   color: `#2563EB !important`,
+      //   background:  `${theme?.palette?.action?.selected} !important`
+      // }
     },
+
     "& .menuOptions": {
       display: "flex",
       alignItems: "center",

package/dist/Editor/Toolbar/PopupTool/TextFormat.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Button, ButtonGroup, Grid, Typography } from "@mui/material";
+import { Button, ButtonGroup, Divider, Grid, Typography } from "@mui/material";
 import FormatColorResetIcon from "@mui/icons-material/FormatColorReset";
 import WidthFullIcon from "@mui/icons-material/WidthFull";
 import WidthNormalIcon from "@mui/icons-material/WidthNormal";
@@ -14,6 +14,11 @@ import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
 import { AllColors } from "../../Elements/Color Picker/ColorButtons";
 import { fontFamilyMap } from "../../utils/font";
 import { getBorderColor } from "../../utils/helper";
+import SelectTypography from "./MiniTextFormat/SelectTypography";
+import { isTextCustomized, saveToTheme } from "../../helper/theme";
+import { useEditorTheme } from "../../hooks/useEditorTheme";
+import SelectSuperSubscript from "./MiniTextFormat/SelectSuperSubscript";
+import { ColorResetIcon, TextDefaultStyleIcon } from "../../common/iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const allTools = toolbarGroups.flat();
@@ -23,18 +28,20 @@ const ButtonComp = {
 const TextFormat = props => {
   const {
     classes,
-    editor
+    editor,
+    onClose,
+    closeMainPopup
   } = props;
+  console.log("PROPS:", props);
   const [anchorEl, setAnchorEl] = useState(null);
   const [type, setType] = useState(null);
   const open = Boolean(anchorEl);
   const fontFamily = allTools.find(f => f.format === "fontFamily");
   const fontWeight = allTools.find(f => f.format === "fontWeight");
-  const fontStyle = allTools.filter(f => f.type === "mark");
+  const fontStyle = allTools.filter(f => f.type === "mark" && f.format != "strikethrough" && f.format != "superscript" && f.format != "subscript");
   const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
   const link = allTools.find(f => f.format?.indexOf("link") >= 0);
   const lists = allTools.filter(f => f.group?.indexOf("list") >= 0);
-  const typo = allTools.filter(f => f.group?.indexOf("typography") >= 0);
   const {
     pageProps
   } = getPageSettings(editor)?.element || {};
@@ -52,6 +59,11 @@ const TextFormat = props => {
     color: "",
     bgColor: ""
   };
+  const {
+    theme,
+    updateTheme
+  } = useEditorTheme();
+  const customized = isTextCustomized(editor);
   const handlePageWidth = width => () => {
     updatePageSettings(editor, {
       ...(pageProps || {}),
@@ -101,6 +113,49 @@ const TextFormat = props => {
     container: true,
     sx: classes.textFormatWrapper,
     children: [/*#__PURE__*/_jsxs(Grid, {
+      item: true,
+      xs: 12,
+      children: [/*#__PURE__*/_jsxs(Grid, {
+        container: true,
+        justifyContent: "space-between",
+        alignItems: "center",
+        children: [/*#__PURE__*/_jsx(Grid, {
+          item: true,
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            color: "primary",
+            sx: classes.typoLabel,
+            children: "Theme Style"
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          children: theme?.id ? /*#__PURE__*/_jsx(Button, {
+            sx: classes.defaultBtn,
+            onClick: () => {
+              const {
+                field,
+                theme
+              } = saveToTheme(editor) || {};
+              updateTheme(theme, {
+                action: "ELEMENT_PROPS_CHANGE",
+                fieldName: field
+              });
+            },
+            disabled: !customized,
+            children: "Save to theme"
+          }) : null
+        })]
+      }), /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        sx: classes.textFormatField,
+        children: /*#__PURE__*/_jsx(SelectTypography, {
+          editor: editor,
+          classes: classes,
+          closeMainPopup: () => {}
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
       children: [/*#__PURE__*/_jsxs(Grid, {
@@ -118,19 +173,19 @@ const TextFormat = props => {
         }), /*#__PURE__*/_jsx(Grid, {
           item: true,
           children: /*#__PURE__*/_jsx(Button, {
-            sx: classes.defaultBtn,
-            startIcon: /*#__PURE__*/_jsx(FormatClearIcon, {}),
+            sx: classes.defaultBtn1,
+            startIcon: /*#__PURE__*/_jsx(TextDefaultStyleIcon, {}),
             onClick: handleDefault({
               format: "fontFamily",
               val: Object.values(fontFamilyMap)[0]
             }),
-            children: "Default"
+            children: "Default Text"
           })
         })]
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
         xs: 12,
-        sx: classes.textFormatField,
+        sx: classes.textFormatField1,
         children: /*#__PURE__*/_jsx(Dropdown, {
           classes: classes,
           ...fontFamily,
@@ -180,10 +235,15 @@ const TextFormat = props => {
           })
         })]
       })]
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.dividerGrid,
+      children: /*#__PURE__*/_jsx(Divider, {})
     }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
-      sx: classes.textFormatField,
+      sx: classes.textFormatField2,
       children: [/*#__PURE__*/_jsxs(Grid, {
         container: true,
         justifyContent: "space-between",
@@ -199,12 +259,12 @@ const TextFormat = props => {
         }), /*#__PURE__*/_jsx(Grid, {
           item: true,
           children: /*#__PURE__*/_jsx(Button, {
-            sx: classes.defaultBtn,
-            startIcon: /*#__PURE__*/_jsx(FormatColorResetIcon, {}),
+            sx: classes.defaultBtn1,
+            startIcon: /*#__PURE__*/_jsx(ColorResetIcon, {}),
             onClick: handleDefault({
               format: "color"
             }),
-            children: "Default"
+            children: "Default Color"
           })
         })]
       }), /*#__PURE__*/_jsx(Grid, {
@@ -223,7 +283,7 @@ const TextFormat = props => {
     }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
-      sx: classes.textFormatField,
+      sx: classes.textFormatField2,
       children: [/*#__PURE__*/_jsxs(Grid, {
         container: true,
         justifyContent: "space-between",
@@ -234,19 +294,21 @@ const TextFormat = props => {
             variant: "body1",
             color: "primary",
             sx: classes.typoLabel,
-            children: "Text Background Color"
+            children: "Background Color"
           })
         }), /*#__PURE__*/_jsx(Grid, {
           item: true,
           children: /*#__PURE__*/_jsx(Grid, {
             item: true,
             children: /*#__PURE__*/_jsx(Button, {
-              sx: classes.defaultBtn,
-              startIcon: /*#__PURE__*/_jsx(FormatColorResetIcon, {}),
+              sx: classes.defaultBtn2,
+              startIcon: /*#__PURE__*/_jsx(ColorResetIcon, {
+                stroke: "#A2B0B9"
+              }),
               onClick: handleDefault({
                 format: "bgColor"
               }),
-              children: "Default"
+              children: "Default Color"
             })
           })
         })]
@@ -265,6 +327,11 @@ const TextFormat = props => {
           id: "12_cc"
         }, "12_cc")
       })]
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.dividerGrid,
+      children: /*#__PURE__*/_jsx(Divider, {})
     }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 6,
@@ -272,8 +339,8 @@ const TextFormat = props => {
       children: [/*#__PURE__*/_jsx(Typography, {
         variant: "body1",
         color: "primary",
-        sx: classes.typoLabel,
-        children: "Text Alignment"
+        sx: classes.typoLabel2,
+        children: "Alignment"
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
         xs: 12,
@@ -292,7 +359,7 @@ const TextFormat = props => {
       children: [/*#__PURE__*/_jsx(Typography, {
         variant: "body1",
         color: "primary",
-        sx: classes.typoLabel,
+        sx: classes.typoLabel2,
         children: "Lists"
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
@@ -306,6 +373,11 @@ const TextFormat = props => {
           }, `pptool_block_${i}_${m.id}`);
         })
       })]
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.dividerGrid,
+      children: /*#__PURE__*/_jsx(Divider, {})
     }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
@@ -319,21 +391,29 @@ const TextFormat = props => {
         xs: 12,
         className: "typo-icons",
         sx: classes.evenSpace,
-        children: [typo?.map((m, i) => {
-          return /*#__PURE__*/_jsx(BlockButton, {
-            editor: editor,
-            ...m
-          }, `pptool_mark_${i}_${m.id}`);
+        children: [/*#__PURE__*/_jsx(SelectTypography, {
+          classes: classes,
+          editor: editor,
+          closeMainPopup: closeMainPopup || onClose
         }), fontStyle?.map((m, i) => {
           return /*#__PURE__*/_jsx(MarkButton, {
             editor: editor,
             ...m
           }, `pptool_mark_${i}_${m.id}`);
+        }), /*#__PURE__*/_jsx(SelectSuperSubscript, {
+          classes: classes,
+          editor: editor,
+          closeMainPopup: closeMainPopup || onClose
         }), /*#__PURE__*/_jsx(LinkButton, {
           active: isBlockActive(editor, link.format),
           editor: editor
         }, link.id)]
       })]
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.dividerGrid,
+      children: /*#__PURE__*/_jsx(Divider, {})
     }), /*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
@@ -371,7 +451,7 @@ const TextFormat = props => {
           children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
         })]
       }), /*#__PURE__*/_jsxs(ButtonGroup, {
-        sx: classes.btnGroup,
+        sx: classes.btnGroup2,
         children: [/*#__PURE__*/_jsx(Button, {
           className: `no-hover ${bqColor ? "active" : ""}`,
           onClick: handleQuote({
@@ -389,24 +469,6 @@ const TextFormat = props => {
           onClick: handleColorPicker("color"),
           children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
         })]
-      }), /*#__PURE__*/_jsx(Button, {
-        onClick: handlePageWidth("fixed"),
-        startIcon: /*#__PURE__*/_jsx(WidthNormalIcon, {}),
-        sx: classes.pageWidthBtn,
-        className: pageWidth === "fixed" || !pageWidth ? "active" : "",
-        style: {
-          width: "45%"
-        },
-        children: "Centered"
-      }), /*#__PURE__*/_jsx(Button, {
-        sx: classes.pageWidthBtn,
-        className: pageWidth === "full" ? "active" : "",
-        onClick: handlePageWidth("full"),
-        startIcon: /*#__PURE__*/_jsx(WidthFullIcon, {}),
-        style: {
-          width: "45%"
-        },
-        children: "Full width"
       })]
     }), /*#__PURE__*/_jsx(AllColors, {
       open: open,