@flozy/editor 8.0.6 → 8.0.7

package/dist/Editor/Styles/EditorStyles.js

@@ -1,325 +1,329 @@
 const editorStyles = ({
   padHeight,
   placeHolderColor,
-  theme
-}) => ({
-  root: {
-    display: "flex",
-    position: "relative",
-    padding: "0px",
-    alignItems: "center",
-    justifyContent: "center",
-    "*": {
-      boxSizing: "border-box"
-    },
-    "&.iframe-editor": {
-      "& .mini-tool-wrpr-ei": {
-        display: "none"
-      }
-    },
-    "& .mobileMiniTextWrapper": {
-      boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
-      position: "fixed",
-      bottom: "env(safe-area-inset-bottom)",
-      left: 0,
-      width: "100%",
-      zIndex: 99999,
-      backgroundColor: theme?.palette?.editor?.background || "#fff",
-      color: theme?.palette?.editor?.textColor || "black",
-      "& .MuiOutlinedInput-input": {
-        color: theme?.palette?.editor?.textColor || "black"
-      }
-    },
-    "&.stimulate-xs": {
-      "& .scrollable-content": {
-        width: "320px"
+  theme,
+  overrideWrapperStyles = {}
+}) => {
+  return {
+    root: {
+      display: "flex",
+      position: "relative",
+      padding: "0px",
+      alignItems: "center",
+      justifyContent: "center",
+      "*": {
+        boxSizing: "border-box"
       },
-      ":before": {
-        content: '" "',
-        position: "absolute",
-        top: 0,
-        left: 0,
-        width: "calc(50% - 162px)",
-        height: "100%",
-        pointerEvents: "none",
-        backgroundColor: "#FFF",
-        zIndex: 10
+      "&.iframe-editor": {
+        "& .mini-tool-wrpr-ei": {
+          display: "none"
+        }
       },
-      ":after": {
-        content: '" "',
-        position: "absolute",
-        top: 0,
-        right: 0,
-        width: "calc(50% - 160px)",
-        height: "100%",
-        pointerEvents: "none",
-        backgroundColor: "#FFF",
-        zIndex: 10
-      }
-    }
-  },
-  slateWrapper: {
-    paddingTop: "0px",
-    height: `${window.innerHeight - padHeight}px`,
-    width: "100%",
-    overflowY: "auto",
-    overflowX: "hidden",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    color: "#0f172a",
-    "& .has-topbanner": {
-      "& .doc-title-ele-wrpr": {
-        marginTop: "12px"
-      }
-    },
-    "&.no-color": {
-      backgroundColor: theme?.palette?.editor?.background,
-      color: theme?.palette?.editor?.textColor,
-      "&.pc-page-builder": {
-        backgroundColor: "#FFF",
-        color: "#000"
+      "& .mobileMiniTextWrapper": {
+        boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
+        position: "fixed",
+        bottom: "env(safe-area-inset-bottom)",
+        left: 0,
+        width: "100%",
+        zIndex: 99999,
+        backgroundColor: theme?.palette?.editor?.background || "#fff",
+        color: theme?.palette?.editor?.textColor || "black",
+        "& .MuiOutlinedInput-input": {
+          color: theme?.palette?.editor?.textColor || "black"
+        }
       },
-      "& .signed-btn": {
-        "& img": {
-          backgroundColor: "#FFF"
+      "&.stimulate-xs": {
+        "& .scrollable-content": {
+          width: "320px"
+        },
+        ":before": {
+          content: '" "',
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "calc(50% - 162px)",
+          height: "100%",
+          pointerEvents: "none",
+          backgroundColor: "#FFF",
+          zIndex: 10
+        },
+        ":after": {
+          content: '" "',
+          position: "absolute",
+          top: 0,
+          right: 0,
+          width: "calc(50% - 160px)",
+          height: "100%",
+          pointerEvents: "none",
+          backgroundColor: "#FFF",
+          zIndex: 10
         }
-      }
+      },
+      ...overrideWrapperStyles
     },
-    "& .max-content": {
+    slateWrapper: {
+      paddingTop: "0px",
+      height: `${window.innerHeight - padHeight}px`,
       width: "100%",
+      overflowY: "auto",
+      overflowX: "hidden",
       display: "flex",
-      flex: 1,
       flexDirection: "column",
-      paddingBottom: "25px !important"
-    },
-    "& .scroll-area": {
-      display: "flex",
-      justifyContent: "center",
-      flex: 1
-    },
-    "& .editor-wrapper": {
-      maxWidth: "100%",
-      height: "100%",
-      overflow: "visible",
-      "& .section-wrapper-fluid": {
-        "& .grid-container": {
-          maxWidth: "1440px"
+      alignItems: "center",
+      color: "#0f172a",
+      "& .has-topbanner": {
+        "& .doc-title-ele-wrpr": {
+          marginTop: "12px"
         }
-      }
-    },
-    "& .el-toolbar": {
-      position: "absolute",
-      left: 0,
-      top: 0,
-      width: "fit-content",
-      "& button": {
-        border: "1px solid rgba(37, 99, 235, 0.32)",
-        borderRadius: "10px",
-        boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
-        background: "#fff",
-        width: "36px",
-        height: "36px",
-        "&.mr": {
-          marginRight: "2px"
+      },
+      "&.no-color": {
+        backgroundColor: theme?.palette?.editor?.background,
+        color: theme?.palette?.editor?.textColor,
+        "&.pc-page-builder": {
+          backgroundColor: "#FFF",
+          color: "#000"
         },
-        "& svg": {
-          stroke: "rgb(100, 116, 139);"
-        }
-      }
-    },
-    "& .accordion-summary-collapse-btn": {
-      padding: "4px",
-      width: '5px'
-    },
-    "& .workflow-icon-btn": {
-      pointerEvents: "none",
-      position: "absolute",
-      right: "-9px",
-      top: "-9px",
-      border: "2px solid #f3b814",
-      padding: "0px",
-      background: "#FFF",
-      "& svg": {
-        width: "18px",
-        height: "18px"
-      }
-    },
-    "& .svg-big-btn": {
-      padding: "2px !important",
-      "& svg": {
-        width: "24px !important",
-        height: "24px !important"
-      }
-    },
-    "& .ed-section-wrapper": {
-      display: "flex",
-      width: "100%",
-      justifyContent: "center",
-      alignItems: "center",
-      position: "relative",
-      "&:hover": {
-        "& .ed-section-inner": {
-          "& .element-toolbar.ss": {
-            display: "block",
-            left: "8px",
-            top: "8px",
-            width: "fit-content",
-            "& button": {
-              boxShadow: "none",
-              color: "#D7D7D6",
-              background: "rgb(221, 221, 221, 0.1)",
-              "&:hover": {
-                background: "rgb(221, 221, 221, 0.8)"
-              }
-            }
+        "& .signed-btn": {
+          "& img": {
+            backgroundColor: "#FFF"
           }
-        },
-        "&.hselect:before": {
-          display: "block"
         }
       },
-      "& .ed-section-inner": {
-        maxWidth: "1440px",
-        "& .element-toolbar.ss": {
-          display: "none"
+      "& .max-content": {
+        width: "100%",
+        display: "flex",
+        flex: 1,
+        flexDirection: "column",
+        paddingBottom: "25px !important"
+      },
+      "& .scroll-area": {
+        display: "flex",
+        justifyContent: "center",
+        flex: 1
+      },
+      "& .editor-wrapper": {
+        maxWidth: "100%",
+        height: "100%",
+        overflow: "visible",
+        "& .section-wrapper-fluid": {
+          "& .grid-container": {
+            maxWidth: "1440px"
+          }
         }
       },
-      "&.needHover:before": {
-        content: '" "',
+      "& .el-toolbar": {
         position: "absolute",
-        width: "calc(100% - 2px)",
-        height: "calc(100% - 2px)",
         left: 0,
         top: 0,
-        border: "1px solid transparent",
-        background: "rgba(0,0,0,0.05)",
+        width: "fit-content",
+        "& button": {
+          border: "1px solid rgba(37, 99, 235, 0.32)",
+          borderRadius: "10px",
+          boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
+          background: "#fff",
+          width: "36px",
+          height: "36px",
+          "&.mr": {
+            marginRight: "2px"
+          },
+          "& svg": {
+            stroke: "rgb(100, 116, 139);"
+          }
+        }
+      },
+      "& .accordion-summary-collapse-btn": {
+        padding: "4px",
+        width: '5px'
+      },
+      "& .workflow-icon-btn": {
         pointerEvents: "none",
-        display: "none"
-      }
-    },
-    "& .element-empty-btn": {
-      backgroundColor: "rgb(242, 241, 238)",
-      color: "rgba(55, 53, 47, 0.65)",
-      outline: 0,
-      border: 0,
-      padding: "16px 12px",
-      width: "100%",
-      cursor: "pointer",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      borderRadius: "12px",
-      "& svg": {
-        marginRight: "8px"
-      }
-    },
-    "& .content-editable.empty": {
-      "&:after": {
-        color: theme?.palette?.type === "dark" ? "#99A5B6" : placeHolderColor
-      }
-    },
-    "& .checkbox-edit": {
-      alignSelf: "flex-start",
-      "& .MuiFormControlLabel-root": {
-        marginRight: "0px"
+        position: "absolute",
+        right: "-9px",
+        top: "-9px",
+        border: "2px solid #f3b814",
+        padding: "0px",
+        background: "#FFF",
+        "& svg": {
+          width: "18px",
+          height: "18px"
+        }
       },
-      "& .MuiCheckbox-root": {
-        padding: "5px",
+      "& .svg-big-btn": {
+        padding: "2px !important",
         "& svg": {
-          width: "20px",
-          height: "20px"
+          width: "24px !important",
+          height: "24px !important"
         }
-      }
-    },
-    "& .tools-drawer": {
-      zIndex: 1300,
-      "& .MuiDrawer-paper": {
-        backgroundColor: theme?.palette?.editor?.background
-      }
-    },
-    "& .section-tw": {
-      background: 'transparent !important',
-      "& button": {
-        padding: "2px",
-        borderRadius: "0px",
+      },
+      "& .ed-section-wrapper": {
+        display: "flex",
+        width: "100%",
+        justifyContent: "center",
+        alignItems: "center",
+        position: "relative",
+        "&:hover": {
+          "& .ed-section-inner": {
+            "& .element-toolbar.ss": {
+              display: "block",
+              left: "8px",
+              top: "8px",
+              width: "fit-content",
+              "& button": {
+                boxShadow: "none",
+                color: "#D7D7D6",
+                background: "rgb(221, 221, 221, 0.1)",
+                "&:hover": {
+                  background: "rgb(221, 221, 221, 0.8)"
+                }
+              }
+            }
+          },
+          "&.hselect:before": {
+            display: "block"
+          }
+        },
+        "& .ed-section-inner": {
+          maxWidth: "1440px",
+          "& .element-toolbar.ss": {
+            display: "none"
+          }
+        },
+        "&.needHover:before": {
+          content: '" "',
+          position: "absolute",
+          width: "calc(100% - 2px)",
+          height: "calc(100% - 2px)",
+          left: 0,
+          top: 0,
+          border: "1px solid transparent",
+          background: "rgba(0,0,0,0.05)",
+          pointerEvents: "none",
+          display: "none"
+        }
+      },
+      "& .element-empty-btn": {
+        backgroundColor: "rgb(242, 241, 238)",
+        color: "rgba(55, 53, 47, 0.65)",
+        outline: 0,
+        border: 0,
+        padding: "16px 12px",
+        width: "100%",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "12px",
         "& svg": {
-          width: "17px",
-          height: "18px",
-          marginTop: "-1px"
+          marginRight: "8px"
         }
-      }
-    },
-    "& .carousel-item": {
-      padding: "12px 32px"
-    },
-    "& .slick-arrow": {
-      borderRadius: "50%",
-      backgroundColor: "#F8FAFF",
-      textAlign: "center",
-      border: "1px solid #CFD8F5"
-    },
-    "& .embed-image-wrpr .image-frame": {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      width: "100%",
-      height: "100%",
-      padding: "0px",
-      // pointerEvents: "none",
-      "& svg": {
+      },
+      "& .content-editable.empty": {
+        "&:after": {
+          color: theme?.palette?.type === "dark" ? "#99A5B6" : placeHolderColor
+        }
+      },
+      "& .checkbox-edit": {
+        alignSelf: "flex-start",
+        "& .MuiFormControlLabel-root": {
+          marginRight: "0px"
+        },
+        "& .MuiCheckbox-root": {
+          padding: "5px",
+          "& svg": {
+            width: "20px",
+            height: "20px"
+          }
+        }
+      },
+      "& .tools-drawer": {
+        zIndex: 1300,
+        "& .MuiDrawer-paper": {
+          backgroundColor: theme?.palette?.editor?.background
+        }
+      },
+      "& .section-tw": {
+        background: 'transparent !important',
+        "& button": {
+          padding: "2px",
+          borderRadius: "0px",
+          "& svg": {
+            width: "17px",
+            height: "18px",
+            marginTop: "-1px"
+          }
+        }
+      },
+      "& .carousel-item": {
+        padding: "12px 32px"
+      },
+      "& .slick-arrow": {
+        borderRadius: "50%",
+        backgroundColor: "#F8FAFF",
+        textAlign: "center",
+        border: "1px solid #CFD8F5"
+      },
+      "& .embed-image-wrpr .image-frame": {
+        position: "absolute",
+        top: 0,
+        left: 0,
         width: "100%",
         height: "100%",
-        "& .op-zero": {
-          fillOpacity: 0
+        padding: "0px",
+        // pointerEvents: "none",
+        "& svg": {
+          width: "100%",
+          height: "100%",
+          "& .op-zero": {
+            fillOpacity: 0
+          }
         }
-      }
-    },
-    "&.hideScroll": {
-      overflowAnchor: "none",
-      "&::-webkit-scrollbar-track": {
-        background: "none !important"
       },
-      "&::-webkit-scrollbar-thumb": {
-        background: "none !important"
+      "&.hideScroll": {
+        overflowAnchor: "none",
+        "&::-webkit-scrollbar-track": {
+          background: "none !important"
+        },
+        "&::-webkit-scrollbar-thumb": {
+          background: "none !important"
+        },
+        "&::-webkit-scrollbar-thumb:hover": {
+          background: "none !important"
+        }
       },
-      "&::-webkit-scrollbar-thumb:hover": {
-        background: "none !important"
-      }
-    },
-    "& ::selection": {
-      background: 'rgba(35, 131, 226, 0.35)!important',
-      color: 'inherit'
-    },
-    "&.readOnlyContainer": {
-      "& .max-content": {
-        paddingBottom: "0px !important"
+      "& ::selection": {
+        background: 'rgba(35, 131, 226, 0.35)!important',
+        color: 'inherit'
+      },
+      "&.readOnlyContainer": {
+        "& .max-content": {
+          paddingBottom: "0px !important"
+        }
       }
-    }
-  },
-  fullScreenWrapper: {
-    "& .editor-wrapper": {
-      paddingTop: '20px'
-    },
-    "& .MuiDialog-paper, & .MuiPopover-paper": {
-      background: `${theme?.palette?.editor?.background} !important`
     },
-    "& .MuiPaper-root": {
-      borderRadius: "0px !important",
-      "& .MuiDialogTitle-root": {
-        position: "absolute",
-        top: 0,
-        right: "0px",
-        zIndex: 100
+    fullScreenWrapper: {
+      "& .editor-wrapper": {
+        paddingTop: '20px'
+      },
+      "& .MuiDialog-paper, & .MuiPopover-paper": {
+        background: `${theme?.palette?.editor?.background} !important`
       },
-      "& .MuiDialogContent-root": {
-        padding: "0px"
+      "& .MuiPaper-root": {
+        borderRadius: "0px !important",
+        "& .MuiDialogTitle-root": {
+          position: "absolute",
+          top: 0,
+          right: "0px",
+          zIndex: 100
+        },
+        "& .MuiDialogContent-root": {
+          padding: "0px"
+        }
       }
+    },
+    cardsTypo: {
+      color: theme?.palette?.editor?.textColor,
+      fontSize: "14px !important"
     }
-  },
-  cardsTypo: {
-    color: theme?.palette?.editor?.textColor,
-    fontSize: "14px !important"
-  }
-});
+  };
+};
 export default editorStyles;

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

@@ -1,32 +1,8 @@
 import React from "react";
 import { Select, MenuItem } from "@mui/material";
-import { addMarkData, activeMark, getSelectedElementStyle } from "../../utils/SlateUtilityFunctions.js";
-import { toolbarGroups } from "../toolbarGroups.js";
+import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
 import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
-import { googleFontList as defaultFonts } from "../../common/FontLoader/FontList.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const allTools = toolbarGroups.flat();
-const fontWeight = allTools.find(f => f.format === "fontWeight");
-export const getValue = (editor, format) => {
-  switch (format) {
-    case "fontFamily":
-      {
-        const style = getSelectedElementStyle("font-family", editor);
-        return style || defaultFonts[0];
-      }
-    case "fontWeight":
-      {
-        const {
-          options
-        } = fontWeight || {};
-        const fontWeightStyle = getSelectedElementStyle("font-weight", editor);
-        const selected = options?.find(o => o.value === fontWeightStyle || o.numVal === fontWeightStyle);
-        return selected?.value;
-      }
-    default:
-      return activeMark(editor, format);
-  }
-};
 const Dropdown = ({
   classes,
   editor,
@@ -34,7 +10,7 @@ const Dropdown = ({
   options,
   width
 }) => {
-  const value = getValue(editor, format);
+  const value = activeMark(editor, format);
   const changeMarkData = (event, format) => {
     event.preventDefault();
     const value = event.target.value;
@@ -44,7 +20,7 @@ const Dropdown = ({
     });
   };
   return /*#__PURE__*/_jsx(Select, {
-    value: value || options?.[0]?.value,
+    value: value,
     className: "editor-dd",
     onChange: e => changeMarkData(e, format),
     MenuProps: {