@flozy/editor 8.0.7 → 8.0.8

package/dist/Editor/common/CustomColorPicker/index.js

@@ -0,0 +1,106 @@
+import { Box, Button, Paper, Typography, useTheme } from "@mui/material";
+import ColorPickerTool from "react-gcolor-picker";
+import customColorPickerStyles from "./style";
+import { colors } from "../../Elements/Color Picker/defaultColors";
+import { useMemo } from "react";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function CustomColorPicker(props) {
+  const {
+    gradient,
+    color,
+    onChange,
+    defaultColors,
+    recentColors,
+    closeDrawer,
+    hideThemeColors,
+    disableEditTheme
+  } = props;
+  const {
+    setOpenTheme
+  } = useEditorContext();
+  const classes = customColorPickerStyles();
+  const theme = useTheme();
+  const colorVars = theme?.vars?.colors || {};
+  const colorTabs = useMemo(() => {
+    const otherColors = {
+      title: "Recent colours",
+      colors: [...(recentColors || []), ...defaultColors],
+      onChange: onChange
+    };
+    const themeColors = Object.values(colorVars);
+    const tabs = [];
+    if (themeColors?.length && !hideThemeColors) {
+      tabs.push({
+        title: "Theme colours",
+        onEdit: () => {
+          setOpenTheme("editThemeColor");
+          closeDrawer();
+        },
+        colors: Object.values(colorVars),
+        onChange: onChange
+      });
+    }
+    tabs.push(otherColors);
+    return tabs;
+  }, [recentColors, defaultColors, onChange, colorVars]);
+  return /*#__PURE__*/_jsxs(Paper, {
+    component: "div",
+    sx: classes.customColorPickerContainer,
+    children: [/*#__PURE__*/_jsx(ColorPickerTool, {
+      gradient: gradient,
+      value: color?.startsWith("var") ? "" : color,
+      onChange: onChange,
+      defaultColors: [],
+      popupWidth: "300"
+    }), colorTabs.map((tab, i) => {
+      const {
+        title,
+        onEdit,
+        colors = [],
+        onChange
+      } = tab;
+      return /*#__PURE__*/_jsxs(Box, {
+        component: "div",
+        className: "customColorPickerWrapper",
+        children: [/*#__PURE__*/_jsxs(Box, {
+          component: "div",
+          className: "colorTitleWrapper",
+          children: [/*#__PURE__*/_jsx(Typography, {
+            variant: "subtitle2",
+            children: title
+          }), onEdit && !disableEditTheme ? /*#__PURE__*/_jsx(Button, {
+            variant: "text",
+            className: "editBtn",
+            onClick: () => onEdit(tab),
+            children: "Edit"
+          }) : null]
+        }), /*#__PURE__*/_jsx(Box, {
+          component: "div",
+          className: "colorPickerBtnContainer",
+          children: [...new Set(colors)].map((colorVar, i) => {
+            const isSelected = colorVar === color;
+            return /*#__PURE__*/_jsx(Box, {
+              className: isSelected ? "colorPicketBtnActive" : "",
+              component: "div",
+              children: /*#__PURE__*/_jsx("button", {
+                style: {
+                  background: colorVar
+                },
+                onClick: () => onChange(colorVar),
+                className: `colorPicketBtn`,
+                type: "button"
+              })
+            }, i);
+          })
+        })]
+      }, i);
+    })]
+  });
+}
+CustomColorPicker.defaultProps = {
+  defaultColors: [...colors],
+  closeDrawer: () => {}
+};
+export default CustomColorPicker;

package/dist/Editor/common/CustomColorPicker/style.js

@@ -0,0 +1,53 @@
+const styles = () => ({
+  customColorPickerContainer: {
+    width: "300px",
+    boxShadow: "none",
+    "& .popup_tabs": {
+      boxShadow: "none"
+    },
+    ".customColorPickerWrapper": {
+      padding: "10px 0px",
+      margin: "0px 16px",
+      borderTop: "1px solid #DCE4EC"
+    },
+    ".colorTitleWrapper": {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      paddingBottom: "10px",
+      ".MuiTypography-root": {
+        fontWeight: "600"
+      },
+      ".editBtn": {
+        textTransform: "none",
+        color: "#2563EB",
+        textDecoration: "underline",
+        padding: "0px",
+        minWidth: "unset"
+      }
+    },
+    ".colorPickerBtnContainer": {
+      display: "flex",
+      flexWrap: "wrap",
+      gap: "8px"
+    },
+    ".colorPicketBtn": {
+      width: "26px",
+      height: "26px",
+      outline: "none",
+      borderRadius: "50%",
+      cursor: "pointer",
+      border: "1.5px solid #DCE4EC",
+      margin: "1px"
+    },
+    ".colorPicketBtnActive": {
+      borderRadius: "50%",
+      outline: "1.5px solid rgb(83, 83, 249)",
+      width: "fit-content",
+      height: "fit-content",
+      display: "flex",
+      justifyContent: "center"
+    }
+  }
+});
+export default styles;

package/dist/Editor/common/CustomDialog/index.js

@@ -0,0 +1,90 @@
+import { Button, Dialog, DialogActions, DialogContent, Grid, SwipeableDrawer, Typography, useMediaQuery } from "@mui/material";
+import PropTypes from "prop-types";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import CustomDialogStyles from "./styles";
+import { forwardRef, useImperativeHandle, useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const CustomDialog = (props, ref) => {
+  const {
+    content,
+    confirmText,
+    cancelText,
+    onConfirm
+  } = props;
+  const [open, setOpen] = useState(false);
+  const isMobile = useMediaQuery("(max-width:899px)");
+  const {
+    theme
+  } = useEditorContext();
+  const classes = CustomDialogStyles(theme);
+  useImperativeHandle(ref, () => ({
+    handleOpen: () => setOpen(true),
+    handleClose: () => setOpen(false)
+  }));
+  const DialogueContent = () => /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(DialogContent, {
+      children: /*#__PURE__*/_jsx(Typography, {
+        children: content
+      })
+    }), /*#__PURE__*/_jsxs(DialogActions, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        className: "closeBtn",
+        onClick: () => setOpen(false),
+        children: cancelText
+      }), /*#__PURE__*/_jsx(Button, {
+        className: "confirmBtn",
+        onClick: () => {
+          onConfirm();
+          setOpen(false);
+        },
+        children: confirmText
+      })]
+    })]
+  });
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: !isMobile ? /*#__PURE__*/_jsx(Dialog, {
+      className: `${classes.MuiBackdropRoot}`,
+      open: open,
+      onClose: () => setOpen(false),
+      fullWidth: true,
+      maxWidth: "sm",
+      sx: classes.CustomDialogu,
+      children: /*#__PURE__*/_jsx(DialogueContent, {})
+    }) : /*#__PURE__*/_jsxs(SwipeableDrawer, {
+      open: open,
+      anchor: "bottom",
+      onClose: () => setOpen(false),
+      style: {
+        zIndex: "1300"
+      },
+      sx: classes.CustomDialogu,
+      disableBackdropTransition: true,
+      disableSwipeToOpen: true,
+      children: [/*#__PURE__*/_jsx(Grid, {
+        container: true,
+        justifyContent: "center",
+        className: "pullerRoot",
+        children: /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          className: "pullerGrid"
+        })
+      }), /*#__PURE__*/_jsx(DialogueContent, {})]
+    })
+  });
+};
+const CustomDialogComponent = /*#__PURE__*/forwardRef(CustomDialog);
+CustomDialogComponent.defaultProps = {
+  content: "Are you sure you want to proceed?",
+  confirmText: "Confirm",
+  cancelText: "Cancel",
+  onConfirm: () => console.warn("onConfirm not provided")
+};
+CustomDialogComponent.propTypes = {
+  content: PropTypes.string,
+  confirmText: PropTypes.string,
+  cancelText: PropTypes.string,
+  onConfirm: PropTypes.func
+};
+export { CustomDialogComponent };

package/dist/Editor/common/CustomDialog/style.js

@@ -0,0 +1,67 @@
+const styles = () => ({
+  dialogContainer: {
+    "& .MuiDialogContent-root": {
+      padding: "0px 20px"
+    },
+    "& .MuiDialogActions-root": {
+      padding: "10px"
+    },
+    "& .MuiTypography-h6": {
+      fontWeight: 600,
+      fontSize: "16px",
+      paddingRight: "20px"
+    },
+    "& .MuiGrid-container": {
+      marginTop: "0px"
+    },
+    "& .MuiGrid-item": {
+      padding: "14px"
+    }
+  },
+  saveBtn: {
+    color: "#fff",
+    background: "#2563EB",
+    fontSize: "14px",
+    fontWeight: 500,
+    padding: "4px 24px",
+    textTransform: "none",
+    "&:hover": {
+      color: "#fff",
+      background: "#2563EB"
+    }
+  },
+  closeBtn: {
+    backgroundColor: "#F4F6F9",
+    color: "#64748B",
+    fontSize: "14px",
+    fontWeight: 500,
+    padding: "4px 22px",
+    textTransform: "none",
+    border: "1px solid #D8DDE1",
+    "&:hover": {
+      border: "1px solid #64748B"
+    }
+  },
+  closeIcon: {
+    position: "absolute",
+    right: 8,
+    top: 8,
+    color: theme => theme.palette.grey[500]
+  },
+  gridDivider: {
+    borderRight: "1px solid rgba(0, 0, 0, 0.12)"
+  },
+  mobileActionBtns: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: "8px",
+    paddingTop: "14px",
+    marginTop: "14px",
+    borderTop: theme => `1px solid ${theme.palette.grey[300]}`
+  },
+  mobileDialogContent: {
+    borderTop: theme => `1px solid ${theme.palette.grey[300]}`,
+    paddingTop: "14px"
+  }
+});
+export default styles;

package/dist/Editor/common/CustomDialog/styles.js

@@ -0,0 +1,80 @@
+const CustomDialogStyles = theme => ({
+  MuiBackdropRoot: {
+    opacity: "1",
+    transition: "opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
+  },
+  CustomDialogu: {
+    "& .MuiPaper-root": {
+      borderRadius: "12px 12px 0px 0px",
+      backgroundColor: `${theme?.palette?.greyshades?.light9} !important`,
+      "@media only screen and (min-width: 899px)": {
+        maxWidth: "400px",
+        border: `1px solid ${theme?.palette?.editor?.customDialogueBorder}`,
+        borderRadius: "12px"
+      }
+    },
+    "& .MuiDialogContent-root": {
+      padding: "20px 24px 8px 24px",
+      "& .MuiTypography-root": {
+        textAlign: "center",
+        fontFamily: "Inter, sans-serif",
+        fontSize: "14px",
+        fontWeight: 500,
+        color: theme?.palette?.editor?.textColor
+      }
+    },
+    "& .confirmBtn": {
+      backgroundColor: "#2563EB",
+      padding: "8px 12px",
+      color: "#ffffff",
+      fontWeight: 600,
+      fontSize: "14px",
+      opacity: 1,
+      borderRadius: "8px",
+      textTransform: "math-auto",
+      height: "36px",
+      padding: "0px 12px",
+      minWidth: "90px",
+      "&:hover": {
+        backgroundColor: "#2563EB"
+      },
+      "@media only screen and (max-width: 899px)": {
+        width: "50%"
+      }
+    },
+    "& .MuiDialogActions-root": {
+      justifyContent: "center",
+      paddingBottom: "20px"
+    },
+    "& .closeBtn": {
+      padding: "8px 12px",
+      color: theme?.palette?.editor?.customDialogueCloseBtnColor,
+      fontWeight: 600,
+      fontSize: "14px",
+      opacity: 1,
+      borderRadius: "8px",
+      textTransform: "math-auto",
+      height: "36px",
+      padding: "0px 12px",
+      minWidth: "90px",
+      backgroundColor: theme?.palette?.editor?.closeButtonBackground,
+      border: `1px solid ${theme?.palette?.editor?.customDialogueCloseBtnBorder}`,
+      "&:hover": {
+        backgroundColor: theme?.palette?.editor?.closeButtonBackground
+      },
+      "@media only screen and (max-width: 899px)": {
+        width: "50%"
+      }
+    },
+    "& .pullerRoot": {
+      padding: "8px 0"
+    },
+    "& .pullerGrid": {
+      width: "40px",
+      height: "5px",
+      backgroundColor: "#ccc",
+      borderRadius: "10px"
+    }
+  }
+});
+export default CustomDialogStyles;

package/dist/Editor/common/CustomSelect.js

@@ -0,0 +1,33 @@
+import { MenuItem, Select } from "@mui/material";
+import { fontFamilyMap } from "../utils/font";
+import { jsx as _jsx } from "react/jsx-runtime";
+function CustomSelect(props) {
+  const {
+    onChange,
+    options = [],
+    value
+  } = props;
+  return /*#__PURE__*/_jsx(Select, {
+    fullWidth: true,
+    value: value,
+    onChange: onChange,
+    className: "editor-dd",
+    style: {
+      fontFamily: fontFamilyMap[value],
+      width: "100%",
+      height: "36px",
+      borderRadius: "10px",
+      fontSize: "14px"
+    },
+    children: options.map((option, i) => {
+      return /*#__PURE__*/_jsx(MenuItem, {
+        value: option.value,
+        style: {
+          fontFamily: option.text
+        },
+        children: option?.label || option?.text
+      }, i);
+    })
+  });
+}
+export default CustomSelect;

package/dist/Editor/common/DnD/DragHandleButton.js

@@ -7,7 +7,7 @@ import { useEditorContext } from "../../hooks/useMouseMove";
 import { Transforms } from "slate";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const DRAGGABLE_TYPES = ["paragraph", "headingOne", "headingTwo", "headingThree", "grid"];
+const DRAGGABLE_TYPES = ["paragraph", "headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree", "grid"];
 const DragHandleStyle = fromPopper => {
   const handleDragStyle = fromPopper ? {
     position: "absolute",

package/dist/Editor/common/DnD/Draggable.js

@@ -1,7 +1,6 @@
 import React, { useEffect } from "react";
 import { useDraggable } from "@dnd-kit/core";
 import { Box } from "@mui/material";
-import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
 import { SectionDragIcon } from "../iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Draggable = props => {

package/dist/Editor/common/FontLoader/FontList.js

@@ -1,11 +1,3 @@
-export const defaultFonts = [
-// "EB Garamond",
-"Anton", "DM Serif Text", "Libre Baskerville", "Montserrat", "Open Sans", "Public Sans", "Raleway", "Space Mono", "Great Vibes", "Zeyada", "Allura", "Pinyon Script", "Dancing Script", "Gaegu", "Kite One", "Merriweather"];
-export const otherFonts = ["PoppinsRegular", "PoppinsBold", "Monaco", "Qwitcher Grypen", "Bulgarian Garamond", "Redacted Script", "Herr Von Muellerhoff", "Dawning of a New Day", "Coming Soon", "Engagement", "Ingrid Darling", "La Belle Aurore", "Mea Culpa", "The Girl Next Door", "Helvetica", "Georgia", "Times New Roman", "Courier New", "Impact"];
-export const googleFontList = ["Roboto", "Noto Sans JP", "Poppins", "Lato", "Inter", "Roboto Condensed", "Roboto Mono", "Oswald", "Noto Sans", "Nunito", "Nunito Sans", "Ubuntu", "Rubik", "Playfair Display", "Noto Sans KR", "Roboto Slab", "PT Sans", "Kanit", "Work Sans", "Lora", "DM Sans", "Mulish", "Quicksand", "Fira Sans", "Noto Sans TC", "Inconsolata", "Barlow", "Manrope", "IBM Plex Sans", "PT Serif", "Karla", "Titillium Web", "Heebo", "Noto Serif", "Nanum Gothic", "Noto Color Emoji", "Agdasima", "Bebas Neue", "Libre Franklin", "Mukta", "Outfit", "Josefin Sans", "Source Code Pro", "Jost", "Space Grotesk", "Hind Siliguri", "Arimo", "Cabin", "Barlow Condensed", "Dosis", "Fira Sans Condensed", "Bitter", "Archivo", "Figtree", "Noto Serif JP", "PT Sans Narrow", "Abel", "Noto Sans SC",
-// "Source Sans 3",
-"Hind",
-// "Exo 2",
-"Teko", "Oxygen", "Cairo", "Crimson Text", "Plus Jakarta Sans", "Overpass", "Pacifico", "Prompt", "Red Hat Display", "Varela Round", "Cormorant Garamond", "Assistant", "Comfortaa", "Lexend", "Signika Negative",
-// "M PLUS Rounded 1c",
-"Fjalla One", "Caveat", "IBM Plex Mono", "Arvo", "Lobster", "Schibsted Grotesk", "Chakra Petch", "Maven Pro", "Sora", "Kalam", "Onest", "Space Grotesk", "Outfit", 'Titillium Web', ...defaultFonts];
+const otherFonts = ["PoppinsRegular", "PoppinsBold", "Qwitcher Grypen", "Bulgarian Garamond", "Redacted Script", "Herr Von Muellerhoff", "Dawning of a New Day", "Coming Soon", "Engagement", "Ingrid Darling", "La Belle Aurore", "Mea Culpa", "The Girl Next Door"];
+const mostUsedGoogleFonts = ["Roboto", "Poppins", "Lato", "Inter", "Nunito", "Ubuntu", "Oswald", "Rubik", "Roboto Slab", "PT Sans", "Work Sans", "Lora", "Mulish", "DM Sans", "Fira Sans", "Quicksand", "Barlow", "Manrope", "IBM Plex Sans", "PT Serif", "Libre Franklin", "Bebas Neue", "Cabin", "Titillium Web", "Heebo", "Noto Serif", "Jost", "Source Code Pro", "Josefin Sans", "Dosis", "Fira Sans Condensed", "Archivo", "Noto Serif JP", "Crimson Text", "Cairo", "Pacifico", "Red Hat Display", "Assistant", "Comfortaa", "Lexend", "Fjalla One", "Caveat", "Arvo", "Lobster", "Schibsted Grotesk", "EB Garamond", "Sora", "Kalam", "Onest", "Space Grotesk", "Outfit", "Plus Jakarta Sans"];
+export const googleFontList = [...mostUsedGoogleFonts, ...otherFonts];

package/dist/Editor/common/FontLoader/FontLoader.js

@@ -1,7 +1,11 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import WebFont from "webfontloader";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import { defaultFonts, googleFontList, otherFonts } from "./FontList";
+import { googleFontList } from "./FontList";
+import CircularProgress from "@mui/material/CircularProgress";
+import Box from "@mui/material/Box";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const FontLoader = props => {
   const {
     otherProps,
@@ -10,65 +14,72 @@ const FontLoader = props => {
   const {
     setFontFamilies
   } = useEditorContext();
+  const [loading, setLoading] = useState(true);
   const loadFontsInBatches = (families, batchSize = 5, maxRetries = 3) => {
     let currentIndex = 0;
     let retryCount = 0;
-    function loadNextBatch() {
-      if (currentIndex >= families?.length) {
-        // console.log("All fonts have been loaded");
-        return;
-      }
-      const batch = families?.slice(currentIndex, currentIndex + batchSize);
-      const batchWithWeights = batch.map(font => `${font}:300,400,600,700`);
-      WebFont.load({
-        google: {
-          families: [...batchWithWeights]
-        },
-        classes: false,
-        timeout: 2000,
-        active: () => {
-          // console.log(`Fonts loaded successfully: ${batch}`);
-          currentIndex += batchSize;
-          retryCount = 0; // Reset retry count for the next batch
-          loadNextBatch();
-        },
-        inactive: () => {
-          // console.log(`Font loading failed for: ${batch}`);
-
-          if (retryCount < maxRetries) {
-            retryCount++;
-            // console.log(`Retrying batch (${retryCount}/${maxRetries})...`);
-            // Retry loading the same batch
-            loadNextBatch();
-          } else {
-            // console.log(
-            //   `Max retries reached for batch: ${batch}. Moving to the next batch.`
-            // );
+    let hideLoaderOn = 30;
+    const loadNextBatch = () => {
+      try {
+        if (currentIndex >= families?.length) {
+          // console.log("All fonts have been loaded");
+          setLoading(false);
+          return;
+        }
+        const batch = families?.slice(currentIndex, currentIndex + batchSize);
+        const batchWithWeights = batch.map(font => `${font}:300,400,600,700`);
+        WebFont.load({
+          google: {
+            families: [...batchWithWeights]
+          },
+          classes: false,
+          timeout: 2000,
+          active: () => {
+            // console.log(`Fonts loaded successfully: ${batch}`);
             currentIndex += batchSize;
             retryCount = 0; // Reset retry count for the next batch
             loadNextBatch();
+          },
+          inactive: () => {
+            // console.log(`Font loading failed for: ${batch}`);
+            if (retryCount < maxRetries) {
+              retryCount++;
+              // console.log(`Retrying batch (${retryCount}/${maxRetries})...`);
+              // Retry loading the same batch
+              loadNextBatch();
+            } else {
+              // console.log(
+              //   `Max retries reached for batch: ${batch}. Moving to the next batch.`
+              // );
+              currentIndex += batchSize;
+              retryCount = 0;
+              loadNextBatch();
+            }
           }
-        }
-      });
-    }
+        });
+      } catch (err) {
+        setLoading(false);
+      }
+    };
     loadNextBatch();
   };
   useEffect(() => {
-    let families = [...otherFonts, ...defaultFonts];
+    let families = [...googleFontList];
     if (!readOnly) {
       otherProps?.services("listGoogleFont", []).then(data => {
-        families = [...families, ...(data?.data || [])];
-        const filteredfamilies = families?.filter(font => !font?.includes("Material"));
+        families = [...(data?.data || [])];
         setFontFamilies({
           id: 1,
           format: "fontFamily",
           type: "fontfamilydropdown",
-          options: filteredfamilies || []
+          options: families || []
         });
         loadFontsInBatches(families);
       }).catch(err => {
         // console.log(err);
+        setLoading(false);
       });
+      // setLoading(true);
     } else {
       function correctFontArray(fontString) {
         let fontsArray = fontString.split(",");
@@ -88,11 +99,32 @@ const FontLoader = props => {
       let families = Array.from(fontSet);
       families = correctFontArray(families.join(", "));
       families = families?.map(font => font?.replace(/\"/g, ""));
-      families = families?.map(font => font?.replace(", sans-serif", "")); //This is temporary fix for patch
+      families = families?.map(font => font?.replace(", sans-serif", ""));
       families = families.filter(font => googleFontList.includes(font));
       loadFontsInBatches(families);
     }
+
+    // Set timeout to hide loader after 5 seconds
+    const timeoutId = setTimeout(() => {
+      setLoading(false);
+    }, 5000);
+    return () => clearTimeout(timeoutId);
   }, []);
-  return null;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: loading ? /*#__PURE__*/_jsx(Box, {
+      sx: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 99999,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      children: /*#__PURE__*/_jsx(CircularProgress, {})
+    }) : null
+  });
 };
 export default FontLoader;

package/dist/Editor/common/Icon.js

@@ -44,6 +44,16 @@ import ChervDown from "../assets/svg/ChervDown";
 import ChervUp from "../assets/svg/ChervUp";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const HeadingIcon = ({
+  variant
+}) => {
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      color: "#64748B"
+    },
+    children: variant
+  });
+};
 const iconList = {
   fontFamily: /*#__PURE__*/_jsx(FontFamilyIcon, {
     size: 20
@@ -76,6 +86,24 @@ const iconList = {
     size: 18,
     fill: "#64748B"
   }),
+  headingFour: /*#__PURE__*/_jsx(HeadingIcon, {
+    variant: "H4"
+  }),
+  headingFive: /*#__PURE__*/_jsx(HeadingIcon, {
+    variant: "H5"
+  }),
+  headingSix: /*#__PURE__*/_jsx(HeadingIcon, {
+    variant: "H6"
+  }),
+  paragraphOne: /*#__PURE__*/_jsx(HeadingIcon, {
+    variant: "P1"
+  }),
+  paragraphTwo: /*#__PURE__*/_jsx(HeadingIcon, {
+    variant: "P2"
+  }),
+  paragraphThree: /*#__PURE__*/_jsx(HeadingIcon, {
+    variant: "P3"
+  }),
   blockquote: /*#__PURE__*/_jsx(MdFormatQuote, {
     size: 20,
     fill: "#64748B",