@flozy/editor 4.0.3 → 4.0.4

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

@@ -1,7 +1,6 @@
 import React from "react";
 import { Box, Button, Card, CardMedia, Grid } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 const Select = props => {
   const {
     classes,
@@ -35,19 +34,19 @@ const FullViewCard = props => {
     children: /*#__PURE__*/_jsx(Card, {
       sx: classes.paperOverrides,
       className: "paperOverrides",
-      children: /*#__PURE__*/_jsxs(Box, {
+      children: /*#__PURE__*/_jsx(Box, {
         sx: classes.buttonCardMediaWrpr,
-        children: [/*#__PURE__*/_jsx(CardMedia, {
-          component: "div",
-          image: m?.thumbnail,
-          alt: m?.title,
-          sx: classes.fullViewCardMedia,
-          className: height
-        }), /*#__PURE__*/_jsx(Select, {
-          classes: classes,
-          onSelectTemplate: onSelectTemplate,
-          data: m
-        })]
+        onClick: onSelectTemplate(m),
+        children: /*#__PURE__*/_jsx("div", {
+          className: "img-wrapper",
+          children: /*#__PURE__*/_jsx(CardMedia, {
+            component: "div",
+            image: m?.thumbnail,
+            alt: m?.title,
+            sx: classes.fullViewCardMedia,
+            className: height
+          })
+        })
       })
     })
   }, `template_${m.id}`);

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/CustomSelectTool.js

@@ -19,6 +19,9 @@ const CustomSelectTool = ({
         e.preventDefault();
         setAnchorEl(e.currentTarget);
       },
+      style: {
+        margin: "0px"
+      },
       children: [selected?.label || selected?.title, " ", /*#__PURE__*/_jsx(DownArrowIcon, {})]
     }), /*#__PURE__*/_jsx(Popover, {
       open: open,

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectSuperSubscript.js

@@ -0,0 +1,59 @@
+import { useMemo } from "react";
+import { activeMark, toggleMark } from "../../../utils/SlateUtilityFunctions";
+import CustomSelectTool from "./CustomSelectTool";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function Label({
+  label,
+  type
+}) {
+  return /*#__PURE__*/_jsxs("span", {
+    children: [/*#__PURE__*/_jsx("strong", {
+      children: label
+    }), " ", type]
+  });
+}
+const superSubscriptOptions = [{
+  id: 9,
+  format: "superscript",
+  type: "mark",
+  title: /*#__PURE__*/_jsx(Label, {
+    label: "X²",
+    type: "Superscript"
+  }),
+  label: "X²",
+  group: "superSubscript",
+  value: "superscript"
+}, {
+  id: 10,
+  format: "subscript",
+  type: "mark",
+  title: /*#__PURE__*/_jsx(Label, {
+    label: "X₂",
+    type: "Subscript"
+  }),
+  label: "X₂",
+  group: "superSubscript",
+  value: "subscript"
+}];
+function SelectSuperSubscript({
+  editor,
+  classes,
+  closeMainPopup
+}) {
+  const selectedMark = useMemo(() => {
+    return superSubscriptOptions.find(option => activeMark(editor, option.format));
+  }, [editor]);
+  const onChange = format => {
+    toggleMark(editor, format);
+    closeMainPopup();
+  };
+  return /*#__PURE__*/_jsx(CustomSelectTool, {
+    options: superSubscriptOptions,
+    editor: editor,
+    onChange: onChange,
+    value: selectedMark?.value || "superscript",
+    classes: classes
+  });
+}
+export default SelectSuperSubscript;

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

@@ -120,7 +120,8 @@ const MiniTextFormat = props => {
                 onClose: () => setAnchorEl(null)
               }), /*#__PURE__*/_jsx(TextFormat, {
                 editor: editor,
-                classes: classes
+                classes: classes,
+                closeMainPopup: closeMainPopup
               })]
             })
           })

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

@@ -1,11 +1,11 @@
 const usePopupStyle = theme => ({
   popupWrapper: {
-    boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)",
+    boxShadow: "1px 2px 15px 0px #2563EB40",
     zIndex: 1300,
     marginBottom: "12px !important",
-    border: "1px solid #E0E0E0",
-    borderRadius: "10px",
-    maxWidth: "100%",
+    border: "1px solid #D8DDE1",
+    borderRadius: "6px",
+    maxWidth: "96%",
     "&.fullscreen": {
       marginBottom: "0px !important",
       "& .papper-wrpr": {
@@ -19,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"
       }
@@ -61,8 +61,9 @@ const usePopupStyle = theme => ({
   },
   textFormatWrapper: {
     padding: "0px 16px 16px 16px",
-    width: "370px",
+    width: "323px",
     maxWidth: "100%",
+    overflowX: "hidden !important",
     // 30% of window height
     maxHeight: `${window.innerHeight * 0.45}px`,
     overflow: "auto",
@@ -78,7 +79,7 @@ const usePopupStyle = theme => ({
         paddingTop: "4px"
       },
       "@media only screen and (max-width: 599px)": {
-        width: '330px'
+        width: "330px"
       }
     },
     "&.templates": {
@@ -89,7 +90,7 @@ const usePopupStyle = theme => ({
         maxHeight: "fit-content"
       },
       "@media only screen and (max-width: 599px)": {
-        width: '330px'
+        width: "330px"
       }
     },
     "& .headerContainer": {},
@@ -105,17 +106,21 @@ const usePopupStyle = theme => ({
       boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
     },
     "& .mini": {
-      borderRadius: "0px",
       width: "100%",
       justifyContent: "start",
+      borderRadius: "10px !important",
+      transition: "background-color 0.3s ease",
+      "&:hover": {
+        backgroundColor: "#E9F3FE"
+      },
       "& svg": {
         width: "24px",
-        height: "24px",
+        height: "19px",
         marginRight: "8px"
       },
       "& span": {
         fontSize: "14px",
-        color: "#64748B"
+        color: "#0F172A"
       }
     },
     // for command list style
@@ -144,7 +149,7 @@ const usePopupStyle = theme => ({
       }
     },
     "@media only screen and (max-width: 599px)": {
-      width: '330px'
+      width: "330px"
     }
   },
   textFormatLabel: {
@@ -155,17 +160,26 @@ 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"
+    marginBottom: "16px",
+    marginTop: "10px"
+  },
+  textFormatField1: {
+    marginBottom: "16px",
+    marginTop: "10px"
+  },
+  textFormatField2: {
+    // marginBottom: "16px",
+    marginTop: "10px"
   },
   textFormatFieldBorder: {
     display: "flex",
@@ -175,6 +189,9 @@ 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",
@@ -191,7 +208,7 @@ const usePopupStyle = theme => ({
     },
     "&.typo-icons": {
       "& button": {
-        width: "36px",
+        width: "31px",
         height: "36px"
       }
     },
@@ -207,6 +224,12 @@ const usePopupStyle = theme => ({
     paddingLeft: "5px",
     fontWeight: 500
   },
+  typoLabel2: {
+    fontSize: "14px",
+    marginBottom: "5px",
+    paddingLeft: "10px",
+    fontWeight: 500
+  },
   templateCard: {
     borderRadius: "10px",
     boxShadow: "none",
@@ -297,6 +320,29 @@ 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": {
@@ -326,6 +372,20 @@ 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: "#0F172A",
     textTransform: "none"
@@ -383,6 +443,7 @@ const usePopupStyle = theme => ({
     color: theme?.palette?.editor?.textColor
   },
   colorPickerPopup: {
+    margin: "30px",
     "& .MuiPaper-root": {
       overflow: "auto",
       backgroundColor: theme?.palette?.editor?.background
@@ -413,15 +474,16 @@ const usePopupStyle = theme => ({
   colorPopper: {
     "& .MuiPaper-root": {
       backgroundColor: theme?.palette?.editor?.background,
-      '@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": {
@@ -436,9 +498,10 @@ const usePopupStyle = theme => ({
     }
   },
   buttonCardMedia: {
+    margin: "5px 0px",
     width: "100%",
-    height: "48px",
-    backgroundPosition: "left top",
+    height: "40px",
+    backgroundPosition: "center",
     backgroundSize: "contain",
     zIndex: 1,
     position: "relative",
@@ -447,26 +510,25 @@ const usePopupStyle = theme => ({
     }
   },
   buttonCardMediaWrpr: {
+    padding: '5px',
     position: "relative",
     margin: "8px",
     marginBottom: "0px",
-    "&:hover": {
-      "& .template-card-action": {
-        display: "flex"
+    '& .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",
+        // },
       }
-    },
-    "& .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",
@@ -475,7 +537,7 @@ const usePopupStyle = theme => ({
   },
   miniTextFormatWrapper: {
     maxWidth: "100%",
-    padding: "4px 8px",
+    padding: "2px 8px",
     overflowX: "auto",
     "& .customSelectTool": {
       padding: "0px 8px",
@@ -524,22 +586,27 @@ const usePopupStyle = theme => ({
   },
   customSelectPopoverWrapper: {
     "& .MuiPopover-paper": {
-      maxHeight: '140px',
+      // minWidth: "130px",
+      border: "1px solid #E4E8EB",
       background: theme?.palette?.editor?.background,
-      '@media only screen and (max-width: 600px)': {
+      overflowY: "hidden",
+      padding: "6px 12px 6px 0px",
+      maxHeight: "140px",
+      "@media only screen and (max-width: 600px)": {
         marginTop: "-40px"
       }
     },
     "& .customSelectOptionLabel": {
       color: theme?.palette?.editor?.textColor || "black",
-      margin: "0px",
+      margin: "0px 6px 0px 6px",
       width: "100%",
       justifyContent: "start",
       paddingRight: "20px",
       fontSize: "14px",
       lineHeight: "1.75 !important",
       fontWeight: 400,
-      background: theme?.palette?.editor?.background || "#fff",
+      // background: theme?.palette?.editor?.background || "#fff",
+      overflowY: "hidden",
       "&:hover": {
         background: `${theme?.palette?.action?.selected} !important`
       },