@flozy/editor 5.3.6 → 5.3.7

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

@@ -90,12 +90,16 @@ const usePopupStyle = theme => ({
       },
       "& .more-btn-cbs": {
         color: `${theme?.palette?.editor?.closeButtonSvgStroke}`,
-        border: `1.5px solid ${theme?.palette?.editor?.closeButtonSvgStroke}`,
-        paddingTop: "10px"
+        border: `1px solid ${theme?.palette?.editor?.closeButtonSvgStroke}`,
+        paddingTop: "10px",
+        "& svg": {
+          width: "20px",
+          height: "24px"
+        }
       }
     },
     "@media only screen and (max-width: 599px)": {
-      margin: "10px !important",
+      // margin: "10px !important",
       background: "unset",
       boxShadow: "unset"
       // border: "none",
@@ -125,6 +129,9 @@ const usePopupStyle = theme => ({
         width: "330px"
       }
     },
+    "& .MuiTypography-root": {
+      padding: "0px"
+    },
     "&.templates": {
       width: "500px",
       maxWidth: "100%",
@@ -146,6 +153,7 @@ const usePopupStyle = theme => ({
       },
       "& .MuiTabScrollButton-horizontal": {
         borderBottom: "unset !important",
+        width: "10px",
         "& svg": {
           color: theme?.palette?.editor?.closeButtonSvgStroke
         }
@@ -177,6 +185,11 @@ const usePopupStyle = theme => ({
       justifyContent: "start",
       borderRadius: "10px !important",
       transition: "background-color 0.3s ease",
+      // "& .colorBoxElementIcon": {
+      //   "& path": {
+      //     fill: theme?.palette?.type === "dark" ? "none" : "",
+      //   },
+      // },
       "& .signatureElementIcon": {
         "& path": {
           fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
@@ -210,37 +223,37 @@ const usePopupStyle = theme => ({
         }
       },
       "&:hover": {
-        backgroundColor: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
+        backgroundColor: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`,
         "& .signatureElementIcon": {
           "& path": {
-            fill: `${theme?.palette?.editor?.menuOptionTextColor}`
+            fill: `${theme?.palette?.editor?.textColor}`
           }
         },
         "& .commonSvgStyle": {
           "& path": {
-            stroke: `${theme?.palette?.editor?.menuOptionTextColor}`
+            stroke: `${theme?.palette?.editor?.textColor}`
           }
         },
         "& .commonSvgStyle2": {
           "& path": {
-            stroke: `${theme?.palette?.editor?.menuOptionTextColor}`
+            stroke: `${theme?.palette?.editor?.textColor}`
           }
         },
         "& .colorBoxElementIcon": {
           "& path": {
-            stroke: `${theme?.palette?.editor?.menuOptionTextColor}`,
+            stroke: `${theme?.palette?.editor?.textColor}`,
             fill: "none"
           }
         },
         "& .gridElementIcon": {
           "& path": {
-            stroke: `${theme?.palette?.editor?.menuOptionTextColor}`,
-            fill: `${theme?.palette?.editor?.menuOptionTextColor}`
+            stroke: `${theme?.palette?.editor?.textColor}`,
+            fill: `${theme?.palette?.editor?.textColor}`
           }
         },
         "& .newLineElementIcon": {
           "& path": {
-            fill: `${theme?.palette?.editor?.menuOptionTextColor}`
+            fill: `${theme?.palette?.editor?.textColor}`
           }
         }
       },
@@ -284,8 +297,11 @@ const usePopupStyle = theme => ({
     },
     "& .textFormatMUIIcon": {
       "& svg": {
-        color: theme?.palette?.editor?.closeButtonSvgStroke
+        color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
       }
+    },
+    "& .npr-0": {
+      paddingRight: "0px !important"
     }
   },
   textFormatLabel: {
@@ -319,8 +335,8 @@ const usePopupStyle = theme => ({
     borderBottom: `1px solid ${theme?.palette?.editor?.deviderBgColor} !important`
   },
   textFormatField: {
-    marginBottom: "16px",
-    marginTop: "10px"
+    marginBottom: "8px",
+    marginTop: "8px"
   },
   textFormatField1: {
     marginBottom: "16px",
@@ -334,61 +350,111 @@ const usePopupStyle = theme => ({
     marginBottom: "16px"
   },
   textAlignButtons: {
-    // "& .justifyIcon": {
-    //   "& path": {
-    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-    //     stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-    //   },
-    // },
-    // "& .textAlignIconSameStyles": {
-    //   "& path": {
-    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-    //   },
-    // },
-    // "& .orderedListIcon": {
-    //   "& path": {
-    //     stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-    //   },
-    //   "& text": {
-    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-    //   },
-    // },
-    // "& .bulletedListTextIcon": {
-    //   "& path": {
-    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-    //     stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-    //   },
-    //   "& circle": {
-    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-    //   },
-    // },
-    // "& .checkedListTextIcon": {
-    //   "& path": {
-    //     stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-    //   },
-    // },
-    // "& .accordianListTextIcon": {
-    //   // stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`,
-    //   "& svg": {
-    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-    //     stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-    //   },
-    //   "& path": {
-    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-    //     stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-    //   },
-    // },
+    paddingLeft: "0px",
+    paddingRight: "12px",
+    "&:hover": {
+      background: "unset"
+    },
+    "&:not(.btnActive):hover": {
+      background: "unset",
+      color: `${theme?.palette?.editor?.textColor} !important`,
+      "& .justifyIcon": {
+        "& path": {
+          fill: `${theme?.palette?.editor?.textColor}`,
+          stroke: `${theme?.palette?.editor?.textColor}`
+        }
+      },
+      "& .textAlignIconSameStyles": {
+        "& path": {
+          fill: `${theme?.palette?.editor?.textColor}`
+        }
+      },
+      "& .orderedListIcon": {
+        "& .strokePathList": {
+          stroke: `${theme?.palette?.editor?.textColor} !important`
+        },
+        "& .fillPathList": {
+          fill: `${theme?.palette?.editor?.textColor} !important`
+        }
+      },
+      "& .bulletedListTextIcon": {
+        "& path": {
+          fill: `${theme?.palette?.editor?.textColor}`,
+          stroke: `${theme?.palette?.editor?.textColor}`
+        },
+        "& circle": {
+          fill: `${theme?.palette?.editor?.textColor}`
+        }
+      },
+      "& .checkedListTextIcon": {
+        "& path": {
+          stroke: `${theme?.palette?.editor?.textColor}`
+        }
+      },
+      "& .accordianListTextIcon": {
+        // stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`,
+        "& svg": {
+          fill: `${theme?.palette?.editor?.textColor}`,
+          stroke: `${theme?.palette?.editor?.textColor}`
+        },
+        "& path": {
+          fill: `${theme?.palette?.editor?.textColor}`,
+          stroke: `${theme?.palette?.editor?.textColor}`
+        }
+      }
+    }
   },
   autoCompleteaFontFamily: {
     "& .MuiOutlinedInput-root": {
       borderRadius: "8px",
       backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor}`,
-      fontSize: "14px",
+      fontSize: "12px",
+      fontWeight: "400",
       height: "36px",
-      paddingLeft: "15px !important"
+      paddingLeft: "12px !important"
     },
     "& .MuiOutlinedInput-notchedOutline": {
       border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
+    },
+    '& .MuiInputBase-root': {
+      '& input': {
+        border: "none !important"
+      }
+    },
+    "& svg": {
+      width: "20px",
+      height: "24px"
+    }
+  },
+  fontFamilyListOptions: {
+    "& .MuiAutocomplete-listbox": {
+      padding: "0px",
+      "&::-webkit-scrollbar-thumb": {
+        background: `none !important`
+      },
+      "&::-webkit-scrollbar-track": {
+        visibility: "hidden"
+      },
+      "&::-webkit-scrollbar-thumb": {
+        background: `${theme?.palette?.editor?.brainPopupScroll} !important`
+      },
+      "&::-webkit-scrollbar-track": {
+        visibility: "hidden"
+      },
+      "& li": {
+        margin: "5px",
+        borderRadius: "8px",
+        color: theme?.palette?.editor?.menuOptionTextColor,
+        fontSize: '14px',
+        padding: '8px 12px',
+        '&[aria-selected="true"]': {
+          backgroundColor: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`
+        }
+      }
+    },
+    "& .MuiPaper-root": {
+      borderRadius: "8px",
+      background: theme?.palette?.editor?.textWeightPopUpBackground
     }
   },
   textFormatSelect: {
@@ -400,6 +466,10 @@ const usePopupStyle = theme => ({
     fontFamily: "Inter, sans-serif",
     "& .MuiOutlinedInput-notchedOutline": {
       border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
+    },
+    "& svg": {
+      width: "20px",
+      height: "24px"
     }
   },
   textFormatSelectOptions: {
@@ -421,15 +491,32 @@ const usePopupStyle = theme => ({
     boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
   },
   dividerGrid: {
-    margin: "5px 0px 10px 0px",
-    background: `${theme?.palette?.editor?.deviderBgColor} !important`
+    margin: "5px 0px 10px 0px"
+    // background: `${theme?.palette?.editor?.deviderBgColor} !important`,
   },
+
   textFormatColorWrpr: {
     display: "flex",
     alignItems: "center",
     marginBottom: "8px"
   },
-  textFormatCG: {},
+  textFormatCG: {
+    alignItems: "flexStart",
+    justifyContent: "center",
+    flexDirection: "row",
+    "& .accordionIcon": {
+      paddingLeft: "0px",
+      paddingRight: "12px",
+      "&:not(.btnActive):hover": {
+        background: "unset",
+        "& .accordianIconSvgTextFormat": {
+          "& path": {
+            stroke: theme?.palette?.editor?.textColor
+          }
+        }
+      }
+    }
+  },
   evenSpace: {
     display: "flex",
     flexDirection: "row",
@@ -441,7 +528,36 @@ const usePopupStyle = theme => ({
     "&.typo-icons": {
       "& button": {
         width: "31px",
-        height: "36px"
+        height: "36px",
+        "&:hover": {
+          background: "unset"
+        },
+        "&:not(.btnActive):hover": {
+          background: "unset",
+          "& svg": {
+            color: `${theme?.palette?.editor?.textColor} !important`
+          },
+          "& .linkIcon": {
+            "& path": {
+              stroke: theme?.palette?.editor?.textColor
+            }
+          }
+        }
+      },
+      alignItems: "flexStart",
+      justifyContent: "center",
+      flexDirection: "row",
+      "&:hover": {
+        background: "unset"
+      },
+      "& .customSelectTool": {
+        color: theme?.palette?.editor?.closeButtonSvgStroke,
+        fontWeight: "510",
+        "& svg": {
+          marginTop: "8px",
+          width: "16px",
+          height: "8px"
+        }
       }
     },
     "&.text-decorations-wrpr": {
@@ -454,15 +570,24 @@ const usePopupStyle = theme => ({
     fontSize: "14px",
     marginBottom: "5px",
     paddingLeft: "5px",
+    marginTop: "4px",
     fontWeight: 500,
     color: theme?.palette?.editor?.textColor || "#000"
   },
   typoLabel2: {
     fontSize: "14px",
-    marginBottom: "5px",
-    paddingLeft: "10px",
+    marginBottom: "2px",
+    // paddingLeft: "10px",
     fontWeight: 500
   },
+  typoLabel3: {
+    fontSize: "14px",
+    marginBottom: "10px",
+    paddingLeft: "5px",
+    marginTop: "4px",
+    fontWeight: 500,
+    color: theme?.palette?.editor?.textColor || "#000"
+  },
   templateCard: {
     borderRadius: "10px",
     boxShadow: "none",
@@ -535,6 +660,7 @@ const usePopupStyle = theme => ({
     border: `1px solid ${theme?.palette?.editor?.borderColor}`,
     borderRadius: "7px",
     backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
+    height: "36px",
     "& button": {
       backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
       marginRight: "0px",
@@ -566,12 +692,17 @@ const usePopupStyle = theme => ({
       width: "2px",
       height: "25px",
       margin: "5px 0px"
+    },
+    "& svg": {
+      width: "20px",
+      height: "24px"
     }
   },
   btnGroup2: {
     border: `1px solid ${theme?.palette?.editor?.borderColor}`,
     borderRadius: "7px",
     backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
+    height: "36px",
     "& button": {
       backgroundColor: theme?.palette?.editor?.background,
       marginRight: "0px",
@@ -590,6 +721,10 @@ const usePopupStyle = theme => ({
       "&.no-hover": {
         border: `1px solid #ffffff00`,
         borderRadius: "7px 0px 0px 7px"
+      },
+      "& svg": {
+        width: "20px",
+        height: "24px"
       }
     },
     "& .colorBox": {
@@ -649,14 +784,14 @@ const usePopupStyle = theme => ({
     textTransform: "none",
     textDecorationLine: "underline",
     textUnderlineOffset: "2px",
-    padding: "0px 10px"
+    padding: "0px"
   },
   defaultBtn2: {
     color: `${theme?.palette?.editor?.deafultColorOptionTextColor} !important`,
     textTransform: "none",
     textDecorationLine: "underline",
     textUnderlineOffset: "2px",
-    padding: "0px 10px"
+    padding: "0px"
   },
   defaultBtn: {
     color: "#0F172A",
@@ -722,7 +857,10 @@ const usePopupStyle = theme => ({
     },
     "& .textFontArrows": {
       "& svg": {
-        stroke: theme?.palette?.editor?.textColor
+        stroke: theme?.palette?.editor?.closeButtonSvgStroke,
+        color: theme?.palette?.editor?.closeButtonSvgStroke,
+        width: "10px",
+        height: "12px"
       }
     }
   },
@@ -741,7 +879,7 @@ const usePopupStyle = theme => ({
     "& .popup_tabs": {
       backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
       "@media only screen and (max-width: 899px)": {
-        width: '100% !important'
+        width: "100% !important"
       }
     },
     "& .popup_tabs-header": {
@@ -943,10 +1081,10 @@ const usePopupStyle = theme => ({
         color: `${theme?.palette?.editor?.menuOptionTextColor} !important`,
         background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
         "& .orderedListIcon": {
-          "& path": {
+          "& .strokePathList": {
             stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
           },
-          "& text": {
+          "& .fillPathList": {
             fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
           }
         },

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

@@ -14,6 +14,8 @@ import SelectSuperSubscript from "./MiniTextFormat/SelectSuperSubscript";
 import { ColorResetIcon, TextDefaultStyleIcon } from "../../common/iconListV2";
 import FontFamilyAutocomplete from "../FormatTools/FontFamilyAutocomplete";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import LineSpacing from "../../common/StyleBuilder/fieldTypes/lineSpacing";
+import { getPageSettings } from "../../utils/pageSettings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const allTools = toolbarGroups.flat();
@@ -31,10 +33,18 @@ const TextFormat = props => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [type, setType] = useState(null);
   const open = Boolean(anchorEl);
+  const {
+    element: pageSt
+  } = getPageSettings(editor) || {};
+  const pageSettingLine = pageSt?.pageProps?.lineHeight;
   const {
     fontFamilies,
     theme
   } = useEditorContext();
+  const {
+    activeBreakPoint
+  } = useEditorContext();
+  const breakpoint = activeBreakPoint === "" ? "lg" : activeBreakPoint;
   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 fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
@@ -51,6 +61,8 @@ const TextFormat = props => {
     color: "",
     bgColor: ""
   };
+  let lineSpacingValue = activeMark(editor, 'lineHeight');
+  lineSpacingValue = lineSpacingValue?.[breakpoint] !== undefined ? lineSpacingValue : pageSettingLine;
   const handleColorPicker = type => e => {
     setType(type);
     setAnchorEl(e.currentTarget);
@@ -73,6 +85,7 @@ const TextFormat = props => {
       [type]: color
     };
     updateBlockQuote(attr);
+    setAnchorEl(null);
   };
   const handleQuote = attr => () => {
     updateBlockQuote(attr);
@@ -90,6 +103,13 @@ const TextFormat = props => {
       value
     });
   };
+  const handleLineSpacing = data => {
+    const [[format, value]] = Object.entries(data);
+    addMarkData(editor, {
+      format,
+      value
+    });
+  };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     sx: classes.textFormatWrapper,
@@ -118,6 +138,7 @@ const TextFormat = props => {
               format: "fontFamily",
               val: Object.values(fontFamilyMap)[0]
             }),
+            className: "npr-0",
             children: "Default Text"
           })
         })]
@@ -142,7 +163,7 @@ const TextFormat = props => {
         children: [/*#__PURE__*/_jsx(Typography, {
           variant: "body1",
           color: "primary",
-          sx: classes.typoLabel,
+          sx: classes.typoLabel3,
           children: "Font Weight"
         }), /*#__PURE__*/_jsx(Grid, {
           item: true,
@@ -159,10 +180,11 @@ const TextFormat = props => {
       }), /*#__PURE__*/_jsxs(Grid, {
         item: true,
         xs: 6,
+        className: "npr-0",
         children: [/*#__PURE__*/_jsx(Typography, {
           variant: "body1",
           color: "primary",
-          sx: classes.typoLabel,
+          sx: classes.typoLabel3,
           children: "Font Size"
         }), /*#__PURE__*/_jsx(Grid, {
           item: true,
@@ -342,15 +364,41 @@ const TextFormat = props => {
             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,
           customProps: customProps
-        }, link.id)]
+        }, link.id), /*#__PURE__*/_jsx(SelectSuperSubscript, {
+          classes: classes,
+          editor: editor,
+          closeMainPopup: closeMainPopup || onClose
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.dividerGrid,
+      children: /*#__PURE__*/_jsx(Divider, {})
+    }), /*#__PURE__*/_jsxs(Grid, {
+      item: true,
+      xs: 12,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        color: "primary",
+        sx: classes.typoLabel,
+        children: "Line Spacing"
+      }), /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        className: "typo-icons",
+        sx: classes.evenSpace,
+        children: /*#__PURE__*/_jsx(LineSpacing, {
+          value: lineSpacingValue,
+          onChange: handleLineSpacing,
+          data: {
+            key: 'lineHeight'
+          }
+        })
       })]
     }), /*#__PURE__*/_jsx(Grid, {
       item: true,
@@ -367,7 +415,7 @@ const TextFormat = props => {
       children: /*#__PURE__*/_jsx(Typography, {
         variant: "body1",
         color: "primary",
-        sx: classes.typoLabel,
+        sx: classes.typoLabel3,
         children: "Decorations"
       })
     }), /*#__PURE__*/_jsxs(Grid, {

package/dist/Editor/Toolbar/Toolbar.js

@@ -32,6 +32,7 @@ import ColorboxButton from "../Elements/Colorbox/ColorboxButton.js";
 import DividerButton from "../Elements/Divider/DividerButton.js";
 import EmbedScript from "../Elements/EmbedScript/EmbedScript.js";
 import FreeGridButton from "../Elements/FreeGrid/FreeGridButton.js";
+import DataViewButton from "../Elements/DataView/DataViewButton.js";
 import SearchButton from "../Elements/Search/SearchButton.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -118,6 +119,11 @@ export const RenderToolbarIcon = props => {
           editor: editor,
           icoBtnType: icoBtnType
         }, element.id);
+      case "dataView":
+        return /*#__PURE__*/_jsx(DataViewButton, {
+          editor: editor,
+          icoBtnType: icoBtnType
+        }, element.id);
       case "id":
         return /*#__PURE__*/_jsx(Id, {
           editor: editor

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -191,6 +191,10 @@ export const toolbarGroups = [[{
   id: 42,
   type: "table",
   group: "elements"
+}, {
+  id: 51,
+  type: "dataView",
+  group: "elements"
 }, {
   id: 48,
   format: "divider",