@flozy/editor 7.0.9 → 8.0.0

package/dist/Editor/Styles/EditorStyles.js

@@ -1,329 +1,325 @@
 const editorStyles = ({
   padHeight,
   placeHolderColor,
-  theme,
-  overrideWrapperStyles = {}
-}) => {
-  return {
-    root: {
-      display: "flex",
-      position: "relative",
-      padding: "0px",
-      alignItems: "center",
-      justifyContent: "center",
-      "*": {
-        boxSizing: "border-box"
-      },
-      "&.iframe-editor": {
-        "& .mini-tool-wrpr-ei": {
-          display: "none"
-        }
+  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"
       },
-      "& .mobileMiniTextWrapper": {
-        boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
-        position: "fixed",
-        bottom: "env(safe-area-inset-bottom)",
+      ":before": {
+        content: '" "',
+        position: "absolute",
+        top: 0,
         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"
-        }
+        width: "calc(50% - 162px)",
+        height: "100%",
+        pointerEvents: "none",
+        backgroundColor: "#FFF",
+        zIndex: 10
       },
-      "&.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
-        }
+      ":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"
       },
-      ...overrideWrapperStyles
+      "& .signed-btn": {
+        "& img": {
+          backgroundColor: "#FFF"
+        }
+      }
     },
-    slateWrapper: {
-      paddingTop: "0px",
-      height: `${window.innerHeight - padHeight}px`,
+    "& .max-content": {
       width: "100%",
-      overflowY: "auto",
-      overflowX: "hidden",
       display: "flex",
+      flex: 1,
       flexDirection: "column",
-      alignItems: "center",
-      color: "#0f172a",
-      "& .has-topbanner": {
-        "& .doc-title-ele-wrpr": {
-          marginTop: "12px"
+      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"
         }
-      },
-      "&.no-color": {
-        backgroundColor: theme?.palette?.editor?.background,
-        color: theme?.palette?.editor?.textColor,
-        "&.pc-page-builder": {
-          backgroundColor: "#FFF",
-          color: "#000"
+      }
+    },
+    "& .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"
         },
-        "& .signed-btn": {
-          "& img": {
-            backgroundColor: "#FFF"
+        "& 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)"
+              }
+            }
           }
+        },
+        "&.hselect:before": {
+          display: "block"
         }
       },
-      "& .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"
-          }
+      "& .ed-section-inner": {
+        maxWidth: "1440px",
+        "& .element-toolbar.ss": {
+          display: "none"
         }
       },
-      "& .el-toolbar": {
+      "&.needHover:before": {
+        content: '" "',
         position: "absolute",
+        width: "calc(100% - 2px)",
+        height: "calc(100% - 2px)",
         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"
-          },
-          "& svg": {
-            stroke: "rgb(100, 116, 139);"
-          }
-        }
-      },
-      "& .accordion-summary-collapse-btn": {
-        padding: "4px",
-        width: '5px'
-      },
-      "& .workflow-icon-btn": {
+        border: "1px solid transparent",
+        background: "rgba(0,0,0,0.05)",
         pointerEvents: "none",
-        position: "absolute",
-        right: "-9px",
-        top: "-9px",
-        border: "2px solid #f3b814",
-        padding: "0px",
-        background: "#FFF",
-        "& svg": {
-          width: "18px",
-          height: "18px"
-        }
+        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"
       },
-      "& .svg-big-btn": {
-        padding: "2px !important",
+      "& .MuiCheckbox-root": {
+        padding: "5px",
         "& 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)"
-                }
-              }
-            }
-          },
-          "&.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"
+          width: "20px",
+          height: "20px"
         }
-      },
-      "& .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",
+      }
+    },
+    "& .tools-drawer": {
+      zIndex: 1300,
+      "& .MuiDrawer-paper": {
+        backgroundColor: theme?.palette?.editor?.background
+      }
+    },
+    "& .section-tw": {
+      background: 'transparent !important',
+      "& button": {
+        padding: "2px",
+        borderRadius: "0px",
         "& svg": {
-          marginRight: "8px"
-        }
-      },
-      "& .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
+          width: "17px",
+          height: "18px",
+          marginTop: "-1px"
         }
-      },
-      "& .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,
+      }
+    },
+    "& .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": {
         width: "100%",
         height: "100%",
-        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"
-        },
-        "&::-webkit-scrollbar-thumb:hover": {
-          background: "none !important"
-        }
-      },
-      "& ::selection": {
-        background: 'rgba(35, 131, 226, 0.35)!important',
-        color: 'inherit'
-      },
-      "&.readOnlyContainer": {
-        "& .max-content": {
-          paddingBottom: "0px !important"
+        "& .op-zero": {
+          fillOpacity: 0
         }
       }
     },
-    fullScreenWrapper: {
-      "& .editor-wrapper": {
-        paddingTop: '20px'
+    "&.hideScroll": {
+      overflowAnchor: "none",
+      "&::-webkit-scrollbar-track": {
+        background: "none !important"
       },
-      "& .MuiDialog-paper, & .MuiPopover-paper": {
-        background: `${theme?.palette?.editor?.background} !important`
+      "&::-webkit-scrollbar-thumb": {
+        background: "none !important"
       },
-      "& .MuiPaper-root": {
-        borderRadius: "0px !important",
-        "& .MuiDialogTitle-root": {
-          position: "absolute",
-          top: 0,
-          right: "0px",
-          zIndex: 100
-        },
-        "& .MuiDialogContent-root": {
-          padding: "0px"
-        }
+      "&::-webkit-scrollbar-thumb:hover": {
+        background: "none !important"
       }
     },
-    cardsTypo: {
-      color: theme?.palette?.editor?.textColor,
-      fontSize: "14px !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
+      },
+      "& .MuiDialogContent-root": {
+        padding: "0px"
+      }
     }
-  };
-};
+  },
+  cardsTypo: {
+    color: theme?.palette?.editor?.textColor,
+    fontSize: "14px !important"
+  }
+});
 export default editorStyles;

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

@@ -1,8 +1,32 @@
 import React from "react";
 import { Select, MenuItem } from "@mui/material";
-import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
+import { addMarkData, activeMark, getSelectedElementStyle } from "../../utils/SlateUtilityFunctions.js";
+import { toolbarGroups } from "../toolbarGroups.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,
@@ -10,7 +34,7 @@ const Dropdown = ({
   options,
   width
 }) => {
-  const value = activeMark(editor, format);
+  const value = getValue(editor, format);
   const changeMarkData = (event, format) => {
     event.preventDefault();
     const value = event.target.value;
@@ -20,7 +44,7 @@ const Dropdown = ({
     });
   };
   return /*#__PURE__*/_jsx(Select, {
-    value: value,
+    value: value || options?.[0]?.value,
     className: "editor-dd",
     onChange: e => changeMarkData(e, format),
     MenuProps: {