@flozy/editor 4.0.2 → 4.0.3

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

@@ -1,12 +1,11 @@
 const usePopupStyle = theme => ({
   popupWrapper: {
-    boxShadow: "1px 2px 15px 0px #2563EB40",
+    boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)",
     zIndex: 1300,
     marginBottom: "12px !important",
-    border: "1px solid #D8DDE1",
+    border: "1px solid #E0E0E0",
     borderRadius: "10px",
     maxWidth: "100%",
-    // maxHeight: "40px",
     "&.fullscreen": {
       marginBottom: "0px !important",
       "& .papper-wrpr": {
@@ -20,7 +19,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"
       }
@@ -62,9 +61,8 @@ const usePopupStyle = theme => ({
   },
   textFormatWrapper: {
     padding: "0px 16px 16px 16px",
-    width: "323px",
+    width: "370px",
     maxWidth: "100%",
-    overflowX: "hidden !important",
     // 30% of window height
     maxHeight: `${window.innerHeight * 0.45}px`,
     overflow: "auto",
@@ -80,7 +78,7 @@ const usePopupStyle = theme => ({
         paddingTop: "4px"
       },
       "@media only screen and (max-width: 599px)": {
-        width: "330px"
+        width: '330px'
       }
     },
     "&.templates": {
@@ -91,7 +89,7 @@ const usePopupStyle = theme => ({
         maxHeight: "fit-content"
       },
       "@media only screen and (max-width: 599px)": {
-        width: "330px"
+        width: '330px'
       }
     },
     "& .headerContainer": {},
@@ -110,19 +108,14 @@ 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: "19px",
+        height: "24px",
         marginRight: "8px"
       },
       "& span": {
         fontSize: "14px",
-        color: "#0F172A"
+        color: "#64748B"
       }
     },
     // for command list style
@@ -151,7 +144,7 @@ const usePopupStyle = theme => ({
       }
     },
     "@media only screen and (max-width: 599px)": {
-      width: "330px"
+      width: '330px'
     }
   },
   textFormatLabel: {
@@ -162,26 +155,17 @@ 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",
-    marginTop: "10px"
-  },
-  textFormatField1: {
-    marginBottom: "16px",
-    marginTop: "10px"
-  },
-  textFormatField2: {
-    // marginBottom: "16px",
-    marginTop: "10px"
+    marginBottom: "16px"
   },
   textFormatFieldBorder: {
     display: "flex",
@@ -191,9 +175,6 @@ 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",
@@ -210,7 +191,7 @@ const usePopupStyle = theme => ({
     },
     "&.typo-icons": {
       "& button": {
-        width: "31px",
+        width: "36px",
         height: "36px"
       }
     },
@@ -224,13 +205,6 @@ const usePopupStyle = theme => ({
     fontSize: "14px",
     marginBottom: "5px",
     paddingLeft: "5px",
-    fontWeight: 500,
-    color: "#000000"
-  },
-  typoLabel2: {
-    fontSize: "14px",
-    marginBottom: "5px",
-    paddingLeft: "10px",
     fontWeight: 500
   },
   templateCard: {
@@ -323,29 +297,6 @@ 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": {
@@ -375,28 +326,9 @@ 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: "#2563EB !important",
-    textTransform: "none",
-    textDecoration: "underline",
-    "&.Mui-disabled": {
-      color: "#A0AEC0 !important",
-      textDecoration: "none"
-    }
+    color: "#0F172A",
+    textTransform: "none"
   },
   templateCardBtnGrp: {
     display: "none",
@@ -451,7 +383,6 @@ const usePopupStyle = theme => ({
     color: theme?.palette?.editor?.textColor
   },
   colorPickerPopup: {
-    margin: "30px",
     "& .MuiPaper-root": {
       overflow: "auto",
       backgroundColor: theme?.palette?.editor?.background
@@ -482,17 +413,15 @@ const usePopupStyle = theme => ({
   colorPopper: {
     "& .MuiPaper-root": {
       backgroundColor: theme?.palette?.editor?.background,
-      padding: "4px 14px",
-      "@media only screen and (max-width: 600px)": {
+      '@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": {
@@ -507,10 +436,9 @@ const usePopupStyle = theme => ({
     }
   },
   buttonCardMedia: {
-    margin: "5px 0px",
     width: "100%",
-    height: "40px",
-    backgroundPosition: "center",
+    height: "48px",
+    backgroundPosition: "left top",
     backgroundSize: "contain",
     zIndex: 1,
     position: "relative",
@@ -519,25 +447,26 @@ const usePopupStyle = theme => ({
     }
   },
   buttonCardMediaWrpr: {
-    padding: '5px',
     position: "relative",
     margin: "8px",
     marginBottom: "0px",
-    '& .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",
-        // },
+    "&:hover": {
+      "& .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",
@@ -546,7 +475,7 @@ const usePopupStyle = theme => ({
   },
   miniTextFormatWrapper: {
     maxWidth: "100%",
-    padding: "2px 8px",
+    padding: "4px 8px",
     overflowX: "auto",
     "& .customSelectTool": {
       padding: "0px 8px",
@@ -595,38 +524,30 @@ const usePopupStyle = theme => ({
   },
   customSelectPopoverWrapper: {
     "& .MuiPopover-paper": {
-      maxHeight: 'fit-content',
-      // minWidth: "130px",
-      border: "1px solid #E4E8EB",
-      // background: theme?.palette?.editor?.background,
-      overflowY: 'hidden',
-      padding: "6px 12px 6px 0px",
+      maxHeight: '140px',
+      background: theme?.palette?.editor?.background,
       '@media only screen and (max-width: 600px)': {
         marginTop: "-40px"
       }
     },
     "& .customSelectOptionLabel": {
       color: theme?.palette?.editor?.textColor || "black",
-      margin: "0px 6px 0px 6px",
+      margin: "0px",
       width: "100%",
       justifyContent: "start",
       paddingRight: "20px",
       fontSize: "14px",
       lineHeight: "1.75 !important",
       fontWeight: 400,
-      // background: theme?.palette?.editor?.background || "#fff",
-      overflowY: "hidden",
+      background: theme?.palette?.editor?.background || "#fff",
       "&:hover": {
-        background: `#E9F3FE !important`,
-        color: `#2563EB !important`
+        background: `${theme?.palette?.action?.selected} !important`
+      },
+      "&.selected": {
+        color: `${theme?.palette?.primary?.main} !important`,
+        background: `${theme?.palette?.action?.selected} !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, Divider, Grid, Typography } from "@mui/material";
+import { Button, ButtonGroup, 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,11 +14,6 @@ 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();
@@ -28,20 +23,18 @@ const ButtonComp = {
 const TextFormat = props => {
   const {
     classes,
-    editor,
-    onClose,
-    closeMainPopup
+    editor
   } = 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" && f.format != "strikethrough" && f.format != "superscript" && f.format != "subscript");
+  const fontStyle = allTools.filter(f => f.type === "mark");
   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 || {};
@@ -59,11 +52,6 @@ const TextFormat = props => {
     color: "",
     bgColor: ""
   };
-  const {
-    theme,
-    updateTheme
-  } = useEditorTheme();
-  const customized = isTextCustomized(editor);
   const handlePageWidth = width => () => {
     updatePageSettings(editor, {
       ...(pageProps || {}),
@@ -113,49 +101,6 @@ 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, {
@@ -173,19 +118,19 @@ const TextFormat = props => {
         }), /*#__PURE__*/_jsx(Grid, {
           item: true,
           children: /*#__PURE__*/_jsx(Button, {
-            sx: classes.defaultBtn1,
-            startIcon: /*#__PURE__*/_jsx(TextDefaultStyleIcon, {}),
+            sx: classes.defaultBtn,
+            startIcon: /*#__PURE__*/_jsx(FormatClearIcon, {}),
             onClick: handleDefault({
               format: "fontFamily",
               val: Object.values(fontFamilyMap)[0]
             }),
-            children: "Default Text"
+            children: "Default"
           })
         })]
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
         xs: 12,
-        sx: classes.textFormatField1,
+        sx: classes.textFormatField,
         children: /*#__PURE__*/_jsx(Dropdown, {
           classes: classes,
           ...fontFamily,
@@ -235,15 +180,10 @@ 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.textFormatField2,
+      sx: classes.textFormatField,
       children: [/*#__PURE__*/_jsxs(Grid, {
         container: true,
         justifyContent: "space-between",
@@ -259,12 +199,12 @@ const TextFormat = props => {
         }), /*#__PURE__*/_jsx(Grid, {
           item: true,
           children: /*#__PURE__*/_jsx(Button, {
-            sx: classes.defaultBtn1,
-            startIcon: /*#__PURE__*/_jsx(ColorResetIcon, {}),
+            sx: classes.defaultBtn,
+            startIcon: /*#__PURE__*/_jsx(FormatColorResetIcon, {}),
             onClick: handleDefault({
               format: "color"
             }),
-            children: "Default Color"
+            children: "Default"
           })
         })]
       }), /*#__PURE__*/_jsx(Grid, {
@@ -283,7 +223,7 @@ const TextFormat = props => {
     }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
-      sx: classes.textFormatField2,
+      sx: classes.textFormatField,
       children: [/*#__PURE__*/_jsxs(Grid, {
         container: true,
         justifyContent: "space-between",
@@ -294,21 +234,19 @@ const TextFormat = props => {
             variant: "body1",
             color: "primary",
             sx: classes.typoLabel,
-            children: "Background Color"
+            children: "Text Background Color"
           })
         }), /*#__PURE__*/_jsx(Grid, {
           item: true,
           children: /*#__PURE__*/_jsx(Grid, {
             item: true,
             children: /*#__PURE__*/_jsx(Button, {
-              sx: classes.defaultBtn2,
-              startIcon: /*#__PURE__*/_jsx(ColorResetIcon, {
-                stroke: "#A2B0B9"
-              }),
+              sx: classes.defaultBtn,
+              startIcon: /*#__PURE__*/_jsx(FormatColorResetIcon, {}),
               onClick: handleDefault({
                 format: "bgColor"
               }),
-              children: "Default Color"
+              children: "Default"
             })
           })
         })]
@@ -327,11 +265,6 @@ 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,
@@ -339,8 +272,8 @@ const TextFormat = props => {
       children: [/*#__PURE__*/_jsx(Typography, {
         variant: "body1",
         color: "primary",
-        sx: classes.typoLabel2,
-        children: "Alignment"
+        sx: classes.typoLabel,
+        children: "Text Alignment"
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
         xs: 12,
@@ -359,7 +292,7 @@ const TextFormat = props => {
       children: [/*#__PURE__*/_jsx(Typography, {
         variant: "body1",
         color: "primary",
-        sx: classes.typoLabel2,
+        sx: classes.typoLabel,
         children: "Lists"
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
@@ -373,11 +306,6 @@ 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,
@@ -391,29 +319,21 @@ const TextFormat = props => {
         xs: 12,
         className: "typo-icons",
         sx: classes.evenSpace,
-        children: [/*#__PURE__*/_jsx(SelectTypography, {
-          classes: classes,
-          editor: editor,
-          closeMainPopup: closeMainPopup || onClose
+        children: [typo?.map((m, i) => {
+          return /*#__PURE__*/_jsx(BlockButton, {
+            editor: editor,
+            ...m
+          }, `pptool_mark_${i}_${m.id}`);
         }), 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,
@@ -451,7 +371,7 @@ const TextFormat = props => {
           children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
         })]
       }), /*#__PURE__*/_jsxs(ButtonGroup, {
-        sx: classes.btnGroup2,
+        sx: classes.btnGroup,
         children: [/*#__PURE__*/_jsx(Button, {
           className: `no-hover ${bqColor ? "active" : ""}`,
           onClick: handleQuote({
@@ -469,6 +389,24 @@ 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,

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

@@ -31,9 +31,7 @@ const PopupTool = props => {
   const table = new TableUtil(editor);
   const [size] = useWindowResize();
   useEffect(() => {
-    const userStoppedSelection = size?.device === "xs" ? true : event === "end"; // for mobile, when user starts the selection, we are gonna show the popup tool
-
-    if (userStoppedSelection && anchorEl && !open) {
+    if (event === "end" && anchorEl && !open) {
       // for table cell selection
       const isCellsSelected = table.isCellSelected(editor.selection);
       if (!isCellsSelected) {
@@ -102,14 +100,14 @@ const PopupTool = props => {
       transition: true,
       placement: "auto-end",
       sx: classes.popupWrapper,
+      className: `tools-drawer ${size?.device}`,
       children: ({
         TransitionProps
       }) => /*#__PURE__*/_jsx(Fade, {
         ...TransitionProps,
         children: /*#__PURE__*/_jsx(Paper, {
           style: {
-            borderRadius: "6px",
-            border: "1px solid #8360FD"
+            borderRadius: "10px"
           },
           children: /*#__PURE__*/_jsx(MiniTextFormat, {
             editor: editor,