@flozy/editor 1.5.9 → 1.6.1

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

@@ -0,0 +1,65 @@
+import React from "react";
+import { Grid, Typography, IconButton, Tooltip } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import OpenInFullIcon from "@mui/icons-material/OpenInFull";
+import CloseFullscreenIcon from "@mui/icons-material/CloseFullscreen";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const PopperHeader = props => {
+  const {
+    title,
+    classes,
+    onClose,
+    needFullscreen,
+    fullScreen,
+    toggleFullscreen
+  } = props;
+  return /*#__PURE__*/_jsx(Grid, {
+    container: true,
+    padding: 2,
+    children: /*#__PURE__*/_jsxs(Grid, {
+      item: true,
+      xs: 12,
+      style: {
+        display: "flex",
+        borderBottom: "1px solid #DCE4EC"
+      },
+      justifyContent: "space-between",
+      alignItems: "center",
+      className: "textSettingHeader",
+      children: [/*#__PURE__*/_jsx(Typography, {
+        color: "primary",
+        sx: {
+          fontSize: "16px",
+          fontWeight: "700",
+          color: "#000"
+        },
+        children: title
+      }), /*#__PURE__*/_jsxs(Grid, {
+        sx: classes.textFormatLabel,
+        justifyContent: "end",
+        children: [needFullscreen ? /*#__PURE__*/_jsx(Tooltip, {
+          title: "Toggle Fullscreen",
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            style: {
+              marginRight: "8px"
+            },
+            className: "close-popupbtn",
+            onClick: toggleFullscreen,
+            children: fullScreen ? /*#__PURE__*/_jsx(CloseFullscreenIcon, {}) : /*#__PURE__*/_jsx(OpenInFullIcon, {})
+          })
+        }) : null, /*#__PURE__*/_jsx(Tooltip, {
+          title: "Close",
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            className: "close-popupbtn",
+            onClick: onClose,
+            children: /*#__PURE__*/_jsx(CloseIcon, {})
+          })
+        })]
+      })]
+    })
+  });
+};
+export default PopperHeader;

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

@@ -1,14 +1,29 @@
 const usePopupStyle = () => ({
   popupWrapper: {
     boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)",
-    zIndex: 999
+    zIndex: 1002,
+    marginBottom: "12px !important",
+    border: "1px solid #E0E0E0",
+    borderRadius: "10px",
+    "&.fullscreen": {
+      marginBottom: "0px !important",
+      "& .papper-wrpr": {
+        boxShadow: "none"
+      }
+    }
   },
   textFormatWrapper: {
     padding: "0px 16px 16px 16px",
-    width: "350px",
-    maxheight: "300px",
+    width: "370px",
+    // 30% of window height
+    maxHeight: `${window.innerHeight * 0.45}px`,
     overflow: "auto",
-    // marginBottom: "12px",
+    "&.templates": {
+      width: "500px",
+      "&.fullscreen": {
+        width: "100%"
+      }
+    },
     "& .textSettingHeader": {
       borderBottom: "1px solid #DCE4EC",
       padding: "8px 0px 5px",
@@ -19,6 +34,35 @@ const usePopupStyle = () => ({
     },
     "& .MuiOutlinedInput-root": {
       boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
+    },
+    "& .mini": {
+      borderRadius: "0px",
+      width: "100%",
+      justifyContent: "start",
+      "& svg": {
+        width: "24px",
+        height: "24px",
+        marginRight: "8px"
+      },
+      "& span": {
+        fontSize: "14px",
+        color: "#64748B"
+      }
+    },
+    // for command list style
+    "& .cmd": {
+      borderRadius: "0px",
+      width: "100%",
+      justifyContent: "start",
+      "& svg": {
+        width: "24px",
+        height: "24px",
+        marginRight: "8px"
+      },
+      "& span": {
+        fontSize: "14px",
+        color: "#64748B"
+      }
     }
   },
   textFormatLabel: {
@@ -38,12 +82,122 @@ const usePopupStyle = () => ({
     alignItems: "center",
     marginBottom: "8px",
     border: "1px solid #ECECEC",
-    padding: "0px 8px",
     borderRadius: "8px",
     boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
   },
-  textFormatCG: {
+  textFormatColorWrpr: {
+    display: "flex",
+    alignItems: "center",
     marginBottom: "8px"
+  },
+  textFormatCG: {},
+  evenSpace: {
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    "& button": {
+      marginRight: "8px",
+      marginBottom: "8px"
+    },
+    "&.typo-icons": {
+      "& button": {
+        width: "36px",
+        height: "36px"
+      }
+    },
+    "&.text-decorations-wrpr": {
+      "& button": {
+        // width: "140px",
+      }
+    }
+  },
+  typoLabel: {
+    fontSize: "14px",
+    marginBottom: "5px",
+    paddingLeft: "5px",
+    fontWeight: 500
+  },
+  templateCard: {
+    borderRadius: "10px",
+    boxShadow: "none",
+    cursor: "pointer"
+  },
+  templateCardMedia: {
+    width: "100%",
+    height: "210px",
+    backgroundPosition: "left top",
+    backgroundSize: "100% auto",
+    borderRadius: "10px",
+    boxShadow: "0px 1px 3px 3px rgba(0,0,0,0.12)",
+    "&.fullscreen": {
+      height: "280px"
+    }
+  },
+  templateCardMediaWrpr: {
+    padding: "8px",
+    border: "1px solid rgba(0, 0, 0, 0.1)",
+    borderRadius: "10px",
+    background: "#FEFEFE",
+    overflow: "hidden",
+    "&:hover": {
+      border: "1px solid #2563EB"
+    }
+  },
+  templateCardsWrpr: {
+    height: "100%",
+    overflow: "auto",
+    margin: "12px 0px",
+    paddingRight: "8px",
+    "&.fullscreen": {
+      height: `${window.innerHeight - 300}px`
+    }
+  },
+  pageWidthBtn: {
+    color: "#64748B",
+    marginTop: "8px",
+    textTransform: "capitalize",
+    "&.active": {
+      background: "rgba(45,66,91,0.1)"
+    }
+  },
+  btnGroup: {
+    backgroundColor: "#fff",
+    "& button": {
+      marginRight: "0px",
+      color: "#64748B",
+      border: "1px solid #ECECEC",
+      textTransform: "capitalize",
+      "&.active": {
+        backgroundColor: "#ECECEC"
+      },
+      "&.no-hover": {
+        border: "1px solid #ECECEC"
+      }
+    }
+  },
+  allColor: {},
+  allColorInner: {
+    "& .buttonsWrpr": {
+      paddingLeft: "8px",
+      "& button": {
+        border: "1px solid #ccc",
+        margin: "4px",
+        width: "24px",
+        height: "24px",
+        "&.active": {
+          "&:before": {
+            content: '" "',
+            position: "absolute",
+            top: "-5px",
+            left: "-5px",
+            width: "calc(100% + 4px)",
+            height: "calc(100% + 4px)",
+            border: "3px solid blue",
+            borderRadius: "50%"
+          }
+        }
+      }
+    }
   }
 });
 export default usePopupStyle;

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

@@ -1,20 +1,88 @@
-import React from "react";
-import { Grid, Typography } from "@mui/material";
-import toolbarGroups from "../toolbarGroups";
-import { Dropdown, MarkButton, TextSize, BlockButton } from "../FormatTools";
+import React, { useState } from "react";
+import { Button, ButtonGroup, Grid, Popover, Typography } from "@mui/material";
+import WidthFullIcon from "@mui/icons-material/WidthFull";
+import WidthNormalIcon from "@mui/icons-material/WidthNormal";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import { Dropdown, MarkButton, TextSize, BlockButton, AccordionButton } from "../FormatTools";
+import { toolbarGroups } from "../toolbarGroups";
 import ColorPicker from "../../Elements/Color Picker/ColorPicker";
-import { activeMark } from "../../utils/SlateUtilityFunctions";
+import { activeMark, isBlockActive, toggleBlock, getBlockActive, upateBlockActive } from "../../utils/SlateUtilityFunctions";
+import LinkButton from "../../Elements/Link/LinkButton";
+import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
+import { AllColors } from "../../Elements/Color Picker/ColorButtons";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const allTools = toolbarGroups.flat();
+const ButtonComp = {
+  AccordionButton: AccordionButton
+};
 const TextFormat = props => {
   const {
     classes,
     editor
   } = props;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [type, setType] = useState(null);
+  const open = Boolean(anchorEl);
   const fontFamily = allTools.find(f => f.format === "fontFamily");
+  const fontWeight = allTools.find(f => f.format === "fontWeight");
   const fontStyle = allTools.filter(f => f.type === "mark");
   const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
+  const link = allTools.find(f => f.format?.indexOf("link") >= 0);
+  const lists = allTools.filter(f => f.group?.indexOf("list") >= 0);
+  const typo = allTools.filter(f => f.group?.indexOf("typography") >= 0);
+  const {
+    pageProps
+  } = getPageSettings(editor)?.element || {};
+  const {
+    pageWidth
+  } = pageProps;
+  const {
+    isActive: isBlockQuoteActive,
+    props: bqProps
+  } = getBlockActive(editor, "blockquote");
+  const {
+    color: bqColor,
+    bgColor: bqBgColor
+  } = bqProps || {
+    color: "",
+    bgColor: ""
+  };
+  const handlePageWidth = width => () => {
+    updatePageSettings(editor, {
+      ...pageProps,
+      pageWidth: width
+    });
+  };
+  const handleColorPicker = type => e => {
+    setType(type);
+    setAnchorEl(e.currentTarget);
+  };
+  const updateBlockQuote = attr => {
+    const upAttr = {
+      ...(bqProps || {}),
+      ...attr
+    };
+    delete upAttr.children;
+    delete upAttr.type;
+    if (isBlockQuoteActive && (upAttr.color || upAttr.bgColor)) {
+      upateBlockActive(editor, "blockquote", upAttr);
+    } else {
+      toggleBlock(editor, "blockquote", editor.selection, upAttr);
+    }
+  };
+  const onSelectColor = color => () => {
+    const attr = {
+      [type]: color
+    };
+    updateBlockQuote(attr);
+  };
+  const handleQuote = attr => () => {
+    updateBlockQuote(attr);
+  };
+  const onClosePicker = () => {
+    setAnchorEl(null);
+  };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     sx: classes.textFormatWrapper,
@@ -24,11 +92,7 @@ const TextFormat = props => {
       children: [/*#__PURE__*/_jsx(Typography, {
         variant: "body1",
         color: "primary",
-        style: {
-          fontSize: "14px",
-          fontWeight: 500,
-          marginBottom: 5
-        },
+        sx: classes.typoLabel,
         children: "Font Family"
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
@@ -39,67 +103,96 @@ const TextFormat = props => {
           editor: editor
         })
       })]
-    }), /*#__PURE__*/_jsx(Grid, {
+    }), /*#__PURE__*/_jsxs(Grid, {
+      container: true,
+      spacing: 2,
+      children: [/*#__PURE__*/_jsxs(Grid, {
+        item: true,
+        xs: 6,
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          color: "primary",
+          sx: classes.typoLabel,
+          children: "Font Weight"
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 12,
+          sx: classes.textFormatField,
+          children: /*#__PURE__*/_jsx(Dropdown, {
+            ...fontWeight,
+            editor: editor,
+            width: "100%"
+          })
+        })]
+      }), /*#__PURE__*/_jsxs(Grid, {
+        item: true,
+        xs: 6,
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          color: "primary",
+          sx: classes.typoLabel,
+          children: "Font Size"
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 12,
+          sx: classes.textFormatCG,
+          children: /*#__PURE__*/_jsx(TextSize, {
+            format: "fontSize",
+            activeMark: activeMark,
+            editor: editor,
+            fullWidth: true
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
-      sx: {
-        paddingTop: "12px"
-      },
-      children: /*#__PURE__*/_jsx(Typography, {
+      sx: classes.textFormatField,
+      children: [/*#__PURE__*/_jsx(Typography, {
         variant: "body1",
         color: "primary",
-        style: {
-          fontSize: "14px",
-          fontWeight: 500,
-          marginBottom: 5
-        },
-        children: "Font Style"
-      })
-    }), /*#__PURE__*/_jsx(Grid, {
-      item: true,
-      xs: 12,
-      sx: classes.textFormatCG,
-      children: fontStyle?.map((m, i) => {
-        return /*#__PURE__*/_jsx(MarkButton, {
+        sx: classes.typoLabel,
+        children: "Text Color"
+      }), /*#__PURE__*/_jsx(Grid, {
+        sx: classes.textFormatColorWrpr,
+        children: /*#__PURE__*/_jsx(ColorPicker, {
+          format: "color",
+          activeMark: activeMark,
           editor: editor,
-          ...m
-        }, `pptool_mark_${i}_${m.id}`);
-      })
+          showHex: false,
+          rounded: true
+        }, "11_cc")
+      })]
     }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
-      xs: 4,
+      xs: 12,
       sx: classes.textFormatField,
       children: [/*#__PURE__*/_jsx(Typography, {
         variant: "body1",
         color: "primary",
-        style: {
-          fontSize: "14px",
-          fontWeight: 500,
-          marginBottom: 5
-        },
-        children: "Font Size"
+        sx: classes.typoLabel,
+        children: "Text Background Color"
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
-        xs: 10,
-        sx: classes.textFormatCG,
-        children: /*#__PURE__*/_jsx(TextSize, {
-          format: "fontSize",
+        xs: 12,
+        sx: classes.textFormatColorWrpr,
+        children: /*#__PURE__*/_jsx(ColorPicker, {
+          format: "bgColor",
           activeMark: activeMark,
-          editor: editor
-        })
+          editor: editor,
+          showHex: false,
+          rounded: true,
+          classes: classes
+        }, "12_cc")
       })]
     }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
-      xs: 7,
+      xs: 6,
       sx: classes.textFormatField,
       children: [/*#__PURE__*/_jsx(Typography, {
         variant: "body1",
         color: "primary",
-        style: {
-          fontSize: "14px",
-          fontWeight: 500,
-          marginBottom: 5
-        },
+        sx: classes.typoLabel,
         children: "Text Alignment"
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
@@ -114,52 +207,142 @@ const TextFormat = props => {
       })]
     }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
-      xs: 12,
+      xs: 6,
       sx: classes.textFormatField,
       children: [/*#__PURE__*/_jsx(Typography, {
         variant: "body1",
         color: "primary",
-        style: {
-          fontSize: "14px",
-          fontWeight: 500,
-          marginBottom: 5
-        },
-        children: "Text Color"
+        sx: classes.typoLabel,
+        children: "Lists"
       }), /*#__PURE__*/_jsx(Grid, {
-        sx: classes.textFormatFieldBorder,
-        children: /*#__PURE__*/_jsx(ColorPicker, {
-          format: "color",
-          activeMark: activeMark,
-          editor: editor,
-          showHex: true,
-          rounded: true
+        item: true,
+        xs: 12,
+        sx: classes.textFormatCG,
+        children: lists?.map((m, i) => {
+          const Comp = ButtonComp[m?.component] || BlockButton;
+          return /*#__PURE__*/_jsx(Comp, {
+            editor: editor,
+            ...m
+          }, `pptool_block_${i}_${m.id}`);
         })
       })]
     }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
-      sx: classes.textFormatField,
       children: [/*#__PURE__*/_jsx(Typography, {
         variant: "body1",
         color: "primary",
-        style: {
-          fontSize: "14px",
-          fontWeight: 500,
-          marginBottom: 5
-        },
-        children: "Background Color"
-      }), /*#__PURE__*/_jsx(Grid, {
+        sx: classes.typoLabel,
+        children: "Typography"
+      }), /*#__PURE__*/_jsxs(Grid, {
         item: true,
         xs: 12,
-        sx: classes.textFormatFieldBorder,
-        children: /*#__PURE__*/_jsx(ColorPicker, {
-          format: "bgColor",
-          activeMark: activeMark,
-          editor: editor,
-          showHex: true,
-          rounded: true
-        })
+        className: "typo-icons",
+        sx: classes.evenSpace,
+        children: [typo?.map((m, i) => {
+          return /*#__PURE__*/_jsx(BlockButton, {
+            editor: editor,
+            ...m
+          }, `pptool_mark_${i}_${m.id}`);
+        }), fontStyle?.map((m, i) => {
+          return /*#__PURE__*/_jsx(MarkButton, {
+            editor: editor,
+            ...m
+          }, `pptool_mark_${i}_${m.id}`);
+        }), /*#__PURE__*/_jsx(LinkButton, {
+          active: isBlockActive(editor, link.format),
+          editor: editor
+        }, link.id)]
+      })]
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.evenSpace,
+      style: {
+        justifyContent: "space-between"
+      },
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        color: "primary",
+        sx: classes.typoLabel,
+        children: "Decorations"
+      })
+    }), /*#__PURE__*/_jsxs(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.evenSpace,
+      style: {
+        justifyContent: "space-between"
+      },
+      className: "text-decorations-wrpr",
+      children: [/*#__PURE__*/_jsxs(ButtonGroup, {
+        sx: classes.btnGroup,
+        children: [/*#__PURE__*/_jsx(Button, {
+          className: `no-hover ${bqBgColor ? "active" : ""}`,
+          onClick: handleQuote({
+            bgColor: !bqBgColor ? "rgb(227, 236, 255)" : null
+          }),
+          style: {
+            background: bqBgColor
+          },
+          children: "Colorbox"
+        }), /*#__PURE__*/_jsx(Button, {
+          onClick: handleColorPicker("bgColor"),
+          children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
+        })]
+      }), /*#__PURE__*/_jsxs(ButtonGroup, {
+        sx: classes.btnGroup,
+        children: [/*#__PURE__*/_jsx(Button, {
+          className: `no-hover ${bqColor ? "active" : ""}`,
+          onClick: handleQuote({
+            color: !bqColor ? "rgb(47, 94, 188)" : null
+          }),
+          children: /*#__PURE__*/_jsx("span", {
+            style: {
+              borderLeft: `3px solid ${bqColor || "rgb(47, 94, 188)"}`,
+              paddingLeft: "12px"
+            },
+            children: "Quote"
+          })
+        }), /*#__PURE__*/_jsx(Button, {
+          onClick: handleColorPicker("color"),
+          children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
+        })]
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: handlePageWidth("fixed"),
+        startIcon: /*#__PURE__*/_jsx(WidthNormalIcon, {}),
+        sx: classes.pageWidthBtn,
+        className: pageWidth === "fixed" || !pageWidth ? "active" : "",
+        style: {
+          width: "45%"
+        },
+        children: "Centered"
+      }), /*#__PURE__*/_jsx(Button, {
+        sx: classes.pageWidthBtn,
+        className: pageWidth === "full" ? "active" : "",
+        onClick: handlePageWidth("full"),
+        startIcon: /*#__PURE__*/_jsx(WidthFullIcon, {}),
+        style: {
+          width: "45%"
+        },
+        children: "Full width"
       })]
+    }), /*#__PURE__*/_jsx(Popover, {
+      open: open,
+      anchorEl: anchorEl,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "center"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "center"
+      },
+      onClose: onClosePicker,
+      children: /*#__PURE__*/_jsx(AllColors, {
+        classes: classes,
+        onSelect: onSelectColor
+      })
     })]
   });
 };