@flozy/editor 4.8.9 → 4.9.1

package/dist/Editor/CommonEditor.js

@@ -579,8 +579,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                 setIsTextSelected: setIsTextSelected,
                 customProps: customProps,
                 editorWrapper: editorWrapper
-              }) : null, !readOnly && showViewport ? /*#__PURE__*/_jsx(SwitchViewport, {
+              }) : null, !readOnly ? /*#__PURE__*/_jsx(SwitchViewport, {
                 breakpoint: breakpoint,
+                show: showViewport,
                 onChange: b => onSwitchBreakpoint(b)
               }) : null]
             })

package/dist/Editor/Editor.css

@@ -351,7 +351,7 @@ blockquote {
   height: 100%;
   width: 100%;
   border: 1px solid #2563EB;
-  border-radius: 12px;
+  border-radius: 7px;
 }
 
 .activeBrush svg {
@@ -383,7 +383,7 @@ blockquote {
 
 .dialog-actions-si .MuiButtonBase-root {
   opacity: 1;
-  padding: 6px 5px 0px 3px !important
+  padding: 0px 5px 0px 2px !important
 }
 
 .signature-tab {
@@ -846,7 +846,7 @@ blockquote {
 
 .dialogComp .MuiInputBase-input {
   border-radius: 8px;
-  box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.05);
+  /* box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.05); */
   font-size: 12px;
   font-weight: 500;
 }

package/dist/Editor/Elements/Color Picker/ColorButtons.js

@@ -82,7 +82,7 @@ export const AllColors = props => {
         children: /*#__PURE__*/_jsx(Box, {
           className: "buttonsWrpr",
           style: {
-            padding: "8px"
+            padding: "5px"
           },
           children: all.map((m, i) => {
             return /*#__PURE__*/_jsx(SingleColorButton, {

package/dist/Editor/Elements/Color Picker/Styles.js

@@ -14,8 +14,12 @@ const ColorPickerStyles = theme => ({
   },
   colorPopper: {
     marginTop: "20px",
+    borderRadius: "7px !important",
     "& .MuiPaper-root": {
-      backgroundColor: theme?.palette?.editor?.background,
+      backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
+      border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
+      borderRadius: "7px !important",
+      padding: "0px 5px",
       '@media only screen and (max-width: 600px)': {
         marginTop: "-40px"
       }

package/dist/Editor/Elements/Grid/GridButton.js

@@ -4,6 +4,7 @@ import { insertGrid, insertPlainGrid } from "../../utils/grid";
 import { GridIcon } from "../../common/iconslist";
 import ToolbarIcon from "../../common/ToolbarIcon";
 import GridStyles from "./Styles";
+import { GridElement } from "../../common/iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -46,7 +47,7 @@ const GridButton = props => {
     children: [/*#__PURE__*/_jsx(ToolbarIcon, {
       title: "Column",
       onClick: onButtonClick,
-      icon: /*#__PURE__*/_jsx(GridIcon, {}),
+      icon: /*#__PURE__*/_jsx(GridElement, {}),
       icoBtnType: icoBtnType
     }), /*#__PURE__*/_jsxs(Dialog, {
       open: open,

package/dist/Editor/Elements/Grid/GridItem.js

@@ -315,7 +315,8 @@ const GridItem = props => {
         ...giInProps,
         width: "100%",
         height: "100%",
-        color: textColor || "#000",
+        // dark theme default color effect - FS-6961
+        color: textColor || "inherit",
         "&:hover": {
           borderColor: borderColorHover || borderColor || "transparent"
         }
@@ -328,12 +329,12 @@ const GridItem = props => {
       onClose: onClose,
       onDelete: onDelete,
       customProps: customProps
-    }) : null, /*#__PURE__*/_jsx(Resizer, {
+    }) : null, !readOnly ? /*#__PURE__*/_jsx(Resizer, {
       classes: classes,
       className: resizing ? "resizing" : "",
       onMouseDown: onMouseDown,
       height: "auto"
-    })]
+    }) : null]
   });
 };
 export default GridItem;

package/dist/Editor/Elements/Grid/Styles.js

@@ -38,14 +38,24 @@ const GridStyles = theme => ({
           }
         },
         flex: "1 1 0",
+        height: "100%",
         [theme?.breakpoints?.between("xs", "md")]: {
           flex: "1 1 100%",
+          height: "auto",
           padding: "0px !important",
           minWidth: "100% !important",
           maxWidth: "100% !important",
           "& .col-width-resizer": {
             display: "none !important"
           }
+        },
+        "& .gi-inner-cw": {
+          overflowX: "auto",
+          "& .tableToolBar": {
+            display: "flex",
+            maxWidth: "100%",
+            overflowX: "auto"
+          }
         }
       },
       "& .col-width-resizer": {

package/dist/Editor/Elements/Grid/templates/default_grid.js

@@ -14,10 +14,10 @@ const default_grid = [{
     bgColor: "rgba(255, 255, 255, 0)",
     lockSpacing: true,
     bannerSpacing: {
-      top: "0",
+      top: "8",
       left: "0",
       right: "0",
-      bottom: "0"
+      bottom: "16"
     },
     alignment: {
       horizantal: "center"
@@ -36,10 +36,10 @@ const default_grid = [{
     bgColor: "rgba(255, 255, 255, 0)",
     lockSpacing: true,
     bannerSpacing: {
-      top: "0",
+      top: "8",
       left: "0",
       right: "0",
-      bottom: "0"
+      bottom: "16"
     },
     forceFullWidth: true,
     borderWidth: "0px"

package/dist/Editor/Elements/Signature/SignatureOptions/TypeSignature.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { signedTextFonts } from "../../../utils/font";
 import { Grid, Button, TextField, InputAdornment, IconButton, Typography } from "@mui/material";
-import ClearIcon from "@mui/icons-material/Clear";
+import ClearRoundedIcon from '@mui/icons-material/ClearRounded';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const TypeSignature = props => {
@@ -73,7 +73,7 @@ const TypeSignature = props => {
                 position: "end",
                 children: /*#__PURE__*/_jsx(IconButton, {
                   onClick: () => setName(""),
-                  children: /*#__PURE__*/_jsx(ClearIcon, {})
+                  children: /*#__PURE__*/_jsx(ClearRoundedIcon, {})
                 })
               })
             }

package/dist/Editor/Elements/Signature/SignaturePopup.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton, Grid, TextField, Typography, Tabs, Tab, InputAdornment, Box } from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import SignatureOptions from "./SignatureOptions";
@@ -158,7 +158,7 @@ const SignaturePopup = props => {
         sx: {
           borderRadius: "8px",
           boxShadow: "0px 4px 10px 0px #00000029",
-          maxWidth: "560px"
+          maxWidth: "530px"
         }
       },
       sx: classes.signaturePopup,
@@ -200,7 +200,7 @@ const SignaturePopup = props => {
                     children: /*#__PURE__*/_jsx(IconButton, {
                       onClick: handleClose,
                       className: "close-popupbtn",
-                      children: /*#__PURE__*/_jsx(CloseIcon, {})
+                      children: /*#__PURE__*/_jsx(CloseRoundedIcon, {})
                     })
                   })]
                 })
@@ -316,25 +316,7 @@ const SignaturePopup = props => {
                     defaultValue: defaultName || "",
                     size: "small",
                     onChange: onChange,
-                    sx: {
-                      "& .MuiOutlinedInput-root": {
-                        borderRadius: "10px",
-                        "& fieldset": {
-                          border: "1px solid #D8DDE1"
-                        }
-                        // '&:hover fieldset': {
-                        //   borderColor: 'yourHoverColor',
-                        // },
-                        // '&.Mui-focused fieldset': {
-                        //   borderColor: 'yourFocusedColor',
-                        // },
-                      },
-
-                      "& .MuiInputBase-input::placeholder": {
-                        fontFamily: '"Inter", sans-serif"',
-                        fontSize: "14px"
-                      }
-                    }
+                    sx: classes.signaturePopUpNameField
                   })
                 })]
               }), /*#__PURE__*/_jsxs(Grid, {
@@ -459,25 +441,7 @@ const SignaturePopup = props => {
                     placeholder: "Enter Email",
                     size: "small",
                     onChange: onChange,
-                    sx: {
-                      "& .MuiOutlinedInput-root": {
-                        borderRadius: "10px",
-                        "& fieldset": {
-                          border: "1px solid #D8DDE1"
-                        }
-                        // '&:hover fieldset': {
-                        //   borderColor: 'yourHoverColor',
-                        // },
-                        // '&.Mui-focused fieldset': {
-                        //   borderColor: 'yourFocusedColor',
-                        // },
-                      },
-
-                      "& .MuiInputBase-input::placeholder": {
-                        fontFamily: '"Inter", sans-serif"',
-                        fontSize: "14px"
-                      }
-                    },
+                    sx: classes.signaturePopUpNameField,
                     defaultValue: defaultEmail || ""
                   })
                 })]
@@ -530,13 +494,13 @@ const SignaturePopup = props => {
                       className: brush.size === m ? "activeBrush" : "",
                       children: /*#__PURE__*/_jsx("span", {
                         style: {
-                          width: 20 + m,
-                          height: 20 + m
+                          width: 17 + m,
+                          height: 17 + m
                         },
                         children: /*#__PURE__*/_jsx(PencilIcon, {
                           style: {
-                            width: 20 + m,
-                            height: 20 + m
+                            width: 17 + m,
+                            height: 17 + m
                           }
                         })
                       })
@@ -547,7 +511,7 @@ const SignaturePopup = props => {
             }) : null, /*#__PURE__*/_jsxs(_Fragment, {
               children: [!readOnly ? /*#__PURE__*/_jsx(Button, {
                 onClick: handleClear,
-                className: "secondaryBtn actionBtn deleteBtn",
+                className: `secondaryBtn actionBtn deleteBtn deleteButtonSignature`,
                 children: "Delete"
               }) : null, /*#__PURE__*/_jsx(Button, {
                 onClick: handleSave,

package/dist/Editor/Toolbar/FormatTools/BlockButton.js

@@ -2,6 +2,8 @@ import React from "react";
 import Icon from "../../common/Icon";
 import Button from "../../common/Button";
 import { toggleBlock, isBlockActive, isMarkActive, toggleMark } from "../../utils/SlateUtilityFunctions.js";
+import usePopupStyle from "../PopupTool/PopupToolStyle";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MARK_TYPES = ["doublequote"];
 const BlockButton = props => {
@@ -12,6 +14,10 @@ const BlockButton = props => {
   } = props;
   const isMark = MARK_TYPES?.indexOf(format) >= 0;
   const isActive = isMark ? isMarkActive(editor, format) : isBlockActive(editor, format);
+  const {
+    theme
+  } = useEditorContext();
+  const classes = usePopupStyle(theme);
   return /*#__PURE__*/_jsx(Button, {
     active: isActive,
     format: format,
@@ -24,6 +30,7 @@ const BlockButton = props => {
       }
     },
     title: title,
+    sx: classes.textAlignButtons,
     children: /*#__PURE__*/_jsx(Icon, {
       icon: format
     })

package/dist/Editor/Toolbar/FormatTools/Dropdown.js

@@ -23,23 +23,17 @@ const Dropdown = ({
     value: value,
     className: "editor-dd",
     onChange: e => changeMarkData(e, format),
-    style: {
-      fontFamily: fontFamilyMap[value],
-      width: width || "100%",
-      height: "36px",
-      borderRadius: "10px",
-      fontSize: "12px"
-    },
     MenuProps: {
       PaperProps: {
         sx: classes?.textOptions
       }
     },
-    children: options.map((item, index) => /*#__PURE__*/_jsx(MenuItem, {
-      style: {
-        fontFamily: item.text
-      },
+    sx: classes.textFormatSelect,
+    children: options.map((item, index) => /*#__PURE__*/_jsx(MenuItem
+    // style={{ fontFamily: item.text }}
+    , {
       value: item.value,
+      sx: classes.textFormatSelectOptions,
       children: item.text
     }, index))
   });

package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js

@@ -1,6 +1,8 @@
 import React from "react";
 import { Autocomplete, TextField } from "@mui/material";
 import { activeMark, addMarkData } from "../../utils/SlateUtilityFunctions.js";
+import usePopupStyle from "../PopupTool/PopupToolStyle.js";
+import { useEditorContext } from "../../hooks/useMouseMove.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const FontFamilyAutocomplete = ({
   editor,
@@ -27,17 +29,19 @@ const FontFamilyAutocomplete = ({
       });
     }
   };
+  const {
+    theme
+  } = useEditorContext();
+  const classes = usePopupStyle(theme);
   return /*#__PURE__*/_jsx(Autocomplete, {
     size: "small",
     style: {
       fontFamily: `${value || ""}`,
-      width: width || "100%",
-      height: "36px",
-      borderRadius: "10px",
-      fontSize: "14px"
+      width: width || "100%"
     },
     value: value || options?.[0],
     className: "editor-dd",
+    sx: classes.autoCompleteaFontFamily,
     onChange: (e, newValue) => changeMarkData(e, newValue, format),
     getOptionLabel: option => {
       return option;

package/dist/Editor/Toolbar/FormatTools/TextSize.js

@@ -93,8 +93,6 @@ const TextSize = ({
       inputProps: {
         style: {
           width: fullWidth ? "100%" : "30px",
-          // textAlign: "center",
-          height: "19px",
           fontSize: "12px"
         }
       },

package/dist/Editor/Toolbar/Mini/MiniToolbar.js

@@ -19,9 +19,9 @@ const POPUP_TYPES = {
   addTemplate: AddTemplates
 };
 const POPUP_OFFSETS = {
-  textFormat: [80, 5],
-  addElement: [60, 5],
-  addTemplate: [20, 5]
+  textFormat: [75, 5],
+  addElement: [40, 5],
+  addTemplate: [10, 5]
 };
 const FULLSCREEN_POPUP = {
   addTemplate: true
@@ -180,9 +180,6 @@ const MiniToolbar = props => {
       }],
       children: PopupComponent ? /*#__PURE__*/_jsxs(Paper, {
         className: "papper-wrpr",
-        style: {
-          borderRadius: "10px"
-        },
         children: [/*#__PURE__*/_jsx(PopperHeader, {
           title: POPUP_TITLE[popper],
           classes: popupStyles,

package/dist/Editor/Toolbar/Mini/Styles.js

@@ -39,7 +39,10 @@ const miniToolbarStyles = theme => ({
         },
         "&.active": {
           "& svg": {
-            stroke: theme?.palette?.editor?.activeColor
+            stroke: theme?.palette?.editor?.activeColor,
+            "& path": {
+              stroke: theme?.palette?.editor?.activeColor
+            }
           }
         },
         "&.activeUndo": {

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

@@ -4,6 +4,7 @@ import CloseIcon from "@mui/icons-material/Close";
 import OpenInFullIcon from "@mui/icons-material/OpenInFull";
 import CloseFullscreenIcon from "@mui/icons-material/CloseFullscreen";
 import Icon from "../../common/Icon";
+import { ToggleFullScreenIcon } from "../../common/iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SearchBox = props => {
@@ -39,18 +40,14 @@ const PopperHeader = props => {
     padding: 2,
     className: "headerContainer",
     style: {
-      paddingTop: "2px"
+      paddingTop: "5px"
     },
     children: /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
-      style: {
-        display: "flex",
-        borderBottom: "1px solid #DCE4EC"
-      },
       justifyContent: "space-between",
       alignItems: "center",
-      className: "textSettingHeader",
+      sx: classes.textSettingHeader,
       children: [/*#__PURE__*/_jsx(Typography, {
         color: "primary",
         sx: {
@@ -83,11 +80,11 @@ const PopperHeader = props => {
           children: /*#__PURE__*/_jsx(IconButton, {
             style: {
               marginRight: "8px",
-              marginLeft: "8px"
+              marginLeft: "4px"
             },
-            className: "close-popupbtn",
+            className: "close-popupbtn toogleFullScreenBtn",
             onClick: toggleFullscreen,
-            children: fullScreen ? /*#__PURE__*/_jsx(CloseFullscreenIcon, {}) : /*#__PURE__*/_jsx(OpenInFullIcon, {})
+            children: fullScreen ? /*#__PURE__*/_jsx(CloseFullscreenIcon, {}) : /*#__PURE__*/_jsx(ToggleFullScreenIcon, {})
           })
         }) : null, /*#__PURE__*/_jsx(Tooltip, {
           title: "Close",