@flozy/editor 4.0.1 → 4.0.2

package/dist/Editor/common/Icon.js

@@ -12,8 +12,25 @@ import ArrowRightIcon from "@mui/icons-material/ArrowRight";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import EmailRoundedIcon from '@mui/icons-material/EmailRounded';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import { AccordionTextFormatIcon, BoldTextFormatIcon, BulletedListTextFormatIcon, ButtonElementIcon, CarouselElementIcon, CheckListTextFormatIcon, ColorBoxElementIcon, DividerElementIcon, DocUploadElementIcon, EmbedElementIcon, EmojiElementIcon, FormElementIcon, GridElementIcon, ImageElementIcon, ItalicTextFormatIcon, LinkIconV2, OrderedListTextFormatIcon, SignatureElementIcon, TableElementIcon, TopBannerElementIcon, UnderlineTextFormatIcon, VideoElementIcon } from "./iconListV2";
+import SettingsIcon from "../assets/svg/SettingsIcon";
+import UndoIcon from "../assets/svg/UndoIcon";
+import RedoIcon from "../assets/svg/RedoIcon";
+import TextIcon from "../assets/svg/TextIcon";
+import AddElementIcon from "../assets/svg/AddElementIcon";
+import AddTemplateIcon from "../assets/svg/AddTemplateIcon";
 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
@@ -22,11 +39,11 @@ const iconList = {
     size: 20
   }),
   // bold: <MdFormatBold size={20} />,
-  bold: /*#__PURE__*/_jsx(BoldIcon, {
+  bold: /*#__PURE__*/_jsx(BoldTextFormatIcon, {
     size: 20
   }),
   // italic: <MdFormatItalic size={20} />,
-  italic: /*#__PURE__*/_jsx(ItalicIcon, {
+  italic: /*#__PURE__*/_jsx(ItalicTextFormatIcon, {
     size: 20
   }),
   // strikethrough: <MdStrikethroughS size={20} />,
@@ -34,7 +51,7 @@ const iconList = {
     size: 20
   }),
   // underline: <MdFormatUnderlined size={20} />,
-  underline: /*#__PURE__*/_jsx(UnderLineIcon, {
+  underline: /*#__PURE__*/_jsx(UnderlineTextFormatIcon, {
     size: 20
   }),
   headingOne: /*#__PURE__*/_jsx(BsTypeH1, {
@@ -49,6 +66,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"
@@ -77,31 +112,29 @@ const iconList = {
     size: 18,
     fill: "#64748B"
   }),
-  orderedList: /*#__PURE__*/_jsx(MdFormatListNumbered, {
+  orderedList: /*#__PURE__*/_jsx(OrderedListTextFormatIcon, {
     size: 18,
     fill: "#64748B"
   }),
-  unorderedList: /*#__PURE__*/_jsx(MdFormatListBulleted, {
+  unorderedList: /*#__PURE__*/_jsx(BulletedListTextFormatIcon, {
     size: 18,
     fill: "#64748B"
   }),
   // link: <MdInsertLink size={20} />,
-  link: /*#__PURE__*/_jsx(LinkIcon, {
+  link: /*#__PURE__*/_jsx(LinkIconV2, {
     size: 20
   }),
   // image: <MdImage size={20} />,
-  image: /*#__PURE__*/_jsx(ImageIcon, {
+  image: /*#__PURE__*/_jsx(ImageElementIcon, {
     size: 20
   }),
   // video: <MdVideoLibrary size={20} />,
-  video: /*#__PURE__*/_jsx(VideoIcon, {
-    size: 20
-  }),
+  video: /*#__PURE__*/_jsx(VideoElementIcon, {}),
   add: /*#__PURE__*/_jsx(MdAdd, {
     size: 20
   }),
   // table: <AiOutlineTable size={20} />,
-  table: /*#__PURE__*/_jsx(TableIcon, {
+  table: /*#__PURE__*/_jsx(TableElementIcon, {
     size: 20
   }),
   insertRowBelow: /*#__PURE__*/_jsx(AiOutlineInsertRowBelow, {
@@ -143,16 +176,16 @@ const iconList = {
   pen: /*#__PURE__*/_jsx(AiFillEdit, {
     size: 20
   }),
-  emoji: /*#__PURE__*/_jsx(MdEmojiEmotions, {
+  emoji: /*#__PURE__*/_jsx(EmojiElementIcon, {
     size: 20,
     fill: "#64748B"
   }),
-  grid: /*#__PURE__*/_jsx(GridIcon, {}),
-  accordion: /*#__PURE__*/_jsx(AccordionIcon, {}),
-  signature: /*#__PURE__*/_jsx(SignatureIcon, {}),
-  button: /*#__PURE__*/_jsx(ButtonIcon, {}),
-  carousel: /*#__PURE__*/_jsx(Carousal, {}),
-  form: /*#__PURE__*/_jsx(FormIcon, {}),
+  grid: /*#__PURE__*/_jsx(GridElementIcon, {}),
+  accordion: /*#__PURE__*/_jsx(AccordionTextFormatIcon, {}),
+  signature: /*#__PURE__*/_jsx(SignatureElementIcon, {}),
+  button: /*#__PURE__*/_jsx(ButtonElementIcon, {}),
+  carousel: /*#__PURE__*/_jsx(CarouselElementIcon, {}),
+  form: /*#__PURE__*/_jsx(FormElementIcon, {}),
   tableCellResizeLeft: /*#__PURE__*/_jsx(BsArrowBarRight, {
     size: 20
   }),
@@ -171,11 +204,11 @@ const iconList = {
   addRow: /*#__PURE__*/_jsx(FcAddRow, {
     size: 20
   }),
-  "check-list-item": /*#__PURE__*/_jsx(CheckboxIcon, {
+  "check-list-item": /*#__PURE__*/_jsx(CheckListTextFormatIcon, {
     size: 20
   }),
-  embed: /*#__PURE__*/_jsx(LinkIcon, {}),
-  topbanner: /*#__PURE__*/_jsx(IoIosImage, {
+  embed: /*#__PURE__*/_jsx(EmbedElementIcon, {}),
+  topbanner: /*#__PURE__*/_jsx(TopBannerElementIcon, {
     size: 20,
     fill: "#64748B"
   }),
@@ -191,8 +224,8 @@ const iconList = {
   }),
   appHeader: /*#__PURE__*/_jsx(AppHeader, {}),
   moreHorizantal: /*#__PURE__*/_jsx(MoreHorizontal, {}),
-  docsUpload: /*#__PURE__*/_jsx(DocsUpload, {}),
-  colorbox: /*#__PURE__*/_jsx(BsFillMenuButtonWideFill, {
+  docsUpload: /*#__PURE__*/_jsx(DocUploadElementIcon, {}),
+  colorbox: /*#__PURE__*/_jsx(ColorBoxElementIcon, {
     style: {
       fill: "#64748B"
     },
@@ -204,7 +237,7 @@ const iconList = {
   checkListButtonActive: /*#__PURE__*/_jsx(CheckListButtonActive, {}),
   excelIcon: /*#__PURE__*/_jsx(ExcelIcon, {}),
   csvIcon: /*#__PURE__*/_jsx(CsvIcon, {}),
-  divider: /*#__PURE__*/_jsx(DividerIcon, {}),
+  divider: /*#__PURE__*/_jsx(DividerElementIcon, {}),
   SearchIcon: /*#__PURE__*/_jsx(SearchIcon, {}),
   expandIcon: /*#__PURE__*/_jsx(ExpandIcon, {}),
   closeIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
@@ -244,7 +277,13 @@ const iconList = {
   checkedIcon: /*#__PURE__*/_jsx(CheckedIcon, {}),
   uncheckedIcon: /*#__PURE__*/_jsx(UncheckedIcon, {}),
   infinityIcon: /*#__PURE__*/_jsx(InfinityIcon, {}),
-  resetIcon: /*#__PURE__*/_jsx(ResetIcon, {})
+  resetIcon: /*#__PURE__*/_jsx(ResetIcon, {}),
+  pagesSettings: /*#__PURE__*/_jsx(SettingsIcon, {}),
+  undoIcon: /*#__PURE__*/_jsx(UndoIcon, {}),
+  redoIcon: /*#__PURE__*/_jsx(RedoIcon, {}),
+  textIcon: /*#__PURE__*/_jsx(TextIcon, {}),
+  addElement: /*#__PURE__*/_jsx(AddElementIcon, {}),
+  addTemplate: /*#__PURE__*/_jsx(AddTemplateIcon, {})
 };
 const Icon = props => {
   const {

package/dist/Editor/common/ImageList.js

@@ -45,16 +45,29 @@ const QuiltedImageList = props => {
     }, `img_upload_btn`) : null, (itemData || []).map(item => {
       const isSelected = (selected || []).find(f => f.img === item.img);
       return /*#__PURE__*/_jsxs(ImageListItem, {
+        // cols={item.cols || 1}
+        // rows={item.rows || 1}
+        sx: {
+          padding: "2px",
+          overflow: "hidden"
+          // position: "relative",
+        },
         children: [/*#__PURE__*/_jsx("img", {
           ...srcset(item.img, rowHeight || 121, item.rows, item.cols),
           alt: item.title,
-          loading: "lazy"
+          loading: "lazy",
+          style: {
+            width: "100%",
+            height: "145px",
+            borderRadius: "12px"
+            // display: "block",
+          }
         }), !readOnly ? /*#__PURE__*/_jsx(ImageListItemBar, {
           sx: {
             background: "none"
           },
-          position: "bottom",
-          actionPosition: "left",
+          position: "start",
+          actionPosition: "right",
           actionIcon: /*#__PURE__*/_jsx(IconButton, {
             onClick: onImageSelect(item, !isSelected),
             children: /*#__PURE__*/_jsx(CheckCircleIcon, {

package/dist/Editor/common/ImageSelector/ImageSelector.js

@@ -1,11 +1,12 @@
 import React, { useState } from "react";
-import { Button, Grid, Tab, Tabs, Dialog, DialogContent, DialogActions, DialogTitle, Typography, Divider } from "@mui/material";
+import { Button, Grid, Tab, Tabs, Dialog, DialogContent, DialogActions, DialogTitle, Typography, Divider, Box, IconButton } from "@mui/material";
 import Upload from "./Options/Upload";
 import ChooseAssets from "./Options/ChooseAssets";
 import AddLink from "./Options/AddLink";
 import Icon from "../Icon";
 import ImageSelectorStyles from "./Styles";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import { CloseIconImageUpload, ImageElementIcon } from "../iconListV2";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -52,11 +53,28 @@ const ImageSelector = props => {
     fullWidth: true,
     sx: classes.dialogWrapper,
     children: [/*#__PURE__*/_jsx(DialogTitle, {
-      children: /*#__PURE__*/_jsxs(Typography, {
-        sx: classes.titleTypo,
-        children: ["Add ", title]
+      children: /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        },
+        children: [/*#__PURE__*/_jsxs(Typography, {
+          sx: classes.titleTypo,
+          children: ["Add ", title]
+        }), /*#__PURE__*/_jsx(IconButton, {
+          sx: {
+            padding: "0px"
+          },
+          onClick: onClose,
+          children: /*#__PURE__*/_jsx(CloseIconImageUpload, {})
+        })]
       })
-    }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(DialogContent, {
+    }), /*#__PURE__*/_jsx(Divider, {
+      sx: {
+        boxShadow: "0px 4px 8px 0px #0000000A"
+      }
+    }), /*#__PURE__*/_jsx(DialogContent, {
       children: /*#__PURE__*/_jsxs(Grid, {
         container: true,
         children: [TAB_SHOW[title].length > 1 && /*#__PURE__*/_jsx(Grid, {
@@ -84,9 +102,7 @@ const ImageSelector = props => {
             }), /*#__PURE__*/_jsx(Tab, {
               className: `${isActive("choose")} ${TAB_SHOW[title].indexOf("choose") === -1 ? "hidden" : ""}`,
               sx: classes.tab,
-              icon: /*#__PURE__*/_jsx(Icon, {
-                icon: "media"
-              }),
+              icon: /*#__PURE__*/_jsx(ImageElementIcon, {}),
               iconPosition: "start",
               value: "choose",
               label: `Choose ${title}`
@@ -115,7 +131,12 @@ const ImageSelector = props => {
           })
         })]
       })
-    }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(DialogActions, {
+    }), /*#__PURE__*/_jsx(Divider, {
+      sx: {
+        boxShadow: "0px -4px 8px 0px #0000000A",
+        borderBottomWidth: "0px"
+      }
+    }), /*#__PURE__*/_jsxs(DialogActions, {
       sx: {
         p: 2
       },

package/dist/Editor/common/ImageSelector/Styles.js

@@ -86,7 +86,8 @@ const ImageSelectorStyles = theme => ({
   titleTypo: {
     fontSize: "16px",
     fontWeight: 500,
-    color: theme?.palette?.editor?.textColor
+    color: theme?.palette?.editor?.textColor,
+    fontFamily: 'Inter, sans-serif'
   },
   addLinkField: {
     "& .MuiOutlinedInput-input": {

package/dist/Editor/common/LinkSettings/NavComponents.js

@@ -134,10 +134,13 @@ export const SelectPage = props => {
   });
 };
 export const Trigger = props => {
-  return /*#__PURE__*/_jsx(Typography, {
+  const {
+    nav
+  } = props;
+  return /*#__PURE__*/_jsxs(Typography, {
     variant: "subtitle1",
     gutterBottom: true,
-    children: "Choosing this will trigger the next step"
+    children: ["Choosing this will trigger the ", nav.type, " step"]
   });
 };
 const scrollToOptions = [{

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

@@ -18,7 +18,8 @@ const MAP_COMPONENT = {
   webAddress: TextInput,
   email: TextInput,
   phone: TextInput,
-  actionTrigger: Trigger,
+  nextTrigger: Trigger,
+  prevTrigger: Trigger,
   scrollTopOrBottom: ScrollTopBottom,
   page: SelectPage
 };
@@ -35,11 +36,12 @@ export default function LinkSettings(props) {
     customProps,
     navType
   } = props;
+  const themeType = localStorage.getItem("themeType");
   const {
     isMobile
   } = customProps;
   const navOptions = getNavOptions(customProps.hideTools);
-  const classes = LinkSettingsStyles();
+  const classes = LinkSettingsStyles(themeType);
   const [nav, setNav] = useState(getNav(navType, navOptions));
   const [navValue, setNavValue] = useState(props?.navValue || "");
   const [openInNewTab, setOpenInNewTab] = useState(props.openInNewTab || false);

package/dist/Editor/common/LinkSettings/navOptions.js

@@ -3,8 +3,13 @@ export const getNavOptions = (hideTools = []) => {
     label: "None",
     value: ""
   }, {
-    label: "Trigger",
-    value: "actionTrigger"
+    label: "Next Trigger",
+    value: "nextTrigger",
+    type: "next"
+  }, {
+    label: "Previous Trigger",
+    value: "prevTrigger",
+    type: "previous"
   }, {
     label: "Web Address",
     value: "webAddress",

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

@@ -1,32 +1,35 @@
-const ButtonNavSettingsStyles = () => ({
+const ButtonNavSettingsStyles = themeType => ({
   dialogContainer: {
-    '& .MuiDialogContent-root': {
+    "& .MuiPaper-root": {
+      background: themeType === "dark" ? "#141720 !important" : "#ffffff !important"
+    },
+    "& .MuiDialogContent-root": {
       padding: "0px 20px"
     },
-    '& .MuiDialogActions-root': {
+    "& .MuiDialogActions-root": {
       padding: "10px"
     },
-    '& .MuiTypography-h6': {
+    "& .MuiTypography-h6": {
       fontWeight: 600,
       fontSize: "16px",
       paddingRight: "20px"
     },
     "& .MuiGrid-container": {
-      marginTop: '0px'
+      marginTop: "0px"
     },
     "& .MuiGrid-item": {
       padding: "14px"
     }
   },
   saveBtn: {
-    color: '#fff',
+    color: "#fff",
     background: "#2563EB",
     fontSize: "14px",
     fontWeight: 500,
     padding: "4px 24px",
     textTransform: "none",
     "&:hover": {
-      color: '#fff',
+      color: "#fff",
       background: "#2563EB"
     }
   },
@@ -43,7 +46,7 @@ const ButtonNavSettingsStyles = () => ({
     }
   },
   closeIcon: {
-    position: 'absolute',
+    position: "absolute",
     right: 8,
     top: 8,
     color: theme => theme.palette.grey[500]

package/dist/Editor/common/MentionsPopup/Styles.js

@@ -58,7 +58,7 @@ const usePopupStyles = theme => ({
         borderRadius: "0px",
         justifyContent: "start",
         "& svg": {
-          margin: "8px",
+          margin: "5.5px",
           width: "24px",
           height: "24px"
         },

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

@@ -1,15 +1,17 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
-import { Box, IconButton, Tooltip } from "@mui/material";
+import { Box, IconButton, Popper, Tooltip } from "@mui/material";
 import TuneIcon from "@mui/icons-material/Tune";
 import SectionPopup from "../../Elements/Grid/SectionPopup";
 import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import DragHandle from "../DnD/DragHandleButton";
 import { useEditorSelection } from "../../hooks/useMouseMove";
 import SectionStyle from "./styles";
+import useWindowResize from "../../hooks/useWindowResize";
 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 list_types = ["orderedList", "unorderedList"];
 const Section = props => {
   const classes = SectionStyle();
@@ -38,14 +40,33 @@ const Section = props => {
     flexDirection
   } = sectionAlignment || {};
   const path = ReactEditor.findPath(editor, element);
+  const anchorEl = useRef(null);
+  const popperEl = useRef(null);
+  const [size] = useWindowResize();
+  const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
+  const [isHovering, setIsHovering] = useState(false);
+  const onMouseEnter = () => {
+    setIsHovering(true);
+  };
+  const onMouseLeave = () => {
+    setIsHovering(false);
+  };
   const onSettings = () => {
     setOpenSettings(true);
   };
-  const Toolbar = () => {
+  const Toolbar = ({
+    fromPopper
+  }) => {
     return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
       component: "div",
       className: `element-toolbar no-border-button hr section-tw sectionIcon`,
-      style: {
+      style: fromPopper ? {
+        position: "unset",
+        marginLeft: "28px",
+        paddingTop: "4px",
+        marginRight: "10px",
+        height: "100%"
+      } : {
         left: "-28px",
         top: "3px"
       },
@@ -99,6 +120,8 @@ const Section = props => {
       alignItems: horizantal,
       justifyContent: vertical
     },
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
     children: [/*#__PURE__*/_jsxs(Box, {
       className: "ed-section-inner",
       sx: {
@@ -107,9 +130,36 @@ const Section = props => {
           ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
         }
       },
-      children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
-        ...props
-      }) : null, children, /*#__PURE__*/_jsx(Toolbar, {})]
+      ref: anchorEl,
+      children: [isHovering && isSectionFullWidth ? /*#__PURE__*/_jsx(Popper, {
+        open: isHovering && isSectionFullWidth,
+        anchorEl: anchorEl?.current,
+        placement: "top-start",
+        sx: {
+          zIndex: 9999
+        },
+        disablePortal: true,
+        ref: popperEl,
+        className: "sectionPopper",
+        children: /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            bgcolor: "background.paper",
+            background: "#F6F6F6",
+            height: "30px",
+            position: "relative"
+          },
+          children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
+            ...props,
+            fromPopper: true
+          }) : null, /*#__PURE__*/_jsx(Toolbar, {
+            fromPopper: true
+          })]
+        })
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
+          ...props
+        }) : null, /*#__PURE__*/_jsx(Toolbar, {})]
+      }), children]
     }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
       element: {
         ...element,

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

@@ -6,6 +6,9 @@ const SectionStyle = () => ({
       },
       "& .sectionIcon": {
         opacity: 1
+      },
+      "& .sectionPopper": {
+        opacity: 1
       }
     },
     "& .element-toolbar": {
@@ -13,6 +16,14 @@ const SectionStyle = () => ({
         display: "block"
       }
     },
+    "& .sectionPopper": {
+      "&:hover": {
+        opacity: 1
+      }
+    },
+    "& .sectionPopper": {
+      opacity: 0
+    },
     "& .sectionIcon": {
       opacity: 0,
       padding: "0px",

package/dist/Editor/common/Shorthands/elements.js

@@ -40,6 +40,60 @@ const ELEMENTS_LIST = [{
     icon: "headingThree"
   }),
   onInsert: editor => toggleBlock(editor, "headingThree", false)
+}, {
+  name: "Heading 4",
+  desc: "",
+  group: "Text",
+  type: "headingFour",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "headingFour"
+  }),
+  onInsert: editor => toggleBlock(editor, "headingFour", false)
+}, {
+  name: "Heading 5",
+  desc: "",
+  group: "Text",
+  type: "headingFive",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "headingFive"
+  }),
+  onInsert: editor => toggleBlock(editor, "headingFive", false)
+}, {
+  name: "Heading 6",
+  desc: "",
+  group: "Text",
+  type: "headingSix",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "headingSix"
+  }),
+  onInsert: editor => toggleBlock(editor, "headingSix", false)
+}, {
+  name: "Paragraph 1",
+  desc: "",
+  group: "Text",
+  type: "paragraphOne",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "paragraphOne"
+  }),
+  onInsert: editor => toggleBlock(editor, "paragraphOne", false)
+}, {
+  name: "Paragraph 2",
+  desc: "",
+  group: "Text",
+  type: "paragraphTwo",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "paragraphTwo"
+  }),
+  onInsert: editor => toggleBlock(editor, "paragraphTwo", false)
+}, {
+  name: "Paragraph 3",
+  desc: "",
+  group: "Text",
+  type: "paragraphThree",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "paragraphThree"
+  }),
+  onInsert: editor => toggleBlock(editor, "paragraphThree", false)
 }, {
   name: "Quote",
   desc: "",
@@ -125,15 +179,6 @@ const ELEMENTS_LIST = [{
     icon: "calenderNewIcon"
   }),
   onInsert: editor => insertDefaultEmbed(editor, "calendly", "")
-}, {
-  name: "Emoji",
-  group: "Elements",
-  desc: "",
-  type: "emoji",
-  renderComponent: rest => /*#__PURE__*/_jsx(EmojiButton, {
-    ...rest,
-    icoBtnType: "cmd"
-  })
 }, {
   name: "Table",
   group: "Elements",
@@ -146,6 +191,15 @@ const ELEMENTS_LIST = [{
     const table = new TableUtil(editor);
     table.insertTable(3, 3);
   }
+}, {
+  name: "Emoji",
+  group: "Elements",
+  desc: "",
+  type: "emoji",
+  renderComponent: rest => /*#__PURE__*/_jsx(EmojiButton, {
+    ...rest,
+    icoBtnType: "cmd"
+  })
 }, {
   name: "Divider",
   group: "Elements",

package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js

@@ -5,8 +5,7 @@ const accordionTitleBtnStyle = [{
     label: "Accordion Color",
     key: "accordionTextColor",
     type: "color",
-    needPreview: true,
-    hideGradient: true
+    needPreview: true
   }, {
     label: "Accordion Background Color",
     key: "accordionBgColor",

package/dist/Editor/common/StyleBuilder/buttonStyle.js

@@ -20,7 +20,8 @@ const buttonStyle = [{
         },
         children: option.text
       });
-    }
+    },
+    themeEnabled: true
   }, {
     label: "Font Size",
     key: "textSize",
@@ -44,7 +45,8 @@ const buttonStyle = [{
   }, {
     label: "Button Color",
     key: "bgColor",
-    type: "color"
+    type: "color",
+    themeEnabled: true
   }, {
     label: "Border Color",
     key: "borderColor",